Testen Sie Ihre Fähigkeiten: Variablen

Interaktive Herausforderung

Zunächst bieten wir Ihnen eine unterhaltsame, interaktive Variablen-Herausforderung, die von unserem Lernpartner, Scrimba, erstellt wurde.

Schauen Sie sich das eingebettete "Scrim" an und erledigen Sie die Aufgabe auf der Zeitleiste (das kleine Geistersymbol), indem Sie den Anweisungen folgen und den Code bearbeiten. Wenn Sie fertig sind, können Sie das "Scrim" weiter anschauen, um zu sehen, wie die Lösung des Lehrers mit Ihrer übereinstimmt.

Variablen 1

Um diese Aufgabe abzuschließen, fügen Sie eine neue Zeile hinzu, um den im vorhandenen myName-Variable gespeicherten Wert zu Ihrem eigenen Namen zu korrigieren.

<section></section>

* {
  box-sizing: border-box;
}

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

Der Ausgangspunkt der Aufgabe sieht wie folgt aus:

Hier ist der zugrundeliegende Code für diesen Ausgangspunkt:

let myName = "Paul";

// Don't edit the code above here!

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
const para = document.createElement("p");
para.textContent = myName;
section.appendChild(para);

Die aktualisierte Ausgabe sollte wie folgt aussehen:

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

myName = "Chris";

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

let myName = "Paul";

myName = "Chris";

const section = document.querySelector("section");
const para = document.createElement("p");
para.textContent = myName;
section.appendChild(para);

Variablen 2

Die letzte Aufgabe vorerst — in diesem Fall wird Ihnen ein vorhandener Code bereitgestellt, der zwei Fehler enthält. Das Ergebnisfenster sollte den Namen Chris ausgeben und eine Aussage darüber machen, wie alt Chris in 20 Jahren sein wird. Wir möchten, dass Sie das Problem beheben und die Ausgabe korrigieren.

Der Ausgangspunkt der Aufgabe sieht wie folgt aus (es wird noch nichts angezeigt):

Hier ist der zugrundeliegende Code für diesen Ausgangspunkt:

// Fix the following code

const myName = "Default";
myName = "Chris";

let myAge = "42";

// Don't edit the code below here!

const section = document.querySelector("section");
const para1 = document.createElement("p");
const para2 = document.createElement("p");
para1.textContent = myName;
para2.textContent = `In 20 years, I will be ${myAge + 20}`;
section.appendChild(para1);
section.appendChild(para2);

Die aktualisierte Ausgabe sollte wie folgt aussehen:

// Turn the const into a let, so the value can be changed
let myName = "Default";
myName = "Chris";

// myAge needs to have a number datatype
let myAge = 42;

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

let myName = "Default";
myName = "Chris";
let myAge = 42;

const section = document.querySelector("section");
const para1 = document.createElement("p");
const para2 = document.createElement("p");
para1.textContent = myName;
para2.textContent = `In 20 years, I will be ${myAge + 20}`;
section.appendChild(para1);
section.appendChild(para2);

Siehe auch

Sehen Sie sich Übungszeit - Teil 3: let und const ^{MDN Lernpartner} von Scrimba an: Eine interaktive Herausforderung mit mehreren Tests zu let und const.

• Zurück
• Übersicht: Dynamische Skripterstellung mit JavaScript
• Weiter