JavaScript Pro: From Basics to Real-World Applications

Explore why JavaScript powers web development with fast, in-browser execution, simple syntax, and full-stack versatility from front-end to back-end, plus its popularity and career prospects.

Follow the course by using the video interface, content sidebar, and downloads of resources with code and a zip file for each project.

Set up your JavaScript workspace with Visual Studio Code or editors like Sublime Text or Atom, customize themes, and install the Live Server extension for automatic reloading.

Learn how to output in the browser using console.log and alert in JavaScript, including examples with strings and numbers, and basics of viewing output in Chrome dev tools.

Learn how variables in JavaScript act as containers to store values, compare var, let, and const declarations, and note that var is outdated while let and const offer safer usage.

Explore comments in JavaScript, including single-line and multi-line styles, to explain code, document intent, and improve readability, with examples showing variables and console output.

Explore JavaScript data types, including numbers, strings, booleans, null, and undefined, and differentiate primitive from non-primitive types with practical examples.

Explore numbers in JavaScript, including decimals, arithmetic operations, and converting numbers to strings with toString, fixing decimal places with toFixed, and using valueOf and typeof to inspect values.

Explore strings in JavaScript, including concatenation with the plus operator, escaping quotes, and using methods like length, indexOf, search, slice, replace, toUpperCase, toLowerCase, and trim.

Explore type conversion and type coercion in JavaScript, showing how to explicitly convert strings and numbers and how JavaScript automatically coerces values in operations.

Learn how template literals use backticks and interpolation to build clean strings with variables like name, age, and salary, avoiding messy plus signs. See inline expressions, including toUpperCase.

Learn to work with date and time in JavaScript by creating new Date objects, extracting date and time components, formatting dates, and adjusting values with set methods (noting zero-based months).

Explore the JavaScript Math object to access pi, round numbers, powers, roots, min, max, ceil, floor, random, and trig functions like sin and cos.

Explore arithmetic, assignment, and comparison operators in JavaScript with examples of plus, minus, multiply, divide, modulus, and the difference between == and ===.

Learn how JavaScript control flow uses if and else statements to execute code based on conditions, with examples showing age comparisons to decide who can drive a car.

Explore logical operators: and, or, not, and how they combine conditions to control code execution through true/false outcomes and simple examples.

Explore the JavaScript ternary operator to conditionally output messages in one line, using age-based rules like driving eligibility to illustrate true and false branches.

Explain how if, else if, and else control flow selects messages based on age, displaying you are child, you are young, or you are old.

Explore the switch statement with a date example, mapping day numbers to names using multiple cases and breaks, including default handling and how the expression drives case selection.

This lecture introduces loops, focusing on the while loop to print numbers 1 through 10 with console.log using a condition and i increments, and to sum the first hundred numbers.

Explains how the do-while loop executes its block at least once, using do and while, increments a counter, prints values, and contrasts with the while loop behavior.

Explore the JavaScript for loop from initialization to condition and increment, printing numbers with console.log, generating even numbers via modulus, and iterating in descending order, plus for each loop.

Learn how to use the forEach loop in JavaScript to iterate an array and display each element, and compare it with a traditional for loop.

Master break and continue statements in JavaScript, learning how break exits loops and continue skips iterations to control flow in loops and switch blocks.

Create and use functions and arrays in JavaScript, including declarations, calls, parameters, and returns, with practical examples like adding numbers and converting Fahrenheit to Celsius.

Learn how to declare and use arrow functions, compare them with normal functions, and understand how the this keyword behaves differently in arrow functions.

This lecture explains global versus local scope in JavaScript, showing how global variables exist outside blocks while local variables stay inside functions or blocks, and why var is avoided.

Explore objects in JavaScript using object literals, define properties as key-value pairs, and access or update them via dot or bracket notation, including methods.

Explore JavaScript arrays to store multiple values, access and change elements by index, use for and for-each loops, and distinguish arrays from objects with nested structures.

Explore essential JavaScript array methods, including toString, push, pop, shift, splice, delete, concat, sort, and for each, to transform, modify, and combine arrays with real-world examples.

Discover how the this keyword refers to the object it belongs to in JavaScript, and how its use differs between object methods and the global window context.

Discover the document object model, a tree of elements with document as the top-level node, head, body, and title, and how JavaScript manipulates the DOM to create dynamic pages.

Explore the document object and learn to inspect, access, and manipulate page elements—like the body, images, a text field, and a button—using JavaScript.

Learn how to select DOM elements using id, tag name, and class name selectors with document.getElementById, getElementsByTagName, and getElementsByClassName, highlighting single versus multiple elements.

Learn to select and manipulate page elements with querySelector and querySelectorAll, using hash for id, dot for class, or by tag name, and compare single-element versus multiple-element behavior.

Learn to manipulate styles and attributes with JavaScript by selecting elements, changing colors, and getting and setting attributes like image sources to build interactive pages.

Explore how JavaScript handles user interactions by wiring click, mouseover, and mouseout events to elements, showing the current date in the console, and introducing event listeners.

Learn how to attach event listeners to buttons, handle click events, and build a simple to-do list by creating elements, reading input values, updating the dom, and clearing fields.

Explore essential mouse and keyboard events in JavaScript, including click, double-click, mouse down, mouse up, mouse move, and mouse over, plus keydown and keyup, with event listeners and console debugging.

Build four hands-on projects, including a BMI calculator with input units and interpretation, a random color and code generator using arrays, a local storage bookmarking app, and a memory game.

design a simple BMI calculator UI with bootstrap, including weight and height inputs, a calculate button, and a BMI result area; set height step to limit decimals.

Create a JavaScript BMI calculator by wiring inputs, preventing form reloads, computing BMI from height and weight, and displaying color-coded results for normal, overweight, and obese.

Design and implement a random quotes generator ui using bootstrap, html and css, featuring a centered layout, a code display area, author display, a generate button, and planned javascript integration.

Enhance a basic random code generator in JavaScript by selecting a random code and color from arrays, displaying them, and updating styles on reload.

Learn how JSON, the JavaScript object notation, represents data with key-value pairs, uses double quotes for keys and strings, and cannot define a function in JSON.

Design and implement a bookmark app UI using HTML and Bootstrap with a form to capture title and link, display bookmarks as cards, and prepare for local storage integration.

Learn to build a bookmark app that saves bookmarks to Chrome local storage using JavaScript, including adding, displaying, and persisting bookmarks with JSON and IDs.

Load bookmarks on DOMContentLoaded by converting local storage data to JSON, handling nulls, and rendering each bookmark in the UI with a for loop.

Learn to delete bookmarks from the user interface and local storage by using a delete button, removing the item from the DOM and from local storage.

Design a vanilla JavaScript memory game UI with 12 cards (6 pairs), featuring front and back images, custom CSS styling, and a 3D flip effect using CSS transforms.

Implement a JavaScript memory game by adding flip logic, checking for matches, shuffling cards, disabling matched cards, and detecting a win.

Explore how object oriented programming uses a class as a blueprint and objects as implementations. Learn four pillars: encapsulation, abstraction, inheritance, polymorphism, and how JavaScript differs from Java or C++.

Learn how factory functions create reusable objects, replacing object literals to reduce code duplication, by returning objects with name, age, and hello method that logs messages.

Learn how constructor functions work in JavaScript, compare them to factory functions, and create new object instances with the new keyword, including this binding and naming conventions.

Discover how prototypes drive object inheritance in JavaScript, using constructor functions and the prototype object to share methods and properties, and differentiate own properties from prototype properties.

Explain how ES6 classes in JavaScript act as syntactical sugar over prototype-based inheritance, offering a convenient class syntax with constructor, properties, and methods like calculateFees.

Recognize encapsulation as the first pillar of object oriented programming by grouping properties and methods inside a class, as in a student entity with name and a calculate fees method.

Learn how abstraction hides implementation in objects and data from the outside world. See how an employee class computes net salary after tax, illustrating encapsulation and hidden logic.

explore how inheritance works in JavaScript using ES6 classes, with person as base class and student and teacher extending it to inherit name, age, and methods via super.

Explore prototype inheritance in JavaScript by building constructor functions like person and student, and linking prototypes with Object.create.

Explore polymorphism in JavaScript by showing that no function overloading exists and that function overriding lets a button and a text field tailor behavior through context.

Create a JavaScript project using object oriented programming to manage an employer’s employees, capturing name, salary, and tax, generating random IDs, adding employees, and persisting data in local storage.

Design an employee management user interface using bootstrap, featuring a form for name, salary, and tax percentage, and a data table to display and manage records.

Define an employee class with name, salary, and tax, to compute net salary and generate a five-digit random id, then add employees to the ui table with validation.

Clear fields after adding an employee, show dynamic success and error alerts, and delete employees from the UI using a live listener, setting up for local storage later.

learn to save and render employees from local storage by using static methods, retrieving and updating the employee array, and displaying it in the UI across reloads.

Learn to delete an employee from local storage by retrieving the id, removing the entry from the array with splice, and saving the updated data back to local storage.

Learn how to declare and use regular expressions in JavaScript, using literal and constructor forms, and explore core methods like test, search, replace, and match to validate and update strings.

Explain character classes in JavaScript regex, including \w, \W, \d, and \D, and demonstrate using test and match with the global flag to extract words followed by digits.

This lecture explains groups and ranges in regular expressions, using square brackets for character ranges (a-z, A-Z, 0-9), optional and plus quantifiers, and grouping for patterns like maps.google.com.

Explore how quantifiers control the number of characters in regular expressions, with examples of exact counts, ranges like two to six, and minimum repetitions.

Explore regular expressions in JavaScript by mastering assertions, including start and end boundaries, word boundaries, and lookahead and lookbehind patterns, with practical examples.

Develop a bootstrap-styled JavaScript URL validator using a custom regular expression to validate URLs with multiple protocols and domains, and display success or danger alerts.