Anzeige
Tutorialbeschreibung

Magisches Wort – mit jQuery

Magisches Wort – mit jQuery

Dieses Tutorial soll dir zeigen, wie man mit etwas Javascript und mithilfe von jQuery ein magisches Wort auf seiner Homepage einbauen kann.

Tippt ein User dieses magische Wort ein, so geschieht etwas Geheimnisvolles, z.B. ein Layoutwechsel.


Wer schon etwas länger auf Facebook vertreten ist, und damit meine ich in etwa das Jahr 2009, der wird vielleicht etwas von dem ominösen Konami-Code gehört haben.

Dieser Code ist eine Tastenkombination, die normalerweise von der Spieleschmiede Konami als Cheat in jedem Spiel eingebaut wurde. Für mich brach das Facebook-Zeitalter erst nach diesem Code an, sodass ich selbst nie in den Genuss dieser Spielerei gekommen war.

Aber die Funktionsweise war recht simpel: Hat ein Facebook-User die Tastenkombination up, up, down, down, left, right, left, right, b, a, enter, rightclick getätigt, passierte etwas mit der Seite.

Letzthin wollte ich solch eine Funktion auch auf einer Website einbauen. Daher stellte ich mir die Frage, wie man das am einfachsten mit Javascript und jQuery umsetzen kann.

Zunächst sei gesagt: Wie so oft unterscheiden sich die Browser in manchen Funktionen. Firefox ist dabei wie immer der zuverlässigste und logischste Browser.

So habe ich schnell feststellen müssen, dass Pfeiltasten nicht in jedem Browser zu den normalen Tasten gezählt werden, weshalb ich mich in diesem Beispiel lediglich auf die Texteingabe-Tasten beschränken möchte.

Nun aber ab in medias res!


Schritt 1: Einbinden von jQuery

Zunächst muss man das jQuery-Framework laden. Dazu lädt man sich entweder jQuery auf der Entwicklerseite herunter oder bindet z.B. die aktuelle jQuery-Version direkt von jquery.com ein (zu finden unter: http://code.jquery.com/jquery-latest.min.js)

Dazu muss folgender Code im <head></head>-Bereich eingegeben werden:
<script src="http://code.jquery.com/jquery-latest.min.js"         type="text/javascript"></script>


Nun können wir uns an den eigentlichen Code wagen.


Schritt 2: Die Befehle ausführen

Wir wollen die Befehle erst dann ausführen, wenn der gesamte Seitenquelltext geladen wurde. Anderenfalls könnte es zu Funktionsfehlern kommen, je nachdem, welche Änderungen ihr mit eurer Seite durchführen wollt.

Dazu benötigen wir:
$(document).ready(function() {

init();

});

Wobei wir sogleich die Funktion init() aufrufen, die wir nun definieren möchten.


Schritt 3: Die Funktion

Jetzt müssen wir uns die Funktion init definieren:
function init(){

//mache etwas

}

Der folgende Code wird nun an der Stelle //mache etwas eingefügt!

In dieser Funktion erstellen wir zunächst eine Variable, die wir demnächst benötigen werden.
    var hash = '';

Jetzt können wir damit beginnen, die Tastenaktivitäten zu analysieren.

Mit dem Befehl
$(document).keypress(function(e) {

//mache noch etwas

});

registriert jQuery sämtliche Tastenaktivitäten.

Allerdings gibt jQuery nicht die tatsächlichen Werte der Buchstaben aus, sondern gibt sie als Zahlencode der jeweiligen Taste zurück.

Welcher Code zu welcher Taste gehört, kann man am besten auf der Beispielseite von jQuery herausfinden.

http://api.jquery.com/keypress/
(unten bei Demo)

Hierbei gibt es verschiedene Tastengruppen. Die Buchstaben der gängigen Texteingabetasten (Leertaste, Enter ...) lassen sich alle durch den Befehl
e.which;

auslesen.

Bei anderen Tasten, wie z.B. den Pfeiltasten, muss man im Firefox auf den Befehl
e.keyCode ;

ausweichen. Dieser Befehl funktioniert aber wie gesagt nur in Firefox.

Wenn man nun also ein Wort wie z.B. hallo als geheimem Schlüssel nutzen möchte, sollte man sich zunächst die Zahlencodes notieren.

Welche folgende wären:
h:104
 a:97
l:108
o:111

Wir starten also unsere Funktion mit einer Abfrage, ob einer dieser Buchstaben gedrückt wurde.
if(e.which==104 || e.which==97 || e.which==108 || e.which==111){

}

Denn wir möchten nur etwas machen, wenn die gedrückte Taste zu unserem Schlüsselwort gehört.

In diesem Fall speichern wir nun in der If-Abfrage den aktuellen Zahlencode in unsere Variable hash.
            hash = hash+e.which;


So erhalten wir eine Zahlenkombination, deren Funktionsweise ähnlich der eines Safes ist.

Wenn wir dann den letzten Buchstaben unseres Schlüsselwortes eingeben, müssen wir eben diese Zahlenkombination auf ihre Richtigkeit überprüfen.

Dazu muss man zunächst eine If-Abfrage durchführen:
if (e.which == 111) {

}

Den Abgleich der Variablen hash mit dem Schlüssel kann man mit einer if-else Abfrage machen, aber damit man etwas lernt, werden wir eine switch-Anweisung nutzen.

Wir schreiben also den folgenden Code in die vorherige if-Abfrage:
switch (hash) {

                case "10497108108111":



                    //hier steht die finale Funktion break;

alert("this is magic");

                default:

                    hash = '';



                    break;

}

Wenn nun also die Tasten in der richtigen Reihenfolge gedrückt wurden, wird die finale Funktion, in unserem Fall der alert()-Befehl, aufgerufen. Stimmt die Reihenfolge nicht, wird der Hash wieder auf den Anfangswert gesetzt.

So weit, so gut. Allerdings haben wir den Fall außer Betracht gelassen, dass jemand einen Buchstaben, der nicht im Wort vorkommt, zwischendurch drückt, wie z.B. hallio.

In diesem Fall würde das noch immer als richtige Eingabe durchgehen, da i nicht geloggt wird. Das heißt, wir müssen beim Drücken von nicht im Schlüssel beinhalteten Buchstaben ebenfalls den Hash auf den Anfangswert zurücksetzen.

Dazu können wir der ersten if-Abfrage
if(e.which==104 || e.which==97 || e.which==108 || e.which==111){

}

noch eine else-Funktion hinzufügen. Denn dann werden alle Buchstaben, die nicht im Schlüssel sind, angesprochen.

In dieser else-Funktion setzen wir den Hash wieder zurück.
    hash = '';

Jetzt ist der Code auch schon fertig.

Wir erhalten also:
<script src = "http://code.jquery.com/jquery-latest.min.js" type = "text/javascript" > </script>

<script type="text/javascript">

$(document).ready(function() {

    init();

});







function init() {

    var hash = '';

    $(document).keypress(function(e) {

    if (e.which == 104 || e.which == 97 || e.which == 108 || e.which == 111) {

        hash = hash + e.which;

        if (e.which == 111) {

            switch (hash) {

            case "10497108108111":

                //hier steht die finale Funktion 

                alert("this is magic");

                 break;

            default:

                hash = '';

                break;

            }

        }

    } else {

        hash = '';



    }

    });

}

</script>

Wichtig ist noch: In diesem Beispiel darf der letzte Buchstabe nur einmal, und zwar an letzter Stelle, vorkommen, da ansonsten der Hash zurückgesetzt wird.

Kommt der eigentlich letzte Buchstabe mehrmals vor, muss man z.B. die Eingabe durch die Enter-Taste (keyCode 13) beenden.

Was man damit alles anstellen kann, hängt sehr stark von den Programmierkünsten des Anwenders an. Eigentlich sind einem keine Grenzen gesetzt.

Eine einfache Anwendung wäre z.B. die Änderung des Layouts. Dazu musste man lediglich an der Stelle, an der wir alert (" this is magic "); ausführen, folgenden Code einfügen:
$(document.body).addClass(magic);


Nun hat also unser body die Klasse magic erhalten. In einem stylesheet kann man jetzt beliebige Einstellungen tätigen, indem man die Klasse .magic vor jedes anzusprechende Element schreibt.
.magic #my_element_id, .magic .my_element_class{

...

}

