JavaScript

ちょっと離れると忘れちゃうんでmemo

CAAT(高性能JavaScriptアニメーションフレームワーク) - https://hypertolosana.github.io/caat/
イベントハンドラ(javascript)
MDN Web doc

コメントの書き方

<syntaxhighlight lang="javascript" line> // // 以降がコメント

/* 複数行にまたがったコメント

/

</syntaxhighlight>

変数の宣言

<syntaxhighlight lang="javascript" line> // 変数の宣言 var message = "Hello World, Again!"; // 文字列 var d1 = -5.5; // 数値 var d2 = false; // 真偽 var d3 = undefined; // 定義されていない var d4 = null; // 何もない var d5 = []; // 空の配列 var d5[0] = "a"; // １つ目の配列要素に "a" を追加。

// アラート表示 alert(message);

// 単項演算子 ++ -- var x = 0; var y = x++; alert(y); </syntaxhighlight>

真・偽

// true / false 真偽
if (x == 5) { // }

// 文字列 : 空文字だとfalse
// 数値 : 0かNaNだとfalse
// undefined = false
// null = false
// true/false = そのまま
// object/配列 = true

</syntaxhighlight>

論理演算子

// 論理演算子 AND(&&) OR(||) NOT(!)
if ((x > 2) && (x < 5)) {
    // x が2より小さい "か" ５より小さい ならなんらかの処理
}

if ((x > 2) || !(x < 5)) {
    // x が2より小さい "または" ５より小さくない ならなんらかの処理
}

if !(x < 5) {
    // x が ５より"小さくければ"なんらかの処理
}

// switch
var x = 0;
switch (x) {
  case 0:
  case 1:
         // 0 1 は同じ処理
         break;
  case 2:
         //
         break;
  default:
         //
         break;
}

// ループ（while）
while (x < 10) {
   // なにかの処理。条件に合わなかったら実行されない
}
       
do {
   // なにかの処理。一度は実行される。
} while (x < 10);

</syntaxhighlight>

三項演算子

<syntaxhighlight lang="javascript" line> // if 文の省略記法 // 三項演算子 // (条件) ? (真だった場合の値) : (偽だった場合の値) if( a>b )

 a=b;

else

 a=c;

// 上のif文の省略記法。 (a>b)? a=b : a=c ;

// 例 var sex = ; if (sex == '男性') {

   price = 5000;

} else {

   price = 3000;

}

// 三項演算子にすると price = (sex == '男性') ? 5000 : 3000;

// 三項演算子は式なので var arr = ["○","×"]; var exist = true; document.write( arr[exist?0:1] );

</syntaxhighlight>

タイムアウト

// setTimeout: 前回の処理が終わったかどうかを考慮する
// setInterval: 考慮しない

//setInterval(function() {
    // 1秒以上の処理 → クラッシュ
//}, 1000);

var i = 0;
/*
   setInterval(function() {
     console.log(++i);
   }, 1000);
*/

function plusOne() {
   console.log(++i);
   setTimeout(plusOne, 1000);
}
plusOne();

</syntaxhighlight>

型も値の比較

// 厳密な比較演算子 ===  !== は型変換しないで比較、
// ==  != は型変換して比較

var a = 5;
var b = "5";
console.log(a !== b);

// 数値とブール値
alert(1 == true);// true
alert(0 == false);// true
alert(1 === true);// false
alert(0 === false);// false

// 数値と文字列
var a = 10;
var b = "10";
alert(a == b);// true
alert(a === b);// false

// オブジェクト
var a = [1,2,3];
var b = a;
alert(a == b);// true 
alert(a == [1,2,3]);// false

// 文字列と String オブジェクト
var a = "abc";
var b = new String("abc");
alert(a == b);// true
alert(a === b);// false

</syntaxhighlight>

即時関数・無名関数

// 即時関数、無名関数
(function() {
   console.log("hello world");
})();

</syntaxhighlight>

乱数

// 乱数
// Math.random()
// 0からnまでの整数値
// var x = Math.floor(Math.random() * (n+1));

// 1から6まで
var y = Math.floor(Math.random() * 6) + 1;

</syntaxhighlight>