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

使用

插入JavaScript

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

...

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

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

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

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

將會輸出在網(wǎng)頁上輸出：

我是菜鳥我怕誰!

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

對不支持JavaScript的瀏覽器隱藏代碼

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

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

插入JavaScript的位置

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

Body里的JavaScript

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

Head里的JavaScript

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

....

添加外部JavaScript腳本

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

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

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

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

JavaScript 語句

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

JavaScript語句

來看看我們之前例子。

< !--

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

//-->

< /script>

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

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

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

JavaScript 代碼塊(Blocks)

看看下面這個代碼塊

{

document.write("

Thisis a header

");

document.write("

Thisis a paragraph

");

document.write("

Thisis another paragraph

");

}

< /script>

不就是幾個兩需的語句放在一起嗎?好像沒什么特別啊？

沒錯，其實所謂的代碼塊，就是用大括號括起來的幾個語句。現(xiàn)在看來好像還沒什么用……不過學(xué)到后面就有用啦。

JavaScript 注釋

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

單行注釋

插入單行注釋的符號是“//”

// 我是注釋，我是注釋

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

多行注釋

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

/*

誰說菜鳥不會編程？

菜鳥不但會編程

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

*/

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

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

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

JavaScript 變量

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

代數(shù)

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

那么，上面的這個問題就可以用如下的JavaScript代碼表示：

// 計算a + b的和

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

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

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

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

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

術(shù)語：變量名

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

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

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

術(shù)語：賦值

來看一個上面出現(xiàn)過的語句：

a = 5 ;

這個語句怎么讀出來呢？“a等于5”？

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

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

a = 5;//讓a等于5，a的值暫時等于5

a = 6;//讓a等于6，a的值暫時等于6

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

聲明變量

var a ; //聲明一個變量a

a = 5 ; //給變量賦值

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

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

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

其實，在JavaScript中，變量是無所不能的容器，你可以吧任何東西存儲在變量里，例如：

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

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

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

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

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

操作符舉例

看下面這段JavaScript代碼。

c = a + b;

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

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

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

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

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

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

(a +ｂ) * c

字符串的連接

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

example = "烏" +"龜";

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

自加一，自減一操作符

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

a = 5;

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

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

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

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

復(fù)合操作符

延續(xù)上面的例子，其實“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中指定一定動作的符號，其中邏輯操作符

比較操作符

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

例如：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同時滿足，代碼才會得到執(zhí)行。

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

if(條件1 || 條件2)

{//代碼}

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

if(!條件)

{//代碼}

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

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

ifelse是所有編程語言里都有的功能，它使得程序具有簡單的判斷能力。

在介紹if之前，讓我們先來了解一下布爾值這個概念。

布爾(Bool)值

在變量一節(jié)中，我們曾經(jīng)說過，變量可以用來存儲布爾值。哪么布爾值的作用究竟是什么呢？簡單的說，布爾值的作用就是用來表示“真的假的”。所以布爾值其實只有兩種取值：真(true)和假(false)。

一個簡單的if實例

其實“if else”的意思和字面意思是一樣的，就是“如果”、“否則”。還是讓我們來看一個使用if的例子吧。

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

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

如果是JavaScript

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

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

if (hobby == “JavaScript”)

{

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

}

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

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

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

var hobby = "JavaScript"

if (hobby == "JavaScript")

{

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

}

else//如果愛好不是JavaScript

{

document.write("沒有評價……");

}

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

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

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

var hobby = "JavaScript"

if ( hobby == "JavaScript")

{

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

}

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

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

{

document.write("我X");

}

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

{

document.write("沒有評價……");

}

< /script>

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

JavaScript if else語句例子

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

請選擇你的業(yè)余愛好

窗體頂端

JavaScript

足球

籃球

其它

窗體底端

JavaScript代碼

function hobby(hob){

if( hob == "js")

{

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

}

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

{

alert("我X");

}

else if ( hob == "basketball")

{

alert("我也愛看！")

}

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

{

alert("沒有評價……");

}

}

HTML代碼

< p>

< label for="js">JavaScript

< p>

< label for="football">足球

< p>

< label for="basketball">籃球

< p>

< label for="other">其它

< /form>

JavaScript Switch語句

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

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

一個使用switch的實例

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

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

思路：

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

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

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

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

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

var score = 65;

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

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

switch (parseInt(score / 10)) {

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

case 0:

case 1:

case 2:

case 3:

case 4:

case 5:

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

//冒號后面的語句就是行為

//case0到5的行為都是下面這個語句

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

break;

case 6:

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

break;

case 7:

degree = "湊合，湊合"

break;

case 8:

degree = "8錯，8錯";

break;

case 9:

case 10:

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

}//end of switch

記得在每個case所執(zhí)行的語句里添加上一個break語句。為了理解break的作用，我們來看看如果沒有break會怎么樣：

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錯，8錯";

case 9:

case 10:

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

}//end of switch

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

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

看一個使用switch的實例

JavaScript Switch語句例子

使用JavaScript的Switch語句判斷成績的等級。

使用switch的示例

窗體頂端

成績

點(diǎn)擊提交

窗體底端

JavaScript代碼

function judge() {

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

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

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錯，8錯";

break;

case 9:

case 10:

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

}//end of switch

}//end of else

alert(degree);

}

HTML代碼

成績

點(diǎn)擊提交

JavaScript 彈出框

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

警告(alert)

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

下面的代碼是一段使用alert的實例。

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

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

看一個使用alert的實例

確認(rèn)(confirm)

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

“說！是還是不是？快回答！”

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

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

if (r==true)

{

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

}

else

{

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

}

< /script>

看一個使用confirm的實例

提問(prompt)

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

function judge() {

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

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

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錯，8錯";

break;

case 9:

case 10:

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

}//end of switch

}//end of else

alert(degree);

}

