如何创建一个空白的网站文件来练习Javascript？

Question

我是网络开发的初学者（自学，第 2 天），到目前为止，我已经学会了如何使用 Chrome 中的控制台在 Javascript 中编写函数。为了进一步了解 Javascript 的实现方式，我想创建一个可以从头开始构建的空白测试环境。我已经尝试查看启动新 Javascript 项目的指南（我想使用 Visual Studio 代码的 "Debugger for Chrome" 扩展），但每个指南都以 "open up your project folder" 开头，我还没有任何项目！我看过了，但没有找到任何详细说明 "how to create a project folder" 的文档。所以我的问题是：

空白网页的文件夹中需要哪些文件（带适当的扩展名）？
我可以通过创建文本文件并仅更改扩展名来制作这些文件吗？
这些文件是否需要任何特定的条目或格式才能与我的编辑器一起正常工作？

谢谢大家。

Answer 1

简而言之，最简单的做法是在您的计算机层次结构中找到一个您可以舒适地开展工作的文件夹。也许在您的文档文件夹下，您可以创建一个名为 "Websites." 的子文件夹，您可以在网站中创建 "project_1" 或其他名称。

在您的项目文件夹中，您可以轻松创建一个 index.html 文件。您可以创建一个空白 Notepad.txt 文件，然后将其重命名为 index.html。此 index.html 应包括样板 HTML 代码（例如 headers、空白 body 和 JavaScript 文件的标签。）从那里你可以创建相应的 JavaScript 文件，名为 project_1.js （js for JavaScript.）

届时您将拥有一个基本的工作目录，您可以在其中继续学习和构建您的网站。

Answer 2

简单的HTML页面就可以了，但最好将你的JS代码提取到单独的文件中：

index.html
scripts.js

所有这些都是简单的文本文件，因此您可以先将它们创建为文本文件，然后按照您的建议更改扩展名即可。

在您的 index.html 文件中，您需要像这样包含 scripts.js 文件：

<!DOCTYPE html>
<html>
  <head><title>Your playground</title></head>
  <body>
    <!--here you can have some HTML markup to play with-->
    <div id="test">test div</div>

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

您应该在正文末尾添加导入，这样您就不需要等到 DOM 被解析。

然后你可以在你的 scripts.js:

中加入类似的东西

var el = document.getElementById('test');
alert(el.innerText);

当然你也可以使用像https://jsfiddle.net/ or https://jsbin.com/这样的东西。

如何创建一个空白的网站文件来练习Javascript？

How do I create a blank website file to practice Javascript?

html

javascript

file-structure

visual-studio-code