Creating your password page with JavaScript and HTML: Now you know how to use the onclick attribute to make your HTML elements interactive, we can start building our password web page. Let’s start with the basic HTML structure of our page:
<!DOCTYPE html>
<html>
<head>
<title>Password</title>
<style>
body {
background-color: lightblue;
padding: 30px;
}
</style>
</head>
<body>
<p style="font-size: 30pt;">Hello World.</p>
<p>Please enter the password to view this website.</p>
<p>Password:</p>
<a href="secretinfo.html">
Click here to submit password and view website
</a>
</body>
</html>
Here we’ve created a simple web page using HTML and CSS. We’ve included a hyperlink that links to our secretinfo.html web page. But there isn’t anywhere on our page where the user can enter their password.
We next we will need to create a box so that the user can type it in… Keep going… :-)
The input tag: < input/ >
Websites often need you to type in information. It’s how you log in to an online account, book cinema tickets or use a search engine. So asking your user to type in information is a common part of coding.
It’s called asking for user input. There are lots of tags you can use to ask for user input, but the one you will use the most is the < input/ > tag.
It’s great for creating boxes on your page so your user can enter data. It’s a self-closing tag and you include two attributes inside it: the id attribute and the type attribute.
As you already know, you set the value of these attributes using the equals sign (=) and double quotes ” “.
Let’s take a look at how we would use the < input/ > tag on our page:
<body> <p style="font-size: 30pt;">Hello World!</p> <p>Please enter the password to view this website.</p> <p>Password:<input id="passwordBox" type="text"/></p> <a href="secretinfo.html"> Click here to submit password and view website </a> </body>
Using the < input/ > tag with these two attributes creates a box that we can type our password into. You use the id attribute to give your < input/ > tag a unique name. You have to choose the name of your id attribute.
Make sure it’s easy to remember. Here we’ve set the value of the id attribute to passwordBox. Doing this allows us to use the value inside the < input/ > tag in our JavaScript. We use the id attribute to tell our browser exactly which piece of data we want it to use. Without the id attribute, your browser will not be able to find the password and check if the password is correct.
The type attribute
There are lots of different kinds of < input/ > tags, so you need to use the type attribute to tell your browser exactly what sort of < input/ > tag you need.
You have to choose from defined values for your type attribute. Here are some of the common type attributes you can use inside your < input/ > tag:
| Attribute value | What does it do? |
| text | Creates a box for entering text |
| password | Creates a box for entering a password |
| button | Creates a clickable button (with JavaScript) |
| checkbox | Creates a box the user can tick or untick |
You may have noticed above that when we set the type attribute to text, the text for the password was displayed in the box.
That isn’t very secure! What happens if a cyber criminal was nearby when user types in the password?
If we want to keep our password secret we can change the value of our type attribute to password. This will hide what the user types by changing the text to dots. Let’s take a look:
<body> <p style="font-size: 30pt;">Hello World!</p> <p>Please enter the password to view this website.</p> <p>Password:<input id="passwordBox" type="password"/></p> <a href="secretinfo.html"> Click here to submit password and view website </a> </body>
Using JavaScript to check the password
Now we’ve built the basic HTML structure of our page, we need to write some JavaScript that will check if the password the user enters is correct.
If they enter the password GabbaGabbaHey they will be taken to the secretinfo.html page.
If they enter an incorrect password an alert will pop up telling them they have got the password wrong.
The first thing we need to do is create a function that will contain all the code we need to check our password.
Let’s create the function inside our < head >. You can put JavaScript anywhere in an HTML web page, and having it in our < head > in this example makes our code easier to understand.
Don’t forget to put your JavaScript inside the < script > tag, like this:
<script>
function checkPassword() {
}
</script>
We then need to create variables that store the value of our password, so that our function can check if the user has got it correct.
Let’s look at the two variables we need:
<script>
function checkPassword() {
var password = document.getElementById("passwordBox"); //variable 1
var passwordEntered = password.value; //variable 2
}
</script>
In our first variable, we are using a new built-in function called getElementById. You will learn all about this function and use it more soon.
It is a handy function that finds the HTML element with the specified id attribute. The id attribute we have selected here is for our < input/ > tag.
So the value of our variable will be whatever data the user has typed into the password box.
We then create a second variable to store the data that the user has typed into the password box.
We create this value by typing the name of our first variable followed by a dot (.) then the value keyword.
We do this so we can write an if statement using the value of this variable. We now need to create an if statement.
If the condition of our second variable is true and our password text is equal to (==) GabbaGabbaHey, the hyperlink will work.
If the condition of our variable is false and the password text is not equal to GabbaGabbaHey, the link won’t work and an alert will pop up.
We don’t need to use an else statement because the return statement will halt the function.
Our complete < script > block for our password with the new if statement looks like this:
<script>
function checkPassword() {
var password = document.getElementById("passwordBox");
var passwordText = password.value;
if(passwordText == "GabbaGabbaHey") {
return true;
}
alert("Access denied! Incorrect password!");
return false;
}
</script>
Finally we have to make our JavaScript work with our HTML elements. We need to look at the code in the < body > of our page now.
We want to call the checkPassword function when someone clicks on the hyperlink in our page.
So we need to add an onclick attribute to our opening < a > tag, like this:
<body> <p style="font-size: 30pt;">Hello World!</p> <p>Please enter the password to view this website.</p> <p>Password:<input id="passwordBox" type="password"/></p> <a href="secretinfo.html" onclick="return checkPassword();"> Click here to submit password and view website </a> </body>
DO IT YOURSELF TASK CREATE A PASSWORD
It’s time to have a go at using all the JavaScript Code Skills you’ve learnt, to create a new web page that asks the user to enter a password.
This web page will protect the web page you built in previous sections. If the user gets the password right, they will be able to access the secretinfo.html web page.
If they get it wrong, an alert will pop up telling them that access is denied.
Assignment tasks:
- When you build your new web page make sure you code these things using HTML
and JavaScript: - A function that will check your password when it is called.
- Variables that will store the value of the data the user enters into the
password box. - An if statement that will check if the password the user enters is correct.
- An alert that will pop up if an incorrect password is entered.
- A text box the user can enter data into.
- A hyperlink that connects this web page to the secretinfo.html web page.
- Save your file in your Coding folder and call it password.html.
Your finished code should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Password</title>
<style>
body {
background-color: lightblue;
padding: 30px;
}
</style>
<script>
function checkPassword() {
var password = document.getElementById("passwordBox");
var passwordText = password.value;
if(passwordText === "GabbaGabbaHey") {
return true;
}
alert("Access denied! Incorrect password!");
return false;
}
</script>
</head>
<body>
<p style="font-size: 30pt;">Hello World.</p>
<p>Please enter the password to view this website.</p>
<p>Password:<input id="passwordBox" type="password"/>
<a href="secretpage.html" onclick="return checkPassword();">Click here to submit password and view website </a>
</body>
</html>
Below is an online emulation of our password app. It contains 4 files, with the following code:
1) index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="index.js"></script>
<p style="font-size: 30pt;">Hello World.</p>
<p>Please enter the password to view this website.</p>
<p>Password:<input id="passwordBox" type="password"/></p>
<a href="secretpage.html" onclick="return checkPassword();">Click here to submit password and view website</a>
</body>
</html>
2) index.js
function checkPassword() {
var password = document.getElementById("passwordBox");
var passwordText = password.value;
if(passwordText === "GabbaGabbaHey") {
return true;
}
alert("Access denied! Incorrect password!");
return false;
}
3) index.css
body {
background-color: lightblue;
padding: 30px;
}
4) secretpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="index.js"></script>
<p style="font-size: 30pt;">Hello World.</p>
<p>Welcome to the Top-Secret Page.</p>
<a href="index.html">Log Out.</a>
</body>
</html>
Brilliant coding! This password page will keep the page safe. Don’t forget you can use more CSS properties to change the look of the page.
JavaScript is a powerful and dynamic programming language, used by all modern web browsers.
Knowing JavaScript allows you to create interactive and responsive web pages that allow a user to enter information. It’s also great for building web-based apps.