Chapter 3 / Reading Notes

Adding Logic And Control

Conditional Statements 
Used for:
Form Validation : make sure they input information correctly, make sure the field is not empty
Drag and Drop: if the user drags and image somewhere, you can make something happen
Evaluating Input: if you have a popup that asks a question you will want to react accordingly

How to Make a Conditional Statement
There are 3 parts:

1. if
2. ( a true or false question)
3. { if true what should happen}


Comparison Operators
==  this is for Equality
<=
<
>= greater than equal to
>  greater than
!= not equal

example:
This shows that you can have multiple lines inside the curly brackets.

How many moons does Saturn have?

if (answer == 31) {  
alert('Correct. Saturn has 31 moons.'); 
numCorrect = numCorrect + 1; 
} 

If they get the answer correct 1 is added to their score (numCorrect).


Finish-off the statement with else:
if (answer == 31) { 
alert('Correct. Saturn has 31 moons.'); 
numCorrect = numCorrect + 1; 
} else { 
alert("Wrong! That's not how many moons Saturn has, you LOOSER."); 
} 


Logical Operations
&&  AND
|| OR (this is the pipes key which is the key above enter, the same key as \ )
! NEGATION


Multiple Conditions
Example from My Lab Work


var input = prompt('How much money do you have to spend on lunch at Disneyland?');

var cash = Number(input);

if (cash == 2 &&  cash < 3 ) {
    document.write("Vending Machine Soda") }
else if (cash >= 3 && cash < 5 ) {
    document.write("You can get a Churro") }
else if (cash >=5 && cash < 10) {
    document.write("Kids Hamburger from Tomorrowland Terrace") }
else if (cash >=10 && cash < 20) {
    document.write("Chicken Basket from Frontierland")}
else if (cash >=20) {
    document.write("Goofy's Kitchen")}
else if (cash <2) {
    document.write ("Get more money")}
else  {
    document.write ('<p>You entered '  + input + ' You did not enter the dollar amount correctly.</p><p>For example: If you have $5.22, please simply enter 5.22')} 

Negating a Condition

! NOT  

This is like Bizarro Superman, it completely reverses the results of a condition.

if (! valid) {

//print errors and don't submit form

}

! valid can be translated as “if not valid”

if valid is false, then the condition is true

Nesting Conditional Statements 

if (pets == 'youHaveCats') {   
  var cats == prompt('How many cats do you own?'); 
  if (cats <=3 && cats >=1) { 
  alert('You are good person');} 
 else (cats >=4) { 
  alert('You have too many cats, your house must smell');} 
 }   

Conditionals Tutorial 
parseInt( variable,10) 
This command takes a value and tries to convert it to an integer.
It is different from Number(), because it will convert a string with numbers as well. 
20 years >> 20
If it cannot it returns NaN.


var age = '08 years'; 
age = parseInt(age,10);
(you have to add the 10 so that it gives you 8, instead of 0. Octal vs Decimal Numbers.)

var luckyNumber = prompt('What is your lucky number?', '');
luckyNumber = parseInt(luckyNumber, 10);
if (isNaN(luckyNumber)) {
    luckyNumber = prompt('Please, tell me your lucky number.', '');
}


LOOPS

While Loops 
While the condition is true it repeats the chunk of code.

while (condition) {  
// javascript to repeat 
}  

This code writes out the numbers 1-5:
var num = 1; 
while (num <= 5) { 
document.write('Number ' + num + '<br>'); 
num = num + 1; }  


LOOP and ARRAYS

var animals = ['dogs', 'cats', 'chupacabras', 'bees', 'narnicorns'};
var counter = 0;   //sets up a variable counter that will store index number
while (counter < animals.length) {   // whileloop. when the index number is less than the total number of items in the array. (animals.length give the total number of items in the array, in this case 5)
document.write(animals[counter] + ', ');    //writes that animal
counter++;  //adds 1 to the counter
}

For Loops
An easy way to repeat a series of steps


This is a way to re-write the whileLoops example (writing the numbers 1-100), using a forLoop.
for (var num=1;  num<=100; num++) {     //counter variable; test the condition; add 1 to the number
document.write('Number ' + num + '<br>'); 
}

num<= 100; this part is applied at the beginning of the statement and before each time through the loop