JavaScript脚本基础.ppt

网页设计与制作教程 (第2版),机械工业出版社,第6章 JavaScript脚本基础,6.1 JavaScript语言概况 6.1.1 JavaScript的运行环境 6.1.2 JavaScript程序的引入 6.2 JavaScript的基本数据结构 6.2.1 基本数据类型 6.2.2 常量 6.2.3 变量 6.2.4 表达式和运算符,6.3 JavaScript的程序构成 6.3.1 程序控制流程 6.3.2 函数 6.3.3 事件驱动及事件处理 6.4 基于对象的JavaScript语言 6.4.1 对象概念的引入 6.4.2 在JavaScript中使用对象 6.4.3 JavaScript常用内部对象 6.4.4 Web页面信息交互 习题6,6.1 JavaScript语言概况 6.1.1 JavaScript的运行环境 1.概念 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。 JavaScript弥补了CGI静态网页的不足，承担了大量客户端动态页面的工作。 基于对象 事件驱动 指在页面中执行了某种操作所产生的动作。如按下鼠标、移动窗口、选择菜单等。 安全性能 不允许访问本地硬盘，不能将数据存入Server，不允许对网络文档进行修改和删除。,2.JavaScript和Java的区别,6.1.2 JavaScript程序的引入 【例6-1】在HTML文档中嵌入JavaScript的脚本。 document.write(“第一个JavaScript例子！“) alert(“欢迎进入JavaScript世界！“) ,如图6-1和图6-2所示，是程序运行的结果。,说 明,JavaScript区分大小写 例如，document.write( )不能写成Document.write( ) 否则将无法得到需要的效果。 JavaScript的注释语句 分单行注释和多行注释： / 单行注释 /* 多行注释 多行注释 */,6.2 JavaScript的基本数据结构 6.2.1 基本数据类型 JavaScript有6种数据类型。主要的类型有number、string、object以及Boolean类型，其他两种类型为null和undefined。 6.2.2 常量 1. 字符型常量 2. 数值型 3. 布尔型常量 4. 空值 5. 特殊字符,6.2.3 变量 变量用来存放程序运行过程中的临时值，这样在需要用这个值的地方就可以用变量来代表。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。 1. 变量的命名 2. 变量的类型 3. 变量的声明及其作用域 变量的声明和赋值语句var的语法为： var 变量名称 = 初始值,6.2.4 表达式和运算符 【例6-2】停留时间的计算。 pageOpen = new Date(); function stay() pageClose = new Date(); minutes = (pageClose.getMinutes() -pageOpen.getMinutes(); seconds = (pageClose.getSeconds()- pageOpen.getSeconds(); time = (seconds + (minutes * 60); alert(“您刚才在窗口中停留了“ + time + “秒钟“); ,6.3 JavaScript的程序构成 JavaScript脚本程序是由控制语句、函数、对象、方法、属性等组成的。JavaScript所提供的语句分为以下几大类。 6.3.1 程序控制流程 1. 条件和分支语句 if.else、switch (1) if.else语句 if.else语句的格式为： if (条件) 语句段1; else 语句段2;,(2) switch语句 分支语句switch根据一个变量的不同取值采取不同的处理方法。switch语句的格式为： switch (条件) case label1 : 语句段1； case label2 : 语句段2; case label3 : 语句串3; default : 语句段3; 如果表达式取的值同程序中提供的任何一条语句都不匹配，将执行default中的语句。,2. 循环语句for、while、break、continue、for.in (1) for循环语句 for循环语句的格式为： for (初始化; 条件; 增量) 语句段; for实现条件循环，当条件成立时，执行语句段，否则跳出循环体。 (2) while循环语句 while循环语句的格式为： while (条件) 语句段; ,对象操作语句with、this、new new语句的语法： 新对象名称=new 真正的对象名 【例6-3】 分时问候,6.3.2 函数 function语句的格式为： function 函数名称(参数1, 参数2, . ) 语句段; . return 表达式; / return语句指明将返回的值。 参数是传递给函数使用的值，其值可以是常量、变量或表达式。通过指定函数名（实参）来调用一个函数。必须使用return将值返回。,6.3.3 事件驱动及事件处理 1. 基本概念 2. 事件处理程序 格式为： function 事件处理名(参数表) 事件处理语句集； ,3. 事件驱动 onClick onBlur onChang onLoad onSelect Unload onFocus Mouseover 【例6-4】 小心地震,6.4 基于对象的JavaScript语言 6.4.1 对象概念的引入 6.4.2 在JavaScript中使用对象 1. 对象的定义 JavaScript对象的定义方法如下： Function Object(属性表) Tp1=prop1 Tp2=prop2 . This.meth=FunctionName1; This.meth=FunctionName2; . 在定义对象时，可以指明该对象的属性和方法。,2. 创建对象实例 一旦对象定义完成后，就可以为该对象创建一个实例： NewObject = New object(); 3. 对象属性和方法的使用 对象属性的引用可由下列三种方式之一实现： l 使用点“.”运算符。 l 通过对象的下标实现引用。 l 通过字符串的形式实现。 【例6-5】 显示浏览器的名称和版本号。,4. 数组 (1) 定义对象的数组 Function arrayName(size) This.length=Size; for(var X=; X=size;X+) thisX=0; Return this; 其中arrayName是定义数组的一个名子，Size是有关数组大小的值（1-size），即数组元素的个数。通过for循环对一个当前对象的数组进行定义，最后返回这个数组。JavaScript中的数组是从1到size。,(2) 创建数组实例 当数组定义完成后，必须为该数组创建一个数组实例： Myarray=New arrayName(n); 并赋予初值： Myarray1=“字串1“; Myarray2=“字串2“; Myarray3=“字串3”; . Myarrayn=“字串n“; 当给数组赋了初值后，就可以在以后的程序设计中直接引用了。,6.4.3 JavaScript常用内部对象 1. 串对象 string对象是JavaScript的内部静态对象。所谓静态对象，是指在引用该对象的属性或方法时不需要为它创建实例。 (1) 串对象的属性 string对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。 (2) 串对象的方法 string对象的方法共有19个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。 2. 日期及时间对象,6.4.4 Web页面信息交互 1. 浏览器对象的层次性 在Web浏览器中，主要包括以下常用对象： (1) 浏览器对象（Navigator） (2) 窗口对象（Windows） Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性，并包括对象Location、History、Document等。 (3) 位置对象（Location） Location对象提供了与当前打开的URL一起工作的方法和属性。 (4) 历史对象（History） History对象提供了与历史清单有关的信息。 (5) 文档对象（Document） Document中有三个主要对象：Links、Anchor、Form。,2. 窗体（Form）对象与交互性 下面举例说明在JavaScript程序中如何使用窗体（Form）对象实现Web页面信息交互。 此JavaScript程序在客户端执行，这样可以防止调用CGI程序，减少占用服务器和网络资源的情况。 【例6-6】 输入姓名检查,JavaScript的使用方式,脚本置于标记中间 直接嵌入HTML窗体或链接中 eg: 关闭窗口 使用src属性应用外部脚本文件 *.js文件的优点：共