Objects

When working with HTML elements in JavaScript, you are often using or changing the object's properties and methods.

// example properties
textDisplay.innerText = "Hello!";
headshotImage.src = "images/headshot.webp";

// example methods
audioFile.play();
compass.style.setProperty("font-size", "2rem");

Remember that properties are charactertistcs about the object (often corresponding to HTML attrbutes), while methods are actions that the object can perform.

You can also define your own objects to organize and provide context for data about something. For example, if you were describing Miami University, you might want to include information about the type of institution, when it was established, and where it is located. The object data type stores these as key/value pairs.

// format is key: value

const miamiOh = {
  type: "Public", // type is key, "Public" is value
  established: 1809, // established is key, 1809 is value
  location: "Oxford, OH" // location is key, "Oxford, OH" is value
};

The key provides context for the values. You can reference the individual values of an object using dot notation.

miamiOh.type; // returns "Public"
miamiOh.established; // returns 1809

You have already been using dot notation to interface with objects in JavaScript.

// the querySelector() method of the document object
document.querySelector("text-input");

// the innerText property of the textInput object
textInput.innerText;

See the Pen Objects (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.