KooDaa
Mainos
Tietoa
Tervetuloa oppimaan JavaScript -koodausta.
Lyhyesti
Omalla koneelle kannattaa ladata MS Visual Studio Code (ota yhteyttä jos asentaminen vaatii järjestelmänvalvojan oikeudet).
Voit myös kokeilla selaimessa toimivaa alustaa https://codepen.io/pen/.
Lyhyesti
- Tälle Peda.net -sivustolle tulee joka toinen viikko koodaustehtävä, jota lähdet itsenäisesti tekemään.
- Tehtävässä on yleensä yksi helppo ja muutama haastavampi koodausosio.
- Valmiit tehtävä palautetaan tehtävänannon alapuolella olevaan tehtäväkohtaiseen palautuskansioon.
- Ahkerimmat palauttelijat palkitaan ennen kesälomaa!
- torstaisin klo 9.45 - 10.00 välitunnilla (a-talolaiset) voit tulla luokkaan a328 kysymään neuvoa tehtäviin, tai muuten vaan tulla koodaamaan.
Omalla koneelle kannattaa ladata MS Visual Studio Code (ota yhteyttä jos asentaminen vaatii järjestelmänvalvojan oikeudet).
Voit myös kokeilla selaimessa toimivaa alustaa https://codepen.io/pen/.
1. Koodauskeissi
Teoriaa ja muuta tähdellistä
- opettajanamme toimii huippukoodaaja Radu Mariescu-Instodor
- avaa valmiiksi Radun ensimmäinen ohjevideo ja tee alla olevat tehtävät sen avulla.
Tehtävänanto
Helppo
-Takoituksenasi on luoda itsellesi www-sivu Radun oheiden mukaan (videossa aika 0 -> 14:30). Kerro luomallasi www-sivulla itsestäsi. Käytä pelkästää index.html -tiedostoa (älä tässä osassa vielä luo erillisiä koodi tai tyyli-tiedostoja!)
Haastava
Jatka Helppo-kohdassa tekemäsi index.html muokkausta (videossa aika 14:30 -> ) ja luo erilliset koodi ja tyylitiedostot. Lisää johonkin kohtaa www-sivuasi Canvas-elementti.
Tehtävän palautus
- opettajanamme toimii huippukoodaaja Radu Mariescu-Instodor
- avaa valmiiksi Radun ensimmäinen ohjevideo ja tee alla olevat tehtävät sen avulla.
Tehtävänanto
Helppo
-Takoituksenasi on luoda itsellesi www-sivu Radun oheiden mukaan (videossa aika 0 -> 14:30). Kerro luomallasi www-sivulla itsestäsi. Käytä pelkästää index.html -tiedostoa (älä tässä osassa vielä luo erillisiä koodi tai tyyli-tiedostoja!)
Haastava
Jatka Helppo-kohdassa tekemäsi index.html muokkausta (videossa aika 14:30 -> ) ja luo erilliset koodi ja tyylitiedostot. Lisää johonkin kohtaa www-sivuasi Canvas-elementti.
Tehtävän palautus
- luo office 365 Onedriveen kansio nimellä KooDaa. Jaa kansio Minulle (Jari Kinnunen).
- Tallenna index.html, script.js ja styles.css -tiedostosi KooDaa -kansioon
- palauta tehtävä viimeistään 13.2.2023, niin saat täydet pisteet ahkeruuspottiin
2. Koodauskeissi
Teoriaa ja muuta tähdellistä
- opettajanamme toimii edelleen huippukoodaaja Radu Mariescu-Instodor
- avaa valmiiksi Radun toinen ohjevideo ja tee alla olevat tehtävät sen avulla.
-lisää tiedostojen nimiin 2. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda index2.html, script2.js ja styles2.css -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa.
Helppo
- tarkoituksenasi on piirtää videon oheiden avulla seuraavanlainen kuva. Kuvan koko (canvas) on 300px x 300px. Väri ja muotoilujen sijoittelua ovat suuntaa antavia. Voit tallentaa tiedoston index2_helppo.html nimellä.
Haastava
- tarkoituksenasi on piirtää videon oheiden avulla seuraavanlainen kuva. Kuvan koko (canvas) on 450px x 450px. Väri ja muotoilujen sijoittelua ovat suuntaa antavia. Voit tallentaa tiedoston index2_haastava.html nimellä.
Tehtävän palautus
- opettajanamme toimii edelleen huippukoodaaja Radu Mariescu-Instodor
- avaa valmiiksi Radun toinen ohjevideo ja tee alla olevat tehtävät sen avulla.
-lisää tiedostojen nimiin 2. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda index2.html, script2.js ja styles2.css -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa.
Helppo
- tarkoituksenasi on piirtää videon oheiden avulla seuraavanlainen kuva. Kuvan koko (canvas) on 300px x 300px. Väri ja muotoilujen sijoittelua ovat suuntaa antavia. Voit tallentaa tiedoston index2_helppo.html nimellä.
Haastava
- tarkoituksenasi on piirtää videon oheiden avulla seuraavanlainen kuva. Kuvan koko (canvas) on 450px x 450px. Väri ja muotoilujen sijoittelua ovat suuntaa antavia. Voit tallentaa tiedoston index2_haastava.html nimellä.
Tehtävän palautus
- ennen tallennus tarkasta tiedostojen nimet.
- Tallenna index2_helppo.html ja index2_haastava.html tiedostot KooDaa -kansioosi.
- palauta tehtävät viimeistään 27.2.2023, niin saat täydet pisteet ahkeruuspottiin
3. Koodauskeissi
Teoriaa ja muuta tähdellistä
- opettajanamme toimii edelleen huippukoodaaja Radu Mariescu-Instodor
- avaa valmiiksi Radun toinen ohjevideo ja tee alla olevat tehtävät sen avulla.
-lisää tiedostojen nimiin 3. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda index3.html, script3.js ja styles3.css -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa. Voit myös luoda jakamasi kansion sisälle oman kansion jokaiselle koodauskeissille.
Helppo
- tarkoituksenasi on tutustua videon oheiden erilaisiinn väriarvoihin. Kannattaa tutustua www:stä löytyvää colorpicker -sivustoon. Kuvan koko (canvas) on 400px x 400px. Käytä väreinä komplementtivärejä (selvitä itse). Voit tehdä samanlaisen kuvion kuin ohjevideossa. Voit tallentaa tiedoston esim. index3_helppo.html jne. nimellä.
Haastava
- tarkoituksenasi on piirtää videon oheiden avulla kuva, jossa eri komplementtivärit vuorottelet suorakulmion muotoisina kehinä. Kehien leveyden ja värit saat itse päättää. Kuvasta pitäisi tulla neliöspiraali Kuvan koko (canvas) on 500px x 500px. Voit tallentaa tiedoston index3_haastava.html nimellä. Alla on mallikuva, tekemäsi kuvan ei tarvitse välttämättä olla "spiraali", vaan voit koostaa kuvan neliön muotoisista, yhtenäisistä, kehistä.
Tehtävän palautus
- opettajanamme toimii edelleen huippukoodaaja Radu Mariescu-Instodor
- avaa valmiiksi Radun toinen ohjevideo ja tee alla olevat tehtävät sen avulla.
-lisää tiedostojen nimiin 3. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda index3.html, script3.js ja styles3.css -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa. Voit myös luoda jakamasi kansion sisälle oman kansion jokaiselle koodauskeissille.
Helppo
- tarkoituksenasi on tutustua videon oheiden erilaisiinn väriarvoihin. Kannattaa tutustua www:stä löytyvää colorpicker -sivustoon. Kuvan koko (canvas) on 400px x 400px. Käytä väreinä komplementtivärejä (selvitä itse). Voit tehdä samanlaisen kuvion kuin ohjevideossa. Voit tallentaa tiedoston esim. index3_helppo.html jne. nimellä.
Haastava
- tarkoituksenasi on piirtää videon oheiden avulla kuva, jossa eri komplementtivärit vuorottelet suorakulmion muotoisina kehinä. Kehien leveyden ja värit saat itse päättää. Kuvasta pitäisi tulla neliöspiraali Kuvan koko (canvas) on 500px x 500px. Voit tallentaa tiedoston index3_haastava.html nimellä. Alla on mallikuva, tekemäsi kuvan ei tarvitse välttämättä olla "spiraali", vaan voit koostaa kuvan neliön muotoisista, yhtenäisistä, kehistä.
Tehtävän palautus
- ennen tallennus tarkasta tiedostojen nimet.
- Tallenna index3_helppo.html ja index3_haastava.html tiedostot KooDaa -kansioosi. Voit luoda Koodaa -kansion sisälle oman kansion tehtäville esim. keissi3
- palauta tehtävät viimeistään 27.3.2023, niin saat täydet pisteet ahkeruuspottiin
4. Koodauskeissi
Teoriaa ja muuta tähdellistä
- opettajanamme toimii edelleen huippukoodaaja Radu Mariescu-Instodor
- avaa valmiiksi Radun neljäs ohjevideo ja tee alla olevat tehtävät sen avulla.
-lisää tiedostojen nimiin 4. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda index4.html, script4.js ja styles4.css -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa. Voit myös luoda jakamasi kansion sisälle oman kansion jokaiselle koodauskeissille.
Helppo
- Tarkoituksena on tutustua silmukan käyttöön JavaScript -ohjelmoinnissa. Kuvan koko (canvas) on 400px * 400px. Käytä mieleisiä värejä. Voit tallentaa tiedoston esim. index4_helppo.html jne. nimellä. Tee silmukkaa käyttäen ohjelma, joka ajettuna tekee radun ohjevideon mukaisen kuvion, mutta jonka leveys on suurempi kuin korkeus.
Haastava
- tarkoituksenasi on soveltaa videon ohjeita. komplementtivärit vuorottelet suorakulmion muotoisina kehinä. värit saat itse päättää, mutta "spiraalien" paksuuden on pienennyttävä keskelle päin siirryttäessä yhdellä pikselilla per kierros. Kuvasta pitäisi tulla neliöspiraali. Kuvan koko (canvas) on 500px x 500px. Voit tallentaa tiedoston index4_haastava.html nimellä. Alla on mallikuva, tekemäsi kuvan ei tarvitse välttämättä olla "spiraali", vaan voit koostaa kuvan neliön muotoisista, yhtenäisistä, kehistä.
Tehtävän palautus
- opettajanamme toimii edelleen huippukoodaaja Radu Mariescu-Instodor
- avaa valmiiksi Radun neljäs ohjevideo ja tee alla olevat tehtävät sen avulla.
-lisää tiedostojen nimiin 4. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda index4.html, script4.js ja styles4.css -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa. Voit myös luoda jakamasi kansion sisälle oman kansion jokaiselle koodauskeissille.
Helppo
- Tarkoituksena on tutustua silmukan käyttöön JavaScript -ohjelmoinnissa. Kuvan koko (canvas) on 400px * 400px. Käytä mieleisiä värejä. Voit tallentaa tiedoston esim. index4_helppo.html jne. nimellä. Tee silmukkaa käyttäen ohjelma, joka ajettuna tekee radun ohjevideon mukaisen kuvion, mutta jonka leveys on suurempi kuin korkeus.
Haastava
- tarkoituksenasi on soveltaa videon ohjeita. komplementtivärit vuorottelet suorakulmion muotoisina kehinä. värit saat itse päättää, mutta "spiraalien" paksuuden on pienennyttävä keskelle päin siirryttäessä yhdellä pikselilla per kierros. Kuvasta pitäisi tulla neliöspiraali. Kuvan koko (canvas) on 500px x 500px. Voit tallentaa tiedoston index4_haastava.html nimellä. Alla on mallikuva, tekemäsi kuvan ei tarvitse välttämättä olla "spiraali", vaan voit koostaa kuvan neliön muotoisista, yhtenäisistä, kehistä.
Tehtävän palautus
- ennen tallennus tarkasta tiedostojen nimet.
- Tallenna index4_helppo.html ja index4_haastava.html tiedostot KooDaa -kansioosi. Voit luoda Koodaa -kansion sisälle oman kansion tehtäville esim. keissi4
- palauta tehtävät viimeistään 14.4.2023, niin saat täydet pisteet ahkeruuspottiin
5. Koodauskeissi (viimeinen)
Teoriaa ja muuta tähdellistä
- opettajanamme toimii edelleen huippukoodaaja Radu Mariescu-Instodor
- avaa valmiiksi Radun viides ohjevideo ja tee alla olevat tehtävät sen avulla.
-lisää tiedostojen nimiin 5. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda index5.html, script5.js ja styles5.css -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa. Voit myös luoda jakamasi kansion sisälle oman kansion jokaiselle koodauskeissille.
Sopiva
Tarkoituksenasi on taas soveltaa videon ohjeita sellaisenaan, ainoastaan lumiukko vaihtuu alla olevaan suosittuun hahmoon. Kuvan koko (canvas) on 500px x 500px. Voit tallentaa tiedoston index5_sopiva.html nimellä. Alla on mallikuva lumiukon korvaavasta hahmosta. Muotoina voit käyttää ympyröitä ja suorakaiteita. Samanlainen ei tarvitse olla, mutta hahmo pitää olla tunnistettava.
Tehtävän palautus
- opettajanamme toimii edelleen huippukoodaaja Radu Mariescu-Instodor
- avaa valmiiksi Radun viides ohjevideo ja tee alla olevat tehtävät sen avulla.
-lisää tiedostojen nimiin 5. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda index5.html, script5.js ja styles5.css -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa. Voit myös luoda jakamasi kansion sisälle oman kansion jokaiselle koodauskeissille.
Sopiva
Tarkoituksenasi on taas soveltaa videon ohjeita sellaisenaan, ainoastaan lumiukko vaihtuu alla olevaan suosittuun hahmoon. Kuvan koko (canvas) on 500px x 500px. Voit tallentaa tiedoston index5_sopiva.html nimellä. Alla on mallikuva lumiukon korvaavasta hahmosta. Muotoina voit käyttää ympyröitä ja suorakaiteita. Samanlainen ei tarvitse olla, mutta hahmo pitää olla tunnistettava.
Tehtävän palautus
- ennen tallennus tarkasta tiedostojen nimet.
- Tallenna index5_helppo.html ja index5_haastava.html tiedostot KooDaa -kansioosi. Voit luoda Koodaa -kansion sisälle oman kansion tehtäville esim. keissi5
- palauta tehtävät viimeistään 26.5.2023, niin saat täydet pisteet ahkeruuspottiin