JavaScript lernen

Lösungsansatz: Balkendiagramm erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video erläutert einen Lösungsansatz um ein Balkendiagramm, welches das eingegebene Alter einer Person anzeigt, in JavaScript zu programmieren.
04:37

Transkript

So, wie mache ich das ganze jetzt? Zunächst einmal suche ich mir hier das Framework aus: jQuery 2.1, dann schreibe ich hier mal eine Überschrift "Ihr Alter" mit spitzen Klammern und dann H1 und im JavaScript-Teil da schreibe ich mal ein Prompt und sage "Bitte geben Sie ihr Alter an", Doppelpunkt, und das, was der Nutzer eingibt das möchte ich in der Variablen "var geb" speichern "geb = Prompt" So, und jetzt brauche ich natürlich noch einen Bereich, der diesen Balken angibt. Ich gehe wieder nach HTML hoch, erzeuge mir einen DIV-Container, und diesem DIV-Container gebe ich einen Namen, das nenne ich einfach mal Balken und dieser DIV-Container ist einfach leer. Oder ich könnte auch ein paar Punkte hineinschreiben und mache ihn hier wieder mit </div zu. Jetzt möchte ich, dass dieser Balken mal so ein Grundaussehen bekommt, also Aussehen ist eine CSS-Sache. Ich möchte diesen Balken verändern, und weil das ja hier eine ID ist, muss ich vorne dran auch ein Rautezeichen schreiben und überlegen Sie, welche Klammer brauche ich. Die spitze Klammer in HTML, die runden in JavaScript, und in CSS nehme ich eben die geschweifte Klammer. Die mache ich auf und zu, und jetzt sagen wir mal: "width" soll 100 Pixel sein, die Höhe dieses Balkens soll 50 Pixel sein und die Hintergrundfarbe machen wir mal "blue" Schauen uns das Ganze mal an, ob ich keinen Tippfehler gemacht habe. .Jawohl, den Balken sehen wir schon. Er fragt mich hier nach dem Alter, da gehe ich mal auf abbrechen und hier haben wir das Ganze Sie sehen, hier sind noch diese drei kleinen Punkte drin. Die möchte ich gar nicht haben, also nehme ich die hier raus. Und jetzt geht die eigentliche Programmierung los. Jetzt müssen uns überlegen, wie können wir diesen Balken, - die Länge dieses Balken - verändern. Das mache ich mit jQuery, und zunächst einmal möchte ich Zugriff auf diesen Balken bekommen. Das mache ich mit dem Dollarzeichen, runde Klammer, Anführungszeichen, Raute, für dieses ID, und dann Balken. Und jetzt möchte ich mit Punkt hier anschließen, und jetzt möchte ich die Breite verändern, also schreibe ich "width", Und hier kommt jetzt der entsprechende Wert dafür hin. Da schreibe ich jetzt einfach mal Breite rein. Das ist eine Variable die es noch gar nicht gibt. die muss ich erst erzeugen, und das mache ich mit "var Breite". Und jetzt muss ich die berechnen, also schreibe ich: "var Breite" und das ist eigentlich genau das Alter, das hier jemand angibt. Das möchte ich zunächst noch gar nicht verändern, also schreibe ich "Breite = geb". Also könnte ich mir das Ganze hier eigentlich ja auch komplett sparen und genau diesen Wert hier unten eintragen, weil ich ihn ja gar nicht verändere. Gehen wir mal auf RUN. So geben Sie ihr Alter ein. "ich bin 39 Jahre jung", gehe auf OK, und dann sehen wir hier den Balken, wie er sich gerade verändert hat. Jetzt möchte ich allerdings mal ausprobieren, was denn passiert, wenn jemand, sagen wir mal, 108 Jahre eingibt, ein sehr stattliches Alter. Dann ist der Balken auch noch nicht über die gesamte Länge hier verteilt. Ich möchte dass wenn jemand 100 eingibt, der Balken deutlich länger wird. Also nehme ich jetzt diese Variable "geb" und verändere die und sage: diese Variable "geb" möchte ich immer verdreifachen, also mal 3, und das, was dabei rauskommt, das speichere ich in derselben Variable. d. h., ich nehme diese Variable, wenn ich jetzt = 39 angebe, wird es mit 3 multipliziert. Fragen Sie mich jetzt nicht auf die Schnelle, was dabei rauskommt. Aber dieser Wert 117, der wird hier wieder in der Variablen "geb" gespeichert und ausgegeben. Ich gehe auf RUN, gebe 39 an, und sie sehen, dieser Balken ist jetzt etwas breiter geworden. Das ganze möchte ich noch mal ordentlich vergrößern, nicht um den Faktor 3, sondern um den Faktor 10. Jetzt schauen wir mal, was jetzt rauskommt, wenn ich 39 angebe. Dann ist der Balken schon deutlich länger geworden, d.h., Sie können mit dieser Berechnung natürlich auch die Länge des Balkens beliebig definieren.

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!