HTML met parameters

Sommige URL's bevatten behalve het pad naar een .HTML-bestand ook nog een zogenaamde "Query". Dat is een toevoeging waarin parameters staan waaruit de aangeroepen pagina kan afleiden wat er wordt verlangd.

In de URL wordt een query gescheiden van het pad naar de .HTML door een "vraagteken" ?. De verschillende parameters worden van elkaar gescheiden door een "ampersand" &.

Voorbeeld: Als je in de zoekmachine Google een opdracht geeft om de Nederlandstalige pagina's te doorzoeken op de naam "Jansen", wordt er een URL gelanceerd die er als volgt uit ziet:

https://www.google.com/search?q=Jansen&restrict=Nederlands&btnG=Google+zoeken

Op deze bladzijde wordt uitgelegd hoe je dat dat voor je eigen website kunt toepassen.
De code staat onderaan deze pagina. Je kunt hem ook downloaden.

• Er worden twee items besproken:
  1. De opbouw van een query,
  2. Het JavaScript om de pagina op de query te laten reageren.
  
   
• In de inleiding is al een voorbeeld gegeven van een URL met een query erin:

  https://www.google.com/search?q=Jansen&restrict=Nederlands&btnG=Google+zoeken

• In de URL wordt een query gescheiden van het pad naar de .HTML door een "vraagteken" ?. Het query-gedeelte in bovenstaande URL is de query dus:

  ?q=Jansen&restrict=Nederlands&btnG=Google+zoeken

• De verschillende parameters worden van elkaar gescheiden door een "ampersand" &. Elke parameter wordt gevolgd door een "is-gelijk"-teken, met direct daarna een waarde (string). Spaties mogen worden gebruikt, maar wees er voorzichtig mee. Soms is het resultaat niet voorspelbaar. Als je toch spaties nodig hebt, vervang ze dan door "underscores" _ , of gebruik, zoals Google dat doet, een plus-teken + , of kies een ander karakter.
• Er zijn hier drie parameters:

  º	q	Waarde is "Jansen"
  º	restrict	Waarde is "Nederlands"
  º	btnG	Waarde is "Google+zoeken"

  Voor Google is dit de opdracht om te zoeken naar "Jansen", waarbij er een beperking is tot Nederlandstalige websites en de methode "Google-zoeken" moet worden gebruikt.
• Bij het zelf ontwikkelen van een website ben je vrij om de parameters zelf te kiezen. Let er wel op dat je voor je zelf begrijpelijke namen kiest, zodat een en ander onderhoudbaar blijft.
   
• Het JavaScript dat je nodig hebt om de parameters uit de query op te halen werkt, zonder in details te treden, als volgt:
  • In de pagina waaraan de query wordt meegegeven staat een JavaScript-function getParam(id,def). id is de naam van de parameter die uit de query moet worden opgehaald. De variabele def bevat de zg. "default". Deze wordt gebruikt als er geen waarde in de query staat.
    De Nederlandse term voor "default" is "verstekwaarde" (verstek in de zin van "afwezig").
  • Eerst wordt gekeken of er wel een query aanwezig is, en of id wel is opgegeven. Als er géén query is opgegeven of als id niet is meegegeven wordt de functie afgebroken, waarbij de waarde van def wordt geretourneerd.
    Merk op dat de functie null teruggeeft als def (ook) niet is opgegeven.
  • Als alles goed gegaan is worden alle hoofdletters in de query omgezet in kleine letters.
  • Vervolgens wordt id opgezocht. Als deze niet wordt gevonden geeft de functie de waarde van def terug. Als id wel wordt aangetroffen wordt de string die volgt na het =-teken teruggegeven, tot aan de '&' (of het einde van de string als id de laatste parameter in de query was).
   
• Om je website dynamisch op de parameters te laten reageren is het noodzakelijk de pagina voor een groot deel in JavaScript te schrijven. Zie ook het item "HTML laten genereren door JavaScript".
• Het is niet mogelijk om parameters te retourneren naar de aanroepende pagina, zoals dat in een "echte" programmeertaal mogelijk is. Met JavaScript functies zoals history.back() begin je niets. Als je toch parameters wilt teruggeven kun je dat bereiken door de aanroepende pagina opnieuw aan te roepen, waarbij je zelf de query maakt en meegeeft.
  Voorbeeld:

Stel, je heb in de file a.htm vastgesteld dat de variabele abc gelijk is aan 25. Dit geef je door aan de file b.htm. Je kunt dat doen door in JavaScript een string te maken waarin de URL met query staat:

var s = 'b.htm?abc=' + abc;
(op dit moment geldt: s = 'b.htm?abc=25'.
Nu van pagina wisselen:)
window.location = s

In b.htm blijkt vervolgens dat abc=456 moet zijn. Je gaat nu terug naar a.htm met:

window.location = s;
waarbij: s = 'a.htm?abc=456'

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.

Gebruik:

• De code staat in de <HEAD>. De aanroep van de function kan ook in de <BODY> staan.

De code ziet er als volgt uit:

(Zet dit script in de <HEAD>)

<script>
function getParam(id,def) { // Trap query parameters
  if (!window.location.search || ! id) {
    return def;
  } else {
    var _scrap = location.search;
    if (_scrap.indexOf('?'+id+'=') < 0 && _scrap.indexOf('&'+id+'=') < 0)
      return def;   // parameter niet gevonden
    var _par_begin = _scrap.indexOf(id);
    var _par_end = _scrap.indexOf('&',_par_begin+id.length+1);
    if (_par_end < _par_begin) { _par_end = _scrap.length; }
    if (_par_begin != -1) {
      return
        unescape(_scrap.substring(_par_begin+id.length+1,_par_end));
    } else {
     return def;
    }
  }
}
</script>

(Onderstaande code staat bij de function getParam() in de <HEAD>, of in een apart JavaScript in de <BODY>.

//
// Voorbeelden van aanroep van de function getParam()
// met de gewenste parameter en de verstekwaarde:
//
 
// Voorbeeld 1: Haal parameter q uit de query, zet het resultaat in de variabele zoekstring.
// Als q niet in de query voorkomt wordt 'Petersen' gebruikt.

var zoekstring = getParam(q,'Pietersen');

 
// Voorbeeld 2: Haal parameter p uit de query, zet het resultaat in de variabele zoekgetal.
// Als p niet in de query voorkomt wordt 0 (nul) gebruikt.
// N.B.: p is bedoeld om te gebruiken als getal, dus om mee te rekenen.

var zoekgetal = parseFloat(getParam(p,'0'));

Downloaden:
 
Druk op de knop:  File: voorb074.zip, 508 bytes.

Opmerking:
 
Zie ook het item: JavaScript-bestand met parameters in een query-string
 
Met deze query-techniek kun je bijvoorbeeld ook het onderwerp van een mail direct invullen als je gebruik maakt van mailto om via een link je e-mail programma op te starten:

<a href="mailto:sfboukes@gmail.com?subject=Mooie Website">Stuur eens een mailje!</a>

Dit werkt met elke moderne mail-client.