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 と同じになります。
　コードの文字数が少なくなるのはいいのですが、同じことをするのに複数のやり方があるのはあまり好きではありませんねぇ。

３　次回

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

更新記事

『会社四季報 2024年 3集夏号』を読む１１（オリゴマー、エッジＡＩ、ＭＬＣＣ、ジルコニウム、アセチレンガス、ファインケミカル）2024-07-25
『会社四季報 2024年 3集夏号』を読む１０（フラッシュハンドル、自動配膳ロボット、Ｒ－ＳＵＤ、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証）2024-07-22
『会社四季報 2024年 3集夏号』を読む９（ペロブスカイト太陽電池、プロテイン、銀だこ、尿素ＳＣＲ、エクソソーム）2024-07-19
『会社四季報 2024年 3集夏号』を読む８（ドミナント、ＥＢＩＴＤＡ、ＳＡＦ、消防車、キャンプ用品、ＧＩＧＡスクール、ボウリング場）2024-07-16
『会社四季報 2024年 3集夏号』を読む７（ＭＤ、パーム椰子、ＧＭＳ、ＥＣ、デジタルサイネージ、ハラール認証、ヴィーガンコスメ）2024-07-13
『会社四季報 2024年 3集夏号』を読む６（ＢＩＭ、ＣＭＳ、つけまつげ、ＣＤＭＯ、ＢＮＰＬ、ＥＤＩ、ＣＲＭ）2024-07-10
『会社四季報 2024年 3集夏号』を読む５（アグリゲーション、ＥＭＳ、ＢＰＯ、のれん、カカオ豆、オーツミルク）2024-07-07
『会社四季報 2024年 3集夏号』を読む４（ＳＥＰ、社内起業、ＺＥＰ、ＶＰＰ、ＤＯＥ、バイオセンサー、ＰＢＸ）2024-07-04
『会社四季報 2024年 3集夏号』を読む３（海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電）2024-07-01
テーマ株投資（５か月）2024-06-28
『会社四季報 2024年 3集夏号』を読む２2024-06-25
『会社四季報 2024年 3集夏号』を読む１2024-06-22
JavaScript でDOM ２2024-06-18
JavaScript でDOM １2024-06-14
JavaScript でオブジェクト５2024-06-10
JavaScript でオブジェクト４2024-06-06
JavaScript でオブジェクト３2024-06-02
JavaScript でオブジェクト２2024-05-29
JavaScript でオブジェクト１2024-05-25
JavaScript で関数３2024-05-21
JavaScript で関数２2024-05-17
JavaScript で関数１2024-05-13
JavaScript で配列６2024-05-10
JavaScript で配列５2024-05-07
JavaScript で配列４2024-05-04
テーマ株投資（３カ月目）2024-05-02
JavaScript で配列３2024-04-27
JavaScript で配列２2024-04-24
JavaScript で配列１2024-04-21
JavaScript で「繰り返し」２2024-04-18
『チーズはどこへ消えた？』を読む２2024-04-15
『チーズはどこへ消えた？』を読む１2024-04-11
JavaScript で「繰り返し」１2024-04-07
JavaScript で「もし」３2024-04-01
テーマ株投資（２カ月目）2024-03-29
JavaScript で「もし」２2024-03-28
「記憶」本５冊を読む３2024-03-24
「記憶」本５冊を読む２2024-03-20
「記憶」本５冊を読む１2024-03-17
テーマ株投資（１カ月半）2024-03-15
「睡眠」本６冊を読む３（夜間・朝の行動）2024-03-10
「睡眠」本６冊を読む２（昼間の行動）2024-03-03
テーマ株投資（１か月目）2024-03-01
JavaScript で「もし」１2024-02-29
JavaScript で変数３2024-02-27
「睡眠」本６冊を読む１（理論）2024-02-25
JavaScript で変数２2024-02-23
テーマ株投資（第３週目）2024-02-22
JavaScript でヘンな数2024-02-20
「メモ」本６冊を読む２（メモの方法）2024-02-18
テーマ株投資（第２週目）2024-02-16
JavaScript で足し算2024-02-14
「メモ」本６冊を読む１（メモの意義）2024-02-12
テーマ株投資（第１週目）2024-02-09
JavaScript で「こんにちは世界」2024-02-09
「コーチング」本６冊を読む2024-02-06
はじめてのテーマ株投資2024-02-01
JavaScript とは2024-01-30
「怒り」「アンガーマネジメント」本７冊を読む2024-01-27
JavaScript を始めてみる2024-01-22
初めての自動給水器2024-01-21
「ブランディング」本６冊を読む2024-01-20

手習い日記帳

１　変数で計算

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

２　変数＋数値

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

３　次回

カテゴリー

更新記事

タグ

JavaScript で変数２

１ 変数で計算

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

２ 変数＋数値

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

３ 次回

カテゴリー

更新記事

タグ

１　変数で計算

２　変数＋数値

３　次回