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

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




完整範例請參考


基本上就是 Encode Software 網頁的六個按鈕， New 、 Save 、 Load 、 Encode 、 Decode 與 Clear 都在 onclick 屬性呼叫 display() 函數，並且以相關指令及 id 屬性為 input 、 display 的 HTML 元素物件 (object) 當參數 (parameter)
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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 來判斷指令，然後依指令處理相關工作即可
15
16
17
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 元素裡
92
displayField.innerHTML = message;


至於在 display() 函數的定義之前，我們需要先設置三個全域變數 (global variable) ，分別是 encrypt 、 userinput 與 result
1
2
3
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 檔案
5
<script language="JavaScript" src="encrypt.js"></script>


然後回到 display() 函數， New 的指令為 "new" ，因此這裡新建一個 Encrypt 就行了，然後在訊息欄顯示密碼表
18
19
20
21
case "new":
    encrypt = new Encrypt();
    message = "code: " + encrypt.showCode();
    break;


執行結果如下



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


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


您可以繼續參考
網頁軟體開發


相關目錄
回 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
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)