將JavaScript 插入網(wǎng)頁(yè)的方法

使用

插入JavaScript

與在網(wǎng)頁(yè)中插入CSS的方式相似。使用下面的代碼可以在網(wǎng)頁(yè)中插入JavaScript：

...

其中的...就是代碼的內(nèi)容。JavaScript的插入位置不同，效果也會(huì)有所不同，還可以像CSS一樣，將JavaScript保存成一個(gè)外部文件，這些內(nèi)容會(huì)在下一節(jié)討論。

用JavaScript在網(wǎng)頁(yè)中輸出內(nèi)容

JavaScript使用document.write來(lái)輸出內(nèi)容。例如

document.write("我是菜鳥我怕誰(shuí)!");

將會(huì)輸出在網(wǎng)頁(yè)上輸出：

我是菜鳥我怕誰(shuí)!

學(xué)過(guò)編程的人應(yīng)該知道，“我是菜鳥我怕誰(shuí)!”兩側(cè)雙引號(hào)代表字符串的意思。不過(guò)不理解這個(gè)概念也無(wú)所謂，學(xué)到后面就知道什么時(shí)候應(yīng)該加雙引號(hào)，什么時(shí)候不需要加了。

對(duì)不支持JavaScript的瀏覽器隱藏代碼

有些瀏覽器可能不支持JavaScript，我們可以使用如下的方法對(duì)它們隱藏JavaScript代碼。

里的內(nèi)容對(duì)于不支持JavaScript的瀏覽器來(lái)說(shuō)就等同于一段注釋，而對(duì)于支持JavaScript的瀏覽器，這段代碼仍然會(huì)執(zhí)行。至于“//”符號(hào)則是JavaScript里的注釋符號(hào)，在這里添加它是為了防止JavaScript試圖執(zhí)行-->。不過(guò)通常情況下，現(xiàn)在的瀏覽器幾乎都支持JavaScript，即使是不支持的，也會(huì)了解如何合理地處理含有JavaScript的網(wǎng)頁(yè)。

插入JavaScript的位置

JavaScript腳本可以放在網(wǎng)頁(yè)的head里或者body部分，而且效果也不相同。

Body里的JavaScript

放在body部分的JavaScript腳本在網(wǎng)頁(yè)讀取到該語(yǔ)句的時(shí)候就會(huì)執(zhí)行，例如：

Head里的JavaScript

在head部分的腳本在被調(diào)用的時(shí)候才會(huì)執(zhí)行，例如：

....

添加外部JavaScript腳本

也可以像添加外部CSS一樣添加外部JavaScript腳本文件，其后綴通常為.js。例如：

如果很多網(wǎng)頁(yè)都需要包含一段相同的代碼，那么將這些代碼寫入一個(gè)外部JavaScript文件是最好的方法。此后，任何一個(gè)需要該功能的網(wǎng)頁(yè)，只需要引入這個(gè)js文件就可以了。

注意：腳本文件里頭不能再含有

注：放在body里的函數(shù)是一個(gè)例外，它并不會(huì)被執(zhí)行，而是等被調(diào)用時(shí)才會(huì)執(zhí)行。關(guān)于函數(shù)與調(diào)用的概念將在后面講到。

JavaScript 語(yǔ)句

本節(jié)介紹Javasctipt中的語(yǔ)句，語(yǔ)句是編程的一個(gè)基本概念

JavaScript語(yǔ)句

來(lái)看看我們之前例子。

< !--

document.write("我是菜鳥我怕誰(shuí)!");

//-->

< /script>

例子中的document.write("我是菜鳥我怕誰(shuí)!");

就是一個(gè)JavaScript語(yǔ)句，它可以告訴瀏覽器做出一個(gè)特定任務(wù)。特別的，這個(gè)語(yǔ)句是叫瀏覽器書寫出一段內(nèi)容。我們已經(jīng)知道，document.write的功能是輸出文本，所以上面那個(gè)語(yǔ)句就是讓瀏覽器輸出“我是菜鳥我怕誰(shuí)!”。

在JavaScript中，一行的結(jié)束就被認(rèn)定為語(yǔ)句的結(jié)束。但是最好還是要在結(jié)尾加上一個(gè)分號(hào)“;”來(lái)表示語(yǔ)句的結(jié)束。這是一個(gè)編程的好習(xí)慣，事實(shí)上在很多語(yǔ)言中句末的分號(hào)都是必須的。

JavaScript 代碼塊(Blocks)

看看下面這個(gè)代碼塊

