JavaScriptの基本を習得しよう②

関数、配列、繰り返し処理、DOM操作、イベント処理の基本を学び、数取器や文字数カウンターの制作にチャンレンジしよう！

プレミアム

合計時間：03:17:43

レクチャー一覧

• JavaScriptの基本を習得しよう ②
• 1. イントロダクション-JavaScriptの基本を習得しよう ②

  00:59 無料プレビュー
  JavaScript の基本学習の続きを学習します。
  • 「関数」について
  • 「配列」について
  • 「繰り返し処理」について

• 2. 関数とは何か理解しよう

  02:14
  関数について学習します。
  • 関数とは
  • 関数を使うメリット
  • 関数の区分について

• 3. function命令を使おう

  05:31
  function命令（関数宣言）について学習します。
  • function命令（関数宣言）の基本の関数の書き方
  • function命令（関数宣言）のコード説明について
  • 複数単語を繋ぐ関数名について

• 4. 関数リテラルを使おう

  01:57
  関数リテラルについて学習します。
  • 関数リテラルの構文について
  • 関数リテラルの構文についての補足
  • 関数を呼び出して、その戻り値を console に出力する方法

• 5. Functionコンストラクターを使おう

  03:02
  Function() コンストラクターについて学習します。
  • Function() コンストラクターの構文について
  • Function() コンストラクターの構文についての説明
  • Function() コンストラクターの関数の呼び出し方

• 6. アロー関数を使おう

  02:28
  アロー関数について学習します。
  • アロー関数の構文について
  • アロー関数についての説明
  • アロー関数に関する復習

• 7. 演習問題：関数

  02:19
  関数の使い方が理解できているか。についての演習です。
  • 演習：関数の使い方が理解できているか。
  • 回答例：関数の使い方が理解できているか。

• 8. コールバック関数

  06:26
  コールバック関数について学習します。
  • コールバック関数とは
  • コールバック関数を使用したプログラムの書き方
  • コールバック関数を使用したプログラムの書き方の補足

• 9. 配列について理解しよう

  05:07
  配列について学習します。
  • 配列とは
  • 配列についての注意点
  • 配列の基本的な使い方について

• 10. 配列を操作しよう

  07:36
  配列の操作について学習します。
  • 基本的な配列の操作（追加、更新、削除）について
  • 配列に関する補足

• 11. オブジェクトを使おう

  09:21
  オブジェクトについて学習します。
  • オブジェクトとは
  • オブジェクトについての補足
  • オブジェクトを使用したプログラムの書き方について

• 12. オブジェクトメソッドを使おう

  03:51
  オブジェクトメソッドについて学習します。
  • オブジェクトメソッドを使用したプログラムの書き方について
  • オブジェクトメソッドについての補足

• 13. 繰り返し処理forを使おう

  07:07
  繰り返し処理 for について学習します。
  • 繰り返し処理 for とは
  • 繰り返し処理 for の構文について
  • 繰り返し処理 for の構文の書き方について

• 14. ループの入れ子を使おう

  05:25
  ループの入れ子を使ったプログラムについて学習します。
  • ループの入れ子を使ったプログラムの書き方について
  • ループの入れ子を使ったプログラムの主な用途について
  • ループの入れ子を使ったプログラムの配列について

• 15. 繰り返し処理whileを使おう

  05:16
  繰り返し処理 while 文について学習します。
  • 繰り返し処理 while 文の構文について
  • 繰り返し処理 while 文の構文の解説
  • 繰り返し処理 while 文の構文についての注意点

• 16. 繰り返し処理do whileを使おう

  02:49
  繰り返し処理 do while 文について学習します。
  • 繰り返し処理 do while 文について
  • 繰り返し処理 do while 文の構文について
  • while 文と do while 文の違いについて

• 17. 繰り返し処理forEachを使おう

  02:58
  繰り返し処理 forEach について学習します。
  • 繰り返し処理 forEach について
  • 繰り返し処理 forEach の構文について
  • 繰り返し処理 forEach の解説

• 18. 繰り返し処理for...ofを使おう

  02:14
  繰り返し処理 for…of について学習します。
  • 繰り返し処理 for…of について
  • 繰り返し処理 for…of の構文について
  • iterable オブジェクトとは

• 19. 演習：配列、ループ

  03:05
  配列と繰り返し処理を使ったプログラムについての演習です。
  • 演習：配列と繰り返し処理を使ったプログラム
  • 配列と繰り返し処理を使ったプログラムについての補足
  • 回答例：配列と繰り返し処理を使ったプログラム

• DOM操作: ウェブサイトを動的に書き換えよう
• 20. イントロダクション-DOM操作: ウェブサイトを動的に書き換えよう

  01:15
  ウェブページを動的に書き換える技術について学習します。
  • Webサイトを動的に書き換えるには
  • Document Object Model (DOM) について

• 21. DOMとは何か知ろう

  03:25
  Document Object Model (DOM)について学習します。
  • Document Object Model (DOM) とは
  • DOMツリーとは
  • ノードとは

• 22. 要素ノードを取得しよう

  06:03
  要素ノードの取得について学習します。
  • 指定した要素ノードの取得について
  • 取得した要素ノードのテキスト取得について
  • 要素ノードの取得に関するまとめ

• 23. テキストの置換をしよう

  03:26
  テキストの置換について学習します。
  • テキストの置換について
  • Google Chrome デベロッパーツールを利用しての動作確認について
  • テキストの置換に関するまとめ

• 24. 属性値を取得しよう

  06:16
  属性値の取得について学習します。
  • テキスト入力欄の input 要素のノードの取得について
  • getAttribute メソッドについて
  • 属性値の取得に関するまとめ

• 25. 属性の追加、更新、削除をしよう

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

• 26. タグ名で要素を取得しよう

  04:25
  タグ名で要素を取得について学習します。
  • getElementsByTagName メソッドについての注意点
  • 各要素のテキストだけを抜き出して表示するには
  • タグ名で要素を取得に関するまとめ

• 27. name属性で要素を取得しよう

  03:38
  name 属性で要素を取得について学習します。
  • name 属性で要素を取得するには
  • getElementsByName メソッドについての注意点
  • name 属性で要素を取得に関するまとめ

• 28. クラス名で要素を取得しよう

  03:23
  クラス名で要素を取得について学習します。
  • class 名で要素を取得するには
  • getElementsByClassName メソッドについての注意点
  • クラス名で要素を取得に関するまとめ

• 29. セレクタで要素を取得しよう

  04:38
  セレクタで要素を取得について学習します。
  • querySelector メソッドについて
  • テキストだけ取得して表示する方法
  • セレクタで要素を取得に関するまとめ

• 30. 要素の追加と削除をしよう

  11:03
  要素の追加、削除について学習します。
  • 要素の追加について
  • 要素の削除について
  • 要素の追加、削除に関するまとめ

• 31. Windowオブジェクトを使おう

  06:12
  Window オブジェクトについて学習します。
  • Window オブジェクトとは
  • Window オブジェクトに関するまとめ

• イベント処理を理解しよう
• 32. イントロダクション-イベント処理を理解しよう

  02:24
  イベント処理について学習します。
  • イベント処理とは
  • 用語：イベントとは
  • イベント処理の関係性について
    
    

• 33. イベントハンドラを登録しよう

  07:43
  イベントハンドラの登録について学習します。
  • イベントハンドラの登録についての構文
  • イベントハンドラの登録についての補足
  • アロー関数式に関する補足

• 34. イベントハンドラの削除

  04:55
  イベントハンドラの削除について学習します。
  • イベントハンドラの削除についての構文
  • 要素オブジェクト ドット removeEventListener について
  • イベントハンドラの削除に関するまとめ

• 35. changeイベントを利用してイベントハンドラを実行しよう

  06:21
  change イベントを利用してイベントハンドラを実行しようについて学習します。
  • change イベントとは
  • change イベントに関するまとめ

• 36. DOMContentLoadedイベントとonloadイベントを使おう

  09:30
  DOMContetLoad イベントと load イベントについて学習します。
  • DOMContentLoaded イベントとは
  • load イベントとは
  • DOMContentLoaded イベント と load イベントの違い

• 37. 演習：数取器（カウンター）を作ろう

  08:12
  数取器（カウンター）をつくろうについての演習です。
  • 数取器（カウンター）をつくろうの演習
  • 数取器（カウンター）をつくろうの回答例

• 実践：文字数カウンターを開発しよう
• 38. イントロダクション-実践：文字数カウンターを開発しよう

  01:34
  文字数カウンターの制作について学習します。
  • 文字数カウンターの完成品の動作について
  • 文字数カウンターの制作についての補足

• 39. HTML側を実装しよう

  01:37
  HTML 側の実装について学習します。
  • HTML 側に必要な要素を記述

• 40. 入力文字数をコンソールに表示しよう

  03:09
  入力文字数をコンソールに表示について学習します。
  • keyup発生時のイベントハンドラの登録について
  • 入力された文字列を取り出すには
  • 入力された文字列の長さを取得するには

• 41. 文字数の表示部分を実装しよう

  03:17
  文字数の表示部分の実装について学習します。
  • 入力可能残り文字数の表示部分の実装について
  • 文字数の表示部分の実装の動作確認について

• 42. 細かい部分の仕上げをしよう

  05:16
  細かい部分の仕上げについて学習します。
  • 改行を無視する処理について
  • 文字数超過の場合に、文字色を赤に設定する方法について