While Loops & Functions

 Loops allow us to repeat the same commands over and over again.

We do this in everyday life... consider these scenarios.
  • Until bread is golden stay in oven.
  • Until you have crossed the finish line keep running.
  • While there are people in line wait.
  • While you are still dirty, shower.

While loops continue the command until the condition is met.

While loops are laid out exactly like if statements except they cannot use else or else if.

E.g.
let answer = 0;
while (answer != 7) {
 answer = prompt("what is the answer?");
}
alert("you got the right answer");
Task: Make the answer 7

1.) Create button that links to a function.
2.) Copy and paste the code from the left into the function
3.) Test a bunch of different responses to see what will happen.
4.) What happens if the user hits cancel?

Extra for Experts: Put an if statement inside  the while loop so that if someone enters seven it quits the loop.

Warning: Do not use toLowerCase() or toUpperCase() just yet. Or if you do test out what happens when you hit cancel

Cancelling out of the loop

Suppose we want to grant the user the ability to hit cancel and break the loop. How would we do this?

Lets find out for ourselves.

Task: What happens when you hit cancel?

1.) Create a new test button that is linked to a function called "hitCancel()"
2.) Inside this function prompt the user with "what happens when you hit cancel" store this in a variable called "what"
3.) Alert the user to the variable "what"

4.) Take note of what appears if you hit cancel.

Note: Null is not a string so cannot be converted to upper case or lower case. This will break your program.
Task: Breaking the loop

We can break the loop in do different ways if someone hits cancel.
Try both

A.) Add "&& answer != null" to the while loop condition.
B.) Add an if statement so that if the user hit cancel then it runs the command "break;



​Brief: Hack the system

Task: Create a program that prompts the user to enter a password.
Use a while loop to keep prompting the user until they enter the correct password.

1) If it matches, display a message saying "Access granted, Agent 007!" and exit the loop.
2) If it doesn't, display a message saying "Incorrect password. 007 is coming to find you." and asks for the password again.
3) Once the correct password is entered, display a message saying "Welcome, Agent 007.
4) If the user hits cancel, break the loop and display a message saying "Intruder detected, exit the premises or face the consequences."

Please enter a valid name

For this lesson we are going to learn about the length function.

Task 1: Learn about the length function.
1.) Setup another button that connects to a function stated howMany()
2.) prompt the user for a word and store it in a variable called "word"
3.) alert the user to word.length
4.) Try a bunch of different combinations... What happens if you hit cancel?

Task 2: Alert the user if their name is too long or too short.
1.) Using an if, else if and else create a program that will do the following:
  • If the name is below 3 letters tell them the name is invalid
  • If the name is above 16 letters tell them the name is invalid
  • If the name is between this, congratulate them.
Task 3: Turn the name checker into a loop

Turn the previous code into a loop that keeps asking until either cancel is hit or the name is the right length.

Hint: Use this code to help you out.

let isValid = false
while(isValid == false) {
 
}

Breaking your webpage & Bug fixing

Task: Break your webpage!!

1.) Add a button to a page and enter this code when clicked:

let answer = 0;
while (answer != 7) {
 answer = 8;
}

See what happens when you click the button, can you click other buttons?


Task: Fix the Infinite loops and other problems

1.) Download the zip
2.) Extract the zip
3.) Go through each of the html files and fix the loops as per the instructions.


activities_infinite_loops.zip
File Size: 2 kb
File Type: zip
Download File

Using Functions

We have already being writing and using functions!

Every time you write: "function clickMe() {}" you have written a function.

But lets get to some additional features here.

Task 1: Make a function that adds 5 to any number and another that removes 10.

1.) Create a button that calls a function called calculate()
2.) Get the calculate function to prompt the user for a number.
3.) Create another function called add5 that looks like this:
Picture
 
4.) Add this to your calculate function to run it:
5.) Repeat steps 1-4 for another function that removes 10.
Task 2: Name Validator

1.) Create a function that will check to see if the name is too long, too short or just right.
​
2.) Create a while loop uses the function and keeps asking the user unless the name is just right.

Brief: Greeting function

Task: Write a function called greet that takes in a name, and greets them in a funny way.

Brief: Temperature conversion

Task: Write a function called convertToCelsius that takes in a fahrenheit temperature, and alerts the user with the equivalent temperature in Celsius.
The code to do the conversion is: (temperature - 32) * 0.556;

Formatting Code

What is Better? What does each program do?
function funApp () {
  let a = 4;
  let b = prompt("how many sheep do you own?");

  if (isNaN(b)) {
    alert("Enter a Number!");
  } else if(b <= 0){
    alert("You are too poor to own sheep");
  } else if ( b > 1000000) {
    alert("You have too many sheep");
  } else {
    let c = a * b;
    alert(`you have ${c} sheep legs`);
  }
}
function answerCheck() {var a=2;var b=prompt("How Many Kids do you have?");if(isNaN(b)){alert("Enter a Number!");}else if(b<=0){alert("Well Hurry up then!");}else if(b>40){alert("You have too many kids");
}else{var c=a*b;alert(`you have access ${c} spare kidneys`);}}
Task: Format the code
1.) Read through the code and try to figure out what each lot of code does.
a.) Which is easier to read?
b.) Why?
2.) Create an HTML file with 2 buttons that call each code. Do they both function?
3.) Read through the standards found on this website
4.) Format the unformatted code as per the standards.
5.) Once you have completed it, ask yourself why it is important to format code correctly, check your formatting with your neighbors, is it different? if so who is wrong and who is right?

Checkpoint project - GST Calculator + Validator

Task: Make a GST Calculator with these specifications:
1) Ask the user for a price
2) Send input off to a input validator function
3) If the price is invalid (not a number or blank or null) it needs to send back "false"
4) If the input is false then it needs to keep asking, unless the user hits cancel (use a while loop here).
5) If the input is true, then it should send the price to another function for calculating GST. That function will return the price including GST.
6) Show the price including the GST to the user.
7) Make sure that the formatting is consistent with the listed conventions

Note: If you can complete this with 1 while loop, 2 functions and no errors no matter what the user enters then you are ready for excellence