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

+ JavaScript の質問用スレッド vol.121 + at HP

1:Name_Not_Found
14/09/13 19:11:44.98 .net
JavaScript に関する何でも質問スレです。
お気軽にどうぞ。

2:Name_Not_Found
14/09/13 19:12:15.46 .net
■前スレ
+ JavaScript の質問用スレッド vol.120 +
ｽﾚﾘﾝｸ(hp板)

■過去スレ全集
URLﾘﾝｸ(www2.atpages.jp)
URLﾘﾝｸ(usamimi.info) (閲覧のみ)

■関連スレ
ECMAScript デス 4
ｽﾚﾘﾝｸ(tech板)
【jQuery】JavaScript ライブラリ総合質問所 vol.3
ｽﾚﾘﾝｸ(hp板)
【WHATWG】HTML5 Part6【W3C HTML WG】
ｽﾚﾘﾝｸ(hp板)
Webサイト制作初心者用質問スレ part239
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝12th＝
ｽﾚﾘﾝｸ(hp板)
Canvasについて語ろう
ｽﾚﾘﾝｸ(hp板)

3:Name_Not_Found
14/09/13 19:12:54.32 .net
■各種仕様 ( URLﾘﾝｸ(fiddle.jshell.net) も参照 )
◆ Standard ECMA-262
URLﾘﾝｸ(www2u.biglobe.ne.jp) （ECMAScript 3 和訳）
URLﾘﾝｸ(www.ecma-international.org) （ECMAScript 5.1 HTML版）
URLﾘﾝｸ(people.mozilla.org) （ECMAScript 6 有志HTML版）
URLﾘﾝｸ(kangax.github.io) （ECMAScript 5 compatibility table）
URLﾘﾝｸ(kangax.github.io) （ECMAScript 6 compatibility table）
◆ HTML Standard (HTML5)
URLﾘﾝｸ(www.whatwg.org)
URLﾘﾝｸ(momdo.s35.xrea.com) （HTML5.1 部分訳）
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （Web Storage 和訳）
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （DOM Standard (DOM4) 和訳）
URLﾘﾝｸ(www.w3.org) （DOM3 Events）
URLﾘﾝｸ(www.w3.org) （UI Events）
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （CSSOM 和訳）
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （CSSOM View Module 和訳）
◆ その他のWeb関連仕様
URLﾘﾝｸ(domparsing.spec.whatwg.org) （DOM Parsing and Serialization - innerHTML等）
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （XMLHttpRequest 和訳）
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （File API 和訳）
URLﾘﾝｸ(www.whatwg.org) （WHATWGの仕様一覧）
◆ MDN (Netscape/Mozilla)
URLﾘﾝｸ(developer.mozilla.org)
◆ JavaScript Garden (ja)
URLﾘﾝｸ(bonsaiden.github.com)
◆ JSON (JavaScript Object Notation) 4
URLﾘﾝｸ(www.json.org)
◆ MSDN Library
URLﾘﾝｸ(msdn.microsoft.com) (JavaScript)
URLﾘﾝｸ(msdn.microsoft.com) (JScript)
URLﾘﾝｸ(msdn.microsoft.com) (DHTML)

4:Name_Not_Found
14/09/13 20:11:30.92 .net
次スレのテンプレ案
URLﾘﾝｸ(jsfiddle.net)

5:Name_Not_Found
14/09/13 22:28:07.09 .net
>>1
またお前か
教えて君を擁護するためのテンプレで新スレを無駄に量産するな

6:Name_Not_Found
14/09/14 20:59:18.42 xbdCvSRU.net
どんだけスレ立てるんだよww
まぁスレ立てる手間省けていいけど
乙！

7:Name_Not_Found
14/09/14 21:43:27.09 .net
乙なわけないだろ
この手の擁護はワンパターンすぎるわ

8:Name_Not_Found
14/09/15 16:18:51.11 gtUjIHaV.net
phpのstrip_tag()と同じことができる
方法を考えて

9:Name_Not_Found
14/09/15 20:33:15.48 .net
>>8
ここは荒らしが立てたフライングスレだから他所へ行け

10:Name_Not_Found
14/09/16 16:49:17.38 6H52XqM3.net
ひさびさに来たんだが
なにが荒らしなん？

11:Name_Not_Found
14/09/16 18:10:51.54 pcL6/osK.net
文字列がすべてASCIIかを調べる正規表現を教えて頂きたいのですが、
自分で調べたところ

/[\x01-\x7F]/g

と

/[\x20-\x7E]/g

この2つが見つかりました。
これはどっちを使えばいいのでしょうか？
詳しい方教えてください

12:Name_Not_Found
14/09/16 18:15:50.71 .net
ごめんなさい、ここは現行スレじゃなかったようですね。
こちらでの質問は取り下げますので、下にお願いしますm(_ _)m

+ JavaScript の質問用スレッド vol.119 +
ｽﾚﾘﾝｸ(hp板)

13:Name_Not_Found
14/09/16 18:55:07.40 .net
>>10
vol.119がある状況でvol.121をたてる必要はないから

14:Name_Not_Found
14/09/20 16:06:26.93 MSLISnVY.net
あげあげ

15:Name_Not_Found
14/09/21 12:15:05.74 .net
このスレは荒らしが立てたスレなので下記スレッドに投稿して下さい

+ JavaScript の質問用スレッド vol.119 +
ｽﾚﾘﾝｸ(hp板)

16:Name_Not_Found
14/09/21 17:12:43.40 .net
このスレはそのスレの次次スレだろ

17:Name_Not_Found
14/09/22 11:47:31.06 .net
だから荒らしだろ

18:Name_Not_Found
14/09/22 12:00:57.77 .net
立てたのは荒らしかも知れないが、
スレ自体はまともなので問題ないのでは？

スレに問題があるっていう人、何人もいたっけ？
俺の知る限り一人しかいないよ。

19:Name_Not_Found
14/09/23 20:13:21.31 .net
一人かどうかは知らんが、問題があるのは明らかだろ

20:Name_Not_Found
14/09/24 13:07:24.54 .net
問題あるよ
おかしな文句言ってる奴の頭にww

21:榎本行宏忍法帖【Lv=10,xxTP】(1+0：5) 【ponponfine95916】 ◆aXy7M764q2
14/09/28 15:46:50.85 e8x8AMN5.net BE:901796151-2BP(1000)
この問題の答え誰かわかりますか？(*ω*)
《演習ドリル JavaScript（1）》
【01】JavaScriptの標準化されたものをなんと呼ぶか書きなさい
【02】JavaScriptは、「　　　」で動くスクリプトです。空欄を埋めなさい。

　　　1. サーバー　2.クライアント
【03】命令文（ステイタス）の終了を表す記号を書きなさい
【04】jsフォルダー内にある sample.js を読み込む記述をしなさい
【05】警告ウィンドウを表示するスクリプトを記述しなさい（値は不要）
【06】ブラウザに文字列を表示するスクリプトを記述しなさい（値は不要）
【07】JavaScriptでの変数宣言をするために必要な語句を書きなさい
【08】文字列「こんにちは」を、ブラウザに表示するコードを記述しなさい（script要素内）
【09】変数 msgに、ダイアログボックスに入力された値を代入しブラウザに表示する記述をしなさい
【10】変数 aに8を、変数 bに6を代入し、a を bで割った余りををコンソールに表示しなさい

22:Name_Not_Found
14/09/28 17:15:03.86 .net
> 【01】JavaScriptの標準化されたものをなんと呼ぶか書きなさい
LiveScript

>【02】JavaScriptは、「　　　」で動くスクリプトです。空欄を埋めなさい。
サーバーサイド等

> 【03】命令文（ステイタス）の終了を表す記号を書きなさい
なくてもよい

> 【04】jsフォルダー内にある sample.js を読み込む記述をしなさい
cat js/sample.js

> 【05】警告ウィンドウを表示するスクリプトを記述しなさい（値は不要）
<dialog id="alert">警告ウインドウ</dialog>
document.getElementById('alert').show()

> 【06】ブラウザに文字列を表示するスクリプトを記述しなさい（値は不要）
document.body.innerHTML = 'test';

> 【07】JavaScriptでの変数宣言をするために必要な語句を書きなさい
let

> 【08】文字列「こんにちは」を、ブラウザに表示するコードを記述しなさい（script要素内）
<script>document.write('<' + '/script>こんにちは<' + 'script>')</script>

> 【09】変数 msgに、ダイアログボックスに入力された値を代入しブラウザに表示する記述をしなさい
bootbox.prompt("input", "cancel", "ok", function(msg) { alert(msg) });

> 【10】変数 aに8を、変数 bに6を代入し、a を bで割った余りををコンソールに表示しなさい
[a,b]=[8,6],console.log(a/b)

23:Name_Not_Found
14/10/03 18:10:26.35 .net
JavaScript を自ら学ぶ人のための質問スレッドです。
>>24-27のテンプレを読んだ上で質問してください。

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけ「問題の事象が再現されること」を確認したサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
(7) サンプルコードに HTML が含まれる場合は URLﾘﾝｸ(validator.w3.org) で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　URLﾘﾝｸ(jsdo.it)　URLﾘﾝｸ(jsbin.com)　URLﾘﾝｸ(jsfiddle.net)　URLﾘﾝｸ(ideone.com)

24:Name_Not_Found
14/10/03 18:12:03.03 .net
■前スレ
+ JavaScript の質問用スレッド vol.120 +
ｽﾚﾘﾝｸ(hp板)

■過去スレ全集
URLﾘﾝｸ(www2.atpages.jp)
URLﾘﾝｸ(usamimi.info) (閲覧のみ)

■テンプレ案
URLﾘﾝｸ(fiddle.jshell.net)

■関連スレ
ECMAScript デス 4
ｽﾚﾘﾝｸ(tech板)
JavaScript ライブラリ総合質問所 vol.4
ｽﾚﾘﾝｸ(hp板)
Webサイト制作初心者用質問スレ part242
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝12th＝
ｽﾚﾘﾝｸ(hp板)
Canvasについて語ろう
ｽﾚﾘﾝｸ(hp板)

25:Name_Not_Found
14/10/03 18:13:56.54 .net
■主要FAQ (全部は URLﾘﾝｸ(fiddle.jshell.net) )
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 中でやるとか。

