熊本大学大学院教授システム学専攻
目次:
【第13回】JavaScript 3 (イベント検出、マルチメディア情報の応用、プログラミングTIPS)
第1章
第3章

JavaScriptを習得する3つのスタンス

【本節の目的】
ここでは、復習の意味も含めて、 もう一度、基盤的情報処理論で勉強するJavaScriptの位置づけをまとめます。

どの程度わかれば良いの?

第11回、第12回でJavaScriptの基本について学びましたが、ほとんどの皆さんはプログラマに成るわけではありませんので、 JavaScriptについて詳しく知る必要はありません。 皆さんの作りたいWebページに、JavaScriptの機能が必要であると思えば、 インターネット上に沢山ある JavaScriptを使ったサンプルプログラムが、 皆さんの作るページに利用できればそれで十分です。

ただ、そうは言っても、以下のことは知っておかないと、 利用できないでしょう。

  1. プログラミングの考え方とJavaScriptの基本的な文法
  2. イベントとイベントの取り扱い方の基本
  3. オブジェクトの考え方と取り扱い方の基本
ということで、 ここでもう一度概略を復習してみましょう。 以下の概略で思い出せない部分は、前回のテキストを復習して下さい。

1.プログラミングの考え方とJavaScriptの基本的な文法

「プログラミング(プログラムを作成すること)」とは、 我々がパソコンに行わせたい指示を、 パソコンの理解できる言葉で書いた「指示手順書(プログラム)」 を作成する作業ということになります。

JavaScript(言語)は、 Netscape NavigaterやInternet ExplorerなどのWebブラウザが 理解できる言語です。ですから、JavaScriptとHTMLを組み合わせることで、 気のきいたWebページを作ることができるようになります。

