LabEx
AnmeldenKostenlos beitreten

Erkunden Sie die Browser Object Model (BOM)-Methoden in JavaScript

JavaScriptJavaScriptBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden die Teilnehmer die Browser Object Model (BOM)-Methoden in JavaScript erkunden, indem sie ein umfassendes Demonstrationsprojekt erstellen. Das Lab führt die Lernenden durch die Einrichtung einer grundlegenden HTML- und JavaScript-Umgebung und stellt dann systematisch wichtige BOM-Interaktionsmethoden wie alert(), prompt(), confirm() und Fenster-Manipulationstechniken vor.

Die Teilnehmer werden schrittweise ein praktisches Projekt erstellen, das verschiedene Browser-Interaktionsmethoden zeigt, beginnend mit der Erstellung einer Projektstruktur, der Implementierung von Benachrichtigungsdialogfenstern und dem Experimentieren mit Fenstersteuerungsfunktionen. Indem sie den Schritt-für-Schritt-Anweisungen folgen, werden die Schüler praktische Erfahrungen bei der Verwendung von JavaScripts browserbezogenen Methoden für die Erstellung interaktiver Webanwendungen machen und verstehen, wie man mit den Benutzern über verschiedene Dialogtypen und Fensterverwaltungstechniken kommuniziert.

HTML-Projekt für die BOM-Demonstration einrichten

In diesem Schritt werden Sie ein grundlegendes HTML-Projekt einrichten, um Browser Object Model (BOM)-Methoden in JavaScript zu demonstrieren. Wir werden eine einfache Projektstruktur erstellen, die als Grundlage für die Erkundung verschiedener BOM-Interaktionen dienen wird.

Navigieren Sie zunächst zum Projektverzeichnis:

cd ~/project

Erstellen Sie ein neues Verzeichnis für das BOM-Demonstrationsprojekt:

mkdir bom-demo
cd bom-demo

Verwenden Sie jetzt die WebIDE, um eine index.html-Datei mit einer grundlegenden HTML-Struktur zu erstellen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>BOM Methods Demonstration</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Erstellen Sie in demselben Verzeichnis eine entsprechende JavaScript-Datei bom-methods.js:

// This file will contain our BOM method demonstrations
console.log("BOM Methods Project Initialized");

Überprüfen Sie, dass die Dateien korrekt erstellt wurden:

ls

Beispielausgabe:

index.html
bom-methods.js

Öffnen Sie die index.html-Datei in einem Webbrowser, um sicherzustellen, dass alles korrekt eingerichtet ist. Sie sollten den Seitentitel sehen und die Entwicklerkonsole des Browsers öffnen können, um die initiale Log-Nachricht anzuzeigen.

Diese Projektstruktur bietet eine saubere, einfache Umgebung, um in den kommenden Schritten des Labs verschiedene Browser Object Model (BOM)-Methoden zu erkunden und zu demonstrieren.

Implementieren der Alert-Methode für die grundlegende Benachrichtigung des Benutzers

In diesem Schritt lernen Sie die window.alert()-Methode kennen, die eine grundlegende Browser Object Model (BOM)-Methode ist, um einfache Benachrichtigungsnachrichten an die Benutzer anzuzeigen. Die Alert-Methode erstellt einen Popup-Dialog, der die Skriptausführung pausiert und eine Benutzereingabe erfordert.

Navigieren Sie zum Projektverzeichnis:

cd ~/project/bom-demo

Öffnen Sie die Datei bom-methods.js in der WebIDE und fügen Sie den folgenden JavaScript-Code hinzu:

// Demonstrate window.alert() method
function showBasicAlert() {
  window.alert("Welcome to BOM Methods Demonstration!");
}

// Create a button to trigger the alert
function createAlertButton() {
  const button = document.createElement("button");
  button.textContent = "Show Alert";
  button.onclick = showBasicAlert;
  document.body.appendChild(button);
}

// Call the function to add button when page loads
createAlertButton();

Ändern Sie die index.html-Datei, um sicherzustellen, dass das JavaScript richtig verknüpft ist:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>BOM Methods Demonstration</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Wenn Sie die index.html-Datei in einem Webbrowser öffnen, sehen Sie einen Button "Show Alert". Klicken Sie auf diesen Button, um einen Popup-Alert-Dialog mit der Nachricht "Welcome to BOM Methods Demonstration!" auszulösen.

Wichtige Punkte zu window.alert():

  • Es ist eine Methode des window-Objekts
  • Erstellt einen blockierenden Dialog, der die Skriptausführung pausiert
  • Erfordert, dass der Benutzer "OK" klickt, um fortzufahren
  • Wird typischerweise für einfache Benachrichtigungen oder das Debugging verwendet

Beispielhafte Darstellung eines Alert-Dialogs:

