javascript Note

最近开始看看javascript，一直觉得这是自己的一块病，学点记点吧！记录不全，只记录一些自己认为有点意义的东西。

旧版本浏览器不能识别<script>标签对，会直接向用户显示其中的内容，而不是当做脚本语言去解释，所以有个很好的习惯就是把<script></script>之间的内容用括起来。
如下：

<!--

alert(new date());

-->

</script>

支持<script>标签的浏览器会忽略注释符，所以会继续执行之间的脚本代码。

用做URL的javascript的代码前要增加javascript: ，以说明使用的是javascript协议，但事件属性中的javascript程序代码前不用增加javascript:进行说明。
例如：

<a href="javascript:alert(new date());">javascript</a>

javascript严格区分大小写
javascript的注释：

//单行注释

多行注释

不允许嵌套"/* */"

字符串常量使用('') 或 ("") 引起来的若干字符，可以是0到N个
例如：'sd' "sdd" ""
反斜杠(\)是转义字符

javascript中，一个连续的字符串不能分开在两行编写，例如：

//这样是不对的

var v = "jksalfjkjj

fjdskfl";

//正确的

var v = "jksalfjkjj" +

"fjdskfl";

undefined常量
用语常量还没有被赋值的状态或对象的某个属性不存在，null表示赋给变量的值为"空"，"空"是一个有特殊意义的值，而undefined表示还没有对变量赋值，变量的值还处于未知状态。

变量
javascript采用弱类型变量形式，因为声明一个变量时不必确定类型，而是在使用或赋值时自动确定其数据类型。例如：
var name;
上面定义了一个name变量，但没有赋值，这时变量为undefined。
也可以：
var name = "sunwei";
定义了变量，同时给予一个字符串类型的值。还可以在程序运行过程中对已赋值的变量赋于一个其他类型的数据，例如：
name = 123;
变量name也就自动变成整数类型了。
在javascript中也可以不事先声明变量而直接使用，例如：
x = 1234;
解释器在执行到这条语句的时候，会自动产生一个数值类型的变量x。

算术运算符
+：加法运算符或正值运算符，"+"用于将字符串与其他数据类型相连成一个新的字符串。
例如："x"+123 结果是 "x123"
/： 9/4 如果不能整除，结果就是实型，保留有小数部分。

参数个数可变的函数：
在函数内部的函数代码中，可以使用一个名为arguments的对象，这是一个数组对象，其中包含了调用程序传递给函数的所有参数。

function testparams()

{

var params = "";

for (var i = 0; i < arguments.length; i++)

params = params + " " + arguments[i];

alert(params);

}

testparams("ab", 123);

testparams(123, 456, "aa");

</script>

创建动态函数
基本语法如下：
var varName = new Function (argument1,......, lastArgument);
所有的参数都必须是字符串类型的，最后的参数是这个动态函数的功能程序代码。
简单例子：

var square = new Function("x", "y", "var sum;sum = x*x + y*Y;return sum;");

alert (square(3, 2));

</script>

JavaScript中的系统函数
除了可以在JavaScript中自己定义函数外，JavaScript自身也提供了一些内部函数，下面是一些常用方法介绍。

(1) encodeURI
encodeURI方法返回一个URI字符串编码后的结果。

var urlStr = encodeURI("http://www.it315.org/index.htm?country=中国&name=z x");

alert(urlStr);

</script>

结果弹出一个对话框，内容是：http://www.it315.org/index.htm?country=%E4%B8&name=z%20x

(2)decodeURI
decodeURI方法将一个已编码的URI字符串解码成最初的字符串并返回。例：

var urlStr = decodeURI(http://www.it315.org/index.htm?country=%E4%B8&name=z%20x

)

alert(urlStr);

</script>

结果弹出一个对话框，内容是：http://www.it315.org/index.htm?country=中国&name=z x

(3)eval
eval 方法将某个参数字符串作为一个JavaScript表达式执行。有人要问，为什么要把一个表达式作为eval的参数去执行，而不直接编写？在js中编写的每条语句都是事先明确固定的，不能根据运行时的情况进行变动，对于var a1 = 1;这样的语句，如果想在运行时修改变量的名称，是没有办法做到。
使用eval函数，就能实现这样的需求，例如，

for(var i = 0; i < n; i++)

{

eval ("var a" + i + "=" + i);

}

上面这段代码定义了n个变量，变量名分别为a0,a1....等，相当于在js中直接书写下面的代码：
var a0 = 0;
var a1 =1;
......

对象与对象实例：
下面的程序代码演示了为对象实例增加方法的过程。

function Person()

{

}

var person1 = new Person();

person1.age = 18;//因为age第一次出现，所以为person1对象实例增加了一个age成员

person1.name = "zxx";

alert (person1.name + ":" + person1.age);

function asyFunc()

{

alert(person1.name + ":" + person1.age);

}

person1.say = sayFunc;

person1.say();因为say第一次出现，所以为person1对象实例增加了一个age成员

</script>

多学两招：
可以用"对象实例名[属性名字符串]"的格式来访问对象实例的属性，例如，上面的person1.name可以写成person1["name"]，这样可以实现对对象属性动态访问的效果，例如：
var x;
......
alert (person1[x]);
当x的值为"name"时，程序访问person1的name 属性，同理为"age"时访问person1.age 。

为了巩固和灵活运用前面介绍过的eval函数，也可以故意用"对象实例名.成员名"
var x;
......
eval ("alert(person1." + x + ")");

this 关键字
一般只用在用作对象成员方法的函数中出现，它代表某个成员方法执行时，引用该方法的当前对象实例。在对象的构造方法使用"this.成员名"的形式，可以为该对象的每个对象实例都增加心的成员。
下面是构造方法中为对象实例增加属性和方法的例子。

function Person(name, age)

{

this.age = age;

this.name = name;

this.say = sayFunc;

}

function sayFunc()

{

alert (this.name + ":" + this.age);

}

var person1 = new Person("张三", 18);

person1.say();

var person2 = new Person("李四", 20);

person2.say();

</script>

DOM (Document Object Model, 文档对象模型)

            DOM 除了定义各种对象外，还定义了各对象所所支持的事件，以及各个事件所对应的用户的具体操作。通过鼠标或按键在浏览器窗口或网页元素上的操作，对DOM对象来说，就称为事件(event)。例如，用鼠标单击了网页上的某个按钮，在这个按钮上就发生了鼠标单击事件，按钮就是事件源。

            如果将一段程序代码与某个事件源上发生的某种事件相关联，当该事件源上发生事件时，浏览器便会自动执行与之关联的程序代码，从而引发一连串的程序动作，这个程序称之为事件驱动(event driver) ,对事件进行处理的程序或函数,被称之为事件处理程序(event handler), 它完成对事件进行响应的动作.

            CSS(级联样式表), 脚本编程语言和DOM 的结合使用,能够使HTML文档与用户具有交互性和动态变换性,这三种技术的单一称谓叫 DHTML (Dynamic HTML).

如何编写事件处理程序

在js中,可以用三种方式将对象事件与处理代码进行关联.下面通过一个具体的例子来讲解这三种方式.

1.在事件源对象所对应的HTML标签上增加一个要处理的事件属性,让事件属性值等于处理该事件的函数名或程序代码.

<html>

<head>

<!--

function hideContextmenu()

{

window.event.returnValue = false; //设置window.event对象的returnValue属性值为false,就表示要取消浏览器对当前事件(即所
//选则的body 中定义的 contextmenu, 也可以定义别的事件)的默认处理.

}

-->

</script>

</head>

</body>

</html>

要取消浏览器对当前事件的默认处理,也可以在HTML标签的事件属性设置中,使用return false 语句. 如果要通过判断条件来选择是否取消浏览器对当前事件的默认处理,可以在事件处理中返回true 或 false,接着在HTML标签事件属性设置中也使用 return 语句将事件处理函数的返回值继续传递给浏览器,这种方式的程序代码如下.

<html>

<head>

<!--

function hideContextmenu()

{

return false;

}

-->

</script>

</head>

