Visvesvaraya Technological University (VTU)
PG and SDC, Talakal
Web Technologies
(Course Code: MMC105)
Lab Programs
Department of MCA
Web Technologies — Lab programs
Contents
1 XHTML Program – Department of MCA 2
2 XHTML + JavaScript – Fibonacci Series, Squares 5
3 XHTML + JavaScript: Paragraph Stacking Effect 8
4 XHTML + JavaScript: Fruit Cost Calculator 12
1
Web Technologies — Lab programs
1. XHTML Program – Department of MCA
Question
Lab Question
Create an XHTML page that provides information about your department. Your XHTML
page must use the following tags: a) Text Formatting tags b) Horizontal rule c) Meta
element d) Links e) Images f) Tables (Use of additional tags encouraged.)
Program
1 <?xml version ="1.0" encoding ="UTF -8"?>
2 <! DOCTYPE html >
3
4 <html xmlns ="http :// [Link] /1999/ xhtml " lang="en">
5
6 <head >
7 <meta charset ="UTF -8" />
8 <meta name=" description " content =" Information page for the
Department of MCA" />
9 <meta name=" viewport " content =" width =device -width , initial - scale
=1.0" />
10
11 <title >Department of MCA </ title >
12 </head >
13
14 <body >
15
16 <h1>Department of <span style =" color :blue;">MCA </span ></h1 >
17
18 <!-- Text Formatting Tags -->
19 <p>
20 Welcome to the <b>Master of Computer Applications (MCA)</b>
Department .
21 We focus on <i>academic excellence </i>, <u>industry skills </
u>, and
22 <strong >research - oriented learning </ strong >.
23 Our mission is to provide <em >quality education </em > and
develop
24 <mark >future - ready professionals </mark >.
25 </p>
26
27 <!-- Horizontal Rule -->
28 <hr />
2
Web Technologies — Lab programs
29
30 <!-- Image -->
31 <h2>Department Building </h2 >
32 <img src=" mca_department .jpg" alt="MCA Department Building "
width ="350" height ="220" />
33
34 <hr />
35
36 <!-- Links -->
37 <h2>Useful Links </h2 >
38 <p>
39 Visit our
40 <a href=" https :// example .com/mca" target =" _blank ">Official
MCA Department Website </a>.
41 </p>
42
43 <!-- Table -->
44 <h2>Courses Offered </h2 >
45 <table border ="1" cellpadding ="8" cellspacing ="0">
46 <tr >
47 <th >Course </th >
48 <th >Duration </th >
49 <th >Intake </th >
50 </tr >
51 <tr >
52 <td >MCA ( Master of Computer Applications )</td >
53 <td >2 Years </td >
54 <td >60 Students </td >
55 </tr >
56 <tr >
57 <td >Certificate in Data Analytics </td >
58 <td >6 Months </td >
59 <td >30 Students </td >
60 </tr >
61 <tr >
62 <td >Certificate in Cloud Computing </td >
63 <td >6 Months </td >
64 <td >30 Students </td >
65 </tr >
66 </table >
67
68 <hr />
69
70 <!-- Additional Tags -->
71 <h2>Contact Information </h2 >
72 <p>
3
Web Technologies — Lab programs
73 <strong >Email :</ strong > mca@example .com <br />
74 <strong >Phone :</ strong > +91 -9876543210 <br />
75 </p>
76
77 <div style =" border :1 px solid #ccc; padding :10 px;">
78 This page belongs to the
79 <span style =" color : green ;">Department of MCA </span >.
80 </div >
81
82 </body >
83 </html >
Listing 1: XHTML Page for Department of MCA
4
Web Technologies — Lab programs
2. XHTML + JavaScript – Fibonacci Series, Squares
Question
Lab Question
Develop and demonstrate an XHTML file that includes JavaScript script for the following
problems:
a) Input: A number n obtained using prompt()
Output: The first n Fibonacci numbers
b) Input: A number n obtained using prompt()
Output: A table of numbers from 1 to n and their squares using alert()
Program (a): Fibonacci Series
1 <?xml version ="1.0" encoding ="UTF -8"?>
2 <! DOCTYPE html >
3
4 <html xmlns ="http :// [Link] /1999/ xhtml ">
5 <head >
6 <title >Fibonacci Series </ title >
7 </head >
8
9 <body >
10 <script type="text/ javascript ">
11 var n = prompt (" Enter a number :");
12 n = parseInt (n);
13
14 if (n <= 0) {
15 alert (" Please enter a positive number ");
16 } else {
17 var a = 0;
18 var b = 1;
19 var c;
20 var fib = "";
21
22 if (n >= 1) {
23 fib = a;
24 }
25 if (n >= 2) {
26 fib = fib + " " + b;
27 }
28
29 for (var i = 3; i <= n; i++) {
30 c = a + b;
5
Web Technologies — Lab programs
31 fib = fib + " " + c;
32 a = b;
33 b = c;
34 }
35
36 alert (" Fibonacci Series :\n" + fib);
37 }
38 </ script >
39 </body >
40 </html >
Listing 2: XHTML Page with JavaScript for Fibonacci Series
Output
Enter a number: 5
Fibonacci Series:
0 1 1 2 3
Program (b): Squares of Numbers
1 <?xml version ="1.0" encoding ="UTF -8"?>
2 <! DOCTYPE html >
3
4 <html xmlns ="http :// [Link] /1999/ xhtml ">
5 <head >
6 <title >Squares of Numbers </ title >
7 </head >
8
9 <body >
10 <script type="text/ javascript ">
11 var n = prompt (" Enter a number :");
12 n = parseInt (n);
13
14 if (n <= 0) {
15 alert (" Please enter a positive number ");
16 } else {
17 var result = "";
18
19 for (var i = 1; i <= n; i++) {
20 result = result + i + " - " + (i * i) + "\n";
21 }
22
23 alert (" Number - Square \n" + result );
24 }
6
Web Technologies — Lab programs
25 </ script >
26 </body >
27 </html >
Listing 3: XHTML Page with JavaScript for Squares of Numbers
Output
Enter a number: 4
Number - Square
1 - 1
2 - 4
3 - 9
4 - 16
7
Web Technologies — Lab programs
3. XHTML + JavaScript: Paragraph Stacking Effect
Question
Lab Question
a) Develop and demonstrate, using JavaScript script, an XHTML document that
contains three short paragraphs of text, stacked on top of each other, with only
enough of each showing so that the mouse cursor can be placed over some part of
them. When the cursor is placed over the exposed part of any paragraph, it should
rise to the top to become completely visible.
b) Modify the above document so that when a paragraph is moved from the top
stacking position, it returns to its original position rather than to the bottom.
Program (a): Paragraph comes to top on mouse over
1 <?xml version ="1.0" encoding ="UTF -8"?>
2 <! DOCTYPE html >
3
4 <html xmlns ="http :// [Link] /1999/ xhtml ">
5 <head >
6 <title >Stacked Paragraphs </ title >
7
8 <style type="text/css">
9 # para1 {
10 border : 2px solid black ;
11 background - color : lightblue ;
12 padding : 10 px;
13 width : 300 px;
14 height : 150 px;
15 position : absolute ;
16 top: 100 px;
17 left: 200 px;
18 z- index : 0;
19 }
20
21 # para2 {
22 border : 2px solid black ;
23 background - color : lightgreen ;
24 padding : 10 px;
25 width : 300 px;
26 height : 150 px;
27 position : absolute ;
28 top: 120 px;
29 left: 220 px;
8
Web Technologies — Lab programs
30 z- index : 0;
31 }
32
33 # para3 {
34 border : 2px solid black ;
35 background - color : lightyellow ;
36 padding : 10 px;
37 width : 300 px;
38 height : 150 px;
39 position : absolute ;
40 top: 140 px;
41 left: 240 px;
42 z- index : 0;
43 }
44 </style >
45
46 <script type="text/ javascript ">
47 var topPara = " para3 ";
48
49 function bringTop (id) {
50 document . getElementById ( topPara ). style . zIndex = "0";
51 document . getElementById (id). style . zIndex = "1";
52 topPara = id;
53 }
54 </ script >
55 </head >
56
57 <body >
58
59 <p id="para1 " onmouseover =" bringTop (’para1 ’)">
60 Paragraph One. Move mouse here.
61 </p>
62
63 <p id="para2 " onmouseover =" bringTop (’para2 ’)">
64 Paragraph Two. Hover to see fully .
65 </p>
66
67 <p id="para3 " onmouseover =" bringTop (’para3 ’)">
68 Paragraph Three . Mouse over me.
69 </p>
70
71 </body >
72 </html >
Listing 4: Paragraph comes to top on mouse over (moves to bottom when another paragraph is selected)
9
Web Technologies — Lab programs
Output (a)
When the mouse cursor is placed over any paragraph,
that paragraph comes to the top and becomes fully visible.
Program (b): Paragraph returns to its original position
1 <?xml version ="1.0" encoding ="UTF -8"?>
2 <! DOCTYPE html >
3
4 <html xmlns ="http :// [Link] /1999/ xhtml ">
5 <head >
6 <title >Stacked Paragraphs - Modified </ title >
7
8 <style type="text/css">
9 # para1 {
10 border : 2px solid black ;
11 background - color : lightblue ;
12 padding : 10 px;
13 width : 300 px;
14 height : 150 px;
15 position : absolute ;
16 top: 100 px;
17 left: 200 px;
18 z- index : 1;
19 }
20
21 # para2 {
22 border : 2px solid black ;
23 background - color : lightgreen ;
24 padding : 10 px;
25 width : 300 px;
26 height : 150 px;
27 position : absolute ;
28 top: 120 px;
29 left: 220 px;
30 z- index : 2;
31 }
32
33 # para3 {
34 border : 2px solid black ;
35 background - color : lightyellow ;
36 padding : 10 px;
37 width : 300 px;
38 height : 150 px;
39 position : absolute ;
10
Web Technologies — Lab programs
40 top: 140 px;
41 left: 240 px;
42 z- index : 3;
43 }
44 </style >
45
46 <script type="text/ javascript ">
47 function bringTop (id) {
48 document . getElementById (id). style . zIndex = 10;
49 }
50
51 function goBack (id , original ) {
52 document . getElementById (id). style . zIndex = original ;
53 }
54 </ script >
55 </head >
56
57 <body >
58
59 <p id="para1 "
60 onmouseover =" bringTop (’para1 ’)"
61 onmouseout =" goBack (’para1 ’ ,1)">
62 Paragraph One. Returns to original place .
63 </p>
64
65 <p id="para2 "
66 onmouseover =" bringTop (’para2 ’)"
67 onmouseout =" goBack (’para2 ’ ,2)">
68 Paragraph Two. Original order restored .
69 </p>
70
71 <p id="para3 "
72 onmouseover =" bringTop (’para3 ’)"
73 onmouseout =" goBack (’para3 ’ ,3)">
74 Paragraph Three . Not sent to bottom .
75 </p>
76
77 </body >
78 </html >
Listing 5: Paragraph returns to its original position instead of bottom
Output (b)
When the mouse cursor is removed from a paragraph,
it returns to its original stacking position.
11
Web Technologies — Lab programs
4. XHTML + JavaScript: Fruit Cost Calculator
Question
Lab Question
Develop, test and validate an XHTML document that has checkboxes for apple (59 cents
each), orange (49 cents each), and banana (39 cents each) along with submit button. Each
check boxes should have its own onclick event handler. These handlers must add the cost
of their fruit to a total cost. An event handler for the submit button must produce an alert
window with message your total cost is XXX, where xxx is the total cost of the chose fruit
, including 5 percent sales tax. this handler must return false( to avoid actual submission
of the form data). Modify the document to accept quantity for each item using textboxes.
Program
1 <?xml version ="1.0" encoding ="UTF -8"?>
2 <! DOCTYPE html >
3
4 <html xmlns ="http :// [Link] /1999/ xhtml ">
5 <head >
6 <title >Fruit Cost Calculator </ title >
7
8 <script type="text/ javascript ">
9 var total = 0;
10
11 function appleClicked (box) {
12 if (box. checked )
13 total = total + 0.59;
14 else
15 total = total - 0.59;
16 }
17
18 function orangeClicked (box) {
19 if (box. checked )
20 total = total + 0.49;
21 else
22 total = total - 0.49;
23 }
24
25 function bananaClicked (box) {
26 if (box. checked )
27 total = total + 0.39;
28 else
29 total = total - 0.39;
12
Web Technologies — Lab programs
30 }
31
32 function showTotal () {
33 var tax = total * 0.05;
34 var finalCost = total + tax;
35
36 alert ("Your total cost is $" + finalCost . toFixed (2));
37 return false ;
38 }
39 </ script >
40 </head >
41
42 <body >
43 <h2>Fruit Purchase </h2 >
44
45 <form onsubmit =" return showTotal ();">
46
47 <input type=" checkbox " onclick =" appleClicked (this)" />
48 Apple (59 cents )
49 <br /><br />
50
51 <input type=" checkbox " onclick =" orangeClicked (this)" />
52 Orange (49 cents )
53 <br /><br />
54
55 <input type=" checkbox " onclick =" bananaClicked (this)" />
56 Banana (39 cents )
57 <br /><br />
58
59 <input type=" submit " value =" Submit " />
60
61 </form >
62 </body >
63 </html >
Listing 6: XHTML + JavaScript: Fruit Cost Calculator
13