JavaScript02 課題01回答

課題01の回答例と解説です。

Q.01

変数に"こんにちは。"を入れて、文字を置き換えてください。

回答例

JavaScript

実行結果

おはようございます。

Q.02

表示ボタンをクリックしたときに下記のテキストの内容を取得してアラート表示させてください。

回答例

JavaScript

実行結果

こんばんは!

Q.03

表示ボタンをクリックたときにフォームに入力した内容をアラート表示させてください。

回答例

JavaScript

実行結果

Q.04

表示ボタンをクリックしたときにプルダウンで選択した値をアラート表示させてください。

回答例

JavaScript

実行結果

Q.05

プルダウンで選択したポケモンを表示させてください。

回答例

選択値の変化を検知するには、on関数で"change"を指定します。
値を取得する過程はQ.04と同じですが、取得した内容を画像タグに反映させるにはHTML側のoptionタグに指定する値を考える必要があります。
方法はいろいろありますが、ここではimgタグのsrc属性に入る値をそのままoptionタグの値として指定しています。

JavaScript

HTML

実行結果

Q.06

ボタンをクリックするたびにカウンター値を増やしてください

回答例

カウンターの値を増やすには、現在の値を取得して1を足した値を再度反映させる必要があります。

JavaScript

実行結果

カウンター:0

Q.07

ボタンをクリックするたびにポケモンを進化させてください

回答例

「クリックするたびに」値を変えるには配列を使うと便利です。Q.06で行った加算の方法を利用して、配列の参照先を変化させます。

JavaScript

実行結果

Q.08

ボタンをクリックするたびにポケモンを進化/退化させてください

回答例

単純な増減処理のみであれば、Q.07で行った方法のみでOKです。ただ進化の上限、退化の上限を超えてクリックされた場合に動作の不具合が生じるため、if文で上限、下限の設定を行います。

JavaScript

実行結果