JavaScriptのソースを表示

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

* CAAT(高性能JavaScriptアニメーションフレームワーク) - http://labs.hyperandroid.com/static/caat/
* [[イベントハンドラ(javascript)]]
* [https://developer.mozilla.org/ja/docs/Web/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;                       // 何もない
                                      // 配列、オブジェクト

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

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

==真・偽==
<syntaxhighlight lang="javascript" line>
 // true / false 真偽
 if (x == 5) { // }

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

==論理演算子==
<syntaxhighlight lang="javascript" line>
 // 論理演算子 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>

==タイムアウト==
<pre class="brush:javascript;">
 // setTimeout: 前回の処理が終わったかどうかを考慮する
 // setInterval: 考慮しない

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

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

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

</pre>

==型も値の比較==
<pre class="brush:javascript;">
 // 厳密な比較演算子 ===  !== は型変換しないで比較、
 // ==  != は型変換して比較

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

==即時関数・無名関数==
<pre class="brush:javascript;">
 // 即時関数、無名関数
 (function() {
    console.log("hello world");
 })();
</pre>

==乱数==
<pre class="brush:javascript;">
 // 乱数
 // Math.random()
 // 0からnまでの整数値
 // var x = Math.floor(Math.random() * (n+1));

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


[[Category:javascript]]