Objects: Labeled Data with name and role

The previous lesson built skill cards from a string array. This lesson introduces objects: values with labeled fields. You drive the header from a profile object, then upgrade each skill to an object and read skill.name in the loop.

The concept

Here is your page with cards rendered from string skills. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <p class="tagline"></p>
      <button type="button" class="change-tagline btn">Change tagline</button>
      <button type="button" class="theme-toggle btn">Toggle theme</button>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul class="skill-row"></ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
    <script>
      const pageOwner = "Your Name";
      const skillCount = 3;
      console.log(pageOwner);
      console.log(skillCount);
      function setTagline(text) {
        const tagline = document.querySelector(".tagline");
        tagline.textContent = text;
        tagline.classList.add("is-set");
      }
      function showAltTagline() {
        setTagline("Learning in public");
      }
      setTagline("Building things for the web");
      const changeButton = document.querySelector(".change-tagline");
      changeButton.addEventListener("click", showAltTagline);
      let theme = "light";
      function toggleTheme() {
        if (theme === "dark") {
          document.body.classList.remove("theme-dark");
          theme = "light";
        } else {
          document.body.classList.add("theme-dark");
          theme = "dark";
        }
      }
      const themeButton = document.querySelector(".theme-toggle");
      themeButton.addEventListener("click", toggleTheme);
      const skills = ["HTML", "CSS", "JavaScript"];
      console.log(skills.length);
      console.log(skills[0]);
      const skillRow = document.querySelector(".skill-row");
      for (const skill of skills) {
        const item = document.createElement("li");
        item.classList.add("skill-card");
        item.textContent = skill;
        skillRow.append(item);
      }
    </script>
  </body>
</html>

RUN TO SEE YOUR PAGE

The cards still come from strings. The heading and tagline still use separate values. You are about to group labeled data.

Run this and watch the CONSOLE:

DOT NOTATION READS A FIELD · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The CONSOLE shows Your Name, then Learner. Curly braces hold fields. Each field, officially a property, has a name on the left and a value on the right. CSS declarations had properties too; JavaScript reuses the word for the same shape, a name on the left and a value on the right. The whole curly-brace value is an object.

Read a field with a dot: profile.name.

Drive the header from one object:

HEADER FROM A PROFILE OBJECT · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The heading and tagline both come from profile. Change the object, and both update from the same place.

Now upgrade the skills list so each item is an object, and the card text uses skill.name:

SKILL.NAME ON EACH PASS · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

for (const skill of skills) still walks the array. Now skill is an object, so the label is skill.name. A role field can sit beside name for later use even if the card only shows the name today.

The syntax

const profile = {
  name: "Your Name",
  tagline: "Building things for the web",
};
 
const skills = [
  { name: "HTML", role: "Structure" },
  { name: "CSS", role: "Look" },
  { name: "JavaScript", role: "Behaviour" },
];
 
for (const skill of skills) {
  item.textContent = skill.name;
}

{ key: value } creates an object. Each field is officially a property.

object.key reads one property.

When array items are objects, the loop variable is an object. Read the property you need.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Objects</title>
    <style>
      .tagline.is-set {
        color: teal;
        font-weight: 600;
      }
      .skill-card {
        padding: 0.5rem;
      }
    </style>
  </head>
  <body>
    <h1></h1>
    <p class="tagline"></p>
    <ul class="skill-row"></ul>
    <script>
      function setTagline(text) {
        const tagline = document.querySelector(".tagline");
        tagline.textContent = text;
        tagline.classList.add("is-set");
      }
      const profile = {
        name: "Your Name",
        tagline: "Building things for the web",
      };
      document.querySelector("h1").textContent = profile.name;
      setTagline(profile.tagline);
      const skills = [
        { name: "HTML", role: "Structure" },
        { name: "CSS", role: "Look" },
        { name: "JavaScript", role: "Behaviour" },
      ];
      const skillRow = document.querySelector(".skill-row");
      for (const skill of skills) {
        const item = document.createElement("li");
        item.classList.add("skill-card");
        item.textContent = skill.name;
        skillRow.append(item);
      }
    </script>
  </body>
</html>

One profile object for the header. One skills array of objects. The loop reads skill.name.

Common mistakes

You set textContent to the whole object. Run this:

THE WHOLE OBJECT IS NOT THE LABEL · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The card does not show HTML. It shows a default object string such as [object Object]. After the upgrade, skill is an object. Use skill.name.

You mistype the property name. You write skill.Name or skill.title while the object uses name. The card is blank or shows undefined. Property names are exact. Match the key you wrote in the object literal.

You upgrade the array but leave textContent = skill from the string version. The loop still runs. The cards show a default object string such as [object Object] instead of HTML. When each item becomes an object, update the line that chooses the visible text to skill.name.

Try it yourself

Drive the header from a profile object, then upgrade skills to objects. Confirm each step in the preview. The header stays above the fold. After each Run that asks about the skill cards, scroll the preview to Skills if you do not see them yet.

Run the starting code below. Scroll the preview to Skills if you do not see it yet. Confirm the skill cards still render from the string array. Confirm the buttons still work.
Near the top of the script (above or beside your tagline helpers), add a profile object with at least name and tagline string fields. Select the h1 and set its textContent to profile.name. Call setTagline(profile.tagline) instead of the hard-coded first tagline string (keep the change-tagline button on its own alternate string). Run it. Confirm the header still shows your name and tagline.
Change the skills array from strings to objects. Each object needs a name field (add role if you want a second label). Run it once before fixing the loop if you like, and notice the cards break.
In the for (const skill of skills) loop, set item.textContent = skill.name. Run it. Scroll to Skills. Confirm three cards show the skill names again.
Break it on purpose: set textContent back to skill (the whole object). Run it. Scroll to Skills. Confirm the cards no longer show clean labels. Put skill.name back and confirm the names return.
Retire the early scaffolding: delete const pageOwner, const skillCount, and the four console.log lines that print pageOwner, skillCount, skills.length, and skills[0]. Those opened the act and checked length by hand; skills.length already counts, and the cards show the list. Run it. Confirm the page still works and the CONSOLE no longer prints those four lines.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

Your page now keeps labeled data in objects, and the skill loop practises skill.name. The early console scaffolding is gone. The next lesson reads what someone types into the contact form and answers on the page.