《HTML5 精要剖析》- 1.5.1 開始發展應用程式/開發一個加法運算器

2012-03-15

12607
0
HTML5
2012-03-18

英文學了不用，啃完一本字典還是只懂 A~Z ，《HTML5 精要剖析》不是字典，希望讓你每天一個進度，半年後成為合格的 HTML5 入門開發人員，所以這一篇要進入應用程式開發 … 什麼，才四篇就要開始了（其中還有一篇前言癈話）？是啊，四篇就夠了，你以為要多久，學習程式設計最快的方法就是去用它，難道還有別的方式嗎？

學習程式設計最快的方式就是去用它，因此具備HTML、CSS 以及JavaScript 的概念後，我們要開始發展第一支具備真正功能的應用程式了，當然，這個過程對於剛入門的開發者並不容易，不過別擔心，我們逐一討論其中的細節，開始吧。

用來示範的這支加法運算器程式，外觀看起來像這個樣子：

其中兩個方塊，可以讓使用者輸入要進行加法運算的值，右邊的 = 按鈕按下時，會針對這兩個輸入的數字作加總，然後將結果輸出於畫面上，如下圖：

於畫面上的兩個文字方塊中，輸入欲進行加法運算的兩個數值，分別是111 與 456 ，按一下 = 按鈕，將結果輸出。建立這支小程式需要兩個步驟：

配置畫面

如你所見，畫面中包含了五個元素，文字方塊需要<input> 標籤，等於（=）按鈕則是一個<button> 標籤，而用來顯示運算結果的則是<output> ，另外還有一個加法（+）符號，直接配置+ 這個字元即可。現在建立一個文字檔，將其命名並且儲存為add.html ，於文字檔中配置如下的內容：

<!DOCTYPE html >
<html >
<head>
    <title>加法運算器</title>
</head>
<body>
    <input type="text" />+<input type="text" />
    <button>＝</button>
    <output ></output>
</body>
</html>

於<body> 這一組標籤中，依其出現的順序，加入上述所提及的數種標籤，斷行是為了方便閱讀不影響在畫面上的呈現，它們會連續出現在畫面中，你也可以將這一整行連結起來。

其中的<button> 已經在「1.3 HTML 與JavaScript 初探」這一節看到相關的示範了，比照Say Hello 程式，後續必須於其中加入對應的JavaScript 程式碼網頁才能運算，而其中的另外兩個標籤我們第一次看到，以下逐一說明。

<input>

這個標籤用來表示一個輸入介面，它有很多不同的型式，透過 type 屬性進行設定，以這個範例為例，將type 設定為text ，表示要配置一個文字方塊，結果如下：

<input type="text" />

其中設定了type 屬性，當你設定其它值的時候，出現的會是別種型式的輸入介面，這是一個大議題，本書後文將有進一步的討論。

<output>

專門用來顯示一個運算輸出結果，這個標籤如果沒有特別別設定，例如此範例中的配置，則不會有任何內容，只會預先配置一個隱形的區域。

完成標籤配置只是將畫面呈現出來，接下來必須進一步撰寫程式碼讓程式具備功能。

撰寫 JavaScript 程式碼

這支程式所要執行的是加法運算，因此必須能夠取得畫面上使用者輸入兩個<input> 標籤的值，同時在使用者按下= 按鈕時，將這兩個值加總並且顯示在<output> 標籤上，要達到這些目的，必須能夠透過程式取得這些標籤的內容，再一次的，我們要進行屬性設定，首先為這些標籤設定id 屬性，以<input> 為例：

<input id="a" type="text" />

其中將id 屬性設定為a ，這個屬性值用來識別此標籤，它必須是唯一值，你不可以在任何其它的標籤上重覆指定相同的名稱a 給其它的標籤。另外，我們第一次在同一個標籤上設定一組以上的屬性，在這種情形，第二組以上的屬性，必須以空白分開。設定完成後的配置如下：

