Professional Documents
Culture Documents
LECTURE
WELCOME TO THE COURSE
02 JavaScript Language Basics
LECTURE
SETTING UP OUR TOOLS
SECTION 2 —
JS LANGUAGE BASICS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
SECTION INTRO
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
LET'S START CODING!
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
A BRIEF INTRODUCTION TO JAVASCRIPT
WHAT IS JAVASCRIPT?
• 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
LECTURE
VARIABLES AND DATA TYPES
PRIMITIVE JAVASCRIPT DATA TYPES
4. Undefined: Data type of a variable that does not have a value yet
LECTURE
VARIABLE MUTATION AND TYPE
COERCION
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
BASIC OPERATORS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
OPERATOR PRECEDENCE
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE: SOLUTION
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
IF/ELSE STATEMENTS
SECTION
JAVASCRIPT LANGUAGE BASICS
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
LECTURE
THE TERNARY OPERATOR AND SWITCH
STATEMENTS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
TRUTHY AND FALSY VALUES AND
EQUALITY OPERATORS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE: SOLUTION
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
FUNCTIONS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
FUNCTION STATEMENTS AND
EXPRESSIONS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
ARRAYS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE: SOLUTION
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
OBJECTS AND PROPERTIES
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
OBJECTS AND METHODS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE: SOLUTION
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
LOOPS AND ITERATION
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE: SOLUTION, PART 1
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
CODING CHALLENGE: SOLUTION, PART 2
SECTION
JAVASCRIPT LANGUAGE BASICS
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;
• 2015: ES6/ES2015 (ECMAScript 2015) was released: the biggest update to the language ever!
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
• Many tutorials and code you find online today are still 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
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
HOW OUR CODE IS EXECUTED:
JAVASCRIPT PARSERS AND ENGINES
WHAT HAPPENS TO OUR CODE?
Conversion
Parser to Machine Code Runs
Code
Machine Code
Abstract Syntax Tree
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
EXECUTION CONTEXTS AND THE
EXECUTION STACK
EXECUTION CONTEXTS
THE DEFAULT
ExecuMon Context
second()
ExecuMon Context
first()
Global ExecuMon
Context
EXECUTION STACK
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
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)
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
LECTURE
HOISTING IN PRACTICE
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
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?”
[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
EXECUTION STACK
ExecuMon Context Scope
SCOPE CHAIN
a = ‘Hello’
b = ‘Hi!’
second() first()
Order in which
func&ons are called ≠ Order in which func&ons
are wri<en lexically
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
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.
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
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
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>
</body>
DOM MANIPULATION
JAVASCRIPT DOM
InteracMon/
ManipulaMon
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
5-MINUTE HTML AND CSS CRASH
COURSE
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
PROJECT SETUP AND DETAILS
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
FIRST DOM ACCESS AND MANIPULATION
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
EVENTS AND EVENT HANDLING:
ROLLING THE DICE
WHAT ARE EVENTS?
ExecuMon Context
second()
ExecuMon Context
ExecuMon Context
first()
clickHandler()
LECTURE
UPDATING SCORES AND CHANGING THE
ACTIVE PLAYER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
IMPLEMENTING OUR ‘HOLD’ FUNCTION
AND THE DRY PRINCIPLE
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
CREATING A GAME INITIALIZATION
FUNCTION
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
FINISHING TOUCHES
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
CODING CHALLENGE
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
CODING CHALLENGE: SOLUTION, PART 1
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
CODING CHALLENGE: SOLUTION, PART 2
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
CODING CHALLENGE: SOLUTION, PART 3
SECTION 5 —
ADVANCED
JAVASCRIPT: OBJECTS
AND FUNCTIONS
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
SECTION INTRO
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
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
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
Prototype Prototype
1990
calculateAge() hasOwnProperty()
teacher
isPrototypeOf()
null
Prototype constructor()
toString()
..
.
valueOf()
PROTOTYPE CHAIN
SUMMARY
• 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
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
CREATING OBJECTS: FUNCTION
CONSTRUCTORS
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
THE PROTOTYPE CHAIN IN THE
CONSOLE
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
CREATING OBJECTS: OBJECT.CREATE
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
PRIMITIVES VS. OBJECTS
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
FIRST CLASS FUNCTIONS: PASSING
FUNCTIONS AS ARGUMENTS
FUNCTIONS ARE ALSO OBJECTS IN JAVASCRIPT
FIRST-CLASS FUNCTIONS
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
FIRST CLASS FUNCTIONS: FUNCTIONS
RETURNING FUNCTIONS
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
IMMEDIATELY INVOKED FUNCTION
EXPRESSIONS (IIFE)
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
CLOSURES
CLOSURES
CLOSURES SUMMARY
retirementAge = 66
Global scope
a = ‘ years ...'
yearOfBirth = 1990 retirementAge = 66
age = 26 a = ‘ years ...'
retirementAge = 66
Global ExecuMon a = ‘ years ...’
Scope
yearOfBirth = 1990
Context age = 26 “retirementUS”()
LECTURE
BIND, CALL AND APPLY
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
CODING CHALLENGE
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
CODING CHALLENGE: SOLUTION, PART 1
SECTION
ADVANCED JAVASCRIPT: OBJECTS AND
FUNCTIONS
LECTURE
CODING CHALLENGE: SOLUTION, PART 2
SECTION 6 —
PUTTING IT ALL
TOGETHER: THE
BUDGET APP PROJECT
SECTION
PUTTING IT ALL TOGETHER: THE
BUDGET APP PROJECT
LECTURE
SECTION INTRO
SECTION
PUTTING IT ALL TOGETHER: THE
BUDGET APP PROJECT
LECTURE
PROJECT SETUP AND DETAILS
SECTION
PUTTING IT ALL TOGETHER: THE
BUDGET APP PROJECT
LECTURE
PROJECT PLANNING AND
ARCHITECTURE: STEP 1
NOT SO FAST…
(LET’S THINK TOGETHER)
PLANNING: STEP 1
TO-DO LIST
Calculate budget
Update the UI
STRUCTURING OUR CODE WITH MODULES
MODULES
Calculate budget
Update the UI
SECTION
PUTTING IT ALL TOGETHER: THE
BUDGET APP PROJECT
LECTURE
IMPLEMENTING THE MODULE PATTERN
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
SETTING UP THE FIRST EVENT
LISTENERS
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
READING INPUT DATA
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
CREATING AN INITIALIZATION FUNCTION
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
CREATING INCOME AND EXPENSE
FUNCTION CONSTRUCTORS
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
ADDING A NEW ITEM TO OUR BUDGET
CONTROLLER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
ADDING A NEW ITEM TO THE UI
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
CLEARING OUR INPUT FIELDS
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
UPDATING THE BUDGET: CONTROLLER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
UPDATING THE BUDGET: BUDGET
CONTROLLER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
UPDATING THE BUDGET: UI CONTROLLER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
PROJECT PLANNING AND
ARCHITECTURE: STEP 2
AFTER STEP 1… (THAT WE JUST COMPLETED)
PLANNING: STEP 2
TO-DO LIST
Re-calculate budget
Update the UI
SECTION
PUTTING IT ALL TOGETHER: THE
BUDGET APP PROJECT
LECTURE
EVENT DELEGATION
EVENT BUBBLING, TARGET ELEMENT AND EVENT DELEGATION
<main>
EVENT BUBBLING
<section>
</section>
EVENT DELEGATION
</main>
WHEN TO USE EVENT DELEGATION
LECTURE
SETTING UP THE DELETE EVENT
LISTENER USING EVENT DELEGATION
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
DELETING AN ITEM FROM OUR BUDGET
CONTROLLER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
DELETING AN ITEM FROM THE UI
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
PROJECT PLANNING AND
ARCHITECTURE: STEP 3
AFTER STEP 2… (THAT WE JUST COMPLETED)
PLANNING: STEP 3
TO-DO LIST
Calculate percentages
Update percentages
in UI
Number formadng
LECTURE
UPDATING THE PERCENTAGES:
CONTROLLER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
UPDATING THE PERCENTAGES: BUDGET
CONTROLLER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
UPDATING THE PERCENTAGES: UI
CONTROLLER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
FORMATTING OUR BUDGET NUMBERS:
STRING MANIPULATION
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
DISPLAYING THE CURRENT MONTH AND
YEAR
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
FINISHING TOUCHES: IMPROVING THE UX
WHAT YOU WILL LEARN IN THIS LECTURE
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
NEXT GENERATION JAVASCRIPT: INTRO
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
LECTURE
VARIABLE DECLARATIONS WITH LET
AND CONST
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
BLOCKS AND IIFES
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
STRINGS IN ES6 / ES2015
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
ARROW FUNCTIONS: BASICS
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
ARROW FUNCTIONS: LEXICAL ‘THIS’
KEYWORD
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
DESTRUCTURING
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
ARRAYS IN ES6 / ES2015
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
THE SPREAD OPERATOR
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
REST PARAMETERS
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
DEFAULT PARAMETERS
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
MAPS
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
CLASSES
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
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
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
CODING CHALLENGE
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
TO ES6 / ES2015
LECTURE
CODING CHALLENGE: SOLUTION
SECTION
NEXT GENERATION JAVASCRIPT: INTRO
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
ASYNCHRONOUS JAVASCRIPT:
PROMISES, ASYNC/AWAIT AND AJAX
LECTURE
AN EXAMPLE OF ASYNCHRONOUS
JAVASCRIPT
SECTION
ASYNCHRONOUS JAVASCRIPT:
PROMISES, ASYNC/AWAIT AND AJAX
LECTURE
UNDERSTANDING ASYNCHRONOUS
JAVASCRIPT: THE EVENT LOOP
SYNCHRONOUS VS. ASYNCHRONOUS
SYNCHRONOUS ASYNCHRONOUS
SYNCHRONOUS VS. ASYNCHRONOUS
SYNCHRONOUS ASYNCHRONOUS
Execution Context
timer
first()
callback
EVENT LOOP
SECTION
ASYNCHRONOUS JAVASCRIPT:
PROMISES, ASYNC/AWAIT AND AJAX
LECTURE
THE OLD WAY: ASYNCHRONOUS
JAVASCRIPT WITH CALLBACKS
SECTION
ASYNCHRONOUS JAVASCRIPT:
PROMISES, ASYNC/AWAIT AND AJAX
LECTURE
FROM CALLBACK HELL TO PROMISES
WHAT ARE PROMISES?
PR O M I S E
EVENT HAPPENS
PENDING SETTLED / RESOLVED
FULFILLED REJECTED
SECTION
ASYNCHRONOUS JAVASCRIPT:
PROMISES, ASYNC/AWAIT AND AJAX
LECTURE
FROM PROMISES TO ASYNC/AWAIT
SECTION
ASYNCHRONOUS JAVASCRIPT:
PROMISES, ASYNC/AWAIT AND AJAX
LECTURE
AJAX AND APIS
WHAT ARE AJAX AND APIS?
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
LECTURE
MAKING AJAX CALLS WITH FETCH AND
PROMISES
SECTION
ASYNCHRONOUS JAVASCRIPT:
PROMISES, ASYNC/AWAIT AND AJAX
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
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
PROJECT OVERVIEW
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
AN OVERVIEW OF MODERN JAVASCRIPT
MODERN JAVASCRIPT: A BRIEF OVERVIEW
— Libraries/frameworks
— Development tools ES5 Bundle
LECTURE
A BRIEF INTRODUCTION TO THE
COMMAND LINE
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
A MODERN SETUP: INSTALLING NODE.JS
AND NPM
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
A MODERN SETUP: CONFIGURING
WEBPACK
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
A MODERN SETUP: THE WEBPACK DEV
SERVER
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
A MODERN SETUP: BABEL
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
PLANNING OUR PROJECT
ARCHITECTURE WITH MVC
OUR MODEL-VIEW-CONTROLLER ARCHITECTURE (MVC)
Search.js searchView.js
Recipe.js recipeView.js
CONTROLLER
index.js
List.js listView.js
Likes.js likesView.js
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
HOW ES6 MODULES WORK
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
MAKING OUR FIRST API CALLS
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
BUILDING THE SEARCH MODEL
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
BUILDING THE SEARCH CONTROLLER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
BUILDING THE SEARCH VIEW — PART 1
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
BUILDING THE SEARCH VIEW — PART 2
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
RENDERING AN AJAX LOADING SPINNER
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
IMPLEMENTING SEARCH RESULTS
PAGINATION
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
BUILDING THE RECIPE MODEL — PART 1
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
BUILDING THE RECIPE CONTROLLER
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
BUILDING THE RECIPE MODEL - PART 2
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
BUILDING THE RECIPE VIEW - PART 1
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
BUILDING THE RECIPE VIEW - PART 2
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
UPDATING RECIPE SERVINGS
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
BUILDING THE SHOPPING LIST MODEL
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
BUILDING THE SHOPPING LIST VIEW
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
BUILDING THE SHOPPING LIST
CONTROLLER
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
BUILDING THE LIKES MODEL
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
BUILDING THE LIKES CONTROLLER
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
BUILDING THE LIKES VIEW
SECTION
MODERN JAVASCRIPT: USING ES6, NPM,
BABEL AND WEBPACK
LECTURE
IMPLEMENTING PERSISTENT DATA WITH
LOCALSTORAGE
WHAT YOU WILL LEARN IN THIS LECTURE
LECTURE
WRAPPING UP: FINAL CONSIDERATIONS
MAKE THE PROJECT EVEN BETTER 💪
LECTURE
WHERE TO GO FROM HERE
END