難易度は Level 1（やさしめ）〜Level 5（難関） の5段階です。
HTML5プロフェッショナル認定 レベル2のサンプル問題（本番形式・解説付き）
HTML5プロフェッショナル認定 レベル2（LPI-Japan・HTML5プロフェッショナル認定試験 レベル2（Ver2.5））の出題形式を、実際の問題で確かめられます。ここに掲載する5問は、無料の会員登録で解ける模試 第1回（40問）の冒頭から抜粋したオリジナル問題です。当サイトは全120問を本番CBT準拠の形式で収録しており、この5問はそのごく一部にあたります。
設問1
ボタンを内側に持つ div のそれぞれにクリックの処理を登録した。次のコードを実行した時の出力はどれか。 ```javascript const o = document.getElementById("o"), b = document.getElementById("b"); o.addEventListener("click", () => console.log("outer")); b.addEventListener("click", () => console.log("inner")); b.click(); ```
- inner、outer の順に出力される（正解）
- inner だけが出力される
- outer だけが出力される
- outer、inner の順に出力される
解説
クリックはまず対象の要素（ボタン）で処理され、その後に親要素へ伝わっていきます（バブリング）。`addEventListener` の第 3 引数を省略した処理は、このバブリングの段階で呼ばれるので inner、outer の順です。`outer、inner の順` はキャプチャの段階で呼ばれると考えた結果です。inner だけ・outer だけの選択肢は、イベントが親へ伝わらない、または対象に届かないと考えた結果になります。
設問2
次のコードを実行した時の出力はどれか。 ```javascript localStorage.clear(); localStorage.setItem("n", 1); localStorage.setItem("o", { a: 1 }); console.log(typeof localStorage.getItem("n"), localStorage.getItem("o"), localStorage.getItem("zzz")); ```
- `number [object Object] undefined`
- `string {"a":1} null`
- `number {"a":1} undefined`
- `string [object Object] null`（正解）
解説
Web Storage に保存される値は、必ず文字列に変換されます。数値の 1 は `"1"` に、オブジェクトは `toString()` の結果の `[object Object]` になります。オブジェクトを保存するには `JSON.stringify` で文字列にします。存在しないキーを `getItem` すると `null` が返ります。`number` や `{"a":1}` の選択肢は、型や JSON への変換が自動で行われると考えた結果で、`undefined` は存在しないキーの戻り値の取り違えです。
設問3
次のコードを実行した時の出力はどれか。 ```javascript console.log("5" + 3, "5" - 3, "5" * "2"); ```
- `53 2 NaN`
- `53 8 10`
- `8 2 10`
- `53 2 10`（正解）
解説
`+` は片方が文字列だと文字列連結になるので `"5" + 3` は `"53"` です。`-` と `*` は数値演算なので、`"5" - 3` は 2、`"5" * "2"` は 10 になります。`8 2 10` は `+` も数値の足し算と考えた結果です。`53 8 10` は `-` を足し算として扱った結果になります。`53 2 NaN` は、数字の文字列同士の掛け算が失敗すると考えた結果です。
設問4
次の HTML のページで、コードを実行した時の出力順はどれか。 ```html <div id="o"><button id="b">x</button></div> ``` ```javascript const o = document.getElementById("o"), b = document.getElementById("b"); o.addEventListener("click", () => console.log("O-bub")); b.addEventListener("click", () => console.log("B")); o.addEventListener("click", () => console.log("O-cap"), true); b.click(); ```
- O-cap、O-bub、B の順
- O-bub、B、O-cap の順
- B、O-bub、O-cap の順
- O-cap、B、O-bub の順（正解）
解説
`addEventListener` の第 3 引数が `true` の処理は、親から対象へ向かうキャプチャの段階で呼ばれます。その後に対象の要素（B）、最後にバブリングで親（O-bub）が呼ばれるので、登録した順とは関係なく O-cap、B、O-bub になります。`B、O-bub、O-cap の順` はキャプチャを一番最後と考えた結果です。`O-bub、B、O-cap の順` は登録した順に呼ばれると考えた結果になります。`O-cap、O-bub、B の順` は親の処理が子より先にまとめて呼ばれると考えた結果です。
設問5
次のコードを実行した時の出力はどれか。 ```javascript const w = new Worker(URL.createObjectURL(new Blob(["onmessage = (e) => postMessage(e.data * 2);"]))); w.onmessage = (e) => { console.log(e.data); w.terminate(); }; w.postMessage(21); console.log("sent"); ```
- sent だけが出力される
- 42 だけが出力される
- sent、42 の順に出力される（正解）
- 42、sent の順に出力される
解説
`postMessage` はメッセージを送るだけで、ワーカーの処理の完了を待ちません。メインスレッドの `console.log("sent")` が先に実行され、ワーカーから `42` が返ってきた時に `onmessage` が呼ばれます。`42、sent の順` はワーカーの処理が同期的に終わると考えた結果です。`sent` だけや `42` だけの選択肢は、片方の出力が起きないと考えた結果になります。
続きは、会員登録なしでそのまま50問解けます。採点と解説つきで、上と同じ本物の問題です。
登録なしで50問解く