Javascript-harjoitukset 2

Aloita uusi tiedosto, tallenna se kansioon harj nimellä jsharj2.html, tee javascript tiedostoon jsharj2.js. Käytä apuna w3schoolin javascript-materiaalia.

1. Bussilipun hinta (if)

Pyydä käyttäjältä ikä. Kerro tämän jälkeen käyttäjälle paljonko bussilippu maksaa.

Hinnasto:

ikäryhmähinta
7-16 1.05 €
17-24 1.52 €
aikuiset 2.10 €
65+ 1.16 €

2. Numeron arvaaminen

Tee lomake jossa pyydetään luvulle ala- ja yläraja. Lisää myös kenttä jolla pyydetään käyttäjän arvaama luku. Tietokone kertoo arvasiko käyttäjä oikean luvun kun painetaan nappia Vastaa.

Alaraja

Yläraja

Vastaus

Jos käyttäjä arvaa oikein kehu käyttäjää oikeasta vastauksesta, muuten ilmoita että käyttäjä vastasi väärin.

3. Numeron arvaaminen 2.0

Parantele sovellustasi siten, että lähtöarvojen tulee olla hyväksyttyjä. Alaraja ei voi olla suurempi kuin yläraja, arvauksen tulee olla oikealla välillä jne.

Lisää sovellukseen laskuri joka kertoo montako kertaa on arvattu. Kun arvataan oikein kerrotaan käyttäjälle montako arvausta kului.

Lisää sovellukseen vihje joka kertoo onko käyttäjän arvaama luku liian pieni tai liian suuri.

4. toistorakenne

Laadi lomake jossa pyydetään käyttäjältä montako päivää hän haluaa tulostettavan. Painiketta painettaessa tulostetaan divin sisälle seuraavat n päivämäärää. Päiväys voi olla esimerkiksi p-elementin sisällä (innerHTML).

Päivämäärän hallintaan on useita funktioita, tutki niiden käyttöä w3schoolin sivuilla.

// tämä päivä Date-oliossa
let today = new Date();
// huominen käyttäen Date-olion metodeja, lisätään päivään yksi
let tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);

5. Lisätehtävä

Kokeile miten yksinkertaisen pelin tekeminen onnistuisi käyttäen canvasta.

Ping Pong