InnoMarts logo
InnoMarts
Fast websites
← Back to course

Getting Started with JavaScript

Getting Started with JavaScript

Welcome to your first JavaScript lesson.

This is where your web pages stop being quiet posters and start becoming interactive.

HTML gives the page structure.

CSS gives the page style.

JavaScript gives the page behavior.

That means JavaScript can react when a user clicks a button, types into a form, opens a menu, submits data, or does something suspicious like clicking the same button 47 times.

JavaScript is the language that says:

“Something happened. Let me respond.”

Very useful.

Sometimes very dramatic.

But we will start calmly.

No frameworks.

No complicated tools.

No giant setup.

Just HTML, CSS, JavaScript, and your browser.

A beautiful little chaos laboratory.

What You Will Learn

In this lesson, you will learn:

By the end of this lesson, you will have a small webpage connected to a JavaScript file.

And yes, the browser will finally listen to you.

Mostly.

Browsers are polite, but strict.

What Is JavaScript?

JavaScript is a programming language used mainly for web development.

It can run in the browser and control what happens on a webpage.

With JavaScript, you can:

Example:

console.log("Hello, JavaScript!");

This line prints a message in the browser console.

It does not show the message on the page.

It shows it in the developer tools.

The console is where JavaScript speaks when it does not want to disturb the furniture.

JavaScript in the Browser

Your browser understands three main frontend languages:

HTML creates the content.

CSS styles the content.

JavaScript controls behavior.

Imagine a button.

HTML creates the button.

CSS makes it beautiful.

JavaScript decides what happens when someone clicks it.

Without JavaScript, the button can exist.

With JavaScript, the button can do something.

That is the difference between a decorative button and a button with a job.

Nobody likes unemployed buttons.

Create the Project

Create a folder for this lesson:

mkdir javascript-lesson1
cd javascript-lesson1
touch index.html
touch script.js

Your project should look like this:

javascript-lesson1/
  index.html
  script.js

We will keep things simple.

One HTML file.

One JavaScript file.

No build tools.

No npm.

No “install 900 packages before printing hello”.

Just clean beginner JavaScript.

Write the HTML

Open index.html and add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Getting Started with JavaScript</title>
</head>
<body>
  <h1>Getting Started with JavaScript</h1>

  <p id="message">JavaScript is not running yet.</p>

  <button id="changeButton">Change Message</button>

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

Important part:

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

This line connects your JavaScript file to your HTML file.

We put it before the closing body tag.

That way, the HTML elements load first, and then JavaScript can find them.

If JavaScript tries to find an element before the browser creates it, JavaScript gets confused.

Like looking for coffee before entering the kitchen.

Write Your First JavaScript

Open script.js and add this:

console.log("JavaScript is connected!");

Now open index.html in your browser.

You will not see the message on the page.

That is normal.

console.log() prints messages in the browser console.

To open the console:

You should see:

JavaScript is connected!

Congratulations.

Your JavaScript file is connected.

Tiny victory.

Big emotional moment.

No fireworks yet, but the console is alive.

Use alert

JavaScript can also show a popup message.

Add this to script.js:

alert("Hello from JavaScript!");

Refresh the page.

The browser will show a popup.

This proves JavaScript is running.

But be careful with alert().

It is useful for quick testing, but annoying in real websites.

A website that shows too many alerts feels like a person who keeps poking your shoulder while saying “look, look, look”.

Use console.log() more often while learning.

Your users will thank you.

Your future self will also thank you.

Change Text on the Page

Now let us make JavaScript change the page.

Replace the code in script.js with this:

const message = document.getElementById("message");

message.textContent = "JavaScript is now running!";

Refresh the browser.

The paragraph should change from:

JavaScript is not running yet.

to:

JavaScript is now running!

This is your first DOM change.

DOM means Document Object Model.

That sounds official and slightly scary.

But for now, think of DOM as the page structure that JavaScript can read and change.

JavaScript found the paragraph.

Then JavaScript changed its text.

Very simple.

Very powerful.

This is where webpages begin to feel alive.

Add a Button Click

Now let us make the button do something.

Replace your script.js with this:

const message = document.getElementById("message");
const button = document.getElementById("changeButton");

button.addEventListener("click", function () {
  message.textContent = "You clicked the button. JavaScript noticed.";
});

Refresh the page.

Click the button.

The message should change.

What happened?

const message = document.getElementById("message");

This finds the paragraph.

const button = document.getElementById("changeButton");

This finds the button.

button.addEventListener("click", function () {
  message.textContent = "You clicked the button. JavaScript noticed.";
});

This tells the browser:

“When the user clicks the button, run this code.”

This is called an event listener.

Events are things that happen on the page.

Examples:

JavaScript can listen for these events and respond.

Like a very focused waiter, but with fewer plates.

Add Simple Styling

We are learning JavaScript, but a little CSS will make the page nicer.

Update your index.html like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Getting Started with JavaScript</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    button {
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }
  </style>
</head>
<body>
  <h1>Getting Started with JavaScript</h1>

  <p id="message">JavaScript is not running yet.</p>

  <button id="changeButton">Change Message</button>

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

Now the page looks cleaner.

HTML gives structure.

CSS gives style.

JavaScript gives behavior.

The three friends are finally working together.

Nobody has thrown a chair yet.

Good start.

Run with a Local Server

You can open the HTML file directly in the browser.

But you can also run a simple local server.

If you use Caddy, run this inside the project folder:

caddy file-server --listen :8080

Then open:

http://localhost:8080

This is useful because many real web features work better with a local server.

For this lesson, opening the file directly is enough.

But using a local server is a good habit.

A professional habit.

Tiny DevOps energy.

Common Mistakes

Wrong File Name

If your HTML says:

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

then your file must be named:

script.js

Not:

scripts.js
main.js
Script.js
javascript.js
please-work.js

The name must match exactly.

Browsers are not mind readers.

Sadly.

Script Tag in the Wrong Place

If you put the script in the head, JavaScript may run before the HTML elements exist.

This can cause errors.

Beginner-friendly solution:

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

Put it before the closing body tag.

Later you will also learn about defer.

But today we keep the beast calm.

Forgetting to Save Files

This happens more often than people admit.

You write correct code.

You refresh the browser.

Nothing changes.

You panic.

Then you realize you did not save the file.

Classic.

Save first.

Refresh second.

Panic never.

Well, almost never.

Not Opening the Console

The console is your friend.

A serious friend.

A friend who tells you when your code is wrong.

Open it often.

Read the errors.

Errors are not insults.

They are clues.

Sometimes rude clues, but still clues.

Practice

Create your own version of the page.

Change:

Then add another console.log() message:

console.log("The button is ready.");

Try to understand where the message appears.

The more you use the console, the less scary it becomes.

Like a dark basement.

Still dark.

But now you know where the light switch is.

Mini Challenge

Add a second button.

The first button should say:

Show Happy Message

The second button should say:

Show Serious Message

When the first button is clicked, show:

JavaScript is fun!

When the second button is clicked, show:

JavaScript requires attention.

You will need:

Try it before looking for help.

Struggle is part of learning.

Not forever.

Just enough for the brain to wake up.

Summary

Today you learned:

This is the beginning.

Small code.

Big door.

JavaScript is huge, but you do not need to learn everything today.

Today you connected a file, changed text, and reacted to a button click.

That is already real JavaScript.

Next Lesson

In the next lesson, we will learn variables and data types.

You will meet let, const, strings, numbers, and booleans.

Basically, JavaScript will start remembering things.

Which is more than we can say about some browsers after refresh.