JS--イベントリスナーの登録

イベントリスナーの登録

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【イベントリスナー】
イベントリスナー（Event Listener）は、プログラミングにおいて特定のイベントが発生したときに、そのイベントに応じて何らかの処理を行うための仕組みです。
簡単に言えば、イベントリスナーは「何かが起きたら教えてね」というプログラムの部品です。

【イベントハンドラと、イベントリスナーの関係】

• イベントリスナー: 「ボタンがクリックされたら何かをする」と設定しておく。
  

  target.addEventListener(type（イベントの種類）, callback （イベントハンドラにコールバックを選択）[])

• イベントハンドラ: ボタンがクリックされたときに、実際に「何かをする」ためのコード。
  

  ＜input type="button" value="button" onclick（プロパティ）="alert('Hello')"（イベントハンドラ）＞

  
  要するに、イベントリスナーは「イベントを待ち受ける」役割、イベントハンドラは「イベントが起こったときに実行されるコード」です。

【イベントリスナーを登録するには】
EventTarget オブジェクトの addEventListener メソッドは指定のイベントが発生したときに実行されるイベントリスナーを登録します。

書式；target.addEventListener(type, callback [, options])

1 番目の引数にはイベントの種類を表す文字列を指定します。
2 番目の引数にはイベントハンドラとしてコールバック関数を指定します。
3 番目の省略可能なオプションについては別のページで解説します。
例文
イベントハンドラを、コールバック関数にした場合

イベントハンドラを無名関数にした場合

イベントハンドラをアロー関数式にした場合

サンプルコード

ブラウザを立ち上げた後、ボタンをクリックする

【同じターゲットの同じイベントに対して複数のイベントリスナーを登録する】
HTML の属性値や DOM で取得した要素のプロパティに対してイベントハンドラを登録した場合、属性値やプロパティは一つの値しか保管できませんので同じイベントに対するイベントハンドラは一つしか登録することができません。

これに関して、addEventListener メソッドを使ってイベントリスナーを登録する場合には、同じターゲットの同じイベントに対して複数のイベントリスナーを登録することができます。

サンプルコード

ブラウザを立ち上げて、ボタンをクリックする

【イベントリスナーを解除する】
解除には、EventTarget オブジェクトの removeEventListener メソッドは指定のイベントが発生したときに実行されるイベントリスナーを登録します。

書式：target.removeEventListener(type, callback [, options])

例文

一度イベントリスナーが呼び出されると、その関数内でイベントリスナーが解除されます。

■無名関数を使用している場合のremoveEventListenerメソッドの注意点
イベントリスナーとして無名関数を設定している場合、 removeEventListener メソッドを使ってイベントリスナーを削除するには少し工夫が必要となります。

removeEventListener メソッドの 2 番目の引数にイベントリスナーの関数名を指定する必要がありますが無名関数の場合は名前がありません。
そこで現在実行している関数を参照することができる arguments.callee を代わりに指定します。

ただし
arguments.callee は現在非推奨となっており strict モードでは使用できません。 removeEventListener メソッドを使用する場合は、無名関数ではなく関数を別途定義してイベントリスナーとして登録されることをおすすめします

サンプル

ブラウザを立ち上げ、

ボタンを押す。何回押しても、変わらないよ
【コールバック関数が呼び出される時にイベントの情報を受け取る】
イベントリスナーとしてコールバック関数を登録した場合、イベントが発生してコールバック関数が呼ばれるときに発生したイベントに関する情報が格納された Event オブジェクトが引数として渡されてきます。イベントに関する情報を関数内で利用する場合は、コールバック関数で引数を記述してください。

引数として受け取った Event オブジェクトにはイベントの種類によっても含まれる情報が異なりますが、マウスがクリックされた位置や押されたキーボードの種類などの情報が含まれています
サンプル
え

ブライザを立ち上げ、ボタンをクリックする

ポンプアップが表示される。

JS--要素のプロパティにイベントハンドラを登録する

要素のプロパティにイベントハンドラを登録する

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

