<< back   Maximilian Schwarzmüller Javascript lecture

• 01 - Introduction
• 02 - Basics Variables, Data Types, Operators & Functions
• 03 - Efficient Development & Debugging
• 04 - Working with Control Structures (if Statements, Loops, Error Handling)
• 05 - Behind the Scenes & The (Weird) Past (ES3, ES5) & Present (ES6+) of JavaScript
• 06 - More on Functions
• 07 - Working with the DOM (Browser HTML Code) in JavaScript
• 08 - More on Arrays & Iterables
• 09 - More on Objects
• 10 - Classes & Object-oriented Programming (OOP)
• 11 - Deep Dive Constructor Functions & Prototypes
• 12 - Practice OOP & Classes
• 13 - Back to the DOM & More Browser APIs
• 14 - Working with Events
• 15 - Advanced Function Concepts
• 16 - More on Numbers & Strings
• 17 - Async JavaScript Promises & Callbacks
• 18 - Working with Http Requests
• 19 - Working with JavaScript Libraries
• 20 - Modular JavaScript (Working with Modules)
• 21 - JavaScript Tooling & Workflows
• 22 - Utilizing Browser Storage
• 23 - JavaScript & Browser Support
• 24 - Time to Practice Share My Place App
• 25 - Working with JavaScript Frameworks
• 26 - Meta-Programming Symbols, Iterators, Generators, Reflect API & Proxy API
• 27 - Node.js An Introduction
• 28 - Security
• 29 - Deploying JavaScript Code
• 30 - Performance & Optimizations
• 31 - Introduction to Testing
• 32 - Bonus Programming Paradigms (Procedural vs Object Oriented vs Functional)
• 33 - Bonus Data Structures & Algorithms Introduction
• 34 - Bonus TypeScript Introduction
• 35 - Bonus Web Components
• 36 - Roundup & Next Steps

• 01 - Introduction

• 001 Introduction
• 002 What is JavaScript
• 003 JavaScript in Action!
• 005 How JavaScript Is Executed
• 006 Dynamic vs Weakly Typed Languages
• 007 JavaScript Executes In A Hosted Environment
• 008 Course Outline - What's In This Course
• 009 How To Get The Most Out Of This Course
• 011 JavaScript vs Java
• 012 A Brief History Of JavaScript
• 013 Setting Up a Development Environment


• 02 - Basics Variables, Data Types, Operators & Functions

• 001 Module Introduction
• 002 Setting Up the Project
• 004 Adding JavaScript to the Website
• 005 Introducing Variables & Constants
• 006 Declaring & Defining Variables
• 007 Working with Variables & Operators
• 008 Understanding the Starting Code
• 009 Data Types Numbers & Strings (Text)
• 010 Using Constants
• 011 More on Strings
• 012 Introducing Functions
• 013 Adding A Custom Function
• 015 Returning Values
• 016 The (Un)Importance of Code Order
• 017 An Introduction to Global & Local Scope
• 019 More about the return Statement
• 020 Executing Functions Indirectly
• 022 Converting Data Types
• 024 Splitting Code into Functions
• 025 Connecting all Buttons to Functions
• 026 Working with Code Comments
• 027 More Operators!
• 028 More Core Data Types!
• 029 Using Arrays
• 030 Creating Objects
• 032 Accessing Object Data
• 033 Adding a Re-Usable Function That Uses Objects
• 034 undefined, null & NaN
• 035 The typeof Operator
• 036 Importing Scripts Correctly with defer & async
• 038 Wrap Up


• 03 - Efficient Development & Debugging

• 001 Module Introduction
• 002 Efficient Development & Debugging - An Overview
• 003 Configuring the IDE Look & Feel
• 004 Using Shortcuts
• 005 Working with Auto-Completion & IDE Hints
• 006 Installing IDE Extensions
• 007 Tweaking Editor Settings
• 008 Utilizing Different IDE Views
• 009 Finding Help & Working with MDN
• 011 How to google Correctly
• 012 Debugging JavaScript - An Overview
• 013 An Error Message! No Reason To Panic!
• 014 Using console.log() to look into the Code
• 015 Next-Level Debugging with the Chrome Devtools & Breakpoints
• 016 Testing Code Changes Directly in the Devtools
• 017 Debugging Code directly Inside VS Code
• 018 Wrap Up


• 04 - Working with Control Structures (if Statements, Loops, Error Handling)

• 001 Module Introduction
• 002 Introducing if Statements & Boolean (Comparison) Operators
• 004 Using if Statements
• 005 Working with if, else and else-if
• 006 Beware When Comparing Objects & Arrays for Equality!
• 007 The Logical AND and OR Operators
• 008 Understanding Operator Precedence
• 009 Beyond true false Truthy and Falsy Values
• 011 Setting Up a Bigger Example Project (The Monster Killer)
• 012 Adding an Attack Function
• 013 Using if Statements for Checking the Win-Condition
• 014 Adding More if Statements & A Strong Attack Functionality
• 015 Time for a Heal Player Functionality!
• 016 Controlling the Conditional Bonus Life (Without Boolean Operators!)
• 017 Adding a Reset Game Functionality
• 018 Validating User Input
• 019 Utilizing Global Constants as Identifiers in Conditional Code
• 020 Adding a Conditional Battle Log
• 021 Introducing the Ternary Operator
• 022 A Bit of Theory Statements vs Expressions
• 023 Logical Operator Tricks & Shorthands
• 025 Working with the switch-case Statement
• 026 Introducing Loops
• 027 The for Loop
• 028 The for-of Loop
• 029 The for-in Loop
• 030 The while & do-while Loops
• 031 Controlling Loops with break
• 032 Controlling Iterations with continue
• 033 More Control with Labeled Statements
• 034 Error Handling with try-catch - An Introduction
• 035 Throwing Custom Errors
• 036 Working with try-catch to Catch & Handle Errors
• 037 Wrap Up


• 05 - Behind the Scenes & The (Weird) Past (ES3, ES5) & Present (ES6+) of JavaScript

• 001 Module Introduction
• 002 ES5 vs ES6+ (Next Gen JS) - Evolution of JavaScript
• 003 var vs let & const - Introducing Block Scope
• 004 Understanding Hoisting
• 005 Strict Mode & Writing Good Code
• 006 How Code is Parsed & Compiled
• 007 Inside the JavaScript Engine - How the Code Executes
• 009 Primitive vs Reference Values
• 010 Garbage Collection & Memory Management
• 011 Wrap Up


• 06 - More on Functions

• 001 Module Introduction
• 002 Recapping Functions Knowledge - What We Know Thus Far
• 004 Functions vs Methods
• 005 Functions are Objects!
• 006 Function Expressions Storing Functions in Variables
• 007 Function Expressions vs Function Declarations
• 008 Anonymous Functions
• 009 Working on the Project Adding User Choices to the Game
• 010 Implementing the Core Game Logic
• 011 Introducing Arrow Functions
• 013 Outputting Messages to the User
• 014 Default Arguments in Functions
• 015 Introducing Rest Parameters (Rest Operator)
• 016 Creating Functions Inside of Functions
• 017 Understanding Callback Functions
• 018 Working with bind()
• 019 Adding bind() to the Calculator Project
• 020 call() and apply()
• 021 Wrap Up


• 07 - Working with the DOM (Browser HTML Code) in JavaScript

• 001 Module Introduction
• 002 What's the DOM
• 003 Document and Window Object
• 004 Understanding the DOM and how it's created
• 005 Nodes & Elements - Querying the DOM Overview
• 006 Selecting Elements in the DOM
• 008 Exploring and Changing DOM Properties
• 009 Attributes vs Properties
• 010 Selecting Multiple Elements & Summary
• 011 Traversing the DOM - Overview
• 012 Traversing Child Nodes
• 013 Using parentNode & parentElement
• 014 Selecting Sibling Elements
• 015 DOM Traversal vs Query Methods
• 016 Styling DOM Elements
• 017 Creating Elements with JS - Overview
• 018 Adding Elements via HTML in Code
• 019 Adding Elements via createElement()
• 020 Inserting DOM Elements
• 021 Cloning DOM Nodes
• 022 Live Node Lists vs Static Node Lists
• 023 Removing Elements
• 024 Insertion & Removal Method Summary
• 026 Setting Up the Practice Project
• 027 Selecting the Modal and Add Button
• 028 Opening a Modal by Changing CSS Classes
• 029 Controlling the Backdrop
• 030 Fetching and Validating User Input
• 031 Creating a Movie in JavaScript & Clearing the Input
• 032 Rendering Movie Items on the Screen
• 033 Deleting Movie Elements
• 034 Showing & Hiding the Are you sure Dialog
• 035 Starting with the Confirmation Logic
• 036 Finishing the App
• 037 Wrap Up


• 08 - More on Arrays & Iterables

• 001 Module Introduction
• 002 What are Iterables and Array-like Objects
• 003 Creating Arrays
• 004 Which Data Can You Store In Arrays
• 005 push(), pop(), unshift(), shift() - Adding & Removing Elements
• 006 The splice() Method
• 007 Selecting Ranges & Creating Copies with slice()
• 008 Adding Arrays to Arrays with concat()
• 009 Retrieving Indexes with indexOf() & lastIndexOf()
• 010 Finding Stuff find() and findIndex()
• 011 Is it Included
• 012 Alternative to for Loops The forEach() Method
• 013 Transforming Data with map()
• 014 sort()ing and reverse()ing
• 015 Filtering Arrays with filter()
• 016 Where Arrow Functions Shine!
• 017 The Important reduce() Method
• 019 Arrays & Strings - split() and join()
• 020 The Spread Operator (...)
• 021 Understanding Array Destructuring
• 022 Maps & Sets - Overview
• 023 Working with Sets
• 024 Working with Maps
• 025 Maps vs Objects
• 026 Understanding WeakSet
• 027 Understanding WeakMap
• 028 Wrap Up


• 09 - More on Objects

• 001 Module Introduction
• 002 What's an Object
• 004 Objects - Recap
• 005 Adding, Modifying & Deleting Properties
• 006 Special Key Names & Square Bracket Property Access
• 007 Property Types & Property Order
• 008 Dynamic Property Access & Setting Properties Dynamically
• 009 Demo App & Shorthand Property Syntax
• 010 Rendering Elements based on Objects
• 011 for-in Loops & Outputting Dynamic Properties
• 012 Adding the Filter Functionality
• 013 Understanding Chaining (Property & Method Chaining)
• 014 The Object Spread Operator (...)
• 015 Understanding Object.assign()
• 016 Object Destructuring
• 017 Checking for Property Existance
• 018 Introducing this
• 019 The Method Shorthand Syntax
• 020 The this Keyword And Its Strange Behavior
• 021 call() and apply()
• 022 What the Browser (Sometimes) Does to this
• 023 this and Arrow Functions
• 025 Getters & Setters
• 026 Wrap Up


• 10 - Classes & Object-oriented Programming (OOP)

• 001 Module Introduction
• 002 What is Object-oriented Programming (OOP)
• 003 Getting Started with OOP Code
• 004 Defining & Using a First Class
• 005 Working with Constructor Methods
• 006 Fields vs Properties
• 007 Using & Connecting Multiple Classes
• 008 Binding Class Methods & Working with this
• 009 Adding a Cart and Shop Class
• 010 Communicating Can Be Challenging!
• 011 Static Methods & Properties
• 012 First Summary & Classes vs Object Literals
• 013 Getters & Setters
• 014 Introducing Inheritance
• 015 Implementing Inheritance
• 016 Using Inheritance Everywhere
• 017 Overriding Methods and the super() Constructor
• 018 super() Constructor Execution, Order & this
• 019 Different Ways of Adding Methods
• 020 Private Properties
• 022 The instanceof Operator
• 023 Built-in Classes
• 024 Understanding Object Descriptors
• 025 Wrap Up


• 11 - Deep Dive Constructor Functions & Prototypes

• 001 Module Introduction
• 002 Introducing Constructor Functions
• 003 Constructor Functions vs Classes & Understanding new
• 004 Introducing Prototypes
• 006 Working with Prototypes
• 007 The Prototype Chain and the Global Object
• 008 Classes & Prototypes
• 009 Methods in Classes & In Constructors
• 010 Built-in Prototypes in JavaScript
• 011 Setting & Getting Prototypes
• 012 Wrap Up


• 12 - Practice OOP & Classes

• 001 Module Introduction
• 002 First Project Steps & Planning
• 003 Creating Project Lists & Parsing Element Data
• 004 Starting with the Switch Project Logic
• 005 Passing Method References Around
• 006 Moving DOM Elements
• 007 Adding a Tooltip
• 008 Adding Inheritance
• 009 Wrap Up


