While Loops & Functions
|
Loops allow us to repeat the same commands over and over again.
We do this in everyday life... consider these scenarios.
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 the user hits cancel, break out of the loop and display a message saying "Intruder detected, exit the premises or face the consequences."
2) If it matches, display a message saying "Access granted, Agent 007!" and exit the loop.
3) If it doesn't, display a message saying "Incorrect password. Please try again" and ask for the password again.
Use a while loop to keep prompting the user until they enter the correct password.
1) If the user hits cancel, break out of the loop and display a message saying "Intruder detected, exit the premises or face the consequences."
2) If it matches, display a message saying "Access granted, Agent 007!" and exit the loop.
3) If it doesn't, display a message saying "Incorrect password. Please try again" and ask for the password again.
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:
|
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. 
| ||
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: 
|
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;
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?
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) Stop and say goodbye if the user hits cancel.
3) Create a function called validate() that checks whether the input isNaN or is blank. Return true if it is valid and false if not.
4) If the input is false then it needs to keep asking the user for a number.
5) If the input is true, use 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
1) Ask the user for a price
2) Stop and say goodbye if the user hits cancel.
3) Create a function called validate() that checks whether the input isNaN or is blank. Return true if it is valid and false if not.
4) If the input is false then it needs to keep asking the user for a number.
5) If the input is true, use 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
