Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript lernen

Informationen auf Website ausgeben

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Erstellung eines entsprechenden JavaScript-Programms dient dazu Informationen auf einer Website auszugeben. Dies erfordert zunächst die Erstellung eines HTML-Containers.
05:12

Transkript

Jetzt schreiben wir mal ein etwas komplizierteres Programm. Wir möchten den Nutzer auffordern sein Geburtsjahr einzugeben. Daraus berechnen wir das aktuelle Alter, aber das möchten wir nicht in einer Alertbox ausgeben, sondern direkt auf einer Webseite anzeigen lassen. ich bin hier auf JSFiddle.net Als Erstes wähle ich hier mal ein Framework aus, und zwar das Framework jQuery 2.1, das neueste und jetzt schreiben wir hier zunächst einmal eine Überschrift, die soll heißen "Ihr Alter" und weil es eine Überschrift ist, muss ich hier noch mal ein HTML-Tag außenrum nehmen. H1 eingeschlossen in spitze Klammer, der sorgt dafür wenn ich hier auf RUN gehe, dass das Ganze hier groß angelegt wird, und jetzt möchte ich hier unten in JavaScript ein Popup Fenster öffnen. Dieses Popup Fenster, wo ich etwas eintippen kann, schreibt man mit "Prompt" und dann schreibe ich hier "Bitte geben Sie ihr Geburtsjahr an" Doppelpunkt und ich muss dann wieder Schlusszeichen setzen, die Klammer zu machen und diese Zeile die schließe ich wie immer bei JavaScript mit einem Strichpunkt ab und jetzt möchte ich das, was der Nutzer hier eingegeben hat in einer Variablen speichern, also schreibe ich "var geb =" das heißt, das Geburtsjahr wird in dieser Variablen gespeichert und mache dann eine zweite Variable auf, die nenne ich Alter und die berechne ich aus 2015, das aktuelle Jahr - minus geb. Jetzt kommt etwas Neues: ich möchte die Information Alter jetzt direkt hier auf dieser Webseite ausgeben, zunächst einmal brauche ich hier auf dieser Website eine Art Container und das mache ich in HTML und hier schreibe ich jetzt einfach mal "div ID = alter" dann mache ich "div" wieder zu. Ich erkläre gleich, was das bedeutet. Zunächst mache ich hier einmal ein paar Pünktchen hin. Jetzt habe ich hier einen HTML Container, solche Container schreibt man eigentlich immer mit einem "Div" Leerzeichen und mit dieser ID kann ich jetzt diesen Container direkt benennen, das heißt ich kann jetzt direkt auf ihn zugreifen Dieser Zugriff kann von JavaScript erfolgen und das mache ich jetzt weil ich hier jQuery nutze, kann ich hier also ein Dollarzeichen schreiben, dann wieder - das ist häufig der Fall- runde Klammer - so wie wir es hier auch hatten - runde Klammer und dann sage ich: ich möchte genau auf diesem Container Alter zugreifen also schreibe ich hier ein Alter hinein und weil das eine ID ist, muss ich hier noch ein Rautezeichen davorsetzen. Das mag für Sie jetzt alles ein bisschen kompliziert klingen, aber wenn Sie das zehn Jahre lang machen 8 Stunden am Tag 5 Tage die Woche dann haben sie es irgendwann mal raus, das es eigentlich gar nicht so schwer ist. Wir machen auch hier wieder die runde Klammer zu, das ist immer gleich und hier oben nennen wir es ID und auf diese ID greifen wir hier unten eben mit diesem Rautezeichen zu. Und jetzt möchten wir den Inhalt dieses HTML Containers hier einfach verändern, also schreibe ich HTML und auch wieder hier, das kennen Sie schon; runde Klammer auf, runde Klammer zu und damit ich es nachher nicht vergesse schreibe ich hier schon mal einen Strichpunkt hinein. Die Anzahl der Leerzeichen innerhalb der runden Klammer sind gar nicht wichtig und jetzt schreibe ich einmal einen Text rein: Sie sind X Jahre alt, Punkt Und dann die Schlusszeichen. Jetzt möchte ich natürlich dass dieses X natürlich durch das tatsächliche Alter ersetzt wird aber wenn ich das so schreibe dann würde da eben geschrieben stehen "Sie sind Alter Jahre alt". Ich muss jetzt also einen Weg finden um den Computer zu sagen: Bitte gib hier das tatsächliche Alter ein. Das Ganze soll nur ein Platzhalter sein und das mache ich in dem ich hier diese Anführungszeichen wieder zu Ende setze und hier wieder damit anfange und alles außerhalb dieser Anführungszeichen ist eine Variable und alles was in Anführungszeichen steht das ist eben tatsächlich Text der eins zu eins ausgegeben wird. Jetzt muss ich noch diese Zeichenkette und diese Variable miteinander verknüpfen, das mache ich mit einem Pluszeichen am Anfang, also: "Sie sind" dann gehe ich raus aus der Zeichenkette mit plus kommt etwas Neues hier; der Inhalt der Variablen und so geht's hier genauso weiter, probiere das ganze mal aus ob ich hier keinen Tippfehler gemacht habe, ich klicke hier oben auf RUN "Bitte geben Sie ihr Geburtsjahr an", jetzt lüge ich auch mal ein bisschen und gehe auf OK und jetzt steht hier: "Sie sind 29 Jahre alt". Das ist also der Original Inhalt einer HTML-Seite und diesen Inhalt kann ich eben mit Javascript beeinflussen.

JavaScript lernen

Sehen, lernen und üben Sie das Schreiben von kleinen Programmen, die allesamt mit der Programmiersprache JavaScript erstellt werden.

2 Std. 6 min (37 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!