1、第6章 JavaScript网页特效,本章主要内容,6.1 JavaScript简介 6.2 在网页中插入JavaScript的方法 6.3 JavaScript的基本语法 6.4 JavaScript对象 6.5 JavaScript事件 6.6 JavaScript特效实例,6.1 JavaScript简介,JavaScript是一种被嵌入HTML网页之中的基于对象和事件驱动编程的脚本语言。脚本实际上就是一段程序，用来完成某些特殊功能。脚本程序分为运行在服务器端的服务器脚本（如ASP、JSP等），和运行在客户端的脚本，JavaScript就属于后者。,6.1 JavaScript简介,Ja
2、vaScript就是几乎被所有浏览器支持地被广泛应用的脚本语言，具有以下几个特点： JavaScript是一种脚本编写语言，采用小程序段的方式实现编程，也是一种解释性语言，提供了一个简易的开发过程。 JavaScript是一种基于对象和事件驱动的语言，同时也可以看作是一种面向对象的语言。 JavaScript是一种简单的语言。 JavaScript是一种安全性语言。 JavaScript具有跨平台性。,6.2 在网页中插入JavaScript的方法,【例6-1】在HTML文档中，利用JavaScript脚本显示“第一个JavaScript的小实例”字样，同时弹出对话框，显示“欢迎光临！”，代码
3、如下：JavaScript实例document.write(“第一个JavaScript的小实例“);alert(“欢迎光临！“);,6.2.2 在HTML文档中嵌入脚本程序,JavaScript脚本代码格式为：JavaScript语言代码;JavaScript语言代码;属性language=“JavaScript“指出使用的脚本语言是JavaScript。标记内部定义了若干JavaScript语句和函数。常被插入或之间，多数情况下应放到标记之间，这样可以让JavaScript程序代码先于其他代码被加载执行。,6.2.3 链接脚本文件,可以把脚本保存在一个扩展名为.js的文本文件中，供需要该脚
4、本的多个HTML文件引用，有利于重复利用。要引用外部脚本文件，使用script标记的src属性指定外部脚本文件的URL。其格式为：type=“text/javascript“属性定义文件的类型是javascript。Src属性定义.js文件的URL。 如果使用通过这种链接外部脚本的方式，则浏览器只使用外部文件中的脚本，并忽略任何位于之间的脚本。,6.2.3 链接脚本文件,【例6-2】把例6-1改为链接脚本文件，运行过程和结果相同，代码如下：JavaScript实例脚本文件test.js的内容为： document.write(“第一个JavaScript的小实例“); alert(“欢迎光临！
5、“);,6.2.4 在标记内添加脚本,可以在HTML表单的input标记内添加脚本，以响应输入的事件。 【例6-3】 在input标记中添加JavaScript的脚本，代码如下：JavaScript实例JavaScript实例,6.3 JavaScript的基本语法,JavaScript脚本语言同其他语言一样，有基本的数据类型、表达式和算术运算符以及程序的基本框架结构。,6.3.1 常量,JavaScript的常量通常又称字面常量，它是不能改变的数据，主要包括： 整型常量 可以使用十进制、十六进制、八进制表示其值。 实型常量 由整数部分加小数部分表示，如54.2、100.7。可以使用科学或标准
6、方法表示：4E5、1.3e4等。 字符型常量 使用单引号（）或双引号（“）引起来的一个或几个字符。如“I am a student“、“123“等。,6.3.1 常量（续）,布尔型常量 只有两个值的状态，true或false。主要用来代表一种状态来判断下一步该如何执行。 空值 空值null表示什么也没有。例如，试图引用没有定义的变量，则会返回一个null值。 特殊字符 有些以反斜杠“”开头的不可显示的特殊字符，通常表示特定含义，称为控制字符。例如，“n”表示换行，“t”表示Tab符号。,6.3.2 变量,变量是用来存放程序运行过程中临时信息的容器。对于变量必须明确变量的命名、变量的类型、变量的
7、声明及变量的作用域。 变量的命名 变量名称可以包含字母（区分大小写）、数字、下划线（“_”）或美元符（“$”），但第一个字符不能是数字，不能使用JavaScript中的关键字作为变量，如var、int等。在对变量命名时，最好把变量的意义与其代表的意思对应起来，以方便记忆。 变量的类型 变量在使用时可以不做声明，变量的类型是在赋值时根据数据的类型来确定的。但是，应该养成在使用变量之前先进行声明的好习惯。,6.3.2 变量（续）,变量的声明 在JavaScript中，变量在使用之前，先使用var关键字进行。例如： var username;或var username=“zhangsan“; 前面声
8、明的方式没有赋值，而后面在声明的同时进行了赋值。 变量的作用域 JavaScript中变量分为全局变量和局部变量。通常声明于函数内部的属于局部变量，声明于script标记内但函数外的则属于全局变量。不用作用域的变量在各自作用域内发挥作用。,6.3.3 运算符,运算符是用于完成操作的一系列符号，在JavaScript中有算术运算符、字符串运算符、比较运算符、布尔运算符等。 算术运算符 JavaScript中的算术运算符有单目运算符和双目运算符。其中双目运算符主要包括+（加）、-（减）、*（乘）、/（除）、%（取模）。单目运算符主要包括+（递加1）、-（递减1）。 字符串运算符 字符串运算符“+”
9、用于连接两个字符串。例如：“ab“+“12“。,6.3.3 运算符（续）,比较运算符 比较运算符的运算过程是首先对其操作数进行比较，再返回一个true或false值。有6个比较运算符：（大于）、=（大于等于）、=（等于）、!=（不等于）。 布尔运算符 布尔运算符也称为逻辑运算符，主要包括!（取反）、&（逻辑与）、|（逻辑或）。,6.3.4 表达式,表达式就是变量、常量及运算符的集合。 【例6-4】显示几个表达式的运算结果，代码如下：JavaScript表达式var exp1 = 2 + 3 4 ;var exp2 = (1=2) | (54是否正确？“ + exp1 + “);document
10、.write(“(1=2) | (5首先声明两个变量exp1和exp2，同时将表达式“2 + 3 4”和表达式“(1=2) | (56)”的值赋给两个变量。document.write()函数能够把括号里表达式的值输出。,6.3.5 程序控制流语句,if-else条件语句 if-else语句是最基本的控制语句，通过对表达式的判断，根据布尔型的返回值来决定程序的运行分支。基本格式如下： if(表达式) 分支语句1; else 分支语句2; 当表达式为true时，执行分支语句1；否则执行分支语句2。若if或else后的语句有多行，则必须使用花括号将其括起来。,6.3.5 程序控制流语句,switc
11、h语句 当判断条件比较多时，为了使程序更加清晰，可以使用switch语句。基本格式如下： switch(表达式) case 值1：分支语句1;break;case 值2：分支语句2;break;default:分支语句N; 使用switch语句时，表达式的值将与每个case语句中的常量作比较。如果相匹配，则执行该case语句后的代码；如果没有一个case的常量与表达式的值相匹配，则执行default语句。当然，default语句是可选的。,6.3.5 程序控制流语句,for循环语句 for语句用于实现条件循环，即当条件成立时，执行循环体语句，否则跳出循环体。基本格式如下： for(初始化;条件
12、;增量) 循环体语句; for循环语句的执行步骤为： 执行“初始化”部分，给计数器变量赋初值。 判断“条件”是否为真，如果为真则执行循环体，否则就退出循环体。 执行循环体语句之后，执行“增量”部分。 重复步骤和步骤，直到退出循环。,6.3.5 程序控制流语句,while循环语句 该语句与for语句一样，当条件为真时，重复循环，否则退出循环。基本格式如下： while(条件) 循环体语句; 在while语句中，条件语句只有一个，当条件不符合时跳出循环。它与for语句的主要区别在于：使用for语句一般有明确的循环次数，而while循环对复杂的语句效果更特别。 在使用for循环或while循环语句中
13、，有时会使用到break语句或continue语句。break语句可以使循环从for或while循环中跳出；continue语句则使程序跳过循环内剩余的语句而进入下一次循环。,6.3.6 函数,函数定义方法如下： function 函数名(形参列表) 函数体;return 表达式; 在定义的函数括号内可以列出形参，形参用来接受调用函数时传递给函数使用或操作的值，return则用于设定函数的返回值。值得注意的是，JavaScript中几乎所有地方都是对大小写敏感的。,6.3.6 函数,【例6-5】写一个JavaScript函数evenSum用于求两个数字之间偶数之和，调用该函数计算10到50之间
14、的偶数之和，代码如下：JavaScript函数function evenSum(start, end) var sum = 0;for(i = start; i ,6.4 JavaScript对象,网页最终都通过与用户的交互操作，在浏览器中显示出来。JavaScript将浏览器本身、网页文档以及网页文档中的HTML元素等都用相应的内置对象来表示，其中一些对象是作为另外一些对象的属性而存在的，这些对象之间的层次关系统称为DOM（Document Object Model，文档对象模型）。在脚本程序中访问DOM对象，就可以实现对浏览器本身、网页文档以及网页文档中的HTML元素的操作，从而控制浏览器
15、和网页元素的行为和外观。下面介绍几个重要的浏览器内部对象。,6.4.1 window对象,window对象处于对象层次的最顶端，它提供了处理窗口的方法和属性，每一个window对象代表一个浏览器窗口。 window对象的常用方法有： open(url, windowName, parameterList)：根据页面地址、窗口名称、窗口风格打开一个窗口。 alert(text)：弹出警告框。 confirm(text)：弹出确认框。 prompt(text, defaultText)：弹出提示框，参数为提示信息和默认值。,6.4.2 document对象,document对象包含当前网页的各种特
16、征。 【例6-7】利用document对象的write()方法在网页上输出两个变量的和，代码如下：document对象的write方法var num1 = 5;var num2 = 10;document.write(num1 + num2);,6.4.3 location对象,location对象描述的是某一个窗口对象所打开的地址。 【例6-8】利用location对象的href属性实现页面跳转，代码如下：location对象,6.4.4 history对象,history对象是指浏览器的浏览历史。 【例6-9】利用history对象实现后退、前进和刷新的操作，代码如下：history对象,
17、6.5 JavaScript事件,JavaScript是基于对象的语言，而基于对象的基本特征就是采用事件驱动。通常鼠标或键盘的动作称之为事件，而由鼠标或键盘的动作引发的一连串程序动作，称之为事件驱动。在JavaScript中，对象的事件处理可以直接使用JavaScript代码，也可以使用JavaScript内部函数，还可以使用自己编写的函数。JavaScript事件主要包括以下几种：,6.5 JavaScript事件,单击事件onClick 用户单击鼠标按键时可产生onClick事件，同时onClick指定的函数或代码将被调用执行。 改变事件onChange 当text或textarea元素内
18、的字符值改变或select下拉列表状态改变时发生该事件。 选中事件onSelect 当text或textarea元素中的文字被选中时引发该事件。 获得焦点事件onFocus 当用户单击text或textarea以及select元素时，即将光标落在文本框、编辑框或下拉框时会产生该事件。 鼠标经过事件onMouseOver 鼠标经过事件是当鼠标位于元素上方时所引发的事件。,6.6 JavaScript特效实例,6.6.1 动态显示时间 很多网页都能显示当前的时间，这主要是通过调用window对象的setTimeout方法来实现。6.6.2 验证表单 用户在提交表单数据时，经常进行客户端的简单验证，如用户名是否为空，密码长度是否符合要求，电子邮件地址是否合法等。这些操作都交给JavaScript代码来完成验证。 6.6.3 跟随鼠标的文字 经常在一些博客或有意思的网页上可以看到鼠标跟随文字的效果，其实是JavaScript代码的作用，阅读简单的跟随鼠标文字的代码可以制作出非常个性化的网页效果。 6.6.4 复选框的操作 与用户的友好交互非常重要，例如在一些邮件系统的收件箱中经常用户会存放许多信件，如果想进行全部删除操作，可以点击“全选”选中所有邮件，然后删除。这种“全选”“取消选择”的操作就可以通过JavaScript来完成。,
