使える
JavaScript & DynamicHTML サンプル大全

まえがき第6章の概要説明
第6章と同様ライブラリや汎用関数を使用して、インタラクティブなゲームを通してスクリプト 作成上の工夫や注意事項について説明しています。
第5章と同様ライブラリや汎用関数を使用して、インタラクティブなゲームを通してスクリプト 作成上の工夫や注意事項について説明しています。
 
p 241●レイアの高さ (offsetHeight)

この項は IE4.5 ではなく IE5 の問題ですので、「4.10 Macの食えない野郎ども その2」に移動してください。

p 244 の「●レイアを直接生成する」の直前に以下の記述を追加

●レイアの高さ( offsetHeight )
スタイルシートでの width,height の値は IE ではレイアを生成する際の参考にされ、 実際のサイズはレイアの場合 offsetWidth,offsetHeight に設定されます。

しかし、Mac版 IE5 では offsetHeight の値はスタイルシートでの指定がそのまま設定されます。

対策としては正しい値をスタイルシートで設定するか、指定に意味がなく必要な高さに調整したい だけなら height の指定を省略します。スタイルシートで値が設定されていなければ生成したレイ アのサイズが正しく設定されます。

左の欄余白に以下の注意書きを追加

※ 正しく設定されないのは offsetHeight のみで offsetWidth は正しく動作します。

 
p 246●クリップ領域内の子レイア

