Javascript 基礎ノート

layout: post title: “2017-07-03-study-javascript-note” date: 2017-07-03 12:24:06 +0000

コンソールに文字列を表示したい時

console.log("Hello,World");
console.log('Hello,World');

プログラムの実行時にJSの改行をするかしないか制御できるコード

process.stdout.write("<h1>Hello World</h1>n"); ※ n は改行コード
process.stdout.write("<p>うさぎさんが噛んだ");
process.stdout.write("<strong>指を</strong>噛んだ。痛い。</p>");

数値をランダムに表示

var number = parseInt(Math.random() * 6) + 1;
console.log("モンスターが" + number + "匹現れた！");

ランダム個数、計算シミュレーション

//値段を計算する
process.stdin.resume();
process.stdin.setEncoding('utf8');

var apple_price = 450;      // apple_priceリンゴの単価
var apple_num = parseInt(Math.random() * 10) + 1    // apple_numリンゴを買う数
console.log("リンゴの単価：" + apple_price + "円");
console.log("リンゴを買う数：" + apple_num + "個");

var total = apple_price * apple_num;
console.log("合計金額：" + total + "円");

// コメント
console.log('Hello,World');

計算

console.log(7 + 5); // 結果：12
console.log(8 - 4); // 結果：4
console.log(3 * 5); // 結果：15
console.log(6 / 2); // 結果：3
console.log(7 % 2); // 結果：1

console.log("7 % 2"); // クオートで囲むと数式がそのまま表示される

変数

var name = "Sugar";
console.log(name);
console.log("name");

var length = 5;
var area = length * length;
console.log(area); // 結果：25

変数はPHPと同じく以下のように更新される ▼

var name = "Sugar";
console.log(name); // 結果：Sugar
var name = "Salt";
console.log(name); // 結果：Salt

var x = 1;
x = x + 10;
console.log(x); // 結果：11

省略形
x = x + 10; → x += 10;
x = x - 10; → x -= 10;
x = x * 10; → x *= 10;
x = x / 10; → x /= 10;
x = x % 10; → x %= 10;

値が1の時だけ以下のように省略できる

x += 1; → x++;
x -= 1; → x--;

文字の連結

console.log("Sugar" + "Salt"); // 結果：SugarSalt

var firstName = "Ninja";
console.log(firstName + "Salt"); // 結果：NinjaSalt

var lastName = "Salt";
console.log(firstName + lastName); // 結果：NinjaSalt

if文

var x = 10;
if( x == 10 ){
  console.log("x は 10 です");
}

var x = 20;
if ( x > 30 ){
  console.log("x は 30 より大きい"); // ← false なので実行されない
 }
 if ( x > 10 ){
  console.log("x は 10 より大きい"); // ← true なので実行される
 }
// 結果：x は 10 より大きい

比較演算子

<  右辺の方が大きい時 true
<= 右辺の方が大きいまたは等しい時 true
>  右辺の方が小さい時 true
>= 右辺の方が小さいまたは等しい時 true
== 右辺と左辺が等しい時 true
!= 等しくないとき true

else, else if

var x = 20;
if( x == 30 ){
  console.log("x は 30 です"); //  ← false なので実行されない
} else {
  console.log("x は 30 ではありません"); // ← true なので実行される
}
// 結果：x は 30 ではありません

var x = 20;
if( x > 30 ){ //  ← false なので実行されない
  console.log("x は 30 より大きい");
} else if ( x >= 20 ) { // ← true なので実行される
  console.log("x は 30 以下 20 以上");
} else { // ← すでに true の条件があったため実行されない
  console.log("x は 20 より小さい");
}
// 結果：x は 30 以下 20 以上

論理演算子

&& (かつ)

条件Aと条件Bの両方を"true"した場合に全体も"true"になる。
var x = 20;
if( x > 10 && x < 30 ){
  console.log("x は 10 より大きい、かつ 30 より小さい");
}
// 結果：x は 10 より大きい、かつ 30 より小さい

|| (または)

複数の条件のうちひとつでも"true"の場合全体も"true"となる。
var x = 20;
if( x < 30 || x > 50 ){
  console.log("x は 30 より小さい、または 50 より大きい");
}
// 結果：x は 30 より小さい、または 50 より大きい

! (条件の否定)

条件式が"true"であれば"false"に、"false"であれば"true"になる。
var x = 20;
if(!( x > 30 )){ // true になる
  console.log("x は 30 以下");
}
// 結果：x は 30 以下

例題：

var x = 50;

// 変数 x が 40 でない場合の条件分岐を書いてください
if(!( x == 40)){
  console.log("x は 40 ではありません");
}
// 結果：x は 40 ではありません

// 変数 x が 20 以上 70 未満のときの条件分岐を書いてください
if( x >= 20 && x < 70 ){
    console.log("x は 20 以上 70 未満です");
} else {
    console.log("x は 20 未満もしくは 70 以上です");
}
// 結果：x は 20 以上 70 未満です

while文 (繰り返し処理)

var jump = 1;
while ( jump <= 5 ){
  console.log("わんこが" + jump + "回ジャンプした");
  jump++;
}
// 結果: 1-5 までの間処理が実行され、わんこが 1→5 回ジャンプした。となる。

for文 (繰り返し処理)

1) 変数の定義
2) 条件式
3) 変数の増減式

以上の順で記述する。

for ( var i = 1; i <= 100; i++ ){
  // i <= 100 の時、実行される処理
  console.log(i);
}
// 結果: 1 2 3 4 5 6 7 … 98 99 100