{

document.write("

Thisis a header

");

document.write("

Thisis a paragraph

");

document.write("

Thisis another paragraph

");

}

< /script>

不就是幾個(gè)兩需的語(yǔ)句放在一起嗎?好像沒(méi)什么特別啊？

沒(méi)錯(cuò)，其實(shí)所謂的代碼塊，就是用大括號(hào)括起來(lái)的幾個(gè)語(yǔ)句。現(xiàn)在看來(lái)好像還沒(méi)什么用……不過(guò)學(xué)到后面就有用啦。

JavaScript 注釋

HTML、CSS里都有注釋，JavaScript里自然也有注釋，而且分為單行注釋與普通注釋兩種。

單行注釋

插入單行注釋的符號(hào)是“//”

// 我是注釋，我是注釋

document.write("我是菜鳥我怕誰(shuí)？");

多行注釋

多行注釋以"/*"開始，以"*/"結(jié)束。

/*

誰(shuí)說(shuō)菜鳥不會(huì)編程？

菜鳥不但會(huì)編程

還有書寫注釋的良好習(xí)慣

*/

document.write("我是菜鳥我怕誰(shuí)？");

相信你已經(jīng)了解注釋的作用了。HTML的注釋不會(huì)被瀏覽器作為HTML解釋，CSS注釋也不會(huì)被瀏覽器解釋。同理，JavaScript的注釋也不會(huì)被執(zhí)行。

注釋的作用就是記錄自己在編程時(shí)候的思路，以便以后自己閱讀代碼時(shí)可以馬上找到思路。同樣，注釋也有助于別人閱讀自己書寫的JavaScript代碼。總之書寫注釋是一個(gè)良好的編程習(xí)慣。

JavaScript 變量

變量？變量就是可以變的量唄

代數(shù)

在代數(shù)中，我們會(huì)遇到下面的基礎(chǔ)問(wèn)題，如果a的值為5，b的值為6，那么a與b的和是多少？在這個(gè)問(wèn)題中，我們就可以吧a和b看做變量，再設(shè)置一個(gè)變量c來(lái)保存a與b的和。

那么，上面的這個(gè)問(wèn)題就可以用如下的JavaScript代碼表示：

// 計(jì)算a + b的和

a = 5;//給變量a賦值

b = 5;//給變量b賦值

c = a + b;//c 為 a + b 的和

document.write(c);//輸出c的值

執(zhí)行結(jié)果：10

術(shù)語(yǔ)：變量名

在上面的例子中，我們用到了三個(gè)變量：a，b，c。這些都是變量的名字，在JavaScript中，我們需要用變量名來(lái)訪問(wèn)這個(gè)變量。在JavaScript中，變量名有如下規(guī)定：

·? ?? ???變量名區(qū)分大小寫，A與a是兩個(gè)不同變量。

·? ?? ???變量名必須以字母或者下劃線開頭。

術(shù)語(yǔ)：賦值

來(lái)看一個(gè)上面出現(xiàn)過(guò)的語(yǔ)句：

a = 5 ;

這個(gè)語(yǔ)句怎么讀出來(lái)呢？“a等于5”？

對(duì)不起，不對(duì)。應(yīng)該是“讓a等于5”，說(shuō)得專業(yè)一點(diǎn)，這叫“給a賦值”。

我們之前已經(jīng)提到過(guò)，a是變量，是可以變的，所以從某種角度來(lái)說(shuō)，它不等于任何值，只是暫時(shí)的等于某個(gè)值。來(lái)看下面這個(gè)例子，進(jìn)一步熟悉一下賦值與等于的關(guān)系：

a = 5;//讓a等于5，a的值暫時(shí)等于5

a = 6;//讓a等于6，a的值暫時(shí)等于6

再次強(qiáng)調(diào)，如果JavaScript是你學(xué)習(xí)的第一門編程語(yǔ)言，一定要注意區(qū)分“等于”和“賦值”這兩個(gè)不同的概念。

聲明變量

var a ; //聲明一個(gè)變量a

a = 5 ; //給變量賦值

其實(shí)在第一個(gè)例子中我們已經(jīng)看到了，JavaScript中可以不聲明變量直接賦值。不過(guò)先聲明變量是一個(gè)良好的編程習(xí)慣。

變量的數(shù)據(jù)類型

a = 5，b = 6，c = a +_b，天啊！我可不是來(lái)學(xué)數(shù)學(xué)的。別著急，往下看。

其實(shí)，在JavaScript中，變量是無(wú)所不能的容器，你可以吧任何東西存儲(chǔ)在變量里，例如：

var quanNeng1 = 123;//數(shù)字

var quanNeng2 = "一二三"//字符串

其中，quanNeng2這個(gè)變量存儲(chǔ)了一個(gè)字符串，字符串需要用一對(duì)引號(hào)括起來(lái)。變量還可以存儲(chǔ)更多的東西，例如數(shù)組，對(duì)象，布爾值等等，我們會(huì)在后面介紹這些內(nèi)容。

JavaScript操作符(一)——運(yùn)算操作符

操作符是用于在JavaScript中指定一定動(dòng)作的符號(hào)，其中算術(shù)操作符主要用來(lái)完成類似加減乘除的工作。

操作符舉例

看下面這段JavaScript代碼。

c = a + b;

其中的"="和"+"都是操作符。

JavaScript中還有很多這樣的操作符，例如，加減乘除是JavaScript中比較基本的幾個(gè)操作符，它們的意義與在數(shù)學(xué)中沒(méi)有什么差別。

JavaScript中最常見(jiàn)的操作符是賦值操作符“=”，上一節(jié)我們已經(jīng)強(qiáng)調(diào)過(guò)，它不是等于。

操作符的優(yōu)先級(jí)

我們都知道，在數(shù)學(xué)中，“a + b * c”這個(gè)式子中，懲罰將先于加法運(yùn)算。同樣，在JavaScript中，這個(gè)式子會(huì)按相同的順序執(zhí)行。我們稱之為“優(yōu)先級(jí)”，即“*”的優(yōu)先級(jí)高于“+”。

與數(shù)學(xué)中一樣，改變運(yùn)算順序的方法是添加括號(hào)，JavaScript中改變優(yōu)先級(jí)的方法也是添加括號(hào)。例如：

(a +ｂ) * c

字符串的連接

在JavaScript中，“+”不知代表加法，同樣也可以使用它來(lái)連接兩個(gè)字符串，例如：

example = "烏" +"龜";

在上面的例子中，example將包含“烏龜”這個(gè)字符串。這是由于“+”完成了“烏”和“龜”的連接，當(dāng)然了，你也可以把這種行為理解成字符串的加法。

自加一，自減一操作符

這里我們來(lái)看兩個(gè)非常常用的運(yùn)算符，自加一“++”；自減一“--”。首先來(lái)看一個(gè)例子：

a = 5;

a++;//a的值變?yōu)?

a--//a的值有變回5

上面的例子中，a++使得a的值在原來(lái)的基礎(chǔ)上增加1，a--則讓a在現(xiàn)在的基礎(chǔ)上在減去1。所以，其實(shí)“a++”也可以寫成

“a = a + 1”;//等同于a++

復(fù)合操作符

延續(xù)上面的例子，其實(shí)“a = a + 1”還可以寫成：

a += 1;//將a的值加1之后再賦給a

這樣把運(yùn)算和賦值結(jié)合到一起的操作符叫做符合操作符。上面我們看到的是加法與賦值的結(jié)合，JavaScript中還有其它的符合運(yùn)算符：

a += b;// a = a + b

a -= b;// a = a - b

a *= b;// a = a * b

a /= b;// a = a / b

JavaScript操作符(二)——比較操作符和邏輯操作符

操作符是用于在JavaScript中指定一定動(dòng)作的符號(hào)，其中邏輯操作符

比較操作符

上一節(jié)的if語(yǔ)句中，我們用到了“==”符號(hào)。它就是一個(gè)比較操作符，它表示的意思就是“相等嗎？”。

例如：a==b表示：“a與b的值相等嗎？”

在JavaScript中，這樣的比較操作符有很多，下面就列出這些操作符以及它們的含義。

·? ?? ???“>” —— a大于b嗎？

·? ?? ???“

·? ?? ???“>=” —— a大于等于b嗎？

·? ?? ???“<=” —— a小于等于b嗎？

·? ?? ???“==” —— a等于b嗎？

·? ?? ???“!=” —— a不等于b嗎？

邏輯操作符

數(shù)學(xué)里面的“a>b”在JavaScript中還表示為a>b；數(shù)學(xué)中的“b大于a，b小于c”是“a

b>a && ａ

你可能已經(jīng)猜到了，“&&”是而且的意思。

if(條件1&& 條件2)

{//代碼}

只有條件1、2同時(shí)滿足，代碼才會(huì)得到執(zhí)行。

類似的操作符還有“或者(||)”和“非(!)”

if(條件1 || 條件2)

{//代碼}

“||”表示或者的意思，只要條件1或2中有一個(gè)滿足，代碼就會(huì)得到執(zhí)行。

if(!條件)

{//代碼}

“！”表示非，也就是不是的意思，只有條件不滿足的時(shí)候，代碼才會(huì)得到執(zhí)行。

JavaScript if else語(yǔ)句(如果，否則)

ifelse是所有編程語(yǔ)言里都有的功能，它使得程序具有簡(jiǎn)單的判斷能力。

在介紹if之前，讓我們先來(lái)了解一下布爾值這個(gè)概念。

布爾(Bool)值

在變量一節(jié)中，我們?cè)?jīng)說(shuō)過(guò)，變量可以用來(lái)存儲(chǔ)布爾值。哪么布爾值的作用究竟是什么呢？簡(jiǎn)單的說(shuō)，布爾值的作用就是用來(lái)表示“真的假的”。所以布爾值其實(shí)只有兩種取值：真(true)和假(false)。

一個(gè)簡(jiǎn)單的if實(shí)例

其實(shí)“if else”的意思和字面意思是一樣的，就是“如果”、“否則”。還是讓我們來(lái)看一個(gè)使用if的例子吧。

假設(shè)你在為一個(gè)機(jī)器人編寫程序，這個(gè)機(jī)器人的功能是對(duì)使用者的愛(ài)好做出評(píng)價(jià)。

機(jī)器人：“你的愛(ài)好是什么？”

如果是JavaScript

機(jī)器人：“哇，有發(fā)展。”

那么對(duì)應(yīng)的JavaScript就應(yīng)該是

if (hobby == “JavaScript”)

{

document.write("有發(fā)展");

}

我們來(lái)解釋一下這段代碼。首先是一個(gè)“if”，它后面緊跟著一個(gè)括號(hào)，括號(hào)里則是一個(gè)條件，確切地說(shuō)是一個(gè)布爾值。當(dāng)條件成立的時(shí)候，這個(gè)值是true，“{}”里的語(yǔ)句將會(huì)得到執(zhí)行；否則這個(gè)值是flase，“{}”里的語(yǔ)句將被忽略。

具體到我們的例子，如果hobby變量的值是“JavaScript”，則回答“有發(fā)展”，夠則保持沉默。注意“==”這個(gè)符號(hào)，這個(gè)符號(hào)用來(lái)判斷左右兩邊是否相等。下一節(jié)會(huì)詳細(xì)地介紹。

如果你的愛(ài)好不是JavaScript，那么機(jī)器人什么也不會(huì)做。如果你希望它能對(duì)這種情況做出反應(yīng)，我們可以請(qǐng)else來(lái)幫忙，看下面的代碼：

var hobby = "JavaScript"

if (hobby == "JavaScript")

{

document.write("有發(fā)展");

}

else//如果愛(ài)好不是JavaScript

{

document.write("沒(méi)有評(píng)價(jià)……");

}

上面的代碼用到了“else”，它會(huì)給if添加一種“否則”的狀態(tài)。當(dāng)hobby不是“JavaScript”的時(shí)候，它會(huì)表明“沒(méi)有評(píng)價(jià)”。

if(你向讓機(jī)器人更聰明一點(diǎn))

{??用if的嵌套吧,看下面的代碼;}

var hobby = "JavaScript"

if ( hobby == "JavaScript")

{

document.write("有發(fā)展");

}

else if ( hobby == "football")//如果愛(ài)好是足球。

//注意：這個(gè)if是嵌套在上一個(gè)ifelse中的else中的

{

document.write("我X");

}

else//既不是JavaScript又不是足球

{

document.write("沒(méi)有評(píng)價(jià)……");

}

< /script>

第二個(gè)if只有在第一個(gè)if的條件不成立的時(shí)候才有機(jī)會(huì)執(zhí)行。最后再來(lái)看一個(gè)使用了if的實(shí)例吧。

JavaScript if else語(yǔ)句例子

ifelse是所有編程語(yǔ)言里都有的功能，它使得程序具有簡(jiǎn)單的判斷能力。這個(gè)例子使用JavaScript的if else語(yǔ)句實(shí)現(xiàn)簡(jiǎn)單的判斷。

請(qǐng)選擇你的業(yè)余愛(ài)好

窗體頂端

JavaScript

足球

籃球

其它

窗體底端

JavaScript代碼

function hobby(hob){

if( hob == "js")

{

alert("有發(fā)展");

}

else if ( hob == "football")//如果愛(ài)好是足球

{

alert("我X");

}

else if ( hob == "basketball")

{

alert("我也愛(ài)看！")

}

else//既不是JavaScript又不是足球

{

alert("沒(méi)有評(píng)價(jià)……");

}

}

HTML代碼

< p>

< label for="js">JavaScript

< p>

< label for="football">足球

< p>

< label for="basketball">籃球

< p>

< label for="other">其它

< /form>

JavaScript Switch語(yǔ)句

當(dāng)有很多種選項(xiàng)的時(shí)候，switch比if else更好的選擇。

上一節(jié)我們已經(jīng)看到，利用if else可以讓程序具有基本的判斷能力，而使用嵌套的if else則可以讓程序?qū)Χ喾N情況進(jìn)行判斷。但是當(dāng)情況的種類比較多的時(shí)候，使用switch語(yǔ)句將更加合適。

一個(gè)使用switch的實(shí)例

結(jié)舌我們需要實(shí)現(xiàn)如下的程序：輸入一個(gè)學(xué)生的考試成績(jī)，我們按照每十分一個(gè)登記將成績(jī)分等，程序?qū)⒏鶕?jù)成績(jī)的等級(jí)做出不同的評(píng)價(jià)。

很明顯，用if else可以實(shí)現(xiàn)這樣的程序，但是代碼會(huì)很復(fù)雜。而如果使用wwitch語(yǔ)句，代碼則會(huì)簡(jiǎn)單一些，首先來(lái)看一下思路，再把它翻譯成JavaScript。

思路：

1? ?? ???將分?jǐn)?shù)轉(zhuǎn)化為特定等級(jí)以便于switch處理

2? ?? ???判斷分?jǐn)?shù)屬于哪種等級(jí)

3? ?? ???根據(jù)分?jǐn)?shù)等級(jí)做出評(píng)價(jià)：例如低于60給出掛科評(píng)價(jià)。

翻譯成JavaScript就是如下代碼(注意注釋)：

//首先，我們用score變量來(lái)存儲(chǔ)分?jǐn)?shù)，假設(shè)為65

var score = 65;

//用分?jǐn)?shù)除以10，parseInt的作用是把它轉(zhuǎn)換為整數(shù)，

//暫時(shí)不用深究，()內(nèi)最后的結(jié)果為6

switch (parseInt(score / 10)) {

//switch開始實(shí)現(xiàn)判斷過(guò)程，case6得到滿足

case 0:

case 1:

case 2:

case 3:

case 4:

case 5:

//根據(jù)不同的等級(jí)做出不同的行為。

//冒號(hào)后面的語(yǔ)句就是行為

//case0到5的行為都是下面這個(gè)語(yǔ)句

degree = "恭喜你，又掛了！";

break;

case 6:

degree = "勉強(qiáng)及格";

break;

case 7:

degree = "湊合，湊合"

break;

case 8:

degree = "8錯(cuò)，8錯(cuò)";

break;

case 9:

case 10:

degree = "高手高手，佩服佩服";

}//end of switch

記得在每個(gè)case所執(zhí)行的語(yǔ)句里添加上一個(gè)break語(yǔ)句。為了理解break的作用，我們來(lái)看看如果沒(méi)有break會(huì)怎么樣：

switch (parseInt(score / 10)) {

case 0:

case 1:

case 2:

case 3:

case 4:

case 5:

degree = "恭喜你，又掛了！";

case 6:

degree = "勉強(qiáng)及格";

case 7:

degree = "湊合，湊合"

case 8:

degree = "8錯(cuò)，8錯(cuò)";

case 9:

case 10:

degree = "高手高手，佩服佩服";

}//end of switch

在上面的代碼中，如果成績(jī)是50分，那么score/10就是5，則case5后面的語(yǔ)句將會(huì)得到執(zhí)行，同樣，case6、7等等后面的語(yǔ)句都會(huì)得到執(zhí)行。也就是說(shuō)，我們會(huì)得到：”恭喜你，又掛了！勉強(qiáng)及格湊合，湊合8錯(cuò)，8錯(cuò)高手高手，佩服佩服“這樣沒(méi)有意義的評(píng)價(jià)。

這就是swtitch語(yǔ)句的執(zhí)行邏輯，當(dāng)發(fā)現(xiàn)某個(gè)case滿足后，該switch中在該case后的所有語(yǔ)句都會(huì)得到執(zhí)行。第一個(gè)例子中的break就是為了讓switch”停下來(lái)“。

看一個(gè)使用switch的實(shí)例

JavaScript Switch語(yǔ)句例子

使用JavaScript的Switch語(yǔ)句判斷成績(jī)的等級(jí)。

使用switch的示例

窗體頂端

成績(jī)

點(diǎn)擊提交

窗體底端

JavaScript代碼

function judge() {

var score;//分?jǐn)?shù)

var degree;//分?jǐn)?shù)等級(jí)

score = document.getElementById("score").value;

if (score > 100){

degree = '耍我？100分滿！';

}

else{

switch (parseInt(score / 10)) {

case 0:

case 1:

case 2:

case 3:

case 4:

case 5:

degree = "恭喜你，又掛了！";

break;

case 6:

degree = "勉強(qiáng)及格";

case 7:

degree = "湊合，湊合"

break;

case 8:

degree = "8錯(cuò)，8錯(cuò)";

break;

case 9:

case 10:

degree = "高手高手，佩服佩服";

}//end of switch

}//end of else

alert(degree);

}

