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:
<style>
h1#koptekst
{
font-family:”Courier New”, Courier, monospace;
font-size:36px;
color:#300;
}
</style>
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>
<script type=”text/javascript”>
function klein()
{
}
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.
<script type=”text/javascript”>
var koptekst=document.getElementById(“koptekst”);
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.
<script type=”text/javascript”>
var koptekst=document.getElementById(“koptekst”);
function klein()
{
koptekst.style.fontSize=”18px”;
}
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.