HTML と JavaScript


ここのメニューは HTML Tips なのに JavaScript についての言及が多すぎるのでは、とお思いの方もいるかも知れません。 JavaScript についての言及が多いのは、それなりに理由があります。

一般に、ホームページで表示されるコンテンツの中には、HTML とそこからリンクされた画像や音声のようなデータのほかに、 JavaApplet や ShockWave、VRML、QuickTime などのマルチメディア的なデータもありますが、これらはいずれもそれを作るための特別なツール(ソフト)が必要であり、 また、見る側にとってもプラグインが必要だったり、せっかく表示されても動作が鈍かったりします。

JavaScript はそれらとは違って、HTML ファイルの中に動作を規定したスクリプトを直接記述すればいいのです。 つまり、ホームページのソースファイルの中に見かける

<SCRIPT Language="JavaScript">
<!--
     ・
     ・
     ・
//-->
</SCRIPT>

といったものですが、こういうのは複雑なルーチンを定義するときに使うやり方で、例えば HTML の BODY タグの中に <BODY onLoad="alert('ようこそ!')"> と書くだけの簡単なものだって JavaScript です。 これはつまりページがロードされたときに(onLoad)、「ようこそ!」と書いたダイアログを表示する(alert)ことを意味しています。 そこで alert("・・") というメソッドを覚えておけば、いろいろな条件の時にダイアログを使ったメッセージを表示できることになります。

JavaScript は一種のプログラミングですが、コンパイラなどを必要としないスクリプト言語である点が、一般のプログラミング言語とは違います。 そして考えてみれば HTML だって一種の簡易プログラミングということができます。つまりテキストに書かれた文字がそのまま表示されるわけではありません。 タグ(< >)とその中の文字は画面に表示されず、タグ内の指示に従って画面や文字の表示の仕方を規定したり、他のファイルにリンクさせるハイパーリンクを設定したりしているわけです。

初心者の中には HTML は難しいもの、と決めてかかっている人が多いようですが、そんなことはありません。 やり方をマスターすれば、自分の思い通りにブラウザに表示されるので、逆にタグを書くことが面白くなります。 HTML ファイルを作るには特別なツールは必要ありません。簡単なエディター、ウィンドウズであれば「メモ帳」を使います。(以下はウィンドウズのやり方で話を進めます。) 「メモ帳」を起動して新規ファイルに次のように書き込んで保存します。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

これらはすべての HTML ファイル(フレーム用のファイルを除く)で必ず使うタグなので、あらかじめ雛形を作っておくわけです。 (こういう HTML の雛形を用意してくれるツールがあるなら、そちらを使った方がよいでしょう。) わかりやすいファイル名を付けて保存します(ここでは仮に "HP" とします)。 次にこのファイル("HP.txt")のショートカットを作ってデスクトップに置きます。簡単に起動できるようにするためです。 次いで自分のホームページ用のファイルを保存するためのフォルダーを作っておきます。そしてこのフォルダーのショートカットも作って、デスクトップに置きます。 デスクトップに新しいショートカットが2つできましたね。

それから両方とも作業フォルダーを新たに指定します。 作業フォルダーを指定するには、ショートカットアイコンを右クリックして表示されるポップアップメニューの中から「プロパティ()」を選択、次いで「ショートカット」タブの中から「作業フォルダー()」を見つけます。 ホームページ保存用のフォルダーがもしCドライブにあり、フォルダー名が "My Homepage" だったとしたら、作業フォルダーの指定先を "C:\My Homepage" とします。 こうすれば、新たに作られた HTML ファイルの保存先が自動的にこのフォルダーに設定されるわけです。

HTML ファイルを作成するには、さきにデスクトップに作った "HP.txt" のショートカットをダブルクリックします。 上に示したHTML ファイルの雛形が表示されますが、ここには直接書き込まず、「すべて選択()」してコピーします。 次に「ファイル()」−「新規作成()」で新しいファイルを開き、ここにペーストします。 ここにタグや本文を書き込んでホームページ用のファイルを作成するのです。ある程度できたら「名前を付けて保存()」します。 ホームページ用のフォルダーを開くとその名前の付いたテキストファイルができていますが、拡張子は .txt となっているので右クリックして出るメニューの中から「名前の変更(」)を選んでこれを .htm (または html )という拡張子に変更します。 アイコンがブラウザのマークに変わればOKです。

