|
|
|
wl310-ver4.1
Introduction to JavaScript DOMScripting (DHTML) - 3 days
Description
This courseware training guide book will teach important techniques that will enable you to design Web pages with the user in mind. Through an understanding of the Document Object Model (DOM), you will be able to create fast and efficient client-side scripting code using the JavaScript language. This course will build on your knowledge of simple hypertext mark-up language (XHTML/HTML) to expand the functionality of forms, data entry and user interfaces. You will supplement your previous knowledge with techniques using images and topics in Cascading Style Sheets (CSS) to enhance your ability to design Web sites compliant with the latest Web Standards methods.
Suggested Prerequisites• Advanced Web Design: Layout, Forms, and Scripting
Next Courses• Advanced JavaScript: DOM Scripting
• Introduction to XML
Objectives• Understand JavaScript commands and program structure 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
Course OutlineReview 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
|
|
|
|
|
