HTML Javascript
JavaScript geeft je de vrijheid om interactiviteit en reactiesnelheid toe te voegen aan je webpagina's. Een script is een klein stukje programma waarmee je extra mogelijkheden aan je HTML-documenten toe kunt voegen.
 |
Het wordt bijna op elke website gebruikt. Zo kan een script bijvoorbeeld reageren op acties van de gebruiker, het valideren van webformulieren, het detecteren van de browser of via een pop-up een waarschuwingsvenster met een bericht genereren en nog veel meer. Dit script kan worden geschreven met behulp van Javascript.
JavaScript is een programmeertaal, waarmee je kunt bepalen hoe een webpagina zich gedraagt. De codes van de script-taal worden, met het HTML-document, geladen en uitgevoerd door de browser van de gebruiker. Hierdoor zou JavaScript gezien worden als uitbreiding van HTML. |
Het script element
Het script element wordt gebruikt om een script te definiëren, zoals een JavaScript, Jscript, VBScript. Net zoals bij HTML worden ook alle opdrachtregels van JavaScript opgenomen tussen een begin en een eind tag.
<!-- HTML4 en (x)HTML -->
<script type="text/javascript">
document.write('Dit is met JavaScript geschreven.');
</script>
 |
Het type attribuut met de waarde "text/javascript" is optioneel. |
Scripts verbergen voor oude browsers
Hoewel de meeste browsers tegenwoordig JavaScript ondersteunen kan het toch wel eens voorkomen dat een gebruiker van je website een oude browser gebruikt zonder JavaScript ondersteuning. Indien dit het geval is worden alle JavaScript code in het HTML-document door de browser als gewone tekst weergegeven.
Je kunt dit voorkomen door de JavaScript code tussen commentaar-tags te plaatsen. De beëindiging van het commentaar moet je door twee slashes vooraf laten gaan, zodat ook het script begrijpt dat het om commentaar gaat. De gebruiker van een oude browser krijgt dan geen ongewenste tekst te zien.
Voorbeeld:
<script>
<!--
document.write('Dit is met JavaScript geschreven.');
//-->
</script>
Commentaar toevoegen aan JavaScript
Het is gemakkelijk voor jezelf als je je JavaScript-code voorziet van commentaar. Je kunt op deze manier bij het wijzigen van je code makkelijk iets terugvinden. Commentaarregels in een script worden voorafgegaan door twee slashes. Al het code achter de slashes wordt genegeerd door de browser.
Voorbeeld:
<script>
// Mijn eerste JavaScript-code
document.write('Dit is met JavaScript geschreven.');
</script>
Het noscript element
Het noscript element biedt een alternatief voor browsers die de scripttaal niet ondersteunen, of voor gebruikers die de script optie in hun browser hebben uitgeschakeld. Je kunt in het noscript element de zelfde tags gebruiken die je normaal ook gebruikt in het body element.De inhoud in het noscript element wordt alleen weergegeven als scripts niet worden ondersteund, of zijn uitgeschakeld in de browser van de gebruiker. Een browser, waarin scripting wel wordt ondersteund of is toegestaan, is de inhoud van het noscript element niet te zien.
Voorbeeld:
<script>
document.write('Dit is met JavaScript geschreven.');
</script>
<noscript>Sorry, uw browser ondersteunt geen scripts!</noscript>
Interne functie aanroepen
Als je met JavaScript werkt, zal je gebruik gaan maken van een functie. Een functie is een groep opdrachten die telkens wordt uitgevoerd als je de functie aanroept.Je kunt een interne functie definiëren in je HTML-document. Meestal wordt de script code aan het begin van een HTML-document, tussen de tags <head> en </head> geplaatst met behulp van het <script> element. Je kunt de script code ook ergens anders in je document plaatsen, als het maar tussen de <script> en </script> tag staat.
Voorbeeld:
<script>
function Hallo() {
document.getElementById( "voorbeeld" ).innerHTML = "Hallo JavaScript!";
}
</script>
Externe functie aanroepen
Bij het gebruik van JavaScript is het beter om de code gescheiden te houden van je HTML-documenten. Externe JavaScript is een bestand dat alleen script-code bevat en wordt opgeslagen met een ".js" bestandsextensie. Deze JavaScript-bestand wordt dan geladen in je HTML-documenten met behulp van het attribuut src.Externe JavaScript is ideaal wanneer de code wordt toegepast en de functie wordt aangeroepen op meerdere pagina's. Met externe JavaScript, kan je de JavaScript-code van een hele site veranderen door alleen de inhoud van het JavaScript bestand te wijzigen.
Aan de slag met externe JavaScript-code
Laten we beginnen met het maken van een externe JavaScript-bestand. Open notepad.exe (kladblok), of een andere teksteditor en neem de volgende JavaScript-code over:
function Hallo()
{
alert("Hallo, JavaScript");
}
Sla het bestand op als een JavaScript-bestand (.js) Zorg ervoor dat je het niet opslaat als een tekstbestand (.txt), geef het bestand de naam "script.js" (zonder aanhalingstekens). Maak nu een nieuw HTML-bestand en neem de onderstaande HTML-code over:
<html>
<head>
<script src="script.js" type="text/javascript"/></script>
</head>
<body>
<input type="button" onclick="Hallo();" value="Klik voor een voorbeeld" />
</body>
</html>
Sla dit bestand op als "index.html" (zonder aanhalingstekens) in dezelfde map als het JavaScript-bestand. Open nu het HTML-bestand in je webbrowser en het moet er dan ongeveer als volgt uitzien:
Gefeliciteerd! Je hebt je eerste functie aangeroepen door gebruik te maken van externe JavaScript! Je kunt nu heel eenvoudig de JavaScript-code van je HTML-document bewerken door het bestand "script.js" te openen in een teksteditor.
| Voor degenen die de bovenstaande code niet willen overnemen kunnen direct het resultaat bekijken door op het voorbeeld link hiernaast te klikken: |
| Voorbeeld |
