Lesson 10 of 18

JavaScript Intro ⚙

🎯 Grades 9–12 ⏱ ~35 minutes 💚 Intermediate

What You'll Learn

Write JavaScript that runs in the browser
Understand variables, data types, and operators in JS
Link a JS file to HTML

Adding JavaScript to HTML

Create a file called script.js. Link it at the end of your HTML body:

HTML

<body>
  <!-- all your HTML above -->
  <script src='script.js'></script>
</body>

Opening the browser console (F12 → Console) lets you see JavaScript output and errors.

Variables in JavaScript

JavaScript

// Three ways to declare variables:
const name = 'Alex';     // const: never changes
let score = 0;           // let: can change
var old = 'avoid this';  // var: older, avoid

console.log(name);       // print to console
console.log(score + 10); // math works too

// Data types
const text = 'Hello';    // string
const num = 42;          // number
const pi = 3.14;         // also a number
const isActive = true;   // boolean
const nothing = null;    // null

💡

const vs let

Use const by default. Only use let when you know the variable will change. Never use var in modern JS.

Template Literals

JavaScript

const name = 'Oklahoma';
const year = 2026;

// Template literal (backtick strings)
console.log(`Hello, ${name}! Year: ${year}`);
// Hello, Oklahoma! Year: 2026

// Multi-line strings
const html = `
  <div class='card'>
    <h2>${name}</h2>
  </div>
`;

⚙">Console Calculator

Create script.js and link it to a page. In the console, declare variables for two numbers and print their sum, product, and whether the first is greater than the second. Open the browser console to see your output!

Quick Check

Which keyword declares a variable that cannot be reassigned?

Alet

Bvar

Cconst

What does console.log() do?

ASaves data to a file

BPrints output to the browser console

CCreates an HTML element

How do you insert a variable into a template literal?

AUse + to join it

BWrap it in ${curly braces}

CUse %variable%