-
#01 おみくじを作ってみよう (02:38)
- 完成版の確認
- index.htmlの作成
-
#02 ボタンのマークアップをしよう (01:55)
- styles.cssの作成
- main.jsの作成
- #btnのマークアップ
-
#03 画面のスタイルを整えよう (02:33)
- #btnのスタイリング
- 中央揃え
-
#04 クリックイベントを設定しよう (02:34)
- getElementById()
- clickイベントの設定
- hover疑似クラス
-
#05 ボタンのスタイルを整えよう (02:12)
- #btnのスタイリング
- active疑似クラス
-
#06 ランダムな整数値を生成しよう (02:16)
- 0,1,2のランダムな整数値
- 0...nのランダムな整数値
- min...maxのランダムな整数値
-
#07 おみくじを表示してみよう (02:10)
- ランダムな整数値の生成
- switch文によるおみくじの実装
-
#08 配列を使ってみよう (02:47)
- 配列を使ったおみくじの実装
- length
- ランダムな要素の選択
-
#09 確率を操作してみよう (03:00)
- 確率の変更
- Math.random()
#01 おみくじを作ってみよう
2019年8月16日
補足情報 必要となる知識について
このレッスンでは、以下のレッスンで紹介した内容をベースにしています。分からない点があった場合は、こちらも参考にしてみてください。
- HTML基礎文法入門 (全30回)
https://dotinstall.com/lessons/basic_html_tags - CSS基礎文法入門 (全37回)
https://dotinstall.com/lessons/basic_css_styles - 詳解JavaScript 基礎文法編 (全24回)
https://dotinstall.com/lessons/basic_javascript_grammer - 詳解JavaScript オブジェクト編 (全23回)
https://dotinstall.com/lessons/basic_javascript_objects - 詳解JavaScript DOM編 (全15回)
https://dotinstall.com/lessons/basic_javascript_dom
#07 おみくじを表示してみよう
2019年8月19日
補足情報 switch文について
switch文の詳細については以下のレッスンも参考にしてみてください。
- #15 switchで条件分岐をしてみよう | 詳解JavaScript 基礎文法編
https://dotinstall.com/lessons/basic_javascript_grammer/46515
ギャラリー
このレッスンについて
- 最終更新日
- 2019年8月16日
- バージョン情報
- Chrome 76.0 / Visual Studio Code 1.36.1
- 関連キーワード (5)
補足情報 VS Code の設定について
このレッスンでは、デフォルトの設定を一部変えています。基本的な設定の仕方については、以下のレッスンを参照してください。
https://dotinstall.com/lessons/basic_pcsetup_mac_v2/50404
https://dotinstall.com/lessons/basic_pcsetup_win_v2/50504
https://dotinstall.com/lessons/basic_vscode/50208