2020年9月19日(土)やれたことリスト

コーディング(JavaScript)

//計算機作成

const buttonAdd = document.getElementById('button-add');
const buttonSub = document.getElementById('button-sub');
const buttonMul = document.getElementById('button-mul');
const buttonDiv = document.getElementById('button-div');
const box = document.getElementById('box');
const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');

//num1に入力された数値を受け取る
const getNum1 = () => {
 return Number.parseFloat(num1.value);
};

//num2に入力された数値を受け取る
const getNum2 = () => {
 return Number.parseFloat(num2.value);
};

const showResult = (num) => {
 // 結果を<div id="box">内に表示するOK
 box.textContent = num;
};

//関数
//足し算の関数
(buttonAdd).addEventListener('click', () => {
 const result = getNum1() + getNum2();
 showResult(result);}
);

//引き算の関数
(buttonSub).addEventListener('click', () => {
 const result = getNum1() - getNum2();
 showResult(result);}
);

//掛け算の関数
(buttonMul).addEventListener('click', () => {
 const result = getNum1() * getNum2();
 showResult(result);}
);

//割り算の関数
(buttonDiv).addEventListener('click', () => {
 const result = getNum1() / getNum2();
 showResult(result);}
);

だいぶ前にJavaScriptでコーディングした計算機。
これをコールバック関数で書き直せないかと思い立った。
仕組みの理解だけではなく、自ら考えてコードを書けて初めて理解した、といえるはずだから。

// まずは擬似コードから

// 関数を実行する関数を作る（高階関数）
// 関数の中で処理される関数を作る（コールバック関数）
    // 足し算、引き算、掛け算、割り算(とりあえず一個完成させる)
// 計算結果をブラウザへ表示させる

擬似コードでまずはやりたいことをまとめる。

高階関数と、コールバック関数を1つずつ書ければあとはスムーズに行けるはず。
高階関数の理解がまだ怪しいのでそこも含めておさらいですね…。

JavaScriptのコーディング以外はゲームやったり買い物したりで過ごした。

まこと