UNIT I

Introduction:
HTML stands for Hypertext Markup Language. It is used to display the document in the
web browsers. HTML pages can be developed to be simple text or to be complex
multimedia program containing sound, moving images and ava applets. HTML is
considered to be the global publishing format for Internet. It is not a programming
language. HTML was developed by Tim !erners"Lee. HTML standards are created by a
group of interested organi#ations called $%& 'world wide web consortium(. In HTML
formatting is specified by using tags. ) tag is a format name surrounded by angle
brackets. *nd tags which switch a format off also contain a forward slash.
+oints to be remembered for HTML tags,
Tags are delimited by angled brackets.
They are not case sensitive i.e., -head., -H*)/. and -Head. is e0uivalent.
If a browser not understand a tag it will usually ignore it.
1ome characters have to be replaced in the text by escape se0uences.
$hite spaces, tabs and newlines are ignored by the browser.
Structure of an HTML document:
)ll 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 the actual user information that is to be
displayed on the screen. The basic document is shown below.
-html.
-head.
-title. !asic HTML document -2title.
-2head.
-body.
-h3. $elcome to the world of $eb Technologies-2h3.
-p. ) sample HTML program written by )mer -2p.
-2body.
-2html.
!esides head and body tag, there are some other tags like title, which is a sub tag of head,
that displays the information in the title bar of the browser. -h3. is used to display the
line in its own format i.e., bold with some big font si#e. -p. is used to write the content
in the form of paragraph.
&omments in HTML documents start with -4 and end with .. *ach comment can
contain as many lines 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.
-4 "" this is a comment line " "
"" which can have more lines " ".
Basic HTML tags
3. !ody tag ,
!ody tag contain some attributes such as bgcolor, background etc. bgcolor is
used for background color, which takes background color name or hexadecimal
number and 5666666 and background attribute will take the path of the image
which you can place as the background image in the browser.
-body bgcolor785696%6:8 background7 ;c,<amer<imag3.gif8.
9. +aragraph tag,
Most text is part of a paragraph of information. *ach paragraph is aligned to the
left, right or center of the page by using an attribute called as align.
-p align78left8 = ;right8 = ;center8.
%. Heading tag,
HTML is having six levels of heading that are commonly used. The largest
heading tag is -h3. . The different levels of heading tag besides -h3. are -h9.,
-h%., -h:., -h>. and -h?.. These heading tags also contain attribute called as
align.
-h3 align78left8 = ;right8 = ;center8. . . . . -h9.
:. hr tag,
This tag places a hori#ontal line across the system. These lines are used to break
the page. This tag also contains attribute i.e., width which draws the hori#ontal
line with the screen si#e of the browser. This tag does not re0uire an end tag.
-hr width78>@A8..
>. base font,
This specify format for the basic text but not the headings.
-basefont si#e783@8.
?. font tag,
This sets font si#e, color and relative values for a particular text.
-font si#e783@8 color785f3f9f%8.
B. bold tag,
This tag is used for implement bold effect on the text
-b. CC. -2b.
D. Italic tag,
This implements italic effects on the text.
-i.CC.-2i.
E. strong tag,
This tag is used to always emphasi#ed the text
-strong.CCC.-2strong.
3@. tt tag,
This tag is used to give typewriting effect on the text
-tt.CC..-2tt.
33. sub and sup tag,
These tags are used for subscript and superscript effects on the text.
-sub. CCC.-2sub.
-sup.CCC..-2sup.
39. !reak tag,
This tag is used to the break the line and start from the next line.
-br.
3%. Famp Flt Fgt Fnbsp F0uot
These are character escape se0uence which are re0uired if you want to display
characters that HTML uses as control se0uences.
*xample, - can be represented as Flt.
3:. )nchor tag,
This tag is used to link two HTML pages, this is represented by -a.
-a href78 path of the file8. some text -2a.
href is an attribute which is used for giving the path of a file which you want to
link.
Example 1: HTML code to implement common tags.
mpage!"tml
-html.
-head. -4 "" This page implements common html tags "".
-title. My Home page -2title.
-2head.
-body .
-h3 align7GcenterG. HI**J 6KIT *JHIJ**IIJH &KLL*H*-2h3.
-h9 align7GcenterG. !andlaguda, Hyderabad-2h9.
-basefont si#e7:.
-p. This college runs under the -tt.management-2tt. of -font si#e7>. -b.-i.F0uot
1yed Hashim *ducation 1ocietyF0uot Famp it is-2i.-2b.-2font.-br.
affiliated to -strong. LJTM-2strong.
-hr si#e7> width7D@A.
-h%. -u.Flt1ome common tagsFgt-2u. -2h%.-br.
-a href7G6,<fero#<wtlab<prog3<list.htmlG. List -2a.-br.
-a href7G6,<fero#<wtlab<prog3<table.htmlG. Table -2a.-br.
-2body.
-2html.
Lists:
Kne 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 readable structures. The different tags used in lists are
explained below.
-li. C..-2li.
The ordered'numbered( and unordered'bulleted( lists are each made up of sets of list
items. This tag is used to write list items
-ul type78disc8 = ;s0uare8 = 8circle8 . C..-2ul.
This tag is used for basic unordered list which uses a bullet in front of each tag, every
thing between the tag is encapsulated within -li. tags.
-ol type7838 = 8a8 = ;I8 start78n8.C..-2ol.
This tag is used for unordered list which uses a number in front of each list item or it uses
any element which is mentioned in the type attribute of the -ol. tag, start attribute is used
for indicating the starting number of the list.
-dl.C.. -2dl.
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 uses definition for the items.
-dt.C..-2dt.
This is a sub tag of the -dl. tag called as definition term, which is used for marking the
items whose definition is provided in the next data definition.
-dd. C.-2dd.
This is a sub tag of the -dd. tag, definition of the terms are enclosed within these tags.
The definition may include any text or block.
Example #, HTML code showing list tags.
-html.
-head.
-title. list page -2title.
-2head.
-body.
-h%. &ourse details -2h%.-br.
-ul type7GdiscG.
-li. &omputer 1cience and *ngineering -2li.
-li. Information Technology-2li.
-li. *lectronics and &ommunication -2li.
-2ul.-br.
-ol type7GIG start7:.
-li. Mechanical *ngineering-2li.
-li. *lectronics and *lectrical *ngineering-2li.
-2ol.-br.
-h%. 1ubect /etails -2h%.-br.
-dl.
-dt. $eb Technologies-2dt.
-dd. This subect is related to the technologies used in web applications-2dd.
-2dl.
-a href7Gd,<fero#<gfec<wtlab<asgm3.htmlG.back-2a.
-2body.
-2html.
Ta$les:
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 to structure the whole web page. !elow are some of the tags used in
table.
-table align78center8 = ;left8 = ;right8 border78n8 width78nA8 cellpadding78n8
cellspacing78n8.CCCCCC-2table.
*very 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. &ell 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. $idth attribute sets the amount of screen that table will use.
-tr. C.. -2tr.
This is the sub tag of -table. tag, each row of the table has to be delimited by these tags.
-th.CC-2th.
This is again a sub tag of the -tr. tag. This tag is used to show the table heading .
-td.C..-2td.
This tag is used to give the content of the table.
Example %: HTML code showing the use of table tag
-html.
-head.
-title. table page-2title.
-2head.
-body.
-table align7GcenterG cellpadding7G9G cellspacing7G9G border7G9G.
-caption.Time for III year IT-2caption.
-tr.-th. I period -2th.
-th. II peiord. -2th.
-2tr.
-tr.
-td. wt -2td.
-td. uml-2td.
-2tr.
-2table.
-2body.
-2html.
&olor and Image:
&olor can be used for background, elements and links. To change the color of links or of
the page background hexadecimal values are placed in the -body. tag.
-body bgcolor 7 ;5nnnnnn8 text 7 ;5nnnnnn8 link7 ;5nnnnnn8 vlink7 ;5nnnnnn8 alink
7 ;5nnnnnn8.
The vlink attribute sets the color of links visited recently, alink the color of a currently
active link. The six figure hexadecimal values must be enclosed in double 0uotes and
preceded by a hash'5(.
Images are one of the aspect of web pages. Loading of images is a slow process, and if
too many images are used, then download time becomes intolerable. !rowsers display a
limited range of image types.
-body background 7 ;MIL8.
This tag will set a background image present in the MIL.
)nother tag that displays the image in the web page, which appears in the body of the
text rather than on the whole page is given below
-img src78MIL8 height78n8 width78n8 align 7 ;top8 = ;center8 = ;bottom8 .
Example ': HTML code that implements color and image
-html.
-head. -4 "" This page implements color and image "".
-title. My Home page -2title.
-2head.
-body bgcolor7GgrayG text7GmagnetaG vlink7GyellowG alink7GbrownG.
-img src7 8d,<fero#<gfec<wtlab<asgm3.gif8.
-2body.
-2html.
Example (: HTML code that implements background image
-html.
-head. -4 "" This page implements background image "".
-title. My Home page -2title.
-2head.
-body background78d,<fero#<gfec<wtlab<asgm3.gif G.
-2body.
-2html.
)rames:
6rames provide a pleasing interface which makes your web site easy to navigate. $hen
we talk about frames actually we are referring to frameset, which is a special type of web
page. The frameset contains a set of references to HTML files, each of which is
displayed inside a separate frame. There are two tags related to frames i.e., frameset and
frame
-frameset cols78 A , A8 = rows78 A , A8.CC..-2frameset.
-frame name78name8 src78filename8 scrolling 78 yes8 = ;no8 frameborder 78@8=838.
)orms:
6orms are the best way of adding interactivity of element in a web page. They are
usually used to let the user to send information back to the server but can also be used to
simplify navigation on complex web sites. The tags that use to implement forms are as
follows.
-forms action78MIL8 method 7 ;post8 = ;get8.CC.-2form.
$hen get is used, the data is included as part of the MIL. The post method encodes the
data within the body of the message. +ost can be used to send large amount of data, and it
is more secure than get. The tags used inside the form tag are,
-input type 7 ;text8 = ;password8 = ;checkbox8 = ;radio8 = ;submit8 name78string8
value78string8 si#e78n8.
In the above tag, the attribute type is used to implement text, password, checkbox, radio
and submit button.
Text, It is used to input the characters of the si#e n and if the value is given than it is used
as a default value. It uses single line of text. *ach component can be given a separate
name using the name attribute.
+assword, It works exactly as text, but the content is not displayed to the screen, instead
an N is used.
Iadio, This creates a radio button. They are always grouped together with a same name
but different values.
&heckbox, It provides a simple checkbox, where all the values can be selected unlike
radio button.
1ubmit, This creates a button which displays the value attribute as its text. It is used to
send the data to the server.
-select name78string8.C..-2select.
This tag helps to have a list of item from which a user can choose. The name of the
particular select tag and the name of the chosen option are returned.
-option value78string8 selected.CC-2option.
The select statement will have several options from which the user can choose. The
values will be displayed as the user moves through the list and the chosen one returned to
the server.
-textarea name78string8 rows78n8 cols78n8.CC.-2textarea.
This creates a free format of plain text into which the user can enter anything they like.
The area will be si#ed at rows by cols but supports automatic scrolling.
Example *, HTML code that implements forms
-html.
-head.
-title.form-2title.
-2head.
-body.
-p align7GleftG.Jame,-input type7GtextG maxlength7%@ si#e73>.
-p align7GleftG.+assword,-input type7GpasswordG maxlenght73@ si#e73>.
-p align7GleftG.Oualification, -br.-input type7GcheckboxG name7G0G value7GbeG.!.*
-input type7GcheckboxG name7G0G value7GmeG.M.*
-p align7GleftG.Hender,-br. -input type7GradioG name7GgG value7GmG.Male
-input type7GradioG name7GgG value7GfG.6emale
-p align7GleftG.course,-select name7GcourseG si#e73.
-option value7cse selected.&1*
-option value7it.&1IT
-2select.
-p align7GleftG.)ddress,-br.-textarea name7GaddrG rows7: cols7>
scrolling7yes.-2textarea.
-p align7GcenterG.-input type7GsubmitG name7GsG value7G)cceptG.
-p align7GcenterG.-input type7GresetG name7GcG value7GIgnoreG.
-2body.
-2html.
Example +, HTML code that implements frames
-html.
-head.
-title. My page -2title.
-2head.
-frameset rows7G9>A,>@AG.
-frame name7GaG src7Gf,<fero#<wtlab<asgm3.htmlG.
-frameset cols7G9>A,>@AG.
-frame name7GbG src7Gf,<fero#<wtlab<index.htmlG.
-frame name7GabcG src7Gf,<fero#<wtlab<welcome.htmlG.
-2frameset.
-2frameset.
-2html.
&ascading Stles"eets:
Kne of the most important aspects of HTML is the capability to separate presentation and
content. ) style is simply a set of formatting instructions that can be applied to a piece of
text. There are three mechanisms by which we can apply styles to our HTML
documents.
1tyle can be defined within the basic HTML tag.
1tyle can be defined in the -head. tag
1tyles can be defined in external files called stylesheets which can then be used in
any document by including the stylesheet via a MIL.
) style has two parts, a selector and a set of declarations. The selector is used to
create a link between the rule and the HTML tag. The declaration has two parts, a
property and a value. /eclarations must be separated using colons and terminated
using semicolons.
1electorPproperty, valueQ property, value CC.R
,roperties and -alues in stles:
)onts:
6ont"family, -family name.
6ont"style, normal = italic = obli0ue
6ont"weight, normal = bold = bolder = lighter
6ont"si#e, small = medium = large = smaller = larger
Bac.grounds and &olors
&olor, value
!ackground"color, value
!ackground"image, MIL
Text
Text"decoration, none = underline = overline
Text"transformation, none = uppercase = lowercase
Text"align, left = right = center = ustify
Text"indentation , length = percentage
Example +: HTML code representing cascading style sheet
-html.
-head.
-title.My $eb +age-2title.
-style type7Gtext2cssG.
h3Pfont"family,mssanserifQfont"si#e,%@Qfont"style,italicQfont"
weight,boldQcolor,redQbackground"color,blueQborder,thin grooveR
.mPborder"width,thickQborder"color,redQborder"style,dashedR
.midPfont"family,!ankHothicLt!TQtext"decoration,linkQtexttransformation,uppercaseQ
text"indentation,?@AR
-2style.
-2head.
-body class7GmG.
-h3. Hreen 6ort *ngineering &ollege-2h3.
-p class7GmidG.Lawaharlal Technological Mniversity Hyderabad-2p.
-2div.
-2body.
-2html.
UNIT II
Introduction to /a-aScript
) number of technologies are present that develops the static web page, but we re0uire a
language that is dynamic in nature to develop web pages a client side. /ynamic HTML
is a combination of content formatted using HTML, cascading stylesheets, a scripting
language and /KM.
Lava1cript originates from a language called Live1cript. The idea was to find a
language which can be used at client side, but not complicated as Lava. Lava1cript is a
simple language which is only suitable for simple tasks.
!enefits of Lava1cript
6ollowing are some of the benefits that Lava1cript language possess to make the web site
dynamic.
It is widely supported in browser
It gives easy access to document obect and can manipulate most of them.
Lava1cript can give interesting animations with many multimedia data
types.
1pecial plug"in are not re0uired to use Lava1cript
Lava1cript is secure language
Lava1cript code resembles the code of & language, The syntax of both the language is
very close to each other. The set of tokens and constructs are same in both the language.
Example 0: ) 1ample Lava1cript program
-html.
-head.-title.ava script program-2title.
-script languague7GavascriptG.
function popup'(
P
var maor7parseInt'navigator.appSersion(Q
var minor7parseInt'navigator.appSersion(Q
var agent7navigator.user)gent.toLower&ase'(Q
document.write'agentTG GTmaor(Q
window.alert'agentTG GTmaor(Q
R
function farewell'(
P
window.alert'G6arewell and thanks for visitingG(Q
R
-2script.
-2head.
-body onLoad7Gpopup'(G onMnload7Gfarewell'(G.
-2body.
-2html.
Lava1cript program contains variables, obects and functions.
*ach line is terminated by a semicolon. !locks of code must be
surrounded by curly brackets.
6unctions have parameters which are passed inside parenthesis
Sariables are declared using the keyword var.
1cript does not re0uire main function and exit condition.
Example 1: Lava1cript program that shows the use of variables, datatypes
-html.
-head.
-title. My 1ample Lava1cript program-2title.
-script languate7GavascriptG.
function disp'(
P
var rno,sname,br,prQ
rno7prompt'G*nter your registration numberG(Q
sname7prompt'G*nter your JameG(Q
br7prompt'G*nter your branch JameG(Q
pr7prompt'G*nter the percentageG(Q
document.writeln'G-h9. Uour Iegistration Jo. is ,-2h9.GT rno.toMpper&ase'((Q
document.writeln'G-h9. Uour Jame is ,-2h9.GTsname.toMpper&ase'((Q
document.writeln'G-h9. Uour !ranch Jame is ,-2h9.GTbr.toMpper&ase'((Q
document.writeln'G-h9. Uour Kverall +ercentage is ,-2h9.GTpr(Q
document.close'(Q
R
-2script.
-2head.
-body onLoad7Gdisp'(G.
-2body.
-2html.
Example 12, Lava1cript program showing the using of constructs
-html.
-head. -title. 6actorial-2title. -2head.
-body.
-script language7GavascriptG.
function fact'n(
P
var i,f73Q
for'i73Qi-7nQiTT(
P
f7fNiQ
R
return'f(Q
R
var x,n,fQ
x7prompt'G*nter the numberG(Q
f7fact'x(Q
document.writeln'G6actorial of GTxTG is GTf(Q
document.close'(Q
-2script.
-2body.
-2html.
3$4ects in /a-aScript
Lava1cript is not a pure obect oriented programming language, but uses the concept of
obects. The new keyword used here is to create an obect, it allocates memory and
storage. Kbects can have functions and variables. To differentiate between global
variables and those which are part of an obect but may have the same name, Lava1cript
uses this keyword. $hen referring to a property of an obect, whether a method or a
variable, a dot is placed between the obect name and the property.
Example 11: Lava1cript program using obects
-html.
-head.
-script language78avascript8.
function demo3'(
P
+opup';Hello8(Q
Kb7 new sample '9, :(Q
alert'ob.x T ob.y(Q
R
function sample'x,y(
P
this.x7xQ
this.y7yQ
R
-2script.
-2head.
-body onLoad78demo3' (8.
-2body.
-2html.
5egular Expression
) script language may take name data from a user and have to search through the string
one character at a time. The usual approach in scripting language is to create a pattern
called a regular expression which describes a set of characters that may be present in a
string.
var pattern 7 ;target8Q
var string 7 ;can you find the target8Q
string.match'pattern(Q
!ut the above code can also be written using regular expression as a parameter, as shown
below.
var pattern 7 new Ieg*xp';target8(Q
var string 7 ;can you find the target8Q
pattern.exec'string(Q
Iegular expression is a avascript obect. /ynamic patterns are created using the
keyword new.
regex 7 new Ieg*xp';fero# = amer8(Q
Example 1#, Lava1cript code to implement Ieg*xp
-html.
-head.
-body.
-script language78avascript8.
var re 7 new Ieg*xp';V) = aWmer8(Q
var msg78 Have you met )mer recently8Q
var res7 re.exec'msg(Q
if'res(
P
alert' ; I found ; T resV@W(Q
R
else
P
alert'; I didnXt find it8(Q
R
-2script.
-2body.
-2html.
)unctions:
Iegular *xpressions are manipulated using the functions which belong to either the
Ieg*xp or 1tring class.
&lass String functions
match'pattern(
This function searches a matching pattern. Ieturns array holding the results.
replace'pattern3, pattern9(
1earches for pattern3. If the search is successful pattern3 is replaced with pattern9.
search'pattern(
1earches for a pattern in the string. If the match is successful, the index of the start of the
match is returned. If the search fails, the function returns "3.
&lass 5egExp functions
exec'string(
*xecutes a search for a matching pattern in its parameter string. Ieturns an array
holding the results of the operation.
test'string(
1earches for a match in its parameter string. Ieturns true if a match is found, otherwise
returns false.
Built in o$4ects:
T"e document o$4ect
) document is a web page that is being either displayed or created. The document has a
number of properties that can be accessed by Lava1cript programs and used to manipulate
the content of the page.
$rite or writeln
Html pages can be created using Lava1cript. This is done by using the write or writeln
methods of the document obect.
/ocument.write';-body.8(Q
/ocument.write';-h3. Hello -2h3.8(Q
T"e form o$4ect
Two aspects of the form can be manipulated through Lava1cript. 6irst, most commonly
and probably most usefully, the data that is entered onto your form can be checked at
submission. 1econd you can actually build forms through Lava1cript.
Example 1%:
6alidate!4s
function validate'(
P
var t37document.formsV@W.elementsQ
var t97parent.framesVYf:YW.documentQ
var bg37t3.bg.valueQ
var c37t3.c.valueQ
t9.open'(Q
t9.write'G-body bgcolor7GTbg3TG.G(Q
t9.write'G&andidate name is , GTc3(Q
t9.write'G-2body.G(Q
t9.close'(Q
R
Mpage!"tml
-html.
-head.
-script language 7 Gavascript src7 G/,</ocuments and 1ettings < )mer< /esktop < amer<
p? < validate.sG.
-2script.
-2head.
-body.
-form.
!ackground &olor, -input type7GtextG si#e73? name7GbgG value7GwhiteG.
&andidateYs name,-input type7GtextG si#e73? name7GcG.
-input type7GbuttonG value7GshowitG on&lick7Gvalidate'(G.
-2form.
-2body.
-2html.
T"e $ro7ser o$4ect
1ome of the properties of the browser obect is as follows
Javigator.app&odeJame
The internal name for the browser.
Javigator.appSersion
This is the public name of the browser.
Javigator.appSersion
The version number, platform on which the browser is running.
Javigator.user)gent
The strings app&odeJame and appSersion concatenated together.
T"e 8ate o$4ect
Lava1cript provides functions to perform many different date manipulation. 1ome of the
functions are mentioned below.
/ate' (
&onstruct an empty date obect.
/ate'year, month, day V,hour, minute, secondW(
&reate a new /ate obect based upon numerical values for the year, month and
day. Kptional time values may also be supplied.
get/ate' (
Ieturn the day of the month
get/ay' (
Ieturn an integer representing the day of the week.
get6ullUear' (
Ieturn the year as a four digit number.
getHours' (
Ieturn the hour field of the /ate obect.
getMinutes' (
Ieturn the minutes field of the /ate obect.
get1econds' (
Ieturn the second field of the /ate obect.
set/ate'day (
1et the day value of the obect. )ccepts values in the range 3 to %3.
set6ullUear' year V,month, dayW(
1et the year value of the obect. Kptionally also sets month and day values.
to1tring' (
Ieturns the /ate as a string.
E-ents:
Lava1cript is a event"driven system. Jothing happens unless it is initiated by an event
outside the script. The table below shows event, event handler and the description about
the event handler.
*vent Handler /escription
!lur on!lur The input focus is moved
from the obect, usually
when moving from a field
of a form or from the form
itself.
&hange on&hange The value of a field in a
form has been changed by
the entering or deleting
data.
&lick on&lick The mouse is clicked over
an element of a page.
/ouble click on/bl&lick ) form elementor a link is
clicked twice in rapid
succession
6ocus on6ocus Input focus is given to an
element. The reverse of
blur
Zeydown onZey/own ) key is pressed but not
released
Zeypress onZey+ress ) key is pressed.
Zeyup onZeyMp ) pressed key is released
Load onLoad The page is loaded by the
browser
Mousedown onMouse/own ) mouse button is pressed
Mousemove onMouseMove The mouse is moved
Mouseout onMouseKut The mouse pointer moves
off an element
Mouseover onMouseKver The mouser pointer moved
over an element
Move onMove ) window is moved
Iesi#e onIesi#e ) window is resi#ed
1ubmit on1ubmit ) form is submitted
Mnload onMnload The user leaves the web
page.
8namic HTML 7it" /a-aScript
/ata Salidation
/ata validation is the common process that takes place in the web sites. Kne common
re0uest is for a way of validating the username and password. 6ollowing program shows
the validation of data which uses two frames, in one frame user is going to enter the data
and in the other frame e0uivalent result is going to be displayed.
Example 1'! Lava1cript code for data validation
Mpage!"tml
-html.
-head.
-title.frame page -2title.
-2head.
-frameset rows7G9@A,NG.
-frame name7Gf3G src7GG.
-frameset cols7G9@A,NG.
-frame name7Gf9G src7GG.
-frameset cols7G>@A,NG.
-frame name7Gf%G src7G/,</ocuments and 1ettings<)mer</esktop<amer<p?<reg.htmlG.
-frame name7Gf:G src7G/,</ocuments and
1ettings<)mer</esktop<amer<p?<profile.htmlG.
-2frameset.
-2frameset.
-2frameset.
-2html.
Mform!"tml
-html.
-head.
-script language 7 GavascriptG src 7 G/,< /ocuments and 1ettings < )mer< /esktop<
amer< p?< validate.sG.
-2script.
-2head.
-body.
-form.
!ackground &olor, -input type7GtextG si#e73? name7GbgG value7GwhiteG.
&andidateYs name,-input type7GtextG si#e73? name7GcG.
-input type7GbuttonG value7GshowitG on&lick7Gvalidate'(G.
-2form.
-2body.
-2html.
6alidate!4s
function validate'(
P
var t37document.formsV@W.elementsQ
var t97parent.framesVYf:YW.documentQ
var bg37t3.bg.valueQ
var c37t3.c.valueQ
t9.open'(Q
t9.write'G-body bgcolor7GTbg3TG.G(Q
t9.write'G&andidate name is , GTc3(Q
t9.write'G-2body.G(Q
t9.close'(Q
R
UNIT III
9ML: 8efining 8ata for :e$ ;pplications
The markup language developed to add structural and formatting information to data and
which was designed to be simple enough to be included in any application that language
is 1tandard Henerali#ed Markup Language and was adopted as standard by International
Krgani#ation for 1tandardi#ation'I1K(.
Markup is nothing but instructions, which are often called as tags. There are many
languages which shows how the data is displayed but no one describes what the data is.
This is the point at which [ML enters. [ML is a subset of 1HML. [ML is used to
describe the structure of a document not the way that is presented. [ML is the
recommendation of $orld $ide &onsortium '$%&(. The structure of basic [ML is
shown below which resembles HTML. The first line is the processing instruction which
tells applications how to handle the [ML. It is also serves as version declaration and
says that the file is [ML.
Example 1(! 1ample [ML program
-\xml version783.@8\.
-college.
-studdetail.
-regno.@>@a39?@-2regno.
-name.
-firstname.fero#.-2firstname.
-lastname.amer-2lastname.
-2name.
-country name7GindiaG2.
-branch.csit-2branch.
-2studdetail.
-2college.
6alid an :ell )ormed 9ML
[ML documents may be either valid or well formed. ) well formed document is one
which follows all of the rules of [ML. Tags are matched and do not overlap, empty
elements are ended properly, and the document contains an [ML declaration. ) valid
[ML document has its own /T/. [ML should also conforms the rules set out in the
/T/. There are many [ML parsers that checks the document and its /T/
9ML elements
[ML documents are composed of three things i.e., elements, control information, and
entities. Most of the markup in an [ML document is element markup. *lements are
surrounded by tags much as they are in HTML. *ach document has a single root element
which contains al of the other markup.
Jesting tags, *ven the simplest [ML document has nested tags. Mnlike HTML
these must be properly nested and closed in the reverse of the order in which they were
opened. *ach [ML tag has to have a closing tag, again unlike HTML.
&ase 1ensitive, [ML is case sensitive and you must use lower case for your
markup.
*mpty tags, 1ome tags are empty, they donXt have content. $here the content of
the tag is missing, it appears as
-content2.
)ttributes, 1ometimes it is important that elements have information associated
with them without that information becoming a separate element.
&ontrol Information
There are three types of control information i.e., comments, processing instructions, and
document type declaration.
&omments, [ML comments are exactly same as HTML. They take the form as
-4" "comment text " ".
+rocessing Instructions, +rocessing Instructions are used to control applications. Kne of
the processing instructions is
-\xml version783.@8.
/ocument Type /eclarations, *ach [ML document has an associated /T/. The /T/
is usually present in separate file, so that it can be used by many files. The statement that
includes /T/ in [ML file is
-\/K&TU+* cust 1U1T*M ;customer.dtd8.
*ntities
*ntities are used to create small pieces of data which you want to use repeatedly
throughout your schema.
Example 1*: ) &omplete [ML program
-\xml version783.@8\.
-4/K&TU+* stud 1\U1T*M ;student.dtd8.
-college.
-studdetail.
-regno.@>@a39?@-2regno.
-name.
-firstname.fero#.-2firstname.
-lastname.amer-2lastname.
-2name.
-country name7GindiaG2.
-branch.csit-2branch.
-2studdetail.
-2college.
8ocument Tpe 8efinition
/ocument type definition have been successfully used in 1HML applications for many
year. /T/ are document centric. They are well understood. There are plenty of tools
that support /T/
/T/ for the [ML document shown in the *xample 3> is as follows
-4*L*M*JT college'studetailT(.
-4*L*M*JT studetail'regno, nameT, country, branch(.
-4*L*M*JT regno'5+&/)T)(.
-4*L*M*JT name'firstname, lastname(.
-4*L*M*JT firstname'5+&/)T)(.
-4*L*M*JT lastname'5+&/)T)(.
-4*L*M*JT country'5+&/)T)(.
-4)TTLI1T country name &/)T) 5I*OMII*/.
-4*L*M*JT branch'5+&/)T)(.
9ML Sc"ema
$%& developed a technology called [ML schema which they accepted as a
recommendation. [ML schema is itself an [ML application which means when you use
it your only need a single grammar and can use your normal [ML editor to create it.
Example 1+: [ML 1chema for [ML document shown in *xample 3:
-\xml version 783.@8 \.
-xsd,schema xmlns 78 http,22.........8.
-xsd,element name 7 ;college8.
-xsd,complexType.
-xsd,se0uence.
-xsd,element name 7 ;studetail8.
-xsd,complexType.
-xsd,se0uence.
-xsd,element name 7 ;regno8 type 7 ;xsd,string82.
-xsd,element name 7 ;name8.
-xsd,complexType.
-xsd,se0uence.
-xsd,element name 7 ;firstname8 type78xsd,string82.
-xsd,element name7 ;lastname8 type 7 ;xsd,string82.
-xsd,element name 7 ;country8.
-xsd,complexType.
-xsd,attribute name 7 ;India8 type7 ;xsd,string82.
-2xsd,complexType.
-2xsd,element.
xsd,element name 7 ;branch8 type 7 ;xsd,string82.

-2xsd,se0uence.
-2xsd,complexType.
-2xsd,element.
-2xsd,se0uence.
-2xsd,complexType.
-2xsd,element.
-2xsd,se0uence.
-2xsd,complexType.
-2xsd,element.
-2xsd,schema.
8ocument 3$4ect Model
[ML parsers can handle documents in any way that their developers choose. There are
two models commonly used for parsers i.e., 1)[ and /KM. 1)[ parsers are used
when dealing with streams of data. This type of parsers are usually used with ava.
1)["based parsers run 0uickly.
/KM is and application program interface ')+I( for [ML documents. The /KM
)+I specifies the logical structure of [ML documents and the ways in which they can be
accessed and manipulated. The /KM )+I is ust a specification. /KM"complaint
applications include all of the functionality needed to handle [ML documents. They can
build static documents, navigate and search through them, add new elements, delete
elements, and modify the content of existing elements. The views [ML document as
trees. The /KM exposes the whole of the document to applications. It is also scriptable
so applications can manipulate the individual nodes.
,resenting 9ML
[ML documents are presented using *xtensible 1tylesheet which expresses stylesheets.
[1L stylesheet are not the same as HTML cascading stylesheets. They create a style for
a specific [ML element, with [1L a template is created. [1L basically transforms one
data structure to another i.e., [ML to HTML.
Example 10: Here is the [1L file for the [ML document of *xample 3:
This line must be included in the [ML document which reference stylesheet
-\xml,stylesheet type 7 ;text2xsl8 href 7 ;student.xsl8\.
Here goes the [1L file
-xsl,stylesheet smlns,xsl 78uri,xsl8.
-xsl,template match7828.
-html.
-body.
-h3. 1tudent /atabase -2h3.
-xsl,for"each select 7 ;college8.
-xsl,for"each select 7 ;studetail8.
-xsl,value"of select 7 ;regno82.
-xsl,for"each select 7 ;name8.
-xsl,value"of select 7 ;firstname82.
-xsl,value"of select 7 ;lastname82.
-2xsl,for"each.
-xsl,value"of select78country2]name8 2.
-xsl,value"of select 7 ;branch82.
-2xsl,for"each.
-2xsl,for"each.
-2body.
-2xsl,template.
-2xsl,stylesheet.
UNIT I6
/;6; BE;NS
Introduction to /a-a Beans
) Lava !eans is software component that has been designed to be reusable in a variety of
different environments. There is no restriction on the capability of a !ean. It may
perform simple function, such as checking the spelling of a document, or complex
function, such as forecasting the performance of a stock portfolio. ) bean may be visible
to an end user. Kne example of this is a button on a graphical user interface. ) bean may
be designed to work autonomously on a userXs workstation or to work in cooperation with
a set of other distributed components.
;d-antages of /a-a Beans
) bean obtains all the benefits of LavaXs ;write once, run"anywhere8 paradigm.
The properties, events and methods of a bean that are exposed to an application
builder tool can be controlled.
) bean may be designed to operate correctly in different locales, which makes it
useful in global markets.
)uxiliary software can be provided to help a person configure a bean.
The configuration settings of a bean can be saved in persistent storage and
restored at a later time.
) bean may register to receive events from other obects and can generate events
that are sent to other obects.
B8< Introspection
Introspection is the process of analy#ing a bean to determine its capabilities. This is a
very important feature of Lava !ean )+I, because it allows an application builder tool to
present information about a component to a software designer. $ithout introspection, the
ava beans technology could not operate. Kne way exposed the properties, events and
methods of bean to application builder tool is using simple naming conventions.
8esign pattern for properties
+roperty is a subset of a beanXs state. The values that are assigned to the
properties determine the behavior and appearance of that component.
1imple properties,
) simple property has a single value. It can be identified by the following
design patterns, where J is the name of the property and T is its type.
+ublic T getJ' (Q
+ublic void setJ' (Q
!oolean properties,
) !oolean property has a value of true or false. It can be identified by the
following design patterns, where J is name of the property.
+ublic !oolean isJ ' (Q
+ublic !oolean getJ' (Q
+ublic void setJ'!oolean value(Q
Indexed properties
)n indexed property consists of multiple values. It can be identified by
the following design patterns, where J is the name of the property and T
is its type.
+ublic T getJ'int index(Q
+ublic void setJ'int index, T value(Q
+ublic TV W getJ' (Q
+ublic void setJ'T valuesV W(Q
Using Bound ,roperties
) bean that has a bound property generates an event when the property is changed. The
event is of type +roperty&hange*vent and is sent to obects that previously registered an
interest in receiving such notifications.
*xample 3B, )pplication that uses TickTock bean to automatically control the &olor bean
1teps,
3. Ho to menu bar of the bean box and select *dit = *vents = propety&hange. $e
can now see a line extending from the button to the cursor
9. Move the cursor so that it is inside the &olors bean display area , and click the
left mouse button. 1ee the *vent Target /ialog dialog box.
%. the dialog box allows your to choose a method that should be invoked when
this event occurs. 1elect the entry labeled ;change8 and click the Kk button.
Using BeanInfo Interface
This interface defines several methods, including these,
+roperty/escriptionV W get+roperty/escriptors' (
*vent1et/escriptorV W get*vent1et/escriptors' (
Method/escriptorV W getMethod/escriptors' (
The above methods will return array of obects that provide information about the
properties, events, and methods of bean. 1imple!eanInfo is a class that provides default
implementations of the !eanInfo interface, including the three methods ust shown. $e
can extend this class and override on or more of them.
&onstrained ,roperties
) bean that has a constrained property generates an event when an attempt is made to
change its value. The event is of type +roperty&hange*vent. It is sent to obects that
previously registered an interest in receiving such notifications. This capability allows a
!ean to operate differently according to its run"time environment. )
,ersistence
+ersistence is the ability to save a !ean to nonvolatile storage and retrieve it at a later
time. The information that is particularly important are the configuration settings.
&ustomi=ers
) bean developer can provide a customi#er that helps another developer configure this
software. ) customi#er can provide a step"by"step guide through the process that must
be followed to use the component in a specific context.
/a-a Beans ;,I
Interface 8escription
)ppletInitiali#er Methods present in this interface are used
to initiali#e !eans that are also applets
!eanInfo This interface allows a designer to specify
information about the properties, events
and methods of a !ean.
&ustomi#er This interface allows a designer to provide
a graphical user interface through which a
!ean may be configured.
/esignMode Methods in this interface determine if a
!ean is executing in design mode.
+roperty&hangeListener ) method in this interface is invoked when
a bound property is changed.
Sisibility Methods in this interface allow a bean to
execute in environments where graphical
user interface is not available.
&lass 8escription
!ean/escriptor This class provides information about a
!ean.
!eans This class is used to obtain information
about a !ean
Introspection*xception )n exception of this type is generated if a
problem occurs when analy#ing a bean.
+roperty&hange*vent This event is generated when bound or
constrained properties are changed.
+roperty/escriptor Instances of this class describe a property
of a !ean
UNIT 6
Introduction to Ser-lets
1ervlets are used at server side. $hen a user re0uest for a web page by entering the MIL
in the browser. The browser generate HTT+ re0uest to the appropriate web server. The
web server maps this re0uest with a specific file. The file is returned in the form of
HTT+ response. To handle these re0uest at server side we re0uire servlet.
There are several advantages of servlet,
+erformance is significantly better. 1ervlets execute within the address
space of a web server.
1ervlets are platform independent, they are written in ava . 1everal web
servers, from different vendors such as 1un, Microsoft offer servlet )+I.
Lava security manager on the server enforces a set of restrictions to protect
the resources on a server machine.
The full functionality of ava class libraries is available to a servlet.
Life ccle of a ser-let
There are three methods related to the life cycle of a servlet i.e., init' (, service' ( and
destroy' (. These methods are called at different times by the servlet. $hen a user enters
a MIL to a web browser, the browser generates an HTT+ re0uest for the MIL and sends
it to the appropriate server.
This HTT+ re0uest is received by the web server. The web server maps this
re0uest with a particular servlet. The servlet is dynamically retrieved and loaded into the
address space of the web server.
Then server invokes init' ( method of the servlet. This method is invoked when
the servlet is first loaded into memory. Here the initiali#ation parameters are passed to
the servlet.
The server then invokes the service method of the servlet to process the HTT+
re0uest. 1ervlet will read the data provided to it in the form of HTT+ re0uest and also
formulate it. The servlet remains in the serverXs address space and is available for any
HTT+ re0uest.
$hen the servlet is unloaded from the server, then destroy' ( method is called by
the server to relin0uish resources
/a-a Ser-let 8e-elopment <it
The Lava 1ervlet /evelopment Zit contains the class libraries that you will need to create
servlet. L1/Z is available from the 1un Microsystems web site at ava.sun.com.
) 1imple 1ervlet
Example 11 1ample servlet program

Hello1ervlet.ava
import ava.io.NQ
import avax.servlet.NQ
public class Hello1ervlet extends Heneric1ervlet
P
public void service'1ervletIe0uest re0, 1ervletIespone res( throws 1ervlet*xception,
IK*xception
P
res.set&contentType';text2html8(Q
printer$riter pw 7 res.get$riter' (Q
pw.println';Hello8(Q
pw.close' (Q
R
R
Ser-let ;,I
There are two packages that are re0uired to build servlets i.e., avax.servlet and
avax.servlet.http. These packages constitute servlet )+I.
4a-ax!ser-let pac.age:
There are number of interfaces and classes present in this package, they are described
below.
Interface 8escription
1ervlet /eclares life cycle methods for a servlet
1ervlet&onfig )llows servlets to get initiali#ation
parameters
1ervlet&ontext *nables servlets to log events
1ervletIe0uest Msed to read data from a client re0uest
1ervletIesponse Msed to read data to a client response
&lass 8escription
Heneric1ervlet Implements the 1ervlet and 1ervlet&onfig
1ervletInput1tream +rovides an input stream for reading
re0uests from a client
1ervletKutput1tream +rovides an output stream for writing
responses to a client.
1ervlet*xception Indicates that a servlet error occurred.
6ollowing are the interfaces and their methods
Ser-let Interface
void destroy &alled when the servlet is unloaded
1ervlet&onfig get1ervlet&onfig'( Ieturns a 1ervlet&onfig obect that
contains any initiali#ation parameters
1tring get1ervletInfo Ieturns a string describing the servlet
void init'( &alled when the servlet is initiali#ed
void service &alled to process a re0uest from a client
Ser-let&onfig Interface
1ervlet&ontext get1ervlet&ontext Ieturns the context for this servlet
1tring getInit+armeter'1tring param( Ieturns the value of the initiali#ation
parameter name param
getInit+arameterJames'( Ieturns all initiali#ation parameter names
Ser-let&ontext interface
get)trribute'1tring attr( Ieturns the value of the server attribute
named attr.
1tring get1erviceInfo'( Ieturns information about the server.
1ervlet get1ervlet'1tring sname( Ieturns the servlet named sname.
get1ervletJames'( Ieturns the names of servlets in the server
Ser-let5e>uest Interface
1tring get+arameter'1tring pname( Ieturns the value of the parameter named
pname
get+arameterJames'( Ieturns the parameter names for this
re0uest
1tringV W get+arameterSalues'( Ieturns the parameter values for this
re0uest
1tring get+rotocol'( Ieturns a description of the protocol
1tring get1erverJame'( Ieturns the name of the server
Int get1erver+ort'( Ieturns the port number.
Ser-let5esponse Interface
+rinter$riter get$riter'( Ieturns a +rint$riter that can be used to
write character data to the response
1ervletKutput1tream getKutput1tream'( Ieturns a 1ervletKutput1tream that can be
used to write binary data to the response
6ollowing are the classes and their methods
?enericSer-let class
This class implements 1ervlet and 1ervlet&onfig interfaces
Ser-letInputStream class
The 1ervletInput1tream class extends Input1tream. It is implemented by the
server and provides an input stream that a servlet developer can use to read the data from
a client re0uest. In addition to this, one more method is added which returns the actual
number of bytes read
Int readLine'byteV W buffer, int offset, int si#e(
Ser-let3utputStream class
1ervletKutput1tream class extends Kutput1tream. It defines the print'( and
println'( methods, which output data to the stream.
Ser-letException class
This class indicates that a servlet problem has occurred. The class has the
following contructor
1ervlet*xception' (
1ervlet*xception'1tring s(
5eading Ser-let ,arameters
Example #2: 1ervlet program showing reading servlet parameters
Import ava.io.NQ
Import ava.servlet.NQ
+ublic class +arameter1ervlet extends Heneric1ervlet
P
+ublic void service'1ervletIe0uest re0, 1ervletIesponse res( throws 1ervlet*xception,
IK*xception
P
+rint$riter pw7res.get$riterQ
*numeration e 7 re0.get+arameterJames'(Q
$hile'e.hasMore*lements'((
P
1tring pname 7 '1tring(e.next*lement'(Q
+w.print'pname T ; 78(Q
1tring pvalue7re0.get+arameter'pname(Q
+w.println'pvalue(Q
R
+w.close'(Q
R
R
5eading Initiali=ation parameters
Example #1: 1ervlet program showing reading initiali#ation parameters
import ava.io.NQ
import avax.servlet.NQ
public void service'1ervletIe0uest re0, 1ervletIesponse res( throws 1ervlet*xception,
IK*xception
P
1ervlet&onfig sc7 get1ervlet&onfig'(Q
res.set&ontentType';text2html8(Q
+rint$riter pw7res.get$riter'(Q
pw.println'; Jame , ;T sc.getInit+arameter';name8((Q
pw.close'(Q
R
R
4a-ax!ser-let!"ttp pac.age
There are number of classes and interfaces present in this package, they are as follows,
Interface 8escription
Http1ervletIe0uest *nables servlets to read data from an HTT+
re0uest
Http1ervletIesponse *nables servlets to write data to an HTT+
response.
Http1ession )llows session data to be read and written
Http1ession&ontext )llows sessions to be managed
&lass 8escription
&ookie )llows state information to be stored on a
client machine
Http1ervlet +rovides methods to handle HTT+ re0uests
and responses
6ollowing are the interfaces and their methods description
HttpSer-let5e>uest Interface
&ookieV W get&ookies Ieturns an array of the cookies in this
re0uest
1tring getMethod'( Ieturns the HTT+ method for this re0uest
1tring getOuery1tring'( Ieturns any 0uery string in the MIL
1tring getIemoteMser'( Ieturns the name of the user who issued
this re0uest.
1tring getIe0uested1essionId'( Ieturns the I/ of the session
1tring get1ervlet+ath'( Ieturns the part of the MIL that identifies
the servlet
HttpSer-let5esponse Interface
Soid add&ookie'&ookie cookie( )dds cookie to the HTT+ response.
Soid send*rror'int c( 1end the error code c to the client
Soid send*rror'int c , 1tring s( 1end the error code c and the message s
Soid sendIedirect'1tring url( Iedirects the client to url
&oo.ie class
The &ookie class encapsulates a cookie. ) cookie is stored on a client and contains state
information. &ookies are valuable for tracking user activities. ) servlet can write a
cookie to a userXs machine via the add&ookie'( method of the Http1ervletIesponse
interface. The names and values of cookies are stored on the userXs machine. 1ome of
the information that is used saved includes the cookieXs
Jame
Salue
*xpiration date
/omain and path
6ollowing are the methods that are used by the &ookie class
1tring get&omment'( Ieturns the comment
1tring get/omain'( Ieturns the domain
Int getMax)ge'( Ieturns the age
1tring getJame'( Ieturns the name
1tring get+ath'( Ieturns the path
!oolean get1ecure'( Ieturns true if the cookie is secure
Int getSersion'( Ieturns the version
Soid set&omment'1tring c( 1ets the comment to c
Soid set/omain'1tring d( 1ets the domain to d
Soid set+ath'1tring p( 1ets the path to p
Soid set1ecure'boolean secure( 1ets the security flag to secure
HttpSer-let &lass
The Http1ervlet class extends Heneric1ervlet. It is commonly used when developing
servlets that receive and process HTT+ re0uests. 6ollowing are the methods used by
Http1ervlet class
Soid doHet'Http1ervletIe0uest re0,
Http1ervletIesponse res(
+erforms an HTT+ H*T
Soid do+ost'H1I re0, H1I res( +erforms and HTT+ +K1T
Soid service'H1I re0, H1I res( &alled by the server when and HTT+
re0uest arrives for this servlet.
Handling HTT+ Ie0uests and Iesponses
Example ##: 1ervlet program handling HTT+ H*T re0uests
import ava.io.NQ
import avx.servlet.NQ
import avax.servlet.http.NQ
public class Het1ervlet extends Http1ervlet
P
public void doHet'Http1ervletIe0uest re0, Http1ervletIesponse res( throws
1ervlet*xception, IK*xception
P
1tring name7re0,get+arameter';name8(Q
res.set&ontentType';text2html8(Q
+rint$riter pw7res.get$riter'(Q
pw.println';The Jame is ;(Q
pw.println'name(Q
pw.close'(Q
R
Jote, 1ame program you can use for Handling HTT+ +K1T re0uests instead of using
doHet we can use do+ost