#Lesson 1 - Variables
Students will able to create, instantiate, and edit variables in JavaScript.
- JavaScript is a programming language that we can run in our browser.
- Variables are like boxes; they store something.
- Variables have a name and a value.
- We can perform various operations on variables.
- Each variable has a type.
Students will show progress toward reaching the objective based on their performance on the exit ticket quiz.
- JavaScript
- Variable
- Instantiate
- Assign
- Increment / Decrement
- Arithmetic operation
- Type
- Variable Slides
- Homework, Should be printed out before class
- Other Resources: http://www.mathsisfun.com/operation-order-pemdas.html, http://www.w3schools.com/js/js_variables.asp, http://www.w3schools.com/js/js_datatypes.asp, http://www.w3schools.com/js/js_functions.asp, http://www.w3schools.com/js/js_comments.asp
- Volunteer takes attendance. Procedure found here.
- Do a recall activity to remind students about what variables are and how they are used.
Today we will learn about variables in JavaScript. This is important because we can use variables to store things that we can later on look up. It connects to what we've previously learned because we will be able to, eventually, write JavaScript code that interacts with the HTML & CSS that we have written before.
What is a programming language? Can someone give me some examples? Remind me what a browser is.
JavaScript is also a programming language and we can run it in our browser.
What is a box? Why do we put things in a box? Can we take things out of the box once we've put stuff in it?
Use the Google slides (see references above) to introduce the following material: #####Instantiate, Print and Change a Variable
Variables in JavaScript are like boxes in real life. All variables have a name and a value.
var singer = "Justin Bieber";
This is an example of one variable that has a name called singer and a value called "Justin Bieber". We could say it is instantiated to the value "Justin Bieber". Notice the var keyword too; this is how we tell JavaScript we are making a new variable. Also notice the semi-colon at the end of the line; this is how we tell JavaScript we are done with a line of code. Finally, notice the quotes around the word Justin Bieber. These quotes tell JavaScript that this thing is a String.
Suppose we want to print the value of the variable:
console.log(singer);
This line prints "Justin Bieber to the console using the log() function. We'll explore both the console and functions later on in this unit. For now, pass in any variable you create into the console.log() function to print it out..
Suppose our favorite singer is Ariana Grande, not Justin Bieber. We could change the value of the variable:
singer = "Ariana Grande";
console.log(singer);
This code prints out "Ariana Grande" to the console.
#####Arithmetic Operations
Once we've stored something into a variable, we can do things with it. Suppose we have a variable that stored a number:
var age = 10;
Suppose we want to add two years to this age. We could use the + or addition operator:
age = age + 2;
Let's read this right to left. We're taking the number 2 and then adding it to the variable age. We're then setting the result of that addition to the variable age. So if we did:
console.log(age);
We would see 12 get printed out. We can similarly use the - (subtraction), / (division), and * (multiplication) operators.
Suppose we want to double the age to 24. We could
age = age * 2;
OR
age = age + age;
Let's talk about the second suggestion. Again, right to left: take the variable age (which is currently set to 12) and add it to age again (also set to 12). The result of the addition is 24 which then gets stored in the variable age.
So
console.log(age)
now gives us 24.
######Order of Operations
Remember PEMDAS:
- Parenthesis
- Exponent
- Multiplication
- Divison
- Addition
- Subtraction
These are the same order of operations you follow in math class. See link in references for more.
######Increment
It's your birthday today. You were 16 yesterday and now you are 17 today. Let's represent this in JavaScript:
var yesterdayAge = 16;
var todayAge = yesterdayAge + 1;
console.log(todayAge);
This prints out 17 like we expect. But line two took forever to write. Let's shorten it by using the increment operator.
todayAge = yesterdayAge++;
console.log(todayAge);
This first line from above is equivalent to the second line from earlier. We can similarly use the -- or decrement operator to decrease the value of a variable by 1.
######Types
Every variable in JavaScript has a type. So far, we have seen two types: strings (which have quotes around them) and numbers. We can use the typeof function to print the type.
var name = "Justin Bieber";
var age = 22;
console.log(typeof(name));
console.log(typeof(age));
prints out
string
number
Suppose we instead had the following:
var age = "22";
What type is the above variable?
console.log(typeof(age));
prints out string because we put quotes around 22. This tells JavaScript to treat the value as a string.
Write one variable that is named "modeOfTransit" and is set to the string "bicycle." Write another variable that is named "numberOfWheels" and set it to the number 2.
- How do I print out the values of both variables?
- How do I change the value of the modeOfTransit variable to "tricycle"?
- How do I change the value of the numberOfWheels variable to 3?
- How do I multiply the value of the numberOfWheels variable by 2?
- How do I decrease the numberOfWheels variable by 1 without using the subtract operator?
Write one variable that is named "character" and is set to the string "Shrek." Write another variable that is named "heightInFeet" and set it to the number 6.
- Print out the values of both variables.
- Change the value of the character variable to "Fiona".
- Change the value of the heightInFeet variable to 5.
- Divide the value of the heightInFeet variable by 2.
- Increase the character variable by 1 without using the addition operator.
Give exit-ticket quiz.
Link to homework solution (private)
Remind students when homework is due and how it will be collected.
Today you learned about variables in JavaScript and JavaScript itself. This is important because JavaScript is a programming language that we will eventually use to interact with HTML & CSS. Variables are important because they let us store values that we can manipulate later on. Next lesson, we will learn about functions.
- Review student exit tickets.
- Prepare for next lesson / hand off to next volunteer in rotation.