JavaScript编程-电子课件

上传人：1*** IP属地：广西上传时间：2024-03-11 格式：PPT 页数：102 大小：2.14MB 积分：18 举报 版权申诉

已阅读5页，还剩97页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作课程开发组制作主讲人：阚宝朋管曙亮本章要点单元5JavaScript编程任务1下拉菜单的设计任务2表格美化的设计任务3表单验证的设计引例描述

学习方案：第一步：学习JavaScript根底，综合HTML与CSS技术完成下拉菜单的设计。第二步：系统学习DOM对象树与相关事件，实现表格美化的设计。第三步；综合运用JavaScript技术，实现表单验证的设计。任务1下拉菜单的设计【任务陈述】

本任务将综合HTML、CSS、JavaScript技术设计水平方向排列的一级菜单、垂直方向上下拉的二级菜单，鼠标移入或移出事件控制二级菜单显示或隐藏。实例任务1下拉菜单的设计【知识准备】

5.1DHTML简介使用JavaScript、VBScript、DocumentObjectModle〔DOM〕、layers或者CSS等技术。运用JavaScript脚本，实现根据用户的动作对html页面作出的响应。根据DOM对象事件驱动机制，实现页面元素的鼠标事件、键盘事件。CSS是DOM中的一局部，使用脚本语言能够改变CSS中的一些属性，从而，使页面能产生许多显示效果任务1下拉菜单的设计【知识储藏】5.2JavaScript简介Javascript是一种基于对象和事件驱动并具有平安性能的脚本语言，使用它的目的是与HTML超文本标记语言一起实现在Web客户端与Web效劳端进行交互。Javascript是一种比较简单的编程语言，向Web页面的HTML文件增加一段脚本，不需要单独编译，当一个支持Javascript浏览器翻开这个页面时，它会读出这个脚本并执行其指令。通过编写Javascript脚本实现Web客户端页面菜单设计、幻灯片设计、表格的美化、表单的验证等等，让用户有及时操作体验和赏心悦目的视觉享受。任务1下拉菜单的设计5.2JavaScript简介

JavaScriptJavaScript的编辑与运行

<html><head><title>HelloJavaScript!</title></head><body><scriptlanguage="javascript">document.write("Hello");document.write("JavaScript！<br>/*注释*/");/*注释*/

document.write("JavaScript很精彩！");

window.alert("HelloJavaScript！");//可简写为alert("HelloJavaScript！");

</script></body></html>任务1下拉菜单的设计5.3JavaScript特点JavaScript是一种解释性的脚本编写语言。Javascript是基于对象的语言。简单性〔语句结构与数据类型〕平安性〔不允许直接访问客户端和效劳端文件〕动态性〔实现对客户端事件的响应〕跨平台性〔与浏览器有关、与操作系统无关〕任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式一、数据类型与常量JavaScript中有四种根本的数据类型：数值型，包括整型和实型如：120，35.23;字符串型，用引号包围的文本如："我是字符串1",'我是字符串2'布尔型，只有两者取值如：true、false。空值，表示从未赋值的值，只有一种取值如：null。任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式二、变量的定义变量定义作用：明确指出变量的名称、变量的类型及其变量的作用域。变量的命名规那么：〔1〕变量名必须以字母或下划线开头，中间可以出现数字、字母或下划线。变量名称中不能有空格、(+)、(-)、(,)或其它符号以免引起误解。其它〔如函数、属性等〕需要命名的也与此相似。〔2〕不能使用JavaScript中的关键字作为变量。〔3〕注意变量名字能代表其存储数据的意义，见名知义，增强可读性，以节省程序调试与开发的时间。任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式三、变量的作用域JavaScript中变量的作用域有全局变量和局部变量之分。全局变量定义在所有函数体之外，其作用范围是所有的函数；局部变量定义在函数体之内，只在该函数内可见，其它函数那么不能访问它。全局变量与局部变量同名同名局部变量所在函数内会屏蔽全局变量，而优先使用局部变量。任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式变量作用域的演示<scriptlanguage="javascript"> document.write("全局变量与局部变量的演示:<br/>");

varmyname="张三";

