##11/12~11/14に勉強したこと
###コールバック関数
引数に渡される関数のことをコールバック関数という。
【例】
const petDog=()=>{
console.log("ココちゃん");
};
const call=(callback)=>{
console.log("コールバック関数を呼び出します");
callback();
};
//コールバック関数を呼び出すときは「();」が必要。
call(petDog);
//コールバック関数を渡すときは「()」は付けない!
【出力】
コールバック関数を呼び出します。
ココちゃん
###直接、引数の中で関数を定義する場合
【例】
const call=(callback)=>{
console.log("コールバック関数を呼び出します");
callback();
};
call(()=>{
console.log("ココちゃん");
});
【出力】
ココちゃん
###JSのES5
jQueryに入る前に、ES6だけでなく元々使用されていたES5も学習
しておこうと思い、一巡した。
- 変数がletでなくvarで書かれていた。
- {name:"犬",color:"brown"};と表現していた分は、オブジェクトではなく
【連想配列】と呼ばれており表記についてもnameの部分にも[""]が付いていた。
- 上記をの名前のみを出力させる場合、ES6では【console.log(animal.name);】のみ
学習していたが、ES5では【console.log(animal["name"]);】とも書けるということを学習した。
###JSの復習において、学んだ点。
####BMIを求める記述
下記のような、BMIを求める例題でBMIを求める式を
コンソールの中でしてしまったので、気を付ける。
後にBMIの数値を使う際に面倒になるので、まず定義してから使用する。
【私の書いた例】⇒ここでは18.5未満:痩せ気味/25未満:普通/それ以上:肥満
var height = 1.7;
var weight = 60;
console.log("BMIは"+ weight/height/height +"です");
var bmi=20.761245674740486;
if(bmi<18.5){
console.log("痩せ気味です");
}else if(bmi>=18.5 && bmi<25){
console.log("普通です");
}else{
console.log("肥満気味です");
}
※こうしてしまうと、BMIの数値を手打ちしなければならなくなり、手間・時間がかかった。
【先に数値を定義してから書いた例】
var height = 1.7;
var weight = 60;
var bmi = weight / height / height;
console.log("BMIは" + bmi + "です");
if (bmi < 18.5) {
console.log("痩せ気味です");
} else if (bmi < 25) {
console.log("普通です");
} else {
console.log("肥満気味です");
}
※先にBMIの数値を出しておくことによって、「変数bmi」として他で書くときも
使えるので、まず数値を出しておくことを癖づける。
####FizzBuzz
1から100まで繰り返し出力する中で、「3で割り切れる際はFizz」
「5で割り切れる際はBuzz」「3でも5でも割り切れる際はFizzBuzz」
「それ以外の時は数字」を出力という問題。
for(var i = 0 ; i <= 100 ; i ++){
if(i % 3 ===0 && i % 5 ===0){
console.log("FizzBuzz");
}else if(i % 5 ===0){
console.log("Buzz");
}else if(i % 3 ===0){
console.log("Fizz");
}else{
console.log(i);
}
}
※はじめに書いた際に、一番初めの条件式に(i % 3 ===0)と書いてしまったので
うまく出力ができなかった。「3かつ5で割り切れる」という一番
条件として細かいものを一番はじめに持ってくる。
####平均点
スコアがずらっと並べられており、その平均点を出す記述。
まず、全スコアの合計を繰り返しを使用して出力。
そのあと 合計 / スコア項目数で割り出す。
var scores=[88, 62, 65, 21, 47, 92, 57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];
var sum = 0;
for(var i = 0 ; i <scores.length ; i++){
sum += scores[i];
// ↑ 0に繰り返しスコアの項目を追加していく。(sum= sum + scores[i];)
}
var average= sum / scores.length;
console.log(`平均点は${average}点です。`);
####最高点
先ほどの章で求めた平均点を求めた後、最高点を出す方法。
var scores = [88, 62, 65, 21, 47, 92, 57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];
// この下にコードを書いてください
var bestScore = 0;
var sum = 0;
for(var i = 0 ; i <scores.length ; i++){
sum += scores[i];
if(scores[i]>bestScore){
bestScore=scores[i];
//↑次々スコアを代入していくイメージ!
}
}
var average= sum / scores.length;
console.log(`平均点は${average}点です`);
console.log(`最高点は${bestScore}点です`);
【気を付けること】
bestScore = scores[i];の代入部分が慣れない表記なのでしっかり覚える。
####情報を順に出力
連想配列の情報を順に出力していく書き方。
var users = [
{
name: '太郎',
age: 21,
nationality: '日本',
},
{
name: 'リリー',
age: 37,
nationality: 'イギリス',
},
{
name: 'ジョン',
age: 16,
nationality: 'アメリカ',
},
];
// この下にコードを書いてください
for(var i =0;i<users.length;i++){
var number=i+1;
console.log(`${number}人目`);
console.log(`名前:${users[i].name}`);
console.log(`年齢:${users[i].age}`);
console.log(`国籍:${users[i].nationality}`);
}
【出力】
1人目
名前:太郎
年齢:21
国籍:日本
2人目...という風に順に表示ができる。
【気を付ける】
numberの表示は「i」だけにしてしまうと「0人目」の表記から始まるので気を付ける。
##振り返り
実際練習問題で応用として考えると、少しずつ考えていかないとまだ
わからなかったり、bestScoreの最高点の書き方に関しては「代入!」という
イメージをしっかりできていなかった(=をイコールと捉えると頭がこんがらがる!)
ある程度型になっているものがあるので、そこはしっかり慣れていく。