JavaScript

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

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

コメントの書き方

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

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

/

</syntaxhighlight>

データ型

NUll … 存在しないオブジェクトを表す。オブジェクトが存在しないことを明示的に示すために使用する。NULL型の値は Nullのみ。
Undefined　… 未定義の値を表す。初期化されていないデータは、この Undefined型を持つ。意図的に Undefined 型の値を仕様したい場合は、 Undefined を使用する。
真偽値型（boolean） … 条件が成り立つか成り立たないかを表す。真偽値型の値は、true（真、条件が成り立つ）と false （偽、条件が成り立たない）の２つのみ
数値型 (number) … 有限の少数を表す。javascriptで数値を表す場合は、主にこの型を使用する。表現できる値の範囲が限られている。
長整数型 (bigint)… 上下限のない整数値を表す。
文字型 (string) … 文字列、つまり文字の並びを表す。
シンボル型(symbol) … 同じ値を複数作ることができない一意の値を表す。基本的にはシステムによって作成され、開発者が作成することはほぼ無い。
オブジェクト型 (object) … 下部構造を持つデータを表す。データやそのデータに対する処理を内部的に持つことが出来る。

- データ系は、typeof 演算子で確認できる。
- 非オブジェクト型の NUll, Undefined, 真偽値型（boolean）, 数値型 (number), 長整数型 (bigint), 文字型 (string), シンボル型(symbol) の値は"プリミティブ"と呼ばれる。（内部的な構造が無い代わりに演算子を用いた処理の効率がよく早い。）<< LISP でいうところの Atom に近いかも。

変数の宣言

<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>