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/