2017-10-12 84 views
0

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

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

谢谢大家。

+2

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

+1

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

+1

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

回答

4

简单的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/

+0

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

+2

为什么'',''和''不包含在HTML中? – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/2801559/">guest271314</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+1</span></div> <div class="col-lg-11"> <p class="commenttext">正确,我会添加它。 – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4319274062" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">0<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>简单地说,最容易做的事情是找到你的计算机的层次结构的文件夹,让您在舒适的做你的工作。也许在您的Documents文件夹下,您可以创建一个名为“网站”的子文件夹。您可以在网站内创建“project_1”或其他内容。</p> <p>内,您的项目文件夹,你可以很容易地创建一个index.html文件。您可以创建一个空白的Notepad.txt文件,然后将其重命名为index.html。这index.html的应包括锅炉板HTML代码(如标题,一个空白的身体,和标签的JavaScript文件)。在这里你可以创建相应的JavaScript文件,名为project_1.js(JS为JavaScript。)</p> <p>在这一点上,你就会有一个基本的工作目录,你可以继续学习,并建立自己的网站。</p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/46715384">来源</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2017-10-12 17:16:18</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/2781889/">FooBar</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> </div> </article> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">0<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>您可以创建的.html或.htm文件与单纯只是一个文本编辑器(我在记事本创建简单的网页)。要创建一个网页,而不是一个网站,只需在Visual Studio中打开一个页面,在打开的屏幕上转到文件 - >新建 - >文件 - > HTML页面,然后单击打开。 Visual Studio将自动创建模板,并且您可以开始编码了!如果你想在记事本中创建一个我不推荐的页面,你只需将文本写成html页面,将其保存为文本文件,然后将扩展名更改为htm或html。至于其他人在说,你可以创建脚本一个单独的文件,但它可以让恼人的页面和文字之间不断切换,因此我将创建一个嵌入的脚本,像这样的:<br> </p> <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code" id="sn1"> <pre class="snippet-code-html lang-html prettyprint-override"><code class="prettyprint-override"><!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></code></pre> </div> </div> <p></p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/46715546">来源</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2017-10-12 17:26:01</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/8761909/">KatoFett</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> <!-- comments --> <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+1</span></div> <div class="col-lg-11"> <p class="commenttext">只是为了简洁,我使用的是Visual Studio代码,而不是Visual Studio。虽然我很欣赏迅速的回应。 – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">没问题,我从来没有听说过Visual Studio Code,我一定会做一些研究。 – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/8761909/">KatoFett</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">它让我想起了很多SublimeText。我特别喜欢上角的整个代码的缩小视图。 – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">相关问题</div> <ul class="relative_list"> <li> 1. <a href="http://cn.voidcc.com/question/p-dqfywolo-h.html" target="_blank" title="在一个javascript文件中为整个网站创建标签"> 在一个javascript文件中为整个网站创建标签 </a> </li> <li> 2. <a href="http://cn.voidcc.com/question/p-fdymbkjh-rv.html" target="_blank" title="如何在我的shopify网站中创建一个空的html文件?"> 如何在我的shopify网站中创建一个空的html文件? </a> </li> <li> 3. <a href="http://cn.voidcc.com/question/p-ssbgptty-kw.html" target="_blank" title="的JavaScript创建空白值"> 的JavaScript创建空白值 </a> </li> <li> 4. <a href="http://cn.voidcc.com/question/p-szblvzsd-uz.html" target="_blank" title="这是一个很好的练习来创建一个大的桌子吗?"> 这是一个很好的练习来创建一个大的桌子吗? </a> </li> <li> 5. <a href="http://cn.voidcc.com/question/p-mywkbuyg-v.html" target="_blank" title="如何创建一个“空”的FitNesse网站"> 如何创建一个“空”的FitNesse网站 </a> </li> <li> 6. <a href="http://cn.voidcc.com/question/p-cquvhwns-pp.html" target="_blank" title="如何在django网站创建一个异常文件夹?"> 如何在django网站创建一个异常文件夹? </a> </li> <li> 7. <a href="http://cn.voidcc.com/question/p-nslbsicn-ma.html" target="_blank" title="如果不存在,创建一个空白文件?"> 如果不存在,创建一个空白文件? </a> </li> <li> 8. <a href="http://cn.voidcc.com/question/p-kkjwpdsj-ku.html" target="_blank" title="如何创建一个AJAX网站?"> 如何创建一个AJAX网站? </a> </li> <li> 9. <a href="http://cn.voidcc.com/question/p-tcbhyljj-vx.html" target="_blank" title="如何创建一个网站下的网站列表"> 如何创建一个网站下的网站列表 </a> </li> <li> 10. <a href="http://cn.voidcc.com/question/p-ygrocmcp-ev.html" target="_blank" title="JavaScript Help:创建学习游戏 - 匹配并填充空白"> JavaScript Help:创建学习游戏 - 匹配并填充空白 </a> </li> <li> 11. <a href="http://cn.voidcc.com/question/p-dbjesrfh-pp.html" target="_blank" title="好的JavaScript练习?"> 好的JavaScript练习? </a> </li> <li> 12. <a href="http://cn.voidcc.com/question/p-cziupkqk-ua.html" target="_blank" title="如何用'无限'滚动空间创建一个网站?"> 如何用'无限'滚动空间创建一个网站? </a> </li> <li> 13. <a href="http://cn.voidcc.com/question/p-maiapkjk-pw.html" target="_blank" title="我需要学习如何制作一个可以创建文本文件的网站?"> 我需要学习如何制作一个可以创建文本文件的网站? </a> </li> <li> 14. <a href="http://cn.voidcc.com/question/p-yocuhnco-tn.html" target="_blank" title="这个空白空间是如何进入我的网站的?"> 这个空白空间是如何进入我的网站的? </a> </li> <li> 15. <a href="http://cn.voidcc.com/question/p-ransaqrs-wa.html" target="_blank" title="创建空白文件的Cron作业"> 创建空白文件的Cron作业 </a> </li> <li> 16. <a href="http://cn.voidcc.com/question/p-tvhmfyon-ue.html" target="_blank" title="由程序创建的空白文件"> 由程序创建的空白文件 </a> </li> <li> 17. <a href="http://cn.voidcc.com/question/p-tsufvepr-es.html" target="_blank" title="创建一个网站WAMP"> 创建一个网站WAMP </a> </li> <li> 18. <a href="http://cn.voidcc.com/question/p-fnowosgf-z.html" target="_blank" title="IIS创建一个网站"> IIS创建一个网站 </a> </li> <li> 19. <a href="http://cn.voidcc.com/question/p-tqtcnzro-bc.html" target="_blank" title="创建一个空白的opengl纹理"> 创建一个空白的opengl纹理 </a> </li> <li> 20. <a href="http://cn.voidcc.com/question/p-fmdjgowd-pz.html" target="_blank" title="如何学习如何创建/部署/管理网站?"> 如何学习如何创建/部署/管理网站? </a> </li> <li> 21. <a href="http://cn.voidcc.com/question/p-ofypkdze-q.html" target="_blank" title="SICP流练习:创建一个具有交替值的流"> SICP流练习:创建一个具有交替值的流 </a> </li> <li> 22. <a href="http://cn.voidcc.com/question/p-kzmcrzqy-gk.html" target="_blank" title="想学习创建动态网站"> 想学习创建动态网站 </a> </li> <li> 23. <a href="http://cn.voidcc.com/question/p-dfalfgvx-bq.html" target="_blank" title="建议网站练习C/C++算法/谜题"> 建议网站练习C/C++算法/谜题 </a> </li> <li> 24. <a href="http://cn.voidcc.com/question/p-fqiomsoe-qy.html" target="_blank" title="itextsharp创建一个损坏的/空白的pdf文件,i-9文件"> itextsharp创建一个损坏的/空白的pdf文件,i-9文件 </a> </li> <li> 25. <a href="http://cn.voidcc.com/question/p-pmybqeyv-vc.html" target="_blank" title="如何创建一个文件夹来进一步创建.csv文件?"> 如何创建一个文件夹来进一步创建.csv文件? </a> </li> <li> 26. <a href="http://cn.voidcc.com/question/p-oxefhjbx-eg.html" target="_blank" title="如何创建类似本网站的文字? (CSS/JavaScript的)"> 如何创建类似本网站的文字? (CSS/JavaScript的) </a> </li> <li> 27. <a href="http://cn.voidcc.com/question/p-sjutecsr-gr.html" target="_blank" title="Visual Studio创建WebForms vs空白文件"> Visual Studio创建WebForms vs空白文件 </a> </li> <li> 28. <a href="http://cn.voidcc.com/question/p-wgxkcmcg-tz.html" target="_blank" title="Graphics.DrawImage()创建一个空白图像"> Graphics.DrawImage()创建一个空白图像 </a> </li> <li> 29. <a href="http://cn.voidcc.com/question/p-kcexkvjg-vu.html" target="_blank" title="Graphics.CopyFromScreen创建一个空白图像"> Graphics.CopyFromScreen创建一个空白图像 </a> </li> <li> 30. <a href="http://cn.voidcc.com/question/p-geldovif-mn.html" target="_blank" title="Python练习“文件帮助”"> Python练习“文件帮助” </a> </li> </ul> </div> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3534119089"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img2.voidcc.com/voidso/script/side.js?t=1652515421853"></script> <script type="text/javascript" src="http://img2.voidcc.com/voidso/plugin/highlight/highlight.pack.js"></script> <link href="http://img2.voidcc.com/voidso/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> 每日一句 </div> <div class="panel-body m-b-sm m-t-sm clearfix"> 每一个你不满意的现在,都有一个你没有努力的曾经。 </div> </div> <div class="row"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- VOIDCC问答侧边栏广告 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3862022848" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> 最新问题 </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://cn.voidcc.com/question/p-rpbmmcon-kr.html" target="_blank" title="在Google Analytics中跟踪POST内容的成功填写表格"> 在Google Analytics中跟踪POST内容的成功填写表格 </a> </li> <li class="side_article_list_item"> 2. <a href="http://cn.voidcc.com/question/p-knlpcgso-tg.html" target="_blank" title="FIFO与/ dev/urandom"> FIFO与/ dev/urandom </a> </li> <li class="side_article_list_item"> 3. <a href="http://cn.voidcc.com/question/p-nnriqxkf-th.html" target="_blank" title="将剧情保存为EMF文件"> 将剧情保存为EMF文件 </a> </li> <li class="side_article_list_item"> 4. <a href="http://cn.voidcc.com/question/p-nmbgvmon-to.html" target="_blank" title="如何从SNMP MIB获取ifOperStatus?"> 如何从SNMP MIB获取ifOperStatus? </a> </li> <li class="side_article_list_item"> 5. <a href="http://cn.voidcc.com/question/p-aqtcpvyj-tq.html" target="_blank" title="在同一个表列中选择重复的记录并将它们列出"> 在同一个表列中选择重复的记录并将它们列出 </a> </li> <li class="side_article_list_item"> 6. <a href="http://cn.voidcc.com/question/p-prpnbzeh-tp.html" target="_blank" title="如何传递一个变量在web API"> 如何传递一个变量在web API </a> </li> <li class="side_article_list_item"> 7. <a href="http://cn.voidcc.com/question/p-rpybhhvj-hb.html" target="_blank" title="将数据从Access 2010导出到Excel 2013"> 将数据从Access 2010导出到Excel 2013 </a> </li> <li class="side_article_list_item"> 8. <a href="http://cn.voidcc.com/question/p-rqyduroc-cp.html" target="_blank" title="量角器和Firefox在测试时超时AngularJS"> 量角器和Firefox在测试时超时AngularJS </a> </li> <li class="side_article_list_item"> 9. <a href="http://cn.voidcc.com/question/p-ztyhnsvv-hw.html" target="_blank" title="SQL Server 2000反向工程工具"> SQL Server 2000反向工程工具 </a> </li> <li class="side_article_list_item"> 10. <a href="http://cn.voidcc.com/question/p-fxxdpqqs-bu.html" target="_blank" title="git对象文件夹权限"> git对象文件夹权限 </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> 相关问题</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://cn.voidcc.com/question/p-dqfywolo-h.html" target="_blank" title="在一个javascript文件中为整个网站创建标签"> 在一个javascript文件中为整个网站创建标签 </a> </li> <li class="side_article_list_item"> 2. <a href="http://cn.voidcc.com/question/p-fdymbkjh-rv.html" target="_blank" title="如何在我的shopify网站中创建一个空的html文件?"> 如何在我的shopify网站中创建一个空的html文件? </a> </li> <li class="side_article_list_item"> 3. <a href="http://cn.voidcc.com/question/p-ssbgptty-kw.html" target="_blank" title="的JavaScript创建空白值"> 的JavaScript创建空白值 </a> </li> <li class="side_article_list_item"> 4. <a href="http://cn.voidcc.com/question/p-szblvzsd-uz.html" target="_blank" title="这是一个很好的练习来创建一个大的桌子吗?"> 这是一个很好的练习来创建一个大的桌子吗? </a> </li> <li class="side_article_list_item"> 5. <a href="http://cn.voidcc.com/question/p-mywkbuyg-v.html" target="_blank" title="如何创建一个“空”的FitNesse网站"> 如何创建一个“空”的FitNesse网站 </a> </li> <li class="side_article_list_item"> 6. <a href="http://cn.voidcc.com/question/p-cquvhwns-pp.html" target="_blank" title="如何在django网站创建一个异常文件夹?"> 如何在django网站创建一个异常文件夹? </a> </li> <li class="side_article_list_item"> 7. <a href="http://cn.voidcc.com/question/p-nslbsicn-ma.html" target="_blank" title="如果不存在,创建一个空白文件?"> 如果不存在,创建一个空白文件? </a> </li> <li class="side_article_list_item"> 8. <a href="http://cn.voidcc.com/question/p-kkjwpdsj-ku.html" target="_blank" title="如何创建一个AJAX网站?"> 如何创建一个AJAX网站? </a> </li> <li class="side_article_list_item"> 9. <a href="http://cn.voidcc.com/question/p-tcbhyljj-vx.html" target="_blank" title="如何创建一个网站下的网站列表"> 如何创建一个网站下的网站列表 </a> </li> <li class="side_article_list_item"> 10. <a href="http://cn.voidcc.com/question/p-ygrocmcp-ev.html" target="_blank" title="JavaScript Help:创建学习游戏 - 匹配并填充空白"> JavaScript Help:创建学习游戏 - 匹配并填充空白 </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div><!-- wrap end--> <!-- footer --> <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://cn.voidcc.com/contact">联系我们</a></li> <li>© 2020 CN.VOIDCC.COM</li> <li><a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备13005482号-13</a></li> <li><script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280098168&web_id=1280098168"></script></li> <li><a href="http://cn.voidcc.com/" target="_blank" title="程序问答园区">简体中文</a></li> <li><a href="http://hk.voidcc.com/" target="_blank" title="程序問答園區">繁體中文</a></li> <li><a href="http://ru.voidcc.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.voidcc.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.voidcc.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.voidcc.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.voidcc.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.voidcc.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.voidcc.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.voidcc.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.voidcc.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.voidcc.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.voidcc.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer> <!-- / footer --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-77509369-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-77509369-5'); </script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?67d4731349f0b00136755b80364ce381"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>