Javascript-harjoitukset 1

Aloita uusi tiedosto, tallenna se kansioon harj nimellä jsharj1.html. Käytä apuna w3schoolin javascript-materiaalia.

1.1

Tee sivulle kappale (p), jonka id = "vastaus".

Kysy promptilla käyttäjän etunimi ja sukunimi. Liitä arvot yhteen (siis tee merkkijonomuuttuja) ja tulosta arvot tekstikappaleessa "vastaus" ja console.log:illa.

Käytä ratkaisussa buttonia aloittamaan tehtävä ja sijoita varsinainen ohjelma erilliseen funktioon.

1.2

Käytä seuraavassa promptia:

Tee www-sivulle kappale (p), jonka id = "suurin" ja kappale, jonka id ="pienin".

Pyydä käyttäjältä 3 lukua.

Tulosta niistä suurin kappaleeseen "suurin". Muuta samalla kappaleen tekstin kokoa 16 pisteeksi.

document.getElementById("suurin").style.fontSize = "16pt"

Tulosta niistä pienin kappaleeseen "pienin". Muuta samalla kappaleen tekstin kokoa 8 pisteeksi.

Käytä ratkaisussa buttonia aloittamaan tehtävä ja sijoita varsinainen ohjelma erilliseen funktioon.

1.3

Lisää sivulle seuraava javascript-ohjelma:

Sivulla on teksti: "Kun hyppäät ilosta, varo, ettei kukaan vedä maata jalkojesi alta." Vaihda teksti buttonia klikkaamalla seuraavaksi "No niin, nyt olet saanut pääsi seintätä läpi. Mitä aiot tehdä naapurisellissä?". Muotoile se samalla kallistetuksi ja anna sille violetti väri.

1.4

Lisää sivulle näkyviin jokin kuva. Kun kuvaa klikataan näytä jokin toinen kuva. Muuta kuvan src-attribuuttia.

1.5

Näytä sivulla surullinen kuva, kun hiiri liikkuu kuvan päälle näytä iloinen kuva. Käytä onMouseOver ja onMouseOut -metodeja.

1.6

Tee lomake jossa pyydetään kilometrit, auton kulutus ja bensiinin hinta. Lomakkeella tulisi olla myös painike jota klikattaessa tulos näytetään käyttäjälle. Kerro paljonko on matkalla kulutetun bensiinin hinta 

tulos = kilometrit / 100 * kulutus * hinta

1.7

Tee ohjelma, jossa käyttäjältä kysytään, onko hän kissa- vai koiraihminen. Kysymyksen voi esittää esim. seuraavalla promptilla:

let vastaus = prompt(oletko kissa- vai koiraihminen);

Kissaihmisille ohjelma tulostaa lauseen "Kissoja onkin mukava silitellä ja kuunnella niiden kehräystä". Koiraihmisille ohjelma tulostaa "Koirien kanssa onkin mukava ulkoilla ja harrastaa". Käytä ohjelmassa if-else-rakennetta.