[go: up one dir, main page]
Scribd
Upload
14 views61 pages

23SEC201 - Web Programming - Practical

The document outlines practical exercises for a Web Programming course at Karpagam Academy of Higher Education, focusing on HTML and JavaScript. It includes detailed instructions and algorithms for creating web pages, forms, tables, and using frames, along with example code snippets. Each exercise concludes with a verification of successful execution of the HTML code.

Uploaded by

A.Vinitha Computer Applications
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views61 pages

23SEC201 - Web Programming - Practical

The document outlines practical exercises for a Web Programming course at Karpagam Academy of Higher Education, focusing on HTML and JavaScript. It includes detailed instructions and algorithms for creating web pages, forms, tables, and using frames, along with example code snippets. Each exercise concludes with a verification of successful execution of the HTML code.

Uploaded by

A.Vinitha Computer Applications
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 61

KARPAGAM ACADEMY OF HIGHER EDUCATION

(Deemed to be University)
(Established Under Section 3 of UGC Act, 1956)
(Accredited with A+ Grade by NAAC in the Second Cycle)
Pollachi Main Road, Eachanari Post, Coimbatore – 641 021

DEPARTMENT OF COMPUTER SCIENCE

WEB PROGRAMMING - PRACTICAL


(23SEC201)

I B.Sc.CS
SEMESTER - II

Name :

Register No. :

1
KARPAGAM ACADEMY OF HIGHER EDUCATION
(Deemed to be University)
(Established Under Section 3 of UGC Act, 1956)
(Accredited with A+ Grade by NAAC in the Second Cycle)
Pollachi Main Road, Eachanari Post, Coimbatore – 641 021

DEPARTMENT OF COMPUTER SCIENCE


CERTIFICATE
This is to certify that this is a bonafide record work done by _____________doing

BACHELOR OF COMPUTER SCIENCE for the practical Examination

in Web Programming - Practical (23SEC201) held on________

Staff-in-charge Head of the Department

Internal Examiner External Examiner


CONTENTS
Sl. PAGE
DATE TITLE SIGNATURE
NO NO
1 CREATING A WEB PAGE USING HTML

WEB PAGE USING LISTS, IMAGES,


2
INTERNAL AND EXTERNAL LINKS
3 TABLE CREATION IN HTML

4 HTML FORMS

5 HTML FORMS IN TABULAR FORM

6 FRAMES

7 HORIZONTAL FRAMES

8 WEB PAGE USING INLINE CSS

WEB PAGE USING INTERNAL


9 STYLESHEETS
WEB PAGE USING EXTERNAL
10 STYLE SHEETS
JAVASCRIPT PROGRAM TO CALCULATE
11 SQUARES AND CUBES
JAVASCRIPT PROGRAM TO FIND THE
12 LARGEST OF THREE NUMBERS
JAVASCRIPT PROGRAM TO FIND THE
13 FACTORIAL OF A NUMBER
JAVASCRIPT PROGRAM TO CALCULATE
14 SUM AND AVERAGE OF NUMBERS
JAVASCRIPT PROGRAM TO COUNT
15 POSITIVE, NEGATIVE NUMBERS IN THE
LIST
JAVASCRIPT PROGRAM TO PROMPT
16 USER NAME

3
EX. NO:1
CREATING A WEB PAGE USING HTML

AIM:
To create a web page using following formatting – Bold, Italics, Underline, Colors,
Headings, Title, Font and Font Width, Background, Paragraph, Line Breaks,
Horizontal Line, Blinking text as well as marquee text.

ALGORITHM:

STEP 1: Start. Open Notepad and type the code.


STEP 2: Use specific HTML tags for Bold, Italics, Underline, Colors, Headings, Title, Font,
Font Width, Background, Paragraph, Line Breaks, Horizontal Line, Blinking Text and
Marquee Text.
<b> - Bold the text
<i> - Italicize the text
<u> - Underline the text.
<h1> to <h6> - Headings
<p> - Paragraph
<br> - Line break
<hr> - Horizontal line

STEP 3: Save the program as p1.html.


STEP 4: Open the program in Browser.

4
PROGRAM:

File name: p1.html

<html>
<!--Title of the Web page -->
<title>First Web Program </title>
<!-– Body background -->
<body bgcolor="yellow">
<center>
My First Web Page</center>
<!-– Horizontal Line -->
<hr>
<br>
<br>
<!--Bold -->
<b>HTML is the code that is used to structure a web page and its content.<b><br>
<!--Underline -->
<u>HTML is not a programming language; it is a markup language</u><br>
<!--Italics -->
<i> HTML is a markup language </i><br>
<!-– Font color and size -->
<font color="Blue" size=10>Originally, HTML was primarily designed as a language </font>
<!-- Paragraph -->
<p>HTML, its supporting DOM APIs, as well as many of its supporting technologies, have
been developed over a period of several decades by a wide array of people with different
priorities
who, in many cases, did not know of each other's existence.</p>
<br>
<!-– Blinking Text --- >
<blink> Here is your text that has to blink. </blink><br>
<!-- Marquee Text -->
<marquee>This is basic example of marquee</marquee><br>
<!-– Headings -->
<h1>My main title</h1>
<h2>My top level heading</h2>
5
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
<h5>My text in h5</h5>
<h6> Text in h6</h6>
<br>
</body>
</html>

6
OUTPUT:

RESULT:
The above HTML program is executed successfully and the output is verified.

7
EX. NO:2 WEB PAGE USING LISTS, IMAGES, INTERNAL AND EXTERNAL
LINKS

AIM:
To create a web page using Ordered Lists, Unordered Lists, Inserting images, Internal
and External Links.

ALGORITHM:

STEP 1: Start. Open Notepad and type the code.


STEP 2: To create an ordered list use <ol> and for unordered list use <ul>.
Inside <ol> and <ul> use <li> tags.
STEP 3: Use the <img> to insert images in web pages.
STEP 4: Use <a> tag to create links
STEP 5: Stop the program and execute in Browser.

8
PROGRAM:

Filename: p2.html
<html>
<title> Lists, Images and Links </title>
<body>
<font face="Arial"><u><b>Ordered Lists:</b></u></font>
<!--Ordered Lists-->
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ol>
<br>
<font face="Arial"><u><b>Unordered Lists:</b></u></font>
<!-- Unordered Lists-->
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
<br>
<! -- Adding Images -->
<img src="C:\Users\user\Pictures\cup.jpg" alt="Cup" height=200 width=200>
<br>
<!-- Internal Linking -->
<a href="#top">Top</a>

<! -- External Linking -->


< a href="next.html">Next</a>
</body>
</html>

9
OUTPUT:

10
Next.html:

RESULT:
The above HTML program is executed successfully and the output is verified.

11
EX. NO: 3
TABLE CREATION IN HTML

AIM:
To create a Table using HTML.

ALGORITHM:

STEP 1: Start. Open Notepad and type the codeto create table.
STEP 2: Create a table using <table></table>
STEP 3: Create rows in the table using <tr>This is the row tag</tr>.
STEP 4: Insert the data into rows using <td> Table Data</td> tags.
STEP 5: Close the </table> and </html> tag.

12
PROGRAM:
<html>
<body>
<h1><center>TIME TABLE</center></h1>
<table border="5" cellspacing="0" align="center">
<!--<caption>Timetable</caption>-->
<tr>
<td align="center" height="50"width="100"><br>
<b>Day/Period</b></br>
</td>
<td align="center" height="50"width="100">
<b>I<br>9:30-10:20</b>
</td>
<td align="center" height="50"width="100">
<b>II<br>10:20-11:10</b>
<td align="center" height="50"width="100">
<b>III<br>11:10-12:00</b>
</td>
<td align="center" height="50"width="100">
<b>12:00-12:40</b>
</td>
<td align="center" height="50"width="100">
<b>IV<br>12:40-1:30</b>
</td>
<td align="center" height="50"width="100">
<b>V<br>1:30-2:20</b>
</td>
<td align="center" height="50"width="100">
<b>VI<br>2:20-3:10</b>
</td>
<td align="center" height="50"
width="100">
<b>VII<br>3:10-4:00</b>
</td>
</tr>
13
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Maths</td>
<td align="center" height="50">Che</td>
<td rowspan="6" align="center" height="50">
<h2>L<br>U<br>N<br>C<br>H</h2><td colspan="3" align="center"height="50">LAB</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Tuesday</b>
</td>
<td colspan="3" align="center"height="50">LAB
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Maths</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<td align="center" height="50">
<b>Wednesday</b>
</td>
<td align="center" height="50">Maths</td>
<td align="center" height="50">Phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"height="50">LIBRARY
</td>
</tr>
<tr>
<td align="center" height="50">

