連載
» 2010年02月17日 00時00分 公開

初心者のためのJavaScript入門(3):変数とfunctionで、はてなボックス出現! (1/3)

JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず!?(編集部)

[小島尚基,有限会社インテレクトキューブ]

 第2回「イベントで『右クリック禁止』を禁止してみよう」では、JavaScriptのイベントについて解説しました。自分で色々と試して、イベントについて広く理解を深めてもらえたら良いなと思います。

 さて、早速ですが前回の課題の答えから見ていきましょう。

 課題は、「<img>タグを使ってマウスが重なると画像が変わり、マウス画像から離れると元の画像に戻るJavaScript」でした。

 答えは以下のとおりです。

<img src="1.gif" onmouseover="src='2.gif'" onmouseout="src='1.gif'">

 onmouseover="src='2.gif'"は、マウスが画像に重なったときに、画像を1.gifから2.gifへ入れ替えます。onmouseout="src='1.gif'"で、マウスが画像から外れたときに、画像を1.gifに戻します。たったこれだけのJavaScriptで、動的なWebサイトができちゃいます。

 例えば、この<img>タグを<a>タグで囲めば、簡単に動くリンクボタンができます。

<a href="//www.atmarkit.co.jp/">
<img src="1.gif" onmouseover="src='2.gif'" onmouseout="src='1.gif'" border="0"></a>

 「border="0"」は、Internet Explorerで<a>タグを使った時のリンクの枠を消すためです。もちろんCSSを使って枠を消してもかまいません。

 今回は、変数とfunctionを使って、少し高度なJavaScriptについて学んでいきましょう。

変な数と書いて変数?

 変数って何でしょう。JavaScript以外のプログラム言語でも使われる言葉ですが、日常生活ではあまり聞いたことがないと思います。

 でも、難しく考える必要はありません。使い始めると、「これがないとプログラムが書けないよー」ってぐらい便利なものです。

 ここに空のマッチ箱がいくつかあると仮定します。適当なマッチ箱を選んで、3本のマッチ棒を入れます。マッチ箱の見た目はどれも一緒なので、このマッチ箱には見分けが付くように「a」という名前を付けておきます。

サンプル1

 別のマッチ箱を選んで、5本のマッチ棒を入れます。これも見分けが付くように「b」という名前を付けておきます。

サンプル1

 aとbの中に入っているマッチ棒は合わせて何本でしょう。答えは8本ですね。この名前が付いたマッチ箱が変数のイメージです。もしも、aに10本、bに8本のマッチ棒が入っていれば、合計は18本になります。

 このように、中に入っているマッチ棒の数が変わったとしても、「a+b」と書いておけば、aとbの中に入っているマッチ棒の合計を表せます。

サンプル1

 さっそく、これをJavaScriptで書いてみましょう。テキストエディタを起動して、次のサンプルをコピー&ペーストして、「javascript3.html」と名前を付けて保存してください。

<html>
  <body>
    <script type="text/javascript">
      var a=10;
      var b=8;
      document.write(a+b);
    </script>
  </body>
</html>
javascript3.html
サンプル1

Internet Explorerでは、PC上のJavaScriptを動かそうとするとセキュリティ警告が出ます。情報バーをクリックして、「ブロックされているコンテンツを許可」を選ぶとJavaScriptが実行されます。


サンプルを理解してみよう

 Webブラウザにaとbの合計の18という数が表示できたでしょうか。先ほどのサンプルをもう少し詳しく見てみましょう。

3行目:<script type="text/javascript">

 「ここからJavaScriptのプログラムが始まるよ」ということをWebブラウザに知らせています。

4行目:var a=10;

 varは変数(マッチ箱)に名前を付けるときに使います。

 ここでは、aという名前を変数(マッチ箱)に付けて、10本のマッチ棒を入れていると思ってください。マッチ棒というのは説明上のイメージなので、10という数字がイメージできればマッチ棒でなくてもかまいません。直接、10という数字を入れていると考えられればベストです(数が増えたときに1000本のマッチ棒とかイメージしづらくなりますよね)。

5行目:var b=8;

 4行目と同じく、変数(マッチ箱)にbという名前を付けて8本のマッチ棒を入れています。マッチ箱とかマッチ棒とかイメージしなくても、「bという変数に8という数字を入れている」と考えられるようになると完璧です。

6行目:document.write(a+b);

 第1回から読んでいる方にはおなじみのdocument.writeです。

 おさらいをすると、

document.write(★);

と書くことで、Webブラウザは★の部分に書かれた内容を表示します(document.writeの使い方を忘れてしまった人は第1回を復習してください)。

 サンプルには「a+b」という内容が書かれているので、Webブラウザは変数aと変数bの合計を表示します。

7行目:</script>

 「ここでJavaScriptのプログラムは終了」ということをWebブラウザに知らせています。

       1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。