HTML代碼

成績(jī)

點(diǎn)擊提交

JavaScript 彈出框

JavaScript中有三種彈出框:警告(alert)、確認(rèn)(confirm)以及提問(wèn)(prompt)。

警告(alert)

在訪問(wèn)網(wǎng)站的時(shí)候，你遇到過(guò)這樣的情況嗎？“咚”的一聲，一個(gè)小窗口出現(xiàn)在你面前，上面寫著一段警示性的文字，或是其它的提示信息。如果你不點(diǎn)擊確定，你就不能對(duì)網(wǎng)頁(yè)做任何的操作。沒(méi)錯(cuò)，這個(gè)“咚”的小窗口就是alert干的。

下面的代碼是一段使用alert的實(shí)例。

alert("我是菜鳥我怕誰(shuí)");

我的個(gè)人觀點(diǎn)是盡量少使用alert，它很不友好。甚至可能讓一些方可認(rèn)為你的網(wǎng)站很危險(xiǎn)。

看一個(gè)使用alert的實(shí)例

確認(rèn)(confirm)

確認(rèn)框用于讓用戶選擇某一個(gè)問(wèn)題是否符合實(shí)際情況。

“說(shuō)！是還是不是？快回答！”

如果你想表達(dá)這樣的意思，那么confirm再合適不過(guò)了。來(lái)看下面的代碼：我們用confirm("你是菜鳥嗎？")向訪客提問(wèn)，變量r則保存了訪客的回應(yīng)，它只可能有兩種取值：true或false。沒(méi)錯(cuò)，它是一個(gè)布爾值。confirm后面的語(yǔ)句則是我們對(duì)訪客回答做出的不同回應(yīng)。

var r=confirm("你是菜鳥嗎");

if (r==true)

{

document.write("彼此彼此");

}

else

{

document.write("佩服佩服");

}

< /script>

看一個(gè)使用confirm的實(shí)例

提問(wèn)(prompt)

prompt和confirm類似，不過(guò)它允許訪客隨意輸入回答。我們來(lái)修改一下之前switch的例子，我們根據(jù)分?jǐn)?shù)來(lái)做出不同的評(píng)價(jià)，不過(guò)那段程序并不完整，它根本就沒(méi)問(wèn)我們分?jǐn)?shù)，而是假設(shè)我得了65分。這太不公平了。現(xiàn)在我么就可以用prompt來(lái)向訪客提問(wèn)，用score存儲(chǔ)用戶輸入的回答，其余的事情就都由后面的switch來(lái)完成了。

function judge() {

var score;//分?jǐn)?shù)

var degree;//分?jǐn)?shù)等級(jí)

score = prompt("你的分?jǐn)?shù)是多少？")

if(score > 100){

degree = '耍我？100分滿！';

}

else{

switch (parseInt(score / 10)) {

case 0:

case 1:

case 2:

case 3:

case 4:

case 5:

degree = "恭喜你，又掛了！";

break;

case 6:

degree = "勉強(qiáng)及格";

break;

case 7:

degree = "湊合，湊合"

break;

case 8:

degree = "8錯(cuò)，8錯(cuò)";

break;

case 9:

case 10:

degree = "高手高手，佩服佩服";

}//end of switch

}//end of else

alert(degree);

}

看一個(gè)使用prompt的實(shí)例

JavaScript 彈出框 alert例子

alert用于在網(wǎng)頁(yè)中彈出警告。通常情況下盡量不要使用。

窗體頂端

調(diào)用alert

窗體底端

JavaScript代碼

function message(){

alert("我是菜鳥我怕誰(shuí)!!!");

}

HTML代碼

調(diào)用alert

JavaScript 彈出框confirm例子

確認(rèn)框用于讓用戶選擇某一個(gè)問(wèn)題是否符合實(shí)際情況。

窗體頂端

調(diào)用confirm

窗體底端

JavaScript代碼

function isCainiao() {

var r=confirm("你是菜鳥嗎");

if(r==true)

{

alert("彼此彼此");

}

else

{

alert("佩服佩服");

}

}

HTML代碼

調(diào)用confirm

JavaScript 彈出框prompt例子

prompt用來(lái)讓用戶輸入一個(gè)答案。

窗體頂端

點(diǎn)擊彈出prompt

窗體底端

JavaScript代碼

function judge() {

var score;//分?jǐn)?shù)

var degree;//分?jǐn)?shù)等級(jí)

score = prompt("你的分?jǐn)?shù)是多少？")

if(score > 100){

degree = '耍我？100分滿！';

}

else{

switch (parseInt(score / 10)) {

case 0:

case 1:

case 2:

case 3:

case 4:

case 5:

degree = "恭喜你，又掛了！";

break;

case 6:

degree = "勉強(qiáng)及格";

break;

case 7:

degree = "湊合，湊合"

break;

case 8:

degree = "8錯(cuò)，8錯(cuò)";

break;

case 9:

case 10:

degree = "高手高手，佩服佩服";

}//end of switch

}//end of else

alert(degree);

}

HTML代碼

點(diǎn)擊提交

?

JavaScript 函數(shù)

通常情況下，函數(shù)是完成特定功能的一段代碼。把一段完成特定功能的代碼塊放到一個(gè)函數(shù)里，以后就可以調(diào)用這個(gè)函數(shù)啦，這樣就省去了重復(fù)輸入大量代碼的麻煩。

還記得我們上一節(jié)所使用的alert嗎？其實(shí)它就是一個(gè)函數(shù)，我們就以它為例來(lái)看看函數(shù)的作用吧。如果沒(méi)有alert這個(gè)函數(shù)，制作一個(gè)警告框可能需要如下工作：

1? ?? ???在屏幕上顯示一個(gè)小窗口

