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

4 manieren om een ​​JavaScript-variabele te declareren:

  • Gebruik makend van var
  • Gebruik makend van let
  • Gebruik makend van const
  • Niets gebruiken

Wat zijn variabelen?

Variabelen zijn containers voor het opslaan van gegevens (het opslaan van gegevenswaarden).

In dit voorbeeld zijn x, y, en z, variabelen, gedeclareerd met het varsleutelwoord:

Voorbeeld

var x = 5;
var y = 6;
var z = x + y;

In dit voorbeeld zijn x, y, en z, variabelen, gedeclareerd met het letsleutelwoord:

Voorbeeld

let x = 5;
let y = 6;
let z = x + y;

In dit voorbeeld zijn x, y, en z, niet-gedeclareerde variabelen:

Voorbeeld

x = 5;
y = 6;
z = x + y;

Uit alle bovenstaande voorbeelden kun je raden:

  • x slaat de waarde 5 . op
  • y slaat de waarde 6 . op
  • z slaat de waarde 11 . op

Wanneer JavaScript var gebruiken?

Declareer JavaScript-variabelen altijd met var, let, of const.

Het vartrefwoord wordt gebruikt in alle JavaScript-code van 1995 tot 2015.

De trefwoorden leten constzijn in 2015 aan JavaScript toegevoegd.

Als u wilt dat uw code in een oudere browser wordt uitgevoerd, moet u var.


Wanneer JavaScript-const gebruiken?

Als je een algemene regel wilt: declareer variabelen altijd met const.

Als je denkt dat de waarde van de variabele kan veranderen, gebruik dan let.

In dit voorbeeld zijn price1, price2, en total, variabelen:

Voorbeeld

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

De twee variabelen price1en price2 worden gedeclareerd met het constsleutelwoord.

Dit zijn constante waarden en kunnen niet worden gewijzigd.

De variabele totalwordt gedeclareerd met het letsleutelwoord.

Dit is een waarde die kan worden gewijzigd.


Net als algebra

Net als in de algebra bevatten variabelen waarden:

let x = 5;
let y = 6;

Net als in de algebra worden variabelen gebruikt in uitdrukkingen:

let z = x + y;

Uit het bovenstaande voorbeeld kun je raden dat het totaal is berekend op 11.

Opmerking

Variabelen zijn containers voor het opslaan van waarden.



JavaScript-ID's

Alle JavaScript- variabelen moeten worden geïdentificeerd met unieke namen .

Deze unieke namen worden identifiers genoemd .

ID's kunnen korte namen zijn (zoals x en y) of meer beschrijvende namen (leeftijd, som, totaalvolume).

De algemene regels voor het construeren van namen voor variabelen (unieke identifiers) zijn:

  • Namen kunnen letters, cijfers, underscores en dollartekens bevatten.
  • Namen moeten beginnen met een letter
  • Namen kunnen ook beginnen met $ en _ (maar die gebruiken we niet in deze tutorial)
  • Namen zijn hoofdlettergevoelig (y en Y zijn verschillende variabelen)
  • Gereserveerde woorden (zoals JavaScript-trefwoorden) kunnen niet als naam worden gebruikt

Opmerking

JavaScript-ID's zijn hoofdlettergevoelig.


De toewijzingsoperator

In JavaScript is het gelijkteken ( =) een "toewijzings"-operator, niet een "gelijk aan"-operator.

Dit is anders dan bij algebra. Het volgende is niet logisch in de algebra:

x = x + 5

In JavaScript is het echter volkomen logisch: het wijst de waarde van x + 5 toe aan x.

(Het berekent de waarde van x + 5 en zet het resultaat in x. De waarde van x wordt verhoogd met 5.)

Opmerking

De operator "gelijk aan" is geschreven zoals ==in JavaScript.


JavaScript-gegevenstypen

JavaScript-variabelen kunnen getallen zoals 100 bevatten en tekstwaarden zoals "John Doe".

Bij het programmeren worden tekstwaarden tekstreeksen genoemd.

JavaScript kan veel soorten gegevens aan, maar denk nu alleen aan getallen en tekenreeksen.

Strings worden tussen dubbele of enkele aanhalingstekens geschreven. Cijfers zijn geschreven zonder aanhalingstekens.

Als u een getal tussen aanhalingstekens plaatst, wordt het behandeld als een tekenreeks.

Voorbeeld

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

Een JavaScript-variabele declareren

Het maken van een variabele in JavaScript wordt een variabele "declareren" genoemd.

U declareert een JavaScript-variabele met het varof het lettrefwoord:

var carName;
of:
let carName;

Na de declaratie heeft de variabele geen waarde (technisch gezien wel undefined).

Gebruik het gelijkteken om een waarde aan de variabele toe te kennen:

carName = "Volvo";

U kunt ook een waarde aan de variabele toewijzen wanneer u deze declareert:

let carName = "Volvo";

In het onderstaande voorbeeld maken we een variabele met de naam carNameen kennen we de waarde "Volvo" toe.

Vervolgens "uitvoeren" we de waarde in een HTML-paragraaf met id="demo":

Voorbeeld

<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

Opmerking

Het is een goede programmeerpraktijk om alle variabelen aan het begin van een script te declareren.


Eén verklaring, veel variabelen

U kunt veel variabelen in één instructie declareren.

Begin de instructie met varen scheid de variabelen door een komma :

Voorbeeld

let person = "John Doe", carName = "Volvo", price = 200;

Een aangifte kan meerdere regels omvatten:

Voorbeeld

let person = "John Doe",
carName = "Volvo",
price = 200;

Waarde = niet gedefinieerd

In computerprogramma's worden variabelen vaak gedeclareerd zonder waarde. De waarde kan iets zijn dat moet worden berekend, of iets dat later zal worden verstrekt, zoals gebruikersinvoer.

Een variabele gedeclareerd zonder waarde heeft de waarde undefined.

De variabele carName zal de waarde hebben undefinedna het uitvoeren van deze instructie:

Voorbeeld

let carName;

JavaScript-variabelen opnieuw declareren

Als u een JavaScript-variabele die is gedeclareerd met opnieuw declareert var, verliest deze zijn waarde niet.

De variabele carNameheeft nog steeds de waarde "Volvo" na het uitvoeren van deze instructies:

Voorbeeld

var carName = "Volvo";
var carName;

Opmerking

letU kunt een variabele gedeclareerd met of niet opnieuw declareren const.

Dit gaat niet werken:

let carName = "Volvo";
let carName;

JavaScript-rekenkunde

Net als bij algebra kun je rekenen met JavaScript-variabelen, met behulp van operators zoals =en +:

Voorbeeld

let x = 5 + 2 + 3;

U kunt ook strings toevoegen, maar strings worden aaneengeschakeld:

Voorbeeld

let x = "John" + " " + "Doe";

Probeer ook dit:

Voorbeeld

let x = "5" + 2 + 3;

Opmerking

Als u een getal tussen aanhalingstekens plaatst, worden de rest van de getallen behandeld als tekenreeksen en aaneengeschakeld.

Probeer nu dit:

Voorbeeld

let x = 2 + 3 + "5";

JavaScript-dollarteken $

Aangezien JavaScript een dollarteken als een letter behandelt, zijn ID's die $ bevatten geldige variabelenamen:

Voorbeeld

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

Het gebruik van het dollarteken is niet erg gebruikelijk in JavaScript, maar professionele programmeurs gebruiken het vaak als een alias voor de hoofdfunctie in een JavaScript-bibliotheek.

In de JavaScript-bibliotheek jQuery wordt bijvoorbeeld de hoofdfunctie $gebruikt om HTML-elementen te selecteren. In jQuery $("p");betekent "selecteer alle p-elementen".


JavaScript-onderstrepingsteken (_)

Aangezien JavaScript het onderstrepingsteken als een letter behandelt, zijn id's met _ geldige variabelenamen:

Voorbeeld

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

Het gebruik van het onderstrepingsteken is niet erg gebruikelijk in JavaScript, maar een conventie onder professionele programmeurs is om het te gebruiken als een alias voor "private (verborgen)" variabelen.


Test jezelf met oefeningen

Oefening:

Maak een variabele aan met de naam carNameen wijs de waarde Volvoeraan toe.

var  = "";