WEEK 9: Objects
(March 3 & 5)

To Do This Week:

Work on Map Projects…

---

Module Notes

Elit projects – add your name and project name! also, instructions if the interface makes it unclear what to do

Map Project

Map Projects List

Map Project DUE Monday March 19th

Grading Criteria:

• Effort in scripting and utilizing the MapBox API
• JS steps articulated in the script (please break lines!)
• Interaction design quality
• Applied Visual hierarchy 

Requirements:

• Markers: Ensure your map contains a minimum of 5 markers.
• Functional JavaScript: Verify that your Map’s JavaScript functions properly and is free of errors. Check the console for any issues. 
• User Experience: Design the map’s interaction with the user in mind. Ensure clarity and accessibility in interactions.
• Color Scheme: Maintain a harmonious color scheme across the map and page elements.
• Visual Hierarchy: Implement thoughtful typography and graphic elements with clear visual hierarchy.
• Image Presentation: Ensure images are proportionally presented within the narrative.
• Project Comments: Include comments in the <script> section for your natural language steps,  and any info about how you used ChatGPT.
• JavaScript Comments: Add your own comments within your script to describe the purpose of the JavaScript statements.
• Folder Structure: Upload your project in a folder named “map”, including the “index.html” file, external JavaScript file if applicable, and the images folder.
• Submission Check: Before submission, verify that the your project url works correctly. Validate and then submit the working URL to Canvas.
• Communication for Delays: If you anticipate being late with your project submission, notify me via Slack beforehand with your expected completion time.

JS Review:

• Statements
• Variables
• Data Types: Strings, numbers, booleans, arrays
• Basic Operators and “Shortcut” Operators
• Comparison Operators
• Arrays
• JavaScript Commenting
• Objects / Methods / Properties
• Functions
• For Loops
• While Loops
• Conditional Statements
• Scope

In-Class Exercise:

JS step-by-step

---

Objects and Classes:

Object Literal (simple object):

let dog = { 
   name: "Buddy", 
   breed: "Golden Retriever", 
   age: 3, 
   bark: function() { 
      console.log("Woof!"); 
   } 
};

Object Constructor (an abstract object to generate specific “instances” of a dog):

function Dog(name, breed, age) {
   this.name = name;
   this.breed = breed;
   this.age = age;
   this.bark = function() {
      console.log("Woof!");
   };
}

let myDog = new Dog("Buddy", "Golden Retriever", 3);

Instantiation of the Map object from the MapBox API:

let map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://styles/mapbox/satellite-v9',
   center: [-119.262833, 46.329140], // starting position [lng, lat]
   zoom: 5 // starting zoom
});

Object Constructor (a template for creating multiple objects with similar properties and methods):

function Mealplanner(breakfast, lunch, dinner) {
   this.breakfast = breakfast;
   this.lunch = lunch;
   this.dinner = dinner;
   this.message = function() {
      alert("Bon appetit!");
   };
}

let myMeals = new Mealplanner("bagel", "soup", "chicken");

Classes (a more convenient way to write code that in pre-ES6 would be more complex):

class Dog { 
   constructor(name, breed, age) { 
      this.name = name; 
      this.breed = breed; 
      this.age = age; 
   } 
   bark() { 
      console.log("Woof!"); 
   } 
}

let myDog = new Dog("Buddy", "Golden Retriever", 3);

in-class exercise

JS Object review

---

WORKSHOP