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

みんなの評価 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ

/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで

1 = :

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/

3 = :

■主要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 中でやるとか。

4 = :

■各種仕様 (http://fiddle.jshell.net/vSqKr/33/show/#Link も参照 )
◆ Standard ECMA-262
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ （ECMAScript 3 和訳）
http://es5.github.io/ （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.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://notifications.spec.whatwg.org/ （Notifications API）
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)

5 = :

ページをリロードすると、ブラウザがスクロール座標を再現しようとします
これを止めさせようとscrollTopを0にしても、その後に再現してしまいます
スクロール位置再現機能を止めるにはどうすればいいですか？
と前スレで質問した者ですが、

(function(){
var body = document.body;
var left = body.scrollLeft;
var top = body.scrollTop;
setTimeout(function(){
body.scrollLeft = left;
body.scrollTop = top;
}, 50);
}());

このようなコードでブラウザが位置を再現した後に戻すことにしました
しかし50msというのは妥当でしょうか？
目に見えない速さで動作するのがこのくらいの数字だったのでそうしたのですが
遅いPCだとどうなるのか・・
100にすると、一瞬見えてしまいます

6 :

>>1-4
最新のテンプレ案
http://jsfiddle.net/fH4cC/24/show/

次スレのテンプレ案を作成する際は、宜しければこちらをUpdateしていく形でお願いします

7 = :

うるせーバカ

8 :

>>5
unloadイベントに仕込めばええやろ

9 = :

自己解決しました

10 = :

どう解決したか書くのがマナーだよ
まあいいけど

11 = :

>>10
どう解決したかは内緒です＾＾

12 = :

そこをなんとか

13 = :

>>9はニセモノです・・・
unloadではうまくいきませんでした。

14 = :

もともとonloadで実行してますよ～
ただonloadだけだと駄目なんですよ
表示した後に勝手に修正するので。
ちなみに実際自己解決しました
スクロール値に変化がなかったら指定回数まではタイマーをセットしなおすという形です

15 = 8 :

いやいやonloadじゃないよunloadだよ
ページが閉じられる時にスクロール位置が勝手に記憶されて困るっていう話なんだろ？
だから・・・
解決したんならいいけどさ

17 = :

>>15　先生、尊敬します。ありがとうございました。

18 = :

Operaは…まあいいか。

20 = :

自分で型を登録できるJSヒントがあればいいんですが
そういうのないですかね～

22 = :

うざい

24 = :

node.js、express、jadeを入れて
node app.jsでサーバー起動してhttp://localhost:3000/にアクセスしましたが
\views\sadface.jadeがないと言われました
でも、エクスプローラで確認すると\views\sadface.jadeはあります
いったいどうしたら・・

28 = :

ニョロニョロって小数点切り捨てるってことなの？

29 = :

ビット反転の反転

33 = :

これは始めて知ったわ

34 = :

クロックフォードの言うように、
関数の最初に変数宣言をするようにしました
変数に初期値を代入しているものも、それに含まれますが、
関数の結果や配列やオブジェクトを代入しているものも含むべきなのでしょうか？
一応含めてみたのですが、
前処理の中に、本番の処理が混入しているような違和感があります

35 = :

うん、違和感があるね

37 = :

>>34
宣言だけ先にしておいたら、代入は後でもいいんじゃないの
クロックフォードがなんていうかは知らないけど

38 :

なんでそないCみたいな書き方せなあかんねん

39 = :

>>35
ですね
>>37
それがベターですね
>>38
JavaScriptでは内部で「巻き上げ」が行なわれて冒頭に宣言された状態になるので、
実際の処理と記述を合わせるという意味があるようです
また変数に自覚的になることでコードが丁寧になる傾向がある気がします

ありがとうございました

40 = :

うおおおおおおおおおおおおおおおおおおおおおおグローバル変数うおおおおおおおおおおおおおおおお

41 = :

ブラウザ間の差違を吸収するためにjquery使った方がいいですか？

42 = :

ハンドラの数を減らすために、
キャプチャリングフェーズのonchangeハンドラをdocumentに付けて一括で受けるなどしてるのですが
jqueryはキャプチャリングの機能を持っていないブラウザでも
キャプチャリングフェーズの再現をしてるのでしょうか？

43 = :

もあべたーよｗ

44 = :

おぎママはrubyが書ける

45 = :

http://stackoverflow.com/questions/14063199/jquery-on-focus-event-delegation
$("body").on("focus", "input, textarea", function() {
alert('d');
});

こういう書き方で、focusをbodyが受けることができるそうです
しかしfocusにはキャプチャリングフェーズはないので、この動作は不思議です
どういう仕組みでこんなことが可能なのか分かりますか？

46 :

>>45
http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

47 = :

focusにないのはバブリングのほうだろう。

48 = :

>>46
キャプチャリングフェーズのないIEの場合はfocusinとfocusoutを使うんですね
ありがとうございました

49 = :

>>47
そうでした

50 = :

>>45
このコード例でalertを使っているけど、これはあまり適当ではないですね
alertを閉じるたびにまたfocusが発生するので無限にalertが出る
しばらく原因が分からなかった・・