• JavaScript
• Projektdateien
• Codieren mit KI
• Aufgaben

 

Interaktive Webseiten mit JavaScript

 

Bei einer interaktiven Webseite gibt es die Möglichkeit, dass der Computer auf Eingaben reagiert. Wenn man Webseiten erstellen möchte, die interaktiv sind, benötigt man außer HTML und CSS auch JavaScript. Mit JavaScript kann man Schaltflächen (Buttons), Meldungsfenster (Alert-Boxen) und andere Elemente einbauen. Der Quellcode einer Webseite in HTML ist nach bestimmten Regeln aufgebaut. Diese Regeln nennt man Syntax. In diesem Kapitel wird die Syntax von JavaScript vorgestellt.

Im Folgenden werden kleinere Beispiele für JavaScript-Programme dargestellt. Sie dienen zur Einführung in die Programmierung mit JavaScript. Am Ende des Kapitels wird ein Spiel vorgestellt und der Quelltext dazu analysiert.

 

Wichtiges Werkzeug in diesem Kapitel:

Interaktiver HTML, CSS & JS EDITOR

 

Funktion - Alert-Box - Button

Mit den geschweiften Klammern bildet man den Codeblock der Funktion. Zwischen den gescheiften Klammern können beliebig viele Anweisungen stehen. Diese Anweisungen werden ausgeführt, wenn die Funktion ausgeführt wird. Um die Funktion aufzurufen und den Codeblock auszuführen, muss man die Funktionsnamen mit Klammern angeben, gefolgt von einem Semikolon.

Der alert-Befehl lässt eine Meldung im Browser-Fenster (Alert-Box) erscheinen. Die Alert-Box kann auch zur Kontrolle von Werten benutzt werden.

Das HTML-Element input definiert einen Button mit der Aufschrift "Klick mich". Bei einem Klick auf den Button wird die Funktion erstelleAlertbox ausgeführt.

 

 

 

 

Variablen und Konstanten

 

Schlüsselwort (Wörter, die eine besondere Bedeutung haben): var, let, const

Variablenname: Der Name darf nicht mit einer Zahl beginnen und kein Leerzeichen enthalten. Ein Variablenname darf kein Schlüsselwort sein. Der Zuweisungsoperator ist das Gleichheitszeichen =.

Wert: Einer Variablen kann man einen Wert zuweisen. Dazu schreibt man hinter dem Variablennamen ein Gleichheitszeichen = und dann einen Wert. Wenn der Wert einer Variablen ein Text sein soll, muss er in doppelten Anführungszeichen stehen "XX X". In dem Text dürfen auch Leerzeichen stehen.

Nach dem Wert muss ein Semikolon ; stehen. Dadurch wird das Ende der Anweisung gekennzeichnet. 

Beispiele: const pi=3.14; let wochentag = "Montag";

Variablen, die mit const deklariert werden, können nach ihrer Erstzuweisung nicht verändert werden.

 

 

Änderung einer bereits angezeigten Webseite

HTML

Im Quellcode sollte ein Button erzeugt werden und folgendes HTML-Element stehen. 

 

JavaScript

var zahl = 11;

function schreibeZahl() {
zahl = zahl - 1;
let ausgabe = document.getElementById("marke");
alert(ausgabe.innerHTML);
ausgabe.innerHTML = zahl;
}

Im HTML-Quellcode ist ein HTML-Element mit dem id-Attribut gekennzeichnet. In dem oben stehende Beispiel ist es ein p-Element. Durch let ausgabe = document.getElementById("marke");wird dieses HTML-Element der Variablen ausgabe zugewiesen. In der Alert-Box wird angezeigt, was sich aktuell im Innern des HTML-Elements steht. Die Alert-Box dient nur zur Kontrolle und kann auch entfernt werden. In der letzten Zeile wird eine neue Zahl  als neuer Inhalt des HTML-Elements zugewiesen.

 

Optische Gestaltung mit CSS

Darstellung im Browser:

 

HTML

 

Die Ausgabe soll in dem p-Element mit der angegebenen ip erfolgen.

CSS

#marke {
border:1px solid black;
background-color:yellow;
height:100px;
width:100px;
padding:25px;
font-size:50pt;
text-align: center;
}

Die angegebenen Formatierungen beziehen sich auf das p-Element mit der id "marke".

JavaSript

let zahl = 11;

function schreibeZahl() {
if (zahl <= 0) {
return;
}
zahl = zahl - 1;
let ausgabe = document.getElementById("marke");
ausgabe.innerHTML = zahl;
}

Wenn die Bedingung in der if-Anweisung erfüllt ist, bewirkt das return, dass die Funktion an dieser Stelle verlassen wird. Die dahinter stehenden Anweisungen werden nicht mehr durchgeführt.

HTML-Editor mit Projekt "countdown" starten

 

Ergänzung einer bereits angezeigten Webseite

Darstellung im Browser: Mit jedem Klick wird eine Zeile hinzugefügt.

Java-Script

let zahl = 0;

function schreibe() {
zahl = zahl + 1;
let neueZeile = document.createElement("div");
neueZeile.innerHTML = zahl + " hoch 2 = " + quadriere(zahl);
document.getElementById("marke").appendChild(neueZeile);
}

function quadriere(v) {
return v * v;
}

 

 

 

Auftrag 3

Erweitere das Projekt "zahlen-liste" wie folgt (Start des Projektes s.u.):  Ergänze einen zweiten Button, mit dem eine Zahl "hoch 3" berechnet wird und als neue Zeile angezeigt wird. Erstelle ein HTML-Projekt mit zwei Button. Ändere die Beschriftungen der Button. Ändere den Java-Script-Programmtext. Speichere das neue Projekt in einen lokalen Ordner.

HTML-Editor mit Projekt "zahlenliste" starten

 

Analyse eines Online-Spiels