Client-Side Javascript

CLIENT-SIDE JAVASCRIPT BAREND KÖBBEN Standard configuration

GET file.html CLIENT SERVERSERVER CLIENT

http:// a www.itc.nl/b file.html c

a Standard configuration

file.html CLIENT SERVERSERVER CLIENT

http:// a www.itc.nlb HTML c document /file.html
STATIC MAP

aa Standard configuration

GET file.gif CLIENT SERVERSERVER CLIENT

b c

a Standard configuration

file.gif CLIENT SERVERSERVER CLIENT

http:// www.itc.nl /file.html a b c file.gif STATIC MAP

a b c

5 Client-side scripting (eg. JavaScript)

JavaScript interpreter

SERVER SERVER CLIENTCLIENT

HTML a document b

a Client-side Scripting

Executed in the web browser:  JavaScript: works in (almost) all browsers  Visual Basic script: works in Microsoft IE only Executed in browser plugins, or diverted to system:  ActionScript (in Flash)  and many others...

7 Client-side Scripting = client-side functionality:  Executed by the browser, after the file is received  Dynamic HTML:  all HTML elements can be identified by a unique ID and become programmable objects  interactive layout, dynamic content, form processing, etc...  AJAX: Asynchronous Javascript And XML :  browser content linked with server by retrieving XML fragments and processing these client-side  smooth and application-like interface possible See the examples at: http://kartoweb.itc.nl/courses/JavaScriptExamples/

8 What is JavaScript ?

 Javascript is a scripting language that can be embedded directly into HTML files  JavaScript was influenced by many languages and was designed to have a similar look to Java, but be easier for non-programmers to work with  Despite the name, JavaScript is actually unrelated to the Java programming language, although growing more and more towards it  Unlike Java code, Javascript is not first compiled, but directly interpreted (by the web browser)

9 Javascript peculiarities It is case–sensitive: the variable mysomething is different from the variable MySomeThing It is object-oriented (like Python): there are objects, e.g.: document that have methods: document.write() that take arguments: document.write(“a string” + aVariable) and have fields that can be read and set: document.visible = true statements should end with semi-colons: aVar = 1;

10 ©2011 – Barend Köbben Tools to help you An intelligent text editor: line numbers, automatic highlighting of recognised HTML and JavaScript keywords, etcetera:  on Linux/MacOSX: BBedit or TextWrangler  on Windows: NotePad++  specialised webpage editing software, such as BlueGriffon or Dreamweaver A web—browser with useful error messages, code views of HTML, CSS and JavaScript, network traffic monitoring, etc:  FireFox: Tools > Web Developer  Chrome: View > Developer > Developer Tools  InternetExplorer 8+: Development Tools (F12) Reference for the JavaScript Language:  http://www.w3schools.com/jsref/default.asp