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

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