JavaScript. A Comprehensive manual for creating dynamic, responsive websites and applications: Suitable For Both Novice And Experts.

Audience

This tutorial is designed for the aspiring Web Designers and Developers with a need to understand JavaScripting in enough detail along with its simple overview, and practical examples. This tutorial will give you enough ingredients to start with JavaScript from where you can take yourself at higher level of expertise.

Prerequisites

Before proceeding with this tutorial you should have a basic working knowledge with Windows or Linux operating system, additionally you must be familiar with:

Experience with any text editor like notepad, notepad++, or Edit plus etc.

Have Basic and Advanced Knowledge of HTML.

How to create directories and files on your computer.

How to navigate through different directories.

How to type content in a file and save them on a computer.

Understanding about images in different formats like JPEG, PNG format.

Knowledge of How to use Google Sheets (Excel Sheet).

Contents

Audience

Chapter One

Features of JavaScript

1. Web Applications

2. Web Development

3. Mobile Applications

4. Game

5. Presentations

6. Server Applications

7. Web Servers

Application of JavaScript

External References

Chapter Two

JavaScript Basics

JavaScript Can Change HTML Content

JavaScript Can Change HTML Attribute Values

JavaScript Can Change HTML Styles (CSS)

JavaScript Can Hide HTML Elements

JavaScript Can Show HTML Elements

The

JavaScript Functions and Events

JavaScript in or

JavaScript in

JavaScript in

JavaScript Expressions

JavaScript Display Possibilities

Using innerHTML

Using document.write()

Using window.alert()

Using console.log()

JavaScript Print

JavaScript Statements

JavaScript Programs

JavaScript Statements

JavaScript White Space

JavaScript Line Length and Line Breaks

JavaScript Code Blocks

JavaScript Keywords

JavaScript Values

JavaScript Literals

Chapter Three

JavaScript Comment

Types of JavaScript Comments

JavaScript Single line Comment

JavaScript Multi line Comment

Using JavaScript Comments to Prevent Code Execution

Commenting Out Function Calls

Commenting Out Function Bodies — Without Return Values

Commenting Out Function Bodies — With Return Values

Writing Effective JavaScript Comments

Chapter  Four

JavaScript Variable

JavaScript Keywords

JavaScript Variable Naming Convention

JavaScript Var Keyword

JavaScript Let Keyword

JavaScript Const Keyword

When to Use JavaScript const?

JavaScript Local Variable

Function Scope

JavaScript Global Variable

Internals of global variable in JavaScript

Automatically Global

Global Variables in HTML

How to use variables

Where to use which variable

Chapter Five

JavaScript Operators

JavaScript Assignment

Assignment Examples

JavaScript Arithmetic Operators

JavaScript Assignment Operators

JavaScript Comparison Operators

JavaScript String Addition

Adding Strings and Numbers

JavaScript Logical Operators

JavaScript Bitwise Operators

Bitwise logical operators

JavaScript Bitwise AND

Example

JavaScript Bitwise OR

Example:

JavaScript Bitwise XOR

JavaScript Bitwise NOT (~)

JavaScript (Zero Fill) Bitwise Left Shift (<<)

JavaScript (Sign Preserving) Bitwise Right Shift (>>)

JavaScript (Zero Fill) Right Shift (>>>)

Converting Decimal to Binary

Converting Binary to Decimal

Chapter Six

JavaScript Data Types

JavaScript primitive data types

JavaScript non-primitive data types

Examples

The Concept of Data Types

JavaScript Types are Dynamic

JavaScript Strings

JavaScript String Methods

JavaScript String Length

Extracting String Parts

JavaScript String slice()

Examples

JavaScript String substring()

Replacing String Content

JavaScript String ReplaceAll()

Converting to Upper and Lower Case

JavaScript String concat()

JavaScript String trim()

JavaScript Numbers

JavaScript Random

Exponential Notation

JavaScript BigInt

JavaScript Integer Accuracy

How to Create a BigInt

JavaScript Booleans

The Boolean() Function

NaN data type

Comparisons and Conditions

JavaScript Comparison and Logical Operators

Comparison Operators

How Can it be Used

Conditional (Ternary) Operator

Comparing Different Types

JavaScript if, else, and else if

Conditional Statements

The if Statement

Example

The else Statement

Example

The else if Statement

Example

JavaScript Switch Statement

Example

The break Keyword

The default Keyword

JavaScript Arrays

JavaScript Array

JavaScript Array Methods

JavaScript Objects

The type of Operator

Chapter  Seven

JavaScript Functions

Function Syntax

Function declarations

Function Invocation

Invoking a JavaScript Function

The Term  This in Javascript

Note

The Global Object

Invoking a Function as a Method

Invoking a Function with a Function Constructor

Function Return

The ( ) Operator

Functions Used as Variable Values

Local Variables

Chapter Eight

JavaScript Objects

Real Life Objects, Properties, and Methods

Object Definition

Object Properties

Accessing Object Properties

Object Methods

The this Keyword

Accessing Object Methods

Do Not Declare Strings, Numbers, and Booleans as Objects!

Chapter  Nine

JavaScript Events

HTML Events

Mouse events:

onclick Event Type

onsubmit Event Type

onmouseover and onmouseout

Keyboard events:

Form events:

Window/Document events

HTML DOM Events

JavaScript Event Handlers

Chapter Ten

JavaScript  Loop

The For Loop

do...while statement

Example:

Differences between do… while and While Loop

While Statement

Example:

Comparison between the while and for loop:

Example: JavaScript For In Loop

for-in Loop Examples

The For Of Loop

Properties of document object

Methods of document object

Accessing field value by document object

JavaScript - document.getElementById() method

JavaScript - document.getElementsByName() method

JavaScript - document.getElementsByTagName() method

Another example of document.getElementsByTagName() method

JavaScript - innerHTML

Example of innerHTML property

Show/Hide Comment Form Example using innerHTML

JavaScript - innerText

JavaScript innerText Example

Understanding the Browser Environment

The user interface

Loader

HTML parsing

CSS parsing

JavaScript parsing

Layout and rendering

Igniting the BOM

The Navigator Object

Window Object

Methods of window object

Example of alert() in javascript

Example of confirm() in javascript

Example of prompt() in javascript

Example of open() in javascript

Example of setTimeout() in javascript

JavaScript History Object

Property of JavaScript history object

Methods of JavaScript history object

Example of history object

JavaScript Navigator Object

Property of JavaScript navigator object

Methods of JavaScript navigator object

Example of navigator object

JavaScript Screen Object

Property of JavaScript Screen Object

Example of JavaScript Screen Object

Approach for Form Validation in JavaScript

JavaScript Form Validation Example

JavaScript Retype Password Validation

JavaScript Number Validation

JavaScript validation with image

JavaScript email validation

JavaScript Classes

Class Declarations

Class Declarations Example

Class Declarations Example: Hoisting

Class Declarations Example: Re-declaring Class

Class expressions

Unnamed Class Expression

Class Expression Example: Re-declaring Class

Named Class Expression Example

JavaScript Objects

Creating Objects in JavaScript

1) JavaScript Object by object literal

2) By creating instance of Object

3) By using an Object constructor

Defining method in JavaScript Object

JavaScript Object Methods

JavaScript Prototype Object

Syntax:

Prototype Chaining

JavaScript Prototype Object

JavaScript Constructor Method

Points to remember

Constructor Method Example

JavaScript static Method

JavaScript static Method Example

Example 4

JavaScript Encapsulation

JavaScript Encapsulation Example

JavaScript Encapsulation Example: Validate

JavaScript Encapsulation Example: Prototype-based approach

JavaScript Inheritance

JavaScript extends Example: inbuilt object

JavaScript extends Example: Custom class

JavaScript extends Example: a Prototype-based approach

JavaScript Polymorphism

JavaScript Abstraction

Chapter Fifteen

JavaScript Cookies

How Cookies Works?

How to create a Cookie in JavaScript?

JavaScript Cookie Example

Cookie Attributes

Cookie expires attribute

Cookie max-age attribute

Cookie path attribute

Cookie path attribute Example

Cookie domain attribute

Cookie with multiple Name-Value pairs

