Javascript Patchworker - インフォメーション

サンプルソース

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 02 <html><head> 03 <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> 04 <title>WELCOME TO MY HOMEPAGE!</title> 05 <script type="text/javascript">  </script> 09 <script type="text/javascript" src="script.js"></script> 10 </head> 11 <body onload="welcome()" onunload="bye()"> 12 <script type="text/javascript"> </script> 15 <a href="javascript:history.back()">一つ前に戻る</a> 16 </body></html>

JavaScriptの基本

HTML文書でJavaScriptを呼び出すには以下の４つの方法があります。

リンクタグを使用

　リンクタグに次のように書くことで、リンクをクリックしたときにスクリプトを呼び出せます。（15行目の書式）

<a href="javascript:関数名またはメソッド名">リンク</a>

メソッドとはいわばスイッチみたいなもので、実行するとなにかしらのイベントが発生します。
サンプルではalert()メソッド（警告ダイアログを表示するメソッド）を呼び出しています。

イベントハンドラを使用

　先ほど紹介したリンクのクリックによる呼び出しだけでは、スクリプトの機能をすべて実行できるわけではありません。マウスが重なると画像が変わったりと、ほかにも様々な動作でスクリプトの機能を呼び出しています。
それらはHTMLの共通属性の一種である、イベントハンドラと呼ばれるものを使って呼び出しています。
サンプルでは11行目にイベントハンドラが使われています。

<body onload="welcome()">

onloadはページ読み込みのイベントでスクリプトを呼び出すイベントハンドラです。
これで呼び出しているwelcome()は関数といって、ユーザーが定義できるメソッドと考えてください。
06行目でfunctionという命令を使って関数を定義しています。

<script>タグを使用

　JavaScriptはヘッダに関数を定義するスクリプトを書いておき、それをイベントハンドラを使って呼び出すのが普通です。
スクリプトは<script>～</script>に記述し、全体をでコメントアウトします。
ここに書かれたスクリプト自体はページ読み込み時に実行します。つまりページ読み込み時に関数を定義するわけです。
なのでこの部分にイベントハンドラを記述することも可能です

<body onload=～>は<script></script>と等価

またスクリプトタグはボディ内に記述することも可能です。（12～14行目参照）
スクリプトタグはその使われ方によってブロックレベル要素かインラインレベル要素に変わります。

外部ファイルから読み込み

　JavaScriptの場合もスタイルシートと同じように、外部ファイル（*.css）を用意してそれを読み込ませることが出来ます。

<script type="text/javascript" src="ファイル名.js"></script>

外部ファイルの記述方法は通常と変わりありません。（<script>タグやコメントアウトは当然必要ありません）

前のページ　　次のページ

 TOPページに戻る