Advisor Jumpstart: JavaScript


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Advisor Jumpstart: JavaScript

  1. 1. ADVISOR JumpStart: JavaScript Henry Newberry Teamwork Solutions, Inc. AJL201
  2. 2. Who am I? <ul><li>Director of Technical Services at Teamwork Solutions, Inc. (As of May, 2005) </li></ul><ul><li>Formerly President of Newbs Consulting, Inc. (2000-2005) </li></ul><ul><li>Cofounder of Synergistics, Inc. (1993-2000) </li></ul><ul><li>Notes Pioneer at CBIS (1989-1993) </li></ul><ul><li>Lotus Advisor Contributor and Speaker </li></ul><ul><li>Lotus Advisor Editorial Advisory Panel </li></ul><ul><li>Speaker at IBM Lotus events in 2002 & 2003 </li></ul>
  3. 3. This Session is JavaScript – NOT Java <ul><li>Two different languages for two very different usages </li></ul><ul><li>JAVA jumpstart starts at 10:30 AM </li></ul><ul><li>J2EE – Java 2 Enterprise Edition - 2:00 PM </li></ul>
  4. 4. &quot;...hopefully JavaScript will just be a bad memory.&quot; Iris Associates Lotusphere Europe February 1997 &quot;When users can do everything with JavaScript that they now do with LotusScript on the client-side, we will have reached our goal.&quot; Iris Associates Lotus Notes & Domino Advisor May 1999
  5. 5. &quot;JavaScript is the only viable client side development tool for browser based applications.&quot; Henry Newberry A couple of weeks ago
  6. 6. Session Overview <ul><li>JavaScript overview (10-20 minutes) </li></ul><ul><ul><li>What, Who, Why, When </li></ul></ul><ul><ul><li>Demo of what it can make the browser do </li></ul></ul><ul><li>How to use JavaScript </li></ul><ul><li>References, JavaScript sessions at DevCon </li></ul><ul><li>Questions </li></ul>
  7. 7. What Is JavaScript? <ul><li>Nothing in common with Java! </li></ul><ul><li>Netscape's Navigator 2.0 supported it in 1995 </li></ul><ul><ul><li>formerly LiveScript </li></ul></ul><ul><ul><li>renamed JavaScript </li></ul></ul><ul><ul><li>now properly called ECMAScript – but no one really does that… </li></ul></ul><ul><li>In-line language - the code is included right in with the HTML and data </li></ul><ul><li>Sometimes referred to as &quot;Dynamic HTML&quot; </li></ul><ul><li>Interpreted (not compiled) scripting language </li></ul><ul><li>It makes the browser into a true web client </li></ul>
  8. 8. Why use JavaScript? Advantages: <ul><li>Many traditional client/server features are not available on the web due to browser limitations </li></ul><ul><li>JavaScript helps fill in most of the gaps </li></ul><ul><ul><li>Calculations, dynamic redirecting & submitting </li></ul></ul><ul><ul><li>Field, form, and window event handlers </li></ul></ul><ul><ul><li>Pop-up dialogs, new windows, framesets </li></ul></ul><ul><ul><li>Dynamic graphics and mouse rollover events </li></ul></ul><ul><li>Improved Performance </li></ul><ul><ul><li>Browser can perform certain functions instead of having to submit and wait for the server </li></ul></ul>
  9. 9. Examples in this session will… <ul><li>Demonstrate how it runs from the user's perspective </li></ul><ul><li>Show you what the code looks like </li></ul><ul><li>Explain the code </li></ul><ul><li>Answer any questions </li></ul>
  10. 10. Demonstration of JavaScript Capabilities <ul><li>Validating user input </li></ul><ul><li>Automatically recalculating values on the form </li></ul><ul><li>Prompting the user for a reply </li></ul><ul><li>Setting fields </li></ul><ul><li>Dynamic keywords </li></ul><ul><li>Launching a new window </li></ul><ul><li>Changing graphics </li></ul><ul><li>Displaying Layers </li></ul><ul><li>Others </li></ul><ul><ul><li>Cookies (storing values on the workstation) </li></ul></ul><ul><ul><li>Collapse-able sections </li></ul></ul><ul><ul><li>Getting and rendering XML </li></ul></ul>
  11. 11. Why not use JavaScript? Some Disadvantages... <ul><li>Does not work the same on all browsers </li></ul><ul><li>Can be disabled by the user on their browser </li></ul><ul><li>Source code can not be protected </li></ul><ul><ul><li>Good if you're looking to borrow some code </li></ul></ul><ul><ul><li>Bad for product development efforts </li></ul></ul>
  12. 12. Put JavaScript anywhere you put HTML <ul><li>Between SCRIPT tags (runs when page opens) </li></ul><ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;>alert(&quot;you opened this page&quot;);</SCRIPT> </li></ul></ul><ul><li>Defining Event Handlers (runs when user clicks button) </li></ul><ul><ul><li><input type=Button value=&quot;Click Here&quot; onClick=&quot;alert('you clicked this button.');&quot;> </li></ul></ul><ul><li>Using javascript: protocol (runs when user clicks image) </li></ul><ul><ul><li><img src=&quot;/ImageFile.jpg&quot; href=&quot;javascript:alert('you clicked this image.');&quot;> </li></ul></ul>
  13. 13. Document Object Model (DOM)
  14. 15. Jamie's &quot;Mini DOM&quot; Example of referencing an object: document.forms[0].TextName.value
  15. 16. Properties <ul><li>Tell you something about the object </li></ul><ul><li>Can be read or written (usually) </li></ul><ul><li>Can lead to values or other objects in the DOM </li></ul><ul><ul><li>document.forms is an array of objects of the class called “form” </li></ul></ul><ul><ul><li>document.title is text </li></ul></ul>
  16. 17. Methods <ul><li>Are actions that you can tell the object to do </li></ul><ul><li>Methods always have parenthesis: </li></ul><ul><ul><li>form.submit() </li></ul></ul><ul><li>Methods may take parameters (arguments) between parenthesis: </li></ul><ul><ul><li>window.back( ) </li></ul></ul><ul><ul><li>window.alert(&quot;this is a message in a popup box&quot;) </li></ul></ul>
  17. 18. Events <ul><li>Events are Things that Happen to an Object </li></ul><ul><li>JavaScript Code can be designed to execute when the event occurs </li></ul><ul><li>A JavaScript Method can direct which code executes when an event occurs on an object </li></ul>
  18. 19. The Main Events <ul><li>onFocus : when the cursor is placed on an object (either with mouse or keyboard). Also applies to windows </li></ul><ul><li>onBlur : when the cursor was on the current object, but is then placed somewhere else (opposite of onFocus) </li></ul><ul><li>onChange : when a value changes </li></ul><ul><li>onSubmit : when the form is submitted to the server </li></ul><ul><li>onClick : when a button is clicked </li></ul><ul><li>onLoad : when a window is loaded </li></ul><ul><li>onUnload : when a window is closed </li></ul>
  19. 20. JavaScript Language Syntax <ul><li>Based on C </li></ul><ul><ul><li>Case SeNsIvTiVe </li></ul></ul><ul><ul><li>Ignores whitespaces (Indents, tabs, etc.) </li></ul></ul><ul><ul><li>Semicolons optional (recommended for good style) </li></ul></ul><ul><ul><li>Uses // and /*...*/ for comments within the code </li></ul></ul><ul><li>Variables </li></ul><ul><ul><li>Declare new ones with a &quot;var&quot; before the name of the variable </li></ul></ul><ul><ul><li>Refer to existing ones by not using &quot;var&quot; </li></ul></ul><ul><ul><li>Type can be changed (effectively, a Variant data type) </li></ul></ul>
  20. 21. JavaScript Data Types <ul><li>Numbers </li></ul><ul><li>Strings (can use single or double quotes) </li></ul><ul><li>Boolean Values (True, False) </li></ul><ul><li>Functions </li></ul><ul><li>Objects </li></ul><ul><li>Arrays </li></ul><ul><li>Date/Time Special Object </li></ul><ul><li>null or undefined </li></ul><ul><li>REMEMBER: Type can be changed </li></ul>
  21. 22. JavaScript Operators <ul><li>Mathematical + - / * ++ (increment) -- (decrement) </li></ul><ul><li>String Manipulation charAt(index), split(char), substring(start, end) </li></ul><ul><li>Comparison: == (equals) != (not equal) > < <= >= </li></ul><ul><li>Logical: && (and) || (or) ! (not) </li></ul><ul><li>Special: typeOf, this, new </li></ul>
  22. 23. JavaScript Control Structures <ul><li>If-then </li></ul><ul><ul><li>if (condition) { </li></ul></ul><ul><ul><li>statementsIfTrue </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>If-then-else </li></ul><ul><ul><li>if (condition) { </li></ul></ul><ul><ul><li>statementsIfTrue </li></ul></ul><ul><ul><li>} else { </li></ul></ul><ul><ul><li>statementsIfFalse </li></ul></ul><ul><ul><li>} </li></ul></ul>
  23. 24. JavaScript Control Structure (con’t) <ul><li>Conditional Assignment </li></ul><ul><ul><li>result = (condition) ? expression1 : expression2 </li></ul></ul><ul><li>For Loops </li></ul><ul><ul><li>for ([init expr]; [condition]; [update expr]){ </li></ul></ul><ul><ul><li>statements </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>For All Element Loops </li></ul><ul><ul><li>for (var in object) { </li></ul></ul><ul><ul><li>statements </li></ul></ul><ul><ul><li>} </li></ul></ul>
  24. 25. JavaScript Control Structure (con’t) <ul><li>While </li></ul><ul><ul><li>while (condition) { </li></ul></ul><ul><ul><li>statements </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>With </li></ul><ul><ul><li>with (object) { </li></ul></ul><ul><ul><li>statements (.property or .methods </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Do </li></ul><ul><ul><li>do { </li></ul></ul><ul><ul><li>statements </li></ul></ul><ul><ul><li>} while (condition) </li></ul></ul>
  25. 26. JavaScript Control Structure (con’t) <ul><li>Switch </li></ul><ul><ul><li>switch (expression) { </li></ul></ul><ul><ul><li>case valueone : </li></ul></ul><ul><ul><li>statements </li></ul></ul><ul><ul><li>[break;] // optional but WATCH OUT. </li></ul></ul><ul><ul><li>case casevalue2 : </li></ul></ul><ul><ul><li>statements </li></ul></ul><ul><ul><li>[break;] // optional but WATCH OUT. </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li>[default : // optional </li></ul></ul><ul><ul><li>statements] </li></ul></ul><ul><ul><li>} </li></ul></ul>
  26. 27. More JavaScript Statements <ul><li>break </li></ul><ul><li>continue </li></ul><ul><li>function </li></ul><ul><li>return </li></ul><ul><li>var </li></ul><ul><li>escape </li></ul><ul><li>unescape </li></ul>
  27. 28. JavaScript Functions <ul><li>Name of the function </li></ul><ul><li>List of argument(s) in parenthesis </li></ul><ul><li>Statements in curly braces </li></ul>function functionName([arg1], [arg2]) { <code goes here> [return value] }
  28. 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>
  29. 30. New Useful DOM Functions <ul><li>getElementsByTagName(<tagname>) </li></ul><ul><ul><li>Returns an array of objects </li></ul></ul><ul><li>getElementById(<id>) </li></ul><ul><ul><li>Returns a single object </li></ul></ul><ul><li>Examples: </li></ul><ul><ul><ul><li>var myTable = document.getElementById(“myTable”) </li></ul></ul></ul><ul><ul><ul><li>var cells = myTable.getElementsByTagName(“TD”) </li></ul></ul></ul>
  30. 31. JavaScript Objects <ul><li>JavaScript is object-based </li></ul><ul><li>You can optionally create your own classes with: </li></ul><ul><ul><li>Methods </li></ul></ul><ul><ul><li>Properties </li></ul></ul><ul><li>Process </li></ul><ul><ul><li>Created with the &quot;new&quot; statement </li></ul></ul><ul><ul><li>Use the &quot;this&quot; reference to refer to the object </li></ul></ul><ul><li>Use Classes instead of procedural functions </li></ul>
  31. 32. Example of a JavaScript Object <ul><li><SCRIPT language=&quot;JavaScript&quot;> </li></ul><ul><li>function PersonObj(f,m,l,phone,ssn) { </li></ul><ul><li>this.FirstName = f; </li></ul><ul><li>this.MiddleName = m; </li></ul><ul><li>this.LastName = l; </li></ul><ul><li> = phone; </li></ul><ul><li>this.ssn = ( ssn ) ? ssn : ‘-not supplied-’ ; </li></ul><ul><li>} </li></ul><ul><li>var theNewbs = new PersonObj(‘Henry’,’W’,’Newberry’,’513-245-1736’); </li></ul><ul><li>var myBoss = new PersonObj(‘Scott’,’’,’Good’,’614-457-7100 x200’); </li></ul><ul><li>var theRock = new PersonObj(‘Rockne’,’L’,’Oliver’,’770-967-3803’); </li></ul><ul><li>alert( “Hey It’s “ + theRock.Firstname ); </li></ul><ul><li></SCRIPT> </li></ul>
  32. 33. JavaScript Arrays <ul><li>JavaScript arrays are both indexed lists and tagged lists </li></ul><ul><ul><li>Index elements 0 ... N </li></ul></ul><ul><ul><li>Tag names can be used instead </li></ul></ul><ul><li>Use the square brackets to refer to array elements </li></ul><ul><ul><li>myArray[0] … myArray[n] </li></ul></ul><ul><ul><li>myArray[‘rocky’] </li></ul></ul><ul><li>The new method can initialize multiple elements </li></ul><ul><ul><li>Var myArray = new (“Rocky”, “Henry”, “Scott”) </li></ul></ul>
  33. 34. Getting at the Data on a Page <ul><li>Every Page has a window and document object </li></ul><ul><li>The Forms object/array is a child of the document object </li></ul><ul><li>The Form object is the main point of entry to your data </li></ul><ul><ul><li>May have multiple form instances, </li></ul></ul><ul><ul><li>Domino generated pages have just one form, document.forms[0] </li></ul></ul><ul><ul><li>Submit action sends values back to the server </li></ul></ul>
  34. 35. Getting at the Data (con’t) <ul><li>Data Fields are contained in a Form object: </li></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>TextArea </li></ul></ul><ul><ul><li>Selects </li></ul></ul><ul><ul><li>RadioButtons </li></ul></ul><ul><ul><li>CheckBoxes </li></ul></ul><ul><li>When you use a Domino form these will have the same name as their Notes counterparts </li></ul><ul><ul><li>Children of the Form object </li></ul></ul><ul><ul><li>Getting field values (textboxes, listboxes, etc.) </li></ul></ul>
  35. 36. Debugging Your JavaScript <ul><li>Using alert boxes </li></ul><ul><li>IE JS Error dialog </li></ul><ul><li>JavaScript Debuggers </li></ul><ul><ul><li>The Microsoft script debugger: </li></ul></ul><ul><ul><ul><li> debugger/dbdown.htm </li></ul></ul></ul><ul><ul><li>The Netscape JavaScript debugger: </li></ul></ul><ul><ul><ul><li> tools/index.html?content=/software/jsdebug.html </li></ul></ul></ul><ul><ul><ul><li>only seems to work on scripts that are </li></ul></ul></ul><ul><ul><ul><li>embedded in the HTML head </li></ul></ul></ul><ul><ul><ul><li>doesn't like frames and child windows </li></ul></ul></ul>
  36. 37. Client support for JavaScript <ul><li>Client product JavaScript Level </li></ul><ul><li>Netscape Navigator 2.x 1.0 </li></ul><ul><li>MS Internet Explorer 3.x 1.0 </li></ul><ul><li>Netscape Navigator 3.x 1.1 </li></ul><ul><li>Netscape Navigator 4.0-4.05 1.2 </li></ul><ul><li>MS Internet Explorer 4.x 1.2 </li></ul><ul><li>Netscape Navigator 4.06-4.5 1.3 </li></ul><ul><li>MS Internet Explorer 5.x 1.3 </li></ul><ul><li>Lotus Notes 5.x 1.3 </li></ul><ul><li>Netscape Navigator 5.x 1.4 </li></ul>
  37. 38. JavaScript vs. ECMAScript vs. JScript <ul><li>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.“ </li></ul><ul><li>Microsoft VBScript is based on Visual Basic </li></ul><ul><li>Microsoft JScript is like JavaScript, but now IE supports ECMAScript and just about all of JavaScript </li></ul>
  38. 39. Some Advanced Concepts <ul><li>Multiple forms </li></ul><ul><li>JavaScript libraries, .js files </li></ul><ul><ul><li><SCRIPT Language=&quot;JavaScript&quot; src=&quot;/filename.js&quot;> </li></ul></ul><ul><li>The JavaScript calendar widget </li></ul><ul><li>LiveConnect - make Java, JavaScript and Plug-Ins interact with one another </li></ul>
  39. 40. validateForm Function <ul><li>function validateForm(f) { </li></ul><ul><li>recalculateFields(); // call a function </li></ul><ul><li>if (f.CustomerName.value==&quot;&quot;) { </li></ul><ul><li>alert(&quot;Please enter your name before submitting this order.&quot;); </li></ul><ul><li>f.CustomerName.focus(); // put the cursor in field </li></ul><ul><li>return; // return to where this function was called </li></ul><ul><li>} else { </li></ul><ul><li>f.submit(); // submit the form to the server </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  40. 41. recalculateFields Function <ul><li>function recalculateFields() { </li></ul><ul><li>var f = document.forms[0]; // so we don't have to repeatly use the </li></ul><ul><li>// long expression </li></ul><ul><li>/* recalculate the unit prices */ </li></ul><ul><li>var i = f.Description.selectedIndex; // get the position of the selected Description </li></ul><ul><li>var descriptionName = f.Description.options[i].text; // then, use the position to </li></ul><ul><li>// get the name </li></ul><ul><li>var UnitPrice = getUnitPrice( descriptionName ); // finally, use the name to get </li></ul><ul><li>// the price </li></ul><ul><li>f.UnitPrice.value = format(UnitPrice, 21, 2); // write the price to text // object's value property </li></ul><ul><li>/* recalculate the total price */ </li></ul><ul><li>var t = f.UnitPrice.value * f.Quantity.value; // compute the total price </li></ul><ul><li>f.Total.value = format(t, 21, 2); // set the Total field's value to </li></ul><ul><li>// the formatted number t </li></ul><ul><li>} </li></ul>
  41. 42. getUnitPrice Function <ul><li>function getUnitPrice(itemType) { </li></ul><ul><li>// get the price according to itemType </li></ul><ul><li>switch (itemType) { </li></ul><ul><li>case &quot;Lamp&quot;: // if it's a lamp... </li></ul><ul><li>return 25; // ...then its price is 25 </li></ul><ul><li>case &quot;Chair&quot;: // etc... </li></ul><ul><li>return 100; </li></ul><ul><li>case &quot;Table&quot;: </li></ul><ul><li>return 400; </li></ul><ul><li>default : // what to do if the itemType is </li></ul><ul><li>return 0; // not found, or it's blank } </li></ul><ul><li>} </li></ul>
  42. 43. Things to watch out for! <ul><li>Everything is case sensitive. Standardize! </li></ul><ul><li>If you accidentally use the same variable name for two objects, JavaScript doesn't tell you. </li></ul><ul><li>Users may trigger JavaScript events before the page is finished loading. </li></ul><ul><li>Some statements don't run on all browsers. </li></ul><ul><li>Test! </li></ul>
  43. 44. Recommended Things to Have at Your Workstation <ul><li>Reference: You must get a good DOM chart </li></ul><ul><ul><li>Danny Goodman's JS Object Road Map is included in the Session materials as an Adobe file JavaScriptObjectRoadMap.PDF. Prints nicely! </li></ul></ul><ul><li>Learn more: The JavaScript Bible, Danny Goodman, IDG Books Worldwide, Fourth Edition 2000 </li></ul><ul><li>Easy code writing: </li></ul><ul><ul><li>NetObjects Scriptbuilder </li></ul></ul><ul><ul><li>Netscape Visual JavaScript </li></ul></ul><ul><li>Testing: The Netscape JavaScript debugger </li></ul>
  44. 45. Find Out More <ul><li>1000's of JavaScript Examples you can re-use </li></ul><ul><li> </li></ul><ul><li>Danny Goodman's site - Good FAQ’s etc. </li></ul><ul><ul><li> </li></ul></ul><ul><li>Kurt Grigg’s site </li></ul><ul><ul><li> </li></ul></ul><ul><li>More Samples </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul>
  45. 46. Other JS Sessions This Week <ul><li>Notes-to-Web series (Scott Good) </li></ul><ul><li>Performance Engineering for Domino: How to make your Apps Fly (Jamie MaGee) </li></ul><ul><li>Websphere Portal: Advanced Portal Development (Rob Novak) </li></ul><ul><li>Customize IBM Lotus team Workplace (Rob Novak) </li></ul><ul><li>JavaScript and LotusScript Tricks for Domino Applications (Henry Newberry) </li></ul>
  46. 47. Thank – You Please remember to fill out your evaluations Questions?