JavaScriptを書くうえで最低限知っておきたい基本テクニックです。
ただ、この本は、一応、自分でHTMLが書けてページを作れる人を念頭において構成
されています。ホームページ制作の基本的なことがらはそれらに関する入門書やサイ
トで勉強してください。(...といいつつ、実は、この本の基本的な使い方はCD-ROMの
ソースをコピーして使うというやり方なので、HTMLが書けなくてもこの本さえあれば
一応、ちゃんとしたHTMLとJavaScriptを使ったページを作ることはできます。^^)
JavaScriptは基本的にHTMLの中に書くプログラム言語です。*注-.jsファイル
HTMLの中にJavaScript文を書き足して、あとは普通のHTMLとまったく同じ
ようにサーバーへ置いてやるだけでHTMLでは実現できないさまざまな機能を
盛りこんだページができあがります。
このプログラムを作るのに必要なものはHTMLを書く時に使う道具と
まったく同じでかまいません。
JacaScript入りHTMLファイルを作る
・テキストエディター(またはワープロソフト)
・Netscape Navigator3.0以上を推奨します
・画像ファイル(GIF、JPEG)など
●ちょっとだけやってみましょう(^^)/!!
ボタンがクリックされたら
「いらっしゃいませ」というダイアログが出るようにしてみましょう。
で、このボタンを作るためにやることは....、
<FORM> <INPUT TYPE="button" VALUE=" 押してね(^^) " onClick="alert('いらっしゃいませ')"> </FORM> たった、これだけです(^0^)/。
これをコピーしてあなたのページのHTMLの中に貼るだけで同じものが作れます。どうです? 簡単でしょう?
このonClick=がボタンがクリックされたら....と言う意味で
alert()がダイアログを出す命令です。だから、このスクリプトは
ボタンがクリックされたら
'いらっしゃいませ' というダイアログを出す。
という仕事をしてくれます。
この仕組を覚えたら、さあ、あとは、'いらっしゃいませ' を 'よくきたな ' ^^;とか 'なんで押すんだよー' とか どんどん取り替えていろいろと使い回してみましょう(^0^)/。
で、今のは、INPUTタグの中にスクリプトを直接書いたわけですが、もう1つの書き方があります。その、2つの基本的な記述形式について、次に説明します。
ただ、説明は軽く流して、実際に自分で動きを確認しながら(できれば、コピーしてページを作ってみながら)やってみるという心構えで読み進んでください。やってみてから、説明を読むとたぶん数分の1の労力で理解できるはずです。
●JavaScriptの基本形式
JavaScriptを書くうえで最も基本的な記述形式が2つあります。
A : <SCRIPT>タグで囲んでスクリプトを書く
下のスクリプトを実行するページがここにありますのでのぞいてみてください。
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"> -----1 スクリプトタグ<!-- -----2 コメントタグ
//コメントを書く -----3 コメント
document.write("こんにちわ") -----4 スクリプトの本文//--> -----5 2のコメントタグを閉じる
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
このように、<SCRIPT>と</SCRIPT>の間に記述する形式の書き方です。このとき、<SCRIPT>タグはなるべく、<HEAD>と</HEAD>の間におくことを心がけておいてください。
1 <SCRIPT>~</SCRIPT> スクリプトタグ
このタグの中にスクリプトを記述します。
LANGUAGE="JavaScript"は、そのスクリプトがJavaScriptであることを 指定しています。/*参考
JavaScriptのLANGUAGE指定には"JavaScript"と"JavaScript1.1"と"JavaScript1.2"のバージョンがあります。1.1はNetscape Navigator(以下NN)の3.0に相当し、1.2はNN4.0に相当します。バージョンを書かない"JavaScript"または、"LiveScript"という指定はNN2.0,3.0,4.0とWindows版Internet Explorer(以下IE)3.0,3.01などJavaScriptに対応するすべてのブラウザで使えます。IE3.01は"JavaScript1.1"を読めるのですがNN3.0の多くの命令を実行できないので注意が必要です。IE3.01では"JScript"という表現も使えますが、IE3.0やNNでは使えません。このほかに、VBscriptなどもありますが現在MacやUNIXなどWindows環境以外では使えません
*/2 <!--と//--> コメントタグ
たとえば、<!--
ここにスクリプトを書きます
//-->と言う具合に使います。
このタグでくくっておかないと、JavaScriptが読めないブラウザで見たときに ソースがページ内にずらずらと表示されてしまいます^^;。
ただ、今では、JavaScriptを読めないブラウザが随分少なくなってきました。 でも、それでもまだわずかながらそういうブラウザで見ている人もいますので、 そういった方々への気配りということです。3 // コメント
HTML内のコメントはコメントタグを使いますが、スクリプト文中にコメントを 付ける時に使います。なくてもかまいません。
4 スクリプトの本文。
/*参考
ここでは、document.write()というスクリプトを書いていますが、これは、文字などを書き出す命令write()です。この括弧の中に"こんにちわ"といった文字やHTMLなどを記述しておくと画面に書き出すことができます。write()の前にあるdocumentは、write()を含むいくつかの命令をまとめたグループの名前です。これは、ドキュメントオブジェクトといい、document.write()と書くことで、ドキュメントオブジェクトの中にあるwrite()という命令を実行する、という意味になります。write()の間にあるドット(.)を「の」と読み替えてみるとわかり易くなると思います。ちょうど、筆箱の中(document)の鉛筆(write())という感じでしょうか? 筆箱の中に色鉛筆や消しゴムが入っているように、documentの中にもwrite()の他に背景色を指定するdocument.bgColorや文字とかHTMLを消すdocument.clear()などの命令がたくさん入っています。JavaScriptにはどんなオブジェクトがあってどんな命令が使えるのかについてはPART3のJavaScriptのオブジェクトとそれに含まれるプロパティ・メソッド・イベントハンドラ一覧などを参照してみてください。はじめは難しいと思いますが、実際に動かして見るとそれらの関係の意味が自然に理解できるようになるはずですので言葉の意味を知ることをあせらずに、動かすことを優先してトライしましょう。 ちなみに、JavaScriptのオブジェクトの最上位はwindowオブジェクトです。documentオブジェクトはその下にあって、たとえばwindow.document.write()という書き方をしても上と同じ意味になります。つまり、鞄の中(window)の筆箱の中(document)の鉛筆(write())という感じです。もちろん、鞄の中にはもっとたくさんのオブジェクトや命令(プロパティやメソッド)がつまっていて、あなたが使ってくれるのを待っているというわけです(^^)。
*/
B : 通常のHTMLタグの中にスクリプトを書く
これは、はじめに説明した 'いらっしゃいませ' のダイアログを出すスクリプトのalert文を 'こうなります' という文章に差し替えただけのサンプルです。 下のスクリプトを実行するページが ここにありますのでのぞいてみてください。
<FORM>
<INPUT TYPE="button" NAME="" VALUE=" 押してください "
onClick="alert('こうなります')">-----1 イベントハンドラー
</FORM>これはAのサンプルのようにスクリプトタグで囲んだ中に書くのではなくて、INPUTやBODYなどの通常のHTMLタグの中に直接スクリプトを書くやり方です。普通は、クリックされた時にダイアログを出すとかページを読み込んだタイミングで読み込まれた時間を表示するという具合に、あるイベントにタイミングを合わせてスクリプトを動かすという風に使います。 ここでは、INPUTタグの中に記述してボタンをクリックされたらダイアログ出すようにしてあります。
1 onClick= イベントハンドラー
この例は、INPUTタグのボタンを押したら こうなります というダイアログが 飛び出します。 このようにボタンを押した時とか、ページが読み込まれた時などの何かのタイミングでスクリプトの実行を "引き起こす" 道具をイベントハンドラーといいます。このonClickの他にonMouseover,onMouseout(マウスカーソルが文字などに触ったり離れたりしたら命令を実行)やonSubmit(フォーム送信時に命令を実行)やonUnload(ページに入ったら実行)などいろいろなハンドラがあります。 とか、
JavaScriptは基本的にHTML内への上記の2つの書き方のバリエーションで作られます。スクリプトの言い回し(構文)はPART3 JavaScript言語仕様に、単語(コマンドなど)とその使い方(Syntax)はPART4 JavaScriptクイック書式一覧にまとめてありますので、実際にJavaScriptを書きながら(JavaScriptの良さは、HTMLに書いたら面倒な手続きなしですぐに動かして見れることにあります^0^)参照してください。
動かしてエラーが出たら直す
普通、オリジナルのプログラムをはじめて書いて動かしてみて一発で動く人はほとんどいません。かなりのベテランでも、新しい言語だとエラーの無いものを仕上げるのは難しいものです。何度も書いては動かし、エラーを見て直して、動かしてと繰り返してやっとまともなものができ上がります。そうしている間にいろいろな命令や言い回しやその言語のクセを習得し、だんだんエラーの無いものがすっと書けるようになるわけです。JavaScriptの良いところのひとつはこの作業が簡単にできることです。HTMLに書いたらあとはブラウザで読めば動くかどうかが即座にわかります(^^)。エラーが出たら、エディターですぐに直してまた、即座にブラウザで動かしてみれるというわけです。
この作業はデバックと呼ばれています。JavaScriptではエラーダイアログが出ますのでどこでエラーが起きたかはおおよその見当はつけられますがどの場所と特定できないケースも結構多いものです。そこで、実際に動かしながらスクリプトがどこで止まるのかを見極めます。
いろいろな方法があると思いますが、alert()文を使う方法を説明します。たとえば、
<SCRIPT> document.write('1') document.write('2') document.writa('3') document.write('4') document.write('5') </SCRIPT> は、12345 という文字列を表示するスクリプトですが 実行すると JavaScript Error: file:/harddisk/Desktop%20Folder/%8F%91%97%DE/test.htm, line 4: Document.writa is not a function. といったエラーダイアログが出ます。 これは test.htmというファイルの4行目にエラーがあって Document.writaはファンクションではない と言っています。確かにwriteのeをaに書き間違えていますのでこれを 直せばよいのですが、もっと複雑な場合は表示される行数が書いた通り とは限りませんのでちょっと見ただけではなかなかみつけられません。 そこで、たとえば、 <SCRIPT> alert('1') document.write('1') alert('2') document.write('2') alert('3') document.writa('3') alert('4') document.write('4') alert('5') document.write('5') </SCRIPT>;こうすると1命令実行する毎にalertダイアログが出ますから、どこでエラーか出たのかを確実に把握できるようになります。実際には、すべてのステップにalert()を入れていたのでは気が遠くなりますからある程度目星をつけて入れていきます。また、変数を使っている場合は、alert('変数名xは今 '+x+' の値になってます')という風に変数の値をトレースしてみるのも良い方法です。
CD-ROMのスクリプトをコピーしてHTMLに貼り込むことができてエラーへの対処の方法がわかったらあとはやってみるだけです(^^)。
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)