目录：
包含与引入(Embedding,including)
write 和 writeln
文档对象（document object）
bgColor 和 fgColor
消息框（Message Box）
变量（Variables）和条件（Conditions）
函数（Function）
onClick
onLoad
onUnload
表单（Form）
onBlur
连接（Link）
日期（Date）
窗口（window）
重新载入（Reload）
加载（Loading）
遥控窗口
开启器（opener）
框架（Frame）
包含与引入（Embedding and including）
让我们先看一个简单的例子：
<html>
<head>
<title>This is a JavaScript example</title>
<script language="JavaScript">
<!--
document.write("Hello World!");
//-->
</script>
</head>
<body> Hi, man! </body>
</html>
通常情况下，JavaScript代码是以<script language="JavaScript">开头，并以</script>结尾，整个代码放在<head> 和 </head>之间。不过有时也可以放在<body>标签中，比如：
<html>
<head></head>
<body>
<script>
.....// The code embedded in the <body> tags.
</script>
</body>
</html>
为什么我们要把代码放到注释<!—和 //-->中呢？这是确保一些不支持JavaScript的低版本浏览器不显示这些脚本。这是一种很好的做法。此外，指定语言属性也是一种选择，你必须指定特定的JavaScript版本：
<script language="JavaScript1.2">
你可以使用src 属性来包含外部JavaScript文件：
<script language="JavaScript" src="hello.js"></script>
比如,外部hello.js文件代码如下：
document.write("Hello World!")
外部文件是一个包含JavaScript代码并以 ”.js” 为后缀的文本文件，注意：
1. 仅有4.0以上版本浏览器才能可靠地跨平台支持这种外部引用脚本的方式。
2. 代码中不能包含<script language...>和 </script>等标签，否则会报错。
write 和 writeln
在JavaScript中，要输出文本，你必须使用write()或者 writeln()，这儿给出一个例子：
<HTML>
<HEAD>
<TITLE> Welcome to my site</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
document.write("Welcome to my site!");
// -->
</SCRIPT>
</BODY>
</HTML>
注意：文档对象（document object） write 是小写字母，JavaScript是大小写敏感的。write 和writeln的区别在于：write 仅仅输出文本，而writeln可以输出文本和换行符。
文档对象（document object）
文档对象是JavaScript中最重要的对象，下面是一个很简单的JavaScript代码：
document.write("Hi there.")
在代码中，document 是一个对象，write是这个对象的方法。让我们看一下文档对象所拥有的其他方法：
lastModified
你可以使用以下代码来显示你页面的最近更新日期：
<script language="JavaScript">
document.write("This page created by John N. Last update:" + document.lastModified);
</script>
在这里您需要用到document的lastModified 属性，注意我们用 “+” 号连接了” This page created by John N. Last update:” 和 “document.lastModified”.
比如显示结果为： This page created by John N. Last update: 04/28/2010 08:33:08 （译者测试）
bgColor 和 fgColor
让我们试着玩一下bgColor 和 fgColor:
<script>
document.bgColor="black"
document.fgColor="#336699"
</script>
这样可以使整个页面显示为黑色背景，白色文字的效果。
消息框（Message Box）
alert
这里有三种消息框：alert，confirm，和prompt，首先让我们看第一个：
<body>
<script>
window.alert("Welcome to my site!")
</script>
</body>
你可以在引号内放任何你想要的东西。
confirm
一个confirm box的例子：
window.confirm("Are you sure you want to quit?")
此消息框可以方便用户选择确定或取消，多用于某项操作前的确认，返回值为true或false。（译者注）
prompt
prompt box 允许用户根据提示输入一些确认信息：
window.prompt("please enter user name")
以上所有的例子，我们都用了像window.alert()这样的方法。实际上，我们可以用以下简单的方法代替：
alert()
confirm()
prompt()
变量（Variables）和条件（Conditions）
让我们看个例子：
<script>
var x=window.confirm("Are you sure you want to quit")
if (x)
window.alert("Thank you.")
else
window.alert("Good choice.")
</script>
在此，我们应该知道几个概念。首先 var x= 是一个变量的声明。如果你想创建一个变量，你必须用var语句声明一个变量。x 将获取结果，也就是true或false。然后我们用一个条件语句if else，让脚本能从两种结果中做出选择（条件如下）。如果结果为true（用户点击了”确定”），窗口将弹出”Thank you.”消息框。如果结果是false（用户点击了”取消”）,窗口将被替换为”Good choice.”消息框。因此，我们可以用var，if和这些基本方法实现更复杂的消息框。
<script>
var y=window.prompt("please enter your name")
window.alert(y)
</script>
另一个例子：
<html><head>
<script>
var x=confirm("Are you sure you want to quit?")
if (!x)
window.location="http://www.yahoo.com"
</script>
</head>
<body>
Welcome to my website!.
</body></html>
如果你点击了”取消”,它将带你去yahoo首页，点击”确定”将继续加载当前页面” Welcome to my website!”.
注意：if（！x）意思是：如果点击””.在JavaScript中，感叹号” ！” 表示”none”。
函数（Function）
函数是代码片段。让我们创建一个简单的函数：
function test()
{
document.write("Hello can you see me?")
}
注意如果仅仅把这些放在<script></script>标签内，你是看不到” Hello can you see me?”的。因为函数在你调用它之前是不会自动执行的。所以我们应该这么做：
function test()
{
document.write("Hello can you see me?")
}
test()
最后一个test()是调用函数，现在你就课可以看到” Hello can you see me?”了。
事件处理程序
事件处理程序是什么？可以认为它是事件发生时，执行JavaScript的触发器。比如点击鼠标或鼠标移动到连接上，提交表单等等。
点击(onClick)
onClick是仅当用户点击按钮，连接等时才去执行程序。让我们看个例子：
<script>
function ss()
{
alert("Thank you!")
}
</script>
<form>
<input type="button" value="Click here" onclick="ss()">
</form>
当用户点击按钮时，函数ss() 被调用。注意：事件处理程序并不会被添加到<script>标签内，但会被放入html标签中。
加载（onLoad）
onload 事件处理程序用于调用加载后的JavaScript执行程序：
<body onload="ss()">
<frameset onload="ss()">
<img src="whatever.gif" onload="ss()">
onMouseover , onMouseout
这些处理程序仅仅被用于超链接。
<a href="#" onMouseOver="document.write('Hi, nice to see you!">Over Here!</a>
<a href="#" onMouseOut="alert('Good try!')">Get Out Here!</a>
onUnload
当有人离开（或刷新）页面时，onunload事件执行JavaScript。比如用作感谢用户。
<body onunload="alert('Thank you for visiting us. See you soon')">
处理多种操作（Handle multiple actions）
你想怎么样使事件处理程序能调用多个函数或者多个语句呢？这很简单。你只需照常把函数嵌入到事件处理程序中即可，不过要使用分号（;）分隔它们。
<form>
<input type="button" value="Click here!" onClick="alert('Thanks
for visiting my site!');window.location='http://www.yahoo.com'">
</form>
表单（Form）
比如说，你有这样一个表单：
<form name="aa">
<input type="text" size="10" value="" name="bb"><br>
<input type="button"
value="Click Here"onclick="alert(document.aa.bb.value)">
</form>
注意我们给了表单名称和元素。因此JavaScript可以获取它们。
onBlur
（也就是当鼠标离开文本框式所触发的事件）如果你想获取用户信息并且逐一检查各项元素（即：用户名，密码，E-mail），以及警告用户纠正错误，然后重新输入时，你可以使用onBlur。让我们看看onblur是如何工作的：
<html><head><script>
function emailchk()
{
var x=document.feedback.email.value
if (x.indexOf("@")==-1)
{
alert("It seems you entered an invalid email address.")
document.feedback.email.focus()
}
}
</script></head><body>
<form
name="feedback">
Email:<input type="text" size="20" name="email"
onblur="emailchk()"><br>
Comment: <textarea name="comment" rows="2" cols="20"></textarea><br>
<input type="submit" value="Submit">
</form>
</body></html>
如果你输入的email地址不包含@，你将得到一个重新输入数据的警告。”x.indexOf(@)==-1”
又是什么呢？这是JavaScript的一个方法，它可以在一个字符串中逐个搜索我们想要的字符。如果它找到了，将返回该字符在原字符串中的位置。否则，将返回-1。因此，x.indexOf("@")==-1可以
等价于：”如果字符串中不包含@，然后：
alert("It seems you entered an invalid email address.")
document.feedback.email.focus()
什么是focus()呢？它是让光标回到指定文本框的方法。Onsubmit 不像 onblur ，onsubmit 处理程序只能被放在<form>标签内，其他任何元素也不行。让我们看个例子：
<script>
<!--
function validate()
{
if(document.login.userName.value=="")
{
alert ("Please enter User Name")
return false
}
if(document.login.password.value=="")
{
alert ("Please enter Password")
return false
}
}
//-->
</script>
<form name="login" onsubmit="return validate()">
<input type="text" size="20" name="userName">
<input type="text" size="20" name="password">
<input type="submit" name="submit" value="Submit">
</form>
注意：
if(document.login.userName.value==""). 它的意思是”如果名为login的表单中名为userName的文本框为空，然后...”.返回 false。这被用于停止提交表单。默认地，表单提交后将会返回true。返回validate()，意思是，”如果提交，那就调用function validate()"。
使用登陆包含文件
让我们先看个例子：
<html><head>
<SCRIPT Language="JavaScript">
function checkLogin(x)
{
if ((x.id.value != "Sam")||(x.pass.value !="Sam123"))
{
alert("Invalid Login");
return false;
}
else
location="main.htm"
}
</script>
</head><body>
<form>
<p>UserID:<input type="text" name="id"></p>
<p>Password:<input type="password" name="pass"></p>
<p><input type="button" value="Login" onClick="checkLogin(this.form)"></p>
</form>
</body></html>
||意思是”或”，!= 表示”不等于”。因此我们可以这样描述脚本：”如果id不等于’Sam’，或者，密码不等于’Sam123’,然后弹出提示框（），并停止提交”。否则将打开”main.htm”页面。
连接（Link）
大多数情况下，表单可以被连接替代。
<a href="JavaScript:window.location.reload()">Click to reload!</a>
更多例子：
<a href="#" onClick="alert('Hello, world!')">Click me to say Hello</a><br>
<a href="#" onMouseOver="location='main.htm'">Mouse over to see Main Page</a>
日期（Date）
先让我们看个例子：
<HTML><HEAD><TITLE>Show
Date</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var x= new Date();
document.write (x);
</SCRIPT>
</BODY></HTML>
为了触发日期对象，你可以这样做：var x=new Date（）。无论何时，如果你想创建日期对象的实例，你只需在new后加上对象名（）即可。
动态显示不同页面
你可以在不同时间显示不同页面。这儿给出示例：
var banTime= new Date()
var ss=banTime.getHours()
if (ss<=12)
document.write("<img src='banner1.gif'>")
else
document.write("<img src='banner2.gif'>")
附：日期对象
| 方法 |
||
| getDate getTime getTimezoneOffset |
getDay getMonth getYear |
getSeconds getMinutes getHours |
窗口（window）
打开一个窗口
为了打开一个窗口，可以简单地使用”window.open(‘test.htm’)”方法：
<form>
<input type="button" value="Click here to see" onclick="window.open('test.htm')">
</form>
你可以把test.htm换成其他任何地址，比如：http://www.yahoo.com
尺寸（Size），工具栏（toolbar），菜单栏（menubar），滚动条（scrollbars），位置（location），状态（status）
让我们增加一些脚本属性来控制窗口的尺寸，显示工具栏，滚动条等。增加属性的语法如下：
open("URL","name","attributes")
例如：
<form>
<input type="button" value="Click here to see"
onclick="window.open('page2.htm','win1','width=200,height=200,menubar')">
</form>
另一个例子中，除了尺寸变化外，没有启用其它属性。
<form>
<input type="button" value="Click here to see"
onclick="window.open('page2.htm','win1','width=200,height=200')">
</form>
这儿给出你可以增加的所有属性列表：
| width |
height |
toolbar |
| location |
directories |
status |
| scrollbars |
resizable |
menubar |
重新载入（Reload）
重新载入一个窗口，可以使用下面的方法：
window.location.reload()
关闭窗口
你可以使用下面任意一个实现关闭窗口：
<form>
<input type="button" value="Close Window" onClick="window.close()">
</form>
<a href="javascript:window.close()">Close Window</a>
加载（Loading）
加载新内容到窗口中的基本语法是：
window.location="test.htm"
这等价于：
<a href="test.htm>Try this </a>
让我们给出一个例子，用户可以根据弹出的确认框选择要去的地方：
<script>
<!--
function ss()
{
var ok=confirm('Click "OK" to go to yahoo, "CANCEL" to go to hotmail')
if (ok)
location="http://www.yahoo.com"
else
location="http://www.hotmail.com"
}
//-->
</script>
远程控制窗口（Remote Control Window）
比方说，你想在现有的窗口中打开一个新的窗口。然后，你想在两个窗口之间做控制。要做到这一点，我们首先要给窗口命名。请看下面的例子：
<html><head><title></title></head>
<body>
<form>
<input type="button" value="Open another page"
onClick="aa=window.open('test.htm','','width=200,height=200')">
<input type="radio" name="x" onClick="aa.document.bgColor='red'">
<input type="radio" name="x" onClick="aa.document.bgColor='green'">
<input type="radio" name="x" onClick="aa.document.bgColor='yellow'">
</form>
</body></html>
开启器（opener）
我们可以使用”opener”属性来实现从打开的窗口进入新的主窗口。
先让我们创建一个主页：
<head>
<title></title>
</head>
<body>
<form>
<input type="button" value="Open another page"
onClick="aa=window.open('test.htm','','width=100,height=200')">
</form>
</body>
</html>
然后再创建控制页。(此例中命名test.htm)
<html>
<head>
<title></title>
<script>
function remote(url){
window.opener.location=url
}
</script>
</head>
<body>
<p><a href="#" onClick="remote('file1.htm')">File
1</a></p>
<p><a href="#" onClick="remote('file2.htm')">File
2</a></p>
</body>
</html>
立刻去试一下！
框架（Frame）
在加载多个框架时，最流行的应用就是在同一时间加载和改变多个框架中的内容。比方说我们有这样一个父框架：
<html>
<frameset cols="150,*">
<frame src="page1.htm" name="frame1">
<frame src="page2.htm" name="frame2">
</frameset>
</html>
我们可以在子框架中增加一个名为”frame1”的链接，它既可以同时改变页面1和页面2的内容。接下来提供实现它的html代码：
<html>
<body>
<h2>This is page 1 </h2>
<a href="page3.htm"
onClick="parent.frame2.location='page4.htm'">Click Here</a>
</body>
</html>
注意：你应该使用"parent.frameName.location"进入另一个框架。父框架的” parent”标准包含框架集代码。
本文摘自：http://www.cnblogs.com/Joyin/archive/2010/04/29/2262126.html
