jQuery Passwortstärke-Analyzer

Ich habe einen jQuery Passwortstärke Analyser programmiert. Dieser ist natürlich sehr basic und der Code alles andere als optimal oder perfekt. Ich kriege selber Gänsehaut wenn ich ihn sehe. Man könnte so viel Code kürzern, modularisieren, verbessern, auslagern; so viel Design aufhübschen, interaktiver machen und so weiter. Aber die Zeit hab ich einfach jetzt nicht.
Ich empfehle also natürlich professionelle Plugins dieser Art. Den Code zeige ich rein aus informativen und lerntechnischen Gründen.

Wenn ich mal Zeit habe dann würde ich sicherlich probieren, meine Features in etwa wie hier auszubauen. Ein Großteil davon hat sich an 1, 2 Tagen aber nicht realisieren lassen.

Hier der Code und darunter die Erklärung einzelner Zeilen:

Update 05.06. – es gibt mittlerweile eine verbesserte Version 1.2 des Tools, bitte also den neuen Code aus diesem Post beachten!

Zeile 3:
Das Ändern einer Checkbox lässt sich mit

Zufälliger Artikel:  Deployment: HipChat Batch Uninstaller
.change() ganz leicht abfangen, hier wird die Checkbox durch eine ID identifiziert:

Man könnte auch $("input[type=checkbox]:first").change nehmen; wie immer führen viele Wege nach Rom, .change() ist jedenfalls an dieser Stelle perfekt um Buttons aus dem Weg zu gehen.

Zeile 4:
Prüfen, ob ein Element eine Klasse besitzt. is() bietet sich da an.

Zeile 5:
.val() fragt den Inhalt eines Elements ab, Inhalt auslesen. Mit .val("bla") (Zeile 7) kann man den Inhalt setzen.

Zeile 6:
replaceWith() ersetzt den Knoten, der angesprochen wird mitsamt Inhalt mit dem neuen Inhalt. Wird replaceWith() auf einen Tag mit ID angewendet so verschwindet auch der Tag mit der ID. Daher habe ich in den neuen Inhalt diesen Tag mit drin.

Ich glaub das könnte man mit append(), html() oder anderen inhaltsverändernden Funktionen eleganter lösen aber mein Beispiel ging in meinem Kopf am schnellsten umzusetzen, bei anderen Methoden hätte ich erstmal nochmal lesen müssen ^^

Zeile 15-17:
Beim Tastendruck im Textfeld mit der ID passwort wird die Funktion ratePW() ausgeführt.

.keydown() und .keypress() sind hier nicht geeignet. Testet mal aus, wie es sich dann verhält.

Zeile 19-23
Das Runden einer Zahl, in diesem Fall auf 1 Nachkommastelle. Full Credits an die Herren hier, denn von dort habe ich den Code geklaut. Hatte nicht die Nerven das selber zu schreiben. Danke 🙂

Zufälliger Artikel:  Software-Deployment Sammelbeitrag - Firefox, Flash, Java, Reader, Skype

Wenn vorhanden wird „.0“ auch angezeigt. Ich überlege noch ob das besser aussieht als ausblenden. Weil wenn mit Nachkommastellen dann eigentlich ja immer. Egal, keine Zeit 😀

Zeile 33
Wie oben beschrieben komme ich mit .val() an den Inhalt des Eingabefelds und mit .length() an die Anzahl der Zeichen, die Länge.

Zeile 34,38-40:
Jedes mal, wenn eine Taste in das Eingabefeld eingetragen wird, bekommt input den Inhalt des Textfelds neu zugewiesen. Durch die Schleife wird jedes Zeichen dieser Zeichenkette einzeln durchlaufen. Die letzte Zeile weist x den dezimalen Charcode des Zeichen zu.

Ich hatte erst mit .Number() und .parseInt() probiert an den dezimalen Charcode zu kommen, kam immer NaN bei raus. Weiß einer wieso? Bin mir nicht so sicher, was da im Hintergrund abläuft. Bei Google findet man zu 90% diese 2 Funktionen, nur ganz selten die .charCodeAt().

Zeile 41-71:
Ich spar es mir den Code hier nochmal zu posten. Die Zeilen überprüfen, welcher Typ Zeichen der zwischengespeicherte Char ist. Ich weiß, das if if else Chaos ist tödlich. Zudem sind viel zu viel Zeichen erlaubt. Die Fehlerbehandlung wie z.B. bei Umlauten ist noch nicht fertig. Es gehen auch Zeichen, die normalerweise bei Passwörtern nicht erlaubt sind. Viele Details die jemand mit Langerweile besser machen würde 😉

Zufälliger Artikel:  Passwörter mit Batch versteckt speichern + auslesen

Ein verbautes Gimmick: Wird eine Zeichenart mehr als 4 Mal benutzt gibt es Abzüge in der Wertung. Damit soll die Variation der Zeichentypen gefördert werden. Schrecklich gelöst 😀

Zeile 74:
Wie oben beschrieben, rundet den Wert.

Zeile 76-90:
Was in diesem Codeblock passiert ist mir wieder etwas peinlich. Ginge wahrscheinlich kürzer und besser, aber es funktioniert ^^
Mit .css() setze ich je nach Wertung die CSS Eigenschaften des #cover DIVs. Dies ist ein grauer Balken über dem eigentlichen, bunten Balken. Dieser graue Balken wird Stück für Stück kleiner, bis er bei über 20 Punkten ganz ausgeblendet wird. Die meisten vermuten, man habe nur einen farbigen Balken, der immer größer wird. Aber ich glaube das ist schwerer zu realisieren als 2 Balken. einer davon überdeckendend.

So, das wars. Eigentlich schon ein tolles Ding. Man kann natürlich auch eins der hunderten jQuery Plugins nutzen, die es mittlerweile gibt wie Sand am Meer. 😉

Und, wie stark ist euer Passwort?

4 Kommentare

  1. Das ist ja ein Haufen Quelltext 😀 ! Ich glaube, ich würde den kurzen Weg gehen und einfach ein onchange-Event für das Input-Feld schreiben. Die meiste Arbeit würde ich aber wahrscheinlich auch mit dem Balken haben. Wie heißt es immer so schön? 20% der Arbeit benötigen 80% der Zeit. ;-D

    Da fällt mir ein: Gibt es dieses Mal garkeine Demo? 🙁

  2. Du scheinst anscheinend vergessen zu haben, den Flattr-Button in die „single.php“ deines Themes eingetragen. Ich sehe ihn jedenfalls nur in der „index.php“, nicht aber, wenn ich einen einzelnen Artikel ansehe. Für die „archive.php“ gilt übrigens das Gleiche. 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.