JavaScript pradžiamokslis

Šiame straipsnyje išmoksime nuo pat pradžių naudotis JavaScript. Šiame straipsnyje yra pateiktas keletas paprastų, pradžiai suprantamų funkcijų, metodų, įvykių bei kaip juos panaudoti. Straipsnis skirtas pradedantiesiems, bet gal pravers ir labiau patyrusiems, juk visko žinoti neįmanoma. Tas gero skaitymo.

Kodo įkėlimas bei rašymas puslapyje

Pirmiausia peržvelkime žemiau pateiktą kodą:

<html>
   <head>
      <title>JavaScript pavyzdys</title>
      <script language="JavaScript">
          <!--
             document.write("Labas pasauli!");
          //-->
      </script>
   </head>
<body> Labas pasauli </body>
</html>

Paprastai JavaScript kodas prasideda nuo HTML gairių:

<script language="JavaScript">

ir baigiasi HTML uždarymo gaire:

</script>

kodas dažniausiai būna įteptas tarp šių HTML gairių:

<head> ir </head>

Bet žinoma galima įterpti kodą ir į <body> HTML gairę.:

<html>
    <head></head>
<body>
    <script>
      .....// Vykdomas JavaScript kodas.
     </script>
</body>
</html>

Turbūt pastebėjote kad mes pateikėme kodą tarp komentaro eilučių:

<!-- ir //-->

Tai naudojama tam kad JavaScript nebūtų rodomas senosioms naršyklėms kurios nenaudojo tuomet JavaScript. Tai žinoma nėra privaloma, bet patartina. Taipogi HTML gairės atributas language nėra privalomas, bet patartina jį naudoti. Taipogi galite nurodyti ir iki kurios versijos naudoti JavaScript programavimo kalbą. Šiuo metu naujausia versija yra JavaScript1.8 Pakeisti JavaScript versiją galite pridėdami prie language HTML gairės atributo vieną kintamąjį:

<script language="JavaScript1.2">

Taipogi kad neteršiant viso HTML kodo su didelės apimties JavaScript kodu, galite jį įkelti į atskirą failą ir pavadinti kaip norite bet galūnė turi būti *.js. Mūsų atveju mes tariamai susikuriame JavaScript failą su pavadinimu testas.js ir įtraukiame jį:

<script language="JavaScript" src="testas.js"></script>

Toliau pateiktas pavyzdys kas būtų parašyta testas.js faile:

document.write("Hello World!")

Teksto išvedimas puslapyje

Teksto išvedimui dažniausiai naudojami du metodai. Tai:

write
writeln

Taigi norėdami išvesti tekstą naudokite write() arba writeln(). Štai pavyzdys:

<HTML>
   <HEAD>
      <TITLE>Sveiki atvykę į mano JavaScript pasaulį</TITLE>
   </HEAD>
<BODY>
   <SCRIPT LANGUAGE="JAVASCRIPT">
    <!--
        document.write("Sveiki atvykę į mano JavaScript pasaulį!");
    // -->
   </SCRIPT>
</BODY>
</HTML>

Įspėjimas: Prisimikite visuomet kad JavaScript metodus, parametrus, ir beveik visa kita kas susiję JavaScript programavimu yra „lygiai toks pat kaip ir turi būti“ (CaseSensitive). Tarkim, jeigu jūs turite metodą: write() Jūs negalėsite rašyti jo kaip: Write() ar WRite(), jis jei nustatytas mažosiomis raidėmis, mažosiomis ir turite rašyti. Pastaba: write() nuo writeln() skiriasi tik tuo kad, write() rašo norimą tekstą į vieną eilutę, o writeln() rašo tekstą į vieną eilutę, ir gale teksto sukuria naują eilutę.

Document objektas

document objektas vienas svarbiausių JavaScript kalboje. Žemiau pateiktas labai paprastas kodas:

document.write("Labutis.")

Pateiktame kode, document tai ir yra objektas. write tai metodas nurodyto objekto.
Peržvelkime keletą kitokiu document objekto metodų:

lastModified

Jūs galite visuomet pridėti šią dalį kuri parodys kada paskutinį kartą buvo jūsų puslapis atnaujintas.

<script language="JavaScript">
document.write("Puslapis sukurtas CodeRS. Paskutinis atnaujinimas:" + document.lastModified);
</script>

Ką jums tereikia nurodyti tai tik lastModified metodą, document objektui. Atkreipkite dėmėsį į tai kaip sujungtas paprastas tekstas su pridedamu iš JavaScript tekstu. Jie sudedami pliuso ženklu (+).

bgColor ir fgColor

Pažaiskime truputį su spalvomis:

<script>
document.bgColor="black"
document.fgColor="#336699"
</script>

Pranešimų langai

Šiuo metu egzistuoja 3 pranešimo langai. Truputis informacijos apie kiekvieną iš jų:

alert

<body>
<script>
window.alert("Sveiki atvykę į mano puslapį!")
</script>
</body>

Jūs galite įvesti ką tik norite tarp kablelių (“)

confirm

window.confirm("Ar tikrai norite išeiti?")

Šis pranešimo langas išmes jums du mygtukus „OK“ ir „Cancel“

prompt

Šis pranešimas naudojamas tuomet kai norime kad vartotojas ką nors įvestu į pranešimų langą:

window.prompt("Įveskite savo vardą:")

Visuose pavyzdžiuose mes naudojome window objektą su nurodytu metodu, bet galima ir naudoti tiesiogiai be objekto šiuos pranešimo langus:

alert()
confirm()
prompt()

Kintamieji ir sąlygos sąkiniai

Peržvelkime pavyzdį:

<script>
var x = window.confirm("Ar tikrai norite išeiti?")
 
if (x)
    window.alert("Ačiū.")
else
    window.alert("Ate.")
</script>

Čia yra keletas dalykų kuriuos mums reikėtų įsidėmėti. Pirmiausia tai kad vvar x= yra nustatomas laikinas kintamasis. Jeigu jūs norite sukurti kintamąjį tuomet jums reikia naudoti:

var kintamasis = priskyrimas

Mūsų atveju x gauną nustatytą reikšmę iš window.confirm metodo. confirm grąžina TRUE arba FALSE.
Taigi toliau panaudosime sužinoti ką vartotojas paspaudė panaudodami sąlygos sąkinį if … else. Primename kad TRUE grąžinamas tuomet kai vartotojas paspaudžia mygtuką „OK“, ir jeigu paspaudžia Cancel mums kintamasis nusistatys FALSE. Taigi kode matyti kad tikrinamas x kintamasis. sąlygos sakinio dalis if aktyvuojasi tik tada kai kintamojo reikšmė priskirtą TRUE arba atitinką pateiktą sąlygą. Jei sąlyga neatitinka, arba kintamasis nustatytas ne TRUE tuomet vykdoma else dalis praleidžiant viską kas yra if dalyje. Žemiau pateiktas kodas parodo kaip nustatyti vartotojo įvestą tekstą:

<script>
var y = window.prompt("Ėveskite savo vardą")
window.alert(y)
</script>

Kitas pavyzdys:

<html><head>
<script>
var x=confirm("Ar tikrai norite išeiti?")
if (!x)
	window.location="http://www.google.lt"
</script>
</head>
<body>
Sveiki atvykę į mano puslapį!.
</body></html>

Jeigu jūs paspausite mygtuką Cancel jūs būsite perkeltas į Google puslapį. Šauktukas (!) prirašytas if sąlygoje reiškia kad jei kintamasis nėra true tuomet vykdomas kodas.

Funkcijos

Funkcijos skirtos palengvinti darbą pačiam programuotojui, kad nereikėtų kiekvieną kartą aprašinėti vis tų pačių metodų galime susikurti vieną bendrą funkciją:

function testas() {
   document.write("Labas. Matai mane?")
}

Primename kad funkcija pati negalite savęs išsikviesti taigi tenką panaudoti kokį nors įvykį ar pačiame scripto žemiau parašyti funkcijos pavadinimą kuri „sužadintų“ funkciją:

function testas() {
   document.write("Labas. Matai mane?")
}
testas()

Paskutinėje eilutėje mes „sužadiname“ funkciją kuri į ekraną išves tekstą: Labas. Matai mane?

Įvykiai

Kas yra įvykiai? Įvykiai JavaScript kalboje naudojami tuomet kai kas nors atsitinka, panašiai kaip: vartotojas paspaudžia mygtuką, užveda pele ant nustatyto objekto, paspaudžia norint pateikti formoje esančius duomenis ir panašiai.

onClick

onClick įvykis vykdomas tuomet kai vartotojas paspaudžia mygtuką, nuorodą ar panašiai. Peržvelkime pavyzdį:

<script>
function ss() {
alert("Ačiū!")
}
</script>
<form>
<input type="button" value="Paspausk" onclick="ss()">
</form>

JavaScript funkcija ss() sužadinama tuomet kai paspaudžiamas mygtukas formoje. Kaip pastebėjote įvykis onClick nėra įtrauktas į HTMl gaires <script> bet yra vykdomas kaip JavaScript kodas.

onLoad

onLoad įvykis naudojamas tuomet kai norime kad kodas vykdytų ką nors prie užkraunant puslapį:

<body onload="ss()">
<frameset onload="ss()">
<img src="paveiksliukas.gif" onload="ss()">

onMouseover,onMouseout

Šie abu įvykiai dažniausiai naudojami nuorodoms pagrąžinti ar pateikti kokią informaciją.

<a href="#" onMouseOver="document.write('Labas!')">Užveskite pelę!</a>
<a href="#" onMouseOut="alert('Šaunu')">Nuveskite pelę!</a>

onUnload

onUnload įvykis sužadinamas tuomet kai kas nors bando palikti puslapį kuriame aprašytas šis įvykis. Pavyzdys:

<body onunload="alert('Ačiū kad apsilankėte. Iki greito')">

Vienu kartu keletas funkcijų

Vienu kartu aprašant įvykį galite pateiki keletą metodų ar funkcijų. Žemiau pateiktas pavyzdys kaip tai galite atlikti:

<form>
<input type="button" value="Paspausk!" onClick="alert('Ačiū kad aplankėte mūsų puslapį!');window.location='http://www.google.lt'">
</form>

Nuorodos

Su JavaScript galime atlikti daug puikių dalykų, kad ir patektuose pavyzdžiuose:

<a href="JavaScript:window.location.reload()">Paspauskite atnaujinant puslapį!</a>

Keletas kitų pavyzdžių:

<a href="#" onClick="alert('Labas pasauli!')">Paspauskite norint pamatyti tekstą</a><br>
 
<a href="#" onMouseOver="location='pagrindinis.htm'">Užveskite pelę pamatyti pagrindinį puslapį</a>

Data