[Alert Dialog]
Welcome to BOM Methods Demonstration!
                [OK]

Erstellen eines Prompt-Dialogs für die Benutzereingabeinteraktion

In diesem Schritt werden Sie die window.prompt()-Methode erkunden, die die interaktive Benutzereingabe über einen Dialogfeld ermöglicht. Diese BOM-Methode ermöglicht es Ihnen, einfache Texteingaben von Benutzern direkt im Browser zu sammeln.

Navigieren Sie zum Projektverzeichnis:

cd ~/project/bom-demo

Öffnen Sie die Datei bom-methods.js in der WebIDE und fügen Sie den folgenden JavaScript-Code hinzu:

// Demonstrate window.prompt() method
function showPromptDialog() {
  // Prompt user for their name with a default value
  let userName = window.prompt("What is your name?", "Guest");

  // Check if user entered a name
  if (userName !== null && userName !== "") {
    const outputDiv = document.getElementById("output");
    outputDiv.textContent = `Hello, ${userName}! Welcome to BOM Methods.`;
  } else {
    const outputDiv = document.getElementById("output");
    outputDiv.textContent = "No name entered.";
  }
}

// Create a button to trigger the prompt
function createPromptButton() {
  const button = document.createElement("button");
  button.textContent = "Enter Name";
  button.onclick = showPromptDialog;
  document.body.appendChild(button);
}

// Call the function to add button when page loads
createPromptButton();

Aktualisieren Sie die index.html-Datei, um eine Ausgabe-Div hinzuzufügen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>BOM Methods Demonstration</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Wichtige Punkte zu window.prompt():

  • Gibt den von dem Benutzer eingegebenen Text zurück
  • Erlaubt einen optionalen Standardwert
  • Gibt null zurück, wenn der Benutzer den Prompt abbricht
  • Blockiert die Skriptausführung, bis der Benutzer antwortet

Beispielhafte Prompt-Dialog-Interaktion:

[Prompt Dialog]
What is your name? [Guest]
        [OK]   [Cancel]

Wenn Sie die index.html-Datei in einem Webbrowser öffnen:

  1. Klicken Sie auf den Button "Enter Name"
  2. Ein Prompt erscheint, der Sie nach Ihrem Namen fragt
  3. Geben Sie einen Namen ein oder klicken Sie OK mit dem Standardwert
  4. Die Ausgabe-Div wird eine personalisierte Begrüßung anzeigen

Fügen Sie einen Bestätigungsdialog für die Benutzerentscheidung hinzu

In diesem Schritt werden Sie die window.confirm()-Methode erkunden, die eine einfache Möglichkeit bietet, die Benutzerbestätigung über einen Dialogfeld mit den Optionen "OK" und "Abbrechen" zu erhalten. Diese BOM-Methode ist nützlich für das Erstellen interaktiver Entscheidungsszenarien in Webanwendungen.

Navigieren Sie zum Projektverzeichnis:

cd ~/project/bom-demo

Öffnen Sie die Datei bom-methods.js in der WebIDE und fügen Sie den folgenden JavaScript-Code hinzu:

// Demonstrate window.confirm() method
function showConfirmDialog() {
  const outputDiv = document.getElementById("output");

  // Display a confirmation dialog
  const userDecision = window.confirm("Möchten Sie fortfahren?");

  // Check user's response
  if (userDecision) {
    outputDiv.textContent =
      "Der Benutzer hat OK geklickt. Der Vorgang wird fortgesetzt.";
    outputDiv.style.color = "green";
  } else {
    outputDiv.textContent =
      "Der Benutzer hat Abbrechen geklickt. Der Vorgang wurde abgebrochen.";
    outputDiv.style.color = "red";
  }
}

// Create a button to trigger the confirm dialog
function createConfirmButton() {
  const button = document.createElement("button");
  button.textContent = "Bestätigungsdialog anzeigen";
  button.onclick = showConfirmDialog;
  document.body.appendChild(button);
}

// Call the function to add button when page loads
createConfirmButton();

Aktualisieren Sie die index.html-Datei, um sicherzustellen, dass die Ausgabe-Div vorhanden ist:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>BOM Methods Demonstration</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Wichtige Punkte zu window.confirm():

  • Gibt true zurück, wenn der Benutzer "OK" klickt
  • Gibt false zurück, wenn der Benutzer "Abbrechen" klickt
  • Blockiert die Skriptausführung, bis der Benutzer eine Entscheidung trifft
  • Nützlich für einfache Ja/Nein-Entscheidungen

Beispielhafte Bestätigungsdialog-Interaktion:

[Bestätigungsdialog]
Möchten Sie fortfahren?
        [OK]   [Abbrechen]

