INDEX

1. web pages for online bookstore 2. create an image map and fix a hotspot on it 3. javascript program for addition of two numbers 4. Demonstration of F ! loop using javascript ". Demonstration of #F loop using javascript $. Demonstration of %&#'( loop using javascript ). Functions in javascript a.*+uare of numbers b.,aximum of three numbers c. Factorial of numbers -..rra/s in javascript a. *um of arra/ elements b. Displa/ arra/ elements in table 0. 1ascading st/le sheets a. inline st/les b. st/le sheets c. *pan boxes d. inheritance e. 2ormal flow boxes 13. 4ositioning a. !elative positioning b. .bsolute positioning c. Float positioning 11. *imple servlet programming 12. Document object ,odels

1.Webpages for online bookstore

AIM: Develop static pages 5using onl/ html6 of an online book store. 7he pages should resemble www.amazon.com . 7he website should consists of the following pages8 a. &ome page b. !egistration c. 9ser 'og:in d. ;ooks catalog AL !"I#$M: *tep 1< write the html codings with head8title and bod/ tags for the home page which includes a link to login page and submit as the input t/pe. *tep2< write the html codings for login page with corresponding head8title and bod/ tags with links to registration page and books catalog.=arious input t/pes and radio buttons are used. *tep3< write the html codings for registration page with all basic html la/out and with a link which leads back to login page after registration. *tep4< write the codings for books catalog with details of the books available in the store. %"! "AM: ,ain 4age< >html? >title?homepage>@title? >bod/? >center?>h1?welcome to amaAon.com>@h1?>@center?>br@? >p?>right?>a hrefBClogin.htmlC?existing user click here>@a?>@rightt?>@p? >p?>a hrefBCregistration.htmlC?click here to go to registration page>@a?>@p? >@bod/? >@html? 'og:in 4age< >html? >title?user login>@title? >bod/? >center?>h1?welcome to login page>@h1?>@center?>br@? >form methodBCpostC actionBCbookscatalog.htmlC? >p?>b?username>@b?>input t/peBCtextC nameBCusernameC siAeB2"?>@b?>@p?>br@? >p?>b?password>input t/peBCpasswordC nameBCpasswordC siAeBC0C?>@b?>@p?>br@? >p?>center?>input t/peBCsubmitC nameBCloginC valueBCsubmitC methodBCselectC? >input t/peBCresetC valueBCresetC?>@center?>@b?>@p? >@form? >@bod/? >@html?

!egistration< >html? >title?registration>@title? >bod/? >center?>h1?welcome to amaAon.com>@h1?>@center?>br@? >h2?new user registration>@h2?>br@? >form methodBCpostC actionBClogin.htmlC? >p?>b?username>@b?>input t/peBCtextC nameBCusernameC siAeB2"?>@b?>@p?>br@? >p?>b?password>input t/peBCpasswordC nameBCpasswordC siAeBC0C?>@b?>@p?>br@? >p?>b?confirm password>input t/peBCpasswordC nameBCpasswordC siAeBC0C?>@b?>@p?>br@? >p?>b?sex< >input t/peBCradioC valueBCmaleC?male >input t/peBCradioC valueBCfemaleC?female>@b?>@p?>br@? >p?>b?address box>textarea nameBCaddressC rowBC$C colsBC23C?>@textarea?>@b?>@p?>br@? >p?>b?mobile no<>input t/peBCtextC nameBCmobile no.C siAeBC13C?>@b?>@p?>br@? >p?>b?>center?>input t/peBCsubmitC nameBCsubmitC methodBCgetC? >input t/peBCresetC nameBCresetC methodBCbackC?>@p?>@b?>br@? >@form? >@bod/? >@html? ;ooks 1atalog >html? >title?user login>@title? >bod/? >center?>h1?welcome to books catalog>@h1?>@center?>br@? >table borderBC "C widthBC2"DC heightBC"3DC >tr? >th?computers>@th? >th?electronics>@th? >th?biotech>@th? >th?mechanical>@th >@tr? >@form? >@bod/? >@html?

!&#%&#:

&ome 4age<

'og:in 4age<

!egistration<

;ooks 1atalog<

"E'&L#: 7hus the program has been executed successfull/.

(. Image map an) *ot spot

