Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

Kysyttyjä kysymyksiä

Weppipakin resursseista

JavaScriptistä

Sivun esimerkkikoodit ovat XHTML-syntaksin mukaisia.

Vastaukset

Mitä tarkoittaa se, että Weppipakin resurssit ovat vapaasti käytettävissä?

Kaikki scriptit ovat parhaan tietoni mukaan käytettävissä sekä yksityisiin että kaupallisiin tarkoituksiin, eli voit vapaasti käyttää hyväksesi kaikkia scriptejä sivuillasi. Joistakin scripteistä löytyvät tekijänoikeusmerkinnät on kuitenkin jätettävä paikoilleen. Voit myös esim. imuroida vaikka koko Weppipakin sivuston itsellesi yksityiskäyttöön.

Sivuston materiaaleja saa käyttää korvauksetta ja lupaa kysymättä opetustarkoituksiin viittaamalla niihin suoraan ja/tai tulostamalla niitä oppilaitoskäyttöön.

Vapaa käyttöoikeus ei tarkoita sitä, että voit kopioida sivujani palvelimeltasi julkaistavaksi, tai pyytää niitä kehyksiisi, tai muuten integroida niitä osaksi omaa sivustoasi.

Mitä on DHTML?

DHTML (Dynamic HTML) on iskusana, joka nimensä mukaan tuo dynaamisuutta HTML-dokumentteihin. Riippuen yhteydestä DHTML voi tarkoittaa:

Weppipakissa sanaa käytetään noissa kaikissa merkityksissä :) Katso DHTML-esimerkkejä.

Miten tehdään muut asiat, joita Weppipakista ei löydy?

Valitettavasti en ehdi, enkä useimmiten edes osaisikaan, vastata tällaisiin kysymyksiin. Tiedonhankintaan suosittelen ensisijaisesti hakukoneiden käyttöä ja toissijaisesti uutisryhmiä, esim. sfnet.viestinta.www, jossa käsitellään Weppiin liittyviä standardeja, ohjelmia ja käytäntöjä. Uutisryhmää voidaan tarvittaessa käyttää myös Webin kautta.

Onko Weppipakin sivuissa virheitä, kun x y z ei toimi?

Inhimillisiä virheitä aina sattuu, mutta yleisesti ottaen Weppipakin sivut ovat täysin standardin mukaisia, validoituja HTML- tai XHTML-sivuja, joten useimmiten virhe johtuu asiakasohjelmasta (selaimesta). Yksittäisen scriptin toimivuus taas riippuu siitä tukeeko käyttämäsi selain JavaScriptiä ja onko mahdollinen scriptituki päällä.

Tällä hetkellä ohjelmasi JavaScript-tuki

On kuitenkin huomioitava, että DHTML-esimerkit on räätälöity tietyille selainversioille, pääasiassa ns. neljännen sukupolven selaimille, joten niiden ei kuuluisikaan toimia esim. Operassa, tai edes välttämättä Netscapen ja/tai Microsoftin uusimmissa selaimissa.

Voinko JavaScriptillä ohjata suoraan alisivuihin tulijat lataamaan kehykset?

Kehystekniikkaa käyttävät sivustot useimmiten suunnitellaan niin, että vierailijat aloittaisivat visiittinsä aina pääsivulta, mutta mm. hakukoneet saattavat ohjata kävijät suoraan alisivuille. JavaScriptillä voi paikata vahinkoa lisäämällä seuraava SCRIPT-elementti alisivujen HEAD-osastoon:

<script type="text/javascript">
if (top == self) {
self.location.href = "http://www.example.com/example.htm";
}
</script>

Koodi pyytää JavaScript-kykyisiä selaimia lataamaan yo. osoitteen, jos alisivu on selainikkunassa päällimmäisenä. Vaihda kehyssivusi osoite (myös suhteellinen käy) tilalle.

Miten saan raskaat sivut ladattua etukäteen selaimen välimuistiin?

Useinhan pullonkaulaksi muodostuvat kuvat, jolloin kaikista helpopin ratkaisu on pyytää edellisen sivun koodiin seuraavan sivun kuvat. Tällöin ei edes scriptiäkään tarvita:

<img alt=""
src="isokuva.jpg" width="1" height="1" />

jolloin kuva latautuu välimuistiin kokonaisuudessaan, mutta se esitetään 1 × 1 kuvapisteen kokoisena ja se on helppo piilottaa näkymättömäksi.

