一、什么是JavaScript
JavaScript简称“JS ”是一种轻量级的客户端“脚本语言”,用来在网页中添加一些动态效果与交互功能;可以部署在多种环境,最常见的部署环境是浏览器。所谓“脚本语言”,指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序的操作方法。
二、 JavaScript的起源(即历史)
JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发(这哥们在两周之内设计出了JavaScript语言。你没看错,这哥们只用了10天时间。)。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。
之所以将 LiveScript 更名为 JavaScript,是因为 JavaScript 是受 Java 的启发而设计的,因此在语法上它们有很多相似之处 ,JavaScript 中的许多命名规范也都借鉴自 Java,还有一个原因就是为了营销,蹭 Java 的热度。同一时期,微软和 Nombas(一家名为 Nombas 的公司)也分别开发了 JScript 和 ScriptEase 两种脚本语言,与 JavaScript 形成了三足鼎立之势。它们之间没有统一的标准,不能互用。为了解决这一问题,1997 年,在 ECMA(欧洲计算机制造商协会)的协调下,Netscape、Sun、微软、Borland(一家软件公司)组成了工作组,并以 JavaScript 为基础制定了(ECMAScript)。
JavaScript与ECMAScript的关系:ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。在日常场合,这两个词是可以互换的。
三、JavaScript的组成
1.ECMAScript:也就是JavaScript的基础语法。
2.DOM:全称叫做Document Object Model(页面文档模型)可以通过DOM提供的接口对页面上的各种元素进行操作(大小,位置,颜色等)。
3.BOM:全称Browser Object Model(浏览器对象模型),可以与浏览器窗口进行互动的对象结构,可以操作浏览器窗口 ,例如:弹出框,控制浏览器跳转,获取分配率等,这里也是在基础学习完成后再进行BOM学习,由此可见JavaScript基础语法的重要性。
四、如何使用JS?
1. 使用script标签,一般而言都是放在head标签中
2. 编写js文件,通过script标签中的src属性引入,可以在同一个界面中引入多个js文件,执行顺序与引入顺序一致。<!-- 外部式引入 --> <script src="js/sb.js" type="text/javascript" charset="utf-8"></script>
五、JS的调试
1.浏览器 : 控制台(Console)
2.console
.log() 打印信息(日志输出)
.info() (普通信息输出)console.log('这是控制台日志输出'); console.info('这是普通信息输出'); document.write('网页输出 直接看到'); document.write('<h1>标题</h1>');
六、基本语法
1.JavaScript的语法和Java语言类似,每个语句以 ; 结束,语句块用{}
2.JavaScript并不强制要求在每个语句的结尾加 ;
3.// 行注释
4./* */ 块注释// 单行注释 /* 你好 我好 大家好 多行注释 */
5.JavaScript严格区分大小写
七、JS中的变量与数据类型
1.在JS中,所有的变量都是使用var关键字声明
2.并且变量的值与类型都可以发生改变
3.使用 typeof 可以查看数据类型// typeof() 查看变量的类型 var myname = '张三'; console.log(typeof(myname)); console.log(typeof(true));
4.Number
① JavaScript不区分整数和浮点数,统一用Number表示
② NaN : 非数字
1) 1 / "a"
2) 非数字不能使用==比较,需要调用isNaN()方法
③ Infinity : 无穷大
④ parseInt() : String -> 整数
⑤ parseInt() : String -> 小数
⑥ % 求余
⑦ / 除法
1)由于精度问题会出现结果不精确
2)可以调用.fixed()方法保留小数点位数// 取整 取余 console.log(10/3); console.log(10%3);
5.String
①.可以使用‘’和“”
②.使用``反引号可以创建模板字符串
6.Boolean
① || 或者
② && 并且
③ ! 单目运算符
④ 比较运算符
1) ==
转换类型再比较
2) ===
比较类型与内容// == === 都是恒等于 // == 比较值的内容 // === 比较值的内容以及值的类型 var a = 1; var b = 1; console.log("== "+(a==b)); console.log("=== "+(a===b)); var aa = '1'; var bb = 1; console.log("== "+(aa==bb)); console.log("=== "+(aa===bb));
7.Object
默认为null值
8.undefined
未初始化的变量//undefined 未定义类型,没有给变量赋值 var age; console.log(age);
八、JS中的弹窗
1.alert :提示框
2.confirm :询问框
3.prompt :输入框
//提示框
alert('123');
//输入框
prompt('请输入你的姓名');
//询问框
confirm('你确定要分手吗?');
九、基本结构语句
1. if结构
// 判断一个数字是否偶数 var f = 10; if(f%2==0){ console.log("偶数"); }else { console.log("奇数"); }
// 定义三个变量 求最大值 var a1 = 33; var a2 =23; var a3 = 11; if(a1 > a2 && a1 > a3){//假设a1最大 console.log(a1); }else if(a2 > a1 && a2 > a3){ console.log(a2); }else if(a3 > a1 && a3 > a2){ console.log(a3) }
2.switch结构
// 判断当week=11时的状态 var week = 11; switch(week){ case 1: console.log("吃肉"); // break; case 2: console.log("吃火锅"); break; default: console.log("吃土"); break; }
3.while结构
// while循环输出1-100 var i = 1; while(i<=100){ document.write(i+"<br>"); i++; }
// 输出1-100的和 var i = 1; var sum = 0; while(i<=100){ sum+=i; i++; } console.log(sum);
4.for结构
// for循环打印 for(var i = 1;i<=100;i++){ console.log(i); }
简单案例:
1.打印四边形
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body style="text-align: center;"> <script type="text/javascript"> var a = prompt('请输入正方形的行数:') if (a <= 10) { for (var b = 0; b < a; b++) { for (var c = 0; c < a; c++) { document.write("# ") } document.write("<br>") } } else { for (var b = 0; b < 10; b++) { for (var c = 0; c < 10; c++) { document.write("# ") } document.write("<br>") } } </script> </body> </html>
2.获取问候语
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>时间数</title> <script type="text/javascript"> var a = prompt("请输入当前的小时数") switch(a){ case "6": case "7": case "8": case "9": case "10": case "11": document.write("上午好!!!"); break; case "12": case "13": case "14": case "15": case "16": case "17": document.write("下午好!!!"); break; default: document.write("晚上好!!!"); } </script> </head> <body> </body> </html>
3.简单语句
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // 获取输入项中的内容借助DOM操作中的一个语法 //可以根据标签所提供的唯一ID值来获取 //语法 document.getElementById("标签的id属性值"); // window.onload = function(){//最后执行的} function add(){ var a1 = document.getElementById('a1'); console.log(a1.value);//获取内容 alert(a1.value) var a2 = document.getElementById('a2'); var sum = parseInt(a1.value)+parseInt(a2.value); alert(sum); var a3 = document.getElementById('a3'); a3.value = sum; } </script> </head> <body> <!-- 利用DOM操作来动态获取页面标签上的内容实现效果 --> 数字一: <input value = '12' type="text" id="a1"> <br> 数字二: <input type="text" id="a2"> <br> 结果: <input type="text" id="a3"> <br> <input type="button" value="加法运算" onclick="add()"> </body> </html>