【JavaScript-Day 2】开启 JS 之旅：从浏览器控制台到 `＜script＞` 标签的 Hello World 实践-CSDN博客

本文链接：https://blog.csdn.net/Kiradzy/article/details/147671369

Langchain系列文章目录

01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南
 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖
 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南
 04-玩转 LangChain：从文档加载到高效问答系统构建的全程实战
 05-玩转 LangChain：深度评估问答系统的三种高效方法（示例生成、手动评估与LLM辅助评估）
06-从 0 到 1 掌握 LangChain Agents：自定义工具 + LLM 打造智能工作流！
07-【深度解析】从GPT-1到GPT-4：ChatGPT背后的核心原理全揭秘
 08-【万字长文】MCP深度解析：打通AI与世界的“USB-C”，模型上下文协议原理、实践与未来

JavaScript系列文章目录

01-【JavaScript-Day 1】从零开始：全面了解 JavaScript 是什么、为什么学以及它与 Java 的区别
02-【JavaScript-Day 2】开启 JS 之旅：从浏览器控制台到 ＜script＞ 标签的 Hello World 实践

前言

在上一篇 [【JavaScript-Day 1】你好，JavaScript！]中，我们初步认识了 JavaScript 的历史、能力以及它在现代 Web 开发中的重要地位。理论学习固然重要，但编程的魅力更在于实践。今天，我们将迈出激动人心的第一步：亲手运行你的第一行 JavaScript 代码！本篇将带你熟悉 JavaScript 的基本运行环境，并指导你完成经典的 “Hello, World!” 示例，为你后续的 JavaScript 学习之旅打下坚实的基础。

一、JavaScript 的运行环境：代码在哪里安家？

JavaScript 代码并非凭空运行，它需要一个“宿主环境”来解释和执行。对于前端开发而言，最常见的宿主环境就是我们的 Web 浏览器。此外，Node.js 等环境也让 JavaScript 得以在服务器端等其他领域大放异彩，但这超出了我们入门阶段的范围。目前，我们主要关注浏览器环境。在浏览器中，主要有两种方式来运行 JavaScript 代码：

1.1 浏览器控制台：即时实验场

想象一下，你有一个想法，想快速验证一小段代码的运行结果，或者测试某个 JavaScript 命令的用法，浏览器控制台就是为此而生的完美工具。

1.1.1 什么是浏览器控制台？

浏览器控制台（Console）是现代浏览器内置的开发者工具的一部分。它提供了一个交互式的命令行界面，允许你直接输入并执行 JavaScript 代码片段，并能看到代码的输出信息、错误提示等。对于学习、调试和快速测试来说，控制台非常方便。

1.1.2 如何打开控制台？

不同浏览器打开控制台的方式略有差异，但通常都很简单：

Chrome: 按 F12 键，或者右键点击页面任意位置，选择“检查”（Inspect），然后切换到 “Console” (控制台) 标签页。
Firefox: 按 F12 键，或者右键点击页面任意位置，选择“检查元素”（Inspect Element），然后切换到 “Console” (控制台) 标签页。
Edge: 按 F12 键，或者右键点击页面任意位置，选择“检查”（Inspect），然后切换到 “Console” (控制台) 标签页。
Safari: 需要先在 Safari 的“偏好设置” -> “高级”中勾选“在菜单栏中显示‘开发’菜单”，然后在顶部菜单栏选择“开发” -> “显示 JavaScript 控制台”。

尝试在你的浏览器中打开控制台，熟悉一下它的界面。

1.1.3 在控制台运行代码

打开控制台后，你会看到一个提示符（通常是 > 或 >>）。你可以在这里直接输入 JavaScript 代码，然后按 Enter 键执行。

示例：

// 在控制台输入以下代码，然后按 Enter
1 + 1

你会看到控制台输出了结果 2。

// 再试试这个
console.log("你好，控制台！");

你会看到控制台打印出了字符串 "你好，控制台！"。console.log() 是我们接下来会详细介绍的一个非常重要的命令。

优点： 快速、直接、方便测试小段代码。
缺点： 代码不会被保存，刷新页面或关闭浏览器后就丢失了，不适合编写复杂的程序。

1.2 HTML 文件中的 `<script>` 标签：网页的魔法棒

要在网页加载时自动运行更复杂的 JavaScript 代码，或者让 JavaScript 与网页内容进行交互，我们就需要将 JavaScript 代码嵌入到 HTML 文件中。这通常通过 <script> 标签来实现。

1.2.1 `<script>` 标签简介

<script> 标签是 HTML 的标准标签之一，专门用于包含或引用 JavaScript 代码。浏览器在解析 HTML 文档时，遇到 <script> 标签就会开始解释执行其中的 JavaScript 代码。

