1) Please download Class 18 Starter Code
2) Move the following into your class-work
directory:
light-box-example
raindrops-example
google-maps-example
3) Solutions to cash-register
and citi-pix
included
Final Projects:
⇒ Due in 9 days!
No Class:
⇒ Wednesday, 11/21
Arrays
Final Project Work
1) Find a partner
2) Ask your partner what their final project is
3) Inquire if your partner has encountered challenges
4) Commiserate
Plugins are pre-written pieces of JavaScript
Built to solve a particular issue:
⇒ Fullscreen video player
⇒ Image carousel
Easy to install - add plugin's script
tag below jQuery*:
<script src="jquery.js"></script>
<script src="my-super-plugin.js"></script>
There are 1000's of plugins; be judicious:
⇒ Recently updated
⇒ Well-documented
⇒ The more contributors the better
⇒ Open source
⇒ Hosted on GitHub
1) Read the documentation
2) Seriously, read the documentation
3) Look for, and copy, examples
4) Start simple, then add complexity
5) Search for tutorials/examples if you get stuck
6) Open a GitHub issue if you think you found a bug
1) Open light-box-example
in Sublime Text
2) Your goal: get Lightbox working!
3) Read the Lightbox Documentation
4) Note that all the required assets are downloaded
1) Open raindrops-example
2) Visit http://daniellaharel.com/raindrops/
3) Find a partner
4) Successfully implement raindrops.js
5) Note: you will have to download the script
API ⇒ Application Programming Interface
Instructions for interacting with a piece of software
Middleman: allows different pieces of software to talk
Google Maps JavaScript API V3 Documentation
Open google-maps-example
in Sublime Text
1) Obtain API Key
1.5) As of July 2018: Store a credit card...
2) Add starter HTML and CSS
3) Enable map using JS
4) ???
5) Profit
center
Google Maps require:
⇒ center
⇒ zoom
Challenge: change the center
to NYC
⇒ Hint: look up NYC's coordinates!
⇒ 40.7127 N, 74.0059 W
Markers require:
⇒ position: {lat: y, lng: x}
⇒ map
Challenge: use the following to add a marker at NYC
var marker = new google.maps.Marker({
position: {lat: y, lng: x},
map: map,
title: 'New York, NY'
});
Easiest way to add multiple markers:
var marker1 = new google.maps.Marker({
position: {lat: 40, lng: 50},
map: map,
});
var marker2 = new google.maps.Marker({
position: {lat: 45, lng: 45},
map: map,
});
var marker3 = new google.maps.Marker({
position: {lat: 25, lng: 75},
map: map,
});
...
Is this efficient? Say I want to add 100 markers? 1,000?
Arrays are a list-like data structure of comma-separated values
Useful for storing a sequence of related data
Declare arrays using square brackets: [ ]
var friends = ['Moe', 'Larry', 'Curly']
Element - an item inside the array
Index - numerical location of each element in the array
⇒ Starts at position 0 - aka "0-indexed"
JS provides multiple methods for array creation:
⇒ The new
keyword
var drinks = new Array('beer', 'coffee', 'water');
⇒ Using the array literal
var drinks = ['beer', 'coffee', 'water'];
While similar, there are crucial differences
Use the array literal for now
Use [index]
to retrieve values from an array
Remember that arrays are 0-indexed
var drinks = ['beer', 'coffee', 'water'];
drinks[0]
// 'beer'
drinks [0+1]
// 'coffee'
var x = drinks.length - 1
drinks[x]
// 'water'
drinks[4]
// undefined
Consider an array of names:
var boroughs = ['manhattan', 'the bronx', 'queens', 'brooklyn', 'staten island']
How would we console.log
all the names in this array?
console.log(boroughs[0])
console.log(boroughs[1])
console.log(boroughs[2])
console.log(boroughs[3])
console.log(boroughs[4])
Is this efficient/scalable?
Iteration: process of running the same function for every element in an array
var boroughs = ['manhattan', 'the bronx', 'queens', 'brooklyn', 'staten island']
boroughs.forEach(logBorough)
function logBorough(borough) {
console.log(borough)
}
// 'manhattan'
// 'the bronx'
// 'queens'
// 'brooklyn'
// 'staten island'
Apply array iteration with Google Maps Markers:
1) Create an array of location objects
⇒ Each should contain lat
, lng
, and title
2) Apply the forEach
method to the array
3) Write a function that applies the marker to the map
Create an array of location objects containing lat
, lng
, and title
:
var locations = [
{
lat: 40.7484444,
lng: -73.9878441,
title: 'Empire State Building',
},
{
lat: 40.7516248,
lng: -73.9776907,
title: 'Chrysler Building',
},
{
lat: 40.7339877,
lng: -73.980817,
title: 'Flatiron Building',
},
]
Apply the forEach
method to the array
locations.forEach(processLocation)
function processLocation(location) {
console.log(location)
}
Use console.log
to test that code is working
Update processLocation
to render the markers
function processLocation(location) {
var marker = new google.maps.Marker({
position: {
lat: location.lat,
lng: location.lng,
},
title: location.title,
map: map,
})
}
In-Class Final Project Work