• 13 - Back to the DOM & More Browser APIs

• 001 Module Introduction
• 002 Using dataset (data- Attributes)
• 003 Getting Element Box Dimensions
• 004 Working with Element Sizes & Positions
• 005 The DOM & Prototypes
• 006 Positioning the Tooltip
• 007 Handling Scrolling
• 008 Working with template Tags
• 009 Loading Scripts Dynamically
• 010 Setting Timers & Intervals
• 011 The location and history Objects
• 012 The navigator Object
• 013 Working with Dates
• 014 The Error Object & Constructor Function
• 015 Wrap Up


• 14 - Working with Events

• 001 Module Introduction
• 002 Introduction to Events in JavaScript
• 003 Different Ways of Listening to Events
• 004 Removing Event Listeners
• 005 The event Object
• 006 Supported Event Types
• 008 Working with preventDefault()
• 009 Understanding Capturing & Bubbling Phases
• 010 Event Propagation & stopPropagation()
• 011 Using Event Delegation
• 012 Triggering DOM Elements Programmatically
• 013 Event Handler Functions & this
• 014 Drag & Drop - Theory
• 015 Configuring Draggable Elements
• 016 Marking the Drop Area
• 017 Dropping & Moving Data + Elements
• 019 Wrap Up


• 15 - Advanced Function Concepts

• 001 Module Introduction
• 002 Pure Functions & Side-Effects
• 003 Impure vs Pure Functions
• 004 Factory Functions
• 005 Closures
• 006 Closures in Practice
• 007 Closures & Memory Management
• 009 Introducing Recursion
• 010 Advanced Recursion
• 011 Wrap Up
• 001 Module Introduction
• 002 How Numbers Work & Behave in JavaScript
• 003 Floating Point (Im)Precision
• 004 The BigInt Type
• 005 The Global Number and Math Objects
• 006 Example Generate Random Number Between Min Max
• 007 Exploring String Methods
• 008 Tagged Templates
• 009 Introducing Regular Expressions (RegEx)
• 010 More on Regular Expressions
• 011 Wrap Up


• 16 - More on Numbers & Strings

• 001 Module Introduction
• 002 How Numbers Work & Behave in JavaScript
• 003 Floating Point (Im)Precision
• 004 The BigInt Type
• 005 The Global Number and Math Objects
• 006 Example Generate Random Number Between Min Max
• 007 Exploring String Methods
• 008 Tagged Templates
• 009 Introducing Regular Expressions (RegEx)
• 010 More on Regular Expressions
• 011 Wrap Up


• 17 - Async JavaScript Promises & Callbacks

• 001 Module Introduction
• 002 Understanding Synchronous Code Execution (Sync Code)
• 003 Understanding Asynchronous Code Execution (Async Code)
• 004 Blocking Code & The Event Loop
• 005 Sync + Async Code - The Execution Order
• 006 Multiple Callbacks & setTimeout(0)
• 007 Getting Started with Promises
• 008 Chaining Multiple Promises
• 009 Promise Error Handling
• 011 Async await
• 012 Async await & Error Handling
• 013 Async await vs Raw Promises
• 014 Promise.all(), Promise.race() etc
• 015 Wrap Up


• 18 - Working with Http Requests

• 001 Module Introduction
• 002 What & Why
• 004 More Background about Http
• 005 Getting Started with Http
• 006 Sending a GET Request
• 007 JSON Data & Parsing Data
• 009 Promisifying Http Requests (with XMLHttpRequest)
• 010 Sending Data with a POST Request
• 011 Triggering Requests via the UI
• 013 Sending a DELETE Request
• 014 Handling Errors
• 015 Using the fetch() API
• 016 POSTing Data with the fetch() API
• 017 Adding Request Headers
• 018 fetch() & Error Handling
• 019 XMLHttpRequest vs fetch()
• 020 Working with FormData
• 021 Wrap Up


• 19 - Working with JavaScript Libraries

• 001 Module Introduction
• 002 What & Why
• 003 Adding Libraries (Example lodash)
• 004 Example jQuery
• 005 Discovering Libraries
• 006 Axios Library & Http Requests
• 007 Third-Party Library Considerations
• 008 Wrap Up


