読者です 読者をやめる 読者になる 読者になる

「パーフェクトJavaScript」メモ 8章 クライアントサイドJavaScriptとHTML

突然やる気がなくなって止まっていたが幸い再開。いつも同じメンバーで再開

jsの記述方法と、よくハマりやすい実行タイミングでまとめ。

記述方法 実行タイミング
scriptタグ 書いてある場所で実行。body閉じタグ直前に書いたとてbodyをいじれない。
外部jsファイルの読込 やはり書いてある場所のタイミングで実行。
onload 画像含めページが全て表示されてから実行。体感遅い。
DOMContentLoaded DOMができたら実行。
動的ロード 他の処理と並列で実行。

実行タイミングとか利便性とかで使い分けます

JavaScriptの実行タイミングから考えると、もっとも適切な方法はDOMContentLoadedです

使ったことない。
が、IEの昔のバージョンで使えないとかどうでもいいし(いいんだっけ)本当に便利なのでは。動的でさらに入れ子になってるページでも全DOMができてから実行されるのだろうか、だとしたら便利

デバッグ方法

console.debug で何行目で書かれたやつからの出力かわかる

え、じゃあconsole.log完全にやめてconsole.debug使います

console.dirはいいよね
console.dirxml(DOM要素をHTMLとして表示)もあるのか
console.traceは結局何が表示されるんだ、使ってみるか
console.timeなんてあるのか、便利だな
ああなんと色々知らなかったな。

クロスブラウザ対策には
ユーザーエージェントによる条件分岐か
機能の有無による条件分岐

ああ、AにはBかCなんだな

クライアントサイドJavaScriptではWIndowオブジェクトがグローバルオブジェクトになる

ではサーバサイドJavaScriptでは何がグローバルオブジェクトになるでしょうか、
ページをめくってカンニングしたところ、例えばNode.jsではglobalオブジェクトがグローバルオブジェクトになるそうです。

WindowオブジェクトのnavigatorプロパティはNavigatorオブジェクトです。
WindowオブジェクトのdocumentプロパティはDocumentオブジェクトです。

なんてことはない文章だが、ぱっと見ぜんぜん意味がわからない。
しかし、ある項の最初の一文なので、重要なことを言っているに違いない。
しかし一見、何も言っていないようにも見える。

◯◯オブジェクト、という言い方はよく出てくるのでわりとわかる。
しかし◯◯プロパティは……いや、◯◯プロパティという言い方もよく出てくる。
ということは、わかりにくいところはひとつもないのか。

乱暴に上記の文章を返還すると、こういうことでいいのか

Windowオブジェクト{
navigatorプロパティ:Navigatorオブジェクト,
documentプロパティ:Documentオブジェクト,
……
}

なんだ何も難しいこと言ってないな。
「WindowオブジェクトのnavigatorプロパティにはNavigatorオブジェクトが値として設定されています。」
だと少し親切か。
それにしてもこれだけではやはり何も訴えかけるものがないな。

「Windowオブジェクトは、プロパティとしてNavigatorオブジェクトを持っています。」
これだと「ほう、そういうのもあるのか」と思える。

情報を出す順番とタイミングがポイントなのかな。
より端的には、「主語に新情報を入れない」かな。「新情報は後置」は英会話の鉄則だったかな。

「私の弟子である毒霧吹き三郎は、毒霧を吹きます。」
だと「そりゃそうだろうな」と思うけど、
「私の弟子には、毒霧吹き三郎という、毒霧を吹く奴がいます。」
だと「ほう、そういうのもいるのか」と思える。

(待て、最後の文の主語述語って「毒霧を吹くやつが」「います」じゃないの、どうなってんの文法体系)

この章はWindowオブジェクトのdocumentプロパティには「DOM」というものがあって……というところで終わり、次の章が、DOM。