Back To Course Home

Complete JavaScript Course: Build a Real World App from Scratch

0% completed

Introduction

About this Course Welcome to Programming How to Create Programs?Introduction to Algorithms Introducing JavaScript Summary

Basics of JavaScript

Your First Program Values and Types Program Structure Coding Challenge: Presentation Solution: Presentation Coding Challenge: Minimalistic Calculator Solution: Minimalistic Calculator Coding Challenge: Predict the Displayed Values Quiz

Play with Variables

Variables Expressions Type Conversions User Interactions Variable Naming Coding Challenge: Improved Hello Solution: Improved Hello Coding Challenge: VAT Calculation Solution: VAT Calculation Coding Challenge: Celsius to Fahrenheit Conversion Solution: Celsius to Fahrenheit Conversion Coding Challenge: Variable Swapping Solution: Variable Swapping Quiz

Add Conditions

What's a Condition?Alternative Conditions Add Additional Logic Multiple Choices Coding Challenge: Following Day Solution: Following Day Coding Challenge: Number Comparison Solution: Number Comparison Coding Challenge: Number of Days in a Month Solution: Number of Days in a Month Coding Challenge: Adding seconds to time Solution: Adding Seconds to Time Quiz

Repeat Statements

The While Loop The For Loop Common Mistakes Which Loop to Use?Coding Challenge: Carousel Solution: Carousel Coding Challenge: Use of Modulo Operator Solution: Use of Modulo Operator Coding Challenge: Input Validation Solution: Input Validation Coding Challenge: Multiplication Table Solution: Multiplication Table Coding Challenge: Neither Yes nor No Solution: Neither Yes nor No Coding Challenge: FizzBuzz Solution: FizzBuzz Quiz

Write Functions

Discovering Functions Function Contents Anonymous Functions Guidelines for Programming with Functions Coding Challenge: Improved Hello Solution: Improved Hello Coding Challenge: Number Squaring Solution: Number Squaring Coding Challenge: Minimum of Two Numbers Solution: Minimum of Two Numbers Coding Challenge: Calculator Solution: Calculator Coding Challenge: Circumference and Area of a Circle Solution: Circumference and Area of a Circle Quiz

Create your First Object

JavaScript and Objects Programming with Objects Coding Challenge: Adding a New Property to a Character Solution: Adding a New Property to a Character Coding Challenge: Modeling a Dog Solution: Modeling a Dog Coding Challenge: Modeling a Circle Solution: Modeling a Circle Coding Challenge: Modeling a Bank Account Solution: Modeling a Bank Account Quiz

Store Data in Arrays

Introduction to Arrays Manipulating Arrays in JavaScript Iterating over an Array Updating an Array's Content Coding Challenge: Musketeers Solution: Musketeers Coding Challenge: Sum of Values Solution: Sum of Values Coding Challenge: Array Maximum Solution: Array Maximum Coding Challenge: Array Second Minimum Solution: Second Minimum Coding Challenge: List of Words Solution: List of Words Quiz

Work with Strings

Introduction Strings as Set of Characters Manipulating Strings Searching Inside a String Coding Challenge: Word Information Solution: Word Information Coding Challenge: Vowel Count Solution: Vowel Count Coding Challenge: Reverse a Word Solution: Reverse a Word Coding Challenge: Palindrome Finder Solution: Palindrome Finder Quiz

Understand Object Oriented Programming

Context: A Multiplayer RPG JavaScript Classes Under the Hood: Objects and Prototypes Object-Oriented Coding Challenge: Create a Dog Class Solution: Create a Dog Class Coding Challenge: Create a Character Inventory Class Solution: Create a Character Inventory Class Coding Challenge: Create an Account Class Solution: Create an Account Class Quiz

Discover Functional Programming

Context: A Movie List Program State Pure Functions Array Operations Higher Order Functions JavaScript: A Multi Paradigm Language Coding Challenge: Older Movies Solution: Older Movies Coding Challenge: Government Forms Solution: Government Forms Coding Challenge: Arrays Sum Solution: Arrays Sum Coding Challenge: Students Results Solution: Students' Results Quiz

Project 1: A Social News Program

Functional & Technical Requirements Implementing Social News Program

Create Interactive Web Pages

