Build Your First JavaScript Program Step by Step

What We're Building Today

Here's your finished program in advance, so you know where we're headed:

• A web page with a heading and a button
• When the page loads → a message appears in the console
• When youclick the button→ the page displays a personalized greeting

Simple? Yes. But this tiny program uses the exact same fundamentals — HTML structure, a linked script, variables, functions, and events — that power every website on the planet.

Step 1: Set Up Your Tools (2 Minutes)

Professional developers don't write code in Notepad — they use acode editor. The most popular one in the world isVisual Studio Code (VS Code), and it's completely free.

Install VS Code

1. Go tocode.visualstudio.com
2. Download the version for your operating system (Windows / Mac / Linux)
3. Install it with the default settings

Create Your Project Folder

1. Make a new folder anywhere on your computer — name itmy-first-js-program
2. Open VS Code →File → Open Folder→ select your folder

That's it. You now have the same setup as developers at Google and Microsoft.

💡 No installation? No problem.If you can't install anything right now (school/office computer), you can follow along in your browser using free online editors likeCodePen(codepen.io) orJSFiddle— same code, same result.

Step 2: Create the HTML File

Inside VS Code, create a new file calledindex.htmland type this:

script.js

Copy Code Run Online

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First JavaScript Program 🎉</title>
  </head>
  <body>
    <h1>My First JavaScript Program</h1>
    <p>Click the button to see JavaScript in action:</p>
    <button id="greetBtn">Greet Me! 👋</button>
    <p id="message">
    </p>
  </body>
</html>

🧠 What Each Part Does

Line	Purpose
<!DOCTYPE html>	Tells the browser "this is a modern HTML page"
<h1>and<p>	The visible content — headings and paragraphs
<button id="greetBtn">	A button we can find later using itsid
<p id="message"></p>	Anempty paragraph— JavaScript will fill it in!

Notice the twoidattributes:greetBtnandmessage. Think of anid as a name tag— it's how JavaScript will find these exact elements on the page

Step 3: Create the JavaScript File

Now create a second file in the same folder calledscript.js:

script.js

Copy Code Run Online

// ==========================================// My First JavaScript Program 🎉// ==========================================
//
1. A message for the console(hello, old friend!)console.log("The page loaded successfully! ✅");
//
2. Store the user's name in a variablelet userName = "Coder";
//
3. Find the HTML elements by their idlet button = document.getElementById("greetBtn");let messageArea = document.getElementById("message");
//
4. A function that displays the greetingfunction showGreeting() {  messageArea.textContent = "Hello, " + userName + "! You just ran JavaScript! 🚀";  console.log("The button was clicked! 🖱️");}
//
5. Connect the button click to our functionbutton.addEventListener("click", showGreeting);

🧠 Line-by-Line Breakdown

1. Lines starting with//→ These arecomments— notes for humans. JavaScript ignores them completely. Use them generously to explain your code.
2. console.log(...)→ Prints a load-confirmation to the console (you learned this inLesson 2).
3. let userName = "Coder"→ Avariablestoring text. Change"Coder"to your own name!
4. document.getElementById(...)→ JavaScript's way of saying"find the element with this id."We found both the button and the empty paragraph.
5. function showGreeting() { ... }→ Afunction— a saved set of steps that runs when we ask it to. Inside,textContentputs our greetinginsidethe empty paragraph.
6. addEventListener("click", showGreeting)→ The magic line:"When the button is clicked, runshowGreeting."
   

   Step 4: Connect JavaScript to HTML

   Right now, your HTML file doesn't knowscript.jsexists. Openindex.htmlagain and addone linejust before the closing</body>tag:

   Architecture Diagram

   Copy Diagram

     <p id="message"></p>
     <script src="script.js"></script>   <!-- 👈 ADD THIS LINE --></body>

   ⚠️ Why at the bottom?The browser reads HTML top to bottom. If the script loadsbeforethe button exists,getElementById("greetBtn")finds nothing and your program breaks. Placing the<script>tag just before</body>guarantees all elements are ready first. This is a classic beginner mistake — now you'll never make it.

Step 5: Run Your Program! 🎬

1. Save both files (Ctrl + S/Cmd + S)
2. Findindex.htmlin your file explorer anddouble-click it— it opens in your browser
3. PressF12to open the console → you'll see:The page loaded successfully! ✅
4. Click the "Greet Me!" button→ the page displays:

Hello, Coder! You just ran JavaScript! 🚀

And in the console:The button was clicked! 🖱️

🎉 Congratulations — you just built and ran a real JavaScript program.Not a simulation. Not a tutorial demo. A genuine interactive program, built by you.

Step 6: Make It Truly Interactive (Bonus Upgrade) ⭐

Hard-coding your name works, but let's make the programaskfor the user's name. Replace the variable line and the function inscript.js:

script.js

Copy Code Run Online

// Ask the user for their namefunction showGreeting() {  let userName = prompt("What's your name? 😊");
if (userName) {
  messageArea.textContent = "Hello, " + userName + "! Welcome to JavaScript! 🚀";
} else {
  messageArea.textContent = "Hello, mysterious stranger! 👻";
}
}

Now clicking the button opens a small popup asking for a name — and the page greets that person personally. You just used three core concepts fromLesson 1—variables, functions, and conditionals— in a real program.

---

How This Program Works: The Big Picture

Here's the full journey of a single button click:

script.js

Copy Code Run Online

1. Browser loads index.html↓2. Reaches <script src="script.js"> → loads your JavaScript↓3. JavaScript finds the button & paragraph(getElementById)↓4. addEventListener starts "listening" for clicks 👂↓5. USER CLICKS → showGreeting() runs↓6. Function updates the paragraph's textContent
↓
7. The page changes instantly — no reload needed ✨

This exact pattern — find element → listen for event → change the page — is the foundation of every interactive website ever built, from a simple button to the entire Gmail interface.

Troubleshooting: Common Beginner Errors

😟 Problem	🔍 Likely Cause	✅ Fix
Nothing happens on click	<script>tag missing or wrong filename	Checksrc="script.js"matches the filename exactly
Console saysCannot read properties of null	Script loaded before HTML elements	Move<script>to just above</body>
showGreeting is not defined	Function name typo (case-sensitive!)	showGreeting≠showgreeting— match exactly
Code changes don't show	Old file cached in browser	Hard refresh:Ctrl + Shift + R(Win) /Cmd + Shift + R(Mac)
idmismatch error	HTMLid="greetBtn"vs JS"greetbtn"	IDs are case-sensitive too — copy-paste them

Quick Self-Check: Lesson 3 Quiz 🧠

1. Why do we place the<script>tag just before</body>?
2. What doesdocument.getElementById("message")do?
3. What are lines starting with//called, and does JavaScript run them?
4. Which method "listens" for a button click?
5. True or false: JavaScript file names and id names are case-sensitive.

(Answers: 1. So all HTML elements exist before the script runs · 2. Finds the HTML element with id="message" · 3. Comments — no, JavaScript ignores them · 4. addEventListener("click", ...) · 5. True)