3日間天気予報の完成画面は次のとおりです。
注
意
天気の情報は時間帯や地域によって、今日の天気や明後日の天気が表示されない場合があります。
今日・明日・明後日の3日間の天気を表示しましょう。
8. アクティビティ③ ( 8 / 11 )
アクティビティ③
3日間天気予報の作成
ファイルのダウンロード
アクティビティ③で使用するファイルをダウンロードします。
下記ダウンロードボタンからZipファイルをデスクトップなどにダウンロードして、ファイルを展開しましょう。
ダウンロードしたZipファイルを展開すると次のファイル構成になっています。
ファイルの説明
index.htmlファイルは、3日分の天気予報を表示するためのHTMLが作成済みです。ファイルの編集は script.jsファイルのみ です。
index.htmlファイルの説明
今日、明日、明後日の天気を表示するためのHTMLが作成済みです。
下図のように、今日、明日、明後日の表示位置をそれぞれ
script.jsファイルの説明
プログラムは3日間(今日・明日・明後日)のうちの「今日」の部分のみ正しくできています。
重要なポイントは下図の①、②です。
-
① 33行目 day=0;
dayの値で今日の天気、明日の天気、明後日の天気を切り替えます。
-
0 : 今日の天気
-
1 : 明日の天気
-
2 : 明後日の天気
-
-
② 34行目 day-0;
`day-0`などの値でHTMLの表示位置と対応させています。
-
`day-0` : HTMLファイルの今日の天気の表示位置
-
`day-1` : HTMLファイルの明日の天気の表示位置
-
`day-2` : HTMLファイルの明後日の天気の表示位置
-
課題3-1 明日の天気を表示するプログラムを完成させましょう
次の手順で明日の天気予報を表示するプログラムを作成しましょう。
次の作業手順に従ってください
手順1 今日の天気のプログラム33行目から39行目をコピーして、42行目～48行目に貼り付ける
貼り付けた直後は次のようになります。(script.jsの一部抜粋)
手順2 42行目と43行目を修正する
42行目と43行目は「今日の天気」を表示するための設定値が指定されています。
「今日の天気」の部分を明日の天気の指定に変更します。
・42行目 : day=0; を day=1;に変更する
・43行目 : 最後の(`day-0`) を ('day-1');に変更する
変更したscript.jsは次のようになります。
プログラムを修正したら保存してファイルをブラウザで確認しましょう。今日と明日の天気が表示されます。
今日と明日の天気を表示した時の実行例
注
意
天気の情報は時間帯や地域によって、今日の天気が表示されない場合があります。
課題3-1で作成した「script.js」ファイルを提出してください。
選択されていません
対応形式：.js
課題3-2 明後日の天気を表示するプログラムを完成させましょう
明後日の天気を表示するプログラムを作成します。
明日の天気を表示した時と同じ手順で表示できます。
次の手順を見ながら、「script.js」ファイルを修正してみましょう！！
明後日の天気を表示するための修正手順は次のとおりです。
-
手順1 今日の天気のプログラム33行目から39行目をコピーして、51行目以降に貼り付ける
-
手順2 51行目と52行目を修正する
ヒ ン ト明後日にするためには、53行目と54行目はどのような値にすればよいか考えましょう。
このページの中段「script.jsの説明」の箇所を確認しましょう。
プログラムを作成したら、index.htmlを開いて確認しましょう。
注
意
天気の情報は時間帯や地域によって、今日の天気や明後日の天気が表示されない場合があります。
課題3-2で作成した「script.js」ファイルを提出してください。
選択されていません
対応形式：.js
※この再現版では提出は行いません（送信先は未接続です）
