Javascript
Key features Nothing to do with java It is the Client-side scripting language Designed to add interactivity to HTML pages (DHTML): Event-driven programming model AJAX Great example: Google Maps Embedded directly into HTML pages or imported from separate file Popular libraries: Jquery, Prototype
Key features JavaScript is an Object Oriented Programming (OOP) language Built-in JavaScript objects The document itself is an object (Document Object Model, DOM) inside the window browser An object has properties and methods New objects can be created but No class construct!
Key features Event-driven computation model Code (function) is activated (triggered) when an event occurs The effect of the code is on The document being displayed The window (open a new windows, pop-up, etc) Make a HTTP request
Mobile for applications Increasing interest for web-based mobile applications All popular browser do support JS, e.g. Safari Allows to access device information, e.g., geolocation Android, iphone HTML 5 http://ofps.oreilly.com/titles/9781449383268/index.html
Mash up applications Many Web API are provided as JS library, e.g., Geonames, Google map, nextdb, etc
Attribute The event occurs when... onabort onblur onchange onclick ondblclick onerror onfocus onkeydown onkeypress onkeyup Loading of an image is interrupted An element loses focus The user changes the content of a field Mouse clicks an object Mouse double-clicks an object An error occurs when loading a document or an image An element gets focus A keyboard key is pressed A keyboard key is pressed or held down A keyboard key is released onload onmousedown onmousemove onmouseout onmouseover onmouseup onreset onresize onselect onsubmit onunload A page or an image is finished loading A mouse button is pressed The mouse is moved The mouse is moved off an element The mouse is moved over an element A mouse button is released The reset button is clicked A window or frame is resized Text is selected The submit button is clicked The user exits the page
Object hierarchy
Navigator.Geolocation
Javascript vs PHP HTTP Request CLIENT SERVER HTTP reply <html> <body> <script type="text/javascript"> document.write("hello World!"); </script> </body> </html> rendering
Javascript vs PHP HTTP Request CLIENT SERVER HTTP reply Hello, World php module executes the script <?php print "Hello, World";?> sends back the output
Where to put a script Scripts to be executed when they are called, or when an event is triggered, go in the head section. Scripts to be executed when the page Scripts to be executed when the page loads go in the body section.
OO example <script type="text/javascript"> var txt="hello World!"; document.write(txt.length); document.write(txt.touppercase()); </script> Length is a property of the String object touppercase is a method of the String object 12 HELLO WORLD!
An example <html> <body> Field1: <input type="text" id="field1" value="hello World!"> <br /> Field2: <input type="text" id="field2"> <br /><br /> Click the button below to copy the content of Field1 to Field2. <br /> <button onclick="document.getelementbyid('field2').value= document.getelementbyid('field1').value"> Copy Text </button> </body> </html>
<html> <head> <script type="text/javascript"> function Foo() { document.getelementbyid('field2').value= document.getelementbyid('field1').value;} </script> </head> <body> Field1: <input type="text" id="field1" value="hello World!"> <br /> Field2: <input type="text" id="field2"> <br /><br /> Click the button below to copy the content of Field1 to Field2. <br /> <button onclick= Foo() > Copy Text </button> </body> </html> Function Foo registered to the onclick event Foo its event listener
AJAX Asynchronous JavaScript And XML. a type of programming made popular in 2005 by Google (with Google Suggest). based on JavaScript and HTTP requests JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, JavaScript can trade data with a web server, without reloading the page For security reasons, requests can only sent to the same domain from which the page is loaded
XMLHttpRequest specification
Architecture AJAX allows to reduce the granularity of data exchanged A single element instead of the entire document
Example Read data from a text input in an input form Call a PHP function for echoing the character What we need Keyboard event listener (JS function) AJAX request that passes the text to the script PHP script that echo the text back to the client
In this form there is no submit button JS function called when key is released <form name="testform"> Input text: < input type="text" onkeyup="dowork();" name="inputtext" id="inputtext" /> Output text: <input type="text" name="outputtext" id="outputtext" /> </form>
function do_it() { document.testform.outputtext.value=request.responsetext; };.. var request = false;.. function dowork(){ var URL = "http://localhost/test.php?char="; request = new XMLHttpRequest(); request.open("get", URL+document.getElementById('inputText').value, true); request.send(null); request.onreadystatechange = do_it; } open method used for preparing the request send sends the request do_it is the event listener for the reply php script <?php echo $_GET['char'];?>
Example TrackMe, a simple application that tracks positions of a mobile device: track.html: js that sends gps position trackme.php: write the coordinate to a file Monitor.php: periodically reads the file and shows the positions.
Example 1 track.html Browser.js monitor.php 2: HTTP GET trackme.php
track.html (1/2) <html> <head> <title> Track Me!</title> </head> <body> <input type="text" id = "text" value="" size=100/> <script type="text/javascript"> function done() { document.getelementbyid('text').value="tracked.."; }
track.html (2/2) navigator.geolocation.getcurrentposition(showposition); function showposition(position) { var lat=position.coords.latitude; var lon=position.coords.longitude; var URL = "http://psd.altervista.org/geo/trackme.php?lat="+lat+"&lon="+lon; request = new XMLHttpRequest(); request.open("get", URL, true); request.send(null); request.onreadystatechange = done; document.getelementbyid('text').value="long: "+lon+" Lat: "+lat; } </script> </body> </html>
TrackMe trackme.php <?php $lat='?'; $lon='?'; if (isset($_get['lat'])) $lat=$_get['lat']; if (isset($_get['lon'])) $lon=$_get['lon']; $entry=date(c).' '.$lat.' '.$lon."\n"; file_put_contents ('position.txt', $entry, FILE_APPEND);?> Monitor.php <head> <meta http-equiv="refresh" content="5" > </head> <?php $str=file_get_contents('position.txt'); echo nl2br($str);?>
Including library <script type="text/javascript" src="http://xxx.yyy.zzz/abc.js"></script>
An example
An example
Example Show a map into the browser, centered at your current location The current location is given by: a simple form (if accessing from a PC) Automatically if a GPS device is available
LAB Get the photo closest to your position from Flickr