今回はjavascriptの使い方を復習するために、簡単な計算ツールを作成しました。
具体的には、マラソンのペースの計算しきです。
今回学べる事は6つぐらいで、Javascript初心者向けの記事になります。
11/10（一回目）
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>marathon</title>
</head>
<style>
.f30 {
font-size: 30px;
}
.red {
font-size: 40px;
font-style: italic;
color: red;
text-align: center;
}
</style>
<body>
<select class="time1a f30"> <!-- 1 -->
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
時間
<select class="time2a f30">
<option>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select>
分
<button id="calc_time" class="f30">計算</button>
<div class="time3a f30">10分→</div>
<div class="time4a red">""</div>
<div class="time3a f30">1km→</div>
<div class="time5a red">""</div>
<div class="time3a f30">10km→</div>
<div class="time6a red">""</div>
</body>
<script>
let time4a = document.querySelector('.time4a') // ・・・2
let time5a = document.querySelector('.time5a')
let time6a = document.querySelector('.time6a')
let calc = document.querySelector('#calc_time') //・・・3
calc.addEventListener("click",() => { //・・・4
time1a = document.querySelector('.time1a').value
time2a = document.querySelector('.time2a').value
time1b = time1a * 3600 + time2a * 60 //１時間１分を3660秒にする計算
time1c = 42.195 / time1b * 600 // 42㎞の秒側に600秒（10分）をかけた値
time1d = time1b * 1 / 42.195 // 目標タイムの秒数÷42で (秒/km)
console.log(time1c)
console.log(time1d)
time4a.innerHTML = Math.floor(time1c * 10) / 10 + "km" //・・・5
time5a.innerHTML = Math.floor(time1d/60) + "分" + Math.floor(time1d % 60 ) + "秒" //・・・6,7
time6a.innerHTML = Math.floor(time1d/6) + "分"
})
</script>
</html>
1 selectタグについて
これはHTMLのみで実現できるドロップダウンリストです。そのままコピペです。
classも付与したら文字が大きくなって便利でした。
https://www.javadrive.jp/javascript/form/index5.html
こちらの記事を参考にしました。
2 document.querySelector（#---）
Document.getElementById()の代用 簡単に言うと「任意の要素を呼び出すことができます」
3 document.querySelector（.---）
Document.getElementsByClassName()の代用 詳しく言うと「任意のHTMLタグで指定したクラスにマッチするドキュメント要素を取得するメソッド」
https://www.sejuku.net/blog/27019
4 addEventListener("click",() =>｛｝）
ボタンをクリックしたときに以下の関数やメソッドを実行するもの。
速度の計算とドロップダウンの数値の取得などが行われています。
5 innerHTML
HTML要素の中身を変更するときに使われるプロパティ
JavaScriptでの処理の結果を画面に表示するときに、HTMLのタグも含めて書き換えることができる。
6 Math.floor
Math.floor は対象の値の小数点以下を切り捨てます。
const num = 12.2627;
小数第二位以下を切り捨て
(Math.floor(num * 10)) / 10)
12.2
Math.floorだけだと12に整数になるので、126にしてから10でわると12.2になる
まとめ
「電卓アプリ作成」で検索してヒットした記事を参考に作成しました。
こちらのサイトです。
https://nyanblog2222.com/programming/javascript/4496/
参考サイトは後程url記載します。