Erstellen eines unglaublichen jQuery-Rechners

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Sicher ist es schön, einen Brieföffner direkt neben Ihrem Postkorb, einen Schuhlöffel neben Ihren Slippern und eine Taschenlampe neben Ihrem Nachttisch zu haben. Ebenso ist es schön, einen Taschenrechner zur Hand zu haben, wenn Sie etwas rechnen müssen. Dieses Tutorial und der Download zeigen Ihnen, wie Sie eine Website korrigieren können.

Überlegungen zur Benutzeroberfläche

Einige Tasten mit den Nummern 1 bis 9, einigen Funktionen und einer großen "Gleich" -Taste. Das ist alles, was ein Taschenrechner ist, oder? Muss es ein Stück Kuchen sein. Jede Programmiersprache kann damit problemlos umgehen. Natürlich, aber selbst etwas so Einfaches wie ein Taschenrechner muss einige Dinge berücksichtigen, wenn er entwirft, wie genau es funktioniert.

Der Screencast, der diesem Artikel beiliegt, konzentriert sich hauptsächlich auf diese Dinge und weniger auf die heruntergekommene Codierung. Während dieser schriftliche Teil auf den Code konzentriert wird. Trotzdem hier ein kurzer Überblick über einige der kleinen Details der Benutzeroberfläche:

Wenn der Rechner geladen wird, wird 0 (zero) im Display angezeigt. Durch Drücken der Nummer 2 wird nicht die Nummer 02, sondern nur 2.
Wenn Sie eine Funktionstaste drücken, wird die aktuell im Display angezeigte Zahl als erste Zahl in der Berechnung "gesperrt", bleibt jedoch genau dort, wo sie sich befindet. Wenn eine andere Nummer gedrückt wird, wird die Nummer ersetzt.
Wenn eine Funktionstaste gedrückt wird und dann eine andere Funktionstaste gedrückt wird, ist die zuletzt verwendete Funktion die zuletzt gedrückte.
Nachdem eine Berechnung durchgeführt wurde, gibt es zwei mögliche Szenarien. A) Eine neue Nummer wird gedrückt. Dadurch wird der Rechner vollständig zurückgesetzt und mit dieser Nummer neu gestartet. B) Eine Funktionstaste wird gedrückt, die die Summe als "erste" Zahl sperrt, so dass eine zweite Berechnung für die Summe durchgeführt werden kann
Die Schaltfläche zum Löschen muss sich wie angekündigt verhalten und den Rechner vollständig zurücksetzen
Gegebenenfalls muss visuelles Feedback verwendet werden. Noch wichtiger ist jedoch, dass die Funktionalität dem Standard entspricht, der von zig Taschenrechnern auf Desktops weltweit festgelegt wurde.

Die Liste könnte sogar weitergehen, aber Sie sehen, dass selbst die einfachsten Schnittstellen viel Aufmerksamkeit erfordern.

Das HTML-Markup

Nichts Besonderes hier. Wir brauchen einen Container für den Taschenrechner, wir brauchen eine Anzeige und wir brauchen ein paar Knöpfe. <div>, <input>, und <a> werden gut funktionieren. JavaScript erledigt hier die ganze Arbeit, es findet keine "anmutige Degradition" statt. Wenn JavaScript deaktiviert ist, funktioniert dieser Rechner nicht, sodass wir ihn nur vollständig ausblenden. Wir werden dies also nicht zu einer echten <form> machen. Warum also die <input>? Durch Eingaben kann Text manuell eingegeben werden, was wir zulassen werden. Sie ermöglichen eine einfache Auswahl und verfügen über das Attribut "Wert", das zum Abrufen und Einstellen praktisch ist.

Hier ist das ganze Kit und Kaboodle:

