网页设计 网络工程系 黄君羡
网页设计--JavaScript
概述 JavaScript是Netscape公司开发的一门新兴网页开发语言，它语言结构简单，语法灵活，变量定义和使用比较随意。并且它是一种解释性语言，可以直接由浏览器来解释执行，并能直接访问浏览器中的各种对象，如窗口对象、文档对象、框架对象、超链接对象等。JavaScript可以实现的功能主要有：定义网页、在网页中加入动画、对网页中的各种对象进行处理、特别在处理表单方面有很强的功能和方便的控制浏览器中的各对象的属性。
概述 一、在网页中插入教本语言 ！一般把脚本放在<head></head>标记中！ 1、使用Script标记插入教本 例：<script language=“JavaScript” type=“text/javascript”> <!-- 在这里编写JavaScript代码。 //--> </script> 例子：P158，图7-1 2、直接添加脚本 例子：P159 3、链接脚本文件 <script type=“text/javascript” src=“…”></script>
基本语法－数据类型 一、数据类型 1、整型 •十进制 如：1234 10 0 •十六进制——表示时必须以字母OX开头。 如：1234 10 0 •十六进制——表示时必须以字母OX开头。 如：OXFF OX10 •八进制——必须以数字0开头 如：012 0888 2、浮点型 •普通表示法 ——把浮点数全部直接写出来 如：10.01 －0.002 0.0 •科学记数法——通过E（或e）来表示浮点 如：1.3E+6 －6.1e－21 3、布尔型（只有两个值） •真：可以用true或1表示 •假：可以用false或0表示
基本语法 4、字符型（下面两种表示方法等价） •单引号表示——表示一字符串 如：’javascript string type’ ‘－&123!’ •双引号表示——表示一字符串 如：”javascript string type” “－&123！” •特殊字符——换行符、水平制表符、格式符等。使用时，需要使用反斜杠(\)表示。 ‘\a’(“\a”) 警报符，用于发出警报声 ‘\b’(‘\b’) 退格符，光标回退一个字符位置 ‘\f’(‘\f’) 进纸符，在打印机中换下一页纸 ‘\r’(‘\r’) 回车符，光标移到同一行开头位置 ‘\n’(‘\n’) 换行符，光标另起一行 ‘\t’(‘\t’) 水平制表符，光标移动到下一个制表位置。 ‘\’’(‘\’’) 单引号（’） ‘\”’(‘\”’) 双引号（”） ‘\\’(‘\\’) 反斜杠（\）
基本语法－常量与变量 二、常量与变量 1) 常量——具有一个固定不变的值 整型数常量 如：10 浮点数常量 如：-1.5E+12 整型数常量 如：10 浮点数常量 如：-1.5E+12 布尔型常量 如；0 字符串常量 如： ‘abcd’ “11abc3％” 2) 变量—通过Var关键字进行申明，也可不用直接申明使用。 整型变量 如：Var I=0; I++ 浮点型变量 如：var I=0.01; I=I+0.24 布尔型变量 如：var f=0; f=!f 字符串变量 如：var s=’abcd’; s=”defg”+s 注意：1、在Javascript中，变量也可以随时变换类型。 如： Var L=1；(此时L为整型变量) L=1.25(则I变成了浮点型变量) 2、在JScript中，变量区别大小写 例如：Temp和temp是两个不同的变量。
基本语法－运算符和表达式 三、运算符和表达式 1)、算术运算符：+、－、*、/、++、－－ 2)、逻辑运算符：&&或AND（逻辑与）、 ║或OR（逻辑或）、！或NOT（逻辑非） 3)、比较运算符：＝＝、>、<、>＝、<＝、！＝ 4)、位运算符：&或AND(按位与)、∣或OR（按位或）、 ∧或（XOR）、〈〈（左移）、 〉〉（右移）、〉〉〉（补零右移） 5)、字符串运算符：+（合并运算符） 6)、赋值运算符：＝（等号）、+＝、－＝、！＝、 〈〈＝、〉〉〉＝等。 7)、表达式：没有等号的式子。如： 算术表达式：a+b+c 逻辑表达式：a＝＝b、a>＝b 字符串表达式：a+’abcd’
基本语法－流程控制语句 四、流程控制语句 1)、if。。。else语句 2)、条件运算符(?：)，如：a=( (b>=0) ?1:0) 3)、for语句，如：for(i=1；i<3；i++) 4)、while语句 5)、for。。。in语句：主要用于对数组中的各元素进行处 理，其基本用法如下例： for(i in a) //格式：for(变量名 in 数组名) {a[i]=9; } //此语句表示对每一个a数组中的a[i]元素 进行赋值9 6)、break语句：中断当前循环，跳出循环体，执行循环体 后的语句。 7)、continue语句：中止当前循环，进入下一轮循环（未跳 出循环体）
基本语法－函数 六、函数——关键字：function 1、函数的定义（类似C语言） 例：function add(i,j) { var b=0; b=i+j; //JSP在传递参数值时， 自动确认参数的数据类型。 return b; //用于返回函数的值。 }
基本语法－数组 五、数组 定义数组必须用Array对象，定义方法： 1） [var] variable = new Array(size)； 2） [var] variable[size]=new Array() 3) [var] variable=new Array(arg1,arg2,…argN) 其中，new是定义数组的关键字，a[size]表示数组的大小，Array中的size是参数。例如：a[10]=new array(10)； 注意：1在JSP中不能对数组所有元素同时进行操作（如赋值） 2 数组的下标从0开始。 例1：b[10]=new Array(10)； b={1,2,3,4,5,6,7,8,9,10}; //错误 例2：for (i=0;i<=10;i++) { a[i]=I; } //正确
基本语法－数组 3、使用第一种构造方法时，数组长度为0，在赋值操作时会自动增加数组的长度 4、使用后两种数组时，在赋值操作中，如果引用的数组元素超过数组的原长度，则数组也会自动增加其长度。 5、数组元素可以是不同数据类型 例子：P169 图7-2
面向对象技术 七、面向对象技术 面向对象的四个基本概念：类、属性、方法和对象。 1、类 分为系统固有类和用户自定义类 固有类规定了该类的一些属性和方法 例如：数组类 属性有：Array.length Array[0]…Array[N] 方法有：Array.join() Array.reverse()….. 用户自定义类 在定义时可以自行定义一些属性和方法。 2、对象 用类来定义，对象继承了类的属性，并且这些属性有了值。
面向对象技术 JavaScript中类的定义与定义函数的方法相同， 例如： Function record（sex，age，name） { this.sex = sex; this.age = age; this.name=name; } 定义完类后，就可以定义对象，如： john_record=new record(‘male’ ,25 ,’john’) 当访问对象中的某个属性时，必须用对象存取符号( . )来访问。如： a = john_record.name ; //此时，a的值为“john”
面向对象技术 JavaScript中与对象有关的3个关键字： new 关键字——用于定义一个新对象，例如前面定义数组时也用到它，实际上Array本身就是一个类，它是JSP自定义的一个内部的类，可以通过他来定一个数组对象。 this 关键字——用于引用当前正在定义的对象，例如： Rose ＝ new record（‘female’ ， 15， ‘this’）； 此时 record类中的this是指Rose对象。 with 关键字——功能同new关键字相同，但用法不同。其用法如下例： with(Smith) { sex=’male’; age=35; name=’smith’; } //这条语句相当于首先定义了一个与record相同结构的类，然后再用这个类定义了一个smith对象。
Window 对象 浏览器窗口本身就是一个对象，JavaScript最强大的功能在于能够直接访问浏览器窗口对象及其中的子对象。 Name：Window对象首先必须有一个名字属性，这是访问window对象的唯一途径。 Top：窗口的纵坐标，以像素为单位 Left：窗口的横坐标，以像素为单位 Width：窗口对象的宽度，以像素为单位 Heigh：窗口对象的高度，以像素为单位 Resizable：窗口可调整大小属性，值为Yes（1）或No（0） Directories：窗口目录元素属性，值为Yes（1）或No（0） Location：窗口位置元素属性，值为Yes（1）或No（0） Menubar：窗口菜单栏元素属性，值为Yes（1）或No（0） Scrollbats：窗口滚动条元素属性，值为Yes（1）或No（0） Status：窗口状态栏元素属性，值为Yes（1）或No（0） Toolbar：窗口工具栏元素属性，值为Yes（1）或No（0）
实例介绍：本例将实现打开和关闭浏览器窗口的功能，用到了window对象的两个方法：open（）和close（）， 在Html中，window对象主要有以下几种常用方法 1、Open（）——此方法用于新创建一个窗口对象，参数有： URL参数：用于指定新建窗口的URL属性（即Location属性） 窗口对象名称参数：用于指定新建窗口对象的名字属性。 其他参数：包括width，height，directories，location，menubar， resizable，scrollbars，status，toolbar等属性，这些属性 的值都是通过Yes或No进行设置的。 基本用法：window.open( URL, name , others ); 例子：window.open(‘http://www.163.com’,’mywin’,’directories=yes location=yes menubar=yes scrollbars=no status=no toolbar=no width=200 height=100’); 2、Close（）——此方法用于关闭一个window对象，它里面不用任何参数 基本用法：窗口对象.close（）； 例如：mywin=window.open(‘http://gdcp.cn’,’’,’width=200 height=200’); mywin.close(); 例子：打开和关闭窗口 实例介绍：本例将实现打开和关闭浏览器窗口的功能，用到了window对象的两个方法：open（）和close（）， 作业：编程 1 实现打开不同类型窗口实验 提示：比如可以改变大小、不可改变大小、允许出现滚动条等
Window对象 3、Alert（）——用于创建一个警告对话框，在对话框中只有 一个OK按钮 例如：window.alert(‘this is a alert test’); 4、Confirm（）——用于创建一个确认对话框，在对话框中只 有一个Ok按钮和一个Cancel按钮 基本用法：window.confirm(确认信息)； 例如：window.confirm(‘this is a confirm example’); 5、Prompt（）——用于创建一个提示对话框，在对话框中， 除了有Ok和 Cancel按钮外，还有一个文本 框，用于输入信息。 基本用法：window.prompt（提示信息）； 例如：Var name=window.prompt(‘please enter number’);
Window对象 6、setTimeout()——用于打开一个计时器，有两个参数： 执行语句参数：计时器到达指定的时间时执行某些自定义操作 时间值参数：用于指定时间值，当计时器到达这个时间 时，才开始执行其中的操作，单位：毫秒。 基本用法：window。settimeout(执行语句，时间值) 例如：window。setTimeout（‘add（）；’，200）； 7、clearTimeout()——用于关闭一个计时器 基本用法：window.cleartimeout(timerID); 例如: timer1=window.setTimeout(‘add();’,200); window.clearTimeout(timer1) 实例：计时器
location对象 1、location对象——window子对象，用于改变窗口中的URL 2、Location对象的属性——herf属性。此属性可以被直接访问 基本用法：window.location.href=URL; 例如：window.location.href=’http://www.163.com’； 3、Location对象的方法—— reload（）和replace（） Reload（）——此方法用于重载当前的网页文件 基本用法：window.location.reload(); Replace（）——此方法以一个新的location对象代替当 前的location对象，实际上就是加载新的 网页。它与直接设置location的作用相同 基本用法；window.location.replace(URL); 例如：window.location.replace(‘http://www.163.net’) 实例：改变浏览器URL
history对象 history对象——用于存放已访问过的站点URL信息。可以通过 history对象实现网页的往前和往后的浏览功能。 1、history对象的属性——只有一个length属性 基本用法：n＝history.length; 2、history对象的方法 back（）——用于将浏览器窗口中的URL换成前一次访 问过的URL，相当于浏览器中的Back按钮。 基本用法：history.back();
history对象 2、history对象的方法 forward（）——用于将浏览器窗口中的URL换成一个已访问过URL，相当于浏览器中的Forward按钮。 基本用法：history.forward(); go（）——用于将浏览器窗口中的URL换成指定的已访问过的URL，其中有一个参数，当参数为正时表示向前，为负时表示向后。 基本用法：history.go(-3);后退到上面3个已访问过的URL history.go(3); 前进到下面3个已访问过的URL 实例：历史记录访问控制按钮
document对象 document对象——实际上就是当前网页文件中的内容，它包含 各种子对象，这些子对象就是网页中的内容元素。 1、anchors对象：用于存放网页中的锚点链接个数。 2、images对象：用于保存网页中各图像名称和URL，网页 中所有图像名称和URL都放在images对象中。 3、forms对象：指网页中的表单对象，可以通过它来访问 各表单元素。 4、links对象：用于存放网页中的超链接信息。 二、document对象的属性 1、location属性：指当前网页文件的URL。与前的location不同，此属性不能进行设置，只能访问到它的值 例如：location=document.location;
document对象 2、title属性：指当前网页文件的标题名称 3、referrer属性：代表链接到当前的网页文件的前一个网页的URL。 4、lastModified属性：代表当前网页文件的最后一次修改时间。 5、bgcolor属性：用于设置网页的背景色 6、fgColor属性：用于设置网页的前景色，即网页中的文本颜色。 7、linkColor属性：用于设置网页中未访问过的超链接文本的颜色 8、vlinkColor属性：用于设置网页中已访问过的超链接文本的颜色 除了上面列举的一些属性成员以外，还有一些网页中的具体元素 的属性成员。 实例：改变document的属性
document对象 document对象的方法 一、在网页中增加内容的方法 1、write（）——用于在指定的光标位置增加一个网页对象，通常指文本或数字。 例如：document.write(‘this is a test’); 2、writeln（）——与write（）类似，也是用于在网页中 写文本或数字，但是它与write（）方法有一定的 区别。此方法在写完一行文字之后自动换行，而 write（）方法在写完一行文字之后不换行。 二、打开和关闭文档： 1、open（）——用于打开一个新的document对象，然后便 可以用write()或writeIn（）方法在里面添加内容。 实例：Document对象的方法
anchors对象 anchors对象 length属性——此属性给出网页文件中锚点链接的个数 基本用法：var n = document.anchors.length;
links对象 links对象 length属性：此属性给出网页文件中超链接的个数可以直接 访问其属性值。 基本用法：link_num = document.anchors.length; href属性：用于表示超链接的URL，可以通过引用数组元素的 方法来获取某个超链接的URL。 基本用法：link() = links[0].href; 实例：改变超链接的href属性
images对象 images对象——用于存放网页中的图象信息，包括一下属性： border属性：用于设置图像的边框属性 complete属性：代表图像是否被完全装载 width属性：用于设置图像的宽度 height属性：用于设置图像的高度 name属性：用于设置图像的控制名称 lowsrc属性：用于指定浏览器使用纸分辨率显示图像 src属性：。用于设置图像的源文件名和URL hspace属性：用于设置图像的水平空白距离 vspace属性：用于设置图像的垂直空白距离。 在JSP中可以直接设置属性的值，例如： document.images[0].src=”picture/temp.gif”; 实例：改变图片的各种属性
forms对象 forms对象 用于存放网页中的各表单元素，可以直接通过名字来访问网页中的表单元素，也可以通过数组的方式来访问表单元素。他包括各种表单域元素对象：如按钮、单选框、复选框、单行文本、滚动文本框、口令域、隐藏域等。JSP中一个强大的功能就是能直接处理表单中的各表单中的个表单域元素。 例如：可以通过下面一条语句来改变一个单行文本中显示的内容： document.forms[0].text1.value=’hello’；//text1是单行文本的名称。 实例：改变表单控件的值
事件类型 事件是JavaSript中常常用于激活某些功能模块的一种方式。主要有一下一些事件： onAbort：当浏览器在装载图像过程中突然中断时发生 onBlur：在网页中的某个对象失去激活状态时发生，常用在表单元素中 onChange：在表单中的文本域中的内容发生变化时发生 onError：在网页文件或图像不能正常装载时发生 onFocus：在网页的某个对象刚刚被激活时产生，它与onBlur正好相反 onLoad：在网页或图像装载时发生 onMouseover：在鼠标移动到某个对象上时发生 onMouseout：在鼠标离开某个对象时发生 onSelect：在文本域中的某段文字被选中时发生 onUnload：在退出或关闭网页文件时发生
事件类型 这段代码在用鼠标对按钮进行不同的操作时，在状态栏会显示不同的信息。 例如，可以利用事件来编写下面一段代码： <html> <head> <title>an Events example</title> </head> <body> <form> <input type="button" value="Click Here" Name="temp" onMouseover="window.status='mouse is over me'" onMouseout="window.status='mouse is out me'" onClick="window.status='mouse clicked me'"> </form> </body> </html> 实例：改变状态栏文字 这段代码在用鼠标对按钮进行不同的操作时，在状态栏会显示不同的信息。