JavaScript入門教程(2) JS基礎知識

來源:互聯網
上載者:User

在什麼地方插入 JavaScript
  JavaScript 可以出現在 HTML 的任意地方。使用標記<script>…</script>,你可以在 HTML 文檔的任意地方插入 JavaScript,甚至在<HTML>之前插入也不成問題。不過如果要在聲明架構的網頁(框架頁)中插入,就一定要在<frameset>之前插入,否則不會運行。
基本格式
複製代碼 代碼如下:<script>
<!--
...
(JavaScript代碼)
...
//-->
</script>

第二行和第四行的作用,是讓不懂<script>標記的瀏覽器忽略 JavaScript 代碼。一般可以省略,因為現在想找不懂 Script 的瀏覽器,恐怕就連博物館裡也沒有了。第四行前邊的雙反斜線“//”是 JavaScript 裡的注釋標號,以後將學到。

另外一種插入 JavaScript 的方法,是把 JavaScript 代碼寫到另一個檔案當中(此檔案通常應該用“.js”作副檔名),然後用格式為“<script src="javascript.js"></script>”的標記把它嵌入到文檔中。注意,一定要用“</script>”標記。
參考 <script>標記還有一個屬性:language(縮寫lang),說明指令碼使用的語言。對於 JavaScript,請用“language="JavaScript"”。
參考 相對於<script>標記,還有一個<server>標記。<server>標記所包含的,是伺服器端(Server Side)的指令碼。本教程只討論客戶器端(Client Side)的 JavaScript,也就是用<script>標記包含的指令碼。
如果想在瀏覽器的“地址”欄中執行 JavaScript 語句,用這樣的格式:
javascript:<JavaScript語句>
這樣的格式也可以用在串連中:
<a href="javascript:<JavaScript語句>">...</a>

JavaScript 基本文法
每一句 JavaScript 都有類似於以下的格式:
<語句>;
其中分號“;”是 JavaScript 語言作為一個語句結束的標識符。雖然現在很多瀏覽器都允許用斷行符號充當結束符號,培養用分號作結束的習慣仍然是很好的。
語句塊 語句塊是用大括弧“{ }”括起來的一個或 n 個語句。在大括弧裡邊是幾個語句,但是在大括弧外邊,語句塊是被當作一個語句的。語句塊是可以嵌套的,也就是說,一個語句塊裡邊可以再包含一個或多個語句塊。

JavaScript 中的變數
什麼是變數 從字面上看,變數是可變的量;從編程角度講,變數是用於儲存某種/某些數值的儲存空間。所儲存的值,可以是數字、字元或其他的一些東西。
變數的命名 變數的命名有以下要求:
只包含字母、數字和/或底線;
要以字母開頭;
不能太長(其實有什麼人喜歡使用又長又臭的名字呢?);
不能與 JavaScript 保留字(Key Words,Reserved Words,數量繁多,不能一一列出;凡是可以用來做 JavaScript 命令的字都是保留字)重複。
而且,變數是區分大小寫,例如,variable 和 Variable 是兩個不同的變數。不僅如此,大部分命令和“對象”(請參閱“對象化編程”章)都是區分大小寫。
提示 給變數命名,最好避免用單個字母“a”“b”“c”等,而改用能清楚表達該變數在程式中的作用的詞語。這樣,不僅別人能更容易的瞭解你的程式,而且你在以後要修改程式的時候,也很快會記得該變數的作用。變數名一般用小寫,如果是由多個單片語成的,那麼第一個單詞用小寫,其他單詞的第一個字母用大寫。例如:myVariable 和 myAnotherVariable。這樣做僅僅是為了美觀和易讀,因為 JavaScript 一些命令(以後將用更具體的方法闡述“命令”一詞)都是用這種方法命名的:indexOf;charAt 等等。
變數需要聲明 沒有聲明的變數不能使用,否則會出錯:“未定義”。聲明變數可以用:

var <變數> [= <值>];

var 我們接觸的第一個關鍵字(即保留字)。這個關鍵字用作聲明變數。最簡單的聲明方法就是“var <變數>;”,這將為<變數>準備記憶體,給它賦初始值“null”。如果加上“= <值>”,則給<變數>賦予自定的初始值<值>。

