Beginning Javascript

Class 2

Welcome!

Get Involved!

If you're interested in getting involved with Girl Develop it we're having an org meeting this Sunday

Hack Night

@wtfluckey will give her talk about taking risks. Carl will cook dinner. Join us!

Variables

What's a variable?

Data Types

What are some of the data types in JavaScript?

Functions

What is a function and how do we use it?

A note on the += operator

Many times you will want to add or append to a variable. We can do this in two ways:

                var x = 0;
                x = x + 5;    // x is now 5
                x += 5;       // x is now 10
                
            

+= is shorthand for = (my value) +

Variable Scope

JavaScript have "function scope". They are visible in the function where they are defined

  function addNumbers(num1, num2){
    var result = num1 + num2;
    return result; //Anything after this line won't be read
  }
  var sum  = addNumbers(5, 6);
  console.log(result); //will return undefined because result only exists inside the addNumbers function
          

Variable Scope

JavaScript have "function scope". They are visible in the function where they are defined

   var result;
    function addNumbers(num1, num2){
      result = num1 + num2;
      return result; //Anything after this line won't be read
    }
    var sum  = addNumbers(5, 6);
    console.log(result); //will return 11 because the variable was defined outside the function
          

Let's Develop It

 <a href = "#" onclick="calculate()">
 Calculate life time supply
 </a>
         

Array

An array is a data-type that holds an ordered list of values, of any type:

          var arrayName = [element0, element1, ...];
            

var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
var favoriteNumbers = [16, 27, 88];
var luckyThings = ['Rainbows', 7, 'Horseshoes'];
            

          console.log(rainbowColors.length);
            

Arrays -- returning values

You can access items with "bracket notation".

          var arrayItem = arrayName[indexNum];
            

      var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
      var firstColor = rainbowColors[0];
      var lastColor = rainbowColors[6];
            

Arrays -- updating values

        var awesomeAnimals = ['Corgis', 'Otters', 'Octopi'];
        awesomeAnimals[0] = 'Bunnies';
            

          awesomeAnimals[4] = 'Corgis';
            

          awesomeAnimals.push('Ocelots');
            

Loops

Sometimes you want to go through a piece of code multiple times

Why?

• Showing a timer count down
• Displaying the results of a search
• Adding images to a slideshow

The while loop

The while loop tells JS to repeat statements while a condition is true:

      while (expression) {
        // statements to repeat
      }
          

      var x = 0;
      while (x < 5) {
        console.log(x);
        x++;
      }
          

The for loop

The for loop is a safer way of looping

          for (initialize; condition; update) {
            // statements to repeat
          }
          

          for (var i = 0; i < 5; i++) {
            console.log(i);
          }
          

Loops and Arrays

var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
for (var i = 0; i < rainbowColors.length; i++) {
  console.log(rainbowColors[i]);
}
          

Let's Develop It

• Add a new link to the exercise from last week
• Add an onclick to the link for a function called favoriteThings()
• Create a new function called favoriteThings() in the javascript file
• In the function, create an array and loop through the results
• Post the results in an alert "My favorite things are XX, YY, ZZ'
• Bonus -- add an 'and' in the sentence before the last item

Questions?