| Symboli | Selitys |
|---|---|
| ✏️ | Ohjelmointitehtävä |
| 💡 | Vinkki |
| ❗ | Tärkeä ohje |
| 🔍 | Lisätietoa |
| 📜 | Esimerkki |
| ❓ | Kysely |
Hei!
Olet saanut käsiisi ohjelmointioppaan, jonka läpikäymällä opit ohjelmoimaan. Ohjelmointikieliä on olemassa nykyään monia, mutta olemme valinneet tämän oppaan kieleksi JavaScriptin. JavaScriptiä käytetään erityisesti verkkosivujen ja -sovellusten ohjelmoinnissa. Tulet myös oppimaan hieman HTML-kieltä.
Miten aloitan?
Voit siirtyä suoraan ensimmäisen osaan! Tehtävät voi tehdä suoraan selaimessa käyttämällä ohjelmointiympäristöä. Toinen vaihtoehto on tehdä materiaalin tehtävät paikallisesti omalla koneella.
Ohjelmointiympäristön käyttäminen
Ohjelmointiympäristössä vasemmalla puolella on koodi-ikkuna ja oikealla puolella on ohjelma. Kun painat lippukuvaketta, koodi-ikkunan koodi suoritetaan ja lopputulos ilmestyy oikealle puolella. Voit myös kopioida koodin koodi-ikkunasta tietokoneesi koodieditoriin ja tallettaa tiedoston html-tiedostona. Kun avaat tiedoston, niin sama suorittaminen tapahtuu koneellasi paikallisesti. Katso tarkemmat ohjeet kohdasta Omalla koneella tehtävän tekeminen.
Ohjelmointiympäristö: Esimerkki
Materiaalissa on esimerkkejä, jotka tunnistaa käärökuvakkeesta. Esimerkin koodi suoritetaan, kun klikkaat lippukuvaketta. Voit tehdä muokkauksia esimerkin koodiin kirjoittamalla omaa koodia esimerkin sisälle. Klikkaa sen jälkeen lippukuvaketta uudelleen niin saat muutokset näkyviin.
Ohjelmointiympäristö: Tehtävä
Tehtävän tunnistaa kynäkuvakkeesta. Tehtävässä sinun on tarkoitus kirjoittaa koodi, joka saa ohjelman toimimaan. Kun olet kirjoittanut koodin tehtävään, klikkaa lippukuvaketta ja näet toimiiko ohjelmasi.
Omalla koneella tehtävän tekeminen
Voit tehdä tehtävät myös paikallisesti omalla koneellasi käyttämällä koodieditoria. Lähes jokaisessa tietokoneessa on jonkinlainen koodieditori (esimerkiksi Windowsissa Notepad). Emme tarkoita nyt editorilla Wordiä tai LibreOfficea: jos editorissa voi tummentaa tai kursivoida sanoja, se sopii huonosti koodin kirjoittamiseen. Html-koodissa tummennus tehdään html-tageilla eikä editorilla.
- Avaa tekstieditori.
- Kirjoita ohjelma editoriin.
- Anna tiedostolle nimi tiedoston-nimi.html (tiedoston-nimi-osan voi vaihtaa, miksi haluaa).
- Etsi tiedosto tietokoneella.
- Nyt kun kaksoisklikkaat tiedoston auki niin se aukeaa selaimessa ja näet tekemäsi verkkosivun.
Tälläistä tallennusta kutsumme paikalliseksi tallennukseksi. Näin toimivat verkkosivut eivät näy muille kuin sinulle itsellesi. Jotta voisimme näyttää sivut koko maailmalle, meidän tulisi ladata tiedostot palvelimelle. Tämä kurssi on kuitenkin ohjelmointikurssi, joten emme perehdy palvelimiin ja niille tallennukseen tällä kurssilla.
Vinkkejä harjoitteluun
- Tutustu esimerkkeihin huolella.