<
* `prompt()`: Nachricht anzeigen und zu Eingabe auffordern; [Dokumentation](https://developer.mozilla.org/en-US/docs/Web/API/Window.prompt)
* `Number()`: Text in Zahl umwandeln; [Dokumentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#Example.3A_Convert_numeric_strings_to_numbers)
## Einbindung
Javascript wird über ein spezielles HTML-Tag, das `<script>`-Tag, in eine Seite eigebunden. Die Einbindung sieht so aus:
```html
<html>
<body>
<script type="text/javascript">
alert("Hallo");
</script>
</body>
</html>
```
Zu beachten ist, dass das `<script>`-Tag immer das letzte Element im <body> sein sollte.
Code, der in einem `<script>` Tag steht, wird immer sofort nach dem Laden der Seite ausgeführt.
## Buttons
Knöpfe werden im HTML wie folgt definiert:
```html
<button>Klick mich</button>
```
Über das `onclick`-Attribut kann festgelegt werden, was bei einem Klick auf den Knopf passieren soll. Der Wert des Attributs ist der Name der Funktion, die ausgeführt werden soll:
```html
<button onclick="etwas_machen()">Klick mich</button>
```
Die Funktion muss in einem Skript-Tag definiert sein:
```html
<script type="text/javascript">
function etwas_machen() {
alert('Hallo');
}
</script>
```
## Elemente verändern
Um Elemente einer HTML-Seite zu verändern, muss immer zuerst eine Referenz auf das Element geholt werden und das Element dann in einer Variable gespeichert werden. Um HTML-Elemente in Javascript zu referenzieren, können die bekannten CSS-Selektoren verwendet werden (`#` für ID, `.` für Klassen).
Der Code
```js
var bodyElement = document.querySelector('body');
bodyElement.style.backgroundColor = 'red';
```
wählt zuerst mit `document.querySelector` das `body`-Element aus und speichert es in der Variable `bodyElement`. Danach wird mit `.style.backgroundColor` die Hintergrundfarbe auf rot gesetzt.
Der Ausdruck nach `.style` entspricht jeweils der CSS-Regel (hier: `background-color`). Wichtig ist hier, dass CSS-Regeln mit einem Bindestrich leicht abgeändert werden: der Bindestrich wird gelöscht, dafür der nächste Buchstabe gross geschrieben (`font-size` → `fontSize`, `border-radius` → `borderRadius`) - der Wert kann hingegen **immer** direkt aus dem CSS übernommen werden.
Der Code
```js
var bodyElement = document.querySelector('body');
bodyElement.style.backgroundColor = 'red';
```
entspricht somit den CSS-Regeln
```css
body {
background-color: red;
}
```
## Mehrere Elemente anwählen
Eine Einschränkung von `document.querySelector()` ist, dass immer nur das erste passende Element ausgewählt wird. Wenn mehrere Elemente ausgewählt werden sollen, muss `document.querySelectorAll()` verwendet werden. Die Funktionsweise ist dieselbe, mit dem Unterschied, dass `querySelectorAll` statt einem einzigen Elemente eine Liste von Elementen zurückgibt.
Die Elemente müssen dann mithilfe einer for-Schleife einzeln bearbeitet werden:
```js
var elemente = document.querySelectorAll('p');
for(var i = 0; i < elemente.length; i = i + 1) {
elemente[i].style.color = 'red';
}
```
## Events
Statt nur auf Klicks zu reagieren, können mit Hilfe von `Events` beliebige Ereignisse abgefangen werden, wie zum Beispiel das auswählen eines Textfelds oder das Drüberfahren der Maus über ein Bild.
Die Funktion `addEventListener` lässt den PC auf ein bestimmtes Ereignis warten und dann bestimmten Code ausführen:
```html
<div style="background-color: red">Bla</div>
```
```js
var d = document.querySelector('div');
d.addEventListener("click", klick);
function klick() {
d.style.backgroundColor = 'blue';
}
```
In diesem Beispiel wartet der PC auf den Event `click` auf dem ersten Div-Element, das heisst, auf einen Klick auf das Div. Nach dem Klick wird die Funktion (bzw. der **Event-Handler**) `klick` ausgeführt, die unten definiert ist, und die Hintergrundfarbe des `div`s auf blau ändert.
Eine vollständige Liste der Ereignisse befindet sich <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events">hier</a>.
Sollen Events für mehrere Elemente separat ausgewertet werden, existiert in den Event-Handlern die Variable `this`. In ihr ist das Element gespeichert, das vom Event betroffen war, z.B. das Div, auf das geklickt wurde.
```js
var d = document.querySelectorAll('input');
for(var i = 0; i < d.length; i = i + 1) {
d[i].addEventListener('focus', grau);
d[i].addEventListener('blur', weiss);
}
function grau() {
this.style.backgroundColor = 'red';
}
function weiss() {
this.style.backgroundColor = 'white';
}
```
So wird jeweils nur die Farbe des ausgewählten Elements geändert, anstatt die Farbe aller Input-Elemente.
## Attribute lesen
Manchmal muss man die Attribute von Elementen lesen, z.B. das `href`-Attribut eines Link-Elements. Javascript bietet eine einfache Möglichkeit dazu, `getAttribute`:
```js
var link = document.querySelector('a');
var url = link.getAttribute('href');
```
`getAttribute()` wird der Attributname angegeben, der gesucht wird (hier: `href`). Umgekehrt können mit Javascript Attribute auch gesetzt werden, und zwar mit `setAttribute`. Hier müssen der Attributname und der neue Wert angegeben werden:
```js
var link = document.querySelector('a');
link.setAttribute('href', 'http://www.google.com');
```
## Elemente generieren
Es gibt Anwendungen, bei denen neue Elemente per Javascript generiert werden müssen. Das funktioniert ähnlich wie die bisherigen Funktionen zur Bearbeitung von Elementen, und zwar mit der Funktion `createElement()`:
```js
var div = document.createElement("div");
var body = document.querySelector('body');
body.appendChild(div);
```
`createElement` generiert ein neues Div, zeigt es aber noch nicht an. Dazu muss das neue Element zuerst an ein schon existierendes Element angehängt werden (hier: `body`). Dies geschieht mit `appendChild`.
Nach diesen Schritten ist das neue `div`-Element als letztes Element im `body` sichtbar.
## Elemente löschen
Elemente können auch per JS wieder gelöscht werden. Dies ist ein bisschen kompliziert, weil ein Umweg über das Elternelement gemacht werden muss:
```js
var überschrift = document.querySelector('h1');
überschrift.parentNode.removeChild(überschrift);
```
Das heisst, dass man eigentlich dem Elternelement sagen muss, welches seiner Kinderelemente gelöscht werden sollen. Das ist analog zur Erstellung eines Elements, bei der auch dem Elternelement gesagt wird, dass ihm jetzt ein neues Kinderelement angehängt wird.
## Formulardaten
Ähnlich wie das Lesen von Attributen können auch Formulardaten gelesen werden. Dazu muss zuerst das Eingabefeld mit `querySelector` ausgewählt werden, und dann der Wert mit `.value` gelesen werden:
```js
var e = document.querySelector('#nameInput');
var wert = e.value;
```
Genau gleich kann auch ein neuer Wert gesetzt werden:
```js
e.value = 'Test';
```
## JQuery
JQuery ist eine Programmbibliothek, die uns viel Arbeit abnimmt. Sie vereinfacht die Interaktion mit HTML-Elementen und verkürzt den zu schreibenden Code stark. JQuery kann direkt über ein `<script>`-Tag in die Seite eingebunden werden:
```html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
```
Alle Befehle sind bei JQuery ähnlich aufgebaut; es wird jeweils mit einem (CSS-) Selektor ein oder mehrere Elemente ausgewählt, und dann auf diese Elemente eine Aktion ausgeführt:
`$(selektor).aktion();`
Aktionen können verschiedene Änderungen am Element selber sein, wie ein Wechsel der Schriftfarbe oder der Position.
Um beispielsweise alle Textabschnitte (`<p>`) einer Website auszuwählen und ihre Schriftfarbe auf blau zu setzen, kann man mit JQuery den folgenden Code schreiben:
Alle Textabschnitte auswählen und ausblenden:
```js
$("p").css({'color': 'blue'});
```
Zum Vergleich der "normale" JavaScript-Code:
```js
var paragraphs = document.querySelectorAll('p');
for(var i = 0; i < paragraphs.length; i = i + 1) {
paragraphs[i].style.color = 'blue';
}
```
Wichtig: JQuery wählt immer alle Elemente aus, die auf den Selektor passen!
Ähnlich dazu können auch alle Bilder einer Website ausgeblendet werden:
```js
$("img").hide();
```
Wenn nur ein Teil aller gleichen Elemente verändert werden sollen, muss man diesen im HTML eine Klasse geben und dann in JQuery nur die Elemente mit der entsprechenden Klasse auswählen (gleich wie in CSS!):
```js
$('img.large').css({position: 'fixed'});
```
## Event-Handler
Auch die Event-Listener können mit JQuery sehr viel kürzer als im normalen JavaScript geschrieben werden. Der folgende Code wählt den Button mit der ID `test` aus und sagt dem PC, dass er den Website-Hintergrund rot färben soll, sobald ein Benutzer auf den gewählten Button klickt:
```js
$("button#test").click(function(){
$("body").css({'background-color': 'red'});
});
```
Weitere Events (neben dem `click` wie im Beispiel stehen in der [JQuery-Dokumentation](https://api.jquery.com/category/events/).
# Javascript-Games
## Game-Loop
Bisherige Programme haben jeweils auf eine Benutzereingabe reagiert, ihren Code ausgeführt, und beendeten dann. Spiele müssen im Gegensatz dazu auch ohne Benutzereingabe weiterlaufen können. Dazu gibt es den sogenannten **Game-Loop**. Der Game-Loop ist eine spezielle Schleife (wie eine `for`-Schleife), die unendlich lange ausgeführt wird. Der Loop wird etwa 60 Mal pro Sekunde ausgeführt, und bei jedem Durchlauf werden Positionen von Spielern, Benutzereingaben und weitere Berechnungen neu gemacht. Wenn sich ein Objekt im Spiel bewegt, heisst das, dass es in Wirklichkeit nur 60 Mal pro Sekunde einen kleinen Sprung macht. Weil das Auge aber nicht so schnell ist, sieht es aus, als ob die Bewegung flüssig sei.
Der Game-Loop wird wie folgt programmiert:
```js
function repeat() {
// rechnen
requestAnimationFrame(repeat);
}
requestAnimationFrame(repeat);
```
Damit kontrolliert der PC selbständig, dass der Loop etwa 60 Mal pro Sekunde ausgeführt wird. Der gesamte Code, der zwischen den geschweiften Klammern von `repeat` steht, wird bei jedem Berechnungsschritt des Spiels wiederholt.
## Einrichtung
Das Spiel benötigt 2 JavaScript-Dateien, die mit einem Skript-Tag eingebunden werden müssen:
* `http://lukasdiener.ch/bbz/game.js`
* `http://lukasdiener.ch/bbz/jquery.js`
Ausserdem muss im HTML-Code ein Element definiert sein, das das Spielfeld darstellt:
```html
<body>
<div id="game"></div>
</body>
```
Danach kann mit dem folgenden Code ein kleines Spiel erzeugt werden:
```js
var game = createGame($('#game'));
var player = createEntity($('<div class="player"></div>'));
game.add(player);
player.geschwindigkeit = 2;
player.richtung = 0;
function repeat() {
player.move();
if(player.positionX() > 300) {
player.richtung = 180;
}
requestAnimationFrame(repeat);
}
requestAnimationFrame(repeat);
```
Die Zeilen `createGame` und `createEntity` generieren hier das Spielfeld beziehungsweise das Spielobjekt. Jedes Spielobjekt kann nun auf verschiedene Arten verändert werden. Die einzelnen Eigenschaften und Funktionen sind [auf den Folien](http://lukasdiener.ch/bbz/index11.html#/2/3) erklärt.
Wichtig ist hier die Unterscheidung zwischen dem Code, der zur Vorbereitung des Spiels dient, und dem Code, der während dem Spiel den Verlauf bestimmt.
Zum **Vorbereitungscode** gehören Abläufe, die nur einmal ausgeführt werden müssen, wie die Erstellung des Spielfelds und der Objekte im Spiel, sowie das Setzen der anfänglichen Geschwindigkeit und Bewegungsrichtung. Dieser Code steht **vor** dem Game-Loop.
Zum **Spielcode** gehören alle Abläufe, die während jedem kleinen Schritt des Spiels ausgeführt werden müssen, wie die Überprüfung, ob ein Spieler ausserhalb des Spielfelds ist. Dieser Code steht **im** Game-Loop.
## Kollisionen
Mit wenig Code kann auch getestet werden, ob zwei Elemente kollidieren, und passend drauf reagiert werden.
```js
if(player1.collision(player2)) {
player1.richtung = 180;
}
```
Sobald die beiden Objekte `player1` und `player2` sich berühren, ist der Aufruf `collision()` wahr und der Code der Bedingung wird ausgeführt (`player1` wechselt die Richtung).
##### Dieses Skript darf nur mit Genehmigung des <a href="mailto:lukas@zeilenwerk.ch">Autors</a> weiterverbreitet werden.
]]>