• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Advisor Jumpstart: JavaScript
 

Advisor Jumpstart: JavaScript

on

  • 3,123 views

 

Statistics

Views

Total Views
3,123
Views on SlideShare
3,121
Embed Views
2

Actions

Likes
0
Downloads
44
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 Advisor Jumpstart: JavaScript Presentation Transcript

    • 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
    • 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
    • "...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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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;>
    • 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
    • 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;)
    • 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
    • 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
    • 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)
    • 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
    • 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
    • JavaScript Control Structures
      • 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
        • }
    • JavaScript Control Structure (con’t)
      • 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]
        • }
    • More JavaScript Statements
      • 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] }
    • 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”)
    • 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
    • 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>
    • 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”)
    • 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
    • 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.)
    • 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
    • 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
    • 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
    • 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
    • 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
      • }
      • }
    • 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
      • }
    • 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 }
      • }
    • 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!
    • 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
    • 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
    • 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)
    • Thank – You Please remember to fill out your evaluations Questions?