初心者による初心者のためのゲームアプリ作成 10

変数



変数を作る

変数の役割・意味については前回お話ししました。今回は、その続きです。メモリ上に変数を作ることを、変数の「宣言」と言います。コンピューターに「この名前の変数を今から使いますよ。」と知らせておく作業です。データーを扱う前には必ず変数の宣言を行います。

変数宣言の書式       var 変数名;

例 xという名前の変数を作る場合     var x;

変数の名前は、自由に付けられますが、読みやすいプログラムにするには、何のデーターが入っている変数なのかがわかりやすい名前にすることをお勧めします。例えば、金額のデーターを入れる変数を作るのであれば、その変数の名前は、「money」とか「price」とかデーターの内容を憶測しやすいものがいいと思います。

変数の使い方

変数を作った直後は何もデーターが入っていない空の状態です。変数にデーターを入れるには、下記のようにします。

変数へ値を入れる     変数名 = 値;

例 変数xに「10」という数値を入れる。     x = 10;

例 変数xに「こんにちは」という文字列を入れる。    x = “こんにちは”;

JavaScriptで文字列データーを扱う場合、ダブルクォートまたはシングルクォートで囲むんでしたね。注意しなければならないのは、この「=」記号は算数の「=」記号とは意味が異なるということです。算数の場合は左辺と右辺の値が等しいということを意味しますが、JavaScriptの場合は、右辺の値を左辺に入れる、代入するという意味になります。なお、変数へ値を入れることを、値の「代入」といいます。よく使う言葉なので覚えておくといいと思います。

変数の宣言と代入は、1行にまとめて同時に行うこともできます。

例 var 変数名 = 値;

JavaScriptから画面にデーターを出力する

データーアプリなどの画面に表示する方法はたくさんありますが、ここでは、1番簡単な命令を使って試してみたいと思います。

document.writeln(表示するデーター);

この命令を使うと、<body>タグ内の最上部の位置にデーターが書き込まれます。

<body>

※※※ ここにデーターが書き込まれます。

<div>

<p>おはようございます</p>

</div>

</body>

ちょっと、やってみましょうか。

Monacaにログインし、最小限のテンプレートのプロジェクトを開き、そのindex.htmlファイルを下記のように書き換えてみましょう。

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
<meta http-equiv=”Content-Security-Policy” content=”default-src * data: gap: content: https://ssl.gstatic.com; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval'”>
<script src=”components/loader.js”></script>
<link rel=”stylesheet” href=”components/loader.css”>
<link rel=”stylesheet” href=”css/style.css”>
<script>
var today = “バレンタイン”;
document.writeln(today);
</script>
</head>
<body>
<br />
チョコ貰えるといいな。
</body>
</html>

Monacaの画面で説明すると、10行目から13行目の<script></script>タグの間に、

var today = “バレンタイン”;
document.writeln(today);

を追加し、17行目を、チョコ貰えるといいな。と書き換えて、保存をクリックして、プレビュー画面を見てみて下さい。上から

バレンタイン
チョコ貰えるといいな。

と表示されているはずです。次回は、日付を扱うための命令「Date」を使って、今日の日付を取得するプログラムを作成したいと思います。


スポンサーリンク







シェアする

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

フォローする

スポンサーリンク