どうも！LSSです！！
「はてなブログで始める！JavaScript超入門！」、前回は
第一章 Hello World
第二章 変数を使ってみよう！
第三章 計算ぐらいしておこうか
という内容でお送りしました。
さて、今回は第二回をお送りします！
第四章 ifによる分岐
前回のコードを少し書き換えて、次のようにします。
<div id="hello"> </div>
<script>// <![CDATA[
a=0;
if(a==0){
hello.innerHTML="ゼロ、ってなんか響きがいいよね";
}
// ]]></script>
基本的にコードは日本語変換をオフにして打ちますが、
"ゼロ、ってなんか響きがいいよね"
この""の中身に関しては日本語で書いてもOKです^^
で、プレビューしてみます。
普通に出てきましたね。
では次に、３行目の
a=0;
を、
a=1;
に書き換えてみましょう。
↑こういう状態ですね。
これでもう一度プレビューを開くと…？
↑なにも出てこなくなってしまいました…。
文字を書き出しているのは、
hello.innerHTML="ゼロ、ってなんか響きがいいよね";
の部分で、そこには手を加えていないのに？？
もう一度、３行目を
a=0;
にすると…
やっぱり出てきますね。
<div id="hello"> </div>
<script>// <![CDATA[
a=0;
if(a==0){
hello.innerHTML="ゼロ、ってなんか響きがいいよね";
}
// ]]></script>
何が起こっているのか、順を追って見ていきます。
ページが読み込まれ、ブラウザが表示しようとした時に、<script>タグをブラウザが見つけると、その中身をJavaScriptのコードとして実行しようとします。
まず最初に、
a=0;
というコードがありました。
そこで、ブラウザは「aという変数（aと側面に書いた箱）」を用意します。
そしてその中に「0」という数字をぶち込みます。
さて次に進むと、今度は
if(a==0){
中略
}
というものがありました。
ブラウザは「お、ifがでてきたな。ifのしきたりに沿って処理しないと…」と判断します。
～ifのしきたり～
if(条件){処理}
ifの後には()と{}がつき、()の中身は「条件」、{}の中身は「処理」とみなされます。
そして、「条件」に書かれている事が真の場合（正しい場合）だけ、「処理」として書かれた内容を実行し、「条件」が偽の場合（正しくない場合）は「処理」を行わずスルーします。
さて、ブラウザがまず()の中身を確認すると、そこには
a==0
と書かれています。
=が二つ続けて書かれていますが、JavaScriptの場合、
「左と右が同じものかどうか比較」
する場合には==で書く事になっています。
（他のプログラム言語は=だけのものもあります）
さっきaにぶち込んだものは0で、「0と0」は同じものですね。
なので「条件」は真である（正しい）と判断され、めでたく「処理」の部分が実行される事になります。
この場合の処理は、
hello.innerHTML="ゼロ、ってなんか響きがいいよね";
なので、第一章の”Hello World"の時と同じく、
「helloと名付けられた要素の中身に"ゼロ、ってなんか響きがいいよね"という文字列をぶち込む」
という処理が行われ、プレビュー表示した時にはそれが表示された状態になりました。
その後、３行目を
a=1;
に書き換えた時には、ifのところで「1と0」は同じじゃないよね。って事で、
hello.innerHTML="ゼロ、ってなんか響きがいいよね";
の部分は実行されずにスルーされたため、プレビュー表示で出てこなかった、というのが事の真相です。
第五章 ifのもうひとつのしきたり
～ifのもうひとつのしきたり～
if(条件){真の場合の処理}else{偽の場合の処理}
ifの後に()と{}else{}がつき、()の中身は「条件」、２つの{}の中身はそれぞれ「処理」とみなされます。
「条件」に書かれている事が真の場合（正しい場合）は、
最初の{}の中に書かれた「処理」だけを実行します。
「条件」が偽の場合（正しくない場合）は、
elseの後ろの{}に書かれた「処理」だけを実行します。
ifには、↑のような もうひとつの書き方があります。
再度、コードに手を加えてみます。
<div id="hello"> </div>
<script>// <![CDATA[
a=0;
if(a==0){
hello.innerHTML="ゼロ、ってなんか響きがいいよね";
}else{
hello.innerHTML="ゼロではない何か";
}
// ]]></script>
ピンク色部分を書きたしました。
これをプレビュー表示すると、
↑また同じ結果ですね。
（ちなみに、同じ画像を使わずいちいちスクショ撮ってアップしています←どうでもいい情報ｗ）
ではまた、３行目を
a=1;
に書き換えて、プレビュー表示してみます。
else{}を書く前は、aの中身を1にしてa==0が成立しないようにすると何も出てきませんでしたが、else{}の中に別の処理
hello.innerHTML="ゼロではない何か";
を書いたら、そっちが実行されるようになりましたね^^
if(条件){処理}
のほうを使うか、
if(条件){真の場合の処理}else{偽の場合の処理}
のほうを使うか、は今後、ifを使用する場面で都合のいい方を使っていく事になります。
プログラムを実行する＝コンピュータになにかを判断させる時、ほとんどのプログラム言語で使用する事になる、とっても基本的かつ重要なifについて、の回でした^^
一応、余談なんですけど、
「ifのしきたり」とか言ってますが「しきたり」ってLSSが今回の説明のために使った言葉ってだけで、プログラミング界隈でそう呼ばれているわけではない、という事だけ付け加えておきますｗｗｗ
あともひとつ。前回の記事の中にJavaScriptと全く関係のないLSSの個人情報を忍ばせております。←本気でどうでもいいな！
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
