JavaScriptでビンゴシートを作ろう (全13回) - プログラミングならドットインストール

このレッスンをはじめる前に

このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。

PREMIUM

PREMIUM

PREMIUM

PREMIUM

PREMIUM

#01 必要なファイルを準備しよう (02:06) 無料公開中
- 完成版の確認
- index.htmlの作成
#02 実装方針を確認しよう (01:54) 無料公開中
- ビンゴシートのルール確認
- 実装方針の説明
#03 B列の配列を作ろう (02:45) 無料公開中
- main.jsファイルの作成
- splice()での配列生成
#04 配列を確認してみよう (01:37)
- デベロッパーツールでの確認
- spliceに関する注意点
#05 for文で書き換えてみよう (01:51)
- for文を使った書き換え
- 動作確認
#06 関数で処理をまとめてみよう (02:28)
- 関数を使った書き換え
- 扱う数値の範囲を一般化
#07 すべての列の配列を完成させよう (01:57)
- 配列の完成
- console.table()を使った確認
#08 配列の行と列を反転させよう (01:50)
- 行と列の反転
- for文の入れ子表現
#09 ビンゴシートの画面をマークアップしよう (01:44)
- HTMLのマークアップ
- ブラウザでの確認
#10 CSSでスタイルを整えていこう (01:46)
- styles.cssの作成
- CSSによるスタイリング
#11 ビンゴシートを動的に生成しよう (02:37)
- DOM操作によるtr､td要素の生成
- 画面の完成
#12 ソースコードを整理していこう (02:29)
- 関数を使った書き換え
- createColumns() の作成
- createBingo() の作成
#13 ビンゴシートを完成させよう (02:23)
- 関数を使った書き換え
- renderBingo() の作成

記事はありません。