JavaScript is the primary scripting language for browsers. It is used to operate on both browser and web page objects. During this course you will learn how to use JavaScript by coding “classic” (non-XPages) browser applications that are run on the Domino Server.

The course covers the basic language elements of JavaScript, how to add scripts using Domino Designer, and how to exploit the various browser and language object event handlers. There is a strong emphasis on the browser and web page object models and how they relate to the Domino object model. The course also touches on how to incorporate Dynamic HTML, Java Applets, LiveConnect, ActiveX controls, and AJAX into browser applications.

Lotus Training Learning Objectives

In this course, you will learn how to:

• build a fundamental knowledge of JavaScript as it is applied in “classic” (non-XPages) browser applications using Domino Designer
• provide practical programming and debugging experience to ensure a foundation of JavaScript skills
• understand the relationship between JavaScript and Domino data types
• clarify the use of the various object models, including the Domino Object Model, the original browser Document Object Model, JavaScript language objects, and the newer W3C Document Object Model
• use JavaScript to code the Field, Button, and Form event handlers
• build a practical understanding of data validation and error trapping
• use DHTML to create interactive web pages
• control Java applets using LiveConnect
• remotely access Domino objects via CORBA
• script ActiveX objects
• use AJAX to request and process Domino-generated XML and JSON
• develop practical ways to detect and accommodate various browser object models and versions of JavaScript.

Lotus Training Audience

This course assumes that you have:

• thorough knowledge of the Domino Designer 8.5.x development environment, including Form, Page, View, Frameset, and Agent design, as well as how to set properties and set the ACL
• knowledge of web technologies, including servers, browsers, HTML, Cascading Style Sheets, and some basic JavaScript (or other browser scripting language) and awareness of browser object properties and methods
• basic understanding of LotusScript and the various Notes product objects
• because this course does not review any aspects of the non-JavaScript aspects of developing “classic” (non-XPages) browser applications using Domino Designer, mastery of the topics covered in these courses:
• Lotus Domino Designer: Classic Notes Applications
• Lotus Domino Designer: Basic Browser Applications courses.

This course is part of a series of Domino Designer training courses offered by us.

The content learned in this course is a prerequisite to these courses, which require that you have a working knowledge of JavaScript:

• Domino Designer: Browser Applications and Dojo
• Domino Designer: Basic XPage Applications.

Lotus Training Course duration

This course is sold as a 3-day course, but there is much more material than can be covered in that duration.

Course design

The course takes a task-oriented approach, during which you will work with JavaScript code that will have immediate application to your Domino applications.

Because this course instructs you how JavaScript works with respect to Domino, you will be able to leverage the many JavaScript resources available to you as a developer.

Lotus Training Course outline

Topic 1: HTML File with JavaScript

• The history of browser client-side scripting
• Users can disable JavaScript
• Exercise: Install course files and open local HTML file
• JavaScript exists in an HTML file
• Domino as a multi-faceted server
• The Domino "Web Server": HTTP Server
• Exercise: Open HTML file with JavaScript from server
• Protect HTML files on the Server
• HTML files as shared resources
• Exercise: Create project database
• Open a file resource from a browser
• Exercise: Open a file resource from a browser
• HTML/JavaScript syntax checking
• Runtime error reporting
• Internet Explorer Developer Tools
• Mozilla debuggers
• Commercial debuggers
• DIY debugging

Topic 2: Coding JavaScript in Domino Designer

• Preview of the Domino/browser exchange
• HTML page structure
• Code your own HTML in a Form or Page
• Adding JavaScript functions to the HEAD tag
• Exercise: Add JavaScript function
• Call JavaScript function from elements in the BODY tag
• Exercise: Create a button
• Troubleshooting button problems
• JavaScript libraries
• Other ways to include a JavaScript library (.js) file
• JavaScript library security

Topic 3: JavaScript Elements and Syntax

• Walkthrough: Basic elements
• Simple data types
• Built-in functions
• var keyword and variable scope
• Simple dialog boxes
• Commented code
• Exercise: Dialog boxes
• try/catch statement
• throw statement
• Custom error object
• Garbage collection

Topic 4: Branching and Looping Structures

• If structure
• Exercise: If structure
• Boolean operators
• Exercise: Boolean operator
• Simple if using ?
• Switch
• While structure
• Do while structure
• For structure
• Break
• Continue
• Exercise: Looping structures

Topic 5: Custom Functions

• Function statement
• Function arguments
• How to call a function
• From where to call a function
• Return a value from a function
• Exercise: Function to test number
• Passing argument by value
• Anonymous functions
• Recursive functions
• Conversion of @Commands to JavaScript functions

