Client-side processing in JavaScript...

JavaScript history Motivations –lack of “dynamic content” on web pages animations etc user-customised displays form checking etc. –Netscape looking for an edge over Microsoft MS swamp market with free high-quality browsers how can Netscape sell browsers….?

JavaScript... Has nothing to do with Java –named for purely political/marketing purposes refers to a class of languages –a different instance for each browser version hugely non-standard –deliberately –becoming less of an issue for the future

variants JavaScript 1.0, 1.1, 1.2, 1.3 (?) –a Netscape trademark JScript 1.0,1.2 (1.3?) –a Microsoft trademark ECMAScript –(European Computer Manufacturers’ Association) –a standard is emerging (ECMA-262) will be ISO-16262

client-side paradigms document appearance and content browser control HTML form interaction user interaction client state read/write various others… –notably applet interaction

The basic model A general-purpose, fully-fledged programming language –actually quite a good one... Not inherently object-oriented –but OO style can be achieved “scripting” language –no real distinction - implementation detail –but - no “compilation” phase

Binding to pages insert html text during load –a tag is evaluated during document load –the identifier “document” binds to the loading document –is “good practice” currently but maybe dated… –avoids mixing HTML and script

The data model Normal mix of types and operators… “dynamic” object model var X = new Object() X.age = 27 X.name = "Fred" Largely untyped –dereference of non-field = UNDEFINED –dereference of UNDEFINED -> dynamic error Run-time environment is very flexible –Lacks safety!

Tricky programming… Software development is extremely tricky –Browsers are main test facility Behaviour is fickle…. –Errors may not be flagged Program may just halt execution –Hardly any support Eg “error line 93, character 17” (HMTL file) –No syntax checking Syntax error leads to run-time failure I have written, just for you, a syntax checker! –

Debug… Typically involves extensive use of “alert” function –Eg alert( “execution is here” ) Eg –var fred = new Object() fred.name = “Fred” document.write( fried.name ) alert( “execution is here” ) Nothing happens…

example load-time script The meaning of life is now = new Date(); document.write( 7 * 6 ); document.write( " in " ); document.write( now.getUTCFullYear() );.

evaluation after load The meaning of life is 42. function f( x ) { alert( x ); }

DHTML A run-time environment for JavaScript Allows scripts to access the document object model of the underlying HTML –Models include DOM Many changes to these objects are auto- refreshed in browsers (esp. IE5.0) –Code can easily change display

the programming environment document –the HTML currently displayed –Contains documentElement field The head of the DOM tree window –the OS window hosting the page navigator –the browser application being used screen –the physical monitor being used

Evaluation contexts client-side - evaluation with browsers –almost all current use server-side –still proprietary Netscape “livewire” server, Microsoft ASP framework embedded –source code of interpreters is freely available allowing scripts to be included in any framework

common example of abuse… function bringItBackAgain( ) { window.open( ” ); }

event handlers What is the meaning of life?

Cookies Outdated – DHTML contains persistent info in a more programmer-friendly form small grains of information that can be stored with the browser application –under the user’s control also –(may be disallowed) can preserve state between accesses –client details –dynamically generate different text for a previous visitor

Scope normal lexicographic scope applies within programs –local: var a = 1 –global: a = 1 Beware eg for( i = 0; …. ) ! default global scope is context-dependent –“document” in a browser functions are scoped like variables watch for dynamic interactions! –browser interface, global scoping

objects, syntax, etc Object-oriented behaviour can be built from basic components –1 st -class code, flexible objects, this binding –Mostly just need to know for using object eg standard libraries etc. for a full understanding, read –Essential JavaScript (Flanagan, O’Reilly) –ECMA standard definition check out Microsoft (msdn) web site