- ベストアンサー
静的メソッドとインスタンスメソッドを定義する方法
簡単な、カウンタクラスからのインスタンス作成とその利用のテストを行いました。 テストとして作成した以下の内容のファイルをブラウザ(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>
- ggaogg
- お礼率86% (209/243)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
writeで書き込んだ後はcloseしてください。
その他の回答 (1)
- ai10
- ベストアンサー率27% (3/11)
ロード後に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]特殊な書き方をしているのは、私自身の勉強のためでもあります。 こんな書き方もあるよーっていうだけで他意はないです。
お礼
なるほど、ページのロード前にopen処理を行い、ロードしたページを実際にブラウザに出力するときにwrite、そしてロードが終わったらcloseと、1つのロードでopenとcloseが1セットのみというのが理想なんですね。 document.close(); document.write("なんたら"); この記述でも動いてしまうので、どうしても甘えが出てきてしまいます。 あと、ページ中に何かを挿入する際には、ai10さんのようにDOM操作を行って入れたり、あとはinnerHTML等で入れたりするほうが、挿入位置等も明確で、スマートだと思います。参考にさせて頂きます。 一番の発見が、マクロみたいな書き方です。 /*@if (@_jscript) これは、もしもjscript(IE)ならということですね。 attachEventは、通常複数の条件式を付けなければいけないと思っていましたが、こんな書き方で短くできたんですね。 あと、newInstanceというメソッドを作成したりしていたのは、私は普段Javaを使っているので、そのデザインを使えるかなと模索していたためです。 模索中に今回の不具合が出たので、デザインに問題があるのかと思って、そのまま載せました(結果はclose忘れでしたが・・)。 javascript始めて短いので、今後の参考になりました。 ありがとうございました。
関連するQ&A
- コンストラクタと静的メソッドを簡単に定義する
立て続けに質問することをお許し下さい。。 以下のようなPersonクラスがあるとします。 /**** Person クラス(全角スペース表記) ****/ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <META HTTP-EQUIV="Content-Script-Type" CONTENT="javascript"> <TITLE>教えて!gao</TITLE> <SCRIPT TYPE="text/javascript"> function Person(name, age, sex, color) { this.name = name; this.age = age; this.sex = sex; this.color = color; } Person.prototype = { name:null, age:null, sex:null, color:null }; Person.YELLOW = "黄色人種"; Person.BLACK = "黒色人種"; Person.WHITE = "白色人種"; function test() { var person = new Person("ggaogg", 23, "male", Person.YELLOW); var resultBlock = document.getElementById("resultBlock"); for (property in person) { resultBlock.appendChild(document.createTextNode(property + " = " + person[property])); resultBlock.appendChild(document.createElement("BR")); } } </SCRIPT> </HEAD> <BODY ONLOAD="test()"> <DIV ID="resultBlock"></DIV> </BODY> </HTML> /********************************************************/ これの実行結果は、以下の通りです。 name = ggaogg age = 23 sex = male color = 黄色人種 しかし、静的変数を、毎回「Person.」を付けて記述するのは面倒で、すべて{}でひとくくりになっていたほうが可読性も増すと思い、以下のようにできると思いましたが、そうしたところ new Person("ggaogg", 23, "male", Person.YELLOW); の部分がコンストラクタではないというようなエラーとなってしまいます。(Web等でこの書き方はあまり見かけないが自分は気に入っている) /************ 変更した部分 ******************/ Person = { YELLOW : "黄色人種", BLACK : "黒色人種", WHITE : "白色人種" }; /********************************************/ 多分、初めに行ったコンストラクタの定義とこの{}の定義とが競合しているためだと思うのですが、何かよい書き方ありませんでしょうか。
- ベストアンサー
- JavaScript
- ホームページのヘッダ部分について
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML LANG="JA"> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="text/css"> <META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="text/javascript"> <TITLE>○○○○</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="css1.css"> <meta name="keywords" content="△,△,△,△,,△,△,"> <meta name="description" content="●●●●●"> </HEAD> <BODY> … となっているのですが、無駄な部分はありますか？ 順番などは合ってますか？ また、こうしたほうがいい、などとアドバイスがあればぜひよろしくお願いいたします。
- 締切済み
- レンタルサーバ・ASP
- このソースどういう意味ですか【JavaScript】
<HTML> <HEAD> <TITLE>JavaScript Sample</TITLE> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> </HEAD> <BODY> : <INPUT TYPE="button" VALUE="OK" onClick="～"> : </BODY> </HTML> このソースの中の <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> の部分ってどういう意味ですか？ 特にTypeとHTTP-EQUIVの部分については個別で詳しく知りたいです。 回答よろしくお願いします。
- ベストアンサー
- JavaScript
- 背景に指定したイメージ以外の余白を見せないようにする方法は？
こんにちは！まさにタイトル通りの質問です。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME=""> <META NAME=""> <META NAME=""> <META NAME=""> <META http-equiv="refresh" content="5;url=test.html"> <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){ window.resizeTo(720,580); } //--> </SCRIPT> <title>test</title> <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> </HEAD> <body onLoad="resizeWindow()" background="top4.jpg" width=720 height=580 > </body> </HTML> としていますが、窓を大きくしたりすると右や下に余白が見えてかっこわるいです。どうすれば改善しますか？ お願いします☆
- ベストアンサー
- HTML
- Arrayオブジェクトのsort（）メソッド
テキストに書いているArrayオブジェクのsort()メソッドを実行しました。 ソースコードは以下のとおりです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <title>Arrayオブジェクトのメソッド</title> <script type="text/javascript"> </script> </head> <body bgcolor="#FFFFFF"> <p style="font-size:200%"> <script type="text/javascript"> var ages = new Array(4, 6, 10, 24, 1, 11, 40); ages = ages.sort(); document.write(ages.join(" > ")); </script> </p> </body> </html> すると、ブラウザにこのように表示されました。 （ちなみに > は矢印記号で大小を比べるものではありません。） 1 > 10 > 11 > 24 > 4 > 40 > 6 これを見る限り数字の順番が変わっています。 テキストでは、これを「文字列として昇順に並び替えた」と書かれているのですが、私の知識の足りなさから意味がよく分かりません。 ただ、昇順の意味は分かっているつもりです。 もし、昇順に並び替えるのなら、 1 > 4 > 6 > 10 > 11 > 24 > 40 のようになるのではないでしょうか。 頭の悪い私のために是非ともアドバイスを頂ければ大変助かるのですが。 どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascriptからframeへの出力方法
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function init(){ $("f1").innerHTML = "hoge"; $("f2").innerHTML = "piyo"; } </script> </head> <frameset cols="50%,*" onload="init()" > <frame id="f1"> <frame id="f2"> </frameset> </body> </html> 上記、二つに分けたフレームにそれぞれ"hoge"と"piyo"と表示したいのですが出来ません。フレームにjavascriptからアクセスするにはどうしたらよいですか？
- ベストアンサー
- JavaScript
- ファイヤーフォックスでCSSが読み込まれません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- ファイヤーフォックスでCSSが機能しません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- IEでエラー
FireFoxだと問題ないのですが、IEだとエラーが出ます。 原因がわからないので、助けてください。 IEには次のようなエラーが出ます。 ライン：5 文字：1 エラー：構文エラーです コード：0 ソースコードは以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> 。。。。 以上、すみませんが、よろしくお願いします。
- ベストアンサー
- HTML
- ホームページでのジャバスクリプトについて
下記の記述でimport行を書くと構文エラーになりました。 解決方法を教えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <TITLE>2013秋限定</TITLE> <SCRIPT language="JavaScript"> <!-- import javax.swing.JFrame; import javax.swing.JOptionPane; function chk8() { JFrame parent = ...; JOptionPane.showMessageDialog(parent, "合計が８個になっていません、\nもう一度入力してください。", "入力エラー", JOptionPane.WARNING_MESSAGE); return true; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> ・ ・ ・ <INPUT type="button" value="購入する" onClick="chk8()"> ・ ・ ・ </BODY> </HTML>
- ベストアンサー
- JavaScript
お礼
あ、そんな単純な事だったんですね。。 flushメソッドがないものだから、てっきりそういう概念がjavascriptに存在しないのかと思っていました。 失礼しました。 そしてありがとうございました。