js复习笔记day8

来源：互联网发布：剑三如何导入捏脸数据编辑：程序博客网时间：2024/06/18 00:39

JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM)使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型 (BOM)

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

window.document.getElementById("header");document.getElementById("header");

Window 尺寸

var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;

window.open() -打开新窗口
window.close() -关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -调整当前窗口的尺寸

JavaScript Window Screen

window.screen 对象包含有关用户屏幕的信息。

Window Screen

screen.availWidth -可用的屏幕宽度
screen.availHeight -可用的屏幕高度

JavaScript Window Location

window.location 对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。

Window Location

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口（80 或 443）

location.protocol 返回所使用的 web 协议（http:// 或 https://）

Window Location Href

location.href 属性返回当前页面的 URL。

<script>document.write(location.href);</script>

Window Location Pathname

location.pathname 属性返回 URL 的路径名。

Window Location Assign

location.assign() 方法加载新的文档。

<html><head><script>function newDoc()  {  window.location.assign("http://www.w3cschool.cc")  }</script></head><body><input type="button" value="Load new document" onclick="newDoc()"></body></html>

JavaScript Window History

window.history 对象包含浏览器的历史。

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

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

一些方法：

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

<script>function goBack()  {  window.history.back()  }</script>

JavaScript Window Navigator

window.navigator 对象包含有关访问者浏览器的信息。

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

<div id="example"></div> <script> txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>"; txt+= "<p>浏览器名称: " + navigator.appName + "</p>"; txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>"; txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>"; txt+= "<p>硬件平台: " + navigator.platform + "</p>"; txt+= "<p>用户代理: " + navigator.userAgent + "</p>"; txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt; </script>

JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

alert("你好，我是一个警告框！");

确认框

<script>function myFunction(){var x;var r=confirm("按下按钮!");if (r==true){x="你按下了\"确定\"按钮!";}else{x="你按下了\"取消\"按钮!”;//这是显示在页面上的}document.getElementById("demo").innerHTML=x;}</script>

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

<script>function myFunction(){var x;var person=prompt("请输入你的名字","Harry Potter111");//默认在输入框内的值if (person!=null && person!=""){    x="你好 " + person + "! 今天感觉如何?";    document.getElementById("demo").innerHTML=x;}}</script>

JavaScript 计时事件

JavaScript 一个设定的时间间隔之后来执行代码，我们称之为计时事件

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

setInterval() 和 setTimeout()是 HTML DOM Window对象的两个方法。

setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

setInterval() 第一个参数是函数（function）。

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

setInterval(function(){alert("Hello")},3000);//每三秒弹出 "hello"

<script>var myVar=setInterval(function(){myTimer()},1000);function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;}</script>

如何停止执行

clearInterval() 方法用于停止 setInterval()方法执行的函数代码。

<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>

JavaScript Cookie

Cookie 用于存储 web 页面的用户信息。

什么是 Cookie？

Cookie 是一些数据, 存储于你电脑上的文本文件中。

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

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

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

Cookie 以名/值对形式存储

username=John Doe

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

使用 JavaScript 创建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 2013 12:00:00 GMT";

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

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

使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

注：document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

使用 JavaScript 修改 Cookie

在 JavaScript 中，修改 cookie类似于创建 cookie

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

使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

Cookie 字符串

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。

即使您在 document.cookie 中写入一个完整的 cookie字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie，旧的 cookie不会被覆盖。新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：

cookie1=value; cookie2=value;

JavaScript Cookie 实例

在以下实例中，我们将创建 cookie 来存储访问者名称。

首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie中。

访问者下一次访问页面时，他会看到一个欢迎的消息。

在这个实例中我们会创建 3 个 JavaScript函数:

设置 cookie 值的函数
获取 cookie 值的函数
检测 cookie 值的函数

设置 cookie 值的函数

首先，我们创建一个函数用于存储访问者的名字

function setCookie(cname,cvalue,exdays){  var d = new Date();  d.setTime(d.getTime()+(exdays*24*60*60*1000));  var expires = "expires="+d.toGMTString();  document.cookie = cname + "=" + cvalue + "; " + expires;}

函数解析：

以上的函数参数中，cookie 的名称为 cname，cookie的值为 cvalue，并设置了 cookie 的过期时间 expires。

该函数设置了 cookie 名、cookie值、cookie过期时间。

获取 cookie 值的函数

function getCookie(cname){  var name = cname + "=";  var ca = document.cookie.split(';');  for(var i=0; i<ca.length; i++)   {    var c = ca[i].trim();    if (c.indexOf(name)==0) return c.substring(name.length,c.length);  }  return "";}

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><head><script>function setCookie(cname,cvalue,exdays){var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000));var expires = "expires="+d.toGMTString();document.cookie = cname+"="+cvalue+"; "+expires;}function getCookie(cname){var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++) {var c = ca[i].trim();if (c.indexOf(name)==0) return c.substring(name.length,c.length);}return "";}function checkCookie(){var user=getCookie("username");if (user!=""){alert("Welcome again " + user);}else {user = prompt("Please enter your name:","");  if (user!="" && user!=null){    setCookie("username",user,30);    }}}</script></head><body onload="checkCookie()"></body>

阅读全文

0 0