week #7

• More Javascript
  
  
  
  1. Arrays, Review: A grouping of multiple values under the
     same name, for example you can have a variable called Beatles that
     contains all four band members.

     
     
     var beatles = Array(4);
     beatles[0] = "John";
     beatles[1] = "Paul";
     beatles[2] = "George";
     beatles[3] = "Ringo";
     
       the syntax is working like this:
        
     var name_of_array = Array(length);
     name_of_array[index] ="value_of_this_element";
     
     
     

     
     
     
     
     • An Element is a one of the values in an array.
     
     
     • The Length is the number of elements that you want the array
       to contain.
     
     
     • Populating is adding elements to an array.
     
     
     • The Index is where you specify the order of the array.
     
     
     
     
  
  
  2. Numeric Arrays have an incremental number index
     starting from 0, like the example above.
  
  
  3. Associative Arrays
     
     
     
     • Associative Array uses a string instead of a number for its
       index.
     
     
     • If you use an Associative Array you can reference elements by
       name instead of number.
       

       
       
       var beatles = Array(); // notice that the length can be left blank if you want
       beatles[vocalist] = "John";
       beatles[Rhythmguitar] = "Paul";
       beatles[bass] = "George";
       beatles[drummer] = "Ringo";
       
       

       
       
       
     
     
     
     
     • You can also create an Array to hold other arrays.

       
       
       
       var beatles = Array(); // notice that the length can be left blank if you want
       beatles[vocalist] = lennon;
       beatles[Rhythmguitar] = mccartney;
       beatles[bass] = harrison;
       beatles[drummer] = star;
       
       var lennon = Array();
       lennon[firstname] = "John"; //notice that the value of these elements can be
       lennon[birthyear] = 1940; //numbers
       lennon[living] = false; //or boolean values
       
       

     
     
     • Remember the example to play with
     
     
     
     
     
  
  
  4. Operations
     
     
     
     • Operations allow you to do calculations and manipulate data.
     
     
     • Operators are symbols that Javascript uses to perform operations.
     
     
     • We've been using (=) operator to perform assignments.
     
     
     • Arithmetic operators: Addition (+), Subtraction
       (-), Multiplication (*), Division (/)
     
     
     • Operations can be combined.
     
     
     • Operations can be used in
       a variable and performed
       on a variable.
     
     
     • Operations shortcuts:
       
       
       
       • (++) increases the value of a numeric variable by 1.
       
       
       • (--) decreases the value of a numeric variable by 1.
       
       
       • (+=) performs addition (or concatenation) and assignment
         at the same time.

         
         
         var year = 2005;
         var message = "the year is";
         message += year;
         
         alert (message);
         
         
         

       
       
       
       
     
     
     • Concatenations:
       
       
       
       • Concatenations join strings, numbers or variables together
         using the (+) operator.
         

         
         
         
         var mood = "happy";
         var message = "I am feeling"+mood;
         
         

         
         
       
       
       
       
     
     
     
     
  
  
  5. Conditional Statements
     
     
     
     • Javascript uses conditional statements to make decisions based
       on the criteria given. A conditional statement sets up a condition
       that must be evaluated before the rest of the script can be read.
       
       
       

       
       if (condition){
           statements;
           }
       
       for example:
       
       if (1>2) {
          alert("the world has gone made");
           }
       
       

       
       
       
     
     
     • The if statement is the most common. The condition
       is always going to be either true or false.
     
     
     • The if statement can be expanded using else.
       Statements inside of the else clause will be executed only when
       the if condition is false.
       

       
       
       if(1>2){
       alert("the world has gone mad!!!!! OMG!!!!");
       }
       else {
       alert("everything is fine, chill out");
       }
       
       

       
       
       
     
     
     • Comparison Operators: greater than (>),
       less than (<), greater than or equal to (>=), less than
       or equal to (<=), equality (==) and inequality (!=).
       
       
       
       • Check for equality the right way.
       
       
       • Don't try to check for equality the wrong way. Remember the = sign is
         used for assignments.
       
       
       • Check for inequality.
       
       
       
       
     
     
     • Operands: are operations combined in a conditional
       statement
     
     
     • Logical Operators: and (&&) and or
       (||) are used to combine operators, and not (!)
       is used to reverse the value of a statement. All three
       return Boolean values of either true or false.
       
       
       
       • The and operation (&&)
         will only be true if both operands are true.
       
       
       • The or operation (||)
         will be true if one of its operands is true or if both of
         its operands are true. It will be false only when both operands
         are false.
       
       
       • The not operation (!)
         works on a single operand and switches the returned value
         from true to false or false to true.
       
       
       
       
     
     
     
     
  
  
  6. Looping Statements
     
     
     
     • Looping is used to execute the same statement a number of times.
       The code with in the looping statement executes until the condition
       is no longer true.
     
     
     • while: the code within the curly braces will
       be executed until the condition is false. In this example the
       code will execute 10 times until the value of the count turns
       11 and the condition becomes false. If nothing happens to affect
       the condition the loop will execute forever.
       
       

       
       
       while (condition){
             statements;
       
              }
       
       var count = 1;
       while (count < 11) {
       alert(cont);
       count++;
       }
       
       
       

       
       
     
     
     • do while: similar to the syntax of a regular
       loop, but this loop will execute even if the condition is false.
       
       

       
       
       do{
       statements;
       } while (condition);
       
       
       

       
       
       
     
     
     • for: a cleaner way of executing loops. Everything
       relevant to the loop is contained within the parentheses.
       

       
       
       for (initial condition; test condition; alter condition){
           statements;
           }
       
       example:
       
       for (var count =1; count < 11; count++){
       alert (count);
       }
       
       and a more complex example:
       
       var beatles = Array("John","Paul","George","Ringo");
       for (var count=0; count < beatles.length; count++){
           alert(beatles[count]);
           }
       
       
       

       
       
       
     
     
     
     
  
  
  7. Functions
     
     
     
     • A function is a group of statements that can be invoked from
       anywhere in your code.
       
       

       
       
       function name(arguments){
           statements;
           }
       
       example:
       
       function multiply(num1, num2) {
           var total = num1 * num2;
           alert(total);
       }
       
       

       
       
     
     
     • Functions are good for reusing pieces of code. Once you define
       a function, you can reuse it by simply calling it by name.
     
     
     • You can pass data to a function and have them act on that data.
       These are called arguments. A function can use
       multiple arguments, separated by commas. Once the arguments are
       passed to the function they can be used like variables.
       

       
       
       multiply(10,2);
       
       

       
       
       
     
     
     • Use the return statement to return a number,
       string, array or Boolean value. In this example the function take
       one argument, returns a number and then assigns the number to
       a new variable.
       
       
       

       
       
       function convertToCelsius(temp) {
          var result = temp -32;
          result = result / 1.8;
          return result;
          }
       
       var temp_farhenheit = 95;
       var temp_celcius = convertToCelsius(temp_fahrenheit);
       alert(temp_celsius);
       
       
       

       
       
       
     
     
     
     
  
  
  8. Objects
     
     
     
     • An object is a self-contained collection of data that takes
       two forms: property and method. Properties and
       methods are combined to form an object.
     
     
     • A property is a variable (like mood or age)
       that belongs to an object.
     
     
     • A method is a function (like walk or sleep)
       that can be invoked by the object.
     
     
     • To use a specific object an instance of that
       object must be created.
     
     
     • Native Objects are those that come pre-made
       for use in your scripts.
     
     
     • You can create your own User-Defined Objects,
       but not quite yet.
     
     
     • Host Objects are objects provided by the browser.
       Early Javascript used the properties and methods of the window
       object, sometimes called the Browser Object Model. Stay away
       from the the window object and work with the Document Object.
     
     
     
     
  
  
  
  



• IF we Have Time, even More Javascript
  
  
  
• Intro to the Document Object Model
  
• The Document Object Model represents the web page that is currently
  loaded in the browser. Think of the DOM as map of the web page and
  think of using JavaScript to read the map.


• The document is represented as a family tree or document
  tree.


• Nodes
  
  
  
  • Element Nodes: All the elements , like h1, p,
    ul, etc. are all nodes on the tree. The have relationships to each
    other, like parent, child, sibling. All elements contain other elements,
    except <html> which is the root of the tree.
  
  
  • Text Nodes: are the text the elements contain,
    like <h2>Resume</h2>. Text nodes are
    always contained inside an element node.
  
  
  • Attribute Nodes: give more specific info about
    an element, like <h2 title="my resume">Resume</h2>
  
  
  
  


• DOM Methods
  
  
  
  • getElementById: This method is a function associated
    with the document object. It takes just one argument: the id of
    the element you want to get.
    

    
    
    document.getElementById(id);
    

    
    See Example on w3c site
    
  
  
  • getElementsByTagName: Using this method gives
    you access to an array that is populated with every instance of
    the tag. You have access to multiple elements.
    

    
    document.getElementByTagName(tag);
    
    

    
    See Example on w3c site
    
    
  
  
  • getAttribute: This method can only be used on
    an element node.
    

    
    
    object.getAttribute(attribute);
    

    
    
    here is an example
    Combined with getElementsByTagName, use it to get
    the attribute of a specific element, or in this example the title attributes of each of the "p" tags in the document .
    

    
    
    var paras = document.getElementByTagName("p");
    for (var i=0; i < paras.length; i++){
    alert(paras[1].getAttribute("title"));
    }
    
    

    
    
    
  
  
  • setAttribute: This method allows you to change
    the value of an attribute node. Unlike the others, it takes two
    arguments: one for attribute and one for value.
    

    
    object.setAttribute(attriute,value);
    

    
    
    
  
  
  
  
• http://icant.co.uk/articles/domessentials/



• Now we will talk about this Sub nav flyout example of a fly-out secondary menu

Homework

1. Make your own version of the Sub nav flyout example This is due in two weeks



2. Make your own version of the single image roll over from two weeks ago click here for example - this i assigned last week in class but didn't write down so its due next week


3. OPTIONAL EXTRA CREDIT CHALLENGE - if you DARE! (OMG its so exciting!) create a menu that combines a single image rollover with a javascript subnav.


4. First Draft of Home page mockup (comp) -- this is a JPG file, you can create it in photoshop, and its your first idea for the over-all design of your client's site using the home page as an example. Once the design direction is approved by your client, you will use the design of this first designed home page to guide the style of all the pages.