HTML/Basiscursus/Scripts

In dit hoofdstuk gaan we leren hoe je scripts moet implementeren in je HTML code. We gaan er niet diep op in, maar bespreken louter en alleen de basis van scripts. Ze zijn voornamelijk bedoelt om een webpagina dynamischer te maken dan wat HTML toelaat. Er zijn verschillende scripttalen en de meest gekende zijn JavaScript en PHP. Scripts kun je verdelen in 2 grote groepen, client-side en server-side scripts.

Client-side scripts

Client-side scripts worden uitgevoerd door de browser zelf en kunnen wanneer een webpagina geladen is nog veranderingen doorvoeren. Nog een voordeel is dat zo’n script gegevens van de browser en de gebruiker kan achterhalen en daarop kan inspelen. Een nadeel is dat je broncode door iedereen kan worden bekeken. De 2 meest gekende zijn JavaScript en VBscript. We gaan alleen maar JavaScript bespreken omdat het de meest gekende is.

Script toevoegen

Je kunt je script plaatsen in zowel de ‘’head’’ als de ‘’body’’ van een HTML document. Wanneer je scripts toevoegt in de ‘’head’’ is dat voornamelijk voor scripts die niet echt thuishoren in de ‘’body’’ omdat ze bijvoorbeeld geen uitvoer genereren. Om een script toe te voegen moet je het script element gebruiken.

HTML-code: Scripts toevoegen

<script language=”javascript” type=”text/javascript“>
//code
</script>

Met de attributen ‘’language’’ en ‘’type’’ geef je aan in welke taal de script is. De reden dat we dit tweemaal doen is om het vroeger met ‘’language’’werd gedaan, maar nu wordt het aangeraden het met type te doen.

HTML-code: Scripts toevoegen

<script type="text/javascript">
	document.write("Hallo Wereld");
</script>

Dit script toont de tekst "Hallo Wereld!" op het scherm.

Commentaar

Je kunt commentaar bij je script plaatsen hierdoor kun je extra informatie geven over wat het script nu precies doet. Je kunt op twee manieren commentaar schrijven.

JavaScript-code: Commentaar

//Met dit kun je één regel commentaar schijven

/*
Met dit kan ik 
meerdere regels
Commentaar schrijven.
*/

Externe script

Je kunt ook gebruik maken van externe scripts. Dit zijn script die in een apart document worden gezet omdat ze bijvoorbeeld bij meerdere pagina’s worden gebruikt.

JavaScript-code: Externe scripts toevoegen

function hallowereld(){
	document.write("Hallo Wereld!<br />");
}

Dit kun je plaatsen in een externe script in een zogenaamde .js bestand. Hieronder zie je hoe je het script moet koppelen aan het HTML document.

JavaScript-code: Externe scripts toevoegen

<script type="text/javascript" src="script.js"></script>

Server-side scripts

Server-side scripts worden verwerkt op de server waar je de webpagina haalt. Daardoor kan het allerlei functionaliteiten gebruiken van de server en heeft het makkelijk toegang tot informatie op de server.Nog een voordeel is dat de broncode verborgen blijft. Een nadeel is dat dit soort script niets kunnen aanpassen aan het HTML document zodra het geladen is. Zoals hierboven genoemd is PHP de bekendste server-side scripttaal is, zal hieronder een voorbeeld van PHP code gegeven worden.

Script toevoegen

PHP-code: Server-sided script

<?php
//1 regel commentaar
#1 regel commentaar
/*
Meerdere regels
commentaar
*/
print("Hallo Wereld<br />");
echo "Hallo Wereld<br />";
?>

Resultaat

Hallo Wereld
Hallo Wereld

Conclusie

Ieder soort script heeft zijn eigen voor en nadelen. Je kunt gelukkig client-side script zoals JavaScript en server-side script zoals PHP met elkaar combineren, zodat je gebruik kunt maken van beide hun voordelen.

Zie ook