《基于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,