课堂作业安排

作业1

简版百度首页,效果如下图

问题

  1. 谈谈你喜欢的开发环境(操作系统,编辑器,浏览器,工具等)
  2. doctype(文档类型)的作用是什么
  3. 浏览器标准模式和怪异模式之间的区别是什么
  4. 如何避免浏览器乱码
  5. 浏览器内核有哪些

作业2

淘宝登陆框

问题

  1. 怎么理解html语义化

作业3

菜单 3

问题

  1. 无序列表怎么去掉默认点号
  2. 链接怎么去掉默认下划线

作业4

搭建自己到web服务器(购买域名,绑定域名),把作业上传上去

问题

  1. 百度搜索饥人谷,展示搜索结果。 从开始输入到页面展现中间发生了什么?

作业5

点点网

问题

  1. 什么是对象
  2. typeof 变量 有几种类型
  3. 简单类型 vs 引用类型
  4. 声明前置?
  5. 函数声明 vs 函数表达式

作业6

  1. 分别写出判断一个变量是数字、字符串、数组、函数、json对象的方式

作业7

1.遍历如下json对象(用递归)

var people={
    name: 'huger',
    age: 28,
    student: {
        name: 'valley'
        sex: 'man'
    }
}

2.补全如下函数,把数字日期如2014-06-21转换为,二零一四年六月二十一日星期三

function dateConvert ( str ){
    // todo...
}
var newDateStr = dateConvert('2014-06-21');
console.log(newDateStr); // 二零一四年六月二十一日星期三

3.补全函数,返还n天前的日期,如今天是2014-11-22,7天前的日期是2014-11-15

function getPastDay(n){
    //todo..
}
var today = '2014-11-22';
var last = getPastDay(7);
console.log(last); // 2014-11-15

作业8

1.补全函数,返回距离未来时间的倒计时

function countClock( str ){
    //todo...
}
var str2 = coutClock('2016-01-01');
console.log(str2); //输出:距离2016年1月1日还有xx天xx小时xx分xx秒

2.写一个函数,输入为两个整数,返回两个整数之间的随机数:如1,100 返回1到99的随机数

作业9

1.写个浅拷贝函数,拷贝一个json对象

function shadowCopy(srcObj){
    //todo ...
}
var obj = {
    name: 'hunger',
    age: 10
}
var obj2 = shadowCopy(obj1);
console.log(obj2);

2.写一个深拷贝函数, 拷贝一个json对象

function deepCopy(srcObj){
    //todo ...
}
var obj = {
    name: 'hunger',
    age: 10,
    student: {
        name: 'valley',
        sex: 'boy'
    }
}
var obj2 = shadowCopy(obj1);
console.log(obj2);  

作业10

1.完成如下函数

//判断一个dom元素是否拥有这个class
function hasClass(element, cls){
}

//给dom元素添加class
function addClass(element, cls){
}

//删除dom元素的class
function removeClass(element, cls){
}

//清除字符串两头的空格
function trim(str){
}

2.把上面的函数作为dom元素属性绑定到dom元素上,如 var el = document.getElementById('header'); console.log(el.hasClass('test')); el.addClass('class1'); el.removeClass('test');

作业11

完成蘑菇街侧边栏内容切换效果,包括html+css+js,网站参考

作业12

完成下面的事件绑定函数,兼容ff和ie。注意事件处理函数内部的this代表当前事件触发的元素。

function bind(el, type, handler){
    //todo sth...
}

var btn = document.getElementById('btn');
bind(btn, 'click', function(){
    var self = this;
    alert(self.innerText);
});

作业13

封装一个ajax函数,如下

function ajax(opts){
    //todo sth...
}

ajax({
    url: 'http://xxx.xxx/index.php',
    type: 'post',
    data: {
        name: 'kevin',
        age: 18
    },
    success: function(data){
        console.log(data);
    }
    error: function(){
        console.log('error');
    }
});

作业14

实现一个轮播,轮播切换时图片从左往右边滚动

作业15

用jquery实现雨滴滴下特效。