JavaScript Variables, Data Types, and the HTML DOM

What are variables?

In JavaScript, a variable is a named container used to store data values that your program can use and change.

Think of a variable as a labeled storage box: the box is the variable, the label is its name, and the items inside are the data. Instead of searching your entire program for a specific piece of information, you simply call the label to retrieve or update what is packed inside.

1. Reference Guide

Key Vocabulary

Term	Definition	Example
Variable	A named container used to store data values.	let people = 10;
let	Declares a variable that can be reassigned later.	let health = 10;
const	Declares a constant variable that cannot be reassigned.	const birthday = "1887-03-05";
Data Type	The kind of value stored in a variable (e.g., String, Number, Boolean).	typeof "Mr. Mort"
Object	A reference type storing a bundle of related key-value info.	{ name: "Levi", grade: 7 }
Array	A reference type storing an ordered list of items.	["chips", "apple", "cookie"]
HTML DOM	The Document Object Model that connects scripts to page elements.	document.getElementById(...)

• Variables let you store a value once and reuse it across your code.
• Use let when data is going to change later on and use const when values stay constant.
• Primitive types include Numbers, Strings, and booleans. Reference types group related data into Objects and Arrays.
• JavaScript updates the HTML DOM dynamically by binding variable state to web page elements.

Variable Declaration & Data Types Overview

Type	Purpose	Syntax Example	Notes
let	Reassignable state	let health = 100;	Value can change later
const	Fixed binding	const username = "SirMorty";	Immutable binding
String	Text data	let teacher = "Mr. Mort";	Wrapped in quotes
Number / Integer/floats	Numerical data	let people = 12;	Quantitative calculations
Boolean	True/False	let isPresent = true;	Conditional logic
Array	Ordered list	let snacks = ["chips", "apple"];	Indexed starting at 0
Object	Key-value mapping	const student = { name: "Levi" };	Encapsulates related values

2. LxD Cycle

Define:

• POV: students need to learn variables and DOM updates to store data and show it live on a website or game

• Learning Goal: Students will learn how to create and change JavaScript variables, work with different data types, and display those values on a website or game

Ideate:

• HMW Question: How might we help students distinguish when to use let versus const in real applications?

• HMW Question: How can we update a website’s display whenever a JavaScript variable changes?

• Activity: Students will build custom game variables (health, score trackers, player profiles) and change them using both console logs and HTML DOM clicker interfaces.

Prototype & Test: We plan on teaching the lesson accordingly with the instructions below and gain some student feedback. We then plan on modifying the lesson accordingly based on the feedback.

3. CS111 Requirements

This lesson covers key CS 111 concepts from MiraCosta College, showing how variables, data types, and web page updates work together:

The CS 111 concepts covered in this lesson include:

• Differentiating variable scope and mutability: Understanding when to allocate reassignable storage (let) versus permanent values (const).
• Mastering Primitive Data Types: Storing numeric quantities (Integers/Numbers), text sequences (Strings), and logical flags (Booleans).
• Handling Special States: Distinguishing unassigned memory (undefined) from intentionally empty references (null).
• Structuring Reference Data Types: Grouping related variables into cohesive units using JavaScript Objects and ordered Arrays.
• DOM Data Binding & State Sync: Reading element content using document.getElementById(), casting string representations into numeric values using parseInt(), mutating variables, and writing results back to the interface.

These requirements are taught through examples, interactive code runners, and a homework assignment.

4. Lesson Plan

Learning Objective: By the end of this lesson, you will be able to declare variables using let and const, differentiate primitive data types (Integers, Strings, Booleans), create reference structures (Objects, Arrays), and connect JavaScript variables to the HTML DOM.

Success Criteria: You can write code declaring integers, strings, booleans, arrays, and objects, predict variable reassignment outcomes, and update HTML element content using JavaScript functions.

What are variables?

In JavaScript, a variable is a named container used to store data values that your program can use and change.

Think of a variable as a labeled storage box: the box is the variable, the label is its name, and the items inside are the data. Instead of searching your entire program for a specific piece of information, you simply call the label to retrieve or update what is packed inside.

Why use variables?

Instead of typing the same value over and over, you store it once in a variable; if that value changes later, you only have to update it in one single place instead of searching for it through hundreds of lines of code.

1. let vs const

When you create a variable, you use let or const.

Let is used when you may want to change the value later on Examples: your health bar, your age

let health = 0; health = health + 1;

Const is used when you don’t want the value to change Examples: your birthday, your username for a game

const birthday = "1887-03-05"; const username = "SirMorty"; Now let’s try this example below together

Code Runner Challenge

Create 2 variables. one of a health system that adds by 6 and one of your birthday. (Look at the instructions above for help)

View IPYNB Source

%%js

// CODE_RUNNER: Create 2 variables. one of a health system that adds by 6 and one of your birthday. (Look at the instructions above for help)

let health = 0;
health = health + 6;

const birthday = "1887-03-05";

console.log(health);
console.log(birthday);

Python Java JavaScript Pseudocode 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

5. Code Example

Data Types

A data type is what kind of value is stored in the variable. Here are the main ones:

let students = 10; Number → how many(quantitative)

let teacherName = "Mr. Mort"; String → text (You only need double quotes when writing strings)

let isPresent = true; Boolean → true or false value

let homework; Undefined → declared but not filled yet

let deskItem = null; Null → intentionally empty/no value

A. Integers & Numbers

Numbers represent numerical values (integers or decimals) used for math, tracking values, or counting items.

Code Runner Challenge

Integer / Number example

View IPYNB Source

%%js
// CODE_RUNNER: Integer / Number example
let students = 12;
let teachers = 0;


teachers = teachers + 10;

console.log("Students: " + students);
console.log("Teachers: " + teachers);

Python Java JavaScript Pseudocode 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

B. Strings

Strings represent text and must be wrapped in quotes (single or double).

Code Runner Challenge

String example

View IPYNB Source

%%js
// CODE_RUNNER: String example
let teacherName = "Mr. Mort";
const username = "SirMorty";

console.log("Teacher: " + teacherName);
console.log("Username: " + username);

Python Java JavaScript Pseudocode 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

C. Booleans

Booleans store logical true or false values.

Code Runner Challenge

Boolean example

View IPYNB Source

%%js
// CODE_RUNNER: Boolean example
let isPresent = true;
let hasPencil = false;

console.log("Is present: " + isPresent);
console.log("Has pencil: " + hasPencil);

Python Java JavaScript Pseudocode 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

Reference Data Types (Bigger containers)

When you need to store multiple varibles together into category.

Object → a bundle of related info Array → a list of the same type of data

Objects

Instead of storing everything separately: let name = "Levi"; let grade = 7; let hasPencil = false;

You can group it into one object: const student = { name: "Levi", grade: 7, hasPencil: false };

Arrays:

Instead of storing every item separately: let hobby1 = "golf"; let hobby2 = "basketball"; let hobby3 = "stock trading";

You can group it into one array: let hobbies = ["golf", "basketball", "stock trading"];

Code Runner Challenge

Make an object of your favorite food, color and movie. (Refer above for help)

View IPYNB Source

%%js

// CODE_RUNNER: Make an object of your favorite food, color and movie. (Refer above for help)

const FavoriteThings = {
    food: "Pizza",
    color: "Blue",
    movie: "Interstellar"
};

console.log(FavoriteThings);

Python Java JavaScript Pseudocode 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

HTML DOM (Document Object Model)

Have you ever played a shooter game? If so, you’ve likely encountered HTML DOM or something similiar. HTML DOM is commonly used for things like a score tracker on the top or a health bar. Javascript can change HTML dom by changing the amount of points in the bar

So how does HTML DOM connect to variables?

HTML DOM can store data inside of something like a variable for player score and then the DOM can take the value of that variable and output it on a website

1. The first part of the code is the HTML button, text and DOM id → <button>, <span id =>

2. onclick functions → playerScores(), aiScores()

3. Click happens (button click, respective fuction is colled)

• get value of DOM and assign variable let playerPoints = parseInt(document.getElementById("playerScore").textContent), or let aiPoints = parseInt(document.getElementById("aiScore").textContent)

• increment varaible → playerPoints += 1, or aiPoints += 1;

• set value of updat to the DOM → document.getElementById("playerScore").textContent = playerPoints;, or parseInt(document.getElementById("aiScore").textContent) = aiPoints

6. Hacks & Practice Tasks

Prepare for your IPYNB submission

Submit your work by creating a notebook in VS Code, saving it in your portfolio repository as an .ipynb file, committing it to GitHub, and then submitting the link to your GitHub portfolio repository through the Google Form.

Follow these steps:

1. Open VS Code and create a new notebook file in your portfolio repository under “notebook” folder. (we recommend you to create a new folder “homework” under the notebook folder for organization.)
2. Have a clear name for the notebook such as YYYY-MM-DD-variables-hw.ipynb.
3. Add one raw cell at the top with the frontmatter:

Code Runner Challenge

Create a const object called student with your name, grade, and favorite subject.

View IPYNB Source

layout: post
codemirror: true
title: Variables and Data Types HW
categories: [JavaScript]
lesson_language: JavaScript
lesson_topic: Variables HW
lesson_part: interactive
lesson_type: lesson
permalink: /javascript/variables/hw
author: yourGithubID

Python Java JavaScript Pseudocode 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

1. Finish the popcorn hack and homework section inside your notebook with code cells.
2. Save the file and commit it to your portfolio repository on GitHub.
3. Submit your deployed portfolio link to the form when you are done.

Important:

• The notebook must be an .ipynb file
• The notebook should be stored inside your portfolio repository.
• Make sure your portfolio is deployed.

Submit Your Homework:

• You should submit your homework through Open Coding Society
• If it doesn’t work here is a Google Form link: https://forms.gle/Fa7nMk8ewzzqdoTi6

HOMEWORK

Grading Plan

This assignment is worth 1.0 point total (0.2 points per requirement):

• 0.2 pts: Popcorn Hack 1 is fully completed with let health incrementation and a const birthday string.
• 0.2 pts: Popcorn Hack 2 correctly defines a FavoriteThings object containing food, color, and movie.
• 0.2 pts: Homework student object and scores array are created using proper syntax.
• 0.2 pts: Demonstrates clear understanding of primitive data types (Integers, Strings, Booleans).
• 0.2 pts: Extra credit HTML DOM clicker code correctly increments variables and updates the UI dynamic text.

7. Lesson Revisions

Revision Made: We updated the lesson content by adding explicit primitive data type sections for Booleans, Integers, and Strings with code examples for each. Additionally, we linked JavaScript variable changes directly to HTML DOM rendering using interactive clicker code runners, helping students understand how backend state changes front-end UI elements.

8. Feedback Evidence

Feedback Received: no feedback yet

9. References

MiraCosta College. (2026). CS 111: Introduction to Computer Science I. MiraCosta College Catalog. https://catalog.miracosta.edu/disciplines/computerscience/#courseinventory

“An introduction to computer science and programming. Topics include data types, variables, control structures, arrays, and foundational object-oriented programming concepts.”

Mozilla. (2026). Grammar and types - JavaScript. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

“JavaScript is a dynamically typed language. You use variables to store values, declared with var, let, or const. The latest ECMAScript standard defines eight data types including seven primitive types (Boolean, Null, Undefined, Number, BigInt, String, Symbol) and Object.”

Submit Assignment

Self-Assessment

Rate your work on this assignment, then add a short reflection. All 5 fields are required before you can submit.

Technical Excellence

Rate the technical quality of your work on this assignment — your use of tools, problem-solving, and technical growth.

1 2 3 4 5

1 Explore · 2 Understand · 3 Apply · 4 Analyze/Evaluate · 5 Create/Extend

Communication

Rate how clearly you communicated your work and process — explanations, documentation, and collaboration or help-seeking.

1 2 3 4 5

1 Beginning · 2 Developing · 3 Consistent · 4 Strong · 5 Model

Work Habits

Rate your work habits on this assignment — time management, persistence, responsibility, and follow-through.

1 2 3 4 5

1 Beginning · 2 Developing · 3 Consistent · 4 Strong · 5 Model

AI Orchestration

Rate how effectively you used AI tools to support your work — prompting, verifying, extending, or accelerating your development process.

1 2 3 4 5

1 Explore · 2 Understand · 3 Apply · 4 Analyze/Evaluate · 5 Create/Extend

Reflection

This submits the code from this lesson's code runner(s) below as a Gist for automatic review. Save each runner with its 💾 button before submitting.

Notes (Optional)

Need to update a submission later? Open the submissions dashboard.