WEEK 9: Objects
(March 3 & 5)

To Do This Week:

Work on Map Projects…

Class

Review:

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("Animals feel. Don't eat them.");
   };
}

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

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

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);

Maps Project Workshop

Map Projects List

Map Project DUE Monday March 20th

Grading Criteria:

  • Effort in scripting and utilizing the MapBox API.
  • Interaction design quality.
  • Visual hierarchy of elements.

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 brief comments in the <head> section using HTML comments about the API used (MapBox) and any additional resources such as ChatGPT.
  • JavaScript Comments: Add comments within your script to describe the purpose of JavaScript statements, regardless of whether you used ChatGPT.
  • 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 project link works correctly. 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.

To Do This Week:

Work on Map Projects…

Class

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
conditional statements
scope

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('Animals feel. Don\'t eat them.');
  }
}

let myMeals = new Mealplanner('bagel', 'soup', 'chicken')

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

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);

Maps Project Workshop
Map Projects List 

Map Project DUE Monday March 20th

Grading Criteria: Your project will be graded based on the following:

      1. Effort in scripting and utilizing the MapBox API.
      2. Interaction design quality.
      3. Visual hierarchy of elements.

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 brief comments in the <head> section using HTML comments about the API used (MapBox) and any additional resources such as ChatGPT.

JavaScript Comments: Add comments within your script to describe the purpose of JavaScript statements, regardless of whether you used ChatGPT.

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 project link works correctly. 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.