【JavaScript】入門3. 変数を宣言する

こんにちは（・∀・）

jQuery入門の【jQuery】入門6. 変数を宣言するがあるのでJavaScript入門での変数についてはそちらを参照するのでも良かったのですが、JavaScript入門でもおさらいを兼ねてやっていこうということとなりました。

変数を宣言

JavaScriptで変数を宣言する方法です。

function(){
document.getElementById('demo1').classList.add('contents');
document.getElementById('demo2').classList.add('contents');
}

上記サンプルでは#demo1と#demo2にcontentsというクラスを追加しようとしています。ところがcontentsをmainに変えたくなった場合どうなるでしょう。一つづつcontentsからmainに変更していかなくてはなりません。サンプルでは2つですからいいのですが、これがもっと多かったらとても面倒なことになってしまいます。そこで登場するのが変数です。

function(){
var hoge = 'contents';
document.getElementById('demo1').classList.add('hoge');
document.getElementById('demo2').classList.add('hoge');
}

var hogeというのが変数です。hogeという箱だと思ってください。このhogeの箱にcontentsを入れておけばhogeの中身はcontentsという意味になります。そうするとどうなるか、サンプルコードを見ていただければわかると思いますが、contentsをmainに変更したくなった場合var hogeの一か所を変えるだけでよくなることがわかると思います。もちろん今までcontentsと入れていた場所にはhogeを入れるのを忘れずに。

変数の宣言の仕方

var a; //aという変数を宣言
var b = 'hoge'; //bという変数を宣言してhogeを代入
var c,d //cとdという変数をまとめて宣言
var e,f = 'hoge'; //eとfという変数をまとめて宣言してfにhogeを代入

ちなみに変数にはvar hogeというようにvarが付く変数と、varが付かない変数があります。varが付かない変数はグローバル変数といってそのプログラム全体で使える変数で、varが付く変数はローカル変数といって宣言された関数内で使用することができます。

しかし、どうしてもグローバル変数を使わなければならないという場合は別ですが、なるべく変数宣言varを付けてローカル変数で運用していくというようにした方が良いかと思います。

<script>
e = 'hoge';
function hoge(){
var e = 'hogehoge';
alert(e);
}
window.addEventListener('load',hoge,false);
</script>

上記の例ではグローバル変数eをローカル変数var eが上書きしてhogehogeが返されます。ローカル変数var eが宣言されていない場合はグローバル変数eが適用されます。

また、変数には種類があり、その種類のことを「データ型」といいます。

var hoge1 = 'contents';
var hoge2 = 1234;
var hoge3 = true;

hoge1には文字列が入っておりますダブルクォーテーションまたはクォーテーションで括ります。
hoge2には数値が入っております。
hoge3には可否が入っております。true or falseで可否を決めます。

変数に使えない予約語

JavaScriptでは変数に使ってはいけない予約語というのがあります。

上記予約語は使わないように注意しましょう。

関連リンク

jQuery入門
JavaScript入門