本日小作品:
https://codepen.io/linchinhsuan/pen/rNeRJpJ
var data = [.......]
這是高雄市政府的open data
來源:
https://data.kcg.gov.tw/dataset/lightrail-trafficvolume
var len = data.length;
var day = 0;
for(var i=0; i<len; i++){
day += data[i].日均運量;
}
用.length
將資料長度賦值到變數len上,然後宣告一個變數day=0。
之後用for迴圈,這裡先宣告i=0,當i小於len的時候會跑裡面的程式碼,翻譯成白話文就是迴圈會跑陣列長度的次數。
例如有3筆資料就跑3次。a = a + b
也可以寫成 a += b
所以 day += data[i].日均運量;
意思是每次跑迴圈時將日均運量加到day這個變數上,最終跑完迴圈會得到日均運量資料的總和。
// 每月的日均運量平均值
var average = day/len;
document.getElementById("dayAvg").textContent = average;
將上面得到的day除以len就得到每月的日均運量平均值(有點拗口),然後透過.textContent
將內容寫到html上。最終我們就得到了
例如,每月的日均運量平均值為8385.1875人
這一段。
var str = '';
for(var i=0;i<len;i++){
if(data[i].日均運量 > average*1.5){
str += "民國" + data[i].年 + "年" + data[i].月 + "月 ";
}
}
document.getElementById("mons").textContent = str;
透過if判斷式,當當月的日均運量大於平均數的1.5倍時,執行{}內的程式碼。data[i].年和data[i].月
都是從json資料中取值。最後組合成字串,並且累加到變數str上,最後一樣用.textContent
將內容寫到html上。
到此我們就得到了
民國107年2月 民國107年12月 民國108年2月
這段。
---
本日結語:
今天是十四天,開始寫js之後一直思考如何把每日練習的for迴圈呀if判斷式具象化的變成小作品,這真不是件容易的事情。