Algus
Veebilehestikke on loodud 1990ndatest alates. Peale andmete näitamise/vaatamise
on veebis ka üsna algusest peale nendega midagi ka teha saanud. Siinses õppemate
rjalis püüamegi veebilehti elama panna, võimaldades kasutajal nende taga toimeta
da. 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õõms
at 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ätte
saadavaks tegemiseks tuleb see paigutada kausta, kus teksti lugeda saab. Lihtsam
aks 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 operatsiooni
sü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 lisata
v Notepad++. Aga eks vastavalt maitsele leiab kirjutusprogramme piisavalt. Peab
lihtsalt vaatama, et tulemuseks oleks puhtalt salvestatav tekst - sellisena ka e
daspidiseid veebilehti kindlam teha.
HTML-leht
Palja tekstiga saab edasi anda jutu sisu. Tühjade ridade ning taandridadega saa
b väljanägemist parasjagu sättida. Kirjutusmasina-ajastul nendest moodustest täi
esti 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 ab
il 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 is
e. Andmeks lehe kohta on ka title ehk pealkiri. Edasi soovitavalt kasutatav kood
itabel. 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). No
tepad++ juures kohe eraldi selle jaoks menüü olemas.
Teksti kujundamise jaoks on loodud omaette astmeliste laadilehtede keel nimega C
SS. Siin näites antakse teada, et kõik ülemise/esimese taseme pealkirjad joondat
akse 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 viisakast
i
ja
märgendite vahele pandud. Märgend h1 tähendab esimese taseme ehk
suurimat pealkirja (heading 1). Näitamise mõttes loodud loetelu (
ehk unor
dered list), mille sees siis üksikud punktid
-käsuga (list item). Ning üldju
hul kui mõni märgend algab, siis peab see ka kusagil lõppema. Nii on pealkirja s
abas 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, k
uhu 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 esim
ene pilt ette saadud, võiks kontrollida, et leht ikka igapidi viisakalt kokku pa
ndud on ning vajalikud märgendid oma kohtadel. Muidu võib tulemusena ootamatuid
üllatusi juhtuma hakata. Kontroll küllaltki lihtne. Kui enamik korras, näidataks
e rohelist vastuslehte. Kui aga märgatavaid muresid süntaksi poole pealt, siis t
uleb vastus punane ning tasub hakata ridade kaupa veateateid ja soovitusi lugema
. Mõnigikord ei pruugi viga olla sama mis näidatakse, kuid enamjaolt on osutatav
al 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äinu
d, millistest keeltest (kasvõi natuke) aru saad, mis oskustega saad sõpradele ka
sulik olla.
Usinamatele: Tee failid võimaluse korral kättesaadavaks mõnes avalikus veebiserv
eris (nt. zone.ee). Vaata neid ise ning lase oma sõbral vaadata. Muuda sisu natu
ke ning vaata uuesti tulemust.
Kasutajat tervitav leht
Eelnev leht näeb välja ikka samasugune. Kui tahta lehe sisu muuta, siis tuleb le
he 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 k
a 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 pea
le tuleb tegema hakata. Veebilehele programmikoodi lisamiseks sobib head-ossa sk
riptiplokk
Sinna sisse saab siis hakata arvuti jaoks käsklusi kirjutama. Käsklusi ootava le
he 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. Sel
leks tuleb eesnimi tekstiväljast välja võtta, juurde lisada tervitussõna ning ko
gu 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 va
stusplokki 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 pa
nna 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 juu
rde. 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 funkt
sioon 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 programmiko
odi 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, kell
e 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. Tervit
a kasutajat mõlemat nime pidi.
Tollid sentimeetriteks
Arvuti nimigi räägib, et masin võiks mõista arvutada. Tänapäeva programmeerimisk
eelte puhul tuleb vahel enne otsida kohta, kuidas masin arvutama panna, aga üldj
uhul on see täiesti võimalik.
Järgnev lihtne näide arvutab tolle sentimeetriteks. Kordajaks 2,54 - ühele tolli
le vastab nõnda palju sentimeetreid. See tähendab, et toll on pikem ning sama pi
kkuse peale on tolle vähem. Programmeerimiskeeltes kasutatakse koma asemel punkt
i - see tava Inglise/Ameerika poolt tulnud. Kui kasutajaliideses mõnikord säetak
se 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. Te
kstivälja küljes on id, mille järgi saab välja ja selle sees oleva väärtuse küsi
da. 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 vastu
s tähendab.
Arvutamine
Arvutamine
Mitu tolli:
Tulemus ekraanil:
Ülesandeid
* Loo leht, millega arvutatakse sentimeetreid tollideks. Tolle on sentimeetrites
t 2.54 korda vähem.
* Koosta uuele lehele kalkulaator, kus poehinna puhul näidatakse, kui palju se
llest moodustab käibemaks (20%). Vihje: kui hind letil on 1 euro ja 20 senti, si
is 1 euro saab kaupmees ning käibemaksuks läheb 20 senti (20% suuruse maksu puhu
l).
* Paiguta lehele kaks tekstivälja. Ühte kirjutatakse toote hind,
teise ostetav kogus. Väljastatakse vajalik summa.
Kolme arvu aritmeetiline keskmine
Näitena juurde veidi pikema arvutusvalemiga kalkulaator.
Hinna või tollide arvu leidmiseks tekstiväljast saadud väärtusi korrutades saab
Javaskript ise aru, et neid tuleb arvudena käsitleda. Tähtede omavahelisest korr
utamisest pole üldiselt erilist kasu ning seetõttu korrutamistehte peale muudeta
kse enne nad sisestatavast tekstist arvutatavateks arvudeks ning korrutamise pea
le saadakse mõistlik vastus kätte. Kui aga liitmiskäsuna kirjas plussmärk, siis
ei tea arvuti, kas ta peaks panema tähti üksteise otsa või liitma leitud arvulis
i väärtusi. Ehk siis kas 3+2 on 5 või hoopis 32. Javaskripti puhul valitakse tav
ajuhul kusjuures viimane vastus. Et arvuti teaks neid arvudena liita ja arvestad
a, et kolm pluss kaks on viis, selleks aitab käsklus parseInt.
var a1=parseInt(document.getElementById("arv1").value);
teatab, et tuleb võtta tekstivälja arv1 väärtus ning see parseInt käskluse abil
mälus täisarvuks teisendada. Tulemus talletatakse muutuja ehk märksõna a1 alla.
Sõna var seal ees näitab, et tegemist uue muutujaga. Nõnda saab ka teised väärtu
sed tekstiväljadest arvuna kätte ning pärast seda võib valemitega toimetama haka
ta ja lõpuks tulemuse väljastada.
Keskmiste arvutamine
Keskmised
Arvud:
Kalkulaatorite ideid
Üheks Javaskripti levinud rakenduseks on mitmesugused veebilehel töötavad kalkul
aatorid. Kui valem on teada, siis pole muud kui andmed sisse ja vastus käes. Et
selline oskus edaspidi libedalt läheks, tasub ise vähemalt üks arvutusvalem välj
a mõelda või üles otsida ning selle kohta kalkulaator teha. Kui omal paremaid mõ
tteid ei tule, siis mõne idee saab julgesti siit.
Bensiinimüük
Kehamassi indeks
Mõõtühikud - hulgiteisendus
Vahemaa läbimiseks kuluv aeg
Söögi kalorsus / toitainete sisaldus
Elektrienergia arvutused
Keskmiste arvutamine (aritmeetiline/geomeetriline/mediaan)
Palgakalkulaator (üldsumma, bruto, neto, sotsiaalmaks, töötuskindlustus)
Ruutvõrrandi nullkohad (ruutjuure käsk Math.sqrt())
Kahe muutujaga lineaarvõrrandsüsteemi lahend