從一個簡單的加法運算功能開發建立 HTML+JavaScript+CSS 概念(上)

(上)(中)(下)

Web 前端技術由 HTML+JavaScript+CSS 三項主要的元素所構成,它們之間的關係,這裏用一個簡單的加法運算功能網頁說明。

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


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


於畫面上的兩個文字方塊中,輸入欲進行加法運算的兩個數值,分別是 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>

<input>

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

<input type="text" />

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

<output>

專門用來顯示一個運算輸出結果,這個標籤如果沒有特別別設定,例如此範例中的配置,則不會有任何內容,只會預先配置一個隱形的區域。完成標籤配置只是將畫面呈現出來,接下來必須進一步撰寫程式碼讓程式具備功能。

這支程式所要執行的是加法運算,因此必須能夠取得畫面上使用者輸入兩個 <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> 上?原理完全相同,先取得 <input> ,然後將其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() 則是要執行這段程式碼時的呼叫代號,後方的小括弧請照寫,後文會有進一步說明,接下來用兩個大括弧將上述討論的程式碼封裝在其中,請注意每一段程式碼要以 ; 號結束,另外,在 x 與 y 的前方,多了一個 var ,這是關鍵字,表示接下來的 x 與 y 是一個新的變數,目前請照抄即可,後續的課程將進行完整的說明。
最後,這一段程式碼請配置於 <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>

將 add() 指定給 <button> 的 onclick 屬性即可完成,如下式:

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

(上)(中)(下)

3 則留言:

Unknown 提到...

您好,此篇文章相當管用,我有用此文的程式碼,但有個問題,
這設定必需二個值相加,如果只key一個值要讓output欄位,
綉出一個值,要多加哪行程式,因為目前在設計一個費用單,
所以如key一個值該如何設定呢?

康廷數位 提到...

Hi,您好:

請參考「HTML5 的互動支援 - input 事件」

http://www.kangting.tw/2012/07/html5-input.html

康廷數位 提到...

Hi,您好:

請參考「HTML5 的互動支援 - input 事件」

http://www.kangting.tw/2012/07/html5-input.html