Skip to content

JavaScriptのデバッグ2

JavaScriptのデバッグ2 published on JavaScriptのデバッグ2 へのコメントはまだありません

以前、JavaScriptのデバッグに関して、MicrosoftのScript Debuggerを紹介した
その後、MSから提供されている別のツールを見つけた。Internet Explorer Developer Toolbarというやつで、その名の通りIEのツールバーとして動作する。
機能的にはDOMツリーを表示したり、特定のHTMLエレメントを非表示にしたり、tableの枠線の表示を動的に切り替えられたりとか。まぁまぁ便利だと思うので、一度試してみるといいかも。
ダウンロードはここから。

IEのメモリーリーク

IEのメモリーリーク published on IEのメモリーリーク への2件のコメント

JavaScriptの書き方によってはInternet Explorerのメモリリークのバグによって、メモリの使用量が増え続ける。
けど、このページによると、2007年6月にバグ修正されたみたい。
バグ修正に関するMicrosoftの公式情報はこっち
バグの詳細情報はこっち
どんなJavaScriptを書くとメモリーリークが発生するかは、MSのこのページで解説してた。
もう少し簡単に説明した個人のページもあった。
循環参照がキーワード。
IEのメモリーリークを検出するDripっていうツールもあった。このページで簡単に解説してた。
このバグはまだ直っていない?

JavaScript、イベントの順序

JavaScript、イベントの順序 published on JavaScript、イベントの順序 へのコメントはまだありません

最近のWebサイト・システムではとにかくとにかく「ダイナミック」で、画像・テキストなど至る所にイベントハンドラーが登録されている。
ごく原始的なやり方だと

<img src="foo.jpg" id="img1" onclick="somefunc()">

なんて方法だけど、最近ではprototype.jsのEvent.observeとかを使ってる人も多いと思う。
Event.observeだと

Event.observe('img1','click','somefunc()')

って感じになるけど、このメソッドには第4の引数がある。何に使うかだけど、例えばあるdiv領域の中にもう1つdiv領域があって(divじゃなくてもimgでも何でもいいけど)、それらに共にonclickのイベントハンドラーが設定されている場合、マウスをクリックするとどっちのイベントハンドラーが先に呼ばれるか?
答えは内側の要素に設定されたイベントハンドラーが先に呼ばれるんだけど、第4の引数useCaptureをtrueにするとちょっと違った動作に。とまぁその辺りをコントロールする引数。このページが分かりやすい説明だった。

Continue reading JavaScript、イベントの順序

colgroup、子に引き継がれる属性

colgroup、子に引き継がれる属性 published on colgroup、子に引き継がれる属性 へのコメントはまだありません

ずーっと前のエントリでHTMLのcolgroupについてちょっとメモ書きをした。
colgroupを使うと、HTMLのテーブルの列単位に幅とかを一括で指定できる。colgroupを使わないと、セル(>td<)毎に幅とかを指定しなきゃいけない。
結構便利なんだけど、colgroupに指定した値がその列のセルに全て引き継がれるかというとそうでもなく、限られた属性しか引き継がれない。margin-*とかを一括で指定できたら便利だなぁと思ったんだけどムリそう…
詳しくはこのサイト

JavaScriptでクラス

JavaScriptでクラス published on JavaScriptでクラス への2件のコメント

調べてみると色々なやり方があるみたいだけど、自分は以下の感じでやる事にした。

function ClassName () {
this.prop1;
this.prop2;
this.method1 = function (param) {
this.prop1 = param;
this.method2();
}
this.method2 = function (param) {
doSomething();
}
}
var obj = new ClassName();

無名関数を使ってるんだけど、これで大体の事は用が足りる。
継承のやり方にはいろいろあって、このページが詳しい。けどちょっと難しいかも。
自分の場合は継承っぽいやり方は使わず、メソッドをオーバーライドや追加したい場合は、インスタンス化した後にメソッドを書き換え・追加している。具体的には以下のような感じ。

var obj = new ClassName();
//オーバーライド
obj.method2 = function (param) {
doSomethingElse();
}
//メソッドの追加
obj.method3 = function() {
bar();
}

その他、参考にしたページ。
JavaScriptでのオブジェクト指向全般に関してさらっと書いてあるページ
Functionオブジェクトについて書いてあるページ

iframeのonload

iframeのonload published on iframeのonload へのコメントはまだありません

iframeにもonloadがあるけど、IE6の場合JavaScriptからonloadを書き換えられなかった。
iframeのonloadに関数を指定して、その関数を書き換えるようにすればOK。具体的には以下のような感じ。
・HTML

<iframe src="foo.html" onload="onloadFunc()" ></iframe>

・JavaScript

var onloadFunc = function () {
doSomething();
}
function changeOnLoad () {
onloadFunc = function {
doSomethingElse();
}
}

このページが参考になった。

CSS DOMのプロパティ

CSS DOMのプロパティ published on CSS DOMのプロパティ へのコメントはまだありません

自分用メモ
例えばCSSでHTMLの要素を

background-color : black;

と指定した場合、それをJavaScriptから変更するにはDOMを用いて以下のようにする。

var obj = document.getElementById("foo");
obj.backgroundColor = "black";

大体CSSの名前から「-」を省いて、2つめ以降の単語の先頭を大文字にすればOKなんだけど、微妙に違う場合がある。
どっかに一覧になってればいいなぁと思ったら、そういうページがあった。

CSS、colgroup

CSS、colgroup published on CSS、colgroup へのコメントはまだありません

HTMLのtableでcolgroupってのがあるってのをこないだ初めて知った…

<table>
<tr>
<td class="c1">1-1</td>
<td class="c2">1-2</td>
<td class="c2">1-3</td>
</tr>
<tr>
<td class="c1">2-1</td>
<td class="c2">2-2</td>
<td class="c2">2-3</td>
</tr>
<tr>
<td class="c1">3-1</td>
<td class="c2">3-2</td>
<td class="c2">3-3</td>
</tr>
</table>

通常はDreamWeaver等のツールでHTMLを書くからこの辺はもちろん自動的にやってくれるけど、上記のHTMLだと行数が増えてくるとファイルサイズが大きくなる。
それくらいだったらあまり問題ないかもしれないけど、テーブルのデータの部分(1-1〜3-3)が別の所で生成される場合(サーブレットだったりAjaxだったり)、デザインを変えたい場合はプログラムの部分を変更しなければいけない。
それを下のように書くと、tr, tdタグにはclass要素が付かないので便利な時もあるかも。

<table>
<colgroup>
<col span="1" class="c1" />
<col span="2" class="c2" />
</colgroup>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

このページが分かりやすかった。

JavaScriptでunexpected quantifier

JavaScriptでunexpected quantifier published on JavaScriptでunexpected quantifier へのコメントはまだありません

JavaScriptでunexpected quantifierってエラーが発生した。ググってもそれらしいページが出てこなかった。
詳しくは覚えてないけど、結局、正規表現に間違いがあったのが原因だった。
環境
Windows XP
IE6