少しだけ難易度が上がります。
ただ、今回はjQueryというよりJavaScriptそのものです。
プログラミング的な書き方の第一歩と言ったところでしょうか。
if文とは、条件によって処理を変える書き方の1つです。
条件がAだったらAの処理を行い、BだったらBの処理を行う、という分岐ができます。
例えば、冷蔵庫の中身が魚だったら焼き魚を食べる。
肉だったらステーキを食べる。
そんな分岐です。
JavaScriptやjQueryに限らず、他言語でも多用する書き方です。
しっかり覚えておきましょう。
今回も、以下のミッションに挑戦してみてください。
必要なソースコードについては、ページ下部に記載しました。
ミッションの内容
下記のファイルを再現してみましょう。
まず「input要素」に文字を入力して、ボタンを押します。
inputに入力した文字が「こんにちは」なら「Hello」が返ってきます。
「こんばんは」なら「Good afternoon」が返ってきます。
一度「ソースコードの解説」を確認してから、挑戦してみましょう。
もし、どうしても再現できない場合は、下記のファイルを参考にしてください。
ソースコードの解説
では、今回の処理の流れを考えてみましょう。
文字にするとそんなに難しいことはありません。
- input要素に文字を入力してボタンを押す
- input要素に入力された文字を取り出して「変数」に入れる
- 取り出した文字 ( 変数の中身 ) が「こんにちは」「こんばんは」のどちらなのかを判断する
- 判断結果を見て、alertでHelloかGood afternoonを出す
JavaScriptに限らず、プログラミング言語には「変数」が存在します。
変数とは、数字や言葉などを入れておける「箱」みたいなものです。
取り出して表示したり、数字を足したり、中に入っているデータを比較したり。
箱の中身について、どう使うかは自由です。
JavaScriptでは、先頭にletをつけると変数になります。
ただ、他にも変数を定義する方法として、verやconstなども存在します。
var、let、constなどについては、また改めてご説明します。
ひとまず今は、letをつけておいてください。
let target = "123456";
上記であれば、targetという変数の中に、123456が格納されます。
ただ、今回は、123456ではなく、input要素の値を入れなければなりません。
どうやったら、inputの値を取得することができるのでしょう。
それは、下記のソースコードで取得できます。
$('.textbase').val();
input要素には.textbaseというclassがついています。
上記のソースコードで.textbaseの中に入ったテキストが取得されます。
変数に取得した値を入れるには、変数と合体させるだけです。
let target = $('.textbase').val();
これで、textbaseのテキストを、変数targetに入れることができました。
次は、いよいよ「if文」を使っていきます。
if文とは、AとBを比較し、条件分岐させるものです。
Aだったら「A」と処理し、Bだったら「B」と処理します。
「もし変数の中身がナントカだったら」という条件による分岐を実現できます。
難しく考える必要はありません。
まずはソースコードを見てみましょう。
if(target == "こんにちは"){
//Helloとアラートを出します。
alert("Hello");
//もしtargetの中身が「こんばんは」なら、、
}else if(target == "こんばんは"){
//Good Afternoonとアラートを出します。
alert("Good Afternoon");
//もしtargetの中身が「こんにちは」「こんばんは」どちらでもないなら、、
}else{
//「こんにちは」もしくは「こんばんは」を入力してください。とアラートを出します。
alert("「こんにちは」もしくは「こんばんは」を入力してください。");
};
変数targetが「こんにちは」であれは「Hello」が出力されます。
もし「こんばんは」だったら「Good Afternoon」が出力されます。
それ以外であれば
「こんにちは」もしくは「こんばんは」を入力してください。
と出力されます。
if文は、このif、else、else ifがセット、というわけでもありません。
elseが無くても使えますし、else ifがなくても使えます。
例えばこんな感じです。
//もしtargetの中身が「こんにちは」なら、、
if(target == "こんにちは"){
//Helloとアラートを出します。
alert("Hello");
}
//もしtargetの中身が「こんばんは」なら、、
if(target == "こんばんは"){
//Good Afternooとアラートを出します。
alert("Good Afternoon");
}
上記であれば「〜〜を入力してください」の文言は出ません。
しかし「こんにちは」と「こんばんは」を見分けることはできます。
//もしtargetの中身が「こんにちは」なら、、
if(target == "こんにちは"){
//Helloとアラートを出します。
alert("Hello");
//もしtargetの中身がそれ以外なら、、
}else{
//Good Afternoonとアラートを出します。
alert("Good Afternoon");
}
上記でも一緒です。
色々な使い方が出来ますので、状況によって使い分けてみてください。
なお「target == “こんにちは”」の「==」の部分を、比較演算子と言います。
比較演算子には様々な種類があります。
「==」は「同じだったら」という意味です。
「!==」であれば「左と右が同じでなければ」という意味になります。
「<」であれば「左の数字が右より少なければ」になります。
様々な比較の手段があるのです。
詳しくは、下記の情報を参考にしてみてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
比較演算子とif文は、使わないことが無いくらい重要な書き方です。
何度か練習してマスターしてみましょう。