JavaScript in Plain Language (2015)

PART III: STRENGTHENING THE WARRIOR'S ARSENAL

3.6 Lab work 13

13a: Switch - using Boolean matches

This script will employ a switch with 4 possible outcomes. The user will try to guess a number, and the program will display a feedback message of either, too low, too high, right! or That’s not a number:

1- Create a switch inside of a function named guessNum.

2- This function takes one input parameter, num .

3- The switch should be hard wired to true.
Example: switch(true) *

4- The cases should have the following conditions:
num <= 3 displays "too low"
num >=5 displays "too high"
num === 4 displays "right, the number was 4"
for default use "That's not a number"

5- Call the function by passing a numeric argument like for example:
guessNum(2);
guessNum(7);
guessNum(4);
guessNum("a");

· For a quick peek or further explanation and my own final version of this project please refer to the
forum board | bit.ly/1qqwkWc
or just the raw file | bit.ly/1r50ODq

· * Think of expressions.
num <= 3 will be converted to true or false. The same goes for all the other cases and therefore the switch to match should be a Boolean true.

13b: Switch - using literal matches

On this next project we are going to use the following:

· A function named myFavColor,

· A prompt() to get an input from the user,
which will be converted to lower case so it matches
one of the cases. (JavaScript is case sensitive).

· Some confirm() outputs so that we don’t always use console.log,

· And some meaningful statements about color.

The statements are as follows (you can always make your own
or copy from this
raw file | bit.ly/1ypn1A2):

· Green is the color of balance and growth.

· Blue is the color of trust and peace.

· Indigo is the color of intuition.

· Purple is the color of the imagination.

· Orange is the color of social communication and optimism.

· Sorry, that color is not in the system yet!

1- Please remember: the purpose of creating a function is to recall the program without having to retype it again. It works great for testing purposes and in real life as well. So the whole switch should be wrapped in a function. Please feel free to choose the function style you prefer, a function declaration, or a function expression which is the one assigned to a variable.
I will use the first method:
function myFavColor() {}

2- Inside of the function, the prompt() will be assigned to variable color.
I will convert the input from the user into all lowercased letters so that it matches my cases which will be in all in small letters.
var color = prompt("Enter your favorite color").toLowerCase();

3- The switch expression should be the value of the variable color:
switch (color) { }

4- Each case needs to be in small letters because the input will be converted to lowercase:
case "green":

5- The output from each case should be a confirm() followed by a break:
confirm("Green is the color of balance and growth.");
break;

6- When no color matches, the default execution takes over and it could be something like the following (no break is necessary):
default:
confirm("Sorry, that color is not in the system yet!");

7- Finally, don’t forget the two closing braces: one for the switch and another for the function (the ones shown in red on the top of this page , steps 1 and 3).

· For a quick peek or further explanation and my own final version of this project please refer to the
forum board | bit.ly/ZcaDUC
or just the raw file | bit.ly/1DwVBsd

To test your script just call the function and follow the prompts:

myFavColor();

13c: A repeating switch routine

Sometimes we want the script to run repeatedly such as for example in a game, until we purposely decide to exit.

In order to make our previous script repeatable all we have to do is to call the function myFavColor() just before we close the function, and the function will trigger a new instance of the game.

When I first introduced the confirm() mechanism I had mentioned that confirm() can return a Boolean true if we press OK, or a Boolean false if we press Cancel. We can catch this returned data to trigger the new function call, and one way to do it is to add the following code just before closing the outer function (the variable name replay is arbitrary):

var replay = confirm("click ok to play again, or cancel to exit")
if (replay === true) {
myFavColor();
}
} <-- this curly brace is already there, it is the very last brace on the bottom.

So in a sense we grab the Boolean true from the confirm mechanism and reuse it to call myFavColor();

· For a quick peek or further explanation and my own final version of this project please refer to the
forum board | bit.ly/1ogVffh
or just the raw file | bit.ly/1vdaYQT

13d: Using a while loop to repeat the script

We have not covered while loops. The only loops we have covered were the for loop for arrays and the for in loop for objects. There are many different styles of loops and they are all based on the for loop we first learned.

A while loop is one that runs indefinitely until something triggers the loop to exit.

A popular example of a while loop is the mechanism that scans the computer keyboard. The wile loop keeps reading the input from the keyboard until it gets a signal from one of the keys which in turn triggers another mechanism.

The design for a while loop is as follows:

while(this Boolean expression is true){
// do this stuff;
// something to change the condition to false in order to end the loop;
}

Until that something triggers a Boolean false, the while loop will always run.

We can use this while loop on our previous color description game to run the switch forever until the user clicks on the confirm()’s cancel button. In this way we don’t have to recall the function again, all we have to do is to keep asking the user to enter his/her favorite color, until the user press the cancel button.

So where do we implement the change from Boolean true, to Boolean false?

We implement it on each case because only one case will apply. When the user confirms the output message for the case, the user also has a chance to press cancel when he/she wants to exit the game. Until the user presses cancel the game will go on forever.

Please look at the next image to see what I mean:

Fig 17

On line 3 we encapsulate the whole switch mechanism inside of a while loop.

While replay is true (which is its initial state), the switch will run and the loop will restart the switch again and again until we press Cancel. Pressing ENTER is equivalent to pressing OK and that means to run another cycle. Eventually we get tired of playing the game and press the Cancel option on the confirm box which will trigger JavaScript to exit the loop.

Notice how the value of variable replay, which is originally a Boolean true, is renewed each time an output message is prompted. This gives the user the opportunity to opt out of the game.

It looks more professional than the previous script we had done and if you are interested on creating games this can become handy.

· After you code your own version of it you can compare it with mine on the
forum board | bit.ly/1DwVNYo.
or just the raw file | bit.ly/1sWgeWf