【プログラミング入門】【JavaScript】6日目 入力してみよう！(prompt)

ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！

難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。

簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。

お待たせしました！入力のお時間です！

コントローラーのボタンを押すとゲームの中の主人公がジャンプしたりするように、少しだけアナタの思い通りにコンピューターを動かしてみましょう！

■6日目　プログラム１■

<script>

	/*jspgm6_1*/
	/*6日目　プログラム１*/

	var age = prompt("あなたの年齢を教えてください");

	alert("あなたは" + age + "才ですね！");

</script>

■実行結果■

■説明■

いくつかある入力命令の中から「prompt(プロンプト)」命令を紹介します。

この命令は「alert」命令のようなボックスを表示してそこに入力をしてもらう命令になります。

上のプログラムでは

var age = prompt("あなたの年齢を教えてください");

こちらで変数「age」に「prompt」命令を使って年齢を入力してもらっております。

prompt("");の中に入力ボックス内に表示する題名を入れる事ができます。

■6日目　プログラム２■

<script>

	/*jspgm6_2*/
	/*6日目　プログラム２*/

	var name = prompt("あなたの名前を教えてください");
	var age = prompt("あなたの年齢を教えてください");
	
	alert(name + "\n" + age + "才ですね");

</script>

■実行結果■

■説明■

もちろん文章も受け取る事ができます。

初期値を入れる

入力ボックス内の初期値(最初から入っている値)も入れる事ができます。

■6日目　プログラム３■

<script>

	/*jspgm6_3*/
	/*6日目　プログラム３*/

	var name = prompt("あなたの名前を教えてください",
		"山田　太郎");

	var age = prompt("あなたの年齢を教えてください",
		"20");
	
	alert(name + "\n" + age + "才ですね");

</script>

■実行結果■

■説明■

スペースの都合上プログラムを途中で折り返しておりますが、そのままつなげて書いて大丈夫です。

自分でプログラムを折り返して書く時は、折り返したらダメなトコロなどもあるのでご注意ください。

「題名」の次にコンマで区切ってメッセージを加えれば初期値を入れる事もできます。

計算機ってほどでもないですが、前回までの復習もかねて入力した２つの数字の計算結果を表示するというプログラムを作ってみましょう！

プログラムが長いのでカッコの閉じ忘れなどに気をつけながらゆっくりプログラミングしてください。

■6日目　プログラム４■

<script>

	/*jspgm6_4*/
	/*6日目　プログラム４*/

	var suji,suji2;

	alert("２つの数字を計算します！");

	suji = prompt("ひとつ目の数字を入力");

	suji2 = prompt("ふたつ目の数字を入力");

	alert("１つ目の数字 : " + suji + 
		"\n２つ目の数字 : " + suji2 +
		"\nsuji + suji2 = " + (Number(suji) + Number(suji2)));

	alert("１つ目の数字 : " + suji + 
		"\n２つ目の数字 : " + suji2 +
		"\nsuji - suji2 = " + (suji - suji2));

	alert("１つ目の数字 : " + suji + 
		"\n２つ目の数字 : " + suji2 +
		"\nsuji × suji2 = " + (suji * suji2));

	alert("１つ目の数字 : " + suji + 
		"\n２つ目の数字 : " + suji2 +
		"\nsuji ÷ suji2 = " + (suji / suji2));

</script>

■実行結果■

■説明■

２つの数を順番に入力してもらって計算するプログラムです。

少し長いプログラムですが今までやってきた事を合わせただけなので特に難しくはなかったと思います。

一か所だけ見慣れない部分がありますね。

(Number(suji) + Number(suji2))

この部分ですね。

この「Number」命令は「文字列型」を「数値型」に変換してくれる命令になります。

4日目の「変数とは？」で少し紹介した変数の「型」のお話ですね。

この「Number」命令を外して足し算だけにすればわかりますが、変数「suji」、「suji2」は文字列として扱われくっつけただけの状態で結果を表示してしまいます。

そこで「Number」命令を使って間違えのないように数値変換をしているのです。

javascriptではこの型の判断が勝手に行われてしまうので、あやしい時はこの「Number」命令などを使って「型」を明らかにします。

7日目 If(もし～だったら)