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 -bereik

Scope bepaalt de toegankelijkheid (zichtbaarheid) van variabelen.

JavaScript heeft 3 soorten bereik:

  • Bereik blokkeren
  • Functiebereik:
  • Globaal bereik:

Bereik blokkeren

Vóór ES6 (2015) had JavaScript alleen Global Scope en Function Scope .

ES6 introduceerde twee belangrijke nieuwe JavaScript-sleutelwoorden: leten const.

Deze twee trefwoorden bieden Block Scope in JavaScript.

Variabelen gedeclareerd binnen een { } blok zijn niet toegankelijk van buiten het blok:

Voorbeeld

{
  let x = 2;
}
// x can NOT be used here

Variabelen gedeclareerd met het varsleutelwoord kunnen GEEN blokbereik hebben.

Variabelen gedeclareerd binnen een { } blok zijn toegankelijk van buiten het blok.

Voorbeeld

{
  var x = 2;
}
// x CAN be used here

Lokaal bereik

Variabelen gedeclareerd binnen een JavaScript-functie, worden LOKAAL voor 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

Lokale variabelen hebben Function Scope :

Ze zijn alleen toegankelijk vanuit de functie.

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.


Functieomvang:

JavaScript heeft functiebereik: elke functie maakt een nieuw bereik aan.

Variabelen gedefinieerd binnen een functie zijn niet toegankelijk (zichtbaar) van buiten de functie.

Variabelen gedeclareerd met var, let en constzijn vrij gelijkaardig wanneer gedeclareerd in een functie.

Ze hebben allemaal een functiebereik :

function myFunction() {
  var carName = "Volvo";   // Function Scope
}
function myFunction() {
  let carName = "Volvo";   // Function Scope
}
function myFunction() {
  const carName = "Volvo";   // Function Scope
}

Globale JavaScript-variabelen

Een variabele die buiten een functie wordt gedeclareerd, wordt GLOBAL .

Voorbeeld

let carName = "Volvo";
// code here can use carName

function myFunction() {
// code here can also use carName
}

Een globale variabele heeft Global Scope :

Alle scripts en functies op een webpagina hebben er toegang toe. 


Wereldwijd bereik

Variabelen die Globaal zijn gedeclareerd (buiten elke functie) hebben Global Scope .

Globale variabelen zijn overal in een JavaScript-programma toegankelijk.

Variabelen gedeclareerd met var, let en constzijn vrij gelijkaardig wanneer gedeclareerd buiten een blok.

Ze hebben allemaal een wereldwijde reikwijdte :

var x = 2;       // Global scope
let x = 2;       // Global scope
const x = 2;       // Global scope

JavaScript-variabelen

In JavaScript zijn objecten en functies ook variabelen.

Scope bepaalt de toegankelijkheid van variabelen, objecten en functies uit verschillende delen van de code.



Automatisch globaal

Als u een waarde toewijst aan een variabele die niet is gedeclareerd, wordt deze automatisch een GLOBAL- variabele.

Dit codevoorbeeld zal een globale variabele declareren carName, zelfs als de waarde binnen een functie is toegewezen.

Voorbeeld

myFunction();

// code here can use carName

function myFunction() {
  carName = "Volvo";
}

Strikte modus

Alle moderne browsers ondersteunen het uitvoeren van JavaScript in "Strikte modus".

In een later hoofdstuk van deze zelfstudie leert u meer over het gebruik van de strikte modus.

In "Strikte modus" zijn niet-gedeclareerde variabelen niet automatisch globaal.


Globale variabelen in HTML

Met JavaScript is het globale bereik de JavaScript-omgeving.

In HTML is het globale bereik het vensterobject.

Globale variabelen gedefinieerd met het vartrefwoord behoren tot het vensterobject:

Voorbeeld

var carName = "Volvo";
// code here can use window.carName

Globale variabelen die met het lettrefwoord zijn gedefinieerd, horen niet bij het vensterobject:

Voorbeeld

let carName = "Volvo";
// code here can not use window.carName

Waarschuwing

Maak GEEN globale variabelen tenzij u dat van plan bent.

Uw globale variabelen (of functies) kunnen venstervariabelen (of functies) overschrijven.
Elke functie, inclusief het vensterobject, kan uw globale variabelen en functies overschrijven.


De levensduur van JavaScript-variabelen

De levensduur van een JavaScript-variabele begint wanneer deze wordt gedeclareerd.

Functievariabelen (lokale) worden verwijderd wanneer de functie is voltooid.

In een webbrowser worden globale variabelen verwijderd wanneer u het browservenster (of tabblad) sluit.


Functieargumenten

Functieargumenten (parameters) werken als lokale variabelen binnen functies.