The default behaviour of javascript is to interpret the code from the top to bottom. This isn't all that useful unless you can deterministically write everything
Conditional statements allow you to make decisions based on a yes/no question. (eg. if the answer to the question is yes, do one thing. If not, do something else).
The basic structure of of an if statement looks like this:
if( condition ) { // any statements inside the brackets, // executed if condition/test is true }
if
indicates that it is a conditional statement
var score = 10;
if(score > 5){
alert('You won!');
}
alert('Game Over');
> (greater than) < (less than) >= (greater than or equal to) <= (less than or equal to) == (equal to) != (not equal to) === (strict equal to. Compares value and type) !== (strict not equal to)
'2' == 2 // true '2' === 2 // false
var enteredColor = prompt("what is your favorite color?"); if(enteredColor == 'red'){ document.body.style.backgroundColor = 'red'; }
var answer = prompt("How many moons does Saturn have?"); if(answer == 31){ alert("Correct!"); } if(answer != 31) { alert("Wrong"); }
if( condition ) {
// statements 1
// executed if condition is true
} else {
// statements 2
// executed if condition is false
}
// user answer the question 'How many moons does Saturn have?'. Store in variable answer
if(answer == 31){
alert('Correct');
} else {
alert('Wrong!');
}
if( condition1 ){ // executed if condition 1 is true } else if( condition2 ){ // executed if condition1 false, condition2 true } else { // executed if condition1, condition2 are both false }
else if
statement as such:
var x = 2; if( x < 0 ){ alert("x < 0"); // x < 0 is true } else if( x < 1 ){ alert("x < 1"); // x < 0 is false, x < 1 is true } else if( x < 2 ){ alert("x < 2"); // x < 0 is false, x < 1 is false, x < 2 is true } else if( x < 3 ){ alert("x < 3"); // x < 0 is false, x < 1 is false, x < 2 is false, x < 3 is true } else { alert("inside final else"); // x < 0 is false, x < 1 is false, x < 2 is false, x < 3 is false }
A | B | A || B |
true | true | true |
true | false | true |
false | true | true |
false | false | false |
A | B | A && B |
true | true | true |
true | false | false |
false | true | false |
false | false | false |
A | !A |
true | false |
false | true |
var a = 9; var b = 2; var c = 3; var valid = true; var key = prompt("hit a key"); if(a < 10 && a > 1){ alert("the value in a is between 1 and 10"); } if( a >0 && b > 0 && c > 0){ alert("a, b, c are greater than 0"); } if( key == 'n' || key == 'N') { // user hit n or N. } if ( !valid ) { // if not valid (what does the variable valid have to be in order // for this block to be executed }
condition
is true. Every time it finishes with the code inside the bracket, it tests the condition
inside the parenthesis.
while (condition){ // statements; }
var x = 0;
while( x < 10 ){
document.write(x + "<br>");
x = x + 1;
}
document.write(0 + "<br>"); document.write(1 + "<br>"); document.write(2 + "<br>"); document.write(3 + "<br>"); document.write(4 + "<br>"); document.write(5 + "<br>"); document.write(6 + "<br>"); document.write(7 + "<br>"); document.write(8 + "<br>"); document.write(9 + "<br>");
var num = 1; while (num <= 4 ){ document.write(num + "<br>"); // this is an infinite loop }
var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; var counter = 0; while (counter < days.length){ document.write(days[counter] + ', '); counter++; }
for(init; test; update){ statement; }
Starting with the initial condition i=0, as long as i < 100, execute statements then increment i by 1. (In plain English, iterate over the statement 100 times)for(var i=0; i<100; i++){ document.write(i + "<br>"); }
<script>
var pgraphs = document.getElementsByTagName("p"); // get all elements with tag <p>
pgraphs[0].style.color = "red";
pgraphs[1].style.color = "red";
pgraphs[2].style.color = "red";
pgraphs[3].style.color = "red";
pgraphs[4].style.color = "red";
</script>
<script>
var pgraphs = document.getElementsByTagName("p"); // get all elements with tag <p>
for(var i = 0; i < pgraphs.length; i++){
pgraphs[i].style.color = "red";
}
</script>