Computer Science & Software Engineering

Course Progress 0/0
Week 5 Variables

Variables

4 min read

What are variables?

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

Meaning: let → When creating a new variable you use let

lunchbox → the name of the variable

“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

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 adds by 3. (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 adds by 3. (Look at the reading above for help)

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

console.log(Points)
console.log(Birthday)
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:

let pencils = 12; Number → how many(quantitative)

let teacherName = "Mr. Lee";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

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 = "Ava"; let grade = 7; let hasPencil = true;

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

Arrays:

Instead of storing every item separately: let snack1 = "chips"; let snack2 = "apple"; let snack3 = "cookie";

You can group it into one array: let snacks = ["chips", "apple", "cookie"];

Code Runner Challenge

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

View IPYNB Source 
%%js

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

console.log(FavoriteThings)
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

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.

%%html

<!-- UI_RUNNER:  DOM change -->

<!--
Update the player and AI scores when the buttons are clicked.
-->

<button onclick="playerScores()">Player Clicker: <span id="playerScore">0</span></button>
<button onclick="aiScores()">AI Clicker: <span id="aiScore">0</span></button>

<script>

function playerScores() {
    let playerPoints = parseInt(document.getElementById("playerScore").textContent);
    playerPoints += 1;
    document.getElementById("playerScore").textContent = playerPoints;
}

function aiScores() {
    let aiPoints = parseInt(document.getElementById("aiScore").textContent);
    aiPoints += 1;
    document.getElementById("aiScore").textContent = aiPoints;
}
</script>

  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

HOMEWORK

Code Runner Challenge

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

View IPYNB Source 
%%js

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

console.log(student);
console.log(scores);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...
%%html

<!-- UI_RUNNER:  Extra credit - Make a Cookie Clicker -->

Course Timeline