Feltman js4 vfp

JavaScript for FoxPro JavaScript for FoxPro DevelopersDevelopers

Mike FeltmanMike Feltman

F1 TechnologiesF1 Technologies

Who Am I?Who Am I? President F1 Technologies since 1990President F1 Technologies since 1990 Co-author Visual FoxExpressCo-author Visual FoxExpress ConsultantConsultant Xbase Developer since dBase Xbase Developer since dBase

III/FoxBase 1987III/FoxBase 1987 Web Developer since 1994Web Developer since 1994 JavaScript for about 2-3 yearsJavaScript for about 2-3 years

AgendaAgenda

Why JavaScript?Why JavaScript? VFP vs. JavaScriptVFP vs. JavaScript JS BasicsJS Basics JS Syntax & VFP ConcordanceJS Syntax & VFP Concordance JS OOPJS OOP AJAX w/ VFPAJAX w/ VFP

Why JavaScript?Why JavaScript? Web 2.0Web 2.0 Great way to take VFP Skills to the Great way to take VFP Skills to the

WebWeb In demandIn demand Cross-PlatformCross-Platform Relatively easy for VFP Developers to Relatively easy for VFP Developers to

pick uppick up

CapabilitiesCapabilitiesVFPVFP

Access to File SystemAccess to File System Database EngineDatabase Engine Network access Network access

limited only by limited only by network securitynetwork security

Hundreds of Hundreds of commands & commands & functionsfunctions

JavaScriptJavaScript No File System AccessNo File System Access Can’t read or write to Can’t read or write to

files on serverfiles on server Can’t read or write to Can’t read or write to

files on clientfiles on client No network accessNo network access Cannot access pages Cannot access pages

on another domainon another domain Around 50 command Around 50 command

and functionsand functions

Runtime EnvironmentRuntime Environment

VFPVFP Operating System:Operating System:

WindowsWindows

Version:Version: VFP Compiler VFP Compiler

VersionVersion

JavaScriptJavaScript Operating System:Operating System:

Windows, MAC, Linux, Windows, MAC, Linux, Unix, etc.Unix, etc.

Version:Version: Browser Controlled: Browser Controlled:

Firefox, Safari, Firefox, Safari, Chrome, IE, Opera, Chrome, IE, Opera, etc.etc.

1.5 current “standard”1.5 current “standard”

Development EnvironmentDevelopment Environment

VFPVFP Designers: Editor, Designers: Editor,

Form Class Designer, Form Class Designer, Report Write, Class Report Write, Class Browser, etc. built-in.Browser, etc. built-in.

Debugger: Integrated Debugger: Integrated debugger, with Trace, debugger, with Trace, Watch, Locals, Watch, Locals, Output, Call StackOutput, Call Stack

Command WindowCommand Window

JavaScriptJavaScript Designers: n/a, Requires Designers: n/a, Requires

33rdrd Party tools. No Party tools. No definitive IDEdefinitive IDE

Debugger: virtually Debugger: virtually nothing native. Varies by nothing native. Varies by browser, browser, FirebugFirebug for for Firefox and Firefox and DebugbarDebugbar for for IE.IE.

JavaScript Console various JavaScript Console various other Command Window other Command Window like utilities.like utilities.

Language FeaturesLanguage Features

VFP VFP Dynamically TypedDynamically Typed Case InsensitiveCase Insensitive ““Second Class” Second Class”

FunctionsFunctions No Nested FunctionsNo Nested Functions Compiled or InterpretedCompiled or Interpreted ProceduralProcedural OOP: Class BasedOOP: Class Based ““1 based”1 based”

JavaScriptJavaScript Dynamically TypedDynamically Typed Case SensitiveCase Sensitive First Class FunctionsFirst Class Functions Nested FunctionsNested Functions InterpretedInterpreted ProceduralProcedural OOP: Prototype basedOOP: Prototype based ““0 based”0 based”

SyntaxSyntax

VFPVFP Line Terminator: Line Terminator:

carriage returncarriage return Line Continuation: Line Continuation:

semi-colonsemi-colon

JavaScriptJavaScript Line Terminator: Line Terminator:

semi-colonsemi-colon Line Continuation: Line Continuation:

n/an/a

Math OperatorsMath Operators

FunctionFunction VFPVFP JavaScriptJavaScriptAdditionAddition ++ ++

SubtractionSubtraction -- --

MultiplicationMultiplication ** **

DivisionDivision // //

ModulusModulus MOD()MOD() %%

Unary additionUnary addition x=x+1x=x+1 x++x++

Unary Unary subtractionsubtraction

x=x-1x=x-1 x--x--

Assignment OperatorsAssignment Operators

FunctionFunction VFPVFP JavaScriptJavaScriptEqualityEquality == ==

AdditionAddition n/an/a +=+=

SubtractionSubtraction n/an/a -=-=

MultiplicationMultiplication n/an/a *=*=

DivisionDivision n/an/a /=/=

ModulusModulus n/an/a %=%=

Comparison OperatorsComparison Operators

FunctionFunction VFPVFP JavaScriptJavaScriptEqualityEquality =,===,== ====

Greater thanGreater than >, >=>, >= >, >=>, >=

Less ThanLess Than <, <=<, <= <, <=<, <=

Identical & of Identical & of Same TypeSame Type

n/an/a ======

Not IdenticalNot Identical !=,!==,<>!=,!==,<> !==!==

Inline IFInline IF IIF()IIF() (condition)?true (condition)?true value: false value: false valuevalue

Logical OperatorsLogical Operators

FunctionFunction VFPVFP JavaScriptJavaScriptAndAnd ANDAND &&&&

OrOr OROR ||||

NotNot NOT, !NOT, ! !!

Data TypesData Types

VFPVFPCharacter, Memo, Character, Memo,

Numeric, Memo, Numeric, Memo, Integer, Currency, Integer, Currency, Float, Double, Data, Float, Double, Data, DateTime, Object, DateTime, Object, Screen, General, Screen, General, Logical, Blob, ArrayLogical, Blob, Array

JavaScriptJavaScriptString, Numeric, String, Numeric,

Boolean, Object, Boolean, Object, ArrayArray

Constructs: IfConstructs: If

VFP:VFP:IF <expr>IF <expr>

statement(s)statement(s)

ELSEELSE


ENDIFENDIF

JavaScript:JavaScript:if (logical expression)if (logical expression)

{statement(s)}{statement(s)}

else if (logical else if (logical expression)expression)

{statements}{statements}

elseelse

{statement(s)}{statement(s)}

Constructs: WhileConstructs: While

VFPVFPDO WHILE expressionDO WHILE expression


ENDDOENDDO

EXITEXIT

LOOPLOOP

JavaScriptJavaScript

while (expression)while (expression)

{{


}}

breakbreak

continuecontinue

Constructs: ForConstructs: For

VFPVFPFOR var = n to n FOR var = n to n

STEP nSTEP n

statementsstatements

ENDFORENDFOR


for for (var=startvalue;var(var=startvalue;var<=endvalue;var=v<=endvalue;var=var+increment) ar+increment)

{ {


} }

Constructs: CASEConstructs: CASE

VFPVFPDO CASEDO CASE

CASE conditionCASE condition


OTHERWISEOTHERWISE


ENDCASEENDCASE

JavaScriptJavaScriptswitch (expression)switch (expression){{case value:case value:

statement(s)statement(s)break;break;

default: default: statement(s)statement(s)

}}

VFP JavaScript Event VFP JavaScript Event ConcordanceConcordance

JavaScriptJavaScriptonabortonabort

onbluronblur

onchangeonchange

onclickonclick

ondblclickondblclick

onerroronerror

onfocusonfocus

onkeydown, onkeyuponkeydown, onkeyup

VFPVFPn/an/a

lostfocuslostfocus

interactivechangeinteractivechange

clickclick

dblclickdblclick

ON ERROR, ErrorON ERROR, Error

gotfocusgotfocus

keypresskeypress


JavaScriptJavaScriptonloadonload

onmousedownonmousedown

onmousemoveonmousemove

onmouseoutonmouseout

onmouseoveronmouseover

onmouseuponmouseup

onresetonreset

VFPVFPload, initload, init

mousedownmousedown

mousemovemousemove

mouseleavemouseleave

mouseentermouseenter

mouseupmouseup

n/an/a


JavaScriptJavaScriptonresizeonresize

onselectonselect

onsubmitonsubmit

onunloadonunload

VFPVFPresizeresize

n/an/a

n/an/a

unloadunload

Event BindingEvent Binding

VFPVFPInlineInline

BindEvents()BindEvents()


InlineInline

document.observe()document.observe()

.addEventListener(‘e.addEventListener(‘event’,function,false)vent’,function,false)

OOPOOP

VFPVFPClass BasedClass Based

Objects are instances Objects are instances of classesof classes

JavaScriptJavaScriptPrototype basedPrototype based

Objects are based on Objects are based on a prototypea prototype

Object ModelObject Model

VFPVFP_SCREEN_SCREEN

_VFP_VFP

JavaScriptJavaScriptDOM (Document DOM (Document

Object Model)Object Model)

documentdocument

windowwindow

Browser DependentBrowser Dependent

Using External CodeUsing External Code

VFPVFPSET PROCEDURESET PROCEDURE

SET CLASS LIBRARYSET CLASS LIBRARY

JavaScriptJavaScript<script … src=‘file <script … src=‘file

name’>name’>

33rdrd Party Party

VFPVFP Only 1 good Only 1 good

frameworkframework Sort of expensive Sort of expensive

(but well worth it – (but well worth it – really)really)

JavaScript (all free)JavaScript (all free)Prototype & Prototype &

Script.aculo.us (& Script.aculo.us (& scripteka.com)scripteka.com)

JQueryJQueryYUI (Yahoo User YUI (Yahoo User

Interface)Interface)Adobe SpryAdobe SpryGoogleGoogle

JavaScript ResourcesJavaScript Resources JavaScriptJavaScript

http://javascript.crockford.com/http://javascript.crockford.com/ The JavaScript Anthology: 101 Essential Tips, The JavaScript Anthology: 101 Essential Tips,

Tricks & HacksTricks & Hacks (Sitepoint.com) (Sitepoint.com) http://www.javascript.com/http://www.javascript.com/ http://javascript.internet.com/http://javascript.internet.com/ http://www.javascriptkit.com/http://www.javascriptkit.com/ http://www.w3schools.com/jsref/default.asphttp://www.w3schools.com/jsref/default.asp

Prototypejs.orgPrototypejs.org Prototype and script.aculo.us: You never knew JavaScript could Prototype and script.aculo.us: You never knew JavaScript could

do this! (PragProg.com)do this! (PragProg.com) Script.aculo.usScript.aculo.us

http://javascript.crockford.com/

http://www.javascript.com/

http://javascript.internet.com/

http://www.javascriptkit.com/

http://www.w3schools.com/jsref/default.asp

ConclusionConclusion

JavaScript is a flexible, powerful JavaScript is a flexible, powerful languagelanguage

JavaScript should be easy for VFP JavaScript should be easy for VFP developers to learndevelopers to learn

Free 3Free 3rdrd Party Tools make JavaScript Party Tools make JavaScript much easiermuch easier

Thank YouThank You

Mikefeltman at f1tech dot comMikefeltman at f1tech dot com http://www.f1tech.comhttp://www.f1tech.com http://f1technologies.blogspot.com/http://f1technologies.blogspot.com/ 419-255-6366419-255-6366

http://www.f1tech.com/

http://f1technologies.blogspot.com/

Documents

Feltman js4 vfp