Downloaded 151 times
![4 <rollno>123</rollno>5 <name>Rams</name>6 <mobileno>9949139899</mobileno>7 <mobileno>8887776663</mobileno>8 <address country = “india”>9 <hno>2/202</hno>10 <colony>nawabpet</colony>11 <city>bond</city>12 </address>13 </student>14 </institute>Procedure to create a XML document containing internal DTD rules:Click on file menuSelect new itemSelect XML (Extensible Markup Language)Click on OKClick on cancel<! DOCTYPE institute [<! ELEMENT institute (student +)>...{same as previous rules}..<! ATTLIST address country cDATA #FIXED “india”>]><institute><student course = “html” Type = “inspector”>...{same as previous rules}.Page | 22](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtmlxmlandjavascript-130509022225-phpapp01%2f75%2fHtml-xml-and-java-script-22-2048.jpg&f=jpg&w=240)
![3. Restrictions on series of values:<xs: element name = “xxx”><xs: simpleType><xs: restriction base = “yyy”><xs: pattern value = “([a-z]+)”/></xs: restriction></xs: simpleType></xs: element>The above pattern allow the user to enter the data of lengththreecharacters, where every character lowercase alphabet.Note: Every pair of [] represents one character.<xs: pattern value = “[abcd]/>The above syntax allow to enter a data of length one character where that charactercan be either ‘a’ or ‘b’ or ‘c’ and ‘d’.<xs: pattern value = “[0-9][0-9][0-9][0-9]”/>The above pattern will allow the user to enter a data of length of data 4 characterwhere each character should be a digit.<xs: pattern value = “([a-z])*”/>The above syntax will allow the user to enter a data of any length but everycharacter should be a lower case alphabet.<xs: pattern value = “([a-z][A-Z])+”/>The above pattern will allow the user to enter a data containing one or more pairs oflower case and the upper case alphabets respectively.<xs: pattern value =”[0-9]{10}”/>The above pattern will allow the user to enter a data of length exactly 10 characterwhere every should be a digit.Page | 26](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtmlxmlandjavascript-130509022225-phpapp01%2f75%2fHtml-xml-and-java-script-26-2048.jpg&f=jpg&w=240)
![4. Restrictions on length of the data:<xs: pattern value =” ([a-zA-Z0-9@#$ %])*/><xs: minLength value=”6”/>The restriction will allow the user to enter a data whoseminimum length should be ‘6’ characters.<xs: pattern value = “([a-z A-Z @ # % $])*”/><xs: maxLength value = “20”>This restriction will allow the user to enter a data whose maximum length can be upto ‘20’ characters.<xs: length value = “10”/>This restriction will allow the user to enter data whose length is exactly ‘10’characters.Procedure Create a Document Containing Schema Based Rules:Click on file menu select new select xsd (w3c XML SCHEMA) click on OK.1. <xs: schema xmlns: xs=”http://www.w3.org/2001/XML Schema”>2. <xs: element name = “institute”>3. <xs: complexType>4. <xs: sequence>5. <xs: element name=“student” minoccurs = “1” maxoccurs = “60”>6. <xs: complexType>7. <xs: sequence>8. <xs: element name=“rollno” maxoccurs=“1” minoccurs=”1”>9. <xs: simpleType>10.<xs: restriction base = “xs: integer”>11.<xs: pattern value = “[0-9][0-9][0-9]”>12.</xs: restriction>13.</xs: simpleType>14.</xs: element>15.<xs: element name = “name” maxoccurs = “1” minoccurs = “1”>16.<xs: simpleType>17.<xs: restriction base = “xs: string”/>Page | 27](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtmlxmlandjavascript-130509022225-phpapp01%2f75%2fHtml-xml-and-java-script-27-2048.jpg&f=jpg&w=240)
![18.<xs: pattern value = “([a-zA-Z])*”/>19.<xs: minLength value = “4”/>20.<xs: maxlength value = “10”/>21.</xs: restriction>22.</xs: simpleType>23.</xs: element>24.<xs: element name = “mobileno” minoccurs = “2” maxoccurs = “5”>25.<xs: simpleType>26.<xs: restriction base = “xs:integer”>27.<xs: pattern value = “[789][0-9]{9}”/>28.</xs: restriction>29.</xs: simpleType>30.</xs: element>31.<xs: element name = “address”>32.<xs: complexType>33.<xs: all>34.<xs: element name = “hno” type = “xs: string”/>35.<xs: element name = “colony” type = “xs: string”/>36.<xs: element name = “city” type = “xs: string”/>37.</xs: all>38.<xs: attribute name = “country” fixed = “india”/>39.</xs: complexType>40.</xs: element>41.</xs: sequence>42.<xs: attribute name =”course” use = “required”>43.<xs: simpleType>44.<xs: restriction base = “xs: string”>45.<xs: enumeration value = “html”/>46.<xs: enumeration value = “xml”/>47.<xs: enumeration value = “java”/>48.<xs: enumeration value = “oracle”/>49.</xs: restriction>50.</xs: simpleType>51.</xs: attribute>Page | 28](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtmlxmlandjavascript-130509022225-phpapp01%2f75%2fHtml-xml-and-java-script-28-2048.jpg&f=jpg&w=240)
![4. Array object:This object is used to value store multiple values into a single variable.Ex:<html><head><title>Array Object</title></head><body><script type = “text/javascript”>var names = new Array();names[0] = “john”;names[1] = “Khan”;names[2] = “Zhan”;names[3] = “Mallikarjuna”;names[4]= “Suneel”;document.write(names + “<br/>”);for(i=0; i<names.length;i++);{Document.write(names[i] +”<br/>”);}document.write(names.reverse() +”<br/>”);document.write(names.sort() +”<br/>”);</script></body></html>5. Math object: This object is used to perform mathematical operations.Ex:<html><head><title>Math Object</title></head><body><script type = “text/javascript”>document.write(Math.min(4,6) + “<br/>”);Page | 43](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtmlxmlandjavascript-130509022225-phpapp01%2f75%2fHtml-xml-and-java-script-43-2048.jpg&f=jpg&w=240)
Uploaded byRajeev Uppala
DOC, PDF2,257 views
Html, xml and java script
HTML documents consist of HTML tags and text that are used to structure and markup web page content. HTML tags come in pairs with opening and closing tags, are case insensitive, and always surround element content. The basic structure of an HTML document includes a <head> section for metadata and a <body> section for visible page content.
Recommended
More Related Content
What's hot
Viewers also liked
Similar to Html, xml and java script
Recently uploaded
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fcodedagentsdeck-251215155422-5497c599-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Html, xml and java script
- 1.HTML DOCUMENT:Html documentconsists of html tags and some text.HEML TAGS:1. Html tags are used to markup html element.2. Html tags are surrounded by <and> Characters these characters arecalled as angler brackets.3. Html tags always come in pairs. That is tags contain a starting tag andending tags.4. The text in b/w the starting tag and ending tag is called as element content.5. Html tags are free defined tags.6. Html tags are not case sensitive. That the upper and lower document is htmldocument.7. The html tag <html> in a document represents. That the document is htmldocument.8. The entire html document must be written starting html tag <html> andending html </html>.9. Html document is divided into two sections.(I) Head section:This section is used to provide general information about the htmldoc. This section is representing by <head>.Ex: Title, Meta etc.(II) Body section:This section is used to display text are images on the Browser. Thissection is representing by <body>.Html document structure:<html><head><title> </title></head><body>Welcome to any web page</body></html>Step1: Processor to write executes the html document. Open an editor and typehtml document.Page | 1
- 2.<html><head><title>First html</title></head><body>Welcome toany web page</body></html>Step2: Save the html document any name having. Html as the extension.Step3: To execute the html document to open it in any Browser. To html language isan error free language. That is it will not display any error massage on the Browser.Even it the html document contain any error.Html comments:Comments are used to make the code name readable or they areused to explain the code.HTML comments begins with <!--line one comment-->EX :<!--line one comment -- ><!--line one commentline two comment...N no. of line comments -- >Attributes:1. Attributes are used to provide additional information about the html elementstags.2. The attributes must be specified in starting tags.3. The attributes always come in pears.attribute name = attribute value4. The attribute value can be enclosed with in single codes are double codes.5. Every html tag can contain attribute.Note: Specifying the attributes for a tag is optional.Page | 2
- 3.Body tag attributes:1.Bgcolor: This attributes specified the background color to displayed for a htmldocument.2. Text : This attributes specified the color of the text to be displayed on the htmldocument. Color can be specified (on the html document) for two formats.a. Specified the color have directly.b. We can specify the color by combining Red, Green and Blue. The formatshould be #rrggbb. The color combination is 6 digit Hexadecimalnumbers.3. Background: This attribute specify an image as the background to the htmldocument.<body bgcolor = “#ffffoo” text = “#ffoooo”>Good Afternoon</body>Note: Specifying the attributes is optional, we can specify any number of attributesand they can specified in any order.Formatting tags:<b>: This tag is use to display a text in Bold face.<b>Bold</b><strong>: This tag is similar to <b> used to display the text in Bold face.<strong>Bold</strong><i>: This tag is use to emphasize a text by display in Italics format.<i>Italics</i><em>: This tag is use to emphasize a text by display in Italics format.<em>Italics</em><tt>: This tag is use to display a text in Teletype font. That is typewriter font.<tt>Teletype</tt><s>: This tag is used to display a Strike the text.<s>Strike</s><strike>: This tag is similar to <s> use to display a Strike out text.<strike>Strike</strike><del>: This tag is use to Delete a text by Striking it out.<del>Strike</del>Page | 3
- 4.<ins>: This tagis use to Insert a line below the text.<ins>underline</ins><u>: This tag is use to underline a text.<u>underline</u><sup>: This tag is use to display a text as a Superscripted. That the text will bedisplayed above the normal text.a<sup>2</sup>+b<sup>2</sup><sub>: This tag is use to display a text as a Subscripted. That is the text will bedisplayed below the normal text.H<sub>2</sub>SO<sub>4</sub><big>: This tag is use display a text solidly Bigger then the normal text.<big>text</big><small>: This tag is to display a text solidly Smaller then the normal text.<small>text</small><center>: This tag is to display a text in the Center of the webpage(html document).<center>Welcome</center>Heading tags: These tags are used to perform font changes display the text inboldface and the heading tags by default align the text tag left side. These are sixlevels of heading tags. H1, H2, H3, H4, H5 and H6. H1 is the biggest in heading andH6 is the biggest in heading and H6 is the smallest heading.We can change the alignment of the headings by using align attributes.Ex: align = “left |center |right”<H1 align = “left”>Heading1</H1><H2 align = “left”>Heading2</H2><H3 align = “center”>Heading3</H3><H4 align = “center”>Heading4</H4><H5 align = “right”>Heading5</H5><H6 align = “right”>Heading6</H6><pre>:(preformatted text)This tag is used to display a text in preformatted manner. The browserpreserve all the white spaces as it is.Ex:<pre>To,The manager,Page | 4
- 5.HDFC bank,Nellore,Sub: Regardingloan to buy a house.Respected sir/madam,I………………………………………………………………………….Thanking you.</pre><br>: This tag is used to stop displayed in the content at that point and displayedcontent in a new line. The <br> will started new line where ever it is specified.Note:<Br> is an empty tag that is <BR> tag doesn’t content any element content.Ex:<body>line one</br>line two</br>line three</body><p>: This tag is used to display a paragraph. The <p> will add paragraph break(inserts an empty line before and after the paragraph). The paragraphs are is bydefault to left side. We can change the alignment by using the alignment attribute.Ex: align = “left |center |right”<p align = “left”>this is a paragraph</p><p align = “center”>This is a paragraph</p><p align = “right”>This is a paragraph</p><hr>: This tag is used to display a horizontal line in a html document. Using thehorizontal rule we can divide the web page into multiple sections.Page | 5
- 6.*Attributes of <hr>:1.Width: This attribute specifies the length of the Horizontal rule to be displayedin a web page. The width can be specified either in pixels or percentage.Ex:<hr width = “300”/> or <hr width = “75%”/>The width can be specified either in pixels or percentage.2. Color: This attribute specifies the color of the horizontal rule to be displayed ina web page.Ex:<hr color = “red”/>3. Size: This attribute specifies the thickness of the horizontal rule to bedisplayed.Ex:<hr size “10”/>4. align: We can change the alignment of the horizontal rule by using this alignattribute. By default the horizontal rules are aligned to center.Ex :< hr align = “center”/><hr width = “75%” align = “center” color = “blue” size =“10”/>Note: hr is an empty tag.Lists: In html document we can present the data in the form of list. There are 3 typesof lists.1. Ordered List2. Unordered List3. Definition List1) Ordered List: A list is said to be an ordered list if the items are displayed byusing either by digits or by Alphabets or Roman numbers. By default digits areused to display order list. We can change the display by using “type” attribute.Page | 6
- 7.Type = “1| a | A | i |I|”Ex: <ol type “I”><li>Hyderabad</li><li>Mumbai</li><li>Chennai</li></ol>2) Unordered List: If a list is displayed with the help of some graphical symbolsthen it is called as unordered list. We can change the display by using “Type”attribute.Type = “disc | square | circle”Ex:<Ul><li>Hyderabad</li><li>Mumbai</li><li>Chennai</li></Ul>3) Definition List: A list is said to be a definition list if we provide a definition ordescription to every item.Ex:<dl><dt>Hyderabad</dt><dd>Biriyani</dd><dt>Chennai</dt><dd>somber</dd><dt>Mumbai</dt><dd>bomb</dd></dl>We can place a list inside another list that is nesting of lists is possible.Ex:<Ul><li>Hyderabad</li><ol><li>Ameerpet</li><li>Hi-tech</li>Page | 7
- 8.<li>Birla temple</li></ol><li>Mumbai</li><li>Chennai</li></Ul><Font>: Thistag can be used to apply font changes, change the text color or face orsize.Attributes of <font>:1. Color: This attribute specifies the color of the text to be displayed.Ex: <font color = “red”> Hello </font>2. Size: This attribute specifies the font size to be displayed.Ex: <font size = “10”>Hello</font>3. Face: face will specify the place of the text to be display.Ex: <font face = “Arial”>Hello </font><font color = “red” size = “10” face = “Arial”> Hello</font>Note: Font tag is dependent tag. That is <font> will not apply any changes withoutthe attributes.<img> :(image) this tag is used to display and img on the html document.Attributes of<img>:1. Src(source): This attribute specifies of the URL(Address of the image).2. Border: This attribute specifies of the thickness of the border around theimage. By default thickness is ‘zero’ pixels.3. Width: This attribute specifies of the width of the an image to be displayed ina html document.4. Height: This attribute specifies of the Height of the image to be displayed in ahtml document.Page | 8
- 9.5. Alt(alternate text):This attribute specifies a text to be displayed on the htmldocument when an image is not loaded.6. Hspace(Horizontal Space): This attribute specifies the amount of space emptyspace to be displayed on the left and right sides of the image.7. VSpace(vertical space): This attribute specifies the amount of empty space tobe displayed on the top and bottom of the image.Ex:<img src = “smile.jpg” border = “2” width = “100” height = “100” alt =“smile logo” hspace = “50” vspace = “30”/>Note: An <img> is an empty tag and (source) “src” is a mandatory attribute to displayan image.<Table>: This tag is used to display a table in a html documentAttributes of <table>:1. Border: This attribute specifies the thickness of the border to be displayed. Bydefault are zero pixels.2. Border color: This attribute specifies the color of the border to be displayed.3. Width: This attribute specifies the width of the table.4. Height: This attribute specifies the height of the table.5. Align: This attribute can be used to align a table in a web page.6. Bgcolor: This attribute specifies a bgcolor for the table.7. Background: This attribute is used to display an image the background to betable.8. Cell padding: This attribute specifies the amount of space between cellcontent and cell border.9. Cell spacing: This attribute specifies the space between the cells and b/w thecell border and table border.Sub tags of <table>:Page | 9
- 10.1. <tr>(table row):This tag is used to create a row in a table. The no. of <tr> willindicate the no. of row in a table.2. <td>(table data): This tag is used to create a column(cell) in a particular row.The no. of <td>’s with indicate no. of columns in a particular row.3. <th>(table heading):This tag is used to create a column in a particular rowsimilar to <td> but <th> will display the text in bold face and the text will becentered.4. <caption>: This tag is used to display a heading to a table.Attributes of sub tags:1. Row span: This attribute is used to span (merge) the cells vertically.2. Colspan: This attribute is used to span (merge) the cells horizontally.3. Valign: This attribute is used to align the text vertically. Valign = “top | middle|bottom” by the default it is vertically aligned to middle. In this sub tags wecan also use align, bgcolor, and background attributes.Ex: <html><head><title>Table<title></head><body><table border = “2” width = “150” height = “150” bordercolor =“red” bgcolor = “pink” cellpadding = “10”><caption>number table</caption><tr><th>one</th><th>two</th><td align = “center”>three</td></tr><tr><td colspan = “2” align = “center”>four</td><td rowspan = “2” valign = “top” bgcolor = “red”>six</td></tr><tr><td>seven</td><td>eight</td></tr>Page | 10
- 11.</table></body><html><Marquee>: This taguse to display a scrolling text on a web page.Attributes of <Marquee>:1. Behavior: This attribute specifies the behavior of the scrolling text in a webpage.Ex:Behavior = “scroll | slide | alternate”(the default behavior is scroll)2. Direction: This attribute specifies the direction in which the text will bescrolled. By default the text scrolls towards left side.3. Bgcolor: This attribute will display bgcolor to the scrolling text.4. Scroll amount: This attribute specifies the speed of the scrolling text.Ex:<marquee behavior = “scroll” direction = “right” bgcolor = “red”scrollamount = “45”>flash news</marquee><a>: This tag is use to create link b/w the html documents are any other webresource.Attributes of <a>:1. Href(hyperlinking reference): This attribute specifies the URL(address) of theresource to which the hyperlink as the link reference.2. Target: This attribute will specifies were to open the linked document.Target = “_self” | “_blank” (_under scor) the default value _self.3. Name: This attribute is used to create named Anchor. The named anchor canbe used to jump from one location to another location with in a htmldocument.Ex: <a href = “image.html” target = “_blank”>click here</a>Frame: Frames can be used to display multiple html documents in the same browserat the same time.<frameset>: This tag is use to divide a frame into multiple frames.Attributes of <frameset>:1. Rows: This attribute is a list of values separated by a comma (,). The no. ofvalues in a list will decide the no .of horizontal divisions.Page | 11
- 12.2. Cols: Thisattribute is a list of values separated by a comma (,). The no. ofvalues in a list will decide the no. of vertical divisions.3. Border: This attribute specifies the thickness of the border with in a frameset.<frame>: This tag represents and individual frame with in a frameset.Attributes of <frame>:1. Src(source): This attributes specifies the URL(address) of the html documentto be displayed with in the frameset.2. Scrolling: This attribute will decide where there frame will contain a scrollingbar of not.Scrolling = “auto | yes | no”The default scrolling value is also “auto”.3. Name: This attribute is use to assign a name to a frame.4. No resize: It is a flag which indicates that the frame can’t be resized.Ex:<html><frameset rows = “30%,*” border = “10”><frameset src = “welcome.html” noresize/><frameset cols = “100,*”><frame src = “sample.html”/><frame src = “image.html”/></frameset></frameset>Note: The frameset tag must be written outside the <body>.Forms: Form is an area which contains some input elements where the user canprovide the information. Forms are used to submit the data to the server are anyother resource. The html document can have any no. of forms. To create a form inhtml document we use <form>.Attributes of <form>:1. Action: This attribute specifies the URL(address) of the server are any otherresource where the form data has to be submit.2. Method: This attribute defines how to submit the form data to the server. Themost widely values are ‘get and post’. If the method value is ‘get’ then thePage | 12
- 13.form data willbe submitted to the server along with the URL. The form datawill be display in the address bar and hence doesn’t provide security to theform data.If the method value is ‘post’ then the form data will be submit to the serverseparately form the URL. It will don’t display the from data in the address bar.There by provides security to the form data.Using ‘get’ we can send limited data only but using ‘post’ we can sentunlimited data.The default method value is ‘get’.3. Name: This attribute is used to assign a name to a form for identification.Sub tags of form tag:<input>: This tag is used to create a input element where the user can either someinformation.Attributes of <input>:1. Type: This attribute will be decide the type of input element to be display list.Ex: type: text, password, radio, checkbox, submit, reset, hidden(internal all pages displayed), button.2. Name: This attribute is used to assign a name to the input element.3. Size: This attribute specified the length of the input field.4. Value: This attribute is used to specifies the default value are initial value to ainput element.5. Max length: This attribute specify the maximum number of characters to beentered the input element.<Select>: This tag will provide the user a list of options form which the user canselect one option.<Text area>: This tag allows the user to enter the data in multiple lines the size ofthe text area can be specified by using rows and cols attribute.Ex:<html><head><title>Registration</title></head>Page | 13
- 14.<body bgcolor =“green”><form method = “post” name = “registrationform”>username<inputtype = “text” name = “user” size = “30”/><br/>Password<input type = “password” name = “pass” size = “30”/><br/>Confirm password<input type = “password” name = “cpass” size =“30”/><br/>Gender<input type = “radio” name = “sex”/>Male<input type = “radio” name = “sex”/>Female<input type = “radio” name = “sex”/><br/>Qualification<select><option>BTech</option><option>MCA</option><option>BSc</option><select><br/>Hobbies<input type =”check box”>programming<input type =”check box”>browsing<input type =”check box”>reading<br/>Comments<textarea rows = “5” cols = “30”>Enter your comments</textarea><br/><input type = “submit” value = “register”/><input type = “reset” value = “clear”/></form></body></html>Special character in HTML:This are those character which have special meaning withthe browser all these characters are not available in keyboard.1. 4 & lt; (4 < 5)2. 4 & gt; (4 > 5)3. ®4. ©5. ™6. Parsnd;Page | 14
- 15.7. &8. "inet solve & quot; “inet solve”9. &a pos; solutions & apos; “solutions”Xml: It’s transfer “Extensible Markup Language”. It is a markup language thatprovide environment to create cross platform compactable file. Cross platformcompatibility means it is not specific to any operating system, any H/W, any S/W andetc.. Xml is a standard given by ‘w3c’. To create tag based data.. Xml is called as “Mother language” using which we can create other markuplanguages. Like wml, vml, and mml etc.. Xml is use to store and describe the data. Data means meaningful andunderstandable information. Data can be stored in a text file or database or xml file.Text file: The text file can content formatted and unformatted data.. It doesn’t show any hierarchy among the data.. It doesn’t show any relationships b/w the values.. It doesn’t provide any tools to check or verify the correctness of the data.. The text files are some time depended on the output.Database: The database can content formatted data in the form of tables.. In a database we require a separate of a query language to operate on the data.. Database has to be used in language scale application.. That data in a database is specific to the database s/w.Xml: Xml document contents only formatted data.. Xml document shows hierarchy among the data.. Xml document is a cross platform document.. Xml provides tools like xml engine, xml parser to check verify to correctness of thedata in an xml document.. It doesn’t require any query language for manipulating the data.. Xml can use to store data in small scale application.HTML XML1. Html is use to display and formatthe data.1. Xml is use to store and describePage | 15
- 16.the data.2. Htmlcontains predefined tags. 2. Xml contains user defined tags.3. Html tags are not case sensitive. 3. Xml tags are case sensitive.4. Html is error and free language. 4. Xml is not an error free language.5. Html can be used to design webpages.5. Xml can be used to transfer datab/w in compatible.6. Html document can contentproper and improper nesting.6. Xml document can content onlyproper nesting.7. Html can be used to apply styleson the data.7. Xml can be use to structured thedata.Uses of xml:. Xml can be use to store the data permanently similar to a database.. Xml can be use to create other “Markup language”.. Xml can be use to create transfer data b/w incompatible types.. Xml can be use to configure the resources in a web applications.Ex: web.xml. Xml document provides some instructions for installing the software.Xml document preparation rules:1. Xml document must contain a root tag.2. Every xml tag must contain a starting tag and closing tag.3. Every xml tag can (optional) contain either child tags and attributes, child tagsor attributes.4. If a tag contains attribute then its value must be specified enclosed either insingle codes (‘‘) or the double codes (““).5. Xml tags are case sensitive (either lower/upper).6. Xml document must be properly nested.7. Xml tags can be empty.Page | 16
- 17.Element naming rules:1.An element naming can be combination of alphabets, digits and specialcharacters.2. The element name must not begin with a digit or a punctuation characters.Ex: (,*, # ….etc)3. The element name must be not beginning with xml.4. There is no restriction on the length of the element name. If it is containsmultiple words then separate them by underscore (_).Ex: <NAME_OF_THE_STUDENT>Well formed xml document:1. Xml document is said to be well formed if it satisfies both xml documentpreparation rules and elements naming rules.2. We can verify weather an xml document is well formed or not by using eitherxml engine or xml parser.3. To verify weather a xml document is well formed or not by using xml enginethen just open the xml document. In a browser, if the xml document isdisplayed as it is on the browser then it indicates that the xml document iswell formed other wise not well formed.4. Every browser by default contains xml engine as a inbuilt program.There are no reasons when to use a child tag or when to use attributes.It is recommended to presser child tags instead of attributes.Reasons for avoiding attributes:1. Attributes doesn’t show any hierarchy.2. Attributes doesn’t show any relationships.3. Attributes can’t contain multiple values.4. Attributes can’t expand in feature.5. Reading the attribute values while processing the xml document is a difficulttask.To create the rules for an xml document we use either xml DTD or XMLSCHEMA.XML DTD or XML SCHEMA will allow us to create the following set of rules.1. The tag name to be used.Page | 17
- 18.2. The attributename to be used.3. The number of occurrences a tag must be available.4. The type of data the tag or an attribute can contain.5. The root tag of the xml document.Valid xml document:Xml document is said to be a valid xml document if it satisfies xml documentpreparation rules, element naming rules and xml DTD or XML SCHEMA baseddocument preparation rules.Every valid xml document is a well formed xml document.XML DTD:It stands for xml document type definition. It is used to create rules for writing thexml document. It is provides legal building blocks using which we can define astructure for the xml document.The building blocks are:1. Element: This is the most important building block. This building block is usedto create tags. Which can contain some text, or it can contain some otherelement or it can be empty.2. Attribute: This building block is used to create attributes which are used toprovide additional information about the element. The attributes must be thespecified in the staring tags and they come in name value pairs, the attributevalue must be enclosed in single codes (‘‘) or double codes (““).3. Entity: this building block is used to create special characters that are to beused in an xml document.4. PcDATA (parsed character data): This data will be parsed by the parser andthey can expand the entities.5. CDATA: its stands for ‘character data’. This data will not be parsed by theparser and it can’t expand the entities.Declaring an element:1. Declaring an element which can be empty.Syn :<! ELEMENT element-name EMPTY>Page | 18
- 19.Ex :<! ELEMENTaddress EMPTY>2. Declaring an element which contains PCDATA.Syn: <! ELEMENT element-name (# PCDATA)>Ex: <! ELEMENT roll no (#PCDATA)>3. Declaring an element which can contain any dataSyn: <! ELEMENT element-name ANY>EX: <! ELEMENT name ANY>4. Declaring an element which contains sequence of child elements.Syn: <! ELEMENT element-name (child-name1, child-name2….)>Ex: <! ELEMENT student (roll no, name, mobile no, add)>5. Declaring an element which must occur exactly one time.Syn: <! ELEMENT element-name (child-name)>Ex: <! ELEMENT student (roll no)>6. Declaring an element which can occur zero or more times.Sys: <! ELEMENT element-name (child-name*)>Ex: <! ELEMENT student (mobile no*)>7. Declaring an element which must occur at least one time (one or more times).Sys: <! ELEMENT element-name (child-name+)>Ex: <! ELEMENT student (mobile no+>8. Declaring an element which must occur either 0 or 1 time.Sys: <! ELEMENT element-name (child-name?)>Ex: <! ELEMENT student (address?)>Declaring attributes:1. Declaring n attribute with a default value.Sys :<! ATTLIST element-name attribute-name attribute-type “default”>Ex :<! ATTLIST student course cDATA “xml”>2. Declaring an attribute which is mandatory.Sys :<! ATTLIST element-name attribute-name attribute-type #REAUIDED>Ex :<! ATTLIST student course cDATA #REAUIDED>3. Declaring an attribute which is optional.Sys :<! ATTLIST element-name attribute-name attribute-type #IMPLIED>Ex :<! ATTLIST student course cDATA #IMPLIED>4. Declaring an attribute whose value is fixed.Page | 19
- 20.Sys :<! ATTLISTelement-name attribute-name attribute-type #FIXED “value”>Ex :<! ATTLIST student fee cDATA #FIXED “3500”>5. Declaring an attribute containing an enumerated list.Sys :<! ATTLIST element-name attribute-name (en-value1, en-value2….)>Ex :<! ATTLIST student branch (cse |it | eee |ese)>Declaring an entity:1. Declaring an internal entity.Sys :<! ENTITY entity-name entity-value>2. Declaring an external entity.Sys :<! ENTITY entity-name SYSTEM URL>Rules to be prepared for writing a xml document which stores studentinformation.I. Create a tag by the name institute which should be the root tag.II. Create as student as child tag to institute which must be available at least onetime.III. Create roll no, name, mobile no, address as child tags to student tag.IV. The roll no and name tags must be present exactly 1 time.V. The mobile no tag can be available either 0 or 1 or more time.VI. The address tag must be available either 0 or 1 time.VII. Create hno, colony and city as child tags to address tag.VIII. The hno, colony, city must be available exactly 1 time.IX. Create course as an attribute to student tag as enumerated list of values.X. Create type as an optional attribute under student tag.XI. Create country as an attribute under address tag whose value is fixed.XML PARSER:To validate a xml document we required a xml parser. Xml parser is autility tool using which we can check where a xml document well format or not andvalid or not. Xml parser can even be used for processing the xml documents.Ex:SAX (Simple API XML Process)DOM (Document Object Model)Page | 20
- 21.Document Object modelfor Java (JDOM)IDE:It’s “transfer Integrated Development Environment”. It is used to speed of thedevelopment of an application. Where reduces the development time.Ex:XML SPYSTYLUS STUDIOProcedure to open XML SPY IDE: Click on start on select all program sales AlcoveClick on xml spy.Procedure to create DTD rules: Click on file menu select new itemselect DTD (Document Type Definition) click on OK.Rules:1. <!ELEMENT institute (student +)>2. <! ELEMENT student (rollno, name, mobileno*, address?>3. <!ELEMENT rollno (#pcDATA)>4. <!ELEMENT name (#pcDATA)>5. <!ELEMENT mobileno (#pcDATA)>6. <!ELEMENT address (hno,colony,city)>7. <!ELEMENT hno (#pcDATA)>8. <!ELEMENT colony (#pcDATA)>9. <!ELEMENT city (#pcDATA)>10.<!ATTLIST student course (java|.net|oracle|html) “html” >11.<!ATTLIST student type cDATA #IMPLIED>12.<!ATTLIST student country cDATA #FIXED “india”>Procedure to write a XML Document with external DTD rules:Click on file menu select new item select XML. (Extensible Markup langue)Select DTD, click on OK Browser for DTD file click on OK.1 <! DOCTYPE institute SYSTEM “D:studrules.dtd”>2 <institute>3 Student course = “html” Type = “inspector”>Page | 21
- 22.4 <rollno>123</rollno>5 <name>Rams</name>6<mobileno>9949139899</mobileno>7 <mobileno>8887776663</mobileno>8 <address country = “india”>9 <hno>2/202</hno>10 <colony>nawabpet</colony>11 <city>bond</city>12 </address>13 </student>14 </institute>Procedure to create a XML document containing internal DTD rules:Click on file menuSelect new itemSelect XML (Extensible Markup Language)Click on OKClick on cancel<! DOCTYPE institute [<! ELEMENT institute (student +)>...{same as previous rules}..<! ATTLIST address country cDATA #FIXED “india”>]><institute><student course = “html” Type = “inspector”>...{same as previous rules}.Page | 22
- 23..</student></institute>XML SCHEMA:1. XMLSCHEMA is used to define structure of the XML document.2. XML SCHEMA is a XML based alternative to DTD.3. XML SCHEMA is successor to XML DTD.4. XML SCHEMA is written in XML.5. XML SCHEMA provides more Richer and powerful functionality.6. XML SCHEMA supports data types and data types.7. We can create our own user defined data types based on predefined datatypes.8. XML SCHEMA supports name spaces.In XML schema we have two types of elements.A. Simple elementB. Complex element1. Simple element:An element is said to be simple if it contains only text. Itshouldnot contain some other element or attributes.Syn:<xs: element name = “xxx” type = “yyy”/>Here xxx represent the name of the element and yyy represent the type of thedata.Ex:<xs: element name = “mobileno” type = “xs: integer”/><xs: element name = “xxx” type = “yyy” default = “value”/><xs: element name = “xxx” type = “yyy” fixed = “value”/>2. Complex element:An element is said to be complex if it contains some childelement and attributes or attributes.Ex:Page | 23
- 24.<xs: element name= “xxx”><xs: complexType><xs: sequence><xs: element name = “x1” type = “y1”/><xs: element name = “x2” type = “y2”/></xs: sequence></xs: complexType></xs: element>Here, xxx represents the name of the complex element name x1 and x2 representname of the child elements any y1 and y2 represents the type of x1 and x2respectively. Here, x1 and x2 order can’t be changed x1 must be followed by the x2only.Order Indicators:1. Sequence: This indicator will indicate that specifying all the child elements ismandatory and the order is fixed.2. All: This indicator will indicate that specifies the child elements are mandatorybut order of the elements can be changed.3. Choices: These indicators will indicate that we can use specifying that we canuse any one of the child element.Occurrence indictors:1. Minoccurs: This indicator will specify the minimum no. of times a tag orelement must occur.2. Maxoccurs: This indicator will specify the maximum no. of times an elementcan (optional) occurs.Attributes:Syn:<xs: attribute name = “xxx “ Type = “yyy “/><xs: attribute name = “course“Type = “xs: string“default = “xml”/><xs: attribute name = “course“Type = “xs: string“default =”xml”/><xs: attribute name = “course” Type = “xs: string “fixed=”java”/>Page | 24
- 25.<xs: attribute name= “course” Type = “xs: string“use=”optional/required”/>Restrictions: These restrictions allow the user to define acceptable values in a xmldocument. The restrictions on xml elements are called as “facets”.1. Restrictions on set of values:Ex:<xs: element name=”Marks”><xs: SimpleType><xs: restriction base=”xs:integer”><xs: minInclusive value=”10”/><xs:maxInclusive value=”100”/></xs:restriction></xs: SimpleType></xs: element>If we use minInclusive and maxInclusive the extremes values will be includedinto the range.Instead of minInclusive and maxExclusive we can use minExclusive andmaxExclusive where the Extreme values will not be Included.2. Restrictions on List of values:Ex:<xs: element name = “branch”><xs: simpleType><xs: restriction base = “xs: string”><xs: enumeration value = “cse”/><xs: enumeration value = “it”/><xs: enumeration value = “mca”/><xs: enumeration value = “ece”/></xs: restriction></xs: simpleType></xs: element>Page | 25
- 26.3. Restrictions onseries of values:<xs: element name = “xxx”><xs: simpleType><xs: restriction base = “yyy”><xs: pattern value = “([a-z]+)”/></xs: restriction></xs: simpleType></xs: element>The above pattern allow the user to enter the data of lengththreecharacters, where every character lowercase alphabet.Note: Every pair of [] represents one character.<xs: pattern value = “[abcd]/>The above syntax allow to enter a data of length one character where that charactercan be either ‘a’ or ‘b’ or ‘c’ and ‘d’.<xs: pattern value = “[0-9][0-9][0-9][0-9]”/>The above pattern will allow the user to enter a data of length of data 4 characterwhere each character should be a digit.<xs: pattern value = “([a-z])*”/>The above syntax will allow the user to enter a data of any length but everycharacter should be a lower case alphabet.<xs: pattern value = “([a-z][A-Z])+”/>The above pattern will allow the user to enter a data containing one or more pairs oflower case and the upper case alphabets respectively.<xs: pattern value =”[0-9]{10}”/>The above pattern will allow the user to enter a data of length exactly 10 characterwhere every should be a digit.Page | 26
- 27.4. Restrictions onlength of the data:<xs: pattern value =” ([a-zA-Z0-9@#$ %])*/><xs: minLength value=”6”/>The restriction will allow the user to enter a data whoseminimum length should be ‘6’ characters.<xs: pattern value = “([a-z A-Z @ # % $])*”/><xs: maxLength value = “20”>This restriction will allow the user to enter a data whose maximum length can be upto ‘20’ characters.<xs: length value = “10”/>This restriction will allow the user to enter data whose length is exactly ‘10’characters.Procedure Create a Document Containing Schema Based Rules:Click on file menu select new select xsd (w3c XML SCHEMA) click on OK.1. <xs: schema xmlns: xs=”http://www.w3.org/2001/XML Schema”>2. <xs: element name = “institute”>3. <xs: complexType>4. <xs: sequence>5. <xs: element name=“student” minoccurs = “1” maxoccurs = “60”>6. <xs: complexType>7. <xs: sequence>8. <xs: element name=“rollno” maxoccurs=“1” minoccurs=”1”>9. <xs: simpleType>10.<xs: restriction base = “xs: integer”>11.<xs: pattern value = “[0-9][0-9][0-9]”>12.</xs: restriction>13.</xs: simpleType>14.</xs: element>15.<xs: element name = “name” maxoccurs = “1” minoccurs = “1”>16.<xs: simpleType>17.<xs: restriction base = “xs: string”/>Page | 27
- 28.18.<xs: pattern value= “([a-zA-Z])*”/>19.<xs: minLength value = “4”/>20.<xs: maxlength value = “10”/>21.</xs: restriction>22.</xs: simpleType>23.</xs: element>24.<xs: element name = “mobileno” minoccurs = “2” maxoccurs = “5”>25.<xs: simpleType>26.<xs: restriction base = “xs:integer”>27.<xs: pattern value = “[789][0-9]{9}”/>28.</xs: restriction>29.</xs: simpleType>30.</xs: element>31.<xs: element name = “address”>32.<xs: complexType>33.<xs: all>34.<xs: element name = “hno” type = “xs: string”/>35.<xs: element name = “colony” type = “xs: string”/>36.<xs: element name = “city” type = “xs: string”/>37.</xs: all>38.<xs: attribute name = “country” fixed = “india”/>39.</xs: complexType>40.</xs: element>41.</xs: sequence>42.<xs: attribute name =”course” use = “required”>43.<xs: simpleType>44.<xs: restriction base = “xs: string”>45.<xs: enumeration value = “html”/>46.<xs: enumeration value = “xml”/>47.<xs: enumeration value = “java”/>48.<xs: enumeration value = “oracle”/>49.</xs: restriction>50.</xs: simpleType>51.</xs: attribute>Page | 28
- 29.52.<xs: attribute name= “type” use =”optional” type = “xs: string” default =“regular”/>53.</xs: complexType>54.</xs: element>55.</xs: sequence>56.</xs: complexType>57.</xs: element>58.</xs: schema>Procedure to write a xml document following schema based rules:1. Click on file menu select new item select xml click on OK.2. Select schema click on OK browse for.xsd file & click on OK.<institute xmlns: xsi = “http/www.w3.org/2000/xml schema-instance”Xsi : noName space schemaLocation = “D:rules.xsd”>...</institute>Page | 29Save as rules.xsd
- 30.Java script:1. Javascript is the most popular scripting language used one the internet. It’sworks all the browsers. Like internet Explorer, Firefox, Chrome etc.2. Java script is designed to interact with the html document.3. Java script code can be embedded into the html documents.4. Java script is an interpreted language.Note:Java and java script are two different language designed for two differentpurpose.Uses of java script code:1. Java script can be used to place dynamic content in the html document.2. Java script can be used to read and modify the content of an html element.3. Java script can be used to validate the form data before it is submitted to theserver. This is called as “client side validations”.4. Java script can be used to detect the user’s browser at runtime.5. Java script can be used to store and retrieve the information from the clientsmachine.6. Java script can react to events.7. To write the java script code in the html document. We have to use <script>.The java script code has to place in b/w <script> only.8. To specify the <script> contains java script code. We take help of typeattribute must be <script type = “text/JavaScript”>9. The <script> can be placed either in head section or body section or bothsections.Page | 30
- 31.Ex:<html><head><title>java script</title></head><body><script type= “text/java script”>document.write(“welcome to my web site”);</script></body></html>The document.write is the standard JavaScript command to display a messageon the browser. The data which is specified in side the write function will bedisplayed as it is on the browser.Java script statements:The statements are the commands to the browser. The purpose of the statement isto tell a browser what to do. The java script statements can be a terminated by a (;)semi colon.Java script comments:The comments are used to explain the code or make the code more readable thecomments are non-executable statements ignored by the browser. They are twotypes of commands.1. Single line comment //this is a single line comment2. Multi line comments /*……….*/Java script functions:When a java script code is written inside a <script> it will be executed immediately.When the html document is loaded on to the browser but some times we want to dothis we need to take this support of a function.Syn:Function function-name (Value1, Value2…) {Statements to be executedPage | 31
- 32.}Ex:<html><head><script type =“text/JavaScript”>Function display (){document.writen (“good afternoon”);}</script></head><body onload = “didplay ()”></body></html>Java script variables:The variables can be used to hold a value or and expression. The variable name mustbegin with either an alphabet or an underscore symbol.Java script doesn’t contain any data types. To declare a variable in the java script weare use ‘Var’ (variable).A variable of java script can contain any kind of data and the string data must beenclose in (““) double codes.Ex:<head><script type = “text/java script”>var x = 10;var y = 20.50;var z = x + y;var name = “java”;document.write (“sum of =” + w);</script></head>Java script operators:1. Arithmetic operators:Page | 32
- 33.These operators areused to perform then mathematicalcalculations. The various Arithmetic operators are Addition (+), Subtraction (-),Multiplication (*), Division (/), Modules (%), Increment (++), and Decrement(--)2. Relational operators:These operators are used for comparing the values. Theseoperators can also be called as comparison operators. The various relationaloperators are less than, less than are equals, grater than, grater than areequal,equals, not equals (<, <=, >, >=, ==, !=).3. Logical operators:These operators are used to combine the conditions or usedto compliment the result. The various logical operators are AND (&), OR (|),and NOT (!).4. Conditional operators:This operator is also called as ternary operator and it isused to perform some operators based on a condition. The conditionaloperator is?and ; (question mark, semicolon).Ex:first = (x>y)? x:y;if (x>y)first = x;elsefirst = y;5. Assignment operators:This operator is used to assign a value to a variable. Thevarious assignment operator are assignment (=), compound assignmentoperators (+=, -=, *=, /=, %=).Popup boxes:Page | 33
- 34.1. Alert box:Thisbox is used to display a message on the browser which must becompulsory read by user.Syn:alert (message);The alert box will not allow the user provide for the until the user read themessage click on OK button.2. Prompt box:This box allows the user to enter some of the information.Syn:prompt (message);Syn:Prompt (message, default-value)The prompt be contains two buttons OK and CANCEL if theuser can click on OK button then it will read the available in the prompt box. If theuser can click on CANCEL button then it will display null value for example.<html><head><script type = “text/JavaScript”>var n = prompt(“enter a number”, “4567”);document.write(“n=” + n);</script></head><body></body></html>3. Confirm box:This box is used to take the confirmation from the user.Syn:confirm(message);Page | 34
- 35.The confirm boxcontains two buttons OK and CANCEL. When the userclick on OK button it return is true. When the use click on CANCEL button itreturns false.Ex:<html><head><title>pop up boxes</title></head><body><Script type = “text/JavaScript”>var status = confirm(“do you want to sleep”);document.write(status);</script></body></html>Conditional statements:These statements are used to execute a group ofstatements based on a condition.1. If statement:This statement will execute a group of statements when acondition is true.Syn:If (condition){Statements to be executed}<html><head><title>conditional statement</title></head><body><script type = “text/JavaScript”>if(1 < 2)Page | 35
- 36.{document.write(“Hello”);}</script></body></html>2. if-else statement:Ifthe condition is true than if block is executed and when condition is falseelse block is executed.Syntax:if (condition){Statement1}else{Statement2}Ex:<html><head><title>conditional statement</title></head><body><script type = “text/JavaScript”>if(1 – 2){document.write(“1 is smaller”);}else{document.write(“1 is bigger”);Page | 36
- 37.}</script></body></head>3. switch statement:Thisstatement is used to execute an option from a group ofoption from a group of options that are available.Syn:Switch (expression){case value1 : statement1;break;case value2 : statement2;break;case value3 : statement3;break;case value4 : statement4;break;default : default statement;}Ex:<html><head><title>conditional statement</title></head><body><script type = “text/JavaScript”>var x = parseInt (prompt(“Enter a number”));switch(x){case1 : document.write(“one”);break;case2 : document.write(“two”);Page | 37
- 38.break;case3 : document.write(“three”);break;case4: document.write(“four”);break;default: document.write(“wrong choice”);}</script></body></html>Iterating statements: These statements are used to execute a group of statementsmultiple times.1. For loop:This statement has to be used when we known the exact number of iterations.Syn:for(initialization; condition; increment/decrement){Statements to be executed}Ex:<html><head><title>Iterating statements</title></head><body><script type = “text/JavaScript”>var fact = 1;for(x=1; x<=10; x++){fact = fact * x;document.write(x+”!=” +fact+ “</br>”);}</script></body></html>Page | 38
- 39.2. While loop:Thisloop must be used when we do not know the exact no. ofiterations.Syn:while(condition){Statements to be executed}Ex:<html><head><title>iterating statement</title></head><body><script type = “text/JavaScript”>var n = parseInt(prompt(“Enter a table number”));var x = parseInt(prompt(“Enter an other number”));var i = 1;while(i<=x){document.write(n + “*” +i + “=” +(n*i) +”<br/>”);i++;}</script></body></html>3. Do…..while loop:This loop has to be used when we do not know the exact number of iterations.Syn:do{Page | 39
- 40.Statements to beexecuted} while (condition);Difference b/w while and do….while loop?:In a while loop if the condition is false for the 1sttime then statements will beexecute “zero times”.In a do….while loop if the condition is false for the 1sttime statement will beexecute for “one time”.Ex:<html><head><title>iteration statements</title></head><body><script type = “text/JavaScript”>n = praseInt(prompt(“Enter a table number”));x = parseInt(prompt(“Enter an other number”));var i = 1;do{document.write(n + “*” +i+ “=” +(n*i) + “<br/>”);i++;}while(i<=x);</script></body></html>JavaScript objects:JavaScript can be considered as an object oriented language, itallows the user to use predefined objects or create user defined objects.An object is a kind of data which contains properties and methods. Properties areused to hold the values of an object and the methods represent the Actions that areperformed by the object.1. String object:Page | 40
- 41.If the userencloses any data in “double codes” than it is considered as stringobject.Ex:<html><head><title>JavaScript objects</title></head><body><script type = “text/JavaScript”>var type = “javascript”;document.write(text +”<br/>”);document.write(text.lenght +”<br/>”);document.write(text.toUpperCase() +”<br/>”);document.write(text.toLowerCase() +”<br/>”);document.write(text.indexOf(“a”) +”<br/>”);document.write(text.lastIndexOf(“a”) +”<br/>”);document.write(text.replace(“java”,”VB”) +”<br/>”);document.write(text.fontcolor(“red”) +”<br/>”);</script></body></html>2. Date object:This object is used to perform operations on data and time.Ex:<html><head><title>date object</title></head><body><script type = “text/JavaScript”>var date = new Date();document.write(date + “<br/>”);document.write(date.getDate() + “<br/>”);document.write(date.getMonth() + “<br/>”);document.write(date.getfullYear() + “<br/>”);Page | 41
- 42.document.write(date.getHouse() + “<br/>”);document.write(date.getMinutes()+ “<br/>”);document.write(date.getSeconds() + “<br/>”);</script></body></html>3. Boolean object: This object represents either true or false. Based on the valuewe pass to the boolean object.Ex:<html><head><title>Boolean object</title></head></body><script type = “text/javascript”>var b1 = new Boolean();var b2 = new Boolean(0);var b3 = new Boolean(1);var b4 = new Boolean(true);var b5 = new Boolean(false);var b6 = new Boolean(“ “);var b7 = new Boolean(“html”);var b8 = new Boolean(null);document.write(b1 + “<br/>”);document.write(b2 + “<br/>”);document.write(b3 + “<br/>”);document.write(b4+ “<br/>”);document.write(b5+ “<br/>”);document.write(b6+ “<br/>”);document.write(b7+ “<br/>”);document.write(b8+ “<br/>”);</script></body></html>Page | 42
- 43.4. Array object:Thisobject is used to value store multiple values into a single variable.Ex:<html><head><title>Array Object</title></head><body><script type = “text/javascript”>var names = new Array();names[0] = “john”;names[1] = “Khan”;names[2] = “Zhan”;names[3] = “Mallikarjuna”;names[4]= “Suneel”;document.write(names + “<br/>”);for(i=0; i<names.length;i++);{Document.write(names[i] +”<br/>”);}document.write(names.reverse() +”<br/>”);document.write(names.sort() +”<br/>”);</script></body></html>5. Math object: This object is used to perform mathematical operations.Ex:<html><head><title>Math Object</title></head><body><script type = “text/javascript”>document.write(Math.min(4,6) + “<br/>”);Page | 43
- 44.document.write(Math.max(4,6) + “<br/>”);document.write(Math.floor(4.5)+ “<br/>”);document.write(Math.ceil(4.5) + “<br/>”);document.write(Math.round(4.5) + “<br/>”);document.write(Math.sqrt(a) + “<br/>”);document.write(Math.random() + “<br/>”);document.write(Math.PI + “<br/>”);</script></body></html>Javascript events:Events are the actions that can be identified by javascript theevents will be generated automatically based on the user operations to perform anyoperation when an event is generated. We generally take the help of functions.1. onclick: This event will be generated when the user performs simple click.2. ondblclick: This event will be generated when the user performs double click.3. onkeydown: This event will be generated when the user clicks on a key andnot at released.4. onkeyup: This event will be generated when the key is released.5. onkeypress: This event will be generated when the key is pressed andreleased.6. onmouse down: This event will be generated when the user click on themouse left button and not at released.7. onmouseup: This event will be generated when the mouse click is released.8. onmousemove: This event will be generated when there is a change in themove location.9. onmouseover: This event will be generated when the mouse pointer is placedon top of a text or image and etc.10.onmouseout: This event will be generated when the mouse pointer isremoved from the top of a text or image and etc.Page | 44
- 45.11.onload: This eventwill be generated when the html document is loaded on tothe browser.12.onunload: The event will be generated when the html document is removedfrom the browser.13.onfocus: This event will be generated when the html element has the control.14.onsubmit: This event will be generated when the user clicks on the submitbutton.15.onreset: This event will be generated when the user clicks on the reset button.16.onchange: This event will be generated when there is a change in the value ofthe HTML element an change.17.onerror: This event will be generated when an error occurs in the document.18.onresize: This event will be generated when there is a change in the size ofthe frame.//javascript<html><head><title>Events</title><script type = “text/javascript”>Function change(){var name = myform.user.value;var col = myform.color.value;document.bgcolor = col;alert(name + “has changed the backgroundcolor to” + col);}</script></head><body><form name = “myform”>UserName<input type = “text” size = “25” name = “user”/> <br/>color<input type = “text” size = “25” name = “color”/><br/><input type = “button” value = “change” onclick = “change()”/></form>Page | 45
- 46.</body></html>//client side validations<html><head><title>Events</title><scripttype = “text/javascript”>function validate(loginform){var name = loginform.user.value;var pwd = loginform.pass.value;var data = /w/;if(name.length==0){alert(“ Enter your user name”);loginform.user.focus();return false;}else if((name.length<6) || (name.length>15)){alert(“user name length is not valid”);loginform.user.focus();return false;}else if(data.test(name)){alert(“user name character are not valid”);loginform.user.focus();return false;}if(pwd.length==0){alert(“Enter your password”);Page | 46
- 47.loginform.pass.focus();return false;}}</script></head><body bgcolor= “cyan”><center><h1>Loginform</h1><form name = “loginform” onsubmit = “return validate(this)”>UserName<input type = “text” name = “user” size = “30”/><br/>password<input type = “password” name = “pass” size = “30”/> <br/><input type = “submit” value = “Login”/></from></center></body></html>We can write the javascript code internal to the html document or external to thehtml document.function validate(loginform){…….……………………….. //………………….……………………….}To include the external javascript into a html document. We take help of “src”attribute of <script><script type = “text/javascript” src = “validation.js></script>Page | 47Save asvalidation.js
- 48.CSS: its standsfor “cascading style sheets”. CSS is used to define styles how todisplay the html element. The styles how to display the html element.1. Inline styles2. Internal styles3. External styles1. Inline styles: If the styles are specified inside the tag then styles are calledas inline styles. These styles are applied to only that tag in which they arespecified.Ex:<h1 style = “color:blue; text-align:center;”> XYZ ltd </h1><h1 style = “color:red; font-family: arial;”> ABC LTD </h1><p style = “color:blue; font-style: italic; margin-left: 45t;”> this is a para</p><p style = “font-size: 22pt;”> second para</p><hr style = “color:green;”/>2. Internal styles: If the styles are specified with in the html document byusing <style> then those styles are called as internal styles. The internalstyles will be applied to all the tags available in that html document.Ex:Page | 48
- 49.<html><head><title>CSS</title><style type =“text/css”>a:hover{color:red;font-size:200%;}P{color:green;font-family:arial;}h1{color:brown;font-size:22pt;}body{backgroung-color:cyan;}</style></head><body></body></html>3. External Style:If the styles are specified out side the html document thenthose styles are called as external styles. The styles available externally canbe applied to all the tags available in multiple html documents.The external styles stored out side the html document. Must be saved withany name (.) dot having.css as the extension.Page | 49
- 50.Ex:P{color:green;font-family:arial;}h1{color:brown;font-size:22pt;}To use externalstyle sheets within the html document we take help of <link>. The<link> must be specified in the need section of the html document.Syn:<link type = “text/css” rel = “stylesheet” href = “styles.css”/>In the html document we can write all the types of styles. But the preferencefollowed by the browser in displaying the html elements is1. Inline styles2. Internal styles3. External styles4. Browser Default stylesPage | 50Styles.css
- 51.
- 52.