あーりーです。
頭の体操として、JavaScriptをマイペースで勉強しています。
これまでの内容は「初心者のための超わかりやすいJavaScript入門」にまとめてあります。
さて～。
今日は「変数」について。
「変数」を習得すると、JavaScriptでいろんなことができるので、ぜひガッチリ身に付けておきたいですね。
変数とは？
中学校の数学の授業で…
x=100
っていう書き方が出てきましたよね。
この意味は…
「x」という文字に100という情報を代入する、です。
JavaScriptの変数とは、この「x」のことです。
変数はどんな文字でもOK（例外あり）
いまは「x」を例に出しました。
javaScriptの変数は「x」に限りません。
「a」でも「b」でも「c」でも「aiueo」でも、なんでもOKです。
（例）
a=10
b=15
c=80
aiueo=500
こうすると…
「a」という文字に10という情報が代入されます。
「b」という文字に15という情報が代入されます。
「c」という文字に80という情報が代入されます。
「aiueo」という文字に500という情報が代入されます。
何が言いたいかというと、変数は何でもOKですよ、自由に変数の名前を作ることができますよ、っていうことです。
ただし、例外があります。
変数の名前に使えない文字
あらかじめJavaScriptで使われている文字（予約されている文字）は、変数に使えません。
たとえば…
true
false
if
for
など。そのほか多数です。
これらの文字には意味があって、JavaScriptの中で使われるので、変数として使うことができません。
実際に使ってみよう
変数とは何かがわかったところで、実際にJavaScriptの中で使ってみます。
今回のサンプルはこちらです。
↓
<html> <head> </head> <body> <script> var xxx; // 変数xxxを使う宣言 xxx=100; // 変数xxxに100を代入 // 変数xxxを画面に表示 document.write(xxx); </script> </body> </html>
※ゴチャゴチャしないように、究極にシンプルにしてあります。
緑色の部分がJavaScriptです。
赤い部分は説明のためのコメントです。ここは、あってもなくても実行結果に影響はありません。
これだけパッと見ても、ちんぷんかんぷんですよね。
では、ひとつ一つ確認していきましょう～。
JavaScriptを記述する場所
まず、JavaScriptを書く場所について。
JavaScriptを書く場所は、3種類あります。
外部ファイルに書く方法や、HTML内の<head>タグや<body>タグ内に書く方法です。
今回は、<body>タグ内に書いています。
<script></script>タグに挟まれた部分が、JavaScriptです。
このJavaScriptの内容
このJavaScriptは…
「xxx」という変数に100という情報を代入して、それを画面に表示する、というものです。
だから、上の内容をメモ帳などにコピペしてHTML形式で保存し、ファイルを開くと…
ブラウザには100と表示されます。
変数を使うぞ宣言
では、JavaScriptの部分を1行ずつ見ていきます。
JavaScriptで変数を使うには、宣言が必要です。
この変数を使います！っていう宣言です。
それが、
var xxx;
です。
この意味は…
今から「xxx」を変数として使いますよ～！という宣言です。
変数に情報を代入する
宣言が終わったら、晴れて変数が使えるようになります。
というわけで…
さっそく変数に情報を代入します。
それが
xxx=100;
です。
これによって「xxx」という変数に、100という情報が代入されます。
情報を画面に表示する
あとは、変数に代入された情報を画面に表示します。
それが
document.write(xxx);
という部分です。
これは「xxx」という変数を画面に表示させる命令です。
「xxx」には100という情報が入っていますから、画面には100と表示されます。
以上が、今回のサンプルの内容です。
文字も代入できる
ところで。
変数に代入できるのは、数字だけじゃありません。
文字も代入できます。
こんな感じです。
↓
<html> <head> </head> <body> <script> var xxx; xxx="文字も代入できるよ"; document.write(xxx); </script> </body> </html>
緑の部分がJavaScriptです。
「xxx」という変数に「文字も代入できるよ」という言葉を代入しています。
この内容をメモ帳などにコピペしてHTML形式で保存し、ファイルを開くと、ブラウザには「文字も代入できるよ」と表示されます。
文字を代入するときはダブルクォートで囲む
文字を代入するときは、文字をダブルクォート（またはシングルクォート）で囲みます。
ダブルクォートっていうのは、この赤い部分のことです。
↓
xxx="文字も代入できるよ";
と、こんなふうに、
JavaScriptではダブルクォート（またはシングルクォート）で囲むと、文字として扱えます。
注意
余談ですが、気を付けたい点があります。
ダブルクォート（またはシングルクォート）で囲むと文字としての扱いになる。
ということは…
もしも、まちがって変数をダブルクォート（またはシングルクォート）で囲んでしまうと、変数ではなくただの文字になってしまいます。
具体的に言うと、こんな感じです。
↓
変数が変数として機能しない例
<html>
<head>
</head>
<body>
<script>
var xxx;
xxx="文字も代入できるよ";
document.write("xxx");
</script>
</body>
</html>
赤い部分を見ていただくと、変数がダブルクォートで囲まれています。
これ、本当は囲まなくて良いんです。
囲まなければ、「xxx」は変数として機能するので、そこに代入されている「文字も代入できるよ」という言葉が画面に表示されます。
でも、「xxx」をダブルクォートで囲むと、変数ではなくただの文字として扱われるので、「xxx」という文字そのものが画面に表示されます。
ではでは。
今日はこれでおしまい。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
