HTML による Web ページ作成の応用 - HTML プログラミング - Webサーバ構築と、PHPを使ったサーバソフトの開発

第２章 HTML プログラミング

2.6 HTML による Web ページ作成の応用

Web ページの基本パターンとして、以下のようなトップページと、ページ切り替えプログラムを作成します。画像は、任意のものを用意してください。

2.6.1 トップページの例です。

 index.html

<HTML>

<HEAD>

<TITLE>初めての Web プログラミング

</TITLE>

<!--

TD{ font:20pt/24px}

H1{ font:24pt/30px;color:red;font-wight:bold;}

-->

</style>

</HEAD>

<BR>

<H1>HTML を使ったトップページのサンプルです。</H1>

<BR>

<TABLE>

<TR>

<TD>

</A>

</DIV>

</TD>

<TD>

<H2><FONT color="black">ページ１に切り替えます。</H2>

</TD>

</TR>

<TR>

<TD>

</A>

</DIV>

</TD>

<TD>

<H2><FONT color="black">ページ２に切り替えます。</H2>

</TD>

</TR>

<TR>

<TD>

</A>

</DIV>

</TD>

<TD>

<H2><FONT color="black">ページ３に切り替えます。</H2>

</TD>

</TR>

<TR>

<TD>

</A>

</DIV>

</TD>

<TD>

<H2><FONT color="black">ページ４に切り替えます。</H2>

</TD>

</TR>

<TR>

<TD>

</A>

</DIV>

</TD>

<TD>

<H2><FONT color="black">ページ５に切り替えます</H2>

</TD>

</TR>

</CENTER>

</BODY>

</HTML>

補足：

画像（300x200）を５枚、page1.jpg～page5.jpg の名前で登録します。

2.6.2 サブページの例です。

 page1.htm

<HTML>

<HEAD>

<TITLE>サブページです。

</TITLE>

<!--

TD{ font:20pt/24px}

H1{ font:24pt/30px;color:red;font-wight:bold;}

-->

</style>

</HEAD>

<BR>

<H1>サブページ１です</H1>

<TABLE>

<TR>

<TD>

</A>

</DIV>

</TD>

</TR>

</CENTER>

</BODY>

</HTML>

補足：

page2.htm～page5.htm は、上記を参考に作成してください。

課題１：

トップページに<MARQUEE>タグを使用して"始めてのトップページ描画です”と表示してください。（描画方法は任意とします。

課題２：

Gif アニメーション画像を作成し、トップページの任意の場所に描画してください。

課題３：

スタイルシートを変更することにより、<H1>タグで表示されている文字列の背景を黒、フォントを白の太字で表示してください。

第３章 JavaScript プログラミング 3.1 JavaScript プログラミングの特徴

Web 環境における JavaScript 言語は、HTML プログラムの中に挿入されるスクリプト言語であり、一般的にはクライアント側のブラウザソフトにより、クライアント側で解釈、実行されるスクリプトです。

但し、ASP（ActiveServerPages）や IIS（InternetInformationServer）等のようなサーバ・ソフトは、

この JavaScript プログラムをサーバ側で解釈し、実行することができます。また、最近では Web 以外でも一般的なプログラム同様に JavaScript を解釈・実行できるものも登場しています。

本編では、クライアント側のブラウザソフトにより解釈・実行されるスクリプト言語に限定して解説するものとします。

このブラウザソフトにより解釈・実行される JavaScript プログラムの主な特徴は以下の通りです。

3.1.1 JavaScript は HTML の中で定義されます

JavaScript プログラムは、HTML プログラムの中に、以下のような<SCRIPT>タグを使って挿入します。また、挿入する場所は、HTML の<BODY>タグの前でも、<BODY>タグと</BODY>タグの間でも構いません。また、

ブラウザソフトは、JavaScript プログラムを検出すると、その部分を順次実行しますので、ページを表示する前処理を JavaScript プログラムで定義したい場合は、<BODY>タグの前に挿入します。なお、JavaScript は HTML と異なり、大文字/小文字を識別しますので、大文字/小文字に注意して記述しなければいけません。

 Java01.html プログラム

<HTML>

<BODY>

<!--

document.write("This part is coded by JavaScript");

alert("JavaScript Confirm");

//-->

</SCRIPT>

<BR>

This Part is coded by HTML

</BODY>

</HTML>

補足１：

JavaScript はバージョンにより提供される機能が異なります。JavaScript のバージョンを規定する場合は、”JavaScript”部分を以下のように変更します。

“JavaScript1.3”

”Jscript”等補足２：

JavaScript プログラムに中で宣言される、””の部分は、JavaScript プログラムを解釈できないブラウザの場合は、この部分をコメントアウトすることを意味します。また、"//"の部分は、ネットスケープナビゲータ用の設定（約束事）です。

補足３：

JavaScript プログラムを実行する場合は、エラーを検出した時に、逐次その内容を表示するモードに設定してデバッグした方が効率的です。設定方法は、インターネットエクスプローラ画面を表示し、

