Einführung in JavaScript: Programmierkurs

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).
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... (c) pcwelt.de
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 als Hervorhebungsmodus auswählen. (c) pcwelt.de
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.
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):

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:

JavaScript Test

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. (c) pcwelt.de
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:

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:

JavaScript Test



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. (c) pcwelt.de
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.


Mehr Artikel

Die Teilnehmer des Roundtables (v.l.n.r.): Roswitha Bachbauer (CANCOM Austria), Thomas Boll (Boll Engineering AG), Manfred Weiss (ITWelt.at) und Udo Schneider (Trend Micro). (c) timeline/Rudi Handl
News

Security in der NIS2-Ära

NIS2 ist mehr ein organisatorisches Thema als ein technisches. Und: Von der Richtlinie sind via Lieferketten wesentlich mehr Unternehmen betroffen als ursprünglich geplant, womit das Sicherheitsniveau auf breiter Basis gehoben wird. Beim ITWelt.at Roundtable diskutierten drei IT-Experten und -Expertinnen über die Herausforderungen und Chancen von NIS2. […]

Christoph Mutz, Senior Product Marketing Manager, AME, Western Digital (c) AME Western Digital
Interview

Speicherlösungen für Autos von morgen

Autos sind fahrende Computer. Sie werden immer intelligenter und generieren dabei jede Menge Daten. Damit gewinnen auch hochwertige Speicherlösungen im Fahrzeug an Bedeutung. Christoph Mutz von Western Digital verrät im Interview, welche Speicherherausforderungen auf Autohersteller und -zulieferer zukommen. […]

Andreas Schoder ist Leiter Cloud & Managend Services bei next layer, Alexandros Osyos ist Senior Produkt Manager bei next layer. (c) next layer
Interview

Fokus auf österreichische Kunden

Der österreichische Backup-Experte next layer bietet umfassendes Cloud-Backup in seinen Wiener Rechenzentren. Im Interview mit ITWelt.at erläutern Andreas Schoder, Leiter Cloud & Managed Services, und Alexandros Osyos, Senior Produkt Manager, worauf Unternehmen beim Backup achten müssen und welche Produkte und Dienstleistungen next layer bietet. […]

Miro Mitrovic ist Area Vice President für die DACH-Region bei Proofpoint.(c) Proofpoint
Kommentar

Die Achillesferse der Cybersicherheit

Eine immer größere Abhängigkeit von Cloud-Technologien, eine massenhaft mobil arbeitende Belegschaft und große Mengen von Cyberangreifern mit KI-Technologien haben im abgelaufenen Jahr einen wahrhaften Sturm aufziehen lassen, dem sich CISOS ausgesetzt sehen. Eine große Schwachstelle ist dabei der Mensch, meint Miro Mitrovic, Area Vice President DACH bei Proofpoint. […]

Brian Wrozek, Principal Analyst bei Forrester (c) Forrester
Interview

Cybersicherheit in der Ära von KI und Cloud

Die Bedrohungslandschaft im Bereich der Cybersicherheit hat sich zu einer unbeständigen Mischung von Bedrohungen entwickelt, die durch zunehmende Unsicherheit und steigende Komplexität bedingt ist. Zu diesem Schluss kommt der Report »Top Cyber-security Threats In 2024« von Forrester. ITWelt.at hat dazu mit Studienautor Brian Wrozek ein Interview geführt. […]

Alexander Graf ist Geschäftsführer der Antares-NetlogiX Netzwerkberatung GmbH. (c) Antares-NetlogiX Netzwerkberatung GmbH
Interview

Absicherung kritischer Infrastrukturen

NIS2 steht vor der Tür – höchste Zeit, entsprechende Maßnahmen auch im Bereich der Operational Technology (OT) zu ergreifen. »Wenn man OT SIEM richtig nutzt, sichert es kritische Infrastrukturen verlässlich ab«, sagt Alexander Graf, Experte für OT-Security (COSP) und Geschäftsführer der Antares-NetlogiX Netzwerkberatung GmbH, im ITWelt.at-Interview. […]

Be the first to comment

Leave a Reply

Your email address will not be published.


*