JavaScript 初歩のまとめ ④ 算術演算子

JavaScript の初歩のまとめ、算術演算子の続きです。
前回は 算術演算子の最も基本的な使い方を まとめましたが、同じ記号を使ったプログラミングならではの書き方があります。

インクリメント

変数に代入した値を 1 づつ増やすときの演算子です。インクリメントする変数を i とした時、i = i + 1; と同じ意味です。ただ、++ を i の前と後のどちらに置くかで多少 扱われ方に違いがあります。いつものように実際に試してみます。


i ++ の場合

var i = 1;
var a = i ++;
document.write(a, '<br>', i);

i ++ の実行結果

まず 変数 i に 1 を代入して、i の値を a にコピーしてから インクリメントしています。
このため、3行目で、i, 改行タグ, a の順で出力していますが、結果を見て判るように a にはインクリメントする前の値の1、その後で i に 1 が足されて 2 が表示されています。

++ i の場合

var i = 1;
var a = ++ i;
document.write(a, '<br>', i);

++ i の実行結果

今度の場合は i に 1 を代入する所は同じですが、まず i に 1 を足してから その値を a にコピーしています。出力する順番は さっきと同じですが、今度は どちらも 2 が代入されています。

デクリメント

変数に代入した値を 1 づつ減らすときの演算子です。デクリメントする変数を i とした時、i = i - 1; と同じ意味です。インクリメントと同じで、-- を i の前と後のどちらに置くかで同様の違いがあります。

i -- の場合

var i = 1;
var a = i --;
document.write(a, '<br>', i);

i -- の実行結果

デクリメントの場合も同じです。i に 1 を代入して、i の値を a にコピーしてから 1 を引いているので、上のような実行結果になります。

-- i の場合

var i = 1;
var a = -- i;
document.write(a, '<br>', i);

-- i の実行結果

これも同じです。先に i から 1 を引いてから i を a にコピーしていますので、結果は両方とも 0 になります。

今の時点での算術演算子 のまとめは以上ですが、最後にもう一つ、加算 の演算子のプログラミング ならではの使い方も試してみます。

文字列 + 文字列 の場合

今までは 全て数値を代入した変数で試してきましたが、加算の演算子だけは、文字（文字列）に対して使うことができます。さっそく試してみます。

var text = 'カレー' + 'ライス';
document.write(text);

文字列 + 文字列 の実行結果

変数 text に2つの文字列 'カレー' と 'ライス' を 足して代入しています。

2行目で 変数 text を 出力していますが、ちゃんと 2つの文字列が つながって 表示されています。これは 色々と応用ができそうな感じがしますので、何か思いついたらまた試してみたいと思います。

算術演算子 についての初歩のまとめは以上です。演算子は 算術以外にもたくさんあって、使う場面が来たら またまとめてみようと思います。

次は データ型について 復習しながらまとめてみます。

JavaScript 初歩のまとめ ③ 算術演算子

引き続き復習での まとめです。今度は演算子について 今までの所をまとめてみたいと思います。演算子には、算術演算子 といったように 頭につく言葉によって役割の種類があります。今回は 初歩中の初歩の算術演算子をまとめてみます。

算術演算子
足し算 引き算 等の計算をする為の演算子です。

実際に上から順番に表の記述例に合わせて式を書いて 試してみます。

変数 a には それぞれ 答えが判りやすい数を代入して試します。

加算

<script type="text/javascript">
<!--
  var a = 1;
  var n = a + 5;
  document.write(n);
-->
</script>

加算の実行結果

減算

<script type="text/javascript">

<!--
  var a = 10;
  var n = a - 3;
  document.write(n);
-->
</script>

減算の実行結果

乗算

<script type="text/javascript">

<!--
  var a = 10;
  var n = a * 4;
  document.write(n);
-->
</script>

乗算の実行結果

除算
<script type="text/javascript">
<!--
  var a = 30;
  var n = a / 3;
  document.write(n);
-->
</script>

除算の実行結果

剰余算

<script type="text/javascript">
<!--
  var a = 15;
  var n = a % 7;
  document.write(n);
-->
</script>

剰余算の実行結果

剰余算は最初どういう場面で使うのか判りませんでしたが、これを使うと 何かの処理を ◯回に 1回 行うという事が簡単にできる という解説を読んで納得しました。どのように書けばそれができるのかは また改めて まとめてみます。

どれも 記号は違っていても数学で使うのと同じなので難しいことはないと思います。

1つの式の中で、2種類以上の 算術演算子を使った場合の 計算の順番も数学の場合と同じで、乗算、除算、剰余算は 加算、減算よりも優先されます。また ( ) を使って先に計算させる事もできます。ついでなので これも試します。

( ) を使った計算
<script type="text/javascript">
 <!--
   var n = 2 + 5 * 3;
   document.write(n+'<br>');
   var m = (2 + 5) * 3;
   document.write(m);
 -->
 </script>

( ) を使った計算の実行結果

前回のまとめに続いて 実際に色々試して確認してみました。算術演算子には 少し変わった使い方もあるようなので、次回はその辺りを試しながらまとめてみようと思います。

CodeStudy 22-8 正規表現のこと

このところしばらく取り組んできた CodeStudy のセクション 22-8 にやっと正解できました。正規表現というのは、名前は聞いたことはありましたが、思っていた以上に複雑で奥が深そうなものでした。

問題
regexp1やregexp2にマッチする様な文字列を、str1とstr2に代入しましょう。

var regexp1 = /\w{3}\s?\d+/;
var regexp2 = /\d{3}-\d{4}\s*\w/;

var str1 = 'aaa 1';
var str2 = '222-1111 a';

var result1 = regexp1.test(str1);
var result2 = regexp2.test(str2);

regexp1 の方の最初の条件は、\w（windowsでは ¥w ）です。これは文字を表していますので、文字なら何でもマッチします。僕は a にしました。

次の条件は {3} です。これは この直前の文字を 3つ繰り返すので、さっきの a が aaa になります。

次は、\s（¥s）です。これは 空白スペースを表しています。その次に ? がついていますから、空白スペースが 0~1個入っていれば マッチします。ということは  空白スペース無しでもOKです。

次が、\d（¥d）です。これは 数字を表しますので、僕は 1にしました。最後に付いている + は直前の文字を 1回以上繰り返す意味ですので、僕は 1回だけにして、

僕は最終的に 'aaa 1' としました。'@@@ 99999' 等でもマッチします。

regexp2 の方でつまずいてしまったのですが、最初の \d{3}（¥d{3}）は数字を3個繰り返す条件です。

次の - を [-] の記号と勘違いしてしまったのですが、[] に挟まれていない - はこの文字自身を表すだけですので、- が入ります。

次は最初と同じ書き方の数字を4個繰り返す条件です。

次の \s（¥s）は空白スペースです。* の記号がついていますから、0個以上繰り返していればマッチします。つまり空白スペース 無しでもOK です。

最後の \w（¥w）は文字です後ろに何もついていないので、何の文字が何個ついていてもマッチします。

僕は最終的に '222-1111 a'としました。 '999-0000     zxcvbnm' 等でもマッチします。

正規表現は ここで出題されている以外にも色々あって、ちょっと覚えきれませんが

目標にしている ショッピングサイトを作る時に 商品の発送先などの 入力フォームで 必要になりそうなので、 構文的な所は覚えておいて、条件の書き方は その都度調べながらでもしっかり身につけたい所です。

JavaScript 初歩のまとめ ② 変数

変数についてのまとめ の続きです。変数について色々と試してみた結果を書いていきます。できるだけ結果を表示させた画像もつけました。
 前回は var で変数を宣言して、値を代入する所まででしたが、

一度にたくさんの変数を宣言する事もできました。
やり方は カンマで区切って書きます。


  var a = 1, b = 2, c = 3;
  document.write(a, b, c);

このように表示されます。

次に 変数に限った事ではないのですが、

変数名の大文字 小文字は別のものとして扱われます。

例えば 予約語に含まれる var は変数名に使えませんが、Var なら使えました。

  var Var = 1;
  document.write(Var);

もっとも こういった変数名は 紛らわしいので、やめておいた方が良さそうです。

同じ変数に 違う値を続けて代入すると、上書きされました。

先に代入していた値は消えてしまいます。

  var a = 1;
             a = 10;
  document.write(a);

var は変数を宣言するものなので、10を代入する時には書く必要はありません。

var は省略できるみたいです。

解説書によると、書いた場合と省略した場合では、何か違いがあるようなのですが、まだ良く判りませんので、今後の宿題に残しておきます。

  a = 5;
  document.write(a);

今回試したのは 以上です。解説書などに 一通り書いてある事かも知れませんが、ちょっとの事でも 自分で入力して試してみるのは、「習うより慣れ」 の面で良さそうなので、できるだけ続けていこうと思います。

JavaScript 初歩のまとめ ① 変数

CodeStudy での練習が 終盤ですが、正規表現のところで また行き詰まってしまっています。少し復習の意味でここまでのまとめをしたいと思います。まずは 変数から…
（間違っている所もあると思いますが、それに気づいたら、その都度書き直します。）

変数は 様々な値などを入れておける名前のついた箱のような物です。
色々な場面で 使われているみたいですが、例えば 変数を使わずに 桁数の大きな数を計算するとしたら、その数を紙などに書いておいて 計算する式にその数が登場する度にプログラムに打ち込まなくてはなりませんが、変数に入れておくと、 変数の名前を書くだけで、その数を扱うことができます。打ち間違えをする心配も減りますし、とても便利そうです。
変数を JavaScript で実際に扱う場合は、

  var 変数名; 　

これで 変数名 に指定した名前の変数ができます。
var で その後に書く名前の変数を宣言します。宣言っていうのはどういう事なのか良く判りませんが、 その名前の関数を作るぐらいの意味かと思います。
ですが、このままでは空っぽの箱の状態です。そこで 続けて次のように書きます。仮に変数名を a としました。

  a = 1;

これで a という名前の変数に 1 という数が入ります（代入するといいます）。さっき書いたように a は変数名で 基本的には 自由に決めて構わないのですが、いくつか決まりがありました。

• 使える文字は、半角英数字と $ と _ の記号。
• 一文字目に数字は使えない。
• 予約語（JavaScript の命令などで使うキーワード）は使えない。 

予約語については、結構たくさんあって全部は 書けませんが、例えば 変数の宣言に今使ったばかりの var も予約語なので、変数名には使えません。

a の次に来る = ですが、数学で使う場合とは意味が違い、= の左を右に代入するという意味です。ですので この場合だと、1 が a に代入されます。最後に付いている ; は JavaScript で一つの文の終わりに付ける記号です。ここでは 二つの文で 変数 a を用意して a に 1 を代入した訳ですが、これを一つの文で書く事もできます。

  var a = 1; 

変数を宣言する時に 同時に代入もしてしまっています。
最後にちゃんと代入ができているかを確認して終わりにしたいと思います。

<script type="text/javascript">
  <!--
    var a = 1;
    document.write(a);
  -->
</script>

これを HTML ファイルの 中に （<head>~</head> でも <body>~</body> でも大丈夫です）書いて実行してみます。
document.write(a); と書くと、変数 a の中身を表示させることができます。

無事に 1 が表示されました。

変数についてだけでも、覚えた事はまだあるので、まとめ ② も変数についてです。