console.log() が機能しません)データの中身はコンソールに出力する事でデバッグしやすくなります。window.alert() は String 型に型変換されますが、console.log() は Object 型の中身も表示してくれます。
console.log('Hello, World!'); と入力| ブラウザ | 機能 | ショートカットキー |
|---|---|---|
| Google Chrome | 開発者ツールを開く | [Ctrl] + [Shift] + [I] |
| Google Chrome | [Console] パネルを開く | [Ctrl] + [Shift] + [J] |
| Firefox | 開発者ツールを開く | [Ctrl] + [Shift] + [I] |
| Firefox | Web コンソールを開く | [Ctrl] + [Shift] + [K] |
| Safari | 開発者ツールを開く | [Ctrl] + [Shift] + [I] |
| IE | 開発者ツールを開く | [F12] |
onclick="foo()" と onclick="bar()" を同時に使いたいのですが…<span onclick="foo();bar();"> としましょう。document.write() でページ内容を追加したいのですが…document.write() すると内容はクリアされちゃいます。document.write() 以外の方法にしましょう。
Node#appendChild や Node#insertBefore でノード挿入<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>insertRow() を使いましょう。window のプロパティだから window['w'+i] を読み書きすれ。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>object.property と object['property'] は同じ意味です。
<a href="http://example.com/" onclick=""> で動作指定してるのですが時々動きません…return false; でデフォルトアクションを抑制しないとページ移動してしまいます。<a href="http://example.com/" onclick="return false;">sample</a>event.returnValue でもデフォルトアクションをキャンセルできます。
<a href="http://example.com/" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false;">sample</a>element.style.backgroundColor で取得できないのですが…document.defaultView を経由して、getComputedStyle() を使う必要があります。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');
}100*1.15 の結果が 114.999... となってしまうのですが…alert(100*1.15); // 114.99999999999999
alert(100*115/100); // 115XMLHttpRequest()、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) {}
}
}setAttribute('class', 'foo'), setAttribute('onclick', 'bar()') が動きません…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'));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();window.setTimeout() が実行されるとき、コールバック関数の this はグローバルオブジェクト (window) を参照しています。(ES5 の strict mode では undefined)Node#addEventListener が実行されるとき、listener関数の this は event.currentTarget を参照しています。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!document.getElementById('hoge') や $('#hoge') で要素ノードが取れないのですが…window.onload 中でやるとか。