webtech lab manual - section a

INDEX

1. web pages for online bookstore2. create an image map and fix a hotspot on it3. javascript program for addition of two numbers4. Demonstration of FOR loop using javascript5. Demonstration of IF loop using javascript6. Demonstration of WHILE loop using javascript7. Functions in javascript a.Square of numbers b.Maximum of three numbers c. Factorial of numbers8.Arrays in javascript a. Sum of array elements b. Display array elements in table9. Cascading style sheets a. inline styles b. style sheets c. Span boxes d. inheritance e. Normal flow boxes10. Positioning a. Relative positioning b. Absolute positioning c. Float positioning11. Simple servlet programming12. Document object Models

1.Webpages for online bookstore

AIM: Develop static pages (using only html) of an online book store. The pages should resemble www.amazon.com . The website should consists of the following pages,

a. Home pageb. Registrationc. User Log-ind. Books catalog

ALGORITHM: Step 1: write the html codings with head,title and body tags for the home page which includes a link to login page and submit as the input type. Step2: write the html codings for login page with corresponding head,title and body tags with links to registration page and books catalog.Various input types and radio buttons are used. Step3: write the html codings for registration page with all basic html layout and with a link which leads back to login page after registration. Step4: write the codings for books catalog with details of the books available in the store.

PROGRAM:Main Page:

<html><title>homepage</title><body><center><h1>welcome to amazon.com</h1></center><br/><p><right><a href="login.html">existing user click here</a></rightt></p><p><a href="registration.html">click here to go to registration page</a></p></body></html>

Log-in Page:

<html><title>user login</title><body><center><h1>welcome to login page</h1></center><br/><form method="post" action="bookscatalog.html"><p><b>username</b><input type="text" name="username" size=25></b></p><br/><p><b>password<input type="password" name="password" size="9"></b></p><br/><p><center><input type="submit" name="login" value="submit" method="select"> <input type="reset" value="reset"></center></b></p></form></body></html>

http://www.amazon.com/

Registration:

<html><title>registration</title><body><center><h1>welcome to amazon.com</h1></center><br/><h2>new user registration</h2><br/><form method="post" action="login.html"><p><b>username</b><input type="text" name="username" size=25></b></p><br/><p><b>password<input type="password" name="password" size="9"></b></p><br/><p><b>confirm password<input type="password" name="password" size="9"></b></p><br/><p><b>sex: <input type="radio" value="male">male <input type="radio" value="female">female</b></p><br/><p><b>address box<textarea name="address" row="6" cols="20"></textarea></b></p><br/><p><b>mobile no:<input type="text" name="mobile no." size="10"></b></p><br/><p><b><center><input type="submit" name="submit" method="get"> <input type="reset" name="reset" method="back"></p></b><br/></form></body></html>

Books Catalog

<html><title>user login</title><body><center><h1>welcome to books catalog</h1></center><br/><table border=" 5" width="25%" height="50%"<tr><th>computers</th><th>electronics</th><th>biotech</th><th>mechanical</th</tr></form></body></html>

OUTPUT:

Home Page:

Log-in Page:

Registration:

Books Catalog:

RESULT: Thus the program has been executed successfully.

2. Image map and hot spot

AIM: To create an image map using HTML and fix a hot spot on it.

ALGORITHM:

Step1: Draw a image map using paint Step2: write html codings describing personal details. Step3: write html codings describing the information about our contacts. Step4: write html codings for the image map by fixing the hot spots on it by linking it to the personal and contact details.

PROGRAM :

Personal:

<html><head><title>personal</title></head><body><p><b>personal:</b></br>name:xxx</br>dept:IT</br>year:III</br>sect:A</br></p></body></html>

Address:

<html><head><title>contact</title></head><body><p><b>Address:</b></br>door no:11</br>xxx street</br>chennai</br>pin:0000000</br></p></body></html>

Image map:

<html><head><title>imagemap</title></head><body><map name="imagemap"id="imagemap"><area shape="circle"coords="75,60,60"href="cont.html"title="contact"alt="contact"><area shape="circle"coords="225,50,25"href="pre.html"title="personal"alt="personal"></map><image src="p2.bmp"height="600"width="800"usemap="#imagemap"/></body></html>

OUTPUT:

ImageMap:

Personal:

Contact:

