JavaScript 入門
「ホームページビルダーｖ６．５」（ＨＰＢ）で、このホームページを作っている。ＨＰＢでは、メニューによってページの中に、ＨＴＭＬ文書だけでなく, JavaScript まで組み込まれる。だから、 JavaScript の知識などなくてもホームページは出来る。
ただ、見映えを変えたい、というとき、また気に入った例を見つけて、自分なりに取り入れたいなどというときには、JavaScript が必ずと言っていいほど関係していることがわかる。JavaScript を知っていれば、ホームページの表現出来る範囲が広がることは間違いない。
ホームページに JavaScript を取り入れ JavaScript が動くホームページを作るとは：
１．ＨＴＭＬで、ホームページの基礎を付ける。
２．ＣＳＳで、ＨＴＭＬ文書にスタイル情報をを付け加える。
３．JavaScriptで、ＨＴＭＬとＣＳＳを操作してダイナミックにする。（ダイナミックＨＴＭＬということです。）
ということである。
JavaScript を調べて得た知識、理解のまとめると：
この JavaScript入門 は、JavaScript に触れ、理解が進むにつれ順次、整理補充している。
まず、「ＪavaScript とは、どんなものか」 というのが、「JavaScript 入門 １」 である。HTMLソースに書き込まれた JavaScript とは、どんなものかということから始まる。
JavaScript 入門 １
（１）JavaScript とは
（２）JavaScript の基本−オブジェクト
（３）HTML の中の JavaScript
（４）JavaScript を HTML に組み込む
ホームページの更新日表示を例にする。
ＪavaScript の イベント、関数、命令文、演算子について、「JavaScript 入門 ２」 として記載する。実際のスクリプトには不可欠なプログラムの処理手続きである。
JavaScript 入門 ２
（５）イベント
（６）関数
（７）命令文
（８）演算子
ＪavaScript が、ＨＴＭＬに働きかける ダイナミックＨＴＭＬ を ｛ダイナミックＨＴＭＬ入門」 として、まとめる。
ダイナミックＨＴＭＬ 入門
（１）ダイナミックＨＴＭＬ と ＤＯＭ
ＤＯＭ（ドキュメントオブジェクトモデル）とは
ダイナミックＨＴＭＬ とは
（２）ＤＯＭ による要素へのアクセス
（３）ダイナミックＨＴＭＬの働き
JavaScript を、先人の例から見よう見まねで作り始めると、先人の例を理解するのにいろいろ調べなければならなかった。その結果を「JavaScript リファレンス」 とする。
HTML＆JavaScript 例 は、ホームページで実行してみようとした例であるが、これらを作り上げるときに自ら納得するために調べた事柄を抜き書きしたものである。
JavaScript リファレンス
（１）オブジェクト、プロパティ、メソッド
（２）ビルトインオブジェクト
（３）イベントハンドラー
（４）命令文
（５）演算
実際に、ホームページに組み込んだ或いは、組み込もうとした例を記載する。
HTML＆JavaScript 例
−−−−−−−−−−−
JavaScript 入門 １
（１）JavaScript とは
（２）JavaScript の基本−オブジェクト
（３）HTML の中の JavaScript
（４）JavaScript を HTML に組み込む
ホームページの更新日表示を例にする。
（１）JavaScript とは
| まずＨＴＭＬ | ||
| HTML は、ブラウザにたいして、文字とか、画像の表示を指示するプログラミング言語の一種である。 ウェブサイトから読み込まれたページのHTML は、ブラウザーで所定の表示を完了すると、そこで終了してしまう。 |
||
| そしてJavaScript | ||
| JavaScript は、ＨＴＭＬの機能を拡張するためのもので、プログラミング言語の一種である。HTML
文書の一部として同時に読み込まれ、HTML と一体になって、ブラウザ上でプログラムとして進行する。 JavaScript では、画面からの働きかけに対し、それに反応させることも出来るし、働きかけなしに、単独で、活動を継続させることも出来る。 |
（２）JavaScript の基本−オブジェクト
| JavaScript には、オブジェクト、 プロパティ、 メソッド、 という概念、用語が使われる。そして、JavaScript で書かれたプログラムは、オブジェクトの集合である。 | |||||
| JavaScript は、オブジェクトの羅列、 オブジェクト オブジェクト ・ ・ である。 |
|||||
| ＪａｖａＳｃｒｉｐｔのプログラム実行の１単位は、オブジェクトである。「オブジェクト．プロパティ」、「オブジェクト．メソッド」の形式で処理を実行する。 | |||||
| 実際には、オブジェクトは、プロパティとメソッドを持ち オブジェクト． プロパティ、 オブジェクト．メソッド、 といった組み合わせで使われる。 | |||||
オブジェクト．プロパティ オブジェクト．メソッド オブジェクト．プロパティ オブジェクト．メソッド で、それぞれがプログラムの１行である |
|||||
| オブジェクト、プロパティ、メソッド とは | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ａ | オブジェクト | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 現実世界の対象物を、環境、挙動、性状などを含めて表現するソフトウェア的なモデル。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| プログラム的には要は，「オブジェクトはブラウザーが表現する要素（機能のかたまり。これは、プログラムの部品）」である。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
プログラムを作成する場合、特定の機能をもつ部品すなわちオブジェクトの集合として書く方法をオブジェクト指向プログラミングといわれ、これに用いられるプログラム言語をオブジェクト指向言語といわれる。 （「JAVA」，「C＋＋」，「VisualBasic」などが該当。） JavaScript は、オブジェクト指向の程度が強くないので、オブジェクトベース言語といわれるようである。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| JavaScript のオブジェクト JavaScript が、扱えるオブジェクトは、以下のようである。 ブラウザー自身が持つオブジェクト （ナビゲーターオブジェクト） ブラウザーの持つ情報、部品を扱う。（階層構造を持っている。○○の△△ というような） ブラウザーが表示するウインドウ、その中に表示する文書、・・・ と JavaScript が定めるオブジェクト （ビルトインオブジェクト） JavaScript に組み込まれているオブジェクト 日付、数学計算・・・ がある。 HTML要素のオブジェクト 別項 ダイナミックHTML入門 DOM（DocumentObjectModel）参照 DOMでは、HTMLのタグ、要素をオブジェクトとして扱う。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ナビゲーターオブジェクト | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Windowオブジェクトを親として、Frameオブジェクト、documentオブジェクトなどが子になる。windowは、省略可能でwindow.document.image の代わりに、document.image で良い。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
window.document.image −−−−＞document.image |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ビルトインオブジェクト | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ブラウザーの持つ情報、部品ではなく、JavaScript が作り出すオブジェクトである。これらは、一般的なオブジェクトからインスタンス（具体例）を作り出して、これで処理をする。 インスタンスの作成は、new 演算子で 行う。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
date=new Date( ) |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ＨＴＭＬ要素のオブジェクト | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ＨＴＭＬ要素に名前を付けて、これをオブジェクトとして扱う。 名前の付け方。 ＮＡＭＥ＝”オブジェクト名” |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ｂ | プロパテイ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| オブジェクトの個々の状態。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| プロパテイは、英語のpropertyで財産，所有物また特質、特性という意味。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| たとえば、画面に情報を表示するdocumentというオブジェクトは、fgColor、bgColorなどのプロパテイをもつ。前者は、Document上の文字の色、後者は背景の色を指定する機能がある。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ｃ | メソッド | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| オブジェクトの動作。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| オブジェクトは、それぞれ、その機能に見合ったいろいろなメソッドをもつ。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| たとえば、documentというオブジェクトの writeメソッド は、ＨＴＭＬで表現されたデータを画面上に表示するメソドである。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 「オブジェクト．プロパティ」 「オブジェクト．メソッド」 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| オブジェクト．プロパティ 例 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| １ | document.fgColor="red" | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| オブジェクト．プロパティ＝値 において オブジェクト：document プロパティ：fgColor 値："red" |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| このように記述すると、画面上に書かれる文字は赤色になる。（実際に文字を画面に書き出すには、別に書き出す記述は必要。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| オブジェクト．メソッド 例 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ２ | document.write(document.lastModified） | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| オブジェクト．メソッド（式、文字など） において オブジェクト：document メソッド：write （式など）：document.lastModified 上の ２ のように記述すると、プロパティdocument.lastModified の値（内容＝ファイルの最終更新日）を画面上に表示する。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ３ | document.write("defgh"） | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| オブジェクト．メソッド（式、文字など） において オブジェクト：document メソッド：write （式など）：文字列 defgh ３ のように記述すると、文字列 defgh を画面上に表示する。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ブラウザーでの表示例 document.write( )の基本的な書き方。 |
||||
| 1 | document.fgColor="red" | 文字色を指定。同一スクリプト内で有効。 | ||
| 2 | document.write("赤字で書く。") | ” ” で文字列を括るのが基本形。 | ||
| 3 | document.write("1+2=",1+2) | |||
| 4 | document.write("1+2="+3); | |||
| 5 | document.write("1+2="+(1+2)); | |||
| 6 | document.write("更新日："+document.lastModified); | |||
| 7 | document.write("更新日：",document.lastModified); | |||
| ブラウザの表示画面 | ||||
| 1 2 3 4 5 6 7 |
赤字で書く。 1+2=3 1+2=3 1+2=3 更新日：06/2/2003 22:18:28 更新日：06/2/2003 22:18:28 |
・ ・ ・"1+2="と 1+2 を「、」でつなぐ。 ・"1+2="と 3 を「+」でつなぐ。 ・"1+2="と (1+2) を「+」でつなぐ。 ・"更新日："とdocument.lastModifiedを「、」でつないでも「+」でつないでも同じ。 |
||
−−−−−−−−−−−−−−−
（３）ＨＴＭＬ の中の JavaScript
| 基本の記述要領 JavaScript は、ＨＴＭＬ の中で動作する。 |
||||||
| HTML 文書の <HEAD> から </HEAD> タグの間、あるいは <BODY> から </BODY> タグの間に JavaScript を記述する。 | ||||||
| <HTML> <HEAD> <script language="JavaScript"> <!-- この間にＪａｖａＳｃｒｉｐｔを書く。 //--> </script> ・・・・・・・・・・ </HEAD> <BODY> <script language="JavaScript"> <!-- この間にＪａｖａＳｃｒｉｐｔを書く。 //--> </script> </BODY> </HTML> |
・HTML開始タグ ・JavaScript開始タグ ・HTML文書のコメント開始 ・HTML文書のコメント終了 ・JavaScript終了タグ HTML本文開始タグ ・JavaScript開始タグ ・HTML文書のコメント開始 ・HTML文書のコメント終了 ・JavaScript終了タグ ・HTML本文終了タグ ・HTML終了タグ |
|||||
| <!-- //--> は、JavaScript を理解できない（動作させられない）ブラウザーが、<script language="JavaScript"> 以下のスクリプトを文字として画面に表示してしまうので、これを防ぐため、コメントにしておく。 | ||||
| コメントの記述 HTML 文書あるいは JavaScript の中に、プログラムとして動作しない注、説明文を入れることが出来る。 |
|||
| HTML 内でのコメント <!-- と //-->の間の文字列は、コメントとしてＨＴＭＬでは無視される。 JavaScript の前後に書く <!-- と //--> は、JavaScript をサポートしていないブラウザで読み込んだとき、JavaScript の記述は、HTML では注として扱われるので無視される。 JavaScript 内でのコメント // ：これが先頭にある行はコメントとなる。 /* と */ ：これらに挟まれた部分はコメントになる。 |
|||
| <script language="JavaScript"> <!-- この間にＪａｖａＳｃｒｉｐｔを書く。 HTMLのコメントとしておくと、JavaScript は、HTMLとしての処理（表示など）がされない。 //--> </script> <script language="JavaScript"> <!-- この間にＪａｖａＳｃｒｉｐｔを書く。ＪａｖａＳｃｒｉｐｔの中で以下はコメントとなる。 // ：これが先頭にある行はコメントとなる。 /* ：これらに挟まれた部分はコメント */ //--> </script> |
・ＨＴＭＬのコメントの始まり ・ＨＴＭＬのコメントの終わり ・JavaScriptのコメント ・JavaScriptのコメント |
||
| JavaScriptの記述例 −コメントの動作例を示すもの− | ||
| ・「コメント入りスクリプト」サンプル | ||
| <!-- ここは、HTML内でのコメント。HTMLでは表示されない。//--> // この記号以下の行は、JavaScript内ではコメント。JavaScriptタグ <script language="JavaScript">・・・</script> の外で、また、HTMLのコメントではないので、HTMLでブラウザー上に表示される。<BR> // 下記スクリプト内の /*〜*/ の文は、HTMLのコメント記号の中に書いたJavaScriptのコメント。JavaScriptとしても動作しないし、HTMLとしてもコメントにされているので、ブラウザー上に表示もされない。 <script language="JavaScript"> <!-- document.write("<BR>") document.write("更新日：" + document.lastModified) document.write("<BR>") document.write("更新日：" + document.lastModified) document.write("<BR>") /* コード document.write("更新日：" + document.lastModified) は、「更新日」に「（このスクリプトが書かれているファイルの）更新年月日」を続けてブラウザーに書き出すということである。<BR> コード document.write("<BR>") は、改行をブラウザーに書き出すという改行のコードである。*/ //--> </script> |
||
| ・「コメント入りスクリプト」サンプルの動作の表示 上記のスクリプトを、ブラウザーで表示させると次のようになる。（<HTML>タグなど、記述してなくて、ＨＴＭＬ文書として不完全であるが、拡張子htmファイルとして保存し、ブラウザーによっては開くことが出来る。） |
||
 |
||
−−−−−−−−−−−−−−−−
（４）ＪａｖａＳｃｒｉｐｔをＨＴＭＬに組み込む
（ａ）更新日の表示１：
| 「ホームページビルダー」（ＨＰＢ）を使って、JavaScript を HTML に組み込む。 | |||
| 「ホームページビルダー」（ＨＰＢ）には、JavaScript を挿入する機能がある。ＨＰＢの「素材」タブの中から「スクリプト」を選びその中の lastupdt.js を挿入する。 以下のように、ＨＴＭＬ文書にＪａｖａＳｃｒｉｐｔ が挿入される。（「ＨＴＭＬソース」タブ画面） |
|||
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=7500"> <TITLE></TITLE> </HEAD> <BODY> <DIV style="top : 68px;left : 97px;position : absolute;z-index : 1;" id="Layer1"> <SCRIPT language="JavaScript"> <!-- document.write("Last updated: ", document.lastModified, "<BR>");/*ＨＴＭＬ本文部のスクリプトタグの間にＪａｖａＳｃｒｉｐｔが記述されている。*/ //--> </SCRIPT> </DIV> </BODY> </HTML> |
|||
| これをブラウザーで見ると以下が表示される。（「プレビュー」タブ画面） |
|||
Last updated: 07/23/2002 23:04:54 |
|||
| 尚、ＨＰＢの編集中のページで、メニューバーから「挿入」−「その他」−「スクリプト」を選択すると、「スクリプト」ダイアログが出てくるが、ここはＪａｖａＳｃｒｉｐｔの作成編集画面である。（ＪａｖａＳｃｒｉｐｔを作り慣れたら利用できるだろう。） |
|||
（ｂ）更新日の表示２
| 参考書などで見つけたサンプルに手を加えたりして、JavaScript を HTML に組み込む。 |
||||||
| ベースになる JavaScript | ||||||
| <SCRIPT language=JavaScript> <!-- //更新日を表示する function stringDate(date) { var year = date.getYear(); if(year < 1900) {year += 1900;} var months = date.getMonth() + 1; var dates = date.getDate(); return year + "/" + months + "/" + dates; } //--> </SCRIPT> <SCRIPT language=JavaScript> <!-- document.writeln("更新日：" + stringDate(new Date(document.lastModified))); //--> </SCRIPT> |
||||||
| HTML に組み込んだ JavaScript | ||||||
| 前半の JavaScript タグは、ヘッド部に、後半の JavaScript は本文部に。 後半の JavaScript は、「ホームページビルダー」（ＨＰＢ）の「ＨＴＭＬソース」タブ画面を使って書き込むと自動的にJavaScript タグは、<DIV >タグでブロック化される。<DIV >タグでブロック化されると、画面上の配置が決められる。 |
||||||
| <!--関数部分はヘッド部に//--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=7500"> <TITLE>Oto-san's home表紙</TITLE> <STYLE type="text/css"> <!--・・・・・・ --> </STYLE> <SCRIPT language="JavaScript"> <!-- //更新日を表示する function stringDate(date) { var year = date.getYear(); if(year < 1900) {year += 1900;} var months = figures(date.getMonth() + 1, 2); var dates = figures(date.getDate(), 2); return year + "/" + months + "/" + dates; } //--> </SCRIPT> </HEAD> |
||||||
| <!--関数実行部分は本文部に。//--> <BODY background="bu04_bg_n1.GIF" bgcolor="#99FFCC" text="#006666" alink="#CC3366"><DIV style="top : 22px;left : 628px;position : absolute;z-index : 2;" id="Layer11"> <DIV style="top : 114px;left : 18px;position : absolute;z-index : 2;width : 212px;height : 32px;" id="Layer5" class="Class1"> <SCRIPT LANGUAGE="JavaScript"> <!-- document.writeln("更新日：" + stringDate(new Date(document.lastModified))); //--> </SCRIPT><BR> <B><A href="fr1hyousi_2.htm" target="right">更新履歴</A></B> </DIV> </BODY> </HTML> |
||||||
|
||||||
(2003.7.10 rev)
(2003.5.0 rev)
(2003.4.13 rev)
(2002.8.7)
