javascript基础从0到1_javascript从零-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44349701/article/details/116226772

1、HTML5新增标签

1.1 main

<main></main>

1.2 article

<article></article>

标签表示页面中与上下文不相关的独立的内容部分，如下面的示例，放在标签里。

用法：

<article>
 <h1>独立内容</h1>   
 <p>与上下文不相关</p>
</article>

效果：

独立内容

与上下文不相关

1.3 center

<center></center>

1.4 canvas：画布

<canvas></canvas>

新多媒体元素：视频，音频

1.5 audio：定义音频内容

<audio></audio>

用法：

<audio controls="controls" loop="loop" preload="auto"> 
<source src="horse.mp3" type="audio/mpeg"> 
    您的浏览器不支持 audio 元素。 
</audio>

效果：

您的浏览器不支持 audio 元素。

1.6 video：定义视频内容

<video></video>

<video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4"> 
	您的浏览器不支持 video 标签。 
</video>

效果：

您的浏览器不支持 video 标签。

1.7 mark

<mark></mark>

如果您需要突出显示 HTML 文档中某一部分的文本，则您可以使用该 <mark>标签，比如，在下面的示例中，我们突出显示了“牛奶”一词：

<p>今天别忘了买<mark>牛奶</mark></p>

效果：

今天别忘了买牛奶

1.8 nav：导航链接

<nav></nav>

常见的导航栏的示例是菜单、目录和索引。

请参考下面的示例：

<nav> 
   <a href="/html/">HTML</a> |
   <a href="/css/">CSS</a> |
   <a href="/javascript/">JavaScript</a> |
   <a href="/jquery/">jQuery</a> |
</nav>

效果：

2、CSS基本语法

选择器{

  属性1;

  属性2;

}

属性：属性名，属性值；属性值与属性值之间使用空格分开。

属性与属性之间使用分号隔开。

3、选择器（靠近原则）

分类：级联原则器、基本选择器、伪选择器

权重计算：

假设ID选择器权值1000，类选择器权值100，标签选择器10，通配符选择器1

级联选择器的权值是多个选择器的权值相加。

相同属性的选择器使用逗号隔开。

3.1 基本选择器

根据“靠近原则” 进行优先级的排序

id选择器、类选择器、标签选择器、通配符选择器(‘*’)

通配符选择器：

*{

  padding:0;
  margin:0;

}

3.2 级联选择器

父子级联：（空格、>）

兄弟级联：（+、~）

3.3 伪选择器（使用冒号）

伪元素选择器：：

伪类选择器：

区别：和：：

1.伪类偏向于元素的动作行为，伪元素偏向于元素的属性。

2.实际上 css3 为了区分两者，已经明确规定:伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

3.对于CSS2之前已有的伪元素，如:before，单冒号和双冒号的写法::before作用是一样的。

3.4 属性值选择器

表单元素使用居多：

input[type=text] {

  属性值：属性名;
  
}

<input type="text"><input type="password">

3.5 扩展：预编译样式

4、JS

JavaScript的标准是有欧洲计算机制造商协会(ECMA)制定。

ECMAScript,BOM、DOM共同创造了JS语言。

var声明变量，变量就是存储值的容器

4.1 JS值的类型

number、string，boolean，null，undefined，Symbol（es6新增）

4.2 数据类型中常用的函数

全局：

parseInt();

parseFloat();

isNaN();

4.3 数据类型转换

4.3.1 自动转换

js引擎会把两种不同类型的数据转化成相同；类型，然后进行运算。

true==>1;false==>0

boolean转换成false的六种情况：

undefined==>false;

null==>false;

false==>false

0==>false;

‘’==>false; 空字符

[]==>false; 空数组

NaN==>false;

在这里插入图片描述

4.3.2 强制转换

Number(“5”);

toString(2);

5、运算符

5.1算数运算符

+ - * / ++ – %

5.2比较运算符

