[JS] Hello World

タグ :

jQuery の勉強をまとめるシリーズです。
今回はもっとも簡単な処理である「アラートを表示」についてまとめます。

処理の概要

処理としては非常に簡単で、初歩の初歩です。
ボタンをクリックしたら「Hello World.」という文字列を表示するアラートを出すだけです。
HTML にてボタンを用意するだけで準備は完了です。

HTML へ記述するコードは以下です。

<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<h4>「Hello World」のアラート表示</h4>
<button type="button" id="btn">あいさつ</button>
</body>
</html>

4行目にて、jQuery のライブラリを読み込んでいます。
ここはダウンロードしたものを使用しても良いですが、今回はサイトから直接読み込みを行っています。

5行目で、JavaScript のコードを記述したファイルを読み込みます。
ファイルの中身は後述します。

9行目で、ボタンを設置しています。
これをクリックするとアラートが出るようにします。

JavaScriptのコード

まずは通常の JavaScript で記述してみます。
ファイル名は「sample.js」です。

window.onload = function() {
	var btn = document.getElementById("btn");
	btn.onclick = function() {
		alert("Hello World.");
	}
}

とまあ、こんな感じになります。
最初の「window.onload」が無いとエラーになります。
ボタンを配置する前に動作してしまうためです。

jQueryのコード

ここからが本番なんですが、上のコードを jQuery のコードで記述してみると以下のようになります。
ファイルは上と同じ「sample.js」を書き換えます。

$(document).ready(function() {
	$("#btn").click(function () {
		alert("Hello World.");
	});
});

1行目は、JavaScript では「window.onload = function() {…}」と同じような使い方で、Web ページがブラウザにロードされたときに動作するようになります。
ですが、ready イベントは、Web ページに配置されているイメージ等がロードされる前に動作します。
尚、この ready イベントは、省略が可能で、「$(function() {…});」とすることができます。

2行目の「$(“#btn”)」の括弧内は、CSS の記述と同じです。
button 要素の id (btn) を指定して検索しています。
id を指定する場合は、CSS と同様に「#」を先頭に付加して記述します。
また、click() にて指定したボタンのクリックで実行するようにします。

3行目は、JavaScript と同じです。

以下がサンプルになります。
ボタンクリックでアラートが表示されるはずです。

まとめ

jQuery を使うメリットとしては、変数(btn)を使わなくてよくなること、onload イベントが不要なこと、記述が少しだけ楽になることです。
このくらいの簡単な処理ならば複雑では無いですが、後の複雑な処理のことを考えると心配です。
今のうちに慣れておくというか、しっかりと理解しておく必要がありそうです。

JavaScript を習得している人にとっては、今回のような簡単な処理にわざわざ jQuery を使う必要は無いと思いますが、別の処理で jQuery のライブラリを読み込んであるなら、ついでに使っておこうという考えで良いと思います。
今まで JavaScript の記述に苦しんで来た人にとっては、ライブラリが使えること自体がメリットです。
便利なものがあるなら使っておくことに間違いは無し、という感覚で覚えていきたいと思います。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed