第8章まとめクイズ

クイズ1

プロフィールサイト (作品カード .work-card が 3 枚あり、作品セクションの id は works) で次のコードを実行すると、コンソールに何が 2 行出力されますか。

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 だけとします。

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 枚書かれている状態で次のコードを実行すると、最後の行は何を出力しますか。

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);

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

ログインが必要です

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