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


Eigenschappen JavaScript -object


Eigenschappen zijn het belangrijkste onderdeel van elk JavaScript-object.


JavaScript-eigenschappen

Eigenschappen zijn de waarden die aan een JavaScript-object zijn gekoppeld.

Een JavaScript-object is een verzameling ongeordende eigenschappen.

Eigenschappen kunnen meestal worden gewijzigd, toegevoegd en verwijderd, maar sommige zijn alleen-lezen.


JavaScript-eigenschappen openen

De syntaxis voor toegang tot de eigenschap van een object is:

objectName.property      // person.age

of

objectName["property"]   // person["age"]

of

objectName[expression]   // x = "age"; person[x]

De expressie moet resulteren in een eigenschapsnaam.

voorbeeld 1

person.firstname + " is " + person.age + " years old.";

Voorbeeld 2

person["firstname"] + " is " + person["age"] + " years old.";


JavaScript voor...in Loop

De JavaScript- for...ininstructie doorloopt de eigenschappen van een object.

Syntaxis

for (let variable in object) {
  // code to be executed
}

Het codeblok in de for...inlus wordt één keer uitgevoerd voor elke eigenschap.

Door de eigenschappen van een object bladeren:

Voorbeeld

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
  txt += person[x];
}

Nieuwe eigenschappen toevoegen

U kunt nieuwe eigenschappen aan een bestaand object toevoegen door er eenvoudig een waarde aan te geven.

Neem aan dat het person-object al bestaat - je kunt het dan nieuwe eigenschappen geven:

Voorbeeld

person.nationality = "English";

Eigenschappen verwijderen

Het deletesleutelwoord verwijdert een eigenschap van een object:

Voorbeeld

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

of verwijder persoon["leeftijd"];

Voorbeeld

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

Het deletesleutelwoord verwijdert zowel de waarde van de eigenschap als de eigenschap zelf.

Na verwijdering kan de eigenschap niet worden gebruikt voordat deze weer is toegevoegd.

De deleteoperator is ontworpen om te worden gebruikt op objecteigenschappen. Het heeft geen effect op variabelen of functies.

De deleteoperator mag niet worden gebruikt voor vooraf gedefinieerde JavaScript-objecteigenschappen. Het kan uw toepassing laten crashen.


Geneste objecten

Waarden in een object kunnen een ander object zijn:

Voorbeeld

myObj = {
  name:"John",
  age:30,
  cars: {
    car1:"Ford",
    car2:"BMW",
    car3:"Fiat"
  }
}

U hebt toegang tot geneste objecten met behulp van de puntnotatie of de haakjesnotatie:

Voorbeeld

myObj.cars.car2;

of:

Voorbeeld

myObj.cars["car2"];

of:

Voorbeeld

myObj["cars"]["car2"];

of:

Voorbeeld

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

Geneste arrays en objecten

Waarden in objecten kunnen arrays zijn en waarden in arrays kunnen objecten zijn:

Voorbeeld

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

Gebruik voor elke array een for-in-lus om toegang te krijgen tot arrays binnen arrays:

Voorbeeld

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name + "</h1>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}

Eigenschapskenmerken

Alle woningen hebben een naam. Daarnaast hebben ze ook een waarde.

De waarde is een van de attributen van de eigenschap.

Andere attributen zijn: opsombaar, configureerbaar en beschrijfbaar.

Deze attributen bepalen hoe toegang tot de eigenschap kan worden verkregen (is het leesbaar?, is het beschrijfbaar?)

In JavaScript kunnen alle attributen worden gelezen, maar alleen het value-attribuut kan worden gewijzigd (en alleen als de eigenschap beschrijfbaar is).

(ECMAScript 5 heeft methoden voor het verkrijgen en instellen van alle eigenschapskenmerken)


Prototype-eigenschappen

JavaScript-objecten erven de eigenschappen van hun prototype.

Het deletesleutelwoord verwijdert geen overgenomen eigenschappen, maar als u een prototype-eigenschap verwijdert, heeft dit invloed op alle objecten die zijn overgenomen van het prototype.