• 20 - Modular JavaScript (Working with Modules)

• 001 Module Introduction
• 002 Splitting Code in a Sub-optimal Way
• 003 A First Step Towards JavaScript Modules
• 004 We Need a Development Server!
• 005 First import export Work
• 006 Switching All Files To Use Modules
• 007 More Named Export Syntax Variations
• 008 Working With Default Exports
• 009 Dynamic Imports & Code Splitting
• 010 When Does Module Code Execute
• 011 Module Scope & globalThis
• 012 Wrap Up


• 21 - JavaScript Tooling & Workflows

• 001 Module Introduction
• 002 Project Limitations & Why We Need Tools
• 003 Workflow Overview
• 004 Setting Up a npm Project
• 005 Working with npm Packages
• 006 Linting with ESLint
• 009 Bundling with Webpack
• 011 Development Mode & Fixing Lazy Loading
• 012 Using webpack-dev-server
• 013 Generating Sourcemaps
• 014 Building For Production
• 015 Final Optimizations
• 016 Using Third Party Packages with npm & Webpack
• 017 Wrap Up


• 22 - Utilizing Browser Storage

• 001 Module Introduction
• 002 Browser Storage Options
• 003 localStorage & sessionStorage
• 004 Getting Started with Cookies
• 005 Working with Cookies
• 006 Getting Started with IndexedDB
• 007 Working with IndexedDB
• 008 Wrap Up


• 23 - JavaScript & Browser Support

• 001 Module Introduction
• 002 What Is Browser Support About
• 003 Determining Browser Support For A JavaScript Feature
• 004 Determining Required Support
• 005 Solution Feature Detection + Fallback Code
• 006 Solution Using Polyfills
• 007 Solution Transpiling Code
• 008 Improvement Automatically Detect + Add Polyfills
• 009 What about Support Outside of Browsers
• 010 Browser Support Outside of JavaScript Files
• 011 Wrap Up


• 24 - Time to Practice Share My Place App

• 001 Module Introduction
• 003 Setting Up the Project
• 004 Getting DOM Access
• 005 Getting the User Location
• 006 Adding Feedback (Showing a Modal)
• 007 Hiding the Modal
• 008 Rendering a Map with Google Maps
• 010 Finding an Address & Getting the Coordinates
• 011 Converting User Input to Coordinates
• 012 Creating a Share Place Link
• 013 Copying the Link to the Clipboard
• 014 Rendering the Shared Place Screen


• 25 - Working with JavaScript Frameworks

• 001 Module Introduction
• 002 What and Why
• 003 The Idea Behind React.js
• 004 Analysing a React Project
• 005 Wrap Up


• 26 - Meta-Programming Symbols, Iterators, Generators, Reflect API & Proxy API

• 001 Module Introduction
• 002 Understanding Symbols
• 003 Well-known Symbols
• 004 Understanding Iterators
• 005 Generators & Iterable Objects
• 006 Generators Summary & Built-in Iterables Examples
• 007 The Reflect API
• 008 The Proxy API and a First Trap
• 009 Working with Proxy Traps
• 010 Wrap Up


• 27 - Node.js An Introduction

• 001 Module Introduction
• 002 JavaScript is a Hosted Language
• 003 Installation & Basics
• 004 Understanding Modules & File Access
• 005 Working with Incoming Http Requests
• 006 Sending Responses (HTML Data)
• 007 Parsing Incoming Data
• 008 Introducing & Installing Express.js
• 009 Express.js The Basics
• 010 Extracting Data
• 011 Rendering Server-side HTML with Templates & EJS
• 012 Enhancing Our Project
• 013 Adding Basic REST Routes
• 014 Understanding CORS (Cross Origin Resource Sharing)
• 015 Sending the Location ID to the Frontend
• 016 Adding the GET Location Route
• 017 Introducing MongoDB (Database)
• 019 Wrap Up


• 28 - Security

• 001 Module Introduction
• 002 Security Hole Overview & Exposing Data in your Code
• 003 Cross-Site Scripting Attacks (XSS)
• 004 Third-Party Libraries & XSS
• 005 CSRF Attacks (Cross Site Request Forgery)
• 006 CORS (Cross Origin Resource Sharing)
• 007 Wrap Up


