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

    私的良スレ書庫

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

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

    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
    201 : Name_Not - 2011/04/03(日) 15:54:56.23 ID:??? (+27,+29,-5)
    30言語以上使える俺でもこのペースは無理だわ
    202 : Name_Not - 2011/04/03(日) 15:55:54.96 ID:??? (+21,+27,-34)
    >>192
    意味わからんけど配列の中身は何なの?
    オブジェクトじゃないとプロパティは付加できないよ
    204 : Name_Not - 2011/04/03(日) 18:33:26.68 ID:??? (+32,+29,-10)
    すみません。どれが冗談で、どれが本当のレスなのか教えていただけると嬉しいです。
    206 : Name_Not - 2011/04/03(日) 18:49:03.53 ID:??? (+27,+29,+0)
    >>204
    お前の顔が冗談
    207 : Name_Not - 2011/04/03(日) 19:02:52.13 ID:??? (+12,+28,+0)
    >>205
    アニメーション消せよ
    208 : Name_Not - 2011/04/03(日) 19:25:02.72 ID:??? (+70,-30,-270)
    >>202
    配列の中身はDOM要素です。一応できました。何も問題なければ・・・。
    >>203すみません。全体的に説明が分かりづらかったみたいです。
    function Func() {
      return new Func.prototype.init();
    }
    Func.prototype = {
      init: function() {
        var elm = document.getElementById('box'), elm2 = document.getElementById('box2'), ary = [elm, elm2], aryLen = ary.length;
        for (var i in this) {
          ary[i] = this[i];
          for (var j = 0; j < aryLen; j++) {
            ary[j][i] = this[i];
          }
        }
        return ary;
      },
      color: function() {
        if (this instanceof Array) {
          for (var i = 0, len = this.length; i < len; i++) {
            this[i].style.background = 'black';
          }
        } else {
          this.style.background = 'black';
        }
        return this;
      },
    209 : 208 - 2011/04/03(日) 19:28:22.25 ID:??? (-27,-30,-166)
    続き
    ----------
      color2: function() {
        if (this instanceof Array) {
          for (var i = 0, len = this.length; i < len; i++) {
            this[i].style.background = 'red';
          }
        } else {
          this.style.background = 'red';
        }
        return this;
      }
    }
    Func.prototype.init.prototype = Func.prototype;
    window.onload = function() {
      var f = Func();
      f.color().color2(); f[0].color().color2(); f[1].color();
    }
    ----------
    210 : Name_Not - 2011/04/03(日) 19:35:23.95 ID:??? (-27,-30,-19)
        for (var i in this) {
          ary[i] = this[i];
          for (var j = 0; j < aryLen; j++) {
            ary[j][i] = this[i];
          }
        }
    一体これは何が起こってるんだ・・・
    211 : Name_Not - 2011/04/03(日) 19:40:40.05 ID:??? (+22,+29,+0)
    どこから突っ込めばいいんだろw
    212 : 208 - 2011/04/03(日) 20:02:43.30 ID:??? (-27,-30,-142)
    やっぱ問題あるみたいですね。
    えーとまず、var f = Funcはinitのfunctionでelm,elm2で何でもいいので要素を取得してary = []の配列に入れます。
    それから、f.color();とかf.color2()のようにして、何でもいいのでinitで作った配列自身、または配列内の要素を
    thisとしてメソッドを実行したいので、
    ----------
        for (var i in this) {
          ary[i] = this[i]; //配列自身にFunc.prototypeのメソッドを設定
          for (var j = 0; j < aryLen; j++) {
            ary[j][i] = this[i]; //配列内の要素にメソッドを設定
          }
        }
    ----------
    という感じなのですが・・・。
    213 : Name_Not - 2011/04/03(日) 20:34:43.57 ID:??? (-29,-29,-73)
    > 配列内の要素を this としてメソッドを実行したい

    まず、DOM 要素に expando プロパティを追加して、
    自作オブジェクトと同じ振る舞いをさせようとする設計が、
    いまいちなんじゃないか。
    214 : 180 - 2011/04/03(日) 20:39:40.76 ID:??? (-21,-29,-64)
    >>182
    確認してくださってありがとうございます。
    どうやらSafariだと(iPhoneからも)だめみたいです。(WinXP:Firefox、Opera、Safari、IE各最新版で確認 Safari以外はok)
    初回は動くのですがリロードするとなぜか飛んでしまいます。
    いっそリロードすんなって書き添えておこうか…
    もう少し奮闘してみます。
    215 : 182 - 2011/04/03(日) 20:47:22.77 ID:??? (+30,+29,-18)
    >>184
    レス遅くなりすみません。すごく丁寧な回答ありがとうございます!
    これから各リンク読んでやってみます。 とりあえずお礼まで。。

    >>214
    たぶんアンカー>>184の間違いみたいですよ。
    216 : Name_Not - 2011/04/03(日) 20:47:52.33 ID:??? (+19,+24,-27)
    >>205
    いちおうできだぞ。
    http://jsbin.com/izoxi4

    ただ、多少動作はかわるが、jQuery UI の Accordion を使ったほうが簡単だろうな。
    217 : Name_Not - 2011/04/03(日) 20:53:50.78 ID:??? (-25,-30,-91)
    >>208
    color: function(color) { this.style.background = color; }

    var arr1 = Func([elem1, elem2]);
    var arr2 = Func(document.getElementsByTagName("p"));

    >>203は配列でもNodeListでも一応動くことは動くのだが。
    219 : 208 - 2011/04/03(日) 21:14:40.97 ID:??? (+29,+29,-16)
    >>217
    今改めてコード見ました。すこいです!上級者のコードって全然違いますね。めちゃくちゃ勉強になります!
    参考にします。有難う御座いました。
    221 : Name_Not - 2011/04/03(日) 21:48:34.81 ID:??? (+35,+29,-36)
    >>219
    いや、DOM 要素にべたべた関数貼り付けるなんてまともじゃないし参考にしちゃダメだよ。いろんな意味で。
    222 : 208 - 2011/04/03(日) 22:02:32.24 ID:??? (-26,-30,+0)
    >>220
    単純にパッと見の並びの問題です。色のグラデーションの他に色々つけたいのと同時に実行されるのがあった場合とか、例えば、
    var n = Func('div', '#header', 'li');
    n[0].color[0](1).opacity[2](1).height[3](3);
    n[1].color[1](1).opacity[3](2).height[2](2);
    n[2].color[2](4).opacity[4](0).htight[7](4);
    基本的に前から実行してもいいのですが、上記の場合は、
    n[0]は最初の1秒目でbackgroundが赤から青に変わりながら透明度が0.2になる、2秒目には何もしないで3秒目にheightが0になり消える。
    n[1]は1秒目でcolorが紫から黄色になり2秒目に透明度が0.7になりながらheightが200pxになる。
    n[2]は4秒目にcolor,opacity,heightが同時に変化するみたいな感じです。Flashみたいな感じにできるかなと思ったので・・・。
    何秒目にどの要素でどのアクションが起こってるか分かりやすいかなと。
    だからこの場合だと
    n[0].color[0](3).opacity[2](2).height[3](1);
    n[1].color[2](1).opcity[2](2).height[4](100);
    n[2].color[3](-1).opcity[4](3).height[3](3);
    1秒目にn[0]が赤から青に変わると同時にn[1]のheightが1px、
    2秒目にn[0]とn[1]のopacityが0.2になる。3秒目にn[2]の透明度が0.7になりながらheightが1pxになり、n[0]が黄色から緑に変わる。
    100秒目にn[1]のheightが50pxに変わるみたいな感じです。-1はfalseで実行されない。
    時間を遅らせるのはscriptaclousを真似して()内の引数をとって内部オプションのdelayに設定してスタートを遅らせるような感じです。
    223 : 208 - 2011/04/03(日) 22:07:39.77 ID:??? (-27,-30,-69)
    あー間違えた。個別に設定した方が良かったかな・・・。
    下の例は、1秒目にn[1]のcolorとn[0]のheightが変化して、
    2秒目にn[0],n[1]のopacity、3秒目にn[0]のcolorとn[2]のopacityとheightが同時、
    100秒目にn[1]のheightが変化しn[2]のcolorは実行されないでした・・・。
    225 : 164 - 2011/04/03(日) 22:34:56.15 ID:dMW+Hc6q (+21,+28,-18)
    グレーアウトというのですね
    これはどうやって実装するのでしょうか?
    226 : Name_Not - 2011/04/03(日) 22:38:43.19 ID:??? (+28,+29,-14)
    >>222
    利便性には納得できんが、興味がわいたので、明日になるかもしれんが実装してみるわ。
    227 : Name_Not - 2011/04/03(日) 22:44:26.88 ID:??? (-24,-30,-151)
    >>225
    下の普通の要素群と、上のイメージを表示している要素の間にZインデックを指定して、div要素をおいている。

    #overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    background-color: #000;
    }

    <div id="overlay" style="opacity: 0.8; width: 1007px; height: 3071px; "></div>

    というか、これくらい自分で調べられんか?
    オレはGoogle Chromeで調べたが、firebugでもいけると思う。
    228 : 205 - 2011/04/03(日) 22:56:23.88 ID:??? (+35,+29,-26)
    >>216
    わざわざ作って頂きありがとうございます!
    パッと見では私には理解できないスクリプトですが、調べながら勉強させていただきます
    Accordionというのも調べてみます、ありがとうございました
    230 : Name_Not - 2011/04/04(月) 02:10:13.57 ID:??? (-7,-30,-144)
    <script type="text/javascript">
    function today(){
    setTimeout("today()",1000);
    var obj=document.getElementById("result");
    obj.value=new Date();}window.onload=today();
    </script></head><body><form>
    現在の時刻:<input id="result" type="text" size="45"><br></form>

    <body onload=today>を使わないとき
    window.onloadを使うときこんな感じでいいですか?
    231 : 208 - 2011/04/04(月) 08:24:28.97 ID:??? (+24,+22,+1)
    >>226
    有難う御座います。よろしくお願いします。
    232 : Name_Not - 2011/04/04(月) 09:30:09.70 ID:??? (-6,-30,-109)
    >>224
    いちおうできたぞ。
    http://jsbin.com/ihusu3/2

    考えてみれば当然のことだが、作ってみてわかったことがある。
     elems[0].color[1](1)
    と呼ぶと、color[1](1)内のthisは、elems[0]でなく、関数の配列であるelems[0].colorになる。
    そうすると、ここでelems[0]を参照するには、elems[0].colorかelems[0].color[1]に個別のデータをつけておく必要があって、これがインスタンス変数にせざるをえない。
    そのために、本来、クラス変数をセットするprototypeを使ったほうが効率的なのにそうできない。

    結論として
     elems[0].color1(1)
    とかにしたほうがマシなコードになるだろう。
    236 : Name_Not - 2011/04/04(月) 11:23:14.65 ID:??? (-26,-29,-96)
    >>224
    メモリリークを避けるのが目的にあるなら>>232もsetTimeoutの部分がリークパターン。
    それにElementを書き換えると既存のコードがおかしくなる可能性がある。DOM Interfaceオブジェクトは残すべきかと。
    238 : Name_Not - 2011/04/04(月) 11:45:57.27 ID:??? (+18,+30,+0)
    239 : 232 - 2011/04/04(月) 12:00:01.59 ID:??? (+27,+29,-177)
    >>236
    > それにElementを書き換えると既存のコードがおかしくなる可能性がある。DOM Interfaceオブジェクトは残すべきかと。
    これはうっかりだった。ご指摘、ありがとう。

    メモリリークのほうは、オレが無知だからかもしれないが、ちょっと納得できない。
    setTimeoutの近くで循環参照は起きてないと思うんだが。

    ただ、一部のElementオブジェクト(名前がまずいのもご指摘のとおり)は循環参照しているので、ここでメモリリークを起こすかもしれない。
    やはり、jQueryとか既存のライブラリをうまく使うのが吉か。
    240 : Name_Not - 2011/04/04(月) 13:10:06.95 ID:??? (-8,-30,-203)
    >>239
    onclickと比較してみるとわかると思う。

    // リークパターン(1)
    var element = document.getElementById('hoge');
    element.onclick = function(){
     // elementを参照しつづける
    };

    // リークパターン(2)
    var element = document.getElementById('hoge');
    window.setTimeout(function(){
     // elementを参照しつづける
    }, 1000);

    // リークパターン(3)
    var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');
    xhr.onreadystatechange = function(){
     // xhrを参照しつづける
    };

    setTimeout(setIntervalも含む)とActiveXObjectは循環参照が形成されやすいから困る…。
    241 : amatinko - 2011/04/04(月) 13:19:05.13 ID:??? (+32,+29,-49)
    なんでjavascript使ってるんですか?
    厨2病なんですか?

    node.jsってjavascriptだとガキくさくて舐められるので
    サーバーサイドとかわめいてちゃってるんですか?

    javascript(大笑)
    243 : amatinpo - 2011/04/04(月) 13:20:57.96 ID:??? (+32,+29,-49)
    なんでjavascript使ってるんですか?
    厨2病なんですか?

    node.jsってjavascriptだとガキくさくて舐められるので
    サーバーサイドとかわめいてちゃってるんですか?

    javascript(大笑)
    245 : 232 - 2011/04/04(月) 13:27:06.00 ID:??? (-21,-15,-28)
    >>244
    あ、(1)と(3)の例では参照が循環しているか…
    たしかに、循環参照を回収できなければ、メモリリークがおきる可能性があるな。
    248 : Name_Not - 2011/04/04(月) 13:35:43.92 ID:??? (-26,-29,-69)
    サーバサイドJSの話題はWebProg板でどうぞ。
    こちらはブラウザ上で稼働するクライアント側スクリプトの話題。
    他のクライアント側スクリプト言語の話題(そんなのあるの?)は
    この板でいいと思うけど別のスレを立ててそれでやってください。
    ←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript スレッド一覧へ
    スレッド評価: スレッド評価について
    みんなの評価 :
    タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

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


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