Scribd
Upload
5 views

module 2

Uploaded by

Ruchu Kurian
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

module 2

Uploaded by

Ruchu Kurian
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 68

DYNAMIC DOCUMENTS

WITH JAVASCRIPT
Module 2
INTRODUCTION TO DYNAMIC DOCUMENTS
 Dynamic document, as the name suggests refers
to a document that is dynamic in such a way that
it is customizable and changeable according to
user input.
For example:-
 Using CSS we can change the background color
of the web page each time the user clicks a button
on the webpage.
 Using JavaScript we can ask the user to enter
his/her name and then display it dynamically on
the webpage.
POSITIONING ELEMENTS
<html lang="en">
<head>
<link rel="stylesheet" href="./styles.css" /> <title>CSS
positions</title>
<style>
.first { background-color: lightgreen; }
.second { background-color: lightcoral; }
.third { background-color: lightgoldenrodyellow; }
</style>
</head>
<body> <div class="container">
<span>Container</span>
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div> </div>
</body> </html>
 The Key to DHTML: The position Attribute
 The CSS position attribute specifies the type of
positioning applied to an element.
 The four possible values for this attribute are:

1. static
 This is the default value of the position property. If
the position of an element is static, the element will
render in order, based on the position of it in the
original document flow.
2. absolute
 it is positioned based on the closest positioned
element (which has position other than static).
.second { background-color: lightcoral;
position: absolute;
left: 20px;
top: 70px; }
3. Fixed
 With fixed positioning we also have access
to top, left, right, bottom properties. In this case
the element is positioned relative to the browser
window's viewport.
 So if we set top 70px and left 20px on a fixed
positioned element it will appear 70 pixels from
the top of the viewport and 20px from the left
edge of the viewport. Fixed positioning also
removes the document from the normal
document flow.
 .second { background-color: lightcoral; position:
fixed; left: 20px; top: 70px; }
4. relative
 If we set the position of an element to relative, it
will appear in the document as it would by
default using static. The trick is that by setting
position relative, we gain access to the following
CSS properties: top, left, right, bottom. With
these we can add an offset to the specific
direction. So for example if we set left: 20px. The
element will be placed 20 pixel to the right. If we
would have provided -20px it would push the
content to the left with 20px.
 .second { background-color: lightcoral; position:
relative; left: 20px; }
 Specifying the Position and Size of Elements
 Once you have set the position attribute of an element
to something other than static, you can specify the
position of that element with some combination of the
left , top, right, and bottom attributes.
 The most common positioning technique is to specify
the left and top attributes, which specify the distance
from the left edge of the containing element (usually
the document itself ) to the left edge of the element,
and the distance from the top edge of the container to
the top edge of the element.
 <div style="position: absolute; left: 100px; top:
100px;">
 place an element 100 pixels from the left and 100
pixels from the top of the document
 you can also use right and bottom to specify the
position of the bottom and right edges of an
element relative to the bottom and right edges of
the containing element.
 <div style="position: absolute; right: 0px; bottom:
0px”>
 To position an element so that its top edge is 10
pixels from the top of the window and its right
edge is 10 pixels from the right of the window,
you can use these styles:
 position: fixed; right: 10px; top: 10px;
 In addition to the position of elements, CSS allows
you to specify their size. This is most commonly done
by providing values for the width and height style
attributes.
 <div style="position: absolute; left: 10px; right: 10px;
width: 10px; height: 10px; background-color: blue">
 values for the position and size attributes were
specified with the suffix "px". This stands for pixels.
The CSS standard allows measurements to be done in
a number of other units, including inches ("in"),
centimeters ("cm"), points ("pt"), and ems ("em" -- a
measure of the line height for the current font). Pixel
units are most commonly used with DHTML
programming.
 CSS also allows you to specify the position and size of
an element as a percentage of the size of the
containing element
 Element size and position details
 It is important to understand some details about
how the left , right, width, top, bottom, and
height attributes work.
 First, width and height specify the size of an
element's content area only; they do not include
any additional space required for the element's
padding, border, or margins.
 To determine the full onscreen size of an element
with a border, you must add the left and right
padding and left and right border widths to the
element width, and you must add the top and
bottom padding and top and bottom border
widths to the element's height.
Moving elements

 DHTML scenario is not only positioning an element,


but also moving and therefore animating an element.
 To do so, window.setTimeout() and
window.setInterval() come in handy.
 setTimeout allows us to run a function once after the
interval of time. setInterval allows us to run a
function repeatedly, starting after the interval of
time, then repeating continuously at that interval.
 window.setTimeout(function, milliseconds);
 The window.setTimeout() method can be written
without the window prefix.
 The first parameter is a function to be executed.
 The second parameter indicates the number of
milliseconds before execution.
 setInterval(function, milliseconds, param1,
param2, ...)
 Function: The function to execute

 Milliseconds: The execution interval.

 param1, param2, (Optional): Additional


parameters to pass to the function
<body>
<button onclick=“setTimeout(myFunction, 3000)”
value=“Try it”>
<script>
function myFunction()
{
alert(“Hello”);
}
//click ‘Try it’ button and wait 3 seconds, then the
page will alert ‘Hello’
<body>
<p id=“demo”></p>
<script>
setInterval(myTimer, 1000);
function myTimer()
{
document.getElementById(“demo”).innerHTML=
“hello”;
}
</script>
</body>
//execute function once every one second.
Element visibility
 The visibility property of an element controls whether it is displayed
 The values are visible and hidden
 object.style.visibility = "visible|hidden”;
<html>
<body>
<p id="myParagraph">This is a p element.</p>
<button type="button" onclick="myFunction()">Hide content of
p</button>
<script>
function myFunction() {
document.getElementById("myParagraph").style.visibility = "hidden";
// document.getElementById("myParagraph").style.visibility = “visible";
}
</script>
</body>
</html>
CHANGING COLORS AND FONTS
 In order to change text colors, you will need two
things:
1. A command to change the text.
2. A color (hex) code.
 Section 1: Changing Full-Page Text Colors
 You have the ability to change full-page text colors
over four levels:
 <TEXT="######"> -- This denotes the full-page text
color.
 <LINK="######"> -- This denotes the color of the
links on your page.
 <ALINK="######"> -- This denotes the color the link
will flash when clicked upon.
 <VLINK="######"> -- This denotes the colors of the
links after they have been visited.
 < BODY BGCOLOR="######" TEXT="######"
LINK="######" VLINK="######">
 <VLINK="#FFFFFF">
 Section 2: Changing Specific Word Color But I
only want to change one word's color!
 You'll use a color (hex) code to do the trick.
Follow this formula:
 <FONT COLOR="######">text text text text
text</FONT>
USING CASCADING STYLE SHEET(CSS) TO
CHANGE TEXT COLORS
 CSS is used to define different elements on your web page. These
elements include text colors, link colors, page background, tables,
forms--just about every aspect of the style of the web page.
<STYLE type=text/css>
A:link {
COLOR: red /*The color of the link*/
}
A:visited {
COLOR: #800080 /*The color of the visited link*/
}
A:hover {
COLOR: green /*The color of the mouseover or 'hover' link*/
}
BODY { COLOR: #800080 /*The color of all the other text within the
body of the page*/
{
</STYLE>
 Alternately, you can include the CSS that is
between the STYLE tags above, and save it in a
file that you could call "basic.css" which would be
placed in the root directory of your website.
 You would then refer to that style sheet by using
a link that goes between the HEAD tags in your
web page, like this:
 <link type="text/css" rel="stylesheet"
href="basic.css">
 If you are using an external style sheet, you can
make the change once in the style sheet, and it
will be applied to your entire site.
Dynamic content
 Dynamic content (aka adaptive content) refers
to web content that changes based on
the behavior, preferences, and interests of the
user.
 It refers to websites as well as e-mail content and
is generated at the moment a user requests a
page.
 Dynamic content is personalized and adapts
based on the data you have about the user and on
the access time, its goal being to deliver an
engaging and satisfying online experience for the
visitor.
STACKING ELEMENTS
 Although multiple elements can occupy the same
space in the document, one is considered to be on
top and is displayed.
 The top element hides the parts of the lower
elements on which it is superimposed.
 The placement of elements in this third
dimension is controlled by the z-index attribute of
the element.
 An element whose z-index is greater than that of
an element in the same space will be displayed
over the other element, effectively hiding the
element with the smaller z-index value.
 The JavaScript style property associated with the
z-index attribute is zIndex.
 In this example, every positioned element creates its own stacking
context, because of their positioning and z-index values. The
hierarchy of stacking contexts is organized as follows:
 Root
 DIV #1
 DIV #2
 DIV #3
 DIV #4
 DIV #5
 DIV #6
 DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of
those elements is completely resolved within DIV #3. Once stacking
and rendering within DIV #3 is completed, the whole DIV #3 element
is passed for stacking in the root element with respect to its sibling's
DIV.
 DIV #4 is rendered under DIV #1 because DIV #1's z-index (5) is valid
within the stacking context of the root element, while DIV #4's z-
index (6) is valid within the stacking context of DIV #3. So, DIV #4 is
under DIV #1, because DIV #4 belongs to DIV #3, which has a lower
z-index value.
 For the same reason DIV #2 (z-index: 2) is rendered under DIV#5 (z-
index: 1) because DIV #5 belongs to DIV #3, which has a higher z-
index value.
 DIV #3's z-index is 4, but this value is independent from z-index of
DIV #4, DIV #5 and DIV #6, because it belongs to a different stacking
context.
LOCATING THE MOUSE CURSOR
 A mouse-click event is an implementation of the Mouse-Event
interface, which defines two pairs of properties that provide
geometric coordinates of the position of the element in the
display that created the event.
 clientX and clientY, gives the coordinates of the element
relative to the upper-left corner of the browser display
window, in pixels.
 The clientX property returns the horizontal client
coordinate of the mouse pointer when a mouse event occurs.
 The clientY property returns the vertical client
coordinate of the mouse pointer when a mouse event occurs.
<body onclick="showCoords(event)“>
function showCoords(event) {
let x = event.clientX;
let y = event.clientY;
let text = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = text;
}
 screenX and screenY, also gives coordinates of the
element, but relative to the client upper-left corner
of the browser display window, in pixels
 The screenX property returns the horizontal
screen coordinate of the mouse pointer when a
mouse event is triggered.
 The screenY property returns the vertical screen
coordinate of the mouse pointer when a mouse
event occurs.
function showCoords(event) {
let x = event.screenX;
let y = event.screenY;
let text = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML =
text;
}
REACTING TO A MOUSE CLICK
 The next example is another one related to
reacting to mouse clicks. In this case, the
mousedown and mouseup events are used,
respectively, to show and hide the message
“Please don’t click here!” on the display under the
mouse cursor whenever the mouse button is
clicked, regardless of where the cursor is at the
time. The offsets (-130 for left and -25 for top)
modify the actual cursor position so that the
message is approximately centered over it.
DRAGGING AND DROPPING ELEMENTS
The basic Drag’n’Drop algorithm looks like this:
 On mousedown – prepare the element for
moving, if needed (maybe create a clone of it, add
a class to it or whatever).
 Then on mousemove move it by
changing left/top with position:absolute.
 On mouseup – perform all actions related to
finishing the drag’n’drop.
XML
 The Standard Generalized
Markup Language ( SGML) is a standard for
defining generalized markup languages for
documents.
 Developed in the early 1980s; In 1986 SGML was
approved by ISO std.
 HTML was developed using SGML in the early
1990s - specifically for Web documents.
Two problems with HTML:
1. HTML is defined to describe the general form and
layout of information without considering its
meaning.
2. Fixed set of tags and attributes
3. There are no restrictions on arrangement or order of
tag appearance in document. For example, an
opening tag can appear in the content of an element,
but its corresponding closing tag can appear after
the end of the element in which it is nested.
Problem with using SGML:
 It‘s too large and complex to use and it is very difficult
to build a parser for it. SGML includes a large
number of capabilities that are only rarely used.
A better solution:
Define a simplified version of SGML and allow users
to define their own markup languages based on it.
XML was designed to be that simplified version of
SGML.
 XML, also known as the extensible markup
language, evolved from SGML and is more user-
friendly. Since XML is made to structure and
encode data in a human-readable format, it may
be used for a variety of purposes, including data
exchange and configuration files.
 Documents in XML are arranged using elements
included in tags. Data is included within these
tags, which establish the document’s hierarchical
structure. An optional XML declaration that
identifies the version and encoding is included at
the start of every XML document.
 XML is a very simple and universal way of
storing and transferring any textual kind
 XML does not predefine any tags
 XML tag and its content, together with closing
tag _ element
 XML document can include several different
kinds of statements.
1. Data elements
2. Markup declarations - instructions to XML
parser
3. Processing instructions – instructions for an
applications program that will process the data
described in the document. The most common of
these are the data elements of the document.
XML document may also include markup
declarations, which are instructions to the XML
parser, and processing instructions, which are
instructions for an application program that will
process the data described in the document.
Document structure
 XML document often uses two auxiliary files:
 It specifies tag set and syntactic structural rules.
 It contain the style sheet to describe how the content of the
document to be printed. XML documents (and HTML
documents) are made up by the following building blocks:
Elements, Tags, Attributes, Entities, PCDATA, and CDATA
1. Elements
 Elements are the main building blocks of both XML and
HTML documents. Elements can contain text, other elements,
or be empty.
2. Tags
 Tags are used to markup elements.
 A starting tag like <element_name> mark up the beginning of
an element, and an ending tag like
 </element_name> mark up the end of an element. Examples:
 A body element: <body>body text in between</body>.
 A message element: <message>some message in
between</message>
3. Attributes
 Attributes provide extra information about elements.
 Attributes are placed inside the start tag of an
element. Attributes come in name/value pairs. The
following "img" element has an additional information
about a source file:
 <img src="computer.gif" /> The name of the element
is "img". The name of the attribute is "src".
 The value of the attribute is "computer.gif". Since the
element itself is empty it is closed by a "
 /".
4. PCDATA
 PCDATA means parsed character data.
 Think of character data as the text found between the
start tag and the end tag of an XML element.
 PCDATA is text that will be parsed by a parser. Tags
inside the text will be treated as markup and entities
will be expanded.
5. CDATA
 CDATA also means character data. CDATA is text that will
NOT be parsed by a parser. Tags inside the text will NOT be
treated as markup and entities will not be expanded.
 Eg: <sender>John</sender>
 <![CDATA[<sender>John</sender>]]> equalent to,
&lt;sender&gt;John&lt;/sender&gt;
6. Entities
 Entities are used to define shortcut to special character.
<!Entity entity-name “entity-value”>
<!Entity Writer “Donald”>
<author>&Writer;</author>
 All other entities are referenced in the document entity
Reasons to break a document into multiple entities.
 Good to define a Large documents as a smaller no. of parts
easier to manage .
 If the same data appears in more than one place in the
document, defining it as a entity allows any no. of references
to a single copy of data.
 Many documents include information that cannot be
represented as text, such as images. Such information units
are usually stored as binary data. Binary entities can only be
referenced in the document entities
 Entity names:
 No length limitation
 Must begin with a letter, a dash, or a colon
 Can include letters, digits, periods, dashes, underscores, or colons
 _ A reference to an entity has the form name with prepended
ampersand and appended semicolon: &entity_name; Eg.
&apple_image;
 _ One common use of entities is for special characters that may be
used fo markup delimiters to appear themselves in the document.
 Every XML files should have one or more Root elements to avoid
error. For example below code is wrong because it’s not containing
Root element.
<message>
<to>Students</to>
<from>Teacher</from>
<subject>Regarding assignment submission</subject>
<text>All students will have to submit assignment by
tomorrow.</text>
</message>
 In the first example the Root element is <message> and all the
remaining elements <to>, <from> etc is the child element and
reside within the root element.
 It is case sensitive.
 The XML element should have a closing element for
example <text category = “message”>Hi</text> is correct
but <text category = “message”>Hi is not correct because it
does not contain the closing element and it will throw an error
and vice-versa.
 The elements in XML should be nested properly otherwise it
will throw an error. For
example <to><from>xml</from></to> is nested correctly
but <to><from>xml</to></from> is wrong because if <from>
is opened inside the <to> element then this should also end
inside of the </to> element.
 The XML attribute is having two part one is Name and other
is its value
 The XML attribute is also case sensitive.
 An XML element can have multiple attributes but can not
have the same attribute names in the same element. For
example: <text category =”message” purpose =
“greet”>xml</text> Above attributes is correct because of
having multiple attributes with the different attribute
name. <text category =”message” category =
“greet”>xml</text> Above attribute is wrong because of
having the same attribute name in a single element.
COMMENT IN XML
 <!– It is comment section –>
 Incorrect comments: <!– It is comment — section
–> i.e. Two dashes in between the comment is not
allowed.
Document Type Definitions (DTD)
 A DTD is a Document Type Definition.
 A DTD defines the structure and the legal elements and
attributes of an XML document.
 DTD declarations have the form: <!keyword … >
I. !DOCTYPE note defines that the root element of this
document is note
II. !ELEMENT note defines that the note element must
contain four elements: "to,from,heading,body"
III. !ELEMENT to defines the to element to be of type
"#PCDATA"
IV. !ELEMENT from defines the from element to be of type
"#PCDATA"
V. !ELEMENT heading defines the heading element to be
of type "#PCDATA"
VI. !ELEMENT body defines the body element to be of type
"#PCDATA"
 <?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>
DECLARING ATTRIBUTES:
 Attributes are declared separately from the
element declarations
 General form:

 <!ATTLIST element_name attribute_name


attribute_type [default _value]> More than one
attribute
 DTD example:

<!ATTLIST payment type CDATA "check">

XML example:

<payment type="check" />


DECLARING ENTITIES :
Two kinds:
 A general entity can be referenced anywhere in the content of an
XML document Ex: Predefined entities are all general entities.
 A parameter entity can be referenced only in DTD.
 General Form of entity declaration.
 <!ENTITY [%] entity_name "entity_value">
 % when present it specifies declaration parameter entity Example :
 <!ENTITY jfk "John Fitzgerald Kennedy">
 _ A reference above declared entity: &jfk;
 If the entity value is longer than a line, define it in a separate file (an
external text entity)
 _ General Form of external entity declaration
 <!ENTITY entity_name SYSTEM ―file_location">
 SYSTEM specifies that the definition of the entity is in a different
file.
 Example for parameter entity
 <!ENTITY %pat ―(USN, Name)‖ >
 <!ELEMENT student %pat; >
XML NAMESPACES
 XML Namespace provide a method to avoid element name conflicts.
 When using prefixes in XML, a namespace for the prefix must be defined.
 The namespace can be defined by an xmlns attribute in the start tag of an
element.
 The namespace declaration has the following syntax. xmlns:prefix="URI".
 <root>
<h:table xmlns:h="http://www.w3.org/TR/html4/">
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table xmlns:f="https://www.w3schools.com/furniture">
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
</root>
 In the example above:
 The xmlns attribute in the first <table> element gives the h: prefix a qualified
namespace.
 The xmlns attribute in the second <table> element gives the f: prefix a
qualified namespace.
 When a namespace is defined for an element, all child elements with the same
prefix are associated with the same namespace.
 Namespaces can also be declared in the XML root
element:
 <root xmlns:h="http://www.w3.org/TR/html4/"
xmlns:f="https://www.w3schools.com/furniture">
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
</root>
XML Schemas
 An XML Schema describes the structure of an
XML document.
 The XML Schema language is also referred to as
XML Schema Definition (XSD).
 The purpose of an XML Schema is to define the
legal building blocks of an XML document:
➢ the elements and attributes that can appear in a
document
➢ the number of (and order of) child elements

➢ data types for elements and attributes

➢ default and fixed values for elements and


attributes
<?xml version = "1.0" encoding = "UTF-8"?> <xs:schema
xmlns:xs = "http://www.w3.org/2001/XMLSchema">
<xs:element name = "contact"> <xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
 Elements are the building blocks of XML document.
An element can be defined within an XSD as follows −
 <xs:element name = "x" type = "y"/>
DEFINITION TYPES
1. Simple Type
 Simple type element is used only in the context of
the text. Some of the predefined simple types are:
xs:integer, xs:boolean, xs:string, xs:date. For
example −
 <xs:element name = "phone_number" type =
"xs:int" />
2.Complex Type
 A complex type is a container for other element
definitions. This allows you to specify which child
elements an element can contain and to provide
some structure within your XML documents. For
example −
 <xs:element name = "Address">
<xs:complexType> <xs:sequence> <xs:element
name = "name" type = "xs:string" /> <xs:element
name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence> </xs:complexType> </xs:element>
3. Global Types
 With the global type, you can define a single type
in your document, which can be used by all other
references. For example, suppose you want to
generalize the person and company for different
addresses of the company. In such case, you can
define a general type as follows −
 <xs:element name = "AddressType">
<xs:complexType> <xs:sequence> <xs:element
name = "name" type = "xs:string" /> <xs:element
name = "company" type = "xs:string" />
</xs:sequence> </xs:complexType> </xs:element>
 Attributes
 Attributes in XSD provide extra information
within an element. Attributes
have name and type property as shown below −
 <xs:attribute name = "x" type = "y"/>
Displaying RAW XML Documents
 An XML enabled browser or any other system
that can deal with XML documents cannot
possibly know how to format the tags defined in
the doc.
 Without a style sheet that defines presentation
styles for the doc tags the XML doc can not be
displayed in a formatted manner.
 Some browsers like FX2 have default style sheets
that are used when style sheets are not defined.
 Most browsers will display an XML document
with color-coded elements.
 Often a plus (+) or minus sign (-) to the left of the
elements can be clicked to expand or collapse the
element structure.
Displaying XML Documents with CSS
 Displaying XML file using CSS :
CSS can be used to display the contents of the XML
document in a clear and precise manner. It gives the design
and style to whole XML document.
 Basic steps in defining a CSS style sheet for XML :
For defining the style rules for the XML document, the following
things should be done :-
 Define the style rules for the text elements such as font-size, color, font-
weight, etc.
 Define each element either as a block, inline or list element, using the
display property of CSS.
 Identify the titles and bold them.
 Linking XML with CSS :
In order to display the XML file using CSS, link XML file with CSS.
Below is the syntax for linking the XML file with CSS:
 <?xml-stylesheet type="text/css" href="nameofcssfile.css"?>
XSLT STYLE SHEETS
 The eXtensible Stylesheet Language (XSL) is a family
of recommendations for defining the presentation and
transformations of XML documents. It consists of
three related standards: XSL Transformations
(XSLT), XML Path Language (XPath), and XSL
Formatting Objects (XSL-FO).
 One common use for XSLT is to transform XML
documents into XHTML documents, primarily for
display.
 In the transformation of an XML document, the
content of elements can be moved, modified, sorted,
and converted to attribute values, among other
things.
 XSLT style sheets are XML documents, so they can be
validated against DTDs.
 They can even be transformed with the use of other
XSLT style sheets.
 The XSLT standard is given at
http://www.w3.org/TR/xslt.
 XSLT is actually a simple functional-style programming
language.
 Included in XSLT are functions, parameters, names to
which values can be bound, selection constructs, and
conditional expressions for multiple selection.
 The syntactic structure of XSLT is XML, so each statement
is specified with an element.
 The XSLT document is the program to be executed; the XML
document is the input data to the program.
 Parts of the XML document are selected, possibly modified,
and merged with parts of the XSLT document to form a new
document, which is sometimes called an XSL document.
 The output document can be stored for future use by
applications, or it may be immediately displayed by an
application, often a browser.
 Neither the XSLT document nor the input XML document is
changed by the XSLT processor.
 The transformation process used by an XSLT
processor

One XSLT model of processing XML data is called the template-driven


model,
XML PROCESSORS
 When a software program reads an XML
document and takes actions accordingly, this is
called processing the XML.
 Any program that can read and process XML
documents is known as an XML processor.
 An XML processor reads the XML file and turns
it into in-memory structures that the rest of the
program can access.
 The most fundamental XML processor reads an
XML document and converts it into an internal
representation for other programs or subroutines
to use. This is called a parser, and it is an
important component of every XML processing
program.
 XML processors are classified as validating or non-
validating types, depending on whether or not they check
XML documents for validity. A processor that discovers a
validity error must be able to report it, but may continue
with normal processing.
1. Validating parsers: It perform more rigorous
checks, such as making sure the document
conforms to the rules laid by its Document Type
Definition(DTD)
Eg: xml4c (IBM, in C++), xml4j (IBM, in Java), MSXML
(Microsoft, in Java), TclXML (TCL), xmlproc (Python),
XML::Parser (Perl), Java Project X (Sun, in Java).
2. Non-validating parsers: It ensure that a document
meets the general rules of xml, such as xml
document contain one root element or that tags are
properly balanced.
Eg: OpenXML (Java), Lark (Java), xp (Java), AElfred
(Java), expat (C), XParse (JavaScript), xmllib (Python).
WEB SERVICES
 A web service is a set of open protocols and
standards that allow data to be exchanged
between different applications or systems.
 Web services can be used by software programs
written in a variety of programming languages
and running on a variety of platforms to
exchange data via computer networks such as the
Internet in a similar way to inter-process
communication on a single computer.
 Any software, application, or cloud technology
that uses standardized web protocols (HTTP or
HTTPS) to connect, interoperate, and exchange
data messages – commonly XML (Extensible
Markup Language) – across the internet is
considered a web service.
COMPONENTS OF WEB SERVICE
1. SOAP (Simple Object Access Protocol)
 SOAP stands for “Simple Object Access Protocol.” It is
a transport-independent messaging protocol. SOAP is
built on sending XML data in the form of SOAP
Messages. A document known as an XML document is
attached to each message. Only the structure of the
XML document, not the content, follows a pattern.
The best thing about Web services and SOAP is that
everything is sent through HTTP, the standard web
protocol.
2. UDDI (Universal Description, Discovery, and
Integration)
 UDDI is a standard for specifying, publishing and
discovering a service provider’s online services. It
provides a specification that aids in the hosting of
data via web services. The UDDI registry will hold
the required information for the online service, just
like a telephone directory has the name, address, and
phone number of a certain individual. So that a client
application may figure out where it is.
3. WSDL (Web Services Description
Language)
 If a web service can’t be found, it can’t be used.
The client invoking the web service should be
aware of the location of the web service. Second,
the client application must understand what the
web service does in order to invoke the correct
web service. The WSDL, or Web services
description language, is used to accomplish this.
The WSDL file is another XML-based file that
explains what the web service does to the client
application.

You might also like