在数百万张页面中，JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等等等。
JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，
比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。
*******************************************************************************************************************
定义JavaScript
如何把 JavaScript 放入 HTML 页面
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 <script> 标签（同时使用 type 属性来定义脚本语言）。
这样，<script type="text/javascript"> 和 </script> 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。
document.write 字段是标准的 JavaScript 命令，用来向页面写入输出。
*******************************************************************************************************************
HTML调用JavaScript
当页面载入时，会执行位于 body 部分的 JavaScript。
当被调用时，位于 head 部分的 JavaScript 才会被执行。
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
位于 head 部分的脚本：
当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到 head 部分后，
就可以确保在需要使用脚本之前，它已经被载入了。
<body>
<script type="text/javascript">
....
</script>
</body>
</html>
位于 body 部分的脚本：
在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。
在 body 和 head 部分的脚本：
你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到 body，又可以放置到 head 部分。
使用外部 JavaScript
<html>
<head>
<script src="xxx.js">....</script>
</head>
<body>
</body>
</html>
*******************************************************************************************************************
语句执行顺序和习惯
<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>
浏览器按照编写顺序依次执行每条语句。
本例向网页输出一个标题和两个段落
分号是可选的（根据 JavaScript 标准），浏览器把行末作为语句的结尾。
通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯
JavaScript 可以分批地组合起来。
代码块以左花括号开始，以右花括号结束
*******************************************************************************************************************
JavaScript 变量
JavaScript 变量名称的规则：
变量对大小写敏感（y 和 Y 是两个不同的变量）
变量必须以字母或下划线开始
注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。
声明（创建） JavaScript 变量
var x;
var carname;
var x=5;
var carname="Volvo";
JavaScript 算术
y=x-5;
z=y+5;
*******************************************************************************************************************
JavaScript 运算符
运算符 = 用于赋值。
运算符 + 用于加值。
用于字符串的 + 运算符 + 运算符用于把文本值或字符串变量加起来（连接起来）。
--------------------------------------------------------------
JavaScript 算术运算符
运算符 描述 例子 结果
+ 加 x=y+2 x=7
- 减 x=y-2 x=3
* 乘 x=y*2 x=10
/ 除 x=y/2 x=2.5
% 求余数 (保留整数) x=y%2 x=1
++ 累加 x=++y x=6
-- 递减 x=--y x=4
--------------------------------------------------------------
JavaScript 赋值运算符
运算符 例子 等价于 结果
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
---------------------------------------------------------------
比较运算符
运算符 描述 例子
== 等于 x==8 为 false
=== 全等（值和类型） x===5 为 true；x==="5" 为 false
!= 不等于 x!=8 为 true
> 大于 x>8 为 false
< 小于 x<8 为 true
>= 大于或等于 x>=8 为 false
<= 小于或等于 x<=8 为 true
----------------------------------------------------------------
逻辑运算符
运算符 描述 例子
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true
----------------------------------------------------------------
*******************************************************************************************************************
JavaScript If...Else 语句
If 语句
if (条件)
{
条件成立时执行代码
}
---------------------------------------------------------------
If...else 语句
if (条件)
{
条件成立时执行此代码
}
else
{
条件不成立时执行此代码
}
---------------------------------------------------------------
If...else if...else 语句
if (条件1)
{
条件1成立时执行代码
}
else if (条件2)
{
条件2成立时执行代码
}
else
{
条件1和条件2均不成立时执行代码
}
---------------------------------------------------------------
JavaScript Switch 语句
switch(n)
{
case 1:
执行代码块 1
break
case 2:
执行代码块 2
break
default:
如果n即不是1也不是2，则执行此代码
}
工作原理：switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。
然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，
那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行
*******************************************************************************************************************
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框
alert("文本")
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
---------------------------------------------------------------------------
确认框
confirm("文本")
认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
---------------------------------------------------------------------------
提示框
prompt("文本","默认值")
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
----------------------------------------------------------------------------
*******************************************************************************************************************
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
创建函数的语法：
function 函数名()
{
代码．．．
}
无参数的函数必须在其函数名后加括号
function 函数名(var1,var2,...,varX)
{
代码．．．
}
var1, var2 等指的是传入函数的变量或值。{ 和 } 定义了函数的开始和结束。
function" 这个词必须是小写的，否则 JavaScript 就会出错。另外需要注意的是，
必须使用大小写完全相同的函数名来调用函数。
----------------------------------------------------------------------------
return 语句
return 语句用来规定从函数返回的值。
因此，需要返回某个值的函数必须使用这个 return 语句。
function prod(a,b)
{
x=a*b
return x
}
当您调用上面这个函数时，必须传入两个参数：
product=prod(2,3)
而从 prod() 函数的返回值是 6，这个值会存储在名为 product 的变量中
----------------------------------------------------------------------------
avaScript 变量的生存期
当您在函数内声明了一个变量后，就只能在该函数中访问该变量。
当退出该函数后，这个变量会被撤销。这种变量称为本地变量。
您可以在不同的函数中使用名称相同的本地变量，
这是因为只有声明过变量的函数能够识别其中的每个变量。
如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。
这些变量的生存期从声明它们之后开始，在页面关闭时结束。
*******************************************************************************************************************
JavaScript 循环
for
将一段代码循环执行指定的次数
语法：
for (变量=开始值;变量<=结束值;变量=变量+步进值)
{
需执行的代码
}
实例：
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("The number is " + i)
document.write("<br />")
}
</script>
注释：步进值可以为负。如果步进值为负，需要调整 for 声明中的比较运算符。
----------------------------------------------------------------------------
while
当指定的条件为 true 时循环执行代码
语法：
while (变量<=结束值)
{
需执行的代码
}
实例：
<script type="text/javascript">
var i=0
while (i<=10)
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
</script>
----------------------------------------------------------------------------
do...while 循环
do...while 循环是 while 循环的变种。
该循环程序在初次运行时会首先执行一遍其中的代码，
然后当指定的条件为 true 时，它会继续这个循环。
所以可以这么说，do...while 循环为执行至少一遍其中的代码，
即使条件为 false，因为其中的代码执行后才会进行条件验证。
语法：
do
{
需执行的代码
}
while (变量<=结束值)
实例：
<html>
<body>
<script type="text/javascript">
var i=0
do
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
while (i<0)
</script>
</body>
</html>
*******************************************************************************************************************
JavaScript Break 和 Continue
Break
break 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）
实例：
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
结果：
The number is 0
The number is 1
The number is 2
----------------------------------------------------------------------------
Continue
continue 命令会终止当前的循环，然后从下一个值继续运行。
实例：
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){continue}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
结果：
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
*******************************************************************************************************************
JavaScript For...In 声明
For...In 声明用于对数组或者对象的属性进行循环操作。
for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。
语法：
for (变量 in 对象)
{
在此执行代码
}
“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。
实例：
使用 for ... in 循环遍历数组。
<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>
*******************************************************************************************************************
JavaScript 事件
onload 和 onUnload
当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。
onFocus, onBlur 和 onChange
onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
onSubmit
onSubmit 用于在提交表单之前验证所有的表单域。
onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
onerror
如果需要利用 onerror 事件，就必须创建一个处理错误的函数。
你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。
这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。
语法：
οnerrοr=handleErrfunction handleErr(msg,url,l)
{
//Handle the error here
return true or false
}
实例：
下面的例子展示如何使用 onerror 事件来捕获错误：
<html>
<head>
<script type="text/javascript">
οnerrοr=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="View message" οnclick="message()" />
</body>
</html>
*******************************************************************************************************************
JavaScript Try...Catch 语句
有两种在网页中捕获错误的方法：
使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)
注意：chrome、opera 和 safari 浏览器不支持 onerror 事件。
Try...Catch 语句
try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。
语法：
try
{
//在此运行代码
}
catch(err)
{
//在此处理错误
}
注意：try...catch 使用小写字母。大写字母会出错。
实例 1
下面的例子原本用在用户点击按钮时显示 "Welcome guest!" 这个消息。
不过 message() 函数中的 alert() 被误写为 adddlert()。这时错误发生了：
<html>
<head>
<script type="text/javascript">
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="View message" οnclick="message()" />
</body>
</html>
下面的例子用 try...catch 语句重新修改了脚本。
由于误写了 alert()，所以错误发生了。
不过这一次，catch 部分捕获到了错误，并用一段准备好的代码来处理这个错误。
这段代码会显示一个自定义的出错信息来告知用户所发生的事情。
<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!")
}
catch(err)
{
txt="此页面存在一个错误。\n\n"
txt+="错误描述: " + err.description + "\n\n"
txt+="点击OK继续。\n\n"
alert(txt)
}
}
</script>
</head>
<body>
<input type="button" value="View message" οnclick="message()" />
</body>
</html>
----------------------------------------------------------------------------
throw 声明的作用是创建 exception（异常或错误）。
Throw 声明
throw 声明的作用是创建 exception（异常）。
你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。
语法：
throw(exception)
exception 可以是字符串、整数、逻辑值或者对象。
注意：使用小写字母编写 throw。使用大写字母会出错！
实例 1
下面的实例的作用是测定变量 x 的值。
如果 x 的值大于 10 或者小于 0，错误就会被抛出 (throw)。
这个错误被 catch 的参数捕获后，就会显示出自定义的出错信息。
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high")
if(er == "Err2")
alert("Error! The value is too low")
}
</script>
</body>
</html>
*******************************************************************************************************************
JavaScript 特殊字符
插入特殊字符
反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。
请看下面的 JavaScript 代码：
var txt="We are the so-called "Vikings" from the north."
document.write(txt)
这意味着上面的字符串将被截为：We are the so-called。
var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
JavaScript 就可以输出正确的文本字符串了：We are the so-called "Vikings" from the north。
下面的表格列出了其余的特殊字符，这些特殊字符都可以使用反斜杠来添加到文本字符串中：
代码 输出
\' 单引号
\" 双引号
\& 和号
\\ 反斜杠
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\f 换页符
*******************************************************************************************************************
JavaScript 指导方针
JavaScript 对大小写敏感
名为 "myfunction" 的函数和名为 "myFunction" 的函数是两个不同的函数，同样，变量 "myVar" 和变量 "myvar" 也是不同的。
JavaScript 对大小写敏感 - 所以当您创建或使用变量、对象及函数时，请注意字符的大小写。
空格
JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格，使得代码的可读性更强。下面的两行是等效的：
name="Hege"
name = "Hege"
换行
您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的：
document.write("Hello \
World!")
但是不能像这样折行：
document.write \
("Hello World!")
*******************************************************************************************************************
JavaScript 对象简介
JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。
在下面的例子中，我们使用字符串对象的长度属性来计算字符串中的字符数目。
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length)
</script>
在下面的例子中，我们使用字符串对象的 toUpperCase() 方法来显示大写字母文本。
<script type="text/javascript">
var str="Hello world!"
document.write(str.toUpperCase())
</script>
计算字符串的长度
如何使用长度属性来计算字符串的长度。
为字符串添加样式
如何为字符串添加样式。
indexOf() 方法
如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。
match() 方法
如何使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
如何替换字符串中的字符 - replace()
如何使用 replace() 方法在字符串中用某些字符替换另一些字符。
----------------------------------------------------------------------------------
JavaScript Date（日期）对象 实例
返回当日的日期和时间
如何使用 Date() 方法获得当日的日期。
getTime()
使用 getTime() 计算从 1970 年到今天有多少年。
setFullYear()
如何使用 setFullYear() 得到精确的日期。
toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
getDay()
如何使用 getDay() 来显示星期，而不仅仅是数字。
显示一个钟表
如何在网页上显示一个钟表。
----------------------------------------------------------------------------------
定义日期
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：
var myDate=new Date()
注释：Date 对象自动使用当前的日期和时间作为其初始值。
在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：
var myDate=new Date()
myDate.setFullYear(2008,7,9)
在下面的例子中，我们将日期对象设置为 5 天后的日期：
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。
日期对象也可用于比较两个日期。
下面的代码将当前日期与 2008 年 8 月 9 日做了比较：
var myDate=new Date();
myDate.setFullYear(2008,7,9);
var today = new Date();
if (myDate>today)
{
alert("Today is before 9th August 2008");
}
else
{
alert("Today is after 9th August 2008");
}
*******************************************************************************************************************
JavaScript Array（数组）对象
创建数组
创建数组，为其赋值，然后输出这些值。
For...In 声明
使用 for...in 声明来循环输出数组中的元素。
合并两个数组 - concat()
如何使用 concat() 方法来合并两个数组。
用数组的元素组成字符串 - join()
如何使用 join() 方法将数组的所有元素组成一个字符串。
文字数组 - sort()
如何使用 sort() 方法从字面上对数组进行排序。
数字数组 - sort()
如何使用 sort() 方法从数值上对数组进行排序。
定义数组
var myArray=new Array()
有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。
1:
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一个整数自变量来控制数组的容量：
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2:
var mycars=new Array("Saab","Volvo","BMW")
*******************************************************************************************************************
JavaScript Boolean（逻辑）对象
Boolean 对象
您可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。
Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。
创建 Boolean 对象
使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象：
var myBoolean=new Boolean()
注释：如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。
否则，其值为 true（即使当自变量为字符串 "false" 时）！
下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
下面的所有的代码行均会创初始值为 true 的 Boolean 对象：
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Bill Gates");
*******************************************************************************************************************
JavaScript Math（算数）对象
round()
如何使用 round()。
random()
如何使用 random() 来返回 0 到 1 之间的随机数。
max()
如何使用 max() 来返回两个给定的数中的较大的数。
min()
如何使用 min() 来返回两个给定的数中的较小的数。
算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值：
常数
圆周率
2 的平方根
1/2 的平方根
2 的自然对数
10 的自然对数
以 2 为底的 e 的对数
以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。
document.write(Math.round(4.7))
上面的代码输出为：5
下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：
document.write(Math.random())
上面的代码输出为：0.9370844220218102
面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数：
document.write(Math.floor(Math.random()*11))
上面的代码输出为：3
*******************************************************************************************************************
JavaScript RegExp 对象
RegExp 是正则表达式的缩写。
当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
定义 RegExp
RegExp 对象用于存储检索模式。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：
var patt1=new RegExp("e");
当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。
RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
test() 方法检索字符串中的指定值。返回值是 true 或 false。
例子：
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：true
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
例子 1：
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：e
您可以向 RegExp 对象添加第二个参数，以设定检索.
在使用 "g" 参数时，exec() 的工作原理如下：
找到第一个 "e"，并存储其位置
如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)
由于这个字符串中 6 个 "e" 字母，代码的输出将是：eeeeeenull
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。
例子：
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：truefalse
*******************************************************************************************************************
JavaScript Cookies
创建和存储 cookie
在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。
当访问者再次访问网站时，他们就会收到欢迎词。
首先，我们会创建一个可在 cookie 变量中存储访问者姓名的函数：
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
上面这个函数中的参数存有 cookie 的名称、值以及过期天数。
在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。
之后，我们要创建另一个函数来检查是否已设置 cookie：
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
上面的函数首先会检查 document.cookie 对象中是否存有 cookie。
假如 document.cookie 对象存有某些 cookie，那么会继续检查我们指定的 cookie 是否已储存。
如果找到了我们要的 cookie，就返回值，否则返回空字符串。
最后，我们要创建一个函数，这个函数的作用是：如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
这是所有的代码：
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
*******************************************************************************************************************
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
面的函数用来检查用户是否已填写表单中的必填（或必选）项目。
假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
下面是连同 HTML 表单的代码：
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
-----------------------------------------------------------------------------------
E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
下面是连同 HTML 表单的完整代码：
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
*******************************************************************************************************************
JavaScript 动画
利用两个不同的事件来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。
在下面的例子中，我们要制作一个充当链接按钮的图像。
我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。
这是 HTML 代码：
<a href="http://www.w3school.com.cn" target="_blank">
<img border="0" alt="Visit W3School!"
src="/i/eg_mouse2.jpg" name="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
</a>
注意：我们已为图像添加了 name 属性，这样 JavaScript 就能找到它了。
onMouseOver 事件的作用是告知浏览器：
一旦鼠标悬浮于图像之上，浏览器就会执行某个函数，这个函数会把这副图像替换为另一幅。
onMouseOut 事件的作用是告知浏览器：
一旦鼠标离开图像，浏览器就要执行另一个函数，这个函数会重新插入原来的那幅图像。
JavaScript 代码
通过下面的代码来切换图像：
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src ="/i/eg_mouse2.jpg"
}
</script>
函数 mouseOver() 将图像切换为 "eg_mouse.jpg"。
函数 mouseOut() 将图像切换为 "eg_mouse2.jpg"。
完整的代码：
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn" target="_blank">
<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
</a>
</body>
</html>
*******************************************************************************************************************
JavaScript 图像地图
本例演示一幅添加了 JavaScript 的图像映射，当鼠标浮动于某个热点上时，会调用 JavaScript 函数来显示热点所对应的星球的简介。
实例
下面的例子演示如何创建带有可点击区域的 html 图像地图：
<img src ="planets.gif" width ="145" height ="126"
alt="Planets"usemap ="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank"
alt="Venus" />
</map>
添加 JavaScript
我们可向图像地图内部的 <area> 标签添加（能调用JavaScript的）事件。
<area> 标签支持以下事件：
onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。
这是添加了 JavaScript 的上面的例子：
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant
planets like Jupiter are by far the largest objects
in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very
difficult to study from the Earth because it is
always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was
often considered a twin sister to the Earth because
Venus is the nearest planet to us, and because the
two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
*******************************************************************************************************************
JavaScript 计时
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
setTimeout()
语法
var t=setTimeout("javascript语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。
假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。
这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出。
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>
实例 - 无穷循环
要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。
在下面的例子中，当按钮被点击后，输入域便从 0 开始计数。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>
----------------------------------------------------------------------
clearTimeout()
语法
clearTimeout(setTimeout_variable)
实例
下面的例子和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器：
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>
-----------------------------------------------------------------
使用计时事件制作的钟表
一个 JavaScript 小时钟
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body οnlοad="startTime()">
<div id="txt"></div>
</body>
</html>
-----------------------------------------------------------------
带有停止按钮的无穷循环中的计时事件
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时.</p>
</body>
</html>
*******************************************************************************************************************
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
