LOGO For Immediate Assistance Call 855-211-9361

1-3 day (9 HOUR TRAINING):

JavaScript DOM Scripting Training


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.

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

Course Outline

  • Introduction to JavaScript: DOM Scripting (DHTML) - 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- Review of Basic Event Handlers

    • 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
    • OnClick - OnMouseover, OnMouseout - OnLoad, OnUnload- OnSubmit
    • OnFocus, OnBlur - Value
  • Calling Functions from Other Functions- Introduction to Scalar Variables- Working with Numbers - Storing a List of Variable in an Array - Introduction to the If Conditional - Loop Structures

    • JavaScript Data
    • Storing Information from a Prompt
    • Casting Numbers to Strings using Numbers() - Comparing Numeric Data
    • The if Conditional - The Switch Case Statement- Basic Arithmetic Operators
    • Loop Structures
  • A Review of Forms in JavaScript - More Event Handlers & Methods - The return Statement - Advanced Forms - More on Advanced Forms

    • Forms and Form Elements in Dot Syntax Notation - The Value Property- Form Portability- Event Handlers for Text Fields
    • Event Methods- Radio Buttons- Checkboxes- Marking Radio Buttons and Checkboxes
    • Using the return statement to validate radio buttons- Validating Numeric Data- The String Object and Form Validation
    • The onSubmit Event Handler and Form Validation- Extending Classes for Improved Form Validation
    • Regular Expressions- String Methods that can Use Regular Expressions
  • Building a Form Toolbox - Inter-Window Communication- Working with Advanced Objects - Objects within Objects

    • Accessing a JavaScript Library- Tools- 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
    • The Date Object- The Location Object- The Navigator Object- Custom Objects- New Syntax for Accessing Objects
    • The for/in Loop- Multi-Tiered Objects
  • Images in JavaScript - Positioning Objects with CSS - Dynamic Positioning - 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 - Appendix G: Recommended Resources

    • Pre-loading Images - The Images Collection- Image Flipping & Form Validation
    • CSS Positioning Properties - Initializing function- Using document.getElementById() in positioning
    • Finding browser width and height- Character Types and Ranges
    • Quantity Indicators- Location Indicators
    • Other Special Characters - Attributes/Modifiers
  • imed Animation with CSS -"Phasing" Elements with the Clip Style - JavaScript Effects - Dragable Content - Shopping Carts -Calendars

    • Animation Steps - Event Handling
    • Clipping - Fading
    • Page Loading
    • InnerHTML
    • Create Element, Append Child
  • DHTML Menus - DHTML with Data - Advanced Regular Expressions and Backreferences - Cookies - Auto-Populating SELECT Lists -Appendix A: Color Values and Hexadecimal Triplets -Appendix B: DHTML in Various Browsers - Appendix C: Generating Status Bar Messages - Appendix E: Regular Expression References - Appendix F: The future in AJAX: JavaScript and XML -Appendix G: Recommended Resources

    • Drop Down Menus - Menus without DHTML... and the future of Menus - Searching Data
    • Working with Backreferences- Inline Backreferences- Cookies in JavaScript- Cookies Demonstration
    • The window's status Property- Character Types and Ranges- Quantity Indicators- Location Indicators
    • Other Special Characters- Attributes/Modifiers
    • A Survey of AJAX Libraries