JavaScript初学者指南
本文译自:http://www.codeproject.com/KB/scripting/jsbeginner.aspx
原文:JavaScript For Beginners
适宜对象:JavaScript初学者。
目录:
包含与引入(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 |
getDay |
getSeconds |
窗口(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”标准包含框架集代码。
若有心读者发现错译之处,敬请告知,万分感谢。