Concepts we'll cover

• The computer isn't that smart
  • Storing info - Variables (string, number, boolean)
• Let's make some magic happen
  • Functions
• Objects
• Go with the flow control...
  • Conditional Statements and Loops 
• Arrays
• Loops
• Note: follow slides  DOWN  here

The computer's not so smart

• Don't get me wrong, it knows a lot
• But we need to tell it a lot and store that info for it
• Data or info gets stored in Variables and Objects
• Consider this scenario

• Who can tell me how to make a peanut butter and jelly sandwich?

• This is procedural, critical, analytical thinking. 

Variables

• How do we get the computer the info it needs?
• Store it - info or data, like in a cup
• Can be string, number, or boolean
• In JavaScript, use the keyword var

var winners = 2;

2

"Duke"

true

var name = 2;

var isIn = true;

Another variable analogy

• Might be an envelope
• You know, if you don't like cups

Variables Exercise

• Let's try this in jsfiddle.net
• In the jsfiddle JavaScript pane type:

var favShow = prompt("My favorite show as a kid was: ");

• When you hit run, a box will pop up asking your favorite show
• What you type in is the value for favShow
• Let's call that value in an alert next. After your first line of code type:

alert("My favorite show as a kid was " + favShow + ".");

• When you run again, prompt will again come up, but it will be followed by an alert of the full sentence

Functions

• Functions are sets of code that can be called again and again.
• Think of a function as a pre-packaged set of actions.
• For example, any time we want to make toast, we use a toaster.

With a toaster function, every time we make toast:

We don’t need to create infrared radiation by using nichrome wires wrapped back and forth across a mica sheets (yes those are in traditional toasters).

We don’t then need to encase those wires in steel and add an electrical cord and plunging switch.

We just use a toaster. A function is similar. You simply call the function and it springs into action.

Another function analogy

• Might be a grocery list

Functions exercise

• Let's create a function that calculates a new age

function addOne() {
      var age = 9;
      var newage = age + 1;
      alert (newage);
 }
addOne();

Functions exercise

• What happened line by line

function addOne() 

• We created and named our function

function addOne() {

}

• Created an area for a block of code to run

Functions exercise

• What happened line by line

function addOne ( ) {

      var age = 9;
      var newage = age + 1;
      alert (newage);

} 

addOne( );

• Added variables and an alert as statements
• Then called the function so it would run

Objects

• Objects are JavaScript's superhero containers
  • They have both methods and properties.
  • For example, they may have a color (property) and the ability to walk or run (method).
  • We'll use the document object today and its method getElementById

Object syntax

var jshero = {
   color : green,
   run :  function ( ) {code to make
             character run;
            }
};

jshero.run;

• Note the different syntax elements

  • No parameters

  • colons defining attributes and values

  • commas separate lines

  • there's a function embedded or nested

  • when calling object property or method use the dot syntax

We're going to work with the document object of a web page

Let's add some html to your function fiddle

Now, let's add a line of code in place of the alert

Let's look at result

Add some css for kicks

Conditional statements

I think the best analogy for this is conditional love. Something like:

"If you really loved me you'd buy me donuts.  Otherwise, you don't."

Conditional statements

• An "if" statement is used to test if a condition is true or false

• If the results are true then a command is executed.

• Here is a basic "if then" statement that compares two numbers to see if the first is greater than the second:

   

if (5 > 2) {
alert ("It is bigger!");
}

Note comparison operators  such as >= are considered "logic" and are also a big foundational concept, but they're just not really that fun to talk about :)

Conditional statements

• Let's look at the syntax with an else, aka otherwise added
• add one to our function
• and test it out

if (condition) {

    statement1;

    statement2;

}
else {  

    statement1;

}
       

Let's card someone

Conditional Exercise

• We'll need to adapt our code. I'll walk you through
• We are adding this statement inside the full curly braces. So it will end with two (lines 8 and 9)

Arrays

• Arrays are lists of any kind of data, including other arrays

• Each item in the array has an index - a number - which can be used to retrieve an element from the array. The indices start at 0.

Array syntax

• A new element here with the [ brackets ]

• A comma separated list

• Can use keyword var

var flavors = [ "vanilla", "buterscotch", "lavendar" ];

• to retrieve an element of array you call it by its index

flavors [0]; would result in vanilla, and so on....

Array exercise

• Let's add an array to our Get Carded exercise
• Add it to the top of your function
• Change your "else" result to the "responses" array

Array exercise with Math

Use the Math Object to generate  a random response

The syntax is getting a little complex here!

Loops!

• We won't add this to our exercise - not enough time

• Used if you needed to keep checking the status of something, to see if it was still true

• Keywords include for, while, switch...

• What if we wanted to know if we'd eaten all our scoops of ice cream? I know I'd  want to know that...

Loops!

• In the while loop below, it keeps looping until the statement is no longer true. It doesn't end well. How can it when you're out of ice cream?

Quick loop test

for ( var x = 0; x < 10; x++) {
alert("The number is " + x);

}

The loop keeps checking to see if x is less than 10

The syntax is complex = 3 statements to start out

1. First, create a variable
2. Second, give it a condition
3. Third, add on if things are still true

Let's Review!

Variables

• Variables store information or data for you.

• Pretty cool when you want to store info for later use.

• In our example we stored the value of our favorite show as a kid. 

• We then used that stored value in a sentence. 

var favShow = prompt("My favorite show as a kid was: ");

alert("My favorite show as a kid was " + favShow + ".");

Functions

• Functions are basically lists of things you'd like to happen.

• The function name acts as a shortcut for those things to happen

• In our function addOne we used it to add one to a stored value and then alert that new value

function addOne ( ) {

     var age = 9;

      var newAge = age + 1;

      alert (newAge);

 }

Objects

• Objects are JavaScript's superhero containers
  • They have both methods and properties.
  • For example, they may have a color (property) and the ability to walk or run (method).
  • We referenced the web browser's document object and its method:

function addOne() {

     var age = 9;

     var newAge = age + 7;

     document.getElementById("output").innerHTML = newAge;

 }

Conditional statements

• An "if" statement is used to test if a condition is true or false

• If the results are true then a command is executed.

• In our conditional statement we tested whether a user was of age and had responses for both (that displayed in the browser:

if (newAge >= 21) {

document.getElementById("output").innerHTML = "You can buy beer!";
     } else { 

document.getElementById("output").innerHTML ="No way, buddy!";
     }

Arrays

• Arrays are lists of any kind of data, including other arrays

• In our array we created a list of sassy responses to underage drink seekers:

function addOne() {
     var responses = ["Hell, no", "That'd be a no", "Uhhh, yeah, no"];
     var age = 9;
     var newAge = age + 7;
     if (newAge >= 21) {
         document.getElementById("output").innerHTML = "You can buy beer!";
     } else {
         document.getElementById("output").innerHTML = responses[1];
     }
 }
 

Loops!

• In the while loop below, it keeps looping until the statement is no longer true. It doesn't end well. How can it when you're out of ice cream?

BOOKS

Learn to Program by Chris Pine
JavaScript Cookbook by Shelley Powers
JavaScript: The Good Parts by Douglas Crockford
JavaScript the Definitive Guide, 6th edition
JavaScript Enlightenment by Cody Lindley
Effective JavaScript by Dave Herman

Head First JavaScript Programming by Eric Freeman and Elizabeth Robson
Matthew Wilson, Absolute blog
 

ONLINE GUIDES AND DOCUMENTATION

• https://developer.mozilla.org/en-US/docs/Web/JavaScript
• http://www.w3schools.com/jsref/
• http://www.javascriptkit.com/jsref/

Resources

Resources

FREE ONLINE LEARNING ENVIRONMENTS

http://www.w3schools.com/js/

https://www.khanacademy.org/

http://www.codecademy.com

http://www.lynda.com

http://www.udemy.com

JAVASCRIPT ONLINE PLAYGROUNDS
http://codepen.io/
http://jsfiddle.net
http://jsbin.com/
http://dabblet.com/

COMMUNITY
github.com
stackoverflow.com
Doug Crockford - http://www.yuiblog.com/crockford/
Shelley Powers - http://www.burningbird.net
Bret Victor - http://worrydream.com