JavaScript の質問用スレッド テンプレ

FAQ

Q1. 開いた別窓/フレームの内容にアクセスできないのですが…
ページ内容が別サーバの場合セキュリティ制約により絶対無理です。
Q2. JavaScriptでローカルファイルを読み/書きたいのですが…
Webではセキュリティ制約により絶対無理です。できたら恐ろしいことに…
Q3. 同じタグの中で onclick="foo()" と onclick="bar()" を同時に使いたいのですが…
セミコロンで複数の文を区切れます。<span onclick="foo();bar();"> としましょう。
Q4. document.write() でページ内容を追加したいのですが…
一度ページ表示完了後に document.write() すると内容はクリアされちゃいます。
部分的に内容変更するには document.write() 以外の方法にしましょう。
  1. 他フレーム/iframe/別窓への表示
  2. textarea等への表示
  3. Node#appendChild や Node#insertBefore でノード挿入
  4. innerHTML (IE/Gecko/Webkit/Opera で実装されているデファクトスタンダードなプロパティ。HTML5 で標準化する見込み。)
Q5. table/tbody/tr要素のinnerHTMLを書き換えるのがうまく行かないのですが…
IE8- (IE9 は不明) はそれらの要素の innerHTML は変更不能。DOMを使って書き換えるか、<table> の親要素の innerHTML を書き換えましょう。 
<div id="Sample"><table><tbody><tr><td>sample</td></tr></tbody></table></div>
<script type="text/javascript">
document.getElementById('Sample').innerHTML = '<table><tbody><tr><td>Replaced!</td></tr></tbody></table>';
</script>
Q6. DOMでtable要素にtr要素を追加しても表示されないのですが…
DOMでは(XHTML 1.x除く)tbody要素にtr要素を追加する必要があります。
tbody要素はtbodyタグを書いていなくても自動的に作成されます。
または HTMLTableElement/HTMLTableSectionElement で insertRow() を使いましょう。
Q7. 変数 w1, w2, w3 ... を順にループで(番号をiに入れて)設定/参照したいのですが…
グローバル変数 は window のプロパティだから window['w'+i] を読み書きすれ。
Q8. フォーム部品名を変数にした myForm.itemName.value が動きません…
<form id="myForm">
  <p><input type="text" name="nickName" value="Ken"></p>
</form>
<script>
alert(document.getElementById('myForm').elements['nickName'].value); // "Ken"
alert(document.forms.myForm.elements.nickName.value);                // "Ken"
</script>
でどぞ。
JavaScriptでは(基本的に) object.property と object['property'] は同じ意味です。
Q9. <a href="http://example.com/" onclick=""> で動作指定してるのですが時々動きません…
return false; でデフォルトアクションを抑制しないとページ移動してしまいます。
<a href="http://example.com/" onclick="return false;">sample</a>
event.preventDefault() もしくは event.returnValue でもデフォルトアクションをキャンセルできます。 
<a href="http://example.com/" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false;">sample</a>
Q10. link要素,style要素で設定した背景色が element.style.backgroundColor で取得できないのですが…
document.defaultView を経由して、getComputedStyle() を使う必要があります。
IE8- は getComputedStyle() に対応しないので、element.currentStyle を使います。 
function getComputedStyleMod (element /*, pseudoElt*/) {
  var view, pseudoElt;

  view = element.ownerDocument.defaultView;
  pseudoElt = arguments.length > 1 ? arguments[1] : '';

  if (view && view.getComputedStyle) {
    return view.getComputedStyle(element, pseudoElt);
  }

  if (element.currentStyle) {
    return element.currentStyle;
  }

  throw new ReferenceError('getComputedStyle or currentStyle is not defined');
}
Q11. 100*1.15 の結果が 114.999... となってしまうのですが…
ECMAScript の浮動小数点演算には丸め誤差があります。誤差を発生させたくない場合は整数演算にしてください。 
alert(100*1.15);    // 114.99999999999999
alert(100*115/100); // 115
Q12. 任意のデータをサーバ(別鯖ではない)から取り寄せたいのですが…
IE7+/Gecko/Webkit/Opera は XMLHttpRequest()、IE6- は ActiveXObject() を使えばできます。古いブラウザだと隠しフレームに読むなどのワザが必要。 
var xhr;

if (typeof XMLHttpRequest === 'function' || typeof XMLHttpRequest === 'object') {
  xhr = new XMLHttpRequest();
} else if (typeof ActiveXObject === 'function' || typeof ActiveXObject === 'object') {
  try {
    xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');
  } catch (e) {
    try {
      xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0');
    } catch (e2) {}
  }
}
Q13. setAttribute('class', 'foo'), setAttribute('onclick', 'bar()') が動きません…
IE7- では setAttribute() はDOMプロパティへのセッターとして働きます。(IE8 で修正済み)
element.className および element.onclick で対応してください。
function bar () {
  alert('bar');
}

function init (element) {
  element.className = 'foo';
  element.onclick = bar;
}

init(document.getElementById('Sample'));
複数の関数を呼びたいときは複数の関数を呼び出す関数を定義しましょう。 
function hoge () {
  foo();
  bar();
}

function init (element) {
  element.onclick = hoge;
}

init(document.getElementById('Sample'));
Q14. setTimeout() やイベントハンドラ関数に設定するコードに this を含めたいのですが…
this を別の変数(下例では that) に束縛し、その変数を使って対応してください。 
function Hoge (value) {
  this.value = value;
}

Hoge.prototype.setHandler = function () {
  var that = this; // this値をローカル変数に保持する

  document.onclick = function () {
    /* この関数内で使う this 値は document を参照している */
    alert(that.value);
  };
};

var hoge = new Hoge('Hello');
hoge.setHandler();
Q15. 文字列の置き換えをするときにコードを使いたい(Perlのs///e)のですが…
String#replace() を使いましょう。 
var string = 'Hello, World! Hello, World!';
string = string.replace(/(Hello), (World)/g, function (subString, p1, p2, offset, sourceString) {
  console.log(subString);    // マッチした文字列全体
  console.log(p1);           // 1つめの () でキャプチャされた値
  console.log(p2);           // 2つめの () でキャプチャされた値
  console.log(offset);       // マッチした位置(オフセット)
  console.log(sourceString); // マッチした時点での string 値

  return 'Replaced';
});
console.log(string);         // Replaced! Replaced!
Q16. input type="file"の値を設定(参照)できないのですが…
セキュリティ制約のため設定は絶対に不可。参照はブラウザにより不可。
Q17. document.getElementById('hoge') や $('#hoge') で要素ノードが取れないのですが…
コード実行時点でHTMLがそこまで読まれてない。window.onload 中でやるとか。