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

Advisor Jumpstart: JavaScript

  • 2,423 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,423
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
45
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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?