JavaScript 網頁程式設計基礎

JS / 基本語法

簡介

JavaScript 為網頁操作互動、執行程式的主要程式語言。為了讓電腦做事，我們寫下指示並送給電腦請求執行，這樣的指示即為程式 ( Program )，電腦通常以行為單位處理讀取我們的程式，並執行對應的操作。比方說，這行程式可以在畫面上顯示 Hello World! 這串字：

document.write("Hello World!")

任何程式都以存取資料為最基本的操作。資料有幾種型式，比方說：

數字
123
文字
"我是文字"
多組資料
[123, "我是文字", 456, "其它文字"]

為了使用資料，我們使用「變數」來儲存資料。使用英文字母、數字、底線或錢字號 ( $ ) 來命名變數，例如：

a_value

使用變數前，透過「var」語法先告訴電腦我們需要這個變數：

var a_value

使用等號「=」設定變數內的值：

a_value = 123

取得其它變數內的值來用：

b_value = a_value

程式以行為單位，用分號作分隔：

var a_value; var b_value; a_value = 123; b_value = a_value;

運算

你可以使用變數與資料做運算。比方說：

1 + 2 * 3 / 4 % 6
  • + : 加
  • - : 減
  • * : 乘
  • / : 除
  • % : 餘數

運算結果可以利用等號「=」存回變數：

a_value = 1 + 2;

運算也可以搭配變數：

a_value = b_value + 2; a_value = a_value + 2;

變數打包

為了方便管理，資料可以結構化存在變數之中。這樣的東西我們稱之為「物件」(Object)。定義一個物件最簡單的方式：

{}

可以存到變數裡:

a_value = {};

有了物件以後，我們可以把資料以不同名稱的方式存到物件裡面的欄位。為了要做到這件事，我們需要

  • 代表物件的變數本身, 例如 a_value
  • 儲存資料的名字, 例如 mydata
  • 把兩者連起來的概念，以 JS 來說可以使用「.」，如: a_value.mydata
  • 亦可以寫成 a_value["mydata"]，使用 "mydata" 文字來指定要使用的欄位 - 這代表我們也可以用變數來替代這個文字，隨變數內容取得不同欄位

物件裡儲存資料不用另外再宣告，直接設定即可：

var a_value; a_value = {}; a_value.gender = "男"; a_value.age = 15;

也可以做很多層:

var a_value; a_value = {}; a_value.city = {}; a_value.city.name = "台北";

另一種打包的方式是「陣列 (Array)」，是前面提到的「多組資料」的表現方式:

a_value = [123, "我是文字", 456, "其它文字"]

要取得陣列內容必須使用 a_value[0]這樣的語法, 其中的「 0 」代表著順序：

a_value[0] /* 123 */ a_value[1] /* "我是文字" */ a_value[2] /* 456 */ a_value[3] /* "其它文字" */

存取元素

網頁上的每個標籤都是一個 JavaScript 物件。取得標籤的最簡單方式就是使用 id 幫他命名，比方說我們最常用的 span 標籤：

hello world

命名後，瀏覽器會將之存進同名的變數中，我們就可以使用 a_value 來操作了。下例示範如何幫元素上色：

a_value.style.background = "red";

標籤物件內含有許多不同的欄位，其中 style 欄位本身亦是一個物件，裡面對應各種 CSS 樣式值的欄位即可以用來操作元素的樣式。下例示範將 span 標籤字變大、轉 45 度、設定為黑底白字：

a_value.style.color = "white"; a_value.style.background = "black"; a_value.style.fontSize = "32px";
為什麼是「fontSize」而非「font-size」?

由於 JavaScript 並不支援含有橫線 (-) 的變數名稱，因此在設定樣式時，變設定成使用 大寫字母 來表示前面有橫線的樣式。事實上，你亦可以使用前面提到的括號表示法 ( a_value["mydata"] ) 來設定值：

a_value.style["font-size"] = "32px";
使用「id」取得標籤物件並非上策

這一寫節教的、使用 id 取得標籤的這個方法、其實並不是一個很好的方法。但為了讓大家更快進入狀況，我們先暫時這樣使用。

函式

我們可以把一段程式存到變數裡，並指示電腦在需要的時候使用他，這樣的程式我們稱為「函式」。瀏覽器中已經事先幫你準備好了各式各樣的函式，各存在不同的變數中，例如 alert 這個變數所存的函式能替你彈出一個對話框給用戶。

要執行函式，在變數名稱後方加上兩個小括號即可：

alert();

函式可以接受多個參數，只需要把資料傳入、用逗號分隔即可。下例為傳入一個參數的例子：

alert("hello world");

接受多少個參數、參數的用途各是什麼，完全視函式的設計而定。我們也可以製作自己的函式，基本作法如下：

var myfunc = function() { .../* 這裡寫程式。可以分成多行*/... }

比方說，下面這個函式會彈出「Hello World!」的警示窗：

var myfunc = function() { alert("hello world!"); }
接受參數的函式

