私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレ+ JavaScript の質問用スレッド vol.113 +
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
ループ中でthis.hogeにアクセスする時、
hoge = this.hoge
としてからアクセスする方がいいですか？
しなくても最適化が働く可能性は高いですが
hoge = this.hoge
としてからアクセスする方がいいですか？
しなくても最適化が働く可能性は高いですが
var o = {
a: 1,
b: 2,
c: 3
};
for ( var key in o ){
delete(o[key]);
console.log(key+' deleted');
console.log(o);
}
こういう風に、ループの中でオブジェクトのメンバを削除しても問題はないようですが
すべてのJavaScriptエンジンで安全なのでしょうか？
ループ中で削除しているのに内部カウンタが変にならないのは何故ですか？
a: 1,
b: 2,
c: 3
};
for ( var key in o ){
delete(o[key]);
console.log(key+' deleted');
console.log(o);
}
こういう風に、ループの中でオブジェクトのメンバを削除しても問題はないようですが
すべてのJavaScriptエンジンで安全なのでしょうか？
ループ中で削除しているのに内部カウンタが変にならないのは何故ですか？
for ( var key in o )ループ中でoにメンバを追加しても、そのメンバはループの中に含まれない
というところを見ると、内部でキーのリストが作成されて、そのリストがループしてるのかな？
というところを見ると、内部でキーのリストが作成されて、そのリストがループしてるのかな？
と思ったけどループの中で一度にメンバを削除するとループ回数は減る
どんな実装だこれ
どんな実装だこれ
ループ処理のなかで関数を呼び出すとき
外にその関数を変数に入れておくといいと聞いてやってみたのですが
エラーが出るものと出ないものがありますこの違いはなんでしょうか？
外にその関数を変数に入れておくといいと聞いてやってみたのですが
エラーが出るものと出ないものがありますこの違いはなんでしょうか？
内部的にはイテレータが呼ばれてる
このイテレータはあんまり厳密に定義されてないは
ただ形としては、最初にキー一覧のリストを保持して、
その最初を列挙し、列挙する度(や列挙中の削除で)消していく形と思われるそうだ
途中で追加されたものは列挙しなくていいし、削除されたは多分列挙されないだろう程度にしか書いてない
つまり早い話実装依存です
このイテレータはあんまり厳密に定義されてないは
ただ形としては、最初にキー一覧のリストを保持して、
その最初を列挙し、列挙する度(や列挙中の削除で)消していく形と思われるそうだ
途中で追加されたものは列挙しなくていいし、削除されたは多分列挙されないだろう程度にしか書いてない
つまり早い話実装依存です
ありがとうございます
自分でキーを取得してそれをループした方がよさそうですね
自分でキーを取得してそれをループした方がよさそうですね
ループの中でクロージャを使ってたら
jshintにDont make functions within a loop
と怒られました
ループの中ではクロージャ使ったら駄目なんでしょうか
jshintにDont make functions within a loop
と怒られました
ループの中ではクロージャ使ったら駄目なんでしょうか
>>806
関数の中でthisが使われているのでは
関数の中でthisが使われているのでは
canvasをfuncution aの中でgetContextしてfunction bの中でcanvasを使う時もう一度
getContextしなければいけないですかね
前処理みたいな感じで一回やるだけにしたいんですが
getContextしなければいけないですかね
前処理みたいな感じで一回やるだけにしたいんですが
>>810
まさにそれでした
まさにそれでした
>>812
動かないです
普通動くと思うんだけどなぁ
<script>//<![CDATA[
/* 2009/08/05, 2010/03/03
・Canvasサンプル
Firefox 3.5以上。 3.0は不可
Opera 10.5以上。10.1は不可
*/
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
function draw() {
c.fillText("fillText デフォルトフォント あういえお", 10, 20);
}
function init() {
/* canvas要素のノードオブジェクト */
/* 四角を描く */
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
}
//]]></script>
</head>
<body onload="init()">
<canvas id="canvas1" width="300" height="300"></canvas>
<input type="button" value="init" onclick="init()">
動かないです
普通動くと思うんだけどなぁ
<script>//<![CDATA[
/* 2009/08/05, 2010/03/03
・Canvasサンプル
Firefox 3.5以上。 3.0は不可
Opera 10.5以上。10.1は不可
*/
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
function draw() {
c.fillText("fillText デフォルトフォント あういえお", 10, 20);
}
function init() {
/* canvas要素のノードオブジェクト */
/* 四角を描く */
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
}
//]]></script>
</head>
<body onload="init()">
<canvas id="canvas1" width="300" height="300"></canvas>
<input type="button" value="init" onclick="init()">
>>814
<script>//<![CDATA[
/* 2009/08/05, 2010/03/03
・Canvasサンプル
Firefox 3.5以上。 3.0は不可
Opera 10.5以上。10.1は不可
*/
var c;
function draw() {
c.fillText("fillText デフォルトフォント あういえお", 10, 20);
}
function init() {
/* canvas要素のノードオブジェクト */
/* 四角を描く */
var canvas = document.getElementById("canvas1");
c = canvas.getContext("2d");
}
//]]></script>
</head>
<body onload="init()">
<canvas id="canvas1" width="300" height="300"></canvas>
<input type="button" value="init" onclick="draw()">
<script>//<![CDATA[
/* 2009/08/05, 2010/03/03
・Canvasサンプル
Firefox 3.5以上。 3.0は不可
Opera 10.5以上。10.1は不可
*/
var c;
function draw() {
c.fillText("fillText デフォルトフォント あういえお", 10, 20);
}
function init() {
/* canvas要素のノードオブジェクト */
/* 四角を描く */
var canvas = document.getElementById("canvas1");
c = canvas.getContext("2d");
}
//]]></script>
</head>
<body onload="init()">
<canvas id="canvas1" width="300" height="300"></canvas>
<input type="button" value="init" onclick="draw()">
そりゃ動くわけねえよ
最初のグローバルcanvasはdom要素がまだできてないから空だし
initの中でvarしたらそれはローカルだし
（htmlの方のdrawのとこは書き間違いだよね？）
<head>
<script>
var canvas;
var c;
function draw() {
c.fillText("fillText デフォルトフォント あういえお", 10, 20);
}
function init() {
canvas = document.getElementById("canvas1");
c = canvas.getContext("2d");
}
</script>
</head>
<body onload="init()">
<canvas id="canvas1" width="300" height="300"></canvas>
<input type="button" value="draw" onclick="draw()">
最初のグローバルcanvasはdom要素がまだできてないから空だし
initの中でvarしたらそれはローカルだし
（htmlの方のdrawのとこは書き間違いだよね？）
<head>
<script>
var canvas;
var c;
function draw() {
c.fillText("fillText デフォルトフォント あういえお", 10, 20);
}
function init() {
canvas = document.getElementById("canvas1");
c = canvas.getContext("2d");
}
</script>
</head>
<body onload="init()">
<canvas id="canvas1" width="300" height="300"></canvas>
<input type="button" value="draw" onclick="draw()">
>>808
オブジェクトから特定のキーを削除したいって話だよね？
var _ = require('lodash');
console.log(_.omit({ a: 1, b: 2, c: 3, d: 4 }, ['b', 'd']));
{ a: 1, c: 3 }
もし、なにか処理してから消したいっていうのであれば、
_.omitの第二引数にクロージャ使える。
_.omit({ a: 1, b: 2, c: 3, d: 4 }, function(value, name) {・・・})
オブジェクトから特定のキーを削除したいって話だよね？
var _ = require('lodash');
console.log(_.omit({ a: 1, b: 2, c: 3, d: 4 }, ['b', 'd']));
{ a: 1, c: 3 }
もし、なにか処理してから消したいっていうのであれば、
_.omitの第二引数にクロージャ使える。
_.omit({ a: 1, b: 2, c: 3, d: 4 }, function(value, name) {・・・})
これを隠蔽する場合はどうするんだろ、初級者だからあまりよくわかっていない
<head>
<style>#canvas1{border:1px solid black;}</style>
<script>
window.onload=function(){
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
var draw1=function(){c.fillText("あいうえお", 10, 20);};
var draw2=function(){c.fillText("かきくけこ", 20, 40);};
document.getElementById("bt1").addEventListener('click',draw1,false);
document.getElementById("bt2").addEventListener('click',draw2,false);
};
</script>
</head>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<input type="button" value="draw1" id="bt1">
<input type="button" value="draw2" id="bt2">
</body>
<head>
<style>#canvas1{border:1px solid black;}</style>
<script>
window.onload=function(){
var canvas = document.getElementById("canvas1");
var c = canvas.getContext("2d");
var draw1=function(){c.fillText("あいうえお", 10, 20);};
var draw2=function(){c.fillText("かきくけこ", 20, 40);};
document.getElementById("bt1").addEventListener('click',draw1,false);
document.getElementById("bt2").addEventListener('click',draw2,false);
};
</script>
</head>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<input type="button" value="draw1" id="bt1">
<input type="button" value="draw2" id="bt2">
</body>
>>795
C/C++のCならTCC(Tiny C Compiler)だとzip展開するだけで環境揃うし、
「tcc -run ソースコード」で実行ファイル作らずに直接実行も出来る。
ただのCだからVCでもgccでもclang/llvmでも動くコードとかも書ける。
Windows限定だがWSHはインストール不要だろうし、
C#/JScript.NET/VB.NETもコンソール版コンパイラは.NET入ってれば勝手に入ってる筈。
GUIまで考えるとWebブラウザでJavaScriptが手軽なのは否定しないがな。
C/C++のCならTCC(Tiny C Compiler)だとzip展開するだけで環境揃うし、
「tcc -run ソースコード」で実行ファイル作らずに直接実行も出来る。
ただのCだからVCでもgccでもclang/llvmでも動くコードとかも書ける。
Windows限定だがWSHはインストール不要だろうし、
C#/JScript.NET/VB.NETもコンソール版コンパイラは.NET入ってれば勝手に入ってる筈。
GUIまで考えるとWebブラウザでJavaScriptが手軽なのは否定しないがな。
>>822のJavaScript部分を単純にjQueryを使うだけでこうなる
$(function(){
var canvas = $("#canvas1")[0];
var c = canvas.getContext("2d");
var draw1=function(){c.fillText("あいうえお", 10, 20);};
var draw2=function(){c.fillText("かきくけこ", 20, 40);};
$(#"bt1").on('click',draw1);
$("#bt2").on('click',draw2);
});
俺ならこう書く。
$(function(){
var canvas = $("#canvas1")[0];
var c = canvas.getContext("2d");
$(#"bt1").on('click', function() {
c.fillText("あいうえお", 10, 20);
});
$("#bt2").on('click', function() {
c.fillText("かきくけこ", 20, 40);
});
});
$(function(){
var canvas = $("#canvas1")[0];
var c = canvas.getContext("2d");
var draw1=function(){c.fillText("あいうえお", 10, 20);};
var draw2=function(){c.fillText("かきくけこ", 20, 40);};
$(#"bt1").on('click',draw1);
$("#bt2").on('click',draw2);
});
俺ならこう書く。
$(function(){
var canvas = $("#canvas1")[0];
var c = canvas.getContext("2d");
$(#"bt1").on('click', function() {
c.fillText("あいうえお", 10, 20);
});
$("#bt2").on('click', function() {
c.fillText("かきくけこ", 20, 40);
});
});
>>825
まずね、hogehogeに入っているのが県名というのがおかしいよ。
普通はキーでなければいけない。
たとえば"県"という文字を省略したいと思ったら大変でしょ？
文字列は人間用もの、内部的にはキーで扱うのが定石。
文字列で入力されたのなら、処理の前にキーに置き換えれば良い。
で、どうしてもhogehogeが文字列でなければならないという話をしてもいいけどさ、
まずさ、そのコード動かないよね？ セレクタを使わない以前の話なんだけど。
動かないからセレクタを使わないで書きたいというのならだめ。
まずそのコードを動くようにしなさい。
まずね、hogehogeに入っているのが県名というのがおかしいよ。
普通はキーでなければいけない。
たとえば"県"という文字を省略したいと思ったら大変でしょ？
文字列は人間用もの、内部的にはキーで扱うのが定石。
文字列で入力されたのなら、処理の前にキーに置き換えれば良い。
で、どうしてもhogehogeが文字列でなければならないという話をしてもいいけどさ、
まずさ、そのコード動かないよね？ セレクタを使わない以前の話なんだけど。
動かないからセレクタを使わないで書きたいというのならだめ。
まずそのコードを動くようにしなさい。
まだ？ どうせみてないだろうけど。
> hogehogeに入っている都道府県名と一致すれば、都道府県が最初から選択されてるいるようにしたいです。
ちゃんと動くように書いたコードはこれ。
var hogehoge = '青森県';
$("select[name='todofuken'] option:contains(" + hogehoge + ")").prop('selected', true);
で、聞きたいんだけど、何のためにこれをセレクタを使わずに書き直したいの？
> hogehogeに入っている都道府県名と一致すれば、都道府県が最初から選択されてるいるようにしたいです。
ちゃんと動くように書いたコードはこれ。
var hogehoge = '青森県';
$("select[name='todofuken'] option:contains(" + hogehoge + ")").prop('selected', true);
で、聞きたいんだけど、何のためにこれをセレクタを使わずに書き直したいの？
<script>
function xxx() {
document.getElementById('xxx').innerHTML = '開始';
//適当な処理
var start = new Date(); for(;;) {var time = new Date() - start; if(time > 5000) {break;}}
document.getElementById('xxx').innerHTML = '処理中';
//適当な処理
var start = new Date(); for(;;) {var time = new Date() - start; if(time > 5000) {break;}}
document.getElementById('xxx').innerHTML = '終了';
}
</script>
<div id="xxx">ここに進捗を表示</div>
<button onClick="xxx()">処理開始</button>
getElementByIdによる書き換えで処理中の進捗を表示をさせたいと思っているのですが
開始→処理中→終了の順で表示されず全ての処理完了後に終了だけが出て来ます
開始→処理中→終了の順で表示させるにはどうすればよいのでしょうか？
書き換えが行われた後に次の処理に行くと思っていたのですが･･･
function xxx() {
document.getElementById('xxx').innerHTML = '開始';
//適当な処理
var start = new Date(); for(;;) {var time = new Date() - start; if(time > 5000) {break;}}
document.getElementById('xxx').innerHTML = '処理中';
//適当な処理
var start = new Date(); for(;;) {var time = new Date() - start; if(time > 5000) {break;}}
document.getElementById('xxx').innerHTML = '終了';
}
</script>
<div id="xxx">ここに進捗を表示</div>
<button onClick="xxx()">処理開始</button>
getElementByIdによる書き換えで処理中の進捗を表示をさせたいと思っているのですが
開始→処理中→終了の順で表示されず全ての処理完了後に終了だけが出て来ます
開始→処理中→終了の順で表示させるにはどうすればよいのでしょうか？
書き換えが行われた後に次の処理に行くと思っていたのですが･･･
>>828
描画のタイミング
<script>
function xxx() {
document.getElementById('xxx').innerHTML = '開始';
//適当な処理
setTimeout(function() {
document.getElementById('xxx').innerHTML = '処理中';
//適当な処理
setTimeout(function() {
document.getElementById('xxx').innerHTML = '終了';
}, 5000);
}, 5000);
}
</script>
<div id="xxx">ここに進捗を表示</div>
<button onClick="xxx()">処理開始</button>
描画のタイミング
<script>
function xxx() {
document.getElementById('xxx').innerHTML = '開始';
//適当な処理
setTimeout(function() {
document.getElementById('xxx').innerHTML = '処理中';
//適当な処理
setTimeout(function() {
document.getElementById('xxx').innerHTML = '終了';
}, 5000);
}, 5000);
}
</script>
<div id="xxx">ここに進捗を表示</div>
<button onClick="xxx()">処理開始</button>
変数宣言についてなんですが
関数内で一回しか登場しないのを変数に入れるのは無意味なんですか？
関数内で一回しか登場しないのを変数に入れるのは無意味なんですか？
>>832
いいえ、無意味とは限りません。
それは説明用変数って呼ばれるものです。
http://hamasyou.com/archives/000199#説明用変数の導入
> 長くて、よく考えないとわからないような評価式があった場合、
> 一時変数を使って意味のわかるようにする。条件ロジックにおいて、
> 各条件記述の意味を適切な名前の一時変数を使って説明するのは有効です。
> ただし、メソッドの抽出を行える場合は、そちらを優先する。
> メソッドにすることで他の場所でも使える可能性ができる。
いいえ、無意味とは限りません。
それは説明用変数って呼ばれるものです。
http://hamasyou.com/archives/000199#説明用変数の導入
> 長くて、よく考えないとわからないような評価式があった場合、
> 一時変数を使って意味のわかるようにする。条件ロジックにおいて、
> 各条件記述の意味を適切な名前の一時変数を使って説明するのは有効です。
> ただし、メソッドの抽出を行える場合は、そちらを優先する。
> メソッドにすることで他の場所でも使える可能性ができる。
こっちのほうが具体的だった。
http://d.hatena.ne.jp/asakichy/20100615/1276562541
どんなとき？ 複雑な式がある。
どうすれば？ 処理の目的を説明するような名前を持つ一時変数に式、または式の一部の結果を代入する。
どうして？
式は複雑になって読みにくくなることがあります。一時変数を使うと、式を管理しやすい形に分解できます。
条件分岐のコードで特に役に立ちます。個々の条件節の意味を、適切な名前の一時変数で説明することができます。
長いアルゴリズムでも役に立ちます。長い計算に含まれる１つ１つのステップを一時変数で説明すればコードがわかりやすくなります。
どうやって？
一時変数にはデメリットもあります。余分な一時変数はコードを読む人の注意をそらし、
コードの理解を妨げます。1つのメソッドでしか使えないため、メソッドを長くする原因にもなります。
よって、「説明用変数の導入」よりも、「メソッドの抽出（Extract Method）」を優先すべきです。
メソッドならオブジェクト全体、スコープによっては他のオブジェクトから使用することもできます。
ただ、「メソッドの抽出」は他のローカル変数があると困難になることがあるので、その場合に「説明用変数の導入」を使用します。
http://d.hatena.ne.jp/asakichy/20100615/1276562541
どんなとき？ 複雑な式がある。
どうすれば？ 処理の目的を説明するような名前を持つ一時変数に式、または式の一部の結果を代入する。
どうして？
式は複雑になって読みにくくなることがあります。一時変数を使うと、式を管理しやすい形に分解できます。
条件分岐のコードで特に役に立ちます。個々の条件節の意味を、適切な名前の一時変数で説明することができます。
長いアルゴリズムでも役に立ちます。長い計算に含まれる１つ１つのステップを一時変数で説明すればコードがわかりやすくなります。
どうやって？
一時変数にはデメリットもあります。余分な一時変数はコードを読む人の注意をそらし、
コードの理解を妨げます。1つのメソッドでしか使えないため、メソッドを長くする原因にもなります。
よって、「説明用変数の導入」よりも、「メソッドの抽出（Extract Method）」を優先すべきです。
メソッドならオブジェクト全体、スコープによっては他のオブジェクトから使用することもできます。
ただ、「メソッドの抽出」は他のローカル変数があると困難になることがあるので、その場合に「説明用変数の導入」を使用します。
switch文の条件式で文字列がある場合を表現するには
どう書けばいいんですか？
if (hoge !== "") を表したいということです
どう書けばいいんですか？
if (hoge !== "") を表したいということです
chromeでシフトを押しながらマウスホイールを回すと、縦方向にまわしても横方向になることを発見しました
firefoxではそうならないのでchromeだけだと思います
これをJSレベルでやめさせることはできますか？
firefoxではそうならないのでchromeだけだと思います
これをJSレベルでやめさせることはできますか？
>>838
とても迷惑な仕組みを考えてるね…
とても迷惑な仕組みを考えてるね…
は？馬鹿かお前
ウェブアプリはもはやネイティブアプリに近くなっているのだからシフトキーも普通に使われるのだよ
勝手にホイールマウスの軸を変えるのは迷惑でしかない
迷惑行為を無効化することを迷惑とは言わない。
そもそもシフトキーを押した時に軸を入れ替えるならまだマシだが
縦方向を横方向にし、横方向はそのままだから
シフトキーを押していたら横方向にしかスクロールできない
これをクソ設計と言わずして何と言おうか。
まぁgoogleというブランド価値にファーっとなって思考停止するD級プログラマーには分からないだろうけど
ウェブアプリはもはやネイティブアプリに近くなっているのだからシフトキーも普通に使われるのだよ
勝手にホイールマウスの軸を変えるのは迷惑でしかない
迷惑行為を無効化することを迷惑とは言わない。
そもそもシフトキーを押した時に軸を入れ替えるならまだマシだが
縦方向を横方向にし、横方向はそのままだから
シフトキーを押していたら横方向にしかスクロールできない
これをクソ設計と言わずして何と言おうか。
まぁgoogleというブランド価値にファーっとなって思考停止するD級プログラマーには分からないだろうけど
縦方向にしかホイールスクロールできない環境のために付けたのだろうが
今時そんなプア環境にデフォルトで対応すべきではない
対応したければオプションを付けることだ
まぁそんなオプションほとんど誰も使わないだろうが
今時そんなプア環境にデフォルトで対応すべきではない
対応したければオプションを付けることだ
まぁそんなオプションほとんど誰も使わないだろうが
というか、自分が不便だと思うなら自分の環境を変えればいいだけだろ
何で皆を同じ環境にしようとしてるんだよ
何で皆を同じ環境にしようとしてるんだよ
> まぁgoogleというブランド価値にファーっとなって思考停止するD級プログラマーには分からないだろうけど
いつものD級プログラマー君か
アクセシビリティも知らないんだな
いつものD級プログラマー君か
アクセシビリティも知らないんだな
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript スレッド一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.113 + (1001) - [100%] - 2014/3/15 21:30
- + JavaScript の質問用スレッド vol.118 + (1002) - [97%] - 2014/8/29 22:30
- + JavaScript の質問用スレッド vol.116 + (1002) - [97%] - 2014/7/1 0:45
- + JavaScript の質問用スレッド vol.115 + (1001) - [97%] - 2014/5/29 16:16
- + JavaScript の質問用スレッド vol.114 + (1001) - [97%] - 2014/5/3 10:45
- + JavaScript の質問用スレッド vol.119 + (1002) - [97%] - 2014/10/3 15:30
- + JavaScript の質問用スレッド vol.112 + (1001) - [97%] - 2013/11/27 16:46
- + JavaScript の質問用スレッド vol.133 + (1001) - [97%] - 2018/6/8 10:45
- + JavaScript の質問用スレッド vol.111 + (1001) - [97%] - 2013/11/4 6:00
- + JavaScript の質問用スレッド vol.110 + (1001) - [97%] - 2013/10/13 14:01
- + JavaScript の質問用スレッド vol.117 + (1009) - [97%] - 2014/8/5 3:30
- + JavaScript の質問用スレッド vol.123 + (966) - [97%] - 2020/10/20 2:30
- + JavaScript の質問用スレッド vol.103 + (1001) - [97%] - 2012/11/9 15:30
- + JavaScript の質問用スレッド vol.123 + (1002) - [97%] - 2015/4/27 23:30
- + JavaScript の質問用スレッド vol.143 + (753) - [97%] - 2020/4/19 5:00
- + JavaScript の質問用スレッド vol.121 + (1001) - [95%] - 2015/1/1 18:30
- + JavaScript の質問用スレッド vol.120 + (1002) - [95%] - 2014/11/8 1:15
トップメニューへ / →のくす牧場書庫について