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

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-5のテンプレを読んだ上で質問してください。
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。
　　回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止ではありませんが、ライブラリスレで聞くとより回答を得やすいかもしれません。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　http://jsdo.it/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/

■前スレ
+ JavaScript の質問用スレッド vol.116 +
http://peace.2ch.net/test/read.cgi/hp/1399764134/

■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)

■テンプレ案
http://jsfiddle.net/fH4cC/31/show/

■関連スレ
ECMAScript デス 4
http://toro.2ch.net/test/read.cgi/tech/1325448978/
【jQuery】JavaScript ライブラリ総合質問所 vol.3
http://toro.2ch.net/test/read.cgi/hp/1369444026/
【WHATWG】HTML5 Part6【W3C HTML WG】
http://toro.2ch.net/test/read.cgi/hp/1393153279/
Webサイト制作初心者用質問スレ part239
http://toro.2ch.net/test/read.cgi/hp/1393828207/
CSS初心者スレッド＝12th＝
http://toro.2ch.net/test/read.cgi/hp/1343429848/
Canvasについて語ろう
http://toro.2ch.net/test/read.cgi/hp/1305093769/

■各種仕様 ( http://fiddle.jshell.net/vSqKr/33/show/#Link も参照 )
◆ Standard ECMA-262
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ （ECMAScript 3 和訳）
http://www.ecma-international.org/ecma-262/5.1/ （ECMAScript 5.1 HTML版）
http://people.mozilla.org/~jorendorff/es6-draft.html （ECMAScript 6 有志HTML版）
http://kangax.github.io/es5-compat-table/ （ECMAScript 5 compatibility table）
http://kangax.github.io/es5-compat-table/es6/ （ECMAScript 6 compatibility table）
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html （HTML5.1 部分訳）
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html （Web Storage 和訳）
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html （DOM Standard (DOM4) 和訳）
http://www.w3.org/TR/DOM-Level-3-Events/ （DOM3 Events）
http://www.w3.org/TR/uievents/ （UI Events）
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html （CSSOM 和訳）
http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html （CSSOM View Module 和訳）
◆ その他のWeb関連仕様
http://domparsing.spec.whatwg.org/ （DOM Parsing and Serialization - innerHTML等）
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html （XMLHttpRequest 和訳）
http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html （File API 和訳）
http://www.whatwg.org/specs/ （WHATWGの仕様一覧）
◆ MDN (Netscape/Mozilla)
https://developer.mozilla.org/ja/docs
◆ JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html
◆ MSDN Library
http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript)
http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript)
http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML)

一部の人が、わーわーいっていますが、テンプレの修正は行いません。
今までの通り続けていきます。

なのでこのスレでライブラリ関連の質問はOKです。
lodashやjQueryの話題も問題ありません。

■諸注意
自治厨は嵐です。自分の好きな通りにスレを変えようとしているだけです。
ライブラリ系の質問は本スレッドで禁止されていません。一人で勝手に決めようとしてるだけです。
許可されたライブラリの話題を禁止しようとしたり荒らすなどの
行為が確認された場合は不要な争いを避ける為、スルーすることを推奨します。

以上テンプレ終了

>>1
乙

>>5
また、お前か

ライブラリ禁止する発言が自治房でライブラリ許可する発言は自治房じゃないという矛盾
荒らしの理論だな

ライブラリ禁止発言・・・迷惑
ライブラリ許可発言・・・している人は、禁止発言に対するレスとしてだけ。

ごく普通に、JavaScriptの話をしているのに、
それがライブラリだからって、JavaScriptではない自治の話を始めるんだ。
それが迷惑ということ。

ごく普通に、JavaScriptの話をしているのだから
ごく普通に、JavaScriptのレスをしようよ。
それだけのことじゃないか。

vol115を読めば「ごく普通のライブラリの話」ではなかったことがわかるはずだが、荒らしに何を言っても通じないだろうな

何も言っても通じないと思うなら諦めれば？
JavaScriptの話をしていることに間違いはないのだから
それで埋まったとしても、何も悪いことはないだろ？

それにくらべて、無関係な話でスレを埋めているのは誰だって話だよ。

今まで通りライブラリ関連のコアな質問や返答は別スレに誘導しておけばいいよ
禁止までする必要はない

テンプレに何の実効力もないと判明しているのに何故かテンプレに拘り続ける奴w
官僚主義の権化だな

テンプレは基本守らなくていいものだそうです

守りたい人は守ってもいいんですよ

そもそも誰かがテンプレに勝手に書いただけなので関係ないです。
自由ですから。

その通り
守ってもいいし守らなくてもいいです

自治房は荒らしです
>>5は何の拘束力もありませんし、>>5こそが荒らしです

テンプレ変えられずにリベラル君涙目

ここは荒らしがたてたスレなので放置推奨
次スレはプログラム板に移行予定

一人で行っとけよガキ
あるから使うだけ
以上

このように暴言を吐いても許されるのがこのスレ
荒らしにとっては理想的な場だな

自治厨がスレ立ててたぞ
ライブラリなどの質問を見たくない人はこっちへどうぞ

+ JavaScript の質問用スレッド vol.117 +
http://peace.2ch.net/test/read.cgi/tech/1404146244/

様々なハンドラの中でpreventDefaultやstopPropagationをしていて
そのせいでイベントシステム全体の見通しが悪くなっています
想定外の動作が、preventやstop〜が原因かもしれないけど
そのpreventやstop〜を取り除いた時に何が起きるか、もう覚えてないって感じです・・。
こういうのどうやってますか？

プログラム板の次スレ
荒らしを嫌う人はこちらにどうぞ

+ JavaScript の質問用スレッド vol.117 +
http://peace.2ch.net/test/read.cgi/tech/1404146244/

ここは幅広い質問をしても文句を言われないスレであって
荒らしが許容されるスレではありません
荒らしは思いっきり殴ります

完全に>>27が荒らし化してるなｗ

小競り合いは荒れを招くだけなので
幼稚なレッテル貼りを許しましょう
自治厨はすみやかに植民して下さいね

>>29
自治房は荒らしです
荒らすのは止めてください

同種のイベント（たとえばmousedown）の中で一番最後に実行されるイベント
を設定するにはどうしたらいいですか？
ライブラリの影響は気にしません
自分のコードの中で一番最後に実行したい、ということです

>>31
・一番最後にイベントを設定する
・イベントバブルを利用して親やdocumentにイベントを設定する。
・イベントを一つだけ設定して、その中で独自のイベントを管理する。

とかかな。

jQueryは実際にイベントを割り当てるのは一つで
内部でイベント管理してたはずだから
そういうjQueryプラグインを作れるかもしれないね。

>>31
あ、一番いいのは、そういう順番に依存するものを
作ってはダメといういうこと。

一番最後に実行されるイベントを二つ
設定したらどうなるんだ？とかあるわけだし。

もう一つおすすめはしないけど、
addEventListener（やattachEvent）を
独自の関数に置き換えるって手もあるな。

やり方は自分で調べてね。

>>31
ハンドラの中でsetTimeout使う
0秒で

ありがとうございます
付ける順番と、DOMツリーに左右されるようなので、いろいろ検証したところ

$(document).on('mousedown',function(e){
console.log('nodelegate');
}).on('mousedown','body',function(e){
console.log('body');
}).on('mousedown','#test',function(e){
console.log('test');
});

とした時、非デレゲートのイベントが、最初に付けても最後に実行されると確認できましたので
これでやろうと思います
ありがとうございました

>>35
でもそれやったらpreventDefaultとか
きかないよね？

ハンドラの中でsetTimeout0を使うと
何故すべてのハンドラの最後尾が保証されるのです？
タイミング次第では？

preventDefaultした時に、
デフォルト動作と同じ操作、
すなわちフォーカス以外の部分をクリックした時にフォーカスを外す、
といったことを、最後尾のハンドラでするようにしたら、うまくいきました＼(^o^)／
ありがとうこざいました

以前、mousedownでstopPropagationしても、
そのマウスダウンから構成されるクリックを防ぐことは出来ない、という問題があり、
それに対してsetTimeoutで一定時間クリックを受け付けないようにする、という方法を提示しましたが、
マウスダウンハンドラの中でクリックを防ぐためのクリックハンドラを付ける、という方法を思いつきました
こっち方が自然かもしれません

オライリーってくっそ役に立つな

>>36
この件ですが、windowで受けた方が後になりました
というかdocumentにデレゲートなしのmousedownを一時的に付けたりすることはわりとよくあるので
documentではアカンかったです
windowにmousedownを付けるのは普通の使い方をしている限りないので、いいかと思います

>>42
もしかして、絞込してない？
documentにイベントをつけるにしても、
無関係の要素のイベントを取らないように、
どこから発生したかを調べるもんだよ。

やり方は簡単。

$(document).on('click', '.class', function() { ・・・ })

こういうふうにするだけで、classがついてる要素だけ
イベントを処理できる。

そんなことはもちろん知っていますよ
ど素人じゃないんですから・・。
でもありがとうございました

あごちゃんが社名を名指しして批判しているの見てショックを受けました
同業叩きは恥ずかしいですね

あなたもその人を名指しで批判してるじゃないですか
このスレでそんなことはしないで下さい

>>40
この件ですが、クリックを殺すためのクリックハンドラを付ける、という方法だと
何かのタイミングでそのハンドラが残ってしまい、
クリックが想定しないところで無効になってしまうようになったので、
時限方式に戻しました
時限方式はマシンの処理速度に依存するので
（とはいえ現実的に、mousedownとclickの間で200msもかかるマシンが現存するとも思えないのですが）
少し引っかかるのも事実です・・

「クリック殺し」に到達する前にstopPropagationされていたのかもしれません
こうなると、フラグで管理する方がいいのかも

マウスボタン少し長押ししたときってclick発生しないんだっけ

まじで！？

var a = [1,2];
var b = 3;

aとbを足してcに[1,2,3]を代入する方法を方法を教えてください
やっぱり
c = a
c.push(b)しかないんですかね

>>51
何種類か方法があると思うけど、何が最適かは場合によると思う。連続で何回も配列の値を増やし続けなきゃいけないとか、単純に一回だけとか。

>>49
するよ

>>51
c = a.concat(b);

>>51
それだとaの内容も変わっちゃうから>>54以外にない

condog

引数の型が決まっている関数は毎回型チェックし、異なれば例外を投げるべきですか？

>>57
例外を投げるか型変換すべき

intって使えたっけ？

スレ間違えました

var a = "<hoge1hoge2>";
a.match(/<[^<>]+>/); // ["<hoge1hoge2>"]

返り値を"hoge1hoge2"にしたいのですがどうしたらいいですか
a.match(/<([^<>]+)>/)[1];としたらいけましたがマッチが一つだけのときこれは一般的でしょうか
あと<>以外は使わないからという理由で[^<>]+としてますけどこれも一般的な方法でしょうか

<([^<>^])>
にしたら顔に見える

letが使えるなら全てletにするべきですか?

>>63
古いブラウザの対応が要らないってことだよね？
ならletでいいんじゃないかな。

するべきとまでは言わないけど、letの方が好ましいし、
varを使う理由はないと思う。

let it go〜　let it go〜

>>61
例えば、http://aaa/bbb/ccc のaaaを取り出すには、
http://([^/]+)/ とする(エスケープを無視しています)

matchはオプション無しで、複数箇所に該当するの？
普通は、/パターン/g と、gオプションを付けると、
すべてにマッチするんだが

<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>

子要素がいくつあるかわからないjqueryでこんな感じで書いてるんですけど
$(document).on('click', 'div>p', function(e){
});
これを生のjavascriptでどういうふうに書くのか教えてください

ソース読め

var a = {a:1}
var b = {b:2}
aとbを結合して{a:1,b:2}にする方法を教えて下しあ

>>69
forで回して片方に一個ずつ追加、あるいはjqueryのextend

そんな地道な方法しかないのですかショック

一行でかけるのに地道ってよくわからないが。


lodashを使ったら、一行で書ける。これより単純なものはないと思うけどね。

http://lodash.com/docs#merge

_.merge(names, ages);
// → { 'characters': [{ 'name': 'barney', 'age': 36 }, { 'name': 'fred', 'age': 40 }] }

$(".hoge") ←　複数あります


これにanimate()させたあと、全てのオブジェクトがアニメーションを終えてから
一度だけ実行される関数をコールバックさせるにはどうすればいいのでしょうか？

>>67
html
<div id="hoge">
<p>a</p>
<p>b</p>
<p>c</p>
</div>

javascript
var div = document.getElementById('hoge');
var nodes = div.childNodes;
var i=0,n;
for (;n=nodes[i++];) {
if (n.nodeName !== 'P') { continue; }
n.addEventListener('click',function(e){alert(e.clientY);},false);
}

>>73
複数ある$(".hoge")のすべてに、animate()の終わりに自分以外のanimate()が終了していたら
コールバック実行それ以外スルー、というフラグを立てる

>>75
それはダサいね。
最近はフラグ=バッドノウハウ と考えていいぐらいだと思うわ。

promise使えるんだからそれでできるじゃない？って
思ったらこんなの見つけた。

http://tsmd.hateblo.jp/entry/2013/01/18/173509

試してないけど、これでいいんじゃね？

>>74
そりゃだめだろｗ

$(document).on(イベント, セレクタ)の形をとってるんだから
addEventListernerはdocumentiに対して実行しなきゃ。

と問題の指摘はするけど、面倒だから俺は書く気無いけどね。
素直にjQuery使えと。

>>67
document.addEventListener('click', function (event) {
　var target = event.target, parentNode = target.parentNode;
　if (target.tagName !== 'P' || !parentNode || parentNode.tagName !== 'DIV') {
　　return;
　}
　// 処理
}, false);

意外と知られてないけど、jQueryで

$(document).on('click', 'div>p', function(e){
});

ってやったとき、div>p にマッチする要素だけじゃなくて、その子要素をクリックしてもハンドラが呼ばれる

ソースを読むと、targetがセレクタにマッチしてるかどうかだけではなくて、
targetの祖先要素がセレクタに引っ掛かるかも調べてる

>>79
つまり、

＜a href="URL"＞<strong>ここ</strong>をクリック＜/a＞

っていう場合の、「ここ」をクリックしてもリンクが
発動するのと同じことでしょ？

あたりまえだと思うのだけど。

>>75
>>76
ありがとうございました。

>>78がそうなってないって言いたいんだろ

意外と知られてないって書いてあるから、
よく知られてるって言ってるんだよ。

>>75
>>76
ありがとうございました。

jQueryと同等のものを書こうとすると
大変だなぁってのがよく分かるね。

>>80
確かにそうだけど、>67では接触しないから端折った
parentNodeを遡ればいいから修正はそれほど難しくないかと

イベントハンドラを設定した要素を削除したときってイベントハンドラの情報はメモリに残ったままになりますか？

ブラウザにバグとかなければ大丈夫だと思うが、
そういう時でも安全に要素を削除できるというのが
jQueryのメリットの一つだし、特定のブラウザでは問題あるかもね。

つまりイベントハンドラを削除してから要素を削除するべきですか？

>>74
そもそもこれは子要素全てにイベント定義してるから>>67のとずれてるよね

仕事でやる場合javascriptをそのまま書くのとjqueryなどの総合ライブラリを使うのどっちが多いですか？

>>91
いろんな企業のサイト見て、jQuery使っているかどうか判断すればいい。

jQuery使っている所が大半だろ。

そうじゃない所はjQueryでは力不足で
もっと大きなライブラリを使うような所

>>89
jqueryを使ってないならそうする

>>91
jqueryはもはやJavaScriptの一部みたいなものなので使わないことはあり得ない

プログラマ業界ではjavascriptの仕事は多いですか？

>>89
removeChild してから removeEventListener でも良い
どちらにしても removeEventListener は実行する

>>96
いわゆるフロントエンドエンジニアになりたいならjsに精通してて1から書けたりメンテナンスができるような知識が必要。最近はそういう需要が増えていると思う。

foo && ( bar = func(c) );

こんな形の式ってどういう処理になるんですか？
if条件になってるわけでも、結果を何かに代入してるわけでもないし、ビット演算かと思ったら違うみたいだし

糞コードだねｗ

if (foo) {
　bar = func(c);
}

これと一緒。

>>100
あー、なるほど！処理順か！納得した納得できた

どこで見つけたコードかというとyoutubeのhtml5playerのjavascript文
読みにくくて仕方ないわ

別にクソコードじゃないよ
そういう書き方をしたい場合もある

>>100
お礼が欠けてました、ありがとうございます。いや助かった
評価の順番といわれるまで何のことだか全然わからなかった、よく考え付くもんだほんと

わざと読みにくくさせる
つまり暗号化させたい時ｗ

Googleはショートコーディングの為に使うが、機械化してるので元々は難読なコードではない

圧縮するとそういう風になるんだね

function hoge(a) {
　console.log(a || 'ふが');
}

hoge('ほげ') //　ほげ
hoge(); //　ふが

みたいなやつも最初演算だと思ってわからなかった
とくに”ふが”の部分が0とかだったりすると
ますます何がわからないのかわからない状態に陥ってた

perl使いが>>99みたいな書き方するよね。

Perlだったら

bar = func(c) if foo;

こう書けば良い。もっと綺麗に書ける。

