Javascript - 入門編 -
私達はJavascriptを学ぶ方のためにハンズオン形式でレッスンを準備しました。
質問がありましたら、下記のTwitterかFacebookから当アカウントまでメッセージを送ってください！
それでは、順番にレッスンを学習していきましょう！
さあ、はじめよう!
興味のあるLessonへ！
lesson 1
Javascriptの世界にようこそ!
ブラウザ
- テキストエディター - JavaScriptとNode.js - CUI（Character User Interface）とNode.js
lesson 2
ブラウザ
JavaScriptの実行環境
- webサイトのconsole - Node.jsとコマンドプロンプト - script tag
lesson 3
実行環境
変数とステートメント
- 変数の公式 - 命名規則 - 変数宣言（const, let, var）
lesson 4
変数
PrettierとESLint
- ESLint Demoをさわってみよう！ - ESLintとPrettierを併用する理由 - VSCodeにESLint, Prettierをインストールする
lesson 5
Prettier
データ型・オブジェクト型
データ型とは？ - String型（文字列） - Number型（数値） - nullとUndefined - Booleans - Object型（オブジェクト型）
lesson 6
型
関数
- 関数とは？ - 関数の書き方 - 関数の引数とは？ - 無名関数 - Javascriptの巻き上げ - アロー関数
lesson 7
関数
デバッグツール
- Devtoolsのメリット - Devtoolsの機能 - スタックトレースの使用方法 - 要素の取得 - コマンドラインAPI - ブレークポイント
lesson 8
ディベロッパーツール
スコープ
- スコープの種類 - グローバル変数 - Windowオブジェクト - 関数スコープ - ブロックスコープ - 静的スコープ（レキシカルスコープ）
lesson 9
スコープ
巻き上げ（Hoisting）
- 関数の巻き上げ - 変数の巻き上げ
lesson 10
巻き上げ
クロージャ（Closures）
- クロージャのメリット - プライベート変数
lesson 11
クロージャ
DOMについて
- ブラウザの仕組みについて - windowオブジェクトを操作する
lesson 12
DOM 1
要素の取得
- querySelector() - querySelectorAll() - Document.getElementById()
lesson 13
DOM 2
要素のプロパティとメソッド
- Node.textContent - HTMLElement.innerText - innerHTMLプロパティ - insertAdjacentText()メソッド
lesson 14
DOM 3
DOMのクラス属性操作
- classListについて - classList.add - classList.contains - classList.keys - classList.remove - element.className
lesson 15
DOM 4
カスタムデータ属性
- ゲッター・セッター - setAttribute - getAttribute - カスタムデータ属性 - Element.dataset
lesson 16
DOM 5
HTMLの生成
- Document.createElement() - Node.appendChild() - Reflow - insertAdjacentElement() - Node.cloneNode()
lesson 17
DOM 6
文字列によるHTMLの生成とクロスサイトスクリプティング
- createRange().createContextualFragment(HTML) - クロスサイトスクリプティング（XSS）
lesson 18
DOM 7
DOMに関する練習問題
- div要素を作る - cardクラスを持つ新しいdivタグを作る - delete関数を作る
lesson 19
DOM 8
イベントリスナー
- addEventListenerの書き方 - 第２引数の関数に（）がいらない理由 - 関数を事前に定義しておくことのメリット - 複数要素にaddEventListenerを行う
lesson 20
イベントリスナー
