1、,Tianjin Foreign Studies University,天津外国语学院 教育技术系,网页设计技术,天津外国语学院,2018年10月,总 目 录,第1章 网页无处不在 第2章 网页的风格设计 第3章 网页的基本语言HTML 第4章 让网页动起来 第5章 用Dreamweaver制作网页 第6章 用Dreamweaver制作动态网页,第4章 让网页动起来,4.1 动态的网页 4.2 层叠样式表 4.3 JavaScript 4.4 动态网页技术实例,4.1 动态的网页,动态网页指的是使用DHTML（动态HTML）技术的网页。比如，当鼠标移到某段文字上时能弹出一个快捷菜单，又比如一个
2、图片能慢慢显现出来等。 DHTML通常需要和脚本语言（JavaScript）、层叠样式表（CSS）、及层技术组合在一起使用。,第4章 让网页动起来,4.1 动态的网页 4.2 层叠样式表 4.3 JavaScript 4.4 动态网页技术实例,4.2 层叠样式表（CSS）,CSS是Cascading Style Sheet的缩写，人们通常把它翻译为“级联样式表”。 那么为什么会提出CSS呢? CSS又能做什么呢? 比如要把页面中的每段文字都用红色显示，可以将HTML源码写成如下形式：段落一段落二,1. CSS的提出,如果想让文字都用黑色显示，则必须对每段文字都进行修改。这对于一个庞大的HTML
3、页来说，是相当繁重的。于是人们想到可不可以只改一个地方，就让文字全显示成黑色呢?这就是CSS概念的形成。,CSS的提出,引入CSS之后，上面的语句可以写成如下形式：段落一 段落二,CSS最大的优点就在于把内容和格式分离开来，使得不仅能够统一内容的显示格式，而且通过改变显示格式(比如大小、颜色、字体等)，可以达到动态的效果。,CSS的提出,CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。它们拥有不同的优先级，优先级越高，在显示时就被优先采用。,它利用现有的HTML标记，把特殊的样式直接加入到那些控制信息的标记中。,2. 内联式样式表,比如：内联式样式表 这种样式表只会对当前的这个p标
4、记起作用，而不会影响HTML文档中的其他p标记。,例1内联样式表举例。这段文字将显示为红色 这段文字的背景色为黄色 这段文字将以黑体显示 ,内联式样式表,内联式样式表,这种样式单通常写在HTML文档的头部中(和之间)，使用和标记装载。,3. 嵌入式样式表,书写格式： ,这种样式表会对HTML文档中所有标记都起作用。,例2嵌入式样式表举例。 嵌入式样式表举例网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,嵌入式样式表,嵌入式样式表,问题：并不想让所有p元素的文本都用同一种样式。,3. 嵌入式样式表,解决：通过
5、将p元素定义为多种样式，然后对不同段落通过class属性应用不同的样式。,嵌入式样式表举例网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,嵌入式样式表,嵌入式样式表,还有一种更灵活的方式，就是不为任何HTML元素定义样式表，而是直接定义一个样式，然后以添加class属性的方式将其应用到某个元素上。,3. 嵌入式样式表,嵌入式样式表举例网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,嵌入式样式表,是指保存在外部的样式表文件
6、，这个文件以.css为文件的扩展名，在HTML文档中通常用标记1ink来链接这个外部文件。,4. 外部式样式表,格式：,样式表文件的url,mystyle.css 内容如下：.firstcolor:#000000;font-family:宋体;font-size:9pt.secondcolor:#00ff00;font-family:宋体;font-size:10pth1color:#ff0000;font-family:黑体,外部式样式表,Html文件如下：,注意：link元素位于和之间。,一般来说，内联式样式表的优先级大于嵌入式样式表的优先级，嵌入式样式表的优先级又大于外部式样式表的优先级
7、。即内联式嵌入式外部式。优先级越高，在显示时就被优先采用。 注意：如果链接外部样式表的元素位于嵌入式样式表的后面，则外部式嵌入式,同时使用多层样式表,例3 举例。 嵌入式样式表举例网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,同时使用多层样式表,外部式,内联式,同时使用多层样式表,例3 举例。 嵌入式样式表举例网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,同时使用多层样式表,同时使用多层样式表,同时使用多层样式表,p
8、 color: #FF0000; font-family: 宋体;font-size: 9pt;font-style: italic;font-weight: bold;text-decoration: underline;background:yellow,用CSS滤镜制作文字特效,CSS滤镜只能作用于有区域限制的对象，比如表格(table)、单元格(td)、图片等。 1)光晕字 Glow(color=?,strength=?) Strength表示发光强度，范围是：0255。,2)阴影字 dropshadow(color=#000000,offx=-2,offy=2,positive=1)
9、 Offx和offy分别代表X方向和Y方向阴影偏离文字位置的量，单位为像素，为整数值。 Positive=1表示为所有不透明元素建立阴影。,用CSS滤镜制作文字特效,3)遮罩字（镂空字） mask(color=?) Color表示遮罩的颜色。,4)动感字 blur(add=?,direction=?,strength=?) Add=1表示滤镜用于图片；Add=0表示滤镜用于文字。 Direction表示模糊方向，单位为度，按顺时针方向进行，0表示垂直向上，每45度一个单位，故可以取值：0、45、90、135、180、225、270、315。 Strength表示模糊移动值，单位为像素。,用CS
10、S滤镜制作文字特效,第4章 让网页动起来,4.1 动态的网页 4.2 层叠样式表 4.3 JavaScript 4.4 动态网页技术实例,4.3 JavaScript,1. 在HTML中加入JavaScript,JavaScript是一种描述语言，它可以被嵌入HTML文件中，可以做HTML语言做到和做不到的事。当然，我们是让它做HTML语言做不到的事啦。 例如，JavaScript可以回应读者的输入信息而不用任何的网络来回传送。也就是说，当输入一项信息时，它不用传给服务器处理，而直接可以用浏览器处理。 JavaScript和Java很类似，语言区分大小写。,在HTML中加入JavaScript
11、,例1一个JavaScript的例子。句以分号结尾,JavaScript中的注释符： /一行注释 /*多行注释*/,在HTML中加入JavaScript,语法格式：,在HTML中加入JavaScript,是为了避免老版本的浏览器不支持脚本语言。 JavaScript语句可以放在HTML文件中的任何地方。,JavaScript的数据类型有四种。,2. JavaScript的数据类型,(1) 数值类型：包括整数，如12，22；浮点数，如7.234，-3.4，2E3。 (2) 字符串类型：例如，“你好！”、“Hello!”、234、” ”。必须使用双（单）引号括起来。 (3) 布尔类型：只有两个，即
12、true或false。 (4) 空值类型：只有null一个值，它表示什么也没有。空null和0值或空字符串 是不一样的，0值或空字符串 是一个实际值。,注意：JavaScript使用的是弱类型定义，即在定义一个常量或变量时，不需要指明它的数据类型，常量或变量会自动根据所赋的值来选择最合适的数据类型。这一点大大简化了JavaScript的编程。,JavaScript的数据类型,3. JavaScript的变量,变量提供了可以存放信息和数据的地方。变量是可以改变的，它可以存放不同的数据。,变量使用var来声明，语法格式：var 变量名=数据的值,功能：定义一个名字为“变量名”的变量，并且把“数据的
13、值”赋给该变量。,例如：var myvar1;var myvar2=50;var myvar3=“good morning”;,变量的命名：以字母开头，中间可以是任何字母、数字和下划线的组合；其次，变量名不能使用JavaScript的关键字，比如var、JavaScript、alert等。 注意：变量名对大小写敏感（区分大小写）。 JavaScript语言区分大小写。,3. JavaScript的变量,JavaScript有六种运算符： (1)赋值运算符： “=”表示右边的数给左边的变量赋值。例如X=5，5被赋给X； “+=”表示左、右两边数相加，将其结果赋给左边的变量。例如X=5，Y=5，X
14、+=Y将10赋给了X； “=”表示左、右两边数相减，将其结果赋给左边的变量。例如X=5，Y=5，X-=Y将0赋给了X； “*=”表示左、右两边数相乘，将其结果赋给左边的变量。例如X=5，Y=5，X*=Y将25赋给了X； “/=”表示左边的数除右边的数，将其结果赋给左边的变量。例如X=5，Y=5，X/=Y将1赋给了X； “%=”表示左边的数除右边的数，余数赋给左边的变量。例如X=25，Y=7，X=Y将4赋给了X。,4. JavaScript的运算符,(2)算术运算符： 加“+” 减“-” 乘“*” 除“/” 取余“%” 取负“-”：Y=5，则X=-Y，X的值为-5。 递增“+”：例如Y=+5，Y
15、的值为6。 递减“-”： 例如Y=-6，Y的值为5。,4. JavaScript的运算符,(3)字符串运算符： “+”：合并运算符。表示两个字符串的合并，例如：abc+ “你好！”，这个表达式的值为“abc你好！”。 “+=”：将一个字符串加到另一个字符串尾部。如，s1=abc,s2=def,则s1+=s2后，s1的值为abcdef。理解为s1=s1+s2。,4. JavaScript的运算符,(4)比较运算符： “=”：如果两边数据相等返回true，否则返回false。例如，2=2返回true。 “!=”：如果两边数据不相等返回true，否则返回false。 例如， THE!=TH返回tru
16、e。 “”：如果左边数大于右边数返回true，否则返回false 。例如， 21返回true。 “”：如果左边数大于或等于右边数返回true，否则返回false 。 “”：如果左边数小于或等于右边数返回true，否则返回false 。,4. JavaScript的运算符,(5)逻辑运算符： “&”：逻辑与，当表达式两边的逻辑值都是true时结果为true，否则结果为false。 “|”：逻辑或，当表达式两边的逻辑值中任意一个是true时结果为true，当表达式两边的逻辑值都为false时结果为false。例如：21 | 31 |34，其结果也为true。 “！”：逻辑非，当表达式的逻辑值为tr
17、ue时返回结果false，当表达式的逻辑值为false时返回结果true。例如：！21结果为false。,4. JavaScript的运算符,逻辑运算符,(6)条件运算符： 条件运算符只有一个，即“？”。 条件表达式的结构为：(条件)?结果1:结果2。条件表达式的计算过程为：首先计算作为条件的逻辑表达式或关系表达式，根据得到的返回值为true时表达式的值为结果1，返回值是false时表达式的值为结果2。 例如，表达式为：(day=“星期六”)?“今天是周末”:“今天不是周末” 。当变量day为“星期六”时表达式的结果为“今天是周末”，否则结果为“今天不是周末”。,4. JavaScript的运
18、算符,优先级从高到低顺序为： 括号( ) 逻辑非(!) 乘/除/取余(*、/、%) 加/减(、) 关系（、） 相等（、！） 逻辑与（&） 逻辑或（|） 条件(?),运算符优先级,算术运算符关系运算符逻辑运算符,5. JavaScript的控制语句,If条件语句 Switch条件语句 For循环条件语句 While循环语句 Break跳出循环语句 Continue循环中断语句,（1）If条件语句,语法格式：if（条件）条件满足时执行的语句else条件不满足时执行的语句,功能： 条件成立时执行条件下面的命令，条件不成立时执行else下面的命令。,例2一个if语句的例子。,（1）If条件语句,（1）
19、If条件语句,（2）switch条件语句,语法格式：switch (e) case r1: （注意：冒号） . break; case r2: . break; . default: . ,功能：计算表达式e 的值，然后跟下边“case”后的 r1、r2比较，当找到一个相等于 e 的值时，就执行该“case”后的语句，直到遇到 break 语句或 switch 段落结束（“”）。如果没有一个值与 e 匹配，那么就执行“default:”后边的语句，如果没有 default 块，switch 语句结束。,例3一个switch语句的例子。 switch (parseInt(score / 10)
20、case 0: case 1: case 2: case 3: case 4: case 5: result = fail; break; case 6: case 7: result = pass; break;,（2）switch条件语句,case 8: result = good; break; case 9: result = excellent; break; default: if (score = 100) result = excellent; else result = error; ,（3）for循环条件语句,语法格式：for(初值；条件；步长表达式)循环体,功能：初值用来
21、设置计数变量并给它赋值。每当进行循环以前都要判断条件，条件为true（真）时，执行循环语句中的命令，条件为false（假）时跳出循环语句，每循环一次后执行步长表达式以改变变量的值。,例4一个for语句的例子。javascript举例,（3）for循环条件语句,（3）for循环条件语句,（4）while循环语句,语法格式：while(条件)循环体,功能：while循环中的条件是逻辑表达式。只要条件为true，就执行循环体。,例5一个while语句的例子。”, sum,“); ,（4）while循环语句,“,”号连结和“+”号连结相同，都是字符串连接的意思。,（4）while循环语句,break语
22、句：完全终止循环，即使循环没有结束也如此。 continue语句：结束本次循环，跳到循环体的第一句进行下一次循环。 注意：一定要注意循环的结束方式，否则会陷入死循环中出不来。,（5）break和continue语句,6. JavaScript的函数,函数用来将一组语句集合在一起共同完成一项任务。,语法结构：function 函数名（参数1，参数2） 函数体 ,功能：定义一个称为“函数名”的函数。,6. JavaScript的函数,参数是提供给函数或方法的用于其计算和处理的形式数据。参数通过放在位于函数名后面的圆括号内。 函数还能有返回值，返回值通常由函数体内的return语句返回。 通过函数名
23、可多次调用函数，但注意必须在调用函数之前定义这个函数。 函数通常放在HTML文件中的head头部事先定义，然后被HTML文件body部分中的语句调用。,例6一个函数的例子。,6. JavaScript的函数,6. JavaScript的函数,7. JavaScript的对象,对象是从具体事物中抽象出来的，具有属性和方法两个最基本特征。 属性用来存储对象所需的信息。 方法是若干语句的集合体，运行的目的是为了完成一个专门的任务。 对象在引用前必须先声明对象的存在，除了浏览器对象（Document、Window等） 对象的方法的引用：ObjectName.methods(),（1）数组对象Array
24、,数组用来存储一组相关的数据，比如一组人名。 创建数组时不需要说明数组的数据类型，直接使用New创建即可。,创建方法：数组名=new Array(数组长度)数组名=new Array(数据1,数据2,),通过下标来访问数组元素，如array11。注意，JavaScript中的数组是从0开始计数的。,例4,（1）数组对象Array,注意大小写,（1）数组对象Array,（1）数组对象Array,属性：length：数组中的元素个数。,方法： join()：将数组中的所有元素串接在一起，元素之间用“，”相隔。 reverse()：颠倒数组中元素的顺序。 sort()：将数组中的元素排序。,例5,（
25、1）数组对象Array,/一次输出所有的外国朋友document.write(“我所有的外国朋友：“);document.write(myfriends.join(); /调用join()方法 /反向输出我的外国朋友document.write(“反向显示我的外国朋友：“);myfriends.reverse();for(i=0;i排序显示我的外国朋友：“);myfriends.sort(); /调用sort()方法for(i=0;i ,（1）数组对象Array,（1）数组对象Array,（2）字符串对象,字符串对象用来存储和操作一个字符串。,创建方法：mystring=“hello”;/直接
26、赋值mystring=new String(“hello”);,属性：length：字符串的长度，即字符的个数。,方法： big()：将字符串用大字体显示。 small()：将字符串用小字体显示。 italics()：将字符串斜体显示。 bold()：将字符串粗体显示。 toLowerCase()：将字符转换为小写。 toUpperCase()：将字符转换为大写。 charAt(index)：用来获得index位置上的字符。 indexOf(substring,fromIndex):返回从fromIndex开始搜索子字符串substring的位置，搜索不到返回-1。 substring(sta
27、rt,end):得到从start开始到end结束的子字符串。,（2）字符串对象,例6这个字符串长度为：“,mystring.length);/用大字体输出这个字符串document.write(“大字体显示：“,mystring.big();/用粗体输出这个字符串document.write(“粗体显示：“,mystring.bold();,（2）字符串对象,/将字符串全部转为大写document.write(“大写显示：“,mystring.toUpperCase();/获取第6个字符document.write(“第6个字符是：“,mystring.charAt(5);/查找home出现的
28、位置document.write(“Home出现的位置是：”, mystring.indexOf(“Home“,0);/获取子字符串document.write(“获取从第4个字符开始到第8个字符结束的子字符串“,mystring.substring(3,7); ,（2）字符串对象,（2）字符串对象,（3）数学对象Math,数学对象Math是一个内置对象,包含了许多数学常量和函数。 数学对象不需要用new来创建，可以直接使用。,属性： E：自然对数的底(约等于2.718)0 LN2：以为底的自然对数(约等于0.693) LN10：以10为底的自然对数 PI：圆周率(约等于3.14159) SQ
29、RT1_2：0.5的平方根(即l除以2的平方根,约等于0.707) SQRT2：2的平方根(约等于1.414) 02D1Y,（3）数学对象Math,方法： abs()：返回某数的绝对值(即该数与0的距离,例如：2与一2的绝对值都是2)。 sin()、cos()：返回某数(以弧度为单位)的正弦值和余弦值。 round()：返回某数四舍五入之后的整数。 log()：返回某数的自然对数(以e为底)。 exp()：返回e的多少次方。HHgjVPe02D,（3）数学对象Math,方法： max()：返回两数间的较大值。 min()：返回两数间的较小值。 pow(m,n)：返回m的n次方，比如2的3次方就
30、是pow(2,3)。 floor()：用来求一个小于等于这个数的最大整数。比如，floor(一22.22)返回一23;floor(22.22)返回22。 ceil()：用来求一个大于等于这个数的最小整数。比如ceil(32.56)=33。 random()：返回0和1之间的一个随机数。,（3）数学对象Math,例7E：“,Math.E);document.write(“以2为底的自然对数LN2：“,Math.LN2);document.write(“以10为底的自然对数LN10：“,Math.LN10);document.write(“2的平方根SQRT2：“,Math.SQRT2);docu
31、ment.write(“1/2的平方根SQRT1_2：“,Math.SQRT1_2);,（3）数学对象Math,/Math的各个方法document.write(“-3的绝对值等于：“,Math.abs(-3);document.write(“sin(90)等于：“,Math.sin(90);document.write(“log(5)等于：“,Math.log(5);document.write(“2的3次方等于：“,Math.pow(2,3);document.write(“8和10的较大值为：“,Math.max(8,10);document.write(“产生3个随机数：“);for(
32、i=0;i,（3）数学对象Math,（3）数学对象Math,（4）日期对象Date,Date对象用来获取和设置日期和时间。 Date对象需要用new来创建：current=new Date(); Date对象没有属性，只有方法。,方法：分为两类，一类用来获取日期和时间；一类用来设置日期和时间。 getYear()、getMonth()、getDate() ：返回年、月、日。其中， getMonth()的返回值为0-11，所以要得到当前月应为getMonth()+1。 getDay():用来获得星期几。返回值类型为整数06：0表示周日，1表示周一等等。 getHours()、getMinutes
33、()、getSeconds():返回小时、分钟和秒。,（4）日期对象Date,方法： toGMTString()：把日期转变成一个GMT时间字符串。 GMT时间=北京时间-8（小时） toLocaleString()：把日期转变成当地时间的字符串,使用所在计算机上配置使用的特定日期格式。 setYear()、setMonth()、setDate()：分别用来设置年、月、日。 setHours()、setMinutes()、setSeconds()：分别用来设置小时、分、秒。,（4）日期对象Date,例8当地时间：“,curr.toLocaleString();document.write(“现
34、在北京时间：“);document.write(curr.getYear(),“年“);document.write(curr.getMonth()+1,“月“);document.write(curr.getDate(),“日“);document.write(curr.getHours(),“时“);document.write(curr.getMinutes(),“分“);document.write(curr.getSeconds(),“秒“); ,（4）日期对象Date,（4）日期对象Date,（5）文档对象document,Document对象代表的是整个网页，通过它才能访问网页中
35、的其他对象。 Document对象可以直接使用。,属性： linkColor:对应的是尚未访问过的超链接的颜色,即标记中的LINK属性。0 vlinkColor：对应的是已经访问过的超链接的颜色,即标记的VLINK属性。 alinkColor：对应的是正访问中的超链接的颜色,即标记的ALINK属性。 bgColor：文档的背景颜色(标记里的bgcolor属性) 。 fgColor：文档的文本颜色(标记里的TEXT属性)。,（5）文档对象document,属性： title：文档的标题。 location:当前显示文档的URL。通过修改这个属性可以将浏览器跳转到另一个网页。 lastModifi
36、ed：文档最后的修改日期。 forms：是一个数组，保存的是网页中所有的表单。 links：是一个数组，保存了网页中所有的超链接。,（5）文档对象document,方法： write：向网页中输出文字。 writeln：向网页中输出一行文字。,（5）文档对象document,例9,（5）文档对象document,网页的URL：“,document.location);document.write(“网页最后修改时间：“,document.lastModified); 有情链接： 新浪 搜狐 TOM,（5）文档对象document, 该网页中一共有“,document.links.length,
37、“个超链接“); ,（5）文档对象document,（5）文档对象document,（6）窗口对象window,窗口对象window指的就是网页所在的浏览器，它无需创建，可以直接使用。 窗口对象是最顶层的对象，通过它可以访问文档对象，比如window.document,属性： closed：窗口是否已经关闭。0 status：状态条中的消息。 name：窗口打开时,赋予该窗口的名字。 self：指的是当前窗口。 parent：这个窗口的父窗口。,（6）窗口对象window,（6）窗口对象window,例10,不区分大小写,（6）窗口对象window,点击不同的按钮时，状态栏会显示不同的信息。,
38、方法：弹出不同类型对话框的方法。 alert(message)：打开一个消息框,message指的就是在对话框中显示的信息。 prompt(message,defautInput)：打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到服务器端。其中， message指的是显示在对话框上的提示信息， defautInput指的是缺省的输入。返回值为输入值。 confirm()：打开一个确认消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false。,（6）窗口对象window,例11,（6）窗口对象window,（6）窗口对象w
39、indow,（6）窗口对象window,（6）窗口对象window,（6）窗口对象window,方法： setTimeout(expression,msec)：等待一段指定的毫秒数时间,然后运行指令事件处理程序。其中， expression是调用的函数，msec就是时间，单位是毫秒。 clearTimeout()：用来终止setTimeout方法的工作。 使用方法：变量=setTimeout(调用函数,间隔) clearTimeout(变量),（6）窗口对象window,例12,（6）窗口对象window,转换为当地时间,/建立一个表单当前时间：,（6）窗口对象window,页面载入时执行di
40、splaytime()事件,（6）窗口对象window,（6）窗口对象window,方法：和窗口操作有关。 open(url,windowname,argument)：打开一个新窗口。其中url指新窗口显示网页的url； windowname指新窗口的名字(必须设置)；argument设置新窗口相关的特性，包括： toolbar：如果等于yes,表示显示工具条。 status：是否显示状态栏。 menubar：是否显示菜单栏。 scrollbars：是否显示滚动条。 resizable：是否能手工改变窗口的大小。 width、height：设置窗口的宽度和高度。,（6）窗口对象window,方
41、法：和窗口操作有关。 close()：关闭窗口。 focus()：用来激活一个窗口。 blur()：把焦点从指定窗口移开。,（6）窗口对象window,例13,（6）窗口对象window,点击这个按钮可以关闭刚才打开的窗口： ,不加入表单也可以,（6）窗口对象window,（7）历史对象history,历史对象history用来记录浏览器的网页浏览记录，即，它记录了在一个网页之前访问了哪些网页，在它之后又访问了哪些网页。,属性： current：当前的网页。0 length：历史记录中的网页数，也就是一共访问了多少网页。 previous：在访问这个网页之前访问的网页。 next：在访问这个网
42、页之后访问的网页。,（7）历史对象history,方法： go(num)：跳到历史记录中的某个网页。如，go(-1)表示跳到该网页的前一个网页； go(1)表示跳到该网页的后一个网页。 forward()：跳到该网页的后一个网页。 back()：跳到该网页的前一个网页。,（7）历史对象history,例14点击这个按钮可以返回刚才打开的窗口： ,（7）历史对象history,（7）历史对象history,除了JavaScript内嵌的对象和浏览器对象外，用户也可以创建和使用自己的对象。 创建对象的方法：先定义这个对象，然后再使用new方法为该对象创建一个实例即可。,（7）新建对象,定义对象的语
43、法结构：function 对象名（参数表）this.属性1=参数1；this.方法1=函数1；,可以为对象建立多个属性和方法,例15,（7）新建对象,当前对象指针,（7）新建对象,8. JavaScript的事件,每个对象可以识别和响应某些操作行为，这些操作行为称为事件。,8. JavaScript的事件,常用事件： onLoad:网页加载事件； onClick:鼠标单击事件； onFocus:获得焦点事件，即某个对象被激活； onBlur: 和onFocus相反，是失去焦点； onChange:对象发生改变时发生的事件； onMouseOver:鼠标移动到对象上时发生的事件； onMouse
44、Out:鼠标移开对象时发生的事件；,8. JavaScript的事件,并不是所有的对象都具有所有的事件，不同的对象会有所不同。比如， 按钮具有onClick事件； 下拉式菜单具有onClick、 onChange、 onFocus等多种事件； 表单有onSubmit和onReset两个特殊的事件，分别表示表单提交和表单重置事件； 文本框有onSelect事件，表示当其中的文本被选中时发生的事件。,例16使用文本框输入信息输入你的姓名:function getname(str) /显示用户名的对话框 alert(“你好! “ +str+ “! “);,8. JavaScript的事件,8. Ja
45、vaScript的事件,8. JavaScript的事件,练习： 使用文本框输入姓名：当文本框获得焦点时，弹出“姓名必须要真实填写”的对话框；当文本框失去焦点时，弹出“你好！某某!”的对话框。,例17 清除文本框中输入的文字。function c3(form) form.value1.value = ;form.value2.value = ; ,8. JavaScript的事件,8. JavaScript的事件,例18 应用OnMouseOver事件。function hello() alert(“你好，有什么问题吗?“);鼠标指向这里鼠标指向这里,8. JavaScript的事件,8. J
46、avaScript的事件,例19 应用OnChange事件。请输入你的姓名：请输入一个小于5的数：,8. JavaScript的事件,8. JavaScript的事件,例20 应用OnChange事件。function c1(form,callingField) if (callingField=“result”) if (form.square.checked) form.entry.value=Math.sqrt(form.result.value) else form.entry.value= form.result.value/2; else if(form.square.checke
47、d) alert(“选中计算平方“);form.result.value=form.entry.value*form.entry.value; else form.result.value= form.entry.value*2; ,8. JavaScript的事件,例20 应用OnChange事件。,请输入一个值：选择计算平方否则计算加倍：结果为：,8. JavaScript的事件,例21,8. JavaScript的事件,表单名,文本框名,8. JavaScript的事件,鼠标移动到图片上时发生的事件,文本框激活事件,8. JavaScript的事件,第4章 让网页动起来,4.1 动态的网
48、页 4.2 层叠样式表 4.3 JavaScript 4.4 动态网页技术实例,4.4 动态网页技术实例,1. 跟着滚动条移动的图片,无论怎么拖动滚动条，图片始终固定在网页的右下角。 用到层及JavaScript技术。,例22,1. 跟着滚动条移动的图片,注意大小写,z-index:1“,1. 跟着滚动条移动的图片,指明层的叠加次序，值越大，越在顶层。默认为1,1. 跟着滚动条移动的图片,例23 8) i=1;else i+;document.all.myfont.style.fontSize=i*4;/改变文字的大小/document.all指包含当前文档中所有对象的一个对象。可以看作是一个对象集合。document.all.myfont.style.color=“rgb(“+i*25+“,“+0+“,“+0+“)“;/改变颜色 if(i,2. 变化的文字,网页设计与制作,2. 变化的文字,2. 变化的文字,例24 =len)/如果到了整句话的末尾，那么从一个文字开始重新显示 seq=0;window.status=“;window.setTimeout(“Scroll();“,interval);,
