Part 5 JavaScript – 目前日期與月曆日期的更新
從現在開始，我們要開始導入JavaScript，JavaScript在整個網頁前端所負責的功能是用來對網頁的內容(HTML)與格式(CSS)進行動態的處理，是整個前端網頁程式設計的核心角色，務必要學好。
先備知識：
練習：把月曆App程式裏面的年月日找出來，用Date類別裏的方法換成實際的年月日資料。
0215 早上
- 控制敘述(if/if..else…, switch)
- document.getElementById()方法
- InnerHTML屬性
- 函式：function、function call、return
- 參考檔案：Programming in JavaScript
<script language="JavaScript">
document.getElementById("cur-date").innerHTML = new Date().getDate();
</script>
Date類別方法(這裏我們要用到的)
| getDate() | Returns the day of the month (from 1-31) |
| getDay() | Returns the day of the week (from 0-6) |
| getFullYear() | Returns the year |
| getMonth() | Returns the month (from 0-11) |
0215 早上
- review之前做過的練習
- JavaScript
- 寫在那裏？
- 輸出型態/何處
- 敘述、語法、關鍵字與註解
- 變數、資料型態、指定敘述、操作子、運算式等
- 數字與字串
- 陣列、陣列方法、陣列排序、元素走訪
- 程式流的控制、迴圈、switch、break/continue
- 函式
- 事件(events)、物件(objects)
- …
- 在 Chrome DevTools 中調試 JavaScript 入門 (除錯方法)
將月曆App導入動態程式設計
將月曆Web應用程式中的年/year、月/month、日/date、日週名/weekday，以Date類別提供的方法取得真實的實料，並將月、日、日週名轉換成適當的格式。
| 函式名稱 | 函式功能 |
| updateCurrentDates | 更新目前日期資料 |
| updateCalendarDates | 更新月曆中的日期資料 |
| addOrdinalIndicator | 將日期以序數方式呈現，即1st, 2nd, 3rd, 4th…. |
| translateToWeekdayName | 週日期表示方式 |
| translateToMonthName | 月名稱表示法方式 |
<script>
// 使用if來取得週天的名稱
// function getWeekdayName(weekday){
// var weekdayName;
// if (weekday === 0 ) weekdayName = "Sunday";
// if (weekday === 1 ) weekdayName = "Monday";
// if (weekday === 2 ) weekdayName = "Tuesday";
// if (weekday === 3 ) weekdayName = "Wednesay";
// if (weekday === 4 ) weekdayName = "Thursday";
// if (weekday === 5 ) weekdayName = "Friday";
// if (weekday === 6 ) weekdayName = "Saturay";
// return weekdayName;
// }
// 使用陣列來取得週天的名稱
function getWeekdayName(weekday){
var weekdayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
return weekdayNames[weekday];
}
function getMonthName(month){
switch (month) {
case 0: return "January";
case 1: return "February";
case 2: return "March";
case 3: return "April";
case 4: return "May";
case 5: return "June";
case 6: return "July";
case 7: return "August";
case 8: return "September";
case 9: return "October";
case 10: return "November";
case 11: return "December";
}
}
function addDateOrdinal(date) { //加上日期序數
switch (date) {
case 1:
case 21:
case 31: return date + "<sup>st</sup>";
case 2:
case 22: return date + "<sup>nd</sup>";
case 3:
case 23: return date + "<sup>rd</sup>";
default: return date + "<sup>th</sup>";
}
}
function updateDates(){
var today = new Date(); //新增一個Date物件，命名為today
document.getElementById("cur-year").innerHTML = today.getFullYear();
document.getElementById("back-year").innerHTML = today.getFullYear();
document.getElementById("cal-year").innerHTML = today.getFullYear();
document.getElementById("cur-month").innerHTML = getMonthName( today.getMonth() );
document.getElementById("cal-month").innerHTML = getMonthName( today.getMonth() );
document.getElementById("cur-date").innerHTML = addDateOrdinal( today.getDate() );
document.getElementById("cur-day").innerHTML = getWeekdayName(today.getDay());
}
updateDates();
</script>
目前階段的程式連結
練習1：以陣列方式重寫週日期與月名稱的轉換 (製作轉換表格)。
<script type="text/javascript">
function getWeekDayName(day){
var weekDayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
return weekDayNames[day];
}
let today = new Date();
document.getElementById("cur-day").innerHTML = getWeekDayName( today.getDay() );
</script>
練習2：將上面的程式整理至js/updateDate.js，並製作使用連結。
<head> (略) <script type="text/javascript" src="js/updateDates.js"></script> </head>