0% found this document useful (0 votes)

33 views125 pages

E Journal WD

Uploaded by

glyderebelo

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

0% found this document useful (0 votes)

33 views125 pages

E Journal WD

Uploaded by

glyderebelo

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/ 125

VVM’s Shree Damodar College of Commerce & Economics

Affiliated to Goa University

Accredited by NAAC with ‘A’ Grade (CGPA o 3.03 on a 4-point scale)

B.VOC (ST)
STS-201 - WEB DEVELOPER

LAB JOURNAL

2023-2024

Name: Glyde
Rebelo Roll No:
2320714
Class: FY BVoc(ST)
Semester: II
Submission Date : 31-03-2024
INDEX
Sr. Pag
Topic e
No.
No.

Introduction to HTML and CSS 4-8

1 Website using form, table, iframes, header, footer, sections and
other basic tags in HTML and CSS

Creating Website using HTML and CSS 9 - 26

2 Website containing 4 pages – Home, information, product and
contact us page.

JavaScript:
3 Arrow function, Do while, for loop, if else, switch, while and 27 - 38
This function

JavaScript: 39 - 44
4
2d Array, Array, Find maximum and Object

JavaScript:
5 Double click function, Form validation using required attribute, 45 - 57
Form validation(manually), Keyboard event and on mouse over
event

JavaScript:
6 58 - 64
Error handling, Math function, String function

Introduction to bootstrap:
7 65 - 68
Creating a home page of jewellery shop using bootstrap

Creating a website using bootstrap:

8 Website containing 4 pages- home, places to visit, tours and 69 - 85
booking page

Java:
9 Generate random number, Prime Number, Fibonacci series, 86 - 90
Palindrome, Factorial of number
Java:
10 Reverse a number, Program to display Even numbers from 1 to 91 - 94
100, Find sum of natural numbers, Find largest of three numbers,
Sort an Array

11 Java classes , objects and overloading 95 - 97

OOPS Concept in java:

12 98 -
Abstraction , Inheritance, Polymorphism, Encapsulation
104
Expt No 1:
Aim : College website using form, table, iframes, header, footer and other basic
tags in HTML and Internal CSS.

Theory: Hypertext Markup Language, more commonly referred to as HTML, is where

the WWW started. It is a client-side language that is used to code the frontend of a
website. It helps developers define how the webpage will be structured, and it does
so with the help of elements that are identified by tags.

Code:
college.html
<!DOCTYPE html>

<html>

<head>

<title>college website </title>

<style

table

width:

100%;

height:

40px;

border: 1px solid black;

border-collapse:

collapse;

footer {

text-align: center;

background-color:

black; color: white;

footer img {
width: 50px;

height:

50px;

}
</style>

</head>

<body>

<table>

<tr>

<td style="width:25%; text-align: right;"><img src="logo.jpeg">

</td>

<td>

<h3 style="color:red; text-align:center">Vidya Vikas Mandal's</h3>

<h1 style="text-align:center"><b>Shree Damodar College of

Commerce & Economics</b></h1>

<h3 style="color:red; text-align:center">Affliated to Goa University</h3>

<h3 style="text-align:center">Accredited by NAAC with A grade</h3>

</td>

</tr>

</table>

</header>

<hr>

<iframe src="detailiframe.html" width="100%" height="300px"></iframe>

<table>

<p>Student details</p>

<tr>

<th>First Name</th>

</tr>
<tr style="background-color: aquamarine;">

<td>Adley</td>

<td>Fernandes</td>

</td>

</tr>

<tr>

<td>Ronisha</td>

<td>Barreto</td>

</td>

</tr>

<tr style="background-color: aquamarine;">

<td>Bivin</td>

</td>

</tr>

<tr>

<td>Lynsey</td>

<td>Fernandes</td>

</tr>

</table>

<p>Follow us on</p>

</footer>

</body>

</html>

Detailiframe.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>About Shree Damodar College of Commerce & Economics </h3>

<img src="images.jpeg" style="float:right" width="300" height="250">

<p>Established in 1973, Vidya Vikas Mandal’s Shree Damodar College of Commerce &
Economics – the flagship

institution of Vidya Vikas Mandal, is recognized all over Goa as a premier

institution of higher education. The

College has UGC recognition and is permanently affiliated to Goa University. </p>

<p>Located in the, Shree Damodar Educational Campus, the College is ensconced

in a peaceful environment. The river Sal flowing by the campus, the beautiful trees
and the
well-tended garden have endowed the College campus with natural beauty. The
College has spacious classrooms, a richly stocked library, well-equipped computer
laboratories, a multipurpose hall for indoor games, and a canteen, which the
students and staff put to optimum benefit. The College boasts a complement of
highly qualified, experienced and dedicated teaching faculty.
<p></p>

</body>

</html>
Output :
college.html

Detailiframe.html
Expt No 2:
Aim : Website using HTML and CSS

Theory: A makeup website using HTML and CSS. HTML is like the skeleton of our
website, providing the structure with different parts like the header, navigation
menu, sections for content, and footer. With the help of CSS, we can make our
website look good. It helps us to add colors, styles, and layouts to our HTML
elements. By keeping our CSS in separate files, we can make changes more easily
and keep our code organized.

Code:

Makeup.css

body {

background-color: #F0EBF4; }

#heading{

text-

align:center;

font-size: 50px ;

padding-bottom: 10px;

background-color:

#B8DAD9; width:400px;

border: 5px solid white;

nav {

height:30px;

padding-bottom: 10px;

padding-top: 10px;

background-

color:#C0B9BF; text-

align:left;

a:hover {
background-color: #B8DAD9; }
a{

text-align: left;

padding-left:

10px; color:black;

text-decoration:

none; margin-left:

10px;

font-size: 20px;

padding-right:

10px;

.container img {

width:1000px;

height:100%;

margin-left: 250px;

h1 {

font-family:

Nevis;

margin:10px;

color: rgb(129, 44, 44); }

font-size:20px; }

h2 {

margin:20px;

color:rgb(145, 43, 43);

table{

width: 100%; }
td{

border:2px solid black;

text-

align:left;

padding:

10px; font-

size:20px;

height:200px;

td p{

font-size: 20px; }

td h2{

color:rgb(81, 4, 4); }

td img {

width:400px; }

h1
{
text-align: center;

.product {

margin:30p

border:1px solid

black; border-radius:

5px; float:left;

width:300px;

height:550px;

margin:20px;

padding: 15px;
}
.product img {

width:auto;

height:300px;

.price {

color:green;

font-weight: bold; }

.description {

margin-top: 10px;

} button {

width:100px;

height:50px;

padding: 10px;

margin-top:

10px;

background-color:

#4caf50; color:white;

border: none;

border-radius:

5px;
}

button:hover {

background-color: #45a049; }

input[type="text"],

input[type=passwor

d],

input[type="email"],

input[type="tel"]{
width:100%;

padding:12px

20px;
margin:8px 0;

border:1px solid

#ccc; border-

radius:4px; box-

sizing:border-box;

.form {

border-radius:5px;

background-color:

#f2f2f2; padding:50px;

width:400px;

text-align:left;

font-size:20px; }

input[type=submit] {

width:100%;

background-

color:green;

color:white;

padding:14px 20px;

margin:8px 0;

border:none;

border-

radius:4px;

cursor:pointer;

font-size:20px;

input[type=submit]:hover {

background-

color:#45a049; }

input[type=radio],
input[type=checkbox

]{

width: 15px;
height: 15px;

label {

font-size: 20px;

font-family: Arial, Helvetica, sans-serif; }

textarea {

width:400px;

height:200px;

button:hover {

background-color: #45a049; }

home.html
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Makeup and skincare </title>

<link rel="stylesheet" href="makeup.css">

</head>

<body>

<p id="heading">Glow & Beauty</p>

</center>

<nav>

<a href="makeup.html">Makeup</a>
<a href="skincare.html">Our Product</a>

<a href="contact us.html">Contact Us</a>

</nav>

<img src="images/makeup 1.jpg">

</div>

<h1 style="text-align: left;">What is the correct order of Makeup ?</h1>

<p>We have come in with our guide that gives you the steps to apply makeup.
Before we give you the 4-1-1 on steps to apply makeup, we want to let you know
there really is no set-in-stone correct order. When it comes to following makeup
steps in order, you want to remember that you should do what works best for your
skill level, your skin, and the overall look you are going for.<br><br>

We hope this guide helps you to feel more confident in your own skin and
gets you one step closer to the makeup look you are going for. So, keep reading to
learn more about our step-by-step makeup guide and get to creating a makeup
masterpiece.<br><br>

</div>

</body>
</html>
Output:
Makeup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Makeup and skincare </title>

<link rel="stylesheet" href="makeup.css">

</head>

<body>

<nav>

<a href="makeup.html">Makeup</a>

<a href="skincare.html">Our Product</a>

<a href="contact us.html">Contact Us</a>

</nav>

<h1>Step-by-Step Makeup Tutorial</h1>

<table>

<tr>

<td>

<h2>STEP 1: MOISTURIZER</h2>

<p>Make sure to complete your skin care routine before reaching for any
makeup tools. Prep your skin with a moisturizer or serum to create a good base.
This will keep your skin hydrated and firm and help lay your makeup properly. If
your skin is not moisturized enough, the foundation will look cakey and heavy and
is deposited on the dry areas of your face.</p>

</td>

</tr>

<tr>

<td>

<h2>STEP 2: PRIMER</h2>
<p>Now that your skin is well moisturized, prep your face with primer. Whether
you’re planning on applying a light coat of foundation or a full face of makeup,
primer is an important first step Using primer under your makeup will make your
look last longer.</p>

</td>

</tr>

<tr>

<td>

<h2>STEP 3: FOUNDATION</h2>

<p>Choose a foundation depending on your skin type and tone. Test

foundation colors against your jawline. After applying, if the foundation disappears
without any sort of blending, you’ve found your true match. After you’ve selected a
product, consider the tools you’ll use to apply it. Some women prefer to use their
fingers, while others opt for beauty tools like brushes and sponges. </p>

</td>

</tr>

<tr>

<td>

<h2>STEP 4: CONCEALER</h2>

<p>Concealer is amazing to make you look more awake and get rid of
shadow, dark areas. Pick a product that is two shades lighter than your foundation or
natural skin tone.
Liquid concealer is best for the times you want light coverage over a large area of
your face. Liquid concealer also works well for those looking to create a light finish,
especially in areas of wrinkles, like around the eyes and mouth. </p>

</td>

</tr>

<tr>

<td>

<h2>STEP 5: FOUNDATION POWDER</h2>

<p>Set your makeup base with loose, compact, or setting powder. But
remember, when it comes to powder,less is more. Using a large, fluffy powder brush,
begin by dusting a
light coat of powder all over your face. Press the bristles into the powder, then sweep
across the skin in long, arching strokes.

</p>

</td>

</tr>

<tr>

<td>

<h2>STEP 6: BRONZER</h2>

<p>Bronzer can give your skin that sun-kissed glow all year long. Use a
dedicated bronzer brush to sweep a golden tan across your face bronzer brushes are
crafted with more bristles, and placed much more tightly together, ensuring you get
the most out of your colorful bronzer with each and every swipe.

</p>

</td>

</tr>

<tr>

<td>

<h2>STEP 7: BLUSH</h2>

<p>Flushed cheeks have been a mainstay of makeup glamour for

centuries. If you want to add a bit more color and vibrancy to your complexion,
blush may be the key. Use a dense brush with plenty of bristles to apply your blush
—this will make sure you get the most out of every blush sweep.</p>

</td>

</tr>

<tr>

<td>

<h2>STEP 8: HIGHLIGHTER</h2>

<p>The right highlighter adds a bit of glam and glow to every makeup look.
Whether you’re opting for a more natural look or want something bold and beautiful,
highlighter can complement your makeup application. Highlighters come in a
variety of forms, including liquids, creams, and powders. You can choose to use
one, or find your favorite combination of two or three. </p>

</td>

</tr>

<tr>

<td>

<h2>Step 9: EYEBROWS</h2>

<p>You can use brow liner or eyebrow pencil or gel to shade or fill in your
eyebrows. Unless you have blonde hair, use a product two or three shades lighter
than your hair color. Follow the natural curve of your brows and create a well-
defined arch with an eyebrow brush </p>

</td>

</tr>

<tr>

<td>

<h2>STEP 10: EYESHADOW</h2>

<p>Eyeshadow can add interest to your makeup look, whether you opt for
neutral shades or go bold with colorful hues. Whichever look you use, grab two
complementary eyeshadows: one lighter shade, and one darker shade.</p>

</td>

</tr>

<tr>

<td>

<h2>STEP 11: EYELINER</h2>

<p> Applying eyeliner can be difficult—one little mistake and you’re stuck
with “raccoon” eyes. Banish your eye makeup woes with these essential tips for
applying eyeliner. Apply eyeliner before mascara and after applying eyeshadow
or doing your eyebrows. Use waterproof eyeliner and use it in your waterline for
added definition. You can choose a gel, liquid, or pencil eyeliner.</p>
</td>

<td><img src="images/eyelinear.jpeg"> </td>

</tr>

<tr>

<td>

<h2>STEP 12: MASCARA</h2>

<p>Make your lashes fuller, thicker, and longer with mascara. Try to use a
lightweight or air-whipped formula so that your lashes do not feel weighed down.
Also, do not skip on eyelash curler before applying mascara if you want to hold
your curl.</p>

</td>

<td><img src="images/mascara.webp"> </td>

</tr>

<tr>

<td>

<h2>STEP 13: LIPSTICK</h2>

<p>Outline your lips with a lip liner and select a lipstick of your choice.
Match the color of your liner with your lipstick shade. If you want to create fuller lips
and a larger pout, make the line over your lips </p>

</td>

</tr>

<tr>

<td>

<h2>STEP 14: SETTING SPRAY OR SETTING POWDER</h2>

<p>Setting spray or setting powder can be the final touch for your makeup routine.
If you want makeup that stays on all day long, without greasing, creasing, or
shine, it’s important to invest in a quality setting solution. Setting sprays are
designed for all skin types, and can be used to set a variety of looks, whether
you’re rocking light coverage or sporting a full face of beautiful makeup.</p>

</td>

<td><img src="images/setting srpay.jpg" height="300px"></td>

</tr>
</table>

</body>

</html>

Output :

Skincare.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Makeup and skincare </title>

<link rel="stylesheet" href="makeup.css">

</head>

<body>

<nav>

<a href="home.html">Home</a>
<a href="makeup.html">Makeup</a>
<a href="skincare.html">Our Product</a>
<a href="contact us.html">Contact Us</a>

</nav>
<div class="product">

<p class="description">Biotique Morning Nectar Flawless Skin Moisturizer |

Nourishes and Hydrates Skin | All Skin Types l 120ml</p>

<center> <button>Buy Now </button> <button> Add to Cart</button></center>

</div>

<p class="description">Lakme Absolute Blur Perfect Matte Face Primer-

Waterproof Brightening Makeup Base, 30 ml </p>

<p class="price"> ₹629</p>

<center><button>Buy Now </button> <button> Add to Cart</button></center>

</div>

<p class="description">Lakme 9 To 5 Primer + Matte Perfect Cover Liquid

Foundation, 25ml</p>

<p class="price"> ₹275</p>

<center><button>Buy Now </button> <button> Add to Cart</button></center>

</div>

<p class="description">Swiss Beauty Liquid Light Weight Concealer With Full Coverage
|Easily Blendable Concealer For Face Makeup | Sand Sable, 6G</p>

<center><button>Buy Now </button> <button> Add to Cart</button></center>

</div>

<p class="description">Lakme Face It Compact, Marble, 9 g</p>

<center><button>Buy Now </button> <button> Add to Cart</button></center>

</div>

<p class="description">SUGAR Cosmetics - Face Palette with

Lightweight Blush, Highlighter And Bronzer - 03 Fierce Feat - Long Lasting
Contour Blush Palette</p>

<center><button>Buy Now </button> <button> Add to Cart</button></center>

</div>

<p class="description">Insight Cosmetics Crème Blusher, Face Makeup,

Raspberry Gelato, 3.5 gm</p>

<p class="price"> ₹75</p>

<center><button>Buy Now </button> <button> Add to Cart</button></center>

</div>

<p class="description">Swiss Beauty Fusion Creamy Highlighter with Dewy

Glow Finish and easy to blend formula | Shade-04, 6gm|</p>

<center><button>Buy Now </button> <button> Add to Cart</button></center>

</div>

</body>

</html>

Output:
Contact us.html
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Makeup and skincare </title>

<link rel="stylesheet" href="makeup.css">

</head>

<body>

<nav>

<a href="makeup.html">Makeup</a>

<a href="skincare.html">Our Product</a>

<a href="contact us.html">Contact Us</a>

</nav>

<form>

<center><h2>Login in</h2></center>
<label for="Uname">Username:</label>

<input type="text" id="Uname" name="username"

placeholder="Enter your name"><br><br>

<label for="email">Email id:</label><br>

<input type="email" id="email" name="email" placeholder="Enter

your email id"><br><br>

<label for="pass">Password:</label>

<input type="password" id="pass" name="password"

placeholder="Enter Password"><br><br>

<label for="phone no">Phone no:</label><br>

<input type="tel" id="phone no" name="phone no" placeholder="Enter

your phone number"><br><br>

<label for="gender">Gender : </label>

<input type="radio" id="Male" name="gender" value="Male">

<input type="radio" id="Female" name="gender" value="Female">

<label for="Female">Female</label><br><br>

<label for="items">You are interested in : </label><br>

<input type="checkbox" name="productType" value="makeup

process" id="makeupCheckbox">

<label for="makeupCheckbox">Makeup Tutorial</label><br>

<input type="checkbox" name="productType" value="Makeup

Products" id="skincareCheckbox">

<label for="skincareCheckbox">Makeup Products</label><br><br>

<label for="category">Product category:</label>

<select style="font-size: 17px;">

<option value="makeup">Face products</option>

<option value="skincare">Eye Products</option>

<option value="tools">Beauty Tools</option>

<option value="bestsellers">Bestsellers</option>

</select><br><br>
<textarea id="comment" name="comment" placeholder="what you would
like to suggest"></textarea><br><br>

<input type="submit" value="submit">

</div>

</center>

</form>

</body>

</html>

Output:
Expt No 3: JavaScript
Aim : Learn about Arrow function, Conditional statements like- while, do while, for ,
switch, if else and this function.

Theory: In JavaScript, arrow functions provide a concise way to write functions

because they have a shorter syntax as compare to regular functions. Conditional
statements like 'if else if ' is used on conditions and make decisions accordingly .
'While' loops execute a block of code as long as a specified condition is true,
'do...while' loops execute the block of code once, and then repeat the loop as long
as the specified condition is true. 'For' loops are used to iterate over a block of code
a fixed number of times. 'Switch' statements are used to perform different actions
based on different conditions. the this keyword refers to
an object. Which object depends on how this is being invoked (used or called).

a) Arrow
Function
Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h2>The Arrow function</h2>

let myfunction = (a,b) => a*b;

document.getElementById("demo").innerHTML= myfunction(12,2);

</script>

</body>

</html>

Output:
b) Dowhil
e Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

const number=prompt("Enter a postive

number"); let num1=0, num2=1, nextTerm;

i=2;

console.log('Fibonanci');

console.log(num1);

console.log(num2);

nextTerm= num1 +

num2; do {

console.log(nextTer

m) num1 = num2;
num2 = nextTerm;

nextTerm= num1 +

num2; i++;

while(i<number)

</script>

</body>

</html>

Output:

c) Js for sum of natural

nos Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h2>Javascript to display the sum of natural numbers</h2>

<label>Enter a postive interger:</label><br>

<input type="number" id="val">

<button onclick="calculate()">Calculate</button>

function calculate() {

number=document.getElementById('val').valu

e; let sum=0;

for(i=1;i<=number;i++)

{ sum +=i;

document.getElementById('ans').innerHTML="Sum of natural numbers is:"+sum;

</script>

</body>

</html>

Output:
d) JS If
else
Code:
<!DOCTYPE html>
<html lang="en">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

function calculate() {

marks=document.getElementById('marksobtained').value

; total=document.getElementById('totalmarks').value;

percentage=marks*100/total;

document.getElementById('percent').value=percentage;

if(percentage<35){

classobtained="Fail

";
}

else if(percentage<40){

classobtained="Pass

class";

}
else if(percentage<60){
classobtained="Second class";

else if (percentage<75) {

classobtained="First

class";

else {

classobtained="Distinction";

document.getElementById('class').innerHTML=classobtained; }

</script>

<table>

<tr>

<td><label>Marks obtained</label></td>

<td><input type="number" id="marksobtained"></td>

</tr>

<tr>

<td><label>Total marks</label></td>

<td><input type="number" id="totalmarks"></td>

</tr>

<tr>

<td><button style="width:100px;" onclick="calculate()">Calculate</button></td>

</tr>

<tr>

<td><label>Percentage</label></td>

<td><input type="text" id="percent"></td>

</tr>

</td>

</tr>

</body>
</html>
output:

e) JS
Switch
Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

function calculate(){

num1 =document.getElementById('val1').value;

num2 =document.getElementById('val2').value;

const

expr=document.getElementById('opt').value;

switch(expr){
case '+':

document.getElementById("ans").value = parseInt(num1)+parseInt(num2);

break;

case'-':

document.getElementById("ans").value = parseInt(num1)-parseInt(num2);

break;

case '*':

document.getElementById("ans").value = parseInt(num1)*parseInt(num2);

break;

case '/':

if(num2==0

){

alert("Enter value 2")

else{

document.getElementById("ans").value = parseInt(num1)/parseInt(num2)

break

; case

'%':

if(num2==0){

alert("enter

value2")

else{

document.getElementById("ans").value = parseInt(num1)%parseInt(num2);

break;

}
}
</script>

<table>

<tr>

<td><label>Number 1:</label></td>

<td><input type="number" id="val1"></td>

</tr>

<tr>

<td>

</select>

</td>

</tr>

<tr>

<td><label>Number 2:</label></td>

<td><input type="number" id="val2"></td>

</tr>

<tr>

<td><button onclick="calculate()">Calculate</button></td>

</tr>

<tr>

<td><label>Answer = </label></td>

<td><input type="text" id="ans" readonly></td>

</tr>

</body>
</html>

Output:

f) JS
While
Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

const number=prompt('Enter an interger: '

);

let i=1;

var temp="";

while(i<=10) {

const result=i * number;

temp += number+" * "+ i +" = "

+result+"<br>"; i++;

}
document.getElementById("demo").innerHTML=temp;

</script>

</body>

</html>

Output:

g) This
function
Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>
<body>

<h1>This keyword</h1>

const person ={

firstName: "Aarti",

lastName:"Solanki"

, id:5432,

fullName: function(){

return this.firstName + " "+ this.lastName;

};

document.getElementById('demo').innerHTML=person.fullName();

</script>

</body>

</html>
Output:
Expt No 4:
Aim : Learn about 2D array , Arrays , Finding largest using if else statement and object

Theory: An array is a special variable, which can hold more than one value of same
data type. There are two types of array : 1D array this is a simple list of elements
stored together under one variable name. Each element can be accessed by its index
and 2D array this is an array of arrays, forming a matrix-like structure. Each element
of a 2D array is itself an array, so you have rows and columns. You can access
elements using two index, one for the row and one for the column. To find largest of
3 nos we have used 2 methods first using if else inside a function and second using
math function that is Math.max. Objects in JavaScript are collections of key-value
pairs, where each key is a unique identifier and each value can be of any data type.

a) 2d
array
Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h2>2D Arrays</h2>

let numberArr

= [ [10,20,30],

[40,50,60],

[70,80,90],

[100,110,120],

[130,140,150]

];
var sum = 0;

numberArr.forEach ((row)

=> {

row.forEach ((element)

=> { sum += element;

});

document.getElementById("demo").innerHTML="The sum of all the elements in

the array is : "+sum;

</script>

</body>

</html>

Output:

b) Arr
1
Code

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

const color =

["Blue","Orange","Red","Yellow","Pink"]; size=

color.length;

document.getElementById("demo").innerHTML="<b>Size of the array is

:</b>"+size;

document.getElementById("demo1").innerHTML="<b>Array :</b>"+color;

color.sort();

document.getElementById("demo2").innerHTML="<b>Sorted Array:

</b>"+color; color.reverse();

document.getElementById("demo3").innerHTML="<b>Reversed Array:</b>

"+color; colors = color[2];

document.getElementById("demo4").innerHTML="<b>Element at third postion:

</b>"+colors;

document.getElementById("demo5").innerHTML= color.join("*");

</script>

</body>

</html>

Output:
c) Maxn
o
Code

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>
<body>

<h2>Find max number</h2>

function findLargest(num1, num2,

num3) { if (num1 >= num2 &&

num1 >= num3) {

return num1;

} else if (num2 >= num1 && num2 >=num3)

{ return num2;

} else {

return num3;

const largestNumber = findLargest(10,5,8);

document.getElementById("demo").innerHTML="Largest number is: "+largestNumber

function

findmax(num1,num2,num3) {

return

Math.max(num1,num2,num3);
}

const lNumber = findmax(10,5,8);

document.getElementById("demo1").innerHTML="Largest number using function is
:"+lNumber

</script>

</body>

</html>

Output:

d) Objec
t
Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h2>Javascript objects</h2>

const person = {firstName:"John", lastName:"Doe", age:50,

eyeColor:"blue"}; const car = {Name:"Volvo", model:"2015",

color:"white", engine:"V12"};

document.getElementById("demo").innerHTML=

person.firstName + " is " + person.age + " years old ";

document.getElementById("demo1").innerHTML=

car.Name + " color is " + car.color + " in the year " + car.model + " and engine is "
+car.engin
e;

</script>

</body>

</html>

Output:
Expt No 5:
Aim : Learn about double click function, form validation using two different ways- By
using required attribute in the form inputs and by writing conditional statements ,
keyboard event and mouse over event.

Theory: In JavaScript, the double click function is an event that occurs when a user
clicks a mouse button twice. In Form validation to ensure that user input has to be
correct we can check in two ways one way is by using the required attribute in form
inputs. This attribute tells that input field must be filled out before the form is
submitted. Second way is by writing conditional statements in JS . You can use these
statements to check the values entered by the user against predefined rules or
patterns, displaying error messages if the input is invalid. Keyboard events allow
JavaScript code to respond to user interactions with the keyboard. Mouseover
events occur when the user moves the mouse cursor over an element on a web
page.

a) Double
click Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h2>The ondlbclick function</h2>

<p ondblclick="myFunction()">Double-click this paragraph to trigger a function</p>

function myFunction(){

document.getElementById('demo').innerHTML ="<h1>Hello World</h1>";

</script>

</body>
</html>

Output:

b) Form
val
Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h2>Form Validation</h2>

<form action="/largest.html" method="post">

<label>Name : </label> <input type="text" name="fname" required>

<label>Phone no:</label>

<input type="text" name="phoneno" required minlength="8" maxlength="10">

<br><br>
<label>Email Id: </label> <input type="email" name="email" required>

<label>Password: </label> <input type="password" name="pass" required>

<input type="submit" value="submit">

</form>

</body>

</html>

Output:
c) Form val
2 Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

function validateForm(){

// name validation

let x = document.forms["myForm"]

["username"].value; if(x == ""){

alert("Name must be filled

out"); return false;

// Email validation

var y =

document.myForm.email.value; var

atpos = y.indexOf("@");

var dotpos = y.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length)

{
alert("Not a valid e-mail

address"); return false;

}

// phone validation

let p =

document.getElementById("phone").value;

if(isNaN(p) || p.length!==10){

alert("Invalid Phone

number"); return false;

}

// checkbox

if((document.getElementById("hobby1").checked == false) &&

(document.getElementById("hobby2").checked == false))

alert("Please select hobby

"); return false;

}

if((document.getElementById("male").checked ==
false) && (document.getElementById("female").checked
== false))

alert("Please select a

gender"); return false;

</script>

</head>

<body>
<h2><center>REGISTRATION FORM</center></h2>

<form name="myForm" action="validation.html" onsubmit="return

validateForm()" method="post">

<input type="text" id="fname" name="username">

<label for="email">Email</label>

<input type="text" id="uemail" name="email">

<label for="phone">Phone no</label>

<input type="text" id="phone">

<input type="number" id="age" name="age">

<label for="country">Country</label>

<input type="text" id="country" name="country" value="India" disabled>

<label for="password">Password</label>

<input type="password" id="password" name="password" value="password">

<Label for="file">Resume</Label>

<input type="file" id="file" name="file">

<br><br>
<label>Hobbies</label>

<input type="checkbox" id="hobby1">

<label for="cricket">Cricket</label>

<input type="checkbox" id="hobby2">

<label for="football">Football</label>

<label>Gender</label>

<input type="radio" id="male">

<input type="radio" id="female">

<label for="Female">Female</label>

<select name="city" id="city">

<optgroup label="Metropolitan city">

<option value="mumbai">Mumbai</option>

<option value="Delhi">Delhi</option>

<option value="Kolkata">Kolkata</option>

</optgroup>

<optgroup label="Urban city ">

<option value="chennai">Chennai</option>

<option value="bangalore">Bangalore</option>

<option value="surat">Surat</option>

<option value="jaipur">Jaipur</option>
</optgroup>

</select>

<label>Address:</label><br>

<textarea name="address" rows="10" cols="30"></textarea>

<button>Submit</button>

<button>Reset</button>

</form>

</body>
</html>

Output:
d) Keyboard
event Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h1>Javascript</h1>

<h2>The onkeypress Event</h2>

<p>A function is triggered when the user is pressing a key in the input field.</p>

<input type="text" onkeypress="myFunction()">

function myFunction() {

alert('You pressed a key inside the input filed');

</script>
</body>
</html>

Output:

e) On mouse
over Code:
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h2 id="Key" onmouseover="over()"

onmouseout="out()"> Original text </h2>

function over()

document.getElementById('Key').innerHTML="On mouse over event has occured";

document.getElementById('Key').style.color="blue";

function out()

document.getElementById('Key').innerHTML="On mouse out event has occured";

document.getElementById('Key').style.color="red";

}
</script>

</body>

</html>

Output:
Expt No 6:
Aim : Learn about Error handling, Math function, and string function.

Theory: Error handling is about handle errors that occur during the execution of the
code. In JS error handling can be done with try...catch blocks . With try, you wrap
the code that might cause an error, and with catch, you define what to do if an
error occurs. Math functions in JS provide a variety of mathematical operations that
you can perform on numbers functions like Math.max() to find the highest number,
Math.min() to find the lowest number, Math.round() to round a number to the
nearest integer, Math.random() to generate random numbers and etc. String
functions in JS enable you to manipulate and work with text data which has
methods like charAt(), concat(), toUpperCase().

a) Error
handling
Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Error</title>

</head>

<body>

function

cal(){

let a =

123; let b

= 0; try{

if (b == 0) {

throw "Do not divide by zero";

catch(e){
document.getElementById('demo').innerHTML= "from catch block :
"+"<b>" + e + "</b><br></br>";

finally {

document.getElementById('demo').innerHTML += 120 + 60;

</script>

<p id="demo">Click the button to see the result: </p>

<form>

<input type="button" value="Calulate" onclick="cal()"/>

</form>

</body>

</html>

Output:

b) Math
function
Code

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h1>Javascript Math function</h1>

document.getElementById("demo1").innerHTML = "Math.round : "+Math.round(3.4);

document.getElementById("demo2").innerHTML = "Math.ceil : "+Math.ceil(4.6);

document.getElementById("demo3").innerHTML = "Math.floor : "+Math.floor(2.3);

document.getElementById("demo4").innerHTML = "Math.trund : "+Math.trunc(6.7);

document.getElementById("demo5").innerHTML = "Math.sign : "+Math.sign(4);

document.getElementById("demo6").innerHTML = "Math.pow : "+Math.pow(5,2);

document.getElementById("demo7").innerHTML = "Math.sqrt : "+Math.sqrt(81);

document.getElementById("demo8").innerHTML = "Math.abs : "+Math.abs(-4.7);

document.getElementById("demo9").innerHTML = " Max no is : "+Math.max(0, 750, -7,

-20);
document.getElementById("demo10").innerHTML = "Min no is : "+Math.min(0, 450, -8,
-100);

document.getElementById("demo11").innerHTML = "Math.random : "+Math.random();

document.getElementById("demo12").innerHTML = "Math.Log2: "+Math.log2(8);

</script>

</body>

</html>

Output:

c) String and
test Code:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Javascript String</h1>

var text = "HELLO WORLD";

document.getElementById('demo1').innerHTML = text.charAt(0);

document.getElementById('demo2').innerHTML = text.length;

document.getElementById('demo3').innerHTML =

text.charCodeAt(2);
document.getElementById('demo4').innerHTML = text.at(3);

document.getElementById('demo5').innerHTML = text.slice(2);

document.getElementById('demo6').innerHTML = text.substring(3,6);

document.getElementById('demo7').innerHTML = text.substr(1);

document.getElementById('demo8').innerHTML = text.toUpperCase();

document.getElementById('demo9').innerHTML = text.toLowerCase();

document.getElementById('demo10').innerHTML = text.concat(7);

document.getElementById('demo11').innerHTML = text.trim(5);

document.getElementById('demo12').innerHTML = text.trimStart(4);

document.getElementById('demo13').innerHTML = text.trimEnd(1);

document.getElementById('demo14').innerHTML = text.padStart(16,"*");

document.getElementById('demo15').innerHTML = text.padEnd(14,"*");

document.getElementById('demo16').innerHTML = text.repeat(2);

document.getElementById('demo17').innerHTML = text.replace();

document.getElementById('demo18').innerHTML = text.replaceAll();

document.getElementById('demo19').innerHTML = text.split();

</script>

</body>

</html>

Output:
Expt No 7:
Aim : To learn basics of bootstrap

Theory: Bootstrap is the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-first websites.

Code:
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap 1</title>

</head>

<body>

<h1>

<marquee direction="right" behavior="alernate">ORRA Online Jewellery</marquee>

</h1>

</div>

<div class="col-sm-1"><br><span class="glyphicon

glyphicon- heart"><br>Wishlist</span></div>

<div class="col-sm-1"><br><span class="glyphicon glyphicon-

shopping- cart"><br>Cart</span></div>

<div class="col-sm-1"><br><span class="glyphicon

glyphicon-user"><br>User</span></div>

</div>

<div class="col-sm-3" style="background-color:#A0DEEB;">

<div class="row" style="padding-left:60px">

<h3 text-align: center>Diamond Ring</h3>

<p text-align: center>₹20000</p>

</div>

<div class="col-sm-3" style="background-color:#A0DEEB;">

<img src="bangle.jpg" class="img-circle">

<div class="row" style="padding-left:60px">

<h3 text-align: center>Gold Bangle</h3>

<p text-align: center>₹50000</p>

</div>

<div class="col-sm-3" style="background-color:#A0DEEB;">

<img src="earrings.jpg" class="img-circle">

<div class="row" style="padding-left:60px">

<h3 text-align: center>Stud Diamond Earring</h3>

<p text-align: center>₹10000</p>

</div>

<div class="col-sm-3" style="background-color:#A0DEEB;">

<img src="pendant.jpg" height="225px" class="img-circle">

<div class="row" style="padding-left:60px">

<h3 text-align: center>Diamond Pendant</h3>

<p text-align: center>₹50000</p>

</div>

<h3>INTRODUCTION</h3>

<p>Gold and diamond rings are a must-have accessory in a woman's

wardrobe.They can elevate a piece of
clothing to something else,lend an aura to her personality,complete her
outfit and emphasize her style.

Earrings are a power dressing tool for the modern working woman.
Whether your preference is for simple

gold or diamond studs, statement hooops and danglers, elaborate gold enmeshed
diamond hanging earrings

or gemoetric design ones, our collection of earrings is versatile, varied, features

different styles for

different sensibilities.</p><br>

<p>ORRA designs jewelleries for women featuring cutting-edge design, innovative

methos and for eclectic

tastes at competitive prices. We value what this simple piece of jewellery does to a
woman, and how it

makes her feel, Towards this end, we have diamond earrings that may be
the only adornment she needs on

an evening gown, or a pair of diamond studs for a board meeting, an elaborate

diamond chandelier earning

for a family engagement, or even diamond studded jhumka earnings for a grand
bash. At ORRA, we have

everything!</p>

</div>

<div class="col-sm-12" style="background-color:#A0DEEB;">

<div class="col-sm-3"><b>Get to know</b>

<br>

About

us<br>

Press<br>

Blogs<br>

</div>

<div class="col-sm-3"><b>Social Media</b>

<br>

<span class="glyphicon glyphicon-asterisk">

orra_jewellery.insta.com</span><br> Orra.facebook.com<br>

Orra_7.twitter.com
</div>

<div class="col-sm-3"><b>Contact Us</b>

<br>

1800-2661888<br>

customercare@orra.co.in<b

r> HR-

enquiries@orra.co.in

</div>

<div class="col-sm-3"><b>Registered office</b>

<br>

ORRA Fine Jewellery Pvt.Ltd.<br>

B26,Aver House, Veera Desai Industrial Estate Road,<br>

Off New Link Rd, Andheri West, Mumabi, Maharashtra 400053

</div>

</body>

</html>

Output:
Expt No 8:
Aim : Learn to use different classes of bootstrap

Theory: Bootstrap provides a wide range of pre-defined CSS classes that can use to
style the web pages quickly and efficiently. These classes cover various design
aspects like layout, text formatting, forms, buttons, and navigation. For example,
classes such as "container," "row," and "col" which help create responsive layouts
easily.

Home.html
code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap 1</title>

</head>

<body>

<nav class="navbar navbar-inverse">

<a class="navbar-brand" href="#">Goa</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="home.html">Home</a></li>

<li><a href="places.html">Places to visit</a></li>

<li><a href="tours.html">Tours</a></li>
<li> <a href="booking.html">Booking</a></li>

</ul>

</nav>

</div>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

</ol>

<div class="item active">

<img src="beach 1.jpg" style="width:100%; height:500px">

</div>

<img src="beach 2.jpg" style="width:100%; height:500px">

</div>

<img src="beach 3.webp" style="width:100%; height:500px">

</div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

<span class="sr-only">Previous</span>

</a>

<a class="right carousel-control" href="#myCarousel" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

<h2 style="font-family: lucida handwriting">Discover Goa. Find Yourself</h2>

<h3 style="font-family: lucida handwriting; background-

color:#A0DEEB">Discover Goa as never before. Your travel plan starts here.</h3>

</div>

</body>

</html>

Output:

places.html
code:
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap 1</title>

</head>

<body>

<nav class="navbar navbar-inverse">

<a class="navbar-brand" href="#">Goa</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="places.html">Places to visit</a></li>

<li><a href="tours.html">Tours</a></li>

<li> <a href="booking.html">Booking</a></li>

</ul>

</nav>

</div>

</nav>
<div class="row">

<a href="image 1.jpg" target="_blank">

<img src="image 1.jpg" class="img-rounded" style="width:100%; height:300px">

<p style="padding-left:40%">Beaches</p>

</div>

</a>

</div>

<a href="image 2.webp" target="_blank">

<img src="image 2.webp" class="img-rounded"

style="width:100%; height:300px">

<p style="padding-left:40%">Temple</p>

</div>

</a>

</div>

<a href="image 3.jpg" target="_blank">

<img src="image 3.jpg" class="img-rounded" style="width:100%; height:300px">

<div class="caption">
<p style="padding-left:40%">Church</p>

</div>

</a>

</div>

<a href="image 4.webp" target="_blank">

<img src="image 4.webp" class="img-rounded"

style="width:100%; height:300px">

<p style="padding-left:40%">Waterfall</p>

</div>

</a>

</div>

<a href="image 5.jpg" target="_blank">

<img src="image 5.jpg" class="img-rounded" style="width:100%; height:300px">

<p style="padding-left:40%">Widlife Sanctuary</p>

</div>

</a>

</div>

<a href="image 6.jpg" target="_blank">

<img src="image 6.jpg" class="img-rounded" style="width:100%; height:300px">

<p style="padding-left:40%">Water sports</p>

</div>

</a>

</div>

</body>

</html>

Output:

Tours.html
code:

<!DOCTYPE html>

<head>

<title>Bootstrap 1</title>

</head>

<body>

<nav class="navbar navbar-inverse">

<a class="navbar-brand" href="#">Goa</a>

</div>

<ul class="nav navbar-nav">

<li><a href="places.html">Places to visit</a></li>

<li class="active"><a href="tours.html">Tours</a></li>

<li> <a href="booking.html">Booking</a></li>

</ul>

</nav>

</div>

</nav>

<h2>TOURS</h2>

<th>Tours</th>

<th>Schedule</th>

<th>Event status</th>

</tr>

</thead>

<tbody>

<tr>

<td>South Goa tour from Margao</td>

<td>13th Feb- 4th Mar</td>

<td>7:30 am to 6:00 pm</td>

<td><span class="btn btn-default btn-xs">Inactive</span></td>

</tr>

<td>South Goa tour from Panjim</td>

<td>1st Feb- 4th May</td>

<td>7:30 am to 6:00 pm</td>

<td><span class="btn btn-warning btn-xs">Suspended</span></td>

</tr>

<td>North Goa tour from Panjim</td>

<td>1st Jan- 4th May</td>

<td>7:30 am to 6:00 pm</td>

<td><span class="btn btn-danger btn-xs">Complete</span></td>

</tr>
<tr class="info">

<td>North Goa tour from Margao</td>

<td>2nd Feb- 4th Jul</td>

<td>7:30 am to 6:00 pm</td>

<td><span class="btn btn-info btn-xs">Active</span></td>

</tr>

<td>Cancona tour</td>

<td>11th Mar- 4th May</td>

<td>7:30 am to 6:00 pm</td>

<td><span class="btn btn-success btn-xs">Inactive</span></td>

</tr>

<td>Mayem Special tour</td>

<td>21st Jul- 4th Dec</td>

<td>7:30 am to 6:00 pm</td>

<td><span class="btn btn-primary btn-xs">Active</span></td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Output:
Booking.html

Code:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap 1</title>

</head>

<body>

<nav class="navbar navbar-inverse">

<a class="navbar-brand" href="#">Goa</a>

</div>
<ul class="nav navbar-nav">

<li><a href="places.html">Places to visit</a></li>

<li><a href="tours.html">Tours</a></li>

<li class="active"> <a href="booking.html">Booking</a></li>

<li> <a href="jump.html">Message</a></li>

</ul>

</nav>

</div>

</nav>

<br/>

<h2 style="font-family:Lucida handwriting ; padding-left: 10%">Get ready to

explore goa with ease!</h2><br/>

<form class="form-horizontal" action="/action_page.php">

<label class="control-label col-sm-2" for="name">Name: </label>

<input type="text" class="form-control" id="name" placeholder="Enter name">

</div>

<label class="control-label col-sm-2" for="gender">Gender: </label>

<div class="col-sm-9 form-check">

<input type="radio" class="form-check-input" id="male"

name="gender" value="male" checked>Male

<input type="radio" class="form-check-input" id="female"

name="gender" value="female" checked>Female

</div>

</div>
<div class="form-group">

<label class="control-label col-sm-2" for="tour">Tour type:</label>

<div class="col-sm-9 form-check">

<input type="checkbox" class="form-check-input" id="NG" name="NG"

value="NG" checked>

<label class="form-check-label" for="NG">North Goa</label>

<br/>

<input type="checkbox" class="form-check-input" id="SG" name="SG" value="SG">

<label class="form-check-label" for="SG">South Goa</label>

</div>

<label class="control-label col-sm-2" for="email">Email: </label>

<input type="email" class="form-control" id="name" placeholder="Enter

email" name="name">

</div>

<label class="control-label col-sm-2" for="pass">Password: </label>

<input type="password" class="form-control" id="pass"

placeholder="Enter password" name="pass">

</div>

<label><input type="checkbox" name="remember">Remeber me</label>

</div>

<label class="control-label col-sm-2" for="select">Select: </label>

<select class="form-control" id="select">

</select>

</div>

<label class="control-label col-sm-2" for="email">File: </label>

<input type="file" class="form-control" id="file" placeholder="Upload" name="pass">

</div>

<label class="control-label col-sm-2" for="email">Write: </label>

</div>

<div class="col-sm-offset-2 col-sm-10">

<div>

<button>Submit</button>

</div>

</form>

</body>

</html>

Output:

Jump.html

Code:

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap 1</title>

</head>

<body>

<nav class="navbar navbar-inverse">

<a class="navbar-brand" href="#">Goa</a>

</div>

<ul class="nav navbar-nav">

<li><a href="places.html">Places to visit</a></li>

<li><a href="tours.html">Tours</a></li>

<li> <a href="booking.html">Booking</a></li>

<li class="active"> <a href="jump.html">Message</a></li>

</ul>

</nav>

</div>

</nav>

<h1>Thank You</h1>

<p>It was nice to see you here !</p>

<p>We hope this website have helped you !</p>

</div>

</body>

</html>

Output:
Expt No 9:
Aim : Learn about random function , if else , for loop and while loop

Theory: Generating random number in java using Math function that is

Math.random(). Using if else for checking if a number is prime number or not. For
loop is used for fibnonacci series and factorial of a number and while loop is used to
check is a number is palindrome or not.
a) Generate Random Number in
java Code:
package
randomnumberexample1;
import java.lang.Math;

public class

RandomNumberExample1 { public

static void main(String[] args) {

// TODO code application logic here
System.out.println("Random Number: "+Math.random());
}

}
Output:

b) Prime Number program in

java Code:
package primenumber;

import java.util.Scanner;

public class

PrimeNumber {
public static void main(String[] args) {
// TODO code application logic
here int n, i, m=0, flag=0;
Scanner read = new
Scanner(System.in);
System.out.println("Enter numbers");
n=
read.nextInt();
m=n/2;
if(n==0 || n==1){
System.out.println(n+" is not prime number");
}else{
for(i=2;i<m;i+
+){ if(n
%i==0){
System.out.println(n+" is not a prime
number"); flag=1;
break;
}
}
if(flag==0) {
System.out.println(n+" is prime number");
}
}
}

}
Output:

c) Fibonacci series in
java Code:
package fibonacciseries;

import java.util.Scanner;

public class

Fibonacciseries {
public static void main(String[] args) {
// TODO code application logic here
int n1=0, n2=1,n3,i,count;
Scanner read = new
Scanner(System.in);
System.out.println("Enter numbers");
count= read.nextInt();
System.out.print(n1+" "+ n2);

for(i=2;i<count;++i)
{
n3=n1+n2;
System.out.print("
"+n3); n1=n2;
n2=n3;
}
}

}
Output:

d) Palindrome program in
java Code:
package palindrome;

import

java.util.Scanner;

public class

Palindrome {

public static void main(String[] args) {

// TODO code application logic
here int n, r, sum=0, temp;
Scanner read = new
Scanner(System.in);
System.out.println("Enter numbers");
n= read.nextInt();

temp=n;
while(n>0)
{
r=n%10;
sum=(sum*10)+
r; n=n/10;

}
if(temp==sum){
System.out.println("palindrome
number");
} else{
System.out.println(" not palindrome ");
}
}
}
Output:

e) Factorial program in
java Code:
package factorial;

import

java.util.Scanner;

public class Factorial {

public static void main(String[] args) {

// TODO code application logic
here int i, fact=1;
int n;
Scanner read = new
Scanner(System.in);
System.out.println("Enter number");
n=
read.nextInt();
for(i=1; i<=n;i+
+){
fact=fact*i;
}
System.out.println("Factorial is: "+fact);
}
}

Output:
Expt No 10:
Aim : Learn about how to reverse a number , to display even numbers from 1 to
100, to find sum of natural numbers , to find largest of 3 numbers and program to
sort an Array

Theory: Using while loop we can solve reverse program . Using for loop we can
iterate the loop and print only even numbers with if condition . Using for loop we
can print sum of natural numbers by taking user input. Using if else if for finding
largest of 3 numbers and by importing array class we can use Arraysort() function to
sort an array.

a) Reverse a number in
java Code:
package reversenumber;

import java.util.Scanner;

public class

ReverseNumber {

public static void main(String[] args) {

// TODO code application logic
here int number, reverse=0;
Scanner read= new Scanner(System.in);
System.out.println("Enter first number");
number= read.nextInt();
while(number !=0)
{
int remainder= number % 10;
reverse= reverse * 10 +
remainder; number =
number/10;
}
System.out.println("The reverse of the given number is : "+ reverse);
}

}
Output:
b) Java program to display even numbers from 1
to 100 Code:
package even_number;

public class

Even_Number {

public static void main(String[] args) {

// TODO code application logic
here int number=100;
System.out.println("List of even numbers from 1 to
"+number+":"); for(int i=1;i<=number;i++){
if(i % 2==0){
System.out.print(i + " ");
}
}
}

}
Output:

c) Java program to find sum of natural

numbers Code:
package

sum_of_natural_numbrers; import

java.util.Scanner;

public class Sum_Of_natural_numbrers {

public static void main(String[] args) {

// TODO code application logic
here int n, sum=0, i;
Scanner read= new Scanner(System.in);
System.out.println("Enter number");
n=
read.nextInt();
for(i=1; i<=n; i+
+){ sum= sum +
i;
}
System.out.println("Sum of first "+n+" number is:"+sum);
}
}
Output:

d) Java program to find largest of three

numbers Code:
package largest_number;

import java.util.Scanner;

public class

Largest_Number {

public static void main(String[] args) {

// TODO code application logic
here int a, b, c;
Scanner read= new
Scanner(System.in);
System.out.println("Enter first
number"); a = read.nextInt();
System.out.println("Enter Second
number"); b = read.nextInt();
System.out.println("Enter Third
number"); c = read.nextInt();
if (a>b && a>c){
System.out.println("Number 1 is greater: ");
} else if(b>a && b>c){
System.out.println("Number 2 is greater");
}
else{
System.out.println("Number 3 is greater ");
}
}

}
Output:

e) Java program to sort an

Array Code:
package arraysort;
import
java.util.Arrays;

public class ArraySort {

public static void main(String[] args) {

// TODO code application logic here
int [] arrayname = new int [] {90, 23, 5, 109, 12, 22, 67, 34};

Arrays.sort(arrayname);
System.out.println("Elements of array sorted in ascending order: ");

for(int i = 0; i< arrayname.length; i++)

{
System.out.println(arrayname[i]);
}

}
Output:
Expt No 11:
Aim : Learn about classes and objects and method overloading

Theory: A class is a blueprint or template that defines the properties and behaviors
common to all objects . It serves as a blueprint for creating objects. An object is an
instance of a class. It represents a specific occurrence or realization of the class, with
its own set of data (attributes) and behaviors (methods). Method overloading is a
feature of Java that allows a class to have multiple methods with the same name
but different parameter lists.

a) Java program with classes and

objects Code:
package car;

public class Car {

private String
brand; private
String model;
private int year;
private String
color;

public Car(String brand, String model, int year, String

color){ this.brand=brand;
this.model=mod
el; this.year=
year;
this.color=color;
}

public void displayPrperties(){

System.out.println("Brand:
"+brand);
System.out.println("Model:
"+model); System.out.println("Year:
"+year); System.out.println("Color:
"+color); System.out.println();
}

public static void main(String[] args) {

// TODO code application logic here
Car audi= new Car("Audi", "A4", 2022, "Silver");
Car rangeRover = new Car("Range Rover", "Evoque", 2021,
"Black"); Car bmw = new Car("BMW", "X5", 2023, "Blue");
System.out.println("Properites of Audi:
"); audi.displayPrperties();
System.out.println("Properites of Range
Rover: "); rangeRover.displayPrperties();

System.out.println("Properites of BMW: ");

bmw.displayPrperties();

}
Output:

b) Java
Overloading
Code:
package overloading;

public class Overloading {

public static int add(int a, int
b){ return a + b;
}

public static int add(int a, int b, int

c){ return a + b + c;
}
public static String add(String str1, String
str2){ return str1 + str2;
}

public static void main(String[] args) {

// TODO code application logic here
System.out.println("Sum of 5 and 10: " +add(5,10));
System.out.println("Sum of 5, 10 and 15: "
+add(5,10,15));
System.out.println("Concatenation of 'Hello' and 'World': "+add("Hello",
"World"));
}

}
Output:
Expt No 12:
Aim : Learn about the OOPs Concept in Java

Theory: In Java, Object-Oriented Programming (OOP) is a programming paradigm

based on the concept of objects. Abstraction means on hiding certain details and
exposing only the essential information to the user. Inheritance means inheriting
properties of parent class to child class. Polymorphism refers to the ability of objects
to take on multiple forms.
Encapsulation focuses on bundling data (attributes) and methods (functions) that
operate on the data into a single unit called an "object."

a) Abstracti
on Code:
Shape.java
package abstraction2;

abstract class Shape {

abstract double calculateArea();

void display() {
System.out.println("This is a
shape");
}
}
Circle.java
package abstraction2;

public class Circle extends

Shape { double radius;

Circle(double
radius) {
this.radius =
radius;
}

@Override
double calculateArea() {
return Math.PI * radius * radius;
}
}
Rectangle.java
package
abstraction2;
public class Rectangle extends
Shape { double length;
double width;
Rectangle(double length, double
width) { this.length = length;
this.width = width;
}

@Override
double calculateArea()
{ return length *
width;
}
}
Triangle.java
package abstraction2;

public class Triangle extends

Shape { double base;
double height;

Triangle(double base, double

height) { this.base = base;
this.height = height;
}

@Override
double calculateArea() {
return 0.5 * base *
height;
}
}
Abstraction2.java
package
abstraction2;

public class Abstraction2 {

public static void main(String[] args) {

// TODO code application logic
here Circle circle = new Circle(5);
Rectangle rectangle = new
Rectangle(4, 6); Triangle triangle = new
Triangle(2, 3);

System.out.println("Area of the circle: " +

circle.calculateArea()); circle.display();
System.out.println("Area of rectangle: " + rectangle.calculateArea());
rectangle.display();

System.out.println("Area of the triangle: " +

triangle.calculateArea()); triangle.display();
}
}

Output:

b) Inheritanc
e Code:
Animal.java
package inheritance;

public class
Animal { String
name;

public Animal(String
name){
this.name=name;
}

public void sound(){

System.out.println("Animal
sound");
}
}

class Dog extends Animal {

public Dog(String
name) { super(name);
}

@Override
public void sound(){
System.out.println("Woof");
}

class Cat extends

Animal{ public

Cat(String name) {
super(name);
}

@Override
public void sound(){
System.out.println("Meow");
}

}
Inheritance.java
package
inheritance;

public class Inheritance {

public static void main(String[] args) {

// TODO code application logic
here Dog dog= new
Dog("Buddy");
Cat cat = new Cat("Whiskers");

dog.sound();
cat.sound();
}

}
Output:
c) Polymorphis
m Code:
package polymorpshism;

public class

Polymorpshism {

public static void main(String[] args) {

// TODO code application logic
here int result1= add(5,10);
double result2=add(3.5,7.2);

System.out.println("Result of integer
addition:"+result1); System.out.println("Result of
integer addition:"+result2);

}
public static int add(int a, int
b){ return a + b;
}

public static double add(double a, double

b){ return a + b;
}

}
Output:

d) Encapsulati
on Code:
Person.java
package

encapsulationprog; public
class Person {
private String
name; private int
age;

//Public constructor
public Person(String name, int
age){ this.name=name;
this.age=age;
}
//public getter for
name public String
getName(){
return name;
}

public void setName(String

name){ this.name=name;
}

//public getter for

age public int
getAge(){
return age;
}

//public setter for age

public void setAge(int
age){
if(age >=0){
this.age=ag
e;
} else{
System.out.println("Age cannot be negative");
}
}

//public method to display information about the

person public void displayInfo(){
System.out.println("Name :
"+name); System.out.println("Age
: "+age);
}

}
EncapsulationProg.java
package
encapsulationprog;

public class EncapsulationProg {

public static void main(String[] args) {

// TODO code application logic here
//creating an instance of the person class
Person person = new Person("John Doe",
25);

System.out.println("Original Information:");
System.out.println("Name: "+person.getName());
System.out.println("Age: "+person.getAge());

person.setName("Jane
Doe"); person.setAge(30);

System.out.println("\nUpdated Information");
person.displayInfo();

}
Output:

LK Valves Product Catalogue Rev. 6
No ratings yet
LK Valves Product Catalogue Rev. 6
211 pages
College Website Project
No ratings yet
College Website Project
16 pages
Unit - I Introduction To HTML: Web Site
No ratings yet
Unit - I Introduction To HTML: Web Site
26 pages
Dissertation Plan Par Opposition
100% (2)
Dissertation Plan Par Opposition
4 pages
List of Programmes For IWT Lab
No ratings yet
List of Programmes For IWT Lab
20 pages
Activity 1 BRS NSC Mar 2017 Cheques Out)
No ratings yet
Activity 1 BRS NSC Mar 2017 Cheques Out)
1 page
Silk and Silkworms Powerpoint English - Ver - 1
No ratings yet
Silk and Silkworms Powerpoint English - Ver - 1
8 pages
P24CDMCABC3 Unit2
No ratings yet
P24CDMCABC3 Unit2
10 pages
WT Practical File Harshita Gupta COMPLETE
No ratings yet
WT Practical File Harshita Gupta COMPLETE
84 pages
Effectiveness of PPE Welding Presentation
No ratings yet
Effectiveness of PPE Welding Presentation
11 pages
S71937 - Enabling Intelligent Storage To Process Data For Ai Application Ibm
No ratings yet
S71937 - Enabling Intelligent Storage To Process Data For Ai Application Ibm
21 pages
KP Technical Seminal Final Report FINAL
No ratings yet
KP Technical Seminal Final Report FINAL
30 pages
Tutorial 1
No ratings yet
Tutorial 1
2 pages
SIWES Presentation
No ratings yet
SIWES Presentation
26 pages
Web Designing Write Ups 1 To 3
No ratings yet
Web Designing Write Ups 1 To 3
25 pages
Web Design MANUAL
No ratings yet
Web Design MANUAL
24 pages
HTML
No ratings yet
HTML
39 pages
Intership
No ratings yet
Intership
29 pages
Daylighting Streams Text
No ratings yet
Daylighting Streams Text
6 pages
Chapter 18: C++ As A Better C Introducing Object Technology
No ratings yet
Chapter 18: C++ As A Better C Introducing Object Technology
23 pages
Mechanical Engineering Seminars
No ratings yet
Mechanical Engineering Seminars
1 page
Objective Function Decisions Demand Supply Constraints
No ratings yet
Objective Function Decisions Demand Supply Constraints
7 pages
The Star Weaver
No ratings yet
The Star Weaver
2 pages
Lesson Plan #5-Final Demo
No ratings yet
Lesson Plan #5-Final Demo
5 pages
Lab Manual (WDD)
No ratings yet
Lab Manual (WDD)
21 pages
Web Design MANUAL Merged
No ratings yet
Web Design MANUAL Merged
80 pages
HTML Biginers Task
No ratings yet
HTML Biginers Task
3 pages
WYSIWYG
No ratings yet
WYSIWYG
26 pages
Tendernotice - 1 (5) - 1
No ratings yet
Tendernotice - 1 (5) - 1
4 pages
Lab Mannual Web Technologies
No ratings yet
Lab Mannual Web Technologies
21 pages
WebTech Lab Mannual
No ratings yet
WebTech Lab Mannual
64 pages
Activity 2 A
No ratings yet
Activity 2 A
11 pages
4th Sem Internship
No ratings yet
4th Sem Internship
41 pages
WTL - Experiment No 02
No ratings yet
WTL - Experiment No 02
7 pages
Introduction To HTML & CSS A Guide For Beginners
No ratings yet
Introduction To HTML & CSS A Guide For Beginners
3 pages
Lecture 0
No ratings yet
Lecture 0
25 pages
Cost Optimization of Reinforced Concrete Rectangular Beams
100% (1)
Cost Optimization of Reinforced Concrete Rectangular Beams
12 pages
Lecture 1 HTML and CSS New
No ratings yet
Lecture 1 HTML and CSS New
42 pages
Free Ki Majduri
No ratings yet
Free Ki Majduri
39 pages
Lecture 8 - Transport Layer
No ratings yet
Lecture 8 - Transport Layer
50 pages
Venkata Ramana Reddy WB Designing File 2k24CSUN0208 - Convert
No ratings yet
Venkata Ramana Reddy WB Designing File 2k24CSUN0208 - Convert
18 pages
Detailed Lesson Plan
No ratings yet
Detailed Lesson Plan
6 pages
Lab HTML Set 1 Basic Tags
No ratings yet
Lab HTML Set 1 Basic Tags
6 pages
Case Study Synopsis Lpu Ums
No ratings yet
Case Study Synopsis Lpu Ums
5 pages
It Skills Chapter 2
No ratings yet
It Skills Chapter 2
20 pages
Murach's HTML5 and CSS3 3rd Edition (2015)
100% (4)
Murach's HTML5 and CSS3 3rd Edition (2015)
703 pages
Introduction To Websites and HTML Clean
No ratings yet
Introduction To Websites and HTML Clean
4 pages
E-Commerce Lab File
No ratings yet
E-Commerce Lab File
17 pages
Aman Web Tech
No ratings yet
Aman Web Tech
20 pages
Ultimate HTML CSS Guide
No ratings yet
Ultimate HTML CSS Guide
3 pages
HTML CSS JavaScript
No ratings yet
HTML CSS JavaScript
45 pages
HTML and CSS Tutorial - The Basics
No ratings yet
HTML and CSS Tutorial - The Basics
75 pages
E Commerce PDF
No ratings yet
E Commerce PDF
62 pages
Target Appraisal: Case: Dr. Reddy Laboratories (A) & (B)
No ratings yet
Target Appraisal: Case: Dr. Reddy Laboratories (A) & (B)
45 pages
CCW Basics and The Micro 830
No ratings yet
CCW Basics and The Micro 830
52 pages
HTML Css Lec1
No ratings yet
HTML Css Lec1
39 pages
Part 2
No ratings yet
Part 2
17 pages
YLSTD30-40K01小功率直流充电桩用户手册User Manua V1 - (EN&CN) ) 已校对
No ratings yet
YLSTD30-40K01小功率直流充电桩用户手册User Manua V1 - (EN&CN) ) 已校对
17 pages
Web App Dev Lab Ex 1 - 3
No ratings yet
Web App Dev Lab Ex 1 - 3
36 pages
WT - Practical QUESTIONS PUNEET
No ratings yet
WT - Practical QUESTIONS PUNEET
15 pages
CS1701 Lab Sheet Week02
No ratings yet
CS1701 Lab Sheet Week02
4 pages
Productores de Banano de Nicaragua Probanic Datos Climáticos de Estación Finca San Luis Enero, 2011
No ratings yet
Productores de Banano de Nicaragua Probanic Datos Climáticos de Estación Finca San Luis Enero, 2011
17 pages
Lecture 0 Notes
No ratings yet
Lecture 0 Notes
30 pages
Elliott Wave Theroist
100% (1)
Elliott Wave Theroist
5 pages
Fundamental of Web Design Assignment 1
No ratings yet
Fundamental of Web Design Assignment 1
10 pages
Expt 4 Conclusion and Applications
0% (2)
Expt 4 Conclusion and Applications
2 pages
Jitendra WD
No ratings yet
Jitendra WD
18 pages
WT Unit 1
No ratings yet
WT Unit 1
6 pages
Alyssamari Aurereyes
No ratings yet
Alyssamari Aurereyes
2 pages
Web Progamming
No ratings yet
Web Progamming
16 pages
Lecture0 (HTML and CSS)
No ratings yet
Lecture0 (HTML and CSS)
29 pages
CSR of Reliance Industries PDF
67% (3)
CSR of Reliance Industries PDF
30 pages
Lesson 1 - Introduction HTML Css
No ratings yet
Lesson 1 - Introduction HTML Css
38 pages
Practical File HTML
No ratings yet
Practical File HTML
90 pages
Website
No ratings yet
Website
29 pages
Basic HTML and CSS Basic
100% (1)
Basic HTML and CSS Basic
71 pages
HTML and CSS Tutorial - The Basics
No ratings yet
HTML and CSS Tutorial - The Basics
44 pages
Murach's HTML5
No ratings yet
Murach's HTML5
703 pages
AP Chemistry Solubility Rules Equations Sheet
100% (1)
AP Chemistry Solubility Rules Equations Sheet
8 pages
Web Technologies HTML and CSS: 2000 West Park Drive Westborough MA 01581 USA Phone: 508 389 7300 Fax: 508 366 9901
No ratings yet
Web Technologies HTML and CSS: 2000 West Park Drive Westborough MA 01581 USA Phone: 508 389 7300 Fax: 508 366 9901
14 pages
CNI Practical File
0% (1)
CNI Practical File
56 pages
Food Safety, Sanitation and Hygience
No ratings yet
Food Safety, Sanitation and Hygience
21 pages
Lecture 0 - CS50's Web Programming With Python and JavaScript
No ratings yet
Lecture 0 - CS50's Web Programming With Python and JavaScript
1 page
CodeSchool BeginnersGuideToWebDevelopment PDF
100% (1)
CodeSchool BeginnersGuideToWebDevelopment PDF
40 pages
Vitotres343 TechGuide PDF
No ratings yet
Vitotres343 TechGuide PDF
32 pages
HTML Tutorial W3schools
No ratings yet
HTML Tutorial W3schools
4 pages
Paidout Policies
No ratings yet
Paidout Policies
2 pages
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet
PHP Interview Questions, Answers, and Explanations: PHP Certification Review: PHP FAQ
From Everand
PHP Interview Questions, Answers, and Explanations: PHP Certification Review: PHP FAQ
equitypress
No ratings yet
JavaScript Interview Questions, Answers, and Explanations: JavaScript Certification Review
From Everand
JavaScript Interview Questions, Answers, and Explanations: JavaScript Certification Review
equitypress
No ratings yet

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.