期中考试题

1 请写出一个符合 W3C 规范的 HTML 文件

要求
页面标题为「我的页面」
页面中引入了一个外部 CSS 文件，文件路径为 /style.css
页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效
页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效
页面中引入了一个外部 JS 文件，路径为 /main.js
页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK
页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意
注意题目中的路径
回答

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的页面</title>
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="/print.css" media="print">
    <link rel="stylesheet" href="/mobile.css" media="(max-width=500px)"> 
    <script src="/main.js"></script>
    <script src="/gbk.js" charset="GBK"></script>
</head>
<body>
    <svg>
        <circle cx="100" cy="100" r="50" fill="red" />
    </svg> 
</body>
</html>

2 移动端是怎么做适配？

回答要点：
meta viewport
媒体查询（CSS深入浅出第五课）
动态 rem 方案（CSS深入浅出第九课）
这三个知识点只有第一个我有讲过，你需要自学第二点和第三点。
如果大家在这道题上都答得不好，我会在考试后直播这两节课的录屏。（因为我觉得视频里已经讲得很好了，没必要重新讲一遍）

回答
1 meta viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2 媒体查询(2种方式)

//a 可在link元素中加
<link rel="stylesheet" media="(max- 500px)" href="./style.css" />
//b 可在样式表中加
<style>
@media(max-500px){
         body{background: red;}
}
</style>
//如果媒体分辨率小于500px，这个CSS会生效，背景会变成蓝色

3 动态 rem 方案(2种方式)

//a 用 JS 动态调整 REM
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>
//b 另一种方法添加在 scss 文件里（ 这种方法可以让px 可自动变 rem）

评语
关于rem的适配的问题
不要使用document.write
设置完html的font-size之后，记得重置下body的font-size

3 用过CSS3吗? 实现圆角矩形和阴影怎么做?

回答
1 用过css3 的圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 等
2 实现圆角矩形和阴影，预览链接：http://js.jirengu.com/zatukasofu/1/edit?html,css,output

//实现圆角
border-radius: 10px;
//实现阴影
box-shadow: 10px 10px 5px #888888;

4 什么是闭包，闭包的用途是什么？

回答
1 如果一个函数调用了作用域外的变量，那么这个函数+这个变量就组成了“闭包”，如下例就是一个闭包：

function f1(){
    var n=123;
    function f2(){
        console.log(n);
    }
    return f2;
}
var result=f1()
result()  //123

2 闭包的用途有三个：

读取函数内部的变量
让这些变量始终保持在内存中
封装对象的私有属性和私有方法

5 call、apply、bind 的用法分别是什么？

回答

//这是一个函数
function add(a,b){
    return a+b
}

1 call用法（有三个参数，第一个传递的是this，后两位传递的是连续参数）

add.call(add,5,3)
//8

2 apply用法（与call不同的是后两位传递的是数组参数）

add.apply(add,[5,3])
//8

3 bind用法（与call，apply不同的是，它不会立即调用，而是会生成一个新的函数）

var result=add.bind(add,5,3)
result()
//8

6 请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。

回答
1、2XX 成功：请求被正常处理
1.1 200 OK
表示从客户端发来的请求在服务器端被正常处理
1.2 204 No Content
表示服务器接收的请求以成功处理，但没有资源可返回，即：响应报文中不含实体的主体部分
1.3 206 Partial Content
表示客户端进行了范围请求且服务器成功执行了这部分的GET请求，响应报文中包含由Content_Range指定范围的实体内容
“Content_Range为请求首部的一种类型，后面的随笔会讲到”

2、3XX 重定向：服务器需要执行某些特殊处理以正确处理请求（即URI地址或者资源的缓存的资源有效时间过期）
2.1 301 Moved Permanently
永久性重定向：表示请求的资源已被分配了新的URI，以后应使用资源现在的URI，如果已经保存了书签，这时候应该按照Location首部提示的URI重新保存
2.2 302 Found
临时性重定向：表示请求的资源已被分配到了新的URI，希望（本次）能使用新的URI访问
2.3 303 See Other
表示请求对应的资源存在另一个URI,应该使用GET方法定向获取请求的资源
PS：当301、302、303响应状态码返回，几乎所有浏览器都会把POST改成GET，并删除请求报文内的主体，之后请求自动再次发送
301、302标准禁止将POST改为GET，但实际中都会允许这么做~~~GG
2.4 304 Not Modified
表示客户端发送得附带条件的请求时，服务器运行请求访问，但未满足条件的情况，304返回时，不包含任何响应的主体部分
附带条件：采用GET方法的请求报文中包含If-......条件的任一首部，后面的随笔中介绍
2.5 307 Temporary Redirect
临时重定向：禁止将POST转换为GET，该状态码会严格遵守浏览器标准

3、客户端错误：4XX的响应结果表明客户端是发生错误的原因所在
3.1 400 Bad Ruquest
请求报文存在语法错误
3.2 401 Unauthorized
发送的请求需要有通过http认证（BASIC认证、DIGEST认证）的认证信息
PS：若之前已经进行了一次请求，则表示用户认证失败
返回含有401的响应必须包含一个适用于被请求资源的WWW-Authenticate首部用来质询用户信息
3.3 403 Forbidden
对请求资源的访问被服务器拒绝（服务端没有必要给出拒绝的详细理由，如果想做说明，可在实体主体部分对原因进行描述）
举例：未获得文件系统的访问授权、访问权限出现某些问题等
3.4 404 Not Found
服务器上无法找到请求的资源

4、 5XX服务器错误：服务器本身发生错误
4.1 500 Internal Server Error
服务器端执行请求时发生错误
4.2 503 Server Unavailable
服务器暂时处于超负载或者正在停机维护，现在无法处理请求

7 请写出一个 HTTP post 请求的内容，包括四部分。

其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path
回答
1 HTTP post请求格式如下

1 动词 路径 协议/版本
2 Key1: value1
2 Key2: value2
2 Key3: value3
2 Content-Type: application/x-www-form-urlencoded
2 Host: www.baidu.com
2 User-Agent: curl/7.54.0
3 
4 要上传的数据

2 写一个HTTP post 请求的内容

1 POST /path HTTP/1.1
2 Host: www.baidu.com
2 User-Agent: curl/7.54.0
2Accept: */*
2 Content-Length: 18
2 Content-Type: application/x-www-form-urlencoded
3
4 username=ff&password=123

8 请说出至少三种排序的思路，这三种排序的时间复杂度分别为

O(nn)
O(n log2 n)
O(n + max)
回答
1 O(nn)
冒泡排序。重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。
2 O(n log2 n)
快速排序。找其中的一个数字作为标杆,小于标杆的数字放左边,大于标杆的数字放右边,一次排完之后再继续重复前面的操作,直到只有一个数字
3 O(n + max)
基数排序。将整形10进制按每位拆分，然后从低位到高位依次比较各个位。主要分为两个过程：
a 分配，先从个位开始，根据位值(0-9)分别放到0~9号桶中（比如53,个位为3，则放入3号桶中）
b 收集再将放置在0~9号桶中的数据按顺序放到数组中
重复a、b的过程，从个位到最高位

9 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

博客点击这里

10 如何实现数组去重？

假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。
要求：
不要做多重循环，只能遍历一次
请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）
回答
ES5

function unique(array) {
    var newArr = []
    var hash = {}
    for(var i = 0; i < array.length; i++) {
        if(hash[array[i]] === undefined) {
            newArr.push(array[i])
            hash[array[i]] = 1
        }
    }
    return newArr
}
var array = [1,5,2,3,4,2,3,1,3,4];
unique(array) 
// [1, 5, 2, 3, 4]

ES6

function unique(array){
  return Array.from(new Set(array));
}
unique(array) 
// [1, 5, 2, 3, 4]