计算机文化

Size: px

Start display at page:

Download "计算机文化"

昌参危
5 years ago
Views:

1 1 Web 前端开发技术与实践第 14 章 : 初始 JavaScript 阮晓龙 / rxl@hactcm.edu.cn 河南中医学院管理信息工程学科河南中医学院网络信息中心

2 2 本章主要内容 JavaScript 概述 JavaScript 语法 DOM 案例 : 使用 JavaScript 进行表单验证案例 : 使用 JavaScript 实现规定时间内答题效果

3 3 1.JavaScript 概述 1.1 什么是 JavaScript JavaScript 是一种为网站添加互动以及自定义行为的客户端脚本语言, 因此通常只能通过 Web 浏览器去完成操作, 而无法像普通意义上的程序那样独立运行

4 4 1.JavaScript 概述 1.1 什么是 JavaScript 发展历程 JavaScript 与 Java 没有任何的关系, 它由 Netscape 公司与 Sun 公司合作开发 JavaScript 最开始的名字是 LiveScript, 因当时 Java 风靡一时以及当时正与 Sun 公司进行合作等因素, 于是将 LiveScript 改为了 JavaScript JavaScript 的第一个版本, 出现在 1996 年推出的 NetScape Navigator 2 浏览器中

5 5

6 6 1.JavaScript 概述 1.1 什么是 JavaScript 主要特点解释性执行的脚本语言 JavaScript 的语法基本结构形式与 C C++ Java 十分类似, 但是在使用之前, 不需要先编译, 而是在程序执行中被逐行的解释简单弱类型脚本语言 JavaScript 的简单性主要在于其基于 Java 基本语句和控制流之上的简单而紧凑的设计 ; 其次在于其变量类型是采用弱类型, 并未使用严格的数据类型

7 7 1.JavaScript 概述 1.1 什么是 JavaScript 相对安全的脚本语言 JavaScript 作为一种安全性语言, 不被允许访问本地硬盘, 且不能将数据存入服务器, 不允许对网络文档进行修改和删除, 只能通过浏览器实现信息浏览或动态交互, 从而有效地防止数据的丢失或对系统的非法访问跨平台性的脚本语言 JavaScript 依赖于浏览器本身, 与操作环境无关, 只要计算机能运行支持 JavaScript 的浏览器, 就可正确执行, 从而实现了跨平台的特性

8 8 1.JavaScript 概述 1.2JavaScript 的作用功能概述通常情况下,Web 前端开发者使用 JavaScript 在给网页添加交互作用网页的结构层是 HTML; 网页表现层由 CSS 构成 ; 网页行为层由 JavaScript 组成网页上的所有元素属性和文本都能通过使用 DOM( 文本对象模型 ) 的脚本来获得 Web 前端开发者可通过 JavaScript 来实现改变网页内容 CSS 样式对用户输入做出反馈等操作

9 9 2.1 调用方法用 JavaScript 编写的代码必须通过 HTML/XHTML 文档才能执行目前有两种方法可以调用 JavaScript 方法一 : 将 JavaScript 代码放到文档 <head> 或 <body> 标签中的 <script> 标签之间但最好的做法是将 <script> 标签放到 HTML 文档的最后,<body> 结束标签之前方法二 : 将 JavaScript 代码存为一个扩展名为.js 的独立文件典型的做法是在文档的 <head> 部分放置一个 <sccript> 标签, 并把它的 src 属性指向该文件

10 调用方法方法一 : 放在 <head> 标签中

11 调用方法方法二 : 放到 HTML 文档的最后,<body> 结束标签之前

12 调用方法需要主要的是 : 上述代码中 <script> 标签没有包含传统的 type="text/javascript" 属性, 是因为在 HTML5 规范中,script 属性默认是 text/javascript, 所以可以省略, 但是在 HTML4.01 和 XHTML1.0 规范中,type 属性是必须的

