Hyperlinks
Werken met hyperlinks in JavaScript
De HTML-elementen hyperlink en anker kun je gebruiken als standaardobjecten in JavaScript.
Desgewenst kun je hyperlinks en ankers in je JavaScript programma maken.
Elke hyperlink die je in je webpagina maakt is in JavaScript het standaardobject Link.
Alle hyperlinks in een pagina vormen tezamen de tabel links
Met hyperlinks acties in werking zetten.
Bij een hyperlink horen drie event handlers; onClick (voor klikken), onMouseOver (voor aanwijzen) en onMouseOut (voor hyperlink met de muis verlaten).
Wil je dat als er op een hyperlink wordt geklikt, er eerst iets gebeurd voordat de hyperlink wordt geactiveerd, dan moet je aan de hyperlink de event onClick toevoegen, en aan de event handler de gewenste opdracht koppelen.
Event handler aan hyperlink toevoegen
Een event handler voor een hyperlink zet je in de tag a href;
<a href="adres" onEvent="actie"> ... </a>
|
Als actie kun je JavaScript opdrachten gebruiken. Zoals;
<body>
Naar de <a href ="http://www.sitemasters.be" onClick='window.alert("Jammer dat je deze tutorial nu al verlaat!")'>beginpagina</a> van Sitemasters.be
</body> |
test hier
*WAARSCHUWING* Gebruik onMouseOver nooit om een alert te koppelen aan een hyperlink.
Als je dat doet, kun je niet meer op de hyperlink klikken; want er verschijnt steeds opnieuw een alert voordat je kunt klikken.
Een functie aan een hyperlink koppelen
In JavaScript kun je aan een hyperlink een functie koppelen (in plaats van een bestemming). Als op de hyperlink wordt geklikt, wordt de functie uitgevoerd.
Je maakt zo'n functie-hyperlink door als waarde voor het attribuut href de tekst javascript: te tikken,
gevolgd door de functienaam van de functie die moet worden uitgevoerd.
<a href="javascript:funcite()"> ... </a>
|
<html><head><title>Functies aanroepen met hyperlinks</title><script type="text/javascript">
function toon_titels()
{
alert("Enkele titels:
Walls and Bridges
" + "Imagine
Two Virgins")
}
</script></head><body>
<h3>John Lennon</h3>
John Lennon werd in de jaren zestig als zanger en muzikant bekend toen hij ritmeguitarist en componist was van het Britse muziek ensemble <b>The Beatles</b>. Na het uiteengaan van The Beatles in 1970 maakt Lennon diverse <a href="javascript:toon_titels()">solo-platen</a>.
</body></html>
|
Clickable images
Uiteraard kun je ook een afbeelding tot een hyperlink ofwel clickable image maken. Aldus;
<html><head>
<script type="text/javascript">
function reageer()
{
alert("Je kunt zelf knoppen maken")
}
</script> </head>
<body><center>Druk op de knop en zie wat er gebeurt!<br><br>
<a href="javascript:reageer()"><img src="http://www.sitemasters.be/web/avatars/177.jpg" border=0></a>
</center></body></html>
|
Hyperlinks en ankers maken van strings
Met de methode link() en de methode anchor() kun je binnen je JavaScript programma's van een string een hyperlink dan wel een anker maken.
Hyperlink maken met JavaScript-opdracht
Wil je in je script van een string een hyperlink maken, dan gebruik dan de methode link() van het standaardobject String. De opdracht bestaat uit;
*De opdracht document.write()
*Als de parameter bij write() gebruik je;
* de tekst die als hyperlink moet dienen en
* de methode link(), die je als parameter de bestemming van de hyperlink geeft;
document.write("sitemasters".link("http://www.sitemasters.be"))
|
Anker maken met JavaScript opdracht
Wil je in je script van een string een anker maken, gebruik dan de methode anchor() van het standaardobject String(). Deze opdracht bestaat uit;
*De opdracht document.write()
*Als de parameter bij write() gebruik je;
* de tekst die als anker moet fungeren
* de methode anchor(), die je als parameter de naam van het anker geeft;
document.write("tekst".anchor("ankernaam"))
|
Hyperlinks en ankers als standaardobjecten in JavaScript
Alle hyperlinks in een webpagina vormen ttezamen het standaardobject links; alle ankers in een webpagina vormen tezamen het standaardobject anchors.
Zowel links als anchors is opgebouwd als een tabel; beide zijn eigenschappen van document.
Verwijzen naar hyperlinks en ankers
Elke hyperlink heeft een linknaam. Je verwijst naar een hyperlink met de linknaam;
Elke anker heeft een ankernaam. Je verwijst een anker met de ankernaam;
document.anchors[index].name
|
Elke linknaam is een variabele, waarvan de waarde het adres is van de hyperlink. Wil je het adres tonen van de tweede hyperlink (die met index 1 dus), dan gebruik je;
document.write(document.links[1])
|
Elke ankernaam is een variabele, waarvan de waarde de ankernaam is. Wil je de naam van het tweede anker (die met index 1 dus) tonen, dan gebruik je;
document.write(document.anchors[1].name)
|
Einde
Zo dan zijn we nu aan het einde gekomen van deze tutorial, enige vragen kun je aan mij stellen door mij een private message te sturen en als het echt belangrijk is vraag je maar voor mijn msn adres.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.89) 
Lees de nota's (0)