js复习笔记day8
2017-08-22 14:02
411 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【JS复习笔记】02 对象与函数
- js复习笔记day6
- js复习笔记day7
- 【JS复习笔记】06 方法
- js复习笔记day2
- 笔记：js疑难复习
- js复习笔记day4
- 【JS复习笔记】03 继承
- js复习笔记(忘记tbodies)
- 【JS复习笔记】01 基本语法
- js复习笔记day5
- javascript复习笔记(一)js基础，基本语法，数据类型，控制流程
- 【JS复习笔记】07 复习感想
- 【JS复习笔记】04 数组
- js复习笔记
- 【笔记】JS事件模型再复习之笔记
- 【JS复习笔记】05 正则表达式
- 2017.7.13 学习笔记 js复习及Servlet建包的方法
- js复习笔记day3
- JS中的DOM相关知识复习笔记