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 (. 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.

Katsetuste leht

Ning selgema pildi saamiseks lehe kood tervikuna. Kujunduse katsetus

Katsetuste leht

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