■ DOM を使って取得した要素のプロパティに対してイベントハンドラを登録する方法について解説する。
基本的な使い方は HTML 要素の属性に対していイベントハンドラを登録する方法と似ていますが、 JavaScript のコードのみで実現することが出来る。

【要素オブジェクトのプロパティにイベントハンドラを登録す】
HTML 要素の属性としてイベントハンドラを設定する場合には、要素の属性値に直接イベントハンドラを記述していました。
＜input type="button" value="button" onclick="イベントハンドラ"＞

DOM を使用すると
HTML ページの中の任意の要素を要素オブジェクトとして取得できます。そのあとで、要素オブジェクト（button）のプロパティ(onclick)に対してイベントハンドラを設定します。

HTML コードで記述された input タグには JavaScript のコードが含まれなくなり、イベントの処理は JavaScript のコードの中で完結することができました。

要素オブジェクトにはイベントの種類だけプロパティがあらかじめ用意されており、それぞれのプロパティ名は on + イベント名 となります。例えば click イベントに対しては onclick プロパティ、 mousedown イベントに対しては onmousedown プロパティに対してイベントハンドラを設定します。

サンプルーーHTML要素の属性としてイベントハンドラを設定した場合

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
    ＜meta charset="UTF-8"＞
    ＜meta name="viewport" content="width=device-width, initial-cale=1.0"＞
    ＜title＞イベントハンドラのサンプル＜/title＞
＜/head＞
＜body＞
    ＜button onclick="alert('ボタンがクリックされました!')"＞クリックしてね　　　　　　　　＜/button＞
＜/body＞
＜/html＞

サンプル--DOMを使ってイベントハンドラを設定する場合

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
    ＜meta charset="UTF-8"＞
    ＜meta name="viewport" content="width=device-width, initial-scale=1.0"＞
    ＜title＞プロパティを用いたイベントハンドラのサンプル＜/title＞
＜/head＞

    ＜button id="myButton"＞クリックしてね＜/button＞

    ＜script＞
        // ボタン要素を取得
        const button = document.getElementById('myButton');

        // 無名関数のイベントハンドラをプロパティに設定　　
        button.onclick = function() {
            alert('ボタンがクリックされました!');
        };
    ＜/script＞
＜/body＞
＜/html＞

どちらも、同じ結果になる

【イベントハンドラにコールバック関数を設定する】
HTML 要素の属性としてイベントハンドラを設定した場合は、
実行する JavaScript のコードを記述しましたが、プロパティにイベントハンドラを設定する場合は、イベントが発生した時に呼び出されるコールバック関数を設定します。

サンプル

ブラウザを立ち上げる

「button」をクリックすると、ポンプアップが立ち上がり、時間が表示される。

【イベントハンドラを無名関数やアロー関数を使って記述する】
イベントハンドラとして登録するコールバック関数は、無名関数を使って記述することもできます。

ブラウザを立ち上げ、交互にボタンを押す

無名関数をクリック

アロー関数をクリック

【イベントハンドラを解除する】
それぞれの要素オブジェクトにはイベントの種類の数だけプロパティが用意されており、イベントハンドラが登録されていない場合は null が格納されています。

イベントハンドラが登録されたプロパティに対してイベントハンドラを解除するには、プロパティに対して null を代入してください。

・書式：button.onclick = null;

サンプル

ブラウザを立ち上げる

ボタンをクリックしても、イベントハンドラは起動しない

【コールバック関数が呼び出される時にイベントの情報を受け取る】
イベントハンドラとしてコールバック関数を登録した場合(無名関数やアロー関数式でも同じです)、イベントが発生してコールバック関数が呼ばれるときに発生したイベントに関する情報が格納された Event オブジェクトが引数として渡されてきます。
イベントに関する情報を関数内で利用する場合は、コールバック関数で引数を記述してください。

サンプル

ブラウザを立ち上げる

クリックすると、表示される。
発生したイベントの種類とイベントが発生した要素の情報をコンソールに出力します。

 

 

JS--イベントハンドラの登録

イベントハンドラの登録

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【HTML要素の属性としてイベントハンドラを登録する】
HTML要素の属性を使ってイベントハンドラを登録する方法です。
例えば
input 要素でマウスでクリックしたときに実行するイベントハンドラを登録するには次のように記述します。

・方法
＜nput type="button" value="button" onclick="イベントハンドラ"＞

onclick 属性に対する値としてイベントハンドラを記述します。イベントハンドラの個所には実行する JavaScript のコードや関数を記述します。

イベントハンドラとして JavaScript のコードを直接記述するには次のように記述します。実行する文が一つの場合は末尾のセミコロンは省略できます。

＜input type="button" value="button" onclick="console.log('Hello')"＞
複数の場合は
＜input type="button" value="button" onclick="let d = new Date();console.log(d.toString())"＞

属性名はイベントの種類毎に異なります。
例えば、click イベントに対するイベントハンドラの登録には onclick属性、 mousedown イベントに対するイベントハンドラを登録するにはonmousedown 属性、のように on + イベント名 になる。

サンプル

ブラウザを立ち上げる

ボタンをクリック


【イベントハンドラで関数を呼びだす】
イベントハンドラには JavaScript のコードを直接記述するほかに、別途定義した関数をイベントハンドラとして呼び出すこともできます。

＜input type="button" value="button" onclick="buttonClick()"＞

＜script＞
    function butotnClick(){
        console.log('Hello');//Hello
    }
＜/script＞

イベントハンドラとして別途定義した buttonClick 関数を呼びだしています。サンプル

ブラウザを立ち上げる

ボタンをクリックする


【イベントの種類の一覧】
HTML 要素の属性としてイベントハンドラを登録する場合は、処理を記述したいイベントの種類に対応した属性に対してイベントハンドラを記述する必要があります。イベントの種類は別サイトを参照すること

 

 

 

JS--クラスの継承

クラスの継承

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【class構文とは】
class構文はコンストラクタやメソッドを簡単に定義できるものです。15年のES2015(ES6)からjavaScriptに導入されるようになった。

【class構文の書き方】
1.クラス宣言する
書式
class　クラス名　{

     //コンストラクタや、メソッドを定義する

}
2、class式を用いる方法
→class式での特徴としてクラスを再宣言（再定義）することができる。

var myClass = class {

  //コンストラクタやメソッドを定義する

}

【コンストラクタを作る】
コンストラクタ、つまりクラスの初期化をconstructorメソッドで行う

class User {
　　//インスタンスのプロパティ設定と初期化
    constructor( name, age ) {
        this.name = name;
        this.age = age;
    }

}

//インスタンスを生成する
var taro = new User('太郎', 32);

この例では、「name」「age」というプロパティをコンストラクタで定義しています。

このように記述することで、インスタンスを生成する際に引数として文字列や数値を受け取れるわけです。class構文ではこのようにしてプロパティを定義します

【メソッドを定義する】
今度はメソッドをclass構文内に定義する

class User {
 
    constructor( name, age) {
        this.name = name;
        this.age = age;
    }
 　//メソッド関数
    getName() {
        return this.name;
    }
}

//インスタンスを生成する
var taro = new User('太郎', 32);

console.log(taro.getName());//太郎が表示される

【class構文の活用】
1.ゲッター・セッターの使い方

class User {

    constructor( name, age ) {
        this.name = name;
        this.age = age;
    }

    //セッターメソッド　　//→プロパティに任意の値を設定するためのメソッド
    set myName( value ) {
        this.name = value;
    }

    // ゲッターメソッド　　//→クラスの特定のプロパティを取得すためのメソッド　　  get myName() {
        return this.name;
    }
}

var taro = new User('太郎', 32);//初期化
console.log( taro.myName );//太郎

taro.myName = '花子';//値を代入

console.log( taro.myName );//花子

【静的メソッド（static）を作る】
静的メソッドの特徴は、インスタンスを生成しなくても利用できるという点。
サンプル

class User {
    ・
    ・
    ・
   //staticを付与することでspeak()という静的メソッドを定義
    static speak() {
        return 'みなさん、こんにちは';
  }

}//このメソッドはインスタンス不要で実行することができるのconsole.log( User.speak() );//みなさん、こんにちは

【privateなプロパティについて】
コンストラクタ内で定義したプロパティは「パブリック」なのでどこからでもアクセスできてしまうという点には注意が必要です。

・例文
class User1 {

constructor(value) {

this.name = value;

}

get myName() { return this.name; }

}

var taro = new User1('太郎');

//直接プロパティを指定
console.log(taro.name);

//ゲッターを利用
console.log(taro.myName);

上の2つの方法で、名前の値を取得できる。そこで、Symbolによる固有のIDを使ったプロパティを使うと、直接プロパティを呼び出せなく成る。

//即時関数
var User2 = (function() {
　const name = Symbol('name');

class User2 {
　constructor(value) {
　this[name] = value;

　}
　get myName() {
　　return this[name];

　　}
　} return User2;
})();

var sato = new User2('佐藤');

//直接プロパティを指定
console.log(sato[name]);//undefined

//ゲッターを利用 console.log(sato.myName);//佐藤

基本的なクラスの構造は同じですが、Symbolを使ってプロパティを作成し、また、即時関数でクラスごと囲むことで外部からのプロパティへのアクセスを遮断してます。

【クラスの継承】
「extends」を使った継承

サンプル
単純に「name」「age」というプロパティをコンストラクタで定義したシンプルなクラス

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

このUserクラスを継承して新しいクラスを作成する

class Man extends User {　　//無名関数
    speak() {
        console.log(this.name + 'さん、こんにちは');
    }
}

extendsを使って「User」クラスを継承しているのがわかりますね。また、「Man」クラスにコンストラクタを記述してない

var taro = new Man( '太郎', 34 );

taro.speak();//太郎さん、こんんちは、と表示される

 

JS--オブジェクト指向のclassを理解する

オブジェクト指向のclassを理解する

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【classとは】
JavaScriptのclassは、オブジェクト指向プログラミング（OOP）の概念を実現するための構文です。クラスは、同じプロパティやメソッドを持つオブジェクトの設計図となるものです。

classキーワードを使用してクラスを宣言し、そのクラス内でプロパティやメソッドを定義します。クラス内で定義されたメソッドは、そのクラスから作成されたオブジェクト（インスタンス）で使用することができます。

基本構造
class MyClass {
　constructor() {
　// コンストラクタ: インスタンスを作成する際に実行されるメソッド
　// インスタンス固有の初期化処理を行う
}
method1() {
// メソッド1の定義
}
method2() {
// メソッド2の定義
}
}
以上がMyClassというクラスを定義した。

【クラスを使う場面】
例えば、商品情報を持った複数のオブジェクトを作りたいとします。
クラスを使わずに、オブジェクトを用意するとした場合に用いられる。

サンプル
const product1 = {
　　name: '商品A',
　　price: 300,

display(){
　　console.log(`商品名:${this.name} 値段:${this.price}円`);
　}
}
const product2 = {
　name: '商品B',
　price: 400,

　display(){
　console.log(`商品名:${this.name} 値段:${this.price}円`);
　}
}
const product3 = {
　name: '商品C',
　price: 1000,

display(){
console.log(`商品名:${this.name} 値段:${this.price}円`);
　}
}
この商品の例をクラスを使って実装すると、以下のようになります。
class Product{
    constructor(name,price){
        //thisの設定、プロパティの初期化
        this.name = name;
        this.price = price;
    }

    //各インスタンスが参照するメソッドを定義
    display(){
        console.log(`商品名:${this.name} 値段:${this.price}円`);
    }
}

【new演算子】
クラスは関数ですが、一般的な関数とは異なり実行する際は、クラス名の前に「new」をつけます。

const product1 = new Product("商品A",300);

【クラスを使ったhtmlのサンプル】

「class.html」ファイルのコード

「script.js」

ブラウザを立ち上げる

値を入れてクリックする