AIM: 7o create an image map using &7,' and fix a hot spot on it. AL !"I#$M: *tep1< Draw a image map using paint *tep2< write html codings describing personal details. *tep3< write html codings describing the information about our contacts. *tep4< write html codings for the image map b/ fixing the hot spots on it b/ linking it to the personal and contact details. %"! "AM : 4ersonal< >html? >head? >title?personal>@title? >@head? >bod/? >p?>b?personal<>@b?>@br? name<xxx>@br? dept<#7>@br? /ear<###>@br? sect<.>@br? >@p? >@bod/? >@html?

.ddress< >html? >head? >title?contact>@title? >@head? >bod/?

>p?>b?.ddress<>@b?>@br? door no<11>@br? xxx street>@br? chennai>@br? pin<3333333>@br?>@p? >@bod/? >@html? #mage map< >html? >head? >title?imagemap>@title? >@head? >bod/? >map nameBCimagemapCidBCimagemapC? >area shapeBCcircleC coordsBC)"8$38$3C hrefBCcont.htmlC titleBCcontactCaltBCcontactC? >area shapeBCcircleC coordsBC22"8"382"C hrefBCpre.htmlC titleBCpersonalCaltBCpersonalC? >@map? >image srcBCp2.bmpCheightBC$33C widthBC-33CusemapBCEimagemapC@? >@bod/? >@html?

!&#%&#: #mage,ap<

4ersonal<

1ontact<

"E'&L#: 7hus the above program is executed successfull/.

+.A))ition of two n,mbers ,sing -a.ascript

AIM:

7o develop a web page using javascript for addition of two numbers. AL !"I#$M: *tep1< start the codings with head8title tags. *tep2< Declare the t/pe as javascript and declare two numbers whose sum is to be calculated. *tep3< Declare the window prompt which is a javascript application for those two numbers. *tep4< add the numbers and result which is stored in sum is displa/ed finall/. %"! "AM: >html? >head? >title?addition>@title? >@head? >bod/? >script t/peBCtext@javascriptC? var firstnumF var secondnumF var num1F var num2F var sumF firstnumBwindow.prompt5Center num1C8C3C6F secondnumBwindow.prompt5Center num2C8C3C6F num1Bparse#nt5firstnum6F num2Bparse#nt5secondnum6F sumBnum1Gnum2F document.writeln5C>h1?the sum isC Gsum GC>@h1?C6F >@script? >@bod/? >@html?

!&#%&#:

"E'&L#: 7hus the above program has been executed successfull/.

/.I0 con)ition1-a.ascript

AIM: 7o write a program using javascript to demonstrate #F loop. AL !"I#$M: *tep1< start the codings with head8title tags. *tep2< Declare the t/pe as javascript and declare the date variable. *tep3< #f hour is lesser than 12 then good morning will be displa/ed and if it is ?B 128 then good afternoon ao good evening will be displa/ed *tep4< Declare a window prompt to enter the name. %"! "AM: >html? >head? >title? java script using if >@title? >@head? >script t/peBCtext@javascriptC? var name8 nowBnew Date568 hourBnow.get&ours56F nameBwindow.prompt5Center nameC8CC6F if5hour>126 document.write5C>h1?good morningC6F if5hour?B126 H hourBhour:12F if5hour>$6 document.write5C>h1?good afternoonC6F if5hour?B$6 document.write5C>h1?good eveningC6F I document.writeln5name G C8 welcome to javascript programmingJ>@h1?C6F >@script? >bod/? >@bod/? >@html?

!&#%&#:

"E'&L#: 7hus the above program has been executed successfull/.

2.0!" loop ,sing -a.ascript

AIM: 7o write a program using javascript to demonstrate F ! loop. AL !"I#$M: *tep1< *tart the codings with head and title tags and declare the t/pe as text@javascript *tep2< 9se the for loop to declare the counter.

%"! "AM: >html? >head? >title? F !>@title? >@head? >script t/peBCtext@javascriptC? for5var counterB1Fcounter>B)FGGcounter6 H document.writeln5C>@br?the number isB CGcounter6F I >@script? >@html? !&#%&#:

"E'&L#: 7hus the above program has been executed successfull/.

3.W$ILE loop ,sing -a.ascript

AIM: 7o write a program using javascript to demonstrate %&#'( loop. AL !"I#$M: *tep1< *tart the codings with head and title tags and declare the t/pe as text@javascript *tep2< 9se the %hile loop to declare the counter.

%"! "AM: >html? >head? >title? sc >@title? >@head? >script t/peBCtext@javascriptC? var counterB1F while5counter >B)6 H document.writeln5C>@br?the number isB CGcounter6F GGcounterF I >@script? >@html? !&#%&#:

"E'&L#: 7hus the above program has been executed successfull/

