Webtechnologien II
Programmieren mit JavaScript:
Grundlagen und Beispiele
Prof. Dr. Raphael Roßmann
MKD, WS 22/23
Stand: 18.10.2022
„Hallo Welt!“ in JavaScript
2
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var ausgabe="Hallo Welt!";
alert(ausgabe);
</script>
</body>
</html>
Inline-Script, platziert vor
dem schließenden <body>
REPEAT!
„Hallo Welt!“ in JavaScript
3
<script>
var ausgabe="Hallo Welt!";
alert(ausgabe);
</script>
Eine Variable mit Namen
ausgabe wird definiert
Variable wird initialisiert:
Textinhalt wird zugewiesen
Semikolon beendet
Befehl/Zeile
Befehl/Funktion alert()
öffnet ein Warnfenster
Als Text des Fensters wird der
Inhalt der Variable übergeben
REPEAT!
Kernbestandteile von JavaScript: Funktionen
4
Das “Hallo Welt!“-Beispiel enthält bereits drei zentrale Bestandteile von jeder Programmiersprache: Funktionen, Operatoren und Variablen
FUNKTIONEN (“Befehle“)
REPEAT!
Kernbestandteile von JavaScript: Operatoren
5
OPERATOREN�Sie weisen Werte zu, verändern Werte durch mathematische Operationen und vergleichen Werte miteinander
REPEAT!
Kernbestandteile von JavaScript: Variablen
6
VARIABLEN
REPEAT!
Kernbestandteile von JavaScript: Kontrollstrukturen
7
KONTROLLSTRUKTUREN
Sie beeinflussen den ansonsten linearen Ablauf eines Programms und reagieren auf logische Bedingungen
REPEAT!
Beispiel: Eingabe, Kombination und Ausgabe
8
<body>
<script>
var vorname=prompt("Bitte gib deinen Vornamen ein!");
//Der Befehl prompt() fordert zur Eingabe eines Textes� //in einem Warnfenster auf
var ausgabe="Hallo "+vorname+", wie geht’s?";
//Textvariablen können mit dem Operator + kombiniert
//werden; prompt() erzeugt eine Textvariable (vorname)
alert(ausgabe); //Inhalt der Variable im Warnfenster � //per Befehl alert() ausgeben
</script>
</body>
REPEAT!
Beispiel: Eingabe, Berechnung und Ausgabe
9
<body>
<script>
var anzahl=prompt("Wie viele Kugeln willst du?");
var kugelpreis=1.2; //Dezimaltrennzeichen ist der Punkt!
//(nicht das Komma)
var betrag=anzahl*kugelpreis;
//"*" ist "mal"; Grundrechenarten: + - * /
//Wegen der Multiplikation wandelt JavaScript anzahl
//automatisch in eine numerische Variable um!
var ausgabe="Das Eis kostet: "+betrag+" Euro";
//Numerische Var. betrag wird autom. in Text umgewandelt
alert(ausgabe);
</script>
</body>
REPEAT!
Aufgabe: Eingabe, Berechnung und Ausgabe
10
Erweitert
Lösung
REPEAT!
Kontrollstrukturen: if-Anweisung
11
Durch eine if-Anweisung reagiert ein Programm auf logische Bedingungen:
<script>
var auswahl=prompt("Star Wars(1) oder Star Trek(2)?");
if (auswahl=="1") {
alert("Die Macht ist mit dir!“);
} else if (auswahl=="2") {
alert("Energie!");
} else {
alert("Langweilig!");
}
</script>
Logische Bedingung: wahr oder falsch
Wird ausgeführt, wenn Bedingung„wahr“
Achtung!: Doppeltes == prüft Gleichheit
Alle anderen Bedingung
REPEAT!
Kontrollstrukturen: if-Anweisung
12
Prüfung von weiteren Bedingungen per logischem Vergleich und logischer Verknüpfung:
<script>
var zahl=20;
if (zahl!=10) {
alert("Zahl ist ungleich 10!");
}
if (zahl>=19) {
alert("Zahl ist größer/gleich 19");
}
if (zahl>10 && zahl<20) {
alert("Zahl ist größer 10 UND kleiner 20");
}
//Prüfung von ODER mit: zahl>10 || zahl<20
</script>
Vergleich: “WAHR“
Vergleich: “WAHR“
Vergleich und Verknüpfung: “FALSCH“
REPEAT!
Beispiele/Übungen zu logischen Operatoren
13
<body>
<script>
var geschlecht="weiblich";
var alter=20;
if (geschlecht=="weiblich") { /* "ist gleich" -> wahr! (true) */ }
if (geschlecht!="weiblich") { /* "ist ungleich" -> falsch! (false) */
}
if (geschlecht=="weiblich" && alter<=20) { � /* "ist gleich UND kleiner gleich" -> wahr! (true) */ }
if (geschlecht=="weiblich" || alter>20) {
/* "ist gleich ODER größer" -> wahr! (true) */ }
if (geschlecht=="weiblich" && (alter>20 || alter<=10)) {
/* falsch! (false) */ }
</script>
</body>
Vergleiche (<,>,==) und Verknüpfungen (UND, ODER)
REPEAT!
Eigene Funktionen definieren und aufrufen
14
Hier ein einfaches Beispiel:
<script>
function verdoppeln(eingabe) {
var ausgabe="Das Ergebnis: "+eingabe*2;
return ausgabe;
}
alert(verdoppeln(5));
</script>
Eigene Funktionen definieren und aufrufen
15
<script>
function verdoppeln(eingabe) {
var ausgabe="Das Ergebnis: "+eingabe*2;
return ausgabe;
}
alert(verdoppeln(5));
</script>
“function” legt eigene Funktion an
Eigener Name für die Funktion
ein/mehrere Übergabeparameter (optional!)
“return” gibt das Ergebnis zurück (optional)
Aufruf der Funktion mit Übergabeparameter “5”:
Dieser Aufruf wird durch den Rückgabewert ersetzt
Try it!
Interaktion von HTML, CSS und JavaScript
16
Wie kann man per JavaScript Interaktion des Nutzers mit der Website (z.B. Klick/Touch auf einen Button) feststellen und darauf reagieren?
> "Events"/"onclick"-Abfrage oder "Eventlistener"
Wie kann man die Elemente/Inhalte auf einer Website per JavaScript gezielt ansprechen?
> "Selektion" per JavaScript
Wie kann man die Eigenschaften (Text, Aussehen, Position ect.) dieser Elemente per JavaScript verändern?
> "DOM-Manipulation" über CSS-Attribute oder HTML-Inhalte
Interaktion von HTML und JS: Selektion von Elementen
17
Im HTML-Markup steht: <div id="einIDName"></div>
Interaktion von HTML und JavaScript: Events
18
HTML-Elemente mit Interaktionen versehen, indem auf Ereignisse (“Events”) reagiert wird:
<button id="startbutton">Klick mich!</button>
<script>
document.getElementById("startbutton").onclick=
function(){
alert("Button geklickt!");
}
</script>�
Der Button mit der id "Startbutton" wird erst selektiert mit dem Befehl "getElementById". Bei Klick auf den Button ("onclick") wird die Funktion ausgeführt: per alert-Befehl wird ein Warnfenster geöffnet.
Try it!
Code
Interaktion von HTML und JavaScript: Events
19
Neben dem (für Apps wichtigen) Event onclick gibt es noch einige weitere:
ondblclick, onmouseover, onmouseleave, onfocus, onkeydown (Überblick)
Beispiel:
<button id="startbutton">React!</button>
<script>
document.getElementById("startbutton").onmouseover=
function(){
alert("Button mit Mouse berührt!");
}
</script>
Try it!
Interaktion von HTML und JavaScript: Eventlistener
20
HTML-Elemente mit Interaktionen versehen, indem Ereignisse (“Events”) per Eventlistener registriert werden (eine Alternative zu "onclick")
Beispiel: Button mit EventListener
21
<body>
<button id="startbutton">Klick mich!</button>
<script>
function tuwas() {
alert("Button geklickt!");
}
document.getElementById("startbutton").
addEventListener("click", tuwas);
</script>
</body>
Try it!
Interaktion von HTML und JS: Veränderung von Elementen/Inhalt
22
Interaktion von HTML und JavaScript: Klassen und Stile
23
Selektierten HTML-Elementen kann man auch CSS-Eigenschaften hinzufügen:
Beispiel: Interaktion von HTML und JavaScript
24
<body>
<h1 id="ausgabe">Inhalt</h1>
<script>
//Element per ID selektieren und Text reinschreiben
document.getElementById("ausgabe").innerHTML=� "Nachricht von JavaScript";
//Element per ID selektieren und Inline-Style hinzufügen
document.getElementById("ausgabe").setAttribute("style", "color:red");� //Element per ID selektieren und Klasse "aktiv" hinzufügen
document.getElementById("ausgabe").setAttribute("class", "aktiv");
</script>
</body>
Try it!
Datum/Uhrzeit abfragen
25
var datum=new Date();�var stunden=datum.getHours();
Beispiel: Zeitanzeige per alert
26
<body>
<script>
//Datumsobjekt erzeugen und in Variable uhrzeit schreiben
var uhrzeit=new Date();
//Stunden, Minuten und Sekunden aus dem Datum "extrahieren"
var stunden=uhrzeit.getHours();
var minuten=uhrzeit.getMinutes();
var sekunden=uhrzeit.getSeconds();
alert("Aktuelle Uhrzeit: "+stunden+":"+minuten+":"+sekunden);
</script>
</body>
Try it!
Beispiel: Interaktion von HTML und JavaScript: Uhrzeit
27
<body>
<h1 id="uhranzeige">Hallo</h1>
<script>
//Uhrzeit holen
var uhrzeit=new Date();
//Datumsobjekt erzeugen und in Variable uhrzeit schreiben
var stunden=uhrzeit.getHours(); //Stunden aus dem Datum "extrahieren"
var minuten=uhrzeit.getMinutes();
var sekunden=uhrzeit.getSeconds();
document.getElementById("uhranzeige").innerHTML=� stunden+":"+minuten+":"+sekunden;
</script>
</body>
Try it!
Eigene Funktion wiederholt aufrufen (zeitgesteuert)
28
<script>
function zufallspopup() {
alert(Math.round(Math.random()*100));
}
setInterval(zufallspopup, 2000);
//Popup mit Zufallszahl zwischen 0 und 100 alle 2 Sekunden
</script>
Try it!
Beispiel erweitert: Die Uhr laufen lassen
29
<body>
<h1 id="uhranzeige">Hallo</h1>
<script>
function zeigezeit() { //eigene Funktion definieren
var uhrzeit=new Date();
var stunden=uhrzeit.getHours();
var minuten=uhrzeit.getMinutes();
var sekunden=uhrzeit.getSeconds();
document.getElementById("uhranzeige").innerHTML=� stunden+":"+minuten+":"+sekunden;
}
setInterval(zeigezeit, 1000); //jede Sekunde Funktion aufrufen
</script>
</body>
Beispiel: Button fügt Inline-Style mit Farbe Rot hinzu
30
<body>
<h1 id="headline">Mein Text</h1>
<button id="stylebutton">Klick mich!</button>
<script>
function addstyle() {
document.getElementById("headline").
setAttribute("style","color:red");
}
document.getElementById("stylebutton").
addEventListener("click", addstyle);
</script>
</body>
Try it!
Beispiel: Steuerung mit einem Button und Hilfsvariable
31
<h1 id="textfeld"></h1>
<button id="taste">Hallo</button>
<script>
var hilfsvariable="moin"; //1 Hilfsvariable definieren und initialisieren
function servus() {
if(hilfsvariable=="moin") { //2 Hilfsvariable prüfen
document.getElementById("textfeld").innerHTML="Servus";
hilfsvariable="servus"; //3 Hilfsvariable verändern
} else {
document.getElementById("textfeld").innerHTML="Moin Moin";
hilfsvariable="moin"; //4 Hilfsvariable verändern
}
}
document.getElementById("taste").addEventListener("click", servus);
</script>
Try it!
mit Audio
Sounds/Audio abspielen
32
Beispiel:
<script>
var coolsound=� new Audio("https://onlinepromo.biz/mkd/gutenmorgen.mp3");
coolsound.play();
</script>
Nutzereingaben: input-Feld
33
Beispiel
Zufallszahlen generieren
34
Vor allem für Spiele ist es oftmals notwendig, Verhaltensweisen nicht immer nach dem gleichen Schema ablaufen zu lassen. Sie sind ja dann fordernder und spannender, wenn sie “unberechenbar” sind. Für die richtige “Prise Chaos” werden oftmals Zufallszahlen eingesetzt.
Auch in JavaScript gibt es hierfür eine Funktion: Math.random()
alert(Math.random());
Dies gibt einen krummen Wert zwischen 0 (einschließlich) und 1 (ausschließlich) aus.
Multipliziert man nun Math.random() mit einer Zahl und rundet auf per Math.ceil(), so erhält man zufällige Werte zwischen 1 und dieser Zahl:
alert(Math.ceil(Math.random()*10)); //Zahl von 1 bis 10
Beispiel: Zufallszahlen - Würfel die Sechs!
35
Wir wollen ein Programm schreiben, das auf Knopfdruck per Zufall eine Zahl zwischen 1 und 6 ausgibt.
<h1 id="ausgabe"></h1>
<button id="wuerfelbtn">Würfeln!</button>
<script>
function wuerfeln () {
var zufallszahl = Math.random(); //zufällige Zahl zwischen 0 und <1
zufallszahl=zufallszahl*6; //mit der gewünschen oberen Schwelle (hier 6)
//multiplizieren, um höhere Werte zu erhalten
zufallszahl=Math.ceil(zufallszahl); //Aufrunden auf die ganze Stelle
document.getElementById("ausgabe").innerHTML=zufallszahl; //Ausgabe
}
document.getElementById("wuerfelbtn").addEventListener("click", wuerfeln);
</script>
Testen auf Glitch
Arrays (Felder): Definition/Initialisierung
36
Arrays (Felder): Abfrage
37
var namen=["Anna","Berta","Carla","Doro"];
alert(namen[0]); // Ausgabe von: "Anna"�alert(namen[3]); // Ausgabe von: "Doro"
alert(namen[namen.length-1]); /* Ausgabe des letzten Elementes im Array: "Doro" */�
Beispiel
Objekte in Arrays speichern
38
Will man komplexere Daten strukturiert in einem Array speichern, so kann man mit Objekten arbeiten. Dadurch hat man fast eine Art Datenbank innerhalb von JavaScript zur Verfügung
var namen=[ � { vorname: "Anna",� nachname: "Meier" },
{ vorname: "Berta",� nachname: "Müller }�]; //Array mit zwei Objekten und zwei Eigenschaften
Abfrage der Inhalte:
alert(namen[0].vorname); // Ausgabe von: "Anna"�alert(namen[1].nachname); // Ausgabe von: "Müller"
�
Beispiel: Catch-a-ball-game
39
Wir setzen ein einfaches Spiel per HTML, CSS und JavaScript um:
Ein Ball fällt (an zufällig ausgewählten) Stellen des Browsers von oben nach unten. Der Spieler muss den Ball anklicken, bevor der Ball unten aus dem Browser verschwindet. Erwischt er den Ball bekommt er einen Punkt - wenn nicht, verliert er eines von fünf "Leben". Wenn alle "Leben" verbraucht sind, heißt es "Game Over".
Assets:
Bild eines Golfballs: http://onlinepromo.biz/mkd/golfball.png
Wiese als Hintergrund: http://onlinepromo.biz/mkd/grass.jpg
Lösung auf Glitch