Einstieg in JavaScript (eBook)
504 Seiten
Rheinwerk Computing (Verlag)
978-3-367-10085-9 (ISBN)
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.
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:
<head>
<meta charset="utf-8">
<title>Das ist der Titel</title>
<link rel="stylesheet" href="js5.css">
</head>
<body>
<p>
Ein Absatz mit Zeilenumbrüchen<br>
Zweite Zeile<br>Dritte Zeile
</p>
<div>Ein Bereich mit Umbruch</div>
<p>Ein Bereich <span>ohne</span> Umbruch</p>
<p>Ein <a href="einbetten.htm">Hyperlink</a></p>
<p>Ein Bild:<br><img src="im_paradies.jpg" alt="Paradies"></p>
<p>Eine Liste:</p>
<ul>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
</ul>
<p>Eine Tabelle:</p>
<table>
<tr>
<td>Zelle A</td>
<td>Zelle B</td>
</tr>
<tr>
<td>Zelle C</td>
<td>Zelle D</td>
</tr>
</table>
</body>
</html>
Listing 1.1 Datei »erste.htm«
Mithilfe von <!DOCTYPE html> 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 <html> bis zur End-Markierung </html>. 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 <br> 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:
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 {...
| Erscheint lt. Verlag | 4.7.2024 |
|---|---|
| Sprache | deutsch |
| Themenwelt | Mathematik / Informatik ► Informatik ► Programmiersprachen / -werkzeuge |
| ISBN-10 | 3-367-10085-4 / 3367100854 |
| ISBN-13 | 978-3-367-10085-9 / 9783367100859 |
| Haben Sie eine Frage zum Produkt? |
EPUB (Wasserzeichen)Größe: 6,1 MB
DRM: Digitales Wasserzeichen
Dieses eBook enthält ein digitales Wasserzeichen und ist damit für Sie personalisiert. Bei einer missbräuchlichen Weitergabe des eBooks an Dritte ist eine Rückverfolgung an die Quelle möglich.
Dateiformat: EPUB (Electronic Publication)
EPUB ist ein offener Standard für eBooks und eignet sich besonders zur Darstellung von Belletristik und Sachbüchern. Der Fließtext wird dynamisch an die Display- und Schriftgröße angepasst. Auch für mobile Lesegeräte ist EPUB daher gut geeignet.
Systemvoraussetzungen:
PC/Mac: Mit einem PC oder Mac können Sie dieses eBook lesen. Sie benötigen dafür die kostenlose Software Adobe Digital Editions.
eReader: Dieses eBook kann mit (fast) allen eBook-Readern gelesen werden. Mit dem amazon-Kindle ist es aber nicht kompatibel.
Smartphone/Tablet: Egal ob Apple oder Android, dieses eBook können Sie lesen. Sie benötigen dafür eine kostenlose App.
Geräteliste und zusätzliche Hinweise
Buying eBooks from abroad
For tax law reasons we can sell eBooks just within Germany and Switzerland. Regrettably we cannot fulfill eBook-orders from other countries.
aus dem Bereich
