Submodule 6.3: Applying the "if" statements
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | Study / Web Design and Web Development |
| Book: | Submodule 6.3: Applying the "if" statements |
| Printed by: | Guest user |
| Date: | Saturday, 23 November 2024, 3:07 PM |
Description
- Confirm interaction
- Nested conditionals
- Temperature converter
The confirm interaction
confirm is a JavaScript method which displays a message box along with an OK and Cancel button.
When the user clicks Ok JavaScript returns true whereas if it clicks Cancel it returns false.
Thus, this ready-made method gives us the capability to activate to different actions based on user's choice.
In the below code the logic is: We have a variable which contains our confirm method. According to user's input, if this variable becomes true, do something, else do something else.
Notice that here we use the syntax if (likeBananas). This is equivalent with if (likeBananas==true)
<!DOCTYPE html>
<html lang="en">
<head>
<title>The confirm interaction </title>
</head>
<body>
<h3> The confirm interaction</h3>
<script>
var likeBananas;
/*We're using confirm() to prompt the user for a boolean value*/
likeBananas = confirm("Do you like bananas? ([OK] for yes, [Cancel] for no)");
/*On next line we check the value and ... */
if (likeBananas) {
/*on next line write some output if the value was true*/
document.write("You like Bananas!")
} else {
/*on next line write some output if the value was false*/
document.write("You don't like babanas!")
}
/*The code outside the curly braces of the if else statement will always run.*/
console.log ("Whether or not you had bananas, have a good day!");
</script>
</body>
</html>Exercise
- Open your editor, create a new file and save it as
exersice06.3.01.htmlin the folder "yourNameWEB2JS". - Copy the above code and paste it in the new file.
- Save the file. Experiment by changing the values of the variables.
Nested conditionals
Nested conditionals are actually conditionals inside a conditional.
if (expression1){
/*this code runs if expression1 evaluates to true*/
if (expression2){
/*this code only runs if both expression1 and expression2 evaluate to true*/
}
} else {
/*this code runs if neither are true*/
}
Example
In the below example, we have used nested conditionals to define whether we need to ask more input from the user.
The logic of the below code is: if the user likes bananas then display a message, else ask him his favorite fruit. If the user doesn't like bananas and prefers apples then display a message, else if he doesn't like bananas and prefer other fruit than apples, display another message.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nested contitionals </title>
</head>
<body>
<h3> Nested contitionals</h3>
<script>
var likeBananas;
var favoritFruit;
likeBananas = confirm("Do you like bananas? ([OK] for yes, [Cancel] for no)");
if (likeBananas) {
document.write("You like Bananas!")
} else {
favoritFruit = prompt("What is your favorite fruit")
if (favoritFruit == "apples") {
document.write("You like apples! Me too!")
}else {
document.write("You like " + favoritFruit + "! I prefer apples!")
}
}
console.log ("All fruits are good!");
</script>
</body>
</html>Exercise
- Open your editor, create a new file and save it as
exersice06.3.02.htmlin the folder "yourNameWEB2JS". - Copy the above code and paste it in the new file.
- Save the file. Experiment by changing the values of the variables.
The Temperature converter problem
Exercise
- Open your editor, create a new file and save it as
exersice06.3.03.htmlin the folder "yourNameWEB2JS". - Copy the code below and paste it in the new file.
- Replace the “placeholders” in the script area, with the appropriate ids. The browser's output should be as shown in the following image:
