2
The Difference Between XML and HTML
1. XML is not a replacement for HTML.
HTML XML
1. HTML was designed to 1. XML was designed to
display data, with focus transport and store data,
on how data looks with focus on what data is
5
Use of XML
4. XML Simplifies Platform Changes
– 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.
6
XML Tree
<note>
<to>Jack</to> note
<from>John</from
>
<heading>
to from body
Reminder
</heading>
<body>
Don't forget me heading
this weekend!
</body>
</note>
7
<bookstore>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
8
XML Syntax Rules( Well Formedness)
1. All XML Elements Must Have a
Closing Tag
2. XML Tags are Case Sensitive
3. XML Elements Must be Properly
Nested
4. XML Documents Must Have a Root
Element
5. XML Attribute Values Must be
Quoted
9
Attributes Vs Elements
There is no rules about that when to use
what.
<note> <note date=“10/02/2012”>
<date>10/02/2012</date> <to>Jack</to>
<to>Jack</to> <from>John</from>
<from>John</from> <heading>
<heading> Reminder
Reminder </heading>
</heading> <body>
<body> Don't forget me this
Don't forget me this weekend!
weekend! </body>
</body> </note>
</note>
10
Attributes Vs Elements
Disadvantages of using attributes
1. Cannot contain multiple values
2. Not expandable
3. Can not describe structure
4. Not easy to test against DTD
11
XML VALIDITY
1. Some XML documents are additionally
valid.
2. Valid documents must conform not only to
the syntax, but also to the DTD
(Document Type Definition).
3. DTD is a set of rules that defines what
tags appear in a XML document, so that
viewers of an XML document know what all
the tags mean.
went we. never school to
We never went to school
12
13
14
XML DTD
<?xml version=“1.0”?>
<!DOCTYPE note [
<!ELEMENT note (to, from, heading,
body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
15
XML DTD
1. It defines legal building blocks of
an XML document.
2. It defines the document structure
with a list of legal elements.
3. A DTD can be declared inline in XML
document or as external reference
USE:
With a DTD, independent groups of
people can agree to use a common a
DTD for interchanging data.
16
XML DTD
DTD Elements
1. Declaring an Element
<! ELEMENT element-name (element-
content)>
2. EMPTY ELEMENTS
<!ELEMENT element-name (EMPTY)>
3. Elements with DATA
(CDATA) (#PCDATA) (ANY)
4. Elements with children
(child-elements)
17
XML DTD
DTD Elements
5. Wrapping:
<!DOCTYPE root-Element [Element-
Declarations]>
6. One occurrence
7. One or more occurrence(+)
8. Zero or more(*)
9. Zero or one(?)
18
XML DTD
DTD Attributes
1. Declaring Attributes
<!ATTLIST element-name attribute-
name
attribute-type
default-value>
Attribute type:
CDATA,ID,IDREF,IDREFS,ENTITY etc.
19
XML Entities
• Five special characters must be written as
entities:
& for & (almost always necessary)
< for < (almost always necessary)
> for > (not usually necessary)
" for " (necessary inside double quotes)
' for ' (necessary inside single quotes)
• These entities can be used even in places
where they are not absolutely required
• These are the only predefined entities in XML
20
Question XML
23
DTD Entities
1. Entities are variables used to define
shortcuts to common text. Entity
references are references to entities
2. They allow to associate a name with
some other fragment of content.
3. Three types
1. Internal: for frequently typed text or text
that is expected to change
<!ENTITY entity-name “entity-value”>
2. External:
<!ENTITY entity-name SYSTEM “URL”>
24
XML QUIZ
Q1. What does XML stand for?
a) extensible Markup Language
b) X-Markup Language
c) Example Markup Language
d) extra Modern Link
Q2. Every XML document must have an
associated DTD or schema
a) True b) False
25
XML QUIZ
Q3. Which statement about XML is true?
a) Elements may nest but not overlap
b) Quoting attributes is optional
c) Elements may have multiple attributes with the
same name
Q4. What is the correct declaration syntax for
the version of XML document?
a) <?xml version="1.0" />
b) b) <?xml version="1.0"?>
c) c) <xml version="1.0" />
26
XML QUIZ
Q5. How is an empty element field
defined?
a) <name></name b) <name />
b) <name/> d) All of the above
28
XML Schema
• XML Schema is an XML-based alternative to DTD.
• An XML schema describes the structure of an XML
document.
• The XML Schema language is also referred to as XML
Schema Definition (XSD).
An XML Schema:
• defines elements that can appear in a document
• defines attributes that can appear in a document
• defines which elements are child elements
• defines the order of child elements
• defines the number of child elements
• defines whether an element is empty or can include text
• defines data types for elements and attributes
• defines default and fixed values for elements and
attributes
29
XML Schema
Buliding Blocks
1. Root of the schema is defined by <schema>,
qualified with namespace.
2. Simple elements
1. <xs:element name="xxx" type="yyy"/>
1. Types:
• xs:string
• xs:decimal
• xs:integer
• xs:boolean
• xs:date
• xs:time
30
XML Schema
Buliding Blocks
1. <xs:attribute name="xxx" type="yyy"/>
1. Types:
• xs:string
• xs:decimal
• xs:integer
• xs:boolean
• xs:date
• xs:time
2. Complex Elements
• empty elements
• elements that contain only other elements
• elements that contain only text
• elements that contain both other elements and text
31
XML Schema
Buliding Blocks
1. <xs:element name="employee">
<xs:complexType>
<xs:sequence>
<xs:element name="firstname"
type="xs:string"/>
<xs:element name="lastname"
type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
32
<?xml version="1.0"?>
<xs:schema
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
33
XSLT
• XSLT is a language for transforming
XML documents into XHTML documents
or to other XML documents.
– <xsl:template match=“/”>
34
XML DOM
What is the DOM?
1. The DOM is a W3C (World Wide Web Consortium) standard.
2. The DOM defines a standard for accessing documents like XML and
HTML:
“ 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."
35
XML DOM
What is the XML DOM?
The XML DOM is:
1. A standard object model for XML
2. A standard programming interface for XML
Platform- and language-independent
3. A W3C standard
4. The XML DOM defines the objects and
properties of all XML elements, and the
methods (interface) to access them.
5. In other words: The XML DOM is a standard
for how to get, change, add, or delete XML
elements.
36
XML DOM
DOM Nodes
According to the DOM, everything in an
XML document is a node.
37
XML DOM Parser
XML DOM - Properties and Methods
• XML DOM Properties
• These are some typical DOM properties:
• x.nodeName - the name of x
• x.nodeValue - the value of x
• x.parentNode - the parent node of x
• x.childNodes - the child nodes of x
• x.attributes - the attributes nodes of x
• XML DOM Methods
• x.getElementsByTagName(name) - get all
elements with a specified tag name
• x.appendChild(node) - insert a child node to x
• x.removeChild(node) - remove a child node from
x
38
Internet Explorer DOM
new ActiveXObject("Microsoft.XMLDOM");
39
Java Script
40
Java Script
• It was designed to add interactivity to
HTML pages
• A scripting language, lightweight
programming language
• It consists of lines of executable
computer code
• Usually embedded directly into HTML
pages
• Interpreted language
41
Java Script can do…
• Java script can react to events
• It can validate user data
• It can be used to perform client side
dynamism
<html>
<body>
<script type="text/javascript">
document.write("hello world")
</script>
</body>
</html>
45
Java Script popup boxes
Alert Box:
used to make sure that information
comes through user. OK
alert(“some text”);
Confirm Box:
to verify or accept something; OK,
Cancel
if clicks OK - true
if clicks Cancel false
confirm(„”some text”);
46
Java Script popup boxes
Prompt Box:
used to take a value from user
before entering a page.
if clicks OK - value
if clicks Cancel null
prompt(„”some text”, ”default value”)
47
Example#02
<html>
<body>
<script type="text/javascript">
document.write("hello world")
alert("Is this III Year CS")
prompt("enter your roll number ", "rollno")
confirm("sure to submit it")
</script>
</body>
</html>
48
Java Script function
function func-name(var1,var2...varx)
{
some code of script
return(something) if function returns
}
function display()
{
alert(“hello”)
} 49
Example#03
<html>
<head>
<script type="text/javascript">
function disp()
{
alert(“hello”)
}
</script>
</head>
<body>
<form>
<input type="button“ value=“ok“ onclick=“disp()”>
</form>
</body>
</html>
50
Java Script array
51
Java Script EVENTS
1.Onload and onUnload
2.onFocus, onBlur, onChange
3.onSubmit
4.Onmouseover, onmouseout
Error Handling
try and catch(err)
52
Example#04
<html>
<body>
<script type="text/javascript">
document.write("<table width=1 0 0 % bgcolor='green'>")
for(I =0 ; I < 5 ; I + + )
{
document.write("<tr><td align='center'> “ + “ I = “
+ “ < / td>")
document.write("< td align='center'> “ + I + “
</td></tr>")
}
document.write("</table>")
</script>
</body>
</html>
53
W3C DOM with JavaScript
• Example # 01 : Loading the XML document: DOMDocument
The programmer can use a Microsoft Active X object to
parse an XML file
54
W3C DOM with JavaScript
• Example 2: Accessing the Children Elements
The childNodes member of any element node gives the
programmer access to all of the sibling nodes of that
element
//traverse through each child of the root element
//and print out its name
for (i=0; i<rootElement.childNodes.length; i++)
{
var node = rootElement.childNodes.item(i);
document.write("The name of the node is ");
document.write("<b>" + node.nodeName + "</b>");
}
55
W3C DOM with JavaScript
• Example 3: Getting Element Attributes
var attributeValue;
//get an attribute value by specific name
attributeValue = elementNode.getAttribute("articleID");
//print it out
document.writeln("Attribute value: <b>" + attributeValue
+
" </b><br>");
}
56
Cautions with DOM
• Make sure that the XML file resides in the same directory as
the html file with the JavaScript code
• The Attribute node does not appear as the child node of any
other node type; it is not considered a child node of an
element
57
Java Script Form validation
• JavaScript can be used to validate data
in HTML forms before sending off the
content to a server.
• Form data that typically are checked by
a JavaScript could be:
– has the user left required fields empty?
– has the user entered a valid e-mail
address?
– has the user entered a valid date?
– has the user entered text in a numeric
field? 58
Java Script Form validation
function validateForm(form)
{
var x=form.fname.value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
59
<form name="myForm" action=""
onsubmit="return validateForm()"
method="post">
</form>
60
How to specify Relative pathnames
The current HTML document is my.html and the current directory is Iam
C:\- Iam -my.html
-your.html
61
How to specify Relative pathnames
The HTML document is my.html and the image file is dragonfly.gif
C:\-
Iam -my.html ☞ Type this ; <IMG SRC=dragonfly.gif>
-dragonfly.gif
62