13 基本语法语法结构 JavaScript 程序使用 Unicode 字符集编写, 它是一种区分大小写的语言, 也就是说, 在输入关键字变量函数名以及所有的标识符时, 都必须采取一致的字母大小写格式 JavaScript 会忽略程序中记号之间的空格制表符和换行符因为可以在程序中任意使用空格制表符和换行符, 因此开发者可以采用整齐一致的方式排版 JavaScript 代码, 增加代码的可读性 JavaScript 中的简单语句后面通常都有分号 (;) 主要是为了分割语句

14 基本语法 JavaScript 和 Java 一样, 它也支持 C++ C 型的注释 JavaScript 会把处于 // 和一行结尾之间的任何文本都当做注释忽略掉此外 /* 和 */ 之间的文本也会被当做注释, 这个注释可以跨越多行, 但是其中不能有嵌套的注释

15 基本语法 JavaScript 的直接量, 就是程序中直接显示出来的数据值

16 基本语法在 JavaScript 中标识符用来命名变量与函数名, 或者用作 JavaScript 代码中某些循环的标签 JavaScript 合法的标识符命名规则为 : 第一个字符必须为字母下划线或美元符号 ($), 接下来的字符可以是字母数字下滑线或美元符号, 数字不允许作为首字母出现另外标识符不能和 JavaScript 中用于其它用途的关键字同名同时需要注意的是,JavaScript 中的保留字在 JavaScript 程序中不能被用作标识符

17 基本语法 ECMAScript v3 标准化的关键字如表所示

18 基本语法 ECMA 扩展保留的关键字如表所示

19 基本语法此外还应该避免把 JavaScript 预定义的全局变量名或全局函数名用作标识符避免使用的标识符如表所示

20 基本语法数据类型 JavaScript 是一种弱类型语言, 这意味着 Web 前端开发者可以在任何阶段改变变量的数据类型, 而无需像强类型语言一样在声明变量的同时还必须同时声明变量的数据类型 JavaScript 的三种基本数据类型有 : 字符串数值布尔值

21 基本语法字符串字符串由零个或多个字符构成字符包括 ( 但不局限于 ) 字母数字标点符号和空格字符串必须包在引号里面, 单引号或双引号都可以 JavaScript 可以随意的选用引号, 但最好还是根据字符串所包含的字符来选择即如果字符串包含双引号, 就把整个字符串包含在引号里面 ; 如果包含单引号就把整个字符放在双引号里面如果一个字符串中既有单引号又有双引号, 那么这种情况下需要把那个单引号或双引号看做一个普通字符, 而不是这个字符串的结束标志, 这种情况下需要对这个字符进行转义, 在 JavaScript 中用反斜线对字符串进行转义

22 基本语法数值如果想给一个变量赋一个数值, 不用限定它必须是一个整数 JavaScript 允许使用带有小数点的数值, 并且允许任意位小数点, 这样的数称为浮点数, 数值主要数据类型如下所示

23 基本语法布尔值布尔数据只有两个可选值 :true 或者 false 布尔值不是字符串, 不能将布尔值用引号括起来布尔值的 false 与字符串值 false 是完全不相关的两码事

24 基本语法变量变量通常指那些会发生变化的东西, 把值存入变量的操作统称为赋值, 在 JavaScript 中可以用下面的代码进行赋值在 JavaScript 中程序可不必直接对变量赋值而无需事先声明作出变量声明如下所示声明变量的同时, 完成赋值如下所示

25 基本语法表达式与运算符表达式表达式是 JavaScript 的一个短语,JavaScript 解释器可以计算表达式, 从而生成一个值, 最简单的表达式是直接量或变量名直接量表达式的值就是这个直接量本身, 变量表达式的值则是该变量所存放或引用的值通过合并简单的表达式可以创建较为复杂的表达式, 具体代码如下所示

26 基本语法运算符 JavaScript 中, 加减乘除都是一种操作, 这些算术操作中的每一种都必须借助于相应的操作符才能完成, 操作符是 JavaScript 为完成各种操作而定义的一些符号假设 y=3, 则 :

27 基本语法赋值运算符用于给 JavaScript 变量赋值, 假设 x=6,y=3, 则 : 加号 (+) 是一个比较特殊的操作符, 它既可以用于数字, 也可用于字符串, 代码如下所示

