★JavaScriptの基本

戻る JavaScriptの基本 進む

ここでは、JavaScriptの基本をまとめています。ご参考になれば幸いです。

JavaScriptを使えばHTMLよりも・・・

JavaScriptを使えば、HTMLでは表現出来ない多彩な表現が可能になります。

例えば、新しいウィンドウを開く場合。

HTMLでは
aエレメントのtarget="_blank"等を使用しますが、開くウィンドウの詳細(サイズや見栄え)を指定出来ません。
JavaScriptでは
開くウィンドウの詳細を細かく指定出来ます。また、一度に複数のフレーム(frame)の変更も指定出来ます。

よく見かけるスクロールメッセージ(ウィンドウのステータス行など)とか、ロールオーバー効果(リンクの上にマウスポインタが触れると画像が変化する)などが、JavaScriptを使えば簡単に出来ます。

[先頭へ]

JavaScriptを使えばCGIよりも・・・

JavaScriptを使えば、CGI処理の一部やCGIでは不可能な処理が出来ます。

例えば、フォーム(form)に情報を入力し、その情報をもとに処理を行い結果をページに表示するとします。

CGIでは
情報入力→データ送信→サーバー処理→結果返信→結果表示
送信返信はインターネットなので回線及びサーバーが混んでいると結果表示が遅い。かなり待たされる事があります。
JavaScriptでは
情報入力→ブラウザ処理→結果表示
瞬時に結果表示できて効率的です。

また、この時CGIでは端末側の時間を判断できません。
分かり易く言うと、訪問者がホームページにアクセスした時、朝ならば「おはよう御座います。」とか、夜ならば「こんばんは。」といった挨拶表示などが、JavaScriptを使えば簡単に出来ます。

[先頭へ]

JavaScriptのバージョンについて。

ブラウザにバージョンがあるように、JavaScriptにもバージョンがあります。新しいバージョンになるにつれて、新機能が追加されています。
主なブラウザの対応は以下の通りです。

JavaScriptのバージョン
バージョン対応ブラウザlanguageアトリビュート値
JavaScript1.0NN2.0以上 / IE3.0以上JavaScript(この場合全てのJavaScript対応ブラウザで実行)
JavaScript1.1NN3.0以上 / IE4.0以上JavaScript1.1
JavaScript1.2NN4.0以上 / IE4.0以上JavaScript1.2
JavaScript1.3NN4.06(4.5)以上 / IE5.0以上JavaScript1.3

NN2.0に搭載さた時は、JavaScriptではなくLiveScriptと呼ばれていました。 JavaScriptは、国際的な標準化機関ECMA(European Computer Manufacture Association 欧州電子計算機工業会)で標準化されたECMAScript(ECMA-262)規格に完全に準拠しています。
ちなみにIEは、JScript(Microsoft が開発したWebスクリプト言語)を搭載しています。JavaScriptと互換性はありますが、違うものです。どこが違うのかははっきり解りませんが・・・JavaScript と同じようにJScriptもECMAScript(ECMA-262)規格に完全に準拠しています。languageアトリビュート値は、JScriptです。

[先頭へ]

JavaScriptの構造。

では、JavaScriptの構造を簡単に説明したいと思います。

オブジェクト

プログラミングでのオブジェクト(object)の概念は大変難しいので、簡単に分かり易くしてみます。
自作パソコンを例に取って見ます。AT互換機はいくつものパーツで組み立てられています。
それぞれの主なパーツは、

パソコンのパーツ
CPU ケース メモリ CDドライブ ビデオカード OS
Duron 1.3GHz ブック PC/133 128MB SDRAM CD-ROM GeForce4 MX440 64MB Windows Millennium Edition
Celeron 2.2GHz MICRO ATX PC/2100 256MB DDR CD-R/RW RADEON 8500 128MB Windows XP Home Edition
Athlon XP 2700+ ミッドタワー PC/3200 512MB DDR COMBO RADEON 9700 PRO 128MB Windows 2000 Professionai
Pentium 4 3.06GHz フルタワー PC/1066 256MB RIMM DVD-R/RW

GeForce4 Ti4600 128MB

Windows XP Professional

このように選択肢があり、自分好みのパソコンが出来ます。自作パソコンを作る時、対象となるパーツひとつひとつを「オブジェクト」と言えます。

次にブラウザの場合です。ブラウザも同じように、いくつものパーツが組み合わせられています。
主なパーツは、ブラウザウィンドウ、ロケーションバー、ツールバー、文字、画像、リンク、フォームなどですが、これらも「オブジェクト」と言えます。

JavaScriptは、ブラウザのパーツを「オブジェクト」として指定でき動作させる事ができます。
JavaScriptのオブジェクトは大別すると、ナビゲータオブジェクト(ブラウザが持っている情報や各パーツ)とビルトインオブジェクト(日時や計算をするためのオブジェクト)があります。
ナビゲータオブジェクトには階層関係があります。

ナビゲータオブジェクトの階層
window━┏document━┏Form━━┏Select━━Option
        ┣Frame     ┣Layer   ┣Button
        ┣location  ┣Link    ┣Checkbox
        ┗history   ┣Image   ┣Radio
                    ┣Area    ┣Reset
                    ┣Anchor  ┣Submit
                    ┗Applet  ┣Hidden
                              ┣Password
                              ┣FileUpload
                              ┣Text
                              ┗Textarea

screen

navigator━┏Plugin
           ┗MimeType

記述する時は上記の階層通り指定します。記述の仕方は、階層順にピリオド( . )で区切ります。
例えば、document オブジェクトの場合は、
window.document
Layer オブジェクトの場合は、
window.document.Layer
と指定しますが、window オブジェクトは省略可能ですので、
それぞれ、document及びdocument.Layerと指定できます。

ユーザー独自のオブジェクトやビルトインオブジェクトを使用するには、new演算子を使います。
作成方法は、
オブジェクト名 = new オブジェクトの型(プロパティ、メソッド)です。
例えば、日付・時間を扱うDate()オブジェクトにtodayと言う名前を設定する場合は、
today = new Date()と記述します。

new演算子で使えるオブジェクト・リスト
Date          
Image String Array Function Boolean Number
[先頭へ]

プロパティ

プロパティは、オブジェクトの要素です。
ピリオド( . )で区切って、オブジェクト.プロパティと書きます。
例えば、ブラウザのアプリケーション名を知りたい場合は、navigator オブジェクトの appName プロパティを使いますので、
navigator.appNameと記述します。
プロパティには、読み出し用プロパティと変更可能なプロパティがあります。読み出し用プロパティには、上記のnavigator オブジェクトの appName プロパティや appVersion プロパティなどがあります。変更可能なプロパティには、location オブジェクトの href プロパティなどがあります。

メソッド

メソッドは、オブジェクトの動作指定をします。オブジェクト毎にメソッドが用意されています。
ピリオド( . )で区切って、オブジェクト.メソッド(値)と書きます。
例えば、文字を書き出す場合は、write( ) メソッドを使います。ブラウザのアプリケーション名を書き出すには、
document.write(navigator.appName)
と記述します。

イベントハンドラ

イベントハンドラは、イベント(マウス・クリックとかページ読み込み)が発生した時に、特定のスクリプトを呼び出します。
HTML4.01ではeventアトリビュートとして定義されてます。
HTMLのタグ内に、イベントハンドラ = "関数またはスクリプト"と書きます。
例えば、アラートダイアログ(警告表示用)を開きたい場合は、alert( ) メソッドを使います。
ページ読み込み時にブラウザのアプリケーション名を表示させるには、
<body onLoad="alert(navigator.appName);">〜</body>
と記述します。

参考.
bodyエレメント
[先頭へ]

文字列と数値

JavaScriptでは、文字列をダブルクォーテーション( " )で括ります。括られていない場合は、数値として扱います。
例えば、文字列を書き出す場合は、
document.write("文字列を書き出します。")
と記述します。

また、HTMLを書き出す場合などのように文字列内でダブルクォーテーション( " )を使いたい場合は、替わりにシングルクォーテーション( ' )を使います。
例えば、HTMLで画像を書き出す場合は、
document.write("<img src='image.gif' alt='image' width='100' height='100'>")
と記述します。

参考.
imgエレメント

文の終了

JavaScriptでは、セミコロン( ; )は文の終了を意味します。省略可能ですが、文を読みやすくするために記述することをお勧めします。{ } の後には記述しません。

複数の値の設定

複数の値を設定するには、カンマ( , )で区切ります。

[先頭へ]

記述例

ソース
<script type="text/JavaScript">
<!--
today = new Date();
document.write("今日は",today.getMonth()+1,"月",today.getDate(),"日ですね。");
//-->
</script>

表示
ソース
<script type="text/JavaScript">
<!--
document.write("こんにちは、");
document.write("お使いのブラウザは",navigator.appName,"ですね。");
//-->
</script>

表示

どうですか、NNとMozillaの方はNetscape、IEとOperaの方はMicrosoft Internet Explorer、Konquerorの方はKonquerorと表示されましたよね。

[先頭へ] [Top Pageへ] [Contentsへ]


Copyright (C) pokochan 2000-2003
http://www.tees.ne.jp/~pokochan/java_script/basic.html
E-mailpokochan@mx1.tees.ne.jp