Die Beiträge der Serie im Überblick:
Bisher ging es in der Webdevelopment-Serie um HTML und um CSS. Dabei haben wir gelernt, dass HTML eine Art grundlegende Struktur für Dokumente ist und das nahezu alle Dokumente im Internet darauf aufbauen. Mit CSS haben wir gelernt, was Styles sind und wie wir damit HTML-Seiten gestalten können.
Das wichtigste ist erstmal zu sagen, dass JavaScript nichts mit der Programmiersprache Java zu tun hat. Zumindest inhaltlich nicht. Seinen Name verdankt JavaScript einzig der Popularität von Java. Die ursprünglich unter dem Name “LiveScript” veröffentlichte Sprache
Damit der Browser überhaupt von meinem JavaScript etwas wissen kann, muss der Code irgendwie übermittelt und eingebunden werden. JavaScript kann entweder direkt im HTML eingebettet werden oder in einer gesonderten Datei abgelegt und im HTML referenziert werden.
In diesem Beispiel wird das JavaScript direkt im HTML eingebunden. Dazu wird der <script></script> Tag verwendet. Das Attribut type=”text/javascript” ist mittlerweile nicht mehr notwendig. Allerdings sollten nur sehr kleine Scripte direkt eingebunden werden. Große Scripte werden zum einen unübersichtlich und zu große Dokumente dauern länger herunter zu laden.
<html>
<head>
</head>
<body>
<script type="text/javascript">
// JavaScript kann entweder direkt im HTML eingebettet werden
console.log("Hallo Welt");
</script>
</body>
</html>Vorteil von separaten JavaScript Dateien ist natürlich, dass die einzelnen Dateien nicht so umfangreich werden aber auch, dass die Dateien parallel herunter geladen werden können. Das beschleunigt den Download massiv.
Um JavaScript in eine separate Datei auszulagern müssen wir diese Datei erstmal anlegen. Dabei muss die Datei eine *.js Dateiendung bekommen. Diese Datei kann jetzt wieder mit dem <script> Tag eingebunden werden. Dabei wird das Attribut src=”script.js” gesetzt um auf die externe Datei zu referenzieren.
<html>
<head>
</head>
<body>
<!-- oder aber in einer externen Datei liegen -->
<script src="./script.js"></script>
</body>
</html>Die JavaScript-Datei enthält dann nur noch den JS-Code.
Beginnen wir mit etwas sehr Grundlegendem. In jeder Programmiersprache gibt es so genannte Variablen. Variablen sind Strukturen um Daten zu speichern. Dabei ist es erstmal relativ unwichtig was um was für Daten es sich handelt. Ein Text wird genau so in eine Variable gespeichert wie eine Zahl. Das sind auch schon die ersten beiden wichtigen Variablentypen. In den meisten Programmiersprachen ist es unbedingt wichtig, dass in einer Variable vom Typ “Zahl” (in anderen Sprachen gibt es natürlich sehr viele unterschiedliche Arten von Zahlen) kein Text gespeichert werden kann. JavaScript ist der Typ einer Variable eigentlich erstmal egal. Zusätzlich zu Texten und Zahlen gibt es noch die Booleans. Das sind Wahrheitswerte die lediglich zwei Zustände haben können. Diese beiden Zustände sind natürlich wahr oder falsch oder auf englisch true oder false.
let text = "Hallo Welt";
let zahl = 42;
let boolean = true;Dabei sagt let dem Computer, dass wir eine Variable definieren wollen. Danach kommt der Name der Variable. Wir haben z.B. text bzw. zahl gewählt. Variablennamen sollten immer möglichst genau beschreiben, was in der Variable liegt ohne dabei zu lang zu sein. Eine Variable in der die Besucherzahl des heutigen Tages im Maker Space liegt könnte daher besucher_heute aber eher nicht bh oder anzahl_der_besucher_heute_im_maker_space heißen.
let bh = 40"; // zu wenig aussagekräftig
let anzahl_der_besucher_heute_im_maker_space = 40; // zu lang
let besucher_heute = 40; // sieht gut ausNach dem Gleichheitszeichen kommt dann der eigentliche Wert. Dabei ist die Schreibweise je nach Variablentyp unterschiedlich (aber joni, du hast gesagt JavaScript ist der Typ egal – jaja). Dabei ist es wichtig, das Texte in Anführungszeichen (“text”) kommen. Bei Zahlen ist das nicht notwendig (aber JavaScript interpretiert es _meistens_ auch mit Anführungszeichen korrekt, ist aber ungünstig)
Bestimmte Worte können nicht als Variablenname verwendet werden. Dabei handelt es sich um “Reserved Statements” die eine besondere Bedeutung haben. z.B. kann keine Variable let heißen, da das der Idendifier für eine neue Variable ist.
Mit Variablen kann direkt gerechnet werden. Dazu gibt es verschiedene Operatoren. Wichtig ist dabei, dass bestimmte Operatoren auch für Typen verwendung finden, die keine Zahlen sind. Bei Texten wird die zweite Variable an den Text angehängt. Das kann genutzt werden um Texte zusammen zu setzen. Aber es setzt auch Zahlen und Texte zusammen.
let zahl1 = 4;
let zahl2 = 6;
let ergebnis1 = zahl1 + zahl2; // ergebnis ist 10
let ergebnis2 = zahl1 * zahl2; // ergebnis ist 24
let text1 = "hallo ";
let text2 = "welt";
let ergebnis3 = text1 + zahl1; // ergebnis ist "hallo welt4"Ich bin joni - Festangestellt im Maker Space - kümmere mich um alle Fragen, vor allem aber Programmierung, Technik, 3D Druck, Rapid Prototyping - außerdem noch gerne in der Holzwerkstatt unterwegs. Im Maker Space findest du mich überall und nirgends. Wenn ich privat da bin sitze ich meistens an einem der Projekttische am Laptop.
© experimenta gGmbH – Das Science Center. Alle Rechte vorbehalten.
Experimenta-Platz, 74072 Heilbronn, Tel.: +49 (0) 7131 88795 - 0,
info@experimenta.science