JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


JavaScript- functies


Een JavaScript-functie is een codeblok dat is ontworpen om een ​​bepaalde taak uit te voeren.

Een JavaScript-functie wordt uitgevoerd wanneer "iets" het aanroept (het aanroept).


Voorbeeld

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

JavaScript-functiesyntaxis

Een JavaScript-functie wordt gedefinieerd met het functiontrefwoord, gevolgd door een naam , gevolgd door haakjes () .

Functienamen kunnen letters, cijfers, onderstrepingstekens en dollartekens bevatten (dezelfde regels als variabelen).

De haakjes kunnen parameternamen bevatten, gescheiden door komma's:
( parameter1, parameter2, ... )

De code die door de functie moet worden uitgevoerd, wordt tussen accolades geplaatst: {}

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

Functieparameters worden weergegeven tussen haakjes () in de functiedefinitie.

Functieargumenten zijn de waarden die door de functie worden ontvangen wanneer deze wordt aangeroepen.

Binnen de functie gedragen de argumenten (de parameters) zich als lokale variabelen.

Een functie is vrijwel hetzelfde als een procedure of een subroutine, in andere programmeertalen.


Functie-aanroep

De code in de functie wordt uitgevoerd wanneer "iets" de functie aanroept (aanroept):

  • Wanneer een gebeurtenis plaatsvindt (wanneer een gebruiker op een knop klikt)
  • Wanneer het wordt aangeroepen (aangeroepen) vanuit JavaScript-code
  • Automatisch (zelf aangeroepen)

Later in deze zelfstudie leert u veel meer over het aanroepen van functies.



Functie Terug

Wanneer JavaScript een returninstructie bereikt, stopt de functie met uitvoeren.

Als de functie is aangeroepen vanuit een instructie, zal JavaScript "terugkeren" om de code uit te voeren na de aanroepende instructie.

Functies berekenen vaak een retourwaarde . De retourwaarde wordt "teruggestuurd" naar de "beller":

Voorbeeld

Bereken het product van twee getallen en retourneer het resultaat:

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

Het resultaat in x zal zijn:

12

Waarom Functies?

U kunt code hergebruiken: definieer de code één keer en gebruik deze vele malen.

U kunt dezelfde code vaak gebruiken met verschillende argumenten, om verschillende resultaten te produceren.

Voorbeeld

Fahrenheit naar Celsius omrekenen / converteren:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

De () operator roept de functie op

Met behulp van het bovenstaande voorbeeld toCelsiusverwijst naar het functie-object en toCelsius()verwijst naar het resultaat van de functie.

Als u een functie opent zonder () wordt het functie-object geretourneerd in plaats van het functieresultaat.

Voorbeeld

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Functies gebruikt als variabele waarden

Functies kunnen op dezelfde manier worden gebruikt als variabelen, in alle soorten formules, toewijzingen en berekeningen.

Voorbeeld

In plaats van een variabele te gebruiken om de geretourneerde waarde van een functie op te slaan:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

U kunt de functie direct als variabele waarde gebruiken:

let text = "The temperature is " + toCelsius(77) + " Celsius";

Later in deze tutorial leer je veel meer over functies.


Lokale variabelen

Variabelen gedeclareerd binnen een JavaScript-functie, worden LOKAAL voor de functie.

Lokale variabelen zijn alleen toegankelijk vanuit de functie.

Voorbeeld

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Omdat lokale variabelen alleen in hun functies worden herkend, kunnen variabelen met dezelfde naam in verschillende functies worden gebruikt.

Lokale variabelen worden gemaakt wanneer een functie wordt gestart en verwijderd wanneer de functie is voltooid.


Test jezelf met oefeningen

Oefening:

Voer de functie met de naam uit myFunction.

function myFunction() {
  alert("Hello World!");
}
;