Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. JavaScript入門編 - JavaScript入門編総まとめ

JavaScript入門編総まとめ

みなさまどうもこんにちは。

というわけでここまで勉強されてきた方はとってもお疲れ様でした。こちらが総まとめとなります。もし忘れてしまった項目などありましたらこちらで再確認しちゃってください。

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;

詳細はこちら

document.getElementById()関数

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

document.getElementById("test");

詳細はこちら

innerHTML

何かしらの手法で要素を特定した後『.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()関数

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

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

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

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

詳細はこちら

比較演算子

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

== オペランド同士が等しいならば『true』を返します。
=== オペランド同士が厳密に等しいならば『true』を返します。
!= オペランド同士が等しくないならば『true』を返します。
!== オペランド同士が厳密に等しくないならば『true』を返します。
> 左オペランドが右オペランドより大きいならば『true』を返します。
>= 左オペランドが右オペランドより大きいまたは等しいならば『true』を返します。
< 左オペランドが右オペランドより小さいならば『true』を返します。
<= 左オペランドが右オペランドより小さいまたは等しいならば『true』を返します。
console.log(1 < 2);

詳細はこちら

if文

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

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("実行されました!");
}

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

文字列 true
空の文字列 false
数値の『0』 false
『0』以外の整数 true
null false
undefined false
if(!false){
    alert("実行されました!");
}

詳細はこちら

switch文

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

var num = 1;

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

詳細はこちら

for文

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

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

詳細はこちら

while文とdo...while文

繰り返し処理を行うことができる。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);

詳細はこちら

というわけで以上となります。このような駄文をここまでお読み頂きありがとうございました。またどこかでお会いできれば幸いです。当サイトの情報があなたの知力となりますように。

ではこの辺で失礼致します。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。