JavaScriptもっと変数　値の変更や定数インクリメント

JavaScriptの変数をもう少し考えます。コンピューターのプログラムでは変数の値を変更することにより多種の動作をすることができるようになります。そこで今回は値を格納する方法や変数が持っていた値を無効にする方法などを取り上げます。

値の増減

インクリメント

インクリメントってなに？ってはなしですよね。英語だと「increment」そう増加って言う意味です。

htmlファイルのbody内に下記のコードを記入してブラウザで表示してみてください。

<button onclick="clk()">ボタン</button>
<label id="lb">0</label>
<script>
let n = 0;
function clk() {
n = n + 1;//ココを通過するたびに1を足す
document.getElementById("lb").textContent = n;
} 
</script>

サンプル（別窓）

function{～～～}はあとで解説します、このページではあつかいませんので鵜呑みでかまいません。変数「n」を<label>タグに表示する命令文だと考えてください。
サンプルではボタンをクリックするたびに<label>タグの数字が1づつ増えていきます。最初変数nは0を代入しています。
{～～～}の間に「n = n + 1」という式が出てきます。これって学校では習ってませんよね。プログラミングではこのようにして書くとnに1が足されるという意味になります。なので<label>タグの値が1づつ増えて行ってます、これをインクリメントなどという人もいます。「n += 1」「 ++n」としても大丈夫です。これは理解ではなくて覚えるしかありません。よく使いますので非常に重要です。

デクリメント（decrement）

インクリメントの反対です。こちらは減少です。
<button onclick="clk()">ボタン</button>
<label id="lb">0</label>
<script>
let n = 0;
function clk() {
n=n-1;//ココを通過するたびに1をへらす
document.getElementById("lb").textContent = n;
} 
</script>

インクリメントの反対なので「n -= 1」「 –n」としても大丈夫です。

定数

変数を解説してますが「定数」です。個人名や会社名など変更がないものは定数として扱います。
htmlファイルのbodyに下記のコードを記入してブラウザで表示してみてください。
<button onclick="clk()">ボタン</button>
<label id="lb">0</label>
<script>
const N = 0;
function clk() {
N = N + 1;//ココを通過するたびに1をへらす
document.getElementById("lb").textContent = n;
} 
</script>
「let」で変数宣言していたところを「const」に変更しました、さらに変数nを大文字のNしています。
「N = N + 1」にしているにもかかわらず<label>タグの数字は0のままです。定数にしてあるので増加していないということです。
const
定数を宣言します。定数名は大文字にする習慣があります、定数名の前にアンダーバーをつける場合もあります「_HENNSUU」みたいな
ブラウザによっては「const」で宣言しても変更される場合がありますので上記のような使い方は避けてください。ちなみにIEは変更されてしまいます。

 

今回は変数のなかでも「n = n + 1」とか「const」など予期しないものを取り上げました。インクリメントもデクリメントもプログラミングでは必ずでてくるものですので、無理をして実際に出てくるようなコードfunction{～～～}を使って書きました。ご了承ください。

 

以上で今回のページは終了です。

お疲れ様でした！

前のページ　 INDEX　 次のページ

コメント

ホーム