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 初學筆記

釘釘打卡速度慢

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Qt/C++音視頻開發74-合併標籤圖形/生成yolo運算結果圖形/文字和圖形合併成一個/水印濾鏡

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

字節面試：MySQL什麼時候鎖表？如何防止鎖表？

.NET8連接SQL SERVER 2008 R2 報：證書鏈是由不受信任的頒發機構頒發的

golang開發環境搭建(win10)

python計算機視覺學習筆記——PIL庫的用法

Golang初學：獲取程序內存使用情況，std runtime

JavaScrip 初學筆記

如何從wondows到Linux

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

編程修養（轉發。。。）

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

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

linux以太網驅動總結