JavaScript - Globale Objekte

Einführung in Gloable Objekte in JavaScript

Hallo da draußen, zukünftige JavaScript-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der JavaScript-Globale Objekte. Stellt euch diese Objekte als die VIPs des JavaScript-Universums vor – sie sind immer in eurer Nähe, bereit zu helfen, egal wo ihr in eurem Code seid. Lassen wir uns hineintauchen und die Macht dieser allgegenwärtigen Entitäten freisetzen!

Was sind Gloable Objekte?

Globale Objekte in JavaScript sind wie die Schweizer Army-Knife des Programmierens – sie sind vielseitige Werkzeuge, die immer in eurer Reichweite sind. Diese Objekte werden automatisch erstellt, wenn ihr JavaScript startet, und sind von überall in eurem Code aus zugänglich. Denkt an sie als hilfreiche Assistenten, die immer an eurer Seite sind, bereit, bei verschiedenen Aufgaben eine Hand zu reichen.

Das Fenster-Objekt: Der König der Gloable Objekte

In Webbrowsern ist der König aller globalen Objekte das window-Objekt. Es ist wie der Boss eurer Webseite, der alles, was passiert, überwacht. Sehen wir uns ein einfaches Beispiel an:

console.log(window.innerWidth);
console.log(window.innerHeight);

Wenn ihr diesen Code in einem Browser ausführt, wird er die Breite und Höhe eures Browserfensters anzeigen. Cool, oder? Es ist wie eine eingebaute Messlatte für eure Webseite!

Beispiele für Gloable Objekte und Ihre Methoden

Nun erkunden wir einige der am häufigsten verwendeten globalen Objekte und ihre Methoden. Ich zeige euch, wie diese euer Leben als Programmierer viel einfacher machen können.

1. Math-Objekt: Euer mathematischer Sidekick

Das Math-Objekt ist wie ein superkluger Calculator, der immer in eurer Nähe ist. Hier sind einige Beispiele:

console.log(Math.PI); // Ausgabe: 3.141592653589793
console.log(Math.round(4.7)); // Ausgabe: 5
console.log(Math.random()); // Ausgabe: eine zufällige Zahl zwischen 0 und 1

In diesem Beispiel verwenden wir das Math-Objekt, um den Wert von PI abzurufen, eine Zahl zu rundeln und eine zufällige Zahl zu generieren. Es ist wie ein mathematischer Genie als dein persönlicher Assistent!

2. Datum-Objekt: Euer zeitreisender Begleiter

Das Date-Objekt hilft euch, mit Daten und Zeiten zu arbeiten. Es ist wie eine Zeitmaschine in eurem Code!

let today = new Date();
console.log(today.getFullYear()); // Ausgabe: aktuelles Jahr (z.B. 2023)
console.log(today.getMonth()); // Ausgabe: aktueller Monat (0-11)
console.log(today.getDate()); // Ausgabe: aktueller Tag des Monats

Dieser Code erstellt ein neues Date-Objekt, das das aktuelle Datum und die aktuelle Uhrzeit darstellt, und extrahiert dann spezifische Teile davon. Es ist wie der Frage an deinen zeitreisenden Begleiter: "Hey, welches Jahr ist das?"

3. String-Objekt: Der Text-Manipulator

Das String-Objekt ist euer Anlaufpunkt für die Arbeit mit Text. Schaut euch diese nützlichen Methoden an:

let message = "Hello, World!";
console.log(message.length); // Ausgabe: 13
console.log(message.toUpperCase()); // Ausgabe: HELLO, WORLD!
console.log(message.split(", ")); // Ausgabe: ["Hello", "World!"]

Hier verwenden wir die Methoden des String-Objekts, um die Anzahl der Zeichen zu zählen, unsere Nachricht in Großbuchstaben zu schreiben und sie in Teile zu teilen. Es ist wie ein textversierter Freund, der euch hilft, Wörter auf vielfältige Weise zu manipulieren!

Verwendung der JavaScript-Gloable Objekte für Polyfills

Nun sprechen wir über ein fortgeschritteneres Konzept: Polyfills. Keine Sorge, wenn es sich einschüchternd anhört – ich werde es für euch erklären!

Ein Polyfill ist wie eine Brücke zwischen alt und neu in JavaScript. Es ermöglicht euch die Verwendung neuer JavaScript-Funktionen in älteren Browsern, die sie noch nicht unterstützen. Das globale Objekt spielt eine entscheidende Rolle bei der Erstellung von Polyfills.

Hier ist ein Beispiel für ein Polyfill für die Array.prototype.includes-Methode:

if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement, fromIndex) {
if (this == null) {
throw new TypeError('"this" ist null oder nicht definiert');
}

var o = Object(this);
var len = o.length >>> 0;

if (len === 0) {
return false;
}

var n = fromIndex | 0;
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

while (k < len) {
if (o[k] === searchElement) {
return true;
}
k++;
}
return false;
};
}

Dieser Code überprüft, ob die includes-Methode nicht auf dem Array.prototype existiert. Wenn nicht, fügt er diese Methode hinzu, allowing ihr die Verwendung von includes, auch in Browsern, die es nicht nativ unterstützen.

Es ist wie einem alten Hund neue Tricks beizubringen – wir geben älteren Browsern die Fähigkeit, neuere JavaScript-Funktionen zu verstehen und zu verwenden!

Schlussfolgerung

Und da habt ihr es, meine lieben Schüler! Wir haben eine rasante Tour durch die JavaScript-Globale Objekte gemacht, von den Grundlagen bis hin zu einige fortgeschritteneren Konzepten. Denkt daran, diese globalen Objekte sind eure treuen Sidekicks in der Welt von JavaScript, immer da, um euch zu helfen.

Während ihr eure Programmierreise fortsetzt, werdet ihr diese globalen Objekte immer öfter zu Rate ziehen. Sie sind wie die Werkzeuge in der Werkzeugkiste eines Meister Zimmermanns – je öfter ihr sie verwendet, desto mehr werdet ihr ihre Macht und Vielseitigkeit zu schätzen wissen.

Übt weiter, erkundet weiter und vor allem, macht weiter Spaß mit JavaScript! Wer weiß? Vielleicht schafft ihr eines Tages euer eigenes erstaunliches globales Objekt, das zukünftige Programmierer lernen werden. Frohes Programmieren!

Credits: Image by storyset