Was ist JavaScript? Die Skriptsprache im Überblick

JavaScript ist eine leistungsfähige Programmiersprache, die 1995 für den Netscape Navigator entwickelt wurde. Seither wurde es von allen modernen Webbrowsern übernommen, um Websites - und Web-Apps – mit zusätzlichen Funktionen auszustatten.

In den Jahren seit der Einführung hat sich JavaScript unglaublich weiterentwickelt. Es wird nicht mehr nur im Internet verwendet, sondern ist inzwischen fast überall zu finden – auch im Weltraum.

Dieser Beitrag enthält die Ursprünge, die Entwicklung, die aktuelle Situation und die Zukunft der Programmiersprache JavaScript. Lassen Sie uns beginnen.

Was ist JavaScript?

JavaScript ist eine Programmiersprache, die entwickelt wurde, um den Anforderungen des sich verändernden Internets gerecht zu werden. Seit ihren Anfängen wurde die Sprache immer beliebter und nützlicher. Heute wird sie nicht nur in der Webentwicklung verwendet. JavaScript ist das Aushängeschild der interaktiven Webentwicklung und daher in dieser Branche überall zu finden.

Bevor wir tiefer in das Thema eintauchen, sehen Sie sich dieses Video über die Geschichte von JavaScript an.

JavaScript ist inzwischen allgegenwärtig und wird nicht nur in der Computerprogrammierung genutzt, sondern auch für die Programmierung von NASA-Geräten. Darüber hinaus ermöglichte Node.js seit seiner Einführung die Nutzung von JavaScript für andere Zwecke. Sehen wir uns weiter unten einige dieser Anwendungsfälle genauer an.

Wofür wird JavaScript verwendet?

Heute wird JavaScript dank Node.js für alles verwendet. Egal, wie man es betrachtet: Diese Technologie schafft robuste Software für Unternehmen unterschiedlicher Branchen weltweit. Außerdem wird sie von Unternehmen wie LinkedIn und Medium genutzt, um Plattformen zu erstellen, über die Nutzende auf ihre Dienste zugreifen können.

Mit JavaScript lassen sich verschiedene Arten von Software wie Spiele, Computerprogramme, Web-Apps und sogar Technologien wie Blockchain-Anwendungen erstellen. Besonders beliebt ist JavaScript aber als Programmiersprache für das Internet. Auf LinkedIn werden im DACH-Raum mehr als 142.000 Fachkräfte mit JavaScript-Kenntnissen gesucht (Stand April 2023).

Nachdem wir nun die Anwendungsbereiche von JavaScript in der Arbeitswelt kennen, möchten wir über seine Nutzung in der Webentwicklung sprechen.

JavaScript für die Webentwicklung

Am beliebtesten ist JavaScript in der Webentwicklung. Es gilt als eines der effektivsten Werkzeuge von Entwicklerinnen und Entwicklern. Entwicklungsteams verwenden JavaScript, um Elemente interaktiv zu gestalten, Funktionen hinzuzufügen, das Nutzererlebnis zu verbessern und die Nutzung des Internets zu vereinfachen.

JavaScript begann mit der Frontend-Entwicklung, kann heute aber wesentlich mehr leisten. In letzter Zeit wird JavaScript auch im Backend-Bereich der Webentwicklung verwendet und kann in der gesamten Infrastruktur genutzt werden. Das bedeutet, dass Entwicklerinnen und Entwickler Frontend-Zugriff auf CRUD-Methoden (Erstellen, Lesen, Aktualisieren, Löschen) haben und diese nun auch im Backend einer Website verwenden können.

Außerdem verwenden laut W3techs mehr als 90 % aller Websites JavaScript. Das macht die Sprache im Bereich Webentwicklungstechnologie führend. Sehen wir uns einige Anwendungsbereiche von JavaScript in der Webentwicklung genauer an:

• Frontend-Interaktivität: Die Webentwicklung profitiert von der erhöhten Interaktivität und den Funktionen von JavaScript.
• Web-Apps: Web-Apps ähneln Websites, sind allerdings kompakter, wodurch Sie die Sicherheit und andere Aspekte besser kontrollieren können.
• Browserspiele: Der moderne Webbrowser hat sich stark weiterentwickelt. Entwicklerinnen und Entwickler produzieren sogar robuste Spiele, die in einem Browser laufen.
• Backend-Webentwicklung: Die Webentwicklung hat eine rasante Entwicklung hinter sich. Inzwischen ist JavaScript so robust, dass es sich sogar für die Verwaltung des Backends von Websites und Web-Apps eignet.

Hier ist eine Illustration aller möglichen Anwendungsfälle von JavaScript:

Nachdem wir nun die verschiedenen Einsatzbereiche von JavaScript beschrieben haben, sehen wir uns einmal genauer an, wie JavaScript eigentlich funktioniert.

Wie funktioniert JavaScript?

JavaScript ist eine clientseitige Skriptsprache, was bedeutet, dass sie im Browser von Nutzenden und nicht auf einem externen Gerät läuft. Ein Beispiel für eine nicht-clientseitige Sprache ist MySQL, eine serverseitige Sprache, die Datenbankanfragen bearbeitet.

Die Nutzung von JavaScript erfordert auch nicht, dass Nutzende etwas auf ihre Geräte herunterladen müssen, da moderne Browser die erforderliche Software bereits enthalten. Dadurch ist JavaScript viel benutzerfreundlicher als manch andere Sprachen.

In der folgenden Abbildung sehen Sie ein Beispiel dafür, wie JavaScript hinter den Kulissen funktioniert:

So fügen Sie Ihrer Website JavaScript hinzu

JavaScript kann Ihrer Website ganz einfach hinzugefügt werden: Sie müssen Ihre JavaScript-Dateien nur in Ihren HTML-Dateien verlinken. Wenn Sie bei der Webentwicklung schon einmal mit HTML und CSS gearbeitet haben, kennen Sie das Prinzip.

Genau, wie Sie CSS zu Ihrem HTML hinzufügen, gibt es ein HTML-Tag namens „script“, mit dem Sie auf JavaScript-Dateien verlinken können, damit Ihr Code verwendet werden kann, um den HTML- und CSS-Code Ihrer Website zu manipulieren.

Sehen wir uns genauer an, wie das HTML-„script“-Tag in HubSpot aussieht. Die folgende Codezeile ist ein Beispiel für das „script“-Tag und seine Syntax.

  <script src="yourFile.js"></script> 

Die oben stehende Zeile verbindet eine Datei namens „Ihre Datei.js“ (kein guter Name, aber ein gutes Beispiel) mit Ihrer HTML-Datei. So können Sie Ihren Code in einer separaten Datei schreiben, wodurch Ihr HTML-Code sauber bleibt und leichter zu verwalten ist. Die Nutzung des Skripts mit dem src-Attribut gilt ebenfalls als bewährte Methode, da Ihre Codes voneinander getrennt werden, um sie bei Bedarf einfacher aktualisieren und ändern zu können.

Das „script“-Tag mit src ist nicht die einzige Möglichkeit, JavaScript zu Ihrer Website hinzuzufügen. Das „script“-Tag kann JavaScript-Code auch direkt in Ihr HTML einfügen.

  <script type="text/JavaScript">Hier wird der JavaScript-Code eingefügt</script> 

Das ist relativ einfach und unterscheidet sich kaum vom externen Hinzufügen von JavaScript.

Hinweis: Da JavaScript vom Browser verarbeitet wird, sollten Sie beachten, dass nicht alle Browser alle JavaScript-Funktionen unterstützen. Außerdem ist JavaScript nicht in allen Browsern aktiviert. Berücksichtigen Sie diese Möglichkeit.

JavaScript-Beispiel

JavaScript ist robust und kann für einige erstaunliche Dinge verwendet werden. Unabhängig von Ihren Designplänen oder davon, was sie erstellen möchten, gibt es einige Regeln, die Sie bei JavaScript beachten müssen. Im folgenden Video werden die Syntax und die Regeln von JavaScript beschrieben:

Sehen wir uns nun an, wie man einen einfachen Farbwechsler mit einem Pseudo-Zufallszahlengenerator in Javascript erstellen kann.

 
/*Function for generating a hex number for new random BG colors*/

function randomBgHex(){
   let randomHex = Math.floor(Math.random()*900000) + 100000;
   document.querySelector('body').style.backgroundColor = `#${randomHex}`;
}/*end randomBgHex*/

Der oben stehende Code ist ein gutes Beispiel dafür, wie man mit nur wenigen Zeilen Code eine leistungsstarke Funktion erstellen kann. Da der Code aber relativ lang ist, zerlegen wir diesen im Folgenden in übersichtlichere Codeabschnitte.

Zuerst deklarieren wir eine Funktion namens randomBgHex.

 function randomBgHex(){}

Danach erstellen wir eine Variable namens randomHex. Anschließend weisen wir ihr den Wert einer mathematischen Gleichung zu.

 let randomHex = Math.floor(Math.random()*900000) + 100000;

Der oben stehende Code nutzt das Objekt Math und die Methode .floor(), um die größte Ganzzahl zurückzugeben, die kleiner als eine bestimmte Zahl ist oder dieser entspricht. Anschließend wird die Zahl mit .random() generiert, was – ohne Parameter – eine Zahl zwischen Null und weniger als Eins liefert. Multiplizieren Sie dieses Ergebnis mit 900.000 plus 100.000. Diese Gleichung stellt sicher, dass die ausgegebene Zahl den Anforderungen einer Hexadezimalzahl entspricht.

Der Wert dieser Gleichung wird dann in der Variablen gespeichert und zur Erstellung der Farben verwendet. Die folgende Codezeile zielt auf das HTML-Element und das Attribut ab, das Sie ändern möchten, und fügt dann die Hexadezimalzahl mit einem Zeichenfolgenliteral ein.

 document.querySelector('body').style.backgroundColor = `#${randomHex}`;

