浏览器能做什么
浏览器负责执行javascript代码,脚本因此得以访问客户端环境。比如:取得浏览器宽度和高度,类似闹钟的计时机制,对cookie的访问…等等
定时器
在特定时间过去后,触发一段javascript代码
Cookie
- 如果javascript代码在客户机运行,它为什么跟服务器有关?
它不会直接与网络服务器有关系,因为它确实是在客户机行独立运行的,但是它经常用于拦截从服务器到浏览器的网络数据,也可以编写向网站请求信息的脚本,这种技术成为Ajax。
拆解定时器
定时器有两个关键:
- 建立时间延迟
- 让定时器知道时限来临时,运行程序代码
设定时间
制作(单次)定时器的javascript内置函数被称为setTimeout()
。函数需要两项信息,分别是时间延迟和定时器停止时欲运行的程序代码。
如:timer code+ timer delay
setTimeout("alert('wake up!');",6000);
那么如何重复运行呢?
设定间隔定时器,调用setInterval()
。
var timerID=setInterval("alert(wake up!);",6000);
停用间隔定时器,调用clearInterval()
clearInterval(timerID);
这就是为什么要用一个timerID来记录间隔计时器的原因。
获取客户端尺寸
由于手持设备和计算机尺寸差异,可能会使得我们某些图片太大,这里我们就需要以document对象的特性来取得客户端窗口的宽度等。
document对象的body.clientWidth与body.clientHeight特性里存储了客户端窗口宽度与高度。
配合页面调整大小:
function resizeRock() {
document.getElementById("rockImg").style.height = (document.body.clientHeight - 100) * 0.9;
}
在html这样用:
<body onload="resizeRock(); greetUser();" onresize="resizeRock();">
<div style="margin-top:100px; text-align:center">
<img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
</div>
</body>
cookie延长脚本的生命周期
不需要用服务器存储琐碎的信息,例如用户的名称。
虽然服务器的确是一个持久存储数据的选择,但是它可能被过度琐碎的数据折磨。
所以:cookie提供了便利的持久性。
cookie记录名称与数据值,但也可能过期。
cookie可以设定有效日期,时限一到,则销毁cookie。
userName=Paul Expires 3/9/2009
名称 =数据值 过期时间
cookie以长文本字符串的形式存储于用户的计算机里,该字符串的内容与网站相关,分号;
区分各个cookie。
读取readCookie()
、写入writeCookie()
、清除eraseCookie
。下面是关于cookie的几个函数,有时候最聪明的处理方式在于借用其他人已经写好的成果,并根据需要取用函数和修改函数。
function writeCookie(name, value, days) {
//days表示可以存在的天数,后面的date.setTime中days的运算也是表示了days天的毫秒数。
// By default, there is no expiration so the cookie is temporary
var expires = "";
// Specifying a number of days makes the cookie persistent
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
// Set the cookie to the name, value, and expiration date
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
// Find the specified cookie and return its value
var searchName = name + "=";
var cookies = document.cookie.split(';');
for(var i=0; i < cookies.length; i++) {
var c = cookies[i];
while (c.charAt(0) == ' ')
c = c.substring(1, c.length);
if (c.indexOf(searchName) == 0)
return c.substring(searchName.length, c.length);
}
return null;
}
function eraseCookie(name) {
// Erase the specified cookie
writeCookie(name, "", -1);
}
因为借用了别人的文件,cookie.js,所以它需要被导入到我们的html页面中:
只需要插入一个新的<script>
:
<script tyoe="text/javascript" src="cookie.js"></script>
能重复使用的代码存成了外部文件。
我们在html使用如下:
var userName;
function greetUser() {
if (navigator.cookieEnabled)//判断是否能够使用cookie
userName = readCookie("irock_username");
if (userName)
alert("Hello " + userName + ", I missed you.");
else
alert('Hello, I am your pet rock.');
}
- 我怎么知道cookie的名字name是否独特unique?
在网页内部,它是独特的(即页面内名字不重复)。在网页外部(众多网站中,可以重复),网页实际上是cookie名称的一部分。 - cookie这么方便,为什么还要使用服务器?
因为,有些数据是敏感的。