wareSource

Lotus Domino Designer 8.5.x: JavaScript

Course Code: DDJS85x
Product: Lotus Notes/Domino R8.5.x
Duration: 3 days
Topics/Pages: 24 topics / 466 pages
Price (US dollars):
$65 per user

Description

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.

Course goals

This course will:

  • 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.


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 wareSource.

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.


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.

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