JavaScript入門編総まとめ

インラインでJavaScriptを記述する場合はscript要素の中に書く。場所はどこでも良い。一般的にbodyタグの閉じタグの直前に書く。

<script>

// ここにJavaScriptの処理かくよー

</script>

外部JavaScriptを読み込む場合はscript要素のsrc属性にパスを記述。JavaScriptファイルの拡張子は『.js』。

<script src="./hoge.js"></script>

詳細はこちらへ

以下がコメントアウト

// これは一行コメントです。スラッシュが2 つ並んだ後の文字はすべてコメントです。

/*
複数行にまたがる場合はこっち使ってください。
この間がコメントです。CSSのコメントアウトと文法一緒です。
*/

詳細はこちらへ

アラートダイアログを表示できる。デバッグなどに使用される。

alert("JavaScript練習中");

詳細はこちらへ

コンソールへメッセージを出力できる。アラート関数よりも細かく中身を表示できる。デバッグ等で使用される。

console.log("Hello world");

詳細はこちらへ

様々な値を入れられる。『var』を記述して宣言する。代入は『=』を使用する。

var x = 1;

ネーミングルールは以下。

• 使用できる文字はUnicode(ユニコード)文字と『$』(ダラー)『_』、(アンダーバー)
• 先頭文字に数字は使用不可
• 大文字小文字は区別される
• 予約語は使用不可

詳細はこちらへ

JavaScriptでは『"』と『'』でくくったものは文字列となる。『"』と『'』の違いはない。文字列同士の加算は文字連結となる。通常の文字列で表記できないものは『エスケープシーケンス』を使用する。

"JavaScript練習中"

数値はそのまま数値を入力すれば良い。

var x = 1;

真偽値とは『true』か『false』を意味する値の事。if文などで良く使用される。

var x = true;
var y = false;

詳細はこちらへ

JavaScriptの算術演算子は加算は『+』、減算は『-』、乗算は『*』、除算は『/』、そして剰余(割り算した時の余り)は『%』を使用する。『+』で文字連結も可能。値が数値の場合は『インクリメント』か『デクリメント』ができる。

var x = 1 + 2;
var y = ++x;

詳細はこちらへ

配列とは連番がついた変数の集合体のようなもの。『.length』で配列の数が取得できる。

var x = [1, 2];
x[2] = 0;
x[3] = 1;
var y = x.length;

詳細はこちらへ

HTML要素をid名から取得できる。

document.getElementById("test");

詳細はこちらへ

何かしらの手法で要素を特定した後『.innerHTML』で中身の書き換えができる。htmlタグもそのまま記述できる。

<p id="test">初めてのJavaScript勉強中だよ！</p>

<script>
var elem = document.getElementById("test");
elem.innerHTML = "<span style='color: red;'>span要素に変更したよ！</span>";
</script>

詳細はこちらへ

関数で処理をまとめて定義することができる。引数を使えば関数の実行ごとに値等を渡せるようになる。

function addition(x){
    var y;
    y = x + 1;
    console.log(y);
}

addition(10);

詳細はこちらへ

イベント登録が可能。イベント属性に記述すると上書きされたりする危険があるためaddEventListener()関数でイベント登録することが一般的。

<p id="hoge">アラートを実行するよ！</p>

<script>
var elem = document.getElementById("hoge");

elem.addEventListener("click", function(){
    alert('hoge1');
}, false);
</script>

詳細はこちらへ

とある命題で『真』(true)か『偽』(false)を返す処理を行う演算子。一覧は以下。『==』と『!=』は厳密な比較を行わないため非推薦とされることが多い。

console.log(1 < 2);

詳細はこちらへ

『もし～ならば』という処理を行う。使用頻度は非常に高い。

if(false){
    console.log("実行されました！");
}
else if(false){
    console.log("実行されました！その2");
}
else{
    console.log("実行されました！その3");
}

詳細はこちらへ

論理演算子は『&&』、『||』、『!』の3つ。

『&&』は『論理積演算子』と呼ばれる。『両オペランド(両辺)がtrue』だったときにその式全体の評価が『true』となる。

if(true && true){
    alert("実行されました！");
}

『||』は『論理和演算子』と呼ばれる。『両オペランド(両辺）の片一方がtrue』だったときにその式全体の評価が『true』となる。

if(true || false){
    alert("実行されました！");
}

『!』は『論理否定演算子』と呼ばれる。オペランドの値を『真偽値』として評価したあとその値を反転させる。一覧は以下。

if(!false){
    alert("実行されました！");
}

詳細はこちらへ

分岐処理することができる。同時に多数の分岐処理が可能。

var num = 1;

switch(num){
    case 1:
        alert("1です！");
        break;
    case 2:
        alert("2です！");
        break;
    case 3:
        alert("3です！");
        break;
    default:
        alert("defaultです！");
        break;
}

詳細はこちらへ

繰り返し処理を行うことができる。使用頻度は非常に高い。配列の数に合わせて構文が作られることが多い。

var array = [0, 1, 2, 3, 4, 5];
for(var num = 0; num <= array.length -1 ; ++num){
    console.log(num);
}

詳細はこちらへ

繰り返し処理を行うことができる。for文と違ってループ処理をさせる条件は基本構文の中に含まれていないので注意すること。

var num = 0;

while(num < 10){
    console.log(num);
    ++num;
}

「1度だけ必ず処理を行わせ、その後は状況に合わせてループ処理をさせたい」といった場合には『do...while文』を使用する。末尾の『;』の記述忘れに注意。

var num = 0;

do{
    console.log(num);
    ++num;
}while(num < 10);

詳細はこちらへ