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> 

 

在这里您需要用到documentlastModified 属性,注意我们用 + 号连接了” 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

 

这里有三种消息框:alertconfirm,和prompt,首先让我们看第一个:

 

<body>
<script>
window.alert("Welcome to my site!")
</script>
</body>

 

你可以在引号内放任何你想要的东西。

 

confirm

 

一个confirm box的例子:

 

window.confirm("Are you sure you want to quit?") 

 

此消息框可以方便用户选择确定或取消,多用于某项操作前的确认,返回值为truefalse。(译者注)

 

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 将获取结果,也就是truefalse。然后我们用一个条件语句if else,让脚本能从两种结果中做出选择(条件如下)。如果结果为true(用户点击了”确定”),窗口将弹出”Thank you.”消息框。如果结果是false(用户点击了”取消”),窗口将被替换为”Good choice.”消息框。因此,我们可以用varif和这些基本方法实现更复杂的消息框。

 

<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”标准包含框架集代码。

 

若有心读者发现错译之处,敬请告知,万分感谢。

 

 

posted @ 2010-04-29 22:51  laonan  阅读(1060)  评论(0编辑  收藏  举报