1

I'm a beginner(self teaching, day 2) in web development, and so far I've learned how to use the console in Chrome for writing functions in Javascript. To further my understanding of how Javascript is implemented, I want to create a blank test environment that I can build from the ground up. I've tried looking at guides for starting a new Javascript project (I want to use Visual Studio Code's "Debugger for Chrome" extension), but every guide starts by saying "open up your project folder", and I don't have any projects yet! I've looked, but haven't found any documentation detailing "how to create a project folder". So my questions are:

  • What files(w/ appropriate extensions) do I need in a folder for a blank webpage?
  • Can I make these files by creating text files and just changing the extensions?
  • Do any of these files need any specific entries or formatting so that they work appropriately with my editor?

Thanks everyone.

Chris Phillips
  • 1,997
  • 2
  • 19
  • 34
  • 2
    do you mean like http://jsfiddle.net ? – blurfus Oct 12 '17 at 17:16
  • 1
    The only thing you need is an index.html... then get a default html template and add a script tag to it. In the script tag type your JavaScript. Finally open the index.html file in your browser. It’ll run the JavaScript inside the file. A project folder is simply any directory that holds your project. – jscul Oct 12 '17 at 17:16
  • 1
    @ochi Thanks for pointing me to this resource. It will certainly come in handy while I'm on the move! – Chris Phillips Oct 12 '17 at 17:20

2 Answers2

5

Simple HTML page can be enough, but it is better to extract your JS code to separate file:

  • index.html
  • scripts.js

All of these are simple text files, so you can create them as text files first and just change the extension as you suggest.

In your index.html file you need to include that scripts.js file like this:

<!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>

You should add the import at the end of the body so you do not need to wait until the DOM is parsed.

Then you can have something like this in your scripts.js:

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

Sure you can also use stuff like https://jsfiddle.net/ or https://jsbin.com/.

Martin Adámek
  • 16,771
  • 5
  • 45
  • 64
0

Simply put, the easiest thing to do is find a folder in your computer hierarchy where you'll be comfortable doing your work. Maybe underneath your Documents folder you can create a sub folder called, "Websites." Within Websites you can create, "project_1" or something.

Inside of your project folder you can easily create an index.html file. You can create a blank Notepad.txt file, and then just rename it to index.html. This index.html should include the boiler plate HTML code (such as headers, a blank body, and a tag to a JavaScript file.) From there you could create the corresponding JavaScript file, called project_1.js (js for JavaScript.)

At that point you'll have a basic working directory where you can continue to learn and build your website.

zachbugay
  • 704
  • 1
  • 9
  • 21