JavaScript/DHTMLの基本構成


スタイルシ−ト(CSS)によってレイアウト定義された
htmlのオブジェクトを
スクリプト言語でコントロ−ルすることを
DHTMLと呼びます

ここではJavaScriptでDHTML/DOMを扱うえで最低限知っておきたい基本テクニックを簡単に説明します。 ただ、この本は、一応、少なくとも自分でhtmlのページを作れてJavaScriptも多少は知っているという人を念頭において構成 されています。 htmlやJavaScriptの基本的なことがらはそれらに関する入門書やサイ トで勉強されることをお勧めします。(...といいながら、実は、この本の基本的な使い方はCD-ROMの ソースをコピーして使うというやり方なので、htmlやJavaScriptが書けなくてもこの本さえあれば 一応、ちゃんとしたJavaScript/DHTMLを使ったページを作ることができます^^)



JavaScript/DHTMLを作るのに必要なものはhtmlを書く時に使う道具とまったく同じです。

DHTMLをコントロ−ルするスクリプト言語にはJavaScriptやVBScriptが ありますがこの本ではINTERNETの標準スクリプト言語であり、クロスプラットフォ− ムなJavaScriptを使います。

JavaScript/DHTMLなhtmlファイルを作る

●用意するもの(htmlを書く時と同じです)

・テキストエディター(またはワープロソフト)
・NN4またはIE4以上などのJavaScript/DHTML対応ブラウザ
・画像ファイル(GIF、JPEG)など

●ちょっとだけやってみましょう(^^)/!!
ボタンがクリックされたら
「こんにちは〜」という文字が画面の中にあらわれるようにしてみましょう。

こんにちは〜
で、このボタンを作るためのソースは....、

<html>
<head>
<title></title>

1.JavaScript 
<script language="JavaScript">
  function showLAYER(layName){ 
    if(document.getElementById)                  //e5,e6,n6,n7,m1,o6用
      document.getElementById(layName).style.visibility='visible'
    else if(document.all) 
      document.all(layName).style.visibility='visible'          //e4用
    else if(document.layers) 
      document.layers[layName].visibility='show'                //n4用
  }
</script>
2.CSS 
<style type="text/css"> 
#test   { position:absolute ; visibility:hidden ; color:red } 
#btn    { position:absolute } 
</style>
</head><body>
3.HTML
レイヤ−
"test" 
<div id="test">

こんにちは〜

</div>
レイヤ−
"btn" 
<div id="btn">

<form>

<input type="button" value=" 押してね(^^) " 

       onClick="showLAYER('test')">

</form>

</div>
</body>
</html>
こうです。
大きく分けて３つのパ−トで構成されています。

1.JavaScript--CSSでposition指定されたレイヤ−をコントロ−ルします。ここでは、レイヤ−を見えるようにするためのクロスブラウザファンクションshowLAYER()を使っています。このファンクションはそのままコピ−していろいろなペ−ジに使い回せます。

2.CSS---------スタイル(フォントや色や位置)を定義します。 positionを指定することでhtmlをレイヤ−化してスクリプトからのダイナミックな制御ができるようにします。 #testはID名がtestという意味で、position:absoluteは絶対位置指定(相対位置指定はposition:relative)、visibility:hiddenは見えなくする、 color:red は文字の色を赤にするという意味です。

3.html--------コンテンツ

簡単にいうとこのソ−スは、

CSSで[見えない]ようにスタイル定義されたhtmlを
JavaScriptで[見える]ようにする。
という仕事をしているわけです。



CSSのスタイル定義やJavaScriptの使い方はそれだけでそれぞれ何冊もの本が書ける内容です。 この本では、JavaScript/DHTMLを実際に自分で使ってみて動きを確認しながら覚えるという方法をとっていますので、 それらの説明は最小限に押さえて個々のサンプルの中のコラムに置きました。 ですから何度でも繰り返しますが、この本はCD-ROMのソ−スをできれば、 コピーしてページを作ってみながらやってみるという心構えで読み進んでください。 やってみてから、読むと難しそうな文法もたぶん数分の1の労力で理解できるはずです。