The console is great for experiments, but anything you type there disappears when you close the browser. Real programs live in files that you can save, edit, and share.
Let's make a real web page with real JavaScript in it.
Step 1: Make a folder
Create a new folder somewhere easy to find, like your Desktop or Documents, and call it my-first-js.
Step 2: Open the folder in VS Code
Open VS Code, choose File → Open Folder..., and pick your my-first-js folder.
Step 3: Create an HTML file
In VS Code, create a new file (File → New File) and save it inside your folder as index.html. Type this in:
<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript</title>
</head>
<body>
<h1>Hello from HTML!</h1>
<p>Open the console to see a secret message.</p>
<script src="script.js"></script>
</body>
</html>Don't panic about the HTML. Here's all you need to know right now: it's a basic web page with a heading and a paragraph, and the important line is this one:
<script src="script.js"></script>That line says "Hey browser, go and load the JavaScript file called script.js and run it."
Step 4: Create a JavaScript file
Create another new file and save it in the same folder as script.js. Type this:
console.log("Hello from my very own JavaScript file!");
console.log("I am a programmer now.");
console.log("Fear me.");It prints
Hello from my very own JavaScript file! I am a programmer now. Fear me.
Step 5: Open it in your browser
Find index.html in your folder and double-click it. It should open in your web browser. You'll see the heading and paragraph. Now open the console (Ctrl + Shift + J or Cmd + Option + J), and there it is:
Notice that the three lines appeared in order, from top to bottom. That's how JavaScript runs: line by line, from the top of the file to the bottom, just like you read a book.
Whenever you change script.js, save the file (Ctrl + S or Cmd + S) and refresh the browser page (F5 or Cmd + R) to see the changes.
Tired of refreshing? VS Code has a free extension called Live Server. Install it from the Extensions panel (the icon that looks like four little squares), then right-click index.html and choose Open with Live Server. Now every time you save, the page refreshes automatically. Magic!
The browser reads an HTML file from top to bottom. If it reaches a <script> tag, it stops everything, loads the script, and runs it, before it builds the rest of the page. If your script tries to work with a heading that hasn't been built yet, it won't find it. Putting the <script> tag at the very end of the <body> means the whole page exists before your code runs. (Another way is to put the script in the <head> and add the word defer, like <script src="script.js" defer></script>, which tells the browser "load this now, but run it after the page is built." Both work.)