免費AI編程助手
JavaScript 快速指南
快速指南
JavaScript 是什么？
JavaScript 具有如下特征：
- 輕量級的解釋型（代碼不需要經(jīng)過預編譯）可編程語言。
- 用于網(wǎng)絡應用開發(fā)的腳本語言。
- 可以與 Java、HTML 語言互補集成。
- 開放且跨平臺。
JavaScript 語法
一段 JavaScript 腳本由包含在網(wǎng)頁頁面中 <script>... </script> 標簽內(nèi)的 JavaScript 語句組成。
編程人員可以隨意將由 <script> 標簽包含著的 JavaScript 腳本置于網(wǎng)頁的任意位置，但是通常都會放在 <head> 標簽內(nèi)。
<script> 標記用來讓瀏覽器明白這個標簽之間的語句需要作為腳本來解釋。所以，JavaScript 腳本可以簡單的按照如下形勢來表示：
<script ...>
JavaScript code
</script<script> 標簽有兩個很重要的屬性：
- 語言（language）：這個屬性指定你正在使用什么腳本語言。一般來說,指的都是 JavaScript。盡管最近版本的HTML(XHTML 及后續(xù)版本)會逐步不再使用這個屬性。
- 類型（type）： 該屬性用于表明腳本語言類別的。通常應該設置為“text/javascript”。
所以 JavaScript 片段是如下形式：
<script language="javascript" type="text/javascript">
JavaScript code
</script>嘗試寫第一個 JavaScript 腳本
我們試著利用 JavaScript 腳本寫一個打印 “Hello word” 的功能。
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>上面的腳本會顯示如下結(jié)果：
Hello World!空格和換行符
JavaScript編譯器會忽略掉腳本中的所有空白、縮進符、換行符。
因此，程序員可以在腳本中自用使用空格、縮進和換行符，這樣程序員就可以隨意縮進格式化程序格式,以便代碼更易于閱讀和理解。
分號是可選的
與 C、C++ 和 Java一樣，通常 JavaScript 語句以分號結(jié)尾。但是， JavaScript 允許在每行只有一句腳本的情況下省略分號。比如，下方的腳本就是可以省略分號的：
<script language="javascript" type="text/javascript">
<!--
var1 = 10
var2 = 20
//-->
</script但是一行中存在多個腳本語句時，分號是不能省略的，比如：
<script language="javascript" type="text/javascript">
<!--
var1 = 10; var2 = 20;
//-->
</script>注意：使用分號是一個比較實用的編程習慣
區(qū)分大小寫
JavaScript是一門大小寫敏感的語言。這意味著關鍵詞、變量、函數(shù)名及其他任何標識符在輸入時都要保持一樣的書寫格式。
所以，Time，TIme 和 TIME 在 JavaScript 中表示不同的意思。
注意：在編寫JavaScript腳本時一定要注意變量和函數(shù)名的書寫。
注釋
JavaScript 同樣支持 C 和 C++ 那樣的注釋方式：
- 任何以 “//” 開頭的行均被認為是注釋內(nèi)容而被編譯器忽略掉。
- 任何以“/”開頭且以“/” 結(jié)尾的內(nèi)容均被視為注釋內(nèi)容，且這樣的內(nèi)容可以是多行的。
- JavaScript 也識別 HTML 格式的注釋開始標識"<!--"。它視該方式為單行注釋方式，和//一樣的效果。
- HTML 注釋結(jié)尾符“-->”不會被JavaScript識別，應該書寫成“//-->”。
JavaScript腳本應置于HTML文件的何處
在 HTML 文件中何處書寫 JavaScript 腳本是非常靈活的。但是，通常情況下都會將腳本書寫在 HTML 文件中的如下位置內(nèi)：
<head>...</head>內(nèi)<body>...</body>內(nèi)<body>...</body>和<head>...</head>同時書寫- 以外部文件的方式包含在
<head>...</head>內(nèi)
數(shù)據(jù)類型
JavaScript中可以市容下述三種數(shù)據(jù)類型：
- 數(shù)值類型：比如123,120.50等
- 字符串類型：比如“This text string”
- 布爾類型：比如true or false
JavaScript也支持另外兩個常用類型：null和undefined，這兩個類型均僅限定一個單一的值。
JavaScript變量
和其他可編程語言相同，JavaScript也有“變量”的概念?！白兞俊笨梢哉J為是有名字的容器。你可以將數(shù)據(jù)置于這些容器中，然后通過容器的名稱就可以知道數(shù)據(jù)的類型。
值得注意的是，在JavaScript編程過程中，必須先聲明一個變量，這個變量才能被使用。
此外，變量是通過“var”來聲明的，例子如下：
<script type="text/javascript">
<!--
var money;
var name;
//-->
</script>JavaScript變量作用域
一個變量的作用域就是該變量定義后在程序中的作用范圍。JavaScript變量有兩個變量作用域。
- 全局變量：全局變量具有全部整體范圍的作用域，這意味著它可以再JavaScript代碼任何地方定義。
- 局部變量：局部變量僅在定義它的函數(shù)體內(nèi)可以訪問到。函數(shù)參數(shù)對于函數(shù)來說就是局部變量。
JavaScript變量名稱
JavaScript中變量的命名規(guī)則如下：
- 不能使用JavaScript中的保留關鍵字來命名變量。這些保留關鍵字會在下一節(jié)中介紹。比如break 或 boolean，這些命名變量是無效的。
- JavaScript變量名稱不能以數(shù)字（0-9）開頭，只能以字母或下劃線來命名變量。比如123test就是無效的變量名。但是，_123就是有效的變量名。
- JavaScript變量名稱對大小寫敏感。比如，Name和name是兩個不同的變量。
JavaScript保留的關鍵字
下面是JavaScript中的保留關鍵字。他們不能用來命名JavaScript中的變量、行數(shù)、方法、循環(huán)標簽或任何對象名稱。
| abstract | else | instanceof | switch |
| boolean | enum | int | synchronized |
| break | export | interface | this |
| byte | extends | long | throw |
| case | FALSE | native | throws |
| catch | final | new | transient |
| char | finally | null | TRUE |
| class | float | package | try |
| const | for | private | typeof |
| continue | function | protected | var |
| debugger | goto | public | void |
| default | if | return | volatile |
| delete | implements | short | while |
| do | import | static | with |
| double | in | super |
算數(shù)運算符
JavaScript語言支持以下算術(shù)運算符
給定 A=10，B=20，下面的表格解釋了這些算術(shù)運算符：
| 運算符 | 描述 | 例子 |
|---|---|---|
| + | 兩個運算數(shù)相加 | A + B = 30 |
| - | 第一個運算數(shù)減去第二個運算數(shù) | A - B = -10 |
| * | 運算數(shù)相乘 | A * B = 200 |
| / | 分子除以分母 | B / A = 2 |
| % | 模數(shù)運算符，整除后的余數(shù) | B % A = 0 |
| ++ | 增量運算符，整數(shù)值逐次加1 | A++ = 11 |
| -- | 減量運算符，整數(shù)值逐次減1 | A-- = 9 |
比較運算符
JavaScript語言支持以下比較運算符
給定 A=10，B=20，下面的表格解釋了這些比較運算符：
| 運算符 | 描述 | 例子 |
|---|---|---|
| == | 檢查兩個運算數(shù)的值是否相等，如果是，則結(jié)果為true | A == B 為false |
| != | 檢查兩個運算數(shù)的值是否相等，如果不相等，則結(jié)果為true | A != B 為true |
| > | 檢查左邊運算數(shù)是否大于右邊運算數(shù)，如果是，則結(jié)果為true | A > B 為false |
| < | 檢查左邊運算數(shù)是否小于右邊運算數(shù)，如果是，則結(jié)果為true | A < B 為true |
| >= | 檢查左邊運算數(shù)是否大于或者等于右邊運算數(shù)，如果是，則結(jié)果為true | A >= B 為false |
| <= | 檢查左邊運算數(shù)是否小于或者等于運算數(shù)，如果是，則結(jié)果為true | A <= B 為true |
邏輯運算符
JavaScript語言支持以下邏輯運算符
給定 A=10，B=20，下面的表格解釋了這些邏輯運算符
| 運算符 | 描述 | 例子 |
|---|---|---|
| && | 稱為邏輯與運算符。如果兩個運算數(shù)都非零，則結(jié)果為true。 | A && B 為true |
| || | 稱為邏輯或運算符。如果兩個運算數(shù)中任何一個非零，則結(jié)果為true。 | A || B 為 true |
| ! | 稱為邏輯非運算符。用于改變運算數(shù)的邏輯狀態(tài)。如果邏輯狀態(tài)為true，則通過邏輯非運算符可以使邏輯狀態(tài)變?yōu)閒alse | !(A && B) 為false |
按位運算符
JavaScript語言支持以下邏輯運算符
給定 A=2，B=3，下面的表格解釋了這些邏輯運算符
| 運算符 | 描述 | 例子 |
|---|---|---|
| & | 稱為按位與運算符。它對整型參數(shù)的每一個二進制位進行布爾與操作。 | A & B = 2 . |
| | | 稱為按位或運算符。它對整型參數(shù)的每一個二進制位進行布爾或操作。 | A | B = 3. |
| ^ | 稱為按位異或運算符。它對整型參數(shù)的每一個二進制位進行布爾異或操作。異或運算是指第一個參數(shù)或者第二個參數(shù)為true，并且不包括兩個參數(shù)都為true的情況，則結(jié)果為true。 | (A ^ B) = 1. |
| ~ | 稱為按位非運算符。它是一個單運算符，對運算數(shù)的所有二進制位進行取反操作。 | ~B = -4 . |
| << | 稱為按位左移運算符。它把第一個運算數(shù)的所有二進制位向左移動第二個運算數(shù)指定的位數(shù)，而新的二進制位補0。將一個數(shù)向左移動一個二進制位相當于將該數(shù)乘以2，向左移動兩個二進制位相當于將該數(shù)乘以4，以此類推。 | A << 1 = 4. |
| >> | 稱為按位右移運算符。它把第一個運算數(shù)的所有二進制位向右移動第二個運算數(shù)指定的位數(shù)。為了保持運算結(jié)果的符號不變，左邊二進制位補0或1取決于原參數(shù)的符號位。如果第一個運算數(shù)是正的，運算結(jié)果最高位補0；如果第一個運算數(shù)是負的，運算結(jié)果最高位補1。將一個數(shù)向右移動一位相當于將該數(shù)乘以2，向右移動兩位相當于將該數(shù)乘以4，以此類推。 | A >> 1 = 1. |
| >>> | 稱為0補最高位無符號右移運算符。這個運算符與>>運算符相像，除了位移后左邊總是補0. | A >>> = 1. |
賦值運算符
JavaScript語言支持以下賦值運算符
| 運算符 | 描述 | 例子 |
|---|---|---|
| = | 簡單賦值運算符，將右邊運算數(shù)的值賦給左邊運算數(shù) | C = A + B 將A+B的值賦給C |
| += | 加等賦值運算符，將右邊運算符與左邊運算符相加并將運算結(jié)果賦給左邊運算數(shù) | C += A 相當于 C = C + A |
| -= | 減等賦值運算符，將左邊運算數(shù)減去右邊運算數(shù)并將運算結(jié)果賦給左邊運算數(shù) | C -= A 相當于C = C - A |
| *= | 乘等賦值運算符，將右邊運算數(shù)乘以左邊運算數(shù)并將運算結(jié)果賦給左邊運算數(shù) | C *= A 相當于C = C * A |
| /= | 除等賦值運算符， 將左邊運算數(shù)除以右邊運算數(shù)并將運算結(jié)果賦值給左邊運算數(shù) | C /= A 相當于 C = C / A |
| %= | 模等賦值運算符，用兩個運算數(shù)做取模運算并將運算結(jié)果賦值給左邊運算數(shù) | C %= A 相當于 C = C % A |
其他運算符
條件運算符
有一種運算符叫條件運算符。首先判斷一個表達式是真或假，然后根據(jù)判斷結(jié)果執(zhí)行兩個給定指令中的一個。條件運算符語法如下
| 運算符 | 描述 | 例子 |
|---|---|---|
| ? : | 條件表達式 | 如果條件為真 ? X值 : Y值 |
typeof 運算符
typeof 是一個置于單個參數(shù)之前的一元運算符，這個參數(shù)可以是任何類型的。它的值是一個表示運算數(shù)的類型的字符串。
typeof 運算符可以判斷“數(shù)值”，“字符串”，“布爾”類型，看運算數(shù)是一個數(shù)字，字符串還是布爾值，并且根據(jù)判斷結(jié)果返回true或者false。
if 語句
if語句是基本的控制語句，能使JavaScript做出決定并且按條件執(zhí)行語句。
if (expression){
Statement(s) to be executed if expression is true
}if...else 語句
if...else 語句是另一種控制語句，它能使JavaScript選擇多個代碼塊之一來執(zhí)行。
if (expression){
Statement(s) to be executed if expression is true
}else{
Statement(s) to be executed if expression is false
}if...else if... 語句
if...else if... 語句是一種推進形式的控制語句，它能使 JavaScript 選擇多個代碼塊之一來執(zhí)行。
if (expression 1){
Statement(s) to be executed if expression 1 is true
}else if (expression 2){
Statement(s) to be executed if expression 2 is true
}else if (expression 3){
Statement(s) to be executed if expression 3 is true
}else{
Statement(s) to be executed if no expression is true
}switch-case 語句
語句的基本語法是給定一個判斷表達式以及若干不同語句，根據(jù)表達式的值來執(zhí)行這些語句。編譯器檢查每個case是否與表達式的值相匹配。如果沒有與值相匹配的，則執(zhí)行default缺省條件。
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
} while 循環(huán)
循環(huán)是 JavaScript 中最基本的循環(huán)模式，下邊將加以介紹。
while(expression){
statement
} do-while 循環(huán)語句
do...while 循環(huán)和 while 循環(huán)非常相似，它們之間的區(qū)別是 while 語句為先判斷條件是否成立在執(zhí)行循環(huán)體，而 do...while 循環(huán)語句則先執(zhí)行一次循環(huán)后，再判斷條件是否成立。也就是說即使判斷條件不成立，do...while 循環(huán)語句中“{}”中的程序段至少要被執(zhí)行一次。
do{
statement
}while(expression); for 循環(huán)
循環(huán)是一種最簡潔的循環(huán)模式，包括三個重要部分
- initialize ：初始化表達式,初始化計數(shù)器一個初始值，在循環(huán)開始前計算初始狀態(tài)。
- test condition ：判斷條件表達式，判斷給定的狀態(tài)是否為真。如果條件為真，則執(zhí)行循環(huán)體“{}”中的代碼，否則跳出循環(huán)。
- iteration statement ：循環(huán)操作表達式，改變循環(huán)條件，修改計數(shù)器的值。
可以將這三個部分放在同一行，用分號隔開。
for(initialize;test condition;iteration statement)
{
statement;
}for in 語句
for (variablename in object){
statement
} 在每次迭代中將一個對象的屬性賦值給變量，這個循環(huán)會持續(xù)到這個對象的所有屬性都枚舉完。
break 語句
Break語句用于提前跳出循環(huán),打破封閉的循環(huán)體。
continue 語句
Continue語句告訴解釋器立即開始下一次迭代的循環(huán)和跳過剩余的代碼塊。
當遇到continue語句,程序流將立即循環(huán)檢查表達式,如果條件保持真那么下個迭代開始，否則控制跳出循環(huán)體。
函數(shù)定義
使用一個函數(shù)之前,我們需要定義該函數(shù)。在 JavaScript 中最常見的定義一個函數(shù)的方式是使用函數(shù)關鍵字,緊隨其后的是一個獨特的函數(shù)名,參數(shù)列表(也可能是空的),和一個被花括號包圍的語句塊。這里顯示的基本語法
<script type="text/javascript">
<!--
function functionname(parameter-list)
{
statements
}
//-->
</script>調(diào)用函數(shù)
在腳本中調(diào)用某個函數(shù)之后,你會需要簡單的編寫的函數(shù)的名稱如下
<script type="text/javascript">
<!--
sayHello();
//-->
</script>異常處理
異常通常使用 try/catch/finally 結(jié)構(gòu)來進行處理。
<script type="text/javascript">
<!--
try {
statementsToTry
} catch ( e ) {
catchStatements
} finally {
finallyStatements
}
//-->
</script>try部分后面必須緊隨catch后者finally部分（同時或者其一）。當在catch部分中發(fā)生異常事件后，異常會被存儲于e變量中，然后catch部分會被執(zhí)行。而finally部分會在try/catch之后必然執(zhí)行。
警告對話框
警告對話框是最常用的，它通常被用來給用戶提示一些警告信息。比如，某個輸入?yún)^(qū)域需要用戶輸入一些文本信息，但是用戶并沒有輸入任何信息，那么為了使用戶輸入有效的信息，你可以利用警告對話框來提示警告信息，如下：
<head>
<script type="text/javascript">
<!--
alert("Warning Message");
//-->
</script>
</head>確認對話框
確認對話框是最常用來獲取用戶對任何選項的贊成的觀點。確認對話框會顯示兩個按鈕：Ok 和 Cancel。
你可以像如下的方式使用確認對話框：
<head>
<script type="text/javascript">
<!--
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}
//-->
</script>
</head>提示對話框
你可以使用如下的方式來實現(xiàn)提示對話框
<head>
<script type="text/javascript">
<!--
var retVal = prompt("Enter your name : ", "your name here");
alert("You have entered : " + retVal );
//-->
</script>
</head>頁面重定向
利用 JavaScript 在客戶端進行重定向是非常簡單的。為了重定向你的網(wǎng)站，你僅僅只需要在網(wǎng)頁代碼的頭部中添加一行代碼，如下
<head>
<script type="text/javascript">
<!--
var retVal = prompt("Enter your name : ", "your name here");
alert("You have entered : " + retVal );
//-->
</script>
</head>Void關鍵字
JavaScript 中 void 是一個重要的關鍵字。它可以用作一個一元運算符，此時它會出現(xiàn)在一個操作數(shù)之前，這個操作數(shù)可以是任意類型的。
這個操作符指定要計算一個表達式但是不返回值。它的語法可能是下列之一
<head>
<script type="text/javascript">
<!--
void func()
javascript:void func()
or:
void(func())
javascript:void(func())
//-->
</script>
</head>頁面打印
JavaScript 能使用 window 對象的打印函數(shù)print來幫你實現(xiàn)這個功能。
當JavaScript的打印方法 window.print() 執(zhí)行后，就會打印當前的 web 頁面。
你可以使用 onclick 事件直接調(diào)用這個函數(shù)，如下所示
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>Cookies 的存儲
創(chuàng)建 Cookie 最簡單的方式就是給 document.cookie 對象賦值一個字符串值，它的語法如下
document.cookie = "key1=value;key2=value2;expires=date";Cookies的讀取
讀取 Cookie 就像寫它一樣簡單，因為 document.cookie 對象的值就是 Cookie 的屬性值。因此你可以利用這個字符串在任何時候?qū)?Cookie 進行訪問。
document.cookie 字符串會保存一系列用分號分開的 name = value 鍵值對，這里的 name 就是一個 Cookie 名稱，value 是它的值。
更多建議：