Examples to Store Name-Value pair in a Cookie

Deleting a Cookie in JavaScript

Examples to delete a Cookie

Example 3

Chapter Sixteen

Integrating JavaScript with Google Apps Script

What can Apps Script do?

Custom Menus in Google Workspace

Clickable images and drawings in Google Sheets

Dialogs and Sidebars in Google Workspace Documents.

Alert dialogs

Prompt dialogs

Custom dialogs

Custom sidebars

File-open dialogs

Custom Functions in Google Sheets

Developing a custom function

obtaining a personalized feature via the Google Workspace Marketplace

Using a custom function

Guidelines for custom functions

Naming

Arguments

Return values

Data types

Autocomplete

Using Google Apps Script services

Sharing

Optimization

Google Sheets Macros

Creating macros in Apps Script

Editing macros

Importing functions as macros

Manifest structure for macros

Best practices

Things you can't do

Chapter Seventeen

Developing Web Apps in Apps Script

Requirements for web apps

Request parameters

Deploy a script as a web app

Test a web app deployment

Permissions

Embed your web app in Google Sites or any Site of your Choice.

Web Apps and Browser History

How to create Login and Register Form using Google spreadsheet data

How to Display Google Sheet Data on Webpage

How to Submit HTML Form Data to Google Spreadsheet

How to Submit HTML Form to Gmail

How to Search Google Sheet Contents  from HTML Website.

Conclusion

References

Chapter One

JavaScript Introduction



Many websites utilize JavaScript (js), a lightweight object-oriented programming language, to script their webpages. When applied to an HTML document, this fully functional programming language that is interpreted allows for dynamic website interaction.

In 1995, JavaScript was released, allowing users of the Netscape Navigator browser to add applications to web pages. Since then, all other major graphical web browsers have implemented the language. It has enabled the development of contemporary online applications, which allow for immediate user interaction without requiring a page reload. Conventional websites also employ JavaScript to provide a variety of innovative features and interactive elements (Netscape, 2007).

Brendan Eich wrote JavaScript in ten days in May 1995. Eich was employed by Netscape, where he developed JavaScript for Netscape Navigator, the company's web browser. The plan was to use Java to create the main interactive components of the client-side web. JavaScript was intended to serve as the connecting language between those elements and to provide a little bit of interactivity to HTML. JavaScript needed to look like Java because of its supporting function in Java. That eliminated working options like TCL, Python, Perl, and others (W3C, 2021).

JavaScript is a language that improves the Web. The language can assist in transforming a static page of text into an intelligent, dynamic, and engaging experience when used on the client computer. JavaScript applications can be as subtle as greeting a visitor to a website with Good morning! when it is morning in the client computer's time zone. Other apps may be considerably more straightforward, like one that downloads a slide show's content in one page and uses JavaScript to manage the presentation's hiding, showing, and flying slide transitions.

JavaScript was first known as Mocha. When Netscape Navigator was first released in beta, it was called LiveScript. When Netscape 2 was released in 1995, it was renamed JavaScript. To avoid trademark difficulties, Microsoft swiftly reverse-engineered JavaScript and launched an exact clone of it in Internet Explorer, which they called Jscript.

JavaScript was accepted and standardized as EMCAScript in 1997 after Netscape submitted it to Ecma International, a standards body. Nevertheless, JavaScript and Java are unrelated programming languages. During the period when Java was becoming more and more prominent in the market, the name was offered and suggested. Databases like CouchDB and MongoDB use JavaScript as their scripting and query language in addition to web browsers. JavaScript founder Brandon Eich is well-known for his remarks against the standardized language's name, referring to ECMAScript (Ecma International) as a unwanted trade name that sounds like a skin disease.

Not only is ECMAScript a terrible moniker for a programming language, but it's also the name that Netscape gave the language and that most people use to refer to it. If you are familiar with programming in Java or would like to learn at some time, it is a good idea to remember that although there are some similarities between the two languages, they are very different things. When JavaScript first came out, it was widely used to add dynamic elements to websites.

