JavaScript Date（日期）对象
日期对象用于处理日期和时间。
JavaScript Date（日期）对象 实例
-
返回当日的日期和时间
- 如何使用 Date() 方法获得当日的日期。
-
<html>
<body><script type="text/javascript">
document.write(Date())
</script>
</body>
</html>
- getTime()
- 使用 getTime() 计算从 1970 年到今天有多少年。
-
<html>
<body><script type="text/javascript">
var minutes = 1000*60
var hours = minutes*60
var days = hours*24
var years = days*365
var d = new Date()
var t = d.getTime()
var y = t/yearsdocument.write("It's been: " + y + " years since 1970/01/01!")
</script>
</body>
</html>
- 如何使用 setFullYear() 得到精确的日期。 toUTCString()
- 如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。 getDay()
- 如何使用 getDay() 来显示星期，而不仅仅是数字。 显示一个钟表
- 如何在网页上显示一个钟表。
<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>
我们提供 JavaScript Date 对象参考手册，其中包括所有可用于日期对象的属性和方法。
该手册包含了对每个属性和方法的详细描述以及相关实例。
定义日期
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：
var myDate=new Date()
注释：Date 对象自动使用当前的日期和时间作为其初始值。
操作日期
通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。
在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：
var myDate=new Date()
myDate.setFullYear(2008,7,9)
注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。
在下面的例子中，我们将日期对象设置为 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（数组）对象
数组对象的作用是：使用单独的变量名来存储一系列的值。
实例
-
创建数组
- 创建数组，为其赋值，然后输出这些值。
-
<html>
<body><script type="text/javascript">
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"for (i=0;i<mycars.length;i++)
{
document.write(mycars[i] + "<br />")
}
</script></body>
</html>
- 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>
- 合并两个数组 - concat()
- 如何使用 concat() 方法来合并两个数组。
-
<html>
<body><script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"document.write(arr.concat(arr2))
</script>
</body>
</html>
- 用数组的元素组成字符串 - join()
- 如何使用 join() 方法将数组的所有元素组成一个字符串。
<html>
<body>
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));
</script>
</body>
</html>
-
文字数组 - sort()
- 如何使用 sort() 方法从字面上对数组进行排序。
<html>
<body>
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
</body>
</html>
-
数字数组 - sort()
- 如何使用 sort() 方法从数值上对数组进行排序。
<html>
<body>
<script type="text/javascript">
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
</body>
定义数组
数组对象用来在单独的变量名中存储一系列的值。
我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象：
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")
注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变量，而不是字符变量。
访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
下面是代码行：
document.write(mycars[0])
下面是输出：
Saab
修改已有数组中的值
如需修改已有数组中的值，只要向指定下标号添加一个新值即可：
mycars[0]="Opel";
现在，以上代码：
document.write(mycars[0]);
将输出：
Opel
JavaScript Math（算数）对象
Math（算数）对象的作用是：执行常见的算数任务。
实例
round()
- 如何使用 round()。 document.write(Math.round(0.60) + "<br />")
-
random()
- 如何使用 random() 来返回 0 到 1 之间的随机数。 document.write(Math.random()) max()
- 如何使用 max() 来返回两个给定的数中的较大的数。 document.write(Math.max(5,7) + "<br />") min()
- 如何使用 min() 来返回两个给定的数中的较小的数。 document.write(Math.min(5,7) + "<br />")
Math 对象
Math（算数）对象的作用是：执行普通的算数任务。
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
算数值
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 对象访问的算数值以外，还有几个函数（方法）可以使用。
函数（方法）实例：
下面的例子使用了 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 就是这种模式。
简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置，以及要检索的字符类型，等等。
定义 RegExp
RegExp 对象用于存储检索模式。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：
var patt1=new RegExp("e");当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。
RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
例子：
var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free"));由于该字符串中存在字母 "e"，以上代码的输出将是：
trueexec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
例子 1：
var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free"));由于该字符串中存在字母 "e"，以上代码的输出将是：
e例子 2：
您可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 "g" 参数 ("global")。
如需关于如何修改搜索模式的完整信息，请访问我们的 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" 字母，代码的输出将是：
eeeeeenullcompile()
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完整的 RegExp 对象参考手册
如需可与 RegExp 对象一同使用所有属性和方法的完整信息，请访问我们的 RegExp 对象参考手册。
这个参考手册包含了对 RegExp 对象中每个属性和方法的详细描述，以及使用的例子。
JavaScript HTML DOM 对象
除了内置的 JavaScript 对象以外，你还可以使用 JavaScript 访问并处理所有的 HTML DOM 对象。
更多 JavaScript 对象
点击以下链接，可以获得以下对象的更多信息，包括它们的集合、属性、方法以及事件。
对象 描述 Window JavaScript 层级中的顶层对象。Window 对象表示浏览器窗口。每当 <body> 或者 <frameset> 标签出现，Window 对象就会被自动创建。 Navigator 包含客户端浏览器的信息。 Screen 包含客户端显示屏的信息。 History 包含了浏览器窗口访问过的 URL。 Location 包含了当前URL的信息。 HTML DOM
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
点击下面的链接，可获得更多关于如何使用 JavaScript 来访问和处理 DOM 对象的知识：
对象 描述 Document 代表整个 HTML 文档，用来访问页面中的所有元素。 Anchor 代表 <a> 元素。 Area 代表图像地图中的 <area> 元素。 Base 代表 <base> 元素。 Body 代表图像地图中的 <body> 元素。 Button 代表 <button> 元素。 Event 代表事件的状态 Form 代表 <form> 元素 Frame 代表 <frame> 元素 Frameset 代表 <frameset> 元素 Iframe 代表 <iframe> 元素 Image 代表 <img> 元素 Input button 代表 HTML 表单中的按钮 Input checkbox 代表 HTML 表单中的选择框 Input file 代表 HTML 表单中的 fileupload 。 Input hidden 代表 HTML 表单中的隐藏域。 Input password 代表 HTML 表单中的密码域。 Input radio 代表 HTML 表单中的单选框。 Input reset 代表 HTML 表单中的重置按钮。 Input submit 代表 HTML 表单中的确认按钮。 Input text 代表 HTML 表单中的文本输入域。 Link 代表 <link> 元素 Meta 代表 <meta> 元素 Object 代表一个 <Object> 元素 Option 代表 <option> 元素 Select 代表 HTML 表单中的选择列表。 Style 代表某个单独的样式声明。 Table 代表 <table> 元素。 TableData 代表 <td> 元素。 TableRow 代表 <tr> 元素。 Textarea 代表 <textarea> 元素。
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 标准.
Document 对象集合
集合 描述 IE F O W3C all[] 提供对文档中所有 HTML 元素的访问。 4 1 9 No anchors[] 返回对文档中所有 Anchor 对象的引用。 4 1 9 Yes applets 返回对文档中所有 Applet 对象的引用。 - - - - forms[] 返回对文档中所有 Form 对象引用。 4 1 9 Yes images[] 返回对文档中所有 Image 对象引用。 4 1 9 Yes links[] 返回对文档中所有 Area 和 Link 对象引用。 4 1 9 Yes Document 对象属性
属性 描述 IE F O W3C body 提供对 <body> 元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie 设置或返回与当前文档有关的所有 cookie。 4 1 9 Yes domain 返回当前文档的域名。 4 1 9 Yes lastModified 返回文档被最后修改的日期和时间。 4 1 No No referrer 返回载入当前文档的文档的 URL。 4 1 9 Yes title 返回当前文档的标题。 4 1 9 Yes URL 返回当前文档的 URL。 4 1 9 Yes Document 对象方法
方法 描述 IE F O W3C close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 4 1 9 Yes getElementById() 返回对拥有指定 id 的第一个对象的引用。 5 1 9 Yes getElementsByName() 返回带有指定名称的对象集合。 5 1 9 Yes getElementsByTagName() 返回带有指定标签名的对象集合。 5 1 9 Yes open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 4 1 9 Yes write() 向文档写 HTML 表达式 或 JavaScript 代码。 4 1 9 Yes writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 4 1 9 Yes Document 对象描述
HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。
很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。
write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。
JavaScript 浏览器检测
实例
检测浏览器及版本
- 使用 JavaScript 检测关于访问者的浏览器名称及其版本。
检测浏览器的更多信息- 使用 JavaScript 检测关于访问者浏览器的更多信息。
<html>
<body>
<script type="text/javascript">
document.write("<p>浏览器：")
document.write(navigator.appName + "</p>")document.write("<p>浏览器版本：")
document.write(navigator.appVersion + "</p>")document.write("<p>代码：")
document.write(navigator.appCodeName + "</p>")document.write("<p>平台：")
document.write(navigator.platform + "</p>")document.write("<p>Cookies 启用：")
document.write(navigator.cookieEnabled + "</p>")document.write("<p>浏览器的用户代理报头：")
document.write(navigator.userAgent + "</p>")
</script>
</body>
</html>
检测浏览器的全部信息
- 使用 JavaScript 检测关于访问者浏览器的全部信息。
<html>
<body><script type="text/javascript">
var x = navigator;
document.write("CodeName=" + x.appCodeName);
document.write("<br />");
document.write("MinorVersion=" + x.appMinorVersion);
document.write("<br />");
document.write("Name=" + x.appName);
document.write("<br />");
document.write("Version=" + x.appVersion);
document.write("<br />");
document.write("CookieEnabled=" + x.cookieEnabled);
document.write("<br />");
document.write("CPUClass=" + x.cpuClass);
document.write("<br />");
document.write("OnLine=" + x.onLine);
document.write("<br />");
document.write("Platform=" + x.platform);
document.write("<br />");
document.write("UA=" + x.userAgent);
document.write("<br />");
document.write("BrowserLanguage=" + x.browserLanguage);
document.write("<br />");
document.write("SystemLanguage=" + x.systemLanguage);
document.write("<br />");
document.write("UserLanguage=" + x.userLanguage);
</script></body>
</html>- 根据浏览器类型提醒用户
- 使用 JavaScript 检测关于访问者的浏览器名称及其版本，然后根据这些信息生成不同内容的警告框。
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))
{alert("您的浏览器够先进了！")}
else
{alert("是时候升级您的浏览器了！")}
}
</script>
</head><body οnlοad="detectBrowser()">
</body></html>
浏览器检测
本教程中几乎所有的代码均可在任何支持 JavaScript 的浏览器中运行。不过个别的代码无法运行于特定的浏览器，特别是老式的浏览器。
所以，有些时候对访问者的浏览器类型及版本进行检测是很有帮助的，然后可在此基础上为访问者提供合适的信息。
要做到这一点，最好的办法是使你的网页变得足够聪明，这样的话它就可以不同的方式对待不同类型的浏览器。
JavaScript 包含一个名为 Navigator 的对象，它就可以完成上述的任务。
Navigator 包含了有关访问者浏览器的信息，包括浏览器类型、版本等等。
Navigator 对象
JavaScript Navigator 对象包含了有关访问者浏览器的所有信息。接下来我们学习 Navigator 对象的两个属性。
appName
- 保存浏览器类型
appVersion- 存有浏览器的版本信息（其他信息中的一项）
实例
<html> <body> <script type="text/javascript"> var browser=navigator.appNamevar b_version=navigator.appVersionvar version=parseFloat(b_version) document.write("Browser name: "+ browser) document.write("<br />") document.write("Browser version: "+ version) </script> </body> </html>上面例子中的 browser 变量存有浏览器的名称，比如，"Netscape" 或者 "Microsoft Internet Explorer"。
上面例子中的 appVersion 属性返回的字符串所包含的信息不止是版本号而已，但是现在我们只关注版本号。我们使用一个名为 parseFloat() 的函数会抽取字符串中类似十进制数的一段字符并将之返回，这样我们就可以从字符串中抽出版本号信息了。
重要事项：在 IE 5.0 及以后版本中，版本号是不正确的！在 IE 5.0 和 IE 6.0 中，微软为 appVersion 字符串赋的值是 4.0。怎么会出现这样的错误呢？无论如何，我们需要清楚的是，JavaScript 在 IE6、IE5 和 IE4 中的获得的版本号是相同的。
实例
下面的脚本会根据访问者的浏览器类型显示不同的警告。
<html> <head> <script type="text/javascript"> function detectBrowser() {var browser=navigator.appName var b_version=navigator.appVersion var version=parseFloat(b_version) if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4)) {alert("Your browser is good enough!")} else {alert("It's time to upgrade your browser!")}} </script> </head> <body οnlοad="detectBrowser()"> </body> </html>cookie 用来识别用户。
实例
创建一个欢迎 cookie
- 利用用户在提示框中输入的数据创建一个 JavaScript Cookie，当该用户再次访问该页面时，根据 cookie 中的信息发出欢迎信息。
<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>
什么是cookie?
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
有关cookie的例子：
名字 cookie
- 当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。
密码 cookie- 当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。
日期 cookie- 当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。
创建和存储 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 表单验证
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 动画
我们可以使用 JavaScript 来创建动态的图像。
实例
按钮动画
- 利用两个不同的事件来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。
<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="../index.shtml" target="_blank"> <img border="0" alt="Visit CSS在线!" src="../i/eg_mouse2.jpg" name="b1" οnmοuseοver="mouseOver()" οnmοuseοut="mouseOut()" /></a> </body> </html>
JavaScript 动画
使用 JavaScript 创建动态图像是可行的。
窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。
在下面的例子中，我们要制作一个充当链接按钮的图像。我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。
HTML 代码
这是 HTML 代码：
<a href="http://www.csscss.org" target="_blank"> <img border="0" alt="Visit CSS在线!" 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"> functionmouseOver(){ document.b1.src ="/i/eg_mouse.jpg" } functionmouseOut(){ document.b1.src ="/i/eg_mouse2.jpg" } </script> </head> <body> <a href="http://www.csscss.org" target="_blank"> <img border="0" alt="Visit CSS在线!" src="/i/eg_mouse2.jpg" name="b1"onmouseOver="mouseOver()" onmouseOut="mouseOut()"/> </a> </body> </html>JavaScript 图像地图
图像地图指的是带有可点击区域的图像。
实例
简单的 HTML 图像映射 本例演示一幅没有添加 JavaScript 的图像映射。
<html><body><img src="../i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap"><area shape="circle" coords="180,139,14" href ="../example/html/venus.shtml" target ="_blank" alt="Venus" /><area shape="circle" coords="129,161,10" href ="../example/html/mercur.shtml" target ="_blank" alt="Mercury" /><area shape="rect" coords="0,0,110,260" href ="../example/html/sun.shtml" target ="_blank" alt="Sun" /></map></body> </html>添加了 JavaScript 的图像映射 本例演示一幅添加了 JavaScript 的图像映射，当鼠标浮动于某个热点上时，会调用 JavaScript 函数来显示热点所对应的星球的简介。
<html> <head> <script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt } </script> </head>
<body> <img src="../i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')" href ="../example/html/venus.shtml" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" onMouseOver="writeText('从地球上是很难研究水星的，这样由于它和太阳的距离总是很近。')" href ="../example/html/mercur.shtml" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')" href ="../example/html/sun.shtml" target ="_blank" alt="Sun" />
</map>
<p id="desc"></p>
</body> </html>
JavaScript 图像地图
我们已经从 HTML 教程中了解到，图像地图是带有可点击区域的图像。通常情况下，每个区域是一个相关的超级链接。单击某个区域，就回到达相关的链接。
实例
下面的例子演示如何创建带有可点击区域的 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，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
实例
简单的计时
- 单击本例中的按钮后，会在 5 秒后弹出一个警告框。
另一个简单的计时<html> <head> <script type="text/javascript"> function timedMsg() { var t=setTimeout("alert('5 秒！')",5000) } </script> </head>
<body> <form> <input type="button" value="显示定时的警告框" onClick = "timedMsg()"> </form> <p>请点击上面的按钮。警告框会在 5 秒后显示。</p> </body>
</html>
- 本例中的程序会执行 2 秒、4 秒和 6 秒的计时。
在一个无穷循环中的计时事件<html> <head> <script type="text/javascript"> function timedText() { var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000) var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000) var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000) } </script> </head>
<body>
<form> <input type="button" value="显示计时的文本" onClick="timedText()"> <input type="text" id="txt"> </form>
<p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p> </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) } </script> </head>
<body>
<form> <input type="button" value="开始计时！" onClick="timedCount()"> <input type="text" id="txt"> </form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</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) }
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>
<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>
- 一个 JavaScript 小时钟
JavaScript 计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout()
- 未来的某时执行代码
clearTimeout()- 取消setTimeout()
setTimeout()
语法
var t=setTimeout("javascript语句",毫秒)setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示：1000 毫秒等于一秒。
实例
当下面这个例子中的按钮被点击时，一个提示框会在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+1t=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+1t=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 对象
对象有助于组织信息。
实例
创建对象的实例
- 本例向您展示如何创建 JavaCript 对象的实例 (instance)。
创建用于对象的模板<html> <body>
<script type="text/javascript">
personObj=new Object() personObj.firstname="John" personObj.lastname="Adams" personObj.age=35 personObj.eyecolor="black"
document.write(personObj.firstname + " 的年龄是 " + personObj.age + " 岁。")
</script>
</body> </html>
- 本例向您展示如何创建 JavaCript 对象的模板 (template)。
<html> <body>
<script type="text/javascript">
function person(firstname,lastname,age,eyecolor) { this.firstname=firstname this.lastname=lastname this.age=age this.eyecolor=eyecolor }
myFather=new person("John","Adams",35,"black")
document.write(myFather.firstname + " 的年龄是 " + myFather.age + " 岁。")
</script>
</body> </html>
JavaScript 对象
在本教程前面的章节，我们已经学习到 JavaScript 拥有若干内置的对象，比如 String、Date、Array 等等。除了这些对象，你还可以创建自己的对象。
对象仅仅是一种特殊的数据类型而已，并拥有一系列的属性和方法。
让我们用一个例子来理解：一个人就是一个对象。属性是和对象有关的值。人的属性包括其名字、身高、体重、年纪、肤色、眼睛的颜色等等。所有的人都有这些属性，但是每个人的属性的值却各不相同。对象也拥有方法。方法是可施加于对象上的行为。人的方法可能是吃、睡、工作、玩等等。
属性
访问对象的属性的方法：
对象名.属性名通过简单地向属性赋值，你就可以向对象添加属性。假定存在 personObj 这个对象 － 你可以添加诸如 firstname、lastname、age 以及 eyecolor 等属性。
personObj.firstname="John" personObj.lastname="Doe" personObj.age=30 personObj.eyecolor="blue" document.write(personObj.firstname)上面的代码生成以下的输出：
John方法
对象可包含方法。
使用下面的语法来调用方法:
对象名.方法名()注意：位于括号之间的用于方法的参数是可以省略的。
调用名为 sleep 的 personObj 对象的方法：
personObj.sleep()创建你自己的对象
有多种不同的办法来创建对象：
1. 创建对象的实例
下列代码创建了一个对象的实例，并向其添加了四个属性：
personObj=new Object() personObj.firstname="John" personObj.lastname="Doe" personObj.age=50 personObj.eyecolor="blue"向 personObj 添加方法也很简单。下列代码向 personObj 添加了名为 eat() 的方法：
personObj.eat=eat2. 创建对象的模版
模版定义了对象的结构。
function person(firstname,lastname,age,eyecolor) { this.firstname=firstname this.lastname=lastname this.age=age this.eyecolor=eyecolor }注意：模版仅仅是一个函数。你需要在函数内部向 this.propertiName 分配内容。
一旦拥有模版，你就可以创建新的实例，就像这样：
myFather=new person("John","Doe",50,"blue") myMother=new person("Sally","Rally",48,"green")同样可以向 person 对象添加某些方法。并且同样需要在模版内进行操作：
function person(firstname,lastname,age,eyecolor) { this.firstname=firstname this.lastname=lastname this.age=age this.eyecolor=eyecolor this.newlastname=newlastname }注意：方法只是依附于对象的函数而已。然后，我们需要编写 newlastname() 函数：
function newlastname(new_lastname) { this.lastname=new_lastname }Newlastname() 函数定义 person 的新的 lastname，并将之分配给 person。通过使用 “this.”，JavaScript 即可得知你指的 person 是谁。因此，现在你可以这样写：myMother.newlastname("Doe")。
课外书
如需更多有关 JavaScript 对象的知识，请阅读 JavaScript 高级教程中的相关内容：
ECMAScript 面向对象技术
- 本节简要介绍了面向对象技术的术语、面向对象语言的要求以及对象的构成。
ECMAScript 对象应用- 本节讲解了如何声明和实例化对象，如何引用和废除对象，以及绑定的概念。
ECMAScript 对象类型- 本节介绍了 ECMAScript 的三种类型：本地对象、内置对象和宿主对象，并提供了指向相关参考手册的链接。
ECMAScript 对象作用域- 本节讲解了 ECMAScript 作用域以及 this 关键字。
ECMAScript 定义类或对象- 本节详细讲解了创建 ECMAScript 对象或类的各种方式。
ECMAScript 修改对象- 本节讲解了如何通过创建新方法或重定义已有方法来修改对象。
JavaScript 总结
现在已经你已经学习了 JavaScript，接下来该学习什么呢？
JavaScript 概要
本教程中我们向您讲授了如何向 html 页面添加 JavaScript，使得网站的动态性和交互性更强。
你已经学习了如何创建对事件的响应，验证表单，以及如何根据不同的情况运行不同的脚本。
你也学到了如何创建和使用对象，以及如何使用 JavaScript 的内置对象。
如需更多关于 JavaScript 的信息和知识，请参阅我们的 JavaScript 实例 和 JavaScript 参考手册。
现在已经你已经学习了 JavaScript，接下来该学习什么呢？
下一步应该学习 HTML DOM 和 DHTML。
如果你希望学习关于服务器端脚本的知识，那么下一步应该学习 ASP。
HTML DOM
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
HTML DOM 独立于平台和语言，可被任何编程语言使用，比如 Java、JavaScript 和 VBscript。
假如希望了解更多关于 DOM 的知识，请访问我们的 HTML DOM 教程。
DHTML
DHTML 是 HTML、CSS 和 JavaScript 的集合。DHTML 用于创建动态的交互式的网站。
W3C 有过这样的描述： "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."
假如你希望学习更多关于 DHTML 的知识，请访问我们的 DTHML 教程。
ASP
和 HTML 文档中的脚本运行于客户端（浏览器）不同，ASP 文件中的脚本运行于服务器之上。
使用 ASP，你可以动态地编辑、改变或者添加网站内容，对由 HTML 表单提交而来的数据进行响应，访问数据或者数据库并向浏览器返回结果，或者定制对不同的用户来说更有帮助的网页。由于 ASP 文件返回纯粹的 HTML，因此可被任何浏览器所读取。
如果希望学习更多关于 ASP 的知识，请访问我们的 ASP 教程。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
