JavaScript入门【JavaScript专题1】

关注

原创最新推荐文章于 2026-07-02 11:16:43 发布 702 阅读 AI 写同款· GEO 优化 ›

Three.js 系列专题 1：入门与基础 Three.js 是一个基于 WebGL 的 JavaScript 库，它简化了 3D 图形编程，让开发者无需深入了解底层 WebGL API 就能创建复杂的 3D 场景。它广泛应用于网页游戏、可视化、虚拟现实等领域。阅读详情

在一对<script>和</script>标签之间嵌入 JavaScript 代码。
创建带有.js扩展名的外部 JavaScript 文件，然后通过标签的src属性将其加载到页面中<script>。
使用特殊的标记直接放置JavaScript代码的HTML标记内属性，例如onclick，onmouseover，onkeypress，onload，等。

以下部分将详细描述这些过程中的每一个：

嵌入 JavaScript 代码

您可以通过将 JavaScript 代码放置在<script>和</script>标记之间，将其直接嵌入到您的网页中。该<script>标记指示浏览器将包含的语句解释为可执行脚本而不是 HTML。下面是一个例子：

Embedding JavaScript

上面示例中的 JavaScript 代码将简单地在网页上打印一条文本消息。在接下来的章节中，您将了解这些 JavaScript 语句的含义。

调用外部 JavaScript 文件

你也可以将你的 JavaScript 代码放到一个带有.js扩展名的单独文件中，然后通过标签的src属性在你的文档中调用该文件<script>，如下所示：

如果您希望相同的脚本可用于多个文档，这将非常有用。它使您免于一遍又一遍地重复相同的任务，并使您的网站更易于维护。

好吧，让我们创建一个名为“hello.js”的 JavaScript 文件，并将以下代码放入其中：

// A function to display a message

function sayHello() {

alert(“Hello World!”);

}

// Call function on click of the button

document.getElementById(“myBtn”).onclick = sayHello;

现在，您可以使用<script>标记在网页中调用此外部 JavaScript 文件，如下所示：

Including External JavaScript File

Click Me

注意：通常在第一次下载外部 JavaScript 文件时，它会存储在浏览器的缓存中（就像图像和样式表一样），因此不需要从制作网页的 Web 服务器多次下载加载更快。

内嵌 JavaScript 代码

您也可以将JavaScript代码内嵌通过使用特殊标记直接将其插入HTML标记中的属性，如onclick，onmouseover，onkeypress，onload，等。

但是，您应该避免内联放置大量 JavaScript 代码，因为它会使您的 HTML 与 JavaScript 混在一起，并使您的 JavaScript 代码难以维护。下面是一个例子：

Inlining JavaScript

Click Me

上面的示例将向您显示单击按钮元素时的警报消息。

**提示：**您应该始终将网页的内容和结构（即 HTML）与表示 (CSS) 和行为 (JavaScript) 分开。

脚本在 HTML 文档中的定位

该<script>元素可以放置在HTML 文档的<head>、或<body>部分中。但理想情况下，脚本应该放在 body 部分的末尾，就在结束</body>标记之前，这将使您的网页加载速度更快，因为它可以防止初始页面呈现的障碍。

每个<script>标签都会阻止页面渲染过程，直到它完全下载并执行了 JavaScript 代码，因此将它们<head>无任何正当理由放置在文档的头部部分（即元素）将显着影响您的网站性能。

**提示：**您可以<script>在单个文档中放置任意数量的元素。但是，它们是按照它们在文档中出现的顺序从上到下进行处理的。

客户端和服务器端脚本之间的区别

客户端脚本语言如 JavaScript、VBScript 等由 Web 浏览器解释和执行，而服务器端脚本语言如 PHP、ASP、Java、Python、Ruby 等在 Web 服务器上运行并输出以 HTML 格式发送回 Web 浏览器。

与传统的服务器端脚本方法相比，客户端脚本有许多优点。例如，您可以使用 JavaScript 检查用户是否在表单字段中输入了无效数据，并在将表单提交到 Web 服务器以进行最终数据验证和进一步处理之前，实时显示相应的输入错误通知，以防止不必要的网络带宽使用和服务器系统资源的利用。

此外，与客户端脚本相比，来自服务器端脚本的响应速度较慢，因为服务器端脚本是在远程计算机上而不是在用户的本地计算机上处理的。

Hello, world！

========================================================================

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

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

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

“脚本”标签

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

例如：

Before the script...

...After the script.

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

现代标记

该<script>标签具有很少采用时下，但仍可以在旧代码中发现了几个属性：

该type属性：<script type=…>

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

该language属性：<script language=…>

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

脚本前后的注释。

在真正古老的书籍和指南中，您可能会在<script>标签中找到注释，如下所示：<script type="text/javascript"></script>这个技巧在现代 JavaScript 中没有使用。这些注释对不知道如何处理<script>标签的旧浏览器隐藏了 JavaScript 代码。由于过去 15 年发布的浏览器没有这个问题，这种注释可以帮助您识别真正的旧代码。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。