前回までは js で表示される言葉は、既に決まっているものでした。
ここからは、
ウェブサイトの入力フォームに入力した値が同じウェブサイトの別の場所に反映される
というケースを検討します。
考え方は、
１．入力フォームに入力された値を任意の変数に格納する
２．値が格納された変数を、サイト内の指定の場所に表示させる
という流れになります。
この手順で大切なことは
Ａ．どこに？ を考慮するための id の概念 と
Ｂ．変数 または 定数 に格納する方法
を理解することです。
以下では [ form-01.html ]を使うことにします。
[ form-01.html ]
<html>
<head>
<title>JavaScript form 01</title>
<body>
<p>
<label>名前：<input type=”text” id=”namae”></label>
<input type=”button” value=”名前設定” id=”set”>
</p>
<script>
document.getElementById(“set”).onclick = function() {
const namae = document.getElementById(“namae”).value;
document.write(namae);
};
</script>
<body>
</html>
とウェブサイト上に表示されていると思います。
このサイト上の テキストボックスに 例えば あいうえお と入力して
名前設定をクリックすると、
あいうえお とウェブサイト上の表示が変更されましたね。
これが JavaScript が得意とする 動き（アクション）の追加の効果です。
このようなアクションが実現された理由を説明していきます。
<p>
<label>名前：<input type=”text” id=”namae”></label>
<input type=”button” value=”名前設定” id=”set”>
</p>
の部分で テキストボックスに namae という id を割り振っています。
ウェブサイトでは、タグに id プロパティ や name プロパティを付与することができます。
id や name をそれぞれ重複しないように付与することで、
特定の id や name に対して○○しなさい という命令ができます。
上記の html では button に対しても set という id を割り振っていますね。
<script> タグ内では その set を利用して 処理を進めています。
<script>
document.getElementById(“set”).onclick = function() {
const namae = document.getElementById(“namae”).value;
document.write(namae);
};
</script>
document.getElementById(“set“).onclick とは、
id が set の箇所が クリックされた ということを意味します。
document.getElementById(“”) は
ウェブサイトの各要素のうち id を基準にして対象を選択することを意味します。
自分で作る場合は、タグに対して id を付けておけば、
その後の拡張（DOM操作）が簡単になることにつながりますので、
必要に応じて付与する癖をつけていてください。
document.getElementById(“set”).onclick = function() {
const namae = document.getElementById(“namae”).value;
document.write(namae);
}
は id が set の箇所が クリックされたら
{ } 内に記載された内容を実行しなさい
ということを意味します。
本件の
const namae = document.getElementById(“namae”).value; は、
定数 namae に (<input type=”text” id=”namae“> で入力された値を設定する という意味です。
そして
document.write(namae); は、
画面上に 定数 namae を表示させなさい
という意味です。
= function(){
} は、自分で作成した 関数 になります。
プログラムで言う関数は、数学で習った関数という意味ではなく、
一連の処理のことです。
関数に名前を使うことで、簡単に使いまわしができるようになります。