wp-UNIT_III.pptx

Web Programming
(20CS5205A)
CSE Department

UNIT-III
JavaScript
DHTML
XML

Overview of Java Script
A number of Technologies are present that develops
the static web page, but we require a language that is
dynamic in nature to develop web pages.
 JavaScript was created by Brendan Eich in 1995 at
Netscape Communications.
 JavaScript was the first client-side scripting language
developed by Netscape.
 JavaScript made its first appearance in Netscape 2.0 in
1995 with the name LiveScript.

 JavaScript is an object-based client-side scripting
language that is popular and used to create dynamic and
interactive web pages.
 Javascript is an interpreted language usually used with
HTML, and programs written in JavaScript are called
lightweight scripts.
 JavaScript is a simple language which is only suitable for
simple tasks.

Features:
 JavaScript is a lightweight, interpreted programming
language.
 Designed for creating network-centric applications.
 Complementary to and integrated with Java.
 Complementary to and integrated with HTML.
 Open and cross-platform

Java Script example program:
<html>
<head>
</head>
<body>
<script type = "text/javascript">
document. write("Hello World") ;
</script>
<p>This is web page body </p>
</body>
</html>

JavaScript variables
variables are containers for storing data (storing data
values).
4 Ways to Declare a JavaScript Variable:
 Using var
 Using let
 Using const
 Using nothing

When to Use JavaScript var?
 Always declare JavaScript variables with var,let, or const.
 The var keyword is used in all JavaScript code from 1995
to 2015.
 The let and const keywords were added to JavaScript in
2015.
 If you want your code to run in older browsers, you must
use var.

Java Script Function:
 A function is a group of reusable code which can be
called anywhere in your program.
 JavaScript also supports all the features necessary to
write modular code using functions.
The basic syntax
<!–
function functionname(parameter-list) { statements }
//-->
</script>

