Intro to JavaScript

Values, Data Types, Variables

JavaScript: Where did this thing come from?

Netscape in the 90s

The Browser Wars

jQuery

Node.js

JavaScript: It's Everywhere

REPL: Read, Evaluate, Print, Loop

$ node
>

Type node in your console, get a REPL

Type This

This is the REPL

Let's type some things in

$ node
> 5
5
> "Hello World"
'Hello World'

Type this

Get this

Type this

Get this

What's happening here?

Read

The REPL "Reads" what you typed in

Evaluate

It tries to evaluate it, turning it into a single value

> 5
> 5 + 5

10

What's happening here?

Print

The REPL "Prints" what it Evaluated

Loop

The whole thing starts over

> 5 + 5
10

Let's try it

> 5 + 5

> 5 * 6 + 10 * 7

> 44 / 4 * 11

> 55 * 5 * 5 * 5 * 5

> 55 % 10

Type these in

Let's talk about Data Types

Numbers

Strings

Booleans

Null

Undefined

1
5
3.14
5.26
1000000
"Hello World"

"Good to meet you"

"These are Strings"

"a"

"123"
true
false
null
undefined

Let's talk about Operators

Binary Operators (have two operands)

+ - / * %

Takes two numbers, makes another number

+

Takes two strings, puts them together

Takes two values, returns a boolean

> < == === != !==

Let's talk about Operators

Operator What it does
+ Adds two numbers, concatenates strings
- Subtracts two numbers
/ Divides two numbers
* Multiplies two numbers
% Divides two numbers, returns the remainder

Let's talk about Operators

Operator What it does
< Tests to see if one number is less than another
> Tests to see if one number is greater than another
== Tests to see if two values are the same
=== Tests to see if two values are the same, and the same type
!=, !== Tests to see if two values are not the same
&& Checks to see if two values are both true
|| Checks to see if at least one value is true

Let's try it!

> true && true

> true && false

> false && true

> true || false

> false || true

> 5 > 10

> 10 < 15

> 5 == 5

> "5" == 5

> "5" === 5

> 5 == "5" && "5" === 5

Variables

Think of it like a box with a label

x

var x

"var" creates a box, then you give it a label

Variables - The Assignment Operator

x

var x = 5

5

When we use the assignment operator, we put something in the box

Variables - The Assignment Operator

x

var x = 5

x = 10

10

We can always reuse the box, but we lose the original value

5

Variables point to values

var x = 10

var m = 2

var b = 3

var y = m * x + b



var text = "Anyone remember algebra?"
Name Value
x 10
m 2
b 3
y 23
text Anyone remember algebra?

Creating dynamic programs

Control Flow

If Statements

if ( true ) {
    console.log("I'm always going to run")
}

if ( false ) {
    console.log("I'm never going to run")
}

if ( 5 == 5 ) {
    console.log("I'm always going to run")
}

var x = 15;
var y = 5;

if ( x < y ) {
    console.log("I'm never going to run")
}

If / Else Statements

if ( false ) { 
    console.log("This won't run")
} else {
    console.log("This will run")
}

var x = 5
var z = x + 5

if (z > x) {
    x = z + x
} else {
    z = z + z
}

What's the value of x and z?

If / If Else / Else Statements

var x = 5

if ( x == 10 ) { 
    console.log("This won't run")
} else if ( x == 5 ) {
    console.log("This will run")
} else {
    console.log("This won't have run")
    console.log("but it would have")
    console.log("if the second conditional")
    console.log("had some up false")
}