《基于asp net的web应用开发第2版)吴金秀数字资源单元2任网页设计与制作基础（html+css+js）（5）》由会员分享，可在线阅读，更多相关《基于asp net的web应用开发第2版)吴金秀数字资源单元2任网页设计与制作基础（html+css+js）（5）（24页珍藏版）》请在金锄头文库上搜索。
1、WEB 应 用 开 发,单元2：网站的规划与设计,任务2：网页设计与制作基础（html+css+js）(4),主 要 内 容,学习目标,知识目标： 掌握JavaScript基础知识 能力目标： 能够使用JavaScript制作简单的网页特效,技术应用的背景,JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，响应用户的各种操作，如网页中动态的特效、表单验证等。,一、JavaScript概述,1.JavaScript概述 浏览器端的编程语言，可以动态地生成和控制HTML元素，可以嵌入到网页
2、中。JavaScript的运行环境是浏览器而非Web服务器，因此，它的功能是受浏览器限制的。JavaScript的主要功能是：动态操控网页上的HTML元素，控制浏览器完成一些工作。 JavaScript语法与C比较类似，但有许多很特殊的地方。 注意：JavaScript不是Java！,一、JavaScript概述（续）,2.在HTML中使用JavaScript 方式一：使用script标签 方式二：在窗体控件的事件属性中直接输入简短的JavaScript脚本代码 方式三：使用外部JavaScript文件, JavaScript代码 ,JavaScript脚本代码,外部JavaScript文件，
3、扩展名为.js,一、JavaScript概述（续）,3.JavaScript代码解析 浏览器是以一种流的方式从上到下读入HTML网页中的内容，当它发现标签时，根据其type属性决定将如何解析脚本程序。 要点： 函数必须先定义后使用。 函数定义好之后，并不会自动执行，必须有一个明确的调用语句。 被调用的函数其定义必须放在调用语句前面。 只有事件激发以后，相应的代码才被调用。 事件响应基于最基本的函数调用,二、JavaScript语法,1. 变量 不必声明直接使用 定义变量时不需要指定变量类型 变量类型运行时可变 五种基本数据类型 string：字串类型，以双引号或单引号界定 number：数字类
4、型，既可以保存32位的整数，也可保存64位的浮点数 boolean：布尔类型，只有两个值：true和false object：引用类型，通常用来引用对象，比如保存网页上的文本框等控件的变量，其类型就是object undefined：当一个变量未初始化时，其值就是undefined,二、JavaScript语法（续）,2. 变量作用域 只有两种作用域：全局和局部,var global; /全局变量 function f() var local; /局部变量 ,注意：当有多个JavaScript文件时，要注意变量的同名问题。,二、JavaScript语法（续）,3. 基本流程控制 顺序结构 分支
5、结构 循环结构,二、JavaScript语法（续）,4.JavaScript函数 使用function关键字定义JavaScript函数 /方式1：命名函数 function f() alert(“Hello,World!”); /方式2：匿名函数 var f=function () alert(“Hello,World!”); 与众不同之处：函数是一个对象,二、JavaScript语法（续）,5.JavaScript对象 两种方式创建JavaScript对象： 1.字面量法： var point = x:0, y:0 ; 2.直接创建Object类的对象实例，然后给其再添加属性和方法： va
6、r point=new Object(); point.x=100; point.y=200; alert(point.x); JavaScript对象的特点 其属性与方法可以动态地增加和删除,二、JavaScript语法（续）,6. this关键字 this关键字用于引用执行此代码的对象自身,三、浏览器对象模型（BOM）,浏览器对象模型BOM用于访问与操纵浏览器窗口。 访问 BOM 中的对象 （1）访问 window 对象 直接使用标识符 window （2）访问下层对象 与访问对象的一般属性相同： window.document.write(“Hello“); 直接访问 document.
7、write(“Hello“);,三、浏览器对象模型（BOM）（续）,2.操控浏览器 通过浏览器对象模型，可以写代码操控浏览器 使用window对象开新窗口访问网站 获取网页当前URL的相关信息 使用Timer对象实现网页定时刷新,四、文档对象模型（DOM）,1.文档对象模型DOM DOM （文档对象模型）是一个表示和处理文档的应用程序接口（API），可用于动态访问、更新文档的内容、结构和样式。,四、文档对象模型（DOM）（续）,2. DOM编程模型 浏览器将整个HTML网页解析为一棵DOM树。 每个HTML元素都对应着DOM树中的一个节点。 通过JavaScript可以访问这棵DOM树中的任意
8、一个节点，并且可以修改它（比如给其增加一个子节点）。 节点被修改，意味着HTML文档本身发生了变化，从而导致网页显示内容的变化。 根据这个原理，JavaScript就拥了强大而灵活的网页元素操控能力！,四、文档对象模型（DOM）（续）,3.访问DOM根节点和body元素 DOM树的起点是document节点，浏览器对象模型中的window.document.documentElement可以访问它 window.document.body可访问body元素。,四、文档对象模型（DOM）（续）,4.DOM规定所有DOM树节点都有以下三个属性： nodeName：节点的名称 nodeValue：节
9、点的值 nodeType：节点类型,从document节点开始，可以通过nodeName和nodeType来查找特定的节点，通过nodeValue来获取它的值。,四、文档对象模型（DOM）（续）,5.通过DOM标准方法访问特定元素 getElementById(id) 返回元素，类似 document.all.item(id) IE 允许直接使用 ID 标识符访问 id 元素 getElementsByName(name) 返回集合，类似 document.all.item(name) getElementsByTagName(tag) 返回集合，等同于 document.all.tags(t
10、ag),四、文档对象模型（DOM）（续）,5.通过DOM标准方法访问特定元素（续） HTML DOM规定了一组标准的属性，比如parenetNode、childNodes等，对于任何一个HTML元素，都可以根据这些属性在DOM树中找到特定的元素节点。 一般情况下，通常需要先得到待访问元素的父元素节点，然后再通过其childNodes 子节点索引，或firstChild以及lastChild属性来访问此节点。,四、文档对象模型（DOM）（续）,6 .通过DOM标准方法操纵 HTML DOM 对象 通过修改 HTML DOM 对象，可以动态改变页面元素的属性 通过添加、删除、替换、复制 HTML DOM ，就可以为页面动态添加、删除、替换、复制相应的页面元素,七、小结,本节主要介绍JavaScript语法、浏览器对象模型（BOM）、文档对象模型（DOM），能在理解的基础上进行灵活运用，设计与制作用以增加网站视觉效果的动态特效。,THANK YOU,
