https://peda.net/id/9ede04d69d4 2023-01-26T08:42:24+02:00 https://peda.net/:static/533/peda.net.logo.bg.svg <div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div> https://peda.net/id/45919804c71 2023-03-23T09:48:15+02:00 <span> kevättapahtuma Tulliportin normaalikoululla Joensuussa <b>26.4.2023 klo 10.00-14.00<br/> Lähtö koululta 7:45 ja paluu n. klo 16:00. Mahdolliset ylimääräiset tunnit hyvitetään :)<br/> <br/> <br/> </b></span> 2023-03-20T13:28:00+02:00 https://peda.net/id/b54d8c149d4 2023-04-04T09:17:06+03:00 Tervetuloa oppimaan JavaScript -koodausta. <br/> <br/> <!--filtered tag: <h4--><!--&gt;--><b>Lyhyesti</b><br/> <br/> <!--filtered end tag: </h4>--> <ul> <li>Tälle Peda.net -sivustolle tulee joka toinen viikko koodaustehtävä, jota lähdet itsenäisesti tekemään.</li> <li>Tehtävässä on yleensä yksi helppo ja muutama haastavampi koodausosio.</li> <li>Valmiit tehtävä palautetaan tehtävänannon alapuolella olevaan tehtäväkohtaiseen palautuskansioon.</li> <li><strong class="editor red"><b>Ahkerimmat palauttelijat palkitaan ennen kesälomaa</b>!</strong></li> <li>torstaisin klo 9.45 - 10.00 välitunnilla (a-talolaiset) voit tulla luokkaan a328 kysymään neuvoa tehtäviin, tai muuten vaan tulla koodaamaan. </li> </ul> <!--filtered tag: <h4--><!--&gt;--><b>Millä koodaan?<br/> <br/> </b><!--filtered end tag: </h4>--> Omalla koneelle kannattaa ladata <a href="https://code.visualstudio.com/" rel="noopener nofollow ugc" target="_blank">MS Visual Studio Code</a> (ota yhteyttä jos asentaminen vaatii järjestelmänvalvojan oikeudet).<br/> <br/> Voit myös kokeilla selaimessa toimivaa alustaa <a href="https://codepen.io/pen/" rel="noopener nofollow ugc" target="_blank">https://codepen.io/pen/</a>. 2023-01-26T08:36:04+02:00 https://peda.net/id/2e40076e9d4 2023-01-31T12:36:10+02:00 <b>Teoriaa ja muuta tähdellistä</b><br/> <br/> - opettajanamme toimii huippukoodaaja <b>Radu Mariescu-Instodor</b><br/> - avaa valmiiksi Radun ensimmäinen <a href="https://youtu.be/iap31n1nJ0s" rel="noopener nofollow ugc" target="_blank">ohjevideo</a> ja tee alla olevat tehtävät sen avulla.<br/> <br/> <b>Tehtävänanto<br/> <br/> Helppo</b><br/> <br/> -Takoituksenasi on luoda itsellesi www-sivu Radun oheiden mukaan (videossa aika 0 -&gt; 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!)<br/> <br/> <b>Haastava</b><br/> <br/> Jatka <b>Helppo</b>-kohdassa tekemäsi index.html muokkausta (videossa aika 14:30 -&gt; ) ja luo erilliset koodi ja tyylitiedostot. Lisää johonkin kohtaa www-sivuasi Canvas-elementti.<br/> <br/> <b>Tehtävän palautus</b><br/> <ul> <li>luo office 365 Onedriveen kansio nimellä <b>KooDaa. </b>Jaa kansio Minulle (Jari Kinnunen).</li> <li>Tallenna index.html, script.js ja styles.css -tiedostosi <b>KooDaa</b> -kansioon</li> <li>palauta tehtävä viimeistään 13.2.2023, niin saat täydet pisteet ahkeruuspottiin</li> </ul> 2023-01-26T08:39:27+02:00 https://peda.net/id/ac96097ec94 2023-03-23T10:12:10+02:00 <p><span lang="en-US">Radun tehtävät: &quot;This is a list I compiled for your brave students&quot;. Kaikkien tehtävien suoritus antaa <b>kolme (3) extratähteä</b>!!<br/> Luo tehtäville kansio RadunVaikeet ja tallenna tiedostot sinne.</span></p> <p><span lang="en-US"> </span></p> <p><span lang="en-US">Task 1: Create a function to draw a leafy tree </span></p> <p><span lang="en-US">Task 2:Customize the function to accept parameters for the size of the tree and the color of the leaves. </span></p> <p><span lang="en-US">Task 3:Use loops and previously created functions to generate a forest. </span></p> <p><span lang="en-US">Task 4:Create a function to draw a pine tree </span></p> <p><span lang="en-US">Task 5:Mix in one pine tree with the others in the forest. </span></p> <p><span lang="en-US">Task 6:Add mouse event listeners to detect when someone clicks on the pine tree. </span></p> <p><span lang="en-US">Task 7:Transform the application into a game where the goal is to find and click on the pine tree as fast as possible. After doing so, it advances to the next level (bigger forest, pine tree harder to find).</span></p> 2023-03-23T09:52:35+02:00 https://peda.net/id/03b045109e3 2023-02-13T09:53:38+02:00 Teoriaa ja muuta tähdellistä<br/> <br/> - opettajanamme toimii edelleen huippukoodaaja <b>Radu Mariescu-Instodor</b><br/> - avaa valmiiksi Radun toinen <a href="https://youtu.be/PbY7lRpSZ00" rel="noopener nofollow ugc" target="_blank">ohjevideo</a> ja tee alla olevat tehtävät sen avulla.<br/> -lisää tiedostojen nimiin 2. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda <b>index2.html</b>, <b>script2.js</b> ja <b>styles2.css</b> -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa.<br/> <br/> <b>Helppo</b><br/> <br/> - 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 <b>index2_helppo.html</b> nimellä.<br/> <br/> <span class="medium"><a href="https://peda.net/varkaus/waltterin-koulu/oppiaineet/valinnaisaineet/koodaa/1-koodaus2/koodaa-video2-k1.png#top" title="koodaa_video2_k1.png"><img src="https://peda.net/varkaus/waltterin-koulu/oppiaineet/valinnaisaineet/koodaa/1-koodaus2/koodaa-video2-k1.png:file/photo/a9cc1daf777b4387069a3214ea26335eb548aa64/koodaa_video2_k1.png" alt="" title="koodaa_video2_k1.png" class="inline" loading="lazy"/></a></span><br/> <br/> <b>Haastava</b><br/> <br/> - 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 <b>index2_haastava.html</b> nimellä.<br/> <br/> <span class="medium"><a href="https://peda.net/varkaus/waltterin-koulu/oppiaineet/valinnaisaineet/koodaa/1-koodaus2/koodaa-video2-k2.png#top" title="koodaa_video2_k2.png"><img src="https://peda.net/varkaus/waltterin-koulu/oppiaineet/valinnaisaineet/koodaa/1-koodaus2/koodaa-video2-k2.png:file/photo/c83024a2d607ae979698a0aa4850b3d0b42a9735/koodaa_video2_k2.png" alt="" title="koodaa_video2_k2.png" class="inline" loading="lazy"/></a></span><br/> <br/> Tehtävän palautus<br/> <br/> <ul> <li>ennen tallennus tarkasta tiedostojen nimet.</li> <li>Tallenna <b>index2_helppo.html </b> ja <b>index2_haastava.html </b>tiedostot<strong class="editor red"> </strong><b>KooDaa</b> -kansioosi.</li> <li>palauta tehtävät viimeistään 27.2.2023, niin saat täydet pisteet ahkeruuspottiin</li> </ul> 2023-01-27T13:01:56+02:00 https://peda.net/id/ba0254b8c18 2023-05-30T13:54:55+03:00 <table border="1"> <tbody> <tr> <td> </td> <td> </td> <td colspan="7">KooDaaja</td> </tr> <tr> <td>Keissi</td> <td> </td> <td>VO</td> <td>NJ</td> <td>LP</td> <td>NH</td> <td>OH</td> <td>RK</td> <td>ER</td> </tr> <tr> <td>1</td> <td>helppo</td> <td>x</td> <td>x</td> <td>x</td> <td> </td> <td>x</td> <td>x</td> <td> </td> </tr> <tr> <td> </td> <td>haastava</td> <td>x</td> <td>x</td> <td>x</td> <td> </td> <td> </td> <td>x</td> <td> </td> </tr> <tr> <td>2</td> <td>helppo</td> <td>x</td> <td>x</td> <td>x</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td>haastava</td> <td>x</td> <td>x</td> <td>x</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>3</td> <td>helppo</td> <td>x</td> <td>x</td> <td>x</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td>haastava</td> <td>x</td> <td>x</td> <td>x</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>4</td> <td>helppo</td> <td>x</td> <td>x</td> <td>x</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td>haastava</td> <td>x</td> <td>x</td> <td>x</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>5</td> <td>sopiva</td> <td>x</td> <td>x</td> <td>x</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Jyvät akanoista</td> <td> </td> <td> </td> <td>3x</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> <br/> Täydellisen rastirivin saa tehtävänannon mukaisesta suorituksesta, annetulla ohjelmointikielellä. Kolme parasta palkitaan viimeisenä koulupäivänä ja kaksi aivan parasta hieman suuremmalla summalla. VO ja NJ saivat erityisen hyvää palautetta Radulta.<br/> Hyvää kesää kaikille koodaajille! 2023-03-13T12:35:08+02:00 https://peda.net/id/5f57f3ecc17 2023-04-04T09:08:42+03:00 Teoriaa ja muuta tähdellistä<br/> <br/> - opettajanamme toimii edelleen huippukoodaaja <b>Radu Mariescu-Instodor</b><br/> - avaa valmiiksi Radun toinen <a href="https://youtu.be/Hbdb0KIlj0Q" rel="noopener nofollow ugc" target="_blank">ohjevideo</a> ja tee alla olevat tehtävät sen avulla.<br/> -lisää tiedostojen nimiin 3. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda <b>index3.html</b>, <b>script3.js</b> ja <b>styles3.css</b> -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa. Voit myös luoda jakamasi kansion sisälle oman kansion jokaiselle koodauskeissille.<br/> <br/> <b>Helppo</b><br/> <br/> - tarkoituksenasi on tutustua videon oheiden erilaisiinn väriarvoihin. Kannattaa tutustua www:stä löytyvää <a href="https://htmlcolorcodes.com/color-picker/" rel="noopener nofollow ugc" target="_blank">colorpicker</a> -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. <b>index3_helppo.html</b> jne. nimellä.<br/> <br/> <br/> <br/> <b>Haastava</b><br/> <br/> - 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 <b>index3_haastava.html</b> nimellä. Alla on mallikuva, tekemäsi kuvan ei tarvitse välttämättä olla &quot;spiraali&quot;, vaan voit koostaa kuvan neliön muotoisista, yhtenäisistä, kehistä.<br/> <br/> <a href="https://peda.net/varkaus/waltterin-koulu/oppiaineet/valinnaisaineet/koodaa/1-koodaus22/kuvio2.png#top" title="kuvio2.png"><img src="https://peda.net/varkaus/waltterin-koulu/oppiaineet/valinnaisaineet/koodaa/1-koodaus22/kuvio2.png:file/photo/7c9c5cfc4b4e8029ca8bf1402259b72f949ed3ac/kuvio2.png" alt="" title="kuvio2.png" class="inline" loading="lazy"/></a><br/> <br/> Tehtävän palautus<br/> <br/> <ul> <li>ennen tallennus tarkasta tiedostojen nimet.</li> <li>Tallenna <b>index3_helppo.html </b> ja <b>index3_haastava.html </b>tiedostot<strong class="editor red"> </strong><b>KooDaa</b> -kansioosi. Voit luoda Koodaa -kansion sisälle oman kansion tehtäville esim. <b>keissi3</b></li> <li>palauta tehtävät viimeistään 27.3.2023, niin saat täydet pisteet ahkeruuspottiin</li> </ul> 2023-03-13T09:33:39+02:00 https://peda.net/id/90c8df86d20 2023-04-04T09:12:47+03:00 Teoriaa ja muuta tähdellistä<br/> <br/> - opettajanamme toimii edelleen huippukoodaaja <b>Radu Mariescu-Instodor</b><br/> - avaa valmiiksi Radun neljäs <a href="https://youtu.be/yU6-3bO8CcE" rel="noopener nofollow ugc" target="_blank">ohjevideo</a> ja tee alla olevat tehtävät sen avulla.<br/> -lisää tiedostojen nimiin 4. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda <b>index4.html</b>, <b>script4.js</b> ja <b>styles4.css</b> -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa. Voit myös luoda jakamasi kansion sisälle oman kansion jokaiselle koodauskeissille.<br/> <br/> <b>Helppo</b><br/> <br/> - Tarkoituksena on tutustua silmukan käyttöön JavaScript -ohjelmoinnissa. Kuvan koko (canvas) on 400px * 400px. Käytä mieleisiä värejä. Voit tallentaa tiedoston esim. <b>index4_helppo.html</b> jne. nimellä. Tee silmukkaa käyttäen ohjelma, joka ajettuna tekee radun ohjevideon mukaisen kuvion, mutta jonka leveys on suurempi kuin korkeus. <br/> <br/> <br/> <br/> <b>Haastava</b><br/> <br/> - tarkoituksenasi on soveltaa videon ohjeita. komplementtivärit vuorottelet suorakulmion muotoisina kehinä. värit saat itse päättää, mutta &quot;spiraalien&quot; 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 <b>index4_haastava.html</b> nimellä. Alla on mallikuva, tekemäsi kuvan ei tarvitse välttämättä olla &quot;spiraali&quot;, vaan voit koostaa kuvan neliön muotoisista, yhtenäisistä, kehistä.<br/> <br/> <a href="https://peda.net/varkaus/waltterin-koulu/oppiaineet/valinnaisaineet/koodaa/1-koodaus222/kuvio1.png2#top" title="kuvio1.png"><img src="https://peda.net/varkaus/waltterin-koulu/oppiaineet/valinnaisaineet/koodaa/1-koodaus222/kuvio1.png2:file/photo/962f1238b842ce86934634e70ba16696f2fac2b7/kuvio1.png" alt="" title="kuvio1.png" class="inline" loading="lazy"/></a><br/> <br/> Tehtävän palautus<br/> <br/> <ul> <li>ennen tallennus tarkasta tiedostojen nimet.</li> <li>Tallenna <b>index4_helppo.html </b> ja <b>index4_haastava.html </b>tiedostot<strong class="editor red"> </strong><b>KooDaa</b> -kansioosi. Voit luoda Koodaa -kansion sisälle oman kansion tehtäville esim. <b>keissi4</b></li> <li>palauta tehtävät viimeistään 14.4.2023, niin saat täydet pisteet ahkeruuspottiin</li> </ul> 2023-04-03T13:01:55+03:00 https://peda.net/id/186745aeee4 2023-05-09T12:27:12+03:00 Teoriaa ja muuta tähdellistä<br/> <br/> - opettajanamme toimii edelleen huippukoodaaja <b>Radu Mariescu-Instodor</b><br/> - avaa valmiiksi Radun viides <a href="https://youtu.be/noGeYw5F2_4" rel="noopener nofollow ugc" target="_blank">ohjevideo</a> ja tee alla olevat tehtävät sen avulla.<br/> -lisää tiedostojen nimiin 5. Näin vältymme samannimiset tiedostot -virheeltä. Voit esimerkiksi luoda <b>index5.html</b>, <b>script5.js</b> ja <b>styles5.css</b> -tiedostot. Ole tarkkana, että käytät samoja tiedostonimiä kaikkialla koodeissa. Voit myös luoda jakamasi kansion sisälle oman kansion jokaiselle koodauskeissille.<br/> <br/> <b>Sopiva</b><br/> <br/> Tarkoituksenasi on taas soveltaa videon ohjeita sellaisenaan, ainoastaan lumiukko vaihtuu alla olevaan suosittuun hahmoon. Kuvan koko (canvas) on 500px x 500px. Voit tallentaa tiedoston <b>index5_sopiva.html</b> nimellä. Alla on mallikuva lumiukon korvaavasta hahmosta. Muotoina voit käyttää ympyröitä ja suorakaiteita. Samanlainen ei tarvitse olla, mutta hahmo pitää olla tunnistettava.<br/> <br/> <span class="left"><a href="https://peda.net/varkaus/waltterin-koulu/oppiaineet/valinnaisaineet/koodaa/1-koodaus2222/pika.jpg#top" title="pika.jpg"><img src="https://peda.net/varkaus/waltterin-koulu/oppiaineet/valinnaisaineet/koodaa/1-koodaus2222/pika.jpg:file/photo/1267e7f14c71dedfcb11ff4e513f7e10528b4229/pika.jpg" alt="" title="pika.jpg" class="inline" loading="lazy"/></a></span><br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> Tehtävän palautus<br/> <br/> <ul> <li>ennen tallennus tarkasta tiedostojen nimet.</li> <li>Tallenna <b>index5_helppo.html </b> ja <b>index5_haastava.html </b>tiedostot<strong class="editor red"> </strong><b>KooDaa</b> -kansioosi. Voit luoda Koodaa -kansion sisälle oman kansion tehtäville esim. <b>keissi5</b></li> <li>palauta tehtävät viimeistään 26.5.2023, niin saat täydet pisteet ahkeruuspottiin</li> </ul> 2023-05-09T12:15:52+03:00