JavaScript 初歩のまとめ ⑩ 配列

前回の 配列のまとめの続きです。

多次元の配列

配列は 変数と同じように 何でも代入することができますが、配列の要素に 配列を代入することもできます。多次元の配列という呼び方の他、配列のネスト、入れ子の配列 等と呼ぶこともあります。値にアクセスする書き方も一緒に ためしてみます。



ex.1
var arr = new Array(3);
arr[0]  = new Array('a', 'b' 'c');
arr[1]  = new Array('d', 'e' 'f');
arr[2]  = new Array('g', 'h' 'i');
document.write(arr[2][0], '<br>', arr);

1行ずつ見てみます。

1行目　 配列要素数が 3 の配列 arr を生成しています。

2行目　 a, b, c という 3つの文字列を 要素に持つ配列を生成して 配列 arr の 0 番目に 代入しています。

3~4行目　2行目と同様のことを 配列 arr の 1番目と2番目に対して行っています。

5行目　いつものように document.write(); で配列の中身を表示させています。

とりあえず 実行結果を確認してみます。

ex.1 の実行結果

最初に g と表示されました。g が代入されているのは、arr[2] に代入された配列の 0番目 です。5行目を もう一度見てみると表示させる要素の最初が

arr[2][0],

となっています。これが多次元配列に代入された値に アクセスする書き方です。

変数名[添字n][添字m]

変数名の n 番目に代入されている配列の m 番目の要素 という意味です。

とてもややこしいですけど、慣れてしまえば何とかなりそうです。ついでに 実行はしませんが、ex.1で 次の書き方をしたら 何の文字が表示されるか クイズみたいに考えてみましょう。 

arr[1][2], arr[0][0], arr[2][1]　　答えは、f,a,h です。

本題に戻って、次に表示させたのは これもいつもの 見やすくなるかと思って入れている 改行タグです。最後に 配列 arr を添字無しで表示させてみました。普通の配列のときと同じように、丁寧に 全部の配列要素を カンマ区切りで 表示してくれました。

次に 多次元配列は書き方が ゴチャゴチャしていて 判りにくいので、普通の配列ではできた  new Array を使わない簡単な書き方が 多次元配列でも使えるかをためしてみます。

ex.2

var arr = [['a', 'b', 'c'], ['ア', 'イ', 'ウ']];
document.write(arr[0][2], '<br>', arr[1][2]);

ex.2 の実行結果

ちゃんと使えました。こっちの書き方の方が スッキリして見やすいと思います。

ところで、多次元配列という名前から判るように、配列は 幾つでも入れ子にできます。ex.2 と同じ書き方で ちょっとだけためしてみます。

ex.3
var arr = [['a', 'b', 'c'], [['d', 'e'], ['f', 'g']]];

document.write(arr[1][0][1], '<br>', arr);

ex.3 の実行結果

[ ] を何個も繰り返して書くことで、幾らでも入れ子にできるみたいです。とてもややこしいし、3回以上はさしあたって 必要になる場面も少なそうなので、確認できただけでよしとします。

連想配列

連想配列は 配列の添字に数字の代わりに文字列を使った物のことです。代入された値に関連のある 文字列を添字に使うことで、管理しやすい配列になります。
添字が数字の配列には、0 から始まる順番がありますが、連想配列に代入された値は 基本的に順不同です。

ex.4
var population = {'USA':31450000, 'Japan':12650000, 'China':134890000};
document.write(population['China'], '<br>', population['USA']);

ex.4 の実行結果

国名を添字にして、その国の大まかな人口を連想配列にして 表示させてみました。また 次のような書き方もできます。

ex.5

var population = {USA:31450000, Japan:12650000, China:134890000};
document.write(population.China, '<br>', population.Japan);

ex.5 の実行結果

代入する時に 添字の文字列をクォーテーションで囲まずに、参照する時には [ ] ではなくて ピリオドで区切っても 同じように表示されています。この書き方は、もう少し後でまとめようと思っている オブジェクトを扱うときの書き方と とても似ています。

