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

1 ：12/04/08 〜 最終レス ：12/05/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.98 +
http://toro.2ch.net/test/read.cgi/hp/1330575050/
■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
http://wing2.jp/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
■テンプレ案
http://jsfiddle.net/fH4cC/6/show/
■関連スレ
ECMAScript デス 4
http://toro.2ch.net/test/read.cgi/tech/1325448978/
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サイト制作初心者用質問スレ part229
http://toro.2ch.net/test/read.cgi/hp/1333423433/
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
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/
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 Document Object Model
http://www.w3.org/DOM/DOMTR
http://www.w3.org/TR/dom/
Element Traversal Specification
http://www.w3.org/TR/ElementTraversal/
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
http://msdn.microsoft.com/ja-jp/library/cc427807.aspx
http://msdn.microsoft.com/ja-jp/library/hbxc2t98.aspx
http://msdn.microsoft.com/en-us/ie/ff468705.aspx

5 ：

>>1乙

6 ：

Javascriptのlocation.href=""を多用しているサイトを改修してます。
IEだと、普通のリンクではなくlocation.href=""でジャンプする場合、Baseタグ指定を無視します。
全てのリンクがBaseタグを基点の階層構造で指定してあるため、全体を直すのがかなり時間かかります。
できるだけ少ない修正でIEでも問題ないようにする方法ってありますか？

7 ：

a要素生成して click() イベントにすれば。

8 ：

baseタグとaタグの内容をもとに正しいURLを計算してリンクを一気に修正するプログラムを書くのが普通

9 ：

>>8
普通とか言ってるお前にそれができると思えないけどな。

10 ：

location.href=
を
location.href="baseタグのURl"+
に置きかえるスクリプトを作ればおｋ

11 ：

そんなこと言って作ってもらおうとしても無駄

12 ：

sedコマンドで一気に書き換えればいいだろ

13 ：

sedコマンド？

14 ：

sedすら知らないのかよ

15 ：

sedはエディタだろ

16 ：

SEOINJAPANでは、概算費用の確認、予算申請用の見積りや、標準コース以外のホームページの制作をご希望の方に、無料見積りを行っております。
ホームページ制作：http://seoinjapan.com/about/homepag_other.html

17 ：

よカス

18 ：

SEDは次世代TVとして期待されていたけれど、コスト削減出来ず市場に出る前にポシャった技術だろ。
確かCanonとTOSHIBAだったよな。

19 ：

セブン-イレブン デンマーク

20 ：

文字列なXMLデータをObject変数にしたいのですが、どうしたらいいでしょうか？
var str = '<?xml version="1.0" encoding="utf-8"?>
<xml>
<params>
<param>abc</param>
</params>
</xml>';
こんな感じのStringを、
var xml = new XML(str);
みたいな事をして
var param = xml.params[0].param; //abc
とかしたいです。
この場合のnew XML()に該当する何かはありますでしょうか？
無ければみなさんは普段どのように取り扱っていますか？

21 ：

>>20
DOMParserかな?
(new DOMParser()).parseFromString(
'<?xml version="1.0" encoding="utf-8"?><xml><params><param>abc</param></params></xml>',
'text/xml'
).querySelector('params > param').textContent;

22 ：

>>21
素早い回答ありがとうございます！
出来ました！神！

23 ：

前スレ埋まってからにせんかいおのれら

24 ：

おのれ=己=自分

25 ：

関西人かよ

26 ：

google apiの質問ってここで良いですか？
住所から緯度経度に変換するロジックを、現在開発中の画面に組み込んでいます。
以下のようにやっています。
var addr = "東京都千代田区1-1";
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': addr }, function(data, status){
if (status == "OK") {
var pos1 = data[0].geometry.location.Xa;
var pos2 = data[0].geometry.location.Ya;
alert(緯度経度：" + pos1 + " / " + pos2);
}
});

dataとして出てくるJSONの仕様が微妙にコロコロ変わるようで、
2週間ぐらい前は
data[0].geometry.location.Ta
data[0].geometry.location.Ua
で緯度経度を取得できていたのですが、取得失敗するようになり、
dataを、JSON.stringify(data)して中身をみたところ、
緯度経度のプロパティ名がTa UaではなくXa Yaとして出てくるのに気づき、
それに合わせて呼び出すスクリプトを修正。（それが上記ソース）
昨日ぐらいまではこれでいけていたのですが、今日になってまた取得失敗するように。
ふたたびdataの中身を見たところ、今度はYa Zaという名前になっているようです・・・
googleMapって、ここまでコロコロ仕様が変わるものですか？
もっと確実に緯度経度を取得する方法あったら教えて下さい。

