元スレ+ JavaScript の質問用スレッド vol.135 +
JavaScript覧 / PC版 / みんなの評価 :
1 = :
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです
2 = :
■FAQ
◆開発者ツール(Developer Tools)の基本的な使い方
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
http://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
▼要素を検証
1. ページ上で右クリックして [要素を検証]
2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
3. 右側のサイドバーから知りたいステータス名のタブを選択する
- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
- [Properties] タブ … 選択したDOMノードのプロパティを表示
▼コンソール
1. JavaScript コード上で console.log('Hello, World!'); と入力
2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
3. [Console] パネルに "Hello, World!" と表示される
(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。)
3 = :
■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 和訳)
4 = :
■各種仕様 (続き)
◆ 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
6 = :
>>1おつ
7 = :
前スレの977の方ありがとうございました。
仕様上できないのですね。
残念です。
8 = :
装飾はいくらでもできるけどここはJavaScriptスレだからスレチ
9 = :
前スレの、>978
<div id="div-a">
<input type="text" id="text-a" value="あいう">
<input type="text" id="text-b" value="abc">
</div>
var input_elems = $.map( $('#div-a > input'),
function(elem, index) {
return $(elem).attrAll(); // this === element
}
);
Cookies.set( 'input', input_elems ); // 設定
obj = Cookies.getJSON('input'); // 取得
console.log( obj );
結果
id: "text-a", type: "text", value: "あいう"
id: "text-b", type: "text", value: "abc"
Cookie のライブラリは以下を使っています。
js-cookie/js-cookie
http://github.com/js-cookie/js-cookie
$.fn.attrAll は、以下のブログで定義されています。
要素の属性を全部取得する
http://hokaccha.hatenablog.com/entry/20130819/1376895914
10 = :
特定の <div> のなかの <input> の状態を全部sessionStrageに保存して
あとでそれを再セットするって input の数や種類に依存せずにかけませんか？
div にも input にもユニークな id が振られてます
input.type は今の所 text select と checkbox だけです
native js でも jQuery でもいいです
11 = :
>>9
前スレの>>978じゃないけど、
要素の属性取るならそんなプラグイン使わないで
jQuery標準の $.serialize か $.serializeArray を使えば良いんだよ
<form>要素以下になくても使える
今回の場合はserializeArrayの方が使い勝手良いかな？
http://api.jquery.com/serialize/
http://api.jquery.com/serializeArray/
で、実はそんなのは簡単で、面倒なのはこっち
> input.type は今の所 text select と checkbox だけです
フォームの中身を全て保存して戻すってのは
以前に実装したことあるけど、
typeみてselectだったら～checkboxだったら～みたいな
コードを書いた記憶がある。意外と面倒くさい
12 = :
inputのtypeでselectってなんだ？教えてクレヨン
input type="file"があったら面倒なことになりそうな
そうでもないか？
13 = :
>>12
その質問に答える必要はない
14 = :
あー、でもidで見分けるのか。inputっていうからnameで見分けるのかと思った
var data = {};
$(":input").each(function() {
switch(this.type) {
case 'checkbox':
data[this.id] = this.checked;
break;
default:
data[this.id] = this.value;
}
})
データをかき集める所はこんな感じかな
idでユニークになるならserializeArrayみたいに配列で持たなくていいね。
ちなみにmultipleなselectには対応していない
こんな風にtypeを使って見分けることになるんで
> input の数や種類に依存せずにかけませんか？
に関しては、書けません。というのが答えになる。
15 = :
>>13
<input type="select"> が存在しないかもしれない、と自分を疑うことから始めた方がいいよ
http://html.spec.whatwg.org/multipage/input.html#attr-input-type
16 = :
>>15
時間の無駄。わかってる結論へ至る道はお前１人で勝手に進んでろ
17 = :
どこかポエムだな
19 = :
送られる属性ってなんや？
フォームのGET・POSTで送られる情報の
全てを網羅してるぞ？
20 = :
serializeArray を使うなら、name, value を使うように統一しないといけない。
type, id が無いから、使いずらいかも
input.type には必ず、text, select, checkbox を指定しておけば良いかも
22 = :
formだと既存のjsコードと衝突したらかなわんし
ほぼ同一のformが複数あるなんてしょっちゅうあるから
汎用性なんて考えない方がいい気がする
24 :
jqueryを使った時のデバッグが面倒臭すぎる
25 = :
>>16
分からない場所に突き進む道を選ぶのね、ご愁傷様
26 = :
>>25
俺はそんな道に進まないって意味だよｗ
27 = :
トイレ事情も地方によって様々だな
28 = :
九州は汲み取り式とか四国はベルサイユ宮殿式とかそういうのがあんの？
29 = :
雑多な要素を後から保存するのは無理がある
データの作成・保存はカスタムエレメントで閉じておくべき
例のvalueの問題はinputやtextareaを継承してonchangeで見てもいいが
contenteditableとして要素ごと作ればobserveも統一できるし見た目の調整もやりやすい
30 = :
なんでトイレ事情なんだよ
31 = :
>>26
正しい仕様を確認するための質問を無視する→理解の放棄
33 = :
>>15
HTMLはその場合の操作も定義されている
>>The type attribute ...... the invalid value default are the Text state.
34 = :
>>33
そりゃそうだが、将来的にtype属性値の種類が増えるかもしれんし、わざわざ不正値を指定する理由はあるまい
35 = :
まだ到着してなかったのかよｗ
俺は最初からわかってる結論へ至る道の到着点にいるぞ？ｗ
36 = :
分かっている人は>>11を書かな
38 = :
じ え ん
39 = :
selectボックスで、10番目の要素を自動的に一番上までスクロールさせる方法ってありますか？
40 = :
／::::::::ソ::::::::: :゛'ヽ、
/:::::::-、:::i´i|::|/:::::::::::ヽ
/::::::,,、ミ"ヽ｀ "゛ / ::::::ヽ ＜ 一億総活躍
/::::::== 卍 `-::::::::ヽ
l::::::::／ .,,,=≡, ,≡=、l:::::::l ／.￣） 英訳は「Promoting Dynamic
|:::::l゛ .,／･＼,!.／･＼ l:::::::! / /二､.
|`:::| :⌒ノ/.. i＼:⌒ |:::::i 丿 Ｙ .i Ｙ Engagement of All Citizens」
(i ″ ,ィ____.i i i // （ ゝ' ﾉ ./ /
ヽ i / ■ .i i / ,ゝ-､_）--'-' （全国民の精力的な参画の推進）
l ヽ ノ `ﾄｪｪｪｲヽ、/´ /{ ゝ､＿_ﾊ|ﾍ
／|、ヽ `ー'´ ／ ｨ'/ﾊ＿＿＿＿ﾊ つまり国家総動員
／/l ヽ ｀ "ー－´/ ////////////ﾉ
,,ｨ''"/// | ＞＜ ／///////////{//////////／
r''"////// ..|/:::::ﾉ//////////////}/////////Ｙ
////////| /:::::{///////////////{//////////
43 = :
データ型を指定できてたら良くなかったことはたくさんある
例えばここ何年か今までintだったDOMの値が
高画面解像度デバイスのためにfloatになってきる
44 = :
>>43
それは型キャストで解決できる程度の問題かな
floatを返していても型がintだったら自動的に
小数点以下切り捨てられる
むしろその方が想定しない型にならないのでいいかもね
46 = :
４Kとかだとコンテンツ全体表示できるから要素固定して表示するようなソリッドレイアウトよりも
リキッドデザイン的なものに変わってきた、ということでは
50 = :
一時そういう話があったがここにあるように今はまたintに戻った
http://www.w3.org/TR/cssom-view/#changes-from-2013-12-17
だけどChromeではまだサポートされてて
ズームしてdocumentElement.scrollTopなんかを弄ると分かる
200％以上に拡大すると分かりやすいだろうけど
特に低スピードのスクロール時にここで実際に役に立つことが分かる
http://output.jsbin.com/qedore
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.130 + (1001) - [97%] - 2017/11/25 20:45
- + JavaScript の質問用スレッド vol.137 + (1003) - [97%] - 2019/3/26 11:46
- + JavaScript の質問用スレッド vol.130 + (974) - [97%] - 2016/10/26 14:18
- + JavaScript の質問用スレッド vol.115 + (1001) - [97%] - 2014/5/29 16:16
- + JavaScript の質問用スレッド vol.131 + (1004) - [97%] - 2018/3/7 13:30
- + JavaScript の質問用スレッド vol.132 + (1001) - [97%] - 2018/4/19 11:00
- + JavaScript の質問用スレッド vol.133 + (1001) - [97%] - 2018/6/8 10:45
- + JavaScript の質問用スレッド vol.131 + (1000) - [97%] - 2017/1/25 8:01
- + JavaScript の質問用スレッド vol.136 + (1001) - [97%] - 2019/1/8 11:30
- + JavaScript の質問用スレッド vol.134 + (1001) - [97%] - 2018/8/3 23:15
- + JavaScript の質問用スレッド vol.138 + (1004) - [97%] - 2019/4/20 23:45
- + JavaScript の質問用スレッド vol.139 + (1001) - [97%] - 2019/5/27 15:15
- + JavaScript の質問用スレッド vol.105 + (1001) - [97%] - 2013/5/20 4:45
- + JavaScript の質問用スレッド vol.125 + (1001) - [97%] - 2015/10/7 17:45
- + JavaScript の質問用スレッド vol.118 + (1002) - [95%] - 2014/8/29 22:30
- + JavaScript の質問用スレッド vol.119 + (1002) - [95%] - 2014/10/3 15:30
- + JavaScript の質問用スレッド vol.117 + (1009) - [95%] - 2014/8/5 3:30
トップメニューへ / →のくす牧場書庫について