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

HTML语言与网页设计 ——DHTML技术 学习目标 理解客户端脚本的作用，掌握在网页中使用客户端脚本的方法。 理解JavaScript语言的基本语法。 理解JavaScript对象和浏览器对象在脚本编程中的作用。 理解DHTML的原理，能够在网页中应用DHTML特效。 Part1 在网页中使用脚本 什么是脚本 脚本（Script）实际上就是一段程序，用来完成某些特殊的功能。 服务器端脚本：例如 ASP、JSP、PHP等 客户端脚本：例如JavaScript、VBScript等。 客户端脚本的作用 客户端脚本经常用来检测浏览器、响应用户动作、验证表单数据以及显示各种自定义内容，如特殊动画、对话框等。 使用客户端脚本 方式1：插入脚本 用script标记符嵌入脚本程序， 例如： script language=Javascript 此处为程序代码 /script 演示——插入脚本 使用客户端脚本 方式2：直接添加脚本 直接将代码作为事件响应属性的值。 例如： input type=button onclick=javascript:alert(“hello”) 演示——直接添加脚本 使用客户端脚本 方式3：链接脚本文件 用script的src属性指定一个外部javascirpt文件（后缀为.js ） 例如： script language=javascript src=test.js/script 演示——链接脚本文件 Part 2 JavaScript简介 JavaScript简介 变量不需要指定类型，用var定义，也可不定义 JavaScript运算符与C语言非常相似，包括算术运算符、逻辑运算符、比较运算符、字符串运算符、条件运算符等。 JavaScript简介 JavaScript语句也与C语言很相似，包括：条件语句（if else, switch）、循环语句（for, while, do while）等。 如果一行用多个语句，应用分号分隔，否则可以省略分号。 JavaScript函数 JavaScript函数用function作为关键字，通常在HEAD标记符内定义，形式如下： function fun_name(参数，参数) { 语句 } 演示——使用函数 使用JavaScript对象 对象的两个要素： 属性（数据） 方法（动作） JavaScript中的两类对象： JavaScript内置对象 浏览器对象 JavaScript内置对象 日期对象 先用new关键字创建 数学对象 不需创建，可直接使用 演示——使用内置对象 浏览器对象 文档对象模型（DOM） 用于表示HTML元素以及Web浏览器信息的一个模型，它使脚本可以访问Web页上的信息。 文档对象模型示意图 对象的引用 根据对象的包含关系，使用成员引用操作符一层一层地引用对象 例如：window.location 较低层次对象一般用名称（对应于id属性或name属性）引用 例如：document.form1.test document对象 属性 all, bgcolor, forms, title 事件 onload, onunload 方法 write() 事件机制 演示——使用document对象 window对象 属性 document, history, loction, status 方法 alert(), confirm(), prompt(), open(), setInterval() 演示——使用window对象 演示——使用form对象 Example1 Example2 DHTML技术 动态HTML（Dynamic HTML，简称DHTML）技术建立在原有技术之上，包括三个方面： HTML CSS 客户端脚本 演示——使用dhtml技术 DHTML example1 DHTML example2 DHTML example3 DHTML example4 DHTML example5 DHTML example6 That’s all for this chapter! * * JavaScript事件处理器 浏览器显示 键盘鼠标操作 更新浏览器显示 键盘鼠标事件