The Javascript session I meant to upload

1. JavaScript for FoxPro
Developers
Mike Feltman
F1 Technologies

2. Who Am I?
 President F1 Technologies since 1990
 Co-author Visual FoxExpress
 Consultant
 Xbase Developer since dBase III/FoxBase
1987
 Web Developer since 1994
 JavaScript for about 2-3 years

3. Agenda
 Why JavaScript?
 VFP vs. JavaScript
 JS Basics
 JS Syntax & VFP Concordance
 JS OOP
 AJAX w/ VFP

4. Why JavaScript?
 Web 2.0
 Great way to take VFP Skills to the Web
 In demand
 Cross-Platform
 Relatively easy for VFP Developers to pick
up

5. Capabilities
VFP JavaScript
 Access to File System  No File System Access
 Database Engine  Can’t read or write to
files on server
 Network access limited
only by network security  Can’t read or write to
files on client
 Hundreds of commands
& functions  No network access
 Cannot access pages
on another domain
 Around 50 command
and functions

6. Runtime Environment
VFP JavaScript
 Operating System:  Operating System:
 Windows  Windows, MAC, Linux,
Version: Unix, etc.
 VFP Compiler Version Version:
 Browser Controlled:
Firefox, Safari, Chrome,
IE, Opera, etc.
 1.5 current “standard”

7. Development Environment
VFP JavaScript
 Designers: Editor,  Designers: n/a, Requires 3rd
Form Class Designer, Party tools. No definitive
Report Write, Class IDE
Browser, etc. built-in.  Debugger: virtually nothing
native. Varies by browser,
 Debugger: Integrated Firebug for Firefox and
debugger, with Trace, Debugbar for IE.
Watch, Locals, Output,  JavaScript Console various
Call Stack other Command Window
 Command Window like utilities.

8. Language Features
VFP JavaScript
 Dynamically Typed  Dynamically Typed
 Case Insensitive  Case Sensitive
 “Second Class” Functions  First Class Functions
 No Nested Functions  Nested Functions
 Compiled or Interpreted  Interpreted
 Procedural  Procedural
 OOP: Class Based  OOP: Prototype based
 “1 based”  “0 based”

9. Syntax
VFP JavaScript
 Line Terminator:  Line Terminator: semi-
carriage return colon
 Line Continuation:  Line Continuation: n/a
semi-colon

10. Math Operators
Function VFP JavaScript
Addition + +
Subtraction - -
Multiplication * *
Division / /
Modulus MOD() %
Unary addition x=x+1 x++
Unary subtraction x=x-1 x--

11. Assignment Operators
Function VFP JavaScript
Equality = =
Addition n/a +=
Subtraction n/a -=
Multiplication n/a *=
Division n/a /=
Modulus n/a %=

12. Comparison Operators
Function VFP JavaScript
Equality =,== ==
Greater than >, >= >, >=
Less Than <, <= <, <=
Identical & of n/a ===
Same Type
Not Identical !=,!==,<> !==
Inline IF IIF() (condition)?true
value: false value

13. Logical Operators
Function VFP JavaScript
And AND &&
Or OR ||
Not NOT, ! !

14. Data Types
VFP JavaScript
Character, Memo, String, Numeric,
Numeric, Memo, Boolean, Object, Array
Integer, Currency,
Float, Double, Data,
DateTime, Object,
Screen, General,
Logical, Blob, Array

15. Constructs: If
VFP: JavaScript:
IF <expr> if (logical expression)
statement(s) {statement(s)}
ELSE else if (logical
statement(s) expression)
ENDIF {statements}
else
{statement(s)}

16. Constructs: While
VFP JavaScript
DO WHILE expression while (expression)
statement(s) {
ENDDO
statement(s)
}
EXIT break
LOOP continue

17. Constructs: For
VFP JavaScript
FOR var = n to n STEP n for
statements (var=startvalue;var<=
ENDFOR endvalue;var=var+inc
rement)
{
statement(s)
}

18. Constructs: CASE
VFP JavaScript
DO CASE switch (expression)
CASE condition {
case value:
statements
statement(s)
OTHERWISE
break;
statements
default:
ENDCASE statement(s)
}

19. VFP JavaScript Event
Concordance
JavaScript VFP
onabort n/a
onblur lostfocus
onchange interactivechange
onclick click
ondblclick dblclick
onerror ON ERROR, Error
onfocus gotfocus
onkeydown, onkeyup keypress

20. VFP JavaScript Event
Concordance
JavaScript VFP
onload load, init
onmousedown mousedown
onmousemove mousemove
onmouseout mouseleave
onmouseover mouseenter
onmouseup mouseup
onreset n/a

21. VFP JavaScript Event
Concordance
JavaScript VFP
onresize resize
onselect n/a
onsubmit n/a
onunload unload

22. Event Binding
VFP JavaScript
Inline Inline
BindEvents() document.observe()
.addEventListener(‘ev
ent’,function,false)

23. OOP
VFP JavaScript
Class Based Prototype based
Objects are instances of Objects are based on a
classes prototype

24. Object Model
VFP JavaScript
_SCREEN DOM (Document Object
_VFP Model)
document
window
Browser Dependent

25. Using External Code
VFP JavaScript
SET PROCEDURE <script … src=‘file
SET CLASS LIBRARY name’>

26. 3rd Party
VFP JavaScript (all free)
 Only 1 good Prototype &
framework Script.aculo.us (&
 Sort of expensive (but scripteka.com)
well worth it – really) JQuery
YUI (Yahoo User
Interface)
Adobe Spry
Google

27. JavaScript Resources
 JavaScript
 http://javascript.crockford.com/
 The JavaScript Anthology: 101 Essential Tips,
Tricks & Hacks (Sitepoint.com)
 http://www.javascript.com/
 http://javascript.internet.com/
 http://www.javascriptkit.com/
 http://www.w3schools.com/jsref/default.asp
 Prototypejs.org
 Prototype and script.aculo.us: You never knew JavaScript could do this!
(PragProg.com)
 Script.aculo.us

28. Conclusion
 JavaScript is a flexible, powerful language
 JavaScript should be easy for VFP
developers to learn
 Free 3rd Party Tools make JavaScript
much easier

29. Thank You
 Mikefeltman at f1tech dot com
 http://www.f1tech.com
 http://f1technologies.blogspot.com/
 419-255-6366