March 2014 – Lesmat

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>

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.

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>

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

</script>
</body>

ScrollY gebruiken als input voor Javascript

Sinds Html5 wordt in veel websites gebruik gemaakt van het scrollen om elementen in de pagina aan te sturen. Bijvoorbeeld een element dat met een fade-in verschijnt als de gebruiker de pagina naar beneden scrollt. Voor dit effect wordt Javascript gebruikt die afhankelijk van de scrollhoogte opdrachten uitvoert. Met deze techniek kunnen heel ingewikkelde effecten gemaakt worden die het ontwerp van je website echt verrijken. In dit voorbeeld kijken we naar een eenvoudige manier om Javascript met de scrollbalk te laten samenwerken. Deze manier heeft zijn beperkingen, maar is eenvoudig te begrijpen en heel geschikt om mee te beginnen.

Stap 1. Allereerst hebben we een html-document nodig met de script-tag in de body. Voor dit voorbeeld hebben we een scrollbalk nodig, dus laten we beginnen met de body groter te maken dan het browser venster. Hiervoor gebruiken we css. Om een element een hoogte in procenten te geven is het noodzakelijk de hoogte eerst bij ‘html’ te benoemen. In dit voorbeeld benoemen we de hoogte in 1 keer voor html en de body-tag tegelijk.

<head>
<style>
html, body
{
height:200%;
}
</style>
</head>

Stap 2. We gaan in dit voorbeeld Javascript een eenvoudige p-tag laten beïnvloeden door de scrollBalk. Om te beginnen plaatsen we een p-tag in de body. Omdat we deze p-tag willen beïnvloeden met Javascript geven we meteen een id attribuut met de naam ‘tekst’. Vervolgens laten we Javascript in het document zoeken naar de p-tag met id ‘tekst’.

Stap 3. Om de scrollbalk te gebruiken is het handig om te zien welke informatie de scrollbalk doorgeeft. In dit voorbeeld gebruiken we de waarde van ‘scrollY’. Als het html-document geopend wordt heeft de scrollY standaard de waarde 0; De bovenkant van de website is in beeld. Als de gebruiker scrollt verschuift de scrollbalk tegelijk met de website. Laten we er eerst voor zorgen dat we te zien krijgen welke waarde de scrollbalk doorgeeft als er gescrollt wordt. Hiervoor maken we een variabel met de naam ‘scrollY’. Die waarde verandert bij het scrollen. Daarom geven we Javascript de opdracht zelf op zoek te gaan naar de waarde van scrollY. Om de waarde van ‘scrollY’ zelf te kunnen zien plaatsen we die in p-tag ‘tekst’ met behulp van de Javascript eigenschap ‘innerHTML’. Let op, de variabele naam “ScrollY” mag niet hetzelfde geschreven worden als de waarde “scrollY”!

tekst.innerHTML=scrolly;
</script>

Stap 4. Bij het openen van het html-document wordt de waarde van scrollY in ‘tekst’ gezet. Scroll door de pagina en ververs het browservenster. Als ‘tekst’ nog in beeld is zul je zien dat er een andere waarde verschijnt. We gaan een paar aanpassingen doen zodat ‘tekst’ mooi in beeld blijft en we meteen bij het scrollen de waarde zien veranderen. Als Javascript merkt dat het html-document naar boven gescrollt wordt, laten we Javascript ‘tekst’ met het zelfde aantal pixels naar beneden plaatsen. Hierdoor lijkt het alsof ‘tekst’ blijft staan. Om dat te doen moet eerst de positie van ‘tekst’ ingesteld worden.

Vervolgens geven we Javascript de opdracht om iedere keer als er gescrollt wordt de functie ‘scrollen()’ uit te voeren. Dat is een functie die we zelf bedenken, en dus ook zelf moeten beschrijven. De functie ‘scrollen()’ doet 3 dingen: 1. De waarde van variabele ‘scrolly’ wordt bijgewerkt, 2. De waarde van variabele ‘scrolly’ wordt in ‘tekst’ geplaatst en 3. de css-top waarde van ‘tekst’ wordt aangepast. Omdat de waarde van ‘scrolly’ alleen een getal is, en css naast de waarde ook de eenheid moet weten, moet bij de nieuwe css-top waarde van Javascript de eenheid (+”px”) worden toegevoegd.