26:Name_Not_Found
14/10/03 19:02:32.39 .net
■各種仕様 ( URLﾘﾝｸ(fiddle.jshell.net) も参照 )
◆ Standard ECMA-262
URLﾘﾝｸ(www2u.biglobe.ne.jp) （ECMAScript 3 和訳）
URLﾘﾝｸ(www.ecma-international.org) （ECMAScript 5.1 HTML版）
URLﾘﾝｸ(people.mozilla.org) （ECMAScript 6 有志HTML版）
URLﾘﾝｸ(kangax.github.io) （ECMAScript 5 compatibility table）
URLﾘﾝｸ(kangax.github.io) （ECMAScript 6 compatibility table）
◆ HTML Standard (HTML5)
URLﾘﾝｸ(www.whatwg.org)
URLﾘﾝｸ(momdo.s35.xrea.com) （HTML5.1 部分訳）
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （Web Storage 和訳）
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （DOM Standard (DOM4) 和訳）
URLﾘﾝｸ(www.w3.org) （DOM3 Events）
URLﾘﾝｸ(www.w3.org) （UI Events）
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （CSSOM 和訳）
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （CSSOM View Module 和訳）
◆ その他のWeb関連仕様
URLﾘﾝｸ(domparsing.spec.whatwg.org) （DOM Parsing and Serialization - innerHTML等）
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （XMLHttpRequest 和訳）
URLﾘﾝｸ(www.hcn.zaq.ne.jp) （File API 和訳）
URLﾘﾝｸ(www.whatwg.org) （WHATWGの仕様一覧）
◆ MDN (Netscape/Mozilla)
URLﾘﾝｸ(developer.mozilla.org)
◆ JavaScript Garden (ja)
URLﾘﾝｸ(bonsaiden.github.com)
◆ JSON (JavaScript Object Notation)
URLﾘﾝｸ(www.json.org)
◆ MSDN Library
URLﾘﾝｸ(msdn.microsoft.com) (JavaScript)
URLﾘﾝｸ(msdn.microsoft.com) (JScript)
URLﾘﾝｸ(msdn.microsoft.com) (DHTML)

27:Name_Not_Found
14/10/03 19:05:40.91 .net
■諸注意
vol.115でlodashを不必要に推奨して啓蒙する行為が多く確認されており、ライブラリ系の質問はvol.116から禁止されました。
vol.115,116ではライブラリ禁止する発言が見られた直後にライブラリを許可する意図で次スレを立てる行為が確認されています。
本スレッドでライブラリ許可を求める発言が確認された場合は不要な争いを避ける為、スルーすることを推奨します。
ライブラリの質問はライブラリスレへ誘導し、誘導行為への反論はスルーしてください。

28:Name_Not_Found
14/10/03 21:34:40.68 .net
お疲れ

29:Name_Not_Found
14/10/03 22:25:17.44 .net
とりあえずお疲れ

30:Name_Not_Found
14/11/01 23:10:29.60 0xdu+1aq.net BE:194272503-2BP(2000)
HTML5のdrag&drop機能との連携について質問です
下のような図になっていて
URLﾘﾝｸ(i.imgur.com)
要素をdrag&dropすることは出来ました

次にドラッグしてきた時に重なった下の要素を取得しようと思い四角い要素にondragoverの属性を付けてドラッグしてみましたが
（図で言うと上の枠からドラッグしてきて既にある赤い四角と重なった時に下の赤い四角を取得しようとした）
重ねるとドロップされるボックス自体の要素が返ってきました

四角い要素を取得するにはどうしたらいいのでしょうか？

31:Name_Not_Found
14/11/01 23:18:59.79 0xdu+1aq.net BE:194272503-2BP(2000)
すいません書き方が間違っていただけでした

32:Name_Not_Found
14/11/01 23:21:03.67 .net
>>30
こんなサンプル見つけたよ。

URLﾘﾝｸ(cdn.liginc.co.jp)

参考になるかな？

$(function() {

$(".dragDiv").draggable();

$( "#div3" ).droppable({
accept : ".dragDiv" , // 受け入れる要素を指定
drop : function(event , ui){
// dragされてきたオブジェクトを取得してクローン作製
var dragId = ui.draggable.attr("id");
if($(this).find(".drop" + dragId).length == 0){
$(this).append('<span class="drop' + dragId +'">' + ui.draggable.text() + 'が置かれたよ</span>');
}
} ,
out : function (event , ui){
var dragId = ui.draggable.attr("id");
$(this).find(".drop" + dragId).remove();
}

});
});

33:Name_Not_Found
14/11/06 04:00:21.25 .net
こっちは荒らしが勝手にテンプレはずしたスレだから立て直しといたよ

誘導

+ JavaScript の質問用スレッド vol.121 +
ｽﾚﾘﾝｸ(hp板)l50

34:Name_Not_Found
14/11/06 09:05:42.82 .net
本スレ上げ

35:Name_Not_Found
14/11/06 10:07:16.18 .net
>>33
乙

36:Name_Not_Found
14/11/06 11:06:09.58 .net
>>33
幼稚なことすんなゴミ
新陳代謝の低い板なんだからスレがえんえん残るだろボケ

37:Name_Not_Found
14/11/06 11:10:49.89 .net
テンプレなんて意味ないんだから立った順番に粛々と使っていけばいい
ここはvol22として利用する

38:Name_Not_Found
14/11/07 15:24:22.70 .net
ここは実質vol.22なのか
では、>>33に移動しようか

39:Name_Not_Found
14/11/07 16:53:20.73 .net
(function(a){
})(a||a=[]);

こんな感じだったかよく覚えてないけど
括弧の中で代入してるコード見たことあるんですけど自分で描いてみたらエラーになりました
aっていうのが存在しなかったら[]を渡したい場合はどう書けばいいですか？

40:Name_Not_Found
14/11/07 16:53:50.57 .net
>>39
var a = a || [];
(function(a){
})(a);

41:Name_Not_Found
14/11/07 18:04:58.25 .net
>>39-40
ｽﾚﾘﾝｸ(hp板:23-25番)n からのコピペか
分かりやすい自演だな

42:Name_Not_Found
14/11/07 19:57:58.43 .net
spanをgetElementsByTagNameで取得して
obj.style.color = 'red'ってやってbodyに挿入したんですけど
この挿入した要素をquerySelectorで取得したいんですがdocument.querySelector('span[style="color: red"]')で取得できません
javascriptからstyleを設定しないで直接HTMLに<span style="color: red"></span>って書くと取得できました
どうやったらjavascriptでstyleを設定した要素をquerySelectorで取得できるかおしえてください

43:Name_Not_Found
14/11/07 20:20:20.19 .net
setAttribute使うのはなしでおねがいします
なかったらないでいいです

44:Name_Not_Found
14/11/07 21:02:08.30 .net
>>42-43
それは恐ろしく悪い実装だからお勧めしない
素直に class や id を使え

45:Name_Not_Found
14/11/07 21:39:38.98 .net
それは無理ですそういうコードを書いているWEBサービスを僕が使わせていただいている身で、便利にするブックマークレットを作りたいからです

46:Name_Not_Found
14/11/07 22:11:54.74 .net
そういえばJavaScriptでCSSを書き換えると自動的に値が変換されることがあるよな
elm.style.color = "#ff0000"; // => color: rgb(255, 0, 0);
elm.style.width = "0"; // => width: 0px;
elm.style.margin = "0 1px 0 1px"; // => margin: 0px 1px;
どういう風に変換するのかは、仕様で決まってるのかな？
それともブラウザが勝手に決めてるのだろうか

47:Name_Not_Found
14/11/07 23:25:25.62 rGU/ECK3.net
>>39

(function(a){
})(a || []);

こうじゃねーの？

48:Name_Not_Found
14/11/07 23:29:23.03 .net
Uncaught ReferenceError: a is not defined

49:Name_Not_Found
14/11/07 23:30:59.88 rGU/ECK3.net
じゃあこうだろｗ

(function(a){
})(window.a || []);

50:Name_Not_Found
14/11/07 23:47:57.79 .net
それでもいいけど、aがfalseyだったら思わぬことになるから
(function(a){
})("a" in window ? a : []);
がいいんじゃない？

51:Name_Not_Found
14/11/08 00:52:02.23 .net
>>39
関数外で宣言する必要がまるでない
(function(){
var a = a || [];
})();

52:Name_Not_Found
14/11/08 00:57:39.11 .net
>>45
では、面倒くさいが、
span[style="color:red"], span[style="color: red"], span[style="color : red"], span[style="color:#f00;"], span[style="color: #f00"]
のようにホワイトスペースやカンマの有無の全ての組み合わせを , 区切りで宣言しろ
ブラウザがstyle属性値をどのような書式で持つかは実装依存
ブラウザがバージョンアップして挙動が変更することも考えられるので必ず「全てのパターン」を宣言しろ

53:Name_Not_Found
14/11/08 01:01:39.96 .net
>>51
それだと関数内の var で a が新たに宣言されてしまうので不可
var a = "test";
(function(){
var a = a || []; // 関数外の宣言に関わらず [] が代入される
})();

54:Name_Not_Found
14/11/08 01:11:54.57 .net
>>53
"test" でも [] でも良い状況ってどんなケース？
[] で初期化するんだからオブジェクトを想定していたんだが

55:54
14/11/08 01:13:42.72 .net
あと、その条件なら普通にグローバルコードで宣言しろよ、と思うね
var a = a || [];

56:Name_Not_Found
14/11/08 01:14:41.99 .net
>>54
a = "test"じゃなくても{}でも[]でも同じこと
試せばわかる

57:Name_Not_Found
14/11/08 01:22:39.75 .net
>>56
なるほど、これでいいかね？
var a = [];
(function(){
var a = this.a || [];
}).call(this);

58:Name_Not_Found
14/11/08 01:37:21.74 .net
ここは実質vol.22です
質問者は以下のスレに移動してください

+ JavaScript の質問用スレッド vol.121 +(c)2ch.net
ｽﾚﾘﾝｸ(hp板)

59:Name_Not_Found
14/11/08 01:40:57.34 .net
>>39はｽﾚﾘﾝｸ(hp板:23番)n のコピペだからここで回答するだけ無駄

60:Name_Not_Found
14/11/08 02:12:08.58 .net
>>59
すまん、向こうで回答しなおしてきた
荒らすのもいい加減にして欲しい

61:Name_Not_Found
14/11/08 02:17:33.79 .net
>>42
document.querySelector('span[style="color: red;"]')

ただしこっちの方が安定的
Array.prototype.filter.call(document.querySelectorAll("span"), function(e){ return e.style.color == "red;" })[0]

62:Name_Not_Found
14/11/08 08:47:50.81 6IP4Y34A.net
$('span').filter(function() { return this.style.color = 'red'})

63:Name_Not_Found
14/11/08 10:54:19.86 .net
querySelectorの第２引数の情報MDNに乗ってなかったよく知ってるな

64:Name_Not_Found
14/11/08 13:07:30.32 .net
質問者は以下のスレに移動してください

+ JavaScript の質問用スレッド vol.121 +(c)2ch.net
ｽﾚﾘﾝｸ(hp板)

65:Name_Not_Found
14/11/08 13:08:58.96 YzcprxwW.net
>>64
いやですｗ

66:Name_Not_Found
14/11/08 13:12:09.89 .net
荒らしの立てたスレだから荒らしだけが残ればいい

