1.3 Creating a JavaScript File
🔨

1.3 Creating a JavaScript File

1.2 Creating a JavaScript Workspace

Creating a Workspace

Let's start with a good organization of our workspace:

  1. Create a New Folder on your computer. Take note of where you created it on your machine.
  2. Open that folder using VSCode as so:
  3. image

Adding The Necessities

In order to run JavaScript, you are going to need a minimum of two files:

  1. HTML File
  2. This file is the middleman between the JavaScript and the web browser, which is also our "code runner".

  3. JavaScript File
  4. This file is where we will be writing most of our code.

💡

For that more experienced JavaScript programmer, I know you can shove the JavaScript code into the HTML file, but I just hate cluttering the HTML file with JavaScript.

Here's my current workspace structure:

image

Connecting JavaScript

Here's how you include JavaScript in your workspace:

<script src="{path-to-javascript-file}.js"></script>

The main thing to pay attention to is the src property. This basically tells the HTML to load up the JavaScript file located in that certain path. In my case, my path is just src="script.js".

After that, you have gotten yourself a working JavaScript workspace!

Resources

If you have any issues still, try downloading the project structure use in this chapter:

HTML File

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My JavaScript Workspace</title>
</head>

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

JavaScript File

console.log("LET THIS WORK!");

⚖️

Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.