Javascript

Javascript functies

Leerdoelen

Je weet wat een ‘functie’ is en wat je er mee kunt doen.
Je kunt zelf functies maken
Je kunt functies uit laten voeren in javascript

Functies

Functies in javascript lijken weer veel op functies in andere programmeertalen. Een functie is een blok code dat je vaker wilt gebruiken. Javascript heeft zelf functies, maar je kunt ook eigen functies maken. Dit is zijn functies van javascript....

console.log("Deze tekst komt in de console");
alert("Deze tekst verschijnt in een dialog-box");

Om een eigen functie te gebruiken moet je hem maken en aanroepen:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function makeBodyBackgroundYellow() {
            document.body.style.backgroundColor = "yellow";
        }
        makeBodyBackgroundYellow();
    </script>
</body>
</html>

Functies kunnen ook argumenten accepteren. Je kunt een object of andere type variabele meegeven in de aanroep van een functie. In het voorgaande voorbeeld krijgt de body een andere achtergrondkleur, maar je kunt ook een HTML-element in de functie-aanroep meegeven. Dat element krijgt een andere achtergrondkleur....

<div id="blokje" style="width:100px; height:100px;"></div>
<script>
    function makeBackgroundYellow(el) {
        el.style.backgroundColor = "yellow";
    }
    makeBackgroundYellow(document.getElementById('blokje'));
</script>

Functies kunnen ook waarden retourneren...

<div id="blokje" style="width:100px; height:100px;"></div>
<script>
    function vermenigvuldig(x,y) {
        return x * y;
    }
    document.getElementById('blokje').innerHTML = "De uitkomst is: " + vermenigvuldig(3,4);
</script>

Het '+'-teken is nodig om de uitkomst van de functie achter de tekst 'De uitkomst is: ' te plakken.

Je weet wat een ‘listener’ is Je kunt een listener koppelen aan een DOM-element Je kunt vanuit een listener een functie aanroepen

Javascript Functies Een functie is een blok met code dat je makkelijk kunt hergebruiken Functies kun je eerst maken en verderop in je code laten uitvoeren Objecten kunnen ook functies bevatten, je noemt ze dan methodes Een methode in een object zegt iets over ‘wat een object kan’ Een object heeft dus eigenschappen en methodes. Een auto heeft een kleur, een lengte en een breedte (eigenschap) Een auto kan toeteren (methode)

Javascript Functies Opdracht 4.1 Je hebt al eerder een auto-object gemaakt. Breidt je auto-object uit met methoden. Maak een methode toeteren Als je deze methode aanroept verschijnt het woord “toet!” in je console. Maak een methode gasgeven Als je deze methode aanroept verschijnt de huidige snelheid van de auto in de console.

Javascript Functies Je kunt functies ook interactief aanroepen Je kunt een listener koppelen aan een DOM-element Op die manier kun je een element laten luisteren naar een druk op een knop Vervolgens wordt een functie gestart….

Javascript Functies Opdracht 4.2 Maak een imageslider. Maak een html-pagina waarin een afbeelding wordt omgewisseld voor een andere afbeelding op het moment dat je er op klikt.

Javascript Functies Opdracht 4.3 De crook-app. Maak drie “clickable” imagesliders boven elkaar die samen de crook-app vormen. Zie het voorbeeld in de movie.

Javascript Functies

Evaluatie Je hebt de functionaliteit van een auto aangepast door er een methode aan toe te voegen. Je hebt verschillende methodes aangeroepen en uit laten voeren.

Javascript Interactief Leerdoelen Alle technieken die je tot nu hebt geleerd combineren en toepassen Gebruikmaken van arrays en objecten DOM elemeten aanpassen DOM elementen creeëren met Javascript

Javascript Interactief Monkey Chooser Maak een pagina waarop een 9-tal afbeeldingen te zien zijn. Zoek 9 afbeeldingen van je favoriete ... en zorg dat ze zijn uitgesneden op het formaat 300 bij 300 pixels. Maak een html-pagina zoals in het voorbeeld te zien is Schrijf het javascript waarmee je je favoriete plaatje kunt liken. Klik hier voor een voorbeeld

Javascript Interactief Monkey Memory Maak een pagina waarop een minimaal 18 afbeeldingen zijn. Er zijn 9 verschillende afbeeldingen. Iedere afbeelding komt dus 2 keer voor. De afbeeldingen zijn nog niet zichtbaar. Zodra je op een afbeelding klikt wordt deze zichtbaar gemaakt. Na een tweede klik wordt een 2e afbeelding zichtbaar. Als de twee afbeeldingen overeenkomen krijg je een punt! Maak een html-pagina zoals in het voorbeeld te zien is Schrijf het javascript voor de memory-app. Klik hier voor een voorbeeld

Javascript Interactief

Evaluatie Je hebt een listener gekoppeld aan een DOM element. Je kunt de stijl van DOM-elementen aanpassen door op andere DOM-elementen te klikken of door ze te veranderen.