その後の調査でこの項の現象はレイアのクリップ操作が原因でなく、 スタイルシートで誤った高さ( height )の指定が原因であることが判明しましたので削除です。 f(^^;

削除

 
p 260ウィンドウ内を飛び跳ねる文字たち
また、画像が方向を持ったものであれば、移動方向毎に画像を用意してやり、 createManager関数内で変わるときに画像を差し替えてやればよいでしょう。
また、画像が方向を持ったものであれば、移動方向毎に画像を用意してやり、 creeperManager関数内で変わるときに画像を差し替えてやればよいでしょう。
 
p 269クリッププロパティの落とし穴
これは、right, bottomが以前は 左辺、上辺からの長さであったのに対してCSS2の仕様では各辺の端 からの長さに変更されたためです。

つまり、スタイルシートでclip指定するとHTML自体の互換性が失われることになります。
※ この点では IE4/5 は HTML4 の仕様に従っていません。

モチロンDOM上でもこの変更点は同じです。ブロック要素をclipする場合、同じようにブラウザ毎に 切り分けてclipプロパティの内容を変更しなければなりません。

CSS2の仕様ではclipするためにはclipするブロック要素のサイズが決定されていなければなりません。
これは、right, bottomが以前は 左辺、上辺からの長さであったのに対してCSS2の仕様では各辺の端 からの長さに変更されたためです。

つまり、CSS2の仕様に準拠したブラウザでは clip指定を行うと HTML自体の互換性が失われることになります。

W3C HTML, CSS への準拠を表明している Mozilla( NN6 )も当初はこの仕様に従っていましたが、 NN6正版( 正確には Mozilla Milestone 17 )からは旧仕様に戻したようです。
※ この点では IE4/5, NN4/6 のブラウザは仕様に従っていません。

従来との互換維持を考えれば、将来 W3C CSS2 の仕様が旧仕様に戻るかもしれません。
 
p 277MDS Project
幸い Mozilla の DOM は IDL( Interface Design Language )という設計用の言語で記述されています。
つまり、Mozilla のソースをみれば、プロパティやメソッドの名称、引数などはわかりそうです。
ってことで、Mozilla のソースをハッキングしてみましょう...
幸い Mozilla の DOM は IDL( Interface Definition Language )という設計用の言語で記述されています。
つまり、Mozilla のソースをみれば、プロパティやメソッドの名称、引数などはわかりそうです。
ってことで、Mozilla のソースをハッキングしてみましょう...
 
p 288おすすめリンク集
●JavaScript Tips集

このページの URL が抜けていました(笑)

●JavaScript Tips集
http://www.din.or.jp/~hagi3/JavaScript/JSTips/Default.htm
 
p 308サラリーマン専科2
このスクリプトではロード処理が完了していなければ単に間ってもらえばよいので、 単にダイアログをだすだけですが、 すべてのロード処理が完了した時点で何らかの処理を自動で行う必要があるなら、 親フレームにロード処理を設定するときに他のフレームが読込み済みかを判断する処理を追加すればよいでしょう。
このスクリプトではロード処理が完了していなければ待ってもらえばよいので、 単にダイアログをだすだけですが、 すべてのロード処理が完了した時点で何らかの処理を自動で行う必要があるなら、 親フレームのロード処理を設定するときに他のフレームが読込み済みかを判断する処理を追加すればよいでしょう。
 
CD-ROMサンプルスクリプト( Samples/index.htm )

使用しているスタイルシートに font-family 指定の記述ミスがあり、Mac版 NN で一部分に文字化けが発生します。

P.chap{
  margin:3px 3px 3px 3px; padding:3px;
  border:1px solid #000000;
  font-weight:600; font-family:monospace;
  background-color:#3366aa; color:#eeeeff;
}
    :
.url{ font-family:monospace; color:#333366; }
P.chap{
  margin:3px 3px 3px 3px; padding:3px;
  border:1px solid #000000;
  font-weight:600; font-family:Osaka,monospace;
  background-color:#3366aa; color:#eeeeff;
}
    :
.url{ font-family:Osaka,monospace; color:#333366; }
 
CD-ROMサンプルスクリプト( Samples/index.htm )

サンプルスクリプトへのリンクの一部に間違いがありました

<a href="Chap2/Sample2_2_1.htm">外部参照レイアに表示中のドキュメントサイズを取得</a>
    :
<a href="Chap2/Sample2_2_1.htm">レイアのサイズの設定</a>
<a href="Chap2/Sample2_2_5.htm">外部参照レイアに表示中のドキュメントサイズを取得</a>
    :
<a href="Chap2/Sample2_2_8.htm">レイアのサイズの設定</a>
 
CD-ROMサンプルスクリプト( Samples/Chap1/Sample1_2_7.htm )

表記の一部に間違いがありました

    <p>このサンプルは FRAME を使用したサンプルです。
    従って、FRAME が有効なブラウザでは正常に見ることができません。 <code>f(^^;</code></p>
    <p>このサンプルはフレームを使用したサンプルです。
    従って、フレームに対応していないブラウザでは正常に見ることができません。 <code>f(^^;</code></p>
 
CD-ROMサンプルスクリプト( Samples/Chap1/Sample1_2_8.htm )

表記の一部に間違いがありました

    <p>このサンプルは FRAME を使用したサンプルです。
    従って、FRAME が有効なブラウザでは正常に見ることができません。 <code>f(^^;</code></p>
    <p>このサンプルはフレームを使用したサンプルです。
    従って、フレームに対応していないブラウザでは正常に見ることができません。 <code>f(^^;</code></p>
 
CD-ROMサンプルスクリプト( Samples/Chap1/Sample1_2_9.htm )

表記の一部に間違いがありました

    <p>このサンプルは FRAME を使用したサンプルです。
    従って、FRAME が有効なブラウザでは正常に見ることができません。 <code>f(^^;</code></p>
    <p>このサンプルはフレームを使用したサンプルです。
    従って、フレームに対応していないブラウザでは正常に見ることができません。 <code>f(^^;</code></p>
 
CD-ROMサンプルスクリプト( Samples/Chap2/Sample2_2_11.htm )

表記の一部に間違いがありました

<li>setDivBackgroundColor, setDivTransparentColor
<li>setDivBackgroundColor
 
CD-ROMサンプルスクリプト( Samples/Chap3/Circle.js )

setTargetBy メソッドの記述に間違いがありました

Circle.prototype.setTargetBy = function(dx,dy,times){
    :
  var dx = this.targetX-this.originX, dy = this.targetY-this.originY;
  if(Math.abs(dx)>=Math.abs(dy)){
      :
    this.radius     = dx/(Math.cos(this.endAngle)-Math.cos(this.startAngle));
      :
    this.kY         = dy/this.times;
      :
  } else {
      :
    this.radius     = dy/(Math.sin(this.endAngle)-Math.sin(this.startAngle));
    this.kX         = dx/this.times;
      :
  }
    :
}
Circle.prototype.setTargetBy = function(dx,dy,times){
    :
  var x = this.targetX-this.originX, y = this.targetY-this.originY;
  if(Math.abs(x)>=Math.abs(y)){
      :
    this.radius     = x/(Math.cos(this.endAngle)-Math.cos(this.startAngle));
      :
    this.kY         = y/this.times;
      :
  } else {
      :
    this.radius     = y/(Math.sin(this.endAngle)-Math.sin(this.startAngle));
    this.kX         = x/this.times;
      :
  }
    :
}
 
CD-ROMサンプルスクリプト( Samples/Chap6/Sample6_1.htm )

初期化チェックに誤りがありました

function startGame(){
  if(!initFlag && gameInit) return;
function startGame(){
  if(!initFlag || gameInit) return;

CD-ROM のサンプルスクリプトの修正分( 差分 )のダウンロード

正誤表の「CD-ROM - サンプルスクリプト」の修正分はダウンロードすることができます。
以下のアーカイブのどちらかお好きなフォーマットをダウンロードし、解凍して上書きしてください。

ZIP形式
Sample.zip ( 24KB )
LHA形式
Sample.lzh ( 24KB )

注 CD-ROM に直接書き込むことはできませんので、CD-ROM の内容を一旦ディスクにコピーし、 Sample フォルダのあるフォルダにディレクトリ付きで解凍してください。

※ CD-ROM をコピーすると各ファイルの属性は読み込み専用となりますので、 各ファイルを書き込み可に変更したのち、上書きしてください。


Copyright(c) 2000 - 2001 hagiwara. All rights reserved.