LOGO For Immediate Assistance Call 855-211-9361

Open Enrollment

Advanced JavaScript: DOM Scripting DHTML (320)

Price: $700.00

Call for availability 855-211-9361

Gain practical knowledge of dynamic scripting techniques by working with real-world examples of animation, DOM Manipulation and advanced regular expressions. You will learn and test concepts of menus and cookies to enable better Web page interactivity. You will learn all this with an emphasis on browser independence and the latest Web Standards compliant techniques. The course ends with a look at the future of DOM Scripting through AJAX: Asynchronous JavaScript and XML.

Course Overview

By the end of the class students will be able to:

  • Generate page animation by joining CSS and JavaScript, enabling you to move page elements gradually to specific locations on the page or having sections appear and disappear in response to user actions
  • Build dynamic pages that respond to selecting text, pressing keys, dragging and dropping page elements,resizing of windows and more
  • Create and control cookies
  • Create reusable code with object oriented programming techniques
  • Understand the future of DOMScripting (DHTML)

Prerequisites

Advanced Web Design: Layout, Forms, and Scripting

Course Outline

  • Review of JavaScript and the DOM

    • What is JavaScript?
    • Client-side vs. Server-side JavaScript
    • What is the difference between Client-side JavaScript and a CGI Script or other Server-Side Scripting Languages?
    • What is the DOM?
    • What is DHTML? What is DOM Scripting?
    • Browser Independence
    • What you should already know
  • Positioning Objects with CSS

    • CSS Positioning Properties
  • Dynamic Positioning with JavaScript

    • Initializing Function
    • Finding browser width and height
    • Error messages for very old browsers
    • Positioning
  • Timed Animation with CSS

    • Animation Steps
    • Reading current position
    • Modifying the element's position
    • Repeating Steps 1 & 2 to create animation
  • "Phasing" Elements with the Clip Style

    • Event Handling
    • Clipping
  • JavaScript Effects

    • Fading
  • Generating HTML Markup

    • Element Nodes, Text Nodes, and Attribute Nodes
    • Creating the Various Nodes
    • What about inner HTML?
    • Searching Data
  • Advanced Regular Expressions: Backreferences

    • Example: Working with Backreferences
    • Inline Backreferences
  • Cookies

    • domain
    • path
    • expires
    • secure
    • Working with Cookies in JavaScript
    • The cookiefuncs.js File
    • setCookie(name, value, expires)
    • getCookie(name)
    • delCookie(name)
  • Auto-Populating SELECT Lists

    • Example: Populating a SELECT List Dynamically
    • Some shorter names
    • Hiding what should not be seen
    • A generic function to populate the list
    • Repopulating when changed
    • Showing the Dynamic Select List
    • The version using the generic DOM
  • Appendix A: Color Values and Hexadecimal Triplets

  • Appendix B: DOM Level 0 Notation

  • Appendix C: nodeType Values

  • Appendix D: Regular Expression References

    • Character Types and Ranges
    • Quantity Indicators
    • Location Indicators
    • Other Special Characters
    • Attributes/Modifiers
  • Appendix E: Brief Cascading Style Sheet Reference