アリクイあくしょんで使ったJavaScript一覧

JavaScriptの基本知識

const 変数名 = 値・式;
let 変数名 = 値・式;

変数名.src = "画像.拡張子";

function 関数名(引数1, 引数2, ...) {
  // 処理（命令）
}
  変数名.length = 値;
  変数名１.push(...変数名２.map(引数 => ({ ...引数 })));

if (条件1) {
  // 条件1が true のときの処理
} else if (条件2) {
  // 条件1が false で、条件2が true のときの処理
} else {
  // 条件1 も 条件2 も false のときの処理
}

関数名(引数);  //呼び出し　引数はなくてもOK

window.addEventListener("keydown", (引数) => { 命令　複数なら波括弧が必要; });
window.addEventListener("keyup", (引数) => { 命令　複数なら波括弧が必要; });
変数名.addEventListener("mousedown", () => 命令);
変数名.addEventListener("mouseup", () => 命令);
変数名.addEventListener("mouseleave", () => 命令);
変数名.addEventListener("touchstart", (引数) => { 命令　複数なら波括弧が必要;});
変数名.addEventListener("touchend", (引数) =>  { 命令　複数なら波括弧が必要;});

canvas.getContext("2d").fillStyle = "色などのスタイル内容";
canvas.getContext("2d").fillRect(x座標, y座標, 幅, 高さ);

配列名.forEach(引数 => { // この引数は、配列の中の要素1つが順番に入る変数 });

canvas.getContext("2d").save();         // 現在の描画状態を保存
canvas.getContext("2d").translate();    // 描画位置を移動（引数必要）
canvas.getContext("2d").scale();        // 拡大・縮小（引数必要）
canvas.getContext("2d").drawImage();    // 画像を描画（引数必要）
canvas.getContext("2d").restore();      // 保存した描画状態を復元

if (img.complete) {  //画像の読み込みが完了していれば true }

canvas.getContext("2d").font = "32px sans-serif";
canvas.getContext("2d").textAlign = "center";
canvas.getContext("2d").fillText("テキスト", x座標, y座標);
canvas.getContext("2d").textBaseline = "middle";

Math.abs(数値);  //絶対値（正の数または0）を返す

draw変数名();　//位置とサイズ情報が入った変数でないと描画されない

requestAnimationFrame(関数オブジェクトが入った変数名);  //関数を次の画面更新タイミングで呼ぶ

window.innerWidth;
window.innerHeight;

Math.min(値１, 値２);

window.addEventListener("resize", 変数名);