Eine Button-Funktion

Wenn du den "Einführung in JS Kurs" hinter dir hast, hast du schon ein paar einfache Buttons in den Logik-Challenges erstellt: Dein erster Button und Smarter Button. Falls du das vergessen hast, lass uns auffrischen, wie man einen einfachen Button erstellt.

Zuerst: Was sind die grundlegensten Eigenschaften eines Buttons?

Eine Form auf der Leinwand (typischerweise ein Rechteck)
Enthält eine Bezeichnung oder ein Icon, die beschreiben, was er tut
Reagiert auf einen Nutzer, der darauf klickt (aber nirgendwo anders)

Wir können #1 und #2 ganz einfach erreichen:

fill(0, 234, 255);
rect(100, 100, 150, 50, 5);
fill(0, 0, 0);
textSize(19);
text("Useless button", 110, 133);

Um #3 zu erreichen, müssen wir eine mouseClicked Funktion definieren, die aufgerufen wird, wenn ein Nutzer klickt. Darin müssen wir überprüfen, ob mouseX und mouseY innerhalb der Grenzen des Buttons liegen. Der oben beschriebene Button erstreckt sich von x=100 zu x=250 und von y=100 zu y=150, wie unten dargestellt:

Wir können diese Koordinaten überprüfen, indem wir die vier Bedingungen zusammen-&&en:

mouseClicked = function() {
    if (mouseX >= 100 && mouseX <= 250 &&
        mouseY >= 100 && mouseY <= 150) {
        println("Still pretty useless");    
    }
};

Versuche, in und außerhalb des Buttonbereichs zu klicken, um sicherzustellen, dass es funktioniert:

Es funktioniert natürlich, dennoch besorgt es mich. Es besorgt mich nämlich, dass dies kein sehr wiederverwertbarer Code ist. Wie viel Arbeit habe ich, wenn ich die Position des Buttons verändern möchte? (Probier es aus weiter oben!) Ich sehe viele "hart-gecodete" Zahlen im Code -- wie die Koordinaten innerhalb der mouseClicked Funktion und frage mich direkt, ob es wohl keinen saubereren Weg gibt.

Lass uns zuallererst Variablen für die Position und Größe erstellen, sodass wir sie an einer einzigen Stelle verändern und das Klicken des Buttons noch immer funktioniert. Ich habe btnX, btnY, btnWidth und btnHeight dem unteren Programm hinzugefügt. Versuche, die Werte zu verändern und den Button zu klicken:

Nun, das ist besser. Aber dennoch, wie viel Arbeit werde ich haben, wenn ich einen weiteren Button hinzufügen möchte? Muss ich all das kopieren und einfügen und btn2X und btn2Y erstellen? Ugh, das klingt so gar nicht nach Spaß. Klingt nach einer spitzen Motivation, eine Funktion zu schreiben, die all das für Buttons übernimmt und Parameter nutzt, um zu übernehmen, was anders ist. Wir könnten es so schreiben, und die Variablen in Paramter abändern:

var drawButton = function(btnX, btnY, btnWidth, btnHeight) {
    fill(0, 234, 255);
    rect(btnX, btnY, btnWidth, btnHeight, 5);
    fill(0, 0, 0);
    textSize(19);
    textAlign(LEFT, TOP);
    text("Useless button", btnX+10, btnY+btnHeight/4);
};

Dann müssen wir es wie folgt nennen:

drawButton(100, 100, 150, 50);

Aber, äh, hm, was ist mit unseren mouseClicked-Code? Erkennst du, wo das Problem bei ihm liegt?

mouseClicked = function() {
    if (mouseX >= btnX && mouseX <= (btnX+btnWidth) &&
        mouseY >= btnY && mouseY <= (btnY+btnHeight)) {
        println("Still pretty useless");    
    }
};

Würden wir all diesen Code jetzt zusammen haben, würden wir einen Error von Oh Noes bekommen, nämlich "btnX is not defined" - und er hat völlig recht! Wir haben btnX in einen Funktionsparameter umgewandelt, was bedeutet, dass dies nicht länger eine globale Variable ist. Dies ist zwar gut für die Wiederverwertbarkeit der drawButton-Funktion, aber nun hat die mouseClicked-Funktion keine Möglichkeit zu erfahren, welche Koordinaten zu überprüfen sind.

Daher müssen wir uns gut überlegen, wie wir diese Information an die drawButton Funktion übergeben und für die mouseClicked-Funktion zugänglich machen. Ich kann mir ein paar Möglichkeiten vorstellen:

