Slides Student Js Course

TABLE OF CONTENTS: THEORY LECTURES (CLICK THE TITLES)
1 A Brief Introduction to JavaScript →

2 JavaScript Versions: ES5, ES6 / ES2015 and ES6+ →
3 How our code is executed: JavaScript parsers and engines →
4 Execution contexts and the execution stack →
5 Execution contexts in detail: creation and execution phases and hoisting →
6 Scoping and the scope chain →
7 The 'this' keyword →
8 The DOM and DOM Manipulation →
9 Events and event handling: rolling the dice →
10 Everything is an object: Inheritance and the Prototype Chain →
11 Closures →
12 Event delegation →
13 Understanding Asynchronous JavaScript: The Event Loop →
14 From Callback Hell to Promises →
15 An Overview of Modern JavaScript →
SECTION 1 —
INTRODUCTION
SECTION
COURSE INTRODUCTION
LECTURE
WELCOME TO THE COURSE
02 JavaScript Language Basics
03 How JavaScript Works Behind the Scenes
04 JavaScript in the Browser: DOM Manipulation and Events
05 Advanced JavaScript: Objects and Functions
06 Putting It All Together: The Budget App Project
07 Next Generation JavaScript: Intro to ES6 / ES2015
08 Asynchronous JavaScript: Promises, Async/Await and AJAX
09 Modern JavaScript: Using ES6, NPM, Babel and Webpack

SECTION
COURSE INTRODUCTION
LECTURE
SETTING UP OUR TOOLS
SECTION 2 —
JS LANGUAGE BASICS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
SECTION INTRO
SECTION
LECTURE
LET'S START CODING!
SECTION
LECTURE
A BRIEF INTRODUCTION TO JAVASCRIPT
WHAT IS JAVASCRIPT?
• JavaScript is a lightweight, cross-platform, object-oriented computer programming

language 😅
• JavaScript is one of the three core technologies of web development
• Today, JavaScript can be used in different places:
• Client-side: JavaScript was traditionally only used in the browser
• Server-side: Thanks to node.js, we can use JavaScript on the server as well
• Javascript is what made modern web development possible:
• Dynamic effects and interactivity
• Modern web applications that we can interact with
• Frameworks/libraries like React and Angular are 100% based on JavaScript: you
need to master JavaScript in order to use them!
THE ROLE OF JAVASCRIPT IN WEB DEVELOPMENT
CONTENT
DYNAMIC EFFECTS/
PRESENTATION
PROGRAMMING
NOUNS, ADJECTIVES AND VERBS
CONTENT PRESENTATION DYNAMIC EFFECTS/

PROGRAMMING
NOUNS ADJECTIVES VERBS

<p></p> p {color: red;} p.hide();
means “paragraph” means “the paragraph means “hide the

text is red” paragraph”
JAVASCRIPT VERSIONS... (MORE ABOUT THIS LATER)
ES5 ES6/ES2015 ES7/ES2016 ES8/ES2017

SECTION
LECTURE
VARIABLES AND DATA TYPES
PRIMITIVE JAVASCRIPT DATA TYPES
1. Number: Floating point numbers, for decimals and integers
2. String: Sequence of characters, used for text
3. Boolean: Logical data type that can only be true or false
4. Undefined: Data type of a variable that does not have a value yet
5. Null: Also means ‘non-existent’
JavaScript has dynamic typing: data types are

automatically assigned to variables
SECTION
LECTURE
VARIABLE MUTATION AND TYPE
COERCION
SECTION
LECTURE
BASIC OPERATORS
SECTION
LECTURE
OPERATOR PRECEDENCE
SECTION
LECTURE
CODING CHALLENGE
SECTION
LECTURE
CODING CHALLENGE: SOLUTION
SECTION
LECTURE
IF/ELSE STATEMENTS
SECTION
LECTURE
BOOLEAN LOGIC
BASIC BOOLEAN LOGIC: NOT, AND & OR
var A
• AND (&&) => true if ALL are true
AND TRUE FALSE
• OR (||) => true if ONE is true
var B
TRUE TRUE FALSE • NOT (!) => inverts true/false value
FALSE FALSE FALSE
var age = 16;

var A
age >= 20; // => false
OR TRUE FALSE age < 30; // => true
!(age < 30); // => false
var B
TRUE TRUE TRUE

age >= 20 && age < 30; // => false
age >= 20 || age < 30; // => true
FALSE TRUE FALSE
SECTION
LECTURE
THE TERNARY OPERATOR AND SWITCH
STATEMENTS
SECTION
LECTURE
TRUTHY AND FALSY VALUES AND
EQUALITY OPERATORS
SECTION
LECTURE
CODING CHALLENGE
SECTION
LECTURE
SECTION
LECTURE
FUNCTIONS
SECTION
LECTURE
FUNCTION STATEMENTS AND
EXPRESSIONS
SECTION
LECTURE
ARRAYS
SECTION
LECTURE
CODING CHALLENGE
SECTION
LECTURE
SECTION
LECTURE
OBJECTS AND PROPERTIES
SECTION
LECTURE
OBJECTS AND METHODS
SECTION
LECTURE
CODING CHALLENGE
SECTION
LECTURE
SECTION
LECTURE
LOOPS AND ITERATION
SECTION
LECTURE
CODING CHALLENGE
SECTION
LECTURE
CODING CHALLENGE: SOLUTION, PART 1
SECTION
LECTURE
SECTION
LECTURE
JAVASCRIPT VERSIONS: ES5, ES6 /
ES2015 AND ES6+
A (VERY) SHORT HISTORY OF JAVASCRIPT
• 1996: Changed from LiveScript to JavaScript to attract Java developers. JavaScript has almost
nothing to do with Java ☝
• 1997: ES1 (ECMAScript 1) became the first version of the JavaScript language standard:
• ECMAScript: The language standard;
• JavaScript: The language in practice.
• 2009: ES5 (ECMAScript 5) was released with lots of new features.
• 2015: ES6/ES2015 (ECMAScript 2015) was released: the biggest update to the language ever!
• 2015: Changed to an annual release cycle 🙏
• 2016/2017/2018/2019/…: Release of ES2016/ES2017/ES2018/ES2019/…

JAVASCRIPT TODAY: WHICH VERSION TO USE?
• Fully supported in all browsers;

ES5
• Ready to be used today 👍
ES6/ES2015
http://kangax.github.io/compat-table
• Well supported in all modern browsers
ES7/ES2016 • No support in older browsers;
• Can use most features in production with transpiling and polyfilling (converting to ES5) 😃
ES8/ES2017
ES9/ES2018 • Future versions, together called ESNext;

• Some features supported in modern browsers;
• Can already use some features in production with transpiling and polyfilling 😊
ES10/ES2019
(As of mid-2018)
WE USE ES5 AND ES6 IN THIS COURSE: WHY?
• JavaScript fundamentals • ES6/ES2015 introduction

• How the language works • Asynchronous JavaScript
ES5 • DOM manipulation project

ES6+ • AJAX and API calls
• Advanced language features • Modern dev setups (Webpack and Babel)
• Huge real project • Huge real project
• You will have to understand ES5 today and in the future;
• Many tutorials and code you find online today are still in ES5;
• When working on older codebases, these will be written in ES5;
• It’s better and easier to learn the fundamentals in ES5, and then
update to ES6+.
SECTION 3 — HOW
JAVASCRIPT WORKS
BEHIND THE SCENES
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
SECTION INTRO
SECTION
SCENES
LECTURE
HOW OUR CODE IS EXECUTED:
JAVASCRIPT PARSERS AND ENGINES
WHAT HAPPENS TO OUR CODE?
OUR CODE JAVASCRIPT ENGINE
Conversion
Parser to Machine Code Runs
Code
Machine Code
Abstract Syntax Tree
SECTION
SCENES
LECTURE
EXECUTION CONTEXTS AND THE
EXECUTION STACK
EXECUTION CONTEXTS
THE DEFAULT
Execu&on Context Global ExecuMon

(A box, a container, or a Context
wrapper which stores variables
and in which a piece of our
code is evaluated and executed)
• Code that is not inside any func.on
• Associated with the global object
• In the browser, that’s the window
object
lastName === window.lastName

// true
ExecuMon Context
third()
ExecuMon Context
second()
ExecuMon Context
first()
Global ExecuMon
Context
EXECUTION STACK
SECTION
SCENES
LECTURE
EXECUTION CONTEXTS IN DETAIL:
CREATION AND EXECUTION PHASES
AND HOISTING
THE EXECUTION CONTEXT IN DETAIL
1. Crea&on phase
EXECUTION CONTEXT
OBJECT A) Crea&on of the Variable Object (VO)
B) Crea&on of the scope chain

Variable Object (VO)
C) Determine value of the ‘this’ variable
Scope chain
2. Execu&on phase
“This” variable
The code of the func&on that generated the
current execu&on context is ran line by line
THE VARIABLE OBJECT
EXECUTION CONTEXT
OBJECT
Scope chain
• The argument object is created, containing all the arguments that “This” variable
were passed into the func&on.
• Code is scanned for funcMon declaraMons: for each func&on, a

property is created in the Variable Object, poinMng to the funcMon.
HOISTING
• Code is scanned for variable declaraMons: for each variable, a
property is created in the Variable Object, and set to undefined.
SECTION
SCENES
LECTURE
HOISTING IN PRACTICE
SECTION
SCENES
LECTURE
SCOPING AND THE SCOPE CHAIN
SCOPING IN JAVASCRIPT
EXECUTION CONTEXT
OBJECT
Scope chain
• Scoping answers the ques&on “where can we access a certain “This” variable
variable?”
• Each new funcMon creates a scope: the space/environment, in

