JavaScript程序设计基础教程（慕课版）（第2版） 实训指导-2.1在HTML中使用JavaScript---2.6用位运算符实现加减运算.docx
实训案例名称：在HTML中使用JavaScript
1．任务介绍
分别运用上面介绍的两种在HTML中引用JavaScript的方式，在页面上弹出alert警告框“欢迎学习JavaScript！”。
2．任务目标
学会常见的两种在HTML中引用JavaScript的方式。
3．实现思路
（1）将script/script脚本嵌入在页面的body/body标签之间，并在script/script脚本之间编写alert()警告框。
（2）将alert()警告框写在单独的JavaScript文件中，然后在页面上引入外部JavaScript文件。
4．实现代码
两种不同实现方式的代码如脚本2-3和脚本2-4所示。
脚本2-3.html
!DOCTYPEhtml
html
head
title在HTML中使用JavaScript/title
/head
body
script
alert(欢迎学习JavaScript！);
/script
/body
/html
脚本2-4.html
!DOCTYPEhtml
html
head
title在HTML中使用JavaScript/title
/head
body
scriptsrc=test-02.js
/script
/body
/html
test-02.js
alert(欢迎学习JavaScript！);
5．运行结果
第1种实现方式见脚本2-3，运行结果如图2.3所示。
第2种实现方式见脚本2-4，运行结果如图2.4所示。
图2.3任务2-1运行结果1图2.4任务2-1运行结果2
实训案例名称：变量赋值
1．任务介绍
定义一个名为mynum的变量，并赋值为8。
2．任务目标
学会JavaScript变量的声明赋值方式。
3．实现思路
用var关键字声明变量，用=给变量赋值。
4．实现代码
varmynum=8;
5．运行结果
该任务没有输出结果，只是定义变量和赋值。
实训案例名称：运用变量提升
1．任务介绍
分析脚本2-11.html中的代码，判断输出结果。
2．任务目标
理解JavaScript变量作用域概念及变量提升的运用。
3．实现思路
（1）用var声明的变量存在变量提升，且变量提升只是提升变量的声明，变量赋值并不会提升；
（2）在函数外声明的变量为全局变量；在函数体内声明的变量为局部变量，且只能在当前函数体内访问；
（3）声明变量时如果没有使用var关键词，直接赋值的变量为全局变量。
4．实现代码
脚本2-11.html
html
head
/head
body
scripttype=text/javascript
vara,b;
(function(){
console.log(a);//1
console.log(b);//2
vara=b=3;
console.log(a);//3
console.log(b);//4
})();
console.log(a);//5
console.log(b);//6
/script
/body
/html
分析如下：
这里最关键的是理解清楚“vara=b=3”这条语句，实质上可以拆解为“vara=b;b=3;”，那么这段代码可以重写如下：
html
head
/head
body
scripttype=text/javascript
vara,b;
(function(){
console.log(a);//1
console.log(b);//2
b=3;
vara=b;
console.log(a);//3
console.log(b);//4
})();
console.log(a);//5
console.log(b);//6
/script
/body
/html
代码首先用语句“vara,b”声明了全局变量a和b；然后在匿名函数内声明了局部变量a和全局变量b；所以行1和行2处的a和b都是声明了但未初始化；b=3这里重写了全局变量b的值，所以行3和行4的a和b值为3；行5打印的是全局变量a显然是未初始化的；行6打印的是全局变量