將JavaScript 插入網頁的方法
使用
<script>標簽在網頁中插入Javascript代碼。
插入JavaScript
與在網頁中插入
CSS的方式相似。使用下面的代碼可以在網頁中插入JavaScript：
<scripttype="text/JavaScript">
...
</script>
其中的
...就是代碼的內容。JavaScript的插入位置不同，效果也會有所不同，還可以像CSS一樣，將JavaScript保存成一個外部文件，這些內容會在下一節討論。
用JavaScript在網頁中輸出內容
JavaScript使用
document.write來輸出內容。例如
<scripttype="text/JavaScript">
document.write("我是菜鳥我怕誰!");
</script>
將會輸出在網頁上輸出：
我是菜鳥我怕誰!
學過編程的人應該知道，
“我是菜鳥我怕誰!”兩側雙引號代表字符串的意思。不過不理解這個概念也無所謂，學到后面就知道什么時候應該加雙引號，什么時候不需要加了。
對不支持JavaScript的瀏覽器隱藏代碼
有些瀏覽器可能不支持
JavaScript，我們可以使用如下的方法對它們隱藏JavaScript代碼。
<html>
<body>
<script type="text/JavaScript">
<!--
document.write("我是菜鳥我怕誰!");
//-->
</script>
</body>
</html>
<!-- -->里的內容對於不支持
JavaScript的瀏覽器來說就等同於一段注釋，而對於支持JavaScript的瀏覽器，這段代碼仍然會執行。至於“//”符號則是JavaScript里的注釋符號，在這里添加它是為了防止JavaScript試圖執行-->。不過通常情況下，現在的瀏覽器幾乎都支持JavaScript，即使是不支持的，也會了解如何合理地處理含有JavaScript的網頁。
插入JavaScript的位置
JavaScript腳本可以放在網頁的
head里或者body部分，而且效果也不相同。
Body里的JavaScript
放在
body部分的JavaScript腳本在網頁讀取到該語句的時候就會執行，例如：
<html>
<body>
<script type="text/JavaScript">
<!--
document.write("我是菜鳥我怕誰!");
//-->
</script>
</body>
Head里的JavaScript
在
head部分的腳本在被調用的時候才會執行，例如：
<html>
<head>
<scripttype="text/JavaScript">
....
</script>
</head>
添加外部JavaScript腳本
也可以像添加外部
CSS一樣添加外部JavaScript腳本文件，其后綴通常為.js。例如：
<html>
<head>
<scriptsrc="scripts.js"></script>
</head>
<body>
</body>
</html>
如果很多網頁都需要包含一段相同的代碼，那么將這些代碼寫入一個外部
JavaScript文件是最好的方法。此后，任何一個需要該功能的網頁，只需要引入這個js文件就可以了。
注意：腳本文件里頭不能再含有
<script>標簽。
注：放在
body里的函數是一個例外，它並不會被執行，而是等被調用時才會執行。關於函數與調用的概念將在后面講到。
JavaScript 語句
本節介紹Javasctipt中的語句，語句是編程的一個基本概念
JavaScript語句
來看看我們之前例子。
<scripttype="text/JavaScript">
< !--
document.write("我是菜鳥我怕誰!");
//-->
< /script>
例子中的 document.write("我是菜鳥我怕誰!");
就是一個JavaScript語句，它可以告訴瀏覽器做出一個特定任務。特別的，這個語句是叫瀏覽器書寫出一段內容。我們已經知道，document.write的功能是輸出文本，所以上面那個語句就是讓瀏覽器輸出“我是菜鳥我怕誰!”。
在JavaScript中，一行的結束就被認定為語句的結束。但是最好還是要在結尾加上一個分號“;”來表示語句的結束。這是一個編程的好習慣，事實上在很多語言中句末的分號都是必須的。
JavaScript 代碼塊(Blocks)
看看下面這個代碼塊
<scripttype="text/javascript">
{
document.write("<h1>Thisis a header</h1>");
document.write("<p>Thisis a paragraph</p>");
document.write("<p>Thisis another paragraph</p>");
}
< /script>
不就是幾個兩需的語句放在一起嗎?好像沒什么特別啊？
沒錯，其實所謂的代碼塊，就是用大括號括起來的幾個語句。現在看來好像還沒什么用……不過學到后面就有用啦。
JavaScript 注釋
HTML、
CSS里都有注釋，JavaScript里自然也有注釋，而且分為單行注釋與普通注釋兩種。
單行注釋
插入單行注釋的符號是
“//”
<script type="text/javascript">
// 我是注釋，我是注釋
document.write("我是菜鳥我怕誰？");
</script>
多行注釋
多行注釋以
"/*"開始，以"*/"結束。
<scripttype="text/javascript">
/*
誰說菜鳥不會編程？
菜鳥不但會編程
還有書寫注釋的良好習慣
*/
document.write("我是菜鳥我怕誰？");
</script>
相信你已經了解注釋的作用了。
HTML的注釋不會被瀏覽器作為HTML解釋，CSS注釋也不會被瀏覽器解釋。同理，JavaScript的注釋也不會被執行。
注釋的作用就是記錄自己在編程時候的思路，以便以后自己閱讀代碼時可以馬上找到思路。同樣，注釋也有助於別人閱讀自己書寫的
JavaScript代碼。總之書寫注釋是一個良好的編程習慣。
JavaScript 變量
變量？變量就是可以變的量唄
代數
在代數中，我們會遇到下面的基礎問題，如果
a的值為5，b的值為6，那么a與b的和是多少？在這個問題中，我們就可以吧a和b看做變量，再設置一個變量c來保存a與b的和。
那么，上面的這個問題就可以用如下的
JavaScript代碼表示：
<scripttype="text/javascript">
// 計算a + b的和
a = 5;//給變量a賦值
b = 5;//給變量b賦值
c = a + b;//c 為 a + b 的和
document.write(c);//輸出c的值
</script>
執行結果：
10
術語：變量名
在上面的例子中，我們用到了三個變量：
a，b，c。這些都是變量的名字，在JavaScript中，我們需要用變量名來訪問這個變量。在JavaScript中，變量名有如下規定：
· 變量名區分大小寫，
A與a是兩個不同變量。
· 變量名必須以字母或者下划線開頭。
術語：賦值
來看一個上面出現過的語句：
a = 5 ;
這個語句怎么讀出來呢？
“a等於5”？
對不起，不對。應該是
“讓a等於5”，說得專業一點，這叫“給a賦值”。
我們之前已經提到過，
a是變量，是可以變的，所以從某種角度來說，它不等於任何值，只是暫時的等於某個值。來看下面這個例子，進一步熟悉一下賦值與等於的關系：
a = 5;//讓a等於5，a的值暫時等於5
a = 6;//讓a等於6，a的值暫時等於6
再次強調，如果
JavaScript是你學習的第一門編程語言，一定要注意區分“等於”和“賦值”這兩個不同的概念。
聲明變量
<scripttype="text/javascript">
var a ; //聲明一個變量a
a = 5 ; //給變量賦值
</script>
其實在第一個例子中我們已經看到了，
JavaScript中可以不聲明變量直接賦值。不過先聲明變量是一個良好的編程習慣。
變量的數據類型
a = 5，
b = 6， c = a +_b，天啊！我可不是來學數學的。別着急，往下看。
其實，在
JavaScript中，變量是無所不能的容器，你可以吧任何東西存儲在變量里，例如：
var quanNeng1 = 123;//數字
var quanNeng2 = "一二三"//字符串
其中，
quanNeng2這個變量存儲了一個字符串，字符串需要用一對引號括起來。變量還可以存儲更多的東西，例如數組，對象，布爾值等等，我們會在后面介紹這些內容。
JavaScript操作符(一)——運算操作符
操作符是用於在
JavaScript中指定一定動作的符號，其中算術操作符主要用來完成類似加減乘除的工作。
操作符舉例
看下面這段
JavaScript代碼。
c = a + b;
其中的
"="和"+"都是操作符。
JavaScript中還有很多這樣的操作符，例如，加減乘除是
JavaScript中比較基本的幾個操作符，它們的意義與在數學中沒有什么差別。
JavaScript中最常見的操作符是賦值操作符
“=”，上一節我們已經強調過，它不是等於。
操作符的優先級
我們都知道，在數學中，
“a + b * c”這個式子中，懲罰將先於加法運算。同樣，在JavaScript中，這個式子會按相同的順序執行。我們稱之為“優先級”，即“*”的優先級高於“+”。
與數學中一樣，改變運算順序的方法是添加括號，
JavaScript中改變優先級的方法也是添加括號。例如：
(a +ｂ) * c
字符串的連接
在
JavaScript中，“+”不知代表加法，同樣也可以使用它來連接兩個字符串，例如：
example = "烏" +"龜";
在上面的例子中，
example將包含“烏龜”這個字符串。這是由於“+”完成了“烏”和“龜”的連接，當然了，你也可以把這種行為理解成字符串的加法。
自加一，自減一操作符
這里我們來看兩個非常常用的運算符，自加一
“++”；自減一“--”。首先來看一個例子：
a = 5;
a++;//a的值變為6
a--//a的值有變回5
a++;//a的值變為6
a--//a的值有變回5
上面的例子中，
a++使得a的值在原來的基礎上增加1，a--則讓a在現在的基礎上在減去1。所以，其實“a++”也可以寫成
“a = a + 1”;//等同於a++
復合操作符
延續上面的例子，其實
“a = a + 1”還可以寫成：
a += 1;//將a的值加1之后再賦給a
這樣把運算和賦值結合到一起的操作符叫做符合操作符。上面我們看到的是加法與賦值的結合，
JavaScript中還有其它的符合運算符：
a += b;// a = a + b
a -= b;// a = a - b
a *= b;// a = a * b
a /= b;// a = a / b
JavaScript操作符(二)——比較操作符和邏輯操作符
操作符是用於在
JavaScript中指定一定動作的符號，其中邏輯操作符
比較操作符
上一節的
if語句中，我們用到了“==”符號。它就是一個比較操作符，它表示的意思就是“相等嗎？”。
例如：
a==b表示：“a與b的值相等嗎？”
在
JavaScript中，這樣的比較操作符有很多，下面就列出這些操作符以及它們的含義。
· “>” —— a大於
b嗎？
· “<” —— a小於
b嗎？
· “>=” —— a大於等於
b嗎？
· “<=” —— a小於等於
b嗎？
· “==” —— a等於
b嗎？
· “!=” —— a不等於
b嗎？
邏輯操作符
數學里面的
“a>b”在JavaScript中還表示為a>b；數學中的“b大於a，b小於c”是“a<b<c”，那么在JavaScript中是不是也一樣呢？對不起，JavaScript沒有那么聰明，你需要這么寫：
b>a && ａ<ｂ
你可能已經猜到了，
“&&”是而且的意思。
if(條件1&& 條件2)
{//代碼}
{//代碼}
只有條件
1、2同時滿足，代碼才會得到執行。
類似的操作符還有
“或者(||)”和“非(!)”
if(條件1 || 條件2)
{//代碼}
“||”表示或者的意思，只要條件
1或2中有一個滿足，代碼就會得到執行。
if(!條件)
{//代碼}
“！
”表示非，也就是不是的意思，只有條件不滿足的時候，代碼才會得到執行。
JavaScript if else語句（如果，否則）
ifelse是所有編程語言里都有的功能，它使得程序具有簡單的判斷能力。
在介紹
if之前，讓我們先來了解一下布爾值這個概念。
布爾(Bool)值
在變量一節中，我們曾經說過，變量可以用來存儲布爾值。哪么布爾值的作用究竟是什么呢？簡單的說，布爾值的作用就是用來表示
“真的假的”。所以布爾值其實只有兩種取值：真(true)和假(false)。
一個簡單的if實例
其實
“if else”的意思和字面意思是一樣的，就是“如果”、“否則”。還是讓我們來看一個使用if的例子吧。
假設你在為一個機器人編寫程序，這個機器人的功能是對使用者的愛好做出評價。
機器人：
“你的愛好是什么？”
如果是
JavaScript
機器人：
“哇，有發展。”
那么對應的
JavaScript就應該是
<script type="text/JavaScript">
if (hobby == “JavaScript”)
{
document.write("有發展");
}
</script>
我們來解釋一下這段代碼。首先是一個
“if”，它后面緊跟着一個括號，括號里則是一個條件，確切地說是一個布爾值。當條件成立的時候，這個值是true，“{}”里的語句將會得到執行；否則這個值是flase，“{}”里的語句將被忽略。
具體到我們的例子，如果
hobby變量的值是“JavaScript”，則回答“有發展”，夠則保持沉默。注意“==”這個符號，這個符號用來判斷左右兩邊是否相等。下一節會詳細地介紹。
如果你的愛好不是
JavaScript，那么機器人什么也不會做。如果你希望它能對這種情況做出反應，我們可以請else來幫忙，看下面的代碼：
<scripttype="text/JavaScript">
var hobby = "JavaScript"
if (hobby == "JavaScript")
{
document.write("有發展");
}
else//如果愛好不是JavaScript
{
document.write("沒有評價……");
}
if (hobby == "JavaScript")
{
document.write("有發展");
}
else//如果愛好不是JavaScript
{
document.write("沒有評價……");
}
</script>
上面的代碼用到了
“else”，它會給if添加一種“否則”的狀態。當hobby不是“JavaScript”的時候，它會表明“沒有評價”。
if(你向讓機器人更聰明一點
)
{ 用
if的嵌套吧,看下面的代碼;}
<scripttype="text/JavaScript">
var hobby = "JavaScript"
if ( hobby == "JavaScript")
{
document.write("有發展");
}
else if ( hobby == "football")//如果愛好是足球。
//注意：這個if是嵌套在上一個ifelse中的else中的
{
document.write("我X");
}
else//既不是JavaScript又不是足球
{
document.write("沒有評價……");
}
< /script>
var hobby = "JavaScript"
if ( hobby == "JavaScript")
{
document.write("有發展");
}
else if ( hobby == "football")//如果愛好是足球。
//注意：這個if是嵌套在上一個ifelse中的else中的
{
document.write("我X");
}
else//既不是JavaScript又不是足球
{
document.write("沒有評價……");
}
< /script>
第二個
if只有在第一個if的條件不成立的時候才有機會執行。最后再來看一個使用了if的實例吧。
JavaScript if else語句例子
ifelse是所有編程語言里都有的功能，它使得程序具有簡單的判斷能力。這個例子使用
JavaScript的if else語句實現簡單的判斷。
請選擇你的業余愛好
窗體頂端
JavaScript
足球
籃球
其它
窗體底端
JavaScript代碼
<scripttype="text/JavaScript">
function hobby(hob){
if( hob == "js")
{
alert("有發展");
}
else if ( hob == "football")//如果愛好是足球
{
alert("我X");
}
else if ( hob == "basketball")
{
alert("我也愛看！")
}
else//既不是JavaScript又不是足球
{
alert("沒有評價……");
}
}
</script>
HTML代碼
<form>
< p><input type="radio" name="browser"onclick="hobby(this.value)" value="js" id="js">
< label for="js">JavaScript</label></p>
< p><input type="radio" name="browser"onclick="hobby(this.value)" value="football"id="football">
< label for="football">足球</label></p>
< p><input type="radio" name="browser"onclick="hobby(this.value)" value="basketball"id="basketball">
< label for="basketball">籃球</label></p>
< p><input type="radio" name="browser"onclick="hobby(this.value)" value="other"id="other">
< label for="other">其它</label></p>
< /form>
< p><input type="radio" name="browser"onclick="hobby(this.value)" value="js" id="js">
< label for="js">JavaScript</label></p>
< p><input type="radio" name="browser"onclick="hobby(this.value)" value="football"id="football">
< label for="football">足球</label></p>
< p><input type="radio" name="browser"onclick="hobby(this.value)" value="basketball"id="basketball">
< label for="basketball">籃球</label></p>
< p><input type="radio" name="browser"onclick="hobby(this.value)" value="other"id="other">
< label for="other">其它</label></p>
< /form>
JavaScript Switch語句
當有很多種選項的時候，
switch比if else更好的選擇。
上一節我們已經看到，利用
if else可以讓程序具有基本的判斷能力，而使用嵌套的if else則可以讓程序對多種情況進行判斷。但是當情況的種類比較多的時候，使用switch語句將更加合適。
一個使用switch的實例
結舌我們需要實現如下的程序：輸入一個學生的考試成績，我們按照每十分一個登記將成績分等，程序將根據成績的等級做出不同的評價。
很明顯，用
if else可以實現這樣的程序，但是代碼會很復雜。而如果使用wwitch語句，代碼則會簡單一些，首先來看一下思路，再把它翻譯成JavaScript。
思路：
1 將分數轉化為特定等級以便於
switch處理
2 判斷分數屬於哪種等級
3 根據分數等級做出評價：例如低於
60給出掛科評價。
翻譯成
JavaScript就是如下代碼(注意注釋)：
<scripttype="text/JavaScript">
//首先，我們用score變量來存儲分數，假設為65
var score = 65;
var score = 65;
//用分數除以10，parseInt的作用是把它轉換為整數，
//暫時不用深究，()內最后的結果為6
switch (parseInt(score / 10)) {
switch (parseInt(score / 10)) {
//switch開始實現判斷過程，case6得到滿足
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
//根據不同的等級做出不同的行為。
//冒號后面的語句就是行為
//case0到5的行為都是下面這個語句
degree = "恭喜你，又掛了！";
break;
case 6:
degree = "勉強及格";
break;
break;
case 7:
degree = "湊合，湊合"
break;
case 8:
degree = "8錯，8錯";
break;
case 9:
case 10:
degree = "高手高手，佩服佩服";
}//end of switch
</script>
記得在每個
case所執行的語句里添加上一個break語句。為了理解break的作用，我們來看看如果沒有break會怎么樣：
<scripttype="text/JavaScript">
switch (parseInt(score / 10)) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
degree = "恭喜你，又掛了！";
case 6:
degree = "勉強及格";
case 7:
case 7:
degree = "湊合，湊合"
case 8:
degree = "8錯，8錯";
case 9:
case 10:
degree = "高手高手，佩服佩服";
}//end of switch
</script>
在上面的代碼中，如果成績是
50分，那么score/10就是5，則case5后面的語句將會得到執行，同樣，case6、7等等后面的語句都會得到執行。也就是說，我們會得到：”恭喜你，又掛了！勉強及格湊合，湊合8錯，8錯高手高手，佩服佩服“這樣沒有意義的評價。
這就是
swtitch語句的執行邏輯，當發現某個case滿足后，該switch中在該case后的所有語句都會得到執行。第一個例子中的break就是為了讓switch”停下來“。
看一個
使用switch的實例
JavaScript Switch語句例子
使用
JavaScript的Switch語句判斷成績的等級。
使用switch的示例
窗體頂端
成績
點擊提交
窗體底端
JavaScript代碼
<scripttype="text/JavaScript">
function judge() {
var score;//分數
var degree;//分數等級
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 = "勉強及格";
case 7:
degree = "湊合，湊合"
break;
case 8:
degree = "8錯，8錯";
break;
case 9:
case 10:
degree = "高手高手，佩服佩服";
}//end of switch
}//end of else
alert(degree);
}
</script>
HTML代碼
<form action="#"method="post">
<p>
<label for="score">成績</label>
<input name="score"id="score" type="text" />
</p>
<p>
<button value="點擊提交" >點擊提交</button>
</p>
</form>
JavaScript 彈出框
JavaScript中有三種彈出框
:警告(alert)、確認(confirm)以及提問(prompt)。
警告(alert)
在訪問網站的時候，你遇到過這樣的情況嗎？
“咚”的一聲，一個小窗口出現在你面前，上面寫着一段警示性的文字，或是其它的提示信息。如果你不點擊確定，你就不能對網頁做任何的操作。沒錯，這個“咚”的小窗口就是alert干的。
下面的代碼是一段使用
alert的實例。
<scripttype="text/JavaScript">
alert("我是菜鳥我怕誰");
</script>
我的個人觀點是盡量少使用
alert，它很不友好。甚至可能讓一些方可認為你的網站很危險。
看一個
使用alert的實例
確認(confirm)
確認框用於讓用戶選擇某一個問題是否符合實際情況。
“說！是還是不是？快回答！
”
如果你想表達這樣的意思，那么
confirm再合適不過了。來看下面的代碼：我們用confirm("你是菜鳥嗎？")向訪客提問，變量r則保存了訪客的回應，它只可能有兩種取值：true或false。沒錯，它是一個布爾值。confirm后面的語句則是我們對訪客回答做出的不同回應。
<scripttype="text/JavaScript">
var r=confirm("你是菜鳥嗎");
if (r==true)
{
document.write("彼此彼此");
}
else
{
document.write("佩服佩服");
}
< /script>
< /script>
看一個
使用confirm的實例
提問(prompt)
prompt和
confirm類似，不過它允許訪客隨意輸入回答。我們來修改一下之前switch的例子，我們根據分數來做出不同的評價，不過那段程序並不完整，它根本就沒問我們分數，而是假設我得了65分。這太不公平了。現在我么就可以用prompt來向訪客提問，用score存儲用戶輸入的回答，其余的事情就都由后面的switch來完成了。
<scripttype="text/JavaScript">
function judge() {
var score;//分數
var degree;//分數等級
score = prompt("你的分數是多少？")
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 = "勉強及格";
break;
case 7:
degree = "湊合，湊合"
break;
case 8:
degree = "8錯，8錯";
break;
case 9:
case 10:
degree = "高手高手，佩服佩服";
}//end of switch
}//end of else
alert(degree);
}
</script>
看一個
使用prompt的實例
JavaScript 彈出框 alert例子
alert用於在網頁中彈出警告。通常情況下盡量不要使用。
窗體頂端
調用
alert
窗體底端
JavaScript代碼
<scripttype="text/JavaScript">
function message(){
alert("我是菜鳥我怕誰!!!");
}
</script>
HTML代碼
<form action="#"method="post">
<p>
<button value="alert"onclick="message()">調用alert</button>
</p>
</form>
JavaScript 彈出框confirm例子
確認框用於讓用戶選擇某一個問題是否符合實際情況。
窗體頂端
調用
confirm
窗體底端
JavaScript代碼
<scripttype="text/JavaScript">
function isCainiao() {
var r=confirm("你是菜鳥嗎");
if(r==true)
{
alert("彼此彼此");
}
else
{
alert("佩服佩服");
}
}
</script>
HTML代碼
<form action="#"method="post">
<p>
<button value="confirm"onclick="isCainiao()">調用confirm</button>
</p>
</form>
JavaScript 彈出框prompt例子
prompt用來讓用戶輸入一個答案。
窗體頂端
點擊彈出
prompt
窗體底端
JavaScript代碼
<scripttype="text/JavaScript">
function judge() {
var score;//分數
var degree;//分數等級
score = prompt("你的分數是多少？")
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 = "勉強及格";
break;
case 7:
degree = "湊合，湊合"
break;
case 8:
degree = "8錯，8錯";
break;
case 9:
case 10:
degree = "高手高手，佩服佩服";
}//end of switch
}//end of else
alert(degree);
}
</script>
HTML代碼
<form action="#"method="post">
<p>
<button value="點擊提交" >點擊提交</button>
</p>
<h2> </h2>
<p> </p>
</form>
JavaScript 函數
通常情況下，函數是完成特定功能的一段代碼。把一段完成特定功能的代碼塊放到一個函數里，以后就可以調用這個函數啦，這樣就省去了重復輸入大量代碼的麻煩。
還記得我們上一節所使用的
alert嗎？其實它就是一個函數，我們就以它為例來看看函數的作用吧。如果沒有alert這個函數，制作一個警告框可能需要如下工作：
1 在屏幕上顯示一個小窗口
2 發出
“咚”的提示音
3 ……
4 將警告文字顯示在窗口中
5 給出一個確定按鈕
6 ……
然后有了
alert這個函數之后，你只需要寫下面一行代碼：
alert("警告文字");
正如上面所說的，一個函數的作用就是完成一項特定的任務。如果沒有函數時，完成一項任務可能需要五行、十行、甚至更多的代碼。每次需要完成這個任務的時候都重寫一遍代碼顯然不是一個好主意。這是我們就可以編寫一個函數來完成這個任務，以后只要調用這個函數就可以了。
簡單的函數定義
定義一個函數
說了這么多，那么究竟如何定義一個函數呢？看看下面的格式：
function 函數名(){
函數代碼;
}
把
“函數名”替換為你想要的名字，把“代碼”替換為完成特定功能的代碼，函數就定義好了。了解了如何定義函數，我們就來自己編寫一個實現兩數相加的簡單函數吧。
首先給函數起一個有意義的名字：
“addTwoNum”？，好像太長了，還是叫add2吧。它的代碼如下：
function add2(){
sum = 1 + 1;
alert(sum);
}
函數的調用
函數定義好了，如何調用呢？
其實可以通過很多種方法調用上面的函數，我們這里使用最簡單的函數調用方式
——按鈕的點擊事件，JavaScript事件會在后面介紹。試着點擊下面的按鈕調用定義好的函數：
窗體頂端
點擊提交
窗體底端
“等等，你這是騙人啊，根本不是兩書相加的函數啊，這個函數只能做
1+1啊！”
帶參數的函數
好吧，我承認我撒謊了，那個函數不能實現兩數相加。其實，函數的定義應該是下面的格式：
function(
參數1,參數2,參數3){
部分函數代碼……
……
}
按照這個格式，我們的函數應該寫成：
function add2(x,y){
sum = x + y;
alert(sum);
}
x和
y則是我們函數的兩個參數，調用函數的時候，我們就可以通過這兩個參數把兩個加數傳遞給函數了。例如，add2(3，4)會求3+4的和，add2(56,65)則會求出56和65的和。
“再等等！這函數沒有用啊，你吧結果
alert出來，我想對結果做些處理怎么辦啊？”
帶返回值的函數
好吧，我們把
alert(sum)一行改成下面的代碼：
return sum;
return后面的值叫做返回值。使用下面的語句調用函數就可以將這個返回值存儲在變量中了。
result = add2(3,4);
該語句執行后，
result變量中的值為7(3+4)。值得說明的是，我們的函數中，參數和返回值都是數字，其實它們也可以是字符串等其它類型。
JavaScript For 循環
所謂循環，就是重復執行一段代碼。
前面我們已經看到了，
if else和switch是JavaScript具有了判斷的能力，但是老實說，電腦的判斷能力和人比起來差遠了。電腦更擅長一件事情——不停地重復。我們在JavaScript中把這叫做循環(loop)。
for循環的簡單例子——菜鳥報數
在了解
for循環的語法之前，還是讓我們來看一個簡單的例子吧：有十個菜鳥報數，“菜鳥1號、菜鳥2號”。有了for循環，很少的代碼就可以實現十個菜鳥的報數。
<scripttype="text/JavaScript">
var i=1;
for (i=1;i<=10;i++)
{
document.write("菜鳥"+i+"號<br/>");
}
</script>
結果如下：
菜鳥1號
菜鳥2號
菜鳥3號
菜鳥4號
菜鳥5號
菜鳥6號
菜鳥7號
菜鳥8號
菜鳥9號
菜鳥10號
for循環的工作方式
在上面那個例子中，循環恰好執行了
10次，那么和“for (i=1;i<=10;i++)”一句中的10是不是10次的意思呢？下面我們就來看看for循環的工作機制。
首先
"i=1"叫做初始條件，也就是說從哪里開始，特別的，我們的例子從i=1開始。
出現在第一個分號后面的
"i<=10"表示判斷條件，每次循環都會先判斷這個條件是否滿足，如果滿足則繼續循環，否則停止循環，繼續執行for循環后面的代碼。你可能想問了，我們設定了i=0，豈不是永遠都小於等於10嗎？來看第三個部分。
最后的
"i++"表示讓i在自身的基礎上加1，這時每次循環后的動作.也就是說，每次循環結束，i都會比原來大1，執行若干次循環之后，i<=10的條件就不滿足了，這時循環結束。for循環后面的代碼將得到執行。
for循環總結
至此，我們可以吧
for循環總結如下：
for(初始條件;判斷條件;循環后動作)
{
循環代碼
}
JavaScript While循環
while循環重復執行一段代碼，直到某個條件不再滿足。
循環的另一種方法
其實
while循環和for循環的作用都是重復執行代碼，例如下面這段代碼，和上一節for循環的輸出結果完全沒有區別。先來讀讀例子的代碼，下面會解釋為什么這個循環會和上一節的for循環等價。
<html>
<body>
<scripttype="text/JavaScript">
var i=0;
while (i<=10)
{
document.write("菜鳥"+i+"號");
document.write("<br />");
i=i+1;
}
</script>
</body>
</html>
while循環的工作機制
讓我們來看看
while循環的執行過程：
while(判斷條件)
{
循環代碼
}
看起來好像比
for循環少了點東西啊，只有一個判斷條件啊。其實這個循環也是有初始條件的，只不過在之前就已經定義好了，例如上面例子中的"var i=0;"，至於變量i的增大，則是放到了循環體里面，其實這個過程和for沒有什么區別，也是變量i不斷變大，直到判斷條件不滿足，則循環結束。
do while結構
do wile結構的基本原理和
while結構是基本相同的，但是它保證循環體至少被執行一次。因為它是先執行代碼，后判斷條件。例子如下：
<scripttype="text/JavaScript">
i = 0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i <= 5)
</script>
JavaScript Break 與 Continue
Break可以跳出循環，
Continue跳過本次循環。
break
break語句可以讓循環中途停止，直接執行后面的代碼。格式如下：
while (i<10)
{
if(特殊情況)
break;
循環代碼
}
那么，當特殊情況發生的時候，循環就會立即結束。看看下面的例子，我們的菜鳥
7號到10號在寢室打麻將……
<html>
<body>
<scripttype="text/JavaScript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==6)
{
break;//如果i是6的話就退出循環。
}
document.write("菜鳥"+i+"號<br/>");
}
</script>
</body>
</html>
當
i=7的時候循環就會結束。
continue
continue的作用是僅僅跳過本次循環，而整個循環體繼續執行。它的格式如下：
while (判斷條件)
{
if(特殊情況)
continue;
循環代碼
}
上面的循環中，當特殊情況發生的時候，本次循環將被跳過，而后續的循環則不會受到影響，來看看下面的例子：菜鳥
6號外出學習JavaScript去了。
<html>
<body>
<scripttype="text/JavaScript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is "+ i);
document.write("<br />");
}
</script>
</body>
</html>
上面的代碼中，
i=6的那次循環將被跳過.
JavaScript For...In循環
Javascript中的
for in循環通常用來遍歷數組
for in遍歷數組
首先要了解什么是數組，所謂數組，其實就是一個保存了一組類似變量的一個集合。我們來看一個保存了愛好的數組實例：
<html>
<body>
<script type="text/JavaScript">
var x;
var hobbies = new Array();//創建一個新的數組
hobbies[0] = "JavaScript";
hobbies[1] = "CSS";
hobbies[2] = "籃球";
for (x in hobbies)//數組中的每一個變量
{
document.write(hobbies[x] + "<br />");
}
< /script>
< /body>
var x;
var hobbies = new Array();//創建一個新的數組
hobbies[0] = "JavaScript";
hobbies[1] = "CSS";
hobbies[2] = "籃球";
for (x in hobbies)//數組中的每一個變量
{
document.write(hobbies[x] + "<br />");
}
< /script>
< /body>
</html>
輸出結果如下：
JavaScript
CSS
籃球
我們來分析一下上面的例子：
var hobbies = new Array();一句創建了一個新的數組。
hobbies[0] ="JavaScript";以及之后的兩句則是給
hobbies數組賦值。這與我們之前見過的變量賦值不太一樣，hobbies后面多出一個"[0]"，這個是變量的索引。我們之前已經說了，數組是變量的集合，因此我們在賦值之前需要指明給數組中的哪一個變量賦值。在這里，"[0]"表示的是hobbies數組所包含的第一個變量，沒錯，數組的索引是從0開始的，開始可能有點別扭，慢慢就習慣了。
最后的
for in循環就很好理解了，
for (x in hobbies)//數組中的每一個變量
{
document.write(hobbies[x] + "<br />");
}
表示遍歷
hobbies數則的所有變量，並且將他們逐一輸出。
JavaScript事件
我們之前提到過函數的調用。函數定義之后，默認是不會執行的，這時候就需要一些事件來觸發這個函數的執行。
事件簡介
JavaScript很多有很多事件，例如鼠標的點擊、移動，網頁的載入和關閉。我們先來定義一個函數，再看幾個事件的實例。
統一的示例函數：
<scripttype="text/JavaScript">
function displaymessage()
{
alert("我是菜鳥我怕誰!");
}
< /script>
function displaymessage()
{
alert("我是菜鳥我怕誰!");
}
< /script>
函數的事件很簡單，只是顯示一條消息。
點擊事件
使用點擊事件調用，需要給元素設置
onclick屬性。示例代碼如下：
<button value="點擊提交"
onclick="displaymessage()">onclick調用函數</button>
實際效果如下，由於設置了
onclick="displaymessage()"，因此點擊按鈕則會調用函數。
窗體頂端
onclick調用函數
窗體底端
下面再來看看鼠標移出和經過的事件。
鼠標經過、移出事件
鼠標經過事件，試着把鼠標移動到這個
div里面，將會調用函數。
窗體頂端
鼠標滑過調用函數
窗體底端
使用鼠標經過事件調用函數的代碼如下：
<button value="點擊提交"
onmouseover="displaymessage()">鼠標滑過調用函數</button>
鼠標移出事件，試着把鼠標移動到這個
div里面，再移動出去，將會調用函數。
窗體頂端
鼠標移出調用函數
窗體底端
使用鼠標移出事件調用函數的代碼如下：
<button value="點擊提交"
onmouseout="displaymessage()">鼠標移出調用函數</button>
更多事件
JavaScript中還有很多事件，完整的列表可以看看本節筆記的參考。
JavaScript調試
try、catch
try、
catch用來調試一段可能出錯的代碼：
try {
//要調試的代碼
}
catch(e){
//如果出現錯誤將會執行這個代碼塊
}
finally{
//無論是否出錯都會執行的代碼
}
JavaScript 特殊字符
JavaScript中有一些特殊的字符，如果想要在字符串中使用，需要加上一個反斜線。
遇到問題的字符串
我們在之前已經看過好多應用字符串的例子，例如
document.write("我是菜鳥我怕誰!");
輸出將是：我是菜鳥我怕誰!
現在如果我們想要輸出：小明說："我是菜鳥我怕誰？"。
該怎么辦呢？雙引號被當作javascript標記字符串開始和結束的符號，我們怎么能在字符串里引入雙引號呢?看看下面這個例子。
document.write("小明說：\"我是菜鳥我怕誰？\"。");
我們在雙引號前面加上一個反斜線就可以了。在JavaScript中有很多這樣具有功能的特殊字符，如果需要把它們插入字符串都需要在前面加上一個反斜線"\"。
特殊字符列表
|
JavaScript特殊字符代碼
代碼
|
輸出
|
| \' | 單引號 |
| \" | 雙引號 |
| \& | 與符號 |
| \\ | 反斜線 |
| \n | 換行 |
| \r | 回車 |
| \t | 制表符 |
| \b | 后退 |
| \f | form feed(小菜鳥：沒弄明白) |
JavaScript 指導准則
在書寫
JavaScript的過程中，應該記住它是區分大小寫的，可以有多余空白的，使用"\"表示本行未完。
JavaScript區分大小寫(大小寫敏感)
變量名和函數名都區分大小寫。
空格
多余的空格是被忽略的。例如下面兩個語句
a=b+c;
a = b + c ;
他們是等價的。
表示本行未完”\
”
前面已經說過，瀏覽器讀到一行末尾會自動判定本行已經結束，不過我們可以通過在行末添加一個
“\”來告訴瀏覽器本行沒有結束。
document.write("Hello \
World!")
World!")
和
document.write("我是菜鳥我怕誰!")
是完全一樣的。