ADVISOR JumpStart: JavaScript Henry Newberry Teamwork Solutions, Inc. www.teamsol.com AJL201

Who am I? Director of Technical Services at Teamwork Solutions, Inc. (As of May, 2005) Formerly President of Newbs Consulting, Inc. (2000-2005) Cofounder of Synergistics, Inc. (1993-2000) Notes Pioneer at CBIS (1989-1993) Lotus Advisor Contributor and Speaker Lotus Advisor Editorial Advisory Panel Speaker at IBM Lotus events in 2002 & 2003

Director of Technical Services at Teamwork Solutions, Inc. (As of May, 2005)

Formerly President of Newbs Consulting, Inc. (2000-2005)

Cofounder of Synergistics, Inc. (1993-2000)

Notes Pioneer at CBIS (1989-1993)

Lotus Advisor Contributor and Speaker

Lotus Advisor Editorial Advisory Panel

Speaker at IBM Lotus events in 2002 & 2003

This Session is JavaScript – NOT Java Two different languages for two very different usages JAVA jumpstart starts at 10:30 AM J2EE – Java 2 Enterprise Edition - 2:00 PM

Two different languages for two very different usages

JAVA jumpstart starts at 10:30 AM

J2EE – Java 2 Enterprise Edition - 2:00 PM

"...hopefully JavaScript will just be a bad memory." Iris Associates Lotusphere Europe February 1997 "When users can do everything with JavaScript that they now do with LotusScript on the client-side, we will have reached our goal." Iris Associates Lotus Notes & Domino Advisor May 1999

"JavaScript is the only viable client side development tool for browser based applications." Henry Newberry A couple of weeks ago

Session Overview JavaScript overview (10-20 minutes) What, Who, Why, When Demo of what it can make the browser do How to use JavaScript References, JavaScript sessions at DevCon Questions

JavaScript overview (10-20 minutes)

What, Who, Why, When

Demo of what it can make the browser do

How to use JavaScript

References, JavaScript sessions at DevCon

Questions

What Is JavaScript? Nothing in common with Java! Netscape's Navigator 2.0 supported it in 1995 formerly LiveScript renamed JavaScript now properly called ECMAScript – but no one really does that… In-line language - the code is included right in with the HTML and data Sometimes referred to as "Dynamic HTML" Interpreted (not compiled) scripting language It makes the browser into a true web client

Nothing in common with Java!

Netscape's Navigator 2.0 supported it in 1995

formerly LiveScript

renamed JavaScript

now properly called ECMAScript – but no one really does that…

In-line language - the code is included right in with the HTML and data

Sometimes referred to as "Dynamic HTML"

Interpreted (not compiled) scripting language

It makes the browser into a true web client

Why use JavaScript? Advantages: Many traditional client/server features are not available on the web due to browser limitations JavaScript helps fill in most of the gaps Calculations, dynamic redirecting & submitting Field, form, and window event handlers Pop-up dialogs, new windows, framesets Dynamic graphics and mouse rollover events Improved Performance Browser can perform certain functions instead of having to submit and wait for the server

Many traditional client/server features are not available on the web due to browser limitations

JavaScript helps fill in most of the gaps

Calculations, dynamic redirecting & submitting

Field, form, and window event handlers

Pop-up dialogs, new windows, framesets

Dynamic graphics and mouse rollover events

Improved Performance

Browser can perform certain functions instead of having to submit and wait for the server

Examples in this session will… Demonstrate how it runs from the user's perspective Show you what the code looks like Explain the code Answer any questions

Demonstrate how it runs from the user's perspective

Show you what the code looks like

Explain the code

Answer any questions

Demonstration of JavaScript Capabilities Validating user input Automatically recalculating values on the form Prompting the user for a reply Setting fields Dynamic keywords Launching a new window Changing graphics Displaying Layers Others Cookies (storing values on the workstation) Collapse-able sections Getting and rendering XML

Validating user input

