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

シェアする

  • このエントリーをはてなブックマークに追加
PR

あーりーです。

頭の体操として、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を代入
document.write(xxx); // 変数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です。

「xxxx」という変数に「文字も代入できるよ」という言葉を代入しています。

この内容をメモ帳などにコピペしてHTML形式で保存し、ファイルを開くと、ブラウザには「文字も代入できるよ」と表示されます。

文字を代入するときはダブルクォートで囲む

文字を代入するときは、文字をダブルクォート(またはシングルクォート)で囲みます。

ダブルクォートっていうのは、この赤い部分のことです。

xxx="文字も代入できるよ";

と、こんなふうに、

JavaScriptではダブルクォート(またはシングルクォート)で囲むと、文字として扱えます。

注意

余談ですが、気を付けたい点があります。

ダブルクォート(またはシングルクォート)で囲むと文字としての扱いになる。

ということは…

もしも、まちがって変数をダブルクォート(またはシングルクォート)で囲んでしまうと、変数ではなくただの文字になってしまいます。

具体的に言うと、こんな感じです。

変数が変数として機能しない例

<html>
<head>
</head>
<body>

<script>
var xxx;
xxx="文字も代入できるよ";
document.write("xxx");
</script>

</body>
</html>

赤い部分を見ていただくと、変数がダブルクォートで囲まれています。

これ、本当は囲まなくて良いんです。

囲まなければ、「xxx」は変数として機能するので、そこに代入されている「文字も代入できるよ」という言葉が画面に表示されます。

でも、「xxx」をダブルクォートで囲むと、変数ではなくただの文字として扱われるので、「xxx」という文字そのものが画面に表示されます。

ではでは。

今日はこれでおしまい。

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする