HTML,Javascript,XML Notes by Brj

1 Web Technologies By BRJ

UNIT-1 WEB TECHNOLOGIESHTML (HYPER TEXT MARKUP LANGUAGE)

INTRODUCTION TO HTML HTML, or Hyper Text Markup Language is designed to specify the logical organisation of a document,with important hypertext extensions. HTML allows you to mark selections of text as titles or paragraphs, and then leaves the interpretationof these marked elements up to the browser. For example: one browser may indent the beginning of a paragraph, while another may only leave ablank line. HTML instructions divide the text of a document into blocks called elements. These can be divided into two broad categories -- those that define how the BODY of the document is tobe displayed by the browser, and those that define information `about' the document, such as the titleor relationships to other documents. The detailed rules for HTML (the names of the tags/elements,how they can be used) are defined using another language known as the standard generalized markuplanguage, or SGML. SGML is wickedly difficult, and was designed for massive document collections.Fortunately, HTML is much simpler! However, SGML has useful features that HTML lacks. For thisreason, markup language and software experts have developed a new language, called XML (the

eXtensible markup language) which has most of the most useful features of HTML and SGML.History of HTML

HTML was originally developed by Tim Berners-Lee while at CERN, and popularized by the Mosaicbrowser developed at NCSA. During the course of the 1990s it has blossomed with the explosive growthof the Web. During this time, HTML has been extended in a number of ways. The Web depends on Webpage authors and vendors sharing the same conventions for HTML. This has motivated joint work onspecifications for HTML. HTML 2.0 (November 1995) was developed under the aegis of the Internet Engineering Task Force(IETF) to codify common practice in late 1994.HTML 3.0 (1995) proposed much richer versions ofHTML. Achieving interoperability lowers costs to content providers since they must develop only oneversion of a document. If the effort is not made, there is much greater risk that the Web will devolveinto a proprietary world of incompatible formats, ultimately reducing the Web's commercial potentialfor all participants. Each version of HTML has attempted to reflect greater consensus among industryplayers so that the investment made by content providers will not be wasted and that their documentswill not become unreadable in a short period of time. HTML has been developed with the vision that allmanner of devices should be able to use information on the Web: PCs with graphics displays of varyingresolution and color depths, cellular telephones, hand held devices, devices for speech for output andinput, computers with high or low bandwidth, and so on.

Advantages of HTML: First advantage it is widely used. Every browser supports HTML language. Easy to learn and use. It is by default in every windows so you don't need to purchase extra software.

Disadvantages of HTML: It can create only static and plain pages so if we need dynamic pages then HTML is not useful. Need to write lot of code for making simple webpage. Security features are not good in HTML. If we need to write long code for making a webpage then it produces some complexity.

Important points Tags are delimited by angled brackets. They are not case sensitive i.e., <head>, <HEAD> and <Head> is equivalent. If a browser not understand a tag it will usually ignore it. Some characters have to be replaced in the text by escape sequences. White spaces, tabs and newlines are ignored by the browser.


Structure of an HTML document: All HTML documents follow the same basic structure. They have the root tag as <html>, which contains <head> tag and <body> tag. The head tag is used for control information by the browser and the body tag contains theactual user information that is to be displayed on the screen.The basic document is shown below.<html><head><title> Basic HTML document </title></head><body><h1> Welcome to the world of WebTechnologies</h1><p> A sample html program </p></body></html>Besides head and body tag, there are some other tags like title, which is a sub tag of head, thatdisplays the information in the title bar of the browser. <h1> is used to display the line in its ownformat i.e., bold with some big font size. <p> is used to write the content in the form of paragraph.Comments in HTML documents start with <! and end with >. Each comment can contain as manylines of text as you like. If comment is having more lines, then each line must start and end with --and must not contain -- within its body.

Basic HTML tags Body tag : Body tag contain some attributes such as bgcolor, background etc. " bgcolor" is used for background color, which takes background color name or hexadecimal numberand #FFFFFF and background attribute will take the path of the image which you can place as thebackground image in the browser.

Example: <body bgcolor=”#F2F3F4” background= “c:\btech\imag1.gif”>Paragraph tag:

Most text is part of information. Each paragraph is aligned to the left, right or center of the page by using an attribute called as align. Example: <p align=”left” | “right” | “center”>

Heading tag: HTML is having six levels of heading that are commonly used. The largest heading tag is <h1> . The different levels of heading tag besides <h1> are <h2>, <h3>, <h4>, <h5> and <h6>. These heading tags also contain attribute called as align. Example: <h1 align=”left” | “right” | “center”> . . . .<h2>


HR TAG: This tag places a horizontal line across the system. These lines are used to break the page. This tag also contains attribute i.e., width which draws the horizontal line with the screen size of thebrowser. This tag does not require an end tag. Example: <hr width=”50%”>.

FONT TAG: This sets font size, color and relative values for a particular text. <font size=”10” color=”#f1f2f3”>BOLD TAG: This tag is used for implement bold effect on the text <b> ……. </b>ITALIC TAG: This implements italic effects on the text. <i>…….</i>STRONG TAG: This tag is used to always emphasized the text <strong>……….</strong>SUB AND SUP TAG: These tags are used for subscript and superscript effects on the text.Example: <sub> ……….</sub> <sup>………..</sup>BREAK TAG: This tag is used to the break the line and start from the next line. <br>&amp &lt &gt &nbsp &quot These are character escape sequence which are required if you want to displaycharacters that HTML uses as control sequences. Example: < can be represented as &lt.ANCHOR TAG: This tag is used to link two HTML pages, this is represented by <a> .Example: <a href=” path of the file”> some text </a> href is an attribute which is used for giving the path of afile which you want to link.HTML COMMON TAGS

1) LISTS: One of the most effective ways of structuring a web site is to use lists. Lists provides straight forward index in the web site. HTML provides three types of list i.e., bulleted list, numbered list and a definition list. Lists can be easily embedded easily in another list to provide a complex but readablestructures. The different tags used in lists are as follows. <li> …..</li> The ordered(numbered) andunordered(bulleted) lists are each made up of sets of list items.

Unordered Lists: This tag is used to write list items <ul type=”disc” | “square” | ”circle” > …..</ul> This tag is used for basic unordered list which uses a bullet in front of each tag, everythingbetween the tag is encapsulated within <li> tags.

Ordered Lists: This tag is used to write list items <ol type=”1” | ”a” | “I” start=”n”>…..</ol> This tag is used for ordered list which uses a number in front of each list item or it uses anyelement which is mentioned in the type attribute of the <ol> tag, start attribute is used forindicating the starting number of the list.

Definition Lists: This tag is used to write list items <dl>….. </dl> This tag is used for the third category i.e.,definition list, where numbers or bullet is not used in front of the list item, instead it usesdefinition for the items. <dt>…..</dt> This is a sub tag of the <dl> tag called as definition term, which is used formarking the items whose definition is provided in the next data definition. <dd> ….</dd> This is a sub tag of the <dd> tag, definition of the terms are enclosed withinthese tags. The definition may include any text or block.


Example Program on Lists:-

Output:-

2) TABLES:

Table is one of the most useful HTML constructs. Tables are find all over the web application. The main use of table is that they are used to structure the pieces of information and tostructure whole web page. Below are some of the tags used in table.

Syntax:-<table align=”center” | “left” | “right” border=”n” width=”n%” cellpadding=”n”cellspacing=”n”>………………</table> Every thing that we write between these two tags will be within a table. The attributes of the table will control in formatting of the table. Cell padding determines how much space there is between the contents of a cell and its border,cell spacing sets the amount of white space between cells. Width attribute sets the amount of screen that table will use. <tr> ….. </tr> This is the sub tag of <table> tag, each row of the table has to be delimited bythese tags. <th>……</th> This is again a sub tag of the <tr> tag. This tag is used to show the table heading . <td>…..</td> This tag is used to give the content of the table.



Output:-

2) TABLES:





Output:-

2) TABLES:




Example Program on Tables:-

Output:-

3) IMAGES TAG: The HTML img element inserts an image in the document, which location is set in the "src"attribute. Images are great for displaying information that sometimes is hard to explain with text. by using "alt" attribute which should be used by authors to provide an alternative textualversion for the information displayed in the image.

Img Attributes srcThis attribute contains a URI that is supposed to point to the location of the image resource.This is the element's most important attribute, and it is mandatory, because without it therewould be no image to display.<img src="img/treasure-map.jpg" /> altThe value of this attribute provides a textual alternative for the image's content, and thereforemust describe exactly what the image intends to show.This is vital when the development of the website needs to reach visually impaired audiences.<img src="img/treasure-map.jpg" alt="This map displays the route to the treasure. You shouldturn right twice and follow straight until you find it." />



Output:-





Output:-




widthSpecifies the width of the image.This can be different to the real width of the image, and browsers should resize it as needed.However, specifiyng a different width may cause pixelated images (when bigger) or longer loadperiods (when smaller).<img src="img/treasure-map.jpg" width="100" /> heightSpecifies the height of the image.This can be different to the real height of the image, and browsers should resize it as needed.However, specifiyng a different height may cause a pixelated images (when bigger) or longerload periods (when smaller).<img src="img/treasure-map.jpg" height="50" /> alignThis attribute has been deprecated in HTML 4.01.Therefore its use is no longer recommended.It specifies the position of the image with respect to the surrounding content.It can take the following case-insentive values: top: The top side of the image is vertically aligned with the baseline. middle: The image is vertically centered with respect to the baseline. bottom: The bottom side of the image is vertically aligned with the baseline. This is the defaultvalue. left: The image is floated to the left margin. right: the image is floated to the right margin.<img src="img/picture.png" align="center" /> borderThis attribute has been deprecated in HTML 4.01.Therefore its use is no longer recommended.This attribute sets the border width in number of pixels.<img src="img/picture.png" border="2" />

Example Program on Images:- Output:-

Example Program On Image Tags:-<html><body><p>Click on one of the planets to watch it closer:</p><img src="planets.jpg" width="500" height="400" usemap="#planetmap"><map id="planetmap" name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html"><area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html"><area shape="circle" coords="124,58,8" alt="Venus" href="venus.html"></map>6 Web Technologies By BRJ



Example Program On Image Tags:-<html><body><p>Click on one of the planets to watch it closer:</p><img src="planets.jpg" width="500" height="400" usemap="#planetmap"><map id="planetmap" name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html"><area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html"><area shape="circle" coords="124,58,8" alt="Venus" href="venus.html"></map>6 Web Technologies By BRJ



Example Program On Image Tags:-<html><body><p>Click on one of the planets to watch it closer:</p><img src="planets.jpg" width="500" height="400" usemap="#planetmap"><map id="planetmap" name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html"><area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html"><area shape="circle" coords="124,58,8" alt="Venus" href="venus.html"></map>


<p><b>Note:</b> The "usemap" attribute in the img element refers to the "id" or "name" (browserdependant) <br>attribute inthe map element, therefore we have added both the "id" and "name"attributes to the map element.</p></body></html>Output:-

4)HTML FORMSA webform on a web page allows a user to enter data that is sent to a server for processing.Forms can resemble paper or database forms because web users fill out the forms usingcheckboxes, radio buttons, or text fields.Example: forms can be used to enter shipping or credit card data to order a product, or can be used toretrieve search results from a search engine.When a visitor reaches the form, he only needs to fill the fields and send the form, usually with asubmit button. The sent form is received and processed by a processing agent (usually a server sidescript) specified in the value of the "action" attribute of the form element.The <form> tag is used to create an HTML form for user input.Form attributes are:name: This is the name of the form.action: Here you will specify any script URL which will receive uploaded data.method: Here you will specify method to be used to upload data. It can take various values but mostfrequently used are GET and POST.There are different types of form controls that you can use to collect data from a visitor to your site.

Text input controls Buttons Checkboxes and radio buttons Select boxes File select boxes Hidden controls Submit and reset button

HTML Forms - Text Input Controls:There are actually three types of text input used on forms: Single-line text input controls: Used for items that require only one line of user input, such assearch boxes or names. They are created using the <input> element. Password input controls: Single-line text input that mask the characters a user enters. Multi-line text input controls: Used when the user is required to give details that may be longerthan a single sentence. Multi-line input controls are created with the <textarea> element.


The <input> tag specifies an input field where the user can enter data.An <input> element can vary in many ways, depending on the type attribute.An <input> element can be of type text field, checkbox, password, radio button, submit button, andmore.Syntax for Input:<input type=”text/password/submit/button/reset/radio/checkbox” name=”name “ value=”value”[size=n] [maxlength=n]>

Ex: <input type=”text” name=”ename”>Syntax for Textarea:<textarea name=”textarea name” cols=n rows=n>Ex: <textarea name=”description” cols=30 rows=5> …</textarea>There are 3 types of buttons

submit: This creates a button that automatically submits a form. reset: This creates a button that automatically resets form controls to their initial values. button: This creates a button that is used to trigger a client-side script when the user clicksthat button.Ex: <input type=”submit” value=”submit”>

Checkbox:Checkboxes are used when more than one option is required to be selected. They are created using<input> tag as shown below.Ex: <input type="checkbox" name="course" value="oracle" checked> oracle<input type="checkbox" name="course" value="java"> JavaRadio buttonRadio Buttons are used when only one option is required to be selected. They are created using<input> tag as shown below:Ex: <input type="radio" name="branch" value="cse" /> cse<input type="radio" name="branch" value="ece" /> eceList boxDrop Down Box is used when we have many options available to be selected but only one or two willbe selected..Syntax: <select name=”name” “multiple” size=n ><option value=”value1”><option value=”valuen”></select>Ex: <select name="subjects"><option value="Maths" selected>Maths</option><option value="Physics">Physics</option></select>Form for accepting Firstname and Lastname.<form action="/cgi-bin/hello_get.cgi" method="get">First name: <input type="text" name="first_name" /><br>Last name: <input type="text" name="last_name" /><input type="submit" value="Submit" /><input type="reset" value="Reset" /></form>


EXAMPLE PROGRAM ON HTML FORMS<Html><body><form action="" method=post name=form1><table align="center" border=1 cellpadding=0 cellspacing=5 width="80%"><tr> <td>Name</td><td><input type="text" name="name1" value="John" size="20" maxlength="15" ></td></tr><tr> <td>Password</td><td><input type="password" name="password1" size="20" maxlength="12"></td></tr><tr> <td>Free Mails for</td><td><select name="freestuff" multiple size="3"><option value="I">Investements<option value="B"selected>EBusiness<option value="M">Movies<option value="U">Music<option value="T">Technical</select></tr></td><tr> <td>text area</td><td><textarea name="freemails" rows =5 cols= 50> This is free mailing service, you can send your comments by typing inthis text box</textarea></td></tr><tr> <td>Information by email</td><td><input type="checkbox" name="email" checked></td></tr><tr> <td>EMails </td><td><input type="radio" name="period" value="daily"> daily<input type="radio" name="period" value="weekly">weekly<input type="radio" name="period" value="monthly">monthly </td></tr></tr><tr> <td><input type="submit" name=submit1 value="submit register" id=submit1></td><td><input type="reset" name=reset1 value="clear" id=reset1></td></tr></table></form></body></html>OUTPUT:






5) FRAMESFrames allow an author to divide a browser window into multiple (rectangular) regions. Multipledocuments can be displayed in a single window, each within its own frame. Graphical browsers allowthese frames to be scrolled independently of each other, and links can update the document displayedin one frame without affecting the others. You can't just "add frames" to an existing document. Rather,you must create a frameset document that defines a particular combination of frames, and thendisplay your content documents inside those frames. The frameset document should also includealternative non-framed content in a NOFRAMES element.Process for coding frames1. Code the first page with the layout the windows that subdivide your screen (framesetcommand)2. Name each window. This is refered to as a window-target.3. Code each separate page (individual files) that will be the content of each window. These arecalled the source files.4. Code a "No Frames" option for noframes browsers.To make a page use frames, add a <frameset> tag immediately after <head> this tag takes twoattributes, cols and rows, which specify the space taken by each frame in the form of a commaseparated list.You can specify either the number of pixels to use, a percentage, or "*" to mean the rest of the spaceonce the other values have been worked out. For instance,<frameset rows="40,20%,*"> would dividethe window into three rows, the top-most being 40 pixels deep, the middle one taking 20% of thewindow, and the bottom one taking the remainder of the space.<frameset> has the following attributes

Cols -Specifies no. and size of columns in a frameset either in pixels or % or * Rows- Specifies no. and size of rows in a frameset either in pixels or % or *Once you've specified how the window is to be divided up with the <frameset> tag, you then describethe contents of each frame using <frame>.This tag takes the following attributes: src="URL": specifies the URL of the page to be loaded in this frame. name="name": specifies the name of this window, to be used with <a target>. marginwidth="value", marginheight="value": sets the size of the margin in the frame. Seriouslyoptional. scrolling="yes, no or auto": decides whether the frame will scroll. "Auto" is the default value. noresize: don't allow the user to resize this frame.The following special values can also be used as names: _blank: opens the link in a new unnamed window. _self: opens the link in the current frame. Useful for overriding a standard target set in <base> _parent: opens the link in the current frame's parent <frameset>. _top: gets rid of all frames; the linked page takes up the entire window. Especially appropriateif the page you're linking to is an external site, and hence nothing to do with your framestructure.Frameset which allows a user to see 3 frames at a time.<html><frameset cols="25%,*,25%"><frame src="frame_a.htm"><frame src="frame_b.htm"><frame src="frame_c.htm"></frameset></html>

Output:Frame A Frame B Frame C


Example Programs on Frames

<html><frameset rows="25%,50%,25%"><frame src="frame_a.html"><frame src="frame_b.html"><frame src="frame_c.html">

</frameset></html>

<html><frameset cols="25%,50%,25%"><frame src="frame_a.html"><frame src="frame_b.html"><frame src="frame_c.html">

</frameset></html>

<html><frameset rows="50%,50%"><frame src="frame_a.html"><frameset cols="25%,75%"><frame src="frame_b.html"><frame src="frame_c.html"></frameset></frameset></html>


JAVA SCRIPTINTRODUCTION TO JAVA SCRIPT

JavaScript is a scripting language designed primarily for adding interactivity to Web pages andcreating Web applications. The language was first implemented by Netscape Communications Corp. inNetscape Navigator 2. Client-side JavaScript programs, or scripts, can be embedded directly in HTMLsource of Web pages. Depending on the Web developer's intent, script code may run when user opensthe Web page, clicks or drags some page element with the mouse, types something on the keyboard,submits a form, or leaves the page. One can do things with few lines of JavaScript that willsignificantly reduce the load on your server, give the user better feed back, and enhance theappearance of your web pages.JavaScript is an object-oriented language with prototypal inheritance. The language supportsseveral built-in objects, and programmers can create or delete their own objects. Prototypalinheritance makes JavaScript very different from other popular programming languages such as C++,C#, or Java featuring classes and classical inheritance. JavaScript does not have classes in the C++ orJava sense. In JavaScript, objects can inherit properties directly from each other, forming the objectprototype chain.JavaScript is an interpreted language, with optional JIT-compilation support. JavaScript was apurely interpreted language. This means that scripts execute without preliminary compilation, i.e.without conversion of the script text into system-dependent machine code. The user's browserinterprets the script, that is, analyzes and immediately executes it.JavaScript gives HTML designers a programming tool - HTML authors are normally notprogrammers, but JavaScript is a scripting language with a very simple syntax! JavaScript is usuallyembedded directly into HTML pagesBENEFITS OF JAVASCRIPT

It is widely supported in browser It is also an easy language to get started using. It gives easy access to document object and can manipulate most of them. JavaScript can give interesting animations with many multimedia datatypes. Special plug-in are not required to use JavaScript JavaScript is secure language JavaScript code resembles the code of C language, The syntax of both the language is very closeto each other. The set of tokens and constructs are same in both the language.

DISADVANTAGES OF JAVASCRIPTDifferent versions of Netscape will behave differently depending on the language features you use.It is possible to write JavaScript programs that use advanced JavaScript features but do not causeproblems on older browsers. However, doing this is can be a complex and labour intensive process.Unfortunately, even the same version of Netscape may behave differently depending on the operatingsystem it is run on. The language is very new and still evolving. Few software development tools existto help you write and debug your scripts. And while you can do a lot with JavaScript, some things likeanimation, scrolling/animated banners and notices, and complex programming are often better doneusing animated GIFs, Netscape Plugins such as Flash, or Java applets.JavaScript is used for the following purposes:

JavaScript is also an easy language to get started using. JavaScript was designed to add interactivity to HTML pages build small but complete client side programs. build forms that respond to user input without accessing a server; validate user input in an HTML form before sending the data to a server; change the appearance of HTML documents and dynamically write HTML into separateWindows; manipulate HTML "layers" including hiding, moving, and allowing the user to drag themaround a browser window;


A JavaScript can be set to execute when something happens, like when a page has finishedloading or when a user clicks on an HTML element A JavaScript can be used to detect the visitor's browser, and - depending on the browser - loadanother page specifically designed for that browser A JavaScript can be used to store and retrieve information on the visitor's computer

JAVASCRIPT AND JAVA A common misconception is that JavaScript is similar or closely related to Java; this is not so.Both have a C-like syntax, are object-oriented, are typically sandboxed and are widely used inclient-side Web applications, but the similarities end there. Java has static typing; JavaScript'styping is dynamic Java is loaded from compiled bytecode; JavaScript is loaded as human-readable code. C is theirlast common ancestor language. Nonetheless, JavaScript was designed with Java's syntax and standard library in mind. Inparticular, all Java keywords are reserved in JavaScript, JavaScript's standard library followsJava's naming conventions

What are the different datatypes in JavaScript? Numbers"no explicit distinction between integers and real" numbers though integers may be stored differentlythan floating point or real numbers. Here are some literal numbers being assigned to a variable (not acomplete sampling): x = 8 //integer x = .7343 //floating point x = -4.3e3 //same as -4.3 × 103 x = 4.3e-3 //same as 4.3 × 10-3 Boolean Values

true or false are the two boolean valuesExamples when true or false values result from an expression (not a complete sampling):10 < 11 //will be evaluated to result in the value true10 > 11 //will be evaluated to false Strings strings can be created by assigning a literal value to a variable or by creating a String objectinitialized with a literal string. msg = "I there is no end to the details I have to remember?" msg = new String("Is there is not end to the details I have to remember?")

null null - "special key word denoting a null value"x = nullWhat are the different controls in Javascript?In JavaScript we have the following conditional statements:

if statement - use this statement to execute some code only if a specified condition is true if...else statement - use this statement to execute some code if the condition is true andanother code if the condition is false if...else if....else statement - use this statement to select one of many blocks of code to beexecuted switch statement - use this statement to select one of many blocks of code to be executed

If StatementUse the if statement to execute some code only if a specified condition is true.Syntax:


if (condition){code to be executed if condition is true}else{Code to be executed if condtion is not true}

Ex:If (a>b){ document.writeln(“a is greatest”);}Else{ Document.writeln(“b is greatest”);}Switch StatementUse the switch statement to select one of many blocks of code to be executed.Syntaxswitch(n){case 1:execute code block 1break;case 2:execute code block 2break;default:code to be executed if n is different from case 1 and 2}

Ex:var day=new Date().getDay();switch (day){case 0:x="Today is Sunday";break;case 1:x="Today is Monday";break;--------------default:x="Today is Saturday";break;}LoopsLoops are handy, if you want to run the same code over and over again, each time with a differentvalue.The for loop is often the tool you will use when you want to create a loop.for (statement 1; statement 2; statement 3){


the code block to be executed}Statement 1 is executed before the loop (the code block) starts.Statement 2 defines the condition for running the loop (the code block).Statement 3 is executed each time after the loop (the code block) has been executed.Examplefor (var i=0; i<5; i++){x=x + "The number is " + i + "<br>";}For/in LoopThe JavaScript for/in statement loops through the properties of an object:var txt="";var person={fname:"John",lname:"Doe",age:25};for (var x in person){txt=txt + person[x];}While loopThe while loop loops through a block of code as long as a specified condition is true.while (condition){code block to be executed}ExampleThe loop in this example will continue to run as long as the variable i is less than 5:

Examplewhile (i<5){x=x + "The number is " + i + "<br>";i++;}The do/while loop is a variant of the while loop. This loop will execute the code block once, beforechecking if the condition is true, then it will repeat the loop as long as the condition is true.Syntaxdo{code block to be executed}while (condition);

ExampleThe example below uses a do/while loop. The loop will always be executed at least once, even if thecondition is false, because the code block is executed before the condition is tested:


Exampledo{x=x + "The number is " + i + "<br>";i++;}while (i<5);WHAT CAN A JAVASCRIPT DO?JavaScript gives HTML designers a programming tool - HTML authors are normally notProgrammers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can putsmall "snippets" of code into their HTML pagesJavaScript can put dynamic text into an HTML page - A JavaScript statement like this:document.write("<h1>" + name + "</h1>") can write a variable text into an HTML pageJavaScript can react to events - A JavaScript can be set to execute when something happens, likewhen a page has finished loading or when a user clicks on an HTML elementJavaScript can read and write HTML elements - A JavaScript can read and change the content ofan HTML elementJavaScript can be used to validate data - A JavaScript can be used to validate form data before it issubmitted to a server. This saves the server from extra processingJavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect thevisitor's browser, and - depending on the browser - load another page specifically designed for thatbrowserJavaScript can be used to create cookies - A JavaScript can be used to store and retrieveinformation on the visitor's computerSCRIPT TAGS:The <Script> tag alarms a program that javascript code takes after.It is ordinarily inserted in the html programs.Syntax:<SCRIPT Language= “JavaScript”>Java Script code</ SCRIPT>EMBEDDING JAVASCRIPTJava Script can be embedded in 3 ways1) Embedding in the html programs2) Inline code3) External File1) Embedding in the html programs<html><head><title>Java Script</title></head><body bgcolor=red><script language="JavaScript">alert("My First Java Script Page");</script></body></html>


2) Inline code<html><head><title>Java Script</title></head><body bgcolor=red><form><script language="JavaScript">function inline(){alert("My First JavaScript Page");}</script><input type="button" value="Click Me" onclick="inline()"></form></body></html>3) External FileYou can utilize the SRC characteristic of the <script> tag to call javascript code from an outsidecontent record. This is helpful when you want to decrease the length of your code.Syntax:<SCRIPT SRC=”script.js” Language =”JavaScript”> ....</SCRIPT>Example:First open the notepad and write the script contentAlert ("My External Script File");Save it as script.js<html><head><title>Java Script</title></head><body bgcolor=red><script language="JavaScript" src=”script.js”></script></body></html>OBJECTS IN JAVASCRIPT

• JavaScript supports programming with objects.• Objects are a way of organizing the variables.• The different screen elements such as Web pages, forms, text boxes, images, and buttons aretreated as objects.• JavaScript code is not compiled, but parsed.• This allows for flexibility when it comes to creating or altering objects.Every object has its own properties and methods.• Properties define the characteristics of an object.

Examples: color, length, name, height, width• Methods are the actions that the object can perform or that can be performed on the object.

Examples: alert, confirm, write, open, closeJavaScript provides 3 kind of objects:1. Built-in objects- Math,Date,String2. Document objects


3. Window objects1)Built-in objects- Math,Date,String

Math Object• The Math object provides methods for many mathematical calculations, including: abs(), log(),pow(), random(), round(), sqrt()• Format: Math.method(#)• For eg, document.writeln (Math.sqrt(900.0)); // /it returns 30.0

EXAMPLE: OUTPUT<html><head><title>Example on properties</title></head><body bgcolor=red><form name="f1"><script language="JavaScript">function calc(txt){var num=txtround=Math.round(num)alert("rounded number is: "+round);}function calc1(txt){var num=txtround=Math.sqrt(num)alert("Square Root of a number is: "+round);}</script>Please Enter the Float Number: <Input type="text" name="t1" id="t1"><br><input type="button" value="Round Off" onClick="calc(f1.t1.value)"><br><input type="button" value="SquareRoot" onClick="calc1(f1.t1.value)"></form></body></html>Date Object

• The Date object provides the day, date, and time information.• Format: dateObject.method()var today = new Date();document.write(today);Produces:wed Feb 12 09:41 EST 2014

Example:<html><head><title>Example on properties</title></head><body bgcolor=violet><form name="f1"><script language="JavaScript">function jsdate(){var year=new Date()alert(year);}</script><input type="button" value="Show Today's Date and Time"


onClick="jsdate()"></form></body></html>String Object

• The String object provides methods and properties for string manipulation and formatting.• Format: stringName.method()

– Eg, var name = “Ruchi”;document.write(name.length);2) Document Object:

• The Document object represents the Web page that is loaded in the browser window, and thecontent displayed on that page, including text and form elements.Document Methods

• Here are the most common document methods:• write() - write a string to the Web page• open() - opens a new document• close() - closes the document3) Window Object:

• The window object represents the browser window. You can use it to open a Web page in anew window and to set the attributes for the window. There are only two main windowproperties.• Window Methods• The window methods are mainly for opening and closing new windows.• alert() - to display a message box• confirm() - to display a confirmation box• open() - to open a new window• close() - to close a opened window.

Dynamic HTML using JavaScriptDynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together tocreate interactive and animated web sites by using a combination of a static markup language (suchas HTML), a client-side scripting language, a presentation definition language (such as CSS), andthe Document Object Model.DHTML allows scripting languages to change variables in a web page's definition language, which inturn affects the look and function of otherwise "static" HTML page content, after the page has beenfully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way itfunctions while a page is viewed, not in its ability to generate a unique page with each page load.DHTML is differentiated from Ajax by the fact that a DHTML page is still request/reload-based. WithDHTML, there may not be any interaction between the client and server after the page is loaded; allprocessing happens in JavaScript on the client side. By contrast, an Ajax page uses features of DHTMLto initiate a request to the server to perform actions such as loading more content.JavaScript (more on JavaScript in a bit) is a programming language that both Netscape Navigator andInternet Explorer can understand, making it a good choice for cross-browser DHTML.DHTML Means showing the dynamic content on the web page rather than the static content.


Examples on DHTML:<html><head><title>Dymamic</title></head><body bgcolor=red><p onclick="this.style.fontSize='90px'">Click me to Increase the size</p></body></html

<html><head><title>Dymamic</title></head><body bgcolor=red><p onclick="this.style.color='white'">Click me to change the color</p></body></html>








XML(eXtensible Markup Language)INTRODUCTION TO XMLXML can be used to simplify data storage and sharing. With XML, data is separated from HTML. So youcan create HTML layouts for displaying data. When the data changes, you don't have to recreate yourHTML file. With XML, data can also be easily exchanged between computer and database systems;even they are incompatible in any other ways. Because XML data is stored in text format, this makes iteasier to export data from a system to an XML file, and then import it into another system.

What is XML?XML stands for EXtensible Markup Language, which became a W3C Recommendation on 10. February1998. XML is a markup language which is like HTML. XML and HTML both use tags. But there aresome differences between them: HTML was designed for how to display data. And XML was designed for how to store data. HTML tags are predefined (for example "<p>", "<table>", etc.). But XML tags are not predefined.You must define your own tagsThe following example is product information, stored as XML:

<product><name>

Garmin Oregon 300 3 inch' Touch screen Handheld GPS Unit with a Built-in Basemap and Shaded Relief

</name><category>GPS</category><brand>Garmin</brand><price>529.99</price><description>

Handheld GPS navigator for use outdoors, in a car, or on a boat 3 inch LCD touchscreen display (240 x 400 pixels) with built-in picture viewer

</description></product>As you can see, it is just pure information wrapped in tags, which are not like HTML tags ("<table>","<tr>", etc.) are predefined. You can create your own tags, like the ones in the above example, for yourXML file.XML can be used to simplify data storage and sharing. With XML, data is separated from HTML. So youcan create HTML layouts for displaying data. When the data changes, you don't have to recreate yourHTML file. With XML, data can also be easily exchanged between computer and database systems,even they are incompatible in any other ways. Because XML data is stored in text format, this makes iteasier to export data from a system to an XML file, and then import it into another system. Before wehave XML, the task of exchanging data between incompatible systems was not easier and complicateddue to the different data formats. Now XML greatly reduces this complexity, and we can be easilyexpand or upgrade our operating systems and applications without losing data.XML FORMAT AND STRUCTUREA XML document is consist of tags and data. All data in an XML document is wrapped by the tags.EXAMPLE:<?xml version="1.0" encoding="ISO-8859-1"?><customer>

<firstname>Michael</firstname><lastname>Smith</lastname><gender>male</gender><address>

<street>197 West Park Ave.</street><city>New York</city>


<state>NY</state><zip>11375</zip><country>US</country>

</address><phone>718-235-5670</phone><email>[email protected]</email>

</customer>The first line is the XML declaration. It defines the XML version (1.0) and the character set (ISO-8859).The next line uses tag "<customer>". It is the root element of the document. The next four linesdescribe the child elements () of the root: Please note that, except the first line, all tags in thedocument are used in pair: opening tag and closing tag. You can assume, from the above example, apair of tags provide a "container", and data or child tags are stored inside.Also, you can assume, the structure of an XML document is defined by the relationship between these"containers": a large container contains smaller containers. Or you can assume the structure of anXML file as a "tree" that starts at the root tag "customer" and branches to the leaves tags "firstname","lastname", "gender", "address", "phone" and "email":customer -> firstnamelastnamegenderaddress -> streetcitystatezipcountryphoneemailPlease note, an XML document must contain a pair of root tags for the "parent" element, whcihcontains all other elements. You cannot have two roots in a single XML document. All elements canhave child elements:<root><child1>......</child1><child2><subchild1>.....</subchild1><subchild2>.....</subchild2></child2></root>XML NamespaceNamespaces have two purposes in XML:1. To distinguish between elements and attributes from different vocabularies with differentmeanings and that happen to share the same name.2. To group all the related elements and attributes from a single XML application together so thatsoftware can easily recognize them.WHAT IS AN XML NAMESPACE?An XML namespace is a collection of names that can be used as element or attribute names in an XMLdocument. The namespace qualifies element names uniquely on the Web in order to avoid conflictsbetween elements with the same name. The namespace is identified by some Uniform Resource


Identifier (URI), either a Uniform Resource Locator (URL), or a Uniform Resource Number (URN), butit doesn't matter what, if anything, it points to. URIs is used simply because they are globally uniqueacross the Internet.Namespaces can be declared either explicitly or by default. With an explicit declaration, you define ashorthand, or prefix, to substitute for the full name of the namespace. You use this prefix to qualifyelements belonging to that namespace. Explicit declarations are useful when a node contains elementsfrom different namespaces. A default declaration declares a namespace to be used for all elementswithin its scope, and a prefix is not used.WHY IS IT NECESSARY?As an example, let's assume we have an RDB with a table of the following structure (employeeTable,sectionTable). What kind of SQL statement would you create to obtain a list of Employee ID, EmployeeDepartment Name, and Employee Name? If we merged employeeTable and sectionTable with thesecID column, then we would be able to obtain a list of employee IDs, employee departments andemployee names. However, since the name column and secID column exist in both tables, we wouldhave to designate the table name before the name and secID columns, or designate the alias of thetable in order to clarify the table of the name and secID columns in question.

So, what happens when this data is expressed in an XML document? Let's take two XML documents,and see how we can create a list showing employee ID, employee department and employee nameusing XML.First, we will create a root element (employeeList element) and an element (personList element) tosummarize employee information for one individual. You might have thought about creating anemployee ID element (empID element in employeeXML document), department name element (nameelement in sectionXML document) and an employee name element (name element in employeeXMLdocument) as child elements, but there's a problem with this method. The problem is an "elementname conflict." The name element in the employee XML document is defined as an elementrepresenting the employee's name, whereas the name element of the section XML document isdefined as an element representing a department name. In merging these two XML documents, youwill get a name element that has two separate meanings. While a human might be able to tell thedifference between these two "name" elements and what they represent, computer systems cannot


determine what these name elements are supposed to mean. The XML 1.0 specification neverconsidered the merging of different types of XML documents (vocabularies) to create a new XMLdocument, which led to this type of name conflict problem.employeeXML Document<employee><personInfo><empID>E0000001</empID><secID>S001</secID><name>John Smith</name></personInfo><personInfo><empID>E0000002</empID><secID>S002</secID><name>Ichiro Tanaka</name></personInfo>

・

・

・</employee>sectionXML Document<section><sectionInfo><secID>S001</secID><name>Sales</name></sectionInfo><sectionInfo><secID>S002</secID><name>Development</name></sectionInfo>

・

・

・</section>employeeListXML Document<employeeList><personList><empID>E0000001</empID><name>Sales</name><name>John Smith</name></personList><personList><empID>E0000002</empID><name>Development</name><name>Ichiro Tanaka</name></personList>

・

・

・


</employeeList>The name element expressing employee name and the name element expressing departmentname conflict!

Avoiding Element Name ConflictsPerhaps some of you out there had the idea that element name conflicts can be avoided by applyingthe same type of alias used for RDB table merge explained above to an XML document. The W3Crecommended a specification called "Namespaces in XML," whereby XML vocabularies are mutuallydifferentiated, allowing for the re-use of a vocabulary. Utilizing this XML namespace allows us to avoidany element name conflicts.Here, we will add an XML namespace declaration and description in both the employee data XMLdocument and section data XML document. Next, we will merge these two XML documents, and createa new employeeList data XML document. As a result, we can differentiate the "emp:name element" ofthe employeeList data XML document as an element representing employee name, and the "sec:nameelement" as an element representing department name. It might be easiest to think of one namespaceas an aggregation of elements and attributes.Employee XML Document<emp:employee xmlns:emp="urn:corp:emp"><emp:personInfo><emp:empID>E0000001</emp:empID><emp:secID>S001</emp:secID><emp:name>John Smith</emp:name></emp:personInfo><emp:personInfo><emp:empID>E0000002</emp:empID><emp:secID>S002</emp:secID><emp:name>Ichiro Tanaka</emp:name></emp:personInfo>

・

・</emp:employee>section XML Document<sec:section xmlns:sec="urn:corp:sec"><sec:sectionInfo><sec:secID>S001</sec:secID><sec:name>Sales</sec:name></sec:sectionInfo><sec:sectionInfo><sec:secID>S002</sec:secID><sec:name>Development</sec:name></sec:sectionInfo>

・

・</sec:section>employeeList XML Document<list:employeeListxmlns:list="urn:corp:list"xmlns:emp="urn:corp:emp"


xmlns:sec="urn:corp:sec"><list:personList><emp:empID>E0000001</emp:empID><sec:name>Sales</sec:name><emp:name>John Smith</emp:name></list:personList><list:personList><emp:empID>E0000002</emp:empID><sec:name>Development</sec:name><emp:name>Ichiro Tanaka</emp:name></list:personList>・

・</list:employeeList>NAMESPACE DECLARATIONWrite a namespace declaration according to the following description method, describing the elementstart tag:If the element and/or attribute belong to a namespace, a colon (":") is placed between the namespaceprefix and the element name/ attribute name.As a test, let's take the previous employeeList XML document as an example, and provide a namespacedeclaration and an element belonging to the namespace.<emp:employee xmlns:emp="urn:corp:emp"><emp:personInfo>…（omitted）…</emp:personInfo></emp:employee>In this example, we have declared the namespace prefix as "emp", and the namespace identifier (URI)as "urn:corp:emp". This means that element names and attribute names with the "emp" prefix(including the employee element) all belong to the urn:corp:emp namespace.

If the namespace prefix is not provided for an element and/ or attribute name, except for cases wherea default namespace is declared (to be discussed later), the element name and/ or attribute name donot belong to a namespace. While the namespace declaration is described as a start tag attribute, thisis different than a regular attribute. Elements having only an "xmlns:~" description have a namespacedeclaration, but no attribute.


Any arbitrary text string can be used as a namespace prefix; since there is no special meaning, any textstring will do. However, the URI must be universally unique. Quite often a URL beginning with"http://~" is used in practice. Since the URL is not actually accessed, it is not a problem if the file, etc.does not really exist. Understand that a URI represents nothing more than a logical namespace name.DEFAULT NAMESPACESA "default namespace" is a namespace declaration that does not use a namespace prefix (See Figurefor notation method). The scope of the default namespace is the element for which the namespace wasdeclared and the related content, just as with the namespace scope discussed earlier. The benefit ofusing a default namespace is that the namespace prefix can be omitted.For example, when adding a new namespace to an existing XML document, writing a namespace prefixfor each element to which the new namespace will be applied involves a tremendous amount oftedious work. The larger the XML document, the greater the labor involved, and the greater thelikelihood of notation errors. In this type of situation, adding only a default namespace declaration tothe XML document in question eliminates the need to write a namespace prefix for each and everyelement, saving a lot of time.On the other hand, there are drawbacks. One drawback is that omitting the namespace prefix makes itmore difficult to understand which element belongs to which namespace, and which namespace isapplicable. In addition, programmers should remember that when a default namespace is declared,the namespace is applied only to the element, and not to any attributes.

A default namespace can be overwritten partially by declaring a completely different defaultnamespace within the scope of the original default namespace. A default namespace can be canceledusing the following notation method:


NOTATION TO CANCEL A DEFAULT NAMESPACE〈elementname xmlns=""〉The xmlns="" designation frees an element within the namespace scope from belonging to anynamespace. A namespace using a namespace prefix can be designated within the scope of a defaultnamespace.THE NEED FOR XML DOCUMENT SCHEMAXML documents are used for many different purposes today. Order processing, invoices, estimates,travel expense reports, meeting minutes, accounting forms, manuals, and other data used on a dailybasis at work are only the tip of the iceberg. Now, we see XML used for personal data such as journals,household finances, and other applications. Virtually any data can be created using XML format, sinceXML allows a user to freely define element names and hierarchical structure.In this volume, we will be looking both at writing XML documents simply according to XML syntax(well-formed XML documents), as well as writing XML documents to be used as business-to-businessdata, or in other words, a data format to be shared between and among different companies.For example, if requested to create an XML document to serve as a purchase order to be sent to Mr. Yat Company X, what kind of XML document would you create? The following are three XML documentexamples, created by three different individuals. Ms. A has created very semantic element names. Mr.B has opted for rather abbreviated element names, and Ms. C has created elements having ahierarchical structure.

Even a simple request to create an XML document to serve as a purchase order to be sent to Mr. Y atCompany X can take on a number of different XML document patterns. Any of the three examplesabove can be considered to be proper XML documents. As long as the information required for apurchase order is included, likely any XML document you could create would be a valid XMLdocument for the purpose.But what would change if you approached the task from Mr. Y's perspective? Assume that Mr. Y usesthe three XML documents above, or your XML document, for order processing. Having received XMLdocuments with different element names and hierarchical structures, Mr. Y would have to open eachXML document in an editor, confirm whether all of the required information was present, and thenprocess the purchase order. In this case, every purchase order would have to be processed by hand,and the entire system could never be automated.But what would happen if all XML documents sent had the same element names and hierarchicalstructure? With standard element names and structures, a system could be created to handle allincoming XML documents, and order processing could be automated, without Mr. Y having to verifythe content of each individual document.


A "Schema" is what is required to allow the acceptance (or creation) of XML documents with astandardized element name and hierarchy structure. We know that in the RDB world, a schema isdefined when designing tables to stipulate category (column) data types and data sizes, set theprimary key, associate tables with other tables, etc. Under XML Schema, a user notates element names,orders of occurrence, and number of occurrences. When XML is used for specific purposes, a schemawill first be defined, and then XML documents will be created in accordance with that schema. Indoing so, anyone can create an XML document having the same exact element names and hierarchicalstructure.Let's take another look at the task for creating an XML document to be used for a purchase order.Assume that Mr. Y sends to Ms. A, Mr. B, and Ms. C a schema document for purchase orders (XMLdocument). Ms. A, Mr. B., and Ms. C then each create an XML document based on Mr. Y's schema. Theelement names and hierarchical structure of the XML documents they send to Mr. Y are completelyidentical.Mr. Y can now use an XML parser to verify whether the documents have been created according to theschema, so there is no need to open each file and check element names and hierarchy structures. Thisreduces Mr. Y's workload significantly.TYPES OF XML DOCUMENT SCHEMAThere are many different types of XML document schema. While the following type of narrativeformat can be considered a type of schema, there is the chance that different people will interpret thenarrative differently. This is why, in general, XML document schema is created using SchemaDefinition Language. Schema Definition Language is specialized definition language for noting schema,and leaves no room for interpretive differences.

PURCHASE ORDER XML SCHEMA[1] The root element is "orderform"[2] The content of "orderform" is a "customer" element and a "product" element in that order."customer" occurs once, and "product" may occur zero or more times.[3] The content of "customer" is the "name", "address", and "tel" elements, each occurring once inorder[4] The content of "name" and "address" is a text string[5] The content of "tel" is the "portable" and "home" elements, with either one or the otheroccurring[6] The content of "portable" and "home" is a text string[7] The content of "product" is the "product_name" and "num" elements, each occurring once inorder[8] The content of "product_name" is a text string[9] The content of "num" is a numeric valueThere is more than one Schema Definition Language out there. The Schema Definition Languagedefined under the XML 1.0 specification is the "DTD (Document Type Definition)." An even morestrictly defined Schema Definition Language is the "XML Schema" determined by the W3C. Differentvendors also have defined various Schema Definition Languages.DTD SCHEMA DEFINITIONUnder DTD, the main categories comprising the XML document are declared. Declarations come underone of the following four categories:

Element Type Declaration Attribute List Declaration Entity Declaration Notation DeclarationHere, we will discuss the most important of these, the "Element Type Declaration."Element Type Declarations declare elements contained within an XML document. The following showsthe syntax for an Element Type Declaration.


The Content Model is very important in the Element Type Declaration. It defines whether the elementcontent is a text string or numeric value (character data), whether only child elements occur (elementcontent), etc.WHEN CONTENT IS TEXT STRING OR NUMERIC VALUEWhen the element content is a text string or numeric value, the Content Model is designated as#PCDATA. Under DTD, there is no difference between numeric type data and text type data. Forexample, the following describes the Element Type Declaration that designates the content of"product_name" as a text string:<!ELEMENT product_name (#PCDATA)>The correct element description that conforms to this Element Type Declaration is<product_name>television</product_name>. Describing a child element such as<product_name><abc/></product_name> will cause an error.The following describes the Element Type Declaration that designates the content of "num" as anumeric value:<!ELEMENT num (#PCDATA)>The correct element description for this definition is <num>10</num>. As discussed earlier, both textstrings and numeric values for element content are designated as #PCDATA under DTD, so<num>Jenny</num> is a correct notation. The application must perform a check to see whether thecontent of an element is actually a number.When content is a child elementWhen a child element occurs as the content of an element, the element name of the child elementoccurring is designated in the Content Model. However, the order of occurrence and number ofoccurrences of the child element must also be defined.

Defining the order of occurrenceWhen there are a multiple number of child elements, you must designate the order of occurrence.There are two ways to notate the order of occurrence. Using a comma (,) between the child elementname and the next child element name indicates that the child elements will occur in the order given.Using a vertical line (|) means that either one or the other child element will occur."," Occurs in the order given"|" Either one or the other child element occursIn the following example, the content of "product" is the "product_name" and "num" elements,occurring once each in that order.<!ELEMENT product (product_name,num)>


The following is a valid element description for this type of Element Type Declaration:<product><product_name>television</product_name><num>10</num></product>Because "," defines the order of occurrence as the order in which the child element was written, thefollowing would be examples of invalid notation:

To describe an Element Type Declaration where either the "portable" or "home" element (childelements of "tel") occurs: <!ELEMENT tel (portable|home)>In this case, the following would be an error when describing both the portable and home elements:〈tel〉〈portable〉＊＊＊＊＊＊＊＊＊＊〈/portable〉〈home〉＊＊＊＊＊＊＊＊＊＊＊＊＊＊〈/home〉〈/tel〉Defining the number of occurrencesIn addition to the order of occurrence for child element names, the number of occurrences is alsodefined in the Content Model. The number of occurrences is designated with one of three symbols: "*","+" or "?". The "*" symbol means "may occur zero or more times." The "+" symbol means "may occurone or more times." The "?" symbol means "may occur zero times or one time."As with the notation examples for the Element Type Declaration（<!ELEMENT product（product_name,num）>）shown earlier, not providing an symbol for the number of occurrences means "must occur once.""*" May occur 0 or more times"＋ " May occur one or more times"？ " May occur zero times or onceNo designation One timeUnder DTD, a programmer may not designate a specific number of occurrences (e.g. three times,between two and five times, etc.).For example, output the "customer" and "product" elements (content of "orderform") in that order.To describe an Element Type Declaration designating one occurrence for "customer" and zero ormore occurrences for "product", use the following notation:<!ELEMENT orderform (customer,product*)>Now, let's describe all of the elements, referencing the notation examples above.Use the "dtd" extension when actually creating the document. The following shows a file named"order.dtd", describing the Purchase Order XML schema DTD:order.dtd<!ELEMENT orderform (customer,product*)> [1][2]<!ELEMENT customer (name,address,tel)> [3]<!ELEMENT name (#PCDATA)> [4]<!ELEMENT address (#PCDATA)> [4]<!ELEMENT tel (portable | home)> [5]


<!ELEMENT portable (#PCDATA)> [6]<!ELEMENT home (#PCDATA)> [6]<!ELEMENT product (product_name,num)> [7]<!ELEMENT product_name (#PCDATA)> [8]<!ELEMENT num (#PCDATA)> [9]

LIST1： Valid XML Document for DTDorderform.xml<!DOCTYPE orderform SYSTEM "order.dtd"><orderform><customer><name>Jenny</name><address>Tokyo</address><tel><portable>555-5555-5555</portable></tel></customer><product><product_name>washing machine</product_name><num>1</num></product><product><product_name>television</product_name><num>2</num></product></orderform>Declaration to Associate an XML Document and Schema DocumentThe <!DOCTYPE・・・> at the beginning of LIST1 is called the "Document Type Declaration," anddesignates the DTD that defines the structure of the XML document. There are two types of notationmethods, one being an "internal subset" describing the Element Type Declaration and individualdeclarations within the Document Type Declaration, and the other being an "external subset" (usedhere) where the Element Type Declaration and individual declarations are designated in an externalfile. In this volume, we will discuss the notation method for an external subset.The location for the Document Type Declaration is predetermined, coming above the start tag of theroot element. The Document Type Declaration syntax is described as shown below, and then the rootelement name and file name are designated:Validating the XML DocumentOnce the schema document and XML document have been created, we can verify whether the XMLdocument has been created in accordance with the schema document. This validation can beperformed using an XML parser, eliminating the need for manual verification or creating a separatevalidation program.In the prior volume, we explained how to use Internet Explorer ("IE") to verify whether an XMLdocument has been correctly written. However, the XML parser incorporated within IE cannot verifywhether an XML document has been created in accordance with a particular schema document.Accordingly, we will use a verification XML processor.Let's verify the XML document we created against the schema document.Next, create the XML document as shown in LIST2, and conduct the same operation as before. Anerror message should result.


LIST2：Invalid XML Document with respect to a DTDorderform_err.xml<!DOCTYPE order form SYSTEM "order.dtd" ><orderform><customer><name>Jenny</name><address>Tokyo</address></customer><product><product_name>washing machine</product_name><num>1</num></product><product><product_name>television</product_name><num>2</num></product></orderform>The reason that this type of error occurred is that the tel element does not occur in the XML documentin LIST2, while the schema document requires that the "name", "address" and "tel" elements (contentof "customer") occur once in that order. Use the error message in the dialog box as a clue to check theline before and after the error, and make the necessary edits.Entity DeclarationIn the prior volume, we discussed using predefined entity references, since "<" and "&" characterscannot be used directly as the content of an element. Since the <calculation>a1<b2</calculation>statement causes an error to occur, we rewrote the statement to read<calculation>a1<b2</calculation>. There are five types of predefined entity references providedunder the XML 1.0 specification.

<Table> Predefined Entity ReferencesEntity Entity Name Symbol Notation

〈 lt <〉 gt >& amp &" quot "' apos 'When using a DTD entity declaration, you can define your own entity references in addition to the fivetypes above.

What is XML Schema?In previous, we discussed well-formed XML documents, valid XML documents using DTDs, and XMLparsers. DTD has a characteristically simple syntax for functions and content definition. We see,however, that DTD functions and definitions have limitations when it comes to using XML for a varietyof complex purposes.Traditionally, DTD has been the standard for XML schema definition; however, XML usage hasexpanded dramatically in core application systems, being tailored for a wide range of purposes forwhich DTD is not fully capable of supporting. Given this development, the W3C recommended "XMLSchema" as a schema definition language to replace DTD. The recommendation of XML Schema hasspurred its adoption as a standard schema definition language.


DIFFERENCES BETWEEN XML SCHEMA AND DTD DEFINITIONSWhat differences are there between XML Schema and DTD definitions? We will explain thesedifferences using an XML document related to employee information as an example.When defining XML Schema, the content you wish to put into an XML document must first besummarized. The next step is to create a tree structure.Content to put into the XML document:1. The root element is "Employee_Info"2. As the content for "Employee_Info," "Employee" occurs 0 or more times3. As content of "Employee," "Name," "Department," "Telephone," and "Email" elements occuronce in respective order4. "Name," "Department," "Telephone," and "Email" content are text strings5. "Employee" has an attribute called "Employee_Number"6. "Employee_Number" content must be int type

This provides us with an understanding of the hierarchical structure of the XML document. Now, wecan provide a schema definition using actual schema definition language.LIST1 is an example using DTD and providing a schema definition for the content above, while LIST2is an example using XML Schema to provide a schema definition (employee.xs).LIST1: Employee Information DTD<!ELEMENT Employee_Info (Employee)*><!ELEMENT Employee (Name, Department, Telephone, Email)><!ELEMENT Name (#PCDATA)><!ELEMENT Department (#PCDATA)><!ELEMENT Telephone (#PCDATA)><!ELEMENT Email (#PCDATA)><!ATTLIST Employee Employee_Number CDATA #REQUIRED>LIST2：Employee Information XML Schema（employee.xs）01 <?xml version="1.0"?>02 <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" >0304 <xs:element name="Employee_Info" type="EmployeeInfoType" />05 <xs:complexType name="EmployeeInfoType">06 <xs:sequence>07 <xs:element ref="Employee" minOccurs="0" maxOccurs="unbounded" />08 </xs:sequence>09 </xs:complexType>1011 <xs:element name="Employee" type="EmployeeType" />12 <xs:complexType name="EmployeeType">13 <xs:sequence >14 <xs:element ref="Name" />15 <xs:element ref="Department" />16 <xs:element ref="Telephone" />


17 <xs:element ref="Email" />18 </xs:sequence>19 <xs:attribute name="Employee_Number" type="xs:int" use="required"/>20 </xs:complexType>2122 <xs:element name="Name" type="xs:string" />23 <xs:element name="Department" type="xs:string" />24 <xs:element name="Telephone" type="xs:string" />25 <xs:element name="Email" type="xs:string" />2627 </xs:schema>(Line numbers have been added for reference, and are not necessary in the actual code.)As you see, the syntax is completely different between the two. For the DTD, a unique syntax iswritten, whereas the XML Schema is written in XML format conforming to XML 1.0 syntax. LIST3 is anexample of a valid XML document for the LIST2 XML Schema (employee.xml).LIST3: Valid XML Document for XML Schema (employee.xml)<?xml version="1.0"?><Employee_Infoxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="employee.xs"><Employee Employee_Number="105"><Name>Masashi Okamura</Name><Department>Design Department</Department><Telephone>03-1452-4567</Telephone><Email>[email protected]</Email></Employee><Employee Employee_Number="109"><Name>Aiko Tanaka</Name><Department>Sales Department</Department><Telephone>03-6459-98764</Telephone><Email>[email protected]</Email></Employee></Employee_Info>For DTD, a DOCTYPE declaration is used to associate with the XML document; but, in the case of XMLSchema, the specification does not particularly determine anything with respect to the association ofthe XML document. Accordingly, the implementation method of the validation tool actually used isfollowed. However, under the XML Schema specification, there is a defined method for writing a hintto associate with the XML document. The following content is inserted into the root element of theXML document.xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="employee.xs"

XML SCHEMA STRUCTUREFrom here, using the LIST2 employee.xs file as an example, we will explain the method for writingXML schema.XML SCHEMA ROOT ELEMENTThe schema element is used as the root element, and the XML Schema "Namespace" is declared.Namespace is a specification used to avoid the duplication of attribute and element names definedunder XML, and is normally designated using URL format.


Under LIST2, the "xmlns:xs="http://www.w3.org/2001/XMLSchema" section at Line 2 is aNamespace declaration. The "xs" designation is called the "Namespace Prefix," and can be used withan element and a child element. Generally, the "xs" prefix is used most often.ELEMENT DECLARATIONWhen declaring an element, an ELEMENT keyword is used under DTD; however, under XML Schema,the element element is used. The declaration method is different depending on whether the elementelement has a child element or not. When no child element is present, the element name is designatedwith the name attribute, and the data type is designated using the type attribute.

Under DTD, not much more than being able to show an optional text string called #PCDATA as theelement content was possible; however, under XML Schema, a variety of data types can be defined.Data types can be designated using pre-defined embedded simple type (Note), including string type,int type and date type shown in a table, as well as ID type and NMTOKEN type that are compatiblewith DTD. These can be combined and extended or restricted to create new, unique data types.Table : Main XML Schema Data Types

●General Data TypesName Explanationxs:integer Integers (infinite precision)xs:positiveInteger Positive integers (infinite precision)xs:negativeInteger Negative integers (infinite precision)xs:nonPositiveInteger Negative integers including 0 (infiniteprecision)xs:nonNegativeInteger Positive integers including 0 (infiniteprecision)xs:byte Integer represented by 8 bitsxs:unsignedByte Integer represented by 8 bits (no symbols)xs:short Integer represented by 16 bitsxs:unsignedShort Integer represented by 16 bits (no symbols)xs:int Integer represented by 32 bitsxs:unsignedInt Integer represented by 32 bits (no symbols)xs:long Integer represented by 64 bitsxs:unsignedLong Integer represented by 64 bits (no symbols)xs:decimal Decimal number (infinite precision)xs:float Single-precision floating-point number (32-bit)xs:double Double-precision floating-point number (64-bit)


xs:Boolean Boolean valuexs:string Arbitrary text string●Types Representing Dates and TimesName Explanationxs:time Time of dayxs:dateTime Date and time of dayxs:date Datexs:gYear Yearxs:gYearMonth Year and monthxs:gMonth Monthxs:gMonthDay Month and dayxs:gDay Day● DTD-Compatible TypesName Explanationxs:ID XML 1.0 Specification ID typexs:IDREF XML 1.0 Specification IDREF typexs:IDREFS XML 1.0 Specification IDREFS typexs:ENTITY XML 1.0 Specification ENTITY typexs:ENTITIES XML 1.0 Specification ENTITIES typexs:NOTATION XML 1.0 Specification NOTATION typexs:NMTOKEN XML 1.0 Specification NMTOKEN typexs:NMTOKENS XML 1.0 Specification NMTOKENS typeMeanwhile, if the element has a child element, a new data type must first be designated for theelement (Line 11): <xs:element name="Employee" type="EmployeeType" />This "EmployeeType type" designated by the type attribute is a Complex Data Type. Lines 11 through20 are Complex Type declarations. In the actual content of the Complex Type, EmployeeType type isdesignated with the name attribute of the complexType element, and the Model Group (settingsmethod for the occurrence order of the child element) is designated in the child element. In the ModelGroup, use the sequence element to output occurrences in the order written (equivalent to the "," inDTD), and use the choice element to output the occurrence of any given element (equivalent to the "|"in DTD).Meaning of the Model Group XML Schema DTDOutput the element in the written order inthe exact number of occurrences designated sequence element ，

Output any one element in the exact numberof occurrences designated choice element ｜For Model Group element declarations, the most common method is to designate the ref attribute ofthe element element, referencing the element declared in a separate location (LIST4).


LIST4: Element Declaration Reference for a Model Group Element

The element reference syntax is as follows:

ATTRIBUTE DECLARATIONSWhen declaring an attribute, the ATTLIST keyword is used under DTD, while the attribute element isused under XML Schema. The syntax is as shown below. As mentioned previously in connection withComplex Type declarations, when describing an attribute, the convention is to describe it after theComplex Type definition content (after the Model Group) (Line 19).Designations related to Occurrences XML Schema DTDAttribute description may be omitted optional #IMPLIEDAttribute description is required required #REQUIREDAttribute description is prohibited prohibited None


<xs:attribute name="Employee_Number" type="xs:int" use="required"/>The attribute name is designated using the name attribute and the data type is designated using thetype attribute. The use, default, and fixed attributes can be designated as options. The use attribute isa designation related to occurrences, and can be used to designate "required" (equivalent of#REQUIRED in DTD) or "optional" (equivalent to #IMPLIED in DTD). When nothing is written, thesetting is "optional." The default attribute is used to designate initial values, while the fixed attribute isused to designate a fixed value (equivalent to #FIXED in DTD).Table : XML Schema and DTD Differences related to Attribute Declarations

DESIGNATING REPEAT COUNTUnder DTD, designating a repeat count was only possible by designating the minimum value as (*) for0 or more times, or (+) for one or more times. However, under XML Schema, the minOccurs andmaxOccurs attributes can be used to designate detailed repeat counts, such as "from one to three" or"between three and unlimited." For an unlimited upper limit, set the maxOccurs attribute to"unbounded." Be sure to remember that if the minOccurs and maxOccurs attributes are omitted, bothdefault to a value of 1. Repeat count designations can be used within element references, attributedeclarations and within Model Groups.XML SCHEMAS XML schema is an XML based alternative to DTD. Which describes the structure of an XMLdocument. The XML schema language is also referred as XML Schema Definition (XSD). The purpose of an XML schema is to define the legal building blocks of an XML document like aDTD. An XML schema defines :– elements and attributes that can appear in a document– which elements are child elements, the order of child elements– the number of child elements and whether an element is empty or can include text– data types for elements and attributes– default and fixed values for elements and attributes XML Schemas are the Successors of DTD’s XML Schemas will be used in most Web applications as a replacement for DTDs because :– XML Schemas are richer and more powerful than DTDs– XML Schemas are extensible to future additions– XML Schemas are written in XML, also support data types and namespaces XML Schema is W3c recommendation. As XML Schemas Support Data Types– It is easier to describe allowable document content– It is easier to validate the correctness of data– It is easier to work with data from a database– It is easier to define restrictions on data– It is easier to define data patterns/formats– It is easier to convert data between different data types


Using XML schema we can provide the secured data communication between sender andreceiver. As XML Schemas use XML Syntax– No need to learn a new language– We can use an XML editor to edit Schema files– we can use XML parser to parse Schema files– we can manipulate Schema with the XML DOM As XML Schemas are extensible we can reuse the schema in other schema’s we can providereference of multiple schemas in the same document.

Simple XML Document<?xml version="1.0"?><note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>Simple DTD Document<!DOCTYPE note[<!ELEMENT note (to ,from ,heading ,body)><!ELEMENT note (to, from, heading, body)><!ELEMENT to (#PCDATA)><!ELEMENT from (#PCDATA)><!ELEMENT heading (#PCDATA)><!ELEMENT body (#PCDATA)> ]>XML Schema Document<?xml version="1.0"?><xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"targetNamespace="http://www.w3schools.com"xmlns="http://www.w3schools.com"elementFormDefault="qualified“><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>Reference to DTD<?xml version="1.0"?><!DOCTYPE note SYSTEM “http://www.w3schools.com/dtd/note.dtd"><note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>


Reference to XML Schema<?xml version="1.0"?><note xmlns="http://www.w3schools.com"xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.w3schools.com note.xsd"><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>XML DOM (Document Object Model)

The DOM is a W3C (World Wide Web Consortium) standard. 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." The DOM is separated into 3 different parts / levels:

Core DOM - standard model for any structured documentXML DOM - standard model for XML documentsHTML DOM - standard model for HTML documents The DOM defines the objects and properties of all document elements, and the methods

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

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

(interface) to access them.The XML DOM is: A standard object model for XML A standard programming interface for XML Platform- and language-independent A W3C standard. The XML DOM is a standard for how to get, change, add, or deleteXML elements. In XML DOM everything in a xml document is treated as 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

DOM Example (books.xml)<?xml version="1.0" encoding="ISO-8859-1"?><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">XQuery Kick Start</title><author>James McGovern</author><author>Per Bothner</author><author>Kurt Cagle</author><author>James Linn</author><author>Vaidyanathan Nagarajan</author><year>2003</year><price>49.99</price></book><book category="web" cover="paperback"><title lang="en">Learning XML</title><author>Erik T. Ray</author><year>2003</year><price>39.95</price></book></bookstore> The root node in the XML above is named <bookstore>. All other nodes in the document arecontained within <bookstore>, which holds four <book> nodes. The first <book> node holds four nodes: <title>, <author>, <year>, and <price>,which containsone text node each, "Everyday Italian", "Giada De Laurentiis","2005", and "30.00". Text is Always Stored in Text Nodes A common error in DOM processing is to expect an element node to contain text. However, the text of an element node is stored in a text node. In this example: <year>2005</year>, the element node <year>, holds a text node with thevalue "2005“, 2005" is not the value of the <year> element! XML DOM views an XML document as a tree structure which is called as a nodetree. All thenodes in the tree have a relationship with each other. All nodes can be accessed through the tree. Their contents can be modified or deleted, and newelements can be created. The node tree shows the set of nodes, and the connections between them. The tree starts at theroot node and branches out to the text nodes at the lowest level of the tree






Parent, Child and Siblings:• The terms parent, child, and sibling are used to describe the relationships. Parent nodes havechildren. Children on the same level are called siblings who have the same parent.– In a node-tree, the top node is called the root– Every node, except the root, has exactly one parent node– A node can have any number of children– A leaf is a node with no children– Siblings are nodes with the same parent• Element <book> is parent node to <title>, <author>, <year>, <price> and is child node to root nodeelement named <bookstore>.<bookstore> // element <bookstore> is root<book category="children">

<title lang="en">Harry Potter</title> //element <title> is first child of <book><author>J K. Rowling</author>

<year>2005</year><price>29.99</price> //element <price> is last child of <book>

</book></bookstore>

Presenting XMLPresenting XML

XML documents are presented using Extensible Stylesheet which expresses stylesheets. XSL stylesheet are not the same as HTML cascading stylesheets. They create a style for aspecific XML element, with XSL a template is created. XSL basically transforms one data structure to another i.e., XML to HTML.

Example Here is the XSL file for the XML document of Example

This line must be included in the XML document which reference stylesheet <?xml:stylesheet type = “text/xsl” href = “student.xsl”?>Here goes the XSL file…..<xsl:stylesheet smlns:xsl =”uri:xsl”.<xsl:template match=”/”><html><body><h1> Student Database </h1.<xsl:for-each select = “college”><xsl:for-each select = “studetail”><xsl:value-of select = “regno”/><xsl:for-each select = “name”><xsl:value-of select = “firstname”/><xsl:value-of select = “lastname”/></xsl:for-each><xsl:value-of select=”country/@name” /><xsl:value-of select = “branch”/></xsl:for-each></xsl:for-each></body></xsl:template></xsl:stylesheet>


SAX PARSER Simple API for XML- SAX– Fast and Efficient– It will Fires Event handlers at Start Tag, Tag Body and End Tag.

e.g: <to> jk </to> respectively.– SAX is Read Only API therefore it cannot be used to Update XMLdocuments.– It is good for large documents to process as it requires less memory.– It process the document sequentially.– SAX allows us to abort processing at any time.– It is useful to retrieve small amount of information.<?xml version="1.0" encoding="UTF-8"?><parts><part> TurboWidget </part></parts>StartDocument( )StartElement( "parts" )StartElement( "part" )Characters( "TurboWidget" )EndElement( "part" )EndElement( "parts" )EndDocument( )Advantages of SAX: SAX reduces memory and CPU usage because it only processes one sectionof an XML document at a time. SAX is customizable because when an event is triggered, only the associatedapplication receives data about the triggering event. SAX is streamlined, fast, and supports pipelining due to the reason that theparser can produce output while the document is being parsed.

Drawbacks of SAX: The SAX parser is unidirectional because It can only parse forwards ina document. As it can hold only a portion of the XML document in memory at anytime, it is difficult to add or edit nodes using SAX. If this functionality isrequired, then DOM should be considered. SAX can only work with a fully formed XML document. It cannot beused to process partial XML documents. It won’t support dynamic access of data in a document. It is difficult to implement complex searches. SAX support is not built-in in Microsoft® Internet Explorer.

DOM( Document Object Model ) PARSER The Java binding for DOM provided a tree-based representation of the XML documents -allowing random access and modification of the underlying XML data. Not very difficult todeduce that it would be slower as compared to SAX. The event-based callback methodology was replaced by an object-oriented in-memoryrepresentation of the XML documents. Though, it differs from one implementation to another ifthe entire document or a part of it would be kept in the memory at a particular instant, but the


Java developers are kept out of all the hassle and they get the entire tree readily availablewhenever they wish.JAXP - Java API for XML Parsing The creators and designers of Java realized that the Java developers should not be XML gurusto use the XML in Java applications. The first step towards making this possible was the evolution of JAXP, which made it easier toobtain either a DOM Document or a SAX-compliant parser via a factory class. This reduced the dependence of Java developers over the numerous vendors supplying theparsers of either type. Additionally, JAXP made sure that an interchange between the parsersrequired minimal code changes.

Differences between DOM and SAX Main differences between SAX and DOM, which are the two most popular APIs for processingXML documents in Java, are:- Read v/s Read/Write: SAX can be used only for reading XML documents and not for themanipulation of the underlying XML data whereas DOM can be used for both read and write ofthe data in an XML document. Sequential Access v/s Random Access: SAX can be used only for a sequential processing ofan XMLdocument whereas DOM can be used for a random processing of XML docs. So what to do if youwant a random access to the underlying XML data while using SAX? You got to store and manage thatinformation so that you can retrieve it when you need. Call back v/s Tree: SAX uses call back mechanism and uses event-streams to read chunks ofXML data into the memory in a sequential manner whereas DOM uses a tree representation ofthe underlying XML document and facilitates random access/manipulation of the underlyingXML data. XML-Dev mailing list v/s W3C: SAX was developed by the XML-Dev mailing list whereasDOM wasdeveloped by W3C (World Wide Web Consortium). Information Set: SAX doesn't retain all the info of the underlying XML document such ascomments whereas DOM retains almost all the info. New versions of SAX are trying to extendtheir coverage of information.

Documents

HTML,Javascript,XML Notes by Brj