JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

■規則/推奨ルール
質問者は !slip:vvvvv を名前欄に、その後は「レス番」＋!slip:vvvvv
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　http://jsdo.it/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです

■前スレ
+ JavaScript の質問用スレッド vol.141 +
http://mevius.5ch.net/test/read.cgi/hp/1562318008/

■各種仕様 (続き)
◆ 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)
http://developer.mozilla.org/ja/docs
◆ MSDN Library
http://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API)
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)
◆ JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html

■テンプレ案
http://fiddle.jshell.net/fH4cC/180/show/light/

■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/

■参考URL
ダウンロード、CDN
http://jquery.com/download/
ブラウザサポート
http://jquery.com/browser-support/
jQuery UI
http://jqueryui.com/
jQuery UI ダウンロ－ド
http://jqueryui.com/download/
リファレンス等
http://alphasis.info/
http://www.jquerystudy.info/
http://js.studio-kingdom.com/
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
http://qiita.com/fmy/items/345a264a1cf2e2a73f62

■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為にhttp://jsperf.com/ （githubのアカウントが必要です）にコードをUPしてブラウザ毎に速度計測する事を推奨します。

例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証（要出典）されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。

■各種仕様
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/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 和訳)

■JavaScript主要ライブラリ・フレームワーク

jQuery
http://jquery.com/
jQuery UI
http://jqueryui.com/
jQuery Mobile
http://jquerymobile.com/
Lo-Dash
http://lodash.com/
Backbone.js
http://backbonejs.org/
Underscore.js
http://underscorejs.org/
AngularJS
http://angularjs.org/
Knockoutjs
http://knockoutjs.com/
RequireJS
http://requirejs.org/
D3.js
http://d3js.org/
threejs
http://threejs.org/

Q. jQueryはどのバージョンを使えばいいのですか？
A. IE9以上であれば、jQuery 3.0を使用してください。
IE8以下にも対応するならば、jQuery 1.12を使用してください。

補足

jQuery 1.9 までは一系統しかなく、古いブラウザも含めて全て対応していました。
その後、古いブラウザを切り捨てるためにバージョンを分岐させました。
古いブラウザにも対応した1系（1.10、1.11、12）と
古いブラウザを切り捨てた2系（2.0, 2.1, 2.2）です。

1系と2系は対応ブラウザの違いだけで機能は全く一緒です。
機能が同じなのにメジャーバージョンが違っているのが分かりにくい
ということでバージョン番号の付け方を変えることになり、
新たに古いブラウザを切り捨てたjQuery 3.0、そして古いブラウザにも対応した
jQuery Compat 3.0がリリースされる予定でした。

しかしマイクロソフトが古いIEのサポートポリシーを変更し
サポート中であるOSで動く、最新のIEしかサポートしなくなったために、
2016年1月でVista上のIE8のサポートが終了しました。

そのため予定されていたjQuery Compat 3.0がなくなり、
jQueryは3.0に一本化されました。

■JavaScript主要ライブラリ・フレームワーク 利用率
http://w3techs.com/technologies/overview/javascript_library/all

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

■各種仕様
◆ Standard ECMA-262
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 2015, いわゆる ES6)
http://www.ecma-international.org/ecma-262/9.0/ (ECMAScript 2018)
http://tc39.es/ecma262/ (ECMA-262 最新ドラフト)
◆ 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 和訳)

削るべきか要審議
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)

おつ

>>11
http://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Events

なんでatomにはろくなアドオンがないのですか？

ゲーム作成は基本のテトリスがいいですか

>>14
ちんぽを出せ
そしてこの板にUPしろ
それがjsニンジャになる一番の近道だ

performance.mark(name)ってnameに同じ名前を入れてもいいらしいけど、それって
どういう風に使うものなのかな？
時間を測定するのにmeasure()を使うなら区別できる名前にしておかないとならないし。

measureを使うならそうかも知れないが
同じ場所で呼ばれたのに毎回違う名前付けるほうがおかしいだろ

逆で、違う場所で同じ名前を使えるのがなんでかなと。

http://developer.mozilla.org/ja/docs/Web/API/Performance/getEntries
ここにそういう例があるんだけどcheck_PerformanceEntryの中身がなくてよくわからない。
measure()しないとdurationは入ってこないと思うんだけど、どうやっているんだか。

なんで違う場所で同じ名前を使えなくする必要があるんだ？
プログラミング言語を何だと思ってるんだ？

>なんで違う場所で同じ名前を使えなくする必要があるんだ？

どこをどう読んだらそんな解釈になるんだか。

違う場所で同じ名前を使えなくする必要性を感じてないのに
違う場所で同じ名前を使えることに疑問を抱くわけ無いだろ

それともおかしいとも思わない森羅万象に対して一々疑問に思って人に聞く迷惑な奴なのか？

「使えなくする必要性」なんてどこから出てきたんだか。
measure()を使うなら各mark(name)のnameを変えなきゃならんってだけだよ。

こういう１０文字分くらいしかワーキングメモリ持ってない奴と話し合いをすることは不可能

durationなんて自分で計算すればいいじゃん

とても話し合いしようとしていたようには見えんが？

タッチイベントをタッチした瞬間出来るだけ素早く反応させるのはどのような方法をとればいいのでしょうか？
音楽関係のアプリのためラグをなくしたいのですがどうも少し反応が遅れます
少し調べた結果ダブルタップの判定のための遅れ？なのかも？とは思いますが
他にも何かありましたらお願いいたします

HTML
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<audio id = "bass_drum_sound" src="sound/bassdrum/Kick10.wav" preload="auto"></audio>
<div id = "bass_drum"">
<p>バスドラム</p>
</div>

CSS
#bass_drum{
position: absolute;
top: 55%;
left: 30%;
height: 35%;
width: 35%;
text-align: center;
background: rgb(212, 212, 212);
border-radius: 50%;
border: solid black;
}

javascript
var touchPannel = document.getElementById("bass_drum");
function touch(){
bass_drum_sound.currentTime = 0;
document.getElementById("bass_drum_sound").play() ;
}
touchPannel.addEventListener("touchstart",touch);

touchstartイベントが何度も起きてそのたびにcurrentTimeが再設定されてる可能性
そもそもKick10.wavの音の最初に無音期間がある可能性

>>27
currentTimeは連打に対応するためにつけてます
一番早そう？だけどどうなんだろ？
無音時間は無いはずですが一番大きい音からスタートとかは調整できるかも？
でも音質考えるとなあ
音ゲーとかどうしてるんだろ？

とにかくタップと再生のどっちで問題起きてるかが分かりにくいので
タップで別の反応（何かの色変えたり文字）が出るようにして問題の切り分けを行ったほうが良い
音ゲー作りたいなら同時再生数を増やさないと話にならない

How to select empty inputs (value=“”) using jQuery
http://stackoverflow.com/questions/10651349/how-to-select-empty-inputs-value-using-jquery

ここにjqueryでは[value=""]というフィルタを使えないと書いています
valueの初期値で判断するから、という理由のようですが
何故valueの初期値で判断するのかが分かりません
どういう理由からそうなるのでしょうか？

セレクタは属性値しか見ない
inputタグは後からvalueを変更しようが属性値のｖａｌｕｅが変わることはない
なので入力したかどうかのチェックに[value=""]は使えない

>>31
なるほど
値を変えても、ソースリストが変わるわけではないみたいなことですね
ありがとうございました

>>30
jQueryではなくDOMの仕様

<input value="test">

input[value="test"] {
color: red;
}

これはページを表示した時に赤くなるが、intputの中もを変更しても色は変わらない
JavaScriptでvalueを変えても同様。valueの値は属性に反映されない。

vueのプロジェクトでtypescriptを利用する場合、コンポーネントの定義をクラスベースな記述ができるくらいのイメージでいいのかな？

typescriptをサポートしているって例でボタンをつくったりとかまでは見かけるけどそれ以上突っ込んだ例が少ないので
ドキュメントを読み解くときそこだけ読み替える感じでいける？

DOM操作をした直後にprompt命令を実行すると、
DOM操作が反映される前にその後のpromptが実行されてしまうのですが、
これをDOM操作を確実に反映させて（強制再描画させて）からpromptが実行されるようにする簡単な方法ってないでしょうか？

>>35
実例は？

>>36例えばこういう感じです。１行目が反映されるのが２行目が帰ってきたあとになるんですよね。
element.style.なんたら=かんたら;
var ok=prompt("これでいいですか？");

>>37
補足
２行目だけ実行されればいいというものではなくて、２行目以降も色々と処理があってそれは１行目の後であってほしいのです。
だから２行目以降全体をsetTimeoutでくくるとかはできれば避けたいです

MutationObserver

避けたいとかわがまま言うなら無理だ

chrome/safariだと古くからあるダイアログは描画保留中のを処理せずに表示しちゃうのか
setTimeout等で一旦ブラウザ側に表示する隙を与えてやるか
今時なやり方はprompt使わずに自前で表示するかかなぁ

くくりたくないってのならどっちにしろ非同期しか無くね？
async function a() {
　element.style.なんたら=かんたら;
　await new Promise((res,rej)=>requestAnimationFrame(()=>setTimeout(res,0)));
　var ok = prompt("これでいいですか？");
}
a();

そもそもpromptやalertで一時停止する義務もない中そんな細かい挙動の担保はできない
おとなしくdialog要素使え

iframeがクリックされた時に、
どのiframeがクリックされたか表示する方法はありますか？

$("iframe").contents().find("body").on("click", function(){
// alert( $(this).attr('id') );では無理
});

jQueryを使うとこんな感じでiframe内のクリックを実行することはできるのですが、
複数iframeがある状態で、「どのiframeか？」というのを知りたいので、
iframeタグのIDが取得したいです。

>>44
http://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument

情報不足だと思うのでもう少し書きます。

HTML部分が
<iframe id="iframe01" src="test.01html"></iframe>
<iframe id="iframe02" src="test02.html"></iframe>

みたいになっているとします。
>>44に書いたようにiframe内をクリックすると
どのiframeをクリックしたかidが取得できればと思います。

対象のiframeがどれかわかれば、srcを変更して
違うhtmlを読み込んだり出来ると思いまして。

>>44
そこのthisはiframe内のbodyだし
iframe内から外を得る方法は無いはずだからこんな感じ？
$("iframe").each(function(idx, elem) {
$(elem).contents().find("body").on("click", function(ev) {
alert($(elem).attr("id"));
});
});

>>44
ほらよ

http://jsfiddle.net/v9586xo0/

<iframe name="iframe01"></iframe>
<iframe name="iframe02"></iframe>

$("iframe").contents().on("click", function(){
　alert(this.defaultView.name);
});

一応言っておくとフレームをまたがってjQueryでイベントをハンドルすると
よくわからん挙動をしたことがあるので、あまりおすすめしないがな。

イベントの通知は、iframeの中から、親windowの関数を呼び出して
通知するほうが安全だと思うけど、まあ今は解決してるかもしれんし
動くなら別にいいけど