JS註冊組|JavaScript基本語法|JavaScript&jQuery網站互動設計程式進化之道


Posted by itiswonderfall on 2023-08-05

前言

學習如何閱讀以及撰寫 JavaScript ,然後了解如何下達正確指令讓瀏覽器達成你所賦予的工作任務。

圖片來源

 


 

敘述句

程式腳本( 或程式碼 )就是提供一連串指令讓電腦依規則執行,每個指令或步驟稱為敘述句( statement ),敘述句必須以分號做結尾,這樣能讓 JavaScript 解譯器了解步驟什麼時候結束並前往下一步。

綠色部分為敘述句
粉色的大括號標示出程式區塊( code block )的起始位置,而大括號的結尾是不需要分號的。
藍色部分可決定哪部分的程式需要運行。

在 JavaScript 中,英文字母大小寫不同會代表不同字詞。

 


 

註解

可以在程式碼上增加註解( comments )說明它們的用途,如此也會讓自己及其他閱讀你程式碼的人更容易理解。

多行註解

如果註解文字超過一行就必須使用多行註解,以 /* 符號開始, */ 符號結束,所有在此區域中的內容, JavaScript 解譯器是不會處理的,多行註解通常用於解釋這程式碼要如何工作,或在功能測試時停止程式碼運作。

單行註解

在單行註解中,所有在 // 符號後的內容, JavaScript 解譯器是不會處理的,單行註解通常用於說明簡短的程式敘述。

 


 

變數

程式碼會需要暫時儲存一些工作執行所需要的資料,它可以把這些資料儲存在變數中。

當你在撰寫 JavaScript 時,必須清楚告知解譯器你希望它執行的每個步驟,我們在數學上,都知道長方形的面積計算就是「 長度 x 寬度 = 面積 」,但寫程式碼是要提供非常詳細的指令:

  1. 記住長度值
  2. 記住寬度值
  3. 將長度和寬度相乘已取得面積
  4. 回覆使用者結果值

儲存在變數中的資料是可以變更的( 或可變化的 ),所以變數可被運用於表示程式碼中可能會改變的值,而最終結果值是透過變數中的資料被計算( calculated )或運算( computed )而得。

 

變數如何宣告?

在使用變數之前,必須先發佈通知,說明你想要使用它們,這個動作包含了建立變數和給予它們名字,程式設計師通常會說宣告( declare )此變數。

var myQuantity;

var 是程式設計師會稱之為關鍵字( keyword )的一個例子, JavaScript 解譯器知道當使用這個關鍵字時是為了建立一個變數,而為了使用變數就必須給予它一個名稱( 上面範例中,名稱為 myQuantity )。

如果變數名稱由多個字詞組成,通常會以 camelCase 規則方式命名,變數第一個字詞均以小寫表示,而後續字詞的第一個字母均以大寫表示。

 

變數如何指定值?

當建立完變數,可以告訴它需要儲存哪種資訊,以程式設計師的說法,你指定一個值予變數( assign a value )。

var myQuantity = 3;

等於符號( = )稱為指定運作子( assign operator ),它表示你要指定一個變數值,通常也運用於更新變數值,而在你尚未給予值之前,都會被認定為未定義( undefined )。

 


 

資料型別

JavaScript 能分辨數值、字串與布林值,除了上述三個,其餘的會在後面講述,不同於其他程式設計語言,當宣告一個 JavaScript 的變數,不需要表明他隸屬哪種資料型別。

數值資料型別

可處理數值,例如: 0.75 。
數值不僅是單純用於計算,同時也可運用於例如:元件位置移動量、設定時間⋯⋯等等。

字串資料型別

包含字母及其他字元,例如: 'Hey you!' 。
注意這些字串被放在引號裡,引號可以是單引號或雙引號,但必須要前後一致。字串型別可用於任何文字資料,它經常運用於將新的文字內容加入頁面中,同時內容也可以包含 HTML 標籤。

布林值資料型別

值可為二者之一: true 或 false 。
可以想像成電源開關,它的狀態不是開啟就是關閉,之後探討條件判斷時,布林值就非常有用。

 


 

利用縮寫表示法建立變數

程式設計師有時會使用縮寫表示法來建立變數,但要記住,這樣雖然能節省一些打字時間,但也可能讓代碼變得難以閱讀。

 

在同一行敘述句中,進行變數宣告並指定變數值

var a = 5;
var b = 6;
var c = a * b;

 

在同一行敘述句中宣告多種變數,接著為每個變數指定變數值

var a, b, c;
a = 5;
b = 6;
c = a * b;

 

分別對不同敘述句的變數宣告並指定變數值

var a = 5, b = 6;
var c = a * b;

 


 

變更變數值

當你為變數指定變數值時,後續仍可在相同程式碼中,更改儲存在變數裡的內容。

var a;
var b;

a = 5;
b = 6;

a = 5566;
b = 2266;

 


 

變數命名規則

