第1章 1歩上行くJavaScript
〜ちょっとした工夫で見やすいページを目指そう〜
1.1 スクリプトの記述に関するTips
1.1.1
あれ、何も表示されない?
〜他のブラウザにも配慮したページ作りを〜
1.1.2
JavaScript のバージョンって結構フクザツ
〜JavaScriptには色々なバージョンがある〜
1.1.3
ブラウザにはバグがつきもの
〜バージョンを識別してバグを回避するには〜
1.2 ページに関するTips
1.2.1
"戻る"なのにクリックすると実は進んじゃうんですよねー
〜ブラウザの履歴で前に表示していたページに戻るには〜
1.2.2
ページの更新日を修正するのが面倒なんです
〜更新日の表示を自動化するには〜
1.2.3
引っ越し先に飛ばしたのはいいけれど、「戻る」ボタンでまた戻る!?
〜一定時間後に別のURLに飛ばすには〜
1.2.4
フレームがウザったい人と別ウィンドウが嫌いな人のための折衷案
〜メニューをフレーム形式とウィンドウ形式で切り替えるには〜
1.2.5
一度に複数フレームを更新するのはいいけれど、1枚づつ戻るのはねー...
〜複数のフレームを同時に変更するには〜
1.2.6
やはり、フレーム構成のページは全体を統一したいですよね
〜ページ表示に連動して他のフレーム背景を変えるには〜
1.2.7
メニューの項目が多くなっちゃった
〜項目数の多いメニューを折り畳んで2階層で表示するには〜
1.2.8
メニューの項目が多くなりすぎちゃった
〜項目数の多いメニューを折り畳んで3階層で表示するには〜
1.2.9
メニューの項目が多い上に複雑なんです
〜項目数の多いメニューを折り畳んで多階層で表示するには〜
1.2.10
今、どのページを開いているかわかります?
〜現在表示中のページをフレームメニューにマークするには〜
1.2.11
この前のページの続きを読みたいんだけど...( フレーム版 )
〜フレーム構成の表示ページを記憶させるには〜
Cookie版 サンプル
1.3 ページの装飾に関するTips
1.3.1
更新マークを付けのはいいけれど、マークを削除するのは更新したことになる?
〜期間限定の更新マークをつけるには〜
1.3.2
ちょっと気の効いたコンテンツ紹介
〜イメージによるガイダンスでページを彩るには〜
1.3.3
「あなた、30回来ていますよ」って言ったら驚く?( テキスト版 )
〜訪問者別にアクセスカウンタを表示するには〜
イメージ版 サンプル
1.3.4
この前の訪問から何が変わった?
〜訪問者別に更新マークを表示するには〜
1.3.5
本に脚注ってありますよね( 注釈ページなし版 )
〜マウスでさわった時に脚注を表示するには〜
注釈ページ追加版 サンプル
1.4 Form に関するTips
1.4.1
送信した後に、入力が間違っているって言われるとイライラしませんか?
〜フォーム入力の値を送信前にチェックするには〜
JavaScript1.2以降用( 正規表現使用版 )サンプル
1.4.2
選択肢が多いと階層化したくなりませんか?
〜リスト選択の内容を動的に変更するには〜
1.5 管理者のためのTips
1.5.1
自分のページのカウンタ値気になりませんか?
〜アクセスカウンタの記録を採るには〜
1.5.2
Web と CGI サーバが違うとローカルで確認するとき困ります
〜リンク先表示と異なるページにジャンプさせるには〜
第2章 DynamicHTMLのためのライブラリ集
〜ブラウザの差を関数で吸収すればスクリプトは簡単になる〜
2.1 ライブラリ集について
2.1.1
DHTML におけるブラウザの差の識別
〜DHTML ではブラウザを識別することが基本です〜
2.1.2
スクリプトの記述方法
〜ブラウザ毎に異なる処理の切り分け方色々〜
2.1.3
ライブラリを使う場合の注意
〜使い方によってあり得るトラブルについて〜
2.2 ウィンドウ関連関数
2.2.1
Window( Frame )の幅(高さ)の取得
〜getWindowWidth, getWindowHeight〜
食えない事情:
■ウィンドウサイズとレイアウト
2.2.2
Window( Frame )の位置( 左上コーナの座標 )の取得
〜getWinXOffset, getWinYOffset〜
2.3 オブジェクトのハンドリング
2.3.1
レイア名からレイアオブジェクトを得る
〜getDivFromName〜
2.3.2
レイアオブジェクトからレイア名を得る
〜getDivName〜
食えない事情:
■absolute と relative レイア
2.3.3
ダイナミックにレイアを生成する
〜createLayer〜
2.3.4
ダイナミックに外部参照レイアを生成する
〜createExLayer〜
2.3.5
レイア内の Image オブジェクトの取得
〜getDivImage〜
2.4 レイアの位置制御
2.4.1
レイアの位置の初期化
〜initDivPos〜
2.4.2
レイアの位置の取得
〜getDivLeft, getDivTop〜
2.4.3
レイアの移動
〜moveDivTo, moveDivBy〜
2.4.4
外部参照レイア内のドキュメントのスクロール
〜scrollExlHItTo, scrollExlVItTo〜
2.5 レイアのサイズ制御
2.5.1
レイアのサイズの初期化
〜initDivSize〜
2.5.2
レイアのサイズの取得
〜getDivWidth, getDivHeight〜
食えない事情: ■DIV のサイズ(StyleSheet)
2.5.3
レイアのサイズの設定
〜resizeDivTo, resizeDivBy〜
2.5.4
外部参照レイアに表示中のドキュメントサイズを取得
〜getExlWidth, getExlHeight〜
2.6 レイアの表示制御
2.6.1
表示/非表示の設定
〜setDivVisibility〜
食えない事情: ■レイアの表示制御手法( 表示・消去と移動ではどちらが速いか )
2.6.2
表示領域のクリッピング
〜setDivClip〜
食えない事情: ■DIV のサイズ(クリップ時のサイズ)
2.6.3
レイアに HTML を書く
〜writeDivHTML〜
2.6.4
レイアの背景色の設定
〜setDivBackgroundColor〜
食えない事情: ■レイアの背景色
2.6.5
レイアの背景イメージの設定
〜setDivBackgroundImage〜
2.6.6
レイアの Z オーダの設定
〜setDivZIndex〜
2.6.7
外部参照レイアの参照ファイルの設定
〜changeExlURL〜
第3章 汎用関数とオブジェクト
〜よく使う処理を関数化すれば更にコーディングは楽になる〜
3.1
それでは解説しよう1
〜マウスでふれると説明文を表示する〜
3.2
それでは解説しよう2
〜マウスをのせたらマウスの近くに説明文を表示する〜
3.3
真っ直ぐなやつ
〜指定された位置まで直線移動する〜
3.4
一定しないやつ
〜速度調整して移動する〜
3.5
まわりくどいやつ
〜円の周囲を移動する〜
3.6
MARQUEE モドキ
〜DTMLで実現するMARQUEEタグ〜
3.7
スライドショーもできるんです
〜レイアのクリッピング制御でスライドショーをする〜
3.8
レイア表示にアクセントを
〜レイアのサイズを制御してレイア表示を演出する〜
3.9
やさしいマウスイベント
〜マウスイベントを簡単にハンドリングする〜
3.10
いざというときしゃしゃり出る
〜マウスをのせるとスライドインするメニュー〜
3.11
マウスで数値入力
〜DHTMLで実現するスクロールバー〜
3.12
IFRAME モドキ
〜DHTMLで実現するIFRAME〜
3.13
英数字をレイアに直接入力
〜キー操作をハンドリングするには〜
3.14
貧者のテクニック、文字列修飾!
〜任意の文字列を立体的にしたりグラデーションする〜
第4章 JavaScript の食えない事情
〜他にも色々とあるんですよこれが...〜
4.1
IE と NN どっちが速い?
〜パフォーマンス〜
4.2
absolute な DIV タグの間に入れた改行はどう処理される?
〜レイアの狭間に〜
4.3
JSファイルを利用する場合は気をつけよう...
〜JSファイル利用の JavaScript〜
4.4
外部ソース参照のスクリプトを書き出すと苦悩の日々が始まる...
〜内部コードの苦悩〜
4.5
IE4 のバグは油断ならない
〜見えないレイア〜
4.6
NN4 のフォームってなんか特殊
〜フォームって何?〜
4.7
onLoadイベント
〜onLoad イベントは本当にローディング完了を意味する?〜
4.8
mousemove と click イベントを共存させると困ります
〜mousedown,mouseup そして click〜
4.9
Mac の食えない野郎ども その1
〜Mac版 IE4.5 の傾向と対策〜
4.10
Mac の食えない野郎ども その2
〜Mac版 IE5 の傾向と対策〜
第5章 応用サンプル
〜汎用関数を利用してアイディアを実現してみよう〜
5.1
文字を動かしてみる
〜レイアを重ねて配色で見せる文字の視覚効果〜
5.2
文字をフェードさせてみる
〜レイアを切替えて文字列をフェードイン・フェードアウトさせる〜
5.3
文字をズームさせてみる
〜レイアを切替えて文字列をズームイン・ズームアウトさせる〜
5.4
ウィンドウ内で瞬く星たちと流れる星
〜ウィンドウのサイズに合わせてレイアウトする〜
5.5
ウィンドウ内を飛び跳ねる文字たち
〜ウィンドウに表示されている領域を認識する〜
5.6
DHTMLのタイトルページを作ってみよう
〜タイトルページを動的に演出する〜
5.7
カラーサンプラー
〜スライダを利用して色を連続的に変える〜
5.8
スポットライト
〜イメージとレイアのクリップで見せる特殊効果〜
5.9
訪問者の足跡
〜Cookieと組み合わせてデータを保存する〜
5.10
付箋紙
〜ドラッグ操作とクリック動作を同居させる〜
5.11
仮想デスクトップ
〜テクニックを組み合わせて複雑なものにチャレンジ!〜
第6章 簡単なゲーム
〜DynamicHTMLを利用したゲームを作ってみよう〜
6.1
ねこめくり
〜ドラッグ操作を利用したウケねらいゲーム〜
6.2
アナグラム
〜CGI と連携して問題の回答を隠す文字の並び替え〜
CGI連動版 アナグラム CGI( Perl5 )の動作環境でご覧下さい
6.3
サラリーマン専科
〜ウィンドウスクロールを利用したシューティングゲーム〜
6.4
サラリーマン専科2
〜フレームの連携で作るレースゲーム〜
6.5
赤ずきんちゃん気をつけて!
〜ちょっと多いレイアの扱い〜
6.6
怒虎打!?
〜フルスクリーンで遊ぶ目の運動〜
付録.1 Mozilla のかおり
付.1.1
Mozilla って何?
〜 Netscape Navigator Ver.6 で何が変わる? 〜
付.1.2
W3C DOM の特徴
〜 W3C DOM って、今までの DOM とどう違う? 〜
・本文で使用した表示例 その1
・本文で使用した表示例 その2
・W3C DOM level2 のオブジェクトリスト
( MDSProjectより )
・Mozilla M18のオブジェクトリスト
( MDSProjectより )
・W3C DOM level2 と Mozilla M18 のオブジェクト比較表( 全リスト )
( MDSProjectより )
・W3C DOM level2 と Mozilla M18 のオブジェクト比較表( 差分リスト )
付.1.3
ECMAScript Binding
〜 JavaScript は何が変わり、どう修正する? 〜
・Mozilla対応版 きんとと( NN4, NN6, IE4, IE5 )
付.1.4
Mozilla 関連の参考になるURL
〜 やっぱ、基本は仕様ですよねー 〜
Mozilla は HTML4.0 をベースに設計された DOM を実現したもので、 JavaScript は ECMA Script の仕様に則っています。 それ以外にも様々な仕様がありそれらをある程度理解して置いた方が良いでしょう。
大抵の資料は英語ですが、最近では邦訳されたものも増えてきています。 いつでも元の文書を見られるように、以下にWeb上で閲覧できる参考資料を挙げておきましょう。
f(^^;
f^^;
特別付録 オススメリンク集( Cross Browser 編 )
少ないですが Cross Browser スクリプト作成の参考になる、なりそうなサイトを紹介します
f(^^;
(^^;