Skip to main content

JavaScript Basis Guide

In diesem Guide geht es um die grundsätzliche Funktionsweise und das Einsatzgebiet von JavaScript. Die Grundlagen und wichtigsten Befehle werden vermittelt, um für die JavaScript Tutorials gerüstet zu sein. Eine Empfehlung für Alle, die mal in diese Programmiersprache hinein schnuppern oder ihre Vorkenntnisse auffrischen wollen.

Vorbereitung: JavaScript wird sehr oft in Kombination mit HTML verwendet, daher verweise ich an dieser Stelle auf den HTML Basis Guide, falls du nichts mit HTML anzufangen weißt.Ansonsten reicht ein üblicher Webbrowser wie Firefox oder Chrome und ein Texteditor (ich empfehle Brackets) um mit dem Programmieren zu starten. Als sehr gute Ergänzung und Nachschlagewerk mit einfachen Beispielen empfehle ich die Seite w3school.com

Prolog

JavaScript ist eine Programmiersprache, die hauptsächlich im Bereich WebApps und Internetseiten Verwendung findet. Ihr ursprünglicher Einsatz beschränkte sich darauf, dynamischere Interaktionen mit dem an sich sehr statischen HTML-Code zu ermöglichen. Mitlerweile gibt es soviele Frameworks und Bibliotheken, dass es  in Kombination mit HTML5 sogar vollwertige, plattformübergreifende Programme und Spiele zu entwickeln.

In der Regel werden JavaScripte clientseitig also im Browser des Besuchers ausgeführt, nicht etwa auf dem Webserver. Serverseitig wird meist auf PHP oder Python zurückgegriffen. Auch wenn der Name einen Verwandheitsgrad erahnen lässt, ist JavaScript eine von Java unabhängige Programmiersprache.

Erklärung am Beispiel

JavaScript wird sehr viel auf Webseiten eingesetzt, um im Browser Aktionen auszuführen, ohne die Seite neu laden zu müssen. Ein häufiges Beispiel ist das Klicken eines Buttons zum Auslösen einer JavaScript-Funktion.

Im folgenden CodePen ist ein HTML-Code und die JavaScript-Funktion auf die er zurückgreift zu lesen. Daneben sieht man direkt das Resultat:

Wenn dir der Code einleuchtend vorkommt kannst du direkt zum nächsten Kapitel springen.

Ansonsten kommt jetzt eine ausführliche Erklärung:

Eine JS-Funktion direkt aus dem HTML-Code auszurufen ist ein Spezialfall. Wie es im Allgemeinen Funktioniert kommt im nächsten Kapitel, aber nun zum JavaScript.

In der ersten Zeile definieren wir mit dem Befehl function eine Funktion mit dem Namen showtext, der Name ist frei wählbar (Groß- Kleinschreibung spielt eine Rolle).  Dahinter stehen in runden Klammern die sogenannten Parameter, das sind Variablen oder Platzhalter, für etwas was ich in die Funktion hinein gebe. Der Inhalt wird beim Aufrufen der Funktion in die Klammern geschrieben (siehe HTML-Code) In den geschweiften Klammern steht dann das, was die Funktion tatsächlich tut. Die Zeilenumbrüche sind zur Übersichtlichkeit, zum Beenden des Befehls benutzt man das Seminkolon.

Das document repräsentiert unseren vollständigen HTML-Code durch den Punkt dahinter greifen wir auf dessen Elemente zu. In unserem Fall ist  der Absatz in dem wir unseren Text anzeigen wollen das Element, das wir brauchen (der Button hat diese Funktion aufgerufen und damit ausgedient). Falls es im Dokument mehrere Absätze gibt, wir aber einen bestimmten suchen, greifen wir uns diesen speziellen Absatz über die einzigartige ID ‚content‘ heraus: getElementById(‚content‘). Die Hochkommata stellen sicher, dass wir ein Wort oder Text angeben und keinen Befehl. Den Inhalt des Absatzes kriegen wir durch .getInnerHtml() mit dem Gleichzeichen schreiben wir jetzt endlich den Text in diesen Absatz. Den Text den wir anzeigen wollen haben wir ja in die meinText Variable geschrieben.

Der Vorteil von Parameter ist, dass sich die Funktion für verschiedene Zwecke wiederverwenden lässt.

Übung: Editiere mein CodePen so, das ein weiterer Button erscheint, der einen anderen Text anzeigt, oder den Text löscht. Eine mögliche Lösung findest du hier. Du brauchst nur den HTML-Code zu bearbeiten. Nach dem nächsten Kapitel bist du in der Lage, diese Dinge auf deiner eigenen „Seite“ von deiner Festplatte auszuführen.

Einbinden und Ausführen von JavaScript

Wie schon erwähnt ist der Aufruf von JavaScript aus einem HTML-Tag ein Spezialfall, üblicher ist die Verwendung von <script>– Tags. Innterhalb dieser Tags (also zwischen <script> und </script> kann direkt der JavaScript-Code in unser HTML-Dokument geschrieben werden. Für Seiten mit wenig JavaScript ist dies durchaus üblich. Ab einer gewissen Menge Code macht es meist Sinn, diesen in einer (oder mehreren) externen Datei zu Speichern, die ganz einfach mit <script src="pfad/datei.js"></script> eingebunden werden kann. Dies werden wir gleich für unser obiges Beispiel tun. Wenn du dich vorbereitet wohler fühlst, solltest du dir noch kurz die Zeit nehmen und folgenden Absatz überfliegen. Bist du allerdings der Typ, der gern später merkt, dass er besser vorbereitet hätte sein können überspringe ruhig den Kasten.

Reihenfolge und Gültigkeit
Der JavaScript Code wird in der Reihenfolge ausgeführt in der er durch das HTML-Dokument geladen wird. Das gilt auch für externe Dateien. Funktionen können nach dem Einbinden über ihren Namen ausgeführt werden. Greift eine Funktion auf ein HTML-Element zu, muss dieses erstellt sein, bevor die Funktion ausgeführt wird.

Variablen werden für die gesamte Seite definiert, wenn also mehrere Scripte eingebunden werden muss darauf geachtet werden, dass eine Variable nicht aus Versehen vom anderen Script überschrieben wird.

Eigene interaktive Webseite

Wir öffnen unseren Texteditor und erstellen zwei Textdateien. Ich nenne sie index.html und code.js. Zuerst füllen wir die index.html mit minimalistischem HTML-Code der nicht viel mehr tut, als eine Leere Seite, eine Überschrift, einen Knopf und einen leeren Absatz anzeigt. Eben den Code der auch schon ganz am Anfang im CodePen stand mit dem Unterschied, dass wir jetzt noch unsere eigene JavaScript-Datei laden:

index.html
<html>
  <head>
    <title>JS Demo</title>
   <script src="code.js"></script>
  </head>
  <body>
    <h3>Klick den Knopf</h3>
    <button onclick="showtext('Neuer Text')" type="button">Knopf</button>   
    <p id="content"></p>
  </body>
</html>

Bemerkung: Hochkommas und Anführungszeichen können gleichermaßen zum Kennzeichnen von Strings verwendet werden. Manchmal muss man Text verschachteln wie in Zeile 8, wird der JavaScript-Befehl komplett in Anführungszeichen gesetzt, deshalb, habe ich den Darin enthaltenen Text in Hochkommas gesetzt. Ein Anführungszeichen würde nämlich den Befehl beenden und dadurch zu Fehlern führen. Hochkommas und Anführungszeichen können durch abwechselnde Nutzung beliebig verschachtelt werden. So können sie auch regulär im Text verwendet werden.

Zum Testen öffnen wir jetzt unseren Browser und navigieren zu der html-Seite auf unserer Festplatte. Dazu gibst du entweder den direkten Pfad zur Datei (mit einem file:// davor) oder einfach nur file:// ins URL-Feld ein und navigierst dann durch die Ordner zur Datei. Jetzt solltest du eine Seite ähnlich der Vorschau im CodePenn aus Kapitel 1 sehen. „Klick den Knopf“ und „[Knopf]“. Allerdings sollte noch nichts passieren wenn du drauf drückst, was kein Wunder ist, da unsere code.js noch leer ist.

Jetzt ist es soweit und du darfst deine erste Zeile JavaScript-Code schreiben: Öffne die code.js und beginne mit diesem Code:

code.js
function showtext(meinText){
document.getElementById('content').innerHTML = meinText;
}

Nachdem du den Code nun gespeichert hast, aktualisiere die Seite in deinem Browser und teste den Button. (Sollte nichts passieren versuche einmal deinen Browser-Cache zu leeren str+umsch+entf)

Wir können Code nicht nur durch Buttons ausführen, sondern zum Beispiel auch, sobald die Seite geladen ist. Dazu fügen wir unserer code.js eine zweite Funktion (egal ob vor oder nach der showtext()-Funktion) hinzu:

window.onload = function(){
    document.getElementById('content').innerHTML = 'Anfangs Text';
}

Jetzt wird direkt beim Öffnen der Seite die eine Funktion und beim Klick auf den Button die Andere Funktion ausgeführt. Im nächsten Kapitel werden wir sehen, wie man den Inhalt nicht nur ersetzen, sondern diesen auch Manipulieren oder damit Rechnen kann, in dem wir ein sehr einfaches Rechenspiel programmieren.

Variablen und Operationen

Wir wissen jetzt schon wie wir Funktionen ausführen können, bisher hatten diese aber nur einen Befehl und der hat eigentlich immer nur Text beinhaltet. Unsere erste Variable meinText haben wir auch schon verwendet. Noch häufiger als Text werden wir allerdings Zahlen brauchen und auch diese können wir in Variablen aufbewahren, um sie wiederzuverwenden oder zu verändern.

Wenn eine Variable nicht direkt der Funktion als Parameter übergeben wird (in den Klammern) dann müssen wir sie zuerst erstellen. Dies Tun wir mit dem Befehl var variablenName;. Üblicherweise beginnen wir Variablennamen mit Kleinbuchstaben, verzichten auf Leer- und Sonderzeichen. Es ist dabei egal um was für einen Variablentyp (text/zahl/…) es sich handelt, dies wird automatisch entschieden, abhängig davon was wir hineinschreiben. Es können mehrere Variablen auf einmal durch Komma getrennt erstellt werden. Mit dem Gleichzeichen überschreiben bestimmen wir ihren Inhalt:

 

var a, b, c, erg1, erg2;

a = 2;
b = 3;
c = "4";

erg1 = a + b;
erg2 = c + a;

Die einfachste Operation zwischen Variablen ist die Addition. Für Zahlen wird algebraisch addiert, für Text werden die Texte einfach aneinander gehangen.

Im Beispiel oben, schreiben wir 2 bzw. 3 als Zahl in die ersten beiden Variablen. C aber beinhaltet Text, da die 4 in Anführungszeichen steht. erg1 ist also 5, während erg2 „42“ ist, da die Zahlen nicht verrechnet, sondern als Ziffern einfach hintereinander geschrieben werden. Für Zahlen gibt es natürlich noch allemöglichen weiteren Operationen wie mal (*), minus (-) und geteilt (/). Tipp: Möchte man Zahlen technisch als Text behandeln, kann man sie einfach mit einem leeren String "" addieren.

Rechentrainer Teil1

Mit dem Wissen, dass wir bisher haben, können wir bereits einen kleinen Kopfrechentrainer für den Browser programmieren. Es soll eine Aufgabe gestellt werden und 3 Buttons als Lösung vorgeschlagen. Der Nutzer klickt auf die richtige (Button wird grün) oder eine Falsche Lösung (Button wird rot). Wir beginnen mit dem Grundgerüst in Html: wir brauchen Eine Überschrift <h3>Rechentrainer</h3> und ein Absatz mit Text für die Aufgabe <p id='task'>Hier erscheint die Aufgabe</p>. Dann brauchen wir natürlich noch die Buttons (3Stk) mit den Lösungen, auch das Kennen wir schon <button id="ans1">Antwort 1</button> Alle Felder, auf die wir später zugreifen wollen bekommen direkt eine ID insgesamt ist das also unser neue index.html:

<html>
  <head>
    <title>JS Rechentrainer</title>
   <script src="code.js"></script>
  </head>
  <body>
    <h3>Rechentrainer</h3>
      <p id="aufgabe">Hier erscheint die Aufgabe</p>
    <button id="ans1" onclick="proof(this)" type="button">Antwort1</button>
    <button id="ans2" onclick="proof(this)" type="button">Antwort2</button>
    <button id="ans3" onclick="proof(this)" type="button">Antwort3</button>
  </body>
</html>

Ich habe jetzt als JavaScript-Datei wieder code.js angegeben, dies muss evt. ersetzt werden, falls ihr die Datei anders nennt. Der HTML-Code verrät auch schon, dass wir eine Funktion verwenden werden, die sich proof nennt, um zu prüfen ob der jeweilige Button die richtige Lösung enthält, darauf kommen wir bald zurück.

Aber wenn wir uns die Seite jetzt angucken sehen wir nichts weiter als Platzhalter.

Darum kümmern wir uns zuerst. Wir öffnen unsere Datei code.js und ganz oben deklarieren (erstellen) wir erst mal alle Variablen die wir brauchen. Das sind a, b und c für die möglichen Antworten. num1, num2 für die zwei Zahlen in der Aufgabe und natürlich task für die Aufgabe selbst (als Text) die Unterteilung in die einzelnen Zeilen ist nur zur Übersicht, es könnten auch alle Variablen mit einem var-Befehl erstellt werden. Die zwei Slashes // makieren übrigens einen Kommentar, der nichts weiter mit dem Befehl zu tun hat.

var task; //task as text
var num1, num2; //numbers
var a, b, c; //answers

Jetzt brauchen wir eine Funktion, die uns die Aufgabe und Antwortmöglichkeiten in die jeweiligen Felder bzw. Buttons schreibt. Um die Aufgabe zu erstellen müssen wir natürlich entscheiden mit welchen Zahlen, wir nehmen erstmal 5 und 6 später wählen wir dann zufällige Zahlen. Wenn wir die zwei Zahlen angegeben haben, können wir b (richtige Lösung) direkt ausrechnen (num1+num2) und als a und c nehmen wir einfach einen mehr/weniger also a = b-1 und c = b+1. Jetzt fehlt nur noch die Aufgabe selbst, wir können nicht einfach num1+num2 schreiben, da wir sonst das Ergebnis erhalten, deshalb benutzen wir den Trick mit den leeren anführungszeichen, „“ und addieren (hängen hinten an) num1 und dann addieren wir das +-Zeichen als Text als „+“ damit es angezeigt wird und natürlich num2. Damit haben wir alle Informationen und müssen diese nurnoch mit der gewohnten getElementById()-Methode in die passenden Felder schreiben. Damit das ganze beim Laden der Seite direkt passiert, nutzen wir window.onload

window.onload = function newTask(){
    num1 = 5;
    num2 = 6;
    task = ""+num1+" + "+num2;
    b = num1 + num2;
    a = b - 1;
    c = a + 1;
    document.getElementById('task').innerHTML = task;
    document.getElementById('ans1').innerHTML = a;
    document.getElementById('ans2').innerHTML = b;
    document.getElementById('ans3').innerHTML = c;
}

Hier das Beispiel live als CodePen:

Wenn wir jetzt die Seite aufrufen, sehen wir die erste Aufgabe 5 + 6 mit 10, 11 und 12 als Antwortmöglichkeit. Da wir als Programmierer eh schon wissen, dass b korrekt ist können wir uns an dieser Stelle das Rechnen sparen und auf den zweiten Button klicken, um festzustellen das noch nichts passiert. Es wird die proof()-Funktion aufgerufen die noch garnicht existiert. Das ändern wir, nach einem kleinen Exkurs.

Bedingungen und logische Operationen

Da die wenigsten Programme einfach immer nur das gleiche machen, sondern auf bestimmte Informationen reagieren müssen, zum Beispiel in Spielen Wenn Taste(links) gedrückt wurde, dann bewege den Charakter nach links. Oder für unseren kleinen Rechner: Wenn Antwort korrekt, dann mache Button Grün, sonst Rot. Oder auf englisch: If… than.. else und mit ein paar Klammern, sind wir dann auch schon bei der Form für unseren Code:

if ( Bedingung ) {
//was dann ausgeführt wird
}
else {
//was sonst ausgeführt wird
}

Dieses Prinzip ist einer der Grundbausteine aller Programmiersprachen. Zwischen den geschweiften Klammern können beliebig viele Befehle und Funktionen aufgerufen werden, die ausgeführt werden wenn die Bedingung erfüllt (true) oder eben nicht erfüllt (false) ist. Es muss also immer ein eindeutiges ja/nein bzw. true/false zwischen den runden Klammern stehen. Dies kann direkt durch eine Variable mit dem Inhalt true oder false (Typ Boolean), oder dem Vergleich von zwei Werten oder Variablen zum Beispiel if ( x > 0 ) wenn der Wert der Variable größer als Null ist, würde alles was in den geschweiften Klammern dahinter steht ausgeführt werden. Alle gängigen Vergleichsoperatoren sind:


Operator Beschreibung
< kleiner oder kürzer
> größer oder länger
== exakt gleich
!= ungleich
>= größer oder gleich
<= kleiner oder gleich

Es lassen sich auch mehrere Bedingungen logisch verknüpfen. Dafür schreibt man am besten die Bedingungen nochmal in runde Klammern so können auch komplexe Bedingungen auf ein finales true/false runtergebrochen werden. || ein logisches oder (kein entweder.. oder) das heißt true, wenn eine der beiden Bedingungen erfüllt ist. && bedeutet „und“ liefert nur true, wenn beide Bedingungen erfüllt sind. Mit diesem Wissen können wir zurück zu unserem Rechentrainer kommen.

Rechentrainer Teil2

Wir wollten als letztes eine Funktion proof() schreiben, die mithilfe der If-Bedingung überprüft, ob das Ergebnis auf dem Button korrekt ist. Im HTML-Code wird der proof()-Funktion jeweils ein Parameter this übergeben. This bedeutet in diesem Fall, das der gesamte Button übergeben wird. Mit diesem Parameter können wir in der Funktion dann alles mögliche mit genau diesem Button durchführen, zum Beispiel die Farbe ändern. So reicht uns eine Funktion für alle Buttons.

Wir lesen also den Wert, der in dem Button steht aus und vergleichen ihn mit dem Ergebnis der Aufgabe. Den Button-Inhalt bekommen wir entweder durch .innerText oder durch .innerContent ausgelesen, das hängt vom Browser ab, deshalb benutzen wir auch hier das oder || um es für alle Browser gültig zu machen. Den Inhalt schreiben wir in die Variable val, die wir dann mit dem ergebnis num1+num2 vergleichen. Und wenn ja färben wir den Button grün, sonst rot:

proof() function
function proof(button){
  var val = button.textContent || button.innerText;
  if(val == num1+num2){
  button.style.background='green';
     }
  else{
    button.style.background='red';
  } 
}

So könnte es aussehen:

Damit nicht jedesmal die gleiche Nummer in der Aufgabe steht, ersetzten wir die Werte für num1 und num2 durch Math.random() * 10. Der random Befehl gibt eine Dezimalzahl zwischen 0 und 1, multiplizieren wir diese mit 10 erhalten wir eine Zahl zwischen 0 und 10. Da wir eine natürliche und keine Dezimalzahl suchen, benutzen wir noch die Math.round( … ) Funktion. die ersten Zeilen der newTask()-Funktion sehen dann so aus:

num1 = Math.round(Math.random()*10);
num2 = Math.round(Math.random()*10);

Jetzt kriegen wir Immerhin bei jeden Aufruf eine neue Aufgabe, nur wäre es doch noch angenehmer, nicht jedes Mal die Seite neu aufrufen zu müssen.

Übung: Versuche einmal selbst eine Lösung zu finden, neue Aufgaben zu erhalten, ohne die Seite neu zu laden.

Falls du keine Idee hast hier ein Tipp, der die Funktion aufruft.. Oder direkt zur Lösung.

Nachtrag: Hintergrund zurücksetzen.

Mit dem Befehl document.getElementById('ans1').style.background = 'white';  in der newTask() Funktion können wir den Hintergrund des Buttons zurück auf Weiß setzen, nach jeder Aufgabe. Analog muss der Befehl natürlich auch für ans2 und ans3 ausgeführt werden.

Ausblick

Natürlich ist unser kleiner Rechentrainer weit davon entfernt ausgereift zu sein. Es fehlt mindestens noch ein Design, eine zufällige Anordnung der Buttons, variierende Lösungsmöglichkeiten, verschiedene Zahlenräume, verschiedene Operationen und noch viel mehr. Aber als Grundlage zum hinein schnuppern soll das erst mal genügen.

Vielleicht wird noch ein Tutorial folgen, dass auf diesem hier aufbaut und den Rechentrainer zu einer brauchbaren WebApp erweitert. Das wäre der Einstieg in den Bereich JavaScript in der Webentwicklung.

Alternativ kann sich natürlich auch der Entwicklung von Spielen zugewandt werden, dann könnte das Tutorial zum Phaser Framework für dich interessant sein.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.