Begriffslexikon Band 2

addEventListener 
siehe. EventListener

Alert-Box
Eine Alert-Box (oder kurz: ein Alert) ist ein kleines Fenster, das auf dem Bildschirm erscheint. Sie enthält eine Meldung und einen OK-Button. Wenn man auf den OK-Button klickt, bestätigt man damit, dass man die Meldung gelesen hat und die Alert-Box verschwindet wieder.

Argument
Wenn man eine Funktion aufruft, kann man ihr Daten übergeben, die sie verarbeitet. Diese Daten nennt man Argumente oder auch Parameter. Bei einem Funktionsaufruf schreibt man das Argument in runden Klammern hinter den Namen der Funktion, z.B.
alert(„Berechnung ist beendet“). Hier ist alert der Name der Funktion und „Berechnung ist beendet“ das Argument. Es gibt auch Funktionen ohne Argumente und Funktionen mit mehreren Argumenten.

Array
Ein Array ist eine Folge von Daten, die man in eckige Klammern schreibt. Die Daten in einem Array nennt man Elemente des Arrays. Die Elemente können z.B. Zahlen oder Strings sein. Hier ist ein Array mit vier Strings:
var luckyCatClub = [„Ruby“, „Markus“, „Grace“, „Rusty“];
Die Elemente eines Arrays haben Nummern, die man Indizes nennt. Das erste Element hat den Index 0, das zweite hat den Index 1, usw. Über den Index kann man auf ein einzelnes Element eines Arrays zugreifen. Beispiel: luckyCatClub[0] ist der String „Ruby“.

Attribut
HTML-Elemente besitzen Attribute, die ihre Eigenschaften beschreiben, z.B. Farbe oder Schriftgröße. Die Attribute haben voreingestellte Attributwerte. Wenn man ein Attribut ändern möchte, gibt man in den Start-Tag des HTML-Elements einen Ausdruck der Form Name=Wert ein.
Vor dem Gleichheitszeichen steht der Name eines Attributs. Und hinter dem Gleichheitszeichen ist der Wert. Beispiel:
<img src=“bild.jpg“/>
Hier ist src der Name des Attributs und „bild.jpg“ der Wert.

Ausdruck
Ein Ausdruck wird aus Zahlen, Variablennamen und Operatorsymbolen (z.B. +, -, *) gebildet. Oft ist es ein Rechenausdruck, in dem aus Zahlen eine neue Zahl berechnet wird. In der folgenden Anweisung steht rechts neben dem Zuweisungsoperator = der Ausdruck y *2
x = y * 2
Wenn der Computer das Programm ausführt, multipliziert er den Wert der Variablen x mit 2 und weist das Ergebnis der Variablen x zu.

Bedingung
Eine Bedingung ist eine Aussage, die wahr oder falsch sein kann. Beispiel: „Die Sonne scheint“. Wenn tatsächlich gerade die Sonne scheint, ist die Bedingung wahr. Man sagt dann auch: Die Bedingung ist erfüllt. Wenn es gerade regnet, ist die Bedingung „Die Sonne scheint“ falsch. 
Du verwendest Bedingungen z.B., um if-Anweisungen aufzuschreiben. Die Anweisung
if (zahl < 10) {
alert(„Kleiner als 10“);
}
bewirkt Folgendes: Wenn der Wert der Variablen zahl kleiner als 10 ist, erscheint ein Alert mit der Meldung Kleiner als 10 auf dem Bildschirm. Hier ist die Bedingung zahl < 10.

CSS
CSS ist eine Sprache, mit der man das Aussehen einer Webseite festlegen kann.

CSS-Eigenschaft
Das Aussehen eines HTML-Elementes kann durch sogenannte CSS-Eigenschaften festgelegt werden. Die Definition einer CSS-Eigenschaft (man spricht auch von Stilregel) ist so aufgebaut: Zuerst kommt der Name der Eigenschaft, dann ein Doppelpunkt, dann ein Wert und schließlich ein Semikolon. Beispiel:
<div style=“text-align: center;“>
Gewonnen!
</div>
Hier ist text-align: center; die CSS-Eigenschaft. Dabei ist text-align (auf Deutsch: Textausrichtung) der Name der CSS-Eigenschaft und center der Wert, der hier dieser CSS-Eigenschaft zugeordnet wird.
In diesem Beispiel wird der Text „Gewonnen!“ in der Mitte des Bildschirms (zentriert) angezeigt.

CSS-Klasse
Mit einer CSS-Klasse kannst du ein Bündel von Eigenschaften festlegen und damit das Aussehen von bestimmten HTML-Elementen gestalten.  Du definierst eine neue CSS-Klasse in einem <style>-Block. Die Definition der Klasse beginnt mit einem Punkt. Dahinter steht der Name der Klasse, den du frei wählen kannst.
Beispiel:
.text {
text-align: center;
font-size:18pt;
}
Hier wird eine CSS-Klasse mit dem Namen text definiert. Diese CSS-Klasse legt ein bestimmtes Aussehen fest: Der Text soll zentriert (in der Mitte) angezeigt werden und die Schriftgröße soll 18 Punkt betragen.
Wenn nun ein HTML-Element genau dieses Aussehen haben soll, muss im Start-Tag das Attribut class mit dem Namen der Klasse belegt werden. Beispiel:
<div class=“text“> … </div>

DOM-API
Eine API (Application Interface) ist eine Sammlung von Methoden. Eine Methode ist eine Funktion, die zu einem Objekt gehört. Mit der DOM-API kannst du eine Webseite dynamisch machen. Das heißt, du kannst den Inhalt von HTML-Elementen ändern, wenn die Webseite schon auf dem Bildschirm dargestellt wird.
Bei der DOM-API fängt jeder Methodenaufruf mit document. an. Beispiel:
document.getElementById(„spielfeld“);

End-Tag
Siehe Start-Tag.

EventListener
Ein eventListener (engl. für „Ereignishorcher“) ist ein Objekt, das auf ein Ereignis (engl.: event) wartet und eine Funktion aufruft, sobald das Ereignis (z.B. ein Tastendruck) eintritt. Mit der Funktion addEventListener erzeugst du ein neues eventListener-Objekt. Ereignisse haben vorgegebene Namen. Zum Beispiel ist keypress der Name des Ereignisses „Taste gedrückt“. Im folgenden Skript definieren wir zunächst eine Funktion und erzeugen dann ein eventListener-Objekt, das dafür sorgt, dass die Funktion aufgerufen wird, sobald eine Taste gedrückt worden ist.
function wennTasteGedrückt(keyPressed) {
   alert(keyPressed.key);
}
window.addEventListener(„keypress“, wennTasteGedrückt, false);

for-Schleife
In einer for-Schleife wird ein Block von Anweisungen wiederholt ausgeführt. Die Anweisungen dieses Blocks stehen in geschweiften Klammern { …}. Beispiel:
for(var index = 0; index < 6; index ++) {
   alert(index);
}
Hier wird sechs Mal ein Alert ausgelöst. Der Klammerausdruck hinter dem Schlüsselwort for sorgt dafür, dass die Variable index nacheinander die Zahlen 0, 1, 2, 3, 4, 5 enthält. Bei jedem Schleifendurchlauf wird der Wert von index um 1 erhöht. In der Alert-Box, die auf dem Bildschirm erscheint, wird der aktuelle Wert von index ausgegeben.

Funktion
Mit JavaScript kannst du Funktionen definieren und später aufrufen. Du definierst eine Funktion in einem <style>-Block. Die Definition beginnt mit dem Schlüsselwort function. Dahinter kommt der Name der Funktion, den du selbst wählen kannst. Dahinter kommt in geschweiften Klammern ein Anweisungsblock. Diese Anweisungen werden ausgeführt, wenn die Funktion aufgerufen wird. Beispiel:
function sagePassword() {
 alert(„Passwort:“);
 }
Mit einer return-Anweisung kann eine Funktion einen Wert zurückgeben.

