第44回：JavaScript講座本編5「HTMLとの連携」

どうも、シノです。

欲しい本があったのですが、まさかの品切れで悲しくなりました(´・ω・｀)

漫画版があったので買ったのですが、恐らく元の本も買うと思います…

そういった本のまとめとかも需要あるのかな？

さて、今回はJavaScript講座本編第5回です！

ついに、HTMLから情報を持ってきたり、逆に狙ったところへ情報を埋め込むことをしていきます。

これができるようになると、ここで紹介した内容が書けるようになります。

というか、そこで紹介した内容を実装するためにどうすればいいかを書いていきます。

実際の例を見た方が分かりやすいですからね。

目次です。

0.前回の復習
1.情報を受け取る・渡すための準備
2.JavaScriptで値を受け取ってみよう
3.ボタンを押したタイミングで値を持ってこれるようにしよう
4.値をHTMLに埋め込もう
まとめ

0.前回の復習

前回は、関数をやりました。

kuga314159.hatenablog.com

処理をまとめるときに、どうまとめるか、情報の受け渡しなんかも解説しました。

今回は、この内容をガンガン使っていきます。

1.情報を受け取る・渡すための準備

さて、いきなり受け取ったり渡したりすることもできるのですが、まずはわかりやすいように準備をしていきます。

まず、枠だけ作っちゃいましょう。

そのときに使うHTMLタグを紹介します。

テーブルに関するHTMLタグ

<table>～</table>：テーブルを書くことを表す。
<th>～</th>：テーブルの1行を書くことを表す。
<td>～</td>：テーブルの1つの欄を書く。オプションにcolspan="数字"と入れると、その数分の欄を繋げることができる。

情報入力・出力に関するHTMLタグ

<input type="(入力の種類)" value="(表示する内容)" />：各種入力項目を表す。
今回使用する入力の種類は以下の通り。
- number：数字入力
- submit：決定ボタン

これらを使って、入力欄とボタン、表示欄を作っていきます。

以下のソースコードを実行してみてください。

<table>
	<tbody>
		<tr>
			<td>数字1：</td>
			<td><input id="num1" name="num1" type="number" /></td>
		</tr>
		<tr>
			<td>数字2：</td>
			<td><input id="num2" name="num2" type="number" /></td>
		</tr>
		<tr>
			<td style="text-align: center;" colspan="2"><input id="sumButton" name="sumButton" type="submit" value="計算" /></td>
		</tr>
		<tr>
			<td>合計：</td>
			<td><input id="result" name="result" type="number" /></td>
		</tr>
	</tbody>
</table>

かなり長いですが、頑張って写してください。

これを実行すると、以下のようになります。

はい、まずは表示までできたかと思います。

では、ちょっと詳しく見てみましょう。

まず、全体を<table>タグで囲っています。

そして、それぞれの行を<tr>タグで囲っているのがわかるでしょうか。

更に、1行目、2行目、4行目は二つの<td>で囲まれた部分、3行目は<td>にcolspanオプションで2を指定してるので、2つ分の場所を使って表示しています。

colspanの前のstyleオプションは、ボタンを中央に表示するためのCSSです。わからない人はCSSの解説を見てみましょう。

で、各行に<input>タグがありますね。これが、入力項目を作っています。

種類を決定しているのは、それぞれのtypeオプション。numberが数字、submitが決定ボタンを表しています。

ボタンには「計算」という文字を表示するため、valueオプションに「計算」という文字を指定しています。

ここまで、よろしいでしょうか。

さて、それぞれのinputに二つ、なんか見たことないオプションがついていると思います。

idオプションとnameオプションです。

idオプション：そのタグを参照するための名前をつける。同一HTML内で重複不可
nameオプション：そのタグを参照するための名前をつける。同一HTML内で重複可

今回は簡単に書きましたが、これらは用途も違います。

ですが、そこに突っ込むとPHPとかも出てきてしまうので、それはまた今度…やるのか？

まあ、今は重複して同じものを設定できるかどうかで考えておきましょう。

ちなみにnameオプションは、その値を受け渡しする部分でまだ解説していない内容を使います。

で、説明に「そのタグを参照するための名前をつける」と書いたのですが、ここの名前を使ってJavaScriptで値を持ってきたり、渡したりするんですね。

2.JavaScriptで値を受け取ってみよう

さあ、こっからが本番です。

JavaScript側で、この値を持ってきたいと思います。

そのためには、documentというものの中に定義されている、以下の関数を使用します。

getElementById(ID)：idオプションにIDが指定されたものを取得する。
getElementsByName(Name)：nameオプションにNameが指定されたものをNodeListとして取得する。
両者ともに、中の要素はこれらのvalueに格納されている。

なんか難しいことが書いてありますね。

具体例を見ながら、一つずつ見ていきましょう。

var num1 = document.getElementById("num1").value;
var num2 = document.getElementsByName("num2")[0].value;
document.write("num1の値は" + num1 + "です。");
document.write("num2の値は" + num2 + "です。");

このように書くと、num1には、表の「数字1：」の右に入力された値を、num2には、「数字2：」の右に入力された値を持ってこれるようになります。

ただし、現時点では思ったように動かないと思いますが仕様です。

これをそのまま書いても、ページを表示した瞬間しか持ってこれないのです。

つまり、空欄を持ってきていることになるので、数字が表示されないんですね。

ちなみに、文字列のリテラルで足し算をしていますね。

これは、文字列をくっつける意味になります。非常に使えるので覚えておきましょう。

さて、細かく見ていきます。

1行目、イコールの右を持ってきてみましょう。

document.getElementById("num1").value;

まず、値を持ってくるために、そもそもこのHTML文章のデータにアクセスしなければいけません。

そのため、documentというものを持ってきましょう。

document

次に、その中に定義されている関数「getElementById()」を使いたいです。

中に定義されているものを使う場合、ドットでつなぎます。

document.getElementById()

今持ってきたいものは、一つ目の入力欄の情報です。

そこでは、「num1」というidオプションをつけているので、引数にそれを渡してあげましょう。

document.getElementById("num1")

これで、一つ目の入力欄を持ってくることができました。

が、これで終わりではありません。

ここまでで、入力形式などを含めた入力欄全部の情報を持ってきています。

なので、そこから入力された値を抜き出す必要があります。

それが、この中の「value」という要素に入っているんですね。

つまり、この「value」をドットとともにくっつけてあげることで、やっと情報を持ってこれます。

document.getElementById("num1").value

これで、入力欄に入力された値を持ってくることができました。

getElementsByName()も同じ考え方ですが、ちょっと違う部分がありますね。

これは、リストという普通のリテラルとは違う形で持ってきているからです。

ここは、また別の機会に解説しましょう。

とりあえず例ではこう書きましたが、次の例からはnum1の方と同じようにgetElementById()を使っていきます。

どうでしょうか。ここまででかなりの長さになってしまいましたが、実はまだ半分くらいです…

休憩しながら、ゆっくりいきましょう。

3.ボタンを押したタイミングで値を持ってこれるようにしよう

さて、上で、「ページが表示されたタイミングで読み込む」と書きました。

次は、これを「ボタンを押したタイミングで読み込む」ようにしましょう。

ここで、関数の考え方が出てきます。

関数は、処理をまとめたもの。

それを、ボタンを押すことによって呼び出してあげよう、ということです。

というわけで、まずはHTMLの修正です。以下のように直してあげましょう。

<table>
	<tbody>
		<tr>
			<td>数字1：</td>
			<td><input id="num1" name="num1" type="number" /></td>
		</tr>
		<tr>
			<td>数字2：</td>
			<td><input id="num2" name="num2" type="number" /></td>
		</tr>
		<tr>
			<td style="text-align: center;" colspan="2"><input id="sumButton" name="sumButton" type="submit" value="計算" onclick="sum()" /></td>
		</tr>
		<tr>
			<td>合計：</td>
			<td><input id="result" name="result" type="number" /></td>
		</tr>
	</tbody>
</table>

赤太字の部分を追加しました。新しいオプションですね。

onclickオプション：ボタンが押されたときに呼び出すJavaScriptの関数を指定する。括弧も必須。

