Javascript Crashkurs

Javascript Crashkurs

Lernen Sie schnell und kostenlos die Javascript Grundlagen und im Javascript Crashkurs

In diesem Kapitel werfen wir einen Blick auf die Programmiersprache JavaScript – oftmals auch mit JS abgekürzt. Hierbei handelt es sich um eine eigene Programmiersprache, die eigentlich ganz unabhängig von PHP ist. Die Anwendungsmöglichkeiten sind dabei außerdem ganz andere. PHP wird auf dem Server ausgeführt und dient dazu, HTML-Seiten mit dynamischen Inhalten zu gestalten – häufig unter Anbindung einer Datenbank.

Wenn diese Seiten jedoch einmal erstellt sind, sind sie starr und unveränderlich. Wenn eine Interaktion mit dem Anwender stattfinden soll, ist es notwendig, eine erneute Anfrage an den Server zu stellen und auf dieser Grundlage eine neue Seite zu erzeugen. Das ist jedoch recht umständlich und langwierig, wodurch die direkte Interaktion mit dem Anwender erschwert wird. JavaScript wird hingegen direkt im Webbrowser des Anwenders ausgeführt.

Daher kann das Programm auf alle Eingaben des Anwenders sofort reagieren und die Darstellung der Seiten unmittelbar anpassen, ohne dass es hierfür notwendig ist, die Seite neu zu laden. Die folgende Liste fasst die wesentlichen Eigenschaften von JavaScript zusammen!

PHP Programmierer buchen!

