（１０）動きのあるページ･デザイン（ＪａｖａＳｃｒｉｐｔ）

　　
ホームページに動きを付けるとは
もともとHTMLは文書の構造を定義するものとして登場し、その表現形式は当然静的なものでした。
所が、近年のＡＤＳＬや光ファイバー技術といった高速通信の技術とあいまって、ホームページに動きを持たせたり、対話的要素を加えることによって目立たせようという需要が高まって来ました。

この機運に沿って考案された最も簡単なものは、マーキー（ＭＡＲＱＵＥＥ）タグを使って文字列を左右や上下に動かす技術で、インターネット・エクスプローラー等の新しいバージョンでサポートされています。ホームページ・ビルダーではメニュー・バーの「挿入」から→「その他」→「マーキー」と行うことによって簡単にマーキー・タグとその属性を設定することが出来ます。

もう一つの流れは、ＪａｖａＳｃｒｉｐｔというオブジェクト指向の記述言語を使って、ＨＴＭＬ頁に拡張機能としての様々なアクション付けるというものです。然しながら、JavaScriptのプログラミングはこの教室の読者の技術レベルを超えるものと思われますので、ここでは各種ホームページ作成ソフトによって生成される機能を紹介し、出来ればインンターネットから無料でダウンロードしたり、素材ライブラリーより得られる既製のＪａｖaScriptコピーを自分流に微調整して導入出来るレベルるに資せればと期待しています。
ＪａｖａＳｃｒｉｐｔによる拡張機能の例
ホームページ・ビルダー、Ｇｏｌｉｖｅ、Dreamweaver等といったホームページ作成ソフトには、Ｊａｖａ Ｓｃｒｉｐｔの知識がなくても比較的簡単にこのようなアクションを伴う拡張機能を生成する手立てが用意されています。その幾つかの例を以下に挙げますと：
（１） スライド・ショウ
ホームページ・ビルダー１１では、メニュー・バーの「挿入」→「画像の効果」→「スライド・ショウ」という操作でこのＪａｖａＳｃｒｉｐｔを生成することが出来ます。しかし、画像の表示位置を自由に設定できないなど、この生成機能は余り便利とは言えません。Ｇｏｌｉｖｅなどのより高度なパッケージでは可也フレクシブルなスライ・ドショウを比較的簡単に実現出来ます。
（２） パスワードによるアクセス制限
ホームページ・ビルダー１１では、メニュー・バーの「挿入」→「リンク」→「パスワード付きリンク」で比較的簡単に実現出来ます。
（３） スライド・ウィンドウ
ホームページ・ビルダー１１ではこの機能はまだ用意されていないようですが、Ｇｏｌｉｖｅなどのより高度なパッケージでは、新しいブラウザー・ウィンドウを開いて、そのウィンドウの中央に指定した画面をスライドさせて表示するものです。
（４） ２−フレーム・ターゲット
一つのハイパー・リンクのクリックで同時に２つのフレームに異なった頁を挿入させることが出来ます。残念ながら、ホームページ・ビルダー１１ではまだこの機能は用意されていません。
ＪａｖａＳｃｒｉｐｔの仕組みの概要
先にも触れましたように、この教室の目的は必ずしも読者にプログラミングの技術を教えるものではありませんので、ここでは既成のＪａｖａＳｃｒｉｐｔを利用したり、極簡単なＳｃｒｉｐｔを導入したりする為に必要な基礎的なバックグラウンドを解説するレベルに留めます。
ＪａＶａＳｃｒｉｐｔを記述する場所

　　　ＪａｖａＳｃｒｉｐｔを組み込む場所に関しては、以下のように３種類の方法があります。
    （Ａ）　ＨＴＭＬファイルのＢｏｄｙの中に直接記述する場合
　　
　　例：　
　　　<html>
　　　　　<head>
　　　　　</head>
　　　　　<body>
　　　　　　　<script language="JavaScript">
　　　　　　　　<!--
　　　　　　　　　・・・
　　　　　　　　　// -->
　　　　　　　　</script>
　　　　　　　・・・
　　　　　　　<img src="blue.gif"onmouseover="this.src='red.gif'"
　　　　　　　　　　　　　　　　　　　　onmouseout="this.src='blue.gif'">
　　　　　　　　<!--　マウスを画像に載せている間は「red.gif」という画像を表示し、
　　　　　　　　　離すと「blue.gif」に戻す動作をさせる 　-->
　　　　　　　・・・
　　　　　</body>
　　　</html>

（Ｂ）　ＨＴＭＬファイルのHeadの中に記述する場合
　　　
　　　例その１（一般にその頁がダウンロードされた時に作動する場合）
　　　<html>
　　　　　<head>
　　　　　　　<title>挨拶文をを表示させる</title>
　　　　　　　<script language="JavaScript">
　　　　　　　　　<!--
　　　　　　　　　　　  　window.alert("ＨＰ同好会の皆さん　今日は");     //　挨拶文
  　　　　　　　　　// -->
　　　　　　 　</script>
　　　　　</head>
　　　　　<body>
　　　　　</body>
　　　　</html>

　　例その２（関数を使ってＨｅａｄの中にＪａｖａＳｃｒｉｐｔを纏める場合）
　　　<html>
　　　　　<head>
　　　　　<title>挨拶文をを表示させる</title>
　　　　　　 <script language="JavaScript">
　　　　　　　<!--
  　　　　　　 　　function="Greeting()" {
　　　　　　　　　　　 window.alert("ＨＰ同好会の皆さん　今日は");     //　挨拶文
　　　　　　　　　　　}
　　　　　　　//-->
　　　　　　　</script>

  　　　　　　// -->
　　　　　 　</script>
　　　　　</head>
　　　　　<body>
　　　　　　<p align="center">
　　　　　　<a href="JavaScript: Greeting()">ここをクリック</a> 　　//　関数のＪａｖａＳｃｒｉｐｔ　にリンク
　　　　　　</p>　
　　　　　</body>
　　　　</html>

（Ｃ）　外部の拡張子｢*.js｣のファイルにＪａｖａＳｃｒｉｐｔを記述する場合

　　　　例
　　　　<html>
　　　　　　<head>
　　　　　　　　<title>外部ＪａｖａＳｃｒｉｐｔファイルの利用</title>
　　　　　　　　<script language="JavaScript" src="***:.js">
　　　　　　　　</script>
　　　　　　</head>
　　　　　　<body>

　　　　　　</body>
　　　　</html>　

　　　　”***.js”には<SCRIPT>タグの中身だけ記述します。
　　　　 <SCRIPT>、</SCRIPT>は必要ありません。
　　　　複数ページから読み込まれる汎用スクリプトの使用に便利です。
　
Ｏｂｊｅｃｔ指向のプロゴラミング

　　　ＪａｖａＳｃｒｉｐｔはＣ＋＋やＪａｖａと同じ様にＯｂｊｅｃｔ指向のＳｃｒｉｐｔ言語で：
　　　Oｂｊｅｃｔ（物）を中心としてそのＭｅｔｈｏｄ（操作）とＰｒｏｐｅｒｔｙ（属性）を規定することによって
　　　プログラムを構成するように出来ています。
   ■ navigatorオブジェクトと windowオブジェクトの階層構造
MimeType
navigator
Plugin

Elemant/Button
Applet Elemant/Checkbox
Frame Anchor Elemant/FileUpload
history Area Elemant/Hidden
window
document Form Elemant/Password
location Image Elemant/Radio
Link Elemant/Reset
Elemant/Text
Elemant/Textarea
Elemant/select option


wｉｎｄｏｗオブジェクトは現在使っているウェブ・サイトを表し、dｏｃｕｍｅｎｔオブジェクトはその中で現在表示されているウェブ・ページの文書を表わします。そのページの中にＦｏｒｍやＩｍａｇｅなどのオブジェクトがあります。
従って、現在使っているページは：
　　　wｉｎｄｏｗ.dｏｃｕｍｅｎｔ
と表現しますが、wｉｎｄｏｗは全てのオブジェクトの親なので通常は省略して：
　　　dｏｃｕｍｅｎｔ
だけでもよいことになっています。
■
ビルトインオブジェクトと一般のオブジェクト
ビルトインオブジェクトとは、JavaScriptで以下のようなあらかじめ定義されているもので、宣言なしで使用することができます。
Array Boolean Date Event Function Math
Number Object RegExp screen String
    これに対してユーザー独自のオブジェクトは：
　　　　　myDate=new Date(); 　　//　独自のオブジェクトmyDateを宣言し、その中に今日の日付を入れる
　　　　　　または
　　　　　num= 10;　　　　　　　　　　//　独自のオブジェクトnumを宣言し、その中に数字１０を入れる
のようにユーザー自身で宣言しなければなりません。
■ ObjectのMethodとProperty

Method：はObjectへの操作命令で、次のように書きます：

　　　オブジェクト名．メソッド名（パラメータ）

　　例：
　　　　　<head>
　　　　　　<title>Dateオブジェクト</title>
　　　　　　<script language="JavaScript"><!--

   　　　　　　dt=new Date();                     //　Dateオブジェクト生成
   　　　　　　h=dt.getHours();                   //　時間を得るメソッド
   　　　　　　m=dt.getMinutes();               //　分を得るメソッド
  　　　　　　 s=dt.getSeconds();               //　秒を得るメソッド
  　　　　　　 alert(h+"時"+m+"分"+s+"秒");   //　表示

　　　　　　　// --></script>
　　　　　</head>
　　例：
　　　　　window.alert("ＨＰ同好会の皆さん　復習しましょう");  　// ＯＫボタンを含む警告ダイアログを書き出す
　　　　　　又は
　　　　　window.write("ＨＰ同好会の皆さん　今日は");  　　　　　// ウェブ・ページの中に直接メッセージを書き出す

Property：はObjectの情報を参照したり設定することができ、次のように書きます：

　　　　オブジェクト名．プロパティ名　　　　　　（注）Property名の後に（）を書きません

　　例：
　　　　navigator.appName　　　　　・・・アプリケーション名
　　　　navigator.appVersion　　　 ・・・ブラウザのバージョン
　　　　document.bgColor　　　　　・・・ページの背景色
　　　　document.fgColor　　　　　・・・ページの文字色
　　　　document.fileCreateDate ・・・ファイル作成日
　　　　document.title　　　　　　　・・・ページタイトル
　　　　screen.width　　　　　　　　・・・モニタの横幅
　　　　screen.height　　　　　　　 ・・・モニタの縦幅
変数と配列と演算子
■ 変数：

変数とは数値や文字列、真偽値、オブジェクトなどを代入して、計算や表示、オブジェクトの指定などを行うプログラミングにはなくてはならないものです。

　　例：
　　　　　<script language="JavaScript"><!--
   　　　　　　ｎ=10;                          //　nに10を代入
   　　 　　　　window.alert(ｎ)

   　　　　　　ｃ="文字列の場合";　　//　ｃに文字列を代入
   　　　　　　　window.alert(ｃ);
　　　　　　// --></script>
 
■ 配列（Ａｒｒａｙ）：

配列は「Array」オブジェクトを使い、一つのオブジェクトで複数の変数を包含し表現できるプログラミングにとっては大変便利なものです。
　例：
　　　 配列名=new Array()　　　　　　　　　　　 ・・・配列の宣言
　　　　 配列名=new Array(e1,e2,e3,・・・,en)　　・・・直接代入する場合
　　　　 配列名=[e1,e2,e3,・・・,en]　　　　　　　　 ・・・new Array()を省略して直接代入する場合
　　　　 配列名=new Array(n)　　　　　　　　　　・・・この場合はn個の配列を宣言する
　　　　 配列名 ["Str"]=e　　　　　　　　　　　　　・・・[ ]内に文字列を使用することもできます
　　　　 nは配列の要素数。e,e1,e2,e3,・・・enは配列の要素。同じ配列の要素に数値や文字列を混在させることも可能。　
　　　　　
■ 演算子の種類：