28 基本语法流程控制语句 If 语句 if 语句是最常见的条件语句, 基本语法如下所示条件必须放在 if 后面的圆括号中条件的求值结果永远是一个布尔值, 即只能为 true 或 false 花括号中的语句不管内容有多少条, 只有在给定条件的求值结果为 true 的情况下才会执行例如 :

29 基本语法流程控制语句 If 语句 if 语句是最常见的条件语句, 基本语法如下所示条件必须放在 if 后面的圆括号中条件的求值结果永远是一个布尔值, 即只能为 true 或 false 花括号中的语句不管内容有多少条, 只有在给定条件的求值结果为 true 的情况下才会执行例如 :

30 基本语法 if 语句的第二种形式引入了 else 从句, 当给定条件的求值结果为 false 时, 就会执行这个 else 从句, 其基本语法结构如下所示 : 例如 :

31 基本语法 switch 语句一个 if 语句会在程序的执行流程中产生一个分支, 但是当程序含有多个分支, 并且所有的分支都依赖于一个变量的值时, 多个 if 语句重复性的检测同一个变量的值将会产生资源浪费而 switch 语句正是用来处理这种情况的, 它比重复使用 if 语句要高效的多, 其语法结构如下所示 :

32 基本语法在执行代码内容中, 不同的位置要使用 case 关键字后加一个值和一个冒号来标记当执行一个 switch 语句时, 它先计算 expression 的值, 然后查找与这个值匹配的 case 标签, 找到相应的 case 标签, 就开始执行 case 标签后的代码块语句, 如果没有相匹配的内容, 就开始执行标签 default 后的语句, 如果没有 default 标签, 就跳过所有的代码块

33 基本语法 While 循环 while 循环语句与 if 语句十分相似, 它们的语法几乎一样, 其语法结构如下所示 : 例如 : while 循环语句与 if 语句唯一的区别是 : 只要给定条件的求值结果是 true, 包含在花括号里的代码就将反复执行下去

34 基本语法在某些场合, 我们希望那些包含在循环语句内部的代码至少执行一次, 这时我们便需要使用 do 循环了, 其语法结构如下所示 : 例如 : do 循环与 while 循环最大的区别便是 : 对循环控制条件的求值发生在每次循环结束之后因此, 即使循环控制条件的首次求值结果为 false, 花括号里的语句也至少会被执行一次.

35 基本语法 For 循环在 JavaScript 中使用 for 循环来执行一些代码十分方便, 它类似于 while 循环事实上,for 循环只是 while 循环的一种变体, 而 for 循环不过是进一步改写为如下所示的紧凑格式而已, 其语法结构如下所示 : 例如 : 用 for 循环来重复执行一些代码的好处是循环控制结构更加清晰与循环有关的所有内容都包含在 for 语句的圆括号里面

36 基本语法 for 循环最常见的用途之一便是对某个数组里的全体元素进行遍历处理这往往需要用到数组的 array.length 属性, 这个属性表示给定数组里元素的个数, 切记数组下标是从 0 开始的, 下面的例子是指循环输出数组中的所有元素 :

37 基本语法 for/in 语句在 JavaScript 中关键字 for 有两种使用方式我们前面已经讲过其在 for 循环中的使用情况, 此外它还可以用于 for/in 语句, 其语法结构如下所示 : 例如 :

38 基本语法 variable 是指一个变量名, 声明一个变量的 var 语句, 数组的一个元素或者是对象的一个属性 object 是一个对象名, 或者是计算结果为对象的表达式 JavaScript 的数组是一种特殊的对象, 因此 for/in 循环可以像枚举对象属性一样枚举数组的下标 for/in 循环并没有指定将对象的属性赋给循环变量的顺序因为没有什么办法可以预先告知其赋值顺序, 因此在不同的 JavaScript 版本或者实现中实现这一语句的行为可能有所不同