資料類型 變數可以用的資料類型有:
整型 只能儲存整數。可以是正整數、0、負整數,可以是十進位、八進位、十六進位。八位元的表示方法是在數字前加“0”,如“0123”表示八位元“123”。十六進位則是加“0x”:“0xEF”表示十六進位數“EF”。
浮點型 即“實型”,能儲存小數。有資料顯示,某些平台對浮點型變數的支援不穩定。沒有需要就不要用浮點型。
字串型 是用引號“" "”、“' '”包起來的零個至多個字元。用單引號還是雙引號由你決定。跟語文一樣,用哪個引號開始就用哪個結束,而且單雙引號可嵌套使用:'這裡是"JavaScript 教程"。' 不過跟語文不同的是,JavaScript 中引號的嵌套只能有一層。如果想再多嵌一些,你需要逸出字元:
  逸出字元 由於一些字元在螢幕上不能顯示,或者 JavaScript 文法上已經有了特殊用途,在要用這些字元時,就要使用“逸出字元”。逸出字元用斜杠“\”開頭:\' 單引號、\" 雙引號、\n 分行符號、\r 斷行符號(以上只列出常用的逸出字元)。於是,使用逸出字元,就可以做到引號多重嵌套:'Micro 說:"這裡是\"JavaScript 教程\"。" '
布爾型 常用於判斷,只有兩個值可選:true(表“真”)和 false(表“假”)。true 和 false 是 JavaScript 的保留字。它們屬於“常數”。
對象 關於對象,在“對象化編程”一章將詳細講到。
由於 JavaScript 對資料類型的要求不嚴格,一般來說,聲明變數的時候不需要宣告類型。而且就算聲明了類型,在過程中還可以給變數賦予其他類型的值。宣告類型可以用賦予初始值的方法做到:

var aString = '';

這將把 aString 定義為具有空值的字串型變數。

var anInteger = 0;

這將把 anInteger 定義為值為 0 的整型。
變數的賦值 一個變數聲明後,可以在任何時候對其賦值。賦值的文法是:
<變數> = <運算式>;
其中“=”叫“賦值符”,它的作用是把右邊的值賦給左邊的變數。下一節將討論到運算式。

JavaScript常數 有下列幾個:

null 一個特殊的空值。當變數未定義,或者定義之後沒有對其進行任何賦值操作,它的值就是“null”。企圖返回一個不存在的對象時也會出現null值。
NaN “Not a Number”。出現這個數值比較少見,以至於我們可以不理它。當運算無法返回正確的數值時,就會返回“NaN”值。NaN 值非常特殊,因為它“不是數字”,所以任何數跟它都不相等,甚至 NaN 本身也不等於 NaN 。
true 布爾值“真”。用通俗的說法,“對”。
false 布爾值“假”。用通俗的說法,“錯”。

在 Math 對象中還有一系列數學常數。這將在討論“對象化編程”時談到。

運算式與運算子
運算式 與數學中的定義相似,運算式是指具有一定的值的、用運算子把常數和變數串連起來的代數式。一個運算式可以只包含一個常數或一個變數。運算子可以是四則運算子、關係運算子、位元運算符、邏輯運算子、複合運算子。下表將這些運算子從高優先順序到低優先順序排列:

括弧 (x) [x] 中括弧只用於指明數組下標
求反、自加、自減 -x 返回 x 的相反數
!x 返回與 x (布爾值)相反的布爾值
x++ x 值加 1,但仍返回原來的 x 值
x-- x 值減 1,但仍返回原來的 x 值
++x x 值加 1,返回後來的 x 值
--x x 值減 1,返回後來的 x 值
乘、除 x*y 返回 x 乘以 y 的值
x/y 返回 x 除以 y 的值
x%y 返回 x 與 y 的模(x 除以y 的餘數)
加、減 x+y 返回 x 加 y 的值
x-y 返回 x 減 y 的值
關係運算 x<y x<=y
x>=y x>y
當符合條件時返回 true 值,否則返回 false 值
等於、
不等於
x==y 當 x 等於 y 時返回 true 值,否則返回 false 值
x!=y 當 x 不等於 y 時返回 true 值,否則返回 false 值
位與 x&y 當兩個數位同時為 1 時,返回的資料的當前數位為 1,其他情況都為 0
位異或 x^y 兩個數位中有且只有一個為 0 時,返回 0,否則返回 1
位或 x|y 兩個數位中只要有一個為 1,則返回 1;當兩個數位都為零時才返回零
位元運算符通常會被當作邏輯運算子來使用。它的實際運算情況是:把兩個運算元(即 x 和 y)化成位元,對每個數位執行以上所列工作,然後返回得到的新位元。由於“真”值在電腦內部(通常)是全部數位都是 1 的位元,而“假”值則是全部是 0 的位元,所以位元運算符也可以充當邏輯運算子。
邏輯與 x&&y 當 x 和 y 同時為 true 時返回 true,否則返回 false
邏輯或 x||y 當 x 和 y 任意一個為 true 時返回 true,當兩者同時為 false 時返回 false
邏輯與/或有時候被稱為“快速與/或”。這是因為當第一運算元(x)已經可以決定結果,它們將不去理會 y 的值。例如,false && y,因為x == false,不管 y 的值是什麼,結果始終是 false,於是本運算式立即返回 false,而不論 y 是多少,甚至 y 可以導致出錯,程式也可以照樣運行下去。
條件 c?x:y 當條件 c 為 true 時返回 x 的值(執行 x 語句),否則返回 y 的值(執行 y 語句)
賦值、
複合運算
x=y 把 y 的值賦給 x,返回所賦的值
x+=y x-=y x*=y
x/=y x%=y
x 與 y 相加/減/乘/除/求餘,所得結果賦給 x,並返回 x 賦值後

