Scribd
Upload
75 views6 pages

Tutorial J5

The document provides instructions on using JavaScript functions and conditional statements like if/else and switch to validate a user's login credentials. It has the learner create a login validation program using prompts for username and password, then check for a match using if/else statements and improve it to use a switch statement to handle different validation cases. The final code sample shows how to use a switch statement to validate login and display customized error messages.

Uploaded by

hellloo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
75 views6 pages

Tutorial J5

The document provides instructions on using JavaScript functions and conditional statements like if/else and switch to validate a user's login credentials. It has the learner create a login validation program using prompts for username and password, then check for a match using if/else statements and improve it to use a switch statement to handle different validation cases. The final code sample shows how to use a switch statement to validate login and display customized error messages.

Uploaded by

hellloo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Tutorial J5

Aim: To learn about basic JavaScript and using functions and conditional statements

Name: ____________Tan Wan Sean___________________ Date:


_________________

1. Draw a flow chart for a JavaScript program to check a person’s username and password:

Start

Insert Username
and password

Use javascript program


to check whether the
username and password No
are correct

End
Open a text editor of your choice, such as Notepad (on Windows) or TextEdit (on a Mac). Create
an HTML page leaving space between <body> and </body> tags. Between the <body> and
</body> tags add the <script> and </script> tags.

2. Here is the code to check the user’s username. Try it out:


3. Now amend the code above to also check for password. Can your program check for both
username and password? Try using the && operator.

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<script>
var userID
var password
var ReturnValue

userID = prompt('Enter user Id',' ');


password = prompt('Please enter your password:','');

if (userID == 'ScoobyDoo' && password =='blackpink')


{
alert('Valid Logon');
}
else
{
alert('Invalid Logon');
}

</script>

</body>
</html>
4. Amend the code above to use a function to validate the username and password.

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<script>
var userID
var password
var ReturnValue

userID = prompt('Enter user Id',' ');


password = prompt('Please enter your password:','');
if (userID == 'ScoobyDoo'&& password =='blackpink')

function validate()
{
alert('Valid Logon');
}
else
{
alert('Invalid Logon');
}

</script>

</body>
</html>
5. Using switch statements. Try out the code below to understand the use of switch:

6. Now let’s say we want to improve the earlier program by giving the following messages:
Case 1: Valid logon (username and password correct)
Case 2: Invalid logon - Username correct, password wrong
Case 3: Invalid logon - Username wrong, password correct
Case 4: Invalid logon - Both username and password wrong

Using the following switch statements improve your program to display the messages.

switch (valid)
{
case 1:
alert('Valid Logon')
break
case 2:
alert('Valid User ID. Invalid Password.')
break
case 3:
alert('Invalid user ID. Valid Password.')
break
case 4:
alert('Invalid User ID and Password')
break

7. Complete the code above and test it out.


<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<script>

var userID
var password
var ReturnValue

userID = prompt('Enter user Id',' ')


password = prompt('Enter password:','')

switch (true)
{
case(userID == 'ScoobyDoo' && password == 'blackpink'): alert("Valid Logon")
break;
case(userID == 'ScoobyDoo' && password!== 'blackpink'): alert("Valid User ID.Invalid Password")
break;
case(userID !== 'ScoobyDoo' && password == 'blackpink'): alert("Invalid Use ID")
break;
case(userID !== 'ScoobyDoo' && password !== 'blackpink'): alert("Invalid User ID and password")
break;
}

</script>
</body>
</html>
References:
1. https://www.w3schools.com/js/default.asp
2. https://www.w3schools.com/js/js_functions.asp
3. https://www.w3schools.com/js/js_switch.asp
4. JavaScript Demystified, Chapter 5 by Jim Keogh

You might also like