menu
menu

キーワード検索

 

前月(9月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) 【jQuery入門】jQueryで日時を表示
  7. (10↑) 【HTML5】HTML5・ページ作成の基本
  8. ( 9↑) 【MySQL】Windows 10にMySQLをインストール
  9. ( 8↓) 【Mac Tips】MacにInkscapeをインストール
  10. ( 6↓) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

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

  • Guide

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

こんにちは(・∀・)

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では変数に使ってはいけない予約語というのがあります。

break case catch continue debugger default delete do else false finally for function if in instanceof new null return switch this throw true try typeof var void while with abstract boolean byte char class const double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile

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


関連リンク

jQuery入門
JavaScript入門

  • カテゴリー:Guide