Javascript tutorial

 

 

Javascript tutorial

 

  1. Torstai 7.3 08:15-11:45 Javascript alkeet:
    • Uusmediataidot survey case: surveykopio
      • ensimäinen toiminnallisuus:
      • kategoriat js Array:hyn
      • var kategoriat= new Array("Web design","Käytettävyyssuunnittelu","Animaatio", "Pelituotanto", "Ohjelmointi", "Palvelin/tietokantaohjelmointi", "Graafinen suunnittelu", "Liikkuvakuva", "Äänituotanto");
      • kun radionappia painetaan niin numeron selitys näkyy vieressä
    • eka esimerkki: document_write01
      • muuttujat, document.write, ehtolause
    • surveykopion ensimäinen document.write ja for loop
    • versio 02 radiobuttonit ekatesti
    • versio 03 name atribuutit radiobuttoneissa, string replace metodi: esimsivu
    • versio 04 : radiobuttonit html-taulukossa esim04
    • w3schools dom events esimerkki teksti vaihtuu
    • edellisen muokkaus: teksti ilmestyy uuteen kohtaan domeventsesim02
    • jquerytesti esim03
  • Torstai 7.3 12:45-16:00
    • jatkuu edellisestä jquerytesti ja array kehiin: esim04
    • var asteikkoSelityksetTaidot = new Array("en tiedä tästä mitään","tiedän mitä termillä tarkoitetaan","osaan alkeet","osaan perusteet hyvin","osaan edistyneetkin jutut","olen guruekspertti");
    • valinta myös numeroa klikkaamalla: esim05
    • kiinnostusosio lisätään esim06
    • loadOnChangeEventListener funktio, kummatkin rivit toimii: esim07
  • Perjantai 8.3 08:15-11:45
    • Js sovellusesimerkkejä
      • dynaaminen html
      • sivun navigoinnin ratkaisut
      • ajax
      • animaatio
      • pelit
      • animoidut sivuelementit
      • web apps
      • selaimenlisäosat, bookmarklets
      • datavisualisointi
      • kuva slideshow
      • UI (User Interface) elementit: ikkunat, popup ikkunat, "overlay", modal window, navigointimenut, tabit, suggestions (tekstikentän ehdotustekstit), yms.
      • webtrafiikkianalytiikka
      • selaintekniset fixit
      • taide
      • esim: http://www.creativebloq.com/web-design/examples-of-javascript-1233964
    • js kirjastoja
      • jquery.js
      • Three.js
      • Shadowbox.js
      • Turn.js
      • raphael.js
      • impress.js
      • impact.js
      • modernizr.js
      • html5shim.js jne.
    • js APIs:
      • Canvas
        WebGL
        Geolocation
        WebStorage jne.

    • w3Schools.com opiskelumateriaali
  • Perjantai 8.3 12:45-14:00
    1. tehtävä 1: toteuta websivu, jossa on vain yksi nappi. Kun nappia painaa ilmestyy sivulle napin alle teksti: "Moi, mukavaa, että painoit nappia. Tätä nappia saa painaa toisenkin kerran."
    2. tehtävä 2: jatkuu edellisestä: lisä toiminto: kun nappia painaa toisen kerran tulee teksti:"Mukavaa että painoit toisenkin kerran!"
    3. tehtävä 3: lisätoiminto edelliseen: jos nappia painaa useamman kerran sivu kertoo että kuinka monta kertaa nappia on painettu: esim. "Olet nyt painanut nappia 6 kertaa"
    4. 4: lisätoiminto: kun nappia on painettu 10 kertaa tulee teksti: "Olet painanut nappia jo kymmenen kertaa jos vielä painat niin nappi menee rikki."
    5. 5: lisätoiminto: jos nappia painetaan 11 kertaa tulee teksti: "Nappi meni nyt rikki. ethän enää paina nappia nyyh"
    6. 6 jos painaa 12 kertaa tulee teksti:"Tämä nappi ottaa kohta hatkat"
    7. 7: jos painaa 14 kertaa nappia katoaa koko sivulta.
    8. 8: keksi oma draaman kaari napille
    • vinkit w3school:
    • teht. 1 vinkit
      • ks. How to otsikko
    • teht. 2 vinkit
      • variables
      • esim: var napinpainallustenLukum = 0
      • operators > Increment ++ operaattorilla muuttuja
      • JS Array
    • teht. 3 vinkit:
      • + operaattorilla voi yhdistää merkkijonoja ja numeroita
    • teht. 7 vinkki
      • DOM Nodes > Removing Existing HTML Elements
    • vastaukset: 01,02,03,04,05,06,07
  • Perjantai 8.3 14:00-16:00