電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

JavaScriptの基礎②「DOM」「ID取得」「イベント処理」「アロー関数」

calendar

reload

JavaScriptの基礎②「DOM」「ID取得」「イベント処理」「アロー関数」

前回、JavaScriptの基本的な文法についてまとめました。今回はJavaScriptの重要な要素である「イベント処理」についてまとめたいと思います。

たった数種類の記述にはなりますが、それでも多くの事が可能になる非常に便利なプログラムです。

※なお、ライブラリは使いません。ネイティブなJavaScriptで記述します。

スポンサーリンク

初めに

「DOM」という仕組みについて

オブジェクト(プロパティの集まり、変数や数値、関数など)を通じてHTMLにアクセスする仕組みを「DOM」(Document Object Model)と呼びます。

つまり、DOMを操作する=JavaScriptでHTMLを操作する、という事になります。

そして、documentオブジェクトのプロパティには、HTMLを操作するためのメソッド(処理)が多く用意されています。

まず、よく使用するメソッドについて記しておきます。

JavaScriptの主要メソッド

IDを持ったHTML要素を取得するメソッド

HTMLの特定の要素を変更したい場合、その部分をオブジェクトとして取得する必要があります。

その主な例として、下記のような「getElementById」メソッドがあります。

カッコ内は、HTMLの「ID」になります。つまり、このメソッドでHTMLの「box」IDが紐づけされている要素の情報を取得しています。

イベント処理を発生させるメソッド

イベント処理とは、例えばHTML上のボタンをクリックした場合やマウスオーバーした場合など、指定の条件がHTML上で発生した場合に発生する動作の事です。

主な例として、「addEventListener」メソッドがあります。

変更をかけたい対象の要素を指定後、「addEventListener」のメソッドを記述します。()内のclickは、イベントタイプになります。

実行したい内容は基本的に「関数」で表します。

上記では「アロー関数」とよばれる記述で、=>で表されていますが、その後の{}内にある処理が関数として実行されます。

これは、(“click”, function() { });

でも表せますが、最近ではアロー関数がよく使われてるみたいです。

スタイル変更のメソッド

イベント発生時に実行させたい内容として、CSS(スタイルシート)の変更があります。

記述としては、単に直接記述した内容の通りスタイルに変更をかけたり、または指定した「class」に変更をかけたりする事ができます。

上の段の記述では、変更したい要素の背景を、赤に直接変更しています。

下段では、cssのclassを”ab”に変更しています。

このように、イベントの発生でスタイルの変更を自由に変更する事ができます。

イベント処理の記述

class変更の場合

以上を踏まえて、HTMLにクリックイベントが発生した場合に、そのID要素のcssのclassを変更する記述をまとめてみます。

これは、boxID要素を指定(左上)、クリックした場合(右上)、boxID要素(左下)のclassをabに変更(右下)というイベント処理になります。

少し長ったらしく見えるので、これは「定数」や「変数」にいれてやるとスリムになります。

上記にように、ID取得のメソッド「document.getElementById(“box”);」を定数boxに代入することが可能です。

このように、ID取得のメソッドは定数に入れるのが基本となっているようです。

次回は、これらを使って、実際にWEBサイトのメニューバーを作成していこうと思います。