What can variables do for ME?

Variables allow you to track specific traits and values as you manipulate your website. They link all your functions, event handlers, you name it together. In order to begin to track a specific value, you declare a variable with a statement.

 var site ='active';

It's like a truck that carries a value

Think of your entire JavaScript file as a construction site. The variables are trucks that carry values to the appropriate place around the site at any given point. The =, or assignment operator, can change this value.

The = sign is a ramp that loads a value up so the variable can carry it around

Hover over the statement to the right to see how = works.

Other Key Concepts Present

There are two key concepts in this statement. One is the semi-colon at the end, which means that the statement has ended. You need to include this every time you declare a new variable. Also, notice the word active in quotes. This is called a string. That means that it is a word, and not a number or a boolean or other.

 var site ='active';

The semi-colon is a stake

Stakes signify boundaries. They show when a statement has ended. Anything to the right of the stake might as well not even be in your script. It also prevents one line from mixing with the following line when the code is interpreted by the browser.

Hover over the statement to the right to see how ; works.

Your Turn!

You are the director of this construction site. Time to name a foreman.

Create a variable named foreman with a value your choice. The value needs to be a string.

After typing an answer, hover over the statement to the right if you would like a reminder how the pieces work!

Multiple Types of Values

A string is just one type of value that a variable can hold. Here are a few others:

• Number: Something you can use for math!
• Boolean: 'True' or 'false', like flipping a swtich
• Null: Empty value, to be added at a later point
• Object: Store more complex data, rather than one line at a time

 var employees = 20;

Your turn!

Create a variable named days and set it to 100 to show how long you have been on the job.

After you start typing, hover over the statement to the right if you would like a reminder how the pieces work!

Multiple Types of Values

A string is just one type of value that a variable can hold. Here are a few others:

• Number: Something you can use for math!
• Boolean: True' or false, like flipping a swtich
• Null: Empty value, to be added at a later point
• Object: Store more complex data, rather than one line at a time

 var dealWon = false;

This is called a boolean. There are two options: true or false. You can use it to flip a switch in your code. So if you want to indicate if something is active or inactive, use this.

Your turn!

Create a variable names siteActive and set it to false to show that nobody is onsite.

After you start typing, hover over the statement to the right if you would like a reminder how the pieces work!

Multiple Types of Values

A string is just one type of value that a variable can hold. Here are a few others:

• Number: Something you can use for math!
• Boolean: True' or false, like flipping a swtich
• Null: Empty value, to be added at a later point
• Object: Store more complex data, rather than one line at a time

 employeeCount = 20; 

You can also change the value of a variable. Check out the syntax above. Notice how we do not declare "var" again? That means we are modifying the value of a previously created variable.

Your turn!

1. Create a variable contractors and set it to 5.
2. You then choose to hire 5 more contractors
3. So change the value of the variable to 10 in line 2.

After you start typing, hover over the statement to the right if you would like a reminder how the pieces work!

An Alternative Kind of Equals Sign

Alright, since the = sign is the assignment operator, we definitely cannot use that to compare two values.

To check if two values are identical, we will use ===, or the operator for strict equality.

var checkins = 20;
var checkouts = 20;
checkins === checkouts;

This would result in true, because 20 is exactly equal to 20. Notice how this is different from a normal equals sign. You are not assigning any values. You are just checking if two numbers are equal.

Your turn!

Check if the two values are exactly equal using strict equality .

var workers = 20;
var hardHats = 19;

An Alternative Kind of Equals Sign

Since 20 does not equal 19, the last statement would return false.

We can do the same thing with strings. Pretty straightforward- if the strings match exactly, it is true!

 var foreman1 = 'Ted';
var foreman2 = 'Ed';
foreman1 === foreman2;

This would result in false, because the strings are not the exact same

Your turn!

Create a statmement that compares roofType with a word that is identical to its value.

var roofType = 'shingles';

An Alternative Kind of Equals Sign

Remember the difference between declaring a variable and setting its value at a later point.

Your turn!

Check out the statement below. Complete the last line to make a true statement that compares the value of nailCount.

var nailCount= 500;
nailCount = nailCount + 200;

If Statement Fundamentals

Since we just learned how to compare variables and values, we now need to learn how to write code that depends upon a comparison statement, or condition .

If statements allow us to run a specific set of instructions based on the result of a comparison statement.

 if(contract === 'signed')

The if statement sets up caution cones

We can only enter the if statement if we have passed the condition in between the parentheses

This makes our comparison statement actionable! With an if statement, we have to figure out if the condition is true before we can proceed.

Check out the statement to the right. Hover over the ( or ) and see how it works.

If Statement Fundamentals

Think of the if statement and two parentheses as cautionary cones. You can only enter the following statements if the condition between the cones is true.

Write an if statement that looks at a variable siteActive and evaulates whether it is false or not.

After you start typing, check out the right section to see if you are on the right track.

Bringing in the Body

Okay, now we need to outline the code that will run based on whether we can enter the traffic cones. We can do this with brackets {}.

This is very important!

if(siteActive === false){
    var gate = 'closed';
}

The {} are like a safety fence

If the cones tell use that we need to pause to see if we are allowed in, the brackets {} tell us what happens next!

These statements will only run if the if condition evaluates to true. In this case, if the site is not active, the gates will be closed.

Check out the statement to the right. Hover over the brackets {} or parentheses () and see how it works.

Change a Value

Let's change our code based on an if statement! We are going to declare a value, then change it based on the result of an if statement.

1. The variable siteStatus has been initiated with a value of 'open'.
2. Write an if statement that checks if the variable weather is set to 'rainy'
3. If it is, change the value of siteStatus to 'closed'

 var siteStatus = 'open';
var weather = 'rainy';

    
}

After you start typing, check out the right section to see if you are on the right track.

Else Statements

Let's add in an else statement. It's pretty simple- if the if statement evaluates to false, the else code will run!

1. The variable bathrooms has been initiated with a value of 1.
2. Write an if statement that checks if the variable children is set to 2
3. If the value is not 2, change the value of bathrooms to 2

 var bathrooms = 1;

    bathrooms = 3;
}
else {
    
}

After you start typing, check out the right section to see if you are on the right track.

Members show grouping

Imagine you are directing your construction site, and you need someone to dig a ditch to put in some plumbing. You see some guy sitting idly, and you yell at him to get on it. Unfortunately for you, that guy was an electrician. And now he is going to cost you thousands of dollars with his mistakes.

The member operator clearly defines what elements are members of which groups, and what those elements are capable of. So if you ordered an electrician to dig a hole, your code can yell at you and tell you that it is not possible.

 crane.pickup();

The . indicates an order is being given

The ., or the member operator quickly shows the relationship between these two. Crane, on the left, is an object, which has specific parts and capabilities. On the right, pickup(), is the method() , which is a specific capability of the crane

The . is like you giving orders to a specific object

Check out the statement to the right. Hover over the . and see how it works.

Members show grouping

These are NOT members like members of a club. A better way to describe: what are the capabilities of the group and its members? Let's look at the architecture team for this site. This is how the team is organized, and how you might call people or methods up to do certain things.

 architectureTeam.technicalWriter

Check out the hierarchy to the right. Hover over each element to see relationships.

Multiple Members

Check out the following statement with multiple members.

 crane.claw.pickup();

1. We start with the crane object
2. We give the order to focus on the claw, specifically. Nothing has happened yet.
3. We order the pickup() method. In this new arrangement of the crane object, only the claw is capable of the pickup() method

Check out the hierarchy to the right. Hover over each element to see relationships.

Multiple Members

Write your multi member statement. Pick something related to the crane, and a specific action only that person or element could complete.

Parameters give Direction to Functions

Check out the following statement with one parameter.

 crane.pickup('wood');

1. We tell the crane to complete the pickup method
2. It must pickup wood, specifically.

 document.getElementById('wood')

Now this is some real JavaScript! It looks at the document object, and gives it an instruction that only it can understand. In this case, it grabs an element by ID 'wood', which is ready to be acted on.

Check out the statement to the right. Hover over the parameter to see relationships.

Grab some Parameters

Write your own crane method with parameters. You want your crane to accelerate() by 5 miles per hour. Remember to use a number, not a string

Track Values Throughout Your Functions

Two new things we are going to cover: The meaning of brackets {}, and how to actually call the function.

var bricks= 8;
function addBrick(count){
    return count + 1;
}
addBrick(bricks);
                    

The brackets are kind of like the safety fence that you see on construction sites- they show you an active area where there is ongoing activity. This is where the action takes place.

How To Call A Function

The function is only being defined in lines 2-4. That prepares the sequence of actions for use later in your script. On line 5, we actually call the addBrick() function.

1. The bricks truck delivers a value of 8 to line 5
2. The addBrick crane brings the value up to line 2 to be used in the function. It drops it on the count parameter.
3. The count parameter brings the value of 8 to line 3 to be used in the function

See that sequence by hovering over the lines on the right

Track Values Throughout Your Functions

Time for a test! The situation has changed.

1. Now, you start with a stack of 20 bricks.
2. And you need to rewrite your function so that it doubles the original amount of bricks. You will need to use the multiply operator.

function addBrick(count){
    
}
addBrick(bricks);
                    

To get it right, consider the following:

• Which line determines the starting brick amount?
• Which line determines how we modify the original amount?

See it live on the right

Track Values Throughout Your Functions

Okay, so we have done a bunch of math in the past two steps, but we forgot one thing! We need to save the output of the function somewhere!

var bricks= 20;
function addBrick(count){
    return count * 2;
}
var finalBrickCount = addBrick(bricks);
                    

When you call addBrick() at line 5, it simply removes the value from the bricks truck (20, in this case)

1. The value of 20 becomes the parameter in line 2, then...
2. 20 is fed into the 'return' statement on line 3.
3. But it needs somewhere to go from there!

We need to look at line 5 again. Our finalBrickCount truck can now load up the result of calling the addBrick() function.

See that sequence by hovering over the lines on the right

Write Your Own Function

Check out the code below.

1. You need to write a function, pourConcrete(), that takes a parameter walkway...
2. ... and triples the amount of concrete that is poured in. You will need to use the multiply operator.

 var concrete= 10;

    
}
pourConcrete(concrete)
                    

See it live on the right