初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第１号   第２号   第３号   第４号   第５号   第６号   第７号   第８号   第９号   第10号
 第11号   第12号   第13号   第14号   第15号   第16号   第17号   第18号   第19号   第20号
 第21号   第22号   第23号   目次

今週＜第24号＞マガジンのおさらい

■ JavaScriptって何？

1995年、Netscape Navigator社（当時）の手によって JavaScriptが開発されました。HTMLだけで記述した Webページは、静的なデータをそのまま表示するに過ぎません。しかし、ページの内容や目的によっては各種の演算処理を行い、動的にページを変更して表示する場合もあるでしょう。従来、このような用途には Webでは不向きとされてきましたが、Scriptの登場によって一変しました。

JavaScriptは、CGIのようにサーバにプログラムを置く必要のないテキストベースのスクリプト語で、HTMLの中にも記述することができるインタプリタ言語のひとつです。これは、プログラムとしてコンパイルする必要のない実行可能なテキストといえます。

■ JavaScriptの互換性

Netscape社によって開発され発表された JavaScriptは同社の Netscape Navigator 2.0 で初めてその実行機能が取り入られ、その後登場した MSIE（Microsoft Internet Explorer）3.0 でもこの機能が取り入られました。その後、JavaScriptは何度かバージョンアップを繰り返し、その新しい機能は新しいブラウザが発表される都度に更新されてきました。

ところが、同じ命令のスクリプトがブラウザの違いによって動作が異なったり、動かないものがあります。同じブラウザでもプラットフォームが異なると、動きも異なってしまう現象があります。ブラウザごとに独自の拡張機能が加えたりして、近年、スクリプトの互換性は大きな問題となっております。

JavaScript互換性一覧

	MSIE					Netscape
	2.*	3.*	4.*	5.*	6.*	2.*	3.*	4.0 ～ 4.05	4.06 ～ 4.7	6.0
JavaScript	×	○	○	○	○	○	○	○	○	○
JavaScript1.0	×	×	×	×	×	×	×	×	×	×
JavaScript1.1	×	×	○	○	○	×	○	○	○	○
JavaScript1.2	×	×	○	○	○	×	×	○	○	○
JavaScript1.3	×	×	×	○	○	×	×	×	○	○
JavaScript1.4	×	×	×	×	×	×	×	×	×	○
JavaScript1.5	×	×	×	×	×	×	×	×	×	○
JScript	×	○	○	○	○	×	×	×	×	×

■ JavaScriptの記述法

JavaScriptはテキストですので、そのままHTML内にも記述が可能です。また、外部に作られたスクリプトをHTML内に読み込むことも可能になっています。

HTML内の記述法

HTMLでは、通常ヘッダに記述する場合が多いようですが、スクリプトを実行するイベントが発生する場所にも記述することが可能です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-Jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript講座</title>
<script type="text/javascript">
<!--
//  この範囲にスクリプトを記述します。
//-->
</script>
</head>

外部スクリプトの読み込み

外部スクリプトをHTMLに読み込むのには、

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

src属性によって、スクリプトのURLを指定します。外部スクリプトの拡張子は「js」です。

■ JavaScriptのアクセシビリティ

スクリプトが実行できないブラウザがあります。あるいは、実行できるブラウザでも、ユーザ側でスクリプトを「オフ」にしている場合も少なくありません。

HTML 4より、noscript要素が使えるようになりました。これは、スクリプトが実行できない環境のブラウザに対して、代替のテキストや他のページへの誘導を表示する場合に使用します。

<noscript>
   <p>あなたのブラウザではJavaScriptが実行できません。
      ここではスライドショーを行っております。お手数ですが、
　 　<a href="next.html">代替ページ</a>へ移動してください。</p>
</noscript>

JavaScript入門

■ テキストを表示する

簡単なスクリプトを紹介します。JavaScriptの第１歩です。

document.writeln("Hello World!");
document.write("JavaScript");

＜実行結果＞

writeln() と write()の違いは、改行を出力するかしないかですが、実際に改行はしません。HTMLでは writeln()は余白が与えられるだけですので、両者ともほとんど同じ表示で変化がありません。

■ スクリプトの処理

上記のスクリプトを分解して説明すると、

document	オブジェクト	操作対象
writeln	メソッド	アクション
("Hello World!")	引数	具体的な内容
；（セミコロン）	スクリプトの区切り

基本的には、document までがオブジェクトとなり、write以降引数も含めたものがメソッドとして扱われます。

■ 省略されたオブジェクト

本来の documentオブジェクトの記述法は、下記のとおりです。

window.document.writeln("Hello World!");
window.document.write("JavaScript");

documentオブジェクトは、必ず windowオブジェクトの中に入っているものなので、省略が可能となっています。ただし、むやみに省略してしまうと、思わぬ誤動作が発生する場合がありますので、注意が必要です。

■ 変数

引数には、変数を与えることができます。

変数とは、何かを入れる「箱」と例えることができます。「箱」はコンピューターのメモリに名前をつけて格納され、必要に応じて呼び出すことができます。

右の下手くそな図は画像を変数に格納させている様子を示しています。「箱」には、JavaScriptで予約されている名前以外の「変数名」を定義して、「値」として様々なデータを格納します。

■ 変数を用いたスクリプト

「箱」の中に、HTML文を代入して画像を表示させます。

banban = "<img src='images/niagara.jpg'>";
document.writeln(banban);

banban という名の箱（変数）の中にHTML文を入れました。下段のスクリプトは、引数banban を表示させるものです。

＜実行結果＞

なお、代入したHTML文では、「 < 」や「 > 」があるために、ブラウザによっては混乱する場合があります。そのために、スクリプトを外部に置くことをお奨めします。外部スクリプトの作成は実に簡単で、スクリプトをテキストエディタで記述し、拡張子「js」をつけて保存するだけで外部スクリプトが完成します。お試しください。

ちなみに上記スクリプトの＜実行結果＞は外部スクリプトで表示しています。

■ 省略された変数の宣言

本来、変数を利用するには「変数の宣言」が必要です。しかしながら、JavaScriptではこの設定を省略することが可能なため、あえて宣言を行いませんでした。

var banban
banban = "初心者のためのホームページ作り"

var を使って、「箱」に banban という名前をつけました。ここはあくまで、箱を用意し、名前を付けたに過ぎません。用意された「箱」にテキストを代入しているのが下段のスクリプトです。

つまり、varは、変数の宣言を示しています。

■ JavaScriptの予約語一覧

以下の予約語を変数名として使用することができません。

abstract	boolean	break	byte	case	catch
char	class	const	continue	default	do
double	else	extends	false	final	finally
float	for	function	goto	if	implements
import	in	instanceof	int	interface	long
native	new	null	package	private	protected
public	return	short	static	super	switch
synchronized	this	throw	throws	transient	true
try	var	void	while	with

もし、どうしても予約語と同じ物を使う場合には、「my」などをつけて区別します。

「try」の場合、「mytry」とするか、アンダーバーをつけて、「_try」とします。

変数名に予約語の一部を使うことは許されていますので、適当な単語をつけて記述するようにするといいでしょう。なお、変数名は大文字と小文字に区別されますので注意してください。

初心者のためのホームページ作り 第24号

JavaScript入門

初心者のためのホームページ作り　第24号