🏆 このクイズはコース全体の理解度を確認する応用問題です。複数レッスンの知識を組み合わせて解きましょう。
Q1
const age = prompt("年齢は?"); で入力された値を if (age >= 18) で比較しています。正しく動きますか?
prompt() の戻り値は常に文字列です。文字列の比較では "9" > "18" が true になるなど意図しない結果になります。Number(age) で数値に変換してから比較しましょう。
Q2
function sum(numbers) { let total = 0; for (let i = 0; i < numbers.___; i++) { total += numbers[i]; } return total; } — 配列の要素数を取得するプロパティは?
配列.length で要素の数を取得できます。for ループで配列の全要素を処理するとき、i < numbers.length とすることで最後の要素まで繰り返します。
Q3
ボタンをクリックしたら画面のテキストを変更する処理を作りたい。正しい手順はどれ?
まず操作対象の要素を取得し、次にイベント(クリック)を設定し、イベント発生時に実行される関数の中でテキストを変更します。この順番が基本パターンです。
Q4
配列 [85, 72, 90, 68, 95] から80点以上の数を数えるコードとして正しいのはどれ?
for ループで配列の各要素を順番にチェックし、if 文で80以上かどうかを判定し、条件に合えば count を1増やします。ループと条件分岐の組み合わせです。
Q5
HTMLの要素をidで取得するメソッド名は? document.___("myId")
💡 ヒント
get(取得)+ Element(要素)+ By(〜で)+ Id
document.getElementById("id名") で、指定した id を持つHTML要素を取得できます。DOM操作の最も基本的なメソッドです。
Q6
const btn = document.getElementById("btn"); btn.addEventListener("click", function() { const count = 0; count++; btn.textContent = count; }); — クリックしても数字が1のまま増えない原因は?
count が関数の中で宣言されているため、クリックのたびに0にリセットされます。関数の外で let count = 0; と宣言すれば、値が保持されて増え続けます。また const は再代入できないので let に変える必要があります。
Q7
const double = (n) ___ n * 2; — アロー関数の記号は?
=> はアロー関数の記号で、function の省略形です。(引数) => 戻り値 の形で、短い関数を簡潔に書けます。
Q8
console.log(typeof null) の結果はどれ?
typeof null が "object" を返すのは JavaScript の歴史的なバグですが、仕様として残っています。null かどうかを判定するには === null を使いましょう。
Q9
要素のCSSクラスを追加するメソッド: element.classList.___("active")
💡 ヒント
英語で「追加する」を意味する単語です
classList.add("クラス名") でクラスを追加、classList.remove("クラス名") で削除できます。クラスの付け外しでスタイルを動的に変更するのはよく使うパターンです。
Q10
ToDoアプリで「追加ボタンを押すとリストに項目が追加される」機能を作る。必要な処理の正しい順番はどれ?
まずボタンを取得してイベントを設定し、クリック時に input から値を読み取り、新しい li 要素を作って ul に追加します。DOM操作・イベント・要素作成の総合的な流れです。
Q11
let x = "5" + 3; の結果はどれ?
JavaScript では文字列 + 数値は文字列の連結になります。"5" + 3 は "5" と "3" が連結されて "53" になります。数値として計算したい場合は Number("5") + 3 とします。
Q12
const fruits = ["りんご", "バナナ", "みかん"]; fruits.___("ぶどう"); — 配列の末尾に要素を追加するメソッドは?
push() は配列の末尾に要素を追加します。pop() は末尾から削除、unshift() は先頭に追加、shift() は先頭から削除です。
Q13
const greet = (name) => { return "こんにちは、" + name; } を1行で書き換えたものとして正しいのはどれ?
アロー関数で処理が1行の場合、{} と return を省略できます。式の結果がそのまま戻り値になります。
Q14
if 文で「AでもBでもないとき」に実行されるブロックのキーワードは?
💡 ヒント
「それ以外」を意味する英単語です
if (条件A) { ... } else if (条件B) { ... } else { ... } の else ブロックは、どの条件にも当てはまらないときに実行されます。
Q15
document.createElement("li") は何をしますか?
createElement は要素を作るだけで、画面には表示されません。appendChild() などで既存の要素に追加して初めて画面に表示されます。
Q16
for (let i = 0; i < 5; i___) { console.log(i); } — i を1ずつ増やす演算子は?
++ はインクリメント演算子で、変数の値を1増やします。i++ は i = i + 1 と同じ意味です。for ループの更新式でよく使います。
Q17
addEventListener の第2引数に渡す関数はいつ実行されますか?
addEventListener の第2引数はコールバック関数で、イベントが発生するまで待機し、発生した瞬間に実行されます。これが「イベント駆動」の仕組みです。
Q18
HTML要素のテキスト内容を変更するプロパティ名は?(element.___)
💡 ヒント
text(テキスト)+ Content(内容)
element.textContent = "新しいテキスト" で要素のテキストを変更できます。innerHTML と違い、HTMLタグは解釈されずそのまま文字として表示されます。
Q19
以下のコードの問題点はどれ? const items = [1, 2, 3]; for (let i = 0; i <= items.length; i++) { console.log(items[i]); }
配列のインデックスは 0 から length-1 まで。i <= length だと存在しないインデックスにアクセスして undefined になります。i < length が正しいです。