document.write("函数外：myname="+myname+"<br/>");

functionmyfun(){

varmyname;

myname="李四";

document.write("函数内：myname="+myname+"<br/>");

}

myfun();

document.write("函数外：myname="+myname+"<br/>");</script>任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式四、数组数组是用来存储和操作一批具有相同类型数据的数据类型，数组是对象类型的，有多种预定义的方法以方便程序员使用。数组的定义与初始化1〕单纯创立数组varmenus=newArray();2〕创立数组的同时规定数组大小varmenus=newArray(4);3〕直接初始化直接初始化的方法如下：varmenus=newArray("首页","专业建设","师资队伍","教学条件","改革建设");这里就直接初始化了数组，也可以采用如下方法初始化。varmenus=["首页","专业建设","师资队伍","教学条件","改革建设"];任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式二维数组二维数组的定义是在一维数组根底上定义的，即当一维数组的元素又都是一维数组时，就形成了二维数组。二维数组的初始化varsubmenus=newArray(newArray(),newArray("建设目标","建设建设","培养队伍"),newArray("负责人","队伍结构","任课教师","教学管理","合作办学"));以上的代码也可以表示以下等价代码：varsubmenus=newArray();submenus[0]=[];submenus[1]=["建设目标","建设建设","培养队伍"];submenus[2]=[“负责人”,“队伍结构”,“任课教师”,“教学管理”,“合作办学”];以上代码还可以这样写：varsubmenus=[[],["建设目标","建设建设","培养队伍"],["负责人","队伍结构","任课教师","教学管理","合作办学"]];任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式数组元素的访问通过数组名和下标访问数组元素。一维数组的元素使用数组名和下标来访问。格式为：一维数组名[下标]二维数组的元素必须使用数组名和两个下标来访问，第一个为行下标，第二个为列下标。格式为：二维数组名[行下标][列下标]数组元素的下标不能出界，否那么会显示“undefined”〔空值〕。任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式数组的属性与方法数组的属性只有一个，就是length属性。数组的方法数组常用方法任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式数组方法的使用例如varmenus=newArray("首页","专业建设","师资队伍");//toString()：把数组转换成一个字符串，返回该串document.write(menus.toString());document.write("<br>");//join()：把数组转换成一个用符号连接的字符串，返回该串document.write(menus.join(“©"));document.write("<br>");//shift()：将数组头部的一个元素移出，返回移除元素document.write(menus.shift());document.write("<br>");document.write(menus.toString());document.write("<br>");任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式五、运算符与表达式运算符的作用用于操作数据特定符号的集合叫运算符，运算符操作的数据叫操作数，运算符与操作数连接后的式子叫表达式，运算符也可以连接表达式构成更长的表达式。任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式五、运算符与表达式〔1〕算术运算符任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式五、运算符与表达式〔2〕关系运算符任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式五、运算符与表达式〔3〕逻辑运算符任务1下拉菜单的设计5.4JavaScript常量、变量、数组、运算符和表达式〔4〕逗号运算符逗号运算符可以连接几个表达式，表达式的值为最右边表达式的值。逗号运算符的运算优先级最低。〔5〕赋值运算符赋值运算符不仅实现了赋值功能，由它构成的表达式也有一个值，值就是赋值运算符右边的表达式的值，赋值运算符的优先级很低，仅次于逗号运算符。〔6〕条件运算符条件运算符是三元运算符，使用该运算符可以方便地由条件逻辑表达式的真假值得到各自对应的取值。或由一个值转换成另外两个值，使用条件运算符嵌套多个值。任务1下拉菜单的设计5.5程序控制结构结构化程序有三种根本结构，它们是：顺序结构、分支结构和循环结构。顺序结构：从前到后顺序执行语句或语句块。分支结构：有选择的执行语句或语句块。循环结构：屡次执行语句或语句块一、分支结构二、循环结构三、continue语句四、break语句任务1下拉菜单的设计5.6函数的定义与引用函数的作用函数为程序设计人员提供了方便，在进行复杂的程序设计时，通常是根据所要完成的功能，将程序划分为一些相对独立的局部，每局部编写一个函数，从而使各局部充分独立，任务单一，可重复使用，程序清晰、易懂、易读、易维护。