こうすることで、ボタンが押されると、JavaScriptで定義した「sum()」という関数を呼び出すようになります。

ということは…はい、その関数も定義してあげましょう。

さっきの処理を、そのまま関数にしてしまいましょうか。あ、num2のNameもIdに直してます。

function sum(){
	var num1 = document.getElementById("num1").value;
	var num2 = document.getElementById("num2").value;
	document.write("num1の値は" + num1 + "です。");
	document.write("num2の値は" + num2 + "です。");
}

今度は、ボタンを押すと表示が変わるはずです。

でも、一度ボタンを押すと表示が切り替わってしまって、もう一度入力したいのに…となりますね。

なので、元々あるものの中に情報を埋め込んであげましょう。

4.値をHTMLに埋め込もう

さて、最後の項目です。

JavaScriptに書いたsum関数を、以下のように直してあげてください。

function sum(){
	var num1 = document.getElementById("num1").value;
	var num2 = document.getElementById("num2").value;
	var result = num1 + num2;
	document.getElementById("result").value = result;
}

document.writeの部分を消して、代わりに計算と、埋め込む部分を書きました。

この中で、さっきは値を取得してきたvalueに値を代入してますね。

実は、これだけで値を埋め込むことができます！

さて、これを実行してみましょう。

以下のようになるはずです。

…どうでしょう？

ボタンを押して、二つの数字が、合計されるのではなく、二つ並んで表示されれば正解です。

あ、ごめんなさいちょっと待って、これも原因があるんです。

実は、取得してきた値なんですが、「文字列」として認識されちゃってるんですよ。

で、上で解説した通り、文字列+文字列は文字列をくっつける働きをします。

だから、二つの数字が並んで表示される、というわけですね。

じゃあどうするか、というと…

数字に直してあげればいいんです。

数字に直すには、以下の関数を使います。

parseInt(文字列)：文字列で表現された数字を、整数に変換する。

見た目は変わらないのでちょっとわかりづらいかもしれませんが、これをやってあげる必要があります。

というわけで、取得してきた文字列を、そのまま数字に直しちゃいましょう。

sum関数を、以下のように直してあげてください。

function sum(){
	var num1 = parseInt(document.getElementById("num1").value);
	var num2 = parseInt(document.getElementById("num2").value);
	var result = num1 + num2;
	document.getElementById("result").value = result;
}

これで、持ってきた値を数字に直してから、変数に代入することができました。

さあ、もう一度実行してみましょう。すると…

今度こそ、思った通りの動きをしてくれると思います。

まとめ

いかがだったでしょうか。

とても長くなってしまいましたが、やっとHTMLとの連携ができました。

ここまでの内容で、行動を選択する戦闘くらいは実装できるようになります。

興味があれば、是非作ってみてください！

次回ですが、解説を先延ばしにしていたリストを取り扱おうかなと思います。

これは、繰り返し処理と相性がよく、非常に使える内容になります。

是非、使いこなせるようになりましょう。

更新情報はTwitterでも呟いてますので、よかったらどうぞ。

シノ(@shino_20191228)をフォロー

次回：配列(2020/1/20投稿しました！！！)

kuga314159.hatenablog.com

最後に、またしても問題です。

問題1：数字を一つ入力して、1からその数字までの合計を表示してみましょう。

例えば、4を入力したら10を表示、5を入力したら15と表示、などです。

問題2：問題1ができたら、今度は1からその数字までの奇数の合計を表示してみましょう。

例えば、4を入力したら1,3が奇数なので4と表示、5を入力したら1,3,5が奇数なので9と表示、6を入力しても1,3,5が奇数なので9と表示、といった感じですね。

あ、両方とも数列の公式使って求めることもできますが、練習のためそれはNGとします。

何か、使えるものがありましたね…？

それぞれの表示例を下に出しておきます。

問題1

問題2

今までの知識を総動員して、どうやったらできるか色々と試してみてください。

それでは。

シノのいろいろ

いろいろなことを書きます。それだけ。見るも見ないも自由だけど、見てくれると嬉しいな。