Luennot

Vain aloitusluento on tavallinen luento. Pääasiassa materiaalina käytetään opettajan tekstimateriaaleja ja Mozilla Developer Network-dokumentteja.

Kurssin oma materiaali

Luennot ovat siinä järjestyksessä, jossa niitä tarvitaan viikkotehtävissä. Jokaisen ryhmän kohdalla lukee, mihin tehtävään sitä tarvitaan. Voit lukea luentoja myös muussa järjestyksessä, mutta myöhemmät luennot olettavat aiempien asiat tutuiksi.

Kurssin aloitusluento (8.9.2026)

• Perusteet ja työkalut – viikkotehtävä 1
  • Työkalut – editori, koodin tarkistus ja selaimen kehittäjätyökalut. Lue tämä ensimmäisenä: näitä tarvitaan joka tehtävässä.
  • Javascript-perusteet
• CSS kertauksena
  • CSS-valitsimet
  • Layout ja asemointi (ITKP1011)
  • CSS-mediatyypit ja mediakyselyt (ITKP1011)
• DOM ja tapahtumat – viikkotehtävä 2
  • Document Object Model (DOM) – sisältää myös XSS:n eli sen, miksi merkkausta ei saa tuottaa merkkijonoista
  • DOM ja tapahtumat – tapahtumankäsittely, tarkkailijat, dialogit ja osoiterivin käyttäminen
  • Javascript ja CSS – luokat, tyylit, CSS-muuttujat ja CSS-funktiot
• Tiedon hakeminen ja tallentaminen
  • Fetch ja asynkroniset funktiot
  • LocalStorage – tietojen tallentaminen
• Lomakkeet – viikkotehtävä 3
  • Lomakkeet ja saavutettavuus – lomakekentät, validointi sekä ARIA ja fokuksen hallinta
  • Saavutettavuus ja käytettävyys (ITKP1011) – saavutettavuuden perusteet, jotka lomakeluento olettaa tutuiksi
• Grafiikka ja animaatiot – viikkotehtävä 4
  • Scalable Vector Graphics (SVG)
  • Canvas
  • CSS- ja Javascript-animaatiot
• Drag & drop – viikkotehtävä 5
  • Drag & drop ja osoitinlaitteet – raahaaminen, kosketusnäytöt ja pointer-tapahtumat
  • Karttojen käyttäminen käydään läpi pääteohjauksessa 5
• Komponentit ja kirjastot – viikkotehtävä 6
  • Web-komponentit – selaimen oma tapa tehdä omia elementtejä.
  • React.js, jota ei enää käytetä kurssilla
  • jQuery – vanhempi kirjasto, jota ei tarvita viikkotehtävissä. Mukana, koska sitä kohtaa yhä vanhoissa projekteissa.

Ulkopuoliset materiaalit

• Mozilla Developer Network (MDN) – paras ja luotettavin englanninkielinen lähde kurssilla tarvittavista aiheista. Tutustu erityisesti seuraaviin dokumentteihin:
  • Learn web development – MDN:n oma opetusmateriaali aloittelijalle
  • A re-introduction to JavaScript
  • JavaScript Guide
  • JavaScript reference
  • HTML elements reference
  • CSS reference
  • SVG: Scalable Vector Graphics
  • Introduction to the DOM
  • Document Object Model (DOM)
  • The HTML DOM API
  • Event – tapahtumaolion rajapinta
  • HTML Drag and Drop API
• Oppaat ja kirjat
  • The Modern JavaScript Tutorial – ilmainen ja järjestelmällinen opas, joka sopii MDN:n hakuteoksia paremmin opetteluun
  • Eloquent JavaScript – ilmainen kirja, joka menee perusteita syvemmälle
• Saavutettavuus
  • ARIA Authoring Practices Guide – valmiit roolit, tilat ja näppäinkomennot tavallisimmille käyttöliittymän osille
  • How to Meet WCAG 2.2
• Selaintuki – osa kurssilla esiteltävistä ominaisuuksista on uusia. Tarkista tuki ennen kuin käytät niitä muualla kuin tällä kurssilla:
  • Can I use
  • Baseline – kertoo, kuinka kauan ominaisuus on ollut kaikissa selaimissa
• Kehittäjätyökalut ja React
  • Firefox Developer Tools
  • Chrome DevTools
  • React: Learn – Reactin virallinen opetusmateriaali