首页>网页设计教程>Javascript教程

Hello, world!

作者：Eve Cole 更新时间：2025-01-14 17:45:51

本教程的这一部分是关于核心 JavaScript，即语言本身。

但是我们需要一个工作环境来运行我们的脚本，并且由于这本书是在线的，因此浏览器是一个不错的选择。我们会将特定于浏览器的命令（例如alert ）的数量保持在最低限度，这样如果您打算专注于其他环境（例如Node.js），您就不会在它们上花费时间。在本教程的下一部分中，我们将重点关注浏览器中的 JavaScript。

首先，让我们看看如何将脚本附加到网页。对于服务器端环境（如 Node.js），您可以使用"node my.js"等命令执行脚本。

“脚本”标签

使用<script>标签，JavaScript 程序几乎可以插入到 HTML 文档中的任何位置。

例如：

 <!DOCTYPE HTML>
<html>

<正文>

  <p>在脚本之前...</p>

  <脚本>
    警报（'你好，世界！'）;
  </脚本>

  <p>...脚本之后。</p>

</正文>

</html>

您可以通过单击上方框右上角的“播放”按钮来运行该示例。

<script>标签包含 JavaScript 代码，浏览器处理该标签时会自动执行该代码。

现代标记

<script>标签有一些现在很少使用的属性，但仍然可以在旧代码中找到：

  • type属性： <script type =…>

  • 旧的 HTML 标准 HTML4 要求脚本具有type 。通常是type="text/javascript" 。不再需要了。而且，现代 HTML 标准完全改变了该属性的含义。现在，它可用于 JavaScript 模块。但这是一个高级主题，我们将在本教程的另一部分讨论模块。

  • language属性： <script language =…>

  • 该属性旨在显示脚本的语言。该属性不再有意义，因为 JavaScript 是默认语言。没有必要使用它。

  • 脚本之前和之后的注释。

  • 在真正古老的书籍和指南中，您可能会在<script>标签内找到注释，如下所示：

     <script type="text/javascript"><!--
    ...
//--></脚本>

    现代 JavaScript 中没有使用这个技巧。这些注释向不知道如何处理<script>标记的旧浏览器隐藏了 JavaScript 代码。由于过去 15 年发布的浏览器没有这个问题，这种注释可以帮助您识别真正旧的代码。

外部脚本

如果我们有很多 JavaScript 代码，我们可以将其放入一个单独的文件中。

脚本文件通过src属性附加到 HTML：

 <script src="/path/to/script.js"></script>

这里， /path/to/script.js是从站点根目录到脚本的绝对路径。还可以提供当前页面的相对路径。例如， src="script.js" ，就像src="./script.js"一样，表示当前文件夹中的文件"script.js" 。

我们也可以提供完整的 URL。例如：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

要附加多个脚本，请使用多个标签：

 <脚本src =“/js/script1.js”></脚本>
<script src="/js/script2.js"></script>
……

请注意：

通常，只有最简单的脚本才会被放入 HTML 中。更复杂的位于单独的文件中。

单独文件的好处是浏览器将下载它并将其存储在缓存中。

引用相同脚本的其他页面将从缓存中获取该脚本而不是下载它，因此该文件实际上只下载一次。

这可以减少流量并使页面速度更快。

如果设置了src ，则忽略脚本内容。

单个<script>标记不能同时包含src属性和代码。

这是行不通的：

 <脚本src =“文件.js”>
  警报（1）； // 内容被忽略，因为 src 已设置
</脚本>

我们必须选择外部<script src="…">或带有代码的常规<script> 。

上面的例子可以分成两个脚本来工作：

 <script src="file.js"></script>
<脚本>
  警报（1）；
</脚本>

概括

  • 我们可以使用<script>标签将 JavaScript 代码添加到页面。

  • type和language属性不是必需的。

  • 可以使用<script src="path/to/script.js"></script>插入外部文件中的脚本。

关于浏览器脚本及其与网页的交互，还有很多东西需要了解。但请记住，本教程的这一部分专门介绍 JavaScript 语言，因此我们不应该因特定于浏览器的实现而分散自己的注意力。我们将使用浏览器作为运行 JavaScript 的一种方式，这对于在线阅读来说非常方便，但这只是其中之一。

任务

显示警报

重要性：5

创建一个显示消息“我是 JavaScript！”的页面。

在沙箱或硬盘上执行此操作并不重要，只需确保其正常工作即可。

在新窗口中演示

<!DOCTYPE html>
<html>

<正文>

  <脚本>
    警报（“我是JavaScript！”）；
  </脚本>

</正文>

</html>

在沙箱中打开解决方案。

使用外部脚本显示警报

重要性：5

采用上一个任务“显示警报”的解决方案。通过将脚本内容提取到位于同一文件夹中的外部文件alert.js中来修改它。

打开页面，确保警报有效。

HTML 代码：

 <!DOCTYPE html>
<html>

<正文>

  <script src="alert.js"></script>

</正文>

</html>

对于同一文件夹中的文件alert.js ：

警报（“我是JavaScript！”）；
相关文章