1.2.2 内部脚本 vs 外部脚本

有两种主要方式使用 <script> 标签：

（1）内部脚本

将 JavaScript 代码直接写在 HTML 文件内的 <script> 和 </script> 标签之间。

<!DOCTYPE html>
<html>
<head>
    <title>内部脚本示例</title>
</head>
<body>
    <h1>我的第一个网页</h1>

    <script>
        // JavaScript 代码直接写在这里
        console.log("这是来自内部脚本的消息！");
        // 可以在这里编写更多代码...
    </script>

</body>
</html>

优点： 简单直接，适合少量、与特定页面紧密相关的代码。
缺点：

如果代码量大，会使 HTML 文件变得臃肿，难以维护。
JavaScript 代码与 HTML 结构混杂，不利于关注点分离。
代码无法在多个页面复用。

（2）外部脚本

将 JavaScript 代码保存在一个单独的 .js 文件中，然后在 HTML 文件中使用 <script> 标签的 src 属性来引用这个外部文件。这是推荐的方式，尤其对于稍有规模的项目。

步骤：

创建 JS 文件： 创建一个新文件，例如命名为 main.js，并将你的 JavaScript 代码写入其中。
```
// main.js 文件内容
console.log("这是来自外部脚本 main.js 的消息！");
// 更多代码...
```
在 HTML 中引用： 在 HTML 文件中使用 <script> 标签，并通过 src 属性指定 .js 文件的路径。
```
<!DOCTYPE html>
<html>
<head>
    <title>外部脚本示例</title>
</head>
<body>
    <h1>我的网页</h1>
    <p>内容...</p>

    <script src="main.js"></script> 
</body>
</html>
```
注意： src 属性指定的文件路径可以是相对路径（相对于当前 HTML 文件）或绝对路径（完整的 URL）。当使用了 src 属性时，<script> 标签内部的代码（如果有）会被忽略。

优点：

关注点分离： HTML 结构、CSS 样式和 JavaScript 行为分离，代码更清晰、易于维护。
可复用性： 同一个 .js 文件可以被多个 HTML 页面引用。
浏览器缓存： 浏览器可以缓存外部 .js 文件，当用户访问其他引用了相同文件的页面时，加载速度更快。

可视化对比：

graph TD
    A[运行 JavaScript] --> B{浏览器环境};
    B --> C[浏览器控制台];
    B --> D[HTML 文件];
    D --> E(内部脚本: <script>...</script>);
    D --> F(外部脚本: <script src="file.js"></script>);

    style C fill:#f9f,stroke:#333,stroke-width:2px
    style E fill:#ccf,stroke:#333,stroke-width:2px
    style F fill:#cfc,stroke:#333,stroke-width:2px

二、动手实践：“Hello, World!”

现在，让我们结合所学知识，完成编程界的传统入门仪式——输出 “Hello, World!”。我们将使用外部脚本的方式，这是更常用且推荐的做法。

2.1 准备你的第一个 HTML 文件

你需要一个文本编辑器（如 VS Code, Sublime Text, Notepad++, 甚至是记事本）来编写代码。

2.1.1 创建 HTML 文件

在你电脑上创建一个新的文件夹，用于存放你的项目文件，例如 js_practice。
在 js_practice 文件夹中，创建一个新的文本文件，将其命名为 index.html。
用你的文本编辑器打开 index.html 文件。

2.1.2 编写 HTML 基本结构

在 index.html 文件中输入以下基本的 HTML 结构：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个 JavaScript 程序</title> </head>
<body> <h1>欢迎来到 JavaScript 的世界！</h1> 
    </body>
</html>

<!DOCTYPE html>: 告诉浏览器这是一个 HTML5 文档。
<html>: HTML 页面的根元素。lang="zh-CN" 属性有助于搜索引擎和浏览器理解页面语言。
<head>: 包含页面的元信息，这些信息通常不会直接显示给用户，但对浏览器和搜索引擎很重要。
- <meta charset="UTF-8">: 规定 HTML 文档使用 UTF-8 字符编码，这是目前最广泛使用的编码，支持包括中文在内的多种语言。
- <meta name="viewport" ...>: 用于响应式设计，确保页面在不同设备上（尤其是移动设备）有良好的显示效果。
- <title>: 定义浏览器工具栏、收藏夹和搜索结果中显示的页面标题。
<body>: 包含用户在浏览器窗口中看到的所有内容，如文本、图片、链接、脚本等。

保存 index.html 文件。

2.2 编写你的第一行 JavaScript 代码

现在，我们来创建外部 JavaScript 文件。

在 js_practice 文件夹中，创建另一个新文件，将其命名为 script.js。
用文本编辑器打开 script.js 文件。

2.2.1 在 `script.js` 中编写代码

在 script.js 文件中，输入以下这行代码：

// script.js 文件内容

// 这是一条指令，告诉浏览器在控制台打印一条消息
console.log("Hello, World!");

// 开头的是单行注释，用于解释代码，不会被执行。我们将在下一篇详细讲解注释。
console.log() 是一个内置函数，用于在浏览器的开发者控制台中输出信息。括号内的 "Hello, World!" 是我们要输出的字符串（文本）。
语句末尾的分号 ; 表示语句的结束。虽然 JavaScript 有自动分号插入机制（ASI），但在入门阶段，强烈建议总是在语句末尾加上分号，以避免潜在问题。

保存 script.js 文件。

2.2.2 在 HTML 中引用 `script.js`

回到 index.html 文件，在 </body> 标签之前添加 <script> 标签来引用我们刚创建的 script.js 文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个 JavaScript 程序</title>
</head>
<body>
    <h1>欢迎来到 JavaScript 的世界！</h1> 

    <script src="script.js"></script> 
</body>
</html>

为什么通常放在 </body> 前？
将 <script> 标签放在 <body> 内容的末尾，可以确保在执行 JavaScript 代码之前，页面的 HTML 结构（DOM）已经基本加载完成。这样，如果你的 JavaScript 需要操作页面上的元素（我们以后会学到），就能确保这些元素已经存在了。如果放在 <head> 中（不加特殊处理），脚本执行时可能会阻塞页面的渲染。

保存 index.html 文件。

2.3 在浏览器中查看结果

现在，一切准备就绪！

2.3.1 打开 HTML 文件

在你的文件管理器中找到 js_practice 文件夹，双击 index.html 文件。你的默认浏览器应该会打开这个页面，显示标题 “欢迎来到 JavaScript 的世界！”。

2.3.2 查看控制台输出

页面上似乎什么都没发生？别急，我们的 console.log() 是将信息输出到开发者控制台的。按照 1.1.2 节的方法，打开浏览器的开发者控制台。

你应该能在控制台中看到清晰地打印出了：

Hello, World!

恭喜你！ 你已经成功运行了你的第一行 JavaScript 代码！

三、常见问题与建议

刚开始接触时，遇到问题很正常。这里列出一些常见情况及建议：

3.1 代码没效果怎么办？

检查拼写： JavaScript 是大小写敏感的。console.log 不能写成 Console.Log 或 console.LOG。检查你的文件名、函数名、变量名是否完全正确。
检查路径： 如果使用外部脚本，确保 <script src="路径"> 中的路径正确无误。如果 index.html 和 script.js 在同一个文件夹，路径就是 script.js。如果在不同文件夹，需要写对相对路径或绝对路径。
查看控制台错误： 控制台不仅显示 console.log 的输出，更重要的是它会报告 JavaScript 代码中的错误。仔细阅读错误信息，它通常会告诉你哪一行代码出了问题以及可能的原因。
确认文件已保存： 确保你修改过的 .html 和 .js 文件都已经保存了。
清除浏览器缓存： 有时浏览器会缓存旧的脚本文件。尝试强制刷新（通常是 Ctrl+Shift+R 或 Cmd+Shift+R）或清除浏览器缓存再试。

3.2 内部脚本好还是外部脚本好？

对于学习和小型示例，内部脚本可能更快捷。但对于实际项目开发，强烈推荐使用外部脚本，原因在 1.2.2 节已经阐述：

代码组织性更好： 结构（HTML）、表现（CSS）、行为（JS）分离。
可维护性更高： 修改脚本不影响 HTML 文件。
可重用性强： 同一个脚本可用于多个页面。
利于浏览器缓存： 提升加载性能。

养成使用外部脚本的好习惯，对你未来的开发非常有益。

四、总结

恭喜你完成了 JavaScript 学习的重要一步！回顾一下本篇的核心内容：

JavaScript 运行环境： 主要在浏览器中运行，可以通过浏览器控制台进行快速测试，或通过 HTML 文件中的 <script> 标签来执行。
<script> 标签用法： 可以包含内部脚本（直接写在 HTML 中），也可以通过 src 属性引用外部 .js 文件（推荐方式）。
console.log()： 是一个基础且极其有用的命令，用于在浏览器开发者控制台中输出信息，是调试和理解代码执行流程的重要工具。
“Hello, World!” 实践： 我们通过创建 index.html 和 script.js 文件，并使用 <script src="..."> 将它们关联起来，成功在浏览器控制台输出了 “Hello, World!”。
最佳实践： 推荐将 JavaScript 代码放在外部 .js 文件中，并在 HTML 的 </body> 标签前引用，以获得更好的代码组织、可维护性和性能。