<div id="calculator"> 
 
	<input type="text" id="display" /> 
		 
	<a class="num-button seven" href="#">7</a> 
	<a class="num-button eight" href="#">8</a> 
	<a class="num-button nine" href="#">9</a> 
	 
	<a class="num-button four" href="#">4</a> 
	<a class="num-button five" href="#">5</a> 
	<a class="num-button six" href="#">6</a> 
	 
	<a class="num-button one" href="#">1</a> 
	<a class="num-button two" href="#">2</a> 
	<a class="num-button three" href="#">3</a> 
	 
	<a class="num-button zero" href="#">0</a> 
	<a class="num-button dot" href="#">.</a> 
	<a class="clear-button clear" href="#">C</a> 
	 
	<a class="function-button add" href="#"> </a> 
	<a class="function-button subtract" href="#">&ndash;</a> 
	<a class="function-button multiply" href="#">x</a> 
	<a class="function-button divide" href="#">/</a> 
	 
	<a class="equals-button" href="#">=</a> 
		 
</div>

Vollbild

Erstellen der Bilder

Wir brauchen nur wenige. Der Hintergrund des gesamten Rechners, eine Schaltfläche im Stil "number", eine Schaltfläche im Stil "function" und die Schaltfläche "equals". Jede Zahl und Funktion benötigt kein eigenes Bild, wir legen nur Text direkt darüber. Ich denke, "Arial Black" macht eine schöne fette und rechnerähnliche Schrift.

Später, wenn wir den Rechner öffnen und schließen, verwenden wir die "Mini" -Rechnergrafik und die "Schließen" -Schaltfläche.

Styling mit CSS

Auch hier nichts Besonderes. Absolute Positionierung erledigt den größten Teil der Grunzarbeit, damit die Dinge dahin gehen, wo sie hin sollen. Wir setzen die position: relative auf dem Rechner div selbst und dann können wir uns absolut darin positionieren.

Hier ist viel davon:

*				{ margin: 0; padding: 0; } 
body				{ font: 25px "Arial Black", Arial, Sans-Serif; } 
 
#page-wrap		    	{ width: 500px; margin: 25px auto; } 
 
h1				{ font-size: 22px; } 
p				{ font: 14px Arial, Sans-Serif; } 
a				{ color: black; text-decoration: none; outline: none; } 
 
#calculator			{ width: 266px; height: 400px; background: url(../images/calc-bg.png) no-repeat; 
	 			  position: relative; display: none; } 
 
#display 			{ background: none; border: none; position: absolute;  
				  top: 15px; left: 15px; width: 197px; text-align: right; 
			  	  font: 35px "Arial Black", Arial, Sans-Serif; } 
					 
.num-button			{ width: 44px; height: 41px; padding: 3px 0 0 0; text-align: center;  
	 		      	  background: url(../images/button-bg.png) no-repeat;  
				  position: absolute; display: block; } 
.clear-button			{ width: 44px; height: 41px; padding: 3px 0 0 0; text-align: center;  
	 		          background: url(../images/button-bg.png) no-repeat;  
				  position: absolute; display: block; } 
.function-button    		{ width: 44px; height: 41px; padding: 3px 0 0 0; text-align: center;  
	 		          background: url(../images/function-button-bg.png) no-repeat;  
				  position: absolute; display: block; } 
.function-button:active, 
.pendingFunction    		{ background-position: bottom left; } 
					 
.seven				{ top: 86px; left: 15px; } 
.eight				{ top: 86px; left: 66px; } 
.nine				{ top: 86px; left: 118px; } 
 
/* ... the rest of the buttons ... */ 
 
.multiply			{ top: 188px; left: 169px; } 
.divide				{ top: 237px; left: 169px; } 
 
.equals-button			{ width: 206px; height: 42px; text-align: center; top: 293px; left: 15px; 
	 			  background: url(../images/equals-bg.png) no-repeat; position: absolute;  
				  display: block; }

Einrichten der jQuery-Umgebung

