Best JavaScript course for beginners with step by step instructions. Learn basics, ES6, DOM and AJAX with mini project.
☑ Fine grained steps and instructions to learn JavaScript
☑ Learn statements and code execution flow
☑ Learn to implement mathematical calculations using Literals and Arithmetic Operators
☑ Learn to use Variables
☑ Learn code reusability using Functions
☑ Learn to implement decision making using Conditional Statements
☑ Learn to repeat statements using Looping constructs
☑ Learn to implement multiple values using Array
☑ Learn object oriented programming using Object and Class
☑ Learn ES6 features – Module, let, const, Arrow Function and Template String Literals
☑ Learn to work with Numbers, String, Array and Dates
☑ Learn to manipulate HTML and CSS using Document Object Model (DOM)
☑ Learn to implement getting data from network using JSON, XMLHttpRequest and fetch
☑ Learn basics of HTTP protocol and HTTP method types
☑ Learn to implement a beginner level project Tic-Tac-Toe
What learners say about this course?
“Excellent explanation.I understood well. It’s definitely helpful for everyone. Thank you so much sir”
“Overall, a great course so far! I’ve learned a lot about the front end concepts, and this course seems to be beginner-friendly, as it’s my first time exploring it and I don’t have much troubles understanding the material. Thank you for sharing your knowledge!”
Beginner friendly course
If you are from a non-IT profession and you want to shift to application development, then this is the course for you.
- The topics are clearly structured.
- Appropriate instructions and opportunity provided to the learner to code along with the instructor.
- Guided implementation of case study and project.
About JavaScript
According to StackOverflow Developer Survey, JavaScript is the Most Popular Technology during 2020. Most popular websites use JavaScript. As of 2021, around 97.4% of websites use JavaScript.
Using JavaScript you can develop web applications, mobile applications, desktop applications and server side programming.
It is easier to get started and learn JavaScript.
What is in this course?
The following are the major areas covered in this course:
- Programming Fundamentals
- Statements, Code Execution Flow, Literals, Arithmetic Operators, Variables, Function, Conditional Statements, Loops, String, Array, Object, Class, Module, Arrow Function, Variable Scoping, Numbers and Dates
- Web Page manipulation using DOM (Document Object Model)
- Learn manipulating HTML elements
- Learn to handle DOM events
- Implement 2 Case Studies and an Exercise
- Getting data from server (Using XMLHttpRequest and fetch)
- Learn about getting data from server
- Understand about REST API and JSON
- Implement making REST API call using XMLHttpRequest and fetch
- Implement case study that searches countries
- Implement an exercise to search street names in France
- Understand basics of HTTP protocol and HTTP method types
The above topics helps you to become a Front End Developer.
This course does not cover the desktop application development, mobile application development and server side programming.
During this learning journey, you are provided with:
- 36 Exercises
- 3 Case Studies
- 1 Project (Tic-Tac-Toe game)
English
Language
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