+
-
*
/
%
++var
var++
--var
var--
&
|
^
~
!
<<
>>
>>>
+=

加算
減算
乗算
除算
剰余
インクリメント
〃
デクリメント
〃
AND
OR
XOR
NOT
否定
左シフト
右シフト
0埋め右シフト
複合代入演算子





割り算の余り
代入前に1加算　　++a
代入後に1加算　　a++
代入前に1減算　　--a
代入後に1減算　　a--
ビット演算は４バイト整数と見なす






a+=1・・・a=a+1　　a*=5・・・a=a*5
イベントとイベント・ハンドラー

　　ＪａｖａＳｃｒｉｐｔの特徴の一つに対話的な操作表現があります。この対話的操作がイベントで
　　そのイベントを起こす為のタグがイベント・ハンドラーです。
■イベント・ハンドラーの代表的なものは：
　　　
onClick　・・・・・・・・・・マウスがクリックされた時
o onMouseover　・・・・マウス・カーソルがオブジェクトに重なった時
 onMouseout 　・・・・・・マウス・カーソルがオブジェクトから離れた時
 onLoad　・・・・・・・・・・・ページが読み込まれた時
onUnload　・・・・・・・・・他のページに移動する時
onSubmit　・・・・・・・・・フォームがサブミットされた時
 onChaange　・・・・・・・フォームの内容が変更された時
■ イベント・ハンドラーの使い方の例：
　
　画像をクリックした時にアラート表示させる、

　　　　　<img src="picture.gif" onClick="alert('画像がクリックされました')">

　リンクをクリックした時にアラート表示させる、

　　　　　<a href="#" onClick="alert('リンクがクリックされました')">
　　　　　（リンク先の"#"はダミーでこのページの一番上に飛ぶように指定しています）

　テキストにマウスを重ねた時にアラート表示させる、

　　　　　<div onMouseover="alert('文字とマウスカーソルが重なりました')">文字</div>

　ページ読み込み時にアラート表示させる、

　　　　　<body onLoad="alert('Ｗｅｌｃｏｍe to our site！')">

　他のページに移動する時にアラート表示させるには、

　　　　　<body onUnload="alert('Good bye and visit again')">

　画像をクリックした時に、何かの動作（例として現時間を表示）をさせる関数を実行させる、

　　　　　<img src="picture.gif" onClick="JavaScript: showTime() "name="image_object_name">

　　　　　　この場合、このページのＨｅａｄの部分にshowTime という関数を作っておく
　　　　　　"name="image_object_name"で指定したＯｂｊｅｃｔ名はＪａｖaScript関数内で使える

　イベント・ハンドラーの代わりに<a>・・</a>を使ってＨｅａｄの部分の関数を呼び出すことも出来る,

　　　　　<a href="JavaScript: showTime（）">現時間を表示する</a>

　Ｈｅａｄの部分の関数の書き方は、
　
　　　　　<head>
　　　　　　　<title>現時間を表示させる</title>
　　　　　　　　　<script language="JavaScript"><!--
　　　　　　　　　　　function showTime() {
   　　　　　　　　　　　dt=new Date();                     //　Dateオブジェクト生成
   　　　　　　　　　　　h=dt.getHours();                   //　時間を得るメソッド
   　　　　　　　　　　　m=dt.getMinutes();               //　分を得るメソッド
  　　　　　　 　　　　　s=dt.getSeconds();               //　秒を得るメソッド
  　　　　　　 　　　　　alert(h+"時"+m+"分"+s+"秒");   //　表示
　　　　　　　　　　　　  }
　　　　　　　　　// --></script>
　　　　　</head>
既製のＪａｖａＳｃｒｉｐｔの利用
JavaScriptのコードを自分で始めから書いて働かせることは普通のウェブ作成者には中々手ごわい作業です。従って、この教室の読者にはインターネットから無料でダウンロード出来るサンプルを利用することをお勧め致します。　
導入にあたっては、ダウンロードしたコピーを若干修正しなければなりませんが、このレッスンはその為のバックグランドなることを期待して用意されました。