which the variables it defines are accessible.
• Lexical scoping: a func&on that is lexically within another func&on

gets access to the scope of the outer func&on.
Global scope
a = ‘Hello’
[VOGlobal]
SCOPE CHAIN
1
first() scope a = ‘Hello’
b = ‘Hi!’
[VO1]+[VOGlobal]
a = ‘Hello’
2 b = ‘Hi!’
second() scope c = ‘Hey!’
[VO2]+[VO1]+[VOGlobal]
EXECUTION CONTEXT
OBJECT
Scope chain
“This” variable (VO: Variable Object)

EXECUTION STACK VS SCOPE CHAIN
ExecuMon Context a = ‘Hello’

Global Scope
third()
EXECUTION STACK
ExecuMon Context Scope
SCOPE CHAIN
a = ‘Hello’
b = ‘Hi!’
second() first()
ExecuMon Context Scope a = ‘Hello’

b = ‘Hi!’
first() second() c = ‘Hey!’
Global ExecuMon Scope a = ‘Hello’

d = ‘John’
Context third()
Order in which
func&ons are called ≠ Order in which func&ons
are wri<en lexically
SECTION
SCENES
LECTURE
THE 'THIS' KEYWORD
THE ‘THIS’ VARIABLE
EXECUTION CONTEXT
OBJECT
Scope chain
• Regular func&on call: the this keyword points at the global object,
“This” variable
(the window object, in the browser).
• Method call: the this variable points to the object that is calling
the method.
• The this keyword is not assigned a value un5l a func5on where it is

defined is actually called.
SECTION
SCENES
LECTURE
THE 'THIS' KEYWORD IN PRACTICE
SECTION 4 —
JAVASCRIPT IN THE
BROWSER: DOM
MANIPULATION AND
EVENTS
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
SECTION INTRO
SECTION
LECTURE
THE DOM AND DOM MANIPULATION
THE DOCUMENT OBJECT MODEL
<body>
<section>
• DOM: Document Object Model;
<p>A paragraph with a <a>link</a> .</p>
• Structured representa&on of an HTML
document; <p>Another second paragraph.</p>
• The DOM is used to connect </section>

webpages to scripts like JavaScript;
<section>
• For each HTML box, there is an object
<img src=“x.jpg” alt=“The DOM”>
in the DOM that we can access and
interact with. </section>
</body>
DOM MANIPULATION
JAVASCRIPT DOM
InteracMon/
ManipulaMon
SECTION
LECTURE
5-MINUTE HTML AND CSS CRASH
COURSE
SECTION
LECTURE
PROJECT SETUP AND DETAILS
SECTION
LECTURE
FIRST DOM ACCESS AND MANIPULATION
WHAT YOU WILL LEARN IN THIS LECTURE
• How to create our fundamental

game variables;
• How to generate a random

number;
• How to manipulate the DOM;
• How to read from the DOM;
• How to change CSS styles.

SECTION
LECTURE
EVENTS AND EVENT HANDLING:
ROLLING THE DICE
WHAT ARE EVENTS?
• Events: No&fica&ons that are sent to no&fy the code that

something happened on the webpage;
• Examples: clicking a buWon, resizing a window, scrolling down or

pressing a key;
• Event listener: A func&on that performs an ac&on based on a

certain event. It waits for a specific event to happen.
HOW EVENTS ARE PROCESSED
ExecuMon Context
second()
ExecuMon Context
ExecuMon Context
first()
clickHandler()
Global ExecuMon Click Scroll

Context Event Event
EXECUTION STACK MESSAGE QUEUE

• How to set up an event handler;
• What a callback func&on is;
• What an anonymous func&on is;
• Another way to select elements

by ID;
• How to change the image in an

<img> element.
SECTION
LECTURE
UPDATING SCORES AND CHANGING THE
ACTIVE PLAYER
• What the ternary operator is;
• How to add, remove and

toggle HTML classes.
SECTION
LECTURE
IMPLEMENTING OUR ‘HOLD’ FUNCTION
AND THE DRY PRINCIPLE
• How to use func&ons to

correctly apply the DRY
principle;
• How to think about the game

logic like a programmer.
SECTION
LECTURE
CREATING A GAME INITIALIZATION
FUNCTION
• Prac&ce, prac&ce, prac&ce…

SECTION
LECTURE
FINISHING TOUCHES
• What a state variable is, how

to use it and why
SECTION
LECTURE
CODING CHALLENGE
SECTION
LECTURE
SECTION
LECTURE
SECTION
LECTURE
SECTION 5 —
ADVANCED
JAVASCRIPT: OBJECTS
AND FUNCTIONS
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
SECTION INTRO
SECTION
FUNCTIONS
LECTURE
EVERYTHING IS AN OBJECT:
INHERITANCE AND THE PROTOTYPE
CHAIN
OBJECTS IN JAVASCRIPT
Everything is an object.
PRIMITIVES EVERYTHING ELSE …
• Arrays
• Numbers (Well, almost everything)
• Func&ons
• Strings
• Objects
• Booleans
• Dates
• Undefined
• Wrappers for Numbers,
• Null
Strings, Booleans
… IS AN OBJECT
THE OBJECT ORIENTED PARADIGM
OBJECT-ORIENTED PROGRAMMING
• Objects interac&ng with one another through

methods and proper&es;
• Used to store data, structure applica&ons into

modules and keeping code clean.
CONSTRUCTORS AND INSTANCES IN JAVASCRIPT
CONSTRUCTOR INSTANCES
var jane
Person Jane
var mark
name 1948
Mark
retired
yearOfBirth var john
1965
job calculateAge() John
designer
calculateAge() 1990
calculateAge()
teacher
calculateAge()
INHERITANCE IN GENERAL
Person
name
yearOfBirth Athlete
job olympics
calculateAge() olympicMedals
allowedOlympics()
INHERITANCE name
yearOfBirth
Athlete isMarried
olympics calculateAge()
olympicMedals
allowedOlympics()
INHERITANCE IN JAVASCRIPT: PROTOTYPES AND PROTOTYPE CHAINS
john Person Object
John
Prototype Prototype
1990
calculateAge() hasOwnProperty()
teacher
isPrototypeOf()
null
Prototype constructor()
toString()
..
.
valueOf()
PROTOTYPE CHAIN
SUMMARY
• Every JavaScript object has a prototype property, which makes inheritance

possible in JavaScript;
• The prototype property of an object is where we put methods and proper&es

that we want other objects to inherit;
• The Constructor’s prototype property is NOT the prototype of the Constructor

itself, it’s the prototype of ALL instances that are created through it;
• When a certain method (or property) is called, the search starts in the object
itself, and if it cannot be found, the search moves on to the object’s prototype.
This con&nues un&l the method is found: prototype chain.
SECTION
FUNCTIONS
LECTURE
CREATING OBJECTS: FUNCTION
CONSTRUCTORS
SECTION
FUNCTIONS
LECTURE
THE PROTOTYPE CHAIN IN THE
CONSOLE
SECTION
FUNCTIONS
LECTURE
CREATING OBJECTS: OBJECT.CREATE
SECTION
FUNCTIONS
LECTURE
PRIMITIVES VS. OBJECTS
SECTION
FUNCTIONS
LECTURE
FIRST CLASS FUNCTIONS: PASSING
FUNCTIONS AS ARGUMENTS
FUNCTIONS ARE ALSO OBJECTS IN JAVASCRIPT
• A func&on is an instance of the Object type;
• A func&on behaves like any other object;
• We can store func&ons in a variable;
• We can pass a func&on as an argument to another func&on;
• We can return a func&on from a func&on.
FIRST-CLASS FUNCTIONS
SECTION
FUNCTIONS
LECTURE
FIRST CLASS FUNCTIONS: FUNCTIONS
RETURNING FUNCTIONS
SECTION
FUNCTIONS
LECTURE
IMMEDIATELY INVOKED FUNCTION
EXPRESSIONS (IIFE)
SECTION
FUNCTIONS
LECTURE
CLOSURES
CLOSURES
CLOSURES SUMMARY
An inner func5on has always access to

the variables and parameters of its outer
func5on, even a?er the outer func5on
has returned.
HOW CLOSURES WORK
retirementAge = 66
Global scope
a = ‘ years ...'
yearOfBirth = 1990 retirementAge = 66
age = 26 a = ‘ years ...'
ExecuMon Context retirementAge = 66

Scope
a = ‘ years ...'
retirementUS()
retirement() retirement()
retirementAge = 66
Global ExecuMon a = ‘ years ...’
Scope
yearOfBirth = 1990
Context age = 26 “retirementUS”()
EXECUTION STACK SCOPE CHAIN

CLOSURES
CLOSURES SUMMARY (AGAIN :)
An inner func5on has always access to

the variables and parameters of its outer
func5on, even a?er the outer func5on
has returned.
SECTION
FUNCTIONS
LECTURE
BIND, CALL AND APPLY
SECTION
FUNCTIONS
LECTURE
CODING CHALLENGE
SECTION
FUNCTIONS
LECTURE
SECTION
FUNCTIONS
LECTURE
SECTION 6 —
PUTTING IT ALL
TOGETHER: THE
BUDGET APP PROJECT
SECTION
PUTTING IT ALL TOGETHER: THE
BUDGET APP PROJECT
LECTURE
SECTION INTRO
SECTION
BUDGET APP PROJECT
LECTURE
PROJECT SETUP AND DETAILS
SECTION
BUDGET APP PROJECT
LECTURE
PROJECT PLANNING AND
ARCHITECTURE: STEP 1
NOT SO FAST…
(LET’S THINK TOGETHER)
PLANNING: STEP 1
TO-DO LIST
Add event handler
Get input values
Add the new item to

