JavaScrip 初学笔记

1.JavaScrip 通常出现在</title>标签及</head>标签间。
example：
<html>
<head>
<title> blah blah blah </title>

<!-- hide this stuff from other browsers

alert("better, stronger, faster");

// end the hiding comment -->

</script>

</head>
<body>

2.当首次用一变量时，应以“var”申明.尽管以var 作为变量申明严格说并不必要，但这是
一个好习惯。

document.writeln()// 可用document.writeln() 来写文本和网页中的HTML。对于网页写入插入词。
在document.writeln()中可作大量细节之事，
但到此为止你只需记住你是在<script> 和
</script>标签之间，必须用document.writeln
("blah!")在网页中写HTML

引号中的字符显现出来；引号外的字符被认为是变量。

    注意在第一和第三行中，引号中的是我们想要
    显现的，而secs_per_year无引号。因此
JavaScript认为它是变量并交换成变量值。
幸好，在头文件中我们定义了secs_per_year
是一大数，因此可被显现，否则JavaScript
将报错。
    引号中的任何字都被称为字符串，JavaScript
不编译它。本例中使用的是双引号(")，也可
使用单引号(')，二者可互换。若第二行中的是
document.writeln("secs_per_year")，JavaScript
将直接将secs_per_year显现，而不是31,536,000.
    本例和字符的区别很重要，因此在我们继续下去
    之前，保证你已读懂了这段。
你可以用
document.writeln() 写HTML语言。

example:
<html>
<head>
<title> blah blah blah </title>

<!-- hide this stuff from other browsers

alert("better, stronger, faster");

// load up some variables

var secs_per_min = 60;

var mins_per_hour = 60;

var hours_per_day = 24;

var days_per_year = 365

// do some calculations

var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;

var secs_per_year = secs_per_day * days_per_year;

//这里介绍如何用JavaScript写变量和网页。

// here's how to use JavaScript to write out HTML

document.writeln("<b>The monkey dances ");

document.writeln(secs_per_year);

document.writeln(" seconds per year.</b><p>");

// end the hiding comment -->

</script>

</head>
<body>

string example :
<html>
<head>
<title> blah blah blah </title>

<!-- hide this stuff from other browsers

alert("better, stronger, faster");

// load up some variables

var secs_per_min = 60;

var mins_per_hour = 60;

var hours_per_day = 24;

var days_per_year = 365

// do some calculations

var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;

var secs_per_year = secs_per_day * days_per_year;

//这里介绍如何用JavaScript写变量和网页。

// here's how to use JavaScript to write out HTML

document.writeln("<b>The monkey dances ");

document.writeln(secs_per_year);

document.writeln(" seconds per year.</b><p>");

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";

var bad_monkey = "The monkey scowls at you and burps.";

document.writeln(nice_monkey+"<br>");

var monkey = prompt("What's the monkey's name?", "The monkey");//你可用prompt 来得到用户的输入反馈。
/*
这里我们称为用户反馈提示方式，当它被调用时，启动一个
对话框请求用户输入信息。用户完成后敲OK返回信息。在上
行中返回信息放入其变量中。
*/

var techy_monkey = monkey + bad_monkey ;

document.writeln(techy_monkey );

// end the hiding comment -->

</script>

</head>
<body>

3.if// 可用if-then-else 子句使你的JavaScript 依不同的用户反应给予不同的表现.
一个简单的 if-then 语句的例子

如果你在即时对话框中键入yes，你将在看到本页
其他部分前收到一个亲切的问候。若敲入别的则
没有。

这里是该语句的核心：

var monkey_love = prompt("Do you love the monkey?","Type yes or no");

if (monkey_love == "yes")

{

alert("Welcome! I'm so glad you came! Please, read on!");

}

第一行你见过。它唤起一个对话框并将用户的反馈调入
变量monkey_love中。但第二行就有些不同：它有个条
件，即如果变量monkey_love等于值"yes" ，则运行花
括号中的语句。若它等于其他值，则不运行。

注意该条件中的两个等于标记，这是人们容易搞混的
地方之一。如果你只用一个标记，实际上是告诉
JavaScript测试是否monkey_love等于 "yes"。
幸运的是，多数浏览器在你运行这些语句时会识别
这些错误并警告你。但最好现在开始就注意别犯这
种错误

其他重要的条件是：

(variable_1 > variable_2) is true if variable_1 is greater than variable_2

(variable_1 < variable_2) is true if variable_1 is less than variable_2

(variable_2 <= variable_2) is true if variable_1 is less than or equal to variable_2

(variable_1 != variable_2) is true if variable_1 does not equal variable_2

有两个方法可使你的条件更合理：

在运行花括号中的语句前如果你想要两件事为“是”，
可这样做：

if ((variable_1 > 18) && (variable_1 < 21))

{

document.writeln("variable_1 can vote, but can't drink.");

}

注意这里的两个“&&”在JavaScript中这是“与”的
意思。也注意整个子句有两个部分，&&须在圆括号中。

若想两件事之一为真，这样做：

if ((variable_1 == "bananas") || (variable_1 == "JavaScript"))

{

document.writeln("The monkey is happy because it has " + variable_1);

}
example :
<html>
<head>
<title> blah blah blah </title>

<!-- hide this stuff from other browsers

alert("better, stronger, faster");

// load up some variables

var secs_per_min = 60;

var mins_per_hour = 60;

var hours_per_day = 24;

var days_per_year = 365

// do some calculations

var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;

var secs_per_year = secs_per_day * days_per_year;

//这里介绍如何用JavaScript写变量和网页。

// here's how to use JavaScript to write out HTML

document.writeln("<b>The monkey dances ");

document.writeln(secs_per_year);

document.writeln(" seconds per year.</b><p>");

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";

var bad_monkey = "The monkey scowls at you and burps.";

document.writeln(nice_monkey+"<br>");

var monkey = prompt("What's the monkey's name?", "The monkey");
/*
这里我们称为用户反馈提示方式，当它被调用时，启动一个
对话框请求用户输入信息。用户完成后敲OK返回信息。在上
行中返回信息放入其变量中。
*/
if(monkey == "ni")
{
alert("Welcome! I'm so glad you came! Please, read on!");
}

var techy_monkey = monkey + bad_monkey ;

document.writeln(techy_monkey +"&nb " );

// end the hiding comment -->

</script>

</head>
<body>

4.链结事件// 在一个 href 中的onClick 和onMouseOver 可基于用户反应运行JavaScript 。
一旦用户点击一个链结，或将鼠标移到其上，
JavaScript发送一个链结事件。一种链结事件叫做
onClick, 当用户点击它时才发送。另一种叫onMouseOver.
用户将鼠标移到上面时即发送。

你可用这些事件来影响用户所见。这里是一个错误！超级链接引用无效。
错误！超级链接引用无效。，试一试，再瞧瞧源码，然后
我们来一行一行的复习。

第一个有趣的事情是没有<script> 标签。这是因为
出现在 onClick 和 onMouseOver引号中的任何事度
是可为JavaScripts编译的。事实上句末前的半括号
内允许你将JavaScripts写成一行，你可将整个
JavaScripts程序放在一个onClick的引号内，但
看上去会很难看。

请看第一行：

<a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a>

这就象一个正式的定位标签，但它具有神奇的onClick=""
这即说“当某人点击该链结时运行该引号中的JavaScripts”
注意在alert后有一有一中止性的半括号。

也请注意在href=""的引号中没有东西，这表明虽然有
链结，但当你点击时那儿也去不了。

下一行是：

<a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a>

这就象第一行，只是用onMouseOver代替onClick。

<!-- hide this stuff from other browsers

alert("better, stronger, faster");

// load up some variables

var secs_per_min = 60;

var mins_per_hour = 60;

var hours_per_day = 24;

var days_per_year = 365

// do some calculations

var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;

var secs_per_year = secs_per_day * days_per_year;

//这里介绍如何用JavaScript写变量和网页。

// here's how to use JavaScript to write out HTML

document.writeln("<b>The monkey dances ");

document.writeln(secs_per_year);

document.writeln(" seconds per year.</b><p>");

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";

var bad_monkey = "The monkey scowls at you and burps.";

document.writeln(nice_monkey+"<br>");

var techy_monkey = monkey + bad_monkey ;

document.writeln(techy_monkey +"&nb " );

// end the hiding comment -->

</script>

</head>
<body>
<br><a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a></br>
<br><a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a></br>
</body>

5.图片掉换
作者：Thau!

<a href="#" onMouseOver="document.the_image.src='button_d.gif';">change</a>

example :
<html>
<head>
<title> blah blah blah </title>

<!-- hide this stuff from other browsers

alert("better, stronger, faster");

// load up some variables

var secs_per_min = 60;

var mins_per_hour = 60;

var hours_per_day = 24;

var days_per_year = 365

// do some calculations

var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;

var secs_per_year = secs_per_day * days_per_year;

//这里介绍如何用JavaScript写变量和网页。

// here's how to use JavaScript to write out HTML

document.writeln("<b>The monkey dances ");

document.writeln(secs_per_year);

document.writeln(" seconds per year.</b><p>");

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";

var bad_monkey = "The monkey scowls at you and burps.";

document.writeln(nice_monkey+"<br>");

var techy_monkey = monkey + bad_monkey ;

document.writeln(techy_monkey +"&nb " );

// end the hiding comment -->

</script>

</head>
<body>
<br><a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a></br>
<br><a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a></br>
<br>
<img src="1.gif" name="the_image">

<a href="#" onMouseOver="document.the_image.src='2.gif';" onClick="document.the_image.src='1.gif';">change</a>

</br>
</body>

6.JavaScript Document Object Model，简写为DOM
(1)用target可以同一网页只打开一次
clicking on <a
href="yer_new_window.html" target="yer_new_window">this
link</a> will open another window.

重要的是要了解目标链接打开的窗口是上面名为"yer_new_window"相伴的窗口。
一旦你已经有了一个以"yer_new_window"作为目标的herf,那么，请先关闭它。
无论你在URL中置入何种链接，都将打开原来的窗口。

（2）
window.open("URL","name","features");

本语句以你调用时采用的第一个参数URL来打开一个窗口。这里是以URL，实际中可写成
"http: //www.hotwired.com/webmonkey/" 或其他类似的东西。

第二个参数是窗口的名字。这就象上页中我们看到的名字，如果你打开窗口时已有一个同名窗口打开，那么URL将把open语句送到原先已打开的窗口。

第三个参数， features，是一个窗口所具有的不同特征。这是个可选参数，我们先做关于头两个参数的练习。

语句的首行：

<a href="#"

onClick="window.open('javascript_window_1.html','javascript_1');">Here's
a window named javascript_1</a>.

当你点击该链接时一个名为javascript_1 的窗口打开，其中出现javascript_window_1.html的网页。由于参数features 是可选的，我们先不理会它。

注意这里我是用onClick来调用打开窗口的。你大棵不必将window.open()放在onClick中调用窗口，这很容易办到。一会你将看到在<script>标签中的windows.open()例子。

第二个例子与第一个几乎一样的，它只是以不同的名字打开一个窗口及调用到不同的HTML页中。

<a href="#"

onClick="window.open('javascript_window_2.html','javascript_2');">Here's
a window named javascript_2</a>.

第三个链接将一个新的HTML 页放到第一个窗口中。这是由于你要打开的窗口和第一个链接重名：都叫javascript_1.

<a href="#"

onClick="window.open('javascript_window_3.html','javascript_1');">Here's
another HTML page going into javascript_1</a>.
（3）
window.open()中的第三个参数是你想要你的窗口表现的一组特性。如果你不完全确定你的参数，则以用户浏览器的缺省值替代。

然而，如果你指定了一些特性参数，则窗口将以参数设定值规定的出现。特性参数是以一组逗号分隔的序列出现的。

例如，如果你是这么写的：

window.open("some_url","window_name","location,menubar");

你将得到一个规定了URL，窗口名及菜单条（文件，编辑条等等）的窗口。注意别在字符串中加入任何空格，这将使得有些浏览器出错。

看一下另一个例子：

window.open("some_url","window_name","location,height=100,width=100");

这将打开一个高宽各为100像素的窗口。再次请注意别在字符串中加空格。

这里是一组可以在字符串中引用的特性参数：

menubar
（菜单条）
    这是个在大多数软件应用中都引用的函数行。一般包括有文件，编辑及其他一些条目。
status
（状态条）
    这是位于你的窗口下部的信息条。当你的鼠标移到一个链接上时，链接的URL就在这个状态条上出现。你可以将状态条上显示的内容搬到一个滚动的marquee 中去。我不打算为你做这个示例，如果你想知道怎样做，自己设法解决！
scrollbars
（滚动条）
    当需要时允许滚动条出现。
resizable
（重调）
    当重调参数被列出，窗口将可被重调。注意它的拼法，我就经常搞错。
width
（宽度）
    以像素点表达的窗口宽。
height
（高度）
    以像素点表达的窗口高。
toolbar
（工具条）
    Home button, among others.
浏览器工具条，包括后退，前进钮，停止钮，以及HOME钮等等。
location
（定位区）
    你可以键入URL 的浏览器文本区。
directories
（指示区）
    如Netscape浏览器中所在的"What's new," "What's cool,"等等。

（4）
窗口之间的交流
作者：Thau!
尽管将一个窗口模糊或聚焦并没有多大意义，但有时候你确实
需要将另一个窗口移到前台。为了使用javascript实现窗口
之间的交流，你需要对该窗口最一个引用。

错误！超级链接引用无效。

首先，我打开一个窗口，为其赋予一个引用：

var new_window = window.open("hello.html","html_name","width=200,height=200");

该语句打开一个小窗口并将其赋值给变量new_window作为对
该窗口的引用。变量可以包含数字和字符串，也可以包含对对
象的引用，在本例中，对象是一个窗口。现在变量
new_window就可以象当前窗口那样使用。你可以象对窗口调
用方法那样对new_window调用方法。

下面的语句是一个对new_window调用方法的例子:

new_window.blur();

它实现的作用和上篇中的window.blur()一样。

现在我们看看将新窗口移到前台或移到后台的两个链接：

<a href="#" onMouseOver="new_window.focus();">Bring it forward</a>

<a href="#" onMouseOver="new_window.blur();">Put it backward</a>

（5）再谈javascriptDOM
作者：Thau!
现在我们已经了解了：JavaScript包括缺省对象，例如窗
口，对象具有用于描述对象的属性，方法用于描述对象采取行
动的方法。

对象的属性页可以是对象。举例来说：窗口有一个属性叫做
document，它用于引用到窗口中实际的HTML文件。该
document属性本身就是一个对象。在谈到图象掉换（image
swap)的时候，我们见到过这样的例子。你可以用下列语句作
图象掉换:

<a href="#" onMouseOver="window.document.the_image.src='button_d.gif';">change</a>

上述语句的意思是说：找到window的document属性，找到
the_image的src属性并将其设置为图象button_d.gif。这样
写是因为窗口（windows）是对象，窗口内的文件
（documents）是对象，而文件（document）内的图象
（images）页是对象。

看起来似乎很复杂，但它的结构很清楚。JavaScript的文件
对象模块（Document Object Model）描述了对象之间的等级
关系。

7.
(1)while loop
var a_line="";

var loop = 0;

现在，关键之处：

while (loop < width)

{

a_line = a_line + "x";

loop=loop+1;

}
(2).for loop
var a_line="";

for (loop=0; loop < width; loop++)

{

a_line = a_line + "x";

}
8.array
数组是一种列表。各种列表比如名单、URL以颜色列
表都可以存储在数组中。

这里我们生成颜色的数组：

var colors = new Array("red","blue","green");
现在你就有了一个数组，你能对它做什么呢？数组
的优点在于数组中的各个元素可以通过数字调用。
第一个元素的数字是0，可以用以下方式调用：

var the_element = colors[0];

执行这一行JavaScript指令时，变量the_element
所被赋予的值是字符串"red" 。通过写出数组的名称
并将数组中元素的顺序号放在方括号内就可调用数
组中的该元素。数组中第2个元素的顺序号是1。

一旦生成数组后，你可以添加和修改数组值。如果
你打算将颜色数组的第1个元素有红色该为紫色，你
可以这样做：

colors[0] = "purple";

9.
数组在文件目标模块(DOM)中
作者：Thau!
本例打算用图片交换来演示数组如何介入DOM的。如果你用的是IE3.0或Netscape2.0，赶紧升级。试一下本例，看一下源码。

Here's the JavaScript that's in the onClick="" in the link:

var change=prompt('Change which image (0 or 1)?','');

window.document.images[change].src='three.jpg';

本例打算用图片交换来演示数组如何介入DOM的。如果你用的是IE3.0或Netscape2.0，赶紧升级。试一下本例，看一下源码。

document.image_name.src = 'some_image.gif';

为了做这事，每个图片都需命名到。若你不知要交换的图片名，但却知道其在HTML页中的顺序。可以用它的DOM数来指定该图片。

一个HTML文件中的第一个图片是document.images[0]，第二个是document.images[1]，如此类推。若你想知道一个文件中有多少个图片，你可检查图片数组长度知道：document.imageslength。例如，你想改变你的网页中所有图形为一个Spacer GLF图片，你可以这样做：

for (loop = 0; loop < document.images.length; loop++)

{

document.images[loop].src = 'spacer.gif';

}

10.函数

函数是编程需学的最后一个基本组成。所有的程序语言都是
函数。函数是一些角次可调用的、无须重写的东西。

如果你想教会自己快速阅读并且用一个一旦点击可告诉你当前
时间的长文本链接。

例如…时间!

看源码：

<a href="#" onClick="

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();

var the_time = the_hour + ':' + the_minute + ':' + the_second;

alert('The time is now: ' + the_time);">time!</a>

在这里这段JavaScript的工作细节并不重要；一会我们再回来
复习一下。

重要的是它太长了。若这些时间链接再有10个，你须每次剪贴
这段程序。这使你的HTML既长且难看。另外，若你想改变这段
程序，就必须在10个不同地方改变。

你可以写一个函数来执行而不用作10次拷贝程序。这里的函数
使用变的即容易编辑又容易阅读。

请看如何写一段计时函数。
example :
<html>
<head>
<title> blah blah blah </title>

<!-- hide this stuff from other browsers

alert("better, stronger, faster");

// load up some variables

var secs_per_min = 60;

var mins_per_hour = 60;

var hours_per_day = 24;

var days_per_year = 365

// do some calculations

var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;

var secs_per_year = secs_per_day * days_per_year;

//这里介绍如何用JavaScript写变量和网页。

// here's how to use JavaScript to write out HTML

document.writeln("<b>The monkey dances ");

document.writeln(secs_per_year);

document.writeln(" seconds per year.</b><p>");

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";

var bad_monkey = "The monkey scowls at you and burps.";

document.writeln(nice_monkey+"<br>");

var techy_monkey = monkey + bad_monkey ;

document.writeln(techy_monkey +"&nb " );

var new_window = window.open("1.html","1","width=200,height=200");

var url_names = new Array("hits.org","awaken.org","bianca.com");

var a_url;

接下来，我们循环调用数组中的各个元素，打开每
个URL并对待用户点击alert框的OK按钮：

for (loop = 0; loop <url_names.length; loop++) { // make the name of a url, for example http://www.hits.org/ a_url = "http://www." + url_names[loop] + "/"; // open a window var new_window=open(a_url,"new_window","width=300,height=300"); // wait for the click alert("hit ok for the next site"); }

// end the hiding comment -->

</script>

</head>
<body document.bgColor("red");>
<br><a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a></br>
<br><a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a></br>
<br>
<img src="1.gif" name="the_image">

<a href="#" onMouseOver="document.the_image.src='2.gif';" onClick="document.the_image.src='1.gif';">change</a>

</br><a href="1.html" target="blah blah blah">234</a>

<a href="#"

onClick="window.open('1.html','javascript_1');">Here's
another HTML page going into javascript_1</a>.

<a href="#" onMouseOver="window.status='Monkeys!';">Who do we love?</a>
<a href="#" onMouseOver="new_window.focus();">Bring it forward</a>

<a href="#" onClick="

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();

var the_time = the_hour + ':' + the_minute + ':' + the_second;

alert('The time is now: ' + the_time);">time!</a>

</body>

function fixNumber(the_number)

{

if (the_number < 10)

{

the_number = "0" + the_number;

}

return the_number;

}
function announceTime()

{

//get the date, the hour, minutes, and seconds

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var fixed_minute = fixNumber(the_minute);

var the_second = the_date.getSeconds();

var fixed_second = fixNumber(the_second);

//put together the string and alert with it

var the_time = the_hour + ":" + fixed_minute + ":" + fixed_second;

alert("The time is now: " +the_time);

}

多于一个函数的参数
作者：Thau!
这是我定义的一个数组：

var monkeys = new Array("mattmarg","wendy","kristin","tim","aaron", "luke");

var kittyphile = new Array("wendy", "ruby", "roscoe", "tim");

var discophile = new Array("mattmarg", "john travolta", "wendy");

var happy = new Array("tim", "wendy", "stimpy", "aaron");

var cranky = new Array("ren", "mattmarg","luke");

随着这些数组的定义，arrayIntersect函数给出，我们可轻而易举的发现那些网猴酷爱迪斯科：爱跳舞的网猴

注意到尽管John Travolta喜爱迪斯科，但他不在monkeys请单中，则他就不是只爱跳舞的网猴为调用该函数值，可这么来：

<a href="#" onClick="arrayIntersect('dancing monkeys',monkeys,discophile);">dancing monkeys</a>

这是个具有3个参数的函数：一个代表交叉的姓名，第一个数组，及第二个数组。这也很容易发现爱猫的网猴名爱猫的网猴。

看一下源码：

<a href="#" onClick="arrayIntersect('monkeys who love cats',monkeys,kittyphile);">cat-loving monkeys</a>

让我们看看arrayIntersect函数本身：

function arrayIntersect(intersect_name, array_1, array_2)

{

var the_list = "";

for (loop_1 = 0; loop_1 < array_1.length; loop_1++)

{

for (loop_2 = 0; loop_2 < array_2.length; loop_2++)

{

if (array_1[loop_1] == array_2[loop_2])

{

the_list = the_list + array_1[loop_1] + " ";

}

alert("the " + intersect_name + " are: "+ the_list);

}

看看你是否已经弄懂本例中的循环。关键是函数第一行：

function arrayIntersect(intersect_name, array_1, array_2)

这里定义了一个叫arrayIntersect的函数，它有3个参数。就象上例，每个参数就象一个变量，当函数调用时赋值。因此，当函数被调用时：

arrayIntersect('dancing monkeys',monkeys,discophile);

下列分配：

    * intersect_name = 'dancing monkeys'
    * array_1 = monkeys
    * array_2 = discophile

唯一需注意的是，你必须以正确的参数数目来调用函数。如果你一旦象这样调用arrayIntersect：

arrayIntersect(monkeys,discophile);

将会出错。试一下看会发生什么错误。

11介绍反馈表单
作者：Thau!
反馈表单是HTML 1.0规范的一部分。许多人对其并不很了
解。很多人只以为它只能由于用户端CGI编程。其实，即使
你不是CGI程序员，反馈表单也会为你提供许多功能。而
JavaScript可被用来为反馈表单添加各种功能。而且无须
用户端CGI的辅助。

如果你不了解反馈表单如何工作，请学习HTML入门中的有
关课程。然后在开始学习本课。

首先，在javascript中，反馈表单也被存储在一个对象数
组中。你可以通过window.document.images[0]调用图象数
组中的第一幅图象，你也可以用window.document.forms
[0]调用反馈表单数组中的第1项表单。你可以为图象命
名，页可以以类似的方式为反馈表单命名。例如，如果该
反馈表单

的编程如下：

</form>

你可以用以下两种方式之一引用该表单：

var the_form = window.document.forms[0];

var the_same_form = window.document.first_form;

example :
<html>
<head>
<title> blah blah blah </title>

<!-- hide this stuff from other browsers

alert("better, stronger, faster");

// load up some variables

var secs_per_min = 60;

var mins_per_hour = 60;

var hours_per_day = 24;

var days_per_year = 365

// do some calculations

var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;

var secs_per_year = secs_per_day * days_per_year;

//这里介绍如何用JavaScript写变量和网页。

// here's how to use JavaScript to write out HTML

document.writeln("<b>The monkey dances ");

document.writeln(secs_per_year);

document.writeln(" seconds per year.</b><p>");

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";

var bad_monkey = "The monkey scowls at you and burps.";

document.writeln(nice_monkey+"<br>");

var techy_monkey = monkey + bad_monkey ;

document.writeln(techy_monkey +"&nb " );

var new_window = window.open("1.html","1","width=200,height=200");

var url_names = new Array("hits.org","awaken.org","bianca.com");

var a_url;

接下来，我们循环调用数组中的各个元素，打开每
个URL并对待用户点击alert框的OK按钮：

// end the hiding comment -->

</script>

<a href="#" onMouseOver="document.the_image.src='2.gif';" onClick="document.the_image.src='1.gif';">change</a>

</br><a href="1.html" target="blah blah blah">234</a>

<a href="#"

onClick="window.open('1.html','javascript_1');">Here's
another HTML page going into javascript_1</a>.

<a href="#" onMouseOver="window.status='Monkeys!';">Who do we love?</a>
<a href="#" onMouseOver="new_window.focus();">Bring it forward</a>

<a href="#" onClick="

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();

var the_time = the_hour + ':' + the_minute + ':' + the_second;

alert('The time is now: ' + the_time);">time!</a>
<form name="first_form">

</form>
<a href="#"
onMouseOver="window.document.first_form.first_text.value='Clap clap!';">
Yes, and I know it.</a>

</body>

唯一的不同之处在于将一个变量赋值给
textareas，而不是将字符串赋值给它。该变量在
HTML首部已经做了定义。以下是变量的字符串赋
值：

var first_part = "Now I'm the king of the swingers/nOh,
the jungle VIP/nI've reached the top and had to stop/nAnd
that's what botherin' me";

注意"/n"是换行符。如果你在一个<pre> 并且或在
一个textarea中写字，"/n" 换行符非常方便。
12.文字域事件
作者：Thau!
文字域可以链接onBlur、onFocus、和onChange事件。当有
人点击文字域的里边时则发生onFocus事件。而如果点击文
字域的外面或按了tab键时则发生onblur事件。如果有人改
变了文字域内的内容然后转到文字域外部的区域时则发生
onChange事件。

试着做这些事情看下面的文字域会发生什么情况。

以下是编制方法：文字域的编码：

<input type="text" name="first_text"

onFocus="writeIt('focus');"

onBlur="writeIt('blur');"

onChange="writeIt('change');">

每一个事件处理器调用函数writeIt()，该函数在
首部中已作了定义。首部中的编码如下：

<head>

<title>Text Field Events</title>

<!-- hide me

function writeIt(the_word)

{

var word_with_return = the_word + "/n";

window.document.first_form.the_textarea.value +=

word_with_return;

}

// show me -->

</script>

</head>

前几行是典型的JavaScript预定义。主体中的第1
行

var word_with_return = the_word + "/n";

将一个变量word_with_return进行初始化为函数处
理后的字符串并加上换行符"/n".。注意"/n" 是标
准的计算机指令。

下一行

window.document.first_form.the_textarea.value += word_with_return;

将文字区域的值设置为其原值加新变量。其作用相
当于

window.document.first_form.the_textarea.value =

window.document.first_form.the_textarea.value + word_with_return;

目前我们已经学习了文字域和文字区域（值）的属性，接下
来我们学习文字域和文字区域处理所用的方法：blur()、
focus()、和select()。

下面的链接显示了focus() 和()如何工作。注意他们工作一
次后可能会终止功能。

错误！超级链接引用无效。错误！超级链接引用无效。

</form>

<a href="#" onMouseOver=
"window.document.method_form.method_text.focus();">
Mouseover to focus</a>

<a href="#" onMouseOver=
"window.document.method_form.method_text.select();">
Mouseover to select</a>

其使用方法和调用任何对象方法的做法是一样的：
object_name.method(). 该文字域的名称是
window.document.form_name.text_field_name，
所以用下列语句就可调用文字域的focus()方法。

window.document.method_form.method_text.focus();
13.表单处理器
作者：Thau!

表单也是对象；他们有自己的方法、属性、及事件
处理器。其中有一项就是onSubmit。

onSubmit的调用有以下两种情形：如果用户点击递
交（Submit）按钮，或用户在文字域内按了回车
键。试着点击下面的Submit按钮看会发生什么情
况。

在Netscape中，点击一个没有结果事件处理的
Submit按钮通常会导致刷新原有的页面。为了避免
这种情况，你可以这样做：

*
<form onSubmit="return false;"> <input type="submit" value="Submit"> </form>

试着点击下面的按钮:

Javascript用return false阻止浏览器刷新页面。
另一个例子是阻止一个href转向赋值的URL 。例
如：链接

<a href="http://www.mattmarg.com/"
onClick="return false;">mattmarg!</a>

不会转向任何URL，因为你给onClick赋值为return
false。

以下是一个从用户获取信息的表单。在文字域中输入一些
内容然后点击Return:

Who does the monkey love:

以下是表单的编码：

<b>Who does the monkey love: </b>

</form>

当你点击文字域中的Return时，onSubmit处理器被
调用执行函数monkeyLove()，该函数将改变文字域
内的值。

如果onsubmit处理器中没有return false语句的
话，执行函数monkeyLove()会改变文字域内容，但
由于同时网页内容会被刷新，从而又会将文字域的
内容返回到原有的内容。为了阻止这种现象，就必
须在onSubmit中加入return false.

以下是monkeyLove() 函数的内容：

function monkeyLove()

{

var who_it_is =
window.document.text_entry_form.monkey_love.value;

who_it_is =
'The monkey loves ' + who_it_is;

window.document.text_entry_form.monkey_love.value =
who_it_is;

}

下面这个例子中没有加入return false，你将看到会发生
什么情况：

Who does the monkey love:

14.复选框
作者：Thau!
文字域和文字区域是表单的两种元素。其它的还有
复选框、单选框及下拉菜单。首先我们学习复选
框。

复选框的主要属性就是：被选中（checked）。

This checkbox is checked
This checkbox is not checked

如果有一个名为the_form的表单，其中一个复选框
的名称为the_checkbox，你可一看到如果点击该复
选框会发生什么情况：

var is_checked = window.document.the_form.the_checkbox.checked; if (is_checked == true) { alert("Yup, it's checked!"); } else { alert("Nope, it's not checked."); }
如果复选框被选中，则复选框的属性为真(true）。真（true）是JavaScript内置的数据类型，所以你不必对true添加引号。如果复选框未被选中，则其属性为假（false），这也是一只内置数据类型。

你还可以设定复选框的属性。以下是设置复选框属性的一个例子：

Checkbox 1

错误！超级链接引用无效。
错误！超级链接引用无效。
错误！超级链接引用无效。

以下为代码：

<input type="checkbox" name="check_1">Checkbox 1

</form>

<a href="#"
onClick=
"window.document.form_1.check_1.checked=true;
return false;">
Click to check Checkbox 1</a>

<a href="#"
onClick=
"window.document.form_1.check_1.checked=false;
return false;">
Click to uncheck Checkbox 1</a>

<a href="#"
onClick="alert(window.document.form_1.check_1.checked); return false;">
Click to see the value of Checkbox 1</a>

注意我在链接中始终加入了return false，以防止浏览器刷新页面又回到原来的内容。

复选框的事件处理器是onClick。当某人点击复选框时，onClick事件处理器即发挥作用。以下为其使用实例。

The Light Switch

该例子中，表单应用了onClick复选框处理器：

<input type="checkbox" name ="check_1"
onClick="switchLight();">The Light Switch

</form>

当某人点击复选框时，onClick处理器被激活并执行函数switchLight()，以下为函数switchLight() 的编码（它置于网页首部中):

function switchLight()

{

var the_box = window.document.form_2.check_1;

var the_switch = "";

if (the_box.checked == false) {

alert("Hey! Turn that back on!");

document.bgColor='black';

} else {

alert("Thanks!");

document.bgColor='white';

}

第一行：

var the_box = window.document.form_2.check_1;

将复选框对象赋值给一个变量。这样可以缩小编程长度，还可以将对象作为参数传递给函数。

15.单选框
作者：Thau!
在JavaScript中单选框的用法和复选框是否相似。不同之处在于HTML中的应用。复选框是一种开关。如果一个复选框被选中，你可以再点击后取消选取. 但如果单选框被选中，则只能通过选取另外一个单选框才能取消对该单选框的选取。例：

Larry
Moe
Curly

在该例中，如果你打算取消对对一个单选框的选取，你必须集电极另一个单选框。用这种概念我们可以用两个单选框的设为代替一个复写纸的试着发式：

Light off
Light on

表单编码如下：

<input type="radio" name ="radio_1"
onClick="offButton();">Light off

<input type="radio" name ="radio_2"
onClick="onButton();" checked>Light on

</form>

当第一个单选框被选中时，函数offButton() 被调用。函数如下：

function offButton()

{

var the_box =
window.document.form_1.radio_1;

if (the_box.checked == true)
{
window.document.form_1.radio_2.checked = false;

document.bgColor='black';

alert("Hey! Turn that back on!");

}

这个例子很象前面的复选框例子，主要的区别在于该行：

window.document.form_1.radio_2.checked = false;

该行指令指示JavaScript在该按钮被点击时关闭另外一个按钮。由于另外一个按钮的函数同这个很相似：

function onButton()

{

var the_box = window.document.form_1.radio_2;

if (the_box.checked == true)
{

window.document.form_1.radio_1.checked = false;

document.bgColor='white';

alert("Thanks!");

}

16选单
作者：Thau!
选单是我们所学的表单选项中最奇特的一种。有两
种基本的格式：下列选单和列表选单。以下为例
子：

下列选单:

列表选单:

它的奇特之处在于这个选单有名称，但其中的各个
选项没有名称。例如，在HTML中，第1个选单如
下：

<option>probiscus

<option>spider

<option>lemur

<option>chimp

<option>gorilla

<option>orangutan

</select>

注意这个选单的名称是pulldown_1，但各个选项没
有名称。所以要调用其中的各个选项则有点困难。

幸好数组可以帮助我们调用其中的选项。如果你想
改变该下列选单中的第2个选项，你可以这样做：

window.document.form_1.pulldown_1.options[1].text = 'new_text';

这是因为选单的元素有一个选项属性，而该属性是
选单所有选项的集合而成的数组。点击错误！超级链接引用无效。然后从下拉选单从下列选单中查看其选项是
否已经被改变。现在第2个选项应该是*thau*。

除了选项属性，选单还有一项属性叫做
selectedIndex。大笔一个选项被选择后，
selectedIndex属性将变成被选项的数组索引号
（序列号）。选择第2个列表选单中的一个选项，
然后检查错误！超级链接引用无效。。记住数组中的第1个选项的索引
号是0。

<a href="#" onClick="alert('index is: ' +
window.document.form_1.list_1.selectedIndex);
return false;">check the index.</a>

表单的名称是form_1，列表选单的名称是list_1。
selectedIndex属性值为
window.document.form_1.list_1.selectedIndex。
你还可以将selectedIndex设置如下：

window.document.form_1.list_1.selectedIndex = 1;

并高亮度显示第2个选项。

一旦你得到被选项的索引号，你就可以发现其内
容：

var the_select =
window.document.form_1.list_1;

var the_index =
the_select.selectedIndex;

var the_selected =
the_select.options[the_index].text;

selectedIndex属性很有用，但如果有多个选项同时
被选中，会如何呢？有关这方面的内容请阅读
multiple selects。

javascript函数库大全<<

/*

-------------- 函数检索 --------------
trim函数:                         trim() lTrim() rTrim()
校验字符串是否为空:                 checkIsNotEmpty(str)
校验字符串是否为整型:               checkIsInteger(str)
校验整型最小值:                    checkIntegerMinValue(str,val)
校验整型最大值:                    checkIntegerMaxValue(str,val)
校验整型是否为非负数:               isNotNegativeInteger(str)
校验字符串是否为浮点型:             checkIsDouble(str)
校验浮点型最小值:                  checkDoubleMinValue(str,val)
校验浮点型最大值:                  checkDoubleMaxValue(str,val)
校验浮点型是否为非负数:             isNotNegativeDouble(str)
校验字符串是否为日期型:             checkIsValidDate(str)
校验两个日期的先后:                checkDateEarlier(strStart,strEnd)
校验字符串是否为email型:           checkEmail(str)

校验字符串是否为中文:               checkIsChinese(str)
计算字符串的长度，一个汉字两个字符:   realLength()
校验字符串是否符合自定义正则表达式:   checkMask(str,pat)
得到文件的后缀名:                   getFilePostfix(oFile)
-------------- 函数检索 --------------
*/

/**
* added by LxcJie 2004.6.25
* 去除多余空格函数
* trim:去除两边空格 lTrim:去除左空格 rTrim: 去除右空格
* 用法：
*     var str = " hello ";
*     str = str.trim();
*/
String.prototype.trim = function()
{
    return this.replace(/(^[/s]*)|([/s]*$)/g, "");
}
String.prototype.lTrim = function()
{
    return this.replace(/(^[/s]*)/g, "");
}
String.prototype.rTrim = function()
{
    return this.replace(/([/s]*$)/g, "");
}
/********************************** Empty **************************************/
/**
*校验字符串是否为空
*返回值：
*如果不为空，定义校验通过，返回true
*如果为空，校验不通过，返回false               参考提示信息：输入域不能为空！
*/
function checkIsNotEmpty(str)
{
    if(str.trim() == "")
        return false;
    else
        return true;
}//~~~
/*--------------------------------- Empty --------------------------------------*/
/********************************** Integer *************************************/
/**
*校验字符串是否为整型
*返回值：
*如果为空，定义校验通过，      返回true
*如果字串全部为数字，校验通过，返回true
*如果校验不通过，              返回false     参考提示信息：输入域必须为数字！
*/
function checkIsInteger(str)
{
    //如果为空，则通过校验
    if(str == "")
        return true;
    if(/^(/-?)(/d+)$/.test(str))
        return true;
    else
        return false;
}//~~~
/**
*校验整型最小值
*str：要校验的串。 val：比较的值
*
*返回值：
*如果为空，定义校验通过，                返回true
*如果满足条件，大于等于给定值，校验通过，返回true
*如果小于给定值，                        返回false              参考提示信息：输入域不能小于给定值！
*/
function checkIntegerMinValue(str,val)
{
    //如果为空，则通过校验
    if(str == "")
        return true;
    if(typeof(val) != "string")
        val = val + "";
    if(checkIsInteger(str) == true)
    {
        if(parseInt(str,10)>=parseInt(val,10))
            return true;
        else
            return false;
    }
    else
        return false;
}//~~~
/**
*校验整型最大值
*str：要校验的串。 val：比较的值
*
*返回值：
*如果为空，定义校验通过，                返回true
*如果满足条件，小于等于给定值，校验通过，返回true
*如果大于给定值，                        返回false       参考提示信息：输入值不能大于给定值！
*/
function checkIntegerMaxValue(str,val)
{
    //如果为空，则通过校验
    if(str == "")
        return true;
    if(typeof(val) != "string")
        val = val + "";
    if(checkIsInteger(str) == true)
    {
        if(parseInt(str,10)<=parseInt(val,10))
            return true;
        else
            return false;
    }
    else
        return false;
}//~~~
/**
*校验整型是否为非负数
*str：要校验的串。
*
*返回值：
*如果为空，定义校验通过，返回true
*如果非负数，            返回true
*如果是负数，            返回false               参考提示信息：输入值不能是负数！
*/
function isNotNegativeInteger(str)
{
    //如果为空，则通过校验
    if(str == "")
        return true;
    if(checkIsInteger(str) == true)
    {
        if(parseInt(str,10) < 0)
            return false;
        else
            return true;
    }
    else
        return false;
}//~~~
/*--------------------------------- Integer --------------------------------------*/
/********************************** Double ****************************************/
/**
*校验字符串是否为浮点型
*返回值：
*如果为空，定义校验通过，      返回true
*如果字串为浮点型，校验通过，返回true
*如果校验不通过，              返回false     参考提示信息：输入域不是合法的浮点数！
*/
function checkIsDouble(str)
{
    //如果为空，则通过校验
    if(str == "")
        return true;
    //如果是整数，则校验整数的有效性
    if(str.indexOf(".") == -1)
    {
        if(checkIsInteger(str) == true)
            return true;
        else
            return false;
    }
    else
    {
        if(/^(/-?)(/d+)(.{1})(/d+)$/g.test(str))
            return true;
        else
            return false;
    }
}//~~~
/**
*校验浮点型最小值
*str：要校验的串。 val：比较的值
*
*返回值：
*如果为空，定义校验通过，                返回true
*如果满足条件，大于等于给定值，校验通过，返回true
*如果小于给定值，                        返回false              参考提示信息：输入域不能小于给定值！
*/
function checkDoubleMinValue(str,val)
{
    //如果为空，则通过校验
    if(str == "")
        return true;
    if(typeof(val) != "string")
        val = val + "";
    if(checkIsDouble(str) == true)
    {
        if(parseFloat(str)>=parseFloat(val))
            return true;
        else
            return false;
    }
    else
        return false;
}//~~~
/**
*校验浮点型最大值
*str：要校验的串。 val：比较的值
*
*返回值：
*如果为空，定义校验通过，                返回true
*如果满足条件，小于等于给定值，校验通过，返回true
*如果大于给定值，                        返回false       参考提示信息：输入值不能大于给定值！
*/
function checkDoubleMaxValue(str,val)
{
    //如果为空，则通过校验
    if(str == "")
        return true;
    if(typeof(val) != "string")
        val = val + "";
    if(checkIsDouble(str) == true)
    {
        if(parseFloat(str)<=parseFloat(val))
            return true;
        else
            return false;
    }
    else
        return false;
}//~~~
/**
*校验浮点型是否为非负数
*str：要校验的串。
*
*返回值：
*如果为空，定义校验通过，返回true
*如果非负数，            返回true
*如果是负数，            返回false               参考提示信息：输入值不能是负数！
*/
function isNotNegativeDouble(str)
{
    //如果为空，则通过校验
    if(str == "")
        return true;
    if(checkIsDouble(str) == true)
    {
        if(parseFloat(str) < 0)
            return false;
        else
            return true;
    }
    else
        return false;
}//~~~
/*--------------------------------- Double ---------------------------------------*/
/********************************** date ******************************************/
/**
*校验字符串是否为日期型
*返回值：
*如果为空，定义校验通过，           返回true
*如果字串为日期型，校验通过，       返回true
*如果日期不合法，                   返回false    参考提示信息：输入域的时间不合法！（yyyy-MM-dd）
*/
function checkIsValidDate(str)
{
    //如果为空，则通过校验
    if(str == "")
        return true;
    var pattern = /^((/d{4})|(/d{2}))-(/d{1,2})-(/d{1,2})$/g;
    if(!pattern.test(str))
        return false;
    var arrDate = str.split("-");
    if(parseInt(arrDate[0],10) < 100)
        arrDate[0] = 2000 + parseInt(arrDate[0],10) + "";
    var date = new Date(arrDate[0],(parseInt(arrDate[1],10) -1)+"",arrDate[2]);
    if(date.getYear() == arrDate[0]
       && date.getMonth() == (parseInt(arrDate[1],10) -1)+""
       && date.getDate() == arrDate[2])
        return true;
    else
        return false;
}//~~~
/**
*校验两个日期的先后
*返回值：
*如果其中有一个日期为空，校验通过,          返回true
*如果起始日期早于等于终止日期，校验通过，   返回true
*如果起始日期晚于终止日期，                 返回false    参考提示信息：起始日期不能晚于结束日期。
*/
function checkDateEarlier(strStart,strEnd)
{
    if(checkIsValidDate(strStart) == false || checkIsValidDate(strEnd) == false)
        return false;
    //如果有一个输入为空，则通过检验
    if (( strStart == "" ) || ( strEnd == "" ))
        return true;
    var arr1 = strStart.split("-");
    var arr2 = strEnd.split("-");
    var date1 = new Date(arr1[0],parseInt(arr1[1].replace(/^0/,""),10) - 1,arr1[2]);
    var date2 = new Date(arr2[0],parseInt(arr2[1].replace(/^0/,""),10) - 1,arr2[2]);
    if(arr1[1].length == 1)
        arr1[1] = "0" + arr1[1];
    if(arr1[2].length == 1)
        arr1[2] = "0" + arr1[2];
    if(arr2[1].length == 1)
        arr2[1] = "0" + arr2[1];
    if(arr2[2].length == 1)
        arr2[2]="0" + arr2[2];
    var d1 = arr1[0] + arr1[1] + arr1[2];
    var d2 = arr2[0] + arr2[1] + arr2[2];
    if(parseInt(d1,10) > parseInt(d2,10))
       return false;
    else
       return true;
}//~~~
/*--------------------------------- date -----------------------------------------*/
/********************************** email *****************************************/
/**
*校验字符串是否为email型
*返回值：
*如果为空，定义校验通过，           返回true
*如果字串为email型，校验通过，      返回true
*如果email不合法，                  返回false    参考提示信息：Email的格式不正确！
*/
function checkEmail(str)
{
    //如果为空，则通过校验
    if(str == "")
        return true;
    if (str.charAt(0) == "." || str.charAt(0) == "@" || str.indexOf('@', 0) == -1
        || str.indexOf('.', 0) == -1 || str.lastIndexOf("@") == str.length-1 || str.lastIndexOf(".") == str.length-1)
        return false;
    else
        return true;
}//~~~
/*--------------------------------- email ----------------------------------------*/
/********************************** chinese ***************************************/
/**
*校验字符串是否为中文
*返回值：
*如果为空，定义校验通过，           返回true
*如果字串为中文，校验通过，         返回true
*如果字串为非中文，             返回false    参考提示信息：必须为中文！
*/
function checkIsChinese(str)
{
    //如果值为空，通过校验
    if (str == "")
        return true;
    var pattern = /^([/u4E00-/u9FA5]|[/uFE30-/uFFA0])*$/gi;
    if (pattern.test(str))
        return true;
    else
        return false;
}//~~~
/**
* 计算字符串的长度，一个汉字两个字符
*/
String.prototype.realLength = function()
{
return this.replace(/[^/x00-/xff]/g,"**").length;
}
/*--------------------------------- chinese --------------------------------------*/
/********************************** mask ***************************************/
/**
*校验字符串是否符合自定义正则表达式
*str 要校验的字串 pat 自定义的正则表达式
*返回值：
*如果为空，定义校验通过，           返回true
*如果字串符合，校验通过，           返回true
*如果字串不符合，                   返回false    参考提示信息：必须满足***模式
*/
function checkMask(str,pat)
{
    //如果值为空，通过校验
    if (str == "")
        return true;
    var pattern = new RegExp(pat,"gi")
    if (pattern.test(str))
        return true;
    else
        return false;
}//~~~
/*--------------------------------- mask --------------------------------------*/
/********************************** file ***************************************/
/**
* added by LxcJie 2004.6.25
* 得到文件的后缀名
* oFile为file控件对象
*/
function getFilePostfix(oFile)
{
    if(oFile == null)
        return null;
    var pattern = /(.*)/.(.*)$/gi;
    if(typeof(oFile) == "object")
    {
        if(oFile.value == null || oFile.value == "")
            return null;
        var arr = pattern.exec(oFile.value);
        return RegExp.$2;
    }
    else if(typeof(oFile) == "string")
    {
        var arr = pattern.exec(oFile);
        return RegExp.$2;
    }
    else
        return null;
}//~~~
/*---------------------------------

正确使用DOM-如何访问网页元素
［作者：佚名    转贴自：本站原创    阅读次数：319    更新时间：2005-11-11 23:43:00   录入：刘光勇］   热

    Firefox以及其他Gecko引擎的浏览器遇到的最常见的兼容性问题是IE DHTML和W3C DOM的区别。
不规范的DHTML脚本中最容易犯的一个错误就是使用不规范的方式来访问网页元素。我们曾经用spider爬一些国内著名门户网站，单从数量上看，95%以上的javascript错误都来自于此。
常见的访问网页元素的不规范方式有一下几种:

1. 直接用id或name属性名访问网页元素，例如:

<div id="icefable1">...</div>
<script language="javascript">
icefable1.style.width=0;
</script>

正确的做法是使用getElementById来得到某个有id属性的元素，用getElementsByName来得到某些有name属性的元素。例如上面的代码可以改成：

<div id="icefable1">...</div>
<script language="javascript">
document.getElementById("icefable1").style.width=0;
</script>

2. 在网页种加入相同id的网页元素。例如：

<td width="33%" class=tab-on id=navcell οnmοuseοver=switchCell(0)><div align="center">重要提示</div></td>
<td width="33%" class=tab-off id=navcell οnmοuseοver=switchCell(1)><div align="center">学术活动</div></td>
<td width="34%" class=tab-off id=navcell οnmοuseοver=switchCell(2)><div align="center">交大热点</div></td>
...
<script language="javascript">
...
navcell[n].className="tab-on";
...
</script>

HTML标准中规定id在网页中必须是唯一的，如果你要一次访问一组元素，对于支持name属性的元素,你可以使用name属性，name可以是不唯一的。上面的例子可以改为：

<td width="33%" class=tab-on id="navcell1" οnmοuseοver=switchCell(0)><div align="center">重要提示</div></td>
<td width="33%" class=tab-off id="navcell2" οnmοuseοver=switchCell(1)><div align="center">学术活动</div></td>
<td width="34%" class=tab-off id="navcell3" οnmοuseοver=switchCell(2)><div align="center">交大热点</div></td>
...
<script language="javascript">
...
eval('document.getElementById("navcell'+n+'").className="tab-on"');
...
</script>

有人写了快一辈子DHTML了还搞不清楚id和name到底有什么区别，就是因为IE从来没有帮他们搞清楚过。你感谢IE的“兼容性”么？我不。
3. 使用all属性，如document.all，来访问网页元素。all属性是一个IE DHTML 专有的属性，可以通过如下方式来访问网页元素：

<HTMLelement>.all.<id或name>
<HTMLelement>.all("<id或name>")
<HTMLelement>.all["<id或name>"]

⊕注册本站　⊕ 论坛　⊕ 繁体中文

手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |

| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |

您现在的位置：电脑技巧 >> 网页设计 >> Javascript >> 网页设计正文
javaScript DOM方法与属性摘要
文章来源：网页教学网作者：佚名更新时间：2008-2-9 20:22:34 【大小】【加入收藏】

-
-
1 createElement(element)
创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。
eg) var para = document.createElement("p");
document.body.appendChild(para);

2 createTextNode()
创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串
eg)
var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);

3 cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本，参数为true或者false，true表示同时复制该节点的子节点，false则不复制任何子节点。
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);

4 appendChild()
reference = node.appendChild(newChild);
插入节点，例子参考前面。

5 insertBefore()
reference = element.insertBefore(newNode,targetNode)
将一个给定节点插入到一个给定元素节点的给定子节点的前面，返回一个指向新增子节点的引用指针。
eg)
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

6 removeChild()
reference = element.removeChild(node)
将从一个给定元素利删除一个子节点，返回一个指向已被删除的子节点的引用指针。
当某个节点被removeChild()删除后，此节点所有子节点都被删除。

7 replaceChild()
reference = element.replaceChild(newChild,oldChild)
把一个给定父元素里的一个子节点替换为另外一个节点，oldChild节点必须是element元素的一个子节点，返回值是一个指向已被替换的那个
子节点的引用指针。
eg)
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);

8 setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性

9 getAttribute
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。

10 getElementById()
element = document.getElementById(ID)
寻找一个有着给定id属性值的元素，返回一个元素节点

11 getElementByTagName()
用于寻找有着给定标签名的所有元素：
elements = document.getElementsByTagName(tagName)
返回一个节点集合。

12 hasChildNodes
用来检查一个给定元素是否有子节点
booleanValue = element.hasChildNodes
返回true或false。

13 DOM属性
节点的属性
nodeName属性将返回一个字符串，其内容是给定节点的名字。
如果节点是元素节点，返回这个元素的名称；
如果是属性节点，返回这个属性的名称；
如果是文本节点，返回一个内容为#text的字符串；

nodeType属性将返回一个整数，这个数值代表给定节点的类型
nodeValue属性将返回给定节点的当前值
如果节点是元素节点，返回null；
如果是属性节点，返回这个属性的名称；
如果是文本节点，返回文本节点的内容；

遍历节点树
childNodes 该属性返回一个数组，这个数组由给定元素节点的子节点构成
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
nextSibling 返回给定节点的下一个子节点
parentNode 返回一个给定节点的父节点
previousSibling 返回给定节点的下一个子节点??

14 setTimeout
javaScript函数，能够让某个函数在经过一段预定的时间之后才开始执行，函数有两个参数，第一个参数是将要执行的那个函数的名字；
第二个参数是一个数值，以毫秒为单位设定了需要经过多长时间才开始执行由第一个参数所给出的函数：
setTimeout("function",interval);

Javascript文档对象模型(DOM)实例分析
文章来源：网页教学网作者：佚名更新时间：2008-2-9 20:22:36 【大小】【加入收藏】

-
-

基础知识回顾：

DOM 即（Document Object Model），文档对象模型，DOM实际是把HTML当作XML文件来进行处理，用对象的眼光来打量HTML，可以说DOM是继HTML后Web的最有用的发明。

Some review of XML

SGML（基于标签的语言的普遍规范），在SGML被用于定义HTML的DTD时，发现HTML本身是很不规范的。主要表现在某些标签可以省略/没有/不允许结束标签（</xxx>）,标签互相嵌入而很不不规范，属性值的定义方法也不统一等等。所以XML出现了，HTML中不规范的地方都被明确定义，注意的是XML定义的是一种语言的语法和规范，是一系列满足这种规范的语言的统称，具体不同的场合会有不同的具体实现定义不同的标签及属性来来解决不同的问题，如RDF，RSS，SOAP，XSLT，XSL等等，当然HTML的XML实现为XHTML。XML的实质含义是使用结构化的纯文本来表达数据。

XML几个语法要点：

首行为XML prolog，一般为<?xml version=”1.0”?>，该行告诉xml praser/浏览器，该XML如何被prase。

然后是文档类型声明（DTD），例如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

然后是document element，它必须把所有其他标签都括入其中。就是该XML的最外层标签。也就是Root Element，注意这个要与DTD中声明的root element type相一致，如上面的html。

不想被Praser解析的东西用<![CDATA[ ]]>括起来。

在document element中间的用<? … ?>括起来的语句被称为PI（processing instruction），作用是给praser一些更特定的信息。

XML的API：

SAX（Sample API for XML）：第一个，Java语言实现，event-based，praser从上到下的解析XML文档，当遇到每个标签/属性/值…时就会激发事件，而具体在该事件做什么由程序员定义。
优点，lightweight，fast，缺点，任何时候，你想停下，回退，或专门指定解析该文档的某特定部分时，都得从头从文档的第一行开始解析。

DOM：基于树结构，并且当解析完后，你想访问或修改添加文档对象都不需要重新解析。DOM是不针对于语言的，浏览器负责对DOM实现进行Javascript的支持。

—————————————————————————————————————————

DOM的核心： Node

由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象：

Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：

? Node.ELEMENT_NODE (1)

? Node.ATTRIBUTE_NODE (2)

? Node.TEXT_NODE (3) ：<![CDATA[ ]]>中括着的纯文本，他没有子节点

? Node.CDATA_SECTION_NODE (4) ：子节点一定为TextNode

? Node.ENTITY_REFERENCE_NODE (5) ：

? Node.ENTITY_NODE (6) ：DTD中的实体定义<!ENTITY foo “foo”>，无子节点

? Node.PROCESSING_INSTRUCTION_NODE (7) ：PI，无子节点

? Node.COMMENT_NODE (8)

? Node.DOCUMENT_NODE (9) ：最外层的Root element,包括所有其它节点

? Node.DOCUMENT_TYPE_NODE (10) :DTD，<!DOCTYPE………..>

? Node.DOCUMENT_FRAGMENT_NODE (11)

? Node.NOTATION_NODE (12) ：DTD中的Nation定义

Node的属性和方法

nodeName 返回String. The name of ths node;this is defined depending on theype of node.
nodeValue 返回String. The value of the node'this is defined depending on the type of node.
nodeType 返回Number. One of the node type constant values.
ownerDocument 返回Document. Pointer to the document that this node belongs to.
firstChild 返回Node. Pointer to the first node in the childNodes list.
lastChild 返回Node. Pointer to the last node in the childNodes list.
childNodes 返回NodeList. A list of all child nodes.
previousSibling 返回Node. Pointer to the previous sibling;null if this is the first sibling.
nextSibling 返回Node. Pointer to the next sibling;null if this is the last sibling.
attributes 返回NamedNodeMap. Contains Attr objects respresenting an element's attributes;only used for Element nodes.
appendChild(node) 返回Node. Adds node to the end of childNodes.
hasChildNodes() 返回Boolean. Returns true when childNodes contains one or more nodes.
removeChild(node) 返回Node. Removes node from childNodes.
replaceChild(newnode, oldnode) 返回Node. Replace oldnode in childNodes with newnode.
insertBefore(newnode, refnode) 返回Node. Inserts newnode before refnode in childNodes.

—————————————————————————————————————————

DOM的使用

DOM是分级别的，不同浏览器对DOM支持的级别不同。DOM level1 （core，用来解析XML-base的文档，和DOM HTML，用来针对HTML，因为DOM并非只针对HTML的），DOM Level2（event，以前都是通过DHTML支持，style，与CSS沟通，等等。。）DOM level3（DOM Load and Save；DOM Validation；对XML1.0的支持，包括：XML Infoset, XPath,XML Base）

Netscape Navigator 1.0-4.x DOM兼容性（-）
Netscape 6.0+(Mozilla 0.6.0+) DOM兼容性（Level 1, Level 2, Level 3 (partial)）
Internet Explorer 2.0-4.x DOM兼容性（-）
Internet Explorer 5.0 DOM兼容性（Level 1 (minimal)）
Internet Explorer 5.5+ DOM兼容性（Level 1 (almost all)）
Opera 1.0-6.0 DOM兼容性（-）
Opera 7.0+ DOM兼容性（Level 1 (almost all), Level 2 (partial)）
Safari 1.0+ / Konqueror~2.0+ DOM兼容性（Level 1）

获得Node：

/* 通过document对象 */
var oHtml = document.documentElement;

/* 得到<head />和<body /> */
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;

/* 可以用这种方式 */
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];

/* 也可以使用方法获取数组的索引值 */
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);

/* 使用document.body来得到<body /> */
var oBody = document.body;

使用Attributes值：Node接口的attributes()方法返回一个NamedNodeMap，从它可以得到具体的Attribute并加以操作。或者是有Node接口本身的getAttribute()方法来直接得到Attribute。

/* 使用Node的attribute的getNamedItem()方法 */
var sId = oP.attributes.getNamedItem("id").nodeValue;

/* 或者使用item()方法 */
var sId = oP.attributes.item(1).nodeValue;

/* 或者直接使用Node的getAttribute()获取Id */
var sId = oP.getAttribute("id");

得到指定的Node：使用getElementsByTagName()

/* 得到<img />Elements */
var oImgs = document.getElementsByTagName("img");

/* 得到第一段里所有的<img /> */
var oPs = document.getElementsByTagName("p");
var oImgsInP = oPs[0].getElementsByTagName("img");

还有getElementsByName()，getElementsById();

/* 得到id为"div1"的<div> */
var oDivs = document.getElementsByTagName("div");
var oDiv1 = null;
for(var i=0; i<oDivs.length; i++){
if(oDivs[i].getAttribute("id") == "div1"){
oDiv1 = oDivs[i];break;
}
}

/* 使用document.getElementById() */
var oDiv1 = document.getElementById("div1");

生成与操作Node

createAttribute(name) ：创建一个名为name的属性节点。IE,Mozilla,opera支持，Safari不支持。
createCDATASection(text) ：创建一个子节点为text的CDATA区。Mozilla支持，IE,Opera,Safari不支持。
createComment(text) ：创建一个注释内容为text的注释节点。各浏览器均支持。
createDocumentFragment() ：创建一个文档片断（fragment）节点。各浏览器均支持。
createElement(tagName) ：创建一个名为tagName的元素节点。各浏览器均支持。
createEntityReference(name) ：Creates an entity reference node with the given name。Mozilla 支持。IE,Opera,Safari不支持。
createProcessingInstruction(target, data) ：Creates a PI node with the given target and data。 Mozilla 支持。IE,Opera,Safari不支持。
createTextNode(text) ：创建一个包含text的文本节点。各浏览器均支持。

观察可知最普遍的，最重要的方法是createElement(),createDocumentFragment(), create TextNode()。

/*使用createElement(),createTextNode(),appendChild()动态添加节点*/
function createMessage(){
var op = document.createElement("p");
var oText = document.createTextNode("hello world!");
op.appendChild(oText);
document.body.appendChild(op);
}

使用removeChild(), replaceChild(), and insertBefore()

/* remove 节点 */
function removeMessage(){
var op = document.body.getElementsByTagName('p')[0];
op.parentNode.removeChild(op);
}

/* replace 节点 */
function insertMessage(){
var oNewP = document.createElement('p');
var oText = document.createTextNode('hello csser!');
oNewP.appendChild(oText);
var oOldP = document.getElementsByTagName('p')[0];
document.body.insertBefore(oNewP, oOldP);
}

使用createDocumentFragment()

/* 通常做法 */
var arrText = ['first', 'second', 'third'];
for(var i=0; i<arrText.length; i++){
var op = document.createElement('p');
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
document.body.appendChild(op);
}

/* 使用documentFragment */
var arrText = ['first', 'second', 'third'];
var oFragment = document.createDocumentFragment();
for(var i=0; i<arrText.length; i++){
var op = document.createElement('p');
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
oFragment.appendChild(op);
}
document.body.appendChild(oFragment);

CSSER注：上面的比较能看出，通过DocumentFragment的方式能提高效率。

—————————————————————————————————————————

HTML DOM：

使用DOM的核心方法是针对所有XML的，针对HTML DOM有特殊的方法，如

使用DOM core：oImg.setAttribute(“src”, “mypicture2.jpg”);

使用HTML DOM：oImg.src = “mypicture2.jpg”;

—————————————————————————————————————————

DOM 遍历和parentNode(),firstChild(),lastChild(),nextSibling(),previousSibling()(兄弟)

http://www.csser.com/html/csser/webstandards/200703/04/1034.html

JavaScrip 初学笔记

JavaScrip 初學筆記

如何從wondows到Linux

Linux 研發環境工具下載網址大全

編程修養（轉發。。。）

變量初始化問題--一個年輕工程師的見解(2007年工作一年時寫的)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結