3-1 先行整理月曆程式碼
上週的月曆程式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/current_day.css">
<link rel="stylesheet" href="css/calendar.css">
<link rel="icon" href="images/icon1.png" type="image/png" sizes="72×72"/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<title>u1085100 Calendar</title>
</head>
<style media="screen">
</style>
<body>
<h3 class="background-text off-color">2020</h3>
<h4 class="background-text off-color">Calendar</h4>
<div id="current-day-info" class="color">
<h1 id="app-name-landscape" class="off-color default-cursor center">U1085100 陳富國</h1>
<div>
<h2 id="cur-year" class="current-day-heading dfault-cusor center">2020</h2>
</div>
<div class="">
<h1 id="cur-day" class="current-day-heading default-cusor center">Tuesday</h1>
<h1 id="cur-month" class="current-day-heading default-cusor center">May</h1>
<h1 id="cur-date" class="current-day-heading dfault-cusor center">5<sup>th</sup></h1>
</div>
<div class="">
<button type="button" name="button" id="theme-landscape" class="font button">背景色彩</button>
</div>
</div>
<div id="calendar">
<h1 id="app-name-portrait" class="center off-color">U1085100 陳富國</h1>
<table>
<thead class="color">
<tr>
<th colspan="7" class="border-color">
<h4 id="cal-year">2020</h4>
<div >
<i class="fas fa-caret-left icon"></i>
<h3 id="cal-month">May</h3>
<i class="fas fa-caret-right icon"></i>
</div>
</th>
</tr>
<tr>
<th class="weekday border-color">Sun</th>
<th class="weekday border-color">Mon</th>
<th class="weekday border-color">Tue</th>
<th class="weekday border-color">Wed</th>
<th class="weekday border-color">Thu</th>
<th class="weekday border-color">Fri</th>
<th class="weekday border-color">Sat</th>
</tr>
</thead>
<tbody id="table-body" class="border-color">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td id="current-day">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td class="tooltip">
1
<img src="images/note1.png" alt="">
<span>這是提示！！！</span>
</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
<button id="theme-portrait" class="font button color">背景色彩</button>
</div>
<script type="text/javascript">
function getWeekdayName(day) {
if (day == 0) return "Sunday";
if (day == 1) return "Monday";
if (day == 2) return "Tuesday";
if (day == 3) return "Wednesday";
if (day == 4) return "Thursday";
if (day == 5) return "Friday";
if (day == 6) return "Saturday";
}
function getMonthName(month) {
console.log(month);
if (month == 0) return "January";
if (month == 1) return "February";
if (month == 2) return "March";
if (month == 3) return "April";
if (month == 4) return "May";
if (month == 5) return "June";
if (month == 6) return "July";
if (month == 7) return "August";
if (month == 8) return "September";
if (month == 9) return "October";
if (month == 10) return "November";
if (month == 11) return "December";
}
function getOrdinaryString(date) {
if (date == 1 || date == 21 || date == 31) return date + "<sup>st</sup>";
if (date == 2 || date == 22) return date + "<sup>nd</sup>";
if (date == 3 || date == 31) return date + "<sup>rd</sup>";
return date + "<sup>th</sup>";
}
var today = new Date();
document.getElementById("cur-date").innerHTML = getOrdinaryString ( today.getDate() );
document.getElementById("cur-day").innerHTML = getWeekdayName ( today.getDay() );
document.getElementById("cur-month").innerHTML = getMonthName ( today.getMonth() );
document.getElementById("cur-year").innerHTML = today.getFullYear();
document.getElementById("cal-year").innerHTML = today.getFullYear();
document.getElementById("cal-month").innerHTML = getMonthName ( today.getMonth() );
</script>
</body>
</html>
開始這禮拜的進度之前，我們先將寫好的js程式整理至updateData.js (名字不需要一樣，但是一旦你用了自己的命名，後面要注意，命字的一致性。)
作法：
- 建立一個js目錄 (我們之前還沒有這個目錄)
- 在js目錄裏建立一個新檔，命名為updateData.js
- 將原本在index.html中<script></script>區塊中的程式碼剪下貼上到updateData.js(注意<script>標籤不要貼過去，也就是說js檔裏沒有HTML標籤。)
- 然後底下幾行，包裝成一個函式 updateCurrentDateInfoData()
- 在index.html中加入<script src=”updateData.js”>含入這個js檔。
document.getElementById("cur-date").innerHTML = getOrdinaryString ( today.getDate() );
document.getElementById("cur-day").innerHTML = getWeekdayName ( today.getDay() );
document.getElementById("cur-month").innerHTML = getMonthName ( today.getMonth() );
document.getElementById("cur-year").innerHTML = today.getFullYear();
document.getElementById("cal-year").innerHTML = today.getFullYear();
document.getElementById("cal-month").innerHTML = getMonthName ( today.getMonth() );
updateData.js
function getWeekdayName(day) {
if (day == 0) return "Sunday";
if (day == 1) return "Monday";
if (day == 2) return "Tuesday";
if (day == 3) return "Wednesday";
if (day == 4) return "Thursday";
if (day == 5) return "Friday";
if (day == 6) return "Saturday";
}
function getMonthName(month) {
console.log(month);
if (month == 0) return "January";
if (month == 1) return "February";
if (month == 2) return "March";
if (month == 3) return "April";
if (month == 4) return "May";
if (month == 5) return "June";
if (month == 6) return "July";
if (month == 7) return "August";
if (month == 8) return "September";
if (month == 9) return "October";
if (month == 10) return "November";
if (month == 11) return "December";
}
function getOrdinaryString(date) {
if (date == 1 || date == 21 || date == 31) return date + "<sup>st</sup>";
if (date == 2 || date == 22) return date + "<sup>nd</sup>";
if (date == 3 || date == 31) return date + "<sup>rd</sup>";
return date + "<sup>th</sup>";
}
function updateCurrentDateInfoData(){
document.getElementById("cur-date").innerHTML = getOrdinaryString ( today.getDate() );
document.getElementById("cur-day").innerHTML = getWeekdayName ( today.getDay() );
document.getElementById("cur-month").innerHTML = getMonthName ( today.getMonth() );
document.getElementById("cur-year").innerHTML = today.getFullYear();
document.getElementById("cal-year").innerHTML = today.getFullYear();
document.getElementById("cal-month").innerHTML = getMonthName ( today.getMonth() );
}
index.html的script片段 (不是所有的index.html碼)
<script src="js/updateData.js" charset="utf-8"></script>
<script type="text/javascript">
var today = new Date();
updateCurrentDateInfoData();
</script>
整理好之後，測試月曆網頁程式是否正常。
這個步驟，我們將index.html中寫好的js程式碼移動到獨立的個別檔案中，這是管理整個系統的一個方式，當程式碼數量增多，必須要妥善地管理這些程式碼，建立適當的目錄、檔案，甚至是多層的子目錄，如此一來，你的系統程式碼具有良好的結構，這對以後系統的維護會有很大幫助。