Back to Setup Page

JavaScript Fundamentals

Before we start writing JavaScript code to make this Number Guesser game work, we’re going to touch on some fundamentals that will prepare us for that work.

During this section, the code we write and learn about will not yet be connected to our game. It’s just for learnings sake!

Comments in Code

Throughout this resource and accompanying CodePens we will use today, you will see what we call comments in code. It is text in a code file that is usually “greyed out” - it’s readable by humans but not by the computer or browser. In JavaScript, each comment must have a // at the beginning of it:

//this is considered a comment
this is not!

Variables

We can use variables to store and reference information within a JavaScript program. We can think about it as a storage bin in the garage - the contents inside of the bin are what we care about storing, and the label on the outside is how we can quickly identify it.

The syntax for declaring variables and assigning a value to them is as follows:

var age = 23;
// alert(age);

var sum = 3 + 4;
// alert(sum);

JavaScript can store other type of data, but since we are building a Number Guesser game today, we will focus on Numbers!

Variables and Calculations

Using the two new pieces of knowledge we’ve acquired, we can combine them to do work like this:

var washCycleMinutes = 38;
var dryCycleMinutes = 45;

var totalLaundryTime = washCycleMinutes + dryCycleMinutes;

alert(totalLaundryTime); // alert message will be: 83

Visualize The Connections

Diagram of variables being referenced, and the numbers they store marked by each.

Try It

In a new CodePen, declare two variables (name of your choice) and store a value in each one! Declare a third variable that uses both previous variables and a math operation.

Then use the alert method to ensure all values are being stored as expected.

Comparisons

JavaScript can also do comparisons! Today, we will focus on comparing numbers.

Explore to Learn

One at a time, copy and paste or type in each line of code below into your CodePen - make sure this is in the JS pane. Predict what the output will be, then observe the alert message.

  • alert(3 < 5)
  • alert(3 > 5)
  • alert(3 >= 3)
  • alert(3 === 5)
  • alert(5 === 5)
  • alert(5 !== 5)

Exploration Takeaways

  • JavaScript can compare two numbers to determine if one is less than, greater than, equal to, or not equal to the other
  • JavaScript evaluates a comparison, then provides us with a Boolean - either true or false - as a response

Conditionals:

An if statement sets up different paths that the program can take depending on what is true at a given moment.

Explore: Reading if Statements

  1. Look at the code in the CodePen below. Jot down your prediction of what will happen when we run this code (once line 5 is uncommented).
  2. Once you've made your prediction, uncomment line 5 and read the alert. Change the value of the age variable to test out other situations!

Try It: Writing if Statements

Follow the prompt in at the bottom of the JS pane in this CodePen. (Same CodePen that was used in previous activity)

Note: You will probably want to comment out the previous example

JavaScript Fundamentals Summary

  • JavaScript can store numbers in variables, then do math operations with those variables
  • JavaScript can follow certain directions based on conditions we provide

Next Section: Connecting HTML & JavaScript