Theis Einstieg in JavaScript

5. Auflage 2024
ISBN: 978-3-367-10085-9
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Deutsch, 504 Seiten

Reihe: Rheinwerk Computing

Lernen Sie Schritt für Schritt die Grundlagen der modernen JavaScript-Programmierung. Das Buch führt Sie in alle relevanten Bereiche ein: HTML und CSS, Objekte, anonyme Funktionen, Ereignisbehandlung, jQuery und Ajax. Zahlreiche anschauliche Beispielanwendungen erleichtern das Verständnis und dienen Ihnen als Vorlage für Ihre eigenen Projekte. Schon bald entwickeln Sie anspruchsvolle interaktive Programme für Ihre Website.

Aus dem Inhalt:

• Für den Einstieg
• Grundlagen der Programmierung
• JavaScript-Basics: Objekte, Ereignisbehandlung, DOM
• JavaScript einsetzen
• Formulare erstellen
• Validierung von Formularen
• Schneller Datenaustausch (Ajax)
• CSS-Eigenschaften ändern
• Animationen erstellen
• Browserunabhängige Methoden verwenden (jQuery)
• HTML-Eigenschaften nutzen
• JavaScript mobil
• Methoden von Onsen UI
• Waytracking, Lage- und Beschleunigungssensoren

Die Fachpresse zur Vorauflage:
LINUX MAGAZIN: »Eine empfehlenswerte Einführung für angehende Webentwickler ohne Vorkenntnisse.«

Thomas Theis ist Dipl.-Ing. für Technische Informatik und arbeitet als Berater und Trainer. Seit vielen Jahren gibt er als EDV-Dozent Kurse in verschiedenen Programmiersprachen. Er ist Autor vieler erfolgreicher Fachbücher.

Autoren/Hrsg.

Theis, Thomas

Inhaltsverzeichnis

Materialien zum Buch ... 15  1.  Einführung ... 17  1.1 ... Was mache ich mit JavaScript? ... 17  1.2 ... Was kann JavaScript nicht? ... 18  1.3 ... Browser und mobile Browser ... 19  1.4 ... ECMAScript ... 19  1.5 ... Aufbau des Buchs ... 20  1.6 ... Erstes Beispiel mit HTML und CSS ... 21  1.7 ... Einige Sonderzeichen ... 28  1.8 ... JavaScript im Dokument ... 29  1.9 ... JavaScript aus externer Datei ... 31  1.10 ... Kommentare ... 32  1.11 ... Kein JavaScript möglich ... 33  2.  Grundlagen der Programmierung ... 37  2.1 ... Speicherung von Werten ... 37  2.2 ... Berechnungen durchführen ... 46  2.3 ... Verschiedene Zweige eines Programms ... 53  2.4 ... Programmteile wiederholen ... 67  2.5 ... Fehler finden, Fehler vermeiden ... 80  2.6 ... Eigene Funktionen ... 89  3.  Eigene Objekte ... 113  3.1 ... Objekte und Eigenschaften ... 113  3.2 ... Methoden ... 116  3.3 ... Private Member ... 118  3.4 ... Setter und Getter ... 120  3.5 ... Statische Member ... 122  3.6 ... Statische Blöcke ... 124  3.7 ... Verweis auf Nichts ... 125  3.8 ... Objekt in Objekt ... 127  3.9 ... Vererbung ... 129  3.10 ... Operationen mit Objekten ... 131  3.11 ... Objekte kopieren ... 137  4.  Formulare und Ereignisse ... 141  4.1 ... Erstes Formular und erstes Ereignis ... 141  4.2 ... Senden und Zurücksetzen ... 144  4.3 ... Pflichtfelder und Kontrolle ... 149  4.4 ... Radiobuttons und Checkboxen ... 153  4.5 ... Auswahlmenüs ... 155  4.6 ... Weitere Formular-Ereignisse ... 158  4.7 ... Maus-Ereignisse ... 161  4.8 ... Wechsel des Dokuments ... 164  4.9 ... Weitere Typen und Eigenschaften ... 166  4.10 ... Dynamisch erstelltes Formular ... 183  5.  Das Document Object Model (DOM) ... 187  5.1 ... Baum und Knoten ... 187  5.2 ... Knoten abrufen ... 189  5.3 ... Kindknoten ... 191  5.4 ... Knoten hinzufügen ... 193  5.5 ... Knoten ändern ... 196  5.6 ... Knoten löschen ... 200  5.7 ... Eine Tabelle erzeugen ... 201  6.  Standardobjekte nutzen ... 205  6.1 ... Felder für große Datenmengen ... 205  6.2 ... Zeichenketten verarbeiten ... 234  6.3 ... Zahlen und Mathematik ... 246  6.4 ... Arbeiten mit Zeitangaben ... 257  6.5 ... Zeitliche Abläufe ... 268  6.6 ... Weitere Datenstrukturen ... 277  6.7 ... JSON ... 282  7.  Änderungen mit Ajax ... 291  7.1 ... Hallo Ajax ... 291  7.2 ... Parameter senden ... 295  7.3 ... XML-Datei lesen ... 298  7.4 ... JSON-Datei lesen ... 308  8.  Gestaltung mit Cascading Style Sheets (CSS) ... 313  8.1 ... Aufbau und Regeln ... 314  8.2 ... Ändern von Eigenschaften ... 321  8.3 ... Weitere Möglichkeiten ... 336  9.  Zweidimensionale Grafiken und Animationen mit SVG ... 343  9.1 ... Eine SVG-Datei erstellen ... 343  9.2 ... Grundformen ... 346  9.3 ... Pfade ... 349  9.4 ... Animationen ... 354  9.5 ... Rotationen ... 358  9.6 ... SVG und JavaScript ... 360  9.7 ... Dynamische SVG-Elemente ... 361

10.  Dreidimensionale Grafiken und Animationen mit Three.js ... 367  10.1 ... Eine erste 3D-Grafik ... 368  10.2 ... Verschieben der Kamera ... 373  10.3 ... Animation ... 375  10.4 ... Verschiedene Formen ... 376

11.  jQuery ... 377  11.1 ... Aufbau ... 377  11.2 ... Selektoren und Methoden ... 380  11.3 ... Ereignisse ... 383  11.4 ... Animationen ... 386  11.5 ... Beispiel: sinusförmige Bewegung ... 390  11.6 ... jQuery und Ajax ... 392

12.  Mobile Apps mit Onsen UI ... 397  12.1 ... Aufbau einer Seite ... 397  12.2 ... Elemente innerhalb einer Seite ... 404

13.  Mathematische Ausdrücke mit MathML und MathJax ... 425  13.1 ... Grundelemente ... 425  13.2 ... Klammern und Tabellen ... 428  13.3 ... Zusammenfassende Ausdrücke ... 430  13.4 ... Brüche ... 432  13.5 ... Mathematische Zeichen ... 434  13.6 ... Dynamisch erzeugte Ausdrücke ... 436

14.  Beispielprojekte ... 441  14.1 ... Geldanlage ... 441  14.2 ... Fitnesswerte ... 442  14.3 ... Volkslauf ... 443  14.4 ... Kreditkarte prüfen ... 445  14.5 ... Patience ... 445  14.6 ... Memory ... 446  14.7 ... Snake ... 447

15.  Medien, Zeichnungen und Sensoren ... 449  15.1 ... Mediendateien abspielen ... 449  15.2 ... Canvas ... 455  15.3 ... Sensoren ... 464  Anhang ... 481  A ... Installation und Schlüsselwörter ... 481  Index ... 487

Leseproben

1.6    Erstes Beispiel mit HTML und CSS

Zum Verständnis der Beispiele dieses Buchs werden nur wenige Kenntnisse in HTML und CSS vorausgesetzt. Die wichtigsten Elemente werden anhand eines ersten Beispielprogramms erläutert.

1.6.1    Ausgabe des Programms

In Abbildung 1.1 und Abbildung 1.2 sehen Sie das Ergebnis des Programms im Browser.

Abbildung 1.1     Erstes HTML-Dokument im Browser, oberer Teil

Abbildung 1.2     Erstes HTML-Dokument im Browser, unterer Teil

1.6.2    HTML-Datei

Das Beispielprogramm enthält einige Grundelemente eines HTML-Dokuments. Es folgt der HTML-Code:

lang="de">

charset="utf-8">

rel="stylesheet" href="js5.css">



Ein Absatz mit Zeilenumbrüchen
Zweite ZeileDritte Zeile


Ein Bereich mit Umbruch

Ein Bereich ohne Umbruch

Ein href="einbetten.htm">Hyperlink
Ein Bild: src="im_paradies.jpg" alt="Paradies">

Eine Liste:

Erster Eintrag
Zweiter Eintrag


Eine Tabelle:


Zelle A
Zelle B


Zelle C
Zelle D

Listing 1.1     Datei »erste.htm«

Mithilfe von wird festgelegt, dass es sich um ein HTML-Dokument handelt. Je mehr Sie sich an die einheitlichen Definitionen für HTML-Dokumente halten, desto höher ist die Wahrscheinlichkeit, dass die Seite in allen Browsern fehlerfrei dargestellt wird.

Ein HTML-Dokument besteht aus Markierungen (auch Tags genannt) und Text. Die meisten Markierungen bilden einen Container (= Behälter), der eine Start-Markierung und eine End-Markierung besitzt. Start-Markierungen können Attribute mit Werten haben. Letztgenannte stehen dabei standardmäßig in doppelten Hochkommata.

Das gesamte Dokument steht im html-Container, von der Start-Markierung . Die Start-Markierung html besitzt das Attribut lang mit dem Wert de. Damit geben Sie an, dass der Text des Dokuments in deutscher Sprache verfasst ist. Im html-Container liegen nacheinander ein head-Container mit Informationen über das Dokument und ein body-Container mit dem eigentlichen Dokumentinhalt.

Im head-Container finden Sie zunächst einen title-Container, der den Inhalt für die Titelleiste des Browsers bereitstellt. Außerdem stehen hier Metadaten über das Dokument. Im vorliegenden Beispiel sehen Sie, dass es sich um ein HTML-Dokument handelt, das den weitverbreiteten Zeichensatz UTF-8 nutzt, siehe Abschnitt 1.6.3, »Codierung UTF-8«. Er enthält viele Sonderzeichen, z. B. auch die deutschen Umlaute.

Mithilfe der Markierung link und den Attributen rel und href können Sie eine externe CSS-Datei zur Formatierung des Dokuments einbinden. Im vorliegenden Beispiel handelt es sich um die Datei js5.css, die in demselben Verzeichnis wie die Datei erste.htm liegt. Sie wird in Abschnitt 1.6.4, »Responsives Webdesign«, erläutert.

Absätze stehen in p-Containern. Ein einzelner Zeilenumbruch innerhalb eines Absatzes wird mithilfe der Markierung
gebildet. Bestimmte Bereiche, die eine andere Formatierung erhalten sollen, können Sie sowohl in einen div-Container als auch in einen span-Container setzen. Vor und nach einem div-Container wird zudem ein Umbruch erzeugt.

Ein anklickbarer Hyperlink zu einem anderen Dokument steht in einem a-Container mit dem Attribut href. Ein Bild kann mithilfe der img-Markierung und des Attributs src eingebunden werden. Das Attribut alt ist für die Validierung erforderlich. Es enthält einen erläuternden Text für den Fall, dass die Bilddatei nicht geladen werden kann.

Eine nicht nummerierte Liste steht in einem ul-Container, die einzelnen Listeneinträge stehen in li-Containern.

Eine Tabelle wird mithilfe eines table-Containers erstellt. Innerhalb der Tabelle gibt es einzelne Zeilen; diese werden jeweils mithilfe eines tr-Containers erstellt. Innerhalb einer Zeile wiederum gibt es einzelne Zellen, die jeweils durch einen td-Container gebildet werden.

Die Datei erste.htm wird mithilfe des Editors Notepad++ erstellt und (bei mir) im Verzeichnis C:/js gespeichert. Zur Darstellung einer htm-Datei (oder einer html-Datei) in Ihrem Standardbrowser öffnen Sie den Windows-Explorer und führen einen Doppelklick auf die htm-Datei aus.

Werden weitere HTML-Markierungen genutzt, werden sie an der passenden Stelle erläutert.

1.6.3    Codierung UTF-8

In allen HTML-Dokumenten dieses Buchs wird die Codierung UTF-8 verwendet. UTF-8 steht abkürzend für das 8-Bit UCS Transformation Format. UCS steht abkürzend für Universal Character Set. UTF-8 ist diejenige Codierung für Unicode-Zeichen mit der weitesten Verbreitung.

Es ist wichtig, dass die Codierung, die im head-Container angegeben ist, mit der Codierung der Datei übereinstimmt. Sie können, falls noch nicht geschehen, die Codierung einer Datei im Editor Notepad++ wie folgt auf UTF-8 umstellen: Menü Kodierung • Konvertiere zu UTF-8. Anschließend ist in diesem Menü auch die Codierung UTF-8 markiert.

Sie können die Codierung im Editor Notepad++ wie folgt auch automatisch für alle Dateien wählen, die Sie neu erstellen: Menü Einstellungen • Einstellungen • Neues Dokument • Kodierung • UTF-8, Schaltfläche Schließen.

1.6.4    Responsives Webdesign

In diesem ersten Beispiel wird die externe CSS-Datei js5.css zur Formatierung des Dokuments eingebunden. Darin wird mithilfe eines Media Query auf vereinfachte Weise ein responsives Webdesign erzeugt. Es werden folgende Ziele erreicht:

• Die Dokumente sind einheitlich formatiert.

• Bei Bedarf kann die Formatierung für alle Dokumente schnell und einheitlich geändert werden.

• Die Beispiele können nicht nur auf einem PC oder einem Laptop genutzt werden, sondern auch auf einem Mobilgerät.

Es folgt der Code in der CSS-Datei:

body {font-family:Verdana; font-size:11pt; color:#202020;
background-color:#f8f8f8;}
td {font-size:11pt; background-color:#e0e0e0; padding:5px;}

@media only screen and (max-width: 992px)
{
@media only screen and (orientation:landscape)
{
body { font-size:20pt; }
td {...

Über Autor(innen)

Theis, Thomas
Thomas Theis ist Dipl.-Ing. für Technische Informatik und arbeitet als Berater und Trainer. Seit vielen Jahren gibt er als EDV-Dozent Kurse in verschiedenen Programmiersprachen. Er ist Autor vieler erfolgreicher Fachbücher.