A specific introduction to JavaScript

For the Trial By Fire Tutorial - By Joshua Levin

This is a slice

What is JavaScript?

• The language that powers most of the internet
• Can be used in everything from websites, servers, games and desktop applications - such as GDevelop!
• Is sometimes its own enemy - https://www.youtube.com/watch?v=et8xNAc2ic8

What is a variable?

What is a variable?

meaning_of_life = 42

moon = “full”

What is a variable?

meaning_of_life

What is a variable?

moon

What is a variable?

“Something we use to hold information”

What is a variable?

“Something we use to hold a value”

What is a variable?

meaning_of_life = 42

moon = “full”

What is a variable?

meaning_of_life = 42

moon = “full”

What is a variable?

meaning_of_life = 42

moon = “full”

What is assignment?

What is assignment?

“This has the value of that”

What is assignment?

=

What is assignment?

meaning_of_life = 42

moon = “full”

​

​

What is assignment?

meaning_of_life = 42

moon = “full”

​

​

What are the types of variables?

​

What are the types of variables?

​

“Can this variable change?”

What are the types of variables?

“After I give this variable a value, can it have a different value?”

What are the types of variables?

​

let meaning_of_life = 42

const moon = “full”

​

What are the types of variables?

​

let meaning_of_life = 42

const moon = “full”

​

What are the types of variables?

​

const

What are the types of variables?

​

const(ant)

What are the types of variables?

​

const

What are the types of variables?

​

const:

“This variable can never change”

What are the types of variables?

​

const moon = “full”

What are the types of variables?

​

const moon = “full”

…

moon = “new”

What are the types of variables?

​

const moon = “full”

…

moon = “new”

What are the types of variables?

​

let

What are the types of variables?

​

let:

“This variable can be changed”

What are the types of variables?

​

let meaning_of_life = 42

What are the types of variables?

​

let meaning_of_life = 42

…

​

meaning_of_life = “who knows?”

What are the types of variables?

​

let meaning_of_life = 42

…

​

meaning_of_life = “who knows?”

What are the types of variables?

​

let meaning_of_life = 42

const moon = “full”

​

Which one should I use?

const

let

Which one should I use?

const

let

What are the types of variables?

​

“var”

What are the types of variables?

​

“var”

What is comparing?

What is comparing?

“Is that variable this value?”

What is comparing?

“Is that variable this value?”

Answer: true or false

What is comparing?

“Is that variable this value?”

Answer: true or false

(boolean)

What is comparing?

“Is the meaning of life 42?”

What is comparing?

“Is the meaning of life 42?”

meaning_of_life === 42

What is comparing?

===

What is comparing?

=

What is comparing?

=

(assignment)

What is comparing?

==

​

What is comparing?

==

(don’t use it)

What is comparing?

===

What is comparing?

if the meaning of life is 42

do something cool...

What is comparing?

if ( ) { }

What is comparing?

if ([comparison]) { }

What is comparing?

if ([comparison]) {

[action]

}

What is comparing?

if (this is true) {

[action]

}

What is comparing?

if (this is true) {

do this

}

What is comparing?

if the meaning of life is 42

do something cool...

What is comparing?

if( the meaning of life is 42)

do something cool...

What is comparing?

if( the meaning of life is 42) {}

do something cool...

What is comparing?

if( the meaning of life is 42) {

do something cool…

​

}

What is comparing?

if( the meaning of life is 42) {

do something cool…

​

}

What is comparing?

if( the meaning of life is 42) {

do something cool…

​

}

What is comparing?

if( the meaning of life is 42) {

do something cool…

​

}

What is comparing?

if(meaning_of_life is 42) {

do something cool…

​

}

What is comparing?

if(meaning_of_life === 42) {

do something cool…

​

}

What is comparing?

if(meaning_of_life === 42) {

// do something cool…

​

}

What is a comment?

//

What is a comment?

//

(note to someone reading)

What is a comment?

//

(note to someone reading)

(computer doesn’t use it)

What is comparing?

if(meaning_of_life === 42) {

// do something cool…

​

}

What is comparing?

if(meaning_of_life === 42) {

// do something cool…

​

}

What is comparing?

if(meaning_of_life === 42) {

// do something cool…

​

}

What is JSON?

• JavaScript Object Notation
• A very popular data storage format that is deeply integrated with JavaScript
• Looks pretty crazy but it will make sense fast

JSON is limited

• Object
• Array
• Number
• String
• Boolean
• Null

NULL

NULL

(Literally

Nothing)

Boolean

True / False

String

“Some text”

String

‘Some text’

String

`Some text`

String

“Some text”

Number

1

Number

100

Number

42

Array

[ ]

Array

Array

Array

Length

4

Array

Length

4

0

Array

Length

4

0

1

Array

Length

4

0

1

2

Array

Length

4

0

1

2

3

Array

Length

4

0

1

2

3

“Index”

Array

Length

4

0

1

2

3

First = 0

Array

Length

4

0

1

2

3

Last = Length - 1

Array

0

1

2

3

Array

0

1

2

3

“Store moon at index 2”

Array

0

1

2

3

“Store moon at index 2”

Array

0

1

2

3

“Store moon at index 2”

Array

0

1

2

3

Array

0

1

2

3

“Get me what’s in index 2”

Array

0

1

2

3

“Get me what’s in index 2”

Array

0

1

2

3

“Get me what’s in index 2”

Array

0

1

2

3

Array

0

1

2

3

“Get me what’s in index 0”

Array

0

1

2

3

“Get me what’s in index 0”

Array

0

1

2

3

“Get me what’s in index 0”

Array

0

1

2

3

“Get me what’s in index 0”

UNDEFINED

Array

0

1

2

3

Array

0

1

2

3

“Get me what’s in index 4”

Array

0

1

2

3

“Get me what’s in index 4”

UNDEFINED

Array

0

1

2

3

Array

0

1

2

3

“Store car in index 2”

Array

0

1

2

3

“Store car in index 2”

Array

0

1

2

3

“Store car in index 2”

Let’s code it up - Arrays

[ ]

Let’s code it up - Arrays

Initializing

const

Let’s code it up - Arrays

Initializing

const box

Let’s code it up - Arrays

Initializing

const box =

Let’s code it up - Arrays

Initializing

const box = []

Let’s code it up - Arrays

Initializing

const box = []

box=[]

Let’s code it up - Arrays

Inserting

const box = []

Let’s code it up - Arrays

Inserting

const box = []

box

Let’s code it up - Arrays

Inserting

const box = []

box[]

Let’s code it up - Arrays

Inserting

const box = []

box[0]

Let’s code it up - Arrays

Inserting

const box = []

box[0] =

Let’s code it up - Arrays

Inserting

​

const box = []

box[0] = moon

Let’s code it up - Arrays

Inserting

​

const box = []

box[0] = moon

box=[moon]

Let’s code it up - Arrays

Inserting

​

const box = [moon]

Let’s code it up - Arrays

Inserting

​

const box = [moon]

box[]

Let’s code it up - Arrays

Inserting

​

const box = [moon]

box[1]

Let’s code it up - Arrays

Inserting

​

const box = [moon]

box[1] =

Let’s code it up - Arrays

Inserting

​

const box = [moon]

box[1] = car

Let’s code it up - Arrays

Inserting

​

const box = [moon]

box[1] = car

box=[moon,car]

Let’s code it up - Arrays

Replacing

​

const box = [moon,car]

Let’s code it up - Arrays

Replacing

​

​

const box = [moon,car]

box[]

Let’s code it up - Arrays

Replacing

​

​

const box = [moon,car]

box[0]

Let’s code it up - Arrays

Replacing

const box = [moon,car]

box[0] =

Let’s code it up - Arrays

Replacing

​

const box = [moon,car]

box[0] = cake

Let’s code it up - Arrays

Replacing

​

const box = [moon,car]

box[0] = cake

box=[cake,car]

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const first

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const first =

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const first = box

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const first = box[]

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const first = box[0]

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const first = box[0]

first=cake

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const last

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const last =

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const last = box[]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const last = box[]�

last index is length - 1

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const

const last = box[]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const index

const last = box[]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const index =

const last = box[]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const index = box

const last = box[]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const index = box.

const last = box[]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const index = box.length

const last = box[]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const index = box.length -

const last = box[]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const index = box.length - 1

const last = box[]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const index = box.length - 1

const last = box[index]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const last = box[box.length - 1]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const index = box.length - 1

const last = box[index]

​

Let’s code it up - Arrays

Retrieving

​

const box = [cake,car]

const index = box.length - 1

const last = box[index]

last=car

​

Object

{ }

Object

{ } =

Object

{ } =

Object

{ } =

Object

{ } =

Object

{ } =

Object

{ } =

Object

{ } =

Object

{ }

This bad boy can fit so many properties in it

“Property”?

Property

Name = Thing

Property

Name = Thing

Key = Value

Property

Name = Thing

Key = Value

“key”:value

Property

“Car” =

Property

“Moon” =

Object

Object

“Store this as Moon”

Object

MOON

“Store this as Moon”

Object

MOON

“Store this as Moon”

Object

MOON

“Get me Moon”

Object

“Get me Moon”

MOON

Object

MOON

Object

MOON

“Get me Car”

Object

MOON

“Get me Car”

Object

MOON

“Get me Car”