2? ?? ???發(fā)出“咚”的提示音

3? ?? ???……

4? ?? ???將警告文字顯示在窗口中

5? ?? ???給出一個(gè)確定按鈕

6? ?? ???……

然后有了alert這個(gè)函數(shù)之后，你只需要寫下面一行代碼：

alert("警告文字");

正如上面所說(shuō)的，一個(gè)函數(shù)的作用就是完成一項(xiàng)特定的任務(wù)。如果沒(méi)有函數(shù)時(shí)，完成一項(xiàng)任務(wù)可能需要五行、十行、甚至更多的代碼。每次需要完成這個(gè)任務(wù)的時(shí)候都重寫一遍代碼顯然不是一個(gè)好主意。這是我們就可以編寫一個(gè)函數(shù)來(lái)完成這個(gè)任務(wù)，以后只要調(diào)用這個(gè)函數(shù)就可以了。

簡(jiǎn)單的函數(shù)定義

定義一個(gè)函數(shù)

說(shuō)了這么多，那么究竟如何定義一個(gè)函數(shù)呢？看看下面的格式：

function 函數(shù)名(){

函數(shù)代碼;

}

把“函數(shù)名”替換為你想要的名字，把“代碼”替換為完成特定功能的代碼，函數(shù)就定義好了。了解了如何定義函數(shù)，我們就來(lái)自己編寫一個(gè)實(shí)現(xiàn)兩數(shù)相加的簡(jiǎn)單函數(shù)吧。

首先給函數(shù)起一個(gè)有意義的名字：“addTwoNum”？，好像太長(zhǎng)了，還是叫add2吧。它的代碼如下：

function add2(){

sum = 1 + 1;

alert(sum);

}

函數(shù)的調(diào)用

函數(shù)定義好了，如何調(diào)用呢？

其實(shí)可以通過(guò)很多種方法調(diào)用上面的函數(shù)，我們這里使用最簡(jiǎn)單的函數(shù)調(diào)用方式——按鈕的點(diǎn)擊事件，JavaScript事件會(huì)在后面介紹。試著點(diǎn)擊下面的按鈕調(diào)用定義好的函數(shù)：

窗體頂端

點(diǎn)擊提交

窗體底端

“等等，你這是騙人啊，根本不是兩書相加的函數(shù)啊，這個(gè)函數(shù)只能做1+1啊！”

帶參數(shù)的函數(shù)

好吧，我承認(rèn)我撒謊了，那個(gè)函數(shù)不能實(shí)現(xiàn)兩數(shù)相加。其實(shí)，函數(shù)的定義應(yīng)該是下面的格式：

function(參數(shù)1,參數(shù)2,參數(shù)3){

部分函數(shù)代碼……

……

}

按照這個(gè)格式，我們的函數(shù)應(yīng)該寫成：

function add2(x,y){

sum = x + y;

alert(sum);

}

x和y則是我們函數(shù)的兩個(gè)參數(shù)，調(diào)用函數(shù)的時(shí)候，我們就可以通過(guò)這兩個(gè)參數(shù)把兩個(gè)加數(shù)傳遞給函數(shù)了。例如，add2(3，4)會(huì)求3+4的和，add2(56,65)則會(huì)求出56和65的和。

“再等等！這函數(shù)沒(méi)有用啊，你吧結(jié)果alert出來(lái)，我想對(duì)結(jié)果做些處理怎么辦啊？”

帶返回值的函數(shù)

好吧，我們把a(bǔ)lert(sum)一行改成下面的代碼：

return sum;

return后面的值叫做返回值。使用下面的語(yǔ)句調(diào)用函數(shù)就可以將這個(gè)返回值存儲(chǔ)在變量中了。

result = add2(3,4);

該語(yǔ)句執(zhí)行后，result變量中的值為7(3+4)。值得說(shuō)明的是，我們的函數(shù)中，參數(shù)和返回值都是數(shù)字，其實(shí)它們也可以是字符串等其它類型。

JavaScript For 循環(huán)

所謂循環(huán)，就是重復(fù)執(zhí)行一段代碼。

前面我們已經(jīng)看到了，if else和switch是JavaScript具有了判斷的能力，但是老實(shí)說(shuō)，電腦的判斷能力和人比起來(lái)差遠(yuǎn)了。電腦更擅長(zhǎng)一件事情——不停地重復(fù)。我們?cè)贘avaScript中把這叫做循環(huán)(loop)。

for循環(huán)的簡(jiǎn)單例子——菜鳥報(bào)數(shù)

在了解for循環(huán)的語(yǔ)法之前，還是讓我們來(lái)看一個(gè)簡(jiǎn)單的例子吧：有十個(gè)菜鳥報(bào)數(shù)，“菜鳥1號(hào)、菜鳥2號(hào)”。有了for循環(huán)，很少的代碼就可以實(shí)現(xiàn)十個(gè)菜鳥的報(bào)數(shù)。

var i=1;

for (i=1;i<=10;i++)

{

document.write("菜鳥"+i+"號(hào)
");

}

結(jié)果如下：

菜鳥1號(hào)

菜鳥2號(hào)

菜鳥3號(hào)

菜鳥4號(hào)

菜鳥5號(hào)

菜鳥6號(hào)

菜鳥7號(hào)

菜鳥8號(hào)

菜鳥9號(hào)

菜鳥10號(hào)

for循環(huán)的工作方式

在上面那個(gè)例子中，循環(huán)恰好執(zhí)行了10次，那么和“for (i=1;i<=10;i++)”一句中的10是不是10次的意思呢？下面我們就來(lái)看看for循環(huán)的工作機(jī)制。

首先"i=1"叫做初始條件，也就是說(shuō)從哪里開始，特別的，我們的例子從i=1開始。

出現(xiàn)在第一個(gè)分號(hào)后面的"i<=10"表示判斷條件，每次循環(huán)都會(huì)先判斷這個(gè)條件是否滿足，如果滿足則繼續(xù)循環(huán)，否則停止循環(huán)，繼續(xù)執(zhí)行for循環(huán)后面的代碼。你可能想問(wèn)了，我們?cè)O(shè)定了i=0，豈不是永遠(yuǎn)都小于等于10嗎？來(lái)看第三個(gè)部分。

