Part1

◎はじめに

◎JavaScriptとDHTML/DOMを
　らくらく使おう

◎JavaScript/DHTMLの
　基本構成


Part3 汎用関数

【表示】

showLAYER()
表示属性set（表示）
hideLAYER()
表示属性set（非表示）
getVISIBLE()
表示属性get

【移動】

moveLAYER()
レイヤー移動
moveByLAYER()
レイヤー移動（対現在地）

slideLAYERs()
レイヤースライド

fixedLAYER()
レイヤー位置固定

followingLAYER()
マウス追跡

【生成】

createLAYER()
レイヤー生成

【サイズ】

resizeToLAYER()
レイヤーリサイズ
resizeByLAYER()
レイヤーリサイズ（対現サイズ）
zoomLAYER()
レイヤーズーム

【位置】

getLEFT()
レイヤー左辺X座標get
getTOP()
レイヤー上辺Y座標get
getRIGHT()
レイヤー右辺X座標get
getBOTTOM()
レイヤー下辺Y座標get

【奥行】

zindexLAYER()
奥行Z座標set
getZINDEX()
奥行Z座標get

【クリップ】

setCLIP()
クリップ

wipeCLIP()
ワイプ

【出力】

outputLAYER()
HTML出力

【色】

setBGCOLOR()
背景色set
getBGCOLOR()
背景色get

fadeBGCOLORbyGRY()
背景色フェード（グレイ）
fadeBGCOLOR()
背景色フェード

setOpacity()
不透明度set

fadeOpacity()
不透明度フェード

setBGIMG()
背景画像set

setFGCOLOR()
文字色set

【ウインドウ】

getINNERWIDTH()
ブラウザ内幅get
getINNERHEIGHT()
ブラウザ内高get

resizeToWIN()
ブラウザリサイズ（内寸）
resizeByWIN()
ブラウザリサイズ（対現外寸）

moveToWIN()
ブラウザ移動
moveByWIN()
ブラウザ移動（対現位置）

win_closed()
ウインドウ有無の確認

【キー】

getKEYCODE()
キーコードget

【マウス】

getMouseX()
マウスX座標get
getMouseY()
マウスY座標get

getMouseXonScreen()
Screen上のマウスX座標get
getMouseYonScreen()
Screen上のマウスY座標get

【スクリーン】

getScreenWIDTH()
フルスクリーン幅get
getScreenHEIGHT()
フルスクリーン高get

getScreenAvailWIDTH()
スクリーン有効幅get
getScreenAvailHEIGHT()
スクリーン有効高get

【言語】

getBrowserLANG()
ブラウザ言語コードget

【オブジェクト】

getLayStyleOj()
レイヤースタイルオブジェクトget
getLayOj()
レイヤーオブジェクトget

【その他】

pop()
ポップアップメニュー
dragLay()
ドラッグドロップ
openFlashWin()
フラッシュ用ウインドウ

Part2 基礎編


出す/消す showLAYER() hideLAYER()
|A01 ボタンクリックで文字を出す
|A02 リンククリックで画像を出す
|A03 リンククリックでリンクを出す
|A04 リンククリックで文字を消す
|A05 ラジオボタンクリックで文字を出す/消す
|A06 フォームオプション選択で文字を出す/消す
|A07 ボタンクリックでボタンを出す/消す
|A08 リンクに触るとHELPを出す/消す
|A09 リンクに触ると画像が切り替わる
|A10 リンクをクリックすると画像やボタンが切り替わる
|A11 リセットボタンを押すとレイヤーを出す
|A12 選択後フォームオプションを消す


移動/出す/消す moveLAYER()
|B01 ボタンクリックで文字を移動する
|B02 ボタンクリックで文字を（見える位置へ移動して）出す
|B03 ボタンクリックで画像を（見える位置へ移動して）出す/消す
|B04 リンククリックでリンクを切り替える
|B05 ボタンクリックで文字や画像の位置を変える
|B06 ボタンクリックでボタンが移動する
|B07 ラジオボタンクリックで画像を移動する
|B08 リンクに触ると画像がするするっと移動する
|B09 ボタンクリックで文字を連続移動する
|B10 ボタンクリックでフォームが切り替わる
|B11 クリックした場所へ画像が移動する

現在位置を起点として移動 moveByLAYER()
|B12 ボタンクリックで文字を相対移動する
|B13 ボタンクリックで画像を上下左右へ相対移動する
|B14 数字キーで画像を上下左右へ相対移動する
|B15 リンクをこすると画像が相対移動する
|B16 ▲▼リンクに触るとリンクが上下移動する
|B17 リンクに触っている間画像が移動する
|B18 フォームで指定した距離だけテーブルを動かす

スライド slideLAYERs()
|B19 ボタンクリックで文字をスライドさせる
|B20 ボタンクリックで複数の文字をスライドさせる
|B21 ボタンクリックで複数の文字をスライドして集める
|B22 ボタンクリックで文字を（見えない位置から）スライドして出す
|B23 ボタンクリックで文字を（見えない位置へ）スライドして消す
|B24 リンクのクリックで画像を（見える位置へ）スライドして出す
|B25 ボタンクリックで文字をスライドして出す/消す
|B26 ボタンクリックで文字をスライドして出す/消す
|B27 ページへ入るとタイトル画像が集まってくる
|B28 ページへ入るとタイトル画像が集まってくる2
|B29 ページへ入るとタイトル文字がフェードしながら出てくる
|B30 ページへ入ると巨大なタイトル文字がお出迎えする
|B31 リンクに触ると触った場所へフラッシュがスライドしてくる
|B32 リンクに触るとフラッシュメニューがスライドしてくる
|B33 リンクに触るとDHTMLメニューがスライドして出てくる
|B34 画面をクリックすると画像がマウスの位置までスライドする

レイヤー位置固定 fixedLAYER()
|B35 画面右上にリンクを固定表示する
|B36 画面右上に▼Bottom・右下▲Topを固定表示する
|B37 画面左下に画像リンクを固定表示する
|B38 画面左上に複数メニューを固定表示する
|B39 画面中央に複数リンクを固定表示する
|B40 画面左上に複数リンクを固定し、背景色をフェードインさせる
|B41 画面左上に出し入れ可能なメニューバーを固定する

マウスポインタ追跡 followingLAYER()
|B42 マウスカーソルを追って画像が移動する
|B43 マウスカーソルを追ってボタンが移動する
　（なかなか押せない…）
|B44 マウスカーソルを追って複数画像が移動する
|B45 マウスカーソルを追って複数画像が移動する（横に並ぶ）
|B46 マウスカーソルを追って複数画像が移動する（縦に並ぶ）
|B47 マウスカーソルを追って複数画像が移動する（時間差）
|B48 マウスカーソルを追って水平罫線が移動する


レイヤーを生成 createLAYER()
|B49 レイヤーを自動生成する
|B50 画面をクリックで側にリンクが現れる


重ね合わせ zindexLAYER()
|C01 画像に触ると触った画像が前に出る
|C02 触ったリンク画像が階段状に前に出る
|C03 触ると階段状に前に出るリンク画像を位置固定メニューにする
|C04 触った画像が手前になる円形リンクを作る
|C05 ルーレットリンクで止まったURLへジャンプする
|C06 ボタンクリックで（下に隠れていた）文字を出す/消す


クリップ setCLIP()
|D01 ボタンクリックでクリップを変更する
|D02 リンクをこすると画像のスリット状クリップが移動する
|D03 マウスカーソルの動きに合わせてクリップサイズが変わる
|D04 マウスカーソルをクリップ窓が追尾する
|D05 ボタンクリックでクリップが縦に広がる
|D06 画面クリックでクリップが横に広がる

ワイプ wipeCLIP()
|D07 ページへ入るとワイプする
|D08 画像が「now loading…」の表示後、ワイプで現れる
|D09 ボタンクリックで画像がワイプして現れる
|D10 ページ全体がワイプする
|D11 ページへ入ると観音開きでワイプする


HTML出力 outputLAYER()
|E01 ボタンクリックで文字を出す（書き出す）
|E02 ボタンクリックで文字を書き換える
|E03 ボタンクリックでHTMLを書き換える
|E04 リンクに触るとHTMLが書き換わる
|E05 時刻をリアルタイムに表示する（時刻を書き替える）
|E06 時刻をリアルタイムに表示する（カスタマイズ版）
|E07 ボタンクリックでテーブルを書き換える
|E08 リンクに触るとヘルプテーブルが現れる
|E09 マウスを追跡するヘルプテーブルを作る
|E10 マウスを追跡するヘルプテーブルを作る（複数）
|E11 マウスを追跡するヘルプテーブルを作る（影付き）
|E12 ボタンクリックでテーブルのデータをソートする


背景色set setBGCOLOR()
|F01 JavaScriptでCSSのhoverを実現してみる1
|F02 JavaScriptでCSSのhoverを実現してみる2
|F03 リンクに触ると文字の背景色がフラッシュする
|F04 リンクに触ると背景色が変わるメニューを作る
|F05 マウスカーソルがフォームに触ると背景色が変わる

背景色フェード fadeBGCOLORbyGRY() fadeBGCOLOR()
|F06 ページへ入るとレイヤーの背景色がフェードインする
|F07 リンクに触ると背景色がフェードインする
|F08 リンク背景色が指定色からフェードした後透明になる
|F09 レイヤーに触ると指定色から指定色へフェードする1
|F10 レイヤーに触ると指定色から指定色へフェードする2
|F11 マウスカーソルがフォームにフォーカスすると
　背景色がフェードインする
|F12 クリックするとボタンの色がフェードする

不透明度set setOpacity()
|F13 リンクに触ると半透明のヘルプが現れる
|F14 リンクに触ると半透明のヘルプがスライドして現れる
|F15 入力時以外は半透明のフォームを作る
|F16 リンクに触ると対応する文字の透明度が変わる
|F17 リンクに触ると対応する画像の透明度が変わる
|F18 画像に触ると透明度が変わる

不透明度フェード fadeOpacity()
|F19 リンクに触るとヘルプが半透明にフェードしながら現れる
|F20 リンクに触るとヘルプが半透明フェードしながらスライドする
|F21 リンクに触ると対応する文字が半透明にフェードする
|F22 リンクに触ると対応する画像が半透明にフェードする
|F23 画像に触ると半透明にフェードする

レイヤーの背景画像 background.src | backgroundImage

背景画像set setBGIMG()
|G01 リンクをなぞると背景画像が変わる
|G02 ページへ入ると背景画像が順に変わる
|G03 触るとテキストエリアの背景が原稿用紙画像に変わる
|G04 テキストフィールドに触ると背景画像が変わる


Screen上のマウス座標get getMouseXonScreen() getMouseYonScreen()
|H01 クリックした側にサブウィンドウが開く
|H02 クリックした側にサブウィンドウが開く（常に前面表示）

スクリーン有効幅高get getScreenAvailWIDTH() getScreenAvailHEIGHT()
|H03 スクリーンサイズに合わせてウィンドウを開く

ブラウザリサイズ(内寸)resizeToWIN() ウインドウ有無の確認 sbwin_closed()
|H04 ウィンドウを開いた後ウィンドウサイズを変える
|H05 サブウィンドウと親ウィンドウ間のデータ通信


クリックすると oj.onclick
|I01 画面クリックで画像を出す/消す
|I02 クリックするとはじけるペンギン

ダブルクリックするとoj.ondblclick
|J01 画面をダブルクリックで画像を出す/消す
|J02 画面をダブルクリックでスライド移動のスライドショー

キーを押すと|離すとoj.onkeypress|onkeydown|onkeyup
|K01 押したキーによって処理を分岐する
|K02 数字キーでレイヤーを動かす

マウスボタンを押すと|離すとoj.onmousedown|onmouseup
|L01 マウスボタンを押している間文字が移動する

マウスポインタが触ると|離れるとoj.onmouseover|onmouseout
|M01 指定した文字に触ると文字を出す/消す

Part2 応用編

|helpChip
リンクに触ると現れるヘルプチップ

|helpChip2
リンクに触ると現れるヘルプチップ2
（不透明フェード）

|menu
ポップアップメニュー

|carendar_lay
カレンダーによる日付入力（レイヤー版）

|carendar_win
カレンダーによる日付入力（サブウィンドウ版）

|3D-blocks
3-D風インタラクティブアニメーション

|kuji
スピードくじ

|sliderbar
スライダーバー

|TypeWriting
タイプライタを打つように文字が出る

|Tab
ワイプして切り替わるタブ

|Random move
ランダムに動き回るリンク

|Pen Seeker
ペンギンを探せ!

|Trimming
クリップによる画像トリミング

|Dynamic Load
ダイナミックロード

|.jsDB001 基本型
|.jsDB002 検索［button］
|.jsDB003 検索[option]
|.jsDB004 外部.jsファイルのDBを動的に変更

|fontStyleGenerator
フォントのスタイル定義サンプルを自動生成


|AniMaker pro0.0
アニメーションソース自動作成スクリプト（ver1.0）


|大仏ムービーDHTML版
大仏ムービーDHTML対応版

---

Part4 DHTML Tip's

*各ブラウザのJavaScriptやDHTMLを
　互換させるための基本テクニック

*クロスブラウザ関数の使い方

    1.そのまま使う
    2.オブジェクト名で使う
    3.getLayStyleOj()でらくらく使う

*クロスブラウザ関数ライブラリについて

    1.ライブラリの場所A（CD-ROM）
    2.ライブラリの場所B（Web）
    3.このライブラリを使用するメリット
    4.使用例
    5.個別ライブラリとセットライブラリ
    6.自分のサーバーへの設置方法
    7.クロスブラウザ関数ライブラリリスト

*ブラウザバージョンチェックについて

    1.ブラウザを調べる
    2.ブラウザのバージョンを調べる
    3.OSを調べる
    4.オブジェクトの有無を調べる
    5.Internet Explorerのバージョンを細かく調べる
    6.Internet Explorerの条件コンパイル（コメント内へ記述）
    7.タグで分岐する
    8.scriptタグを理解できないブラウザ対策
    9.サーバー側で分岐する（Perl）
    10.サーバー側で分岐する（PHP）
    11.サーバー側で分岐する（SSI）

*CSSの自動分岐
（スタイルシートをブラウザ別に読み込む）

    1.スタイルシートの問題点
    2.CSS非対応ブラウザを無視（HTMLのコメントアウト）
    3.CSS非対応ブラウザを無視（JavaScriptによる分岐）
    4.ブラウザ・OS別に違うCSSファイルを読み込むサンプル
    5.ブラウザ別CSS読み込み用関数

*OS/ブラウザ別　
navigatorオブジェクトのプロパティ一覧

    Macintosh OS
    Macintosh OS X
    Windows 95
    Windows 98
    Windows Me
    Windows NT 4.0
    Windows 2000
    Windows XP
    Linux（Red Hat）
    PS2（プレイステーション2）
    DP（ドリキャス/ドリームパスポート）

*レイヤー内の画像やフォームにアクセスする

*Netscape Navigator 4でwidthとheightを
　指定したのにレイヤーブロックを指定した
　サイズで四角く塗りつぶせない

*ケアレスミスをなくそう


[リファレンス]

JavaScript1.2 ＋ Internet Explorer 4〜
　互換命令のリファレンス

|A|B|C|D|E|F|G|H|I|J|K|L|M|N
|O|P|Q|R|S|T|U|V|W|X|Y|Z|

[JavaScript・JScript・ECMAScript・DHTML・DOMのサイト]

links


[Support] online

JSSamples/suport
js-ml


[Thanx]

ご協力をいただいた方々