2188478

Einführung in JavaScript: Programmierkurs

26.08.2016 | 08:42 Uhr |

JavaScript gehört zu den wichtigsten Programmiersprachen. Mit unserem Einsteigerkurs nehmen Sie die ersten Hürden und schreiben bald leistungsfähige Skripte mit JavaScript.

Seit der Erfindung im Jahre 1995 und der Standardisierung im Jahr 1997 hat JavaScript eine steile Karriere hinter sich. Mit der Einführung von NodeJS hat die Sprache auch auf der Serverseite Einzug erhalten. Wobei serverseitig aber nach wie vor PHP die führende Skriptsprache ist. JavaScript dagegen sorgt im Browser auf dem PC des Anwenders - also clientseitig - für Dynamik.

Seit kurzem ist JavaScript auf Stack Overflow sogar die am meist genutzte Programmiersprache weltweit. Bei Stack Overflow handelt es sich um Frage- und Antwortplattform zu Programmierthemen, bei der Programmierer aus den Bereichen Web-Programmierung und App-Entwicklung dominieren. Aber auch im neutraler aufgestellten Tiobe-Index behauptet sich Javascript auf einem führenden Platz, wobei der ständige Aufwärtstrend vom Winter 2015 allerdings seit einiger Zeit beendet ist. JavaScript ist also in jedem Fall eine wichtige und weit verbreitete Programmiersprache.

Das richtige Werkzeug

Es macht also Sinn, sich mit dem Allrounder zu befassen. Zumal sich JavaScript bestens für Programmiereinsteiger eignet. JavaScript orientiert sich bei der Befehls-Syntax an dem Programmiersprachenklassiker C (im Unterschied zu C ist JavaScript aber nicht für die Hardware-nahe Programmierung zum Beispiel von Mikrocontrollern geeignet).

Gratis Profi-Tools zum Erstellen von Websites

Als Werkzeuge benötigen Sie zunächst einmal nur einen einfachen Texteditor und einen Browser.

Mit dem Editor schreiben Sie den JavaScript-Quellcode, den der Browser dann interpretiert (ausführt). Damit der von Ihnen in einem Editor geschriebene Quellcode auf dem Rechner ausgeführt werden kann, muss er in die für den Rechner lesbare Maschinensprache übersetzt werden. Für diese „Übersetzung“ gibt es grundsätzlich zwei Möglichkeiten: Interpretieren und kompilieren (letzteres zum Beispiel bei C und C++), sowie bei Java und C# eine Kombination aus beiden Techniken. Javascript gehört zu den interpretierten Sprachen, der Quellcode wird hier zur Laufzeit abgearbeitet, das heißt: Der Quellcode wird erst dann in Maschinencocde umgewandelt, wenn er tatsächlich ausgeführt werden soll.

Der ideale Editor

Wenn der Texteditor Syntax-Hervorhebung für JavaScript bietet – umso besser. Sehr gut für das Schreiben des Quellcodes eignet sich unter Windows beispielsweise der kostenlose Editor Notepad++. Bietet der Editor sogar noch Auto-Vervollständigen für den Quellcode, dann ist das perfekt. Die in Windows integrierten Editoren Notepad und Wordpad sind dagegen weniger gut geeignet, weil diese Tools keine Syntax-Hervorhebung bieten und speziell Notepad viel zu wenig leistungsfähig ist.

Gedit zum Erstellen des Quellcodes verwenden: Typische Sprachbestandteile von JavaScript sind farblich hervorgehoben. Damit das der Fall ist...
Vergrößern Gedit zum Erstellen des Quellcodes verwenden: Typische Sprachbestandteile von JavaScript sind farblich hervorgehoben. Damit das der Fall ist...

Unter Linux können Sie beispielsweise Gedit verwenden. Oder das ebenfalls kostenlose Bluefish, mit dem Sie auch HTML und CSS bearbeiten können. Diese Tools installieren Sie am besten über die Paketverwaltung Ihrer Linux-Distribution.

...muss man zuvor JavaScript auswählen.als Hervorhebungsmodus auswählen.
Vergrößern ...muss man zuvor JavaScript auswählen.als Hervorhebungsmodus auswählen.