RESULT: Thus the above program is executed successfully.

3.Addition of two numbers using javascript

AIM: To develop a web page using javascript for addition of two numbers.

ALGORITHM: Step1: start the codings with head,title tags. Step2: Declare the type as javascript and declare two numbers whose sum is to be calculated. Step3: Declare the window prompt which is a javascript application for those two numbers. Step4: add the numbers and result which is stored in sum is displayed finally.PROGRAM:

<html><head><title>addition</title></head><body><script type="text/javascript">var firstnum;var secondnum;var num1;var num2;var sum;firstnum=window.prompt("enter num1","0");secondnum=window.prompt("enter num2","0");num1=parseInt(firstnum);num2=parseInt(secondnum);sum=num1+num2;document.writeln("<h1>the sum is" +sum +"</h1>");</script></body></html>

OUTPUT:

RESULT: Thus the above program has been executed successfully.

4.IF condition-javascript

AIM: To write a program using javascript to demonstrate IF loop.

ALGORITHM: Step1: start the codings with head,title tags. Step2: Declare the type as javascript and declare the date variable. Step3: If hour is lesser than 12 then good morning will be displayed and if it is >= 12, then good afternoon ao good evening will be displayed Step4: Declare a window prompt to enter the name. PROGRAM:

<html><head><title>java script using if</title></head><script type="text/javascript">var name,now=new Date(),hour=now.getHours();name=window.prompt("enter name","");if(hour<12)document.write("<h1>good morning");if(hour>=12){hour=hour-12;if(hour<6)document.write("<h1>good afternoon");if(hour>=6)document.write("<h1>good evening");}document.writeln(name + ", welcome to javascript programming!</h1>");</script><body></body></html>

OUTPUT:


5.FOR loop using javascript

AIM: To write a program using javascript to demonstrate FOR loop.ALGORITHM: Step1: Start the codings with head and title tags and declare the type as text/javascript Step2: Use the for loop to declare the counter.PROGRAM:

<html><head><title> FOR</title></head><script type="text/javascript">for(var counter=1;counter<=7;++counter){document.writeln("</br>the number is= "+counter);}</script></html>

OUTPUT:


6.WHILE loop using javascript

AIM: To write a program using javascript to demonstrate WHILE loop.

ALGORITHM: Step1: Start the codings with head and title tags and declare the type as text/javascript Step2: Use the While loop to declare the counter.

PROGRAM:

<html><head><title> sc </title></head><script type="text/javascript">var counter=1;while(counter <=7){document.writeln("</br>the number is= "+counter);++counter;}</script></html>

OUTPUT:

RESULT: Thus the above program has been executed successfully

7.Functions using javascript

AIM: To write the following programs to implement functions using javascript.

a. Square of numbersb. Maximum of three numbersc. Factorial table

ALGORITHM: Step1: Start the codings with head and title tags and declare the type as text/javascript Step2: For calculating the square of numbers use the function square() and use the for loop to declare the numbers to which square has to be calculated. Step3: For calculating the maximum of three numbers use the function maximum() and a built-in object math.max to calculate the maximum of three numbers which is declared earlier.Window prompt application is used to get the input of those three numbers. Step4: For drawing the factorial table , set the table border and declare the attributes for drawing the table and using the function , factorial() factorials of the numbers can be calculated easily.

PROGRAM:

a. Square of numbers:

<html><head><title>square</title></head><body><script type="text/javascript">document.writeln("<h1>square of nos from 1 to 10</h1>");for(var x=1;x<=10;++x)document.writeln("the square of "+x+ "is" + square(x)+"<br/>");function square(x){return x*x;}</script></html>

b. Maximum of three numbers:

<html><head><title>max</title></head><script type="text/javascript">var input1=window.prompt("enter the first no:","0");var input2=window.prompt("enter the second no:","0");

var input3=window.prompt("enter the third no:","0");var no1=parseFloat(input1);var no2=parseFloat(input2);var no3=parseFloat(input3);var maxvalue=maximum(no1,no2,no3);document.writeln("first number is:"+no1+"<br/>");document.writeln("second number is:"+no2+"<br/>");document.writeln("third number is:"+no3+"<br/>");document.writeln("max is:"+maxvalue);function maximum(no1,no2){return Math.max(no1,Math.max(no2,no3));}</script></html>

