COURSE CALENDAR | WEEK 12 CLASS OUTLINE | Homework |

Topics covered in class:

  1. AD650 Learning Forum: New Technique presentation
  2. REVIEW Student Portfolio Client Sites: Today your site should be functional (all pages in the site are accessible through global and/or local navigation links) and structured (all pages in the site should have a template page applied with the developed stylesheet).
  3. Best Practices: Using JavaScript for good, not evil
    1. Graceful Degradation: ensuring your sites work without Javascript. Functionality may be reduced, but it does not fail completely. Search engines do not understand JavaScript.
    2. Progressive Enhancement, which means separating Presentation and Behavior from Structure, almost always degrades gracefully.
    3. Unobtrusive JavaScript: completely separating Behavior from Structure
      1. In the same way we keep all presentation out of our HTML structure, we need to completely separate the JavaScript from the HTML by removing all inline event handlers and using a hook, like an ID or Class, to target an element and execute the function.
      2. To target multiple elements with a Class, use getElementsByTagName and getAttribute
        1. Example with class
      3. Since the document loads within the browser window, the Document Object is a property of the Window Object. Use the onload function to trigger the DOM and execute the script as the page loads. Without it the JavaScript file will load and execute before the document loads.
        1. Example including onload
      4. To attach an event handler to an element with an ID:
        getElementById(id).event = action
        1. Example with ID and onload
    4. Backwards Compatibility: making sure older browsers don't choke on your script
      1. Most browsers have some support JavaScript and most modern browsers understand the DOM, but not all older browsers understand DOM methods and properties.
      2. Test the browser using object detection to determine whether or not the browser understands a particular method. If the browser doesn't then the statement returns false.
      3. Use the if statement to wrap the method and the not operator to evaluate either true or false. If the browser understands the method the rest of the script will execute, if not, the value will return false.
        1. Example with if and not
  4. Updating the Image Gallery with BEST PRACTICES
    1. Review our showPic script.
    2. Does the Javascript degrade gracefully? YES
    3. Is the Javascript unobtrusive? NO
      1. Add a hook (ID or CLASS) to an element in the HTML (diagram)
      2. Remove the inline event handler (diagram)
      3. Write a function that adds the event handler to the Javascript and creates checkpoints for browsers that don't understand the DOM. (diagram)
      4. Use the addLoadEvent function to make sure the document has finished loading before the javascript executes. This function is like the onload function, but it allows for multiple functions to load when the page loads. (diagram)
    4. Does the showPic function have the necessary checks? NO
      1. This function never checks to see if "placeholder" and "description" exist.
      2. If the placeholder exists, but the description element doesn't we still want the image to swap.
      3. Add checks for "placeholder" and "description". (diagram)
      4. What if the placeholder image is missing? The script doesn't execute and we have cancelled our default action in the prepareGallery function. We no longer have graceful degradation.
      5. The problem is in the prepareGallery function. It cancels the default action. Modify the showPic function so that if the placeholder does NOT exist the showPic function should return true, instead of false (keeping the default link action). (diagram)
      6. We need to remove the return false (canceling the default link action) from the prepareGallery function and tell it to use the returned showPic value instead. (diagram)
    5. Extra Checks and onkeypress Accessibility
      1. Use showPic function to check for title attribute and set value of text to empty
      2. Also check to see if "placeholder" is an img using the nodeName property.
      3. Caution: the use of onkeypress is not always accessible. Some browsers trigger the onkeypress event way any key is pressed. The onlick event handler is also triggered when hitting the return key.
      4. The final script.
    6. Replacing text links with images
      1. Final example

 

Homework | Week 12

  1. Prepare for a JavaScript quiz.
  2. Client Site Work:

    Make sure you are on track with your Milestone Schedule

    • Phase 1: Site Definition
    • Phase 2: Developing Site Structure
    • Phase 3: Interface Design & Production
      • The Design Process
      • Protosite Development
      • Art Optimization/Production
    • Phase 4: Technical Engineering
      • HTML Production/Layout
      • Beta Launch/QA Testing -- WE ARE HERE!!!
    • Phase 5: Publishing/Marketing/Launch
      • Maintenance Schedule/Updating
      • Domain and hosting setup
      • Search Engine Submissions
      • HTML Style Guide