JavaScript is a client-side scripting language. Programs run in the web browser on the client's computer. (PHP, in contrast, is a server-side scripting language... programs run on the web server computer) A program in the client's browser can do various useful tasks: - validating user input to text boxes in on-screen forms - modifying parts of the web page, e.g. in response to user actions (DHTML) - fetching data items from the server, as a background task (AJAX) Doing work on the client computer can speed-up Web Database Applications.. avoids data transfer delays and server workload delay. We need to know about JavaScript in order to use the Google Maps API.. and also to use AJAX.

JavaScript programs are included in web pages.. in two alternative ways: 1. As program code inside a.. element (between these two tags). 2. As a separate.JS program that is included as the page loads. >example An HTML document has a.. section and a.. section. -- the body section contains the information displayed on screen -- the head contains various definitions. JavaScript can be embedded in the head or the body of a web page.. but behaves differently in each case: Code in the body section is executed immediately, as the program loads Code in the head is a collection of function definitions, to be called later.. e.g. when particular events occur. >headbody

JavaScript can be used to respond to eventsevents ChapterChapter on event handling. example of onClick event. Example2 for onClickonClick JavaScript in anchor taganchor tag Attaching a handler function to an event, 2 wayshandler2 ways MeasuringMeasuring time intervals

Hello HTML tags can have IDs: This allows JavaScript to change parts of the web page: <input type='button' value='make Hello blue' onClick='JavaScript: document.getElementById("hello").color="blue" ' > As well as reading properties of the tag.. Including properties such as the position and area occupied by the tag’s object on the web page on screen. example

clock1clock1, clock2, clock3, clock4 use the setInterval() window function.clock2clock3clock4 Clock4Clock4 uses the browser’s TITLE BAR and clock1B-2 show formatting (CSS for the text box properties). ExampleExample uses setTimeout() instead of setInterval(), and shows a scrolling titlebar. The blinking eyes examples: 1 and then 2 demonstrate use of time intervals.12 errorReportingerrorReporting using try{ } and catch(e){ }. backgroundColour.htmlbackgroundColour.html shows the way screen object properties can be changed:.. a button flashes because its background colour is changed at regular intervals. mover.htmlmover.html extends the idea: the position of an object on screen can be moved. Click the image.. it disappears.. the innerHtml of an html element has been changed.. so a subtree in the html DOM tree has changed. JAVASCRIPT EXAMPLE PROGRAMS

iframeExample.html JAVASCRIPT EXAMPLE PROGRAMS Opening and controlling another window in the browseranother window Course lecnotes web pageCourse lecnotes web page: do not click, etc.

Using the Google Maps API This online API allows people to display maps of places, free of charge, on web pages.. Including zoom in and out and aerial photographs... Like the example on this web page.this web page In order to use the API you must first REGISTER at the website: Click the link on that page to sign up, agree to the conditions of use, and get a KEY.. A KEY is a unique sequence of characters that identify you.. It will only work on the website you gave when you signed up. Sign in with your Google login.. Or create one if you haven’t already got one Password must be 8 characters long Use a real address because they send you a message that you have to confirm Copy your character string key and save it somewhere safe. Then copy the code in the JavaScript Maps API Example text box and paste it into an html document (i.e. put before it in a text editor, and save the file as a file named firstmap.html

The first part of the copied code looks like this: <script src= " This identifies the JavaScript file that contains all the function definitions for the maps. It also contains your unique KEY string in the appropriate place. Also remove this JavaScript comment or it will appear on your web page: // Note: you will need to replace the sensor parameter below with either an explicit true or false value. The code in your new html document so far just provides the API. Now you need to add your own code to use the functions provided by the API. Change the substring sensor=true_or_false to sensor=false To get you started, copy the following code (also on the CE205 assignment 3 web page as googlemaps.txt to copy and paste). - Paste it at the end of your html document in the text editor... It completes the html document, so after saving the file you can double-click the filename to open the web page and admire the map.

function initialise() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng( , ), 13); map.setUIToDefault(); } This is the text of the additional code to get your web page working It has a function named initialise( ) that goes into the head part of the html document.. That function is called by the onLoad event (when the web page opens).. Notice that another function is called when the web page is closed, but that function is already defined in the API: GUnload( )... Google API function names start with a capital G.

More about Google Maps From the google maps folder in the course web page.. Text file describes the nine example web pages in that folder MapsMaps: shows the initial map of Stanford University, Palo Alto in California.. Where Google began. This is the map when google maps is first set up as described above. Map2Map2 sets the initial map to Colchester by changing the latitude and longitude values in the function call: map.setCenter(new GLatLng( , ), 13); Map3Map3 extends the idea of Lat and Long values by providing text boxes on the web page so that users can change Latitude and Longitude and call the GLatLng( ) function by pressing the 'move' button on screen. Map3 also shows how to add a marker overlay to a specified point on the map: var marker = new GMarker(position); map.addOverlay(marker); //add a marker at the specified coordinates It also shows how to use the map.setCenter( ) function to move the mapped location within an existing map in a web page. The map.setCenter( ) function takes 2 arguments: a Lat,Lng pair and a magnification value. But the zoom level attribute seems to be ignored, as this web page example shows.

Map4Map4 shows the use of a Geocoder to convert address to LatLng values. The map starts in Palo Alto but the address box allows a new location to be chosen by typing the address into the box and clicking the button. One geocoder object is required. It is created as a global variable: var geocoder = null; geocoder = new GClientGeocoder(); geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); } );

Map5Map5 shows how an Infobox can be added to a marker to display information about the marked point on the map. var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); Map6Map6 starts the map with a marker and infobox displayed. Link on page to further info on the Google Maps website. Map8 also show the map.closeInfoWindow() method closing the info window attached to a marker on the map and also the more general map.clearOverlays() method. Map8Map8 shows how to use setZoom( ) to zoom in or out. The user input via the TEXTBOX is text, so has to be converted to a number before it will work in setZoom( ). Map7Map7 show the use of getZoom( ) to find out and display the current zoom level. Change the level using the + and - controls on the map and click the show button to show the current zoom level.

Map9 enables the Google 'Search the map' box at the bottom of the map by calling the map.enableGoogleBar() method. It zooms in automatically when things on the current map are sought. This search box can be removed by calling the map.disableGoogleBar() method. another example of a listener: GEvent.addListener(map, "click", function() { alert("You clicked the map."); }); Uses the map event zoomend(oldLevel:Number, newLevel:Number) by adding an event listener to the initialisation function for the map: GEvent.addListener(map, "zoomend", function() { document.getElementById("zoomlevel").value = map.getZoom(); });