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

Deeltoets 2:

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

 

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.  

 

           

 

 

 

2  

Inhoudsopgave   1 Javascript slideshow 1.1 De HTML eerst 1.2 Het script 1.2.1 Variabelen aanmaken 1.2.2 Bron van je afbeeldingen toevoegen 1.2.3 Function 1.2.4 Toevoegen van statements 1.2.5 Afbeeldingen automatisch rouleren 1.3 Overzicht Javascript

4 5 5 5 6 6 7 7 8

2 Bronvermelding

9  

 

 

 

 

 

3  

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:                           <script  src="script.js">         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"     var  pic=1   function  slides  ()  {     if  (!document.images)       return       document.images.slide.src=eval("img"+pic+".src")       if  (pic  <  3)       pic++     else       pic=1       setTimeout("slides()",  2000)   }   slides()

 

4  

1.1 De HTML eerst Allereerst  wordt  een  basis  html  pagina  aangemaakt  met  de  benodigde  elementen  zoals   een  ,               En  het  is  de  bedoeling  dat  we  een    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    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.  

                <script  src="script.js">       Het  is  erg  belangrijk  dat  je  bij  het    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 1.2.1 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  

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"   1.2.3 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.       var  pic=1     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.       var  pic=1   function  slides  ()  {       }     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.       var  pic=1     function  slides  ()  {     document.images.slide.src=eval("img"+pic+".src")     }        

 

6  

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.     var  pic=1     function  slides  ()  {     document.images.slide.src=eval("img"+pic+".src")       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.     1.2.5 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.         var  pic=1   function  slides  ()  {       document.images.slide.src=eval("img"+pic+".src")       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  

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"     var  pic=1   function  slides  ()  {       document.images.slide.src=eval("img"+pic+".src")       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  

2 Bronvermeldingen

  Brian  Veitch   18  juni  2012   https://www.youtube.com/watch?v=Go7Mc-­‐cfsKU     WrightechSD   6  mei  2012   https://www.youtube.com/watch?v=MYEETOLI0lw    

 

9