39 基本语法 break 语句在 JavaScript 中 break 语句会使运行的程序立刻退出包含在最内层的循环或者退出一个 switch 语句, 其语法结构如下所示 : 由于其用来退出循环或者 switch 语句, 因此只有当它出现在这些语句当中时, 这种形式的 break 语句才能被解析 JavaScript 允许关键字 break 后跟一个标签名, 当 break 和标签一起使用时, 它将跳转到这个带有标签的语句的尾部, 或者禁止这个语句该语句可以是任何用括号括起来的语句, 它不一定是循环语句或者 switch 语句

40 基本语法 continue 语句 continue 语句与 break 语句相似, 不同的是它不是退出一个循环而是开始循环的一次新迭代, 其语法结构如下所示 : continue 语句只能在 while 语句 do/while 语句 for 语句或者 for/in 语句的循环体中使用, 在其它地方使用将不会被解析执行 continue 语句时, 封闭循环的当前迭代就会被终止, 开始执行下一次迭代, 这对不同类型的循环语句来说含义是不同的 : 在 while 循环语句中, 会再次检测循环开头的 expression, 如果值为 true, 将从头开始执行循环内容 ;

41 基本语法在 do/while 循环中, 会跳到循环的底部, 在顶部开始下一次循环之前会在此先检测循环条件 ; 在 for 循环中, 先计算 increment 表达式, 然后再检测 test 表达式以确定是否应该执行下一次迭代 ; 在 for/in 循环中, 将以下一个赋给循环变量的属性名开始新的迭代在 while 循环和 for 循环中 continue 语句行为的不同之处在于,while 循环是直接跳到循环条件处, 而在 for 循环中则要先计算 increment 表达式, 然后再跳转到循环条件处

42 基本语法 throw 语句所谓的异常通常就是指一个信号, 说明发生了某种异常情况或错误抛出一个异常, 就是用信号通知发生了错误或异常情况扑捉一个异常, 就是处理它, 即采取必要或适当的动作从异常恢复在 JavaScript 中, 当发生运行时错误或程序明确的使用 throw 语句时就会抛出异常使用 try/catch/finally 语句可以捕获异常, 这个我们将在下一节介绍 throw 语句使用语法结构如下所示 :

43 基本语法 expression 的值可以是任何类型的, 但是通常情况下它是一个 Error 对象或 Error 子类的一个实例例如 : 在抛出异常时,JavaScript 解释器会立即停止正常的程序执行, 跳转到最近的异常处理器, 如果抛出异常的代码块没有相关的 catch 从句, 解释器将检查次高级的封闭代码块, 看它是否有相关的异常处理器, 以此类推, 直到找到一个异常处理器为止

44 基本语法 try/catch/finally 语句 try/catch/finally 语句是 JavaScript 的异常处理机制该语句的 try 从句只定义异常需要被处理的代码块 catch 从句跟随在 try 从句后面, 它是 try 从句内的某个部分发生了异常调用的语句块 finally 从句跟随在 catch 从句后, 存放清除代码, 无论 try 从句中发生了什么, 该代码块都会被执行虽然 catch 从句和 finally 从句都是可选的, 但是 try 从句中至少应该有一个 catch 从句或 finally 从句 try catch finally 从句都以大括号开头和结尾, 这是必须的语法部分, 即使从句只有一条语句, 也不能省略大括号

45 基本语法 try/catch/finally 示例如下所示 :

46 函数如果需要多次使用同一段代码, 可以把它们封装成一个函数, 函数就是一组允许在你的代码里随时调用的语句, 每个函数实际上就是一个短小的脚本一个简单的函数如下所示 : 这个函数将循环输出数组中的内容现在如果想在自己的脚本中执行这一动作, 可以随时调用如下语句来执行这个函数 :

47 函数 JavaScript 内置了许多的函数, 在前面多次用到的 alert 就是其中的一种, 这个函数需要我们提供一个参数, 它将弹出一个对话框来显示这个参数的值在定义函数时, 可以为它声明多个参数, 只要用逗号将其隔开就行在函数内部, 可以像使用普通变量那样使用它的任何一个参数一个进行乘法运算的函数如下所示 : 在定义函数的脚本后, 可以使用如下所示的语法进行调用 :

48 函数然而很多语法调用这个函数只是为了得到最终结果而非在页面上展示出来, 因此我们需要函数不仅能够 ( 以参数的形式 ) 接收数据, 还能够返回数据这时便需要用到 return 语句了, 改造后的函数如下所示 :

49 函数变量既可以是全局的, 也可以是局部的, 全部变量与局部变量的区别就在于其作用域全局变量可以在脚本的任何位置被引用, 其作用域为整个脚本局部变量只存在于声明它的那个函数的内部, 在那个函数的外部是无法引用它的, 作用域仅为某个特定的函数

50 函数通过 var 关键字明确的声明变量时, 如果在函数中使用了 var, 那这个变量就会被视为一个局部变量, 它只存在于这个函数的上下文中 ; 反之, 如果没有使用 var, 那这个变量就被视为一个全局变量, 如果脚本里已存在一个与之同名的全局变量, 这个函数将会改变全局变量的值例如 :

51 对象对象是一种非常重要的数据类型, 对象是自包含的数据集合, 包含在对象里的数据可以通过两种形式访问, 属性和方法 : 属性是隶属于某个特定对象的变量 ; 方法是只有某个特定对象才能调用的函数对象就是一些由一些属性和方法组合在一起而构成的一个数据实体, 在 JavaScript 里, 属性和方法都使用点语法来访问, 其用法如下所示 :

52 对象内建对象在 JavaScript 中内置了一些对象, 比如前面用到的数组当我们使用 new 关键字去初始化一个数组是, 其实就是在创建一个 Array 对象的新实例, 如下代码所示 : Array 对象只是诸多 JavaScript 内建对象中的一种其它的还包含 Math 对象 Date 对象, 它们分别提供了许多非常有用的方法供人们处理数值和日期值, 比如,Math 对象的 round 方法可以把十进制数值舍入为一个与之最接近的整数, 其代码如下所示 :

53 对象 Date 对象可以用来存储和检索与特地日期和时间有关的信息在创建 Date 对象的新实例时,JavaScript 解释器将自动的使用当前日期和时间对它进行初始化, 其代码如下所示 : Date 对象提供了 getday() gethours() getmonth() 等一系列方法, 以供人们用来检索与特定日期有关的各种信息

54 函数宿主对象除了内置对象以外, 还可以在 JavaScript 脚本里使用一些已经预先定义好的其它对象这些对象不是由 JavaScript 语言本身而是由它的运行环境提供的, 在 Web 应用中, 这个环境就是浏览器, 由浏览器提供的预定义对象被称为宿主对象宿主对象包括 Form Image 和 Element 等我们可以通过这些对象获得关于网页上表单图像和各种表单元素等信息, 其中最重要的一个宿主对象便是 document 对象

55 55 3.DOM 3.1 什么是 DOM 文档对象模型简称 DOM,DOM 是一种 HTML/XHTML 页面的编程接口 (API) 它提供了一种文档的结构化地图, 还有一组方法, 以便与所含元素交互实际上, 它是把我们的标记方式转换为 JavaScript 可以理解的格式简单的说就是 DOM 就像页面上的所有元素的一个地图我们可以使用它通过名字和元素来找到元素, 然后添加修改或删除元素及其内容

56 56 3.DOM 3.2 获取 HTML 元素在 DOM 中有三种方法能够获取元素节点, 分别是通过元素 ID 通过标签名称和通过类名称来进行获取

57 57 3.DOM 3.2 获取 HTML 元素 getelementbyid DOM 提供了一个名为 getelementbyid 的方法, 这个方法将返回一个与哪个有着给定 id 属性值的元素节点对应的对象 getelementbyid 是 document 对象特有的函数在脚本代码里, 函数名的后面必须跟有一对圆括号, 这对圆括号包含着函数的参数 getelementbyid 方法只有一个参数 : 想要获得的那个元素的 id 属性的值, 这个 id 属性值必须放在单引号或者双引号里, 其使用方法如下所示 :

58 58 3.DOM 3.2 获取 HTML 元素 getelementsbytagname getelementsbytagname 方法返回一个对象数组, 每个对象分别对应着文档里有着给定标签的一个元素类似于 getelementbyid, 这个方法也是只有一个参数的函数, 它的参数是标签的名字, 其使用方法如下所示 :

