Taschenrechner tastaturbedienbar
Henry
- html
- javascript
0 Rolf B0 Rolf B1 Rolf B
0 Felix Riesterer
Hallo,
ich arbeite gerade an einer Taschenrechnerfunktionalität. Dabei fand ich auch das Beispiel hier im Wiki, welches leider nicht zahlentastaturbedienbar ist. Meine Version kann das zwar weil ich ein Inputfeld nutze, nur habe ich noch nicht den richtigen Lösungsansatz das Ergebnis per Entertaste ausgeben zu lassen. Accesskey scheint da auch keine Option zu sein und keypress auch nicht wirklich, hättet ihr eine Idee?
Gruss
Henry
Hallo Henry,
Der Wiki-Taschenrechner macht sich die meiste Arbeit damit, eine "lesbare" Anzeige zu präsentieren und Schaden vor eval() fernzuhalten...
Rolf
Lieber Rolf,
nettes Feature! Aber warum nicht gleich auch noch das Ergebnis in Klammern dahinter notieren?
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
nettes Feature! Aber warum nicht gleich auch noch das Ergebnis in Klammern dahinter notieren?
Das bleibt als einfache Übung dem Leser überlassen.
Rolf
Lieber Henry,
Dabei fand ich auch das Beispiel hier im Wiki, welches leider nicht zahlentastaturbedienbar ist.
also gut, ich habe das Tutorial um eine Tastatureingabe erweitert. Über die Bedienung der Sonderfunktionen wie Wurzel, Quadrat und natürlichem Logaritmus bin ich mir noch nicht im Klaren. Welche Tasten sollten diese Funktionalitäten auslösen? x²
mittels X
und ln
mittels L
? OK, aber was ist mit √
? Soll diese über W
wie Wurzel, oder über S
wie Square-root ausgelöst werden?
Liebe Grüße,
Felix Riesterer.
Hallo Felix Riesterer,
also gut, ich habe das Tutorial um eine Tastatureingabe erweitert.
Prima.
Über die Bedienung der Sonderfunktionen wie Wurzel, Quadrat und natürlichem Logaritmus bin ich mir noch nicht im Klaren. Welche Tasten sollten diese Funktionalitäten auslösen?
x²
mittelsX
undln
mittelsL
? OK, aber was ist mit√
? Soll diese überW
wie Wurzel, oder überS
wie Square-root ausgelöst werden?
L
- Logarithmus (logarithm)
S
- Quadrat (square)
R
- Wurzel (root)
Dann müsste man imho auch noch einen Hinweis auf die richtige Taste unterbringen. Vielleicht im title-Attribut für sehende Maussschubser?
<button title="natürlicher Logarithmus [L]">ln<button>
und in geeigneter Weise für alle anderen?
Bis demnächst
Matthias
Hallo Matthias,
warum nicht
<button title="natürlicher Logarithmus">ln [L]<button>
Gruß
Jürgen
Lieber JürgenB,
<button title="natürlicher Logarithmus">ln [L]<button>
damit würde dieser Button zu breit. Oder man macht dann alle Buttons breiter. Und dann passt es wieder nicht aufs Smartphone.
Nö, ich bin für eine eigene Legende.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
Infos zur Tastaturbedienung im Title halte ich für wenig sinnvoll, und Tastaturbedienung auf dem Smartphone auch nicht.
Gruß
Jürgen
Lieber JürgenB,
Infos zur Tastaturbedienung im Title halte ich für wenig sinnvoll, und Tastaturbedienung auf dem Smartphone auch nicht.
auf dem Smartphone hast Du die Buttons, die Du eben wie ein Mausschubser "klickst". Das passt schon. Die Legende kann man bei schmalen Viewports unterhalb anstatt nebenstehend positionieren. Dann sehen die Smartphone-Nutzer diese nur, wenn sie das wollen.
Du hast völlig recht wenn Du meinst, dass die Tastaturbedienung für Touchgeräte keine Relevanz hat. Daher möchte ich die Bedienungshinweise auch nicht im "GUI" des Taschenrechners selbst enthalten haben, sondern gesondert.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
wie wäre es, die Tastaturhinweise zu verstecken, wenn der Viewport zu klein ist?
Gruß
Jürgen
Lieber Matthias,
L
- Logarithmus (logarithm)
S
- Quadrat (square)
R
- Wurzel (root)
und wenn man dann noch sin
, cos
und tan
hinzufügen möchte? Dann wäre S
doppeldeutig...
Die Hinweise auf die Tasten kommen in einen gesonderten Abschnitt im HTML - außerhalb des Taschenrechners:
<h2>Hinweise zur Bedienung rein mit der Tastatur:</h2>
<dl>
<dt><strong>√</strong> (Wurzel)</dt>
<dd><strong>R</strong> (root - Englisch für Wurzel)</dd>
<dt><strong>x²</strong> (Quadrat)</dt>
<dd><strong>S</strong> (square - Englisch für Quadrat)</dd>
<dt><strong>ln</strong> (natürlicher Logarithmus)</dt>
<dd><strong>L</strong> (logarithm - Englisch für Logarithmus)</dd>
<dt><strong>C</strong> (zurücksetzen auf Null)</dt>
<dd><strong>Entf</strong> oder <strong>Backspace</strong></dd>
</dl>
Liebe Grüße,
Felix Riesterer.
Hallo Ingrid,
und wenn man dann noch
sin
,cos
undtan
hinzufügen möchte? Dann wäreS
doppeldeutig...
es wird von meiner Seite aus schlicht keine solche Erweiterung geben, daher habe ich jetzt alles wie besprochen umgesetzt.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
daher habe ich jetzt alles wie besprochen umgesetzt.
sieht erst mal gut aus. Habe nur noch nicht raus gefunden warum es im IE nicht klappt. Danke an alle.
Gruss
Henry
Hallo Henry,
Habe nur noch nicht raus gefunden warum es im IE nicht klappt.
Interessant. Der Taschenrechner arbeitet im IE11 tatsächlich nicht. Eine Fehlermeldung sehe ich in der Konsole nicht.
Lediglich: DOM7011: Der Code auf dieser Seite hat die Zwischenspeicherung für das Vor- und Zurücknavigieren deaktiviert. Weitere Informationen dazu finden Sie unter: http://go.microsoft.com/fwlink/?LinkID=291337 Beispiel:JS_Taschenrechner.html
und: HTML1300: Navigation wurde ausgeführt. Beispiel:JS_Taschenrechner.html
Bis demnächst
Matthias
Lieber Henry,
Habe nur noch nicht raus gefunden warum es im IE nicht klappt.
den unterstütze ich nicht mehr. Edge ist nun der Browser von M$, demnächst als sozusagen Chromium rebranded.
Liebe Grüße,
Felix Riesterer.
Hallo Felix Riesterer,
den unterstütze ich nicht mehr.
Könntest du für das Wiki eine Ausnahme machen oder zumindest herausfinden, warum es nicht funktioniert?
Edge ist nun der Browser von M$, demnächst als sozusagen Chromium rebranded.
Laut CanIUse wird der IE11 mehr genutzt als alle Edge-Versionen zusammen.
Bis demnächst
Matthias
Lieber Matthias,
Könntest du für das Wiki eine Ausnahme machen oder zumindest herausfinden, warum es nicht funktioniert?
der IE läuft auf meinem Linux nicht. Und unter meinem alten Win7 läuft eventuell nicht der IE, der unter einem aktuellen Windoof läuft.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
würde mich wundern, wenn der IE11 unter Win7 ein anderer wäre als der unter Win10.
Rolf
Lieber Rolf,
würde mich wundern, wenn der IE11 unter Win7 ein anderer wäre als der unter Win10.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
ok, da sind ein paar Unterschiede in der Einbindung. Das ist aber nicht der Browserkern. Die Rendering-Engine und der JS Interpreter sollten das gleiche tun
Rolf
Lieber Rolf,
Die Rendering-Engine und der JS Interpreter sollten das gleiche tun
Du gehst immer noch davon aus, dass auf meinem Win7 der IE11 läuft? Ich nutze den IE nie! Warum hätte ich den also je upgraden sollen? Wenn überhaupt Windoof, dann mit einem FF...
Liebe Grüße,
Felix Riesterer.
Hallo,
ich habe mir das gerade mal im IE11 angesehen: Das Problem ist das nicht unterstützte array.from
.
Gruß
Jürgen
Hallo JürgenB,
ich habe mir das gerade mal im IE11 angesehen:
Danke.
Das Problem ist das nicht unterstützte
array.from
.
Lohnt der Polyfill oder gibt es eine einfachere Variante?
Bis demnächst
Matthias
Hallo Matthias
Das Problem ist das nicht unterstützte
array.from
.Lohnt der Polyfill oder gibt es eine einfachere Variante?
Soweit ich sehe, wird Array.from()
nur an einer Stelle verwendet:
Array.from(document.querySelectorAll("#calc button")).forEach( // ...
Da hier kein Rückgabewert gespeichert, sondern nur Array.prototype.forEach()
aufgerufen wird, besteht überhaupt kein Anlass, die als Argument übergebene NodeList in ein Array zu konvertieren.
Man könnte die Methode auch einfach im Kontext der NodeList aufrufen:
Array.prototype.forEach.call(NodeList, callback)
Andererseits besitzt das NodeList–Interface selbst eine Methode forEach()
. Die vom Internet Explorer natürlich ebenfalls nicht unterstützt wird.
Diese Methode sollte im vorliegenden Fall eigentlich verwendet werden und ein Polyfill hierfür ist schnell geschrieben:
if (!NodeList.prototype.forEach) NodeList.prototype.forEach = Array.prototype.forEach;
Dann kann die Zeile oben direkt so geschrieben werden:
document.querySelectorAll("#calc button").forEach( // ...
Edit: Ich sehe gerade, dass Array.from()
nicht das einzige Problem ist, wenn Internet Explorer unterstützt werden soll. In dem Programm wird außerdem an mehreren Stellen die Methode Array.prototype.includes()
verwendet, die für den IE ebenfalls zu neu ist.
Zu dieser Arraymethode habe ich vor einiger Zeit mal einen recht ausführlichen Artikel für’s Wiki geschrieben: Array.prototype.includes
Dort findet sich auch ein Beispiel für ein Polyfill. Habe es jetzt nicht nochmal getestet, aber das sollte funktionieren:
if (!Array.prototype.includes) {
Array.prototype.includes = function includes(searchElement) {
if (this == null) {
throw new TypeError('this is null or undefined');
}
var object = Object(this),
length = object.length >>> 0;
if (length === 0) {
return false;
}
var start = arguments[1] >> 0,
key = start < 0 ? Math.max(start + length, 0) : start,
currentElement;
while (key < length) {
currentElement = object[key];
if (searchElement === currentElement
|| (searchElement !== searchElement
&& currentElement !== currentElement)) {
return true
}
key ++;
}
return false;
};
}
Viele Grüße,
Orlok
Lieber Orlok,
Das Problem ist das nicht unterstützte
array.from
.
ach ja, diese lästige Sache mit den aktuellen Dingen, die der IE nicht unterstützt.
Lohnt der Polyfill oder gibt es eine einfachere Variante?
Es geht bestimmt viel kürzer mit Array.prototype.slice.call()
.
Liebe Grüße,
Felix Riesterer.
Lieber Matthias,
Laut CanIUse wird der IE11 mehr genutzt als alle Edge-Versionen zusammen.
da ihr alle so lieb wart und mir gleich mit Array.from()
den Schuldigen auf dem Silbertablett präsentiert habt, war ich natürlich unter Zugzwang und habe sowohl das Beispiel, als auch das Tutorial entsprechend verbessert.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
leider wird mit
// initialize only if <output> is found and browser supports Array.from()
if (out && typeof Array.from == "function") {
der IE immer noch ausgesperrt.
Gruß
Jürgen
Lieber JürgenB,
// initialize only if <output> is found and browser supports Array.from() if (out && typeof Array.from == "function") {
da habe ich wohl zu schnell geschossen. Danke für den Hinweis. Nun sollte es klappen.
Liebe Grüße,
Felix Riesterer.
Hallo,
includes
ist auch noch drin. Ich habe gerade mal Orloks Polyfill eingebaut, aber danach ging es immer noch nicht, auch keine Fehlermeldung. Da scheint noch mehr im Argen zu liegen. Vielleicht wäre eine kurze Meldung "Der IE wird nicht unterstützt!" doch besser.
Gruß
Jürgen
Lieber JürgenB,
Vielleicht wäre eine kurze Meldung "Der IE wird nicht unterstützt!" doch besser.
ich schrubte bereits, dass ich ihn nicht unterstütze. Und die Sache mit Array.from()
habe ich ausgebügelt. Wenn es jetzt noch an Array.includes()
hängt, dann werde ich wieder bockig und sage: "Der IE kann mich mal. Es gibt auch Browser! Wer keinen will, installiert sich halt keinen. Ist ja nicht so, dass man dafür irgend ein Geld ausgeben müsste."
Ich sehe meine Bockigkeit insofern als gerechtfertigt an, als dass diejenigen, die tatsächlich Websites basteln und sich mit JavaScript beschäftigen wollen, aus Prinzip mit einem Browser hantieren, also nicht (primär) mit dem IE. Außerdem hat der standardmäßig unzureichende Entwicklerwerkzeuge, so dass es unnötig schwer ist, mit seinen kryptischen Fehlermeldungen à la "Das Objekt unterstützt diese Eigenschaft nicht." umgehen zu müssen. So ein Firebug war schon eine tolle Sache, als es Vergleichbares im FF mit seinem DOM-Inspector damals noch nicht gab - aber eben nicht im IE!
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
Vielleicht wäre eine kurze Meldung "Der IE wird nicht unterstützt!" doch besser.
ich schrubte bereits, dass ich ihn nicht unterstütze.
ich baue in meine Seiten oft folgendes ein, wenn ich keine einfachen Alternativen finde:
if(Methode) {
…
}
else {
alert("Ihr Browser unterstützt nicht die benötigten Methoden!");
}
Hiermit sperre ich z.B. den IE8 aus:
if(window.addEventListener) {
window.addEventListener("DOMContentLoaded",JB.GPX2GM.start,false);
}
else {
window.onload = function() {
document.querySelectorAll("div[class*='gpxview:'],figure[class*='gpxview:']")[0].innerHTML = "<p style='font-weight:bold;padding:2em;text-align:center;background-color:#fb5'>Leider wird Ihr Browser vom GPX-Viewer nicht mehr unterstützt.</p>";
console.error("Leider wird Ihr Browser vom GPX-Viewer nicht mehr unterstützt.");
}
}
Gib also einfach eine Alert-Meldung aus, und gut ist's. In einem Tutorial muss man sich ja die Frage stellen, unterstütze ich „alle“ Browser oder lehre ich modernes Javascript. Du hast dich eben für letzteres entschieden.
Gruß
Jürgen
Lieber JürgenB,
Gib also einfach eine Alert-Meldung aus, und gut ist's.
das finde ich in mehrfacher Hinsicht kontraproduktiv. Es sind ja unbedarfte Anwender, die Du mit diesem knappen Hinweis vor den Kopf stößt. Da fände ich persönlich einen Hinweis besser, der erklärt, dass die Leute gerade mit einem Internet Explorer auf Deine Seite gesurft kommen, zu dem es gute, sichere und kostenlose Alternativen gibt, die man Browser nennt. Und dann eben die Links zu Firefox, Chromium und Vivaldi.
In einem Tutorial muss man sich ja die Frage stellen, unterstütze ich „alle“ Browser oder lehre ich modernes Javascript. Du hast dich eben für letzteres entschieden.
Ich habe mich dazu entschieden, diese Problematik in diesem Tutorial wenigstens anzusprechen. Da meine Korrekturen unzureichend waren, ich den IE auch zutiefst verabscheue (habe mich lange genug mit der Version 6 herumärgern müssen, und nun kann ein aktueller noch nicht einmal ECMA6?!), sehe ich nun für mich die Grenze dessen erreicht, für das ich mich und meine Zeit noch einzusetzen bereit bin.
Liebe Grüße,
Felix Riesterer.
Servus!
In einem Tutorial muss man sich ja die Frage stellen, unterstütze ich „alle“ Browser oder lehre ich modernes Javascript. Du hast dich eben für letzteres entschieden.
Ich habe mich dazu entschieden, diese Problematik in diesem Tutorial wenigstens anzusprechen. Da meine Korrekturen unzureichend waren, ich den IE auch zutiefst verabscheue (habe mich lange genug mit der Version 6 herumärgern müssen, und nun kann ein aktueller noch nicht einmal ECMA6?!), sehe ich nun für mich die Grenze dessen erreicht, für das ich mich und meine Zeit noch einzusetzen bereit bin.
Vielen Dank für eure Verbesserungen.
Wenn ich das richtig verstanden habe, soll es den neuen Edge mit Chromium abweichend von der bisherigen MS-Policy eben auch für die älteren Windows-Versionen geben.
Bisher blieb Nutzern von XP und Win 7 ja nur der Weg zu den Alternativen Chrome, Firefox und Opera. Anscheinend hat MS da dazugelernt. Mal abwarten!
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
wenn ich mir die Browserstatistiken ansehe, habe ich das Gefühl, das auch unter Windows 10 der IE11 noch oft zum Einsatz kommt. Wenn der IE nicht per Zwangsupdate ersetzt wird, bleibt er uns erhalten, bis der letzte Windows 7 Rechner stirbt.
Gruß
Jürgen
Servus!
wenn ich mir die Browserstatistiken ansehe, habe ich das Gefühl, das auch unter Windows 10 der IE11 noch oft zum Einsatz kommt. Wenn der IE nicht per Zwangsupdate ersetzt wird, bleibt er uns erhalten, bis der letzte Windows 7 Rechner stirbt.
wollt grad schreiben - das geht doch gar nicht - hab's grad im Netz gesehen - geht doch. 😟
Herzliche Grüße
Matthias Scharwies
Hallo
wenn ich mir die Browserstatistiken ansehe, habe ich das Gefühl, das auch unter Windows 10 der IE11 noch oft zum Einsatz kommt. Wenn der IE nicht per Zwangsupdate ersetzt wird, bleibt er uns erhalten, bis der letzte Windows 7 Rechner stirbt.
Ersetze „Windows 7“ durch „Windows 10“ und du kommst der Sache weitaus näher. Auch dort ist der IE11 vorhanden. Auch dort lässt er sich nicht deïnstallieren. Auch dort wird er von Gewohnheitstieren der bereits vorhandenen und um Längen besseren Alternative [1] Edge vorgezogen.
@Matthias Scharwies: Auch wenn der Chromium-Edge entgegen der aktuellen Praxis für ältere Windows-Versionen bereitgestellt werden sollte, können wir wohl davon ausgehen, dass dies für das seit fast fünf Jahren aus dem Support ausgeschiedene Windows-XP nicht mehr der Fall sein wird. Das Gleiche gilt für Windows Vista [2] (Supportende 11. April 2017). Bleibt an alten aber noch unterstützten Windows-Versionen also nur Windows 7 und, wenn sie denn rechtzeitig fertig werden sollten, Windows Server 2008 (R2) (und neuere) übrig.
Tschö, Auge
Ich behaupte nicht, dass Edge gut sei. Besser als der IE ist er aber allemal. ↩︎
Ja, es gibt Windows-Versionen, deren Wikipedia-Artikel man verlinken muss, weil es Leute gibt, die die nicht kennen [3]. ↩︎
Also die Windows-Verionen, nicht die Wikipedia-Artikel [4]. ↩︎
Obwohl man in diesen Fällen davon ausgehen muss, dass diesen Leuten auch die Wikipedia-Artikel unbekannt sein dürften. ↩︎
Hallo Jürgen
includes
ist auch noch drin. Ich habe gerade mal Orloks Polyfill eingebaut, aber danach ging es immer noch nicht, auch keine Fehlermeldung. Da scheint noch mehr im Argen zu liegen.
Danke, dass du meinen Beitrag gelesen hast. Ich wünschte, dass hätte Felix auch gemacht. 😀
Array.prototype.slice.call(NodeList).forEach(callback)
Ich zitiere mich mal selbst:
„[Es] besteht überhaupt kein Anlass, die als Argument übergebene NodeList in ein Array zu konvertieren.“
Array.prototype.forEach.call(NodeList, callback)
Wie es noch ein wenig besser geht, habe ich in meinem anderen Beitrag aufgeschrieben.
Der Grund dafür, dass es trotz Polyfill für includes()
immernoch nicht funktioniert, ist wahrscheinlich die mangelnde Unterstützung des Internet Explorers für das output
–Element.
Da der Browser das Element nicht kennt, gibt es auch keine Reflektion der Eigenschaft value
. Sprich, die Zuweisung an diese Eigenschaft bewirkt nicht, dass das Attribut gesetzt und der textuelle Inhalt des Elements angepasst wird.
Daran soll es aber nicht scheitern. Man kann auch einfach textContent
verwenden.
Also nicht:
out.value = // ...
Sondern:
out.textContent = // ...
Dann müsste es gehen. Sonst sehe ich erstmal keine Probleme hinsichtlich IE.
Mir ist allerdings noch aufgefallen, dass innerhalb eines Eventhandlers, der mit der Methode addEventListener()
registriert wird, false
zurückgegeben wird. Das ist unnötig, weil darüber schon die Methode preventDefault()
aufgerufen wird, und unsinnig, weil der Rückgabewert bei dieser Form der Registrierung ohnehin verworfen wird.
Viele Grüße,
Orlok
Lieber Orlok,
Ich wünschte, dass hätte Felix auch gemacht. 😀
ich habe ihn eher überflogen, denn wirklich gelesen. Das war sicherlich ein Fehler meinerseits. Da ich aber nicht Willens bin, den IE zu unterstützen, lasse ich es jetzt einfach konsequent sein. Wer meinen Artikel und das Beispiel noch IE-tauglich machen möchte, sei hiermit recht herzlich eingeladen.
Liebe Grüße,
Felix Riesterer.
Hallo,
ich habe deine Änderungen eingebaut und getestet, jetzt scheint der Rechner auch im IE11 zu funktionieren. Ich möchte da jetzt im WIKI nicht in @Felix Riesterer 's Artikel rumändern, daher hier mein Quelltext:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Taschenrechner</title>
<link rel="stylesheet" media="all" href="Taschenrechner-Dateien/BeispielSELFHTML-Beispiel-Grundlayout.htm">
<style>
#calc {
background: royalblue;
border: 1px solid darkblue;
border-radius: 0.5em;
box-shadow: inset 0 0 5px white;
display: inline-block;
padding: 1em 0;
text-align: center;
width: 15em;
}
#calc output {
display: block;
height: 1.5em;
background: white;
text-align :right;
font-size: 100%;
padding-right: 5%;
margin: 5px 6%;
}
#calc fieldset {
border: none;
margin: 0 auto;
padding-bottom: 0;
}
#calc button {
cursor: pointer;
margin: 5px 2%;
width: 18%;
}
#usage {
display: inline-block;
padding: 0 0 0 2em;
vertical-align: top;
}
</style>
<script>
"use strict";
document.addEventListener("DOMContentLoaded", function () {
if (!Array.prototype.includes) {
Array.prototype.includes = function includes(searchElement) {
if (this == null) {
throw new TypeError('this is null or undefined');
}
var object = Object(this),
length = object.length >>> 0;
if (length === 0) {
return false;
}
var start = arguments[1] >> 0,
key = start < 0 ? Math.max(start + length, 0) : start,
currentElement;
while (key < length) {
currentElement = object[key];
if (searchElement === currentElement
|| (searchElement !== searchElement
&& currentElement !== currentElement)) {
return true
}
key ++;
}
return false;
};
}
var form = document.getElementById("calc"),
out = document.querySelector("#calc output"),
overwrite = true;
function clear () {
out.textContent = 0;
overwrite = true;
}
function extra (type) {
switch (type) {
case "√":
out.textContent = Math.sqrt(result(true));
break;
case "x²":
out.textContent = Math.pow(result(true), 2);
break;
case "ln":
out.textContent = Math.log(result(true));
break;
}
overwrite = true;
}
function input (c) {
// remove leading zero?
if (overwrite) {
out.textContent = (c == "." ? "0." : c);
} else {
out.textContent += c;
}
overwrite = false;
}
function operator (c) {
out.textContent += " " + c + " ";
overwrite = false;
}
function result (noDisplay) {
var input = out.textContent,
r = 0;
// replace × with * and ÷ with / for eval()
input = input.replace(/×/g, "*").replace(/÷/g, "/");
// remove anything else that is not allowed here
input = input.replace(/[^0-9. +\-*\/]/g, "");
try {
r = eval(input);
} catch (e) {
r = 0;
}
if (noDisplay !== true) {
out.textContent = r;
overwrite = true;
}
return r;
}
// initialize only if <output> is found
if (out) {
form.addEventListener("submit", function (ev) {
// prevent form submission and page reload
ev.preventDefault();
ev.stopPropagation();
return false;
});
// button functionalities
Array.prototype.forEach.call((document.querySelectorAll("#calc button")),function (b) {
var c = b.textContent;
switch (c) {
case "9":
case "8":
case "7":
case "6":
case "5":
case "4":
case "3":
case "2":
case "1":
case "0":
case ".":
b.addEventListener("click", function () {
input(c);
});
break;
case "+":
case "-":
case "×":
case "÷":
b.addEventListener("click", function () {
operator(c);
});
break;
case "√":
case "x²":
case "ln":
b.addEventListener("click", function () {
extra(c);
});
break;
case "=":
b.addEventListener("click", result);
break;
case "C":
b.addEventListener("click", clear);
break;
}
});
// keyboard support
document.addEventListener("keypress", function (ev) {
// decimal point
if ([44, 46].includes(ev.charCode)) {
// , .
input(".");
}
// digits
if ([48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(ev.charCode)) {
// 0-9
input(ev.charCode - 48);
}
// operators
if ([42, 43, 45, 47].includes(ev.charCode)) {
// * + - /
operator(
["×", "+", "-", "÷"][
[42, 43, 45, 47].indexOf(ev.charCode)
]
);
}
// result
if (ev.charCode == 61) {
// =
result();
}
// clear
if ([67, 99].includes(ev.charCode)) {
// C, c
clear();
}
// logarithm
if ([76, 108].includes(ev.charCode)) {
// L, l
extra("ln");
}
// root
if ([82, 114].includes(ev.charCode)) {
// R, r
extra("√");
}
// square
if ([83, 115].includes(ev.charCode)) {
// S, s
extra("x²");
}
// additional clear and result keys
switch (ev.code) {
// <delete> and <backspace> to clear display
case "Backspace":
case "Delete":
clear();
break;
// both <enter> keys to display result
case "Enter":
case "NumpadEnter":
result();
break;
}
});
}
});
</script>
</head>
<body>
<h1>Taschenrechner</h1>
<main role="main">
<form id="calc">
<output>0</output>
<fieldset>
<button>√</button>
<button>x²</button>
<button>ln</button>
<button>C</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>×</button>
<button>0</button>
<button>.</button>
<button>=</button>
<button>÷</button>
</fieldset>
</form>
<aside id="usage">
<h2>Hinweise zur Bedienung rein mit der Tastatur</h2>
<dl>
<dt><strong>=</strong> (Ergebnis berechnen)</dt>
<dd><strong>=</strong> oder <strong>Enter</strong></dd>
<dt><strong>√</strong> (Wurzel)</dt>
<dd><strong>R</strong> (root - Englisch für Wurzel)</dd>
<dt><strong>x²</strong> (Quadrat)</dt>
<dd><strong>S</strong> (square - Englisch für Quadrat)</dd>
<dt><strong>ln</strong> (natürlicher Logarithmus)</dt>
<dd><strong>L</strong> (logarithm - Englisch für Logarithmus)</dd>
<dt><strong>C</strong> (zurücksetzen auf Null)</dt>
<dd><strong>C</strong> (clear - Englisch für klar), <strong>Entf</strong> oder <strong>Backspace</strong></dd>
</dl>
</aside>
</main>
</body></html>
Gruß
Jürgen
Hallo,
ich habe die IE-Unterstützung eingebaut und hoffentlich nichts übersehen.
Gruß
Jürgen
Lieber JürgenB,
ich habe die IE-Unterstützung eingebaut und hoffentlich nichts übersehen.
die Stelle, an der Array.prototype.forEach()
erklärt wird, habe ich passend umformuliert.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
die Stelle, an der
Array.prototype.forEach()
erklärt wird, habe ich passend umformuliert.
sorry, ich habe den Text ersetzt, da ich auf die Variante
if (!NodeList.prototype.forEach) NodeList.prototype.forEach = Array.prototype.forEach;
…
document.querySelectorAll("#calc button").forEach(function (b) {
umgeschwenkt bin.
Gruß
Jürgen
Lieber JürgenB,
sorry, ich habe den Text ersetzt, da ich
kein Grund sich zu entschuldigen! Ich habe frech Deine Änderungen noch einmal überarbeitet, um die Unterstützung des IE zu einem eigenständigen kleinen Kapitel des Tutorials zu machen.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
… Ich habe frech Deine Änderungen noch einmal überarbeitet, um die Unterstützung des IE zu einem eigenständigen kleinen Kapitel des Tutorials zu machen.
wodurch es noch besser geworden ist.
Gruß
Jürgen
Lieber JürgenB,
wodurch es noch besser geworden ist.
:-) Danke.
Liebe Grüße,
Felix Riesterer.