Im HTML selbst müssen wir einige Aufrufe vornehmen, um uns auf das Schreiben unseres eigenen jQuery-JavaScript vorzubereiten. Laden Sie nämlich die jQuery- und jQuery-UI-Bibliotheken und rufen Sie unsere bald vorhandene JavaScript-Datei auf.

<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("jquery", "1.3.1"); 
</script> 
<script type="text/javascript" src="js/jquery-ui-personalized-1.6rc6.min.js"></script> 
<script type="text/javascript" src="js/example.js"></script>

Einrichten

Lassen Sie uns die Grundlagen erläutern. Wir benötigen die klassische Anweisung "Wenn das DOM fertig ist", um die Dinge zu starten. Dies ist allen JavaScript gemeinsam, da wir mit Elementen nichts tun möchten, bevor sie alle geladen wurden. Dann richten wir einige grundlegende Ereignisse ein, von denen wir wissen, dass sie eintreten werden. Wir haben ein Klickereignis und eine Funktion für jeden Schaltflächentyp. Wir werden auch die jQuery-UI-Funktion aufrufen, um unseren Taschenrechner ziehbar zu machen, sowie die winzige kleine Funktion, mit der die Sichtbarkeit umgeschaltet werden kann.

$(function(){ 
		 
	$(".num-button").click(function(){ 
		// do stuff 
	}); 
	 
	$(".clear-button").click(function(){ 
		// do stuff 
	}); 
	 
	$(".function-button").click(function(){ 
		// do stuff 
	}); 
	 
	$(".equals-button").click(function(){ 
	     // do stuff 
	}); 
	 
	$("#calculator").draggable(); 
	 
	$("#opener, #closer").click(function(){ 
		$("#opener").toggle(); 
		$("#calculator").toggle(); 
	}); 
	 
});

Verwenden von .data() für Variablen, nicht für Globale

Variablen in JavaScript sind lokal für die Funktion, in der sie erstellt wurden. Wenn Sie eine an eine andere übergeben müssen, übergeben Sie sie als Parameter, wenn Sie die neue Funktion aufrufen. Das ist alles schön und gut, aber wir haben sieben davon und die meisten unserer Funktionen werden sie alle auf die eine oder andere Weise brauchen. Das könnte die ganze Zeit ein bisschen haarig werden. Was wir wirklich brauchen, sind globale Variablen, aber so wie ich es verstehe, ist das eine Art Nein-Nein (etwas, das gegen Namespaces verstößt).

jQuery hat sowieso eine bessere Möglichkeit, mit der Funktion data() umzugehen. Wir können "Daten" an jedes jQuery-Objekt anhängen, und diese Daten werden mit diesem Objekt überall hin übertragen. Grundsätzlich wie ein Attribut, nur Sie können es nicht wirklich im DOM sehen. Dies macht im Grunde das, was globale Variablen für uns tun würden, und es ist genauso einfach zu bedienen. Hier sind die Datenbits, die wir verwenden werden:

ValueOne - Die erste Zahl in der Gleichung
ValueOneLocked - Ist diese erste Nummer einsatzbereit?
ValueTwo - Die zweite Zahl in der Gleichung
ValueTwoLocked - Ist diese zweite Nummer einsatzbereit?
isPendingFunction - Ist eine Funktion ausgewählt?
thePendingFunction - Welche?
fromPrevious - Wurde NUR eine Berechnung durchgeführt?

Wir werden diese Datenbits an die Eingabe #display anhängen, die sozusagen das Gehirn unseres Rechners sein wird. Ein bisschen macht Sinn. Wir müssen Standardwerte für all diese Datenbits einrichten, aber lassen Sie uns einen Moment darüber nachdenken. Wir könnten es in der Hauptfunktion richtig machen, aber seien wir schlau und abstrahieren es zu einer Funktion. Es wird mehrere Szenarien geben, in denen wir diese Werte zurücksetzen müssen. Erstellen wir also eine Funktion namens resetCalculator, um die Aufgabe zu erledigen. Dann können wir diese Funktion jederzeit aufrufen. Akzeptieren wir auch einen Zahlenparameter und setzen den Rechner auf diesen Wert zurück. Wenn der Rechner geladen wird, ist dies Null, aber nach einer Funktion werden wir erneut zurücksetzen und nur auf den endgültigen Wert der Berechnung zurücksetzen.