最后的"i++"表示讓i在自身的基礎(chǔ)上加1，這時(shí)每次循環(huán)后的動(dòng)作.也就是說(shuō)，每次循環(huán)結(jié)束，i都會(huì)比原來(lái)大1，執(zhí)行若干次循環(huán)之后，i<=10的條件就不滿足了，這時(shí)循環(huán)結(jié)束。for循環(huán)后面的代碼將得到執(zhí)行。

for循環(huán)總結(jié)

至此，我們可以吧for循環(huán)總結(jié)如下：

for(初始條件;判斷條件;循環(huán)后動(dòng)作)

{

循環(huán)代碼

}

JavaScript While循環(huán)

while循環(huán)重復(fù)執(zhí)行一段代碼，直到某個(gè)條件不再滿足。

循環(huán)的另一種方法

其實(shí)while循環(huán)和for循環(huán)的作用都是重復(fù)執(zhí)行代碼，例如下面這段代碼，和上一節(jié)for循環(huán)的輸出結(jié)果完全沒(méi)有區(qū)別。先來(lái)讀讀例子的代碼，下面會(huì)解釋為什么這個(gè)循環(huán)會(huì)和上一節(jié)的for循環(huán)等價(jià)。

var i=0;

while (i<=10)

{

document.write("菜鳥"+i+"號(hào)");

document.write("
");

i=i+1;

}

while循環(huán)的工作機(jī)制

讓我們來(lái)看看while循環(huán)的執(zhí)行過(guò)程：

while(判斷條件)

{

循環(huán)代碼

}

看起來(lái)好像比f(wàn)or循環(huán)少了點(diǎn)東西啊，只有一個(gè)判斷條件啊。其實(shí)這個(gè)循環(huán)也是有初始條件的，只不過(guò)在之前就已經(jīng)定義好了，例如上面例子中的"var i=0;"，至于變量i的增大，則是放到了循環(huán)體里面，其實(shí)這個(gè)過(guò)程和for沒(méi)有什么區(qū)別，也是變量i不斷變大，直到判斷條件不滿足，則循環(huán)結(jié)束。

do while結(jié)構(gòu)

do wile結(jié)構(gòu)的基本原理和while結(jié)構(gòu)是基本相同的，但是它保證循環(huán)體至少被執(zhí)行一次。因?yàn)樗窍葓?zhí)行代碼，后判斷條件。例子如下：

i = 0;

do