getContext
Mit der <canvas>-Methode getContext erzeugst du ein Kontext-Objekt, das dir die Methoden und Eigenschaften zum Zeich‍nen auf ein Canvas bereitstellt. Beispiel:
var ctx = canvas.getContext(„2d“);
Hier wird ein Kontext-Objekt für das zweidimensionale Zeich‍nen (2D) erzeugt.

getElementById
Die DOM-Methode getElementById findet ein HTML-Element mit Hilfe des id-Attributs. Beispiel: Der Aufruf
document.getElementById(„antwort“)
liefert das HTML-Element mit dem id-Attributwert „antwort“.

HTML
HTML (Hypertext Markup Language) ist die Sprache, in der der Quellcode von Webseiten geschrieben ist.

HTML-Element
Jede Webseite besteht aus HTML-Elementen. Sie sind die Bausteine, aus denen die Webseite zusammengesetzt ist, z.B. Überschriften, Textabschnitte, Bilder und Schaltflächen.
Im HTML-Quelltext wird jedes HTML-Element durch Tags gekennzeichnet, z.B. ist das HTML-Element <h1>Snake</h1> eine große Überschrift.

id-Attribut
Mit dem Attribut id kannst du einem HTML-Element einen eindeutigen Namen geben. Beispiel: 
<p id=“antwort“> … <p>. 
Hier bekommt das <p>-Element den ID-Namen „antwort“. Weil der ID-Name (also der Wert des id-Attributs) eindeutig ist, kann er ein HTML-Element identifizieren. 
Mit der DOM-Methode getElementById kannst du ein HTML-Element über den ID-Namen finden.

id-Selektor
Mit einem id-Selektor kannst du einem HTML-Element mit einem bestimmten ID-Namen ein bestimmtes Aussehen verleihen. Die Definition eines id-Selektors beginnt mit einem Hash # gefolgt von einem ID-Namen. Dahinter kommen in geschweiften Klammern Stilregeln, die das Aussehen bestimmen. Beispiel:
<style>
   #spielFeld {
   border: 1px solid black;
}
</style>
Hier erhält das HTML-Element mit dem ID-Namen spielFeld (Wert des id-Attributs) einen Rahmen aus einer schwarzen Linie.

innerHTML
Wenn ein  HTML-Element einen Text enthält (z.B. Überschriften oder <div>), kann man auf diesen Text über die DOM-Eigenschaft innerHTML zugreifen. 
Beispiel: Nehmen wir an, das HTML-Dokument enthält dieses <div>-Element:
<p id=“antwort“>Probiere es aus!</p>
In einem JavaScript-Block stehen folgende Anweisungen:
var zeigeAntwort = document.getElementById(„antwort“);
alert(zeigeAntwort.innerHTML);
Hier enthält zeigeAntwort.innerHTML den Text, der in dem <p>-Element mit dem ID-Namen antwort steht, also den Text „Aufgaben“.

JavaScript
JavaScript ist eine Programmiersprache für Webseiten. Du kannst ein JavaScript-Programm in den Quelltext einer Webseite schreiben. Das JavaScript Programm steht in einem <script>-Block:
<script> … </script>

Konstruktorfunktion
Eine Konstruktorfunktion definiert ein Muster für Objekte. Ihr Name beginnt üblicherweise mit einem Großbuchstaben. Beispiel:
function Schläger (x, y, breite, höhe) {
 this.x = x;
 this.y = y;
 this.breite = breite;
 this.höhe = height;
}
Wenn man die Konstruktorfunktion mit dem Schlüsselwort new aufruft, erzeugt man ein Objekt, das nach dem Muster aufgebaut ist. Beispiel:
meinSchläger = new Schläger(610, 200, 25, 100);

Methode
Eine Methode ist eine Funktion, die zu einem Objekt gehört. Wenn du die Methode aufrufst, schreibst du zuerst den Namen des Objekts auf, dann folgt ein Punkt und dann der Name der Methode. Dahinter stehen in runden Klammern die Argumente. Beispiel:/span>
ctx.fillRect(0, 0, 30, 30);
Hier ist ctx der Name eines Zeichenkontext-Objekts. Der Name der Methode ist fillRect, und die Argumente sind die vier Zahlen 0, 0, 30 und 30. Der Aufruf bewirkt, dass auf dem zugehörigen Canvas ein Rechteck gezeichnet wird.

Objekt
Für die Elemente eines Spiels, z.B. eine Spielfigur, einen fliegenden Ball oder das Spielfeld kannst du Objekte definieren. Durch Objekte wird der Programmcode übersichtlicher und besser lesbar. Ein Objekt hat Methoden und Eigenschaften. Eine Methode ist eine Funktion, die zum Objekt gehört. Die Methode kann aufgerufen werden und bewirkt dann etwas, das mit dem Objekt zu tun hat. Objekte können durch Objektliterale und Konstruktorfunktionen erzeugt werden. Jedes Objekt ist von einem bestimmten Typ. Es gibt Objekttypen, die schon vorgegeben sind, z.B. der Typ Canvas für Objekte, die Zeichenflächen darstellen.

Objektliteral
Mit einem Objektliteral kannst du ein einzelnes Objekt mit Methoden und Eigenschaften definieren. Die ganze Definition steht in geschweiften Klammern. In der folgenden Anweisung wird ein Objekt mit dem Namen person definiert.
var person = {
 vorname: „Russel“,
 nachname: „Eich“,
 spitzname: „Rusty“,
 sageHallo: function(){
 alert(person.spitzname + “ “ + person.nachname);
}
}
Das Objekt person hat die drei Eigenschaften vorname, nachname und spitzname sowie eine Methode namens sageHallo. Hinter dem Namen einer Eigenschaft (z.B. vorname) kommt ein Doppelpunkt (:) und dahinter ein Wert, der der Eigenschaft zugeordnet wird (z.B. der String „Russel“).
Eine Methode ist eine Funktion, die zu einem Objekt gehört. Sie wird etwas anders als eine normale Funktion definiert: Zuerst kommt der Name der Methode (z.B. sageHallo ). Dann folgt ein Doppelpunkt (:) und das Schlüsselwort function. Dahinter kommen die Argumente in runden Klammern. In dem Beispiel gibt es keine Argumente. Deshalb steht da nur ein leeres Klammerpaar (). Dahinter folgen in geschweiften Klammern die Anweisungen des Funktionskörpers. Sie werden ausgeführt, wenn die Methode aufgerufen wird.
Die Definitionen von Eigenschaften und Methoden in einem Objektliteral werden durch Kommas getrennt.
Die Methode des Objekts person wird so aufgerufen:
person.sageHallo();
Der Aufruf bewirkt, dass ein Alert-Fenster mit Spitzname und Nachname der Person erscheint.

Quellcode
Zu jeder Webseite gibt es einen Quellcode, der Inhalt und Aussehen der Seite festlegt. Das ist ein einfacher Text, der durch Tags die Elemente der Webseite beschreibt.

Schleife
In einer Schleife werden Anweisungen wiederholt ausgeführt. Es gibt z.B. for-Schleifen und while-Schleifen.

Schlüsselwort
Wie jede Programmiersprache enthält JavaScript Wörter, die eine bestimmte Bedeutung haben und die zum Aufbau von Anweisungen verwendet werden. Diese Wörter nennt man Schlüsselwörter. Man kann sie nicht als Namen für Variablen oder Funktionen verwenden. Beispiele: var, for, if, else. 

<script>-Block
In einem HTML-Dokument steht der JavaScript-Programmtext in einem <script>-Block.
Der <script>-Block enthält JavaScript-Anweisungen und wird durch die Tags <script> … </script> engerahmt

Selbstschließendes Tag
Manche HTML-Elemente werden nicht durch Paare von Tags, sondern durch selbstschließende Tags dargestellt. Dabei sind Start- und End-Tag zu einem Ausdruck der Form < … /> zusammengefasst. Beispiel: <br/>

Start-Tag
Die Elemente einer Webseite (Überschriften, Textabschnitte, Bilder) werden durch Tags beschrieben (sprich: Tägs). Meistens verwendet man ein Start-Tag und ein End-Tag. Sie erkennt man an den spitzen Klammern < …>.  Beispiel:
<h1> Der Mönchsdiamant </h1>
Dies ist eine große Überschrift. Das Start-Tag ist <h1> und das End-Tag ist </h1>. Der Text dazwischen wird als Überschrift dargestellt und ist der Inhalt dieses Elementes. Das End-Tag enthält immer einen Schrägstrich /. 

String
Ein String ist eine Folge von Zeichen, die in Anführungszechen gesetzt werden, z.B.
„Gewonnen!“

style-Attribut
Einem HTML-Element kann man ein Attribut mit dem Namen style zuordnen. Als Wert bekommt das style-Attribut einen String mit einer oder mehreren CSS-Eigenschaften. Sie bestimmten das Aussehen dieses HTML-Elementes. Beispiel:
<div style=“background-color: lightblue;“> … </div>
Hier bekommt das <div>-Element einen hellblauen Hintergrund.

<style>-Block
Mit einem <style>-Block kannst du das Aussehen von HTML-Elementen gestalten. Der <style>-Block wird durch die Tags <style> … </style> eingerahmt. Im <style>-Block stehen die Definitionen von CSS-Klassen oder id-Selektoren.

Ternärer Ausdruck
Ein ternärer Ausdruck ersetzt eine if-else-Anweisung und ist so aufgebaut:
Bedingung ? erster Ausdruck: zweiter Ausdruck
Er besteht aus drei Teilen:

• Der erste Teil ist Bedingung, die wahr oder falsch sein kann, gefolgt von einem Fragezeichen (?).
• Der zweite Teil ist ein Ausdruck, der genommen wird, wenn die Bedingung wahr ist, gefolgt von einem Doppelpunkt (:).
• Der dritte Teil ist ein Ausdruck, der genommen wird, wenn die Bedingung falsch ist.

Die folgende Anweisung verwendet einen ternären Ausdruck:
höhe = höhe < 10 ? höhe + 1 : höhe;
Sie funktioniert so: Wenn der Wert von höhe kleiner als 10 ist (Bedingung), erhält die Variable höhe den Wert höhe + 1 (erster Ausdruck vor dem Doppelpunkt), d.h. der Wert von höhe wird um 1 erhöht. Ansonsten behält die Variable ihren alten Wert höhe (zweiter Ausdruck nach dem Doppelpunkt).

setTimeout
Mit setTimeout kannst du dafür sorgen, dass eine Funktion nach einem bestimmten Zeitintervall aufgerufen wird. Das ist das Format eines Aufrufs der Funktion:
setTimeout(funktion, zeitintervall)
Das erste Argument ist ein String mit einem Funktionsaufruf. Das zweite Argument ist die Zeitverzögerung in Millisekunden. 1000 Millisekunden sind eine Sekunde.
Mit setTimeout kannst du eine Endloswiederholung erzeugen. Du definierst eine Funktion, die sich mit Zeitverzögerung wieder selbst aufruft. Im folgenden Beispiel erzeugt die Funktion tick zunächst ein Alert-Fenster. Nach einem Zeitintervall von 5000 Millisekunden (also 5 Sekunden) wird wieder tick aufgerufen.
function tick(){
 alert(„Lucky Cat Club“);
 setTimeout(„tick()“, 5000);
}
tick();

URL
Eine URL (Uniform Resource Locator)  ist die Adresse eines digitalen Dokumentes (z.B. Webseite, Bild, Video), das auf einem Computer gespeichert ist. Beispiel:
https://www.google.de/index.html

Wahrheitswert
Wahrheitswert sind true (wahr) und false (falsch). Bedingungen in if-Anweisungen oder while-Schleifen haben immer einen Wahrheitswert.

while-Schleife
In einer while-Schleife wird ein Anweisungsblock, der in geschweiften Klammern steht, solange wiederholt, wie die Schleifenbedingung erfüllt ist. Format:
while Bedingung {
 Anweisung;
 …
}

Copyright © 2008 Walker Books Ltd
Illustrations © Duncan Beedie
All rights reserved.