第1章まとめクイズ
クイズ1
プロフィールサイト (作品カード .work-card が 3 枚あり、作品セクションの id は works) で次のコードを実行すると、コンソールに何が 2 行出力されますか。
JavaScript
const cards = document.querySelectorAll(".work-card");
console.log(cards.length);
const gallery = document.querySelector("#work");
console.log(gallery);クイズ2
お問い合わせ欄に打たれた文字を画面に表示するとき、innerHTML ではなく textContent を使う理由として正しいものはどれですか。
クイズ3
1 枚目の作品カードに対して次のコードを実行すると、コンソールに何が 2 行出力されますか。カードの class 属性は最初 work-card だけとします。
JavaScript
const first = document.querySelector(".work-card");
first.classList.add("featured");
first.classList.add("featured");
first.classList.toggle("featured");
console.log(first.classList.contains("featured"));
console.log(first.className);クイズ4
createElement で要素をつくったのに、エラーも出ないまま画面に何も出てこないことがあります。原因としていちばん多いものはどれですか。
クイズ5
HTML に作品カード .work-card が 3 枚書かれている状態で次のコードを実行すると、最後の行は何を出力しますか。
JavaScript
const workList = document.querySelector(".work-list");
const extraWorks = [
{ title: "JavaScript のメモ帳", published: true },
{ title: "つくりかけの計算機", published: false },
{ title: "クリックできるボタン", published: true }
];
extraWorks.forEach((work) => {
if (!work.published) {
return;
}
const card = document.createElement("article");
card.className = "work-card";
card.textContent = work.title;
workList.append(card);
});
console.log(document.querySelectorAll(".work-card").length);未回答の問題は、不正解として正解と解説のみ表示します
ログインが必要です
クイズに回答するにはログインしてください。