• 29 - Deploying JavaScript Code

• 001 Module Introduction
• 002 Deployment Steps
• 004 Example Static Host Deployment (no Server-side Code)
• 006 Example Dynamic Page Deployment (with Server-side Code)


• 30 - Performance & Optimizations

• 001 Module Introduction
• 002 What is Performance Optimization About
• 003 Optimization Potentials
• 004 Measuring Performance
• 005 Diving Into The Browser Devtools (for Performance Measuring)
• 006 Further Resources
• 007 Preparing The Testing Setup
• 008 Optimizing Startup Time & Code Usage Coverage
• 009 Updating The DOM Correctly
• 010 Updating Lists Correctly
• 011 Optimizing The Small Things
• 012 Micro-Optimizations (Think Twice!)
• 013 Finding & Fixing Memory Leaks
• 015 Wrap Up


• 31 - Introduction to Testing

• 001 Module Introduction
• 002 What Is Testing Why Does It Matter
• 003 Testing Setup
• 004 Writing & Running Unit Tests
• 005 Writing & Running Integration Tests
• 006 Writing & Running e2e Tests
• 007 Dealing with Async Code
• 008 Working with Mocks


• 32 - Bonus Programming Paradigms (Procedural vs Object Oriented vs Functional)

• 001 Module Introduction
• 002 What are Programming Paradigms
• 003 Procedural Programming in Practice
• 004 Object Oriented Programming in Practice
• 005 Functional Programming in Practice
• 006 Wrap Up


• 33 - Bonus Data Structures & Algorithms Introduction

• 001 Module Introduction
• 002 What are Data Structures & Algorithms
• 003 A First Example
• 004 Solving the Same Problem Differently
• 005 Performance & The Big O Notation
• 006 More Time Complexities & Comparing Algorithms
• 007 More on Big O
• 008 More Examples
• 009 Diving into Data Structures & Time Complexities
• 010 Where to Learn More & Wrap Up


• 34 - Bonus TypeScript Introduction

• 001 Module Introduction
• 002 What is TypeScript and Why would you use it
• 003 Working with Types
• 004 Core Types & Diving Deeper
• 005 Object Types, Array Types & Function Types
• 006 Advanced Types (Literal Types, Union Types, Enums)
• 007 Classes & Interfaces
• 008 Generic Types
• 009 Configuring the TypeScript Compiler


• 35 - Bonus Web Components

• 001 Module Introduction
• 002 Web Components in Action
• 003 What are Web Components
• 004 Why Web Components
• 005 Getting Started!
• 006 Web Component Browser Support
• 007 Our Development Setup
• 008 A First Custom Element
• 009 Interacting with the Surrounding DOM
• 010 Understanding the Custom Element Lifecycle
• 011 Using connectedCallback for DOM Access
• 012 Listening to Events Inside the Component
• 013 Using Attributes on Custom Elements
• 014 Styling our Elements
• 015 Working with the Shadow DOM
• 016 Adding an HTML Template
• 017 Using Slots
• 018 Defining the Template in JavaScript
• 019 Using Style Tags in the Shadow DOM
• 020 Extending Built-in Elements
• 021 The Next Steps
• 022 Understanding Shadow DOM Projection
• 023 Styling slot Content Outside of the Shadow DOM
• 024 Styling slot Content Inside of the Shadow DOM
• 025 Styling the Host Component
• 026 Conditional Host Styling
• 027 Styling with the Host Content in Mind
• 028 Smart Dynamic Styling with CSS Variables
• 029 Cleaning Up the Overall Styling
• 030 Observing Attribute Changes
• 031 Adjusting the Component Behavior Upon Attribute Changes
• 032 Using disconnectedCallback
• 033 Adding a render() Method
• 035 The Next Steps
• 036 Creating the Basic Modal Component
• 037 Adding the Modal Container
• 038 Styling the Modal Elements
• 039 Adding Some General App Logic
• 040 Opening the Modal via CSS
• 041 Public Methods & Properties
• 042 Understanding Named Slots
• 043 Listening to Slot Content Changes
• 044 Closing the Modal
• 045 Dispatching Custom Events
• 046 Configuring Custom Events
• 047 Finishing it up!


• 36 - Roundup & Next Steps
• 001 Course Roundup

---

Related pages

< THANKS ME>