課程內(nèi)容
本教程完整再現(xiàn)了使用HTML、jQuery和EasyUI設(shè)計(jì)實(shí)現(xiàn)房貸計(jì)算的全流程，并給出了教程涉及知識(shí)點(diǎn)的詳細(xì)參考資料和演示demo，供初學(xué)者形成完整的學(xué)習(xí)路徑。
目標(biāo)人群
教程難度簡單，屬于HTML、jQuery和EasyUI開發(fā)的基礎(chǔ)課程。對于剛開始學(xué)習(xí)前端編程的新手，本教程是一個(gè)很好的項(xiàng)目練手，有助于形成完整的學(xué)習(xí)路徑和知識(shí)體系；對于想學(xué)習(xí)jQueryEasyUI的讀者，教程第三部分提供了詳細(xì)的入門指導(dǎo)。
最終效果展示
為什么要編寫這樣一篇教程、這是一篇什么樣的教程
用剛?cè)腴T的編程語言來實(shí)現(xiàn)一個(gè)功能總是會(huì)感覺困難重重，尤其是新手，經(jīng)常會(huì)被各種小問題卡住，卻不知所措。
正確編寫并運(yùn)行一段程序需要一些先修知識(shí)，如果讀者不了解這些先修知識(shí)，就會(huì)大大增加學(xué)習(xí)的難度。本教程并沒有假設(shè)讀者知道那些應(yīng)該知道的東西，就像讀者什么都懂一樣，一上來就開始講解代碼；本教程也不是給出泛泛的先修建議，比如掌握了HTML和jQuery就能夠讀懂這篇教程，因?yàn)榻滩闹械拇a只用到了一部分HTML和jQuery的內(nèi)容，在學(xué)習(xí)完大部頭的巨著,精通了這些知識(shí)之前，完全讀者就可以學(xué)習(xí)這篇教程。與前兩種情況不同的是，本教程會(huì)把每段代碼的先修知識(shí)予以明確說明，不多也不少，就是那些先修知識(shí)。讀者需要檢查自己對先修知識(shí)的了解程度，查漏補(bǔ)缺，如果已經(jīng)掌握，便可以順利理解后續(xù)的代碼；如果沒有掌握，可以按照教程中給出的建議快速入門。
編寫程序是一個(gè)從0到1的過程，直接給出代碼，寫好注釋對于新手學(xué)習(xí)來說依舊難度過大。本教程會(huì)重現(xiàn)編碼過程，展現(xiàn)編程中遇到的問題，以及如何回答這些問題，將編程的體驗(yàn)以及思考過程融入教程之中，從而完整展現(xiàn)從0，到0.1再到0.2......一直到1的的整個(gè)編程過程。
編寫一個(gè)大程序的有效方法是控制復(fù)雜度，將大問題分解為幾個(gè)小問題，再分析每個(gè)小問題包含哪幾個(gè)方面，進(jìn)而形成一個(gè)完整的知識(shí)體系。本教程采取了同樣的講授思路，將用EasyUI實(shí)現(xiàn)房貸計(jì)算器分為了三個(gè)不同層次的問題：
- 用HTML實(shí)現(xiàn)前端的內(nèi)容展現(xiàn)。房貸計(jì)算器需要用戶選擇貸款類型，輸入貸款金額，計(jì)算每月還款額等等內(nèi)容，這一部分只包含HTML代碼，思考一個(gè)房貸計(jì)算器在內(nèi)容上包含哪些部分，應(yīng)該用哪些HTML的標(biāo)簽來實(shí)現(xiàn)這些內(nèi)容。
- 用jQuery實(shí)現(xiàn)前端與用戶的交互。當(dāng)用戶選擇貸款類型時(shí)，貸款利率也隨之改變，當(dāng)用戶點(diǎn)擊計(jì)算時(shí)，每月的還款結(jié)果也隨之計(jì)算出來。這一部分只包含jQuery和JavaScript代碼，在第一部分的基礎(chǔ)之上，完成與用戶的交互，并將貸款的計(jì)算結(jié)果在前端展示。至此一個(gè)用HTML加jQuery編寫的房貸計(jì)算器在功能上就已經(jīng)實(shí)現(xiàn)完畢了。
- 雖然教程的主題是用jQueryEasyUI實(shí)現(xiàn)房貸計(jì)算器，但是當(dāng)我們準(zhǔn)備好前兩個(gè)部分之后，將會(huì)大大降低學(xué)習(xí)EasyUI的難度。在前兩部分的代碼基礎(chǔ)之上，這一部分只包含EasyUI代碼，我們將考慮用哪些EasyUI插件和插件的哪些屬性、事件和方法，來實(shí)現(xiàn)第一部分的HTML內(nèi)容和第二部分的jQuery交互。
