W3.JS: wat het is en hoe je het kunt gebruiken

W3.JS vormt samen met W3Data.JS en W3.CSS een platform voor het maken van responsive websites.

W3.JS is een JavaScript-bibliotheek, die het toepassen van een aantal regelmatig voorkomende functies een stuk eenvoudiger maakt.

Op het moment dat dit wordt geschreven is het versie-nummer 1.04. Het wordt actief ontwikkeld en onderhouden.
De meest opvallende eigenschappen zijn:

• Klein: De hele bibliotheek is maar 11.9 kB groot. Als je het minificeert is dat nog maar 8.9 kB.
  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. W3.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. W3.JS wordt gemaakt door w3schools, een website van Refsnes Data, een software en consulting bedrijf uit Noorwegen.

Je kunt W3.JS direct vanaf de w3schools-server (een CDN) in je document opnemen. Op w3schools vind je de juiste URL. Je kunt W3.JS ook zelf downloaden en hosten. De code om W3.JS in je document op te nemen luidt:
<script src="w3.js"></script>

Het ligt voor de hand te denken dat er een overlap is tussen W3.JS en W3Data.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 W3.JS?
In je document wordt een object gemaakt, met de naam w3. Dit object heeft geen properties, maar alleen methodes en een paar attributen.

• HTML-elementen tonen en verbergen. Dit gebeurt door het omzetten van de CSS-eigenschappen display:block in display:none, of omgekeerd. Er is ook een T0ggle-function die zelf uitzoekt of iets zichtbaar is of niet de zichtbaar vervolgens omzet.
• Klassen aan HTML-elementen toevoegen en verwijderen. Dat is handig om de opmaak van elementen in real-time aan te passen. Er is ook een Toggle-function beschikbaar, die zelf uitzoekt of een element een klasse heeft en die vervolgens verwijdert of toevoegt.
• Styles toevoegen aan HTML-elementen, bijvoorbeeld de achtergrondkleur. Dit kun je gebruiken om de achtergrond van bijvoorbeeld groen te veranderen in geel en weer terug.
• 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.
• Sorteren. Dit kan met zowel tabellen als lijsten. Er kan alleen oplopend alfabetisch worden gesorteerd.
• Een diashow tonen. De show start al of niet automatisch, en je kunt er knoppen bij gebruiken voor de volgende of de vorige dia. Het werkt snel en eenvoudig, maar hier zijn mooiere oplossingen voor. Vloeiende overgangen moet je zelf programmeren.
• Data van een webserver ophalen.
• 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.
• 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.
• Het linken van andere HTML-bestanden is om veiligheidsredenen beperkt to het eigen domein.

Om te kunnen selecteren worden selectors gebruikt. Een selector kan zijn:

• Een tag-name. Selecteer bijvoorbeeld in één keer alle <p>-tags. Vergelijkbaar met getElementsByTagName() in gewoon JavaScript.
• Een class-name. Selecteer bijvoorbeeld in één keer alle HTML-elementen met de klasse 'geel'. Vergelijkbaar met getElementsByClassName() in gewoon JavaScript (In W3.JS werkt dit echter fundamenteel anders).
• Een id. Hiermee selecteer je één enkel element. Lijkt op getElementById() in gewoon JavaScript.