Načrtovanje in razvoj spletnih aplikacij

16. vaja: Obseg in ploščina likov

Spoznali bomo
  • Lastnosti in metode za delo s števili v JavaScriptu
  • Lastnosti in metode, ki so v pomoč pri računanju v JavaScriptu
  • Risanje na platno Canvas z JavaScriptom

Sestavi spletno stran, ki jo prikazujejo spodnje slike in video, stran poimenuj 16vaja-JS-priimek-ime.html izdelana pa naj bo v HTML5 in s CSS.

Koda JavaScript
  • Klik na gumb Izberi lik sproži funkcijo JavaScripta, ki prebere vrednost spustnega seznama (izbran lik) in s stavkom Switch izpiše in izračuna podatke posameznega lika (stranice, ploščino, obseg) ter s Canvasom izriše sliko lika
  • Izpiše besedilo Ne morem izračunati ploščine in obsega, ker nisi izbral lika! v primeru, ko ni bil izbran noben lik

Slika spletne strani, ko se stran naloži v brskalniku:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - začetna stran

Slika spletne strani po kliku gumba Izberi lik, če ne izberemo nobenega lika:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - če ni bil izbran noben lik

Slika spletne strani prikazuje spustni seznam:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - spustni seznam

Slika spletne strani po kliku gumba Izberi lik, ko je bil v spustnem seznamu izbran kvadrat:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - po izbiri kvadrata

Slika spletne strani prikazuje podatke o kvadratu:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - podatki kvadrata

Slika spletne strani po kliku gumba Izberi lik, ko je bil v spustnem seznamu izbran pravokotnik:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - po izbiri pravokotnika

Slika spletne strani po kliku gumba V redu, ko je bila vpisana 1. stranica pravokotnika:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - po vpisu 1. stranice pravokotnika

Slika spletne strani prikazuje podatke o pravokotniku:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - podatki pravokotnika

Slika spletne strani po kliku gumba Izberi lik, ko je bil v spustnem seznamu izbran pravokotni trikotnik:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - po izbiri pravokotnega trikotnika

Slika spletne strani po kliku gumba V redu, ko je bila vpisana 1. kateta pravokotnega trikotnika:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - po vpisu 1. katete pravokotnega trikotnika

Slika spletne strani prikazuje podatke o pravokotnem trikotniku:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - podatki pravokotnega trikotnika

Slika spletne strani po kliku gumba Izberi lik, ko je bil v spustnem seznamu izbran krog:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - po izbiri kroga

Slika spletne strani prikazuje podatke o pravokotnem trikotniku:

Slika spletne strani:
Slika 16.vaje: Obseg in ploščina likov - podatki kroga

Video spletne strani prikazuje vse možne izbire likov:

Video spletne strani v brskalniku