HTTP状态码

2016年2月9日

状态码：客户端访问服务器时返回的状态码

格式：状态码通常是由三位数字和原因短语组成，其中第一位数字为响应类别，比如：
200 OK

响应类别有以下5种：

  • 1XX Information（信息类状态码） 接收的请求正在处理
  • 2XX Success （成功状态码）请求正常处理完毕
  • 3XX Redirection （重定向状态码）需要进行附加操作以完成请求
  • 4XX Client Error （客服端错误状态码）服务器无法处理请求
  • 5XX Server Error （服务端错误状态码）服务器处理请求出错

常用状态码

  1. 2XX 成功
  • 200 OK表示客户端发来的请求在服务器上被正常处理了
  • 204 No Content 服务器接受的请求已经处理成功，但返回的响应报文中不含实体的主体成分
  • 206 Partial Content 客户端进行了范围请求，服务器成功执行了这部分GET请求
  1. 3XX 重定向
  • 301 Moved Permanently 永久性重定向
  • 302 Found 临时性重定向
  • 303 See Other 请求对应的资源存在着另一个URL，应使用GET方法重新获取请求的资源
  • 304 Not Modify 客户端发送附加条件的请求时，服务器端允许请求访问资源
  • 307 Temporary Redirect 临时性重定向
  1. 4XX 客户端错误
  • 400 Bad Request 请求报文中存在语法错误
  • 401 Unauthorized 权鉴失败，需要有HTTP认证的认证信息
  • 403 Forbidden 请求的资源被服务器拒绝了
  • 404 Not Found 服务器无法找到该资源
  1. 5XX 服务器错误
  • 500 Internal Server Error 服务器执行请求时发生错误
  • 502 Bad Gateway PHP没有认证版本
  • 503 Service Unavailable 服务器暂时处于超负载或正在进行停机维护，现在无法处理请求

Tmall开发

2016年2月9日

1.29
假期无聊，打算来临摹一个大型网站，练习一下js和css。
效果如下：
源码地址：https://github.com/Begin5257/Tmall.git
喜欢天猫的黑红，所以就天猫啦。
js全部基于原生js和jQuery。

一些需要注意的点：
1、nav栏鼠标滑过出现div
用jQuery实现，需要注意的是上面链接的背景颜色也要随着改变。
2、小三角鼠标滑过变成倒三角
小三角是这样的，将三边设成transparent即可得到
border-color:#bbbbbb transparent transparent
倒三角是这样：
border-color:transparent transparent #bbbbbb
3、出现的div上面有小尖头
利用b标签的border，原理同上
4、点击切换大图
利用原生js实现
5、图片轮播
利用原生js，复习了setTimeout的使用方法。

今天的效果是这样的～

1.30
今天主要解决了下滑固定div出现nav的效果。
效果如下：

啊，鼠标滚轮真是个神奇的事件。
是难得一见的Firefox派和其他派系(一般都是IE和其他2333)

•Firefox 鼠标滚轮向上滚动是-3，向下滚动是3
•IE 鼠标滚轮向上滚动是120，向下滚动是-120
•Safari 鼠标滚轮向上滚动是360，向下滚动是-360
•Opera 鼠标滚轮向上滚动是120，向下滚动是-120
•Chrome 鼠标滚轮向上滚动是120，向下滚动是-120

反正JS可以根据正负判断向上滚还是向下滚，那么就好说了。
贴个源码：
//下滑鼠标出现隐藏nav,上滑隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function showNav(){
    var div = document.getElementById('main-content');
    var img=document.getElementById("scroll-img");
    var nav=document.getElementById("slide-nav");
    //addEventListener兼容IE
    if (div.addEventListener) {
        div.addEventListener('DOMMouseScroll', function(event) {
            event = event || window.event;
            //JavaScript获取鼠标滚轮值，这里的值只有“1”和“-1”两种情况
            if(event.wheelDelta<0) {
                nav.style.display = "inline";
            }
        }, false);
    }
    if (img.addEventListener) {
        img.addEventListener('DOMMouseScroll', function(event) {
            event = event || window.event;
            if(event.wheelDelta>0){
                nav.style.display="none";
            }
        }, false);
    }
    
    div.onmousewheel = function(event) {
        event = event || window.event;
        if(event.wheelDelta<0){
            nav.style.display="inline";
        }
    };
    img.onmousewheel = function(event) {
        event = event || window.event;
        if(event.wheelDelta>0){
            nav.style.display="none";
        }
    }
}

JavaScript-Summary(递归、闭包)

2016年2月9日

假期来复习一下JavaScript，先从递归和闭包开始。

1.函数的声明方式有两种，一是函数声明，一是函数表达式。

1
2
3
4
function sayHi(){
   alert("Hi"); 
}
sayHi();
1
2
3
4
var sayHi = function(){
    alert("Hi");
}
sayHi();//错误：函数不存在

2.递归
一个简单的递归阶乘函数

1
2
3
4
5
6
7
8
9
10
function factorial (num){
  if(num <=1 ){
      return 1;
  } else {
   return num * factorial (num-1);
  //return num * arguments.callee (num-1);
  //使用arguments.callee 比函数名更保险
  //but 严格模式下此属性被禁用
  } 
}

arguments.callee是一个指向正在执行函数的指针，可以利用它实现对函数的递归调用
或者采用命名函数表达式的方法

1
2
3
4
5
6
var factorial = (function f (num){
     if(num <=1 ){
        return 1;
    } else {
        return num * f (num-1);
})

将命名为f() 的函数表达式赋值给 factorial，即使函数赋值给另一变量，递归也能正常的进行

3.闭包
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数。
在调用每个匿名函数时，立刻执行该匿名函数的结果赋值给数组。由于函数参数是按值传递的，因此就会将变量i的当前值赋值给参数num

1
2
3
4
5
6
7
8
9
10
11
12
function createFunction(){
    var result = new Array();
    
    for(var i=0 ; i<10 ;i++){
        result[i] = function (num) {
            return funtion(){
                return num;    
            }
        }(i);
    }
    return result;
}

一个有趣的例子

1
2
3
4
5
6
7
8
9
10
11
function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}
 
var add5 = makeAdder(5);
var add10 = makeAdder(10);
 
console.log(add5(2));  // 7
console.log(add10(2)); // 12

add5 和 add10 都是闭包。它们共享相同的函数定义，但是保存了不同的环境。在 add5 的环境中，x 为 5。
而在 add10 中，x 则为 10。

4.关于this

1
2
3
4
5
6
7
8
9
10
11
var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        return function(){
            return this.name;
        };
    }
};
alert(object.getNameFunc()()); //"The Window"

内部函数永远不可能直接访问到外部函数的argument对象和this对象，因此返回了全局name变量的值。
如果把外部作用域中的this对象保存在一个闭包可以访问的变量中，就可以让闭包访问该对象了~

1
2
3
4
5
6
7
8
9
10
11
var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
alert(object.getNameFunc()());//“The Object”

5.块级作用域
用作块级作用域的匿名函数的语法如下：

1
2
3
( function( ) {
    //code
}) ( );

无论在什么地方，只要临时需要一些变量，就可以使用私有作用域。

1
2
3
4
5
6
7
8
function outputNumbers ( count ) { 
    (function () {
        for( var i=0; i <count ;i++){
            alert(i);
        }
    })( );
    alert(i); // i is not defined
}

6.用闭包模拟私有方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  } 
};
 
var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); //0
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); //2
Counter1.decrement();
console.log(Counter1.value()); //1
console.log(Counter2.value()); //0

两个计数器是有各自的独立性的。每次调用 makeCounter() 函数期间，其环境是不同的。
参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures