The Complete Modern Javascript course for beginners 2024

Learn how to connect a JavaScript file to an HTML page, using internal and external scripts, creating index.html and index.js, and testing with the browser console.

Explore the four main ways to output data in JavaScript: modify HTML with innerHTML via getElementById, write to the document, show alerts, and log to the console.

Learn how JavaScript programs are built from statements, variables, and operators, interact with the DOM, and respond to events, with a practical area calculation example.

Master JavaScript programs and statements by practicing let variables, expressions, semicolons, console.log outputs, conditional if-else, for loops, and mindful whitespace and line breaks.

Explore code blocks and control flow in JavaScript, including if else statements, nesting, and function calls, illustrated with examples of x comparisons and console logs.

Learn about JavaScript reserved keywords and why they have special meaning, such as var, if, else, while, for, function, true, false, undefined, and null, which cannot be used as names.

Explore fixed values, or literals, and variable values in JavaScript, including number literals, floating point numbers, boolean literals, and null literals. Learn variable declaration, assignment, and reassignment.

Explore variables in JavaScript by declaring and initializing with var, assigning string, number, boolean, and object values, creating a person object, accessing properties, and performing basic arithmetic with console output.

Master JavaScript identifiers by rules for letters, digits, underscores, and dollar signs; begin with a letter, underscore, or dollar sign, cannot start with a digit, camel case and snake case.

Explain how the let keyword creates block scope and prevents redeclaration, contrasting with var. Also cover hoisting and initialization rules, and advise declaring at the top to avoid errors.

Learn how to declare constants with the const keyword and why they cannot be reassigned or redeclared. Explore constant objects and arrays and understand their allowed modifications and scope.

Master JavaScript data types, including dynamic typing and primitive types (number, string, boolean, null, undefined) and objects, with typeof, literals vs constructors, and dot and bracket access.

Explore JavaScript arrays: create, access by index, modify items, and use push, pop, unshift, shift, length, and array.isArray to differentiate arrays from objects.

Learn how to sort arrays in JavaScript using the sort method in place. Strings sort alphabetically by default, and numbers use a comparison function for ascending or descending order.

Master JavaScript arrays by using built-in methods like forEach, map, filter, and reduce. Learn to search and inspect arrays with indexOf, lastIndexOf, includes, and keys.

Explore JavaScript strings, including single quotes, double quotes, and template literals, with interpolation, concatenation, multi-line strings, and indexing.

Explore escape characters in JavaScript strings. Learn to insert quotes, newlines, tabs, and backslashes for console and HTML with \n, \t, and \b.

Explore strings in JavaScript by using the string constructor with the new keyword, and learn key methods such as length, toUpperCase, toLowerCase, valueOf, concat, indexOf, slice, substring, replace, and split.

Explore numbers in JavaScript, including integers and floating point values, decimals, scientific exponent notation, NaN and isNaN behavior, hex with 0x, and toFixed for precision.

Explore JavaScript number methods like toString, toExponential, toFixed, and toPrecision. Learn number conversion with Number, parseInt, and parseFloat, and compare number literals with Number objects via valueOf.

Explore JavaScript arithmetic operators, including addition, subtraction, multiplication, division, modulus, and increment/decrement, with practical examples of numbers and string concatenation using let and console.log.

Learn about the simple assignment operator and the addition, subtraction, multiplication, division, modulus, and exponentiation assignment operators with practical examples that show updating variables.

Master JavaScript string operators for concatenation, compound assignment, and comparison. Explore string length, indexing with brackets, and methods like to uppercase, to lowercase, substring, and index of.

Explore JavaScript comparison operators and how they return booleans by comparing values, including equality, inequality, strict equality, and the greater than or equal to operator.

Explore JavaScript type operators, including typeof to determine a value's data type and instance of to verify an object's constructor. See examples with number, string, boolean, and a person object.

Learn how to define functions in JavaScript, call them with arguments, return values, and manage local variables, including default values, to build modular, reusable code.

Explore JavaScript functions' parameters and arguments, including required, optional with defaults, and rest parameters, with practical examples of greet and sum functions.

Learn how JavaScript objects use properties and methods, accessed by dot notation, and see a car example with weight and color that can start or stop.

Learn how this refers to the owning object in global, function, method, constructor, and event listener contexts with real examples using window, a person object, and a button.

Explore JavaScript events to build dynamic, interactive web pages by handling user input and browser actions, using event types, listeners, and callbacks to respond to clicks, hovers, and loads.

Explore booleans in JavaScript, covering true and false literals, the Boolean function, truthy and falsy values, and using them in conditions, comparisons, and boolean objects.

Explore how conditional statements in JavaScript control code flow using if, else, and else if, understanding syntax, truthy and falsy values, and practical examples.

Explore how the JavaScript switch statement evaluates an expression against multiple cases, using break to stop execution and a default for fallbacks.

Explore the essential JavaScript loops, including for, for in, for of, while, and do while, with syntax, examples, and practical tips for looping through arrays, objects, and strings.

Explore how break and continue control loops in JavaScript: break terminates a loop, while continue skips the current iteration; learn about labels and labeled blocks for nested loops.

Explore JavaScript sets, an ES6 data type of unique values, learn creation, add, delete, has, clear, size, and iteration with forEach and for-of. Build union, intersection, and symmetric difference.

Learn how JavaScript sets remove duplicates from arrays and ensure uniqueness. Use spread operator, Array.from, and for-of loops to build unique arrays and string characters, and explore basic set operations.

Explore JavaScript maps, a built-in ES6 data structure for key-value pairs with any key type, preserving insertion order and offering set, get, has, and delete.

Learn to create and use maps in JavaScript, with string, object, function, and NaN keys; perform set, get, and size operations, and iterate with entries, keys, and values.

Learn how to clone and merge maps in JavaScript by using new Map(existingMap), the spread operator, and forEach to merge key-value pairs from multiple maps.

Explore the typeof operator in JavaScript to identify data types, distinguish primitive from complex types, and clarify undefined and null, including constructor properties.

Explore JavaScript type conversion, including implicit and explicit conversions, parsing strings to numbers with parseInt and parseFloat, and converting numbers and booleans to and from strings, including using toString.

Explore error handling in JavaScript with try, catch, throw, and finally to test, handle, and ensure code runs regardless of outcomes.

Explore JavaScript scopes and variables, from block scope and function scope to global and automatically global variables. Learn how let, var, and const affect visibility across blocks and functions.

Enable strict mode in JavaScript with the use strict directive to enforce stricter parsing, catch errors early, and disallow unsafe constructs like the with statement and duplicate parameter names.

Explore nested functions and closures in JavaScript, including how outer and inner functions interact, how to return and invoke closures, and the use of private variables and callbacks.

Explore arrow functions in JavaScript, compare them to regular functions, and learn about lexical this binding, implicit returns, and concise behavior in object methods and callbacks.

Explore how JavaScript classes from ECMAScript 2015 define blueprints for objects, including constructors, instance fields and methods, and static fields and methods, with examples using a rectangle class.

Explore JavaScript classes: static blocks and initialization of static and instance fields, static and instance methods, plus private fields and methods with hash syntax, and encapsulation practices.

Explore object oriented programming in JavaScript, focusing on prototypal inheritance, classes and objects, encapsulation, inheritance, polymorphism, and abstraction to write maintainable, scalable code.

Discover why you need to learn object oriented programming and compare it with procedural programming, highlighting encapsulation, objects, classes, and methods for modular, reusable code.

Explore encapsulation in object-oriented programming by building a bank account class with constructor, properties, and deposit and withdraw methods that guard balance and expose a safe interface.

Explore abstraction in object oriented programming by exposing essential features and hiding details, using a bank account class with deposit and withdraw methods to manage balance and interest rate.

Learn inheritance in JavaScript by building a generic animal parent class and extending it for dogs and cats. Use prototype chaining, constructors, and getters to share name, color, and breed.

Explore polymorphism in JavaScript by demonstrating method overriding and method overloading through an animal and cat hierarchy, showing how subtypes customize behavior like speak.

Discover how value types and reference types are stored in memory in JavaScript, and how copying and passing by value versus reference affect variables, arrays, and functions.

Enumerate object properties in JavaScript by using the for-in loop on object literals and class-based instances, accessing keys and values via dot and bracket notation, including prototype and constructor concepts.

Explore object oriented programming in JavaScript by building shape, circle, and square classes with area methods, demonstrating inheritance, method overriding, and the super constructor.

Explore the document object model, the dom tree of HTML elements, attributes, and text, and how JavaScript accesses and manipulates it to update content, styling, and respond to user interactions.

Explore how to access and modify the HTML DOM with JavaScript, using getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll, and work with textContent and forEach, and attach event listeners.

Manipulate the dom with JavaScript by selecting elements, reading and setting inner HTML and text content, and dynamically creating, appending, and removing elements in the page.

Learn to dynamically modify css styles via the document object model using the style property, class name, and class list, and set attribute to update colors, font size, and tooltips.

Explore how to respond to user actions using DOM events with addEventListener and onClick, demonstrating click and double-click handling to change the page background.

Explore handling DOM events with JavaScript, adding event listeners for click, mouse enter, mouse leave, mouse down, mouse up, double click, and input events like blur, focus, copy, cut, paste, and select.

Implement drag and drop in web pages using the JavaScript DOM events, creating draggable elements and a drop zone, and wiring dragstart, dragend, dragenter, dragover, dragleave, and drop handlers.

Learn to handle window events (load, unload, resize, scroll) with addEventListener, update the DOM, and use console logs and alerts to respond to user actions.

Explore how JavaScript handles media events for video and audio, including play, pause, time update, ended and volume change, with practical examples using a video element and control buttons.