ユーザーからの入力を受け付ける

2015年10月29日

タイトルの通り、ユーザーからの入力を受け取る方法について今回書いていきます。
これまでの記事では、プログラム内に書いてきた値を変数に代入して実行する処理をしてきました。しかし、この方法だと、後から値を変更したいときにソースコードを直接書き換えなければいけません。頻繁に値が変わる場合は、実行時にキーボードから入力できたほうが便利だと思います。

ユーザーが入力した入力した値をプログラム実行時に受け取る方法は、HTMLのフォームのテキストボックスを使う方法と、ダイアログボックスを使う方法があります。今回は、ダイアログボックスを使う方法を書きます。

入力用のダイアログボックスを表示するには、windowsオブジェクトのpromptメソッドをを使用します。

実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ユーザーからの入力を受け付ける</title>
   
</head>
<body>
    
<script>
    var height;
    var stdWeight;
    
    height = prompt("あなたの身長は？",165);
    stdWeight = (height - 100)* 0.9;
    document.write("身長：",height,"cm","<br>");
    document.write("標準体重：",stdWeight,"kg","<br>");
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>ユーザーからの入力を受け付ける</title>

</head>

<body>

var height;

var stdWeight;

height = prompt("あなたの身長は？",165);

stdWeight = (height - 100)* 0.9;

document.write("身長：",height,"cm","<br>");

document.write("標準体重：",stdWeight,"kg","<br>");

</script>

</body>

</html>

値を戻すメソッドと戻さないメソッド

メソッドには値を返すものと、値を課さない物があります。alertメソッドはダイアログボックスにメッセージを表示するだけで値を返しません。それに対して、今回の記事で出てきたpromptメソッドはダイアログボックスに入力された値を戻します。

このとき、メソッドが戻す値のことを戻り値といいます。戻り値を変数に格納する場合は下記のように「=」の左辺に変数を書きます。

height = prompt("あなたの身長は？",165);

promptメソッドの引数

入力ダイアログボックスを表示するpromptメソッドは、２つの引数を取ります。最初の引数はダイアログボックスに表示されるメッセージ「あなたの身長は？」を、2番目の引数はテキストバックスに表示される初期値「165」です。