DOM-esimerkkejä ja LocalStorage
Selvitellään DOM-esimerkkejä JavaScriptillä.
Katso myös Javascript-tietorakenne-esimerki
JavaScript- ja DOM-esimerkkejä
Esimerkissä käytetään W3C:n DOM -spesifikaation metodeja ja attribuutteja, jotka toimivat moderneissa selaimissa.
- Elementtien käsitteleminen
- Dynaaminen lomakkeen luominen
- Listan numerointi
- Elementtien poistaminen
- Tapahtumankäsittelijät ( click, hover, blur, focus jne, katso: Events)
- Sivun ulkoasun muuttaminen ( avautuva / sulkeutuva lista, värin muutos )
LocalStorage
LocalStoragen kautta pystyy tallentamaan tietoja selaimen muistiin josta ne ovat ladattavissa myöhemmin samaan domainiin tultaessa. LocalStorage ei ole sivukohtainen vaan domain-kohtainen. Jos samassa domainissa voi olla useita LocalStoragea käyttäviä sovelluksia eri sivuilla niin nimeä oman sovelluksesi avaimet niin, että eivät voi sekoittua muiden avaimiin.
Katso malli2.html
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return false;
}
}
if (storageAvailable('localStorage')) {
localStorage.setItem("testi", "kokeilu");
var apu = localStorage.getItem("testi");
console.log(apu);
localStorage.removeItem("testi");
}
else {
// ei localstoragea...
}
katso myös: SessionStorage
Javascript ja CSS
Tyylejä voidaan javascriptillä muokata monella tasolla:
- Voidaan editoida dokumenttiin linkitettyä CSS-tiedostoa ja muokata sen sisältämiä CSS-sääntöjä
- Voidaan muokata jokaisen elementin omia asetuksia elementti.style-attribuutin kautta
- Voidaan muokata muuttamalla html:ssä elementin style-attribuuttia: elementti.setAttribute("style", "tähän tyylit")
- Voidaan muokata dokumentissa olevaa style-elementtiä ja sen sisältämiä css-sääntöjä
- Voidaan vaihtaa elementin class-attribuutin arvoja jos on CSS-tiedostoon tai style-elementtiin luotu sopivat tyylit
Käytännössä dynaamiset muutokset pitää tehdä elementtikohtaisesti. HTML:n sisällön kautta style-attribuuttia ei kannata muokata, koska suora javascript-rajapinta on kätevämpi ja näppärämpi. Elementtikohtaisissa muutoksissa tosin joutuu kirjoittamaan paljon koodia ja tätä vähentää jos CSS-tiedostosta löytyvät jo kaikki tarpeelliset tyylit eikä tarvitse javascript-koodissa tehdä muuta kuin muuttaa elementin class-attribuuttia.
Jos täytyy muuttaa yksittäistä css-ominaisuutta niin se on järkevintä tehdä DOM-rajapinnan kautta:
element.style.property = "uusi tyylimääritys"
Jos on olemassa jo valmis tyyli niin voi tehdä näin:
element.setAttribute("class", "tyyli");
Huomaa, että element.style ei ole sama asia kuin element.setAttribute("style", "..."). Ensimmäinen palauttaa CSSStyleDeclaration-objektin, jonka attribuutteina ovat kaikki CSS-ominaisuudet. Jälkimmäinen vain asettaa uuden arvon HTML-koodissa olevalla style-attribuutille. Suositeltavaa on käyttää ensimmäistä.
CSS-tiedostoa tai style-elementtiä ei normaalisti joudu ohjelmallisesti muokkaamaan, koska ne ovat jo jotain muuta kautta valmiiksi käyttökelpoiset ja suoraan editoitavissa.
Vaihtoehtoina ovat siis kaikki samat mitä normaalistikin HTML:ää ja CSS:ää kirjoitettaessa ja näiden lisäksi vielä erillinen rajapinta.
Using dynamic styling information
Vanhempia esimerkkejä
Lisäesimerkkinä toimii myös viikkotehtävien pistelaskuri:
Käyttäjien kommentit