Вы находитесь на странице: 1из 62


1. XML stands for eXtensible Markup Language. 2. XML is designed to transport and store data. 3. XML is important to know, and very easy to learn.
XML Document Example <?xml version="1.0"?> <note> <to>Jack</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>

What is XML?
XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own tags XML is designed to be self-descriptive XML is a W3C Recommendation

The Difference Between XML and HTML 1. XML is not a replacement for HTML. HTML
1. HTML was designed to display data, with focus on how data looks 2. Has predefined tags 3. To user 3. To computer

1. XML was designed to transport and store data, with focus on what data is 2. XML language has no predefined tags.

1. XML Separates Data from HTML 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 hardwareindependent way of storing data. This makes it much easier to create data that can be shared by different applications.

Use of XML

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.

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.

Use of XML

XML Tree
<note> <to>Jack</to> <from>John</from > <heading> to Reminder </heading> <body> Don't forget me this weekend! </body> </note>





<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>

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

Attributes Vs Elements
There is no rules about that when to use what.
<note> <date>10/02/2012</date> <to>Jack</to> <from>John</from> <heading> Reminder </heading> <body> Don't forget me this weekend! </body> </note> <note date=10/02/2012> <to>Jack</to> <from>John</from> <heading> Reminder </heading> <body> Don't forget me this weekend! </body> </note>


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


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



<?xml version=1.0?> <!DOCTYPE note [ <!ELEMENT note (to, from, heading, body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]>

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.

DTD Elements 1. Declaring an Element <! ELEMENT element-name (elementcontent)> 2. EMPTY ELEMENTS <!ELEMENT element-name (EMPTY)> 3. Elements with DATA (CDATA) (#PCDATA) (ANY) 4. Elements with children


DTD Elements 5. Wrapping:
6. 7. 8. 9.

<!DOCTYPE root-Element [ElementDeclarations]> One occurrence One or more occurrence(+) Zero or more(*) Zero or one(?)


DTD Attributes 1. Declaring Attributes <!ATTLIST element-name attributename attribute-type default-value> Attribute type: CDATA,ID,IDREF,IDREFS,ENTITY etc.

XML Entities
Five special characters must be written as entities:
&amp; for &lt; for &gt; for &quot; for &apos; for & < > " ' (almost always necessary) (almost always necessary) (not usually necessary) (necessary inside double quotes) (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

Question XML
Q1. Write an XML document to represent the records of the employees of an organization. Each employee has a name, designation, department, ID, salary, contact number, adddress. Contact number could be more than one. Name should be represented in first, second and last name format.

Default value can be one of them: #REQUIRED - The attribute is required #IMPLIED-- The attribute is not required #FIXED -- The attribute value is fixed Enumerated Attribute Values 1. Use enumerated attribute values when you want the attribute value to be one of a fixed set of legal values 2. <!ATTLIST element-name attribute-name (en1|en2|..) defaultvalue>


Internal Define in document itself. External 1. define in a separate file 2. add following line in xml document


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>

DTD Entities

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

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" />

Q5. How is an empty element field defined? a) <name></name b) <name /> b) <name/> d) All of the above Q6. XML document must be valid?
a) True b) False


Q7. Every XML document must be well formed a) True b) False


Limitations of DTD
1. 2. 3. 4. DTD DTD DTD DTD do do do do not not not not have any bulit in data type support user defined data types support name spaces object orientation.

what is the solution? XML SCHEMA


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

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


XML Schema
Buliding Blocks 1. <xs:attribute name="xxx" type="yyy"/>
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



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>

<?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>


XSLT is a language for transforming XML documents into XHTML documents or to other XML documents.
<xsl:template match=/>


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."
3. The DOM is separated into 3 different parts / levels: (I) Core DOM - standard model for any structured document (II) XML DOM - standard model for XML documents (III) HTML DOM - standard model for HTML documents

4. The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.

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.

DOM Nodes
According to the DOM, everything in an XML document is a node.

The DOM says:

The entire document is a document node
Every XML element is an element node The text in the XML elements are text nodes Every attribute is an attribute node Comments are comment nodes

XML DOM Parser

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

XML DOM - Properties and Methods

Internet Explorer DOM

new ActiveXObject("Microsoft.XMLDOM");


Java Script


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

Java Script can do

Java script can react to events It can validate user data It can be used to perform client side dynamism

Java Script code should be placed in script tag. <script type=text/javascript> It gets invoked when page loads in browser

Where to put script

some times we want the script to be invoked when an event occurs. Place it in head section if, it is to be invoked when an event occur Place it in body if it is to be executed when page loads You may write script in a separate file with out script tag and save it as .js extension, then put following line in HTML page. <script src=XXX.js></script>

Building Blocks
i. Case sensitive ii. Must begin with letter or underscore iii. var variablename=value; Conditional Statements:
if statement if-else Switch statement Operators: 1. Arithmetic 2. Assignment 2. Logical 5. conditional LOOPs: for, while, do-while

3. Comparison 6. String

<html> <body> <script type="text/javascript"> document.write("hello world") </script> </body> </html>


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);

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)


<html> <body> <script type="text/javascript"> document.write("hello world") alert("Is this III Year CS") confirm("sure to submit it") </script> </body> </html>
prompt("enter your roll number ", "rollno")


Java Script function

function func-name(var1,var2...varx) { some code of script return(something) if function returns } function display() { alert(hello) }


<html> <head> <script type="text/javascript"> function disp() { alert(hello) } </script> </head> <body> <form> <input type="button value=ok onclick=disp()> </form> </body> </html>

Java Script array

var myarray = new Array(3); myarray[0] = element-1 myarray[1] = element-2 myarray[2] = element-3 or
var myarray = new Array(el-1, el-2 el-3)


Java Script EVENTS

1.Onload and onUnload 2.onFocus, onBlur, onChange 3.onSubmit 4.Onmouseover, onmouseout Error Handling try and catch(err)

<html> <body> <script type="text/javascript">
document.write("<table width=1 0 0 % for(I =0 ; I < 5 ; I + + ) { + < / td>") </td></tr>") } bgcolor='green'>")

document.write("<tr><td align='center'> + I =

document.write("< td align='center'> + I +

</script> </body> </html>



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
var XMLfile = new ActiveXObject(" Microsoft.XMLDOM"); XMLfile.load(example.xml"); var rootElement = XMLfile.documentElement; document.write("The root node of the XML file is: "); document.writeln("<b>" + rootElement.nodeName +"</b>");


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>"); }


W3C DOM with JavaScript

Example 3: Getting Element Attributes //traverse through each child of the root element //and print out its name for (i=0; i<rootElement.childNodes.length; i++) { //get the current element var elementNode = rootElement.childNodes.item(i); document.writeln("Processing Node: " + elementNode.nodeName + "<BR>"); var attributeValue; //get an attribute value by specific name attributeValue = elementNode.getAttribute("articleID"); //print it out document.writeln("Attribute value: <b>" + attributeValue " </b><br>"); }

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 Use caution when outputting raw XML to Internet Explorer.If the programmer uses the document.writeln method, IE attempts to interpret the XML tags and jumbles the text. Instead, use an alert box when debugging.


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 has the user address? has the user has the user field? left required fields empty? entered a valid e-mail entered a valid date? entered text in a numeric

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; } }


<form name="myForm" action="" onsubmit="return validateForm()" method="post">

First name: <input type="text name="fname">

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



How to specify Relative pathnames

The current HTML document is my.html and the current directory is Iam C:\- Iam -my.html -your.html
Type this ; <A href=your.html>Your link </A> C:\- Iam -my.html Child -your.html Type this ; <A href=Child/your.html>Your link </A> C:\- Iam -my.html Sister -your.html Type this ; <A href=../Sister/your.html>Your link </A> C:\- Mother -your.html Iam -my.html Type this ; <A href=../your.html>Your link </A>

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

C:\- Iam -my.html Image -dragonfly.gif

Type this ; <IMG SRC=Image/dragonfly.gif>

C:\- Iam -my.html Image -dragonfly.gif

Type this ; <IMG SRC=../Image/dragonfly.gif>

C:\- Image -dragonfly.gif Iam -my.html

Type this ; <IMG SRC=../dragonfly.gif>