您的位置：首页 > Web前端 > JavaScript

JavaScript学习笔记（三）BOM

2014-03-16 16:47 453 查看

这次还是W3SCHOOL上的内容整理，总觉得学东西忘得快，用自己的话整理一遍、复述一遍会好很多。代码也是来自W3SCHOOL。

-BOM（Browser Object Model），浏览器对象模型。

-这个模型的作用是：实现JavaScript与浏览器的交互——简而言之，我们可以在JS中利用BOM中的各种对象获得浏览器的一些属性（比如得到浏览器的长宽之类的）。

-下面就来介绍BOM中的各种浏览器对象;

Window 对象

-Window对象表示【浏览器窗口】，所有JS的全局对象、全局函数、全局变量均自动成为window对象的成员（全局变量是window对象的属性；全局函数是window对象的方法）DOM的document也是window对象的属性。

得到window的尺寸：（三种方法分别针对不同的浏览器）

-使用示例：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
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="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"
</script>

</body>
</html>

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

WindowScreen对象

-window.screen对象含有与【屏幕】有关的信息

-使用这个对象的时候，可以用window.screen，也可以直接写screen

screen.availWidth - 可用的屏幕宽度，返回用户屏幕的宽度（以像素为单位；减去任务栏等界面特性）
screen.availHeight - 可用的屏幕高度

-使用示例：

<!DOCTYPE html>
<html>
<body>

<script>

document.write("可用高度：" + screen.availHeight);//记住：JS可以放在head里也可以放在body里。head里面是函数和变量的定义，在body里面是让它做实际的动作

</script>

</body>
</html>

WindowLocation对象

-window.location对象含有与【当前页面地址URL】有关的信息，可以用于浏览器重定向到新的页面

-使用这个对象的时候，可以用window.location，也可以直接写location

location.hostname - 返回 web 主机的域名
location.pathname - 返回当前页面的路径和文件名
location.port - 返回 web 主机的端口（80 或 443）
location.protocol - 返回所使用的 web 协议（http:// 或 https://）
location.href - 返回当前页面的【URL】 //如返回结果：http://www.w3school.com.cn/js/js_window_location.asp
location.pathname - 返回当前URL的【路径名】 //如返回结果：/js/js_window_location.asp

以上属性的使用示例：参见screen对象的那段代码。把screen.availHeight改成相应属性即可

location.assign() - 加载一个新文档

使用示例：

<!DOCTYPE html>
<html>
<head>
<script>
function newDoc()
{
window.location.assign("http://www.w3school.com.cn")
}
</script>
</head>
<body>

<input type="button" value="加载新文档" onclick="newDoc()">

</body>
</html>

//点击“加载新文档”按钮，触发newDoc()函数；并在当前页面加载http://www.w3school.com.cn网页。

WindowHistory属性

-window.history对象含有与【浏览器历史】有关的信息，可以用于浏览器"前进"或者“后退”跳转
-使用这个对象的时候，可以用window.history，也可以直接写history

history.back() - 后退
history.forward() - 前进

使用示例：

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

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

//点击“Back”按钮，浏览器后退到之前的页面

WindowNavigator属性

-window.history对象含有与【用户的浏览器】有关的信息，可以得到诸如浏览器名称、版本、运行平台等等（但是navigator对象的数据可能会被更改，且实时性不良，因此不应被用于检测浏览器版本）
-使用这个对象的时候，可以用window.navigator，也可以直接写navigator
-使用示例：

<!DOCTYPE html>
<html>
<body>
<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

</body>
</html>

PopupAlert-三种消息框

- 消息框：都是在head里面写函数，在body的input button的onclick属性调用这个函数

警告框

(点击确定按钮才能继续进行操作)：

alert("文本") 带折行的话，在{ }中加“”+‘\n’+“”

确认框

(如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false)：

var r=confirm("文本")

if(r==true) //按下了确认

{alert(....)}

else

{alert(....)}

提示框

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

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

var r=prompt("PLEASE INPUT YOUR NAME", "luodabao")//后面的是文本框里的默认值

if(r != "")
document.write("hello "+r+" how r u")

计时

- 通过JS的计时功能，可以在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行（被称为“计时事件”）

setTimeout() - 设定在未来的什么时候执行代码

vart= setTimeout("javascript语句", 毫秒) //指定多少毫秒之后执行这段javascript语句

clearTimeout() - 取消setTimeout()的作用

clearTimeout( t ) //注意这里的参数是setTimeout()赋给的变量

-使用示例：

<html>

<head>
<script type="text/javascript">
var c=0
var t

function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)//1000毫秒之后执行timedCount()函数，并将这个动作赋给名为t的setTimeout变量
}

function stopCount()
{
clearTimeout(t)//利用setTimeout变量t，取消计时动作
}
</script>
</head>

<body>
<form>
<input type="button" value="开始计时!" onClick="timedCount()">//执行timedCount()函数
<input type="text" id="txt">
<input type="button" value="停止计时!" onClick="stopCount()">//执行stopCount()函数
</form>
</body>

</html>

Javascript Cookies

- cookie用于识别用户。

- cookie是存储于用户计算机中的变量。当同一台计算机通过浏览器请求某个页面时，【就会发送这个cookie】。JS可用于创建和取回cookie的值。

- W3SCHOOL上的这几个例子举得很不错：

名字 cookie

当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。

密码 cookie

当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

日期 cookie

当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

-使用示例：（这个例子是这样的：第一次打开这个页面的时候，会弹出一个prompt提示框，让你输入姓名（你的姓名被存储在cookie中）。当你再次打开这个页面时，会弹出alert，“welcome again XXX!”而这个XXX是从cookie中取回的、你的姓名）

<html>
<head>
<script type="text/javascript">

//以下函数用来检验是否已经设置了cookie
function getCookie(c_name)
{
if (document.cookie.length>0)//若document.cookie对象中存有cookie
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1 //cookie从哪里开始
c_end=document.cookie.indexOf(";",c_start)//cookie到哪里结束
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))//从document.cookie中截取字符串；返回cookie：首、尾
}
}
return ""//找不到我们需要的cookie 返回空字符串
}

//以下函数用来创建一个含有cookie名称、值、过期时间的document.cookie
function setCookie(c_name,value,expiredays)//传入参数：cookie名称、值、过期天数
{
var exdate=new Date()//创建时间对象，时间为当前时间
exdate.setDate(exdate.getDate()+expiredays)//当前时间+过期天数=该cookie过期的日期
document.cookie=c_name + "=" + escape(value) +//cookie名称和cookie值
((expiredays==null) ? "" : ";expires=" + exdate.toGMTString())//cookie过期日期
}

//以下函数的作用：如果cookie已设置 则显示欢迎词；否则显示提示框 要求用户输入姓名
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript js 脚本语言

相关文章推荐

新的分享

章节导航