CLIENT-SIDE JAVASCRIPT BAREND KÖBBEN <[email protected]> Standard configuration GET file.html CLIENT SERVERSERVER CLIENT http:// a www.itc.nl/b file.html c 2 a Standard configuration file.html CLIENT SERVERSERVER CLIENT http:// a www.itc.nlb HTML c document /file.html <img src = “file.gif”> <br> <i>STATIC </i> MAP 3 aa Standard configuration GET file.gif CLIENT SERVERSERVER CLIENT <img src =a “file.gif”>b c 4 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 <script > c <!-- 10 March 2009 Document.write (Date()); } //--> </script> 6 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 11 ©2011 – Barend Köbben.