banner

Les 2: Belangrijke Javascript elementen (deel 2)

<p id="bewerken">

De style in deze paragraaf moet bewerkt worden.

</p>

Bovenstaande tekst is opgenomen in een paragraaf <p> en </p>.
Het gebruikte p-element is voorzien van de toevoeging id="bewerken".

§ 2.1: .style

In de vorige les hebben we gezien dat we door middel van de volgende regel de inhoud een element kunnen bewerken.
document.getElementById("naam van het id").innerHTML
Als je niet de inhoud maar de style van een element wilt veranderen dan gebruik je daar voor het opvragen van het id van het betreffende element (document.getElementById("naam van het id")): met daaraan toegevoegd:
.style
Hiermee geef je aan dat je de stijl van het element wilt veranderen. We hebben echter nog niet kenbaar gemaakt welke stijleigenschap we willen veranderen. Dat doen we door deze stijleigenschap op te nemen achter .style. Ook tussen het woord style en de gewenste propertie (eigenschap) neem je een . (punt) op.

Hieronder zie je een voorbeeldnotatie van de code binnen de functie:
Merk op dat 'backgroundColor' in Javascript aan elkaar geschreven wordt in camelCasing!


§ 2.2: Events -> onmouseover en onmouseout

Bovenstaande moet uitgevoerd worden als er een event plaatsvindt. In dit geval willen we dat dit gebeurt als de muis in het vlak komt of het vlak verlaat. Hier voor heb je de zogenaamde onmouseover voor het betreden van het vlak en onmouseout voor het verlaten van het vlak.

Het event onmouseover roept een functie aan die de inhoud en de stijl van de paragraaf verandert. Het event onmouseout verandert de inhoud en de stijl weer terug naar de originele staat. We dus hebben dus twee functie nodig:

  • De eerste functie wordt aangeroepen als het onmouseover-Event plaatsvindt. We maken hiervoor de functie "mouseIn()"
  • De tweede functie wordt aangeroepen als het onmouseout-Event plaatsvindt. We maken hiervoor de functie "mouseOut()"
Onze paragraaf (<p>) zou er dus als volgt uit kunnen zien:
P

Tot nu toe hebben we drie events geleerd:

  • onclick
  • onmouseover
  • onmouseout

Javascript kent echter nog veel meer events. Een overzicht van de mogelijkheden vind je op: w3schools - events

Ook van de properties van de .style kun je een overzicht vinden op:w3schools - properties




§ 2.3: Javascript in apart bestand

Door het opnemen van alle functies in je <head> of <body> kan de code van je webpagina behoorlijk onoverzichtelijk worden. Je zou het kunnen vergelijken met het opnemen van alle stijl binnen je webpagina. Dat laatste doen we niet meer want we hebben geleerd dat we ook een apart stijlbestand (stylesheet) kunnen maken. In elke webpagina verwijzen we dan in de <head> van de pagina naar dit stylesheet. Dat zag er als volgt uit:

<head>
     <link style="stijlbestand.css" rel="stylesheet">
</head>

Dit principe kun je ook toepassen op Javascript. Je zet dan alle functies in een apart bestand. De naam hiervan mag je zelf verzinnen maar het krijgt de extensie .js. In de <head> van elke pagina maak je dan de volgende verwijzing:

<script src="locatie+bestand.js"></script>



Maak bij het maken van onderstaande opdrachten geen gebruik van kopieren en plakken maar zorg dat je alle code zelf typt!!!!

Opdracht 4:

  1. Maak een nieuwe html-pagina en sla deze pagina op als les2.html
  2. Maak hierin een <span> met als inhoud Je kan me toch niet klikken!.
  3. Als je met je muis over het element gaat, verandert de text naar Ik zei het toch?

Opdracht 5:

  1. Open les2.html
  2. Maak hierin een <div> aan met een standaard grootte van 400px hoog en 400px breedt, en geef deze de kleur groen.
  3. Als je met je muis in de div komt dan verandert de kleur naar rood.
  4. Als je met je muis de div verlaat dan verandert de kleur weer terug naar groen.

Opdracht 6:

  1. Open les2.html
  2. Maak hierin een tabel van 1 rij (horizontaal) en daarin 8 cellen.
  3. In de cellen staan v.l.n.r. de getallen 1 t/m 8
  4. Het event is als de muis in de tabel komt
  5. Bij het uitvoeren van het event wordt één functie uitgevoerd die de inhoud van alle cellen verandert in het getal + het getal links hiervan (1 -> 1, 2 -> 3, 3 -> 5, 4 -> 7, etc). Schrijf de functie
  6. Hint: binnen de functie zal meer dan 1 regel code moeten staan
  7. Bij het verlaten van de tabel zullen de originele getallen weer verschijnen

Opdracht 7:

  1. Open les2.html
  2. Maak een apart Javascript bestand, en zet de code van de opdrachten 4, 5 en 6 in dit bestand
  3. Link het .js bestand met les2.html

Opdracht 8:

  1. Open les2.html en het .js bestand
  2. Maak in je HTML een <h1> koptekst
  3. Als je op de de koptekst klikt, zorg er dan voor dat hierin de datum komt te staan.
  4. Hint: de datum kan je weergeven door de standaard Date() functie
  5. Zorg dat de datum weergegeven wordt tegen een oranje achtergrond met donkerblauwe letters