このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 DOMについて理解しよう (02:19) 無料公開中- 概要
- ブラウザの仕組み
- 学習のコツ
- DOM操作の構造
-
#02 イベントリスナーを追加してみよう (02:31) 無料公開中- 学習環境の確認
- document.querySelector()
- addEventListener()
- ソースコード比較機能の紹介
-
#03 textContentを使ってみよう (03:01) 無料公開中- 処理順の確認
- textContentによる値の設定
- textContentによる値の取得
-
#04 classListでスタイルを操作してみよう (02:54) 無料公開中- CSSスタイルの定義
- classList.add()
- classList.remove()
-
#05 classListでスタイルを切り替えよう (02:59) 無料公開中- classList.contains()
- trueとfalse
- classList.toggle()
-
- querySelectorAll()
- インデックスによるアクセス
- forEach()による処理
-
#07 より複雑なセレクターを使ってみよう (02:56)- クラスセレクターの利用
- idセレクターの利用
- getElementById()
- getElementsByTagName()
- getElementsByClassName()
-
#08 createElement()で要素を生成しよう (01:56)- document.createElement()
- textContentの設定
- constで宣言できる理由
-
- DOMの構造
- appendChild()
- insertBefore()
-
#10 要素の追加､削除をしてみよう (02:38)- appendChild()
- insertBefore()
- remove()
- confirm
-
#11 フォーム部品の値にアクセスしてみよう (02:50)- 入力部品の設置
- valueによる値の取得
- textareaの扱い
- valueによる値の設定
-
#12 ドロップダウンリストの値にアクセスしよう (02:04)- ドロップダウンリストの設置
- select要素の取得
- valueによる値の取得
-
#13 ラジオボタンの値にアクセスしよう (02:59)- ラジオボタンの設置
- querySelectorAll()による要素の取得
- forEach()
- checkedによるチェック
-
#14 チェックボックスの値にアクセスしよう (02:45)- チェックボックスの設置
- checkedによるチェック
- 配列の導入
-
#15 inputイベントを使ってみよう (02:59)- 入力部品の設置
- inputイベント
- 定数の代入
- lengthによる文字数の取得
- changeイベントの紹介
-
#16 focus､blurイベントを使ってみよう (02:37)- フォーカスの説明
- focusイベント
- blurイベント
- focus()
-
#17 keydownイベントを使ってみよう (02:10)- イベントリスナーの追加
- アロー関数式の引数
- e.key
-
#18 mousemoveイベントを使ってみよう (01:35)- mousemoveイベント
- e.clientX、e.clientY
-
#19 submitイベントを使ってみよう (02:36)- formタグの設置
- submitイベント
- e.preventDefault()
- formタグを使うメリット
-
#20 属性の操作方法を確認しよう (02:47)- 属性の操作方法
- class属性の注意点
- disabled/checked/selected属性の注意点
-
#21 style属性を操作してみよう (02:36)- style属性の操作
- style.fontSize
-
#22 次のステップを確認しよう (01:50)- これまでの振り返り
- JavaScriptの学習方針
