这次还是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="加载新文档" οnclick="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" οnclick="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>