Javascript基礎

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

HTML網頁在互動性方面能力較弱，例如下拉菜單，就是使用者點選某一菜單項時，自動會出現該菜單項的所有子菜單，用純HTML網頁無法實作；又如驗證HTML表單(Form)送出資訊的有效性，使用者名不能為空，密碼不能少于4位，郵政編碼隻能是數字之類，用純HTML網頁也無法實作。要實作這些功能，就需要用到Javascript。

Javascript是一種腳本語言，比HTML要複雜。不過即便你先前不懂程式設計，也不用擔心，因為Javascript寫的程式都是以源代碼的形式出現的，也就是說你在一個網頁裡看到一段比較好的Javascript代碼，恰好你也用得上，就可以直接拷貝，然後放到你的網頁中去。正因為可以借鑒、參考優秀網頁的代碼，是以讓Javascript本身也變得非常受歡迎，進而被廣泛應用。原來不懂程式設計的人，多參考Javascript示例代碼，也能很快上手。

Javascript主要是基于用戶端運作的，使用者點選帶有Javascript的網頁，網頁裡的Javascript就傳到浏覽器，由浏覽器對此作處理。前面提到的下拉菜單、驗證表單有效性等大量互動性功能，都是在用戶端完成的，不需要和Web Server發生任何資料交換，是以，不會增加Web Server的負擔。

幾乎所有浏覽器都支援Javascript，如Internet Explorer(IE)，Firefox， Netscape， Mozilla， Opera等。

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

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

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

我們還可以将這個例子寫得更加複雜寫，不但輸出文本，而且輸出帶HTML格式的文本。代碼如下：

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

Javascript程式可以放在：

HTML網頁的<body></body>裡

HTML網頁的<head></head>裡

外部.js檔案裡

當浏覽器載入網頁Body部分的時候，就執行其中的Javascript語句，執行之後輸出的内容就顯示在網頁中。

有時候并不需要一載入HTML就運作Javascript，而是使用者點選了HTML中的某個對象，觸發了一個事件，才需要調用Javascript。這時候，通常将這樣的Javascript放在HTML的<head></head>裡。

假使某個Javascript的程式被多個HTML網頁使用，最好的方法，是将這個Javascript程式放到一個字尾名為.js的文本檔案裡。

這樣做，可以提高Javascript的複用性，減少代碼維護的負擔，不必将相同的Javascript代碼拷貝到多個HTML網頁裡，将來一旦程式有所修改，也隻要修改.js檔案就可以，不用再修改每個用到這個Javascript程式的HTML檔案。

在HTML裡引用外部檔案裡的Javascript，應在Head裡寫一句<script src="檔案名"></script>，其中src的值，就是Javascript所在檔案的檔案路徑。示例代碼如下：

示範示例裡的common.js其實就是一個文本檔案，内容如下：

象很多其它程式設計語言一樣，Javascript 也是用文本格式編寫，由語句 (statements)，語句塊 (blocks) 和注釋 (comments) 構成。語句塊 (blocks) 是由一些互相有關聯的語句構成的語句集合。在一句語句 (statement) 裡，你可以使用變量，字元串和數字 (literals)，以及表達式 (expressions)。

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

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

建議：将每句語句以顯示的方式結束，即在每個語句最後加分号 (;) 來表示該句語句的結束。

以下是幾個語句的例子：

上面這句語句表示将 "Robin" 這個字元串指派給變量 aBird。

上面這句語句表示将今天的日期值指派給變量 today。

通常來說，用 {} 括起來的一組 Javascript 語句稱為語句塊 (blocks)。語句塊通常可以看做是一句單獨的語句。也就是說，在很多地方，語句塊可以作為一句單個的語句被其它 Javascript 代碼調用。但是以 for 和 while 開頭的循環語句例外。另外要注意的是，

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

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

下面的例句中，{} 中間的 5 句語句構成一個語句塊 (block)，而最後三行語句，不在語句塊内。

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

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

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

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

Javascript 表達式 (expressions) 相當于 javascript 語言中的一個短語，這個短語可以判斷或者産生一個值，這個值可以是任何一種合法的 Javascript 類型 - 數字，字元串，對象等。最簡單的表達式是字元。

表達式示例：

以下是比較複雜的表達式示例：

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

變量

數組元素

對象屬性

等号右邊的值可以是任何類型的值，包括表達式。例句如下，表示将整數 8 指派給 x 這個變量。

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

變量是用來臨時存儲數值的容器。在程式中，變量存儲的數值是可以變化的。

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

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

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

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

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

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

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

變量名的第一個字元必須是英文字母，或者是下劃線符号(underscore)_

變量名的第一個字母不能是數字。其後的字元，可以是英文字母，數字，和下劃線符号符号(underscore)_

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

運算符

運算符說明

示例

示例說明

加法

x+y

如果x為整數2,y為整數5, x+y等于7

如果x為字元串"text1", y為字元串"fun",

x+y則等于"text1fun"

減法

x-y

乘法

x*y

除法

x/y

兩者相除求餘數

x%y

如果x等于10, y等于3, x%y結果等于1

遞增

x++

如果x等于10, x++等于11

遞減

y--

如果y等于10, y--等于9

等于

x==y

如果x等于2, y等于2,則x==y

===

全等于(值相等,資料類型也相等)

x===y

如果x等于整數2,y為字元串"2",

則x===y不成立

大于

x>y

大于等于

x>=y

小于

x<y

小于等于

x<=y

不等于

x!=y

!==

不全等于

x!==y

與(and)

x < 10 && y > 1

非(not)

!(x==y)

或(or)

x==8 || y==8

＝

指派

x=5

将整數5這個值賦給變量x

注意：請注意指派(=)和等于(==)的差別。

在一般情況下，程式語句的執行是按照其書寫順序來執行的。前面的代碼先執行，後面的代碼後執行。但是這種簡單的自上而下的單向流程隻适于用一些很簡單的程式。大多數情況下，需要根據邏輯判斷來決定程式代碼執行的優先順序。要改變程式代碼執行的先後順序，任何程式設計語言都需要用到條件語句和循環語句，Javascript也不例外。

這一節我們主要介紹Javascript條件語句。

Javascript條件語句有以下幾種：

單項條件結構 (if條件語句)

雙向條件結構 (if...else條件語句)

多項條件結構 (switch條件語句)

If條件語句的文法如下：

這句文法的含義是，如果符合expression條件，就執行statement1代碼，反之，則不執行statement1代碼。

下面的這個Javascript示例就用到了Javascript的if條件語句。首先用.length計算出字元串What's up?的長度，然後使用if語句進行判斷，如果該字元串長度<100，就顯示"該字元串長度小于100。"。

If...else條件語句的文法如下：

這句文法的含義是，如果符合expression條件，則執行statement1代碼，反之，則執行statement2代碼。

下面的Javascript示例使用了if...else條件語句判斷，如果vHour小于17，顯示"日安"，反之則顯示"晚安"。

Switch條件語句的文法如下：

這句文法的含義是，如果expression等于label1，則執行statement1代碼；如果expression等于label2，則執行statement2代碼；以此類推。如果expression不符合任何label，則執行default内的statementdefault代碼。 Switch條件語句中的 break，表示 switch 語句結束。如果沒有使用一個 break 語句，則多個 label 塊被執行。

下面的Javascript示例使用了switch條件語句，根據星期天數的不同，顯示不同的話。

這一節我們主要介紹 Javascript 循環語句。

Javascript 循環語句有以下幾種：

在循環的開頭測試表達式 (while 循環語句)

在循環的末尾測試表達式 (do...while 循環語句)

對對象的每個屬性都進行操作 (for...in 循環語句)

由計數器控制的循環 (for 循環語句)

for 循環語句指定了一個計數器變量，一個測試條件，和更新計數器的行為。

每次循環重複之前，都要測試條件。如果測試成功，則執行循環内的代碼；如果測試不成功，則不執行循環内的代碼，而是執行緊跟在循環後的第一行代碼。當執行該循環時，計數器變量在下次重複循環前被更新。

如果循環條件一直不滿足，則永不執行該循環。如果條件一直滿足，則會導緻無限循環。前一種，在某種情況下是需要的，但是後一種，基本不應發生，是以寫循環條件時一定要注意。

for 循環語句示例代碼：

<a href="http://book.chinaz.com/javascript/js_examples/013_js_for.html" target="_blank">示範 for 循環語句示例</a>

Javascript 提供了一種特别的循環方式來周遊一個對象的所有使用者定義的屬性或者一個數組的所有元素。for...in 循環中的循環計數器是一個字元串，而不是數字。它包含了目前屬性的名稱或者表示目前數組元素的下标。

for...in 循環語句示例代碼：

<a href="http://book.chinaz.com/javascript/js_examples/042_js_for_in.html" target="_blank">示範 for...in 循環語句示例</a>

while 循環和 for 循環類似。其不同之處在于， while 循環沒有内置的計數器或更新表達式。如果你希望控制語句或語句塊的循環執行，不隻是通過 “運作該代碼 n 次”這樣簡單的規則，而是需要更複雜的規則，則應該用 while 循環。

注意：由于 while 循環沒有顯式的内置計數器變量，是以比其它類型的循環更容易産生無限循環。此外，由于不易發現循環條件是在何時何地被更新的，很容易編寫一個實際上從不更新條件的 while 循環。是以在編寫 while 循環時應特别小心。

while 循環語句示例代碼：

<a href="http://book.chinaz.com/javascript/js_examples/014_js_while.html" target="_blank">示範 while 循環語句示例</a>

在 JScript 中還有 do...while 循環與 while 循環相似，不同處在于它總是至少運作一次，因為是在循環的末尾檢查條件，而不是在開頭。

do...while 循環語句示例：

<a href="http://book.chinaz.com/javascript/js_examples/015_js_do_while.html" target="_blank">示範 do...while 循環語句示例</a>

在 Javascript 中，當某些條件得到滿足時，用 break 語句來中斷一個循環的運作。（請注意，也用 break 語句退出一個 switch 塊。參見 Javascript 條件語句）。如果是一個 for 或者 for...in 循環，在更新計數器變量時使用 continue 語句越過餘下的代碼塊而直接跳到循環的下一次重複中。

break 示例代碼：

<a href="http://book.chinaz.com/javascript/js_examples/js_break.html" target="_blank">示範 break 示例</a>

continue 示例代碼：

<a href="http://book.chinaz.com/javascript/js_examples/js_continue.html" target="_blank">示範 continue 示例</a>

Javascript保留字(Reserved Words)是指在Javascript語言中有特定含義，成為Javascript文法中一部分的那些字。Javascript保留字是不能作為變量名和函數名使用的。使用Javascript保留字作為變量名或函數名，會使Javascript在載入過程中出現編譯錯誤。

Javascript保留字清單：

break

delete

function

return

typeof

case

switch

var

catch

else

this

void

continue

false

instanceof

throw

while

debugger

finally

new

true

with

default

for

null

try

Javascript還有一些未來保留字，這些字雖然現在沒有用到Javascript語言中，但是将來有可能用到。

Javascript未來保留字清單：

abstract

double

goto

native

static

boolean

enum

implements

package

super

byte

export

import

private

synchronized

char

extends

int

protected

throws

class

final

interface

public

transient

const

float

long

short

volatile

Javascript基礎

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條