c. Factorial table:

<html><head><title>factorial</title></head><body><script type="text/javascript">document.writeln("<h1>fact 1 to 10</h1>");document.writeln("<table border='1',width('100%'>");for(var i=0;i<=10;i++)document.writeln("<tr><td>"+i+"</td><td>"+factorial(i)+"</td></tr>");document.writeln("</table>");function factorial(x){if(x<=1)return 1;elsereturn x*factorial(x-1);}</script></html>

OUTPUT:

a.Square of numbers:

b. maximum of three numbers

c. Factorial table:


8.Arrays using javascript

AIM: To write the following programs to implement arrays using javascript.

a. Sum of array elementsb. Display array elements in table

ALGORITHM: Step1: Start the codings with head and title tags and declare the type as text/javascript. Step2: For calculating the sum of array elements use the function start() inside which the array elements are declared and the sum is calculated. Step3: For displaying the array elements in table, initialize the arrays then declare the new array n1,n2 . Give the table border , width and height and describe the subscripts and finally body onload is called .

PROGRAM:

a. Sum of array elements:

<html><head><title>sum of array</title><script type="text/javascript">function start(){var thearray=[1,2,3,4,5,6,7,8,9,10]var total1=0;for(var i=0;i<thearray.length;i++)total1+=thearray[i];document.writeln("total using subscripts"+total1);}</script></head><body onload="start()"></body></html>

b. Display array elements in table:

