私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレ+ JavaScript の質問用スレッド vol.85 +
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
すみません。どれが冗談で、どれが本当のレスなのか教えていただけると嬉しいです。
>>204
お前の顔が冗談
お前の顔が冗談
>>205
アニメーション消せよ
アニメーション消せよ
>>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;
},
配列の中身は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;
},
続き
----------
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();
}
----------
----------
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();
}
----------
for (var i in this) {
ary[i] = this[i];
for (var j = 0; j < aryLen; j++) {
ary[j][i] = this[i];
}
}
一体これは何が起こってるんだ・・・
ary[i] = this[i];
for (var j = 0; j < aryLen; j++) {
ary[j][i] = this[i];
}
}
一体これは何が起こってるんだ・・・
やっぱ問題あるみたいですね。
えーとまず、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]; //配列内の要素にメソッドを設定
}
}
----------
という感じなのですが・・・。
えーとまず、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]; //配列内の要素にメソッドを設定
}
}
----------
という感じなのですが・・・。
> 配列内の要素を this としてメソッドを実行したい
まず、DOM 要素に expando プロパティを追加して、
自作オブジェクトと同じ振る舞いをさせようとする設計が、
いまいちなんじゃないか。
まず、DOM 要素に expando プロパティを追加して、
自作オブジェクトと同じ振る舞いをさせようとする設計が、
いまいちなんじゃないか。
>>182
確認してくださってありがとうございます。
どうやらSafariだと(iPhoneからも)だめみたいです。(WinXP:Firefox、Opera、Safari、IE各最新版で確認 Safari以外はok)
初回は動くのですがリロードするとなぜか飛んでしまいます。
いっそリロードすんなって書き添えておこうか…
もう少し奮闘してみます。
確認してくださってありがとうございます。
どうやらSafariだと(iPhoneからも)だめみたいです。(WinXP:Firefox、Opera、Safari、IE各最新版で確認 Safari以外はok)
初回は動くのですがリロードするとなぜか飛んでしまいます。
いっそリロードすんなって書き添えておこうか…
もう少し奮闘してみます。
>>219
いや、DOM 要素にべたべた関数貼り付けるなんてまともじゃないし参考にしちゃダメだよ。いろんな意味で。
いや、DOM 要素にべたべた関数貼り付けるなんてまともじゃないし参考にしちゃダメだよ。いろんな意味で。
>>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に設定してスタートを遅らせるような感じです。
単純にパッと見の並びの問題です。色のグラデーションの他に色々つけたいのと同時に実行されるのがあった場合とか、例えば、
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に設定してスタートを遅らせるような感じです。
あー間違えた。個別に設定した方が良かったかな・・・。
下の例は、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は実行されないでした・・・。
下の例は、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は実行されないでした・・・。
グレーアウトというのですね
これはどうやって実装するのでしょうか?
これはどうやって実装するのでしょうか?
>>222
利便性には納得できんが、興味がわいたので、明日になるかもしれんが実装してみるわ。
利便性には納得できんが、興味がわいたので、明日になるかもしれんが実装してみるわ。
>>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でもいけると思う。
下の普通の要素群と、上のイメージを表示している要素の間に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でもいけると思う。
>>216
わざわざ作って頂きありがとうございます!
パッと見では私には理解できないスクリプトですが、調べながら勉強させていただきます
Accordionというのも調べてみます、ありがとうございました
わざわざ作って頂きありがとうございます!
パッと見では私には理解できないスクリプトですが、調べながら勉強させていただきます
Accordionというのも調べてみます、ありがとうございました
<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を使うときこんな感じでいいですか?
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を使うときこんな感じでいいですか?
>>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)
とかにしたほうがマシなコードになるだろう。
いちおうできたぞ。
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
> それにElementを書き換えると既存のコードがおかしくなる可能性がある。DOM Interfaceオブジェクトは残すべきかと。
これはうっかりだった。ご指摘、ありがとう。
メモリリークのほうは、オレが無知だからかもしれないが、ちょっと納得できない。
setTimeoutの近くで循環参照は起きてないと思うんだが。
ただ、一部のElementオブジェクト(名前がまずいのもご指摘のとおり)は循環参照しているので、ここでメモリリークを起こすかもしれない。
やはり、jQueryとか既存のライブラリをうまく使うのが吉か。
> それにElementを書き換えると既存のコードがおかしくなる可能性がある。DOM Interfaceオブジェクトは残すべきかと。
これはうっかりだった。ご指摘、ありがとう。
メモリリークのほうは、オレが無知だからかもしれないが、ちょっと納得できない。
setTimeoutの近くで循環参照は起きてないと思うんだが。
ただ、一部のElementオブジェクト(名前がまずいのもご指摘のとおり)は循環参照しているので、ここでメモリリークを起こすかもしれない。
やはり、jQueryとか既存のライブラリをうまく使うのが吉か。
>>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は循環参照が形成されやすいから困る…。
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は循環参照が形成されやすいから困る…。
なんでjavascript使ってるんですか?
厨2病なんですか?
node.jsってjavascriptだとガキくさくて舐められるので
サーバーサイドとかわめいてちゃってるんですか?
javascript(大笑)
厨2病なんですか?
node.jsってjavascriptだとガキくさくて舐められるので
サーバーサイドとかわめいてちゃってるんですか?
javascript(大笑)
なんでjavascript使ってるんですか?
厨2病なんですか?
node.jsってjavascriptだとガキくさくて舐められるので
サーバーサイドとかわめいてちゃってるんですか?
javascript(大笑)
厨2病なんですか?
node.jsってjavascriptだとガキくさくて舐められるので
サーバーサイドとかわめいてちゃってるんですか?
javascript(大笑)
サーバサイドJSの話題はWebProg板でどうぞ。
こちらはブラウザ上で稼働するクライアント側スクリプトの話題。
他のクライアント側スクリプト言語の話題(そんなのあるの?)は
この板でいいと思うけど別のスレを立ててそれでやってください。
こちらはブラウザ上で稼働するクライアント側スクリプトの話題。
他のクライアント側スクリプト言語の話題(そんなのあるの?)は
この板でいいと思うけど別のスレを立ててそれでやってください。
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript スレッド一覧へ
みんなの評価 : 類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.95 + (1001) - [97%] - 2012/1/17 4:16
- + JavaScript の質問用スレッド vol.81 + (1001) - [97%] - 2010/12/10 20:01
- + JavaScript の質問用スレッド vol.89 + (1001) - [97%] - 2011/9/4 4:17
- + JavaScript の質問用スレッド vol.88 + (1001) - [97%] - 2011/7/20 7:03
- + JavaScript の質問用スレッド vol.87 + (1001) - [97%] - 2011/6/21 6:33
- + JavaScript の質問用スレッド vol.86 + (1001) - [97%] - 2011/5/27 21:50
- + JavaScript の質問用スレッド vol.84 + (1001) - [97%] - 2011/3/30 7:32
- + JavaScript の質問用スレッド vol.83 + (1001) - [97%] - 2011/2/24 8:02
- + JavaScript の質問用スレッド vol.82 + (1001) - [97%] - 2011/1/19 7:54
- + JavaScript の質問用スレッド vol.80 + (1001) - [97%] - 2010/11/9 2:17
- + JavaScript の質問用スレッド vol.75 + (1001) - [97%] - 2010/1/23 1:07 ○
- + JavaScript の質問用スレッド vol.135 + (1002) - [95%] - 2018/11/23 10:30
- + JavaScript の質問用スレッド vol.115 + (1001) - [95%] - 2014/5/29 16:16
- + JavaScript の質問用スレッド vol.105 + (1001) - [95%] - 2013/5/20 4:45
- + JavaScript の質問用スレッド vol.125 + (1001) - [95%] - 2015/10/7 17:45
- + JavaScript の質問用スレッド vol.94 + (1001) - [95%] - 2012/1/8 15:46
- + JavaScript の質問用スレッド vol.97 + (1001) - [95%] - 2012/3/1 3:31
トップメニューへ / →のくす牧場書庫について