window.onscroll=scrollen;

function scrollen()
{
scrolly=window.scrollY;
tekst.innerHTML=scrolly;
tekst.style.top=scrolly +”px”;
}

</script>

Stap 5. De laatste stap van dit voorbeeld. We zien dat de waarde van ‘scrolly’ hoger en lager wordt bij het heen en weer scrollen. Deze waarde gebruiken we nu om ‘tekst’ in beeld te houden, maar we kunnen natuurlijk meer css eigenschappen beïnvloeden. Bijvoorbeeld de opacity. Als de waarde van ‘scrolly’ laag is, maken we de opacity van ‘tekst’ laag. Als de waarde van ‘scrolly’ hoger wordt, wordt de opacity van ‘tekst’ hoger. De waarde van ‘scrolly’ kan behoorlijk groot worden in vergelijking met de waarde van opacity, die mag variëren van 0 tot 1. Om een mooi fade-effect te krijgen delen we de waarde van ‘scrolly’ daarom door een groot getal. In dit voorbeeld door 200.

window.onscroll=scrollen;

function scrollen()
{
scrolly=window.scrollY;
tekst.innerHTML=scrolly;
tekst.style.top=scrolly +”px”;
tekst.style.opacity=scrolly/200;
}

</script>

Javascript functies

Met Javascript heb je veel extra mogelijkheden om een website extra interactiviteit te geven. In tegenstelling tot Html en Css is Javascript een script taal. Daardoor is het mogelijk Javascript ingewikkelde opdrachten te geven en zelf informatie te verzamelen, voor bijvoorbeeld het uitvoeren van formules.

Die Javascript opdrachten(functies) worden volgens vaste grammatica regels geschreven. Als een functie niet aan de juiste grammatica regels voldoet, wordt de functie niet uitgevoerd. Het is dus heel belangrijk dat Javascript functies goed geschreven worden.

Stap 1. Om te beginnen plaatsen we de script-tag in het html-document, tussen de body-tags (Javascript kan ook tussen de head-tags of als gekoppeld Javascript bestand toegevoegd worden ).

Stap 2. Het is nu mogelijk om bestaande Javascript functies uit te voeren, maar het is ook mogelijk om zelf functies te bedenken. Laten we eerst kijken naar een eenvoudig voorbeeld van de bestaande Javascript functie ‘alert()’. Deze functie geeft de opdracht een pop-up venster te openen.

<body>
<script type=”text/javascript”>
alert();
</script>
</body>

Laten we nu een eigen, nieuwe functie maken en bekijken hoe een functie in elkaar zit. Eerst vertel je Javascript dat je een functie maakt, vervolgens geef je een naam. Voor dit voorbeeld kiezen we voor de naam ‘popup’. Tussen de ronde haken die volgen ( ) kan informatie aan de functie door te geven. Dat is niet verplicht, de ruimte tussen de ronde haken mag leeg blijven. Tussen de accolades { } wordt de opdracht beschreven die Javascript moet uitvoeren.

<body>
<script type=”text/javascript”>
function popup(){}
</script>
</body>

Stap 3. De functie werkt op zich wel, maar er ontbreken nog 2 dingen. de functie heeft nog geen inhoud om uit te voeren, en er wordt nog geen opdracht gegeven de functie uit te voeren. Laten we onze zelf bedachte functie ‘popup()’ gebruiken om de bestaande functie ‘alert()’ in te schakelen. Vervolgens geven we de opdracht ‘popup()’ uit te voeren.

<body>
<script type=”text/javascript”>
function popup()
{
alert();
}

popup();

</script>
</body>

Zoals eerder beschreven is het mogelijk de ronde haken ( ) te gebruiken om informatie aan de functie door te geven. Zo kunnen we een zelfbedachte tekst binnen de pop-up plaatsen die opgeroepen wordt door onze functie.

<body>
<script type=”text/javascript”>
function popup()
{
alert“tekst”);
}

popup();

</script>
</body>

Stap 4. Als laatste stap kunnen we ook de ronde haken van onze eigen functie gebruiken om informatie door te geven aan de functie ‘alert()’. Bij het activeren van de functie ‘popup()’ wordt een tekst mee gegeven, in dit voorbeeld is het de tekst ‘Frank’. Bij het maken/beschrijven van de functie geven we aan dat de functie informatie krijgt toegestuurd. In dit voorbeeld wacht de functie op ‘naam’. Die ‘naam’ stuurt de functie weer door naar de functie ‘alert()’.

<body>
<script type=”text/javascript”>
function popup(naam)
{
alert(naam);
}

popup(“Frank”);

</script>
</body>

Als bij het activeren van de functie ‘popup()’ een andere tekst meegegeven wordt, bijvoorbeeld ‘hallo’, zal de functie deze tekst laten zien in het pop-up venster.

<body>
<script type=”text/javascript”>
function popup(naam)
{
alert(naam);
}

popup(“Hallo“);

</script>
</body>

Css aanpassen met Javascript

Als je goed kunt werken met html en css heb je een goede basis om mooie web designs te maken. Je zult echter wel snel aanlopen tegen de beperkte interactieve mogelijkheden van html en css. Natuurlijk kun je met bijvoorbeeld :hover, transition en animation je ontwerp wat interactiever maken, maar daar houdt het ongeveer ook wel mee op.

Na het leren van html en css is het een mooie vervolgstap om Javascript te gebruiken om je website meer interactie te geven. Met Javascript is het mogelijk om alles binnen je html-pagina aan te passen. Hier bekijken we een voorbeeld van een tekst die door verschillende knoppen een ander uiterlijk kan krijgen.

Stap1. Open een nieuw html-document en maak een koptekst. We willen het uiterlijk van de koptekst later aanpassen met Javascript. Daarom geven we de koptekst een id-attribuut zodat Javascript onze koptekst straks makkelijk kan vinden. Gebruik css om de koptekst te stylen.

<body>
<h1 id=”koptekst”>Koptekts</h1>
</body>

En vervolgens de css:

Stap 2. Maak nu een aantal knoppen die we kunnen aanklikken om verschillende css instellingen te kunnen aanpassen met Javascript. We gebruiken a-tags en voegen daar de Javascript opdracht ‘onclick’ aan toe om een Javascript functie uit te voeren.

<body>
<h1 id=”koptekst”>Koptekts</h1>
<a href=”#” onclick=”klein()”>klein</a>
<a href=”#” onclick=”rood()”>rood</a>
<a href=”#” onclick=”arial()”>arial</a>
</body>

Als er op de a-tags geklikt wordt, worden er een functie uitgevoerd. Omdat we zelf een functie(naam) bedacht hebben moeten we die functies ook zelf omschrijven binnen script-tags:

<body>
<h1 id=”koptekst”>Koptekts</h1>
<a href=”#” onclick=”klein()”>klein</a>
<a href=”#” onclick=”rood()”>rood</a>
<a href=”#” onclick=”arial()”>arial</a>

function rood()
{
}

function arial()
{
}
</script>
</body>

Stap 3. We willen dat Javascript css gaat veranderen van de koptekst. Daarvoor moeten we beginnen met Javascript de opdracht te geven om een html-tag met id ‘koptekts’ te zoeken. We gaan verschillende aanpassingen doen, maar willen niet dat Javascript steeds opnieuw het hele document moet doorzoeken naar dezelfde html-tag. Daarom maken we 1 keer een variabel en koppelen die aan de zoekopdracht.

Nu Javascript de koptekst kan vinden kunnen we de opdracht geven om verschillende css instellingen aan te passen. Javascript doet eigenlijk aanpassingen aan instellingen van de style-eigenschap. Daarmee worden de originele css waardes overschreven.

function rood()
{
koptekst.style.color=”#F00″;
}

function arial()
{
koptekst.style.fontFamily=”Arial, Helvetica, sans-serif”
}
</script>

We hebben in dit voorbeeld een paar css waardes aangepast met Javascript. Met Javascript is het mogelijk alle css waardes te overschrijven. Voor een goede werking is het wel belangrijk dat iedere css waarde die later aangepast moet worden, al vooraf beschreven staat in het css document.

Css class veranderen met Javascript

Javascript kan in principe alle html en css beïnvloeden binnen een document. Toch heeft het als nadeel dat je website technisch onleesbaar kan worden als je teveel aanpast met Javascript. Dat kan voor frustraties zorgen als je bijvoorbeeld met iemand anders samenwerkt aan een site of als je na lange tijd aanpassingen moet doen.

Een goede oplossing hiervoor is om css classes van html elementen toe te voegen of te verwijderen. Op die manier zijn de verschillende css opmaak instellingen goed zichtbaar omdat ze allemaal als classes in het css document terug zijn te vinden. Het enige wat Javascript doet is een css class weghalen of toevoegen aan een element. Je zult zien dat dat direct gevolgen heeft voor het uiterlijk van het html element. Als voorbeeld maken we een vierkante knop die rond wordt als erop geklikt wordt.

Stap 1. Start met een nieuw html document, met daarin een a-tag. Deze tag willen we later aanpassen met Javascript, daarom geven we alvast een id.

Vervolgens beschrijven we met css het uiterlijk van ‘knop’.

Stap 2. We hebben nu een vierkante knop. We willen dat die knop rond wordt als erop geklikt wordt. Het eerste wat we doen is het aangepaste uiterlijk beschrijven in een nieuwe class:

.rond
{
border-radius:50%;
}
</style>

Stap 3. De class waarin beschreven staat dat de knop rond moet zijn bestaat nu, maar heeft nog geen invloed omdat de class nog niet gekoppeld is aan de knop. Dat gaan we doen met Javascript. Om te beginnen moet de knop een Javascript functie uitvoeren als erop geklikt wordt. We noemen die functie ‘verandClass()’. Omdat Javascript die functie niet kent moeten we die zelf maken. Dat doen we binnen de script-tag.

function veranderClass()
{

}
</script>

Stap 4. Als de knop aangeklikt wordt, moet javascript een class bijschrijven in de html code, om precies te zijn in de a-tag met de id ‘knop’. Daarvoor moet Javascript eerst in het html document op zoek naar een tag met de id ‘knop’. Het is niet handig als Javascript bij iedere aanpassing opnieuw moet gaan zoeken. Daarom gebruiken we een variabel met de naam ‘knop’. Die symbool staat voor een html-tag met de id ‘knop’.

var knop=document.getElementById(“knop”);

function veranderClass()
{

}

</script>

Vervolgens kunnen we in de functie ‘veranderClass’ de opdracht geven de class ‘rond’ toe te voegen aan ‘knop’.

function veranderClass()
{
knop.className=”rond”;
}
</script>

We hebben nu een heel eenvoudig voorbeeld wat met 1 keer klikken werkt. Het blijft een simpele knop, maar het voorbeeld wordt net iets mooier als we kunnen wisselen tussen rond en vierkant. Als laatste stap gaan we de functie ‘veranderClass’ uitbreiden door Javascript te laten kiezen: Als de knop geen class ‘rond’ heeft wordt de class ‘rond’ toegevoegd. Als de knop wel een class ‘rond’ heeft wordt de class ‘rond’ verwijderd (en wordt de knop vierkant).

function veranderClass()
{
if(knop.className==”rond”)
{
knop.className=””;
}
else
{
knop.className=”rond”;
}
}
</script>