JavaScript Switch Statement Switch • JavaScript Switch Statement • If you have a lot of conditions, you can use a switch statement instead.

Transcript JavaScript Switch Statement Switch • JavaScript Switch Statement • If you have a lot of conditions, you can use a switch statement instead.

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:
}
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.
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:
}
</script>
•
document.write("I'm looking forward to this weekend!");
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.
Loops
Doing the same thing over and over
and over and over and over and
over…
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
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">
var i;
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
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?
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">
var i=0;
while (i<=10)
{
document.write("The number is " + i);
document.write("<br />");
i=i+1;
}
</script>
</body>
</html>
•
Explanation:
–
–
–
•
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
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.
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
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!
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">
var i=0;
do
{
Result
The number is 0
.
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
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:
•
•
Cat
Dog
Gerbil
Bunny
Giraffe
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,
–
•
var mypet = animals[2];
document.write(mypet);
The value written out would be Gerbil.
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;
var mycars = 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
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 />’);

JavaScript Switch Statement Switch • JavaScript Switch Statement • If you have a lot of conditions, you can use a switch statement instead.

Transcript JavaScript Switch Statement Switch • JavaScript Switch Statement • If you have a lot of conditions, you can use a switch statement instead.

Directory