最終更新日
最終更新日
|
|
|
[関連ページ] JavaScriptの基本 変数、配列、繰り返し、関数、フォーム、イベントハンドラ、オブジェクト。 JavaScript応用1 DOMとstyleの変更。 JavaScriptのプログラム 学生向けにまとめたページ。
JavaScript応用1に続き、ホームページに動きを与えるダイナミックHTMLを説明しますが、スタイルシートの書き換えではなく、直接、DOMの子ノードを書き換えるとか、DOMを中心にします。
2章では、画像の説明ではなく、文字列の場合にinnerHTMLを使って、説明を書き換えるものです。アンカータグ(<A HREF=" "....>)を使ったりするところが面白いかもしれません。
3章は、DOMの解説を一歩勧めて、DOMのノード についてです。XMLも含めて、今後の大きな方向でしょう。
4章では、画像の説明を出すという例を、innerHTML を使って行ったものです。JavaScript応用1の 2 CSS,DOMとダイナミックHTML では、スタイルシートの書き換えでやりましたが、写真説明を直接書きこむというシンプルなやり方です。
5章 では、JavaScript 基本ではフォームを使った「おみくじ」をDOM、innerHTMLでやります。余興で、実際にひいた神社の「お告げ」の画像へもリンクしてみました。
6章は、最終更新日の表示を外部関数 で行うものです。その中で、やはり、innerHTMLを使っています。
7章は、Web上でみかけたJavascriptに関する参考例をあげます。
8章[余談]は、JavascriptとJavaの違い、発展史と今後の展望などについて述べます。
「基本」編で紹介した例題中心の「ホームページに今すぐ活かせるJavaScript」(インプレス 2000/11)と、
辞典的に整理された本として「HTML&CSS&JavaScript辞典」(秀和システム 2001/12)を引き続き参考にしつつ、
Web上のホームページも参照させていただきます。
DOMそのものの説明をしますが、その一部にDOMを使ってやりましょう。ひとつは、文書に対して、document.getElementById('text').innerHTMLを利用したもの、もうひとつは、3章のノードを使うものです。
DOMは、W3Cが1998年10月に Level として出していますが、その年の2月に出たXML1.0のプログラミングモデルです。そして、2000年11月に Level2、現在はLevel3がワーキングドラフトになっているそうです(XML magazine 2002winter「XMLの過去と未来」による)。
2002年1月に、このページを最初にアップした頃は、大型書店のコンピュータ関係の棚には「XMLとJAVA」関係の本があふれかえる盛況でした。企業などでいろんな文書をコンピュータで処理するには、HTMLでは、拡張性、階層構造、妥当性の点で不十分であるとして、XMLが登場してきました。2001年4月に XHTMLというのも出ていますが、XMLは個人のホームページで使う必要があるようには思えません。
DOMはXML、HTML文書をツリー構造として扱い、文書内の各要素をオブジェクト として操作できるように定めた仕様、JAVAに限らず、いろんな言語から、文書の中の各要素にアクセスできるインターフェース を提供するものです。JavaScriptからも、DOMを通してHTML文書の各要素をID指定して、オブジェクトとして操作できるわけです。
かっては、http://www.janit.com/xml/DOM/dom1.html にあったのですが、残念ながら、2003/10には、リンクが切れていた「Level 1 DOM -入門」の説明と例は面白い。
一部、その要旨を拝借して、DOMを使って書き換えてみましょう。下記をクリックしてください。
これは、下記のように「DOM の目的」という文字列をID="dom"で指定しておいて、それがクリックされると、domexplain()という関数に行くようにしているだけです(onclick="domexplain()")。
文字列が目立つように、A HREF="javascript:;"としていますが、javascript:;はおまじない、onclickでとばすときには、"#"でも、""と、空白でもいいようです。
なお、style以下は、引用であることをはっきりさせるために、色を変え、左右のマージンも大きくとっています。
<DIV ID="dom" style="color:navy; margin-left:20%; margin-right:20%;"><A HREF="javascript:;" onclick="domexplain()">DOM の目的</A></DIV>
スタイルシートの書き換えにDOMを使う場合なら、「DOM の目的」のところに、引用の文章をもってきて、最初はvisibility:hiddenとしておいて、関数でvisible に変えるところです。
呼ばれる関数は
function domexplain() {
var str1="「DOMとはドキュメントオブジェクトモデル........document 自身とどのように関連するのかを記述するモデルです。」(DOM -入門より)";
document.getElementById('dom').innerHTML = str1;
}
画像のときと違って、書き換えられる位置を問題にする必要は全くありません。
上記は2002/1/25に書いたものですが、この手法は、すでに、JavaScript基本の5 16進数変換・文字コード の3節、16進数を10進数に変換するプログラムの中で、途中経過を出力するために利用しています。その中に書いたことですが、innerHTMLは、idで指定したhtmlのオブジェクト(DOM=Document Object Model) のプロバティのひとつで、idで指定されたタグ内のテキストの代入/取得を行うもので、head部分に書くときは、document.write()が使えないので、助かります。
このあとの写真説明、「おみくじ」、最終更新日の例もすべて同じ手法をつかいます。
「ホームページに今すぐ活かせるJavaScript」P113には、ノードを使ったちょっと面白い例がありました。
概要説明に、「DOMでは指し示す単位をNodeといい、childNodesはgetElementByIdで指したノードの子、つまり、そのIDの何番目のNode(単位)かを指示する。そのIDのタグのすぐ後にあるNodeを変更する場合はchildNodes[0]と書き、その中身を表すプロパティがnodeValueである」とありました。
リンクの切れた「Level 1 DOM -入門」から、ノードの説明をしている部分をchildNodesとnodeValueを使って、書き換えましょう。下記(引用文)の「2つのノード」のところをクリックしてください。
「DOM はドキュメントオブジェクトモデル、つまり、文書の様々なオブジェクトが互いにどのように関連しているのかを記述するモデルです。Level 1 DOM では、個々のオブジェクトは、それが何であれ、Nodeです。そのため、次のようにすると
<P>This is a paragraph</P>
2つのノード を作ったことになります。テキストノードは要素の内部にあります。そのため、これは、要素の 子供ノードと考えられます。」
<A HREF="javascript:chText('2つのノード(要素 P と This is a paragraphという内容のテキストノード)')"><SPAN ID="tx">2つのノード</SPAN></A>
と、文章の一部分「2つのノード」を<SPAN ID="tx">タグでID指定し、その「2つのノード」がクリックされると、関数chText('2つのノード(要素 P と....'))へ飛びます。
関数は、
function chText(myText){
document.getElementById('tx').childNodes[0].nodeValue=myText;
}
ID="tx"の要素の子ノードが引数で渡される(書き換えられる)文章になるということでしょう。
childNodes[0]は、firstChildでもよさそうです。また、childNodes[0].nodeValueは
2章で使ったinnerHTMLの働きに相当しているようですが？
「DOM -入門」には、上記のような要素の子供のテキストノードの変更のほか、ノードの属性の変更、setAttribute()、自分でノードを作る 方法createElement()とappendChild()、削除 removeChild()も、実際に動くようにして説明されています。
そして、「新しい DOM は、文書内の好きなものを変更する驚くほどの自由を提供しています。古き良き DHTML は、これまで通り、要素ノードの style プロパティーにアクセスすることによって行なうことができます。document.forms[] や document.images[] などの古代のオブジェクトもまだ存在しています。しかし、はじめて、実際に、自分の HTML 文書をその場で書き換えることができるようになりました。これは本当に刺激的な新機軸です。」と結論づけられています。以下、それを確かめてみましょう。
前編「JavaScriptの応用」では、写真の上に説明を出す方法として、スタイルシートで最初は隠していた説明文を画像にマウスがかかったら、スタイルシートのvisibilityを非表示から表示に変えて、その説明文を出すということをやりました。
「ホームページに今すぐ活かせるJavaScript」のCD=ROMにあった例(\script\message\dom_message\index.txtにソースと説明がある。)
「マウスがリンク文字上に乗ったら画面上に文字を表示」であるが、innerTextというプロパティを使っており、画像でも同じことができるとみて、これぞびったりかとトライ。
本のfunction domMsg(str){document.all["myLAY"].innerText = str;} を
function domMsg(str){document.getElementById('photo3').innerHTML = str;} と変更(photo3はID指定)。
画像のところには、onMouseover="domMsg('庭のテッセン')" onMouseOut="domMsg(' ')" とする。さらに、<DIV ID="photo3" class="photo"></DIV>を追加。
このままでは、やはり写真説明を表示するx座標の位置がおかしいので、あらかじめ、class指定した"photo"で、left:950pxとしておきました。写真は右寄せ、横が1024ピクセルのディスプレイ画面にはちょうどいいのでてすが、もっと大きいときは、大きくした方がよさそうです。y座標の方は何もしなくて平気です。
document.getElementById('photo3').styleとしておいて、それを変えるというJavaScript応用1の2章と違って、document.getElementById('photo3').innerHTML に直接、文字列(ここでは'庭のテッセン'という写真説明)を代入するという、もっと直接的な手法がここでのポイントです。全然簡単になりました。
JavaScript応用1の2章、7章と、最初に取り組んだ、写真説明はさんざん、苦労したあげく、ようやく、まがりなりにも形になりました。
JavaScript 基本ではフォームを使ったおみくじ・さいころの目 の「おみくじ」の方をDOMでやります。JavaScript基本の3章と同様、配列と乱数を使って、判定した結果をフォームに返すのではなく、DOMを使います。ついでに、大吉とか小吉が出ると、その該当文句だけをやはりDOMを使って表示するようにします。
実例は おみくじ でどうぞ。プログラムは一部省略しますが、下記に。
<html><head>
<title>おみくじ</title>
<META HTTP-EQUIV="content-style-type" CONTENT="text/css">
<LINK REL="STYLESHEET" TYPE="text/css" HREF="../../style.css">
<script type="text/javascript">
<!--
var omikuji = new Array("大吉","吉","小吉","小凶","凶","大凶");
function Hantei() {
var i = Math.floor(Math.random()*6)
document.getElementById("unsei").innerHTML=omikuji[i];
// unsei.innerText=omikuji[i]; IEならこれでもよい。
switch (i) {
case 0: document.getElementById("unsei2").innerHTML="すべてうまくいくが、調子に乗らぬこと"; break;
case 1: document.getElementById("unsei2").innerHTML="小さな喜び事あり。争いを避けること"; break;
case 2: document.getElementById("unsei2").innerHTML="これからが肝心。今の調子でがんばれ"; break;
case 3: document.getElementById("unsei2").innerHTML="思わぬところに落とし穴が。用心すべし"; break;
case 4: document.getElementById("unsei2").innerHTML="何事も辛抱"; break;
case 5: document.getElementById("unsei2").innerHTML="今が最悪期。これから徐々に運が上向く"; break;
}
}
//-->
</script></head>
<body style="background:#eeffff;">
<h1>おみくじ</h1>
<form name="myform">
<p style="color:red;font-size:large;">
今日の運勢:<input type="button" value="さて?" onclick="Hantei()"></p>
</form>
<p id="unsei" style="color:red;font-size:large;"></p>
<p id="unsei2" style="color:green;font-size:large;"></p>
</body>
</html>
id="unsei"で指定した段落に、document.getElementById("unsei").innerHTML= omikuji[i] で、配列 omikuji の大吉とか小吉とかという文字がはいり、id="unsei2" で指定した段落には、switch case による分岐で、説明文が直接出るしかけです。getElementById(オブジェクト名)で、idで指定した部分のhtml文そのものがオブジェクトになるということです。
なお、IE には、innerHTMLに相当するものに、innerTextというのもあり、上記に、コメント行で入れているように、document.getElementById("unsei")の代わりに、簡単に、unsei.innerText ないし、unsei.innerHTML とするだけでよいのですが、Netscapeでは働かないので、使わないことにします。
余興で、実際にひいた、神社の御神籤 の画像へもリンクしてみました。JavaScriptで、おみくじのページを作ろうと思ったら、急におみくじの「お告げ」に、興味がでて、あちこちで引いてみました。
2004年1月1日の0時半頃、近くの神社で引いたのは2本とも、大吉!!
私は全てのページの冒頭に、最終更新日を表示しています。documentオブジェクトに、lastModifiedという、html文書の最終更新日を返すプロパティがあるから、できることです。12/18/2003/23:59:59のような形式で、最終更新月日、時刻を返してくれます。
秒単位まで表示するのはわずらわしいと、最初、document.write("最終更新日:" + document.lastModified.substring(0,10))として、年月日のみを取り出していました。substring(0,10)は、0番目から9番目までの文字列を取り出すStringオブジェクトのメソッドで、document.lastModifiedという文字列(Stringオプジェクト)に適用すると、ちょうど、12/18/2003 となたます。
このたった1行、やっていることは地味なもの、しかし、JavaScriptならではのもの。この1行にも秘められているオブジェクト、メソッド、さらにはプロパティなる概念を理解しない限り、今はどんなプログラム言語も使えません。さらに、DOMにより、HTML文書内の全てをオブジェクトとして、JavaScriptなどの操作対象にできる方向へと発展してきています。
しかし、上記の欧米流表記より、我々になじみのある形で出力するように、多少凝って、かつ、あちこちのページで使いたいので、外部関数としてみました。拡張子はjs。
<SCRIPT LANGUAGE="JavaScript" SRC="../kousin.js"></SCRIPT>
<td ><P ID="kousin" onMouseover="kousin()">最終更新日</P>
これが2章の文字列版というべき処理で、マウスが文字列にのると、外部関数kousin()にとばします。そこでは、処理した内容を直接innerHTMLに代入することで、kousinということでID指定したところへ書き出すというものです。
なお、外部関数は、下記のように、関数部分のみを書き、拡張子jsで保存します(kousin.js)。
function kousin() {
var str;
var lastday=document.lastModified;
if (navigator.appName.charAt(0)=="N") {
str=lastday;
} else {
var year = lastday.substring(6,10);
var month = lastday.substring(0,2);
var day = lastday.substring(3,5);
str = "最終更新: " + year + "年" + month + "月" + day + "日";
}
document.getElementById("kousin").innerHTML = str;
}
この方法では、IEとNNはlastModifiedの出力がまったく違い、substring(0,10)はIEに有効で、更新の時間、分、秒と細かいところはカットするというだけですが、Netscape(NN)では、substring()は使わない方がいいとしたのですが、動かないことが分かりました。
下記は、JavaScriptによるMidiの処理でも教わった、パソコン通信、Niftyのホームページ作成上級フォーラムFHPEXPの#11会議室で、02/1/27で平井さんに教わったものです。
function kousin() {
var lastday = new Date( document.lastModified );
var year= lastday.getYear();
if (navigator.appName.charAt(0)=="N") {
year=year+1900;
}
var month= 1 + lastday.getMonth();
var day = lastday.getDate();
var str = "最終更新: " + year + "年" + month + "月" + day + "日";
document.getElementById("kousin").innerHTML = str;
// document.getElementById("kousin").childNodes[0].nodeValue = str;
}
document.lastModified という文字列を引数にして、new演算子を使って、Dateオブジェクトをを作り、そのメソッド、getYear(),getMonth(),getDate()を使って、年、月、日を取り出しています。こちらは、NNでも動き、私はこちらを採用しています。
なお、NNの場合の年度は1900年を基準にしているので、if (navigator.appName.charAt(0)=="N")の行で、ブラウザがNNの場合を識別し、1900を足しています。
ポイントの行、document.getElementById("kousin").innerHTML = str; は共通です。
innerHTML を childNodes[0].nodeValue と変更してみましたが、問題なくできました。
2002年1月に、Googleで、Javascriptとして検索(日本語のみ)してみると、139,000件もあって、びっくりしたのですが、2004年1月には、1,690,000件!!。こんなにあるのもかえって困りますね。ものごとには多ければいいというものではない!!
例文で絞ると673件。2004年には2,460件。これならマァマァ。
とほほのJavaScriptリファレンス http://tohoho.wakusei.ne.jp/js/ がよくまとめられています。2003年には、その25に、DOMも追加されました。
673件の先頭にあったる JavaScript例文辞典もよさそうです。
実用的な JavaScript プログラミング例をまとめられ、50万近いアクセスのあるJavaScript Tips collection には、ダイナミックに動くタイトルページの例など事例豊富です。また、ブラウザの違い、バージョンの違いなど詳細な記述もあります。
1,690,000件の冒頭にあり、コンピュータ・インターネットのカテゴリ にもある、 独学JavaScript はよさそうです。そのトップページには、JavaScriptについての簡潔な説明があり、アニメなどはJavaがいいよとあって、次に「FORMの記入欄がちゃんと埋まっているか検査したりするなど、cgiをクライアント側で支援する目的に使うのが一番役に立つと思います」という記述があります。
JavaScriptの最も有効な実用は、そんなところかもしれません。JavaScriptの応用その１の6 フォームの入力チェック に紹介したところです。
DHTML Clubにも参考例があります。
[DOMネット上の参考資料] とほほのJavaScriptリファレンス http://tohoho.wakusei.ne.jp/js/の25 基本的 DOM インターフェイスによる HTML 要素の動的操作法 http://jt.mozilla.gr.jp/docs/dom/technote/tn-dom-table/ DOM と JavaScript http://moz.skillup.jp/docs/dom/reference/javascript.html Dom入門 http://jt.mozilla.gr.jp/docs/dom/domref/dom_intro.html オブジェクト指向 http://www1.u-netsurf.ne.jp/~kitada/3H/index.htm など。
オブジェクト、DOM も含めた総まとめを6 Javascript命令・オブジェクト・DOM まとめ にしています。
最初は写真のスライドショーやアニメのように画像や図形を派手に動かすこともできる、それがJavaScriptの真骨頂かと思ったのですが、最近はJavaも使ってもっと派手に演出するとか、Flashというソフトもよく使われるとか、そういう場面でのJavaScriptの出番が少々、少なくなったようです。池などの写真の水面を揺らすというようなホームページを見たこともあるのですが、IEだけの機能にFilterというのでできるようですが、これもJava向きか？
三目並べ程度の簡単なゲームもできるようですが、知的ゲームとかフラクタル図形などは、Javaで本格的にやった方がよさそうです。JavaScriptには、グラフィックスの機能がないから、こういうことにもつらいものがあるでしょう。
6章でもふれましたが、JavaScriptでは、意外にも地味なところでの活躍が向いているかと思っています。そして3章のように、DOMによる新機軸ダイナミックDHTMLか？
最後に、発展史をみておきましょう。
Javaは、コンパイラ = 一括翻訳型、JavaScriptはインタープリータ = 逐次翻訳型の言語、言葉は似ているが、別ものです。似ているのも当然、それにはわけがあるようです。
「実例でわかるJavaスクリプト」(杉松秀利 ナツメ社 2001年8月)によると、
「1995年10月、Netscape社がNN2.0β1に、LiveScript を組み込む、12月にはWebブラウザに組み込むスクリプト言語を、当時注目されていたJavaを出したSun Microと共同開発するとして、JavaScriptと名称変更。1996年3月 に正式に発表されたNN2.0に、JavaScript1.0が組み込まれ、正式にリリース。」(概要のみ)とあります。
私がインターネットにふれたのは、コアラに出向していた娘が正月に帰ってきた影響で、1996年1月でした。Win3.1、Trumpetというソフトで接続し、使っていたのはNN2.0β1か？ NN2.0は何度かバージョンアップした記憶もあります。IEも2.0になっていたようでしたが、NNが圧倒的なシェアを誇り、問題にもされない状態でした。Windows95は既に出ていて、TCP/IPも組み込まれてはいましたが、遅れをとったマイクロソフトが全力をインターネットに注ぐと言っていた頃でした。
JavaもJavaScriptも、名前だけは知っていた程度でした。私は、まずはC++からとやっていました。特に、Javaは20世紀最後の大型コンピュータ言語、「C++よ、さようなら!!」なんて調子の雑誌やパソコン通信の書き込みは覚えています。
「実例でわかるJavaスクリプト」続きです。
「1996年8月、IE3.0をリリース、JScript1.0,VBScript1.0を組み込む。独自機能も盛り込み、JavaScript1.0とは互換性なし。Netscape社もJavaScript1.1を組み込んだNN3.0をリリース、ECMA(ヨーロッバ電子計算機工業会)に、Javaスクリプトの標準化を要請。
1997年6月に、ECMAScript 1st Edition がJavaScript1.1をベースに制定。同じ6月に、JavaScript1.2を含むNN4.0を、10月に、ECMAScript1.0を実装したJScript3.0を含むIE4.0がリリースされる。」 (概要のみ)
私も96年秋からはWin95にして、IE3.0を使ったかどうかは記憶にないのですが、4.0は使っていました。無料だったのが大きかったかもしれません。97年12月にはW3CがHTML4.0を出し、文章の構造はHTML、ビュー(見栄え)は、CSSを推奨したのですが、98年の大学での授業は、CSSを使うようにしていました。 IE4.0はCSSにも対応していたのですが、NN4.xはまったくだめだったので、98年以降は、IE4.x,5.xをメインにするようになりました。
「実例でわかるJavaスクリプト」その3です。 「1998年6月、ECMAScript 2nd Edition、 99年12月に、ECMAScript 3rd Editionを制定。 NNN6.0のJavaScript1.5,IE5.5のJScript5.5はこれに準拠。次のECMAScriptは2002年の予定で、大きな変更がなされる予定。」 (概要のみ)
W3CのDOM Level1 が98年10月に出されているので、ECMAScript 3rd Edition、それに準拠したというNN6.0、IE5.5ね6.0も対応しているのでしょう。DOMへの対応でブラウザ間の足並みがそろい始めたようでもあり、ECMAScriptの次のEditionに期待したいですね。
 |
|
|