本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

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 載入密碼表。同樣的,使用者按下 SaveLoad 都會顯示相關提示訊息。


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

沒有留言: