UNIT - 3 (3)

UNIT-III: JAVASCRIPT AND EXTENSIBLE MARKUP LANGUAGE (XML)
What is JavaScript?
JavaScript (JS) is the most popular lightweight, interpreted compiled

programming language. It can be used for both Client-side as well as Server-
side developments. JavaScript also known as a scripting language for web pages.
 JavaScript is the world's most popular programming language.

 JavaScript is the programming language of the Web.
 JavaScript is easy to learn.
Reason to Learn JavaScript

JavaScript is used by many developers (65% of the total development
community), and the number is increasing day by day. JavaScript is one such
programming language that has more than 1444231 libraries and increasing
rapidly. It is preferred over any other programming language by most
developers. Also, major tech companies like Microsoft, Uber, Google, Netflix,
and Meta use JavaScript in their projects.
JavaScript can be added to your HTML file in two ways:

 Internal JavaScript
 External JavaScript
1) Internal JavaScript: We can add JS code directly to our HTML file by

writing the code inside the <script> & </script>. The <script> tag can
either be placed inside the <head> or the <body> tag according to the
requirement.
Example: It is the basic example of using JavaScript code inside of HTML code,
that script enclosing section can be placed in the body or head of the HTML
document.
HTML :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe JavaScript
</title>
</head>
<body>


<script>
console.log("Welcome to GeeksforGeeks");
</script>
</body>
</html>
Run on IDE………………..
Output: The output will display on console.
Welcome to GeeksforGeeks
2) External JavaScript: We can create the file with a .js extension and paste
the JS code inside of it. After creating the file, add this file in <script src=”
file_name.js”> tag, and this <script> can import inside <head> or <body>
tag of the HTML file.
Example: It is the basic example of using JavaScript JavaScript code which is

written in a different file. By importing that .js file in the head section.
HTML Javascript
<!DOCTYPE html> /* JavaScript code can be
<html lang="en"> embedded inside
head section or body section */
<head> console.log("Welcome to
GeeksforGeeks");
<title>
Basic Example to Describe // JavaScript file name: main.js
JavaScript
</title>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
Output: The output will display on console.

Welcome to GeeksforGeeks
JavaScript Used for
It is mainly used to develop websites and web-based applications. JavaScript is a

language that can be used as a front-end as well as a backend.
 Creating Interactive Websites: JavaScript is used to make web
pages dynamic and interactive. It means using JavaScript, we can
change the web page content and styles dynamically.
 Building Applications: JavaScript is used to make web and mobile
applications. To build web and mobile apps, we can use the most
popular JavaScript frameworks like – ReactJS, React Native, Node.js
etc.
 Web Servers: We can make robust server applications using
JavaScript. To be precise we use JavaScript frameworks like Node.js
and Express.js to build these servers.
 Game Development: JavaSCript can be used to design Browser
games. In JavaScript, lots of game engines are available that provide
frameworks for building games.
Advantages of JavaScript
Firstly, we will discuss the benefits or advantages of using JavaScript –
1. Speed
Since JavaScript is an ‘interpreted’ language, it reduces the time required by
other programming languages like Java for compilation. JavaScript is also a
client-side script, speeding up the execution of the program as it saves the
time required to connect to the server.
2. Simplicity
JavaScript is easy to understand and learn. The structure is simple for the users
as well as the developers. It is also very feasible to implement, saving
developers a lot of money for developing dynamic content for the web.
3. Popularity
Since all modern browsers support JavaScript, it is seen almost everywhere. All
the famous companies use JavaScript as a tool including Google, Amazon,
PayPal, etc.
4. Server Load
As JavaScript operates on the client-side, data validation is possible on the
browser itself rather than sending it off to the server. In case of any
discrepancy, the whole website needs not to be reloaded. The browser
updates only the selected segment of the page.
5. Versatility
JavaScript is now capable of front-end as well as back-end development. Back-
end development uses NodeJS while many libraries help in front-end
development like AngularJS, ReactJS, etc.
6. Less Overhead
JavaScript improves the performance of websites and web applications by
reducing the code length. The codes contain less overhead with the use of
various built-in functions for loops, DOM access, etc.
Disadvantages of JavaScript
Disadvantages:-
1. Client-side Security
Since the JavaScript code is viewable to the user, others may use it for
malicious purposes. These practices may include using the source code without
authentication. Also, it is very easy to place some code into the site that
compromises the security of data over the website.
2. Browser Support
The browser interprets JavaScript differently in different browsers. Thus, the
code must be run on various platforms before publishing. The older browsers
don’t support some new functions and we need to check them as well.
3. Lack of Debugging Facility

Though some HTML editors support debugging, it is not as efficient as other
editors like C/C++ editors. Also, as the browser doesn’t show any error, it is
difficult for the developer to detect the problem.
4. Single Inheritance
JavaScript only supports single inheritance and not multiple inheritance. Some
programs may require this object-oriented language characteristic.
5. Rendering Stopped
A single code error can stop the rendering of the entire JavaScript code on the
website. To the user, it looks as if JavaScript was not present. However, the
browsers are extremely tolerant of these errors.
what JavaScript can do.

1) JavaScript Can Change HTML Content
The example below "finds" an HTML element (with id="demo"), and changes
the element content (innerHTML) to "Hello JavaScript":
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML =

"Hello JavaScript!"'>Click Me!</button>
</body>
</html>
2) JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element,
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
3) JavaScript Can Hide HTML Elements

Hiding HTML elements can be done by changing
the display style:
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript can hide HTML elements.</p>
onclick="document.getElementById('demo').style.display='none'">Click Me!
</button>
</body>
</html>
4) JavaScript Can Show HTML Elements

Showing hidden HTML elements can also be done by changing
the display style:
For example :-
onclick="document.getElementById('demo').style.display='block'">Click
Me!</button>
JavaScript Objects
A javaScript object is an entity having state and behavior (properties and
method). For example: car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based ,not class based. Here, we don't create class to get
the object. But, we direct create objects.
In JavaScript, almost "everything" is an object.
 Booleans can be objects (if defined with the new keyword)

 Numbers can be objects (if defined with the new keyword)
 Strings can be objects (if defined with the new keyword)
 Dates are always objects
 Maths are always objects
 Regular expressions are always objects
 Arrays are always objects
 Functions are always objects
 Objects are always objects
All JavaScript values, except primitives, are objects.
Creating Objects in JavaScript

There are 3 ways to create objects.
1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)
1) JavaScript Object by object literal

The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2.....propertyN:valueN}
As you can see, property and value is separated by : (colon).
Let’s see the simple example of creating object in JavaScript.
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
Output of the above example

102 Shyam Kumar 40000
2) By creating instance of Object

The syntax of creating object directly is given below:
var objectname=new Object();
Here, new keyword is used to create object.
Let’s see the example of creating object directly.
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

101 Ravi 50000
3) By using an Object constructor

Here, you need to create function with arguments. Each argument value can be
assigned in the current object by using this keyword.
The this keyword refers to the current object.
The example of creating object by object constructor is given below.
<script>
function emp(id, name, salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);

</script>
OUTPUT ;-
103 Vimal Jaiswal 30000
JavaScript Object Methods

Object.assign() This method is used to copy
enumerable and own properties from
a source object to a target object
Object. Assign(target, sources)
Object.create() This method is used to create a new

object with the specified prototype
object and properties.
Object.create(prototype[, propertiesObject])
Object.values() This method returns an array of values.
Object.Values(obj)
Object.is() This method determines
whether two values are
the same value.
Object.is(value1, value2);
Object.freeze() This method prevents

existing properties from
being removed.
Object.freeze(obj)
Some javascript object………:-
JavaScript Array
JavaScript array is an object that represents a collection of similar type of elements.
There are 3 ways to construct array in JavaScript
1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)
1) JavaScript array literal

The syntax of creating array using array literal is given below:
var arrayname=[value1,value2.....valueN];
As you can see, values are contained inside [ ] and separated by , (comma).
Let's see the simple example of creating and using array in JavaScript.
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
The .length property returns the length of an array.
Sonoo
Vimal
Ratan
2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:
var arrayname=new Array();
Here, new keyword is used to create instance of array.
Let's see the example of creating array directly.
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
document.write(emp[i] + "<br>");
}
</script>
Arun
Varun
John
3) JavaScript array constructor (new

keyword)
Here, you need to create instance of array by passing arguments in constructor so
that we don't have to provide value explicitly.
The example of creating object by array constructor is given below.
<script>
var emp=new Array("Jai","Vijay","Smith");
document.write(emp[i] + "<br>");
}
</script>
Jai
Vijay
Smith
JavaScript String
The JavaScript string is an object that represents a sequence of characters.
There are 2 ways to create string in JavaScript
1. By string literal
2. By string object (using new keyword)
1) By string literal
The string literal is created using double quotes. The syntax of creating string using
string literal is given below:
var stringname="string value";
Let's see the simple example of creating string literal.
<script>
var str="This is string literal";
document.write(str);
</script>
Output:
This is string literal
2) By string object (using new keyword)

The syntax of creating string object using new keyword is given below:
var stringname=new String("string literal");
Here, new keyword is used to create instance of string.
Let's see the example of creating string in JavaScript by new keyword.
<script>
var stringname=new String("hello javascript string");
document.write(stringname);
</script>
Output:
hello javascript string
DHTML JavaScript
JavaScript can be included in HTML pages, which creates the content of
the page as dynamic. We can easily type the JavaScript code within the
<head> or <body> tag of a HTML page. If we want to add the external
source file of JavaScript, we can easily add using the <src> attribute.
DHTML included JavaScript along with HTML and CSS to make the page
dynamic. This combo made the web pages dynamic and eliminated the
problem of creating static pages for each user. To integrate JavaScript into
HTML, a Document Object Model(DOM) is made for the HTML document.
In DOM, the document is represented as nodes and objects which are accessed
by different languages like JavaScript to manipulate the document.
Document Object Model (DOM)
The Document Object Model (DOM) connects web pages to scripts or
programming languages by representing the structure of a document—such as the
HTML representing a web page—in memory. Usually it refers to JavaScript, even
though modeling HTML, SVG, or XML documents as objects are not part of the core
JavaScript language.
The DOM represents a document with a logical tree. Each branch of the tree ends in
a node, and each node contains objects. DOM methods allow programmatic access
to the tree. With them, you can change the document's structure, style, or content.
Nodes can also have event handlers attached to them. Once an event is triggered,
the event handlers get executed.
Following are the various examples, which describes how to use the JavaScript
technology with the DHTML:
Document.write() Method
The document.write() method of JavaScript, writes the output to a web page.
Example 1: The following example simply uses the document.write() method of

JavaScript in the DHTML. In this example, we type the JavaScript code in
the <body> tag.
<HTML>
<head>
<title>
Method of a JavaScript
</title>
</head>
<body>
<script type="text/javascript">
document.write("JavaTpoint");
</script>
</body>
</html>
Bootstrap Alerts
Bootstrap Alerts are used to provide an easy way to create predefined alert
messages. Alert adds a style to your messages to make it more appealing to the
users.
There are four classes that are used within <div> element for alerts.
o .alert-success
o .alert-info
o .alert-warning
o .alert-danger
Bootstrap Alert Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!
</strong> This alert box indicates a successful or positive action
</div>
<div class="alert alert-info">

<strong>Info!</strong> This alert box indicates a neutral informative cha
nge or action.
</div>
<div class="alert alert-warning">

<strong>Warning!</strong> This alert box indicates a warning that might need a
ttention.
</div>
<div class="alert alert-danger">

<strong>Danger!</strong> This alert box indicates a dangerous or potent
ially negative action.
</div>
</div>
</body>
</html>
Bootstrap Buttons
There are seven styles to add a button in Bootstrap. Use the following classes to
achieve the different button styles:
o .btn-default
o .btn-primary
o .btn-success
o .btn-info
o .btn-warning
o .btn-danger
o .btn-link
Bootstrap Button Example: specifying

seven styles
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
</head>
<body>
<h1>Button Example!</h1>
<button class="btn btn-default">default</button>

<button class="btn btn-primary">primary</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-success">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-link">Link</button>
</body>
</html>
Bootstrap popovers
A Bootstrap Popover is an attribute in bootstrap that can be used to make any
website look more dynamic. Popovers are generally used to display additional
information about any element and are displayed with a click of a mouse pointer
over that element. In the popover, if you click on any element that you include in
your script, it will give a particular message as a popover and you can see your
message as you defined in the script.
It is easy to implement popovers on a website using Bootstrap as you just need to
define a few attributes for the element as described below:
Syntax:
data-toggle="popover"
title="Popover Header"
data-content="Some content inside the box"
The data-toggle attribute defines the Popover, the title attribute defines the Tile for
the Popover and the data-content attribute is used to store the content to be
displayed in the respective Popover.
Include the below javascript in your code to make it work.
 Javascript
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
Example:
 HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<a href="#" data-toggle="popover"
title="Popover Header"
data-content="Some content inside the popover">
GeeksforGeeks</a>
</div>
<script>
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Different types of Popover orientation in Bootstrap:

1. Top Alignment: In this type of popover alignment, the popover
content is displayed at the top of the element on which we have
applied this attribute. To align the popover to the top, assign an
attribute data-placement = “top”.
2. Bottom Alignment:
3. Left Alignment:
4. Right Alignment:
What is xml
o Xml (eXtensible Markup Language) is a mark up language.
o XML is designed to store and transport data.
o Xml was released in late 90’s. it was created to provide an easy to use and store self
describing data.
o XML became a W3C Recommendation on February 10, 1998.
o XML is not a replacement for HTML.
o XML is designed to be self-descriptive.
o XML is designed to carry data, not to display data.
o XML tags are not predefined. You must define your own tags.
o XML is platform independent and language independent.
Note: Self-describing data is the data that describes both its content and
structure.
What is mark-up language

A mark up language is a modern system for highlight or underline a document.
Students often underline or highlight a passage to revise easily, same in the sense of
modern mark up language highlighting or underlining is replaced by tags.
Prerequisite
Before you start to learn xml, you should know basic of HTML & JavaScript.
Why xml
Platform Independent and Language Independent: The main benefit of xml is that
you can use it to take data from a program like Microsoft SQL, convert it into XML
then share that XML with other programs and platforms. You can communicate
between two platforms which are generally very difficult.
The main thing which makes XML truly powerful is its international acceptance. Many
corporation use XML interfaces for databases, programming, office application
mobile phones and more. It is due to its platform independent feature.
Features and Advantages of XML

XML is widely used in the era of web development. It is also used to simplify data
storage and data sharing.
The main features or advantages of XML are given below.
1) XML separates data from HTML

If you need to display dynamic data in your HTML document, it will take a lot of work
to edit the HTML each time the data changes.
With XML, data can be stored in separate XML files. This way you can focus on using
HTML/CSS for display and layout, and be sure that changes in the underlying data
will not require any changes to the HTML.
With a few lines of JavaScript code, you can read an external XML file and update the
data content of your web page.
2) XML simplifies data sharing

In the real world, computer systems and databases contain data in incompatible
formats.
XML data is stored in plain text format. This provides a software- and hardware-
independent way of storing data.
This makes it much easier to create data that can be shared by different applications.
3) XML simplifies data transport

One of the most time-consuming challenges for developers is to exchange data
between incompatible systems over the Internet.
Exchanging data as XML greatly reduces this complexity, since the data can be read
by different incompatible applications.
4) XML simplifies Platform change

Upgrading to new systems (hardware or software platforms), is always time
consuming. Large amounts of data must be converted and incompatible data is often
lost.
XML data is stored in text format. This makes it easier to expand or upgrade to new
operating systems, new applications, or new browsers, without losing data.
5) XML increases data availability

Different applications can access your data, not only in HTML pages, but also from
XML data sources.
With XML, your data can be available to all kinds of "reading machines" (Handheld
computers, voice machines, news feeds, etc), and make it more available for blind
people, or people with other disabilities.
6) XML can be used to create new internet
languages
A lot of new Internet languages are created with XML.
Here are some examples:
o XHTML
o WSDL for describing available web services
o WAP and WML as markup languages for handheld devices
o RSS languages for news feeds
o RDF and OWL for describing resources and ontology
o SMIL for describing multimedia for the web
HTML vs XML
There are many differences between HTML (Hyper Text Markup Language) and XML
(eXtensible Markup Language). The important differences are given below:
No HTML XML
.
1) HTML is used to display XML is a software and hardware independent tool

data and focuses on how data used to transport and store data. It focuses on
looks. what data is.
2) HTML is a markup XML provides a framework to define markup

language itself. languages.
3) HTML is not case sensitive. XML is case sensitive.
4) HTML is a presentation XML is neither a presentation language nor a

language. programming language.
5) HTML has its own predefined You can define tags according to your need.
tags.
6) In HTML, it is not necessary to XML makes it mandatory to use a closing tag.

use a closing tag.
7) HTML is static because it is used XML is dynamic because it is used to transport

to display data. data.
8) HTML does not preserve XML preserve whitespaces.

whitespaces.
XML Example
XML documents create a hierarchical structure looks like a tree so it is known as XML
Tree that starts at "the root" and branches to "the leaves".
Example of XML Document

XML documents uses a self-describing and simple syntax:
1. <?xml version="1.0" encoding="ISO-8859-1"?>

2. <note>
3. <to>Tove</to>
4. <from>Jani</from>
5. <heading>Reminder</heading>
6. <body>Don't forget me this weekend!</body>
7. </note>
The first line is the XML declaration. It defines the XML version (1.0) and the encoding
used (ISO-8859-1 = Latin-1/West European character set).
The next line describes the root element of the document (like saying: "this
document is a note"):
1. <note>
The next 4 lines describe 4 child elements of the root (to, from, heading, and body).
1. <to>Tove</to>
2. <from>Jani</from>
3. <heading>Reminder</heading>
4. <body>Don't forget me this weekend!</body>
And finally the last line defines the end of the root element.
1. </note>
XML Tree Structure

An XML document has a self descriptive structure. It forms a tree structure which is
referred as an XML tree. The tree structure makes easy to describe an XML
document.
A tree structure contains root element (as parent), child element and so on. It is very
easy to traverse all succeeding branches and sub-branches and leaf nodes starting
from the root.
Example of an XML document

1. <?xml version="1.0"?>
2. <college>
3. <student>
4. <firstname>Tamanna</firstname>
5. <lastname>Bhatia</lastname>
6. <contact>09990449935</contact>
7. <email>tammanabhatia@abc.com</email>
8. <address>
9. <city>Ghaziabad</city>
10. <state>Uttar Pradesh</state>
11. <pin>201007</pin>
12. </address>
13. </student>
14. </college>
Let's see the tree-structure representation of the above example.

In the above example, first line is the XML declaration. It defines the XML version 1.0.
Next line shows the root element (college) of the document. Inside that there is one
more element (student). Student element contains five branches named <firstname>,
<lastname>, <contact>, <Email> and <address>.
<address> branch contains 3 sub-branches named <city>, <state> and <pin>.
Note: DOM parser represents the XML document in Tree structure.
XML Tree Rules

These rules are used to figure out the relationship of the elements. It shows if an
element is a child or a parent of the other element.
Descendants: If element A is contained by element B, then A is known as descendant

of B. In the above example "College" is the root element and all the other elements
are the descendants of "College".
Ancestors: The containing element which contains other elements is called

"Ancestor" of other element. In the above example Root element (College) is
ancestor of all other elements.
XML DTD
What is DTD
DTD stands for Document Type Definition. It defines the legal building blocks of an
XML document. It is used to define document structure with a list of legal elements
and attributes.
Purpose of DTD
Its main purpose is to define the structure of an XML document. It contains a list of
legal elements and define the structure with the help of them.
Checking Validation
Before proceeding with XML DTD, you must check the validation. An XML document
is called "well-formed" if it contains the correct syntax.
A well-formed and valid XML document is one which have been validated against
DTD.
Syntax
Basic syntax of a DTD is as follows −
<!DOCTYPE element DTD identifier
[
declaration1
declaration2
........
]>
In the above syntax,
 The DTD starts with <!DOCTYPE delimiter.
 An element tells the parser to parse the document from the specified root
element.
 DTD identifier is an identifier for the document type definition, which may be
the path to a file on the system or URL to a file on the internet. If the DTD is
pointing to external path, it is called External Subset.
 The square brackets [ ] enclose an optional list of entity declarations
called Internal Subset.
Internal DTD
A DTD is referred to as an internal DTD if elements are declared within the XML files. To
refer it as internal DTD, standalone attribute in XML declaration must be set to yes. This
means, the declaration works independent of an external source.
Syntax
Following is the syntax of internal DTD −
<!DOCTYPE root-element [element-declarations]>
where root-element is the name of root element and element-declarations is where you
declare the elements.
Example
Following is a simple example of internal DTD −
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
Let us go through the above code −
Start Declaration − Begin the XML declaration with the following statement.
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
DTD − Immediately after the XML header, the document type declaration follows,
commonly referred to as the DOCTYPE −
<!DOCTYPE address [
The DOCTYPE declaration has an exclamation mark (!) at the start of the element name. The
DOCTYPE informs the parser that a DTD is associated with this XML document.
DTD Body − The DOCTYPE declaration is followed by body of the DTD, where you
declare elements, attributes, entities, and notations.
<!ELEMENT phone_no (#PCDATA)>
Several elements are declared here that make up the vocabulary of the <name> document. <!
ELEMENT name (#PCDATA)> defines the element name to be of type "#PCDATA". Here
#PCDATA means parse-able text data.
End Declaration − Finally, the declaration section of the DTD is closed using a closing
bracket and a closing angle bracket (]>). This effectively ends the definition, and thereafter,
the XML document follows immediately.
External DTD
In external DTD elements are declared outside the XML file. They are accessed by
specifying the system attributes which may be either the legal .dtd file or a valid URL. This
means, declaration includes information from the external source.
Syntax
Following is the syntax for external DTD −
<!DOCTYPE root-element SYSTEM "file-name">
where file-name is the file with .dtd extension.
Example
The following example shows external DTD usage −
<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
The content of the DTD file address.dtd is as shown −

<!ELEMENT phone (#PCDATA)>
XML DOM
What is XML DOM

DOM is an acronym stands for Document Object Model. It defines a standard way to
access and manipulate documents. The Document Object Model (DOM) is a
programming API for HTML and XML documents. It defines the logical structure of
documents and the way a document is accessed and manipulated.
XML DOM defines a standard way to access and manipulate XML documents.
What does XML DOM
The XML DOM makes a tree-structure view for an XML document.
We can access all elements through the DOM tree.
We can modify or delete their content and also create new elements. The elements,
their content (text and attributes) are all known as nodes.
For example, consider this table, taken from an HTML document:
1. <TABLE>
2. <ROWS>
3. <TR>
4. <TD>A</TD>
5. <TD>B</TD>
6. </TR>
7. <TR>
8. <TD>C</TD>
9. <TD>D</TD>
10. </TR>
11. </ROWS>
12. </TABLE>
The Document Object Model represents this table like this:

What is XSLT
Before XSLT, first we should learn about XSL. XSL stands for EXtensible Stylesheet
Language. It is a styling language for XML just like CSS is a styling language for
HTML.
XSLT stands for XSL Transformation. It is used to transform XML documents into
other formats (like transforming XML into HTML).
What is XSL
In HTML documents, tags are predefined but in XML documents, tags are not
predefined. World Wide Web Consortium (W3C) developed XSL to understand and
style an XML document, which can act as XML based Stylesheet Language.
An XSL document specifies how a browser should render an XML document.
Main parts of XSL Document

o XSLT: It is a language for transforming XML documents into various other
types of documents.
o XPath: It is a language for navigating in XML documents.
o XQuery: It is a language for querying XML documents.
o XSL-FO: It is a language for formatting XML documents.
How XSLT Works

The XSLT stylesheet is written in XML format. It is used to define the transformation
rules to be applied on the target XML document. The XSLT processor takes the XSLT
stylesheet and applies the transformation rules on the target XML document and
then it generates a formatted document in the form of XML, HTML, or text format. At
the end it is used by XSLT formatter to generate the actual output and displayed on
the end-user.
Image representation:
Advantage of XSLT
A list of advantages of using XSLT:
o XSLT provides an easy way to merge XML data into presentation because it
applies user defined transformations to an XML document and the output can
be HTML, XML, or any other structured document.
o XSLT provides Xpath to locate elements/attribute within an XML document. So
it is more convenient way to traverse an XML document rather than a
traditional way, by using scripting language.
o XSLT is template based. So it is more resilient to changes in documents than
low level DOM and SAX.
o By using XML and XSLT, the application UI script will look clean and will be
easier to maintain.
o XSLT templates are based on XPath pattern which is very powerful in terms of
performance to process the XML document.
o XSLT can be used as a validation language as it uses tree-pattern-matching
approach.
o You can change the output simply modifying the transformations in XSL files.

UNIT - 3 (3)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UNIT - 3 (3)

Uploaded by

Copyright:

Available Formats

UNIT-III: JAVASCRIPT AND EXTENSIBLE MARKUP LANGUAGE (XML)

JavaScript (JS) is the most popular lightweight, interpreted compiled

 JavaScript is the world's most popular programming language.

Reason to Learn JavaScript

JavaScript can be added to your HTML file in two ways:

1) Internal JavaScript: We can add JS code directly to our HTML file by

Example: It is the basic example of using JavaScript JavaScript code which is

Output: The output will display on console.

JavaScript Used for

It is mainly used to develop websites and web-based applications. JavaScript is a

3. Lack of Debugging Facility

what JavaScript can do.

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML =

2) JavaScript Can Change HTML Styles (CSS)

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

3) JavaScript Can Hide HTML Elements

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

4) JavaScript Can Show HTML Elements

JavaScript is an object-based language. Everything is an object in JavaScript.

In JavaScript, almost "everything" is an object.

 Booleans can be objects (if defined with the new keyword)

All JavaScript values, except primitives, are objects.

Creating Objects in JavaScript

1) JavaScript Object by object literal

Let’s see the simple example of creating object in JavaScript.

Output of the above example

2) By creating instance of Object

var objectname=new Object();

Here, new keyword is used to create object.

Let’s see the example of creating object directly.

Output of the above example

3) By using an Object constructor

The example of creating object by object constructor is given below.

document.write(e.id+" "+e.name+" "+e.salary);

103 Vimal Jaiswal 30000

JavaScript Object Methods

Object. Assign(target, sources)

Object.create() This method is used to create a new

Object.values() This method returns an array of values.

Object.freeze() This method prevents

Some javascript object………:-

There are 3 ways to construct array in JavaScript

1) JavaScript array literal

The .length property returns the length of an array.

Output of the above example

2) JavaScript Array directly (new keyword)

var arrayname=new Array();

Here, new keyword is used to create instance of array.

Let's see the example of creating array directly.

Output of the above example

3) JavaScript array constructor (new

The example of creating object by array constructor is given below.

Output of the above example

The JavaScript string is an object that represents a sequence of characters.

There are 2 ways to create string in JavaScript

var stringname="string value";

Let's see the simple example of creating string literal.

This is string literal

2) By string object (using new keyword)