What's a Web Page?The Languages of the Web Quiz

Discover the DOM

Introduction to the DOM Get Started with the DOM in JavaScript Coding Challenge: Showing a Node's Child Solution: Showing a Node's Child Quiz

Traverse the DOM

Sample Web Page Selecting Elements Selecting Elements via CSS Selectors Obtaining Information about Elements Coding Challenge: Counting Elements Solution: Counting Elements Coding Challenge: Handling Attributes Solution: Handling Attributes Coding Challenge: Handling Classes Solution: Handling Classes Quiz

Modify Page Structure

Modify an Existing Element

Adding a New Element

Variations on Adding elements

Replacing or Removing nodes

Styling Elements

DOM Manipulations & Performance

Coding Challenge: Adding a Paragraph

Solution: Adding a Paragraph

Coding Challenge: Newspaper List

Solution: Newspaper List

Coding Challenge: Mini-Dictionary

Solution: Mini-Dictionary

Coding Challenge: Updating Colors

Solution: Updating Colors

Coding Challenge: Information about an Element

Solution: Information about an Element

React to Events

Introduction to Events The Event Family Reacting to Keyboard Events Reacting to Mouse Events Reacting to Page Events Go farther with Events Coding Challenge #1: Counting Clicks Solution: Counting Clicks Coding Challenge: Changing Colors Solution: Changing Colors Coding Challenge: A Dessert List Solution: A Dessert List Coding Challenge: Interactive Quiz Solution: Interactive Quiz Quiz

Manipulate Forms

JavaScript & Forms Form fields: Sign Up Form Form Fields: Text Zones Form Fields: Choice Elements Forms as DOM Elements Form Validation Regular Expressions Coding Challenge: Password Checker Solution: Password Checker Coding Challenge: Character List Solution: Character List Coding Challenge: Auto Complete Solution: Auto Complete Quiz

Animate Elements

Repeat an Action at Regular Intervals Animate Page Elements Start/Stop an Animation Alternative: CSS Animations Choosing the Right Animation Technique Coding Challenge: Chronometer Solution: Chronometer Coding Challenge: Bouncing Ball Solution: Bouncing Ball Quiz

Project 2: A Social News Web Page

Functional & Technical Requirements Implementing Social News Web Page

Building Web Applications

How the Web Works?HTTP, the Web Protocol HTTP Status Codes & URL From Web Sites to Web Apps JSON, a Data Format for the Web Quiz

Query a Web Server

Creating Asynchronous HTTP Requests in JavaScript Handling JSON Data Coding Challenge: Language List Solution: Language List Coding Challenge: Famous Paintings Solution: Famous Paintings Quiz

Use Web APIs

Introducing Web APIs Consuming a Web API Calling an API with JavaScript Web APIs and Authentication Key-Based Authentication Coding Challenge: More Beer Please Solution: More Beer Please Coding Challenge: Star Wars Universe Solution: Star Wars Universe Coding Challenge: Github Profile Solution: Github Profile Quiz

Send Data to a Web Server

Sending Data: The Basics Sending Form Data Sending JSON Data Coding Challenge: New Article Solution: New Article Coding Challenge: Visited Countries Solution: Visited Countries Quiz

Discover Node.js

Introducing Node.js Node.js Modules Exporting a Class or Object Node.js Packages Package Management with NPM Relationship between Packages and Modules Coding Challenge: Circles Again Solution: Circles Again Coding Challenge: Accounting Module Solution: Accounting Module Coding Challenge: Playing with Dates Solution: Playing with Dates Quiz

Create a Web Server

Using a Framework Responding to Requests Creating an API Exposing Data Accepting Data: Handling Form Data Accepting data: Handling JSON Data Publishing Web Pages Practice Exercises Quiz

Project 3: A Social News Web App

Functional and Technical Requirements Implementing Social News Web App

Conclusion

Summary and Perspectives

Appendices

Replacing or Removing nodes

Let's remove or replace elements from the page via JavaScript.

We'll cover the following

Replacing a node
Removing a node

Replacing a node

A DOM element can be replaced with the replaceChild() method. This replaces a child node of the current element with another node. The new node and existing node replaced are passed as parameters (in that order). The example shows replacing the Perl language with Lisp.

Get hands-on with 1400+ tech skills courses.