JavaScriptとは
簡単に言えば、webサイトに動きを与えるための言語。
Rubyなどのサーバーサイドで動くのではなく、ブラウザ側で動くのがJavaScript。
JSに期待する動きは、
- あるボタンをクリックしたらポップアップを出す
- マウスポインターがある文字の上に乗ったらその文字を赤くする など
ユーザー側が何かしらのアクションを起こしたら、
それをトリガーとして何かのアクションを起こすといったものです。
この何かをしたら何かが起きる処理の事を
「イベントトリブン」または、イベント駆動と言ったりします。
仕組み
それで、どうやってJavaScriptでWebサイトに動きを与えるかというと、以下2つ。
- DOMを操作する
- イベントをセットする
DOMとは
Document Object Modelの略
端的にいうとJSからHTMLの要素にアクセスするための仕組み
DOMという仕組みのおかげで、JSからHTML内の要素にアクセスできます。
具体的には「見出しのテキストを変える」や「リンクのテキストを変える」など。
DOMを操作して画面をちょこちょこ変えるのがJSの役割です。
DOMを操作する
HTMLに識別子を設定
DOMを操作するには、JSを書く前にHTMLにidやclassなどの識別子を追加し
コンピュータに認識させる必要があります。
JSで扱えるようにするために、HTMLにタグ付けしておく感じですね。
例えば、以下のようなHTMLがあった場合
<button>削除ボタン</button>
<button>更新ボタン</button>
id=””と識別子をつけてあげることで、識別できるようにします。
<button id="button-delete">削除ボタン</button>
<button id="button-update">更新ボタン</button>こうすることで、このHTMLを操作することが可能となります。
DOMを取得
ここからJSを記述していきます。
使用するメソッドは、document.getElementById("id名")
事前にHTMLで記載したidを引数として使用し、
idを付けられた個所を取得します。
// 削除ボタンのDOMを取得 定数：buttonDeleteに代入
const buttonDelete = document.getElementById("button-delete")
// 更新ボタンのDOMを取得 定数：buttonUpdateに代入
const buttonUpdate = document.getElementById("button-update")
//※ const は定数を宣言するためのものこれで、”何を”操作するかを指定することができました。
イベントをセットする
次は ”何かをしたら何かが起きる” に当たる部分です。
最初に説明した「イベントトリブン」というやつです。
使用するメソッドは、 addEventListener
DOMに対してaddEventListenerを設定することでイベントを仕掛けることができます。
// 削除ボタンにクリックイベントを仕掛ける
buttonDelete.addEventListener('click', () => {
alert("削除！") // クリックされた時に動く処理
})
// 更新ボタンにクリックイベントを仕掛ける
buttonUpdate.addEventListener('click', () => {
alert("更新！") // クリックされた時に動く処理
})第一引数にはイベントの種類（クリック時なのかホバー時なのかetc）を指定します。
実際のコード
まとめるとこんな感じ
See the Pen DOM取得 by kunikichi (@kunikichi) on CodePen.
・JSのタブでコードの切り替え。 ・Resultのタブでコード側を広げてみることができます。 ・削除ボタン、更新ボタンを押すと、実際の挙動を確認できます。
ちなみに一番外側のdocument.addEventListener('DOMContentLoaded', () => {})も一種のイベント設定処理です。
document.addEventListener('DOMContentLoaded', () => {
console.log("DOMContentLoaded")
});「ブラウザがDOMの解析をし終わったら」のようなイメージのイベントです。
この記述がないとDOMの解析が終わる前に、削除ボタンのDOMを取得をしようとしたりしてうまく動かないことがあります。
まとめると
- イベントをセットする
- DOMを操作する
極論この二つを知っておけば大体のことができます。JS簡単ですね！！
具体例
その1 テキストエリアの内容をアラートで出す
何をしたら → ボタンをクリックしたら
何が起きる → テキストエリアの入力値を取得し、アラートとして出す
See the Pen JS① バリュー取得 by kunikichi (@kunikichi) on CodePen.
・HTML JS Resultタブで表示を切り替えることができます。
その2 簡単な電卓
何をしたら → 加算ボタンをクリックしたら
何が起きる → インプットフィールドの入力値を取得
現在の値を取得
現在の値に入力値を加算
結果に表示
See the Pen JS② カウンター by kunikichi (@kunikichi) on CodePen.
コメント