當給予變數名稱時,必須遵守以下六項規則:

  1. 名稱必須要以字母、金錢符號( $ )或底線( _ )起始,第一個字不能為數字
  2. 名稱可以包含字母、數字、金錢符號或底線,但不能使用破折號( - )或句點( . )。
  3. 不能使用關鍵字或保留字,例如: var 是宣告變數的關鍵字,而保留字是在未來版本的 JavaScript 可能會被採用故不允許。
  4. 變數都是有區分大小寫的,所以 age 跟 Age 是不同變數名稱,但創造兩個名稱相同但大小寫不同的變數,並不是一個好的例子。
  5. 使用名稱來描述變數所儲存的資訊,例如: firstName 用來儲存名字、 lastName 則是姓氏⋯⋯等。
  6. 如果變數是由一個字詞以上所組成,在第一個字詞後,每個字詞的第一個字母都使用大寫,例如: first name 用駝峰式命名法即 firstName ,也可以在字詞間使用底線如: first_name 。

 


 

陣列

陣列( array )是一種特別類型的變數,它不只能儲存一個值,還能儲存一系列的值。

當你需要運用一系列或一個集合的值,且值與值間具關聯性的狀況時,就可以使用陣列,因為創造陣列時,並不需要明確指出它需要保存多少資料項目數量,所以在不確定此資料串列中的資料項目總量時更顯有效,例如:儲存購物清單裡的採購項目,因為它是一連串相關的資料項目且每次寫入的數量可能都不一樣。

 


 

建立陣列

建立陣列時也需要賦予它一個名稱,就像建立變數一樣用 var 關鍵字,後面接陣列名稱,指定給陣列的值會放在括號內,每個值間用逗號分開,且值不用都是相同資料型別,所以可以同時儲存字串、數值及布林值。

方括號

var colors;
colors = ['white', 'black', 'red'];
// 此為陣列實字法,將每一個值分別描述於不同行,以提高可讀性
var colors;
colors = ['white',
          'black',
          'red'];

小括號

// 此為陣列構造子,需要使用關鍵字 new 接著 Array()的方式敘述
var colors = new Array('white',
                       'black',
                       'red');

 


 

陣列中的資料值

存取陣列資料的方式,就有如將資料置於一個編號列表裡,要注意的是:列表是從「 0 」開始編號。

 

為陣列的資料項目編號

陣列中的每個資料項目都會被自動給予一個編號,稱為索引( index ),且索引是從 0 開始,下方會顯示出陣列中的資料項目與對應的索引值:

var colors;
colors = ['white', 'black', 'red'];
索引值 資料項目
0 'white'
1 'black'
2 'red'

 

存取陣列中的項目

欲存取列表中的第三個資料項目,必須描述陣列名稱,並將索引值指定於方括號中。
如下,可以先宣告一個變數,並把它的值設定為 colors 陣列的第三個( 要記得索引是從 0 開始 )顏色資料值。

var itemThree;
itemThree = colors[2];

 

陣列的項目數量

每個陣列都具備一個名為 length 的特性,它會保存陣列中資料項目的數量。
如下,可以先宣告一個變數,並把它的值以陣列名稱接著句點符號和特性名稱 length ,以存取陣列的項目數量。

var numColors;
numColors = colors.length;

 


 

運算式

運算式可評鑑( 產生 )一個單一值,大致上可分為兩種類型。

 

運算式僅為變數指定一個內容值

var color = 'red';

color 值現在被指定為 red 了。

 

運算式使用兩個或多個資料值,並回傳一結果值

var area = 3 * 2;

area 值現在為 6 了。

 


 

運算子

運算式的操作必須倚賴運算子;它們讓程式設計師能夠從一個或多個值中,產生一個結果值。

指定運算子

指定一個資料值予變數。

color = 'red';
// color 值現在為 red 。

算術運算子

執行基本數學運算。

area = 3 * 2;
// area 值現在為 6 。

字串運算子

合併兩個字串資料。

greeting = 'Hi' + 'John';
// greeting 值現在為 Hi John 。

比較運算子

比較兩個資料值,並回傳 true 或 false 。

buy = 3 > 5;
// buy 值現在為 false 。

邏輯運算子

結合運算式並回傳 true 或 false 。

buy = (5 > 3) && (2 < 4);
// buy 值現在為 true 。

 


 

算術運算子

JavaScript 包含以下算術運算子,利用它們便可以對數值資料進行運算,但要記得先乘除後加減。

名稱 運算子 目的說明 範例 結果
加法 + 兩個數值相加 10 + 5 15
減法 - 兩個數值相減 10 - 5 5
除法 / 兩個數值相除 10 / 5 2
乘法 * 以星號將兩個數值相乘 10 * 5 50
遞增 ++ 將目前的值加一 i = 10;
i++;
11
遞減 -- 將目前的值減一 i = 10;
i--;
9
模數 % 將兩個數值相除並回傳餘數 10 % 3 1

 


 

參考資料

JavaScript & jQuery 網站互動設計程式進化之道( Jon Duckett 著、謝銘倫 譯 )


#js #JS註冊組 #JavaScript & JQuery #網站互動設計程式進化之道 #javascript #註解 #變數 #var #Array #陣列 #Index #length #算術運算子







Related Posts

CSS 顏色、模糊效果 filter屬性 補

CSS 顏色、模糊效果 filter屬性 補

淺談 Redux 的特性與資料流

淺談 Redux 的特性與資料流

[T-SQL] 日期區間重疊

[T-SQL] 日期區間重疊


Comments