function resetCalculator(curValue) { 
	$("#display").val(curValue); 
	$(".function-button").removeClass("pendingFunction"); 
	$("#display").data("isPendingFunction", false); 
	$("#display").data("thePendingFunction", ""); 
	$("#display").data("valueOneLocked", false); 
	$("#display").data("valueTwoLocked", false); 
	$("#display").data("valueOne", curValue); 
	$("#display").data("valueTwo", 0); 
	$("#display").data("fromPrevious", false); 
}

Wenn Sie auf eine Zahl klicken...

Wie sich herausstellt, ist das, was der Taschenrechner tut, wenn Sie auf eine Zahl klicken, das komplizierteste Stück Code in der ganzen Sache. Es gibt vier "Zustände", in denen sich der Rechner befinden kann, und er verhält sich je nach Zustand unterschiedlich, wenn Sie auf eine Zahl klicken. Sie sind:

A) Klicken Sie auf eine Nummer in einem völlig neuen Zustand (Anzeige zeigt zero) oder wenn noch keine Nummer gesperrt ist.
B) Klicken Sie auf eine Zahl, nachdem gerade eine Funktionstaste ausgewählt wurde.
C) Klicken Sie auf eine Nummer, nachdem eine Funktionstaste ausgewählt und zusätzliche Nummern eingegeben wurden.
D) Klicken Sie auf eine Zahl, nachdem gerade eine Berechnung durchgeführt wurde.

Unser Verhalten muss wie folgt sein:

A) Fügen Sie die neue Nummer an das an, was bereits vorhanden ist. Wenn es eine Null ist, ersetzen Sie diese.
B) Sperren Sie die erste Nummer und ersetzen Sie die Anzeige durch die neue Nummer.
C) Fügen Sie die neue Nummer an das an, was bereits vorhanden ist.
D) Setzen Sie den Rechner auf diese Nummer zurück.

Und hier ist alles im Code:

$(".num-button").click(function(){ 
 
	if ($("#display").data("fromPrevious") == true) { 
 
		resetCalculator($(this).text()); 
	 
	} else if (($("#display").data("isPendingFunction") == true) && ($("#display").data("valueOneLocked") == false)) { 
	 
		$("#display").data("valueOne", $("#display").val()); 
		$("#display").data("valueOneLocked", true); 
	 
		$("#display").val($(this).text()); 
		$("#display").data("valueTwo", $("#display").val()); 
		$("#display").data("valueTwoLocked", true); 
 
	// Clicking a number AGAIN, after first number locked and already value for second number	 
	} else if (($("#display").data("isPendingFunction") == true) && ($("#display").data("valueOneLocked") == true)) { 
 
		var curValue = $("#display").val(); 
		var toAdd = $(this).text(); 
 
		var newValue = curValue   toAdd; 
 
		$("#display").val(newValue); 
	 
		$("#display").data("valueTwo", $("#display").val()); 
		$("#display").data("valueTwoLocked", true); 
 
	// Clicking on a number fresh	 
	} else { 
 
		var curValue = $("#display").val(); 
		if (curValue == "0") { 
			curValue = ""; 
		} 
 
		var toAdd = $(this).text(); 
 
		var newValue = curValue   toAdd; 
 
		$("#display").val(newValue); 
 
	} 
	 
});