Topic 6: JavaScript Objects

• Date object
• Browser or Domino Server time?
• Create date object
• Domino-acceptable date value
• Exercise: Date object
• Math object
• Number object
• String object
• String object parsing methods
• Regular expressions
• Exercise: Fix URL function
• RegExp (regular expression) object
• Screen object
• Custom objects
• forin statement
• with statement
• delete operator
• Custom object prototyping
• Example: Custom class
• Example: Add method to JavaScript object
• Enumerator object
• Image object

Topic 7: Arrays

• Array attributes
• How to declare an array object
• Number of elements
• Append elements
• Read one element
• Out-of-bound errors
• Read all elements
• Create array from @DbColumn
• Copy entire array
• Array object methods
• Delete element
• Find values in an array
• "Multi-dimension" arrays
• Associative arrays
• Exercise: Parse URL command string
• Parse URL command string using formula
• Unique array elements
• Object Literal
• Nested Literals

Topic 8: Browser Object Model

• Document Object Model levels
• Browser and document objects hierarchy
• Browser object browser form
• JavaScript access to BOM/DOM objects
• Traverse the hierarchy
• Example: Access Form object
• Example: Access Field object
• Chaining object references
• this keyword
• self keyword
• Assistance coding with the BOM/DOM
• Exercise: Accessing a Field object
• Document object and Domino object interaction
• Example: Form processing
• Document object to Domino object limitations

Topic 9: Browser Event Handlers

• Codeable events in Domino Designer
• The challenges of coding event handlers
• Commonly-coded object event handlers
• Walkthrough: Investigate event handlers
• this keyword
• Capture keyboard events
• Example 1: Capture key presses
• Example 2: Capture double-click
• Esc key in Internet Explorer
• Example 3: Capture Esc
• Example 4: Capture Esc, double-click, and Del
• Object event default actions
• Code using the javascript: pseudo-protocol in href
• Using javascript: in an @Function formula

Topic 10: Field Value

• HTML Field types
• HTML field data type
• Text field access
• with statement
• DIY <input> tag and Field data storage
• JavaScript access to Computed/Hidden Fields in Edit mode
• JavaScript access to Computed/Hidden Fields in Read mode
• Parsing a multi-value Field into an array
• <select> field access
• Select an option using JavaScript
• Add new option to a select list
• Remove option
• Radio Button
• Checkbox
• Select all check boxes
• Exercise: Access field values
• Exercise: Searching from a Page
• Read Rich Text Field values

Topic 11: Field Input Translation and Validation

• Field-level help
• Field translation
• Field validation
• Test data type
• Validate for number
• Test for NaN
• Test for "null" and "undefined" and ""
• Validate for file attachment name
• onblur, alert, and focus interactions
• Select field validation
• Radio and check box validation
• String format validation
• Date validation with JavaScript
• Handling leap years
• Encourage valid date entries
• Field computation
• When you must use Server-side input translation/validation
• Example: Server-side input validation
• Date validation using @Functions
• Exercise: Recalc using JavaScript

Topic 12: Form Validation

• Field-level event handler caveats
• "Object is not defined" error
• Solve the "Object is not defined" error
• onsubmit event handler
• Keep the <form> tag compact
• Call form submit() method
• Exercise: Form validation
• Call Form submit() method and run the onSubmit code
• Server-side Form validation with client-side alert
• Ensure just one submit
• Page caching settings
• window.onerror event handler

Topic 13: Window Object

• Open window using HTML
• Open window using JavaScript
• Hybrid HTML Link/JavaScript link
• Window features
• Referring to open windows
• Window name versus document.title
• Cross-domain script security restriction
• Focus on a window
• Print window
• Write to window
• Resize, move window
• Close a window
• Window opener property
• Exercise: Help window
• Custom dialog boxes
• Simulating @Picklist using standard window.open
• Simulate @Dialogbox with a modal dialog box
• Address book lookup dialog box
• setTimeout method
• Reading selected text and clipboardData property
• Search for text on the page
• Screen object and window.onresize event handler

Topic 14: Frame and IFrame Objects

• Frames are windows
• Frameset basics
• Support browsers that dont support Frames
• Example frameset
• Targeting frame content using HTML
• Dynamic frames from JavaScript
• Call a function from another frame
• Exercise: Help frame
• Example: On-Form help frame
• IFrame object
• JavaScript Control for Rich Text and IFrames

Topic 15: Location Object

• Location is where you are
• Database properties
• Location properties
• Location object versus CGI variables
• Set location to the current database
• URL encoding
• Setting the location
• Replace the location
• Refresh/Reload a window
• Working with frame locations
• Redirection
• Redirection to user mail
• Redirect to SSL connection
• Manual redirection: "Jump Options"
• Jump Option 2: Select with button
• Menu Option 3: Select w/o button
• Exercise: Page chooser
• Prevent from being framed
• Frame your pages
• Invalid URLs and buffer overflows

Topic 16: Browser State Persistence

• Who is the user?
• What is a cookie?
• Privacy issues
• Set cookie using META tag
• Read cookie using CGI variable
• Weaknesses of HTTP/HTML methods
• Set cookie using JavaScript
• Example: Set cookie
• Get cookie using JavaScript
• Set cookie using formula
• Parse cookie values
• Delete cookie
• Exercise: Default Field values using cookie
• Profile documents
• Profile documents and security
• Create Profile document
• Read from Profile document Fields
• Example: Profile document
• Behaviors and data persistence
• userData and IE security
• Example: userData

Topic 17: Document Object Model

• DOM Level 1 hierarchy
• Element nodes
• Traverse the node hierarchy
• Mozillas DOM and JavaScript object Inspector
• Instantiate a node object defined in the HTML
• Example: Instantiate Subject Field
• Set other node attributes
• Shortcut to element object
• TextNode objects
• Add a an element node
• Remove a node
• DOM Level 0 event handler review
• DOM Level 1 object event handler registration
• Change or cancel a DOM Level 1 object event handler
• DOM Level 2 event listeners
• Internet Explorer 5 through 8 proprietary attachEvent method
• Cross-browser function to add event handler/listener
• Onload event and DOM nodes

Topic 18: Dynamic HTML

• Example: Change stylesheets on Form load
• Example: Change stylesheets on the fly
• Example: Reset style on elements
• Example: Hide When
• Example: Expand all sections
• Example: Disable element
• Exercise: Disable element
• Tables
• Element positioning
• Date picker
• Field input mask behavior

Topic 19: JavaScript and Java Applets

• Java and Domino
• Import/embed single file Java applet
• Embed applet with parameters
• Import/embed multiple file applet with parameters
• Applet parameters
• Shared Applet Resource
• LiveConnect
• Applet access to JavaScript objects
• Date picker Java applet
• Domino applets
• Exercise: Editor Java applet
• lotus.domino.AppletBase applet
• How the lotus.domino.AppletBase applet works
• Domino Server settings
• Client settings
• How to embed the lotus.domino.AppletBase applet
• Accessing Domino objects via JavaScript
• Java Console
• Common errors with lotus.domino.AppletBase

Topic 20: Domino Views

• $$ViewTemplateDefault as redirector
• JavaScript function calls in column formulas
• Exercise: JavaScript in column formula
• HTML check boxes in Views
• Document processing in applet View
• Alphabetic index
• Search from View

Topic 21: JavaScript and ActiveX Controls

• ActiveX and security
• Example 1: Shockwave not scripted
• Example 2: Flash - scripted
• Example 3: Windows Media Player
• Example 4: Calendar control
• Example 5: Run methods in embedded Editor control

Topic 22: Asynchronous JavaScript and XML

• AJAX rediscovered
• GET data from Domino
• POST data to Domino
• XMLHttpRequest object
• XMLHttpRequest object example
• XMLHttpRequest and security
• Limit and control data from view
• JavaScript Object Notation (JSON)
• XML document transformation
• Other examples of using Domino XML output

Topic 23: Cross-Browser Scripting

• What browsers are being used?
• The issues
• DOCTYPE declaration and Document Mode
• Browser mode Compatibility View
• Internet Explorer F12 developer tools
• Launch browser from Lotus Notes
• Design strategies
• Server-side branching with @BrowserInfo
• @GetHTTPHeader
• Client-side browser type/version detection
• Detect browser type/version using CGI variable
• What if JavaScript is disabled?
• Hide JavaScript from non-compliant browsers
• JavaScript version detection
• Client-side object detection
• Example: getElementById
• Example: Layers
• Programmatic access to "layers"
• JavaScript Frameworks

Topic 24: JavaScript Resources

• References and tutorials
• JScript reference
• ECMAScript references
• Document Object Model references
• Mozillas DOM Inspector and Firebug
• JavaScript example code
• Regular Expressions
• DHTML examples
• Java applets
• ActiveX controls
• AJAX
• Browser detection sites and routines
• JavaScript toolkits/function libraries/frameworks
• Domino AJAX examples
• JSON

---

Please contact your training representative for more details on having this course delivered onsite or online

Training Outlines - the one stop shopping center for IT training.
© Training Outlines All rights reserved