「HTMLで簡単なWebページを作れる様になったけど、ボタンをクリックしても何も反応しない・・・」
HTMLについて勉強したばかりの場合はこんな悩みをもつの人も多いのではないでしょうか。（私も最近勉強したばかりです笑。）
ということで今回はWebページ上のボタンをクリックした際の処理方法を紹介します。
マウスクリック時の処理はどうやるの？
マウスクリックの処理に限らず、HTMLファイルを動的に処理して表示するにはJavaScriptを使うのが一般的です。
今回はその中から初心者でも扱いやすくて汎用性の高いjQueryを使った処理を扱います。
jQueryではJavaScriptで書かれた下記コードの1行目と3行目の間に処理を書くことでHTMLの内容を処理することができます。
$(function () {
//処理コード
});jQueryとは（読み飛ばし可）
jQueryについて簡単に説明しておきます。jQueryとはJavaScriptで使用するライブラリです。
jQueryを使うことで、今回紹介するようなボタンクリック時の処理やフォント変更などの処理をJavaScriptで簡単に記述することができます。
jQueryはHTMLファイルの<script>タグでインポートするだけなので、面倒なインストール等も必要なく誰でも簡単に使用することができます。
そのためWeb系全般の処理を行うJavaScriptの中で最も使われているライブラリと言えます。
jQueryでマウスクリック時の処理をしよう
はじめにjQueryを使ってマウス操作をする際の流れについてまとめました。
- 処理内容を記述するためのJavaScriptファイルを作成する
- HTMLでjQueryと作成したJavaScriptファイルを<script>タグで読み込む
- JavaScriptファイルにマウスクリック時の処理を記述する
これだけではやり方が掴めないと思うので、サンプルコードを使いながら実際の流れを解説します。
解説１：sample.html（jQuery呼び出し前）
以下のような「sample.html」というHTMLファイルを使って解説していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<h1>ボタン操作について学ぼう</h1>
<p>下のボタンを押せば、この文章は赤色に変わります。</p>
<button id="send_button">赤色に変更</button>
</body>
</html>上記コードと同じHTMLファイルをご自身のパソコン内で作成しましょう。実際にブラウザでファイルを開くと以下のような画面が表示されます。
このページを初めて開いたユーザからすれば、「赤色に変更」ボタンをクリックすればその上の文字が赤色になると思うはずです。しかし、上記のコードではボタンを押しても当然反応はありません。
そこでボタンをクリックしたら<p>タグで囲まれた文字列を赤色に変化させる処理を、jQueryを使って追加していきましょう。
解説２：sample.html（jQuery呼び出し）
まず先ほどの「sample.html」があるフォルダと同じ場所に「control_button.js」というJavaScriptのファイルを作成してください。
作成したら「sample.html」を以下のコードに書き換えましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./control_button.js"></script>
</head>
<body>
<h1>ボタン操作について学ぼう</h1>
<p>下のボタンを押せば、この文章は赤色に変わります。</p>
<button id="control_button">赤色に変更</button>
</body>
</html>ほとんど同じに見えますが、変更した点は9行目と10行目に加筆した部分です。
- 9行目ではjQueryを使うためのライブラリをサーバーから読み込んでいます。
- 10行目では「赤色に変更」ボタンを操作するためのファイル「control_button.js」を読み込んでいます。（後述）
今回のサンプルに限らず、jQueryライブラリや外部のJavaScriptファイルを読み込む際は<head>タグ内で読み込むことに注意してください。
解説３：control_button.js（クリック時の処理）
先ほど作成した「control_button.js」に以下のコードをコピペして保存してください。
$(function () {
$("#control_button").on("click", function () {
$("p").css("color", "red");
});
});「control_button.js」は以下のような内容になっています。
- 2行目では「sample.html」のid=”control_button”がクリックされた場合に処理する関数を定義しています。
- 3行目では「sample.html」ファイルの<p>タグで囲まれた文字列の色をすべて赤色に変更しています。
実際に「sample.html」をブラウザ上で開いて動かしてみましょう。ボタンを押すと<p>タグで囲まれた「下の送信ボタンを押せば赤色に変わります。」という文字が赤色に変わりました。
サンプルコードでは<p>タグの色を変更するという簡単な処理でしたが、3行目の内容を変更・加筆すればボタンクリック時の操作を自由に設定することができます。
まとめ
今回はjQueryでボタンクリック時の処理方法について解説しました。
この記事で不明な点や気になるところがあれば下のコメント欄までお願いします。それではまた！
コメント