JavaScript – The Complete Guide 2020 (Beginner + Advanced)

JavaScript – The Complete Guide 2020 (Beginner + Advanced)
JavaScript – The Complete Guide 2020 (Beginner + Advanced)

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 45 Hours | 17.2 GB
eLearning | Skill level: All Levels


Modern JavaScript from the beginning – all the way the way up to JS expert level! THE must-have JavaScript resource.

This course is obviously packed with content – I therefore strongly recommend that you check out the full course curriculum to get a clear idea of all the topics covered in the course. In general, here’s what you’ll find in the course:

Modern JavaScript from the start: The JavaScript syntax changed over time – in this course, you’ll learn the latest syntax from the start (you’ll also learn about the old one though, so that you can work in ANY JS project)

ALL the Basics: Variables, constants, functions, how scripts are loaded etc

Arrays & Objects: We’ll explore these very important data structures in great detail

Control Structures: Understand how to run code conditionally and in loops

A look behind the Scenes: How JavaScript engines work behind the scenes and what that means for us

Deep dives into Core Concepts: ALL the special things about JavaScript function, different syntaxes

Working with the DOM: How to manipulate web pages dynamically via JavaScript (including deep dives and different use-cases)

Events in JavaScript: Learn how to listen to a broad variety of events (e.g. drag & drop) and execute appropriate code

Classes & Object-oriented Programming: Learn how to work with classes, prototypes, the “this” keyword, constructor functions and much more

Asynchronous and Synchronous Programming: We’ll explore callbacks, promises, async/ await and other important tools and language features to execute code correctly

Http Requests: Learn how to send Http requests via JavaScript

Tooling, Optimizations & Browser Support: Code splitting, producing small code and ensuring that scripts work in all browsers – this matters and hence is covered in great detail

Libraries & Frameworks: Learn about libraries like Axios or frameworks like React.js – why they matter and how to use them

Node.js: Whilst focusing on the browser-side for the majority of the course (because the syntax is the same), we’ll also have a dedicated section on Node.js to learn all about that JS host environment

Security & Performance Optimizations: Of course security matters, so does performance – no surprise that both is covered in the course!

Automated Testing: Testing manually is hard work and can be unreliable – in this course you’ll also get an introduction into automated testing

What you’ll learn

  • JavaScript from scratch – beginner to advanced
  • All core features and concepts you need to know in modern JavaScript development
  • Everything you need to become a JavaScript expert and apply for JavaScript jobs
  • Project-driven learning with plenty of examples
  • All about variables, functions, objects and arrays
  • Object-oriented programming
  • Deep dives into prototypes, JavaScript engines & how it works behind the scenes
  • Manipulating web pages (= the DOM) with JavaScript
  • Event handling, asynchronous coding and Http requests
  • Meta-programming, performance optimization, memory leak busting
  • Testing, security and deployment
  • And so much more!
+ Table of Contents

Introduction
1 Introduction
2 What is JavaScript?
3 JavaScript in Action!
4 Join our Online Learning Community
5 How JavaScript Is Executed
6 Dynamic vs Weakly Typed Languages
7 JavaScript Runs In A Host Environment
8 Course Outline – What Is In The Course?
9 How To Get The Most Out Of This Course
10 Using Course Resources
11 JavaScript vs Java
12 A Brief History Of JavaScript
13 Setting Up a Development Environment
14 Course FAQs

