课程内容
本教程完整再现了使用HTML、jQuery和EasyUI设计实现房贷计算的全流程,并给出了教程涉及知识点的详细参考资料和演示demo,供初学者形成完整的学习路径。
目标人群
教程难度简单,属于HTML、jQuery和EasyUI开发的基础课程。对于刚开始学习前端编程的新手,本教程是一个很好的项目练手,有助于形成完整的学习路径和知识体系;对于想学习jQueryEasyUI的读者,教程第三部分提供了详细的入门指导。
最终效果展示
为什么要编写这样一篇教程、这是一篇什么样的教程
用刚入门的编程语言来实现一个功能总是会感觉困难重重,尤其是新手,经常会被各种小问题卡住,却不知所措。
正确编写并运行一段程序需要一些先修知识,如果读者不了解这些先修知识,就会大大增加学习的难度。本教程并没有假设读者知道那些应该知道的东西,就像读者什么都懂一样,一上来就开始讲解代码;本教程也不是给出泛泛的先修建议,比如掌握了HTML和jQuery就能够读懂这篇教程,因为教材中的代码只用到了一部分HTML和jQuery的内容,在学习完大部头的巨著,精通了这些知识之前,完全读者就可以学习这篇教程。与前两种情况不同的是,本教程会把每段代码的先修知识予以明确说明,不多也不少,就是那些先修知识。读者需要检查自己对先修知识的了解程度,查漏补缺,如果已经掌握,便可以顺利理解后续的代码;如果没有掌握,可以按照教程中给出的建议快速入门。
编写程序是一个从0到1的过程,直接给出代码,写好注释对于新手学习来说依旧难度过大。本教程会重现编码过程,展现编程中遇到的问题,以及如何回答这些问题,将编程的体验以及思考过程融入教程之中,从而完整展现从0,到0.1再到0.2......一直到1的的整个编程过程。
编写一个大程序的有效方法是控制复杂度,将大问题分解为几个小问题,再分析每个小问题包含哪几个方面,进而形成一个完整的知识体系。本教程采取了同样的讲授思路,将用EasyUI实现房贷计算器分为了三个不同层次的问题:
- 用HTML实现前端的内容展现。房贷计算器需要用户选择贷款类型,输入贷款金额,计算每月还款额等等内容,这一部分只包含HTML代码,思考一个房贷计算器在内容上包含哪些部分,应该用哪些HTML的标签来实现这些内容。
- 用jQuery实现前端与用户的交互。当用户选择贷款类型时,贷款利率也随之改变,当用户点击计算时,每月的还款结果也随之计算出来。这一部分只包含jQuery和JavaScript代码,在第一部分的基础之上,完成与用户的交互,并将贷款的计算结果在前端展示。至此一个用HTML加jQuery编写的房贷计算器在功能上就已经实现完毕了。
- 虽然教程的主题是用jQueryEasyUI实现房贷计算器,但是当我们准备好前两个部分之后,将会大大降低学习EasyUI的难度。在前两部分的代码基础之上,这一部分只包含EasyUI代码,我们将考虑用哪些EasyUI插件和插件的哪些属性、事件和方法,来实现第一部分的HTML内容和第二部分的jQuery交互。