1read 100read
2012年6月Web制作5: + JavaScript の質問用スレッド vol.101 + (778) TOP カテ一覧 スレ一覧 2ch元 削除依頼
好きな色をカラーコードで書け (347)
※右クリックブラクラチェッカー※ (859)
YST対策 パート6 (376)
AdobeがMacromediaを34億ドルで買収 (440)
SEOのパワーテクノロジー (682)
ウェブ会社で働く人達の交流スレ part1 (899)

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


1 :12/06/13 〜 最終レス :12/07/05
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.100 +
http://toro.2ch.net/test/read.cgi/hp/1336388253/
■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
http://wing2.jp/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
■テンプレ案
http://jsfiddle.net/fH4cC/10/show/
■関連スレ
ECMAScript デス 4
http://toro.2ch.net/test/read.cgi/tech/1325448978/
【jQuery】JavaScript ライブラリ総合質問所 vol.1
http://toro.2ch.net/test/read.cgi/hp/1327814124/
WSH(・∀・)スレッド! Part 4
http://toro.2ch.net/test/read.cgi/tech/1243095768/ →消失中
【WHATWG】HTML5 Part4【W3C HTML WG】
http://toro.2ch.net/test/read.cgi/hp/1329529892/
Webサイト制作初心者用質問スレ part230
http://toro.2ch.net/test/read.cgi/hp/1339311306/
CSS初心者スレッド=11th=
http://toro.2ch.net/test/read.cgi/hp/1327663847/ →消失中
Canvasについて語ろう
http://toro.2ch.net/test/read.cgi/hp/1305093769/

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 (本家pdf版アーカイブ)
http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm
http://es5.github.com/ (ECMAScript 5.1 有志html版)
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ (ECMAScript 3 和訳)
ECMAScript 5 compatibility table
http://kangax.github.com/es5-compat-table/
HTML Standard (HTML5)
http://www.whatwg.org/html5
http://www.w3.org/TR/html5/
W3C
http://www.w3.org/DOM/DOMTR
http://www.hcn.zaq.ne.jp/___/DOM/DOM4.html (DOM4 和訳)
http://www.w3.org/TR/cssom/
http://www.w3.org/TR/cssom-view/
MDN (Netscape/Mozilla)
https://developer.mozilla.org/ja/docs
netscape devedge (JavaScript)
http://devedge-temp.mozilla.org/central/javascript/index_en.html
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 :
https://twitter.com/#!/〜〜
この#でページ示す方法に名前ってありますか?

6 :
こんな広告見つけたんだがw
http://i.imgur.com/CChJG.png

7 :
>>5
http://d.hatena.ne.jp/karasuyamatengu/20110212/1297465199

8 :
すみません
初心者丸出しの質問ですけどjavascriptで
普通のテキストの内容を変えるためには
リロードするしかないんですか?
たとえばフォームに入力した文字列をテキストボックスじゃななくて
<p></p>のなかに入れたいときは
リロードしてdocument.write()するしかないんでしょうか?
本当に初心者でごめんなさい

9 :
逆にリロードしてできるなら方法を知りたいわ

10 :
innerHTML

11 :
初心者を連呼されると嫌な思い出がよみがえってくるのでできれば避けて欲しいな。

12 :
document.writeだけで入れるのも難しいだろ

13 :
っていうかなんでもいいからJavascript入門書一冊買え。Webサイト見ながらやるよりずっと効率いい
そんでソコで全部学べるわけないから、その本をつかいつつもわからないのがあったあココを活用するのがのぞましい
DOM操作なんて入門中の入門やで

14 :
document.writeからの脱却は脱初心者の第1歩だと思うが、
この1歩って結構難しくない?
要素にid付けてgetElementById→innerHTML、
createTextNode→appendChildなどなどたくさんあるが、
次の1歩はどこに向うのが良いか毎回悩む

15 :
HTMLのみ、下手したらHTMLもいい加減な状態からJavaScriptのdocument.writeが使えるようになれるまで頑張れた奴ならDOMの一部を理解する事などそう難しくはない

16 :
そもそも初心者の時点でdocument.writeを知ってしまうのが間違いだ
どんな糞本や糞サイト見ればそんな知識付くんだ

17 :
去年発行の本を示してた人がいたな

18 :
>>6
大変なことに

