anonieme functie in javascript

[Bhawna Sharma]

Hallo, ik ben nieuw in programmeren en graag wil ik hierbij hulp.
ik ben bezig om een boodschappenlijst in elkaar te zetten.
samen met mijn klasgenoot heb ik aan mijn code gewerkt.
maar er zijn nog kleine dingen die ik niet snap.
ik snap niet zo goed de doel van een anonieme functie in een event handler.
kan iemand mij dit uitleggen?
 
hier zijn mijn codes:
 
 
toevoegButton.addEventListener('click', function() {

    var i;

    event.preventDefault();

    if (input.value === ""){

        alert("Vul wel een item in !");

    }

    else {

    var listItem = document.createElement("LI");

    var boodschap = document.createTextNode(input.value);

    listItem.appendChild(boodschap);

    lijstje.appendChild(listItem);

    input.value = "";

    items.push(listItem.textContent);

    }

    for (i=6; i<=items.length; i++) {

    alert ("je hebt al 6 items toegevoegd");

    }

}, false);
 
 
 
function uitgevenBoodschappen () {

    console.log("Je kan vandaag nog"  + ogen +      "Euro aan boodschappen uitgeven");

    button.innerHTML = "Je kan vandaag nog "  + ogen   +  " Euro aan boodschappen uitgeven";

}

 
 
en wat is de doel van de "e" in de parameter van de anonieme functie?
 

button.addEventListener("click", function(e){

    uitgevenBoodschappen();

    e.preventDefault ();

}, false);

 
 
 
 
 
 
 
 
 

 

[Benm]

e is hier een referentie naar het event - ja kan hier een andere naam voor kiezen als je wilt. Als je het x zou noemen wordt het 2 regels eronder ook x.preventDefault(); natuurlijk. Gangbaag is om events e te noemen, vereist absoluut niet.

Maar waarom gebruik je een eventlistener voor een button? Het lijkt me veel logischer om de button een onclick=... eigenschap mee te geven.

Overigens verbazend dat men javascript kiest voor een beginnerscursus programmeren, er zijn weinig talen die zoveel eigenaardigheden hebben.

[Bhawna Sharma]

dank je wel voor je uitleg!
 
maar wat is dan de doel van een anonieme functie? waarvoor wordt die gebruikt?

[Math-E-Mad-X]

De anonieme functie is de functie waarvan je wil dat 'ie uitgevoerd wordt op het moment dat je op de button klikt.
 
Verder ben ik het eens met Benm dat javascript een ongelukkige keuze is voor een beginnerscursus programmeren.

[Xenion]

Anonieme functies zijn wat de naam doet vermoeden: functies zonder een naam.
 
Normaal gezien maak je telkens netjes een functie in de form van:

Code: Selecteer alles

returntype functienaam(argumenten){
  body van de functie
}

En dan zou je die functie kunnen toevoegen als eventlistener van een button. Uit gemakzucht is het soms handig om niet een hele nieuwe functie te moeten definiëren die je toch maar op 1 plek in je code nodig hebt en daarom wordt er in veel talen toegelaten om een anonieme functie aan te maken op de plaats waar je ze nodig hebt.
 
Kijk trouwens ook eens naar gratis online programmeercursussen zoals bijvoorbeeld codeacademy.

[Bhawna Sharma]

Heel erg bedankt!
 
de anonieme functie is dan als je het pas uitgevoerd wilt hebben zodra men op een button klikt.
 
maar hoe zit het dan met deze stuk code?
 
 
function myMessage() {

    berichtElement.innerHTML = "Voeg maar jouw boodschappen toe die jij vandaag moet kopen!";

}

berichtElement.addEventListener("click", myMessage, false);

 
wordt het hier dan ook niet uitgevoerd zodra men op een button klikt?

[Xenion]

Ik ben zelf niet bekend met de subtiliteiten van Javascript maar ik zou zeggen van wel.
Het komt erop neer dat je moet aangeven wat er moet gebeuren wanneer er op die button geklikt wordt. Dat kan zowel door een gewone functie afgehandeld worden als door een anonieme functie.
 
Je kan indien nodig zelfs meerdere functies als EventListener toevoegen en dan worden die allemaal uitgevoerd wanneer iemand op de button klikt.
 
(bron)

[Bhawna Sharma]

Bedankt voor uw hulp!

[Benm]

berichtElement.addEventListener("click", myMessage, false);
 
wordt het hier dan ook niet uitgevoerd zodra men op een button klikt?

Nee, in dit geval niet: Als de laatste parameter 'false' is wordt het event niet direct uitegevoerd maar eerst de eventhandler functie.

Bij een button maakt dat niet zoveel uit aangezien een click normaliter niet voor een actie zorgt (afgezien van het visuele effect van indrukken). Je zou zo'n eventhandler echter ook kunnen gebruiken op een <input type='submit'> waarbij je het verzenden van het formulier kunt voorkomen, bijvoorbeeld als niet alle velden zijn ingevoerd of iets dergelijks.

Zinnig is dat niet echt, je kunt beter de submit vervangen voor een <button> met onclick='validate();' en indien correct het formulier via javascript submitten. Dit voorkomt dat men validatie kan omzeilen door javascript uit te schakelen, maar als je het goed doet controleer je het serverside.

[Bhawna Sharma]

Maar wat doet een anonieme functie dan precies met de functie die een naam heeft?

[Benm]

Niets. Zo'n anonieme functie is niet gedefinieerd in de global scope en kun je dus niet aanroepen op een andere manier dan het event te triggeren.

Wat je in het voorbeeld doet is vanuit de anonieme functie de publieke functie uitgevenBoodschappen(); aanroepen, en vervolgens het even cancellen.

Je zou ook gewoon <button onclick='uitgevenBoodschappen();'> kunnen opnemen in je html code met hetzelfde resultaat. Veronderstelt dat die button geen submit oid is maakt het voor de werking geen enkel verschil. Wel heeft de onclick-variant een performance voordeel gezien eventlisteners continu actief zijn terwijl onlick events pas afvuren als je daadwerkelijk klikt.

[Bhawna Sharma]

Ik moet tijdens mijn opleiding css html en javascript van elkaar scheiden vandaar dat onclick event handler moeilijk gaat.
 
en waarom moet de "e" van event  in een parameter van de anonieme functie? want als ik heb als een variabel defineer, doet de methode preventdefault() het niet.

[Benm]

Wellicht is het handig als je de hele html en javascript code vermeldt (css is niet relevant tenzij je via javascript grafische wijzigingen doorvoert).

Wat voor opleiding doe je eigenlijk?

[webertje]

 berichtElement.addEventListener("click", myMessage, false);
 
als dit false staat word de actie ook niet direct uitgevoerd.