Homeworks

Read “Chapter 3 – Adding Logic and Control to Your Programs” from “Javascript: The Missing
Manual”. A PDF of this chapter is located on the class website (listed above).
• Take notes on the reading.
• Do the following tutorials from Chapter 3. For each tutorial, create a separate file , named
as indicated below. (You may create your own file, or you can use the UNFINISHED versions
of the files that you can download from the book website.)
NOTE: Please type out the code yourself. You need the practice! DO NOT simply cut and
paste the code from the download site into your files. You will learn nothing, not understand
the concepts, and will probably fail the class. DO THE WORK, and you’ll learn it!
o Using Conditional Statements – pg 86 (lastname_conditional.html + js files as
needed)
o Do/While – revise earlier tutorial – pg 96 (lastname_do.html + js files as needed))
o Mini‐Tutorial (on Functions) – pg 99 (lastname_minitut.html + js files as needed))
o A Simple Quiz – pg 106 (lastname_quiz.html + js files as needed))

-----------

Finish the LAB

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')}

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

 

Class Lab / Notes

We will be writing code that makes decisions and comparisons.
The tendency of new programmers is to dive immediately into the syntax vs. outlining a process or approach.

Pseudo Code is your friend.

Making Decisions
Conditional Statements : If Statements

if(the condition to be met is true) {
                 then do this }
else {
               do this instead}

To test multiple conditions:   if/else if/else statement
if(the condition to be met is true) {
                 then do this }
else if (condition to be met){
                or do this instead}
else  {
              or if not that then do this}

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

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

if (conditionA && conditionB) {
    //do this stuff
}
This means that both parts have to be true for the whole thing to be true.

 If you are using && put the condition that is most likely false first, this stream lines the code because if the first part of the && is not true then it doesn't bother reading the rest.


---------------------



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')}

In Class Notes // Review

Attaching an External Script
The advantage is that you have 1 file that effects multiple pages, this makes editing easier.

1. The extension has to be .js

2. you add src:
<script type="text/javascript" src="myExternal.js"></script>

3. make sure there is nothing between the <script> tags


The order that you attach scripts is important.

---------------------------------------------------
Trouble Shooting
Unfortunately the browsers interpret the scripts differently. The different browsers have tools to help you figure out errors.

Firefox:
Tools >> Error Console
Usually the information presented by the console is useless, but it gives you an idea of the area that is probably causing problems.

Firebug:
More usefull

Webdeveloper: (just for Firefox)
A toolbar extension that is really helpful, in particular with jQuery.

Safari:
Develop >>> Show Error Console


--------------------------REVIEW of the  READING ASSIGNMENT-------------------------

Operators

Operators are Symbols that allow us to manipulate/modify data.

= assignment operator

 (set to the value of)

 Math Operators

+ - * /

Order of operations:
PEMDAS aka Please Excuse My Dear Aunt Sally
Parenthesis
Exponents
Multiplication
Division
Addition
Subtraction

M and D have the same weight
A and S have the same weight
so these are performed left to right

(PEMDAS will be on the test)  
--------------

Combining Strings
Concatenation
+ the operator use to concatenate
(this is not the same as the mathematical operator + )

var lastName = "Fartyfatkins";
var firstName = "Hugo";


var theName = firstName + ' ' + lastName;

document.write(theName);

The Point this is to show that you should not have the ' ' (space) in the variable declaration.
var lastName = "Fartyfatkins ";    BAD 


Fixing - Automatic Type Conversion
Number(variable) +Number(variable2)

Changing the Values in Variables 

score = 0;

score = score + 3;

The point is that everything that happens on the right, gets dumped into the left.

-------------------------------------