JavaScript Foundations

An introduction to the basics.

Alec Ortega

Front End Engineer

HubSpot

alecortega

Follow along at:

slides.com/alecortega/javscript-foundations/live

Takeaways:

What is JavaScript?

Variables and operators

Conditional Logic

Looping

Before we begin...

If you don't understand something it's my fault, not yours.

If you need me to break something down or explain in different terms just let me know!

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?

It starts with the number two

It then sees a symbol, in JavaScript we call these special symbols operators. I.e. +, -, =, !, *, /

It then takes the operator and uses the value to right of it and applies it to the value on the left of it.

It wraps things up with a semicolon. You can think of these as you would periods in English.

This entire line is called a statement. And all JavaScript is, is a series of statements.

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

What are data types?

We're going to cover three of them today.

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
2 * 2;
2 * 3;
2 * 4;

If we ran this code, we wouldn't actually see it do anything. It is performing the calculations but we need to do something special in order to see what's happening here.

2 * 2;
2 * 3;

console.log(2 * 4);
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.

Coercion

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.

Bob

Ferrari

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

Bob

Honda

Ferrari

This is how to think about variables in JavaScript.

Bob

Ferrari

Variable

Value

Variables refer to a value, but that reference can change at any time. The variable itself doesn't change, only it's reference.

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.

2) We assign a reference to the String 'Ferrari'.

3) We re-assign a reference to the String 'Honda'.

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?

var favoriteCar = 'Ferrari';

console.log(favoriteCar);

=> 'Ferrari'

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

Bob

Variable

Value

?

var favoriteCar;

console.log(favoriteCar);

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

var favoriteCar;

console.log(favoriteCar);

=> undefined

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.

var currentFloor = 20;

console.log(1 + currentFloor);

What will this log?

var currentFloor = 20;

console.log(1 + 'currentFloor');

What about this?

var currentFloor = 20;

console.log(1 + 'currentFloor');

=> '1currentFloor';

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?

dataOne

dataTwo

{}

{}

dataThree

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.

Is it night?

console.log('good night!');

console.log('good morning!');

True

False

Conditional Statement

We can't stop the path but we can "control" where the path "flows" based on conditional statements.

// If it is night

// log "good night!"

// else

// log "good morning!"

Try writing this in English first.

// If it is night

// log "good night!"

// else
// If it is night

// log "good night!"
// If it is night
var isNight = true;

// If it is night
if (isNight) {

  // log "good night!"
  console.log('good night!');
}

// else
else {

}

Now let's translate into code.

var isNight = true;

// If it is night
if (isNight) {

  // log "good night!"
  console.log('good night!');
}

// else
else {

  // log "good morning!"
  console.log('good morning!');
}

var isNight = true;

// If it is night
if (isNight) {

  // log "good night!"
  console.log('good night!');
}

var isNight = true;

// If it is night
if (isNight) {

}

var isNight = true;

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

Starts the conditional statement with "if".

It will check whatever is between the parenthesis for something that evaluates to a true or false value.

The brackets tell the interpreter "this is the block of code that I want you to use for the previous statement". Imagine "{" means start and "}" means stop.

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?

Is this statement true?

What about this one?

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);
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
...

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.

Is a condition true?

Run a block of code until false

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);
}

Declare the while loop

Conditional statement

Declare our iterator variable

var currentNumber = 0;
var currentNumber = 0;

while (currentNumber < 5) {
}
var currentNumber = 0;

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

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

  currentNumber = currentNumber + 1;
}
=> 0
=> 0
=> 0
=> 0
...

=> 0
=> 1
=> 2
=> 3
=> 4

What will this log?

What about this?

For Loop

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

Declare the for loop

Declare the iterator variable

Conditional statement

How to break out of the loop

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!

What we learned:

What is JavaScript?

Variables and operators

Conditional Logic

Looping

Homework:

Eloquent JavaScript

Chapters 1 and 2

www.eloquentjavascript.net

You can review this slide deck at:

slides.com/alecortega/javascript-foundations

Thanks!

Made with Slides.com