制御構文 (1/6)
作成:2010-03-31 17:26
更新:2010-05-11 16:57
更新:2010-05-11 16:57
■二者択一の条件分岐「if」
制御構文というのは、スクリプトを実行していく流れを制御するものです。「これを実行したら次はこっちにいって、それからこちらをやって……」という具合に、必要に応じて信号や交通整理のおまわりさんのように流れを制御していくわけです。
この制御構文は、整理すると「分岐」と「繰り返し」の2つに分かれます。つまり、「必要に応じて実行する処理を変える」ものと、「必要に応じて処理を繰り返し実行する」ものです。どんな複雑なプログラムの流れも、実はこの2つの組み合わせでできているのです。
では、まず制御構文のもっとも基本となるもの「if」文から説明しましょう。if文は、条件を指定しておき、その条件が正しいかどうかで実行する処理を変える働きがあります。これは、条件が正しい時に実行する処理を書くだけの書き方と、その後に「正しくないときに実行する処理」を追加して書く書き方があります。(下のリスト部分を参照)
問題は、この「条件」ですね。これは「正しいか、正しくないか」を示す値でないといけません。二者択一の値。覚えてますか? そう、「真偽値」というものです。真偽値として扱えるものであれば、値でも変数でも式でも何でもかまいません。
一般に、一番多く使われるのは「比較演算子」というものを使った式でしょう。これは、=<>!といった記号を使い、2つの値が等しいかどうか、あるいはどちらが大きいかを「比較」する式です。(下のリスト部分を参照)
このifでは、実行する文は「1つだけ」しか記述できません。2文以上は書けないのです。が、実際問題として、そんなんじゃ実用にはなりませんね。そこでJavaScriptでは、「複数の文を1まとまりとして扱えるようにする」ものを利用します。それは{}という記号です。これを使い、
それでは、簡単な例をあげておきましょう。これは、HTMLに埋め込んで実際に動くスクリプトです。それぞれで簡単なHTMLファイルを作成し(sample.htmlとか適当なファイル名でOK)、Webブラウザから開いてみましょう。画面に「NOT」と表示されます。変数AとBを比較し、等しくないのでこう表示されるわけです。表示を確認したら、AとBの値を同じにして再度試してみましょう。今度は「OK!」と表示されますよ。
ちなみに、サンプルのコードでは、結果を表示するのに「alert」というものを使っています。これは「関数」と呼ばれるものです。Webブラウザに搭載されているJavaScriptには、さまざまな関数が用意されています。このalertは、その後の()内に書かれた値をアラートウインドウを使って表示します。あわせて覚えておくとよいでしょう。
この制御構文は、整理すると「分岐」と「繰り返し」の2つに分かれます。つまり、「必要に応じて実行する処理を変える」ものと、「必要に応じて処理を繰り返し実行する」ものです。どんな複雑なプログラムの流れも、実はこの2つの組み合わせでできているのです。
では、まず制御構文のもっとも基本となるもの「if」文から説明しましょう。if文は、条件を指定しておき、その条件が正しいかどうかで実行する処理を変える働きがあります。これは、条件が正しい時に実行する処理を書くだけの書き方と、その後に「正しくないときに実行する処理」を追加して書く書き方があります。(下のリスト部分を参照)
問題は、この「条件」ですね。これは「正しいか、正しくないか」を示す値でないといけません。二者択一の値。覚えてますか? そう、「真偽値」というものです。真偽値として扱えるものであれば、値でも変数でも式でも何でもかまいません。
一般に、一番多く使われるのは「比較演算子」というものを使った式でしょう。これは、=<>!といった記号を使い、2つの値が等しいかどうか、あるいはどちらが大きいかを「比較」する式です。(下のリスト部分を参照)
このifでは、実行する文は「1つだけ」しか記述できません。2文以上は書けないのです。が、実際問題として、そんなんじゃ実用にはなりませんね。そこでJavaScriptでは、「複数の文を1まとまりとして扱えるようにする」ものを利用します。それは{}という記号です。これを使い、
if (……){こんな具合に書けば、いくらでも文を書いていくことができます。これは、elseのあとにかく場合も同様です。1つの文でも{}は使えますので、「ifは全部{}をつけて書く」と覚えてしまってもいいでしょう。別に問題はありませんから。
文1;
文2;
}
○利用例○
それでは、簡単な例をあげておきましょう。これは、HTMLに埋め込んで実際に動くスクリプトです。それぞれで簡単なHTMLファイルを作成し(sample.htmlとか適当なファイル名でOK)、Webブラウザから開いてみましょう。画面に「NOT」と表示されます。変数AとBを比較し、等しくないのでこう表示されるわけです。表示を確認したら、AとBの値を同じにして再度試してみましょう。今度は「OK!」と表示されますよ。
ちなみに、サンプルのコードでは、結果を表示するのに「alert」というものを使っています。これは「関数」と呼ばれるものです。Webブラウザに搭載されているJavaScriptには、さまざまな関数が用意されています。このalertは、その後の()内に書かれた値をアラートウインドウを使って表示します。あわせて覚えておくとよいでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※ifの基本形(1) if ( 条件 ) ……実行する処理…… ※ifの基本形(2) if ( 条件 ) ……実行する処理…… else ……実行する処理…… ※比較演算子について A == B AとBは等しい A != B AとBは等しくない A < B AはBより小さい A <= B AはBと等しいか小さい A > B AはBより大きい A >= B AはBと等しいか大きい ※サンプルリスト <html> <head> <script type="text/javascript"> <!-- var A = 10; var B = 20; if (A == B) alert("OK!"); else alert("NOT"); //--> </script> </head> <body> <H1>TEST.</H1> </body> </html>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る