KitCode

Hoe gebruik je KitCode?

Met KitCode, een eenvoudige codetaal, kan je diverse elementen in je webapp met elkaar laten spreken. 

1. Opstarten van de app

  • app.ready: Deze functie zorgt ervoor dat je code pas wordt uitgevoerd wanneer de volledige inhoud van de pagina geladen is.

app.ready(function() {
    // Plaats hier je code die moet worden uitgevoerd na het laden van de pagina
});

2. Elementen kiezen

Je kunt direct een element selecteren door de id of naam van het element te gebruiken.

  • Voorbeeld met id: 

id("mijnKnop").after("click").do(function() {
    appalert("Je hebt op de knop geklikt!");
});
  • Voorbeeld met appelement: 

appelement("app-voice").after("understood").do(function() {
    terminal("Spraakcommando herkend");
});

3. Gebeurtenissen en acties voor elementen

Met after en do kun je verschillende acties koppelen aan standaard elementen zoals knoppen of afbeeldingen op je pagina. Dit zijn enkele voorbeelden van gebeurtenissen die je kunt gebruiken:

  • click:Wordt uitgevoerd wanneer een gebruiker op het element klikt.

id("mijnKnop").after("click").do(function() {
    appalert("Klik op de knop!");
});
  • dblclick:Wordt uitgevoerd wanneer een gebruiker snel twee keer achter elkaar op het element klikt.

id("mijnKnop").after("dblclick").do(function() {
    appalert("Dubbelklik op de knop!");
});
  • mouseover:Wordt uitgevoerd wanneer de muis van de gebruiker over het element beweegt.

id("mijnAfbeelding").after("mouseover").do(function() {
    terminal("Muis beweegt over de afbeelding");
});
  • mouseout:Wordt uitgevoerd wanneer de muis van de gebruiker weg beweegt van het element.

id("mijnAfbeelding").after("mouseout").do(function() {
    terminal("Muis beweegt weg van de afbeelding");
});
  • change:Wordt uitgevoerd bij een verandering in de waarde van een invoerveld, zoals een dropdown-menu of tekstvak.

id("mijnInput").after("change").do(function() {
    appalert("De invoerwaarde is veranderd!");
});

4. Voorbeeld: Interactie met een knop

Stel dat je een knop hebt met id="submitKnop". Je kunt verschillende acties koppelen aan deze knop zoals in dit voorbeeld:


id("submitKnop").after("click").do(function() {
    appalert("Je hebt de knop geklikt!");
});
id("submitKnop").after("dblclick").do(function() {
    terminal("Je hebt dubbel geklikt op de knop");
});

Met deze functies kun je verschillende soorten interacties instellen, zodat de verschillende onderdelen van je app met elkaar gegevens kunnen uitwisselen. 

Gebruiken van Feature en ChangeFeature

Met feature en changeFeature kun je attributen van elementen opvragen en aanpassen.

  • feature:Haalt de waarde van een specifiek attribuut op van een element. Ik bewaar het in een "doosje" (variabele) met de naam waarde.

var waarde = id("mijnElement").feature("data-info");
  • changeFeature:Wijzigt de waarde van een attribuut en geeft een change event door.

var waarde = "Nieuwe inhoud die ik in data-info wil bewaren";
id("mijnElement").changeFeature("data-info", waarde);

Met changeFeature kun je dus dynamisch een attribuut aanpassen en dit doorgeven aan andere onderdelen die luisteren naar een wijziging.

Voorbeeld: Kleur Opvragen en Wijzigen met Feature en ChangeFeature

In dit voorbeeld gebruiken we een element waarmee je een kleur kunt selecteren. Met de functies feature en changeFeature kun je de huidige kleur opvragen en aanpassen.

HTML-element voor kleurselectie:
  • Kleur opvragen:Haal de huidige kleurwaarde van het value attribuut op.

appalert("De huidige kleur is: " + id("kleur").feature("value"));
  • Kleur wijzigen:Pas de kleurwaarde aan met changeFeature, bijvoorbeeld naar "#ff0000".

id("kleur").changeFeature("value", "#ff0000");
appalert("Kleur is aangepast naar rood.");

Met deze methode kun je de kleurwaarden dynamisch opvragen en aanpassen, wat handig is voor toepassingen zoals kleurselectie en live updates van UI-elementen.

Voorbeeld: Kleur Aanpassen en Doorgeven bij Verandering

In dit voorbeeld laten we zien hoe je met het element een kleur kiest, en hoe die kleurwaarde automatisch wordt doorgegeven aan een ander element zodra de kleur verandert.

HTML-elementen:





Kleur is nu: #000000

JavaScript binnen app.ready:


app.ready(function() {
    id("kleur").after("change").do(function() {
        let nieuweKleur = id("kleur").feature("value");
        id("resultaat").changeFeature("textContent", "Kleur is nu: " + nieuweKleur);
    });
});

Met deze code wordt de waarde van value bij elke verandering van het element opgehaald en doorgegeven aan het resultaat element, zodat de nieuwe kleur direct zichtbaar wordt.

Voorbeeld: gegevens uit een formulier bewaren en achteraf weer opvragen met appdata

In dit voorbeeld gebruiken we appdata om formuliergegevens op te slaan en later terug op te halen. Hieronder zie je een volledig voorbeeld van het verzamelen, opslaan, en opvragen van gegevens uit appdata.

Een invulformulier:

KitCode binnen app.ready:


app.ready(function() {
    id("opslaanKnop").after("click").do(function() {
        collectFormData(id("mijnFormulier"));
        terminal(appdata); // Laat de opgeslagen data zien in de terminal
    });

    id("toonGegevens").after("click").do(function() {
        if (appdata.gebruikersnaam && appdata.email) {
            let gebruikersnaam = appdata.gebruikersnaam;
            let email = appdata.email;
            appalert("Opgeslagen Gegevens: Gebruikersnaam: " + gebruikersnaam + " Email: " + email);
        } else {
            appalert("Geen gegevens opgeslagen. Vul het formulier in en klik eerst op Opslaan.");
        }
    });
});

Uitleg

Met deze opzet worden de ingevulde gegevens van het formulier opgeslagen in appdata bij het klikken op de knop Opslaan. Door daarna op Toon Opgeslagen Gegevenste klikken, worden de waarden van gebruikersnaam en email uit appdata opgehaald en weergegeven.,
Met deze regel    if (appdata.gebruikersnaam && appdata.email) {  controleren we eerst of beide waarden bestaan in appdata, want als ze niet bestaan kan je ze natuurlijk ook niet tonen.

Op deze manier kun je gegevens opslaan en op elk moment terug ophalen met appdata in je applicatie.

Volgende pagina