Jarno Verhoogt 21 mei 2014 Stud. Nr Docent: Joost Faber. Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow?

Maat: px

Weergave met pagina beginnen:

Download "Jarno Verhoogt 21 mei 2014 Stud. Nr. 500684953 Docent: Joost Faber. Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow?"

Greta de Wit
7 jaren geleden
Aantal bezoeken:

1 Jarno Verhoogt 21 mei 2014 Stud. Nr Docent: Joost Faber Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow?

2 Inleiding Dit is een eenvoudige handleiding om in javascript een simpele slideshow te leren maken. Je hebt voordat we gaan beginnen wel de basisbegrippen van zowel HTML als Javascript nodig. Het zal stapsgewijs uitgelegd worden met bijbehorende stukjes code die als volgt zijn weergegeven om beter onderscheid te creëren tussen de uitleg en het voorbeeld. <html> <head> </head> </html> 2

Je hebt voordat we gaan beginnen wel de basisbegrippen van zowel HTML als Javascript nodig.

3 Inhoudsopgave 1 Javascript slideshow De HTML eerst Het script Variabelen aanmaken Bron van je afbeeldingen toevoegen Function Toevoegen van statements Afbeeldingen automatisch rouleren Overzicht Javascript 8 2 Bronvermelding 9 3

2.3 Function 6 1.2.4 Toevoegen van statements 7 1.2.5 Afbeeldingen automatisch rouleren 7 1.

4 1 Javascript slideshow Zoals al eerder verteld gaan we een slideshow maken in Javascript. Hieronder kan je zien hoe de code eruit komt te zien. Bekijk de code even goed, daarna zal ik alles stapsgewijs uitleggen. De HTML: <!DOCTYPE html> <html> <head> <title>slideshow</title> </head> <body> <img scr="berg.jpg" name="slide"> <script src="script.js"></script> </body> </html> Het Javascript: var img1 = new Image() img1.src="berg.jpg" var img2 = new Image() img2.src="pinguins.jpg" var img3 = new Image() img3.src="voetbal.jpg" if (!document.images) return if (pic < 3) pic++ else pic=1 settimeout("slides()", 2000) slides() 4

DOCTYPE html> <html> <head> <title>slideshow</title> </head> <body> <img scr="berg.jpg" name="slide"> <script src="script.

5 1.1 De HTML eerst Allereerst wordt een basis html pagina aangemaakt met de benodigde elementen zoals een <head>, <title> en de <body>. <!DOCTYPE html> <head> <title>slideshow</title> </head> <body> </body> </html> En het is de bedoeling dat we een <img> tag gaan aanmaken en die linken naar het Javascript. Dus voordat we dat kunnen gaan doen heb ik al wat foto s in een folder geplaatst. De eerste foto van de slide gaan we linken in het <body> element. Ook het Javascript zelf dat we gaan gebruiken moet gelinkt worden. Dit plaatsen we onderaan in de body zodat eerst de HTML in de browser wordt ingeladen en dan pas het script. <!DOCTYPE html> <head> <title>slideshow</title> </head> <body> <img src= afb_js/derp.jpg name= slideshow /> <script src="script.js"></script> </body> Het is erg belangrijk dat je bij het <img> tag de id (name= ) aangeeft. Deze gaan we namelijk oproepen in het script. Als je dat niet doet kunnen we niks oproepen en ook geen slideshow maken. 1.2 Het script Variabelen aanmaken Je begint met het schrijven van variabelen voor elke foto die je wilt gaan gebruiken. Zorg dat je niet dezelfde naam gebruikt voor alle variabelen van je foto s. Dus in dit geval img1, img2, en img3. En dan zeggen we var img1 = new Image(). Doe dit voor elke afbeelding die je in de slideshow wilt gaan gebruiken. var img1 = new Image() var img2 = new Image() var img3 = new Image() 5

Dus voordat we dat kunnen gaan doen heb ik al wat foto s in een folder geplaatst. De eerste foto van de slide gaan we linken in het <body> element.