Wenn Sie die index.html-Datei in einem Webbrowser öffnen:

  1. Klicken Sie auf den Button "Bestätigungsdialog anzeigen"
  2. Ein Bestätigungsdialog wird erscheinen
  3. Wählen Sie entweder "OK" oder "Abbrechen"
  4. Die Ausgabe-Div wird das Ergebnis Ihrer Wahl anzeigen

Experimentieren Sie mit den Window-Open- und Window-Close-Methoden

In diesem Schritt werden Sie die window.open()- und window.close()-Methoden erkunden, mit denen Sie programmgesteuert neue Browser-Fenster oder -Tabs erstellen und verwalten können.

Navigieren Sie zum Projektverzeichnis:

cd ~/project/bom-demo

Erstellen Sie zunächst eine neue HTML-Datei namens popup.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Popup Window</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>This is a Popup Window</h1>
    <p>Opened using window.open() method</p>
    <button onclick="window.close()">Close Window</button>
  </body>
</html>

Aktualisieren Sie nun die bom-methods.js-Datei mit Window-Manipulationsmethoden:

// Function to open a new window
function openNewWindow() {
  const outputDiv = document.getElementById("output");

  // Open a new window with specific dimensions
  const newWindow = window.open(
    "popup.html",
    "PopupWindow",
    "width=400,height=300,resizable=yes"
  );

  // Check if window was successfully opened
  if (newWindow) {
    outputDiv.textContent = "New window opened successfully!";
  } else {
    outputDiv.textContent = "Popup blocked. Please allow popups.";
  }
}

// Function to close the most recently opened window
function closeLastWindow() {
  const outputDiv = document.getElementById("output");

  try {
    // Attempt to close the last opened window
    const lastWindow = window.open("", "_blank");
    if (lastWindow) {
      lastWindow.close();
      outputDiv.textContent = "Last opened window closed.";
    } else {
      outputDiv.textContent = "No window to close.";
    }
  } catch (error) {
    outputDiv.textContent = "Error closing window.";
  }
}

// Create buttons for window operations
function createWindowButtons() {
  const openButton = document.createElement("button");
  openButton.textContent = "Open New Window";
  openButton.onclick = openNewWindow;

  const closeButton = document.createElement("button");
  closeButton.textContent = "Close Last Window";
  closeButton.onclick = closeLastWindow;

  document.body.appendChild(openButton);
  document.body.appendChild(closeButton);
}

// Call the function to add buttons when page loads
createWindowButtons();

Aktualisieren Sie die index.html-Datei, um die Kompatibilität sicherzustellen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>BOM Methods Demonstration</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Wichtige Punkte zu window.open() und window.close():

  • window.open() erstellt ein neues Browser-Fenster oder -Tab
  • Es ist möglich, die URL, den Fensternamen und die Eigenschaften anzugeben
  • window.close() schließt das aktuelle oder ein bestimmtes Fenster
  • Popup-Blocker können das Öffnen von Fenstern verhindern

Wenn Sie die index.html-Datei in einem Webbrowser öffnen:

  1. Klicken Sie auf "Open New Window", um ein neues Popup-Fenster zu erstellen
  2. Klicken Sie auf "Close Last Window", um das zuletzt geöffnete Fenster zu schließen
  3. Die Ausgabe-Div wird den Status der Fensteroperationen anzeigen

Zusammenfassung

In diesem Lab haben die Teilnehmer die Browser Object Model (BOM)-Methoden durch ein praxisorientiertes JavaScript-Projekt untersucht. Das Lab begann mit der Einrichtung einer strukturierten HTML- und JavaScript-Umgebung, um eine Grundlage für die Demonstration verschiedener Browserinteraktionstechniken zu schaffen. Die Teilnehmer lernten, wie sie Projektdateien erstellen, die grundlegende HTML-Struktur konfigurieren und eine JavaScript-Datei für die Methodendemonstrationen vorbereiten.

Die ersten Schritte konzentrierten sich auf das Verständnis grundlegender BOM-Methoden, beginnend mit der window.alert()-Methode für Benachrichtigungen an die Benutzer. Indem die Teilnehmer sukzessive verschiedene Browserinteraktionsmethoden wie Prompts, Bestätigungen und Fenstermanipulation implementierten, erhielten sie praktische Erfahrungen bei der Verwendung von JavaScripts browserübergreifenden APIs, um interaktive Webanwendungen zu erstellen und das Verhalten von Browserfenstern zu steuern.

Verwandt JavaScript Kurse
Schnellstart mit JavaScript

Schnellstart mit JavaScript

JavaScript
Anfänger
Erstellen Sie eine VSCode-Erweiterung mit ChatGPT

Erstellen Sie eine VSCode-Erweiterung mit ChatGPT

GitJavaScriptTypeScript
Anfänger
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger