1. 什麼是JAVASCRIPT：

JavaScript是一種物件導向程式碼語言，網景通訊公司(Netscape)最初在它的Netscape Navigator 2.0產品上設計並實現，原名LiveScript，目前已經在網際網路上廣泛運用於動態網頁的編程語言。

JavaScript程式由ASCII的字元來構成，可利用記事本等文書編輯軟體來開發完成；一般程式語言必須經過編譯之手續，才能執行程式，但JavaScript並不需經過編譯手續，它只要透過適當的直譯器 (browser)即可轉譯並執行。

JavaScript並不是Java

JavaScript不是JScript：

微軟推出了JScript來迎戰JavaScript的描述語言，除了和JavaScript的應用範圍相似之外，兩者是完全不相干的。

JavaScript 是一種物件導向 (object-based) 的程式語言：
程式設計時，將網頁上所有的元素視為物件 (object)，
以執行方法 (method)來描述該物件之動作，以屬性 (attribute) 來描述該物件的樣子。

JavaScript 的基本語法形式為：

object.method(value) 物件.方法(參數)
object.attribute=value 物件.屬性=屬性值
object.event=JavaScriptCode 物件.事件=當事件發生時要執行的程式

 

object 是指物件 可以是文件 (document)、視窗 (window)、變數 (var)、數學運算 (math)、字串 (string)、圖片 (picture)、影像 (video)、聲音 (sound)、表單 (form) ...等。
method 是方法是指令動作 可以是開啟 (open)、關閉 (close)、撰寫 (write) ...等。
value 是輸入指定的值 可以是字串、數值、變數...等。

 

例如：window.open()，意思是開啟視窗，window視窗是物件，open()開啟是執行的方法
例如：document.write()，意思是在文件中輸出顯示，document文件是物件，write()輸出是執行的方法

 

 

2. 如何開始編寫JavaScript

JavaScrip的程式碼必須被包在<script>及</script>標籤之間。例：

<script type="text/javascript">
　　JavaScript 程式碼
　　...
　　...
</script>

 適合於HTML碼中嵌入JavaScript的位置有三個：

第一：寫在<head></head>之間，好處是可以保證在載入<body>內容之前已經先載入的。

第二：寫在<body></body>範圍間，當你要用JavaScript顯示物件到<body>指定範圍內時會用到。

第三：寫在</html>之後，目的是不影響<html>範圍的內容，
　　　可能會用在一般網頁供應商在網頁要加入廣告窗 (pop-up window) 或其他效果。

 

程式範例參考：

<html>
<head>
　 <script type="text/javascript">
　　　alert("Hello!");
　 </script>
</head>
<body>
　 <script type="text/javascript">
　　　document.write("Happy Day!");
　 </script>
</body>
</html>

 

兩種於JavaScript中加入程式註解的方式：
第一種：使用雙斜線 // 來作單行註解（ //右邊的東西都是註解）

第二種：使用 /*和 */ 來作多行註解（所有放在 /*及 */ 範圍內的東西都是註解）

 

如何讓不支援JavaScript的舊瀏覽器跳過程式碼：

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Hello World!")
//-->
</SCRIPT>

 

  <noscript> ~~~ </noscript>：
在兩個原因下瀏覽器不能夠執行JavaScript： 第一是舊的瀏覽器無法辨識JavaScript，第二就是使用者關閉了JavaScript功能。這時瀏覽器就會顯示<noscript> 範圍內的內容，讓網頁瀏覽者知道該網頁有些內容不能如常運作。

<NOSCRIPT>
當 JavaScript 無法正常顯示時，使用NOSCRIPT標籤可以顯示NOSCRIPT標籤中的內容。
</NOSCRIPT>

   

 3. 變數、資料型態及陣列

 變數(Variable) ：變數是用來儲存或讀取一些資料， 以方便進行運算。

單一宣告變數的方式：

var name;
var student_name = "Tom";
var student_age = 16;

多變數同時宣告的方式 ：

var name, sex, student_age;

JavaScript 的命名法則：

常見的 JavaScript 的保留字如下：

保留字 A-E
保留字 E-I
保留字 J-S
保留字 T-Z
Abstracr else long this
boolean enum export lastModified throw
break Extends Native throws
byte false new transient
Case final null true
catch finally package try
char Float private var
class for protected Void
Const function public volatile
continue go to return while
Date If Short with
deburgger implement static 　
default import super 　
delete do in switch 　
double instanceof synchronized 　
　 int 　 　
　 interface 　 　

 

資料的型態 (Data Type) ：

