1

Mata Gujri College

Fatehgarh Sahib

Submitted from: Submitted to:

Khushi Dr.Sharanpreet kaur
B.C.A. 1st Assistant Professor
220197

________________________________
P.G Computer Department

INDEX:
 2

Sr no. Name of program Date Signatur

e
 3

1. JavaScript syntax 17 jan 2023

2. JavaScript basics 20 jan 2023

3. JavaScript handling 22 jan 2023

Output
4. Data Type 25 jan 2023

5. Primitive Data Type 26 jan 2023

6. Non Primitive Type 27 jan 2023

7. Arithmetic Operator 27 jan 2023

8. Assignment Operator 30 jan 2023

9. Comparison Operator 1 feb 2023

10. Type of Operator 6 feb 2023

11. Local & Global 10 feb 2023

Variable
12. Array 10 feb 2023

13. If else statements 10 feb 2023

14. If statement 10 feb 2023

15. If else statement 10 feb 2023

16. If else if statement 10 feb 2023

17. loops 12 feb 2023

18. For loop 12 feb 2023

19. While loop 14 feb 2023

 4

20. For in loop 14 feb 2023

21. Function 15 feb 2023

22. Function With Argument 15 feb 2023

23. Default Arguments 17 feb 2023

24. Function properties 17 feb 2023

25. Function hoisting 22 feb 2023

26. String methods 28 feb 2023

27. Math function 1 march2023

28. Regular expression 2 march2023

29. Form validation 3 march2023

30. Email validation 3 march2023

31. Events:Mouse over 3 april2023

Event
32. addEventLisner 5 april2023

33. OnloadEvent 5 april2023

34. getElementById 6 april2023

35. getElementByName 6 april2023

36. Standard 9 april2023

jQueryProgram
37. jQuery Selectors 10 april2023

38. Element Selector 10 april2023

 5

39. Id Selector 10 april2023

40. jQuery toggle method 11 april2023

41. jQuery Hide & Show 11 april2023

Method
42. jQuery Fading Method 11 april2023

43. jQuery Animation 13 april2023

Method
44. jQuery Sliding Method 13 April2023

45. Slidedown()Method 13 April2023

46. SlideUp()Method 13 April2023

47. Bootstrap Button 17 April2023

48. Dropdown Button 17 April2023

49. Close Button 17 April2023

50. Bootstrap Container 18 April2023

51. Bootstrap Table 18 April2023

52. Bootstrap Grid 18 April2023

53. Navbar 20 April2023

 6

JavaScript syntax:
Syntax:-

Output:-

JavaScript basics:
 7

Add Two Numbers:-

Output:-
 8

Mul,divide,sub two numbers in Html:-

Output:-

JavaScript handling output:

 9

Using document.write():-

Output:-

Window.alert():-
 10

output:-

Console.log():-
 11

Output:-

JavaScript Data Types

Data type:-

Output:-

Primitive data type:-

 12

Output:-

Non-Primitive data type:-

 13

Output:-

Concatenation:
 14

Output:-

Operators:
Arithmetic operators:-
 15

Output:-

Assignment operators:-

Output:-
 16

Comparison operators:-

Output:-

Type of operators:-

Output:-
 17

Variable

Local & Global Variable:-

Output:-
 18

Array
Example:-

Output:-

Example:-
 19

Output:-

Example:-

Output:-
 20

Example:-

Output:-

If else:
If Statement():-
 21

Output:-

If else statement:-
 22

Output:-

If else if statement:-
 23

Output:-

Loops:
For loop():-
 24

Output:-

While loop():-
 25

Output:-

For in loop():-
 26

Output:-

Function:
 27

Example:-

Output:-

Example:-
 28

Output:-

Example:-
 29

Output:-

Example:-

Output:-
 30

Default Argument:-

Output:-

Pass by value & Reference:-

 31

Output:-
 32

Function Hoisting:-

Output:-

Function properties:-
 33

Output:-

String Methods:-
<Script>
let text="apple,banana,mango" //string slice
a=text.slice(7)
b=text.slice(7,10)
c=text.slice(-2)
d=text.slice(-8,-6)
document.write(a,"<br>")
document.write(b,"<br>")
document.write(c,"<br>")
document.write(d,"<br>")
x="apple,banana,mango" //substring
y=text.substring(7)
z=text.substring(7,10)
document.write(y,"<br>")
document.write(z,"<br>")
one="apple,banana,mango" //substring
two=text.substr(7)
 34

three=text.substr(7,10)
document.write(two,"<br>")
document.write(three,"<br>")
</script>

Output:-

Example
<Script>
let text ="Please visit Microsoft";
let newText = text.replace("Microsoft","Mata Gujri
College FGS<br>");
document.write(newText)
//trimEnd
let text1 ="Hello World! ";
let text2 = text1.trimEnd();
document.write(text2)
</script>

Output:-

Math Function:-
<script>
document.write("math.floor= "+Math.floor(5.65))
document.write("<br>")
 35

document.write("math.ceil= "+Math.ceil(5.745))
document.write("<br>")
document.write("math.trunc= "+Math.trunc(-5.745))
document.write("<br>")
document.write("math.round= "+Math.round(5.74))
</script>

Output:-

Regular expression:-
<script>
const r = new RegExp(/^a...s$/)
document.write(r.test("alais"))

const comp = new RegExp(/^c......r$/)

d = comp.test("computer")
if (d == true) {
document.write("<br>match found")
}
else {
document.write("<br>match does not found")
}
</script>

Output:-
 36

Form Validation:-
<html><head><script>
function validation() {
if (document.myForm.name.value == '') {
alert("plz enter your name")
document.myForm.name.focus()
return false;}
return true;}
</script></head><body>
<h3>FORM</h3><table border="2px solid black">
<form name="myForm" onsubmit="return(validation())">
<tr>
<td><label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
</td>
</tr> <tr>
<td><label for="email">Email:</label>
<input type="text" id="email"name="email"><br>
</td>
</tr><tr>
<td><label for="zip code">Zip Code:</label>
<input type="text" id="zip code"name="zip code"><br>
</td>
</tr><tr>
<td><label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="canada">Canada</option>
<option value="australia">Australia</option>
</select><br>
</td>
</tr> <tr>
<td><input type="submit"></td>
</tr></form>
</table>
</body></html>

Output:-
 37

Email Validation:-
<html>
<head>
<script>
function validateEmail(emailId) {
var mailformat = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])
+\.([A-Za-z]{2,4})$/;
if (emailId.value.match(mailformat)) {
document.form1.text1.focus();
return true;
}
else {
alert("Invalid email address");
document.form1.text1.focus();
return false;
}}
</script>
</head>
<body>
<div>
 38

<h2>JavaScript email validation</h2>

<form name="form1" action="#">
Email: <input type="text" name="email"></br></br>
<input type="submit" name="submit" value="Submit"
onclick="validateEmail(document.form1.email)">
</form>
</div>
</body>
</html>

Output:-

UNIT-2
Events:
Mouse over Event:-
Example:-
 39

Output:-

JavaScript addEventListener():-
Example:-
 40

<html>
<body>
<p>Example of the addEventListener()method.</p>
<p>Click the following button to see the effect.</p>
<button id="btn">click me</button>
<p id="para"></p>
<script>
document.getElementById("btn").addEventListener("clic
k",fun);
function fun(){
document.getElementById("para").innerHTML="Hello
World"+"<br>"+"Welcome to the google.com";
}
</script>
</body>
</html>
Output:-

Onload Events:-
 41

Output:-
 42

JavaScript getElementById() Method:-

Output:-

getElementByName()Method:-
 43

Output:-

getElementByName()Method:-
 44

Output:-

Standard jQuery Program:-

 45

Output:-
 46

jQuery Selectors:

The Element Selector:-

 47

Output:-
 48

The Id Selector:-
 49

Output:-
 50

The class selector:-

Output:-
 51

jQuery toggle()Method:-

Output:-
 52

jQuery Hide & Show()Method:-

 53

Output:-

jQuery Fading Effects:-

 54

Output:-

jQuery Animation()Method:-
 55

<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/j
query.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>

<button>Start Animation</button>

<p>This is a animation</p>

<div
style="background:#98bf21;height:100px;width:100px;
position:absolute;"></div>

</body>
</html>
Output:-
 56

jQuery Sliding() Method:

Slidedown() Method:-
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/j
query.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
 57

background-color: #e5eecc;
border: solid 1px #c3c3c3;
}

#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>

<div id="flip">Click to slide down panel</div>

<div id="panel">Hello world!</div>

</body>
</html>

Output:-

SlideUp()Method:-

<!DOCTYPE html>
<html>
 58

<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/j
query.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}

#panel {
padding: 50px;
}
</style>
</head>
<body>

<div id="flip">Click to slide up panel</div>

<div id="panel">Hello world!</div>

</body>
</html>
 59

Output:-

Bootstrap Button:-

<html lang="en">
<head>
<meta charset="utf-8">
 60

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

scale=1">
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet"
integrity="sha384-
KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p
5ILy+dN9+nJOZ" crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bo
otstrap.bundle.min.js"
integrity="sha384-
ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7N
TKfAdVQSZe"
crossorigin="anonymous"></script>
</head>
<body>
<h1>Hello, world!</h1>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn
btn-secondary">Secondary</button>
<button type="button" class="btn
btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

</body>
</html>

Output:-
 61

Dropdown Button:-

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width, initial-scale=1">
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe
+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4dd
Q3GYNS7NTKfAdVQSZe"
 62

crossorigin="anonymous"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
type="button" data-bs-toggle="dropdown" aria-
expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another
action</a></li>
<li><a class="dropdown-item" href="#">Something
else here</a></li>
</ul>
</div>
</body>

Output:-
 63

Close Button:-

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width, initial-scale=1">
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe
+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4dd
Q3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
</head>
 64

<body>
<button type="button" class="btn-close" aria-
label="Close"></button>
</body>
</html>

Output:-

Bootstrap Containers:-

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH
301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>

<div class="container p-3 my-3 border">

 65

<h1>My First Bootstrap Page</h1>

<p>This container has a border and some extra padding and
margins.</p>
</div>

<div class="container p-3 my-3 bg-dark text-white">

<h1>My First Bootstrap Page</h1>
<p>This container has a dark background color and a white
text, and some extra padding and margins.</p>
</div>

<div class="container p-3 my-3 bg-primary text-white">

<h1>My First Bootstrap Page</h1>
<p>This container has a blue background color and a white
text, and some extra padding and margins.</p>
</div>
</body>
</html>
Output:-

Bootstrap Table:-

<html lang="en">
<head>
<meta charset="utf-8">
 66

<meta name="viewport" content="width=device-width,

initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH
301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-
ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYN
S7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
<body>
<table class="table">
<head>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
 67

<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</body>

Output:-

Bootstrap Grid:-

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width, initial-scale=1">
 68

<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe
+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col">
Khushi
</div>
<div class="col">
220197
</div>
<div class="col">
Bca1st
</div>
</div>
</div>
</body>

Output:-

Bootstrap Nav-bar:-
 69

<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1
/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/j
query.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/
js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">

<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand"
href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>

<ul class="">
 70

<li><a
href="https://www.matagujricollege.org/Home">Mgc</a
></li>
<li><a href="https://bbsbec.edu.in/">Bsb</a></li>
<li><a
href="https://www.sggswu.edu.in/">Gsb</a></li>
</ul>
</li>
<li><a href="#"></a></li>
<li><a href="#">Ggs</a></li>
</ul>
</div>
</nav>

<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the
"Page 1" button in the navigation bar.</p>
</div>

</body>
</html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1
/css/bootstrap.min.css">
 71

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/j
query.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/
js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">

<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand"
href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>

<ul class="">
<li><a
href="https://www.matagujricollege.org/Home">Mgc</a
></li>
<li><a href="https://bbsbec.edu.in/">Bsb</a></li>
<li><a
href="https://www.sggswu.edu.in/">Gsb</a></li>
</ul>
</li>
<li><a href="#"></a></li>
<li><a href="#">Ggs</a></li>
</ul>
</div>
 72

</nav>

<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the
"Page 1" button in the navigation bar.</p>
</div>

</body>
</html>

Output:-
73