[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuEhdotelmat > Cascading script sheets (CJS)

Cascading Script Sheets (CJS)

Käsiteltävät aiheet

Yleistä

Tällä sivulla on vertailua JavaScript ja CSS2-systeemien käytön tehokkuuksista sekä ehdotus, jonka olen jättänyt Sun Microsystems, Microsoft, Mozilla, Opera Software ja W3C firmoille ja organisaatioille tehokkaamman JavaScript-kieltä muistuttavan skriptiohjelmointikielen (scripting language) luomiseksi (tutustu siihen[S]). Tämä on vähän lyhyempi suomenkielinen versio siitä eikä sisällä kaikkia yksityiskohtia.

Suorat tapahtumankäsittelyt

Tämä on esimerkki CSS-tyyliattribuutin käytöstä:

<TD style="border:1px solid #660033; background-color:aqua;">

Vastaavan tapainen suora skriptimäärittely elementin A sisällä voisi näyttää tältä:

<A href="some.html" name="my_face_image" onMouseOver= "document.my_face_image.src='redface.gif'; window.status='E-mail\ to\ Tapio\ Markula\ (@dnainternet.net)';return true">

Molemmissa tapauksessa eri määrittelyt erotetaan toisistaan käyttäen puolipistettä (;). skriptit tulee myös päättää puolipisteeseen (CSS-ominaisuuksien suhteen se ei ole välttämätöntä, mutta suosittelen niihinkin, jotta merkkien käyttäminen rutinoituisi). Monia skriptejä ei voi antaa suoraan, sillä se voi aiheuttaa vaikeuksia 1.0-versiota käyttäville selaimille (Netscape 2.x, MS IE 3.02).

Upotetut funktiot

Normaalisti skriptit tehdään niin, että elementin sisälle laitetaan ns. funktion kutsu (funtion call) ja kutsuttavan funktion nimi (esim. nayta (argumentteja)). Funktion kutsu liittyy tapahtumankäsittelijöihin (esim. onMouseOver ja on seuraavan kaltainen:

<A href="..." onMouseOver="if(browser) nayta(5, 'c');>

Funktiokutsulla on elementin SCRIPT dokumentin HEAD-osassa vastaava määrittely. Kyseiseen elementtiin merkitään tyyppi (type="text/javascript") ja mahdollisesti kieli (kielen voi eritellä tarkemmin kuin esimerkissä, esim. language="JavaScript1.1"). Seuravassa on esimerkkiskripti:

<SCRIPT language="JavaScript" type="text/javascript">
<!--
function nayta(num, typ)
{var uusikuva = typ+ "_ankkuri["+(num-8)+"].src";
document.images[num-8].src = eval(uusikuva); }

if (document.images)
{var browser=true;
var a_ankkuri=new Array(12);
var b_ankkuri=new Array(12);
var Nimi= new Array(" ...");
for (i="0"; i<12; i++)
{ a_ankkuri[i]= new Image();
a_ankkuri[i].src=Nimi[i]+".gif";
b_ankkuri[i]= new Image();
b_ankkuri[i].src=Nimi[i]+"b.gif"; }
}

else /* mikäli annettu ehto ei toteudu, toteutetaan tämä */
var browser=false; /* seuraavalla rivillä on kommentin päätös, joka on kommentoivat pois javatulkin käytöstä */
// -->

</SCRIPT>

Systeemi on aivan saman kaltainen kuin upotetuissa tyylisivuissa, esim. tässä:

<STYLE type="text/css">
<!--
h2{text-align:center; margin-left:20px;}
-->
</STYLE>

Yhteiset piirteet

Kuten tämän sivuston ensimmäisellä sivulla tuli ilmi, upotettu skriptejä ei voida käyttää XML-dokumenteissa eivätkä vanhat selaimet ymmärrä XML-dokumenlteille sopivia upotettuja skriptejä. Upotettuja skriptejä ei milloinkaan tule käyttää, jos dokumentti halutaan joskus muuttaa XML tai XHTML-dokumentiksi.

Perusero upotettuilla skriptikielen funktiokutsuilla ja upotetuilla tyylisivuilla on se, että skriptit tarvitsevat aina elementtien sisällä funktion kutsuihin liittyvät attribuutit. CSS ei niitä välttämättä tarvitse, vaikka sen yhteydessä voi käyttää attribuutteja class ja id.

Funktioista on hyötyä silloin kun niitä käytetään esim. kuvien vaihtamiseen ja vaihdettavia kuvia on paljon, jolloin koodia voi lyhentää funktioilla ja funktiokutsuilla.

Ulkopuoliset skriptitiedostot

Sekä JavaScript että CSS voivat käyttää ulkopuolisia tiedostoja. Tämä on viittaus ulkopuoliseen CSS-tiedostoon:

<LINK rel="stylesheet" type="text/css" href="external_stylesheet.css">

Viittaus ulkopuoliseen skriptitiedostoon on saman tapainen:

<SCRIPT language="JavaScript" type="text/javascript"></SCRIPT>

Molemmissa tapauksissa on muistettava, että niissä ei saa käyttää HTML elementtejä, sillä niitä tulkitsevat vain joko CSS tai skriptien tulkit.

Hahmontunnistus

JavaScript perustuu vanhempaan ajatteluun ja siitä puuttuu CSS-systeemissä oleva erittäin tehokas hahmontunnistusperiaate (pattern mathing; selitän sen sivulla Prosessointijärjestys[S][Pw]. Tein esityksen, että ECMAScript (standardisoitu skriptikieli) voisi käyttää samaa systeemiä, jota nykyisin käyttää CSS2. Tämä merkitsisi sitä, että CSS2 tyylisiä elementeistä ja niiden attribuuteista koostuvia hahmoja voitaisiin käyttää funktioiden kutsumiseen suorien funktiokutsujen sijaan seuraavan esimerkin tapaan:

[name="my_face_image"] function() {document.my_face_image.src='redface.gif'}

Tämä syntaksi perustuu CSS2 tason attribuuttivalitsimiin [S][Pw]:

[name="my_face_image"] { color: blue; }

Skriptien suhteen tuo ei olisi vielä toimiva ratkaisu. Edellinen määrittely auttaisi löytämään oikean elementin, mutta selain ei vielä tiedä, mitä sen tulisi tehdä. CSS2 sisältää kuitenkin jo ratkaisu syntaksimallin, jota voitaisiin tässä yhteydessä käyttää. Kun elementin A sisällä on attribuutti href sen eri tilat määritellään ns. näennäisluokilla. Skripteihin voitaisiin soveltaa aktiivisia näennäisluokkia (active pseudo-classes; tutustu niihin[S][Pw]. Niillä on seuraava syntaksi:

a:hover { color: red }
:hover {color: red }

Tosiasiassa CSS2 aktiivisilla pseudoluokilla on olemassa vastaavat javaskritien tapahtuman käsittelyt:

Teorissa skriptit voitaisiin luoda tämän kaltainen syntaksi:

[name="my_face_image"] :onMouseOver function() {document.my_face_image.src='redface.gif'}

OnMouseOver ja OnMouseOut toimisivat ikään kuin näennäisluokkina ja ne voitaisiin siirtää elementtien sisältä dokumentin HEAD-osaan tai erillistiedostoihin. Varmaan kysyt, mikä on systeemini etu. Ehdotukseni mukaan seuraavan aloituskoodin sisällä olevat attribuutit suorittaisivat funktionkutsun:

<A name="my_face_image" href="some.html">

Mutta CSS-periaatteita noudattaen attribuuttien käyttö ei ole välttämätöntä ja niiden sijaan voidaan hyödyntää hahmontunnistusperiaatetta. Myös seuraava aloituskoodi voisi toteuttaa funktiokutsun:

<DIV><Ahref="some.html"></DIV>

Se tarvitsee seuraavan kaltaisen tunnistettavan hahmon. Tämä vastaisi CSS sääntöjä (rule) tai lauseita (statements):

div :onMouseOver function() {document.my_face_image.src='redface.gif'}
/* toisaalta myös attribuuttivalitsimien tyylinen syntaksi olisi käyttökelpoinen, jolloin ei tarvita elementteihin perustuvia tunnistettavia hahmoja */
[href="some.html"] :onMouseOver function() {document.my_face_image.src='redface.gif'}

Myös ns. metodit, jotka on liitetty dokumentin BODY-osaan voitaisiin siirtää asiakirjasta muualle ja niitä voitaisiin kontrolloida hahmontunnistuperiaatteella.

<SCRIPT language="JavaScript" type="text/javascript">
<!--
document.write(document.lastModified)
// --></SCRIPT>

Edellisen sijasta voitaisiin kirjoittaa vaikka:
<DIV><SCRIPT language="JavaScript" type="text/javascript id="date"></SCRIPT></DIV>

Metodit voisivat saada eteensä tämän tyylisiä sääntöjä (rules):

[id="date"] document.write(document.lastModified) /* tämä olisi CSS2-tason attribuuttivalitsimen tyylinen syntaksi */
*.#date document.write(document.lastModified)/* tämä olisi CSS1-tason tyylinen id-valitsin syntaksi */
div script document.write(document.lastModified) /* tämä olisi CSS1-tason hahmontunnistukseen/ tapauskohtaisiin valitsimiin (contextual selectors) perustuva syntaksi */

Samoilla säännöillä voitaisiin kirjoittaa CSS:llä niille ulkoasun kuvaus, (presentation), esim.:

[id="date"] {background-color:yellow; border: 1px solid #660033;}
*.#date {background-color:yellow; border: 1px solid #660033;}
div script {background-color:yellow; border: 1px solid #660033;}

Mediasääntö

CSS2:n mediasääntö [S][Pw] mahdollistaa tehdä samasta sivusta hyvin erilaisen version eri selaimille kun vain määrittelee omat tyylit eri laitteille. Tätä periaatetta voitaisiin aivan hyvin soveltaa myös JavaScript ja ECMAScript skripteihin. Tällöin esim. WAP-laitteille (media handheld tai tty) annettaisiin eri skriptit tai niitä ei annettaisi lainkaan.

Nykyisin skriptien käyttö on toimintaperiaatteeltaan vanhanaikainen verrattuna CSS:n, XSL:n ja XML:n toimintaperiaatteisiin ja skriptien toimintaperiaate tulisi uudistaa nykyhetken vaatimusten tasolla. Tämä tosin vie aikaa ja onko esim. Sun Microsystems tähän valmis? Ehdotelmani toisi kuitenkin monta etua.

Ehdotelmani edut

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004