JavaScript とりあえず覚えたデフォルト関数

随時追加方式。

htmlとの紐付け

htmlで記述されたid部分を読み込む関数: getElementById()

htmlでid='xxx'が設定された場所に'xxx'を表示する.

<p id="xxx"></p>

document.getElementById('xxx').innerText = 'Yo!';

指定実行系

関数を指定ミリ秒ごとに実行する: setInterval()

xxxという関数を50ミリ秒ごとに実行する.

setInterval(xxx, 50);

動作系

キーボードで何か押されたら何か処理を実施: onkeydown

何かのキーがキーボードにて押された場合、xxx関数が実施される
ちなみに、xxx()と記述するとキーが押された場合ではなく、ファイルが読み込まれた時に実施されるので注意.

document.body.onkeydown = xxx;

ボタンがクリックされたら何か処理を実施: onclick

htmlにて<button>がある場合のidを指定して記述.

sampleButton.onclick = () => {
  //process
}

= () =>の部分は、ES5ではfunction()でした.

ポップアップでOK/Cancelボタンを表示: confirm()

返り値はtrue/falseなのでif文でOKが押されたかどうかの分岐に使える.

if(confirm('Are you sure?')) {
  // process
}

変換系

charの値を整数(2進数)に変換する: charCodeAt()

下記だと120になります.

var x = 'xxx';
x.charCodeAt(0);

テスト系

console.assert()

第一引数に期待する結果、第二引数にエラーメッセージを記述する。

let result1 = 'xxx';
let result2 = 'yyy';
console.assert(result1 === result2, 'the results are supposed to be same.');

URLエンコード

encodeURIComponent()

URIの日本語を16進数に変換する.

encodeURIComponent('あ');

反対は、

decodeURIComponent()

配列作成

map()

map関数が呼ばれたオブジェクトの中身を新しい配列として生成する

[1, 2, 3].map(i => {
  return i * 2;
});