4.0,nctions ,sing -a.ascript

AIM: 7o write the following programs to implement functions using javascript. a. *+uare of numbers b. ,aximum of three numbers c. Factorial table AL !"I#$M: *tep1< *tart the codings with head and title tags and declare the t/pe as text@javascript

*tep2< For calculating the s+uare of numbers use the function s+uare56 and use the for loop to declare the numbers to which s+uare has to be calculated. *tep3< For calculating the maximum of three numbers use the function maximum56 and a built:in object math.max to calculate the maximum of three numbers which is declared earlier.%indow prompt application is used to get the input of those three numbers. *tep4< For drawing the factorial table 8 set the table border and declare the attributes for drawing the table and using the function 8 factorial56 factorials of the numbers can be calculated easil/. %"! "AM: a. *+uare of numbers< >html? >head? >title? s+uare >@title? >@head? >bod/? >script t/peBCtext@javascriptC? document.writeln5C>h1?s+uare of nos from 1 to 13>@h1?C6F for5var xB1Fx>B13FGGx6 document.writeln5Cthe s+uare of CGxG CisC G s+uare5x6GC>br@?C6F function s+uare5x6 H return xKxF I >@script? >@html? b. ,aximum of three numbers< >html? >head? >title? max >@title? >@head? >script t/peBCtext@javascriptC? var input1Bwindow.prompt5Center the first no<C8C3C6F var input2Bwindow.prompt5Center the second no<C8C3C6F var input3Bwindow.prompt5Center the third no<C8C3C6F var no1BparseFloat5input16F var no2BparseFloat5input26F var no3BparseFloat5input36F var maxvalueBmaximum5no18no28no36F document.writeln5Cfirst number is<CGno1GC>br@?C6F document.writeln5Csecond number is<CGno2GC>br@?C6F document.writeln5Cthird number is<CGno3GC>br@?C6F document.writeln5Cmax is<CGmaxvalue6F

function maximum5no18no26 H return ,ath.max5no18,ath.max5no28no366F I >@script? >@html? c. Factorial table< >html? >head? >title? factorial >@title? >@head? >bod/? >script t/peBCtext@javascriptC? document.writeln5C>h1?fact 1 to 13>@h1?C6F document.writeln5C>table borderBL1L8width5L133DL?C6F for5var iB3Fi>B13FiGG6 document.writeln5C>tr?>td?CGiGC>@td?>td?CGfactorial5i6GC>@td?>@tr?C6F document.writeln5C>@table?C6F function factorial5x6 H if5x>B16 return 1F else return xKfactorial5x:16F I >@script? >@html?

!&#%&#: a.*+uare of numbers<

b.maximum of three numbers

c.Factorial table<

"E'&L#: 7hus the above program has been executed successfull/.

5.Arra6s ,sing -a.ascript

AIM: 7o write the following programs to implement arra/s using javascript.

a. *um of arra/ elements b. Displa/ arra/ elements in table AL !"I#$M: *tep1< *tart the codings with head and title tags and declare the t/pe as text@javascript. *tep2< For calculating the sum of arra/ elements use the function start56 inside which the arra/ elements are declared and the sum is calculated. *tep3< For displa/ing the arra/ elements in table8 initialiAe the arra/s then declare the new arra/ n18n2 . Mive the table border 8 width and height and describe the subscripts and finall/ bod/ onload is called . %"! "AM: a. *um of arra/ elements< >html? >head? >title? sum of arra/ >@title? >script t/peBCtext@javascriptC? function start56 H var thearra/BN18283848"8$8)8-80813O var total1B3F for5var iB3Fi>thearra/.lengthFiGG6 total1GBthearra/NiOF document.writeln5Ctotal using subscriptsCGtotal16F I >@script? >@head? >bod/ onloadBCstart56C? >@bod/? >@html?

b. Displa/ arra/ elements in table< >html? >head?

>title?#nitialiAing an .rra/>@title? >script t/pe B Ctext@javascriptC? function initialiAe.rra/s56 H var n1 B new .rra/5 " 6F @@ allocate ":element .rra/ var n2 B new .rra/56F @@ allocate empt/ .rra/ for 5 var i B 3F i > n1.lengthF GGi 6 n1N i O B iF for 5 i B 3F i > "F GGi 6 n2N i O B iF output.rra/5 C.rra/ n1 containsC8 n1 6F output.rra/5 C.rra/ n2 containsC8 n2 6F I function output.rra/5 header8 the.rra/ 6 H document.writeln5 C>h2?C G header G C>@h2?C 6F document.writeln5 C>table border B L1L width BL133DL?C 6F document.writeln5 C>thead?>th width B L133L align B LleftL? *ubscript>@th?C G C>th align BLleftL?=alue>@th?>@thead?>tbod/?C 6F for 5 var i B 3F i > the.rra/.lengthF iGG 6 document.writeln5 C>tr?>td?C G i G C>@td?>td?C G the.rra/N i O G C>@td?>@tr?C 6F document.writeln5 C>@tbod/?>@table?C 6F I >@script? >@head?>bod/ onload B CinitialiAe.rra/s56C?>@bod/? >@html?

