JavaScript入门(五)-白红宇

网页中的JavaScript和基本语法

应用

JavaScript

到一个网页中是非常容易的；

所有你要做的就是使用这个标本标签：

// Your code here

</script>

对于老版本的浏览器，或如果你想使用严格的

XHTML ( HTML

的最新版本

)

代替过渡的

XHTML

，

你需要把这段代码加上注释，确保用户代理不在网页中显示它或试着把它当作

HTML

标示来解析。

给代码加注释有两种不同的语法。

对于

HTML

文档和过渡的

XHTML

，你使用标准的

HTML

注释：

<!--

// Your code here

-->

</script>

在严格的

XHTML

中，你需要使用

CDATA

注释语法为你的代码加注释——然而，最好不要在严格的

XHTML

文档中添加任何

JavaScript

，而是把它放到自己的文档中。在第三章有更多关于这方面的说明。

// Your code here

//--><!]]></script>

技术上讲，在

HTML

文档的任何地方加入

JavaScript

都是做得到的，然后浏览器就会解释它。可是，

在流行的脚本中，有许多理由说明为什么这样做是个非常糟糕的主意。尽管到目前为止

我们会在文档的主体中加入

JavaScript

例子使你直接地可以看到你的第一个脚本在干什么。

这样会比第三章中等待你的流行和高级技术更容易帮助你的熟悉

JavaScript

。

■

注解

：

也有一个与script“相反”的标签—noscript，它允许你添加一些只有在JavaScript不可用的情况下才会显示的内容。然而，noscript在XHTML 和严格的

HTML

中是不赞成使用的。如果你创建的JavaScript是友好的，就没有必要使用它。

JavaScript语法

在我们进一步探讨之前，先来讨论一下

JavaScript

基本语法：

表示当前行的其它部分是注释并且代码是不会执行的，所以解释器不会试着运行它。注释是一个把注解放到代码中的一个便捷方式，它可以提示我们这段代码打算作什么，或者帮助其它人阅读代码以理解代码是干什么的。

表示一个多行注释的开始。

表示一个多行注释的结束。多行注释同样是有用的，如果你想阻止某段代码被执行但是又不想永久的删除它。如果你对一个代码段有疑问，例如，你不能确定哪些行有问题，那么你可以每次注释掉它的一部分，从而分离出问题来。

大括号

（

{

和

}

）被用来表示一个代码段。它们确保大括号中间的所有行都被当作一个代码段来看待。当我们在讨论像

或

for

这样的结构语句和函数时，你会看到大括号更多相关的应用。

分号或换行定义了语句的结束，一条语句就是一个单行命令。在实际应用中，分号是可以选择的。但是在语句结束的时候，使用它们来使代码更清晰条理是个好主意，因为这样做可以使你的代码更容易读和调试（尽管你可以把许多语句放到一行中，但是最好还是把它们放到独立的行中以使代码更容易读）。在大括号的后面不需要使用分号。

我们来把这个语句加到运行的代码段中：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<body>

// 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>

之间的代码。（同样需要注意到，不只是浏览器可以阅读我们的代码，一个网站的用户也可以查看你的代码，所以不要把一些保密的信息或者敏感的内容放到内面。）

在下面的例子中有三个脚本块。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

alert( 'First script Block ');

alert( 'First script Block - Second Line ');

</script>

</head>

<body>

alert( 'Second script Block' );

</script>

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

包含许多函数，我们可以直接使用来完成一些任务如显示消息给用户。合理的使用函数可以避免一个程序员重复代码的编写。

我们同样可以创建自己的函数，在前面的代码段中我们就已经创建了一个。假定我们创建了一些代码，它们可以在某个元素里向网页中写一个消息。

我们可能需要在不同的情况下重复的使用它。当然我们可以在需要使用它们的地方通过复制粘贴代码段来实现，但是这种方法使代码过于冗长；

如果同样的代码段在一个页面中出现三四次，那么它同样很难理解和调试。

我们可以把这段打印消息的代码封装到一个函数中来替代，然后使用参数来给函数传递运行需要的消息。一个函数也可以为调用它的代码返回一个值。

调用函数，你可以简单的在它的名字后写个括号：（）。（注——你可以使用括号来传递参数。但是在没有参数的时候，你仍然必须使用括号。）但是你不能调用你想象的函数，必须是脚本已经创建的。我们可以如下的方式，通过把它添加到第三个代码块中来调用它：

alert( 'Third script Block ');

function doSomething(){

alert( 'Function in Third script Block ');

}

// Call the function doSomething

doSomething();

</script>

</body>

</html>

到目前为止，在这章中我们已经从

JavaScript

语言的正反两方面讨论了它，明白了一些语法规则，学习了这种语言的一些主要组成部分（虽然只是简要地），并运行了一些

JavaScript

代码。你已经接触到了相当多的东西。在我们在下一章中继续对

JavaScript

语言作更详细的讲解前，让我们先来讨论一下成功的

JavaScript

开发的关键点：对象

本文转自牛海彬 51CTO博客，原文链接：http://blog.51cto.com/newhappy/76842，如需转载请自行联系原作者