COURSE CALENDAR | WEEK 10 CLASS OUTLINE | HOMEWORK |

  1. Upload your Midterm Practical Exam to the FTP server (call the folder exam)
  2. XHTML files for your client site
    1. You should have a template page created for each level of your site, with properly structured, semantically correct XHTML.
    2. On each template page you should have a site title (h1), page heading (h2), copy (p, ul, a, etc.), global navigation list with links to all the main sections of your site (ul, li, a), subnavigation list (ul, li, a), a footer (p, a) and all necessary containers (div).
    3. You should have created a style sheet with rules for each main division and tested the page in Browser Cam before adding national rules to an additional stylesheet.
    4. Upload your files to your client_site folder on the FTP server for review.
  3. More Javascript (sample file)
    1. Arrays: A grouping of multiple values under the same name, for example you can have a variable called Beatles that contains all four band members. (diagram)
      • 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 (diagram)
    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. (diagram)
      • You can also create an Array to hold other arrays. (diagram)
    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 (/) (diagram)
      • Operations can be combined. (diagram)
      • Operations can be used in a variable and performed on a variable.
      • Operations shortcuts:
        • (++) increases the value of a numeric variable by 1. (diagram)
        • (--) decreases the value of a numeric variable by 1. (diagram)
        • (+=) performs addition (or concatenation) and assignment at the same time. (diagram)
      • Concatenations:
        • Concatenations join strings, numbers or variables together using the (+) operator. (diagram)
    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. (syntax diagram)
      • The if statement is the most common. The condition is always going to be either true or false. (diagram)
      • The if statement can be expanded using else. Statements inside of the else clause will be executed only when the if condition is false. (diagram)
      • 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. (diagram)
        • Check for equality the wrong way. Remember the = sign is used for assignments. (diagram)
        • Check for inequality. (diagram)
      • 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. (diagram)
        • 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. (diagram)
        • The not operation (!) works on a single operand and switches the returned value from true to false or false to true. (diagram)
    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. (syntax diagram) (diagram)
      • do while: similar to the syntax of a regular loop, but this loop will execute even if the condition is false. (syntax diagram) (diagram)
      • for: a cleaner way of executing loops. Everything relevant to the loop is contained within the parentheses. (syntax diagram) (diagram)
    7. Functions
      • A function is a group of statements that can be invoked from anywhere in your code. (syntax diagram)
      • Functions are good for reusing pieces of code. Once you define a function, you can reuse it by simply calling it by name. (diagram)
      • 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. (diagram)
      • 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.(diagram)
    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. (syntax diagram)
      • 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. (diagram)
      • 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.
  4. Intro to the Document Object Model (sample file)
    1. 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.
    2. The document is represented as a family tree or document tree.
    3. 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>
    4. CSS
      • Inheritance
      • class Selectors
      • id Selectors The id that is applied to an element is also targeted by the DOM. An important reason why an id can only be referenced one time on an HTML page.
    5. 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. (syntax) (diagram)
      • 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. (syntax) (diagram)
      • getAttribute: This method can only be used on an element node. Combined with getElementsByTagName, use it to get the attribute of a specific element. (syntax) (diagram)
      • 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. (syntax) (diagram)
    6. http://icant.co.uk/articles/domessentials/

Homework| Week 10