JavaScript f¿r Dummies

Paul McFedries

• Publisher: Wiley-VCH
• Year: 2017
• ISBN:
  9783527812677
• Edition: 2
• Topic: Computer Science
• Subtopic: Software Development
• Index: Computer Science

Schnell und einfach interaktive Webseiten programmieren: Andy Harris zeigt Ihnen alles, was Sie über JavaScript wissen müssen, um dieses Ziel zu erreichen. Zunächst erlernen Sie die Grundlagen der Programmierung und erfahren dann, wie Sie Ihre HTML-Elemente mit JavaScript verändern und animieren. Auch die Themen Ajax und jQuery werden ausführlich behandelt.
HTML- und CSS-Kenntnisse sind für die Lektüre von Nutzen, Programmierkenntnisse benötigen Sie jedoch nicht. Mit den vielen verständlichen Beispielen finden sich auch Anfänger schnell zurecht, so dass Sie schon bald attraktive Webseiten entwickeln werden!

31-54

Kapitel 1

Das Web auf die nächste Stufe befördern

In diesem Kapitel

Sich mit HTML und CSS befassen

Die Rolle von JavaScript und AJAX untersuchen

Herausfinden, was JavaScript und AJAX für ­Webseiten bringen

Einen Editor wählen

Werkzeuge für den Browser zusammenstellen

Das Web hat schon seinen Reiz. Webseiten zusammenzustellen, ist überaus interessant, und kaum ein Unternehmen kann heute auf sie verzichten. Und mit dem Wachstum und den Änderungen des Webs haben sich auch die Erwartungen an Inhalt und Funktionsweise von Webseiten gewandelt. Wenn Sie bereits HTML oder XHTML (Extensible Hypertext Markup Language) kennen, ist das Erstellen von Webdokumenten für Sie nichts Neues.

Und so, wie sich das Web weiterentwickelt, entwickeln sich auch die Werkzeuge weiter, mit denen Webseiten und Webdokumente erstellt werden. JavaScript und AJAX sind dabei leistungsstarke Werkzeuge, mit denen Sie dynamische Webdokumente anlegen können. Dieses Kapitel gibt Ihnen einen ersten Überblick über einige der grundlegenden Technologien für die Erstellung von Webseiten.

Etwas wirklich Cooles zusammenbauen

In diesem Buch geht es darum, Webseiten um Funktionen zu erweitern, die Sie mit einfachem HTML und CSS nicht zustande bringen.

Lassen Sie sich nicht täuschen, wir sprechen hier von Programmierung – und Programmierung ist nun einmal härter als die gute alte Webentwicklung. Aber es lohnt sich, wie das Beispiel aus Abbildung 1.1 zeigt.

Abbildung 1.1: Diese im Internet-Browser angezeigte Seite besitzt einige interessante Funktionen.

Damit dieses Beispiel nicht zu kompliziert wird, habe ich darin externe Bibliotheken verwendet. Diese werden in Teil IV dieses Buches erklärt, weshalb Sie im Moment einfach akzeptieren sollten, dass hier etwas Aufregendes geschieht.

Dieses Programm setzt eine aktive Internetverbindung voraus, um wie gewünscht arbeiten zu können. In Kapitel 10 finden Sie Alternativen, um sich mit externen Bibliotheken zu verbinden.

Wenn Sie dieses Beispiel in Aktion sehen wollen (was sich lohnt), gehen Sie über http://www.wiley-vch.de/publish/dt/books/ISBN3-527-71444-8 zur Website dieses Buches. Dort finden Sie dieses und jedes andere Programm und Beispiel aus diesem Buch zum Herunterladen. Dann müssen Sie die Datei demo.html nur noch in Ihren Internet-Browser laden. Im Lesezeichen-Eingabefeld steht dann eine Adresse mit diesen Angaben. file:///.../demo.html. Die drei Punkte werden durch die Position der in den Browser geladenen Datei ersetzt.

Auf den ersten Blick sieht die Webseite recht einfach aus, aber wenn Sie sie in einem Browser öffnen (was Sie machen sollten) und mit ihr herumspielen, werden Sie schnell entdecken, dass sie viele Überraschungen enthält. Diese sehr einfache Seite zeigt einige der Gründe auf, warum Sie sich mit JavaScript und AJAX befassen sollten.

Die Schaltflächen bewirken etwas. Vielleicht können Sie ja mit reinem HTML Formularbestandteile (wie Schaltflächen und Textfelder) erstellen, aber HTML kann mit diesen ­Sch­altflächen und Textfeldern nichts anfangen. Dafür benötigen Sie eine Programmier­sprache.

Damit etwas Interessantes geschieht, verwenden die Schaltflächen JavaScript, um etwas auszuführen. Außerdem ist die Tatsache, dass die Seite interaktiv geworden ist, eine große Änderung. Mit JavaScript können Sie Anwendungen und nicht nur Seiten anlegen.

Die Schaltfläche Zählen ändert die Seite dynamisch. Wenn Sie auf die Schaltfläche Zählen klicken, wird der Seite automatisch ein neuer Inhalt hinzugefügt. Ein Programm zählt, wie oft die Schaltfläche Zählen angeklickt worden ist, und fügt dem Bereich mit der Beschriftung Beobachten Sie diesen Bereich eine Zeile Text hinzu. Wenn der Benutzer mit der Seite in eine Wechselwirkung (auch Interaktion genannt) tritt, verwendet die Seite Material, das sich ursprünglich nicht auf dem Server befand.

Klar, dieses Beispiel ist einfach gehalten, aber Sie können jedem Webelement dynamisch jeden Text hinzufügen. Damit steht Ihnen eine sehr leistungsstarke Möglichkeit zur Verfügung. Abbildung 1.2 zeigt, wie die Seite aussieht, nachdem ich mehrfach auf die Schaltfläche Zählen geklickt habe.

Abbildung 1.2: Die Schaltfläche ändert in einem Bereich der Seite den Text.

Die Schaltfläche Sichtbarkeit ein/aus lässt Dinge erscheinen und verschwinden. Sie können mit HTML nicht wirklich dafür sorgen, dass Elemente auf dem Bildschirm erscheinen oder verschwinden. Das lässt sich zwar bis zu einem gewissen Grad mit CSS erreichen, aber JavaScript gibt Ihnen einen sehr leistungsstarken Werkzeugsatz an die Hand, mit dem Sie festlegen können, welche Teile einer Seite für den Benutzer sichtbar sind. Abbildung 1.3 zeigt die Seite, auf der nun das Element für die Textausgabe ausgeblendet ist.

Abbildung 1.3: Klicken Sie auf die Schaltfläche , damit das Element mit der Textausgabe wieder erscheint.

Die Schaltfläche Stil ändern ändert sofort das Erscheinungsbild eines Teils der Seite. Sie können JavaScript verwenden, um die Inhalte eines beliebigen HTML-Elements auf der Seite zu ändern – und Sie können JavaScript auch verwenden, um das Erscheinungsbild (das CSS) in Echtzeit zu modifizieren. Ich habe für unser Beispiel eine CSS-Klasse erstellt, die funky heißt und dem Ausgabefeld hinzugefügt oder von dort entfernt wird, wenn ein Benutzer auf die Schaltfläche klickt. Diese Vorgehensweise funktioniert mit jeder CSS-Klasse. (Super, oder?) Abbildung 1.4 zeigt die neu geladene Seite, nachdem ihr die Klasse funky zugewiesen worden ist.

Abbildung 1.4: Sie können das Erscheinungsbild eines jeden Seitenele...