JavaScript

JavaScript is a lightweight, cross-platform, and interpreted compiled programming language which is also
known as the scripting language for webpages. It is well-known for the development of web pages, many
non-browser environments also use it. JavaScript can be used for Client-side developments as well
as Server-side developments. JavaScript is both imperative and declarative type of language.

• Client-side: It supplies objects to control a browser and its Document Object Model (DOM).
Like if client-side extensions allow an application to place elements on an HTML form and
respond to user events such as mouse clicks, form input, and page navigation. Useful libraries
for the client-side are AngularJS, ReactJS, VueJS and so many others.
• Server-side: It supplies objects relevant to running JavaScript on a server. Like if the server-
side extensions allow an application to communicate with a database, and provide continuity
of information from one invocation to another of the application, or perform file
manipulations on a server. The useful framework which is the most famous these days
is node.js.
• Imperative language – In this type of language we are mostly concern about how it is to be
done. It simply control the flow of computation. The procedural programming approach,
object, oriented approach comes under this like async await we are thinking what it is to be
done further after async call.
• Declarative programming – In this type of language we are concern about how it is to be
done, basically here logical computation require. Here main goal is to describe the desired
result without direct dictation on how to get it like arrow function do.

Applications of JavaScript:

• Web Development: Adding interactivity and behavior to static sites JavaScript was invented to
do this in 1995. By using AngularJS that can be achieved so easily.
• Web Applications: With technology, browsers have improved to the extent that a language
was required to create robust web applications. When we explore a map in Google Maps then
we only need to click and drag the mouse. All detailed view is just a click away, and this is
possible only because of JavaScript. It uses Application Programming Interfaces(APIs) that
provide extra power to the code. The Electron and React is helpful in this department.
• Server Applications: With the help of Node.js, JavaScript made its way from client to server
and node.js is the most powerful on the server-side.
 • Games: Not only in websites, but JavaScript also helps in creating games for leisure. The
combination of JavaScript and HTML 5 makes JavaScript popular in game development as well.
It provides the EaseJS library which provides solutions for working with rich graphics.
• Smartwatches: JavaScript is being used in all possible devices and applications. It provides a
library PebbleJS which is used in smartwatch applications. This framework works for
applications that require the internet for its functioning.
• Art: Artists and designers can create whatever they want using JavaScript to draw on HTML 5
canvas, and make the sound more effective also can be used p5.js library.
• Machine Learning: This JavaScript ml5.js library can be used in web development by using
machine learning.
• Mobile Applications: JavaScript can also be used to build an application for non-web contexts.
The features and uses of JavaScript make it a powerful tool for creating mobile applications.
This is a Framework for building web and mobile apps using JavaScript. Using React Native, we
can build mobile applications for different operating systems. We do not require to write code
for different systems. Write once use it anywhere!

Limitations of JavaScript:
• Security risks: JavaScript can be used to fetch data using AJAX or by manipulating tags that
load data such as <img>, <object>, <script>. These attacks are called cross site script attacks.
They inject JS that is not the part of the site into the visitor’s browser thus fetching the
details.
• Performance: JavaScript does not provide the same level of performance as offered by many
traditional languages as a complex program written in JavaScript would be comparatively
slow. But as JavaScript is used to perform simple tasks in a browser, so performance is not
considered a big restriction in its use.
• Complexity: To master a scripting language, programmers must have a thorough knowledge
of all the programming concepts, core language objects, client and server-side objects
otherwise it would be difficult for them to write advanced scripts using JavaScript.
• Weak error handling and type checking facilities: It is weakly typed language as there is no
need to specify the data type of the variable. So wrong type checking is not performed by
compile.

JavaScript Events

The change in the state of an object is known as an Event. In html, there are various events which represents
that some activity is performed by the user or by the browser. When javascript code is included in HTML, js
react over these events and allow the execution. This process of reacting over the events is called Event
Handling. Thus, js handles the HTML events via Event Handlers.

For example, when a user clicks over the browser, add js code, which will execute the task to be performed
on the event.

Some of the HTML events and their event handlers are:

Mouse events:

Event Performed Event Handler Description

click onclick When mouse click on an element

 mouseover onmouseover When the cursor of the mouse comes over the
element

mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the element

mouseup onmouseup When the mouse button is released over the

element

mousemove onmousemove When the mouse movement takes place.

Keyboard events:

Event Performed Event Handler Description

Keydown & Keyup onkeydown & onkeyup When the user press and then release the
key

Form events:

Event Performed Event Handler Description

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a form element

change onchange When the user modifies or changes the value of a form
element

Window/Document events

Event Performed Event Handler Description

 load onload When the browser finishes the loading of the page

unload onunload When the visitor leaves the current webpage, the browser
unloads it

resize onresize When the visitor resizes the window of the browser

Client-Side JavaScript

• Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.
• It means that a web page need not be a static HTML, but can include programs that interact with
the user, control the browser, and dynamically create HTML content.
• The JavaScript client-side mechanism provides many advantages over traditional CGI server-side
scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address
in a form field.
• The JavaScript code is executed when the user submits the form, and only if all the entries are valid,
they would be submitted to the Web Server.
• JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other
actions that the user initiates explicitly or implicitly.

Different types of client-side validation

There are two different types of client-side validation that you'll encounter on the web:

• Built-in form validation uses HTML5 form validation features, which we've discussed in many
places throughout this module. This validation generally doesn't require much JavaScript. Built-in
form validation has better performance than JavaScript, but it is not as customizable as JavaScript
validation.
• JavaScript validation is coded using JavaScript. This validation is completely customizable, but you
need to create it all (or use a library).

Using built-in form validation

One of the most significant features of HTML5 form controls is the ability to validate most user data
without relying on JavaScript. This is done by using validation attributes on form elements. We've seen
many of these earlier in the course, but to recap:

• required: Specifies whether a form field needs to be filled in before the form can be submitted.
• minlength and maxlength: Specifies the minimum and maximum length of textual data (strings)
• min and max: Specifies the minimum and maximum values of numerical input types
• type: Specifies whether the data needs to be a number, an email address, or some other specific
preset type.
• pattern: Specifies a regular expression that defines a pattern the entered data needs to follow.

If the data entered in a form field follows all of the rules specified by the above attributes, it is considered
valid. If not, it is considered invalid.
When an element is valid, the following things are true:

• The element matches the :valid CSS pseudo-class, which lets you apply a specific style to valid
elements.
• If the user tries to send the data, the browser will submit the form, provided there is nothing else
stopping it from doing so (e.g., JavaScript).

When an element is invalid, the following things are true:

• The element matches the :invalid CSS pseudo-class, and sometimes other UI pseudo-classes
(e.g., :out-of-range) depending on the error, which lets you apply a specific style to invalid
elements.
• If the user tries to send the data, the browser will block the form and display an error message.

Note: There are several errors that will prevent the form from being submitted, including
a badInput, patternMismatch, rangeOverflow or rangeUnderflow, stepMismatch, tooLong or tooShort,
typeMismatch, valueMissing, or a customError.

Client-side form validation

Before submitting data to the server, it is important to ensure all required form controls are filled out, in
the correct format. This is called client-side form validation, and helps ensure data submitted matches the
requirements set forth in the various form controls. This article leads you through basic concepts and
examples of client-side form validation.

Client-side validation is an initial check and an important feature of good user experience; by catching
invalid data on the client-side, the user can fix it straight away. If it gets to the server and is then rejected, a
noticeable delay is caused by a round trip to the server and then back to the client-side to tell the user to
fix their data.

However, client-side validation should not be considered an exhaustive security measure! Your apps should
always perform security checks on any form-submitted data on the server-side as well as the client-side,
because client-side validation is too easy to bypass, so malicious users can still easily send bad data through
to your server. Read Website security for an idea of what could happen; implementing server-side
validation is somewhat beyond the scope of this module, but you should bear it in mind.

What is form validation?

Go to any popular site with a registration form, and you will notice that they provide feedback when you
don't enter your data in the format they are expecting. You'll get messages such as:

