日期:2014-05-16  浏览次数:20510 次

JavaScript课程大纲-按天安排
基础部分



第一周:
1、javascript脚本在网页里的几种写法,语法,变量类型。
2、JS控制HTML属性(HTML DOM)和JS控制CSS属性(CSS DOM)及类样式。
3、条件判断语句(if else,三元运算符,if else if和switch的区别),break和return的应用和区别;
4、循环的几样写法(for,while,do while,for in )及相互代替的写法。
5、变量的类型自动转换。
6、方法的定义,方法的特殊性,匿名方法和匿名方法的运行,变量作用域及私有作用域简单了解,带参数的方法和带返回值的方法。
7、this关键字初步了解。
8、事件属性的初涉(DOM 0级事件的初步了解)
9、实例包括:九九乘法表,图片切换实例选项卡面板实例等。


第二周:
1、DOM详细:DOM用来获取、遍历、创建元素的方法细讲(详见PPT)。
2、时间类的详细及应用:实例包括时钟,倒记时;
3、常用数学方法详解;
4、动画基础;
5、调试工具的使用;
6、作业及综合练习:用DOM方法创建HTML元素的例子,综合DOM、事件基本应用、Math类方法和定时器的例子,具体要求请见作业的要求文档。


深入应用及专业开发部分


第三周:
1、变量作用域、闭包及this关键字详解;
2、DOM 0级事件绑定的特点。如何把HTML代码和JS代码分离及注意事项;
3、DOM的深入应用及构建自己的DOM方法库
3.1、命名空间的概念及优点;
3.2、编写通用的增加类样式和移除类样式的方法(addClass()和removeClass())及正则表达式初涉;
3.3、通过类名来获取元素的方法;
3.4、仿jQuery的siblings方法(获取一个节点的兄弟节点);
3.5、获取一个节点下元素子节点的方法;
3.6、编写通用的CSS属性值的设置和记取的方法(类似于jQuery的css方法);
3.7、编写 获取某个元素的索引值的方法(类似于jQuery的index方法);
3.8、DOM操作的兼容性问题及其它常用的DOM方法的编写。
3.9、JS 最新API方法及应用:querySelectorAll,firstElementChild、getElementsByClassName等
3.10、封装自己的DOM方法库
以上这些,一方面是帮助同学更加熟练的掌握所学到的基础知识,进一步培训逻辑思维,更重要的是培养学生的抽象、封装、复用代码的思想!
4、jquery初涉
5、实例:先用jQuery写一个选项卡面板,再用自己编写的方法库写一个无兼容性的选项卡面板实例,对比二者的异同及体会自己所写代码的不足。
6、调试工具的进一步使用。在讲课中会一直会用到调试工具,目的就是让学生有分析代码、自行解决问题的能力。并且IE的调试工具、火狐FireBug,chrome调试工具交替使用,使学生能够体会到这两者各自的优点。


第四周第一天
1、动画的基本原理。
2、左右切换的图片滚动动画
3、自动运行的动画:无缝滚动的循环动画和单向滚动动画。
4、闭包和私有作用域的应用及实操:用闭包的方式给HTML元素事件绑定方法。
5、HTML元素自定义属性在JS编程中的应用。
6、IE8/9、火狐FIREBUG调试工具的应用及其它调试技巧。

第四周第二天
7、复杂动画及动画算法(跳动、反弹、加速减速、放大缩小、拖拽拖动等);
8、封装自己的运画库


第五周第一天
1、通过原来用JS写的示例再用jQuery来完成,体验jQuery的便利与强大。
2、jQuery对象与JS原生对象的区别与转换。
3、jQuery选择器详细与CSS3选择器在jQuery中的应用。

第五周第二天:jQuery中的DOM操作及动画详解
jQuery中的DOM操作
jQuery中的动画


第六周第一天(总第11天):事件详解
1、事件绑定的三种方式:
      把方法写在HTML代码的事件属性里
      写在JS获取到的HTML属性中
      写在HTML里和写在JS对象属性里的区别和优缺点
     2级DOM的事件绑定方法
2、2级DOM的事件绑定方法 的优点
3、2级DOM的事件绑定方法的浏览器兼容性问题
4、事件的浏览器差异
5、事件的冒泡和捕获
6、事件属性详解:鼠标事件、键盘事件和手机浏览器中的事件等
实例1:拖拽效果的两种不同实现效果;
实例2:解决IE中二级DOM事件绑定的this关键字指向问题
实例3:用顶级事件绑定的方式解决菜单隐藏
7、jQuery中的事件绑定及移除
8、jQuery中的复合事件
9、jQuery中的事件模拟
10、jQuery中的的one及live方法的应用。

第六周第二天
1、COOKIE机制和网页换皮肤实例
2、JS和JQ操作表单元素
3、HTML5中的新标记和JS控制HTML标记(下午,选讲)


第七周第一天:面向对象的JS编程
(这一天的东西比较抽象,并且示例较多,请做好提前预习)
javaScript面向对象的特点
javascript的面向对象编程中析构方法(constructor)原型对象(prototype)和实例(instance)三者的关系;
JS面向对象的实质和prototype详解
call和apply详解及继承;
实例:结合第一周的DOM库,写一个面向对象的类似于jquery的DOM类库。使用面向对象的方法完成拖拽实例。

第七周的第二天:
闭包的应用及jQuery插件开发
jQuery插件的三种不同形式。
仿新浪微博效果的ajax应用,实践课程。是偏复杂的综合示例。
网站同步交互与异步交互的区别,理解传统的客户端回发(PostBack)和局部刷新的区别。
充分应用javascript、PHP、JSON、XML技术改善提高用户体验,展示AJAX在提高用户体验方面的强大魅力!


用到的知识点:
1、浏览器端(客户端)与服务器端交互原理
2、PHP网站开发与数据库存取
3、javaScript AJAX原理与jQuery AJAX应用。
4、XML知识
5、JSON知识。