第4章 .net JavaScript编程基础.ppt

第第4 4章章 JavaScript JavaScript 编程基础编程基础北京理工大学计算机学院北京理工大学计算机学院 金旭亮金旭亮ASP.NET 程序设计教程主要内容主要内容4.1JavaScript概述4.2JavaScript代码的解析流程4.3JavaScript语法基础4.4浏览器对象模型（BOM）4.5文档对象模型（DOM）4.6事件与事件响应4.7动态修改网页24.1 JavaScript4.1 JavaScript概述概述JavaScriptJavaScript是什么，它有什么作用？是什么，它有什么作用？客户端客户端脚本语言：脚本语言：JavaScriptJavaScript引例：UseJavaScript.html4形成对形成对JavaScriptJavaScript的感性认识的感性认识JavaScript：浏览器端的编程语言，可以动态地生成和控制HTML元素，可以嵌入到网页中JavaScript的运行环境是浏览器而非Web服务器，因此，它的功能是受浏览器限制的。JavaScript的主要功能是：动态操控网页上的HTML元素，控制浏览器完成一些工作。JavaScript语法与C比较类似，但有许多很特殊的地方。注意：JavaScript不是Java！5在在HTMLHTML中使用中使用JavaScriptJavaScript（1 1）方式一：使用标签JavaScript代码方式二：在窗体控件的事件属性中直接输入简短的JavaScript脚本代码6在在HTMLHTML中使用中使用JavaScriptJavaScript（2 2）方式三：使用外部JavaScript文件74.2 4.2 JavaScriptJavaScript代码的解析流程代码的解析流程8JavaScriptJavaScript代码的流式解读代码的流式解读浏览器是以一种流的方式从上到下读入HTML网页中的内容，当它发现标签时，根据其type属性决定将如何解析脚本程序。Demo:InvokeFunc.htm要点：1.函数必须先定义后使用。2.函数定义好之后，并不会自动执行，必须有一个明确的调用语句。3.对于被调用的函数，其定义必须放在调用语句前面。9JavaScriptJavaScript的事件驱动式动态解析的事件驱动式动态解析实例：ResponseToEvent.html要点：只有事件触发以后，相应的代码才被调用。事件响应基于最基本的函数调用。10建议：建议：JavaScriptJavaScript代码的放置位置代码的放置位置对于少量的JavaScript代码，建议将其封装为函数，并放在标签中，在页面主体中通过调用函数来执行JavaScript程序。对于量较大的JavaScript代码，将其单独放在一个后缀名为.js的文件中，然后在HTML网页中进行引用。如果代码量较大，还可以建立专门的文件夹来分类存放。114.3 4.3 JavaScriptJavaScript语法基础语法基础与与C#/JavaC#/Java类似，拥有几乎相同的关键字和语法类似，拥有几乎相同的关键字和语法JavaScriptJavaScript是一种吸收了面向对象特性的函数式语言是一种吸收了面向对象特性的函数式语言关于变量关于变量不必声明直接使用定义变量时不需要指定变量类型变量类型运行时可变五种基本数据类型五种基本数据类型1.string：字串类型，以双引号或单引号界定。2.number：数字类型，既可以保存32位的整数，也可保存64位的浮点数。3.boolean：布尔类型，只有两个值：true和false。4.object：引用类型，通常用来引用对象，例如用于保存网页上的文本框等控件的变量，其类型就是object。5.undefined：当一个变量未初始化时，其值就是undefined。13变量作用域变量作用域只有两种作用域：全局和局部 var global;/全局变量 function f()var local;/局部变量 注意：当有多个JavaScript文件时，要注意变量的同名问题。Demo：UseGlobalVariable.htm14JavaScriptJavaScript函数函数使用function关键字定义JavaScript函数与众不同之处：函数是一个对象！Demo:FunctionIsAnObject.htm15JavaScriptJavaScript对象对象有两种方式创建JavaScript对象：（1）字面量法：varpoint=x:0,y:0;（2）直接创建Object类的对象实例，然后给其再添加属性和方法：varpoint=newObject();point.x=100;point.y=200;alert(point.x);16JavaScriptJavaScript对象的特点对象的特点其属性与方法可以动态地增加和删除Demo:CreateAndVisitObject.htm17thisthis关键字关键字this关键字用于引用执行此代码的对象自身 18prototypeprototype属性属性用于给现有的“类”增加新的属性与方法demo:UsePrototype.htm要点：1通过this关键字可定义“类”的构造函数2通过prototype属性给已有的JavaScript类添加新的属性和方法，这些新的成员将会被自动添加到已创建和新创建的对象中。194.4 4.4 浏览器对象模型浏览器对象模型（BOMBOM）BOMBOM：Browser Object ModelBrowser Object Model编程操控浏览器！编程操控浏览器！三种对话框三种对话框demo:JavaScriptDialog.htm21浏览器对象模型浏览器对象模型浏览器提供了一个对象树，可供JavaScript代码访问：22操控浏览器操控浏览器通过浏览器对象模型，可以编写代码操控浏览器Demo:OpenNewWindow.htm使用window对象开新窗口访问网站Demo:BrowserLocation.htm获取网页当前URL的相关信息Demo:MyTimer.htm使用Timer对象实现网页定时刷新234.5 4.5 文档对象模型（文档对象模型（DOMDOM）通过通过JavaScriptJavaScript操控网页上的一切！操控网页上的一切！什么是什么是DOMDOM？DOM：文档对象模型是一组可供JavaScript编程访问的对象，主要用于描述HTML网页，浏览器通过它来管理和显示HTML元素。25DOMDOM模型模型浏览器将整个HTML网页解析为一棵DOM树。每个HTML元素都对应着DOM树中的一个节点。通过JavaScript可以访问这棵DOM树中的任意一个节点，并且可以修改它（例如给其增加一个子节点）。节点被修改，意味着HTML文档本身发生了变化，从而导致网页显示内容的变化。根据这个原理，JavaScript就拥了强大而灵活的网页元素操控能力！26解决节点的查找与访问问题解决节点的查找与访问问题只有先找到要处理的对象，才能操控它！只有先找到要处理的对象，才能操控它！访问访问DOMDOM根节点和根节点和元素元素DOM树的起点是document节点，浏览器对象模型中的window.document.documentElement可以访问它window.document.body可访问元素。28DOMDOM树中的节点属性树中的节点属性DOM规定所有DOM树节点都有以下三个属性：1.nodeName节点的名称2.nodeValue节点的值3.nodeType节点类型从document节点开始，可以通过nodeName和nodeType来查找特定的节点，通过nodeValue来获取它的值。29通过通过DOMDOM标准方法访问特定元素标准方法访问特定元素HTMLDOM规定了一组标准的属性，例如parenetNode、childNodes等，对于任何一个HTML元素，都可以根据这些属性在DOM树中找到特性的元素节点。一般情况下，通常需要先得到待访问元素的父元素节点，然后再通过其childNodes子节点索引，或firstChild以及lastChild属性来访问此节点。30访问指定访问指定IDID的元素的元素HTML:JavaScript:vartxt=document.getElementById(txtUserInput);if(txt)alert(txt.value);31访问指定标签名称的元素访问指定标签名称的元素Example:varx=document.getElementsByTagName(p);for(vari=0;ix.length;i+)/通过xi来访问每一个元素 32访问窗体中的控件访问窗体中的控件document对象的forms属性包含了网页中的所有窗体，可以使用“document.forms索引”来访问网页中的特定窗体。放置在窗体中的HTML控件可以通过窗体对象的elements属性访问，“document.forms0.elements1”表示访问网页中第一个窗体的第二个HTML控件。如果放置在HTML窗体中的控件还同时指定了name属性，则可以直接使用此属性来访问它，例如，以下JavaScript代码显示出用户输入的密码：alert(document.forms0.txtPwd.value);334.6 4.6 事件与事件响应事件与事件响应“事件事件”让网页让网页“动动”起来！起来！HTMLHTML元素的事件元素的事件许多HTML元素可以触发事件。如一个按钮（即input元素）可触发onclick事件，可编写代码完成对用户单击按钮对象的响应。通过响应特定元素的特定事件，可以大大地提升网页的交互性。35编写事件响应代码（编写事件响应代码（1 1）在元素的属性声明中直接编写JavaScript代码。例如：36编写事件响应代码（编写事件响应代码（2 2）响应函数：functionButton1_onclick()/.事件名称响应函数名37编写事件响应代码（编写事件响应代码（3 3）动态事件挂接（demo:DynamicEventInvoke.htm)varbtn=document.getElementById(btnClick);btn.onclick=function()alert(Hello);38事件的应用实例（事件的应用实例（1 1）Demo:ResponseToElementEvent.htm39事件的应用实例（事件的应用实例（2 2）Demo:DynamicTable.htm40事件的应用实例（事件的应用实例（3 3）当一个HTML窗体向Web服务器提交数据时，一个特定的onsubmit事件被触发。通过给此事件编写代码，可以在数据提交前先验证数据的有效性，避免将无效的数据提交给Web服务器。Demo:ClientDataValidate.htm414.6 4.6 动态修改网页动态修改网页通过通过BOMBOM和和DOMDOM，JavaScriptJavaScript可以操控网页中的元素可以操控网页中的元素动态创建文档动态创建文档Demo:documentWrite.htm要点：使用document.write方法动态输出HTML代码。43动态增加与删除网页元素动态增加与删除网页元素Demo:DynamicModifyPage.htm44动态样式切换动态样式切换(1)(1)许多HTML元素都有一个style属性用于管理其CSS样式，因此，可以直接给其赋值以设定其CSS样式:vardiv=document.getElementById(div1);div.innerHTML=动态设定的背景色;div.style.backgroundColor=yellow;45动态样式切换动态样式切换(2)(2)对于CSS中设定的样式类，可以通过HTML元素的className属性应用到此元素上。46var div=document.getElementById(“content”);div.className=test;