!&#%&#: a. *um of arra/ elements

b. Displa/ arra/ elements in table<

"E'&L#: 7hus the above programs has been executed successfull/.

7.8asca)ing st6le s*eets

AIM: 7o write the following programs to implement st/le sheets. a. #nline st/les b. *t/le sheets c. *pan box st/le d. #nheritance

e. 2ormal flow boxes AL !"I#$M: *tep1< 7o demonstrate inline st/les 8 declare the text with var/ing st/les and font siAes and also b/ appl/ing color. *tep2< 7o demonstrate the st/le sheets declare the class special 8 em and later call those special em to describe the st/les. *tep3< . css file which consists of all span box st/le such as border 8 width8 color and padding is saved in the director/ and a html codings is programmed referring to the span box css file created earlier. *tep4< 7o inherit the css in html 8 create a css file which contains of span boxes8 height8 width8 color and save in the director/ and write the codings referring to the inherit css file. *tep"< 7o displa/ a normal flow box 8 set the border and padding and then declare a div tag to draw the boxes. %"! "AM: a. #nline st/les< >html ? >head? >title?#nline *t/les>@title? >@head? >bod/? >p?7his text does not have an/ st/le applied to it.>@p? >p st/le B Cfont:siAe< 23ptC? *t.4eters >@p? >p st/le B Cfont:siAe< 23ptF color< E3333ffC? *t.4eters >@p? >@bod/? >@html? b. *t/le sheets< >html ? >head? >title?*t/le *heets>@title? >st/le t/pe B Ctext@cssC? em H background:color< E-333ffF color< white I h1 H font:famil/< arial8 sans:serif I p H font:siAe< 14pt I .special H color< red I >@st/le? >@head? >bod/? >h1 class B CspecialC?*t.4eters 9niversit/>@h1? >p?*t.4eters 9niversit/>@p? >h1?*tudents>@h1? >p class B CspecialC? 7he college >em?Fortune 1333 *tudents>@em?>@p? >@bod/?

>@html? c. *pan box st/les< >html? >head? >title? spanboxst/le.html >@title? >link relBCst/lesheetCt/peBCtext@cssChrefBCten.cssC@? >@head? >bod/? >p? the >span? first span >@span? and>span?second span>@span? >@p? >@bod/? >@html? d. #nheritance< 1** file< h18h28h38h48h"8h$Hbackground:color<purpleI KHfont:weight<boldI Ep18Ep3Hbackground:color<a+uaI Ep48takenoteHfont:st/le<italicI span specialHfont:siAe<x:largeI ul spanHfont:varient<small:capsI ul ol liHletter:spacing<1emI 1oding< >html? >head? >title? inherit.html >@title? >link relBCst/lesheetC t/peBCtext@cssC hrefBCinheritance.cssC@? >@head? >bod/? >h1? selector tests >@h1? >p idBCp1C classBCtake2oteC? paragraph with idBCp1C and classBCtake2oteC. >@p? >p idBCp2C classBCspecialC? second paragraph.>span classBCtake2ote special coolC?this span belongs to classes take2ote8special8 and cool.>@span? >ul? >li? spanLs within this list are in >span?small:cap>@span? st/le.>@li? >ol? >li? this item spaces letters.>@li? >@ol? >@ul? >@p? >p idBCp3C? third paragraph 5idBCp3C6 contains a >a hrefBC C?h/perlink>@a?

>ol? >li? this item contains a span but does not displa/ it in >span?small caps>@span?8nor does it space letters>@li? >@ol? >@p? >@bod/? >@html? e. 2ormal flow boxes< >html? >head? >title?blackboxes.html>@title? >st/le t/peBCtext@cssC? htmlHborder<solid pink thickI bod/Hborder<solid a+ua thinI bod/Hpadding<2"pxI divHmargin<3pxFpadding<1"pxFborder<solid black 4pxI .shadeHbackground:color<greenI .top,arginHmargin:top<33pxI >@st/le? >@head? >bod/? >div idBCd1C? >p?d1>@p? >div idBCd2C?>p?d2>@p? >div idBCd3C classBCshadeC?>p?d3>@p?>@div? >@div? >div idBCd4C classBC top,arginC?>p?d4>@p?>@div? >@div? >@bod/? >@html?

!&#%&#: a. #nline st/les<

b. *t/le sheets<

c. *pan box st/les<

d. #nheritance<

e. 2ormal flow boxes<

"E'&L#: 7hus the above program has been executed successfull/.

19.%ositioning in -a.ascript

AIM: 7o write a program using javascript to define the following positioning concepts. a. !elative positioning b. .bsolute positioning c. Float positioning AL !"I#$M: *tep1< For absolute and relative positioning 8 declare the position an8 top and left location of the text and give the content of the st/le in the bod/. *tep2< For float positioning 8 use the function img.float'eft and img.float!ight to make the images float on the right and left sides on the browser. %"! "AM: a. !elative positioning< >html? >head? >title?relative positioning>@title? >st/le? h3Hposition<relativeFtop<:13pxFleft<1"3pxFI pHposition<relativeFleft<:13pxFI >@st/le? >@head? >bod/? >h3?header field>@h3? >p?paragraph content>@p? >@bod/? >@html? b. .bsolute 4ositioning< >html? >head? >title?absolute positioning>@title? >st/le? h3Hposition<absoluteFtop<)"pxFleft<)"pxFI pHposition<absoluteFtop<03pxFleft<03pxFI >@st/le? >@head? >bod/? >h3?header field>@h3? >p?paragraph content>@p? >@bod/? >@html? c. Float 4ositioning< >html? >head? >title?float positioning>@title? >st/le? img.float'eftHfloat<leftFmargin<4pxFI img.float!ightHfloat<rightFmargin<4pxFI

>@st/le? >bod/? >img srcBCsunset.jpgCclassBCfloat'eftC? >p?this image will appear on the left side>@p? >img srcBCsunset.jpgCclassBCfloat!ightC? >p?this image will appear on the right side>@p? >@bod/? >@html? !&#%&#: a. !elative positioning<

b. .bsolute positioning<

c. Float positioning<

"E'&L#: 7hus the above program has been executed successfull/.

11. 'imple ser.let programming

AIM: 7o write a simple java program using servlet. AL !"I#$M: *tep1< !un the localhost 5port -3-36 on the browser. !un the servlet package in the command prompt. *tep2< 7/pe the java document on the program which consists of html codings with servlet and run the java command. *tep3< 1op/ the created class file after running the java program to the class in the server. *tep4< !un the local host with the servlet program. %"! "AM: import java.io.KF import javax.servlet.KF import javax.servlet.http.KF public class &ello%orld extends &ttp*ervlet H public void doMet5&ttp*ervlet!e+uest re+uest8 &ttp*ervlet!esponse response6 throws # (xception8 *ervlet(xception H response.set1ontent7/pe5Ctext@htmlC6F 4rint%riter out B response.get%riter56F out.println5C>html?C6F out.println5C>head?C6F out.println5C>title?&ello %orldJ>@title?C6F out.println5C>@head?C6F out.println5C>bod/?C6F out.println5C>h1?&ello %orldJ>@h1?C6F out.println5C>@bod/?C6F out.println5C>@html?C6F I I

!&#%&#:

"E'&L#: 7hus the above program has been executed successfull/.

1(.Doc,ment !b-ect Mo),les.

AIM: 7o write a simple javascript program using Document bject ,odules5D ,6.

AL !"I#$M: *tep1< 1reate the javascript document declaring the function show56 *tep2< %rite the html codings b/ using some mouse events such as onmouseover and onmouseout with reference to the javacsript command written above. %"! "AM: roll.js function show5id89!'6 H var id1 Bwindow.document.get(lement;/#d5id6F id1.set.ttribute5CsrcC89!'6F returnF I 1oding< >html? >head? >title? !ollover>@title? >script t/peBCtext@javascriptC srcBCroll.jsC? >@script? >@head? >bod/? >img idBCimg1C srcBCwinter.jpgC altBCflowerC heightBC233C widthBC233C onmouseoverBCshow5Limg1L8L*unset.jpgL6FC onmouseoutBCshow5Limg1L8L%inter.jpgL6FC? >@bod/? >@html?

!&#%&#: nmouseout<

nmouseover<

"E'&L#: 7hus the above program has been executed successfull/.