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

问题描述：

我是一个初学者（自学，第2天）在网页开发中，到目前为止我已经学会了如何在Chrome中使用控制台编写Javascript函数。为了进一步理解Javascript是如何实现的，我想创建一个空白的测试环境，我可以从头开始构建。我试过寻找开始一个新的Javascript项目的指南（我想使用Visual Studio Code的“Debugger for Chrome”扩展），但是每个指南都开始说“打开你的项目文件夹”，而且我没有任何项目呢！我看过，但没有找到任何详细说明“如何创建项目文件夹”的文档。所以我的问题是：如何创建一个空白的网站文件来练习Javascript？

什么文件（w /适当的扩展名）我需要在一个空白网页的文件夹？
我可以通过创建文本文件并只更改扩展名来创建这些文件吗？
做这些文件需要任何特定的条目或格式，以便他们适合我的编辑器？

谢谢大家。

做你的意思是像http://jsfiddle.net？ – ochi

您需要的唯一东西是index.html ...然后获取默认的html模板并为其添加脚本标记。在脚本标签中输入您的JavaScript。最后在浏览器中打开index.html文件。它将运行文件内的JavaScript。项目文件夹就是保存项目的任何目录。 –

@ochi感谢您指点我这个资源。当我在移动时它肯定会派上用场！ –

答

简单的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/或https://jsbin.com/。

这正是我所期待的。谢谢！ –

为什么''，'

'和''不包含在HTML中？ – <a rel="noopener">guest271314</a>

正确，我会添加它。 –

答

简单地说，最容易做的事情是找到你的计算机的层次结构的文件夹，让您在舒适的做你的工作。也许在您的Documents文件夹下，您可以创建一个名为“网站”的子文件夹。您可以在网站内创建“project_1”或其他内容。

内，您的项目文件夹，你可以很容易地创建一个index.html文件。您可以创建一个空白的Notepad.txt文件，然后将其重命名为index.html。这index.html的应包括锅炉板HTML代码（如标题，一个空白的身体，和标签的JavaScript文件）。在这里你可以创建相应的JavaScript文件，名为project_1.js（JS为JavaScript。）

在这一点上，你就会有一个基本的工作目录，你可以继续学习，并建立自己的网站。

答

您可以创建的.html或.htm文件与单纯只是一个文本编辑器（我在记事本创建简单的网页）。要创建一个网页，而不是一个网站，只需在Visual Studio中打开一个页面，在打开的屏幕上转到文件 - >新建 - >文件 - > HTML页面，然后单击打开。 Visual Studio将自动创建模板，并且您可以开始编码了！如果你想在记事本中创建一个我不推荐的页面，你只需将文本写成html页面，将其保存为文本文件，然后将扩展名更改为htm或html。至于其他人在说，你可以创建脚本一个单独的文件，但它可以让恼人的页面和文字之间不断切换，因此我将创建一个嵌入的脚本，像这样的：

<!DOCTYPE html> 
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Cool Webpage</title> 
 
</head> 
 
<body> 
 
    <div>HTML ELEMENTS</div> 
 
    <script type="text/javascript"> 
 
     document.getElementsByTagName("div")[0].onclick = function() { 
 
      alert("Isn't Javascript fun?"); 
 
     } 
 
    </script> 
 
</body> 
 
</html>

只是为了简洁，我使用的是Visual Studio代码，而不是Visual Studio。虽然我很欣赏迅速的回应。 –

没问题，我从来没有听说过Visual Studio Code，我一定会做一些研究。 – KatoFett

它让我想起了很多SublimeText。我特别喜欢上角的整个代码的缩小视图。 –

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

相关推荐