14
<b>Thursday</b>
</td>
<td align="center" height="50">Phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"height="50">LAB
</td>
<td align="center" height="50">Maths</td>
</tr>
<tr>
<td align="center" height="50">
<b>Friday</b>
</td>
<td colspan="3" align="center"height="50">LAB
</td>
<td align="center" height="50">Maths</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Saturday</b>
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Maths</td>
<td colspan="3" align="center"height="50">SEMINAR
</td>
<td align="center" height="50">SPORTS</td>
</tr>
</table>
</body>
</html>

15
OUTPUT:

RESULT:
The HTML code for creating Table is executed successfully.

16
EX. NO: 4
HTML FORMS

AIM:
To create a web page using input type, select and TextArea in HTML.

ALGORITHM:
STEP 1: Start. Open Notepad and type the code.
STEP 2: Create a form using <form>. Create labels for Username, Address and Select Car.
STEP 3: For Username, Address and Drop down box, use <input> tag, <textArea> and
<select> tag respectively
STEP 4: Give the options in the Drop down list.
STEP 5: Stop the program and execute in Browser.

17
PROGRAM:

<html><body>
<form>
<h1>Login Form</h1>
<label><b>Username</b></label>
< !—Input type -- >
<input type="text" placeholder="Enter Username" name="uname" required><br><br>
<label><b>Address</b></label>
<! – TextArea -- >
<textarea name=add rows=3 cols=20 placeholder="Optional"
wrap></textarea><br>
<br>
<! – Select -- >
<label><b>Select Car</b></label>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>

18
OUTPUT:

RESULT:

The above HTML program is executed successfully and the output is verified.

19
EX. NO: 5
HTML FORMSIN TABULAR FORM

AIM:

To create a HTML Form containing Roll No, name of the student and Grades in a tabular
form.

ALGORITHM:

STEP 1: Start. Open Notepad and type the code.


STEP 2: Create a form using <form>. Create labels for Roll No, Student name and Grades.
STEP 3: Create a table using <table>, <tr> and <td>.
STEP 4: Use <input> tag for entering data.
STEP 5: Stop the program and execute in Browser.

20
PROGRAM:

<html>
<head>
</head>
<body>
<html>
<body>
<form>
<h1>Student Data</h1>
<table border=1>
<tr>
<td> Roll No</td><td><input type ="text"></td></tr>
<td> Student Name</td><td><input type ="text"></td></tr>
<td> Grades</td><td><input type ="text"></td></tr>
</table>
</body>
</html>

21
OUTPUT:

RESULT:

HTML code using <form>, <table> and <input> tags is verified and executed successfully.

22
EX. NO: 6
FRAMES

AIM:
To create a web page using Frames in HTML.

ALGORITHM:

STEP 1: Start. Open Notepad and type the HTML code.


STEP 2: Create frames using <frameset> and <frame> tag.
STEP 3: Set number of columns and rows for frames.
STEP 4: Create a link file and use it inside <frame>
STEP 5: Stop the program and execute in Browser.

23
PROGRAM:

home.html
<html>
<head>
<title>Home page</title>
</head>
<frameset rows="20,80">
<frame src="head.html" name="head_page">
<frameset cols="15,85">
<frame src="dept.html" name="dept_page">
<frame src="desc.html" name="des_page">
</frameset>
</frameset>
</html>

head.html
<html>
<head>
<title>Head Page</title>
</head>
<body>
<font face="Arial Black" size="3">
<table border="1" cellspacing="2" cellpadding="5" width="100%">
<tr>
<td align="center"><img src="6.jpg" width="20" height="20"/></td>
<td colspan="4" align="center">Bachelor of Computer Applications</td>
</tr>
<tr>
<td align="center"><a href="description.html" target="des_page">HOME</a></td>
<td align="center"><a href="login.html" target="des_page">LOGIN</a></td>
<td align="center"><a href="registration.html"
target="des_page">REGISTRATION</a></td>
<td align="center"><a href="catalogue.html" target="des_page">CATALOGUE</a></td>
<td align="center"><a href="cart.html" target="des_page">CART</a></td>
24
</tr>
</table>
</font>
</body>
</html>

dept.html
<html>
<head>
<title>Departments Page</title>
</head>
<body>
<font face="Arial Black" size="4">
<table align="center" height="100%">
<tr>
<td><a href="cat_mca.html" target="des_page">MCA</a></td>
</tr>
<tr>
<td><a href="cat_mba.html" target="des_page">MBA</a></td>
</tr>
<tr>
<td><a href="cat_bca.html" target="des_page">BCA</a></td>
</tr>
</table>
</font>
</body>
</html>

desc.html
<html>
<head>
<title> Description page</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
25
<font face="TIMES NEW ROMAN" size="5">
<center>
Description of the Website
</center>
</font>
</body>
</html>

26
OUTPUT:

RESULT:

Thus the above HTML program using frames is executed successfully.

27
EX. NO: 7
HORIZONTAL FRAMES

AIM:
To create a web page using Horizontal Frames in HTML.

ALGORITHM:

STEP 1: Start. Open Notepad and type the HTML code.


STEP 2: Create frames using <frameset> and <frame> tag.
STEP 3: Set number of rows for frames.
STEP 4: Create a link file and use it inside <frame>
STEP 5: Stop the program and execute in Browser.

28
PROGRAM:

head.html
<html>
<frameset rows="50%,50%">
<frame src="head.html" />
<frame src="table.html" />
</frameset>
</frameset>
</html>

frame.html

<html>
<head>
<title>Head Page</title>
</head>
<body>
<font face="Arial Black" size="3">
<table border="1" cellspacing="2" cellpadding="5" width="100%">
<tr>
<td align="center"><img src="6.jpg" width="20" height="20"/></td>
<td colspan="4" align="center">Bachelor of Computer Applications</td>
</tr>
<tr>

<td align="center"><a href="desc.html" target="des_page">HOME</a></td>


<td align="center"><a href="home.html" target="des_page">LOGIN</a></td>
<td align="center"><a href="registration.html"
target="des_page">REGISTRATION</a></td>
<td align="center"><a href="catalogue.html" target="des_page">CATALOGUE</a></td>
<td align="center"><a href="cart.html" target="des_page">CART</a></td>
</tr>
</table>
</font>
</body>
</html>
table.html
29
<html>
<body>
<table border=2>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>

<th>Course</th>
<th>Year</th>
<td colspan ="3">Java</td>
<td rowspan="2"></td><td colspan="2"></td>
</tr>
<tr>
<td colspan ="3">High</td>

<td colspan="2"></td>
</tr>
</tr>
</table>
</body>
</html>

30
OUTPUT:

RESULT:

The above program using horizontal frames is executed successfully.

31
EX. NO: 8
WEB PAGE USING INLINE CSS

AIM:
To create a web page using Inline Cascading Style Sheet.

ALGORITHM:

STEP 1: Open Notepad and type the HTML code.


STEP 2: Inside <body> tag, create styles for h1 and p tags.
STEP 3: In <h1> tag, change the color to blue and align center.
STEP 4: For the <p> tag, change its color to red and increase its size.
STEP 5: Close the html tags.

32
PROGRAM:

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue" align="center">This is a Blue Heading</h1>

<p style="color:red;size:20px">This is a red paragraph with inline css</p>

</body>

</html>

33
OUTPUT:

This is a Blue Heading

This is a red paragraph with inline css


RESULT:

The program to create web page using Inline CSS is executed successfully.

34
EX. NO: 9
WEB PAGE USING INTERNAL STYLESHEETS

AIM:
To create a web page using Internal / Embedded Style Sheet.

ALGORITHM:

STEP 1: Open Notepad and type the HTML code.


STEP 2: Use <style> tag and give the styles for heading1 and paragraph tag.
STEP 3: For the selector h1, change its color to blue, font family as verdana and font size to
300%
STEP 4: For the selector p, change its color to red, font family to courier and font size to 160%.
STEP 5: Close the </style> tag and <html> tag.

35
PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color:blue;

font-family:verdana;

font-size:300%;

p{

color:red;

font-family:courier;

font-size:160%;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

36
OUTPUT:

This is a heading
This is a paragraph.

RESULT:

The program to create web page using Embedded CSS is executed successfully.

37
EX. NO: 10
WEB PAGE USING EXTERNAL STYLESHEETS

AIM:
To create a web page using External Style Sheet.

ALGORITHM:

STEP 1: Open Notepad and type the HTML code.


STEP 2: Type the <style> code in a separate file and save it as .css.
STEP 3: Define styles for #para1, h1, #para, p, body and div tags.
STEP 4: In the html file, use the <link> tag, and give the css file name.
STEP 5: Use the tags defined in .css file and execute the html program in browser.

38
PROGRAM:

CSS

#para1

{color: red;

text-align: center;

font-family:courier;

h1

color:blue;

font-size:200%;

text-align:right;

background-color: #6495ed;

39
#para

color: green;

text-align: center;

font-size:500%;

border:1px solid black;

padding:10px;

margin:30px;

background-color: #e0ffff;

body

background-image:url("bird.jpeg");

div

text-decoration:overline;

font-size:200%;

Html Code

<!DOCTYPE html>

<html>

<head>

40
<link rel="stylesheet" href="mystyle.css">
</head>

<body>

<h1>This is a heading</h1>

<p id="para">This is a green paragraph.</p>

<p id="para1">This is a red paragraph.</p>

<p>This is some paragraph.</p>

<div>html is a markup language. it stands for hypertext mark up language. it is

used to create web pages. html has a very simple syntax. html uses tags for

formatting and for placing objects. html is interpreted by the browser. it is

case-insensitive.</div>

</body>

</html>

41
OUTPUT:

This is a heading
This is a green paragraph.

This is a red paragraph.

This is some paragraph.

html is a markup language. it stands for hypertext mark up language. it is used to create web pages.
html has a very simple syntax. html uses tags for formatting and for placing objects. html is
interpreted by the browser. it is case-insensitive.

RESULT:

The program to create web page using External CSS is executed successfully.

42
EX. NO: 11 JAVASCRIPT PROGRAM TO CALCULATE SQUARES AND
CUBES

AIM:
JavaScript program to compute squares and cubes of numbers from 5 to 15.

ALGORITHM:

STEP 1: Start. Open Notepad and type the HTML code.


STEP 2: Open the <script>. Create a function “at” and write the code to compute squares and
cubes of numbers from 5 to 15.
STEP 3: Display the result using alert ().
STEP 4: Create a button and write code for onclick event handling to call the function.
STEP 5: Stop the program.

43
PROGRAM:

<html>
</head>
<title>JS Demo</title>
<script>
function at()
{
var res="";
for(i=5;i<=15;i++)
{
res +="Num "+(i)+ " : square "+(i*i)+" : cube "+(i*i*i)+"\n"
}
alert(res);
}
</script>
</head>
<body>
<input type="button" onclick="at()" value="Click to get squares and cubes">
</body>
</html>

44
OUTPUT:

RESULT:

The JavaScript program to compute the squares and cubes of numbers from 5 to 15 is
executed successfully.

45
EX. NO: 12 JAVASCRIPT PROGRAM TO FIND THE LARGEST OF THREE
NUMBERS

AIM:
JavaScript program to find the largest of three numbers.

ALGORITHM:

STEP 1: Start. Open Notepad and type the HTML code.


STEP 2: Open <script> and input three numbers using prompt ().
STEP 3: Use max () to return the maximum of three numbers.
STEP 4: Display the result using document.write().
STEP 5: Stop the program and display the result in browser.

46
PROGRAM:

<html>
</head>
<title>JS Demo</title>
<script>
// program to find the largest among three numbers

// take input from the user


const num1 = parseFloat(prompt("Enter first number: "));
const num2 = parseFloat(prompt("Enter second number: "));
const num3 = parseFloat(prompt("Enter third number: "));

const largest = Math.max(num1, num2, num3);

// display the result


document.write("The largest of three nos."+largest);
</script>
</head>
<body>
</body>
</html>

47
OUTPUT:

48
The largest of three nos.135

RESULT:

The JavaScript program to find the largest of three numbers is executed successfully.

49
EX. NO: 13 JAVASCRIPT PROGRAM TO FIND THE FACTORIAL OF A
NUMBER

AIM:
JavaScript program to find the factorial of a number.

ALGORITHM:

STEP 1: Start. Open Notepad and type the HTML code.


STEP 2: Open <script> and input a positive number.
STEP 3: Using if … else check whether the number entered is positive.
STEP 4: Declare variable “fact” and assign value to 1. Compute factorial.
STEP 5: Stop the program and display the result in browser.

50
PROGRAM:

<html>
</head>
<title>JS Demo</title>
<body><b><center> Factorial of a number</center><br></b>
<script>
const number = parseInt(prompt('Enter a positive integer: '));

// checking if number is negative


if (number < 0) {
document.write('Error! Factorial for negative number does not exist.');
}

// if number is 0
else if (number === 0) {
document.write(`The factorial of ${number} is 1.`);
}

// if number is positive
else {
let fact = 1;
for (i = 1; i <= number; i++)
{fact *= i;
}
document.write(`The factorial of ${number} is ${fact}.`);
}
</script>
</head>

</body>
</html>

51
OUTPUT:

RESULT:

The JavaScript program to find the factorial of a given number is executed successfully.

52
EX. NO: 14 JAVASCRIPT PROGRAM TO CALCULATE SUM AND AVERAGE
OF NUMBERS

AIM:

JavaScript program to calculate sum and average of numbers.

ALGORITHM:

STEP 1: Start. Open Notepad and type the HTML code.


STEP 2: Open <script> and declare variables totalSum and average.
STEP 3: Using for loop calculate the sum of first ten numbers.
STEP 4: Calculate average where average=sum/count.
STEP 5: Stop the program and display the result in browser.

53
PROGRAM:

<html>

<script>

var totalSum = 0;

for(var i=0;i<10;i++)

totalSum=totalSum+i;

var average = totalSum / 10;

document.write("The sum of numbers is:",totalSum);

document.write("<br>");

document.write("The average of first 10 numbers is:",average);

</script>

</html>

54
OUTPUT:

The sum of numbers is: 45


The average of first 10 numbers is: 4.5

RESULT:
The JavaScript program to calculate the sum and average of numbers is executed
successfully.

55
EX. NO: 15 JAVASCRIPT PROGRAM TO COUNT POSITIVE, NEGATIVE
NUMBERS IN THE LIST

AIM:
JavaScript program to count the number of negative numbers, positive numbers and
zeros in the list.

ALGORITHM:

STEP 1: Start. Open Notepad and type the HTML code.


STEP 2: Open <script> and input n numbers.
STEP 3: Declare Array and enter a set of positive numbers, negative numbers and zeroes in the
list using Arrays
STEP 4: Using if condition check whether the entered number is positive, negative or zero.
STEP 5: Stop the program and display the result.

56
PROGRAM:

<html>
<head>
<script>
var zero=0;
var positive=0;
var negative=0;
let num=new Array();
var n=parseInt(window.prompt(“Enter the array size”,””);
for (var i=0;i<n;i++)
{
num[i]=window.prompt("Enter numbers","");
}
for (var i=0;i<n;i++)
{
document.write(num[i]+"<br>");
}

for(var i = 0; i < num.length; i++)


{
if(num[i] < 0)
{
negative = negative + 1;
}
else if (num[i]>0)
{
positive = positive + 1;
}
else
{
zero=zero+1;
}
}
document.write("Number of positive integers: " + positive);
document.write("<br>");
document.write("Number of negative integers: " + negative);
document.write("<br>");
document.write("Numbers of numbers having zero " + zero);
document.write("<br>");
</script>
</head>
</html>

57
OUTPUT:

RESULT:

JavaScript program to count positive numbers, negative numbers and zeros are executed
successfully.

58
EX. NO: 16 JAVASCRIPT PROGRAM TO PROMPT USER NAME

AIM:
JavaScript program to prompt username and display it.

ALGORITHM:

STEP 1: Start. Open Notepad and type the HTML code.


STEP 2: Open <script> and input a username using prompt function.
STEP 3: Display the entered name using document.write.
STEP 4: Stop the program and display the result.

59
PROGRAM:

<html>

<head>

<title>

Greetings </title>

</head>

<body>

<script language="JavaScript">

firstName = prompt("Please enter your name", "");

document.write("Hello " +

firstName + ", welcome to my Web page.");

</script>

<p> This is my web page... </p>

</body>

</html>

60
OUTPUT:

Hello Tendulkar, welcome to my Web page.

This is my web page...

RESULT:

The JavaScript program for prompting the username is executed successfully.

61

You might also like