6 1.2.2 Bron van je afbeeldingen toevoegen. Daarna moet de bron van je afbeeldingen gegeven worden. Dat schrijf je zo: img1.src="berg.jpg". src staat voor source. En hierna geef je de locatie op. In mijn geval heb ik de afbeeldingen in mijn rootfolder geplaatst. Dat wil zeggen, ze zitten in dezelfde map als mijn index.html file. Het kan zijn dat je meer dan drie afbeeldingen wilt gaan gebruiken en zorg dan dat je die in een aparte map opslaat (wel bij je root folder index.html). Dus stel je hebt een map aangemaakt genaamd img, dan gaat je code als volgt: img1.src= img/berg.jpg. Hieronder het code voorbeeld tot nu toe. var img1 = new Image() img1.src="berg.jpg" var img2 = new Image() img2.src="pinguins.jpg" var img3 = new Image() img3.src="voetbal.jpg" Function Om al onze drie afbeelding in te laden gaan we een function schrijven. We beginnen weer met het aanmaken van een variabel die een increment is. In mijn geval noem ik het variabel pic, het kan eigenlijk alles heten als je maar consistent bent in het oproepen van die naam. Deze komt terug in de body van de function namelijk. Dit zal onze eerste afbeelding gaan worden waar we er steeds 1 bij optellen tot dat we bij het derde plaatje zijn. We noemen deze slides en geven deze lege parameters mee. De afbeeldingen komen later tussen de parameters. Tussen de { komt de body van de code die de function zal oproepen/uitvoeren. In de body zullen we de bron moeten aangeven en met een string de optelling doen van de afbeeldingen. We gaan variabel pic die we net gemaakt hebben gebruiken om de bron te pakken van elke afbeelding. Dus pic gaat in de string worden vervangen door de afbeelding. 6

Het kan zijn dat je meer dan drie afbeeldingen wilt gaan gebruiken en zorg dan dat je die in een aparte map opslaat (wel bij je root folder index.html).

7 1.2.4 Toevoegen van statements Nu moet er nog het een en ander gebeuren met de functie. Dat doen we door een if en else statement te gebruiken. Hiermee zeggen we eigenlijk als een bepaalde conditie overeenkomt, voer de volgende code uit, voer anders deze code uit. Dit gaat als volgt. if (pic < 3) pic++ else pic=1 In dit geval: als variabel pic kleiner is dan 3 voer pic++ uit ( ++ is 1 bij de variabel optellen). Als het niet waar is else voer pic=1 uit. Dat wil zeggen als het optellen van pic++ voorbij de 3 gaat is de waarde van pic weer 1. Deze statement zal dan de juiste afbeelding plaatsen tussen de code erboven img +pic+.src, want pic=1 is eigenlijk berg.jpg, 2= pinguins.jpg en 3= voetbal.jpg. Deze hebben we al eerder verklaard Afbeeldingen automatisch rouleren We zullen nu moeten aangeven in onze code dat de afbeeldingen moeten gaan rouleren. Met een settimeout kunnen we ervoor zorgen dat om een bepaalde tijd, verwissel dan van afbeelding. if (pic < 3) pic++ else pic=1 settimeout("slides()", 2000) slides() Daar plaatsen we de function slides() in met bijvoorbeeld als interval van 2000 milliseconden. Dus tussen de haakjes () zal dan de afbeeldingen komen te staan die om de 2 seconde zullen veranderen. En als laatste moeten we het hele script oproepen door helemaal onderaan de function slides() op te roepen. 7

if (pic < 3) pic++ else pic=1 In dit geval: als variabel pic kleiner is dan 3 voer pic++ uit ( ++ is 1 bij de variabel optellen). Als het niet waar is else voer pic=1 uit.

8 1.3 Overzicht Javascript Om weer terug te komen op het totale plaatje. Zo ziet dan je hele script eruit: var img1 = new Image() img1.src="berg.jpg" var img2 = new Image() img2.src="pinguins.jpg" var img3 = new Image() img3.src="voetbal.jpg" if (pic < 3) pic++ else pic=1 settimeout("slides()", 2000) slides() Open je index.html file in je browser en aanschouw je werk! Hopelijk ben je nu wat wijzer geworden over hoe je een eenvoudige slideshow in Javascript kan programmeren. 8

jpg" var img3 = new Image() img3.src="voetbal.

9 2 Bronvermeldingen Brian Veitch 18 juni cfsku WrightechSD 6 mei

Vergelijkbare documenten

Lab Webdesign: Javascript 11 februari 2008

Lab Webdesign: Javascript 11 februari 2008 H2: BASISBEGRIPPEN In dit hoofdstuk zullen er enkele basisbegrippen worden behandelt PLAATSING VAN JAVASCRIPT-CODE DE SCRIPT-TAG De script-tag geeft aan dat er gebruik zal worden gemaakt van een scripttaal.