javascript之动态网页编程
2015-03-07 16:21
183 查看
第一章 JavaScript简介
JavaScript在HTML中的使用：
在网页文件的<script></script>标签对中直接编码
将程序代码放置在一个单独的文件中，在网页的适当位置引用这个文件
将程序代码作为某个元素的事件属性值，或超链接的href属性。
<script></script>可以出现在HTML文件中的<head></head>标签对中，也可以出现在<body></body>标签对中，在一个HTML中，可以使用多个<script></script>标签对。并且各段JavaScript代码之间可以相互访问，
<html>
<head>
<title>多段代码分开放置</title>
<style>
/*CSS部分*/
</style>
<link type="text/css" rel="stylesheet" href="1.1.css">
</head>
<body>
<h1>多段代码分开放置</h1>
这里是第一段代码：<br>
<script language="javascript">
<!--
var x=1;
document.write("<p>这段代码只输出这句话<p>");
//-->
</script>
这里是第二段代码：<br>
<script language="javascript">
<!--
document.write("X="+x+"<p>");
//-->
</script>
这里是第三段代码：<br>
<script language="javascript">
<!--
var y=2;
document.write("y="+y);
//-->
</script>
</body>
</html>
1.2.2代码屏蔽
有些浏览器不能够很好的支持JavaScript，可以将<script></scrpt>中的内容用HTML的注释标记(<!-- //-->)括起来，。
<script language="javascript">
<!--
alert(new Date());
//-->
</script>
这样支持<script>的浏览器将忽略嵌入在<script></script>中的HTML注释符。当用户浏览器不支持或禁用JavaScript时，如果还想在页面显示一些内容，可以使用<noscript></noscript>标签对，用来显示内容，两者不会同时显示出来。
<!--1.2.html-->
<html>
<head>
<title></title>
<style>
</style>
<link type="text/css" rel="stylesheet" href="1.2.css">
</head>
<body>
<h1><Script>与<noscript></h1>
<script language="javascript">
<!--
var a;
a="这是使用<script>定义的内容";
document.write(a);
//-->
</script>
<noscript>
这是使用<noscript>定义的内容。
</noscript>
</body>
</html>
1.2.3在单独文件中使用
可以将脚本文件放置在一个单独的文件中，以.js扩展名结尾，称为JavaScript脚本文件。
<script src="script.js" language="javascript"></script>
与将脚本放在<script></script>中的效果是一样的。
如：有一名为1.3.js的文件，内容如下：
document.writeln('<h1>这是使用外部JS文件生成的行</h1>');
<!--1.3.html-->
<html>
<head>
<title></title>
<style>
</style>
<link type="text/css" rel="stylesheet" href="1.3.css">
<script src="1.3.js" language="javascript">
</script>
</head>
<body>
</body>
</html>
1.2.4作为属性使用
HTML中的超链接标签<a>的href属性值除了可以使用HTTP，mailto等协议外，还可以使用JavaScript。
<a href="javascript:alert(new Date());">JavaScript</a>
JavaScript扩展了标准的HTML，如下一段代码：
<input type="button" value="test" onlick="alert(new Date());">
注意，用作URL的JavaScript代码前要加JavaScript，以说明用的是JavaScript协议，而事件属性中的JavaScript前不需要加JavaSCript。
1.3 JavaScript基本语法
执行顺序：JavaScript按照在HTML中出现的顺序执行。
JavaSCript对大小写敏感。
HTML不区分大小写。
JavaScript忽略空格，制表符或换行符。
语句与分隔符，块
注释: // /* */
为程序添加注释可以起到两个作用：
第一是解释程序的功能，使程序易于理解。
第二是暂时屏蔽某些语句，等到需要时再取消注释。
JavaScript可以识别HTML注释的开始部分，<!--将其作为单行注释来看待，由于它的特别作用，在使用时应当将其放在脚本的第一行。
第二章 数据类型与变量
JavaScript的数据类型分基本数据类型和复和数据类型，复合数据类型主要有对象，数组与函数。基本数据类型有：数值数据类型，字符串型，逻辑数据类型以及两个特殊数据类型。
数值型：十进制，八进制，十六进制。
特殊值Infinity：当一个数值或或数值表达式的值超出了可表示的最大值的范围，即无穷大。相同的道理，负无穷大：-Infinity
特殊值NaN：含义表示not a number,NaN是唯一一个不可以和自身比较的值。例如：当进行0、0或Infinity求正弦时，结果都为NaN。
<script language="javascript">
<!--
var x=0/0;
if(x!=x)
alert(x);
if(isNaN(x))
alert("x is NaN");
//-->
</script>
Number对象中有关特殊值的属性列表：Number.MAX_VALUE：可表示的最大值
Number.MIN_VALUE:可以表示的最小值
Number.POSITIVE_INFINITY:无穷大
Number.NEGTIVE_INFINITY:无穷小
一个正数被0除是Infinity，一个负数被0除是-Infinity。0/0为NaN。
字串型：
字符串是一组被引号括起来的文本，JavaScript中不对字符与字符串区分 ，字符串是与String对象关联的。可以用charAt()从字符串中提取字符。如：
var myname="thomas";
var thirdletter=myname.charAt(2);
也可以使用length（）方法来求字符串的长度。
Boolean值
<!--2.1.html-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
if(navigator.cookieEnabled)
alert("ok");
else
alert("not ok");
//-->
</script>
</body>
</html>
特殊数据类型：包括undefined null
undefined用来表示不存在的值或者尚未赋值的变量，对一个变量只声明不赋值，或赋值为一个不存在的值。null表示该变量被赋值给了一个空值。
变量：
JavaScript是无类型的，这就意味着JavaScript的对象可以存储任何数据。
变量使用var来声明，使用var语句多次声明同一变量也是允许的，相当于对变量的重新赋值，。
JavaScirpt中，变量基本上和对象的属性是一样的，当JavaScript解释器开始运行时，全在执行任何代码之前创建一个全局对象，该对象的属性就是全局变量。
在声明一个全局变量时，实际上是定义该全局对象的一个属性，所有预定义的函数和属性也都是该全局对象的属性，在顶层代码中，可以使用关键词this来引用该全局对象。
局部变量也是一个对象的属性，这个对象叫做调用对象。
JavaScript每次开始执行一个函数时，都会为该函数创建一个执行环境，。
JavaScript提供一个运算符===，只有在两个操作数数值相等并且类型也相同时结果才为真。
2.4.2提升基本数据类型为对象
每一个基本数据类型都存在一个相应的对象，该对象提供很多很有用的方法来处理数据，在需要时，JavaScript会自动把基本数据类型转化为与之相应的对象，除自动转化外，还可以手动转化。如toString(),parseInt(),parseFloat();
2.5.5字符串的特殊性
在复制和传递字符串时使用的是引用，而对字符串进行比较时使用的却是值。
第三章 运算符和表达式
逗号运算符
void运算符用来指明一个表达式无返回结果。
typeof运算符返回一个字符串，用来指明其操作数的数据类型。
对象运算符：
运算符.用来连接对象其属性和方法。如：document.lastModified
运算符new用来创建对象。
运算符delete用来移除对象的属性或者移除数组元组。
第四章 基本的流程控制语句
第五章 函数
5.1.1
定义函数要使用function关键字，语法规则如下：function 函数名(){};
在其它语言中，可以定义指向函数的指针，以后就可以用该指针变量来调用 其指向的函数，JavaScript创建类似的方法来创建动态函数。
var 变量名=new Function();
参数列表中的所有参数都是字符串类型，并且最后一个字符串是这个函数的功能程序代码。
第八章 正则表达式
元字符?与()
?表示紧靠其前的元素项是可选的，。abc?可以匹配abc与ab.
用（）表示子匹配。
例如：要匹配两个相同的连续数字字符的正则表达式是(\d)\1.要匹配5个相同的数字字符的正则表达 式为(\d)\1{4};
要匹配1221，2334，这样的数字的正表达式是(\d)(\d)\2\1
a(bc)可以匹配abc与a.
RegExp对象：
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能，每一个正则表达式对应一个RegExp实例。
有两种可以创建RegExp对象的实例的方法：
显示构造：new RegExp("pattern",[flags]);
隐式构造：/pattern/[flags];
flags部分设置表达式的标志信息，是可选项。g是全局标志。如果不设置这个标志，则仅搜索和替换最早匹配的内容 ，i是忽略大小写标志，m是多行标志。
如：
<!--创建正则表达式-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
var mystring="这是第一个正则表达式的例子";
var myregex=new RegExp("一个");
if(myregex.test(mystring))
document.write("找到了指定模式");
else
document.write("没有找到指定模式");
//-->
</script>
</body>
</html>]
由于JavaScript中的\是一个转义字符，因些，使用构造函数创建RegExp对象时，应将原始正则表达式中的\用\\替换。
RegExp对象的属性：
RegExp对象的属性分为静态和实例属性。
test方法：检查一个字符串中是不是存在创建RegExp对象实例 所指定的表达式模式。
exec方法：对一个字符串进行搜索，并返回一个包含搜索结果的数组。
String的相关方法：match,search,replace.
split方法：该方法返回按照某种分割标志将一个字符串拆分成若干个子字符串所产生的子字符串数组。
如：
<!--8.8.html-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
var splitArray=new Array();
var string="太平洋，大西洋，印度洋，北冰洋";
var regexp=/，/;
splitArray=string.split(regexp);
for(var i=0;i<splitArray.length;i++){
document.write(splitArray[i]+"\n"+"<br>");
}
//-->
</script>
</body>
</html>
8.7限定符与选择匹配符：
用{n}限定连续出现的次数
用{n,}限定至少出现的次数
{n,m}用来限定最少与最多出现的次数
用+限定必须出现一次或连续多次
用*号来规定前面的元素或组合项可以出现多次或零次。
用？表示前面的元素或组合可以出现零次或一次。
默认情况下，正则表达式使用最长匹配原则，例如：要将zoom中匹配zo?的部分替换成为 r,替换后的结果为rom.
当字符?紧跟在其他任何限定符（*,+,?,{n},)后，匹配模式 变成最短匹配原则。在fooood中，fo+?匹配fo.
用选择匹配进行匹配选择，
选择匹配符只有一个，就是“|"字符。用于选择匹配两个选项之中的任意一个。
8.8 分组组合与反向引用符
分组组合是将表达式在某部内容组合起来的符号，反向引用符则是用于匹配分组组合捕获到的内容的标识符。
使用/\b([a-z])+)\1\b/g匹配所有连续重复的单词部分。
\b用于匹配单词的边界。
非捕获匹配：?:pattern
正向预测先行匹配：?=patern
反向预测先行匹配?!pattern
8.9特殊字符与字符匹配符
【 】匹配方括号中包含的字符集中的任意一个字符
[^]用来匹配方括号没有包含的任意字符
[a-z]用来匹配指定范围内的字符
\d匹配任意一个数字
\D匹配任意一个非数字字符
\s匹配任意一个空白字符
\S匹配任意一个非空白字符
\w匹配任意英文字母和数字类字符以及下划线
\W 匹配任何非英文字母和数字符
.匹配任意单个字符
8.10 定位符与原义字符
用^匹配目标字符串的开始位置
用$匹配目标字符串的结尾位置
用\b匹配一个字边符
用\B匹配非字边符
8.11 实用举例
匹配中文字符的正则表达式：[u4e00-u9fa5]
匹配双字节字符:[^x00-xff]
匹配HTML标记的正则表达式：
/<(.*)>.*</1)|<(.*)/>/
匹配网址URL：http"//([w-]+.)+[w-]+(/[w-./?%&=]*)?
用正则表达式限定只能用输入中文：
onkeyup="value"=value.replace(/[^u4e00-u9fa5]/g,' ');
第十章 键盘和鼠标事件处理
键盘和鼠标事件处理功能非常强大，在网页设计中经常用到。这一章将介绍相关的内容。
10.1事件处理
在本节给出一个例子，当用户在Web页面中单击鼠标左键时，程序要能够报告鼠标所在的位置，当和户释放鼠标键时，需要报告鼠标键已经弹起，如果用户在按下三个功能键的同时再按下鼠标键，也应当给出详细的报告。
在实际应用中，鼠标右键对程序控制来说是没有用的，因为浏览器已经预先将其设置为与上下文内容相关的帮助键。
10.1.1 在Netscape浏览器中使用鼠标事件
document.onMouseDown=mouseDownHandler;
document.onMouseUp=mouseUpHandler;
一个Netscape浏览器的Event类型的对象传给鼠标事件的处理函数，可以从该对象中获得鼠标的位置信息以及按键信息，鼠标在该页面中的位置信息存放在属性pageY,pageX,中。Event对象的所有属性如下：
type 事件类型
layerX 在事件发生的层中光标的水平位置，以像素为单位
layerY 在事件发生的层中光标的垂直位置，
pageX 光标在页面中的水平位置
pageY 光标在页面中的垂直位置
screenX 光标在屏幕上的水平位置
screenY 光标在屏幕上的垂直位置
which 被按下的鼠标键或键盘按键的ASC码
modifiers 与鼠标和按键组合按键。
data 一个字符串数组，与拖动事件一起使用，包含被拖动对象的URL
10.1.2 在IE中使用鼠标事件
在IE浏览器中处理鼠标事件是完全不同的，为了在文档中捕捉鼠标事件，必须将鼠标事件写入到body标签中。必须通过查看Event对象的来确定鼠标所在的位置，面Event对象是Window对象的一个成员对象，其属性如下：
altKey alt键按下时为真
shiftKey Shift键按下时为真
ctrlKey Ctrl键按下时为真
button 确定是哪个鼠标键被按下
cancelBubble 表明该事件是不是应沿事件层次向上移
clientX 相对用户区域的X坐标
clientY 相对用户区域的Y坐标
keyCode 按键的代码
offsetX 相对容器的坐标X
offsetY 相对容器的坐标Y
returnValue 事件返回值
screenX 相对屏幕的X
screenY 相对屏幕 的Y
fromElement 被移动的元素
sreElement 产生该事件的元素
srcFilter 如果有FilterChange事件发生，则过滤该事件
toElement 正在移动的元素
type 以字符串形式返回事件类型
x 在页面中的X
y 在页面中的Y
reason 数据传输的部署
10.1.5 确定用户使用的是哪一种浏览器
要确定用户使用的是哪一种浏览器，只需检查浏览器的navigator对象即可。该对象有一个名为appName的属性，在IE中的值为Microsoft Internet Ｅｘｐｌｏｒｅｒ，而在Netscape中的值为Netscape.
如下为程序的完整代码：
<!--鼠标事件处理-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
document.onMouseDown=mouseDownHandler;
document.onMouseUp=mouseUpHandler;
function mouseDownHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="单击鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且单击鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}
function mouseUpHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并松开鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="松开鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且松开鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时松开鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}
//-->
</script>
</head>
<body onmousedown="mouseDownHandler();" onmouseup="mouseUpHandler();">
<center>
<form name=form1>
<h1>鼠标事件处理示例</h1><br>
<h2>请按Shift或Ctrl或Alt再单击鼠标左键</h2><br>
<a href="#" onmouseover="mouseDownHandler();"onmouseout="mouseUpHandler();">请将鼠标移到此链接</a>
<br><br>
<input type="text" name="Textbox" size=60>
</form>
</center>
</body>
</html>
10.2 页面预览
在有些网页上会看到这样的效果：当鼠标移至某个超链接时，会在页面的位置显示要链接页面的缩略图，本节就介绍这种效果的实现方法，在页面中显示5个超级链接和一幅图像，如果用户将鼠标移至某个超级链接上时，页面中的图像将用链接页面的缩略图来显示，如果将鼠标移至另一超级链接上时，将显示新的链接页面的缩略图。
代码如下：
<html>
<head>
<title>超级链接页面预览</title>
</head>
<body>
<center>
<form name="form1">
<h1>将光标移至超链接上查看页面预览</h1>
<a href="example1.html" name=link1 onmouseover="link1over()">这是链接一</a><br><br>
<a href="#" name=link2 onmouseover="link2over()">这是链接二</a><br><br>
<a href="#" name=link3 onmouseover="link3over()">这是链接三</a><br><br>
<a href="#" name=link4 onmouseover="link4over()">这是链接四</a><br><br>
<a href="#" name=link5 onmouseover="link5over()">这是链接五</a><br><br>
<img name="img1" src="391.jpg" >
</form>
</center>
<script type="text/javascript">
<!--
function link1over(){
document.form1.img1.src="391.jpg"
}
function link2over(){
document.form1.img1.src="392.jpg"
}
function link3over(){
document.form1.img1.src="398.jpg"
}
function link4over(){
document.form1.img1.src="399.jpg"
}
function link5over(){
document.form1.img1.src="400.jpg"
}
//-->
</script>
</body>
</html>
10.3 图像切换
本节将要展示这样一种效果，页面中显示一幅图像，当鼠标移动到该图像上时，程序将该图像替换为另一幅图像。当鼠标离开时，又恢复为原来的图像。尽管在超级链接上，Netscape Navigator浏览器支持mouseover,mouseout,但是在图像上支持。为此，可以将图像嵌入到一个空链接上。从而让鼠标事件可以被调用 。
<html>
<head>
<title></title>
</head>
<body>
<center>
<form name=form1>
<h1>移动鼠标进行切换</h1>
<a href="" name=link1 onmouseover="imgover()" onmouseout="imgout()">
<img name="img1" src="400.jpg" >
</a>
</form>
</center>
<script language="javascript">
<!--
function imgover(){
document.form1.img1.src="399.jpg";
}
function imgout(){
document.form1.img1.src="400.jpg";
}
//-->
</script>
</body>
</html>
10.4 接受键盘输入
在本节将创建这样一个接受键盘输入的例子，当用户键入文本时，字符将在文本框中显示出来。文本框没有焦点属性，因此文本框并非亲读取按键。一量用户按下按键，程序将直接读取。并将其放入到文本框。
10.4.2 在NetScape中读取按键
对于NetScapt浏览器，使用enent对象的which属性来读取按键的ASC码值。然后要转换该按键的代码，使其可以在文本框中显示，可以使用unescape()方法来实现些功能，该方法的参数是"%"加上按键的十六进制ASC码。且该方法将此字符串转换成一个字符，这样一来。就必须将按键代码表示为字符串格式的十六进制，这里使用Number对象的toString()方法来实现。
10.4.3 在IE浏览器中读取按键
在IE浏览器中，可以通过window.evet对象的keyCode属性来读取按键，通过使用IE浏览器中String类的fromCharCode()方法，可以将按键转换成字符串，并将其值存入inString字符串。然后，再像前面那样，将该字符串在文本框中显示出来。
代码如下：
<html>
<head>
<title></title>
</head>
<body onkeypress="keyPress()">
<center>
<form name=form1>
<h1>接收键盘输入实例</h1>
<h7>请随意在下面的文本框中输入一些字符</h7>
<br><br>
<input name="textbox" bype="text" size=40>
</form>
</center>
<script type="text/javascript">
<!--
document.onKeyPress=keyPress;
var inString=" ";
function keyPress(e){
if(navigator.appName=="NetScape"){
var keyCode=new Number(e.which);
inString+=unescape("%"+keyCode.toString(16));
document.form1.textbox.value=inString;
}
if(navigator.appName=="Microsoft Internet Explorer"){
inString+=String.fromCharCode(window.event.keyCode);
document.form1.textbox.value=inString;
}
}
//-->
</script>
</body>
</html>
10.5 用鼠标点亮文本
在网络中经常会看到，当鼠标移动到某页面上的超级链接时，链接的文字会变大，颜色也随之变化，这种效果在IE中常 见。本节介绍这种效果的实现方法。代码如下：
<html>
<head>
<title></title>
</head>
<body>
<center>
<form name="form1">
<h1>移动鼠标至超级链接以查看效果</h1>
<a href="#" name="link1" onmouseover="link1over()" onmouseout="link1out()">这是链接一</a>
</form>
</center>
<script type="text/javascript">
function link1over(){
link1.style.color="red";
link1.style.fontSize=36;
}
function link1out(){
link1.style.color="black";
link1.style.fontSize=16;
}
</script>
</body>
</html>
10.6 鼠标根随
鼠标跟随产效果也是网页中经常见到的一种效果，实现这种效果的关键是要获取鼠取鼠标的当前位置坐标。并与要跟随的图片，文字所在<div>的坐标关联在一起。这样，当鼠标位置发生变化时，要跟随的位置也发生变化。
10.6.1 图片跟随鼠标
10.7 鼠标感应
弹出警告框
经常可以见到在页面上显示一段文字，当鼠标指向文字时，会弹出一个警告框。实现这种效果的方法非常简单，。
渐显图片
看起来很模糊的图片，鼠标指向该图片后，立刻变清晰。要实现这种效果，需要获取鼠标的。代码如下：
<html>
<head></head>
<body>
<h1>鼠标感应。</h1>
<img src="398.jpg" style="filter:alpha(opacity=20)" onmouseover="makevisible(this,0);" onmouseout="makevisible(this,1)">
<script language="javascript">
function makevisible(cur,which){
if(which==0)
cur.filters.alpha.opacity=100;
else
cur.filters.alpha.opacity=20;
}
</script>
</body>
</html>
10.10禁用鼠标右键菜单
经常可以见到在有的网页上，当单击鼠标右键时，或者没有任何反应，或者弹出一个警告框。代码如下：
<html>
<head></head>
<body onmousedown="click()">
<h1>禁用鼠标右键菜单</h1>
<script language="javascript">
function click(){
if(event.button==2){
alert("你想看什么");
}
}
document.onmousedown=click;
</script>
</body>
</html>
第十一章 对象模型
对象模型定义了浏览器和文档可以被JAvaScript操作的一些特征。本章介绍最基本的对象模型，高级事件模型。将在下一章介绍
11.1 对象模型的概念
本节介绍JavaScript对象模型的基础性概念，包括对象模型基本结构和初始化对象模型。
对象模型是描述对象结构的接口。从JavaScript对象模型的示意图中可以看出：JavaScript对象模型由四部分组成，
第一部分：JavaScript核心语言，声明，运算符，表达式，数据类型。
第二部分：基于数据类型的基本对象，String，Date,Math。
第三部分：浏览器对象，Window，Navigator,Location.
第四部分：文档对象，Document，Form，Image.
其中，前两部分已经介绍，以后的章节主要介绍浏览器对象和文档对象。
11.1.2 初始对象模型
Window对象定义了与浏览器相关联的属性和方法，。在通常 情况下可以认为是对当前Window对象进行操作，所以可以省略Window.
浏览器对象的核心对象：
window 关联当前浏览器窗口
document 包含各类HTML属性与文本片断的对象
frames[] Window对象包含的框架数组，每个框架依次引用另外的Window对象，该对象可包含更多框架
history 包含了当前窗口的历史记录列表，即用户最近浏览的各类URL信息记录
location 包含一个URL及其片断表单的可见文本
navigator 描述浏览器的基本特征，类型，版本等的对象。
11.2 Document对象简介
在JavaScript对象中，Document对象是最常 用的对象，本节介绍该对象的常见用法。
11.2.1 Document对象的属性与方法
Document对象提供了一系列属性和方法，可以对页面元素进行属性设置。
Document对象的常见方法如下：
close() 关闭对文档的输入流
open() 打开文档准备输入
write() 向文档输入内容
writeln() 在文档中追加新行并输入内容
常用Document对象的属性
alinkColor:活动链接的颜色，默认为红色
anchors[]文档的锚对象数组
bgcolor 页面背景色
cookie 访问页面cookie的字符串
fgColor 文档内的颜色
forms[] 文档中包含表单元素的数组
LastModified 包含文档最后修改时间的字符串
links[] 文档中的链接的数组
linkColor: 没有访问的链接的颜色
location 包含文档中URL的字符串
referrer 包含指向自己访问过的文档内链接的字符串
Title 包含文档标题的字符串
URL 包含文档URL的字符串
vlinkColor 访问过的链接的颜色。
11.2.2 属性及方法的应用
<html>
<head>
<title>传统文档对象 测试</title>
<script language="javascript">
<!--
function showProps(){
var i;
document.write("<h4 align='center'>文档对象属性</h4><hr>");
document.write("<h5>基本页面属性</h5>");
document.write("URL="+document.URL+"<br>");
document.write("文档标题="+document.title+"; ");
document.write("文档最后编写时间="+document.lastModified);
document.write("<h5>页面颜色</h5>");
document.write("背景颜色等于"+document.bgColor+";nbsp;");
document.write("文本颜色是"+document.fgColor+"; ");
document.write("链接颜色是"+document.linkColor+"<br>");
document.write("活动链接颜色是"+document.alinkColor+"<br>");
document.write("访问过的链接颜色是"+document.vlinkColor+"<br>");
if(document.links.length>0){
document.write("<h5>链接</h5>");
document.write("#链接数="+document.links.length+"; ");
for(i=0;i<document.links.length;i++)
document.write("Links["+i+"]="+document.links[i]+"; ");
}
if(document.anchors.length>0){
document.write("<h5>锚</h5>");
document.write("#锚数="+document.anchors.length+"; ");
for(i=0;i<document.anchors.length;i++)
document.write("anchors["+i+"]="+document.anchors[i]+"; ");
}
if(document.forms.length>0){
document.write("<h5>表单</h5>");
}
}
//-->
</script>
<style>
body{background-color:white;
color:green;
}
:link{
color"red";
:visited{
color:#FFFF00;
}
h4{
text-align:center;
}
</style>
</head>
<body>
<h4>测试文档</h4>
<a href="http://www.print.com">链接一</a>
<a name="anchor1></a>
<a name="anchor2" href="http://www.javascript.com">链接二</a>
<form></form>
<form></form>
<script language="javascript">
showProps();
</script>
</body>
</html>
11.2.3 文档元素的按位置访问
在上面的代码中可以看到，可以使用类似forms[0]这样的方式来访问不同的表单，。如下：
window.document.forms[0].elements[0]
更好的方式是按名称来访问
11.4.2 文档元素的按名称访问
为了便于读取和操作，JavaScript允许对网页元素命名，基本方式是附加一个id属性，id属性几乎可以关联任何HTML元素。为元素命名后，就可以避免由于位置访问带来的错误，。为了保持旧版浏览器的兼容性，网页开发者必须小心使用name属性，为安全起见，在给网页元素命名时，可以同时使用name,id。只要使两者具有相同的值就可以了。
11.2.5 事件控制器
从前面的章节，您已经知道如何来访问表单对象，现在要介绍如何为用户活动监控这些对象，首要的方法就是通过事件控件器来响应用户操作。所谓事件控件器，就是一连串的JavaScript代码，例如，单击，提交等的操作。
11.3 组合应用
<!--元素属性综合运用-->
<html>
<head></head>
<body>
<form id="myform" name="myform" action="#" method="get">
<strong>请输入你的名字</strong>
<input type="text" id="username" name="username" size=20>
<br><br>
<input type="button" value="确定" onclick="sayHello();">
<script language="javascript">
<!--
function sayHello(){
var theirname=document.myform.username.value;
if(theirname!="")
alert("欢迎"+theirname+"访问");
else
alert("姓名为空，请重新输入");
document.myform.username.focus();
}
//-->
</script>
</form>
</body>
</html>
11.4 动态修改表单元素内容
使用JavaScript不仅可以对页面元素内容进行读取，而且可以改变其内容。
在以上的代码中，使用了window.document.colletionname的形式来访问网页元素，其中，collectionname是一个JavaScript对象数组，为些数组包括forms[],anchors[];links[];然而，支持W3C DOM的现代浏览器中，则不需要这样的形式。例如下面：
<p id="para"></p>
document.getElementById("para");
可以通过上述方式对标签访问，。实现了对该标签的访问，就可以使用已经定义的对属性值进行设置。
甚至可以通过style属性设置其CSS样式。
第十二章 文档对象模型DOM
文档对象模型DOM是一个基础性的概念，主要涉及网页页面元素的层次关系。很好地理解DOM对于编写出高效，实用的JavaSCript程序非常有帮助 的。
12.1 DOM概述
12.1.1 DOM分层
第0层：与上一章所讲相同。为经典JavaScrip对象模型。
第一层：提供了通过公用函数集来访问页面所有元素的功能。在该层次中，页面中的所有元素在任何时候都可以读写。
第二层：提供了更进一步的机制，可以访问包括XML，CSS等的页面元素。简称DOM2.
12.1.2 Document树
DOM有12种结点类型，但很多只与XML有关，下面为与HTML相关的结点类型：
1元素 ：一个XHTML或XML元素
2属性：一个元素的一个属性
3文本：附加在HTML或XML元素上的一段文本
8注释：一个HTML注释
9文档：即树中的顶层元素
10文档类型： 文档类型定义
12.2 访问元素
在DOM中，可以对页面元素进行访问，甚至是对其进行操作。本节介绍DOM中访问页面元素的方法。
12.2.2DOM结点属性：
nodeName: 包含结点名称
nodeValue: 包含了结点内部值，通常只用于文本结点
nodeType: 结点类型。对应于数字。
parentNode: 如果存在，指向当前结点的双亲结点
childNodes: 访问子结点列表
firstChild: 如果存在，则指向当前元素的第一个子结点
lastChild: 如果存在，则指向当前元素的最后一个子结点
previousSibling: 指向当前结点的前一个兄弟结点
nextSibling 指向当前结点的后一个兄弟结点
attributes: 元素的属性列表
ownerDocument 指向包含该元素的HTMLDocument对象
12.2.3 相邻结点检测
在上例中，事先知道某个结点的兄弟结点和子结点，若不知道某个结点的子结点时，可以使用hasChildNodes()方法，该方法返回一个Boolean值，指明当有结点是某有子结点。
if(current.hasChildNodes())
current=current.firstChild;
同样，当不知道结点的兄弟和双亲结点时，可使用如下形式：
if(current.parentNode)
current=current.parentNode;
文档树检测：
<html>
<head>文档树检测</head>
<body>
<h1>DOM Test Heading</h1>
<hr>
<p>a paragraph of <em>text</em> is just an example</p>
<ul>
<li><a href="#">链接</a></li>
</ul>
<form name="testform" id="testform" acton="#" method="get">
NodeName:<input type="text" id="nodename" name="nodename"><br>
NodeType:<input type="text" id="nodetype" name="nodetype"><br>
NodeValue:<input type="text" id="nodevalue" name="nodevalue"><br>
</form>
<script language="javascript">
<!--
var currentElement=document.documentElement;
update(currentElement);
function update(currentElement){
document.testform.nodename.value=currentElement.nodeName;
document.testform.nodetype.value=currentElement.nodeType;
document.testform.nodevalue.value=currentElement.nodeValue;
}
function nodeMove(currentElement,direction){
switch(direction){
case "previousSibling":
if(currentElement.previousSibling)
currentElement=currentElement.previousSibling;
break;
case"nextSibling":
if(currentElement.nextSibling)
currentElement=currentElement.nextSibling;
break;
case"parent":
if(currentElement.parentNode)
currentElement=currentElement.parentNode;
break;
case"firstChild":
if(currentElement.hasChildNodes())
currentElement=currentElement.firstChild;
break;
case"lastChild":
if(currentElement.haschildNodes())
currentElement=currentElement.lastChild;
break;
}
update(currentElement);
return currentElement;
}
//-->
</script>
<form action="#" method="get">
<input type="button" value="双亲结点" onclick="currentElement=nodeMove(currentElement,'parent');">
<input type="button" value="第一个子结点" onclick="currentElement=nodeMove(currentElement,'firstChild');">
<input type="button" value="最后一个子结点" onclick="currentElement=nodeMove(currentElement,'lastChild');">
<input type="button" value="后一个兄弟结点" onclick="currentElement=nodeMove(currentElement,'nextSibling');">
<input type="button" value="前一个兄弟结点" onclick="currentElement=nodeMove(currentElement,'previousSibling');">
<input type="button" value="返回根结点" onclick="currentElement=document.documentElement;update(currentElement);">
</form>
</body>
</html>
12.3 结点
有了前面对DOM树的了解，本节介绍对结点的操作。主要包括创建结点，结点的插入，添加，以及结点的删除与替换。
12.3.1 创建
用来创建结点的DOM方法：
createAttribute(name) 创建一个由name指定的元素名称，很少用于已经有的元素，因为有预定义的属性名。可以直接进行操作
createComment(string) 创建一个由string指定的HTML或XML注释
createDocumentFragment() 创建一个包含结点信息的文档片断
createElement(tagName) 创建一个由字符串参数tagName指定的元素
createTextNode(string) 创建一个文本结点
例如：创建一个新结点和一个创建一个文本结点的代码如下：
newNode=document.createElement('p');
newText=document.createTextNode("something to add!");
12.3.2 插入和追加
Node对象有insertBefore（newChild,referenceChild)和appendChild(newChild)两个方法用来插入结点。
appendChild()方法作为某个结点的方法来调用，在该结点的子结点的结尾添加一个newChild.
insertBefore()方法指定在referenceChild之前插入一个newChild。在实际应用中，需要访问某个结点的双亲结点，以获得insertBefore（）方法的信息，。
可以使用appendChild（）方法将下面两个结点链接起来。
newNode.appendChild(newText);
结果是<b>something to add</b>
然后就可以将其插入到文档中适当位置。
如下所示：
<html>
<head>
</head>
<body>
<script language="javascript">
<!--
function makeNode(str){
var newParagraph=document.createElement("p");
var newText=document.createTextNode(str);
newParagraph.appendChild(newText);
return newParagraph;
}
function appendBefore(nodeId,str){
var node=document.getElementById(nodeId);
var newNode=makeNode(str);
if(node.parentNode)
node.parentNode.insertBefore(newNode,node);
}
function insertWithin(nodeId,str){
var node=document.getElementById(nodeId);
var newNode=makeNode(str);
node.appendChild(newNode);
}
function appendAfter(nodeId,str){
var node=document.getElementById(nodeId);
var newNode=makeNode(str);
if(node.parentNode)
if(node.nextSibling)
node.parentNode.insertBefore(newNode,node.nextSibling);
else
node.parentNode.appendChild(newNode);
}
//-->
</script>
<h1><center>插入与追加</center></h1>
<hr>
<div style="background-color:gray;">
<div id="innerDiv" style="background-color:red;"></div>
</div>
<hr>
<form id="form1" name="form1" action="#" method="get">
<input type="text" id="field1" name="field1">
<input type="button" value="前插入" onclick="appendBefore('innerDiv',document.form1.field1.value);">
<input type="button" value="中插入" onclick="insertWithin('innerDiv',document.form1.field1.value);">
<input type="button" value="后插入" onclick="appendAfter('innerDiv',document.form1.field1.value);">
</body>
</html>
12.3.3 结点复制
有时候，不想创建或插入一个全新的元素，可以使用cloneNode（）方法创建某个结点的一个副本。该方法捕获一个Boolean值，用来指定该副本是包含结点的所有子结点。（称为深度复制，还是只包含该结点本身。即该方法获取一个参数。Boolean值。用来指定是深复制还是只包含该结点本身。
12.3.4 删除与替换
经常会遇到从树中删除一个结点的情况，Node对象提供了一个removeChild(child)方法来实现结点的删除。其中的参数是要删除的结点。例如：
current.removeChild(current.lastChild);
该代码会删除指定结点的最后一个子结点，removeChild()方法返回删除的Node对象
此外，还可以使用replaceChild(newChild,oldChild)方法实现对结点的替换，其中的newChild为替换后的结点，替换后，旧内容将被删除。
<html>
<head>
<title></title>
</head>
<body>
<div id="toDelete">
<p>this is a paragraph</p>
<p>this is <em>another pagraph</em> to delete</p>
<p>this is yet another paragraph</p>
</div>
this paragraph has an <em id="toReplace">em element</em> in it;
</p>
<hr>
<form action="#" method="get">
<input type="button" value="delete" onclick="doDelete();">
<input type="button" value="replace" onclick="doReplace();">
</form>
<script language="javascript">
<!--
function doDelete(){
var deletePoint=document.getElementById("toDelete");
if(deletePoint.hasChildNodes())
deletePoint.removeChild(deletePoint.lastChild);
}
function doReplace(){
var replaces=document.getElementById("toReplace");
if(replaces){
var newNode=document.createElement("strong");
var newText=document.createTextNode("strong element");
newNode.appendChild(newText);
replaces.parentNode.replaceChild(newNode,replaces);
}
}
//-->
</script>
</body>
</html>
12.3.5 结点修改
虽然元素属性可以修改，但是元素不能修改，如果要进行修改，应当改变结点本身。
对于下面的结点：
<p id="p1" >this is a test</p>
textNode=document.getElementById("p1").firstChild;
使用上面的方法对元素内部的文本结点访问，。可以使用length属性来设置文本结点的长度。
下面列出了处理文本结点用到的方法：
appendData(string) 由文本结点的结尾添加一个String指字的字符串
deleteData(offset,count) 删除从offset处开始由count指定的字符个数
insertData(offset,string) 在offset处插入文本
replaceData(offset,count,string) 用string文本替换自Offset处开始由Count指定的文本
splitText(offset) 从offset处开始将原文本结点一分为二，左半部分作为原结点内容，右半部分作为新的文本结点
substringData(offset,.count) 返回一个字符串
12.4 属性
12.4.1 属性使用
DOM支持很多关于属性操作的方法，由于数量多，用法简单，给出一示例程序。
<html>
<head>
<title></title>
</head>
<body>
<font id="test" size="2" color="red">Change my attrributes!</font>
<script language="javascript">
<!--
var theElement=document.getElementById("test");
//-->
</script>
<form name="testform" id="testform" action="#" method="get">
颜色<input type="text" size="8" value="" name="color" id="color">
<input type="button" value="设置颜色" onclick="theElement.setAttribute('color',document.testform.color.value);">
<input type="button" value="移除颜色" onclick="theElement.removeAttribute('color');">
<br>
字号：
<select onchange="theElement.setAttribute('size',this.options[this.selectedIndex].text);">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</form>
<script language="javascript">
document.testform.color.value=theElement.getAttribute("color");
</script>
</body>
</html>
12.4.2 DOM与HTML元素
由于很多对象属性与XHTML元素之间有着直接的映射关系，所以，要很好地掌握DOM，需要对XHTML语法有很好的理解。例如：
<html>
<head>
<title></title>
</head>
<body>
<h1 style="text-align:center;">简单的HTML编辑器</h1>
<br><br>
<div id="addHere" style="background-color:#ffffcc;border:solid;"> </div>
<br>
<br>
<form id="htmlForm" name="htmlForm" action="#" method="get">
<select id="elementList" name="elementList">
<option>B</option>
<option>BIG</option>
<option>CITE</option>
<option>CODE</option>
<option>EM</option>
<option>H1</option>
<option>H2</option>
<option>H3</option>
<option>H4</option>
<option>H5</option>
<option>H6</option>
<option>I</option>
<option>P</option>
<option>U</option>
<option>SAMP</option>
<option>SMALL</option>
<option>STRIKE</option>
<option>SUB</option>
<option>SUP</option>
</select>
<input type="text" name="elementText" id="elementText" value="default">
<input type="button" value="添加元素" onclick="addElement();">
<br><br>
<input type="button" value="插入HR" onclick="addEmptyElement('HR');">
<input type="button" value="插入BR" onclick="addEmptyElement('BR');">
<input type="button" value="删除元素" onclick="deleteNode();">
<input type="button" value="显示HTML" onclick="showHTML();">
</form>
<script language="javascript">
<!--
function addElement(){
var choice=document.htmlForm.elementList.selectedIndex;
var theElement=document.createElement(document.htmlForm.elementList.options[choice].text);
var textNode=document.createTextNode(document.htmlForm.elementText.value);
var insertSpot=document.getElementById('addHere');
theElement.appendChild(textNode);
insertSpot.appendChild(theElement);
}
function addEmptyElement(elementName){
var theBreak=document.createElement(elementName);
var insertSpot=document.getElementById('addHere');
insertSpot.appendChild(theBreak);
}
function deleteNode(){
var deleteSpot=document.getElementById('addHere');
if(deleteSpot.hasChildNodes()){
var toDelete=deleteSpot.lastChild;
deleteSpot.removeChild(toDelete);
}
}
function showHTML(){
var insertSpot=document.getElementById('addHere');
if(insertSpot.innerHTML)
alert(insertSpot.innerHTML);
else
alert("not easily performed without innerHTML");
}
//-->
</script>
</body>
</html>
１２.４.３ DOM遍历API
在DOM第二层中引入了DOM遍历API的概念，这个概念提供了一种方法，用来对document树中的结点进行遍历和检测，。这里介绍NodeIterator和:TreeWalker对象。
12.4.4 DOMRange选择
DOM第二层提供了另一个很有用的扩展即DOMRangeAPI，允许选择文档目录的排列。
var myRange=document.createRange();
range对象创建后，可以使用myRange.setStart()方法，myRange.setEnd()方法，myRange.setStartBefore(),myrange.setStartAfter(),myRange.setEndBefore(),myRange.setEndAfter()等来设置开始点和结束点。
12.5 与DHTML相对的DOM
在DHTML中有很多对DOM的支持，本节介绍DOM对HTML元素内容的读取与修改。
12.5.1 innerHTML属性
该属性允许对HTML元素内容的简单读取和修改。可以显示相应部分的HTML代码。
也可以使用它来设置HTML元素的内容。
<html>
<head>
<title></title>
</head>
<body onload="document.testform.content.value=theElement.innerHTML;">
<div id="div1">this is a<em>test</em>of innerHTML;</div>
<script language="javascript">
var theElement=document.getElementById("div1");
</script>
<form name="testform" id="testform" action="#" method="get">
<input type="text" name="content" id="content" size="60">
<input type="button" value="设置" onclick="theElement.innerHTML=document.testform.content.value;">
</form>
</body>
</html>
12.5.2 其他类似属性
在IE中，还支持innerText,outerText,outerHTML.
12.5.3 document.all[]
在IE浏览器对象模型中，已经有大量的脚本代码，最具代表性的就是document.all[].在DOM下，可以使用document.getElementByTagName()方法来存取一个文档中所有的元素。然后创建一个实例属性性 document.all[].
第六章 JavaScript对象与数组
对象是JavaScript最基本的数据类型之一，是一种复合的数据类型，将多种数据类型集中在一个数据单元中。并允许通过对象名来存取这些数据的值。
对象使用运算符new来创建，在new之后必须有用于初始化对象的构造函数名，。
在建立新对象之前，需要通过构造其属性来定义对象，这一过程由定义函数名及其属性的函数来完成。
function Student(name,age,grade){
this.name=name;
this.age=age;
this.grade=grade;
}
利用该函数，可以用new语名来建立一个新的对象，student1=new Student(李明，16,3);
可以直接创建对象。如：
<!--对象创建与调用6.1.html-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
var book=new Object();
book.title="book1";
book.chapter1=new Object();
book.chapter1.title="第一章";
book.chapter1.pages=25;
book.chapter2={title:"第二章",pages:30};
alert("输出结果："+"\n\t\n\t"+book.title+"\n\t"+"chapter1:"+book.chapter1.title+"\n\t"+"chapter2:"+book.chapter2.title);
//-->
</script>
</body>
</html>
可以用delete语句来删除一个对象的属性。
6.1.2对象的方法
方法其实就是通过对象调用的JavaScript函数，可以将函数赋值给任何变量，甚至赋值给一个对象的任何属性，在方法的主体内部，关键词关键词this会变成调用该方法的对象，函数是存储在变量中的值，而这个变量也是全局对象的一个属性，因此，当调用一个函数，实际上是调用 的全局对象中的一个属性。
方法用来对this对象操作，函数通常是独立的并不需要使用this对象。
使用函数来定义和调用方法如：
<!--使用函数来定义和调用方法-->
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
<!--
//首先定义一些函数，它们将被作为方法使用
function RectangleArea(){return this.width*this.height;}
function RectanglePerimeter(){return 2*this.width+2*this.height;}
function RectangleSetsize(w,h){this.width=w;this.height=h;}
function RectangleEnlarger(){this.width*=2;this.height*=2;}
function RectangleShrink(){this.width/=2;this.height/=2;}
function Rectangle(w,h){
this.width=w;
this.height=h;
this.area=RectangleArea;
this.perimeter=RectanglePerimeter;
this.setsize=RectangleSetsize;
this.enlarger=RectangleEnlarger;
this.shrink=RectangleShrink;}
var r=new Rectangle(2,2);
var a=r.area();
r.enlarger();
var p=r.perimeter();
alert(p);
//-->
</script>
</body>
</html>
像上面的例子一样，如果用构造函数把方法赋值给要初始化的对象，那么，类的每一个对象都会有一个相同的方法属性副本，执行效率低，在JavaScript中，可以使用一种更为有效的方式，常量以及能被类的所有对象共享的属性。
每一个对象都有一个原型对象，而且一个对象可以继承其原型对象的所有属性，要为一个对象的类指定原型对象，需要将构造函数的prototype属性设置为当的对象。此后，当用构造函数初始化一个新对象时，JavaScript自动将该对象作为新建对象的原型对象。
6.1.5 构造函数与this关键字
对象实例由new关键字来创建，而不是由方法创建，也就是说，构造方法不用返回任何结果，因此，在构造方法中不要有返回结果的return.
如：
<!--this关键字的使用6.2.html-->
<html>
<head>
</head>
<body>
<script language="javascript">
<!--
function Student(name,age,sex)
{
this.name=name;
this.age=age;
this.sex=sex;
this.out=outfunc;
}
function outfunc(){
document.write(this.name+":"+this.age+" "+this.sex+";");
}
var student1=new Student("李明",18,"男");
student1.out();
//-->
</script>
</body>
</html>
JavaScript在HTML中的使用：
在网页文件的<script></script>标签对中直接编码
将程序代码放置在一个单独的文件中，在网页的适当位置引用这个文件
将程序代码作为某个元素的事件属性值，或超链接的href属性。
<script></script>可以出现在HTML文件中的<head></head>标签对中，也可以出现在<body></body>标签对中，在一个HTML中，可以使用多个<script></script>标签对。并且各段JavaScript代码之间可以相互访问，
<html>
<head>
<title>多段代码分开放置</title>
<style>
/*CSS部分*/
</style>
<link type="text/css" rel="stylesheet" href="1.1.css">
</head>
<body>
<h1>多段代码分开放置</h1>
这里是第一段代码：<br>
<script language="javascript">
<!--
var x=1;
document.write("<p>这段代码只输出这句话<p>");
//-->
</script>
这里是第二段代码：<br>
<script language="javascript">
<!--
document.write("X="+x+"<p>");
//-->
</script>
这里是第三段代码：<br>
<script language="javascript">
<!--
var y=2;
document.write("y="+y);
//-->
</script>
</body>
</html>
1.2.2代码屏蔽
有些浏览器不能够很好的支持JavaScript，可以将<script></scrpt>中的内容用HTML的注释标记(<!-- //-->)括起来，。
<script language="javascript">
<!--
alert(new Date());
//-->
</script>
这样支持<script>的浏览器将忽略嵌入在<script></script>中的HTML注释符。当用户浏览器不支持或禁用JavaScript时，如果还想在页面显示一些内容，可以使用<noscript></noscript>标签对，用来显示内容，两者不会同时显示出来。
<!--1.2.html-->
<html>
<head>
<title></title>
<style>
</style>
<link type="text/css" rel="stylesheet" href="1.2.css">
</head>
<body>
<h1><Script>与<noscript></h1>
<script language="javascript">
<!--
var a;
a="这是使用<script>定义的内容";
document.write(a);
//-->
</script>
<noscript>
这是使用<noscript>定义的内容。
</noscript>
</body>
</html>
1.2.3在单独文件中使用
可以将脚本文件放置在一个单独的文件中，以.js扩展名结尾，称为JavaScript脚本文件。
<script src="script.js" language="javascript"></script>
与将脚本放在<script></script>中的效果是一样的。
如：有一名为1.3.js的文件，内容如下：
document.writeln('<h1>这是使用外部JS文件生成的行</h1>');
<!--1.3.html-->
<html>
<head>
<title></title>
<style>
</style>
<link type="text/css" rel="stylesheet" href="1.3.css">
<script src="1.3.js" language="javascript">
</script>
</head>
<body>
</body>
</html>
1.2.4作为属性使用
HTML中的超链接标签<a>的href属性值除了可以使用HTTP，mailto等协议外，还可以使用JavaScript。
<a href="javascript:alert(new Date());">JavaScript</a>
JavaScript扩展了标准的HTML，如下一段代码：
<input type="button" value="test" onlick="alert(new Date());">
注意，用作URL的JavaScript代码前要加JavaScript，以说明用的是JavaScript协议，而事件属性中的JavaScript前不需要加JavaSCript。
1.3 JavaScript基本语法
执行顺序：JavaScript按照在HTML中出现的顺序执行。
JavaSCript对大小写敏感。
HTML不区分大小写。
JavaScript忽略空格，制表符或换行符。
语句与分隔符，块
注释: // /* */
为程序添加注释可以起到两个作用：
第一是解释程序的功能，使程序易于理解。
第二是暂时屏蔽某些语句，等到需要时再取消注释。
JavaScript可以识别HTML注释的开始部分，<!--将其作为单行注释来看待，由于它的特别作用，在使用时应当将其放在脚本的第一行。
第二章 数据类型与变量
JavaScript的数据类型分基本数据类型和复和数据类型，复合数据类型主要有对象，数组与函数。基本数据类型有：数值数据类型，字符串型，逻辑数据类型以及两个特殊数据类型。
数值型：十进制，八进制，十六进制。
特殊值Infinity：当一个数值或或数值表达式的值超出了可表示的最大值的范围，即无穷大。相同的道理，负无穷大：-Infinity
特殊值NaN：含义表示not a number,NaN是唯一一个不可以和自身比较的值。例如：当进行0、0或Infinity求正弦时，结果都为NaN。
<script language="javascript">
<!--
var x=0/0;
if(x!=x)
alert(x);
if(isNaN(x))
alert("x is NaN");
//-->
</script>
Number对象中有关特殊值的属性列表：Number.MAX_VALUE：可表示的最大值
Number.MIN_VALUE:可以表示的最小值
Number.POSITIVE_INFINITY:无穷大
Number.NEGTIVE_INFINITY:无穷小
一个正数被0除是Infinity，一个负数被0除是-Infinity。0/0为NaN。
字串型：
字符串是一组被引号括起来的文本，JavaScript中不对字符与字符串区分 ，字符串是与String对象关联的。可以用charAt()从字符串中提取字符。如：
var myname="thomas";
var thirdletter=myname.charAt(2);
也可以使用length（）方法来求字符串的长度。
Boolean值
<!--2.1.html-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
if(navigator.cookieEnabled)
alert("ok");
else
alert("not ok");
//-->
</script>
</body>
</html>
特殊数据类型：包括undefined null
undefined用来表示不存在的值或者尚未赋值的变量，对一个变量只声明不赋值，或赋值为一个不存在的值。null表示该变量被赋值给了一个空值。
变量：
JavaScript是无类型的，这就意味着JavaScript的对象可以存储任何数据。
变量使用var来声明，使用var语句多次声明同一变量也是允许的，相当于对变量的重新赋值，。
JavaScirpt中，变量基本上和对象的属性是一样的，当JavaScript解释器开始运行时，全在执行任何代码之前创建一个全局对象，该对象的属性就是全局变量。
在声明一个全局变量时，实际上是定义该全局对象的一个属性，所有预定义的函数和属性也都是该全局对象的属性，在顶层代码中，可以使用关键词this来引用该全局对象。
局部变量也是一个对象的属性，这个对象叫做调用对象。
JavaScript每次开始执行一个函数时，都会为该函数创建一个执行环境，。
JavaScript提供一个运算符===，只有在两个操作数数值相等并且类型也相同时结果才为真。
2.4.2提升基本数据类型为对象
每一个基本数据类型都存在一个相应的对象，该对象提供很多很有用的方法来处理数据，在需要时，JavaScript会自动把基本数据类型转化为与之相应的对象，除自动转化外，还可以手动转化。如toString(),parseInt(),parseFloat();
2.5.5字符串的特殊性
在复制和传递字符串时使用的是引用，而对字符串进行比较时使用的却是值。
第三章 运算符和表达式
逗号运算符
void运算符用来指明一个表达式无返回结果。
typeof运算符返回一个字符串，用来指明其操作数的数据类型。
对象运算符：
运算符.用来连接对象其属性和方法。如：document.lastModified
运算符new用来创建对象。
运算符delete用来移除对象的属性或者移除数组元组。
第四章 基本的流程控制语句
第五章 函数
5.1.1
定义函数要使用function关键字，语法规则如下：function 函数名(){};
在其它语言中，可以定义指向函数的指针，以后就可以用该指针变量来调用 其指向的函数，JavaScript创建类似的方法来创建动态函数。
var 变量名=new Function();
参数列表中的所有参数都是字符串类型，并且最后一个字符串是这个函数的功能程序代码。
第八章 正则表达式
元字符?与()
?表示紧靠其前的元素项是可选的，。abc?可以匹配abc与ab.
用（）表示子匹配。
例如：要匹配两个相同的连续数字字符的正则表达式是(\d)\1.要匹配5个相同的数字字符的正则表达 式为(\d)\1{4};
要匹配1221，2334，这样的数字的正表达式是(\d)(\d)\2\1
a(bc)可以匹配abc与a.
RegExp对象：
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能，每一个正则表达式对应一个RegExp实例。
有两种可以创建RegExp对象的实例的方法：
显示构造：new RegExp("pattern",[flags]);
隐式构造：/pattern/[flags];
flags部分设置表达式的标志信息，是可选项。g是全局标志。如果不设置这个标志，则仅搜索和替换最早匹配的内容 ，i是忽略大小写标志，m是多行标志。
如：
<!--创建正则表达式-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
var mystring="这是第一个正则表达式的例子";
var myregex=new RegExp("一个");
if(myregex.test(mystring))
document.write("找到了指定模式");
else
document.write("没有找到指定模式");
//-->
</script>
</body>
</html>]
由于JavaScript中的\是一个转义字符，因些，使用构造函数创建RegExp对象时，应将原始正则表达式中的\用\\替换。
RegExp对象的属性：
RegExp对象的属性分为静态和实例属性。
test方法：检查一个字符串中是不是存在创建RegExp对象实例 所指定的表达式模式。
exec方法：对一个字符串进行搜索，并返回一个包含搜索结果的数组。
String的相关方法：match,search,replace.
split方法：该方法返回按照某种分割标志将一个字符串拆分成若干个子字符串所产生的子字符串数组。
如：
<!--8.8.html-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
var splitArray=new Array();
var string="太平洋，大西洋，印度洋，北冰洋";
var regexp=/，/;
splitArray=string.split(regexp);
for(var i=0;i<splitArray.length;i++){
document.write(splitArray[i]+"\n"+"<br>");
}
//-->
</script>
</body>
</html>
8.7限定符与选择匹配符：
用{n}限定连续出现的次数
用{n,}限定至少出现的次数
{n,m}用来限定最少与最多出现的次数
用+限定必须出现一次或连续多次
用*号来规定前面的元素或组合项可以出现多次或零次。
用？表示前面的元素或组合可以出现零次或一次。
默认情况下，正则表达式使用最长匹配原则，例如：要将zoom中匹配zo?的部分替换成为 r,替换后的结果为rom.
当字符?紧跟在其他任何限定符（*,+,?,{n},)后，匹配模式 变成最短匹配原则。在fooood中，fo+?匹配fo.
用选择匹配进行匹配选择，
选择匹配符只有一个，就是“|"字符。用于选择匹配两个选项之中的任意一个。
8.8 分组组合与反向引用符
分组组合是将表达式在某部内容组合起来的符号，反向引用符则是用于匹配分组组合捕获到的内容的标识符。
使用/\b([a-z])+)\1\b/g匹配所有连续重复的单词部分。
\b用于匹配单词的边界。
非捕获匹配：?:pattern
正向预测先行匹配：?=patern
反向预测先行匹配?!pattern
8.9特殊字符与字符匹配符
【 】匹配方括号中包含的字符集中的任意一个字符
[^]用来匹配方括号没有包含的任意字符
[a-z]用来匹配指定范围内的字符
\d匹配任意一个数字
\D匹配任意一个非数字字符
\s匹配任意一个空白字符
\S匹配任意一个非空白字符
\w匹配任意英文字母和数字类字符以及下划线
\W 匹配任何非英文字母和数字符
.匹配任意单个字符
8.10 定位符与原义字符
用^匹配目标字符串的开始位置
用$匹配目标字符串的结尾位置
用\b匹配一个字边符
用\B匹配非字边符
8.11 实用举例
匹配中文字符的正则表达式：[u4e00-u9fa5]
匹配双字节字符:[^x00-xff]
匹配HTML标记的正则表达式：
/<(.*)>.*</1)|<(.*)/>/
匹配网址URL：http"//([w-]+.)+[w-]+(/[w-./?%&=]*)?
用正则表达式限定只能用输入中文：
onkeyup="value"=value.replace(/[^u4e00-u9fa5]/g,' ');
第十章 键盘和鼠标事件处理
键盘和鼠标事件处理功能非常强大，在网页设计中经常用到。这一章将介绍相关的内容。
10.1事件处理
在本节给出一个例子，当用户在Web页面中单击鼠标左键时，程序要能够报告鼠标所在的位置，当和户释放鼠标键时，需要报告鼠标键已经弹起，如果用户在按下三个功能键的同时再按下鼠标键，也应当给出详细的报告。
在实际应用中，鼠标右键对程序控制来说是没有用的，因为浏览器已经预先将其设置为与上下文内容相关的帮助键。
10.1.1 在Netscape浏览器中使用鼠标事件
document.onMouseDown=mouseDownHandler;
document.onMouseUp=mouseUpHandler;
一个Netscape浏览器的Event类型的对象传给鼠标事件的处理函数，可以从该对象中获得鼠标的位置信息以及按键信息，鼠标在该页面中的位置信息存放在属性pageY,pageX,中。Event对象的所有属性如下：
type 事件类型
layerX 在事件发生的层中光标的水平位置，以像素为单位
layerY 在事件发生的层中光标的垂直位置，
pageX 光标在页面中的水平位置
pageY 光标在页面中的垂直位置
screenX 光标在屏幕上的水平位置
screenY 光标在屏幕上的垂直位置
which 被按下的鼠标键或键盘按键的ASC码
modifiers 与鼠标和按键组合按键。
data 一个字符串数组，与拖动事件一起使用，包含被拖动对象的URL
10.1.2 在IE中使用鼠标事件
在IE浏览器中处理鼠标事件是完全不同的，为了在文档中捕捉鼠标事件，必须将鼠标事件写入到body标签中。必须通过查看Event对象的来确定鼠标所在的位置，面Event对象是Window对象的一个成员对象，其属性如下：
altKey alt键按下时为真
shiftKey Shift键按下时为真
ctrlKey Ctrl键按下时为真
button 确定是哪个鼠标键被按下
cancelBubble 表明该事件是不是应沿事件层次向上移
clientX 相对用户区域的X坐标
clientY 相对用户区域的Y坐标
keyCode 按键的代码
offsetX 相对容器的坐标X
offsetY 相对容器的坐标Y
returnValue 事件返回值
screenX 相对屏幕的X
screenY 相对屏幕 的Y
fromElement 被移动的元素
sreElement 产生该事件的元素
srcFilter 如果有FilterChange事件发生，则过滤该事件
toElement 正在移动的元素
type 以字符串形式返回事件类型
x 在页面中的X
y 在页面中的Y
reason 数据传输的部署
10.1.5 确定用户使用的是哪一种浏览器
要确定用户使用的是哪一种浏览器，只需检查浏览器的navigator对象即可。该对象有一个名为appName的属性，在IE中的值为Microsoft Internet Ｅｘｐｌｏｒｅｒ，而在Netscape中的值为Netscape.
如下为程序的完整代码：
<!--鼠标事件处理-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
document.onMouseDown=mouseDownHandler;
document.onMouseUp=mouseUpHandler;
function mouseDownHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="单击鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且单击鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}
function mouseUpHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并松开鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="松开鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且松开鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时松开鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}
//-->
</script>
</head>
<body onmousedown="mouseDownHandler();" onmouseup="mouseUpHandler();">
<center>
<form name=form1>
<h1>鼠标事件处理示例</h1><br>
<h2>请按Shift或Ctrl或Alt再单击鼠标左键</h2><br>
<a href="#" onmouseover="mouseDownHandler();"onmouseout="mouseUpHandler();">请将鼠标移到此链接</a>
<br><br>
<input type="text" name="Textbox" size=60>
</form>
</center>
</body>
</html>
10.2 页面预览
在有些网页上会看到这样的效果：当鼠标移至某个超链接时，会在页面的位置显示要链接页面的缩略图，本节就介绍这种效果的实现方法，在页面中显示5个超级链接和一幅图像，如果用户将鼠标移至某个超级链接上时，页面中的图像将用链接页面的缩略图来显示，如果将鼠标移至另一超级链接上时，将显示新的链接页面的缩略图。
代码如下：
<html>
<head>
<title>超级链接页面预览</title>
</head>
<body>
<center>
<form name="form1">
<h1>将光标移至超链接上查看页面预览</h1>
<a href="example1.html" name=link1 onmouseover="link1over()">这是链接一</a><br><br>
<a href="#" name=link2 onmouseover="link2over()">这是链接二</a><br><br>
<a href="#" name=link3 onmouseover="link3over()">这是链接三</a><br><br>
<a href="#" name=link4 onmouseover="link4over()">这是链接四</a><br><br>
<a href="#" name=link5 onmouseover="link5over()">这是链接五</a><br><br>
<img name="img1" src="391.jpg" >
</form>
</center>
<script type="text/javascript">
<!--
function link1over(){
document.form1.img1.src="391.jpg"
}
function link2over(){
document.form1.img1.src="392.jpg"
}
function link3over(){
document.form1.img1.src="398.jpg"
}
function link4over(){
document.form1.img1.src="399.jpg"
}
function link5over(){
document.form1.img1.src="400.jpg"
}
//-->
</script>
</body>
</html>
10.3 图像切换
本节将要展示这样一种效果，页面中显示一幅图像，当鼠标移动到该图像上时，程序将该图像替换为另一幅图像。当鼠标离开时，又恢复为原来的图像。尽管在超级链接上，Netscape Navigator浏览器支持mouseover,mouseout,但是在图像上支持。为此，可以将图像嵌入到一个空链接上。从而让鼠标事件可以被调用 。
<html>
<head>
<title></title>
</head>
<body>
<center>
<form name=form1>
<h1>移动鼠标进行切换</h1>
<a href="" name=link1 onmouseover="imgover()" onmouseout="imgout()">
<img name="img1" src="400.jpg" >
</a>
</form>
</center>
<script language="javascript">
<!--
function imgover(){
document.form1.img1.src="399.jpg";
}
function imgout(){
document.form1.img1.src="400.jpg";
}
//-->
</script>
</body>
</html>
10.4 接受键盘输入
在本节将创建这样一个接受键盘输入的例子，当用户键入文本时，字符将在文本框中显示出来。文本框没有焦点属性，因此文本框并非亲读取按键。一量用户按下按键，程序将直接读取。并将其放入到文本框。
10.4.2 在NetScape中读取按键
对于NetScapt浏览器，使用enent对象的which属性来读取按键的ASC码值。然后要转换该按键的代码，使其可以在文本框中显示，可以使用unescape()方法来实现些功能，该方法的参数是"%"加上按键的十六进制ASC码。且该方法将此字符串转换成一个字符，这样一来。就必须将按键代码表示为字符串格式的十六进制，这里使用Number对象的toString()方法来实现。
10.4.3 在IE浏览器中读取按键
在IE浏览器中，可以通过window.evet对象的keyCode属性来读取按键，通过使用IE浏览器中String类的fromCharCode()方法，可以将按键转换成字符串，并将其值存入inString字符串。然后，再像前面那样，将该字符串在文本框中显示出来。
代码如下：
<html>
<head>
<title></title>
</head>
<body onkeypress="keyPress()">
<center>
<form name=form1>
<h1>接收键盘输入实例</h1>
<h7>请随意在下面的文本框中输入一些字符</h7>
<br><br>
<input name="textbox" bype="text" size=40>
</form>
</center>
<script type="text/javascript">
<!--
document.onKeyPress=keyPress;
var inString=" ";
function keyPress(e){
if(navigator.appName=="NetScape"){
var keyCode=new Number(e.which);
inString+=unescape("%"+keyCode.toString(16));
document.form1.textbox.value=inString;
}
if(navigator.appName=="Microsoft Internet Explorer"){
inString+=String.fromCharCode(window.event.keyCode);
document.form1.textbox.value=inString;
}
}
//-->
</script>
</body>
</html>
10.5 用鼠标点亮文本
在网络中经常会看到，当鼠标移动到某页面上的超级链接时，链接的文字会变大，颜色也随之变化，这种效果在IE中常 见。本节介绍这种效果的实现方法。代码如下：
<html>
<head>
<title></title>
</head>
<body>
<center>
<form name="form1">
<h1>移动鼠标至超级链接以查看效果</h1>
<a href="#" name="link1" onmouseover="link1over()" onmouseout="link1out()">这是链接一</a>
</form>
</center>
<script type="text/javascript">
function link1over(){
link1.style.color="red";
link1.style.fontSize=36;
}
function link1out(){
link1.style.color="black";
link1.style.fontSize=16;
}
</script>
</body>
</html>
10.6 鼠标根随
鼠标跟随产效果也是网页中经常见到的一种效果，实现这种效果的关键是要获取鼠取鼠标的当前位置坐标。并与要跟随的图片，文字所在<div>的坐标关联在一起。这样，当鼠标位置发生变化时，要跟随的位置也发生变化。
10.6.1 图片跟随鼠标
10.7 鼠标感应
弹出警告框
经常可以见到在页面上显示一段文字，当鼠标指向文字时，会弹出一个警告框。实现这种效果的方法非常简单，。
渐显图片
看起来很模糊的图片，鼠标指向该图片后，立刻变清晰。要实现这种效果，需要获取鼠标的。代码如下：
<html>
<head></head>
<body>
<h1>鼠标感应。</h1>
<img src="398.jpg" style="filter:alpha(opacity=20)" onmouseover="makevisible(this,0);" onmouseout="makevisible(this,1)">
<script language="javascript">
function makevisible(cur,which){
if(which==0)
cur.filters.alpha.opacity=100;
else
cur.filters.alpha.opacity=20;
}
</script>
</body>
</html>
10.10禁用鼠标右键菜单
经常可以见到在有的网页上，当单击鼠标右键时，或者没有任何反应，或者弹出一个警告框。代码如下：
<html>
<head></head>
<body onmousedown="click()">
<h1>禁用鼠标右键菜单</h1>
<script language="javascript">
function click(){
if(event.button==2){
alert("你想看什么");
}
}
document.onmousedown=click;
</script>
</body>
</html>
第十一章 对象模型
对象模型定义了浏览器和文档可以被JAvaScript操作的一些特征。本章介绍最基本的对象模型，高级事件模型。将在下一章介绍
11.1 对象模型的概念
本节介绍JavaScript对象模型的基础性概念，包括对象模型基本结构和初始化对象模型。
对象模型是描述对象结构的接口。从JavaScript对象模型的示意图中可以看出：JavaScript对象模型由四部分组成，
第一部分：JavaScript核心语言，声明，运算符，表达式，数据类型。
第二部分：基于数据类型的基本对象，String，Date,Math。
第三部分：浏览器对象，Window，Navigator,Location.
第四部分：文档对象，Document，Form，Image.
其中，前两部分已经介绍，以后的章节主要介绍浏览器对象和文档对象。
11.1.2 初始对象模型
Window对象定义了与浏览器相关联的属性和方法，。在通常 情况下可以认为是对当前Window对象进行操作，所以可以省略Window.
浏览器对象的核心对象：
window 关联当前浏览器窗口
document 包含各类HTML属性与文本片断的对象
frames[] Window对象包含的框架数组，每个框架依次引用另外的Window对象，该对象可包含更多框架
history 包含了当前窗口的历史记录列表，即用户最近浏览的各类URL信息记录
location 包含一个URL及其片断表单的可见文本
navigator 描述浏览器的基本特征，类型，版本等的对象。
11.2 Document对象简介
在JavaScript对象中，Document对象是最常 用的对象，本节介绍该对象的常见用法。
11.2.1 Document对象的属性与方法
Document对象提供了一系列属性和方法，可以对页面元素进行属性设置。
Document对象的常见方法如下：
close() 关闭对文档的输入流
open() 打开文档准备输入
write() 向文档输入内容
writeln() 在文档中追加新行并输入内容
常用Document对象的属性
alinkColor:活动链接的颜色，默认为红色
anchors[]文档的锚对象数组
bgcolor 页面背景色
cookie 访问页面cookie的字符串
fgColor 文档内的颜色
forms[] 文档中包含表单元素的数组
LastModified 包含文档最后修改时间的字符串
links[] 文档中的链接的数组
linkColor: 没有访问的链接的颜色
location 包含文档中URL的字符串
referrer 包含指向自己访问过的文档内链接的字符串
Title 包含文档标题的字符串
URL 包含文档URL的字符串
vlinkColor 访问过的链接的颜色。
11.2.2 属性及方法的应用
<html>
<head>
<title>传统文档对象 测试</title>
<script language="javascript">
<!--
function showProps(){
var i;
document.write("<h4 align='center'>文档对象属性</h4><hr>");
document.write("<h5>基本页面属性</h5>");
document.write("URL="+document.URL+"<br>");
document.write("文档标题="+document.title+"; ");
document.write("文档最后编写时间="+document.lastModified);
document.write("<h5>页面颜色</h5>");
document.write("背景颜色等于"+document.bgColor+";nbsp;");
document.write("文本颜色是"+document.fgColor+"; ");
document.write("链接颜色是"+document.linkColor+"<br>");
document.write("活动链接颜色是"+document.alinkColor+"<br>");
document.write("访问过的链接颜色是"+document.vlinkColor+"<br>");
if(document.links.length>0){
document.write("<h5>链接</h5>");
document.write("#链接数="+document.links.length+"; ");
for(i=0;i<document.links.length;i++)
document.write("Links["+i+"]="+document.links[i]+"; ");
}
if(document.anchors.length>0){
document.write("<h5>锚</h5>");
document.write("#锚数="+document.anchors.length+"; ");
for(i=0;i<document.anchors.length;i++)
document.write("anchors["+i+"]="+document.anchors[i]+"; ");
}
if(document.forms.length>0){
document.write("<h5>表单</h5>");
}
}
//-->
</script>
<style>
body{background-color:white;
color:green;
}
:link{
color"red";
:visited{
color:#FFFF00;
}
h4{
text-align:center;
}
</style>
</head>
<body>
<h4>测试文档</h4>
<a href="http://www.print.com">链接一</a>
<a name="anchor1></a>
<a name="anchor2" href="http://www.javascript.com">链接二</a>
<form></form>
<form></form>
<script language="javascript">
showProps();
</script>
</body>
</html>
11.2.3 文档元素的按位置访问
在上面的代码中可以看到，可以使用类似forms[0]这样的方式来访问不同的表单，。如下：
window.document.forms[0].elements[0]
更好的方式是按名称来访问
11.4.2 文档元素的按名称访问
为了便于读取和操作，JavaScript允许对网页元素命名，基本方式是附加一个id属性，id属性几乎可以关联任何HTML元素。为元素命名后，就可以避免由于位置访问带来的错误，。为了保持旧版浏览器的兼容性，网页开发者必须小心使用name属性，为安全起见，在给网页元素命名时，可以同时使用name,id。只要使两者具有相同的值就可以了。
11.2.5 事件控制器
从前面的章节，您已经知道如何来访问表单对象，现在要介绍如何为用户活动监控这些对象，首要的方法就是通过事件控件器来响应用户操作。所谓事件控件器，就是一连串的JavaScript代码，例如，单击，提交等的操作。
11.3 组合应用
<!--元素属性综合运用-->
<html>
<head></head>
<body>
<form id="myform" name="myform" action="#" method="get">
<strong>请输入你的名字</strong>
<input type="text" id="username" name="username" size=20>
<br><br>
<input type="button" value="确定" onclick="sayHello();">
<script language="javascript">
<!--
function sayHello(){
var theirname=document.myform.username.value;
if(theirname!="")
alert("欢迎"+theirname+"访问");
else
alert("姓名为空，请重新输入");
document.myform.username.focus();
}
//-->
</script>
</form>
</body>
</html>
11.4 动态修改表单元素内容
使用JavaScript不仅可以对页面元素内容进行读取，而且可以改变其内容。
在以上的代码中，使用了window.document.colletionname的形式来访问网页元素，其中，collectionname是一个JavaScript对象数组，为些数组包括forms[],anchors[];links[];然而，支持W3C DOM的现代浏览器中，则不需要这样的形式。例如下面：
<p id="para"></p>
document.getElementById("para");
可以通过上述方式对标签访问，。实现了对该标签的访问，就可以使用已经定义的对属性值进行设置。
甚至可以通过style属性设置其CSS样式。
第十二章 文档对象模型DOM
文档对象模型DOM是一个基础性的概念，主要涉及网页页面元素的层次关系。很好地理解DOM对于编写出高效，实用的JavaSCript程序非常有帮助 的。
12.1 DOM概述
12.1.1 DOM分层
第0层：与上一章所讲相同。为经典JavaScrip对象模型。
第一层：提供了通过公用函数集来访问页面所有元素的功能。在该层次中，页面中的所有元素在任何时候都可以读写。
第二层：提供了更进一步的机制，可以访问包括XML，CSS等的页面元素。简称DOM2.
12.1.2 Document树
DOM有12种结点类型，但很多只与XML有关，下面为与HTML相关的结点类型：
1元素 ：一个XHTML或XML元素
2属性：一个元素的一个属性
3文本：附加在HTML或XML元素上的一段文本
8注释：一个HTML注释
9文档：即树中的顶层元素
10文档类型： 文档类型定义
12.2 访问元素
在DOM中，可以对页面元素进行访问，甚至是对其进行操作。本节介绍DOM中访问页面元素的方法。
12.2.2DOM结点属性：
nodeName: 包含结点名称
nodeValue: 包含了结点内部值，通常只用于文本结点
nodeType: 结点类型。对应于数字。
parentNode: 如果存在，指向当前结点的双亲结点
childNodes: 访问子结点列表
firstChild: 如果存在，则指向当前元素的第一个子结点
lastChild: 如果存在，则指向当前元素的最后一个子结点
previousSibling: 指向当前结点的前一个兄弟结点
nextSibling 指向当前结点的后一个兄弟结点
attributes: 元素的属性列表
ownerDocument 指向包含该元素的HTMLDocument对象
12.2.3 相邻结点检测
在上例中，事先知道某个结点的兄弟结点和子结点，若不知道某个结点的子结点时，可以使用hasChildNodes()方法，该方法返回一个Boolean值，指明当有结点是某有子结点。
if(current.hasChildNodes())
current=current.firstChild;
同样，当不知道结点的兄弟和双亲结点时，可使用如下形式：
if(current.parentNode)
current=current.parentNode;
文档树检测：
<html>
<head>文档树检测</head>
<body>
<h1>DOM Test Heading</h1>
<hr>
<p>a paragraph of <em>text</em> is just an example</p>
<ul>
<li><a href="#">链接</a></li>
</ul>
<form name="testform" id="testform" acton="#" method="get">
NodeName:<input type="text" id="nodename" name="nodename"><br>
NodeType:<input type="text" id="nodetype" name="nodetype"><br>
NodeValue:<input type="text" id="nodevalue" name="nodevalue"><br>
</form>
<script language="javascript">
<!--
var currentElement=document.documentElement;
update(currentElement);
function update(currentElement){
document.testform.nodename.value=currentElement.nodeName;
document.testform.nodetype.value=currentElement.nodeType;
document.testform.nodevalue.value=currentElement.nodeValue;
}
function nodeMove(currentElement,direction){
switch(direction){
case "previousSibling":
if(currentElement.previousSibling)
currentElement=currentElement.previousSibling;
break;
case"nextSibling":
if(currentElement.nextSibling)
currentElement=currentElement.nextSibling;
break;
case"parent":
if(currentElement.parentNode)
currentElement=currentElement.parentNode;
break;
case"firstChild":
if(currentElement.hasChildNodes())
currentElement=currentElement.firstChild;
break;
case"lastChild":
if(currentElement.haschildNodes())
currentElement=currentElement.lastChild;
break;
}
update(currentElement);
return currentElement;
}
//-->
</script>
<form action="#" method="get">
<input type="button" value="双亲结点" onclick="currentElement=nodeMove(currentElement,'parent');">
<input type="button" value="第一个子结点" onclick="currentElement=nodeMove(currentElement,'firstChild');">
<input type="button" value="最后一个子结点" onclick="currentElement=nodeMove(currentElement,'lastChild');">
<input type="button" value="后一个兄弟结点" onclick="currentElement=nodeMove(currentElement,'nextSibling');">
<input type="button" value="前一个兄弟结点" onclick="currentElement=nodeMove(currentElement,'previousSibling');">
<input type="button" value="返回根结点" onclick="currentElement=document.documentElement;update(currentElement);">
</form>
</body>
</html>
12.3 结点
有了前面对DOM树的了解，本节介绍对结点的操作。主要包括创建结点，结点的插入，添加，以及结点的删除与替换。
12.3.1 创建
用来创建结点的DOM方法：
createAttribute(name) 创建一个由name指定的元素名称，很少用于已经有的元素，因为有预定义的属性名。可以直接进行操作
createComment(string) 创建一个由string指定的HTML或XML注释
createDocumentFragment() 创建一个包含结点信息的文档片断
createElement(tagName) 创建一个由字符串参数tagName指定的元素
createTextNode(string) 创建一个文本结点
例如：创建一个新结点和一个创建一个文本结点的代码如下：
newNode=document.createElement('p');
newText=document.createTextNode("something to add!");
12.3.2 插入和追加
Node对象有insertBefore（newChild,referenceChild)和appendChild(newChild)两个方法用来插入结点。
appendChild()方法作为某个结点的方法来调用，在该结点的子结点的结尾添加一个newChild.
insertBefore()方法指定在referenceChild之前插入一个newChild。在实际应用中，需要访问某个结点的双亲结点，以获得insertBefore（）方法的信息，。
可以使用appendChild（）方法将下面两个结点链接起来。
newNode.appendChild(newText);
结果是<b>something to add</b>
然后就可以将其插入到文档中适当位置。
如下所示：
<html>
<head>
</head>
<body>
<script language="javascript">
<!--
function makeNode(str){
var newParagraph=document.createElement("p");
var newText=document.createTextNode(str);
newParagraph.appendChild(newText);
return newParagraph;
}
function appendBefore(nodeId,str){
var node=document.getElementById(nodeId);
var newNode=makeNode(str);
if(node.parentNode)
node.parentNode.insertBefore(newNode,node);
}
function insertWithin(nodeId,str){
var node=document.getElementById(nodeId);
var newNode=makeNode(str);
node.appendChild(newNode);
}
function appendAfter(nodeId,str){
var node=document.getElementById(nodeId);
var newNode=makeNode(str);
if(node.parentNode)
if(node.nextSibling)
node.parentNode.insertBefore(newNode,node.nextSibling);
else
node.parentNode.appendChild(newNode);
}
//-->
</script>
<h1><center>插入与追加</center></h1>
<hr>
<div style="background-color:gray;">
<div id="innerDiv" style="background-color:red;"></div>
</div>
<hr>
<form id="form1" name="form1" action="#" method="get">
<input type="text" id="field1" name="field1">
<input type="button" value="前插入" onclick="appendBefore('innerDiv',document.form1.field1.value);">
<input type="button" value="中插入" onclick="insertWithin('innerDiv',document.form1.field1.value);">
<input type="button" value="后插入" onclick="appendAfter('innerDiv',document.form1.field1.value);">
</body>
</html>
12.3.3 结点复制
有时候，不想创建或插入一个全新的元素，可以使用cloneNode（）方法创建某个结点的一个副本。该方法捕获一个Boolean值，用来指定该副本是包含结点的所有子结点。（称为深度复制，还是只包含该结点本身。即该方法获取一个参数。Boolean值。用来指定是深复制还是只包含该结点本身。
12.3.4 删除与替换
经常会遇到从树中删除一个结点的情况，Node对象提供了一个removeChild(child)方法来实现结点的删除。其中的参数是要删除的结点。例如：
current.removeChild(current.lastChild);
该代码会删除指定结点的最后一个子结点，removeChild()方法返回删除的Node对象
此外，还可以使用replaceChild(newChild,oldChild)方法实现对结点的替换，其中的newChild为替换后的结点，替换后，旧内容将被删除。
<html>
<head>
<title></title>
</head>
<body>
<div id="toDelete">
<p>this is a paragraph</p>
<p>this is <em>another pagraph</em> to delete</p>
<p>this is yet another paragraph</p>
</div>
this paragraph has an <em id="toReplace">em element</em> in it;
</p>
<hr>
<form action="#" method="get">
<input type="button" value="delete" onclick="doDelete();">
<input type="button" value="replace" onclick="doReplace();">
</form>
<script language="javascript">
<!--
function doDelete(){
var deletePoint=document.getElementById("toDelete");
if(deletePoint.hasChildNodes())
deletePoint.removeChild(deletePoint.lastChild);
}
function doReplace(){
var replaces=document.getElementById("toReplace");
if(replaces){
var newNode=document.createElement("strong");
var newText=document.createTextNode("strong element");
newNode.appendChild(newText);
replaces.parentNode.replaceChild(newNode,replaces);
}
}
//-->
</script>
</body>
</html>
12.3.5 结点修改
虽然元素属性可以修改，但是元素不能修改，如果要进行修改，应当改变结点本身。
对于下面的结点：
<p id="p1" >this is a test</p>
textNode=document.getElementById("p1").firstChild;
使用上面的方法对元素内部的文本结点访问，。可以使用length属性来设置文本结点的长度。
下面列出了处理文本结点用到的方法：
appendData(string) 由文本结点的结尾添加一个String指字的字符串
deleteData(offset,count) 删除从offset处开始由count指定的字符个数
insertData(offset,string) 在offset处插入文本
replaceData(offset,count,string) 用string文本替换自Offset处开始由Count指定的文本
splitText(offset) 从offset处开始将原文本结点一分为二，左半部分作为原结点内容，右半部分作为新的文本结点
substringData(offset,.count) 返回一个字符串
12.4 属性
12.4.1 属性使用
DOM支持很多关于属性操作的方法，由于数量多，用法简单，给出一示例程序。
<html>
<head>
<title></title>
</head>
<body>
<font id="test" size="2" color="red">Change my attrributes!</font>
<script language="javascript">
<!--
var theElement=document.getElementById("test");
//-->
</script>
<form name="testform" id="testform" action="#" method="get">
颜色<input type="text" size="8" value="" name="color" id="color">
<input type="button" value="设置颜色" onclick="theElement.setAttribute('color',document.testform.color.value);">
<input type="button" value="移除颜色" onclick="theElement.removeAttribute('color');">
<br>
字号：
<select onchange="theElement.setAttribute('size',this.options[this.selectedIndex].text);">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</form>
<script language="javascript">
document.testform.color.value=theElement.getAttribute("color");
</script>
</body>
</html>
12.4.2 DOM与HTML元素
由于很多对象属性与XHTML元素之间有着直接的映射关系，所以，要很好地掌握DOM，需要对XHTML语法有很好的理解。例如：
<html>
<head>
<title></title>
</head>
<body>
<h1 style="text-align:center;">简单的HTML编辑器</h1>
<br><br>
<div id="addHere" style="background-color:#ffffcc;border:solid;"> </div>
<br>
<br>
<form id="htmlForm" name="htmlForm" action="#" method="get">
<select id="elementList" name="elementList">
<option>B</option>
<option>BIG</option>
<option>CITE</option>
<option>CODE</option>
<option>EM</option>
<option>H1</option>
<option>H2</option>
<option>H3</option>
<option>H4</option>
<option>H5</option>
<option>H6</option>
<option>I</option>
<option>P</option>
<option>U</option>
<option>SAMP</option>
<option>SMALL</option>
<option>STRIKE</option>
<option>SUB</option>
<option>SUP</option>
</select>
<input type="text" name="elementText" id="elementText" value="default">
<input type="button" value="添加元素" onclick="addElement();">
<br><br>
<input type="button" value="插入HR" onclick="addEmptyElement('HR');">
<input type="button" value="插入BR" onclick="addEmptyElement('BR');">
<input type="button" value="删除元素" onclick="deleteNode();">
<input type="button" value="显示HTML" onclick="showHTML();">
</form>
<script language="javascript">
<!--
function addElement(){
var choice=document.htmlForm.elementList.selectedIndex;
var theElement=document.createElement(document.htmlForm.elementList.options[choice].text);
var textNode=document.createTextNode(document.htmlForm.elementText.value);
var insertSpot=document.getElementById('addHere');
theElement.appendChild(textNode);
insertSpot.appendChild(theElement);
}
function addEmptyElement(elementName){
var theBreak=document.createElement(elementName);
var insertSpot=document.getElementById('addHere');
insertSpot.appendChild(theBreak);
}
function deleteNode(){
var deleteSpot=document.getElementById('addHere');
if(deleteSpot.hasChildNodes()){
var toDelete=deleteSpot.lastChild;
deleteSpot.removeChild(toDelete);
}
}
function showHTML(){
var insertSpot=document.getElementById('addHere');
if(insertSpot.innerHTML)
alert(insertSpot.innerHTML);
else
alert("not easily performed without innerHTML");
}
//-->
</script>
</body>
</html>
１２.４.３ DOM遍历API
在DOM第二层中引入了DOM遍历API的概念，这个概念提供了一种方法，用来对document树中的结点进行遍历和检测，。这里介绍NodeIterator和:TreeWalker对象。
12.4.4 DOMRange选择
DOM第二层提供了另一个很有用的扩展即DOMRangeAPI，允许选择文档目录的排列。
var myRange=document.createRange();
range对象创建后，可以使用myRange.setStart()方法，myRange.setEnd()方法，myRange.setStartBefore(),myrange.setStartAfter(),myRange.setEndBefore(),myRange.setEndAfter()等来设置开始点和结束点。
12.5 与DHTML相对的DOM
在DHTML中有很多对DOM的支持，本节介绍DOM对HTML元素内容的读取与修改。
12.5.1 innerHTML属性
该属性允许对HTML元素内容的简单读取和修改。可以显示相应部分的HTML代码。
也可以使用它来设置HTML元素的内容。
<html>
<head>
<title></title>
</head>
<body onload="document.testform.content.value=theElement.innerHTML;">
<div id="div1">this is a<em>test</em>of innerHTML;</div>
<script language="javascript">
var theElement=document.getElementById("div1");
</script>
<form name="testform" id="testform" action="#" method="get">
<input type="text" name="content" id="content" size="60">
<input type="button" value="设置" onclick="theElement.innerHTML=document.testform.content.value;">
</form>
</body>
</html>
12.5.2 其他类似属性
在IE中，还支持innerText,outerText,outerHTML.
12.5.3 document.all[]
在IE浏览器对象模型中，已经有大量的脚本代码，最具代表性的就是document.all[].在DOM下，可以使用document.getElementByTagName()方法来存取一个文档中所有的元素。然后创建一个实例属性性 document.all[].
第六章 JavaScript对象与数组
对象是JavaScript最基本的数据类型之一，是一种复合的数据类型，将多种数据类型集中在一个数据单元中。并允许通过对象名来存取这些数据的值。
对象使用运算符new来创建，在new之后必须有用于初始化对象的构造函数名，。
在建立新对象之前，需要通过构造其属性来定义对象，这一过程由定义函数名及其属性的函数来完成。
function Student(name,age,grade){
this.name=name;
this.age=age;
this.grade=grade;
}
利用该函数，可以用new语名来建立一个新的对象，student1=new Student(李明，16,3);
可以直接创建对象。如：
<!--对象创建与调用6.1.html-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
var book=new Object();
book.title="book1";
book.chapter1=new Object();
book.chapter1.title="第一章";
book.chapter1.pages=25;
book.chapter2={title:"第二章",pages:30};
alert("输出结果："+"\n\t\n\t"+book.title+"\n\t"+"chapter1:"+book.chapter1.title+"\n\t"+"chapter2:"+book.chapter2.title);
//-->
</script>
</body>
</html>
可以用delete语句来删除一个对象的属性。
6.1.2对象的方法
方法其实就是通过对象调用的JavaScript函数，可以将函数赋值给任何变量，甚至赋值给一个对象的任何属性，在方法的主体内部，关键词关键词this会变成调用该方法的对象，函数是存储在变量中的值，而这个变量也是全局对象的一个属性，因此，当调用一个函数，实际上是调用 的全局对象中的一个属性。
方法用来对this对象操作，函数通常是独立的并不需要使用this对象。
使用函数来定义和调用方法如：
<!--使用函数来定义和调用方法-->
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
<!--
//首先定义一些函数，它们将被作为方法使用
function RectangleArea(){return this.width*this.height;}
function RectanglePerimeter(){return 2*this.width+2*this.height;}
function RectangleSetsize(w,h){this.width=w;this.height=h;}
function RectangleEnlarger(){this.width*=2;this.height*=2;}
function RectangleShrink(){this.width/=2;this.height/=2;}
function Rectangle(w,h){
this.width=w;
this.height=h;
this.area=RectangleArea;
this.perimeter=RectanglePerimeter;
this.setsize=RectangleSetsize;
this.enlarger=RectangleEnlarger;
this.shrink=RectangleShrink;}
var r=new Rectangle(2,2);
var a=r.area();
r.enlarger();
var p=r.perimeter();
alert(p);
//-->
</script>
</body>
</html>
像上面的例子一样，如果用构造函数把方法赋值给要初始化的对象，那么，类的每一个对象都会有一个相同的方法属性副本，执行效率低，在JavaScript中，可以使用一种更为有效的方式，常量以及能被类的所有对象共享的属性。
每一个对象都有一个原型对象，而且一个对象可以继承其原型对象的所有属性，要为一个对象的类指定原型对象，需要将构造函数的prototype属性设置为当的对象。此后，当用构造函数初始化一个新对象时，JavaScript自动将该对象作为新建对象的原型对象。
6.1.5 构造函数与this关键字
对象实例由new关键字来创建，而不是由方法创建，也就是说，构造方法不用返回任何结果，因此，在构造方法中不要有返回结果的return.
如：
<!--this关键字的使用6.2.html-->
<html>
<head>
</head>
<body>
<script language="javascript">
<!--
function Student(name,age,sex)
{
this.name=name;
this.age=age;
this.sex=sex;
this.out=outfunc;
}
function outfunc(){
document.write(this.name+":"+this.age+" "+this.sex+";");
}
var student1=new Student("李明",18,"男");
student1.out();
//-->
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript之动态网页编程之四
- JavaScript网页编程之------函数(一般函数、动态函数、匿名函数)
- CGI简介(Peercast使用的动态网页编程接口)
- 新手入门：学习掌握动态网页PHP的编程语句
- 提取javascript动态生存的网页
- 批处理解决ie不支持javascript及无法显示动态网页等问题[转]
- 【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
- JavaScript动态网页制作宝库
- 动态网页编程新手入门必读
- 学习掌握动态网页PHP的编程语句
- JavaScript与 HTML表单的交互过程，想要学习动态网页但是无从下手的新手看看。
- 由浅入深学习动态网页制作PHP的编程与应用(三）
- 由浅入深学习动态网页制作PHP的编程与应用(四-2）
- JAVASCRIPT实现网页动态鼠标跟随
- 动态网页编程中优化数据库注意的十大原则
- 由浅入深学习动态网页制作PHP的编程与应用(一）
- 读GI源码、学JS编程——Javascript动态加载技术。
- 由浅入深学习动态网页制作PHP的编程与应用(四-1）
- JavaScript网页脚本编程突击学习！
- JavaScript与 HTML表单的交互过程，想要学习动态网页但是无从下手的新手看看。