JavaScript Basics_Fundamentals Part 2_A simple calendar

• 下方的日曆框架是從 Active learning: A simple calendar 上整過來的。

• 主要任務是用 if...else 語句來讓日曆本顯示出每月相對應的天數，相關代碼已經給出，我們只需要補充 // ADD CONDITIONAL HERE 下欠缺的代碼即可。

• 點擊上方的「Reset」按鈕可以重置代碼，點擊「Show solution」按鈕可以顯示答案，然後我們點擊日曆上邊的「Select month」來選擇月份，可以看到日曆上對應的月份的天數發生了變化。

• 現在對所給 solution 做些修改，判斷今年是閏年還是平年，設置對應的二月份的天數。

var select = document.querySelector('select');
var list = document.querySelector('ul');
var h1 = document.querySelector('h1');

select.onchange = function() {
    var choice = select.value;
    let days = 31;
    let myDate = new Date();               // 創建 Date 對象
    let year = myDate.getFullYear();    // 獲取當前年份
    // ADD CONDITIONAL HERE
    // 閏年
    if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
        if(choice === 'February') {
            days = 29;
        }
        else if(choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {
            days = 30;
        }
    }
    // 平年
    else {
        if(choice == 'February') {
            days = 28;
        }
        else if(choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {
            days = 30;
        }
    }
  
    createCalendar(days, choice);
  }

  function createCalendar(days, choice) {
    list.innerHTML = '';
    h1.textContent = choice;
    for(var i = 1; i <= days; i++) {
    var listItem = document.createElement('li');
    listItem.textContent = i;
    list.appendChild(listItem);
    }
    }
   
   createCalendar(31,'January');

• 先假定天數都為 31，經過 if 語句後，閏年二月份為 29 天，平年二月份為 28 天，四、六、九、十一月份為 30 天，則其餘天數保持不變，為 31 天。

• ===：稱為等同符，當兩邊值的類型相同時，直接比較值；若類型不相同，直接返回 false。

• ==：稱為等值符，當等號兩邊的類型相同時，直接比較值是否相等；若不相同，則先轉化為類型相同的值，再進行比較。