JavaScriptで「変数」に数字や文字を代入する方法

JavaScript

あーりーです。

頭の体操として、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と表示されます。

 

参考:JavaScriptで画面に文字を表示する方法

 

以上が、今回のサンプルの内容です。

文字も代入できる

ところで。

 

変数に代入できるのは、数字だけじゃありません。

文字も代入できます。

 

こんな感じです。

<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入門」にまとめてあります。よろしければご覧ください。

タイトルとURLをコピーしました