2017 IFE 课程学习笔记

• 小薇学院
• 斌斌学院
• 耀耀学院

小薇学院

任务1

斌斌学院

任务2

预览地址

1. ECMAScript 5中的数组方法总结
2. js数组的各种操作

任务3

预览地址

任务4

任务目的：DOM节点的各种操作

预览地址

1. 使用 !isNaN(val) 来进行判断value值是否位数字类型。
2. appendChild() 方法：可以向节点的子节点列表的末尾添加新的子节点。语法：fatherNode.appendChild(newchild)
3. insertBefore() 方法：可以在已有节点前插入一个新的节点（兄弟节点）。语法：fatherNode.insertChild(newchild,refchild)
4. firstChild 方法：返回首个子节点。 语法：fatherNode.firstChild
5. lastChild 方法：返回最后一个子节点。 语法：fatherNode.lastChild
6. firstElementChild 方法：返回首个元素类型的子节点。 语法：fatherNode.firstElementChild
7. lastElementChild 方法：返回最后一个元素类型的子节点。 语法：fatherNode.lastElementChild
8. 任务中用到的几种DOM方法及相关方法总结

任务5

预览地址

任务6

任务目的：实践js字符串操作

预览地址

1. JavaScript中常见的字符串操作函数及用法

耀耀学院

任务3

任务目的：实践select表单和option表单的操作

预览地址

1.JS动态添加option和删除option的相关操作

任务4

任务目的：1.练习JavaScript在DOM、字符串处理相关知识 2.练习对于复杂UI，如何进行数据机构建模

预览地址

1.使用变量i来作为方向的标记。 2.通过i%4取模来判断小方块的方向(-3,-2,-1,0,1,2,3 -1和3为左 / 1和-3为右/ 2和-2为下/0为上)。

任务5

任务目的：Animation和Transition的动画过渡效果的实现

预览地址

1.transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-propertyssssssssssssss
• transition-duration
• transition-timing-function
• transition-delay

任务6 UI组件排序表格

任务目的：1.练习综合运用HTML、CSS、JavaScript实现局部功能 2.练习对于代码的抽象与封装 3.运用面向对象的方式

预览地址

1.运用面向对象，对属性和方法进行封装。 2.构造函数，原型，及this的上下环境。