Algus
Veebilehestikke on loodud 1990ndatest alates. Peale andmete näitamise/vaatamise
on veebis ka üsna algusest peale nendega midagi ka teha saanud. Siinses
õppematerjalis püüamegi veebilehti elama panna, võimaldades kasutajal nende
taga toimetada. Keskendume kliendi arvutis töötavatele Javaskripti
lahendustele, mida saab kohe looma hakata - pole vaja käivitusõigust serveris
ega ligipääsu andmebaasile kui keerukamaid ja riskiohtlikumaid võimalusi.
Küllalt palju kasulikku ja rõõmsat saab ka kasutaja arvutis tööle panna.
Tekstilehekülg
Internetis saab vaadata kõike, mida sinna sisse pannakse ja mida vaataja lugeda
suudab. Olgu see üksik pilt, helilõik või ka lihtsalt tekst. Teksti veebis
kättesaadavaks tegemiseks tuleb see paigutada kausta, kus teksti lugeda saab.
Lihtsamaks katsetamiseks piisab ka kohaliku masina kataloogist, kust siis
hiljem sobiv fail avada.
Näites loodi fail nimega
tervitus.txt
sisuga
tere
Veebilehitsejas kausta vaadates võib näha, et fail on olemas.
Faili avamisel tuleb sisu nähtavale
Ongi esimene tervitav teave edasi antud.
Millega tekstifaile luua - see sõltub juba kasutatavast arvutist ja
operatsioonisüsteemist. Linuxi all kirjutajatel on arvatavasti tuttavad
redaktorid nimedega vi, joe või pico. Windowsi-masinates kuulub
standardkomplekti tarvikute all olev Notepad. Mõnevõrra koodikirjutamist
hõlbustab ning treppida aitab eraldi lisatav Notepad++. Aga eks vastavalt
maitsele leiab kirjutusprogramme piisavalt. Peab lihtsalt vaatama, et
tulemuseks oleks puhtalt salvestatav tekst - sellisena ka edaspidiseid
veebilehti kindlam teha.
HTML-leht
Palja tekstiga saab edasi anda jutu sisu. Tühjade ridade ning taandridadega
saab väljanägemist parasjagu sättida. Kirjutusmasina-ajastul nendest moodustest
täiesti piisas. Nüüd aga on inimesed harjunud vaatama mitmekülgsemat lehekülge
nii väljanägemise kui võimaluste poole pealt. Aastaid on veebiga koos käinud
HTMLi-nimeline keel, mis koos oma tõusude ja mõõnadega on tänapäevalgi
valitsevaks jäänud jõudes nüüd oma viienda versioonini. Järgnevalt üks
koodinäide, kus HTMLi abil leht kokku pandud. Mõned seletused sinna juurde.
Esimene rida
annab veebilehitsejale teada, et millist tüüpi dokumenti oodatakse.
Leht ise jaguneb kaheks suureks osaks: head ning body. Esimeses neist on andmed
lehe kohta - hiljem samuti ettevalmistatud koodilõigud. Teise tuleb lehe sisu
ise. Andmeks lehe kohta on ka title ehk pealkiri. Edasi soovitavalt kasutatav
kooditabel. Täpitähtedega murede vältimiseks oleks see hea sättida utf-8 peale
(ning ühtlasi hoolitseda, et ka oma redaktor selles kodeeringus tähed
väljastaks). Notepad++ juures kohe eraldi selle jaoks menüü olemas.
Teksti kujundamise jaoks on loodud omaette astmeliste laadilehtede keel nimega
CSS. Siin näites antakse teada, et kõik ülemise/esimese taseme pealkirjad
joondatakse keskele (text-align: center). Kel aga on põhjust kujundusega rohkem
tegelda, võib lisateavet hankida veebist nt. http://www.w3schools.com/ õpetuste
hulgast. Või siis Tiigrihüppe abil eraldi valmivast veebikujunduse
õppematerjalist.
Kujunduse katsetus
Sisupoole andmed on lehel üldiselt näha. Kõigepealt siis pealkiri, mis
viisakasti
ja
märgendite vahele pandud. Märgend h1 tähendab esimese
taseme ehk suurimat pealkirja (heading 1). Näitamise mõttes loodud loetelu
(
ehk unordered list), mille sees siis üksikud punktid
-käsuga (list
item). Ning üldjuhul kui mõni märgend algab, siis peab see ka kusagil lõppema.
Nii on pealkirja sabas kaldkriipsuga ning loetelu lõpus
.
Et HTML on tavaline tekstivorming, siis tuleb kõik lisaandmed seal sees
tavalise tekstina edasi anda. Nii ka viide teisele lehele on lihtsalt käsklus
nimega a (anchor), millel atribuudina küljes href (hyperlink reference) koos
aadressiga, kuhu veebilehitseja siis vastava teksti vajutamisel suunatakse.
Välja näeb viisakalt ja lihtsalt vormindatud lehena.
Viimane validaatori viide on siia juurde täiesti mõttega pandud. Kel lehele
esimene pilt ette saadud, võiks kontrollida, et leht ikka igapidi viisakalt
kokku pandud on ning vajalikud märgendid oma kohtadel. Muidu võib tulemusena
ootamatuid üllatusi juhtuma hakata. Kontroll küllaltki lihtne. Kui enamik
korras, näidatakse rohelist vastuslehte. Kui aga märgatavaid muresid süntaksi
poole pealt, siis tuleb vastus punane ning tasub hakata ridade kaupa veateateid
ja soovitusi lugema. Mõnigikord ei pruugi viga olla sama mis näidatakse, kuid
enamjaolt on osutataval real või paar rida kõrgemal midagi viltu läinud, mida
tasub siis kohendada.
Ülesandeid
Tee näited läbi, veendu nende avanemises veebilehitsejas.
Koosta veebileht enese tutvustamiseks - kus ja millal sündinud, kus koolis
käinud, millistest keeltest (kasvõi natuke) aru saad, mis oskustega saad
sõpradele kasulik olla.
Usinamatele: Tee failid võimaluse korral kättesaadavaks mõnes avalikus
veebiserveris (nt. zone.ee). Vaata neid ise ning lase oma sõbral vaadata. Muuda
sisu natuke ning vaata uuesti tulemust.
Kasutajat tervitav leht
Eelnev leht näeb välja ikka samasugune. Kui tahta lehe sisu muuta, siis tuleb
lehe loojal sinna uus jutt kirjutada ning serverisse vaatajatele üles panna.
Lehele kirjutatud programmikood võimaldab aga kasutajale reageerida, lihtsaimal
juhul ta nime küsida ning selle järgi tervitada. Selline suhtlus vajab natuke
sättimist ette.
Levinud sisestuselemendiks on HTMLi märgend nimega input. Teksti jaoks on ta
tüübiks text. Programmikoodi abil elemndi poole pöördumiseks tasub temale
määrata ka id. Nõnda siis sobib veebilehe koodi sisse rida
HTML-fail kokku näeks välja siis järgmine:
Andmete sisestus
Katsetuste leht
Palun eesnimi:
ja lehele tekib sisestuskast.
Tahtes lehel midagi juhtuma panna, tuleb arvutile teada anda, mille peale
midagi toimuma hakkab.
Toimetust saab mugavalt käivitada nupu abil, selle jaoks ka sobiv rida lehele.
Kuvamiseks sobib lehele div-kiht id-ga vastus.
Vastuse koht.
Kõige tähtsamas lõigus tuleb veebilehitsejale seletada, et mida nupuvajutuse
peale tuleb tegema hakata. Veebilehele programmikoodi lisamiseks sobib
head-ossa skriptiplokk
Sinna sisse saab siis hakata arvuti jaoks käsklusi kirjutama. Käsklusi ootava
lehe blankett näeb välja järgmine:
Andmete sisestus
Katsetuste leht
Palun eesnimi:
Vastuse koht.
Soovime, et tervitataks inimest, kelle nimi tekstivälja sisse kirjutatakse.
Selleks tuleb eesnimi tekstiväljast välja võtta, juurde lisada tervitussõna
ning kogu lugu kasutajale kuvada.
Veebilehe elemendile, millel on id-atribuut, saab ligipääsu küsida Javaskripti
käsklusega
document.getElementById
Elementide sisu küsimiseks ja muutmiseks on neil omadus innerHTML. Kui soovin
vastusplokki kirjutada lihtsalt Tere, siis see näeb välja
document.getElementById("vastus").innerHTML="Tere";
Paljas käsklus aga niisama iseenesest ei tea käivituda. Selleks tuleb käsklus
panna nimega funktsiooni sisse ning nupuvajutuse peale see funktsioon tööle
panna.
function tervita(){
document.getElementById("vastus").innerHTML="Tere";
}
Näites siis tervita on funktsiooni nimi. Ümarsulud kuuluvad funktsiooni nime
juurde. Ning järgnevate loogeliste sulgude vahele pannakse käsud, mis
funktsiooni käivitamisel tööle pannakse.
Nupuvajutuse peale funktsiooni käivitamiseks tuleb nupu onclick-atribuudis
öelda, et milline funktsioon käima läheb. Sedakorda siis ainuke mis meil on ehk
funktsioon nimega tervita.
Pärast täiendusi näeb kool välja järgmine
Programmikoodi katsetus
Katsetuste leht
Palun eesnimi:
Vastuse koht
Enne nupuvajutust paistab vastuse kihil olema "Vastuse koht", pärast
programmikoodi abil pandud "Tere".
Nõnda siis
document.getElementById("vastus").innerHTML=
"Tere, "+document.getElementById("eesnimi").value;
tulemuseks on, et kihi "vastus" sisuks (innerHTML) saab tervitus inimesele,
kelle eesnimi tekstivälja sisestati.
Programmikoodi katsetus
Katsetuste leht
Palun sisesta oma eesnimi:
Vastuse koht.
Katsetuse tulemus näha ka ekraanil.
Ülesanne
* Loo ekraanile kaks tekstivälja: üks eesnime, teine perekonnanime jaoks.
Tervita kasutajat mõlemat nime pidi.
Tollid sentimeetriteks
Arvuti nimigi räägib, et masin võiks mõista arvutada. Tänapäeva
programmeerimiskeelte puhul tuleb vahel enne otsida kohta, kuidas masin
arvutama panna, aga üldjuhul on see täiesti võimalik.
Järgnev lihtne näide arvutab tolle sentimeetriteks. Kordajaks 2,54 - ühele
tollile vastab nõnda palju sentimeetreid. See tähendab, et toll on pikem ning
sama pikkuse peale on tolle vähem. Programmeerimiskeeltes kasutatakse koma
asemel punkti - see tava Inglise/Ameerika poolt tulnud. Kui kasutajaliideses
mõnikord säetakse väljanägemine kasutaja asukohale vastavaks, siis
programmeerimiskeele sees on ta ikka ühtmoodi.
Andmeid saab kasutajalt ikka samuti kätte. Tema sisestab numbrid tekstivälja.
Tekstivälja küljes on id, mille järgi saab välja ja selle sees oleva väärtuse
küsida. ning edasi võib teha juba sobivaid tehteid. Avaldis
document.getElementById("tollidearv").value*2.54+" cm";
teatab, et võetakse tekstikasti nimega "tollidearv" väärtus ja korrutatakse see
2.45-ga. Juurde liidetakse veel tühik ja cm, mis tähtedena kolmekesi
jutumärkide vahel. Nõnda kasutajal pärast ekraanilt parem lugeda, et mida
väljastatud vastus tähendab.
Arvutamine
Arvutamine
Mitu tolli:
Tulemus ekraanil:
Ülesandeid
* Loo leht, millega arvutatakse sentimeetreid tollideks. Tolle on
sentimeetritest 2.54 korda vähem.
* Koosta uuele lehele kalkulaator, kus poehinna puhul näidatakse, kui palju
sellest moodustab käibemaks (20%). Vihje: kui hind letil on 1 euro ja 20 senti,
siis 1 euro saab kaupmees ning käibemaksuks läheb 20 senti (20% suuruse maksu
puhul).
* Paiguta lehele kaks tekstivälja. Ühte kirjutatakse toote hind,
teise ostetav kogus. Väljastatakse vajalik summa.
* Tutvu lisade juurest aritmeetilise keskmise leidmise näitega. Koosta
omaloodud kalkulaator, kasutades vajadusel kalkulaatorite loomiseks pakutud
ideid.