你可以定義接受參數的函式，只要在定義式的括號中寫上用逗號分隔的變數列表即可，當函式執行時，參數便會自動儲存到對應的變數之中。下例我們定義了三個變數 a、b、c：

var myfunc = function(a, b, c) { ... }

在執行函式時，便可以將參數代入：

myfunc("hello", 123, {name: 'kirby'});

事件

除了自行執行函式以外，我們也可以讓用戶幫我們執行函式。

在標籤物件中有一系列的「事件欄位」，儲存在欄位中的函式會在發生各種事件時自動被執行。舉例來說，onclick 欄位會在用戶點擊標籤時觸發：

a_value.onclick = function() { alert("clicked."); }

onkeyup 會在用戶於其中打完字時觸發：

a_value.onkeyup = function() { alert("typed."); }

為了示範這個效果，我們使用輸入框標籤 input 來試作一個 BMI 計算機吧！

BMI 計算機

BMI 的公式為：

體重(公斤) 除以 身高(公尺)2

因此我們需要用戶輸入 體重與身高共兩個輸入框，以及一個顯示 BMI 用的 ：

<input id="weight"> <input id="height"> <span id="bmi">

接著，我們需要三件事：

  • 取得用戶輸入的值： 我們可以使用標籤物件中的 value 欄位來取得數值。
  • 計算 BMI
  • 顯示計算出的 BMI 值： 我們可以使用標籤物件中的 innerText 欄位來輸出值。

特別要注意的是，value 欄位所取得的資料是「字串」，為了將他變成數字進而做算術運算，我們需要利用「+」運算元：

bmi.innerText = +weight.value + +height.value;

最後，把這行程式碼包裝成函式，寫到 input 標籤的 onkeyup 欄位中：

var getbmi = function() { bmi.innerText = ( +weight.value / (+height.value * +height.value) ); }; weight.onkeyup = getbmi; height.onkeyup = getbmi;
各式各樣的函式

上例中，輸出值有時候會有很長的小數位數，這時我們可以使用數字資料自帶的 .toFixed 函式把他轉成固定兩位小數：

(+weight.value / (+height.value * +height.value)).toFixed(2)

或者使用內建數學物件 Math 中的 round 函式執行四捨五入：

Math.round(+weight.value / (+height.value * +height.value))

Math 物件亦有提供 無條件捨去 floor 以及 無條件進位 ceil：

Math.floor(+weight.value / (+height.value * +height.value)); Math.ceil(+weight.value / (+height.value * +height.value))

字串轉換成數字也可以使用內建的 parseFloat 函式:

( parseFloat(weight.value) / (parseFloat(height.value) * parseFloat(height.value))) );

各種做法各有優劣，但我們很難在初學階段就跟大家說明清楚。後續有機會會再進一步說明。

點點看遊戲

我們可以搭配數學物件 Math 所提供的隨機函式 random 來做出一個簡單的遊戲。

隨機函式每次執行都會傳回一個 0 ~ 1 之間的隨機小數，因此我們可以用這個機制來隨機移動一個標籤：

var move = function() { sometag.style.left = (500 * Math.random()) + "px"; sometag.style.top = (500 * Math.random()) + "px"; };

並且在點擊標籤時才讓他移動：

sometag.onclick = move;

為了增加遊戲性，還可以加入給分要素：

var score = 0; var move = function() { sometag.style.left = (500 * Math.random()) + "px"; sometag.style.top = (500 * Math.random()) + "px"; score = score + 1; scoretag.innerText = score; };

你可以把完整的遊戲給寫出來嗎？

可以操作角色

這是一張角色的分格動畫圖 (來源)：

( 連結: https://xinmeti.co/assets/img/sample/sprite.jpg )

圖的大小是 寬: 564px / 高: 844px。 妥善的使用 @keyframes 搭配 background-size、background-position-x、background-position-y 後，我們就可以讓人物動起來。更進一步，我們可以利用鍵盤事件讓他動起來！

標籤物件的 onkeyup ( 或者其它任何事件 ) 在執行時都會帶一個 "事件物件" 參數給你的函式，我們可以像這樣取得它：

sometag.onkeyup = function(evt) { /* evt 即為事件物件 */ }

由於我們是對整個網頁按按鈕，所以我們可以使用代表整個網頁的 document 物件接收事件：

document.onkeyup = function(evt) { ... }

你所按的鍵會以數字的方式儲存在 keyCode 這個欄位中。上下左右對應到的數字分別為：

  • 37: 左
  • 38: 上
  • 39: 右
  • 40: 下

所以，我們可以試著用下面這一行程式，依按鍵的值改變角色動畫的方向：

document.onkeyup = function(evt) { spritetag.style.animationName = "some-name-" + evt.keyCode; };

你有辦法試著把他做出來嗎？

簡介存取元素函式事件
新媒體內容技術與設計

New Media Techniques and Design

重設登入階段SVG Background animated by Loading.io