Become a Front End Web Developer – JavaScript for Beginners

Introduction

Introduction

What you will learn?

Learning Environment

Setting up your course

Install Chrome

Download Visual Studio Code

Install Visual Studio Code Editor – Windows

Install Visual Studio Code Editor – Mac

Quick Launch Visual Studio Code

Install ‘Live Server’ Extension for Visual Studio Code

GitHub Code Reference

An introduction to JavaScript

Significance and Origin of JavaScript

Statements and Code Execution Flow

Display Hello World in console

Create Folder

Open ‘javascript’ folder in Visual Studio Code

Create HTML file

Key in the code

Launch HTML using Live Server

Place Visual Studio Code and Chrome browser adjacently

Placement of Script tag

JavaScript is Case Sensitive

Code Execution Flow

Literals and Arithmetic Operators

Introduction

Temperature Conversion Calculation

Create HTML file

Difference between a String Literal and Numeric Literal

Understanding Arithmetic Addition and String Concatenation

Code to display Celsius

Calculation code for Fahrenheit

Understanding Operator Precedence

Fix Fahrenheit calculation issue

Summary

EXERCISE #1 – Area of Rectangle

EXERCISE #2 – Percentage of Boys and Girls

EXERCISE #3 – Find left over Apples

Variables

Limitations of Fahrenheit conversion code

Implementing Variables

Defining multiple variables

String variable and Variable Naming Convention

Multiple variable definitions in a single line

EXERCISE #1 – Area of Rectangle

EXERCISE #2 – Percentage of Boys and Girls

Function

Significance of Function

Define Function

Call Function

Function with Parameter

Call Function from another Web Page

Steps to implement External Script

Function definition in Script File

Move Function to Script file

Refer Script File from HTML

Additional information about External JavaScript File

Return Statement in a Function

Code Execution Flow of a Function

About Functions and Function Naming Conventions

EXERCISE – Area of Rectangle

Conditional Statements

About Conditional Statements

Problem Statement to learn Conditional Statements

Implement ‘if’ statement

Explain ‘if’ statement

Implement ‘if’ statement for raining check

Implement Logical NOT operator

Explanation for Logical NOT operator

Implement ‘else’ block

How ‘else’ block works?

Implement Equal (==) operator

Implement Strict Equal (===) operator

Comparison Operators

Logical Operators

About Pipe Character

Problem Statement – Airlines Infant Policy

Implement Infant Passenger age check

Implement Adult Passenger age check

Airlines Policy for Child Passenger

Implement Child Passenger age check

Implement Airlines Policy using if .. else if

Benefit of if .. else if

Implement Ternary Operator

How Ternary Operator works?

Explanation for switch .. case statement

Summary of Conditional Statements

EXERCISE #1 – Find positive, negative and zero using ‘if’ statement

EXERCISE #2 – Find positive, negative and zero using ‘if .. else if’

EXERCISE #3 – Find if a number is Odd or Even

EXERCISE #4 – Find Cash Back using Ternary Operator

Loops

Importance of Looping constructs

Displaying Numbers

Displaying Numbers using ‘while’

How ‘while’ loop works?

Displaying Numbers using ‘do .. while’

Displaying Numbers using ‘for’

TV Schedule dates display

TV schedule dates display solution

TV schedule dates display – Working Code Explanation

How increment and decrement operators work?

Assignment Operators

EXERCISE #1 – Display odd numbers using ‘while’

EXERCISE #2 – Display odd numbers using ‘for’

EXERCISE #3 – Print line

Array

Significance of Arrays

Define array and display

Read array item values

Modify and add array item values

Calculate student height average using array

Read array items using ‘for’ loop

Calculate average using ‘for’ loop on array

Find array length

Iterate array using for .. of

EXERCISE #1 – Print days of week

EXERCISE #2 – Print days of week with serial number

EXERCISE #3 – Print days in a line

How to find Median?

EXERCISE #4 – Solve Median for odd number of items

EXERCISE #5 – Solve Median for both odd and even number of items

Object

Importance of Objects

Limitations of Variables and Arrays

Define object for one passenger

Additional passenger details

Define additional passenger details in object

Define gender object

Define passenger array

Define all passenger objects into an array

Summary about objects

Explain e-commerce products for Exercise

EXERCISE #1 – Define category objects

EXERCISE #2 – Define vendor objects

EXERCISE #3 – Define product objects

Class

Additional feature for passenger object

Display full name for a passenger object

Function to display full name of a passenger object

Define function within object

Limitation of object

Define class

Define constructor

Create object from a class

Code execution flow for object creation from class

Difference between class and object

Create gender objects

Define passenger class and create objects

Define function within passenger class

Create multiple passenger objects based on class

Benefits of using class

EXERCISE – Create e-commerce product objects using class

Module

Introduction

Limitations of externalizing class definition

Externalizing Gender and Passenger class definition

Complexity explained using Airlines operations

Implement module

EXERCISE – Convert e-commerce classes to use Module

Variable Scopes

Understanding Variable Scopes

Understanding Global Scope and Functional Scope

Understanding Block Scope using ‘let’ and ‘const’

‘let’ vs ‘var’

Arrow Function

Introduction

Function assigned to a variable

Arrow function with curly braces

Arrow function without curly braces

Arrow function with parameter