注意 所有與四則運算有關的運算子都不能作用在字串型變數上。字串可以使用 +、+= 作為串連兩個字串之用。

提示 請密切注意運算的優先順序。編程時如果不記得運算子的優先順序,可以使用括弧( )。例如:(a == 0)||(b == 0)。

一些用來賦值的運算式,由於有返回的值,可以加以利用。例如,用以下語句:a = b = c = 10,可以一次對三個變數賦值。

語句
下面將開始討論 JavaScript 基本編程命令,或者叫“語句”。

注釋

像其他所有語言一樣,JavaScript 的注釋在運行時也是被忽略的。注釋只給程式員提供訊息。

JavaScript 注釋有兩種:單行注釋和多行注釋。單行注釋用雙反斜線“//”表示。當一行代碼有“//”,那麼,“//”後面的部分將被忽略。而多行注釋是用“/*”和“*/”括起來的一行到多行文字。程式執行到“/*”處,將忽略以後的所有文字,直到出現“*/”為止。

提示 如果你的程式需要草稿,或者需要讓別人閱讀,注釋能幫上大忙。養成寫注釋的習慣,能節省你和其他程式員的寶貴時間,使他們不用花費多餘的時間琢磨你的程式。在程式調試的時候,有時需要把一段代碼換成另一段,或者暫時不要一段代碼。這時最忌用 Delete 鍵,如果想要回那段代碼怎麼辦?最好還是用注釋,把暫時不要的代碼“隱”去,到確定方法以後再刪除也不遲。

if 語句

if ( <條件> ) <語句1> [ else <語句2> ];

本語句有點象條件運算式“?:”:當<條件>為真時執行<語句1>,否則,如果 else 部分存在的話,就執行<語句2>。與“?:”不同的是,if 只是一條語句,不會返回數值。<條件>是布爾值,必須用小括弧括起來;<語句1>和<語句2>都只能是一個語句,欲使用多條語句,請用語句塊。

注意 請看下例:

if (a == 1)
if (b == 0) alert(a+b);
else
alert(a-b);

本代碼企圖用縮排的方法說明 else 是對應 if (a == 1) 的,但是實際上,由於 else 與 if (b == 0) 最相近,本代碼不能按作者的想法運行。正確的代碼是

if (a == 1) {
if (b == 0) alert(a+b);
} else {
alert(a-b);
}

提示 一行代碼太長,或者涉及到比較複雜的嵌套,可以考慮用多行文本,如上例,if (a == 1) 後面沒有立即寫上語句,而是換一行再繼續寫。瀏覽器不會混淆的,當它們讀完一行,發現是一句未完成語句,它們會繼續往下讀。使用縮排也是很好的習慣,當一些語句與上面的一兩句語句有從屬關係時,使用縮排能使程式更易讀,方便程式員進行編寫或修改工作。

迴圈體

for (<變數>=<初始值>; <迴圈條件>; <變數累加方法>) <語句>;

本語句的作用是重複執行<語句>,直到<迴圈條件>為 false 為止。它是這樣運作的:首先給<變數>賦<初始值>,然後*判斷<迴圈條件>(應該是一個關於<變數>的條件運算式)是否成立,如果成立就執行<語句>,然後按<變數累加方法>對<變數>作累加,回到“*”處重複,如果不成立就退出迴圈。這叫做“for迴圈”。下面看看例子。

for (i = 1; i < 10; i++) document.write(i);

本語句先給 i 賦初始值 1,然後執行 document.write(i)語句(作用是在文檔中寫 i 的值,請參越“對象化編程”一章);重複時 i++,也就是把 i 加 1;迴圈直到 i<10 不滿足,也就是 i>=10 時結束。結果是在文檔中輸出了“123456789”。

和 if 語句一樣,<語句>只能是一行語句,如果想用多條語句,你需要用語句塊。

與其他語言不同,JavaScript 的 for 迴圈沒有規定迴圈變數每次迴圈一定要加一或減一,<變數累加方法>可以是任意的賦值運算式,如 i+=3、i*=2、i-=j 等都成立。

提示 適當的使用 for 迴圈,能使 HTML 文檔中大量的有規律重複的部分簡化,也就是用 for 迴圈重複寫一些 HTML 程式碼,達到提高網頁下載速度的目的。不過請在 Netscape 中重複進行嚴格測試,保證通過了才好把網頁傳上去。作者曾試過多次因為用 for 迴圈向文檔重複寫 HTML 程式碼而導致 Netscape“猝死”。IE 中絕對沒有這種事情發生,如果你的網也是只給 IE 看的,用多多的 for 也沒問題。

除了 for 迴圈,JavaScript 還提供 while 迴圈。

while (<迴圈條件>) <語句>;

比 for 迴圈簡單,while 迴圈的作用是當滿足<迴圈條件>時執行<語句>。while 迴圈的累加性質沒有 for 迴圈強。<語句>也只能是一條語句,但是一般情況下都使用語句塊,因為除了要重複執行某些語句之外,還需要一些能變動<迴圈條件>所涉及的變數的值的語句,否則一但踏入此迴圈,就會因為條件總是滿足而一直困在迴圈裡面,不能出來。這種情況,我們習慣稱之為“死迴圈”。死迴圈會弄停當時正在啟動並執行代碼、正在下載的文檔,和佔用很大的記憶體,很可能造成死機,應該盡最大的努力避免。

break 和 continue

有時候在迴圈體內,需要立即跳出迴圈或跳過迴圈體內其餘代碼而進行下一次迴圈。break 和 continue 幫了我們大忙。

break;

本語句放在迴圈體內,作用是立即跳出迴圈。

continue;

本語句放在迴圈體內,作用是中止本次迴圈,並執行下一次迴圈。如果迴圈的條件已經不符合,就跳出迴圈。

複製代碼 代碼如下:for (i = 1; i < 10; i++) {
if (i == 3 || i == 5 || i == 8) continue;
document.write(i);
}

輸出:124679。

switch 語句

如果要把某些資料分類,例如,要把學生的成績按優、良、中、差分類,我們可能會用 if 語句:

複製代碼 代碼如下:if (score >= 0 && score < 60) {
result = 'fail';
} else if (score < 80) {
result = 'pass';
} else if (score < 90) {
result = 'good';
} else if (score <= 100) {
result = 'excellent';
} else {
result = 'error';
}

看起來沒有問題,但使用太多的 if 語句的話,程式看起來有點亂。switch 語句就是解決這種問題的最好方法。

switch (e) {
case r1: (注意:冒號)
...
[break;]
case r2:
...
[break;]
...
[default:
...]
}

這一大段的作用是:計算 e 的值(e 為運算式),然後跟下邊“case”後的 r1、r2……比較,當找到一個相等於 e 的值時,就執行該“case”後的語句,直到遇到 break 語句或 switch 段落結束(“}”)。如果沒有一個值與 e 匹配,那麼就執行“default:”後邊的語句,如果沒有 default 塊,switch 語句結束。

上邊的 if 段用 switch 改寫就是:

複製代碼 代碼如下:switch (parseInt(score / 10)) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
result = 'fail';
break;
case 6:
case 7:
result = 'pass';
break;
case 8:
result = 'good';
break;
case 9:
result = 'excellent';
break;
default:
if (score == 100)
result = 'excellent';
else
result = 'error';
}

其中 parseInt()方法是以後會介紹的,作用是取整。最後 default 段用的 if 語句,是為了不把 100 分當錯誤論(parseInt(100 / 10) == 10)。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.