Scribd
Upload
15 views27 pages

Sectionb 1

The document contains multiple JavaScript programs demonstrating various functionalities such as calculating squares and cubes, creating a simple calculator, validating email addresses, swapping images, designing a weblog, creating a hotel homepage, preparing a class timetable, and using frames in HTML. Each program includes source code and a brief description of its purpose. The examples showcase fundamental web development concepts and techniques in HTML, CSS, and JavaScript.

Uploaded by

Ash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views27 pages

Sectionb 1

The document contains multiple JavaScript programs demonstrating various functionalities such as calculating squares and cubes, creating a simple calculator, validating email addresses, swapping images, designing a weblog, creating a hotel homepage, preparing a class timetable, and using frames in HTML. Each program includes source code and a brief description of its purpose. The examples showcase fundamental web development concepts and techniques in HTML, CSS, and JavaScript.

Uploaded by

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

PROGRAM 1

## Write a javascript that calculates the square and cubes of the numbers
from 0 to 10 and outputs html text that displays the resulting values in an
html table format.
SOURCE CODE :-
Square.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>square and cube</title>
</head>
<body><h1 style="margin-left: 550px; color: blue;">SQUARE & CUBE</h1><section
style="height: 270px; width: 170px; border: 2px solid black; text-align: center; margin-left:
600px; background-color:bisque;">
<script >
document.write( "<table> <tr> <th>Number</th> <th>Square</th> <th>Cube</th>
</tr>" )
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n +
"</td></tr>" )
}
document.write( "</table>" )
</script> </section>
</body>
</html>
Output
PROGRAM 2
## Write a javascript to design a simple calculator to perform the following
operations-sum , product , difference , quotient.
SOURCE CODE :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
</head>
<body><h1 style="text-align:center; color: blueviolet; ">Calculator App </h1>
<section style="height: 250px; width: 20%; border: 2px solid black; margin-top: 50px;
margin-left: 535px; background-color:aqua;">
<section style="height: 220px; width: 97%; margin-top: 5%; margin-left: 4.75px;
background-color: bisque; ">
<h1 style="text-align:center; color: blueviolet; ">Calculator </h1>
<div class="container" >
<br><center>
<table >
<tr>
<td colspan="3"><input type='text' id='result' class ='screen' style="text-align:
right;"></td>
<td>
<input type='button' value = 'C' onclick="clearScreen()" class="clear"/>
</td>
</tr>
</table>
<div class="keys" >
<input type="button" value="7" class="button" onClick="display('7')"></input>
<input type="button" value="8" class="button " onClick="display('8')"></input>
<input type="button" value="9" class="button" onClick="display('9')"></input>
<input type="button" value="/" class="operator" onClick="display('/')"></input><br>
<input type="button" value="4" class="button" onClick="display('4')"></input>
<input type="button" value="5" class="button" onClick="display('5')"></input>
<input type="button" value="6" class="button" onClick="display('6')"></input>
<input type="button" value="*" class="operator" onClick="display('*')"></input><br>
<input type="button" value="1" class="button" onClick="display('1')"></input>
<input type="button" value="2" class="button" onClick="display('2')"></input>
<input type="button" value="3" class="button" onClick="display('3')"></input>
<input type="button" value="-" class="operator" onClick="display('-')"></input><br>
<input type="button" value="0" class="button" onClick="display('0')"></input>
<input type="button" value="." class="button" onClick="display('.')"></input>
<input type="button" value= "=" class="button equal-sign" onClick="solve()"></input>
<input type="button" value="+" class="operator" onClick="display('+')"></input>
</div> </center></div></section></style>
<script>
function display(val){
document.getElementById('result').value += val
return val
}
function solve(){
let x = document.getElementById('result').value
let y = eval(x);
document.getElementById('result').value = y
return y
}
function clearScreen(){
document.getElementById('result').value = ''
}
</script></section>
</body>
</html>
Output :
PROGRAM 3
## Write a program to validate E-mail text box in javascript
SOURCE CODE :-
email.html
<!DOCTYPE html>
<html>
<head>
<title>email validation using javascript</title>
<script language = "javascript" >
function validateEmail(emailField){
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (reg.test(emailField.value) == false)
{
alert('Invalid Email Address');
return false;
}
return true;
}
</script>
</head>
<body> <h1 style="margin-top: 20px; color:blue; margin-left: 530px;" >Email
Validation</h1>
<section style="height: 150px; width: 500px; border: 2px dotted black; text-align: center;
margin-left: 400px; margin-top: 70px; background-color: bisque;">
<div class="container">
<div class="box">
<h1 style="margin-top: 20px; " >Email</h1>
<input type="email" onblur="validateEmail(this);" /><br><br>
<button onclick={checkemail}>Login</button>
</div>
</div>
</section>
</body>
</html>
Output :
PROGRAM 4
## Write a program in javascript to insert and move image on screen.
SOURCE CODE :-
Swap.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swapping</title>
</head>
<body><h1 style="text-align: center; color: blueviolet;">Swapping Images</h1>
<img src="img/my2.jpeg" id="p1" height="275" style="margin-left: 300px;" />
<img src="img/my.JPG" id="p2" height="275" />
<br /><input type="button" value="Swap images" onclick="swap1()" />
<script>
function swap1() {
var txt1 = document.getElementById("p1");
var txt2 = document.getElementById("p2");
var txt = txt1.src;
txt1.src = txt2.src;
txt2.src = txt;
}
</script>
</body>
</html>

Output:
PROGRAM 5
## Write a program to design a weblog.
<html>
<head>
<meta name="viewport" content="width=device-width",initial-scale="1">
<style>
*{
box-sizing: border-box;
}
body{
font-family: arial; padding: 20px; background: #e2dede;
}
.header{ padding: 20px;
font-size: 20px; text-align: center; background: white;
}
.x
{
float: left; width: 75%;
}
.y
{
float: left; width: 25%;
padding-left: 20px;
}
.z
{
background-color: #aaa; width: 100%;
padding: 20px;
}
.row::after{
content: ""; display: table; clear:both;
}
.footer
{
padding: 20px; text-align: center;
background: #a79999; margin-top: 20px;
}
.a{ background-color: rgb(235,231,231); padding: 10px;
margin-top: 20px;
}
@media screen and (max-width: 800px ) {
.leftcoloumn, .rightcoloumn
{
width: 100% ;
padding: 0;
}
}
</style>
</head>
<body>
<div class="header">
<h2>PHOTOGRAPHY</h2>
</div>
<div class="row">
<div class="x">
<div class="card">
<h2>VISION BY ME</h2>
<div class="z" style="height: 200px;"><img src="C:\Users\fc\Pictures\Screenshots\
Screenshot 2024-03-29 015658.png" width="300" height="150">
</img> </div>
<p>Photography is a art of capuring light with a camera,usually via a digital sensor or file, to create
an image.with the right camera equipment, you can even photograph wavelenghts of light visible to
human eye,including uv, infrared,and radio.</p>
</p> </div><br>
<div class="a">
<h2>SMILE PLEASE</h2>
<div class="z" style="height:200px;">
<img src="C:\Users\fc\Pictures\ap.png" width="300"height="150">
</div><br>
<p></p>
</div> </div>
<div class="y">
<div class="a">
<h2>ABOUT ME</h2>
<div class="z" style="height: 20%;"><img src="C:\Users\fc\Pictures\mis.png" height="100"
width="200" ></div>
<p>LIFE IS ALSO LIKE A CAMERA JUST CAPTURE GOOD MOMENTS AND SPREAD HAPPINESS ALL
AROUND</p>
</div>
<div class="a">
<h3>Popular Post</h3>
<div class="z"> <img src="C:\Users\fc\Pictures\mm.png"
width="105%"></div><br>
<div class="z"><img src="C:\Users\fc\Pictures\as.png" width="105%"> </div><br>
<div class="z"><img src="C:\Users\fc\Pictures\pp.png" width="105%" ></div>
</div>
</div>
</div>
<div class ="footer">
<h2>BE LIKE SUNSHINE</h2>
</div>
</body>
</html>

Output:

PROGRAM 6
## Design a CSS to create a homepage and all linked pages for any hotel.
<html>
<head>
<title>my web page</title>
<link rel="stylesheet" href="hotel.css">
</head>
<body background="C:\Users\fc\Downloads\mhotel.jpg">
<header><h1><center>GRACE HOTEL</center></h1></header>
<div>
<span>HOME </span>
<span> MENU</span>
<span>STAFF </span>
<span>ROOMS</span>
<span>OTHER FACILITIES</span>
</div>
<br>
<marquee>welcome to the GRACE HOTEL. How can we help you?</marquee>
</body>
</html>

header{
background-color:rgb(196, 163, 120);
height: 100;
width: 100%; font-size: larger;
font-weight: 400;
} h1
{
color:white
}
body{
background-size: cover; height: 100vh;
background-position: center;
}
Span {
color: black;
background-color: rgb(225, 199, 164); margin: 3px;
}
Marquee {
background-color:rgb(196, 163, 120); height=200;
}
Output:

PROGRAM 7
## Write a program to prepare a timetable of your class
(using Rowspan ,Colspan,Cellpadding,Cellspacing).
<html>
<head>
<title>
TIME TABLE
</title>
<style> h1{
color:hotpink;
}
table{
color:black;
}
th{
background-color:hotpink;
}
</style>
</head>
<body bgcolor="aqua" width="1000">
<h1> <center><b>Time Table of MCA</b></center></h1>
<center>
<table border="3px">
<tr></tr>
<tr><b>
<th> day</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th>12-1</th>
<th>1-2</th>
<th>2-3</th>
<th>3-4</th>
</b></tr>
<tr>
<td bgcolor="hotpink"> <b>Monday</b></td>
<td>Linux lab </td>
<td>Web tech lab</td>
<td>Web technology</td>
<td>linux</td>
<td>break..</td>
<td> PPL </td>
<td>. </td>
</tr>
<tr>
<td bgcolor="hotpink"><b>tuesday</b></td>
<td>Linux lab</td>
<td>web tech lab</td>
<td>web technology</td>
<td>Linux</td>
<td>break..</td>
<td>PPL</td>
<td>ADBMS</td>
</tr>
<tr>
<td bgcolor="hotpink"><b>Wednesday</b></td>
<td>Linux lab </td>
<td>Web tech lab</td>
<td>ADBMS</td>
<td>linux</td>
<td>break..</td>
<td> PPL </td>
<td>SIC</td>
</tr>
<tr>
<td bgcolor="hotpink"> <b>Thursday</b></td>
<td>Linux lab </td>
<td>Web tech lab</td>
<td>ADBMS</td>
<td>Linux</td>
<td>break..</td>
<td> PPL </td>
<td>SIC</td>
</tr>
<tr>
<td bgcolor="hotpink"><b>Friday</b></td>
<td>Linux Lab</td>
<td>Web tech lab</td>
<td>SIC</td>
<td>Web technology</td>
<td>break..</td>
<td> ADBMS </td>
<td>. </td>
</tr>
<tr>
<td bgcolor="hotpink"> <b>Saturday</td></b>
<td colspan="2"> <center>open-elective </center></td>
<td>SIC</td>
<td>Web technology</td>
<td>break</td>
<td>ADBMS</td>
<td>. </td>
<tr>
</table>
</center>
</body>
</html>

Output:
PROGRAM 8
## Create HTML page ( your OWN Page) using frame:

Source code:
<html>
<head>
<frameset rows ="40%,80%">
<frame src="6th.html"></frame>
<frameset cols="50%,50%">
<frame src="6tha.html"></frame>
<frame src="6thb.html"></frame>
</frameset>
</frameset>
</head>
</html>
6th.html:
<html>
<head>
<style>
body{
background-repeat: no-repeat; background-position: bottom; background-color:rgb(21, 163, 188);;
}
</style> <body>
<h1> <p style="text-align: center;" > Eye Hospital</p></h1>
<h2><p style ="text-align: center;">Agarsen Hospital,Kaithal</p></h2>
<center><img src="C:\Users\fc\Pictures\am.png" width="150" height="100"></center>
</body>
</head>
</html>
6tha.html
<html>
<head>
<style>
body{
background-color:rgb(21, 163, 188);
}
</style>
</head>
<body>
<form>
<h1><p style="text-align: center;"> LOG IN</p></h1>
<label > <b>PATIENT NAME:<input type="text"></b></label><br><br>
<label><b>APPONITMENT NO.<input type="password"></b></label><br><br>
<input type="submit" value="submit">
<br>
<img src="C:\Users\fc\Pictures\Screenshots\Screenshot 2024-03-28 095547.png" height ="30%"
width="50%" align="bottom">
</form>
</body>
</html>
6thb.html:
<html>
<head>
<style>
body{
background-color: rgb(21, 163, 188);
}
</style>
</head>
<body>
<h1>
<p style="text-align: center;">Eye Technology for Correcting your Vision</p>
</h1>
<img src="C:\Users\fc\Pictures\Screenshots\Screenshot 2024-03-28 095516.png" height="50%"
width="50%"align="bottom">
<ul style="text-align: right;">
<b><h2>
<li>Excimer Leser Eye Technolog</li>
<li>Wave Front Laser Eye Technology</li>
<li>The Intralase Laser Beam </li>
</h2></b></ul>
</body>
</html>

Output:
Area of Rectangle with Form in PHP

Program to calculate area of rectangle by inserting values in the form is shown.

Example:

1. <html>

2. <body>

3. <form method = "post">

4. Width: <input type="number" name="width">

5. <br><br>

6. Length: <input type="number" name="length"> <br>

7. <input type = "submit" name = "submit" value="Calculate">

8. </form>

9. </body>

10. </html>

11. <?php

12. if(isset($_POST['submit']))

13. {

14. $width = $_POST['width'];

15. $length = $_POST['length'];

16. $area = $width*$length;

17. echo "The area of a rectangle with $width x $length is $area";

18. }

19. ?>

Output:
sum of digits of 14597.

1. <?php

2. $num = 14597;

3. $sum=0; $rem=0;

4. for ($i =0; $i<=strlen($num);$i++)

5. {

6. $rem=$num%10;

7. $sum = $sum + $rem;

8. $num=$num/10;

9. }

10. echo "Sum of digits 14597 is $sum";

11. ?>

Output:

Palindrome Number using Form in PHP


Example:

We'll show the logic to check whether a number is palindrome or not.

1. <form method="post">

2. Enter a Number: <input type="text" name="num"/><br>

3. <button type="submit">Check</button>

4. </form>

5. <?php

6. if($_POST)

7. {

8. //get the value from form

9. $num = $_POST['num'];

10. //reversing the number

11. $reverse = strrev($num);

12.

13. //checking if the number and reverse is equal

14. if($num == $reverse){

15. echo "The number $num is Palindrome";

16. }else{

17. echo "The number $num is not a Palindrome";

18. }

19. }

20. ?>

Output:

On entering the number 23432, we get the following output.


Fibonacci series.

1. <?php

2. $num = 0;

3. $n1 = 0;

4. $n2 = 1;

5. echo "<h3>Fibonacci series for first 12 numbers: </h3>";

6. echo "\n";

7. echo $n1.' '.$n2.' ';

8. while ($num < 10 )

9. {

10. $n3 = $n2 + $n1;

11. echo $n3.' ';

12. $n1 = $n2;

13. $n2 = $n3;

14. $num = $num + 1;

15. ?>

Output:

You might also like