あーりーです。
JavaScriptで遊んでいます。
突然ですが…
あなたはファンタジーの世界の「勇者」です。
今から、悪者にさらわれた「お姫様」を助けに行くところです。
そのためには強力な武器が必要です。
と、そこへ…
商人がやってきました。
「伝説の剣を売ってあげるよ」
ラッキー！
あなたは商人に値段をたずねました。
「いくら？」
商人は答えます。
「逆に、いくらなら払える？」
さて。
いくら払いますか？
安すぎると売ってもらえません。
高すぎても、所持金が不足して買えません。
ちょうどいい金額を提示する必要があります。
伝説の剣をいくらで買う？
仮に…
提示金額が300ゴールドより少ないと、売ってもらえないとします。
また…
500ゴールドより高いと、そもそも所持金が不足して買えないとします。
つまり…
300ゴールド以上、500ゴールド以下が、ちょうどいい金額だとします。
JavaScriptでやってみよう
これをJavaScriptでやってみます。
実現したいのは、以下の内容です。
- 「何ゴールド払う？」という質問とともに入力欄が出てくる。
- その入力欄に、300ゴールド以上、500ゴールド以下の金額を入力すると「商談成立」と表示される。
- それ以外を入力すると「買えません」と表示される。
スクリプト
これを実現するスクリプトは以下のとおりです。
今回のポイントは、2つの条件（300以上、500以下）を同時に満たすことを表わす「&&」という記号です。
その部分を赤くしておきます。
<html>
<head>
</head>
<body>
<script>
var x;
x=prompt("何ゴールド払う？","");
if(x>=300 && x<=500){
document.write("商談成立！");
}else{
document.write("買えません");
}
</script>
</body>
</html>
緑色の部分がJavaScriptです。
それ以外の、HTMLの部分は究極にあっさりと書いています。
実行すると？
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
「何ゴールド払う？」という質問とともに入力ダイアログが表示されます。
数字を半角で入力する
入力ダイアログの入力欄に「300」以上で「500」以下の数字を半角で入力し、「OK」をクリックすると、ブラウザに「商談成立」と表示されます。
それ以外を入力した場合は「買えません」と表示されます。
解説
では、どんな仕組みでそうなるのか、じっくり見ていきましょう～。
変数「x」の準備
まずこの行です。
var x;
変数「x」を使うための予告をしています。
これで変数「x」を使う準備が完了しました。
入力ダイアログの表示
つぎの行です。
x=prompt("何ゴールド払う？","");
ここで入力ダイアログを表示しています。
左のダブルクォートの中身は「何ゴールド払う？」です。
これは入力ダイアログに表示される説明文です。
右のダブルクォートの中身は空欄です。
これは入力欄にあらかじめ表示しておきたい内容を書いておく部分です。
今回は空欄なので、入力欄にはあらかじめ何も表示されません。空っぽです。
入力ダイアログの情報を「x」に代入
同じ行です。
x=prompt("何ゴールド払う？","");
赤い部分が、さっき準備した変数「x」です。
入力ダイアログに入力された情報は、この「x」に代入されます。
今回のポイント
つぎの行がこちら。
if(x>=300 && x<=500){
ここが今回のポイントです。
if文
まず押さえておきたいのは、これが「if文」だということ。
「if文」のうしろには条件式がつきもので、その条件式が成立する場合はAの処理をする、成立しない場合はBの処理をする…
というように、プログラムの流れを分岐させることができます。
※詳しくは「よくわかるif文の基本」をご覧ください。
2つの条件式
もう一度この行を見てみると…
if(x>=300 && x<=500){
「x」を使って、2つの条件式が作られています。
ひとつは「x>=300」という条件式。
これは「x」が「300」以上なら…という意味です。
もうひとつは「x<=500」という条件式。
これは「x」が「500」以下なら…という意味です。
&&は「かつ」
2つの条件式のあいだには「&&」という記号があります。
赤い部分です。
if(x>=300 && x<=500){
これは、両方の条件式が同時に成立する場合を意味しています。
日本語にすると「かつ」です。
つまりこの部分の意味は…
「x」が「300」以上で、かつ、「x」が「500」以下
です。
2つの条件式がともに成立するとき
「x」が「300」以上で、かつ、「x」が「500」以下
という条件が成立すると、画面には「商談成立」と表示されます。
それがこの部分です。
document.write("商談成立！");
2つの条件式のどちらかが成立しないとき
「x」が「300」以上
「x」が「500」以下
↑
このどちらかが成立しないときは、画面に「買えません」と表示されます。
それがこの部分です。
}else{ document.write("買えません"); }
まとめ
「&&」を使えば、2つの条件式が両方とも成立する場合はこっち、どちらか一つでも成立しない場合はこっち…
というように、プログラムの流れを分岐させることができます。
今回はこれでおしまい～。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
