Html attribuut aanpassen met Javascript

Javascript kan in principe alles binnen een html-document aanpassen. In dit voorbeeld kijken we naar de mogelijkheid om attributen in de html-tags aan te passen. Zo is het bijvoorbeeld mogelijk om het src-attribuut van een img-tag of i-frame te veranderen, of het href-attribuut van een a-tag.

In dit voorbeeld gebruiken we een iframe om een youtube video te vertonen. Met Javascript veranderen we het src-attribuut zodat binnen hetzelfde i-frame verschillende video’s vertoont kunnen worden.

Stap 1. Om te beginnen hebben we een nieuw html-document nodig met in de body-tag een iframe naar een youtube video. Youtube geeft bij iedere video de mogelijkheid de video te delen. Bij de opties voor ‘delen’ kun je de juiste iframe code kopieren.  We willen later met Javascript aanpassingen doen aan de instellingen van het iframe. Daarom voegen we een id-attribuut toe met de naam ‘video’, zodat Javascript het iframe makkelijk kan vinden. Nadat we een iframe hebben toegevoegd aan ons html-document plaatsen we twee a-tags die als knoppen gebruikt gaan worden om het src-attribuut van het iframe te veranderen.

<body>
     <iframe id=”video” width=”560″ height=”315″ src=”//www.youtube.com/embed/video” frameborder=”0″ allowfullscreen></iframe>
     <a href=”#”>Javascript voor beginners</a>
     <a href=”#”>Javascript voor gevorderden</a>
</body>

Stap 2. De beide knoppen moeten een Javascript functie uitvoeren als er op geklikt wordt. De functies die uitgevoerd moeten worden zijn zelfbedachte functies, daarom moeten we de functies zelf beschrijven in de script-tag. We noemen de functies: ‘filmBeginners()’ en ‘fimlGevorderden()’. Javascript moet aanpassingen doen aan het iframe ‘. Daarom geven we Javascript eerst de opdracht dit iframe met de id ‘video’ op te zoeken in het html-document. Om die zoektocht maar 1 keer te hoeven maken wordt de zoekopdracht opgeslagen in een variabel.

Let op! Youtube gaat ervan uit dat video’s online gedeeld worden. Als een video vertoont moet worden op een website op je computer, moet de url die youtube geeft aangevuld worden met ‘http:’ voor de url : src=”http://www.youtube.com/embed/video”

<body>
<iframe id=”video” width=”560″ height=”315″ src=”http://www.youtube.com/embed/video” frameborder=”0″ allowfullscreen></iframe>
<a href=”#” onclick=”filmBeginners()”>Javascript voor beginners</a>
<a href=”#” onclick=”filmGevorderden()”>Javascript voor gevorderden</a>

<script type=”text/javascript”>
var video=document.getElementById(“video”);

function filmBeginners()
{
}

function filmGevorderden()
{
}
</script>

</body>

Stap 3. Het iframe heeft meteen al een ingevuld src-attribuut, in dit geval wordt bij het laden van de pagina de film voor beginners vertoont. Als er op de knop met de functie ‘filmGevorderden()’ geklikt wordt, moet de waarde van het src-attribuut aangepast worden met een nieuwe url. Die url zoeken we ook weer op op youtube en plakken die in onze functie.

<script type=”text/javascript”>
var video=document.getElementById(“video”);

function filmBeginners()
{
     video.src=”http://www.youtube.com/embed/videoBeginners”;
}

function filmGevorderden()
{
     video.src=”http://www.youtube.com/embed/videoGevorderden”;
}
</script>

Stap 4. We hebben nu een mooi voorbeeld van een youtube videospeler met een eigen afspeel lijst. Maar deze manier van functies gebruiken wordt veel werk als we een lange afspeel lijst hebben. Als we de functie een beetje aanpassen hoeven we maar 1 functie te maken. We maken een nieuwe functie met de naam ‘veranderFilm()’ en gaan gebruik maken van de ronde haken van de functie ( ) om parameters te versturen naar de functie, in dit voorbeeld wordt tussen de haken aangegeven welke url de functie moet invullen bij het src-attribuut.

Let op! Bij het doorgeven van de url wordt er gebruik gemaakt van enkele leestekens ‘ ‘ binnen dubbele leestekens ” “.

<body>
<iframe id=”video” width=”560″ height=”315″ src=”http://www.youtube.com/embed/yQaAGmHNn9s” frameborder=”0″ allowfullscreen></iframe>
<a href=”#” onclick=”veranderFilm(‘http://www.youtube.com/embed/videoBeginners’)“>Javascript voor beginners</a>
<a href=”#” onclick=”veranderFilm(‘http://www.youtube.com/embed/videoGevorderden’)“>Javascript voor gevorderden</a>

<script type=”text/javascript”>
var video=document.getElementById(“video”);

function veranderFilm(videoUrl)
{
     video.src=videoUrl;
}

</script>
</body>