srcmini上一章JavaScript教程请查看：JS编程入门介绍
在本教程中，你将学习如何制作一个JavaScript支持的web页面。
开始使用JavaScript
在这里，你将了解使用JavaScript将交互性添加到web页面是多么容易，但是，在我们开始之前，请确保你对HTML和CSS有一些工作知识。
如果你刚刚开始web开发，那么就从这里开始学习吧！
让我们从最流行的客户端脚本语言开始。
向Web页面添加JavaScript
通常有三种方式添加JavaScript到网页：
- 在一对<script>和</script>标记之间嵌入JavaScript代码。
- 创建一个扩展名为.js的外部JavaScript文件，然后通过<script>标记的src属性在页面中加载它。
- 使用诸如onclick、onmouseover、onkeypress、onload等特殊标记属性将JavaScript代码直接放到HTML标记中。
以下各节将详细介绍这些程序：
嵌入JavaScript代码
通过将JavaScript代码置于<script>和</script>标记之间，可以将其直接嵌入到web页面中，<script>标记指示浏览器所包含的语句将被解释为可执行脚本，而不是HTML，这里有一个例子：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>嵌入JavaScript</title>
</head>
<body>
<script>
var greet = "Hello World!";
document.write(greet); // 打印: Hello World!
</script>
</body>
</html>上面示例中的JavaScript代码将简单地在web页面上打印文本消息，在接下来的章节中，你将了解这些JavaScript语句的含义。
注意：自从HTML5以来，<script>标签的类型属性(即<script type=”text/javascript”>)不再需要，JavaScript是HTML5的默认脚本语言。
调用外部JavaScript文件
你还可以将JavaScript代码放入一个扩展名为.js的单独文件中，然后通过<script>标记的src属性在文档中调用该文件，如下所示：
<script src="js/hello.js"></script>如果你希望多个文档可以使用相同的脚本，这是非常有用的，它可以避免你一遍又一遍的重复同样的任务，并使你的网站更容易维护。
让我们创建一个名为“hello”的JavaScript文件，并在其中放置以下代码：
// 显示消息的函数
function sayHello() {
alert("Hello World!");
}
// 点击按钮调用函数
document.getElementById("myBtn").onclick = sayHello;现在，可以使用<script>标记在web页面中调用这个外部JavaScript文件，如下所示：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>包含外部JavaScript文件</title>
</head>
<body>
<button type="button" id="myBtn">点击</button>
<script src="js/hello.js"></script>
</body>
</html>注意：通常当第一次下载外部JavaScript文件时，它会存储在浏览器的缓存中(就像图像和样式表一样)，因此不需要从web服务器下载多次，这样可以使web页面加载得更快。
JavaScript内联代码
你还可以使用特殊的标记属性(如onclick、onmouseover、onkeypress、onload等)将JavaScript代码直接插入到HTML标记中，从而将其内联。
但是，你应该避免将大量JavaScript代码内联，因为这会使HTML和JavaScript混杂在一起，使JavaScript代码难以维护。这里有一个例子:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>内联JavaScript</title>
</head>
<body>
<button onclick="alert('Hello World!')">点击e</button>
</body>
</html>上面的示例将在单击按钮元素时显示弹出框消息。
提示：你应该始终将web页面(即HTML)的内容和结构与表示(CSS)和行为(JavaScript)分开。
脚本在HTML文档中的定位
<script>元素可以放在HTML文档的<head>，或<body>部分。但是，理想情况下，脚本应该放在body部分的末尾，刚好在关闭的</body>标记之前，这将使你的web页面加载更快，因为它可以防止初始页面呈现受到阻碍。
每个<script>标记都会阻塞页面呈现过程，直到它完全下载并执行JavaScript代码为止，因此将它们放在文档的head部分(即<head>元素)将会对你的网站性能产生重大影响。
提示：你可以在单个文档中放置任意数量的<script>元素。但是，它们是按照它们在文档中出现的顺序从上到下进行处理的。
客户端脚本和服务器端脚本的区别
JavaScript、VBScript等客户端脚本语言由web浏览器解释和执行，而PHP、ASP、Java、Python、Ruby等服务器端脚本语言在web服务器上运行，输出以HTML格式发送回web浏览器。
与传统的服务器端脚本方法相比，客户端脚本有许多优点。例如你可以使用JavaScript来检查用户输入无效的数据表单字段并显示输入错误的通知相应的实时向服务器提交表单之前最后的数据验证和进一步处理,以防止不必要的网络带宽使用和开发服务器系统资源。
此外，与客户端脚本相比，服务器端脚本的响应更慢，因为服务器端脚本是在远程计算机上处理的，而不是在用户的本地计算机上。
你可以在PHP教程部分了解更多关于服务器端脚本的内容。
评论前必须登录！
注册