Chapter02 演算と変数

概要と目標 数値を計算する演算や、
データを保管する変数を使ってみる。

JavaScriptでの足し算や引き算などの演算や、変数の使い方などを理解し、
割り算計算機プログラムを作成できるようになろう。

今回のゴール

RERUN

新しいウインドウで表示する

プログラミングの基礎 プログラム言語はたくさんある。
どのプログラム言語も基本は同じ。

プログラム言語と呼ばれるものは数多く存在しするが、
理解すべきポイントは同じ。

  • 演算 ・・・ 数値の計算
  • 変数 ・・・ データを一時的に保存する箱
  • 分岐 ・・・ 処理の流れを変える
  • 反復 ・・・ 同じ処理を繰り返す
  • 関数 ・・・ 予め決められた処理を行う

この5つのポイントを理解すれば、他の言語の習得も容易になる。

演算とは 数値の計算。

算術演算子を用いて数値を計算することを四則演算と呼ぶ。

主な算術演算子
算術演算子 説明
+ 加算
- 減算
* 掛け算
/ 割り算
% 余り

演算を使ってみよう！

  1. 「chapter02」 › 「operate」フォルダ内の「app.js」をテキストエディタで開く
  2. 下記のJavaScriptを追記
chapter02/operate/app.js
console.log( 10 + 10 );
console.log( 4 - 2 );
console.log( 5 * 2 );
console.log( 8 / 3 );
console.log( 5 % 2 );
  1. 上書き保存
  2. ブラウザで「chapter02」› 「operate」フォルダ内の「index.html」をブラウザで表示
  3. ブラウザのコンソールを開き計算結果を確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

変数とは データを一時的に保存する箱。

プログラムを完成させる過程で何度も使うデータは、変数に保存しておく。
変数を使う時は、宣言する必要がある。
変数にデータを入れる時は、代入演算子を使う。

変数の宣言
var 変数名 = 代入するデータ;
              省略可

「,」で区切れば複数同時に宣言できる
「=」は 代入演算子（左辺 に 右辺の内容を代入する）

変数を使ってみよう！

  1. 「chapter02」 › 「variable」フォルダ内の「app.js」をテキストエディタで開く
  2. msgという変数に 「こんにちは」 という文字列を代入し、画面とコンソールに表示する
chapter02/variable/app.js
// 変数の宣言
var msg = 'こんにちは';

// 変数の中身を出力
document.write(msg);
console.log(msg);
  1. 上書き保存
  2. ブラウザで「chapter02」 › 「variable」フォルダ内の「index.html」をブラウザで表示
  3. 変数の中身が表示されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

変数を上書きしてみよう

一度宣言した変数に、違う値を代入すると箱の中身が上書きされる。

  1. 「chapter02」 › 「variable」フォルダ内の「app.js」をテキストエディタで開く
  2. msgという変数に 「こんばんは」 という文字列を代入し、画面とコンソールに表示する
chapter02/variable/app.js
// 変数の宣言
var msg = 'こんにちは';

// 変数の中身を出力
document.write(msg);
console.log(msg);

// 変数の中身を上書き
msg = 'こんばんは';

// 変数の中身を出力
document.write(msg);
console.log(msg);
  1. 上書き保存
  2. ブラウザで「chapter02」 › 「variable」フォルダ内の「index.html」をブラウザで表示
  3. 画面に変数の中身が表示されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

様々な代入 変数には数値や
promptで入力された文字も入れれる。

変数は文字列を直接代入する以外にも、 数値を代入して、計算することや、
promptで入力されたテキストを代入することも出来る。
promptで入力されたテキストは、何もしなければそのまま消えるので、
基本的に変数に保存しておく。

変数に様々なデータを代入してみよう

  1. 「chapter02」 › 「variable」フォルダ内の「app.js」をテキストエディタで開く
  2. 数値や数値や変数に入れて演算したり、 promptで入力されたテキストを変数に保存し表示する
chapter02/variable/app.js
// 変数の宣言
var msg = 'こんにちは';

// 変数の中身を出力
document.write(msg);
console.log(msg);

// 変数の中身を上書き
msg = 'こんばんは';

// 変数の中身を出力
document.write(msg);
console.log(msg);

// 数値を代入
var x = 5;
var y = 2;

// 変数で演算
var result = x * y;

// 変数の中身を出力
document.write(result);

// 入力されたテキストを変数に保持
var name = prompt('お名前を入力して下さい。');

// 変数の中身を出力
document.write(name);
console.log(name);
  1. 上書き保存
  2. ブラウザで「chapter02」 › 「variable」フォルダ内の「index.html」をブラウザで表示
  3. 入力されたテキストが表示されるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

文字列の結合演算子 1度の出力命令で、
複数の値を出力。

文字列と変数などを1つのdocument.write()やconsole.log()などで同時に出力するには、
+（結合演算子）を使う。

文字列の結合演算子を使ってみよう！

  1. 「chapter02」 › 「variable」フォルダ内の「app.js」をテキストエディタで開く
  2. 文字と変数を同時に出力するように変更
chapter02/variable/app.js
// 変数の宣言
var msg = 'こんにちは';

// 変数の中身を出力
document.write(msg);
console.log(msg);

// 変数の中身を上書き
msg = 'こんばんは';

// 変数の中身を出力
document.write(msg);
console.log(msg);

// 数値を代入
var x = 5;
var y = 2;

// 変数で演算
var result = x * y;

// 変数の中身を出力
document.write(result);

// 入力されたテキストを変数に保持
var name = prompt('お名前を入力して下さい。');

// 変数の中身を出力
document.write('<p>' + name + 'さん' + msg + '</p>');
console.log(name + 'さん' + msg);
  1. 上書き保存
  2. ブラウザで「chapter02」 › 「variable」フォルダ内の「index.html」をブラウザで表示
  3. 入力されたテキストが表示されるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

変数名のルール 変数名には使えない名前がある。

変数名は以下のルールに基づいて命名する必要がある。

  • 使える文字は半角英数字
  • 使える記号は「_」と「$」のみ
  • 先頭に数字は不可
  • 大文字と小文字は区別される
  • 予約語ではないこと
var msg = 'Hello'; // OK
var _msg = 'Hello'; // OK
var Msg = 'Hello'; // OK
var 1msg = 'Hello'; // NG
var msg-1 = 'Hello'; // NG
var in = 'Hello'; // NG

データ型 JavaScirptで扱えるデータの型

JavaScriptで扱えるデータ型には、主に以下のものがある

  • string　…　文字列
  • number　…　数値
  • boolean　…　真偽値 （true / false）
  • array　…　配列
  • object　…　オブジェクト
var str = 'Hello'; // string
var num = 10; // numbeer
var bool = true; // boolean
var arr = [0, 1]; // array

文字列は必ず「' （シングルクォート）」または、「" （ダブルクォート）」で囲む！

練習問題 今回の理解度をチェック。

「chapter02」 › 「training」フォルダ内の「index.html」を開き、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

    • ファイル名： app.js
解答例
chapter02/training/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題2</title>
</head>
<body>
  <script src="app.js"></script>
</body>
</html>
chapter02/training/app.js
// 合計金額を取得
var total = prompt('合計金額を入力して下さい');

// 人数を取得
var people = prompt('人数を入力して下さい');

// 一人あたりの金額を計算
var result = total / people;

// アラートボックスに計算結果を表示
alert('1人あたり' + result + '円です。');

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ 演算は数値の計算。
変数はデータを保管する箱。

演算や変数はどのプログラミング言語にある概念。

  • 数値の計算を行うには算術演算子を使う
  • 変数は、var で宣言する
  • 文字列と変数を一緒に出力する時は、「+（結合演算子）」を使う