W3Data.JS: wat het is en hoe je het kunt gebruiken
W3Data.JS vormt samen met W3.JS en W3.CSS een platform voor het maken van responsive websites.
W3Data.JS is een JavaScript-bibliotheek, die het toepassen van een aantal regelmatig voorkomende functies een stuk eenvoudiger maakt. Het gaat dan voornamelijk om het manipuleren van gegevens.
Op het moment dat dit wordt geschreven is het versie-nummer 1.31. Het wordt actief ontwikkeld en onderhouden.
De meest opvallende eigenschappen zijn:
- Klein: De hele bibliotheek is maar 5.7 kB groot. Als je het minificeert
blijft daar maar 3.7 kB van over.
Doordat het klein is laadt het snel. Door de efficiënte code werkt het ook snel. - Gemakkelijk te leren en eenvoudig in het gebruik.
Veel van dit soort bibliotheken gebruiken een speciale syntax voor het aanroepen van functies. Die is vaak lastig om te leren. W3Data.JS heeft dat niet, waardoor de leercurve vlak is. - Het werkt voor alle apparaten: PC/laptop, tablet en smartphone. Speciale versies voor mobiele apparaten zijn niet nodig.
Bij de naam W3 denk je al gauw aan W3C, het WorldWide Web Consortium. Hier gaat dat niet op. W3Data.JS wordt gemaakt door w3schools, een website van Refsnes Data, een software en consulting bedrijf uit Noorwegen.
Je kunt W3Data.JS direct vanaf de w3schools-server (een CDN) in je document
opnemen. Op w3schools vind je de juiste URL. Je kunt W3Data.JS ook zelf
downloaden en hosten. De code om W3Data.JS in je document op te nemen luidt:
<script type="text/javascript" src="w3data.js"></script>
Als je W3Data.JS zoekt op de website van w3schools moet je kijken onder W3.CSS. De reden om W3Data.JS bij W3.CSS te plaatsen is niet duidelijk.
Het ligt voor de hand te denken dat er een overlap is tussen W3Data.JS en W3.JS. Dat is juist. De namen van attributen en methodes zijn echter verschillend. De twee bibliotheken zijn zo gemaakt dat je naast elkaar kunt gebruiken in het zelfde document. In de praktijk zul je ze allebei nodig hebben.
Wat kun je met W3Data.JS?
In je document wordt een object gemaakt, met de naam w3data. Dit object heeft geen properties, maar alleen
methodes en een paar attributen.
- Data uit een JSON-object van een webserver halen en tonen.
Dit kan voor zowel een enkel JSON-object als voor een hele serie JSON-objecten zijn.
Om aan te geven waar data uit bijvoorbeeld een JSON-object in een tabel-cel moet worden geplaatst gebruik je:
<td>{{ naam van het veld in het JSON-object }}</td>
Om aan te geven dat iets worden herhaald (lees: de hele lijst moet worden doorlopen) gebruik je het attribuut w3-repeat. - Afrolmenu's en tabellen vullen met gegevens. Met één regel code vul je een hele tabel of menu.
- Data filteren in een tabel, lijst of een listbox. Je kunt hiermee snel gegevens opzoeken in lange lijsten, door
een deel van de gegevens in te typen in een invoerveld.
Deze functionaliteit komt overeen met Jets.js. - HTML-code uit het ene bestand tonen in een ander bestand. Hiermee kun je bijvoorbeeld een menu op al je pagina's
laten verschijnen. Je hoeft het menu maar éénmaal te programmeren. Een wijziging werkt gelijk door op alle pagina's
van je site.
Dit lijkt veel op Server-side Include (SSI). Het verschil is dat bij SSI de bestanden door de server worden samengevoegd. Bij de W3-methode wordt het geregeld door de client-computer (= de PC van de gebruiker). Dat geeft extra dataverkeer als de te includen file nog niet in de browsercache staat. - Data van een webserver tonen. Voorbeelden van scripts en databases zijn beschikbaar:
PHP met MySQL, NodeJS met MYSQL, ASP.NET met Razor en SQL Lite,
PHP met MS-Access, ASP.NET met VB en MS Access. - Het linken van andere HTML-bestanden is om veiligheidsredenen beperkt to het eigen domein.
- Controllers maken. Met een controller kun je data bewerken alvorens deze te tonen.
- HTML-code uit het ene bestand tonen in een ander bestand. Hiermee kun je bijvoorbeeld een menu op al je pagina's
laten verschijnen. Je hoeft het menu maar éénmaal te programmeren. Een wijziging werket gelijk door op alle
pagina's van je site.
Dit lijkt veel op Server-side Include (SSI). Het verschil is dat bij SSI de bestanden door de server worden samengevoegd. Bij de W3-methode wordt het geregeld door de client-computer (= de PC van de gebruiker). Dat geeft extra dataverkeer als de te includen file nog niet in de browsercache staat.
