Web信息系统与技术-ch.ppt

《Web信息系统与技术-ch.ppt》由会员分享，可在线阅读，更多相关《Web信息系统与技术-ch.ppt（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

3、JavaScript常用元素,表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

4、 算术运算符17.2.2 逻辑运算符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.

5、3.4 While与DoWhile,17.3.1 If语句,基本语法,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语句中的条件部分为真时，才执行

6、后面的程序部分，否则不执行。,17.3.2 For语句,实例代码,17.3.2 For语句,网页效果,17.3.3 Switch语句,基本语法,switch()Case1:语句1；Case2：语句2 Case3:语句3 Default:语句,17.3.3 Switch语句,语法说明,使用Switch语句时，必须赋初始条件，程序将根据给出的初始条件，在Switch语句中进行判断，如果Case条件符合初始条件，则执行该Case后面的语句，否则向下继续判断，继续执行。,17.3.3 Switch语句,实例代码,17.3.3 Switch语句,接上页,17.3.3 Switch语句,接上页,17.3.

7、3 Switch语句,网页效果,17.3.4 While与DoWhile,基本语法,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.

8、4 While与DoWhile,网页效果,17.4 函数1有参函数,基本语法,“Function 函数名（参数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中，还可

9、以通过调用一些无参函数来实现一些功能。函数名后面的括号中无参数，称该函数为无参函数。,17.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是一门脚本语言，也是一门基于面向对象的编程语言，虽然没有专业面向对象编程语言那样规范的类的继承、封装等，但有面向对象的编程必须要

10、有事件的驱动，才能执行程序。,18.2 主要事件分析,表18-1 主要事件,18.2.1 鼠标单击事件onClick,易用性：,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,

11、实例代码,18.2.2 文本框内容改变onChange,网页效果,18.2.3 内容选中事件onSelect,实例代码,18.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,

12、实例代码,18.2.8 鼠标事件onMouseOver,网页效果,18.2.9 鼠标移开事件onMouseOut,实例代码,18.2.9 鼠标移开事件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 Navigat

13、or对象,Navigator对象属性说明,22.2.1 Navigator对象,实例代码,22.2.1 Navigator对象,接上页,22.2.1 Navigator对象,网页效果,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对象属

14、性说明,22.2.3 Window对象,Window对象方法说明,22.2.3 Window对象,实例代码,22.2.3 Window对象,网页效果,22.2.3 Window对象,效果说明,当程序运行后，通过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 内置对象

15、和方法,内置对象属性说明,23.DOM模型,23.1 DOM模型框架23.2 DOM模型中的节点23.3 使用DOM23.4 获取表单数据23.5 Inner HTML,23.1 DOM模型框架,文档对象模型（DOM）是指W3C定义的标准文档对象模型。利用DOM中的对象，开发人员可以对文档（XML或HTML）进行读取、搜索、修改、添加和删除等操作。根据树结构以节点形式对文档进行操作是DOM的工作原理。DOM将文档中的每个项目看做节点，如元素、属性、注释等。一般情况下，支持Javascript的所有浏览器都支持DOM。,23.1 DOM模型框架,23.2 DOM模型中的节点,元素节点文本节点属性

16、节点标题一,23.3 使用DOM,根节点document，根元素节点html遍历childNodes，parentNode访问文档对象getElementsByTagName(),getElementsByTagName(),getElementById(),getElementsByName()Firebug：父子兄弟关系nexElementSibling，offsetLeft，offsetTop节点的属性：oa1.attributes0.name，oa1.attributes0.nodeValue，oa1.getAttribute(“href”)，oa1.href创建新节点：createE

17、lement(“li”)，createTextNode(“dom”)，oli.setAttribute(“id”,“li4”)，appendChild(oli)删除节点：oli.parentNode.removeChild(oli),23.4 获取表单数据,访问表单 document.form表单名字,document.forms0获取信息alert(document.forms0.text1.value)举例E-mail地址检查if(address=)|(address.indexOf()=-1)|(address.indexOf(.)=-1),23.5 innerHTML,这个属性由于使用

18、方便，得到了当今主流浏览器的支持。该属性表示某个标记之间的所有内容，包括代码本身。该属性可以读、写 op.innerHTML=“”举例17-3-3.html,24.事件驱动与事件对象,24.1 事件驱动及处理24.2 事件监听24.3 事件对象24.4 举例鼠标定位,24.1 事件驱动及处理,onload=function()op=document.getElementById(p1);op.onclick=fn1;,24.2 事件监听,标准DOM浏览器onload=function()op=document.getElementById(p1);op.addEventListener(cli

19、ck,fn1,false);op.addEventListener(click,fn2,false);op.removeEventListener(click,fn2,false);IE浏览器onload=function()op=document.getElementById(p1);op.attachEvent(onclick,fn1);op.attachEvent(onclick,fn2);op.detachEvent(onclick,fn2);,24.3 事件对象,浏览器给我们提供了事件对象方便我们对事件的一些属性进行细致的操作。IE浏览器中，事件对象是window对象的一个属性event。function fn1()var oEvent=window.event;标准DOM浏览器规定event对象必须作为唯一的参数传给事件处理函数。function fn1(evnt)/做浏览器兼容一般用 function fn1(evnt)var oEvent=evnt?evnt:window.event;Firebug：一系列的属性和方法。举例odiv.innerHTML+=oEvent.clientX+;+oEvent.clientY+op.onmouseout=fn1,25.动态页面DHTML举例,25.1 定位动画25.2 密码强度25.3 Google Map,