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

Einführung in die Webprogrammierung

JavaScript erforschen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
JavaScript ist eine Scripting-Sprache, also eine Programmiersprache, mit deren Hilfe man das Verhalten einzelner Elemente beeinflussen kann.

Transkript

Wenn ich HTML dazu verwenden kann, meine Webseite zu strukturieren und CSS dazu verwenden kann, sie optisch zu gestalten, dann kann ich JavaScript dazu verwenden ein wenige auf der Webseite zu zaubern! Nein natürlich nicht. Aber JavaScript ist dazu da, um das Verhalten einzelne Sietenelemente zu verändern. Dazu habe ich nun hier in meiner Webseite einen Button eingebaut Der Button hat auch eine ID bekommen. Und das Thema sollte ein Farbwechsel sein. Um einen Farbwechsel im laufenden Betrieb umsetzen zu können, brauche ich JavaScript. Sie sehen hier oben zusätzlichen Text. Das ist JavaScript. Es sind Teile davon, die ich vorher geschrieben habe, damit ich nicht allzu lange brauche zum Schreiben. Das mag für Sie nun etwas unangenehm sein, dass Sie nun mit solch spröden Dingen sich beschäftigen müssen. Das liegt daran, dass Sie mit JavaScript eine Script-Sprache vor sich haben. Sie folgt Regeln, wie jede andere Programmiersprache auch. Und sie folgt Standards, nämlich den ECMA-Standards Das hat für Sie den Vorteil, wenn Sie bereits mit anderen Programmiersprachen zu tun hatten, wird Ihnen nicht allzu viel allzu fremd vorkommen. Die Regeln sind ganz ähnlich. Um nun JavaScript in meinem HTML Text verwenden zu können, gibt es zwei Möglichkeiten: Entweder ich kann es irgendwo extern liegen haben und greife dann darauf zu indem ich den Ort hinterlege. Oder ich kann, wie ich es hier bereits mit dem Stil gemacht habe, JavaScript direkt im Text hinterlegen. Das mache ich, indem ich am Ende meines normalen Textes bevor ich Body wieder schließe, ein dafür vorgesehenes Tag verwende und das Tag heißt "Script" Mit "Script" ist meinem Browser nun klar, dass hier etwas kommt, das ausgeführt werden soll. Auch hier brauche ich erneut einen schließenden Tag Script geöffnet, Script geschlossen und alles was nun dazwischen rein kommt ist JavaScript. Wie gesagt, ich habe hier ein wenig vorgearbeitet. Ich werde es nun einfach in den Script-Teil hinein kopieren. Mit Steuerung+X schneide ich es aus, und mit Steuerung+V füge ich es hier wieder ein. Jetzt schauen wir uns an, worum es hier eigentlich geht. Das Ganze fängt damit an, dass etwas aufgerufen wird. "Document get element by ID" Das bedeutet, dass in diesem Dokument es ein ELement gibt, dessen ID soll sein und welche ID es ist, steht in dieser runden Klammer, die ID-Color. Und hier habe ich mein HTML und hier habe ich tatsächlich diesen Button, der eine ID hat und diese ID ist Color. Hier soll etwas passieren und das kommt nach dem nächsten Punkt: "onclick" "onclick" ist ein sogenanntes Event und wird dafür sorgen, dass wenn ich auf den Button drücke etwas passiert. Und was passiert ist: "change color" "Chnage Colors" ist eine sogennante Funktion. Funtionen können schon vorbereitet irgendwo liegen und werden dann erst beim Aufruf ausgeführt. Auch die Funtkion habe ich vorbereitet, sie liegt hier unten. Es ist bisher nur ein Gerippe und muss noch mit sinnvollen Dingen gefüllt werden, aber so kann ich Ihnen zeigen, wie eine Funktion prinzipiell aufgebaut ist. Das es eine Funktion ist, erkennt man daran, dass es mit Funktion beginnt, also "Function". Dann kommt der Name der Funktion, dieser ist frei wählbar. In unserem Fall: "Change Color" und alles was die Funktion nun treibt, steht wieder in geschwungenen Klammern. In unserem Fall steht darin eine Schleife. Wenn Sie mit Programmiersprachen vertraut sind, sind Sie auch mit Schleifen vertraut. In diesem Fall ist es eine einfache Schleife, die einfach nur sagt: Wenn etwas bestimmtes da ist, möchte ich, dasss etwas ausgeführt ist. Wenn etwas anderes da ist, möchte ich, dass das Andere ausgeführt wird. Und was das ist, das werden wir nun in einer Variablen definieren. Eine Variable ist nichts anderes, als ein Behälter, in den Sie Dinge einfügen und wieder herausholen können. Eine Variable bestimme ich pber das Wörtchen "Var" und dann bekommt es einen Namen. Der Name hier ist "Current Color". Sie merken vielleicht diese etwas eigenartige Schreibweise mit den Großbustaben in der Mitte. Das heißt "Camel case" oder auf Deutsch "Kamelrücken". Es hilft bei der Lesbarkeit bei diesen langen Wortkonstrukten. Mein "Current Color" braucht jetzt noch einen Wert. Dieser wird zugewiesen durch ein "Ist =" Zeichen welches nicht als "Ist =" Zeichen gilt, sondern es ist ein sogenannter Zuweisungsoperator. Zugewiesen wird eine Farbe und zwar die Farbe "red". Mit einem Strichpunkt schließe ich diesen kleinen Teil ab. Das ist die Farbe, die bereits unsere Body-Farbe ist. Ich habe sie sozusagen in einen Behälter eingefügt und kann jetzt damit weiterarbeiten. Wenn es um dieses "if" geht, also etwas bestimmtes ist, dann ist die Bedingung in diesen runden Klammern nach dem "if". Das bedeutet, wenn "currentColor" einen bestimmten Wert hat, nämlich ist "Ist = red". Diese quasi doppelten "Ist =" Zeichen sind nun keine Zuweisungen, sondern sie fragen etwas ab. Sie prüfen etwas. Sie prüfen, ob der Inhalt der Variablen tatsächlich rot ist. Und wenn dieser Inhalt rot ist, dann soll etwas ganz bestimmtes passieren. Es soll ein ganz bestimmtes Element und ich kann jetzt ganz genau sagen welches bestimmte Element das sein wird, verändert werden. Und das Element ist im "document", es ist im Body-Bereich es wird über eine Stil-Zuweisung definiert und der Stil selbst ist "color". Das bekommt nun eine neue Farbe: "Ist =" Zuweisung "green". Damit wird im CSS die Farbe von rot auf grün umgeschaltet. Und wir müssen unseren Behälter ebenfalls frisch befüllen. Das heißt, jetzt ist unser Behälter "currentColor" mit einer neuen Farbe gefüllt, nämlich grün. "ist = green" Strichpunkt. Diese Strichpunkte am Ende sind sehr wichtig, weil sie einen Teilbereich einfach abschließen. Gut! Ich habe nun eine Farbveränderung durchgeführt. Ich werde das Ganze in diesen L-Stil übernehmen allerdings dann mit geänderten Vorzeichen. Da ich das Ganze nicht noch einmal schreiben möchte, werde ich mit Steuerung+C diese zwei Zeilen kopieren und dann innerhab der geschwungenen Klammer mit Steuerung+V wieder einfügen. Hier wollen wir nämlich, die andere Richtung beschreiben. Also entweder ist es grün oder wir möchten, dass sich der Stil wieder zu rot verändert. Damit das hin und her Klicken funktioniert. Ich muss ebenfalls die Variable mit dem Wert "rot" - oh da habe ich mich verschrieben: " red" - Ok. Jetzt ist es wieder mit "red" befüllt und die Variable muss natürlich auch mit "red" befüllt werden. Wir sind nun schon fast am Ziel unserer Reise. Das einzige was wir jetzt noch brauchen ist ein Rückgabewert. Im Moment passiert hier viel, aber wir können noch nicht sehen, dass diese Variable sich neu befüllt. Wir müssen die Variable ausgeben und das machen wir mit "return" Also "return" "currentColor". So die Spannung steigt. Wir speichern das Ganze. Und werden hier die Seite neu laden. Die halbe Miete haben wir schon, nämlich meinen Text, der einfach nur wüst untergebracht war, ist jetzt zwischen seinen Skriptteilen verschunden und wenn ich nun auf Farbwechsel klicke, müsste mein Text innerhalb des Bodys grün werden. Und wenn ich noch einmal klicke wird es wieder rot. Sie werden sich nun fragen, warum das keinen Einfluss auf die Überschrift hat. Das haben wir wieder dem CSS zu verdanken, welches spezieller mit der H1 umgegangen ist. Da dies eine spezieller Anweisung ist, überschreibt es die generelle Anweisung innerhalb des Body-Textes. So haben Sie geshen, dass man mit JavaScript bestimmte Seitenelement ansprechen und verändern kann.

Einführung in die Webprogrammierung

Tauchen Sie ein in die vielfältige Welt von Webdesign und -entwicklung und lernen Sie die wichtigsten Technologien, Programmiersprachen und -tools kennen.

2 Std. 46 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!