27 ：

なぜここでいいと思ったんだ。もしかしたら知ってる人がいるかも知れんが。

28 ：

自己解決。
data[0].geometry.location.lat()
data[0].geometry.location.lng()
というゲッタ使えばどうという事はなかったです。
JSONには直接触れないほうがいいってことか・・・

29 ：

>>26,28
ここで質問してもいいけど、リファレンスぐらいは読んだ方がいいよ。
https://developers.google.com/maps/documentation/javascript/reference?hl=ja

30 ：

getAttribute使ってname属性取得しようとしてるんですが取得できません
class属性は取得できるんですが、class属性以外が取得できないんです。
ちなみにspanタグなんですが、
<li>あああああああああ<span name="1111" class="hoge"></span></li>
こんな感じでspanタグの中には何もデータは書いてなくて、
あるname属性の時だけjavascriptでspanタグの中に文字を書き出そうとしてるんです。
そのためにname属性を取得したいんですがnullが返って来て取得できません。
どんな原因が考えられるでしょうか？

31 ：

span要素にname属性なんてない

32 ：

>>31
えっ
name属性付けられないタグとかってあるんですか？
タグにデータを保存したい場合何の属性使えばいいでしょうか？

33 ：

name属性はグローバル属性じゃない
データ保存したいなら http://www.html5.jp/tag/attributes/data.html

34 ：

ソースも書いたら？

35 ：