Hinweis: Wenn man professionell programmiert, benutzt man zum Erstellen des Codes eine „Integrierte Entwicklungsumgebung“, kurz: IDE. Beispiele dafür sind Eclipse oder Visual Studio. Doch für den Anfang reicht ein einfacher Texteditor völlig. Geeignete Profi-Werkzeuge wie zum Beispiel Frameworks stellen wir am Ende dieses Artikels vor.

Webmaster-Tools für HTML, CSS, Javascript und Web-Apps

Den Browser wiederum benötigen Sie, um das Ergebnis Ihrer Programmierarbeit darzustellen. Ob Sie dafür Firefox, Chrome, Opera, den Internet Explorer oder Edge oder einen anderen gängigen Browser verwenden, ist zunächst einmal egal. Auf einen reinen Textbrowser wie Lynx sollten Sie aber verzichten, weil Lynx JavaScript nicht darstellen kann.
Geschichte von JavaScript und Abgrenzung von Java

Der ehemalige Netscape Browser hatte in Version 2.0 eine eingebettete Skriptsprache. Sie hieß LiveScript und wurde von Brendan Eich entwickelt. Mit einem Vertrag mit Sun Microsystems und dem Ziel JavaApplets im Browser zu unterstützen, schaffte man bei Netscape die nötige Schnittstelle namens LiveConnect. Und LiveScript hieß von nun an JavaScript. 

Der Code von JavaScript wird vom Browser interpretiert. JavaScript hat nichts(!) mit der Programmiersprache Java (einst von Sun Microsystems entwickelt. Oracle hat Sun im Jahr 2010 aufgekauft) zu tun, Java interpretiert und kompiliert den Code (JIT-Compiler). Mit Java programmiert man beispielsweise Android-Apps oder serverseitige Anwendungen, aber auch Clientsoftware.

Doch genug der Vorrede, legen wir los mit unserer Einführung in JavaScript.

JavaScript im Browser

Um JavaScript im Browser auszuführen, reicht ein sogenanntes script-Element in der index.html-Datei (die index.html-Datei bildet die Grundlage einer jeden Webseite):

<script> // Hier steht JavaScript code </script>

Der Browser liest die Index.html-Datei und führt Zeile für Zeile aus. Beim script-Element angekommen wird der darin befindliche Code als JavaScript interpretiert, und entsprechend ausgeführt. Um ein Info-Fenster mit dem Text “Hello World!” auszuführen, reicht es aus, diesen Code in eine HTML-Datei zu schreiben und im Browser zu öffnen:

<!doctype html>
<title>JavaScript Test</title>
<script>
  alert('Hello World!');
</script>

Der alert-Befehl gibt ein kleines Fenster mit dem Text „Hello World“ aus. Durch einen Klick auf „OK“ schließen Sie das Popup-Fenster.

Ein nützliches Werkzeug ist die Entwicklerkonsole eines jeden Browsers. Damit lassen sich einzelne JavaScript Schnipsel abtippen und testen. Diese kann wie ein Taschenrechner gesehen werden: Wie ein Buchhalter muss der JavaScript Entwickler kleinere Aufgaben und Gedankengänge irgendwo schnell und abgeschirmt testen können.
Vergrößern Ein nützliches Werkzeug ist die Entwicklerkonsole eines jeden Browsers. Damit lassen sich einzelne JavaScript Schnipsel abtippen und testen. Diese kann wie ein Taschenrechner gesehen werden: Wie ein Buchhalter muss der JavaScript Entwickler kleinere Aufgaben und Gedankengänge irgendwo schnell und abgeschirmt testen können.

Der Browser  erkennt anhand des script-Elements den JavaScript-Code und interpretiert diesen mit Hilfe der eingebauten JavaScript-Implementierung, die sich bei allen Browser-Herstellern an den ECMAScript-Standard hält.

Anwendungsbeispiele von JavaScript

Ziel von JavaScript ist es, Webseiteninhalte dynamischer anzuzeigen und auf Nutzeraktionen zu reagieren. Angefangen mit einfachen Klicks auf Schaltflächen bis zum Nachladen von Inhalten beim Erreichen des Seitenendes. Durch die direkte Implementierung im Browser hat JavaScript Zugriff auf den kompletten angezeigten Fensterinhalt.

HTML und JavaScript im Duett

