上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 第三回は「変数」です。
 「変数」と言う言葉を聞くと、ちょっとHTMLやCSSがいじれても、「やっぱりJavaスクリプトは…(汗)」とついつい敬遠してしまいます。
 「変数」って言われると、数学っぽくて非常にイヤな呼び名ですが、「格納庫」とか「入れ物」と考えると、全然難しくないことが分かります。

 変数は、数字や文字列なんかを入れることが出来る「箱」です。




変数の入れ方



 変数は、以下のように使います。

a=1;
b="あいうえお";


 こんな感じです。これは、「a」の箱に数値「1」が、「b」の箱に文字列「あいうえお」が入れられた様子です。
 これを前回使った「innerHTML」で出力すると…

<div id="koko1"></div>
<div id="koko2"></div>

    :
    :
    :

<script type="text/javascript">
<!--

a=1;
b="あいうえお";

document.getElementById("koko1").innerHTML=a;
document.getElementById("koko2").innerHTML=b;

//-->
</script>


 「koko1」のDIVブロック内には「1」
 「koko2」のDIVブロック内には「あいうえお」

 が表示されます。
 この箱が変数というものです。

■数値は半角数字で、文字列は「" "」や「' '」で囲んで代入します。

■変数名は、基本的に自由に設定出来ます「a」でも「b」「momo」でもOK。
 ですが、「予約語」という単語があって、その単語を変数にすることは出来ません。例えば「class」とか「function」とか、「width」とか。
 それを避けるために、怪しい、正しい英単語を利用しないことをお勧めします。綴りを間違えている英単語であれば、「予約語」と被ることはありません。

■大文字、小文字が区別されます。「aa」の箱と「Aa」の箱と「aA」の箱は、別の箱として区別されます。




変数の使い道



 例えば、先ほどの例文であれば、わざわざ「変数の箱」に「1」や「あいう」等を入れる(代入する、と言います)ような回りくどいことをせずとも、そのまま書けばいいじゃないかと言うことになります。

 これは、次の章で説明する「if文」と深く関わってきます。「if文」こそが、わざわざテンプレート屋がHTMLでJavaスクリプトを利用する最大の理由と言えるほどの大事な役割を担う構文なので、その構文に必要な機能として覚えておいてください。




変数で計算、変数の合体



 先ほど「数値」と「文字列」を強調して説明しました。変数には純粋な数値と、文字列を入れることが出来ます。
 形は同じですが、中身が数値か、文字列かによって、変数の振る舞いが変わるので覚えておいてください。




数値を代入した場合

 この場合、計算が出来るようになります。

a=1;
b=10+20;
c=a*b;
d=d+1;


 例えば、上のような変数を設定したとすると、
「a」…「1」
「b」…10+20で「30」
「c」…「a=1」x「b=10+20」で「30」
「d」…dは、何も入っていない状態なので、「0+1」で「1」
 こんな風に「計算された数値を変数に代入」「変数に代入された値を使って計算」することが出来ます。



文字列を代入した場合

 この場合は、結合が出来るようになります。

a="コルクマ";
b="怪しい";
c=a+b;


 この場合は
「a」…「コルクマ」
「b」…「怪しい」
「c」…「コルクマ」+「怪しい」で、「コルクマ怪しい」
 こんな風に変数に代入され、「+」を使えば、文字列の結合が出来ます。



文字列の変数と数値の変数を足すと?

 文字列になります。

a=1;
b="コルクマ";
c=b+a;

 こんな場合は、「c」に代入される値は、文字列「コルクマ1」となります。



■次回は「if文」の説明です。今回イマイチ何の役に立つのか分からなかった変数が生きてきます。
if文を使う
このエントリーをはてなブックマークに追加
Thu.03.24.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。