jsメモ０１

addEventLIstener() 関数で、任意のイベントが発生した場合に関数内の処理を実行できる
対象要素.addEventListener( 種類, 関数, false )

jQueryでのtoggleClass()は、classList.toggleに置き換えできる

document.createElement('div');
でhtmlの要素を追加、、何を？
.textContent= " ";
どこに？
element.appendChild(追加したいhtml);　でその要素の中に入れれる
element.parentNodeを前につけることで、その要素の下に入れれる

object

const point = {
  x: 100,
  y: 200,
};
point.x = 120;
point['x'] = 120;
console.log(point.x);
console.log(point['y']);
という二つのやり方で、値を取得できる
point.z = 90;
delete point.y;

スプレット構文と、レスト構文
const otherProps = {
　r: 4,
　color: 'red',
};
const point = {
　x: 100,
　y: 200,
　...otherProps,　//スプレット構文　上のオブジェクトをオブジェクトなしで代入できる
};
const {x, r, ...others} = point;　//レスト構文　定数と他はオブジェクト

Object.keys(point);　//オブジェクトの全てのキーを配列で取得している
const keys = Object.keys(point);
keys.forEach(key => {
console.log(`Key: ${key} Value: ${point[key]}`) //keyは文字列になっているからブラケット記法
});

配列とオブジェクトは、住所の参照
スプレット構文の[...]でプリミティブ型みたいに値の参照もできる

const str = 'hello';
str.substring(開始位置, 終了位置); 　//ll
console.log(str[1]); 　//e 　　これは値の取得だけ

文字列と配列の交換
const d = [2019, 11, 14];
console.log(d.join('/')); // 2019/11/14になる
const t = '17:00:24';
console.log(t.split(':')); //["17", "00", "24"] と配列になる

Math.floor(avg); //小数点以下を切り捨て
Math.cell(avg); //切り上げ
Math.round(avg); //四捨五入
avg.toFixed(小数点以下何番目まで);
Math.random(); //0~1より下の数値までをランダム　1は含まれない
なので、*でかけた数未満になる
Math.floor(Math.random() * (n + 1))　で0からn番目の整数値をとれる
min...max までのランダムな整数値
min + Math.floor(Math.random() * (max +1 -min))

const d = new Date(); //現在の日時の取得
d.getFullYear(); //2019
d.getMonth(); //0-11 １月が0 d.getMonth() + 1 にすればいい
d.getDate(); //1-31
d.getDay(); //0-6 日曜日が0
d.getHours(); //0-23
d.getMinutes(); //0-59
d.getSeconds(); //0-59
d.getMilliseconds(); //0-999
getTime(); //全世界共通の時間
d.setHours(時, 分, 秒); // と設定できる
d.setDate(日); // で日にちの設定ができる

コールバック関数の時、、、
returnで値を返す関数は、引数に使う時()をつけて
関数を引数に渡すだけは、()をつけない
let i = 0;
function showTime() {
　console.log(new Date());
　i++;
　if(i > 2){ 　//3秒経ったらタイマーを止める
　clearInterval(intervalId);
　}
}
　//setInterval(showTime, 1000); //showTimeを1000ミリ秒感覚で繰り返し実行する
const intervalId = setInterval(showTime, 1000);

function showTime() {
  console.log(new Date());
}
const timeOutId = setTimeout(showTime, 1000);  //1000ミリ秒後に一度だけ実行
※繰り返しにするには、showtime()ないでsetTimeoutを実行し、showTime()を呼び出すことで、
繰り返しになる
止める方法は上のタイマーと同じ(clearTimeout)

setIntervalとsetTimeoutの違いは、
setIntervalは設定したミリ秒後に常に実行される
setTimeoutは設定したミリ秒後に実行され、実行後また実行される

const name = 'name';
console.log(name.toUpperCase()); //文字列を大文字にする関数
もしnameに文字以外が入ると例外..そんな時は...
try {
console.log(name.toUpperCase());
} catch(e) {
console.log(e); //例外が出たときの処理
}

配列内での、キー：関数（メソッド）
show: function () {
console.log(`${this.text} - ${this.likeCount}いいね`),
}
は、
show() {
console.log(`${this.text} - ${this.likeCount}いいね`);
},
と同じ

クラス

class クラス名(クラス名の先頭は大文字)　{
  constructor(引数){
  //中身は全てにthisを使う　
  // 値の違うところを引数に設定
  //キーと値を繋ぐところは  =  に変え、文末も  ;  にする
  }
  like(){  //こういうカウントのメソッドもクラスに書く方がいい
    this.likeCount++;
    this.show();
  }
  //静的メソッド、、
    インスタンスから呼び出すのではなく直接クラスから呼び出すメソッド
  // インスタンスを作らず呼び出すからthisは使えない
static showInfo() {
  console.log('Post class version 1.0');
}  //クラス名.showInfo(); で呼び出す
}  //これはクラスの閉じタグ

インスタンスの生成
new クラス名('constructorに渡す引数の値')

クラスの継承
class 新しい子クラス名  extends  引き継ぐ親クラス名 {}

//子クラスの constructorでthisを使うには
constructor内の最初で、
super( constructorに渡して使っている引数名);
一部変更のあるメソッドを使う時は、そのメソッドの最初で
super.メソッド名();
変更
そのままのメソッドは何もしない