「JavaScriptのすべてを語ろう」

第６回「JavaScript出たり入ったり1」

あ、さて第２回で「イベント駆動型」「オブジェクト指向」と書いた。これは実際はどういうことなのか？ たとえばボタンをクリックした、フォームに入力したなど、ホームページにはユーザに何かしらのアクションを起こさせる仕掛けがある（ま、見せるだけでなにもないページもあるけど）。そのアクションがきっかけとなって、スクリプトが動き出す。これが「イベント駆動型」プログラム。JSのスクリプト内で、まず書かなきゃいけないのがイベントをキャッチする部分。「イベントハンドラ」という。これを画像なら画像の、フォームボタンならフォームボタンのタグに忍ばせる。 <img src="image.gif" onClick="gonext()"> 最初の<img src〜の部分は通常のHTMLで画像を表示しますというタグ。次のonClickにご注目。これがイベントをキャッチするスクリプト。そう、HTMLタグの中にスクリプトが同居している。で、gonext()は第３回で話した、関数（function　この場合gonextという適当に今命名した名前の関数）を呼び出している。で、関数内に書かれたスクリプトが、動作するってワケ。 一応断っておくけど、ホームページが表示されるってのもれっきとしたイベントなので、ユーザがまだ何もしていないうちから、起動させる方法もある。 「イベントハンドラ」には何があるか？ さっき出てきたonClick、これはそのパーツがクリックされましたというイベントハンドラ。 そのほか代表的な物をあげてみよう。 OnMouseOver マウスがそのオブジェクトの上にきたことを伝える OnMouseOut マウスがオブジェクト上空からはずれた onChange フォームなどのオブジェクトに入力した後など、ほかのフォームへ入力が移ったとき といった具合。もちろんパーツによって、受け取れるイベントが違う場合もあるので、本などをみて確認。 さ、スクリプトが動き出した、と書こうとしたけど、ちょっと長くなりそうなので、続きは次回「JavaScript出たり入ったり2」。 このページのトップへ

第７回「JavaScript出たり入ったり2」

さ、でスクリプトが動き出した、と、その答えをどうするか？どこに戻すかが問題。 ふつうならユーザが何かしらのテキストを入力したくなるフォームにその答えを表示するもよし。まっさらな新しいページを表示して、そこに答えを表示させるか。またスクリプトによっては、画像を入れ替えるってのもスクリプトのリアクションだ。 そういったホームページ上の（ブラウザの、といった方が正確かな？）様々なパーツにリアクションを働きかけることができる。JSの仕事とは大ざっぱにいうとそんな感じ。で、スクリプトが操作できるパーツは一般的に「オブジェクト」と呼ばれているので、これが「オブジェクト指向」プログラムというもんなんですな。 んだばオブジェクトはどないなもんなんだ？ということだが、下を見てほしい。 PluginMimeType window ├ frame ┌ Layer ├ dcument─── ┼ Link ┌ Textarea ├ location ├ Anchor ├ Text └ history ├ Applet ├ Hidden ├ Image ├ Submit ├ Area ├ Checkbox ├ Plugin ├ FileUpload └ Form─── ┼ Password ├ Reset ├ Radio └ Select──── ─ Objecct navigator ├ └ 長くなったけど、見て分かるとおり、階層構造になっている。 なぜか？ ブラウザには上からタイトルバー、ボタン類、URL記入欄、ホームページ表示スペース、というような順で並んでおり、決まった位置にある。あったり前田のクラッカーじゃないか！！といわれそうだけど、たとえば、「戻る」ボタンがURL記入欄の中にあったりしないよね？フォーム記入欄はタイトルバーにはないよね？といった具合に決まった位置がある。上の図のwindowとは要はホームページ表示スペースのことだけど、画像（image）もフォーム（Form）も送信ボタン（Submit）もその中にあるって寸法だね。 このオブジェクトに対してどうするか？ちょ〜どお時間と〜な〜りました。べんべん。続きは次回に繰り越し「JavaScript出たり入ったり3」見てね。 このページのトップへ

第８回「JavaScript出たり入ったり3」

５〜６回で終わるつもりだったんだけどな〜。終わらね〜なあ〜。さ、いくよ。 オブジェクトをどう使うか？ オブジェクトには、属性（プロパティ）と動作（メソッド）というのがある。 いきなり新しい単語を出して申し訳ないけど、つまりプロパティやメソッドを操作することによってスクリプトの結果を表示しようというわけ。 たとえば第２回で document.write("これを表示"); （document=このウインドウ、write=書き込む） というのを書いたけど、documentというオブジェクトに対して、"これを表示"をwriteしなさい、としたんだね。このwriteがメソッド。動作を指定した。 form.ans.value = 5; さてこれは分かるかな？formがフォームオブジェクトだというのはたぶん察しがつくでしょう。 ansとは？これはそういう名前のフォームオブジェクトを指定しているだけ。僕が勝手に名前を付けた。なぜ名前が必要なのかは、フォームでアンケートなどに答えたことのある人なら分かると思うけど、いくつものテキストフィールドや、選択ボタンがセットになって一つのフォームとして機能する場合が多いので、フォームの場合はそれぞれに名前を付けていないと指示が出せないのだね。それでansという名前を付けた。 さてvalueは何か？そうこれがプロパティ。「中身」というプロパティなのですな。で、イコール５。これはイコールじゃないって言ったよね？そう代入。これで全部分かった。 つなげてみよう。 「フォームオブジェクト君や、ansってパーツがあるだろう？それのだな、中身をだな、５にしてくんね〜か」 というあなたの指示に従ってansフォーム君は「わかりやした親方!!」と５と表示と相成りましたとさ。 オブジェクトもいろんな種類があるので、ここには書ききれません。本を読んで納得してください。 そいじゃ復讐。じゃなかった復習。 ●イベントを捕まえてスクリプトを起動する。（たとえばクリック） ●実行スクリプトはそこにじかに書いてもいいけど、関数へ渡すこともできる。 ●スクリプトが実行される。（たとえば計算） ●計算結果はオブジェクトに指示を出して表示する。 以上ですべてのスクリプトが、終了する。 見えたでしょ？ここまでくりゃもう何でもできるのよ、ホントは。なかなかそうはいかないけどね〜。 次回「JavaScriptトホホの堂々めぐり」トホホ〜といくよん。 このページのトップへ

第９回「JavaScriptトホホの堂々めぐり」

この回が終われば、君はもうJavaScriptマスター!!とは言えないけど、基本のほぼすべてをマスターしたことになる。みんな読んでる？ちょっと寂しい気がするのは気のせい？ スクリプトやプログラムを書いていると、場合によって、たとえば数値が100以下と以上の時に、実行方法を変えたい場合が出てくる。関数などは使い回ししたいわけだから、特にそういう機会が多いはず。 そんなときは、条件分岐構文を使う。もしaだったらxを実行。bだったらyを実行、という具合。 IF文とFOR文がある。（ほかにもあるけど本を読んでね）これがつかえれば、怖い物なし。 ●IF文 　if(条件){ 〜条件に合致した場合の実行文〜 else 〜条件に合わなかった場合の実行文〜 } （条件）をたとえば(a<100)としよう。このIF文の前の処理で、aという変数に何らかの数値が代入されているはず。そこでIF文が始まった。 aに50が代入されていたなら、〜条件に合致した場合の実行文〜がはじまりその処理が終わればIF文の外へ（}より下へ）出ていく。そして次の実行文が処理されていく。〜条件に合わなかった場合の実行文〜は無視。 aが100ならもしくは100以上なら〜条件に合致した場合の実行文〜が無視され、〜条件に合わなかった場合の実行文〜へと進む。 ここまでは分かるよね？ ●FOR文 　for(カウント数の初期値 ; カウント数の条件 ; カウントのすすみ具合){ 〜実行文〜 } FOR文は繰り返しに使う。1に1を足す。それに1を足す。それに1を足す。以下50回繰り返し。回数文スクリプトを書いてもいいけど、面倒でしょ？ブラウザに表示する、HTML文書もでかくなる。よろしくない。 カウント数の初期値にはたいがいは1を入れるわな（a=1）。別に1じゃなくてもいいけんど。カウント数の条件にはたとえば50までとしておく（a<50）。カウントのすすみ具合は1ずつ足していけばよい（a++）。 これによって繰り返しができる。カウント数が49になって〜実行文〜が処理されて、FOR文の外へ出る。 これにてトホホの堂々めぐり終了。 なぜトホホの〜と書いたかって？この構文（特にFOR構文）の書き方をミスると、永遠に条件分岐が終わらないと言う泣ける状況に陥るからなのね。 どう？JavaScriptのサンプルがあるホームページなどを見てみるといい。これだけ分かれば、だいたいなにやってるか読めるはずだよ。 さて次は悩ましい問題に触れる。「JavaScriptトホホのブラウザ問題」。See you later. このページのトップへ

第１０回「JavaScriptトホホのブラウザ問題」

かなりJavaScriptが分かってきたあなたに、これからの課題。 ここまでの話は初歩の初歩なので、当然ながら「JavaScriptのすべてを語ろう」を読むだけでは何も作れない。市販の本ならば、「演算子（=はイコ−ルではないという話に関連する）」や「イベント」「オブジェクト」などについて、くどくどと何十ページにわたって書かれているはず。ここに書いたのはあくまでアウトラインの部分だ。 だからまず、その辺の事項を押さえよう。書きながら本をめくって調べるのもよい。 さてJS本をめくっていると、必ず「IE（インターネットエクスプローラ）」「NS（ネットスケープナビゲーター）」なる表示が付属しているはずだ。これは何を意味するのか。その辺だけ簡単に説明しておこう。 JavaScriptはそもそもネットスケープ社が自社のブラウザのために開発した。これが結構評判がいいのでそれをマイクロソフトがサポートした。しかしそこは天下のマイクロソフト。JSをベースに色々カスタマイズし、ブラウザに搭載した。だからマイクロソフトとしてはJavaScriptとは言わず、JScriptと呼んでいる。それってどう違うの？そう、ちょっと違うんです！どこがどうって言うのは、僕もよく知らないけど、自分で作ったJavaScriptを無料で配布しているホームページなどを覗くと、「IE版」「NS版」と別々に用意してあるのはよくある話。だから本にもそういう記述がある。 もちろん逃げ道はある。JSでブラウザの種類を調べることができるので、前回書いたIF文でそれぞれのブラウザにマッチした記述を、両方書いておく。そうすれば問題ない。だが面倒だ。いきおい両方使える記述法だけを使うようになる。ホントはもっと色々できるのに、機能を使いきらないと言うことになる。（ホント調べてみると色々できるんだよね） ここから先を覚えたいなら、そういう問題がつきまとうのを覚悟しよう。 セミナーでは他にHTMLやJavaScriptなどを拡張・融合させたDHTMLとかもさらりと教わったけど、これこそIEとNSでは互換性が低く、おのおののブラウザだけをターゲットにしたホームページでない限り、使える代物ではないのが判明。詳しいことを覚えるだけ無駄。いまはホームページ作成ソフトで、DHTMLが使えちゃうから、マニュアル見ながらやればよし。 ってなところでしょうか？ セミナーでは、色々サンプルを作ったから、もう少しつっこんだ内容だったけど、キリが悪いので、ここまでにします。 長い時間おつきあいをいただきまして、ありがとうございました。 ちゃんと見てる？ホントに！やっぱ不安… このページのトップへ

(C)2000 kim

ﾄｯﾌﾟページに戻る