JavaScript(ベイビーステップ)

学習記録(10/27)
(0)
以下のサイトが初学者向けっぽかったのでここで勉強する。
https://qiita.com/azk0305/items/a13d494178d83fc8f2bc

(1) 学習環境の構築と基本的な書き方
JavaScriptは、ブラウザの表示内容を動的に制御するための言語。
Firefoxのスクラッチパッドの開発環境を利用可能。.jsで保存可能。
・ブラウザコンソールに情報表示→console.log("hello world");

(2) 変数とデータ型
・データ型に依らず全ての変数はvarというキーワードをつけて宣言する。
・練習1
  var s = "あいうえお";
  console.log(s);
・練習2
  var a, b, c;
  a = 3;
  b = 2;
  c = a + b;
  console.log(c);
・練習3
  var a = 123;
  a = "あいう";
  console.log(a);
  //データ型に依らないため、エラーしない。
・varをつけないで宣言することも可能だが、上級者向け。
JavaScriptのデータ型
  ・数値型(Number)
  ・文字列型(String)
  ・真偽値型(Boolean)
  ・配列型(Array)
  ・オブジェクト型(Object)→プロパティとメソッドを持つ。連想配列として利用可能。
  ・Null型(Null)          →意図的に何も入っていないことを指定するための型。
  ・未定義型(Undefine)    →初期化・定義されていない状態を表す型。
・typeofというキーワードで、変数に入っているデータの型を知ることが可能。
・練習4
  var a = 123;
  var b = "abc";
  var c;                 // 初期化しない。
  console.log(typeof a); // numberと表示される。
  console.log(typeof b); // stringと表示される。
  console.log(typeof c); // undefinedと表示される。
予約語は以下で確認できる。
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words

(3) 演算子および配列
・算術演算子
  ・ + → 数値の足し算
       → 文字列の連結
  ・ - → 数値の引き算
  ・ * → 数値の掛け算
  ・ / → 数値の割り算
  ・ % → 数値の割り算の余り
・練習1
  console.log(123 + 456);      //579
  console.log("123" + "456");  //123456
・代入演算子
  ・ =  → a = 1;  代入
  ・ += → a += 1; 加算して代入
  ・ -= → a -= 1; 減算して代入
  ・ *= → a *= 1; 乗算して代入
  ・ /= → a /= 1; 割り算して代入
  ・ %= → a %= 1; 割り算の余りを代入
  ・ ++ → a++;    1加算(インクリメント)
  ・ -- → a--;    1減算(デクリメント)
・配列
  通常の配列とは、a[0]、a[1]、a[2]のようにインデックスが0から並んでいるものを指す。
・練習2  (配列の基本的な使い方)
  var num = [ 10, 20, 30 ];
  console.log(num[0]);  //10
  console.log(num[1]);  //20
  console.log(num[2]);  //30
  console.log(num[3]);  //データがないため、undefined
・配列要素の追加と上書き
  JavaScriptの配列は自由に拡張できる。既存要素の上書きも可能。
・練習3
  var num = [ 10, 20, 30 ];
  num[2] = 40;
  num[3] = 50;
  console.log(num[2]);  // 40 (上書き)
  console.log(num[3]);  // 50 (拡張)
・多次元配列
  var num = [[ 10, 20, 30 ], [ 40, 50, 60 ]];
  console.log(num[0][0]);  //10
  console.log(num[0][1]);  //20
  console.log(num[0][2]);  //30
  console.log(num[1][0]);  //40
  console.log(num[1][1]);  //50
  console.log(num[1][2]);  //60
・配列要素数の取得
  JavaScriptでは、通常の配列はArray型のオブジェクト。
  配列に要素が何個入っているかを調べるには、
  Arrayオブジェクトが持つ、lengthプロパティを参照する。
・練習4
  var num = [ 10, 20, 30 ];
  num[3] = 40; //拡張
  console.log(num.length); // 4 と表示される。
連想配列
  キーの文字列と値をペアで格納する配列のこと。
  JavaScript連想配列には、専用の型(オブジェクト)が存在していない。
  代わりにObject型のオブジェクトとして扱う。
・オブジェクトとはなにか。
  ・属性(プロパティ)を持つ。
  ・振る舞い(メソッド)を持つ。
  ・1つのオブジェクトと全く同じオブジェクトは存在しない。
  ・1つのオブジェクトは他のオブジェクトと関連性を持たせられる。
・練習5  (連想配列の基本的な使い方(プロパティに着目))
  //連想型配列
  var myself = {
    "name"      : "たかよう",
    "age"       : "26",
    "seibetsu"  : "男性"
  };
  //プロパティを参照する2種の記述方法
  console.log(myself.name);        //たかよう
  console.log(myself["seibetsu"]); //男性
  //参照したいキー名が入った変数をキーとして指定したい場合は[]の方を使う。
  var pt = "age";
  console.log(myself[pt]);         //26と表示される。
・練習6  (連想配列要素の追加と上書き)
  var myself = {
    "name"      : "たかよう",
    "age"       : "26",
    "seibetsu"  : "男性"
  }
 
  myself.age  = 30;                //要素の上書き
  myself.pref = "東京都";          //要素の追加
 
  console.log(myself.age)          //30
  console.log(myself.pref)         //東京都


  To Be continued → (4) 制御構文と関数

(4)  制御構文と関数
・if文
 var season = "秋";
 
 if(season == "春") {
   console.log("春はあけぼの");
 }
 else if(season == "夏") {
   console.log("夏は夜");
 }
 else if(season == "秋") {
   console.log("秋は夕暮れ");
 }
 else if(season == "冬") {
   console.log("冬はつとめて");
 }
 else {
   console.log("エラー:存在しない季節です。");
 }
・比較演算子
  ・ ==   等しければtrue
  ・ !=   等しくなければtrue
  ・ >    左辺が大きければtrue
  ・ <    右辺が大きければtrue
  ・ >=   左辺が右辺以上であればtrue
  ・ <=   右辺が左辺以上であればtrue
  ・ ===  左辺と右辺が等しく、なおかつデータ型も等しければ、true
  ・ !==  左辺と右辺が等しくない、あるいは、データ型が等しくなければ、true
・論理演算子
  ・ &&   論理積。and。条件式がどちらもtrueであればtrue。
  ・ ||   論理和。or。 条件式がどちらかがtrueであればtrue。
  ・ !    否定。true・falseをひっくり返す。
・練習1  (論理演算子)
  //18歳以上65歳未満であれば、OKデスと表示する。
  var age = 25;
 
  if(age >= 18 && age < 65) {
    console.log("OKデス");
  } else {
    console.log("禁じられています");
  }
・練習2  (switch文)
  var a = 3;
  var b = 2;
 
  var operator = "+";
 
  switch(operator) {
    case "+":
      console.log(a + b);
      break;
    case "-":
      console.log(a - b);
      break;
    default:
      console.log("エラー:受付できない演算子デス");
  }
・練習3  (while文)
  // 1 から 10 までの和を求めるプログラム
  var i = 1;
  var sum = 0;
 
  while(i <= 10){
    sum += 1;
    i++;
  } 
  console.log(sum);  //55
・練習4  (do-while文)
  // 1 から 10 までの和を求めるプログラム
  var i = 1;
  var sum = 0;
 
  do {
    sum += i;
    i++;
  } while(i <= 10);
 
  console.log(sum);  //55
・練習5  (for文)
  // 1から10までの和を求めるプログラム
  var i;
  var sum = 0;
 
  for(i = 1; i <= 10; i++) {
    sum += i;
  }
 
  console.log(sum);  //55
・練習6  (for-in文)
  var colors = {
    "red"     :  "赤",
    "blue"    :  "青",
    "green"   :  "緑",
    "yellow"  :  "黄"
  }
 
  console.log("英語名 => 日本語名");
 
  for(var key in colors) {
    console.log(key + "=>" + colors[keys]);
  }
・breakとcontinue
  途中でループを抜ける場合には、break。
  1回分の処理をスキップしてループの先頭に戻す場合には、continue。
・練習7  (breakとcontinue)
  // 1から20までのうち偶数のみの合計を求める
  var i = 0;
  var sum = 0;
 
  while(true) {  //無限ループにしておく。
    i++;
   
    if(i % 2 > 0) {
      continue;
    }
   
    if(i > 20) {
      break;
    }
   
    sum += i;
  }
  console.log(sum)  // 110
・ブロック内の変数のスコープ
  基本的にifやforのブロックの中で宣言された変数でも、
  そのブロックの外から参照できてしまうので、注意。
・練習8  (スコープ)
  for(var i = 1; i <= 5; i++) {
    var a = 3;
    console.log("ループ" + i + "回目:" + a);
  }
  console.log("ループの外:" + a);
JavaScriptの関数の基本的な書き方
  CやJavaなどの言語とは以下の点が異なる。
  ・functionのキーワードで関数を定義する。
  ・引数にデータ型の指定は不要。
  ・戻り値にデータ型の指定は不要。
  ・関数の定義よりも上で関数を呼び出しても、問題なく実行される。
・練習8
  funcA();                // abc と表示される
 
  var num = funcB(2, 3);
  console.log(num);       // 5 と表示される
 
  // 引数なし、戻り値なし
  function funcA() {
    console.log("abc");
  }
 
  // 引数2つ、戻り値あり
  function funcB(x, y) {
    return x + y;
  }
