素材解释：
{
鼠标不点击宠物5秒（为了便于观察，所以设定的时间短）后，宠物狗会发呆。
}
这一次是对第一次做的宠物进行优化，当鼠标点击后的某一时间后，宠物会发生表情上的变化。
单次定时器：setTimeout( , );有两个参数，第一个参数是要要执行的代码部分，第二个参数是延迟时间。*间隔定时器:setInterval( , );
*必以毫秒为指定定时器时限的单位，1毫秒为千分之一秒
*网页元素具有设定样式的style对象，width，height都是样式
*客户端窗口是浏览器窗口的一部分，只负责呈现网页，其他不关它的事
*你可以透过document对象的body.clientWidth与body.clientHeight特性，取得客户端窗口的宽与高。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>i-Rock</title>
<script type="text/javascript">
function touchRock(){
var userName = prompt("What is your name?","Enter your name here.");
if(userName) {
alert("It is good to meet you, " + userName + ".");
document.getElementById("rockImg").src = "images/d_xingfen.png";
}
}
setTimeout("document.getElementById('rockImg').src ='images/d_fadai.png';",2*60*1000);
</script>
</head>
<body onLoad="alert("Hello, I am your pet rock.");">
<div style="margin-top:100px; text-align:center">
<img id="rockImg" src="images/d_guaiqiao.png" alt="iRook" style="cursor:pointer" onclick="touchRock()" />
</div>
</body>
</html>
onresize与onclick均由用户触发，但onload则不然。
onresize可以解决使iRock.html网页不只在网页首次载入时配合浏览器的客户端窗口而调整大小，还会在用户改变浏览器大小时一起修正。
---调整后的code---
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>i-Rock</title>
<script type="text/javascript">
var userName;
function greetUser(){
alert("Hello, I am your pet rock.");
}
function touchRock(){
if(userName) {
alert("I like the attention," + userName +".Thank you.");
document.getElementById('rockImg').src ='images/d_tiaopi.png';
}
else{
userName = prompt("What is your name?","Enter your name here.")
if(userName){
alert("It is good to meet you, " + userName + ".");
}
document.getElementById("rockImg").src = "images/d_xingfen.png";
}
setTimeout("click_dog()",2*5*1000);
}
function click_dog(){
document.getElementById('rockImg').src ='images/d_fadai.png';
}
function resizeRock(){
document.getElementById("rockImg").style.height=(document.body.clientHeight-50)*0.9;
}
</script>
</head>
<body onLoad=" resizeRock();greetUser()" onResize="resizeRock()">
<div style="margin-top:100px; text-align:center">
<img id="rockImg" src="images/d_guaiqiao.png" alt="iRook" style="cursor:pointer" onclick="touchRock()" />
</div>
</body>
</html>
但是当重启浏览器或者电脑时候，宠物就会忘记它的主人。。。
cookie延长脚本的生命周期
利用cookie持久存储的网页数据：（用户ID，购物车内容，住址，语言）
我们在iRock遇到的问题，专有名词-持久性。
有时候，我们真的需要不会消失的数据。浏览器的cookie提供了持久地储存数据，让数据比脚本生命周期更长的方式。
还好有cookie指示指令。
读取，清楚cookie；
// JavaScript Document
//cookie3个协助函数
function writeCookie(name, value, days){
var expires = "";
if(days){
var date = new Date();
date.setTime(date.getTime()+(days * 24 * 60 * 60 *1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" +value + expires + "; path=/";
}
function readCookie(name){
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 earseCookie(name){
writeCookie(name,"",-1);
}
*cookie影响浏览器的安全性
*cookie是一块文本数据，由用户计算机上的浏览器下令存储
*cookie让脚本存储的数据能存活超过单一网络session
*每个cookie都有有效日期，超过期限，浏览器随即清除cookie
*把脚本移动到外部文件，是个让程序更容易重复利用和维护的便利方式
*cookie不能访问用户的硬盘或散布病毒，但可以存储输入网页上的个人数据