はじめてのJavaScriptプログラミング入門

JacaScript の基本について学習します。

• JavaScript とは何かについて

• 変数と定数について

• 演算子について

はじめての JavaScript プログラムの実行について学習します。

• JavaScript プログラミングを初める取っ掛かり

• プログラムの書き方について

• プログラムエラーについて

はじめての JavaScript プログラムの実行について学習します。

• Visual Studio Code の、拡張機能 Liver Server を使う方法

• コード変更について

• トラブルシュート

JavaScript のコードを、外部ファイルに記載する方法について学習します。

• JavaScript のコードの、外部ファイル化について

• main.js の上書きの方法について

• strict モードについて

JavaScript について学習します。

• JavaScript とは

• 関連の用語について

• 情報の調べ方について

プログラムのコメントアウトについて学習します。

• コメントアウトとは

• 単1行、複数行コメントアウトについて

• ショートカットについて

自力でエラーを取り除けるようになろうについて学習します。

• エラーの事例について

• エラーが発生している場合

• 注意点

リテラルについて学習します。

• リテラルとはなにか

• 具体例

• まとめ

エスケープシーケンスについて学習します。

• エスケープシーケンスとはなにか

• シングルクォートとダブルクォートの違いについて

• 補足

変数と定数を使い分けようについて学習します。

• 変数とはなにか

• 定数とはなにか

• まとめ

データ型について学習します。

• データ型とは

• コードの書き方

• 注意点

基本的な演算子について学習します。

• 演算子とは何か

• 基本的な演算子について

• 補足

演算子の優先順位について学習します。

• 演算子の優先順位について

• バグを防ぐ方法について

• 補足

文字列結合とテンプレートリテラルについて学習します。

• 2つの方法で文字列結合ができる

• 演算子「+」について

• テンプレートリテラルについて

複合代入演算子について学習します。

• 複合代入演算子とは

• 複合代入演算子を使ったプログラムについて

• 事例

演算子についての演習です。

• 演算子の基本が理解できているか

• 演習問題

• 補足

インクリメントとデクリメントについて学習します。

• インクリメントについて

• デクリメントについて

• 演算の順序について

条件分岐を記述しよう if / else について学習します。

• 条件分岐とは

• 条件分岐 if / else を使ったプログラムについて

• まとめ

より複雑な条件分岐を記述しよう else if  について学習します。

• 構文 if / else if / else について

• 補足

• 例題のコードを書いて体験しよう

型変換について学習します。

• 型変換とは

• 実際のコードの書き方

• まとめ

boolean 型の使い方について学習します。

• boolean 型とは

• 補足

• 論理反転について

== と === の違いについて学習します。

• 比較演算子「==」と「 ===」の違いについて

• コードの書き方

• まとめ

条件分岐についての演習です。

• 演習問題

• 復習

• 確認

論理演算子の使い方について学習します。

• 論理演算子とは

• 論理演算子を使ったプログラムの書き方

• まとめ

条件分岐の入れ子について学習します。

• 条件分岐 if が入れ子となるプログラムの書き方

• 論理演算子を使ったプログラムの書き換えについて

• 復習

条件分岐 switch について学習します。

• 条件分岐 switch を使ったプログラムの書き方

• 構文：switch

• 注意

switch についての演習です。

• 演習問題

• 回答例

• まとめ

null と undefined について学習します。

• undefined について

• null について

• 復習

三項演算子の使い方について学習します。

• 三項演算子とは

• 三項演算子を使用したプログラムの書き方

• 補足

JavaScript の基本学習の続きを学習します。

• 「関数」について

• 「配列」について

• 「繰り返し処理」について

関数について学習します。

• 関数とは

• 関数を使うメリット

• 関数の区分について

function命令（関数宣言）について学習します。

• function命令（関数宣言）の基本の関数の書き方

• function命令（関数宣言）のコード説明について

• 複数単語を繋ぐ関数名について

関数リテラルについて学習します。

• 関数リテラルの構文について

• 関数リテラルの構文についての補足

• 関数を呼び出して、その戻り値を console に出力する方法

Function() コンストラクターについて学習します。

• Function() コンストラクターの構文について

• Function() コンストラクターの構文についての説明

• Function() コンストラクターの関数の呼び出し方

アロー関数について学習します。

• アロー関数の構文について

• アロー関数についての説明

• アロー関数に関する復習

関数の使い方が理解できているか。についての演習です。

• 演習：関数の使い方が理解できているか。

• 回答例：関数の使い方が理解できているか。

コールバック関数について学習します。

• コールバック関数とは

• コールバック関数を使用したプログラムの書き方

• コールバック関数を使用したプログラムの書き方の補足

配列について学習します。

• 配列とは

• 配列についての注意点

• 配列の基本的な使い方について

配列の操作について学習します。

• 基本的な配列の操作（追加、更新、削除）について

• 配列に関する補足

オブジェクトについて学習します。

• オブジェクトとは

• オブジェクトについての補足

• オブジェクトを使用したプログラムの書き方について

オブジェクトメソッドについて学習します。

• オブジェクトメソッドを使用したプログラムの書き方について

• オブジェクトメソッドについての補足

繰り返し処理 for について学習します。

• 繰り返し処理 for とは

• 繰り返し処理 for の構文について

• 繰り返し処理 for の構文の書き方について

ループの入れ子を使ったプログラムについて学習します。

• ループの入れ子を使ったプログラムの書き方について

• ループの入れ子を使ったプログラムの主な用途について

• ループの入れ子を使ったプログラムの配列について

繰り返し処理 while 文について学習します。

• 繰り返し処理 while 文の構文について

• 繰り返し処理 while 文の構文の解説

• 繰り返し処理 while 文の構文についての注意点

繰り返し処理 do while 文について学習します。

• 繰り返し処理 do while 文について

• 繰り返し処理 do while 文の構文について

• while 文と do while 文の違いについて

繰り返し処理 forEach について学習します。

• 繰り返し処理 forEach について

• 繰り返し処理 forEach の構文について

• 繰り返し処理 forEach の解説

繰り返し処理 for…of について学習します。

• 繰り返し処理 for…of について

• 繰り返し処理 for…of の構文について

• iterable オブジェクトとは

配列と繰り返し処理を使ったプログラムについての演習です。

• 演習：配列と繰り返し処理を使ったプログラム

• 配列と繰り返し処理を使ったプログラムについての補足

• 回答例：配列と繰り返し処理を使ったプログラム

ウェブページを動的に書き換える技術について学習します。

• Webサイトを動的に書き換えるには

• Document Object Model (DOM) について

Document Object Model (DOM)について学習します。

• Document Object Model (DOM) とは

• DOMツリーとは

• ノードとは

要素ノードの取得について学習します。

• 指定した要素ノードの取得について

• 取得した要素ノードのテキスト取得について

• 要素ノードの取得に関するまとめ

テキストの置換について学習します。

• テキストの置換について

• Google Chrome デベロッパーツールを利用しての動作確認について

• テキストの置換に関するまとめ

属性値の取得について学習します。

• テキスト入力欄の input 要素のノードの取得について

• getAttribute メソッドについて

• 属性値の取得に関するまとめ

属性の追加、更新、削除について学習します。

• 属性の追加について

• 属性の更新について

• 属性の削除について

タグ名で要素を取得について学習します。

• getElementsByTagName メソッドについての注意点

• 各要素のテキストだけを抜き出して表示するには

• タグ名で要素を取得に関するまとめ

name 属性で要素を取得について学習します。

• name 属性で要素を取得するには

• getElementsByName メソッドについての注意点

• name 属性で要素を取得に関するまとめ

クラス名で要素を取得について学習します。

• class 名で要素を取得するには

• getElementsByClassName メソッドについての注意点

• クラス名で要素を取得に関するまとめ

セレクタで要素を取得について学習します。

• querySelector メソッドについて

• テキストだけ取得して表示する方法

• セレクタで要素を取得に関するまとめ

要素の追加、削除について学習します。

• 要素の追加について

• 要素の削除について

• 要素の追加、削除に関するまとめ

Window オブジェクトについて学習します。

• Window オブジェクトとは

• Window オブジェクトに関するまとめ

イベント処理について学習します。

• イベント処理とは

• 用語：イベントとは

• イベント処理の関係性について

イベントハンドラの登録について学習します。

• イベントハンドラの登録についての構文

• イベントハンドラの登録についての補足

• アロー関数式に関する補足

イベントハンドラの削除について学習します。

• イベントハンドラの削除についての構文

• 要素オブジェクト ドット removeEventListener について

• イベントハンドラの削除に関するまとめ

change イベントを利用してイベントハンドラを実行しようについて学習します。

• change イベントとは

• change イベントに関するまとめ

DOMContetLoad イベントと load イベントについて学習します。

• DOMContentLoaded イベントとは

• load イベントとは

• DOMContentLoaded イベント と load イベントの違い

数取器（カウンター）をつくろうについての演習です。

• 数取器（カウンター）をつくろうの演習

• 数取器（カウンター）をつくろうの回答例

文字数カウンターの制作について学習します。

• 文字数カウンターの完成品の動作について

• 文字数カウンターの制作についての補足

HTML 側の実装について学習します。

• HTML 側に必要な要素を記述

入力文字数をコンソールに表示について学習します。

• keyup発生時のイベントハンドラの登録について

• 入力された文字列を取り出すには

• 入力された文字列の長さを取得するには

文字数の表示部分の実装について学習します。

• 入力可能残り文字数の表示部分の実装について

• 文字数の表示部分の実装の動作確認について

細かい部分の仕上げについて学習します。

• 改行を無視する処理について

• 文字数超過の場合に、文字色を赤に設定する方法について

JavaScriptの基本を元に、一段ステップアップしたアプリケーションの開発について学習します。

• フォトギャラリーの開発についての実装

• フォトギャラリーの開発についての補足

• フォトギャラリーの開発について、よくあるご質問の解答例

フォトギャラリーで使う画像データを使えるように設定する方法について学習します。

• 画像データの準備について

• 画像データの準備についての補足

必要となる HTML 要素の配置について学習します。

• HTML 要素の配置に関する補足

• main 要素を配置について

• div 要素について

必要となるHTML要素の配置について学習します。

• img 要素の生成について

• main_image の要素の取得について

• insertBefore() メソッドについて

サムネイル画像のページ表示について学習します。

• サムネイル画像をページに表示する方法について

• Elements タブの構造について

• サムネイル画像をのページ表示についてのコードの説明

CSS を使用したスタイルの設定について学習します。

• CSS を記述するファイルの作成について

• HTML 文書の読み込みについて

• body 要素について

クリックしたサムネイル画像をメイン画像に設定しようについて学習します。

• メイン画像の初期値の設定について

• 説明の初期値の設定について

• サムネイル画像をクリックしたときのイベントの設定について