JavaScript Foundations

An introduction to the basics.

Alec Ortega

Front End Engineer

HubSpot

alecortega

Follow along at:

slides.com/alecortega/javscript-foundations/live

Before we begin...

What is JavaScript?

HTML

Creates the structure of your page.

CSS

Decorates that structure with styling and gives it the appearance you want.

JavaScript

Makes everything interactive, gives you the ability to change your page after it has already loaded.

It allows us to change the page based on user interaction and turn static web pages into rich and dynamic applications.

JavaScript is the language of interactivity.

Let's get started.

Data types and operators.

Programming is just a series of instructions that you write that tells the computer what you want it to do.

JavaScript in particular can be run in multiple environments, like on a server, but it is most often run in a web browser.

What's an example of something that we can write in JavaScript?

2 * 2;

2 * 2;

Let's break this down.

How does the computer read this?

We just used the number two in our program. 2 is an Number which is called a data type.

What are data types?

Number

2;

3.14159;

0.005;

We can create an number just by writing out the number we want. Numbers can include decimals as well.

String

"hello world";

'I have 0 dogs, but I want 50.';

"123";

String is what we call words in JavaScript. We can declare strings by wrapping our words in single or double quotes. 

Boolean

true;

false;

Boolean can only have two values, true or false. This will come into play once we start talking about data flow.

2 * 2;

main.js

console.log(2 * 4);

I'll explain the syntax here a little later. But for right now just know that whatever you put between the parenthesis will show up in your console when your code is run.

main.js

Workshop One

CLICK HERE

Step 1:

Log the word hello to the console.

Step 2:

Do the above and log the summation of 1 and 5.

Step 3:

Do the above and log the summation of 1 and the word hello.

Step 4:

Do the above and log the summation of 1 and true.

1 + true;

=> 2;

Unlike other languages, JavaScript doesn't yell at you when you try to do something like this. Instead it tries to be smart and tries to convert one value into another in order for the result to make some sort of sense.

console.log('hello');
console.log(1 + 5);
console.log('hello' + 5);
console.log(1 + true);

You may have noticed that these ran in the order that they written.

JavaScript is single-threaded, meaning it follows a single path at any given point in time.

console.log('hello')

console.log(1+5)

console.log('hello' + 5)

console.log(1+  true)

Check-in

Questions?

Variables

Right now JavaScript looks like a glorified calculator so let's take it to the next level.

How does a JavaScript program remember calculations it has already performed or store values?

First let's go over how to think about how JavaScript stores things.

Imagine at age 18 Bob Peterson's favorite car is a Ferrari. He is determined to buy one in 2 years.

As Bob enters into adulthood he realizes that life doesn't work like that, and changes his favorite car to something more realistic.

This is how to think about variables in JavaScript.

var favoriteCar;

We can create a variable using the "var" keyword.

The name given to the variable follows the keyword and it should be descriptive of the value that it references.

var favoriteCar;

favoriteCar = 'Ferrari';

We assign a reference to a value for the variable using the "=" operator.

var favoriteCar;

favoriteCar = 'Ferrari';

favoriteCar = 'Honda';

We can re-assign the reference at anytime after we declare it.

var favoriteCar;




favoriteCar = 'Ferrari';




favoriteCar = 'Honda';

1) We create a variable named favoriteCar.

var favoriteCar = 'Ferrari';

We can create a variable and assign a reference all in one line.

var favoriteCar = 'Ferrari';

console.log(favoriteCar);

If you try and log this variable to the console what will show?

Let's say Bob actually couldn't care less about cars and therefore doesn't have a favorite car.

Variable

Value

?

var favoriteCar;

console.log(favoriteCar);

If you try and log this variable to the console what will it show?

When you ask for what a variable references, when you haven't assigned it one, it will say that the value it refers to is "undefined"

We can assign a reference for a variable to any data type.

var colorOfSky = 'blue';

var currentFloor = 20;

var someCoolOperation = 5 * 10 / 2 - 15;

var areCrocsTrendy = false;

When you use a variable, you can think of it as a placeholder for the value it references.

What will this log?

What about this?

Before we go into the next step I want to show you hands-on what referencing actually means in JavaScript.

But first we're going to have to learn some new operators.

Comparison Operators

1 === 1


1 !== 2


3 > 1


4 <= 10

Equal to

Not equal to

Greater than

Less than or equal to

Using a comparison operator will result in either true or false.

We can even combine them

1 !== 2 && 1 === 1


3 > 5 || 1 < 2

AND

OR

This will also result in a single boolean value.

var areCrocsTrendy = false;

console.log(areCrocsTrendy === true);

What will this log?

Workshop Two

CLICK HERE

Step 1:

Log "dataOne" to the console.

Step 2:

Log "dataTwo" to the console.

Step 3:

Log if "dataOne" and "dataTwo" are equal to each other.

Step 4:

Create a variable named "dataThree". Set it equal to "dataOne". Log if "dataOne" is equal to "dataThree".

Why is this happening?

Check-in

Questions?

Control Flow

Control flow is the order in which JavaScript executes the statements we give it.

Our program will run from the top of the file to the bottom unless we tell it to do something else.

Example:

Imagine if we have a program that will log "good night" or "good morning!" based on the time of day. How do we make it do one or the other?

Our program will always follow one path.

Try writing this in English first.

// If it is night

Now let's translate into code.

var isNight = true;

// If it is night
if (isNight) {

}

var isNight = true;

if (isNight) {
  console.log('good night!');
}
else {
  console.log('good morning!');
}

var isNight = false;
var isMorning = true;


if (isNight) {
  console.log('good night!');
}
else if (isMorning) {
  console.log('good morning!');
}
else {
  console.log('good day!');
}

You can use "else if" to keep conditionally values until one of them is true. If none of them are true it will always default to an "else" statement if it exists.

var isNight = false;
var isMorning = true;


if (isNight) {
  console.log('good night!');
}
else if (isMorning) {
  console.log('good morning!');
}
else {
  console.log('good day!');
}

What will this log?

var isNight = false;
var isMorning = false;


if (isNight) {
  console.log('good night!');
}
else if (isMorning) {
  console.log('good morning!');
}

What about this?

Check-in

Questions?

Loops

What if I asked you to write a program that logged the numbers 1 through 100 to the console. How would you write that program using only what we've learned?

console.log(1);

We can use loops to run a block of code until a condition evaluates to true. You can think of it like an "if" statement on repeat.

There are many types of loops in JavaScript. They're all a little bit different but have the exact same underlying concept. They all repeat code a block until a conditional statement is true.

While Loop

var currentNumber = 0;

while (currentNumber < 5) {
  console.log(currentNumber);
}

var currentNumber = 0;

For Loop

for (var i; i < 10; i++) {
  console.log(i);
}

Workshop Three

CLICK HERE

Step 1:

Crate a loop that logs every number from 0 to 100 

Step 2:

Modify that loop so that it logs every even number from 0 to 100.

Step 3:

Modify that loop so that logs "Almost there!" after it logs "90".

Check-in

Questions?

Google:

What are truthy and falsey values? Can you give examples of some?

What is "null" and how is it different than undefined?

We did it!

Homework:

Eloquent JavaScript

Chapters 1 and 2

www.eloquentjavascript.net

You can review this slide deck at:

slides.com/alecortega/javascript-foundations

Thanks!