Javascript-BOM

Posted on | In , | Visitors:

This is my blog.

BOM: 处理浏览器窗口和框架，提供与浏览器交互的方法和接口

Window、Navigator、Screen、History、Location都是对象

Window

全局变量是 window 对象的属性
全局函数是 window 对象的方法
甚至 HTML DOM 的 document 也是 window 对象的属性

window尺寸：

1
2
3
4
5
6
7
8
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"

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

属性

window.innerWidth 窗口的宽
window.innerHeight 窗口的高
history
location
screen
navigator

方法

setInterval()
clearInterval()
setTimeout()
clearTimeout()
Number()
String()
Boolean()
alert()
confirm()
prompt()

screen

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

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

属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
screen.colorDepth - 色彩深度
screen.pixelDepth -色彩分辨率

location

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

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

属性：
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 属性返回当前页面的 URL

方法

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

history

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

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

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

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

除此之外可以用 history.go()

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

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

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

属性：

1
2
3
4
5
6
7
8
9
10
<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>

注：

  1. navigator 数据可被浏览器使用者更改
  2. 一些浏览器对测试站点会识别错误
  3. 浏览器无法报告晚于浏览器发布的新操作系统

弹窗

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

警告框

警告框经常用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续进行操作

语法：
window.alert("sometext");

window.alert()方法可以不带上window对象，直接使用alert()方法

确认框

确认框通常用于验证是否接受用户操作

当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作
当你点击 “确认”, 确认框返回 true， 如果点击 “取消”, 确认框返回 false
语法：
window.confirm("sometext");

window.confirm()方法可以不带上window对象，直接使用confirm()方法

提示框

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

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

如果用户点击确认，那么返回值为输入的值；如果用户点击取消，那么返回值为 null
语法：
window.prompt("sometext","defaultvalue");

default value是默认输入值，可不填

window.prompt() 方法可以不带上window对象，直接使用prompt()方法

其他

弹窗使用反斜杠 + “n”(\n)来设置换行

计时事件

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

方法：

  1. window.setInterval(“javascript function”,milliseconds);

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

    window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()
    setInterval() 第一个参数是函数（function），第二个参数间隔的毫秒数
    注意: 1000 毫秒是一秒

  2. window.clearInterval(intervalVariable)

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

    window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()

    要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量

  3. myVar= window.setTimeout(“javascript function”, milliseconds);

    在指定的毫秒数后执行指定代码

  4. window.clearTimeout(timeoutVariable)

    如果setTimeout函数还未被执行，此方法用于停止执行setTimeout()方法的函数代码

    window.clearTimeout() 方法可以不使用window 前缀

    要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
	document.getElementById('txt').value=c;
	c=c+1;
	t=setTimeout(function(){timedCount()},1000);
}
function doTimer(){
	if (!timer_is_on){
		timer_is_on=1;
		timedCount();
	}
}
function stopCount(){
	clearTimeout(t);
	timer_is_on=0;
}
</script>
</head>
<body>
	
<form>
<input type="button" value="开始计数!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="停止计数!" onclick="stopCount()" />
</form>
<p>
单击开始计数按钮，按下时开始计数，输入框将从0开始一直计数。单击停止计数按钮，按下时停止计数，再次点击开始计数按钮，又再次开始计数。
</p>
</body>
	
</html>

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

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

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

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

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

当浏览器从服务器上请求 web 页面时， 属于该页面的 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=/";

读取：
var x = document.cookie;

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

修改：

修改 cookie 类似于创建 cookie，通过新赋值，将其覆盖

一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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("欢迎 " + user + " 再次访问");
	}
	else {
		user = prompt("请输入你的名字:","");
  		if (user!="" && user!=null){
    		setCookie("username",user,30);
    	}
	}
}
</script>
</head>
	
<body onload="checkCookie()"></body>
	
</html>

后记

今天小黄鸡问了一个问题，说是应用到业务中的

和平常的题不一样的感觉

然后写了个类似暴力的东西

但是对于python来说，发现过了一个寒假

退化了许多

emmm……继续加油啦～

转载请注明出处，谢谢。

愿 我是你的小太阳

买糖果去喽