Javascript - úvod

Čo sa skrýva za slovom Javascript?

JavaScript je skriptovací programovací jazyk !

Javascript nenahradzuje žiadne počítačové jazyky, ani nie je konečným nástrojom. Skôr ho možno považovať za jazyk internetový. Javascript je jazyk jednoduchý, ale zároveň dosť účinný. Rozširuje možnosti HTML pridaním interaktivity.

Niečo viac o JavaScripte

JavaScript ( ďalej iba JS ) je objektovo-orientovaný skriptovací jazyk, ktorého kód je vložený do HTML súboru. Vyvinul sa z JAVY zjednodušením niektorých jej tried ( Math, Date, String ), ale neumožňuje prácu s grafikou, zvukom na rozdiel od bohatej ponuky JAVY v balíkoch AWT.

V takomto prípade ale JS dokáže manipulovať s vloženými objektami ako sú applety, komponenty ActiveX...

Program JS sa spúšťa priamo na užívateľskom počítači ( nie na serveri ! ), čo má obrovské výhody v rýchlosti spracovania programu. Napríklad pri spracovaní formulárov pomocou JS napíšeme jednoduchý program, ktorý rýchlo spracuje vstupné hodnoty zadané užívateľom, prípadne zapíše výsledok. Ak formulár spracúva server niektorým z programov cgi-bin ( napríklad CGI, Perl, C++ ), užívateľ čaká na dvojitý prenos dát po internete ( od užívateľa k serveru a späť ), čo pri priepustnosti liniek nie je zanedbatelné.

Prehliadač musí vedieť interpretovať a previesť skript, čiže program v JavaScripte, vložený do HTML dokumentu. 

JS je podporovaný prehliadačmi Netscape, Internet Explorer a Opera.

Aby prehliadač skript nevypisoval, vkladá sa do tagu komentára na ľubovoľnom mieste v HTML súbore ( Skript s deklaráciou funkcií sa vkladá do hlavičky HTML súboru. ):

Skripty sa dajú rozdeliť do dvoch skupín:

   1. Skripty, ktoré sa spustia iba raz, obyčajne po načítaní dokumentu.

       Sú ohraničené elementom <SCRIPT>.

   2. Skripty spúšťané udalosťami, ktoré nastanú spônením istých

       podmienok napr. ak myš umiestnime na ošetrený text, obrázok,

       alebo stlačíme nejaký gombík...

Čo sú udalosti ?

Umiestnite myš na tento text !

Príklad na vyvolanie udalosti:

<FONT onmouseover="JavaScript:this.style.color='#00DD00'"

onmouseout="JavaScript:this.style.color='#CC00CC'" size=+2><I>

Umiestnite myš na tento text !</I>

</FONT>

>K jeho dosiahnutiu sú použité dve udalosti : OnMouseOver a OnMouseOut.

Ovládač OnMouseOver sa aplikuje, ak myš umiestnime na zadaný text, OnMouseOut sa aplikuje ,ak myš daný text opustí. ( Slovíčko this označuje objekt, na ktorý sa ovládač vzťahuje - v našom prípade je to text.)

Dalšie najčastejšie používané udalosti sú :

OnMouseDown=skript

- udalosť nastane, ak je nad daným objektom stlačené ľavé tlačítko myši

OnMouseUp=skript

- udalosť nastane, ak sa nad daným objektom ľavé tlačítko myši uvoľní

OnClick=skript

- udalosť nastane, ak sa nad daným objektom klikne ľavým tlačítkom myši

OnDblClick=skript

- udalosť nastane, ak sa nad daným objektom vykoná dvojitý klik ľavým tlačítkom myši

OnLoad (OnUnLoad)=skript

- udalosť nastane po načítaní ( ukončení zobrazenia ) celého okna.

Príklad 1:

Prvý príklad je jednoduchý Java script. Do vstupného okienka napíšte svoje meno a skript vás pozdraví. Navyše skript vytvorí aj gombík, ktorého stlačenie vyvolá jednoduchú funkciu.

<!--

function zadajmeno(meno){

alert("AHOJ "+ meno+" !");

}

<TABLE width="90%" align=center bgColor=#ff8c8c frame=none>

<TBODY>

<TR>

<TD>&nbsp;</TD></TR>

<TR>

<TD align=middle><B>Zadajte svoje meno :

<INPUT

onblur=zadajmeno(this.value) name=meno>&nbsp;&nbsp;<INPUT onclick=netlac();

type=button value="Stlač ma">&nbsp;&nbsp;

</B></TD></TR>

<TR>

<TD>&nbsp;</TD></TR></TBODY></TABLE><BR>

Tento jadnoduchý príklad využíva dve funkcie, deklarované v hlavičke HTML. V oboch sa volá preddefinovaná metóda JS alert(), ktorá zobrazí výstražné okno so zvoleným textom a tlačítkom OK.

Vo vstupnom formulári sú použité dve udalosti:

OnBlur - volá funkciu ZADAJMENO po opustení vstupného okienka formulára

OnClick - volá funkciu NETLAC po kliknutí tlačítka, vytvoreného formulárom

Príklad druhý

Druhý príklad demonštruje prácu so stavovým riadkom a dátumom v JavaScripte. Po stlačení tlačítok sa buď zapíše text do stavového riadku, alebo sa daný text zmaže, alebo sa objaví výstražné okno s aktuálnym dátumom.

function zapis(){

window.status=(" TOTO JE STAVOVÝ RIADOK ! " );

}

function zmaz(){

window.status="";

}

function datum(){

var dnes = new Date();

var mesiac = dnes.getMonth();

var d = dnes.getDay();

mesiac++;

if (d==0){den="nedela"}

if (d==1){den="pondelok"}

if (d==2){den="utorok"}

if (d==3){den="streda"}

if (d==4){den="štvrtok"}

if (d==5){den="piatok"}

if (d==6){den="sobota"}

alert("Dnes je "+den+""+dnes.getDate()+"."+mesiac+"."+dnes.getYear());

}

*****

<INPUT onclick=zapis() type=button value=" Zapíš " name=gombik1>

&nbsp;&nbsp;&nbsp;&nbsp; <INPUT onclick=zmaz() type=button value=" Zmaž "

name=gombik2>

&nbsp;&nbsp;&nbsp;&nbsp; <INPUT onclick=datum() type=button value=" Dátum "

name=gombik3>

Tento jednoduchý príklad využíva tri funkcie, deklarované v hlavičke HTML súboru. V dvoch sa volá preddefinovaná metóda JS window.status(), ktorá zobrazí zadaný text v stavovom riadku. V tretej funkcii sú volané preddefinované metódy pre prácu s dátumom a časom triedy Date.

Vo vstupnom formulári je použitá udalosťOnClick pre každý gombík, ktorá volá odpovedajúce funkcie ZAPIS , ZMAZ a DATUM po kliknutí tlačítka, vytvoreného formulárom

Príklad tretí

Tretí príklad vysvetľuje možnosti volania ďalšieho okna v JavaScripte. S takýmto volaním ste sa stretli v predošlých príkladoch pri zobrazení ich zdrojových kódov. V našej ukážke sa otvorí nové okno, v ktorom sa vypíšu faktoriály čísel od 1 až do zadanej hodnoty.

function OtvorOkno(form) {

okno=open("","nove","SCROLLBARS=yes, WIDTH=500, HEIGHT=300, TOP=200, LEFT=200");

okno.document.write("<B><FONT SIZE=+1>TABULKA FAKTORIÁLOV:</FONT></B><BR>");

var n=20;

if (form.hranica.value>0 && form.hranica.value<101) {

n=form.hranica.value};

for (var i=1, f=1; i<=n; i++, f *=i)

{okno.document.write(i+"! = "+f+"<BR>");}

}

****

<FORM>

<TABLE width="90%" align=center bgColor=#ff8c8c frame=none>

<TBODY>

<TR>

<TD colSpan=2>&nbsp;</TD></TR>

<TR>

<TD align=right><B>Zadaj celé číslo od 1 do 100</B>:</TD>

<TD><INPUT name=hranica></TD>

<TD><INPUT type=reset value=" Zmaž " name=Clear></TD>

<TD><INPUT onclick=OtvorOkno(this.form) type=button value=" FAKTORIÁL "

name=gombik></TD></TR>

<TR>

<TD colSpan=2>&nbsp;</TD></TR></TBODY></TABLE>

</FORM>

skripte je využitá metóda open objektu window s nasledujúcimi parametrami:

window.open ( "URL" , "meno" , "vlastnosti" )

URL je názov html dokumentu zobrazeného v novom okne (ak URL chýba, otvorí sa prázdne okno, do ktorého môžeme zapisovať pomocou metódy dokument.write a tagov HTML ). Ďalšie úvodzovky špecifikujú meno nového okna. Posledné úvodzovky udávajú vlastnosti okna. V našom príklade sú použité: SCROOLBARS=yes/no- zobrazenie skrolovacích štvorcov WIDTH=z- z=šírka okna HEIGHT=z- z=výška okna TOP=x- x-ová súradnica okna LEFT=y- y-ová súradnica okna

To by bolo k príkladom z jsc dost.