【jQuery】入門6. 変数を宣言する

こんにちは（・∀・）

jQuery超入門は終わりましたが、jQuery超入門で解説しきれなかった内容はまだまだあり、「うーん、どうしよう...、ここら辺はもう少し知っておきたいよねー」、というような内容を拾ってやっていこうという、jQuery超入門の次のステップ、jQuery入門です。

jQuery超入門より少しステップアップしてよりjQueryの知識をもう少し広げることができるようにしたいと思います。

いきなり始まりましたjQuery入門ですが、今回は変数についてです。

それでは変数を宣言します...

変数を宣言

変数を宣言?!「何ですか、それは？！」って感じですよね。

$(function(){
$('#demo1').addClass(contents);
$('#demo2').addClass(contents);
});

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

$(function(){
var hoge = 'contents';
$('#demo1').addClass(hoge);
$('#demo2').addClass(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を付けてローカル変数で運用していくというようにした方が良いかと思います。

$(function(){
a = 'hoge';
$('window').on('load',function(){
var a = 'hogehoge';
$('#demo').text(a);
});
});

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

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

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

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

変数に使えない予約語

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

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

関連リンク

JavaScript入門
jQuery入門