这个简单的指南将引导您了解如何设置开发环境，以使 JavaScript 的使用更加顺畅和交互式。该安装程序将使用一个简单的文件夹结构，其中包含一个 HTML 文档和一个外部 JavaScript 文件。这样，您就可以按照指南进行编码，在单独的文件中编写 JavaScript，并在浏览器控制台中查看输出。这种设置几乎就是现实 Web 开发世界中的工作方式。让我们潜入吧！
使用外部 JavaScript 文件有几个优点：
首先在计算机上创建一个新文件夹，用于存储项目文件。将文件夹命名为 js-tutorial。
在项目文件夹 (js-tutorial) 中，创建一个新的 HTML 文件。将其命名为index.html。
仍在项目文件夹 (js-tutorial) 中，创建一个新的 JavaScript 文件。将其命名为 script.js。
在文本编辑器中打开您的index.html 文件并设置基本的HTML 结构。使用 <script> 链接外部 JavaScript 文件带有 src 属性的标签：<br> </script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World!</title>
</head>
<body>
<h1>Welcome to JavaScript Functions Guide</h1>
<script src="script.js"></script>
</body>
</html>
添加此内容后保存index.html文件。
在同一文本编辑器中打开 script.js 文件并添加一些 JavaScript 代码：
console.log("Hello, World!");
添加代码后保存script.js文件。
现在，在您首选的网络浏览器中打开index.html 文件。您可以通过双击文件或将其拖到打开的浏览器窗口中来完成此操作。
要查看 JavaScript 代码的输出，您需要访问浏览器控制台。根据您的浏览器执行以下步骤：
对于 Google Chrome：
点击“控制台”选项卡。
对于 Mozilla Firefox：
点击“控制台”选项卡。
对于 Microsoft Edge：
点击“控制台”选项卡。
对于 Safari：
在浏览器中打开 index.html 文件并打开控制台后，您应该看到 Hello, World!和你好，世界！显示在控制台中。这证实您的设置工作正常！
您现在可以在 script.js 文件中编写 JavaScript 代码。每次保存文件并刷新浏览器时，您都会在控制台中看到输出。
一切都准备好了！快乐编码！
以上是Vanilla JavaScript 入门：设置您的开发环境的详细内容。更多信息请关注PHP中文网其他相关文章！
