Intro to JavaScript

Learning Goals

• Use variables to store strings and numbers
• Use string interpolation to write sentences using variables

Technical Vocabulary

• Console
• Interpolation
• Number
• String
• Variable
• Assignment Operator
• Data Type

Warm Up

Play Flag Fest with your partner. Choose any region you’d like!

What is JavaScript?

JavaScript is the language of the internet. It is commonly confused with Java, but they are two very different languages. As of now, we can build great looking websites, but they don’t do much. JavaScript is what allows our pages to be dynamic - show your name in the top corner to indicate you are signed in, change information on the screen based on what you type in a form, etc.

If we compare a web app to a human body, we can think of HTML as a skeleton, CSS as clothes and accessories, and JavaScript as the muscle.

Takeaways:

• Some of the behaviors of the site: it starts a game, plays a game, gives the score and feedback on which flag the user correctly selected
• Behaviors all happen after the user has interacted - clicking the button to start a game, make guesses, play again, etc.

Data Types

Throughout camp, you will learn about several different data types in JavaScript. A data type is a specific kind of information or data. Based on the type of data we write in our code, the program will interpret it differently. In this lesson, we will learn about Strings and Numbers.

Strings

A string is a primitive JavaScript data type. You can think of a string as a series of characters (alpha, numeric, spaces, and special characters) between two quotation marks, like so:

'hello, world!'

In JavaScript, strings can be either double-quoted (“like this”) or single-quoted (‘like this’).

In order to experiment with strings, we’ll click on the console button in CodePen:

A console is a place where we can input commands and see the output. Using it is an important part of both learning to code and having a professional workflow.

Takeaways:

• Strings can hold any type of character, including spaces
• The way we type a string will be the exact way a computer sees it (it won’t assume we meant to capitalize that first letter, catch if we misspell something, etc.)

console.log()

Right now, we can see the strings we type in when we hit enter. However, we won’t always be writing our code in the console, so let’s move to a more realistic way of writing our JavaScript.

Keep the console open, but in the JavaScript editor tab on CodePen, type the following:

console.log('hello, world!');

You should see “hello, world!” appear in the console. This isn’t super exciting right now, but let’s build on it.

alert()

Another tool is alert(). There will be times this will feel quicker than console.log() because you don’t have to open your console. Sometimes though, it may not feel as helpful. We reference it in some lessons, so you should be familiar with it.

alert('hello, world!');

You should see “hello, world!” appear in a box that pops up over your browser. You can’t continue working into your browser until you click the “ok” on the alert box.

Variables

In most programming languages, including JavaScript, values can be saved to variables. Unlike in math class, where we would use x or y and a number, variables in programming are much more flexible. Below are three variables used in the Flag Fest game:

var region = "Africa";
var activeAmount = "ten";
var flag = "Senegal";

To define a variable, we use the var keyword, followed by an arbitrary name we choose for the variable. Notice that all of the variables start with a lowercase letter. If you are selecting a variable name that has two words, make the first letter of the second word uppercase. This pattern is called camelCase.

After naming the variable, we use the = sign to show what value the variable will hold. In programming, we refer to the = as the assignment operator rather than the equals sign. It’s still frequently called the equals sign, though, so you’ll hear it, and people will know what you are referring to if you use that terminology.

We can now print any of these variables we have defined out to the console. The example below defines three variables, but only one will be logged to the console.

var region = "Africa";
var activeAmount = "ten";
var flag = "Senegal";

console.log(region);
//=> "Africa"

Re-assigning Variables

Sometimes, things in life change! We might change our names, move cities, our ages will almost definitely change, etc. In Flag Fest, the user can change the region that the game displays during a round. When they do that, the program may need to re-assign the region variable to a different string.

JavaScript gives us the ability to re-assign a variable so that its value can change. Here is the syntax:

// The line below declares the variable region and assigns it to "Africa"
var region = "Africa";
console.log(region);
//=> "Africa"


// The line below re-assigns the variable region to "Americas"
region = "Americas";
console.log(region);
//=> "Americas"

Notice that when we re-assign a variable, we do not use the keyword var.

Interpolation

We can also include variable data in a sentence. This is called interpolation:

var region = "Africa";
var activeAmount = "ten";
var flag = "Senegal";

console.log(`The first flag from ${region} is ${flag}.`);
//=> The first flag from Africa is Senegal.

Make sure to use the back-ticks when you are using string interpolation (image below); it will not work with regular single or double-quotes.

Numbers

Numbers are another primitive JavaScript data type. Like we saw with strings above, we can also store numbers in variables.

var points = 0;
var maximumPoints = 10;

We can also re-assign variables that store numbers. In Flag Fest, this is how the program keeps track of how many times the user answered correctly.

var points = 0;
console.log(points);
//=> 0

// The line below re-assigns points to its previous value (0) plus 1.
points = points + 1;
console.log(points);
//=> 1

// The line below re-assigns points to its previous value (1) plus 1.
// It is a shortcut that does the exact thing as the example above!
points += 1;
console.log(points);
//=> 2

Takeaways:

• On a users birthday, an app should increment their age
• Social media apps use incrementing to keep track of the number of likes, replies, followers, etc.
• Apps that involve scheduling - calendar events, flights, live video classes, etc. usually have a countdown timer to keep the user informed on the amount of time until something will happen

Again, as we did with strings, we can interpolate with variables that hold numbers.

var region = "Africa";
var points = 7;

console.log(`Your score for ${region} is ${points}/10.`);
//=> "Your score for Africa is 7/10."

We can do math with numbers in JavaScript! The same math operators you’re used to from math-class work here.

3 + 5
//=> 8

12 / 2
//=> 6

18 - 8
//=> 10

We can also use parenthesis, and the Order of Operation rule applies here as well.

(3 + 2) * 8
// 5 * 8
//=> 40

We can also use math on variables if those variables hold numbers.

var name = "Karlie";
var tinsOfKookies = 1200;
var mealsDonatedPerTin = 10;

var mealsDonated = tinsOfKookies * mealsDonatedPerTin;

console.log(mealsDonated);
//=> 12,000

console.log(`Because ${tinsOfKookies} tins of kookies were purchased during Fashion's Night Out, ${mealsDonated} meals were donated to starving children all over the world. Thanks, ${name}!`);
//=> "Because 1200 tins of kookies were purchased during Fashion's Night Out, 12,000 meals were donated to starving children all over the world. Thanks, Karlie!"

You’ve now seen and used the foundations of JavaScript and all programming languages. Complete the exercises below to get a little more practice.