《网页设计》-王移芝-电子教案 网页设计 3

《《网页设计》-王移芝-电子教案 网页设计 3》由会员分享，可在线阅读，更多相关《《网页设计》-王移芝-电子教案 网页设计 3（57页珍藏版）》请在金锄头文库上搜索。

1、1,JavaScript概述,基本数据结构,程序构成,基于对象的JavaScript,浏览器对象系统,基础篇,JavaScript语言,作业,2,3.1 JavaScript概述,JavaScript的特点 JavaScript的运行环境 JavaScript的引入 JavaScript注释,3,由Netscape公司开发并推出 一种基于客户端浏览器的语言,脚本编写语言 基于对象的语言 简单性 安全性 动态性 跨平台性 节省交互时间, JavaScipt的特点,主要特点有：,概 述,4,Navigator2.0以上版本的浏览器 Internet Explorer 3.0以上版本的浏览器, Ja

2、vaScript的运行环境,概 述,5,分布于标记和标记之中 用和标识括起来, JavaScript的引入,把JavaScript程序保存在一个以.js为扩展名的文件中，如function.js 用标记进行说明 SRC属性值可以是被嵌入文件的绝对路径，也可是相对路径。,实现功能的函数保存到一个单独的文件中 然后使用标记的SRC属性，将该文件嵌入到页面中,概 述,6,插入注释语句以增加程序的可读性,概 述,单行注释 / 单行注释 多行注释 /* 多行注释 多行注释 */, JavaScript 注释,7,3.2 基本数据结构,基本数据类型 常量 变量 表达式和运算符,8, 基本数据类型,stri

3、ng类型：用单引号“”或双引号“”来说明的。 number类型：支持整数和浮点数 整数可以为正整数、0或负整数； 浮点数可以包含小数点或一个“e”或二者都包括。 Boolean类型：true或false Object对象类型 null值：没有任何值，什么都不表示。 undefined值：变量被创建后，但未给变量赋值以前的值。,数据类型,9, 常 量,整型常量：可以使用十六进制、八进制和十进制表示。 如可以用42，052（八进制）和0x2A（十六进制）表示42。 实型常量：由整数部分和小数部分，或使用科学或标准方法表示。 布尔型常量：只有两种状态true或false，用来说明或代表一种状态或标志

4、。 字符型常量：使用单引号或双引号括起来的一个或几个字符。 空值：表示什么也没有。 特殊字符：以反斜杠（）开头的不可显示的特殊字符，通常称为控制字符。,数据类型,10,a：警报符，发出一声蜂鸣声； b：退格符，光标回移一个字符； f：进纸符，在打印机上指明新的一页； n：换行符，在文本中指明新的一行； r：回车符，把光标移至新的段落； t：水平制表符，把光标移至下一个制表符的位置； 转义字符：实现在字符串中使用引号和反斜杠。 例如： document.write(“Jane said: “How are you!” ”); document.write(“the directory is c:

5、tempaaa”);,常见的特殊字符如下：,11, 变 量,变量名称的长度是任意的，但要区分大、小写； 第一个字符必须是字母、下划线“_”或“$”符号； 后续字符可以是字母、数字、下划线和“$”符号； 不能使用JavaScript关键字做变量名； 在对变量命名时，最好把名称与变量的意义对应起来。,变量的命名,变量的声明,var 变量名称=初始值,数据类型,12,JavaScript是宽松型类型检查语言，不必声明每一个变量的类型； 使用时根据变量中保存的数据类型来确定变量的类型。,变量的类型,变量的作用域,按作用范围不同，变量可分为： 全局变量：定义在所有函数体之外，作用范围是整个函数。 局部变

6、量：定义在函数体中，只对该函数可见，对其他函数是不可见的。 一个函数中用关键字var声明的变量是函数的局部变量。 函数外声明的变量，或在函数内部不用关键字var声明的变量是全局变量。,13, 表达式和运算符,单目运算符：只需一个操作数，运算符可前可后。 例如：i+、-i 双目运算符：由两个操作数和一个运算符组成。 格式为：操作数1 运算符 操作数2。 例如：2+1，“This“+“is“ 三目运算符：操作数?结果1:结果2。 例如：status=(temp)?confirm:true:confirm:false;,运算符格式,数据类型,14,算术运算符：+、-、*、/、%（取模）、|（按位或）

7、、&(按位与)、（右移）、（右移，零填充）、-（取反）、（取补）、+（递加1）和-（递减1）。 字符串运算符： +（合并运算符） 比较运算符：、=、=（等于）、!=（不等于）。 布尔运算符：!（取反）、&=（与之后赋值）、 &（逻辑与）、 |=（或之后赋值）、|（逻辑或）、=（异或之后赋值）、（逻辑异或）、&（与）、|（或）、=（等于）、|=（不等于）。 位逻辑运算符：&（位与）、|（位或）、（位异或） 、-（位取反）和（位取补）。 位移动运算符：（右移）和（右移，左边补零）,运算符类型,15,优先级由高到低排列为： 算术运算符：+、-、*、/、%、+、- 字符串运算符：+ 位移动运算符：、

8、位逻辑运算符：&、|、-、 比较运算符：、=、=、!= 布尔运算符：!、&、|,运算符的优先级,16,3.3 程序结构,程序控制流程 函数 事件驱动及事件处理,17,程序结构, 程序流程控制,条件为true，则执行语句段1，否则执行语句段2。 如果语句段有多行，则必须使用“”和“”将其括起来。,if（条件） 语句段； else 语句段,ifelse语句,18,条件语句比较复杂，而且条件有互相嵌套的关系。 每一级的布尔表述式都会被计算，若为真，则执行相应的语句，否则执行else后的语句。,if（布尔值）语句； else if（布尔值）语句； else if（布尔值）语句； else 语句；,嵌套

