Työkalut

esimerkki (rikki), esimerkki js-koodi (rikki)

esimerkki (xhtml, rikki), esimerkki js-koodi (rikki)

esimerkki (korjattu), esimerkki js-koodi (korjattu)

Javascript-sovelluksien tekemisessä voi käyttää apuna seuraavia työkaluja:

Yksinkertaisin tapa bongata kirjoitusvirheet HTML-koodista on nimetä tiedostonsa .xhtml-päätteellä ja lataamalla tiedosto Firefoxilla. Firefox avaa tiedoston nyt XML-tilassa ja herjaa heti, jos rakenne on pahasti rikki. Sivun html-elementin pitää olla seuraava muotoa, jos haluaa, että firefox käsittelee .xhtml-päätteisen tiedoston myös html-dokumenttina:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi"></html>

Lisäksi normaali W3C:n validaattori on aina hyvä apu

Dynaaminen sivun tarkistaminen

Muokatessanne javascript-koodilla WWW-sivun sisältöä muuttuu sivu dynaamisesti. Mikään ei estä tuottamasta Javascriptillä laitonta ja rikkinäistä html-koodia. Rikkinäisyyttä ei välttämättä itse huomaa, koska selain pyrkii koko ajan automaattisesti korjaamaan virheitä. Jossain vaiheessa korjauskyky loppuu ja sivu hajoaa. Eri selaimet myös paikkaavat virheitä eri tavoilla. On siis syytä kirjoittaa rakenteellisesti oikeaa koodia.

Normaalisti validaattorilla pystyy tarkistamaan onko kirjoittanut HTML-koodinsa oikein. Dynaamisesti tuotettua koodia ei voi kuitenkaan validoida, koska validaattori saa käsiinsä vain staattisen sisällön. Jo aiemmin teille esitelty htmlinspector osaa tutkia sivun rakennetta riippumatta siitä onko se staattisesti vai dynaamisesti tuotettua. Riittää, että htmlinspectoria kutsuu oikeassa tilanteessa ohjelman suorituksen aikana. htmlinspector ei kuitenkaan ole varsinainen validaattori.

Jostain syystä myöskään web developer toolbarista ei löydy vaihtoehtoa, joka osaisi validoida dynaamisen rakenteen. Apuna voi käyttää Greasemonkey-skriptiä, joka validoi W3C:n validaattorilla haluamanne sivuston heti sivun latautumisen jälkeen:

http://appro.mit.jyu.fi/tools/validator/validator.user.js

En nyt liittänyt tätä suoraan mihinkään sivupohjiin, koska tällä helposti voi rasittaa W3C:n validaattoria liikaa. Älkää siis lykätkö greasemonkeyssa tätä skriptiä toimimaan ihan kaikilla sivustoilla. Tämän avulla voi kuitenkin helposti validoida esim. vertaisarvioitavana olevan sivun html-rakenteen. Oletuksena laajennos validoi users.jyu.fi-palvelimen alla olevat sivut ja kurssilla palautetut viikkotehtävät.

Ohjelmanne usein muokkaavat sivun sisältöä myös käyttäjän toimenpiteiden myötä. Jos haluaa näiden tapahtumien jälkeen validoida sivustonsa niin voi lisätä edellämainitun skriptin sivuunsa ja kutsua validointia aina kun haluaa

Skriptin voi lisätä sivuunsa lisäämällä sivun head-osan alkuun rivin:

<script
    src="http://appro.mit.jyu.fi/tools/validator/validator.user.js"></script>

Validoinnin voi tehdä kutsulla:

    Validate();

Validointi tapahtuu asynkronisesti eli tulokset ilmestyvät konsoliin, kun validaattori ehtii työnsä tehdä ja verkko toimia. Oman ohjelman suoritus ei pysähdy odottamaan validointituloksia.

Tätä saa käyttää apuna esim. viikkotehtävässä 3. Tehtävänannossa kielletään kirjoittamasta javascriptia html-sivun sisältöön. Tämä kielto ei kuitenkaan koske valmiissa pohjassa olevaa htmlinspectoria ja sen kutsua tai validaattoriskriptiä.

Validaattorin toimintaa voi kokeilla testisivulla, jonka html-koodista näkee myös miten validointia kutsutaan omasta koodista:

http://appro.mit.jyu.fi/tools/validator/validator.html

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tiea2120/luennot/tools/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2020-05-27 15:30:38
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta