第3章JavaScript基础
视频讲解
建议学时： 2
在前一章中学习了HTML语言，通过HTML可以利用标签描述一张网页，但是标签式的描述语言了网页在客户端进行的一些运算功能。本章学习JavaScript语言，JavaScript嵌入HTML页面内，是一种运行在客户端并由浏览器进行解释执行的脚本语言，具有控制程序流程的功能。本章将学习其基本语法及基本对象。
3.1JavaScript简介
JavaScript是一种网页脚本语言，虽然名字中含有Java，但它与Java语言是两种接近不同的语言。不过，JavaScript的语法和Java语言的语法非常类似。
JavaScript代码可以很容易地嵌入到HTML页面中。浏览器对JavaScript脚本程序进行解释执行。
3.1.1第一个JavaScript程序
JavaScript代码可以嵌入HTML中，它的基本写法如firstPage.html文件所示。
firstPage.html
图3？1页面运行效果
在保存为HTML页面后使用浏览器打开，将会弹出如图3？1所示的消息框。
注意： JavaScript代码块“”除了可以像上面一样写在之间外，还可以写到之间，其效果相同。
“”也可以写为“”。
JavaScript与Java一样，对大小写是敏感的。
在JavaScript中注释有3种写法，一种是HTML注释的写法“”，还有两种和Java语言相同，分别为“//单行注释”和“/*多行注释*/”。
用户除了可以将JavaScript代码嵌入HTML中之外，还可以专门将JavaScript代码写在单独的文件中。
code.js
window.alert("第一个JavaScript程序");
然后在另外的HTML页面中插入以下代码来导入该文件。
此外，在HTML代码中可以写多个JavaScript代码块。
3.1.2JavaScript语法
1. 变量的定义
JavaScript中的变量为弱变量类型，即变量的类型根据它被赋值的类型改变，定义一个变量使用的格式如下。
var变量名
比如定义变量arg就可以使用“var arg”。如果将一个字符串赋给它，它就是String类型； 如果将一个数组赋给它，它就是数组类型。
下面的var.html文件是一些变量定义的应用例子，代码如下。
var.html
需要注意的是，在JavaScript中变量未声明就使用是不会报错的，但很容易出现不可预知的错误，所以建议所有变量先声明后使用。
另外，函数Number(字符串)可以将字符串转为数值； 函数String(数值)可以将数值转为字符串。
2. 函数的定义
在JavaScript中定义一个函数的基本格式如下。
function 函数名(参数列表){
return 值;
}
用户也可以在使用中直接匿名定义，格式如下。
var arg1=function(参数列表){
return 值;
}
下面的fun.html文件是一个函数定义的应用实例，代码如下。
fun.html
其运行结果如图3？2所示。
图3？2页面运行效果
实际上，JavaScript的语法和Java的语法基本类似，因此这里不作详细讲述。以上介绍的几个知识点是JavaScript与Java有差别的语法，其他的常用语句与Java类似，比如if判断语句，在JavaScript中的写法如下。
又如for循环的写法如下。
以上写法是与Java一样的。
下面用循环举一个实际的例子。编写一个恶意程序，用户打开，会不断弹出消息框。其代码如“恶意网页.html”文件所示。
恶意网页.html
该代码运用了JavaScript中的循环，使得消息框怎么点都不会结束，而且无法关掉浏览器，只能通过关闭进程结束。读者可以进行实验。
3.2JavaScript内置对象
除了可以在代码里面进行简单的编程之外，还可以通过JavaScript提供的内置对象对网页进行操作，内置对象由浏览器提供，可以直接使用，不用事先定义。例如本章第1个例子中的“window.alert("第一个JavaScript程序")”，其中的window就是一个内置对象。
使用最多的内置对象有以下4个，并且本书之后的学习将主要围绕这4个对象展开。
（1） window： 负责操作浏览器窗口，负责窗口的状态、开/闭等。
（2） document： 负责操作浏览器载入的文档(HTML文件)，从属于window。
（3） history： 可以代替后退(前进)按钮访问历史记录，从属于window。
（4） location： 访问地址栏，也从属于window。
注意： 如果一个对象从属于另一个对象，在使用时用“.”隔开，例如window.document.XXX，但是如果从属于window对象，window可以省略，例如window.document.XXX可以写为document.XXX。
3.2.1window对象
window对象的作用如下。
1. 出现提示框
window对象可以跳出提示框，主要有如下功能。
？ window.alert("内容")： 出现消息框。
？ window.confirm("内容")： 出现确认框。
？ window.prompt("内容")： 出现输入框。
下面window1.html文件中代码的功能是显示一些提示框。
window1.html
用浏览器打开该文件将会依次出现如图3？3所示的提示框。
图3？3提示框运行效果
浏览器弹出提示框后载入页面将会停滞，直到用户做出操作动作，其中消息框的实际运用最为广泛，确认框其次，输入框则较为少见。
2. 打开、关闭窗口
window对象还用于控制窗口的状态和开/闭。打开窗口主要使用window对象的open()函数。
下面的window2.html文件是一个打开窗口的应用实例，代码如下。
window2.html
在本例中首先让窗口的状态栏显示字符串“出现新窗口”，然后打开一个新窗口window1.html，命名为new1，并指定宽度、高度和其位置。运行结果如图3？4所示。
在源程序中，“newWindow.close();”表示关闭newWindow。
window对象的status属性值将显示在浏览器左下角的状态栏中，如图3？5所示。
图3？4运行效果
图3？5项目运行效果
综上所述，window.open()在网页制作中的使用非常广泛，参数有3个，第1个是新窗口的地址，第2个是新窗口的名称，第3个是新窗口的状态，其中新窗口状态可设置如下属性。
？ toolbar： 是否有工具栏，可选值为1和0。
？ location： 是否有地址栏，可选值为1和0。
？ status： 是否有状态栏，可选值为1和0。
？ menubar： 是否有菜单栏，可选值为1和0。
？ scrollbars： 是否有滚动条，可选值为1和0。
？ resizable： 是否能改变大小，可选值为1和0。
？ width和height： 窗口的宽度和高度，用像素表示。
？ left和top： 窗口左上角相对于桌面左上角的x和y坐标。
各属性值用逗号隔开，如下面的代码所示。
newWindow=window.open("window1.html","new1",
"toolbar=0,width=300,height=300,top=500,left=500");
3. 定时器
window对象负责管理和控制页面的定时器，定时器的作用是让某个函数隔一段时间之后运行一次，格式如下。
timer=window.setTimeout("需要运行的函数","时间(用毫秒计)");
如果要清除定时器，可以用如下代码。
clearTimeout(timer);
下面的timer.html是一个定时器的应用实例，代码如下。
timer.html
其运行结果如图3？6所示。
图3？6定时器运行效果
这样，每隔1秒钟状态栏中的数字将会加1，直到100，之后将一直持续100的状态，不再改变。
设置定时器可以使网页定时刷新，这在一些要求计时功能的网页中经常被用到。
3.2.2history对象
history对象包含用户的浏览历史等信息，使用这个对象是因为它可以代替后退(前进)按钮访问历史记录，该对象从属于window。
history对象最常用的函数如下。
？ history.back()： 返回上一页，相当于单击浏览器上的后退按钮。
？ history.forward()： 返回下一页，相当于单击浏览器上的前进按钮。
？ window.history.go(n)： n为整数，正数表示向前进n格页面，负数表示向后退n格页面。
下面的history.html文件是history对象的应用实例，代码如下。
history.html
在网页输出方面，最常见的函数是writeln()。
下面的document1.html文件是writeln()函数的应用实例，代码如下。
document1.html
图3？8运行结果
其运行结果如图3？8所示。
writeln()函数为输出一些简单却重复的代码提供了很大的便利，在下面的例子中将要使用表格显示一个8×8的国际象棋棋盘，正常的方法需要写一个8行8列表格的代码，但会使源代码非常冗长。下面的chess.html文件是使用writeln()函数实现的方法。
chess.html
图3？9棋盘运行效果
借助writeln()和循环方法省去了很多HTML代码的编写。该例的运行结果如图3？9所示。
2. 设置网页的属性
使用document对象可以进行一些简单网页属性的设置，例如网页的标题、颜色等，并且可以得到网页的某些属性，例如当前地址。其比较常用的设置包括通过document.title来访问标题，通过document.location来获取当前网页的地址等。
下面的document2.html文件是一个设置网页属性的应用实例，代码如下。
document2.html
var account=document.form1.account.value;
下面的document3.html文件是访问表单元素的例子，其中有两个文本框、一个按钮，输入两个数字，单击“求和”按钮，将显示两个数字的和。其代码如下。
document3.html
3. 在下面的JavaScript语句中，（）定义了一个整型变量并赋值为10。
A. var if=10B. var 1arg=10
C. var arg1=10.0D. var arg1=10
4. window.setTimeout("fun()",1000)表示的意思是（）。
A. 间隔1秒后，fun()函数被调用1次
B. 间隔1000秒后，fun()函数被调用1次
C. 间隔1秒后，fun()函数被调用1000次
D. 间隔1毫秒后，fun()函数被调用1000次
5. window对象的（）属性用来指定浏览器状态栏中显示的临时消息。
A. titleB. statusC. toolbarD. location
6. 在history对象中不能实现网页前进效果的方法是（）。
A. forward()B. back()C. go(1)D. go(2)
7. 在浏览器的状态栏中显示“这是状态栏”消息的代码是（）。
A. window.status="这是状态栏"
B. window.status("这是状态栏")
C. status("这是状态栏")
D. status("这是状态栏","")
8. 下列打开新窗口的代码中正确的是（）。
A. window.open("window2.html","new")
B. window.open("window2.html","new","")
C. window.open("window2.html")
D. window.open("new","window2.html")
9. 在代码
1. 编写一个金额找零的系统，用输入框输入一个整数，表示找零的数量，数值为1~100。假如系统中有50、20、10、5、1这5种面额的纸币，显示每种纸币应该找的数量。例如78元应该为50元1张、20元1张、5元1张、1元3张。
2. 在表单中输入5本书的价格，显示这5本书价格的和。
3. 用document对象在屏幕上打印100个“欢迎”。
4. 用表单输入10本书的价格，然后显示这10本书的优选价格、大力度优惠价格和平均价格。
