Chapter 8. Programming the Web. For the book Mapping in the Cloud Guilford Press Michael P. Peterson

Size: px

Start display at page:

Download "Chapter 8. Programming the Web. For the book Mapping in the Cloud Guilford Press Michael P. Peterson"

Jocelyn Anderson
6 years ago
Views:

1 Chapter 8 Programming the Web For the book Mapping in the Cloud Guilford Press Michael P. Peterson

2 Javascript in Body Code Result <html> <body> This is a normal HTML document. <br> <script type= text/javascript > document.write ( This is JavaScript! ) <br> Back in HTML again. </body> </html> This is a normal HTML document. This is JavaScript! Back in HTML again.

3 Body and calculaaon Code <html> <body> <script type="text/javascript"> var x = 2 * 2 document.write("x = ", x) </body> </html> Result x = 4

4 FuncAon in the head Code Result <head> The function returned 25. <script LANGUAGE="JavaScript"> All done. function square(number) { return number * number <body> <script> document.write("the square of 5 is ", square(5), ".") <P>All done.</p> </body>

5 FuncAon in the.js file Code function square(number) { return number * number Result A separate file called common.js <head> The function returned 25. <title>referencing a file of functions</title> All done. <script src="common.js"> <body> <script> document.write("the square of 5 is ", square(5), ".") <p>all done.</p> </body>

6 API as an external.js file Code <head> <title>google Maps JavaScript API Example</title> <script type= text/javascript src= >

7 Array Code Result <html> <title>calculate the min and max of a dataset</title> <h3>calculating the min and max of a dataset</h3> <script type="text/javascript"> var popdata = new Array (33185,6931,372,783,492,5668,11132,2185,3354, 43954,7341,8595,25963,8819,3811,5934,9865,6564,10113,9660,11242,20587,8466, 25018,1958,6170,36171,492003,2109,6259,3348,2729,5003,23365,1995,1790,1978, 660,2454,55555,9490,3446,1029,2926,10610,756,6736,7874,4683,6701,8250,892, 3710,8812,267135,35865,749,656,497,35279,7954,5171,3705,7247,4650, ,2992,9442,7564,31962,5349,10865,8656,1544,14155,142637,20344, ,5571,3083,1403,6570,5317,629,7273,4373,20044,9196,3701,823,14502); //initialize min and max to values beyond the range var min= ; var max= ; //set n equal to the number of values in the array The minimum value is 372. The maximum value is

8 43954,7341,8595,25963,8819,3811,5934,9865,6564,10113,9660,11242,20587,8466, 25018,1958,6170,36171,492003,2109,6259,3348,2729,5003,23365,1995,1790,1978, 660,2454,55555,9490,3446,1029,2926,10610,756,6736,7874,4683,6701,8250,892, 3710,8812,267135,35865,749,656,497,35279,7954,5171,3705,7247,4650, ,2992,9442,7564,31962,5349,10865,8656,1544,14155,142637,20344, ,5571,3083,1403,6570,5317,629,7273,4373,20044,9196,3701,823,14502); //initialize min and max to values beyond the range var min= ; var max= ; //set n equal to the number of values in the array var n=93; //loop through all values and reset min and max for (var i = 0; i < n; i++) { if (popdata[i] < min) { min=popdata[i] if (popdata[i] > max) { max=popdata[i] //write dataset and min and max document.write('<b>nebraska populations by county</b>: '+ popdata) document.write('<p>the minimum value is ' + min + '.') document.write('<p>the maximum value is ' + max+ '.') </html>

9 Code Sort function initialize() { var popdata = new Array (33185,6931,372,783,492,5668,11132,2185,3354, 43954,7341,8595,25963,8819,3811,5934,9865,6564,10113,9660,11242,20587,8466, 25018,1958,6170,36171,492003,2109,6259,3348,2729,5003,23365,1995,1790,1978, 660,2454,55555,9490,3446,1029,2926,10610,756,6736,7874,4683,6701,8250,892, 3710,8812,267135,35865,749,656,497,35279,7954,5171,3705,7247,4650, ,2992,9442,7564,31962,5349,10865,8656,1544,14155,142637,20344, ,5571,3083,1403,6570,5317,629,7273,4373,20044,9196,3701,823,14502); var n=93; //write unsorted data document.write('<h3>unsorted Nebraska populations by county:</h3> '+ popdata); // call sort function sortdata(n,popdata); //write sorted data document.write('<h3>sorted Nebraska populations by county:</h3> '+ popdata);

10 //write unsorted data document.write('<h3>unsorted Nebraska populations by county:</h3> '+ popdata); // call sort function sortdata(n,popdata); //write sorted data document.write('<h3>sorted Nebraska populations by county:</h3> '+ popdata); <script type="text/javascript"> function sortdata(n,data) { var i, j, swapped for(i = 0; i < n; i++) { var swapped = false; for(j = 0; j < (n-1); j++) { if(data[j] > data[j+1]) { swap = data[j+1]; data[j+1] = data[j]; data[j] = swap; swapped = true; if (swapped==false) break; return data // Chk if variables need swapping // The following 3 lines swap the variables // if the swapped flag isn't changed then there is //point continuing as all values are in order

11 // call the Time function <body onload="time()"> </body> The Date object Code <script type="text/javascript"> function Time() { var currenttime = new Date() var hours = currenttime.gethours() var minutes = currenttime.getminutes() var seconds = currenttime.getseconds() // call the AddZero function to add a // zero in front of numbers that are less // than 10 hours = AddZero(hours) minutes = AddZero(minutes) seconds = AddZero(seconds) Result 19 hours 23 minutes 06 seconds // write out the time document.write("<b>" + hours + " hours " + minutes + " minutes " + seconds + " seconds </b>") function AddZero(i) { if (i<10) {i="0" + i return i

12 Morning or ajernoon Code <script type="text/javascript"> var d = new Date() var time = d.gethours() if (time < 12) { document.write("<b>good morning</b>") else { document.write("<b>good Afternoon</b>") Result If it is before 12: Good Morning If it is after 12: Good Afternoon

13 Code <script type="text/javascript"> function Time2() { var currenttime = new Date() var hours = currenttime.gethours() var minutes = currenttime.getminutes() Result 7:54 PM AM and PM var suffix = "AM"; if (hours >= 12) { suffix = "PM"; hours = hours - 12; if (hours == 0) { hours = 12; if (minutes < 10) minutes = "0" + minutes document.write("<b>" + hours + ":" + minutes + " " + suffix + "</b>") // call the Time2 function <body onload="time2()"> </body>

14 CounAng the days Code Result <script language="javascript"> function CalculateDays() { var now = new Date(); var theevent = new Date("Jan :00:01"); var seconds = (theevent - now) / 1000; var minutes = seconds / 60; var hours = minutes / 60; var days = hours / 24; days = Math.round(days); There are 376 days before / since January 19, document.write("there are ", days, " days before / since January 19, 2009.") <body onload="calculatedays()"> </body>

15 Code Result In days, minutes, and seconds <html> <head> <script LANGUAGE="JavaScript"> // The function update is called by // itself to constantly update the values // for days, hours, minutes, seconds var now = new Date(); var theevent = new Date("Jan :00:01"); var seconds = (theevent - now) / 1000; var minutes = seconds / 60; var hours = minutes / 60; var days = hours / 24; ID=window.setTimeout("update();", 1000); function update() { now = new Date(); seconds = (theevent - now) / 1000; seconds = Math.round(seconds); minutes = seconds / 60; minutes = Math.round(minutes); hours = minutes / 60; hours = Math.round(hours); days = hours / 24; days = Math.round(days); document.form1.days.value = days; document.form1.hours.value = hours; document.form1.minutes.value = minutes; document.form1.seconds.value = seconds; //this function calls itself to update the time ID=window.setTimeout("update();",1000); <body> <p>countdown To January 19, 2009, at 12:00:</p> // forms are used to display the values Countdown To January 19, 2009, at 12:00: Top of Form Days Hours Minutes Seconds (These numbers are continuously updated on the webpage.) <form name="form1"><p>days <input type="text" name="days" value="0" size="3"> Hours<br> <input type="text" name="hours" value="0" size="4"> Minutes<br> <input type="text" name="minutes" value="0" size="7"> Seconds<br> <input type="text" name="seconds" value="0" size="7"></p></form> </body> </html>

16 var hours = minutes / 60; var days = hours / 24; ID=window.setTimeout("update();", 1000); function update() { funcaon update now = new Date(); seconds = (theevent - now) / 1000; seconds = Math.round(seconds); minutes = seconds / 60; minutes = Math.round(minutes); hours = minutes / 60; hours = Math.round(hours); days = hours / 24; days = Math.round(days); document.form1.days.value = days; document.form1.hours.value = hours; document.form1.minutes.value = minutes; document.form1.seconds.value = seconds; //this function calls itself to update the time ID=window.setTimeout("update();",1000);

17 Distance calculaaon Code <html> <head> <script type="text/javascript" src="haversine.js"> <body> <form name="f" action="none!"> <p> Lat 1: <input name="lat1" value=" N" size="12"> Long 1: <input name="long1" value=" W" size="12"> </p> <p> Lat 2: <input name="lat2" value=" N" size="12"> Long 2: <input name="long2" value=" E" size="12"> </p> <p> <input type="button" value="calculate distance" onclick="result.value = LatLon.distHaversine(f.lat1.value. parsedeg(), f.long1.value.parsedeg(), f.lat2.value.parsedeg(), f.long2.value.parsedeg()). toprecision(4) + ' km'"> <input name="result" value="0" size="12"> </p> </form> <p>haversine script Chris Veness <a href= " </body> </html> <script type="text/javascript"> /* * Use Haversine formula to Calculate distance (in km) between * two points specified by latitude/longitude (in numeric degrees) LatLon.distHaversine = function(lat1, lon1, lat2, lon2) { var R = 6371; // earth's mean radius in km var dlat = (lat2-lat1).torad(); var dlon = (lon2-lon1).torad(); lat1 = lat1.torad(), lat2 = lat2.torad(); var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon/2) * Math.sin(dLon/2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; return d;

18 </html> <script type="text/javascript"> /* * Use Haversine formula to Calculate distance (in km) between * two points specified by latitude/longitude (in numeric degrees) LatLon.distHaversine = function(lat1, lon1, lat2, lon2) { var R = 6371; // earth's mean radius in km var dlat = (lat2-lat1).torad(); var dlon = (lon2-lon1).torad(); lat1 = lat1.torad(), lat2 = lat2.torad(); var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon/2) * Math.sin(dLon/2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; return d;

19 Random number object Code Result <p>the following is an example of random link in javascript </p> <script type="text/javascript"> var r=math.random() Either: if (r>0.5) { Visit our school s Website! document.write("<a href=' Our School's or Website!</a>") Visit Dr. Peterson s else Homepage! { document.write(" edu/mikep/biography.htm'>visit Dr. Peterson's Homepage!</a>")

20 Input text Code <script type="text/javascript"> function disp_prompt() { var name=prompt("please enter your name") if (name!=null && name!="") { document.write("hello " + name + "! How are you today?") Result Please enter your name Hello Michael! How are you today?

21 Code <html> <title>multiplication w/dialog</title> <h3> Mulitiplication with JavaScript</h3> <body> <button onclick="myfunction()"> START </button> <p id="demo"> </p> <script type="text/javascript"> Input function myfunction(){ var Result; var Number1 = prompt("please enter first number"); var Number2 = prompt("please enter second number"); if (Number1!= null) { Result = Number1 * Number2; document.getelementbyid("demo").innerhtml = Number1 + " x " + Number2 + " = " + Result;

22 Mouseover no_selection.gif library.gif cinema.gif bus-stop

23 Mouseover <html> <head> <title>sample JavaScript</title> <script type= text/javascript > // TASK: PRELOAD IMAGES { no_selection = new Image(330,220); no_selection.src = no_selection.gif ; selection_lib = new Image(330,220); selection_lib.src = library.gif ; selection_cin = new Image(330,220); selection_cin.src = cinema.gif ; selection_bus = new Image(330,220); selection_bus.src = busstop.gif ; function hiliter(imgbase,imgswap) // TASK: SWAP IMAGES // imgbase - name of the document image to be replaced // imgswap - name of the image object to be swapped in { document.images[imgbase].src = eval(imgswap +.src ) <body> <a name= top ></a> <img border= 0 src= no_selection.gif name= map usemap= #mousemap width= 330 height= 220 alt= Selector /> <map name= mousemap > <area shape= rect coords= 229,97,316,209 href= #top onmouseover= hiliter( map, selection_lib ); window.status= selection_lib ; return true onmouseout= hiliter( map, no_selection ); window.status= selection ; return true > <area shape= poly coords= 15,208,15,127,75,127,75,115,147,115, 147,196,85,196,85,208 href= #top onmouseover= hiliter( map, selection_cin ); window.status= selection_cin ; return true onmouseout= hiliter( map, no_selection ); window.status= selection ; return true > <area shape= circle coords= 127,45,10 href= #top onmouseover= hiliter( map, selection_bus ); window.status= selection_bus ; return true onmouseout= hiliter( map, no_selection ); window.status= selection ; return true > </map> </body> </html>

24 Loading images into memory <html> <head> <title>sample JavaScript</title> <script type= text/javascript > // TASK: PRELOAD IMAGES { no_selection = new Image(330,220); no_selection.src = no_selection.gif ; selection_lib = new Image(330,220); selection_lib.src = library.gif ; selection_cin = new Image(330,220); selection_cin.src = cinema.gif ; selection_bus = new Image(330,220); selection_bus.src = busstop.gif ; function hiliter(imgbase,imgswap) // TASK: SWAP IMAGES // imgbase - name of the document image to be replaced // imgswap - name of the image object to be swapped in { document.images[imgbase].src = eval(imgswap +.src ) <body>

25 // imgbase - name of the document image to be replaced // imgswap - name of the image object to be swapped in { document.images[imgbase].src = eval(imgswap +.src ) <body> <a name= top ></a> <img border= 0 src= no_selection.gif name= map usemap= #mousemap width= 330 height= 220 alt= Selector /> <map name= mousemap > <area shape= rect coords= 229,97,316,209 href= #top onmouseover= hiliter( map, selection_lib ); window.status= selection_lib ; return true onmouseout= hiliter( map, no_selection ); window.status= selection ; return true > <area shape= poly coords= 15,208,15,127,75,127,75,115,147,115, 147,196,85,196,85,208 href= #top onmouseover= hiliter( map, selection_cin ); window.status= selection_cin ; return true onmouseout= hiliter( map, no_selection ); window.status= selection ; return true > <area shape= circle coords= 127,45,10 href= #top onmouseover= hiliter( map, selection_bus ); window.status= selection_bus ; return true onmouseout= hiliter( map, no_selection ); window.status= selection ; return true > </map> </body> </html> Defining mouseover hot spots

26 divs (layers) HTML- and JavaScript-Code <html> <head> <title>mouseover with JavaScript and DIV-Layers</title> 1 <script type= text/javascript > function Show(id) { if (document.getelementbyid) document.getelementbyid(id).style.visibility = visible ; function Hide(id) { if (document.getelementbyid) document.getelementbyid(id).style.visibility = hidden ; <body> 2 < div id= newdelhi style= position: absolute; left: 58; top: 100; z-index: 2; visibility: hidden >New Delhi</div> < div id= mumbai style= position: absolute; left: 72; top: 200; z-index: 2; visibility: hidden >Mumbai</div> < div id= indiamap style= position: absolute; z-index: 1; left: 1; top: 1; visibility: visible ><img src= india.gif width= 280 height= 355 border= 0 usemap= #Map ></div> <map name= Map > 3 < area shape= circle coords= 114,97,12 onmouseover= Show( newdelhi ) onmouseout= Hide( newdelhi ) > 4 < area shape= circle coords= 62,211,12 onmouseover= Show( mumbai ) onmouseout= Hide( mumbai ) > </map> </body> </html> 1 JavaScript code is inserted in a <script> tag in the head part of the html file. The function Show() searches in the document for an element with a certain id and sets the visibility of that element to visible. The function Hide() works in the same way to hide elements. 2 A <div> element is a layer. By giving that element an id-attribute, it can be addressed by scripting. The style-attributes are stylesheets and written in css-syntax. position: absolute; Sets the position of the layer. In this case, 58 px from the left and 100 px from the top. z-index: 2; Defi nes how layers are positioned over each other. The layer with the highest number is on the top. visibility: hidden; Hides this layer when the page is fi rst loaded. 3 OnMouseOver is one of the most common event handlers. It invokes JavaScript when the mouse is positioned over a hotspot. In this case, the JavaScript function Show is called with the id newdelhi. Then, JavaScript searches for the element newdelhi and makes it visible. The OnMouseOut event hides the layer in the same way. 4 Mumbai text appears when the mouse is positioned over this hotspot.

27 Mouseover with divs

28 Show and hide HTML- and JavaScript-Code <html> <head> <title>mouseover with JavaScript and DIV-Layers</title> 1 <script type= text/javascript > function Show(id) { if (document.getelementbyid) document.getelementbyid(id).style.visibility = visible ; function Hide(id) { if (document.getelementbyid) document.getelementbyid(id).style.visibility = hidden ; <body> 2 < div id= newdelhi style= position: absolute; left: 58;

29 document.getelementbyid(id).style.visibility = visible ; function Hide(id) { if (document.getelementbyid) document.getelementbyid(id).style.visibility = hidden ; <body> 2 < div id= newdelhi style= position: absolute; left: 58; top: 100; z-index: 2; visibility: hidden >New Delhi</div> < div id= mumbai style= position: absolute; left: 72; top: 200; z-index: 2; visibility: hidden >Mumbai</div> < div id= indiamap style= position: absolute; z-index: 1; left: 1; top: 1; visibility: visible ><img src= india.gif width= 280 height= 355 border= 0 usemap= #Map ></div> <map name= Map > 3 < area shape= circle coords= 114,97,12 onmouseover= Show( newdelhi ) onmouseout= Hide( newdelhi ) > 4 < area shape= circle coords= 62,211,12 onmouseover= Show( mumbai ) onmouseout= Hide( mumbai ) > </map> </body> </html> Hot spots 1 JavaScript code is inserted in a <script> tag in the head part of the html file. The function Show() searches in the document for an element with a certain id and sets the visibility of that element to visible. The function Hide() works in the same way to hide elements. 2 A <div> element is a layer. By giving that element an id-attribute, it can be addressed by scripting. The style-attributes are stylesheets and written in css-syntax. position: absolute; Sets the position of the layer. In this case, 58 px from the left and 100 px from the top. z-index: 2; Defi nes how layers are positioned over each other. The layer with the highest number is on the top.

5. JavaScript Basics

CHAPTER 5: JavaScript Basics 88 5. JavaScript Basics 5.1 An Introduction to JavaScript A Programming language for creating active user interface on Web pages JavaScript script is added in an HTML page,