Der erste Teil des oben stehenden Codes wählt den HTML-Körper aus und legt die Hintergrundfarbe fest. Der zweite Teil `#${randomHex}` nutzt ein Zeichenfolgenliteral (gekennzeichnet durch den Backtick `), das es Ihnen ermöglicht, das #, das eine Hexadezimalzahl bezeichnet, mit dem Wert in unserer Variablen randomHex zu verknüpfen – oder zu verbinden.

Das Ergebnis würde dann in etwa so aussehen:

 #236789

Der oben stehende Hexadezimalwert ergibt ein schönes, düsteres Blau.

Sie können diesen Code in Aktion sehen, indem Sie das GitHub-Repository öffnen, das wir für das folgende Bild erstellt haben.

Quelle: Screenshot athenaozanich.github.io

Der ganze Code würde bei jedem Laden der Seite eine zufällige Farbe für den Hintergrund des HTML-Körpers generieren. Dieser Code wurde früher als „Vanilla JavaScript“ bezeichnet. Da es jetzt jedoch eine Bibliothek namens Vanilla JS gibt, sollte er besser als „Standard JS“ bezeichnet werden, um Verwechslungen vorzubeugen.

In diesem Zusammenhang sollte darauf hingewiesen werden, warum diese Unterscheidung so wichtig ist. Programmbibliotheken verwenden eine andere Syntax als die Sprache, für die sie entwickelt wurden. Im Folgenden werfen wir einen Blick auf JavaScript-Bibliotheken, um den Unterschied im Vergleich mit dem Standardcode zu verstehen.

JavaScript-Bibliotheken

Es gibt mehrere JavaScript-Bibliotheken, die es Ihnen ermöglichen, die Geschwindigkeit und Klarheit Ihrer Programmierarbeit zu verbessern. Bibliotheken helfen Ihnen dabei, Ihren Code sauber zu halten und Programmiercodes schneller und effizienter zu schreiben. Dadurch ändert sich jedoch häufig die Syntax, weshalb jede Bibliothek erlernt werden muss.

Bekannte Beispiele für Javascript Bibliotheken sind jQuery und React.

Die JavaScript-Bibliothek jQuery

jQuery ist aufgrund ihres Alters und der flexiblen Einsatzmöglichkeiten die bevorzugte Bibliothek für die JavaScript-Programmierung. Außerdem verbessert sie die Effizienz und ergänzt die Programmiersprache durch weitere Funktionen. Sehen wir uns aber zunächst einmal an, wie sich die Syntax vom herkömmlichen JavaScript unterscheidet.

 
$('#overlay').on( "click", '#prev', function(){
   currIdx--;
   if (currIdx < 0) {
      currIdx = 11;
   }
}

Dieses Beispiel sieht komplex aus. Konzentrieren wir uns daher auf einen Aspekt: die äußerste Funktion des Codes.

 $('#overlay').on( "click", '#prev',function(){}

Dieser Code ist eine gültige jQuery, ohne die Angabe der jQuery-Bibliothek würden Sie aber eine Fehlermeldung erhalten, wenn Sie ihn mit traditionellem JavaScript verwenden. Dieser Code enthält zwei interessante Dinge: den $-Selektor, ein Kürzel für HTML-Objekte, und die Methode .on(), einen Event-Listener, der auf einen „Klick“ im Browserfenster wartet.

Die JavaScript-Bibliothek React

Die React-Bibliothek ist eine beliebte Bibliothek, die die Entwicklung von Web-Apps vereinfachen soll. Sie ist robust und verfügt über eine große Anzahl von Open-Source-Mitwirkenden, die die Bibliothek ergänzen, testen und pflegen. Sie funktioniert anders als die meisten Bibliotheken und ist komplexer – sehen wir uns aber einfach die Syntax an:

 
class ShoppingList extends React.Component {
   render() {
      return (
         <div classname="shopping-list">
            <h1>Shopping-Liste für {this.props.name}</h1>
            <ul>
               <li>Brot</li>
               <li>Milch</li>
               <li>Eier</li>
            </ul> 
         </div> 
      );
   }
}

Dieser Code unterscheidet sich stark von einem Standard-JavaScript-Code – und sogar von jQuery. In React deklarieren Sie Ihr HTML in Ihrem JavaScript. Es wird gerendert, nachdem der Code ausgeführt wurde, was sich von der herkömmlichen Webentwicklung unterscheidet.

Für Ihren Workflow stehen viele andere Bibliotheken und Frameworks zur Verfügung, die sich in Syntax, Funktionen und Flexibilität unterscheiden. Die Wahl der für Sie richtigen Option erfordert einige Recherchen und sollte sorgfältig getroffen werden.

Lernen Sie jetzt JavaScript

Nun haben Sie einen ersten Einblick in die Welt der Programmiersprache JavaScript erhalten: Von den wichtigsten Anwendungsbereichen bis hin zu branchenrelevanten Informationen. Dieser Beitrag ist jedoch nur ein Sprungbrett für weitere Erkenntnisse: Denn natürlich gibt es noch viel zu entdecken und zu erlernen.

JavaScript ist allerdings leichter als gedacht und es gibt zahlreiche Online-Ressourcen, die Ihnen das Programmieren mit JavaScript näherbringen. Es sind keine Vorkenntnisse im Bereich der Webentwicklung notwendig, um JavaScript zu erlernen. Die Webentwicklung ist aber die einfachste Methode, um Ihre JavaScript-Programmierkenntnisse anzuwenden und zu trainieren.

Andere Übungsmöglichkeiten sind Websites wie CodePen, die die gesamte Software bereitstellen, die Sie zum Erlernen und Üben von JavaScript benötigen.

 

Titelbild: DMEPhotography / iStock / Getty Images Plus