Das heißt im Umkehrschluss auch: JavaScript im Browser dient zur Verbesserung des Nutzererlebnisses. Anders als auf dem Server muss also hier immer ein Stückweit mit HTML-Code interagiert werden. Dazu können beliebig viele JavaScript-Dateien (mit der Endung .js) erstellt, und diese via folgendem Element eingebunden werden:

<script src=“pfad/zur_javascript/datei”></script>

Dieses Code-Element wird meist kurz oberhalb des schließenden body-Tags platziert. Dadurch lädt der Browser die entsprechende Datei, und stellt die darin befindlichen Funktionen der HTML-Umgebung zur Verfügung. Beim Neuladen der Seite wird auch der JavaScript-Code neu geladen und gespeicherte Werte gehen dabei verloren.

Um jetzt mit einer Schaltfläche zu interagieren, bietet HTML das sogenannte “onclick”-Attribut an. Dieses ist in der Lage JavaScript-Funktionen aufzurufen; ein Beispiel:

<!doctype html>
<title>JavaScript Test</title>
<div id="kasten" style="width: 100px; height: 100px; background: blue;"></div>
<button id="farbenwechsel" onclick="wechselDieFarbe()">Rot</button>
<script>
var wechselDieFarbe = function() {
  document.getElementById('kasten').style.background = 'red';
}
</script>

Sie können das obige Textbeispiel leicht ausprobieren. Tippen oder kopieren Sie das Code-Beispiel in eine Textdatei und speichern Sie diese als NAME.html ab. Klicken Sie dann doppelt darauf, Ihr Standard-Browser öffnet die Datei automatisch.

Das Ergebnis weniger Zeilen HTML und JavaScript. Nach dem Klicken des Buttons rufen wir die Funktion “wechselDieFarbe” auf und ändern damit den Hintergrund des angezeigten div-Elements. JavaScript kann also auch direkt CSS im Browser ändern.
Vergrößern Das Ergebnis weniger Zeilen HTML und JavaScript. Nach dem Klicken des Buttons rufen wir die Funktion “wechselDieFarbe” auf und ändern damit den Hintergrund des angezeigten div-Elements. JavaScript kann also auch direkt CSS im Browser ändern.

Der JavaScript-Teil kann entweder direkt in einem script-Element auf der gleichen Seite oder in einer externen Datei platziert werden. Bei einem Klick auf die Schaltfläche ruft diese die eben genannte JavaScript-Funktion auf. Innerhalb dieser steht mit dem document-Objekt der gesamte Inhalt der Webseite zur Verfügung. Die Unterfunktion getElementById kann mit Hilfe der ID ein Element aus der Webseite abgreifen und innerhalb der Funktion zur Verfügung stellen. Auf diese Weise ändert JavaScript Werte von HTML Elementen.

JavaScript im Detail

Nachdem die Verbindung zum HTML-Code hergestellt wurde, eröffnet sich mit JavaScript eine mächtige Programmiersprache, die anderen Sprachen in kaum etwas nachsteht.

So gibt es diese Basistypen für Variablen:

- Number
- String
- Boolean
- Array

Daneben sind die gängigen Anweisungen vorhanden:
- if/else
- switch
- loops (for und while)
- for…in loops

Der wichtigste Baustein ist jedoch das Objekt. Alles in JavaScript ist ein sogenanntes object, und kann Funktionen, Variablen und andere Anweisungen erhalten. Objekte können zudem von anderen Objekten erben und diese dynamisch im Verlauf der Anwendung erweitern. Zum Erstellen eines Objekts genügt ein simples:

var testObjekt = {};

Mit dem Kennwort var erzeugen Sie eine neue Variable. Anschließend folgt der Name. Das Gleichheitszeichen weist den Wert, der rechts von „=“ steht der Variable, die links von „=“ steht zu. Die öffnende und schließende geschweifte Klammer ist ein leeres Objekt. In dieses können bei Bedarf auch weitere Werte hinzugefügt werden:

var testObjekt = {}; testObjekt.name = “Test”;

Via dem Punkt „.“ greift man auf die Werte des jeweiligen Objekts zu. Existiert noch kein Attribut namens “name”, so wird dieses beim Zuweisen erzeugt. Befindet sich bereits ein Attribut mit dem gleichen Namen, so überschreibt die neue Zuweisung den alten Wert.

