sit in a circle and chat happily

JavaScript 11日目

投稿日:2021-12-16
更新日:2022-03-24
js

(後回しにしていた第10章の後半)

第10章:do while文

do while文の使い方

do while文もwhile文と同じように条件が満たされている間、特定の処理を実行し続ける。while文との違いは繰返し条件の判断を繰返し対象処理実行後に行う。そのため繰返し対象処理を必ず1回実行する。

do{
  繰返し対象処理
}while(条件式)

do文の「{}中カッコ」内の処理を実行した後、while「()丸カッコ」内の条件を確認する。

条件が満たされている間(true)「{}中カッコ」内の処理を実行し続ける。

条件が満たされなくなった(false)時に繰返し処理を抜けdo while文を終了する。

var num;

console.log('1回目の出力');
num = 0;
do {
  console.log(num);
  num++;
} while (num < 3)

console.log('2回目の出力');
num = 5;
do {
  console.log(num);
  num++;
} while (num < 3)

console.log('3回目の出力');
num = 5;
while (num < 3) {
  console.log(num);
  num++;
}
コンソール出力内容

変数numに「0」を代入してdo while文に処理が移る。

var num;

console.log('1回目の出力');
num = 0;
do {
  console.log(num);
  num++;
} while (num < 3)
コンソール出力内容

do while文の場合は必ず繰返し対象処理を1回実行する。

コンソールに変数numの「0」が出力される。

その後「num++」によって変数numの値が1加算されて「0」から「1」に変わる。

繰返し対象処理実行後に条件を確認する。変数numには「1」が入っているため、「変数numは3より小さい」の条件が満たされる(true)。

条件が満たされている場合は再度繰返し対象処理を実行する。

1回目の繰返し処理後の条件が満たされたので「{}中カッコ」ブロック内にある繰返し対象処理を実行する。

コンソールに変数numの「1」が出力される。

その後「num++」によって変数numの値が1加算されて「1」から「2」に変わる。

繰返し対象処理実行後にwhile文の条件を確認する。
変数numには「2」が入っているため、「変数numは3より小さい」の条件が満たされる(true)。

条件が満たされている場合は再度繰返し対象処理を実行する。

2回目の繰返し処理後の条件が満たされたので「{}中カッコ」ブロック内にある繰返し対象処理を実行する。

コンソールに変数numの「2」が出力される。

その後「num++」によって変数numの値が1加算されて「2」から「3」に変わる。

繰返し対象処理実行後にwhile文の条件を確認する。変数numには「3」が入っているため、「変数numは3より小さい」の条件が満たされない(false)。

条件が満たされない(false)時はdo while文を終了させ次の処理に進む。

do while文は繰返し対象処理が必ず一度実行されるため、入力処理によって取得した値を最後に確認し、不適切な時は再度入力処理させるような時に使う。

第12章:組み込みオブジェクト

組み込みオブジェクトとは

JavaScriptはよく使う値や処理をあらかじめ用意している。これを組み込みオブジェクトと呼ぶ。文字列の処理や値をまとめたStringオブジェクトや数学的な処理や値をまとめたMathオブジェクトなどがある。

オブジェクトとは

オブジェクトとは関連する処理や値をまとめて扱いやすくしたもの。オブジェクトは「メンバ」と呼ばれる処理や値で構成されている。

メンバの中で処理のことを「メソッド」値のことを「プロパティ」と呼ぶ。

オブジェクト名は頭文字大文字のパスカル記法で記述するという暗黙のルールがある。

例えばMathオブジェクトは数学的処理や値が用意されており、呼び出していつでも使うことができる。

「変数」「プロパティ」「関数」「メソッド」の判別法

オブジェクト外オブジェクト内
変数
例)変数名
プロパティ
例)オブジェクト.プロパティ名
処理関数
例)関数名(引数)
メソッド
例)オブジェクト.メソッド名(引数)

(オブジェクトの説明は一旦後回しにして、まずはMathオブジェクトに入る)

オリジナルオブジェクトを利用

プロパティを利用

オブジェクト名.プロパティ名

メソッドを利用

メソッド名.メソッド名(引数)

Mathオブジェクト

◆命名規則:暗黙のルール
 ・オブジェクト名は頭文字が大文字
 ・すべて大文字で書かれた変数やプロパティは「定数」

Mathオブジェクトの代表的なプロパティ

プロパティ名内容
Math.E【読み取り専用】自然対数の底を意味する数学定数。約2.718
Math.LN2【読み取り専用】2の自然対数。約0.693
Math.LOG2E【読み取り専用】2を底としたEの対数。約1.443
Math.PI【読み取り専用】円周率。約3.14159
Math.SQRT1_2【読み取り専用】1/2の平方根。1/√2と等しい。約1.414
Math.SQRT2【読み取り専用】2の平方根。約1.414

※プロパティがすべて大文字 ⇒ 定数

Mathオブジェクトの代表的なメソッド

メソッド名内容
Math.abs(x)引数として与えた数の絶対値を返す
Math.ceil(x)引数として与えた数以上の最小の整数を返す(切り上げ)
Math.floor(x)引数として与えた数以下の最大の整数を返す(切り下げ)
Math.round(x)引数として与えた数を四捨五入して、近似の整数を返す
Math.max([x[,y[,・・・]]])引数として与えた複数の値の中で最大の値を返す
Math.min([x[,y[,・・・]]])引数として与えた複数の値の中で最小の値を返す
Math.random()0以上1未満の疑似乱数を返す
Math.sin(x)引数として与えた数のサイン(正弦)を返す
Math.cos(x)引数として与えた数コサイン(余弦)を返す
Math.tan(x)引数として与えた数タンジェント(正接)を返す
Math.sqrt(x)引数として与えた数の平方根を返す

Mathオブジェクトを使ってみる

JavaScriptがあらかじめ用意されている「オブジェクト」。
数学的な値(プロパティ)や処理(メソッド)がある。

Mathオブジェクト:プロパティの利用方法

対象オブジェクト.プロパティ名
console.log('1回目の出力');
console.log(Math.PI);

// オブジェクト内のプロパティ(値)を参照
// Math.PI : π(円周率)の値を参照
コンソール出力内容

【問題】

console.log('◆直径10cmの円の面積');
var diameter = 10  // 直径
var radius = diameter / 2  // 半径
console.log(radius * radius * Math.PI + 'cm');
console.log(radius ** 2 * Math.PI + 'cm');
// 「**」 → べき乗
コンソール出力内容

Mathオブジェクト:メソッドの利用方法

対象メソッド.メソッド名(引数)

※引数(ひきすう):パラメータ
  処理に渡す値

console.log('2回目の出力');
// オブジェクト内のメソッド(処理)を呼び出す
console.log(Math.ceil(3.3));
// Mathオブジェクト内のceilメソッドを呼び出し
// 引数で渡した値を切り上げ処理し、整数になった値(4)を返す → 戻り値・返り値
console.log(Math.floor(3.3));
// 引数で渡した値を切り捨て処理し、整数になった値(3)を返す → 戻り値・返り値
console.log(Math.round(3.3));
// 引数で渡した値を四捨五入処理し、整数になった値(3)を返す → 戻り値・返り値
コンソール出力内容

「ceilメソッド(切り上げ)」「floorメソッド(切り捨て)」「roundメソッド(四捨五入)」は引数で数値を1つ受け取るメソッド。
結果を戻り値としてメソッド呼び出し元に返す。

ceil, floor, round
console.log(Math.max(5, 2, 10));
console.log(Math.min(5, 2, 10));
// 引数で渡した値の中で、最大(最小)の値を返す

// 引数は「なし」「1つ」「2つ」・・・と必要に応じて記述できる
// 複数の引数を指定する場合は「,」で区切る
コンソール出力内容

Mathオブジェクトのmaxメソッドは引数で渡した数値の中から一番大きい数値を戻り値として返す。

引数に複数の値を記述してメソッドに渡せる。その際は「,(カンマ)」で区切りながら4つ、5つと引数を増やすことができる。

console.log(Math.random());
// 引数は「なし」でrandomメソッドを呼び出している
// 処理に値を渡す必要がなければ引数を記述しない
// 「()丸カッコ」はメソッドの呼び出しを意味するので省略不可

// 0以上1未満のランダムな数値(乱数)を返す
コンソール出力内容

Mathオブジェクトのrandomメソッドは引数で渡さない。呼び出すだけで「0以上1未満の疑似乱数」を戻り値として返す。

【問題】

console.log('【問題12-3】');
console.log('◆最小値');
console.log(Math.min(99, 4, 68, -39, 0));

console.log('◆0以上3未満の疑似乱数(小数)');
var random1 = Math.random();  // 0以上1未満の小数を変数random1に代入
console.log(random1);  // 確認表示
var random2 = random1 * 3
// 1未満の小数×3で、3未満の値が出る
// 0以上3未満の小数を変数random2に代入
console.log(random2);

console.log('◆0・1・2をランダム表示');
var random3 = Math.floor(random2)
console.log(random3);

console.log('  短く記述');
console.log(Math.floor(Math.random() * 3));
コンソール出力内容

【追加問題】
配列で「大吉」「吉」「凶」を管理。「0」「1」「2」の乱数を生成。
おみくじ結果をコンソール出力。
※結果数が増えても変更箇所が少なくていいようにする

var omikuji = [
  '大吉',
  '中吉',
  '吉',
  '凶',
  '大凶',
]
console.log(omikuji[Math.floor(Math.random() * omikuji.length)]);
コンソール出力内容
console.log('小数点第2位で四捨五入');
// JSは原始的な言語なので
// 小数点第〇位での処理ができない
var num = 12.345;
console.log(Math.round(num * 10) / 10)
// 12.345 * 10 = 123.45
// 四捨五入:123
// 123 / 10 = 12.3

// 小数点第3位では「100」を使う
コンソール出力内容

Dateオブジェクト

Dateインスタンスの作成

new Date()
console.log('1回目の出力');
var today = new Date();
// 引数なしの場合はプログラム実行時の日時を持ったインスタンスになる

/*
◆代入演算子右辺の動き「new Date()」
new演算子:新しいオブジェクトを生成
Date():new演算子で生成されたオブジェクトを
Dateオブジェクトのコピーに作り替えていく

オブジェクト名():コンストラクタ(建設者)と呼ぶ
オブジェクトのコピーを作成する特殊なメソッド
コンストラクタは頭文字が大文字

Dateコンストラクタの引数に値がない場合は
プログラム実行時の日時がオブジェクトのコピー内に保管される

オブジェクトのコピーのことを「インスタンス」と呼ぶ
*/
console.log(today);

var date1 = new Date('2018/1/1 12:00');
// 指定した日付(引数に文字列指定)を管理した
// Dateインスタンスの生成
// 'YYYY/MM/DD HH:MM'
// 指定する書式が決まっているので注意
console.log(date1);

var date2 = new Date(2018, 0, 1, 12, 0);
// 複数の引数を渡して日時を指定する
// 第1引数:年 【必須】
// 第2引数:経過月 【必須】1月(0)~12月(11)なので注意!!
// 第3引数:日
// 第4引数:時
// 第5引数:分
// 第6引数:秒
// 第7引数:ミリ秒
console.log(date2);

var date3 = new Date(1514775600000);  // タイムスタンプ
console.log(date3);
コンソール出力内容
カテゴリー