Automatically recalculating values on the form

Prompting the user for a reply

Setting fields

Dynamic keywords

Launching a new window

Changing graphics

Displaying Layers

Others

Cookies (storing values on the workstation)

Collapse-able sections

Getting and rendering XML

Why not use JavaScript? Some Disadvantages... Does not work the same on all browsers Can be disabled by the user on their browser Source code can not be protected Good if you're looking to borrow some code Bad for product development efforts

Does not work the same on all browsers

Can be disabled by the user on their browser

Source code can not be protected

Good if you're looking to borrow some code

Bad for product development efforts

Put JavaScript anywhere you put HTML Between SCRIPT tags (runs when page opens) <SCRIPT LANGUAGE=&quot;JavaScript&quot;>alert(&quot;you opened this page&quot;);</SCRIPT> Defining Event Handlers (runs when user clicks button) <input type=Button value=&quot;Click Here&quot; onClick=&quot;alert('you clicked this button.');&quot;> Using javascript: protocol (runs when user clicks image) <img src=&quot;/ImageFile.jpg&quot; href=&quot;javascript:alert('you clicked this image.');&quot;>

Between SCRIPT tags (runs when page opens)

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>alert(&quot;you opened this page&quot;);</SCRIPT>

Defining Event Handlers (runs when user clicks button)

<input type=Button value=&quot;Click Here&quot; onClick=&quot;alert('you clicked this button.');&quot;>

Using javascript: protocol (runs when user clicks image)

<img src=&quot;/ImageFile.jpg&quot; href=&quot;javascript:alert('you clicked this image.');&quot;>

Document Object Model (DOM)

Jamie's &quot;Mini DOM&quot; Example of referencing an object: document.forms[0].TextName.value

Properties Tell you something about the object Can be read or written (usually) Can lead to values or other objects in the DOM document.forms is an array of objects of the class called “form” document.title is text

Tell you something about the object

Can be read or written (usually)

Can lead to values or other objects in the DOM

document.forms is an array of objects of the class called “form”

document.title is text

Methods Are actions that you can tell the object to do Methods always have parenthesis: form.submit() Methods may take parameters (arguments) between parenthesis: window.back( ) window.alert(&quot;this is a message in a popup box&quot;)

Are actions that you can tell the object to do

Methods always have parenthesis:

form.submit()

Methods may take parameters (arguments) between parenthesis:

window.back( )

window.alert(&quot;this is a message in a popup box&quot;)

Events Events are Things that Happen to an Object JavaScript Code can be designed to execute when the event occurs A JavaScript Method can direct which code executes when an event occurs on an object

Events are Things that Happen to an Object

JavaScript Code can be designed to execute when the event occurs

A JavaScript Method can direct which code executes when an event occurs on an object

The Main Events onFocus : when the cursor is placed on an object (either with mouse or keyboard). Also applies to windows onBlur : when the cursor was on the current object, but is then placed somewhere else (opposite of onFocus) onChange : when a value changes onSubmit : when the form is submitted to the server onClick : when a button is clicked onLoad : when a window is loaded onUnload : when a window is closed

onFocus : when the cursor is placed on an object (either with mouse or keyboard). Also applies to windows

onBlur : when the cursor was on the current object, but is then placed somewhere else (opposite of onFocus)

onChange : when a value changes

onSubmit : when the form is submitted to the server

onClick : when a button is clicked

onLoad : when a window is loaded

onUnload : when a window is closed

JavaScript Language Syntax Based on C Case SeNsIvTiVe Ignores whitespaces (Indents, tabs, etc.) Semicolons optional (recommended for good style) Uses // and /*...*/ for comments within the code Variables Declare new ones with a &quot;var&quot; before the name of the variable Refer to existing ones by not using &quot;var&quot; Type can be changed (effectively, a Variant data type)

Based on C

Case SeNsIvTiVe

Ignores whitespaces (Indents, tabs, etc.)

