Assignment 6: JavaScript

Resources

• Here's a video I made on using JavaScript to make Carto maps
• The the Carto.js documentation is pretty exhaustive and will cover more than you need to know.
• The Mozilla Developer Network contains an excellent JavaScript reference.

Part 1: JavaScript

You're not expected to fully know JavaScript for this course. However, understanding the fundamentals and being able to find answers to JavaScript questions and will make the next few weeks much easier for you. With that in mind, explore the introductory lessons from one or two of the following JavaScript learning resources:

• Khan Academy (online interactive course)
• Codecademy (online interactive course)
• Eloquent JavaScript (book, mostly text--this gets advanced pretty quickly!)
• javascripting (interactive, in Glitch)
• lynda.com: JavaScript Essential Training (videos, usually expensive but free through the New School)
• free video resources such as this one on JavaScript variables

For example, you might want to start with some interactive exercises, then read a bit about the topics covered in the exercise. This week I would like you to get acquainted with:

• variables,
• arrays, and
• objects

in JavaScript. This would be chapters one, two, and four if you want to go by Eloquent JavaScript.

Please include a screenshot to show that you looked at the resource(s) and a short summary of where you got to with the resources.

Part 2: Use Carto.js to put a map on your page

Improve your page from Assignment 5, Part 2.

Replace the embedded map on your web page you made for Assignment 5, Part 2. Use Carto.js to put the map on the page rather than using the embed code (iframe) that you used previously. This Glitch app contains an example of doing this. I recommend taking this approach:

1. Open the example Glitch app.
2. Copy the relevant parts from the index.html in the example to your index.html. These parts will be under comments that mention "Load Leaflet CSS" and "Load Leaflet and Carto libraries".
3. Copy all of the JavaScript from script.js in the example to your script.js. Customize the parts you need to customize:
   1. Replace my username with your username.
   2. Replace my dataset name with your dataset name.
   3. Replace my CartoCSS with your own.

For this assignment it is sufficient to load one of your map's layers with no popups or legends. We will get to these in future weeks.

Submitting your work

Submit a screenshot showing that you've explored some JavaScript learning options for Part 1.

Submit a link to your page on Glitch for Part 2.

Please include a short paragraph response or summary of your work.