Javascript簡介

Javascript是一種解釋性的，基于對象的腳本語言(an interpreted, object-based scripting language)。

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

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

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

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

簡單的Javascript入門示例

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

<html>

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

<body>

document.write("Hello, World!");

</script>

</body>

</html>

代碼演示

<html>
<head><title>一個最簡單的Javascript示例(僅使用了document.write)</title></head>
<body>
<script type="text/javascript">
document.write("Hello, World!");
</script>
</body>
</html>

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

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

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

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

</script>

代碼演示

<html>
<head><title>用document.write輸出帶格式的HTML文本的Javascript示例</title></head>
<body>

</body>
</html>

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

Javascript寫在哪里

Javascript程序可以放在：

HTML網(wǎng)頁的<body></body>里
HTML網(wǎng)頁的<head></head>里
外部.js文件里

Javascript在<body></body>之間

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

<html>

<body>

....

</script>

</body>

</html>

代碼演示

<html>
<head><title>用document.write輸出帶格式的HTML文本的Javascript示例</title></head>
<body>

</body>
</html>

Javascript在<head></head>之間

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

<html>

<head>

....

</script>

</head>

<body>

</body>

</html>

代碼演示

<html>
<head>
<style>
div {border:1px solid #00FF00;width:100px;text-align:center;cursor:hand;}
</style>
<script type="text/javascript">
function clickme()
{
alert("You clicked me!")
}
</script>
</head>

<body>
<p>請點擊下面的“click me”。</p>
<div onclick = "clickme()" >click me</div>
</body>
</html>

Javascript放在外部文件里

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

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

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

<html>

<head>

</head>

<body>

</body>

</html>

代碼演示

<html>
<head>
<style>
div {border:1px solid #00FF00;width:100px;text-align:center;cursor:hand;}
</style>
<script src="../asdocs/js_tutorials/common.js"></script>
</head>
<body>
<p>請點擊下面的“click me”。</p>
<div onclick = "clickme()" >click me</div>
</body>
</html>

演示示例里的common.js其實就是一個文本文件，內(nèi)容如下：

function clickme()

{

alert("You clicked me!")

}

Javascript 教程 -- 編寫 Javascript 代碼

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

語句 (Statements)

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

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

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

以下是幾個語句的例子：

aBird = "Robin";

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

var today = new Date();

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

語句塊 (Blocks)

通常來說，用 {} 括起來的一組 Javascript 語句稱為語句塊 (blocks)。語句塊通?？梢钥醋鍪且痪鋯为毜恼Z句。也就是說，在很多地方，語句塊可以作為一句單個的語句被其它 Javascript 代碼調(diào)用。但是以 for 和 while 開頭的循環(huán)語句例外。另外要注意的是，

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

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

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

function convert(inches) {

feet = inches / 12;
miles = feet / 5280;
nauticalMiles = feet / 6080;
cm = inches * 2.54;
meters = inches / 39.37;
}
km = meters / 1000;
kradius = km;

mradius = miles;

注釋 (Comments)

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

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

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

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

這是多行注釋行一。

這是多行注釋行二。

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

表達式 (Expressions)

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

表達式示例：

3.9 // 數(shù)字字符

"Hello!" // 字符串字符

false // 布爾字符

null // null 值字符

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

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

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

以下是比較復(fù)雜的表達式示例：

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

var aSecondExpression = Math.PI * radius * radius;

var aThirdExpression = aSecondExpression + "%" + anExpression;

var aFourthExpression = "(" + aSecondExpression + ") % (" + anExpression + ")";

賦值和等于 (Assignments and Equality)

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

變量
數(shù)組元素
對象屬性

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

x = 8;

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

x == 8

Javascript變量(Javascript Variables)

什么是變量？

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

變量的聲明(Declaring Variables)

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

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

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

var a;

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

var a, b, c;

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

var a=2;

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

var a=2, b=5;

變量的命名規(guī)則

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

變量名的第一個字符必須是英文字母，或者是下劃線符號(underscore)_
變量名的第一個字母不能是數(shù)字。其后的字符，可以是英文字母，數(shù)字，和下劃線符號符號(underscore)_
變量名不能是Javascript的保留字(參見Javascript保留字)。

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

Javascript常用運算符(Operators)

Javascript條件語句(Javascript Conditional Statements)

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

這一節(jié)我們主要介紹Javascript條件語句。

Javascript條件語句有以下幾種：

單項條件結(jié)構(gòu) (if條件語句)
雙向條件結(jié)構(gòu) (if...else條件語句)
多項條件結(jié)構(gòu) (switch條件語句)

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

<p>Javascript示例代碼解釋：這個Javascript示例用到了Javascript的if條件語句。
首先用.length計算出字符串What's up?的長度，然后使用if語句。if語句的內(nèi)容是：如果該字符串長度<100，就顯示"該字符串長度小于100。"。
</p>

</body>
</html>

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

if (vHour < 17)
{
document.write("<b>日安</b>")
}
else
{
document.write("<b>晚安</b>")
}
</script>

<p>Javascript代碼示例解釋：首先將今天的日期賦值給變量vDay，然后用.getHours得出vDay的小時數(shù)，賦值給變量vHour，然后使用if...else條件語句判斷，如果vHour小于17，顯示"日安"，反之則顯示"晚安"。</p>

</body>
</html>

<html>
<head><title>使用swith條件語句的Javascript示例</title></head>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write("<b>總算熬到星期五了。</b>")
break
case 6:
document.write("<b>哈哈，周末啦！</b>")
break
case 0:
document.write("<b>明天又要上班，想想就煩。</b>")
break
default:
document.write("<b>每個工作日慢得都象蝸牛爬啊！</b>")
}
</script>
<p>該Javascript示例解釋：首先將今天的日期值賦值給變量d，然后用.getDay得出天數(shù)，賦值給變量theDay，然后使用switch條件語句。如果theDay等于5，表示是星期五；如果是6，表示是星期六；如果是0，表示是星期天；如果是其它數(shù)，表示是星期一到星期四。根據(jù)值的不同，顯示不同的內(nèi)容。</p>
</body>
</html>

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

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

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

在循環(huán)的開頭測試表達式 (while 循環(huán)語句)
在循環(huán)的末尾測試表達式 (do...while 循環(huá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>

<p>Javascript示例代碼解釋：這個Javascript示例用到了for循環(huán)語句。
循環(huán)語句允許重復(fù)執(zhí)行一行或數(shù)行代碼，for循環(huán)要使用一個計數(shù)器變量，每重復(fù)一次循環(huán)之后，計數(shù)器變量的值就會增加或者減少。這個Javascript示例中，計數(shù)器變量為i，i初始值為0，i++表示每次重復(fù)執(zhí)行后i的值就加1，終止循環(huán)條件為i<=5，也就是說，一旦i的值大于5，就終止循環(huán)。該示例中，重復(fù)循環(huán)的語句是for循環(huán)里面的兩句document.write語句。</p>

</body>
</html>

<html>
<head>
<title>一個使用到for...in循環(huán)的Javascript示例</title>
</head>
<body>
<script type="text/javascript">
// 創(chuàng)建一個對象 myObject 以及三個屬性 sitename, siteurl, sitecontent。
var myObject = new Object();
myObject.sitename = "布啦布啦";
myObject.siteurl = "blabla.cn";
myObject.sitecontent = "網(wǎng)頁教程代碼圖庫的中文站點";
//遍歷對象的所有屬性
for (prop in myObject)
{
document.write("屬性 '" + prop + "' 為 " + myObject[prop]);
document.write("<br>");
}
</script>
</body>
</html>

<html>
<head>
<title>一個使用到while循環(huán)的Javascript示例</title>
</head>
<body>
<p>
<script type="text/javascript">
i = 0
while (i <= 5)
{
document.write(i + "<br>")
i++
}
</script>
</p>
<p>Javascript示例代碼解釋：這個Javascript示例用到了while循環(huán)語句。
循環(huán)語句允許重復(fù)執(zhí)行一行或數(shù)行代碼，while后面緊跟的是終止循環(huán)的條件。這個Javascript示例中，設(shè)一個變量為i，i初始值為0，i++表示每次重復(fù)執(zhí)行后i的值就加1，終止循環(huán)條件為while (i <= 5)，也就是說，一旦i的值大于5，就終止循環(huán)。該示例中，重復(fù)循環(huán)的語句是while循環(huán)里面的document.write語句。</p>
</body>
</html>

<html>
<head>
<title>一個使用到do...while循環(huán)的Javascript示例</title>
</head>
<body>
<p>
<script type="text/javascript">
i = 0
do
{
document.write( i + "<br>")
i++
}
while (i <= 5)
</script>
</p>
<p>Javascript示例代碼解釋：這個Javascript示例用到了do...while循環(huán)語句。
循環(huán)語句允許重復(fù)執(zhí)行一行或數(shù)行代碼，do后面跟的是重復(fù)執(zhí)行的代碼，while后面跟的是終止循環(huán)的條件。這個Javascript示例中，設(shè)一個變量為i，i初始值為0，i++表示每次重復(fù)執(zhí)行后i的值就加1，終止循環(huán)條件為while (i <= 5)，也就是說，一旦i的值大于5，就終止循環(huán)。該示例中，重復(fù)循環(huán)的語句是while循環(huán)里面的document.write語句。</p>
</body>
</html>

<html>
<head>
<title>一個用break中斷循環(huán)的Javascript代碼示例</title>
<script type="text/javascript">
function BreakTest(breakpoint){
var i = 0;
var m = 0;
while (i < 100)
{
//當(dāng) i 等于breakpoint時，中斷循環(huán)
if (i == breakpoint)
break;
m=m + i;
i++;
}
return(m);
}
</script>
</head>
<body>

</body>
</html>

<html>
<head>
<title>一個用continue跳過后面代碼，開始循環(huán)的下一次重復(fù)的Javascript示例代碼</title>
</head>
<body>

</body>
</html>

Javascript保留字(Javascript Reserved Words)

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

Javascript簡介

簡單的Javascript入門示例

Javascript寫在哪里

Javascript在<body></body>之間

Javascript在<head></head>之間

Javascript放在外部文件里

Javascript 教程 -- 編寫 Javascript 代碼

語句 (Statements)

語句塊 (Blocks)

注釋 (Comments)

表達式 (Expressions)

賦值和等于 (Assignments and Equality)

Javascript變量(Javascript Variables)

什么是變量？

變量的聲明(Declaring Variables)

變量的命名規(guī)則

Javascript常用運算符(Operators)

Javascript條件語句(Javascript Conditional Statements)

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

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

Javascript保留字(Javascript Reserved Words)