JavaScript 入門指南 - Encode Software 概觀

我們要發展編密碼用的 Encode Software 網頁，編密碼功能的核心為 Encrypt 物件 (object) ，網頁控制則是用另外的函數 (function)




HTML 的部份放在 encode_software.html ，如下
<html>
<head>
<title>Encode Software</title>
<link rel="stylesheet" href="encode_software.css">
</head>
<body>
<div id="title">
Encode Software
</div>
<div id="main">
<input type="text" id="input" name="input" size="67"><br / >
<input type="submit" value="New" name="op">
<input type="submit" value="Save" name="op">
<input type="submit" value="Load" name="op">
<input type="submit" value="Encode" name="op">
<input type="submit" value="Decode" name="op">
<input type="submit" value="Clear" name="op">
</div>
<div id="display">
something happened
</div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
      http://pydoing.blogspot.com/
      檔名：encode_software.html
      功能：示範 JavaScript 程式
      作者：張凱慶
      時間：西元 2012 年 12 月 -->


這裡用到一個 CSS 檔案 encode_software.css ，如下
#title {
    border: 1px dashed gray;
    width: 500px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    text-align: center;
}

#main {
    border: 1px dashed gray;
    width: 500px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
}

#display {
    border: 1px dashed gray;
    width: 500px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
}

input {
    margin: 2px;
}

/* 《程式語言教學誌》的範例程式
   http://pydoing.blogspot.com/
   檔名：encode_sofeware.css
   功能：示範 JavaScript 程式
   作者：張凱慶
   時間：西元 2012 年 12 月 */


網頁外觀如下



有一個文字輸入框，其他有六個按鈕及 id 屬性為 display 的訊息欄。 New 為新建 Encrypt 物件， Encrypt 物件包含密碼表、編碼與解碼的功能，使用者按下 New 後就會在訊息欄顯示密碼表。


Save 用來儲存密碼表，不過 JavaScript 因為安全性問題，並不允許儲存到檔案裡，所以我們會存到 Cookie ，自然 Load 載入時也是從 Cookie 載入密碼表。同樣的，使用者按下 Save 或 Load 都會顯示相關提示訊息。


Encode 用 Encrypt 物件的 toEncode() 方法將文字輸入框的文字編碼， Decode 則是用 Encrypt 物件的 toDecode() 方法將文字輸入框的文字解碼，編碼與解碼結果都會顯示在訊息欄。


裡面最簡單的就是 Clear 按鈕了，除了清除輸入與結果外，也清除 Encrypt 物件，使使用者的所有操作歸零。


接下來我們要逐步完成這些功能，包括還沒發展的 Encrypt 物件。這裡有個文字輸入框，用來接收使用者的輸入，但有時候使用者的輸入不是我們想要的，先來談談資料驗證的問題吧！


中英文術語對照
物件object
函數function


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


相關目錄
回 JavaScript 入門指南
回 JavaScript 教材
回首頁


參考資料
https://developer.mozilla.org/en-US/docs/JavaScript/Guide
http://www.w3schools.com/JS/default.asp
http://www.tutorialspoint.com/javascript/index.htm
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)