1 / 14

JavaScript Switch Statement

JavaScript Switch Statement. Switch. JavaScript Switch Statement If you have a lot of conditions, you can use a switch statement instead of an if… elseif … statement.. Syntax switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default:

mirit
Download Presentation

JavaScript Switch Statement

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript Switch Statement

  2. Switch • JavaScript Switch Statement • If you have a lot of conditions, you can use a switch statement instead of an if…elseif… statement.. • Syntax switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 } • n (a variable) is looked at (evaluated) once. • The value of n is then compared with the values for each case. • If they match, the code associated with that case is executed. • Use break so once a match is found, we skip the other cases in the switch statement.

  3. Switch Example <script type="text/javascript"> //You will receive a different greeting based on what day it is. //Note that Sunday=0, Monday=1, Tuesday=2, etc. var d=new Date(); theDay=d.getDay(); switch (theDay) { case 5: document.write("Finally Friday"); break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I'm looking forward to this weekend!"); } </script> • Note we put { and } around the ENTIRE switch statement • but not around the individual cases. • We compare the value inside theDay with the value after each case. • First see if the value in theDay is equal to 5. • If it is, we execute everything under the case statement until we hit either the break statement (which will kick execution to the first line after }, or until we hit the next case. • If theDay does not equal 5, we compare it to the next case, which is 6. • We do this for each case and we execute the one(s) in which theDay and the case match.

  4. Loops Doing the same thing over and over and over and over and over and over…

  5. Loops • Very often when you write code, you want the same block of code to run over and over again. Instead of adding the same lines of code over and over again we can use loops. • Loops execute the same block of code a specified number of times or while a specified condition is true. • For loops we have a condition. While the condition is true, we execute the code in the loop. We specify what code belongs in the loop using { and } to surround that code. • In JavaScript there are two different kind of loops: • for - loops a specified number of times • while - loops while a specified condition is true

  6. For loops • Used when you know how many times the script should run. • Syntax for (var=startvalue; var<=endvalue; var=var+increment) { code to be executed } • Example: <html> <body> <script type="text/javascript"> vari; for (i=0; i<=10; i++) { document.write("The number is " + i); document.write("<br />"); } </script> </body> </html> • Explanation: • loop starts with i=0. • The loop continues as long as i is less than or equal to 10. • i will increase by 1 each time the loop runs. • Result (Output to the window) • The number is 0 • The number is 1 • The number is 2 • The number is 3 • The number is 4 • The number is 5 • The number is 6 • The number is 7 • The number is 8 • The number is 9 • The number is 10  

  7. For Example • Another Example: Looping through header sizes: <html> <body>  <script type="text/javascript"> for (i = 1; i <= 6; i++) { document.write("<h" + i + ">This is header " + i); document.write("</h" + i+"> "); } </script> </body> </html> • What is the output?

  8. While Loop • The while loop is used when you want the loop to execute and continue executing while the specified condition is true. • Syntax: while (var<=endvalue) { code to be executed } • Note: The <= could be any comparing statement, like ==, >=, >, <, !=, etc. • Example <html> <body> <script type="text/javascript"> vari=0;  while (i<=10) { document.write("The number is " + i); document.write("<br />"); i=i+1; }  </script> </body> </html> • Explanation: • loop starts with i=0. • The loop continues to run as long as i is less than, or equal to 10. • i will increase by 1 each time the loop runs. • It does pretty much the same thing the for loop (above) did. There is often more than one way to accomplish the same task. • Result • The number is 0 • The number is 1 • The number is 2 • The number is 3 • The number is 4 • The number is 5 • The number is 6 • The number is 7 • The number is 8 • The number is 9 • The number is 10

  9. Example2 <html> <body> <script type="text/javascript"> var continue; var answer; var total = 0; continue = confirm(“Do you want to enter a number?”, “no“);   while (continue == “true”) { answer = prompt(“What is the number you wish to enter?”,”0“); document.write("<br />The number is " + answer); total = total + answer; continue = confirm(“<br />Do you want to enter another number?”);  }  alert(“The sum of the numbers you entered is “ + total + “<br />”); </script> </body> </html> • Explanation: • The example above defines a loop that starts when the user clicks on “Okay” in the confirm box in answer to the question, “Do you want to enter a number?” • It will continue as long as, every time the user is asked “Do you want to enter another number?” the user answers “yes”. • Inside the loop, the user is prompted to input a number. • That number is written to the screen • That number is also added to the sum of the numbers entered so far. • The loop stops when the user hits cancel, thus setting continue to “false”. • At this point, the loop is exited and the alert is executed

  10. Assignment 3: Adding Loop • Your store sells dog collars and dog treat. From the previous assignment, if the user wants to buy dog treats, you need to ask how many treats the user wants to buy. The cost of treats is a dollar per treat. If the user orders more than 30 treats, they get a five dollar discount. If the user wants to buy a collar, you need to ask them what size they want. A small collar is $10, a medium is $12, and a large is $14. After you’ve asked for the info and calculated the results, you must confirm the user to what they’ve ordered and the final cost. • Now we’ll add a loop. You will ask the user, “Do you want to buy something else?” and you will make a loop that allows them to buy more dog treats or dog collars until the user no longer wishes to purchase anything else. • Bonus – see if you can keep a total value that is the total price of all purchases so far and, at the end, prints this value out. Send this to me before Thursday’s class. Send to me before start of next class!

  11. Do…While • A slight variant of the while loop. • This loop always executes a block of code ONCE • Then it will repeat the loop as long as the specified condition is true. Do { code to be executed } while (var<=endvalue); • Example <html> <body> <script type="text/javascript"> vari=0; do { document.write("The number is " + i); document.write("<br />"); i++; } while (i<0); </script> </body> </html> • This loop always executes at least once, even if the condition is false, because the code is executed before the condition is tested. • In other words, we do everything between the { and }, and then we check to see if the condition is true. • That means that we must execute everything between { and } at least once, even if the condition is false • Result • The number is 0 • .

  12. For…In: Arrays • Used to loop (iterate) through the elements of an array or through the properties of an object. • Arrays: • think of an array as a row of boxes (or variables) that hold values. • Instead of giving each box (or variable) a different name, we just give the entire row a name • then we specify which box’s value we want by specifying the number of the box in the row. • Example: Animals: • We named the entire row “animals” • if we wanted to get the value in the 4th spot in the row called animals, we specify animals[3]. • animals[3] is Bunny • Weirdness. We start counting at 0 • if we want the first variable, we’d specify animals[0]. • If we want the 5th variable, we’d specify animals[4] (animals[4] is Giraffe) • The index is always one less than if we counted out which variable we want. • So if we said something like, • varmypet = animals[2]; document.write(mypet); • The value written out would be Gerbil.

  13. For…In loop • The code in the body of the for ... in loop is executed once for each element in an array or property of an object. • Syntax for (variable in object) { code to be executed } • Example • Using for...in to loop through an array: <html> <body> <script type="text/javascript"> var x; varmycars = new Array(); /* creates an array called mycars */ mycars[0] = "Saab"; /*First variable in the array holds “Saab” */ mycars[1] = "Volvo"; /* Second variable in the array holds “Volvo” */ mycars[2] = "BMW"; /* Third variable in the array holds “BMW” */  for (x in mycars) { document.write(mycars[x] + "<br />"); } </script> </body> </html>  • This will write out all the elements in the array mycars • Result • Saab • Volvo • BMW

  14. Example 2 • This one prints out all the properties associated with window. • It’s a great way to see all the different properties available to you for each object. • You can use it with other objects as well, such as document, form, etc. Try it!! var property; for (property in window) { document.write(property); ocument.write(‘<br />’); }

More Related