Vanilla JavaScript

Das Dokument- und das Fensterobjekt sind zwei der übergeordneten Objekte, auf die wir mit JavaScript zugreifen können. Das document-Objekt selbst ist dem window-Objekt untergeordnet. Ich denke, jeder kennt sie, denn sie sind vor allem bei der Entwicklung von Webanwendungen mit Vanilla-Javascript allgegenwärtig.

Dieser Artikel soll Ihnen einige der praktischen Funktionen beider Objekte zeigen. Es bedarf keiner detaillierten Einführung, was genau diese beiden sind, ich werde Ihnen jetzt einige praktische Beispiele geben, die Sie ohne viel Vorwissen verwenden können.

Das Kontextmenü ist ein DOM-Ereignis, das ausgelöst wird, wenn ein Benutzer mit der rechten Maustaste auf ein DOM-Element klickt, das das Kontextmenü aufrufen möchte. Das Kontextmenü ist einfach das Menü, das standardmäßig angezeigt wird, wenn ein Benutzer mit der rechten Maustaste auf eine Webseite klickt, es sei denn, die Webseite verarbeitet das Ereignis anders, was wir gleich tun werden. Auch wenn der Name nicht bekannt ist, sieht das kleine Menü also je nach Betriebssystem anders aus und bietet Dinge wie „Bild speichern unter“, „untersuchen“, „neu laden“ & „zurück“.
Grundsätzlich können wir das contextmenuEreignis im DOM nutzen, um unsere eigene Aktion auszuführen, wenn der Benutzer mit der rechten Maustaste klickt.

Rechtsklick und Anzeige des Standard-Kontextmenüs blockieren

<div id="nocontext">No context menu available for this</div><script>
noContext = document.getElementById('nocontext')noContext.addEventListener('contextmenu', (event) => {
event.preventDefault()
})
</script>

So richten wir einen EventListener für unser <div> ein, der ausgeführt werden soll, wenn das Kontextmenü aufgerufen wird, also bei einem Rechtsklick. Er liefert ein Ereignis zurück, das wir mit der Standardfunktion preventDefault blockieren können.

Der Standardfall wäre wie beim Rechtsklick auf das Kontextmenü. Aber mit preventDefault blockieren wir das. Es passiert also nichts.

Natürlich können wir nicht nur das Standardereignis blockieren, sondern auch alle Arten von Code ausführen, wenn der Benutzer mit der rechten Maustaste klickt. Wir können dies dann mit dem preventDefault kombinieren, um unser eigenes Kontextmenü anzubieten, zum Beispiel:

contextAvailable.addEventListener('contextmenu', (e) => {
console.log('you rightclicked this')
e.preventDefault()
})

Der Designmodus Ihres Dokuments

Bis zur Recherche für diesen Artikel war mir dies völlig unbekannt, aber tatsächlich kann diese Funktion sehr praktisch sein. Man kann es z.B. für ein Content Management System nutzen, oder um schnell ohne Code zu editieren, um mögliche inhaltliche Änderungen auf einer Website zu visualisieren.
Denn was designMode möglich macht, ist, dass man den gesamten Inhalt einer Website, den wir im Browser betrachten, bearbeiten kann, ohne den HTML-Code der Devtools ändern zu müssen.

Sie können es gleich ausprobieren. Gehen Sie einfach auf eine beliebige Website, öffnen Sie die Konsole und geben Sie Folgendes ein:

document.designMode = "on"

Jetzt können Sie die angezeigte Website einfach so bearbeiten, als wäre sie ein Word-Dokument. Ziemlich cool, nicht wahr?
Der designMode kennt nur zwei Zustände: Ein und Aus. Wenn Sie ihn also deaktivieren wollen, machen Sie einfach folgendes:

document.designMode = "off"

Wenn Sie einzelne Elemente vor der Änderung des Inhalts schützen wollen, können Sie ihnen das folgende Attribut geben: (Dann kann man sie nur komplett entfernen, aber nicht manipulieren)

<i contenteditable = "false">This is not editable.</i>

Mit Code etwas in die Zwischenablage des Benutzers kopieren

Ursprünglich war für diesen Zweck das bekannte document.execCommand() vorgesehen, das aber inzwischen als veraltet gilt.
Stattdessen steht nun die Clipboard-API für das automatische Kopieren von Inhalten mittels JavaScript zur Verfügung.
Sie kann über das Navigator-Objekt verwendet werden, das dem Window-Objekt untergeordnet ist.

Schauen wir uns ein Beispiel an, bei dem wir nach dem Drücken des Buttons den eingegebenen Text im Eingabefeld in die Zwischenablage kopieren:

Status des Dokuments abfragen

Vor allem bei der Entwicklung von komplexeren und performance-optimierten Webapps sollten Untersuchungen der Ladezeit &des allgemeinen Verhaltens des Dokuments durchgeführt werden, um mögliche Schwachstellen zu finden oder die Performance und die UX zu verbessern.

Deshalb können wir mit document.readyState auf den aktuellen Zustand des Dokuments zugreifen und auf Basis des Ergebnisses weitere Entscheidungen treffen.

Hier sind die möglichen Ergebnisse, die document.readyState zurückgeben kann:

• uninitialized – Hat noch nicht mit dem Laden begonnen
• loading – Wird geladen
• loaded – Wurde geladen
• interactive – Hat genug geladen und der Benutzer kann damit interagieren
• complete – Vollständig geladen
  Quelle: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Wenn man in der Praxis ein wenig damit herumspielt, gibt es einige interessante Ergebnisse. Dazu habe ich ein kleines HTML-Boilerplate erstellt, mit dem wir den Status an verschiedenen Stellen ausgeben. Jedes der externen Skripte enthält einfach console.log(document.readyState)

Hier ist, in chronologischer Reihenfolge, was unsere Website dann protokolliert:

• normal: loading
• script-tag: loading
• defer: interactive
• async: interactive
• onload body: complete

Die verschiedenen Möglichkeiten, die externen Skripte einzubinden, funktionieren hier wie erwartet. Interessant ist aber, dass, wenn wir nur ein großes Bild auf der Seite einbinden, die Ladezeit des Bildes auch das onload-Ereignis des body-Tags verzögert.

Der Status ist also in jedem Fall „complete“, wenn wir den Status mit dem onload-Ereignis ausgeben.

Arbeiten mit dem Fokus / aktiven Element

Wenn es um Elemente geht, mit denen der Nutzer der Website tatsächlich interagieren kann, wie Buttons, Eingaben und Textareas, können diese den sogenannten Fokus haben. Wenn eine Eingabe den Fokus hat und wir etwas auf der Tastatur eingeben, wird es in das Eingabefeld geschrieben. Wenn das Feld nicht den Fokus hat, wird es nicht in das Eingabefeld geschrieben. Ich denke, jeder weiß, was der Fokus ist.

Bestimmen, welches Element den Fokus hat

Vielleicht kennst du schon das onfocus-Attribut, das ist das Ereignis, wenn ein Element den Fokus bekommt. Dann könnten wir damit coole CSS-Animationen erstellen oder, wenn wir das Benutzerverhalten analysieren wollen, dieses Ereignis speichern.

Auf dieselbe Weise können wir bestimmen, welches Element den Fokus hat, ohne allen Elementen das onfocus-Attribut geben zu müssen.
Das können wir auf folgende Weise tun:

var x = document.activeElement.idconsole.log(x)

So können wir die ID des Elements ermitteln, das den Fokus hat / aktiv ist.

Den Fokus manuell ändern

Gerade im Hinblick auf die UX kann es manchmal hilfreich sein, dem Benutzer die Auswahl von Elementen abzunehmen. Zum Beispiel, wenn er in einem Formular eine falsche Eingabe gemacht hat und wir wollen, dass er seine Eingabe in jedem Eingabefeld ändert:

document.getElementById('input1').focus()

Das aktuelle Styling eines Elements auslesen

In großen und dynamischen Web-Apps ändern wir ständig das aktive Styling eines jeden Elements im DOM.
Wir können dies auch jederzeit an zwei ausgeben, also prüfen, welche CSS-Attribute und Werte unsere Elemente haben.

1. element.stylekann auch zum Auslesen von Stilen verwendet werden, ist aber für die Bearbeitung gedacht
2. Window.getComputedStyle()ist dafür gemacht, das aktuelle Styling zu bekommen

So können wir mit der letzten Funktion ein ganzes Objekt mit allen Stilen des Elements bekommen:

let box = document.getElementById('box')console.log(window.getComputedStyle(box)) // CSSStyleDeclaration{}

Aber wir können auch einzelne Attribute und die dazugehörigen Werte genauer ausgeben:

let box = document.getElementById('box')console.log(
window.getComputedStyle(box)
.getPropertyValue('background-color') // E.g. rgb(0, 128, 0)
)

Die Größe des Browsers &, in dem die Website angezeigt wird

Natürlich kommt man in der modernen Webentwicklung nicht um Größenangaben herum. Hier ist, was man braucht:

• window.outerWidth
• window.outerHeight

Die beiden geben die Dimensionen des Browserfensters selbst zurück, so dass es keine Rolle spielt, ob die Webseite z.B. durch die Entwickler-Tools verkleinert wird.

Wenn es also darum geht, wirklich festzustellen, in welchen Dimensionen die Webseite gerade dargestellt wird, stehen folgende Funktionen zur Verfügung:

• window.innerWidth
• window.innerHeight

So könnte man zum Beispiel ein Element in den Vollbildmodus versetzen:

elem.style.width = window.innerWidth + 'px'

Eine Anmerkung von JavaScript In Plain English

Wir haben drei neue Publikationen herausgebracht! Zeigen Sie etwas Liebe für unsere neuen Publikationen, indem Sie ihnen folgen: AI in Plain English, UX in Plain English, Python in Plain English – vielen Dank und lernen Sie weiter!

Wir sind auch immer daran interessiert, hochwertige Inhalte zu fördern. Wenn Sie einen Artikel haben, den Sie für eine unserer Veröffentlichungen einreichen möchten, senden Sie uns eine E-Mail an [email protected] mit Ihrem Medium-Benutzernamen und wir werden Sie als Autor hinzufügen. Teilen Sie uns auch mit, in welche Publikation(en) Sie aufgenommen werden möchten.