var testObjekt = { name: “Eins” }; testObjekt.name = “Zwei”;

Das testObjekt hat jetzt den Namen “Zwei”. JavaScript beachtet zudem Groß- und Kleinschreibung. Die Variable testobjekt ist daher eine andere als testObjekt. Leerzeichen zwischen den einzelnen Zeichen spielen keine Rolle. Innerhalb eines mit Anführungszeichen markierten Strings (Beispiel: “Eins”) jedoch schon, da die Sprache den Wert innerhalb von Anführungszeichen nicht als Code interpretiert. Der String “E i n s” Wird daher auch mit Leerzeichen angezeigt.

Gratis Profi-Tools zum Erstellen von Websites

Mit der Sprache selbst kommen auch eingebaute Funktionen. Objekte wie String haben eingebaute Funktionen, die das Bearbeiten von Text erleichtern. Mit .substring(wert1, wert2) zum Beispiel können Teile einer Zeichenfolge extrahiert werden:

var test = “Beispieltext”;
var subText = test.substring(0,4);

Die Variable subText enthält jetzt den Wert “Beis”, da die Funktion substring alle Zeichen von Stelle 0 (erste Stelle – Programmiersprachen beginnen bei 0 mit der Zählung und nicht mit 1) bis vor 4 extrahiert. Die als oberes Ende angegebene Stelle (hier „4“, also der fünfte Buchstabe) wird nicht mitgenommen.


Die Fülle an Möglichkeiten lassen sich auf unzähligen Webseiten und Referenzen nachlesen. Mozilla bietet hierfür eine eigene Online-Bibliothek mit allen nützlichen Informationen an https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference . Nützlich ist auch die Kommentarfunktion. Zeichen hinter diesen beiden Zeichen werden von JavaScript ignoriert: //. Mehrzeilige Kommentare lassen sich mit /* */ einfügen.


// Das hier ist ein Kommentar
var super = function() { return “Super!”; };

Funktionen


Funktionen sind das Herzstück einer jeden JavaScript-Anwendungen. Damit lassen sich selbst komplexe Anwendungen in einzelne Bausteine untergliedern, und bei Bedarf kombinieren. Eine Funktion kann mit und ohne Parameter erstellt werden:


var ohneParameter = function() {
  //hier passiert nicht viel
  var a = 1 + 1;
};

var mitParameter = function(b, c) {
  // Die Parameter werden hier zur Berechnung verwendet
  var a = b + c;
};

Hinweis: Ein Semikolon am Ende einer Zeile ist nicht notwendig, macht den Code aber übersichtlicher. Die beiden erstellten Funktionen berechnen jeweils einen Wert, und speichern diesen in die Variable a. Nützlich wird dies aber erst so richtig, wenn eine Funktion auch etwas zurück gibt:

var addieren = function(a,b) {
 return a + b;
};

addieren(1,2);
// Gibt 3 zurück

var ergebnis = addieren(1,2);
// Speichert das Ergebnis in eine Variable namens ergebnis

Die Funktion „addieren“ bekommt beim Aufruf zwei Werte übergeben, addiert diese, und gibt das Endergebnis zurück. Der Wert kann anschließend in eine neue Variable gespeichert oder anders weiterverarbeitet werden.

Debuggen und Testen

Eine HTML-Datei mit eingebetteten JavaScript ist nicht notwendig um Code auszuführen und einzelne Eigenschaften der Sprache zu testen. Hierzu genügt das Öffnen eines Browserfensters. Dieses bietet die Möglichkeit, eine sogenannte Entwicklerkonsole zu öffnen. Abhängig vom Browser findet man diese entweder durch das Drücken der F12 Taste, oder über das Menü.

Die Konsole hat einen weitern Vorteil: Mit einem Punkt nach dem gewünschten Objekt können alle eingebauten Funktionen begutachtet werden. Ein zuvor erstelltes Array zum Beispiel gibt mit einem Punkt am Ende Aufschluss über alle verfügbaren Funktionen.
Vergrößern Die Konsole hat einen weitern Vorteil: Mit einem Punkt nach dem gewünschten Objekt können alle eingebauten Funktionen begutachtet werden. Ein zuvor erstelltes Array zum Beispiel gibt mit einem Punkt am Ende Aufschluss über alle verfügbaren Funktionen.

