JavaScript

技術編

記法関連

Getter, Setter

code:js

const obj = {

_value: 10,

get value() { return this._value; },

set value(v) { this._value = v; }

};

obj.value = 20;

console.log(obj.value); // => 20

Array

Object

要素数の取得

const len = Object.keys(obj).length

Objectのループ

code:js

for in 句は非推奨

Objectから要素を削除

code:js

var obj = {hoge: 'hello!'}

delete obj.hoge

obj.hoge // undefined

メモリが解放される訳ではない（GCを待つ必要がある

型検査

jsの型検査はかなりややこしい

table:型検査サマリ

標準データ型 typeof instance == "something"

Array Array.isArray(instance)

NaN isNaN(instance)

独自クラス instance instanceof class

ブラウザJS関連

GETパラメタの取得

code:js

var paiers = location.search.substring(1).split('&');

for(var i=0; i < paiers.length; i++){

}

一つのイベントに複数の処理を紐付け

code:js

window.addEventListener('load', function() {

console.log('リンゴ');

})

window.addEventListener('load', function() {

console.log('バナナ');

})

window.addEventListener('load', function() {

console.log('メロン');

})

JavascriptでDOMの削除

code:js

//特定の子要素削除

element.removeChild(child);

//自分を削除

element.parentNode.removeChild(element);

//子要素を全て削除

while (element.firstChild) element.removeChild(element.firstChild);

//子要素を全て削除(part2)

element.textContent = null;

// jQueryはこう

$("#button").on("click", function(){

$("#parent").remove();

});

contenteditable属性

HTMLを直接編集できるようにするなにがし

javascriptのthis

文字列<->数値変換

code:文字列->数値

parseInt('10px'); // 10

parseInt('ab123'); // NaN

parseInt('010'); // 8

parseInt('010',10): // 10

parseInt('0x10'); // 16

code:数値->文字列

10+'' // '10'

10.toString(); // for 10.toString().indexOf('1');

画面サイズ周りの取りまとめ

使う関数に応じてどこが取れるのか変わってくるらしい

code:js

var hoge = false;

// hogeが未定義、またはhogeがfalseの場合通過

// => hogeが定義済みかつhogeがtrueの場合弾く

if(hoge != null && hoge) return;