这是我参与「第五届青训营」伴学笔记创作活动的第 10 天

0 前面的话

今天就写点JavaScript的知识吧！知识点内容可能比较散，仅记录一下而已。这里的学习参考了部分菜鸟教程内容，如有需要，链接：www.runoob.com/js/js-windo…

1 正文

JS浏览器BOM

浏览器对象模型（Browser Object Model (BOM)）

window.location.assign(url) ：加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

window.location.replace(url) ：通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

Window History

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同

除此之外可以用 history.go() 这个方法来实现向前，后退的功能。

function a(){
    history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
}
function b(){
    history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
}

history.go() 这个方法来实现刷新的功能。

function a(){
    history.go(0);  // go() 里面的参数为0,表示刷新页面
}

JavaScript 计时事件

在 JavaScript 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。 clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。 clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

// 每三秒弹出 "hello" ：
// window.setInterval("*javascript function*",*milliseconds*);
setInterval(function(){alert("Hello")},3000);

<p id="demo"></p> 
<button onclick="myStopFunction()">停止</button> 
<script> 
    var myVar=setInterval(function(){myTimer()},1000); 
    function myTimer(){ 
    var d=new Date(); 
    var t=d.toLocaleTimeString(); 
    document.getElementById("demo").innerHTML=t; 
} 
function myStopFunction(){ 
    clearInterval(myVar); 
} 
</script>


// myVar= window.setTimeout("*javascript function*", *milliseconds*);
// 等待3秒，然后弹出 "Hello":
setTimeout(function(){alert("Hello")},3000);

var myVar; 
function myFunction() { 
    myVar=setTimeout(function(){alert("Hello")},3000); 
} 
function myStopFunction() { 
    clearTimeout(myVar); 
}

JavaScript Cookie

Cookie 用于存储 web 页面的用户信息。Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储，如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

JavaScript 框架（库）

一些广受欢迎的 JavaScript 框架：

jQuery
Prototype
MooTools

所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理。

字节青训营前端青训营笔记「10」 | 青训营笔记