30.12.19 5246 Views 9

credit: ©Konstantin Yolshin/ adobe stock

JavaScript Tutorial #1

Der einfache Einstieg in JavaScript

JavaScript zählt zu den beliebtesten Programmiersprachen der Welt. Es ist speziell für Programme im Webbrowser entwickelt worden. Dabei ist der Einstieg in JavaScript sehr einfach, sodass praktisch jeder mit minimalen HTML-Kenntnissen JavaScript lernen kann.

Falconbyte unterstüzen

Betrieb und Pflege von Falconbyte brauchen viel Zeit und Geld. Um dir auch weiterhin hochwertigen Content anbieten zu können, kannst du uns sehr gerne mit einem kleinen "Trinkgeld" unterstützen.

Thema in Kurzform

  • JavaScript ist speziell für den Einsatz im Webbrowser entwickelt worden.
  • Mithilfe von JavaScript lässt sich eine Website interaktiv gestalten. Sehr beliebt ist es auch für den Einsatz von Animationen auf Websites.

    Inhaltsverzeichnis

  1. Was ist JavaScript?
  2. Vorbereitungen
  3. Das erste JavaScript-Programm
  4. Die JavaScript-Konsole

Was ist JavaScript?

JavaScript (ursprünglich: LiveScript) wurde von Netscape entwickelt, erschien erstmals 1995 und zählt heute zu den beliebtesten Programmiersprachen der Welt. Es wurde speziell für den Einsatz in Internet-Browsern entwickelt, d.h. dass JavaScript-Programme auf dem Browser des Benutzers ausgeführt werden (und nicht etwa auf dem Server wie PHP). JavaScript wird ständig aktuell gehalten und ist durch den ECMAScript Sprachkern standardisiert.

Gemeinsam mit HTML und CSS gehört JavaScript zu den drei Kern-Bestandteilen der Webentwicklung. Während HTML für das "Gerüst" und CSS für das Design einer Website eingesetzt werden, ermöglicht es JavaScript, interaktive Webapplikationen auf einer Website laufen zu lassen.

Typische Anwendungsgebiete von JavaScript im Webbrowser sind:

  • Animationen und Effekte
  • Überprüfung der Gültigkeit von Formulareingaben (Datenvalidierung)
  • Anzeige von Dialogfenstern
  • Dynamische Manipulation von Websites über das DOM

Nicht selten wird JavaScript mit Java verwechselt oder es wird eine enge Verwandtschaft angenommen. Dem ist aber keinesfalls so, handelt es sich bei JavaScript doch um eine eigenständige und von Java unabhängige Programmiersprache.

Mehr über die Unterschiede zwischen JavaScript und Java könnt ihr hier erfahren.

  • JavaScript ebook

Vorbereitungen

Um in JavaScript zu programmieren, sind so gut wie keine Vorbereitungen notwendig. Es genügt ein einfacher Texteditor und für das Starten der Programme ein Internet-Browser (Firefox, Safari, Chrome,...) mit aktiviertem JavaScript Plugin (sollte Standard sein).

Noch ein Wort zum Editor: Auch wenn ein Standard-Texteditor theoretisch ausreicht, werdet ihr damit niemals glücklich. Um JavaScript-Programme vernünftig zu schreiben, sei dringend empfohlen einen speziellen Code-Editor zu installieren, der uns durch die Syntax-Hervorhebung, der Autovervollständigung oder den Hinweisen auf Programmierfehler unabdingbar unterstützt.

Weit verbreitet sind folgende (kostenfreie) Java-Script-Editoren

  • Notepad++
  • Adobe Brackets
  • Sublime Text
  • Atom

Der unserer Meinung nach beste JavaScript-Editor ist das (kostenpflichtige) WebStorm aus dem Hause JetBrains.

Das erste JavaScript-Programm

Um JavaScript-Programme zu entwickeln, betten wir den JavaScript-Code in einen Tag namens <script> ein, der sich seinerseits in einer HTML-Datei befindet:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript mit FalconByte</title>
</head>