<body>
    <input id="a" type="text" />+<input id="b" type="text" />
    <button onclick="add()" >＝</button>
    <output id="result"></output>
</body>

在這段設定中，button 的onclick 相信讀者已經可以理解，至於output 的id 則是設定為result ，接下來我們透過這些id 屬性值來取得它們的內容，以a 為例，所需的程式碼如下：

document.getElementById('a').value　;

第一次看到這段程式碼會覺得有點恐佈，其實它相當口語化，第一個單字 document 是關鍵字，表示目前這段程式碼所在位置的網頁，接下來的. 表示要調用此網頁的內建方法 getElementById() ，這個方法的中文意義就是經由（by）元素（Element）的id 屬性，取得（get）此標籤，至於你要取得的標籤是那個，請告訴它id 屬性值，這一行要取得的是 id 屬性值為 a 的這個<input> 標籤，因此指定了a 這個值給它，注意用單引號將a 包起來丟進小括弧中，如此一來，我們就取得這個標籤了，取得標籤接下來要幹麻？當然是取出其中的值，因此繼續使用. 引用名稱為value 的屬性，這個屬性能取出其中輸入的任何文字。

同樣的，另外一個<input> 的取值方式相同，只是必須將a 改成b 。

取得a 與b 兩個值，即可將其相加以取得加法運算的結果，如下式：

document.getElementById('a').value+document.getElementById('b').value

這一行程式碼會將使用者輸入的兩個數字進行加總並回傳結果值，以此範例為例，它的運算如下：

111+456

好了，加法運算寫完了，但是這樣的程式碼實在相當難看，因此我們先將取出的數儲存到一個變數當中，再進行加總，所需的語法如下：

x=document.getElementById('a').value ;
y=document.getElementById('b').value ;

其中第一行的x 與第二行的y 都是自訂名稱的變數，你可以隨自己高興命名，例如a 或b 也可以，接下來將其加起來：

x+y

這個效果完全相同，到這裏處理完加總的運算了，現在問題來了，加總完成後得到的結果567 怎麼讓它顯示在 <output> 上？原理完全相同，先取得 <output> ，然後將其 value 屬性設定為 x+y 的結果即可，如下式：

document.getElementById('result').value =  x+y ;

其中的 x+y 這組運算結果，會被指派給id 屬性等於 result 的這個標籤的value 屬性，如此一來，畫面上就會出現這個值。至此，所有的運算式都寫完了，再一次的，我們將其包裝置一個函式當中，語法如下：

function add() {
    var a = parseInt(document.getElementById('a').value);
    var b = parseInt(document.getElementById('b').value);
    document.getElementById('result').value =  a+b ; 
}

function 是一個關鍵字，表示我們要包裝一段程式碼，在需要的時候用，接下來的add() 則是要執行這段程式碼時的呼叫代號，後方的小括弧請照寫，後文會有進一步說明，接下來用兩個大括弧將上述討論的程式碼封裝在其中，請注意每一段程式碼要以; 號結束，這一段程式碼請配置於<script> 標籤中，表示此為一段邏輯運算程式，然後將<script> 配置於<head> 區塊，完整內容如下：

<head>
    <title>加法運算器</title>
    <script>
        function add() {
            var a = parseInt(document.getElementById('a').value);
            var b = parseInt(document.getElementById('b').value);
            document.getElementById('result').value =  a+b ; 
        }
    </script>
</head>

剩下的讀者已經在前一篇「1.3 HTML 與JavaScript 初探」看過了，將add() 指定給<button> 的onclick 屬性即可完成，如下式：

<button onclick="add()" >＝</button>

這一篇我們完成了第一支 HTML5 應用程式，它可以 Work ，不過也僅此而已，不過這個實作的過程中，我們邁開了第一步，接下來，同樣是 CSS ，我們將透過 CSS 來調整它的外觀。

回首頁