Viikkotehtävä 6 ja DOM - Luento 14

• Luentotaltiointi
• Viikkotehtävä 6
  • Huomioita
• JavaScript- ja DOM-esimerkkejä

Käsitellään viikkotehtävä 6 ja selvitellään DOM-esimerkkejä JavaScriptillä.

Viikkotehtävä 6

Tietokantoihin liittyvä viikkotehtävä:

• Palaute
• Malli (taso3) (Lähdekoodi)

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:

• index.html
• luento14.js
• oma.css

Lisäesimerkkinä toimii myös viikkotehtävien pistelaskuri:

• Laskurin lomake
• pistelaskuri.js

Autolaskuri.html (autolaskuri.js)