Taschenrechner programmieren mit JavaScript | Tutorial Deutsch

In diesem Video lernst du, wie du mit JavaScript eine Taschenrechner-App entwickelst.
Apps lassen sich ebenfalls mit JavaScript entwickeln. Der Vorteil hier ist, dass du sie direkt als Progressive Web App (PWA) veröffentlichen kannst.

00:00 | Was wir machen werden
01:11 | Installation
02:23 | Projekt anlegen
03:18 | UI mit HTML und CSS
35:57 | Logik mit JavaScript
57:16 | App veröffentlichen

Partnerunternehmen bieten wir direkten und nachhaltigen Zugang zu unseren hochqualifizierten Absolventen.

_____ Über diesen Kanal ____
Die Developer Akademie bildet dich zum Programmierer weiter. Auch wenn du noch NIE eine Zeile Code geschrieben hast, ist es möglich in 3 - 6 Monaten einen gut bezahlten Job zu finden. Dafür musst du NICHT nur programmieren mit Online-Tutorials lernen, sondern einen guten LEBENSLAUF mit vielen verschiedenen Projekten vorweisen. In unserem Programm hast du ständigen Kontakt zu unseren Coaches, Hausaufgaben, Abgabefristen und Projekte aus der Praxis für deinen Lebenslauf.
Am Ende erstellen wir mit dir einen perfekten Lebenslauf und unterstützen dich bei deiner Bewerbung.

[wp]

Wenn ich mir ein Tutorial wünschen würde, müsste es genau so sein. Absolut 100% Information, kein Abschweifen, angenehm präsentiert. Weiter so.

[Monkey--business]

Sicherlich ein sehr lehrreiches und instruktives Video, um Anfängern die Grundkenntnisse näherzubringen. Leichtverständlich erklärt und logisch aufgebaut. Wenn man den Taschenrechner dann allerdings benutzen möchte, stellt man fest, dass er im Grunde (fast) nicht zu gebrauchen ist. Daher folgender Vorschlag von mir:
Macht doch bitte einen *zweiten Teil über das Taschenrechner-Projekt, * in welchem Ihr quasi als Fortsetzung auf das Erweitern und Debuggen eines Projektes eingeht. Die Funktionsweise eines "normalen" Taschenrechners ist für jedermann nachvollziehbar. Darum ist ein solches Projekt als Tutorial regelrecht prädistiniert. Ich habe den Taschenrechner bereits dahingehend weiterentwickelt. (Quelltext liegt vor.) Ein eventueller zweiter Teil sollte demnach folgende Punkte berücksichtigen:

*Hinzufügen folgender Funktionen:*
- AC-Taste zum Löschen der gesamten Eingabe und Operationen (Reset)
- Negationstaste zur Umkehr des Vorzeichens
- Quadratwurzel
- Quadratzahl
- Prozent-Taste
- Reziprok
- PI-Taste
- dazu Erweitern der Tabelle (Tastenblock)

*Beheben folgender Bugs bzw. Problemstellungen:*
- das Display soll als Ausgangszustand '0' anzeigen und nicht leer sein
- diese Null darf auch nicht durch Drücken von 'DEL' gelöscht werden
- keine Doppeleingabe des Dezimalzeichens erlauben! (jedoch bei MEHREREN Operanden! z. B.: 0.33 x 0.33)
- keine Doppeleingabe einer führenden Null erlauben!
- keine Negation einer einzelnen Null erlauben, Dezimalbrüche mit Null aber schon!
- korrekte Anzeige des Ergebnisses, sprich runden (6.6 x 6 = 39.6 und nicht
- Ändern der mathematischen Operator, wenn zuvor ein anderer Operator eingegeben wurde
also: keine Eingaben wie '9 * / + 3' erlauben!
- NACH Abschluss einer Berechnung KEINE weiteren Zahlen und Dezimalzeichen,
ABER weitere mathematische Operationen zulassen!
- Abfangen von Fehlern wie Division durch Null, negative Quadratwurzel und Überlauf!
(Sonderfall Reziprok von Null beachten!)


*Erweitern der Funktionalität / Zusatz-Features:*
- die Operationen Quadratwurzel, Quadratzahl, Prozent und Reziprok werden sofort ausgeführt
- die Null-Taste soll als Doppeltaste ausgeführt werden
- Ausgabe des Ergebnisses auf 10(?) Nachkommastellen begrenzen
- BONUS: Memoryfunktion mit 5 zusätzlichen Tasten (Erweitern der Tabelle)

[neuaction]

wenn man Programmierer werden möchte muss Yunus seine videos definitiv anschauen. Js Function konnte ich bis heute Abend nicht verstehen, danke dir Yunus jetzt kann ich besser.
In einer Stunde hast du mich ausgebildet :)

