JavaScript 入門指南 - 控制函數與整合 Encrypt 物件

我們利用 display() 函數 (function) 控制 Encode Software 網頁與使用者的互動

完整範例請參考

• encode_software.js
• encode_software.html
• encode_software.css

基本上就是 Encode Software 網頁的六個按鈕， New 、 Save 、 Load 、 Encode 、 Decode 與 Clear 都在 onclick 屬性呼叫 display() 函數，並且以相關指令及 id 屬性為 input 、 display 的 HTML 元素物件 (object) 當參數 (parameter)

<input type="submit" 
       value="New" 
       onclick="display('new', 
                        document.getElementById('input'), 
                        document.getElementById('display'));" 
       name="op">
<input type="submit" 
       value="Save" 
       onclick="display('save', 
                        document.getElementById('input'), 
                        document.getElementById('display'));" 
       name="op">
<input type="submit" 
       value="Load" 
       onclick="display('load', 
                        document.getElementById('input'), 
                        document.getElementById('display'));" 
       name="op">
<input type="submit" 
       value="Encode" 
       onclick="display('encode', 
                        document.getElementById('input'), 
                        document.getElementById('display'));" 
       name="op">
<input type="submit" 
       value="Decode" 
       onclick="display('decode', 
                        document.getElementById('input'), 
                        document.getElementById('display'));" 
       name="op">
<input type="submit" 
       value="Clear" 
       onclick="display('clear', 
                        document.getElementById('input'), 
                        document.getElementById('display'));" 
       name="op">

這樣一來，我們在 display() 裡用 switch 來判斷指令，然後依指令處理相關工作即可

function display(choice, inputField, displayField) {
    var message;
    switch (choice) {

choice 為按鈕指令， inputField 為 id 屬性為 input 的 HTML 元素物件， displayField 則是 id 屬性為 display 的 HTML 元素物件。


我們在 display() 裡設置一個區域變數 (local variable) message ，這是準備用來暫存提示訊息的，提示訊息最後會放在 displayField 中，也就是 id 屬性為 display 的 HTML 元素裡

displayField.innerHTML = message;

至於在 display() 函數的定義之前，我們需要先設置三個全域變數 (global variable) ，分別是 encrypt 、 userinput 與 result

var encrypt = null;
var userinput = "";
var result = "";

encrypt 用來儲存按下 New 所建立的 Encrypt 物件，初值指派為 null ， userinput 則暫存使用者輸入，其實就是 inputField 的值，而 result 暫存編碼或解碼結果，兩者初值都指派為空字串 (string) 。


encrypt 、 userinput 與 result 當成全域變數的原因是給 Encode Software 整份網頁用的，所以不能只在 display() 中建立。如果我們在 display() 建立 encrypt 的話，重新呼叫 display() 就會導致前一次呼叫 display() 建立的 encrypt 失效。因此要把 encrypt 移出 display() ，當成全域變數使用囉！


好了，以上都是基礎設施。下面我們要整合 Encrypt 物件囉！所謂整合就是在 Encode Software 網頁建立 Encrypt 物件，記得， encode_software.html 也要先引入 encrypt.js 檔案

<script language="JavaScript" src="encrypt.js"></script>

然後回到 display() 函數， New 的指令為 "new" ，因此這裡新建一個 Encrypt 就行了，然後在訊息欄顯示密碼表

case "new":
    encrypt = new Encrypt();
    message = "code: " + encrypt.showCode();
    break;

執行結果如下



整合好 Encrypt 物件後，下面我們要繼續完成剩下的功能，使之成為完成版的 Encode Software 囉！

中英文術語對照
函數	function
物件	object
參數	parameter
區域變數	local variable
全域變數	global variable
字串	string

您可以繼續參考

網頁軟體開發

• 認識 HTML DOM
• 陣列
• 洗牌演算法
• Encode Software 概觀
• 資料驗證
• 自訂 Encrypt 物件
• 控制函數與整合 Encrypt 物件
• 完成版的 Encode Software
• 下一步

相關目錄

回 JavaScript 入門指南
回 JavaScript 教材
回首頁

參考資料

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/JavaScript_Overview
http://www.w3schools.com/JS/js_intro.asp
http://www.tutorialspoint.com/javascript/javascript_overview.htm