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
  • c++ tutorial