</body>

</html>

如果事件处理程序的代码较少,也可以将程序代码直接防止在HTML标签的事件属性设置中, 而不用编写事件处理函数, 例如
<a href =http://sw22225458.cnblogs.com/ onclick="return false">IT Crazy</a>
如果单击语句所对应的超链接,浏览器不会转向任何URL地址,因为onclick属性值被设置成了"return false".

2.直接在js代码中，设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。代码如下：

<!--

document.oncontextmenu = hideContextmenu;

function hideContextmenu()

{

return false;

}

//-->

</script>

3.在一个专门的<script>标签对中编写某个元素对象的某种事件处理程序代码，并用for属性指定事件源和用event属性指定事件名，这种<script>标签中的脚本程序只在指定事件源的指定事件发生时才被调用执行。这种方式常用于网页文档中的各种插件对象的事件处理程序，如下：

window.event.returnValue = false;

</script>

window对象

window对象代表浏览器的整个窗口，编程人员可以利用window对象控制浏览器窗口的各个方面。在js中，对window对象的属性和方法引用，可以省略"window"这个前缀。

window对象的方法：列几个

prompt方法，显示一个用户可以输入信息的对话框，并返回用户输入的内容。
navigate，在当前窗口中导航到指定的URL资源。
setTimeout，设置浏览器过多长时间以后执行指定的程序代码，时间以毫秒为单位，例：
setTimeout("Func()",5000) 表示5秒后调用Func()函数。
setInterval，设置浏览器每隔多长时间定期调用指定的程序代码，时间以毫秒为单位，例：
setInterval("Func()", 5000) 表示每隔5秒调用一次Func()函数。
clearInterval, claerTimeout 见意
showModalDialog，产生一个模态对话框窗口。对话框窗口与普通窗口最大的区别就是不能改变窗口大小和没有菜单，工具条，状态栏等。用户必须关闭模态对话框后，才能再回到打开这个模态对话窗口的原始网页口中操作。
showModelessDialog，产生一个非模态对话框窗口。

以后大家也要养成一个习惯，个人意见(懒人通用)，对方法的具体参数设置值，不要死记硬背，使用时查相关资料，是最有效，最真实的学习和工作方式。学习和从事编程，提倡开卷有益，绝不闭门造车。

接下来结合window对象中的几个方法，实现这样一种功能：在某个网页文件打开的同时，自动打开一个新的用于发布通知的窗口，新的通知窗口在一个指定的时间后又自动关闭。首先编写一个test.html网页文件，内容如下：

window.open("information.html", "_blank", "top=0, left=0, width=200, height=200, toolbar=no" );

</script>

接着编写一个information.html，内容如下：

window.setTimeout("window.close()", 5000);

</script>

<body>

5秒以后，自动关闭！

</body>

接下来在上面程序的基础上增加另外一个新功能：当显示information.html网页文件的窗口5秒以后自动关闭时，通知test的窗口，在其状态栏中显示一串左右来回跑动的文字。
test.html的程序代码如下：

var strStatua = "www.cnblogs.com/sw22225458";

var space_num = 0;//记录要显示的空格个数

var dir = 1;//记录是增加还是减少空格，1为要增加，-1为要减少

function scroll()

{

var str_space = "";/*开始时的空格字符串*/

/*每次调用scroll函数时，增加或减少空格的个数，当dir为1时，下面的语句就会增加空格的个数，当dir为-1时，就会减少空格的个数*/

space_num = space_num + 1*dir;/*当空格个数达到40时，改变dir值为-1，空格个数开始减少，当空格个数等于0时，改变die值为1，空格个数开始增加*/

if (space_num > 40 || space_num <= 0)

{

dir = -1 * dir;

}

/*根据空格个数生成空格字符串*/

for (var i = 0; i < space_num; i++)

{

str_space += "";

}

/*重新在状态栏上显示这些空格和文字*/

window.status = str_space + strStatus;

}

function start()

{

/*设置每隔100毫秒自动调用scroll函数，不要忘了函数名后的括号*/

window.setInterval("scrll()", 100);

}

var child = window.open("information.html", "_blank", "top=0, left=0, width=200, height=200, toolbar=no");

function closeChild()

{

if(!child.closed)

{

child.close();

}

</script>

</body>

接着修改informatioin.html，在5秒后启动test.html中的start函数。

window.setTimeout("closeit()", 5000);

function closeit()

{

/*opener也可以写成window.opener，表示打开当前窗口的那个window对象，如果要调用另外一个网页文件中定义的方法，需要将这个方法作为打开那个网页文件的窗口对象的成员方法来调用*/

opener.start();

window.owner = null;

window.close();

}

</script>

<body>

5秒以后，自动关闭！

</body>

window对象的事件

            HTML中并没有<window>这样的标签，window对象的事件处理器需要作为<body>标签的事件属性设置。

            onload事件，对应浏览器窗口装载完网页文档时的事件，需要在网页文档下载完毕时执行的程序代码，应该放在onload事件处理程序中，例如，显示一条通知用户网页下载完毕的信息。由于浏览器一边载入文档，一边解释执行其中的内容，为避免某个对象已经载入，但浏览器还没有解释到对象的onload事件处理程序的情况，在HTML文档中，对象的onload事件处理程序应放在对应的HTML标签之前，以确保它被执行。

            onunload事件，对应浏览器窗口准备卸载网页文件文档之后的事件，需要在网页关闭之后执行的程序代码放在onunload事件处理程序中。

            onbeforeunload事件，对应浏览器窗口准备卸载网页文件之前的事件。可以在该事件处理程序中设置window.event 对象的 returnValue属性值为某个字符串，浏览器将弹出一个对话框提示用户是否真的要关闭或离开。下例：

<html>

</body>

</html>

window对象的对象属性

            window对象中除了有那些基本数据类型的属性外，还有一些对象类型的属性。
1.location 对象

            这个对象用于设置和返回当前网页的URL信息。
            location对象中常用的属性是href，可以让浏览器载入一个新的URL网页文档，例如：
            window.location.href = "http://www.cnblogs.com";
            子窗口让父窗口刷新：opener.location.reload();

2.event对象

            event对象可以获取和设置当前事件的有关信息，例如，获取发生事件的事件源对象，键盘按下时使用的是哪个按键，鼠标事件发生时的鼠标位置及按下的是鼠标按键是哪个。下面是对event对象中的属性介绍。

1.altKey 属性，用于检测事件发生时Alt键是否被按下，true表示按下，false表示没按下。
2.ctrlKey, shiftKey, clientX, clinetY, screenX, screenY, offsetX, offsetY, x, y, returnValue
3.cancelBubble 属性，设置和返回当前事件是否继续向下传递，例如，单击文档中的一个图片，默认情况，先发生图片对象上的onclick，接着是在窗口对象上也发生onclick，如果在图片的onclick处理程序中，设置event对象的cancelBubble属性为true，则不会继续向下传递。
4.srcElement 属性，设置和返回事件源对象。
5.keyCode属性，设置和返回键盘按下，弹起时的那个按键的unicode码。
6.button

            给一个程序，在网页文档窗口中按下Esc，文档窗口关闭。需要在onkeypress事件中判断用户按下的是否是Esc，即需要比较window.event.keyCode是否等于Esc的unicode。那么Esc的unicode是多少呢？只要在inkeypress处理程序中加上alert(window.event.keyCode);这条语句，然后，按下某个键，弹出的就是显示这个键的unicode。

<!--

function window_onkeypress()

{

//alert(window.event.keyCode);

if(window.event.keyCode == 27)

{

window.close();

}

-->

</script>

</body>

有的人在运行上面这个脚本程序时，可能已经注意到了，当按下Esc时，会显示一个询问是否真的关闭对话框，而不是直接关闭文档窗口，这是因为window.close()方法只能直接关闭程序中用window.open()方法打开的窗口，而不能直接关闭浏览器程序本身启动的窗口。

接着编写一个脚本程序来演示event属性对象的cancelBubble, shiftKey, srcElement等属性，如下：

function checkCancel()

{

if (window.event.shiftKey)

{

window.event.cancelBubble = true;

}

function showSrc()

{

if(window.event.srcElement.tagName.toLowerCase() == "img")

{

alert(window.event.srcElement.src);

}

</script>

</body>

3. frames 数组

window对象的frames属性是一个数组，它与window对象的parent,top 等对象属性，都是用于对HTML的帧标签(<frameset>或<iframe>)进行编程的js对象。帧窗口也是用window对象来表示的，frames属性代表某个窗口中的所有帧窗口的集合，它可以返回各个帧窗口对应的window对象。例如，有一个名为framedemo.html的网页，内容如下：

<html>

</frameset>

</html>

浏览器显示framedemo.html网页后，一共产生了3个window对象，一个对应整个浏览器窗口，也就是framedemo.html窗口，另外两个对应帧窗口，对应整个浏览器窗口的对象就是这两个帧窗口对象的父对象。framesetdemo.html仅仅是用于分隔浏览器窗口，如非特殊情况，一般不能在这个网页中编写脚本程序，而是在帧窗口所装载的网页中编写脚本程序。

            如果在上面的帧窗口top.html中放置了一个按钮，当这个按钮单击，通知下面的刷新，实现如下：
<input type="button" value="刷新" onclick="window.parent.frames[1].location.reload();">

            top.html中的window对象表示装载该网页的帧窗口，这个window对象的parent属性对应整个浏览器窗口对象。
            frames数组对象中的每个元素，都是frames对象中的一个属性，属性名就是各个帧窗口的名称，因此，帧窗口对象也可以通过使用属性名的方式来访问。另外，引用window对象的属性和方法时，可以省略"window."前缀，所以，可以写成：
            <input type="button" value="刷新" onclick="parent.frames.bottom.location.reload()">属性也可以用方括号的方式引用，所以，有可以写成：
            <input type="button" value="刷新" onclick="parent.frames[bottom].location.reload()">

            window对象还有一个top属性，代表最顶层的窗口，也就是整个浏览器窗口。如果在一个帧窗口（假设叫A）所装载的网页又进行了分帧，那么这个网页中所划分出来的帧窗口对象要访问整个浏览器窗口对象，就必须使用top属性，而不能再用parent属性，此时的parent属性是指帧窗口A所对应的对象。例如，有一个名为top.html的网页，将浏览器窗口划分成了上下两帧，内容如下：

<frameset rows="20%, *">
<frame name="a">
<frame name="x" src="bottom.html">
</frameset>

显示在下面的帧窗口中的bottom.html，又分为了左右两帧，内容如下：
<frameset cols="30%, *">
<frame name="b">
<frame name="c" src="bottom_rihght.html">
</frameset>

            如果要在bottom_rihght.html中编写一段js程序，往top.html中创建的名为a的帧窗口中写入文本。在bottom_rihght.html的js代码中，需要用top.a或parent.parent.a来引用名称为a的帧窗口，代码如下：
<script language="js">
            top.a.document.write("sw");
</script>

多学两招：
            要定义一个在垂直方向上分为两行且下面一行又在水平方向上分为两列的框架集，需要在<frameset>标签对中嵌套子<frameset>标签对来定义下面这行结构。不管帧窗口是在顶层<frameset>标签中定义，还是在嵌套的子<frameset>标签对中定义，在同一个网页文档中定义的所有帧窗口的父窗口，都是当前显示该网页的窗口。因此，一个用于划分框架集的HTML页面所对应的window对象的frames属性集合中，也包括那些嵌套在子<frameset>标签对中的帧窗口，例如，将top.html网页修改成如下：

<frameset rows="20%, *">
<frame name="a">
   <frameset cols="30%, *">
   <frame name="b">
   <frame name="c" src="bottom_rihght.html">
   </frameset>
</frameset>

子框架集中的b和c帧窗口，和顶层框架集中的a帧窗口一样，都直接属于显示top.html窗口对象的子窗口对象，而不是显示top.html窗口对象的子窗口对象下的子窗口对象。在这种情况下，bottom_right.html文件中的js要用parent表示显示top.html窗口对象，而不是parent.parent。

4. screen 对象
这个对象中的一些属性提供了显示器分辨率和色彩度等信息。

5. clipboardData对象
这个对象提供了读写剪贴板内容的方法。

6.history 对象
提供了重新装载浏览器曾经访问过的URL列表中的某个URL的方法。

7. navigator 对象
提供了获取浏览器名称，版本号，所用的操作系统，cpu类型，浏览器的国家语言等方面的属性信息。

8. document对象
document对象代表整个网页文档，他的功能最多，下面重点讲解。

            document 对象代表浏览器窗口中装载的整个HTML文档，文档中的每个HTML元素都可以用一个js对象来与之对应，代表HTML元素的对象在js中都是做为document对象的直接或间接属性被引用的。document对象是window对象的一个属性，由于引用window对象的属性和方法时，可以省略window.这个前缀，所以，通常在程序中直接引用document对象，而不是使用window.document。

1. document对象的方法
   write方法，用于想html文档中动态写如内容。

   writeln方法，与write方法类似，但在每次写完内容末尾多加一个换行符。

   open方法，用于打开一个新的文档，与window.open方法类似。出于通用性和可靠性的，建议用window.open

   close，当向新打开的文档对象中写完所有内容后，一定要调用close关闭文档流，否则，可能会出现一些无法确定的结果。

   clear，用于清除文档中的所有内容，该方法目前并没有得到完全支持，可以用document.write("");document.close();这两条语句来实现与clear方法同样的功能。

   getElementById,，返回id属性值等于指定参数的html元素所对应的对象，可以为每个html元素指定一个id属性值，在同一个html文档中，不能有两个id属性值相同的元素。

   getElementByName ，返回name属性值等于指定参数的所有html元素对应的对象数组，由于多个html元素可以有相同的name属性值，所以，这里返回的是数组。

   getElementByTagName ，返回标签名等于指定参数的所有html元素对应的对象数组。

   creatElement方法，产生一个代表某个html元素的对象，随后，可以使用其他一些方法将这个对象所表示的html元素插入到html文档中。

   createStyleSheet ，为当前html文档产生一个样式表或增加一条样式规则。

下面的示例程序演示了document对象的几个方法的用途及用法。

<html>

这是的最初内容<br/>

document.write("这是write方法动态写入的内容<br/>");

function updatedoc()

{

document.writeln("abc<br/>");

document.writeln("def<br/>");

document.close();

var owin = window.open("", "_blank");

owin.document.writeln("xyz<br/>");

owin.document.close();

owin.document.write("abc<br/>");

owin.document.write("def<br/>");

owin.document.close();

}

</script>

</html>

打开网页结果如图。

接着点更新按钮，如图。


在第一个图中可以看到，在浏览器完全解析和处理完html文档中的所有内容之前，document.write 方法调用与文档中的其他html元素使用的是同一个document 对象。而在点"更新"按钮后，窗口内容变成左图，这说明，在浏览器完全解析和处理完html文档中的所有内容之后，就结束了对ducument的一次完整写入，虽然没有明显调用close方法，但在以后发生的事件处理程序中的document.write方法调用，都会自动打开一个新的document 对象进行写入，从而覆盖初始窗口中显示的内容。

左右两图非常相似，但仔细看两图地址栏中的路径是不一样的。查看这两窗口中的html文档。
分别是
abc<br/>
def<br/>
和
abc<br/>def<br/>
非常直观地说白了writeln 和 write 方法的区别。
            close方法用于结束对文档对象的一次完全写入操作，如果没有调用document对象的close方法，后面调用该document 对象的write方法所写入的内容，都会被追加到前面使用该document对象的write方法所写入的内容后面。
            在右图点"后退"按钮，结果如图

这说名右图的窗口实际一共打开了两个文档，最初显示的是5.13，接着程序调用close关闭了初始的document对象，并通过随后的write方法自动打开一个新的document对象，在新的文档中写入右图的内容，覆盖了图5.13。

小经验: 当有错误时,需要查找,在updatedoc函数中的开始代码处加上一条alert语句,就可以判断出updatedoc函数有没有被调用,从而缩小了查找问题的范围.

如果有多个name属性值相同的html元素,将name属性值做为数组索引字符串,返回的是具有该name属性值的最后一个元素所对应的对象,而不是具有该name属性值的所有元素所对应的对象的数组.
如:
var objImg = document.images.item("sample"); // 所有属性名为sample的<img>标签对象.
var objImg = document.images["sample"];          //返回的objImg不是一个数组,而是仅代表name属性等于sample的那个最后的<img>标签的对象.

当使用name属性值作为数组索引字符串时,可以在这个索引字符串后面,再传递一个整数索引号,这个整数索引号叫子索引,代表该元素在同组元素(name属性值相同的若干元素)中的顺序号.例如:
var objImg = document.images["sample", 0];

5. <scipt>标签的属性
<scipt>标签也有几个专用的属性,它们的作用如下.
5.1 defer,这是一个不用设置属性值的,通过实验来说明defer属性的作用.编写一个网页文件,如下
aaa
<script lan="js">
      document.write("bbb");
<script>
ccc

显示效果是顺序显示 aaa bbb ccc
这说明:<scipt></script>标签对中的程序代码在浏览器逐行往下解析该网页文档的过程中就执行了.修改上面代码,如下:
aaa
<script lan="js" defer>
      document.write("bbb");
<script>
ccc

显示效果是:bbb

这是因为,设置了defer属性的<script></script>标签对中的程序代码,是在浏览器解析处理完网页文档中的所有其他内容后才开始执行的,直接嵌套在它里面的document.write方法将重新打开一个document对象,并将写入的文本覆盖了最初的文档内容(即aaa ccc).这说明,浏览器在装载网页文档内容的同时,就开始顺序执行已装载的内容,包括直接嵌套在<script></script>标签对中的document.write方法写入的内容.<script>标签的defer属性的作用是,告诉浏览器在装载过程中不用去分析和执行该<script></script>标签对中的脚本代码,而是在下载并分析完整个html部分内容后,才执行该<script></script>标签对中的脚本代码,这样就能提高浏览器下载网页的性能.显然,如果直接嵌套在<script></script>标签对中(非函数中)的js代码没有调用document.write方法时,设置<scipt>标签的defer属性,不会影响网页文档的实际显示和执行效果,否则,document.write方法写入的内容将覆盖网页上的其他内容,从而影响网页的显示结果.

6. Cookie属性
            借助document.cookie属性,js程序可以完成与www服务器一样的Cookie功能,一个非常特殊的地方就是,设置给document.cookie属性的值与document.cookie属性的返回值是不一样的.document.cookie属性的设置是一个累加的过程,我们不能在一次document.cookie属性设置语句中增加多个Cookie,每增加一个Cookie都需要单独调用一次document.cookie.读取document.cookie属性时,它返回的是浏览器当前所有可用的Cookie信息组合成的字符串.

            设置给document对象的cookie属性的字符串,必须以Cookie的名称和设置值(NAME=VALUE ;)所组成的字段开头,后面可以加上下面列出的一些可选字段内容,后面的字段与前面的字段之间都用分号(;)加空格分隔.

*   expires = date;
      设置Cookie在浏览器端保持有效的时间,date部分是GMT格式的字符串,例如,"Fri, 31 Dec 1999 23:59:45 GMT" .
如果date部分设置成以前某个时间,浏览器立即删除这个Cookie信息.如果date部分被设置成未来的某个时间,浏览器将在文件系统中保存这个Cookie信息,直到date指定的时间前都保持有效,同一台计算机上正在运行的所有浏览器进程和以后在Cookie到期之前启动的浏览器进程都可以访问到这个Cookie信息. 如果没有设置这部分内容,浏览器将Cookie保存在自身进程的内存中,Cookie信息随这个浏览器进程的关闭而消失,这样,如果同一台计算机上启动的多个浏览器窗口属于不同的进程,在一个浏览器进程中产生的Cookie,不会被传递给其他的浏览器进程.

*   domain = domainname;
      设置Cookie在哪个域中有效,浏览器访问这个域中的所有主机时,都将传送这个Cookie信息,如果没有设置这部分内容,Cookie只在浏览器访问当前主机时有效.

*   path = path;
      设置Cookie在有效域中的服务器上的哪个URL目录及其下面的子目录中有效.如果没有设置这部分内容,Cookie只对浏览器访问当前请求的URL地址所在目录及其子目录下的所有页面时起作用.

*   secure;
      将Cookie信息设置成安全的,浏览器只有在安全环境下才能访问这个被存储的Cookie信息.

JavaScript程序通常在设置时使用escape函数对VALUE进行编码,在读取时使用unsecape函数解码.

下面通过一个实验来直观地了解Cookie的一些特性和用途.
      (1)按下面的程序清单,在同一个目录中编写3个对document.cookie属性进行调用的html文件.
      *   cookie1.html:

这是会话的第一个页面<br/>

var never = new Date();

//设置Cookie的有效期为10年

never.setTime(never.getTime() + 10*365*24*60*60*1000);

var expString = "expires=" + never.toGMTString() + ";";

document.cookie = "area=" + escape("北京海淀") + "; " + expString;

//下面的语句不是覆盖上面语句的结果,而是在上面基础上增加一个新Cookie

document.cookie = "zipcode=100080;";

</script>

<a href="cookie2.html">进入第二个页面</a>

*cookie2.html

这是会话的第二个页面<br />

function getCookie(name)

{

var result = null;

var myCookie = " " + document.cookie + ";";

var serchName = " " + name + "=";

var startOfCookie = myCookie.indexOf(searchName);

var endOfCookie;

if (startOfCookie != -1)

{

startOfCookie += searchName.length;

endOfCookie = myCookie.indexOf(";", startOfCookie);

result = unescape(myCookie.subString(startOfCookie, endOfCookie));

}

return result;

}

document.write(document.cookie + "<br/>";

document.write("area is " + getCookie("area") + ",and zipcode is " + getCookie("zipcode"));

document.write("<br/>");

</script>

<a href="cookie3.html">进入第三个页面</a>

*cookie3.html:

这是会话的第三个页面<br/>

//立即删除名为"area"的Cookie

document.cookie = "area=" + escape("北京海淀") + "; expires=Fri, 31 Dec 1999 23:34:34 GMT;";

</script>

<a href="cookie2.html">回到第二个页面</a>

(2)用IE打开cookie1.html文件,能看到当前用户的配置主目录下的Cookies子目录中多了一个文本文件,打开内容如下:
area
%u5317%u4EAC%u6D77%u6DC0
~~local~~/C:\Documents and Settings\Administrator\桌面\
1088
2280588416
30347529
3497082896
29613274
*

其中只保存了名为area的Cookie信息,没有保存名为zipcode的Cookie信息,这是因为后者没有设置"expires=date;" 部分,它只保留在浏览器进程的内存空间中.

(3)单击cookie1上的超链接,进入第二个页面,显示的结果如图5.18

可见第二个页面能访问到第一个页面中写入的Cookie信息.

(4)单击cookie2.html的超链接,进入第三个页,随即能看到Cookies目录下的那个在步骤(2)中产生的文本文件被删除,这是因为"expires=date;"的date部分被设置成了已经过去的时间.

(5)单击cookie3.html页面上的超链接,回到第二个页面,显示如图5.19,从中可以看出,名为area的Cookie信息以不存在,不能再被浏览器访问.

(6)关闭所有的浏览器窗口,用IE再次打开cookie1.html文件后关闭浏览器,接着用IE直接打开cookie2.html文件,显示的结果如图5.20所示.

从中可以看出,名为zipcode的Cookie信息已不存在,因为打开cookie1.html的浏览器关闭后,它随之消失了;但名为area的Cookie信息仍能被浏览器访问,因为它被保存在了浏览器所在计算机的文件系统上.

posted on 2007-05-12 20:28 执法长老阅读(736) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

IT Crazy

javascript Note

导航

公告