论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > javascript教程教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

JavaScript入门教程(五)

文章类别:javascript教程 | 发表日期:2008-8-8 13:12:15


文章添加日期:2005-9-18     观看人数:1274

 



使用框架和Cookies


使用框架


  在讲述 window 对象的时候,我们提到过,一个框架内的网页也是 window 对象,也就是说,Frame 对象也是 window
对象。用最容易理解的话说,每一个 HTML 文件占用一个 window 对象,包括定义框架的网页(“框架网页”)。在 IE 里用“<iframe>”标记在文档中插入的框架也是
window 对象,但是用“包含网页”的方法(在 HTML 中显示为“<!--webbot bot="include" ...-->”)读取的 HTML
就不占用独自的 window 对象。每一个框架都是包含它的页的 window 对象的一个子对象(不知道应该叫“属性”不该),要引用它,可以用以下几种方法之一:



window.frames[x]

window.frames['frameName']

window.frameName



  其中,x 指的是该 window 对象中指定的第几个框架,与其它数组一样,x 也是从零开始的。frameName
指的是该框架的名字,跟<frame>里的“name”属性一样。


  如果使用 window.frameName 指定的 window
对象又是一个框架网页,那么引用它的框架的方法:window.frameName.subFrameName。以此类推。


  要注意的时,无论在何处,引用“window”对象所返回的,都是“当前”window 对象。如果要访问其它 window 对象,就要用到 parent
和 top 属性。parent 指的是“父级”window 对象,也就是包含当前 window 对象的框架网页;top 指的是窗口最顶端的 window 对象。


  使用框架还要密切留意你的 JavaScript 中定义的全局变量和自定义函数。它们都有它们的所属——所在的 window
对象。要引用其它框架中的全局变量或自定义函数,都要用“窗口对象.框架对象[.框架对象…].全局变量或自定义函数”这种很烦的方法。


  以上这个问题在建立连接时经常会被忽略:如果在<head>中定义了一个默认目标窗口(<base target="...">),在<a
href="javascript:...">中,要知道输入的 JavaScript 语句是在默认目标窗口中运行的,必要时加一些“parent”“top”属性。


使用 Cookies


  我们已经知道,在 document 对象中有一个 cookie 属性。但是 Cookie 又是什么?“某些 Web
站点在您的硬盘上用很小的文本文件存储了一些信息,这些文件就称为 Cookie。”—— MSIE 帮助。一般来说,Cookies 是 CGI 或类似,比 HTML
高级的文件、程序等创建的,但是 JavaScript 也提供了对 Cookies 的很全面的访问权利。


  在继续之前,我们先要学一学
Cookie 的基本知识


  每个 Cookie 都是这样的:<cookie名>=<值>


  <cookie名>的限制与 JavaScript 的命名限制大同小异,少了“不能用 JavaScript 关键字”,多了“只能用可以用在 URL
编码中的字符”。后者比较难懂,但是只要你只用字母和数字命名,就完全没有问题了。<值>的要求也是“只能用可以用在 URL 编码中的字符”。


  每个 Cookie 都有失效日期,一旦电脑的时钟过了失效日期,这个 Cookie 就会被删掉。我们不能直接删掉一个
Cookie,但是可以用设定失效日期早于现在时刻的方法来间接删掉它。


  每个网页,或者说每个站点,都有它自己的 Cookies,这些 Cookies
只能由这个站点下的网页来访问,来自其他站点或同一站点下未经授权的区域的网页,是不能访问的。每一“组”Cookies 有规定的总大小(大约 2KB
每“组”),一超过最大总大小,则最早失效的 Cookie 先被删除,来让新的 Cookie“安家”。


  现在我们来学习使用
document.cookie 属性


  如果直接使用 document.cookie 属性,或者说,用某种方法,例如给变量赋值,来获得 document.cookie
的值,我们就可以知道在现在的文档中有多少个 Cookies,每个 Cookies 的名字,和它的值。例如,在某文档中添加“document.write(document.cookie)”,结果显示:



name=kevin; email=kevin@kevin.com; lastvisited=index.html



