🟡

【Java script】基礎編：オブジェクト/メソッド/イベント/パラメータ/引数/イベントハンドラーとは

2024/05/31に公開

JavaScript

Rails

object

tech

Java scriptとは

動的なWebページを作成する事のできるプログラミング言語

java scriptの基本構文

【基本構文】

基本構文（１）

// window（オブジェクト）のalert(メソッド)を用いて
// `Hello world`（パラメータ）を画面（ウィンドウ）に出す。
<script>
  window.alert('Hello World');
</script>

基本構文（２）

// button（オブジェクト）のaddEventListener(メソッド)を用いて'click'(イベント）が実行されたら
// console（オブジェクト）のlog(メソッド)を用いて'clicked!'（パラメータ）を画面に出す。
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('clicked!');
});

基本構文（３）

// add（メソッド）に(a,b)（パラメータ）を定義し、（3,5）（引数）を渡した結果を
// console（オブジェクト）のlog（メソッド）で画面（コンソール）に表示。
function add(a, b) {
    return a + b;
}
const sum = add(3, 5); 
console.log(sum);

基本構文（４）

// button（オブジェクト）がクリックされたら、handleClick()(イベントハンドラー)が実行される。
<button onclick="handleClick()">Click me</button>

<script></script>はscriptタグといい、囲んだ中身はjava scriptの記述を表す。
Windowやdocumentやbuttonの部分をオブジェクトという。
.alertや.addEventListenerの部分をメソッドという。
'click'の部分をイベント（イベントリスナー）という。
'Hello World'や(a,b)の部分をパラメータという。
（3, 5）の部分を引数という。
handleClick()の部分をイベントハンドラーという。（イベントをHTMLに埋め込んでいる）

オブジェクトとは

【オブジェクト（Object）】

・クラスとかインスタンスとかの「モノ」をまとめてふんわりと表現したもの。
・java scriptはオブジェクトと呼ばれる指示の対象へ動きの指示を出せる。
・ウィンドウ、ツールバー、ボタンや関数やクラス等もオブジェクトとされる。

基本構文（１）では、Windowオブジェクトを指定している。

<script>
  window.alert('Hello World');
　　↑これがオブジェクト
</script>

オブジェクトの種類

主に以下4つのオブジェクトに対して、指示を出すことで動的なページを作成できる。

項目	内容	例
ブラウザオブジェクト	ブラウザ環境に特有のオブジェクトで、ウェブページやブラウザそのものを操作するためのもの	window/Navigatorなど
言語定義オブジェクト	java scriptで定義した関数、変数、定数など	Function/let/constなど
標準定義オブジェクト	JavaScriptの標準ライブラリとして提供されるオブジェクト	JSON/Promise/Errorなど
カスタムオブジェクト	開発者が独自に定義するオブジェクト	class ~など

参考

https://www.tohoho-web.com/js/

数値(Number)、文字列(String)、真偽値(Boolean)、配列(Array)、マップ(Map)、セット(Set)、数学関数(Math)、日付(Date)、関数(Function)、オブジェクト(Object)、クラス(Class)、正規表現(RegExp)、JSON、コンソール(console)、プロミス(Promise)、イテレータ・ジェネレータ、Windows

メソッドとイベントとは

【メソッド（Method）】

・オブジェクトがプロパティとして持っている関数のこと。
・元になるオブジェクトとメソッドのプロパティ名を「. (ドット)」で連結すると呼び出す（実行）ことが可能。
・オブジェクトごとに使用できるメソッドが異なる。

例1：windowsオブジェクトに対してalertメソッド呼び出している。

window.alert('Hello World');
　　　　　↑これがメソッド

例2：personオブジェクトにメソッドを定義し、greetメソッドを呼び出している。

const person = {
  name: "Alice",
  greet: function() {
　　↑これがメソッド
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.greet();
　　　　　↑これがメソッド

例3　基本構文（２）

const button = document.getElementById('myButton');
　　　　　　　　　　　　　　　↑これがメソッド
button.addEventListener('click', function() {
　　　　　↑これがメソッド
  console.log('Button was clicked!');
});

メソッドの種類

【イベント（Event）】

・特定のアクションや状況の発生のこと。
・ユーザーのアクションやブラウザの動作に応答して特定の関数（イベントハンドラー）が呼び出される（実行）される。
・ユーザーの操作（クリック、キー押下、マウス移動など）やブラウザの状態の変化（ページの読み込み、ウィンドウのリサイズなど）など、さまざまなケースで発生する。
・イベントはブラウザによって自動的に発生する。
・例えば、click、submit、mouseoverなどがよく知られたイベントの種類である。

例1：（ボタン）オブジェクトがクリックされたときにイベントを呼び出している。

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
　　　　　　　　　　　　　　　↑これがイベント
  console.log('Button was clicked!');
});

例2：（フォーム）オブジェクトの送信ボタンがクリニックされたときに、イベントを呼び出している。

document.getElementById('myForm').addEventListener('submit', function(event) {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑これがイベント
    event.preventDefault();
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    alert(`Form submitted with Name: ${name} and Email: ${email}`);
});

thisキーワード

メソッド内でthisを使用すると、そのメソッドが所属するオブジェクト(例ではperson)
を参照できるようになる。

thisキーワードなし

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};
console.log(person.fullName()); // John Doe

thisキーワードあり（ES6の省略記法）

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};
console.log(person.fullName()); // John Doe

イベントの種類

パラメータ・引数とは

【パラメータ（Parameter）とは】

・関数やメソッドを定義するときに指定する変数のこと。これは関数のシグネチャ（定義）部分に記述される。

パラメータ

function add(a, b) {
　　　　　　　　↑ここがパラメータ（複数）
    return a + b;
}

const sum = add(3, 5); // 8
console.log(sum);

【引数（Argument）とは】

・関数やメソッドを呼び出すときに渡す実際の値のこと。これは関数の呼び出し部分に記述されます。

パラメータ

function add(a, b) {
    return a + b;
}

const sum = add(3, 5); // 8
                 ↑ここが引数（複数）
console.log(sum);

実践

index.htmlファイルまたはRailsではindex.html.erbファイル内にコピペすると以下の画面が出現する。

app/views/javascript/show.html.erb

<h1>Java script学習</h1>

<script>
  window.alert('Hello World');
</script>

応用（イベントリスナー関数とイベントオブジェクトについて）

【イベントリスナー関数とは】

・特定のイベントが発生したときに実行される関数。
・通常addEventListenerメソッドを使用して、特定の要素に対してイベントリスナー関数を設定する。
・この関数は、イベントが発生すると自動的に呼び出される。
・イベントに関連する追加の情報を与えることができる。（クリックした後に〇〇の処理をさせたいときなどに用いる）

イベントリスナー関数

// button_post（オブジェクト）という要素を取得し、それがclick（イベント）された際に
// event関数（イベントリスナー関数）を呼び出す。
  const button_post = document.getElementById('button_post');
  button_post.addEventListener('click', function(event) {
　　　　　　　　　　　　　　　　　　　　　　　　↑イベントリスナー関数
    event.preventDefault();

【イベントオブジェクトとは】

・イベントが発生したときにブラウザによって自動的に生成されるオブジェクトのこと。
・イベントに関する情報（例：イベントが発生した要素、マウスの位置、キーボードのキーなど）が含まれている。
・オブジェクトなので、追加でイベントやプロパティを渡すことができる。

イベントオブジェクト

// button_post（オブジェクト）という要素を取得し、それがclick（イベント）された際に
// event関数（イベントリスナー関数）を呼び出す。
// event.preventDefault();(イベントオブジェクト）でイベントのデフォルトの動作（この場合、フォームの送信など）をキャンセルする。
  const button_post = document.getElementById('button_post');
  button_post.addEventListener('click', function(event) {
    event.preventDefault();
　　　↑イベントオブジェクト