SCRIPTING LANGUAGE LAB Dev

SCRIPTING LANGUAGE LAB
(PBC 602)
BCA
By
Abhinav Baranwal
University Roll Number:-2071502
Under the Guidance of
MR.DEVENDRA SINGH
Assistant professor
Computer Science and Engineering / School of Computing
SCHOOL OF COMPUTING
GRAPHIC ERA HILL UNIVERSITY BHIMTAL
CAMPUS
SATTAL ROAD, P.O.
BHOWALI DISTRICT-
NAINITAL-263136 (2022 –
2023)
School of Computing
Graphic Era Hill University, Bhimtal Campus,
Uttarakhand
2022-2023
CERTIFICATE
This is to certify that Mr. Abhinav Baranwal, University Roll No.:

2071502 has satisfactorily completed all the experiment in the
laboratory of this college. The Term Work of Scripting Language lab.
In partial fulfilment of the requirement in 6th semester of Bachelor of
Computer Applications degree course prescribed by Graphic Era Hill
University, Bhimtal Campus, Uttarakhand.
Subject Coordinator Class Coordinator HOD

Mr. Davendra Singh Mr. Praveen Joshi Dr. Sandeep
Kumar
Budhani
School of Computing
Graphic Era Hill University, Bhimtal Campus, Uttarakhand
2022-2023
ACKNOWLEDGEMENT
I express my gratitude to professors, for coming up with this
interesting and thought-provoking course, compiling the best
contents and the most important working towards changing the
words, making the differences, and inspiring us to become the
climate saver ourselves, knowledge that I gained will last a lifetime.
Many thanks to my institute, Graphic Era Hill University, Bhimtal
and a special thanks to our subject teacher Mr. Devendra Singh,
Assistant Professor, School of Computing, GEHU Bhimtal Campus
for motivating us to look beyond the syllabus, to take the
opportunity and to learn as much as we can. I also thank sir for
helping us in this Term.
PROGRAMS
HTML (Hyper Text Markup Language)
Ques 1. Design a user registration page with help of HTML and also
implement validation using HTML5.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Page</title>
</head>
<body>
<div class="form">
<h1>Registration Form</h1>
<form>

<fieldset class="first-section">
<legend>Contact Details</legend>
<label for="name">Name</label>
<input autofocus type="text" id="name" name="name" autofocus placeholder=" "
autocomplete="on" required> <br><br>
<label for="email">Email</label>
<input type="email" id="email" placeholder=" "> <br><br>
<label for="tel">Phone</label>
<input type="tel" id="tel" placeholder=" "> <br><br>
</fieldset>

<fieldset class="second-section">
<legend>Personal Information</legend>
<label for="dob">Birth Date</label>
<input type="date" id="dob"> <br><br>
<label for="gender">Gender ??</label>
<input list="genders" name="gender" id="gender">
<datalist id="genders">
<option value="female">
<option value="male">
<option value="other">
</datalist><br><br>
</fieldset>

<div class="terms">
<input type="checkbox" id="scales" name="scales" class="checkbox">
<label for="scales">I have read and agree to the terms and conditions</label>
</div>
<button>Submit</button>
</form> </div>
</body>
</html>
Output:-
Ques 2. Design a web page to demonstrate the use of Internal and

External Hyper Links in Html.
Code:-
Internal link:-
<! DOCTYPE html>
<html>
<head>
<title> Internal link example </title>
</head>
<body>
<p>Welcome to The web-page. This is an example of internal link creation in html web-
page.</p><br>
<a name= “HTML Introduction”> Introduction to Html </a>
<p> Html is hyper text mark-up language.</p><br><br>
<a name= “CSS Introduction”> Introduction to CSS </a>
<p> Cascading Style Sheet is used for styling the web pages</p><br><br>
<a href= “#HTML Introduction”> html</a><br>
<a href= “#CSS Introduction”> css</a>
</body>
</html>
Output:-
External link:-
<! DOCTYPE html>
<html>
<head>
<title> External link example</title>
</head>
<body>
<h1> this page creates external links in html webpage</h1>
<br>
<a href= https://msatechnosoft.in> URL external link </a>
<br>
<a href= “Page1.html”> Page1 external link</a>
</body>
</html>
Output:-
Ques 3. Create a design audio and video player with the help of HTML5
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Audio and Video</title>
</head>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
<audio controls autoplay>
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>
</html>
</body>
</html>
Output:-
Ques 4 . Design a web page to demonstrate the use of image map.

Code:-
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the
topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
Output:-
Ques 5. Design your class time table using HTML.
Code:-
<!DOCTYPE html>
<html>
<body>
<h1>TIME TABLE</h1>
<table border="5" cellspacing="0" align="center">

<tr>
<td align="center" height="50"
width="100"><br>
<b>Day/Period</b></br>
</td>
width="100">
<b>I<br>9:30-10:20</b>
</td>
width="100">
<b>II<br>10:20-11:10</b>
</td>
width="100">
<b>III<br>11:10-12:00</b>
</td>
width="100">
<b>12:00-12:40</b>
</td>
width="100">
<b>IV<br>12:40-1:30</b>
</td>
width="100">
<b>V<br>1:30-2:20</b>
</td>
width="100">
<b>VI<br>2:20-3:10</b>
</td>
width="100">
<b>VII<br>3:10-4:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Mat</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>
<td colspan="3" align="center"
height="50">LAB</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<b>Tuesday</b>
</td>
height="50">LAB
</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<b>Wednesday</b>
</td>
<td align="center" height="50">phy</td>
height="50">LIBRARY
</td>
</tr>
<tr>
<b>Thursday</b>
</td>
height="50">LAB
</td>
</tr>
<tr>
<b>Friday</b>
</td>
height="50">LAB
</td>
</tr>
<tr>
<b>Saturday</b>
</td>
height="50">SEMINAR
</td>
<td align="center" height="50">SPORTS</td>
</tr>
</table>
</body>
</html>
Output:-
CSS (Cascading Style Sheets)
Ques 1. Design a web page to demonstrate (inline, external, internal css).

Code:-
Internal CSS:-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>This is our paragraph.</p>
</body>
</html>
Output:-
External CSS:-
Style.css
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}
[ In the <head> section of your HTML sheet, add a reference to your external .css file
right after <title> tag: ]
<link rel="stylesheet" type="text/css" href="style.css" />
Output:-
Inline CSS:-
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
</html>
Output:-
Ques 2. Design a web page to demonstrate the use of Class and Id
selector in CSS.
Code:-
CSS class Selector
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Output:-
CSS id Selector
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output:-
Ques 3. Design a web page to demonstrate the use of pseudo-class in CSS.

Code:-
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
font-size: 22px;
}
</style>
</head>
<body>
<h2>Pseudo-classes and HTML Classes</h2>
<p>When you hover over the first link below, it will change color and font size:</p>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
<p><a href="default.asp">CSS Tutorial</a></p>
</body>
</html>
Output:-
JAVA SCRIPT (JS)
QUES 1. Write a program to find min and max number from a given array
using javascript.
Code:-
<!DOCTYPE html>
<html>
<body>
<p>The original array: [28, 45, 69, 20, 15, 7, 98]</p>
<p id="result"></p>
<script>
let array = [28, 45, 69, 20, 15, 7, 98];
let min = array[0], max = array[0];
for (let i = 1; i < array.length; i++) {
if (array[i] > max)
max = array[i];
if (array[i] < min)
min = array[i];
}
document.getElementById('result').innerHTML =
"The maximum or the largest element of the array is: " + max + "<br>" +
"The minimum or the smallest element of the array is: " + min;
</script>
</body>
</html>
Output:-
QUES 2. Write a program to demonstrate the use of var, let and const keyword.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>
let a = 23;
alert("Value of let variable is: "+a);
function display(a) {
var b = a*2;
alert("Value of var variable is: " + b)
}
display(a);
const c = 24;
alert("Value of const variable is: " +c);
</script>
</body>
</html>
Output:-
QUES 3. Write a program to find a factorial of a given number using function in

javascript.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>
let num=6;
for(let i=num;i>1;){
i=i-1;
var factorial=num*i;
num=factorial;
}
console.log(factorial);
</script>
</body>
</html>
Output:-
QUES 4. Write a program which handles Exceptions using following keywords :-
Code:-
try-catch:-
<!DOCTYPE html>
<html>
<head> Exception Handling</br></head>
<body>
<script>
try{
var a= ["34","32","5","31","24","44","67"]; //a is an array
document.write (a); // displays elements of a
document.write (b); //b is undefined but still trying to fetch its value. Thus catch block will be
invoked
}catch(e){
alert("There is error which shows "+e.message); //Handling error
}
</script>
</body>
</html>
Output:-
Throw:-
<!DOCTYPE html>
<html>
<head>Exception Handling</head>
<body>
<script>
try {
throw new Error('This is the throw keyword'); //user-defined throw statement.
}
catch (e) {
document.write(e.message); // This will generate an error message
}
</script>
</body>
</html>
Output:-
try-catch-finally:-
<!DOCTYPE html>
<html>
<head>Exception Handling</head>
<body>
<script>
try{
var a=2;
if(a==2)
document.write("ok");
}
catch(Error){
document.write("Error found"+e.message);
}
finally{
document.write("Value of a is 2 ");
}
</script>
</body>
</html>
Output:-
QUES 5. Write a program to add two numbers with the help of text box and display their
sum in 3rd text box in javascript.
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>Add two Numbers</title>
</head>
<body>
<h1>Add Two Numbers</h1>
<tr>
<th>First Number :-</th>
<td>
<input type="text" id="num1" /><br>
</td>
</tr>
<br>
<tr>
<th>Secound Number :-</th>
<td>
<input type="text" id="num2" /><br>
</td>
</tr>
<br>
<tr>
<th>Sum of Two Numbers are :-</th>
<td>
<input type="text" id="Sum" /><br>
</td>
</tr>
<br>
<tr>
<td>
<input type="button" onclick="resume()" value="Sum" />
</td>
</tr>
<br>
<script type="text/javascript">
function resume() {
var Num1 = parseInt(document.getElementById("num1").value);
var Num2 = parseInt(document.getElementById("num2").value);
//

sum = Num1 + Num2
//console.log(sum)
document.getElementById('Sum').value = sum;
}
</script>
</body>
</html>
Output:-
PHP
QUES 1. Write a program in PHP to pass value from one page to another.
Code:-
(index.html)
<!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>program1</title>
</head>
<body>
<form action="display.php" method="post" id="nameform">
First Name:<input type="text" name="fname"></<br>
Last Name:<input type="text" name="lname"></<br>
<button type="submit">Submit</button>
<button type="reset" value="reset">Reset</button>
</form>
</body>
</html>
(display.php)
<?php
$first_name = $_POST['fname'];
$last_name = $_POST['lname'];
echo $first_name;
echo $last_name;
?>
Output:-
QUES 2. Write a program in PHP to demonstrate the use of ‘GET’ and ‘POST’ methods.
Code:-
GET method
(test1.html)
<!DOCTYPE html>
<html>
<body>
<form action = "gettest.php" method = "GET">
Username: <input type = "text" name = "username" /> <br>
Blood Group: <input type = "text" name = "bloodgroup" /> <br>
<input type = "submit" />
</form>
</body>
</html>
(gettest.php)
<?php
echo $_GET["username"];
?>
</br>
Your blood group is:
<?php
echo $_GET["bloodgroup"];
?>
Output:-
POST method
(test2.html)
<html>
<body>
<form action = "posttest.php" method = "post">

Username: <input type = "text" name = "username" /> <br>
Blood Group: <input type = "text" name = "bloodgroup" /> <br>
<input type = "submit" />
</form>
</body>
</html>
(posttest.php)
<html>
<body>
Welcome <?php echo $_POST["username"]; ?> </br>

Your blood group is: <?php echo $_POST["bloodgroup"]; ?>
</body>
</html>
Output:-
QUES 3. Write a program in PHP to register a user information in MySQl data base.
Code:-
(index.html)
<!DOCTYPE html>
<html>
<head>
<title>REGISTRATION FORM</title>
</head>
<body>
<form name="registration" method="post" action="registration.php">

USERNAME:<input type="text" name="name" value=""></br>
EMAIL-ID:<input type="text" name="email" value=""></br>
PASSWORD:<input type="text" name="password"
value=""></br>
RE-PASSWORD:<input type="text" name="repassword" value=""></br>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
(registration.php)
<?php
//include connect.php page for database connection
include('connect.php')
//if submit is not blanked i.e. it is clicked.
if(isset($_REQUEST['submit'])!='')
{
if($_REQUEST['name']=='' || $_REQUEST['email']=='' || $_REQUEST['password']==''||
$_REQUEST['repassword']=='')
{
Echo "please fill the empty field.";
}
Else
{
$sql="insert into student(name,email,password,repassword) values('".
$_REQUEST['name']."', '".$_REQUEST['email']."', '".$_REQUEST['password']."', '".
$_REQUEST['repassword']."')";
$res=mysqli_query($sql);
If($res)
{
Echo "Record successfully inserted";
}
Else
{
Echo "There is some problem in inserting record";
}
}
}
?>
Output:-

SCRIPTING LANGUAGE LAB Dev

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SCRIPTING LANGUAGE LAB Dev

Uploaded by

Copyright:

Available Formats

SCRIPTING LANGUAGE LAB

This is to certify that Mr. Abhinav Baranwal, University Roll No.:

Subject Coordinator Class Coordinator HOD

HTML (Hyper Text Markup Language)

Ques 2. Design a web page to demonstrate the use of Internal and

Ques 4 . Design a web page to demonstrate the use of image map.

Ques 1. Design a web page to demonstrate (inline, external, internal css).

<link rel="stylesheet" type="text/css" href="style.css" />

Ques 3. Design a web page to demonstrate the use of pseudo-class in CSS.

QUES 3. Write a program to find a factorial of a given number using function in

QUES 4. Write a program which handles Exceptions using following keywords :-

//

<form action = "posttest.php" method = "post">

Welcome <?php echo $_POST["username"]; ?> </br>

You might also like