JWT Hyrskykari, SIS, Tampereen yliopisto 4/25/2013
|
|
- Annika Korhonen
- 7 vuotta sitten
- Katselukertoja:
Transkriptio
1 Aulikki Hyrskykari Lomakkeet Javascript perusteet Tähän asti on käsitelty miten WWW sivuja käytetään tiedon välittämiseen käyttäjälle. Lomakkeiden avulla voidaan saada tietoa toiseen suuntaan, käyttäjältä sivun julkaisijalle. Lomakkeet ovat keskeinen osa vuorovaikutteisten verkkopalvelujen toteuttamisessa, esimerkiksi o hakukoneet o verkkokaupat o informaatiopalvelut (kirjastot, tietokannat jne.) o www pohjaiset sähköpostipalvelut o mielipidekyselyt o tapahtumiin, kursseille yms. ilmoittautumiset
2 Lomakkeet koostuvat kahdesta osasta: (1) WWW sivulla näkyvästä, HTML:n ja CSS:n avulla määritellystä lomakkeesta ja (2) Lomakkeelle annettujen tietojen käsittelyn tekevästä ohjelmasta ("lomakkeenkäsittelijä", tallennettuna palvelimelle). Lomakkeet on koettu HTML:ssä hankaliksi, koska o muotoilu ja käsittely vaatii muita sivuelementtejä enemmän sekä CSS että Javascript koodausta HTML5:ssä tämä on pyritty ottamaan huomioon o sisältää huomattavan määrän uusia elementtejä o uusia attribuutteja lomakkeen käsittelyä varten Selaimet eivät kovin kattavasti tue vielä o HTML tulkit jättävät tunnistamattomat elementit tai attribuutit käsittelemättä o uudet ominaisuudet jäävät vain huomiotta o tulevat käyttöön sitä mukaan kun uudet selainversiot osaavat niitä tulkita
3 Wufoo ( o voit tarkistaa miten eri selaimet ja selainversiot tukevat HTML5 lomakkeen uusia - input tyyppejä - input attribuutteja - lomake elementtejä Sivustolla myös o esimerkkikuvia lomake elementtien toiminnasta o helppo kokeilla livenä uusien piirteiden toimintaa <form {lomake elementin attribuutit}> {elementit lomakkeen sisällä määräävät lomakkeen sisällön} {elementti, joka lähettää lomakkeen käsittelyyn (input type="submit")} </form> Lomakkeen mahdolliset attribuutit: accept charset action autocomplete novalidate target enctype method name
4 accept_charset: Määrittää merkistökoodauksen, jota palvelin lomakkeelta odottaa jos tämä jätetään antamatta oletuskoodaus sama kuin mitä HTMLdokumentissa on käytetty. <form accept charset="iso "> action: Määrittää lomakkeenkäsittelijän <form action="mailaa.pl"> autocomplete : Kenttien automaattitäyttö (ehdottaa aiempia syötteitä) <form autocomplete="on"> enctype: Kenttien arvojen koodauksen määrittelymahdollisuus <form enctype="multipart/form data"> method: Lomakkeen tiedot voi lähettää verkkosovellukselle kahdella eri tavalla, get tai post metodia käyttäen. <form method= post"> name: Antaa lomakkeelle nimen, jota ohjelmat käyttävät tunnistetietona lomakeen avulla lähetettyihin tietoihin viitattaessa. Nimen tulee olla yksikäsitteinen (lomakkeiden kesken) <form name= asiakastiedot"> novalidate : Määrittää, että lomakkeelle annetuille tiedoille ei tehdä automaattista tarkistusta ennen lähetystä. <form novalidate> target: Määrittää missä lomakkeen aktivioman cgi ohjelman palauttama HTMLdokumentti näytetään <form target ="_blank >
5 kenttien esittelyissä saattavat globaalin id attribuutin ja lomakkeen name attribuutin roolit joskus vaikuttaa sekavilta arvojen ei välttämättä tarvitse olla samat, vaikka oyleinen käytäntö on antaa niille samat arvot <input type="checkbox" id="film" name="film" value="elokuva" /> name opakollinen jokaiselle syötekentälle oarvon avulla verkkosovellus palvelimella tunnistaa miltä elementiltä syötetieto on peräisin id okäytetään verkkosivun sisällä kenttään viittamiseksi <form {lomake elementin attribuutit}> {elementit lomakkeen sisällä määräävät lomakkeen sisällön} {elementti, joka lähettää lomakkeen käsittelyyn (input type="submit")} </form> Lomake elementin sisälle kirjoitettavat elementit määrittävät lomakkeen kentät <button> <datalist> <fieldset> <input> <legend> <keygen> <label> <meter> <optgroup> <option> <select> <textarea> <output> <progress> <input> elementin avulla voidaan esitellä suurin osa lomakkeen syötekentistä, käsitellään se seuraavassa ensin
6 Yleinen lomakkeen syötekenttä, type attribuutti määrittelee tarkemmin millaisesta syötekentästä on kyse. Sallittu sisältö: ei sisältöä (tyhjä elementti) Sallitut attribuutit: globaalit attribuutit, type, accept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, value, width, Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä <input type="text" id="sivu id" name="palvelin id" value="oletusarvo" /> Yhden tekstirivin syöttö, password kentässä merkit piilotetaan näkyvistä, size attribuutilla syötettävän merkkijonon pituus <fieldset> <legend>tekstiä ja salasana </legend> <label for="kja tunnus">tunnus:</label> <input type="text" name="kja tunnus" id="kja tunnus" size="22" value="anna käyttäjätunnuksesi" /> <label for="password">salasana:</label> <input type="password" name="password" id="password" size="15" /> </fieldset>
7 Painikkeita, joista kolme ensimmäistä ovat painikkeen näköisiä, ja neljäskin käyttäytyy kuten painike, vaikka onkin kuva o button: ei erikseen määriteltyä toiminnallisuutta, toiminnallisuus toteutettava itse esim. Javascriptillä o reset: palauttaa lomakkeen kentät alkuarvoihinsa o submit: lähettää lomakkeen tiedot käsittelyyn o image: kuten submit, mutta voidaan tehdä jostain kuvasta <input type="submit" value="lähetä" /> <fieldset> <legend>lataa tiedosto [input/type=file]</legend> <label for="lataa-tiedosto">tiedoston nimi: </label> <input type="file" name="lataa-tiedosto" id="lataa- Valintaruutu (valittu/ei valittu) <fieldset> <legend>oletko kiinostunut [input/type=checkbox]</legend> <label for="film">elokuvista</label> <input type="checkbox" name="film" id="film" value="elokuva" /> <label for="kirja">kirjallisuudesta</label> <input type="checkbox" name="kirja" id="kirja" value="kirja" /> <label for="garden">puutarhan hoidosta</label> <input type="checkbox" name="garden" id="garden" value="puutarha" /> <label for="sport">urheilusta</label> <input type="checkbox" name="sport" id="sport" value="urheilu" /> <label for="cars">autoilusta</label> <input type="checkbox" name="cars" id="cars" value="autot" /> </fieldset>
8 Radiopainike, ts. ryhmä valintoja, joista vain yksi voi olla valittuna <fieldset> <legend>ikäsi [input/type=radio]</legend> <label for="alle20">alle 20</label> <input type="radio" name="ika" id="alle20" value="alle20" /> <label for="20 39">20 39</label> <input type="radio" name="ika" id="20 39" value="20 39" /> <label for="40 59">40 59</label> <input type="radio" name="ika" id="40 59" value="40 59" /> <label for="yli59">yli 60</label> <input type="radio" name="ika" id="yli59" value="yli59" /> </fieldset> Kenttä, jota ei näytetä lomakkeella o voidaan käyttää arvojen tallentamiseen näkymättömiin lomakkeelle Esimerkiksi <input type="hidden" name="date submitted" value=" "> Tyypillinen käyttö o ohjelman generoimia arvoja lomakkeelle talteen näkymättömiin o esimerkiksi kenttien tietoja niin että ne voidaan lomakkeelle palattaessa palauttaa käyttäjä ei joudu syöttämään tietoja kaikkiin kenttiin uudelleen
9 Uusia komponentteja: <input type = month week time date datetime datetime local > Aikaan liittyvän syötteen vastaanottamiseen o osassa on toteutettuna kalenterityyppinen käyttöliittymäkomponentti Wufoo: Käyttöliittymäkomponenti värin, verkko osoitteen, sähköpostiosoitteen ja puhelinnumeron vastaanottamiseen Wufoo:
10 Luvun syöttäminen tai valinta joltain väliltä (liukukontrollin avulla) ja kenttä hakulausekkeen syöttämiseksi hakukoneelle. Wufoo: accept="audio/* video/* image/* MIME_type" Määrittää (tiedoston latauskomponentin yhteydessä) minkä tyyppisiä tiedostoja, tiedoston latauskomponentin avulla hyväksytään ladattavaksi palvelimelle (ääntä, videota tai kuvia) alt= "seliteteksti kuvalle" vain image tyyppisen käyttöliittymäkomponentin yhteydessä autocomplete= "seliteteksti kuvalle" määrittää, käytetäänko syötekenttää kirjoitettaessa automaattitäydennystä autofocus [="autofocus"] määrittää että komponentti aktivoidaan sivun latauduttua (ts. tälle kentälle/painikkeelle annetaan fokus aluksi checked [=checked] käytössä syötetyyppien radio ja checkbox yhteydessä; asettaa niissä kyseisen vaihtoehdon (esi)valituksi.
11 disabled [= disabled ] asettaa komponentin passiiviseen tilaan, jolloin käyttäjä ei pääse muokkaamaan sen sisältöa tai napsauttamaan sitä hiirellä, passivoidun komponentin nimi/arvo paria ei välitetä palvelimelle. form= lomakkeen id" komponenetti liitetään kuuluvaksi tiettyyn lomakkeeseen (vaikka se ei olisikaan <form> elementin sisällä), näin komponentin arvo välitetään palvelimelle lomakkeen mukana vaikka se sijaitsisikin sivulla visuaalisesti lomakkeen muista komponenteista erillään formaction="lomakkeenkäsittelijä url" painikkeelle määritellä muitakin lomakkeenkäsittelijöitä kuin elementin esittelyssä annettu formenctype="application/x www form urlencoded multipart/formdata text/plain" määrittää kentästä palvelimelle lähetettävän tiedon koodauksen (käytettäessä post metodia) formmethod ="get post" painikkeelle määritelty lähetystapa, joka syrjäyttää lomakkeelle annetun lähetystavan formnovalidate[="formnovalidate"] ehkäisee lomakkeen lähetyspainikkeessa lomakkeen kenttien automaattisen tarkistuksen palvelimelle lähetettäessä formtarget="iframe nimi _blank _self _parent _top" vain image tyyppisen käyttöliittymäkomponentin yhteydessä height = ei negatiivinen luku" määrää kuvan avulla muodostetun syötekomponentin korkeuden pikseleissä list = datalist id" liittää syötekentän <datalist> elementtiin, jossa on lueteltu kenttään mahdollisesti syötettäviä arvoja, joita käytetään kun automaattinen täydentäminen ehdottaa kentälle arvoksi. max min = number date kentän suurin pienin mahdollinen arvo
12 maxlength= luku" määrää kuinka monta merkkiä syötekenttään maksimissaan otetaan vastaan multiple= multiple" antaa mahdollisuuden valita useamman tiedoston kerralla name= nimi" antaa komponentille nimen, jota käytetään tunnistetietona kun elementin arvo lähetetään lomakkeenkäsittelijälle pattern="säännöllinen lauseke" mahdollistaa hyväksyttävän arvon määrittelemisen säännöllisten lausekkeiden avulla placeholder= vihje kenttään voi antaa vihjeeksi alku arvon, joka esimerkiksi kehottaa antamaan syötteen tietyssä readonly [="readonly ] asettaa kentän passiiviseen tilaan, sen arvoa ei pääse muokkaamaan. required [="required"] pakollisti täytettävä kenttä: kenttään on annettava arvo ennen kuin lomakkeen voi lähettää käsittelyyn size=" positiivinen luku" kenttään näkyviin mahtuvien merkkien lukumäärä src= osoite" käytössä vain image tyyppisellä kentällä: osoite, josta kuva noudetaan value="merkkijono" käytetään rajoittamaan hyväksyttäviä syötekentän arvoja, sekä lukuarvojen rajoittamiseen että ajan painoarvon määrittämiseen width= ei negatiivinen luku" kuvan avulla muodostetun syötekomponentin leveys pikseleissä
13 <fieldset> Asettaa kentät lomakkeella omaksi kehystetyksi ryhmäkseen, ryhmälle voi antaa otsikon <legend> elementin avulla. Sallittu sisältö: <legend> elementti, jota voi seurata mitä tahansa flowsisältöä Sallitut attribuutit: globaalit attribuutit, name, disabled, form Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <fieldset> <legend>tekstiä ja salasana</legend> <label for="kja tunnus">tunnus:</label> <input id="kja tunnus" type="text" name="kja tunnus"size="22" value="anna käyttäjätunnuksesi" /> <label for="password">salasana:</label> <input id="password" type="password" name="password"size="15" /> </fieldset> <legend Antaa lomakkeella otsikon <fieldset> kenttäryhmälle. Sallittu sisältö: mitä tahansa phrasing sisältöä Sallitut attribuutit: globaalit attribuutit Sallittu äiti elementti: kenttäryhmä, ts. <fieldset> elementti <fieldset> <legend>tekstiä ja salasana</legend> <label for="kja tunnus">tunnus:</label> <input id="kja tunnus" type="text" name="kja tunnus"size="22" value="anna käyttäjätunnuksesi" /> <label for="password">salasana:</label> <input id="password" type="password" name="password"size="15" /> </fieldset>
14 <label> Antaa kentälle nimikkeen. Sallittu sisältö: flow tai phrasing content. Sallitut attribuutit: globaalit attribuutit, for, form Sallittu äiti elementti: kenttäryhmä, ts. <fieldset> elementti <fieldset> <legend>tekstiä ja salasana</legend> <label for="kja tunnus">tunnus:</label> <input id="kja tunnus" type="text" name="kja tunnus"size="22" value="anna käyttäjätunnuksesi" /> <label for="password">salasana:</label> <input id="password" type="password" name="password"size="15" /> </fieldset> Syötekomponentti useamman rivin tekstille. Sallittu sisältö: merkkimuotoista tietoa Sallitut attribuutit: globaalit attribuutit, autofocus, cols, dirnamea, disabled, form, maxlength, name, placeholder, readonly, required, rows, wrap Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä <textarea id="msg" rows="10" cols="40" name="msg">
15 Elementti erilaisten painikkeenomaisesti toimivien komponenttien toteutukseen esimerkiksi teksti voi toimia painikkeena Sallittu sisältö: phrasing sisältöä Sallitut attribuutit: globaalit attribuutit, autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä <button name="kentan id">nimesi:</button> <select> <option> <optgroup> Toteuttaa valintalistan Sallittu sisältö: nolla tai enemmän <optiongroup> ja <option>elementtejä Sallitut attribuutit: globaalit attribuutit, autofocus, disabled, form, multiple, name, required, size Sallittu äiti elementti: elementti, joka voi voida flow sisältöä <label for="age">ikäsi: </label> <select id="age" name="age"> <option>valitse</option> <option>alle 20</option> <option>20 39</option> <option>40 59</option> <option>yli 60</option> </select>
16 <select> <option> <optgroup> Määrittelee valintalistan, valintaruudun tai radiopainikkeen vaihtoehdot Sallittu sisältö: tekstimuotoista tietoa Sallitut attribuutit: globaalit attribuutit, label, selected, value Sallittu äiti elementti: <select> <optgroup> <datalist> <label for="age">ikäsi: </label> <select id="age" name="age"> <option>valitse</option> <option>alle 20</option> <option>20 39</option> <option>40 59</option> <option>yli 60</option> </select> <select> <option> <optgroup> Ryhmittelee vaihtoehtoja valintalistassa. Sallittu sisältö: tekstimuotoista tietoa Sallitut attribuutit: globaalit attribuutit, disabled, label Sallittu äiti elementti: <select> <form action="kasittelija.php"> <select id="kirja" name="on lukenut" multiple="multiple"> <optgroup label="sofi Oksanen"> <option>puhdistus</option> <option>kun kyyhkyset katosivat</option> </optgroup> <optgroup label="arto Paasilinna"> <option>aatemi ja Eeva</option> <option>jäniksen vuosi</option> <option>kylmät hermot, kuuma veri</option> </optgroup> </select> <form>
17 <datalist> Liittää tekstityyppiseen <input> syotekstikenttään listattribuuttia käyttäen ennakkoon määritellyn listan arvoja, joita tarjotaan automaattisena täydennyksenä kun kenttään kirjoitetaan sisältöä. Sallittu sisältö: nolla tai enemmän <option> elementtejä Sallitut attribuutit: globaalit attribuutit Sallittu äiti elementti: elementti, joka voi voida phrasing sisältöä <input type="text" list="isotkaupungit" name="kotikaupunki"> <datalist id="isotkaupungit"> <option value="tampere"> <option value="helsinki"> <option value="oulu"> <option value="turku"> <option value="rovaniemi"> </datalist> <keygen> Elementin avulla luodaan salausavainpari, jota käytetään salaamaan tiedot jotka kulkevat palvelimen ja selaimen välillä Sallittu sisältö: tyhjä elementti Sallitut attribuutit: globaalit attribuutit, autofocus, challenge, disabled, form, keytype, name Sallittu äiti elementti: elementti, joka voi voida phrasing sisältöä <form action="kasittelija.php" method="get"> Pankkitilin numero: <input type="text" name="tilinro" /> Salaus: <keygen name="salaus" /> <input type="submit" value="lähetä" /> </form>
18 <output> Vastaavasti kuin <input> elementtiä käytetään tiedon tuomiseen verkkosivun lomakkeelta käsittelyyn, tulisi <output> elementtiä käyttää ohjelmassa tuotettujen (selaimessa javascriptillä laskettujen tai palvelimelta saatujen) tietojen näyttämiseen. Sallittu sisältö: tyhjä elementti Sallitut attribuutit: globaalit attribuutit, for, form, name Sallittu äiti elementti: elementti, joka voi voida phrasing sisältöä <progress> Piirtää horisontaalisen palkin, jolla voi visualisoida tehtävän etenemistä. Esimerkiksi arvo 20 piirtää puoleen väliin täytetyn palkin, jos maksimiarvoksi on annettu 40 (kuten esimerkissä alla) Sallittu sisältö: phrasing sisältö Sallitut attribuutit: globaalit attribuutit, value, max Sallittu äiti elementti: elementti, joka voi voida phrasing sisältöä <progress value="20" max="40"></progress>
19 <meter> Piirtää horisontaalisen palkin, jolla voi visualisoida suhteellista määrää. Esimerkiksi arvo 0.5 piirtää puoleen väliin täytetyn palkin. Sallittu sisältö: phrasing sisältö Sallitut attribuutit: globaalit attribuutit, value, min, max, low, high, optimum Sallittu äiti elementti: elementti, joka voi voida phrasing sisältöä Mittari1: <meter value="2013" min="2000" max="2100" ></meter> Mittari2: <meter value="0.75"></meter> Lomakkeen kenttiin syötetyt tiedot lähetetään palvelimelle o tiedot vastaanottaa ja käsittelee palvelimella cgi ohjelma o ohjelma määrätään lomakkeen action attribuutilla cgi ohjelma o rajapinta (Common Gateway Interface) lomakkeen ja palvelimella tiedot vastaanottavan ohjelman välillä o siis WWW palvelimella suoritettava ohjelma, joka saa selaimelta (yleisimmin HTMLlomakkeilta) tietoja o ei sidottu mihinkään tiettyyn ohjelmointikieleen o toteutetaan usein tulkattavilla, ns. skriptikielillä (Perl, Phythonilla, PHP) o mahdollista myös kirjoittaa erilliseen käännettävillä kielillä (C#, Java, C++ tai erityisesti verkkosovellusten laatimiseen räätälöityjen ohjelmointiympäristöjen avulla, kuten ASP.NET tai J2EE o ohjelman suoritus tapahtuu palvelimella, ei selaimessa - palvelimella oltava ko. kielen tulkki (tai kääntäjä) - voivat käyttää palvelimella sijaitsevia tiedostoja tai tietokantoja o lähettää (tyypillisesti) palautesivun selaimelle
20 <form action="cgi ohjelman url"method="get"> get o selain liittää lomakkeen tiedot verkkosovelluksen osoitteeseen o lähettää pyynnön verkkosovelluksen omaavalle www palvelimelle o lomakkeen tiedot näkyvät verkko osoitteessa? merkin perässä, muuttujat on eroteltu toisistaan & merkillä. käytetään o pienissä lomakkeissa, o tilanteissa, joissa ei ole tarpeen peittää lomakkeen tietoja käyttäjältä (tai muilta koneen lähettyvillä olevilta) o useimmat web hakukoneet käyttävät lomakkeissaan get metodia o mahdollistaa kyselyn tallentamisen ja edelleen lähettämisen toisille asiasta kiinnostuneille tai tietojen lähettämisen lomakkeenkäsittelijälle myös kokonaan ilman verkkolomaketta <form action="cgi ohjelman url"method= post"> post o lähetetään HTTP kutsun mukana omassa kentässään käytetään o suositeltavaa, kun verkkosovellukselle lähetetään suuri määrä tietoa tai o tiedon piilottaminenkäyttäjältä tai tietokoneen ympärillä olevilta silmäpareilta on tarpeen o huomattava kuitenkin, että - myös post metodilla tiedot lähetetään verkkosovellukselle täysin salaamattomina - kolmas osapuoli voi lukea kaikki lomakkeella lähetettävät tiedot (myös salasanat) o arkaluonteisia tietoja lähetettäessä tulisikin varmistua siitä, että asiakassovellus (web selain) keskustelee wwwpalvelimen kanssa esim. SSL salatulla HTTPS protokolla. Esimerkit kurssisivuilla JavaScriptin rooli alkuaikojen (usein ärsyttävien) tehosteiden lisäyksiin käytetyistä, aliarvostetusta kielestä o kehittynyt varsin vakavasti otettavaksi ja voimakkaaksi ohjelmointikieleksi. JavaScriptin avulla voidaan o lisätä www sivuille dynaamisia toimintoja o tarkistaa lomakkeelle syötettyjä tietoja o tulostaa verkkosivulle sisältöä ohjelmallisesti, o muokata verkkosivulla olevaa sisältöä. Alunperin Netscapen kehittämä o Netscape selaimessa 1995 nimellä LivesScript vaihtoi nimeksi JavaScript Sittemmin JavaScriptin menestyksen taustalla on ollut ECMA o otti vastuun kielen standardisoinnista o JavaScript seuraa ECMAScript standardeja, viimeisin (huhtikuu 2013) o vimmeisin JavaScript (perustuu EcmaScript standardiin ECMA 262).
21 JavaScript on o kevyt, selaimessa tulkattava ohjelmontikieli o perustuu löyhästi C ohjeilmointikieleen o dynaamisesti tyypitetty kieli (muuttujien tyyppiä ei tarvitse kiinniittää) o oliopohjainen, tai tarkemmin prototyyppipohjainen (oliomalli ja periytyvyys pohjautuvat prototyyppeihin, ei luokkiin) ohjelmointikieli, (tarkemmin MDN: Details of the object model) Toisin kuin cgi ohjelmat, javascript koodi suoritetaan suoraan selaimessa. o sivuun voi tehdä paikallisia muutoksia lataamatta koko sivua uudelleen palvelimelta o "dynaaminen HTML Javascriptiin löytyy palvelinohjelmoinnin mahdollistavia laajennusmoduleta o olioita, joiden kautta voi esimerkiksi käsitellä palvelimella sijaitsevia tietokantoja tai tiedostoja Tulkki ohittaa ylimääräiset tyhjätilamerkit o ohjelmakoodin sisennys normaaliin tapaan suositeltavaa. JavaScript kirjastoissa kuitenkin koodi usein pitkänä rivinä (pitkinä riveinä) sisentämättömässä muodossa o isoissa kirjastionti koodin minimoinnilla merkitystä (tulkkauksen tehostaminen) Työkaluja koodin minimointiin o Google Closure Compiler: o GCC online versio: compiler.appspot.com/home o YUI Compressor: o YUI online versio: sf.com/yui/ Minimointia ei kuitenkaan tarpeen ole tehdä itse kirjoitetuille koodipaloille o eikä se ylläpidon ja muokkauksen kannalta ole järkevääkään
22 Upotus sivulle (HTML dokumenttiin) analogisesti CSS sääntöjen kanssa o voidaan kirjoittaa omaksi (*.js) tiedostokseen ja tuoda se sivulle <script>elementin avulla (suositeltavaa) <script type="text/javasript" src="nimi.js" >... javascript koodi </script> tai omana elementtinään johonkin kohtaan HTML dokumenttia <script>... javascript koodi </script> Mihin kohtaan ohjelmaa skripti lisätään? <!DOCTYPE html> <head> <title>ensimmäinen javascript ohjelma</title> </head> <body> <script> document.write("opetellaan Javascriptiä!") </script> </body> </html> o voi sijoittaa sivulle minne tahansa yleensäkin elementin o oheisen kaltaisessa tilanteessa tietysti kohdan määrää se, mihin skriptin halutaan tuottavan sisältöä Normaalimpi käyttötilanne o skriptit kirjoitetaan funktioiksi ulkoiseen (*.js) tiedostoon o kirjoitetaan funktioiksi, vaikka kirjoitettaisiin koodina elementin sisään, koodi kirjoitetaan funktioiksi o funktioita kutsutaan käyttäen HTML:n tapahtumankäsittelijöiden avulla o aiemmin käytäntönä oli sijoittaa skriptit dokumentin otsikko osaan (eivät varsinaista sivun sisältöä, vaan eräänlaista sivun lisäinformaatiota) Nykyisin: sijoita aina dokumentin loppuun, jos se on mahdollista o selain noutaa (erilliset tiedostot), tulkitsee ja suorittaa skriptit siinä järjestyksessä kun ne HTMLdokumentissa tulevat vastaan o blocking effect: sinä aikana kun skriptitiedostoa tulkataan, sivulle ei tuoteta mitään <script> elementin jäljessä määriteltyä sivun sisältöä
23 Kuten C:ssä, C++:ssa, Javassa o lauseet päätetään normaalisti puolipisteeseen o JavaScriptissä puolipisteen voi kuitenkin jättää pois, silloin kun lause on kirjoitettu omalle rivilleen <script language="javascript" type="text/javascript"> var alku = 1; var loppu = 2; var muuttuja1 = 10 var muuttuja2 = 20 </script> JavaSript on case sensitiivinen kieli, o Esimerkiksi luku, Luku ja LUKU ovat kaikki eri tunnuksia Nimeämiskäytännöt o varsinaisia pakottavia sääntöjä ei ole, vakiintuneita käytäntöjä kyllä o "camelcase" käytäntö under_score käytännön sijasta o muuttujien nimet pienellä alkukirjaimella, oliotyyppien nimet isolla o nimeämiskäytännöistä tärkeintä kuitenkin on - käyttää ohjelmissa hyvin kuvaavia nimiä ja - säilyttää omaksumansa nimeämiskäytäntö samana o ks. Jeff Wayn kokoama lista: 9 Confusing Naming Conventions for Beginners var tyontekija = new Object(); var auto = new Array( Lada", Skoda", Nissan"); var day = new Date(2013,04,25);
24 document.write("seuraavat rivit eivät näy sivulla") // yhden rivin kommentti /* javascript tulkki ohittaa kaikki merkit oli se sitten mitä tahansa kunnes löydetään kommentin lopettavat merkit */ document.write("tämä taas näkyy") <script language="javascript" type="text/javascript"> <! document.write("opetellaan Javascriptiä!") > </script> Kielessä on 56 varattua sanaa:
25 JavaScript on dynaamisesti tyypitetty kieli o muuttujan tyyppi määräytyy sen arvon perusteella o voi vaihtua ohjelman suorituksen aikana JavaScriptin muuttujat ovat olioita olioita voi luoda itse kielestä löytyy joukko valmiiksi määriteltyjä ydinolioita (core objects): o Array, Boolean, Date, Function, Math, Number, RegExp, ja String Muuttuja on esiteltävä ennenkuin sitä voi käyttää o nimessä saa käyttää kirjaimia (A Z, a z), numeroita (0 9), (_). o ei saa alkaa numerolla, esimerkiksi - 99tunnus ei ole sallittu - tunnus _99tunnus on sallittu Muuttujalle voidaan antaa arvo esittelyn yhteydessä, mutta se ei ole välttämätöntä <script type="text/javascript"> var luku = 12; //Number var nimi = "Outi Ohjelmoija"; var nimi2; </script> Viittausalue: o paikallisia omassa funktiossaan o funktioiden ulkopuolella esitellyt globaaleja muuttujia o muuttujaa voi käyttää ennen sen esittelyä, variable hoisting (sitä tulee välttää)
26
27
28
29 if (ehtolauseke) lause [lelse lause] var ika;... if (ika<10) { document.write("lapsi"); //ehkä muitakin lauseita } else if (ika <30) { document.write("nuori"); //ehkä muitakin lauseita } else if (ika <65) { document.write("aikuinen"); //ehkä muitakin lauseita } else document.write("seniori");
30 switch (lauseke) { case arvo1: lause; [lause;]* break; case arvo2: lause; [lause;]* break;... case arvon: lause; [lause;]* break; default: statement(s) } switch (luku) { case 10: alert("luku on 10"); break; case 20: alert("luku on 20"); break; default: alert("ei ollut luku 10 eikä 20, ei.") } while (ehtolauseke) lause [;lause]* var i=10; while (i>0) { document.write(i+"\n"); i ; }
31 for (aloituslause; lopetuslause; silmukkamuutujan muutos){ lause [;lause]* } for (var i=0; i<10; i++) document.write(taulu[i,j]) } break o suoritus määrätään siirtymään ulos lauseesta o break lauseen avulla voidaan tulla ulos mistä tahansa lauselohkosta continue l o käytetään silmukan sisällä määräämään, että o suoritus siirtyy välittömästi testaamaan silmukkaehdon voimassaolemista o mikäli se vielä täyttyy, silmukan lauseiden suoritusta jatketaan seuraavan kierroksen alusta.
15.4.2015 Aulikki Hyrskykari Antti Sand
15.4.2015 Aulikki Hyrskykari Antti Sand o Edellinen luento Kertausta tekstin muotoilusta Lokeromallia kehystykset, taustakuvat Visuaalinen sommittelu rautalankamallit asemointi o Tällä luennolla Lomakkeet
LisätiedotJWT Hyrskykari, SIS, Tampereen yliopisto 4/3/2014
3.4.2014 Aulikki Hyrskykari o Edellinen luento Kertausta tekstin muotoilusta Lokeromallia kehystykset, taustakuvat Visuaalinen sommittelu rautalankamallit asemointi o Tällä luennolla Kertausta asemoinnista
LisätiedotLomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome
Lomakkeet HTML5 Elina Ulpovaara Testaus: IE9 Firefox7 Opera11 Chrome SELAIN Käyttäjä täyttää lomakkeen ja painaa lähetys-painiketta. Selain lähettää käyttäjän antamat tiedot palvelimelle lomakkeessa määrättyyn
LisätiedotAulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 4/23/2014
15.4.2014 Aulikki Hyrskykari JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto o Edellinen luento Asemoinnista Mukautuva suunnittelu responsiivinen suunnittelu Sommitteluruudukkojen käyttö layout
LisätiedotLomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä.
Lomakkeet Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä. Lomakkeen tyylit kannattaa määritellä omaan, eriliseen,
LisätiedotICT1TN004. Lomakkeet. Heikki Hietala
Lomakkeet Heikki Hietala Lomakkeet Lomakkeita käytetään keräämään tietoa käyttäjältä ja siirtämään se palvelimelle Lomakkeen luominen ei yksin riitä, vaan pitää luoda myös lomakkeenkäsittelijä Lomakkeen
LisätiedotWWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa
WWW ja tietokannat WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa tekstiä, kuvia, hyperlinkkejä Staattiset sivut kirjoitettu kerran, muuttaminen käsin ongelmana pysyminen ajantasalla Ylläpito hankalaa,
LisätiedotDigitaalisen median tekniikat xhtml - jatkuu
Digitaalisen median tekniikat xhtml - jatkuu 26.3.2004 Harri Laine 1 Lomakkeet mahdollistavat tiedon välityksen asiakkaalta (selaimesta) tiedon vastaanottajalle Vastaanottaja voi olla sähköpostiosoite
LisätiedotDigitaalisen median tekniikat xhtml - jatkuu Harri Laine 1
Digitaalisen median tekniikat xhtml - jatkuu 30.4.2004 Harri Laine 1 XHTML lomakkeet Lomakkeet mahdollistavat tiedon välityksen asiakkaalta (selaimesta) tiedon vastaanottajalle Vastaanottaja voi olla sähköpostiosoite
LisätiedotDigitaalisen median tekniikat xhtml - jatkuu
Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1 Kehykset IFRAME - elementti (inline frame) mahdollistaa kehysten upottamisen myös muihin kuin frameset.dtd:n mukaisiin dokumentteihin IFRAME toimii
LisätiedotLuento 3. Jouni Ikonen - Jouni.Ikonen lut.fi
CT30A3200 - WWW-sovellukset Luento 3 Jouni Ikonen - Jouni.Ikonen lut.fi Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen HTML-lomakkeet HTML-lomakkeiden avulla voidaan WWW-sovelluksessa hakea käyttäjän
Lisätiedot10 Lomakkeet Kontrollit. 10 Lomakkeet
154 Suurin osa HTML-dokumenteista on tarkoitettu vain selailtaviksi ja katseltaviksi ilman, että katselijan rooli olisi ollut muuta kuin passiivinen. Lisäämällä dokumenttiin lomake-elementti, voidaan pieni
LisätiedotT-111.361 Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot
T-111.361 Hypermediadokumentin laatiminen -Ohjelmointi Peruskäsitys www-ohjelmoinnin kentästä Tekniikat interaktiivisuuden toteuttamiseen tekniikat tekniikat Tietokannat Juha Laitinen TKK/TML juha.laitinen@hut.fi
LisätiedotJärjestelmäarkkitehtuuri (TK081702)
Järjestelmäarkkitehtuuri (TK081702) yleistyvät verkkopalveluissa Youtube Google... Avaavat pääsyn verkkopalvelun sisältöön. Rajapintojen tarjoamia tietolähteitä yhdistelemällä luodaan uusia palveluja,
LisätiedotExcel-lomakkeen (syöttötaulukko) käyttäminen talousarvio- ja suunnitelmatietojen toimittamisen testaamisessa Kuntatalouden tietopalvelussa
Valtiokonttori 1 (8) Excel-lomakkeen (syöttötaulukko) käyttäminen talousarvio- ja suunnitelmatietojen toimittamisen testaamisessa Kuntatalouden tietopalvelussa Valtiokonttori 2 (8) Sisällys 1 Yleistä...
LisätiedotELM GROUP 04. Teemu Laakso Henrik Talarmo
ELM GROUP 04 Teemu Laakso Henrik Talarmo 23. marraskuuta 2017 Sisältö 1 Johdanto 1 2 Ominaisuuksia 2 2.1 Muuttujat ja tietorakenteet...................... 2 2.2 Funktiot................................
Lisätiedot2 Web-lomakkeet. HTML-lomakkeet. Lomakkeiden perusteet
Web-lomakeet ovat verkkopalvelun tekninen perusta; käyttäjän syötteen välittäminen tapahtuu käytännössä aina lomakkeiden avulla Esimerkkejä lomakkeiden käytöstä: yksinkertaiset toiminnot: palautelomake,
LisätiedotEntiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
LisätiedotAJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML
AJAX-konsepti AJAX Asynchronous JavaScript And XML Viimeisin muoti-ilmiö web-ohjelmoinissa, termi Ajax tuli käyttöön vuoden 2005 aikana Joukko teknologioita, joiden avulla voidaan toteuttaa uudenlaisen
LisätiedotPalvelinpuolen ohjelmointi
Palvelinpuolen ohjelmointi Staattiset ja dynaamiset web-sivut Staattiset web-sivut ovat valmiissa muodossaan palvelimella (tai paikallisesti omalla koneella). Javascript mahdollistaa paikalliset dynaamiset
LisätiedotJWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari
JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti
LisätiedotTaustaa. CGI-ohjelmointi
Taustaa CGI-ohjelmointi CGI = Common Gateway Interface Hyvin yksinkertainen ja helppo tapa toteuttaa dynaamisuutta ja interaktivisuutta htmldokumentteihin Kehitetty tiedon siirtoon palvelimen ja asiakasselaimen
LisätiedotHTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.
HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan
LisätiedotTIETOJENKÄSITTELY/PIKATAIVAL2 Tehtävä G
TIETOJENKÄSITTELY/PIKATAIVAL2 Tehtävä G 1 Tehtävänäsi on määritellä tietokantaan KisatSVNL.mdb lomake Kilpailut ohessa olevan mallin mukaan. Lomake on tarkoitettu kilpailutietojen lisäykseen, selailuun
LisätiedotDigitaalisen median tekniikat JavaScript
Digitaalisen median tekniikat JavaScript 5.4.2004 Harri Laine 1 JavaScript ent. LiveScript (Netscape), muunnelma JScript (Microsoft) yhteensopivat yksinkertaisissa asioissa, aiemmin yhteensopimattomat
LisätiedotDigitaalisen median tekniikat JavaScript Harri Laine 1
Digitaalisen median tekniikat JavaScript 5.4.2004 Harri Laine 1 JavaScript ent. LiveScript (Netscape), muunnelma JScript (Microsoft) yhteensopivat yksinkertaisissa asioissa, aiemmin yhteensopimattomat
Lisätiedot11/20: Konepelti auki
Ohjelmointi 1 / syksy 2007 11/20: Konepelti auki Paavo Nieminen nieminen@jyu.fi Tietotekniikan laitos Informaatioteknologian tiedekunta Jyväskylän yliopisto Ohjelmointi 1 / syksy 2007 p.1/11 Tämän luennon
Lisätiedot05/04/2004. Digitaalisen median tekniikat, k2004 HY/TKTL, javascript_1. Harri Laine 1. JavaScript
Digitaalisen median tekniikat ent. LiveScript (Netscape), muunnelma JScript (Microsoft) yhteensopivat yksinkertaisissa asioissa, aiemmin yhteensopimattomat hiemankin edistyneemmissä nyk. ECMAScript (standardi)
Lisätiedot2 Web-lomakkeet. 2 Web-lomakkeet
2 Web-lomakkeet Web-lomakeet ovat verkkopalvelun tekninen perusta; käyttäjän syötteen välittäminen tapahtuu käytännössä aina lomakkeiden avulla Esimerkkejä lomakkeiden käytöstä: yksinkertaiset toiminnot:
Lisätiedot582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus
582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus Sisältö Mikä on web-sovellus? Selaimen rooli web-sovelluksessa Palvelimen rooli web-sovelluksessa Aineistopyynnöt Tiedon välittäminen
LisätiedotTestidatan generointi
Testidatan generointi Anu Ahonen Kevät 2008 Tämä työ on tehty Creative Commons -lisenssin alla Työn tarkasti 9.4.2008 Jouni Huotari (JAMK/IT) 1 SISÄLTÖ 1 TYÖN LÄHTÖKOHDAT JA TOTEUTUS...2 2 TESTIDATAN GENEROINTI
LisätiedotMitä direktiivi käytännössä velvoittaa?
Mitä direktiivi käytännössä velvoittaa? Web Content Accessibility Guidelines - Verkkosisällön saavutettavuusohjeet Timo Övermark Tapio Haanperä http://papunet.net/saavutettavuus WCAG 2.1 - Verkkosisällön
LisätiedotSisällys. 1. Omat operaatiot. Yleistä operaatioista. Yleistä operaatioista
Sisällys 1. Omat operaatiot Yleistä operaatioista. Mihin operaatioita tarvitaan? Oman operaation määrittely. Yleisesti, nimeäminen ja hyvä ohjelmointitapa, määreet, parametrit ja näkyvyys. HelloWorld-ohjelma
LisätiedotMOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT
MOBISITE-TYÖKALU MobiSite on työkalu matkapuhelimeen soveltuvan mobiilisivuston rakentamiseen. AIMO-järjestelmän jatkuvasti päivittyvä päätelaitetunnistus tunnistaa useimmat puhelinmallit ja mukauttaa
LisätiedotPerusteet. Pasi Sarolahti Aalto University School of Electrical Engineering. C-ohjelmointi Kevät Pasi Sarolahti
C! Perusteet 19.1.2017 Palautteesta (1. kierros toistaiseksi) (Erittäin) helppoa Miksi vain puolet pisteistä? Vaikeinta oli ohjelmointiympäristön asennus ja käyttö Ei selvää että main funktion pitikin
LisätiedotProjektinhallintaa paikkatiedon avulla
Projektinhallintaa paikkatiedon avulla Tampereen Teknillinen Yliopisto / Porin laitos Teemu Kumpumäki teemu.kumpumaki@tut.fi 25.6.2015 1 Paikkatieto ja projektinhallinta Paikkatiedon käyttäminen projektinhallinnassa
LisätiedotZeon PDF Driver Trial
Matlab-harjoitus 2: Kuvaajien piirto, skriptit ja funktiot. Matlabohjelmoinnin perusteita Numeerinen integrointi trapezoidaalimenetelmällä voidaan tehdä komennolla trapz. Esimerkki: Vaimenevan eksponentiaalin
LisätiedotFlash ActionScript osa 4
Flash ActionScript osa 4 Tekstikentät Flash:ssa tekstikenttä voi olla tyypiltään joko TLF Text tai Classic Text. TLF Text on uusi Flash CS5 tullut tyyppi. Sen animointi ja muotoilu ominaisuudet ovat monipuolisemmat
LisätiedotICT1TN004. Skriptikielet. Heikki Hietala
Skriptikielet Heikki Hietala Skriptikielet Skriptikielet eli komentosarjakielet ovat ohjelmointikieliä, joilla automatisoidaan tehtäviä Toisaalta niitä käytetään käyttöjärjestelmälle ominaisia tehtäviä
LisätiedotPerusteet. Pasi Sarolahti Aalto University School of Electrical Engineering. C-ohjelmointi Kevät Pasi Sarolahti
C! Perusteet 19.1.2017 Palautteesta (1. kierros toistaiseksi) Toistaiseksi helppoa Miksi vain puolet pisteistä? Vaikeinta oli ohjelmointiympäristön asennus ja käyttö Vaikeaa eroavuudet Pythonin ja C:n
LisätiedotHarjoitustyö: virtuaalikone
Harjoitustyö: virtuaalikone Toteuta alla kuvattu virtuaalikone yksinkertaiselle olio-orientoituneelle skriptauskielelle. Paketissa on testaamista varten mukana kaksi lyhyttä ohjelmaa. Ohjeita Noudata ohjelman
LisätiedotDigitaalisen median tekniikat. Luento 4: JavaScript
Digitaalisen median tekniikat Luento 4: JavaScript Luennot 1. Intro 2. XHTML 3. CSS 4. JavaScript Historia Syntaksi Dom Esimerkki: kuvagalleria 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus
LisätiedotIDL - proseduurit. ATK tähtitieteessä. IDL - proseduurit
IDL - proseduurit 25. huhtikuuta 2017 Viimeksi käsiteltiin IDL:n interaktiivista käyttöä, mutta tämä on hyvin kömpelöä monimutkaisempia asioita tehtäessä. IDL:llä on mahdollista tehdä ns. proseduuri-tiedostoja,
LisätiedotMuuttujien määrittely
Tarja Heikkilä Muuttujien määrittely Määrittele muuttujat SPSS-ohjelmaan lomakkeen kysymyksistä. Harjoitusta varten lomakkeeseen on muokattu kysymyksiä kahdesta opiskelijoiden tekemästä Joupiskan rinneravintolaa
LisätiedotConcurrency - Rinnakkaisuus. Group: 9 Joni Laine Juho Vähätalo
Concurrency - Rinnakkaisuus Group: 9 Joni Laine Juho Vähätalo Sisällysluettelo 1. Johdanto... 3 2. C++ thread... 4 3. Python multiprocessing... 6 4. Java ExecutorService... 8 5. Yhteenveto... 9 6. Lähteet...
LisätiedotLyseopaneeli 2.0. Käyttäjän opas
Lyseopaneeli 2.0 Käyttäjän opas 1. Esittely Lyseopaneeli on Oulun Lyseon lukion käyttäjätietojen hallintapalvelu jonka tarkoitus on niputtaa yhteen muutamia oleellisia toimintoja. 2. Yleistä paneelin käytöstä
LisätiedotARVI-järjestelmän ohje arvioinnin syöttäjälle 13.4. 2015
ARVI-järjestelmän ohje arvioinnin syöttäjälle 13.4. 2015 Sisältö ARVI-menettelyn perusteet... 1 Arvioinnin syöttäminen... 2 Arvion lähettäminen TE-toimistoon... 5 Sovelluksen sulkeminen... 6 Virhetilanteiden
LisätiedotTekstiviestipalvelun rajapintakuvaus
Tekstiviestipalvelun rajapintakuvaus Sisällysluettelo 1. Yleistä... 1 2. Lähtevien viestien rajapinta... 1 2.1. Rajapinnan tekniset tiedot ja parametrit... 1 2.2. Rajapinnan paluuarvot... 3 2.3. Rajapinnan
Lisätiedot1. Omat operaatiot 1.1
1. Omat operaatiot 1.1 Sisällys Yleistä operaatioista. Mihin operaatioita tarvitaan? Oman operaation määrittely. Yleisesti, nimeäminen ja hyvä ohjelmointitapa, määreet, parametrit ja näkyvyys. HelloWorld-ohjelma
Lisätiedot9. Periytyminen Javassa 9.1
9. Periytyminen Javassa 9.1 Sisällys Periytymismekanismi Java-kielessä. Piirteiden näkyvyys periytymisessä. Ilmentymämetodien korvaaminen. Luokkametodien peittäminen. Super-attribuutti. Override-annotaatio.
LisätiedotATK tähtitieteessä. Osa 3 - IDL proseduurit ja rakenteet. 18. syyskuuta 2014
18. syyskuuta 2014 IDL - proseduurit Viimeksi käsiteltiin IDL:n interaktiivista käyttöä, mutta tämä on hyvin kömpelöä monimutkaisempia asioita tehtäessä. IDL:llä on mahdollista tehdä ns. proseduuri-tiedostoja,
LisätiedotInternet-pohjaisen oppimisympäristön laadinta. Luento 3
Internet-pohjaisen oppimisympäristön laadinta Luento 3 Aiheena tänään Toteutustekniikoista yleisesti Selainriippumattomuudesta Hot Potatoes -ohjelmasta JavaScriptin perusteista 31.01.2013 IPOPPLA 2 Toteutustekniikoista
LisätiedotHarjoitus 2 (viikko 45)
Mikäli tehtävissä on jotain epäselvää, laita sähköpostia vastuuopettajalle (jorma.laurikkala@uta.fi). Muista lisätä static-määre operaatioidesi otsikoihin, jotta ohjelmasi kääntyvät. Muista noudattaa hyvän
LisätiedotKotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne
Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
LisätiedotHSMT Web-sovellustekniikoista
HSMT Web-sovellustekniikoista Ville Leppänen HSMT, c Ville Leppänen, IT, Turun yliopisto, 2011 p.1/29 Missä mennään... 1. Johdanto (1h) 2. Säikeet (2h) 3. Samanaikaisuudesta (2h) 4. Hajautetuista sovelluksista
LisätiedotAction Request System
Action Request System Manu Karjalainen Ohjelmistotuotantovälineet seminaari HELSINGIN YLIOPISTO Tietojenkäsittelytieteen laitos 25.10.2000 Action Request System (ARS) Manu Karjalainen Ohjelmistotuotantovälineet
LisätiedotOhjelmoinnin perusteet, syksy 2006
Ohjelmoinnin perusteet, syksy 2006 Esimerkkivastaukset 1. harjoituksiin. Alkuperäiset esimerkkivastaukset laati Jari Suominen. Vastauksia muokkasi Jukka Stenlund. 1. Esitä seuraavan algoritmin tila jokaisen
LisätiedotOperaattoreiden ylikuormitus. Operaattoreiden kuormitus. Operaattoreiden kuormitus. Operaattoreista. Kuormituksesta
C++ - perusteet Java-osaajille luento 5/7: operaattoreiden ylikuormitus, oliotaulukko, parametrien oletusarvot, komentoriviparametrit, constant, inline, Operaattoreiden ylikuormitus Operaattoreiden kuormitus
LisätiedotWWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys
WWW-OHJELMOINTI 1 WWW-ohjelmoinnin kokonaisuus SGML, XML, HTML WWW-selaimen sovellusohjelmointi WWW-palvelimen sovellusohjelmointi Eero Hyvönen Tietojenkäsittelytieteen laitos Helsingin yliopisto 26.10.2000
LisätiedotOhjelmoinnin jatkokurssi, kurssikoe 28.4.2014
Ohjelmoinnin jatkokurssi, kurssikoe 28.4.2014 Kirjoita jokaiseen palauttamaasi konseptiin kurssin nimi, kokeen päivämäärä, oma nimi ja opiskelijanumero. Vastaa kaikkiin tehtäviin omille konsepteilleen.
LisätiedotMITÄ JAVASCRIPT ON?...3
JavaScript MITÄ JAVASCRIPT ON?...3 YLEISTÄ JAVASCRIPTIN SYNTAKSISTA...3 KÄSKYSANAT JA MUUT VARATUT SANAT...3 MUUTTUJIEN, FUNKTIOIDEN JA LUOKKIEN NIMISSÄ...3 HTML-TAGEIHIN VIITTAAVISSA METODINIMISSÄ...3
LisätiedotWWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY
1 WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY 10.4.2015 Lounea Oy Tehdaskatu 6, 24100 Salo Puh. 029 707 00 Y-tunnus 0139471-8 www.lounea.fi Asiakaspalvelu 0800 303 00 Yrityspalvelu 0800 303 01 Myymälät 0800 303
Lisätiedot15. Ohjelmoinnin tekniikkaa 15.1
15. Ohjelmoinnin tekniikkaa 15.1 Sisällys For-each-rakenne. Lueteltu tyyppi enum. Override-annotaatio. Geneerinen ohjelmointi. 15.2 For-each-rakenne For-rakenteen variaatio taulukoiden ja muiden kokoelmien
LisätiedotAsiointipalvelun ohje
Asiointipalvelun ohje Yleistä 1. Kirjautuminen 2. Yhteystiedot 3. Vastaustavan valinta 1. Yleistä 2. Palkkatietojen lataaminen tiedostosta 4. Lomake 1. Yleistä 2. Linkit ja vastaajan tiedot 3. Lomakekäsittely
LisätiedotLaajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus
Laajuus 5 op Luennot: 12 x 2t 11.3.2014 29.4.2014 Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Lähiopetuksen jäkeen harjoitustyö ja tentti Aulikki Hyrskykari
LisätiedotTT00AA12-2016 - Ohjelmoinnin jatko (TT10S1ECD)
TT00AA12-2016 - Ohjelmoinnin jatko (TT10S1ECD) Ohjelmointikäytännöt 21/3/11 Mikko Vuorinen Metropolia Ammattikorkeakoulu 1 Sisältö 1) Mitä on hyvä koodi? 2) Ohjelmointikäytäntöjen merkitys? 3) Koodin asettelu
LisätiedotHelsingin yliopisto, TKTL Tietokantojen perusteet, s 2000 WWW-tietokantasovellukset Harri Laine 1. vapaamuotoiset tiedot
Relaatiotietokantaan tallennetaan määrämuotoista tietoa Vapaamuotoisen tekstin talletukseen tekstitietokannat hakuindeksejä saattavat käyttää relaatiotietokantaa tekstin tallentamiseen rivipohjainen tai
LisätiedotMaestro Sähköpostilähetys
Maestro Sähköpostilähetys Maestrossa on toiminut sähköpostin lähetysmahdollisuus käyttäen SMTP-protokollaa. Tällöin sähköposti lähtee suoraan Maestrosta eikä käytä käyttäjän sähköpostitiliä. Elisan asiakkaiden
LisätiedotOpas administraattori-tason käyttäjille. MANAGERIX -ohjelman esittely... 2 Kirjautuminen... 2
MANAGERIX Opas administraattori-tason käyttäjille SISÄLLYS MANAGERIX -ohjelman esittely... 2 Kirjautuminen... 2 Käyttöliittymä... 2 1 ORGANISAATIO Organisaation tietojen tarkastelu ja muokkaaminen4 Yhteenveto
LisätiedotHarjoitus 3: Flash-komponenttiarkkitehtuuri (18.3.2016)
Harjoitus 3: Flash-komponenttiarkkitehtuuri (18.3.2016) Tietokoneavusteinen opetus -kurssilla opetetaan Adobe Flash CS6:n käyttämistä neljänä kertana: 11.3.2016, 15.3.2016, 18.3.2016 ja 1.4.2016. Harjoituskerroilla
LisätiedotARVI-järjestelmän ohje arvioinnin syöttäjälle
ARVI-järjestelmän ohje arvioinnin syöttäjälle 7.5. 2018 Sisältö ARVI-menettelyn perusteet... 1 Arvioinnin syöttäminen... 2 Arvion lähettäminen TE-toimistoon... 5 Sovelluksen sulkeminen... 6 Virhetilanteiden
LisätiedotWCAG 2.1 Uudet kriteerit
WCAG 2.1 Uudet kriteerit Web Content Accessibility Guidelines 2.1 Verkkosisällön uudet saavutettavuuskriteerit (WCAG 2.1) Kimmo Sääskilahti Tero Pesonen WCAG:n versiot 1.0 toukokuu 1999 2.0 joulukuu 2008
LisätiedotLinkitetystä listasta perittyä omaa listaa käytetään muun muassa viestiin liittyvien vastausten säilömiseen.
Harjoitustyö 1 Harjoitustyö Tehtävä: ohjelmoi Java-kielellä keskustelualuetta simuloiva olioperustainen ohjelma (Simple Oope Board, S.O.B). Linkitetystä listasta perittyä omaa listaa käytetään muun muassa
LisätiedotTIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word
LisätiedotH T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
LisätiedotCopyright 1999-2012 Basware Corporation. All rights reserved. Pikaopas toimittajille Supplier Portal (Toukokuu 2013)
Copyright 1999-2012 Basware Corporation. All rights reserved. Pikaopas toimittajille Supplier Portal (Toukokuu 2013) 1 Rekisteröityminen ja sisäänkirjautuminen Sinun täytyy kirjautua Supplier Portal -sovellukseen,
LisätiedotPythonin alkeet Syksy 2010 Pythonin perusteet: Ohjelmointi, skriptaus ja Python
Pythonin alkeet Syksy 2010 Pythonin perusteet: Ohjelmointi, skriptaus ja Python 8. marraskuuta 2010 Ohjelmointi Perusteet Peruskäsitteitä Olio-ohjelmointi Pythonin alkeet Esittely Esimerkkejä Muuttujat
LisätiedotTIE Principles of Programming Languages CEYLON
TIE-20306 Principles of Programming Languages CEYLON SISÄLLYSLUETTELO 1. YLEISTIETOA KIELESTÄ JA SEN KEHITTÄMISESTÄ... 1 2. CEYLONIN OMINAISUUKSIA... 2 2.1 Modulaarisuus... 2 2.2 Tyypit... 2 2.3 Muita
LisätiedotSähköpostitilin käyttöönotto
Sähköpostitilin käyttöönotto Versio 1.0 Jarno Parkkinen jarno@atflow.fi Sivu 1 / 16 1 Johdanto... 2 2 Thunderbird ohjelman lataus ja asennus... 3 3 Sähköpostitilin lisääminen ja käyttöönotto... 4 3.2 Tietojen
LisätiedotSisältö. 22. Taulukot. Yleistä. Yleistä
Sisältö 22. Taulukot Yleistä. Esittely ja luominen. Alkioiden käsittely. Kaksiulotteinen taulukko. Taulukko metodin parametrina. Taulukko ja HelloWorld-ohjelma. Taulukko paluuarvona. 22.1 22.2 Yleistä
LisätiedotSivuston nopeus. Poista hahmonnuksen estävä JavaScript ja CSS sivun yläosan sisällöstä
Sivuston nopeus 66 / 100 Nopeus Pitäisi korjata: Poista hahmonnuksen estävä JavaScript ja CSS sivun yläosan sisällöstä Sivullasi on 2 estävää ohjelmaresurssia ja 1 estävää CSS-resurssia. Tämä viivästyttää
LisätiedotHAME PostGIS-tietokanta
HAME PostGIS-tietokanta Harmonisoidut maakuntakaavat e-palveluiksi (HAME) VSL 10.12.2019 HAME-hankkeelle maakuntakaavoja varten rakennettu PostGIS-serveri sijaitsee Lounaistiedon AWS (Amazon Web Service)
LisätiedotKServer Etäohjaus Spesifikaatio asiakaspuolen toteutuksille
KServer Etäohjaus 1 (5) KServer Etäohjaus Spesifikaatio asiakaspuolen toteutuksille Palvelimen toteutuksen ollessa versio 1.0, spesifikaation versio 1.0.0. 2009, Riku Eskelinen/ KServer Software Development
LisätiedotETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu
ETAPPI ry JOOMLA 2.5 Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Sivu 1(16) Sisällysluettelo 1 Joomla! sivuston sisällöntuotanto... 2 2 Artikkeleiden julkaisu sivustolla... 4 3 Artikkelin julkaisemista
LisätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:
LisätiedotLuento 5. Timo Savola. 28. huhtikuuta 2006
UNIX-käyttöjärjestelmä Luento 5 Timo Savola 28. huhtikuuta 2006 Osa I Shell-ohjelmointi Ehtolause Lausekkeet suoritetaan jos ehtolausekkeen paluuarvo on 0 if ehtolauseke then lauseke
LisätiedotITKP102 Ohjelmointi 1 (6 op)
ITKP102 Ohjelmointi 1 (6 op) Tentaattori: Antti-Jussi Lakanen 20. huhtikuuta 2018 Vastaa kaikkiin tehtäviin. Tee kukin tehtävä omalle konseptiarkille. Noudata ohjelmointitehtävissä kurssin koodauskäytänteitä.
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 7/8: Tekninen toteutus Edellinen
LisätiedotOhjelmoinnin peruskurssi Y1
Ohjelmoinnin peruskurssi Y1 CS-A1111 13.9.2017 CS-A1111 Ohjelmoinnin peruskurssi Y1 13.9.2017 1 / 19 Oppimistavoitteet: tämän luennon jälkeen osaat kirjoittaa Python-ohjelman, joka pyytää käyttäjältä lukuja,
LisätiedotJavascript 2: Ohjelmointikielen ominaisuudet. Jaana Holvikivi Metropolia
Javascript 2: Ohjelmointikielen ominaisuudet Jaana Holvikivi Metropolia HTML - sivun rakenne ja osiot HTML HEAD STYLE SCRIPT STYLEsheet Javascript file BODY Javascript
LisätiedotSisällys. Yleistä attribuuteista. Näkyvyys luokan sisällä ja ulkopuolelta. Attribuuttien arvojen käsittely aksessoreilla. 4.2
4. Attribuutit 4.1 Sisällys Yleistä attribuuteista. Näkyvyys luokan sisällä ja ulkopuolelta. Attribuuttien arvojen käsittely aksessoreilla. 4.2 Yleistä Luokan lohkossa, mutta metodien ulkopuolella esiteltyjä
LisätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 20.1.2010 T-106.1208 Ohjelmoinnin perusteet Y 20.1.2010 1 / 40 Arvon pyytäminen käyttäjältä Käyttäjän antaman arvon voi lukea raw_input-käskyllä. Käskyn sulkujen
LisätiedotITKP102 Ohjelmointi 1 (6 op)
ITKP102 Ohjelmointi 1 (6 op) Tentaattori: Antti-Jussi Lakanen 7. huhtikuuta 2017 Vastaa kaikkiin tehtäviin. Tee jokainen tehtävä erilliselle konseptiarkille. Kirjoittamasi luokat, funktiot ja aliohjelmat
Lisätiedot5. HelloWorld-ohjelma 5.1
5. HelloWorld-ohjelma 5.1 Sisällys Lähdekoodi. Lähdekoodin (osittainen) analyysi. Lähdekoodi tekstitiedostoon. Lähdekoodin kääntäminen tavukoodiksi. Tavukoodin suorittaminen. Virheiden korjaaminen 5.2
Lisätiedot2 Web-lomakkeet. HTML-lomakkeet. Lomakkeiden perusteet
Web-lomakeet ovat verkkopalvelun tekninen perusta; käyttäjän syötteen välittäminen tapahtuu käytännössä aina lomakkeiden avulla Esimerkkejä lomakkeiden käytöstä: yksinkertaiset toiminnot: palautelomake,
LisätiedotOhjelmassa henkilön etunimi ja sukunimi luetaan kahteen muuttujaan seuraavasti:
1 (7) Tiedon lukeminen näppäimistöltä Scanner-luokan avulla Miten ohjelma saa käyttöönsä käyttäjän kirjoittamaa tekstiä? Järjestelmässä on olemassa ns. syöttöpuskuri näppäimistöä varten. Syöttöpuskuri
Lisätiedot1 (5) OPISKELIJAN KÄYTTÖLIITTYMÄ
1 (5) OPISKELIJAN KÄYTTÖLIITTYMÄ Koulutuskorvauksen hakuajan lähestyessä, sekä työnantaja/työpaikkakouluttaja että opiskelija saavat tästä ilmoituksen sähköpostiinsa. Tämän ilmoituksen jälkeen työpaikkakouluttaja
LisätiedotMainonnanhallinta Käyttöopastus. Tekniikka. Olli Erjanti. 8.4.2008 Mediareaktori
Mainonnanhallinta Käyttöopastus Tekniikka EmediateAd 3.7 Olli Erjanti Oppaassa käydään läpi seuraavaa: Mainospaikkojen luonti html-sivupohjaan Mainoskampanjan keskeytys teknisten tai muiden ongelmien vuoksi
Lisätiedot