JavaScript で変数２

　今回も変数です。演算でいろいろ遊んでいます。

１　変数で計算

　まず数値の計算です。

HTML（コード入力）

<!DOCTYPE html>
<html>
<head>
    <title>てすと</title>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        let a = 100;
        let b = 200;
        let c = a + b;
        document.write("<p>" + c + "</p>");
    </script>
</body>
</html>

ブラウザ（実行結果）

てすと

　<script> 以下の３行目で、c = a + b と定義しています。
　その c を出力すると a b という変数（箱）ではなく、a と b にそれぞれ代入された数値（100, 200）の計算結果（300）が出力されるのは以前学んだのと同じ結果です。

　では、文字列ではどうなるのでしょうか。
　文字列の間に直接「＋」を置いたときは連結されましたが。

HTML（コード入力）の一部

let d = "こん";
let e = "にちは";
let f = d + e;
document.write("<p>" + f + "</p>");

ブラウザ（実行結果）

てすと

　なるほど、こちらも変数（箱）そのものではなく、それぞれ代入された文字列（こん、にちは）の連結結果（こんにちは）が出力されます。
　この場合も、文字列の間に直接「＋」を置いたときと同様ですね。

HTML（コード入力）の一部

let g = "こん";
let h = 2;
let i = "ちは";
let j = g + h + i;
document.write("<p>" + j + "</p>");

ブラウザ（実行結果）

てすと

また遊んでしまいましたが、文字列と数値が混在しても同じ結果です。

ですので、数字も ” ” で囲むと文字列として扱われます。

HTML（コード入力）の一部

let v = 100;
let w = 200;
let x = "200";
let y = v + w;
let z = v + x;
document.write("<p>" + y + "</p>");
document.write("<p>" + z + "</p>");

ブラウザ（実行結果）

てすと

　y は v（数値）と w（数値）を足した数値となります。
　しかし、z は v（数値）と x（文字列）を＋でつないであるため、連結され文字列となってしまいますので注意が必要です。

２　変数＋数値

　さて上記の例では変数どうしの計算・連結でしたが、片方が値だったらどうなるのでしょうか。

HTML（コード入力）の一部

let k = 100;
k = k + 50;
document.write("<p>" + k + "</p>");
let l = 100;
l = l - 50;
document.write("<p>" + l + "</p>");

ブラウザ（実行結果）

てすと

　さて、上の３行の例では変数 k を宣言し、同時に変数 k に「100」を代入。
　続いて次の行で、その k に「50」を足しその結果を k に代入するという処理を行っています。
　算数の式という目で見ればヘンですが、プログラムの世界では「150」という結果が得られます。
　なお下の３行は引き算ですが考え方は同様です。

　そして次は簡略化した方法です。

HTML（コード入力）の一部

let m = 100;
m += 50;
document.write("<p>" + m + "</p>");
let n = 100;
n -= 50;
document.write("<p>" + n + "</p>");

ブラウザ（実行結果）

てすと

　上記の例 m += 50 は複合代入演算といって、２行目は m = m + 50 と同じ結果となります。
　また、５行目の n -= 50 は n = n – 50 と同じで、m、n の演算結果は先の例と同じ値になっています。

　ちなみに、変数に対して１を足す処理を「インクリメント」、逆に１を引く処理を「デクリメント」というそうです。

HTML（コード入力）の一部

let o = 100;
o++;
document.write("<p>" + o + "</p>");
let p = 100;
p--;
document.write("<p>" + p + "</p>");

ブラウザ（実行結果）

てすと

　o + + と記述すると、結果は o = o + 1 と同じになり、p – – と記述すると、結果は p = p – 1 と同じになります。
　コードの文字数が少なくなるのはいいのですが、同じことをするのに複数のやり方があるのはあまり好きではありませんねぇ。

３　次回

　さて次回は変数の３回目。
　定数などを勉強します。

手習い日記帳

１　変数で計算

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

２　変数＋数値

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

３　次回

カテゴリー

更新記事

タグ

JavaScript で変数２

１ 変数で計算

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

２ 変数＋数値

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

３ 次回

カテゴリー

更新記事

タグ

１　変数で計算

２　変数＋数値

３　次回