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

みんなの評価 : ○

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

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

1 = :

━━━本スレに書く事を許される者は以下の通り━━━━━
　一．正しい(validな)HTMLとは何か知っており書ける者
　一、JavaScriptはJavaとは別物であると知っている者
　一、自ら学んでJavaScriptコードを書く意思を持つ者
　一、ユーザに迷惑となるスクリプトを書かない者
　一、質問を分かる日本語できちんと説明できる者
　一、トラブルを再現する最小限のサンプルを貼れる者
　一、テンプレ+FAQ>>2-10/過去ログ/関連資料を読める者
━━━━━━━━━━━━━━━━━━━━━━━━━━━
自力で書く気がない人は他のスレへ(テンプレ末尾参照)。
前スレhttp://pc11.2ch.net/test/read.cgi/hp/1252401448/
[必読]過去スレ全集http://wing2.jp/~mirrorhenkan/2ch/javascript/
　　(ずべて同一)　　http://www2.atpages.jp/mirror/2ch/javascript/
　　　　　　　　　　http://usamimi.info/~mirrorhenkan/2ch/javascript/
[必読]ガイドhttp://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Guide
(GuideをReferenceに→Netscape版言語仕様。多くの実装が準拠:ECMA-262.ed3)
FAQ・注意・過去ログ・仕様書・関連資料・関連スレ>>1-10

3 = :

【質問を書く上で】
1)ユーザ(閲覧者)に迷惑がかかる性悪スクリプトは回答されない。
　例: 別窓開きまくり、閉じる/戻るのを妨害、全画面占有、etcは最悪。
　答えさせようと「分からねえんだろ」と煽っても無駄(過去スレが証明)。
2)言葉でぐだぐだ書かずにソースを貼る、ただし要点を整理して。
　そのまま貼って動かせると試してもらいやすい(ただし回答者に連結さすな!)
　長い(1レスに入らない)場合はアップロードしてURIを貼る。
3)初心者という言葉は危険なので使わない方がよい。
　初心者を言い訳に自力で調べない/考えない奴が最悪に嫌われる。
4)自分で調べたこと/試したこときちんと書く(調べもしない奴は最低)。
　ただ「動きません」「エラーです」は何も情報がないため嫌われる。
　エラーは「どの行で何のエラー」を書く(ブラウザをそのように設定すれ)。
　ブラウザの設定すらできんヤシはFFxのJavaScriptコンソールを使え!!!
　OS、ブラウザ、バージョン、うまく行かない条件を明記しエラー再現可能に。
5)特に古いバージョン限定の時は必ず明記! 回答もチグハグになり回答者に2度
　手間を食わせる可能性大(現行Ver.:IE5.5-6、N6-7、Opera7-8)
6)どういう時にどういう動作をさせたいのかを脳内にとどめずきちんと書く。
　例:「自動ポップアップしたい」←どういう場合(マウスオーバー、クリック、
　ボタン押し、select選択)に何(別窓、レイヤー、その他)が出るのか書け!
7)質問はまっとうな(他人に理解できる)日本語で。
　前項の例に限らず、他人に理解できない質問文は煽られるだけで時間の無駄

4 = :

【FAQその1】
Q1. 開いた別窓/フレームの内容にアクセスできないのですが…
A1. ページ内容が別サーバの場合セキュリティ制約により絶対無理です。
Q2. JavaScriptでローカルファイルを読み/書きたいのですが…
A2. Webではセキュリティ制約により絶対無理です。できたら恐ろしいことに…
Q3. 同じタグの中でonclick="foo()"とonclick="bar()"を同時に使いたいのですが…
A3. セミコロンで複数の文を区切れます。onclick="foo();bar();"としましょう。
Q4. document.write(...)でページ内容を追加したいのですが…
A4. 一度ページ表示完了後にwrite()すると内容はクリアされちゃいます。
　部分的に内容変更するには(1)他フレーム/iframe/別窓への表示、
　(2)textarea等への表示、(3)DOMでノード挿入、(4)innerHTMLのどれかで。
　innerHTMLは非標準ですがIE、Opera、Safari、Gecko(N6/N7/Firefox等)で対応済。
Q5. table/tbody/tr要素のinnerHTMLを書き換えるのがうまく行かないのですが…
A5. IEはそれらの要素のinnerHTMLは変更不能。DOMを使って書き換えるか
　<div><table>...</table></div>とでもしてdivのinnerHTMLを書き換えましょう。
Q6. DOMでtable要素にtr要素を追加しても表示されないのですが…
A6. DOMでは(XHTML 1.x除く)tbody要素にtr要素を追加する必要があります。
　tbody要素はtbodyタグを書いていなくても自動的に作成されます。
　またはtable.insertRow()/tbody.insertRow()を使いましょう。
Q7. 変数w1、w2…を順にループで(番号をiに入れて)設定/参照したいのですが…
A7. グローバル変数はwindowのプロパティだからwindow['w'+i]を読み書きすれ。
Q8. フォーム部品名を変数にした「...myform.変数名.value」が動きません…
A8. 「document.forms.myform.elements[変数名].value」でどぞ。
　JavaScriptでは一般に「obj.x」と「obj['x']」は同じ意味です。
Q9. Aタグのonclickで動作指定してるのですが時々動きません…
A9. 「onclick="...;return false"」としないとページ移動しちゃうから。

5 = :

【FAQその2】
Q10. CSSで設定した背景色がe.style.backgroundColorで取得できないのですが…
A10. 取得には document.defaultView.getComputedStyle() を使う必要あり。
　IEでは要素オブジェクトのプロパティcurrentStyleを使う。
Q11. 100*1.15の結果が114.999…998となってしまうのですが…
A11. コンピュータの実数計算は全て近似値だと思え。誤差が嫌なら整数で計算。
Q12. 任意のデータをサーバ(別鯖ではない)から取り寄せたいのですが…
A12. IE7/Gecko/Opera/Safariのnew XMLHttpRequest()、IEの
　new ActiveXObject("Msxml2.XMLHTTP.6.0") (または"Msxml2.XMLHTTP.3.0")
　を使えばできます。古いブラウザだと隠しフレームに読むなどのワザが必要。
Q13. setAttribute("class","foo")、setAttribute("onclick","bar()")が動きません…
A13. IEではそれは不可。「obj.className="foo"」「obj.onclick=bar」でどぞ。
　複数の関数を呼びたいときは obj.onclick=function(){foo();bar();};
　という風に無名関数を作りましょう。中に書かれたコードが実行されます。
Q14. タイマーやイベントハンドラに設定するコードにthisを含めたいのですが
　「"...this..."」とか「function(){...this...}」ではうまく行きません。
A14. それらが実行されるときはthisは別のもの(window等)を指してしまってる。
　「function(x){return function(){...x...};}(this)」のようにthisを別の変数に
　束縛しその変数を使って。循環参照によるメモリリーク問題あり(この項記述検討中)
Q15. 文字列の置き換えをするときにコードを使いたい(Perlのs///e)のですが…
A15. string.replace(/.../,function(str,p1,p2,...,offset,s){...})としましょう。
　正規表現にマッチした文字列がreturnで返された文字列に置き換えられます。
　各引数はstrがマッチした部分文字列、p1,p2,...が1番目、2番目、…の()の中身、
　offsetがマッチした位置、sが置き換え前の文字列全体になります。
Q16. input type="file"の値を設定(参照)できないのですが…
A16. セキュリティ制約のため設定は絶対に不可。参照はブラウザにより不可。
Q17. getElementById('ID名')や$('ID名')で要素が取れないのですが…
A17. コード実行時点でHTMLがそこまで読まれてない。onload中でやるとか。

6 = :

【主張の対立：他人の嗜好は尊重。損得の議論は歓迎】
・仕様を読む：回答者なら仕様の該当部分は読んでいるべき。質問者でも
　仕様を読まずうだうだ書く奴は注意されて当然。読み間違いは生温く指摘。
・英文文書：翻訳の努力を惜しむべからず。読めないなら和訳を探し、
　なければあきらめよう。翻訳サイトを知っている人はうまく誘導してあげて。
・IE専用/アンチIE/クロスブラウザ：「○○は不要」「○○だけであと
　は無視」は不毛。質問者が分かって選択していれば尊重する。無知か
　らIE専なのは指摘してあげると親切。
・標準準拠 vs 使えればよい：標準はブラウザが変わっても維持される
　可能性大。非標準機能も損得を分かった上で使うならよい。
・MS vs アンチMS：MS固有の情報はMSのサイトで見ないと分からないが、
　そこだけ見ているとIE専になる。あとは上2件と同様。
・別窓、イベント抑止など：一般には迷惑スクリプトだが質問者に正当
　な理由があることも。尋ねて分かってないようなら煽っても可（ｗ
・innerHTML vs DOM：それぞれに長所/弱点があるので理解した上で選
　択するべき。一概にどちらは駄目、とは言えない。
・on属性 vs addXXX()：ハンドラが1つだけと分かっていればon属性
　で簡単にハンドラを設定もあり。上書きが心配ならaddXXX()。

8 = :

【チュートリアルサイト・サンプルサイト】
規格が読めないならまずはチュートリアル。サンプルサイトも沢山ある。
(以下は精選すべきとの議論あるが進んでいないので玉石混淆)
MetaGraphic Cell
→http://www2u.biglobe.ne.jp/~oz-07ams/prog/
どら猫本舗のリファレンスカウンター
→http://www.doraneko.org/
はぎさんちのページ Mozilla's DOM Sample Project
→http://cgi.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/mds.cgi
一撃必殺javascript
→http://www.openspc2.org/JavaScript/
【関連スレ】
板違い、スレ違いに注意！サーバ側での処理はWebProg板へどぞ！
Webサイト制作初心者用質問スレ Part 213
→http://pc11.2ch.net/test/read.cgi/hp/1251728499/l50
CSS/DHTMLバグ辞典スレッド【第５版】
→http://pc11.2ch.net/test/read.cgi/hp/1144494359/l50
役に立つ書籍は？ 4冊目
→http://pc11.2ch.net/test/read.cgi/hp/1172823674/l50
1行javascriptプログラミング　　　
→http://pc11.2ch.net/test/read.cgi/hp/1066750037/l50
WSH(・∀・)ｽﾚｯﾄﾞ! Part 3
→http://pc11.2ch.net/test/read.cgi/tech/1208948450/l50

9 = :

おわり

10 = :

12 = :

あー、お手伝い頂いた方すみません。全部やってくれたのね。
かぶりました。次回用にこのレスだけ貼らせて。
ECMA-262 ed.3
→http://www.ecma-international.org/publications/standards/ECMA-262.HTM
→http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ (和訳)
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/en/docs/Core_JavaScript_1.5_Reference
→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
E4X (ECMAScript for XML)
→http://www.ecma-international.org/publications/standards/Ecma-357.htm
→http://www.ne.jp/asahi/nanto/moon/specs/ecma-357.html (和訳)
Mozilla Gecko DOM Reference, Netscape devedge
→http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
→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(VS.80).aspx
→http://msdn.microsoft.com/ja-jp/library/cc409720.aspx

13 :

ジェーソン君のデビューに期待あげ

14 = :

>>12
まあ中二病的発想だろうね
三年生ともなれば経済ってもんが大まかにでも分かって来て個々人が自分自身の為に精一杯頑張る事が
最も社会（彼らは地球・世界・市民といった表現が好きなようだが）の為になるって事に気付くもんだけど

15 = :

深いな

17 = :

誤爆しますた

20 = :

坊やだからさ

21 = :

てか、レイヤーとして扱えるような要素はないのだろうか。
positionでもいいけど、もっと<layer>～</layer>
みたいな感じでさ。

22 = :

>>21
見栄えにしかならんものはCSSでやるっていうのがHTML4頃のポリシーだろ
HTML5は知らん、つーかスレチ

24 = :

＞function test2(txt) {

x = 1;
function f1() { alert(x); }
function f2(x) { alert(x); };
function f3() { var x; alert(x); };
f1(); f2(); f3();

仮引数はローカル変数

25 = :

>>24
ありがとうございます
解決できました

29 = :

>>28
環境何？

Firebugで試したけど、やりたいことできてるみたいだよ？

console.log(arrayJSON); 　　　　　　　　　　// 3つある
console.log(arrayJSON.list[1]); 　　　　　　// みかん
console.log(arrayJSON.list.splice(1,1)); 　// みかんが取り出される
console.log(arrayJSON); 　　　　　　　　　　// 2つになってる

30 = :

そもそもみかん200円て高いよ

31 = :

getElementsByTagNameは入れ子にできないんでしょうか？
うまく動作しないのですが……。

var div = document.body.getElementsByTagName("div");
for (var i = 0; i < div.length; i++) {
　p = div[i].getElementsByTagName("p");
　for (var j = 0; j < p.length; j++) {
　　略
　}
}

32 = :

>>31
そのまま実行してみたけど上手く行くよ。うまく動作しないって実際にどうなってるの？

34 = :

>>32
なぜかpが空になってしまうんです……

35 = :

>>33
別の所が原因じゃない？やっぱりうまく行くよ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>test</title>
<script type="text/javascript">
var test = function() {
　var arrayJSON = {"list":[
　　{"food":"りんご","yen":"100円"},
　　{"food":"みかん","":"200円"},
　　{"food":"パイナップル","":"500円"}
　]};

　arrayJSON.list.splice(1,1);
　var list =arrayJSON.list;
　for (var i=0,l=list.length; i<l; ++i) {
　　for (var key in list[i]) {
　　　alert(key + ":" + list[i][key]);
　　}
　}
}
</script>
</head>
<body>
<button onClick="test()">テスト</button>
</body>
</html>

36 = :

>>33
数点きになる箇所が。
arrayJSON.list[1].splice(1,1)
・spliceメソッドは配列の要素に対して実行するのではない
=> arrayJSON.list.splice(1,1);

arrayJSON = {"list":[
{"food":"りんご","yen":"35円"},
{"food":"みかん","":"25円"} //, ここにコンマを入れるべき
{"food":"パイナップル","":"200円"}
]}
・途中、コンマが抜けてる

・質問するときに関係のない語を含めない。(JSON)
質問がボケる。

38 = :

>>34
こんな感じだよ？HTMLがどっかおかしいんじゃない？

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>test</title>
<script type="text/javascript">
var init = function() {
　　var result = [];
　　var div = document.body.getElementsByTagName("div");
　　for (var i=0,l=div.length; i<l; ++i) {
　　　　result.push(div[i].id + "<br>");
　　　　p = div[i].getElementsByTagName("p");
　　　　for (var j=0,m=p.length; j<m ; ++j) {
　　　　　　result.push("　　" + p[j].id + "<br>");
　　　　}
　　}
　　document.getElementById('result').innerHTML = result.join('');
}
</script>
</head>
<body onload="init()">
<div id="div1-1"><p id="p1-1"></p><p id="p1-2"></p></div>
<div id="div2-1"><p id="p2-1"></p><div id="div2-2"><p id="p2-2"></p></div></div>
<div id="result"></div>
</body>
</html>

39 = :

ジェーソン君の人気に嫉妬あげ

40 = :

arrayJSON.list.splice(1,1);の後にarrayJSON.list = arrayJSON;って代入したらうまくいきました

41 = :

javascriptの記載されたページでonclickで配列に要素を足したり引いたりするページがあります
これをブラウザを閉じたりページを更新すると初期化されますが、初期化しないで保存しておける方法ってありませんか？

42 = :

>>40
え。え。ちょっとそれ何か解決方法が違うなｗ
根本的な解決になってない気がするよｗ

43 = :

>>41
cookieに入れるとかじゃない？cookie拒否してたら意味ないけどそれが一般的。

44 = :

>>37 >>38
サンプルコードが微妙に違ってました
すみません・・・

<html>
<head>
<script type="text/javascript">
var init = function() {
　var div = document.body.getElementsByTagName("div");
　for (var i = 0; i < div.length; i++) {
　　if (div[i].getAttribute("className") == "foo" ||
　　　　div[i].getAttribute("class") == "foo") {
　　　div[i].appendChild(document.createTextNode("ろ"));
　　} else {
　　　var p = div[i].getElementsByTagName("p");
　　　for (var j = 0; j < p.length; j++) {
　　　　p[i].appendChild(document.createTextNode("に"));
　　　}
　　}
　}
｝
</script>
</head>
<body onload="init()">
<div class="foo"><p>い</p></div>
<div><p>は</p></div>
</body>
</html>