[drodo]

Vielen Dank für das super Tutorial! Ich bin in meinen ersten Tagen der Programmierung und dein Video hat mir sehr viel beigebracht! Ich hab am Ende noch klammern und eine C taste hinzugefügt als "selbst Test". Einfach wunderschön mit anzusehen wie ein paar Zeilen etwas zum Leben erweckt :)

[f.b.]

So ein verständliches und vor allem praxisnahes Tutorial hab ich kein zweites Mal finden können! Ich glaube viel besser kann man Anwendungsmöglichkeiten der drei "Programmiersprachen" nicht vermitteln, vielen Dank dafür :))

[nuveon]

Wahnsinn, was Du hier für die Leute an Wissen vermittelst lieber Junus! Daumen hoch!

[ali_tudresden]

Großartiges Tutorial, super erklärt und schickes Ergebnis. Man lernt viel besser, wenn man einen konkreten und realistischen Task verfolgt, als wenn man alle tausend js-Funktionen nacheinander vorgeführt bekommt. Hat mir extrem viel gebracht, danke!

[TOE-xvkh]

für mich war das damals zu unverständlich und zu schnell. mir wurde nur gezeigt wie man programme und spiele startet, von meinen brüdern. bis ich endlich später von mir aus das programmieren lernen wollte. du bist echt klasse und nimmst jeden sehr nachvollziehbar und verständlich mit. DANKE

[greekstraycats]

Ich komme ja aus der Hardware/C/Assembler-Ecke und hab mich die letzten 30 Jahre hartnäckig geweigert HTML anzufassen.. Aber jetzt hast Du es doch bald geschafft, dass ich mich da mal mehr mit beschäftige.
Ich mag Deine Tutorials. Ist immer was interessantes dabei - auch für alte Hasen. Unwahrscheinliche vielseitig.
Hehe - den "Eval" kenne ich als "never use it".. Aber ich denke das war eines der wenigen Beispiel wo man den wirklich benutzen darf.

[MultiMichael]

Vielen Dank für dieses fantastische Video. Unterhaltsam, lehrreich, kurzweilig. Da wünscht man sich mehr! Wirklich tolle Arbeit!

[PuReConfuSiOn]

Ich muss hier wirklich mal was loswerden. Vielen, vielen Dank für die zahlreichen Lernvideos! Ich finde es allerdings sehr schade, das ihr so wenig Aufmerksamkeit bekommt. Der Kanal hat viel mehr verdient!
Super erklärt, sogar für mich verständlich, und das will schon was heißen. Ich versuche mit den Videos programmieren zu lernen und hoffe das ich ( mit deiner Hilfe) bald auch alleine zurecht komme.
Nochmal ein Riesen Lob!

[erikkummer]

Super Tutorial! Mein erstes richtiges Projekt, basierend darauf konnte ich Grundkenntnisse in JS aufbauen. Danke!

[lobosaka]

Total gutes Video! Habe jetzt alles mal nachgemacht als Übung und Einstieg in die Welt des Programmierens und um zu sehen ob mir das alles Spaß macht. Konnte alleine dadurch schon viel Lernen und es war super motivierend als Anfänger gleich am Anfang ein fertiges Projekt erstellt zu haben. Möchte unbedingt mehr Lernen und bin sehr froh, dass mir das so viel Freude bereitet hat. Danke dir! :)

[debugeditz]

Danke, dir das du dir so viel Zeit und Lust nimmst deine Videos zu drehen, es macht echt spaß sie anzuschauen.
Mein Respekt!

[michaelrienitz]

Perfekte Didaktik. Junus und Manu stellen das Lernen auf den Kopf... Endlich.

[woffa]

SUPER Einführung in die Webprogrammierung, werde ich meinen Enkeln empfehlen!

[derlauch]

Du erklärst das so super und langsam dass man gut mitkommt. Wirklich spitze! Freue mich schon auf deine anderen Videos....

[wildehilde]

Hammer Arbeit, mir hat das ganze extrem viel Spaß gemacht, habe am ende noch einen "CE" Button hinzugefügt, mit einer Funktion .slice (0, -100), sodass man die gesamte Eingabe löschen kann :-) Hab es erst mit dem Befehl die Seite neu zu laden versucht, da hat mich aber das "undefined" gestört, dass man für den Bruchteil einer Sekunde gesehen hat.

[mrmineguy]

Bester Mann jetzt kann ich einfach meine eigene Apps machen 😀

[Candy-Berry]

Optimal und super gemach! Bin selbst ein Dozent in der Erwachsenenbildung. Genauso muss das :)