ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/05
NEW
【週刊ドットインストール】 レッスン制作の進捗、256timesのエディター更新、メンタリングの現場から
PREMIUM
JavaScriptで三択クイズを作ろう
シンプルな三択クイズを作りながらJavaScriptのDOM操作についての理解を深めていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
JavaScript入門 基礎文法編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 関数編
(全12回)
PREMIUM
PREMIUM
0%
JavaScript入門 データ構造編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 DOM編
(全22回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(14)
質問と回答
(14)
#01 三択クイズを作ってみよう
(02:14)
無料公開中
完成版の確認
作業用フォルダの設定
index.htmlの作成
未完了
#02 HTMLのマークアップをしよう
(02:20)
無料公開中
index.htmlのマークアップ
要素の確認
style.cssの作成
文字コードの指定
未完了
#03 CSSでスタイリングをしよう
(02:45)
無料公開中
mainのスタイリング
h1のスタイリング
未完了
#04 全体のスタイルを整えよう
(02:42)
cursor
.correctクラス
.wrongクラス
::after疑似要素
未完了
#05 JavaScriptの実装をはじめよう
(02:00)
main.jsの作成
クイズデータの用意
未完了
#06 section要素を生成しよう
(02:36)
createElement('section')
appendChild()
開発者ツールで確認
未完了
#07 h2要素を生成しよう
(01:34)
createElement('h2')
配列へのアクセス
textContent
appendChild()
未完了
#08 ul要素を生成しよう
(02:16)
createElement('ul')
appendChild()の動作を復習
未完了
#09 li要素を生成しよう
(02:30)
createElement('li')
appendChild()の動作を復習
未完了
#10 イベントリスナーを追加しよう
(02:40)
addEventListener()
未完了
#11 正解・不正解を判定しよう
(01:27)
正解・不正解の判定
classList.add()
classList.remove()
未完了
#12 問題の数を増やしてみよう
(02:04)
配列の入れ子
クイズの描画
未完了
#13 forEach()で処理でまとめよう
(01:45)
forEach()
未完了
#14 完成したアプリを振り返ろう
(01:04)
これまでのまとめ
アプリ開発の振り返り
未完了
#08 ul要素を生成しよう
main.appendChild(section); の挙動について教えてください
2023年12月21日
なぜ document.createElement('section').appendChild(h2) を使用しても反映されないのですか?
2023年9月15日
なぜ main.appendChild(section); を最後に書くのですか?
2023年6月22日
#09 li要素を生成しよう
li 要素を生成する時の書き方を変えてもいいでしょうか?
2023年2月22日
#10 イベントリスナーを追加しよう
function render(quiz) の役割はなんですか?
2023年9月2日
#11 正解・不正解を判定しよう
不正解時の判定について教えてください
2024年2月9日
#12 問題の数を増やしてみよう
h2.textContent = quiz[0]; としたとき、配列がそのまま表示されないのはなぜですか?
2024年9月7日
配列 quizzes の最後の要素はなぜその数字ですか?
2023年3月29日
quiz を削除したのに quiz が使用できるのはなぜですか?
2023年2月22日
quiz を削除してもエラーにならないのはなぜですか?
2023年2月22日
#13 forEach()で処理でまとめよう
render() 関数の外に定数宣言をすると正常に動作しないのはなぜですか?
2023年4月12日
配列と forEach の処理の流れは以下の通りで合っていますか?
2023年4月4日
#14 完成したアプリを振り返ろう
for 文の中で li を const で宣言したのに、再宣言・再代入できるのでしょうか?
2024年2月9日
li 要素を作る処理を 3 回行う場合のループ処理を教えてください
2023年4月4日
リリース情報(note)
『JavaScriptで三択クイズを作ろう』のリニューアル版をリリースしました!
詳細情報
最終更新日
2022年12月13日
バージョン情報
Chrome 108 / Visual Studio Code 1.73.1