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.

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

My Homework - Final Project

I'm not really sure of the scope of the assignment so I am submitting two final project ideas.

Project 1
MikannoCon

A group of friends of mine are seeking to create a Orange County Anime Convention and have approached me to create a simple website that would outline the scope of the convention and supply information for potential sponsors and affiliates. At present the website does not exist, so this is not a redo but  a from scratch website. I have been given a Word document with several pages of content that is to be divided into main and sub categories.

I have broken the information into these categories:
Home (Welcome, News)
Registration (Attendees, Volunteers)
Advertising Sales (Advertisements, Sponsorship Program)
Programming (Events: Cosplay, AMV Contest, Fan Video Contest. Guests) 
Travel (Hotels, Restaurants)
Contact

The purpose of this site would be to present information to potential attendees and affiliates. Parts of the site such as Registration will have information but will not be fully interactive.

Project 2
Shaffer Sealing
http://www.shaffersealing.com/index.html

This site would be a redo. I would use the current content and reorganize it in a way that is better, specifically easier to read and superior in design. In addition I might include some more images that I would supplied to me by the client.

About the website:
Shaffer Sealing is an asphalt sealing company located in Truckee, California. The website is for potential and current customers to understand more about the company, what they do and how.  The site will be divided into 4 sections:
Welcome (basic pitch)
How (what happens when you hire Shaffer Sealin)
Questions/FAQ
Contact

In addition a portion of the website explains another aspect of the business which is snow removal.  I will also be incorporating this information into the Shaffer Sealing website.

Chapter 2 Notes

Commands 
You can recognize commands because they have parenthesis

Web Specific
alert()
document.write()


Universal to Javascript
isNaN() - checks to see if a particular value is a number or not


Types of Data
 Numbers
document.write(5 + 15);
whole numbers, decimals, negative


String
can be in double or single quotes
"This isn’t fair" (us double quotes to enclose a string with a single quote inside it)
'He said, "Hello."' is a valid string (how to include quotes in a string)
"He said, "Hello.\ "" (use the \ - an escape character - to tell it to include that quote in the string)
'He said, "This isn\'t fair."'   (you have to use the escape character to make that phrase work)
Boolean
you can use boolean value to check if a user did something or not, such as did they supply an email address - true or false


Variables 
Stores information for later use
 

Naming Convention for Variables

Starts with a letter, $, _
Contain alphanumeric characters and $ and _ (No spaces)
Case-sensitive
Don't use special keywords like alert, break, catch, for, new, this, void.

You  can create multiple variables at once like this:
var playerScore, gameRound, playerName; 
And you can declare and store multiple pieces of information inside like this:
 var playerScore=52, gameRound=1, playerName='Bob';


Basic Math

+ - / *

var price= 5, itemsOrdered=2, totalCost=price*itemsOrdered;


make sure to use parenthesis when having multiple mathematical operations, for example:
(4 + 5) * 10   (this returns 90)
4 + 5 * 10   (this returns 54)
what ever in in the parenthesis happens first.




Combining Strings  
Combining strings is called concatenation

var firstName = 'Bob'; 
var lastName = 'McPoopface'; 
var fullName = firstName + lastName;  
This gives you BobMcPoopface

var firstName = 'Bob'; 
var lastName = 'McPoopface'; 
var fullName = firstName + ' ' + lastName; 
This gives you Bob McPoopface (with a space)

Combing Numbers and Strings 
Automatic Type Conversion
Whenever you use the + operator with a string value and a number it concatenates it to a string


var numOfPoops = 900; 
var message='Your dog ate ' + 'numOfPoops' + 'poops today.'; 
returns: Your dog ate 900 poops today.


Sometimes converting is bad.
For example:
var numOfCatPoops = 25; 
var numOfDogPoops = 5; 
var numOfPoops = numOfCatPoops + numOfDogPoops;   
var message='Your dog ate ' + 'numOfPoops' + 'poops today.';  
returns: Your dog ate 255 poops today. (instead of 30)




To prevent this:
(Two ways to convert)
1. Add + to the beginning of the string with the number:
var numTotal = +numStuff   


2. Number(variable)
var numTotal = Number(numStuff) + numMoreStuff  

Changing the Values in Variables

var score = 0;

score = 100;

var score = 0;

score = score + 100;

Add 100 to what ever value is currently store in "score".
You are preforming a mathematical operation on the value of a variable and then storing that value back into the variable.

Shortcuts:
score += 10;
score = score + 10;

score -= 10;
score = score - 10;

+=   -=   *=    /=  

You can also use += for strings:

var name = 'Bilbo';

var message = 'Hello'; 

message = message + ' ' + name;   >>becomes>>  message += ' ' + name;

Adds or subtracts 1
score++
score--
 ++   --



Arrays
You can store more than one value in a single place, so you don't have to keep creating tons of variables.


var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];  


var listOfStuff = [];  
an empty array that can be supplied with information later ( [] two brackets)

Inside of an Array you can store:
Numbers
Strings
Boolean
Arrays
Other Objects
(you can store any combination of from this list)


Getting Items Out of the Array
same as ActionScript, the items have position numbers/index numbers

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July'];
alert(months[2]);  
this would return Mar

Change the Value of an Item
months[0] = 'January';  
now Jan is changed to January


Get the Last Position of the Array
months[months.length-1];  
gets the total number of positions and subtracts 1
so, for months this would be 6 (since I have only listed 7 months)

When working with loops you might want:
var i = 0; 
alert(months[i]);

Adding Items to the End of an Array

var properties = ['red', '14px', 'Arial'];  

Three ways:
properties[3] = 'bold'; 
properties[properties.length] = 'bold';
properties.push('bold');  



Adding Items to the Beginning of an Array
var properties = ['red', '14px', 'Arial'];   

properties.unshift('bold');

you can push and unshift multiple values like this:
properties.push('bold', 'italic', 'underlined');
properties.unshift('bold', 'italic', 'underlined');  



push() and  unshift() are methods
they return a value, the total items in the array
for example:
var p = [0,1,2,3]; 
var totalItems = p.push(4,5);
totalItems is 6
 

Creating a Queue / FIFO

playlist.push('Dumb Song');

nowPlaying = playlist.shift();

This cycles through, you add a song to the end of the list.

Then you play the first song on the list, by removing it and storing it inside nowPlaying. 

Deleting Items from an Array
 Similar to Action Script
pop(); 
shift(); 

var cats = [Mr.Whiskers, Ugly Cat, Snowball]; 
var catDeath = cats.pop();    

the value catDeath is Snowball
and cats now has [Mr.Whiskers, Ugly Cat]

Adding and Deleting with splice()
this adds and deletes item from the interior positions of the array
var cats = [Mr.Whiskers, Ugly Cat, Snowball, Prof.Muffintop];


cats.splice (1,2);  
The 1 is the index number
The 2 is the number of positions to delete
var cats = [Mr.Whiskers, Ugly Cat, Snowball];
Only Mr.Whiskers and Prof.Muffintop remains! 

var catsAlive = cats.splice (1,0, 'Snowball Jr., Son of Ugly Cat', "Lil' Kitty Winkins");  
var cats = [Mr.Whiskers, Snowball Jr., Son of Ugly Cat, Lil' Kitty Winkins, Prof. Muffintop];  
0 indicate you are deleting 0 items
3 new cats are born, now catsAlive has 5 cats! 
The Circle of Life, it moves us all.


Replacing Items with splice();
add and delete at the same time
var cats = [Mr.Whiskers, Ugly Cat, Snowball, Prof.Muffintop];

var catsAlive = cats.splice (1,2, 'Snowball Jr., Son of Ugly Cat', "Lil' Kitty Winkins");
var cats = [Mr.Whiskers, Snowball Jr., Son of Ugly Cat, Lil' Kitty Winkins, Prof. Muffintop];  
 
---------------------------------------------------------------------------------------------------------------------------

TUTORIALS

document.write(' <p>'); 
you can write html into the page


prompt('Tell me your name or I'll doing a flying kick to your face');  
this produces a dialogue box similar to alert, but you retrieve an answer

Homeworkios

1. Get the book
2. The topic for final project website (an informational site)
the content needs to lend itself to being chopped up into subtopics
needs to have pictures because it will have image galleries
3. turn in a half page description of your site: that addresses the kinds of content, how you might organize the information, and the image gallery
4. read the chapter and take notes on the reading (you can use these notes on tests)
5. Do the following tutorials from Chapter 2. For each tutorial, create a separate file with a
filename as indicated below.
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 Variables to Create Messages – pg 53 (name your file:
yourlastname_messages.html)
o Asking for Information – pg 54 (name your file: yourlastname_information.html)
o Writing to a Web Page Using Arrays – pg 67 (name your file:
yourlastname_arrays.html)

Lab/ Class Work

 Cybercorns!!!!  
Directions for Starting a Car.

Walk to the driver's side of the car.
Get the key into our hand.
Locate the keyhole on the driver-side door.
Placing the end that is not ridged between your thumb and index finger, insert the ridged part into the key hole on the driver-side door.
Turn the key clock-wise until you hear clicking/unlocking sound.
Remove the key.
Lift the door handle and open the driver-side door.
Swing the door all the open so that you can enter the car with your body.
Sit in the seat, to do this you place your butt into the seat.


What we learn from this exercise:
Before we start writing code we should start with psuedo-code and write in plain English the steps we plan to take.

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

Getting Started:
Create a new "site" in Dreamweaver (specify the folder where all the files will be).
Into the head:
<script type="text/javascript">
alert("hello world");
</script>

F12 (runs the page) 
alert - is just giving you one of those alert boxes

It makes a difference where you put the code. Generally we put the code into the head of the page.

Script in the head =
If you add some text to the body and then view the page, the alert will pop up before you are able to see whatever you typed into the body.


Script in the body =
So if you put the alert into the body after the paragraph text in the body, you will see the body text before the alert.


Commenting:   
There are multiple ways in javascript to comment-out code.

//single line
/* multi-line comment */

In the body
      document.write("hello world, but this time it's better.");

--------------------------------------------------------------
Grammar (aka syntax) of JS

Statements = usually represents a single step in a program
statements end with a semicolon;

"Commands" (commands is not an official title, just something we made up for this class) = functions or methods, they use parenthesis  ( blah do something blah )

Variable = container for data, a placeholder
 for example if we have the variable called name : we all have a name but since that name is different that variable called name has a different value.

= this is not an equal sign, it is the assignment operator meaning: set to the value of
equals is a completely different thing

2 Steps to create a variable:
    - declare the variable    var name;
    -  assign it a value         name =  "J-cubed";   

               -or-   var name = "J3";

EXAMPLE:
<body>
    <h1>I am thirsty.</h1>
  
    <script type="text/javascript">

    //alert("hello world");
  
    var message;  //declared a variable
    message =  "hello world, but this time it's better."  //assign it a value
  
  
      document.write(message);   //write the message out to the page
  
</script>
</body>


Naming variables:
In JS it can only begin with a letter, $, or and _
var name, var $name, var _name
They can contain letters, numbers, $, _, camelCase  BUT NO SPACES
The variables are case sensitive

Variable Data Types
every variable you make has a specific data type, it tells you what kinda stuff is in that container
Also it informs you what you can do with it.
For example if you have a number you know you can do math on it, as opposed to a string.

We will be dealing 3 common data types:
Number- 5, 5.3, -5.3
String - any series of alphanumeric characters that are enclosed in quotes (you can use single or double quotes)
Boolean - true or false

var myVar ="5" this is a string
var myVar=5 this is a number
var hasCrap=true

---------------
Javascript is like html in that it doesn't care about white space.
But you can't put a carriage return in the middle of a string

Class Notes

Javacript

Client-Side Language
(as opposed to Server-side)

All processed by the client, they reside on the browser.
Javascript only needs a browser to run, in other words the information doesn't have to go into the cloud and do what it needs to on a server.


CSS
p { color: red; font-size: 1.5em;}

p = selector
color = declaration
1.5, red = values
font-size = property
{ blah blah } = declaration block

jquery is all based on CSS

Every programming language has a syntax ( the rules/grammar that applies to that particular language).
A computer program is a series of steps performed in a designated order.