In this article I would like to share with you a program that I wrote using Javascript as my programming language I called this program Login Security that will protect your website from instruders and unauthorized visitors. The code is very simple because I want to help my fellow programmers how to understand and learn how to write a program in Javascript.
It contains CSS for form layout and design and if statement in Javascript. I hope you will find my work useful and beneficial in your programming assignments and activities.
If you have some questions about programming, about my work please send me an email at jakerpomperada@gmail.com and jakerpomperada@yahoo.com. People here in the Philippines can contact me at my mobile number 09173084360.
Thank you very much and Happy Programming.
Sample Program Output
Program Listing
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="login.css" />
<title>Login Security in JavaScript</title>
</head>
<body>
<script>
function check_password(form) {
if (form.user_name.value=="123") {
if (form.password.value=="123") {
alert("Welcome to the system");
}
else {
alert("Wrong Password. Please Try Again !!!");
document.getElementById("username").focus();
}
} else {
alert("Wrong User Name. Please Try Again ");
document.getElementById("username").focus();
}
}
function clear()
{
document.getElementById("username").value=""
document.getElementById("password").value=""
document.getElementById("username").focus();
}
</script><br></br><br></br>
<div class="login">
<h3 align="center"> LOGIN SECURITY </h3>
<form name="login">
<input type="text" name="user_name" placeholder="User Name" id="username" autofocus> <br><br>
<input type="password" name="password" placeholder="Password" id="password">
<br><br>
<input type="submit" value="Log In" title="Click here to login." onClick="check_password(this.form)">
<input type="button" value="Clear" title="Click here to clear." onClick="clear(this.form)">
</form>
</div>
</body>
</html>
login.css
/* login.css */
.login {
height:250px;
width:190px;
margin:auto;
border:2px green solid;
padding:20px;
font-family:arial;
background-color:lightgreen
}
input {
background:white;
border:3px blue solid;
color:black;
padding:5px;
}
