LOGO For Immediate Assistance Call 855-211-9361

Open Enrollment

JavaScript: DOM Scripting - DHTML (300)

Price: $1,750.00

Call for availability 855-211-9361

Learn the programming techniques needed to develop cutting-edge Web sites. You will be able to fully exploit the capabilities of any modern Web browser by using dynamic features of client-side Web programming in the JavaScript language. From simple mouse-driven events to advanced drag-and-drop features, you will learn the tools to publish a truly interactive Web site that is browser independent and complies with the latest Web Standards techniques.

Courses in this Capstone series include:

310: Introduction to JavaScript: DOM Scripting (DHTML)
320: Advanced JavaScript: DOM Scripting (DHTML)

Students can choose to enroll in this 5-day course or choose to attend classes individually. By enrolling in the Capstone Series instead of the individual courses, students benefit from a $100 savings off the total tuition. Students who successfully complete the class exercises and/or Capstone project will receive the PB Tech Certification along with real-world sample code.

Course Overview

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

  • Understand JavaScript commands and program structures including arithmetic and logical operators, scalar and array variables, control structures and functions
  • Know how to write compact, extractable script
  • Build dynamic image changes that respond to the user's mouse movements
  • Build pages with browser independence
  • Calculate and validate form content
  • Create real-time dynamic content such as the user's time of day
  • Build pages that open and close based on the user's actions
  • Dynamically position content with CSS to precisely control the position and appearance of the elements
  • Employ regular expressions, to enable scripts to check whether a string of characters matches a specific pattern
  • 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
  • Understand the future of DOMScripting (DHTML) through Ajax
  • Control cookies
  • Create reusable code with object oriented programming techniques
  • Create shopping carts and calendars

Prerequisites

102 Advanced Web Design: Layout, Forms, and Scripting

Course Outline

  • Review of JavaScript and the DOM

    • What is JavaScript?
    • Debugging JavaScript
    • What is the DOM?
    • What is DHTML? What is DOM Scripting?
    • History of DHTML
    • Browser Independence
  • Review of DOMScripting/DHTML

  • Review of Basic Structures

    • window Object
    • Prompts: alert(), prompt(), confirm()
    • Nesting Quotes
    • Multiple Statements
    • link Object
    • Functions
    • Passing an Argument
    • Concatenating Strings and Variables
    • Calling from Other Functions
    • getElementById
    • getElementsByTagName
    • External File
    • Embedded
    • Inline
  • Review of Basic Event Handlers

    • OnClick
    • OnMouseover, OnMouseout
    • OnLoad, OnUnload
    • OnSubmit
    • OnFocus, OnBlur
    • Value
  • Calling Functions from Other Functions

  • Introduction to Scalar Variables

    • JavaScript Data
    • Storing Information from a Prompt
  • Working with Numbers

    • Casting Numbers to Strings using Numbers()
    • Comparing Numeric Data
  • Storing a List of Variable in an Array

  • Introduction to the If Conditional

    • The if Conditional
    • The Switch Case Statement
  • Loop Structures

    • Basic Arithmetic Operators
    • Loop Structures
  • A Review of Forms in JavaScript

    • Forms and Form Elements in Dot Syntax Notation
    • The Value Property
    • Form Portability
  • More Event Handlers & Methods

    • Event Handlers for Text Fields
    • Event Methods
    • Radio Buttons
    • Checkboxes
    • Marking Radio Buttons and Checkboxes
  • The return Statement

    • Using the return statement to validate radio buttons
  • Advanced Forms

    • Validating Numeric Data
    • The String Object and Form Validation
    • The onSubmit Event Handler and Form Validation
    • Extending Classes for Improved Form Validation
  • More on Advanced Forms

    • Regular Expressions
    • String Methods that can Use Regular Expressions
  • Building a Form Toolbox

    • Accessing a JavaScript Library
    • Tools
  • Inter-Window Communication

    • Working with the window Object
    • window.open() and window.close()
    • document.write()
    • document.close()
    • Focusing and Closing a Window
    • Opening a Child Window from the Parent Page
    • Two Windows = Two Object Hierarchies
    • Parent-Child Interaction
  • Working with Advanced Objects

    • The Date Object
    • The Location Object
    • The Navigator Object
    • Custom Objects
  • Objects within Objects

    • New Syntax for Accessing Objects
    • The for/in Loop
    • Multi-Tiered Objects
  • Images in JavaScript

    • Pre-loading Images
    • The Images Collection
    • Image Flipping & Form Validation
  • Positioning Objects with CSS

    • CSS Positioning Properties
  • Dynamic Positioning

    • Initializing function
    • Using document.getElementById() in positioning
    • Finding browser width and height
  • Appendix A: Color Values and Hexadecimal Triplets

  • Appendix B: DHTML in Various Browsers

  • Appendix D: Inter-Frame Communication: Frames Based Order Forms

  • Appendix E: Regular Expression References

    • Character Types and Ranges
    • Quantity Indicators
    • Location Indicators
    • Other Special Characters
    • Attributes/Modifiers
  • Appendix G: Recommended Resources

  • Timed Animation with CSS

    • Animation Steps
  • "Phasing" Elements with the Clip Style

    • Event Handling
    • Clipping
  • JavaScript Effects

    • Fading
    • Page Loading
    • InnerHTML
    • Create Element, Append Child
  • Dragable Content

  • Shopping Carts

  • Calendars

  • DHTML Menus

    • Drop Down Menus
    • Menus without DHTML..and the future of Menus
  • DHTML with Data

    • Searching Data
  • Advanced Regular Expressions and Backreferences

    • Working with Backreferences
    • Inline Backreferences
  • Cookies

    • Cookies in JavaScript
    • Cookies Demonstration
  • Auto-Populating SELECT Lists

  • Appendix A: Color Values and Hexadecimal Triplets

  • Appendix B: DHTML in Various Browsers

  • Appendix C: Generating Status Bar Messages

    • The window’s status Property
  • Appendix E: Regular Expression References

    • Character Types and Ranges
    • Quantity Indicators
    • Location Indicators
    • Other Special Characters
    • Attributes/Modifiers
  • Appendix F: The future in AJAX: JavaScript and XML

    • A Survey of AJAX Libraries
  • Appendix G: Recommended Resources