break, continue

先ほどの繰り返し処理は条件式が常に"true"になる為、無限ループしてしまう。無限ループはコンピューターに極端な負担を与えるため注意が必要。その際に制御するために用いられるのが"break"である。

for ( var i = 1; i <= 100; i++ ){
  if ( i > 5 ){ // 変数 i が 5 より大きくなると
    break; // for 文を抜ける
  }
  console.log(i);
}
// 結果：1, 2, 3, 4, 5 (終)

そして現在の周だけをスキップし、ループそのものは継続して実行するのが"continue"。
for( var i = 1; i <= 10; i++ ){
  if( i % 3 == 0 ){ // 変数iが3の倍数の時、
    continue; // その周のループを終了し、次のループに入る。
  }
  console.log(i);
}
// 結果：1, 2, 4, 5, 7, 8, 10

例題：
for(var i = 1; i < 100; i++) {
  // 「変数iが5の倍数かつ8の倍数」のとき、ループを抜けてください
  if ( i % 5 == 0 && i % 8 == 0 ) {
    break;

  // 「変数iが5の倍数」のとき、次のループに進んでください
  } else if ( i % 6 == 0 ) {
    continue;

  } else {
    console.log(i);
  }
}
// 結果：1, 2, 3, 4, 5, 7, 8, 9, 10, 11,…29, 31, 32, 33, 34, 35, 37, 38, 39

配列

配列には以下のような2種類の定義がある。
① var names = ["Sugar", "Salt", "Pepper"]; // ["Sugar",←0 "Salt",←1 "Pepper"←2];
② var names = [];
  names[0] = "Sugar";
  names[1] = "Salt";
  names[2] = "Pepper";

配列の要素を取り出すには
var names = ["Sugar", "Salt", "Pepper"];
console.log("私は" + names[0] + "です。");
// 結果：私はSugarです。

配列に対して使える機能
『配列名.length』で要素(値)の個数を数えられる
var names = ["Sugar", "Salt", "Pepper"];
console.log(names.length);
// 結果：3

for文にも書き直せる
var names = ["Sugar", "Salt", "Pepper"];
for ( var i = 0; i < names.length; i++){
  console.log(names[i]); // names.length が 3 なので、i が 0~2 の間ループする
}

例題：
var fruits = ["apple", "banana", "grape"];

// 変数fruitsLengthを宣言し、配列の要素の数を代入してください
var fruitsLength = fruits.length;

// for文を用いて、配列の値を順にコンソールに表示してください
for ( var i = 0; i < fruitsLength; i++ ){
  console.log(fruits[i]);
}

配列から要素を取り出す

// "age": 14のあとに、キーと値を追加してください
var user = {"name": "wanko", "age": 14, "place": "Tokyo"};

// 連想配列userのキー"name"に対応する値を、ドット(.)を用いて取り出し表示してください
console.log(user["name"]); // ← これも
console.log(user.name); // ← これも同じ処理を実行する

// 連想配列userのキー"age"に対応する値を、[ ]を用いて取り出し表示してください
console.log(user["age"]);
console.log(user.age);

for (var key in user) {
  // 変数keyの値をコンソールに表示してください
  console.log(key);

  // キーに対応する値を、[ ]を用いて取り出して表示してください
  console.log(user[key]);

}

// 結果：
wanko
14
name
wanko
age
14
place
Tokyo

関数

function square(length) {
  var area = length * length;
  return area;
}

// 変数lengthを宣言し、7を代入してください。
var length = 7;

// 関数square()と変数lengthを用いて、"正方形の面積は◯◯です"と表示してください。
console.log("正方形の面積は" + square(length) + "です");

// 結果：正方形の面積は49です

関数の定義

基本形：
function 関数名 ( 仮引数1, 仮引数2, …){
  処理;
  return 戻り値; // 処理結果
}
console.log( 関数名 (引数)); // 関数の呼び出し(関数に与える入力値)

例題：
function triangle(width, height){
  return width * height / 2;
};
console.log(triangle(3, 6));
// 結果：9

スコープ：
変数にはその変数が使える範囲を決定するスコープという概念がある。
関数の外はグローバルスコープといい、そこで定義した変数はグローバル変数、
関数の中はローカルスコープといいそこで定義した変数はローカル変数になる。
ローカル変数は関数の中でのみ有効であり、グローバル変数に影響を与えない。

関数内で定義した変数numberは、
グローバルスコープで定義した変数numberを上書きしていないことがわかる。

var number = 10;
function add(a){
  var number = a + 10;
  return number;
}
console.log(add(8)); // 結果：18
console.log(number); // 結果：10

例題：
var number = 10;
var a = 6;
var b = 7;

// 関数addを定義してください
function add(num1, num2){

// 関数add()の引数に変数a, bを渡し、変数numberを戻り値としてください。
// そしてコンソールに表示してください。
  var number = num1 + num2;
  return number;
}

// 変数addの足し算とnumberをコンソールに表示してください
 console.log(add(a,b));
 console.log(number);

// 結果
// 13
// 10

メモ:

Mozilla Developer Network（MDN）のリファレンスが一番分かりやすい
undefined: 定義されていない
null: 何もない
t インデント
var s = “he’llo”;

var x;

x = 10 * 2; // 20
x = 10 % 3; // 1

// x = x + 5;

x += 5; // 6
x++; // 7
x--; // 6