pset8: cs50 macwilliam javascript pset8: cs50...
TRANSCRIPT
![Page 1: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/1.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
pset8: CS50 Shuttle
Tommy MacWilliam
November 6, 2011
![Page 2: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/2.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Today’s Music
I Tommy’s ChoiceI Never Let Me Down (Kanye West)I Bulletproof (La Roux)I E.T. (Katy Perry ft. Kanye West)I Follow me Down (3OH!3)I Comedy Tragedy History (Akala)
![Page 3: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/3.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Today
I JavaScript <333333333333333333333333333333I Distro codeI populate()I pickup()I dropoff()
![Page 4: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/4.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
JavaScript
I JavaScript is the best programming language everI other people will try to tell you otherwise
I they are wrong
![Page 5: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/5.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
JavaScript
I JavaScript is NOT JavaI Java is not the best programming language ever
I marketing ploy by Sun and OracleI the “hot new web-programming language”
![Page 6: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/6.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
JavaScript
I PHP: server-sideI runs on server, produces output, browser downloads
I JavaScript: client-sideI browser downloads, runs code
![Page 7: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/7.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
JavaScript
I syntax (also) very similar to C and PHPI if, else, for, while, etc.I strings are built in (just like PHP)I variables don’t need dollar signs (yay!)
I no types for variables or functionsI x = 5;I function increment(x) { return ++x; }
![Page 8: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/8.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
JavaScript
I insert into page using <script>I <script>alert("oh hi, mark!")</script>I <script src="file.js"></script>
![Page 9: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/9.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
JavaScript
I example time!I simple.html
![Page 10: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/10.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Arrays
I lists created with the Array function
var a = Array(5);a[0] = 5;a[1] = "tommy";
![Page 11: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/11.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Arrays
I can also be created with []I JavaScript arrays are dynamically-sized!
var b = [];b[3] = 3.14159;var c = [1, 2, 3, 4];
![Page 12: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/12.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Associative Arrays
I just like PHP, JavaScript also has associative arrays(hashtables) built-in
var a = {};hash["key"] = "value";var tf = { name: "tommy", coolness: 100 };
![Page 13: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/13.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Iterating
I for in can iterate over both array and associative array
var array = [1, 2, 3];for (var i in array)
alert(array[i]);
![Page 14: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/14.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Objects
I associative arrays and objects (remember Stock?) arethe same
var tf = { name: "tommy", coolness: 100 };tf["name"] == "tommy"tf.coolness == 100
![Page 15: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/15.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Objects
I members can also be functions
var tf = { name: "tommy", grade: function() { return "A"; }};tf.grade();
![Page 16: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/16.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Arrays
I example time!I arrays.html
![Page 17: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/17.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Scope
I in C, loops, conditions, and functions limit the scope ofvariables
I in JavaScript, only functions limit the scope of variables
![Page 18: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/18.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Scope
I var creates a local variableI where local means to the current function only
I without var, variable is global
![Page 19: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/19.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Scope
I example time!I scope.html
![Page 20: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/20.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Distro Code
I buildings.js, houses.js: arrays containing objectsrepresenting buildings
I passengers.js: array containing objects representingstaff
I math3d.js: math, I’m no good at mathI shuttle.js: state of shuttleI service.js: functions for implementing shuttle serviceI index.html: brings it all together
![Page 21: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/21.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Distro Code
I example time!
![Page 22: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/22.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
populate
I goal: remember location of each passengerI we need to know where they are to pick them up!
![Page 23: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/23.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
TODO
1. add passenger to passengers array
![Page 24: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/24.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Arrays, again
I need to keep track of each passenger’s name, house,placemark, marker, etc.
I there are PASSENGERS.length total passengers in theworld
I sounds like a good size for an array
![Page 25: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/25.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Objects, again
I when using for (var i in array), i is the currentindex in the array
I creating objects in JavaScript is easy!
var o = { key: "value" };var p = { something: o };
![Page 26: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/26.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
TODO
1. add passenger to passengers array
![Page 27: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/27.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
pickup
I goal: add passengers to the shuttleI also need to remove them from the worldI also need to remove them from the map
![Page 28: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/28.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
TODO
1. detect if in range2. add passenger to shuttle (if possible)3. remove placemark4. remove marker
![Page 29: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/29.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Distance
I shuttle.distance(lat, lng) calculates distance fromcurrent position of shuttle to an arbitrary point
I lat: latitude of point to get distance toI lng: longitude of point to get distance to
![Page 30: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/30.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Finding Passengers
I we already know where passengers are frompopulate()
I since we remembered a passenger’s placemark,marker, etc.
I need to check if we are near any passengerI loop through all passengers and calculate
shuttle.distance
![Page 31: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/31.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Locating Passengers
I location information given by placemark associatedwith passenger
I from that placemark, need to getGeometry()associated with it
I from geometry, you can getLatitude() andgetLongitude()
![Page 32: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/32.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
TODO
1. detect if in range2. add passenger to shuttle (if possible)3. remove placemark4. remove marker
![Page 33: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/33.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Adding Passengers
I can only add passengers if shuttle.seats has roomI has a fixed number of seats, given by
shuttle.seats.length
I iterate through seats and look for an empty seat!I store passenger in the seat
I in range of multiple passengers? add as many aspossible!
![Page 34: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/34.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Displaying Passengers
I chart() displays position of passengers in shuttleI iterates over each seat, but shouldn’t say TODO!
![Page 35: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/35.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
TODO
1. detect if in range2. add passenger to shuttle (if possible)3. remove placemark4. remove marker
![Page 36: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/36.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Placemark
I remember, placemark is photo on the 3D worldI to get everything in world, need to var features =
earth.getFeatures()I once you have features, you can
features.removeChild(p)I where p is a placemark on the world
![Page 37: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/37.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
TODO
1. detect if in range2. add passenger to shuttle (if possible)3. remove placemark4. remove marker
![Page 38: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/38.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Marker
I remember, marker is an icon on the 2D mapI can remove a marker m with m.setMap(null);
![Page 39: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/39.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
TODO
1. detect if in range2. add passenger to shuttle (if possible)3. remove placemark4. remove marker
![Page 40: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/40.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
dropoff
I goal: remove passengers from shuttleI only if in range of destination
![Page 41: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/41.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
TODO
1. check if in range of any houses2. drop off all passengers going to current location
![Page 42: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/42.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Houses
I don’t forget about HOUSES array!I gives latitude and longitude of each house
I good thing we remembered which house eachpassenger was going to!
![Page 43: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/43.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
TODO
1. check if in range of any houses2. drop off all passengers going to current location
![Page 44: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/44.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Dropping off
I can use shuttle.distance() again to calculatedistance
I to remove passenger, just set position in array to nullI can technically resize the array dynamically, but that’s
harder!I chart() assumes a fixed number of seats
I make sure to check all passengers in shuttle
![Page 45: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/45.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
TODO
1. check if in range of any houses2. drop off all passengers going to current location
![Page 46: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/46.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Extra Features
I pointsI timerI group passengers by houseI flyingI teleportationI change speedI fuelI make your own!
![Page 47: pset8: CS50 MacWilliam JavaScript pset8: CS50 Shuttled2o9nyf4hwsci4.cloudfront.net/2011/fall/psets/8/walkthrough8.pdf · I E.T. (Katy Perry ft. Kanye West) I Follow me Down (3OH!3)](https://reader031.vdocument.in/reader031/viewer/2022021513/5b06a6857f8b9ae9628d5954/html5/thumbnails/47.jpg)
pset8: CS50Shuttle
TommyMacWilliam
JavaScript
Distro Code
populate
pickup
dropoff
Thanks!
These werewalkthroughs.