Example program:
<html>
<body>
function sayHello()
{
document.write ("Hello….!");
document.write (“Welcome to Java Script!");}
sayHello();
</script>
</body>
</html>

Calling a Function:
<html>
<head>
function sayHello()
{ document.write ("Hello there!");
}
</script>
</head> <body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello()" value =
"Say Hello">
</form> </body> </html>

JavaScript conditional statemenst :
 Conditional statements are used to decide the flow of
execution based on different conditions. If a condition is
true, you can perform one action and if the condition is
false, you can perform another action.
There are mainly three types of conditional statements
 If statement
 If…else statement
 If…else If…else statement

if statement
The if statement is the fundamental control statement that
allows JavaScript to make decisions and execute
statements conditionally.
Syntax
if (expression)
{
//Statement(s) to be executed if expression is true
}

if...else statement
The 'if...else' statement is the next form of control statement
that allows JavaScript to execute statements in a more
controlled way.
Syntax
if (expression)
{ Statement(s) to be executed if expression is true
}
else
{ Statement(s) to be executed if expression is false
}

if...else if... statement
The if...else if... statement is an advanced form of if…else that
allows JavaScript to make a correct decision out of several
conditions.
Syntax
if (expression 1)
{ Statement(s) to be executed if expression 1 is true }
else if (expression 2)
else if (expression 3)
else { Statement(s) to be executed if no expression is true }

JavaScript Switch Statement
The switch statement is used to perform different actions based
on different conditions.
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

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.
 for loop
 while loop
 do-while loop
 for-in loop

JavaScript For loop
The JavaScript for loop iterates the elements for the fixed
number of times. It should be used if number of iteration is
known. The syntax of for loop is given below.
for (initialization; condition; increment)
{
code to be executed
}

JavaScript while loop
The JavaScript while loop iterates the elements
for the infinite number of times. It should be used
if number of iteration is not known. The syntax of
while loop is given below.
while (condition)
{
code to be executed
}

JavaScript do while loop
The JavaScript do while loop iterates the elements for
the infinite number of times like while loop. But, code
is executed at least once whether condition is true or false.
The syntax :
do{
code to be executed
}while (condition);

for...in statement
 The for...in statement iterates a specified variable over all the
enumerable properties of an object.
 For each distinct property, JavaScript executes the specified
statements.
statement looks as follows:
for (key in object)
{
// body of for...in
}

const student =
{
name: 'komali',
class: 7,
age: 12
}
for ( let key in student )
{
document.write(`${key} => ${student[key]}`);
document.write("<br>");
}
</script>

pop-up boxes in JavaScript
In Javascript, popup boxes are used to display the message or
notification to the user.
There are three types of pop-up boxes in JavaScript namely
 Alert Box,
 Confirm Box and
 Prompt Box.

Alert Box
Alert Box is the Java script message box that inform or alert the
user by displaying some messages in a small dialogue box
Syntax:
alert(string)
Whenever an alert box pops up, the user will have to click "OK"
button to proceed to next step
25

Alert ():
<html>
<body>
<script type="text/javascript">
function msg()
{
alert("Hello Alert Box");
}
</script>
<input type="button" value="click"
onclick="msg()"/>
</body>
</html>

Confirm Box:
 Javascript confirm box is often used if you want the
user to make a choice. When Java script pops up a
confirm box , the user will have to click either "OK" or
"Cancel" to proceed the next step.
 Two different actions will occur depending on which
button the user clicks. If the user clicks "OK", the
confirm box returns true and if the user clicks "Cancel",
the Confirm box returns false
Syntax:
confirm(string)

Confirm():
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
confirm("Press a button!");
}
</script></body> </html>

Prompt Box:
 Java script Prompt Box is often used if you want the
user to enter an input value before proceed to the next
step.
 When Java script display prompt box , the user will
have to click either "OK" or "Cancel" to proceed after
entering an input value.
If the user clicks "OK" the box returns the input value
and if the user clicks "Cancel" the box returns null

Syntax:
prompt(“text goes here”, “default value”);

prompt():
<html>
<head>
function getValue() {
var Val = prompt("Enter your name : ", "your name
here");
document.write(“welcome: " + Val);
}
</script> </head> <body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick =
"getValue();" />
</form> </body> </html>

Advance JavaScript
JavaScript Objects
 A java Script object is an entity having state and behavior
(properties and method).
 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
 JavaScript has several built-in objects, like String, Date,
Array, and more.

Creating a JavaScript Object
With JavaScript, you can define and create your own objects.
There are different ways to create new objects:
 By object literal
 By creating instance of Object directly (using new
keyword)
 By using an object constructor (using new keyword)

By object literal
 This is the easiest way to create a JavaScript Object.
 Using an object literal, you both define and create an object in
one statement.
 An object literal is a list of name:value pairs (like age:50)
inside curly braces {}.
Syntax:
object={property1:value1,property2:value2.....propertyN:value
N}
Example:
const person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};

This example creates an empty JavaScript object, and then
adds 4 properties:
Example
const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"

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.
example :
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;

By using an Object constructor
First you need to create function with arguments. Each
argument value can be assigned in the current object by
using this keyword.
function emp(id,name,salary)
{
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);

Defining method in JavaScript Object
We can define method in JavaScript object. But before
defining method, we need to add property in the function
with same name as method.

JavaScript Object Methods
Methods Description
Object.assign() This method is used to copy enumerable and
own properties from a source object to a
target object
Object.create() This method is used to create a new object
with the specified prototype object and
properties.
Object.getOwnPropertyDescr
iptors()
This method returns all own property
descriptors of a given object.
Object.getOwnPropertyName
s()
This method returns an array of all properties
(enumerable or not) found.
Object.getOwnPropertySymb
ols()
This method returns an array of all own
symbol key properties.
Object.getPrototypeOf() This method returns the prototype of the
specified object.

Object.is() This method determines whether two values are
the same value.
Object.isExtensible() This method determines if an object is extensible
Object.keys() This method returns an array of a given object's
own property names.
Object.values() This method returns an array of values

JavaScript own objects
 JavaScript sports a number of built-in objects that extend
the flexibility of the language.
 These objects are Date, Math, String, Array, and Object.
 Several of these objects are "borrowed" from the Java
language specification, but JavaScript's implementation of
them is different.

Understanding the string object
the String object is the most commonly used. In the Netscape
2.0 JavaScript implementation, new string objects are
created implicitly using a variable assignment.
For example,
var myString = "This is a string";

length The length of a string
String Properties
String Methods
anchor Creates a named anchor (hypertext target)
big Sets text to big
blink Sets text to blinking
bold Sets text to bold
charAt Returns the character at a specified position
fixed Sets text in fixed-pitch font
fontcolor Sets the font color
fontsize Sets font size
indexOf Returns the first occurrence of character x starting from
position y
italics Sets text to italics
lastIndexOf Returns the last occurrence of character x starting from
position y

link Creates a hyperlink
small Sets text to small
strike Sets text to strikeout
sub Sets text to subscript
substring Returns a portion of a string
sup Sets text to superscript
toLowerString Converts a string to lowercase
toUpperString Converts a string to uppercase

Math Object:
 JavaScript's Math object provides advanced arithmetic
and trigonometric functions, expanding on JavaScript's
basic arithmetic operators (plus, minus, multiply, divide).
 The Math object in JavaScript is borrowed from Java
 The Math object is static, so you don't need to create a
new Math object in order to use it. To access the
properties and method of the Math object, you merely
specify the Math object, along with the method or
property you wish

Example:
var pi = Math.PI;
var pieAreRound = Math.round(pi);

E Euler's constant
LN2 The natural logarithm of 2
LN10 The natural logarithm of 10
LOG2E The base 2 logarithm of e
LOG10E The base 10 logarithm of e
PI The numeric equivalent of PI: 3.14 etc.
SQRT1_2 The square root of one-half
SQRT2 The square root of 2
Math Properties

abs Returns the absolute value of a number
ceil Returns the least integer greater than or equal to a number
cos Returns the cosine of a number
exp Returns e (Euler's constant) to the power of a number
floor Returns the greatest integer less than or equal to its
argument
log Returns the natural logarithm (base e) of a number
max Returns the greater of two values
min Returns the lesser of two values
pow Returns the value of a number times a specified power
random Returns a random number (X-platforms only)
round Returns a number rounded to the nearest whole value
sqrt Returns the square root of a number
Math Methods

Date Object
Date object can be used in JavaScript to determine the
current time and date.
A popular JavaScript application of the Date object is
displaying a digital clock in a text box.
The script uses the Date object to update the clock once
every second.
JavaScript treats the Date object like a constructor class.
To use Date you must create a new Date object; you can
then apply the various Date methods to get and set
dates. (The Date object has no properties.)

getHours() - Returns the hour
getMinutes() - Returns the minutes
getSeconds() - Returns the seconds
getYear() - Returns the year ("96" is 1996)
getMonth() - Returns the month ("0" is January)
getDate() - Returns the day of the month
getDay() - Returns the day of the week ("0" is Sunday)
Examples:
var now = new Date(); var yearNow = now.getYear();

JavaScript Array
In JavaScript, an array is an ordered list of values. Each value
is called an element specified by an index
 An array can hold values of mixed types.an array that
stores elements with the types number, string, Boolean, and
null.
 the size of an array is dynamic and auto-growing.
There are 3 ways to construct array in JavaScript
 By array literal
 By creating instance of Array directly (using new keyword)
 By using an Array constructor (using new keyword)

1. JavaScript array literal
syntax
var arrayname=[value1,value2.....valueN];
Example:
var emp=["Sonoo","Vimal","Ratan“,1,2,3,4];
for (i=0;i<emp.length;i++)
{
document.write(emp[i] + "<br/>");
}

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.
Example:
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
{
document.write(emp[i] + "<br>");
}

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
Example:
var emp=new Array("Jai","Vijay",“Ajay");
{
document.write(emp[i] + "<br>");
}

Basic operations on arrays
1.Adding an element to the end of an array
2. Adding an element to the beginning of an array
3. Removing an element from the end of an array
4. Removing an element from the beginning of an array
5. Removing an element from the beginning of an array
6. Check if a value is an array
7.Retriving part of an array.(slice)

Methods
push() – Insert an element at the end of the array.
unshift() – Insert an element at the beginning of the array.
pop() – Remove an element from the end of the array.
shift() – Remove an element from the end of the array.
slice() – Create a shallow copy of an array.
Array.isArray() – Determine if a value is an array.
length – Determine the size of an array

Slice()
The slice() method cuts the array and returns a shallow copy
of a portion of an array into a new array object
It takes in two parameters: begin and end. The array is sliced
from the index specified as begin till the end index (end index
excluded).
The original array will not be modified.
If the end parameter is unspecified, the entire array from the
begin index is sliced.

Loop Over the Array Items
You can also loop over an array in case you need to access
multiple elements from the array at once.
We use the forEach method for this, which calls a function
once for each element in an array.
Example:
const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

DOM and web browser environments
When a web page is loaded, the browser create
a Document Object Model of the page.
with the object model, JavaScript gets all the power it needs to
create dynamic HTML:
 JavaScript can change all the HTML elements in the page
 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page

JavaScript HTML DOM
 The Document Object Model (DOM) is a programming
interface for and XML(Extensible markup language)
documents.
 It defines the logical structure of documents and the way a
document is accessed and manipulated.
 The DOM is a W3C (World Wide Web Consortium) standard.
 The DOM defines a standard for accessing documents
 "The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style
of a document.“

The DOM Programming Interface
 The HTML DOM can be accessed with JavaScript (and
with other programming languages).
 In the DOM, all HTML elements are defined as objects.
 A property is a value that you can get or set (like
changing the content of an HTML element).
 A method is an action you can do (like add or deleting an
HTML element).

Example:
<!DOCTYPE html>
<html>
<body>
<h2>My First Page</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello World!";
</script>
</body>
</html>

Window
 The window is the browser tab that a web page is loaded into;
this is represented in JavaScript by the Window object.
 Using methods available on this object you can know the
window's size
1.Window.innerWidth
2.Window.innerHeight

Navigator
 The navigator represents the state and identity of the
browser (i.e. the user-agent) as it exists on the web.
 In JavaScript, this is represented by the Navigator object.
 You can use this object to retrieve things like the user's
preferred language, a media stream from the user's
webcam, etc.

Document
 The document (represented by the DOM in browsers) is the
actual page loaded into the window, and is represented in
JavaScript by the Document object.
 You can use this object to return and manipulate
information on the HTML and CSS.

Manipulation using DOM
When writing web pages and apps, one of the most common
things you'll want to do is manipulate the document
structure in some way.
This is usually done by using the Document Object Model
(DOM), a set of APIs for controlling HTML and styling
information that makes heavy use of the Document object.

Some JavaScript DOM selectors are:
getElementById() – Here, selection is based on the id name.
This selector returns only the first matched element.
getElementByClassName() – This method returns all
elements that match a specified class name.
getElementByTagName() – This method returns all the
elements that match a specific tag name.
querySelector() – This method returns the first element that
matches a specific CSS selector in the document.
querySelectorAll() – It returns all elements that match the
specified css selector in the document.

Example:
<html>
<body>
<div id = "test"> Hello world </div>
<script >
document.getElementById("test");
//styling the accessed element
document.getElementById('test').style.color = "pink";
</script>
</body>
</html>

forms and validations
JavaScript 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
HTML form validation can be done by JavaScript.

If a form field (fname) is empty, this function alerts a
message, and returns false, to prevent the form from
being submitted
Example:
function validateForm()
{
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}

Data Validation
Data validation is the process of ensuring that user input is
clean, correct, and useful. validation tasks are:
 has the user filled in all required fields?
 has the user entered a valid date?
 has the user entered text in a numeric field?

 the purpose of data validation is to ensure correct user
input.
 Validation can be defined by many different methods,
and deployed in many different ways.
 Server side validation is performed by a web server,
after input has been sent to the server.
 Client side validation is performed by a web browser,
before input is sent to a web server.

<html> <head> <script type="text/javascript">
function printvalue()
{
var name=document.form1.uname.value;
document.writeln("Your
Name:"+name);//alert("Welcome: "+name);
}
</script>
<form name="form1">
Enter Name:<input type="text" name=“uname"/>
<input type="button" onclick="printvalue()"
value="PRINT VALUE"/>
</form>
</body> </html>

DHTML
 DHTML stands for Dynamic Hypertext Markup
language i.e. Dynamic HTML.
 Dynamic HTML is not a markup or programming language
but it is a term that combines the features of various web
development technologies for creating the web pages
dynamic and interactive.
 Web pages may include animation, dynamic menus and text
effects.
 The technologies includes combination of HTML, JavaScript
, CSS and DOM

Designed to enhance a Web user’s experience, DHTML
includes the following features:
 Dynamic content, which allows the user to dynamically
change Web page content.
 Dynamic positioning of Web page elements
 Dynamic style, which allows the user to change the Web
page’s color, font, size or content

HTML (Hypertext Markup
language)
DHTML (Dynamic Hypertext Markup
language)
1. HTML is simply a markup
language.
1. DHTML is not a language, but it is a set of
technologies of web development.
2. It is used for developing and
creating web pages.
2. It is used for creating and designing the
animated and interactive web sites or pages.
3. This markup language creates
static web pages.
3. This concept creates dynamic web pages.
4. It does not contain any server-side
scripting code.
4. It may contain the code of server-side
scripting.
5. The files of HTML are stored with
the .html or .htm extension in a
system.
5. The files of DHTML are stored with the
.dhtm extension in a system.
6. A simple page which is created by
a user without using the scripts or
styles called as an HTML page.
6. A page which is created by a user using the
HTML, CSS, DOM, and JavaScript
technologies called a DHTML page.
7. This markup language does not
need database connectivity.
7. This concept needs database connectivity
because it interacts with users.

Events in DHTML
DHTML Events
 An event is defined as changing the occurrence of an object.
 It is compulsory to add the events in the DHTML page.
Without events, there will be no dynamic content on the
HTML page.
 The event is a term in the HTML, which triggers the
actions in the web browsers.
 Suppose, any user clicks an HTML element, then the
JavaScript code associated with that element is executed.
Actually, the event handlers catch the events performed by
the user and then execute the code.

Example of events:
 Click a button.
 Submitting a form.
 An image loading or a web page loading, etc.

Event When it occurs
onclick It occurs when any user clicks on an HTML element.
ondblclick It occurs when the user clicks on an HTML element two times
together.
onfocus It occurs when the user focuses on an HTML element.
onkeydown It triggers when a user is pressing a key on a keyboard device.
This event handler works for all the keys.
onkeypress It triggers when the users press a key on a keyboard.
onkeyup It occurs when a user released a key from a keyboard after
pressing on an object or element.
onload It occurs when an object is completely loaded.
onmousemove It occurs when a user moves the cursor on an HTML object.
onmouseover It occurs when a user moves the cursor over an HTML object.
onmouseout It occurs or triggers when the mouse pointer is moved out of an
HTML element.
onsubmit It is triggered when the user clicks a button after the submission
of a form.

Advantages of DHTML
 Those web sites and web pages which are created
using this concept are fast.
 There is no plug-in required for creating the web page
dynamically.
 Due to the low-bandwidth effect by the dynamic
HTML, the web page functionality is enhanced.
 This concept provides advanced functionalities than
the static HTML.
 It is highly flexible, and the user can make changes
easily in the web pages.

Disadvantages of DHTML
 The scripts of DHTML does not run properly in
various web browsers. It is only supported by the latest
browsers.
 The coding of those websites that are created using
DHTML is long and complex.
 For understanding the DHTML, users must know
about HTML, CSS, and JavaScript. If any user does
not know these languages, then it is a time-consuming
and long process in itself.

XML
Introduction:
 XML stands for Extensible Markup Language and
is a text-based markup language derived from
Standard Generalized Markup Language (SGML).
 It was created by the World Wide Web Consortium
(W3C) to overcome the limitations of HTML.
 XML tags identify the data and are used to store
and organize the data, rather than specifying how
to display it like HTML tags.

Why we need XML?
 Since there are systems with different types of
operating systems having data in different formats.
 In order to transfer the data between these systems
is a difficult task as the data needs to converted in
compatible formats before it can be used on other
system.
 With XML, it is so easy to transfer data between
such systems as XML doesn’t depend on platform
and the language.

Characteristics of XML
 XML is extensible − XML allows you to create your
own self-descriptive tags that suits your application.
 XML carries the data, does not present it − XML
allows you to store the data irrespective of how it will
be presented.
 XML is a public standard − XML was developed by
an organization called the World Wide Web
Consortium (W3C) and is available as an open
standard.

Similarities between HTML and XML?
1. Both are languages of web.
2. Both are markup languages.
3. Both are originated from SGML
4. Tags are basic building blocks of both HTML and XML
documents.

Differences between HTML and XML
1. HTML tags are predefined tags where as XML tags are
user defined tags.
2. HTML tags are limited number of tags where
as XML tags are extensible.
3. HTML tags are case insensitive where as XML tags
are sensitive.
4. HTML tags are meant for displaying the data but not
for describing the data

Describing the structure of an XML Document:
<?xml version = "1.0"?>
<contact-info>
<name>Kumar </name>
<company>HCL</company>
<phone>044- 123-4567</phone>
</contact-info>
there are two kinds of information in the above example −
Markup, like <contact-info>
The text, or the character data

The following diagram depicts the syntax rules to write
different types of markup and text in an XML document.

XML Declaration
The XML declaration is a piece of markup (which may
span multiple lines of a file) that identifies this as an XML
document
It is written as follows −
<?xml version="1.0" ?>
(OR)
<?xml version = "1.0" encoding = "UTF-8"?>

Syntax Rules for XML Declaration
 The XML declaration is case sensitive and must
begin with "<?xml>" where "xml" is written in
lower-case.
 If document contains XML declaration, then it
strictly needs to be the first statement of the XML
document.
 An HTTP protocol can override the value
of encoding that you put in the XML declaration.

Building blocks of XML Documents
The basic building blocks of XML Document are
 Elements
 Tags
 Attributes
 Entities
 PCDATA
 CDATA

Components of an XML
Processing Instructions:
 An XML Documents usually begins with the XML
declaration statement called the Processing
Instructions.
 This statement provides information on how the XML
file should be processed.
e.g.
<?xml version =“1.0” encoding=“UTF-8”?>
The Processing Instruction statement uses the encoding
property to specify the encoding scheme used to create
the XML file.

2. Tags:
Tags are used to specify a name for a given piece of
information. It is a means of identifying data. Data is
marked up using tags.
3. Elements:
Elements are the basic units used to identify and describe
the data in XML. They are the building blocks of an XML
document. Elements are represented using tags.
4. Content:
Content refers to the information represented by the elements
of an XML document.
Consider the following example:
<book_name>Web Programming</book_name >

5. Attributes:
Attributes provide additional information about the
elements for which they are declared
example:
<book_name id = “101”> Web </ book_name >
6. Entities:
An entity is a name that is associated with a block of
data, such as chunk of text or a reference to an external
file that contains textual or binary information. It is a
set of information that can be specifying a single
name.

Tags and Elements
An XML file is structured by several XML-elements, also
called XML-nodes or XML-tags.
The names of XML-elements are enclosed in triangular
brackets < >
Element Syntax −
Each XML-element needs to be closed either with start or
with end elements as shown below −
<element>....</element>.
An element can contain:
text
attributes
other elements

XMLAttributes
 XML elements can have attributes, just like HTML.
 Attributes are designed to contain data related to a specific
element.
 Attribute values must always be quoted. Either single or
double quotes can be used.
Example:
<person gender="female">
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>

Example:
<book-store>
<book category="children">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</book-store>

XML Validation
A well formed XML document can be validated against DTD
or Schema.
 A well-formed XML document is an XML document with
correct syntax.
 It is very necessary to know about valid XML document
before knowing XML validation.

DTD(Document Type Declaration)
 XML Document Type Declaration commonly known as DTD
is a way to describe precisely the XML language.
 The purpose of a DTD is to define the legal building blocks
of an XML document.
 It defines the document structure with a list of legal elements.
 A DTD can be declared inline in your XML document, or as
an external reference.
 DTDs check the validity of, structure and vocabulary of an
XML document against the grammatical rules of the appropriate
XML language.

Syntax:
<!DOCTYPE element DTD identifier
[ declaration1
declaration2 ........
]>
In the above syntax −
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.
The square brackets [ ] enclose an list of entity
declarations called internal subset.

A DTD can be declared inside an XML document as inline or
as an external recommendation.
DTD determines how many times a node should appear, and
how their child nodes are ordered.
There are 2 data types,
 PCDATA is parsed character data.
 CDATA is character data, not usually parsed.

ELEMENT declaration:
 A DTD element is declared with an ELEMENT keyword
 When an XML file is validated by DTD, parser initially
checks for the root element
Syntax
<!ELEMENT elementname (content)>
ELEMENT declaration is used to indicate the parser that you
are about to define an element.
elementname is the element name (also called the generic
identifier) that you are defining.
content defines what content (if any) can go within the
element.

Example:
<!ELEMENT Library (Book)>
<!ELEMENT Book (Author,Title,price)>
<!ELEMENT Title (#PCDATA)>
<!ATTLIST Title lang CDATA #REQUIRED>

 Declaring Attributes in DTD:
syntax:
<!ATTLIST element-name attribute-name attribute-type
default-value>
#DEFAULT value The attribute has a default value.
#REQUIRED The attribute value must be included in the
elemen
DTD example:
<!ATTLIST payment type CDATA "check">
<!ATTLIST Title lang CDATA #REQUIRED>
example:
<payment type="check" />
<title lang="english">The Road Ahead</title>

Declare Entities in DTD: :
entities are used to define shortcuts to special characters.
<!ENTITY entity-name "entity-value">
 entity_name is the name of entity followed by its value
within the double quotes or single quote.
 entity_value holds the value for the entity name.
Example:
<?xml version="1.0" standalone="yes" ?>
<!DOCTYPE author [
<!ELEMENT author (#PCDATA)>
<!ENTITY sj "RSV">
]>
<author>&sj;</author>

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE Library [
<!ELEMENT Library (Book)>
<!ELEMENT Book (Author,Title)>
<!ELEMENT Author (#PCDATA)>
<!ATTLIST Title lang CDATA #REQUIRED> ]>
<Library>
<Book>
<author>Bill Gates</author>
<title lang="english">The Road Ahead</title>
</Book>

<Book>
<author>Sri Sri Paramahansa Yogananda</author>
<title lang=“Hindi“>God Talks with Arjuna: The Bhagavad
Gita
</title>
</Book>
<Book>
<author>SRI SRI</author>
<title lang=“Telugu“> Mahaprastanam </title>
</Book>
</Library>

<?xml version="1.0"?>
<!DOCTYPE employee SYSTEM "employee.dtd">
<employee>
<firstname>Ajay</firstname>
<lastname>s</lastname>
<email>ajay@vrsec.com</email>
</employee>
employee.dtd
<!ELEMENT employee (firstname,lastname,email)>
<!ELEMENT firstname (#PCDATA)>
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT email (#PCDATA)>

Disadvantages of using DTD
 It does not support the namespaces.
 It supports only the text string data type.
 It is not object oriented. Hence, the concept of inheritance
cannot be applied on the DTDs.

XML Schema
XML Schema is commonly known as XML Schema
Definition (XSD) language.
It is used to describe and validate the structure and the
content of XML Documents.
It defines the elements, attributes and data types.
Schema element supports Namespaces.

 Elements Declration:
elements are the building blocks of XML document.
An element can be defined within an XSD as follows −
<xs:element name = "x" type = "y"/>
example:
<xs:element name = "phone_number" type = "xs:int" />
 Attributes Declration:
Attributes in XSD provide extra information within an
element. Attributes have name and typeproperty as shown
below −
<xs:attribute name = "x" type = "y"/>

employee.xsd
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" >
<xs:element name="employee">
<xs:complexType>
<xs:sequence>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
<xs:element name="email" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

<employee
xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance"
xsi:schemaLocation=“employee.xsd">
<firstname>vimal</firstname>
<lastname>jaiswal</lastname>
<email>vrsec.com</email>
</employee>

Advantages of using XML Schema over DTD
 Schema uses XML as language so you don’t have to learn
new syntax.
 XML schema supports data types and namespaces.
 You can use XML parser to parse the XML schema as well.
 Just like XML, the XML schema is extensible which means
you can reuse the schema in other schema.

Transforming XML using XSL and XSLT
XSL stands for EXtensible Stylesheet Language.
XSLT is for Transformation of XML document to other
formats.
XSL stands for EXtensible Stylesheet Language. It is a styling
language for XML just like CSS is a styling language for
HTML.

wp-UNIT_III.pptx

Recommended

Recommended

More Related Content

Similar to wp-UNIT_III.pptx

Similar to wp-UNIT_III.pptx (20)

Recently uploaded

Recently uploaded (20)

wp-UNIT_III.pptx