EXERCISE – Area of Rectangle

Working with Numbers

Representing large numbers

Standard Positional Numeral System

Convert Decimal number to Integer

Finding not a number

Miscellaneous details about numbers

EXERCISE #1 – Earth Mass

EXERCISE #2 – Find ladder length

Working with String

Single and Double Quote characters within string

Other backslash options

String is an object

String is immutable

Reading a character from string

Change case

Find string in another string

Built-in functions to extract string

Understanding ‘substr’ function

Understanding ‘substring’ and ‘slice’ functions

EXERCISE #1 – Display characters of a string line by line

EXERCISE #2 – Count the present of character ‘e’

EXERCISE #3 – Is website secure?

EXERCISE #4 – Find positions of a character

EXERCISE #5 – Extract domain name from website address

EXERCISE #6 – Print words of a sentence

Working with Arrays

Introduction to array functions

How pop() function works?

How indexOf() and includes() functions work?

How forEach() function works?

How find() function works?

How filter() function works?

How map() function works?

How join() function works?

Implement reduce() function

How reduce() function works?

Sorting array of text

Sorting array of numbers

How custom compare for sorting works?

Explain how sorting and comparison works

Implement compare function to compare numbers

Sorting objects

Working with Dates

Date object creation

Getting data from Date object

Conversion of Date object to other formats

Locale specific date conversion

Customized date print function

Date object creation using string and specific date field values

Date creation using timestamp

Setting specific date field values

Conversion between date and string

EXERCISE – From and To Date validation

Document Object Model (DOM)

What is ‘Document’ in ‘Document Object Model’?

What is ‘Object Model’ in DOM?

About DOM

‘window’ object

Using ‘window’ object

‘window’ object reference is optional

Get HTML Element using id

Access and modify text content of HTML Element

Access and modify HTML content of HTML Element

Access and modify attribute value of an HTML Element

Access and modify value of Input HTML Element

Access and modify style definition of HTML Element

Access and modify class definition of HTML Element

Getting HTML elements using class name

Miscellaneous functions to get HTML elements

DOM Events

What are DOM events?

Implement mouse click event

Link event with a funciton

Implement event using Event Listener

Event when typing in Input Text field

DOM Case Study #1 – Airlines Infant Policy

Airlines Infant Policy Web Page

Define HTML

Get HTML Elements

Include click event

Include category computation logic

Display Category in Web Page

Demonstration of displaying Category as we type ‘age’

Implement Category display as we type

Issue Demonstration – Category not cleared after clearing age

Fix the Category non-clearance issue

Importance of validating data entered by user

Include HTML tag for displaying validation error message

Get the validation error message HTML element

Hide the validation error message

Implement validation

DOM Case Study #2 – Search Student

Demonstrate Search Student Web Page

Define HTML

Hide display of student name list

Get HTML elements

Implement Event Listener

Search Student Solution Explained

Looping through each student name

Implement filtering of student names

Implement case insensitive filtering of student names

Implement click event to select a student name

Display selected name in the search input text field

DOM – Exercise and Conclusion

EXERCISE – Website Navigation

DOM Projects and Conclusion

Network and calling REST API

Getting data from Server

Demonstration of Interactive Web Page

Understanding REST API and JSON

Countries REST API

GitHub REST API

Finding REST API

Understanding XMLHttpRequest

Sending request to REST API

Implement synchronous call to get REST API data

Comparing Synchronous and Asynchronous

Implementing Ready State Change listener

Ready State explained

Getting response data asynchronously

AJAX – Timelines

REST API call using ‘fetch’

Explain ‘fetch’

Country Search Case Study

About Country Search Case Study

Get HTML source code

HTML content explained

Clear country display and error message

Include search ‘keyup’ event

Countries REST API call explained

Check minimum two characters entered for Search

Create dynamic endpoint based on search key

Make the Countries REST API call

Convert JSON response to JavaScript object

Examine the properties of response data

Display responded country names in console

Display country names in web page

Display country names with styles

Display all country details

Display languages for each country

Implement using Template String Literals

Clear countries with single character search key

Examine when error is responded

Display message when no countries are found

Create new source file to implement using ‘fetch’

Make REST API call using ‘fetch’

Include code to display data fetched

Modify code to use properties from object return by fetch

EXERCISE – Search Streets in France

XMLHttpRequest or fetch

XMLHttpRequest vs fetch

Understanding call back hell

Advantages of using ‘fetch’

Browser compatibility of ‘fetch’

Hyper Text Transfer Protocol (HTTP)

Introduction

Postal delivery process

HTTP Request and Response message

Content of HTTP Request

Content of HTTP Response

Viewing HTTP Headers in Browser

HTTP Method Types

HTTP POST Request

PUT and DELETE request

XMLHttpRequest and ‘fetch’ for any HTTP method type

Project – Tic-Tac-Toe

About Tic-Tac-Toe

Download HTML

HTML Walkthrough

Getting Started

Handle Box Click

Code Snippet for Box Selection

Issue when selecting already selected Box

Solving selection issue

Identifying next steps after box selection

Logic to find Winner

Solution to find Winner

More details about finding winner

Code Snippet for finding Winner

Selection issue after game is over

Solving selection issue after game is over

Handle Reset button

Handle Game Draw

Conclusion

Course Conclusion