Webnew Chetan

Practical file of Web Technologies ll GU-2023-1410
Practical No.1
Objective:-Write a program to demonstrate events in Javascripts?
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.
1.1 Click Event-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>
1
Output:-
2
1.2 Mouseover Event-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>
3
4
1.3 Focus Event- 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>
Output:-
5
6
1.4 Keydown Event- 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>
Output:-
7
8
1.5 Load Event- 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>
Output:-
9
10
Program No. 2
Objective:-Write a program to print a table of any number.
Description:- In this problem, we are given a number and we just need to print the
multiplication table of the given number. Our strategy will be simple and straightforward. First,
we’ll just declare a for loop so that we can multiply the given number 10 times to print the
multiplication table. Then we need the multiplication operator(asterisk) to actually multiply the
given number.
Code:-
<html>
<body>
<h2> Write 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>
11
Output:-
12
Program No.3
Objective:-Generate a random number using JavaScript method.
Description:- JavaScript has many built-in methods for working with numbers and performing
mathematical calculations. One of those methods is the Math.random() method. Math. random();
The method does not take any parameters. By default, the method returns a value that is a
random decimal (or floating point) number between 0 and 1 .
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>
13
Output:-
14
Program No.4
Objective:-Write a program to display today’s date and time using date() function.
Description:- You can display the current date and time on an HTML page by accessing an
HTML element and setting its textContent or innerHTML property to the date and time string. In
this code, we first create an h1 element that says “Current date and time:” followed by a span
element with an id of datetime .
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>
Output:-
15
16
Practical No.5
Objective:-Write a program to demonstrate form validation using JavaScript.
Description:- It is important to validate the form submitted by the user because it can have
inappropriate values. So, validation is must to authenticate user.
JavaScript provides facility to validate the form on the client-side so data processing will be
faster than server-side validation. Most of the web developers prefer JavaScript form validation.
Through JavaScript, we can validate name, password, email, date, mobile numbers and more
fields.
Code:-
<HTML>
<HEAD>
<TITLE>
<H1> FORM VALIDATION USING JAVASCRIPT</H1>
</TITLE>
</HEAD>
<body>
<script>
Function val()
{
Var a=document.getElementById(“a1”).value;
Var b=document.getElementById(“a2”).value;
Var c=document.getElementById(“a3”).value;
Var d=document.getElementById(“a4”).value;
If(a==””//b==””//c==””//d==””)
{
Alert(“ all fields are not filled”);
Return false;
}
17
Else if(b.length<10//b.length>10)
{
Alert(“phone no should be of 10 digits, please enter 10 digit number”);
Return false;
}
Else if (is NaN (b))
{
Alert (“please ener valid digit”);
Return false;
}
Else if(c.length<6)
{
Alert please enter at least 6 digits password “);
Return false;
}
Else if(c!=d)
{
Alert(“plz enter same password”);
Return false;
}
Else
{
True;
}
}
</script>
<form>
Name:<input type:”text” id=”a1”><br><br>
18
Contact:<input type=”text” id =”a2”><br><br>

Password:<input type:”password” id=”a3”<br><br>
Confirm password:<input type:”password” id=”a4”><br><br>
<INPUT TYPE = ‘button’ VALUE=’submit ‘ onsubmit = “val()”>
</form>
</body>
</html>
Output:-
19

Webnew Chetan

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Webnew Chetan

Uploaded by

Copyright:

Available Formats

Practical file of Web Technologies ll GU-2023-1410

Contact:<input type=”text” id =”a2”><br><br>

You might also like