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

1 ：11/11/16 〜 最終レス ：11/12/09

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/

2 ：

■前スレ
+ JavaScript の質問用スレッド vol.90 + (名前間違い:本来はvol.92)
http://hibari.2ch.net/test/read.cgi/hp/1319633963/
■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
http://wing2.jp/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
■関連スレ
ECMAScript デス 3
http://hibari.2ch.net/test/read.cgi/tech/1190160481/
Ajaxでも語りませんか Rigel4
http://hibari.2ch.net/test/read.cgi/php/1166751613/
【誰か】jQueryのここがわからない【助けて】
http://hibari.2ch.net/test/read.cgi/tech/1229881548/
1行javascriptプログラミング
http://hibari.2ch.net/test/read.cgi/hp/1066750037/
WSH(・∀・)ｽﾚｯﾄﾞ! Part 4
http://hibari.2ch.net/test/read.cgi/tech/1243095768/
Webサイト制作初心者用質問スレ part226
http://hibari.2ch.net/test/read.cgi/hp/1317832246/
CSS初心者スレッド＝10th＝
http://hibari.2ch.net/test/read.cgi/hp/1306489752/
役に立つ書籍は？　4冊目
http://hibari.2ch.net/test/read.cgi/hp/1172823674/

3 ：

■主要FAQ (全部は http://fiddle.jshell.net/vSqKr/26/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 ：

■各種仕様
Standard ECMA-262
http://www.ecma-international.org/publications/standards/ECMA-262.HTM
ECMAScript 3
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ (和訳)
ECMAScript 5.1
http://es5.github.com/
W3C Document Object Model Technical Reports
http://www.w3.org/DOM/DOMTR
JavaScript 1.5 ガイド / リファレンス (Netscape/Mozilla)
http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Guide (和訳)
http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Reference (和訳)
JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html
http://jsgt.org/ajax/ref/test/json/test1.htm
Mozilla Gecko DOM Reference, Netscape devedge
http://developer.mozilla.org/ja/docs/Gecko_DOM_Reference (和訳)
http://devedge-temp.mozilla.org/central/javascript/index_en.html
MSDN Library JScript / DHTML (現在日本語版は古杉)
http://msdn.microsoft.com/ja-jp/library/z688wt03%28VS.80%29.aspx
http://msdn.microsoft.com/ja-jp/library/cc409720.aspx

5 ：

このスレは93ではなく、本来なら92です。
次スレが93です。

6 ：

げげっ! 番号間違えましたか。すみません。すみません。すみません。
前スレが91だったの?

7 ：

あやまってもゆるさない

8 ：

92で立てるスレが90として立ったから93で問題ない

9 ：

前スレは91予定が90として立ったんだよ

10 ：

http://hibari.2ch.net/test/read.cgi/hp/1319633963/n5
これの解釈次第

11 ：

93スレ目だからこのままでいい
いちいち騒ぐことかねぇ

12 ：

解釈というか前スレより前までは正しいナンバリングだったみたいだから
だとするとこのスレは92

13 ：

92と思う人が立て直せばいいんじゃない？

14 ：

誰も立て直せとは言ってなくね
次のためにこのスレは本来は何番なのか確定しておきたいだけで

15 ：

次も間違える予感

16 ：

javascript:document.body.appendChild(document.createTextNode(document.title))
↑これは動くんですが
↓これが動きません。
javascript:document.body.prependChild(document.createTextNode(document.title))
先頭に追加するにはどうすればできるのか教えて下さい。

17 ：

insertBefore つかえばいいんじゃね。

18 ：

document.body.insertBefore(document.createTextNode(document.title),document.body.firstChild);
できました。どうも。

19 ：

twitterからjsonを取得したいのですがstatusが0になって取得できません。ローカルのファイルは取得できます。twitterからjsonする方法をご指導お願いします
var xhr;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
try {
xhr = new ActiveXObject('MSXML2.XMLHTTP.6.0');
} catch (e) {
try {
xhr = new ActiveXObject('MSXML2.XMLHTTP.3.0');
} catch (e) {
try {
xhr = new ActiveXObject('MSXML2.XMLHTTP');
} catch (e) {
alert("ActiveXを有効にしてください");
}
}
}
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert("status = " + xhr.status);
}
}
}
xhr.open("GET","http://search.twitter.com/search.json?q=%40%E3%83%86%E3%83%AC%E3%83%93&callback=?",true);
xhr.send();

20 ：

あきらメロン

21 ：

>>19
クロスドメイン？

22 ：

はてなブックマークボタンについて質問があります。
あれってURLとタイトルを指定せずにボタン作成した場合って、
ツイッターとかみたいに、そのページのURLとタイトルを登録する仕様になってますか？

23 ：

(ﾟДﾟ；≡；ﾟдﾟ)え？ｺｺﾊﾄﾞｺ？

24 ：

>>19
XHRじゃなくJSONPでやった方が楽だと思う

25 ：

XDomainRequest

26 ：

scriptタグを使うやり方で解決しました
>>24
JSONPでやる方法というのはどういうのですか？
XDomainRequestはChromeで動きませんでした。

27 ：

XDomainRequestはIEのXHRの不備を補うもので、勝手にクロスドメインリクエストできるオブジェクトじゃないよ

28 ：

>>26
その解決したっていうscriptタグでやる方法がJSONPと呼ばれるもの
callbackに何かしら指定したんでしょ？

29 ：

Chrome なら XML HttpRequest Level 2 を使えるはず

30 ：

XMLHttpRequest Level 2やXDomainRequestでドメインを跨いだリクエストを投げることはできるけど、
レスポンスを受け取るにはレスポンスを返す側(この場合だとTwitter)がAccess-Control-Allow-Originってヘッダを
適切に指定していないと無理。
よくわからないのに適当に答えてるのかね

31 ：

前スレ>>999
>$記号だけ除外された経緯
ES2で機械生成識別子の目印という意味を与えられた
RegExp.$1みたいに自動変更されるから勝手に触んなっての
ぐぐるのコンプレッサはドットを$に変換して速度を稼いでたな
しかしドシロウトどもが嬉々として$を使いはじめて収拾つかなくなった
いまどきRegExp.$1を使うアホもいないだろうってんでES5で$は自由になった
だがな、"use strict"なんてバカみたいな文字列より
$use_strict=trueのように$をエンジン制御変数に使えたほうがよかった
どうせそのうち、@だの似たような文字を導入すんだろうから
$をそのまま使えりゃよかったんだ

32 ：

RegExp.$1使ってるけどJQueryと一緒に使うとまずいの?

33 ：

いっそ変数をわかりやすくするためphpみたいに先頭に$つけて使えば便利じゃね

34 ：

>>32
非推奨になったんだよ、それ
https://developer.mozilla.org/ja/JavaScript/Reference/Deprecated_Features
RegExp.prototype.execかString.prototype.match使えってこと
execとmatchはgオプションが有効なときの挙動が違うのに注意な

35 ：

$は機械的に生成されるコードにのみ許される文字だったはず(ES3)
ES3からES5への変遷で仕様が変わったのは上の人のいう通り
jQueryやprototype.jsの影響か人が書くコードにも許されるようになったが、本来は後でそれが上書きされてもいい変数として定義される

36 ：

select()で選択されたtextareaやinput type=textが選択されているか調べる方法がわかりません
Rangeなどを使った方法はあるようですが、選択に比べてやけに難しいような・・・

37 ：

JSONPでコールバックで帰ってきたときのイベントをaddEventListenerで取得する方法はないですか？

38 ：

>>36
onfocus

39 ：

質問です
ローカルストレージにkeyが数字だったり文字だったりする多重配列を記憶及び取り出しする方法を教えてください。
どうやらブラウザ毎で挙動がちがうようなので、共通でできる方法を教えてください。お願いします。