複数のWebブラウザ(PCのほかにスマホ含む)でAjax的な動作をさせたい場合に
どのようなアプローチが効率的ですか？
とりあえず思いつく線だと
１．ECMAネイティブで記述する
　　最近はIE6みたいな俺実装ブラウザは減った気がする。実行速度的に有利？
２．Ajaxフレームワークを用いる
　　コーディングは楽になりそうだけど、フレームワーク内の見通しがよくない他
　　コードが増加しデバッグやの手間も増える気がする

PaaSでnode.js利用してSoket.IOを使う　どや！

どうせjqueryは使うんだからjqueryでやるのがいいんじゃない

ネイティブで、そこそこの時間で書けるならそれが一番じゃねーの
事前にどこまでをサーバ側にさせるか良く考えればあんまり問題おきないし

>>110
> 1．ECMAネイティブで記述する
ECMAScript には XMLHttpRequest も ActiveXObject も存在しない

3. XMLHttpRequest, ActiveXObject を用いる
コーディング分岐はたいしたことはないのでこれで十分

jquery使えば分岐もいらない

ネイティブJavaScriptで書いてる人は独自ライブラリを持っているだろうから、ライブラリ云々は問題じゃない
自分で使い慣れたものが一番いい
勉強する気があるなら両方書いてみるといい

沢山の人々に使われ、それだけ鍛えられているjqueryを使わず
わざわざ自作ライブラリを使う意味がワカンネ

>>99
&& を「ならば」に読み替えるというのもあるな

レスありがとうございます
過去に複数のWebブラウザに対応(ただしPC限定)したAjaxアプリ的なのを作ったことが
あるのを思い出して今確認してみました。結構古い物ですが当時の実装は・・・
Webブラウザの対応はFirefox3.0とIE8のIE6モードでXMLHttpRequestとaddEventListenerを
自作ライブラリで抽象化していました。開発時にはPC版のChromeとSafari、IE6でも期待した
動作をすることを確認していたはず・・・モバイル環境は未考慮でマウスUI前提です
現行のWebブラウザに対応する場合はXMLHttpRequestの処置は必要みたいですが
addEventListenerはそのまま書いて大丈夫そうですね

>>114
なるほど、そういうことなのですか。勉強になりました

> jQuery
こういうAjaxフレームワークって罠とかないのですかね？
Webブラウザの差違が完全に吸収されて、かつ動作が安定している(せめてWin32API程度には)ので
あれば使う価値があるかなと思います
中途半端に動くようなトラブルはフレームワーク内部にまで立ち入ったデバッグが必要になって苦労する
場合があるので勘弁願いたいです。昔、WinアプリでGUIフレームワークを使ったときに、この手のトラブルで
だいぶ苦労した記憶があるので、ネイティブで書いた方が最終的に楽なのではという気持ちはあります

> こういうAjaxフレームワークって罠とかないのですかね？

自分で作ったものには、罠があるよ。
なにせ全部のブラウザで試してないだろう？
特定のブラウザで動かないことは多いだろう。

それに自分で作ったものは、中途半端でトラブルで
ソースコード内部にまで立ち入ってデバッグしなければならない。
自分で作ってるから他の誰もデバッグしてくれないしな。

そしてネイティブで書くと、各ブラウザで発生するトラブルを
全部一人で解決していかなければならない。

そしてひとしきり解決して思うことは、
今自分はjQueryの劣化版を作ってるだけなんだってこと。

jQuery妄信もそれはそれでどうかと思うがな

jqueryはデカイからな

jQueryを使おうが何を使おうがトラブルが起きた時に解決しなきゃいけないのは結局自分じゃね？ｗ

ランダムで数字を発生させて、その発生させた数字に従って、変数を処理したいと思っています。
(例えば、rndで0がでたとして「りんご」を表示したい)
下記のようにしたのですが、失敗しました。
どうすればいいですか？

var ans0 = "りんご"
var ans1 = "みかん"
var ans2 = "バナナ"

var rnd = Math.floor( Math.random() * 2 );

document.write(ans + rnd);

>>124
ans + rnd は、

変数 ans の値と変数 rnd の値に対し、 + 演算子による演算を行う、と解釈される
（「変数」と書いたがプロパティの場合もあり得る。が、ここでは本質的でないので説明は省く）
ここでは ans という名前の変数は宣言されていないのでエラーになる

ans という名前と、 rnd の値に対し、文字列の連結演算を行うわけではない
そのようにしたい場合は "ans" + rnd と書かなければならない

次に
document.write("ans" + rnd);
に変えたとしても、 "ans" + rnd の結果は、変数名ではなく、文字列と解釈されるので
"ans0" "ans1" 等々が単に文字列として出力されることになる
結果の文字列に「対応する」値を出力させたいなら、連想配列を利用する必要がある

var answers = {
ans0: "りんご",
ans1: "みかん"
ans2: "バナナ"
}
document.write( answers["ans" + rnd] );

普通に考えたらこうやるべきだけどな。

var answers = ["りんご", "みかん", "バナナ"];
document.write( answers[rnd] );

>>125-126
ありがとうございます。
「document.write(ans0); 」と直接指定したときには、「りんご」と直接表示されたので、なんで出ないのか困っていました。
もう一つお聞きしたいのですが、「document.write (ans[rnd])」と書いてはなぜダメなのでしょうか？

ソレ配列じゃん
変数と配列の違いでググれ

>>127
ans[rnd] は ans0 等ではなく ans[0] 等に評価される
これは ans という名前のオブジェクト変数／配列変数の 0 という名前／インデックスのメンバを表す
しかし ans という名前の変数は宣言されていないのでエラーになる

コードというのはなるべく簡単に表記できるように
（ ans[0] を「ans という名前の…」などと書かなくとも済むように）
背景の仕組みは可能な限り省略され、
冗長な部分は可能な限り削ぎ落として
記される、記せるようになっているのが常だ

コードの表層ばかり見ていてはだめで、背景の仕組みをもっと理解する必要がある

jqueryのmouseleaveハンドラで要素を消しているのですが、
稀に何かのタイミングでその要素が残ることがあります
しかし条件が分からないのです
mouseleaveが発生しない条件って何でしょう？

mouseout系は、その一回のイベントを受け損ねたら
ずっと残り続けてしまうので、
脆弱だとは言えると思います
とはいえjqueryのmouseleaveはかなりの強固なので、
信用していたのですが・・

>>98
遅レスですがここの質問がある程度わかりオライリーをある程度読めれば普通の会社くらいは行けますか？

バナナが絶対選ばれないのは誰も指摘しないのか

だってバナナだし

>>132
はじめてのJavaScript、秀和システム
掌田津耶乃(しょうだ つやの)、2013

オブジェクト指向、DOMについて、
各100ページの説明があるので、おすすめ

>>135
それ前にこのスレに書かれて叩かれてた本やん
遠回しな叩きか？

>>132
何が普通でどういうレベルの募集に対応したいのか知らんが
設計済みならコーディングは一通り出来ます、って人が多いんじゃないかな、ライバルは

個人的には「自分、英語ダメなんでｗｗｗ」っていうのが困る

プロになりたいならプロが作る程度のものを作れるようになればいい
どのくらいの知識があれば会社に入れるかとか、そんなこと考える必要ない

>>132
twitterでjavascriptのネタをつぶやいたり批判したりできるぐらいの実力が無いと大手は無理ですが
底辺の会社ならいけますね

ブール値の変数名はboolとbooleanどっちがいいですか？

自分では何も考える気のない丸投げ質問ばかりだな

>>140
俺だったら値のタイプじゃなくて値を何に使うかで名前つけるけど

>>135
俺もこれ読む価値あると思う。
object、prototypeなどの概念については詳しい。
学習始めて2冊めくらいに読むにはいいんじゃないか。

そのぶんjquery等の即使える技術については言及が少ないが。

>>135
またお前か？ この本はだめだって過去スレでやっただろ
+ JavaScript の質問用スレッド vol.114 +
http://toro.2ch.net/test/read.cgi/hp/1394931594/743

743 ：Name_Not_Found：2014/04/25(金) 13:36:40.15 ID:???
コードあるじゃん。レビューできるなｗ
http://www.shuwasystem.co.jp/products/7980html/3813.html

ダメなコード例、注意点として書いてあるだけかもしれないけど見ててもやっとした点。

全体的に、カンマ、forのセミコロンの後にスペースがない。時々ある（統一されてない）
関数は基本的にグローバル空間に定義（無名関数ほぼ無し）
クラスの作り方が入門書にしては詳しいが、Javaっぽくて、JavaScript風ではない。
=== が使われていない。

・chap2.txt 　　いきなりconst。まあこれ以降使ってないみたいだから単なる説明か。
・chap4.txt 　　配列に for in 使ってる。
・chap5.txt 　　非標準のconstructor.nameがでてきてる。
・chap7.txt 　　<body onload="init()"> とか書いてある。
　　以前の章にsortとかmapとか出てきてるのに、関数の引数に無名関数を直接渡すのがaddEventLisnerだけ。
・chap9.txt 　　いきなりハンガリアン使い出したと思ったら、docCookiesはこれかhttps://developer.mozilla.org/ja/docs/DOM/document.cookie
　　PHPでてきてんだけど、なんで最終行でflush()わざわざ実行してんの？
　　いきなりInt8Array使ってんだけど？
・chap10.txt 　　jQuery使ってるのはこれだけ（入門書ならまあいいが）
　　jQueryの処理の開始で普通に使う$(function() {})ではなく、$(window).load(function() {} )を使っている。
　　$("#msg").each(・・・)使うのが普通の所で、わざわざ$.each($("$msg"), ・・・)を使ってる。

感心できる点・・・無し
典型的な入門書。たぶんMDCみながら初心者向けっぽいのをピックアップしただけで筋道立てて教えていない。
ぐぐってサンプル見つけてまとめただけ。最新、または常識的なやり方を知らず作者の実経験レベルは低い。
というのが俺の印象。本気で勉強したいときに見る本ではなく良書にはなりえない。

>>132
ある程度の範囲が曖昧すぎて回答できない
オライリー本も何の本か書いてないので答えられない

最近、出ている質問には全て答えられないとやってけないと思う
DOM, ECMAScript, XMLHttpRequest 等の代表的なAPIのマスターは必要条件
書籍は『JavaScript 第6版』を熟読
まず、書籍の内容が理解できる程度に習得してから徐々に慣らしていく
自分でイメージしたプログラムを他人のコードをコピペせずに作れるようになれば一人前

jQuery等のライブラリは使うだけじゃなく、jQueryコードがどのように動いているか、コードリーディングで把握できる力を身につける
ブラックボックス化したコード(読む力がないから読まない)に依存することほど危険な事はない

仕事で必要になったときすぐ勉強して覚えられる人なら普通の会社でやってけるよ

>>143
著者さん宣伝ご苦労様です

>>135
本の紹介なんて望んでない展開なのに唐突でわろた

セッターメソッドの場合は型を変数名にするのは当然だと思いますが？
setHoge(str)
とするのなら
setHoge(bool)
とするのは自然なことです
したがってboolかbooleanかは妥当な疑問だと思いますが？

文字列の変数名をstringでなくstrにするように
booleanもboolにするのがいいですね

俺はF（フラグ）で置き換える

boolだからといってフラグとは限らないんじゃね

booleanはTypeScriptの予約語だから念のため止めとけ

ありがとうございました

>最近、出ている質問には全て答えられないとやってけない

んなこたない
必要なのは知識ではなく問題を解決していく力

つまりコーティングよりデバックのほうが大事だと

だが使えるヤツかやってけるヤツかどうかと
それ以前に採用されるヤツかどうかは別問題

非同期処理が終わらない間は次の非同期処理を始められないようにするには
どうしたらいいですか？

最初の非同期処理の結果が出るのをwhileでずっと待たせておけばいんじゃね

>>158
promise使うとか

>>159
javascriptはシングルスレッドだからあかん

今のこれまでのIEでpromise動くん

>>158
非同期処理の最終Statementで次の非同期処理を呼び出すだけ
難しく考えすぎ

>>151
自分はis_hogehogeになることが多い気がする
何れにせよコメント以外でboolって書くことはほとんどないなあ

>>158
requestAnimationFrame(かsetTimeout)で処理が終わるかどうかを定期的にポーリングする
その際には状態遷移(いわゆるステートマシンの作成)をする必要はある

世の中非同期処理にはpromiseとか言ってるが、一定間隔のポーリングが一番簡単
ゲームはみんなそうやっているが、デメリットもあるので必ず適合するわけではない

>>149
String 型の汎用関数内なら変数名「string」は自然だが、「セッターメソッド→変数名string」は自然ではない
セッターメソッドは必ずしも汎用関数ではないからだ
例えば、String.prototype.trim はString型に対しての汎用関数だから変数名stringは自然だろう

同じ理屈で Boolean型の汎用関数なら変数名「boolean」は自然といえるが、true, false 以外に値のないBoolean型で汎用関数は想像し難い
それが Boolean.protype に存在するに足る関数で宣言された変数ならば、変数名「boolean」は相応しいだろう

>>164
> 世の中非同期処理にはpromiseとか言ってるが、一定間隔のポーリングが一番簡単
> ゲームはみんなそうやっているが、デメリットもあるので必ず適合するわけではない

ポーリングは効率が悪い。チェックする間隔を短くすれば負荷が高まるし、
間隔を長くすれば、遅延が起きる。

そこで効率よくしようという発想で改善されたのが非同期処理。
promiseはその非同期処理を簡単に書けるようにしたもの。

ポーリングがダメというのを出発点として、それに代わるいい方法をってことで
できたものなんだから、今更ポーリングにするのは時代を逆行してるよ。



ゲームではそうやっているというが、ゲームだけが例外。
ゲームは画面更新間隔（フレーム）というものが存在し、この1フレームは1秒間に
30回だったり60回だったりするんだが、1フレーム内でユーザーの入力を検出する。

つまり、画面の更新間隔と入力検出が同期取られてるわけ。これにより1フレームで
入力できるのは1回だけというふうに公平なゲームとして安定した動作がさせられる。
でもこれはゲーム特有の話で、普通のアプリには参考にならない。

>>166
別にポーリングが万能とは思わないけど、どんなUIであろうと画面を1/60以上の頻度で更新する事は無理だ
(最近は240Hzのゲーミングモニターとかはあるが…)
だから、1/60秒単位でポーリングするからといってパフォーマンス的に問題がある事はない
通常の非同期処理と混ぜる事も出来るし、一つの方法論として考えてもらうだけでいいよ

promiseって初耳なんですけど
常識なんですか？

javascript promiseでぐぐって察してください

このスレには、ろくにわかっていないクセに、
外人の本やライブラリを、神の如くあがめる香具師がいる

知識なんてネット上に無限にある
あるけど皆、東大に合格できないだろ？

大事なのは知識の多さではなく、本人の吸収率や上達である。
だから、個別教育が重要。
初心者は、日本人の簡単な本で勉強したらよい
難しい外人の本を読んでも、時間のムダで、吸収率が悪い

実際に漏れは、その本を読んで上達した。
やり方さえ覚えれば、知識はネットで調べればよい
知識なんて枝葉末節だし、すぐ変化するもの

それにプログラムはデバッグしながら、間違えながら作るもの
些細な知識よりも、大まかな手順を覚えること
試行錯誤しながら進むのが、人生

技術に日本人も外国人もないだろ
「日本人の簡単な本」って何だよ

外人の本は、書きなぐりみたいな雑な本が多い
文章が長いくせに、何を言っているかわからない。
図が無い。レイアウトが悪い。
カラーじゃなく、白黒だけの本

日本人の本の方が、レイアウトや構成、視認性がよく、
短時間で理解できる

またその本に何を書かないか、というのも重要。
特に重箱の隅をつつくような知識は、
載せても覚えられないし、吸収率も悪く、時間のムダ
実際に必要になった時に、調べたらすむ

資格の学校のTACみたいなのが、理にかなっている
必要最小限の知識と勉強時間で、
200時間の勉強で、ギリギリ60点で合格

そうか？
ジャップ本はマニュアルをそのまま転載したような本が多い印象

国籍関わらず、人によるわ
特定の人を持ち上げようとするのに国籍持ち出してくるのはちょっと無理がある
// 個人的にはオライリー本は好かんが

プロミスっていうのはIEで使えないようですね

いくつかのボタンがあり、それを押すと処理が走ります
その処理の中にはそこそこ重いものものあります
重い処理の途中にボタンをクリックされ、更に他の処理が走り出すと
整合性がおかしくなる可能性があります
このような場合、どうやるのがセオリーでしょうか？
ボタンを押した時にキューを積んで、それを順次する処理するなどでしょうか？

複数の行で構成された巨大なデータをajaxでサーバに送信する場合、
ブラウザが途中で落とされる可能性もあると思います
するとデータが不整合を起こすはずです
サーバ側で、データを全て受信してから書き込む、みたいな処理にしないといけないのでしょうか？

javascript特有の問題なの？

具体的にどうしてるかって話だろ
何が言いたいんだカスが

JavaScriptの話以外が気にくわない奴はプログラム板のこっちに行っとけ

+ JavaScript の質問用スレッド vol.117 +
http://peace.2ch.net/test/read.cgi/tech/1404146244/

GoogleのDart言語がECMAの標準規格になる
http://jp.techcrunch.com/2014/07/09/20140708googles-dart-language-is-now-an-official-ecma-standard/

JavaScriptはどうなるんです？

IEはどうするんです？

>>177
明らかにサーバサイドの問題だから該当言語のスレに行くべし