这意味着,文档包含 3 个 Cookies:name, email 和 lastvisited,它们的值分别是 kevin,
kevin@kevin.com 和 index.html。可以看到,两个 Cookies 之间是用分号和空格隔开的,于是我们可以用
cookieString.split('; ') 方法得到每个 Cookie 分开的一个数组(先用 var cookieString =
document.cookie)。


  设定一个 Cookie 的方法是对 document.cookie 赋值。与其它情况下的赋值不同,向 document.cookie
赋值不会删除掉原有的 Cookies,而只会增添 Cookies 或更改原有 Cookie。赋值的格式:



document.cookie = 'cookieName=' + escape('cookieValue')

     + ';expires=' + expirationDateObj.toGMTString();



是不是看到头晕了呢?以上不是粗体字的地方是要照抄不误的,粗体字是要按实际情况做出改动的。cookieName 表示 Cookie
的名称,cookieValue 表示 Cookie 的值,expirationDateObj
表示储存着失效日期的日期对象名,如果不需要指定失效日期,则不需要第二行。不指定失效日期,则浏览器默认是在关闭浏览器(也就是关闭所有窗口)之后过期。


  看到了上面的一些下划线了么?这些是应该注意的地方。

  首先 escape() 方法:为什么一定要用?因为 Cookie 的值的要求是“只能用可以用在 URL
编码中的字符”。我们知道“escape()”方法是把字符串按 URL 编码方法来编码的,那我们只需要用一个“escape()”方法来处理输出到 Cookie
的值,用“unescape()”来处理从 Cookie 接收过来的值就万无一失了。而且这两个方法的最常用途就是处理 Cookies。其实设定一个 Cookie
只是“document.cookie = 'cookieName=cookieValue'”这么简单,但是为了避免在 cookieValue 中出现 URL
里不准出现的字符,还是用一个 escape() 好。

  然后“expires”前面的分号:注意到就行了。是分号而不是其他。

  最后 toGMTString() 方法:设定 Cookie 的时效日期都是用 GMT 格式的时间的,其它格式的时间是没有作用的。


  现在我们来实战一下。设定一个“name=rose”的 Cookie,在 3 个月后过期。



var expires = new Date();

expires.setTime(expires.getTime() + 3 * 30 * 24 * 60 * 60 * 1000);

/*   三个月 x 一个月当作 30 天 x 一天 24 小时

   x 一小时 60 分 x 一分 60 秒 x 一秒 1000 毫秒 */

document.cookie = 'name=rose;expires=' + expires.toGMTString();



为什么没有用 escape() 方法?这是因为我们知道 rose 是一个合法的 URL 编码字符串,也就是说,'rose' ==
escape('rose')。一般来说,如果设定 Cookie 时不用 escape(),那获取 Cookie 时也不用 unescape()。


  再来一次:编写一个函数,作用是查找指定 Cookie 的值。



function getCookie(cookieName) {

  var cookieString = document.cookie;

  var start = cookieString.indexOf(cookieName + '=');

  // 加上等号的原因是避免在某些 Cookie 的值里有

  // 与 cookieName 一样的字符串。

  if (start == -1) // 找不到

    return null;

  start += cookieName.length + 1;

  var end = cookieString.indexOf(';', start);

  if (end == -1) return unescape(cookieString.substring(start));

  return unescape(cookieString.substring(start, end));

}



这个函数用到了字符串对象的一些方法,如果你不记得了(你是不是这般没记性啊),请快去查查。这个函数所有的 if 语句都没有带上
else,这是因为如果条件成立,程序运行的都是 return 语句,在函数里碰上 return,就会终止运行,所以不加 else 也没问题。该函数在找到
Cookie 时,就会返回 Cookie 的值,否则返回“null”。


  现在我们要删除刚才设定的 name=rose Cookie。



var expires = new Date();

expires.setTime(expires.getTime() - 1);

document.cookie = 'name=rose;expires=' + expires.toGMTString();



可以看到,只需要把失效日期改成比现在日期早一点(这里是早 1 毫秒),再用同样的方法设定 Cookie,就可以删掉 Cookie 了。



上一篇:js简介与特点 人气:2078
下一篇:JavaScript入门教程(四) 人气:17461
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058