40 ：

>>39
http://dev.screw-axis.com/doc/chrome_extensions/tips/localstorage/

41 ：

JSON使うのはいいんだけど、Prototype.jsの1.6？が使われてて
かつfirefoxのバージョンが3.6とかだと悲惨な事になるはず・・・
Operaとかでも発生したような気がするが忘れた

42 ：

>>34
さんくす!

43 ：

同僚「休日なにしてた？」
オレ「JS(Javascritpt)の勉強してた」
同僚「女子小学生(JS)の勉強とかロリコンかよwwwキメーwww」
こんな感じの同僚はおまいらの周りにいる？

44 ：

同僚「休日なにしてた？」
オレ「ES(ECMAScritpt)の勉強してた」
同僚「ES細胞の勉強とかロリコンかよwwwキメーwww」

45 ：

JSはまだしもESとは言わんだろ・・・

46 ：

就活でJavascritptをがんばって勉強したアピールしたいのですが
どういえば言えばいいですか？

47 ：

自分で作った作品持っていけ

48 ：

カヤックのHTMLテスト受けて点数これぐらいでましたもありかもしれん（Web屋限定でｗ

49 ：

拡張子がesだから言うんでない？

50 ：

今時javascriptだけアピールされてもねｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

51 ：

<div>
<span><b>１</b></span>
<span><b>２</b></span>
<span><b>３</b></span>
</div>
htmlの中にこういう構造のタグがあるとします
spanに挟まっているbタグを全てobjに格納したいのですが
var obj = document.getElementsByTagName('span').getElementsByTagName('b');
alert(obj.length); // 3って表示して欲しいのにエラーになります
求めたいことは仮にhtmlが上のだけだとして
var obj = document.getElementsByTagName('b');
alert(obj);// 3
の結果です
htmlはいじれません
どのようにしてオブジェクトをとることができますか？

52 ：

getElementsByTagNameは配列を返すからとかじゃね

53 ：

querySelectorAllでも使えば

54 ：

>>51
<div>
<span><b>hoge</b></span>
<span><b>fuga</b></span>
<span><b>piyo</b></span>
</div>
<script>
window.onload = function() {
var obj = document.getElementsByTagName('span')[0].getElementsByTagName('b');
alert(obj.length); // 1
alert(obj[0].innerHTML); // hoge
var obj2 = document.querySelectorAll('span > b');
alert(obj2.length); // 3
alert(obj2[0].innerHTML); // hoge
alert(obj2[1].innerHTML); // fuga
alert(obj2[2].innerHTML); // piyo
};
</script>

55 ：

>>51
forループ使ってb要素を集めるとか

56 ：

>>51
オレも考えたぜ
<body>
<div>
<span><b>1</b></span>
<span><b>2</b></span>
<span><b>3</b></span>
<span><b>4</b></span>
</div>
<script type="text/javascript">
var obj=document.getElementsByTagName('span'),t=0;
for(var i=0;i<obj.length;i++){
for(var s=0;s<obj.length;s++){
if(obj[i].childNodes[s]){t++;}
}
}
alert("<b>タブの数="+t);//t=4となる
</script>
</body>
しかし、何でかalert(obj.childNodes.length);でエラーなんだよな
何でなんだ？

57 ：

>>56
getElementsByTagNameで返されるのはNodeListだから。
childNodesはNodeに属するプロパティ。
childNodesはNodeListとして構成される。
なのでobj.lengthは通る。
こういった場合の解決方法は>>53-54で使われているquerySelectorAllか
document.evaluateを使ったXPathを使った方法かになるんじゃないかな。
どのバージョンまでサポートされてるかは忘れたけど、
document.evaluateはIEでの対応が微妙だったはず。

58 ：

