1、JavaScript 脚本编程,内容提要,JavaScript概述词法规则基本数据类型运算符和表达式核心语句函数复合数据类型对象模型事件处理,2018/3/4,网页设计与制作,2,JavaScript概述,JavaScript是由Netscape和Sun公司联合开发的基于对象和事件驱动的客户端脚本编程语言，通过它与HTML、XML、DOM、CSS、JavaApplet等技术的有机结合，可以开发出具有很强交互性的动态页面。JavaScript是介于Java与HTML之间，基于对象和事件驱动的编程语言。,2018/3/4,网页设计与制作,3,脚本,服务器端脚本首先在服务器执行，将得到的结果转换成h
2、tml流进行输出如asp,php,jsp等客户端脚本由服务器下载到客户端的浏览器中，由客户端的浏览器执行,2018/3/4,网页设计与制作,4,动作和事件,动作和事件 动作是由JavaScript和HTML代码组成的，该代码能执行各种特殊任务，如弹出一个信息框、播放一段音乐等。用户可以使用“行为”面板直接向页面中添加动作。事件是浏览器生成的消息，指示该页的用户执行了某种操作。如果用户预先设置了某个动作，则事件将触发相应的动作发生，如弹出一个信息框等。,2018/3/4,网页设计与制作,5,JavaScript,JavaScript的特点：JavaScript是一种脚本语言，采用小程序段的方式实
3、现编程，可以直接嵌入HTML文档中。JavaScript是一种基于对象的语言，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。基于Java基本语句和控制流；没有严格的数据类型。安全性：只能通过浏览器进行信息浏览或动态交互。跨平台性：依赖于浏览器本身，与操作环境无关。,2018/3/4,网页设计与制作,6,JavaScript,2018/3/4,网页设计与制作,7,第一个JavaScript程序,实时显示时间当前时间：+ s+; /-,2018/3/4,网页设计与制作,8,第一个JavaScript程序,使用JavaScript编写程序的特点：JavaScript是一种脚本语言，采用小程
4、序段的方式实现编程，可以直接嵌入HTML文档中。在标识之间可以加入JavaScript脚本。可将标识放在或之间。将JavaScript脚本置于之间，可使之在主页和其余部分代码之前装载。JavaScript是一种基于对象的语言，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。,2018/3/4,网页设计与制作,9,第一个JavaScript程序,使用JavaScript编写程序的特点：对于不支持JavaScript的浏览器，所有在中的代码均被忽略；对于支持JavaScript的浏览器，则执行中的代码。/ 是JavaScript的注释标识，其后的信息不被浏览器解释。,2018/3/4,网页
5、设计与制作,10,浏览器对象,2018/3/4,网页设计 课程简介,11,JavaScript概述,Navigator对象的常用属性和取值,2018/3/4,网页设计 课程简介,12,JavaScript概述,Window对象的常用方法,2018/3/4,网页设计 课程简介,13,JavaScript概述,Document中的对象,2018/3/4,网页设计 课程简介,14,JavaScript概述,JavaScript中的事件,2018/3/4,网页设计 课程简介,15,JavaScript概述,基于对象事件驱动解释性语言简单性实时性跨平台性安全性,JavaScript的特点,2018/3/
6、4,网页设计与制作,16,JavaScript脚本的引入方法通过与标签对引入。将JavaScript脚本代码放在与之间，浏览器自动识别该标签对并逐行解释其间的代码。通过标签的src属性引入。将包含在与标签对之间的代码放入扩展名为.js的脚本文件中，然后在HTML文档中通过标签的src属性来引用该脚本文件。例如: ,在网页中嵌入JavaScript脚本,2018/3/4,网页设计与制作,17,JavaScript脚本的引入方法通过JavaScript伪协议引入。伪协议是非标准化通信机制的统称，JavaScript伪协议的一般格式为：javascript: URL。其中“javascript:”是
7、伪协议说明符，URL的主体可以是任意的JavaScript代码，多个语句之间使用分号进行分隔。 例如： ,在网页中嵌入JavaScript脚本,2018/3/4,网页设计与制作,18,JavaScript脚本的引入方法通过HTML的事件属性引入。HTML元素的事件属性用于指示如何处理特定的事件，方法是将脚本指定为事件属性的值，以响应系统或用户的动作。事件属性名称由事件名称加一个“on”前缀构成，如onClick，onMouseOver等。 例如： ,在网页中嵌入JavaScript脚本,2018/3/4,网页设计与制作,19,嵌入JavaScript脚本的位置 JavaScript脚本可放在H
8、TML文档中任何需要的位置。一般来说，可以在与标签对、与标签对之间放置JavaScript脚本代码。放置在与标签对之间的JavaScript脚本一般用于提前载入，以响应用户的页面动作，且一般不影响HTML文档的浏览器显示格局。如果需要在页面载入时动态生成页面内容，应将JavaScript脚本放置在与标签对之间。,在网页中嵌入JavaScript脚本,2018/3/4,网页设计与制作,20,标识符 在JavaScript中，标识符用来命名变量和函数。标识符的第一个字符必须是字母、下划线或美元符号，后续字符可以是字母、数字、下划线或美元符号。例如：x、user_name、U571、_pswd、$m
9、oney都是合法的标识符。不能使用JavaScript中的关键字作为标识符。在JavaScript中定义了20多个关键字，这些关键字是JavaScript内部使用的，如var、for、function、if等，它们都不能作为标识符使用。,词法规则,2018/3/4,网页设计与制作,21,词法规则,关键字和保留字 关键字是JavaScript语法自身的一部分，具有特殊的意义，不能用作标识符。 保留字是为将来的关键字而保留的单词，由于未来浏览器可能会实现这些保留字，因此它们最好也不要作为标识符使用。,JavaScript的保留字,2018/3/4,网页设计与制作,22,词法规则,大小写敏感Java
10、Script是一种区分大小写的脚本语言。在输入关键字、变量名、函数名以及其它所有标识符时，都必须采取一致的字符大小写形式。例如， “username”、“userName”、“UserName”代表三个不同的变量名。许多JavaScript对象的属性和它们所代表的HTML标签的属性同名，在HTML中这些标签的属性可以以任意大小写的方式输入，但是在JavaScript中它们通常都有固定的大小写格式。例如，body标签的背景颜色属性可以声明为“bgcolor”、“bgColor”或者“BGCOLOR”，但代表body标签的document对象的背景颜色属性只能声明为“bgColor”。,2018/
11、3/4,网页设计与制作,23,词法规则,空白字符空白字符包括空格、制表符和换行符等，在编写脚本时占据一定的空间，以增强代码的可读性，方便开发人员查看和维护。空格是使用最为频繁的空白字符，常被用作分隔符。,例1：sum = 3 + 10 ; sum=3+10;,例2：var x=typeof JavaScript;,2018/3/4,网页设计与制作,24,词法规则,语句结束符JavaScript使用分号作为语句结束符，多个语句可写在不同行或同一行。例如： var str=Welcome to JavaScript World!; document.write(str); 也可写成：var str
12、=Welcome to JavaScript World!; document.write(str);语句分行后，作为语句结束符的分号可以省略。 例如： var str=Welcome to JavaScript World! document.write(str),注意：省略分号不是一个好的编程习惯，它可能导致程序产生一种不明确的状态。,2018/3/4,网页设计与制作,25,词法规则,注释 JavaScript有单行注释和多行注释两种形式。单行注释以“/”开头，处于“/”和一行结尾之间的任何文本都被当作注释而被浏览器忽略掉。多行注释以“/*”开头，以“*/”结尾，处于“/*”和“*/”之间
13、的文本被当作注释，这些文本可以跨越多行，但是其中不能有嵌套的注释。 例如： /这是单行注释 /* *这是多行注释 *它是多行的 *它是多行的 */,2018/3/4,网页设计与制作,26,基本数据类型,基本数据类型定义了一组不可再分的值的集合，以及作用于该集合上的操作集。JavaScript支持的基本数据类型包括数值型、字符串型和布尔型，分别对应于不同的存储空间。基本数据类型和常量 当某种基本类型的数据项直接出现在程序中时，称之为常 量，即值不能被改变的量。数值型：最基本的数据类型，包括整型和浮点型整型常量：可以使用十进制、八进制或十六进制表示，如1234、0745、0x93C等。浮点型常量：
14、可以使用小数或指数方法表示，如12.34、5.9e7、4.3e-5等。特殊的数值型常量：Infinity表示正无穷大， -Infinity表示负无穷大，NaN表示“不是一个数值”、“没有意义的运算”或“无法转换成数值类型”。如5/0的运算结果为Infinity，-5/0的运算结果为-Infinity，0/0的运算结果为NaN。,2018/3/4,网页设计与制作,27,基本数据类型,数值型：最基本的数据类型，包括整型和浮点型,2018/3/4,网页设计与制作,28,基本数据类型,基本数据类型和常量字符串型：表示文本的数据类型字符串常量：用 或 括起来的若干个字符，如JavaScript、This
15、 is a book of C+等。转义字符：以反斜杠 开头的具有特殊功能的字符。,2018/3/4,网页设计与制作,29,基本数据类型,基本数据类型和常量布尔型：表示状态的数据类型布尔常量：只有两个可能的值true和false，表示“真”和“假”两种状态。如53的运算结果为true，“Chinese” 10) count = 0; 例2：if(count 10) count = 0; alert(count被重设为0!); ,核心语句,2018/3/4,网页设计与制作,48,双分支选择。其一般格式如下： if (表达式) 语句1; else 语句2;功能：如果表达式的计算结果为true，执行
16、语句1；否则执行语句2。例如： var num=Math.round(Math.random( )*100); if(num%2=0) alert(num+是一个偶数); else alert(num+是一个奇数);,核心语句,2018/3/4,网页设计与制作,49,多分支选择。其一般格式如下： if (表达式1) 语句1; else if (表达式2) 语句2; else if (表达式n) 语句n; else 语句n+1;功能：如果表达式1的值为true，执行语句1；否则计算表达式2的值，如果返回true则执行语句2；如果所有表达式都不成立，则执行else后面的语句n+1。例如：var a
17、ge=parseInt(prompt(请输入您的年龄,); if (age10) alert(黄口小儿); else if (age20) alert(年方弱冠); else if (age30) alert(三十而立); else if (age=b) if (a=c) max=a; else max=c; else if (b=c) max=b; else max=c; alert(max=+max);,核心语句,2018/3/4,网页设计与制作,51,JavaScript程序构成,例 根据用户的不同操作在页面上显示不同的信息,演示,2018/3/4,网页设计与制作,52,switch语句
18、 switch语句用来实现多分支选择结构，其一般形式如下： switch (表达式) case 常量表达式1: 语句1; break; case 常量表达式2: 语句2; break; case 常量表达式n: 语句n; break; default: 语句n+1; 功能：比较表达式的值是否与某一个case后面的常量表达式的值相等，如果相等，则执行相应的语句；如果所有case后面常量表达式的值都不与表达式的值相等，则执行default后面的语句。default子句可以省略，即所有常量表达式的值都不满足条件时直接跳过switch语句执行其后的语句。,核心语句,2018/3/4,网页设计与制作,5
19、3,例如： var age=parseInt(prompt(请输入您的年龄,); age=Math.floor(age/10); switch(age) case 0: alert(黄口小儿); break; case 1: alert(年方弱冠); break; case 2: alert(三十而立); break; case 3: alert(四十不惑); break; default: alert(英雄迟暮); break语句用来直接跳出整个switch语句。如果省略break语句，在执行完某个case子句后会继续执行下一个case子句，直到遇上break语句或者所有的子句都被执行完为止
20、。,核心语句,2018/3/4,网页设计与制作,54,JavaScript程序构成,例 根据用户的不同操作在页面上显示不同的信息var name=prompt(请输入您的大名：, ); /弹出提示窗口var user=wzy; switch(name) case : document.write(您没有输入任何信息!); break; case null: document.write(您取消了操作!); break; case user: document.write(欢迎 ,name, 光临!); break; default: document.write(欢迎 ,name, 加入!);
21、,演示,2018/3/4,网页设计与制作,55,JavaScript程序构成,switch语句break的作用： 当某个case后面的语句段执行完后，直接跳出整个switch控制语句。如果省略break，在执行完某个case后面的语句段后会继续执行下一个case后面的语句段，直到遇上break或者所有的语句段都被执行完。思考：省略上例中所有的break语句，当用户在提示窗口中执行不同操作时，页面上会显示什么信息？,演示,2018/3/4,网页设计与制作,56,循环语句 循环语句允许在逻辑条件成立时反复执行相同 的语句(循环体)。while语句一般格式：while (表达式) 语句;功能：计算表
22、达式的值，如果计算结果为true，反复执行语句；否则结束循环。语句可以是单行语句或者复合语句。例如：用while语句编写求1+3+5+99累加和的程序： var sum=0, i=1; while(i=100) sum+=i; i+=2; ,核心语句,2018/3/4,网页设计与制作,57,do-while语句一般格式：do 语句; while (表达式);功能：反复执行语句，直到表达式的计算结果为false时结束循环。例如：用do-while语句编写求1+3+5+99累加和的程序： var sum=0, i=1; do sum+=i; i+=2; while(i=100);,核心语句,201
23、8/3/4,网页设计与制作,58,for语句一般格式：for (表达式一; 表达式二; 表达式三) 语句;功能： (1) 计算表达式一的值； (2) 计算表达式二的值，如果计算结果为true，进入(3)，否 则进入(6)； (3) 执行语句； (4) 计算表达式三的值； (5) 回到(2)继续执行； (6) 结束循环，执行for语句的后续语句。例如：用for语句编写求1+3+5+99累加和的程序： var sum=0, i; for(i=1; i100) break; if(i%2=0) continue; sum+=i; ,核心语句,2018/3/4,网页设计与制作,61,标签语句在Java
24、Script中，语句可以在其前面加上标签，一般格式为： 标识符: 语句;标签必须是合法的JavaScript标识符，不能是关键字或保留字。标签可以与程序中的变量或函数同名。通过给语句加标签，达到在程序其他位置引用该语句的目的。 例如：outer: for(i=0; ii) document.write(); continue outer; k=i*j; document.write(k+ ,核心语句,2018/3/4,网页设计与制作,62,在JavaScript中，函数用来封装那些在程序中反复使用的程序段，常作为事件处理程序被调用。函数的基本组成函数定义 一般格式：function 函数名(参
25、数列表) 函数体; return 返回值; 说明：function：定义函数的关键字。函数名：函数的标识符，表示函数的入口地址。参数列表：包含若干个参数，不同参数间用逗号间隔。当调用函数时，可以向参数列表中传入常量值、变量值或其它表达式的值，函数内的程序语句可以通过参数名称来引用传进来的这些值。参数列表也可以为空。函数体：实现函数功能的程序语句。return：指定函数返回值的关键字。return语句负责将函数的执行结果返回到程序中函数调用的位置，一个函数中最多只能有一条return语句。,函数,2018/3/4,网页设计与制作,63,例 定义一个求阶乘的函数 function fact (n)
26、 var s = 1, i; for( i=1; i=n; i+ ) s=s*i; return s; ,函数,2018/3/4,网页设计与制作,64,函数调用 一般格式：函数名(实参列表); 说明：实参列表中包含若干个实际参数，参数之间用逗号间隔，实参个数应与函数定义时参数列表中的参数个数相等。实参的表示形式可以是常量、变量或者表达式，所有实参都必须得到具体的赋值。函数调用时的参数传递都是以值传递的方式进行的。也就是说，在函数中将某个传进来的变量值改变了，并不会影响原来函数外的变量值。 例如：function inc(n) n+; alert(n); var x = 5; inc(x); a
27、lert(x);,函数,函数调用,程序运行结果： n=6 x=5,2018/3/4,网页设计与制作,65,函数的作用域 在函数外部声明的变量称为全局变量，全局变量在程序的 任何地方都可以使用。在函数内部声明的变量称为局部变 量，局部变量应用关键字var声明，没有用var声明的局部 变量在函数执行完毕后会变成全局变量。,程序运行结果： sum = 8,程序运行结果： y 未定义,function inc(n) y = +n; return y;var x = 3;var sum = inc(x) + y;alert(sum);,function inc(n) var y = +n; return
28、 y;var x = 3;var sum = inc(x) + y;alert(sum);,函数,2018/3/4,网页设计与制作,66,函数的嵌套与递归函数的嵌套：嵌套定义是指在定义一个函数的过程中定义另一个函数，定义在某个函数内部的函数称为局部函数，其作用域局限在所属的框架函数。嵌套调用是指在调用一个函数的过程中又调用另一个函数。 例如：function lcm(m, n) /框架函数，求最小公倍数 var res; function gcd(m, n) /局部函数，求最大公约数 var a, b, t; if(mn) t=m; m=n; n=t; a=m; b=n; while(r=a%b)!=0) a=b; b=r; return b; res=m*n/gcd(m, n); /嵌套调用gcd函数 alert(m+ 和 +n+ 的最小公倍数是 +res); ,
