コース一覧
JavaScriptでWebページを動かす
第2章まとめクイズ

JavaScriptでWebページを動かす

DOM から要素を取得・更新・追加し、クリック・入力・フォーム送信に反応する処理を作る全 20 レッスン(411 分)のコースです。タイマーと localStorage も使い、最後は入力を保存できるひとことメモを仕上げます。用意された HTML/CSS を使うため、学習の中心は JavaScript です。

1
DOM のきほん
01. DOM とは何か15分
02. 要素を取得する20分
03. テキストを書き換える20分
04. class を付け外しする20分
05. 要素を作って追加する20分
06. 配列から一覧を描画する25分
07. つくる ギャラリーをデータ駆動にする30分
08. 第1章まとめクイズ10分
2
イベント処理
01. クリックに反応する18分
02. event オブジェクト20分
03. 入力欄の値を取る18分
04. フォーム送信を制御する20分
05. つくる ダークモード切替25分
06. つくる フォームの入力チェック25分
07. 第2章まとめクイズ10分
3
タイマーと総合制作
01. setTimeout と setInterval20分
02. localStorage で保存する20分
03. つくる ひとことメモウィジェット30分
04. 自由拡張30分
05. 完成と次のステップ15分

JavaScriptでWebページを動かす

01DOM とは何か
02要素を取得する
03テキストを書き換える
04class を付け外しする
05要素を作って追加する
06配列から一覧を描画する
07つくる ギャラリーをデータ駆動にする
08第1章まとめクイズ
09クリックに反応する
10event オブジェクト
11入力欄の値を取る
12フォーム送信を制御する
13つくる ダークモード切替
14つくる フォームの入力チェック
15第2章まとめクイズ
16setTimeout と setInterval
17localStorage で保存する
18つくる ひとことメモウィジェット
19自由拡張
20完成と次のステップ

第2章まとめクイズ

クイズ1

次のコードを読み込んだページで起きることとして、正しいものはどれですか。

JavaScript

function showMessage() { document.querySelector(".tagline").textContent = "こんにちは。山田 太郎です。"; } const button = document.querySelector(".submit-button"); button.addEventListener("click", showMessage());

クイズ2

次のコードを登録したうえで、1 枚目の作品カード .work-card の中にある h3 の文字の上をクリックすると、コンソールに何が 2 行出力されますか。カードは .work-list の中に並んでいます。

JavaScript

const workList = document.querySelector(".work-list"); workList.addEventListener("click", function (event) { console.log(event.currentTarget.className); console.log(event.target.tagName); });

クイズ3

お問い合わせのメッセージ欄 #message に 12 と打ち込んだ状態で次のコードを実行すると、コンソールに何が 2 行出力されますか。

JavaScript

const message = document.querySelector("#message"); console.log(message.value + 1); console.log(message.value.length);

クイズ4

送信ボタンを押したときも、入力欄で Enter キーを押したときも同じ処理を通したいとします。addEventListener を登録する相手とイベント名の組み合わせとして正しいものはどれですか。

クイズ5

次のコードを登録したページで、お名前欄 #name に文字を入れて送信した場合と、空のまま送信した場合とで、ページの再読み込みはそれぞれどうなりますか。

JavaScript

const form = document.querySelector(".contact-form"); const nameInput = document.querySelector("#name"); form.addEventListener("submit", function (event) { const value = nameInput.value.trim(); if (!value) { return; } event.preventDefault(); nameInput.value = ""; });

未回答の問題は、不正解として正解と解説のみ表示します

ログインが必要です

クイズに回答するにはログインしてください。