HTML语言与网页设计课件.ppt
HTML语言与网页设计,DHTML技术,1,HTML语言与网页设计DHTML技术1,学习目标,理解客户端脚本的作用，掌握在网页中使用客户端脚本的方法。理解JavaScript语言的基本语法。理解JavaScript对象和浏览器对象在脚本编程中的作用。理解DHTML的原理，能够在网页中应用DHTML特效。,2,学习目标理解客户端脚本的作用，掌握在网页中使用客户端脚本的方,Part1,在网页中使用脚本,3,Part1在网页中使用脚本3,什么是脚本,脚本（Script）实际上就是一段程序，用来完成某些特殊的功能。服务器端脚本：例如 ASP、JSP、PHP等客户端脚本：例如JavaScript、VBScript等。,4,什么是脚本脚本（Script）实际上就是一段程序，用来完成某,客户端脚本的作用,客户端脚本经常用来检测浏览器、响应用户动作、验证表单数据以及显示各种自定义内容，如特殊动画、对话框等。,5,客户端脚本的作用客户端脚本经常用来检测浏览器、响应用户动作、,使用客户端脚本,方式1：插入脚本用script标记符嵌入脚本程序，例如： 此处为程序代码,6,使用客户端脚本方式1：插入脚本6,演示插入脚本,7,演示插入脚本7,使用客户端脚本,方式2：直接添加脚本直接将代码作为事件响应属性的值。例如：,8,使用客户端脚本方式2：直接添加脚本8,演示直接添加脚本,9,演示直接添加脚本9,使用客户端脚本,方式3：链接脚本文件用script的src属性指定一个外部javascirpt文件（后缀为.js ）例如：,10,使用客户端脚本方式3：链接脚本文件10,演示链接脚本文件,11,演示链接脚本文件11,Part 2,JavaScript简介,12,Part 2JavaScript简介12,JavaScript简介,变量不需要指定类型，用var定义，也可不定义JavaScript运算符与C语言非常相似，包括算术运算符、逻辑运算符、比较运算符、字符串运算符、条件运算符等。,13,JavaScript简介变量不需要指定类型，用var定义，也,JavaScript简介,JavaScript语句也与C语言很相似，包括：条件语句（if else, switch）、循环语句（for, while, do while）等。如果一行用多个语句，应用分号分隔，否则可以省略分号。,14,JavaScript简介JavaScript语句也与C语言很,JavaScript函数,JavaScript函数用function作为关键字，通常在HEAD标记符内定义，形式如下： function fun_name(参数，参数) 语句 ,15,JavaScript函数JavaScript函数用funct,演示使用函数,16,演示使用函数16,使用JavaScript对象,对象的两个要素：属性（数据）方法（动作）JavaScript中的两类对象：JavaScript内置对象浏览器对象,17,使用JavaScript对象对象的两个要素：17,JavaScript内置对象,日期对象先用new关键字创建数学对象不需创建，可直接使用,18,JavaScript内置对象日期对象18,演示使用内置对象,19,演示使用内置对象19,浏览器对象,文档对象模型（DOM） 用于表示HTML元素以及Web浏览器信息的一个模型，它使脚本可以访问Web页上的信息。,20,浏览器对象文档对象模型（DOM）20,文档对象模型示意图,21,文档对象模型示意图21,对象的引用,根据对象的包含关系，使用成员引用操作符一层一层地引用对象例如：window.location较低层次对象一般用名称（对应于id属性或name属性）引用例如：document.form1.test,22,对象的引用根据对象的包含关系，使用成员引用操作符一层一层地引,document对象,属性all, bgcolor, forms, title事件onload, onunload方法write(),23,document对象属性23,事件机制,24,事件机制JavaScript事件处理器浏览器显示键盘鼠标,演示使用document对象,25,演示使用document对象25,window对象,属性document, history, loction, status方法alert(), confirm(), prompt(), open(), setInterval(),26,window对象属性26,演示使用window对象,27,演示使用window对象27,演示使用form对象,Example1Example2,28,演示使用form对象Example128,DHTML技术,动态HTML（Dynamic HTML，简称DHTML）技术建立在原有技术之上，包括三个方面：HTMLCSS客户端脚本,29,DHTML技术动态HTML（Dynamic HTML，简称D,演示使用dhtml技术,DHTML example1DHTML example2DHTML example3DHTML example4DHTML example5DHTML example6,30,演示使用dhtml技术DHTML example130,Thats all for this chapter!,31,Thats all for this chapter!31,