Die Funktionstaste ist einfacher zu handhaben. Wenn Sie darauf klicken, wird die erste Nummer gesperrt, sodass die Zifferntasten wissen, dass es Zeit ist, die zweite Nummer zu starten. Es gibt jedoch eine besondere Überlegung, und das ist zu tun, wenn eine Funktionstaste unmittelbar nach der Durchführung einer Berechnung gedrückt wird. In diesem Fall muss die erste Nummer als Endwert festgelegt werden und bereits bereit sein, diese zweite Nummer zu akzeptieren. Dies ermöglicht die Verkettung von Berechnungen, was sehr nützlich ist.

Wenn Sie darauf klicken, werden alle Funktionstasten von einer speziellen "pendingFunction" -Klasse gelöscht, und diese Klasse wird dann auf die bestimmte angeklickte Klasse angewendet. Dies gibt uns die CSS-Steuerung, um die Hintergrundposition zu verschieben und visuelles Feedback zu geben, welche Funktion derzeit aktiv ist.

$(".function-button").click(function(){ 
 
	if ($("#display").data("fromPrevious") == true) { 
		resetCalculator($("#display").val()); 
		$("#display").data("valueOneLocked", false); 
		$("#display").data("fromPrevious", false) 
	} 
	 
	// Let it be known that a function has been selected 
	var pendingFunction = $(this).text(); 
	$("#display").data("isPendingFunction", true); 
	$("#display").data("thePendingFunction", pendingFunction); 
	 
	// Visually represent the current function 
	$(".function-button").removeClass("pendingFunction"); 
	$(this).addClass("pendingFunction"); 
});

Und die Antwort ist...

Die Gleichheitsfunktion ist auch ziemlich einfach. Als erstes prüfen wir, ob wir tatsächlich bereit sind, Berechnungen durchzuführen. Wir wissen das, wenn BEIDE Nummern "gesperrt" sind. Wenn dies der Fall ist, rechnen Sie ein wenig, um die endgültige Zahl zu erhalten, und setzen Sie dann den Rechner auf diesen endgültigen Wert zurück (und setzen Sie "fromPrevious" auf "true", damit wir den empfindlichen Zustand kennen, in dem wir uns befinden).

Wenn die Nummern nicht gesperrt sind ... nichts tun.

$(".equals-button").click(function(){ 
 
	if (($("#display").data("valueOneLocked") == true) && ($("#display").data("valueTwoLocked") == true)) { 
		 
		if ($("#display").data("thePendingFunction") == " ") { 
			var finalValue = parseFloat($("#display").data("valueOne"))   parseFloat($("#display").data("valueTwo")); 
		} else if ($("#display").data("thePendingFunction") == "%u2013") { 
			var finalValue = parseFloat($("#display").data("valueOne")) - parseFloat($("#display").data("valueTwo")); 
		} else if ($("#display").data("thePendingFunction") == "x") { 
			var finalValue = parseFloat($("#display").data("valueOne")) * parseFloat($("#display").data("valueTwo")); 
		} else if ($("#display").data("thePendingFunction") == "/") { 
			var finalValue = parseFloat($("#display").data("valueOne")) / parseFloat($("#display").data("valueTwo")); 
		} 
		 
		$("#display").val(finalValue); 
					 
		resetCalculator(finalValue); 
		$("#display").data("fromPrevious", true); 
					 
	} else { 
		// both numbers are not locked, do nothing. 
	} 
	 
});

KLAR!

Last but not least ist der Löschknopf der einfachste von allen. Drücken Sie darauf und löschen Sie den Rechner auf Zero.

1	$(".clear-button").click(function(){
2	resetCalculator("0");
3	});

Und wir sind fertig

Das macht es Leute. Ich hoffe, zwischen dem Live-Beispiel, dem Screencast und diesem schriftlichen Tutorial war dies eine wertvolle Lernsitzung. Ich habe sicherlich ein paar Dinge gelernt, als ich es erstellt habe. Wenn Sie sich äußerst nützliche Anwendungen dafür vorstellen können, kontaktieren Sie mich und lassen Sie es mich wissen.