資料型態 例子 說明
字串 (String) var name = "Tom";
var model = "1001";		 字串通常是用雙引號 (") 或單引號(')括著
數值 (Number) var age = 16;
var pi = 3.141592653589793;
var expo = 54e7;
var octal_num = 010;
var hex_num = 0x10;		 數目可以是實數和整數
整數包括10 進制、8 進制和 16 進制
數目前面是 0 代表 8 進制
數目前面是 0x 代表 16 進制
布林 (Boolean) var is_enabled = true;
var ie3 = false;		 布林資料只有兩個值， 就是 true 或 false
空白 (Null) var no_content; 資料沒有內容，就等於 null
物件 (Object) var dw = document.write;
var myname = document.myform.myname;		 通常是為了方便而定義物件變數，
例如可以用 dw 代替 documen.write，
那就不用打很多字了
陣列 (Array) var even_num = new Array(2,4,6,8,10);
var fruit = new Array("apple","orange");		 陣列是用來儲存一組相同型態的資料

 

區域變數(Local Variable)與全域變數(Global Variable)的觀念：

看看以下範例：

var x = 10; // 宣告變數並指定值，這個變數名稱為全域變數，在整個JavaScript執行期間所有區域都可引用

function some() {

　var y = 20; // 在function內宣告的是區域變數，「區域」外不可引用

　x = 30; // 這裡直接使用 x ，而不是重新宣告，所以用的是前面宣告的全域變數

}

alert(x);　// 在這裡讀取的 x 得到 10

some();　// 執行some函式

alert(x);　// 在這裡讀取的 x 得到 30

//如果全域變數與區域變數同名，則區域變數會覆蓋全域變數，例如：

var A = 100;

function some() {

　var A = 200; // 這裡宣告的是區域變數

　 alert(A); // 因此在這個function內使用的是區域變數A得到的結果顯示200

}

some();

alert(x); // 在function區域外使用的是全域變數A得到的結果顯示100

// 當您在JavaScript中宣告了一個變數，您可以使用delete將刪除，例如：

x = 10; // 宣告x並指定值

delete x; // 刪除x

alert(x); // x

 

陣列 (Array) ：

陣列是用來儲存多個資料。陣列內的資料稱為該陣列的元素 (elements)，陣列內的資料數目就稱為該陣列的長度 (length)。

只宣告一個陣列的名稱， 但不指定它的內容：
var array_name = new Array() ;
定義一個陣列的名稱和長度， 但不指定它的內容：
var array_name = new Array(length) ;
var Car_No Value = new Array(20);
一個個分別指定值：
var My_Color = new Array();
My_Color[0] = 'red';
My_Color[1] = 'green';
My_Color[2] = 'blue';

在宣告時直接指定參數：
var array_name = new Array(data1 , data2 , data3 , ... , dataN);
var My_Colorr = new Array('red','green','blue');
alert(My_Color[1]); //輸出 'green'

 

 

陣列內資料的表示方式：


array_name[index]

 

陣列長度的表示方式：

array_name.length

 

4. JavaScript的物件、方法與屬性

 

JavaScript的物件層次圖，每個長方形代表一個物件

 

 

方法 (Method)：

用來做一些與該物件有關的動作，例如 document.write( )，write是document的方法

屬性 (Property)：

用來取得該物件的屬性或資訊，也可以設定某些屬性的內容。例如document.bgColor ，bgColor 是document的屬性，所以這一句的內容就是該 document的背景顏色，你也可以設定它的內容來改變背景顏色，例如document.bgColor="red"，這段程式碼會把該頁的背景顏色轉為紅色。

 

5. JavaScript常用的運算子

１．算術運算子 (Arithmetic Operators)
運算子 例子 說明
+ var1 = var2 + var3 將 var2 和 var3 的內容相加， 然後將值放到 var1
++ var1++ (遞增運算元)即是 var1 = var1 + 1
- var1 = var2 - var3 將 var2 減去 var3 的結果放到 var1
-- var1-- (遞減運算元)即是 var1 = var1 - 1
* var1 = var2 * var3 將 var2 和 var3 的內容相乘， 然後放到 var1
/ var1 = var2 / var3 將 var2 除以 var3 的結果放到 var1
% var1 = var2 % var3 將 var2 除以 var3 的餘數放到 var1

２．字串運算子 (String Operators)
運算子 例子 說明
+ a = "abc" + "1234" 將 "abc" 和 "1234" 兩個字串連接，再放到 a
+= a += "1234" 即是 a = a + "1234"

３．邏輯運算元 (Logical Operators)
運算子 說明
&&(AND) 兩邊的值假如都是 true 的話則傳回 true ，否則傳回 false。例如： 1<2 && 5>2 → 傳回 true 。
||(OR) 兩邊的值假如其一是 true 的話則傳回 true ，否則傳回 false。例如： 1<2 || 5<2 → 傳回 true 。
!(NOT) 值假如是 true 則傳回 false 。

６．比較運算子 (Comparison Operators)
運算子 例子 說明
== expr1 == expr2 如果 expr1 等於 expr2 ， 就傳回 true
!= expr1 != expr2 如果 expr1 不等於 expr2 ， 就傳回 true
> expr1 > expr2 如果 expr1 大於 expr2 ， 就傳回 true
>= expr1 >= expr2 如果 expr1 大於或等於 expr2 ， 就傳回 true
< expr1 < expr2 如果 expr1 小於 expr2 ， 就傳回 true
<= expr1 <= expr2 如果 expr1 小於或等於 expr2 ， 就傳回 true

 

6. JavaScript的函數

函數 (Function)

JavaScript 的函數可以分成內建函數及使用者定義的函數：

內建函數：又分成兩類

　　一般內建函數，如 parseInt() 和 parseFloat() 等。
與物件結合的函數，例如 Math.sin() 或 string.big()等，這類的函數又稱為物件的方法（Method）。

使用者定義的函數：也可以分一般函數與物件的方法兩類。

使用函數的好處是可以將一個大的程式分成多個小部份，方便管理及偵錯，還可以讓程式的每個部份都可以共用函數，以減少重複的程序。

function是一個關鍵字，用來定義一個函數，而函數的名稱就寫在function之後。

function_name是該函數的名稱，用來表示該函數。

( )是左括號和右括號， 括號內是用來輸入參數的，如果沒有參數，括號內就不用寫任何東西。本篇稍後會講述參數。

{ 和 } 是左大括號和右大括號，函數的程序碼就寫在大括號範圍內。

函數的定義包含函數名稱 (Function name) 及輸入引數 (Input arguments)，其基本格式如下：

function function_name(Input arguments) {
// 在大括號{ } 的範圍間寫入程序碼
...
return(output) // 非必要
}

在括號裡的輸入引數（Input Arguments），必須以逗號分開。定義函數並不代表函數的執行，只有在程式中呼叫函數的名稱後，才會執行該函數。若有需要，函數最後可用 return 來傳回輸出變數 (數值、字串，或其他型態的變數）至呼叫此函數的程式環境。一般網頁中的的事件處理器（Event handlers），通常都是以 JavaScript 或是 VBScript 的函數來描述。

函數的定義，通常寫在 <head> 及 </head> 之間，甚至也可以寫在網頁最前面（在 <html> 之前），以確保 HTML 主體在被呈現前，所有相關的 JavaScript 函數都已被載入，並隨時可被執行。但這並不是一個嚴格的規定，一般來說，我們希望函數的定義出現的位置和它被呼叫之處能越接近越好，以方便程式管理，在這種情況下，只要函數定義出現在其被呼叫之前，大致上都不會有什麼問題。

語法： 呼叫函數

function_name();

 

7. JavaScript的事件

事件 (Event)

事件是由系統轉化使用者的動作或系統訊息而得來的。使用者的動作例子包括：按下滑鼠鍵、確定送出表單...等。

在一個網頁內，事件通常是指由瀏覽器所偵測到使用者的特定動作，瀏覽器可以根據所偵測到的事件，來進行相關動作。舉例來說，使用者點選或移動滑鼠，或是瀏覽器的載入網頁，都可以看成是事件的產生。對於特定的事件，我們可以在瀏覽器內偵測得之，並以特定的程式來對此事件做出反應，此程式即稱為「事件處理器」(Event handlers)，又稱為 Callback。

 
事件處理器 事件發生於
onBlur 使用者離開某一欄，失去焦點時
onChange 使用者改變某一欄的內容，改變物件選項或字串時
onClick 使用者按下某個按鈕，點選某一個物件時
onFocus 使用者的輸入焦點進入某一欄，得到焦點時
onLoad 某一頁完全載入，瀏覽器載入網頁時
onMouseOver 滑鼠游標在某個物件之上
onMouseOut 滑鼠游標離開某個物件
onMouseup 鬆開滑鼠按鈕時
onMouseDown 按下滑鼠按鈕時
onSelect 使用者選擇某一欄的內容
onSubmit 使用者確定送出某表單
onUnload 正在顯示的一頁被改變，瀏覽器離開網頁時

 

8. JavaScript的流程控制

流程控制 (Flow Control)

一個程式未必一定要由上到下執行的，我們可以跟據一些條件來控制一個程式執行那一個部份，亦即是控制它的流程。

流程控制有以下幾種敘述：

．if
．if ... else
．for
．while
．break
．continue

if 語法：
if (condition) {
　statements
}

//如果只有一句敘述，就可以不用大括號包起來：
if (condition) statement ;

if...else 語法：
if (condition) {
　statements1
} else {
　statements2
}

//如果 if 和 else 都只有一句敘述，就可以不用大括號包起來：
if (condition) statement1 ;
else statement2 ;

for 語法：
for (init_expr ; condition ; increment_expr) {
　statements
}
//執行 init_expr
//如果 condition 是 true，就到第 3 步，否則跳出for 範圍
//執行 statements
//執行 increment_expr，返回第 2 步

while 語法：
while (condition) {
　statements
}
//如果 condition 是 true，就到第 2 步， 否則，跳過 while 範圍
//執行 statements ，返回第 1 步