Kirjoittaja: MikaBug (2007).
⚠ Huomio! Tämä opas on vanhentunut. Oppaan sisältöön ei voi enää luottaa. Opas on säilytetty vain sen historiallisen arvon vuoksi. ⚠
JavaScript on Netscapen kehittämä oliopohjainen ohjelmointikieli, jolla saadaan lisättyä dynaamisia toimintoja www-sivuille. Esimerkiksi lomakkeen tietojen esitarkastaminen, hiireen reagoivat linkkipainikkeet (ulkoasu muuttuu, kun hiiri viedään painikkeen päälle) ja popup-ikkunat voidaan toteuttaa JavaScriptin avulla. JavaScript ei nimestään huolimatta ole Javaa, vaikka kielten syntaksissa onkin paljon yhteistä. JavaScript tulkataan suoraan selaimessa, joten siitä ei tarvitse kääntää erillistä suoritettavaa tiedostoa.
On huomattava, että selaimen asetuksista saa JavaScript-tuen pois päältä, mikäli käyttäjä pitää skriptien suorittamista tietoturvariskinä. Jotkut haluavat myös estää popup-ikkunoiden avautumisen tai mahdollisten animaatioiden näyttämisen. Tämän vuoksi sivut pitäisi suunnitella aina toimimaan myös ilman JavaScriptiä.
JavaScript soveltuu interaktiivisten eli vuorovaikutteisten toimintojen luomiseen www-sivuille. Sillä ei pysty kirjoittamaan tiedostoon eikä tekemään tietokantahakuja. Evästeiden käyttö onnistuu, mutta tämäkin on helpompi toteuttaa mahdollisuuksien mukaan PHP-kielellä. JavaScriptillä onnistuu myös pienten animaatioiden teko. On muistettava, että monesti liikkuvat tai välkkyvät sivun osat lähinnä häiritsevät käyttäjää. Animaatioista tulee myös äkkiä raskaita ja ne hidastavat sivujen latautumista. Nykyään animaatioissa käytetään enemmän Flash-tekniikkaa.
JavaScriptin uusin versio on 1.5, mutta koska selainten tuki JavaScriptille on yhä hyvin vaihteleva, kannattaa käyttää vanhempia versioita, esimerkiksi versiota 1.2 tai 1.3. Näin JavaScriptin toimiminen eri selaimissa voidaan taata mahdollisimman pitkälle. Tämän opassarjan skriptit toimivat versiosta 1.2 ylöspäin.
Ohjelmoinnin aloittamiseen ei tarvita kuin JavaScriptiä tukeva selain ja tekstieditori (vaikkapa Muistio käy oikein hyvin). On kuitenkin huomattava, että teksturi ei saa rivittää tekstiä automaattisesti. Esimerkiksi koodirivin katkeaminen keskeltä rivinvaihdon vuoksi aiheuttaa virheen skriptin suorittamisessa.
Tässä opassarjassa käydään läpi kielen perusasiat kuten tekstin tulostaminen, muuttujien määrittely, ohjaus- ja silmukkarakenteet sekä JavaScriptin tärkeimpiin ominaisuuksiin lukeutuvat tapahtumankäsittelijät. Mukana on myös käytännönläheisiä koodiesimerkkejä, joita soveltamalla sivuille saa hyödyllisiä toimintoja. Opassarjan loppupuolella käsitellään lyhyesti myös omien olioiden luomista.
JavaScriptiä voidaan kirjoittaa suoraan HTML-dokumentin sekaan. Tällöin sen alku merkitään <script type="text/javascript">-tagilla ja loppu </script>-tagilla. Näiden komentojen väliin kirjoitetaan varsinainen JavaScript-koodi.
<script type="text/javascript"> <!-- Tähän tulee koodi //--> </script>
Koodin alkuun kannattaa laittaa HTML:stä tuttu kommenttimerkki <!-- ja koodin loppuun HTML:n kommenttimerkki yhdistettynä JavaScriptin kommenttimerkkiin //. Näin selaimet, jotka eivät tue skriptejä, eivät suorita koodia lainkaan. Tällöin on hyvien tapojen mukaista kertoa tästä käyttäjälle ja pyytää häntä vaikkapa päivittämään selain uudempaan versioon tai kytkemään JavaScript-tuki päälle. Tähän voi käyttää <noscript>-elementtiä, joka näyttää käyttäjälle ilmoituksen, mikäli selain ei tue JavaScriptiä:
<noscript>Selaimesi ei tue JavaScriptiä! Päivitä selain tai kytke JavaScript-tuki päälle asetuksista.</noscript>
Toinen tapa liittää JavaScript-koodi HTML-dokumenttiin on kirjoittaa se erilliseen tiedostoon, joka linkitetään sivulle seuraavanlaisella komennolla:
<script src="kooditiedosto.js" type="text/javascript"></script>
Silloin varsinaisen JavaScript-koodin sisältävä tiedosto näyttää tältä:
// kooditiedosto.js
<!--
document.write("JavaScript-koodi erillisessä tiedostossa.");
//-->JavaScript-lohkot voivat sijaita missä tahansa www-sivulla ja niitä voi olla useita. Jos skripti halutaan suoritettavan heti sivun latautuessa, se kannattaa sijoittaa head-tagien väliin.
Seuraavaksi on vuorossa ensimmäinen esimerkkiohjelma, joka tulostaa perinteisen tekstin ruudulle.
Kirjoita seuraava skripti tekstieditorilla, tallenna se vaikkapa nimellä ekakoodi.html ja avaa tiedosto selaimeen.
<script type="text/javascript">
// Tulostetaan rivi tekstiä selaimeen:
document.write("Hello World!");
/* Kommentointi auttaa ymmärtämään koodia vielä
viikonkin päästä... */
</script>
<noscript>Selaimesi ei tue JavaScriptiä!</noscript>Selaimeen pitäisi tulostua teksti "Hello World!". Jos näin ei käy, varmista, että selaimen JavaScript-tuki on päällä.
Tekstin tulostaminen tapahtuu siis komennolla document.write("Tulostettava teksti");. document on olio ja write metodi, joka tulostaa sivulle lainausmerkeissä olevan tekstin. Tässä vaiheessa riittää tietää, kuinka tekstiä tulostetaan.
Tulostettava teksti laitetaan lainausmerkkien " " tai heittomerkkien ’ ’ sisään. Kuitenkin lainausmerkkien sisällä on aina käytettävä heittomerkkejä tyyliin document.write("'red' on englantia ja on suomennettuna 'punainen'.");. Mikäli on välttämätöntä käyttää lainausmerkkiä tulosteessa, sen eteen on laitettava kenoviiva (\). Tällöin puhutaan escape-koodeista, joista tärkeimmät on lueteltu allaolevassa taulukossa. Luvut voi tulostaa sellaisenaan ilman lainausmerkkejä.
| ESCAPE-KOODI | MERKKI |
|---|---|
| \" | Kaksinkertainen lainausmerkki |
| \' | Yksinkertainen lainausmerkki |
| \\ | Kenoviiva |
<script type="text/javascript">
document.write("Tässä tekstissä käytetään \"lainausmerkkejä\" ja kenoviivaa \\");
</script>Yksirivinen kommentti tehdään laittamalla kommentin eteen kaksi kauttaviivaa // . Useampirivisiä kommentteja voi kirjoittaa /* ja */ -merkkien väliin.
<script type="text/javascript"> // Tämä on yhden rivin pituinen kommentti. /* Jos kommentit jakautuvat useammalle riville, kannattaa käyttää tällaista tapaa kommenttien merkitsemiseen. */ </script>
JavaScriptissä ohjelmalause päätetään puolipisteeseen ;. Vaikka puolipiste on myös mahdollista jättää pois, on suotavampaa ja paremman ohjelmointityylin mukaista päättää lauseet aina puolipisteeseen. Yhden lauseen on oltava kokonaan samalla rivillä, eikä se saa katketa keskeltä esimerkiksi rivinvaihdon takia. Jos pitempi tekstirivi halutaan jakaa useammalle riville, se voidaan tehdä \-merkin avulla.
document.write("Lauseet päättyvät puolipisteeseen");
document.write("Tämä lause aiheuttaa virheen
koodin suorituksessa");
document.write("Mutta tämä lause toimii \
kuten pitääkin");Ensimmäisen oppaan aiheet on nyt käsitelty. Sinulla pitäisi olla tarvittavat tiedot JavaScriptin liittämiseksi HTML-dokumenttiin, tekstin tulostamiseksi selaimeen sekä koodin kommentointiin. Seuraavassa oppaassa opetellaan käyttämään jokaisen ohjelmointikielen tärkeimpiin asioihin kuuluvia muuttujia sekä taulukoita.
Lauseen ei tarvitse välttämättä päättyä puolipisteeseen, vaan myös rivinvaihdolla voi päättää ohjelmalauseen. Toki tämä on äärimmäisen huonoa ohjelmointitapaa, mutta mahdollista kyllä.
Aivan totta ja mietin itsekin pitäisikö asiasta mainita ohjeessa, mutta päätin jättää sen kokonaan pois, koska kuten sanoit se on huonompi tapa ja saattaa aiheuttaa helpommin virhetilanteita. Mitä sitä sellaisia opettamaan. :)
Ihan oikein :)
Hmm, script-tagilla se aloitetaan. Sille tagille vaan annetaan "parametriksi" skriptin tyyppi.
Huomautuksena, että noscript-tagi ei ole kovin järkevä vaihtoehto. Selaimessa voi olla JavaScript-tuki päällä, mutta esimerkiksi joidenkin yrityksien tietoturva-asetukset siistivät pois JavaScriptiä. Noscript-tagi kuitenkin toimii vain jos selaimesta on asetettu JavaScript pois päältä.
Joten, järkevämpi tapa toimia on lisätä ilmoitus suoraan HTML-sivuun ilman noscriptiä ja antaa sille oma ID, ja sitten JavaScript-pätkässään piilottaa tai poistaa tämä elementti sivulta samalla kun tekee muut lisäyksensä.
// haetaan elementti jonka id="jspois"
var jspois = document.getElementById('jspois');
// tarkistetaan saimmeko elementin
if(jspois) {
// poistetaan elementti
jspois.parentElement.removeChild(jspois);
}Noscriptille sinällään ei ole mitään tarvetta, ainut hyöty siitä on se että ilmoittaa tekstimuodossa että juuri selaimesta on JavaScript kytketty pois päältä.
Myös document.write on kätevyydestään huolimatta vältettävämpien asioiden listalla, olisi parempi käyttää W3C:n standardia tapaa lisätä tekstiä, vaikka se onkin vaikeampi.
XHTML-sivuilla JavaScript pitää usein piilottaa CDATA:lla jos tahtoo sen validaattorista lävitse:
<script type="text/javascript"><!-- <![CDATA[ ... koodi tässä ... //]]> --></script>
IE7 katsoi ainakin minulla noscriptin läpi sormien.
Xenifiks kirjoitti:
IE7 katsoi ainakin minulla noscriptin läpi sormien.
Kuka nyt IEetä käyttäkään??? ;D
Varmaa 45% internetin käyttäjistä ;O
ByMikkis kirjoitti:
Kuka nyt IEetä käyttäkään??? ;D
Tuoreimman tilaston mukaan 68%. Toinen asia sitten onkin miten luotettava kyseinen tilasto on.
http://www.favbrowser.com/internet-explorer-opera-loses-firefox-safari-chrome-gains-jan-2009/
Ainakin meidän firmassa IE on ainoa tuettu selain ja ainoa joka toimii oikein yhdessä meidän sähköpostijärjestelmän, web-mailin ja intranetin kanssa.
Eli jos aiot tehdä nettisivuja, jotka toimivat useimmilla ihmisillä, niin niiden ON TOIMITTAVA IE:llä.
Minulla lukee tavallisesti "Hello World!"
Xenifiks kirjoitti:
IE7 katsoi ainakin minulla noscriptin läpi sormien.
Oliks pojalla selaimen asetuksissa Javascript päällä?
Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.