静的メソッドとインスタンスメソッドを定義する方法

解決済

質問者：ggaogg
質問日時：2008/02/18 10:39
回答数：2件

簡単な、カウンタクラスからのインスタンス作成とその利用のテストを行いました。

テストとして作成した以下の内容のファイルをブラウザ(IEやFireFox)で開くと、期待した結果は返りますが、(Windowsで処理待ちを示す)砂時計マークがいつまで経っても消えません。

どこかで永続ループでもしているのでしょうか。

どこに問題があるのか、また、こういった問題のデバッグのコツを教えて下さい。
よろしくお願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
<TITLE>教えて!goo</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="javascript">

<SCRIPT TYPE="text/javascript">
function Counter(initialCount) {
this.count = initialCount;
}

Counter.prototype = {
count : 0,
increment : function() {
this.count += 1;
},
decrement : function() {
this.count -= 1;
}
}

Counter.newInstance = function(initialCount) {
return new Counter(initialCount);
}

var counter;

function testCounter() {
counter = Counter.newInstance(100);
counter.increment();
document.write(counter.count);
}

</SCRIPT>

</HEAD>

<BODY ONLOAD="testCounter()">
</BODY>
</HTML>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： HIRSYU
回答日時：2008/02/18 11:32

writeで書き込んだ後はcloseしてください。

- 0
- 件

通報する

この回答へのお礼

あ、そんな単純な事だったんですね。。

flushメソッドがないものだから、てっきりそういう概念がjavascriptに存在しないのかと思っていました。

失礼しました。
そしてありがとうございました。

通報する

お礼日時：2008/02/18 11:53

No.2

回答者： ai10
回答日時：2008/02/18 11:44

ロード後にdocument.writeを使用されていますが、それは適切ではありません。

(ロード中にdocument.writeをするのであればいい。)
ちなみに、document.writeを使う際には、
document.open()
document.write()
document.close()
という流れが基本です。
openとcloseはロード中に必要だったかどうかはよく知らないが。
(個人的にwriteは使わないので…)
あなたのソースではロード後なので、document.closeがないために砂時計が表示されたままとなってしまいます。(IEでは砂時計は出ません。)

もし、ロード後にページ内にテキストを表示させたいのであれば
* = document.getElementById()
*.appendChild( document.createTextNode( ** ) )
を使うべきです。( *.innerHTML でも可 )

ちなみに、newInstanceメソッドは必要なんでしょうか？
素直に
counter = new Counter( 100 );
でいいように思えます。
さらに、increment, decrement を用意しているってことは、なるべく変数countはprivateで扱いたいってことですよね。
(publicなら、すなおに counter.count ++; でいいはず。)
もしprivate扱いなら、countを取得するようなメソッドを用意するべきでしょう。

また、counterはグローバルで使う予定ですか？
グローバルでなければ関数冒頭にvar宣言させましょう。
----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='ja'>

　<head>
　　<title>教えて!goo</title>
　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
　　<meta http-equiv="Content-Script-Type" content="text/javascript">

　　<script type="text/javascript">
　　　( function ( Counter )
　　　{
　　　　　// onload
　　　　　//@cc_on
　　　　　window./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'load', function ()
　　　　　{
　　　　　　　var counter = new Counter( 100 ); // インスタンス作成
　　　　　　　counter.increment();
　　　　　　　// 表示
　　　　　　　var objDiv = document.getElementById( 'id-div' );
　　　　　　　objDiv.appendChild( document.createTextNode( ''+counter.get() ) );
　　　　　　　// destroy
　　　　　　　counter = objDiv = null;
　　　　　}, false );
　　　} )(
　　　　　( function ()
　　　　　{
　　　　　　　function Counter ( initialCount )
　　　　　　　{
　　　　　　　　　this.count = initialCount;
　　　　　　　　　// destroy
　　　　　　　　　initialCount = null;
　　　　　　　}
　　　　　　　Counter.prototype = {
　　　　　　　　　count　　 : 0,
　　　　　　　　　increment : function() { return ++ this.count; },
　　　　　　　　　decrement : function() { return -- this.count; },
　　　　　　　　　get　　　 : function() { return this.count; }
　　　　　　　}
　　　　　　　return Counter;
　　　　　} )()
　　　);
　　</script>
　</head>

　<body>
　　<div id='id-div'></div>
　</body>

</html>
----------------------------------------------------------------
注:
[1]全角スペース使用
[2]特殊な書き方をしているのは、私自身の勉強のためでもあります。
　　こんな書き方もあるよーっていうだけで他意はないです。

- 0
- 件

通報する

この回答へのお礼

なるほど、ページのロード前にopen処理を行い、ロードしたページを実際にブラウザに出力するときにwrite、そしてロードが終わったらcloseと、1つのロードでopenとcloseが1セットのみというのが理想なんですね。

document.close();
document.write("なんたら");
この記述でも動いてしまうので、どうしても甘えが出てきてしまいます。

あと、ページ中に何かを挿入する際には、ai10さんのようにDOM操作を行って入れたり、あとはinnerHTML等で入れたりするほうが、挿入位置等も明確で、スマートだと思います。参考にさせて頂きます。

一番の発見が、マクロみたいな書き方です。
/*@if (@_jscript)
これは、もしもjscript(IE)ならということですね。
attachEventは、通常複数の条件式を付けなければいけないと思っていましたが、こんな書き方で短くできたんですね。

あと、newInstanceというメソッドを作成したりしていたのは、私は普段Javaを使っているので、そのデザインを使えるかなと模索していたためです。
模索中に今回の不具合が出たので、デザインに問題があるのかと思って、そのまま載せました(結果はclose忘れでしたが・・)。

javascript始めて短いので、今後の参考になりました。
ありがとうございました。