JavaScript ist die meist verwendete Programmiersprache in der heutigen Webentwicklung. Doch was genau verbirgt sich hinter JavaScript und welche Art von Software- und Webentwicklungsprojekten eignen sich am besten? In diesem Blogeintrag geben wir eine Einführung in JavaScript (JS) und beschreiben, wie man JS verwenden kann, um dynamische Nutzeroberflächen zu erstellen. Genauer ausgedrückt; wir geben einen Einblick in die Erstellung von dynamischen webbasierten Anwendungen, die sich in Echtzeit aktualisieren, ohne dass der Nutzer den Browser neu laden muss.
Vom statischen zum dynamischen Web – deshalb wird JavaScript benötigt
Statische Websites können toll aussehen und eignen sich hervorragend, um Inhalte wie Firmeninformationen, Blogbeiträge oder ähnliches zu bedienen. Der Inhalt bleibt hierbei stets unverändert, ganz im Gegensatz zu einem Social-Media-Feed, der ständig aktualisiert wird.
Über Jahre waren alle Webseiten statisch.
Statische Seiten werden mit HTML erstellt, um den grundlegenden Inhalt und die Struktur der Seite zu definieren. HTML wird für Überschriften, Frames, Bilder, Tabellen, etc. verwendet. Customized Style Sheets (CSS) geben dem Browser hierbei die Anweisungen, den HTML-Inhalt zu rendern, beispielsweise die Farbgebung der Webseiten. Ein angemessenes Wissen über HTML und CSS ist im Grunde genommen alles, was man braucht, um statische Webseiten zu entwickeln. Alternativ kann man auch ein Framework wie WordPress oder sogar Website-Baukästen verwenden, um statische Seiten auch ohne Programmierkenntnisse zu erstellen.
Wer jedoch eine interaktive Webseite erstellen möchten, dessen Inhalte in Echtzeit dynamisch aktualisiert werden, benötigt weitere Programmiersprachen. Am häufigsten wird hierzu JavaScript verwendet.
Viele aktuelle Webseiten bieten dynamische Funktionen an, die direkt von der Seite abgerufen werden können. Hierzu zählen die Auswahl eines Artikels zum Download, das Ausfüllen eines Formulars oder die Anzeige von Demos oder Spielen. Webseiten müssen sich auch vermehrt an das Nutzerverhalten „erinnern“, um Änderungen in Echtzeit anzuzeigen. Updates müssen hierzu in Echtzeit umgesetzt werden, ohne dass der Browser aktualisiert werden muss.
Frontend-Website-Entwickler konzentrieren sich auf das Seiten-Layout, die Benutzerfreundlichkeit, die Reaktionsfähigkeit und den dynamischen Start von Animationen oder Videos. Um solche Live-Websites oder webbasierte Anwendungen zu kreieren, wird der Inhalt der Seite (Text/Bilder) in einem Datenbank- bzw. Content-Management-System gespeichert. Wenn die Informationen in der Datenbank angepasst oder geändert werden, gibt die Webseite diese Veränderungen wider.
Für Echtzeit-Updates von Webseiten oder webbasierten Anwendungen gilt JavaScript als die bevorzugte Programmiersprache. Die Verwendung von JavaScript eignet sich ideal für Aufgaben wie der Validierung von eingereichten Formularen oder dynamischen Updates von Bereichen wie dem „Einkaufswagen“ oder „Das könnte auch Sie interessieren“.
Backend-Website-Entwickler oder Full-Stack-Entwickler verwenden JavaScript Node.js im Backend (Serverseite), um Updates vom Frontend zu bearbeiten und skalierbare Netzwerkanwendungen zu entwickeln, die viele Requests gleichzeitig verarbeiten können.
Um JavaScript zu verstehen, sollten Sie die Konzepte dynamischer Programmiersprachen kennen. In dynamischen Programmiersprachen erfolgen die Vorgänge anhand der Laufzeit anstelle der Compile-Zeit. In JavaScript können Sie beispielsweise den Variablentyp verändern, Methoden zu einem Objekt oder neue Eigenschaften hinzufügen, während das Programm läuft.
Da nun klar sein sollte, warum wir JavaScript verwenden, schauen wir uns einige Anwendungsbereiche von JavaScript genauer an.
Was ist JavaScript?
JavaScript kann am besten als Skriptsprache verstanden werden, um Webseiten zu entwerfen und das Verhalten zu steuern.
JavaScript ist eine leichte, interpretierte Programmiersprache – was genau bedeutet „leicht“ und „interpretiert“ im Fall von Java?
Der Begriff „Java“ in JavaScript hat keine direkte Verbindung zur Java-Programmiersprache. „Script“ hat in der heutigen JavaScript-Version auch nichts mehr mit dem ursprünglichen Scripting zu tun. Auf Wikipedia findet sich eine kurze, aber interessante Einführung über den Ursprung des Begriffs JavaScript.
Leicht
JS hat nicht sonderlich viele Sprachkonstrukte und kann mit einfachem Syntax und Funktionen ausgeführt werden. Hierzu gibt es Functions, Loops, Statements und Declarations, mit denen viel gemacht werden kann. In JavaScript wird alles als Objekt bezeichnet. Variablen lassen sich einfach deklarieren und viele vordefinierte Methoden können sofort ausgewählt werden. Mit JavaScript müssen Entwickler nicht unbedingt wissen, was im Hintergrund abläuft, es sei denn, sie müssen eine Leistungsoptimierung durchführen oder asynchrone Lösungen verwenden.
Interpretiert
JavaScript ist eine interpretierte und keine kompilierte Sprache. Beispielsweise müssen ein C++ oder ein Java-Programm kompiliert werden, bevor sie ausgeführt werden können. In JavaScript schaut ein Interpreter im Browser über den Code, interpretiert jede Zeile und führt diese aus. Heutzutage verwendet JS Just-in-Time-Compilation.
Interpretierte Sprachen sind im Allgemeinen flexibel und verfügen oft über Funktionen wie dynamische Typisierung und kleine Programmgrößen. Der Code ist plattformunabhängig, da Interpreter den Quellprogrammcode selbst ausführen.
Trotz des Begriffs „Script“ ist JavaScript mehr als nur eine Skriptsprache. JavaScript gilt als Programmiersprache.
Wann und wo wird JavaScript verwendet?
JavaScript wird hauptsächlich zur Entwicklung webbasierter Anwendungen und interaktiver Webseiten verwendet.
Mit JavaScript können folgende interaktive Funktionen hinzugefügt werden:
- Schaltflächen anzeigen/ausblenden
- Änderung der Farbe einer Schaltfläche, sobald der Mauszeiger herüberfährt
- Bilderkarussel
- Animationen
- Dropdown-Menüs
- Zoom-Optionen für ein Bild
- Countdown-Timer
- Audio- und Video-Streams
Es gibt eine Vielzahl von JavaScript-Frameworks, um die Entwicklung von Web- und Mobilfunk-Apps mit JS zu erleichtern.
JavaScript für das Front- und Backend
JavaScript-Frameworks für das Front- und Backend vereinfachen die Aufgabe, hochdynamische und interaktive Webanwendungen zu gestalten und zu programmieren. Ein JavaScript-Framework wird in JavaScript geschrieben und bietet Funktionen an, die Programmierer in ihrem Code verwenden können.
JavaScript-Frameworks sind anpassungsfähig, helfen bei der Gestaltung von Webseiten und sind die bevorzugte Methode, mit denen Website-Entwickler arbeiten. JavaScript-Frameworks stecken hinter einigen der tollsten webbasierten Software-Lösungen und Webseiten – viele dieser Webseiten werden wahrscheinlich auch täglich von Ihnen besucht. Ein Framework erleichtert die Arbeit von Entwicklern erheblich. Ohne Frameworks schreiben Entwickler lange Codes, nur um einfache Aufgaben hinzuzufügen.
Ein JavaScript-Framework hilft ebenfalls dabei, Benutzeroberflächen deklarativ zu schreiben. Das bedeutet, dass Entwickler einen Code schreiben können, um die Seite oder den Abschnitt zu beschreiben, während das Framework mithilfe des Document Object Models (DOM) die Arbeit hinter den Kulissen erledigt. Mit Frameworks ist es einfacher, UI-Elemente wie Tabellen, Listen etc. zu erstellen, zu aktualisieren und zu modifizieren. JavaScript-Frameworks sind sowohl für die Client-Seite, das Frontend als auch für die Backend- oder Server-Seite verfügbar.
Frontend JS Frameworks
Einige beliebte Front-End-JS-Frameworks sind:
Angular: Ein Open-Source und Komponenten-basiertes Web-Application-Framework. Angular verwendet deklarative HTML-Vorlagen. Der Compiler des Frameworks übersetzt die Templates in optimierte JavaScript-Anweisungen.
React: React ist technisch gesehen kein Framework, sondern eine Bibliothek mit UI-Komponenten und wird in Kombination mit anderen Bibliotheken verwendet, um Anwendungen zu erstellen. React und ReactDOM werden bei der Erstellung von Webanwendungen verwendet. React und ReactDOM werden häufig zusammen verwendet, und der Begriff „React“ wird allgemein als JavaScript-Framework bezeichnet.
Vue: Ähnlich wie AngularJS erweitert auch Vue HTML mit einem eigenen Code. Vue stützt sich hierbei neben HTML-Erweiterungen hauptsächlich auf Standard-JavaScript.
Backend JS Frameworks
Node.js ist eine JavaScript-basierte Runtime-Umgebung, die auf dem Google Chrome JavaScript V8 Engine als Backend-Framework erstellt wurde. Node.js ermöglicht es Web-Entwicklern, Front- und Backend-Bereiche von Webanwendungen zu codieren.
Node.js unterscheidet sich von den für die Frontend-Umgebung verfügbaren JS-Frameworks. Um den Backend-Anforderungen gerecht zu werden, gibt es eindeutige APIs für HTTP-Requests, Dateisysteme und andere serverseitige Funktionen, für die Frontend-Frameworks nur begrenzt hilfreich sind.
Populäre Apps und Software, die mit JS erstellt wurden
Einige populäre Beispiele für Websites, die node.js verwenden, sind Paypal, LinkedIn, Netflix und Uber!
Beispiele für Apps, die auf JavaScript basieren, könnten ein Trinkgeld-Rechner für Restaurants, interaktive Karten auf einer Webseite, eine Online-Uhr, To-Do-Listen, Quizzes, Navigationsschalter und vieles mehr sein. Fast jede dynamische Website, die Sie besuchen, verwendet JS für das Frontend.
Einfacher JavaScript-Code
JavaScript kann im HTML-Code in den Tags <Script> und </script> eingebettet werden.
Wie in dem Beispiel unten angezeigt, kann der JavaScript-Code der Seite im <head> Element eingesetzt werden.
<meta charset="UTF-8"> <title>My First JavaScript Code</title> <script type="text/javascript"> alert("Let’s Learn JavaScript… just the basics!"); </script>
Um den obigen Code auszuprobieren:
- Öffnen Sie eine Notepad-Datei oder einen HTML-Editor.
- Kopieren und fügen Sie den obigen Code ein.
- Speichern Sie die Datei mit einer .html-Erweiterung ab (das heißt als HTML-Datei).
- Öffnen Sie die HTML-Datei in einem Browser.
- Sie sollten folgende Nachricht erhalten:
Was ist DOM?
Um JS zu verstehen und zu verwenden, müssen zuerst Document Object Models (DOMs) verstanden werden. Hierzu fangen wir von vorne an:
Eine Webseite ist ein Dokument. Eine Webseite kann in einem Browser oder als HTML-Quelle angezeigt werden. Hierbei handelt es sich um dasselbe Dokument, unabhängig von der Browser- oder Quellcode-Ansicht. Das Document Object Model (DOM) stellt das gleiche Dokument dar, um es zu bearbeiten.
Das DOM ist somit eine Darstellung der Webseite mithilfe verschiedener DOM-Objekte. Jedes Element in der HTML-Datei, wie die Überschrift, Para, das Bild, die Tabelle, etc., werden als Objekte im DOM dargestellt. Man kann auf diese DOM-Objekte direkt zugreifen und aktualisieren, indem man eine Skriptsprache wie JavaScript verwendet. Für eine effektive Webprogrammierung müssen DOMs verstanden werden, um den JS-Code anzuwenden und die gewünschten Ergebnisse zu erzielen.
Erstellung einer Benutzeroberfläche mit einfachem JavaScript und DOM
Wie eingangs erwähnt, können Sie eine einfache Web-Benutzeroberfläche mithilfe von HTML und CSS erstellen. Wenn die Anwendung jedoch interaktiv gestaltet werden soll, muss JavaScript verwendet werden, um das DOM (Document Object Model) zu aktualisieren. Hierbei muss auf das Benutzerverhalten reagiert und die Oberfläche entsprechend verändert werden.
Das untenstehende Code-Snippet zeigt, wie man ein <div> Element mit JavaScript erstellt.
<body>
<div id="root"></div>
<script type="text/javascript">
const rootElement = document.getElementById('root')
const element = document.createElement('div')
element.textContent = 'Created a div element!'
element.className = 'container'
rootElement.appendChild(element)
</script>
</body>
Was haben wir über JavaScript gelernt?
Das haben wir über Javascript gelernt:
Wir haben die Grundlagen der modernen Website-Design-Anforderungen abgedeckt und über die Notwendigkeit gesprochen, dynamische Veränderungen in Echtzeit in die Webanwendung oder die Seite zu integrieren. Des Weiteren haben wir gelernt, dass wir mit JavaScript dieses Ziel erreichen können und dass es manchmal notwendig ist, einen Blick auf die Grundlagen zu werfen, um zu verstehen, wie der Code kreiert und dynamische Webseiten und Software-Lösungen erstellt werden.
