Transkripte
1. Einführung: Hallo zusammen
und danke, zu diesem neuen
JavaScript-Projekt
gekommen seid. In diesem Projekt werden wir
lernen, wie wir mit
HTML, CSS und JavaScript
einen Temperaturkonverter erstellen können . Sie können hier sehen,
dass wir zwei Eingaben haben, eine für die Celsiusgrade und die andere für
Fahrenheit Wenn ich also hierher komme und irgendwelche Grad Celsius
hinzufüge, kannst
du sehen, dass sie
automatisch in
Fahrenheit umgewandelt und hier
in der Fahrenheit-Eingabe angezeigt werden Beachten Sie auch, dass wir
diese beiden Aufwärts- und Abwärtspfeile haben , mit denen wir die Grade erhöhen
oder verringern können Wir können auch
umgekehrt von
Fahrenheit in Celsius umrechnen , indem hier einen
Fahrenheit-Wert
eingeben. Sie können sehen, dass er in Celsius
umgerechnet und hier in
der Celsius-Eingabe angezeigt wird Dieser Kurs ist ideal für Studierende, die die Grundlagen
von Javascript
erlernt haben und ihr Wissen
praktisch
anwenden möchten ihr Wissen
praktisch
anwenden Durch die Erstellung einer einfachen, aber
ansprechenden Aufgabenlisten-App die
Schüler
praktische Erfahrungen sammeln, ihr Verständnis
der wichtigsten Javascript-Konzepte
vertiefen und ihr Selbstvertrauen in die
Entwicklung realer Projekte stärken Entwicklung realer Projekte Um das Beste
aus diesem Kurs herauszuholen, werden die
Studierenden ermutigt, das Projekt
selbst zu erstellen und ihre fertigen Arbeiten
als Zip-Datei in die
Projektgalerie
hochzuladen als Zip-Datei in die
Projektgalerie
2. UI-Design für Temperaturkonverter mit HTML und CSS: Okay, Leute, lasst uns sehen, wie
wir dieses Projekt erstellen können. Ich werde hier in meinem
HTML-Code beginnen, indem ich ein Div hinzufüge ihm eine Wrapper-Klasse
gebe Dann werde ich darin
ein weiteres Div mit einer
Containerklasse hinzufügen ein weiteres Div mit einer
Containerklasse Und dieses
Container-Div wird
die Celsius-Eingabe und das Etikett enthalten . Also werde ich ein Etikett hinzufügen
und Celsius sagen. Dann füge ich
darunter eine neue Eingabe hinzu. Geben Sie ihm eine Art von Zahl, weil Temperaturgrade
offensichtlich Zahlen sind, kein Text. Ich gebe ihm auch
eine Celsius-ID. Dann werde ich hier in
das Etikett gehen und vier sagen und dann die ID
der Eingabe Celsius hinzufügen. Dieser Behälter wird also die Celsius-Eingabe
aufnehmen. Um
die Fahrenheit-Eingabe zu erstellen, kopieren
wir diesen
Container DITH, fügen ihn erneut ein und ändern hier
Celsius in Fahrenheit Und hier. Und hier auch. Jetzt können Sie sehen, dass wir diese beiden Eingaben hier in
der oberen linken Ecke
des Browsers haben. Okay, jetzt gehe ich zu
meinem CSS, um sie zu stylen. Zuerst werde ich den Körper ins Visier nehmen. Und füge eine Hintergrundfarbe hinzu, diese coole orange Farbe. Darunter werde ich dann auf
das Wrapper-Div abzielen , das
die beiden Container enthält, und
seine Breite auf 450 Pixel einstellen Fügen Sie dann
Hintergrundfarbe, Weiß, Polsterung, 70 Pixel
von oben und unten und 40 Pixel von
links
und rechts Dann füge ich den Boxschatten hinzu, Null als horizontalen Versatz, 20 Pixel als vertikalen Versatz, 25 Pixel als Unschärfewert und diese halbtransparente Farbe Um
einige abgerundete Ecken zu erhalten, füge
ich dann einen
Randradius hinzu, also acht Pixel Jetzt wollen wir das
Wrapper-Div innerhalb des Körpers zentrieren. Also gehe ich hier hin und füge
Display-Flex hinzu, richte den Inhalt aus, zentriere ihn
horizontal, richte Objekte aus, zentriere ihn vertikal und erhöhe ihn mit 100 VH Und jetzt können Sie sehen, dass
das Wrapper-Div im
Körper zentriert ist Okay, jetzt wollen wir
die Divs mit der
Klasse Container ins Visier nehmen die Divs mit der
Klasse Und füge die Breite hinzu, 45%. Und jetzt können Sie sehen,
dass sie
45% des Wrapper-Divs ausmachen 45% des Wrapper-Divs Okay, lassen Sie uns jetzt auf die
Eingaben innerhalb der Container abzielen
und die Breite um 100% erhöhen Es wird also die gesamte
Breite des Containers einnehmen, was 45% des Rapper-Tauchgangs entspricht Dann Höhe, 50 Pixel, Randradius, fünf Pixel,
Rand, zwei Pixel, durchgehend, diese hellgraue
Farbe, dann Kontur, keiner, dann Abstand, Null
von oben und unten
und zehn Pixel von
links und rechts Und schließlich der obere Rand,
acht Pixel, um einen gewissen Abstand zwischen den
Eingaben und den Beschriftungen Und jetzt wollen wir
die beiden Container
nebeneinander in derselben Zeile positionieren . Und das können wir
mit Flexbox machen. Also werde ich hier in das
Wrapper-Div gehen und Display,
Flex und Justify
Content Space dazwischen hinzufügen , sodass die beiden Container
voneinander getrennt werden Und jetzt, wie Sie sehen
können, sehen alle, die beiden Eingaben
genau so aus, wie wir es wollen bleibt jedoch nur noch,
die Randfarbe der
Eingabe zu ändern , wenn Sie sich darauf konzentrieren Also werde ich hier „
Eingabe“ sagen und wenn ich mich darauf konzentriere, füge
ich die
Hintergrundfarbe hinzu, unsere orange Farbe Und wenn ich mich jetzt
auf die Eingaben konzentriere, können
Sie sehen, wie sich ihre
Randfarbe zu Orange ändert. Und das war's für alle,
für diese Lektion. Wir haben HTML
und CSS für dieses Projekt fertiggestellt
und werden in der nächsten Lektion lernen, wie
man es zum Laufen bringt. Also, sehen wir uns dort?
3. Hinzufügen von Funktionalität mit JavaScript: Okay, alle zusammen. Nachdem wir den HTML- und CSS-Code unserer
Temperaturkonverter-App haben,
werden wir
in dieser Lektion damit beginnen, ihr
mithilfe von JavaScript
Funktionen hinzuzufügen . Im Grunde
wollen wir also, wenn wir der Celsius-Eingabe einen bestimmten Wert hinzufügen,
diesen
Wert nehmen, etwas rechnen, ihn
in diesen
Wert nehmen, etwas rechnen, ihn Fahrenheit
umrechnen und ihn
dann in
der Fahrenheit-Eingabe anzeigen Und wenn wir
einen Fahrenheit-Wert eingeben, wollen
wir ihn in Celsius
umrechnen und ihn dann in
der Celsius-Eingabe anzeigen Zuallererst wollen wir also
die Gleichung, die
Celsius-Grad in
Fahrenheit-Grad umrechnet , und die
andere,
die umgekehrt von Fahrenheit-Grad in Celsius-Grad Und wie Sie hier sehen können, habe ich diese beiden
Gleichungen hinzugefügt Um also von
Celsius in Fahrenheit umzurechnen, werden
wir diese Gleichung verwenden Wir nehmen den Grad Celsius, multiplizieren ihn mit 9/5 und addieren
dann 32 zum Ergebnis Und wir werden diesen hier verwenden, um von
Fahrenheit in Celsius
umzurechnen Wir nehmen den Grad
Fahrenheit, subtrahieren
davon 32 und multiplizieren
ihn mit 5/9, um den Grad Celsius zu erhalten Unglaublich. Fangen wir jetzt an, an unserem Java-Skript zu
arbeiten. Zuallererst möchte ich die beiden Eingänge
auswählen. Also werde ich eine neue
Variable erstellen, sie Celsius nennen. Dann sage ich Dokument
Get Element by ID. Dann werde ich die Eingabe
mit der ID Celsius als Ziel markieren. Dann dupliziere ich das und
nenne die Variable Fahrenheit Und zielen Sie auf die Eingabe mit
der ID Fahrenheit ab. Dann sage ich
darunter Celsius füge Event Listener Und ich möchte, dass ihr hier,
alle,
ein bisschen über das Ereignis nachdenkt ,
das wir uns anhören sollten Bisher haben wir uns
nur mit
Klickereignissen auf
bestimmten Schaltflächen befasst , aber jetzt haben wir in unserem Beispiel keine
Schaltflächen. Wir wollen uns hier eigentlich
die Änderung des
Eingabewerts anhören . Jedes Mal, wenn wir den
Wert in dieser Eingabe ändern, wollen
wir das erkennen und JavaScript anweisen, als Reaktion darauf eine
Aktion zu ergreifen,
was natürlich darin besteht, den neuen Wert zu
nehmen
und ihn in Fahrenheit umzuwandeln, um ihn anzuzeigen Und wir werden gleich sehen,
wie das geht. Aber jetzt zurück zu dem
Ereignis, das wir
verwenden sollten , um
die Änderung in der Eingabe zu erkennen, und dieses Ereignis heißt
einfach Eingabe. Also werde ich hier Eingaben hinzufügen. Dann füge ich unsere
Callback-Funktion hinzu, die immer dann
ausgeführt werden soll, wenn sich der
Eingabewert ändert Lassen Sie uns vorerst einfach eine einfache Aktion
ausprobieren, damit wir verstehen, wie
das Eingabeereignis funktioniert Ich sage einfach Console Dot Log und ich werde den geänderten
Eingabewert ausdrucken. Dann gehe ich zur Konsole und beobachte,
was wir in der Konsole sehen Konsole und beobachte , wenn den Wert
der Celsius-Eingabe
ändern. Sie können jedes Mal, wenn
ich den Wert ändere, sehen dieser Satz hier gedruckt wird, und das
können Sie der Zahl auf der linken Seite entnehmen. In Ordnung. Lassen Sie uns jetzt diese Zeile entfernen. Und jetzt wollen wir jedes Mal, wenn wir einen
Wert in die Celsius-Eingabe eingeben, diesen Wert nehmen, ihn
mit 9/5 multiplizieren und dann 32 zum Ergebnis hinzufügen Also werde ich hierher gehen und
Celsius-Punktwert sagen , um den
Wert innerhalb
der Celsius-Eingabe Dann mal 9/5 plus 32. Auf diese Weise wird es
in Fahrenheit umgewandelt. Jetzt ist es an der Zeit,
es in der Fahrenheit-Eingabe anzuzeigen. Wir können das tun, indem wir sagen, dass Fahrenheit-Punktwert all dem
entspricht Und wenn ich jetzt versuche, einen Celsius-Wert
hinzuzufügen, können
Sie sehen, dass er in Fahrenheit umgewandelt
und Und jedes Mal, wenn wir
den Celsius-Wert ändern, wird
auch
der Fahrenheit-Wert aktualisiert Versuchen wir, hier negative
12 als Celsius-Wert hinzuzufügen. Sie können sehen, dass wir zehn haben und all diese Zahlen
rechts vom Komma stehen. Aber das
sieht überhaupt nicht nett aus. Stattdessen möchten wir
nur zwei Zahlen nach
dem Dezimalpunkt anzeigen , und das können wir mit
der Methode Two Fixed tun. Ich werde hier zwei feste Zahlen
hinzufügen, und das gilt nicht für die Anzahl der Ziffern, die wir hinzufügen möchten Also werde ich zwei hinzufügen. Und jetzt, wenn ich zurückgehe und es erneut mit minus 12
versuche, können
Sie sehen, dass jetzt 10,40
angezeigt und alle anderen
Ziffern gelöscht wurden Unglaublich, Leute.
Lass uns jetzt etwas anderes versuchen. Lassen Sie uns
diesen Wert einfach hier entfernen. Sie können sehen, dass wir 32
auf der Fahrenheit-Seite haben, obwohl wir auf der Celsius-Seite keinen
Wert Und 32
entspricht hier tatsächlich 0 Grad Celsius. Wenn ich hier also Null hinzufüge, kannst
du sehen, dass es sich nicht ändert. Wenn nun die
Celsius-Eingabe leer ist, möchten
wir, dass auch Fahrenheit
leer ist, und das können wir in Javascript ganz
einfach tun Ich werde hier hingehen und sagen, ich habe Ausrufezeichen in
Celsius als Punktwert. Und dieses
Ausrufezeichen bedeutet einfach nicht. Also leugnet es, was auch immer danach
kommt. Dieser Code bedeutet also im Grunde, dass, wenn es keinen Wert für
die Celsius-Eingabe gibt, dies passiert, wenn sie leer ist Okay, darin
fügen wir den Fahrenheit-Punktwert hinzu und setzen ihn
auf leere Zeichenketten Und wenn ich jetzt zurückgehe und einen beliebigen Wert
ausprobiere und ihn
dann entferne, können Sie sehen, dass der
Fahrenheit-Wert ebenfalls Und damit, alle zusammen, haben
wir die erste
Hälfte des Projekts abgeschlossen Die gute Nachricht ist, dass es in der zweiten Hälfte
nichts Neues gibt. Wir können den Code einfach kopieren. Füge ihn hier ein und fange
an, einige Dinge zu optimieren. Ich werde
hier Celsius auf Fahrenheit umstellen. Ich werde es auch hier ändern. Dann entferne diese Formel und füge die Formel zur
Umrechnung von Fahrenheit in Celsius hinzu. Ich werde den
Fahrenheit-Wert -32 mal 5/9 hinzufügen. Dann füge ich zwei
feste hinzu, zwei ebenfalls. Ich werde hier auch
Celsius in
Fahrenheit und Fahrenheit
hier in Celsius ändern Fahrenheit und Fahrenheit
hier Wenn die Fahrenheit also keinen Wert
hat, ist auch die Celsius-Eingabe
leer Und jetzt, wenn ich einen
beliebigen Wert zur
Fahrenheit-Eingabe hinzufüge , können
Sie sehen, dass er in Celsius umgewandelt und hier
in der Celsius-Eingabe angezeigt wird Und damit, Leute, ist
unsere App fertig, aber ich möchte hier noch eine
Kleinigkeit hinzufügen Beim Laden der Seite möchten wir, dass der Schwerpunkt auf der Celsius-Eingabe
liegt. Also gehe ich hierher und sage
Window Dot Add Event Listener. Laden. Dieses Ereignis wird also ausgelöst
, wenn die Seite neu geladen wird Dann füge ich eine
Callback-Funktion hinzu. Und darin werde ich Celsius-Punktfokus
sagen. Und jetzt können Sie jedes
Mal, wenn ich die Seite neu lade, sehen, die Celsius-Eingabe fokussiert
ist. Und das ist es Für den Unterricht, alle zusammen. Ich hoffe Ihnen gefällt dieses Projekt und Sie können
etwas daraus lernen , das Sie in Zukunft in
allen Projekten verwenden können
. Und ich werde dich
im nächsten sehen.
Ahmed Sadek, full stack web developer, freelancer & t
