JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

最近はよくjQueryプラグインを使ったりすることが多くなってきたのですが、自分でちょっとカスタマイズしたりコードを読んでもさっぱり理解できないことが多々あるので1からJavaScriptを勉強してみようかと思いました。前に一回勉強したんですがすっかり忘れてしまっているのでまずは超基本的なことからマスターしていこうかと思います。

[ads_center]

JavaScriptの基本構文10項目

とりあえず超基本的な構文を見やすいようにまとめておきます。

1.Hello Worldを出力

まずはブラウザにHello Worldを出力します。

<script type="text/javascript">
var msg = "Hello World";
document.write(msg);
</script>

2.Hello Worldをアラートで表示

アラートで表示させたい場合はwindow.alert

<script type="text/javascript">
var msg = "Hello World";
window.alert(msg);
</script>

3.条件分岐 (if文1)

基本的なif文の条件分岐です。else ifはelseifだとダメなんですね。間に半角スペースを入れます。

<script type="text/javascript">
var num = 1;
if(num == 1) {
     msg = '1です';
} else if(num == 2) {
     msg = '2です';
} else {
     msg = '3です';
}
document.write(msg);
//実行結果 1です
</script>

4.条件分岐 (if文2)

単純な条件分岐だとこっちの方が楽かもしれません。

<script type="text/javascript">
var num = 1;
document.write(num == 1 ? '1です' : '1以外です');
//実行結果 1です
</script>

5.条件分岐 (switch文)

たくさん分岐がある場合にはif文では条件ブロックをその都度書くのがめんどくさそうなのでswitch文の方が見やすいです。

<script type="text/javascript">
var num = 1;
switch(num) {
     case 1:
     msg = '1です';
     break;
    
     case 2:
     msg = '2です';
     break;
    
     case 3:
     msg = '3です';
     break;
    
     default:
     msg = 'それ以外です';
     break;
}
document.write(msg);
//実行結果 1です
</script>

6.繰り返し (for文)

forを使った基本的な繰り返し構文です。ループ処理の回数が指定できる場合に使います。

<script type="text/javascript">
for (var i = 1; i <= 10; i++) {
     document.write(i);
}
//実行結果 12345678910
</script>

7.繰り返し (for…in)

指定した配列やオブジェクトを繰り返し処理します。

<script type="text/javascript">
var num = [1, 2, 3];
for(var i in num) {
     document.write(num[i]);
}
//実行結果 123
</script>

8.繰り返し (while文)

指定した条件式がtrueである間は繰り返し処理します。最初の条件がfalseだった場合は1度もループは実行されません。

<script type="text/javascript">
var num = 1;
while(num <= 10) {
     document.write(num);
     num++;
}
//実行結果 12345678910
</script>

9.繰り返し (do…while)

do…whileも指定した条件式がtrueの間は繰り返し処理します。ただしこちらは最初の条件がfalseだった場合でも1回はループを実行します。

<script type="text/javascript">
var num = 1;
do {
     document.write(num);
     num++
} while (num <= 10);
//実行結果 12345678910
</script>

10.例外処理 (try…catch…finally文)

例外が発生する可能性のあるものをtryブロックに書きます。もしその例外が発生した場合はcatchブロックに渡されます。下記は変数num2が未定義の場合の処理です。

<script type="text/javascript">
var num1 = 1;
try {
     num = num1 + num2;
} catch(e) {
     document.write(e.message);
} finally {
     document.write('処理完了');
}
//実行結果 num2 is not defined処理完了
</script>

かなり基本的なことなのですが使ってないとさっぱり忘れてしまいます。次に忘れた時にでも役立てばいいかなと思ったのでとりあえずここに残しときます。