函数是拥有名字的一系列JavaScript语句的有效组合。只要这个函数被调用，就意味着这一系列JavaScript语句按顺序被解释执行。为了使函数具有通用性，给函数添加形式参数列表，以接受外部提供的实际参数列表，并在函数中使用这些参数。任务1下拉菜单的设计5.6函数的定义与引用一、函数的定义函数的定义是使用function关键字实现的,格式如下：function函数名(形式参数列表){

函数体语句块}JavaScript中的函数可以有返回值，也可以没有返回值.返回值是通过return关键字加表达式实现的。//函数的定义functionLevel(level){return(level==1?"优":

level==2?"良":

level==3?"中":}任务1下拉菜单的设计5.6函数的定义与引用二、函数的调用函数必须使用函数名并提供相应的实际参数列表完成调用。在没有提供相应的实际参数列表时，缺省参数按未定义(undefined常量)处理。

//函数的定义

functionLevel(level){

vars=

(level==1?"优":

level==2?"良":

level==3?"中":

level==4?"及":

"差");

returns;

}//函数的调用;

document.writeln(Level(),"<br/>");

document.writeln(Level("2"),"<br/>");

document.writeln(Level(2),"<br/>");任务1下拉菜单的设计5.6函数的定义与引用函数的定义及优化由性别逻辑值输出性别对应的汉字varsex=false;//函数的定义functionSex_1(){varsex=false;//定义局部变量，不接受外界传入的数据

if(sex)document.write("男","<br>");

elsedocument.write("女","<br>");}functionSex_2(){if(sex)//使用全局变量，接受外界传入的数据

document.write("男","<br>");elsedocument.write("女","<br>");}functionSex_3(sex){//使用形式参数，接受外界传入的数据

if(sex)document.write("男","<br>");

elsedocument.write("女","<br>");}functionSex_4(sex){//使用形式参数，接受外界传入的数据

if(sex)return"男";//设置返回值，增强函数的灵活性

elsereturn"女";}任务1下拉菜单的设计5.6函数的定义与引用函数的定义及优化由性别逻辑值输出性别对应的汉字//函数的调用document.write("全局变量sex=",sex,"<br>");Sex_1();Sex_2();Sex_3(false);Sex_3();Sex_3("false");document.write(Sex_4(sex),Sex_4(),Sex_4(undefined),Sex_4(null),Sex_4("false"),Sex_4(0),"<br>");sex=true;//修改了全局变量document.write("全局变量sex=",sex,"<br>");Sex_1();Sex_2();Sex_3();Sex_3(true);document.write(Sex_4(sex),Sex_4(),Sex_4(undefined),Sex_4(null),Sex_4("true"),Sex_4(1),"<br>");document.write(Sex_3(true),"<br>");任务1下拉菜单的设计5.6函数的定义与引用数组作函数参数//数组的遍历functionArray_Traversal(array){vars="<ul>";

for(iinmenus){s+="<li>"+array[i]+"</li>"}s+="</ul>";returns;}varmenus=newArray("首页","专业建设","师资队伍");document.write(Array_Traversal(menus));document.write("==========================","<br>");menus[menus.length]="教学条件";menus.push("改革建设");document.write(Array_Traversal(menus));任务1下拉菜单的设计5.6函数的定义与引用三、用户类的定义JavaScript是基于对象的脚本语言类是对象的模版类的根本成员有两种：静态数据〔属性〕动态行为〔方法〕。使用JavaScript可以定义用户新的类使用的关键字是function。任务1下拉菜单的设计5.6函数的定义与引用Table类的定义与引用Table类中数据有：表数据Rows前景色ForeColor背景色BackColor线条色LineColor表宽Width;行为有：得到表标签getTable。任务1下拉菜单的设计5.7浏览器内置对象的使用浏览器内置对象概述要对网页进行编程，必须了解浏览器、浏览器中显示的窗口和窗口中显示的HTML文档等信息。JavaScript在网页编程中经常操作的HTML文档被称为文档对象〔DocumentObject〕，它是浏览器对象的一局部。浏览器对象模型是分层组织的。window对象是最顶层的对象，包含了浏览器文档窗口的信息；navigate对象包含了浏览器的相关信息；frames[]数组对象，包含了一组窗口对象；location对象存储了页面的URL；document对象模型中最重要的对象，前面已经在使用；history对象存储了本此会话中访问过的历史页面；screen对象存储了浏览者系统的显示属性。任务1下拉菜单的设计5.7浏览器内置对象的使用一、浏览器信息〔navigator〕对象任务1下拉菜单的设计5.7浏览器内置对象的使用二、窗口〔window〕对象窗口对象包括许多使用的属性、方法和事件驱动程序，编程人员可以利用这些对象控制浏览器窗口显示的各方面属性，如对话框、框架等。常用Window对象的方法：open〔URL、windowName、parameterList〕：open方法创立一个新的浏览器窗口，并在新窗口中载入一个指定的URL地址。close()：关闭一个浏览器窗口。alert()：弹出一个消息框。confirm()：弹出一个确认框。prompt()：弹出一个提示框。任务1下拉菜单的设计5.7浏览器内置对象的使用二、窗口〔window〕对象〔1〕open()：创立或翻开浏览器窗口，并在窗口中载入一个指定的URL地址，返回创立的窗口对象的引用。该方法的原型是：window.open〔URL，windowName，parameterList〕；〔2〕close()：关闭一个浏览器窗口。该方法的原型是：window.close〔〕；window对象的open方法与close方法使用例如任务1下拉菜单的设计5.7浏览器内置对象的使用二、窗口〔window〕对象window.open对新建窗口的样式可以有更多的控制，例如：窗口大小、是否显示菜单栏、是否显示滚动条、是否显示地址栏等等。其完整的调用语法如下：window.open(url,windowName,"name1=value1[,name2=value2,[…]]");其中：url是要翻开的页面地址；windowName表示新建窗口的名字，根据name参数是否使用过决定创立新窗口或在已有窗口翻开url指定的页面；最后是一个用字符串表示的参数列表。每一个参数都是名称和值对应的形式，用逗号隔开，表示新window的属性值的设置。任务1下拉菜单的设计5.7浏览器内置对象的使用二、窗口〔window〕对象window.open例如任务1下拉菜单的设计5.7浏览器内置对象的使用二、窗口〔window〕对象任务1下拉菜单的设计5.7浏览器内置对象的使用三、网址〔location〕对象location对象是当前网页的URL地址，可以使用Location对象让浏览器翻开某网页。window.location.href='://baidu';四、屏幕〔screen〕对象screen对象在加载HTML文档时自动创立，用于存储浏览者系统的显示信息。任务1下拉菜单的设计5.7浏览器内置对象的使用五、历史记录〔history〕对象history对象含有以前访问过的网页的URL地址。下面两条语句实现了页面前进和页面后退。history.go(1);//页面前进history.go(-1);//和页面后退六、文档〔document〕对象每一个window对象都有document属性，用于引用表示HTML文档的对象。前面已经大量使用过document对象的write方法。除此之外，document对象还有很多的属性和方法用于访问并操控页面内的<html></html>内的HTML对象。HTML文档中标签的嵌套使用形成了HTML文档的树形结构，文档对象也具有树形结构，理解文档对象模型〔DocumentObjectModel，简称DOM〕结构，会有利于编程者操控整个HTML文档。任务1下拉菜单的设计5.7浏览器内置对象的使用六、文档〔document〕对象用document对象统计表单及其元素的数目任务1下拉菜单的设计5.7浏览器内置对象的使用六、文档〔document〕对象document的常用属性任务1下拉菜单的设计5.7浏览器内置对象的使用六、文档〔document〕对象文档对象的属性的读写任务1下拉菜单的设计5.8页面中标签的访问与属性的设置一、页面标签对象的引用〔1〕getElementById方法getElementById方法可以根据标签对象的ID属性值得到唯一的标签对象，如果页面上含有多个相同id的节点，那么只返回第一个节点。在页面里标签对象的Id尽可能是唯一的。使用document.getElementById方法实现加法器任务1下拉菜单的设计5.8页面中标签的访问与属性的设置一、页面标签对象的引用〔2〕getElegetElementsByName方法可以根据标签对象的name属性值得到名称相同的一组标签对象，这里要求标签对象的name是可以相同的，该方法得到的是标签对象数组，访问其中某个标签对象要根据标签对象在HTML文档中的相对次序决定其下标，第一个标签对象的下标为0。mentsByName方法使用document.getElementsByName方法实现加法器任务1下拉菜单的设计5.8页面中标签的访问与属性的设置一、页面标签对象的引用〔2〕getElementsByName方法getElementsByName方法可以根据标签对象的name属性值得到名称相同的一组标签对象，这里要求标签对象的name是可以相同的，该方法得到的是标签对象数组，访问其中某个标签对象要根据标签对象在HTML文档中的相对次序决定其下标，第一个标签对象的下标为0。使用document.getElementsByName方法实现加法器〔3〕getElementsByTagName方法可以根据标签对象的标签名得到同类标签的集合对象，它的涉及范围最大。用数组加下标访问其中的标签对象。vartext=document.getElementsByName("text");替换为vartext=document.getElementsByTagName("input");也能到达相同的结果。任务1下拉菜单的设计5.8页面中标签的访问与属性的设置二、读写HTML对象的属性〔1〕读HTML对象属性读HTML对象属性主要有以下两种格式：1〕HTML对象.属性名例如：document.getElementById("div1").innerHTML;2〕HTML对象.getAttribute(属性名)例如：document.getElementById("div1").getAttribute("innerHTML");〔2〕写HTML对象属性写HTML对象属性也有相应的两种格式：1〕HTML对象.属性名="新属性值“2〕HTML对象.setAttribute("属性名","新属性值")任务1下拉菜单的设计5.8页面中标签的访问与属性的设置三、表单及其控件的访问〔1〕表单的访问表单的访问有以下两种格式：1〕document.forms[索引]2〕document.表单名称通过表单对象访问表单属性和方法，格式如下：document.forms[索引].属性document.forms[索引].方法〔参数〕document.表单名称.属性document.表单名称.方法〔参数〕〔2〕表单内控件的访问表单内控件的访问格式为：表单对象.elements[下标]。任务1下拉菜单的设计5.8页面中标签的访问与属性的设置三、表单及其控件的访问〔3〕表单元素的值属性只有表单元素，才有name属性，表单元素也只有设置了name属性值才能在效劳端用请求集合加name属性值获得提交的数据。表单元素用于提交的这个数据，在客户端是用什么属性读写的，这个属性应该是该表单元素最重要的属性。下面通过例如展示各种表单元素的最重要的属性。一、事件的指派JavaScript是基于对象和事件驱动的编程语言。在上个实例中表单元素值的显示是在页面刚显示是就弹出了对话框，用户没有时机设置，如果在按钮被点击后显示，这样就可以得到表单元素的动态设置的值。这里按钮点击就是驱动事件，按钮点击的事件是什么？如何进行事件的处理？下面就以按钮点击事件及其处理来答复这些问题。按钮点击事件也叫按钮单击事件，按钮有一个名为onclick属性，设置这个属性，就可以使得按钮在单击后完成某个任务了。按钮单击事件的指派任务1下拉菜单的设计5.9事件的指派与处理函数的编写二、常用事件的类型JavaScript编程是基于事件驱动的编程，在编写可交互的客户端程序是必须对事件的类型有所了解。任务1下拉菜单的设计5.9事件的指派与处理函数的编写二、常用事件的类型event对象的常用属性不少事件有自己的事件对象，以传递事件发生时的相关信息，如鼠标移动时的位置，键盘按下是的键值等。任务1下拉菜单的设计5.9事件的指派与处理函数的编写任务1下拉菜单的设计任务实施一、任务需求二、任务完成的步骤本任务的实现分为三个局部：1〕使用HTML标签构建下拉菜单所需的树型结构数据。2〕从上到下，分步定义不同层次HTML标签CSS的样式实现HTML标签的布局与美化。3〕编写JavaScript脚本，动态设置HTML标签CSS的样式。任务1下拉菜单的设计任务实施三、下拉菜单的HTML结构下拉菜单是由具有树形结构的数据构成，本任务使用两个不同级别的列表标签实现下拉菜单的数据存储，列表项的内容〔innerHTML属性〕是超级链接。使用HTML对象ui、li的嵌套来组织菜单数据。任务1下拉菜单的设计任务实施四、样式设计〔1〕设置总体样式,改变字体及行间距〔2〕设置顶层ui与li的样式〔3〕设置超链接样式〔4〕设置第二层ul样式〔5〕设置第一层li:hover及其下属的ul、li样式〔6〕设置第二层的超链接样式任务1下拉菜单的设计任务实施四、样式设计〔1〕设置总体样式,改变字体及行间距〔2〕设置顶层ui与li的样式〔3〕设置超链接样式〔4〕设置第二层ul样式〔5〕设置第一层li:hover及其下属的ul、li样式〔6〕设置第二层的超链接样式任务1下拉菜单的设计任务实施四、样式设计〔1〕设置总体样式,改变字体及行间距〔2〕设置顶层ui与li的样式〔3〕设置超链接样式〔4〕设置第二层ul样式〔5〕设置第一层li:hover及其下属的ul、li样式〔6〕设置第二层的超链接样式任务1下拉菜单的设计任务实施四、样式设计〔1〕设置总体样式,改变字体及行间距〔2〕设置顶层ui与li的样式〔3〕设置超链接样式〔4〕设置第二层ul样式〔5〕设置第一层li:hover及其下属的ul、li样式〔6〕设置第二层的超链接样式任务1下拉菜单的设计任务实施四、样式设计〔1〕设置总体样式,改变字体及行间距〔2〕设置顶层ui与li的样式〔3〕设置超链接样式〔4〕设置第二层ul样式〔5〕设置第一层li:hover及其下属的ul、li样式〔6〕设置第二层的超链接样式任务1下拉菜单的设计任务实施四、样式设计〔1〕设置总体样式,改变字体及行间距〔2〕设置顶层ui与li的样式〔3〕设置超链接样式〔4〕设置第二层ul样式〔5〕设置第一层li:hover及其下属的ul、li样式〔6〕设置第二层的超链接样式任务1下拉菜单的设计任务实施五、编写JavaScript脚本任务1下拉菜单的设计任务拓展设置最近被单击过的超链接外观属性记忆上次被单击过的超链接为深红色粗体样式。为此先定义一个样式类如下：编写JavaScript脚本使得clicked类样式只用于刚刚单击过的超链接。任务1下拉菜单的设计任务拓展设置最近被单击过的超链接外观属性—改进版上面这段代码将所有的超链接对象遍历了一遍，效率不高，可以使用一个全局变量保存上次点击过的超链接对象，防止遍历过程，提高执行效率。改进代码如下：任务2表格美化的设计【任务陈述】本任务对由table对象及其下属对象进行样式设置，使表头行与表体行有别，表体行的奇数行、偶数行和鼠标移入行的背景色有区别。

实例任务2表格美化的设计5.10DOM对象意义与结构DOM是文档对象模型〔DocumentObjectModel〕的缩写。DOM对象模型的出现，使得HTML元素成为对象，借助JavaScript脚本就能操作HTML元素。HTML元素允许相互嵌套，页面文档局部是由body为根节点的HTML节点树组成的，DOM的结构就是一个树形结构。在JavaScript程序使用DOM对象中可以动态添加、删除、查询节点，设置节点的属性，程序员使用丰富的DOM对象库可以方便地操控HTML元素。【知识准备】任务2表格美化的设计5.11DOM对象节点类型任务2表格美化的设计5.12DOM对象节点及其属性的访问DOM对象的访问是操作DOM节点的先决条件。使用前面介绍的getElementById、getElementsByName、getElementsByTagyName可以定位DOM节点绝对位置，getElementsByName、getElementsByTagyName得到的是DOM节点的集合，访问其中某个节点必须借助于下标。DOM还为访问DOM节点的相对位置提供了丰富的方法。这些方法有：一、访问父节点二、访问子节点三、访问兄弟节点任务2表格美化的设计5.13DOM对象节点的创立与修改DOM树形结构的建立与调整，都可以用JavaScript代码对节点的创立与删除进行修改，以取代前面的字符串方式拼接的HTML文本，用访问DOM节点树中节点对象方式局部替代HTML元素对象，更容易实现用JavaScript编程操作页面中各个DOM对象。操作DOM节点对象方法主要有创立节点、添加节点、删除节点、替换节点、复制节点等。一、创立节点二、添加节点三、删除节点四、替换节点五、复制节点任务2表格美化的设计任务实施

表格美化的设计需要完成表格数据结构结构级数据的建立、样式表文件的建立和javascript事件处理文件的建立。本任务从静态页面设计三个方面进行设计，设计步骤分别如下：第一步、HTML设计提供页面元素；第二步、CSS设计布局与美化页面元素；第三步、JavaScript设计处理页面元素的事件。当然，前面的两步也可以用JavaScript完成，从效劳端接受的数据，用JavaScript脚本构造DOM对象子树，设置DOM对象的style及其下属属性，最后将DOM对象子树添加到DOM容器父对象中。任务2表格美化的设计任务实施

第一步、HTML设计提供页面元素任务2表格美化的设计任务实施

第二步、样式文件的建立为了提高样式表的可维护性，本任务中对样式的设置采用了多个样式文件，每个样式文件负责某个方面样式如：颜色类〔color.css〕布局类〔layout.css〕排版类〔typography.css〕再以“@importurl(样式文件);”将多个样式文件导入一个样式文件basic.css中。basic.css文件的内容如下：@importurl(color.css);@importurl(layout.css);@importurl(typography.css);任务2表格美化的设计任务实施

第二步、样式文件的建立颜色类〔color.css〕布局类〔layout.css〕排版类〔typography.css〕任务2表格美化的设计任务实施

第三步、事件处理文件的建立调用global.js中addClass函数，编写：条纹表格行样式设置的函数移入或移出行的样式设置函数任务2表格美化的设计任务实施

第三步、事件处理文件的建立与调用建立条纹表格行样式设置的函数建立移入或移出行的样式设置函数调用样式设置函数任务2表格美化的设计任务实施

在静态页面中加载CSS与JavaScript在<head>标签中导入外部样式表〔styles/basic.css〕<linkhref="styles/basic.css"rel="stylesheet"type="text/css"/>外部脚本文件〔script/global.js〕<scriptsrc="script/global.js"></script>在<table></table>标签之后参加“条纹表格行的样式设置函数stripeTables”和“移入或移出行的样式设置函数highlightRows”的调用：<script>stripeTables();highlightRows();</script>任务2表格美化的设计任务拓展

一、用户自定义对象〔1〕自定义对象的定义：〔2〕自定义对象及其成员的访问：访问data中header用data.header访问"姓名“用data.header[0]访问data中body用data.body访问"李斯“用data.body[1][0]访问"传媒与艺术系“用data.body[1][2]任务2表格美化的设计任务拓展

一、用户自定义对象〔3〕自定义对象应用实例任务3表单验证的设计【任务简介】本任务完成用户注册表单设计，运行界面如下图实例任务3表单验证的设计5.15DOM对象中属性节点的操作属性节点与子元素节点的比较属性节点<studentname=”张山”age=”23”></student>子元素节点<student><name>张山</name><age>23</age></student>DOM对象中的属性节点是元素节点的附属节点，不能独立存在，属性节点必须依赖于元素节点，为元素节点添加附加属性的描述。属性节点也可以替换成子元素节点及其子文本节点，但没有使用属性节点简捷。任务3表单验证的设计5.15DOM对象中属性节点的操作一、属性节点的创立与添加【实例】使用JavaScript建立从ul开始的DOM节点树。<ulid="nav"><li><ahref="javascript:fun('首页')"title="翻开网站首页"style="color:#0d0;"onmouseover="a_mouseover();"onmouseout="a_mouseout();"mydata="我是一个属性节点">首页</a></li></ul><pid="info"></p>任务3表单验证的设计5.14DOM节点对象的事件处理二、DOM对象事件的引发DOM对象的事件引发其实就是一个方法的调用，调用某个方法〔事件方法〕就会触发对应的事件，这种代码触发事件的编程方式方便了网页中互动程序的编写。任务3表单验证的设计5.14DOM节点对象的事件处理【实例】常用事件方法使用<body><formid="form1"onreset="document.getElementById('info').innerHTML+='onreset<br/>';"

onsubmit="alert('onsubmit');">Text1:<inputid="Text1"type="text"

onblur="document.getElementById('info').innerHTML+='onblur<br/>';"onchange="document.getElementById('info').innerHTML+='onchange<br/>';"onfocus="document.getElementById('info').innerHTML+='onfocus<br/>';"/><br/>Text2:<inputid="Text2"type="text"/><br/><inputtype="button"value="Text2select"onclick="document.getElementById('Text2').select();"/><inputtype="button"value="Text1blur"onclick="document.getElementById('Text1').blur();"/><inputtype="button"value="Text1focus"onclick="document.getElementById('Text1').focus();"/><inputtype="button"value="Text1focus"onclick="document.getElementById('Text1').focus();"/><br><inputtype="button"value="Callreset()"onclick="reset();"/><inputtype="button"value="Callsubmit()"onclick="submit();"/><inputtype="submit"value="submit"/><inputtype="reset"value="reset"/>

</form><divid="info"></div></body>任务3表单验证的设计5.16表单验证的意义与实现一、表单验证的意义表单及其元素是用户用来输入数据，提交并保存到效劳端。表单验证，就是提交数据时对数据进行验证是否符合要求规那么。一个用户注册表单的数据提交后使用Web效劳端的动态代码，将数据最终保存到数据库中，对用户输入数据的验证可以发生在客户端、Web效劳端和数据库效劳端；究其时效性来说，在客户端验证是最明智的选择，因为将一个不合规那么的数据经网络徒劳的传输到效劳端，既占据了网络资源，又耽误了珍贵时间，甚至造成程序运行时的异常反之，将表单数据在客户端经过全面仔细的检查，确保效劳端的操作一举成功，减少不必要的周折。使用了表单验证，使用户在表单数据不合规那么时，给予提示，也能表达页面的友好型。任务3表单验证的设计5.16表单验证的意义与实现二、表单验证的类型及其实现用户注册是许多应用软件必备的根底模块。本任务界面中需要用户提供必填验证、邮箱验证、数据文本长度的验证等等，下面向大家介绍表单客户端常见的验证。〔1〕长度验证要求表单元素中的数据文本长度在一段范围内。【实例】长度验证

<formname="a"onsubmit="returnlength_valid()"><textareaname="b"cols="40"rows="6"></textarea><br><inputtype="submit"name=“Submit"value="验证"/>

</form>任务3表单验证的设计5.16表单验证的意义与实现二、表单验证的类型及其实现〔1〕长度验证—改进版任务3表单验证的设计5.16表单验证的意义与实现二、表单验证的类型及其实现

【实例】对多个表单元素做长度验证要做到这点就要对表单元素设置验证方式，这里为这两个input表单元素添加属性比方length_valid设置属性值为“[3,8]”。<inputname=”t1”type="text"length_valid="[3,8]"/><inputname=”t2”type="text"length_valid="[3,8]"/>对表单中每个元素遍历，如果元素length_valid属性的值不为空，那么解析"[3,8]"成为数组，取它们的元素，调用length_valid函数。任务3表单验证的设计5.16表单验证的意义与实现二、表单验证的类型及其实现〔2〕必填验证表单元素中不能没有文本或只有空格文本。【实例】必填验证1〕定义必填验证的函数isFilled，对形参表单元素element实现必填验证。2〕为需验证的表单元素设置表示必填验证属性。3〕在表单验证函数validateForm的for语句中添加isFilled调用代码。任务3表单验证的设计5.16表单验证的意义与实现二、表单验证的类型及其实现

〔2〕必填验证表单元素中不能没有文本或只有空格文本。【实例】必填验证1〕定义必填验证的函数

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

JavaScript编程-电子课件

文档简介

温馨提示

最新文档

评论

JavaScript编程-电子课件

文档简介

温馨提示

最新文档

评论

相关文档