An early outcome of JavaScript being integrated into web browsers was the creation of so-called Dynamic HTML (DHTML), which allowed for a variety of entertaining effects, such as the falling snowflake effect, pop-up windows, and curling web page corners, as well as more practical features like drop-down menus and form validation.

Features of JavaScript

The following are features of JavaScript:

All popular web browsers support JavaScript as they provide built-in execution environments.

JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured programming language.

JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the operation).

JavaScript is an object-oriented programming language that uses prototypes rather than using classes for inheritance.

It is a light-weighted and interpreted language.

It is a case-sensitive language.

JavaScript is supportable in several operating systems including, Windows, macOS, etc.

It provides good control to the users over the web browsers.

Uses of JavaScript

JavaScript is a programming language that enables the implementation of intricate features on websites. You can be sure that JavaScript is used whenever a website performs any function other than merely displaying static content for you to view. Examples of such functions include interactive maps, scrolling video jukeboxes, animated 2D/3D graphics, and timely content updates. It is the third layer in the stack of common web technologies, the first two of which (CSS and HTML) we have already thoroughly discussed in other Learning Area sections.

Many websites utilize JavaScript, a lightweight object-oriented programming language, to script their webpages. It is a complete programming language that is interpreted. When JavaScript is added to an HTML page, websites may have dynamic interactivity.

JavaScript enables users to create interactive contemporary web apps without constantly refreshing the page. JavaScript is frequently used with the DOM API to refresh a user interface by dynamically modifying HTML and CSS.

It is mostly employed in online programs. Let's talk about JavaScript's applications. An example of how JavaScript is used is seen in the image below.



1. Web Applications

Because browsers are getting better every day, JavaScript has become more and more popular as a tool for creating reliable online applications. We may comprehend it by using Google Maps as an example. With Maps, all a user needs to do is click and drag the mouse to view the information. These ideas are supported by the usage of JavaScript.

2. Web Development

Creating web pages is a typical usage for JavaScript. It enables us to add special effects and dynamic behavior to the webpage. It is mostly used for validation on websites. JavaScript facilitates the execution of intricate tasks and allows websites to communicate with their users. Another way to load material into a document without refreshing the webpage is by using JavaScript.

3. Mobile Applications

Nowadays, a lot of people utilize their mobile devices to access the internet. We can also create an application for non-web environments using JavaScript. JavaScript is a fantastic technology for developing mobile applications because of its capabilities and applications. The popular JavaScript framework for making mobile apps is called React Native. We can create mobile applications for several operating systems with React Native. Writing separate code for the iOS and Android operating systems is not necessary. It simply has to be written once, and it can operate on several systems.

4. Game

Games may also be made with JavaScript. It offers a number of frameworks and libraries for making games. Either a 2D or 3D game may be played. A few JavaScript game engines like Pixi.js and PhysicsJS assist us in making an online game. Additionally, we may render 2D and 3D pictures on browsers by using the JavaScript API known as the WebGL (web graphics library).

5. Presentations

Moreover, JavaScript facilitates the creation of websites and presentations. You may utilize the libraries, such BespokeJs and RevealJs, to make an online slide show. Because they are simpler to utilize, we can quickly and simply create something incredible.

With the use of HTML, Reveal.js is used to build stunning and dynamic slide decks. Tablets and mobile devices are ideal for these presentations. All CSS color formats are also supported. Animated bullet lists, responsive scaling, and an extensive feature set are all included in the BespokeJS.

6. Server Applications

Many web applications feature a server-side component. HTTP requests are handled and content is generated using JavaScript. Node.js allows JavaScript to operate on servers as well. The environment that Node.js offers has all the tools needed for JavaScript to execute on servers.

7. Web Servers

Node.js may be used to develop a web server. Because Node.js is event-driven, it doesn't wait for the preceding call's answer. Node.js servers carry large amounts of data quickly and without the need for buffering. The createServer() function in the HTTP module may be used to create the server. Whenever someone attempts to access port 8080, this function gets called. The HTTP server should show HTML in response, and it should also be provided in the HTTP header.

Application of JavaScript

Websites that are interactive are made with JavaScript. There are several other applications for JavaScript that aid in enhancing webpage speed. The following is a list of