网页中的JavaScript和基本语法
应用JavaScript到一个网页中是非常容易的; 所有你要做的就是使用这个标本标签:
<script type="text/javascript">
// Your code here
</script>
对于老版本的浏览器,或如果你想使用严格的 XHTML ( HTML的最新版本) 代替过渡的XHTML,
你需要把这段代码加上注释,确保用户代理不在网页中显示它或试着把它当作HTML标示来解析。 给代码加注释有两种不同的语法。 对于 HTML 文档和过渡的XHTML,你使用标准的HTML注释:
<script type="text/javascript">
<!--
// Your code here
-->
</script>
在严格的XHTML中,你需要使用CDATA注释语法为你的代码加注释——然而,最好不要在严格的XHTML文档中添加任何JavaScript,而是把它放到自己的文档中。在第三章有更多关于这方面的说明。
<script type="text/javascript"><!--//--><![CDATA[//><!—
// Your code here
//--><!]]></script>
技术上讲,在HTML文档的任何地方加入JavaScript都是做得到的,然后浏览器就会解释它。可是, 在流行的脚本中,有许多理由说明为什么这样做是个非常糟糕的主意。尽管到目前为止,我们会在文档的主体中加入JavaScript例子使你直接地可以看到你的第一个脚本在干什么。 这样会比第三章中等待你的流行和高级技术更容易帮助你的熟悉JavaScript。
■注解:也有一个与script“相反”的标签—noscript,它允许你添加一些只有在JavaScript不可用的情况下才会显示的内容。然而,noscript在XHTML 和严格的HTML中是不赞成使用的。如果你创建的JavaScript是友好的,就没有必要使用它。
JavaScript语法
在我们进一步探讨之前,先来讨论一下JavaScript基本语法:
l // 表示当前行的其它部分是注释并且代码是不会执行的,所以解释器不会试着运行它。注释是一个把注解放到代码中的一个便捷方式,它可以提示我们这段代码打算作什么,或者帮助其它人阅读代码以理解代码是干什么的。
l /* 表示一个多行注释的开始。
l */ 表示一个多行注释的结束。多行注释同样是有用的,如果你想阻止某段代码被执行但是又不想永久的删除它。如果你对一个代码段有疑问,例如,你不能确定哪些行有问题,那么你可以每次注释掉它的一部分,从而分离出问题来。
l 大括号 ({和})被用来表示一个代码段。它们确保大括号中间的所有行都被当作一个代码段来看待。当我们在讨论像if或for这样的结构语句和函数时,你会看到大括号更多相关的应用。
l 分号或换行定义了语句的结束,一条语句就是一个单行命令。在实际应用中,分号是可以选择的。但是在语句结束的时候,使用它们来使代码更清晰条理是个好主意,因为这样做可以使你的代码更容易读和调试(尽管你可以把许多语句放到一行中,但是最好还是把它们放到独立的行中以使代码更容易读)。在大括号的后面不需要使用分号。
我们来把这个语句加到运行的代码段中:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<body>
<script type="text/JavaScript">
// One-line comments are useful for reminding us what the code is doing
/*
This is a multiline comment. It's useful for longer comments and
also to block out segments of code when you're testing
*/
/*
Script starts here. We're declaring a variable myName, and assigning to it the
value of whatever the user puts in the prompt box (more on that in Chapter
2), finishing the instruction with a semicolon because it is a statement
*/
var myName = prompt ("Enter your name","");
// If the name the user enters is Chris Heilmann
if (myName == "Chris Heilmann")
{
// then a new window pops up saying hello
alert("Hello Me");
}
// If the name entered isn't Chris Heilmann
else
{
// say hello to someone else
alert("hello someone else");
}
</script>
</body>
</html>
依据以前的JavaScript经验,你会发现一些代码不起作用了。现在所有的事情就是要弄清楚注释是怎么使用的、代码段是什么和为什么一些语句的结尾有个分号。如果你喜欢,你可以运行这段代码:只要把它复制到HTML网页中,使用.html后缀保存文档,按后在你的浏览器中打开它。
尽管一些像if和else的语句跨越不止一行而且包含其它语句,但它们让被看成是一个语句,它们的后面不需要加分号。JavaScript解释器知道在if语句后面的哪几行语句应该被当作一个代码块来处理,因为有大括号{}。虽不是强制的,但是把大括号内面的代码进行缩进处理是个很不错的注意。这可以使阅读和调试更容易。我们会在下一章中讨论变量和条件语句(if和else)。
执行代码
浏览器从上到下来读取页面,所以代码执行的顺序取决于脚本块的顺序。一个脚本块是指 <script> 和</script>之间的代码。(同样需要注意到,不只是浏览器可以阅读我们的代码,一个网站的用户也可以查看你的代码,所以不要把一些保密的信息或者敏感的内容放到内面。)
在下面的例子中有三个脚本块。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<script type="text/javascript">
alert( 'First script Block ');
alert( 'First script Block - Second Line ');
</script>
</head>
<body>
<h1>Test Page</h1>
<script type="text/JavaScript">
alert( 'Second script Block' );
</script>
<p>Some more HTML</p>
<script type="text/JavaScript">
alert( 'Third script Block' );
function doSomething() {
alert( 'Function in Third script Block' );
}
</script>
</body>
</html>
如果你试着运行一下它,你会首先看到第一个脚本块中的alert()窗口,显示着消息:
First script Block
紧跟着的是第二行中的下一个alert()窗口,显示着消息:
First script Block - Second Line.
解释其会继续往下执行来到第二个脚本块,在这里alert函数会显示这样一个窗口:
Second script Block
接着其后包括alert()语句的第三个脚本块会显示:
Third script Block
尽管最下面几行的函数中存在另一个alert语句,但是它不会执行并显示消息。这是因为它在函数定义的内面(function doSomething()), 函数内面的代码只有在函数被调用的时候才会执行。
函数
我们会在第三章中对函数进行深入的讨论,但我在这里介绍它们是因为不了解函数很难对JavaScript做更深入进一步的了解。一个函数就是一个被命名的、可重用的代码块,它被成对的大括号括起来,你可以用来完成一个特定的任务。 JavaScript包含许多函数,我们可以直接使用来完成一些任务如显示消息给用户。合理的使用函数可以避免一个程序员重复代码的编写。
我们同样可以创建自己的函数,在前面的代码段中我们就已经创建了一个。假定我们创建了一些代码,它们可以在某个元素里向网页中写一个消息。 我们可能需要在不同的情况下重复的使用它。当然我们可以在需要使用它们的地方通过复制粘贴代码段来实现,但是这种方法使代码过于冗长; 如果同样的代码段在一个页面中出现三四次,那么它同样很难理解和调试。 我们可以把这段打印消息的代码封装到一个函数中来替代,然后使用参数来给函数传递运行需要的消息。一个函数也可以为调用它的代码返回一个值。
调用函数,你可以简单的在它的名字后写个括号:()。(注——你可以使用括号来传递参数。但是在没有参数的时候,你仍然必须使用括号。)但是你不能调用你想象的函数,必须是脚本已经创建的。我们可以如下的方式,通过把它添加到第三个代码块中来调用它:
<script type="text/JavaScript">
alert( 'Third script Block ');
function doSomething(){
alert( 'Function in Third script Block ');
}
// Call the function doSomething
doSomething();
</script>
</body>
</html>
到目前为止,在这章中我们已经从 JavaScript 语言的正反两方面讨论了它,明白了一些语法规则,学习了这种语言的一些主要组成部分(虽然只是简要地),并运行了一些 JavaScript 代码。你已经接触到了相当多的东西。在我们在下一章中继续对 JavaScript 语言作更详细的讲解前,让我们先来讨论一下成功的 JavaScript 开发的关键点:对象