Web-basierter HTML-Präsentationsbauer

Einführung

In diesem Projekt lernst du, wie du eine webbasierte PowerPoint (PPT)-Präsentation mit Hilfe von Front-End-Technologien erstellen kannst. Dieser Art von PPT ist für die Verbreitung und das Anzeigen bequemer und kann die Layout- und Interaktionsfähigkeiten von Front-End-Technologien voll ausnutzen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die switchPage-Funktion implementierst, um zwischen den PPT-Seiten zu wechseln
• Wie du Benutzer-Eingaben wie Tastendrücke und Knopfdrücke behandelst, um durch die PPT-Seiten zu navigieren
• Wie du die goLeft- und goRight-Funktionen implementierst, um die Navigation zwischen den PPT-Seiten zu behandeln
• Wie du Inhalte zu den PPT-Folien hinzufügst, um die Grundlagen von HTML beizubringen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Eine webbasierte PowerPoint (PPT)-Präsentation mit Front-End-Technologien zu erstellen
• Die DOM manipulieren, um PPT-Seiten anzuzeigen und auszublenden
• Benutzer-Eingaben zu behandeln und die Benutzeroberfläche entsprechend zu aktualisieren
• HTML-verwandte Inhalte in PPT-Format zu strukturieren und darzustellen

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

├── css
│   └── style.css
├── images
│   ├── left-small.svg
│   └── right-small.svg
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

Dabei gilt:

• css/style.css ist die Stylesheet-Datei.
• Der images-Ordner enthält die Icons, die auf der Seite verwendet werden.
• js/index.js ist die JavaScript-Datei für die Seite.
• js/jquery-3.6.0.min.js ist die jQuery-Datei.
• index.html ist die Hauptseite.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben in der VM und aktualisiere es manuell, um die Seite zu sehen.

Die switchPage-Funktion implementieren

In diesem Schritt wirst du lernen, wie du die switchPage-Funktion implementierst, um zwischen den PPT-Seiten zu wechseln.

1. Öffne die Datei js/index.js.
2. Locate die switchPage-Funktion und füge den folgenden Code hinzu:

function switchPage() {
  $("section").eq(activeIndex).show().siblings().hide();
  $(".btn.left").toggleClass("disable", activeIndex === 0);
  $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);
  $(".page").text(`${activeIndex + 1} / ${sectionsCount}`);
}

Erklärung:

• $("section").eq(activeIndex).show().siblings().hide();: Diese Zeile zeigt die aktuelle Seite (Section) an und versteckt alle anderen Seiten.
• $(".btn.left").toggleClass("disable", activeIndex === 0);: Diese Zeile fügt die Klasse disable zum "Zurück"-Button hinzu, wenn der Benutzer auf der ersten Seite ist, und entfernt die Klasse, wenn der Benutzer auf einer anderen Seite ist.
• $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);: Diese Zeile fügt die Klasse disable zum "Weiter"-Button hinzu, wenn der Benutzer auf der letzten Seite ist, und entfernt die Klasse, wenn der Benutzer auf einer anderen Seite ist.
• $(".page").text(${activeIndex + 1} / ${sectionsCount});: Diese Zeile aktualisiert die Anzeige der Seitenzahl in der unteren linken Ecke der Seite.

3. Speichere die Datei js/index.js.

Jetzt ist die switchPage-Funktion implementiert, und die Seitenwechselfunktionalität sollte wie erwartet funktionieren.

Benutzer-Eingaben behandeln

In diesem Schritt wirst du lernen, wie du Benutzer-Eingaben wie Tastendrücke und Knopfdrücke behandelst, um durch die PPT-Seiten zu navigieren.

1. Öffne die Datei js/index.js.
2. Locate den Event-Listener-Code und füge den folgenden Code hinzu:

// Lauscht auf Benutzerdrücke der Leertaste und Pfeiltasten
$(document).on("keydown", (e) => {
  e.preventDefault();
  // TODO
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

// Lauscht auf Knopfdruck-Ereignisse
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);

Erklärung:

• Der erste Event-Listener lauscht auf keydown-Ereignisse auf dem Dokument. Wenn der Benutzer die Leertaste oder die rechte Pfeiltaste drückt, wird die goRight()-Funktion aufgerufen. Wenn der Benutzer die linke Pfeiltaste drückt, wird die goLeft()-Funktion aufgerufen.
• Die zweite Gruppe von Event-Listenern lauscht auf click-Ereignisse auf den "Zurück"- und "Weiter"-Knöpfen. Wenn der Benutzer den "Zurück"-Button klickt, wird die goLeft()-Funktion aufgerufen. Wenn der Benutzer den "Weiter"-Button klickt, wird die goRight()-Funktion aufgerufen.

3. Speichere die Datei js/index.js.

Jetzt ist die Behandlung von Benutzer-Eingaben implementiert, und der Benutzer kann durch die PPT-Seiten mit der Tastatur oder den Knöpfen navigieren.

Implementiere die goLeft- und goRight-Funktionen

In diesem Schritt wirst du lernen, wie du die goLeft- und goRight-Funktionen implementierst, um die Navigation zwischen den PPT-Seiten zu behandeln.

1. Öffne die Datei js/index.js.
2. Locate die goLeft- und goRight-Funktionen und füge den folgenden Code hinzu:

// Funktionen zum Wechseln zur nächsten Folie
function goLeft() {
  // TODO
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// Funktionen zum Wechseln zur vorherigen Folie
function goRight() {
  // TODO
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

Erklärung:

• Die goLeft-Funktion überprüft, ob der Benutzer auf der ersten Seite ist. Wenn ja, wird sie ohne weitere Aktion zurückgegeben. Andernfalls wird die Variable activeIndex um 1 dekrementiert und die switchPage-Funktion aufgerufen, um die Anzeige zu aktualisieren.
• Die goRight-Funktion überprüft, ob der Benutzer auf der letzten Seite ist. Wenn ja, wird sie ohne weitere Aktion zurückgegeben. Andernfalls wird die Variable activeIndex um 1 incrementiert und die switchPage-Funktion aufgerufen, um die Anzeige zu aktualisieren.

3. Speichere die Datei js/index.js.

Jetzt sind die goLeft- und goRight-Funktionen implementiert, und der Benutzer kann durch die PPT-Seiten mit der Tastatur oder den Knöpfen navigieren.

Die endgültige Wirkung der Seite sollte wie folgt aussehen:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.