{

document.write("The number is " +??i);

document.write("
");

i++;

}

while (i <= 5)

JavaScript Break 與 Continue

Break可以跳出循環(huán)，Continue跳過(guò)本次循環(huán)。

break

break語(yǔ)句可以讓循環(huán)中途停止，直接執(zhí)行后面的代碼。格式如下：

while (i<10)

{

if(特殊情況)

break;

循環(huán)代碼

}

那么，當(dāng)特殊情況發(fā)生的時(shí)候，循環(huán)就會(huì)立即結(jié)束。看看下面的例子，我們的菜鳥7號(hào)到10號(hào)在寢室打麻將……

var i=0;

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

{

if (i==6)

{

break;//如果i是6的話就退出循環(huán)。

}

document.write("菜鳥"+i+"號(hào)
");

}

當(dāng)i=7的時(shí)候循環(huán)就會(huì)結(jié)束。

continue

continue的作用是僅僅跳過(guò)本次循環(huán)，而整個(gè)循環(huán)體繼續(xù)執(zhí)行。它的格式如下：

while (判斷條件)

{

if(特殊情況)

continue;

循環(huán)代碼

}

上面的循環(huán)中，當(dāng)特殊情況發(fā)生的時(shí)候，本次循環(huán)將被跳過(guò)，而后續(xù)的循環(huán)則不會(huì)受到影響，來(lái)看看下面的例子：菜鳥6號(hào)外出學(xué)習(xí)JavaScript去了。

var i=0

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

{

if (i==3)

{

continue;

}

document.write("The number is "+ i);

document.write("
");

}

上面的代碼中，i=6的那次循環(huán)將被跳過(guò).

JavaScript For...In循環(huán)

Javascript中的for in循環(huán)通常用來(lái)遍歷數(shù)組

for in遍歷數(shù)組

首先要了解什么是數(shù)組，所謂數(shù)組，其實(shí)就是一個(gè)保存了一組類似變量的一個(gè)集合。我們來(lái)看一個(gè)保存了愛(ài)好的數(shù)組實(shí)例：

var x;

var hobbies = new Array();//創(chuàng)建一個(gè)新的數(shù)組

hobbies[0] = "JavaScript";

hobbies[1] = "CSS";

hobbies[2] = "籃球";

for (x in hobbies)//數(shù)組中的每一個(gè)變量

{

document.write(hobbies[x] + "
");

}

< /script>

< /body>

輸出結(jié)果如下：

JavaScript

CSS

籃球

我們來(lái)分析一下上面的例子：

var hobbies = new Array();一句創(chuàng)建了一個(gè)新的數(shù)組。

hobbies[0] ="JavaScript";以及之后的兩句則是給hobbies數(shù)組賦值。這與我們之前見(jiàn)過(guò)的變量賦值不太一樣，hobbies后面多出一個(gè)"[0]"，這個(gè)是變量的索引。我們之前已經(jīng)說(shuō)了，數(shù)組是變量的集合，因此我們?cè)谫x值之前需要指明給數(shù)組中的哪一個(gè)變量賦值。在這里，"[0]"表示的是hobbies數(shù)組所包含的第一個(gè)變量，沒(méi)錯(cuò)，數(shù)組的索引是從0開始的，開始可能有點(diǎn)別扭，慢慢就習(xí)慣了。

最后的for in循環(huán)就很好理解了，

for (x in hobbies)//數(shù)組中的每一個(gè)變量

{

document.write(hobbies[x] + "
");

}

表示遍歷hobbies數(shù)則的所有變量，并且將他們逐一輸出。

JavaScript事件

我們之前提到過(guò)函數(shù)的調(diào)用。函數(shù)定義之后，默認(rèn)是不會(huì)執(zhí)行的，這時(shí)候就需要一些事件來(lái)觸發(fā)這個(gè)函數(shù)的執(zhí)行。

事件簡(jiǎn)介

JavaScript很多有很多事件，例如鼠標(biāo)的點(diǎn)擊、移動(dòng)，網(wǎng)頁(yè)的載入和關(guān)閉。我們先來(lái)定義一個(gè)函數(shù)，再看幾個(gè)事件的實(shí)例。

統(tǒng)一的示例函數(shù)：

function displaymessage()

{

alert("我是菜鳥我怕誰(shuí)!");

}

< /script>

函數(shù)的事件很簡(jiǎn)單，只是顯示一條消息。

點(diǎn)擊事件

使用點(diǎn)擊事件調(diào)用，需要給元素設(shè)置onclick屬性。示例代碼如下：

onclick調(diào)用函數(shù)

實(shí)際效果如下，由于設(shè)置了οnclick="displaymessage()"，因此點(diǎn)擊按鈕則會(huì)調(diào)用函數(shù)。

窗體頂端

onclick調(diào)用函數(shù)

窗體底端

下面再來(lái)看看鼠標(biāo)移出和經(jīng)過(guò)的事件。

鼠標(biāo)經(jīng)過(guò)、移出事件

鼠標(biāo)經(jīng)過(guò)事件，試著把鼠標(biāo)移動(dòng)到這個(gè)div里面，將會(huì)調(diào)用函數(shù)。

窗體頂端

鼠標(biāo)滑過(guò)調(diào)用函數(shù)

窗體底端

使用鼠標(biāo)經(jīng)過(guò)事件調(diào)用函數(shù)的代碼如下：

鼠標(biāo)滑過(guò)調(diào)用函數(shù)

鼠標(biāo)移出事件，試著把鼠標(biāo)移動(dòng)到這個(gè)div里面，再移動(dòng)出去，將會(huì)調(diào)用函數(shù)。

窗體頂端

鼠標(biāo)移出調(diào)用函數(shù)

窗體底端

使用鼠標(biāo)移出事件調(diào)用函數(shù)的代碼如下：

鼠標(biāo)移出調(diào)用函數(shù)

更多事件

JavaScript中還有很多事件，完整的列表可以看看本節(jié)筆記的參考。

JavaScript調(diào)試

try、catch

try、catch用來(lái)調(diào)試一段可能出錯(cuò)的代碼：

try {

//要調(diào)試的代碼

}

catch(e){

//如果出現(xiàn)錯(cuò)誤將會(huì)執(zhí)行這個(gè)代碼塊

}

finally{

//無(wú)論是否出錯(cuò)都會(huì)執(zhí)行的代碼

}

JavaScript 特殊字符

JavaScript中有一些特殊的字符，如果想要在字符串中使用，需要加上一個(gè)反斜線。

遇到問(wèn)題的字符串

我們?cè)谥耙呀?jīng)看過(guò)好多應(yīng)用字符串的例子，例如

document.write("我是菜鳥我怕誰(shuí)!");

輸出將是：我是菜鳥我怕誰(shuí)!

現(xiàn)在如果我們想要輸出：小明說(shuō)："我是菜鳥我怕誰(shuí)？"。

該怎么辦呢？雙引號(hào)被當(dāng)作javascript標(biāo)記字符串開始和結(jié)束的符號(hào)，我們?cè)趺茨茉谧址镆腚p引號(hào)呢?看看下面這個(gè)例子。

document.write("小明說(shuō)：\"我是菜鳥我怕誰(shuí)？\"。");

我們?cè)陔p引號(hào)前面加上一個(gè)反斜線就可以了。在JavaScript中有很多這樣具有功能的特殊字符，如果需要把它們插入字符串都需要在前面加上一個(gè)反斜線"\"。

特殊字符列表

JavaScript特殊字符代碼代碼

輸出

\'

單引號(hào)

\"

雙引號(hào)

\&

與符號(hào)

\\

反斜線

\n

換行

\r

回車

\t

制表符

\b

后退

\f

form??feed(小菜鳥：沒(méi)弄明白)

JavaScript 指導(dǎo)準(zhǔn)則

在書寫JavaScript的過(guò)程中，應(yīng)該記住它是區(qū)分大小寫的，可以有多余空白的，使用"\"表示本行未完。

JavaScript區(qū)分大小寫(大小寫敏感)

變量名和函數(shù)名都區(qū)分大小寫。

空格

多余的空格是被忽略的。例如下面兩個(gè)語(yǔ)句

a=b+c;

a = b + c ;

他們是等價(jià)的。

表示本行未完”\”

前面已經(jīng)說(shuō)過(guò)，瀏覽器讀到一行末尾會(huì)自動(dòng)判定本行已經(jīng)結(jié)束，不過(guò)我們可以通過(guò)在行末添加一個(gè)“\”來(lái)告訴瀏覽器本行沒(méi)有結(jié)束。

document.write("Hello \

World!")

和

document.write("我是菜鳥我怕誰(shuí)!")

是完全一樣的。

總結(jié)

以上是生活随笔為你收集整理的java swt 菜鸟教程_编程基础学习JS的入门教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。