if文を使ってみよう！

目標

if文を使って、条件に応じてウェブサイトに表示する内容を変えられるようにしましょう！

手順

1. index.htmlを確認しよう

Hacking-Time1で 最初に貼り付けたHTMLコードには、以下のコードがありました。

<!-- 分岐(もしも...) --><h2>今日は...</h2><p id="today_date"></p>

ここに、今日の「曜日」を表示できるようにするのがゴールです。

2. 曜日に応じて表示する内容をかえる

script.jsを開いて、一番下の行に以下のコードを入力してください。

//-------- 分岐 (もし〇〇なら...)  ----------// 日0, 月1, 火2, 水3, 木4, 金5, 土6let today_youbi = 0;// id名が today_date であるpタグの中身を書き換えたいlet today_date = document.getElementById("today_date");
// ここからif文if (/* (TRY!)条件式：today_youbiが0(==日曜日) だったら */){  today_date.innerText = "日曜日！！ゆっくりやすもう";}else if(/* (TRY!)条件式：today_youbiが6(==土曜日) だったら */){  today_date.innerText = "土曜日！！やっとお休みが始まるね";}else{ /* today_youbiが0や6以外だったら */  today_date.innerText = "平日だよー";}

(TRY!)と書いてある条件式を埋めてみましょう！終わった方は、表示する文章を変更してみてください！

2. 曜日の情報を取得する

Hacking-Time2 でやった方法で「曜日」の情報を取得しましょう。

すでに、let today = new Date() が書いてあるので、次は曜日に関する情報を取得しよう・

今、today_youbiは0が代入されています。このままだと、その日が何曜日であれ、曜日は0、つまり日曜日となってしまいます。これを、リアルタイムでJaveScriptを使って自動的に曜日が入るように変更しましょう

let today_youbi = today.????();

????には何が入るでしょうか？以下の表も参考にして書きかえてみましょう！

参考

完成！

表示したかったものが、正しく表示されましたか？

「条件に応じて表示する内容を変える」という技は本当によく使うので、ぜひ使えるようになるといいですね！

Challenge: 条件を増やそう

上の例では、「日曜日か？」「土曜日か？」「それ以外」の3つしか条件がありませんでした。もう一つ自分の好きな曜日について条件を追加し、好きなことばを表示させてみましょう！