What Is JavaScript? Your First JavaScript Program

What you will learn

You already know how to build a page with HTML and make it look good with CSS. But the page just sits there. Click a button and nothing happens. JavaScript is what brings the page to life. In this lesson you will learn what JavaScript is, why we need it, how to add it to a page with the <script> tag, how to use the browser console, and how to run your very first program.

What is JavaScript?

JavaScript (often shortened to JS) is a programming language that runs in the browser. It lets a web page think and react: respond to clicks, check what the user typed, change content, talk to servers and much more.

Think of a house again:

• HTML is the skeleton and the walls. It decides what exists.
• CSS is the paint and the furniture. It decides how it looks.
• JavaScript is the electricity. Switches, doorbells, fans and lights all work because of it. It decides what happens.

Here is a page with only HTML and CSS. The button looks nice but does nothing:

<button>Turn on the light</button>

With JavaScript, you can tell the browser: “When someone clicks this button, do something.” You will write code like that very soon.

Good to know: JavaScript and Java are two completely different languages. The names look similar only because of a marketing decision in 1995. Java is not part of this course.

Why do we need JavaScript?

Without JavaScript, a web page is like a printed poster. You can read it, but you cannot interact with it. Every real action would need a full page reload.

JavaScript is used for things you meet on websites every day:

What you see	What JavaScript is doing
“Password is too short” appears while you type	Checks your input instantly, with no reload
A heart turns red when you press Like	Changes the page after a click
Search suggestions appear as you type	Fetches data and shows it live
A dark mode toggle	Changes the theme and remembers your choice
Image sliders, popups, dropdown menus	Shows and hides things on events
Online games, maps, chat apps	Runs complex logic in the browser

So in one line: HTML gives structure, CSS gives style, JavaScript gives behaviour.

JavaScript is not only for the browser

JavaScript was born inside the browser, but today it also runs in other places:

• Node.js lets you run JavaScript on a server, to build APIs and websites.
• Mobile and desktop apps can be built with JavaScript tools.

In this course we start in the browser, because that is the easiest place to see the results of your code.

How JavaScript runs

The browser has a built-in JavaScript engine (Chrome’s engine is called V8). It reads your code from top to bottom, one line at a time, and runs each instruction in order. There is nothing to install: if you have a browser, you can already run JavaScript.

Adding JavaScript to a page

Just like CSS, JavaScript can be added in two main ways. Both use the <script> element.

1. Internal script

Write the code between <script> and </script>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Script</title>
</head>
<body>
  <h1>Welcome</h1>

  <script>
    console.log("The page has loaded!");
  </script>
</body>
</html>

This is fine for small experiments and quick tests.

2. External script (the one you will use)

Put your code in its own file, usually named script.js, and connect it with the src attribute:

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

The script.js file contains only JavaScript, with no <script> tags inside it:

console.log("Hello from script.js");

Just like external CSS, one JavaScript file can be shared by many pages, and your HTML stays clean.

In the MyCodeNest editor: the JS tab is your script.js file. When you use Practice in Editor or a Try it button, the <script src="script.js"> tag is added for you.

Where should the script go?

The browser reads the page from top to bottom. If your script runs before the HTML it wants to change has been created, it will not find those elements. There are two easy fixes.

Option 1: put the script at the end of <body>.

<body>
  <h1 id="title">Hello</h1>

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

Option 2: put it in <head> with the defer attribute. defer tells the browser: “Download the script now, but run it only after the whole HTML is ready.”

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

Both work. Modern projects prefer defer in the head.

The console

The console is your notebook for JavaScript. It is a panel in the browser where your code can print messages, and where the browser shows you errors. Every JavaScript developer uses it every single day.

How to open it

• Chrome / Edge: press F12 (or Ctrl + Shift + J on Windows and Linux, Cmd + Option + J on Mac), then click the Console tab.
• Firefox: press Ctrl + Shift + K (Cmd + Option + K on Mac).
• MyCodeNest editor: the Console panel is right below the preview. Press Run and your messages appear there.

Printing with console.log()

console.log() prints whatever you put inside the brackets:

console.log("Hello, World!");
console.log(2 + 3);
console.log("My age is", 20);

Output:

Hello, World!
5
My age is 20

Notice three things:

