# IEH 程式隊 Workshop007 - 基礎程式4 ## 線上網頁程式編輯器 (可使用10 Minute Email註冊: https://10minutemail.net/) https://jsfiddle.net/ ## 基礎網頁程式教學資源 https://www.w3schools.com/ ## Developer 工具 popcat JS練習 ``` javascript:(function() { var event = new KeyboardEvent('keydown', { key: 'g' }); setInterval(function(){ for (i = 0; i < 100; i++) { document.dispatchEvent(event); } }, 1000); })(); ``` ## 變數 -> 資料結構 ### Variable 變數 `const today = "Saturday";` ### Array 陣列 `const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; ` ### JSON https://tw.alphacamp.co/blog/json ``` { "daysOfWeek": [ { "index": 1, "short": "Mon", "full": "Monday" }, { "index": 2, "short": "Tue", "full": "Tuesday" }, { "index": 3, "short": "Wed", "full": "Wednesday" }, { "index": 4, "short": "Thu", "full": "Thursday" }, { "index": 5, "short": "Fri", "full": "Friday" }, { "index": 6, "short": "Sat", "full": "Saturday" }, { "index": 7, "short": "Sun", "full": "Sunday" } ] } ``` ## 資料結構:日期練習 請建立一個日期的JSON資料結構,最終呈現如下資料 提示:此練習會使用到 迴圈 以及 if-else 技巧 ``` Monday (Mon) is a Weekday. Tuesday (Tue) is a Weekday. Wednesday (Wed) is a Weekday. Thursday (Thu) is a Weekday. Friday (Fri) is a Weekday. Saturday (Sat) is a Weekend. Sunday (Sun) is a Weekend. ``` ``` const weekData = { daysOfWeek: [ { index: 1, short: "Mon", full: "Monday" }, { index: 2, short: "Tue", full: "Tuesday" }, { index: 3, short: "Wed", full: "Wednesday" }, { index: 4, short: "Thu", full: "Thursday" }, { index: 5, short: "Fri", full: "Friday" }, { index: 6, short: "Sat", full: "Saturday" }, { index: 7, short: "Sun", full: "Sunday" } ] }; // Example usage: log each day with label "Weekday" or "Weekend" weekData.daysOfWeek.forEach(day => { const type = (day.short === 'Sat' || day.short === 'Sun') ? 'Weekend' : 'Weekday'; console.log(`${day.full} (${day.short}) is a ${type}.`); }); ``` ### BMI計算機練習 * 使用HTML/CSS建構一個計算機外觀模板 * 使用JS建構一個計算機 條件: * BMI=體重(公斤)÷身高(公尺)÷身高(公尺) * 當BMI≧24為過重,≧27是輕度肥胖,>30是中度肥胖,在35以上就屬重度肥胖