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

1 ：12/01/01 〜 最終レス ：Over

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.93 +
http://toro.2ch.net/test/read.cgi/hp/1323498887/
■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
http://wing2.jp/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
■関連スレ
ECMAScript デス 3
http://toro.2ch.net/test/read.cgi/tech/1190160481/
Ajaxでも語りませんか Rigel4
http://kohada.2ch.net/test/read.cgi/php/1166751613/
1行javascriptプログラミング
http://toro.2ch.net/test/read.cgi/hp/1066750037/
WSH(・∀・)ｽﾚｯﾄﾞ! Part 4
http://toro.2ch.net/test/read.cgi/tech/1243095768/
Webサイト制作初心者用質問スレ part227
http://toro.2ch.net/test/read.cgi/hp/1322905086/
CSS初心者スレッド＝10th＝
http://toro.2ch.net/test/read.cgi/hp/1306489752/

3 ：

■主要FAQ (全部は http://fiddle.jshell.net/vSqKr/27/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)
https://developer.mozilla.org/ja/JavaScript/Guide
https://developer.mozilla.org/ja/JavaScript/Reference
JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html
Gecko DOM Reference
https://developer.mozilla.org/ja/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 ：

　　　　　　　　　*、　*、　　　　　　｡*ﾟ　　　 *-+。・+。-*｡+｡*
　　　　　　　　／ ﾟ+、　ﾟ+、　　　*ﾟ　・ﾟ　　　 ＼　 　 　 　。*ﾟ
　　　　　　　∩　 　 *。　 *。　　　　+ﾟ　　　　∩　　　 *
　　　(´･ω･`)　　　 　 +｡ 　 +｡　　　ﾟ*　　　 　(´･ω･`)
　　　と　　　ﾉ　　　 　 *ﾟ　 *ﾟ　　　　・　　　　 。ヽ、　 つ
　　　　と、ノ　　　　 ・ﾟ　 ・ﾟ　　　　　+ﾟ　　　　*　　ヽ、 ⊃
　　　　 ~∪　　　　*ﾟ　 *ﾟ　　　　　　*　　　 +ﾟ　　　 ∪~　　　☆
　　　　　　　　　 +′ +′　　　　　　+ﾟ　　　ﾟ+｡*。・+。-*｡+。*ﾟ

6 ：

>>4
何でわざわざMDSNの古いページはってんだお２００５はふるいだろ
http://msdn.microsoft.com/ja-jp/library/z688wt03(v=VS.100).aspx

7 ：

>>6
ありがとう、次のテンプレでは（忘れてなければ）直すようにする。だからテンプレ論議の
ときに指摘してくれると助かるんだけどね。

8 ：

>>6
デコードしたURI貼るなよ
http://msdn.microsoft.com/ja-jp/library/z688wt03%28v=VS.100%29.aspx
あと http://msdn.microsoft.com/ja-jp/library/z688wt03.aspx じゃ駄目なの？

9 ：

スレ建て乙です
明けましておめでとう
っていうかテスト

10 ：

前スレ987
土吉は旧字じゃないよ。

11 ：

>>10
これは失礼しました
ご指摘ありがとうございます

12 ：

ここはまともになりたってるスレだよな
某CMSスレと某データベーススレはキチガイばっかりで荒れ気味なのに

13 ：

人が多く集まるスレってキチガイ率が低い理由
年齢層が高いから
だな

14 ：

老害の声が小さいからだろ

15 ：

繰り返しで連番の画像を扱うことってできますか？
for (var m = 0; m < 36; m+=4) {
pai[m][0]=m/4+1;
pai[m][1]="sou(m/4+1).gif";
pai[m+1][0]=m/4+1;
pai[m+1][1]="sou(m/4+1).gif";
pai[m+2][0]=m/4+1;
pai[m+2][1]="sou(m/4+1).gif";
pai[m+3][0]=m/4+1;
pai[m+3][1]="sou(m/4+1).gif";
}
こういう風な感じにしたいのですが、当然上手くいきません。
分かる方いらっしゃいましたら、教えてください。

16 ：

pai[m][1] = "sou" + (m/4+1) + ".gif"

17 ：

>>16
ありがとうございました。うまくいきました。

18 ：

>>17
まだ質問しないといけないレベルに達してない

19 ：

まぁこっちのほうがより良い
pai[m][1] = 'sou' + (m/4+1) + '.gif';

20 ：

皆文字列リテラル”と’どっちメインで使ってるの？
俺は昔はhtmlの属性値に”、JSに’を使ってたがhtmlよりJSの方が
長いコードを書くようになって今では見やすい”の方をJSで使ってる
htmlとJSでわけてるのはよくタグをinnerHTMLで書き出してた昔の頃の名残
少なくとも’よりは”をメインで使うべきだと思う
現実の文法的には’の方が微妙にやや正式だけど

21 ：

>>20
" の方が見やすいというのはあなたの好みだよね。漏れは ' の方が見やすいと感じる。
C/C++/Java では ' は１文字のリテラルになってるし、Perl等では ' だと中身が展開
されなかったりするのでしかたなく ” を使うけど。好み以外の論点があるのならぜひ聴きたい。

22 ：

ちょっとテスト
x=''　　　　　x=""
x='abc'　　　　　x="abc"
1+''+x+'abc'　　　　　1+""+x+"abc"
'<a id="x">'　　　　　"<a id='x'>"

23 ：

>>21
''中に""があると数学でいうと小括弧の中に中括弧があるように見えて気持ち悪い
perlの影響かもしれないけど"より'の方が固定的な感じがしてリテラル内に例えばhtml要素を埋め込む場合直感的でいい
それに''は場合によっては"みたいに潰れるし"の方がより目立つからいいだろう
""だと文字列だぞ！って感じだが''だと味気ない感じがする

24 ：

キーボード的には " の方が押しやすい。

25 ：

好きにしろよｗ

26 ：

いやダメだ
ここから300レスくらいかけて徹底的に議論して白黒付けないとイカン

27 ：

PHPは二重引用符だと変数名が展開されるから、それに合わせてJavaScriptを単引用符で統一してる
でもJavaScriptはエスケープシーケンスを理解するから、二重引用符の方が良いかもしれないとも思う
JSONも二重引用符だし
あと>>24だし

28 ：

"とか'を入力するのはエディタの仕事

29 ：

'"'.charCodeAt() //34
"'".charCodeAt() //39

30 ：

エスケープシーケンスを理解しない言語なんてあったかな？
""""なんて無様なのも一応その一種だしな。

31 ：

一番目のリンクを無効化するスクリプトを書きたいのですが
link=document.links;link[0].disabled=true;
っとやっても無効化できません
リンクの場合はdisabledは効かないのですか？
無効と有効化を切り替えたいのでhrefは消したくないんですがhrefを消す以外に方法はないのですか？

32 ：

link=document.links;
link[0].parentNode.replaceChild(document.createTextNode("disabled"),link[0]);

33 ：

>>31
document.links[0].onclick = function(){return false;}

34 ：

>>32で解決しましたが>>33もいいですね
ありがとうございました

35 ：

>>32
無効と有効を切り替えられなくなるのでそれは厳しいです
>>33
リンクをクリックしても飛ばせないようにしたいのではなく、リンクを無効にしたいのです
リンクの文字を選択範囲してコピーしたいのでリンクを一時的にはずしたいんですがstyle要素みたいにdisabledで切り替えられないんですかね

36 ：

やっぱり検索しても無理っぽいですね
無効化するときはhrefをけして
有効にするときはリンクのhrefの属性値を配列に入れて戻すしかないですね
質問を締めます

37 ：

１つの関数に複数のfor文を使う場合、そのループ変数を全てiにすると、
何か支障はありますか。
同一のものにした場合、うまく行くときと、うまくいかないときとがあるので
混乱しています。

38 ：

>>34,36は私じゃありません成り済ましです

39 ：

>>37
ネストしてある場合は大問題だが
そうでなければ初期化をきちんとやれば通常問題ない
>>38
ageればID出る

40 ：

>>37
うまくいくときのコードとうまくいかないときのコードを比較すれば自ずと答えが出てくる

41 ：

>>36
リンクカーソルが邪魔ってこと？これならどうよ
document.links[0].disabled = true;
document.links[0].style.cursor = "default";
document.links[0].onclick = function(){return false;}

42 ：

>41
そもそもlink.disabledは一部のブラウザでしか使えないから良くないよ

43 ：

>>39,40
ありがとうございます。勉強になります。

44 ：

>>41
chromeのコンソールで試してみましたが無効になりませんでした
>>42
ttp://east.portland.ne.jp/~sigekazu/css/javascript3.htmをみて
a要素でdisabledすると強制終了すると書いてあったのでdisabledは厳しいですよね
それかreplaceでhref=""の部分を<!-- href="" -->に直したりも考えました
これは仕様的にいいのかわかりませんが

45 ：

>>44
上から透明か半透明の画像被せればＯＫよ

46 ：

始めてみようかと思うんだけど
この言語って求人ある？
VBはもうやったんだけど先にjavaやったほうがいいのか？

47 ：

VBよりはやった方がいいんじゃね

48 ：

JavaScript はそんな不純な動機で始めるもんじゃないｙｏ！

49 ：

>>44
hrefを別の適当なAttr.に変えるとか、aタグをspanタグに変えるとかでよさそう

50 ：

コピペしたときのURI情報が邪魔ってことじゃないの

51 ：

JavaScriptで使える非同期系のAPIって大きく分けて
昔からある
O.onSuccess=successCallBack
O.func()
と比較的最近の
O.func(successCallBack)
の２つのタイプがあってややこしいんだけど統一しないのかな
個人的にはどちらも良さがあると思うんだけど

52 ：

マジこのペースでどんどんAPIが増えてったら
仮にブラウザ間の仕様さが０になっても
覚えて使いこなしきれるかは微妙
そういえばWEBGLって結局どうなるの？
もう他の対抗APIとかは金輪際でなくて
WEBGL一本でしばらくいくことは決まったの？
それなら覚えるんだけど

53 ：

そこでライブラリの乱立ですよ。
そしてライブラリの使い方しか知らない人間が量産されていく…

54 ：

ライブラリ使う人が困るんならまあそれは仕方ないと思うけど
５年後くらいに昔のJavaScriptはわかりやすくてよかった
今はライブラリ覚えないとやっていけないってなりそうで怖いわー

55 ：

>>49
spanだと戻すとき大変だから、適当なタグ名にするのがいいんじゃないかな。
document.links[0].outerHTML = document.links[0].outerHTML.replace(/^<[aA]/, '<aback').replace(/<\/[aA]>$/, '</aback');
こんな感じかな

56 ：

>>54
結局、同じロジックを何度も書くことに疲れ果てライブラリに辿り着き、皆が同じ様なコードを書く。
これはどの言語でも共通の進化の過程。
しかし、最初からライブラリに頼ってきた小わっぱ達とは地力が違う為、コーディングの姿勢に漂う大人の余裕。
いざ困難に直面しても、涙目の小わっぱを尻目に多彩なテクニックを駆使して解決策を導く職人技。
そして仕様を知り尽くした上で完璧なチューニングを施し、パフォーマンスで他を圧倒するダンディズム。
このスレの回答者なら様々な面で格の違いが滲み出る。
ただし、>>55 は精進が必要な様だが。

57 ：

今まで出てきた中では>>45の案がベスト
だけど正直全部微妙

58 ：

>>57
透明画像かぶせたら下にあるテキストのコピペはできないんじゃないの。

59 ：

bookmarkletとかで、印刷用ページみたいにしたいってことかな。

60 ：

「リンクの文字を選択範囲してコピーしたい」(>>35)のであればcontentEditableでいいのでは

61 ：

>>58
質問を良く見てなかった
一応コピペは画像の直前から引っ張ればできるが
質問者は一体何がしたいのかわからん
コピペなら別にリンク無効にしなくてもできるだろ

62 ：

<a href="#">aaaaaaaaaaaaaaaaaaa@aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
全てをコピーする必要がないからリンクを解除したいってことだろうよ
@だけをコピーしたい時にリンクついてると選択範囲しても@をコピーできないしな

63 ：

いやいや本当にフツーにできるんだけど

64 ：

Operaは素晴らしい

65 ：

それとも俺が『選択範囲』について勘違いしてる？
フツーにクリックおしっぱで動かして反転させるアレだよね？
リンクだとできないなんてことありえるの？

66 ：

>>65
不器用なおっさんに<a>要素の一部を、リンクが発火しないように
範囲選択しろってのは難しい
UI作るときは、自分基準で考えると色々失敗することが多い気がする

67 ：

>>66
例えば、Firefox でリンクの一部をマウス操作で選択してみせてくれ。

68 ：

>>65
IE,Firefox,Chromeで確認したけど出来なかった
safariとoperaとか他のブラウザなら出来るの？
リンクの文字列の端から選択するなら分かるが
文字列の中を切り抜くような範囲選択はできないと思うが

69 ：

つうかそれらのブラウザじゃできなかったのか
恥ずかしい今まで知らなかなかったわ…
それってリンクが発火するからできないんじゃなくて仕様としてできないの？

70 ：

出来るけどちょっと難しいんだよ。ぎりぎり発火しない部分から選択するんだよ。

71 ：

FireFoxならF7で…マウスでは無理だけど。

72 ：

スタイルでblockされてるのに出来るわけないじゃん

73 ：

わかった
じゃあ右クリック時にpromptでも出してコピペさせたらいいんじゃないかな
それか<span>で擬似リンク作るか

74 ：

(ﾟ-ﾟ)ﾌﾑﾌﾑ
(ﾟ.ﾟ)
(ﾟ_ﾟ)

75 ：

>>69
リンクをドラッグアンドドロップしちゃうからな。
operaならプレスしたあと上下のドラッグのみそうなるけど。

76 ：

>>75
キャンセルできないの？

77 ：

>>76
落とせない所で離すとか、ESCキー押すことでキャンセルできるけど。

78 ：

いやJavaScriptでイベントキャンセルできないの？
HTMLでドラッグイベントできたじゃん

79 ：

>>78
なるほど。
ちょいとchromeでやってみたけど、ドラッグアンドドロップは阻止できたけど、
テキスト選択できないね。
やり方がまずいのかもしれんけど。
ESCキー押して中止したと同じ状態になる感じか?

80 ：

firefoxでは選択出来たけど、IEではできない
<html>
<body>
<a href="http://" id ="test">ほにゃらら</a>
<script type="text/javascript">
document.onload = init();
function init(){
elem = document.getElementById('test');
elem.onclick =function(){return false;}
if(elem.addEventListener) {
elem.addEventListener('mousedown', drag, false);
} else if(elem.attachEvent) {
elem.attachEvent('onmousedown', drag);
}
function drag(){elem.setAttribute('draggable', 'false');}
}
</script>
</body>
</html>

81 ：

マヌケな循環参照するくらいならAlt押しながら選択しとけ

82 ：

は？elem が Global になってるから問題ないがｗ

83 ：

> Alt押しながら選択
横からだけど
これどのタイミングでAlt離すの？
先にAltを離すとリンククリックになるし先にマウスのボタンを離すと名前を付けて保存になる

84 ：

>>80
chromeもだめみたいだね。
>>82
ほっとけって。

85 ：

>>83
プレスしたままALTをはなして、CTRL+C、んで、リンクじゃない所で離す。

86 ：

>>85
できた
ありがとう
難易度高い

87 ：

そんなブラウザ依存の話されても困るわ

88 ：

>>80
FireFoxができるのは
> elem.setAttribute('draggable', 'false')
これのおかげか。
mousedownはす必要ないね。
うちのテストコード似たようなのになんでFireFoxで選択できないのか悩んでしまった。

89 ：

>>61-67
>>50じゃないの？
あとIEもFirefoxもOperaもChromeも>>70で出来る

90 ：

>>89
<ul>
<li><a href="">**************</a></li>
<li><a href="">*******@******</a></li>
<li><a href="">**************</a></li>
</ul>
こーいうので @ だけ選択するとかは…出来る?

91 ：

>>90
chromeだけ出来ねえ！

92 ：

>>90-91
chromeでも@の右上から出来るよ。馬鹿らしいがｗ

93 ：

おまえらこんなどーでもいいことで楽しそうだなｗ

94 ：

どーでもいいかどうかは自分で決める

95 ：

2chの専ブラのレス番表示のように
Tooltipを表示してjQueryを探しているのですが
こういう質問もこのスレはOKでしょうか？
具体的には以下の動作の物を探しています。
要素Aにマウスオーバーで要素Aと接する形でツールチップを表示
→ツールチップ上にマウスが移動すれば表示継続
→要素Aとツールチップ上以外にマウスが移動すれば非表示

96 ：

見つからなかったので自分で書こうとしたのですが、
$("#要素A").hover(
function () { /* ツールチップを表示 */ },
function () { /* ツールチップを非表示 */ }
);
$("#ツールチップ").hover(
function () { /* ツールチップを表示 */ },
function () { /* ツールチップを非表示 */ }
}
と書くと「要素Aを非表示」の方が優先されツールチップが消えてしまいます。
このように2つの要素同時にhoverの状態を調べる方法がわからず断念しています。

97 ：

コードは汚くなるけどフラグ立てるのが一番楽
あとは消すのは即時、表示はほんの少し遅延かければ
だいたいのケースで表消の競合を避けれて綺麗に書けそう

98 ：

>>89
嘘付け
それFirefoxに搭載されたモードだろうが
IEとChromeにはそういう機能はないから出来ない

99 ：

リンクをドラッグしちゃうからできないってことですか？

100read 1read

1read 100read

TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
・　次のスレ
10: IDにWeb/Web関連拡張子を出すスレ 41 (347)
12: Webサイト制作初心者用質問スレ part227 (442)
13: ポケスペでサイトを作ってる人 (641)
14: サイト作るの楽しいね(*´･ω･)(･ω･｀*)ﾈｰ Part2 (403)