のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,062,837人
昨日:no data人
今日:
最近の注目
人気の最安値情報

    私的良スレ書庫

    不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitter
    ログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。

    元スレ+ JavaScript の質問用スレッド vol.76 +

    JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニュー
    スレッド評価: スレッド評価について
    みんなの評価 :
    タグ : - 計算機プログラミング + 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。
    レスフィルター : (試験中)
    ←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitter
    151 : Name_Not - 2010/02/03(水) 01:31:05 ID:??? (+4,-30,+0)
    >>149
    酒飲んでるから適当に書くよー。

    1) thisには、メソッドが呼び出すのに使用されたオブジェクトへの参照が代入される。
    window.test()
    この場合、testメソッド内でのthisの値は、windowオブジェクト

    2) タイマー関係のメソッドは少し特別で、指定された関数をwindowオブジェクトを介して
    呼び出す。つまり、呼び出された関数内でのthisの値は、windowオブジェクト。

    以上の2点を踏まえたうえで、3。

    3) var self = this; setInterval(function() { self.move() }, 20);
    まず最初に、関数のスコープは定義時に決定される。(定義された場所のスコープ)
    つまり、この無名関数からself変数にアクセスすることは可能。

    そしてself変数にはthisの値、つまりboxオブジェクトへの参照が代入されている。

    ここでsetIntervalの登場。先も説明したけど、この無名関数はwindowオブジェクトを
    介して呼び出される。つまり、thisの値はwindow。
    しかし、無名関数内部ではself変数つまりboxオブジェクトを介してmoveメソッドを呼び出している。(ここ重要!)

    言い換えれば、JSのスコープチェーンの性質を利用して、現在(box内)のthisの値へアクセスする方法を確保している感じ。


    分からんなら、また質問すればいいよ。おやすみ。
    153 : Name_Not - 2010/02/03(水) 05:56:37 ID:??? (+4,-30,+0)
    >>150
    >>151
    >>152
    なるほど、setIntervalの中でthisするとwindowオブジェクトを参照
    するとは思いませんでした。4にかいてましたね。

    リンク先の>名前 box を使いまわせなるように、 this を使う、
    の部分のコードで、仮にsetInterval(this.moveってやった場合、
    このthisは、startからのオブジェクト、つまりboxオブジェクトを参照するのだと勘違いしてました。
    (ただここで一つ疑問が・・それは一番最後で。)

    setInterval自身がwindowオブジェクトからタイマー関数を使うための無名関数と、
    この無名関数の中でmoveメソッドを呼び出したり、moveメソッド内のthisでboxオブジェクトを参照するために、
    (thisだとwindowになってしまうので)selfで参照させているわけですね。
    ここで無名関数使うことで、moveメソッド内でbox.leftやbox.elementとせずに
    thisで代用しても辻褄が合うし。
    リンク先のsetInterval部分に関してかなりすっきりしました。
    ありがとうございました!

    疑問
    リンク先の>オブジェクトを使う場合、
    のところで、setInterval(this.moveとしていているのだから
    window.moveとなるはずなのに?boxオブジェクトのmoveを参照できているのはどうしてなのかと。
    box.start();でstart内のthisはboxオブジェクト、
    setInterval内の直thisはwindowオブジェクトでいいんですよね・・
    154 : Name_Not - 2010/02/03(水) 05:57:30 ID:??? (+3,-30,+0)
    今回質問のコードまとめ
    >オブジェクトを使う場合
    var box = {
    element: document.getElementById('target003'),
    left: 0,
    move: function() {
    box.left += 4;
    box.element.style.left = box.left + 'px';
    if (box.left > 400) clearInterval(box.id);
    },
    start: function() {
    this.id = setInterval(this.move, 20);
    }
    };
    box.start();

    >名前 box を使いまわせなるように、 this を使う
    var box = {
    element: document.getElementById('target004'),
    left: 0,
    move: function() {
    this.left += 4;
    this.element.style.left = this.left + 'px';
    if (this.left > 400) clearInterval(this.id);
    },
    start: function() {
    var self = this;
    this.id = setInterval(function() { self.move() }, 20);
    }
    };
    box.start();
    155 : 147 - 2010/02/03(水) 06:24:36 ID:??? (+9,-30,-62)
    と、考えてみたら
    this.moveなので、
    単にbox.moveを参照していて
    setInterval(function(){ box.left~~ }, 20)
    ということだったのでしょうか。もうちょっと調べてみようと思います・・
    156 : Name_Not - 2010/02/03(水) 06:35:21 ID:??? (+10,-30,-51)
    >>155
    おk、あってるよ。
    もう気づいたかも知れないけど、上のコードの
       setInterval(this.move, 20); が setInterval(function(){ this.move(); }, 20); 
    こうなっているとアウトね。
    157 : Name_Not - 2010/02/03(水) 06:48:52 ID:??? (+4,-30,-132)
    >>156
    ついさっきまでthis.moveのところをthis.move()的に見てしまっていました。
    そしてリファレンスのsetIntervalをみてみると、
    関数かコードの指定だそうで、それも踏まえて
    setInterval(this.move, 20);とsetInterval(function(){ this.move(); }, 20);
    の違いもわかるようになりました。
    ありがとうございました!
    158 : Name_Not - 2010/02/03(水) 07:29:35 ID:??? (+31,-29,-82)
    IE限定での話ですが・・・(現在IE8です)

    HTMLの各要素のインスタンスを生成する(?)クラスの一覧、もしくはJavaScript上で
    該当するすべてのクラスを列挙する方法ってありますか?

    HTML画像(imgタグ)のインスタンスを生成するクラスがImageであるように
    他のHTML要素も同様にHTML要素のインスタンスを生成するクラスが存在すると
    思うのですが、そのクラスの名称を知りたいです
    159 : Name_Not - 2010/02/03(水) 08:00:16 ID:??? (+13,-27,-64)
    >>158
    ない。JavaScriptはプロトタイプ方式のオブジェクト指向言語で
    あり、クラスという概念は本来存在しない。HTML要素のオブジェクトを
    生成するのはdocument.createElementでしょ。勉強すれば。
    160 : 158 - 2010/02/03(水) 08:46:55 ID:??? (+30,-30,-252)
    >>159
    レスありがとう。無理なのか・・・orz
    言語としてクラスが無いのは一応知っているつもりだけど便宜上使いました。以下も使わせてください

    たとえば
    <html><head></head><body>
    <img id="A"><img id="B">
    <script type="text/javascript">
    Image.prototype.func01 = function(){alert("func01")};
    document.getElementById("A").func01();
    document.getElementById("B").func01();
    </script>
    </body></html>
    みたいにすればimgタグのインスタンスに共通するメソッドを定義することが出来ますが
    他のタグやスタイルシートで同様にインスタンスに共通するメソッドを定義する事は
    不可能と言うことですか?

    #IEでDOM系のメソッドを追加を考えているのですが・・・
    161 : Name_Not - 2010/02/03(水) 08:58:28 ID:??? (+12,-19,-15)
    >>158
    標準はコレ:http://www.w3.org/TR/DOM-Level-2-HTML/
    IEが標準に準拠しているかどうかは怪しいけど…

    MSDNを探せば何かあるんじゃないかな。
    162 : Name_Not - 2010/02/03(水) 10:20:31 ID:??? (+46,+8,-170)
    >>160
    だからクラス方式でないのにクラス方式の用語で喋ると
    考えられることも考えられなくなるってば。
    ある種別の要素すべてに共通なメソッドを追加定義したい場合、
    その種別の要素が共通に持つプロトタイプオブジェクトが「あれば」
    そのオブジェクトに関数をプロパティとして追加すれば可能。
    その「あるかどうか」「あればどれか」を探索するのには、
    プロパティ __proto__ が使える環境ならそれを何段かたどって行けば
    できると思われ。IE8で __proto__ が使えるのかどうかは知らん。
    163 : Name_Not - 2010/02/03(水) 10:26:42 ID:??? (+3,-30,-167)
    ちなみに次のコードはFxでは動作したがIE7では駄目だった。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>???</title>
    <script type="text/javascript">
    function test() {
    document.createElement("H1").__proto__.tt = function() { alert('Y'); };
    document.getElementById('i1').tt();
    }
    </script>
    </head><body>
    <h1 id="i1">test...</h1>
    <div><button onclick="test()">TEST</button></div>
    </body></html>
    164 : Name_Not - 2010/02/03(水) 10:49:13 ID:??? (+4,-29,-1)
    165 : Name_Not - 2010/02/03(水) 11:24:24 ID:??? (-1,-29,-39)
    すいません、PHPやってるんですが
    web上でマウスをドラッグ、ドロップすると
    グラフや表などが動的に動くって、(データも変更)
    javascript か actionscript なんですか?
    166 : Name_Not - 2010/02/03(水) 12:03:42 ID:??? (+57,+29,-17)
    エリートのPHPプログラマ様が来たんだ、誰か答えてやりなさい
    167 : Name_Not - 2010/02/03(水) 12:50:34 ID:??? (+3,-24,-24)
    どう見ても焼酎

    ・マウス"を"ドラッグ、ドロップするとは?
    ・"動的に動く"って具体的にどゆこと?
    168 : Name_Not - 2010/02/03(水) 14:18:26 ID:??? (+13,-29,-31)
    >>164
    横やりだけど、IE8でそこに書いてある
    >Element.prototype.isElement = true;
    とかElementが無いと言われて動かないぞ?
    もっと下の方にあるHTMLDocument.~も無いと言われる
    169 : Name_Not - 2010/02/03(水) 15:46:40 ID:??? (+16,-18,-15)
    >>168
    標準モードでやってるか?
    170 : Name_Not - 2010/02/03(水) 17:20:13 ID:??? (+3,-26,-21)
    >>169
    さんきゅう。ビンゴ、デフォがIE=5だった
    初回起動時に設定をいじった影響かなぁ
    171 : Name_Not - 2010/02/03(水) 18:27:44 ID:??? (+9,-30,-197)
    >>152
    >setInterval 経由で呼び出した関数はthis=~~~~~~~ となってしまう。
    それが正しいならこれはどうなる?
    var si = {setInterval: window.setInterval };
    si.setInterval(this.move, 20);

    単にwindow(グローバルオブジェクト)がデフォルト値になるだけ

    http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/10_Execution_Contexts.html#section-10.2.3
    >this 値は呼出側が提供する。呼出側が提供する this 値がオブジェクトでない場合(null である場合を含む)、 this 値はグローバルオブジェクトとする。
    172 : Name_Not - 2010/02/03(水) 20:02:46 ID:??? (+4,-30,-69)
    >>171
    si.setInterval ってそもそも実行できなくね?
    適当にコード作って実行しても動かなかったんだけど
    var si = {setInterval: window.setInterval};
    si.setInterval(function(){ document.title = new Date().toLocaleString() },20);
    ちなみに↓なら問題なく動いた
    window.setInterval(function(){ document.title = new Date().toLocaleString() },20)
    どこか問題あったらスマン、指摘して欲しい
    173 : Name_Not - 2010/02/03(水) 20:14:41 ID:??? (+3,-30,-41)
    と思ったらIEで動いたわ。火狐だとダメだった。なんでだろー
    var si = {setInterval: window.setInterval};
    si.setInterval(function(){ document.title = (this === window) },20);
    こう書き換えるとthisはwindowをさしてるのがはっきり分かるな。
    174 : Name_Not - 2010/02/03(水) 22:17:47 ID:??? (+3,-30,-82)
    windowの多くの関数がthisを見てるからじゃないのか

    try{
    window.setTimeout.call({}, function(){ alert("setTimeout"); }, 0);
    }catch(e){
    alert(e);
    }
    175 : Name_Not - 2010/02/04(木) 07:59:49 ID:??? (-22,-30,-84)
    document.body.appendChild(created_elem);は
    さほど支障ないくらいどのブラウザでもいけますかね?
    document.getElementsByTagName('body')[0].appendChild(created_elem);
    はどうでしょうか。
    統一できるならどちらかにしたいのですが
    よろしくおねがいします。
    176 : Name_Not - 2010/02/04(木) 13:24:55 ID:??? (+52,+29,-4)
    それぐらい試せばすぐわかるだろ
    178 : Name_Not - 2010/02/04(木) 14:36:55 ID:??? (+0,-30,-120)
    >>175
    対象とする文書が(X)HTMLなら
     ・DOM Level 1 HTML
     ・DOM Level 2 HTML
    をサポートしている処理系でdocument.bodyが使える
    IE6以上、Firefox、Safari、Chrome、OperaならOK

    任意のXML文書内でXML Namespace使ってXHTML利用しているようなパターンは知らん
    179 : Name_Not - 2010/02/04(木) 23:04:36 ID:??? (-27,-30,-101)
    http://pc11.2ch.net/test/read.cgi/hp/1262851395/412

    ここで聞いてコピペでやれそうだったのでjavaScriptに初挑戦してみたのですが
    コピペでやってみると、インラインフレームの中のページでエラーが発生して
    エラー: オブジェクトがありません
    URL: file:///C:/~とファイル名まで表示

    で、インラインフレームを表示させる方のページでも
    スクリプトエラー、アクセスが拒否されました
    URL: インラインフレームの中のページのURL

    何がなんだかさっぱりで…どのようにすればいいのでしょうか
    180 : [―{}@{} - 2010/02/04(木) 23:28:45 ID:??? (+41,+29,-17)
    ふたつリンクを紹介してもらったみたいだけどどっちの方法を使った?
    たぶんあなたのやりたいことは二つ目の方じゃないと無理だよ
    181 : Name_Not - 2010/02/04(木) 23:32:02 ID:??? (+63,+29,-21)
    >>180
    上のリンクの方でやっていました
    下のリンク先の方法でチャレンジしてみます

    ありがとございます!
    182 : Name_Not - 2010/02/04(木) 23:51:07 ID:??? (+20,-7,-4)
    下の方法でもドメイン違ってできないに100ガバス。
    183 : Name_Not - 2010/02/05(金) 00:30:22 ID:??? (+57,+29,-34)
    システムの共通部品をjavascriptで用意しているんですけど、
    jsファイルの分け方って一般的にどういうふうにやりますか?
    184 : Name_Not - 2010/02/05(金) 00:36:29 ID:??? (+49,+21,-24)
    そりゃあ一緒に使うjsはまとめて使いやすくするだろ。
    jsの’共通部品’を考えればおk。
    185 : Name_Not - 2010/02/05(金) 01:00:57 ID:??? (+52,+29,+0)
    なるほど、確かにそうですね。
    187 : Name_Not - 2010/02/05(金) 08:50:44 ID:??? (-11,-30,-129)
    >>186
    > for (var i = 0, elements = [], length = arguments.length; i < length; i++)
    これは、
    var i = 0, elements = [], length = arguments.length;
    for(; i < length; i++)
    と同じ。
    188 : Name_Not - 2010/02/05(金) 08:53:45 ID:??? (-16,-29,-11)
    >>186
    その理論だと i = 0 の無限ループになるし
    elements = [] も毎回繰り返すことになるよ?
    189 : Name_Not - 2010/02/05(金) 08:55:02 ID:??? (+3,-30,-108)
    length = arguments.length も一度しか処理されない。
    i = 0 と elements = [] が一度しか処理されないことがわかってるのに、
    なんで同列に書かれてる length = arguments.length が別の動作をすると考えるんだ?
    190 : Name_Not - 2010/02/05(金) 12:24:20 ID:??? (+57,+29,-23)
    脳内で自分が思い込んだようにプログラムを俺様解釈する典型。
    191 : 179 - 2010/02/05(金) 12:36:34 ID:??? (+3,-29,-105)
    下のリンク先の方法でやってみましたが、リンク先の掲示板にもあるように正常に作動しないブラウザがありました。

    で、上のリンクでもう一度やってみて、「オブジェクトがありません」とのエラーが出ますが
    一応アップしてみたらIE、Firefox、Chrome、Sleipnirで動作確認できました

    「オブジェクトがありません」このエラーの解決方法がありましたら教えてください。。
    192 : Name_Not - 2010/02/05(金) 16:41:23 ID:??? (+57,+29,-24)
    そういう質問ならエラーが出る最小限の例(そのまま試せるもの)を用意して
    欲しいな。
    193 : Name_Not - 2010/02/05(金) 20:18:13 ID:FDSGyGu1 (-22,+29,-23)
    >>187
    forを特別に見ていましたが
    なるほど、よくわかりました。
    >>188,189
    カンマ以降を何か別のものと勘違いしておりました。

    ありがとうございました!
    195 : Name_Not - 2010/02/05(金) 22:39:34 ID:??? (-16,-30,-28)
    jQuery なら $("input[type='button']")
    197 : 179 - 2010/02/05(金) 23:15:44 ID:??? (+3,-30,+0)
    すみません。↓をそのまま持ってきました
    <style type="text/css">
    html{
    border:none;
    }
    body{
    margin:0;
    padding:0;
    }
    </style>
    <script type="text/javascript">
    var iframeHeight = function(){
    if(!window.parent.document) return false;

    try { // !IE
    document.styleSheets[0].insertRule( 'html' + '{overflow:hidden;}', document.styleSheets[0].cssRules.length );
    } catch (e) { // IE
    document.styleSheets[0].addRule( 'html', '{overflow:hidden;}');
    }

    height = document.getElementsByTagName('div')[0].offsetHeight;
    window.parent.document.getElementById('sample1').style.height = height + 'px';

    setTimeout('iframeHeight()',750)
    }

    try {
    window.addEventListener('load', iframeHeight, false);
    } catch (e) {
    window.attachEvent('onload', iframeHeight);
    }
    </script>
    198 : 続き - 2010/02/05(金) 23:22:37 ID:??? (+18,-30,-139)
    http://www.yomotsu.net/lab/javascripts/iframe-height
    javaは全然知らないので上記のサイトを見てそのままやったつもりです

    あとはインラインフレームで表示させるコンテンツの終始に<div>と</div>
    インラインフレームを表示させるページに
    <div><IFRAME src="http://ホームページURL" id="sample1"></IFRAME></div>

    上にも書きましたが正常に動いていますが、「オブジェクトがありません」とエラーになってしまいます。
    御教授お願いします…
    199 : Name_Not - 2010/02/06(土) 02:10:38 ID:??? (+9,-19,-1)
    >>198
    >>1
    >  一、JavaScriptはJavaとは別物であると知っている者
    200 : Name_Not - 2010/02/06(土) 04:04:13 ID:??? (+61,+29,-46)
    JavaScriptの実行を容易に中断する方法って無いですかね?
    階層が深いところでエラーが発生してもコードを止めるのが凄く大変
    raiseやexitみたいなのがあれば楽なのだが・・・
    ←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript スレッド一覧へ
    スレッド評価: スレッド評価について
    みんなの評価 :
    タグ : - 計算機プログラミング + 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

    類似してるかもしれないスレッド


    トップメニューへ / →のくす牧場書庫について