ajaxはサーバサイドじゃねーから。
サーバにアクセスする部分はサーバクライアント両方の要素があるのは当然のことだ

>>176
処理の間ボタンをdisabledやreturn falseにしておけば？

>>184
フィイル出力はサーバサイドの処理

そもそも、TCP/IPはエラー補正機能が付いているけど、どういう原理でデータ損失が起きる事を想定してるの？
サーバ側からすればAjaxだろうが、form送信だろうが変わらないけど、Ajax特有の問題がどうやって発生するの？

>>177
その辺はWebサーバがうまいことやってくれんかね

複数のオブジェクトのデータを送る時、
何も考えずにループで送り、サーバ側も順次それをサーバに書き込んでいくと
クライアントサイドのロジックにデータの保全性が依存してしまう
それを避けるためにどうしてるかという問題
TCP/IPの話なんぞしてない
ど素人は寝とけ

どこから、「複数のオブジェクトのデータを送る」って話になったんだ？
一つの巨大なデータの話だろ。

ブラウザが途中で落とされた時とかいう話をしてるけどさ、
これってネットワークが途中で切れたりした時にも当てはまるんだよ。
だからAjaxの話とか関係なく、いままではどうしていたの？って話。

一般的なシステムの場合、データが全て届いてから処理が開始される。

もしストリーミングで受信するタイプの場合、
つまり、データが全て届かなくても処理するタイプの場合ね。
そういうものは、トランザクション処理でも仕込んでおいて、
データが完了しなければ、処理をなかったことにすればいい。

分かり切った一般論を抜かし出す奴なんなんだよ
具体的にどうしてるのかって話
書いたことないなら黙っとけ

>>192
お前のレスになんか意味があるのか？

分かりきった話なのに、其の質問をしているんだから、
そいつには、わかってないんだろう？
その答えが、分かりきったものになるのは当たり前の話だ。

なぜ分かりきった一般論を書いてはダメなのだ？

>>190
お前がアスペなだけ
一つのデータなら整合性は問題にならないんだから
こんな疑問が出るわけもない

>>193
お前書いたことあんの？
ないならお前には聞いてないから黙っとけ
お前が出る幕じゃないんだよ

>>195
あるから、黙る必要はないなｗ

>>194
> 一つのデータなら整合性は問題にならないんだから
なる場合もある。無知は黙ってろ

複数行のデータとかループして送るとか言ってるから、
行単位でPOSTするつもりなんだろｗｗｗｗwwww

> 177 名前：Name_Not_Found[sage] 投稿日：2014/07/09(水) 09:48:20.58 ID:???
> 複数の行で構成された巨大なデータをajaxでサーバに送信する場合、

元々の質問者はループなんて言ってないな。

ループって言い出したのはこいつか
> 189 名前：Name_Not_Found[sage] 投稿日：2014/07/09(水) 21:56:15.09 ID:???
> 複数のオブジェクトのデータを送る時、
> 何も考えずにループで送り、サーバ側も順次それをサーバに書き込んでいくと


まったく、なんで複数のオブジェクトとかいう話を
しだいているんだろうこいつ。馬鹿じゃんｗ

なんでsleepがなかったりと、基本的にノンブロッキングな仕様なんでしょうか？
ブラウザに組み込むために必要な仕様なんでしょうか？

必要ないからです

複数データを送る話とは思えないが、仮にそうだとしても不整合が起きるのはファイルをロックせずに多重書き込みする場合
明らかにサーバの問題だろう

プログラム板の次スレ
荒らしを嫌う人はこちらにどうぞ

+ JavaScript の質問用スレッド vol.117 +
http://peace.2ch.net/test/read.cgi/tech/1404146244/

>>202
ファイルてw
そんなレベルの話は誰もしてねーよ

通信が途絶したらちゃんと失敗するように、
複数のオブジェクトをひとつにまとめてPOSTすればいいだけでした
ありがとうございました

iOSはピンチでスムーズに拡大縮小できますが
PCのブラウザであのレベルの拡大縮小処理って出来ませんか？

>>205
しっかりと切り分けしてから質問してくれ
いろいろ酷すぎる

なんだよ >>198 で正解じゃないか >>199 がバカすぎｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

この場合、責められるべきは曖昧な質問をした質問者だろう
当たっていたのは結果論にすぎない
で、やはりというべきか、JavaScriptは関係なかったな

>>199がおバカなのは質問の意図を当てられなかったからじゃなくて可能性を完全否定しちゃってることだね
>>177の質問からすれば>>198は当然考慮すべき事だろ

そしてAjaxによるデータ送信に関連する注意点だからJavaScriptが関係無いわけじゃないね

データをまとめるのはJavaScriptなので関係ありますが？
恥をかいたからといって変な突っかかり方する人の回答は必要ありません

スクロールが終端まで行ったことを検出するにはどうやればいいですか？

>>212
scrollTopとボックスの高さを足して
中身の高さと比較するとか

出来ました
ありがとうございました

>>211
今後は曖昧に質問せずに必要な情報を全部出してね

>>215
曖昧とは思いませんが

バカには無理

馬鹿には回答は無理ってことですね
分かります

わかってないな

くやしいのうｗ

www

>>216
必要な情報を後出しせずに初めから全て出してね

ID無しはやはり荒れるのでこちらを使用するのがおすすめです。

+ JavaScript の質問用スレッド vol.117 +
http://peace.2ch.net/test/read.cgi/tech/1404146244/

ローカルルールがなければそれが一番だよなあ
というか、ここもID強制してくれ ＞運営

>>223
宣伝するためだけに戻ってきたのか？ｗ

お前はもうそっちに行ってしまって、
あれるかもしれないここは、見てないと思いっていたが。

>>223
向こうでもweb板でやれって言われてんじゃねーか

そもそもIDの有無なんて荒れの抑制に本質的な意味はないからな
プログラマーらしからぬ非論理的な思考

>>206
Win8, IE10で、
Ctrl + で拡大、Ctrl - で縮小できる

例えばオセロゲームをhtml5のcanvasで作ろうとします
（１）１ターンごとにcanvas全部真っ白後にマスから何から全部再描画
（２）１ターンごとに該当マスだけ消して描画
処理の重さとかはまず置いといてどちらがカッコイイですか

1だと毎回余計な処理を見せられてうざい

>>227
あるだろ

描画処理を見せたくないならダブルバッファリングすればいいかな

パーティクル的なアニメーションだと
（１）全て再描画
　　無難、メンテしやすい
（２）処理の分だけ再描画
　　canvas一枚でやると描画の重なるとこが面倒
（３）１ドット毎に最小のcanvas要素を用意
　　（１）、（２）の中間
　　canvas要素は方形なので要素同士の重複部分が無駄
大きくわけてこれくらいか

まあフレーム毎の処理なら再描画＋レイヤー要素の一択だと思うけど

jsってc++のバックサーフェスみたいなのあります？

(new Hoge()).method()
みたいな書き方していいですか？

new Date().getTime()
とかよくやるし良いんじゃね

いつも思うが、コード出して質問しろよ
常時いつも必ず良い書き方なんてあるわけないだろ

>>１
＞出来るだけサンプルコード
だぞ
＞出来るだけ
しかも
＞サンプルコード
本気コードじゃないからな
初心者だとコードそのまま出すことはできても
端折ってサンプル考えられるわけがない
簡単なものは”出来るだけ”を心がけて出してるはず

>>239
２行目を読んでから反論しろよ
ケースバイケースという言葉を知らんのか

２行目てどこの２行目だよ
（６）の２行目のことなら
＞問題の事象が再現されること
で、＞確認してください
って書いてあるじゃん

＞問題の事象が再現されること
ようにサンプルコードを掲示してくださいって意味じゃないぞ

そして＞常時いつも必ず良い書き方なんてあるわけないだろ
のことならそれこそ（６）だが

>>237
カッコはいらないのですか？

試せば分かる事聞くな

お前が試して答えろって意味ですが？

分かった試してくるから3時間待ってろ

カッコつけた方が一般的ですかって意味だろたぶん

試したところ問題ないようですが
何故カッコがいらないのか良く分かりません
new演算子は.演算子よりも優先されるのかなぁ？

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

これによるとnew演算子とメンバ演算子の優先順位は同じでした
なので、先に書かれたnewが最初に実行されるんですね
ありがとうございました

間に関数呼び出しの()があるけど、これの優先順位はメンバやnewより順位低くね？
new Date.getTime() だとエラーになるから (new Date).getTime() としなきゃならないしここらへんどうなってんの

newに()を付けない書き方なんて許されてるの？
はじめて見たよ

>>251
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/new
> new constructor[([arguments])]
()は関数呼び出しではなくnew演算子の一部で省略可能

そうなんだ
それなら()がない時だけエラーになるのは何か変な感じするね

別に構文エラーじゃないでしょ

>>253
new演算子の対象が違う

なんで対象が変わるんだ？

new Date() と new Date は同じもの返すけど、その右に . とか [] つけたとき
new Date()の場合は、new Date()の結果に . か [] が結合するけど、
new Dateの場合は、Dateだけが . か [] に結合しちゃうね？

>>256
() が省略されたから
>254とエラーコンソールを読めばわかる

>>257
そのりくつはおかしい
new演算子とメンバ演算子の優先順位は同じなんだから、
素直に実行されるならnewされてからメソッドが呼び出されるはず

>>258-259
new Date.getTime() と new Date().getTime()だと前者でエラーになるのは何でなんだよ

()演算子が入らない場合はメンバ演算子が優先される
としか思えないな

>>259
実際にIE/Firefox/GoogleChromeで試すと >>257 の挙動だから何故？って話

メンバ演算子の方が強いから

メンバ演算子は右から左
new演算子は左から右
「右から左」と「左から右」が戦ったら「右から左」が勝つってことじゃないの？

優先順位決定のアルゴリズムをJavaScriptで書いてもらえませんか？

>>259
new 演算子の対象は MemberExpression であって、優先順位は全く関係ない
優先順位で考える前に Syntax で考えるべき
http://es5.github.io/#A.3

この辺が原因かな？

11.2 Left-Hand-Side Expressions
MemberExpression :
　PrimaryExpression
　FunctionExpression
　MemberExpression [ Expression ]
　MemberExpression . IdentifierName
　new MemberExpression Arguments
NewExpression :
　MemberExpression
　new NewExpression

Arguments付きのnewはメンバ演算子と同等だけど、Arguments無しのnewは弱い感じ

そもそも、new Identifier Arguments のように考えるのがおかしい
初めから NewExpression に含まれているのだから
前提となる Syntax を勝手に解釈するから矛盾が生まれる

Left-Hand-Sideって何て訳すの？左手側？

左辺

left-sideでいいじゃん
handいらねー

左方向って意味もあるんじゃないかな
new new Hoge なら右から左方向に計算しないとnewをnewすることになってしまう

>>267の文法が全てだけど

演算子の優先順位 - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

を見ると一目瞭然だよ
new より . [] の方が優先される (結合される方向も違う)

それを念頭におけば↓って解釈出来て>>257と同じになる
new Hoge.hoge[0]() → new ((Hoge.hoge)[0])()
new Hoge().hoge → (new Hoge()).hoge
new Hoge.hoge → new (Hoge.hoge)

>>273
そのMDNの表じゃ、引数つきのnewと引数無しのnewの優先度の違いが説明できないよね？

単純にnewより.が優先されるなら、
new Hoge().hoge → (new Hoge()).hoge じゃなくて、
new Hoge().hoge → new (Hoge().hoge) こうなるべきだよね？でもそうならない

>>274
書いてて気付いたが、new は new Hoge と new Hoge() の2つの書き方(文法)が
あるってだけの問題な気がしてきた

>>275
まず . の右と左に分けると new と () の問題になって new が優先されて
new は () までが構文だから (new Hoge()).hoge じゃないのかな？

緊急地震速報で起こされてから寝れない…

>>273
その表ではメンバ演算子とnew演算子は同じ優先順位1じゃん

>>275
() が付いているから
Hoge()より new Hoge のほうが優先されるのでは

同じ優先順位の左結合性と右結合性が衝突した場合、
右結合性が優先されるんだろう
左右どっちかを優先させないと決定できないから、
ドキュメントのどこかに書いてあるはず
はい論破

難しく考えなくても、>>267の構文規則だけで>>257の挙動になることは十分説明できてるんだよ

あえて優先順位をつけるなら
newには引数付きのコンストラクタをとるものと引数無しのコンストラクタをとるものの2種類存在する
引数付きの場合の優先順位は>>273の表のとおり1番目になる
引数無しの場合の優先順位は>>273の表における2番目になる
こんな感じ

その構文規則が「日本語でOK」なレベルだろ
何を書いてるのか分からん

>>281
優先順位が
()有りのnew ＞　メンバ演算子　＞　()無しのnew
って事

>>281
>>266で仕様書リンクが出てるからそちらを読むべき
読み方がわからないなら RFC 2234 を読む
http://www.t-net.ne.jp/~cyfis/rfc/format/rfc2234_ja.html
というか、「分からなくて当然」という態度で構えるなよ

ニュアンスでわかるだろ

つまり優先度以前に構文解析で「new Hoge()」「.hoge」に分割されるって事か
分かってみれば凄いシンプルだった

JavaScriptを書くのにアブンフを分からないといけないのですか？

曲がりなりにも「JavaScript を自ら学ぶ人のための質問スレ」なんだから参考URLを呼んでから判断しようぜ
>>266を読んでない人が多すぎる

>>286
そのぐらい自分で判断しろよ
ABNFを学ばなければECMAScriptを理解できない理屈もわからんのか

>>288
じゃあその理屈を説明してみろよ
アンブフなんて聞いたこともないが普通にJS使ってるしプゲラ

>>266だって読んでないだろ
newの対象はNewExpressionにも成り得る

暗部をしらないだと？

>>287
そうなんだよね

それに最近は自分でゴリゴリ書く人よりもjQuery等のライブラリの質問が多くなった
純粋にJavaScriptのスキルアップや勉強をする人が減ったのかな
それとも今はjQueryを使うのが一般的なのかな（古い人間でゴメン

>>292
JavaScriptは普通に勉強するでしょ？

勉強しなくなったのはブラウザ標準のDOM APIの方。
これはJavaScriptの範囲ではない。

DOM APIを勉強することを、JavaScriptの勉強だと
思ってるのならそれは間違っている。

DOMよりもjQueryの方が優れているのはあきらなかので
（ブラウザ間の互換性の話じゃなくて、機能的に優れている）
今の人は、JavaScript + jQueryを勉強している。

都合とかは関係なく好みの問題だがjqueryは好きになれない

>>294
好みの問題は置いといて、好きになれない理由を
技術的な観点から聞かせて欲しい。

>>295
クライアント側に動かしてもらうコードは、可能な限り極限まで少なく小さくあるべき、という考え

>>296
つまり、開発速度よりも、実行速度を気にしてるってこと？

そんなこと言ってられるのは大したもの作ってないから

この的外れ感

>>298
「たいしたもの」とか曖昧な言い方じゃなくて具体的な
分岐点を示さないとたんなる思い込みでしか無いからなぁ。

ファイルサイズ＝実行速度でもないし、gzipでの転送速度33.6KBだったけど、
これ1画像よりも小さいサイズだったりするし、
ネットワーク転送速度も速くなって、パソコンの処理速度も速くなってるんだよね。
こっちはどんどん性能があがってるけど、人間の開発速度は上がらないからね。

はるか昔は1クロックでも少なく、1バイトのメモリでも小さくって
そういうことを気にしていた時代があったけど、
どんどん時代が進むために、意味がなくなってるのは明らかだよ。

可能な限りとか極限までとかいうのは、危険な思想だな。
可能な限り、極限まで、自分で書くコードを小さくすることを考えれば
”トレードオフ"という答えにしかならないはずなんだが。

jQueryを使う使わないとかそういう話ではなく、
トレードオフを無視する考え方は間違いだよ。

薄っぺらな文章を長々と書くなボケ

文句ばっかｗ
そういうつぶやきがしたかったらTwitterでやってろよｗ

オブジェクトあるいはarrayが空かどうかを調べるには
lodashの_.isEmptyを使うのがベストですか？

>>303
空の定義にもよる。変数がArrayであることが保証されているのであれば
.lengthを使うほうがいいだろう。

だけど変数がArrayとは限らずオブジェクトや空文字などが入る場合があるのなら
_.isEmptyを使用した方がいい。

>>291
まめぶ汁推しの人だろ。

arrayならわざわざ「オブジェクトあるいはarray」とは書きません
ではisEmptyを使います
ありがとうございました

オブジェクトって書いてあるのを見逃してたよ
すまんすまん。

問題は new Hoge[10] が Hoge を10個作る訳じゃないことだな
みんな一度はオブジェクトを複数作る方法を調べた事があるはず

>>289
ABNFを読めなければSyntaxを読めないだろうが
ABNFは仕様書では一般的に使われている書式で仕様書を読むなら必須

> アンブフなんて聞いたこともないが普通にJS使ってるしプゲラ
ABNFを理解できなくても何となく使えれば良いなら不要だろうよ
文法を理解しなくても時間をかければ、トライアンドエラーで解決できるだろうからな(理解せずとも使えればいいというタイプ)
だが、上の質問者のように文法を理解できなくて「なぜ？どうして？」と一生他人に音部に抱っこするつもりなら初めから理解しておけ

日本語の文法も大事

日本語の仕様書を読みたいのでアンブフの場所を教えてください

勉強といっても、それが問題になる場面その頻度を考えるのが大事だと思うんだよ
開発効率も勉強効率も一緒

フガフフってなんですか？

来週もまた見てくださいね？

初めて聞いたわ

jQuery(〜)は〜の中身を判断してそれぞれの処理を行うってことですか？

バッカスナウア記法って酒神のバッカスから来てるんです？

ABNFについて簡潔に説明して下さい

ってかこれ役に立つの？

酒バッカスなう

>>319
そう思うよな
JavaScriptと関係なさ過ぎww

オブジェクトにコールバック関数を渡せるようにしたら便利ですが
コールバック関数を受け取って自分をbindして実行するメソッドは標準ではないのでしょうか？

>>319
プログラミング言語は一般的に以下の処理がされる
字句解析 → var hoge = 1.0; を var|hoge|=|1.0|= に分割する 正規表現が使われる
構文解析 → new Hoge[1] → new|Hoge|[|1|] が正しい構文か判定する BNF(ABNF)が使われる
意味解析 → オブジェクトに足し算するような意味的に正しくないものをエラーにする
中間コード生成 → 機械語生成など

これから分かる事は、JSONやHTMLを自前で解析するには正規表現では基本的に無理だという事
よく初心者はやりがちだが、ムリクリやれない事もないがスマートに実装するには
BNF(ABNF)の知識とライブラリなどが必要

なんか凝り固まってるのがいるが、ここお前の演説会場じゃねーから
ブログでやってろ

技術的話題だから問題ない

このスレで論破ｗとかしたいなら必須の知識だな
じゃないと>>279とかみたいに恥ずかしいことになる

いや全然恥ずかしくないが？
実際にドキュメントに書いてあったじゃん
はい論破

>>327
まだ理解できてないじゃんｗｗｗ恥ずかしいのうｗｗｗ

JSもアブンフで定義されてるんですよね
ってことはアブンフを使ったら新しい言語を作れるってことですか？

ネタか？

>>322
具体的に

>>330
ネタじゃねーよカス

>>331
十分具体的だと思います

新しい言語つくるときにANBFで言語仕様を定義しとけば
構文解析部を完全自力で作る必要はなくなるな
パーサージェネレータでぐぐれ

ありがとうございました

>>333
オブジェクトにコールバックて
どういうシーンを想定してんのかなあと

ABNF理解できなくて見当違いの談義に花を咲かせた連中がいるというのに、「JavaScriptを書くのにアブンフを分からないといけないのですか？」と質問する精神がわからん

>>336
そもそも、[[Call]] を持ってなｋれば call 出来ないし、callback とはいわないよなあ
タイミングがわからん

>>337
知らないことは判断のしようがねーだろ
プログラマーとは思えないほど非論理的だな

>>338
日本語でOK

>>339
知らないから無知を晒したんだろ
>>266で知る手段を持ちながらも理解できなかった

今はABNFという理解する手段を知ったんだから、覚えれば良いだけだろ
覚える手段がありながら「覚える必要がありますか？」とか頓珍漢な事聞いてるんじゃねえって話

>>340
関数でなければ関数呼び出しできないからコールバックとはいわない
タイミングはいつ？

まさか単にFunction.prototype.call()がしたいわけじゃないよね？

こういうやつのことじゃね? まあこれはイベントだけだけど

var obj = {
handleEvent: function () {
console.log('click');
}
};
elem.addEventListener('click', obj);

>>333
全然具体的じゃないです

コールバックはコールバックだよ
そんな基本的なことまで言わせんな

>>346
そんなことは聞いてない

>>341
いやそれ見ても何が言いたいか分からんし。
とりあえずABNFってのがあるんだなってことだけは分かったけど
お前の言ってることがどの程度的を射ているのかはまだ分からん

>>347
アスペは黙ってじっとしとけ

new Hogeと
new Hoge()の違いなんて、現実的には問題になることはない
そのどうでもいい問題に対して「これ読めや」って言ってクソ長いドキュメント持ってくる奴は
知識はあるのかもしれないが頭は悪い
なんでどうでもいい問題のためにクソ長いドキュメント読まないといけないんだよ

ちゃんと読めばいい部分のリンクを張ってるのに
何いってんだこいつ

どうでもいいと思ってるのに、
なぜわざわざ話に加わろうとするんだ

>>348
ログは全て読んでる？
ABNFの日本語仕様書リンクも貼られていて、それを読んでABNFを理解すれば読めるはずだけど
無知を自覚しておきながら「知らないことは判断のしようがねーだろ」はないと思うよ
「どうやって学べばいいかわからない」とか「ここまで読んだが、この文章が分からない」ならまだわかるけどね
ここはJavaScript を自ら学ぶ人のための質問スレッドだからね

質問者は「どうでもいい」と思ってないから質問するわけだが

>>349
アスペ質問者は黙っとけ

>>346
この人は誰にいってるんだろ？
>>345に対してかと思ったけど、コールバックの概念説明は「具体的な説明」ではないし…

こんなのが()でくくらなくても書けるようにあんな構文規則にしてあるんだなあとちょっと感心した
new abc.def.ghi().jkl.mno.pqr.stu()
演算子の優先順位表だけじゃ説明できないから
原典の理解は大切だなと再認識したよ

「ABNFの日本語仕様書リンクも貼られていてって」
それがくそ長いっての
なんかナチュラルに馬鹿っぽいな

>>357
本当に分かったならちょっと説明してみてくれ

「ドキュメントを貼る」以外の方法で説明できる奴が一人もいないのは何故なんだ
抽象化能力ゼロなの？

>>356
お前だよカス

イイゾイイゾｗｗｗ
理解できないクヤシサが伝わってきてとてもとても気持ちいいですｗｗｗ

>>361
>>356から参加したんだけど、あなたは予知能力者なの？

（）でくくらなくていい・くくらなきゃいけないのはそれぞれこういうケースだ
興味があればこれ読めば規則が書いてあるよ、……とこれだけで終わっても別に良い

ところでこの構文規則、必然性や必要性ってあるの？
「なぜこうなってるか」が全然見えない

>>358-360
こういうことか

「どうでもいい質問だが、俺様が気になるので理解してやる
ただし、俺様は長文を理解できない
初心者でもわかるように三行で説明しろ」

諦めろ

やっぱ説明できないのか
知識は簡単に集められるけど抽象化するのは高度な知性が必要だからなプゲラ

>>364
もしこの捻った構文規則が無かったら
>>357の new abc.def.ghi().jkl.mno.pqr.stu() みたいに書くと
newが取るコンストラクタは abc か、abc.def.ghi().jkl.mno.pqr.stu()全体か、どっちにしかならないんだよね
でも直感的には abc.def.ghi がコンストラクタであって欲しいよね？

知ってるが、おまえの態度が気に入らない(AA略

理解できない人は文脈自由文法とか勉強してきてくださいよ
ある程度その辺の経験つんでると>>266のリンク先を見るまでもなく
>>267の抜き出した部分を見ただけでなんとなく直感的に理由に気づける
実際そのとおりなのか確かめるには>>266のリンク先きっちり読まないといけないと思うけど
メンドクサイし、実際にブラウザで試してみると得られた直感的なイメージどおり動いてくれるんで
自分的にはそれでいいです

コロコロID変わる身だけどID出しておく

>>367
どうあって欲しいかは、個人的意見でいうと、むしろ対象abcか全体かのどちらかかなあ
直感的には無名関数の書き方が頭にチラつく

その三者のいずれであるかは、仕様策定者（orグループ）の好みの問題なのか
歴史的経緯があるのか、それとも実用的な理由があるのか（こうじゃないとパーサの動き的に困るとか、開発効率に関わるとか）
どれなのか、ってところがわからない
※なぜこれが知りたいかというと、類似問題に当たったときに考える・調べる・理由を探す材料になったり説明しやすくなったりするから。多言語でも応用可能かもしれないし

>>370
オブジェクトをネームスペース的に使ったりすることを考えるとabcだけっていうのは有り得ないなあ
newしてメソッド送信っていうパターンはけっこう使うんで全部っていうのもちょっと嫌

>>370
真面目な質問のようなので id を出しておく(私もコロコロ変わるが)

もし、new Hoge.foo(); で new 演算子の対象が Hoge になるなら、new演算子の対象を foo にする為に new Hoge をローカル変数に格納しなければならない
new Hoge().foo() とすれば Hogeを対象に出来るのだから、選択肢を増やす意味では new Hoge.foo(); は foo が対象であるべきといえる

選択肢増やす事のどこが良い事なんだ
どっちが先に演算されるかややこしくなるだろ
わざわざ変数に収納しなくても必要なら()で優先順位決めれば良い

いつも new (Hoge.foo()) としろと？ｗ
勘弁してくれｗ

BNFとか文脈自由文法とか、
JavaScriptで一般的なコーディングをする限り、ほとんど知る機会もないと思うんですが、
どこで学んだのですか？
情報処理系の大学とかならありそうですが

new Hoge().foo() の方は (new Hoge()).foo() としなきゃいけないルールでもよかったかもね
でも new Hoge().foo() が可能なルールにしたのは作者の趣味かな

>>374
どこに括弧入れてるんだ。馬鹿なの？

web+db pressの総集編を検索したらBNFについての記事がいくつかあるようなので
勉強してみます
ありがとうございました

文脈自由文法を知らなくてもコーディングはできるけど、
文脈自由文法と正規文法の違いとか理解できてると
苦労してゴミみたいなアルゴリズムのコード捻り出す事が減って良いと思いますよ。
もっと早く勉強しとけばよかったと後悔してます。

Drag&Drop APIでD&Dしたファイルの名前を取得することはできるけど
パスを取得することはセキュリティ上できないというのをどこかで読みました。

D&Dしたファイルからパスを取得しA要素を生成して
＜a href="ファイルのローカルパス"＞リンク＜/a＞
のようにすることはできないのでしょうか？

>>380
それができるってことはその要素を生成すると同時にローカルパスをパスをサーバ側へ通知することもできるってことだからなあ
ファイルのパスの途中に自分の名前とか入ってる間抜けがいるだろ？
恥ずかしいじゃん

firefoxでwindow.heightでウインドウの大きさを取得して
キャンバスの大きさを設定したのですが左と上が画像のようにズレてしまいます
原因分かりますか？
http://www.dotup.org/uploda/www.dotup.org5187136.png

webdbpressとwikipediaでABNFを理解しました
分かってみれば、正規表現などよりも単純なものですね
そしてあらためて>>266のサイトを見たのですが、
この表記は、ABNFと微妙に違うような？
=の代わりにコロンが使われているし、
コロンが場合によっては複数だったりして、何か知らない規則が混ざってる感じです
どういうことでしょう？

デスクトップ画面をアピールしたい割合が強い

>>382
bodyにもスタイルはあるんだぜ
せっかくインストールしたFierbugで確認してみよう

>>383
そのドキュメントの文法の記述方法は5章で解説されてる

>>385
marginを0にしたらピタっと合いました
実は前作ってたゲームもマップチップが合わなくて挫折しまいました
たぶんこれが原因ですね
ありがとうございます！

var frameid = 0;
var request_url = "";
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
if (frameid === 0) {
frameid = details.frameId;
}
request_url = details.url;

if (frameid === details.frameId) {
// 判定用にrequestBodyの再構築
var size = details.requestBody.raw[0].bytes.byteLength;
var dataview = new DataView(details.requestBody.raw[0].bytes);
var request = "";
for (var i = 0; i < size; i++) {
var code = dataview.getInt8(i);
if (code < 0) code += 0x100;
request += String.fromCharCode(code);
}

// debug
console.log(request.length+":"+request);

// treasure_indexの場合Ajaxで再送信
if (request.match(/raidboss.treasure_index/)) {
console.log("----treasure start----");
console.log("----send treasure packet----");
var xhr = new XMLHttpRequest();
xhr.open('POST', request_url, true);
xhr.onreadystatechange = function(e){
if (xhr.readyState==4 && xhr.status==200) {
checkTresurePacket(xhr.responseText);
}
};
xhr.setRequestHeader("Content-type","application/x-amf");
xhr.send(new Uint8Array(details.requestBody.raw[0].bytes));
}
}
},
{urls: ["http://*.alteil.net/gateway/"]},
["requestBody"]
);

function checkTresurePacket(text) {
var button3=0,button2=0,button1=0;
// 順序を取得
text.match(/button3.(.)/);
button3 = RegExp.$1.charCodeAt(0);
text.match(/button2.(.)/);
button2 = RegExp.$1.charCodeAt(0);
text.match(/button1.(.)/);
button1 = RegExp.$1.charCodeAt(0);

// 順序を配列に格納
var order = [button1, button2, button3];
// debug
// console.log(list);
// 特殊な順序
if (order[0] == 3 && order[1] == 1 && order[2] == 2) {
order = [2, 3, 1];
} else if (order[0] == 2 && order[1] == 3 && order[2] == 1) {
order = [3, 1, 2];
}

// 可視化
var viewer = [];
viewer[order[0]] = "赤";
viewer[order[1]] = "青";
viewer[order[2]] = "緑";
alert(viewer.join(""));
}

このコードの解説をお願いします。background.jsというファイルの中身です。

ゲームでチートしたいなら必死こいて勉強しな

上にサイト貼ってあるんだからそこ使えよ

>>391
どうやって手をつけていいか分かりません
なのでとりあえずスレにあったコードを理解しようと・・・

>>392
難しそうなのでスルーしてしまってました
http://jsbin.com/jereloni/1/edit
これで合っているのでしょうか？

これってchromeの拡張機能じゃね

PCをサスペンドから復帰させた時に時々chromeの動作が変になります
リロードすれば直ります
これはどうしようもないですよね？

>>394
その通りです
他にも方法があるけどChromeの拡張機能が簡単なのでそれにしたそうです

readmeの一部です
■使い方
1. Google Chromeで「chrome://extensions/」へアクセス
2. デベロッパーモードのチェックボックスを入れる
3. パッケージ化されていない拡張機能を読み込む
4. 同梱のdtf_boxを指定する
以上で導入完了です。

order配列に、ボタン1-3の順序を入れる
// 特殊な順序
order配列が、[3, 1, 2]なら[2, 3, 1]へ、
逆に、[2, 3, 1]なら[3, 1, 2]へと交換している
つまり、[3, 1, 2]←→[2, 3, 1]の入れ替え

// 可視化
viewer配列に、order配列に設定された、
ボタンの順序に従って、赤青緑を設定している

例えば、order配列が、[3, 1, 2]なら
viewer[3]=赤、[1]=青、[2]=緑
つまり、viewer[1-3]は青緑赤の順に並ぶ

order配列が、[2, 3, 1]なら
viewer[2]=赤、[3]=青、[1]=緑
つまり、viewer[1-3]は緑赤青の順に並ぶ

JavaScriptの勉強法についての質問があります

大抵のwebアプリはjavascriptで書かれているので、ソースコードはいくらでも転がっています

それで例えばgooglemapのような高度なアプリのソースを見て、参考にすることは可能ですか？
それともブラウザからでは何らかのセキュリティなどが掛けられていて参考にしても意味が無かったりしますか？

>>398
無理です。
正確に言うのならば時間を無駄に消費するだけです。

なぜならgooglemapのような高度なアプリは
速度を極限まで上げるために、コードを縮小化しているからです。
つまり、わかりやすい変数名・関数名が、単なるa, b ,c という短い名前に
置き換えることで転送速度を上げてます。

また、作るときは作りやすさのために複数のファイルで作ります。
この作りやすいファイル構成というのもJavaScriptの勉強の一つです。
が同じく転送速度を上げるために一つないし、少数のファイルに結合しています。

つまり高度なアプリのJavaScriptコードのほとんどは、ソースそのものであることはまずなく、
人間が読んで勉強になるものにはなっていません。

ソースを見たいなら、有名なオープンソースのコードを見ればいいです。
そんなにgithubにいくらでも転がっています。

コードの綺麗さは参考になるけどプロジェクトがデカすぎてどこで何やってるかは分からんな俺は

>>398
Minified されたコードは Online JavaScript beautifier で整形できるので人間が読めないわけではありません。
http://jsbeautifier.org/
ただ、コード量が膨大なので全てを読み解くのに恐ろしく時間がかかります。
読みたい部分だけ目星をつけて読むのなら良いと思いますが、全体的に読むなら Google が提供しているJavaScriptライブラリを読むほうが時間効率的に良いと思います。

>>386
ありがとうございました
266-267で書かれていることがだいたい理解できました

new hoge.hoge.hoge.Hoge()
という式があった時、
hoge.hoge.hoge.Hoge
が先にMemberExpressionとして評価されると思いますが、
MemberExpressionの定義の中に、
hoge.hoge.hoge.Hogeのように再帰したMemberExpressionを定義する部分がないように思います
なぜこれで再帰的に評価されるのでしょうか？

論破君が論破のために必死で勉強してるのか
しかし目が節穴だな

MemberExpression . IdentifierName

この定義が再帰的に適用されるのが分かってないと思われ

>>403
下記が再帰的に参照している。

MemberExpression
　MemberExpression . IdentifierName

最近、荒れがちなので質問時には id を出してもらえると有難い。

1 + 2 + 3 + 4 + 5が定義されてないって言ってるような物だな

あっ、そうか
MemberExpressionにMemberExpressionが書いてるんだから、それが再帰ですよね
ありがとうございました

JavaScriptで初めてオブジェクト指向を学びたいのですが全体の構造というか使われ方が掴めません
よくある10行や20行のパーソンやらアニマルやらを使ったオブジェクト指向の概念の説明ではなく
実際に計算機のような簡単なもので全体的に完成したコードの例が一つ欲しいのですが、いいものはありませんか？

オブジェクト指向はセンス
更に言うならJavaScriptのobj指向はプロトタイプベースといってちょっと特殊
(普通はクラスベース)
C++のオブジェクト指向から学ぶべし

オブジェクト指向が普及しだしてから、システムの重大障害とかセキュリティーホールとか、
大量発生するようになった。
共通化とかカプセル化とかフレームワークとか進めた結果、
業務アプリの設計者や実装者が、
どういう動作をするかよく理解しないまま利用しているケースが多い。
いざ不具合が発生した時に、全体がわかる人がいないから、
何がどうなっていてどこを直す必要があるのか解析できる人がほとんどいない。
シンプルに効率よく構築できるはずが、
問題がより複雑になって、維持管理にコストがかさんでいるのが現状。
１０年後に主流であり続けられるかと言ったらかなり微妙だね。

言語を学ぶのではなく、アルゴリズムを徹底的に身に着けるほうが、役に立つよ。
あえて言語を学ぶとしたら英語一択。

オブジェクト指向が問題を複雑にしたんじゃなくて
オブジェクト指向によって複雑な問題に対処できるようになっただけ
もしオブジェクト指向を使わずにその複雑な問題に対処しようとしたら
もっと問題が出るよ

・文字列末に<br>がひとつだけあれば削除する
・文末の<br>がふたつ以上なら削除しない

これをreplaceでするにはどうしたらいいですか？
文末の<br>をひとつ削除する、なら簡単にできますが
ふたつ以上なら削除しない、が難しいです

>>413
ちょっと正規表現考えたけど
第二引数を関数にしてごにょごにょしたくなってきた

正規表現だけでは難しいので

str.replace(/(<br>)*$/g,function(s){
return s.length > 4 ? s:'';
})

とやったら出来ました
もっといい方法はあるでしょうか

>>414
まさにごにょごにょしましたw

>>414
普通に
.replace(/([^(<br>)]?)<br>/, '$1') で良くね？

後者の<br>の後ろの$が抜けてた

試したらダメじゃーんｗｗすまんな

javascriptの正規表現には否定的後読みの機能はなかったはず
それに他の人がソースを触ったりすることを考えると>>415で最善

>>413
str.replace(/((<br>)|(<br><br>))($)/g,"$3$4")

でできる気がする

>>413,415
str.replace(/(<br><br>)$|<br>$/g, '$1')

たしかにそれで出来ますね
<br><br>をあえて置換するという発想がすごいです
ありがとうございました

>>401
> Minified されたコードは Online JavaScript beautifier で整形できるので人間が読めないわけではありません。
実際にやってみればわかるけど、読めないよ。

あれは変数名は元に戻さないからね。

改行とインデントと整えるツール

>>424
分かっています。
機械的処理では元の変数名には戻せませんが、読めない事はありません。
実際に読んだことがありますよ。

A(){
B();
}

B(){
C();
}
か
A(){
B();
C();
}
ならどっちがいいですか

どれもだめ

>>424
ロジック読むのに、変数名なんて関係ないよ。
実際、２０年ぐらい前のプログラムの変数名や関数名は
普通に「A01B002」とかコードで書くのが普通だったし、
苦も無くロジックを組めたし、読めた。

読める自慢されても＾＾；

js は型を宣言しないので、名前が意味不明になると余計につらいだろう

変数名の長さもパフォーマンスに影響するからな
読めるソースを書いて後はグーグルさんに最適化してもらえばええ

変数名の長さがパフォーマンスにどのくらいどういうかたちで影響するんですか

マイクロ秒単位の話だから気にする必要はない
ただ最適化の手法としてのお話

２つ質問なんですが
質問１　thisをオブジェクト内で使ったらthis.プロパティで普通に呼び出せたのに
thisを関数内で使ってローカル変数を呼び出しても
function a(){
var tes=5;
alert(this.tes);
tes++;
}
//外部から２回呼び出す
6にならないどころか５すら出てこないのですがなぜですか？
質問２　グローバル変数を使わずに外部から２回関数を呼び出しても
その値を保持(C++のスタティック変数のように)するにはどうすればいいでしょうか？

function a(){} の外でvar tesしようと思わないのか

配列とスカラーの両方を取る場合の引数名は何にしてますか？
idとidの配列の両方を取るような場合です

変数の意味が重要
a + b で、aがリンゴの数、クラスの生徒数など、
意味がわからないと、ソースコードは理解できない

ソースコードがすごく少ない、数行のテトリスを見たが、
変数の意味がわからない
7で割る理由だけが、タイルの形が7種類あるためと、
そこしかわからない

lodashを使い
array同士で一致するものがあるかを調べる時は
_.intersection(a,b).length > 0
とするしかないですか？
もっといいやり方あれば教えて下さい

>>398で勉強のためにソース読みたいって言ってるとこから始まってるのに
変数名がデタラメになってるソースでも読めるよ！読めるよ！読めるよ！とかバカすぎ

該当Webアプリがどういうコードで実装されているか勉強するためにコードリーディングするので変数名は何でもいい
読みにくいだけで読めないわけじゃない

変数名がデタラメで勉強にならないのは「変数名の命名規則を学ぶ時」ぐらいか

議論するだけ無駄
こいつは論破することが目的だから
論破されることなんて絶対許さない

デコンパイル後のソースとかも同じ
必要があったから読んだ経験あるけど時間の無駄感はんぱなかったわ
やはり何事も効率が良いほうがいい

minifiedされたコードリーディングは、そこにどれだけ時間と情熱をかけられるかに依る
その判断は人それぞれなので、この場合は質問者自身にしか判断できない

この手の問題で質問者と自分を同一視して「無駄」と評する人がいるけど、質問者の可能性を自分と同一と見るのは傲慢だと思うな
「コードを読むのに時間がかかる」問題点は共通認識なのだから、後は質問者に判断してもらえばいい

サーバから送られてくるデータの形式とか分からないから
たとえミニファイされてなくても難易度がS級レベルなのはまちがいない
はい論破

特定のコードの意味が知りたいのならminifiedを解読して調べるが
何か勉強するのに適当なコードが欲しいっていう相手に勧めるとかありえんだろ？

>>410
プラットフォームを選ばずブラウザですぐにテストできるのでJavaScriptでオブジェクト指向を始めたいです
「クラス」などの単語無しの解説サイトが少ないこともあり、type=text/javascriptから始まる
オブジェクト指向スクリプティングのお手本の様なコードが見たいのですが
やはり「クラス」なしで解説している参考書を探すべきでしょうか

>>446
特定のコードの意味が知るのも勉強だと思うが

>>445
もはやどの意見に対しての論破なのかもわからん

googlemapの解析の難易度から言えば
ミニファイによる難読性などは
もはや本質的ではないといえる
はい論破

論破いいたいだけやろ

複雑で大規模なコードであればあるほど変数名ないと読みづらいだろ

難易度10000が難易度10500になる程度

よくJavaScriptはソースが隠せないから怖くて仕事で使えないみたいな話しがあるが、
Javaは逆コンパイル出来る事を考えれば、難読化したJavaScriptの方が型情報が無い分
ソースを隠せてると言える

読みにくいだけやろ

ソースコードなんて難読化しようが圧縮化仕様がクライアントに渡る時点で全部漏れてるんだよ
そんなところに気を使うなら人様にミられてもいいコードを書けばいい
他人に見られると困るようなコードを書きたいならjavascriptは触るな

そのコードについて一番詳しいのは自分
という状態を保っておけばパクラーが出てきても問題ない

>>456
触るなとうのはJavaも含まれているのか？
JavaScriptよりもJavaの方が分かり易いソースを得る可能性は高いと思ってるけど

onblurハンドラがセットされている要素をblur()をしたら、
onblurハンドラは、blur()以後のコードよりも先に実行されますか？
場合によってはblur()以後のコードの方が先に実行されることがあり得ますか？

>>447
クラスなしのオブジェクト指向を理解したところで何になるわけ？
それオブジェクト指向じゃないし
言い方きついがJSでオブジェクト指向を理解するのはお前じゃ無理といっておく

オブジェクト指向自体がオワコンだから、覚える必要なよ。
関数型言語が復権する。

>>460
JavaScriptのオブジェクト指向にはクラスそのものは無いと読んだことがあります
もしそうなら「クラス」あるいは「クラスのようなもの」というイメージで理解してしまうと
JavaScriptでしかできないような書き方を否定してしまうようで、なんとなく避けたいです

>>461
復権も何も、関数型言語が覇権を握った事なんてあったっけ？

いいや無い

>>398はどこに消えたのか

Cを関数型言語だと誤解してる人は少なからずいる。

>>462
実際クラスベースっぽい書き方とprototypeベースっぽい書き方って大して変わらんよ
継承の仕方が違うだけで
どっちの書き方から覚えようともJavaScriptのオブジェクト指向がわかれば普通に両方書けるようになる

>>461
関数型パラダイムとオブジェクト指向は
対立するものではなく共存するもの
両方知る必要がある

オブジェクト指向はオワコンになったんじゃなくて常識になったんだよ

JavaScriptはプロトタイプを使って結果的にオブジェクト指向言語と同じことを実現しているだけなので
「オブジェクト指向を覚える」という目的には適していない

JavaScriptはPythonとかと全く同じオブジェクト指向言語とも言える
本来はclassとかのキーワードを導入して実装の詳細は隠すもんだが
JavaScriptはそれが剥き出しになってる(prototypeがそれ)

動的言語のクラスシステムがどう実装されているか勉強にはなったが
おかげでオレオレクラスシステムが氾濫するはめにもなった

document.getElementByIdでDOM要素を変数に代入したあと
そのDOM要素をremoveしても、
変数の中にはDOM要素が入っています
もしDOM要素を持っている変数がある場合は、それも削除しないと
メモリは完全に解放されない、ということでしょうか？

はい

ありがとうございました

function func(a){
this.a=a;
}
なぜこれで保存？できるんですか？

new A();とすると、
Aと同名のコンストラクタ関数 Aが呼ばれるので、
その中に、そのクラスに特有の処理を書けばよい

function A(){
thisを使って、プロパティ・メソッドを作る
}

次に、Aのプロトタイプに、親クラスPを、newして設定する
これで、Aがnewされる時には同時に、Pの部分もnewされて、
Pクラスのコンストラクタ関数 Pが呼ばれる
A.prototype = new P();

A1{P1}, A2{P2}
オブジェクトA1の中にP1があり、A2の中にP2があるイメージ

つまり、オブジェクト指向のクラスは、
JSではコンストラクタ関数のこと


そんなに本格的なことを勉強したいのなら、
この本を読むのが速い

はじめてのJavaScript、秀和システム
掌田津耶乃(しょうだ つやの)、2013

オブジェクト指向、DOMについて、
各100ページの説明がある

またかw

>>476
もはやネガティブキャンペーン

>>475
varなくても宣言できちゃうから、と返せば良いのだろうか

>>476
> これで、Aがnewされる時には同時に、Pの部分もnewされて、
> Pクラスのコンストラクタ関数 Pが呼ばれる
> A.prototype = new P();
>
> A1{P1}, A2{P2}
> オブジェクトA1の中にP1があり、A2の中にP2があるイメージ

間違ってます
もういっかい勉強しなおしましょう

イベントハンドラの中で
一連のイベント処理が終わってから実行される処理をセットしたい場合
どうやればいいですか？
たとえばclickハンドラの中で、その処理をセット
その後もイベントバブリングし、デフォルト処理もされる
その後、clickハンドラの中でセットした処理が実行される
という感じです

setTimeoutでウェイトを持たせれば出来るとは思いますが
それだと処理速度依存になるので、
もっとスマートなやり方はできないかと

setTimeoutで0を指定しても、イベント処理が終わった後に実行されました（chromeにて）
望ましい動作ですが、
これはJSにおけるデフォルトの動作なのでしょうか？
つまり、「イベント処理がすべて終わるまではタイマ割り込みは発生しない」ものなのでしょうか？

http://jsbin.com/vifuzoru/1/edit

chrome/firefox/IEそれぞれの最新版では検証しても、
setTimeout0はイベント処理の後に実行されました。
関数の途中で割り込みが発生することはありませんが、
イベント処理全体もそのような形でガードされているのでしょうか・・？

>>481
前も同じ質問しませんでしたか？
イベントハンドラ関数内で処理リストを持っておき、自前で管理して下さい。

>>484
保証されません

ありがとうございます
根拠は何でしょうか？
イベントキューにスタックが積まれて、
イベントループが順次処理する、
settimeoutはイベントキューの最後に追加する、
というような記事は見つかるのですが、
あるイベントが呼び出すイベントハンドラの系が、
イベントキューに単一タスクとして登録されるのか、そうでないのか
という情報が今のところ見つからなくて困ってます
根拠をご存知でしたら教えてください

ん？
タイマーの方は構わず発火しちゃうんじゃないか？

タイマーもイベントキューで実行されるようです
イベントキューに例えばクリックイベントが登録されるとすると、
そのイベントの処理が実行されている間は
イベントキューに何が積まれようがそもそも見られてもいないのでは
とも思うのです

俺もそんな気がしたけど仕様ざっと見てもそこらへん書いてなかったし、
保証されてないのかな

イベントキューの中ではタイマーもクリックもイベントという意味で同列で
FIFOでたんたんと実行されていく、と考えたら、
イベントハンドラの中でセットしたタイマーイベントがそのイベントが終わった後に実行されるのは
原理的に必定だと言えるのでは。
またハンドラ内でタイマー以外のイベントをtriggerした時にも、
あくまでイベントキューに積まれるだけで、実行はそのイベントが終わった後になるはず

いま問題にしているのは、バブリングしていくときにバブリングフェイズ全体が一つのタスクなのか個々のハンドラ実行が一つのタスクなのかってことだろ

その疑問を呈したのは自分ですが、
イベントキューというものの構造を考えると必然的にひとつのタスクになると思います
キューに積まれているのは各ハンドラへの呼び出しではなく、
クリックイベントだと思われますので。
現にイベントフェーズの中で遅い処理を書いても、
ハンドラ中で設定したsetTimeoutは必ずその後に実行されます

>>486
仕様に書かれていないからです。
最後に実行したいなら自前で順序を制御するのが最も確実であると思います。

>>479
ということは実質外部変数と同じってことですか？

【環境】IE9・IE10・Firefox・Chrome
【何をしたのか】ファイルをPOSTした
【エラーメッセージ】特になし
【期待する結果】画面遷移をせずに選択したファイルをPOST送信したい
【サンプルコード】
こちらでの質問でよいのか判断がつきかねるのですが
type=fileで選択した画像をPOSTしたいと考えておりますが

var image = $("#registerd [name=image]").val();

としてもimageには何も入っておりません。
その他のtype=textなどは取得できてPOST出来ております。

選択された画像を取得するにはどのようにすれば良いのでしょうか？
識者の方たちのアドバイスいただけると助かります。

>>495
残念ながらjQueryでは選択したファイル内容を取得できない。
取得するにはFile APIを使用する必要がある。

ただしFile APIはIE10から対応だから
IE9では動かない。

画面遷移をせずにファイルをPOSTするだけなら
iframeを使ってできる。これなら古いブラウザでもOK

なお、ここらへんを意識せずにやってくれるライブラリがある。
検証したわけじゃないからオススメは言えないが

「ファイル アップロード JavaScript ライブラリ」あたりで
検索すると沢山出てくるよ。

良さそうなのがあったら教えてくれｗ

ｊQuery初心者で勉強中の者です。

ttp://calie.jp/beashow/index.htmlのサイトのような
画像を読み込んだら自動でエフェクトが動く動きを実現するには

jquery.inview.jsとjquery.easing.1.3.js

が必要だということはわかったのですが、どのように記述すれば実現できるのかがわかりません。
画像をよみこんでフェードインさせる方法を詳しい方ご教授いただけないでしょうか

idがabcのtrタグ内にある、nameが_defで終わるnameをリストしたい。
一番スマートな方法は？

<tr id="abc">
<td><input name="fas_def" /></td>
<td><input name="sec_def" /></td>
<td><input name="thr" /></td>
<td><input name="fou_def" /></td>
<td><input name="fif" /></td>
<td><input name="six_def" /></td>
</tr>

>>499
一行で書いてみた。動かしてないけどこんな感じかな。

var names = $.map($('#abc [name$="_def"]'), function(e) { return e.attr('name') });

>>498
普通にDOM使えばライブラリなんかいらないだろうに
jQueryならanimate使うとか

少し間違った。こうだった

var names = $.map($('#abc [name$="_def"]'), function(e) { return e.name })

ブラウザがarrow functionをサポートしてれば更に短くこう書ける。
var names = $.map($('#abc [name$="_def"]'), e => e.name)
;

もしイベントが並行に実行されるのなら、
関数Aの実行中にもう一つ、
同じ関数Aが実行される可能性があるので、

すべての関数を再入可能にしなければならないし、
すべてのグローバル変数を、ロックしなければならない
つまり、マルチスレッド・プログラミング

もしそんなに難しいなら、
誰もプログラミング出来ないはずだから、
そんなことはあり得ない

そもそもJSで、ロックやマルチスレッド・
プログラミングについて、書いている本があるのか？

>>498
jQueryの質問は、jQueryのスレへ書き込んで

JSで画像をブラウザの表示領域内に表示されるまで読み込ませない、という処理は可能でしょうか？

このスレはjqueryの話題も排除しません

>>493
ありがとうございました
JSのイベント周辺について書かれている仕様書とは何でしょうか？
http://www.ecma-international.org/ecma-262/5.1/
これを見てもイベントについてはなぜか書かれていないようです

http://javascript.info/tutorial/events-and-timing-depth#javascript-is-single-threaded

これにかなり詳しく書いてありました
必ずイベントキューに登録された順に実行されるわけではなく、
DOM mutation eventと
DOMイベントの中からトリガーされたDOMイベントは
キューに入れられずにシンクロナスに実行されるとのこと

>>504
可能だし、最近よく見る
jqueryのプラグインにありそう

>>504
http://codezine.jp/article/detail/7623

>>506
>>4にリンクがあります。
http://www.w3.org/TR/DOM-Level-3-Events/
その他、DOM Events 周りの仕様も参考に。
http://www.w3.org/TR/#tr_DOM_events

>>507
そこはｓ公式ではないので必ず原文の仕様書と照らし合わせて情報の正誤を確認して下さい。

>>508,509
やはりJavaScript無効環境に対応するにはHTMLにnoscriptを入れないとだめなようですね
今から大量のimgタグにそれをするのは大変なので諦めます　ありがとうございました

JavaScript/jQueryのコツ〜円滑な協業と連携でWebサイト作りを成功させる！〜
(番組ID:lv186185614)

2014/07/18(金) 開場:19:27 開演:19:30

>>510
DOMの方に書かれているんですね
ありがとうございました

ｊQuery初心者で勉強中の者です。

ttp://calie.jp/beashow/index.htmlのサイトのような
画像を読み込んだら自動で画像がフェードインしエフェクトが動く動きを実現するには

jquery.inview.jsとjquery.easing.1.3.js

が必要だということはわかったのですが、どのように記述すれば実現できるのかがわかりません。
スクロールしてその画像がみえてきたときに画像をよみこんでフェードインさせた画像を左右上下にエフェクトをかけて表示させる方法を詳しい方ご教授いただけないでしょうか

jQueryの質問は、jQuery専門スレへ書き込んで

jQuery ライブラリ 総合質問所 vol.4
ttp://peace.2ch.net/test/read.cgi/hp/1400313626/l50

>>515
断る

荒らしには反応するだけ無駄ですよ

>>515
誘導するならライブラリ総合スレだろう
jQueryスレは荒らしが立てたスレだ

JavaScript ライブラリ総合質問所 vol.4
http://peace.2ch.net/test/read.cgi/hp/1400834117/

誘導厨はプログラム板へどうぞ

これにタイムアウトを組み込むことは無理でしょうか？
検索するとajaxでは見るのですが単純なpostではみかけませんでした。

$("form#sample").submit(function(){
var mail = $("#sample [name=mail]").val();
$.post(
'foobar',
{
'mail': mail
},
function(data)
{
if( data == 'success')
{
alert('OK');
}
else
{
alert('NG');
}

}
);
});

使用している部分が多いのでajaxに変更することなく、
これにタイムアウトがつけれればと考えています。

JavaScript を自ら学ぶ人の質問はなかなか見ないな

FormDataっていうのもあるのか。
でもこれHTML5の内容だな。
やっぱり古いブラウザではJavaScriptで
ファイルの送信ってきついの？

>>522
> FormDataっていうのもあるのか。
HTML5 は関係あるのか？
XMLHttpRequest Level 2 の FormData の事ではないのか？
http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata

XMLHttpRequest Level 2 ってHTML5の一部でしょ？

XMLHttpRequestはデータの送信だけだから
ローカルのファイルを読み込むには
別の技術が必要になるのでは？

>>524
違う

>>520
一旦サブミットイベントにフラグでreturn falseして、タイムアウトの関数でフラグを変えもう一回サブミットをよぶ。これはフラグで通すとか。

>>486 >>493
setTimeout の task source は timer task source と呼ばれるものが
仕様に定義されている
www.w3.org/TR/html5/webappapis.html
したがってevent loop の task source とは別なので queue も別になるだろう

>>484
その eventの propagate が終了するまでは同期的に実行される筈
DOM仕様のアルゴリズムでも非同期には処理していないし
例えば dispatchEvent は同期的に実行される

>>525
送信だけって、リクエスト送ればレスポンス受信できるじゃないか？
ローカルファイルは FileAPI

同期的と非同期的の意味が分からなくなってきました
関数発行後すぐに実行されるのが同期的、
発行してから実行されるまでタイムラグがあるのが非同期的
と思っていたのですが違いますか？

>>529
違います。

同期は関数を実行して処理が追わらないと
関数から処理が戻らないものです。

その関数の処理が10秒かかる重い処理であれば
10秒の間、その他の処理は一切できなくなります。
だから非同期を使うんですね。

タイムラグが有るかどうかは関係ありません。

リクエストを送っている間jsが止まるのが同期

innerHTMLとnodeValueの値が違うのですが２つは同じじゃないんですか？

>>530
すると非同期関数は、実行中に処理が戻ってくることがあるのですか？
遅延実行されるだけで、実行中はブロックされると思ってました

>>531
innerHTMLはHTMLパーサが正規化した後のHTML
nodeValueはノード毎の固有値(nodeTypeによって値が異なる)
DOMとHTML5の仕様書を読もう

シングルスレッドで動いているJSが
ノンブロッキング処理できるのは何故ですか？

innerHTMLだったりjqueryのhtmlだったりって非推奨なのですか？
documentに大量ノードがあって、あからさまにid=hogeのテキストだけ更新、みたいな場合なら
やらないほうがいいというのはわかるのですが
何が何でも部分的にappendやらremoveやらをちまちま更新した方が良いのでしょうか？

普通に使っていい

>>534
シングルスレッドで動くのは、JavaScriptの実行環境で動く
あなたが作ったスクリプトであって、
JavaScript実行環境自体はマルチスレッドだからです。

>>532
最後の行の認識で合ってる
10秒かかる関数なら同期だろうと非同期だろうと10秒ブロックされるのは一緒
その時点で実行される（同期）かされない（非同期）かってだけ
WebWorkerを使わない限りはシングルスレッド

jqueryで
プラグインで追加されたメソッドの一覧を知る方法ありますか？

>>535
innerHTMLの問題点がわかっているなら使ってもいい

innerHTMLの問題点なら、jQueryのparseHTMLメソッドで解決できるよ。
だから今更遅いappendやremoveなんかを使う理由がない。

innerHTMLの問題点って出力にそのまま使ったりしちゃ（攻撃者のコードが入るかもしれないから）ダメよってことであってる？

>>538
ありがとうございました

>>537
それは違うのでは？
仕様書にJavaScriptはマルチスレッドでなくてはいけないとか書かれてるんですか？

>>544
仕様書には特に何も書かれているだろう。

何も書かれていないということは自由だ。
だからマルチスレッドにしてもよい。

マルチスレッドじゃなくても実装できるなら
別に構わないが。

同期か非同期かって具体的にどんな場面で気にするのかわからん

パフォーマンスを無視できるのならブロッキングI/Oが自然
つまりパフォーマンスを気にする時にノンブロッキングI/Oが使われる
はい論破

ユーザー定義メゾットの対義語って何ですか？

組み込み関数以外でお願いします

>>547
何を論破してるのかわからんが、単なるパフォーマンスではないぞ

>>546
一般に、処理の中で
すぐにやらなくてもいい（画像の描画など）
すぐにやれない（他の処理の結果に依存するものなど）
終了時が予測できない（サーバのレスポンス待ちなど）
部分は非同期、すなわち後回しにする

GUI フロントエンドの場合は利用者を待たせないことが主な目的になる

>>548
組み込みメソッド

>>550
言ってること同じやんけ
論破され夫

>>550
その処理の中で、サーバ側じゃなくてクライアント側でやる必要のある例ってどんなのがある？
画像の描画については同期・非同期を気にするパターンがそもそも思いつかなかった

>>547
自前の重い処理があった場合は非同期にしてもパフォーマンスは向上しない
はい論破

>>554
そんな1+1=2みたいなこと言われても言葉に困るわ

そもそも同期/非同期っていう言葉がわかりにいんだよな
同期と言う言葉には調和やコントロールのイメージ、
非同期と言う言葉には不調和やアンコントロールのイメージがあるから。
しかし実態は逆で、同期的操作は時に不調和をもたらす
だからブロッキング/ノンブロッキングの方が適切だと思う

でもまあ、ブロックと言われても、
レゴ？って思うのが普通だろうな。

総合スレから飛んできました。現在、selectのidごとに関数を呼び出していますが、もっと
簡略化してどのオプションから選択されたかに変えることはできるでしょうか？

$(function(){
$("#f1").each(function(){
　　　　　　　　var pos;
　　　　　　　　function call_list(){省略}
$(this).each(function(){call_list();});
$("#sel1").change(function(){
pos = $("#sel1 option:selected").val();
call_list();
});
$("#sel2").change(function(){
pos = $("#sel2 option:selected").val();
call_list();
});
});
});
</script>
</head>
<body>
<form id="f1">
<select id="sel1">
</select>
<select id="sel2">
</select>
<select id="sel3">
</select>
</form>
</body>

省略部分

$.ajax({
url:"ajax_call.php" ,type:"post",data:{"send":pos}
}).done(function(ret){
//alert(ret);
$("#sel2").children().remove();
$("#sel3").children().remove();
var i;
var sels = new Array("#sel1","#sel2","#sel3");
var pack = ret.split(":");
for( var i=0 ; i < pack.length; i++){
var sep = pack[i].split("@");
for(j=0;j< sep.length -1;j++){
var option = $("<option>");
var opt = option.html(sep[j]);
option.val(sep[j]);
var sel = opt.appendTo(option);
sel.appendTo(sels[i]);
}
}
}).fail(function(){
alert("error");

>>558-559のリファクタリング後
$(function(){
　　function threeSelectFrom(element) {
　　　　function refresh(pos) {
　　　　　　$.post("ajax_call.php", {send: pos}, function(ret) {
　　　　　　　　$(".sel2, .sel3").empty();
　　　　　　　　$.each(ret.split(":"), function(i, item) {
　　　　　　　　　　var values = item.split("@");
　　　　　　　　　　 values.pop();
　　　　　　　　　　var options = $.map(values, function(value) {
　　　　　　　　　　　　return $("<option>").html(value).val(value);
　　　　　　　　　　});
　　　　　　　　　　$(".sel"+(i+1)).append(options);
　　　　　　　　})
　　　　　　}).fail(function() {
　　　　　　　　alert("error");
　　　　　　}
　　　　}

　　　　$(".sel1, .sel2").change(function() {
　　　　　　var pos = $(this).find("option:selected").val();
　　　　　　refresh(pos);
　　　　});

　　　　refresh();
　　}

　　$("#f1").each(function() {
　　　　threeSelectFrom(this);
　　});
});

idを持たせずに
どのオプションから選択されたかを判定したいってこと？
別に、id持たせたらいいじゃん
何があかんねん

> 何があかんねん

そりゃ再利用しづらいからだろ？
同じものが2つ以上でたら使えない。

最近はIDを使うことって少なくなったな。
classやnameあたりで十分だよ。

>>553
>画像の描画
クライアントのブラウザ側が非同期にやってくれるので
クライアントのスクリプト側が気にする必要は普通無い

> クライアント側でやる必要のある例
一般論だが
API にイベントハンドラが用意されていない種類の処理で
非同期にやる必要があるもの、または、自前の重い処理は、
クライアントのスクリプト側で非同期処理を書くことになるだろう
（重い処理は Worker 利用するか、細分化して setInterval や requestAnimationFrame など）

JavaScriptで同期処理されるのって、
alertとconfirmぐらいなんだよな。

ブラウザ開発の初期に初期にこういう設計にしたの
凄いと思うわ。そのおかげでGUIとかアニメーションに
時間がかかるようなものでも、自然と非同期にプログラミング
するようになった。

リフロー

>>542
XSSも問題点の一つだが、既存のDOMノードの参照が失われる問題の方が影響範囲が大きい
当然ながら>>541は解決法にはなっていない

>>542
XSSも問題点の一つだが、既存のDOMノードの参照が失われる問題の方が影響範囲が大きい
当然ながら>>541は解決法にはなっていない

詳しく

javascriptを使ったゲームが、FireFoxとGoogleChromeでは見られるのですが、IE11では読み込み画面から進みません
IEのセキュリティのレベルのカスタマイズでスプリクトの項目は全て有効にしたのですが無理です
どうやったらIEで見られるようにできますか

確かに判定するためにDOMのidを使うのは無駄に消費するから駄目だな
data-idを使うべし
class使えって意見は意味わかんね
コマンド実行に一意性のあるidがいるのは当たり前

>>567
kwsk

全部書き換えるから要素のポインタを持ってる時とかに問題になりやすいって意味じゃないの

要素にイベントハンドラ付けてたときとか

まとめると、XSSに十分気をつけていればinnerHTML使っても全く問題ないと

NO

innerHTMLのリスクとデメリットを分かっていたら問題ないでFA

>>572
>>573-574の指摘通り
過去何度も話題にあがっていたはず

既存のDOMの参照がなくなる・・・ってそれただの把握できてないアホ
どうせ前にDOMが壊れるって騒いでたやつだ

把握できてるからこそだと思うが・・・

想定していたものじゃなくなるって意味だろ
アクロバティックな解釈して頓珍漢な批判をする馬鹿が最近多いな

>>567
> XSSも問題点の一つだが、既存のDOMノードの参照が失われる問題の方が影響範囲が大きい
それは、ノードを入れ替える以上
何を使おうが絶対発生する。

そこでjQueryがでてくる。jQueryを使っていれば、
これは問題にならない。（適切に処理してくれる。

どのレスをみても「何故」がみえてこないな
サンプルコードを書いてみてくれんか

分からないなら多分問題ないよ
ある程度複雑な処理をしてないと問題出ないから

その複雑な処理が何かって話なんだが、
結局、問題が出るコードはだせないんだね。

ここまででみんな気づいたと思うけど、
問題は全くありません。

経験のある技術者には分かることだから
いちいち例を出すのが面倒なだけだろ
まぁ、思いたいように思えばいいんじゃね

コードひとつ書けないこの人はたぶん次はこれを見ろよと英文サイトを出してくる
でも内容的には的外れで突っ込まれて逃げる

俺は経験ある技術者だけど、
DOMの参照がどうたらいう問題は
今まで起きてないよ。

起きたか起きてないかじゃなくて
理解できるかできないか。
経験ある技術者は理解できる。

ん？ 理解した上で起きないって言ってるんだけど。
ガベージコレクタって知ってる？

いやそんな話してないしw
分かってねーじゃん。

JSで、新しいウインドウを開き、
データを文字にしたものをそこに出力する
をしたいです
どうしたらいいですか？

>>592
意味が分からんがエスパーするとwindow.opener

ありがとうございます

>>591
じゃあ、おまえが何の話してるか言えよ。
わかってるんだろ？

それを言わないから、問題が起きたんだーっていっても
何の話だと思う？何の話かは言わねぇｗｗｗ。ってなってるから
誰もおまえの言うことを信じてないんだぞ

>>593
逆じゃね？

>>592
window.openしたら、openしたwindowを返すから、
そのwindowに書き込めばいい。

>>595
だから分からないならいいんじゃねって言ってるだろ
分からないことは責めてないから。
頓珍漢な絡み方をしてくることを責めている

よくwindow.openって書かれますが、
windowいらなくないですか？
何でwindow書くのですか？

参照していたものが失われる可能性がある
↓
ガベージコレクタが回収するから問題ない

なんだこれ

「参照先」に訂正するわ

>>598
openでは汎用過ぎて、なんのopenなのか
わからないから。

コードというのは意図をわかりやすくするのが重要で、
コンピュータにとって問題ないからって省略した方がいいとは限らないんだよ。

コードを読むのは人間なんだから。

MS-Windowsじゃなくてもwindowってつかえるの？

>>582
innerHTML の本質は「上書き」であって「書き換え」ではない
書き換える必要のないDOMノードまで強制的に上書きするのがinnerHTMLの欠点であり、細心の注意を払う必要がある
http://jsfiddle.net/Pc87X/

上記URLは明確に干渉するコードだが、仮にコーディング時に function runInnerHtml が存在しなかったとしても innerHTML は使わないほうが良い
そうすれば将来的に #Test を参照するコードを書いても問題は発生しないからだ
後々の事も考慮して出来るだけDOMの書き換え対象を小さくする方が安全なコードとなる

> jQueryを使っていれば、これは問題にならない。（適切に処理してくれる。
jQuery は DOM 書き換えにおいて innerHTML 系の処理に頼っており、この手の最小限の書き換えは不得手とする分野だと思うのだが…
例えば、テキストノードの値だけ変更する操作は jQuery には出来ないと思う
もし、jQueryで解決する方法があるのなら是非伺いたい

jQueryって要素の操作は得意だけど
nodeの操作はあんまりだね

また頓珍漢な反論が出てきそうなので釘をさしておこう

jQuery の .text() は textContent の代替であってテキストノード値の書き換えではない
http://api.jquery.com/text/

あんまりっていうか全然じゃね

nodeTypeを数字で判定すると、
その数字が何だったのか後から見た時に分からないです
nodeTypeを定数として持ってるオブジェクトはないんですか？

>>607
Node.ATTRIBUTE_NODE とか、DOM Interface オブジェクトを利用しては？
なかったら自前で作る

ああ、というか Node 使わなくても全てのノードで参照できるな

IE8- をサポートするなら自前で作る必要があるか

>>603
初学者なりに見てみたんだけど確かに注意すべき問題だけど
addEventListenerが結果を保持するところとinnerHTMLが持ってくるところが違うから起きる現象に見える
// addEventListenerで追加しないで onClickで仕込むと>>603のいう問題な動作は起きないところからそう見た

上書きか書き換えか、とか、壊れる、とかいうと予想外の期待されない動作みたいなニュアンスがあるけど
実際は「まー当然こうなるよね」というふうな動作に見えるのだけど、そうではないのかな？

>>611
確かにイベントが解除される問題は <strong id="Test" onclick="changeBackgroundColor(event);"> で回避できる
しかし、その場合も #Test の要素ノードをクロージャでキャッシュしていた場合は参照が切れる
重要なのは参照が切れてしまう事であってイベントの問題が回避できれば解決するわけではない
(他にも参照を利用したコードはあるだろう)

同様の問題は textContent にもある
テキストノードをキャッシュしていたら textContent で上書きすれば参照が切れる
Text#data で値を書き換えれば、参照は切れないので問題は発生しない
テキストノードの間に要素を挟んでテキストノードを分割するなら新しいテキストノードを作成すべきだが、既存のテキストノードを流用できるなら流用した上で値の書き換えにとどめたほうが良い

> 実際は「まー当然こうなるよね」というふうな動作に見えるのだけど、そうではないのかな？
「当然の事象」を理解した上で問題点の少ないコードを模索するのが良いプログラマだと思う

>>603
> innerHTML の本質は「上書き」であって「書き換え」ではない
> 書き換える必要のないDOMノードまで強制的に上書きするのが

は？ 当たり前じゃん。 当たり前じゃん。

欠点でも何でもねーよ。

HTMLの中身を入れ替えるんだから変わるに決まってるじゃん。

びっくりした。あまりにも馬鹿すぎて。

当たり前の事を分かって無い奴がどんだけいるんだろうな

単なる$.html()でイベントが消える・・・というか
入れ替えるhtmlにイベント書いてないから当たり前なんだが、
それが嫌なら、$.clone()使えばいいだけ。

http://js.studio-kingdom.com/jquery/manipulation/clone

[withDataAndEvents] boolean値で、マッチしている要素に付随している
イベントハンドラもコピーするかどうかを決定します。 jQuery1.4からは保持しているdataも同様にコピーの対象になります。

(初期値はfalseでしたが、jQuery1.5でtrueになり、jQuery1.5.1で再度falseにもどされました。)
[deepWithDataAndEvents] boolean値で、マッチしている要素の全ての子要素に対しても、
付随しているイベントハンドラとDataをコピーするかどうかを決定します。 この初期値は1つ目の引数と同じになります。

>>612
onClickの話は別に解決策を提示したわけではないよ
それで、あらためて>>533をみてなるほどと思いかけたけど、となると
消えたように見えるリスナーはどこにいっちゃったのか、消滅したわけじゃなさそう

それと、innerHTMLとかinnerTextって書くの楽だし
jQueryをはじめいろんなところで使われまくってるから
使わないじゃなくて、問題点を理解して使っていくうえで賢いやり方とかあるかな？
今って参照を保持したり動的にイベント制御したりがどのくらい頻繁に出てくるのか知らないけど

> 「当然の事象」を理解した上で〜〜
いや、言葉の使い方の話

innerHTMLもhtmlも、「HTML文字列」から
新しいHTMLを生成するもので、イベントハンドラが
HTML文字列に書いてないから、イベントハンドラがないの当たり前だろ。

そういう風に動的に追加される要素にイベントハンドラを付けたいなら
個々に追加する（面倒な方法）か、親要素にイベントハンドラ設定するのが常識。
たとえば $(document).on('click', セレクタ, function() {・・・}) みたいに。

> 消えたように見えるリスナーはどこにいっちゃったのか、消滅したわけじゃなさそう
だから消滅するって。ガベージコレクションって書いただろ。
どこからも参照されなくなれば消える。

innerHTMLやjQueryのhtml()には欠点があるのではなく
注意点があるだけの話。いやはや馬鹿だった馬鹿だったｗ

>>615
そのまま使えばいいのになぜ clone() するんだよ
>>612を全く読んでないな

当たり前の事実を目にして、改善するか、何もしないか、の違いだな

やる必要がないことをやらないのは大事だ
やる必要をなくすことも大事だ

まる一日使って613でようやく飲み込むとか本当に馬鹿だな

>>602
別にwindowってWindows固有の用語じゃないしな…
例えばLinuxやUnixの世界にはX Window Systemってのがあるし

jsってgcあるんですね

>>621
理解した上でその判断なら君は本物の馬鹿だ

今年工業高校卒業予定なんですが愛知でインターンシップみたいなのって無いですか

>>621
参照を切らなければ、参照を保持している事を記憶する必要がない
やる必要をなくすことは大切だな

>>616
> 消えたように見えるリスナーはどこにいっちゃったのか
addEventListener に Listener は登録されているので消えているわけではないが、documentとの参照は切れる
もう一度、document にノードを appendChild すればイベントが発火するはず

> それと、innerHTMLとかinnerTextって書くの楽だし
innerText は IE の独自拡張で標準化されていない
使うなら textContent だ

> jQueryをはじめいろんなところで使われまくってるから
最も賢い方法は参照を切らない事だ
jQuery を使うなら olugin を書く必要がある
http://jsfiddle.net/Pc87X/1/

> 問題点を理解して使っていくうえで賢いやり方とかあるかな？
innerHTML を使うなら問題を回避できないので、以下に早く不具合を発見するか、が重要
いくつか考えられるが、今は時間がないので後で後述す

>>628
> addEventListener に Listener は登録されているので消えているわけではないが、documentとの参照は切れる
> もう一度、document にノードを appendChild すればイベントが発火するはず

ノードとそのノードのイベントハンドラが消えるタイミングを勘違いしてるよ。
まずイベントハンドラが消えるタイミングはノードが消えた時。

ここまではいいよね？

じゃあノードが消えるのはいつかというと、documentから消した時じゃない。
documentから消して、さらにJavaScripのどこからも参照がない時。

DOMからremoveChildしたりinnerHTMLで消して、かつ
JavaScriptのどこからも参照されなくなった時にイベントハンドラは削除される。

JavaScriptのどこからも参照がなくなった時だから、
これをJavaScript内で検知するのは不可能。


> innerHTML を使うなら問題を回避できないので、
だからなんの問題？

ということで、>>628をjQueryとhtml()メソッドを使って、
イベントが解除されないという証拠です。

http://jsfiddle.net/Pc87X/2/

テキスト以外の部分も書き換える可能性があるから
全く同じじゃないが、今の本題はhtml()でメソッドが
解除されるかどうかだから。

ついでにここにもコピペしとく

(function () {
　function changeBackgroundColor () {
　　this.style.backgroundColor = this.style.backgroundColor ? '' : 'orange';
　}

　function runInnerHtml () {
　　var str = $('body').html();
　　str = str.replace('テスト', 'JavaScript');
　　$('body').html(str);
　}

　$('#Test').on('click', changeBackgroundColor);
　$('#ClickMe').on('click', runInnerHtml);
}());

>>630はhtml()使ってもイベントハンドラが消えないという証拠として書いたもので
しかもなるべくオリジナルに近い形にしたので俺的には気に入らないコードだった。

普通に書いたらこうかな。ってことでついでにちゃんと書いたよ。

http://jsfiddle.net/Pc87X/4/

短いので、ここにもコピペしておく。

$(function () {
　$('#Test').on('click', function () {
　　this.style.backgroundColor = this.style.backgroundColor ? '' : 'orange';
　});

　$('#ClickMe').on('click', function () {
　　$('*').contents().filter(function() {
　　　return this.nodeType === 3;
　　}).each(function() {
　　　this.textContent = this.textContent.replace('テスト', 'JavaScript');
　　});
　});
});

あ、今気づいたが、getElementById('SampleText')で
対象を絞り込んでたのねｗ

まあ適当に補完しといてくれ。

いやー、悪い悪い >>630は自分で書いててて
なんで動くんだって思ったんだｗ
間違えてたな。うん。動かない。

訂正した奴はこっち。もちろんhtml()は使ってるから安心してな。
やってることは>>617で説明したとおり
http://jsfiddle.net/Pc87X/5/

(function () {
　function changeBackgroundColor () {
　　this.style.backgroundColor = this.style.backgroundColor ? '' : 'orange';
　}

　function runInnerHtml () {
　　var str = $('#SampleText').html();
　　str = str.replace('テスト', 'JavaScript');
　　$('#SampleText').html(str);
　}

　$(document).on('click', '#Test', changeBackgroundColor);
　$(document).on('click', '#ClickMe', runInnerHtml);
}());

>>633
html()でイベントが消えないのは分かったが
そのコードだと $('#SampleText')[0].innerHTML = str; でも動いちゃうけどな？

対象のノードの子にあたるノードに対して、スクリプト側で動的にイベントハンドラを設定したり参照を持ったりしていると
innerHTMLを使用したときに、子ノードに設定したイベントハンドラや持ってる参照が消えてしまいますよ
二行でええやん

>>635
っていうか、少し考えればわかることなんだが。

中身を入れ替えてるわけだから、当然新しいものになるわけで、
古い方に割り当てたイベントハンドラは、新しいものにはついてない。
これは別にinnerHTMLのバグでも問題でも何でもなく常識的な動き。

だから新しくイベントハンドラを割り当てるか、親要素にイベントハンドラを
割り当てるかすればいいだけ。

これはinnerHTMLを使うときは、これを見逃さないでねってだけで
innerHTMLを使っちゃいけない理由でもなんでもないよ。

っていうのは、最初っからみんな言ってる話なんだよ。
使っちゃいけない理由はないって。

>>634
何か問題あんの？ html()は内部でinnerHTMLを
使ってるんだからあたりまえだと思うが。

ボックスからスクロールバーのサイズを引いたwidthを取得したいのですが
どうやればいいでしょうか？

>>628
> documentから消して、さらにJavaScripのどこからも参照がない時。
この点では私とあなたで意見の相違はないと思うのだが…

>>633
バブリングで上位ノード監視の手法は知っているし、後述する予定だったが、参照が切れることに変わりはないはず
ようはイベントがはがれる事だけが問題ではないのだが
帰宅中なので詳細は後程

> 参照が切れることに変わりはないはず
参照が切れる切れるうざくね？
なんでそんなものに執着してるのか。

中身を新しいものに入れ替えてるんだから
別物になっただけだよ。全然難しい話じゃない。

そういう動きになるってだけでそれで問題ないなら、なにも問題ないだろ。
少し盲点になるかもねーってだけの話でしか無い。

古いものを無くしたいのなら（だからinnerHTML使ってるわけで）
むしろ消えてなくなった方がいい場合も多い。
たとえば、<select>要素の<option>をinnerHTMLで入れ替えるのに
ほとんどの場合なんの問題もねーよな？

あんたは、中身を少し書き換えることしか頭にないから参照参照とうざいけど
中身を完全に入れ替えて全く違うものにした時、前のデータが残っているほうが不自然だろ。

へんなやつと絡むから話がこじれるんだよ・・
分からなきゃ分からないでいい、で終わる話
何を言っても納得しないし意味ないよ

これ単なる初心者の質問でしかないから。
すごく丁寧に解説すると

【質問】
element.innerHTML = element.innerHTML.replace(テキスト修正);
って書いたら、element.innerHTMLの中に設定していた
イベントハンドラが動かなくなりました。どうしてですか？

【回答】
element.innerHTML の中身を新しいHTMLに入れ替えたのだから
当然中身は新しくHTML（DOM）になります。

たとえば
element.innerHTML の中に '<a href="hoge">link</a>'; があって
element.innerHTML ='<button>button</button>'; を実行したら
aが消えてなくなるのは当たり前だし、aに設定していたイベントハンドラ
などもなくなるのは当たり前です。

中身をちょっとだけ変えた、element.innerHTML ='<a href="hoge">link2</a>'; を
実行したとき、それを元のaと同じとみなすべきかはわかりません。
よってイベントハンドラを引き継ぐべきかどうかもわかりません。

代入したものは新しいHTMLなのですから、そこに書いているもの以外は初期状態です。

innerHTMLの中身を別物に入れ替えてるんだから
参照は切れるべきでしょ。むしろ残す方がおかしい。

常識を持ち出すならObject型が参照なのは常識
addEventListener 以外にも参照を保持するメソッドが定義されている事は十分に想像できるはずだがな
プリミディブ型のように文字列でゴリゴリ処理する方が不自然だって事が感覚としてわからないなら、その程度の実力って事なんだろうな

>>643
参照を切らなくて済むなら切らないほうが良いに決まってるでしょ

今日になっていきなり当然だろ当然だろ連呼しだしたやつも怪しいもんだな

innerHTMLを使わなければ参照が切れない状況ならinnerHTMLを使わないほうが良い
常識で考えればすぐ分かるはずだがな

むしろ逆に考えて
子ノードを持っているノードについて操作したい場面はどのくらいあるのか？
このとき子ノードに対して何かしているケースはどのくらいの割合か？

たいしたことしてない俺の経験上ではいずれもほとんど無かったがお前らどうよ

>>645
> 参照を切らなくて済むなら切らないほうが良いに決まってるでしょ
中身が別物になってるんだから、同じものを指すべきじゃない。

>>646
いや、やっとこの馬鹿が言ってる「問題」が判明したからだよ。

中身を違うものに入れ替えてるのに、前の情報を保持したい？
そんなアホなことを言ってるとは思わなかったよ。

>>647
> innerHTMLを使わなければ参照が切れない状況ならinnerHTMLを使わないほうが良い

考える順番がおかしい。

最初に考えるべきなのは、中身を新しいものに入れ替えたいのか、
中身は同じで、その属性を変えたいだけなのか。

これを最初に考えるべきでしょうが。
そしてやりたい事にあった命令を使うだけの話。

>>633
"この文章をクリックすると TEXT_NODE 値を置換する。" が大嘘すぎる
tagNameや属性値も置換対象に入ってる
TEXT_NODE のみを置換対象にすべき

>>637
html()はイベントとか切れないように色々工夫してるんだが？
問題点分かって無い奴はレスすんな

>>649
> 中身を違うものに入れ替えてるのに、前の情報を保持したい？
おまえのいう「中身」を違うものに入れ替える必要がない事は http://jsfiddle.net/Pc87X/1/ で証明されているわけだが、おまえの目は節穴なのか？

だらだら書いてるわりに実質ちょっと言い換えただけのありがたい説明文はいらねーよ

他の質問が流れるからモンスター質問者に関わるのも考え物

>>644
> プリミディブ型のように文字列でゴリゴリ処理する方が不自然だって事が感覚としてわからないなら、その程度の実力って事なんだろうな
これは文字列かどうかの問題じゃない。
innerHTMLに新しい文字列を代入するというのは、新しい文字列から生成したオブジェクトに入れ替えてるのと同じ。

obj = new Object;
obj.prop = 1;

obj = new Object;
console.log(obj.prop); // 1と表示されないじゃないか！

って言ってるのと同じ。

innerHTMLを新しいオブジェクトに入れ替えたのだから、その子オブジェクトも入れ替わる。
document.createElementを使った方法であっても、新しく作った要素に入れ替えたのなら、
古い要素のイベントハンドラは消える。


あと、HTMLを扱うときは、文字列で扱ったほうが速い。なぜなら単なる文字列は
メモリ内で終わる作業だから、重いDOMツリーの更新は必要ないし、
ブラウザの機能としてHTMLのパースは、もっともよく使う部分で、一番最適化されているから。

そういうこともわからない程度の実力かい？

>>653
innerHTMLは、中身を入れ替える命令。

中身を入れ替えたくないのなら、innerHTMLを使うのが馬鹿だし、
中身を入れ替えたいなら、innerHTMLを使うのが良い。

そんな使い分けもできないの？

君は、最初にやりたい事をはっきりさせてから、
プログラムしようね。目的に合わない命令を使って
わーわー騒ぐんじゃない。

>>652
> html()はイベントとか切れないように色々工夫してるんだが？

してません。

>>658
それは俺も思った
工夫しているのは .on() だよな

スレが質問こなさそうな状況だからいうが
質問と真っ当な回答を抜き出して検索性インデックス性をなんとか作り出してナレッジベース化したら役に立つだろうか

>>656
> あと、HTMLを扱うときは、文字列で扱ったほうが速い。なぜなら単なる文字列は
> メモリ内で終わる作業だから、重いDOMツリーの更新は必要ないし、
> ブラウザの機能としてHTMLのパースは、もっともよく使う部分で、一番最適化されているから。

そうなんだよね。俺も十数年ぐらい前は、たとえばテーブルを作るのに、
tableをcreateElementして、trをcreateElementして、tdをcreateElementして
appendChildを繰り返して・・・ってDOM操作で何行もかけて作っていた
時もあったけど、今は遅いし面倒なだけなので文字列で生成している。

innerHTML = '<table><tr><th>header</th><td>data</td></tr></table>';

これをDOM操作で作っても重いし面倒なだけ。何一つメリットがない。

さらに言えば、文字列の連結も一が多くなると見難くなるから、
少し複雑なのはlodashのtemplate機能を使ってるよ。

>>658-659
両方している

html()がやってるのは、中身を入れ替えた時に消える古いオブジェクトに対して
ブラウザの不具合によるメモリリークな問題に対応する処理で、
イベントハンドラは普通に切れる。

>>657
> 中身を入れ替えたくないのなら、innerHTMLを使うのが馬鹿だし、
>>649で「中身が別物になってるんだから、同じものを指すべきじゃない。」と発言しているのはなぜ？
別物にする必要がないでしょ？

参照が切れると動かない事例として jQuery.data() がある

参照が切れないコードなら問題はない
http://jsfiddle.net/Pc87X/7/
jQuery の .html() を使用すると参照が切れて、jQuery.data() が期待通りに動作しなくなる
http://jsfiddle.net/Pc87X/9/

>>612で説明したノードのキャッシュも原理的には同じ問題だ

>>633
少なくとも、http://jsfiddle.net/Pc87X/1/ や http://jsfiddle.net/Pc87X/7/ では参照を切る必要がなかった
>>649の言葉を借りるなら「中身を入れ替える必要がない」というのだろうか
だから、この場合は「innerHTML や .html() を使うべきではない」といえる

>>664
まあ大抵はIDに対してイベントハンドラ付加したりしてるから、直感的にはそう思っても仕方ない
けどイベントハンドラの設定も参照の作成もIDが必須になっているわけではない
なので内部構造としてノード・ツリー構造があるわけで、IDは表面上の操作と内部の位置とを橋渡ししているに過ぎない

こういう状況の中で、.innerHTMLで要素の中身を入れ替えたり操作したりするとき、
入れ替える前と後で、中身が持っている子要素が同じであるかどうかを保証するわけにはいかない
だからイベントハンドラは消失するし参照も切れる、それが当然の動作になってしまう
（付加したイベントハンドラは理論上すぐ消えるはずだけど、個人的になぜかそうとは限らないように思う）


…と、自分はこういうふうに理解してるけど、間違いあるかな

>>664
> 別物にする必要がないでしょ？

なんで決め付けるの？

別物にしたいときは、別物。そうでない時は、そうでない。
別物にしたいときは、イベントが残っていたら大問題。

html()、innerHTMLを使うかどうかは、
どっちが目的かで変わるわけで、
なんで最初の目的を限定してから使えないって話するの？
意味がわからない。

>>655
> jQuery の .html() を使用すると参照が切れて、jQuery.data() が期待通りに動作しなくなる

だからさ、それは「問題」じゃないんだって、

html()の仕様として、要素を丸ごと入れ替えるものだから
data()は消えるのが仕様として正しい。

なんで、目的にあってないものを使ってるくせに
それが問題だっていうのさ。馬鹿じゃん？

蛇足だが、http://jsfiddle.net/Pc87X/5/ はテキストノード値の置換ではない(>>651の指摘通り)
私が http://jsfiddle.net/Pc87X/ で挙げた悪例をそのまま流用していると思われるが、良い実装ではないので http://jsfiddle.net/Pc87X/9/ では正規表現でテキストノード部分を置換するようにしている
そもそも、innerHTML はテキストノード値の置換に向いていないし、他のAPIを使うべきとは思うのだが、jQuery には適切なAPIが存在しないな

>>668
> なんで、目的にあってないものを使ってるくせにそれが問題だっていうのさ。
>>633が問題ないと主張するから反論しているだけなのだが…
文句は>>633にいってくれ

innerHTMLは要素オブジェクトをまるごと入れ替えるという
仕様なのだから、その要素に結びついたデータは消えるのが正しい動き。
それは正しいまともな仕様なので、バグではない。

>>670

>>633は問題ないでしょ？

あんた、dataも一緒でなければならないという
条件を最初に提示したかい？

innerHTMLやjQueryのhtml()もそれ自体に問題があるわけではなく、
要素を入れ替えるという仕様なんだからそれに付随するデータも消える。

この仕様で問題があるかどうかは要件によって変わるので、
一概に問題があると決め付けることは出来ない。
いい加減に理解しようぜ。

$obj.innerHTML += 'test';
とかしたとき、イベントハンドラが失効したり参照が切れたりするのは
JavaScriptのコード打っていると面倒に思うことがあるのは確かだろうけど

仕様作る側やブラウザの実装やる側に立って考えると
これを失効しないように参照が切れないように作るのってすごく大変そう

> 参照が切れる切れるうざくね？
> なんでそんなものに執着してるのか。
これが発端だろ
参照が切れる問題点が全く分かっていない奴に説明してるだけだろ

>>674
大変じゃなくて不可能

innerHTMLはHTMLを代入する命令なのだから
HTMLとして表現できるもの以外には対応できない。

そういう仕様。

>>671
バグとは誰も言ってない
仕様なのは皆分かってる

>>675
だから参照が切れるのは問題点じゃないんだって言ってるだろ。
第一、参照が切れてるんじゃない。

全く別のオブジェクトに入れ替えてるんだから、
そもそも参照が最初っから存在しないんだよ。

>>677
”正しい”仕様な。

どうも正しい仕様なのに、
それが問題であるかのように
言ってる奴がいる。

> 全く別のオブジェクトに入れ替えてるんだから、
> そもそも参照が最初っから存在しないんだよ。
これは酷い

innerHTMLは、新しいHTMLオブジェクトに入れ替えたい時に
使うもので、新しいHTMLオブジェクトに入れ替えるのだから
イベントハンドラもdataも初期化された状態になってほしいね。

>>679
じゃあ、eval 使えば？

>>680
？
ひどくないんだが？

element.innerHTML に代入するということは、
新しい要素オブジェクトをcreateElementして、
elementの子供を新しい要素に入れ替えることと
全く同じだよ。

擬似命令で書くなれば
element.innerHTMLObject = document.createElement('a');
みたいなもの。

document.createElement('a')した結果に
イベントハンドラがついているかい？
最初っからついてないだろ。

innerHTMLが内部で、文字列から新しい要素オブジェクト郡を作成して
それに入れ替えてるだけってのが、わかってない。

>>679
正しさの判断基準はどこにあるんだよ
逆に「間違った仕様」があるのか？

'a' が顔文字にみえる

>>684
正しい仕様っていうのは、

innerHTMLを取得した時にそれはHTML表現を取得するものであって
DOM要素をシリアライズしたものではないということ

つまりHTMLで表現でされているものだけが取得され
HTMLでない情報は存在しない。

だって、その名の通り inner "HTML" なのだから。

そこにHTMLで定義してない情報まで
シリアライズされるべきだと思ってるのが「間違った仕様」

>>638
Element.clientWidth,
Element.clientHeight
かな

>>687
ありがとうございました

それは正しい仕様ではなくただの「仕様」、間違った仕様ではなく「間違った認識」である

>>683
長文書いてるところすまんけど
> そもそも参照が最初っから存在しないんだよ。
こんなこと書いてるから「お前参照とか使ったことないだろ」って突っ込まれたんじゃないのかい
参照を作る→参照先が消滅（＆別の新しい要素が生まれる）→作った参照が失われる
この流れを話してるのに「参照が最初っから存在しない」は無いわ、と

意地になってるだけの奴に何言っても無駄だろ

GCの原理が理解出来てないんだろうなあ

text-overflow: ellipsis;
で省略されているかされていないかを判定するにはどうしたらいいでしょうか？
出来ないなら、自前で同じことをするしかないと思いますが・・

>>689
innerHTMLに代入する値はただの文字列で、
代入した後に内部で処理されるまで
オブジェクトの参照は存在しませんが？

元々の参照とは全くの別なんだ？
それをわかっていて代入してるんだが？
innderHTMLに代入するということは
別のオブジェクトを作ろうとしてるんだよ。

イベントハンドラとかdataとかリセットされるべきじゃないか。

ほんと何言っても無駄だな

>>692

> 出来ないなら、自前で同じことをするしかない
なんで？

>>616
遅くなってすまなかった

> 問題点を理解して使っていくうえで賢いやり方とかあるかな？
最も確実なのは「全てのノードを置換しなければ実現できない状況でのみ innerHTML を使う」になる
http://jsfiddle.net/Pc87X/1/ や http://jsfiddle.net/Pc87X/7/ のようにノードを置換しなくて良いケースでは innerHTML は使わない、ということだ
これなら innerHTML を使わなくても全てのノードを置換しなければいけないのだから問題はない

addEventListener の参照エラーのみに対応するならバブルするイベントは document で定義し、バブルしないイベントは useCapture を利用して document で定義すれば回避できる
ちなみに、jQueryでは useCaptuer を使えないのでバブルしないイベントには対応できない
また、http://jsfiddle.net/Pc87X/9/ のように jQuery.data() に対応できない等、完全な対策にはなっていない

---
ただし、「innerHTML が楽だ」という人は大抵、「ノードを置換しなくて良いケース」や「部分的な置換でよいケース」でもらくだからという理由で全体を置換しようとすることが多い
正直、お勧めはしないが、その場合は下記対策が考えられる

1. チームで参照を保持しているノード情報を共有する
2. 参照が切れてはいけないノードでinnerHTMLを使用した際に例外を投げる仕組みを作る(問題の早期発見)

1. はまあ、当然だな
2. は例えば、下記URLのようにする
http://jsfiddle.net/Pc87X/10/
欠点としては要素ノードの参照にしか対応できていない事か
また、addEventListener のように参照を保持するタイプのメソッドは全てユーザ定義関数でwrapする必要があるので少し手間はかかる

---
ところで、jQuery.data() のように全DOMノードにオブジェクトを格納できる DOM 仕様があって廃案になったと記憶しているのだが、該当仕様をどうしても思い出せない
どなたかご存知の方がいたら教えて頂けないだろうか？

廃案後、代替仕様が出来たかも気になっている
全ノードに js-refered フラグを付けられれば、http://jsfiddle.net/Pc87X/10/ でテキストノードの参照エラーにも対応できるのだが…

>>695
出来ないからじゃん
何言ってんの？

そもそも「省略されているかされていないかを判定する」必要性がわからん

勝手に分からなけりゃいいだろ
馬鹿じゃねえの

探していたのは DOM Level 3 の Node#setUserData だった
http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-setUserData
MDN では Element#dataset か WeakMap で代替することを推奨していた
https://developer.mozilla.org/ja/docs/Web/API/Node.setUserData

> ところで、jQuery.data() のように全DOMノードにオブジェクトを格納できる DOM 仕様
jQuery.data() は要素ノード限定なので Node#setUserData の代替にはならない事に気づいた

>>692
スクロールバーがあるなら scrollWidth と clientWitdh を比較してみては？
スクロールバーがないなら、Range オブジェクトで判定できる可能性がある
https://developer.mozilla.org/ja/docs/Web/API/document.createRange

>>696
ありがとう、むしろ手間をかけさせて申し訳ない
> 全ノードに js-refered フラグを付けられれば
まさにこういう類のことを考えてたんだけど
やっぱり地道な対応しかないか…

>>701
なるほどrangeですか・・
たしかになんとかなるかもしれません
ありがとうございました

まだやってんの？ いま来た人用にわかりやすい例え思いついたわｗ

innerHTMLには根本的な問題がある
代入演算子=には根本的な問題がある

innerHTMLに代入したら古い値が消えることだ
代入演算子=で代入したら古い値が消えることだ

前の値を残しておきたいときはDOM操作をしなければならない
前の値を残しておきたいときは足し算をしなければいけない

だからinnerHTMLを使ってはならない
だから代入演算子を使ってはならない


★普通の人が考えること

前の値が要らない時はinnerHTMLでいいんじゃねーの？
前の値が要らない時は代入演算子でいいんじゃねーの？

そもそも前の値を捨てて新しい値を入れる時にinnerHTMLを使うんじゃねーの？
そもそも前の値を捨てて新しい値を入れる時に代入演算子を使うんじゃねーの？

>>696
> ただし、「innerHTML が楽だ」という人は大抵、「ノードを置換しなくて良いケース」や
> 「部分的な置換でよいケース」でもらくだからという理由で全体を置換しようとすることが多い

その前提がおかしいんだろ。
なんで置換ありきなんだ？

innerHTMLを使う時に一番多いのは、文字列で新しくHTMLを
生成するときだろ。置換なんかしねぇよ。

タブレットでスクロール可能なエリアでスワイプすると、横スクロールするだけでスワイプの動作が取得できません。
どのようなコードを記載すべきでしょうか。下記のようなコードを記載しました。
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#scrollswipe').bind('swipe', function(){
alert("swipe");
});
});
</script>