調べてみたら、配列は オブジェクトの一種ということでした。どういうことなのかもう少し調べてから、オブジェクトについてまとめを書きますので、続きはそのときに…。

JavaScript 初歩のまとめ ⑨ 配列

以前 変数についてまとめたあとで 「次は 配列」と思っていたのを 間が空いてしまいましたが、今回ようやくまとめてみます。いつものように 思いつくことを できるだけ実際に ためしながら書いていこうと思います。

配列

配列は 変数のように 値を入れておける箱のような物をイメージするのがいいと思います。
変数は、ひとつの変数に ひとつの値を入れておくことができますが、配列の場合は ひとつの変数に いくつもの値を入れることができます。
代入された値を取り出したり、参照したり（アクセスすると言います。）する時に、複数の値に対して 変数名がひとつではどの値にアクセスするのか区別ができなくなってしまうので、配列では 変数名に 0 から始まる番号（添字 または インデックスと呼びます。）を付けて区別します。
関連のある複数の値を ひとつの名前で扱うことができるということは、ちょっと思いついただけでも 例えば 画面に表示する物の座標とか、商品の 名前と値段とかに役立ちそうです。

用語

インデックス / 添字　　配列に代入された値を 識別するために付けられた番号のこと。これは 0 から始まるので注意が必要です。

配列要素　　配列に代入されている個々の値のこと。単に要素という場合もあります。例えば 要素数が 3 の配列は 添字が、0~2 まであることになります。



配列の生成

配列の生成には何通りかの書き方がありますので 順に確かめていきます。



var 変数名 = new Array(値, 値, …);

この書き方は 配列の生成と同時に 値を代入します。値（この書き方では値と書いてある所は厳密には引数といいます。）を指定した数だけ配列要素数が生成されます。( ) の中に , で区切って代入する値を指定していきます。その順番で 添字が 0 から付いていきます。

ex.1

var arr = new Array(6, 3, 3);
document.write(arr, '<br>', arr[0]);

ex.1 の実行結果

配列の生成時に 3つの値を同時に代入しています。このため 配列変数 arr には 要素数も 3つ あることになります。
document.write で配列変数 arr, 改行タグ, 配列変数 arr の 0番目の要素を順に表示させています。arr とだけ指定して表示させると 全ての要素を カンマ区切りで表示してくれます。また、配列内の特定の要素だけにアクセスする場合は、変数名 [添字] の形で指定します。

var 変数名 = new Array(要素数);

これは最初の書き方と似ていますが、要素数だけを指定して、個々の値は何も代入しません。このため このまま 配列要素にアクセスすると 未定義値の undefined が返ります。

ex.2

var arr = new Array(6);
document.write(arr, '<br>', arr[0]);

ex.2 の実行結果

実行結果を パッと見ると 何のことか良く判りませんでしたが、要素数を 6 とだけ指定して配列を生成していますので、各要素には何も値が入っていません。このため arr を表示させると、何も要素が無いけれど 要素数は 6個あります。これを カンマ区切りで表示しているため カンマが5個並んでいるということのようです。
undefined, undefined, undefined, undefined, undefined, undefined とはならないんですね。
その後 arr[0] だけを表示させると今度は undefined が表示されました。
要素数だけを指定した配列に 後から値を代入する書き方は以下のようになります。



変数名[添字] = 値;

ex.3
var arr = new Array(6);
    arr[0] = 3;
    arr[2] = 5;
document.write(arr, '<br>', arr[0]);

ex.3 の実行結果

配列変数 arr の 0番目と 2番目に後から値を代入しています。ex.2 の実行結果と比べてみると 2番目の要素の所にちゃんと 5 が表示されています。




var 変数名 = [値, 値, …];

この書き方も ex.1 と同じで、配列の生成と同時に値が代入されます。左から , で区切った順に 0 から 添字が付いていきます。

ex.4

var arr = [6, 3, 3];
document.write(arr, '<br>', arr[0]);

ex.4 の実行結果

実行結果も ex.1 と同じになっているので、同じように使えそうです。

配列でも色々と試してみたいことがありますので、次回も配列のまとめの続きです。

JavaScript デジタル表示の時計 ②

前回 作った デジタル表示の時計を改造してみます。

今の状態だと、「時」「分」「秒」がそれぞれ 10 未満だと、数字が 1桁で表示されますが、普通のデジタル表示の時計では 10未満の数字を表示する時には、10の桁は "0"が表示されていると思います。今回は ここを改造します。

今 「時」「分」「秒」は それぞれ 変数 h, m, s に代入されています。これらの変数の値が10未満の時に 10の桁に 0 を表示させればいいのですから、ある条件を満たす場合と満たさない場合で 違う処理を行うということです。これは if 文でできそうです。

例えばこんな感じでどうでしょうか？　とりあえず「秒」についてだけ試してみます。

ex.1

function clock() {
    var now = new Date();
    var h   = now.getHours();
    var m   = now.getMinutes();
    var s   = now.getSeconds();

    if (s < 10) {
        document.getElementById('clockArea').innerHTML = h + ":" + m + ":" + "0" + s;
    }else {

        document.getElementById('clockArea').innerHTML = h + ":" + m + ":" + s;

    }

}  

setInterval('clock()',1000);

1行目　関数 clock を定義しています。その内容は、2行目以降です。
2行目　Date オブジェクトを生成して 変数 now に代入しています。
3行目　変数 now から「時」「分」「秒」の「時」を取り出して 変数 h に代入。
4行目　変数 now から「時」「分」「秒」の「分」を取り出して 変数 m に代入。
5行目　変数 now から「時」「分」「秒」の「秒」を取り出して 変数 s に代入。

7〜10行目　 if 文を使って 変数 s の値が 10未満の場合と 10以上の場合で分岐させて、10未満の場合は 時間表示の 変数 s の前に "0" を 追加しています。s が10以上の時には そのまま表示させています。

12行目　タイマー処理で 関数 clock を 1秒毎に繰り返して実行しています。


これを実行してみます。

ex.1の実行結果

「秒」だけでしたら これでも良さそうです。でも、この方法で「時」と「分」もやろうとすると、if 文の条件式が、

if (h < 10 && m < 10 && s <10) {

   処理;

}else if (h < 10 && m >= 10 && s >= 10) {

   処理;

}else if (h >= 10 && m < 10 && s >= 10) {

   処理;

}else if (h >= 10 && m>= 10 && s < 10) {

   処理;

}…

こういった条件式を あと 4通りくらい書かないといけなくなります。書いている途中で絶対まちがえてしまうと思うので、このやり方ではダメそうです。
全体としては ダメですけど、if 文 を使って、変数 h, m, s が1桁の時に 10 の桁に "0" を足す方法は良さそうですので、その方法は残して 別の書き方をしてみます。今度も 秒 だけで試してみます。

ex.2

function clock(){
    var now = new Date();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();

    if (s < 10) {
        s = "0" + s;
    }
    document.getElementById('clockArea').innerHTML = h + ":" + m + ":" + s;
}
setInterval('clock()', 1000);

ex.2 の実行結果

実行してみると、今度もうまく行っています。
処理の内容は、文字を赤くした所 以外は同じですので、赤字の所だけ内容を書きます。
変数 s の値が、10未満の時に、s の値に 文字列の "0"を + 記号で連結して、s に代入し直しています。このやり方だと、s の値が 文字列に変換されてしまうのですが、s は この後計算等に使う変数ではないので、問題は無いでしょう。書き方も大幅にスッキリできるので、この方法で 「時」と「分」もやってみます。

ex.3

function clock() {
    var now = new Date();
    var h   = now.getHours();
    var m   = now.getMinutes();
    var s   = now.getSeconds();

    if (h < 10) {
        h = "0" + h;
    }
    if (m < 10) {
        m = "0" + m;
    }
    if (s < 10) {
        s = "0" + s;
    }
    document.getElementById('clockArea').innerHTML = h + ":" + m + ":" + s;
    }