our data structure
Add the new item to

the UI
Calculate budget
Update the UI
STRUCTURING OUR CODE WITH MODULES
MODULES
• Important aspect of any robust applica&on's architecture;
• Keep the units of code for a project both cleanly separated

and organized;
• Encapsulate some data into privacy and expose other data

publicly.
STRUCTURING OUR CODE WITH MODULES
UI MODULE DATA MODULE TO-DO LIST
Add event handler
Get input values
Add the new item to

our data structure
Add the new item to

the UI
CONTROLLER MODULE
Calculate budget
Update the UI
SECTION
BUDGET APP PROJECT
LECTURE
IMPLEMENTING THE MODULE PATTERN
• How to use the module

paWern;
• More about private and public

data, encapsula&on and
separa&on of concerns.
SECTION
BUDGET APP PROJECT
LECTURE
SETTING UP THE FIRST EVENT
LISTENERS
• How to set up event listeners

for keypress events;
• How to use event object.

SECTION
BUDGET APP PROJECT
LECTURE
READING INPUT DATA
• How to read data from

different HTML input types.
SECTION
BUDGET APP PROJECT
LECTURE
CREATING AN INITIALIZATION FUNCTION
• How and why to create an

ini&aliza&on func&on.
SECTION
BUDGET APP PROJECT
LECTURE
CREATING INCOME AND EXPENSE
FUNCTION CONSTRUCTORS
• How to choose func&on

constructors that meet our
applica&on's needs;
• How to set up a proper data

structure for our budget
controller.
SECTION
BUDGET APP PROJECT
LECTURE
ADDING A NEW ITEM TO OUR BUDGET
CONTROLLER
• How to avoid conflicts in our

data structures;
• How and why to pass data

from one module to another.
SECTION
BUDGET APP PROJECT
LECTURE
ADDING A NEW ITEM TO THE UI
• A technique for adding big chunks

of HTML into the DOM;
• How to replace parts of strings;
• How to do DOM manipula&on

using the insertAdjacentHTML
method.
SECTION
BUDGET APP PROJECT
LECTURE
CLEARING OUR INPUT FIELDS
• How to clear HTML fields;
• How to use querySelectorAll,
• How to convert a list to an array;
• A beWer way to loop over an array

then for loops: foreach.
SECTION
BUDGET APP PROJECT
LECTURE
UPDATING THE BUDGET: CONTROLLER
• How to convert field inputs to

numbers;
• How to prevent false inputs.

SECTION
BUDGET APP PROJECT
LECTURE
UPDATING THE BUDGET: BUDGET
CONTROLLER
• How and why to create simple,

reusable func&ons with only one
purpose;
• How to sum all elements of an

array using the forEach method.
SECTION
BUDGET APP PROJECT
LECTURE
UPDATING THE BUDGET: UI CONTROLLER
• Prac&ce DOM manipula&on by

upda&ng the budget and total
values.
SECTION
BUDGET APP PROJECT
LECTURE
AFTER STEP 1… (THAT WE JUST COMPLETED)
PLANNING: STEP 2
TO-DO LIST
Add event handler
Delete the item from

our data structure
Delete the item to

the UI
Re-calculate budget
Update the UI
SECTION
BUDGET APP PROJECT
LECTURE
EVENT DELEGATION
EVENT BUBBLING, TARGET ELEMENT AND EVENT DELEGATION
<main>
EVENT BUBBLING
<section>
<p>Lorem ipsum dolor sit.</p>
TARGET ELEMENT <p>Lorem ipsum dolor sit amet,
nec <button>link</button> .</p>
</section>
EVENT DELEGATION
</main>
WHEN TO USE EVENT DELEGATION
USE CASES FOR EVENT DELEGATION
1. When we have an element with lots of child elements that

we are interested in;
2. When we want an event handler aWached to an element

that is not yet in the DOM when our page is loaded.
SECTION
BUDGET APP PROJECT
LECTURE
SETTING UP THE DELETE EVENT
LISTENER USING EVENT DELEGATION
• How to use event delega&on in

prac&ce;
• How to use IDs in HTML to connect

the UI with the data model;
• How to use the parentNode

property for DOM traversing.
SECTION
BUDGET APP PROJECT
LECTURE
DELETING AN ITEM FROM OUR BUDGET
CONTROLLER
• Yet another method to loop over an

array: map;
• How to remove elements from an

array using the splice method.
SECTION
BUDGET APP PROJECT
LECTURE
DELETING AN ITEM FROM THE UI
• More DOM manipula&on: how to

remove an element from the DOM.
SECTION
BUDGET APP PROJECT
LECTURE
AFTER STEP 2… (THAT WE JUST COMPLETED)
PLANNING: STEP 3
TO-DO LIST
Calculate percentages
Update percentages
in UI
Display the current

month and year
Number formadng
Improve input field

UX
SECTION
BUDGET APP PROJECT
LECTURE
UPDATING THE PERCENTAGES:
CONTROLLER
• Reinforcing the concepts and

techniques we have learned so far.
SECTION
BUDGET APP PROJECT
LECTURE
UPDATING THE PERCENTAGES: BUDGET
CONTROLLER
• How to make our budget controller

interact with the Expense
prototype.
SECTION
BUDGET APP PROJECT
LECTURE
UPDATING THE PERCENTAGES: UI
CONTROLLER
• How to create our own forEach

func&on but for nodeLists instead
of arrays.
SECTION
BUDGET APP PROJECT
LECTURE
FORMATTING OUR BUDGET NUMBERS:
STRING MANIPULATION
• How to use different String

methods to manipulate strings.
SECTION
BUDGET APP PROJECT
LECTURE
DISPLAYING THE CURRENT MONTH AND
YEAR
• How to get the current date by

using the Date object constructor.
SECTION
BUDGET APP PROJECT
LECTURE
FINISHING TOUCHES: IMPROVING THE UX
• How and when to use 'change'

events.
SECTION
BUDGET APP PROJECT
LECTURE
WE’VE MADE IT! FINAL CONSIDERATIONS
OUR FINAL ARCHITECTURE
SECTION 7 —
GET READY FOR THE
FUTURE:
ECMASCRIPT2015
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
SECTION INTRO
SECTION
TO ES6 / ES2015
LECTURE
WHAT'S NEW IN ES6 / ES2015
JAVASCRIPT VERSIONS: QUICK RECAP
ES6/ES2015
• Well supported in all modern browsers
• No support in older browsers;
ES7/ES2016
• Can use most features in production with transpiling
and polyfilling (converting to ES5) 😃
ES8/ES2017
NEW ES6 FEATURES WE’LL COVER IN THIS SECTION
• Variable Declarations with let and const
• Blocks and IIFEs

• Strings
LAT E R . . .
• Arrow Functions
• Destructuring
• Promises
• Arrays • Native modules
• The Spread Operator
• Rest and Default Parameters
• Maps
• Classes and subclasses
SECTION
TO ES6 / ES2015
LECTURE
VARIABLE DECLARATIONS WITH LET
AND CONST
SECTION
TO ES6 / ES2015
LECTURE
BLOCKS AND IIFES
SECTION
TO ES6 / ES2015
LECTURE
STRINGS IN ES6 / ES2015
SECTION
TO ES6 / ES2015
LECTURE
ARROW FUNCTIONS: BASICS
SECTION
TO ES6 / ES2015
LECTURE
ARROW FUNCTIONS: LEXICAL ‘THIS’
KEYWORD
SECTION
TO ES6 / ES2015
LECTURE
DESTRUCTURING
SECTION
TO ES6 / ES2015
LECTURE
ARRAYS IN ES6 / ES2015
SECTION
TO ES6 / ES2015
LECTURE
THE SPREAD OPERATOR
SECTION
TO ES6 / ES2015
LECTURE
REST PARAMETERS
SECTION
TO ES6 / ES2015
LECTURE
DEFAULT PARAMETERS
SECTION
TO ES6 / ES2015
LECTURE
MAPS
SECTION
TO ES6 / ES2015
LECTURE
CLASSES
SECTION
TO ES6 / ES2015
LECTURE
CLASSES WITH SUBCLASSES
INHERITANCE IN GENERAL
Person
name
yearOfBirth Athlete
job olympics
calculateAge() olympicMedals
wonMedal()
INHERITANCE name
yearOfBirth
Athlete job
olympics calculateAge()
olympicMedals
wonMedal()
SECTION
TO ES6 / ES2015
LECTURE
CODING CHALLENGE
SECTION
TO ES6 / ES2015
LECTURE
SECTION
TO ES6 / ES2015
LECTURE
HOW TO USE ES2015 / ES6 TODAY!
SECTION 8 —
ASYNCHRONOUS
JAVASCRIPT
SECTION
ASYNCHRONOUS JAVASCRIPT:
PROMISES, ASYNC/AWAIT AND AJAX
LECTURE
SECTION INTRO
SECTION
LECTURE
AN EXAMPLE OF ASYNCHRONOUS
JAVASCRIPT
SECTION
LECTURE
UNDERSTANDING ASYNCHRONOUS
JAVASCRIPT: THE EVENT LOOP
SYNCHRONOUS VS. ASYNCHRONOUS
SYNCHRONOUS ASYNCHRONOUS
SYNCHRONOUS VS. ASYNCHRONOUS
SYNCHRONOUS ASYNCHRONOUS
• Allow asynchronous functions to run in

the “background”;
• We pass in callbacks that run once the

function has finished its work;
• Move on immediately: Non-blocking!

THE EVENT LOOP
EXECUTION STACK WEB APIS CONSOLE
timer setTimeout() “Hey There!”

Execution Context
(2s) callback
setTimeout() function DOM events
“The end”
XMLHttpRequest()
“Async Hey There!”
Execution Context ...
second()
log()
Execution Context
timer
first()
callback
Global Execution MESSAGE

Context QUEUE
EVENT LOOP
SECTION
LECTURE
THE OLD WAY: ASYNCHRONOUS
JAVASCRIPT WITH CALLBACKS
SECTION
LECTURE
FROM CALLBACK HELL TO PROMISES
WHAT ARE PROMISES?
PR O M I S E
• Object that keeps track about whether a certain event

has happened already or not;
• Determines what happens after the event has happened;
• Implements the concept of a future value that we're

expecting
PROMISE STATES
EVENT HAPPENS
PENDING SETTLED / RESOLVED
FULFILLED REJECTED
SECTION
LECTURE
FROM PROMISES TO ASYNC/AWAIT
SECTION
LECTURE
AJAX AND APIS
WHAT ARE AJAX AND APIS?
ASYNCHRONOUS JAVASCRIPT AND XML APPLICATION PROGRAMMING INTERFACE
Remote server (API) • Your own API, for data coming from
your own server
• 3rd-party APIs:
• Google Maps
HTTP REQUEST RESPONSE
(GET, POST, etc.)
• Embed Youtube videos
• Weather data
• Movies data
• Send email or SMS

Your JavaScript app running • Thousands of possibilities...
on the client (browser)
SECTION
LECTURE
MAKING AJAX CALLS WITH FETCH AND
PROMISES
SECTION
LECTURE
MAKING AJAX CALLS WITH FETCH AND
ASYNC/AWAIT
SECTION 9 —
MODERN JAVASCRIPT
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
SECTION INTRO
SECTION
BABEL AND WEBPACK
LECTURE
PROJECT OVERVIEW
SECTION
BABEL AND WEBPACK
LECTURE
AN OVERVIEW OF MODERN JAVASCRIPT
MODERN JAVASCRIPT: A BRIEF OVERVIEW
3rd-party packages ES6/ESNext ES6 Modules
— Libraries/frameworks
— Development tools ES5 Bundle
Putting it all together with an automated development setup powered by scripts

SECTION
BABEL AND WEBPACK
LECTURE
A BRIEF INTRODUCTION TO THE
COMMAND LINE
SECTION
BABEL AND WEBPACK
LECTURE
A MODERN SETUP: INSTALLING NODE.JS
AND NPM
SECTION
BABEL AND WEBPACK
LECTURE
A MODERN SETUP: CONFIGURING
WEBPACK
SECTION
BABEL AND WEBPACK
LECTURE
A MODERN SETUP: THE WEBPACK DEV
SERVER
SECTION
BABEL AND WEBPACK
LECTURE
A MODERN SETUP: BABEL
SECTION
BABEL AND WEBPACK
LECTURE
PLANNING OUR PROJECT
ARCHITECTURE WITH MVC
OUR MODEL-VIEW-CONTROLLER ARCHITECTURE (MVC)
MODEL CONTROLLER VIEW
Search.js searchView.js
Recipe.js recipeView.js
CONTROLLER
index.js
List.js listView.js
Likes.js likesView.js
SECTION
BABEL AND WEBPACK
LECTURE
HOW ES6 MODULES WORK
• How to use ES6 modules;
• Default and named exports and imports.

SECTION
BABEL AND WEBPACK
LECTURE
MAKING OUR FIRST API CALLS
• How to use a real-world API;
• What API keys are and why we need them.

SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE SEARCH MODEL
• How to build a simple data model using

ES6 classes.
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE SEARCH CONTROLLER
• The concept of application state;
• A simple way of implementing state.

SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE SEARCH VIEW — PART 1
• Advanced DOM manipulation techniques;
• How to use ES6 template stings to render

entire HTML components;
• How to create a loading spinner.

SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE SEARCH VIEW — PART 2
SECTION
BABEL AND WEBPACK
LECTURE
RENDERING AN AJAX LOADING SPINNER
SECTION
BABEL AND WEBPACK
LECTURE
IMPLEMENTING SEARCH RESULTS
PAGINATION
• How to use the .closest method for

easier event handling;
• How and why to use data-* attributes in

HTML5.
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE RECIPE MODEL — PART 1
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE RECIPE CONTROLLER
• How to read data from the page URL;
• How to respond to the hashchange

