04 SEPTEMBER 2020

Programming passwords: a JavaScript activity

This is a relatively simple activity to introduce the ‘Programming for the Web’ unit of Cambridge International AS & A Level IT. This unit requires students to use JavaScript to provide interactivity to web pages. JavaScript is a programming or scripting language that allows users to create complex features on websites, changing them from static to dynamic. It works with HTML and has similar constructs to other programming languages, e.g. sequence, selection and iteration. Even if your students have never used it before, they should quickly pick it up if they have experience of other high-level languages, such as Python. The basic principles are the same, but the syntax is different.

This activity will introduce:

- The creation of a function in the <script> </script> section of the page
- The calling of a function from the action button
- The declaration and use of a variable
- Identifying an element on the page to obtain data from it
- The use of selection - if…else…
- The use of an alert box

You should give your students Password.html and hiddenPage.html in the download below. On the first file, there is a command button to load the second page. There is also an input box where a password needs to be entered. When the correct password is entered and the ‘Submit’ button is pressed then hiddenPage.html will load. If the password is incorrect, an alert box will tell the user that the password is incorrect, and the input box will be cleared.

Students will need to open Password.html in a suitable IDE or text editor and familiarise themselves with the HTML. They should note the id of the input box and action button especially. Students need to add a function that is called when the button is pressed. They can decide to type their own password or simply type ‘password’.

A solution is shown in Password_Solution.html.

Download the source files

Extension

1. In the solution given, hiddenPage.html opens in the same window as Password.html.
Students could change the code to load this page so that it loads in a new window.
Answer: Delete the ‘_self’ switch.

2. Edit the HTML code so that when the password is entered, the letters are not shown, only asterisks.
Answer: Change the ‘type’ of the input box from ‘text’ to ‘password’.

 
New to in Cambridge International AS & A Level IT? Read David’s top tips on transitioning from Cambridge International IGCSE ICT.

---

Meet the author

David is an experienced computing teacher, keen gardener and avid Middlesbrough FC supporter. David’s authored over 20 computing titles, including co-authoring our Cambridge International AS & A Level IT series.