JavaScript よくわかる「if文」の基本

JavaScript

あーりーです。

趣味でJavaScriptの勉強をしています。

まだヨチヨチ歩きですが、わかることが増えてくるとますます楽しいですね。

 

 

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。

if文で条件分岐

さて~。

今回のテーマは「if文」です。

 

 

「if文」を使えば、プログラムの流れに分かれ道を作ることができます。

条件分岐です。

 

 

これができるようになると…

プログラムを勉強している!っていう気分がさらに盛り上がってきますね。(←勝手に盛り上がってる)

条件式

プログラムの流れに分かれ道を作るには、「条件式」を使います。

if もしも

if(イフ)は、英語で「もしも…」っていう意味ですよね。

 

 

もしも「条件式」が成立するなら、Aの処理をする。

もしも「条件式」が成立しないなら、Bの処理をする。

 

 

みたいな感じで…

if(イフ)を使って処理を変えることができるんです。

if文の構造

if文は、こんなふうに書きます。

if(条件式){
条件式が成立する場合の処理
}else{
条件式が成立しない場合の処理
}

条件式の作り方

条件式は、比較演算子を使って表現します。

 

 

たとえば、こちら。

a>10

「a」は「10」より大きい、という条件式です。

 

 

もしも「a」に代入されているのが「10」より大きい数字のときは、この条件式は成立します。

「10」以下の場合は、成立しません。

 

 

もう一つ例をあげますね。

name=="家康"

「name」と「家康」は等しい、という条件式です。

 

 

もしも「name」に代入されている情報が「家康」なら、この条件式は成立します。

それ以外なら、成立しません。

 

 

条件式が成立するか、しないかで、その後の処理が変わってきます。

では、実際に見てみましょう。

if文のサンプル

if文を組み込んだサンプルです。

<html>
<head>
</head>
<body>

<script>
var a;
a=Math.floor(Math.random()*2); 
if(a==0){
document.write("aは0です");
}else{
document.write("aは1です");
}
</script>

</body>
</html>

緑色の部分がJavaScriptです。

それ以外(HTMLの部分)は究極にあっさりと書いています。

サンプルの意味

このサンプルでやっていることは、こうです。

 

 

まず「0」か「1」、どちらかの数字を作ります。

その数字が「0」の場合は、画面に「aは0です」と表示します。

その数字が「1」の場合は、画面に「aは1です」と表示します。

解説

では、どんな仕組みなのか1行ずつ見ていきますね。

変数を使う準備

まず、こちら。

var a;

 

 

この行では「これからaという変数を使いますよー」と宣言しています。

※変数について詳しくは、JavaScriptで「変数」に数字や文字を代入する方法をご覧ください。

0か1の数字を作る

つぎの行です。

a=Math.floor(Math.random()*2);

 

 

ここでは、さっき準備した「a」という変数に、「0」か「1」の数字を代入しています。

※JavaScriptでランダムな数字を作る仕組みはコチラをご覧ください。

条件式が成立する? しない?

つぎの行です。

if(a==0){

 

 

「a」は「0」と等しい、という条件式です。

これが成立するか、しないかで、その後の処理が変わってきます。

条件式が成立する場合の処理

つぎの行です。

document.write("aは0です");

 

 

これが、条件式が成立する場合の処理です。

つまり変数「a」が「0」と等しい場合ですね。

 

 

どんな処理かというと…

document.writeによって「aは0です」という文字が画面に表示されます。

※document.writeについて詳しくは「JavaScriptで文字を表示する方法」をご覧ください。

条件式が成立しない場合の処理

最後はこちら。

}else{
document.write("aは1です");
}

 

 

条件式が成立しない場合の処理です。

つまり変数「a」が「1」の場合ですね。

document.writeによって「aは1です」という文字が画面に表示されます。

 

 

以上が「if文」を使ってプログラムの流れに分かれ道を作る方法です。

今回はこれでおしまい~。

 

 

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。

タイトルとURLをコピーしました