![見出し画像](https://assets.st-note.com/production/uploads/images/35003089/rectangle_large_type_2_4be3c61a377c09668d2a720c6932f51f.png?width=1200)
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のコーディング以外はゲームやったり買い物したりで過ごした。
まこと
この記事が気に入ったらサポートをしてみませんか?