～～學習進度表～～

仿照開發 GUI 的 MVC 模式，網頁版的「編密碼小工具」的 M 依舊是 Encrypt 類別 (class) ， V 變成了 HTML 的 index.html ， C 則是 controller.py

在 controller.py 利用 7 個不同的函數 (function) 處理「編密碼小工具」中 7 個按鈕各自的任務，現在新建、載入、存檔、編碼、解碼均已完成，剩下清除與拷貝兩個按鈕。

清除按鈕就是要把內容清空，這在 controller.py 利用 clear_function() 函數實作

110
112
114
116
118
120
122
124
126
128

def clear_function(event):
    global e
    e = None
    userinput = ""
    result = ""
    doc["input"].value = ""
    doc["output"].value = ""
    storage.clear()
    doc["result"].innerHTML = "已清除所有資料"
    doc["input"].focus()

範例完整檔案請參考 index.html 、 app_style.css 、 encrypt.py 及 controller.py 。

簡單說， clear_function() 函數的作用就是將全域變數 (global variable) e 設定回 None ，其餘字串 (string) 部分設定為空字串，注意輸入與輸出欄位利用元素 (element) 物件 (object) 的 value 屬性 (attribute) 設定為空字串，也等於清除原本的文字內容

120
122

    doc["input"].value = ""
    doc["output"].value = ""

然後存檔是利用 storage 呼叫 clear() 清除

124

    storage.clear()

storage 呼叫 clear() 會清空所有 localStorage 的 Key:Value 值，也就是刪除所有 localStorage 的存檔內容，由於我們這個小程式只有用到 "code" 一個 Key ，因此都刪除是沒問題的，但是如果只需要刪除指定的 Key ，那可以用關鍵字 (keyword) del 來做，例如

124

    del storage["code"]

至於拷貝按鈕是要將編碼或解碼結果拷貝到系統剪貼簿，實際由 copy_function() 實作

131
133
135
137
138
140
142
144
146

def copy_function(event):
    global result
    if result == "":
        doc["result"].innerHTML = "無法拷貝！"
    else:
        doc["output"].select()
        doc.execCommand("copy")
        doc["result"].innerHTML = "已拷貝"
    doc["input"].focus()

如果全域變數 result 是空字串，那就沒有編碼或解碼的結果，因此無法拷貝，反之不是空字串就是有編碼或解碼的結果，這是 else 的部分

138
140
142
144

    else:
        doc["output"].select()
        doc.execCommand("copy")
        doc["result"].innerHTML = "已拷貝"

實際拷貝是利用元素物件的 select() 方法，選取輸出欄位的文字，然後再由 document 物件呼叫 execCommand() ，參數 (parameter) "copy" 表示拷貝的指令，這樣就可以將結果拷貝到系統剪貼簿。

下面繼續在 Google Chrome 測試 clear_function() 及 copy_function() ，啟動伺服器 (server) 連結到編密碼小工具的首頁，同時開啟「開發人員工具」，下圖右側可以看到目前是有存檔的

按下清除按鈕，所有內容包括 localStorage 的存檔都會被清空

繼續做一些編碼工作後，按下拷貝按鈕後，就可以把結果貼到其他地方

好了，我們把 Encrypt 移植到網頁已大致完成，下一步是？