setInterval('clock()',1000);

ex.3 の実行結果

 DEMO

問題なく 表示されています。

ところで、実行結果のスクリーンショットを撮るのに 何時間も待てないので、変数に代入する値を少し引いて 朝の 9時頃にしました。蛇足ですがその方法も書いておきます。

var h = now.getHours() - 11;

Date オブジェクトから、「時」を取り出す時に、時間を戻す時には 引き算、進める時には足し算をすれば OK です。今は 夜の 8時過ぎですので、11 を引きました。
進める時に注意が必要なのは、 足した後の値が 23 を越えてしまっても、このやり方では 自動で 0 に戻ってはくれません。

以上で デジタル表示の時計の 1回目の改造は完成です。次は、今 24 時間制の表示になっているのを AM / PM の表示を付けて 12時間制の表示に改造してみようと思います。

JavaScript 初歩のまとめ ⑧ 論理演算子

必要が出た時にはじめて勉強する方式で JavaScript の勉強を続けていますが、制御文のまとめをしていて、色々な種類のある演算子について さらに勉強が必要になりました。今回も覚えたことを色々と試しながら まとめておきます。

論理演算子

論理演算子は if 文の条件式等で 比較演算子とセットで使うことが多い演算子だと思います。複数の条件を組み合わせて、○○ かつ ××  や △△ または □□（よく and, or という言い方をしますね ）といった複雑な条件を指定することができます。

論理演算子

今回も表にしてみました。3種類あります。 ! は以前のまとめでも出てきましたが、分類上はここに属するようでしたので 再登場です。いつものように順に見ていきます。

&&

ふたつ以上の条件の全てを 満たす場合に true ひとつでも満たさない場合は false を返す演算子です。 and の意味です。

ex.1

var sky = 'blue';
var sea = 'green';
var submarine = 'yellow';

if (sky == 'blue' && sea == 'green') {
 　 document.write(submarine);

}

ex.1 の実行結果

ex.1 では ふたつの変数の値が 両方とも正しいので、 true が返って その後の処理が実行され 変数 submarine の値が表示されています。

ex.2

var sky = 'blue';
var sea = 'green';
var submarine　= 'yellow';

if (sky == 'blue' && sea == 'yellow') {
　 document.write(submarine);
}

ex.2 の実行結果

ex.2 では 変数 sea の値が違っていますので、false が返って 何も実行されません。

| |

ふたつ以上の 条件のどれかを満たす場合に true を返し、ひとつも満たさない場合だけ false を返す演算子です。 or の意味です。

ex.3

var sky = 'blue';
var sea = 'green';
var submarine　= 'yellow';

if (sky == 'blue' || sea == 'red') {
　 document.write(submarine);
}

ex.3 の実行結果

ex.3 では、ふたつの条件のうち ひとつだけを満たしていますが、どちらかの条件が正しければ true が変えるので、その後の処理が実行されています。

ex.4

var sky = 'blue';
var sea = 'green';
var submarine　= 'yellow';

if (sky == 'white' || sea == 'red') {
　 document.write(submarine);
}

ex.4 の実行結果

ex.4 では ふたつの内のどちらも満たさないので、何も実行されていません。

!

その後に書かれた条件の 真偽の逆を返す演算子です。not の意味です。条件の書き方に少し注意が必要ですので、サンプルで確認して下さい。

ex.5

var x = 50;

if (!(x > 100)) {
 　 document.write('50 は 100 未満ですが、true が返りました。');
}

ex.5 の実行結果

変数 x には 50 が代入されています。if 文の条件式で x を 100 と比べています。普通の比較演算子でしたら false が返って 何も実行されずに終了しますが、先頭に ! 演算子が付いていますので 真偽が 逆になって true が返るため、その後の処理が実行されています。

気を付けないといけない書き方というのは、この例のように 先頭に ! を書いて 条件を ( ) で囲む必要がある場合があります。これは この演算子の優先順位がかなり高いことが原因のようです。（また 必要が出た時に調べてみます。）

カッコの話題が出たので、ついでに少しややこしい条件を書いて、そういった書き方がちゃんと処理されるか 試してみます。

ex.6

var sky = 'blue';
var sea = 'green';
var submarine　= 'yellow';

if ((sky == 'blue' && sea == 'red')||submarine == 'yellow') {
 　 document.write(submarine);
}

ex.6 の実行結果

この条件を説明すると、「sky が blue かつ、sea が red という条件」又は、「submarine が yellow という条件」この ふたつのどちらかを満たす場合は true　どちらも満たさない場合は false となります。sea に代入されているのは green で ひとつ目の条件は 満たしていませんが、又は submarine が yellow の条件を満たしているので、true が返っています。

今回の例は これまでと比べて だいぶややこしくなってきましたが、ひとつひとつを 見ていくと パズルの様でもあって、こういった所も プログラミング の楽しさのひとつなのかな…と少し判る気もしてきました。

JavaScript デジタル表示の時計 ①

少しずつですが 実際にプログラムを書いてみています。
タイマー処理の練習の定番、デジタル表示の時計を作ってみました。とりあえず動けばいいだけのものですが、今後 少し改造してみます。

 DEMO

function clock() {
    var now = new Date();
    var h   = now.getHours();
    var m   = now.getMinutes();
    var s   = now.getSeconds();

    document.getElementById('clockArea').innerHTML = h + ":" + m + ":" + s;
}
setInterval('clock()', 1000);

1行目　関数 clock を定義しています。実際の内容は 2行目からです。
2行目　Date オブジェクトを生成して、変数 now に代入しています。

3行目　変数 now つまり Date オブジェクトから オブジェクト生成時の 時分秒の「時」を取り出して 、変数 h に代入しています。

4行目　3行目とほぼ同じで、「分」を 変数 m に代入しています。
5行目　3行目とほぼ同じで、「秒」を 変数 s に代入しています。
6行目　見やすさのために 1行空けています。

7行目　document オブジェクトの getElementById() メソッドで、id 属性が clockArea の要素を取得して その innerHTML プロパティに、Date オブジェクトから取得した 「時」「分」「秒」を「：」で区切った文字列にして代入しています。この方法だと HTML に "clockArea" という id 属性を持たせた何かしらのタグ （ <p> , <span> , <div> 等でしょうか… ）を書いておく必要があります。その そのタグの innerHTML プロパティの内容を 丸ごと書き換えてしまうので、"clockArea" id を持たせたタグに 他にも子要素があると、それらの子要素は消えてしまうので注意が必要です。

9行目　タイマー処理の setInterval() で、1000ミリ秒 つまり 1秒毎に 関数 clock を呼び出して実行させています。時計なので、1秒毎に「時」「分」「秒」を取得し直して 表示する内容を書き換えているわけです。

文字の大きさや 余白等の見た目に関する部分は CSS で変えています。


最初に書いた 今後の改造は、先ず よりデジタル表示らしくするために「時」「分」「秒」が  1桁の時に 10の桁に 「0」を表示させるようにしたいですね。これは if 文を使って できそうです。それは次回に…。

JavaScript 初歩のまとめ ⑦ 制御文 if

制御文について まとめていこうと思います。制御文は 条件によって、その先の処理を変えたり、繰り返したりさせるための命令です。これが使えるようになると、これまでよりも断然プログラムらしいプログラムが書けるようになれそうです。
制御文は 目的によって いくつか種類がありますが、今回は if 文 についてまとめてみます。

if 文

if 文はある条件を満たす場合と、満たさない場合で 処理を変えたい場合に使う命令です。
最も基本的な書き方は下のようになります。

if (条件1) {
    条件1が成り立つ時に実行する処理;
   }

if と書いてあるすぐ後の( ) の中に 条件を書きます。条件の書き方には、比較演算子がよく使われます。
「条件1 が成り立つ時に実行する処理」には、{ } の中に ; で区切って、実行する処理を複数書くことができます。実際に書いたものの方が判りやすいかも知れません。


ex.1
var num = 10;
if (num > 5) {
   document.write('5よりも大きい。');
}

実行すると 下のように表示されました。

ex.1の実行結果

この例でやっているのはとても単純です。1行目で 変数 num に 10 を代入しています。

2行目で if が出てきますが、( ) の中に書いてあるのが num > 5 ですが、今 num には 10 が入っていますので、10 > 5 となります。これは正しいので、 { } で囲まれた 処理が実行されています。( ) 内が 条件を満たさないように変えて、実行結果を見てみます。

ex.2

var num = 10;

if (num < 5) {

   document.write('5よりも大きい。');

}

ex.2 の実行結果

今度は 比較演算子を < にしました。その他は同じなので、条件が 10 < 5 になってこれは正しくないので、{ } 内の処理は 実行されなかったため、画面に何も表示されなかったわけです。これで ある条件を満たす場合にだけ 処理を実行することができるようになりました。次は 条件を満たす場合と 満たさない場合で 違う処理をさせる書き方です。

if / else 文

if (条件1) {

    条件1が成り立つ時に実行する処理;

   }else {

     条件1が成り立たない時に実行する処理;
   }

最も基本的な if 文 の書き方に続けて else と書いて 2つ目の { } 内に条件を満たさなかった場合に実行する処理を書きます。これも実際に試してみます。

ex.3

var num = 5;

if (num > 5) {

   document.write('5よりも大きい。');

}else {
   document.write('5と同じか、又は小さい。');
}

ex.3 の実行結果

今度は 変数 num に 5 を代入して、5 よりも大きいかどうかを判定しています。 つまり 5 > 5 を判定しています。これは 正しくありませんので、条件が 成り立つ場合の処理は行われずに、else の後の { } 内の処理が実行されています。
これで 条件によって 実行する処理を 2つに分岐させることができましたが、もっと分岐させる事もできます。次は その方法を試してみます。

if / else if / else 文

