Module -2
JavaScript
What is JavaScript
1. JavaScript (js) is a light-weight object-oriented programming language
which is used by several websites for scripting the webpages.
2. JavaScript was developed by Mr. Brendan Eich in 1995 who was working in
Netscape.
3. The JavaScript Translator(embedded in the browser) is responsible for
translating the JavaScript code for the web browser.
4. It is an interpreted, full-fledge programming languages that enables
dynamic interactivity on websites when applied to an HTML document.
5. JavaScript helps to make our webpage more lively and interactive.
JavaScript is widely used in mobile application development as well as in
game development
6. JavaScript was initially called as Live Script and later on the name is
changed to JavaScript. With JavaScript, users can build modern web
applications to interact directly without reloading the page every time.
The traditional websites uses .js to provide several forms of
interactivity and simplicity
How to Link JavaScript File in HTML ?
• JavaScript can be added to HTML file in two ways:
• Internal JS: We can add JavaScript directly to our HTML file by writing the code
inside the <script> tag. The <script> tag can either be placed inside the <head> or
the <body> tag according to the requirement.
• External JS: We can write JavaScript code in another files hand then link this file
inside the <head> tag of the HTML file in which we want to add this code.
Syntax:
<script>
// JavaScript Code
</script>
Characteristics of JavaScript
• JavaScript is a lightweight, interpreted, client-side scripting language.
• Designed for developing network- based applications.
• JavaScript is complementary to Java.
• JavaScript is complementary to and integrated with HTML. It is open source
and cross-platform.
• The user input is validated before sending the page to the server. The
minimizes the server traffic, which tends to fewer loads on the server.
• There is no need for the user to wait to see if something has forgotten to
enter.
• Interactive interfaces can be created, which can give responses to end user
actions like mouse or keyboard activities.
• JavaScript can include elements like drag-drop components and sliders to
provide a feel of rich interfaces to the users.
Features of JavaScript
• There are following 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 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.
Application of JavaScript
• JavaScript is used to create interactive websites. It is mainly used for:
• Client-side validation,
• Dynamic drop-down menus,
• Displaying date and time,
• Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm
dialog box and prompt dialog box),
• Displaying clocks etc
Difference between ES5 and ES6
• ECMAScript 5 (ES5P)
• ES5 is also known as ECMAScript 2009 as it was released in 2009. It is a
function contractors focus on how the objects are instantiated. For ES5 you
have to write a function keyword and return, it to be used to define the
function, like in normal general JavaScript language.
• ECMAScript 6 (ES6)
• ES6 is also known as ECMAScript 2015 as it was released in 2015. Its class
allows the developers to instantiate an object using the new operator, using
an arrow function, in case it doesn’t need to use the function keyword to
define the function, also return keyword can be avoided to fetch the computer
value.
Form Validation
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.
• Common events include mouse clicks, keyboard presses, page loads,
and form submissions. Event handlers are JavaScript functions that
respond to these events, allowing developers to create interactive
web applications.
Mouse events:
Click Event
MouseOver Event
Mouse Up/ Down
Key Up / Down
Focus Event
Load event
JavaScript addEventListener()
• The addEventListener() method is used to attach an event handler to a
particular element. It does not override the existing event handlers. Events
are said to be an essential part of the JavaScript. A web page responds
according to the event that occurred. Events can be user-generated or
generated by API's. An event listener is a JavaScript's procedure that waits for
the occurrence of an event.
• The addEventListener() method is an inbuilt function of JavaScript. We can
add multiple event handlers to a particular element without overwriting the
existing event handlers.
• Syntax
• element.addEventListener(event, function, useCapture);
• Although it has three parameters, the parameters event and function are widely used. The
third parameter is optional to define. The values of this function are defined as follows.
• Parameter Values
• event: It is a required parameter. It can be defined as a string that specifies the event's
name.
• function: It is also a required parameter. It is a JavaScript function which responds to the
event occur.
• useCapture: It is an optional parameter. It is a Boolean type value that specifies whether
the event is executed in the bubbling or capturing phase. Its possible values
are true and false. When it is set to true, the event handler executes in the capturing
phase. When it is set to false, the handler executes in the bubbling phase. Its default value
is false.
In this example, we are adding multiple events to the same element
Promise
JavaScript Cookies
• A cookie is an amount of information that persists between a server-side and
a client-side. A web browser stores this information at the time of browsing.
• A cookie contains the information as a string generally in the form of a name-
value pair separated by semi-colons. It maintains the state of a user and
remembers the user's information among all the web pages.
How Cookies Works?
1. When a user sends a request to the server, then each of that request is treated
as a new request sent by the different user.
2. So, to recognize the old user, we need to add the cookie with the response
from the server.
3. browser at the client-side.
4. Now, whenever a user sends a request to the server, the cookie is added with
that request automatically. Due to the cookie, the server recognizes the users.
• How to create a Cookie in JavaScript?
• In JavaScript, we can create, read, update and delete a cookie by
using document.cookie property.
• The following syntax is used to create a cookie:
Creating Cookie in JavaScript
• Cookies are created by a web server and sent to the user’s browser
as part of the HTTP response headers.
• Creating cookies in JavaScript involves using the document.cookie
object to set key-value pairs and additional parameters. To create a
cookie, assign a string containing the desired cookie information to
document.cookie. This string can include attributes like expiration
date, domain, and path.
Generators and Iterators in JavaScript
• Generators
• The Generators are a special type of function in JavaScript that can be
paused and resumed during their execution. They are defined using
the asterisk (*) after the function keyword. The Generators use the
yield keyword to yield control back to the caller while preserving their
execution context. The Generators are useful for creating iterators,
asynchronous code, and handling sequences of data without loading
all the data into the memory at once.
Iterators
• The Iterators are objects with a special structure in
JavaScript. They must have a next() method that returns an
object with the value and done properties. The value
property represents the next value in the sequence and the
done property indicates whether there are more values to be
iterated. The Iterators are commonly used for iterating over
data structures like arrays, maps, and sets.
Difference between Generators and Iterators:
Browser Object Model
• The Browser Object Model (BOM) is used to interact with the browser.
• The default object of browser is window means you can call all the functions
of window by specifying window or directly. For example
Browser Object Model Types
Window Object
• The ‘window object in JavaScript represents your web browser’s window.
Everything you create in JavaScript, like variables and functions, is
automatically part of this window.
• Global variables are like items in the window, and global functions are tools
you can use from anywhere. The “document” object, which deals with HTML
content, is also a special tool in the window. So, think of the “window” as a
big container holding all your JavaScript stuff.
JavaScript History Object
• The JavaScript history object represents an array of URLs visited by the user.
By using this object, you can load previous, forward or any particular page.
• The history object is the window property, so it can be accessed by:
• Property of JavaScript history object
JavaScript Navigator Object
• The JavaScript navigator object is used for browser detection. It can be used
to get browser information such as appName, appCodeName, userAgent etc.
• The navigator object is the window property, so it can be accessed by:
• Property of JavaScript navigator object
JavaScript Screen Object
• The JavaScript screen object holds information of browser screen. It can be
used to display screen width, height, colorDepth, pixelDepth etc.
• The navigator object is the window property, so it can be accessed by:
• Property of JavaScript Screen Object
Data Type
Differences between var , let, and const
Conditional Statements in JavaScript
• JavaScript conditional statements allow you to execute specific blocks of code based on
conditions. If the condition is met, a particular block of code will run; otherwise, another
block of code will execute based on the condition.
JavaScript Loops
• The JavaScript loops are used to iterate the piece of code using for,
while, do while or for-in loops. It makes the code compact. It is mostly
used in array.
• There are four types of loops in JavaScript.
1. for loop
2. while loop
3. do-while loop
4. for-in loop
JavaScript Functions
• JavaScript functions are used to perform operations. We can call JavaScript
function many times to reuse the code.
Advantage of JavaScript function
There are mainly two advantages of JavaScript functions.
1. Code reusability: We can call a function several times so it save coding.
2. Less coding: It makes our program compact. We don’t need to write many
lines of code each time to perform a common task.
Arrow Function with Default Parameters
JavaScript Inheritance
• The JavaScript inheritance is a mechanism that allows us to create new
classes on the basis of already existing classes. It provides flexibility to the
child class to reuse the methods and variables of a parent class.
• The JavaScript extends keyword is used to create a child class on the basis of a
parent class. It facilitates child class to acquire all the properties and behavior
of its parent class.
Uses of Inheritance
• Since a child class can inherit all the functionalities of the parent's
class, this allows code reusability.
• Once a functionality is developed, you can simply inherit it. This
allows for cleaner code and easier to maintain.
• Since you can also add your own functionalities in the child class, you
can inherit only the useful functionalities and define other required
features.