> < >= <= == === !=

5.3逻辑运算符

&& || ^ !

5.4赋值运算符

= += -= /= %=

5.5位运算符

&(AND) 例：0101 & 0001 结果：0001

|(OR) 例：0101 | 0001 结果：0101

^(异或：XOR) 例：0101 ^ 0001 结果：0100

~(NOT) 例：~0101 结果：1010

<<(零填充左位移) 例：0101 << 1 结果：1010

>>(零填充右位移) 例：0101 >> 1 结果：0010

>>>(零填充右位移) 例：0101 >>> 1 结果：0010

在这里插入图片描述

6、内置对象

6.1 Object对象

6.1.1 toString();

6.1.2 call();

可以指定该函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。

func.call(thisValue, arg1, arg2, …)

注：它的第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

例：

var n = 123;
var o = { n : 456 };
function a(x,n) {
console.log(this.n);

a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(o,3,5) // 456

6.1.3 apply();

作用与call方法类似，也是改变this指向，然后再调用该函数。

唯一的区别就是，它接收一个数组作为函数执行时的参数。

func.apply(thisValue, [arg1, arg2, …])

注：

apply方法的第一个参数也是this所要指向的那个对象

第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数

6.1.4 prototype();

原型

getOwnPropertyNames();//对象本身的所有属性

hasOwnPrototype();  //判断对象是否具有某个属性

getPrototypeOf();   //返回对象的原型

例：console.log(Object.getPrototypeOf({}) === Object.prototype) // true

拓展：

function Father(name){
    this.name = name;
}
var father = new Father();

Father.constructor 和 Father.prototype.constructor指向的东西不一样

Father.consturctor = function Function()

Father.prototype.constructor = function Father()

Father.constructor 是从Father的原型链上查找属性，有就是_ _ proto _ _，而Father继承的是Function(){}，Function(){}的指向就是他自己。

Father.prototype.constructor Father.prototype相当于java里边的封装的属性。

（对象的指向是对象，构造方法的属性对象的指向是构造方法）

prototype对象里有两个属性：constructor、_ _ proto _ _

在这里插入图片描述
construtor属性的展开：

在这里插入图片描述

6.1.5 create();

创造对象，可以替代new命令，会继承所有原型对象的属性

例：

var cat = new Animal();

var Tom = Object.create(cat);

使用Object.create方法生成的对象，如果修改原型的值，那么会立即反映在新对象上

6.2 Number对象

在这里插入图片描述

6.3 String对象

在这里插入图片描述

6.4 Date对象：日期

day（一周中第几天）/date（月中第几天）

month:从0开始

6.5 JSON对象

JSON是一种轻量级的数据交换格式，是用于存储和传输数据的格式，通常用于在服务端向网页传输数据。

它使用javasript的语法规则，但是它仅仅是一个文本，可以被任何编程语言读取及作为数据格式进行传递

6.5.1 JSON语法

只支持：字符串，数值，布尔值及null以及在此基础上的对象和数组

语法规则:

(1) **键值对：键名和键值。**类似的有属性，URL中的查询参数列表。

**格式：**键名：键值

键和值都写在双引号中

实例：

'{"name":"zhangsan"}'        //一个键值

'{"name":"John","age":20}'   //多个键值

(2) 数据由逗号分隔

(3) 大括号保存对象

(4) 小括号保存数组

//对象employees是一个数组，数组中包含了两个对象
'{"employees":[{"name":"张无忌","age":25,"sex":"男"},{"name":"赵敏","age":23,"sex":"女"}]}'

JSON.stringify()：用于将一个值转为 JSON 字符串。该字符串符合 JSON 格式，并且可以被JSON.parse方法还原。

JSON.parse()：从一个字符串中解析出json对象

6.6 Regex对象:正则表达式

从指定的数据中心根据匹配规则找到匹配内容。

/模板/igm

模板：字符串、数据范围

匹配一次：/a-z/,/3-9/

多次匹配：可以写多次、也可以使用量词

(),[],{}

+ ? *

\w \d \s

使用函数：

search():下标，是new出来的对象的方法

march():类数组/对象，是new出来的对象的方法

test():是Regex对象的方法，匹配返回true，否则返回false

6.7 Array对象(同时也是一个构造函数)：数组

js数组中可以存放任意类型的数据。一般情况下，我们会在一个数组中存放相同类型的数据。数组中每一个数据都对应一个下标，下标是整数，从0开始。

每一个数组都有长度。长度的下标从0开始。

6.7.1 作为构造函数时，Array可以接受参数，但是不同的参数，会使Array产生不同的行为。

无参数：返回一个空数组

单个参数：参数为正数 array[2]，表示新数组的长度；参数为非正整数(字符串，对象等)，则该值时新数组的成员。

多个参数：都是新数组的成员

6.7.2 遍历数组

for-in：遍历数组

for(变量名 in 对象){


}

注：在这个循环中变量名充当属性名或索引的作用。

实例1：

var Person = {
  name:"Tom",
  sex:"M",
  age:20
};
 
for(x in Person){
  console.log(x+"-"+Person[x]])
}

结果：
name-Tom
sex-M
age-20

注：这里变量x充当的是属性名

实例2：

var arr = ["a","b","c"];

for(a in arr){
  console.log(a+"-"+arr[a])
}

结果：
0-a
1-b
2-c

注：在这里变量充当的是索引

6.7.3 数组函数

对象方法：

isArray(obj):静态方法

功能：用来判断一个值是否为数组

实例：

var arr = [10,'Hello', “Jhone”,{name:”zhangsan”,age:26}]

console.log(typeof arr) //object

console.log(Array.isArray(arr)) //true

**实例方法：**Array实例对象的方法，都是 数组实例 才能使用。

如果不想创建实例，只是想单纯的使用这些方法，可以写成[].method.call(调用对象，参数)的形式，或者Array.prototype.method.call(调用对象，参数)的形式。

valueOf()

功能：返回数组本身

实例：

var a = [1,2,3];

a.valueOf();

toString()

功能：返回数组的字符串形式

实例：

var a = [1,2,3];

a.toString(); //"1,2,3"

push(obj)

功能：在数组末端添加一个或多个元素，并返回添加后的数组长度

实例：

var a = [];

a.push("hello"); //1

unshift()

功能：在数组第一个位置添加元素，并返回添加新元素后的数组长度

实例：

var a = ['java'];

a.unshift('C'); //2

shift()

功能：删除数组的第一个元素，并返回该元素

实例：

var a = ['java'，'javascript'];

a.shift();  //java

pop()

功能：删除数组的最后一个元素，并返回该元素

实例：

var a = ['java'，'javascript'];

a.pop();  //javascript

join()

功能：以参数为分隔符，将所有数组成员组成一个字符串返回

实例：

var a = [1,2,3];

a.join("|");  //"1|2|3"

注：如果不提供参数，默认用逗号分隔

concat()

功能：将新数组的成员，添加到原数组的尾部，然后返回一个新数组

实例：

var a = [1,2,3];

var b = ['java'，'javascript'];

a.concat(b);    //[1,2,3,'java'，'javascript']

slice()

功能：返回数组指定位置的成员组成的新数组，原数组不变

实例：

var a = [1,2,3,4,5,6];
//如果参数位负数  -1：倒数第一位  -2：倒数第二位
a.slice(3)       //[4,5,6]

a.slice(2,4);    //[3,4]   左闭右开

splice()

功能：删除数组，返回被删除的元素

实例：

var a = [1,2,3,4,5,6];

a.splice(2);  //[3,4,5,6]

注：第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后边还有更多的参数，则表示这些就是要插入数组的新元素。

sort()

功能：对数组元素进行排序

实例：

var a = [2,1,6,3];

a.sort();  //[1,2,3,6]

reverse()

功能：反转数组

实例：

var a = [1,2,3,4,5,6];

var b = a.map(function(e){

  return e+3;

})

结果：[4,5,6,7,8,9]

map()

功能：对数组的所有成员依次调用一个函数，根据函数结果返回一个新数组

实例：

var a = [1,2,3,4,5,6];

var b = a.map(function(e){

  return e+3;

})

结果：[4,5,6,7,8,9]

foreach()

功能：遍历数组中的所有元素

实例：

var a = [1,2,3,4,5,6];

a.foreach(function(e){

  console.log(e);

})

结果：1,2,3,4,5,6

filter()

功能：对所有成员调用一个测试方法，返回结果为true组成的新数组

实例：

var sum = [10,20,30,40];

var con = sum.filter(function(e){

  return e>20;

})

结果：[30,40]

some()

功能：对所有元素调用一个测试，只要有一个元素通过，就返回true，否则返回false

实例：

var con = sum.some(function(e){

  return e>20;

})

结果：true

every()

功能：对所有元素调用一个测试函数，只有所有元素通过，才返回true，否则返回false

实例：

var con = sum.every(function(e){

  return e>20;

})

结果：false

reduce()

功能：从左到右依次处理数组中的每个元素，最终累计为一个值

reduce()第一个参数是一个处理函数。该函数接受四个参数，分别是：

用来累计的变量（当前状态），默认为0

数组的当前元素

当前元素在数组中的下标

原数组

reduceRight()

功能：从右到左依次处理数组中的每个元素，最终累计为一个值

6.8 Error对象

JavaScript解析或执行时，一旦发生错误，引擎就会抛出一个错误对象。JavaScript原生提供一个Error构造函数，所有抛出的错误都是这个构造函数的实例。

注：根据语言标准，Error对象的实例必须有meaasge属性，表示出错时的提示信息，其他属性则没有提及。

实例：

var err = new Error();
console.log(err.message);

7、函数

函数：处理某个功能的代码块。

注意：一个函数只能处理一个功能。

7.1 函数的创建

//函数声明
function fun(){}  

//函数表达式(实际上是一个匿名函数)
var fun = function(){} 

//函数构造器(这里的参数中最后一个是方法体，其他的是参数，所有参数都必须是字符串)
var fun = new Function(arg0,arg1,fun_body);

7.2 函数调用

fun('p');

7.3 任意参数的个数

7.3.1 arguments

伪参数对象。只有数组的length属性和数组的索引，没有数组的内置方法，可以直接使用arguments[index] 的方式获取参数值

实例：

function add(){

if(arguments.length == 2) 

  {return arguments[0]+arguments[1]}

}

arguments.length //会返回函数被调用时，收到的参数的数目

实例：

function myFunction(a, b) {

  return arguments.length;

}

7.3.2 function fun(…p){} 动态参数

例：

fun(1,2);

fun(1,3);

函数参数个数：fun.length()

动态参数实例：

function add(...param){
  let sum = 0;

  for(var i= 0 ;i < param.length;i++){
     sum += param[i]
  }
  return sum;
}

7.4 ES6

7.4.1 箭头函数

var fun = ()=>{}

注意：箭头函数允许使用简短的语法来编写函数表达式。

注意：不需要 function 关键字、return 关键字和花括号(只有单句的时候，可去掉花括号)

实例：

//ES5
var x = function(x, y) {
 return x * y;
}

//ES6
const x = (x, y) => x * y;

7.4.2 立即执行函数(自执行匿名函数)

(function(){})() 

(function(){}())

注意：函数体后边有一对()

注意：函数体是函数表达式，不是函数声明

除了()运算符，！，+，-，=等运算符，都能起到立即执行的作用

这些运算符的作用就是将匿名函数(函数声明，但未命名)或函数声明转换为函数表达式，函数体是函数声明的形式，使用运算符将其转换为函数表达式之后就可达到立即执行效果。

实例：

!function(data){
  console.log(data)
}("Hello");

结果： Hello

7.4.3 自执行函数(递归调用)

写法类似以下：

function run(){run()}

var fun = function run(){run()}

(function run(){run()}())

7.4.4 回调函数

主函数调用子函数，把子函数作为参数传递给主函数

7.4.5 闭包

当内部函数被保存到外部时，将会生成闭包函数可以使用函数之外定义的变量

实例：

//简单的闭包
var msg = "Hello!"

function fun(){
  alert(msg);
}

//复杂的闭包
var base = 5;

function sum(x,y){
  function add(){
     return x +y + base;
  }
  return add;
}

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor) //function person()
console.log(Father.prototype.constructor); //function person()
Father.prototype.constructor = Father;     //修正
console.log(Father.prototype.constructor); //function father()
var one = new Father(25);

var man;
(function(){
    function Father(name){
        this.name = name;
    }
    Father.prototype.sayName = function(){
        console.log(this.name);
    }
    man = new Father("Tom");
})();
man.sayName();   //Tom
console.log(Father);   //Father is not defined

因为Father在闭包中，当我们想对Father类添加方法时可以通过

man.constructor.prototype.sayAge = function(age){
    console.log(age);
}
man.sayAge("20");  //20

如果不修正，我们的方法将会添加到Person类，而不是Farther类。

7.4.6 作用域

全局变量：在函数体外声明的变量

局部变量：在函数体内声明的变量，只能在函数体内使用，函数运行完毕，函数体释放

局部变量的优先级比全局变量的优先级高，局部变量会隐藏同名的全局变量

7.4.7 生命周期

开始：被声明时

结束：全局变量在页面关闭时结束

局部变量在函数执行完时结束

8、程序结构

所有的程序语言都有三种程序结构：顺序结构，选择结构，循环结构

8.1 顺序结构

代码从上而下，从左向右依次执行

8.2 选择结构

根据判断条件，有选择的执行

8.2.1 if - else if - else

8.2.2 switch

switch('a'){
  case 'a':
    console.log("a");
    break;
    
  case 'b':
    console.log("b");
    break;
    
  default:
    console.log("else");
    break;
}

8.3 循环结构

循环执行

for(初始化语句;条件判断语句;迭代语句)

while：

//先判断后执行:
while(true){


}

//先执行后判断:
do{


}while(true)

8.4 控制程序执行的关键字

break; //直接跳出当前循环

continue; //结束continue后面的语句，开始下一次循环

8.5 for…in 和 for…of

for…in可以遍历对象

for…of不可以遍历对象

for(a in arr|obj){
  //a表示数组的下标
  console.log(obj[a]);

}

for(a of arr|iterator){
  //a表示遍历的对象
  console.log(a);

}

9、BOM

浏览器对象模型，可以使用这些对象操作浏览器。

9.1 window

窗口对象

9.2 弹窗

open() /close()

status

9.3 计时器

setInterval /setTimeout

9.4 Location

location：(url)位置

9.4.1 location中的属性

location.search:url中的查询参数，从?开始，后面的参数列表，?key=value&key=value

href:

proto:

port:

host:

…

9.4.2 location中的方法

replace()/reload()重新载入新文档/assign()载入一个新文档

9.5 history

history：历史记录

9.5.1 history的方法

forword()/back()/go()

9.5.2 history的属性

length:

navigator:浏览器相关对象信息

appName:

appCodeName:

userLanguage:

…

screen:屏幕，包含屏幕宽度，高度，像素等信息

10、DOM（文档对象模型）

包含两个子接口：Node、Element

NodeName，NodeType，NodeValue

parentNode，childNodes，nextSibling

getElementByID()

getElementsByClassName()

…

querySelector()