javaScriptで用意されている組み込み関数(オブジェクトのメソッドではなく、関数。)
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#定義済み関数
  上記の中でも、以下の5つは良く使う。
  関数名               説明
  parseInt             文字列型→数値型(整数)に変換
  parseFloat           文字列型→数値型(実数)に変換
  isNaN                指定された演算結果の値が数値ではない型(NaN)かどうかを調べる
  encodeURIComponent   指定された文字列をURLエンコードする。
  decodeURIComponent   指定された文字列をURLデコードする。
・関数内の変数スコープ
  ・関数内で定義された変数は、その関数の中でしか参照されない。
  ・グローバル変数と同じ名前の変数を、関数内で再度宣言することが可能。
    varをつければ再定義、varをつけなければグローバル変数の上書きになる。
・練習9
  var x = 10;        // グローバル変数x
 
  function func() {
    x = 20;          // グローバル変数xを上書き
    var y = 30;      // ローカル変数y
   
    console.log(x);  // 20 と表示される
    console.log(y);  // 30 と表示される
  }
 
  func();
  console.log(x);    // 20と表示される
  console.log(y);    // この部分で 'yが見つからない' というエラーが発生する
・練習10
  var x = 10;        // グローバル変数x
  var y = 20;        // グローバル変数y
 
  function func() {
    var x = 30;      // グローバル変数xとは別のローカル変数xを宣言
    y = 40;          // グローバル変数yを上書き
 
    console.log(x);  // ローカル変数の x が参照され、30 と表示される
    console.log(y);  // 40 と表示される
  }
 
  func();
  console.log(x);    // グローバル変数の x が参照され、10 と表示される
  console.log(y);    // 40 と表示される
・varをつけずに宣言した変数のスコープ
  varをつけずに変数を宣言した場合、どこで宣言されても(関数内でも)、
  グローバル変数となる。ただし、非推奨。

(5)  制御構文と関数
JavaScriptの関数は、実は Function 型のオブジェクトである。
  関数がオブジェクトであることの利点の一つに、
  関数の定義を変数に格納できるというものがある。
・練習11
  function getOne(){
   return 1;
  }
  var f = getOne;    //関数の定義を変数に格納できる。
  console.log(f());  // f() と書くことで getOne関数が実行され、1 と表示される
・関数式と匿名関数(無名関数)
  練習11では、つまり、getOne関数に f という別名をつけたことになる。
  こうするなら、わざわざ getOne という関数名をつける必要は無いわけで、
  次(練習12)のようにも記述できる。
  このように、関数の定義を変数に代入する記述方法を関数式と呼び、
  関数名をつけないで定義している関数のことを匿名関数(無名関数)
  と呼ぶ。まとまった複数の処理を定義したいが、再利用を考える
  必要がない(記述する場所でしか利用しない)場合は、匿名関数
  を利用すると、余計なことを考える必要がないので便利。
・練習12
  var f = function() {
    return 1;
  };
  console.log(f());          // 1 と表示される
・練習13
  var add = function(x, y) {
    return x + y;
  };
  console.log(add(3, 2));    // 5 と表示される
・注意:関数式で関数を定義する場合は、その関数の呼び出しをする際、
  定義した箇所よりも下に記述する。定義より前で呼び出すと
  「その関数は見つからない」という内容のエラーになる。
・即時関数
  通常の関数の定義でも関数式による定義でも、必ず関数を呼び出さない
  と定義した内容が実行されない。ひとまとまりの処理を定義して、
  さらに定義と同時に実行するための記述方法を即時関数と呼ぶ。
  即時関数は、無名関数の利用例のひとつである。
・関数の使いかたまとめ。
  ・ひとまとまりの処理を定義(関数の役割)。
    ・利用する場面で定義し、その場でのみ利用(無名関数の役割)。
      ・定義と同時に実行する(即時関数の役割)
・即時関数の書き方は、関数の定義を括弧で囲み、
  更にその直後に括弧をつけ、その中に引数に与えたい値を指定する
  (引数がなければ空の括弧で良い)。
  また、即時関数の実行結果を変数に格納するような記述方法も可能。
・練習13
  // この記述だけで こんにちは、田中さん! と表示される
  (function(name) {
    console.log("こんにちは、" + name + "さん!");
  })("たかよう");
・練習14
  var sum = (function(a, b) {
    return a + b;
  })(3, 2);
  console.log(sum);  // 5と表示される。
・関数の引数に関数を指定する。
  関数の引数に関数を指定して、関数の中で「引数として渡した関数」
  を実行してもらうことがJavaScriptでは可能である。
・練習15
  // 引数funcに渡された関数を実行する
  var sumFunc = function(a, b, func) {
    return func(a) + func(b);
  };
 
  // 13 が表示される(3 * 3 + 2 * 2の計算結果)
  console.log(sumFunc(3, 2, function(x) {
    return x * x;
  }));