67:Name_Not_Found
14/11/08 14:04:11.51 .net
>>46
>どういう風に変換するのかは、仕様で決まってるのかな？

要素 element の element.style の戻り値が実装する
CSSStyleDeclaration インタフェースの
getPropertyValue() メソッドを呼び出したときの
戻り値の書式は CSSOM で決まってる。
（たぶんこれが element.style.xxx でアクセスしたとき得られる値だろう）

color の場合

"rgb(R, G, B)" （不透明度 1 の場合）または
"rgb(R, G, B, A)"
になる（R, G, B は10進数で A は小数、カンマの後はスペース）

element.style.color = ... で設定したときに element の style 属性にも
同じように反映されると考えるのが自然だが、仕様には書かれてないね

HTML 仕様にも style 属性のふるまいについて
www.w3.org/TR/css-style-attr/
を参照しているが
element.style.color = ... で値を設定したときについては
どうも書かれてないみたい

68:Name_Not_Found
14/11/08 14:06:35.92 44JfXZ+T.net
> span[style="color : red"],

これだと、例えばbackgroudが定義された時
色は赤なのにマッチしなくなるぞ

69:Name_Not_Found
14/11/08 14:08:27.84 44JfXZ+T.net
というかユーザースタイルシート（CSS）を書いてるのならともかく、
JavaScriptのコードを書いてるのにstyle属性をセレクタで
取得しようというのはセンスが悪いよ。

70:Name_Not_Found
14/11/08 14:30:42.40 .net
>>68
span[style="color: red"], span[style="color : red"], span[style="color :red"],
span[style^="color: red;"], span[style^="color : red;"], span[style^="color :red;"],
span[style^="color: red ;"], span[style^="color : red ;"], span[style^="color :red ;"],
span[style*=";color: red;"], span[style*=";color : red;"], span[style*=";color :red;"],
span[style*=";color: red ;"], span[style*=";color : red ;"], span[style*=";color :red ;"],
span[style$=";color: red;"], span[style$=";color : red;"], span[style$=";color :red"],
span[style$="; color: red;"], span[style$="; color : red;"], span[style$="; color :red"]
のように部分一致にすれば良い
これでも足りないが、ホワイトスペースの組み合わせを考えると、気が遠くなる

>>69
querySelector がナンセンスなのは同意だが、querySelectorでないと困ると駄々をこねるので>>52で回答した
ComputedStyle を取るほうがまだマシだな

71:Name_Not_Found
14/11/08 15:32:07.79 .net
>70に付け加えるなら「color: #f00, color: #ff0000, color: red, color: rgb(255, 0, 0)」のパターンもある
ホワイトスペースや ; の組み合わせパターンも考えると、かなり大変だな
ナンセンスな実装には違いない

72:Name_Not_Found
14/11/08 16:55:19.91 .net
function abc(){
var result = aaaa();
result.ok = function(e){
～
}
}
って書くのと
function ok(){
～
}
function abc(){
var result = aaaa();
result.ok = ok;
}
}
って書くのどっちがメモリにやさしいですか？
前者はabc()を呼ぶたびに中の無名関数が生成されていってメモリの無駄になる気がするんですが

73:Name_Not_Found
14/11/08 16:58:56.26 .net
>>72
実際にベンチマーク取ればわかるだろ？

わからければ・・・・違いはないということさ。

74:Name_Not_Found
14/11/08 19:27:34.31 .net
なんかあっちはわざと？くだらない話ばかりして
グダグダしてるから、こっちにまともな答え書いておくわ。

Math.random() は0から1未満の数を返す。だから0にはなるが1.0にはならない。

URLﾘﾝｸ(developer.mozilla.org)
> [0,1) 、……つまり、0 以上 1 未満の範囲で疑似乱数を返します。Java と同様に、現在時刻をシードとして乱数を生成します。

求めたい値が、0～5であれば、0, 1, 2, 3, 4, 5 の6パターンなので
Math.floor(Math.random()*6)が正解。

Math.random()が1がでるのであれば、1×6 = 6になるが、
1未満を返すので6未満、つまり最大でも5.9999・・・の小数点切り捨てで5が最大になる。
0～1未満を6倍すると以下のようになるから、計算上は公平になる。

Math.floor(0 ～ 0.9999・・・) = 0
Math.floor(1 ～ 1.9999・・・) = 1
Math.floor(2 ～ 2.9999・・・) = 2
Math.floor(3 ～ 3.9999・・・) = 3
Math.floor(4 ～ 4.9999・・・) = 4
Math.floor(5 ～ 5.9999・・・) = 5

Math.floor(Math.random()*6) - 1; だとrandom() = 0の時
Math.floor(0*6) - 1 = Math.floor(0) - 1 = -1 なので明らかに間違い。

75:Name_Not_Found
14/11/08 19:34:02.86 CMgSWh8C.net
偽スレと本スレの格の違いがでたなｗ

76:Name_Not_Found
14/11/08 19:39:24.23 /Hj0O7lg.net
>例えばさ、乱数が0.0から0.9まで出るとするじゃん
>そうすると
>0.0*6=0.0
>0.1*6=0.6
>0.2*6=1.2
>0.3*6=1.8
>0.4*6=2.4
>0.5*6=3.0
>0.6*6=3.6
>0.7*6=4.2
>0.8*6=4.8
>0.9*6=5.4
>になって偏りがでるよね
>実際には問題にならないだろうけど
>凄い気になる

ってのがあったんだけど、まあいいや
ありがとう

77:Name_Not_Found
14/11/08 19:48:02.89 .net
こっちもぐだぐだ感あふれてるわ
さっきはあっちのスレにたまたま人が多かっただけで何も変わらん

78:Name_Not_Found
14/11/08 19:48:20.50 .net
>>76
>例えばさ、乱数が0.0から0.9まで出るとするじゃん

それは精度が低い（小数点第一位で終わってる）から。

random()が浮動小数点数を返すのは
精度が高く無いと、数値をかけた時に狂うから。

例えば0～5ではなく、0～99の時は
Math.random()*100になるが
0.4 だと 40、0.5 だと 50。41～49が出る確率は0になってしまう。

これが0.4～0.5の間もちゃんとでるのであれば、
0.41*100 = 41、0.42*100 = 42 のようにちゃんとでてくれる。

random()が0～1未満の浮動小数点数（なるべく小数点以下が多い数）を
返すのは、ある範囲の整数を返すときに必要な「任意の数をかける」時に
問題ないようにするためなんだよ。

君が言ってる隔たりの原因は精度�

79:ｪ低いから。

80:Name_Not_Found
14/11/08 19:50:04.53 .net
>>77
なんで始まってからすぐグダグダになるんだよｗ

81:Name_Not_Found
14/11/08 19:50:31.28 /Hj0O7lg.net
>>78
うん、ありがとう

82:Name_Not_Found
14/11/08 19:53:36.68 /Hj0O7lg.net
なんでこんなこと聞いてたかっていうと
以下のコードで円周率を計算しようと思ったんだけど
ちゃんとした数値が出なくて
どこがおかしいのか添削してくれ

凄い遠回りしてるのは、自覚してるので
出来れば大幅な改変は無しでお願いします

var arr = new Array();
for (m = -50; m < 51; m++) {
for (n = -50; n < 50; n++) {
arr.push([m, n]);
}
arr.push([m, n]);
}

function crd() {
var rdm = arr[Math.floor(Math.random() * 10201)];
return Math.pow(rdm[0], 2) + Math.pow(rdm[1], 2);
}

var j = 0;
for (i = 0; i < 100000; i++) {
if (crd() < 2500) {
j++;
}
　　　　　　}
　　　　　　document.write("π≒" + j * 4 / 100000);

83:Name_Not_Found
14/11/08 19:55:02.99 .net
>>79
こっちは>>39や>>42に対する回答がぐだぐだだったし、何も変わらん

84:Name_Not_Found
14/11/08 19:57:36.27 .net
> 0.2*6=1.2
> 0.3*6=1.8
> 0.4*6=2.4
> 0.5*6=3.0

ここだけを見ると2が出る確率が低いようだけど、実際は

0.00000 <= x < 0.16666… = 0
0.16666 <= x < 0.33333… = 1
0.33333 <= x < 0.5　　　　　= 2
0.5　　　 <= x < 0.66666… = 3

になるから、どれも0.166666…ずつで、
ちょうど同じ数なんだよなね。

85:Name_Not_Found
14/11/08 20:07:18.90 .net
>>42 >>46 >>52 >>67 >>70 >>71
elm.style.xxx に値をセットした時には setPropertyValue() が呼び出される
URLﾘﾝｸ(www.w3.org)
「Setting the camel-cased attribute attribute must invoke setProperty() ...」

その際に値が自動変換される
URLﾘﾝｸ(www.w3.org)
実際の定義は細かいけど、例として…
keyword は、小文字に変換される（RED は red になる。決して rgb() や #xxx などには変換されない）
<color> は、rgb(x, x, x) 又は rgba(x, x, x, x) に変換される。値同士は ", "（カンマ・スペース）で区切る
<length> で値が 0 の場合は、0px に変換される

さらに、style属性の文字列が更新される
URLﾘﾝｸ(www.w3.org)
「Mutating the declarations must set the style content attribute ...」
その際の文字列の生成方法は、URLﾘﾝｸ(www.w3.org) に記載されている。
概説すると、
[1] それぞれの宣言を「プロパティ名 + ": " + 値 + ";"」の形式にする。
.　　その際、ショートハンドプロパティで表せるならそれを用いる
[2] それぞれを " " で結合する

…というわけで、ブラウザが CSSOM に則っているなら、
elm.style.color = "red"; としたら style="color: red;" になるし、>>46 の各々の変換も仕様に沿ったものである。

ただし、CSSOM はまだ Working Draft なので、上記の仕様に沿っていないブラウザも多数あるのが事実。
とは言っても >>42 の場合は自分が動かす分で動作すればいいだけなので、自分の環境で動くものを回答レスから適当に拾えばいい。長文すまん

86:Name_Not_Found
14/11/08 20:25:18.35 .net
>>81
そのコードが何をやってるのかさっぱりわからんけど
（SQUEAKとかいうやつみたいだけど考えるの面倒くさいｗ）

以下のように数値変えたらそれっぽくなったよ。
何か計算間違ってるんじゃね？点の取り方とか個数とか枝切の値とか

var arr = new Array();
for (m = 0; m < 1000; m++) {
for (n = 0; n < 1000; n++) {
arr.push([m, n]);
}
arr.push([m, n]);
}

function crd() {
var rdm = arr[Math.floor(Math.random() * 1000000)];
return Math.pow(rdm[0], 2) + Math.pow(rdm[1], 2);
}

var j = 0;
for (i = 0; i < 100000; i++) {
if (crd() < 1000000) {
j++;
}
　　　　　　}
　　　　　　console.log("π≒" + j * 4 / 100000);

