JavaScript 基础知识

标签：复制到 剪贴板 浏览器 变量 JavaScript 基础知识 HTML

JavaScript 是一种编程语言，可为您的网站增加交互性。这发生在游戏中，在按下按钮或在表单上输入数据时的响应行为中;具有动态样式;带有动画等。 本文可帮助您开始使用 JavaScript，并进一步了解可能的情况。

什么是 JavaScript？

JavaScript 是一种功能强大的编程语言，可以为网站增加交互性。 它是由布伦丹·艾奇（Brendan Eich）发明的。

JavaScript 用途广泛且适合初学者。 随着经验的增加，您将能够创建游戏、动画 2D 和 3D 图形、全面的数据库驱动应用程序等等！

JavaScript 本身相对紧凑，但非常灵活。开发人员在核心 JavaScript 语言之上编写了各种工具，以最小的努力解锁了大量功能。这些包括：

• 浏览器应用程序编程接口（API）内置于Web浏览器中，提供动态创建HTML和设置CSS样式等功能;从用户的网络摄像头收集和操作视频流，或生成 3D 图形和音频样本。
• 第三方 API，允许开发人员将功能整合到其他内容提供商（如 Disqus 或 Facebook）的网站中。
• 可应用于 HTML 的第三方框架和库，以加速构建站点和应用程序的工作。

作为对 JavaScript 的简单介绍，本文不尽意介绍核心 JavaScript 语言与上面列出的工具有何不同。您可以在 MDN 的 JavaScript 学习区以及 MDN 的其他部分了解更多信息。

下面的部分介绍了核心语言的某些方面，并提供了使用一些浏览器 API 功能的机会。玩得愉快！

“Hello world！”示例

JavaScript 是最流行的现代 Web 技术之一！随着您的 JavaScript 技能的增长，您的网站将进入一个充满力量和创造力的新维度。

然而，熟悉 JavaScript 比熟悉 HTML 和 CSS 更具挑战性。你可能不得不从小事做起，逐渐进步。首先，让我们研究一下如何将 JavaScript 添加到您的页面以创建 Hello world！ 示例。（你好，世界！是介绍性编程示例的标准。

1. 转到您的测试站点并创建一个名为 的新文件夹。在 scripts 文件夹中，创建一个名为 的新文本文档，然后保存它。scriptsmain.js
2. 在您的文件中，在结束标记之前的新行中输入以下代码：index.html</body> [HTML全文]复制到剪贴板

   <span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>script</span> <span style="color:var(--code-token-attribute-name)">src</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>scripts/main.js<span style="color:var(--code-token-punctuation)">"</span></span><span style="color:var(--code-token-punctuation)">></span></span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>script</span><span style="color:var(--code-token-punctuation)">></span></span>
   </code></span>

3. 这与 CSS 的 <link> 元素执行相同的工作。它将 JavaScript 应用于页面，因此它可以对 HTML（以及 CSS 以及页面上的任何其他内容）产生影响。
4. 将以下代码添加到文件中：main.js JS的复制到剪贴板

   <span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-tag)">const</span> myHeading = document<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">querySelector</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">"h1"</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
   myHeading<span style="color:var(--code-token-punctuation)">.</span>textContent = <span style="color:var(--code-token-attribute-value)">"Hello world!"</span><span style="color:var(--code-token-punctuation)">;</span>
   </code></span>

5. 确保已保存 HTML 和 JavaScript 文件。然后加载到您的浏览器中。您应该看到类似这样的内容：index.html

注意：上面的说明将 <script> 元素放在 HTML 文件底部附近的原因是浏览器按照代码在文件中的出现顺序读取代码。

如果 JavaScript 首先加载并且它应该影响尚未加载的 HTML，则可能存在问题。将 JavaScript 放在 HTML 页面底部附近是适应这种依赖关系的一种方法。若要了解有关替代方法的详细信息，请参阅脚本加载策略。

发生了什么事？

标题文本使用 JavaScript 更改为 Hello world！。为此，您可以使用名为 querySelector（） 的函数来获取对标题的引用，然后将其存储在名为 的变量中。这类似于我们使用 CSS 选择器所做的。当你想对一个元素做一些事情时，你需要先选择它。myHeading

之后，代码将变量的 textContent 属性（表示标题的内容）的值设置为 Hello world！。myHeading

注意：您在本练习中使用的两个功能都是文档对象模型 （DOM） API 的一部分，该 API 具有操作文档的功能。

语言基础速成班

为了让您更好地理解 JavaScript 的工作原理，让我们解释一下该语言的一些核心特性。值得注意的是，这些功能对于所有编程语言都是通用的。如果你掌握了这些基础知识，你也可以用其他语言编码！

警告：在本文中，尝试在 JavaScript 控制台中输入示例代码行，看看会发生什么。有关 JavaScript 控制台的更多详细信息，请参阅发现浏览器开发人员工具。

变量

变量是存储值的容器。首先使用 let 关键字声明一个变量，然后使用您为该变量指定的名称：

JS的复制到剪贴板

<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-tag)">let</span> myVariable<span style="color:var(--code-token-punctuation)">;</span>
</code></span>

行尾的分号表示语句的结束位置。仅当需要在一行上分隔语句时，才需要它。但是，有些人认为在每个语句的末尾使用分号是一种很好的做法。对于何时应该使用分号和不应使用分号，还有其他规则。有关详细信息，请参阅 JavaScript 中的分号指南。

您几乎可以命名任何变量，但有一些限制。（请参阅有关命名规则的此部分。如果您不确定，可以检查变量名称以查看它是否有效。

JavaScript 区分大小写。这意味着与 不同。如果您的代码有问题，请检查案例！myVariablemyvariable

声明变量后，可以为其指定一个值：

JS的复制到剪贴板

<span style="background-color:var(--code-background-block)"><code>myVariable = <span style="color:var(--code-token-attribute-value)">"Bob"</span><span style="color:var(--code-token-punctuation)">;</span>
</code></span>

此外，您可以在同一行上执行这两个操作：

JS的复制到剪贴板

<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-tag)">let</span> myVariable = <span style="color:var(--code-token-attribute-value)">"Bob"</span><span style="color:var(--code-token-punctuation)">;</span>
</code></span>

您可以通过调用变量名称来检索该值：

JS的复制到剪贴板

标签：复制到,剪贴板,浏览器,变量,JavaScript,基础知识,HTML
From： https://blog.csdn.net/u013528853/article/details/140666461