JavaScriptの文法での基本項目を、以下に示します。

  • 代入 : 変数と呼ばれる入れ物に、値を入れるという基本動作
    age('こんにちは');
  • メソッド(処理)の呼び出し:システムのもっている処理もしくは自分で定義した処理を、呼び出し実行する。 (サンプルサンプルのソース
    alert('こんにちは');
  • 条件分岐:条件により、流れを変える(サンプルサンプルのソース
    if(age >= 44){ alert('お体をお大事に!'); }else{ alert('若いって良いですね!'); }
  • 繰り返し : 同様な処理の繰り返し (サンプルサンプルのソース
    for(i=1; i<=7; i=i+1){ document.write('<font size="',i,'">こんにちは!</font><br>'); }
  • メソッド(処理、関数)定義 : 自分で実行したい処理の定義 (サンプルサンプルのソース
    function yamabiko(){ for(i=1; i<=7; i=i+1){ document.write('<font size="',i,'">こんにちは!</font><br>'); } }

2.イベントとイベントの取り扱い方の基本

「イベント」とは、 パソコンを操作した(マウス操作やキーボード入力など) ことによって生じる状態変化のことです。 あるいは、操作によって生じる信号だと言っても良いでしょう。

例えば、マウスの左ボタンをクリックすると、 マウスのケーブル(しっぽ)から、 パソコンに「マウスの左ボタンがクリックされたよ!」 という信号が届きます。 新たに信号が届いたわけですから、パソコンとしては、 「マウスからの信号無し」の状態から 「マウスから'左ボタンがクリックされたよ!'信号が届いた」 状態に変化したわけですよね。 この状態変化を、 「マウスの左ボタンがクリックされた」という 「イベント」が発生した、と呼びます。

ただ、「イベント」が発生しただけで、 パソコンが何も処理をしなければ、 「イベント」を発生させた意味がありません。 例えば、以下のような例を考えてみて下さい。 Webブラウザ上のリンクをマウスでクリックすると、 「マウスの左ボタンをクリックした」 という「イベント」が発生します。 つまり、パソコンには、「マウスの左ボタンをクリックした」 という信号が、マウスのケーブルから届いています。 それにもかかわらず、パソコンが何も処理しなければ(無視してしまえば)、 リンク先にジャンプすることはありません。 これでは、折角クリックしても何の意味もありませんよね。

そのため、発生する「イベント」を常に監視していて、 「(A)というイベント」が発生したら 「(ア)という処理を実行する」というような指示を行なう 「イベント管理役」が必要となります。 この管理役のことを「イベントハンドラ」 と呼びます。

パソコン内では、さまざまな「イベント」に対応した 「イベントハンドラ」が常に動作しており、 それらすべてに対応できるようになっています。 例えば、マウスを動かすと、 いつでも画面上でマウスポインターが動くのも、 「イベントハンドラ」のおかげです。 マウスの動作に対応する「イベントハンドラ」が、 マウスがどちらにどれだけ動いたという「イベント」を検知して、 「そのイベントに対応した分だけ画面上のマウスポインターを動かせ」 という処理の依頼をパソコンにしているから、 画面上でマウスポインタが動くわけです。

JavaScriptでは、この「イベントハンドラ」を利用することができます。 これを利用することで、 皆さんの作ったページを見てくれた人の操作により、 ページの様子を変化させることができるようになります。 そのページ上で、例えば、 「マウスをクリックした」とか、「ある場所にマウスポインターが来た」 とかいう「イベント」 に対応した必要な処理を依頼することができるようになります。

おそらくJavaScriptを利用する最大の目的は、 この「イベント」による処理ができる (「イベントハンドラ」を利用できる)ことだと思います。

重要ですから、 「イベント」処理については、次の章で、復習することにします。

3.オブジェクトの考え方と取り扱い方の基本

3つ目の「オブジェクト(思考言語)」ですが、これは、抽象的な考え方のことです。 わかりにくいですが、以下に考え方の一例を示します。JavaScriptは実はオブジェクト(思考言語)に基づいているので、知っておく必要があります。

HTMLは、「タグ」を用いて、文字や画像をブラウザ上に、 どのように配置するかを指示します。更に、 「タグ」は属性(各種機能)をもっていて、その値(属性値)を変えることで、 細かな指示を行なうことができます。例えば、<body> タグは、 HTMLの本文であることを示すタグですが、 bgcolorという属性(背景色を変える機能)をもっていて、

<body bgcolor="red"> 
のように、 その値に適当な「色コード」を指定することで、 背景色を変えることができます。

このことを、以下のように考えることもできます。
ブラウザという'もの(オブジェクト)'が、 属性(この場合は「性質」と言った方がわかりやすいでしょうか) をもっていて、その属性の値を指定することで、 表示内容を変える、という考え方です。例えば、

document.bgColor="red";
が、その一例です。ブラウザ画面を表す'document' という'もの(オブジェクト)'には、 'bgColor'という属性があります。 その値を'red'(赤)に指定することで、 オブジェクトであるブラウザ画面の属性(性質) の一つである背景色が、赤色に変わるということになります。
実は、JavaScriptでは、このように、オブジェクトの属性として、 色々なものを定義したり、 オブジェクト自身あるいはオブジェクトの属性に対して、 処理を依頼するという考え方を行ないます。

少しくだけた言い方で比較してみると、

  • HTMLでは、背景色を変えるという「指令(タグ)」が主人公であり、
  • オブジェクト中心の考え方では、「オブジェクト(ブラウザ)」が主人公である

ということなります。別の言い方をすると、

  • はじめに「指令(タグ)」の集まりである社会があり、 その中で新しい活動(Webページ作成)をしよう、というのがHTMLで、
  • はじめに「オブジェクト(ブラウザ)」があり、その性質を変えたり、 親オブジェクト(ブラウザ)に新しい子供のオブジェクト(文字や画像) を追加したり、その性質を変えたりして、 Webページを作成するというオブジェクトを中心とする考え方を行なうJavaScript

ということになるでしょうか。

このように、 ブラウザに情報を表示することを中心に考えるHTMLと、 オブジェクトを中心にとらえるJavaScriptとでは、 考え方が異なりますので、 上の例のように指示の仕方が変わるわけです。

【参考リンク】
JavaScriptのオブジェクトについて
http://www1.parkcity.ne.jp/chaichan/src/javasc07.htm(リンク切れ)

Copyright (C) Kenichi Sugitani, Hideki Matsuda, Chisato Noguchi and Fumiko Ryu 2003-2006, All Rights Reserved