87:Name_Not_Found
14/11/08 20:30:25.30 .net
>>81
初めから10201個の点の位置を決めている、というのがナンセンス
この時点で π の正確な値は出せない
極端な例で言うと、3x3の9個の点だと、中央の1点しか円の内側にないでしょ？

改善する方法は、点の位置を毎回ランダムに決めること
頑張れば100文字ぐらいでコード書けるよ

88:70
14/11/08 20:31:19.43 knhGBN36.net
>>84
つまり、CSSOM 仕様準拠の実装なら
document.querySelector('span[style^="color: red;"], span[style*="; color: red;"]');
で>>42の目的を達成できるわけか
勉強になった、ありがとう

89:Name_Not_Found
14/11/08 20:35:53.57 /Hj0O7lg.net
>>85
うーん、点の個数が少ないのかな？

90:Name_Not_Found
14/11/08 20:37:13.71 /Hj0O7lg.net
>>86
10201個じゃ少ないってこと？

これだと上手くいく

var arr = new Array();
var j=0;
function f(){
return Math.pow(Math.random(),2);
}
for(i=0;i<10000000;i++){
if(f()+f()<1){
j++;
}
}
document.write("π≒"+j*4/10000000);

91:85
14/11/08 20:44:34.93 .net
> var arr = new Array();
> for (m = -50; m < 51; m++) {
> for (n = -50; n < 50; n++) {
> arr.push([m, n]);
> }
> arr.push([m, n]);
> }

50と51の違いも気持ち悪いが、ここを変えても変化はなかった。
2番目のarr.pushも気持ち悪いが、arr.length = 10201で
ランダムの最大とも一致するから間違ってないだろう。

