Advisor Jumpstart: JavaScript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Advisor Jumpstart: JavaScript

on

  • 3,286 views

 

Statistics

Views

Total Views
3,286
Views on SlideShare
3,284
Embed Views
2

Actions

Likes
0
Downloads
45
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Advisor Jumpstart: JavaScript Presentation Transcript

  • 1. ADVISOR JumpStart: JavaScript Henry Newberry Teamwork Solutions, Inc. www.teamsol.com AJL201
  • 2. 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
  • 3. 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
  • 4. "...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
  • 5. "JavaScript is the only viable client side development tool for browser based applications." Henry Newberry A couple of weeks ago
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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;>
  • 13. Document Object Model (DOM)
  • 14.  
  • 15. Jamie's &quot;Mini DOM&quot; Example of referencing an object: document.forms[0].TextName.value
  • 16. 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
  • 17. 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;)
  • 18. 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
  • 19. 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
  • 20. 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)
  • 21. 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
  • 22. 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
  • 23. JavaScript Control Structures
    • If-then
      • if (condition) {
      • statementsIfTrue
      • }
    • If-then-else
      • if (condition) {
      • statementsIfTrue
      • } else {
      • statementsIfFalse
      • }
  • 24. 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
      • }
  • 25. JavaScript Control Structure (con’t)
    • While
      • while (condition) {
      • statements
      • }
    • With
      • with (object) {
      • statements (.property or .methods
      • }
    • Do
      • do {
      • statements
      • } while (condition)
  • 26. 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]
      • }
  • 27. More JavaScript Statements
    • break
    • continue
    • function
    • return
    • var
    • escape
    • unescape
  • 28. 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] }
  • 29. 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>
  • 30. 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”)
  • 31. 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
  • 32. 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>
  • 33. 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”)
  • 34. 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
  • 35. 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.)
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. 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
    • }
    • }
  • 41. 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
    • }
  • 42. 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 }
    • }
  • 43. 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!
  • 44. 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
  • 45. 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
  • 46. 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)
  • 47. Thank – You Please remember to fill out your evaluations Questions?