Viikkotehtävä 7 ja DOM

• Luentotaltiointi
• Viikkotehtävä 7
• DOM
• JavaScript-työkaluja
  • MochiKit
  • JavaScriptin debuggaus
  • GreaseMonkey
• Tarpeellisia funktioita
  • Aika
  • Math
  • eval
  • typeof
  • Globaalit muuttujat
  • MochiKit
  • IE-huomioita
• Esimerkkejä

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

Viikkotehtävä 7

1. tekijat.php levyt1.php
2. levyt3.php levyt.php
3. logiikkaa.php uusi.php indeksi.php levyt.php

DOM

JavaScript-työkaluja

MochiKit

MochiKit on kätevä JavaScript-kirjasto, jonka avulla on helppo tehdä eri selaimilla toimivaa JavaScriptiä. MochiKitistä kannattaa ladata versio (1.3), sillä siinä on tuki tapahtumien rekisteröintiä varten:

• MochiKit download
• MochiKit developement version
• MochiKit documentation

Toinen varteenotettava avoimen lähdekoodin JavaScript-kirjasto on Dojo Toolkit

JavaScriptin debuggaus

• JavaScriptin virheilmoitukset saa Firefoxissa näkyville Tools | Java Console -valinnan kautta.
• Firefoxiin saa laajennoksena hyvän JavaScript-debuggerin (Venkman).
• Mochikitissä on Logging-luokka, jonka avulla voi lisätä viestejä listaan.
  • Listan saa näkyville Bookmarklet-linkillä MochiKit Logger (raahaa linkkiriville)

GreaseMonkey

GreaseMonkey on Firefox-laajennos, joka mahdollistaa JavaScript-koodin (user scripts) suorittamisen määrätyissä www-osoitteissa. GreaseMonkeyn, JavaScriptin ja DOM:in avulla voit siis muokata sivujen rakennetta aivan millaiseksi vain haluat!

• Dive into GreaseMonkey - Chapter 4. Common Patterns
• FreeHS - esimerkki

Tarpeellisia funktioita

Aika

• Globaalit oliot: Date - Core JavaScript 1.5 Reference

Päivämäärä

var aika = new Date();
alert(aika.getDate() + "." + aika.getMonth() + "." + aika.getYear());

ISO-päivämäärän (YYYY-MM-DD hh:mm:ss) saa Date-tyypin olioksi MochiKitin DateTime-metodeilla.

Kulunut aika

var aika = new Date();
var hetkiA_msec = aika.getTime();
// tehdään jotain
var hetkiB_msec = aika.getTime();
var kulunutaika = new Date(hetkiB_msec - hetkiA_msec);
alert(kulunutaika.getSeconds());

Ajastetut funktiot

• window.setInterval
• window.setTimeout

// suoritetaan oma_ajastettu_funktio joka sekunti
window.setInterval(oma_ajastettu_funktio,1000);

Math

• Globaalit oliot: Math - Core JavaScript 1.5 Reference

Pyöristäminen

var liukuluku = 3.245200004;
var kaksidesimaalia = Math.round(liukuluku*100)/100

Satunnaisluvut

var sanoja = ["Diiba","Daaba","Tesmaus","Heppa","Muuli","Saippuakauppias","Jepjep"];
var rand = Math.round(Math.random()*(sanoja.length - 1));
sanoja[rand];

eval

Funktiot: eval - Core JavaScript 1.5 Reference

Esimerkki:

// XHTML-dokumentissa
<p><span id="lasku">3 + 4</span> = <strong id="tulos"></strong></p>
// JavaScript-funktiossa
var yhteenlasku = document.getElementById("lasku").firstChild.nodeValue;
var tulos = eval(yhteenlasku);
document.getElementById("tulos").firstChild.nodeValue = tulos;

Toinen esimerkki:

// XHTML-dokumentissa
<p><input type="text" id="funktio" onchange="suorita" /></p>
// JavaScriptissä:
function ykkonen() {
  alert("Funktiossa ykkonen!");
}
function kakkonen() {
  alert("Funktiossa kakkonen!");
}
function suorita() {
  var funktion_nimi = document.getElementById("funktio").value;
  eval(funktion_nimi + "()");
}

eval on hidas verrattuna normaaliin laskutoimituksiin ja funktiokutsuihin

typeof

Operaattorit: typeof - Core JavaScript 1.5 Reference

var numero = parseInt(document.getElementById("tekstikentta").value);
if (typeof(numero) == NaN)
  document.getElementById("tekstikentta").className = "red";

Globaalit muuttujat

Luento 15

MochiKit

Tapahtumien rekisteröinti

Lomake-elementeille saadaan annettua tapahtumankäsittelijä seuraavasti:

connect("laheta","submit",oma_kasittelija);
connect("painikkeen_id","click",toinen_funktio);

Yhteen elementtiin voi liittää myös useita tapahtumankäsittelijöitä. Näiden suoritusjärjestystä tapahtuman yhteydessä ei ole kuitenkaan määrätty.

Oma funktio saa parametrikseen Event-tyyppisen olion ja käsittelijäfunktion sisällä this viittaa kutsuvaan XHTML-elementtiin. Tapahtuman jatkotoimenpiteet voi perua tapahtumankäsittelejässä preventDefault-metodilla:

function oma_kasittelija(event) {
  event.preventDefault();
}

Elementtien ja arvojen saanti

• getElement(id)
• getComputedStyle(element,CSSProperty)

Tekstin käsittely DOM-puussa

• scrapeText(node) palauttaa tekstin/tekstit tietyn elementin sisältä
  • Normaali tapa olisi pyytää element.firstChild.nodeValue, mutta ensin on tarkistettava element.hasChildNodes-metodilla, että elementillä on lapsielementtejä
  • Lomake-elementtien arvo saadaan suoraan element.value-metodilla

Seuraavalla esimerkillä asetettua tekstiä tietyn elementin sisälle:

function setText(node, text) {
  replaceChildNodes(node, document.createTextNode(text));
}

IE-huomioita

Seuraavia ongelmia voi tulla IE:n JavaScriptin kanssa:

• this.merkkijono[i] ei toimi, käytä this.merkkijono.charAt(i)
• Jos lomake-elementin on asetettu CSS-ominaisuudeksi display: none, niin element.focus() antaa virheilmoituksen. Aseta näkyväksi ensin.

Esimerkkejä

• linkcrawl.user.js - GreaseMonkey-script
• menu.html menu.js MochiKit.js - avautuva menu v.0.2
• popmenu1.html popmenu1.js - tapahtumien kytkentää
• position.html position.js - lohkon asemointia ja aikavälein tapahtumia, kokeile esimerkkiä www.ad.jyu.fi:ssä tai people.cc.jyu.fi:ssä