> for (i = 0; i < 100000; i++) {
この100000はサンプル数だろう。単純に10倍したら結果も10倍になった。
j * 4 / 100000 の 100000と同じであれば数が多ければなんでも良さそうだ。

で最期に怪しかったのが、
> if (crd() < 2500) {
2500という数字で2500というのは50 * 50 だが
これは51 * 50 = 2550ではないのかね？

と思って変えてみたら、それらしくなったぞｗ

相変わらず数学的な意味はさっぱりわからんが（笑）
コードの一貫性における違和感のみからバグ取りしてみた。

92:86
14/11/08 20:46:12.07 .net
>>89
そう、まさにそれ

93:Name_Not_Found
14/11/08 21:44:59.37 /Hj0O7lg.net
>>90
確かにその違和感は自分でも感じた
でも理論的には間違っていない・・・はず

円周率を求めると言う課題は89のコードでクリアしたから
あとは何故このコードが上手く動かないかだけ
すっきりしたい

半径50の円を描いていることになるから2500で
間違いないはずなんだけどな
少しそこんとこ突き詰めて考えてみるか

94:Name_Not_Found
14/11/09 00:14:46.45 .net
3.1454ってなるじゃん。ただの誤差だよ

95:Name_Not_Found
14/11/09 00:41:50.23 BwBDaWrA.net
<<93
そうだな

こうしたら多�

96:ｭ良くなったから多分初期値が少なすぎたんだと思うレス下さった皆さん有難う御座いました var arr = new Array(); for (m = -500; m < 501; m++) { for (n = -500; n < 500; n++) { arr.push([m, n]); } arr.push([m, n]); } function crd() { var rdm = arr[Math.floor(Math.random() * 1002001)]; return Math.pow(rdm[0], 2) + Math.pow(rdm[1], 2); } var j = 0; for (i = 0; i < 100000; i++) { if (crd() < 250000) { j++; } } document.write("π≒" + j * 4 / 100000);

97:Name_Not_Found
14/11/09 07:15:53.95 .net
>>94
これ、ループでランダムに要素をとる意味が全くないぞ
まずはプログラミングじゃなくて数学の勉強しろ

98:Name_Not_Found
14/11/09 08:55:16.54 BwBDaWrA.net
>>95
こういうこと？

var j=0;
function f(){
return Math.pow(Math.random(),2);
}
for(i=0;i<10000000;i++){
if(f()+f()<1){
j++;
}
}
document.write("π≒"+j*4/10000000);

99:Name_Not_Found
14/11/09 09:10:59.68 BwBDaWrA.net
総当り法ってことかな

100:Name_Not_Found
14/11/09 11:32:27.96 .net
いまだにinnerHTML使ってる奴見ると吐き気がする

101:Name_Not_Found
14/11/09 11:46:31.07 .net
場合によると思うけどね
jQueryにも使われてるし、仕様に書かれているくらいだし

102:Name_Not_Found
14/11/09 11:54:41.53 .net
意味不明
innerHTMLは普通に使っていいっていう結論が出たはずだが？

103:Name_Not_Found
14/11/09 12:00:19.93 .net
まあこの辺りでさんざん語られたことのコピペかな

+ JavaScript の質問用スレッド vol.117 +
ｽﾚﾘﾝｸ(hp板:531-番)

104:Name_Not_Found
14/11/09 12:19:35.74 .net
>>100
なにいってんのjQueryもメインはremoveChildで消してるんだけど

105:Name_Not_Found
14/11/09 12:20:03.17 .net
だいたいベンチ取ればinnerHTMLが猛烈に遅いのは分かることだろ

106:Name_Not_Found
14/11/09 12:21:07.15 .net
適材適所
原理主義はアホ
っていう結論になったはずだが？

107:Name_Not_Found
14/11/09 12:22:53.36 .net
適材適所ってなんだよ遅くて非効率なものを使う必要はねえんだよ

108:Name_Not_Found
14/11/09 12:36:22.89 1ma5/uRs.net
>>103
> だいたいベンチ取ればinnerHTMLが猛烈に遅いのは分かることだろ

速かったよ。

一見文字列を解釈する必要がある分時間がかかるから
不思議に思えるが、JavaScriptがネイティブでないのが原因。

innerHTMLだと、代入した後は
すべてネイティブで処理されるから早いが、

それと同等なことをネイティブでないJavaScriptでやると
1つずつオーバーヘッドが加わる。

あとさすがにブラウザ、HTMLテキストを解釈するのが仕事だけあって
相当チューニングされてる。

109:Name_Not_Found
14/11/09 12:50:16.73 .net
一度に代入できるのに遅いわけないだろw

110:Name_Not_Found
14/11/09 13:01:20.25 .net
>>103
遅くなるのは
innerHTML += string
を繰り返す場合だけだと思うが

これは前に挿入されたHTMLの構文解析を重複して繰り返す
ことに他ならない。遅くなるのは当然でベンチマークとして不公平

純粋な意味で innerHTML が劇的に遅いとされるベンチマーク結果はあるの？

111:Name_Not_Found
14/11/09 13:12:23.25 .net
URLﾘﾝｸ(jsperf.com)

112:Name_Not_Found
14/11/09 13:13:33.42 .net
遅くないって逝ってた奴出てこいよ

113:Name_Not_Found
14/11/09 13:16:18.20 .net
innerHTMLが敬遠されるのは速さじゃなくてXSS問題の方が大きいと思う
>>96がinnerHTMLを使ったコードだったら、>>07は吐き気を覚えるのだろう

114:Name_Not_Found
14/11/09 13:24:21.07 .net
初心者がinnerHTMLが1番って結論を出したらそれがこのスレの総意のように扱うな

115:Name_Not_Found
14/11/09 13:25:08.17 .net
innerHTML推し派はDOM XSSとか知らない

116:Name_Not_Found
14/11/09 13:27:46.52 .net
両者の長所短所を知っている人ならば、どっちか片方だけがいいだなんて言わない

117:Name_Not_Found
14/11/09 13:30:44.00 .net
いいえ、innerHTMLはデメリットしかない

118:Name_Not_Found
14/11/09 13:40:40.82 .net
URLﾘﾝｸ(jsperf.com)
innerHTMLの方が速い

119:Name_Not_Found
14/11/09 13:47:36.74 .net
XSS問題はinnerHTMLが抱える根幹の問題
XSSの発生しない方法があるなら、セキュリティ意識の高い人はinnerHTML以外を選択する
XSSに目をつぶるとしても、textContent, TextNode#data, insertAdjacentHTML に言及されるべきなのだが、既に>101で語り尽くされてる

120:Name_Not_Found
14/11/09 13:55:02.75 .net
>>116
DOM追加でinnerHTML使ったらXSSが発生するよ？

121:Name_Not_Found
14/11/09 13:59:37.37 .net
< と > をエスケープすればいいだけじゃん

122:Name_Not_Found
14/11/09 14:09:39.57 .net
appendChildがわざわざエスケープしてくれるのに手動でやるのか？

123:Name_Not_Found
14/11/09 14:24:33.49 .net
おっと、appendChildがエスケープって語弊があるな

124:Name_Not_Found
14/11/09 14:44:10.78 .net
手動ですればいいじゃん
innerHTMLの大きな問題点はXSSじゃない

125:Name_Not_Found
14/11/09 15:14:45.06 .net
はあ？

126:Name_Not_Found
14/11/09 18:31:54.69 .net
innerHTMLの問題はXSS以外にもあるが、既に>>101で議論されたので改めて議論する事もない

127:Name_Not_Found
14/11/09 18:33:06.53 DNSyM79S.net
>>118
> DOM追加でinnerHTML使ったらXSSが発生するよ？

なら、XSSが発生しないように
チェックすればいいだけじゃないの？

128:Name_Not_Found
14/11/09 18:39:55.90 .net
>>125
テキストノード操作すればチェックする必要がない
故にチェックミスも発生しない

129:Name_Not_Found
14/11/09 18:42:15.67 .net
>>125
テキストノード操作すればチェックする必要もない

130:Name_Not_Found
14/11/09 18:57:48.22 .net
innerHTMLはXSSが問題だと言っている人は、innerHTMLを使ってはいけないっていう主張なの？

131:Name_Not_Found
14/11/09 19:00:47.42 .net
遅くてDOMを壊す恐れがあるものを使う必要はない

132:Name_Not_Found
14/11/09 19:02:03.30 .net
ふーんじゃあjQueryも使わないんだね

133:Name_Not_Found
14/11/09 19:06:20.18 .net
jQueryを立てにして逃げんなよ
お前の言葉で反論どうぞチキン

134:Name_Not_Found
14/11/09 19:09:48.39 .net
jQueryは使わないって言えばいいだけなのに、なんで煽るんだろうね

135:Name_Not_Found
14/11/09 19:17:04.33 .net
自分の言葉で考えたことを述べましょう

136:Name_Not_Found
14/11/09 19:26:48.72 .net
例えば elm に <p id="a" class="b" style="color:red;">test<b>test</b>test</p> を入れたいと思ったらどうします？
innerHTML なら一行で済みます。十分大きな利点です
このコードも innerHTML を使わずに書くというのなら、私の負けです。毎日仏壇に掲げて尊敬します

次ページ