JavaScript

Allikas: Kuutõrvaja

Mis on JavaScript

JavaScript on skriptimiskeel, mille juured pärinevad ECMAScript keelest. JavaScripti ei maksa segi ajada Javaga. Kuigi nad on paljuski sarnased, on nad siiski erinevad. See skriptimiskeel leiab enim kasutust veebis kasutaja brauseris käivitatava skriptina. Seda keelt kasutatakse ka väljaspool brauserit, näiteks PDF dokumentides ja ka näiteks Windowsi desktopil kuvatavates vidinates (kellad, kalendrid, aku mahutavuse kuvajad jms).

Javascript...

  • loodi, et lisada interaktiivsust HTML lehtedele
  • on skriptimiskeel
  • on interpreteeritav keel (seda ei kompileerita)
  • lisatakse veebilehe koodi
  • on litsentsivaba, seda võivad kõik kasutada

Eeldused

Kuna selles artiklis kirjeldatakse ennekõike brauserites kasutatavaid võimalusi, võiks artikkli lugejal olla vähemalt baasteadmised HTML ja XHTML keeltest ja nende võimalustest.

Tööriistad

Oli aegu, mil JavaScripti oli raske kirjutada, sest puudusid arvestatavad vahendid veaotsinguks. Tänapäeval on enamus brauseritel selleks vahendid olemas.

Google Chrome - Menu -> Tools -> Developer Tools

Firefox - Laiendusena installeeritav Firebug

Opera - Menu -> Page -> Developer Tools

Kuhu mis ja kuidas

JavaScript algab ja lõppeb script tag'iga (tagiks nimetatakse HTML keeles kõiksugu elemente).

<script>
// javascripti kood
</script>

Kuigi eelnev kood töötab, nõuab validaator (standard internetis validator.w3.org, et kõik brauserid mõistaksid lehte sama moodi) type parameetri olemasolu.

<script type="text/javascript">
// javascripti kood
</script>

Validaator tahab pahatihti analüüsida ka script tag'ide vahel olevat infot, mistõttu tuleks see tema eest pigem peita. HTML validaator on siiski HTML validaator. Selleks on järgmine nipp:

<script type="text/javascript">
<!-- //

// javascripti kood

// -->
</script>

Internet Explorer 8.0 nõuab endiselt iga rea lõppu semikoolonit (;), mis teiste brauserite puhul enam rusikareegel ei ole.

JavaScript ei pea tingimata olema veebi lehekülje sees. Selleks võib teha täiesti eraldi js laiendiga tekstifaili ja viidata viimasele veebilehe päisest script tag'i kasutades:

<html>
<head>
  <script src="fail_kus_sees_on_javascript.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Sisu kommenteerimine

JavaScripti koodi kommenteerimine järgib teiste keelte üldtavasid.

<script type="text/javascript">

// See on kommentaar, mida koodis kuvatakse kuid javascripti käivitamisel ei rakendata

// alert( 'Tere maailm!' );

/* See on mitme realine kommentaar

   funktsiooni alert( 'Tere maailm!' ) ei käivitata, sest ta kuulub kommentaari sisse */

</script>

Muutujad

JavaScriptis ei ole muutujate ees tähiseid. Muutujate tüüpe eelnevalt defineerima ei pea. Omistamise hetkel antakse muutujale vastavalt väärtusele ka tüüp.

JavaScript on CASE SENSITIVE, ehk siis tehakse vahet suurel ja väikesel tähel. Muutujate ja funktsioonide defineerimisel tasub seda meeles pidada!

Tüübid on järgmised:

<script type="text/javascript">

muutuja = "Tere maailm!"; // tekstiline väärtus
muutuja = 24.7            // komaga arv
muutuja = 2010            // täisarv
muutuja = true            // tõene või väär
muutuja = null            // muutujal pole mingit väärtust
muutuja = []              // massiiv
muutuja = {}              // objekt (räsi massiiv)

</script>

Muutujatega tehteid tehes peab arvestama, et JavaScript võib neid valesti mõista. Näiteks võib arvu 20 defineerida nii numbrimiselt kui tekstiliselt.

<script type="text/javascript">

a = 10;
b = "20";

c = a + b // c väärtus on 1020

</script>

Kui vaja stringist arv teha, siis kasutame funktsiooni parseInt.

<script type="text/javascript">

a = 10;
b = "20";

c = parseInt(a) + parseInt(b) // c väärtus on 30

