三、JavaScript基本语法
1、JavaScript代码嵌入方式
①HTML文档内
- JavaScript代码要写在script标签内
- script标签可以写在文档内的任意位置
- 为了能够方便查询或操作HTML标签（元素）script标签可以写在body标签后面
可以参考简化版的HelloWorld
<!-- 在HBuilderX中，script标签通过打字“sc”两个字母就可以直接完整生成 --> <script type="text/javascript"> // 下面是同样实现HelloWorld功能的简化版代码 document.getElementById("helloBtn").onclick = function() { alert("Hello simple"); }; </script>
②引入外部JavaScript文档
在script标签内通过src属性指定外部xxx.js文件的路径即可。但是要注意以下两点：
- 引用外部JavaScript文件的script标签里面不能写JavaScript代码
- 先引入，再使用
- script标签不能写成单标签引入方式如下：
<body> </body> <!-- 使用script标签的src属性引用外部JavaScript文件，和Java中的import语句类似 --> <!-- 引用外部JavaScript文件的script标签里面不能写JavaScript代码 --> <!-- 引用外部JavaScript文件的script标签不能改成单标签 --> <!-- 外部JavaScript文件一定要先引入再使用 --> <script src="/pro02-JavaScript/scripts/outter.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 调用外部JavaScript文件中声明的方法 showMessage(); </script>
2、声明和使用变量
①JavaScript数据类型
- 基本数据类型
- 数值型：JavaScript不区分整数、小数
- 字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样。
- 布尔型：true、false
在JavaScript中，其他类型和布尔类型的自动转换。
true：非零的数值，非空字符串，非空对象
false：零，空字符串，null，undefined
例如："false"放在if判断中
// "false"是一个非空字符串，直接放在if判断中会被当作『真』处理 if("false"){ alert("true"); }else{ alert("false"); }
- 引用类型
- 所有new出来的对象
- 用[]声明的数组
- 用{}声明的对象
②变量
- 关键字：var
- 数据类型：JavaScript变量可以接收任意类型的数据
- 标识符：严格区分大小写
- 变量使用规则
- 如果使用了一个没有声明的变量，那么会在运行时报错
Uncaught ReferenceError: b is not defined - 如果声明一个变量没有初始化，那么这个变量的值就是undefined
3、函数
①内置函数
内置函数：系统已经声明好了可以直接使用的函数。
[1]弹出警告框
alert("警告框内容");
[2]弹出确认框
用户点击『确定』返回true，点击『取消』返回false
var result = confirm("老板，你真的不加个钟吗？"); if(result) { console.log("老板点了确定，表示要加钟"); }else{ console.log("老板点了确定，表示不加钟"); }
[3]在控制台打印日志
console.log("日志内容");
②声明函数
写法1：
function sum(a, b) { return a+b; }
写法2：
var total = function() { return a+b; };
写法2可以这样解读：声明一个函数，相当于创建了一个『函数对象』，将这个对象的『引用』赋值给变量total。最后加的分号不是给函数声明加的，而是给整体的赋值语句加的分号。
③调用函数
JavaScript中函数本身就是一种对象，函数名就是这个 『对象』的『引用』。而调用函数的格式是：函数引用()。
function sum(a, b) { return a+b; } var result = sum(2, 3); console.log("result="+result);
或：
var total = function() { return a+b; } var totalResult = total(3,6); console.log("totalResult="+totalResult);
4、对象
JavaScript中没有『类』的概念，对于系统内置的对象可以直接创建使用。
①使用new关键字创建对象
// 创建对象 var obj01 = new Object(); // 给对象设置属性和属性值 obj01.stuName = "tom"; obj01.stuAge = 20; obj01.stuSubject = "java"; // 在控制台输出对象 console.log(obj01);
②使用{}创建对象
// 创建对象 var obj02 = { "soldierName":"john", "soldierAge":35, "soldierWeapon":"gun" }; // 在控制台输出对象 console.log(obj02);
③给对象设置函数属性
// 创建对象 var obj01 = new Object(); // 给对象设置属性和属性值 obj01.stuName = "tom"; obj01.stuAge = 20; obj01.stuSubject = "java"; obj01.study = function() { console.log(this.stuName + " is studying"); }; // 在控制台输出对象 console.log(obj01); // 调用函数 obj01.study();
或：
// 创建对象 var obj02 = { "soldierName":"john", "soldierAge":35, "soldierWeapon":"gun", "soldierShoot":function(){ console.log(this.soldierName + " is using " + this.soldierWeapon); } }; // 在控制台输出对象 console.log(obj02); // 调用函数 obj02.soldierShoot();
④this关键字
this关键字只有两种情况：
- 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
- 在函数里面：this关键字指向调用函数的对象
// 直接打印this console.log(this); // 函数中的this // 1.声明函数 function getName() { console.log(this.name); } // 2.创建对象 var obj01 = { "name":"tom", "getName":getName }; var obj02 = { "name":"jerry", "getName":getName }; // 3.调用函数 obj01.getName(); obj02.getName();