<body>

<p>Es folgt JavaScript: </p>

<script>
    document.write("Hallo Welt!");
</script>

</body></html>

Speichern wir diesen Code in einer HTML-Datei namens test.html und öffnen die Datei anschließend mit einem beliebigen Browser, dann sehen wir Folgendes:

Während der Text "Es folgt JavaScript:" mit HTML erzeugt wurde, ist "Hallo Welt!" durch JavaScript generiert worden. Schauen wir uns den JavaScript-Teil nochmal genauer an:

<script>
    document.write("Hallo Welt!");
</script>

document.write() ist die erste JavaScript-Anweisung, die wir kennenlernen. document.write() gibt eine Zeichenkette, die wir innerhalb der runden Klammern in Anführungszeichen schreiben, am Bildschirm aus. Jede Anweisung endet schließlich mit einem Semikolon ("Strich-Punkt-Zeichen"), das wir nicht vergessen dürfen.

JavaScript in externer Datei

In unserem Beispiel oben befindet sich der JavaScript-Code direkt innerhalb der HTML-Datei. Wir können den JavaScript-Code aber auch in eine externe js-Datei auslagern.

Wir erstellen hierzu einfach eine neue Textdatei mit der Endung .js (z.B. code.js) In diese Datei schreiben wir nun unseren JavaScript-Code.

Um das JavaScript der externen Datei einzubinden, benötigt der script-Tag das src-Attribut mit der Zieldatei (hier: code.js):

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

Gerade für größere Projekte oder wenn wir JavaScript-Code in mehreren Programmen einsetzen wollen, ist die Auslagerung sinnvoll.

Die JavaScript-Konsole

Die JavaScript-Konsole ist ein unersetzbares Werkzeug, wenn es darum geht, Fehler in unserem Code aufzuspüren (Debugging). Fehlerhafter Code wird in der Konsole in Form einer hilfreichen Fehlermeldung quittiert.

Sehr nützlich ist in diesem Zusammenhang auch die console-log() Methode. console-log() schreibt einen Text nicht in das Browser-Fenstern der Website, sondern in die JavaScript-Konsole, die nicht zum sichtbaren Website-Inhalt gehört und für uns Entwickler gedacht ist.

Testen wir das mal, indem wir eine entsprechende Anweisung mit einem Beispiel-Text in unsere Beispiel HTML-Datei schreiben:

// HTML-Teil...
<script>
    console.log("Where Am I?");
</script>

// HTML-Teil...

Bevor wir den Text in der JavaScript-Konsole sehen können, müssen wir diese zunächst noch aktivieren. Dies ist von Browser zu Browser unterschiedlich. In Chrome etwa schalten wir die Konsole über den oberen Menupunkt Anzeigen > Entwickler > JavaScript-Konsole ein. In Firefox über den oberen Menupunkt Extras > Web-Entwickler > Web-Konsole.

Ist die Konsole schließlich aktiviert, sehen wir darin den entsprechenden Text aus console.log():

Übungen

einfach

Erstelle eine HTML-Datei namens test.html und lass Sie mithilfe von JavaScript folgenden Text im Browser anzeigen: Probieren geht über Studieren.

Lösung ein-/ausblenden

mittel

Wo liegt der Fehler im folgenden Code?

<html>
<head><title>JavaScript mit FalconByte</title></head><body>

<script>
    document.write("Probieren geht über Studieren")
</script>

</body></html>
Lösung ein-/ausblenden

schwer

Schreibe in der Datei test.html einen beliebigen Text für die JavaScript-Konsole. Öffne anschließend die Konsole und teste, ob es geklappt hat.

Lösung ein-/ausblenden
xxxx

Java lernen

text text

PHP Lernen

zur PHP

JavaScript lernen

move nove move

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2023 Stefan E. Heller

Impressum | Datenschutz | Changelog

Falconbyte Youtube Falconbyte GitHub facebook programmieren lernen twitter programmieren lernen discord programmieren lernen