</script>

Objekt on see, mis teeb JavaScriptist võimsa skriptimiskeele. Objekt võib endas hoida palju rohkem infot, kui näiteks massiiv. Massiivis on jada väärtuseid, mille indeksid algavad nullist ja lõppevad kohal n.

<script type="text/javascript">

kes = ["mina", "sina", "tema", "meie", "teie", "nemad"]

alert( kes[0] ) // "mina"
alert( kes[2] ) // "tema"

kes[8] = "Toomas" // sisestame massiivi uue väärtuse kohale 9

alert( kes[8] ) // "Toomas"

alert( kes[10] ) // undefined e. defineerimata

</script>

Räsi massiiv lubab indeksina kasutada sõne (string).

<script type="text/javascript">

taibu = { mina: "tean", sina: "tahad teada", nemad: "ei tea", 99: "muud tegelased" }

alert( taibu['mina'] ) // "tean"
alert( taibu.mina )    // "tean"

alert( taibu.99 )      // SyntaxError: Unexpected number

alert( taibu[99] )     // "muud tegelased"

</script>

taibu.mina on võimalik kasutada, sest indeksis olev sõne algab tähega ning mitte numbriga. Numbrilise indeksi puhul tuleb number panna kandilistese sulgudesse, nagu eelpool näidatud.

Debugimine

Tihti on vaja uurida ja jälgida, miks üks või teine osa programmist ei toimi. Selleks vaja teada saada, mis väärtused on mingil hetkel mingil muutujal.

Alert

Üks lihtsamaid viise midagi ekraainle saada, on alert funktsioon.

<script type="text/javascript">

alert( 'Tere maailm!' );

</script>

Kui alert funktsioon paigutada tsüklisse (for, while jms), mis mingil põhjusel tsüklist välja ei taha tulla, siis kaob tuju neid "ok" nuppe klikkida juba esimestel sekunditel, nii et ettevaatust!

Konsool

Teine meetod kiireks väljundiks on console.log. See kirjutab väljundi konsooli (eelpool nimetatud developer tool on abiks), ning tavakasutaja ei pruugi neid üldse näha.

<script type="text/javascript">

console.log( "Rida konsoolis." );

</script>

try..catch

Kui on segaseid veateateid, siis on võimalik ka viga "kinni püüda".

<script type="text/javascript">

try
{
  // js kood
}
catch(err)
{
  // vea puhul tee seda
}

</script>

Näide:

<script type="text/javascript">

function message()
{
  try
  {
    echo("midagi");
  }
  catch(err)
  {
    alert("Leiti viga\n\n" + err.description); // "undefined"
  }
}

message();

</script>

Try plokis olev echo peaks olema funktsioon? Veateade ütleb aga "undefined". Selge, defineerimata!

Throw

See meetod lubab luua erandeid. Kui kasutada seda koos try..catch meetodiga, saab luua viisakaid veateateid.

<script type="text/javascript">

var x=prompt("Sisesta number 0..10 :"); // küsime kasutajalt numbri

try
{ 
  if(x>10) // kui x on suurem kui 10
  {
    throw "Err1"; // tekitame vea Err1
  }
  else if(x<0) // kui x on väiksem kui 0
  {
    throw "Err2"; // tekitame vea Err2
  }
  else if(isNaN(x)) // kui x pole number
  {
    throw "Err3"; // tekitame vea Err3
  }
}
catch(er) // Püüame vea kinni
{
  if(er=="Err1") // kui viga oli Err1
  {
    alert("Viga! Number liiga suur!"); 
  }
  if(er=="Err2") // kui viga oli Err2
  {
    alert("Viga! Number liiga väike!");
  }
  if(er=="Err3") // kui viga oli Err3
  {
    alert("Viga! Tegu pole numbriga");
  }
}

</script>

Operaatorid

Aritmeetika

Eeldades, et y=5

 Tehe   Kirjeldus        Näide   Tulemus
 +      Liitmine         x=y+2   x=7
 -      Lahutamine       x=y-2   x=3
 *      Korrutamine      x=y*2   x=10
 /      Jagamine         x=y/2   x=2.5
 %      Modulus (jääk)   x=y%2   x=1
 ++     Suurendamine     x=y++   x=6
 --     Vähendamine      x=y--   x=4
<script type="text/javascript">

a = 5;
b = 7.5;

c = a + b;

alert( c ); // 12.5

</script>

Mis siis, kui meil on muutuja(id), mida me soovime väljastada koos tekstiga?

<script type="text/javascript">

a = 5;
b = 7.5;

c = a + b;

alert( "Arvude " + a + " ja " + b + " summa on " + c ); // "Arvude 5 ja 7.5 summa on 12.5"

</script>

Võrdlemine

Eeldades, et x=5, siis:

 Tehe    Kirjeldus                          Näide
 ==      on võrdne                          x==8    on väär
 ===     on täpselt sama (väärtus ja tüüp)  x===5   on tõene
                                            x==="5" on väär
 !=      ei ole võrdne                      x!=8    on tõene
 >       on suurem kui                      x>8     on väär
 <       on väisem kui                      x<8     on tõene
 >=      on suurem või võrdne               x>=8    on väär
 <=      on väiksem või võrdne              x<=8    on tõene

Loogika

 && - "loogiline jaa" - tõene, kui mõlemad tingimused on täidetud
 || - "loogiline või" - tõene, kui üks kahest tingimusest on täidetud
 !  - "loogiline eitus" - muudab tõese väärtuse vääraks ja vastupidi

Eeldades, et x=5 ja y=10 ja z = tõene

 Tehe  Näide         
 &&    x>1 && y>1    on tõene
       x<0 && y>0    on väär
       x==5 && z     on tõene
 ||    x<10 || y>20  on tõene
       x<0  || y>10  on väär
 !     x==5 && !z    on väär

Omistamine

Eeldades, et x=10 ja y=5, siis:

 Tehe   Näide   Samaväärne   Tulemus
 =      x=y                  x=5
 +=     x+=y    x=x+y        x=15
 -=     x-=y    x=x-y        x=5
 *=     x*=y    x=x*y        x=50
 /=     x/=y    x=x/y        x=2
 %=     x%=y    x=x%y        x=0

Kui see tabel tekitab segadust, siis kirjuta enda jaoks tehted pikemalt välja.

Sõnele saab lisada lõppu uusi sõnesid või väärtuseid:

<script type="text/javascript">

tekst = "Tere";
tekst += " maailm!";

alert( tekst ); // "Tere maailm!"

</script>

Sõned saab ka omavahel kokku liita.

<script type="text/javascript">

tekst1 = "Java";
tekst2 = "Script";

tekst = tekst1 + tekst2;

alert( tekst ); // "JavaScript"

</script>

Spetsiaalsed operaatorid

?:

if else lühivorm. Tavaline kuju:

if ( x>y )
  z = x;
else
  z = y;

Lühendatud kuju:

z = (x>y) ? x : y
 ,

Kasutatakse juhul kui ühe avaldise asemel on vaja täita mitut avaldist

  for (var i=1, j=2; i<5; i++) {
    // korratav kood
  }
 typeof

Väljastab muutuja tüübi

x=7;             typeof x; // number
s="Hello World"; typeof s; // string
k=new Date();    typeof k; // object
p=true;          typeof p; // boolean

Selle funktsiooni abil saab kontrollida, kas mingi muutuja on juba defineeritud

if ( typeof ( a ) == "undefined" ) { // kas muutuja a on defineerimata?
  a = 1;                             // kui on, siis anname talle algväärtuseks 1
}
 delete

Kustutab objekti omaduse, muutuja või elemendi massiivist

  delete objetinimi.omadus
  delete massiiv[indeks]
  delete muutuja
 this    

Võtmesõna, mida kasutatakse viitamaks vaadeldavale (momendil kasutatavale) objektile

<input type="password" name="pw" onChange="test(this)">
 new   

Selle abil saame luua uue instantsi nii kasutaja poolt defineeritud kui Javascripti sisseehitatud objektidele. JavaScripti objekt:

kuupaev=new Date()

Meie defineeritud objekt:

function auto(mark, mudel, tootmisaasta) {
  this.mark = mark
  this.mudel = mudel
  this.tootmisaasta = tootmisaasta
}

a = new auto ("Audi" , "A6",  1996);

typeof a; // object

a.mark;   // Audi

Plokid

JavaScripti käsud saab grupeerida plokkidesse. Plokk algab ja lõppeb loogelise suluga { ja }. Plokke kasutatakse selleks, et teatud käske täidetaks korraga. Näited on järgmises lõigus...

Juhtstruktuurid

Skripti käigu suunamiseks kasutatakse juhtstruktuure, mis valivad järneva tegevuse vastavalt seatud tingimustele. Tingimusi esitatakse võrdlustehete <, >, <=, >=, ==, != ja <> abil.

Loogelisi sulge ({ ja }) kasutatakse käskude grupeerimiseks ühte plokki.

if

IF konstruktsiooni abil saab valida kahe (või rohkema) võimaliku tegevuse vahel sõltuvalt tingimus(t)e täidetusest.

<script type="text/javascript">

if ( tingimus1 ) {
  // tee esimest värki
}
else if ( tingimus2 ) {
  // tee teist värki
}
else {
  // kui teisi variante polnud, siis tee kolmandat
}

</script>

Kuna pole teada, mitu käsku täidetakse esimese tingimuse plokis, on kasutatud { ja } märki. Kui ploki sees on vaid üks käsk, võib ka { ja } ära jätta. Näiteks:

<script type="text/javascript">

if ( tingimus1 )

  alert( "Esimene tingimus" );

else if ( tingimus2 )

  alert( "Teine tingimus" );

else

  alert( "Kolmas tingimus" );

</script>

Võrdleme omavahel kahte arvu:

<script type="text/javascript">

a = 5;
b = 6;

if (a > b) 
{
  alert( a + " on suurem kui " + b );
} 
else 
{
  alert( a + " on väiksem või võrdne arvuga " + b );
}

</script>

IF konstruktsioonil võib olla mitu argumenti, mida ühendatakse omavahel jaatuse või eitusega. Näiteks kontrollime, kas muutuja arv kuulub vahemikku -9 ja 9 kaasa arvatud.

<script type="text/javascript">

arv = -3;

if (arv >= -9 && arv <= 9) 
{
  alert( arv + " kuulub arvude vahemikku -9..9" );
} 
else 
{
  alert( arv + " ei kuulu arvude vahemikku -9..9" );
}

</script>

On ka lühem (vähem ennast kordav) viis sama tulemuse saamiseks:

<script type="text/javascript">

// muutuja = tingimus ? tõene : väär
// tingimus ? tõene : väär

arv = -3;

alert( arv + (arv >= -9 && arv <= 9 ? " kuulub" : " ei kuulu") + " arvude vahemikku -9..9" );

</script>

Kui mõlemad tingimused peavad olema tõesed, siis kasutame nende ühendamiseks && (AND). Kui tõene peab olema vaid üks neist, siis märki || (OR). Lubatud on ka eituse kasutus, mille puhul pannakse muutuja ette hüüumärk (!), näiteks:

<script type="text/javascript">

permission = false;

if ( !permission ) {
  alert( "Sul pole selleks volitusi!" );
}

</script>

Kui if ( true ) käivitaks alert funktsiooni, siis meie puhul teeb seda ka if (not true).

Pange tähele, et else ei ole kohustuslik. Kui seda pole defineeritud, siis teistel juhtudel ei võeta midagi ette.

for

for-konstruktsiooni abil saab täita sama plokki kontrollitud arv kordi. Viie kordne kordus koos konsooli kuvamisega:

<script type="text/javascript">

for ( i = 1; i <= 5; i++)
{
  console.log( i );
}

</script>

i++ on samaväärne kui i = i+1. Muutuja i väärtust suurendatakse ühe võrra!

while

While konstruktsiooni puhul täidetakse plokki seni, kuni tingimus on tõene. Kirjutame konsooli arvud ühest viieni välja ka while'i abil.

<script type="text/javascript">

i = 1;
while (i <= 5) 
{
  console.log( i++ );
}

</script>

for..in

<script type="text/javascript">

var nimed = ["Toomas", "Kati", "Maret"];

for(var i in nimed)
{
  alert( nimed[i] );
}

</script>

switch

Switch on IF tingimusele vägagi sarnane, kuid tihti lühemalt kirjutatav.

<script type="text/javascript">

switch(n)
{
  case 1:
    // tee esimest
    break;
  case 2:
    // tee teist
    break;
  default:
    // kui ükski eelmistest ei sobinud, tee kolmandat
}

</script>

Kas on juba nädala lõpp?

<script type="text/javascript">

var d=new Date();
p2ev=d.getDay();

switch(p2ev)
{
  case 5:
    alert( "Reede" );
    break;
  case 6:
    alert( "Laupäev" );
    break;
  case 0:
    alert( "Pühapäev" );
    break;
  default:
    alert( "Tuleks juba nädalavahetus!" );
}

</script>

Funktsioonid

Kõiksugustes programmeerimis- ja skriptimiskeeltes tuleks end võimalikult vähe koodi kirjutamisel korrata. Selleks on loodud funktsioonid.

<script type="text/javascript">
function funktsiooninimi( muutuja1, muutuja2, muutujaX )
{
  // js kood
}
</script>

Muutujad (muutuja1, muutuja2 jne) on funktsiooni sisendargumendid. Ka sisendargumentideta funktsioonil on sulud () peale funktsiooni nime! Märgid { ja } defineerivad funktsiooni alguse ja lõpu.

Tekitame näiteks funktsiooni liida(), mille sisendargumentideks on kaks arvu. Funktsioon kuvab ekraanile nende kahe arvu summa.

<script type="text/javascript">
function liida( a, b ) 
{
  summa = a + b;
  alert( "Arvude " + a + " ja " + b + " summa on " + summa );
}
liida(10, 15);    // "Arvude 10 ja 15 summa on 25"
liida(20, 14.75); // "Arvude 20 ja 14.75 summa on 34.75"

liida();          // "Arvude undefined ja undefined summa on NaN"
</script>

Kui käivitada funktsioon ilma sisendargumentideta, on nii a kui b väärtus undefined. Kui a ja b omavahel kokku liita, siis on väärtuseks NaN ehk Not a Number. Sellised juhused tuleks eos välistada, et kasutaja ei saaks puudulikke vastuseid.

Lisame funktsiooni sisse muutujate a ja b kontrolli. Kui need pole defineeritud, väljume funktsioonist.

<script type="text/javascript">
function liida( a, b ) 
{
  // kui a VÕI b on defineerimata, pöördume tagasi põhiprogrammi
  if ( typeof a == "undefined" || typeof b == "undefined" ) return; 

  summa = a + b;
  alert( "Arvude " + a + " ja " + b + " summa on " + summa );
}
liida();      // Funktsioon ei väljasta mitte midagi!
liida(10,20); // "Arvude 10 ja 20 summa on 30"
</script>

Funktsioonid ei pea tingimata midagi väljastama. Nad võivad ka töödeldud andmed tagastada. Selleks on return käsk.

<script type="text/javascript">
function liida( a, b ) 
{
  if ( typeof a == "undefined" || typeof b == "undefined" ) return;

  summa = a + b;
  return "Arvude " + a + " ja " + b + " summa on " + summa;
}

funktsiooni_tagastatud_v22rtus = liida(10,20);
 
alert( funktsiooni_tagastatud_v22rtus ); // "Arvude 10 ja 20 summa on 30"
</script>

prototype

Prototype on viis, kuidas eksisteerivale objektile (või ka klassile) lisada meetodeid või omadusi.

Esmalt defineerime endale oma funktsiooni:

function korda_stringi(n) {
  var uus_string = "";
  vana_string = this.toString()
  while(--n>=0) uus_string+=vana_string
  return uus_string
}

Seejärel seome fuktsiooni JavaScripti objektiga String:

String.prototype.korda = korda_stringi

st1 = new String("Tere");
st2 = new String("Nägemiseni");

alert( st1.korda(5) ); // "TereTereTereTereTere"
alert( st2.korda(2) ); // "NägemiseniNägemiseni"

alert( "JavaScript ".korda(4) )

Kasutajalt info küsimine

Mis kasu on kogu sellest värgist, kui me teame kõiki arve mida me kokku liidame, eks? Aga mis siis, kui kasutaja sisestab meil arvu, mida liita/korrutada või teha nendega ka midagi kolmandat?

Väärtuse küsimine

<script type="text/javascript">

sisend = prompt( "Palun sisesta üks arv: " ); // Laseme kasutajal sisestada arvu

arv = parseInt( sisend ); // teeme sisendist numbri

if ( isNaN( arv ) ) // kui meie sisendist tehtud arv pole number (on hoopis NaN), väljastame teate
{
  alert( "Sai ju öeldud, et sisesta arv. Sina aga sisestasid: " + sisend );
}
else if (arv == 0) // kui arv on 0
{
  alert( "Arv " + arv + " on null." );
} 
else if ( arv > 0 ) // kui arv on suurem nullist
{
  alert( "Arv " + arv + " on nullist suurem." );
}
else // teistel juhtudel on ta väisem nullist
{
  alert( "Arv " + arv + " on nullist väiksem." );
}

</script>

Prompt meetod lubab määrata ka vaikimisi arvu, mis kuvatakse sisendaknas:

<script type="text/javascript">

sisend = prompt( "Palun sisesta üks arv: ", 10 );

</script>

Kinnituse küsimimine

<script type="text/javascript">

sisend = confirm( "Suuname su EENeti kodulehele?" ); // true või false

if ( sisend ) // kui sisend on true e. tõene
{
  location.replace( "http://www.eenet.ee" ); // muudame aadressireal aadressi
}

</script>

Sündmused (Events)

Tänu JavaScriptile on võimalik luua dünaamilisi veebilehekülgi. Sündmused on toimingud, mida JavaScript saab jälgida.

  • hiireklikk
  • veebilehe või pildi laadimine
  • hiire liigutamine üle teatud elemendi
  • vormi väljal klikkimine
  • vormi postitamine
  • klahvivajutus

onLoad ja onUnload

onLoad käivitatakse, kui kasutaja tuleb lehele. onUnload aga siis, kui kasutaja sulgeb lehe.

onLoad leiab Enamasti kasutust statistika tegemiseks või brauseri tüübi määramiseks. onUnload aga küpsise kustutamiseks kasutaja arvutist.

<html>
<head>
  <title>onLoad, onUnload</title>
  <script>
    function fn() {
      alert('onload funktsioon käivitatud!' );
    }

    function fn_unload() {
      alert('onunload funktsioon käivitatud!' );
    }
  </script>
</head>
<body onload="fn()" onunload="fn_unload()">
</body>
</html>

onFocus, onBlur ja onChange

Neid kasutatakse ennekõike vormide juures.

onFocus - kui element saab fookuse. onBlur - kui element kaotab fookuse. onChange - kui elemendi väärtus muutub

<html>
<head>
  <title>onFocus, onBlur, onChange</title>
  <script>
    function muudaTaust( element, v2rv ) {
      element.style.background = v2rv;
    }
    function strPikkus( element ) {
      m2rke = element.value.length;
      alert( "Lahtris sümboleid: " + m2rke )
    }
  </script>
</head>
<body>

<form method="post">
  <input type="text" 
         onfocus="muudaTaust(this, '#abcdef')" 
         onblur="muudaTaust(this, '#fff')" 
         onchange="strPikkus(this)" />
</form>

</body>
</html>

onSubmit

Kuna see funktsioon käivitiatakse enne vormi postitust, on see hea viis kontrollimaks, kas kõik väljad on täidetud ja andmed korrektselt sisestatud.

<html>
<head>
  <title>onSubmit</title>
  <script>

    // skript, mis kontrollib lahtrite täidetust
    function checkform( vorm )
    {
      if( vorm.nimi.value == "" )        // kui vormis oleva elemendi "nimi" väärtus on tühi
      {
        alert( "Nimi sisestamata!" );    // teata kasutajale, mis on valesti
        vorm.nimi.focus();               // pane kursor elemendi lahtrisse
        return false;                    // tagastame vormile false, et sisu ei postitataks
      }
      else if( vorm.telefon.value == "" ) // kui vormis oleva elemendi "telefon" väärtus on tühi
      {
        alert( "Telefon sisestamata!" );  // teata kasutajale, mis on valesti
        vorm.telefon.focus();             // pane kursor elemendi lahtrisse
        return false;                     // tagastame vormile false, et sisu ei postitataks
      }

      return true;                        /* kui skript jõuab siia, siis vigu ei olnud,
                                             tagastame true ja vorm postitatakse        */
    }
  </script>
</head>
<body>

<form method="post" onsubmit="return checkform(this)">

Nimi:    <input type="text" name="nimi" /><br/>
Telefon: <input type="text" name="telefon" /><br/>
         <input type="submit" value="Postita" />

</form>

</body>
</html>

onMouseOver ja onMouseOut

Nende funktsioonidega saab teha näiteks animeeritud nuppe, või muuta lehel olevate elementide stiile omadusi jpm.

<a href="http://www.eenet.ee" onmouseover="alert('onMouseOver event!'); return false;">EENet</a>
<html>
<head>
  <title>onMouseOver, onMouseOut</title>
  <script>
    function muudaTekst( element, v22rtus ) {
      element.value = v22rtus;
    }
  </script>