この HTML ファイルをダブルクリックするとブラウザが起動し、自分の作ったホームページが表示されます。 これを見て、もし書き換えたい、或いは追加したい、というのであれば、 "HP.txt" を起動して「ファイル()」−「開く()」からさきの HTLM ファイルを見つけて開きます。 タグ表示されているので、訂正または追加部分を書き込んで「上書き保存(」します。ブラウザに移り、「更新(再読込)」ボタンをクリックします。 作業に間違いがなければ、追加・訂正部分が正しく表示されているはずです。

以上が、ホームページ作成ソフトを使わずに「手作り」で HTML ファイルを作る場合の手順です。もしこれでは手間がかかると思うのであれば、既成の HTML エディターを使っても良いのですが、なるべく自分でタグの設定ができるものの方がよいと思います。 なぜなら、ワープロ感覚で作るHP作成ソフトは初心者には便利そうですが、出来映えが思い通りに行かない場合があるからです。或るブラウザではうまく見えても、他のブラウザではヘンテコになった、ということも起こり得ます。 例えばページのレイアウトは、単純に直感的に文章や画像を割り付けたほうがいいのか、それとも TABLE タグを使ってきっちり配分したほうがいいのかはケースバイケースであり、それを状況判断できるのは結局、タグを知っている人でしかないからです。

タグを使ってホームページを設計できるようになったあなたは、1人前のホームページ・プログラマーです。といっても、たくさん種類があるタグを全部覚える必要は全然ありません。そんなことは労力の無駄遣いです。 それより自分がよく使う数種類のタグだけを習得し、滅多に使わないものは必要に応じて覚えればよいのです。

ところで HTML はホームページのプログラミングだとはいっても、できることが限られています。例えばブラウザのステータスバーに文字を表示するということは、タグだけではできません。 ところが JavaScript を使って <BODY onLoad="status='私のホームページにようこそ!'"> と書けば、ページがロードされたときにステータスバーに「私のホームページへようこそ!」と表示することができます。 ユーザーのアクション、つまり「イベント」に対する反応も、HTML では文字や画像をクリックしたときに他のファイルへリンクするということだけですが、JavaScript を使えばページがロード・アンロードされたときやボタンがクリックされたとき、リンク文字の上にマウスポインターが重なったときなど、幅が広がります。 コンピュータのシステムにアクセスして現在時間を読み込むことも、JavaScript ならできます。

つまり JavaScript は HTML の拡張機能と考えればよいのであって、HTML を自分で書く進取的な人なら、一歩進んで JavaScript を書き加えるのはそんなに難しいことではないと思います。 もちろん JavaScript は Netscape や IE など JavaScript 対応のブラウザでなければ動作しませんが、両ブラウザのユーザーの多さを考えれば(別にひいきするわけではありませんが)使って損はないでしょう。 同じようなスクリプト言語として VisualBasicScript があります。こちらは v.3.0 以上の IE で標準に動作しますが、Netscape では ScriptActive というプラグインをインストールしなければ動きません。

ところで JavaScript は、JavaApplet やプログラミング言語としての Java とは別物です。Java という言葉でごっちゃにしている人が多いようですが、せいぜい親戚関係にあると考えたほうがいいでしょう。 Java は JDK と呼ばれる開発ツールを必要とし、スタンドアローンで動くほか、Netscape などのブラウザでアプレットとして実行されます。ちなみに私がホームページ上でアプレットを使用しない理由は、「重たいから」。 ものにもよりますが、ブラウザの動作が重くなり、他サイトへ逃げたあとでもまだ引きずっていることがあるからです。

JavaScript はバージョン 1.2 になってかなり充実してきたとはいえ、まだプログラミング言語としては完璧とは言えません。飽くまでWWWブラウザのマクロといったところです。それでもプログラミングの初歩的な機能はかなり備えているので、そうしたことに興味のある人は学んでみる価値はあります。 電卓を作るといった、一見ホームページとは関係ないようなことも、JavaScript を使ってできます。(もちろん飽くまでブラウザ上で。)これからプログラミングを学びたいと思う人は、最初から高価な開発ツールを買って挫折するより、普段使っている IE やNetscape だけで実行できる JavaScript で腕試しをして、 配列や for ループといったプログラミング的なものの考え方を身につけてから、本格的な開発ツールに進むという手もあります。

JavaScript というと、画面の色をパタパタ変えるとか、メッセージを表示するとかといったお遊び的な機能を連想されやすいのですが(もちろんそういう使い方もできますが)、HTML の拡張機能としてもっと実用的なことにも応用できるのではないかと思います。 このコーナーでは、今後もそうした方向を追究してみたいと思います。




次のトピックは「「動く掲示板」を作る」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで