Webページ作成でJavaScriptを利用することにした。

ひとまずはjQueryで作成していって、
細かい点で対応が利かないことがあればJavaScriptままの実装をしていくつもり。
その他、必要に応じてライブラリを追加していくこととする。

jQueryを導入する

jsファイルのダウンロードはこちら

今回私が使用するのは "jquery-3.1.0.min.js" となった。

ひとまず文字列入力とその利用を試す

ちょこちょこつまみ食いしつつとりあえず書いてみた。
"submit" ボタンを押すと入力値をそのまま表示してくれる。
＃ submitをクリックすることでようやく一つ目がusername用で、二つ目がpassword用とわかる。。

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
      <!-- readyはhtml読み込み後に解釈される -->
      <!-- $(document).ready(function)はjQuery3.0では非推奨との指摘から$(function)に変更 -->
      $(function () {
        $("#submit").click(function () {
          val_userName = "username = "+$("#username").val();
          val_passWord = "password = "+$("#password").val();
          $("#o_uname").text(val_userName);
          $("#o_pword").text(val_passWord);
        })
      })
    </script>
  </head>
  <body>
    <input id="username" type="text" />
    <br>
    <br>
    <input id="password" type="password" />
    <input id="submit" type="button" value="submit" />
    <div id="o_uname"></div>
    <div id="o_pword"></div>
  </body>
</html>

テキストボックスに初期値を置いて入力を促したい

テキストボックスに placeholder という属性を追加して、
初期表示したい文字列を指定するだけで良いみたい。
＃ただし、HTML5に限る。らしい。

    <input id="username" type="text" placeholder="username" />
    <br>
    <br>
    <input id="password" type="password" placeholder="password" />

入力文字列を暗号化したい

crypto-js を使う。
https://code.google.com/archive/p/crypto-js/

わからん…。
理解したら更新する。

参考にしたWebページ

「jQuery日本語リファレンス」
http://semooh.jp/jquery/

「入力ボックスの初期値として薄いグレーの文字を表示する」
http://weback.net/htmlcss/1284/

「JavaScriptでCryptoJSを使って、AESの暗号化と復号を行う」
https://hibara.org/blog/2016/02/15/cryptojs/