Javascript hat folgende Eigenschaften:

  • Interpretierte Skriptsprache
  • Clientseitige Ausführung im Webbrowser
  • Skripte lassen sich direkt in die HTML-Seite einbinden oder in einer separaten Datei erstellen
  • JavaScript unterstützt die objektorientierte Programmierung
  • Sehr begrenzte Möglichkeiten, um Daten zu speichern
  • Eventuell fragen Sie sich an dieser Stelle, weshalb in diesem eBook ein Kapitel zu JavaScript erscheint – schließlich möchten Sie ja PHP lernen. Das liegt darin begründet, dass es sich hierbei nicht um konkurrierende Systeme handelt, sondern dass sich die beiden Programmiersprachen gegenseitig ergänzen. Wenn Sie eine HTML-Seite mit PHP erstellen, ist es möglich, darin auch JavaScript-Befehle einzufügen. PHP eignet sich hervorragend dazu, individuelle Inhalte in die Seite einzufügen und Werte in einer Datenbank zu speichern. JavaScript verbessert hingegen die direkte Interaktion mit dem Anwender.

    Die beiden Programmiersprachen führen zu einem perfekten Zusammenspiel. Als PHP-Entwickler sind Sie zwar in der Regel nicht dafür verantwortlich, den JavaScript-Code selbst zu erstellen. Dennoch müssen Sie ihn immer wieder in Ihre Programme einbinden. Dafür ist es wichtig, dass Sie die wesentlichen Grundlagen dieser Programmiersprache beherrschen.

    JavaScript-Befehle in eine HTML-Seite einfügen oder ein externes Script verwenden

    Wenn Sie JavaScript für die Gestaltung einer Internetseite verwenden, besteht dabei stets ein enger Zusammenhang zwischen den HTML-Inhalten und dem JavaScript-Code. Häufig wird der entsprechende Programmcode direkt in die HTML-Seite eingefügt. Das bedeutet, dass Sie zunächst eine HTML-Seite erstellen müssen, um die erforderlichen Strukturen zu erzeugen.

    Ein sehr einfaches Beispiel könnte etwa wie folgt aussehen:

    Bisher verwendet die Seite ausschließlich HTML. Die entsprechende Datei müssen Sie auch mit der Endung .html speichern. Wenn Sie sie ausprobieren, entdecken Sie zunächst einmal nichts Neues. Nun können Sie in dieses Grundgerüst jedoch JavaScript-Code einfügen. Hierfür benötigen Sie ein neues Tag: script. Innerhalb dieses Tags können Sie dann den JavaScript-Code erstellen. Wir beginnen mit einer kleinen Textausgabe. Dafür verwenden wir die Funktion document.write(). Die Ausgabe, die wir erzeugen wollen, fügen wir dann in Anführungszeichen in die Klammer ein.

    Mein erster Javascript Code

    Auf diese Weise fügen Sie den entsprechenden Text in Ihre Seite ein. Sie sehen, dass dieser der Struktur des HTML-Dokuments entsprechend unter der Hauptüberschrift erscheint. Das zeigt, dass die JavaScript-Elemente normalerweise dort erscheinen, wo auch ein gewöhnliches HTML-Element erscheinen würde, das Sie an dieser Stelle in den Code einfügen. Zwar bietet JavaScript auch zahlreiche Möglichkeiten, um die Position eines Elements gezielt zu verändern. Darauf gehen wir an dieser Stelle jedoch nicht weiter ein.

    Den JavaScript-Code direkt in die Seite einzufügen, stellt nicht die einzige Möglichkeit dar, um ihn auszuführen. Es ist auch möglich, ein externes Script zu erstellen. Dafür können sie einen beliebigen Dateinamen verwenden. Achten Sie lediglich darauf, ihm die Endung .js zu geben. Hier können Sie dann alle JavaScript-Befehle einfügen. Wenn wir die gleiche Seite wie im eben dargestellten Beispiel erzeugen möchten, enthält diese Datei nur eine einzige Zeile:

    Diesen Inhalt müssen Sie nun abspeichern. Für unser Beispiel haben wir der Datei den Namen script.js gegeben und sie im gleichen Verzeichnis wie die eigentliche Seite gespeichert. Wenn Sie einen anderen Namen oder Speicherort gewählt haben, müssen Sie im folgenden Code den Pfad entsprechend anpassen.

    Damit die Inhalte der Datei ausgeführt werden, müssen Sie sie noch in die HTML-Seite einbinden. Hierfür kommen wieder die script-Tags zum Einsatz – dieses Mal aber ohne Inhalte. Dafür müssen Sie das Attribut src hinzufügen und dabei den Dateinamen (und gegebenenfalls den Pfad) nennen.

    Externe Javascript-Datei implementieren:

    In den folgenden Beispielen werden wir nur noch den JavaScript-Code angeben. Diesen müssen Sie jedoch stets auf eine der vorgestellten Arten in die HTML-Seite einbinden. Am einfachsten ist es, mit einem externen Script zu arbeiten. So bleibt die HTML-Seite stets genau gleich und der Code in der JavaScript-Datei entspricht exakt dem angegebenen Beispielcode.

    Variablen, if-Statement und weitere grundlegende Elemente von JavaScript

    Bisher hat die Verwendung von JavaScript keinerlei Vorteile für die Gestaltung der Seite gebracht. Die Textausgabe hätten wir auch problemlos in ein gewöhnliches p-Tag stellen können, um einen ähnlichen Effekt zu erzeugen. Dass JavaScript jedoch zahlreiche zusätzliche Funktionen bietet, sehen Sie, wenn Sie die document.write()-Funktion durch die alert()-Funktion ersetzen.

    Die Alert() Funktion in Javascript:

    Wenn Sie dies ausprobieren, erkennen Sie, dass Sie auch mit der alert()-Funktion den entsprechenden Text ausgeben können. Dieser erscheint nun jedoch nicht direkt auf der Seite. Stattdessen wird ein Dialogfenster erzeugt, um den Text auszugeben. Das ist mit einfachem HTML nicht möglich. Darüber hinaus bietet JavaScript noch zahlreiche weitere Möglichkeiten. Es ist beispielsweise möglich, Variablen, if-Statements, Schleifen und viele weitere Elemente zu verwenden, die eine Programmiersprache auszeichnen. Das stellen wir Ihnen nun kurz vor.

    Auch in JavaScript stellen Variablen einen wichtigen Bestandteil fast aller Programme dar. Die Verwendung weist jedoch einige Unterschiede zu Variablen in PHP auf. Hierbei müssen Sie den Variablennamen nicht durch das Dollarzeichen kennzeichnen. Stattdessen müssen Sie ihm bei der ersten Nennung den Ausdruck let oder var voranstellen. Worin der Unterschied zwischen diesen beiden Ausdrücken besteht, kann in diesem kurzen Crashkurs nicht erklärt werden – in den meisten Anwendungsfällen ist die Verwendung ohnehin identisch. Wir verwenden jedoch den Ausdruck let, da dieser etwas gebräuchlicher ist.

    Nun können Sie beispielsweise eine Variable erzeugen. Dazu müssen Sie sie mit dem Ausdruck let einführen und ihr einen Wert zuweisen, zu Beispiel:

    Variablen deklarieren

    In unserem Beispiel erstellen wir jedoch gleich einen interaktiven Dialog. Die prompt()-Funktion erlaubt es, eine Eingabe des Anwenders aufzunehmen. Wir fordern ihn dazu auf, seinen Namen einzugeben und geben daraufhin eine personalisierte Begrüßung auf der Seite aus:

    Sie sehen dass der Ausdruck let nur bei der ersten Nennung der Variable notwendig ist. Danach können Sie auf ihren Wert ohne diesen Zusatz zugreifen.

    Ein weiteres wichtiges Element einer Programmiersprache ist das if-Statement. Genau wie in PHP dient dieses dazu, alternative Programmzweige anhand einer Bedingung auszuführen. In unserem nächsten Beispiel gehen wir davon aus, dass die Seite, die wir erzeugen, nur für den Anwender “Tim” vorgesehen ist. Daher fragen wir wieder den Namen ab. Wenn es sich um den entsprechenden User handelt, geben wir eine Begrüßung aus. Trift das nicht zu, weisen wir ihn darauf hin, dass er nicht zur Nutzung berechtigt ist!

    IF else Bedingung mit Javascript:

    In JavaScript muss die Bedingung stets in Klammern stehen. Die zugehörigen Befehlsblöcke befinden sich in geschweiften Klammern. Mit dem Ausdruck else leiten Sie dabei eine weitere Alternative ein, die immer dann ausgeführt wird, wenn die Bedingung der if-Abfrage nicht zutrifft.

    Auch Schleifen können Sie mit JavaScript erstellen. Diese führen Sie mit dem Ausdruck while ein. Danach fügen Sie eine Bedingung hinzu. Die Schleife wird so lange ausgeführt, wie die Bedingung zutrifft. Mit dem folgenden Beispielprogramm geben Sie beispielsweise die Zahlen von 1 bis 10 aus!

    While Schleife mit Javascript:

    An diesem Beispiel sehen Sie auch, dass JavaScript nicht nur in eine HTML-Seite eingebunden wird. Darüber hinaus dient die Programmiersprache häufig dazu, HTML-Tags in eine Seite einzufügen. Die document.write()-Funktion führt dabei nicht dazu, dass das Tag auf der Seite angezeigt wird. Stattdessen wird es wie ein Tag im Quellcode der HTML-Seite behandelt. Daher können wir mit dem br-Tag einen Zeilenumbruch erzeugen, sodass jede Zahl in einer eigenen Zeile steht.

    Weitere Gestaltungsmöglichkeiten mit JavaScript

    JavaScript bietet nicht nur die klassischen Funktionen einer Programmiersprache – wie das Erstellen von Variablen, if-Statements und Schleifen. Darüber hinaus sind vielfältige Funktionen verfügbar, mit denen sich das Layout oder der Inhalt einer Seite gezielt beeinflussen lässt. Diese Funktionen sind speziell auf die Darstellung in einem Webbrowser ausgerichtet. Andere Programmiersprachen, die nicht für die Ausführung im Browser bestimmt sind, verfügen über keine solchen Funktionen. Daher stellt dies eine große Besonderheit von JavaScript dar.

    Die Möglichkeiten, die hierfür bestehen, sind sehr umfangreich. Daher können wir diese nicht alle vorstellen. Dennoch möchten wir hierfür ein kleines Beispiel präsentieren. In diesem Fall ist es jedoch sinnvoll, den Java-Script-Code direkt in die HTML-Seite einzufügen, da er mit anderen HTML-Elementen interagiert.

    Stellen Sie daher die folgenden Zeilen in das body-Tag der Seite!

    Wenn Sie die Seite aufrufen, erkennen Sie einen Button. Sobald Sie diesen anklicken, wird der Text in blauer Farbe dargestellt. Hierbei handelt es sich um ein kleines Beispiel für die vielfältigen Möglichkeiten, die JavaScript bietet, um die Inhalte und das Layout einer Seite interaktiv zu verändern.