if (条件1) {

    条件1が成り立つ時に実行する処理;

   }else if (条件2){

     条件2が成り立つ時に実行する処理;

   }else {

    条件1 も条件2 も成り立たない時に実行する処理;

読む時には else / if 文 と言うようです。全部読んでいたら さすがにちょっと長過ぎます。

さっきの if / else の後にさらに if / else をつなげて書いた状態です。最後の else の後の処理は 条件1 も 条件2 も成り立たなかった場合に 実行されます。また else / if はいくつでもつなげて書くことができます。

ex.4

var num = 1;

if (num > 5) {

   document.write('5よりも大きい。');

}else if(num < 5){

   document.write('5よりも小さい。');

}else {

   document.write('5と等しい。');

}

ex.4 の実行結果

ここでは else / if の後に書いた 条件が成り立つように、num の値を 1 にして試してみましたが、他の数値 を代入しても、ちゃんと正しく表示されました。

if 文は 比較演算子を使って条件を書くことの練習にとても良かったので、色々試してみるのも良さそうです。次回のまとめは 繰り返しの制御文にしようと思います。

JavaScript 初歩のまとめ ⑥ 比較演算子

以前 算術演算子についてまとめましたが、今回は 他にも色々ある演算子の中から 比較演算子についてまとめてみます。比較演算子までしっかり復習できたら、ようやく制御文についてまとめる予定です。その辺りからプログラムらしくなってきそうですので、がんばって身につけたい所です。

比較演算子

今回も 表にまとめました。比較演算子を使った式は その式が正しい（成り立つ）場合には true 、正しくない（成り立たない）場合には false の値をそれぞれ返します。この値を画面に表示させて、練習しながら慣れていこうと思います。（表の中の「…」の箇所は「等しくない場合 false」を省略しています）

a == b

a と b が等しい場合に true 、等しくない場合に false を返します。まだ書き方に慣れていなくてつい、 イコールをひとつだけにしてしまうのですが、ひとつだと代入の意味になってしまいます。

var a = 5;
var b = 5;

var c = true;
var d = 1;

var e = 0;

var f = false;

document.write(a == b, '<br>', c == d, '<br>', e == f);

== の実行結果

a == b 、改行タグ 、c == d 、改行タグ 、e == f の順に表示しています。5と 5 が true なのはすぐ判りますが、true と 1 、false と 0 にも true が返っています。これは、true と 1 、false と 0 はそれぞれデータ型は違っても、プログラム上では同じ意味として扱われているからです。それでは ついでに、比較演算子ではないですがこんな事を試してみます。

var a = true;
var b = 1;
var c = 0;
var d = false;
document.write(a + b, '<br>', c + d);

a + b, c + d の実行結果

同じ意味に扱われているのなら 足し算してみました。結果は上の通りです。同じ意味に扱われているものなので、計算に使うと 自動でデータ型が数値型に変換されて、このような結果が返るわけです。

a != b

a と b が等しくない場合に true 、等しい場合に false を返します。a == b を逆転させた条件です。

var a = 5;
var b = 5;

var c = true;
var d = 1;

var e = 0;
var f = false;

document.write(a != b, '<br>', c != d, '<br>', e != f);

!= の実行結果

== のときと条件が逆なので、結果も逆になっています。

a > b

a が b よりも大きければ true 、大きくなければ false を返します。

var a = 5;
var b = 5;
var c = 3;
var d = 1;
document.write(a > b, '<br>', c > d);

> の実行結果

> には、 同じ数は含まれませんので 5 > 5 は false になります。

a < b

a が b よりも小さければ true 、小さくなければ false を返します。

var a = 5;
var b = 5;
var c = 3;
var d = 1;
document.write(a < b, '<br>', c < d);

< の実行結果

さっきと同じく < にも同じ数は含まれません。

a >= b

a が b と同じか大きい場合に true 、a が b より小さい場合に false を返します。この条件は 数学等でいう「以上」と同じです。

var a = 5;
var b = 5;
var c = 3;
var d = 1;
document.write(a >= b, '<br>', c >= d);

>= の実行結果

>= には 同じ数も含まれますので、true が返っています。あと、この比較をする時に、つい=> こう書いてしまう事があって 同じようなものかと思いますが、エラーになります。

a<= b

a が b と同じか小さい場合に true 、a が b より大きい場合に false を返します。この条件は 数学等でいう「以下」と同じです。

var a = 5;

var b = 5;

var c = 3;

var d = 1;

document.write(a <= b, '<br>', c <= d);

<= の実行結果

<= には 同じ数も含まれますので、true が返っています。これもさっきと同じで、=< こう書いてしまうと エラーになります。

a === b

a と b がデータ型まで含めて等しい場合に true 、データ型まで含めて等しくない場合に false を返します。

var a = 5;
var b = 5;

var c = true;
var d = 1;

var e = 0;

var f = '0';

document.write(a === b, '<br>', c === d, '<br>', e === f);

=== の実行結果

一番最初に試した == よりも より厳密に データ型まで含めて同じかどうかを 判定します。

== のときは true と 1 には true が返っていましたが、今回は false が返っています。

また、0 と '0' も数値型と文字列型 で違うので、false が返っています。

少し長くなりましたが、以上で 比較演算子は 一通り試しました。これは制御文の 条件によく使うものなので、次回はやっと制御文について （なるべく間を空けないうちに）まとめようと思います。

遅延評価勉強法のこと

「nanapi社長日記」というブログを読んでいて遅延評価勉強法 という考え方がある事を知りました。詳しくは、その記事を読んでいただくのが一番ですが、「勉強は 必要になった時に必要なことだけやる」といった主旨のようです。

今 JavaScript の勉強をしていて 初歩の部分が 身についてきた所ですが、今後はこの遅延評価勉強法でやっていこうと思います。

このブログの最初の方でも 書きましたが、最終的には ショッピングサイトを 作ることが目標なのですが、その手前の目標が JavaScript で 動的なサイトを作ることです。

これらの目標に必要そうな 事は、「CSS とか formを JavaScript で制御する」でしょうか…。という事は 次に必要なのは、（いよいよ） DOM ですね。

という訳で 今後、DOM を勉強していきます。それとは別で 初歩のまとめは 続けていきますので、こちらも是非 読んで下さい。

最初に紹介したブログの記事

nanapi社長日記　http://blog.livedoor.jp/kensuu/archives/50555054.html

JavaScript 初歩のまとめ ⑤ データ型

JavaScript の初歩のまとめを続けていますが、今回から制御文をまとめるつもりでいたのですが、これには 比較演算子が 付き物なので、先にデータ型の初歩的な部分の 数値、文字列、論理値 について まとめてみようと思います。


数値型

数値型には、10進数、8進数、16進数、浮動小数 等がありますが、今の時点では、10進数の整数と小数くらいしか使わないと思います。

変数に代入するときの書き方は、

var num = 10;
var num = 3.14;



文字列型

文字列型には、数値以外の全部の文字が含まれます。ここには 0文字の文字列も含まれます。文字列を扱う時に注意が必要なのが、「"」（ダブルクォーテーション）または「'」（シングルクゥォーテーション）で囲む必要がある事です。囲まないで代入しようとすると変数名として扱われます。また、数字を囲むと 数値型ではなく 文字列型として扱われるので、計算することができなくなります。「"」や「'」の記号自身を文字列として扱いたいときは、「"」を扱いたいときは「'」で囲み、「'」を扱うときは「"」で囲みます。
変数に代入するときの書き方は、

var str = "It's";

var str = 'JavaScript';

var str = "";

3つめの例は、0文字の文字列の例です。

論理値型

論理値には、true と false があります。それぞれ 真、偽 の意味です。例を挙げた方が判りやすいと思います。

例） num == 10;

この式が成り立つ時、つまり 変数 num に10 に等しい時は、true　等しくない時には false となります。これは「"」や「'」で囲んでしまうと、文字列になってしまうので注意が必要です。理論値型は、次にまとめを書こうと思っている 制御文で必要になるデータ型です。


変数に代入するときの書き方と気を付けるべき事を書きましたので、その辺りの事をいくつか試してみます。


var text = JavaScript;
document.write(text);

文字列をクォーテーションで囲まなかった場合です。これを実行すると、

エラーが出て、何も表示されません。これは、JavaScript を変数と解釈したのに、その変数が宣言されていないためです。



次は文字列の中に「'」が含まれているのに文字列を「'」で囲んでしまった場合です。
var text = 'It's a toy.';
document.write(text);

やはりエラーが出て表示されませんでした。囲むのを「"」に直して実行してみます。

var text = "It's a toy.";
document.write(text);

正しく表示されました。

次は 数字をクォーテーションで囲んでみます。

var num1 = '50';
var num2 = '50';
document.write(num1 + num2);

num1 と num2 という変数にそれぞれ 50を代入していますが、クォーテーションで囲んでいるので、どちらも文字列として扱われています。この 2つの変数の合計を表示させようとしていますが、文字列になっているため、100 ではなく 5050 が表示されました。これは 文字列が連結されたものです。

ついでなので もうひとつ試してみましょう。

var num1 = '50';
var num2 = 50;
document.write(num1+num2);

今度は、num1 は文字列ですが、num2 はクォーテーションを外してちゃんと数値型で代入しているのに、実行した結果はさっきと同じです。これは JavaScript が、文字列と数値を 足し算しようとすると、自動で 数値を文字列に変換するようにできているためです。

今回は以上です。

データ型にはこれ以外にもいくつか種類がありますし、数値型の中にも ここに出ていないものがあります。これらの型については、必要が出た時に復習とまとめをしてみようと思います。

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つの文字列が つながって 表示されています。これは 色々と応用ができそうな感じがしますので、何か思いついたらまた試してみたいと思います。

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

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