What are variables?

A variable is like a container where you store stuff. Think of it like your backpack: let lunch box = "sandwich";

Meaning: let → When creating a new varible you use let lunch → the label/name of the varible “sandwich” → the value or info that is stored in the variable

Why are variables helpful?

Instead of repeating the same thing again and again, you store it once and reuse it.

1. let vs const

When you create variables, you use let or const. Let is used when the value can change Examples: * your points in a video game * your age * the number of clicks let points = 0; points = points + 1; Const is used when the value should NOT change.

Examples:

your student ID * your birthday * your permanent username

const studentID = "S12345"; const birthday = "2012-08-19"; const username = "Daniel_the_Miner"; Now you go ahead and try!

Code Runner Challenge

Create 2 variables, one of your birthday and one of a point system that increases by 1. (Look at the reading above for help)

View IPYNB Source 
%%js

// CODE_RUNNER: Create 2 variables, one of your birthday and one of a point system that increases by 1. (Look at the reading above for help)

let // Put a variable here
const // Put another variable here

console.log(Points)
console.log(Birthday)

// This part is kinda confusing, can you change it?
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Data Types

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

Number → how many(quantitative)

let pencils = 12; String → text (You only need double quotes when writing strings)

let teacherName = "Mr. Lee"; Boolean → true / false\

let isPresent = true; Undefined → declared but not filled yet

let homework; Null → intentionally empty

let deskItem = null; Reference Data Types (Bigger containers) Sometimes you need to store multiple things together.

Object → a bundle of related info

Array → a list

Objects: Instead of storing everything separately: let name = "Ava"; let grade = 7; let hasPencil = true;

You can group it into one object: const student = { name: "Ava", grade: 7, hasPencil: true }; Arrays: let snacks = ["chips", "apple", "cookie"];

// CODE_RUNNER: Make an an object of your favorite food, color and movie.


// Insert code here


console.log(FavoriteThings)

HTML DOM(Document Object Model)

Now, to go to HTML DOM. Imagine HTML DOM like this: It’s essentially the HTML code, but with changes applied to it. Here’s a better way to visualize that: You are playing the Pong Game on the pages.opencodingsociety.com website, and you are playing against an AI paddle. Now, imagine a score tracker on the top that counts the points that each side has. Javascript would change the HTML DOM in this scenario by changing the amount of points each side has.

So how does HTML DOM connect to variables?

It’s very simple actually. Taking something like the ping pong game, Javascript would store data like a variable for player score and then the DOM would just take the value of that variable and then output it to the rendered site.