JavaScript只能在html被执行。JavaScript可以放在html中
<script type="text/javascript">
JavaScript goes here...
</script>
也可在html中引用
<script type="text/javascript" src="file.js">
</script>
JavaScript 可以出现在 HTML 的任意地方。使用标记<script>…</script>,你可以在 HTML 文档的任意地方插入
JavaScript,甚至在<HTML>之前插入也不成问题。不过如果要在声明框架的网页(框架网页)中插入,就一定要在<frameset>之前插入,否则不会运行。
另外一种插入 JavaScript 的方法,是把 JavaScript
代码写到另一个文件当中(此文件通常应该用“.js”作扩展名),然后用格式为“<script src="javascript.js"></script>”的标记把它嵌入到文档中。注意,一定要用“</script>”标记。
如果想在浏览器的“地址”栏中执行 JavaScript 语句,用这样的格式:javascript:<JavaScript语句>
这样的格式也可以用在连接中:<a href="javascript:<JavaScript语句>">...</a>
参考:相对于<script>标记,还有一个<server>标记。<server>标记所包含的,是服务器端(Server
Side)的脚本。
以“;”为语句的结束标志
<!-- --> 作用是让不懂<script>标记的浏览器忽略JavaScript代码,一般可以不加
//或/* */ 注释
var 变量名
变量命名规则如下:
1、必须以英文字母或下划线“_”开头。
2、变量名的长度要在255之内。
3、可以使用任何字符、数字和下划线。
4、不可以使用JS用到的运算符号,例如+、-、*、/等不可使用。
5、不可以使用JS用到的保留字,例如sqrt、round等等。
6、在JS中,变量是区分大小写的。例如temp和Temp是两个不同的变量。
null :一个特殊的空值。当变量未定义,或者定义之后没有对其进行任何赋值操作,它的值就是“null”。企图返回一个不存在的对象时也会出现null值。
prompt格式如下:
prompt("你要提示的信息");
prompt("你要提示的信息","默认值");
alert 格式如下:
alert(“要输出的字符串”);
alert (变量名称);//输出变量里的值不必加双引号
alert("你的平均成绩是:"+变量名+" ");//字符串和变量输出格式如上,变量要单独加上“+变量名+”;
alert("你的平均成绩是:"+变量名);//经我测试,这种形式也是可以的。
String
属性: length 用法:<字符串对象>.length;返回该字符串的长度。
方法:
charAt()
用法:<字符串对象>.charAt(<位置>);返回该字符串位于第<位置>位的单个字符。注意:字符串中的一个字符是第 0 位的,第二个才是第 1 位的,最后一个字符是第 length - 1 位的。
charCodeAt() 用法:<字符串对象>.charCodeAt(<位置>);返回该字符串位于第<位置>位的单个字符的 ASCII 码。
fromCharCode() 用法:String.fromCharCode(a, b, c...);返回一个字符串,该字符串每个字符的
ASCII 码由 a, b, c... 等来确定。
indexOf() 用法:<字符串对象>.indexOf(<另一个字符串对象>[, <起始位置>]);该方法从<字符串对象>中查找<另一个字符串对象>(如果给出<起始位置>就忽略之前的位置),如果找到了,就返回它的位置,没有找到就返回“-1”。所有的“位置”都是从零开始的。
lastIndexOf() 用法:<字符串对象>.lastIndexOf(<另一个字符串对象>[, <起始位置>]);跟 indexOf()
相似,不过是从后边开始找。
split() 用法:<字符串对象>.split(<分隔符字符>);返回一个数组,该数组是从<字符串对象>中分离开来的,<分隔符字符>决定了分离的地方,它本身不会包含在所返回的数组中。例如:'1&2&345&678'.split('&')返回数组:1,2,345,678。关于数组,我们等一下就讨论。
substring() 用法:<字符串对象>.substring(<始>[, <终>]);返回原字符串的子字符串,该字符串是原字符串从<始>位置到<终>位置的前一位置的一段。<终> - <始> = 返回字符串的长度(length)。如果没有指定<终>或指定得超过字符串长度,则子字符串从<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串,则返回空字符串。
substr() 用法:<字符串对象>.substr(<始>[, <长>]);返回原字符串的子字符串,该字符串是原字符串从<始>位置开始,长度为<长>的一段。如果没有指定<长>或指定得超过字符串长度,则子字符串从<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串,则返回空字符串。
toLowerCase() 用法:<字符串对象>.toLowerCase();返回把原字符串所有大写字母都变成小写的字符串。
toUpperCase() 用法:<字符串对象>.toUpperCase();返回把原字符串所有小写字母都变成大写的字符串。
Array
数组的定义方法:var <数组名> = new Array(); 这样就定义了一个空数组。
以后要添加数组元素,就用:<数组名>[<下标>] = ...;
如果想在定义数组的时候直接初始化数据,请用:var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);
例如,var myArray = new Array(1, 4.5, 'Hi'); 定义了一个数组 myArray,里边的元素是:myArray[0]
== 1; myArray[1] == 4.5; myArray[2] == 'Hi'。
但是,如果元素列表中只有一个元素,而这个元素又是一个正整数的话,这将定义一个包含<正整数>个空元素的数组。
注意:JavaScript只有一维数组!任意“myArray[...,3]”这种形式的调用其实只返回了“myArray[3]”。要使用多维数组,请用这种虚拟法:var myArray = new Array(new Array(), new Array(), new Array(), ...); 其实这是一个一维数组,里边的每一个元素又是一个数组。调用这个“二维数组”的元素时:myArray[2][3] = ...;
属性:length 用法:<数组对象>.length;返回:数组的长度,即数组里有多少个元素。它等于数组里最后一个元素的下标加一。所以,想添加一个元素,只需要:myArray[myArray.length] = ...。
方法:
join() 用法:<数组对象>.join(<分隔符>);返回一个字符串,该字符串把数组中的各个元素串起来,用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。
reverse() 用法:<数组对象>.reverse();使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法,它将使数组变成:[3, 2, 1]。
slice() 用法:<数组对象>.slice(<始>[, <终>]);返回一个数组,该数组是原数组的子集,始于<始>,终于<终>。如果不给出<终>,则子集一直取到原数组的结尾。
sort() 用法:<数组对象>.sort([<方法函数>]);使数组中的元素按照一定的顺序排列。如果不指定<方法函数>,则按字母顺序排列。在这种情况下,80 是比 9 排得前的。如果指定<方法函数>,则按<方法函数>所指定的排序方法排序。<方法函数>比较难讲述,这里只将一些有用的<方法函数>介绍给大家。
按升序排列数字:
function sortMethod(a, b) { return a - b;}
myArray.sort(sortMethod); //按降序排列数字:把上面的“a - b”该成“b - a”。
Math
属性:
E 返回常数 e (2.718281828...)。
LN2 返回 2 的自然对数 (ln 2)。
LN10 返回 10 的自然对数 (ln 10)。
LOG2E 返回以 2 为低的 e 的对数 (log2e)。
LOG10E 返回以 10 为低的 e 的对数 (log10e)。
PI 返回π(3.1415926535...)。
SQRT1_2 返回 1/2 的平方根。
SQRT2 返回 2 的平方根。
方法:
abs(x) 返回 x 的绝对值。
acos(x) 返回 x 的反余弦值(余弦值等于 x 的角度),用弧度表示。
asin(x) 返回 x 的反正弦值。
atan(x) 返回 x 的反正切值。
atan2(x, y) 返回复平面内点(x, y)对应的复数的幅角,用弧度表示,其值在 -π 到 π 之间。
ceil(x) 返回大于等于 x 的最小整数。
cos(x) 返回 x 的余弦。
exp(x) 返回 e 的 x 次幂 (ex)。
floor(x) 返回小于等于 x 的最大整数。
log(x) 返回 x 的自然对数 (ln x)。
max(a, b) 返回 a, b 中较大的数。
min(a, b) 返回 a, b 中较小的数。
pow(n, m) 返回 n 的 m 次幂 (nm)。
random() 返回大于 0 小于 1 的一个随机数。
round(x) 返回 x 四舍五入后的值。
sin(x) 返回 x 的正弦。
sqrt(x) 返回 x 的平方根。
tan(x) 返回 x 的正切。
Date
日期对象。这个对象可以储存任意一个日期,从 0001 年到 9999 年,并且可以精确到毫秒数(1/1000 秒)。在内部,日期对象是一个整数,它是从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比 1970
年早,则它是一个负数。所有日期时间,如果不指定时区,都采用“UTC”(世界时)时区,它与“GMT”(格林威治时间)在数值上是一样的。
定义一个日期对象:var d = new Date;//这个方法使 d 成为日期对象,初始值为当前时间。
如果要自定初始值,可以用:var d = new Date(99, 10, 1); //99 年 10 月 1 日
var d = new Date('Oct 1, 1999'); //99 年 10 月 1 日
等等方法。最好的方法就是用下面介绍的“方法”来严格的定义时间。
方法
以下有很多“g/set[UTC]XXX”这样的方法,它表示既有“getXXX”方法,又有“setXXX”方法。“get”是获得某个数值,而“set”是设定某个数值。如果带有“UTC”字母,则表示获得/设定的数值是基于UTC 时间的,没有则表示基于本地时间或浏览期默认时间的。如无说明,方法的使用格式为:“<对象>.<方法>”,下同。
g/set[UTC]FullYear()
返回/设置年份,用四位数表示。如果使用“x.set[UTC]FullYear(99)”,则年份被设定为 0099 年。
g/set[UTC]Year()
返回/设置年份,用两位数表示。设定的时候浏览器自动加上“19”开头,故使用“x.set[UTC]Year(00)”把年份设定为 1900 年。
g/set[UTC]Month() 返回/设置月份。
g/set[UTC]Date() 返回/设置日期。
g/set[UTC]Day() 返回/设置星期,0 表示星期天。
g/set[UTC]Hours() 返回/设置小时数,24小时制。
g/set[UTC]Minutes() 返回/设置分钟数。
g/set[UTC]Seconds() 返回/设置秒钟数。
g/set[UTC]Milliseconds() 返回/设置毫秒数。
g/setTime() 返回/设置时间,该时间就是日期对象的内部处理方法:从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果要使某日期对象所指的时间推迟 1 小时,就用:"x.setTime(x.getTime() + 60 * 60 * 1000);"(一小时 60 分,一分 60 秒,一秒 1000 毫秒)。
getTimezoneOffset()
返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区,该值为负,例如:中国时区(GMT+0800)返回“-480”。
toString() 返回一个字符串,描述日期对象所指的日期。这个字符串的格式类似于:“Fri Jul 21 15:43:46 UTC+0800
2000”。
toLocaleString() 返回一个字符串,描述日期对象所指的日期,用本地时间表示格式。如:“2000-07-21 15:43:46”。
toGMTString() 返回一个字符串,描述日期对象所指的日期,用 GMT 格式。
toUTCString() 返回一个字符串,描述日期对象所指的日期,用 UTC 格式。
parse() 用法:Date.parse(<日期对象>);返回该日期对象的内部表达方式。
全局对象
全局对象从不现形,它可以说是虚拟出来的,目的在于把全局函数“对象化”。在 Microsoft jscript 语言参考中,它叫做“Global 对象”,但是引用它的方法和属性从来不用“Global.xxx”,而是直接用“xxx”。
属性
NaN :“Not a Number”。出现这个数值比较少见,以至于我们可以不理它。当运算无法返回正确的数值时,就会返回“NaN”值。NaN 值非常特殊,因为它“不是数字”,所以任何数跟它都不相等,甚至 NaN 本身也不等于 NaN 。
方法:
eval() 把括号内的字符串当作标准语句或表达式来运行。
isFinite() 如果括号内的数字是“有限”的(介于 Number.MIN_VALUE 和 Number.MAX_VALUE 之间)就返回
true;否则返回 false。
isNaN() 如果括号内的值是“NaN”则返回 true 否则返回 false。可用来验证一个变量是否是数字
parseInt()
返回把括号内的内容转换成整数之后的值。如果括号内是字符串,则字符串开头的数字部分被转换成整数,如果以字母开头,则返回“NaN”。
parseFloat() 返回把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回“NaN”。
toString()
用法:<对象>.toString();把对象转换成字符串。如果在括号中指定一个数值,则转换过程中所有数值转换成特定进制。
escape() 返回括号中的字符串经过编码后的新字符串。该编码应用于URL,也就是把空格写成“%20”这种格式。“+”不被编码,如果要“+”也被编码,请用:escape('...', 1)。
unescape() 是 escape() 的反过程。解编括号中字符串成为一般字符串。
函数
所谓“函数”,是有返回值的对象或对象的方法。常见的函数有:构造函数,如 Array(),能构造一个数组;全局函数,即全局对象里的方法;自定义函数;等等。
定义函数用以下语句:
function 函数名([参数集]) {
...
[return[ <值>];]
...}
其中,用在 function 之后和函数结尾的大括号是不能省去的,就算整个函数只有一句。
函数名与变量名有一样的起名规定。参数集可有可无,但括号就一定要有。
在执行一个函数的时候,碰到 return 语句,函数立刻停止执行,并返回到调用它的程序中。如果“return”后带有<值>,则退出函数的同时返回该值。
在函数的内部,参数可以直接当作变量来使用,并可以用 var 语句来新建一些变量,但是这些变量都不能被函数外部的过程调用。要使函数内部的信息能被外部调用,要么使用“return”返回值,要么使用全局变量。
全局变量 在 Script 的“根部”(非函数内部)的“var”语句所定义的变量就是全局变量,它能在整个过程的任意地方被调用、更改。
更多的时候,函数是没有返回值的,这种函数在一些比较强调严格的语言中是叫做“过程”的,例如 Basic 类语言的“Sub”、Pascal 语言的“procedure”。
属性 :
arguments 一个数组,反映外部程序调用函数时指定的参数。用法:直接在函数内部调用“arguments”。
指定事件处理程序有三种方法:
方法一 直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是:<标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]>
让我们来看看例子:<body ... onload="alert('网页读取完成,请慢慢欣赏!')" onunload="alert('再见!')">
方法二 编写特定对象特定事件的 JavaScript。这种方法用得比较少,但是在某些场合还是很好用的。方法是:
<script language="JavaScript" for="对象" event="事件">
...
(事件处理程序代码)
...
</script>
例:<script language="JavaScript" for="window" event="onload">
alert('网页读取完成,请慢慢欣赏!');
</script>
方法三 在 JavaScript 中说明。方法:<事件主角 - 对象>.<事件> = <事件处理程序>;
用这种方法要注意的是,“事件处理程序”是真正的代码,而不是字符串形式的代码。如果事件处理程序是一个自定义函数,如无使用参数的需要,就不要加“()”。例:...
function ignoreError() { return true;}
...
window.onerror = ignoreError; // 没有使用“()”
这个例子将 ignoreError() 函数定义为 window 对象的 onerror 事件的处理程序。它的效果是忽略该 window 对象下任何错误(由引用不允许访问的 location 对象产生的“没有权限”错误是不能忽略的)。
事件详解
onblur 事件:发生在窗口失去焦点的时候。应用于:window 对象
onchange 事件:发生在文本输入区的内容被更改,然后焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性,或者立刻改变文档内容。
应用于:Password 对象;Select 对象;Text 对象;Textarea 对象
onclick 事件:发生在对象被单击的时候。单击是指鼠标停留在对象上,按下鼠标键,没有移动鼠标而放开鼠标键这一个完整的过程。一个普通按钮对象(Button)上添加 onclick 事件处理程序,可以模拟“另一个提交按钮”,方法是:在事件处理程序中更改表单的 action, target, encoding, method 等一个或几个属性,然后调用表单的 submit() 方法。在 Link 对象的 onclick 事件处理程序中返回 false 值(return false),能阻止浏览器打开此连接。即,如果有一个这样的连接:<a href="http://www.a.com" onclick="return false">Go!</a>,那么无论用户怎样点击,都不会去到 www.a.com 网站,除非用户禁止浏览器运行 JavaScript。
应用于:Button 对象;Checkbox 对象;Image 对象;Link 对象;Radio 对象;Reset 对象;Submit 对象
onerror 事件:发生在错误发生的时候。它的事件处理程序通常就叫做“错误处理程序”(Error Handler),用来处理错误。上边已经介绍过,要忽略一切错误,就使用:function ignoreError() { return true;}window.onerror = ignoreError;
应用于:window 对象
onfocus 事件:发生在窗口得到焦点的时候。应用于:window 对象
onload 事件:发生在文档全部下载完毕的时候。全部下载完毕意味着不但 HTML 文件,而且包含的图片,插件,控件,小程序等全部内容都下载完毕。本事件是 window 的事件,但是在 HTML 中指定事件处理程序的时候,我们是把它写在<body>标记中的。 应用于:window 对象
onmousedown 事件:发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。
应用于:Button 象;Link 对象
onmouseout 事件:发生在鼠标离开对象的时候。参考 onmouseover 事件。 应用于:Link 对象
onmouseover 事件:发生在鼠标进入对象范围的时候。这个事件和 onmouseout 事件,再加上图片的预读,就可以做到当鼠标移到图像连接上,图像更改的效果了。有时我们看到,在指向一个连接时,状态栏上不显示地址,而显示其它的资料,看起来这些资料是可以随时更改的。它们是这样做出来的:
<a href="..." onmouseover="window.status='Click Me Please!'; return true;" onmouseout="window.status=''; return true;">
应用于:Link 对象
onmouseup 事件:发生在用户把鼠标放在对象上鼠标键被按下的情况下,放开鼠标键的时候。如果按下鼠标键的时候,鼠标并不在放开鼠标的对象上,则本事件不会发生。应用于:Button 对象;Link 对象
onreset 事件:发生在表单的“重置”按钮被单击的时候。通过在事件处理程序中返回 false 值(return false)可以阻止表单重置。应用于:Form 对象
onresize 事件:发生在窗口被调整大小的时候。应用于:window 对象
onsubmit 事件:发生在表单的“提交”按钮被单击的时候。可以使用该事件来验证表单的有效性。通过在事件处理程序中返回 false 值(return
false)可以阻止表单提交。 应用于:Form 对象
onunload 事件:发生在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候。与 onload 一样,要写在 HTML 中就写到<body>标记里。
应用于:window 对象
关于对象化编程的语句
with 语句:为一个或一组语句指定默认对象。
用法:with (<对象>) <语句>;
with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中,请注意 Math 的重复使用:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);
当使用 with 语句时,代码变得更短且更易读:
with (Math) { x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);}
this 对象:返回“当前”对象。在不同的地方,this 代表不同的对象。如果在 JavaScript 的“主程序”中(不在任何 function中,不在任何事件处理程序中)使用 this,它就代表 window 对象;如果在 with 语句块中使用 this,它就代表 with 所指定的对象;如果在事件处理程序中使用 this,它就代表发生事件的对象。
一个常用的 this 用法,这个用法常用于立刻检测表单输入的有效性:<script>...function check(formObj) { ...}...</script>
<body ...>...<form ...>...<input type="text" ... onchange="check(this.form)">...</form>...</body>
自定义构造函数:自定义构造函数也是用 function。在 function 里边用 this 来定义属性。
function <构造函数名> [(<参数>)] { ... this.<属性名> = <初始值>; ...}
然后,用 new 构造函数关键字来构造变量:var <变量名> = new <构造函数名>[(<参数>)];
构造变量以后,<变量名>成为一个对象,它有它自己的属性——用 this 在 function 里设定的属性。
以下是一个从网上找到的搜集浏览器详细资料的自定义构造函数的例子:
function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion); //主版本号
this.minor = parseFloat(navigator.appVersion);//全版本号
this.ns = ((agent.indexOf('mozilla')!=-1) && ((agent.indexOf('spoofer')==-1) && //是否 Netscape
(agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3)); //是否 Netscape 2
this.ns3 = (this.ns && (this.major == 3)); //是否 Netscape 3
this.ns4b = (this.ns && (this.minor < 4.04)); //是否 Netscape 4 低版本
this.ns4 = (this.ns && (this.major >= 4)); //是否 Netscape 4 高版本
this.ie = (agent.indexOf("msie") != -1); //是否 IE
this.ie3 = (this.ie && (this.major == 2)); //是否 IE 3
this.ie4 = (this.ie && (this.major >= 4)); //是否 IE 4
this.op3 = (agent.indexOf("opera") != -1); //是否 Opera 3
this.win = (agent.indexOf("win")!=-1); //是否windows 版本
this.mac = (agent.indexOf("mac")!=-1); //是否 Macintosh 版本
this.unix = (agent.indexOf("x11")!=-1); //是否 Unix 版本
}
var is = new Is();
这个构造函数非常完整的搜集了浏览器的信息。我们看到它为对象定义了很多个属性:major, minor, ns, ie, win, mac 等等。它们的意思见上面的注释。把 is 变量定义为 Is() 对象后,用 if (is.ns) 这种格式就可以很方便的知道浏览器的信息了。
让我们再来看一个使用参数的构造函数:
function myFriend(theName, gender, theAge, birthOn, theJob) {
this.name = theName;
this.isMale = (gender.toLowerCase == 'male');
this.age = theAge;
this.birthday = new Date(birthOn);
this.job = theJob
}
var Stephen = new myFriend('Stephen', 'Male', 18, 'Dec 22, 1982', 'Student');
从这个构造函数我们不但看到了参数的用法,还看到了不同的属性用不同的数据型是可以的,还看到了构造函数里也可以用构造函数来“构造”属性。如果用了足够的“保护措施”来避免无限循环,更可以用构造函数自身来构造自己的属性。
使用框架
在讲述 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”属性。
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; astvisited=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 了。
document.write("向页面写入文字");
获得元素对象:
document.getElementById(id) Or document.getElementsByTagName(tag)
读写对象属性:
object.getAttribute(attribute) object.setAttribute(attribute,value)
创建元素:
document.createElement(nodeName)
添加子节点:
parent.appendChild(child)
创建text node:
document.createTextNode(text)
有三类nodeType,可以针对特定的类型节点编程:
a. Element nodes have a nodeType value of 1.
b. Attribute nodes have a nodeType value of 2.
c. Text nodes have a nodeType value of 3.
Tip:
1.if (something != null).可以简化为if (something)
2.node.childNodes[0]可简化为node.firstChild ;node.childNodes[node.childNodes.length-1]可简化为node.lastChild