Testen Sie Ihre Fähigkeiten: Objektgrundlagen

Der Zweck dieses Fähigkeitentests besteht darin, Ihnen zu helfen, zu bewerten, ob Sie unseren Artikel JavaScript Objektgrundlagen verstanden haben.

Hinweis: Um Hilfe zu erhalten, lesen Sie unseren Testen Sie Ihre Fähigkeiten Leitfaden. Sie können uns auch über einen unserer Kommunikationskanäle erreichen.

Objektgrundlagen 1

In dieser Aufgabe wird Ihnen ein Objektliteral bereitgestellt, und wir möchten, dass Sie daran arbeiten.

Um die Aufgabe abzuschließen:

Speichern Sie den Wert der name Eigenschaft in der Variablen catName unter Verwendung der Klammernotation.
Führen Sie die Methode greeting() mit der Punktnotation aus (sie wird die Begrüßung in die Konsole ausgeben).
Aktualisieren Sie den Wert der color Eigenschaft auf black.

<section></section>

* {
  box-sizing: border-box;
}

p {
  color: purple;
  margin: 0.5em 0;
}

Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus (es wird noch nichts angezeigt):

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

const cat = {
  name: "Bertie",
  breed: "Cymric",
  color: "white",
  greeting: function () {
    console.log("Meow!");
  },
};

// Don't edit the code above here!

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
let para1 = document.createElement("p");
let para2 = document.createElement("p");
para1.textContent = `The cat's name is ${catName}.`;
para2.textContent = `The cat's color is ${cat.color}.`;
section.appendChild(para1);
section.appendChild(para2);

Die aktualisierte Ausgabe sollte folgendermaßen aussehen:

Klicken Sie hier, um die Lösung anzuzeigen

Ihr fertiges JavaScript sollte in etwa so aussehen:

// ...
// Don't edit the code above here!

const catName = cat["name"];
cat.greeting();
cat.color = "black";

// Don't edit the code below here!
// ...

const cat = {
  name: "Bertie",
  breed: "Cymric",
  color: "white",
  greeting: function () {
    console.log("Meow!");
  },
};

const catName = cat["name"];
cat.greeting();
cat.color = "black";

const section = document.querySelector("section");
let para1 = document.createElement("p");
let para2 = document.createElement("p");
para1.textContent = `The cat's name is ${catName}.`;
para2.textContent = `The cat's color is ${cat.color}.`;
section.appendChild(para1);
section.appendChild(para2);

Objektgrundlagen 2

In unserer nächsten Aufgabe möchten wir, dass Sie ein eigenes Objektliteral erstellen, um eine Ihrer Lieblingsbands darzustellen.

Um die Aufgabe abzuschließen:

Erstellen Sie ein Objektliteral namens band, das die folgenden Eigenschaften enthält:
- name: Ein String, der den Namen der Band darstellt.
- nationality: Ein String, der das Land darstellt, aus dem die Band stammt.
- genre: Welche Art von Musik die Band spielt.
- members: Eine Zahl, die die Anzahl der Mitglieder der Band darstellt.
- formed: Eine Zahl, die das Jahr darstellt, in dem die Band gegründet wurde.
- split: Eine Zahl, die das Jahr darstellt, in dem die Band sich aufgelöst hat, oder false, wenn sie noch zusammen sind.
- albums: Ein Array, das die von der Band veröffentlichten Alben darstellt. Jedes Array-Element sollte ein Objekt enthalten, das die folgenden Mitglieder enthält:
  - name: Ein String, der den Namen des Albums darstellt.
  - released: Eine Zahl, die das Jahr darstellt, in dem das Album veröffentlicht wurde.
    
    Hinweis: Fügen Sie mindestens zwei Alben im albums Array hinzu.
Schreiben Sie einen String in die Variable bandInfo, der eine kleine Biografie enthält, die ihren Namen, ihre Nationalität, ihre aktiven Jahre und ihren Stil sowie den Titel und das Veröffentlichungsdatum ihres ersten Albums beschreibt.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus (es wird noch nichts angezeigt):

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

let bandInfo;

// Don't edit the code above here!

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
let para1 = document.createElement("p");
para1.textContent = bandInfo;
section.appendChild(para1);

Die aktualisierte Ausgabe sollte in etwa so aussehen:

Klicken Sie hier, um die Lösung anzuzeigen

Ihr fertiges JavaScript sollte in etwa so aussehen:

// ...
// Don't edit the code above here!

const band = {
  name: "Black Sabbath",
  nationality: "British",
  genre: "heavy metal",
  members: 4,
  formed: 1968,
  split: 2025,
  albums: [
    {
      name: "Black Sabbath",
      released: 1970,
    },
    {
      name: "Paranoid",
      released: 1970,
    },
    {
      name: "Master of Reality",
      released: 1971,
    },
    {
      name: "Vol. 4",
      released: 1972,
    },
  ],
};

bandInfo = `The ${band.nationality} ${band.genre} band ${band.name} were active between ${band.formed} and ${band.split}. Their first album, ${band.albums[0].name}, was released in ${band.albums[0].released}.`;

// Don't edit the code below here!
// ...

let bandInfo;

const band = {
  name: "Black Sabbath",
  nationality: "British",
  genre: "heavy metal",
  members: 4,
  formed: 1968,
  split: 2025,
  albums: [
    {
      name: "Black Sabbath",
      released: 1970,
    },
    {
      name: "Paranoid",
      released: 1970,
    },
    {
      name: "Master of Reality",
      released: 1971,
    },
    {
      name: "Vol. 4",
      released: 1972,
    },
  ],
};

bandInfo = `The ${band.nationality} ${band.genre} band ${band.name} were active between ${band.formed} and ${band.split}. Their first album, ${band.albums[0].name}, was released in ${band.albums[0].released}.`;

const section = document.querySelector("section");
let para1 = document.createElement("p");
para1.textContent = bandInfo;
section.appendChild(para1);

Objektgrundlagen 3

In dieser Aufgabe möchten wir, dass Sie zum cat Objektliteral aus den Objektgrundlagen 1 zurückkehren.

Um die Aufgabe abzuschließen:

Schreiben Sie die Methode greeting() so um, dass sie die Nachricht "Hello, said Bertie the Cymric." in die Browserkonsole ausgibt, jedoch auf eine Weise, die für jedes Katzenobjekt derselben Struktur funktioniert, unabhängig von seinem Namen oder seiner Rasse.
Schreiben Sie Ihr eigenes Objekt namens cat2, das die gleiche Struktur und greeting() Methode hat, jedoch mit einem anderen name, breed und color.
Rufen Sie beide greeting() Methoden auf, um zu prüfen, ob sie geeignete Begrüßungen in die Konsole ausgeben.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus (es wird nichts angezeigt):

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

const cat = {
  name: "Bertie",
  breed: "Cymric",
  color: "white",
  greeting: function () {
    console.log("Meow!");
  },
};

// Don't edit the code above here!

// Add your code here

Wir haben keinen fertigen Inhalt für diese Aufgabe bereitgestellt, da nichts in das DOM ausgegeben wird. Die Ausgabe wird alles in die Konsole geloggt.

Klicken Sie hier, um die Lösung anzuzeigen

Ihr fertiges JavaScript sollte in etwa so aussehen:

// ...
// Don't edit the code above here!

const cat2 = {
  name: "Elfie",
  breed: "Aphrodite Giant",
  color: "ginger",
  greeting: function () {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  },
};

cat.greeting();
cat2.greeting();

const cat = {
  name: "Bertie",
  breed: "Cymric",
  color: "white",
  greeting: function () {
    console.log("Meow!");
  },
};

const cat2 = {
  name: "Elfie",
  breed: "Aphrodite Giant",
  color: "ginger",
  greeting: function () {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  },
};

cat.greeting();
cat2.greeting();

In dem Code, den Sie für Aufgabe 3 geschrieben haben, sind die greeting() Methode und die Eigenschaften zweimal definiert, einmal für jede Katze. Dies ist nicht ideal: Es verstößt gegen ein Prinzip der Programmierung namens DRY oder "Don't Repeat Yourself" (Wiederholen Sie sich nicht). In dieser Aufgabe möchten wir, dass Sie den Code so verbessern, dass die Objekteigenschaften nur einmal definiert werden.

Um die Aufgabe abzuschließen:

Erstellen Sie eine JavaScript-Klasse, die Katzeninstanzen definiert
Verwenden Sie Ihre Klasse zusammen mit dem new Schlüsselwort, um die cat und cat2 Instanzen zu erstellen.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus (es wird nichts angezeigt):

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

const cat = {
  name: "Bertie",
  breed: "Cymric",
  color: "white",
  greeting: function () {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  },
};

const cat2 = {
  name: "Elfie",
  breed: "Aphrodite Giant",
  color: "ginger",
  greeting: function () {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  },
};

// Don't edit the code below here!

cat.greeting();
cat2.greeting();

Wir haben keinen fertigen Inhalt für diese Aufgabe bereitgestellt, da nichts in das DOM ausgegeben wird. Die Ausgabe wird alles in die Konsole geloggt.

Klicken Sie hier, um die Lösung anzuzeigen

Ihr fertiges JavaScript sollte in etwa so aussehen:

class Cat {
  constructor(name, breed, color) {
    this.name = name;
    this.breed = breed;
    this.color = color;
  }
  greeting() {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  }
}

const cat = new Cat("Bertie", "Cymric", "white");
const cat2 = new Cat("Elfie", "Aphrodite Giant", "ginger");

// Don't edit the code below here!
// ...

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Testen Sie Ihre Fähigkeiten: Objektgrundlagen

Objektgrundlagen 1

Objektgrundlagen 2

Objektgrundlagen 3

Objektgrundlagen 4

Help improve MDN