JavaScript for FoxPro
    Developers

     Mike Feltman
    F1 Technologies
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
Agenda
   Why JavaScript?
   VFP vs. JavaScript
   JS Basics
   JS Syntax & VFP Concordance
   JS OOP
   AJAX w/ VFP
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
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
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”
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.
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”
Syntax
VFP                        JavaScript
     Line Terminator:          Line Terminator: semi-
      carriage return            colon
     Line Continuation:        Line Continuation: n/a
      semi-colon
Math Operators

Function            VFP      JavaScript
Addition            +        +
Subtraction         -        -
Multiplication      *        *
Division            /        /
Modulus             MOD()    %
Unary addition      x=x+1    x++
Unary subtraction   x=x-1    x--
Assignment Operators
Function         VFP      JavaScript
Equality         =        =
Addition         n/a      +=

Subtraction      n/a      -=
Multiplication   n/a      *=
Division         n/a      /=
Modulus          n/a      %=
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
Logical Operators
Function      VFP        JavaScript
And           AND        &&
Or            OR         ||

Not           NOT, !     !
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
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)}
Constructs: While
VFP                    JavaScript
 DO WHILE expression     while (expression)
  statement(s)           {
 ENDDO
                            statement(s)
                         }

 EXIT                  break
 LOOP                  continue
Constructs: For
VFP                      JavaScript
 FOR var = n to n STEP n   for
  statements               (var=startvalue;var<=
 ENDFOR                    endvalue;var=var+inc
                           rement)
                           {
                               statement(s)
                           }
Constructs: CASE
VFP               JavaScript
 DO CASE            switch (expression)
 CASE condition     {
                    case value:
  statements
                      statement(s)
 OTHERWISE
                      break;
  statements
                    default:
 ENDCASE              statement(s)
                    }
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
VFP JavaScript Event
            Concordance
JavaScript         VFP
  onload             load, init
  onmousedown        mousedown
  onmousemove        mousemove
  onmouseout         mouseleave
  onmouseover        mouseenter
  onmouseup          mouseup
  onreset            n/a
VFP JavaScript Event
            Concordance
JavaScript         VFP
  onresize           resize
  onselect           n/a
  onsubmit           n/a
  onunload           unload
Event Binding
VFP                    JavaScript
 Inline                  Inline
 BindEvents()            document.observe()

                        .addEventListener(‘ev
                        ent’,function,false)
OOP
VFP                         JavaScript
 Class Based                  Prototype based
 Objects are instances of     Objects are based on a
   classes                      prototype
Object Model
VFP              JavaScript
 _SCREEN           DOM (Document Object
 _VFP                Model)
                   document
                   window
                   Browser Dependent
Using External Code
VFP                  JavaScript
 SET PROCEDURE         <script … src=‘file
 SET CLASS LIBRARY       name’>
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
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
Conclusion
   JavaScript is a flexible, powerful language
   JavaScript should be easy for VFP
    developers to learn
   Free 3rd Party Tools make JavaScript
    much easier
Thank You
   Mikefeltman at f1tech dot com
   http://www.f1tech.com
   http://f1technologies.blogspot.com/
   419-255-6366

Feltman js4 vfp

  • 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