• "This field is required" (You can't leave this field blank).

• "Please enter your phone number in the format xxx-xxxx" (A specific data format is required for it to
be considered valid).
• "Please enter a valid email address" (the data you entered is not in the right format).
• "Your password needs to be between 8 and 30 characters long and contain one uppercase letter,
one symbol, and a number." (A very specific data format is required for your data).

This is called form validation. When you enter data, the browser and/or the web server will check to see
that the data is in the correct format and within the constraints set by the application. Validation done in
the browser is called client-side validation, while validation done on the server is called server-
side validation. In this chapter we are focusing on client-side validation.
If the information is correctly formatted, the application allows the data to be submitted to the server and
(usually) saved in a database; if the information isn't correctly formatted, it gives the user an error message
explaining what needs to be corrected, and lets them try again.

We want to make filling out web forms as easy as possible. So why do we insist on validating our forms?
There are three main reasons:

• We want to get the right data, in the right format. Our applications won't work properly if our
users' data is stored in the wrong format, is incorrect, or is omitted altogether.
• We want to protect our users' data. Forcing our users to enter secure passwords makes it easier to
protect their account information.
• We want to protect ourselves. There are many ways that malicious users can misuse unprotected
forms to damage the application (see Website security).

Validating forms using JavaScript

You must use JavaScript if you want to take control over the look and feel of native error messages or to
deal with legacy browsers that do not support HTML's built-in form validation. In this section we will look at
the different ways to do this.

The Constraint Validation API

Most browsers support the Constraint Validation API, which consists of a set of methods and properties
available on the following form element DOM interfaces:

• HTMLButtonElement (represents a <button> element)

• HTMLFieldSetElement (represents a <fieldset> element)
• HTMLInputElement (represents an <input> element)
• HTMLOutputElement (represents an <output> element)
• HTMLSelectElement (represents a <select> element)
• HTMLTextAreaElement (represents a <textarea> element)

The Constraint validation API makes the following properties available on the above elements.

• validationMessage: Returns a localized message describing the validation constraints that the control
doesn't satisfy (if any). If the control is not a candidate for constraint validation ( willValidate is false)
or the element's value satisfies its constraints (is valid), this will return an empty string.
• validity: Returns a ValidityState object that contains several properties describing the validity state of
the element. You can find full details of all the available properties in the ValidityState reference
page; below is listed a few of the more common ones:
o patternMismatch: Returns true if the value does not match the specified pattern, and false if it
does match. If true, the element matches the :invalid CSS pseudo-class.
o tooLong: Returns true if the value is longer than the maximum length specified by
the maxlength attribute, or false if it is shorter than or equal to the maximum. If true, the
element matches the :invalid CSS pseudo-class.
o tooShort: Returns true if the value is shorter than the minimum length specified by
the minlength attribute, or false if it is greater than or equal to the minimum. If true, the
element matches the :invalid CSS pseudo-class.
o rangeOverflow: Returns true if the value is greater than the maximum specified by
the max attribute, or false if it is less than or equal to the maximum. If true, the element
matches the :invalid and :out-of-range CSS pseudo-classes.
 o rangeUnderflow: Returns true if the value is less than the minimum specified by
the min attribute, or false if it is greater than or equal to the minimum. If true, the element
matches the :invalid and :out-of-range CSS pseudo-classes.
o typeMismatch: Returns true if the value is not in the required syntax
(when type is email or url), or false if the syntax is correct. If true, the element matches
the :invalid CSS pseudo-class.
o valid: Returns true if the element meets all its validation constraints, and is therefore
considered to be valid, or false if it fails any constraint. If true, the element matches
the :valid CSS pseudo-class; the :invalid CSS pseudo-class otherwise.
o valueMissing: Returns true if the element has a required attribute, but no value,
or false otherwise. If true, the element matches the :invalid CSS pseudo-class.
• willValidate: Returns true if the element will be validated when the form is
submitted; false otherwise.

The Constraint Validation API also makes the following methods available on the above elements and
the form element.

• checkValidity(): Returns true if the element's value has no validity problems; false otherwise. If the
element is invalid, this method also fires an invalid event on the element.
• reportValidity(): Reports invalid field(s) using events. Useful in combination with preventDefault() in
an onSubmit event handler
• setCustomValidity(message): Adds a custom error message to the element; if you set a custom error
message, the element is considered to be invalid, and the specified error is displayed. This lets you
use JavaScript code to establish a validation failure other than those offered by the standard HTML5
validation constraints. The message is shown to the user when reporting the problem.