クロピグログ

職業訓練で学んだことまとめ

【JavaScript授業九日目】組み込みオブジェクト

組み込みオブジェクト(続き)

●プロパティとメソッドの違い:()があるかないか

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

 

●乱数

console.log("乱数生成");
console.log(Math.random() * 3);
0以上3未満の乱数を生成して変数に代入
 
console.log(Math.floor(Math.random() * 5));
0以上3未満の小数点以下を切り捨てして「0」「1」「2」の整数にする

 

console.log("名前をランダムに表示");
名簿を配列で管理
var nameList = [
  "田中",
  "佐藤",
  "鈴木",
  "高田",
  "石山",
  "山田",
];
var randomNum = Math.floor(Math.random() * nameList.length);
配列のlengthプロパティを入れてあげれば
配列の数が増えた際に数字変えなくていい
console.log(nameList[randomNum]);

 

Math.random()

●オブジェクトの頭文字は大文字という暗黙のルール

document.getElementById('num2').value;
console.log(num1);

●頭文字が小文字の場合もある

 

function displayAnswer2() {
  console.log('面積');
  var answer;
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  console.log(num1);
  console.log(num2);
 外部から取得した値は一律文字列型になる
 コンソール表示が黒(文字列型)
 ※青(数値型)
  answer = num1 * num2 * Math.PI;
 面積を計算して代入
 ユーザ入力値は自動的に数値型変換
  console.log(answer);
 コンソールに面積の数値を表示
 コンソール表示が青(数値型)
  document.getElementById('display1').innerHTML = answer;
 ブラウザ内の表示内容を変更
}

外部から取得した値は一律文字列型になる

ユーザ入力値は自動的に数値型変換

f:id:chromiumpig:20200803122415p:plain


●Dateオブジェクト

・日付に関するオブジェクト(オリジナル)

var today = new Date();
変数todayを宣言して右辺を代入
■右辺の動き
 new演算子:新しくオブジェクトを作成
           new演算子の後に続くコンストラクタを呼び出す
 
コンストラクタ(建設業者)
 「Date()」がコンストラク
 新しくオブジェクトを作成する際に一度だけ呼び出される特殊なメソッド
 「オブジェクト名()」で記述する
 コンストラクタが指定したオブジェクトの内容を
 インスタンスにコピー(建設)する
 Dateのコンストラクタは引数で指定した日時をインスタンス内に設定する
 引数なしの時はコンストラクタ実行時の日時をインスタンス設定する
 
new演算子とコンストラクタによって
インスタンス(オブジェクトのコピー)が生成される

●なにも実行しなければ今の日付

 

var date2 = new Date(201801120);
コンストラクタの引数
第1引数:年
第2引数:経過月を0-11で指定(通常月と違う)
第3引数(省略可):日時(省略時「1」)
第4引数(省略可):時(省略時「0」)
第5引数(省略可):分(省略時「0」)

 

var date3 = new Date(1514775600000);
コンストラクタの引数
1970年1月1日0分0秒からの経過ミリ秒
(タイムスタンプ)で日時指定

 

var date1 = new Date('2018/1/1 12:00');
date1は2018年1月1日12時を管理
 
console.log(date1.getFullYear());
変数date1の管理する日時の年を返す
 
console.log(date1.getMonth());
変数date1の管理する日時の経過月を返す
通常の月に変換は「+1」しなければならない
 
console.log(date1.getDate());
変数date1の管理する日時の日付を返す
 
console.log(date1.getDay());
date1.getDate()
変数date1の管理する日時の曜日番号を返す
0→日曜日
1→月曜日
2→火曜日
3→水曜日
4→木曜日
5→金曜日
6→土曜日
 
console.log(date1.getTime());
date1.getTime()
変数date1の管理するタイムスタンプを返す
タイムスタンプは基準値1970/1/1 0:00:00からの経過ミリ秒

 

・日付などは1スタート

・曜日や月は0スタート

・これは日本語で「神無月...」などいろんな名称あるから?諸説あり

f:id:chromiumpig:20200803153527p:plain

console.log(date1.setFullYear(2000));
date1.setFullYear(2000)
引数で指定した年に変更する
戻り値:変更後日時のタイムスタンプ
戻り値を使わない時は出力処理や代入処理をせずにそのまま捨てて構わない

 

●スプレット構文

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax