編輯“PHP-Javascript”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>導(dǎo)航:</strong> [[PHP#PHP教程|上一頁]] | {{template:開發(fā)語言導(dǎo)航}}</span>
<div style="clear:both;"></div>

== Javascript簡介 ==
[[Javascript]]是一種解釋性的，基于對象的腳本語言(an interpreted, object-based scripting language)。  <br>



[[HTML]][[網(wǎng)頁]]在互動性方面能力較弱，例如下拉菜單，就是用戶點擊某一菜單項時，自動會出現(xiàn)該菜單項的所有子菜單，用純HTML網(wǎng)頁無法實現(xiàn)；又如驗證HTML表單(Form)提交信息的有效性，用戶名不能為空，密碼不能少于4位，郵政編碼只能是數(shù)字之類，用純HTML網(wǎng)頁也無法實現(xiàn)。要實現(xiàn)這些功能，就需要用到Javascript。 <br>



Javascript是一種腳本語言，比HTML要復(fù)雜。不過即便你先前不懂編程，也不用擔(dān)心，因為Javascript寫的程序都是以源代碼的形式出現(xiàn)的，也就是說你在一個網(wǎng)頁里看到一段比較好的Javascript代碼，恰好你也用得上，就可以直接拷貝，然后放到你的網(wǎng)頁中去。正因為可以借鑒、參考優(yōu)秀網(wǎng)頁的代碼，所以讓Javascript本身也變得非常受歡迎，從而被廣泛應(yīng)用。原來不懂編程的人，多參考Javascript示例代碼，也能很快上手。 <br>



Javascript主要是基于客戶端運行的，用戶點擊帶有Javascript的網(wǎng)頁，網(wǎng)頁里的Javascript就傳到瀏覽器，由瀏覽器對此作處理。前面提到的下拉菜單、驗證表單有效性等大量互動性功能，都是在客戶端完成的，不需要和Web Server發(fā)生任何數(shù)據(jù)交換， <br>
因此，不會增加Web Server的負(fù)擔(dān)。<br>



幾乎所有瀏覽器都支持Javascript，如Internet Explorer(IE)，F(xiàn)irefox， Netscape， Mozilla， Opera等。 <br>



簡單的Javascript入門示例 <br>



我們先來看一個最簡單的例子，代碼如下： <br>



<html> <br>



<head><title>一個最簡單的Javascript示例(僅使用了document.write)</title></head> <br>



<body> <br>



<script type="text/javascript"> <br>



document.write(Hello, World!); <br>



</script> <br>



</body> <br>
 


</html> <br>





在HTML網(wǎng)頁里插入Javascript語句，應(yīng)使用HTML的<script>。<script>這個tag有個屬性叫type，type="text/javascript"表示插入<script></script>其中的為Javascript語句。 <br>



上面的例子中，使用了document.wirte，這是Javascript中非常常用的語句，表示輸出文本。 <br>



我們還可以將這個例子寫得更加復(fù)雜寫，不但輸出文本，而且輸出帶HTML格式的文本。代碼如下： <br>



<script type="text/javascript">  <br>



document.write("Hello, World!");  <br>



</script>  <br>





在參考別人的Javascript代碼時，你也許會看到<script>里寫的不是 type="text/javascript"，而是language="javascript"。目前這兩種方法都可以表示<script></script>里的代碼是Javascript。其中l(wèi)anguage這個屬性在W3C的HTML標(biāo)準(zhǔn)中，已不再推薦使用。<br>



----


== Javascript寫在哪里 ==




Javascript程序可以放在： <br>



· <br>
HTML網(wǎng)頁的<body></body>里  <br>



· <br>
HTML網(wǎng)頁的<head></head>里  <br>



· <br>
外部.js文件里  <br>



Javascript在<body></body>之間 <br>


當(dāng)瀏覽器載入網(wǎng)頁Body部分的時候，就執(zhí)行其中的Javascript語句，執(zhí)行之后輸出的內(nèi)容就顯示在網(wǎng)頁中。 <br>



<html>  <br>
  


<head></head>  <br>



<body>  <br>



<script type="text/javascript">  <br>
 


....  <br>



</script>  <br>



</body>  <br>



</html> <br>





Javascript在<head></head>之間 <br>



有時候并不需要一載入HTML就運行Javascript，而是用戶點擊了HTML中的某個對象，觸發(fā)了一個事件，才需要調(diào)用Javascript。這時候，通常將這樣的Javascript放在HTML的<head></head>里。  <br>



<html> <br>



<head> <br>



<script type="text/javascript">  <br>
 


....  <br>
  


</script>  <br>



</head>  <br>



<body>  <br>



</body>  <br>



</html>  <br>





----


== Javascript放在外部文件里 ==




假使某個Javascript的程序被多個HTML網(wǎng)頁使用，最好的方法，是將這個Javascript程序放到一個后綴名為.js的文本文件里。  <br>



這樣做，可以提高Javascript的復(fù)用性，減少代碼維護(hù)的負(fù)擔(dān)，不必將相同的Javascript代碼拷貝到多個HTML網(wǎng)頁里，將來一旦程序有所修改，也只要修改.js文件就可以，不用再修改每個用到這個Javascript程序的HTML文件。 <br>



在HTML里引用外部文件里的Javascript，應(yīng)在Head里寫一句<script src="文件名"></script>，其中src的值，就是Javascript所在文件的文件路徑。示例代碼如下： <br>



<html>  <br>


<head>  <br>
 


<script src=""></script>  <br>
 


</head> <br>



<body>  <br>



</body>  <br>



</html> <br>




----

== 編寫 Javascript 代碼 ==




象很多其它編程語言一樣，Javascript 也是用文本格式編寫，由語句 (statements)，語句塊 (blocks) 和注釋 (comments) 構(gòu)成。語句塊 (blocks) 是由一些相互有關(guān)聯(lián)的語句構(gòu)成的語句集合。在一句語句 (statement) 里，你可以使用變量，字符串和數(shù)字 (literals)，以及表達(dá)式 (expressions)。<br>



----


== 語句 (Statements) ==




一個 Javascript 程序就是一個語句的集合。一句 Javascript 語句相當(dāng)于一句完整的句子。Javascript 語句將表達(dá)式 (expressions)用某種方式組合起來，得以完成某項任務(wù)。<br>



一句語句 (statement) 包含一個或多個表達(dá)式 (expressions)，關(guān)鍵詞 (keywords) 和運算符 (operators)。一般來說，一句語句的所有內(nèi)容寫在同一行內(nèi)。不過，一句語句也可以寫成多行。此外，多句語句也可以通過用分號 (;) 分隔，寫在同一行內(nèi)。<br>



建議：將每句語句以顯示的方式結(jié)束，即在每個語句最后加分號 (;) 來表示該句語句的結(jié)束。 <br>



以下是幾個語句的例子：<br>



aBird = "Robin"; <br>





上面這句語句表示將 "Robin" 這個字符串賦值給變量 aBird。<br>



var today = new Date(); <br>





上面這句語句表示將今天的日期值賦值給變量 today。<br>



----


== 語句塊 (Blocks) ==




通常來說，用 {} 括起來的一組 Javascript 語句稱為語句塊 (blocks)。語句塊通常可以看做是一句單獨的語句。也就是說，在很多地方，語句塊可以作為一句單個的語句被其它 Javascript 代碼調(diào)用。但是以 for 和 while 開頭的循環(huán)語句例外。另外要注意的是，<br>



注意：在語句塊里面的每句語句以分號 (;) 表示結(jié)束，但是語句塊本身不用分號。<br>



語句塊 (blocks) 通常用于函數(shù)和條件語句中。<br>



下面的例句中，{} 中間的 5 句語句構(gòu)成一個語句塊 (block)，而最后三行語句，不在語句塊內(nèi)。<br>



function convert(inches) {<br>



feet = inches / 12; <br>



miles = feet / 5280;<br>



nauticalMiles = feet / 6080;<br>



cm = inches * 2.54;<br>



meters = inches / 39.37;<br>



}<br>



km = meters / 1000; <br>



kradius = km;<br>



mradius = miles;<br>




----



== 注釋 (Comments) ==




為了程序的可讀性，以及便于日后代碼修改和維護(hù)時，更快理解代碼，你可以在 Javascript 程序里為代碼寫注釋(comments)。<br>



在 Javascript 語言里，用兩個斜杠 // 來表示單行注釋。見例句：<br>



aGoodIdea = "Comment your code thoroughly."; // 這是單行注釋。<br>





多行注釋則用 /* 表示開始， */ 表示結(jié)束。見例句：<br>



/*<br>



這是多行注釋<br>
行一。<br>



這是多行注釋<br>
行二。<br>



*/<br>





推薦使用多行的單行注釋來替代多行注釋，這樣有助于將代碼和注釋區(qū)分開來。<br>



----


== 表達(dá)式 (Expressions) ==




Javascript 表達(dá)式 (expressions) 相當(dāng)于 javascript 語言中的一個短語，這個短語可以判斷或者產(chǎn)生一個值，這個值可以是任何一種合法的 Javascript 類型 - 數(shù)字，字符串，對象等。最簡單的表達(dá)式是字符。<br>



表達(dá)式示例：<br>



3.9                       // 數(shù)字字符<br>



"Hello!"                  // 字符串字符<br>



false                     // 布爾字符<br>



null                      // null 值字符<br>



{x:1, y:2}                // 對象字符 <br>



[1,2,3]                   // 數(shù)組字符 <br>



function(x){return x*x;}  // 函數(shù)字符 <br>





以下是比較復(fù)雜的表達(dá)式示例：  <br>



var anExpression = 3 * (4 / 5) + 6; <br>



var aSecondExpression = Math.PI * radius * radius;  <br>



var aThirdExpression = aSecondExpression + "%" + anExpression;  <br>



var aFourthExpression = "(" + aSecondExpression + ") % (" + anExpression + ")";  <br>





----


== 賦值和等于 (Assignments and Equality) ==



 
Javascript 語言中使用等號 (=) 表示變量賦值。等號左邊的值可以是： <br>



·
變量  <br>



·
數(shù)組元素  <br>



·
對象屬性 <br>



等號右邊的值可以是任何類型的值，包括表達(dá)式。例句如下，表示將整數(shù) 8 賦值給 x 這個變量。 <br>
 


x = 8; <br>








'''注意：''' <br>
在 Javascript 里，要判斷兩個值是否相等，不用等號，而是用兩個等號來表示 (==)。 <br>
例句如下，表示 x 等于 8。  <br>



x == 8  <br>



----


== Javascript變量(Javascript Variables) ==




----


=== 什么是變量？ ===




變量是用來臨時存儲數(shù)值的容器。在程序中，變量存儲的數(shù)值是可以變化的。 <br>



----


=== 變量的聲明(Declaring Variables) ===




在使用一個變量之前，首先要聲明這個變量。Javascript里，使用var來聲明變量。 <br>



聲明變量有以下幾種方法： <br>



1. 一次聲明一個變量。例句如下： <br>



var a; <br>





2. 同時聲明多個變量，變量之間用逗號相隔。例句如下： <br>



var a, b, c; <br>





3.聲明一個變量時，同時賦予變量初始值。例句如下： <br>



var a=2; <br>





4. 同時聲明多個變量，并且賦予這些變量初始值，變量之間用逗號相隔。例句如下： <br>



var a=2, b=5; <br>





----



=== 變量的命名規(guī)則 ===





變量名可以是任意長度。變量名必須符合下列規(guī)則： <br>



·
變量名的第一個字符必須是英文字母，或者是下劃線符號(underscore)_  <br>



·
變量名的第一個字母不能是數(shù)字。其后的字符，可以是英文字母，數(shù)字，和下劃線符號符號(underscore)_  <br>



·
變量名不能是Javascript的保留字。  <br>






注意：Javascript代碼是區(qū)分大小寫的(case-sensitive)。變量myname和MyName表示的是兩個不同的變量。寫錯變量的大小寫，是初學(xué)者最常見的錯誤之一。 <br>






----


== Javascript條件語句 ==





在一般情況下，程序語句的執(zhí)行是按照其書寫順序來執(zhí)行的。前面的代碼先執(zhí)行，后面的代碼后執(zhí)行。但是這種簡單的自上而下的單向流程只適于用一些很簡單的程序。大多數(shù)情況下，需要根據(jù)邏輯判斷來決定程序代碼執(zhí)行的優(yōu)先順序。要改變程序代碼執(zhí)行的先后順序，任何編程語言都需要用到條件語句和循環(huán)語句，Javascript也不例外。  <br>






Javascript條件語句有以下幾種： <br>



·
單項條件結(jié)構(gòu) (if條件語句)  <br>



·
雙向條件結(jié)構(gòu) (if...else條件語句)   <br>



·
多項條件結(jié)構(gòu) (switch條件語句) <br>



單項條件結(jié)構(gòu) (if條件語句) <br>



If條件語句的語法如下： <br>



if (expression) <br>
 



{ <br> 




statement1 <br>




}  <br>





這句語法的含義是，如果符合expression條件，就執(zhí)行statement1代碼，反之，則不執(zhí)行statement1代碼。 <br>



下面的這個Javascript示例就用到了Javascript的if條件語句。首先用.length計算出字符串What's up?的長度，然后使用if語句進(jìn)行判斷，如果該字符串長度<100，就顯示"該字符串長度小于100。"。 <br>
 


<html> <br>
 


<head><title>一個使用到if條件語句的Javascript示例</title></head> <br>



<body> <br>
 


<script type="text/javascript">  <br>



var vText = "What's up?"; <br>



var vLen = vText.length; <br>



if (vLen < 100) <br>



{ <br>



document.write("<p> 該字符串長度小于100。</p>")  <br>



} <br>



</script>  <br>



</body>  <br>


</html>  <br>





'''演示示例'''



雙向條件結(jié)構(gòu) (if...else條件語句)  <br>



If...else條件語句的語法如下： <br>



if (expression) <br>



{ <br>



statement1 <br> 
 


} <br>



else <br>



{ <br>



statement2 <br>



} <br>





這句語法的含義是，如果符合expression條件，則執(zhí)行statement1代碼，反之，則執(zhí)行statement2代碼。 <br>



下面的Javascript示例使用了if...else條件語句判斷，如果vHour小于17，顯示"日安"，反之則顯示"晚安"。 <br>



<html> <br>



<head><title>使用if...else條件語句的Javascript示例</title></head> <br>



<body>  <br>



<script type="text/javascript">  <br>



var vDay = new Date()  <br>



var vHour = vDay.getHours()  <br>



if (vHour < 17)  <br>



{ <br>



document.write("<b>日安</b>")  <br>



} <br>
 


else  <br>



{  <br>



document.write("<b>晚安</b>") <br>



} <br>



</script> <br>



</body> <br>



</html> 
<br>




多項條件結(jié)構(gòu) (switch條件語句) <br>



Switch條件語句的語法如下： <br>



switch (expression)  <br>



{ <br>



case label1 : <br> 



statement1 <br>




break  <br>



case label2 : <br>



statement2 <br>




break <br>



... <br>
  


default : <br>



statementdefault <br>



}  <br>





這句語法的含義是，如果expression等于label1，則執(zhí)行statement1代碼；如果expression等于label2，則執(zhí)行statement2代碼；以此類推。如果expression不符合任何label，則執(zhí)行default內(nèi)的statementdefault   <br>




Javascript 循環(huán)語句 (Javascript Loop Statements)



在一般情況下，程序語句的執(zhí)行是按照其書寫順序來執(zhí)行的。前面的代碼先執(zhí)行，后面的代碼后執(zhí)行。但是這種簡單的自上而下的單向流程只適于用一些很簡單的程序。大多數(shù)情況下，需要根據(jù)邏輯判斷來決定程序代碼執(zhí)行的優(yōu)先順序。要改變程序代碼執(zhí)行的先后順序，任何編程語言都需要用到條件語句和循環(huán)語句，Javascript 也不例外。



這一節(jié)我們主要介紹 Javascript 循環(huán)語句。



Javascript 循環(huán)語句有以下幾種：



·
在循環(huán)的開頭測試表達(dá)式 (while 循環(huán)語句) 



·
在循環(huán)的末尾測試表達(dá)式 (do...while 循環(huán)語句) 



·
對對象的每個屬性都進(jìn)行操作 (for...in 循環(huán)語句) 



·
由計數(shù)器控制的循環(huán) (for 循環(huán)語句)



使用 for 循環(huán)語句



for 循環(huán)語句指定了一個計數(shù)器變量，一個測試條件，和更新計數(shù)器的行為。



每次循環(huán)重復(fù)之前，都要測試條件。如果測試成功，則執(zhí)行循環(huán)內(nèi)的代碼；如果測試不成功，則不執(zhí)行循環(huán)內(nèi)的代碼，而是執(zhí)行緊跟在循環(huán)后的第一行代碼。當(dāng)執(zhí)行該循環(huán)時，計數(shù)器變量在下次重復(fù)循環(huán)前被更新。



如果循環(huán)條件一直不滿足，則永不執(zhí)行該循環(huán)。如果條件一直滿足，則會導(dǎo)致無限循環(huán)。前一種，在某種情況下是需要的，但是后一種，基本不應(yīng)發(fā)生，所以寫循環(huán)條件時一定要注意。



for 循環(huán)語句示例代碼：



<html>



<head><title>一個使用到for循環(huán)的Javascript示例</title></head>



<body>



<p>



<script type="text/javascript">



for (i = 0; i <= 5; i++)



{



document.write(i)



document.write("<br>")



}



</script>



</p>



</body>



</html>







----



== 使用 for...in 循環(huán)語句 ==




Javascript 提供了一種特別的循環(huán)方式來遍歷一個對象的所有用戶定義的屬性或者一個數(shù)組的所有元素。for...in 循環(huán)中的循環(huán)計數(shù)器是一個字符串，而不是數(shù)字。它包含了當(dāng)前屬性的名稱或者表示當(dāng)前數(shù)組元素的下標(biāo)。<br>



----


=== for...in 循環(huán)語句示例代碼 ===




<html><br>



<head><title>一個使用到for...in循環(huán)的Javascript示例</title></head><br>



<body><br>



<script type="text/javascript"><br>



// 創(chuàng)建一個對象 myObject 以及三個屬性 sitename, siteurl, sitecontent。<br>



var myObject = new Object();<br>



myObject.sitename = "站長百科
";<br>



myObject.siteurl = "blabla.cn";  <br>



myObject.sitecFONT-SIZE: 9pt; FONT-FAMILY: 宋體; mso-ascii-font-family: 'Courier New'; mso-hansi-font-family: 'Courier New'; mso-bidi-font-family: 'Courier New'; mso-font-kerning: 0pt">網(wǎng)頁教程代碼圖庫的中文站點";  <br>



//遍歷對象的所有屬性  <br>



for (prop in myObject) <br>



{  <br>



document.write("屬性 '" + prop + "' 為 " + myObject[prop]);  <br>



document.write("<br>");  <br>



}  <br>



</script>  <br>



</body> <br>



</html>  <br>






----

=== 使用 while 和 do...while 循環(huán)語句 ===




while 循環(huán)和 for 循環(huán)類似。其不同之處在于， while 循環(huán)沒有內(nèi)置的計數(shù)器或更新表達(dá)式。如果你希望控制語句或語句塊的循環(huán)執(zhí)行，不只是通過 “運行該代碼 n 次”這樣簡單的規(guī)則，而是需要更復(fù)雜的規(guī)則，則應(yīng)該用 while 循環(huán)。    <br>


注意：由于 while 循環(huán)沒有顯式的內(nèi)置計數(shù)器變量，因此比其它類型的循環(huán)更容易產(chǎn)生無限循環(huán)。此外，由于不易發(fā)現(xiàn)循環(huán)條件是在何時何地被更新的，很容易編寫一個實際上從不更新條件的 while 循環(huán)。因此在編寫 while 循環(huán)時應(yīng)特別小心。  <br>



while 循環(huán)語句示例代碼：  <br>



<html>  <br>



<head><title>一個使用到while循環(huán)的Javascript示例</title></head>  <br>



<body>  <br>



<p>  <br>



<script type="text/javascript">  <br>



i = 0  <br>



while (i <= 5)  <br>



{  <br>



document.write(i + "<br>")  <br>



i++   <br>



}  <br>


 
</script>  <br>



</p>  <br>



</body>  <br>



</html>  <br>








在 JScript 中還有 do...while 循環(huán)與 while 循環(huán)相似，不同處在于它總是至少運行一次，因為是在循環(huán)的末尾檢查條件，而不是在開頭。  <br>



do...while 循環(huán)語句示例：  <br>



<html>  <br>



<head><title>一個使用到do...while循環(huán)的Javascript示例</title></head>  <br>



<body>  <br>
 


<p>  <br>



<script type="text/javascript">  <br>


<P class=MsoNormal style="BORDER-RIGHT: medium none; PADDING-RIGHT: 0cm; BORDER-TOP: medium none; PADDING-LEFT: 0cm; BACKGROUND: #f5fff5; PADDING-BOTTOM: 0cm; MARGIN: 1.5pt 0cm; BORDER-LEFT: medium none; PADDING-TOP: 0cm; BORDER-BOTTOM: medium none; TEXT-ALIGN: left; mso-pagination: widow-orphan; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt   <br>



[[category:PHP教程]]