JavaScript 入門指南 - 完成版的 Encode Software

我們還有 Save 、 Load 、 Encode 、 Decode 與 Clear 等五個按鈕還沒設置功能




完整範例請參考


Save 的指令為 "save" ，這裡我們用了個錯誤防範機制，原因是沒有按過 New 的話， encrypt 就不會有 showCode() 方法 (method) 可用
18
19
20
21
22
23
24
25
26
case "save":
   if (encrypt == null) {
       message = "No Encrypt object can save!!";
   }
   else {
       document.cookie = "code=" + encrypt.showCode();
       message = "The code is saved.";
   }
   break;


至於存入 Cookie 就用 document 的 cookie 屬性就行了， Cookie 字串 (string) 的寫法為 "code=" 加上密碼表字串，也就是 showCode() 的回傳值。


Load 的指令為 "load" ，同樣的，如果 document.cookie 為空字串的話，表示沒有存過檔，因此無法載入
33
34
35
36
37
38
39
40
41
42
43
44
case "load":
    var t = document.cookie;
    if (t == "") {
        message = "Load denied!!";
    }
    else {
        encrypt = new Encrypt();
        t = t.substring(5);
        encrypt.setCode(t)
        message = "code: " + encrypt.showCode();
    }
    break;


實際載入是先取得 document.cookie 從索引值 5 之後的子字串，因為 Cookie 的開頭是 "code=" ，然後新建一個 Encrypt 物件，再呼叫 setCode() 設定密碼表。


Encode 的部份需要檢查 inputField.value 與 encrypt ，因為使用者沒有輸入或是沒有建立過 Encrypt 物件 (object) ，這些都無法讓編碼順利進行
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
case "encode":
    userinput = inputField.value;
             
    if (userinput == "") {
        message = "No input string!!";
    }
    else {
        if (encrypt == null) {
            message = "No encrypt object!!";
        }
        else {
            result = encrypt.toEncode(userinput);
            message = "encoded result: " + result;
        }
    }
    break;


Decode 的部份與 Encode 很相似，主要是把 toEncode() 換成 toDecode()
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
case "decode":
    userinput = inputField.value;
             
    if (userinput == "") {
        message = "No input string!!";
    }
    else {
        if (encrypt == null) {
            message = "No encrypt object!!";
        }
        else {
            result = encrypt.toDecode(userinput);
            message = "decoded result: " + result;
        }
    }
    break;


編碼或解碼都把結果儲存到 result ，然後在訊息欄顯示相關訊息。


Clear 將所有設定歸零
80
81
82
83
84
85
86
case "clear":
    inputField.value = "";
    encrypt = null;
    userinput = "";
    result = "";
    message = "It's done.";           
    break;


玩一玩囉！每個按鈕都已經有功能



好了，我們已經完成 Encode Software ，下一步是？


中英文術語對照
方法method
字串string
物件object


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


相關目錄
回 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)