querySelectorAll()

createElement()

remove()

removeChild()

replaceChild()

document.body

11、事件

文档事件

表单事件

键盘事件

鼠标事件

多媒体事件

12、Ajax

Ajax即“Asynchronous（异步的） JavaScript And XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。

通过在前台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

12.1 工作原理

相当于在用户和服务器之间添加了一个中间层，全用户操作与服务器响应异步化。

12.1.1 工作流程

*创建请求对象

var xhr = new XMLHttpRequest();

*建立服务器连接

open("get",url);

*向服务器发送请求

send();

*请求成功{

返回响应信息

}

if(readyState==4 && status == 200){

	var res = xhr.responseText;

}

*遍历响应数据

*将数据显示在浏览器上

实例：

//创建请求对象
var xhr = new XMLHttpResquest;
//旧电脑
var xhr = null;
if(XMLHttpRequest){  //如果浏览器支持，可以创建xhr对象
    xhr = new XMLHttpResquest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//打开（建立）服务器连接
open(methods,url[,async(是否异步),userName,password])
//method:get/post/put/delete/options...
//<form method="get/post"></form>
//http 1.0 支持 get/post
//http 更高版本支持 put，delete...
//post请求可以传递文件。
xhr.open("GET",url);
//向服务器发送请求数据
xhr.send([data]);
//监听(等待)服务器响应
xhr.onreadystatechange = function(){  //有0-4个过程，要第4个过程
    //请求成功
    //xhr.status：http响应码（5类）1xx，2xx，3xx，4xx，5xx
    if(xhr.readyState == 4 && xhr.status == 200(请求结束)){
        //响应返回信息(字符串/标签)
        var res = xhr.responseText/xhr.responseXML;
        var data = JSON.parse(res); 
        //进行遍历
        //for/for-in/for-of
        var html="";
        data.forEach(element => {
            html+=`<tr>
            <td>${element.id}</td>
            <td>${element.username}</td>
            <td>${element.email}</td>
            </tr>`
        });

        /*for(x in data){
            html+=`<tr>
            <td>${data[x].id}</td>
            <td>${data[x].username}</td>
            <td>${data[x].email}</td>
            </tr>`
        }*/

        var table = document.getElementsTagName("table")(0);
        table.innerHTML += html;
    }
}

12.2 XMLHttpRequest对象

现在所有的浏览器都支持XMLHttpRequest，用于在后台与服务器交换数据。

创建XMLHttpRequest对象的语法：

var req;
if(window.XMLHttpRequest){
	req = new XMLHttpRequest;
}else{
	req = new ActiveXObject("MicroSoft.XMLHTTP");
}

12.2.1 常见属性

onreadystatechange：存储函数（或函数名），每当readyState的属性发生改变时，就会调用该函数

readyState：存有的XMLHttpRequest的状态从0-4发生变化

responseText：以文本形式返回响应

responseXML：以XML格式返回响应

status：将状态状态返回数字（例如：Not Found 为 404，OK 为 200）

statueText：以字符串形式返回状态（例如：NotFound 或 OK）

12.2.2 重要方法

abort()：取消当前请求

getAllResponseHeaders()：以字符串形式返回完整的HTTP标头集

getResponseHeaders(headerName)：返回制定HTTP标头的值

open(method,URL)：打开指定获取或提交的方法和URL的请求

open(method,URL,async)：与上面相同，但指定是否异步，加了个是否异步的参数

open(method,URL,async,userName,password)：与上面相同，但指定用户名和密码

send(content)：发送获取请求。

setRequestHeader(label,value)：将标签、值对添加到要发送的HTTP标头

12.3 XMLHttpRequest请求

常用的请求类型有 get 和 post ，也有 put 和 delete

post请求可以传递文件。

与post相比，get更简单也更快，在大部分情况下都能用。然而，在以下情况中，请使用post请求：

无法使用缓存文件（更新服务器上的文件或者数据库）

向服务器发送大量数据（post没有数据量的限制）

发送包含未知字符的用户输入时，post比get更稳定也更可靠

12.3.1 get请求特点

*可被缓存

*保留在浏览器历史记录中

*可被收藏为标签

*不应在处理敏感数据时使用

*有长度限制

*只应当用于取回数据

12.3.2 post请求的特点

*会被缓存

*不会保留在浏览器历史记录中

*不能被收藏为书签

*对数据长度没有要求

12.3 XMLHttpRequest响应

HTTP响应是由服务器端发出的，并且服务器需要响应的时间（比网速慢等原因），所以需要监听服务器响应的状态，然后才能进行处理。服务器的响应包括响应状态和响应主体。

响应状态码（5类）：1xx，2xx，3xx，4xx，5xx

响应主体：

responseText ==> 字符串形式的响应数据

responseHTML ==> XML形式的响应数据

13、跨域请求

13.1 同源策略限制

DOM层面的同源策略：

限制了来自不同源的Document对象或Js脚本，对当前document对象的读取或设置某些属性

Cookie 和 XMLHttpRequest层面的同源策略：

禁止Ajax直接发起跨域HTTP请求（其实可以发送请求，结果浏览器拦截，不展示），同时Ajax请求不能携带与本网不同源的Cookie。

同源策略限制非绝对性：

<script>
<img>
<iframe>
<link>
<video>
<audio>

等带有src属性的标签可以从不同的域加载和执行资源。

其他插件的同源策略：

JSONP是一种非官方的跨域数据的交互协议。

14、前端存储

前端存储用户或网站的关键信息

目的：优化用户体验

win7之前的系统中，c盘有一个Cookies文件夹，在这个文件夹中存放用户访问网站的信息文件。

用户在第一次访问网站的时候，把相关信息保存在cookie文件中，下次打开网站，浏览器从这个文件中加载信息，页面加载更快。

开发人员可以设置cookie的失效时间，以此达到数据数据统一的目的。

使用document.cookie对象保存，值是字符串

在cookie中保存多条数据，数据与数据之间使用；间隔开，修改键对应的值的时候，键名相同，值不同即可。

删除键：可以使用exprie指定有效期（失效期（过去的日期）），达到失败期之后，自动删除。

sessionStorage

是html5中新增的一个对象

操作方法和localStorage用法相同

session：客户端和服务器端的会话。客户端和服务器端开始会话的时候，会创建一个session对象，用来保存两端的信息。

注：

localStorage和sessionStorage的异同：

相同点：

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

不同点：

localStorage生命周期是永久，除非用户自己删除
sessionStorage生命周期为当前窗口或标签页，一旦关闭，数据清空

总结：

不同浏览器无法共享localStorage或sessionStorage中的信息。
相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。
注：页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

15、BOM

BOM：Browser Object Module，浏览器对象模型，BOM操作实际上就是使用JS脚本代码操作浏览器，那么浏览器浏览器的功能和信息。

屏幕（Screen），历史记录（History），定位（Location），浏览器信息（Navigator），窗口（Window），框架（Frame）

浏览器是基于一个事件循环的模型，浏览器事件循环原理：

参考地址：https://www.cnblogs.com/wxcbg/p/11040362.html

15.1 window对象

浏览器BOM中最大的对象，包含所有的对象和全局属性

15.1.1 弹出框

alert()； //警告框（常用于确保用户可以得到某些信息）

注意：警告框中无法输出HTML元素

在这里插入图片描述

confirm()；//确认功能的弹窗（确认框通常用于验证是否接受用户操作）

在这里插入图片描述

prompt(); //提示框（常用于提示用户在进入页面前输入某个值）

在这里插入图片描述

15.1.2 Timing事件

window 对象允许以指定的时间间隔执行代码，这些时间间隔称为定时事件。

通过JavaScript使用的有两个关键的方法：

setTimeout(Function,millseconds)

//在等待指定的毫秒数后执行函数。

setInterval(Function,millseconds)

//等同于setTimeout(),但持续重复执行函数。

//setTimeout()和setInterval()都属于HTML DOM Window对象的方法。

setInterval();

实例：

//setInterval(callback,timeout);
//callback{Function}：处理函数
//timeout{Number}:间隔时间（毫秒计）
var a =0;
var i = setInterval(function(){
    console.log(new Date());
    a++;
    if(a==3){
        //清除计时器
		clearInterval(i);
    }
},1000);

//toLocaleTimeString():转换成本地时间
var date = new Date();
console.log(date.toLocaleDateString());
//toLocaleDateString():转换成本地日期
congsole.log(date.toLocaleTimeString());

setTimeout();

setTimeout(handler,timeout)

参数和setInterval函数中的参数意义相同

timeout毫秒后执行一次处理器

这个函数可以模拟异步操作

异步操作的详细原理：

参考地址：https://www.cnblogs.com/littledu/articles/2607211.html

异步和同步的区别：

同步：一步一步执行，上边的代码执行完才执行下边的代码（在主线程上排队执行的任务，只有前边的任务执行完毕，才能执行下一个任务）

异步：不进入主线程，而进入“任务队列”的任务，只有等主线程任务执行完毕，“任务队列”开始通知主线程，请求执行任务，该任务才会进入主线程执行。

实例：

<button onclick="setTimeout(myFunction, 3000)">试一试</button>

<script>
function myFunction() {
    alert('Hello');
 }
</script>

Promise

Promise是异步编程的一种解决方案，可以替代传统的解决方案–回调函数和事件。

在ES6中引入了Promise对象，解决异步编程中遇到的问题，ES6统一了用法，并原生提供了Promise对象。

作为对象，Promise有以下两个特点：

（1）对象的状态不受外界影响。

（2）一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。

在Promise中主要使用回调函数解决异步编程。

resolve：代码执行过程中没有出错，可以使用resolve接收处理的结果，把这个结果返回给Promise原型链上的定义的then函数。

reject：代码执行过程中出错，可以使用reject接收错误信息，这个错误信息可以返回给Promise原型链上的定义的then函数，也可以使用catch函数。

then函数返回是一个Promise对象

Promise(function(resolve,reject){})

15.2 Navigator浏览器信息

包含浏览器的编码信息，浏览器名称，浏览器版本等。

可以用来进行环境检测。IE8（IE9）以下的浏览器不支持某些JS对象。

console.log(navigator.appName);
console.log(navigator.appVersion);

15.3 location对象

对于location的操作更多的是属性操作

href：当前文档的地址，完整的URL（可以是绝对地址，也可以是相对地址）

相对地址的写法：以/，./，../开始的地址

/：项目的根目录

./：当前文件的同级目录

../：当前文件的父级目录

url各部分信息：

协议名（protocol）：常见的网络协议有http，https

主机名（域名host）：也可以是IP地址

端口号（port）：在计算机里边有65535个端口号，一个端口号对应服务器上的一个应用。端口也是计算机与外部网络交流的出入口。windows系统中有一个IIS服务，默认的端口号是80.

访问路径（pathname）：在地址中以/开始的部分。

查询参数列表（search）：以？开始，后面是传递给服务器的参数列表

哈希值：hash值以 # 开始，定位到页面的某个位置

例：

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=javascript

函数：

assign(string:url) 载入指定文档，功能上和href相似

reload()：重新加载（刷新）当前文档

replace(string:url) 使用指定文档替换当前文档

15.4 History对象

对历史记录的操作

对象属性：

length 记录数

对象方法：

forword()：下一个记录

back()：下一个记录

go(Number)：-1（上一条记录） 1（下一条记录）

15.5 Screen对象

console.log(Screen.width,Screen.height);