sunagae.net

入門の入門部分だけざざっと。

★基本文法

コメント

 // ここはコメント
 /* ここもコメント */

関数(メソッド)定義

function 関数名( パラメータ ){
  // 関数の内容;
  //  ・・・
}

※パラメータ は省略可

関数(メソッド)呼び出し

// フツーの関数を呼ぶ
間数名( パラメータ );
// 返り値を変数に入れとく場合
変数 = 間数名( パラメータ );
// オブジェクトの関数 (メソッド) を呼ぶ
オブジェクト.メソッド名( パラメータ );

// 具体例 Math.max: 与えたパラメータのうち大きなほうを返すメソッド
var a = Math.max(5, 10); // aには 10 が代入される

※パラメータ は省略可

変数の操作

a = 5;  // aに5を代入する
a += 1; // aに1を足す
b = a * 6;  // bにaの五倍 (36になる) を代入する
s = '文字列'; // sに「文字列」と代入された
m = 'bの値は' + b + 'です'; // 連結: mに"bの値は36です" と代入される
n = "シングルクォートとダブルクォートはどっちでもいい";

条件分岐: if文

※「条件式」の書き方は次節

if( 条件式A ){
   // 処理内容; ←ここは「条件式A」が真のとき実行される
}
else if( 条件式B ){
   // 処理内容; ←ここは「条件式A」が偽だけど「条件式B」が真のとき実行される
}
else if( 条件式C ){
   // 処理内容; ←ここは「条件式A,B」が偽だけど「条件式C」が真のとき実行される
}
else{
   // 処理内容; ←ここは「条件式A,B,C」の全てが偽のとき実行される
}

※ 「else if(){ ～ }」や「else{ ～ }」 は省略できます。

ループ: for文

// 定型文
for(var 変数 = 初期値; 変数 < 終了値; 変数++){
    // 繰り返し行う処理内容
}

// 0～9まで「今の数字は○○です」と表示 (alert) させたい場合
for(var i = 0; i < 10; i++){
   alert('今の数字は' + i + 'です');
}
// ※ 「i < 9」ではなく「i < 10」なのに注意

 

条件式

※ 真＝正しい、偽＝ただしくない、みたいな感じ

// 基本形
(a == 50)   // aが50の場合に真
(a == "hoge") // aが"hoge"の場合に真
(a == b)   // aの内容とbの内容が等しい場合に真
(a != b)   // aの内容とbの内容が違う場合に真
(a > 5)   // aが5より大きい場合に真
(a < 5)   // aが5より小さい場合に真 if(a >= 5)   // aが5「以上」の場合に真
(a <= 5)   // aが5「以下」の場合に真

// 複合条件
( ! 条件式 )   // 「条件式」が偽の場合に真
(! (a == 4) )   // !の例: (a != 4) と同じ意味

( 条件式A && 条件式B ) // 「AかつB」: 条件式AとB両方共真の場合に真
( 条件式A || 条件式B ) // 「AまたはB」: 条件式AかB片方でも真の場合に真
( (a == 4) || (a == 5) )  // aが4か5の場合に真
( (1 <= a) && (a <= 10) )  // aが1～10の場合に真
(  1 <= a  &&  a <= 10  )  // 括弧は省略できる

★基本ライブラリ

デバッグ等のためにメッセージダイアログを表示する

alert('表示させたいメッセージ');

指定時間待って処理を続ける (setTimeout)

// 指定「ミリ秒」後に「関数」を呼び出す
setTimeout(関数, ミリ秒);

// 指定「ミリ秒」後にやりたい処理をベタ書きする
setTimeout(function(){
    // やりたい処理;
    //  ・・・
}, ミリ秒);

★jQuery等外部ライブラリのもの

初期化時に実行される処理の書き方(jQuery)

$(function(){
    // 初期化時にやりたいこと;
    //  ・・・
});

 

セレクタで指定した要素のCSSを変える (color, visibility とか)

$('セレクタ').css('CSS項目名', '変える値');

セレクタで指定した要素の「属性」を変える (src, href とか)

$('セレクタ').attr('CSS項目名', '変える値');

入門の入門でした。 以上。