11. Tehtävä - JavaScriptin käyttäminen

Javascript on ohjelmointikieli, jolla saadaan toteutettua sivulle efektejä ja tapahtumia, jotka reagoivat käyttäjän toimiin. Esimerkkejä tällaisista toimista ovat kuvan näyttäminen galleriassa linkkiä klikattaessa, sivun osien piilottaminen tai näyttäminen, varoitusviestien näyttäminen, vaihtuvan taustakuvan asettaminen tai vaikkapa käyttäjän antamien syötteiden tarkistaminen.

 

Valmiiden JavaScript -kirjastojen käyttäminen

JavaScriptin käyttäminen on helppoa, vaikka aluksi se saattaakin tuntua erittäin hankalalta tai monimutkaiselta.  

Tässä kuitenkin yksinkertaistetut ohjeet, joiden avulla pääsee jo pitkälle:

 

  1. Valitse käytettävä JavaScript -komponentti (esim. Galleria)
  2. Lataa tarvittavat tiedostot komponentin omilta sivuilta
  3. Tarvittaessa pura tiedostot esimerkiksi winzipillä. Tallenna ladatut tiedostot omissa kansoissaan projektisi kansioon. Usein JavaScript -komponentti koostuu kahdesta osasta: JavaScript kansiosta, jossa on varsinaiset skriptit, ja komponentin omasta tyylitiedostosta .css
  4. Liitä JavaScriptit omaan työhösi. Liittämisohjeet ovat aina toteutuskohtaisia, mutta yleensä JavaScriptiin viitataan elementillä <script type="text/javascript"> </script>
  5. Testaa että scripti toimii, mikäli ei toimi, lue ohjeet uudelleen ja yritä uudelleen
  6. Liitä CSS -tiedosto osaksi html-tiedostosi head osiota (oman css-tiedostosi alle)
  7. Testaa toimivuus ja muokkaa CSS:ää tarvittaessa

Tehtävä: Valokuvagallerian lisääminen sivulle 
 

Mene sivulle https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp

Lisää ko. sivulla olevien ohjeiden mukaisesti javascriptillä toteutettu galleria sivullesi.

Alla video, jossa näytetään miten se tehdään käytännössä.


YouTube-video


Comments