9 Walker Studio-9W個人設計工作室

gforce付費手機遊戲報報．免費遊戲房．可愛包子動畫圖庫．logo交換登錄
gforce付費手機遊戲下載．免費線上遊戲房．msn表情小圖示．9w2u討論區

因網友留言內容
含成人色情內容
討論區即時停止運作
不便之處敬請見諒

● LOGO交換登錄

● 和我們連絡

9W個人設計工作室

　友站及其它連結

基礎JAVASCRIPT教學

01 JavaScript 簡介 06 JavaScript的函數

02 如何開始編寫JavaScript 07 JavaScript的事件

03 變數、資料型態及陣列 08 JavaScript的流程控制

04 JavaScript的物件、方法與屬性 09 常用的視窗 (Window)物件

05 JavaScript的運算子

03、變數、資料型態及陣列

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

如何宣告變數
JavaScript中的變數宣告基本的語法為： var 變數名稱〔=變數初始值〕

只定義一個變數的名稱，但不即時指定它的資料：
var variable_name ;

定義一個變數名稱，同時指定它的資料：
var variable_name = data ;
var 是用來定義變數的， variable_name 是變數的名稱， data 是任何型態的資料。

方式：
單一宣告
var name;
var student_name = "Tom";
var student_age = 16;

多變數同時宣告
var name, sex, student_age;

JavaScript 程式的內的命名法則：
使用 JavaScript 程式時，常常需要對物件、函數或變數命名。以下為一般命名的基本法則：

由於 JavaScript 程式對英文字母大小寫敏感，代表不同的意義，故命名時盡量避免大小寫參雜的方式。

第一個字母必須是是英文字母。

全長應少於 255 個英文字母。

一般電腦程式在使用陣列函數 (array) 來描述時，很多程式語言是以 0 為第一個元素 (element) 代碼，但在 JavaScript 語法則是使用 1 開始計數。

不能是空白鍵或 JavaScript 的保留字。

必須用英數字型（亦即英文與數字）與『_』（底線符號）來命名，使用特殊符號與中文字將會產生錯誤。

命名/識別子 (identifier) ：
提供作為命名變數，命名函數，提供迴圈的標籤。
區分大小寫 var x; var X 並不相同
第一個字元必須是ASCII字母 (大小寫皆可)、底線 (_)字元
注意數字不能拿來當第一個字元
後面的字元必須是字母、數字、或底線 var _x; var x_1
複合字的第一個字建議要大寫 var MyFriend;
變數名稱不能為保留字

合法的名稱： my_name , myName , g2 , _2
不合法的名稱有： 01 , 1choice , var , function , Array

