What is JavaScript?

You already know what HTML does — it builds the structure of a page. You know what CSS does — it makes the page look good. But neither of them can react to what a user does.

Click a button — nothing happens. Type in a box — the page does not respond. That gap is what JavaScript fills.

JavaScript is a programming language that runs inside the browser. It watches for things happening on the page — a click, a keypress, a form submission — and responds to them. It can read what is on the page, change it, hide it, show it, calculate things, and update what the user sees — all without reloading the page.

You have already written programs in Python. JavaScript is a different language, but the ideas — variables, functions, conditions — are all the same. You will feel at home faster than you expect.

Adding JavaScript to a page

JavaScript goes inside a <script> tag. Put it at the bottom of <body>, just before </body>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>

    <h1>Hello</h1>

    <script>
      console.log("JavaScript is running")
    </script>

  </body>
</html>

Open this in your browser. Then open the browser console — this is where JavaScript prints output:

Chrome / Edge: press F12, click Console
Firefox: press F12, click Console

You should see JavaScript is running printed there.

console.log() is JavaScript's version of Python's print(). You will use it constantly while learning.

Variables

In Python you write:

name = "Alice"
age = 24

In JavaScript you write:

let name = "Alice"
let age = 24

Same idea. The only difference is the word let in front. Everything else — strings in quotes, numbers without — is identical.

let x = 10
let y = 5
console.log(x + y)    // 15
console.log(x * y)    // 50
console.log(x - y)    // 5

The // starts a comment — same idea as # in Python, just different symbol. JavaScript ignores everything after // on that line.

let and var

You will sometimes see JavaScript variables declared with var instead of let:

var name = "Alice"
let name = "Alice"

Both do the same job. var is the older way — you will see it in older tutorials and examples online. let is the modern way and what you should use. When you spot var in code you find online, just read it as let.

Semicolons

Some JavaScript code ends every line with a semicolon:

let name = "Alice";
let age = 24;

Others do not. Both are valid — JavaScript does not require semicolons. In this course we leave them out to keep the code cleaner. If you see them in examples online, they are not wrong — just a style choice.

Functions

In Python:

def greet(name):
    print("Hello, " + name)

greet("Alice")

In JavaScript:

function greet(name) {
  console.log("Hello, " + name)
}

greet("Alice")

Same idea — a named block of code you can call. The differences:

function keyword instead of def
Curly braces {} instead of a colon and indentation
No colon after the function name

The logic inside works exactly the same.

if statements

In Python:

age = 20
if age >= 18:
    print("Adult")
else:
    print("Minor")

In JavaScript:

let age = 20
if (age >= 18) {
  console.log("Adult")
} else {
  console.log("Minor")
}

The condition goes in parentheses (). The body goes in curly braces {}. Everything else is the same — if, else, comparison operators like >=, === (equals), !== (not equals).

Converting strings to numbers

Remember how in Python you can do this:

float("12.5")   # gives 12.5
int("12")       # gives 12

JavaScript has the same thing:

parseFloat("12.5")   // gives 12.5
parseInt("12")       // gives 12

parseFloat() converts a string into a decimal number. parseInt() converts it into a whole number.

You will need this when reading values from HTML inputs. The .value property always gives you a string — even when the user typed a number. "5" is not the same as 5 in JavaScript:

console.log("5" + "3")       // "53" — strings join together
console.log(5 + 3)           // 8   — actual addition
console.log(parseFloat("5") + parseFloat("3"))   // 8

Any time you need to do arithmetic on something from an input, use parseFloat() on it first.

Challenge

Create a plain HTML file. Add a <script> tag before </body>. Inside it:

Declare two variables — a name and an age
Print both to the console with console.log()
Write a function that takes two numbers and prints their sum. Call it with a few different values.
Add an if statement that prints "Adult" or "Minor" depending on the age variable.

Open the file in your browser and check the console for the output.

← Bootstrap Exercises Next: Talking to the Page →