var myPrimes = [2,3,5,7,11]; /* The function forEach does something for every member of an array. action is the name of the function passed as an argument It looks like action is a function that is passed each member of the array in turn. It also looks like because forEach is used within sum forEach can also have access to total, so total is changed each time that the add function is applied to the array member. The adding up function being passed is called an anonymous function (because it is defined straight off the bat with the function keyword rather than being given a name and the name then being passed I think?) */ function forEach(array, action){ for (var n = 0; n != array.length; n++) action(array[n]); } function sum(numbers){ var total = 0; forEach(numbers,function(num){ total += num; }); return total; //you forgot to put this in the first time and it returned undefined } document.write(sum(myPrimes)); /* This case just illustrates passing a function by name rather than passing as an anonymous function. Note that the outside function - multiply - is really using two inner functions. One function is forEach that is defined elsewhere and the other is the mult function that actually does the work of multiplying stuff up. Note also that the outside function - multiply - also contains a variable that are used by the mult function as well - i.e. total and multiply is passed as an argument the array that it works on, although all mult does with the array is pass it off to forEach. So in other words multiply is a big function box that gets passed some data from outside (myPrimes), creates its own little variable - total - and function - mult and then uses a function form outside - forEach. The difficult part to understand is that multiply borrows the forEach function from outside its world by passing it its own named function - mult - although forEach is set up so that it can accept functions being passed as arguments. I guess that this is the function composition that gets talked about. Remember that multiply still has to return something to the outside world - i.e. total after multiplication!! */ function multiply(numbers){ var total = 1; function mult(x){ total *= x; } forEach(myPrimes, mult) return total; //and you forgot this time as well!!! } document.write(multiply(myPrimes)); /* Quote from the textbook: "...what forEach does is take an algorithm, in this case 'going over an array' and abstract it. The 'gaps' in the algorithm, in this case what to do with each of the elements, are filled by functions which are passed to this abstracted algorithm function. forEach is function that acts on another function - a higher order function. */
Tuesday, December 31, 2013
Eloquent javascript - passing functions as arguments
Friday, December 27, 2013
My first project a map plus some markers and styling
This is the first project in Javascript using the google maps api.
1: /*
2: this was my first program in javascript to explore the Google Maps API
3: */
4: /*
5: This line adds a DomListener where the arguments are (1) the name of the DOM object (2) a string with the
6: event associated with the object that you are listening for and (3) the name of the function which runs when
7: the even occurs.
8: QN: How to you pass arguments to the function? Or do you avoid doing so?
9: */
10: google.maps.event.addDomListener(window, 'load', booble);
11: function booble() {
12: /*
13: This section declares a few google LatLng objects to hold the co-ordinates of markers and locations.
14: Some points that I noticed about LatLng objects:
15: (1) Note that you cannot actually change the Lat or the Long of the object after you create it!
16: (2) You use the lat() or lng() methods to return a number with the Lat or Lng
17: */
18: var chorleywood = new google.maps.LatLng(51.65,-0.48333);
19: var cw2 = new google.maps.LatLng(51.6505,-0.48333);
20: var hiroo = new google.maps.LatLng(35.6554357,139.71483349999994);
21: var myMarkers = [];
22: /*
23: addMyMarker takes three parameters ands adds on to myMarkers a new marker location
24: note that you can use the push() method of the array to push() on a newly created
25: marker object
26: */
27: var addMyMarker = function(title, location){
28: myMarkers.push(new google.maps.Marker({position:location,title:title, draggable:false}));
29: }
30: /*
31: use addMyMarker to push a few more markers on to the myMarkers array one by one
32: */
33: addMyMarker("hello world", chorleywood);
34: addMyMarker("boo big boy",cw2);
35: /*
36: use a for loop to add on even more markers. Use the lat() and long() methods on the existing LatLng object
37: to get some numbers,
38: Note that I tried this function using cw2.lat() directly as a below but it broke the whole program stopping the
39: maps form displaying. I really don't know why this is.
40: */
41: for (var x =1; x !=5 ; x++){
42: var a = cw2.lat();
43: var b = cw2.lng();
44: var temp = new google.maps.LatLng(a + x * 0.0005,b);
45: addMyMarker("poo",temp);
46: }
47: //declare arrays which are
48: var malcolms_styles = new Array();
49: var malcolms_green = new Array();
50: malcolms_green = [
51: {"stylers": [
52: {"hue": "#bbff00"},
53: {"weight": 0.5},
54: {"gamma": 0.5}
55: ]},
56: {"elementType": "labels", "stylers": [
57: {"visibility": "off"}
58: ]},
59: {"featureType": "landscape.natural", "stylers": [
60: {"color": "#a4cc48"}
61: ]},
62: {"featureType": "road", "elementType": "geometry", "stylers": [
63: {"color": "#ffffff"},
64: {"visibility": "on"},
65: {"weight": 1}
66: ]},
67: {"featureType": "administrative", "elementType": "labels", "stylers": [
68: {"visibility": "on"}
69: ]},
70: {"featureType": "road.highway", "elementType": "labels", "stylers": [
71: {"visibility": "simplified"},
72: {"gamma": 1.14},
73: {"saturation": -18}
74: ]},
75: {"featureType": "road.highway.controlled_access", "elementType": "labels", "stylers": [
76: {"saturation": 30},
77: {"gamma": 0.76}
78: ]},
79: {"featureType": "road.local", "stylers": [
80: {"visibility": "simplified"},
81: {"weight": 0.4},
82: {"lightness": -8}
83: ]},
84: {"featureType": "water", "stylers": [
85: {"color": "#4aaecc"}
86: ]},
87: {"featureType": "landscape.man_made", "stylers": [
88: {"color": "#718e32"}
89: ]},
90: {"featureType": "poi.business", "stylers": [
91: {"saturation": 68},
92: {"lightness": -61}
93: ]},
94: {"featureType": "administrative.locality", "elementType": "labels.text.stroke", "stylers": [
95: {"weight": 2.7},
96: {"color": "#f4f9e8"}
97: ]},
98: {"featureType": "road.highway.controlled_access", "elementType": "geometry.stroke", "stylers": [
99: {"weight": 1.5},
100: {"color": "#e53013"},
101: {"saturation": -42},
102: {"lightness": 28}
103: ]}
104: ];
105: malcolms_styles = [
106: {"featureType": "water",
107: "stylers": [
108: {"color": "#19a0d8"}
109: ]},
110: {"featureType": "administrative", "elementType": "labels.text.stroke",
111: "stylers": [
112: {"color": "#ffffff"},
113: {"weight": 6}
114: ]},
115: {"featureType": "administrative", "elementType": "labels.text.fill",
116: "stylers": [
117: {"color": "#e85113"}
118: ]},
119: {"featureType": "road.highway", "elementType": "geometry.stroke",
120: "stylers": [
121: {"color": "#efe9e4"},
122: {"lightness": -40}
123: ]},
124: {"featureType": "road.arterial", "elementType": "geometry.stroke",
125: "stylers": [
126: {"color": "#efe9e4"},
127: {"lightness": -20}
128: ]},
129: {"featureType": "road", "elementType": "labels.text.stroke",
130: "stylers": [
131: {"lightness": 100}
132: ]},
133: {"featureType": "road", "elementType": "labels.text.fill",
134: "stylers": [
135: {"lightness": -100}
136: ]},
137: {"featureType": "road.highway", "elementType": "labels.icon"},
138: {"featureType": "landscape", "elementType": "labels",
139: "stylers": [
140: {"visibility": "off"}
141: ]},
142: {"featureType": "landscape",
143: "stylers": [
144: {"lightness": 20},
145: {"color": "#efe9e4"}
146: ]},
147: {"featureType": "landscape.man_made",
148: "stylers": [
149: {"visibility": "off"}
150: ]},
151: {"featureType": "water", "elementType": "labels.text.stroke",
152: "stylers": [
153: {"lightness": 100}
154: ]},
155: {"featureType": "water", "elementType": "labels.text.fill",
156: "stylers": [
157: {"lightness": -100}
158: ]},
159: {"featureType": "poi", "elementType": "labels.text.fill",
160: "stylers": [
161: {"hue": "#11ff00"}
162: ]},
163: {"featureType": "poi", "elementType": "labels.text.stroke",
164: "stylers": [
165: {"lightness": 100}
166: ]},
167: {"featureType": "poi", "elementType": "labels.icon",
168: "stylers": [
169: {"hue": "#4cff00"},
170: {"saturation": 58}
171: ]},
172: {"featureType": "poi", "elementType": "geometry",
173: "stylers": [
174: {"visibility": "on"},
175: {"color": "#f0e4d3"}
176: ]},
177: {"featureType": "road.highway", "elementType": "geometry.fill",
178: "stylers": [
179: {"color": "#efe9e4"},
180: {"lightness": -25}
181: ]},
182: {"featureType": "road.arterial", "elementType": "geometry.fill",
183: "stylers": [
184: {"color": "#efe9e4"},
185: {"lightness": -10}
186: ]},
187: {"featureType": "poi", "elementType": "labels",
188: "stylers": [
189: {"visibility": "simplified"}
190: ]}
191: ]
192: /* to create a map object you have to pass two parameters to the Map method which is used to construct
193: the map object. One parameter is the DOM model div object that will hold the map and the other is the
194: mapOptions object literal.
195: The mapOptions object literal must have at a minimum "center as a google maps LatNng object plus a zoom level.
196: It can have other optional items as well - such as an array holding the style referred to as styles.
197: */
198: var mapOptions = {
199: center: hiroo,//we are creating a LatLng object which is part of the mapOptions object literal
200: zoom: 15, //this can just be an integer
201: styles: malcolms_green //this has to be an array that conforms to the styles rules
202: };
203: var bigMapOptions = {
204: center: chorleywood,//I can just write out the place name - much better!!
205: zoom: 15,
206: styles: malcolms_styles,
207: backgroundColor: "blue"
208: }
209: /*
210: This section actually creates the map objects. I am not sure whether it has to be at the end of the
211: function or not. Also I am not sure if it has to be before the markers section below
212: */
213: var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
214: var bigmap = new google.maps.Map(document.getElementById("big-map-canvas"),bigMapOptions);
215: /*
216: Go through the myMarkers array to display the markers using the setMap(mapname) method of the marker object
217: */
218: for (var n = 0; n!= myMarkers.length; n++){
219: myMarkers[n].draggable = true;
220: myMarkers[n].setMap(bigmap)
221: }
222: }
Subscribe to:
Comments (Atom)