Die globalen Variablen für die Position und Größe(btnX, btnY, btnWidth, btnHeight) erneut einführen
Eine globale Variable einführen, die alle Parameter hält (var btn1 = [...];)
Ein globales Objekt einführen, welches die Parameter hält (var btn1 = {..})
Objektorierentierte Prinizipien verweden und den Button zu definieren, also die Eigenschaften in ihm zu speichern (var btn1 = new Button(...))

Also was davon? Hm, ich mag die erste Idee nicht, weil ich dann so viele globale Variablen hinzufügen müsste und ich bin allergisch auf globale Variablen. Die zweite Vorgehensweise gefällt mir nicht, weil Code, der Daten aus Array-Indizes zieht, schwer zu lesen ist. Die dritte Möglichkeit gefällt mir, weil damit nur eine globale Variable eingeführt wird und dadurch leserlicher Code entsteht. Die vierte Technik mag ich auch: Durch Objektorientierung allgemeine Button Objekte anzulegen. Aber später mehr dazu.

Wir können unser globales btn1 -Objekt so anlegen:

var btn1 = {
    x: 100,
    y: 100,
    width: 150,
    height: 50
};

Und die drawButton-Funktion so ändern, dass sie ein einzelnes Objekt annimmt, von dem sie ihre Eigenschaften bezieht:

var drawButton = function(btn) {
    fill(0, 234, 255);
    rect(btn.x, btn.y, btn.width, btn.height, 5);
    fill(0, 0, 0);
    textSize(19);
    textAlign(LEFT, TOP);
    text("Useless button", btn.x+10, btn.y+btn.height/4);
};

Die mouseClicked-Funktion überprüft die Eigenschaften der globalen Variable:

mouseClicked = function() {
    if (mouseX >= btn1.x && mouseX <= (btn1.x+btn1.width) &&
        mouseY >= btn1.y && mouseY <= (btn1.y+btn1.height))     {
        println("Still pretty useless");    
    }
};

Versuch es mal da unten! Versuche wie vorhin, verschiedene Parameter zu verändern und sieh, ob noch alles funktioniert:

Es ging darum, uns zu ermöglichen, möglichst einfach neue Buttons hinzuzufügen. Der ultimative Test der Wiederverwertbarkeit. Schaffen wir das? Ba Bum BUM.

Wir beginnen mit einer neuen globalen Variable btn2. Auf der y-Achse soll dieser von unserem ersten Button versetzt sein:

var btn2 = {
    x: 100,
    y: 200,
    width: 150,
    height: 50
};

Jetzt zeichnen wir den Button:

drawButton(btn2);

Damit haben wir 2 Buttons auf die Leinwand gemalt, aber nur der erste reagiert auf Mausklicks. Wir sorgen dafür, dass der zweite reagiert, indem wir die Logik kopieren und btn2 durch btn1 ersetzen. So in etwa:

mouseClicked = function() {
    if (mouseX >= btn1.x && mouseX <= (btn1.x+btn1.width) &&
        mouseY >= btn1.y && mouseY <= (btn1.y+btn1.height))     {
        println("Still pretty useless");    
    }

    if (mouseX >= btn2.x && mouseX <= (btn2.x+btn2.width) &&
        mouseY >= btn2.y && mouseY <= (btn2.y+btn2.height))     {
        println("2nd one still quite useless!");    
    }
};

Aber lässt dich dieser ganze wiederholte Code nicht auch die Nase rümpfen? Lass uns eine isMouseInside-Funktion anlegen, die jeden beliebigen Button überprüft und true zurückgibt, wenn die Maus sich innerhalb des Buttons befand:

var isMouseInside = function(btn) {
    return (mouseX >= btn.x &&
            mouseX <= (btn.x+btn.width) &&
            mouseY >= btn.y && 
            mouseY <= (btn.y+btn.height));
};

Nun können wir die Funktion in mouseClicked nutzen um die Menge an sich wiederholendem Code zu verringern:

mouseClicked = function() {
    if (isMouseInside(btn1))     {
        println("Still pretty useless");    
    } else if (isMouseInside(btn2))     {
        println("2nd one still quite useless!");    
    }
};

Jetzt haben wir's! Wir haben Funktionen benutzt, um mehrere Buttons zu zeichnen, und haben es relativ einfach gemacht, neue Buttons hinzuzufügen. Versuch es mal hier drunter:

Wir könnten so weitermachen -- Arrays aller Buttons in einem Programm erstellen und es möglich machen, die Beschriftung und die Farbe eines Buttons zu verändern -- aber das hat dir hoffentlich einen guten Einstieg gegeben, wie man einfache Buttons mit Hilfe von Funktionen erstellt. Als Nächstes gehen wir durch, wie man Buttons nach objektorientierten Prinzipien erstellt.

Willst du an der Diskussion teilnehmen?

Anmelden

Sortiere nach:

Noch keine Beiträge.

Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.