JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。

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

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

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

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

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

■関連スレ
ECMAScript デス 4
http://toro.2ch.net/test/read.cgi/tech/1325448978/
【jQuery】JavaScript ライブラリ総合質問所 vol.2
http://toro.2ch.net/test/read.cgi/hp/1350728831/
WSH(・∀・)ｽﾚｯﾄﾞ! Part 4
http://toro.2ch.net/test/read.cgi/tech/1243095768/ →消失中 (5も過去ログ倉庫)
【WHATWG】HTML5 Part4【W3C HTML WG】
http://toro.2ch.net/test/read.cgi/hp/1329529892/
Webサイト制作初心者用質問スレ part232
http://toro.2ch.net/test/read.cgi/hp/1357950586/
CSS初心者スレッド＝12th＝
http://toro.2ch.net/test/read.cgi/hp/1343429848/
Canvasについて語ろう
http://toro.2ch.net/test/read.cgi/hp/1305093769/

■主要FAQ (全部はhttp://fiddle.jshell.net/vSqKr/33/show/ )
Q1. 別窓・フレーム内容やローカルファイルを読み書きしたいのですが…
A1. 別サーバのページやファイルの内容はセキュリティ制約でアクセス不可です。
Q2. document.write()でページ内容を追加したいのですが…
A2. 一度表示完了後にwriteするとページ内容が消去されます。DOM等別手段を。
Q3. table内容のinnerHTMLやDOMでの変更がうまく行かないのですが…
A3. IEではtable/tbody/trのinnerHTML書き換え不可です。DOMを使いますが、
　　DOMの場合tableの直下にはtbody要素が(作らなくても)あることに注意。
Q4. フォーム部品名を変数にした「...myform.変数名.value」が動きません…
A4. 「document.forms.myform.elements[変数名].value」でどぞ。
　 JavaScriptでは一般に「obj.x」と「obj['x']」は同じ意味です。
　 グローバル変数はwindowのプロパティなので「x」と「window['x']」も。
Q5. CSSで設定した背景色がe.style.backgroundColorで取得できないのですが…
A5. 取得には document.defaultView.getComputedStyle() を使う必要あり。
　　IEでは要素オブジェクトのプロパティcurrentStyleを使う。
Q6. setAttribute("class","foo")、setAttribute("onclick","bar()")が動きません…
A6. IEではそれは不可。「obj.className="foo"」「obj.onclick=bar」でどぞ。
Q7. タイマーやイベントハンドラに設定するコードにthisを含めたいのですが
　　「"...this..."」とか「function(){...this...}」ではうまく行きません。
A7. 実行時にthisが別のものを指してしまってる。以下のようにthisを束縛保存。
　　「function(x){return function(){...x...};}(this)」
Q8. input type="file"の値を設定(参照)できないのですが…
A8. セキュリティ制約のため設定は絶対に不可。参照はブラウザにより不可。
Q9. getElementById('ID名')や$('ID名')で要素が取れないのですが…
A9. コード実行時点でHTMLがそこまで読まれてない。window.onload 中でやるとか。

■各種仕様 (http://fiddle.jshell.net/vSqKr/33/show/#Link も参照 )
◆ Standard ECMA-262
http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm （本家PDF版アーカイブ）
http://es5.github.com/ （ECMAScript 5.1 有志HTML版）
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ （ECMAScript 3 和訳）
◆ ECMAScript compatibility table
http://kangax.github.com/es5-compat-table/ （ECMAScript 5）
http://kangax.github.com/es5-compat-table/es6/ （ECMAScript 6）
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://dom.spec.whatwg.org/ （DOM Standard (DOM4)）
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html （DOM Standard 和訳）
http://www.w3.org/TR/DOM-Level-3-Events/ （DOM3 Events）
http://www.w3.org/TR/cssom/ （CSSOM）
http://www.w3.org/TR/cssom-view/ （CSSOM View Module）
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://xhr.spec.whatwg.org/ （XMLHttpRquest）
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html （XMLHttpRequest 和訳）
http://www.whatwg.org/specs/ （WHATWGの仕様一覧）
◆ MDN (Netscape/Mozilla)
http://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)

>>2の■テンプレ案の最新
http://jsfiddle.net/fH4cC/17/show/

あれーまた違ってましたか。なんで見落としてしまうのかなー。すみません。

http://developer.mozilla.org/en-US/docs/DOM/element.addEventListener
これみたら一つ上のカテゴリーが


MDN>Document Object Model (DOM)
ってなってて
それがhttps://developer.mozilla.org/en-US/docs/DOM
なんだけど
実際にここからどう辿っていったらaddEventListenerのページまでたどり着けるんですか？

>>7
http://developer.mozilla.org/en-US/docs/DOM
(view all...をクリック)
http://developer.mozilla.org/en-US/docs/tag/DOM
(3をクリック)
http://developer.mozilla.org/en-US/docs/tag/DOM?page=3
(element.addEventListenerをクリック)
http://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

すいませんHTMLも含めてコピペして動くものをおねがいできませんか
codepadとかideoneとかどっか別サイトにはってもらっていいので

載せてみましたけど上手くいかないです

http://codepad.org/QPimE1DO

全部直せとかいうのは断る。遅れて動くということは一番最近に
取得した位置まで「徐々に」近づいて行く動作をするための
setIntervalで定期的に動作するコードが必要だと思うけどいかが。

window.onload = function() {
//var velocity = 0.3;

cnvs = document.getElementById("canvas1");

cnvs.style.position = "absolute";
cnvs.style.top = 0 + "px";
cnvs.style.left = 0 + "px";

document.body.onmousemove = function (event) {

var mX = event.clientX;
var mY = event.clientY;
var cnvs;
if(!cnvs){
cnvs = document.getElementById("canvas1");
}
var cnvsX = cnvs.style.left;
var cnvsY = cnvs.style.top;

cnvsX = cnvsX.replace("px",'');
cnvsY = cnvsY.replace("px",'');

cnvs.style.position = "absolute";

var dX = mX - cnvsX;
var dY = mY - cnvsX;

cnvs.style.left = dX + "px";
cnvs.style.top = dY + "px";
}
}

それっぽく動いたけど、あとは座標の調節と＋-の操作うまいことやっちくりー

スレの始まりでは前スレ終わったかどうか見てから書き込んでよ

>>7
http://developer.mozilla.org/en-US/docs/DOM
（「Gecko DOM Reference」）
↓
http://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference
（「DOM element Reference」→「Methods」）
↓
http://developer.mozilla.org/en-US/docs/DOM/element#Methods
（「addEventListener」）

ローカルルールのリンク先更新の人が最近迅速なので、次からは前スレ
がほぼ埋まってからリンク先更新を依頼するようにしませう。

wikiつくってよ

言いだしっぺの法則

wikiとかいらんから日本語stackoverflow作ってよ

無料サイトでよければＱ＆Ａサイトつくれますよ

そういや、このjsの質問スレの抜粋した内容のwebサイト
作るって言ってた人がいた気がしたがどうなったっけ？

先生達　この問題を解決してください

もう先生たちの力しかたよれません。

ちなみに教えてgooに質問してますので問題の内容は教えての方をみてください

http://oshiete.goo.ne.jp/qa/7916158.html

>>22
そんな人いた？

>>20
http://qa.atmarkit.co.jp/
日本語版 stackoverflow
あまり流行ってはない感じ。

質問。jQueryでイベントを貼ったDOMのキャッシュをjsで持って使いまわしたい。
しかし一度bodyから剥す(jQuery#empty)とイベントが発火しなくなる。

DOMを作ってイベントを貼る
var $el = $("<div>").html("<div>click me</div>");
$el.on('click', function(){console.log('clicked')});

DOMに貼り付けるとclickイベントはちゃんと動く
$(body).append($el);//=> クリックしてclicked

DOMに再度貼り付けるとclickイベントが消えている
$(body).empty();//DOMの中身を消す
$(body).append($el);//クリックしてもイベントが発火しない

環境はChrome Mac / jQuery1.9
jQueryで作ったDOMはそのままキャッシュしていると思うんだけど、違うんでしょうか
$el[0].onclick = function(){…}と定義すれば動くけど、それは<div onclick=… に書き換えてるからやりたいことと違う

onとかliveとかの話？

$.emptyの前に$el.detach();で消す

>>28
あざっす！動きました。
removeやemptyはイベントハンドラも削除してたんですね
$(body).html('')でも消えてたんで焦ってたんですが
ドキュメントよく読めば書いてあるしもうちょっと調べればよかったです…

>>>13 >>>14
ありがとうございます。
やっぱりif文チェックとかsetIntervalが必要そうですね。
べったりくっ付くマウスストーカーは楽勝なんですけど
早くクオリティ上げるよう勉強します

オレはjavascript、html5、jQueryのサンプル公開してるwebサイト
をいくつか持ってるが、このスレの内容は一部改変して使ってる。
ほかに、プログラム本のソースコードとか他人が公開したコード
を一部改造して使ってる。ネットでプログラムのネタは山のようにあるな。

何かのコピペ？

>>31
品質が低そうだし、いつか著作権違反で訴えらそうだね。

す、すいません＞＜
Firefoxのアドオンsearchwpが原因だったようです！
IEにしたら短いサンプルソースが表示されました・・・・。
面目ない！

許しましょう！

>>33
広く浅く一般的なことしか載せてないから訴訟はされないだろ。
たいしてアクセス数ないし

>>38
イベントオブジェクトだぜ。
p以外の名前でもいい。
pはeventとかevtとかの名前になってるサンプルコードが多いな

>>37
バレる可能性が低ければ何をやってもいいと考える小悪党ですか。

そういえばV8って実は日本語(というかUTF8)の変数通すから

(function(ちくわ大明神){
console.log(ちくわ大明神);
})('馬鹿めヤツは死んだわ');

とかもコンパイル通るんだよな

>>40
プログラムの解説してるwebサイトとかサンプル公開してる
webサイトって似てるのばっかやんっと言ってみる

一部例外除いて、プログラミング言語としてJSしか覚えてない人のJSは質が低い
俺が他人にJS教えるときは、ネットに落ちてるコード(とくにAJAX以前)は参考にするなと言っている

John Resig(jQuery), Jeremy Ashkenas(Backbone) あたりがモダンなJS書く印象
日本だとカヤック、サイボウズ、モジラ系の連中の一部がレベル高い感じ

質の高いコードを書くことなんかより、
風呂場を清潔に保つことの方が難しいけどな。

>>43
jQueryは参考にさせたくないコードの筆頭だと思うけどなー

ライブラリのコードはショートコーディングが多かったり、
minify後に小さくなるようなテクニックを使ってたりするから、
一般のスクリプトを書く際の参考にはあんまりならなさそう

http://d.hatena.ne.jp/uupaa/20100730/1280502000
http://nanto.asablo.jp/blog/2013/01/28/6703606

jQueryは目的上どうしてもメタプロ気味なリフレクション黒魔術しないといけないからなぁ
ライブラリの基礎部分はメタプロしてもいいけど、表にそれがはみ出るやつはダサい

>>42
赤信号もみんなで渡れば怖くない、と考える小(ry

>>47
もう少しわかりやすく

>>49
白鳥が水面下で足をバタバタさせるのはいいけど
水面に波を立ててはいけない