WT Unit V

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 28

22UCSCC53 – WEB TECHNOLOGY UNIT -5

Unit V: Working with Java Script


Practical Tips for Writing Scripts, JavaScript Objects: Window Object - Document
object - Browser Object - Form Object - Navigator object Screen object - Events,
Event Handlers, Forms – Validations, Form Enhancements, JavaScript Libraries.
Window object in JavaScript is the top of the BOM hierarchy. It is a parent of all
objects that we create, both directly through JavaScript and indirectly via DOM.
A window object simply represents a web browser window (or frame within a
window) that displays the HTML document.
An HTML document may contain toolbar, menu, the page itself, and many other
objects.
All major web browsers support the window object that contains global variables,
functions, and JavaScript objects. These are automatically a member of window
object.
Creating Window object in JavaScript
The web browser automatically creates an instance of window.
When a web browser loads a web page having JavaScript code, it automatically
creates many JavaScript objects that provide access to the web pages and HTML
elements that it contains. We use these objects to update and interact with loaded
web page.
If the HTML document contains several frames or iframe, the browser creates
additional window objects for each frame in a single HTML document.
Actually, frames divide the web page into “child” windows, so each frame contains
its own browser object hierarchy.
Note that the window is the object of browser, not the object of JavaScript, like
String, Array, Date, etc. They are JavaScript objects.
Browser Object Model (BOM) in JavaScript
The browser object model, or simply BOM, is a feature in the web browser that
allows us to access the browser window. This access allows us to manipulate
window itself, without the affecting the content of HTML document.
We can move the browser window, change the text or style of the status bar and
several other functions by using BOM.
We can arrange the browser object model as hierarchy. The only object that has a
top position in the BOM is the window object. Whereas all the other objects are
contained within the window object.

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 1


22UCSCC53 – WEB TECHNOLOGY UNIT -5

They do not have any specific order in the hierarchy. Look at the hierarchy in the
below figure.

Properties of Window object in JavaScript


Window object provides a collection of properties in JavaScript that we can apply
to manipulate the web browser window. They are:
1. name: This property sets or returns the name of the window.
2. frames: This property represents an array that comprises all frame objects
contained in a window object.
3. length: This property represents the number of frames contains in a window.
4. closed: This property represents whether the window is closed. It returns true if
the browser window or tab closed.
5. document: This property represents an object that refers to the current
document being shown in a window.
6. parent: This property represents a synonym that identifies the window
containing a specific window.
7. self: This property represents a synonym that identifies the current window
being referenced.
Accessing window properties and methods
The general syntax to access window properties and methods is as:
window.propertyName;
window.methodName([parameters]);

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 2


22UCSCC53 – WEB TECHNOLOGY UNIT -5

For example:
window.name; // returns the name of window.
window.close(); // closes the browser window or tab.
Methods of Window object
JavaScript window object provides several methods that we can apply to
manipulate the web browser window.
1. alert(): This method displays an alert dialog box that contains a message and an
OK button. A single OK button allows us to dismiss alert. The general syntax is:
alert(message);
In this syntax, message is a text we pass as a parameter and is displayed in a dialog
box. Let’s take an example in which we will display an alert dialog box. It has a
message and an OK button.
<script>
function msg() {
alert("This is an Alert box");
}
</script>
<input type = "button" value = "click" onclick = "msg()"/>
When you will run this script code, click button will appear on the browser screen.
When you will click on the button, a dialog box containing a message and OK
button will appear on the web browser.
2. confirm(): This method displays a confirm dialog box, which contains a
message with two OK and Cancel buttons. The general syntax is as:
confirm(message);
Here, message is a text we pass as a parameter that will display in the dialog box.
Moreover, it returns a true value if the user click on OK button. If the user clicks
on the Cancel button, it returns false value.
The following example code shows the use of confirm() method.
<script>
let ans = window.confirm("Click on any button below");
if(ans) {
alert("You clicked on OK button");
} else {
alert("You clicked on Cancel button");
}
DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 3
22UCSCC53 – WEB TECHNOLOGY UNIT -5

</script>
In this example program, you will get two different alert boxes based on the user
action on the confirm() dialog box. If you click on the OK button, a message will
appear “You clicked on OK button“.
3. prompt(): This method displays a dialog box to the user and prompts the user to
enter some input in a text field. Two buttons OK and Cancel allows the user to
dismiss the dialog box with two opposite expectations:
 accepting the input typed in the dialog box
 canceling the entire operation
The general syntax for this method is as:
prompt(message, default_input);
This method contains two parameters, the first one is message to be displayed and
the second one is the default input typed in the text field.
When the user clicks on the OK button, this method returns a string value of the
typed entry. Otherwise, it returns null value if the user clicks on Cancel button.
Let’s take an example based on the prompt() method.
<script>
let age = prompt("How old are you?", "Please type your current age");
if(age >= 18) {
alert("You are eligible for the vote");
} else {
alert("You are not eligible for the vote");
}
</script>
4. open(): This method opens the new window. Let’s create a JavaScript program
in which we will display the content in a new window.
<script>
function msg() {
open("http://www.scientecheasy.com");
}
msg();
</script>
5. close(): This method closes the current window or tab.

JAVASCRIPT DOCUMENT OBJECT


DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 4
22UCSCC53 – WEB TECHNOLOGY UNIT -5

JavaScript Document object is an object that provides access to all HTML


elements of a document. When an HTML document is loaded into a browser
window, then it becomes a document object.
The document object stores the elements of an HTML document, such as HTML,
HEAD, BODY, and other HTML tags as objects.
A document object is a child object of the Window object, which refers to the
browser.
You can access a document object either using window.document property or
using object directly.

See, What we can do with Document Object:

 Suppose you have created a FORM in an HTML document using the FORM
element and added some text fields and Buttons on the Form. On Submitting
the Form you want to validate the input or display input on another page. In
this situation, you can use a document object which is a child object of the
window object. Using the document object, you can access the elements of
the form and validate the Input.
 The Document Object provides different collection elements, such as anchor
and Links which helps you to count the number of specific elements on a
form.
 The Document Object also provides various properties such
as URL, bgcolor, etc. which will allow you to retrieve the details of a
document and various methods such as open(), close(), write(),
getElementById(), getElementByName(), etc. which allow you to perform
various tasks like opening an HTML document to display output and writing
a text on Web Page.
 The Document Object also allows you to create cookies for a webpage by
providing a property named cookie. A cookie stores information about the
user's computer, which helps in accessing visited websites.
Now let's explore document object methods and properties.

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 5


22UCSCC53 – WEB TECHNOLOGY UNIT -5

JavaScript Document Object Properties

As we know, a property of an object is the value associated with the object. The
property is accessed by using the following notation:

objectName.propertyName

where objectName is the name of the object and propertyName is the name of its
property.
Now we will show you the properties of document object in the table given below:

Properties Description

returns a report that contains all the visible and unexpired cookies
cookie
associated with the document

returns the domain name of the server from which the document
domain
has originated

lastModified returns the date on which document was last modified

documentMode returns the mode used by the browser to process the document

readyState returns the loading status of the document.

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 6


22UCSCC53 – WEB TECHNOLOGY UNIT -5

Properties Description

returns the URL of the documents referred to in an HTML


referrer
document

returns the name of the HTML document defined between the


title
starting and ending tags of the TITLE element

URL returns the full URL of the HTML document.

Let's take an example, to see the document object properties in action:

JavaScript Document Object Methods

JavaScript Document object also provides various methods to access HTML


elements.
Now we will show you some of the commonly used methods of the document
object:

Methods Description Syntax

opens an HTML document document.open(mimetype, replace)


open()
to display the output

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 7


22UCSCC53 – WEB TECHNOLOGY UNIT -5

Methods Description Syntax

document.close()
close() closes an HTML document

Writes HTML expressions


document.write(exp1, exp2, ...)
write() or JavaScript code into an
HTML document

write a new line character


after each HTML document.writeln(exp1, exp2, ...)
writeln()
expressions or JavaScript
Code

returns the reference of


getElement first element of an HTML document.getElementById(id)
ById() document with the
specified id.

returns the reference of an


getElement document.getElementsByName(name)
element with the specified
ByName()
name

getElements returns all elements with


ByTagNam the specified tagname document.getElementsByTagName(tagname
e() )

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 8


22UCSCC53 – WEB TECHNOLOGY UNIT -5

Methods Description Syntax

Now let's take an example, to see the document object methods like open(), write(),
and getElementById() to explain their usage. See the below example:

JAVASCRIPT BROWSER OBJECT MODEL

JavaScript provides WebAPIs and Interfaces(object types) that we can use while
developing web application or website. These APIs and objects help us in
controlling the lifecycle of the webpage and performing various actions like getting
browser information, managing screen size, opening and closing new browser
window, getting URL information or updating URL, getting cookies and local
storage, etc.
There is so much that you can do using these WebAPIs and Interfaces. All the
supported Web APIs and Interfaces in JavaScript are listed on the
The Iterfaces (object types) which help us interact with the browser window are
known as Browser objects. Browser object is not an official term but its a group
of objects which belongs to different WebAPIs but are used for managing various
browser related information and actions.
For example, when an HTML document is opened in a browser window, the
browser interprets the document as a collection of hierarchical objects(HTML tags)
and accordingly displays the data contained in these objects(HTML page
rendering). The browser parses the document and creates a collection of objects,
which defines the documents and its details. We have shown the various objects
that can be used to access various components of the browser window in the
picture below:

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 9


22UCSCC53 – WEB TECHNOLOGY UNIT -5

The browser objects are of various types, used for interacting with the browser and
belongs to different APIs. The collection of these Browser objects is also known
as Browser object Model(BOM).
The default object of browser is Window which means you can call its functions
directly.

Browser Objects:

The objects listed below are called browser objects.


 Window - part of DOM API
 Navigator
 Document - part of DOM API
 Screen - property of Window object

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 10


22UCSCC53 – WEB TECHNOLOGY UNIT -5

 History - property of Window object


 Location - property of Window and Document object

Window Object
It is used to interact with the browser window which displays the web page. It
generally represents a tab in browser, but some actions like window width and
height will affect the complete browser window.
We have covered JavaScript Window Object separately, in detail.
Navigator Object
It acts as a storehouse of all the data and information about the Browser
software used to access the webpage and this object is used to fetch information
related to the browser for example, whether the user is using Chrome browser or
Safari browser, which version of browser is being used etc.
We have covered JavaScript Navigator Object separately, in detail.
Document Object
This object represent the HTML document that is loaded into the browser. A
document object is an object that provides access to all HTML elements of a
document(webpage). We can use this object to append a new HTML tag to the
webpage, modify any exsiting HTML tag, etc.
We have covered JavaScript Document Object separately, in detail.
History Object
It stores Uniform Resource Locator(URLs) visited by a user in the browser. It is a
built-in object which is used to get browser history. This object is a property of the
JavaScript Window object.
Screen Object
It is a built-in object which is used to fetch information related to the browser
screen, like the screen size, etc. It is also obtained from the Window object.
Location Object
Location is a built-in object which represent the location of the object to which
it is linked, which can be Window or Document. Both the Document and Window
interface have a linked location property.
JavaScript Navigator Object
JavaScript Navigator Object is used to fetch information related to the
browser(useragent), like the browser name, browser version, operating system
information, etc.

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 11


22UCSCC53 – WEB TECHNOLOGY UNIT -5

JavaScript Navigator object is also a property of the JavaScript Window object and
can be accessed using the read only property window.navigator for the current
browser window.

In JavaScript, the Navigator Object includes some properties and methods which
help us to navigate from one element to another.

Navigator Object Properties

The properties of the navigator object are the variables created inside the Navigator
Object.
We can access Navigator Object Property
as: navigator.propertyname where propertyname is the name of property.

Properties Description

specifies the code name of the browser (experimental property - can


appcodename
return incorrect value)

specifies the name of the browser (experimental property - can return


appname
incorrect value)

specifies the version of browser being used (experimental property -


appversion
can return incorrect value)

cookieEnable specifies whether cookies are enabled or not in the browser

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 12


22UCSCC53 – WEB TECHNOLOGY UNIT -5

Properties Description

contains a string indicating the machine type for which the browser was
platform
compiled.

contains a string representing the value of user-agent header sent by


useragent
the client to server in HTTP protocol

returns object of GeoLocation which can be used to get the location


geolocation
information of the device.

onLine specifies whether the browser is online or not.

returns a string with the preferred browser language, for example, en-
language
US for English.

languages returns a string with all the languages supported by the browser in order

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 13


22UCSCC53 – WEB TECHNOLOGY UNIT -5

Properties Description

of user preference.

There are some more expreimental properties available in the Navigator object, but
the ones mentioned above are most commonly used properties.
Let's see a code example with some of these properties in action.

Navigator Object Methods

The Navigator object doesn't have many standardised methods, most of the
methods available are experimental.

Method Name Description

allows websites to register themselves as protocol handler so


registerProtocolHandler() that they are allowed to open some standard URL schemes
like mailto:, tel:, sms:, etc,

used to utilize the native support of sharing available in


share()
browser.

sendBeacon() used to send a small data packet from the client to the server

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 14


22UCSCC53 – WEB TECHNOLOGY UNIT -5

Method Name Description

if supported, this can be used to make the device vibrate, if


vibrate() not supported, nothing happens. This is useful in mobile
browsers.

Use of Navigator Object:

The navigator object can be used for multiple specific usecases which can help you
make your website better, like:
1. Making you web app or website more compatible with different
browsers by writing specific code for different browsers to resolve
compatibility issues.
2. You can check if the browser is online or not, to show some message if the
browser is disconnected from internet.
3. You can use the location information of the user to show location specific
content.
4. You can set the preferred language as the website language if you support
multiple languages on your website.

JavaScript Screen Object

JavaScript Screen is a built-in Interface (object type) that is used to fetch


information related to the browser screen on which the current window is rendered.
It provides information about the dimensions of the display screen such as its
height, width, color bits, etc.
Since the window object is at the top of the scope chain, the
property window.screen gives the Screen object, but the screen object can be
accessed without specifying the window too, in that case JavaScript automatically
detects the browser window, which is created by JavaScript Runtime Engine.

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 15


22UCSCC53 – WEB TECHNOLOGY UNIT -5

Let's take a simple example to see the working of the screen object.

Find the Height and Width of Screen:

In the example below we have used the screen object to get the width and height of
the screen:

JavaScript Screen Object Properties

JavaScript Screen object includes some properties that are used to get browser
screen information. A table of such properties is given below.

Property Description

availHeight specifies the height of screen, excluding the windows taskbar

availWidth specifies the width of the screen, excluding the Windows taskbar

colorDepth specifies the depth of color palette, in bits, to display images

height specifies the total height of the screen

pixelDepth specifies the color Resolution, in bits per pixel, of the screen

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 16


22UCSCC53 – WEB TECHNOLOGY UNIT -5

Property Description

width specifies the total width of the screen

Now, we will take an example to clear the concepts of Screen Object Properties:

The Screen object colorDepth property is the number of bits used


to represent the color of a single pixel. It returns the bit depth of the color palette
for displaying images.

JavaScript Screen Object Methods

There are no direct methods in the Screen method object.

Uses of Screen Object

The JavaScript Screen object can be used for improving the user experience by
controlling the UI of the web app or website based on the screen size.

HTML DOM Form Object


Form Object

The Form object represents an HTML <form> element.

Access a Form Object

You can access a <form> element by using getElementById():

Example
var x = document.getElementById("myForm");

Tip: You can also access a <form> element by using the forms collection.

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 17


22UCSCC53 – WEB TECHNOLOGY UNIT -5

Create a Form Object

You can create a <form> element by using the document.createElement() method:

Example
var x = document.createElement("FORM");

Form Object Collections

Collection Description

elements Returns a collection of all elements in a form

Form Object Properties

Property Description

acceptCharset Sets or returns the value of the accept-charset attribute in a form

action Sets or returns the value of the action attribute in a form

autocomplete Sets or returns the value of the autocomplete attribute in a form

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 18


22UCSCC53 – WEB TECHNOLOGY UNIT -5

encoding Alias of enctype

enctype Sets or returns the value of the enctype attribute in a form

length Returns the number of elements in a form

method Sets or returns the value of the method attribute in a form

name Sets or returns the value of the name attribute in a form

noValidate Sets or returns whether the form-data should be validated or not, on


submission

target Sets or returns the value of the target attribute in a form

Form Object Methods

Method Description

reset() Resets a form

submit() Submits a form

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 19


22UCSCC53 – WEB TECHNOLOGY UNIT -5

JavaScript Events

HTML events are "things" that happen to HTML elements.


When JavaScript is used in HTML pages, JavaScript can "react" on these events.

HTML Events

An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:

 An HTML web page has finished loading


 An HTML input field was changed
 An HTML button was clicked

Often, when events happen, you may want to do something.


JavaScript lets you execute code when events are detected.
HTML allows event handler attributes, with JavaScript code, to be added to
HTML elements.
With single quotes:

<element event='some JavaScript'>

With double quotes:

<element event="some JavaScript">

In the following example, an onclick attribute (with code), is added to


a <button> element:

Example
<button onclick="document.getElementById('demo').innerHTML = Date()">The
time is?</button>

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 20


22UCSCC53 – WEB TECHNOLOGY UNIT -5

In the example above, the JavaScript code changes the content of the element with
id="demo".
In the next example, the code changes the content of its own element
(using this.innerHTML):

Example
<button onclick="this.innerHTML = Date()">The time is?</button>

JavaScript code is often several lines long. It is more common to see event
attributes calling functions:

Example
<button onclick="displayDate()">The time is?</button>

Common HTML Events

Here is a list of some common HTML events:

Event Description

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 21


22UCSCC53 – WEB TECHNOLOGY UNIT -5

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

JavaScript Event Handlers

Event handlers can be used to handle and verify user input, user actions, and
browser actions:

 Things that should be done every time a page loads


 Things that should be done when the page is closed
 Action that should be performed when a user clicks a button
 Content that should be verified when a user inputs data
 And more ...

Many different methods can be used to let JavaScript work with events:

 HTML event attributes can execute JavaScript code directly


 HTML event attributes can call JavaScript functions
 You can assign your own event handler functions to HTML elements
 You can prevent events from being sent or being handled

Exercise:

The <button> element should do something when someone clicks on it.

<button ="alert('Hello')">Click me.</button>

What is Form Validation?

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 22


22UCSCC53 – WEB TECHNOLOGY UNIT -5

Form validation is the process of ensuring that the data submitted through a web
form meets the required standards before it is processed or stored. The primary
purpose of form validation is to improve data accuracy, enhance security, and
provide a better user experience. By validating the data, we can prevent common
issues such as incomplete submissions, incorrect data formats, and malicious inputs.
There are two main types of form validation:
1. Client-Side Validation:
 Definition: This type of validation occurs in the user’s browser before the data
is sent to the server. JavaScript is commonly used to perform client-side
validation.
 Purpose: It provides immediate feedback to the user, allowing them to correct
errors in real-time without needing to reload the page.
 Examples: Checking if required fields are filled, verifying email format, and
ensuring password strength.
2. Server-Side Validation:
 Definition: This type of validation takes place on the server after the data has
been submitted. Server-side validation is crucial for security and data integrity.
 Purpose: It acts as a final check to ensure that all submitted data meets the
necessary criteria before it is processed or stored. Server-side validation is
essential to protect against malicious inputs and ensure data consistency.
 Examples: Sanitizing input data, checking for SQL injection attacks, and
confirming that all required fields are present.

Both client-side and server-side validations are essential for creating robust and
secure web applications. While client-side validation enhances user experience,
server-side validation ensures comprehensive data security.

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 23


22UCSCC53 – WEB TECHNOLOGY UNIT -5

FORM ENHANCEMENTS

New Input Types

HTML5 includes a variety of new input types that cater to specific data needs,
reducing the need for additional JavaScript validation:

 email: Validates that the entered text is an email address.


 url: Ensures the text entered is a URL.
 date, time, datetime-local: Allows users to enter a date, time, or both, using a
native date/time picker.
 number: Facilitates the input of numerical values, with controls for
incrementing and decrementing.
 range: Creates a slider to select a value within a specific range.
 color: Provides a color picker to select a color.

New Attributes

New attributes enhance the functionality of form elements:

 placeholder: Shows a hint to the user about what to enter in the input field.
 required: Specifies that an input field must be filled out before submitting
the form.
 pattern: Defines a regex pattern that the input field value must match.
 autocomplete: Helps the browser predict the user’s input based on previous
inputs.
 autofocus: Automatically focuses the input when the page loads.
 multiple: Allows multiple values/file selections for input types
like email or file.

Example Usage

Here's an example form utilizing HTML5 enhancements:

<form action="/submit" method="post">


<label for="email">Email:</label>
<input type="email" id="email" name="email" required placeholder="Enter
your email">

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100">

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 24


22UCSCC53 – WEB TECHNOLOGY UNIT -5

<label for="homepage">Homepage:</label>
<input type="url" id="homepage" name="homepage"
placeholder="https://example.com">

<input type="submit" value="Submit">


</form>

JavaScript Libraries
A JavaScript library is a collection of classes, methods, and pre-written functions
that developers can use in their web development projects. Libraries make code
reusable and simplify the development process. They are also favored for their
cross-browser compatibility, saving developers time and effort. Some popular
JavaScript libraries include:
JavaScript
Versions Description Applications
Libraries

 A JavaScript library
 Provides cross-
that is fast, small, and
browser
Introduced: August rich in features.
compatibility
jQuery 26, 2006  Helps in DOM
and it
Current: 3.7.1 manipulation and
simplifies the
event handling in web
code.
applications.

 An open-source  Creates simple


JavaScript library used views for each
to create user state in the
interfaces in a application and
Introduced: May 29, declarative and efficiently
ReactJS 2013 efficient way. updates and
Current: 18.2.0  Component-based renders just the
front-end library is right
responsible only for component as
the view layer of your data
an MVC architecture. changes.

React Current: 9.2.1  A bootstrap-based  Provides

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 25


22UCSCC53 – WEB TECHNOLOGY UNIT -5

JavaScript
Versions Description Applications
Libraries

React UI library used


to make good-looking
webpages. Bootstrap
 Does not embed its components
Reactstrap own style, but it and increases
depends upon the code
Bootstrap CSS reusability.
framework for its
styles and theme.

 An HTML5-based
user interface system
 Creates
designed to make
Introduced: October responsive and
responsive websites
jQuery Mobile 16, 2010 Ajax-based
and apps.
Current: 1.5.0 user interface
 Accessible on all
system.
smartphone, tablet,
and desktop devices.

 A popular front-end
library with a set of
React components that
are designed for the  Provides
middle platform and customizable
React Suite Current: 5.43.0 back-end products. themes,
 The input component accessibility
allows the user to support.
create a basic widget
for getting the user
input in a text field.

React Current: 5.7.0  A React-based UI  Provides


Blueprint.js toolkit for the web. optimized data-
 Very optimized and dense web
popular for building interfaces for

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 26


22UCSCC53 – WEB TECHNOLOGY UNIT -5

JavaScript
Versions Description Applications
Libraries

desktop
complexinterfaces.
applications

 Provides
 A JavaScript library Modularity and
Introduced: April 23 that has large amout of fast web
Lodash , 2012 functions. application by
Current: 4.17.21  It has built-in the use of
functions. built-in
functions.

 A JavaScript package
 Used in a
that makes it simple to
browser using
parse, validate,
the script
manipulate, and
approach.
Introduced: 2011 display date/time in
Moment.js  Compatible
Current: 2.29.4 JavaScript.
with Node.js
 Allows you to display
and can be
dates in a human-
installed via
readable format based
npm.
on your location.

 A resource JavaScript
 Provide
library for managing
applications
documents based on
that has DOM
Introduced: 2011 data.
D3.js manipulation,
Current: 7.8.5  One of the most
Transition,
effective framework to
animatioin,
work on data
large dataset
visualization.

p5.js Current: 1.9.0  A JavaScript library  Provides such


for creative coding, appliations
with attention to which can be

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 27


22UCSCC53 – WEB TECHNOLOGY UNIT -5

JavaScript
Versions Description Applications
Libraries

making code
run on any web
accessible and
browser.
inclusive for artists.

 Provides
 Lightweight
JavaScript
JavaScript library and
templating,
not a complete
function
Introduced: October framework that was
binding, deep
Underscore.js 28, 2009 written by Jeremy
equality
Current: 1.13.6 Ashkenas.
testing,
 Provides utility
creating quick
functions for a variety
indexes, and
of use.
many more.

DEPARTMENT OF COMPUTER SCIENCE-R.SUGANYA , AP/RASC Page 28

You might also like