Währungsrechner in JavaScript – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Währungsrechner in JavaScript Fri, 15 Nov 19 00:14:34 Z https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760091#m1760091 https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760091#m1760091 <p>Hallo, ich bin neu hier und habe sehr sehr rudimentäre Kenntnisse im Programmieren.</p> <p>Kurz zu meinem Problem. In eimem Unikurs namens Computerlinguistik werden Basics ind HTML und JavaScript vermittelt. Aufgabe ist es einen kleinen Währungsrechner zu programmieren von Euro nach Dollar bzw. Dollar nach Euro.</p> <p>Ich habe einige Beispiele gefunden, will sie aber a) nicht einfach kopieren und b) benutzen sie Funktionen/Elemente, die ich nicht kenne und bisher nicht verstehe.</p> <p>Ich bekomme bisher nur dieses einfache Programm hin.</p> <pre><code class="block">// Währungsrechner Dollar in Euro / Euro in Dollar const wechselEuroDollar = 1.1020 const wechselDollarEuro = 0.9091 //let eingabe // brauche ich die Variable? //macht es einen Unterschied, ob nur "eingabe" oder eingabe = ""? eingabe = prompt("Bitte Betrag eingeben"); alert(eingabe * wechselEuroDollar);` </code></pre> <p>Das Problem ist erstens, dass es nur Euro in Dollar umwandelt und nicht umgekehrt. Außerdem verschwindet das Fenster, wenn man Buchstaben eingibt und es erscheint nicht erneut. Ich habe schon mit if-else bzw. switch probiert, am Anfang eine Vorauswahl zu treffen:</p> <pre><code class="block">eingabe = prompt("Für die Umwandlung von Euro in Dollar bitte \"Euro" eingeben, für Dollar in Euro \"Dollar" ".); switch (eingabe) {case "Euro" : prompt("Euro in Dollar");break; case "Dollar" : prompt("Dollar in Euro"); break; default : prompt("Dollar oder Euro eingeben"); break; } </code></pre> <p>Das Problem hierbei ist, dass ich danach keine Werte eingeben kann bzw. keine mathematische Operation durchführen kann. Ich kann auch keine zweite if-else-Bedingung benutzen.</p> <p>Im prinzp Stelle ich mir das Programm so vor: Es kommt ein Begrüßungstext, indem gefragt ob in welche Richtung gewechselt werden soll. Nach eingabe vom Wort "Euro" oder "Dollar" soll dann der Betrag eingeben werden und das Ergebnis erscheinen. Falls man sofort eine Zahl eingibt, sollte eine Meldung kommen, dass man zuerst Euro oder Dollar eingeben soll.</p> <p>Meine Frage ist eigentlich, ob meine Vorstellung mit den wenigen Befehlen, die ich kenne (if-else, switch, Variablen erzeugen) realisierbar ist oder es nur mit anderen funktioniert. Vielleicht stelle ich mich auch einfach nur richtig blöd an :)</p> <p>Viele Grüße und Entschuldigung, falls mein erster Eintrag mit dem Code noch etwas seltsam aussieht.</p> Währungsrechner in JavaScript Fri, 15 Nov 19 00:48:03 Z https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760092#m1760092 https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760092#m1760092 <p>Liebe(r) nerdpolitics,</p> <p>folge dem Prinzip EVA. Da ist zuerst die Eingabe, dann die Verarbeitung und zum Schluss die Ausgabe. Diese Reihenfolge ist immer gleich. Niemals anders herum. Das bedeutet für Dich, dass Dein Programm zuerst eine Eingabe verlangt, um dann nach der Berechnung das Ergebnis auszugeben.</p> <p><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Eigene_modale_Dialogfenster#Historische_Altlasten" rel="nofollow noopener noreferrer">Die Benutzung von <code>alert</code>, <code>prompt</code> und Konsorten ist keine gute Idee.</a> Du möchtest stattdessen <a href="https://wiki.selfhtml.org/wiki/HTML/Formulare" rel="nofollow noopener noreferrer">ein Formular</a> mit <a href="https://wiki.selfhtml.org/wiki/HTML/Formulare/input/number#type_.3D_.22number.22" rel="nofollow noopener noreferrer">zwei Eingabefeldern</a> und <a href="https://wiki.selfhtml.org/wiki/HTML/Formulare/button" rel="nofollow noopener noreferrer">einem Button</a>:</p> <p>€______ [=] $______</p> <p>In diesem Formular kann man entweder den Euro-Wert, oder den Dollar-Wert eintragen. Der Button mit dem Istgleichzeichen löst dann die Berechnung des passenden Gegenwerts aus. Das leere Feld wird als Ausgabe, das ausgefüllte Feld als Eingabe verstanden. Sind beide Felder ausgefüllt, wird das erste als Eingabe verstanden.</p> <p>Du benötigst also drei Dinge:</p> <ol> <li>Formular mit den passenden Formular-Elementen</li> <li>einen Weg um die Formularelemente auszuwerten (<a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener#Anwendungsbeispiel" rel="nofollow noopener noreferrer">Button-Klick</a>, Feldinhalte <a href="https://wiki.selfhtml.org/wiki/HTML/Formulare/Ergebnisausgabe#Ausgabe_der_Werte_eines_Schiebereglers" rel="nofollow noopener noreferrer">lesen/schreiben</a>)</li> <li>die Funktion zum Berechnen (hast Du schon)</li> </ol> <p>Liebe Grüße</p> <p>Felix Riesterer</p> Währungsrechner in JavaScript Fri, 15 Nov 19 07:34:47 Z https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760098#m1760098 https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760098#m1760098 <p>Hallo nerdpolitics,</p> <p>ein <form> Element, wie Felix schrieb, kann man nutzen, braucht es aber hauptsächlich dann wenn man einen Webserver hat der die Daten verarbeitet. Den hast du nicht, oder in deiner Liste von Webtechnologien stünde auch PHP oder ähnliches.</p> <p>Um in JavaScript sauber mit einem Form zu interagieren muss man einiges tun, das wird dich überfordern.</p> <p>Ich wundere mich ohnehin das ihr als Einsteiger keinen Leitfaden bekommen habt, wie ihr vorgehen sollt.</p> <p>Du brauchst auf jeden Fall HTML mit Script darin. Nur mit JavaScript ist das Unsinn.</p> <p>Mein Vorschlag für blutige Anfänger wäre, zwei <input type="number"> und zwei <button> Elemente zu verwenden (garniert mit dem üblichen drumherum wie z.B. Beschriftungen). Ein Input für Euro, eins für Dollar. Ein Button rechnet den Inhalt des Euro Elements in Dollar um und speichert das Ergebnis im Dollar Element, der andere umgekehrt.</p> <p>Die Input Elemente bekommen noch id Attribute, damit du sie finden kannst, und bei den Buttons reagierst du mit JavaScript auf das click Event. Da holst du dir den Wert aus dem einen Input, rechnest den value um, rundest und speichert das Ergebnis im anderen Input.</p> <p>Wenn du jetzt komplett abgehängt bist, dann</p> <ul> <li>ist die Aufgabe anders gemeint als du sie darstellst und ich bin auf dem falschen Weg</li> <li>verlangt der Prof mehr als er euch beigebracht hat</li> <li>hast du einiges von dem, was ihr können solltet, versäumt</li> </ul> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Währungsrechner in JavaScript Fri, 15 Nov 19 07:21:15 Z https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760097#m1760097 https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760097#m1760097 <p>@@Felix Riesterer</p> <blockquote> <p>Du möchtest stattdessen ein Formular mit zwei Eingabefeldern und einem Button:</p> <p>€______ [=] $______</p> </blockquote> <p><em>Ein</em> Button?</p> <p>Ich will 8 Euro in Dollar umrechnen, trage im linken Eingabefeld 8 ein und drücke auf [=]. Im rechten Feld steht dann 8.82, so weit so gut.</p> <p>Dann will ich 15 Dollar in Euro umrechnen, trage im rechten Eingabefeld 15 ein. Im linken steht noch die 8. Was soll denn nun beim Drücken auf [=] passieren?</p> <p>Man bräuchte wohl <em>zwei</em> Buttons: einen für Euro in Dollar und einen für Dollar in Euro.</p> <p>Braucht man aber nicht.</p> <p><em lang="en">“Design isn’t crafting a beautiful, textured button. It’s figuring out if there’s a way to get rid of the button altogether.”</em> —Edward Tufte</p> <p>Wenn man bei der Eingabe in ein Eingabefeld das jeweils andere gleich automatisch aktualisiert, braucht man <em>gar keinen</em> Button.</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/dyyQbKz" rel="noopener noreferrer">Codepen</a>: aufs <code>input</code>-Event gelauscht – nicht bei jedem Eingabefeld, sondern beim Widget (<em lang="en">event delegation</em>), und im Eventhandler abgefragt, welches Eingabefeld denn nun der Auslöser war.</p> <p>Die Umrechnungskurse hab ich in einem Objekt zusammengefasst.</p> <p>Ansonsten ist noch <code>aria-live="polite"</code> zu erwähnen, damit das Ergebnis auch vom Screenreader angesagt wird. (Funktioniert im VoiceOver noch nicht ganz zufriedenstellend, der ist da etwas zu geschwätzig. <a href="https://accessibility-club.org/event/accessibility-club-summit-2019" rel="nofollow noopener noreferrer">Morgen</a> sollte sich eine Gelegenheit bieten, jemanden zu fragen, der sich damit auskennt.)</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> Währungsrechner in JavaScript Sat, 16 Nov 19 09:17:03 Z https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760141#m1760141 https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760141#m1760141 <p>Lieber Gunnar,</p> <blockquote> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/dyyQbKz" rel="noopener noreferrer">Codepen</a>: aufs <code>input</code>-Event gelauscht – nicht bei jedem Eingabefeld, sondern beim Widget (<em lang="en">event delegation</em>), und im Eventhandler abgefragt, welches Eingabefeld denn nun der Auslöser war.</p> </blockquote> <p>ist das mit IEs nicht <a href="https://caniuse.com/#search=input%20event" rel="noopener noreferrer">problematisch</a>? Zumindest <a href="https://wiki.selfhtml.org/wiki/HTML/Formulare/Ergebnisausgabe#Ausgabe_eines_Stundenzettels" rel="nofollow noopener noreferrer">stand da etwas im Wiki dazu</a>.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> Währungsrechner in JavaScript Sat, 16 Nov 19 09:31:51 Z https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760147#m1760147 https://forum.selfhtml.org/self/2019/nov/15/wahrungsrechner-in-javascript/1760147#m1760147 <p>Servus!</p> <blockquote> <p>Lieber Gunnar,</p> <blockquote> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/dyyQbKz" rel="noopener noreferrer">Codepen</a>: aufs <code>input</code>-Event gelauscht</p> </blockquote> <p>ist das mit IEs nicht <a href="https://caniuse.com/#search=input%20event" rel="noopener noreferrer">problematisch</a>?</p> </blockquote> <p>Das Wiki-Beispiel funzt net im IE11.</p> <p>Wollte Gunnars Beispiel ausprobieren - Codepen öffnet sich im IE11 nur mit Warnhinweis, dass es keine Legacy-Browser unterstützt.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> 25 Jahre SELFHTML → <strong><a href="https://forum.selfhtml.org/events/4" rel="noopener noreferrer">SELF-Treffen 05.-07. Juni 2020</a></strong> in <strong>Mannheim</strong> </div>