UNDEFINED

Object

MOON

Object

MOON

“Replace

Moon with

this”

Object

MOON

“Replace

Moon with

this”

Object

MOON

“Replace

Moon with

this”

Object

MOON

“Replace

Moon with

this”

Object

MOON

“Replace

Moon with

this”

Let’s code it up - Objects

{ }

Let’s code it up - Objects

Initializing

const

Let’s code it up - Objects

Initializing

const bucket

Let’s code it up - Objects

Initializing

const bucket =

Let’s code it up - Objects

Initializing

const bucket = {}

Let’s code it up - Objects

Inserting

const bucket = {}

Let’s code it up - Objects

Inserting

const bucket = {}

bucket

Let’s code it up - Objects

Inserting

const bucket = {}

bucket[]

Let’s code it up - Objects

Inserting

const bucket = {}

bucket[“moon”]

Let’s code it up - Objects

Inserting

const bucket = {}

bucket[“moon”] =

Let’s code it up - Objects

Inserting

const bucket = {}

bucket[“moon”] = moon

Let’s code it up - Objects

Inserting

const bucket = {}

bucket[“moon”] = moon

bucket={“moon”:moon}

Let’s code it up - Objects

Inserting

const bucket = {“moon”:moon}

Let’s code it up - Objects

Inserting

const bucket = {“moon”:moon}

bucket[“car”] = car

Let’s code it up - Objects

Inserting

const bucket = {“moon”:moon}

bucket[“car”] = car

bucket={“car”:car}

Let’s code it up - Objects

Replacing

const bucket = {“moon”:moon, “car”:car}

Let’s code it up - Objects

Replacing

const bucket = {

“moon”:moon,

“car”:car

}

​

​

Let’s code it up - Objects

Replacing

const bucket = {

“moon”:moon,

“car”:car

}

​

bucket[“moon”] = cake

​

​

Let’s code it up - Objects

Replacing

const bucket = { const bucket = {

“moon”:moon, “moon”:cake,

“car”:car “car”:car

} }

​

bucket[“moon”] = cake

​

​

Let’s code it up - Objects

Retrieving

const bucket = {

“moon”:cake,

“car”:car

}

​

​

Let’s code it up - Objects

Retrieving

const bucket = {

“moon”:cake,

“car”:car

}

​

const first

​

​

Let’s code it up - Objects

Retrieving

const bucket = {

“moon”:cake,

“car”:car

}

​

const first =

​

​

Let’s code it up - Objects

Retrieving

const bucket = {

“moon”:cake,

“car”:car

}

​

const first = bucket

​

​

Let’s code it up - Objects

Retrieving

const bucket = {

“moon”:cake,

“car”:car

}

​

const first = bucket[]

​

​

Let’s code it up - Objects

Retrieving

const bucket = {

“moon”:cake,

“car”:car

}

​

const first = bucket[“moon”]

​

​

Let’s code it up - Objects

Retrieving

const bucket = {

“moon”:cake,

“car”:car

}

​

const first = bucket.moon

​

​

Let’s code it up - Objects

Retrieving

const bucket = {

“moon”:cake,

“car”:car

}

​

const first = bucket[“moon”]

​

​

Let’s code it up - Objects

Retrieving

const bucket = {

“moon”:cake,

“car”:car

}

​

const first = bucket[“moon”] first=cake

​

​

JSON example

• Object - { }
• Array - [ ]
• Number - 101
• String - “written text”
• Boolean - true or false
• Null - literally nothing

JSON example

​

• Object - { }
• Array - [ ]
• Number - 101
• String - “written text”
• Boolean - true or false
• Null - literally nothing

JSON example

​

• Object - { }
• Array - [ ]
• Number - 101
• String - “written text”
• Boolean - true or false
• Null - literally nothing

JSON example

​

• Object - { }
• Array - [ ]
• Number - 101
• String - “written text”
• Boolean - true or false
• Null - literally nothing

JSON example

​

• Object - { }
• Array - [ ]
• Number - 101
• String - “written text”
• Boolean - true or false
• Null - literally nothing

JSON example

​

• Object - { }
• Array - [ ]
• Number - 101
• String - “written text”
• Boolean - true or false
• Null - literally nothing

JSON example

​

• Object - { }
• Array - [ ]
• Number - 101
• String - “written text”
• Boolean - true or false
• Null - literally nothing

Arrays have some useful build-in tools

For each bucket in the array, do something to whatever is inside

Array.forEach( (value) => {

// do something with value

})

Arrays have some useful build-in tools

Go through each bucket and give me a new array only with buckets that match my criteria

​

var filteredArray = Array.filter( (value) => {

// If our value matches some criteria� return true � // Otherwise� return false

})

fin