Scribd
Upload
10 views

Chetan Javascript

The document contains 5 programs demonstrating different JavaScript events: 1. Program 1 demonstrates click, mouseover, focus, keydown, and load events. The click event triggers an alert pop-up. Mouseover displays a message on hover. Focus changes the input background. Keydown changes the input background on key press. Load displays an alert on page load. 2. Program 2 creates a multiplication table for a given number using a for loop. 3. Program 3 generates a random number between 0-1 using Math.random(). 4. Program 4 displays the current date and time using the Date() function. 5. Program 5 creates an admission form with input validation using HTML and basic

Uploaded by

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

Chetan Javascript

The document contains 5 programs demonstrating different JavaScript events: 1. Program 1 demonstrates click, mouseover, focus, keydown, and load events. The click event triggers an alert pop-up. Mouseover displays a message on hover. Focus changes the input background. Keydown changes the input background on key press. Load displays an alert on page load. 2. Program 2 creates a multiplication table for a given number using a for loop. 3. Program 3 generates a random number between 0-1 using Math.random(). 4. Program 4 displays the current date and time using the Date() function. 5. Program 5 creates an admission form with input validation using HTML and basic

Uploaded by

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

Practical file of Web Technologies ll GU-2023-1410

Practical No.1
Objective:-Write a program to demonstrate events in JavaScript?
Description:- An event is an action that occurs as per the user’s instruction as input and gives
the output in response. The change in the state of an object is known as an Event. In html,
there are various events which represents that some activity is performed by the user or by the
browser. When javascript code is included in HTML, js react over these events and allow the
execution. This process of reacting over the events is called Event Handling. Thus, js handles
the HTML events via Event Handlers.

Program:- 1.1
Objective:- Click Event
Description:- The onclick event generally occurs when the user clicks on an element. It
allows the programmer to execute a JavaScript’s function when an element gets clicked. This
event can be used for validating a form, warning messages and many more.
Code:-
<html>
<head>
<title>on click event</title>
<script>
function msg()
{
alert("succesfully submitted");
}
</script>
</head>
<body>
<center><h3> Web Technology2</h3></center>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Practical file of Web Technologies ll GU-2023-1410
Practical file of Web Technologies ll GU-2023-1410

Program:- 1.2
Objective:- Mouseover Event
Description:- The onmouseover event in JavaScript gets activated when the mouse cursor
moves over an HTML element.
Code:-
<html>
<head>
<title>Javascript Mouseover event</title>
<script>
function mouseover()
{
alert("HI! This is Chetan from bsc-it2 ");
}
</script>
</head>
<body>
<right-side><h3> Java Script</h3></right-side>
<form>
<button onmouseover="mouseover()">keep mouse over me</button>
</form>
</body>
</html>
Practical file of Web Technologies ll GU-2023-1410

Program:-1.3
Objective:-Focus Event
Description:- The onfocus event occurs when an element gets focus.
The onfocus event is often used on input fields.
Code:-
<html>
<head>
<title>Javascript Focus event</title>
<script>
function focusevent()
{document.getElementById("name").style.background="";
}
</script>
</head>
<body>
<h3>Enter your name</h3>
<form>
<input type="text" id="name" onfocus="focusevent()"/>
</form>
</body>
</html>
Practical file of Web Technologies ll GU-2023-1410
Practical file of Web Technologies ll GU-2023-1410

Program:-1.4
Objective:- Keydown Event
Description:- The onkeydown attribute fires when the user is pressing a key (on the
keyboard).
Code:-
<html>
<head>
<title>Javascript keydown event</title>
<script>
function keydownevent()
{
document.getElementById("name").style.background="pink";
}
</script>
</head>
<body>
<h3>Enter something here</h3>
<form>
<input type="text" id="name" onfocus="event()"/>
</form>
</body>
</html>
Practical file of Web Technologies ll GU-2023-1410
Practical file of Web Technologies ll GU-2023-1410

Program 1.5
Objective:- Load Event
Description:- The onload event occurs when an object has been loaded.
Code:-
<html>
<head>
<h1> Javascript Load Event</h1>
</head>
<body onload=”alert(‘Page Successfully Loaded’);”>
<script>
Document.write (“The page is loaded successfully”);
</script>
</body>
</html>
Practical file of Web Technologies ll GU-2023-1410
Practical file of Web Technologies ll GU-2023-1410

Program No. 2
Objective:-write a program to print a table of any number.
Code:-
<html>
<body>
<h2> W rite a program to create a Table using JavaScript </h2>
<script>
const number=prompt("Enter a Number:");
for(let i=1;i<=10;i++)
{
document.write("<br>");
document.write("<br>");
document.write(number + "x" + i + "=" + number * i);
}
</script>
</body>
</html>
Practical file of Web Technologies ll GU-2023-1410
Practical file of Web Technologies ll GU-2023-1410

Program No.3
Objective:-Generate a random number using JavaScript method.
Code:-
<html>
<head>
<title>
Javascript
</title>
</head>
<body>
<h2> math.random</h2>
<input type=”button” value=” To Display any Random number click on this”
onclick=”random()”>
<script>
Function random()
{
Const r=Math.random();
Document.write(“The random number between 0 to 1 is” + “ “ + r); ok
}
</script>
</body>
</html>
Practical file of Web Technologies ll GU-2023-1410
Practical file of Web Technologies ll GU-2023-1410

Program No.4
Objective:-write a program to display today’s date and time using date() function.
Code:-
<html>
<head>
<script type=”text/javascript” src=”scripts.js”></script>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<button onclick=”getElementById(‘test’).innerHTML = Date()”>This will show date when
clicked.</button>
<p id=test> </p>
</body>
</html>
Practical file of Web Technologies ll GU-2023-1410

Program No.5
Objective:-
Code:-
<html>
<head>
<meta charset=”UTF-8”>
<title>Admission Form</title>

<style>
/* Basic styling for better presentation */
Body {
Font-family: Arial, sans-serif;
Margin: 0;
Padding: 20px;
Background-color: #f7f7f7;
}
H1 {
Text-align: center;
Color: #333;
}
Form {
Max-width: 500px;
Margin: 20px auto;
Padding: 20px;
Background-color: #fff;
Border-radius: 5px;
Box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
Input[type=”text”],
Input[type=”email”],
Practical file of Web Technologies ll GU-2023-1410

Textarea,

Select {
Width: 100%;
Padding: 10px;
Margin-bottom: 10px;
Border-radius: 3px;
Border: 1px solid #ccc;
}
Input[type=”submit”] {
Width: 100%;
Padding: 10px;
Border: none;
Border-radius: 3px;
Background-color: #007bff;
Color: #fff;
Cursor: pointer;
}
Input[type=”submit”]:hover {
Background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Admission Form</h1>
<form action=”#” method=”post”>
<input type=”text” name=”fullname” placeholder=”Full Name” required>
<input type=”email” name=”email” placeholder=”Email” required>
<input type=”text” name=”phone” placeholder=”Phone Number” required>
<textarea name=”address” placeholder=”Address” required></textarea>
Practical file of Web Technologies ll GU-2023-1410

<select name=”course” required>

<option value=”” disabled selected>Select Course</option>

<option value=”engineering”>Engineering</option>
<option value=”medicine”>Medicine</option>
<option value=”business”>Business</option>
<!—Add more course options
</select>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
Practical file of Web Technologies ll GU-2023-1410

You might also like