また、ホームページ・ビルダー等のホームページ作成ソフトウェアには素材ライブラリーに２０余りの便利なＪａｖaScriptのサンプルが用意されていますので、それらを挿入して利用するのも良い方法だと思います。

サンプルを挿入するには：
（１）ＪａｖaScriptを導入したいウェブ・ページを開き、挿入したい場所をクリックしておく
（２）｢表示｣メニュー　→　｢素材ビュー｣　→　＜右側に素材ビューを表示＞　→
　　　＜素材ビューの上の窓で”スクリプト”を選択＞　→　
　　　＜素材ビューの下の窓で求めるサンプルを選択＞　→　
　　　＜素材ビューの下段の｢挿入｣ボタンをクリック＞　→　＜ウェブ・ページを保存＞　→
　　　＜プレビュー・モードにして、動作確認をする＞
ホームページ・ビルダー１１に含まれているＪａｖaScriptのサンプル・リスト
番号 ファイル名 動　　作
１ c_statusblink.js ステータス・バーにメッセージを点滅表示する
2 c_statusmsg.js ステータス・バーにメッセージを示する
3 c_statusscroll.js ステータス・バーにメッセージをスクロール表示する
4 c_statustype.js ステータス・バーにメッセージを一字ずつ表示する
5 c_textblink.js ウィンドウ内に枠が表示され、その枠内にメッセージを点滅表示する
6 c_textscroll.js ウィンドウ内に枠が表示され、その枠内にメッセージをスクロール表示する
7 c_textsize.js ウィンドウ内にメッセージを表示し、そのメッセージを変化させるボタンを
表示する。ボタンの種類は｢Large｣｢Medium｣｢Small｣｢Red｣｢Black｣があり、
それぞれのボタンをクリックするとメッセージが変化する
8 c_texttype.js ウィンドウ内に枠が表示され、その枠内にメッセージを一字ずつ表示する
9 d_clock.js ウィンドウ内に枠が表示され、その枠内に時間を表示する
10 d_date.js ウィンドウ内に日付を表示する
11 d_presenttime.js ウィンドウ内にホームページにアクセスした時間を表示する
12 i_appname.js ウィンドウ内にホームページを閲覧しているブラウザの種類を表示する
13 i_browser.js ウィンドウ内にホームページを閲覧しているブラウザの情報を表示する
14 i_document.js ウィンドウ内にボタンが表示され、ボタンをクリックするとページの情報
（タイトル等）を小さなウィンドウで表示する
15 i_lastupdt.js ウィンドウ内に最終更新日を表示する
16 i_platform.js ウィンドウ内にＰｌａｔｆｏｒｍの種類を表示する
17 m_alert.js メッセージ・ウィンドウを表示する
18 m_click.js 右クリック禁止のメッセージを表示する
19 m_confirm.js ウィンドウ内にボタンが表示され、ボタンをクリックするとメッセージ・
ウィンドウが表示され、「ＯＫ」するとリンク先へジャンプする
20 m_selectbox.js ウィンドウ内にリスト・ボックスが表示され、それぞれの項目をクリックすると
リンク先へジャンプする
21 w_bgchange.js 背景色をランダムに変更する
22 w\close.js ウィンドウ内に「閉じる」ボタンを表示する
23 w_goback.js ウィンドウ内に「戻る」「進む」「更新」ボタンを表示する
24 w_move.js ウィンドウ内に上下、左右に動かすボタンを表示する
25 w_resize.js ウィンドウ内にウィンドウを大きくしたり、小さくしたりするボタンを表示する