19 :
>>15
> 下手したらHTMLもいい加減な
専門学校で教えてるけど、HTML/CSS、JS、flash、PHPのクラスが同時に走るので
ほとんどがそんな感じだわ
HTML/CSSの講義を先に受けることをおすすめしてはいるんだが…

20 :
>>7
どうもー

21 :
jQueryとか使っちゃうと、document.writeとかプレーンな
javascriptでのコーディングに戻れないんだよな。。

22 :
っていうかHTMLでdocument.writeとか使うなよ、アレはhello work的なモンだろ

23 :
>>21
裸のJSを思い浮かべながらjQuery
これならいつでも戻れる

24 :
おまわりさんこの人です

25 :
おさわりの人です

26 :
>>22
そんなことない
使いようはかなりある

27 :
何に使うんだよ

28 :
>>22
http://www.dotup.org/uploda/www.dotup.org3094287.jpg

29 :
あながち間違いでもない

30 :
>27
ページに初めから埋め込まれてるように見せたいインタラクティブじゃない部分に
スクリプトタグ埋め込んでonloadとか要素とか気にせずdocument.writeで出力できるのは便利だろう

31 :
document.writeとか何に使うんだよ

32 :
Hello Worldだろ

33 :
HTMLに直接出力しろと

34 :
クライアント側の日時をその場に出力したいときくらいしか思い浮かばない

35 :
学習用。

36 :
JavaScriptを解読できないゴミロボット回避w

37 :
>>36
結構解読できるようなライブラリってないんだよな。
俺は手動でも解読できないけど。

38 :
回避したんじゃなくて回避されてんじゃね

39 :
コメントフォームやコンタクトインフォならバンザイw

40 :
ソースコードの難読化も
shtml.jpはあっさり解読されたがw

41 :
DOMといえば先日IE 5.0のマック版に触る機会があって
if (document.appendChild){
ほにゃらら
}
って試したらあっさりture吐かれたときはビビった
appendChild動かないのに

42 :
情報科のヤツに「このファイルのどっかでボタンの色変えてるんだけど」
って言われて大手webサイトの200KBのjsファイル渡されたときはもうダメだと思った
ブラウザ有効利用してくれ

43 :
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
  var test1 = $("#test1").text().match(/^半角空白 テスト1$/);
  alert("■test1■\n" + (test1 ? true : false));
  
  var test2 = $("#test2").text().match(/^半角空白 テスト2$/);
  alert("■test2■\n" + (test2 ? true : false));
});
//-->
</script>
</head>
<body>
<span id="test1">半角空白 テスト1</span>
<span id="test2">半角空白&nbsp;テスト2</span> // ←こちらの「&」は「&」として読んでください。
</body>
</html>
------------------------------------------------
HTMLの中に「 」と書いた場合と「&nbsp;」(←こちらの「&」も「&」として読んでください。)
と書いた場合の半角スペースの違いの話なのですが、
test1の方ではtrueになるのですが、
test2の方ではなぜtrueにならないのでしょうか?
 を、jqueryのtext()で出そうとすると、半角スペースが
返らないとしたら何が返されているのでしょうか??

44 :
&nbsp;の文字コードを求めれば解決

45 :
>>43
スペースには数種類あるので
正規表現でのスペースは基本的に\sを使うのが慣わし

46 :
&nbsp;が空白って意味をもつのはHTML上だけだ
それ以外では単なる文字列、それ以上でもそれ以下でもない何の意味も持たないただの「&nbsp;」っていう文字列

47 :
なにその全角
どこのHTML講座だよ

48 :
全角で書けばそのまま表示されるからね。
&を「&amp;」と書けば、&nbsp;と表示できるけど、ちと面倒。

49 :
>&を「&amp;」と書けば、&nbsp;と表示できる
と表示させる為には
>&amp;を「&amp;amp;」と書けば、&amp;nbsp;と表示できる
と書かないといけない。
で、面倒だから全角で&と書く。

50 :
全角スペースで字下げしたコード貼るようなもんだな

51 :
ただの表示テスト
&nbsp;

52 :
>>44-45で答えが出てるのに何の意味もない馬鹿なレスが続いてるな

53 :
わかったわかった

54 :
46が特にどうでもいい

55 :
鏡ネタはあっちのスレでやっとくれ

56 :
セレクターについて質問です
<table id="tbl">
 <tr>
  <td>1</td><td>2</td><td>3</td>
 </tr>
 <tr>
  <td>4</td><td>5</td><td>6</td>
 </tr>
 <tr>
  <td>7</td><td>8</td><td>9</td>
 </tr>
</table>
このようなテーブルがあったとして
var a = [
 [1, 2, 3],
 [4, 5, 6]
 [7, 8, 9]
];
という配列を得たいのですがどうしたらいいでしょうか?
とりあえずここまでやったのですがこのあとどうしたらいいのかわかりません
var tmp = document.querySelectorAll('#tbl tr');
var a = new Array(tmp.length);
for (var i = 0; i < a.length; i++) {
 a[i] = document.querySelectorAll();//セレクターの条件がわからない
}
どなたかお力添え下さい
もっと簡単に出来る方法があったらそれも教えて頂ければ嬉しいです

57 :
jQueryを使えば一瞬

58 :
childNodesとかじゃダメなのか?
CSSセレクター使いたいんだったらjQueryとか使わないと安定しないような

59 :
どんな壁でも迷ったらとりあえずjQueryを検討してみればまず問題ないな。

60 :
ありがとうございます
jQuery見てみます

61 :
覚えて損することはない
たいていのサイトはjQueryを使ってる

62 :
jQueryは確かに便利だが、jQueryに早い段階から慣れてると「Javascriptへの理解」がおろそかになってしまう

63 :
JSだとどうなのか常に意識すればよし
23 名前:Name_Not_Found[sage] 投稿日:2012/06/15(金) 17:40:39.10 ID:???
>>21
裸のJSを思い浮かべながらjQuery
これならいつでも戻れる

64 :
ごめん、俺17歳ぐらいが一番いいと思ってるからJSとかキツイ

65 :
昨日か一昨日、NHKでJSは女子小学生って意味だってまじで紹介しててびっくりした

66 :
援交とかの用語だろ?JK、JC、JSって

67 :
うん、もともとその辺とか児ポとかの隠語だと思うんだけど
ティーン向けのファッション誌とかでJCとか言ってるのは結構前から見る気がする
ついにNHKまで使い出したかと思って朝からコーヒー吹いた

68 :
裸のJSを思い浮かべながらjQuery
これならいつでも戻れる

69 :
>>66
ピグ系のゲームだとプロフ欄に
JC2です!とかLJKですとか沢山みるから市民権を得たみたい
小学生が掲示板でーってなんですか?って聞いて
別の小学生が知らなくて良いよwとか答えたりしてカオスだわー

70 :
>>66
おっさん乙

71 :
サワヤマミルからシミンケーン?と思った

72 :
あたしの場合は周りが知ってたから
そういう知識は知らない間についてたわ

73 :
>>56
jQuery使うと、こんな感じ。ベタだけど。
var a = []
$('#tbl tr').each(function(y){
 // TRごとに処理
 a[y] = [];
 $(this).children().each(function(x){
  // TRの子供のTD群の値を取得
  var td = $(this).text();
  a[y][x] = td;
 });
});
aに2次元配列でtableのtdのtextが入る。

74 :
ブックマークレットの二重起動を防止したいのですが良い方法はありませんか?

75 :
querySelectorAll つかうんなら、tmp[i].querySelectorAll('td'); な感じで。

76 :
ブックマークレットを実行したことを記録するだけ

77 :
cellsでいい

78 :
>>76
try {
if (typeof(niju) != undefined) {
throw new Error("既に実行中です");
}
var niju = true;
//実際に行う処理
} catch(e) {
alert(e.message);
}
二重起動していたらexitする処理のつもりなのですがどうもうまく動きません

79 :
それをブックマークレットで実行してるってことは
無名関数でラップしてんのではないかに。
もしそうなら niju がローカルになるだに。

80 :
isNaN({});
これが何故trueになるのかよく分かりません
{}ってここではどう言う意味なんでしょうか?

81 :
>>80
> JavaScript Reference - isNaN : ビルトイン関数
> 指定した値が数値かどうかを調べます。値が数値ならば false、数値でない場合は true を返します。

82 :
>>79
よくよく考えてみると全くその通りでした
やはり対象htmlのどこかを弄って状態を保持しておくのがベターですかね?

83 :
window.niju で桶。

84 :
>>83
ありがとうございます
うまくいきました

85 :
addEventListenerについて質問です。
テーブルのセル(td)をクリックしたときにそのセルのinnerHTMLをalertするスクリプトを書いてます。
この時全てのtdに対してaddEventListenerを追加するのでしょうか?
ループでまわせばスクリプト自体は短いからいいのですが
とても効率が悪いような気がするのですがこれが普通なのでしょうか?

86 :
そんなことしまひん!

87 :
>>86
ではどのようにしたらいいでしょう?
ヒントでもいいのでいただけたらありがたいです。

88 :
バブリンをテーブルで捕捉。
ターゲットの親からセルをゲット。

89 :
>>87-88 過去スレでそういうの結構説明されているから。

90 :
alertとかダサい

91 :
デバッグ目的とはかいてない

92 :
document.getElementById('fuga')のように
object.method(arg)というような記述をしますが
どのように実装したら同じような記述ができるのでしょうか?
今自分が実装している記述は下のような感じで
function getElementById(object, id) {
  return object.getElementById(id);
}
使用時はgetElementById(document, 'fuga');
このようになってしまいます
returnにthisを返すようにすればとかなんかの記述を見た気がするのですが
参考資料がちょっと見つかりません
どなたかお助け下さい

93 :
Document.prototype.myGetElementById = function(id) {
return this.getElementById(id);
}
とかじゃないたぶん

94 :
ぷろとたいぷおせん

95 :
attachEventが勝手に削除される?ようなのですが原因はなんでしょうか?
addEventListenerでは問題ありません。
ロード時にdiv要素をオンマウスするとそのdiv要素にボタンを表示するイベントを追加します。
ボタンを押したらそのdiv要素を削除するイベントを追加します。
それで削除まではできるのですが、削除したあと他のdiv要素に移動してもボタンが出て来ません。
コードはちょっと長いので再現出来る分を抜いて後から出したいと思います。

96 :
他のdivも操作してるから
代入し直してるとか

97 :
>>96
ありがとうございます。
ご指摘の通りのようです。
他のdivの操作をやめたら出るようになりました。
こんな仕様だったんですね。
何か対応策とかありますでしょうか?

98 :
他のdivを操作しない
イベントを登録し直す
jQueryでdeep copyする
まだあるけど書かない

99 :
>>98
ありがとうございます。
勉強中の身なのでjQueryは使わず2番目の方法でやってみます。

100read 1read
1read 100read
TOP カテ一覧 スレ一覧 2ch元 削除依頼
【RDF】セマンティックウェブ【メタ情報】 (899)
【RDF】セマンティックウェブ【メタ情報】 (899)
イラストサイト総合スレ (906)
お前ら、HTML作成で心がけていること教えてください (605)
ナノで携帯サイトを作ってる人★3 (799)
【地道】着メロサイトの管理人【打込】 (263)
--log9.info------------------
愛する印刷所スレ (230)
【成人】販売時の年齢確認【未成年】 (843)
同人のつきあいで心にずっと引っかかっていること4 (564)
【今日の】 漫 画 王 【言い訳】第四代目 (408)
【萌え萌え】可愛い女の子を描く方法【エロエロ】 (235)
やさしい人物画にいまだ騙されてる奴を嘲笑うスレ (352)
リーマン用修行スレpart3 (921)
バクマン。in同人ノウハウ板 (303)
同人屋専用マンションがあったら 2 (405)
【Painter】 ペインター@同人ノウハウNo.6 (245)
【同人ゲーム】流通代行会社を語る (338)
鉛筆の漫画をデータ入稿したい (651)
ギャグ漫画描きの居場所 (674)
他スレに散らばった有意義発言を拾ってきてまとめるスレ (600)
【コミケで】混むフレックス【大量落し】 2 (826)
手抜きでなく原稿を速く仕上げるヒント2 (846)
--log55.com------------------
【バス運転士】現役ウテシの雑談スレ12便【意見交換】
神奈中・神奈中東・神奈中西乗務員専用19
広島県内のバス事情 Part29
`N,ishitetsu 西鉄グループバススレ87
新規開設・増便・減便・運休情報 95路線目
迷惑行為ツイッタラーを暴露その8
【RJ】総合スレ【祝MRJ初飛行】
ベトナム航空VN004便