Auf der Entwicklerkonsole steht die gesamte JavaScript-Implementierung des gewählten Browsers zur Verfügung. Hilfreich ist es dann, wenn gewisse Operationen auf Arrays oder anderen Objekten getestet werden sollen.

Firebug: Webseiten untersuchen mit genialem Firefox-Addon

Auch ist es hilfreich so die eingebauten Objektfunktionen zu erforschen. Gibt man Beispielweise einen String ein, und schreibt dahinter einen Punkt (um auf das Objekt zuzugreifen), so schlägt die Browserkonsole alle relevanten und verfügbaren Funktionen vor.

Die Browserkonsole schläge alle relevanten und verfügbaren Funktionen vor.
Vergrößern Die Browserkonsole schläge alle relevanten und verfügbaren Funktionen vor.

Tipp: Für Webseiten-Entwickler, die mit Firefox arbeiten, gibt es zahlreiche Addons, die beim Coden helfen.

Entwicklungsumgebungen

Um JavaScript zu entwickeln Bedarf es– wie bereits oben erwähnt - nur eines Texteditors. Eine valide JavaScript-Datei muss nur mit der Endung .js abgespeichert und im Browser geöffnet werden. Da keine Kompilierung notwendig ist, entfällt der Schritt über die Kommandozeile oder einer größeren Entwicklungsumgebung.

Durch die Beliebtheit der Sprache haben sich aber immer mehr Lösungen zum Entwickeln vorgetan. GitHub hat mit Atom einen Editor veröffentlicht, und den kompletten Source Code zur Verfügung gestellt. Atom selbst beruht auf der Chrome Engine, und ist daher selbst in JavaScript entwickelt. Eine andere beliebte Umgebungen ist Sublime Text.

Bibliotheken und Frameworks

Neben den vielfältigen, eingebauten Möglichkeiten stehen unzählige Lösungen von anderen Entwicklern zur Verfügung, die teilweise auch Open Source sind. Bekanntestes Beispiel ist die Bibliothek jQuery, die gleichzeitig einen guten und schlechten Ruf mit sich bringt. jQuery wurde entwickelt um die Interaktionen mit HTML-Elementen zu vereinfachen.

Auch unterstützen ältere Browser nicht alle JavaScript-Funktionalitäten. jQuery versteckt daher hinter einfachen Funktionen eine Fülle an kompatiblen Lösungen für ältere Browserversionen. Bevor man also eine Anwendung in JavaScript entwickelt, sollten der spätere Nutzer und der Zweck der Anwendung bekannt sein.

Doch auch größere Bibliotheken stehen dem Nutzer komplett kostenlos zur Verfügung. Google stellt mit AngularJS 1.5 und 2.0 Beta ein großes Gerüst für moderne Browseranwendungen zur Verfügung. Auch Facebook sprang auf den Zug mit auf, und entwickelte für diesen Zweck ReactJS.

Zum Einbinden genügt auch hier ein einfaches script-Element. Viele Bibliotheken lassen sich dabei über einen Link auf die Entwicklungsserver der Hersteller einbinden:


// Einbinden von jQuery
<script   src="https://code.jqüry.com/jqüry-2.2.2.min.js"   integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI="   crossorigin="anonymous"></script>

Kompletten Javascript-Kurs jetzt bei Udemy ansehen

Andere Anwendungszwecke als Browseranwendungen

JavaScript hat auch neben dem Browser an Beliebtheit gewonnen. Mit NodeJS bietet sich eine Umgebung für den Server an, um dort JavaScript nativ auszuführen. Chromes Browsererweiterungen lassen sich mit JavaScript schreiben, und unter Windows lassen sich sogar Desktopanwendungen mit dieser Sprache installieren.

Tipp: Bevor Sie größere JavaScript-Dateien final einsetzen, sollten Sie diese noch mit JavaScript-Validatoren überprüfen. Und gegebenenfalls Tempo-Bremsen entfernen. Die fertige Webseite wiederum sollten Sie noch für Google optimieren.




0 Kommentare zu diesem Artikel
2188478