Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Grundlagen der Webprogrammierung: Basiswissen

JavaScript: Programmierung des Front-Ends

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
JavaScript ist die mit Abstand wichtigste Skriptsprache, durch die aus statischen Seiten im Browser interaktive Seiten werden, um so auf die Eingabe von Benutzern reagieren zu können.

Transkript

Neben HTML und CSS ist JavaScript der dritte, wichtige Baustein für modernes Webdesign. JavaScript ist eine cleintseitige Sprache, das heißt, das Script oder der Programmcode wird nicht auf dem Server, sondern direkt im Browser ausgeführt. Viele Webdesigner machen einen großen Bogen um JavaScript, und das ist schade. Denn damit berauben sie sich vieler Möglichkeiten. Im Rahmen dieses Kurses kann ich Ihnen JavaScript natürlich nicht vollständig vorstellen, aber wir können ein paar tastende Schritte machen. Sie werden feststellen, dass es im weiten Reich von JavaScript nichts gibt, dem Sie aus dem Weg gehen müssen. JavaScript hat trotz seines Namens absolut nichts mit der Programmiersprache Java zu tun. Es gibt zwar Ähnlichkeiten zwischen beiden Sprachen, aber das liegt einfach daran, dass sowohl Java, als auch JavaScript sich für die Syntax Notation bei C++ bedient haben. C++ ist gewissermaßen die Mutter aller modernen Programmier-und Script Sprachen, und die Ähnlichkeiten zwischen ansonsten völlig unterschiedlichen Sprachen, verdankt sich diesem gemeinsamen Ursprung. JavaScript wurde 1995 von Netscape unter den Namen Livescript eingeführt, um ihren sehr populären Browser Navigator um Funktionen zu ergänzen, die mit HTML nicht möglich sind. Etwas später kooperierte Netscape mit dem Java Erfinder Sun, und der Name wurde aus Marketinggründen in JavaScript geändert. 1997 übernam die ECMA. Die ECMA ist eine Art DIN-Institut der IT-Branche. Die Sprache JavaScript, nun standardisierte sie als ECMAScript. Wenn wir heute von JavaScript reden, meinen wir eigentlich ECMAScript 3.0. Im Laufe der Jahre hat sich JavaScript zur Standard-Skriptsprache für Webseiten entwickelt. Wenn wir heute von Scriptsprachen für Web reden, dann meinen wir in 99,9% aller Fälle immer JavaScript, oder ganz genau ECMAScript 3.0. Vielleicht fragen Sie sich ja, warum Sie überhaupt JavaScript lernen sollten, also überhaupt mit JavaScript beschäftigen sollten. Nun, es ist ganz einfach, JavaScript erweitert die Möglichkeiten vom Webdesigner immens. Normale HTML Webseiten sind statisch. Das heißt, der Browser fordert eine HTML Datei an, der Server schickt diese Datei, der Browser stellt sie dar, fertig. Mit JavaScript lassen sich Webseiten interaktiv, also dynamisch gestallten. JavaScript kann neue Fenster öffnen und auf Aktionen des Benutzers reagieren. JavaScript merkt zum Beispiel, ob der Benutzer die Webseite scrollt, ob eine neue Seite geladen wird, ob der Benutzer irgendwo hingeklickt hat. Auf all diese Aktion kann JavaScript sinnvoll reagieren. Es ist auch möglich, dass Sie Eingaben vom Benutzer abfragen, zum Beispiel seinen Benutzernamen. Oder nehmen wir an, sie wollen eine Kreditlaufzeit berechnen lassen, dann können Sie halt über ein JavaScript Formula, Eingabe und Benutzer entgegen nehmen, und mit diesen Eingaben dann rechnen, und die Laufzeit auf der Webseite anzeigen. Die wohl wichtigste Eigenschaft von JavaScript ist, Sie können den kompletten Inhalt, und zwar wirklich den kompletten Inhalt des Browser Fensters jederzeit aktualisieren, manipulieren und verändern. Und zwar, das ist jetzt der Trick, ohne dass Sie erneut Daten vom Server abrufen müssen. Alle JavaScript-Aktionen finden direkt im Browser statt, und werden von der JavaScript Engine des Browsers ausgeführt. Eine Verbindung zu einem Server ist also nicht notwendig. So können Sie zum Beispiel Webseiten mit neuen Inhalten versehen, ohne dass diese Inhalte nachgeladen werden müssen. Doch genug der Theorie. Machen wir einen ganz kleinen Abstecher in die Praxis. Wie sieht JavaScript eigentlich aus? Für eine erste Demonstration von JavaScript, mache ich das, was man bei solchen Anlässen immer tut: ich lasse mal den Text "Hallo, Welt!" ausgeben. Das ist nichts besonderes, ist nichts Spektakuläres, ist ein bisschen langweilig. eher so ein bisschen nervtötend, aber das ist der Anfang. Wir haben hier ein ganz einfaches HTML Dokument mit doctype HTML, also HTML5. Wir haben hier den HTML Bereich, hier haben wir ein "head" Bereich. Im "head" wird ein Titel definiert, der Zeichensatz wird festgelegt, über "style", eine kleine CSS Anweisung angegeben, das heißt also, das "body"-Element soll in Arial gesetzt werden. Alles was hier in "body" steht, erscheint jetzt in Arial. "style" wieder geschloßen, "head" geschloßen. Hier geht der "body" los, der eigentliche Inhalt der Seite. Beginnt mit einer einfachen "h1", "Eine kleine JavaScript Spielerei". Und hier kommt nun der eigentliche JavaScript Teil. Das heißt, der <script Tag gehört nicht zu JavaScript, das ist nur HTML, aber das Öffnen des <script Tag sagt dem Browser: Obacht, alles was jetzt kommt ist JavaScript, und zwar solange, solange das <script Tag nicht geschloßen wird. Hier wird's wieder geschloßen. Wir haben also hier als Script eine einzige Zeile, nämlich die hier: "window.alert('Hallo Welt!')". Vielleicht ahnen Sie schon, was das Ganze macht, Alert, Warnung, Hinweis, das heißt, es wird ein kleines Fenster aufgemacht. In diesem Fenster steht der Text "Hallo Welt!", und dieses Fenster verschwindet erst, wenn man auf OK geklickt hat. Sobald das passiert, wird die Seite weiter aufgebaut, danach kommt also hier dieser Absatz mit einem kleinen hämischen Kommentar, der auch sehr angemessen ist, weil diese "window.alert" Geschichte ist nicht sehr spektakulär, zeigt aber "JavaScript in Action" gewissermaßen. Nun, genug der langen Vorrede. Ich lasse das Ganze einfach mal in Firefox ausführen, und wir sehen, es passiert das, was wir erwartet haben. Wir haben hier eine kleine JavaScript-Spielerei, wir haben hier oben den Titel. Sie sehen auch, dass die Webseite noch nicht geladen ist. Der Throbber läuft immer noch. Der Browser wartet auf eine Eingabe, und zwar wartet er darauf, dass diese "alert"-Box wieder geschloßen werden darf. Hier ist unser Text "Hallo Welt!". Klicke ich hier jetzt drauf, wird die Box geschloßen, und die Seite vollständig aufgebaut. Nun, dieses erste, kleine, einfache Beispiel war nicht sehr spektakulär, nicht sehr beeindruckend, vor allen Dingen es war nicht sehr sinnvoll. Bliebe es dabei, dann gäbe es wirklich keinen Grund sich mit JavaScript zu beschäftigen. Doch glücklicherweise bleibt es nicht dabei. Ich hatte Ihnen anfangs ja gesagt, dass JavaScript in der Lage ist, den Inhalt im Browserfenster komplett zu manipulieren, zu verändern, ohne dass der Browser Daten nachladen muss vom Server. Um das zu demonstrieren, habe ich mir mal ein ganz kleines, einfaches HTML Dokument mit eingebetteten JavaScript geschrieben. Gehen wir das mal kurz durch. Wir haben ja am Anfang also die Zeile "doctype html", die uns sagt, das Ganze ist HTML 5. Der HTML Bereich beginnt hier, endet da unten. Hier ist der "head" Bereich, obligatorischer "head" Bereich. Hier ist der ebenfalls obligatorische "body" Bereich. Im "body" Bereich gibt es eine "h1", mit einigen Attributen, die wir mal vorübergehend ignorieren, und den Text "Das ist eine rote Überschrift". Im "head" Bereich wird der Zeichensatz festgelegt, UTF-8, ein Titel für die Webseite definiert. Es gibt ein kleinen "style" Bereich, in dem CSS definiert wird, und unser JavaScript. Im CSS Bereich wird einmal über "body (font-family Arial)", die Arial als Standardschrift für die gesamte Seite festgesetzt. Dann kommt eine einfache Klasse, die "rot" heißt, und die nichts anderes tut, als die Farbe auf rot zu setzen. Entsprechend setzt die Klasse "blau", die Farbe auf blau. Gehen wir mal zurück in unsere "h1". Da sehen wir das Attribut "class=rot". Das heißt, hier wird dieser Headline h1 die CSS Klasse "rot" zugewiesen, also die Farbe in rot geändert, statt der standardmäßigen Farbe schwarz. Das heißt, das ist eine rote Überschrift, wird als "h1" in rot auf der Webseite erscheinen. Das sieht erst einmal so aus, und ist auch nicht sehr spektakulär. Interessant wird die Sache nun aber, wenn ich auf diese Headline klicke. Also ich klicke jetzt auf diese Headline, und Sie sehen, die Headline ändert ihren Inhalt und ihre Farbe, bei jedem Mausklick. Von rot nach blau, von blau nach rot. Und das ist gewissermaßen JavaScript in Aktion. Der Inhalt der Seite ändert sich, ohne dass das nachgeladen werden muss. Sie sehen ja, hier gibt's nirgendwo ein Hinweiß, dass der Browser irgendwie ein Server kontaktiert oder irgendwas macht. Sondern einfach intern im Browser lokal, wird der Inhalt der Seite geändert. Schauen wir uns nun mal kurz das JavaScript an, das dafür verantwortlich ist, das ist hier "function flipColor". Die wird aufgerufen, sobald der onClick-Event eintritt. Das heißt, wenn ich hier auf der Webseite auf die Headline klicke, dann löst Attribut "onClick" die JavaScript Funktion "flipColor" aus. FlipColor macht nichts anderes, als zwei Variablen zu definieren, einmal die Objektvariable "element", und diesem "element", oder in dieser Objektvariable "element", ist dann der komplette Inhalt des Html-Elements, das die ID "headline" hat. Sie sehen hier, ich habe hier die "h1", die ID "headline" zugewiesen. Über eine ID ist jedes Element auf einer Webseite eindeutig identifizierbar. Also das Script liest erst einmal die komplette "h1" mit sämtlichen Attributen und seinem Inhalt aus, und legt sie in der Objektvariable "element" ab. Dann wird die Variable "farbe" definiert, das über "getAttribute" den Inhalt des Attributes "class" ausliest. Am Anfang also rot. Danach kommt eine einfache "if-else" Abfrage, also wenn, andernfalls Abfrage, also wenn die Farbe rot ist, also wenn hier steht "class=rot", dann "setAttribute", wird das Attribute "class" hier unten in blau geändert, und über "innerHTML" der Text, also das hier ist das "innerHTML", das Innere HTML, also das was zwischen diesem öffnenden und schließenden HTML Element steht, wird von "Das ist eine rote" in "Das ist eine blaue Überschrift" geändert. Falls die Farbe nicht rot ist, also falls "class" nicht gleich rot, dann ist "class" natürlich gleich blau, und wir können über "setAttribute" "class" wieder auf rot setzen, und den Text entsprechend in rote Überschrift ändern. Und das passiert bei jedem Mausklick, - es ist bei jedem Mausklick - ändert sich die Überschrift in ihrer Farbe und ihrem Inhalt. Auch dieses Beispiel ist jetzt nicht sehr spektakulär, aber es zeigt Ihnen, wie einfach und schnell JavaScript in der Lage ist, den Inhalt von Webseiten zu verändern, ohne dass irgendwelche Daten zwischen Browser und Server ausgetauscht werden müssen. JavaScript kann natürlich sehr viel mehr, als ich Ihnen hier kurz demonstrieren konnte. Viele komplexe Aufgaben verlangen aber sehr viel Programmierung, Zeit und Kentnisse. Doch keine Sorge, hier helfen Ihnen die JavaScript-Frameworks, oder die JavaScript Bibliotheken. Dabei handelt es sich um Sammlungen, fertige Funktionen, die Sie mit wenig Aufwand in Ihr Projekt übernehmen, und so Ihre Projekte um ganz erstaunliche Möglichkeiten erweitern können. Die populärsten Frameworks sind zum Beispiel: jQuery, Modernizr, prototype und mootools. Es gibt noch sehr viel mehr Frameworks, aber was Sie als Ermunterung für den Einstieg in JavaScript mitnehmen können, sie sind nicht allein. Und Hilfe ist im Internet nur ein paar Mausklicks entfernt. Wenn Sie nun neugierig geworden sind und Lust bekommen haben, sich mit JavaScript zu beschäftigen, möchte ich Ihnen noch drei kleine Tipps mit auf den Weg geben. Beschäftigen Sie sich zuerst mit den Grundlagen von JavaScript. Sie müssen kein ausgefuchster JavaScript Spezialist werden, sie müssen kein Programmier-Guru werden, aber Sie müssen die grundlegende Arbeitsweise von JavaScript kennen, und gelernt haben, wie diese Sprache sinnvoll eingesetzt werden kann. Wenn Sie soweit sind, und in den Grundlagen einigermaßen firm, dann schauen Sie sich einfach ein paar der Frameworks an. Spielen Sie damit ein wenig herum, probieren Sie aus, was die Frameworks ihnen zu bieten haben. Lernen Sie die Möglichkeiten kennen, die ein Framework hat. Zu guter Letzt gibt es allerdings auch einen kleinen Wermutstropfen. JavaScript wird ja im Browser ausgeführt, und lässt sich auch im Browser ausschalten. Wenn ein Anwender JavaScript deaktiviert hat, dann können Sie soviel JavaScript Code schreiben, wie Sie lustig sind. Es wird vom Browser des Anwenders ganz einfach ignoriert. Überlegen Sie sich also, was mit Ihrer Website passiert, wenn JavaScript nicht zur Verfügung steht. In diesem Fall bietet HTML das Element NoScript an, in dem sie HTML Code ablegen, der nur dann ausgeführt wird, wenn JavaScript ausgeschaltet ist. Ein kleiner Trost, JavaScript ist heute derart populär und allgegenwärtig, dass die Wahrscheinlichkeit, dass es ausgeschaltet ist, praktisch gegen null geht.

Grundlagen der Webprogrammierung: Basiswissen

Lernen Sie die wichgsten Technologien und Begriffe des World Wide Web kennen und sehen Sie, wie Sie sie selbst anwenden können.

2 Std. 21 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!