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.
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 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.
Container-Element
Ein Container-Element einer HTML-Webseite kann andere Elemente enthalten. Beispiele: <body>, <title>, <div>. Wenn ein Container-Element andere Elemente enthält, nennt man diese auch die „Kinder“ des Container-Elementes.
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;">
Mönchsdiamant gefunden!
</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 „Mönchsdiamant gefunden!“ 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("passwortFeld");
DOM-Baum
Eine HTML-Webseite kann man auch als DOM-Baum darstellen. Er besteht aus HTML-Elementen, die durch Linien verbunden sind. Wenn ein HTML-Element andere HTML-Elemente enthält (Container), nennt man es Eltern-Element. Die im Container enthaltenen HTML-Elemente nennt man Kinder. Sie werden im DOM-Baum unter das Eltern-Element geschrieben und mit ihm durch Linien verbunden.
End-Tag
Siehe Start-Tag.
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 sayPassword() {
alert("Passwort:");
}
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>Der Mönchsdiamant</h1> eine große Überschrift.
id- Attribut
Mit dem Attribut id kannst du einem HTML-Element einen eindeutigen Namen geben. Beispiel:
<div id="Liste"> … <div>.
Hier bekommt das <div>-Element den ID-Namen "Liste". 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:
<div id="Liste">Aufgaben</div>
In einem JavaScript-Block stehen folgende Anweisungen:
var zeigeListe = document.getElementById("Liste");
alert(zeigeListe.innerHTML);
Hier enthält zeigeListe.innerHTML den Text, der in dem <div> mit dem ID-Namen Liste steht, also der 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>
Liste
Eine Liste ist eine Folge von Elementen. Jedes Element einer Liste hat eine Nummer, die man Index nennt. Das erste Element hat den Index 0, das zweite den Index 1 usw. Über den Index kann man auf jedes Element der Liste zugreifen. Beispiel:
var spielFeld = document.getElementById("spielFeld");
spielFeld.children[0].innerHTML = "Gast";
Hier ist spielFeld.children eine Liste mit den Elementen, die in dem <div> mit dem ID-Namen spielFeld enthalten sind (die Kinder dieses <div>-Elementes.)
Hier wird dem ersten Element dieser Liste der Text "Gast" zugewiesen.
Lokaler Speicher
Wenn du im Internet surfst, verwendest du meistens Daten, die auf entfernten Rechnern gespeichert sind. Manche Daten, sind aber auch auf deinem Computer gespeichert. Auf diese Daten kannst du auch dann zugreifen, wenn dein Computer gar nicht mit dem Internet verbunden ist. Man sagt dann: Die Daten sind im lokalen Speicher.
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.
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.
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 /.
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.
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
Copyright © 2008 Walker Books Ltd
Illustrations © Duncan Beedie
All rights reserved.