Toinen vaihtoehto on piilottaa kuva CSS:llä:

<img alt=""
src="isokuva.jpg" style="visibility:hidden" />

Yhdistettynä nuo toiminnevat parhaiten.

Myös JavaScriptillä tuo onnistuu. Esim. seuraavasti:

<script defer="defer" type="text/javascript">
if (document.images)
   {
   var kuva1 = new Image(300,150);
   kuva1.src = "../../images/op.gif";
   var kuva2 = new Image(300,150);
   kuva2.src = "../../images/nn.gif";
   var kuva3 = new Image(16,16);
   kuva3.src = "../../images/wpicon2.gif";
// jne.
   }
</script>

Eli yo. koodi lataa nuo kolme kuvaa välimuistiin.

Paljon on käytetty myös nk. preloader-scriptejä, esim. Kuvat; esilataus.

Jos pelkät kuvat eivät riitä, niin kehysratkaisulla saadaan koko sivu esiladattua. Esim., jos normaalisti kehykset ovat:

<frameset cols="20%,80%">
     <frame src="menu.htm" />
     <frame src="main.htm" />
</frameset>

niin tehdäänkin sisäkkäinen kehysrakenne:

<frameset cols="20%,80%">
   <frame src="menu.htm" />
      <frameset rows="100%,*">
         <frame src="main.htm" />
         <frame src="piilossa.htm" />
      </frameset>
</frameset>

jolloin piilossa.htm latautuu välimuistiin ja siihen voidaan viitata main.htm -tiedostosta seuraavasti:

<a href="piilossa.htm" target="_parent">seuraava sivu</a>

Miten ikkuna suljetaan JavaScriptin avulla?

Käyttämällä window-olion close-metodia:

<a href="javascript:window.close();">Sulje ikkuna</a>

Kehysdokumentit vaativat oman syntaksin:

<a href="javascript:top.close();">Sulje ikkuna</a>

Ikkunat voidaan sulkea myös automaattisesti ja viiveellä BODY-elementin ONLOAD-attribuutin avulla seuraavasti:

<body onload="setTimeout('window.close()',7000);">
<!-- yo. luku 7000 = 7 sekunttia -->
Huomioita

Ei liene kovin mielekästä käyttää close-metodia tavallisten ikkunoiden sulkemiseen, koska:

Ikkunan sulkemista avaavasta scriptistä käsin käsitellään muualla.

Miten tehdään automaattinen ja/tai viivytetty sivusiirto?

Asiakaspuolella tähän löytyy kaksi toteutusvaihtoehtoa:

  1. HTML-keino: tässä käytetään HEAD-osastoon sijoitettua META-elementtiä, jossa määritetään viiveen aika sekuntteina (0 = ei viivettä) ja uuden sivun osoite seuraavasti:

    <meta http-equiv="refresh" content="10;url=sivu2.htm" />
    <!-- osoitteet voidaan määritellä myös absoluuttisesti -->

    Käytännössä tuo yo. koodi pyytää selainta päivittämään (refresh) sisältönsä kymmenen sekunnin päästä (10) osoitteella sivu2.htm. Menetelmän haittapuolena on selaimen historian sekoittaminen (varsinkin lyhyeillä viiveillä) niin, että tottumaton käyttäjä saattaa disorientoitua.

  2. JavaScript-keino: tässä käytetään HEAD-osastoon sijoitettua SCRIPT-elementtiä, jolle annamme samat arvot kuin edeliselle esimerkille:

    <script type="text/javascript">
    setTimeout('location.replace("sivu2.htm")',10000)
    // aika-arvo annetaan millisekuntteina
    </script>

    Menetelmän haittapuolena on JavaScript-tuen tarve, mutta tämä metodi ei sotke selaimen historiaa.

Paras asiakaspuolen sivunsiirtotapa lienee yo. menetelmien yhdistelmä, jossa HEAD-osastoon merkitään esim. seuraavasti:

<script type="text/javascript">
setTimeout('location.replace("sivu2.htm")',7000);
</script>
<meta http-equiv="refresh" content="9;url=sivu2.htm" />

Jossa ensijaisesti aktivoituu JavaScript- ja HTML-keino varmistaa. Laajasta selaintuesta huolimatta on syytä vielä varmistaa siirtymisen onnistuminen lisäämällä sivun runkoon ihan tavallinen linkki kohdesivulle. Testaa yo. koodin mukaista esimerkkiä.

Viimeinen päivitys: 2009-06-14
Osmo Saarikumpu