</head>
<body>
<div id="scrollswipe" style="width:200px; height:200px; overflow:scroll;">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
<h1>cccccccccccccccccccccccccccccccccccccccccccc</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</body>
</html>

>>706
これ使ってる。自力実装は死ぬと思うよ。

http://cubiq.org/iscroll-5

もしくは、jQuery Mobileだね。
俺が試したリリース初期頃は端末が遅いのと
ライブラリが重いので使うのやめたけど。

ってjQuery Mobile使ってるのかｗ
すまんすまん。

>>702
状況によっては Element.prototype.insertAdjacentHTML を使う事が解決法になるかもしれない
新しいノードを挿入する分には参照の問題はないので設計を工夫すれば何とかなる場面はあると思う
http://domparsing.spec.whatwg.org/#insertadjacenthtml%28%29
(ノード生成にしか使わない人には innerHTML ではなく、insertAdjacentHTML を推奨しておく)

>>630
これは innerHTML の最も酷いパターンだな
$('body').html(str); には驚いた

>>633も使わなくていい場面でinnerHTMLを使ってるので五十歩百歩
ノードを置換しなくてもいいのにinnerHTMLを使ってる時点で使い方がなってない

innerHTML使って無いジャン

1 delete objA;
2 new objB;

結局、innerHTMLは、古いオブジェクトを削除して、
新しいオブジェクトを作っただけかね？

xmlHttpRequestでphpを指定した時そのphpはどこで実行されるんですか？
サーバー側かクライアント側にphpごと来るのか

>>712
.html() は内部的に innerHTML を利用しているから innerHTML を使用しているのと同義

>>714
http://itpro.nikkeibp.co.jp/article/COLUMN/20060215/229453/

>>713
innerHTML はシリアライズも行う
また、後付で標準化されたので仕様が曖昧で実装依存な処理もそれなりにある
http://domparsing.spec.whatwg.org/#innerhtml
http://msdn.microsoft.com/en-us/library/ie/ms533897.aspx

>>714
サーバに決まってるじゃん
phpってのはサーバで実行されてHTMLやXMLを出力するもので
サーバの外に出てくることはない

>>692
この件ですが、コンテナdivのscrollWidthには省略される前の数値が入るので
これで判定できると分かりました
ありがとうございました

>>717
シリアライズが何を言っているのかわからないが、
innerHTMLはDOMオブジェクトをシリアライズするのではない。

HTML要素とDOMオブジェクトの違いがわかってない人が多いんだよな。
これ理解するのに、jQueryのdata()メソッドの挙動を勉強するのがいい。

たとえばこんなHTMLがあるとする。
<span id="id" data-value="123">test</span>

これを $('#id').data('value') で参照すると123が返ってくる。
そのあと $('#id').data('value', 456) を実行し、参照したら456が返ってくる。
当たり前の動作に見えるが、ここで$('#id').attr('data-value')を参照すると、返ってくるのは123。

つまり、dataはDOMオブジェクトの値をかえるが、HTML要素は書き換えないということ。
DOMオブジェクトの状態とHTMLは全くの別もの。DOMオブジェクトをシリアライズしたものがHTMLなのではない。

HTML要素を書き換えるとDOMオブジェクトに反映されるが、DOMオブジェクトを書き換えても
HTML要素には反映されない。それがDOMオブジェクトに割り当てるイベントハンドラなど。

jQueryのattr()メソッド（DOMでいえばsetAttribute)は "HTML要素を書き換える" メソッド
on（DOMで言えばaddEventListener）はDOMオブジェクトにイベントハンドラを設定するメソッド

それぞれのメソッドで、影響をあたえるものが、HTML要素だったり、DOMオブジェクトだったりする。
innerHTMLが行うのは、HTML要素の取得と設定で、DOMオブジェクト操作用ではない。

>>720
JQueryのdataはDOMと関係無く値を収納してるんだが？
お前が一番違い分かって無いだろ…何長々と馬鹿な事言ってるんだ

そもそも例えに何の前提もなく$(id)を使うのは

>>721
えらいえらい。よく気づいたね。

じゃあ、DOMの話だけでするならば、
フォームのvalueが全く同じ挙動をする。

ページが表示されてからinputの内容を入力した時、
valueプロパティ、つまりDOMオブジェクトの値は最新の値だが、
value属性はページが表示された時のまま。

DOMオブジェクトの内容と、属性は関係してそうで関係していない。
jQueryのdataはこの動作を参考にして作られていると考えれば良い。

実装依存は困るよな…
っていうかHTMLもCSSもJavaScriptも全ブラウザ全部仕様通り全部動作完全に一緒だったらと思うと

>>724
それはネットスケープが悪いんだよ。JavaScriptを初めて搭載したブラウザ。
標準化しないで勝手に言語を作った。

まずいきなり実装しないで、標準団体を設立して標準化するべきだった。

>>725
今更何を…
むしろマイクロソフトに言うべきだろ

msは話しにならん