Basics: Variables, Data Types, Operators & Functions
15 Module Introduction
16 Setting Up the Project
17 More on Version Control & Git
18 Adding JavaScript to the Website
19 Introducing Variables & Constants
20 Declaring & Defining Variables
21 Working with Variables & Operators
22 Understanding the Starting Code
23 Data Types: Numbers & Strings (Text)
24 Using Constants
25 More on Strings
26 Introducing Functions
27 Adding A Custom Function
28 Code Styles, Conventions & Syntax
29 Returning Values
30 The (Un)Importance of Code Order
31 An Introduction to Global & Local Scope
32 “Shadowed Variables”
33 More about the “return” Statement
34 Executing Functions “Indirectly”
35 “Indirect” vs “Direct” Function Execution – Summary
36 Converting Data Types
37 Mixing Numbers & Strings
38 Splitting Code into Functions
39 Connecting all Buttons to Functions
40 Working with Code Comments
41 More Operators!
42 More Core Data Types!
43 Using Arrays
44 Creating Objects
45 Objects – Common Syntax Gotchas
46 Accessing Object Data
47 Adding a Re-Usable Function That Uses Objects
48 undefined, null & NaN
49 The “typeof” Operator
50 Importing Scripts Correctly with “defer” & “async”
51 Importing JavaScript – Summary
52 Wrap Up
53 Useful Resources & Links

Efficient Development & Debugging
54 Module Introduction
55 Efficient Development & Debugging – An Overview
56 Configuring the IDE Look & Feel
57 Using Shortcuts
58 Working with Auto-Completion & IDE Hints
59 Installing IDE Extensions
60 Tweaking Editor Settings
61 Utilizing Different IDE Views
62 Finding Help & Working with MDN
63 The ECMAScript Standard
64 How to “google” Correctly
65 Debugging JavaScript – An Overview
66 An Error Message! No Reason To Panic!
67 Using console.log() to look “into the Code”
68 Next-Level Debugging with the Chrome Devtools & Breakpoints
69 Testing Code Changes Directly in the Devtools
70 Wrap Up
71 Useful Resources & Links

Working with Control Structures (if Statements, Loops, Error Handling)
72 Module Introduction
73 Introducing “if” Statements & Boolean (Comparison) Operators
74 Using Booleans in Conditions & More on Text Comparisons
75 Using “if” Statements
76 Working with “if”, “else” and “else-if”
77 Beware When Comparing Objects & Arrays for Equality!
78 The Logical AND and OR Operators
79 Understanding Operator Precedence
80 Beyond true/ false: “Truthy” and “Falsy” Values
81 Coercion vs Conversion
82 Setting Up a Bigger Example Project (The “Monster Killer”)
83 Adding an “Attack” Function
84 Using “if” Statements for Checking the Win-Condition
85 Adding More “if” Statements & A “Strong Attack” Functionality
86 Time for a “Heal Player” Functionality!
87 Controlling the Conditional Bonus Life (Without Boolean Operators!)
88 Adding a “Reset Game” Functionality
89 Validating User Input
90 Utilizing Global Constants as Identifiers in Conditional Code
91 Adding a Conditional Battle Log
92 Introducing the Ternary Operator
93 A Bit of Theory: Statements vs Expressions
94 Logical Operator “Tricks” & Shorthands
95 Logical Operators – A Quick Summary
96 Working with the “switch-case” Statement
97 Introducing Loops
98 The “for” Loop
99 The “for-of” Loop
100 The “for-in” Loop
101 The “while” & “do-while” Loops
102 Controlling Loops with “break”
103 Controlling Iterations with “continue”
104 More Control with Labeled Statements
105 Error Handling with “try-catch” – An Introduction
106 Throwing Custom Errors
107 Working with “try-catch” to Catch & Handle Errors
108 Wrap Up
109 Useful Resources & Links

Behind the Scenes & The (Weird) Past (ES3, ES5) & Present (ES6+) of JavaScript
110 Module Introduction
111 ES5 vs ES6+ (“Next Gen JS”) – Evolution of JavaScript
112 var vs let & const – Introducing “Block Scope”
113 Understanding “Hoisting”
114 Strict Mode & Writing Good Code
115 How Code is Parsed & Compiled
116 Inside the JavaScript Engine – How the Code Executes
117 [DEEP DIVE] JavaScript Language vs Browser APIs
118 Primitive vs Reference Values
119 Garbage Collection & Memory Management
120 Wrap Up
121 Useful Resources & Links

