綜合大練習

任務目的

結合前兩個任務所掌握的HTML、CSS、JavaScript知識，實現一個中等復雜度的Web網站實現

任務時間

• 初級班：10天
• 中級班：10天

JavaScript深度學習

任務描述

深度學習JavaScript，仔細掌握作用域、原型、閉包等概念，掌握一些基本的設計模式，為后續的大作業打下基礎。

完成以下內容的學習筆記撰寫，推薦發到自己的博客或Github上。

• JavaScript作用域學習筆記
• JavaScript原型學習筆記
• JavaScript閉包學習筆記
• JavaScript構造函數學習筆記
• JavaScript面向對象編程學習筆記
• JavaScript設計模式學習筆記

參考資料

• 鳥哥：Javascript作用域原理
• 理解 JavaScript 作用域和作用域鏈
• 強大的原型和原型鏈
• js原型鏈原理看圖說明
• 理解JavaScript原型
• 深入理解javascript原型和閉包
• 學習Javascript閉包
• javascript的閉包
• JavaScript 閉包深入理解
• 理解 Javascript 的閉包
• Javascript 面向對象編程
• JavaScript繼承詳解
• JavaScript繼承方式詳解
• JavaScript探秘：構造函數 Constructor
• 理解Javascript constructor實現原理
• Javascript中this關鍵字詳解
• Javascript的this用法
• 深入淺出 JavaScript 中的 this
• JavaScript The Core
• Eloquent JavaScript
• JavaScript Garden
• JavaScript設計模式深入分析
• 常用的Javascript設計模式
• Learning JavaScript Design Patterns
• LS的中文版：學用 JavaScript 設計模式

綜合練習

任務描述

參考設計稿實現一個簡單的個人任務管理系統：如下圖

設計稿

任務需求描述：

• 最左側為任務分類列表，支持查看所有任務或者查看某個分類下的所有任務
  • 初始時有一個默認分類，進入頁面時默認選中默認分類。
  • 分類支持多層級別。
  • 分類支持增加分類、刪除分類兩個操作
    • 在左側分類最下方有添加操作，點擊后彈出浮層讓輸入新分類的名稱，新分類將會被添加到當前選中的分類下。浮層可以為自行設計實現，也可以直接使用prompt。
    • 當鼠標hover過某一個分類時，右側會出現刪除按鈕，點擊后，彈出確認是否刪除的浮層，確認后刪除掉該分類。彈出的確認浮層可以自行設計實現，也可以直接使用confirm。
    • 不能為默認分類添加子分類，也不能刪除默認分類。
  • 每一個分類名字后顯示一個當前分類下的未完成任務總數量。
• 中間列為任務列表，用于顯示當前選中分類下的所有未完成任務
  • 任務列表按日期（升序或者降序，自行設定）進行聚類
  • 用不同的字體顏色或者圖標來標示任務的狀態，任務狀態有兩張：已完成或未完成。
  • 下方顯示新增任務的按鈕，點擊后，右側列會變成新增任務編輯界面。
  • 單擊某個任務后，會在右側顯示該任務的詳細信息。
  • 在任務列表的上方有任務篩選項，可以選擇在任務列表中顯示所有任務，或者只顯示已完成或者未完成的任務。
• 右側為任務詳細描述部分
  • 第一行顯示任務標題，對于未完成的任務，在標題行的右側會有完成任務的操作按鈕及編輯任務的按鈕。
  • 點擊完成任務按鈕時，彈出確認是否確認完成的浮層，確認后該任務完成，更新中間列任務的狀態。彈出的確認浮層可以自行設計實現，也可以直接使用confirm。
  • 點擊編輯任務操作后，右側變更為編輯窗口。
• 新增及編輯任務窗口描述
  • 有3個輸入框：分別是標題輸入框，完成日期輸入框及內容輸入框
  • 標題輸入框：輸入標題，為單行，需要自行設定一個標題輸入限制的規則（如字數），并給出良好提示。
  • 日期輸入框：單行輸入框，按照要求格式輸入日期，如yyyy-mm-dd
  • 內容輸入框：多行輸入框，自行設定一個內容輸入的限制（如字數），并給出良好提示。
  • 確認按鈕：確認新增或修改。
  • 取消按鈕：取消新增或修改。

任務實現要求：

• 整個界面的高度和寬度始終保持和瀏覽器窗口大小一致。當窗口變化高寬時，界面中的內容自適應變化。
• 左側列表和中間列表保持一個固定寬度（自行設定），右側自適應。
• 需要自行設定一個最小寬度和最小高度，當瀏覽器窗口小于最小值時，界面內容的高度和寬度不再跟隨變化，允許瀏覽器出現滾動條。
• 通過本地存儲來作為任務數據的保存方式。
• 不使用任何類庫及框架。
• 盡可能符合代碼規范的要求。
• 瀏覽器兼容性要求：Chrome、IE8+。

注意

該設計稿僅為線框原型示意圖，所有的視覺設計不需要嚴格按照示意圖。如果有設計能力的同學，歡迎實現得更加美觀，如果沒有，也可以按照線框圖實現。以下內容可以自行發揮：

• 背景顏色
• 字體大小、顏色、行高
• 線框粗細、顏色
• 圖標、圖片
• 高寬、內外邊距