event;
• How to add the same event listener to

multiple events.
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE RECIPE MODEL - PART 2
• Use array methods like map, slice,

findIndex and includes;
• How and why to use eval().

SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE RECIPE VIEW - PART 1
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE RECIPE VIEW - PART 2
SECTION
BABEL AND WEBPACK
LECTURE
UPDATING RECIPE SERVINGS
• Yet another way of implementing event

delegation: .matches.
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE SHOPPING LIST MODEL
• How and why to create unique IDs using

an external package;
• Difference between Array.slice and

Array.splice;
• More uses cases for Array.findIndex

and Array.find.
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE SHOPPING LIST VIEW
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE SHOPPING LIST
CONTROLLER
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE LIKES MODEL
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE LIKES CONTROLLER
SECTION
BABEL AND WEBPACK
LECTURE
BUILDING THE LIKES VIEW
SECTION
BABEL AND WEBPACK
LECTURE
IMPLEMENTING PERSISTENT DATA WITH
LOCALSTORAGE
• How to use the localStorage API;
• How to set, get and delete items from

local storage.
SECTION
BABEL AND WEBPACK
LECTURE
WRAPPING UP: FINAL CONSIDERATIONS
MAKE THE PROJECT EVEN BETTER 💪
• Implement button to delete all shopping list items;
• Implement functionality to manually add items to

shopping list;
• Save shopping list data in local storage;
• Improve the ingredient parsing algorithm;
• Come up with an algorithm for calculating the

amount of servings;
• Improve error handling.

SECTION 10 —
CONCLUSION
SECTION
CONCLUSION
LECTURE
WHERE TO GO FROM HERE
END

Slides Student Js Course

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Slides Student Js Course

Uploaded by

Copyright:

Available Formats

TABLE OF CONTENTS: THEORY LECTURES (CLICK THE TITLES)

1 A Brief Introduction to JavaScript →

03 How JavaScript Works Behind the Scenes

04 JavaScript in the Browser: DOM Manipulation and Events

05 Advanced JavaScript: Objects and Functions

06 Putting It All Together: The Budget App Project

07 Next Generation JavaScript: Intro to ES6 / ES2015

08 Asynchronous JavaScript: Promises, Async/Await and AJAX

09 Modern JavaScript: Using ES6, NPM, Babel and Webpack

• JavaScript is a lightweight, cross-platform, object-oriented computer programming

• JavaScript is one of the three core technologies of web development

• Today, JavaScript can be used in different places:

• Client-side: JavaScript was traditionally only used in the browser

• Server-side: Thanks to node.js, we can use JavaScript on the server as well

• Javascript is what made modern web development possible:

• Dynamic effects and interactivity

• Modern web applications that we can interact with

CONTENT PRESENTATION DYNAMIC EFFECTS/

NOUNS ADJECTIVES VERBS

means “paragraph” means “the paragraph means “hide the

ES5 ES6/ES2015 ES7/ES2016 ES8/ES2017

1. Number: Floating point numbers, for decimals and integers

2. String: Sequence of characters, used for text

3. Boolean: Logical data type that can only be true or false

5. Null: Also means ‘non-existent’

JavaScript has dynamic typing: data types are

TRUE TRUE FALSE • NOT (!) => inverts true/false value

FALSE FALSE FALSE

var age = 16;

TRUE TRUE TRUE

• JavaScript: The language in practice.

• 2009: ES5 (ECMAScript 5) was released with lots of new features.

• 2015: Changed to an annual release cycle 🙏

• 2016/2017/2018/2019/…: Release of ES2016/ES2017/ES2018/ES2019/…

• Fully supported in all browsers;

ES9/ES2018 • Future versions, together called ESNext;

• JavaScript fundamentals • ES6/ES2015 introduction

ES5 • DOM manipulation project

• You will have to understand ES5 today and in the future;

• When working on older codebases, these will be written in ES5;

OUR CODE JAVASCRIPT ENGINE

Execu&on Context Global ExecuMon

lastName === window.lastName

B) Crea&on of the scope chain

Variable Object (VO)

were passed into the func&on.

• Code is scanned for funcMon declaraMons: for each func&on, a

Variable Object (VO)

• Each new funcMon creates a scope: the space/environment, in

• Lexical scoping: a func&on that is lexically within another func&on

Variable Object (VO)

“This” variable (VO: Variable Object)

ExecuMon Context a = ‘Hello’

ExecuMon Context Scope a = ‘Hello’

Global ExecuMon Scope a = ‘Hello’

Variable Object (VO)

• The this keyword is not assigned a value un5l a func5on where it is

• The DOM is used to connect </section>

• How to create our fundamental

• How to generate a random

• How to manipulate the DOM;

• How to read from the DOM;

• How to change CSS styles.