JavaScript プログラミング |
JavaScript(ジャバスクリプト) は、Webブラウザ上で動作するスクリプト言語(プログラミング言語)であり、Netscape Communications社が開発した。Webページ(ホームページ)であるHTMLファイル内に<script>〜</script>タグを使って書く。対応するWebブラウザはNetscape
Navigator/Communicator 2.0以上、Microsoft Internet Explorer 3.0以上である。
【注意】このサイトでは、Microsoft Internet Explorer 6 でのみ動作確認をしている。
JavaScriptとよく似た名前の言語にJAVA(Sun Microsystems社開発)があるり、どちらもC言語を祖先としてできているので記述もよく似ているが、まったく別物である。Netscape社とSun社が技術提携したこともあり、JavaScriptと名づけられた。
1.JavaScriptの書き方
サンプルのファイル群は一つのフォルダにまとめて保存すること。ここでは、フォルダsample3に保存している。
(1) HTMLファイル内に作成
JavaScriptはHTMLファイルに書き込むので、メモ帳などのエディタやホームページ作成ソフト(ホームページビルダー)で作成できる。まずは、メモ帳などのエディタで次のHTMLファイルを作成する。
[[ jsrei1.html ]]
<HTML>
<HEAD>
<TITLE>はじめて</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
document.write("はじめてのjavascript");
//-->
</SCRIPT>
</BODY>
</HTML>
プログラム全体を<SCRIPT language="JavaScript">と</SCRIPT>タグではさむ。
新しいHTMLの規格では<SCRIPT type="text/javascript">と書くようになる。
<!--と-->の間はHTMLではコメントとして扱われる。このようにしておくのは、JavaScriptに対応していないブラウザでプログラムが表示されないようにするためである。-->の直前の//はJavaScriptのコメントである。
document.write("はじめてのjavascript"); の行がプログラムである。このドキュメントの書き込み命令(メソッド)であり、このページのこの位置に「はじめてのjavascript」と書き込む。したがって、Webブラウザで表示すると、書き込まれた「はじめてのjavascript」が表示される。
ホームページビルダー(HPB)では、メニューから次のように選択するとスクリプトのダイアログが開く。ここで、プログラムを入力する。
[挿入(I)] → [その他(A)] → [スクリプト(R)...]
スクリプトのダイアログ(左図)の@の部分を削除して、プログラムを入力する。最初と最後の行にある<!--と//-->は消さないように注意すること。<SCRIPT>〜</SCRIPT>は自動的に挿入される。
スクリプトが挿入された位置には {S} が表示される。
ブラウザ(またはHPBのプレビュー)で確認する。
Aの部分に「外部ファイルを指定(F)」という項目があるように、JavaScriptは別のファイルとして作成することができる。次にその方法を見てみる。
(2) HTMLファイル外に作成
メモ帳などのエディタで、次の1行だけのプログラムファイルを作成する。ファイル名はjsrei2.jsとする。
document.write("2つ目のスクリプト");
<SCRIPT>などのタグは不要である。JavaScriptファイルの拡張子は"js"とするのが一般的である。
HTMLファイルは次のように書く。ファイルjsrei2.jsと同じフォルダに保存すること。
[[ jsrei2.html ]]
<HTML>
<HEAD>
<TITLE>2つ目</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript" src="jsrei2.js"></SCRIPT>
</BODY>
</HTML>
<SCRIPT>タグのsrc属性にスクリプトのファイル名を指定する。
スクリプト・ダイアログのBの部分にHPBで用意されているライブラリがある。この中のいくつかを見てみる。
(a) ステータス行にメッセージを表示
ステータス行とはブラウザの最も下にある部分である(右図参照)。
window.status = 'ここにメッセージを書いてください。';
※JavaScriptの文字列は(")または(')で囲む。
※windowオブジェクトのstatusプロパティに文字列を設定する。windowオブジェクトはここではブラウザである。
(b) メッセージボックスを開く
alert('ここにメッセージを書いてください。');
(c) ページ背景色の指定
document.bgColor = '#FF0000';
※documentオブジェクトのbgColorプロパティに色データを設定する。#FF0000の#は16進数を表し、続く2けたずつの数字が各色(赤、緑、青)の要素を表す。documentオブジェクトはこのページ自身のことである。
(d) 最終更新日の表示
document.write('Last updated: ', document.lastModified);
(e) 履歴
history.back(); //履歴を戻1つる
history.forward(); //履歴を1つ進む
JavaScript プログラミング | Copyright © 2003 Hiroshi Masuda |