>>57
なんかオレの知らない方法だな、イジッテたら分かったが、
obj[0].childNodes.lengthで1個目のspanの子ノードの数が取得
できるって分かったから、obj[i].childNodes.lengthで
iを0からobj.lengthの値までforで回すと子ノード<b>タブの数
が計算できるな、二重にforを使う必要がなかったな。
<body>
<div>
<span><b>1</b><b>1</b</span>
<span><b>2</b></span>
<span><b>3</b></span>
<span><b>4</b></span>
</div>
<script type="text/javascript">
var obj=document.getElementsByTagName('span'),t=0;
for(var i=0;i<obj.length;i++){
t=t+obj[i].childNodes.length;
}
alert("<b>タブの数="+t);//t=5と出る
</script>
</body>

59 ：

こんな偉そうな初心者も珍しいで

60 ：

>>58
それはspanの中にb以外が入った時に間違った結果になるでしょ

61 ：

っていうか、>>51が欲しいのはbタグの数じゃなくて、bタグの要素のリストだぞ。
3って表示して欲しいのに　とは書いてあるが。

62 ：

Ajaxで書き換えた後の中に記述してあるjavascriptが動作しないのは仕様ですか？

63 ：

いいえ

64 ：

>>63
Ajaxで書き換えた後の中にある
<a href="javascript:document.form.submit()">
の部分をクリックすると
document.form.submit is not a function
と出てきます。
フォームの中にsubmitの単語が他に含まれていた場合もこうなるみたいですが今回はそのエラーではありません。
ちなみにAjaxの書き換えに使用するphpファイルは
直接開いてみたところエラーが出ずにちゃんと飛んだのでAjaxに使用した場合うまく動作しません。

65 ：

javascriptスキーマとかどこの原始人だよ

66 ：

document.formってなんだよ
document.getElementById('form')のこと？

67 ：

アコーディオンメニューをjQueryのslideDownとslideUpを使って
作成したのですが、slideDownで下がりslideUpで上がるアニメーション
のときにアコーディオンメニューとアコーディオンメニューの下に書いた
文字がブレるような挙動をするのですが、仕様なんですか？

68 ：

jQueryの記述に変えたところなんとかできました。
>>65
ダメなの？ｗ

69 ：

>>68
せめて document.forms['form'].submit(); にして
> ダメなの？ｗ
リンクではないからa要素である必要性はないでしょ？
http://www.yomotsu.net/wp/?p=591

70 ：

>>64
IEだとDOMで動的に生成した要素にonclick=javascript:〜などは使えないです。

71 ：

>>70
いやいや、onclick="javascript:*" は全然意味が違うでしょう
ラベルじゃないですか

72 ：

>>71
a href=〜でも同じだったとおもう。
回避策はあったけど今すぐは思い出せない。

73 ：

>>72
IE8 で再現できません
http://jsfiddle.net/u8ygk/
setAttribute のバグを混同して記憶しているのでは？
http://www.tagindex.com/kakolog/q4bbs/2201/2582.html

74 ：

回避策ですが・・・
送信するform要素に id="form"、追加されるa要素に id="formLink"
を設定しているとして、以下のコード書いたらいけるとおもうよ。
var fromSubmit = function(){
document.getElementById( 'form' ).submit();
}
var formSubmitLink = document.getElementById( 'formLink' );
formSubmitLink.onclick = fromSubmit;
>>73
はまったのは、IE6-7だったかも。

75 ：

>>74
情報を小出しにしないでください
setAttribute のバグなら IE8 で解消されたことは理解してますし、>>73は IE6-7 でも動作するように書いています(環境がないので試してませんが)
http://fiddle.jshell.net/vSqKr/26/show/#Q13
あなたの環境では動作しないのでしょうか？
onclickにjavascriptラベルを適用する意味は全くありません
私の知る限りでは、element.onclick なり attachEvent なりを使えば IE6-7 でも適用できるはずです

76 ：

>>75
すみませんね、引っ込みますよ。

77 ：

> >>73は IE6-7 でも動作するように書いています(環境がないので試してませんが)
失礼。コンソールが使えないのでアドオンなしの IE6-7 ではエラーになりますね。
alert() に変更しました。
http://jsfiddle.net/u8ygk/1/

78 ：

別に引っ込まなくてもよかったんじゃないの
IEで動作するか確かめるだけだし

79 ：

今回のバグとは関係ないだろうけど、<a onclick="javascript:alert(true)"> とラベルの件は過去ログでも話題になってた気がする

80 ：

var a = document.createElement('a');
a.setAttribute('onclick', 'javascript:alert(true)'); // 結局、こういうことだったの？

81 ：

jqueryかその他のじjavascriptで以下のことをできるソースを探しています。
ご存知のかたがいましたら教えていただけないでしょうか？
formで画像のサブネームを選択したかを判定したいのですが、formのチェックボックスをつけるのではなく、画像をクリックしたときに、
画像の色を変えるもしくは、画像に枠線などをつけてON/OFFを判定するような感じにしたいです。

82 ：

>>81
画像ごとに<input type="hidden">つくって、それをいじるようにするのは？
または、imgのON/OFFでクラス使うなら、クラスで判定してもいいだろうし

83 ：

>>81
<img src="sample.jpg" aria-selected="true">

84 ：

>>82,83
ありがとうございます。
なるほど、チェックボックスかくして、自作したほうが簡単そうですね（＾＾　

85 ：

Twitterのページを開きっぱなしにすると新しいツイートを自動で確認してくれますが
あれはどうやってるのですか？
確認するたびにJSONPでscriptタグを作ってるのですか？

86 ：

>>85
setIntervalとかじゃね？

87 ：

>>85
定期的に ttp://api.twitter.com/1/statuses/home_timeline.json をXHRで読み込んでいる

88 ：

>>86-87
ありがとうございます

89 ：

<text:sample>
<string>サンプル</string>
</text:sample>
上記のようなコロンを含む要素をRSSやXMLで見かけますが
:sampleがついたtext要素を取得する場合は何を使えば良いのですか？

90 ：

:sampleがついたtext要素じゃなくてtext:がついたsample要素じゃないのかい

91 ：

getElementsByTagNameNS

92 ：

え？
textが要素で
:sampleは名前空間じゃありませんでしたか？

93 ：

<text:sample>サンプル</text:sample>と書き換えてて
var obj = document.getElementsByTagNameNS('sample', 'text');
alert(obj.innerHTML);
としてみましたがundefinedになりました

94 ：

getElementsByTagNameNS(text:に結び付けられているURI, 'sample')

95 ：

アプリ共通のスクリプトとして以下のように書くことが多かったんですが
var fooNode = document.getElementById("foo");
if (fooNode) { ... }
jqueryではどう書きますか？
var fooNode = $("#foo");
とすると要素がない場合には空配列が返るので
if (fooNode.length) { ... }
と書けますが、なんか変な感じでしっくりきません。
いいのかな？

96 ：

>>95
問題ありません。
length はjQueryオブジェクトの数をあらわします。
http://api.jquery.com/length/

97 ：

>>96
ありがとうございます！

98 ：

jqueryは $(セレクタ.操作1().操作2()… って書けるのが醍醐味だからね。
選択できなかったからってnullなどを返すのはまずいわけだな。
0個の選択という状態にしておいて、操作の所ではなにもしないって感じになっている。
.isEmpty()ぐらいあっても良かったかもしれんが…
$.fn.isEmpty = function() {
return this.length <= 0;
};
拡張するならこうか。

99 ：

querySelectorAllみたいなもんだからあれでいいんだよ

100read 1read

1read 100read

TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
・　次のスレ
5: ▼△無料URL転送スレット▼△ (336)
6: 【SEO】Google対策 パート9【Google】 (564)
7: FC2ホームページが重すぎる (132)
8: いまどきのSEO対策 (229)