HTML语言与网页设计DHTML技术.ppt

《HTML语言与网页设计DHTML技术.ppt》由会员分享，可在线阅读，更多相关《HTML语言与网页设计DHTML技术.ppt（31页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、HTML语言与网页设计语言与网页设计DHTML技术技术1学习目标学习目标理解客户端脚本的作用，掌握在理解客户端脚本的作用，掌握在网页中使用客户端脚本的方法。网页中使用客户端脚本的方法。理解理解JavaScript语言的基本语法。语言的基本语法。理解理解JavaScript对象和浏览器对对象和浏览器对象在脚本编程中的作用。象在脚本编程中的作用。理解理解DHTML的原理，能够在网页的原理，能够在网页中应用中应用DHTML特效。特效。2Part1在网页中使用脚本在网页中使用脚本3什么是脚本什么是脚本脚本（脚本（Script）实际上就是一段）实际上就是一段程序，用来完成某些特殊的功能。程序，用来完成某

2、些特殊的功能。服务器端脚本：例如服务器端脚本：例如 ASP、JSP、PHP等等客户端脚本：例如客户端脚本：例如JavaScript、VBScript等。等。4客户端脚本的作用客户端脚本的作用客户端脚本经常用来检测浏览器、客户端脚本经常用来检测浏览器、响应用户动作、验证表单数据以响应用户动作、验证表单数据以及显示各种自定义内容，如特殊及显示各种自定义内容，如特殊动画、对话框等。动画、对话框等。5使用客户端脚本使用客户端脚本方式方式1：插入脚本：插入脚本用用script标记符嵌入脚本程序，标记符嵌入脚本程序，例如：例如：此处为程序代码此处为程序代码6演示演示插入脚本插入脚本7使用客户端脚本使用客户

3、端脚本方式方式2：直接添加脚本：直接添加脚本直接将代码作为事件响应属性的直接将代码作为事件响应属性的值。值。例如：例如：8演示演示直接添加脚本直接添加脚本9使用客户端脚本使用客户端脚本方式方式3：链接脚本文件：链接脚本文件用用script的的src属性指定一个外部属性指定一个外部javascirpt文件（后缀为文件（后缀为.js）例如：例如：10演示演示链接脚本文件链接脚本文件11Part 2JavaScript简介简介12JavaScript简介简介变量不需要指定类型，用变量不需要指定类型，用var定定义，也可不定义义，也可不定义JavaScript运算符与运算符与C语言非常语言非常相似，包

4、括算术运算符、逻辑运相似，包括算术运算符、逻辑运算符、比较运算符、字符串运算算符、比较运算符、字符串运算符、条件运算符等。符、条件运算符等。13JavaScript简介简介JavaScript语句也与语句也与C语言很相语言很相似，包括：条件语句（似，包括：条件语句（if else,switch）、循环语句（）、循环语句（for,while,do while）等。）等。如果一行用多个语句，应用分号如果一行用多个语句，应用分号分隔，否则可以省略分号。分隔，否则可以省略分号。14JavaScript函数函数JavaScript函数用函数用function作作为关键字，通常在为关键字，通常在HEAD标

5、记符标记符内定义，形式如下：内定义，形式如下：function fun_name(参数，参数参数，参数)语句语句 15演示演示使用函数使用函数16使用使用JavaScript对象对象对象的两个要素：对象的两个要素：属性（数据）属性（数据）方法（动作）方法（动作）JavaScript中的两类对象：中的两类对象：JavaScript内置对象内置对象浏览器对象浏览器对象17JavaScript内置对象内置对象日期对象日期对象先用先用new关键字创建关键字创建数学对象数学对象不需创建，可直接使用不需创建，可直接使用18演示演示使用内置对象使用内置对象19浏览器对象浏览器对象文档对象模型（文档对象模型（

6、DOM）用于表示用于表示HTML元素以及元素以及Web浏浏览器信息的一个模型，它使脚本览器信息的一个模型，它使脚本可以访问可以访问Web页上的信息。页上的信息。20文档对象模型示意图文档对象模型示意图21对象的引用对象的引用根据对象的包含关系，使用成员根据对象的包含关系，使用成员引用操作符一层一层地引用对象引用操作符一层一层地引用对象例如：例如：window.location较低层次对象一般用名称（对应较低层次对象一般用名称（对应于于id属性或属性或name属性）引用属性）引用22document对象对象属性属性all,bgcolor,forms,title事件事件onload,onunloa

7、d方法方法write()23事件机制事件机制JavaScript事件处理器浏览器显示键盘鼠标操作更新浏览器显示键盘鼠标事件24演示演示使用使用document对象对象25window对象对象属性属性document,history,loction,status方法方法alert(),confirm(),prompt(),open(),setInterval()26演示演示使用使用window对象对象27演示演示使用使用form对象对象Example1Example228DHTML技术技术动态动态HTML（Dynamic HTML，简称，简称DHTML）技术建立在原）技术建立在原有技术之上，包括三个方面：有技术之上，包括三个方面：HTMLCSS客户端脚本客户端脚本29演示演示使用使用dhtml技术技术DHTML example1DHTML example2DHTML example3DHTML example4DHTML example5DHTML example630Thats all for this chapter!31