Lohit Marla
Main menu options
Reviews and other content aren't verified by Google
<html>
<head>
<title> Where is the cursor? </title>
<script>
function findIt(evt)
{
document.getElementById("xcoor1").value=evt.clientX;
document.getElementById("ycoor1").value=evt.clientY;
document.getElementById("xcoor2").value=evt.screenX;
document.getElementById("ycoor2").value=evt.screenY;
}
</script>
</head>
<body onclick = "findIt(event)">
<form action = "">
<p>
Within the client area: <br />
x:
<input type = "text" id = "xcoor1" size = "4" />
y:
<input type = "text" id = "ycoor1" size = "4" />
<br /><br />
Relative to the origin of the screen coordinate system:
<br />
x:
<input type = "text" id = "xcoor2" size = "4" />
y:
<input type = "text" id = "ycoor2" size = "4" />
</p>
</form>
<p>
<img src = "img1.jpg" alt = "not found" />
</p>
</body>
</html>
SLOW MOVEMENTS OF ELEMENTS-
<html>
<head>
<title> Moving text </title>
<script>
var dom, x, y, finalx = 100, finaly = 100;
function initText() {
dom = document.getElementById('theText').style;
var x = dom.left;
var y = dom.top;
x = x.match(/\d+/);
y = y.match(/\d+/);
moveText(x, y);
}
function moveText(x, y) {
if (x != finalx)
if (x > finalx) x--;
else if (x < finalx) x++;
if (y != finaly)
if (y > finaly) y--;
else if (y < finaly) y++;
if ((x != finalx) || (y != finaly)) {
dom.left = x + "px";
dom.top = y + "px";
setTimeout("moveText("+ x +","+ y +")", 5);
}
}
</script>
</head>
<body onload = "initText()">
<p>
<span id = 'theText' style =
"position: absolute; left: 300px; top: 300px;
font: bold 20pt 'Times Roman';
color: blue;"> Fly to Sky!
</span>
</p>
</body>
</html>
DRAGGING AND DROPPING ELEMENTS-
<html>
<head>
<title> Drag and drop </title>
<script>
var Element;
function grabber(event) {
Element = event.currentTarget;
document.addEventListener("mousemove",mover);
document.addEventListener("mouseup",dropper);
}
function mover(event) {
Element.style.left = (event.clientX) + "px";
Element.style.top = (event.clientY) + "px";
}
function dropper(event) {
document.removeEventListener("mousemove",mover);
}
</script>
</head>
<body>
<span style = "position: absolute; top: 200px; left: 0px;
background-color: red;"
onmousedown = "grabber(event);"> C </span>
<span style = "position: absolute; top: 200px; left: 75px;
background-color: lightgrey;"
onmousedown = "grabber(event);"> C++ </span>
<span style = "position: absolute; top: 200px; left: 150px;
background-color: lightgrey;"
onmousedown = "grabber(event);"> JAVA</span>
<span style = "position: absolute; top: 200px; left: 225px;
background-color: lightgrey;"
onmousedown = "grabber(event);"> DBMS </span>
<span style = "position: absolute; top: 200px; left: 300px;
background-color: lightgrey;"
onmousedown = "grabber(event);"> HTML </span>
</body>
</html>
K.G.F: Chapter 1
Review·6y
More options
TASK - 4
Aim: To create a registration form validation.
Home page source code:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<style>
h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}
form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color: #52463C;
}
form ul li input, select, span {
float: left;
margin-bottom: 10px;
color: #52463C;
}
form textarea {
float: left;
width: 350px;
height: 150px;
}
[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}
body {
background-image: url("pic1.jpg");
background-size:85%;
height:50%;
width:50%;
}
.button {
border-radius: 2px;
background-color: #988C82;
border: none;
color: black;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 200px;
cursor: pointer;
}
p {
margin-left: 70px;
font-weight: bold;
}
</style>
<title>JavaScript Form Validation using a sample registration form</title>
<meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" />
<meta name="description" content="This document is an example of JavaScript Form Validation using a sample registration form. " />
<script>
function formValidation()
{
var uid = document.registration.userid;
var passid = document.registration.passid;
var uname = document.registration.username;
var uadd = document.registration.address;
var ucountry = document.registration.country;
var uzip = document.registration.zip;
var uemail = document.registration.email;
var umsex = document.registration.msex;
var ufsex = document.registration.fsex; if(userid_validation(uid,5,12)){
if(passid_validation(passid,7,12)){
if(allLetter(uname)){
if(alphanumeric(uadd)){
if(countryselect(ucountry)){
if(allnumeric(uzip)){
if(ValidateEmail(uemail)){
if(validsex(umsex,ufsex)){
}
}
}
}
}
}
}
}
return false;
}
function userid_validation(uid,mx,my)
{
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}
function passid_validation(passid,mx,my)
{
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}
function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
function alphanumeric(uadd)
{
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}
function countryselect(ucountry)
{
if(ucountry.value == "Default")
{
alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
return true;
}
}
function allnumeric(uzip)
{
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
return true;
}
else
{
alert('ZIP code must have numeric characters only');
uzip.focus();
return false;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have enter an invalid email address!");
uemail.focus();
return false;
}
}
function validsex(umsex,ufsex)
{
x=0;
if(umsex.checked)
{
x++;
} if(ufsex.checked)
{
x++;
}
if(x==0)
{
alert('Select Male/Female');
umsex.focus();
return false;
}
else
{
alert('Form Successfully Submitted');
window.location.reload()
return true;}
}
</script>
</head>
<body onload="document.registration.userid.focus();">
<h1><font color="#52463C
" size="15">Registration Form </font></h1>
<form name='registration' align="center" onSubmit="return formValidation();">
<ul>
<li><label for="userid
F2: Fun and Frustration
Review·6y
More options