9、的ifelse语句,19,根据变量的不同取值，采取不同的处理方法。 条件的取值与程序中提供的任何一条语句都不匹配，将执行default中的语句。 在每个语句段后应加一个break语句，保证程序按规定的流程执行。,switch（条件） case label1:语句段1; case label2:语句段2; default:语句段3; ,switch语句,20,初始化参数指定循环的开始位置，即赋予循环控制变量初始值。 条件用于判别循环停止的条件，若条件满足，则执行循环体，否则跳出。 增量定义了循环控制变量在每次循环时按什么方式变化。 三个语句之间必须使用分号分隔。,for（初始化；条件；增量） 语

10、句集； ,For循环语句,21,当条件为真时，重复循环，否则退出循环。,while（条件） 语句集； ,while语句,break语句,用于循环中，能实现立即从循环中跳出来，并继续执行循环后的第一条语句。,continue语句,跳过循环的其余部分，继续执行下一次循环。,22,函数名是自己定义的名字，对大小写敏感，体现出函数的功能。 参数表是传递给函数使用或操作的值，可以是常量、变量或其它表达式。 注意：空的参数列表( )定义一个不需要任何参数的函数,function 函数名(参数1，参数2，) 语句段； return 表达式； ,函数的声明, 函 数,程序结构,23,函数可以有返回值，retu

11、rn语句将函数值返回给调用该函数的语句。但不是所有函数都有返回值。 函数可以放在HTML文档的任意位置，但最合适的地方是标记中。,函数的调用,函数调用：引用函数名并将参数传递给它值 函数调用必须放在文档的正文部分，以显示执行结果。 有返回值的函数，调用方法有两种： 将返回值存储在一个变量中 直接使用返回值,24,事件：鼠标或热键的动作 事件驱动：由鼠标或热键引发的一连串程序的动作 事件处理程序：对事件进行处理的程序或函数,事件驱动, 事件驱动及事件处理,单击事件onClick 改变事件onChange 选中事件onSelect 获得焦点事件onFocus,失去焦点onBlur 载入文件onLo

12、ad 卸载文件onUnload 鼠标悬停事件onMouseover,程序结构,25,自己编写的函数 JavaScript内部的函数 直接使用JavaScript的代码,事件处理程序,新闻动态, function doit() window.status=“欢迎访问本站“; return true; 新闻动态,26,3.4 基于对象的JavaScript,对象的基础知识 常用内部对象 定义对象和方法,27,对 象, 对象的基础知识,对象：变量的集合体，提供了对数据的一致的组织手段，描述了一类事务的共同属性。 JavaScript中对象的构成： 属性：与变量相关联，指对象的背景色、长度、名称等特征

13、。 方法：与特定的函数相关联，对属性进行的操作。 对象在被引用之前必须存在。 获取对象的方式为： 引用JavaScript内部对象 引用浏览器环境提供的对象 创建新对象,对象的基本结构,28,属性可以是数字、字符串，甚至是其他对象。 每个属性都有一个与之相连的名字。 对象属性引用的方式： 使用点“.”运算符 通过对象的下标实现引用 通过字符串的形式实现引用,对象属性的引用,对象方法的引用,ObjectName.methods(),方法实质上是对象中的一个函数,29,操作对象的语句,for.in语句 for（对象属性名 in 已知对象名） 语句段; ,对已知对象的所有属性进行操作的控制循环语 将

14、一个已知对象的所有属性反复赋给一个变量 无需知道对象中属性的个数即可进行操作,with语句 with(object) 语句段; ,在该语句体内，没有指明对象的属性都是with指明的对象的属性。,30,this关键字 避免多层次、多方位对象引用造成的混乱。 this将对象指定当前对象。,new运算符 newobject=new Object(Parameters table);,创建一个对象实例,31, 常用内部对象,Array对象 String对象 Date对象 Math对象,静态对象：在引用该对象的属性或方法时不需要创建实例 动态对象：在引用属性或方法时必须创建一个实例,对 象,32,存储的

15、是编号变量，定义了一个数组。 动态对象，使用前必须使用new运算符创建一个实例。 例如：student=new Array(30); 通过数组下标来使用数组元素，数组下标从0开始。,Array对象,属性：length：表示数组元素的个数,方法： join()：连接数组所有元素，返回一个字符串。元素之间用“,”或其他指定的分隔符隔开。 reverse()：返回一个翻转的数组，原来的最后一个元素变成第一个，而第一个则变成了最后一个。 sort()：返回一个排序数组，缺省按字母表顺序排序。,33,静态对象,String对象,属性：length：表示字符串中的字符个数,字符串转换方法： toUpper

16、Case()：把字符串中所有字符转换为大写 toLowerCase()：把字符串中所有字符转换为小写,处理子串方法： substring()：返回夹在原字符串两个下标变量之间的子串。 charAt()：只需一个下标并返回一个字符。 split()：根据指定的分隔符把一个字符串划分成一个字符串数组。,34,搜索字符串的方法： indexOf()：在字符串中搜索另一个字符串，返回值为字符串的下标。 lastIndexOf()：从最后一个字符开始向前搜索，寻找字符串最后一次出现的位置。,改变字符串外观的方法,35,处理日期和时间 动态对象 birthday=new Date(); birthday=new Date(“June 20,1996 08:00:00”); birthday=new Date(6,20,96); birthday=new Date