..

JavaScriptの入門とサンプル集
JavaScript入門−概要編(JavaScriptの記述方法)     ■戻る     ■次へ     ■Home

JavaScriptの記述方法

 JavaScriptはHTML(HPを記述するテキストファイル)のタグの間に記述します。以下のリストのように<script>タグの間にJavaScriptのプログラムを記述します。<script>のタグに対応していないブラウザで実行したときにプログラムが表示されていまうのを防ぐために、HTML文のコメント文として<!---->の間にプログラムを記述します。


<html>
<head>
<title>JavaScriptの記述方法</title>
<script language="JavaScript"><!--
・・・
// --></script>

</head>
<body>
<script language="JavaScript"><!--
・・・
// --></script>

・・・
<img src="blue.gif"
onmouseover="this.src='red.gif'"
onmouseout="this.src='blue.gif'"
>
・・・





<!---->の間にJavaScriptのプログラムを記述します。
この場合は<head>タグの間に記述しています。



<body>タグの間に記述することもできます。



このようにタグの中に記述することもできます。
この場合はマウスを画像に載せている間は「red.gif」という画像を表示し離すと「blue.gif」に戻すように記述しています。
「onmouseover」「onmouseout」はイベントと言われそれぞれマウスが重なった時と外れた時に実行するプログラムを"〜"に記述しています。
「this」はオブジェクト名でこのイメージのことを示しています。
「src」はプロパティ名でオブジェクトの画像のことを示しています。

【参照】 オブジェクト、メソッド、プロパティ
【参照】 マウスを重ねると画像が入れ替わる
【参照】 イベント


 以下のようにtypeを用いてJavaScriptを記述する方法もあります。


<script type="text/javascript"><!--
・・・
--></script>

<script language="javascript1.3"><!--
・・・
--></script>

<script type="text/javascript" src="jstxt.js">
</script>


<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="csstxt.css">


typeを使った場合の記述方法。
HTML4.01からtype属性が標準になりました。HTML4.01に
準拠する場合はtype属性を使ってください。

このようにJavaScriptのバージョンを設定することもできます。



この場合はJavaScriptを別のテキストファイル「jstxt.js」から外部
参照するように記述しています。

同様にスタイルシートを外部参照する場合はこのように記述しま
す。この場合「csstxt.css」にスタイルシートのテキストデータが入
っています。


 その他、HTML4.01ではタグの中のイベントハンドラ(onClick="〜"等)に記述したスクリプト言語を指定するために以下のようにヘッダ部分に記述することを推奨しています。記述しなくても大半のブラウザでは認識されます。


<head>
<title>HTML4.01推奨表記</title>

<meta http-equiv="Content-Script-Type" content="text/javascript">

</head>





HTML4.01に準拠する場合はヘッダ部分にこのように記述します。



..

JavaScript入門−概要編(JavaScriptの記述方法)     ■戻る     ■次へ     ■Home


..