• Text goes inside quotes ("Hello"). Numbers do not need quotes.
• Maths works right inside the brackets: 2 + 3 is calculated and prints 5.
• You can print several things at once by separating them with commas.

There are two friends of console.log() worth knowing:

console.warn("This is a warning");
console.error("This is an error message");

They print in yellow and red so they stand out.

Tip: When something is not working, put a console.log() in your code to see what is going on inside. This simple trick is the most-used debugging method in the world.

Your first program

A program is just a list of instructions the computer follows in order. Let us write one in three small steps.

Step 1: print a message

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

Run it and look at the console. You just wrote and ran your first JavaScript program.

Step 2: change something on the page

Here is a tiny page:

<h1 id="title">Hello!</h1>
<button id="btn">Click me</button>

And the JavaScript:

const title = document.getElementById("title");
title.textContent = "JavaScript changed me!";

Line by line:

• document.getElementById("title") says “find the element whose id is title”.
• const title = ... saves that element with a name, so we can use it again. (Variables are the next lesson.)
• title.textContent = "..." replaces the text inside that element.

When the page runs, the heading changes from “Hello!” to “JavaScript changed me!”. You just used code to change a web page.

Step 3: react to a click

const title = document.getElementById("title");
const button = document.getElementById("btn");

button.addEventListener("click", function () {
  title.textContent = "You clicked the button!";
  console.log("Button was clicked");
});

addEventListener means “listen for an event”. Here we listen for a "click" on the button, and when it happens, the function runs. Click the button and watch the heading change.

Do not worry if document, addEventListener and function feel new. You will learn each of them properly in later lessons. For now, the goal is just to see that JavaScript can control a web page.

Basic rules of writing JavaScript

// This is a single-line comment. The browser ignores it.

/* This is a
   multi-line comment. */

console.log("Statement one");   // each instruction is a "statement"
console.log("Statement two");

• Statements: each instruction is called a statement. They run from top to bottom.
• Semicolons: it is a good habit to end a statement with ;. JavaScript can often guess where a statement ends, but writing ; avoids surprises.
• Comments: use // for a note on one line, and /* ... */ for several lines. Comments are for humans, not for the computer.
• Case-sensitive: console.log works, but Console.log and console.Log do not. name, Name and NAME are three different things.

Common mistakes

• Forgetting the quotes around text. console.log(Hello) gives ReferenceError: Hello is not defined, because JavaScript thinks Hello is a name it should already know. Write console.log("Hello").
• Wrong capital letters. Console.log("Hi") or document.getElementByID(...) will fail. It is console with a small c and getElementById with a small d.
• Running the script before the HTML exists. If your script is in the <head> without defer, you may see Cannot set properties of null. Move the script to the end of <body> or add defer.
• Missing brackets or quotes. Every ( needs a ), and every opening quote needs a closing one. The error message SyntaxError usually means one is missing.
• Wrong file name in src. <script src="scripts.js"> will not find a file called script.js.
• Never opening the console. JavaScript errors do not appear on the web page. If something does not work, open the console first. The red message tells you the file, the line number and what went wrong.
• Mixing up Java and JavaScript. They are different languages. Searching for “Java” tutorials will only confuse you.

Practice

1. Click Practice in Editor. In the JS tab, use console.log() to print your name on one line and your favourite food on the next line. Press Run and check the console.
2. Change the heading: use document.getElementById("title").textContent = "..." to show your own text.
3. Predict the output of console.log(2 + 3 * 4) before you run it. Then run it and check. (Hint: multiplication happens first.)
4. Make the button work: add a click listener (copy Step 3) that changes the paragraph with id="message" to say “Button pressed!”.
5. Break it on purpose. Remove one closing quote from a console.log("Hi") and read the error message in the console. Then fix it. Getting comfortable with error messages is a superpower.

Recap

• JavaScript is the programming language of the web. HTML is structure, CSS is style, JavaScript is behaviour.
• We need it for anything interactive: clicks, form checks, live updates, games and apps.
• It also runs outside the browser (for example with Node.js), but we start in the browser.
• Add it with the <script> tag: internal (code between the tags) or external (<script src="script.js">). External is best.
• Put the script at the end of <body>, or in the <head> with defer.
• The console is where you print messages with console.log() and where you read errors. Open it with F12.
• JavaScript is case-sensitive, runs top to bottom, and uses // for comments.
• Next you will learn how to store information in variables with let, const and var.