Johdatus ohjelmointiin

Sorakuilu

Ylimääräisiä DOM-harjoituksia 2_5

2_5.1 Luo lista

Luo www-sivulle lista kirjoista pelkästään JavaScriptin avulla (siis elementtejä ei ole ennestään sivulla.

Lisää listaan kirjoja: "Hanhiemon satuaarre", "Grimmin sadut", "Tiitiäisen satupuu" sekä "Muumipappa ja meri".

2_5.2 HTML-lomake, lisää kenttiä

Luo lomake, jossa on tekstikenttä joukkueen nimeä varten. Kentän name on "j1".

Kun kentän alapuolella on button, jossa lukee "Lisää joukkue"

Kun buttonia klikataan, se lisää lomakkeeseen uuden kentän, jonka name="j2". Seuraavan kerran se lisää kentän, jonka name="j3" jne.

2_5.3 Taitaja-tehtävä (SM-kisojen semifinaalitehtävä 2020)

Oppilaitoksen tietoteknisten laitteiden sijoittelu

Oppilaitoksessa on kaksi kerrosta. Tiedostossa: http://public.bc.fi/katta/taitaja2020/pohjapiirros.pdf on rakennuksen ylimalkainen pohjapiirros. Voit käyttää sitä perustana, kun teet omannäköisen version pohjapiirroksesta.

Oppilaitoksella on tietotekniikan hallinnointiin järjestelmä, josta saadaan näkyviin laitteiden nykyinen sijainti. Järjestelmässä on myös tekoälypohjainen ohjelma, jonka avulla sijaintitiedot ovat optimoitavissa ylioppilaskirjoituksia varten. Tämän optimoinnin visualisointiin, sinun on toteutettava seuraava toiminnallisuus sivustolle:

Alkutilanne, jonka mukaisesti koneet on sijoitettava pohjapiirroskuvaan:

TilaKoneen tyyppiMääräAbitti yhteensopivaKoneen/symbolin väri
11 PC 5 kyllä Vihreä
12 Mac 7 ei Sininen
13 Chromebook 4 ei Violetti
14 PC 3 kyllä Vihreä
15 PC 2 kyllä Vihreä
16 Mac 3 ei Sininen
17 Mac 3 ei Sininen
18 Chromebook 4 ei Violetti
23 PC 5 kyllä Vihreä
24 Chromebook 4eiVioletti
25 Mac 3 ei Sininen
26 PC 5 kyllä Vihreä
27 Mac 3 ei Sininen
28 PC 5 kyllä Vihreä

Painike tekstillä: Optimoi abittikoneet

Lopputilanne, jonka mukaisesti koneet on sijoitettava pohjapiirroskuvaan:

TilaKoneen tyyppiMääräAbitti yhteensopivaKoneen/symbolin väri
11 Chromebook 2 ei Violetti
12 Mac 4 ei Sininen
13 Chromebook 2 ei Violetti
14 Mac 3 ei Sininen
15 PC 20 kyllä Vihreä
16 Mac 3 ei Sininen
17 Mac 3 ei Sininen
18 Chromebook 2 ei Violetti
23 Chromebook 2 ei Violetti
24 Chromebook 2 ei Violetti
25 Mac 3 ei Sininen
26 Chromebook 2 ei Violetti
27 Mac 3 ei Sininen
28 PC 5 kyllä Vihreä

Sivulla pitää olla myös painike: Palauta alkutilanne, jolloin pohjapiirroksessa näkyy alkutilanteen mukainen tilanne.

Saat toteuttaa tämän sivuston osan haluamallasi tekniikalla. 

Leenan huomio: kokeile ensin pienemmällä kuvalla ja muutamalla koneella. Pohjakuva kannattanee tehdä isoksi kiinteäkokoiseksi div-elementiksi, jossa on huoneiden kohdalla position: absolute-sijoitetut pienemmät div-elementit, id huoneen numeron mukaan. Jos absoluten haluaa toimivan, isommalla tulee olla position (relative). Absolute -sijoitus tarkoittaa, että on suhteessa äitielementtiin koko ajan paikallaan.

Voisiko taulukoista tehdä JavaScript -taulukot ja kahdella for-silmukalla sijoittaa koneet (eli lapset) omiin pikkudiveihinsä ???. Taulukon luomisesta ja lukemisesta löytyy pieni malli http://www.leeniemi.net/ohjs/index.php?sivu=osa6, kohta kaksiulotteinen taulukko.