常見的 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";	字串通常是用雙引號 (") 或單引號(')括著，例子中表示了一個 Tom 字串和一個 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");	陣列是用來儲存一組相同型態的資料，在本篇稍後詳述。

你可以隨時指定變數的內容，亦即是指定它的資料，但應留意該資料的型態。

JavaScript 是一種寬鬆型態語言 (Loosely Typed Language)，即是說變數的型態是可以隨時改變的。

好處：
不須定義太多變數；不須牢記那一個變數是那一種型態；不須寫太多東西來轉換資料型態，因為 JavaScript 會自動判斷你想用的資料型態。
壞處：
雖然 JavaScript 會自動判斷你想用的資料型態，但有時未必是你心目中想用的那一種型態，例如你想做整數型態的運算，它郤做了字串型態的運算。

由於JavaScript是一種寬鬆型態語言，於宣告變數時並不需直接宣告其型態（也可以不使用var指令，便可直接使用該變數），而可以指定任何值給予所宣告的變數，如：
var My_Var;　//宣告My_Var變數名稱
My_Var = 0;　//宣告My_Var變數為數字型態，並把0指定給My_Var
My_Var = "Test";　//宣告My_Var變數為字串型態，並把Test指定給My_Var
My_Var = false; 　//宣告My_Var變數為布林值型態，並把false指定給My_Var
My_Var = new Array(); 　//宣告My_Var變數為陣列物件型態，並宣告new Array()

使用var宣告變數而還沒指定資料給它時，如果您嘗試顯示它的值，就會出現"undefined"值。

在許多程式語言中，變數只要宣告一次就可以了，如果您重複宣告，在許多（編譯式）語言中還會出現編譯的錯誤訊息，但在JavaScript中，是可以使用var重複宣告同一個名稱的變數，例如：
var x = 10; // 宣告x變數，並指定10給它
var x; // 再宣告一次x變數是OK的，而目前的值仍是10
var x = 20; // 再來一次宣告，這次x被設為20

如果您在還沒宣告變數時，就嘗試顯示某個變數名稱時，就會發生錯誤，例如：
alert(y); // y沒有定義

區域變數(Local Variable)與全域變數(Global Variable)的觀念：
每個JavaScript在執行時，都會有個全域物件，如在瀏覽器中，Window（視窗）物件就是JavaScript執行時的全域物件。

看看以下範例：

x = 10; // 直接宣告並指定值，自動將該名稱設定為全域變數，在整個JavaScript執行期間，所有區域都可引用

function some(arg) {
var y = 10; // 區域變數，「區域」外不可引用
}

var z = 20; // 在函式外使用var宣告的變數，以全域物件為範圍

//如果不使用var，而是直接宣告變數並指定值，則它是個全域變數，例如：
function some() {
x = 10; // x 是全域
}
some(); // 執行函式，所以當中的x會被宣告
alert(x); // 在這邊讀取x是OK的

//如果全域變數與區域變數同名，則區域變數會覆蓋全域變數，例如：
x = 20;
function some() {
var x = 10; // 區域變數x覆蓋全域變數x
alert(x); // 顯示10
}
some();
alert(x); // 顯示20

// 在JavaScript中沒有區塊（Block）變數的觀念，只要是var宣告的，在整個區域中就是可引用的，例如：
function some() {
if(true) {
var x = 10; // 雖然在if區域中宣告x
}
alert(x); // 但這邊還是可以顯示x的值為10
}

// 不過要注意的是，由於JavaScript的是由上往下執行，所以您的變數要有用，必須在使用它之前宣告，例如：
function some() {
alert(x); // x 未定義
var x = 10;
alert(x); // 顯示10
}

// 當您在JavaScript中宣告了一個變數，您可以使用delete將刪除，例如：
x = 10; // 宣告x並指定值
delete x; // 刪除x
alert(x); // x

陣列 (Array) ：
陣列是用來儲存多個資料，而且這些變數是同一型態的（但 JavaScript 允許一個陣列儲存不同型態的資料）。陣列內的資料就稱為該陣列的元素 (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 是陣列的名稱。
new 是用來將記憶體分配給一個新的物件，它是是一個關鍵字。
Array 是用來宣告陣列的。
length 是陣列的資料數目，它的值可以是由 1 開始的正整數，例如你想宣告一個儲存星期的英文字陣列， length 的值就可以是 7。
data1 , data2 , data3 , ... , dataN 是 N 個資料，那麼這個陣列的長度就是 N 了：

例子：

var week_array = new Array("Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday", "Sunday");

上述例子中定義了一個陣列來儲存星期的英文字，這個陣列有 7 個資料，因此陣列的長度就是 7 了。因為句子太長，所以寫成兩行，而分隔位置可以在逗號的左右。

宣告了一個陣列後，就可以存取陣列內的資料。要存取這些資料，就要學習它們的表示方式。

表示方式： 陣列內的資料

array_name[index]

index 是陣列內某個資料的位置，它是由 0 開始的，而不是由 1 開始的，大家須要留意這點，因為這個電腦概念與人類實際生活不同，所以初學者很易會弄錯的。而 index 的最大值就是 length - 1 ，而不是 length 。
[ 和 ] 是左中括號和右中括號，用來括著 index 。

我們也可以取得一個陣列的長度，就是用一個陣列的 length 屬性，而且它是整數型態的。

表示方式：陣列的長度

array_name.length

我們就用上面定義了的 week_array 做例子，下面列出了 week_array 內所有資料的表示方式和它們的內容：

表示方式	內容
week_array[0]	"Monday"
week_array[1]	"Tuesday"
week_array[2]	"Wednesday"
week_array[3]	"Thursday"
week_array[4]	"Friday"
week_array[5]	"Saturday"
week_array[6]	"Sunday"
week_array.length	7

陣列應用例子：

document.write("There are " + num_of_student + " students.");
document.write("<br>First student : " + student_name[0]);
document.write(" ; Age : " + student_age[0]);
document.write("<br>Second student : " + student_name[1]);
document.write(" ; Age : " + student_age[1]);
document.write("<br>Third student : " + student_name[2]);
document.write(" ; Age : " + student_age[2]);
</script>

例子說明：
var student_name = new Array("Tom", "John", "Sam");
定義一個陣列，名稱是 student_name ，同時指定它的內容，分別是 "Tom", "John", "Sam" 三個字串型態的資料。緊記第一個資料的位置是 0，而這裏有 3 個資料，所以最後一個資料的位置就是 2 了。

var num_of_student = student_name.length;
定義一個變數，名稱是 num_of_student ，然後將指定它的內容，內容是 student_name.length ，因為 student_name 陣列內有 3 個資料，所以 student_name.length 的值就是 3 了，而且它是整數型態，因此 num_of_student 是整數型態的變數。

var student_age = new Array(num_of_student);
定義一個陣列，名稱是 student_age ，同時指定它的長度，長度為 num_of_student 的內容，亦即是 3 了，所以 student_age 就是一個有 3 個資料的陣列。

student_age[0] = 16;
student_age[1] = 18;
student_age[2] = 20;

將 student_age 陣列中的第一個資料的內容指定為 16 ，第二個資料指定為 18 ，第三個資料指定為 20 。

二維及三維陣列：
相信大家都知道用陣列的好處，就是容易管理大量變數，如果變數再多的話，可以考慮使用二維、三維甚至更多維的陣列。

之前提及的其實只是一維陣列，一維陣列內的每個元素都是相同型態的變數，但如果一個陣列的每個元素又是陣列的話，就變成陣列內有陣列，即是二維陣列了。宣告一個二維陣列不須要特別的寫法，只須運用 for 迴圈便可。

程式範例（二維及三維陣列）：看程式samp25.html執行結果
宣告一個二維陣列， size 是 2 x 3，同時指定它的數值

例子說明：
var array2d = new Array(d1)
定義 array2d 陣列，長度為 d1，就產生了 array2d[0] , array2d[1]。

array2d[i] = new Array(d2)
為 array2d 的每一個元素，再產生一個陣列，長度為 d2，產生出 array2d[0][0] , array2d[0][1] , array2d[0][2] , array2d[1][0] , array2d[1][1] , array2d[1][2]。

array2d[i][j] = i + j
上例所指定 array2d 陣列的內容，如下表：

array2d[i][j]	j = 0	j = 1	j = 2
i = 0	0	1	2
i = 1	1	2	3

宣告三維陣列也是用相似的寫法：
程式範例（二維及三維陣列）：看程式samp26.html執行結果
宣告一個三維陣列， size 是 2 x 3 x 4

例子說明：
array3d[i][j][k] = i + j + k

上例所指定 array3d 陣列的內容，如下表：

array[i][j][k]		k = 0	k = 1	k = 2	k = 3
i = 0	j = 0	0	1	2	3
	j = 1	1	2	3	4
	j = 2	2	3	4	5
i = 1	j = 0	1	2	3	4
	j = 1	2	3	4	5
	j = 2	3	4	5	6

排列數目：

程式範例（以數目大小由小至大排列）：看程式samp27.html執行結果

例子說明：
sort_num(a , b)
這個函數就是以數目大小來排列的關鍵了，這種方法只有 NN3+ 和 IE5+ 支援，不過站長始終不明白為何做這麼簡單的工作也要寫這些毫無意義的東西，因此大家還是要死記這種方法。參數 a 和 b 決定了 sort() 方法要由小至大，還是大至小排列，如果你要由大至小排列，就將函數內寫成 return(b-a)。

程式範例（以數目大小由大至小排列）：看程式samp28.html執行結果

程式範例：看程式samp29.html執行結果
就算陣列內的元素是數目型態， sort() 方法也會以 ASCII 碼來排列

參考網站：

JavaScript Variables ．JavaScript Kit．JavaScript Source ．Introduction to JavaScript, NTUPT ．JavaScript Objects
網頁寫作記事本．JavaScript 程式設計與應用：用戶端

因想再仔細的研究及學習JAVASCRIPT，因而在學習之餘，參考各網路先進網頁，編寫了基礎JAVASCRIPT教學區，也讓有需要學習JAVASCRIPT語法的網友多一個可參考的地方，若有不正確的資訊，尚望請各位先進們海涵與指正。

本站內容屬私人所有請勿任易轉載如須轉載請通知本站
本站所鏈結標題及鍊結內容皆歸原權利人所有
網站內容如有任何侵權亦請通知本站刪除謝謝！
Power by 9 Walker Studio

本站內容屬私人所有請勿任易轉載如須轉載請通知本站