看一個使用prompt的實例

JavaScript 彈出框 alert例子

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

窗體頂端

調(diào)用alert

窗體底端

JavaScript代碼

function message(){

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

}

HTML代碼

調(diào)用alert

JavaScript 彈出框confirm例子

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

窗體頂端

調(diào)用confirm

窗體底端

JavaScript代碼

function isCainiao() {

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

if(r==true)

{

alert("彼此彼此");

}

else

{

alert("佩服佩服");

}

}

HTML代碼

調(diào)用confirm

JavaScript 彈出框prompt例子

prompt用來讓用戶輸入一個答案。

窗體頂端

點(diǎn)擊彈出prompt

窗體底端

JavaScript代碼

function judge() {

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

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

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錯，8錯";

break;

case 9:

case 10:

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

}//end of switch

}//end of else

alert(degree);

}

HTML代碼

點(diǎn)擊提交

?

JavaScript 函數(shù)

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

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

1? ?? ???在屏幕上顯示一個小窗口

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

3? ?? ???……

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

5? ?? ???給出一個確定按鈕

6? ?? ???……

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

alert("警告文字");

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

簡單的函數(shù)定義

定義一個函數(shù)

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

function 函數(shù)名(){

函數(shù)代碼;

}

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

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

function add2(){

sum = 1 + 1;

alert(sum);

}

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

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

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

窗體頂端

點(diǎn)擊提交

窗體底端

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

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

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

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

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

……

}

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

function add2(x,y){

sum = x + y;

alert(sum);

}

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

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

帶返回值的函數(shù)

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

return sum;

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

result = add2(3,4);

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

JavaScript For 循環(huán)

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

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

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

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

var i=1;

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

{

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

}

結(jié)果如下：

菜鳥1號

菜鳥2號

菜鳥3號

菜鳥4號

菜鳥5號

菜鳥6號

菜鳥7號

菜鳥8號

菜鳥9號

菜鳥10號

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

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

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

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

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

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

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

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

{

循環(huán)代碼

}

JavaScript While循環(huán)

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

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

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

var i=0;

while (i<=10)

{

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

document.write("
");

i=i+1;

}

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

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

while(判斷條件)

{

循環(huán)代碼

}

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

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

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

i = 0;

do

{

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

document.write("
");

i++;

}

while (i <= 5)

JavaScript Break 與 Continue

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

break

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

while (i<10)

{

if(特殊情況)

break;

循環(huán)代碼

}

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

var i=0;

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

{

if (i==6)

{

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

}

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

}

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

continue

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

while (判斷條件)

{

if(特殊情況)

continue;

循環(huán)代碼

}

上面的循環(huán)中，當(dāng)特殊情況發(fā)生的時候，本次循環(huán)將被跳過，而后續(xù)的循環(huán)則不會受到影響，來看看下面的例子：菜鳥6號外出學(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)將被跳過.

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

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

for in遍歷數(shù)組

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

var x;

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

hobbies[0] = "JavaScript";

hobbies[1] = "CSS";

hobbies[2] = "籃球";

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

{

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

}

< /script>

< /body>

輸出結(jié)果如下：

JavaScript

CSS

籃球

我們來分析一下上面的例子：

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

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

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

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

{

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

}

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

JavaScript事件

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

事件簡介

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

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

function displaymessage()

{

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

}

< /script>

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

點(diǎn)擊事件

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

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

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

窗體頂端

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

窗體底端

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

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

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

窗體頂端

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

窗體底端

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

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

鼠標(biāo)移出事件，試著把鼠標(biāo)移動到這個div里面，再移動出去，將會調(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用來調(diào)試一段可能出錯的代碼：

try {

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

}

catch(e){

//如果出現(xiàn)錯誤將會執(zhí)行這個代碼塊

}

finally{

//無論是否出錯都會執(zhí)行的代碼

}

JavaScript 特殊字符

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

遇到問題的字符串

我們在之前已經(jīng)看過好多應(yīng)用字符串的例子，例如

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

輸出將是：我是菜鳥我怕誰!

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

該怎么辦呢？雙引號被當(dāng)作javascript標(biāo)記字符串開始和結(jié)束的符號，我們怎么能在字符串里引入雙引號呢?看看下面這個例子。

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

我們在雙引號前面加上一個反斜線就可以了。在JavaScript中有很多這樣具有功能的特殊字符，如果需要把它們插入字符串都需要在前面加上一個反斜線"\"。

特殊字符列表

JavaScript特殊字符代碼代碼

輸出

\'

單引號

\"

雙引號

\&

與符號

\\

反斜線

\n

換行

\r

回車

\t

制表符

\b

后退

\f

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

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

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

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

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

空格

多余的空格是被忽略的。例如下面兩個語句

a=b+c;

a = b + c ;

他們是等價的。

表示本行未完”\”

前面已經(jīng)說過，瀏覽器讀到一行末尾會自動判定本行已經(jīng)結(jié)束，不過我們可以通過在行末添加一個“\”來告訴瀏覽器本行沒有結(jié)束。

document.write("Hello \

World!")

和

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

是完全一樣的。

總結(jié)

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

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