从零开始的毕设--JavaScript-浏览器探索

浏览器能做什么

浏览器负责执行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这么方便，为什么还要使用服务器？
因为，有些数据是敏感的。