<html><head> <title>Initializing an Array</title><script type = "text/javascript"> function initializeArrays() { var n1 = new Array( 5 ); // allocate 5-element Array var n2 = new Array(); // allocate empty Array for ( var i = 0; i < n1.length; ++i ) n1[ i ] = i; for ( i = 0; i < 5; ++i ) n2[ i ] = i; outputArray( "Array n1 contains", n1 ); outputArray( "Array n2 contains", n2 ); } function outputArray( header, theArray ) { document.writeln( "<h2>" + header + "</h2>" ); document.writeln( "<table border = '1' width ='100%'>" ); document.writeln( "<thead><th width = '100' align = 'left'> Subscript</th>" + "<th align ='left'>Value</th></thead><tbody>" ); for ( var i = 0; i < theArray.length; i++ ) document.writeln( "<tr><td>" + i + "</td><td>" + theArray[ i ] + "</td></tr>" ); document.writeln( "</tbody></table>" ); } </script> </head><body onload = "initializeArrays()"></body> </html>

OUTPUT:

a. Sum of array elements

b. Display array elements in table:

RESULT: Thus the above programs has been executed successfully.

9.Cascading style sheets

AIM:

To write the following programs to implement style sheets.a. Inline stylesb. Style sheetsc. Span box styled. Inheritancee. Normal flow boxes

ALGORITHM: Step1: To demonstrate inline styles , declare the text with varying styles and font sizes and also by applying color. Step2: To demonstrate the style sheets declare the class special , em and later call those special em to describe the styles. Step3: A css file which consists of all span box style such as border , width, color and padding is saved in the directory and a html codings is programmed referring to the span box css file created earlier. Step4: To inherit the css in html , create a css file which contains of span boxes, height, width, color and save in the directory and write the codings referring to the inherit css file. Step5: To display a normal flow box , set the border and padding and then declare a div tag to draw the boxes.

PROGRAM:

a. Inline styles:

<html ><head><title>Inline Styles</title></head><body><p>This text does not have any style applied to it.</p><p style = "font-size: 20pt"> St.Peters </p><p style = "font-size: 20pt; color: #0000ff"> St.Peters </p></body></html>

b. Style sheets:

<html ><head><title>Style Sheets</title><style type = "text/css">em { background-color: #8000ff;color: white }h1 { font-family: arial, sans-serif }p { font-size: 14pt }.special { color: red }</style></head>

<body><h1 class = "special">St.Peters University</h1><p>St.Peters University</p><h1>Students</h1><p class = "special"> The college<em>Fortune 1000 Students</em></p></body></html>

c. Span box styles: <html><head><title>spanboxstyle.html</title><link rel="stylesheet"type="text/css"href="ten.css"/></head><body><p>the <span> first span </span> and<span>second span</span></p></body></html>

d. Inheritance: CSS file:h1,h2,h3,h4,h5,h6{background-color:purple}*{font-weight:bold}#p1,#p3{background-color:aqua}#p4,takenote{font-style:italic}span special{font-size:x-large}ul span{font-varient:small-caps}ul ol li{letter-spacing:1em}

Coding:<html><head><title> inherit.html </title><link rel="stylesheet" type="text/css" href="inheritance.css"/></head><body><h1> selector tests </h1><p id="p1" class="takeNote">paragraph with id="p1" and class="takeNote".</p><p id="p2" class="special">second paragraph.<span class="takeNote special cool">this span belongs to classes takeNote,special, and cool.</span>

<ul><li> span's within this list are in <span>small-cap</span>style.</li><ol><li> this item spaces letters.</li></ol></ul></p><p id="p3">third paragraph (id="p3") contains a <a href=" ">hyperlink</a><ol><li> this item contains a span but does not display it in <span>small caps</span>,nor does it space letters</li></ol></p></body></html>

e. Normal flow boxes: <html><head><title>blackboxes.html</title><style type="text/css">html{border:solid pink thick}body{border:solid aqua thin}body{padding:25px}div{margin:0px;padding:15px;border:solid black 4px}.shade{background-color:green}.topMargin{margin-top:30px}</style></head><body><div id="d1"> <p>d1</p><div id="d2"><p>d2</p><div id="d3" class="shade"><p>d3</p></div></div><div id="d4" class=" topMargin"><p>d4</p></div></div></body></html>

OUTPUT:

a. Inline styles:

b. Style sheets:

c. Span box styles:

d. Inheritance:

e. Normal flow boxes:


10.Positioning in javascript

AIM: To write a program using javascript to define the following positioning concepts.

a. Relative positioningb. Absolute positioningc. Float positioning

ALGORITHM:

Step1: For absolute and relative positioning , declare the position an, top and left location of the text and give the content of the style in the body. Step2: For float positioning , use the function img.floatLeft and img.floatRight to make the images float on the right and left sides on the browser.

PROGRAM:

a. Relative positioning: <html><head><title>relative positioning</title><style>h3{position:relative;top:-10px;left:150px;}p{position:relative;left:-10px;}</style></head><body><h3>header field</h3><p>paragraph content</p></body></html>

b. Absolute Positioning: <html><head><title>absolute positioning</title><style>h3{position:absolute;top:75px;left:75px;}p{position:absolute;top:90px;left:90px;}</style></head><body><h3>header field</h3><p>paragraph content</p></body></html>

c. Float Positioning: <html>

<head><title>float positioning</title><style>img.floatLeft{float:left;margin:4px;}img.floatRight{float:right;margin:4px;}</style><body><img src="sunset.jpg"class="floatLeft"><p>this image will appear on the left side</p><img src="sunset.jpg"class="floatRight"><p>this image will appear on the right side</p></body></html>

OUTPUT:

a. Relative positioning:

b. Absolute positioning:

c. Float positioning:


11. Simple servlet programming

AIM: To write a simple java program using servlet.

ALGORITHM:

Step1: Run the localhost (port 8080) on the browser. Run the servlet package in the command prompt. Step2: Type the java document on the program which consists of html codings with servlet and run the java command. Step3: Copy the created class file after running the java program to the class in the server. Step4: Run the local host with the servlet program.

PROGRAM:

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;

public class HelloWorld extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<html>"); out.println("<head>"); out.println("<title>Hello World!</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Hello World!</h1>"); out.println("</body>"); out.println("</html>"); }}

OUTPUT:


12.Document Object Modules.

AIM: To write a simple javascript program using Document Object Modules(DOM).

ALGORITHM:

Step1: Create the javascript document declaring the function show() Step2: Write the html codings by using some mouse events such as onmouseover and onmouseout with reference to the javacsript command written above.

PROGRAM:

roll.js

function show(id,URL){var id1 =window.document.getElementById(id);id1.setAttribute("src",URL);return;}

Coding:

<html><head><title> Rollover</title><script type="text/javascript" src="roll.js"></script></head><body><img id="img1" src="winter.jpg" alt="flower" height="200" width="200" onmouseover="show('img1','Sunset.jpg');" onmouseout="show('img1','Winter.jpg');"></body></html>

OUTPUT:

Onmouseout:

Onmouseover:


webtech lab manual - section a

Documents