Conquering JavaScript: The Practical Handbook

Cover
Half Title
Series Page
Title Page
Copyright Page
Dedication
Table of Contents
About the Editor
Acknowledgments
Zeba Academy – Conquering JavaScript
Chapter 1 Introduction to JavaScript
In this Chapter
Client-Side Javascript
What is the Purpose of Javascript?
What Makes Javascript so Special?
What are Javascript's Flaws?
How Does JavaScript Work on Our Website?
What Makes Javascript Unique Among Programming Languages?
Tools for Javascript Development
What is the Current State of JavaScript?
Javascript's Evolution
What is Modern JavaScript and How Can it Be Used?
What JavaScript Can do for Us
What Distinguishes JavaScript?
JavaScript Tendencies
Standardizing JavaScript
ECMAScript Version History
JavaScript vs. Java
Who Controls Javascript?
Oracle's Trademark is JavaScript
Various Variations
Javascript Framework
The jQuery and JavaScript Libraries
What Distinguishes JavaScript Frameworks From Libraries?
Frontend Frameworks
React
Angular
Vue
Backend Frameworks
Express
Next.JS
What are the Benefits and Drawbacks of Javascript Frameworks?
Library vs. Framework
Model View Controller (MVC)
Vanilla JS vs. React JS: Which Should We Use for Our Development?
Vanilla JS vs React JS Functionality
React JS: What is its Role in the Application's View Layer?
Why is Vanilla JS Used?
Stack Data Structure Comparison between React JS vs Vanilla JS
Performance Comparison between Vanilla JS with React JS
Future Prospects
Testing
Security
ReactJs and Vanilla js UI/UX Performance
Convenience for the Developer
Maintenance
Development Cost
5 Reasons Why Our Website Needs Javascript
Explain How Using JavaScript Will Enhance Our Website
AJAX Uses to Load Sections of Pages Independently
Notes
Chapter 2 Getting Started with JavaScript I
In this Chapter
Selecting the Best Javascript Editor From Seven Options
What is the Difference between a JavaScript Editor and an IDE?
What Exactly is an Editor?
IDE Definition
When Conflicts Arise
The Top 7 JavaScript Editors
Time to Select the Best JavaScript Editor
With a JavaScript Editor, You May Improve the Efficiency of Your Work Environment
How to Install Javascript in Visual Studio Code
Installation of Visual Studio Code in Windows
Setup Visual Studio Code
Installing Visual Studio Code on Linux
Installing Visual Studio Code on Debian, Ubuntu, or Linux Mint
Node.JS Installation on Windows
Configuring the Node Development Environment
Node Installation on Windows (Windows 10):
Node.JS Installation on Linux
How do we Start and Execute a Node.JS Project in Visual Studio Code?
Top Visual Studio Code Extensions for Javascript Developers
JavaScript (ES6) Code Snippets
ESLint
Prettier
Quokka.js
REST Client
Debugger for Chrome
Live Server
Live Share
Babel JavaScript VSCode
JavaScript Booster
Tabnine
What Exactly is 'Vanilla Javascript'?
Why Should We Learn Pure JS?
Website Performance
User Interface
It also Makes Working with Frameworks Simpler
Vanilla Script's Disadvantages
Hello World Program in Javascript
Syntax of Javascript
Our First Javascript Code
Line Breaks and Whitespace
Semicolons are Not Required
Case Sensitivity
Comment in Javascript
Benefits of JavaScript Comments
JavaScript Comment Types
Single-Line Comment in JavaScript
Multiline Comment in JavaScript
Variable in Javascript
JavaScript Variables that are Correct
JavaScript Variables that are Not Correct
Variable in JavaScript Example
Local Variable in JavaScript
The Global Variable in JavaScript
Declaring a Global Variable in JavaScript within a Function
Internals of Global Variable
Data Types in Javascript
Primitive Data Types in JavaScript
Non-Primitive Data Types in Javascript
Operators in Javascript
Arithmetic Operators
Comparison Operators
Bitwise Operators
Logical Operators
Assignment Operators
Special Operators
If-Else Statements in Javascript
If Statement
If...Else Statement
If...Else if Statement
Switch in Javascript
Loops in Javascript
For Loop
While Loop
Do-While Loop
For-in Loop
Functions in Javascript
The Benefit of the JavaScript Function
Syntax of JavaScript Functions
Function Arguments
Function with Return Value
Function Object
Parameter
Function Methods
Examples of JavaScript Function Objects
Objects in Javascript
Object Creation in JavaScript
Creating a Method in a JavaScript Object
Object Methods in JavaScript
Array in Javascript
Array Methods in JavaScript
String in Javascript
String Methods in JavaScript
Date Object in Javascript
Constructor
Date Methods in JavaScript
Date Example in JavaScript
Example of JavaScript Current Time
Example of a JavaScript Digital Clock
Math in Javascript
Math Methods
Math.sqrt(n)
Math.random()
Math.pow(m, n)
Math.floor(n)
Math.ceil(n)
Math.round(n)
Math.abs(n)
Number Object in Javascript
Number Constants in JavaScript
Number Methods in JavaScript
Javascript Boolean
Boolean Properties
Boolean Methods
Errors and Exceptions in Javascript
What Exactly is Exception Handling?
Errors in Syntax
Runtime Errors
Logical Errors
Statement of Try...Catch...Finally
The Throw Statement
The Onerror() Function
Events in Javascript
What Exactly is an Event?
onclick Event Type
onsubmit Event Type
onmouseover and onmouseout
Standard HTML 5 Events
Notes
Chapter 3 Getting Started with JavaScript II
In this Chapter
How Can we Build an Asynchronous Node.JS Function?
How do we Write an Asynchronous Function in Javascript?
Waiting for Multiple Promises
Synchronous and Asynchronous in JavaScript
Synchronous JavaScript
Asynchronous JavaScript
Explain the Difference between Asynchronous and Deferred JavaScript
Asynchronous
Deferred
Asynchronous vs Deferred
Document Object Model
Document Object Properties
Document Object Methods
Document Object Accessing Field Value
Method Document.Getelementbyid() in Javascript
Getelementsbyclassname()
Method getElementsByClassName() Example
Distinction between the Methods getElementsByClassName(), querySelector(), and querySelectorAll()
Method Document.Getelementsbyname() in Javascript
Method Document.Getelementsbytagname() in Javascript
The Innerhtml in Javascript
InnerHTML Property Example
Example of a Comment Form Using innerHTML
The Innertext in Javascript
Example of JavaScript innerText
5 Methods for Making http Requests in Javascript
XMLHttpRequest
Advantages of XMLHttpRequest
Disadvantages of XMLHttpRequest
Fetch
Advantages of Fetch
Disadvantages of Fetch
Axios
Advantages Axios
Disadvantages Axios
SuperAgent
Advantages of SuperAgent
Disadvantages of SuperAgent
Ky
Advantages of Ky
Disadvantages of Ky
HTTP Cookies
Utilization of Cookies
How Do Cookies Work?
Cookies in JavaScript
Create Cookies
Client Side
Web Server Side
Properties of Cookies
Scope of Cookies
Varieties of Cookie
First-Party Cookies
Third-Party Cookies
Session Cookies
Secure Cookies
Zombie Cookies
Form in Javascript
Overview to Forms
Referencing Forms
Submitting Form
Login Form
SignUp Form
Validation of Javascript Forms
Example of Form Validation in JavaScript
Password Retype Validation in JavaScript
Number Validation in JavaScript
Validation of JavaScript Using an Image
Email Validation in JavaScript
Working with Javascript APIS
The Most Well-Known Javascript Libraries
jQuery
Features
Use Cases
React.js
Features
Use Cases
D3.js
Features
Use Cases
Underscore.js
Features
Use Cases
Lodash
Features
Use Cases
Algolia Places
Features
Use Cases
Anime.js
Features
Use Cases
Animate On Scroll (AOS)
Features
Use Cases
Bideo.js
Features
Use Cases
Chart.js
Features
Use Cases
Cleave.js
Features
Use Cases
Choreographer.js
Features
Use Cases
Glimmer
Features
Use Cases
Granim.js
Features
Use Cases
fullPage.js
Features
Use Cases
Leaflet
Features
Case Studies
Multiple.js
Features
Use Cases
Moment.js
Features
Use Cases
Masonry
Features
Use Cases
Omniscient
Features
Use Cases
Parsley
Features
Use Cases
Popper.js
Features
Use Cases
Three.js
Features
Use Cases
Screenfull.js
Features
Use Cases
Polymer
Features
Use Cases
Voca
Features
Use Cases
Notes
Chapter 4 The Clearer Picture
In this Chapter
A Javascript Framework is What?
What Distinguishes a JavaScript Framework from a JavaScript Library?
Use a JavaScript Framework, But Why?
Libraries and Frameworks for JavaScript
Top 7 Javascript Frontend Frameworks
1. React
How it Operates
Popular React Components
Advantages
Disadvantages
When Should We Utilize React?
2. Vue.js
How it Operates
Real-Life Examples
Popular Vue.js Components
Advantages
Disadvantages
When Should We Utilize Vue.js?
3. Angular
How it Operates
Real-Life Examples
Popular Angular Components
Advantages
Disadvantages
When Should We Utilize Angular?
4. jQuery
How it Operates
Real-Life Examples
Popular jQuery Components
Advantages
Disadvantages
When Should We Utilize jQuery?
5. Svelte
How it Operates
Real-Life Examples
Popular Svelte Components
Advantages
Disadvantages
When Should We Utilize Svelte?
6. Ember
How it Operates
Real-Life Examples
Popular Ember Components
Advantages
Disadvantages
When Should We Utilize Ember?
7. Backbone.js
How it Operates
Real-Life Examples
Advantages
Disadvantages
When Should We Utilize Backbone.js?
How Can We Choose the Ideal JavaScript Framework for Our Next Project?
Team Proficiency
Backward Compatibility
Complexity
Size and Functionality
5 Backend JavaScript Frameworks
The Eight Top Javascript Game Engines
10 Major Javascript Frameworks for Developing Mobile Apps
1. React Native
In What Ways is React Native Superior?
2. NativeScript
Why is NativeScript Used?
3. Ionic
Why is Ionic Used?
4. Apache Cordova
Why Was Cordova Chosen?
5. OnSenUI
Why Use OnSen UI?
6. jQuery Mobile
7. Mobile Angular UI
8. Sencha Touch
9. Titanium
10. Meteor
The Best JS Frameworks for Desktop Applications
Are Cross-Platform Apps Interchangeable with Desktop Programs?
The Advantages and Disadvantages of a Standalone Level vs a Cross-Platform App
Are Desktop Apps Supported by React and NodeJS?
Top Five JS Frameworks for Desktop Applications (Desktop Apps)
1. Electron
2. NodeGUI
3. Proton Native
4. NW.js
5. AppJS
How to Select The Best Javascript Framework for Our Project
Development Speed and Simplicity of Use, as well as Project Support
Trends
Scalability and Mobility
The Frequency of Updates
Which JavaScript Framework Should We Start With?
React.js
Node.js
Java vs. Javascript
Python vs. Javascript
What is JavaScript?
What is Python?
Differences of Most Significance
Features of JavaScript
Features of Python
Comparison between Python vs Java Script
Jquery vs. Javascript
What Exactly is jQuery?
The Distinction between jQuery and JavaScript
Javascript vs. PHP
What Exactly is PHP?
The Distinction between JavaScript and PHP
Dart vs. Javascript
What Exactly is Dart?
Benefits and Drawbacks of Dart
Advantages
Drawbacks
What is JavaScript?
Advantages
Drawbacks
Important Distinction between Dart and JavaScript
Simplicity of Use
Speed
Type Security
Popularity
The Learning Curve
Web vs. Mobile
Frontend vs. Backend
Commercial Usage
Javascript vs. Angular JS
What is JavaScript?
JavaScript Features
What is Angular Js?
Angular JS features
Major Distinctions between JavaScript and Angular JS
Comparative Analysis of JavaScript and Angular JS
Javascript vs. Node.JS
What is JavaScript?
JavaScript's Benefits and Drawbacks are Discussed
Benefits
Drawbacks
What is Node.js?
How Does Node.js Work, and What are its Benefits and Drawbacks?
Benefits
Drawbacks
Comparing JavaScript with Node.js: Key Distinctions
In-Depth Analysis of JavaScript vs. Node JS
Notes
Chapter 5 Frontend Development
In this Chapter
Frontend vs Backend
Frontend Development
Frontend Languages
Frontend Frameworks and Libraries
Backend Development
Backend Languages
Backend Frameworks
Difference between Frontend and Backend Development
ReactJS
What does the 'React' Mean?
The Question is, 'Why React?'
React Features
JSX
Components
Data Binding, One Way Only
Virtual DOM
Simplicity
Performance
Benefits and Drawbacks of ReactJS
Benefits
Drawbacks
Version of React
Setup of the React Environment
ReactJS Installation Methods
1. By Use of the npm Command
Install NPM and NodeJS
Get React and React DOM Installed
Install Webpack
Install Babel
Creation of Files
2. Set React Application Compiler, Loader, and Server
Configure Webpack
HTML Webpack Template for the index.html File
App.jsx and main.js
Creation of .babelrc file
Running Server
Create the Bundle
3. Use the Command create-react-app
Install NodeJS and NPM
Installation of React
Develop a New React Project
App.js
Running Server
Comparison Between AngularJS vs ReactJS
AngularJS
Characteristics of AngularJS
ReactJS
Characteristics of ReactJS
AngularJS vs. ReactJS
Comparison Between ReactJS and Svelte
What is Svelte?
When Need One Use Svelte?
Which Companies Utilize Svelte?
What is React?
When Should React to Be Used?
Which Companies Utilize React?
React vs Svelte: Which is Superior?
Performance
Bundle Size
Testing
Community Assistance
Who Succeeds?
React JSX
Why Use JSX?
JSX Nested Elements
App.JSX
Attributes in JSX
Comments in JSX
Styling in JSX
Express.Js
What is Express.Js
Why Employ Express?
How Does Express Appear?
Basic_express.js
Prerequisite
Audience
Problem
Benefits of Express.js
Wsetting Up Express
The Early Stages
Its Evolution
Basics of Node.Js
Types of Primitive
Loose Typing
Object Literal
Functions
Buffer
Process Object
Defaults to Local
Utilize Global Scope
VueJS
What is VueJS?
Features
Comparative Assessment of Other Frameworks
VueJS vs React
VueJS vs Angular
Similarities
Complexity
Performance
Popularity
Dependencies
Flexibility
Reverse Compatibility
Typescript
Environment Setup For VueJS
Directly Use the <script> Tag in an HTML File
By Using the CDN
By Using the NPM
By Using the CLI Command Line
Creating a Project with Webpack
Start the Project, Then the Server
Understanding Vue.JS
Advantages of Using Vue.js
Extremely Small in Size
Simple to Comprehend and Code
Integration with Existing Applications is Simple
Nature is Adaptable
Components
Documentation that is Simple, Thorough, and Detailed
DOM Virtualization
Two-Way Communication
Companies that Use Vue.js
Examine the Vue.js Version We Have Installed
Instances in VueJS
Example Explanation
Template in Vue.JS
Attributes Should Be Added to HTML Elements
Notes
Chapter 6 Backend Development
In this Chapter
What is Backend Development?
Node.JS
What is Node.js, and How Does it Work?
Why Should We Use Node.js?
Fast, Lightweight Applications with Real-Time Communication
Serverless and Microservice Design
The Internet of Things
Processing of Audio/Video
Quick Development
Code Integration with C++
The Downsides of Node.js
Heavy Calculation Activities Cause Performance Constraints
Callback Hell is a Problem
Tooling Immaturity
There is a Growing Need for Skilled Experts
Where Can We Use Node.js?
Where Should We Not Use Node.js?
Setup of the Node.Js Environment
Text Editor
Node.js Runtime
Get the Node.js Archive
Installation on SunOS, Mac OS X, Linux, and Unix
Setup on a Windows Computer
Executing a File Will Verify Installation
First Application of Node.JS
Creation of Node.js Application
MongoDB
What is MongoDB
How does it Work?
MongoDB Data Modeling
What Distinguishes MongoDB from RDBMS?
MongoDB Features Include
MongoDB Has the Following Advantages
MongoDB Disadvantages
Getting Started with MongoDB
Terminology
How to Get Started
Queries
How can Mongodb be Installed on Windows?
Run Mongo Shell
Server-Side JS
Server-Side Website Programming
Engines that Run JavaScript
Runtime Environment
Uses of Server-Side JavaScript
Mern Stack
Acquainting Oneself with MERN Stack Components
1. MongoDB: Cross-Platform Document-Oriented Database
Why Should We Create Mobile and Web Applications with MERN Stack?
Why Employ MongoDB?
2. Express: Backend Framework
Why Use Express?
3. React: Frontend Library
Why Use React?
4. Node.js: JS Runtime Environment
Why Use Node.JS?
What is the MERN Stack's Structural Makeup and How Does it Operate?
Web or Frontend Layer
Server or Middle Tier
Database as Backend Tier
Mern vs Mean
What are MERN Stack Developers' Futures?
Notes
Chapter 7 JavaScript for Mobile Usage
In this Chapter
Why is Javascript Regarded as One of the Finest Programming Languages for Mobile Apps in 2022?
JavaScript's Importance in the Development of Mobile Applications
Extremely Responsive
Frontend Rich Platform
Offline Assistance
Suitable for All Kinds of Developers
JavaScript Frameworks for Mobile Apps
PhoneGap
Ionic
React Native
jQuery
Native Language
Tabris.js
Should We use Javascript when Developing for Mobile?
Key Attributes of JavaScript
Native React
JQuery
PhoneGap
Ionic
Benefits of Using Javascript when Developing Mobile Apps
React Native
Setting Up a React Native Environment
How to Install React Native Environment in Steps
Install Android Studio
Set Up the Android SDK and the Java JDK
Future Significance of React Native in the Development of Mobile Apps
Why is React Native So Popular?
Building React Native Apps
Benefits of React Native App Development
Cons of React Native
Create a Mobile Application Using React Native
The Leading Cross-Platform Framework, React Native
Why Should We Use React Native When Developing Mobile Apps?
Saves Both Money and Time
High Quality
Over-the-Air Updates
The Main Advantage is Open-Source Software
Nativescript
What is NativeScript?
Why NativeScript is Preferred for the Creation of Android Applications
What is NativeScript? What are its Main Advantages and Disadvantages?
Advantages of Native Apps
Limitations with Native Apps
Setups for NativeScript Environment
Prerequisites
Verify Node.js
CLI Setup
Setupcli
Cli
Setting Up the NativeScript Playground Application
Setup for Android and iOS
Top NativeScript Usage Cases
Key Benefits of Developing Android Apps Using NativeScript
Performance of Native Apps
Reusable Program
The Very Low Learning Curve
Substantial Community Support
Comparison between Nativescript and React Native
Performance of NativeScript and React Native
Learning Curves for NativeScript and React Native
Development Community for React Native vs NativeScript
Popularity of NativeScript vs React Native
Which Should We Use between React Native and NativeScript?
Select NativeScript if
Select React Native if
Notes
Chapter 8 JavaScript for Desktop Apps
In this Chapter
How can we Use Desktop Applications?
What is an Electron?
Installation
What is an Electron?
1. WebTorrent Desktop Application
Why is Electron Used by WebTorrent for Desktop?
2. WordPress Desktop Application
Why does the WordPress Desktop App Make Use of Electron?
3. Ghost Electron Application
Why does the Ghost Desktop App Make Use of Electron?
4. The Electron App Beaker Browser
Why is Electron Used by Beaker Browser?
5. Pexels Electron App
Why does the Pexels Desktop App Make Use of Electron?
6. Slack Desktop Application
Why does the Slack Desktop App Make Use of Electron?
7. WhatsApp Electron Application
Why do so Many Businesses Choose Electron to Create Cross-Platform Desktop Apps?
What is the Significance of This?
Benefits of Electron
Single Codebase
Quick Feature Delivery
Framework Maturity
Electron Has Several Unresolved Concerns
Alternatives for Electron
Drawbacks of Electron.JS Framework
Excessive Volume
Electron.js Framework Consumes a Lot of Resources
Specific Customer Needs
Significance of Using the Electron.JS Framework
Distinction Between the Main and Renderer Processes
Hello Everyone Code in Electron
How does this App Function?
Building UIs with Electron
Notes
Chapter 9 Appraisal
What Exactly is Javascript?
Javascript's Past and its Future
What Makes Javascript Unique?
Languages that are "Superior" To JavaScript
In Comparison to Other Languages, JavaScript
JavaScript Contrasted with C
The Contrast between Java and JavaScript
When Compared to C#, JavaScript is
JavaScript Compared to the Programming Language Python
When Compared to PHP, JavaScript is
JavaScript Compared to the Programming Language Ruby
Opportunities for Professional Development in JavaScript
Frontend Web Developer
Designer and Developer of Web Applications
Developer Skilled in JavaScript
UX/UI Designer
DevOps Engineer
Developer Who Works on All Layers
What is the Most Appropriate Framework for JavaScript?
Vanilla js
Why do we Believe that Frameworks Written in JavaScript are so Awesome?
Appendix I: Javascript Cheat Sheet
Appendix II: Brief Guide to Typescript
Appendix III: Handy Javascript Tools
Index

Conquering JavaScript: The Practical Handbook helps the reader master the JavaScript (JS) programming language for faster and more robust development. JS is a highly popular language and is often termed as the ‘language of the web.’ In addition to the internet, JS is also being used actively in game development, mobile apps, progressive applications, and now even desktop apps. As such, it is safe to say that JS is probably the most cross-platform language currently in use, and it rises in popularity with each passing day.
This book covers the basics and moves on to advanced concepts using a hands-on approach with practical lessons and tutorials. JS programming, JS frameworks and various use-case scenarios are discussed in detail. Bridging the gap between beginner and intermediate-level JS literature, this book is a valuable resource to build robust knowledge.