Week 2: Values, Types & Operators

Javascript Demo: Lesson 1

Opening the Console:

• Windows: Ctrl-Shift-J
• Mac: Cmd-Option-J
• Check error with console

Animated Circles overview

• Circles Script - examine code step by step
• Circles Script - Letters

Values, Types and Operators

• Built-ins / native functions: alert, console.log, document.write, confirm
• Variables & input: declaring and reassigning with let and const ; getting input with prompt.
• Strings: concatenation vs. template literals (backticks `like this`).
• Core data types: Number, Boolean, String, Arrays (quick console checks).
• Basic math: + - * / and using a temporary variable.
• Shortcut operators: ++, --, +=, -=, *=, /=, %.
• Conditionals: if / else, else if, and nesting.
• Comparison operators & equality pitfalls: =, ==, ===, !=, !==, >=, <=.
• Modulus %: odd/even checks (e.g., alternating turns).

In-Class Challenges

Below are JS mini-challenges. In a new HTML document, use variables, data types (numbers, strings and booleans), operators, conditionals and arrays to complete them.

Student Pairings Shuffle

Challenge 1: Personal Greeting

• Ask the viewer for their name using prompt().
• Display a greeting on the page that includes their name using document.write().

Challenge 2: Age Calculator

• Ask the viewer for their age using prompt().
• Convert the string input to a number using parseInt(), then calculate how old they will be in 10 years.
• Display a message on the page using document.write() that includes:
  • Their current age
  • Their age in 10 years

Note: parseInt() turns a string containing a number into an integer that JavaScript can use for math.

let number = "8";
let integer = parseInt(number);

Challenge 3: Yes / No Decision

• Ask the viewer a yes/no question using confirm().
• Use an if / else statement to display a different message on the page depending on their answer.

Challenge 4: Favorite Movies List — Arrays

• Create an array containing three of your favorite movies as strings.
• Display:
  • How many items are in the array
  • The first item in the array
  • The last item in the array

Hint: To access the last item, use array.length - 1.

Rock Paper Scissors Game Steps

1. Ask the user to enter either "rock", "paper", or "scissors". Saved as prompt variable
2. Create a list (array) of possible choices: "rock", "paper", "scissors".
3. Have the computer randomly pick one option from that list.
4. Save the computer’s choice in another variable.
5. Print (or log) both the user’s choice and the computer’s choice so they are visible.
6. Compare the two choices:
   • If both choices are the same, declare a Tie.
   • If the user chooses "rock" and the computer chooses "scissors", the user wins.
   • If the user chooses "paper" and the computer chooses "rock", the user wins.
   • If the user chooses "scissors" and the computer chooses "paper", the user wins.
   • In all other cases, the computer wins.
7. Print the outcome: "User wins", "Computer wins", or "Tie".