Hugendubel.info - Die B2B Online-Buchhandlung 

Merkliste
Die Merkliste ist leer.
Bitte warten - die Druckansicht der Seite wird vorbereitet.
Der Druckdialog öffnet sich, sobald die Seite vollständig geladen wurde.
Sollte die Druckvorschau unvollständig sein, bitte schliessen und "Erneut drucken" wählen.

Einstieg in JavaScript

E-BookEPUB0 - No protectionE-Book
504 Seiten
Deutsch
Rheinwerk Verlag GmbHerschienen am04.07.20245. Auflage
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.mehr
Verfügbare Formate
BuchKartoniert, Paperback
EUR29,90
E-BookEPUB0 - No protectionE-Book
EUR29,90

Produkt

KlappentextLernen 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.
Details
Weitere ISBN/GTIN9783367100859
ProduktartE-Book
EinbandartE-Book
FormatEPUB
Format Hinweis0 - No protection
Erscheinungsjahr2024
Erscheinungsdatum04.07.2024
Auflage5. Auflage
ReiheRheinwerk Computing
Seiten504 Seiten
SpracheDeutsch
Dateigrösse6052 Kbytes
Artikel-Nr.14184589
Rubriken
Genre9200

Inhalt/Kritik

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 ... 487mehr
Leseprobe


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">
Das ist der Titel
rel="stylesheet" href="js5.css">




Ein Absatz mit Zeilenumbrüchen

Zweite Zeile
Dritte 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 bis zur End-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 {...

mehr