《Web信息系统与技术ch》由会员分享，可在线阅读，更多相关《Web信息系统与技术ch（122页珍藏版）》请在金锄头文库上搜索。
1、16. JavaScript基础16.1 JavaScript语言概况16.2 第一个JavaScript程序16.1 JavaScript语言概况16.1.1 JavaScript语言的特点16.1.2 JavaScript常用元素16.1.1 JavaScript语言的特点1安全性： JavaScript是一种安全性高的语言，它只能通过浏览器实现网络的访问和动态交互，可以有效地防止通过访问本地硬盘或者将数据存入到服务器，而对网络文档或者重要数据进行不正当的操作。16.1.1 JavaScript语言的特点2易用性： JavaScript是一种脚本的编程语言，没有严格的数据类型，同时是采用小
2、段程序的编写方式来实现编程的。16.1.1 JavaScript语言的特点3动态交互性： 在HTML中嵌入JavaScript小程序后，提高了网页的动态性。JavaScript可以直接对用户提交的信息在客户端做出回应。JavaScript的出现使用户与信息之间不再是一种浏览与显示的关系，而是一种实时、动态、可交互式的关系。16.1.1 JavaScript语言的特点4跨平台性： 它的运行环境与操作系统没有关系，它是一种依赖浏览器本身运行的编程语言，只要安装了支持JavaScript浏览器，并且能正常运行浏览器的电脑，就可以正确地执行JavaScript程序。16.1.2 JavaScript常
3、用元素 表16-1 JavaScript常用元素及定义16.2 第一个JavaScript程序 基本语法 16.2 第一个JavaScript程序 语法说明 在HTML中嵌入JavaScript时，需要使用标记。其中省略号部分可以嵌入更多的JavaScript语句。16.2 第一个JavaScript程序 实例代码16.2 第一个JavaScript程序 网页效果17. JavaScript基本语法17.1 基本数据类型17.2 运算符17.3 程序结构17.4 函数17.5 小实例修改密码17.1 基本数据类型 数值 字符 布尔 空值17.2 运算符17.2.1 算术运算符17.2.2 逻辑
4、运算符17.2.3 比较运算符17.2.1 算术运算符 表17-1 具体算术运算符17.2.1 算术运算符 实例代码17.2.1 算术运算符 接上页17.2.1 算术运算符 网页效果17.2.2 逻辑运算符 表17-2 具体运算符17.2.2 逻辑运算符 实例代码17.2.2 逻辑运算符 接上页17.2.3 比较运算符 表17-3 具体运算符17.2.3 比较运算符 实例代码17.2.3 比较运算符 接上页17.2.3 比较运算符 网页效果17.3 程序结构17.3.1 If语句17.3.2 For语句17.3.3 Switch语句17.3.4 While与DoWhile17.3.1 If语句
5、 基本语法if 条件 或者 if 条件Else 条件17.3.1 If语句 语法说明 If语句后面的条件可以是表达式也可以是一个其他值，但条件返回的结果的数据类型只能是布尔型，要么为真，要么为假。17.3.1 If语句 实例代码17.3.1 If语句 接上页 17.3.1 If语句 网页效果 17.3.2 For语句 基本语法 for (初始化值;条件;求新值)17.3.2 For语句 语法说明 For后面的条件一个都不能省略，同时初始化值、条件、求新值三者之间必须使用分号（；）隔开。只有当For语句中的条件部分为真时，才执行后面的程序部分，否则不执行。17.3.2 For语句 实例代码 17
6、.3.2 For语句 网页效果17.3.3 Switch语句 基本语法switch()Case1: 语句1；Case2：语句2 Case3: 语句3Default: 语句17.3.3 Switch语句 语法说明 使用Switch语句时，必须赋初始条件，程序将根据给出的初始条件，在Switch语句中进行判断，如果Case条件符合初始条件，则执行该Case后面的语句，否则向下继续判断，继续执行。17.3.3 Switch语句 实例代码17.3.3 Switch语句 接上页17.3.3 Switch语句 接上页17.3.3 Switch语句 网页效果17.3.4 While与DoWhile 基本语法
7、While 语法：While（）程序段变量更新 Do While 语法：Do 程序段变量更新 While（）17.3.4 While与DoWhile 语法说明 While与DoWhile都是用于循环结构的，但两者的明显区别是：前者必须在满足条件的情况下才执行该条件下的程序段，后者是不管条件是否满足While语句后面的条件，都至少会执行一次。17.3.4 While与DoWhile 实例代码17.3.4 While与DoWhile 网页效果17.3.4 While与DoWhile 实例代码17.3.4 While与DoWhile 网页效果17.4 函数 1有参函数 基本语法“Function 函
8、数名（参数1 参数2参数n） 函数体 return 表达式 ”17.4 函数 1有参函数 语法说明 前面讲解程序结构时，例子中已经使用到了函数，定义的Function rec(form),这是一个带有参数的函数。通过单击“面积”按钮，调用函数rec(form).17.4 函数 1有参函数 实例代码 17.4 函数 1有参函数 接上页 17.4 函数 1有参函数 网页效果 17.4 函数 2无参函数 基本语法 “Function 函数名（）”17.4 函数 1无参函数 语法说明 在JavaScript中，还可以通过调用一些无参函数来实现一些功能。函数名后面的括号中无参数，称该函数为无参函数。17
9、.4 函数 1无参函数 实例代码 17.4 函数 1无参函数 网页效果 17.5 小实例修改密码 实例代码17.5 小实例修改密码 接上页17.5 小实例修改密码 接上页17.5 小实例修改密码 接上页17.5 小实例修改密码 网页效果18. JavaScript事件分析18.1 事件概述18.2 主要事件分析18.3 其他常用事件18.1 事件概述JavaScript是一门脚本语言，也是一门基于面向对象的编程语言，虽然没有专业面向对象编程语言那样规范的类的继承、封装等，但有面向对象的编程必须要有事件的驱动，才能执行程序。18.2 主要事件分析 表18-1 主要事件18.2.1 鼠标单击事件o
10、nClick易用性： JavaScript是一种脚本的编程语言，没有严格的数据类型，同时是采用小段程序的编写方式来实现编程的。18.2.1 鼠标单击事件onClick 基本语法 18.2.1 鼠标单击事件onClick 语法说明 在HTML文件中，onClick常常与表单中的按钮一起使用。18.2.1 鼠标单击事件onClick 实例代码18.2.1 鼠标单击事件onClick 接上页18.2.1 鼠标单击事件onClick 网页效果18.2.2 文本框内容改变onChange 实例代码18.2.2 文本框内容改变onChange 网页效果18.2.3 内容选中事件onSelect 实例代码1
11、8.2.3 内容选中事件onSelect 网页效果18.2.4 聚焦事件onFocus 实例代码18.2.4 聚焦事件onFocus 网页效果18.2.5 装载事件onLoad 实例代码18.2.5 装载事件onLoad 网页效果18.2.6 卸载事件onUnload 实例代码18.2.6 卸载事件onUnload 网页效果18.2.7 失焦事件onBlur 实例代码18.2.7 失焦事件onBlur 网页效果18.2.8 鼠标事件onMouseOver 实例代码18.2.8 鼠标事件onMouseOver 网页效果18.2.9 鼠标移开事件onMouseOut 实例代码18.2.9 鼠标移开
12、事件onMouseOut 网页效果18.3 其他常用事件 表18-2 其他常用事件22. JavaScript对象的应用22.1 对象概述22.2 浏览器内部对象22.3 内置对象和方法22.1 对象概述1封装2继承3多态22.2 浏览器内部对象22.2.1 Navigator对象22.2.2 Location对象22.2.3 Window对象22.2.4 Document对象22.2.5 History对象22.2.1 Navigator对象 Navigator对象属性说明22.2.1 Navigator对象 实例代码22.2.1 Navigator对象 接上页22.2.1 Navigato
13、r对象 网页效果22.2.2 Location对象 Location对象属性说明22.2.2 Location对象 实例代码22.2.2 Location对象 网页效果22.2.2 Location对象 效果说明 程序运行后，会显示当前网页的主机名称，如果地址栏上显示的是网页文件的绝对路径，如：E:CDROMHTML 2222-2-2.html，将不会显示网页的主机名称。22.2.3 Window对象 Window对象属性说明22.2.3 Window对象 Window对象方法说明22.2.3 Window对象 实例代码22.2.3 Window对象 网页效果22.2.3 Window对象 效
14、果说明 当程序运行后，通过window对象的open方法会打开一个新的网页文件。22.2.4 Document对象 实例代码22.2.4 Document对象 网页效果22.2.5 History对象 History对象属性说明22.2.5 History对象 实例代码22.2.5 History对象 网页效果22.3 内置对象和方法 格式 对象名.属性名称 对象名.方法名称（参数）22.3 内置对象和方法 内置对象属性说明23. DOM模型23.1 DOM模型框架23.2 DOM模型中的节点23.3 使用DOM23.4 获取表单数据23.5 Inner HTML23.1 DOM模型框架文档对
15、象模型（DOM）是指W3C定义的标准文档对象模型。利用DOM中的对象，开发人员可以对文档（XML或HTML）进行读取、搜索、修改、添加和删除等操作。根据树结构以节点形式对文档进行操作是DOM的工作原理。DOM将文档中的每个项目看做节点，如元素、属性、注释等。一般情况下，支持Javascript的所有浏览器都支持DOM。23.1 DOM模型框架htmlheadbodymetah1Pullililiatitle23.2 DOM模型中的节点元素节点文本节点属性节点标题一a标题一href=“#“23.3 使用DOM根节点document，根元素节点html遍历childNodes，parentNode访问文档对象getElementsByTagName(), getElementsByTagName(), getElementById(), getElementsByName() Firebug：父子兄弟关系nexElementSibling，
