Viikkotehtävä 6 ja DOM - Luento 14
Käsitellään viikkotehtävä 6 ja selvitellään DOM-esimerkkejä JavaScriptillä.
Luentotaltiointi
Tekniikka petti ja videosta puuttuvat äänet. Korvikkeeksi voi katsoa vuoden 2008 vastaavan luennon.
Viikkotehtävä 6
Tietokantoihin liittyvä viikkotehtävä:
Huomioita
- Option-elementteihin kannattaa ottaa lajin id-arvo valueksi
- Uutta ID:tä ei tarvitse kehittää itse, se on tietokannan tehtävä (autoincrement)
- Tarkistakaa, että koodista tulee validia! Erityisesti sisäkkäinen lista on haasteellinen XHTML:ssä.
- SQLiten tietokantatiedoston ja sen sisältämän hakemiston oikeudet users.jyu.fi:ssä.
- Tietokannan muutosoperaatioissa (lisäys, poisto, päivitys) ei pidä käyttää lomakkeella GET-metodia.
- Tietokantayhteyttä avataan koko ajan uudelleen turhaan
- Useamman lajin valinta ei toimi
- html-koodia ei käsitellä oikein. Muistakaa cgi.escape!.
- Uuden henkilön treeni ei näy heti
- aika ei saa olla tulevaisuudessa, miten tarkistetaan?
Tapoja on monia. Voi mm. kysyä sqliteltä onko syötetty pvm
suurempi kuin CURRENT_TIMESTAMP:
SELECT strftime('%s', CURRENT_TIMESTAMP) - strftime('%s','2010-02-18 13:30');
- Tietokantavirheitä sellaisenaan ei ole välttämättä järkevää näyttää käyttäjälle.
- Ei näin:
#in-operaatio haluaa listan eikä listaa voi antaa tällä tavalla SELECT LajiID FROM Laji WHERE Lajinimi IN (:laji) #MAX-palauttaa aina vain yhden rivin joten riittää #cur.fetchone() eikä tarvita silmukkaa sql = "SELECT MAX(TreeniID) FROM Treeni" cur.execute(sql) for rivi in cur: treeniid = rivi[0] sqlNimet = '''SELECT Etunimi, Sukunimi, HenkiloID FROM Henkilo''' cursor.execute(sqlNimet) #Ei näin! Etsittävä etunimi ja sukunimi voidaan #sitoa suoraan SQL-kyselyyn for rivi in cursor: if rivi['Etunimi'] == req.tiedot['etunimi'] and rivi['Sukunimi'] == req.tiedot['sukunimi']: nimiOlemassa = True break #Eikä missään nimessä sijoiteta muuttujia merkkijono-operaatioilla #SQL-kyselyyn: if not nimiOlemassa: sqlHenkilolisays = ''' INSERT INTO Henkilo (Etunimi, Sukunimi) VALUES ("%s", "%s")''' % ( req.tiedot['etunimi'], req.tiedot['sukunimi'] )
JavaScript- ja DOM-esimerkkejä
Esimerkeissä käytetään W3C:n DOM -spesifikaation metodeja ja attribuutteja, jotka toimivat Firefoxissa, mutta eivät välttämättä toimi IE:llä. Yhteensopivuus hoidetaan sopivalla JavaScript-kirjastolla, asiaa käsitellään tarkemmin luennolla 13.
- Dynaaminen lomakkeen luominen
- Sivun ulkoasun muuttaminen ( avautuva / sulkeutuva lista, värin muutos )
- Tapahtumankäsittelijät ( click, hover, blur, focus )
- Listan numerointi
- Elementtien poistaminen
Edellisvuoden esimerkit:
Lisäesimerkkinä toimii myös viikkotehtävien pistelaskuri:
Käyttäjien kommentit