Web技术应用基础.ppt

1、1,第2篇 Web客户端程序设计基础,第6章 JavaScript,2,JavaScript,教学要求： 了解JavaScript作用、工作机制和特点； 了解Window对象构成、属性和方法 掌握Window对象基本使用方法 学会JavaScript的基本语法规则 熟练掌握JavaScript编程技巧,脚本（Script)应用知识点与技术要求：,Script是一种介于HTML与高级编程语言(如：Java、VB和C+等)之间的特殊语言，是由一组可以在Web服务器或客户端浏览器运行的命令的组合。脚本把网页对象和浏览器对象集成并组装起来，使网页具有动态效果和交互功能 。,3,6.1 JavaScri

2、pt概述,6.1.1什么是JavaScript？ (1) 脚本语言(Scripting Language)？ 由ASCII码构成，可直接用任何的文本编辑器开发完成。是一种不必事先编译，只要利用适当的解释器(Interpreter)就可以执行的简单的解释式程序。 (2) JavaScript？ JavaScript是由网景公司开发的一种跨平台，纯面向对象(object-oriented)式的网页式脚本语言(Web Script Language)。JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器的解释器来解释执行。,JavaScript,4,Java

3、Script和Java的区别,虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。 Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；Java的前身是Oak语言。 而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言, 它的前身是LiveScript。,5,6.1.2 JavaScript特点 脚本编写语言 基于对象的语言 事件驱动 安全性 动态性 跨平台,JavaScript,6,制作网页特效

4、提供表单前端验证 窗口动态操作 提高系统工作效率,3. JavaScript的功能,7,6.1.3 JavaScript应用示例,图像互换位置,JavaScript,8,1.任务要求 要求页面上有两幅图像及有关图像的说明的文字，当用户用鼠标左键单击页面时，图像交换位置。,JavaScript,9,ex6-01.html代码清单 JavaScript应用案例 function ChangeImage() var dog_top=dog.style.top var dog_left=dog.style.left dog.style.top=cat.style.top dog.style.left=

5、cat.style.left cat.style.top=dog_top cat.style.left=dog_left ,JavaScript,10, 请单击页面 cat dog ,JavaScript,例6.1,11,代码说明 (1) 第16至19行： 和是块容器标记，之间可以容纳多个不同的HTML标记和语言元素。 id=cat，指定该块容器的id值是cat。 (2) 第3至12行：当用户单击页面时，由使用JavaScript脚本语言编写的ChangeImage()函数完成事件的处理，即图像交换位置的动作。,JavaScript,12,标记位于和标记之间，在标记中的脚本段将在页面主体(即在

6、标记中的内容)被浏览器载入之前解释执行。 标记位于和标记之间时,这一段脚本程序将在HTML文档被浏览器载入过程中被解释执行 属性language是script标记的必须指定的基本属性。一般被指定为JavaScript或VBScript。 runat=Server表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。 脚本代码放在HTML的注释标记之间，这样做既不影响支持脚本的浏览器正确解释执行脚本程序；也可以使不支持脚本的浏览器把这段程序当作注释而旁路掉。,JavaScript,javaScript的运行,13,编写JavaScript的工具,使用纯文本编辑器来编辑脚本，比如

7、：Windows的记事本程序。 使用可视化工具或集成环境（IDE）编写脚本，比如：JavaScript Editor，DreamWeaver，EditPlus等。,14,脚本代码的位置,直接在html标记符内添加； 使用script标记符 包含脚本的外部文件。,15,在HTML标记中直接写入JavaScript代码,例： 鼠标移过来 ,J1.htm,16,在HTML文档中嵌入JavaScript代码, /可以在此加入JavaScript代码 /也可以在此加入JavaScript代码 ,17,范例, 编写JavaScript脚本 /在页面上显示一句话 document.write(欢迎您学习Ja

8、vaScript!); ,J2.htm,18,将代码独立存储为以 .js 为扩展名的文件，利用SRC属性将该文件调入 例如： welcome.js文件内容如下： document.write(欢迎您学习JavaScript!);,在HTML文档中调入JavaScript代码,19,为避免某些浏览器不完全支持JavaScript，而造成错误，可将JavaScript代码用注释语句括起来 例如： ,在HTML文档中嵌入JavaScript代码,20,JavaScript注释,1. 单行注释 插入单行注释的符号是：“/”。 2多行注释 多行注释以“/*”开始，以“*/”结束。 3HTML注释标记 是

9、HTML注释标记，对于标记中符合JavaScript语法规则的内容仍然会执行，否则会被注释掉，示例如下： /*简单的例子 说明三种注释的使用 */ ,J3.htm,21,6.2 JavaScript基本语法 JavaScript是一种跨平台、基于对象(Object) 、事件驱动(Event Driven) 脚本语言，可以在于浏览器上运行,也可以运行在服务器上。JavaScript由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展三部分组成。核心语言部分包括JavaScript的基本语法和JavaScript的内置对象，在客户端和服务器端均可运行。,

10、JavaScript,22,6.2.2 JavaScript书写格式 区分大小写 可以没有可见行结束标志，换行符作为行终止符。 也可以用(;)作为一行终止符。 C语言、C和Java语言中，使用分号(;)作一行的结束标志 如果需要把几行代码写在一行，使用分号(;) 分开。 var a=3 var b=6 var c=0 var a=3; b=6; c=0,JavaScript,23,为了使程序清晰易读，采用缩进格式来书写。 可以用两种方法进行注释。注释方法与C相同。 /：从注释标记“/”起直到行尾的字符都被忽略。 /* */：在“/*”与“*/”之间的字符都被忽略。,JavaScript,24,

11、(三) JavaScript语言基础 1. 变量 （1）变量的命名规则 a）变量名必须以字母或下划线开始，其余字符可以是字母、数字、下划线等。 b）变量名中除下划线作为连字符外，不能有空格、“+”、“-”、“,”或其他符号。 c）不能使用JavaScript中的保留字作变量名。 注意: JavaScript区分字母大小写。,25,（2）JavaScript保留字 在JavaScript中定义了40多个关键字(保留字)。这些保留字是JavaScript内部使用的，不能作为变量名、函数名、方法名和对象名。 常用保留字如下表所示。另外，内部的函数名和对象名也是保留字。,26,（3）变量的类型 在Ja

12、vaScript中，变量的类型由其值的类型来决定。 a）在JavaScript中，变量可以用命令var作声明，例如： var mytest; var mytest=”This is a book”; b）在JavaScript中，变量可以不作声明，而在使用时再根据数据的类型来确定其变量的类型。例如： x=100; y=”125”; xy=true; cost=19.5; 这里，X为整数，Y为字符串，XY为布尔型，COST为实型。,27,（4）变量的声明及其作用域 对于一个用var声明的变量，可以在声明时赋给它一个特殊的常量null。若声明了一个变量，但不给它任何值（包括null），那么这个变量

13、确实存在，但是却处于未定义状态，其类型为undefined，这时如直接引用，会产生一个错误。例如，下面的代码中abc没有数值而直接引用，是错误的： var abc; var def=5*abc; 变量的另一个重要属性就是变量的作用域。JavaScript中有全局变量和局部变量。全局变量定义在所有函数之外，其作用范围是所有函数；而局部变量定义在函数内，只在该函数内有效。,28,2常量 （1）整型常量 可以用十六进制（如0 x25）、八进制（如025) 、十进制等表示。 （2）实型常量 可用科学计数形式（如5E7）和标准计数形式表示。 （3）布尔型常量 有true和false两个值。 （4）字符串

14、常量 用单引号或双引号括起的一串字符。 （5）空值null null表示什么也没有，但它可以和任何数据类型进行安全的转换，例如： var x=null; var y=3*x; 结果y的值为0。,29,（6）特殊字符 同C语言一样，JavaScript也有转义字符(控制字符)。常用控制字符如下：,30,3运算符 （1）赋值符号 = ：将右边表达式的值赋给左边的变量。 += ：将左右操作数相加的结果赋给左边的变量。 -= ：将左边变量的值减去右边表达式的值赋给左边的变量。 *= ：将左右操作数相乘的结果赋给左边的变量。 /= ：将左边变量的值除以右边表达式的值赋给左边的变量。 %= ：将左边变量的

15、值除以右边表达式的结果的余数赋给左边的变量。,31,（2）单目运算符 - ：改变操作数的符号（取反）。 ：操作数各位对应取补码值。 + + ：用于操作数之前或之后（自加1）。 - - ：用于操作数之前或之后（自减1）。 （3）算术运算符： +（加）、 -（减）、 *（乘）、 /（除）、%（模） （4）位操作符： |（位或）、 （位异或）、 else if (n=2) mpt(这是第二个窗口,上海); else if (n=3) mpt(这是第三个窗口,南京); else mpt(这是第一个窗口); ,J4.htm,36,b) 多分支语

16、句switch 格式: Switch ( 表达式 ) case 值1： 语句组1； break； case 值2： 语句组2； break； default： 语句组n； 执行过程：先计算表达式的值，再寻找测试值与该值匹配的case支路执行。 说明：如果case部分没有break语句，则会执行下一个case语句。因此，如果要控制在每种情况下只执行一个支路的语句，就必须在每一个case部分的执行语句之后加上一个break语句。所有case均不匹配时执行default支路的语句块。,37, /You will receive a different greeting based /on what

17、day it is. Note that Sunday=0, /Monday=1, Tuesday=2, etc. var d=new Date(); theDay=d.getDay(); switch (theDay) case 5: document.write(Finally Friday); break;,38,case 6: document.write(Super Saturday); break; case 0: document.write(Sleepy Sunday); break; default: document.write(Im looking forward to

18、this weekend!); ,J5.htm,39,循环语句 a）for循环 格式: for ( 初始化；条件式；增量 ) 语句块； 例如: for (i=1；i10；i+) 语句块； 除此之外，JavaScript中还有一种 for循环，循环范围是一个对象所有的属 性或者是一个数组的所有元素。其格式 如下： for ( 变量in对象或数组 ) 语句块； ,40, vari=0 for(i=0;i) ,J6.htm,41,b）while循环（当型循环） 格式: while ( 条件式 ) 语句块； c）do while语句（直到型循环，语句 块至少执行一遍。直到条件不成立为止。） 格式: D

19、o 语句块； While(条件式) d）break和continue语句 使用break语句使得循环从for或while中跳出，而continue将跳过循环内剩余的语句而直接进入下一轮循环。,42,6.3 函数,JavaScript包含两类函数： 系统函数 用户自定义函数,43,系统函数,1) 编码函数 功能：将字符串中非文字、数字字符（如 y = 1 + 2; z = eval(1 + 2); document.write(1 + 2 = , x); document.write(1 + 2 = , y); document.write(eval(1 + 2) = , z);,J17.htm

20、,45,对象操作 function show(obj) var str=eval(document.form.+obj+.value); alert(str); 姓名：,J18.htm,46,系统函数,4) 数值判断函数 功能：判断变量的值是否为数值，“NaN”代表“Not a Number”，若返回值为true，则表示自变量不是数值。 语法：isNaN(测试值) 举例： var x = 15, y = 黄雅玲; document.write(x 不是数值吗？,isNaN(x); document.write(y 不是数值吗？,isNaN(y); ,J10.htm,47,系统函数,5) 转成整

21、数函数 功能：将各种进制的数值转成十进制整数值。 格式：parseInt(字符串，底数) 举例： / 二进位转成十进位 document.write(11012 = ,parseInt(1101, 2),10); / 十六进位转成十进位 document.write(BFFF16 = ,parseInt(BFFF, 16),10); ,J7.htm,48,系统函数,6) 转成浮点函数 功能：将字符串转成浮点数值。 格式： parseFloat(字符串) 举例： document.write(parseInt(3.123456), ); document.write(parseFloat(3.1

22、23456), ); ,J8.htm,49,用户自定义函数,（1）格式： function 函数名（ 形式参数表 ） 函数体； return 表达式 ； 说明：函数由关键字function定义，函数值由return语句返回。 function：关键字，使解释程序知道后面定义函数 函数名：可以是任何合法的标识符 参数列表：函数的参数列表，多个参数用逗号分开 函数体： 函数执行的运算,50,（2）函数的返回值 函数中用return语句将函数值返回。如果省略return后面的表达式，或函数中没有return语句，则函数返回一个undefine类型的值。 （3）函数中变量的声明（局部变量） 函数内部变

23、量通过var语句定义，一旦函数执行完成，这些变量就被释放。 （4）函数的位置及其调用 在JavaScript中要调用一个函数，首先必须定义声明它，定义声明的函数应放在调用函数之前。所以许多函数的定义都放在头部中，从而保证调用时不会出现错误。 函数的调用非常简单，直接给出函数名，并加上参数就行了。例如： number=square(10);,51,（5）函数的递归 递归调用是程序设计里的一个术语，指的是函数直接或间接调用自己。 下面一段程序使用递归调用实现阶乘 5！= 12345的计算，运行结果如图所示： function factoria(n) if(n=0)|(n=1) return 1;

