menu
menu

キーワード検索

 

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

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

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

  • Guide

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

こんにちは(・∀・)

jQuery入門の【jQuery入門】変数を宣言するがあるので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では変数に使ってはいけない予約語というのがあります。

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