「ツール」⇒「インターネットオプション」⇒[詳細設定]タブ⇒「スクリプトごとに通知を表示する」

をチェックします。また、上記を設定しない場合は、ブラウザのステータスバーに左端に表示されるアイコンをクリックすることによりエラー内容を見ることができます。

3.1.2 JavaScript プログラムのソースの隠蔽

JavaScript で作成されたプログラムは、ブラウザの表示メニュー（ソース）を使って見ることができますが、見せたくない場合の手段として、外部プログラム形式で作成し、HTML プログラムから呼び出すことができます。この場合は、ブラウザの表示機能を使ってもプログラムは見ることが出来なくなります。

 Java02.html プログラム

<HTML>

<BODY>

</SCRIPT>

<BR>

This Part is coded by HTML

</BODY>

</HTML>

 extscript.js プログラム

document.write("This part is coded by JavaScript");

alert("JavaScript Confirm");

補足：

外部ファイルを使えるようにする為には、Web サーバの設定が必要です。但し、Web サーバによってはこの機能を実現することができないものもあります。

3.1.5 JavaScript は全てのブラウザが表示できる訳ではない

JavaScript プログラムは、クライアント側で動作するブラウザの種類やバージョンにより解釈・実行できない場合があります。この対応として、JavaScript プログラム部分を無視させる設定があります。

JavaScript プログラムを解釈できないブラウザソフトに対し、スクリプト部分を無視させるか、別のメッセージを表示させる仕組みがあります。

 Java03.html プログラム

<HTML>

<BODY>

<!--

document.write("This part is coded by JavaScript");

alert("JavaScript Confirm");

//-->

</SCRIPT>

JavaScript is not supported!

</NOSCRIPT>

<BR>

This Part is coded by HTML

</BODY>

</HTML>

補足：

“<!—”と“//”の間に JavaScript プログラムを挿入することにより、JavaScript がサポートされていないブラウザソフトでは、<SCRIPT>から</SCRIPT>までの部分が無視します。その代わりとして、<NOSCRIPT>から</NOSCRIPT>部分のみが実行します。JavaScript をサポートしているブラウザソフトは、<NOSCRIPT>から</NOSCRIPT>部分を無視します。

3.1.4 JavaScript プログラムのコメント表記は、C 言語や Java と同じ

JavaScript には、他の言語同様に、プログラムの中にコメントを挿入することができます。このコメント行はブラウザソフトにより、実際の実行時に無視されます。

 Java0４.html プログラム

<HTML>

<BODY>

<!--

// このラインはコメントです。

/* この部分以降はコメントです。

document.write("This part is coded by JavaScript");

alert("JavaScript Confirm");

この部分までがコメントです。

//-->

</SCRIPT>

<BR>

This Part is coded by HTML

</BODY>

</HTML>

補足：

Java プログラムと同じ構文で、”//”以降に書かれた部分はブラウザソフトにより無視されます。

また、C 言語と同じ構文である、”/*”から”*/”で囲まれた部分は全てブラウザソフトにより無視されます。

3.1.5 JavaScript プログラムは変数定義もできる

JavScript 言語において変数を定義する場合は、“Var xxx;”形式で表現し、型宣言は行いません。

JavaScript では、変数に値が設定された場合に、その内容に応じて、整数型か、文字列型か、浮動小数点型か、論理型等を自動的に決定します。尚、JavaScript が使用している予約語（if,Case、continue 等）

は使用できません。（予約語に関しては専門の参考書を参照ください）以下に変数定義の例（初期値設定付

き）を紹介します。

 Java05.html プログラム

<HTML>

<BODY>

var aaaa=”abcd”;

var bbbb=1234;

var cccc=123.4;

document.write(“aaaa=”,aaaa,”<BR>”);

document.write(“bbbb=”,bbbb,”<BR>”);

document.write(“cccc=”,cccc,”<BR>”);

</SCRIPT>

</BODY>

</HTML>

補足：

aaaa には文字列型で登録され、bbbb には整数型、cccc には浮動小数点型で登録されます。尚、

システムの予約語と一致しない工夫として、アンダースコアと併用（例えば、a_case）することを推奨します。

3.1.6 JavaScript プログラムを作成する上での注意

１） JavaScript 言語では、他の一般的な言語（VB,C,Perl 等）同様に、演算処理構文や制御構文が提供されており、それらを使うことにより、条件により異なった動作をする動的な Web ページを作成することもできます。

２）クライアント側で入力された情報などを、クッキー情報としてクライアント側のハードディスクに登録しておくことができます。この情報は、クライアント側から要求されるページ表示要求に対し、異なる動きをさせる目的等に使われます。

補足：

JavaScript 言語には、上記以外に様々な構文が提供されています。JavaScript プログラミングを効果的に活用するためには詳細な説明書が必要です。その場合は、専用の参考書を入手されることをお勧めします。

ドキュメント内 Webサーバ構築と、PHPを使ったサーバソフトの開発 (ページ 55-64)