More on Functions
122 Module Introduction
123 Recapping Functions Knowledge – What We Know Thus Far
124 Parameters vs Arguments
125 Functions vs Methods
126 Functions are Objects!
127 Function Expressions: Storing Functions in Variables
128 Function Expressions vs Function Declarations
129 Anonymous Functions
130 Working on the Project: Adding User Choices to the Game
131 Implementing the Core Game Logic
132 Introducing Arrow Functions
133 Different Arrow Function Syntaxes
134 Outputting Messages to the User
135 Default Arguments in Functions
136 Introducing Rest Parameters (“Rest Operator”)
137 Creating Functions Inside of Functions
138 Understanding Callback Functions
139 Working with “bind()”
140 Adding bind() to the Calculator Project
141 call() and apply()
142 Wrap Up
143 Useful Resources & Links

Working with the DOM (Browser HTML Code) in JavaScript
144 Module Introduction
145 What’s the “DOM”?
146 Document and Window Object
147 Understanding the DOM and how it’s created
148 Nodes & Elements – Querying the DOM Overview
149 Selecting Elements in the DOM
150 Summary: Node Query Methods
151 Exploring and Changing DOM Properties
152 Attributes vs Properties
153 Selecting Multiple Elements & Summary
154 Traversing the DOM – Overview
155 Traversing Child Nodes
156 Using parentNode & parentElement
157 Selecting Sibling Elements
158 DOM Traversal vs Query Methods
159 Styling DOM Elements
160 Creating Elements with JS – Overview
161 Adding Elements via HTML in Code
162 Adding Elements via createElement()
163 Inserting DOM Elements
164 Cloning DOM Nodes
165 Live Node Lists vs Static Node Lists
166 Removing Elements
167 Insertion & Removal Method Summary
168 Summary: Insert, Replace, Remove
169 Setting Up the Practice Project
170 Selecting the Modal and “Add” Button
171 Opening a Modal by Changing CSS Classes
172 Controlling the Backdrop
173 Fetching and Validating User Input
174 Creating a Movie in JavaScript & Clearing the Input
175 Rendering Movie Items on the Screen
176 Deleting Movie Elements
177 Showing & Hiding the “Are you sure?” Dialog
178 Starting with the Confirmation Logic
179 Finishing the App
180 Wrap Up
181 Useful Resources & Links

More on Arrays & Iterables
182 Module Introduction
183 What are “Iterables” and “Array-like Objects”?
184 Creating Arrays
185 Which Data Can You Store In Arrays?
186 push(), pop(), unshift(), shift() – Adding & Removing Elements
187 The splice() Method
188 Selecting Ranges & Creating Copies with slice()
189 Adding Arrays to Arrays with concat()
190 Retrieving Indexes with indexOf() /& lastIndexOf()
191 Finding Stuff: find() and findIndex()
192 Is it Included?
193 Alternative to for Loops: The forEach() Method
194 Transforming Data with map()
195 sort()ing and reverse()ing
196 Filtering Arrays with filter()
197 Where Arrow Functions Shine!
198 The Important reduce() Method
199 Chaining Methods in JavaScript
200 Arrays & Strings – split() and join()
201 The Spread Operator (…)
202 Understanding Array Destructuring
203 Maps & Sets – Overview
204 Working with Sets
205 Working with Maps
206 Maps vs Objects
207 Understanding WeakSet
208 Understanding WeakMap
209 Wrap Up
210 Useful Resources & Links

More on Objects
211 Module Introduction
212 What’s an Object?
213 Objects & Primitive Values
214 Objects – Recap
215 Adding, Modifying & Deleting Properties
216 Special Key Names & Square Bracket Property Access
217 Property Types & Property Order
218 Dynamic Property Access & Setting Properties Dynamically
219 Demo App & Shorthand Property Syntax
220 Rendering Elements based on Objects
221 for-in Loops & Outputting Dynamic Properties
222 Adding the Filter Functionality
223 Understanding “Chaining” (Property & Method Chaining)
224 The Object Spread Operator (…)
225 Understanding Object.assign()
226 Object Destructuring
227 Checking for Property Existance
228 Introducing “this”
229 The Method Shorthand Syntax
230 The “this” Keyword And Its Strange Behavior
231 call() and apply()
232 What the Browser (Sometimes) Does to “this”
233 “this” and Arrow Functions
234 “this” – Summary
235 Getters & Setters
236 Wrap Up
237 Useful Resources & Links

Classes & Object-oriented Programming (OOP)
238 Module Introduction
239 What is “Object-oriented Programming” (OOP)?
240 Getting Started with OOP Code
241 Defining & Using a First Class
242 Working with Constructor Methods
243 Fields vs Properties
244 Using & “Connecting” Multiple Classes
245 Binding Class Methods & Working with “this”
246 Adding a Cart and Shop Class
247 Communicating Can Be Challenging!
248 Static Methods & Properties
249 First Summary & Classes vs Object Literals
250 Getters & Setters
251 Introducing Inheritance
252 Implementing Inheritance
253 Using Inheritance Everywhere
254 Overriding Methods and the super() Constructor
255 super() Constructor Execution, Order & “this”
256 Different Ways of Adding Methods
257 Private Properties
258 “Pseudo-Private” Properties
259 The “instanceof” Operator
260 Built-in Classes
261 Understanding Object Descriptors
262 Wrap Up
263 Useful Resources & Links

Deep Dive: Constructor Functions & Prototypes
264 Module Introduction
265 Introducing Constructor Functions
266 Constructor Functions vs Classes & Understanding “new”
267 Introducing Prototypes
268 Prototypes – Summary
269 Working with Prototypes
270 The Prototype Chain and the Global “Object”
271 Classes & Prototypes
272 Methods in Classes & In Constructors
273 Built-in Prototypes in JavaScript
274 Setting & Getting Prototypes
275 Wrap Up
276 Useful Resources & Links

Practice: OOP & Classes
277 Module Introduction
278 First Project Steps & Planning
279 Creating Project Lists & Parsing Element Data
280 Starting with the “Switch Project” Logic
281 Passing Method References Around
282 Moving DOM Elements
283 Adding a Tooltip
284 Adding Inheritance
285 Wrap Up
286 Useful Resources & Links

Back to the DOM & More Browser APIs
287 Module Introduction
288 Using “dataset” (data-* Attributes)
289 Getting Element Box Dimensions
290 Working with Element Sizes & Positions
291 The DOM & Prototypes
292 Positioning the Tooltip
293 Handling Scrolling
294 Working with Tags
295 Loading Scripts Dynamically
296 Setting Timers & Intervals
297 The “location” and “history” Objects
298 The “navigator” Object
299 Working with Dates
300 The “Error” Object & Constructor Function
301 Wrap Up
302 Useful Resources & Links

Working with Events
303 Module Introduction
304 Introduction to Events in JavaScript
305 Different Ways of Listening to Events
306 Removing Event Listeners
307 The “event” Object
308 Supported Event Types
309 Example: Basic Infinite Scrolling
310 Working with “preventDefault()”
311 Understanding “Capturing” & “Bubbling” Phases
312 Event Propagation & “stopPropagation()”
313 Using Event Delegation
314 Triggering DOM Elements Programmatically
315 Event Handler Functions & “this”
316 Drag & Drop – Theory
317 Configuring Draggable Elements
318 Marking the “Drop Area”
319 Dropping & Moving Data + Elements
320 Wrap Up
321 Useful Resources & Links

Advanced Function Concepts
322 Module Introduction
323 Pure Functions & Side-Effects
324 Impure vs Pure Functions
325 Factory Functions
326 Closures
327 Closures in Practice
328 Closures & Memory Management
329 Optional: IIFEs
330 Introducing “Recursion”
331 Advanced Recursion
332 Wrap Up
333 Useful Resources & Links

More on Numbers & Strings
334 Module Introduction
335 How Numbers Work & Behave in JavaScript
336 Floating Point (Im)Precision
337 The BigInt Type
338 The Global “Number” and “Math” Objects
339 Example: Generate Random Number Between Min/ Max
340 Exploring String Methods
341 Tagged Templates
342 Introducing Regular Expressions (“RegEx”)
343 More on Regular Expressions
344 Wrap Up
345 Useful Resources & Links

Async JavaScript: Promises & Callbacks
346 Module Introduction
347 Understanding Synchronous Code Execution (“Sync Code”)
348 Understanding Asynchronous Code Execution (“Async Code”)
349 Blocking Code & The “Event Loop”
350 Sync + Async Code – The Execution Order
351 Multiple Callbacks & setTimeout(0)
352 Getting Started with Promises
353 Chaining Multiple Promises
354 Promise Error Handling
355 Promise States & “finally”
356 Async/ await
357 Async/ await & Error Handling
358 Async/ await vs “Raw Promises”
359 Promise.all(), Promise.race() etc.
360 Wrap Up
361 Useful Resources & Links

Working with Http Requests
362 Module Introduction
363 What & Why
364 How The Web Works
365 More Background about Http
366 Getting Started with Http
367 Sending a GET Request
368 JSON Data & Parsing Data
369 JSON Data Deep Dive
370 Promisifying Http Requests (with XMLHttpRequest)
371 Sending Data with a POST Request
372 Triggering Requests via the UI
373 The “Fetch” Button Always Appends
374 Sending a DELETE Request
375 Handling Errors
376 Using the fetch() API
377 POSTing Data with the fetch() API
378 Adding Request Headers
379 fetch() & Error Handling
380 XMLHttpRequest vs fetch()
381 Working with FormData
382 Wrap Up
383 Useful Resources & Links

Working with JavaScript Libraries
384 Module Introduction
385 What & Why
386 Adding Libraries (Example: lodash)
387 Example: jQuery
388 Discovering Libraries
389 Axios Library & Http Requests
390 Third-Party Library Considerations
391 Wrap Up
392 Useful Resources & Links

Modular JavaScript (Working with Modules)
393 Module Introduction
394 Splitting Code in a Sub-optimal Way
395 A First Step Towards JavaScript Modules
396 We Need a Development Server!
397 First import / export Work
398 Switching All Files To Use Modules
399 More Named Export Syntax Variations
400 Working With Default Exports
401 Dynamic Imports & Code Splitting
402 When Does Module Code Execute?
403 Module Scope & globalThis
404 Wrap Up
405 Useful Resources & Links

JavaScript Tooling & Workflows
406 Module Introduction
407 Project Limitations & Why We Need Tools
408 Workflow Overview
409 Setting Up a npm Project
410 Working with npm Packages
411 Linting with ESLint
412 Configuring ESLint
413 Bundling with Webpack
414 Bonus: Multiple Entry Points
415 Development Mode & Fixing “Lazy Loading”
416 Using webpack-dev-server
417 Generating Sourcemaps
418 Building For Production
419 Final Optimizations
420 Using Third Party Packages with npm & Webpack
421 Wrap Up
422 Useful Resources & Links

Utilizing Browser Storage
423 Module Introduction
424 Browser Storage Options
425 localStorage & sessionStorage
426 Getting Started with Cookies
427 Working with Cookies
428 Getting Started with IndexedDB
429 Working with IndexedDB
430 Wrap Up
431 Useful Resources & Links

JavaScript & Browser Support
432 Module Introduction
433 What Is “Browser Support” About?
434 Determining Browser Support For A JavaScript Feature
435 Determining Required Support
436 Solution: Feature Detection + Fallback Code
437 Solution: Using Polyfills
438 Solution: Transpiling Code
439 Improvement: Automatically Detect + Add Polyfills
440 What about Support Outside of Browsers?
441 Browser Support Outside of JavaScript Files
442 Wrap Up
443 Useful Resources & Links

Time to Practice: Share My Place App
444 Module Introduction
445 Setting Up the Project
446 Getting DOM Access
447 Getting the User Location
448 Adding Feedback (Showing a Modal)
449 Hiding the Modal
450 Rendering a Map with Google Maps
451 Finding an Address & Getting the Coordinates
452 Converting User Input to Coordinates
453 Creating a “Share Place” Link
454 Copying the Link to the Clipboard
455 Rendering the “Shared Place” Screen
456 Useful Resources & Links

Working with JavaScript Frameworks
457 Module Introduction
458 What and Why?
459 The Idea Behind React.js
460 Analysing a React Project
461 Wrap Up
462 Useful Resources & Links

Meta-Programming: Symbols, Iterators, Generators, Reflect API & Proxy API
463 Module Introduction
464 Understanding Symbols
465 Well-known Symbols
466 Understanding Iterators
467 Generators & Iterable Objects
468 Generators Summary & Built-in Iterables Examples
469 The Reflect API
470 The Proxy API and a First “Trap”
471 Working with Proxy Traps
472 Wrap Up
473 Useful Resources & Links

Node.js: An Introduction
474 Module Introduction
475 JavaScript is a Hosted Language
476 Installation & Basics
477 Understanding Modules & File Access
478 Working with Incoming Http Requests
479 Sending Responses (HTML Data)
480 Parsing Incoming Data
481 Introducing & Installing Express.js
482 Express.js: The Basics
483 Extracting Data
484 Rendering Server-side HTML with Templates & EJS
485 Enhancing Our Project
486 Adding Basic REST Routes
487 Understanding CORS (Cross Origin Resource Sharing)
488 Sending the Location ID to the Frontend
489 Adding the GET Location Route
490 Introducing MongoDB (Database)
491 NodeJS Error Handling
492 Wrap Up
493 Useful Resources & Links

Security
494 Module Introduction
495 Security Hole Overview & Exposing Data in your Code
496 Cross-Site Scripting Attacks (XSS)
497 Third-Party Libraries & XSS
498 CSRF Attacks (Cross Site Request Forgery)
499 CORS (Cross Origin Resource Sharing)
500 Wrap Up
501 Useful Resources & Links

Deploying JavaScript Code
502 Module Introduction
503 Deployment Steps
504 Different Types of Websites
505 Example: Static Host Deployment (no Server-side Code)
506 Injecting Script Imports Into HTML Automatically
507 Example: Dynamic Page Deployment (with Server-side Code)
508 Useful Resources & Links

Performance & Optimizations
509 Module Introduction
510 What is “Performance Optimization” About?
511 Optimization Potentials
512 Measuring Performance
513 Diving Into The Browser Devtools (for Performance Measuring)
514 Further Resources
515 Preparing The Testing Setup
516 Optimizing Startup Time & Code Usage / Coverage
517 Updating The DOM Correctly
518 Updating Lists Correctly
519 Optimizing The Small Things
520 Micro-Optimizations (Think Twice!)
521 Finding & Fixing Memory Leaks
522 Server-side Performance Optimizations
523 Wrap Up
524 Useful Resources & Links

Introduction to Testing
525 Module Introduction
526 What Is Testing? Why Does It Matter?
527 Testing Setup
528 Writing & Running Unit Tests
529 Writing & Running Integration Tests
530 Writing & Running e2e Tests
531 Dealing with Async Code
532 Working with Mocks
533 Useful Resources & Links

Roundup & Next Steps
534 Congratulations!
535 Bonus! (Next Steps Overview / Other Topics)