So werden diese Regeln nur auf den body im Falle der hinzugefügten Klasse magic angewendet.


Demo

Ein kleines Beispiel gibt es auf dieser Seite. Tippt man hier ilovelo (Enter) ein, wird das Aussehen der Website geändert.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von lena2013
  • 13.04.2013 - 23:11

Tolle Idee gefällt mir sehr gut :)

Portrait von johanna52
  • 07.01.2013 - 10:24

danke für das interessante Tutorial, gut erklärt

Portrait von FranMu
  • 07.01.2013 - 10:16

Danke für das Tut, werde mich demnächst mal daran versuchen :-)

Portrait von ninafee
  • 07.01.2013 - 10:00

Vielen Dank für das interessante Tutorial.

Portrait von standby83
  • 07.01.2013 - 09:30

Danke für das Tutorial. Mal sehen, ob man das oder Teile der Funktionalität irgendwo sinnvoll verwenden kann. Mir fällt spontan nichts ein. Hat jemand eine Idee?

Portrait von wespe2008
  • 07.01.2013 - 09:29

Danke für das Tut! ++ Wenn allerdings die Browser so unterschiedlich reagieren, erschließt sich mich nicht der Sinn, da man als Programmierer nur einen Teil der Besucher erreicht.

Portrait von leveler
  • 07.01.2013 - 13:35

Schönes Tutorial, gut geschrieben. Danke sehr!

Portrait von kleeaar
  • 07.01.2013 - 17:15

Text ist bei allen Browsern kein Problem, nur solche Tasten, wie die Pfeiltasten werden bei manchen Browsern nicht, bzw. anders interpretiert.
Daher bin ich auf diese Tasten auch nicht weiter eingegangen.

Portrait von MaoMao
  • 07.01.2013 - 08:11

Vielen Dank für das Tutorial.

x
×
×