</head>
<body>

<input type="button" 
       value="Nupp" 
       style="width: 200px; padding: 30px;" 
       onmouseover="muudaTekst(this, 'Vajuta nüüd ometi!')" 
       onmouseout="muudaTekst(this, 'Nupp');" />

</body>
</html>

Dynamic HTML

Palju on juttu DHTML lehekülgedest. Dynamic HyperText Markup Language on see, kui JavaScript muudab lehe sisu dünaamiliselt.

<html>

<html>
<head>
  <title>DHTML</title>
</head>
<body>

<form name="korrutustabeli_vorm">
<div id="korrutustabeli_pesa"></div>
</form>

<script>

  function uus_element(rida, veerg) {
    value = rida*veerg;

    a = document.createElement("input");                                        // loome uue input elemendi
    a.setAttribute( "type", "button" );                                         // input element peab omama type parameetrit
    a.setAttribute( "value", value );                                           // määrame nupule väärtuse
    a.setAttribute( "style", "width: 40px; height: 40px; margin: 0 2px 2px 0;") // paneme paika stiili
    a.setAttribute( "onclick", "v2rvi(" + value+ ")" );                         // määrame funktsiooni, mis kliki peale käivitatakse
    document.getElementById( "korrutustabeli_pesa" ).appendChild( a );          // lisame värskelt loodud elemendi lehele
  }

  for (rida = 1; rida <= 20; rida++ ) {     // 1..20
    for ( veerg = 1; veerg <= 20; veerg++ ) // 1..20
      uus_element( rida, veerg );           // loome uue elemendi, uus_element( 1, 1) jne...

    br = document.createElement("br");                                  // teeme reavahetuse
    document.getElementById( "korrutustabeli_pesa" ).appendChild( br ); // lisame reavahetuse lehele
  }

  function v2rvi( value ) { // värvime elemendid, mis jaguvad numbrilga, millel kasutaja klikkis
    for( i = 0; i< document.korrutustabeli_vorm.getElementsByTagName("input").length; i++ )      // otsime üles elemendid
      if ( document.korrutustabeli_vorm.getElementsByTagName("input")[i].value % value == 0 )    // kontrollime jagumist
        document.korrutustabeli_vorm.getElementsByTagName("input")[i].style.background = "#aaa"; // värvime teist värvi
  }
</script>

</body>
</html>


FrameWork

FrameWorke on mitmeid erinevaid ja erinevate suundadega. JavaScriptile lisafunktsioonide andmiseks on kolm suuremat Prototype, jQuery ja MooTools.

jQuery lubab DOMi (e. Document Object Model) poole pöörduda pisut lühemalt kui JavaScripti kirjutades. Oletame, et meil on html lehel selline element:

<div id="kast">Kasti sisu...</div>

Selle elemendi omaduste muutmiseks peame ta lehe sisust kätte saama.

Elemendile ligipääs

// JS
document.getElementById("kast")

// jQuery
$("#kast")

Elemendi parameetrite muutmine

Paneme elemendi raami sisse, paneme paika sisu kauguse lahtri servadest ja muudame taustavärvi:

// JS
document.getElementById("kast").style.border = "3px solid #333";
document.getElementById("kast").style.padding = "10px";
document.getElementById("kast").style.backgroundColor = "#e8e8e8";

// JS lühemalt
d = document.getElementById("kast").style
d.border = "3px solid #333";
d.padding = "10px";
d.backgroundColor = "#e8e8e8";

// jQuery
$("#kast").css({ border: "3px solid #333", background: "#e8e8e8", padding: "10px" });

FadeIn, FadeOut

Nüüd, proovime aga selle div elemendi ekraanilt sujuvalt ära kaotada (või ka tagasi tuua).

// JS
var TimeToFade = 1000.0;

function fade(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;
   
  if(element.FadeState == null)
  {
    if(element.style.opacity == null || element.style.opacity == '' || element.style.opacity == '1')
    {
      element.FadeState = 2;
    }
    else
    {
      element.FadeState = -2;
    }
  }
    
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  }  
}

function animateFade(lastTick, eid)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
  
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = ' 
        + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
  
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

fade('kast');

// jQuery
$('#kast').is(":visible") ? $('#kast').fadeOut() : $('#kast').fadeIn();

Lingid

http://math.ut.ee/~epuman/javascript.html

http://www.w3schools.com/JS/

http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation