html/css/ javascript笔记

1.JavaScript 中call（）方法和apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于call（），第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。（在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组。

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了： call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )； apply的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ]); bind除了返回是函数以外，它的参数和call 一样。当然，三者的参数不限定是string类型，允许是各种类型，包括函数、 object 等等！

2. Ajax 和 Flash

1.Ajax的优势：1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发。

2.Flash的优势：1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度

3.Ajax的劣势：1.它可能破坏浏览器的后退功能 2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中，不过这些都有相关方法解决。

4.Flash的劣势：1.二进制格式 2.格式私有 3.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间 4.性能问题

3. boostrap中的辅助类

.text-muted:文字的颜色换成灰色 .text-primary:文字的颜色变成蓝色 .text-success:文字的颜色变成绿色

.text-info:文字的颜色变成暗蓝色 .text-warning:文字颜色变成暗黄色 .text-danger：文字的颜色变成红色

4.导致回流发生的因素

回流必将引起重绘，重绘不一定会引起回流。

调整窗口大小，浏览器窗口尺寸改变——resize事件发生时
元素尺寸改变——边距、填充、边框、宽度和高度；改变字体大小
页面渲染初始化
元素位置改变
样式表变动
元素内容变化，尤其是输入控件
CSS伪类激活
DOM操作，添加或者删除可见的DOM元素
offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算，会使浏览器将渐进回流队列Flush，立即执行回流。内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变

5. js的函数会有一个默认的prototype对象，这个prototype对象用来指定函数的继承关系，prototype对象默认有两个属性，一个是constructor，另一个就是proto属性，默认的prototype对象在被改变之前就像是这个函数用来表示自己的一个对象，其中proto属性和普通对象的proto属性一样用来对应继承关系，而constructor属性则代表了函数本身。

6. java中”static”关键字表明一个成员变量或者是成员方法可以在没有所属的类的实例变量的情况下被访问

7. HTML5的picture标签用于为不同设备提供图像

8. html5新增的表单元素： datalist ， keygen， output

HTML5新增的表单元素属性有：autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、 min， multiple、pattern、placeholder、required、step、width。

9.html5的语义化标签：

header元素：header 元素代表“网页”或“section”的页眉。

通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。

整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素

footer元素 : footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

hgroup元素：hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。

nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

aside元素：aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）。

section元素： section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

article元素：article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）

10. let 和var 的区别：

ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。

ES6可以用let定义块级作用域变量

在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。
例如：

  { 
     var i = 9;
   } 
   console.log(i);  // 9

ES6新增的let，可以声明块级作用域的变量。

   { 
      let i = 9;     // i变量只在 花括号内有效！！！
   } 
   console.log(i);  // Uncaught ReferenceError: i is not defined

let 配合for循环的独特应用

let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域，用let声明的变量传入到 for循环体的作用域后，不会发生改变，不受外界的影响。看一个常见的面试题目：

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
    console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
  }, 0);
}
// 输出结果
10   共10个
// 这里面的知识点： JS的事件循环机制，setTimeout的机制等

如果把 var改成 let声明：

// i虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。
for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //  i 是循环体内局部作用域，不受外界影响。
  }, 0);
}
// 输出结果：
0  1  2  3  4  5  6  7  8 9

let没有变量提升与暂时性死区

用let声明的变量，不存在变量提升。而且要求必须等let声明语句执行完之后，变量才能使用，不然会报Uncaught ReferenceError错误。
例如：

console.log(aicoder);    // 错误：Uncaught ReferenceError ...
let aicoder = 'aicoder.com';
// 这里就可以安全使用aicoder

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

let变量不能重复声明

let不允许在相同作用域内，重复声明同一个变量。否则报错：Uncaught SyntaxError: Identifier 'XXX' has already been declared

例如：

let a = 0;
let a = 'sss';
// Uncaught SyntaxError: Identifier 'a' has already been declared

11. DNS就是将域名翻译成IP地址。主要用UDP，但是当请求字节过长超过512字节时用TCP协议，将其分割成多个片段传输。DNS协议默认端口号是53。

操作系统的DNS缓存：windows DNS缓存的默认值是 MaxCacheTTL，它的默认值是86400s，也就是一天。macOS 严格遵循DNS协议中的TTL。

浏览器的DNS缓存：chrome对每个域名会默认缓存60s；IE将DNS缓存30min；Firefox默认缓存时间只有1分钟；Safari约为10S。

12. html5中， getCurrentPosition（）获取用户当前位置放入一个值中保存，getLocation()地图定位。

13.Javascript内置的可迭代对象： 1）数组Arrays 2）字符串Strings 3）Map 4）Set 5）arguments 6）Typed Arrays 7）Generators，ES6新增加

14. html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

它们的用法是（key,value）或只有key 。 设置一般用 set 开头，获取采用 get 开头; 对于键值的话，一般都是 (key, value)的形式；

15. 内联元素里面不能放入块元素

16. 页面导入样式时，使用link 和 @import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

(4) link支持使用js控制DOM去改变样式，而@import不支持

17. javascript中实现跨域的方式总结

第一种方式：jsonp请求；jsonp的原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有<img>.
第二种方式：document.domain；这种方式用在主域名相同子域名不同的跨域访问中
第三种方式：window.name；window的name属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
第四种方式：window.postMessage；window.postMessages是html5中实现跨域访问的一种新方式，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。
第五种方式：CORS；CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。
第六种方式：Web Sockets；web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

18. 1、只要 || 前面为 false,不管 || 后面是 true 还是 false，都返回 || 后面的值。

2、只要 || 前面为 true,不管 || 后面是 true 还是 false，都返回 || 前面的值。

3.只要 && 前面是 false，无论 && 后面是 true 还是 false，结果都将返 && 前面的值;

4.只要 && 前面是 true，无论 && 后面是 true 还是 false，结果都将返 && 后面的值;

(4) link支持使用js控制DOM去改变样式，而@import不支持

来源：https://www.cnblogs.com/-pudding/p/11483612.html

标签

作用域