JavaScript-bestand met parameters in een query-string

Voor het overbrengen van parameters naar een HTML-bestand gebruik je een query-string. Die zet je direct achter de naam van het HTML-bestand, gescheiden door een vraagteken. Binnen de query-string kun je de verschillende parameters scheiden door een & (ampersand):

Met een eenvoudig script kun je de parameters door het HTML-bestand uit de query-string op laten pakken, zodat de parameters gebruikt kunnen worden. Aan de PC-kant doe je dat met JavaScript.
Aan de serverkant kan het ook. Aan bijvoorbeeld .ASP- en .PHP-bestanden kun je query-strings meegeven. Met name Content Management Systemen gebruiken dat om data over te dragen van de ene ASP-, PHP- of HTML-code naar de andere.

Feitelijk kun je query-strings gebruiken bij elk type bestand dat primair door de webserver wordt verwerkt. Bij HTML-files betekent dat: Direct naar de browser op de PC versturen. Bij .ASP- en .PHP-bestanden betekent dat, dat de webserver eerst zelf allerlei gegevens verzamelt, er HTML van maakt en het tenslotte naar de PC verstuurt.

Bij JavaScript-bestanden is dat anders. Die worden door een HTML-bestand gelinkt (dus door de browser op de PC). Aanvragen om een .JS-bestand te downloaden worden dus niet direct naar de webserver gestuurd, maar via een omweg.
De aanpak bij het verwerken van een query-string die aan een JavaScript-bestand is toegevoegd, is daarom heel anders dan je bij een .HTML-, .ASP- of .PHP-bestand zou gebruiken.

Op deze pagina wordt uit de doeken gedaan hoe je dat kunt aanpakken. De code kun je downloaden om zelf te gebruiken.
N.B.: In het item HTML met parameters wordt besproken hoe je de parameters uit de query-string van een HTML-bestand ophaalt met behulp van JavaScript.

• Er worden twee items besproken:
  1. De werking van het script
  2. Inbouwen in je eigen site
  3. Het nut van dit script
   
• Omdat de .js-bestanden door je HTML-code via een omweg van de server worden gehaald (zie boven) is het niet mogelijk om location.search te gebruiken. Bij het ophalen van de query-string van een HTML-bestand is dat nl. de aangewezen methode. Je moet dus wat anders doen.
• De werking van het script is -zonder in details te treden- als volgt:
• Als eerste moet je informatie over alle <script>-tags ophalen. Dat doe je met de function getElementsByTagName(naam), waarin naam de tag die je zoekt. In dit geval is dat 'script'.
• De function getElementsByTagName('script') geeft een object terug waarin zich een lijst bevindt met informatie over alle script-tags in het document.
   
• Het aantal tags in de lijst bepaal je met .length, net als bij een string of array.
• De informatie van elke tag apart kun je verkrijgen met de method item(). De filenaam van de .js-bestanden staat in het attribuut src.
• Om de filenaam van de derde script-tag op te halen luidt de code
   
  var x = document.getElementsByTagName('script').item(2).src
   
  Merk op dat de telling begint bij nul. Het eerste item heeft nr. 0, het tweede is nr. 1, enz.
• in deze lijst wordt de naam van het .js-bestand opgezocht. Daar zit ook de query-string bij.
• Bij JavaScript-code die in het document zelf staat, dus binnen de tag <script>... </script>, is het attribuut src afwezig. Dat komt als een lege string in de lijst terecht.
• Het eerste karakter van de query-string is het vraagteken. Met behulp van indexOf() bepaal je waar dat staat. Vervolgens splits je de query-string af met substr.
• De parameters worden uit de query string gehaald zoals beschreven in het item HTML met parameters.
 
• Om een parameter op uit de query-string bij een .js-file op te halen gebruik je de function getJsParam(jsfile,id,def). Deze function heeft drie parameters:
   

  Naam:		Betekenis:
  jsfile		Naam van de .js-file, zonder de extensie .js, waarvan de querystring moet worden gebruikt. Als de betreffende file niet in het document wordt gelinkt, geeft getJsParam() de waarde null terug.
  id		Naam van de parameter waarvan je de waarde wilt ophalen. Als id niet voorkomt in de query-string wordt de waarde van def teruggegeven.
  def		Default waarde van de parameter die je opvraagt.

   
• De function geeft null terug als jsfile en/of id en def niet zijn opgegeven.
   
• Het is op deze manier mogelijk om parameters op te halen uit query-strings van elk .js-bestand dat door het document wordt gelinkt, inclusief het .js-bestand dat de function getJsParam() bevat.
   
• Inbouwen in je eigen site is eenvoudig: De function getJsParam() staat in de file jsparams.js. Deze zet je in de <HEAD>. getJsParam() roep je aan op de plaats waar dat nodig is.
   
• Dit script heeft slechts een zeer beperkt nut. Je zult dit dan ook niet vaak nodig hebben. Een paar (mogelijke) toepassingen:
  
  • Bij het JavaScript-platform Prototype is een add-on beschikbaar met de naam Scriptaculous, waarmee je mooie effecten kunt maken. De Scriptaculous-modules die je nodig hebt geef je op in de query-string van een .js-bestand.
  • Voor de rekenaars onder ons:
    Een webserver die HTML-code voor je site genereert kan bepaalde taken overdragen aan de browser, zoals het uitvoeren van een berekening. Begindata voor die berekening kunnen met deze techniek kunnen aan de browser worden overgedragen, zonder dat server zelf scripts hoeft te schrijven of te wijzigen.
    Validatie van een script (bewijzen dat het script juist functioneert) is lastig als het telkens opnieuw door een server wordt gemaakt. Door een correct script te sturen en de beginparameters apart daarvan, omzeil je dit soort validatieproblemen.
    Het laten schrijven van HTML zelf is eenvoudig zelf te programmeren, zie het item HTML laten genereren door JavaScript.
    Een ander voordeel is dat de parameters die je meestuurt niet onmiddellijk zichtbaar zijn voor de gebruiker.

Voorbeeld:
In dit document wordt de file jsparams.js ingevoegd met de code:
 
  <script type="text/javascript" src="jsparams.js?a=1&b=2&naam=Ben"></script>
 
Aanroep van getJsParam(jsfile,id,def):

Parameterlijst:	Resultaat:	Opmerkingen:
('MijnJs','a','0')	null	File bestaat niet.
('jsparams.js','a','0')	null	De suffix .js moet worden weggelaten. Dit wordt gezien als een niet-bestaande file.
('jsparams','a','0')	1	Correcte aanroep.
('jsparams','nam','Mijn naam')	Mijn Naam	Ogenschijnlijk correcte aanroep. De para­meter nam is fout gespeld, waardoor de default-waarde wordt teruggegeven.
('jsparams','c','0')	0	Parameter c ontbreekt, waardoor de default-waarde wordt teruggegeven.
('jsparams','c')	null	Parameter c ontbreekt. Er is ook geen default-waarde ingesteld, waardoor null wordt teruggegeven.

Gebruik:

• De file jsparams.js staat in de <HEAD>. Aanroepen van getJsParam() kunnen in het hele document voorkomen.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<script></script>

Downloaden:
 
Druk op de knop:  File: voorb298.zip, 1014 bytes.