JavaScript lernen

Lösungsansatz: Analoge Uhr darstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Lösungsansatz für die zuvor gestellte Übungsaufgabe zeigt die Programmierung eines passenden Quellcodes um eine analoge Uhr darzustellen.
06:28

Transkript

Gehen wir mal in die Zeit zurück, als die Uhren noch Zeiger hatten und nicht digital waren. Was habe ich für Sie vorbereitet? Ich habe hier im HTML-Bereich drei DIV-Container, ein Ziffernblatt, einen Minutenzeiger und einen Stundenzeiger. Das sehen wir hier rechts unten nochmal – das Ziffernblatt ist ganz rund. Woran liegt das? Ich hab das hier oben mit Ziffernblatt im CSS-Bereich bearbeitet. Ich habe gesagt, der Eckenradius soll 100 Pixel sein. Wenn ich da jetzt 10 Pixel eintrage, dann sehen Sie, dass das Ziffernblatt eigentlich quadratisch ist, nur sind die Ecken abgerundet und sie sind so weit abgerundet, dass nur noch dieser Kreis übrig bleibt. Das Ganze ist 200 Pixel breit und ebenso hoch und hat einen Rahmen, der ist schwarz durchgezogen und hat die Rahmendicke 1, und ich habe das Ganze absolut positioniert bezogen auf diese linke obere Ecke. Hier ist der Minutenzeiger, der ist rot, hier unten sehen wir ihn ein bisschen raus blitzen, der ist auch absolut positioniert, ist 95 Pixel breit, 2 Pixel hoch und ist hier 100-100, also auf die Mitte dieses Kreises fixiert. Die eigentliche Drehung geschieht jetzt hier im JavaScript. Zunächst einmal spreche ich diesen Minutenzeiger an mit "$+Minutenzeiger". Das kann ich übrigens nur machen, wenn ich Framework "jQuery" ausgesucht habe. Und dann möchte ich das CSS für diesen Minutenzeiger bearbeiten, und zwar "Webkit, Transform, Rotate". Ich möchte diesen Zeiger drehen, und zwar hier in dem Fall um so viel Grad, wie ich hier in der Variable "Minute" angegeben habe. Und jetzt geht die eigentliche Aufgabe, die eigentliche Programmierung los. Wir müssen dafür sorgen, dass ich jetzt hier bei Minute und Stunde nicht einfach Werte eingebe, sondern dass hier die Werte von der Computeruhr genommen werden. Wie mache ich das? Ich lege zunächst einmal eine Variable an, die nenn ich „Uhrzeit“, und diese Variable soll vom Typ "Date" sein. Date beinhaltet ja nicht nur das Datum, sondern auch die Uhrzeit. Und jetzt kann ich sagen, die Minute soll eben nicht 0 sein, sondern beispielsweise die Uhrzeit und dann schreibe ich "get minutes" und für die Stunde sage ich, ich möchte mir aus der variablen Uhrzeit nur die Stunden holen "get hours". Wichtig sind hier wieder die runden Klammern und jetzt führ ich das Ganze mal aus: Und jetzt haben sich diese Zeiger, bzw. der schwarze Zeiger hat sich bewegt, allerdings ist das nicht die richtige Uhrzeit, die angezeigt wird. Woran liegt das? Hier wird ja die Minute zwischen 0 und 60 angegeben, aber damit sind ja die Grad im Kreis gemeint und die bewegen sich ja zwischen 0 und 360, das heißt, ich muss das, was mir hier diese Minute anzeigt, mit 6 multiplizieren, das heißt Minute 0 wird zu 0, Minute 60 würde zu 360, also einmal außen rum kommen. Also "Minute = Minute mal 6". Wenn ich das Ganze jetzt noch mal ausführe, dann ist der Zeiger hier richtig, gerade kurz nach der vollen Stunde. Und Sie sehen, der Zeiger sollte ja eigentlich hier oben sein und wir hatten es gerade eben schon, wenn Sie genau aufgepasst haben, wenn ich hier schreibe "Minute = 0" und mir das Ganze anzeigen lasse, dann ist der Zeiger ja hier ganz nach rechts ausgerichtet. Ich muss also schreiben "-90", dann wird der Zeiger oben ausgerichtet sein. Das heißt, ich muss von der Minute immer noch, wenn sie schon umgerechnet ist, ins Bogenmaß 90 abziehen, dann wird der Zeiger hier auch richtig angezeigt werden. Jetzt haben wir kurz nach der vollen Stunde, das heißt, hier wird die richtige Uhrzeit, die richtige Minute angezeigt. Das Ganze müssen wir jetzt noch für die Stunde machen. Also zunächst einmal müssen wir die Stunde, die kann ja zwischen 0 und 24 Uhr liegen, wir müssen also überprüfen, wenn die Stunde größer als 12 ist, also wenn ich 13, 14 Uhr usw. habe, dann möchte ich von der Stunde den Wert 12 abziehen. Nur dann, wenn ich beispielsweise bei acht Uhr bin, brauche ich diese Stunde nicht umzurechnen. Und jetzt muss ich dafür sorgen, dass 0 bis 12 auf 0 bis 360 gemappt wird, das heißt, ich muss ähnlich wie hier oben, die Stunde nochmal multiplizieren. Und das multipliziere ich jetzt mit dem Wert, den ich bekomme, wenn ich "360÷12" schreibe, also 360/12 quasi Wichtig ist hier die runde Klammer außen rum, damit hier kein Fehler passiert. So, und jetzt muss ich nur noch von der Stunde 90 abziehen, damit ich hier diesen Ursprung, der auf rechts gesetzt war, dass der nach oben gesetzt wird. Also schreibe ich "Stunde = Stunde minus 90". Und jetzt schauen wir mal, wie viel Uhr ich gerade habe. Jawohl, das passt, es ist momentan kurz nach 10 Uhr. Wenn Sie noch nicht genug haben von diesem Projekt, dann habe ich noch einen kleinen Zusatz, und zwar können wir das etwas eleganter lösen, also wenn die Stunde größer als 12 ist, und zwar mache ich das, indem ich schreibe "die Stunde soll der Modulo von 12 sein". Modulo ist der Rest, wenn ich etwas durch 12 dividiere, das heißt ich nehme die Stunde, dividiere sie durch diese Zahl 12 und dann schaue ich, wie viel Rest übrig bleibt. Mit dem Rest hat man in der Mathematik auf Grundschulniveau gearbeitet, hier ist es aber ganz hilfreich. Der Rest zu 12 ist zwischen 0 und 12 immer genau die Zahl, um die es eigentlich geht. Und wenn ich jetzt zum Beispiel 14 durch 12 teile, dann bleibt ein Rest von 2 und das ist genau das, was ich eigentlich haben möchte. Ich kann mir also die IF-Abfrage sparen und schreibe "Stunde = Stunde Modulo 12" und wenn ich das Ganze jetzt ausführe, dann kommt genau derselbe Wert raus. Ich finde aber das sieht etwas eleganter aus als diese IF-Abfrage.

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!