>>33
ありがとうございます。
でもHTML5限定ですよね？
ソースは、
var all = document.getElementsByTagName("span");
for(var i=0;i<all.length;++i){
classname=all[i].className;
if(classname=="target"){
data=all[i].getAttribute("name");
alert(data);
こんな感じです。
ちなみにまったく関係のないところにspanタグ書いたら
name属性も取得できました。
なぜか、上のレスで書いたようにliタグで囲んでると取得できないようです

36 ：

spanにname属性書いてる時点でHTMLのバージョンなんて関係ないだろ

37 ：

hogeとtargetは一致してないし

38 ：

両方ともあくまで例で適当に書いたから間違えただけ
本当のコードはちゃんと同じクラス名だよ

39 ：

お前誰だよ

40 ：

<li>の中だと動かない原因を解明しなよ
気になるから

41 ：

質問するために再現する最小のコード
を作っているうちに解決するもんだ
質問時に再現する最小のコードの提出を必須にすれば平和になる
そして過疎化

42 ：

俺だって時間ないから、parentNodeでli要素取得して、
innerHTMLで書き出して、正規表現でname属性の値を取得するという力技で対処したよ
もういいんだ
時間ナインだよ
ありがとうございました

43 ：

どうせ文法違反するならdata-name属性とかにしといた方が良いよ

44 ：

そうするとそんな属性ありませんって言われて、
エディタで警告が出るんだが
なるべくgoogle検索でペナルティが発生しない綺麗なコードを書きたいんだが
どっちがいいんだろう

45 ：

name属性に指定して何をしたいのかちょっと分からない

46 ：

値持たせてーんじゃねー？

47 ：

どうせJavaScriptで処理するんだから
値はJavaScriptの変数に入れたらいいんじゃねえの

48 ：

>>44
どの仕様書でも既定されてないnameより、HTML5で規定されてるdata-*の方がいいに決まってるだろ

49 ：

>>48
やっぱそうだよな
そうするわ

50 ：

>>49
補足するとHTML5にしてdata-*を使えばいいんだよ。

51 ：

setUserDataが廃止されたのは、data-*使えってことなんかね？

52 ：

>>51
廃止されたのか。便利だったのに…。

53 ：

相変わらず何も考えずに作ってそして廃止してるんだな

54 ：

Yahooメールのメール作成UIって、
本文に絵文字画像をそのまま載せて編集できたりとすごいんですが、
これどうやってるんでしょうか？
これ実現できるようなUIライブラリとかってありませんよね？

55 ：

ソース嫁よ

56 ：

>>51
Userクラスでも作って、そこに情報ぶち込めってことだろw

57 ：

dataset使えってことやないん？

58 ：

JavaScript内で保持すればいいのに
なぜHTMLのdataに保持したいかが分からない

59 ：

スクリプトの中から他のスクリプトを読みたいんですけど
どうしたらよいでしょうか

60 ：

>>58
要素と結びつけるためだろ・・

61 ：

>>59
createElement

62 ：

HTML要素にID振って、IDとデータの対をJavaScriptに保持すればいいんじゃねえの

63 ：

>>59
window.close()

64 ：

id付けるなら普通にdataset使った方がよくねそれ

65 ：

お前らゴミかよ
あらかじめHTML直書きか、PHPで出力したデータをdata-*に入れといて、
その値を持つ要素に対して特定の動作をさせたいからhtml内に保持させてんだよ
こんな馬鹿なやつらに質問してたとはな

66 ：

だれもそんな話してなくね

67 ：

まとめるとPHPはゴミ

68 ：

>>65
そうしたいならそうすればいい
それのどこが綺麗なコードなのか全然わからんが

69 ：

サーバーサイドスクリプトから値を設定する話はもうしてないから

70 ：

>>67
残念。ごみは PHPer。
PHP は、そういう連中向けの言語なだけ。

71 ：

Objectを代入する時、参照渡しではなく値渡しで行いたいのですがどうしたらいいでしょうか？
var obj1 = { key : 1 };
var obj2 = obj1;
obj2.key = 2; //←obj.keyは1のままにしたい
よろしくお願いします。

72 ：

PHPerはゴミ
PHPはゴミPHPerが使用する言語
∴PHPはゴミ
Q.E.D.

73 ：

>>71
clone

74 ：

var obj2 = new Object(obj1);

75 ：

俺もphpやってるけど
俺だったらphpでjavascriptの配列に引き出すIDをキーとして格納してやるかな、そういう場合がちょくちょくあるけどさ
正直自分の発想の足りなさをjavascriptのせいにしちゃイカンわ

76 ：

phpスレでやれ

77 ：

>>73
cloneというのは何でしょうか？
ググってみましたが、独自の関数を使用するのでしょうか？
>>74
試してみましたが、出来ませんでした。
↓使用コード
var obj1 = { key : 1 };
var obj2 = new Object(obj1);
obj2.key = 2;

var keyName;
for (keyName in obj2)
{
alert('obj2[' + keyName + '] = ' + obj2[keyName]);
}

for (keyName in obj1)
{
alert('obj1[' + keyName + '] = ' + obj1[keyName]);
}

78 ：

>>77
独自関数作るかどっかのライブラリ使うしかないね。

79 ：

俺も知らないけどjQueryのcloneを見たらいいと思う
あれでオブジェクト複製したことあるよ

80 ：

ググったら出てきた
function clone(o)
{
var f = function(){};
f.prototype = o;
return new f();
};

81 ：

>>80さんのやり方で出来ました。
みなさん、ありがとうございます！

82 ：

>>81
それでいい場合もあるが、for inで回してプロパティくっつけた方が無難。
まぁ、コレでも不満がないわけではないが。。。
function object_clone(o){
var r = {};
for(var k in o){
if(Object.prototype.hasOwnProperty(o,k)){
r[k] = o[k];
}
}
return r;
}

83 ：

obj1に違うキーを追加したり、delete obj2.key; したりだな。

84 ：

var objStr = JSON.stringify(obj);
var obj2 = JSON.parse(objStr);

85 ：

Firefox では console.log が出力されますが
Google Chrome では Uncaught TypeError: Illegal constructor と出て上手くいきません
Google Chrome でも MouseEvent コンストラクタを利用するには、どうすればいいのでしょうか
http://jsfiddle.net/GveDa/
var mouseEvent, mouseEventInit;
document.addEventListener('dblclick', function(evt){
console.log(evt);
}, false);
mouseEventInit = {
bubbles: true,
};
mouseEvent = new MouseEvent('dblclick', mouseEventInit);
document.documentElement.dispatchEvent(mouseEvent);

86 ：

jQueryを使いなさい

87 ：

>>85
http://jsfiddle.net/GveDa/1/
MouseEventは基本的にinterfaceなのでnewしないように

88 ：

>>85
DOM Event Constructorなら「new Event」でFirefox 11、Chrome 18、Opera 11.62で動くよ
http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-event

89 ：

>>86-88
ありがとうございます
init系メソッドが非推奨になったので、MouseEventもMouseEventコンストラクタを使わないといけないと思ってました
CustomEventの方を使おうかと思います

90 ：

javascriptを使ってオンマウスで画像を拡大するようにしたいのですが、横幅だけを指定したり、元の画像のサイズを指定したりするにはどうすればよいのですか？

91 ：

naturalHeightとnaturalWidthで元の画像サイズが取れる
natural*がないブラウザはnew Image(url)でwidthとheightをとる
if(this.naturalHeight) {
    this.height = this.naturalHeight;
    this.width = this.naturalWidth;
} else {
    var img = new Image(this.src);
    this.height = img.height;
    this.width = img.width;
}

92 ：

Imageの第1引数width指定するところじゃないんか・・・

93 ：

無い時はあらかじめ（拡縮する前に）拡張しておけばいいんじゃね？
if (!this.naturalHeight) {
  this.naturalHeight = this.height;
  this.naturalWidth = this.width;
}

94 ：

すみません。教えてください＾＾；
WordpressのQuickchatというプラグインを使ってみたいのですが、書き込みをすると音がするはずなのですが、音がでません。
下記の部分が当てはまると思うのですが、quick_chat_js_vars.quick_chat_url　という記述で音声ファイルまでだどりつくことができますでしょうか？
if(quick_chat_audio_element.canPlayType('audio/mpeg;')){
quick_chat_audio_element.setAttribute('src', quick_chat_js_vars.quick_chat_url+"sounds/message-sound.mp3");
quick_chat_audio_element.setAttribute('preload', 'auto');
quick_chat_audio_support = 1;｝
すれ違いだったらすみません。
アドバイスよろしくお願いいたします。

95 ：

>>91>>93
それをどこに組み込めばいいのですか
headのなかですか？

96 ：

>>94
quick_chat_audio_elementは名前的に恐らくDOM Elementだと思うから
quick_chat_audio_element.setAttribute('autoplay', 'autoplay'); 
を追加したらいいんじゃないかな

97 ：

>>95
http://www.openspc2.org/reibun/javascript2/image/width/0003/index.html

98 ：

>>96さん
　返信ありがとうございます！！＾＾
　if(quick_chat_audio_element.canPlayType('audio/mpeg;'))　の後に教えていただいた文を入れたらclomeでは音が鳴るようになりました！
　ありがとうございます！
　でもなぜかわかりませんがfirefoxでは鳴りませんでした（汗
助かりました＾＾　どうもありがとうございます。

99 ：

そーいやさ、同じ音を何度も使う場合キャッシュとかで大差はないんだろうけど
HTML5とどっちがいいんだろね？
対応してるブラウザが少ないとかの問題は置いといて

100read 1read

1read 100read

TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲

【digitalstage】BiND for WebLiFE (125)
【インクリメントP】ネットショップオーナー その3 (556)
携帯SEO iMenu 「goo」を攻略するスレ (216)
ゴッゴル (451)
熊本のWeb制作会社について語ろう (130)
.htaccess質問コーナー Part8 (693)
--log9.info------------------
HP ProLiant ML110 G5/G6/G7 13鯖目 (1001)
LG電子液晶モニター総合スレッド22台目 (280)
【BUFFALO】バッファローマウス総合スレ1【Arvel】 (884)
テレビチューナー付きキャプチャーボード 14枚目 (597)
NEC液晶モニタ総合スレッド30 (390)
5千円以下でお勧めのアクティブスピーカー 7台目 (354)
日立のＰｒｉｕｓ (601)
外付けHDDの安値情報スレ(ネット通販のみ) 9ﾎﾟﾁ目 (424)
3万円以下でおすすめのアクティブスピーカーはNo34 (560)
【eSATA】2.5HDD外付ケース専用【SSD】 (921)
無線LANの質問スレ 27問目 (858)
【NAS】Pogoplug part5【cloud】 (893)
★★★★ＦＤＤ５００枚買った！★★★★★★ (559)
【次世代HDD】SSD ７台目【2ﾁｬﾝﾈﾙﾓﾂｶｯﾃﾙ?】 (162)
ハードウェア総合質問スレ 22GHz (357)
ゲーミングマウススレ Part10 (245)
--log55.com------------------
【三國志13】三国志13 Part106
[批判禁止]三國志13 Part103 三国志13[本スレ]
[批判禁止]三國志13 Part103 三国志13[本スレ]
三國志13 Part96 三国志13
[バグ報告禁止]信長の野望・創造 戦国立志伝 Part101 [批判禁止][本スレ]
[批判禁止]三國志13 Part102 三国志13[本スレ]
[批判禁止]三國志13 Part101 三国志13
[批判禁止]三國志13 Part100 三国志13