59 59 3.DOM 3.2 获取 HTML 元素 getelementsbyclassname HTML5 DOM 中新增了一个方法 :getelementsbyclassname 这个方法能够使我们通过 class 属性中的类名来访问元素不过由于这是一个新增方法, 某些 DOM 实现中可能还未支持此方法的解析, 其在 Internet Explorer 5,6,7,8 中无效, 因此在使用时要注意其兼容性 getelementsbyclassname 方法与 getelementsbytagname 方法相似, 也只接受一个参数, 就是类名, 其使用方法如下所示 :

60 60 3.DOM 3.3 对 HTML 元素进行操作增加元素如果我们需要向 HTML 中添加新元素, 那么我们首先便需要创建该元素, 然后向已存在的元素追加创建的新元素 document.createelement() 方法和 document.createtextnode() 方法分别用来创建新的 Element 节点和 Text 节点, 而方法 node. appendchild() node.insertbefore() 和 node.replacechild() 可以用来将它们添加到一个文档, 其具体实现方法如下所示 : 首先创建一个新的元素, 比如 <p>, 其代码如下所示 :

61 61 3.DOM 3.3 对 HTML 元素进行操作首先创建一个新的元素, 比如 <p>, 其代码如下所示 : 如果需要向 <p> 元素中添加文本内容, 必须先创建一个文本节点, 如以下代码所示 : 然后将该文本节点追加到刚开始创建的 <p> 元素中, 代码如下所示 : 最后必须向一个已有的元素追加这个新建的元素, 其实现代码如下所示 :

62 62 3.DOM 3.3 对 HTML 元素进行操作修改元素修改元素内容修改元素内容的最简单的方法便是使用 innerhtml 属性, 使用该属性可以对元素的内容重新赋值, 从而达到修改元素内容的效果, 其使用方法如下所示 :

63 63 3.DOM 3.3 对 HTML 元素进行操作改变元素属性在得到需要的元素以后, 我们就可以设法获取它的各个属性, getattribute 方法就是专门用来获取元素属性的, 相应的我们也可以使用 setattribute 方法来更改元素节点的值 getattribute 是一个函数, 它只有一个参数即 : 查询的属性的名称, 其使用方法如下所示 : setattribute() 方法是用来进行设置属性的, 它允许我们对属性节点的值做出修改, 与 getattribute 方法一样, 它也是只能用于元素节点, 其使用方法如下所示 :

64 64 3.DOM 3.3 对 HTML 元素进行操作删除元素如果需要在 HTML 中删除元素, 那么我们首先便需要获得该元素, 然后得到该元素的父元素, 最后通过 removechild 方法删除该元素, 其实现流程如下所示 : 获得该元素, 比如要获得 id 属性值为 div1 的元素, 其代码如下所示 : 获得该元素的父元素, 代码如下所示 : 从父元素中删除该元素

65 65 4. 案例 : 使用 JavaScript 进行表单验证使用 JavaScript 代码验证输入值是否为空是否为整数是否为正确时间等信息, 点击提交后在页面上显示提示信息在进行精确验证时用到 JavaScript 的正则表达式, 准确匹配输入值格式

66 66 现场演示 : 案例 14-01: 使用 JavaScript 进行表单验证

67 67 5. 案例 : 规定时间内答题效果的实现实现一个在线答题页面, 用户可以直接在网页中进行答题, 如果超出答题时间, 将直接跳过该题目, 所有问题回答完毕后给出一个提示信息的效果

68 68 现场演示 : 案例 14-02: 使用 JavaScript 实现规定时间内答题效果

69 69

PowerPoint 演示文稿

PowerPoint 演示文稿 JavaScript 概述管理科学与工程学科耿方方主要内容什么是 JavaScript? JavaScript 发展史 JavaScript 版本 JavaScript 作用 JavaScript 开发工具在 HTML 中使用 JavaScript JavaScript 语法什么是 JavaScript? 概念 JavaScript 是一种为网站添加互动以及自定义行为的客户端脚本语言, 因此通常只能通过