24、else return n*factoria(n-1); /递归调用 document.write(5的阶乘是：,factoria(5); ,J9.htm,52,6.4 JavaScript对象 6.4.1 JavaScript对象概述 对象具有: 属性(properties) 方法(methods) 3种对象: JavaScript内建对象 浏览器环境提供的对象 自定义对象,JavaScript,53,6.4.2 自定义对象 语法： function 对象名称(属性列表) this.属性1=参数1 this.属性2=参数2 this.方法1=函数名1 this.方法2=函数名2 创建对象实例

25、 语法： 对象实例名=new 对象名称(属性值列表),JavaScript,54,function student(id,name,url) this.id=id =name this.url=url this.display=student_display ,JavaScript,MyStudent=new student(000001,林琳, ),定义学生对象,学生对象实例,55,6.4.3 对象属性和方法的引用,JavaScript,对象属性的引用 （1）使用（.）运算符 语法： 对象实例名.属性成员名 例, MyS=林琳。,56,（2）通过对象实

26、例的下标引用 语法： 对象实例名n 例, MyStudent0= 000001 MyStudent1= 林琳 MyStudent2= 或： MyStudentid= 000001 MyStudentname= 林琳 MyStudenturl= ,JavaScript,57,2.对象方法的引用 语法： 对象实例名.方法名称() 例如： MyStudent.display(),JavaScript,58,例6.4 JavaScrip对象应用 function student(id,name,url) this.id=id =name this.url=url this.displ

27、ay=student_display ,JavaScript,59,function student_display() document.writeln(id=+thisid+) document.writeln(name=+thisname+) document.writeln(url=+thisurl+) MyStudent=new student(000001,林琳,“ ) MyStudent.display() ,JavaScript,例6.4,60,6.4.4 对象的操作 1. forin语句 forin是操作对象的语句，也称遍历。 遍历是指逐一通过一个对象的所有属性，它的计数值是

28、对象中的属性个数。语法： for(变量 in 对象) 语句段 ,JavaScript,61,例6.3 JavaScript基本语法应用案例 function MyArray(n) this.length=n for(i in 4) thisi=0 MyArray=new Array(4),JavaScript,62,MyArray1=Web MyArray2=技术 MyArray3=应用 MyArray4=基础！ document.open() for(var n=1;n ,例6.3,63,2. with 语句 语法 ： with(对象实例名) 语句段 说明: with 语句通常用来缩短特定情

29、形下必须写的代码量。 例： with(MyStudent) id=000001 name=林琳 url= ,JavaScript,64,6.this关键词 用户引用当前所指的对象，格式 : this 属性名,JavaScript,65,6.4.5 事件驱动与事件处理 事件 (Event)：鼠标或键盘的动作称为事件 。 事件驱动(Event Driver)：由事件引发的一连串程序的动作，称为事件驱动。 事件处理程序(Event Handler)：对事件进行处理的程序或函数。 事件处理程序语法,JavaScript,66,1 常见事件,67,2 事件处理程序语法 将事件处理程序直接嵌入HTML标记

30、符中 例如： 直接写在对象后面 document.onLoad = alert(这是事件处理程序); ,68,3应用举例 例1： 网络技术学习网 ,J12.htm,69,例2 请输入基本资料： 姓名： ,J13.htm,70,6.5 window对象在JavaScript中的应用 6.5.1 window对象构成 对象有用户建立的对象，也有系统提供的内建对象。 Window对象是内建对象中的最顶层对象。Window对象指的是浏览器窗口对象 。,JavaScript,71,JavaScript,72,6.5.2 window对象的属性 1.window对象主要属性,JavaScript,73,J

31、avaScript,6.5.3 window对象的方法 window对象的主要方法 alert():创建带“确定”按钮的对话框 confirm():创建带“确定”和“取消“按钮对话框 close():关闭当前打开的浏览器窗口 open():打开一个新浏览器窗口 prompt():创建带“确定”、“取消“按钮及输入字符串字段对话框 setTimeout():设置一个时间控制器 clearTimeout():清除原来时间控制器内时间设置,74,2.JavaScript的接口元素 alert(提示)：显示警告框，“提示”是可选项， 警告框中输出的内容。 例：alert(对不起，用户名错误。),Jav

32、aScript,75, prompt(提示,缺省值)：显示提示框，等待用户输入文本，用户选择“确认”按钮，返回文本框中内容，选择“取消”按钮，返回一个空字符串。 “提示”和“缺省值”都是可选项，“缺省值”是文本框默认值 例：prompt(请输入姓名：),JavaScript,76,comfirm(提示)：显示确认框，等待用户选择按钮。“提示”可选的，是在提示框中显示的内容，用户可以根据提示选择“确定”或“取消”按钮 例：confirm(MyString +“你好！ 链接到 ex07-002.html页面？),JavaScript,77,6.5.4 window对象的事件 onLoad：网页载入

33、浏览器时发生 onUnLoad：网页从浏览器窗口中删除时发生 onBeforeUnLoad：网页被关闭前发生 OnResize：用户调整窗口大小时发生 OnScroll：用户滚动窗口时发生 OnError：载入的网页产生错误时发生,JavaScript,78,6.5.5 window对象应用案例 1.状态栏内容更新 window对象属性的应用 ,JavaScript,79, ,JavaScript,例6.5,80,2.打开一个新窗口 window对象的open()方法 window对象的open()方法 ,JavaScript,例6.6,81,3.客户端输入信息验证 在客户端验证用户输入数据。

34、页面上有一个超级链接，当用户点击链接时，由prompt提示框提示用户输入姓名，然后JavaScript程序验证用户输入，如果输入正确弹出确认框confirm，若用户在确认框选择“确认”按钮，则链接到网站；如果输入错误，出现警告框alert，输出对不起，输入错误。，程序终止,JavaScript,82,JavaScript接口元素应用 ,JavaScript,83,脚本应用, 你好！欢迎光临tomcat！ ,例6.7,84,JavaScript,6.6 document对象在JavaSCript中应用 6.6.1 document对象属性 alinkColor：活动超级链接的颜色 bgColor

35、：页面背景颜色 fgColor：页面前景颜色 linkColor：页面中未曾访问过的超级链接的颜色 vlinkColor：页面中曾经访问过的超级链接的颜色 lastModified：最后一次修改页面的时间 Location：页面的URL地址 Title：页面的标题,85,6.6.2 document对象方法 clear():清除文件窗口内的数据 close():关闭文档 open():打开文档 write():向当前文档写入数据 writeln():向当前文档写入数据，并换行,JavaScript,86,document对象鼠标事件 : onClick: 单击鼠标左键时发生 ondblClic

36、k: 双击鼠标左键时发生 onMouseDown: 按下鼠标左键时发生 onMouseMove: 移动鼠标时发生 onMouseOut:鼠标离开对象时发生 onMouseOver:鼠标移到对象上时发生 onMouseUp:放开鼠标左键时发生 onSelectStart:开始选取对象内容时发生 onDragStart:以拖曳方式选取对象时发生,JavaScript,87,document对象按键事件: onKeyDown: 按下按键时发生 onKeyPress: 按下按键时发生 onKeyDown事件，然后产生onKeyPress事件 onKeyUp:放开按键时发生 onHelp:按下系统定义的

37、帮助键时发生,JavaScript,88,6.5.4 window对象应用案例 例6.8 文本框内容互换 任务要求：页面上有2个文本框，用户在第1个文本框输入内容后，点击第2个文本框，将在第2个文本框内显示第1个文本框的内容。,JavaScript,例6.8,89, document对象应用 将文字输入文本框 1 单击文本框2显示文本框1内容 ,90,6.7 JavaScript内置对象 JavaScript不是纯面向对象语言，不具备面向对象语言特性，如封装、继承和重载.JavaScript没有类功能，不能通过类来创建对象。JavaScript创建对象有属性和方法，对象被创建后，可以象使用函数

38、一样来使用。用户除了自己创建对象外，JavaScript还提供了许多内置对象供用户使用。,JavaScript,91,6.7.1 String对象,格式：字符串变量名 = “字符串常数” 例如：var str1=”JavaScript” /定义字符串变量 属性： length：字符串长度 方法：,92,字符串(String)对象的常用方法,返回,93,6.7.2 Math对象,JavaScript,属性： E：欧拉常量,自然对数的底(约等于2.718) LN2：2的自然对数(约等于0.693) LN10 ：10的自然对数(约等于2.302) LOG2E ：以2为底的e的对数(约等于1.442)

39、 LOG10E：以10为底的e的对数(约等于0.434) PI：的值(约等于3.14159) SQRT1_2：0.5的平方根(约等于0.707) SQRT2：2的平方根(约等于1.414),94,6.7.2 Math对象 方法： abs() 返回某数的绝对值 acos() 返回某数的反余弦值(以弧度为单位) asin() 返回某数的反正弦值(以弧度为单位) atan() 返回某数的反正切值(以弧度为单位) ceil() 返回大于或等于指定数的最小整数 floor() 与ceil相反 max() 返回两数间的较大值 min() 返回两数问的较小值 pow() 返回m的n次方(其中,m为底,n为指

40、数) random() 返回0和1之间的一个伪随机数 round() 返回某数四舍五入之后的整数,95,6.7.3 Array对象,格式：对象实例名 = new Array(元素个数) 或 对象实例名 = new Array(值1,值2,) 例如：fruit=new Array(2) 声明了有2个元素的数组 fruit=new Array(“苹果”,”橘子”) 声明了有2个数组元素的数组，并赋值。 属性：index：数组元素的索引值。 length：数组长度(数组元素个数)。 方法：join()：将数组内的所有值组合成一个字符串，并用特定符号分开。 sort()：对数组中的元素进行排序。 re

41、verse()：将数组内元素的索引次序翻转过来,96,JavaScript,4.7.4.Date对象 格式： 对象实例名 = new Date ( 日期参数 ) 举例： today = new Date () /以当日时间为对象初值。 today = new Date (“October 1,2009 12:00:00”) / 以英文表示月份，其余以数值表示，即【月日,年时:分:秒】。 today = new Date (“2009，08，07，0，0，0) 一律以数字表示，即【年,月,日,时,分,秒】。,97,4.7.4.Date对象 方法: getYear()返回年份值 getMonth(

42、) 返回月份值 getDate() 并返回日期 getDay() 返回星期几 getHours() 返回小时数 getMinutes() 返回分钟数 getSeconds() 返回秒数 getTime() 返回完整的时间,98,4.7.4.Date对象 方法: setDate() 改变Date对象的日期 setHours() 改变小时数 setMinutes() 改变分钟数 setMonth() 改变月份 setSeconds() 改变秒数 setTime() 改变完整的时间 setYear() 改变年份,99,范例,创建一个按钮，当单击该按钮时在对话框中显示系统时间。 function sh

43、owdate() alert(Date() JavaScript示例 ,J11.htm,100,6.7.5 JavaScript内置对象应用案例,JavaScript, JavaScript内置对象应用案例 ,101, var Books=new Array() Books0=new Book(算法与数据结构,严蔚敏 陈文博,清华大学出版社) Books1=new Book(XML/JSP网页编程教材,吴艾,北京希望电子出版社) Books2=new Book(英华大字典,郑易里,商务印书馆) 点击按钮查阅详细信息 ,JavaScript,102, 书 名: 作 者: 出版社: ,例 6.9,

44、103,6.8 JavaScript应用案例 6.8.1 链接导航 为网页增加自动弹出公告窗口和使用下拉列表框完成链接导航的功能。 function new_window() /打开下拉列表中指定的http地址 window.open(document.form1.friend.options document.form1.friend.selectedIndex.value); ,JavaScript,104,JavaScript, 请在以下列表中选择需要导航到的站点. -友情链接- /空链接 网易 新浪新闻 搜狐 好123 ,J14,105,6.8.2 折叠菜单,如果已显示了子菜单，则折叠

45、，否则展开子菜单。 动态折叠菜单 BODYfont-size:12pt Afont-size:10pt .redcolor:red .menucolor:blue;cursor:hand .indentmargin-left:0.3in ,106, function menuChange() var src; var subId; src=window.event.srcElement; if (src.className=menu) /判断是否单击了某菜单项 subId=sub+src.id; if (document.all(subId).style.display=none) /如没有显

46、示子菜单，则显示 document.all(subId).style.display=; else /如果已经显示子菜单，则折叠 document.all(subId).style.display=none; 单击一个菜单项可以打开或折叠菜单. +菜单项1,107, 子菜单项1 子菜单项2 +菜单项2 子菜单项1子菜单项2子菜单项3 ,J15,108,6.8.3 级联菜单,109, ul margin: 0; padding: 0; list-style: none; width: 130px; border-bottom: 1px solid #ccc; font-size:12px; ul

47、 li position: relative; li ul position: absolute; left: 129px; top: 0; display: none; ul li a display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; ,110,/* 下面两行解决UL在IE中显示不正确问题 */ * html ul li float: left; height: 1%; * html ul l

48、i a height: 1%; Li.hover ul, li.over ul display: block; ,111, CSS布局 /* #是默认锚点，代表位置*/ 一栏式布局 二栏式布局 三栏式布局 组合式布局 CSS页面元素 导航 背景 列表 Form表单 字体样式 图片样式 链接样式控制 排版 文本 图文 全图 混合排版 ,J16,112,6.8.4 鼠标跟随,JavaScript,例6.13 鼠标跟随 !- var x,y var CanBool=0 function canMove() x=document.body.scrollLeft+event.clientX y=document.body.scrollTop+event.clientY /*clientX, clientY是鼠标当前相对于网页的位置 */ CanBool=1 ,113,function move() if(CanBool) ball.style.posLeft=x+20 ball.style.posTop=y setTimeout(move(),100) - ,JavaScript,114, 鼠标移动图像跟随效