Semicolons optional (recommended for good style)

Uses // and /*...*/ for comments within the code

Variables

Declare new ones with a &quot;var&quot; before the name of the variable

Refer to existing ones by not using &quot;var&quot;

Type can be changed (effectively, a Variant data type)

JavaScript Data Types Numbers Strings (can use single or double quotes) Boolean Values (True, False) Functions Objects Arrays Date/Time Special Object null or undefined REMEMBER: Type can be changed

Numbers

Strings (can use single or double quotes)

Boolean Values (True, False)

Functions

Objects

Arrays

Date/Time Special Object

null or undefined

REMEMBER: Type can be changed

JavaScript Operators Mathematical + - / * ++ (increment) -- (decrement) String Manipulation charAt(index), split(char), substring(start, end) Comparison: == (equals) != (not equal) > < <= >= Logical: && (and) || (or) ! (not) Special: typeOf, this, new

Mathematical + - / * ++ (increment) -- (decrement)

String Manipulation charAt(index), split(char), substring(start, end)

Comparison: == (equals) != (not equal) > < <= >=

Logical: && (and) || (or) ! (not)

Special: typeOf, this, new

JavaScript Control Structures If-then if (condition) { statementsIfTrue } If-then-else if (condition) { statementsIfTrue } else { statementsIfFalse }

If-then

if (condition) {

statementsIfTrue

}

If-then-else

if (condition) {

statementsIfTrue

} else {

statementsIfFalse

}

JavaScript Control Structure (con’t) Conditional Assignment result = (condition) ? expression1 : expression2 For Loops for ([init expr]; [condition]; [update expr]){ statements } For All Element Loops for (var in object) { statements }

Conditional Assignment

result = (condition) ? expression1 : expression2

For Loops

for ([init expr]; [condition]; [update expr]){

statements

}

For All Element Loops

for (var in object) {

statements

}

JavaScript Control Structure (con’t) While while (condition) { statements } With with (object) { statements (.property or .methods } Do do { statements } while (condition)

While

while (condition) {

statements

}

With

with (object) {

statements (.property or .methods

}

Do

do {

statements

} while (condition)

JavaScript Control Structure (con’t) Switch switch (expression) { case valueone : statements [break;] // optional but WATCH OUT. case casevalue2 : statements [break;] // optional but WATCH OUT. ... [default : // optional statements] }

Switch

switch (expression) {

case valueone :

statements

[break;] // optional but WATCH OUT.

case casevalue2 :

statements

[break;] // optional but WATCH OUT.

...

[default : // optional

statements]

}

More JavaScript Statements break continue function return var escape unescape

break

continue

function

return

var

escape

unescape

JavaScript Functions Name of the function List of argument(s) in parenthesis Statements in curly braces function functionName([arg1], [arg2]) { <code goes here> [return value] }

Name of the function

List of argument(s) in parenthesis

Statements in curly braces

Writing a JavaScript function <INPUT type=BUTTON onClick=&quot;document.forms[0].Amount.value='5'; document.forms[0].Amount.focus();&quot;> is more useful and easier to maintain when expressed as... <INPUT type=BUTTON onClick=&quot;setAmount('5')&quot;> <SCRIPT language=&quot;JavaScript&quot;> function setAmount(v) { document.forms[0].Amount.value=v; document.forms[0].Amount.focus(); } </SCRIPT>

New Useful DOM Functions getElementsByTagName(<tagname>) Returns an array of objects getElementById(<id>) Returns a single object Examples: var myTable = document.getElementById(“myTable”) var cells = myTable.getElementsByTagName(“TD”)

getElementsByTagName(<tagname>)

Returns an array of objects

getElementById(<id>)

Returns a single object

Examples:

var myTable = document.getElementById(“myTable”)

var cells = myTable.getElementsByTagName(“TD”)

JavaScript Objects JavaScript is object-based You can optionally create your own classes with: Methods Properties Process Created with the &quot;new&quot; statement Use the &quot;this&quot; reference to refer to the object Use Classes instead of procedural functions

JavaScript is object-based

You can optionally create your own classes with:

Methods

Properties

Process

Created with the &quot;new&quot; statement

Use the &quot;this&quot; reference to refer to the object

Use Classes instead of procedural functions

Example of a JavaScript Object <SCRIPT language=&quot;JavaScript&quot;> function PersonObj(f,m,l,phone,ssn) { this.FirstName = f; this.MiddleName = m; this.LastName = l; this.phone = phone; this.ssn = ( ssn ) ? ssn : ‘-not supplied-’ ; } var theNewbs = new PersonObj(‘Henry’,’W’,’Newberry’,’513-245-1736’); var myBoss = new PersonObj(‘Scott’,’’,’Good’,’614-457-7100 x200’); var theRock = new PersonObj(‘Rockne’,’L’,’Oliver’,’770-967-3803’); alert( “Hey It’s “ + theRock.Firstname ); </SCRIPT>

<SCRIPT language=&quot;JavaScript&quot;>

function PersonObj(f,m,l,phone,ssn) {

this.FirstName = f;

this.MiddleName = m;

this.LastName = l;

this.phone = phone;

this.ssn = ( ssn ) ? ssn : ‘-not supplied-’ ;

}

var theNewbs = new PersonObj(‘Henry’,’W’,’Newberry’,’513-245-1736’);

var myBoss = new PersonObj(‘Scott’,’’,’Good’,’614-457-7100 x200’);

var theRock = new PersonObj(‘Rockne’,’L’,’Oliver’,’770-967-3803’);

alert( “Hey It’s “ + theRock.Firstname );

</SCRIPT>

JavaScript Arrays JavaScript arrays are both indexed lists and tagged lists Index elements 0 ... N Tag names can be used instead Use the square brackets to refer to array elements myArray[0] … myArray[n] myArray[‘rocky’] The new method can initialize multiple elements Var myArray = new (“Rocky”, “Henry”, “Scott”)

JavaScript arrays are both indexed lists and tagged lists

Index elements 0 ... N

Tag names can be used instead

Use the square brackets to refer to array elements

myArray[0] … myArray[n]

myArray[‘rocky’]

The new method can initialize multiple elements

Var myArray = new (“Rocky”, “Henry”, “Scott”)

Getting at the Data on a Page Every Page has a window and document object The Forms object/array is a child of the document object The Form object is the main point of entry to your data May have multiple form instances, Domino generated pages have just one form, document.forms[0] Submit action sends values back to the server

Every Page has a window and document object

The Forms object/array is a child of the document object

The Form object is the main point of entry to your data

May have multiple form instances,

Domino generated pages have just one form, document.forms[0]

Submit action sends values back to the server

Getting at the Data (con’t) Data Fields are contained in a Form object: Text TextArea Selects RadioButtons CheckBoxes When you use a Domino form these will have the same name as their Notes counterparts Children of the Form object Getting field values (textboxes, listboxes, etc.)

Data Fields are contained in a Form object:

Text

TextArea

Selects

RadioButtons

CheckBoxes

When you use a Domino form these will have the same name as their Notes counterparts

Children of the Form object

Getting field values (textboxes, listboxes, etc.)

Debugging Your JavaScript Using alert boxes IE JS Error dialog JavaScript Debuggers The Microsoft script debugger: http://msdn.microsoft.com/scripting/ debugger/dbdown.htm The Netscape JavaScript debugger: http://developer.netscape.com/software/ tools/index.html?content=/software/jsdebug.html only seems to work on scripts that are embedded in the HTML head doesn't like frames and child windows

Using alert boxes

IE JS Error dialog

JavaScript Debuggers

The Microsoft script debugger:

http://msdn.microsoft.com/scripting/ debugger/dbdown.htm

The Netscape JavaScript debugger:

http://developer.netscape.com/software/ tools/index.html?content=/software/jsdebug.html

only seems to work on scripts that are

embedded in the HTML head

doesn't like frames and child windows

Client support for JavaScript Client product JavaScript Level Netscape Navigator 2.x 1.0 MS Internet Explorer 3.x 1.0 Netscape Navigator 3.x 1.1 Netscape Navigator 4.0-4.05 1.2 MS Internet Explorer 4.x 1.2 Netscape Navigator 4.06-4.5 1.3 MS Internet Explorer 5.x 1.3 Lotus Notes 5.x 1.3 Netscape Navigator 5.x 1.4

Client product JavaScript Level

Netscape Navigator 2.x 1.0

MS Internet Explorer 3.x 1.0

Netscape Navigator 3.x 1.1

Netscape Navigator 4.0-4.05 1.2

MS Internet Explorer 4.x 1.2

Netscape Navigator 4.06-4.5 1.3

MS Internet Explorer 5.x 1.3

Lotus Notes 5.x 1.3

Netscape Navigator 5.x 1.4

JavaScript vs. ECMAScript vs. JScript ECMAScript - Standard JavaScript. NetScape's JavaScript &quot;will always include features that are not part of the ECMA specification; JavaScript is compatible with ECMA, while providing additional features.“ Microsoft VBScript is based on Visual Basic Microsoft JScript is like JavaScript, but now IE supports ECMAScript and just about all of JavaScript

ECMAScript - Standard JavaScript. NetScape's JavaScript &quot;will always include features that are not part of the ECMA specification; JavaScript is compatible with ECMA, while providing additional features.“

Microsoft VBScript is based on Visual Basic

Microsoft JScript is like JavaScript, but now IE supports ECMAScript and just about all of JavaScript

Some Advanced Concepts Multiple forms JavaScript libraries, .js files <SCRIPT Language=&quot;JavaScript&quot; src=&quot;/filename.js&quot;> The JavaScript calendar widget LiveConnect - make Java, JavaScript and Plug-Ins interact with one another

Multiple forms

JavaScript libraries, .js files

<SCRIPT Language=&quot;JavaScript&quot; src=&quot;/filename.js&quot;>

The JavaScript calendar widget

LiveConnect - make Java, JavaScript and Plug-Ins interact with one another

validateForm Function function validateForm(f) { recalculateFields(); // call a function if (f.CustomerName.value==&quot;&quot;) { alert(&quot;Please enter your name before submitting this order.&quot;); f.CustomerName.focus(); // put the cursor in field return; // return to where this function was called } else { f.submit(); // submit the form to the server } }

function validateForm(f) {

recalculateFields(); // call a function

if (f.CustomerName.value==&quot;&quot;) {

alert(&quot;Please enter your name before submitting this order.&quot;);

f.CustomerName.focus(); // put the cursor in field

return; // return to where this function was called

} else {

f.submit(); // submit the form to the server

}

}

recalculateFields Function function recalculateFields() { var f = document.forms[0]; // so we don't have to repeatly use the // long expression /* recalculate the unit prices */ var i = f.Description.selectedIndex; // get the position of the selected Description var descriptionName = f.Description.options[i].text; // then, use the position to // get the name var UnitPrice = getUnitPrice( descriptionName ); // finally, use the name to get // the price f.UnitPrice.value = format(UnitPrice, 21, 2); // write the price to text // object's value property /* recalculate the total price */ var t = f.UnitPrice.value * f.Quantity.value; // compute the total price f.Total.value = format(t, 21, 2); // set the Total field's value to // the formatted number t }

function recalculateFields() {

var f = document.forms[0]; // so we don't have to repeatly use the

// long expression

/* recalculate the unit prices */

var i = f.Description.selectedIndex; // get the position of the selected Description

var descriptionName = f.Description.options[i].text; // then, use the position to

// get the name

var UnitPrice = getUnitPrice( descriptionName ); // finally, use the name to get

// the price

f.UnitPrice.value = format(UnitPrice, 21, 2); // write the price to text // object's value property

/* recalculate the total price */

var t = f.UnitPrice.value * f.Quantity.value; // compute the total price

f.Total.value = format(t, 21, 2); // set the Total field's value to

// the formatted number t

}

getUnitPrice Function function getUnitPrice(itemType) { // get the price according to itemType switch (itemType) { case &quot;Lamp&quot;: // if it's a lamp... return 25; // ...then its price is 25 case &quot;Chair&quot;: // etc... return 100; case &quot;Table&quot;: return 400; default : // what to do if the itemType is return 0; // not found, or it's blank } }

function getUnitPrice(itemType) {

// get the price according to itemType

switch (itemType) {

case &quot;Lamp&quot;: // if it's a lamp...

return 25; // ...then its price is 25

case &quot;Chair&quot;: // etc...

return 100;

case &quot;Table&quot;:

return 400;

default : // what to do if the itemType is

return 0; // not found, or it's blank }

}

Things to watch out for! Everything is case sensitive. Standardize! If you accidentally use the same variable name for two objects, JavaScript doesn't tell you. Users may trigger JavaScript events before the page is finished loading. Some statements don't run on all browsers. Test!

Everything is case sensitive. Standardize!

If you accidentally use the same variable name for two objects, JavaScript doesn't tell you.

Users may trigger JavaScript events before the page is finished loading.

Some statements don't run on all browsers.

Test!

Recommended Things to Have at Your Workstation Reference: You must get a good DOM chart Danny Goodman's JS Object Road Map is included in the Session materials as an Adobe file JavaScriptObjectRoadMap.PDF. Prints nicely! Learn more: The JavaScript Bible, Danny Goodman, IDG Books Worldwide, Fourth Edition 2000 Easy code writing: NetObjects Scriptbuilder Netscape Visual JavaScript Testing: The Netscape JavaScript debugger

Reference: You must get a good DOM chart

Danny Goodman's JS Object Road Map is included in the Session materials as an Adobe file JavaScriptObjectRoadMap.PDF. Prints nicely!

Learn more: The JavaScript Bible, Danny Goodman, IDG Books Worldwide, Fourth Edition 2000

Easy code writing:

NetObjects Scriptbuilder

Netscape Visual JavaScript

Testing: The Netscape JavaScript debugger

Find Out More 1000's of JavaScript Examples you can re-use dir.yahoo.com/Computers_and_Internet/Programming_and_Development/Languages/JavaScript/ Danny Goodman's site - Good FAQ’s etc. http://www.dannyg.com Kurt Grigg’s site www.btinternet.com/~kurt.grigg/javascript/ More Samples www.urgentclick.com/javascript.html www.hotscripts.com/JavaScript/index.html

1000's of JavaScript Examples you can re-use

dir.yahoo.com/Computers_and_Internet/Programming_and_Development/Languages/JavaScript/

Danny Goodman's site - Good FAQ’s etc.

http://www.dannyg.com

Kurt Grigg’s site

www.btinternet.com/~kurt.grigg/javascript/

More Samples

www.urgentclick.com/javascript.html

www.hotscripts.com/JavaScript/index.html

Other JS Sessions This Week Notes-to-Web series (Scott Good) Performance Engineering for Domino: How to make your Apps Fly (Jamie MaGee) Websphere Portal: Advanced Portal Development (Rob Novak) Customize IBM Lotus team Workplace (Rob Novak) JavaScript and LotusScript Tricks for Domino Applications (Henry Newberry)

Notes-to-Web series (Scott Good)

Performance Engineering for Domino: How to make your Apps Fly (Jamie MaGee)

Websphere Portal: Advanced Portal Development (Rob Novak)

Customize IBM Lotus team Workplace (Rob Novak)

JavaScript and LotusScript Tricks for Domino Applications (Henry Newberry)

Thank – You Please remember to fill out your evaluations Questions?