JavaScript レッスン一覧

基本から応用まで、ステップごとに学べます。

Intro

第1章　JavaScriptの紹介と準備

開発環境の準備と、JavaScriptの基本的な役割を理解します。

Write

第2章　JavaScriptを書いてみよう

コンソール出力とスクリプトの実行方法を学びます。

Var

第3章　変数

let / const の使い方やスコープの概念を理解します。

Type

第4章　データ型と演算子

文字列・数値・真偽値などの型と、基本的な演算を習得します。

Array

第5章　配列

配列の作り方、要素操作、繰り返し処理などを練習します。

If

第6章　条件分岐

if / else / switch 文を使って、条件ごとの処理を制御します。

Loop

第7章　繰り返し処理

for / while などのループ処理を活用して、効率的にコードを書く。

Func

第8章　関数

関数定義、引数、戻り値、アロー関数などを理解します。

Obj

第9章　オブジェクト

オブジェクトの構造やプロパティ・メソッドの使い方を学びます。

Std

第10章　標準組み込みオブジェクト

Math, Date, String などの標準オブジェクトを活用します。

Web

第11章　HTML & CSS

JavaScriptと連携して、Webページを動的に操作する基礎を学びます。

BOM

第12章　ブラウザオブジェクト

windowやdocumentなど、ブラウザ特有のオブジェクトを理解します。

DOM

第13章　DOM

要素の取得・変更・追加など、DOMの基本操作を学びます。

Event

第14章　イベント

クリック・入力・スクロールなど、ユーザー操作を扱う方法を学びます。

1. スライド解説

イベント処理の説明

０１０ーグエンフン

JavaScriptの「イベント」とは何ですか？

  • ボタンをクリックする
  • フォームに文字を入力する
  • 画像の上にマウスを乗せる
  • ページをスクロールする

イベント処理の「現在の標準的」な書き方はどれですか？

この方法が一番おすすめです。

// button要素を取得
const btn = document.getElementById('myButton');

// 関数を準備
function sayHello() {
    alert('こんにちは');
}

// 登録
btn.addEventListener('click', sayHello);

なぜ古いonclickではなく addEventListener を使うのですか？ (1)

onclick の場合

  • 1つの処理しか登録できません。
  • 後から書くと「上書き」されます。
button.onclick = functionA;
button.onclick = functionB; 
// functionA は消える

なぜ古いonclickではなく addEventListener を使うのですか？ (2)

addEventListener の場合

  • 処理を「追加」できます。
  • いくつでも登録できます。
button.addEventListener('click', functionA);
button.addEventListener('click', functionB); 
// A も B も実行される

関数の中で使われるevent(または e)という引数は何ですか？

ブラウザが自動的にこの event オブジェクトを関数に渡してくれます。

  • e.target: イベントが「実際に」発生した要素。
  • e.key: （キーイベントの場合）押されたキーの名前。
input.addEventListener('keydown', function(e) {
// 押されたキーの名前を表示
console.log(e.key);
});

もしページに「100個のボタン」があったら、addEventListener を100回も書かないといけませんか？

問題: パフォーマンスが悪い。メモリをたくさん使う。

const items = document.querySelectorAll('li'); // 100個
items.forEach(function(item) {
    item.addEventListener('click', function(e) {
    console.log('クリックされました');
    });
});
1 / 7

2. 解説 (ポイントまとめ)

★ イベントとは
ウェブページ上で起こる「出来事」のことです。ユーザーの操作（クリックなど）がきっかけになります。
★ 引数 event (e) について
イベントが発生した瞬間の「詳細情報」が入ったオブジェクトです。
★ 効率的な処理
ボタンが100個あっても、親要素に1つだけ addEventListener を設定すれば全て管理できます（イベント委譲）。

3. 学習プリント & 解答

問題1. JavaScriptの「イベント」とは何ですか？
答え: ウェブページでの「出来事」です。例えば、クリックやキー入力などです。
問題2. イベント処理の「現在の標準的」な書き方はどれですか？
答え: element.addEventListener('イベント名', 関数) を使います。
問題3. なぜ古い onclick ではなく addEventListener を使うのですか？
答え: 1つのイベント（例：クリック）に、複数の処理を「追加」できるからです。
問題4. 関数の中で使われる event (または e) という引数は何ですか？
答え: イベントが発生した瞬間の「詳細情報」が入ったオブジェクトです。
問題5. もしページに「100個のボタン」があったら、addEventListener を100回も書かないといけませんか？
答え: その必要はありません。100個のボタンの「親（おや）要素」1つにだけ addEventListener を設定すればOKです。