Java a JavaScript

Programovací jazyk Java

Čo je Java, prečo a ako vznikla ?

Firma Sun Microsystem vyvinula v rokoch 1990-92 v rámci projektu First Person jazyk OAK pre interaktívny radič PDA (Portable Data Assistant), určený k programovaniu spotrebnej elektroniky a interaktívnych služieb prostredníctvom rozvodov kábelovej televízie. S prudkým nástupom Internetu firma Sun pozmenila pôvodné smerovanie projektu a prispôsobila jazyk OAK prostrediu Internetu. Predstavila ho verejnosti v roku 1995 už pod novým menom Java.

Java je objektovo orientovaný programovací jazyk podobný jazyku C++ (nakoľko má oproti nemu viacero obmedzení, niekedy býva označovaný položartom ako C++ --). Java bola navrhnutá tak, aby bola ľahko prenositeľná na rôzne počítačové platformy. Na rozdiel od C++ sa v prípade Javy zdrojový text kompiluje do strojovo nezávislého, veľmi efektívneho bajtového kódu. Ten sa potom interpretuje prostredníctvom modulu JVM (Java Virtual Machine) na ľubovoľnej počítačovej platforme, podporujúcej tzv. Java-runtime, (Windows 95/NT 4.0, Sun OS 4.1, Sun Solaris 2.4, a.i.). Javovské programy tak môžu byť prostredníctvom Internetu presúvané z jedného počítačového systému na druhý bez akejkoľvek transformácie a bez akéhokoľvek zásahu používateľa.

Pri návrhu jazyka bol kladený dôraz na bezpečnosť. Preto ešte pred spustením bajtového kódu je preverená jeho syntax, čím je vylúčené spadnutie programu spôsobené poškodeným kódom. Javovský program nemá prístup ani k lokálnym programom, ani k lokálnym zdrojom, čo podľa jeho tvorcov vylučuje nebezpečenstvo javovských vírusov.

Firma Sun predstavila na CeBIT 96 lacný počítač Java station bez pevného disku, ktorý si potrebné programové vybavenie stiahne v podobe javovských programov do pamäte priamo z Internetu alebo z lokálneho Intranetu. Firma Oracle tiež vyvinula svoju architektúru sieťového počítača a nazvala ju NCA (Network Computing Architecture). V súvislosti s tým sa pre spomínané lacné sieťové počítače ujíma aj označenie NC (Network Computer).

Zdá sa, že Java má budúcnosť: na integrácii Javy do svojich produktov pracujú firmy ako IBM (OS/2 a AIX), Lotus Development v rámci IBM (Lotus Notes), Oracle (Power-Browser), Informix. Vývojárske nástroje pripravili okrem firmy Sun (Java Developmnet Kit - http://www.javasoft.com ) už aj Microsoft (Visual++), Symantec (Espresso - http://www.symantec.com ), Borland (Latté - http://www.borland.com ) a ďalšie.

JavaWorld je raz mesačne 'vychádzajúci' elektronický časopis s množstvom zaujímavých informácií o Jave a jej aplikáciách, ktorý nájdem na adrese

http://www.javaworld.com.

Ďalšou užitočnou javovskou adresou je

http://www.digitalfocus.com/digitalfocus/faq/index.htm.

Java programy

Základným pojmom v Jave je objekt, obsahujúci atribúty (údajové zložky) a metódy (funkčné zložky). Ďalším kľúčovým pojmom je trieda, predstavujúca abstraktný vzor, či šablónu na vytváranie konkrétnych objektov. Trieda definuje, aké má mať objekt atribúty a metódy. Akákoľvek manipulácia s atribútmi objektov je možná iba prostredníctvom ich metód. Medzi jednotlivými triedami je definované rozhranie, určujúce kto všetko má k atribútom a metódam danej triedy prístup. Triedy vytvárajú hierarchickú štruktúru. Z každej triedy môžem odvodiť podtriedu, ktorá od rodičovskej triedy zdedí jej atribúty a metódy.

Štandardné knižnice jazyka Java obsahujú bohatú škálu preddefinovaných tried. Môj vlastný javovský program bude obsahovať definície podtried, odvodených z knižničných tried, definície konkrétnych objektov a väzieb medzi nimi.

Java podporuje tzv. multithreading - paralelné vykonávanie rôznych častí programu. Príslušné prostriedky pre vytvorenie 'threadu', pre pridelenie priority (ovládajúce prideľovanie času), atď. sú k dispozícii v triede Thread.

Javovské programy možno rozdeliť do dvoch kategórií: Java applety a samostatné javovské programy. Java applety sú hotové programové moduly, ktoré môžem jednoduchým spôsobom zaradiť na svoju webovskú stránku prakticky aj bez akejkoľvek znalosti jazyka Java. O ich vykonanie sa stará webovský prehliadač. Programy druhej kategórie sú úplne samostatné a nepotrebujú k svojej činnosti webovský prehliadač. Napríklad samotný prehliadač HotJava firmy Sun je napísaný v jazyku Java. Na adrese winikoff@cs.mu.oz.au alebo http://www.cs.mu.oz.au/ ~winikoff/wp/ môžem nájsť interpret jazyka Prolog, napísaný v Jave.

Java applety

Applet zaradím do svojej webovskej stránky pomocou párového príkazu <APPLET>. Príkaz má povinné parametre CODE (absolútna/relatívna URL adresa bajtového kódu appletu), WIDTH a HEIGHT (šírka a výška výrezu okna, v ktorom applet pobeží - udávam ho v bodoch). Ďalšie parametre sú nepovinné. V parametri CODEBASE môžem zadať bázovú URL adresu, ku ktorej sa potom vzťahujú všetky relatívne odkazy v applete. Parameter ALIGN udáva polohu appletu vzhľadom k okolitému textu (môže mať hodnoty TOP, MIDDLE, BOTTOM, LEFT a RIGHT s rovnakým významom, ako u obrázkov - pozri Aká je poloha obrázkov vzhľadom na okolitý svet). Parametrami VSPACE a HSPACE môžem vytvoriť voľný priestor okolo appletu.

Niektoré applety sú jednoúčelové a pri ich zaradení do svojej webovskej stránky nemusím ich činnosť nijako bližšie špecifikovať. Častejší je ale prípad univerzálnejších appletov, ktorých činnosť môžem prispôsobiť svojim požiadavkám pomocou parametrov appletu. Parametre appletu uvádzam v tele príkazu <APPLET> pomocou príkazov <PARAM>. Každý z týchto príkazov má dva parametre - NAME (udáva meno parametra appletu) a VALUE (udáva hodnotu tohoto parametra appletu - môže ňou byť číslo alebo reťazec znakov v úvodzovkách).

Webovské prehliadače ignorujú neznáme príkazy. Keď zaradím do tela príkazu <APPLET> nejaký text mimo tela príkazov <PARAM>, bude ho prehliadač interpretujúci Javu ignorovať. Prehliadač, ktorý Javu interpretovať nevie sa zachová presne naopak: zobrazí iba tento text. To využijem na vytvorenie alternatívneho textu, ktorý urobí moju webovskú stránku zrozumiteľnou aj používateľovi 'nejavovského' prehliadača.

Keď navrhujem interaktívnu webovskú stránku používajúcu applety, musím si uvedomiť, že applety vyžadujú stiahnutie nielen údajových súborov ale aj množstva súborov grafických a zvukových. Súčasné prehliadače nadväzujú pri stiahnutí každého súboru spojenie so 'zdrojovým' počítačom vždy znova a znova, čo môže značne spomaliť odozvu na strane klienta. Preto je výhodnejšie mať všetky potrebné súbory na svojom servri a nevyžadovať ich opakované sťahovanie pri každej aktivácii appletu z nejakého vzdialeného zdroja. Naviac je vhodné použiť applet, ktorý vie rozobrať jednotlivé elementy dokumentu (napr. obrázky tvoriace animáciu) spojené do jedného súboru.

Na čo môžem použiť applety a kde ich nájdem ?

• cyklicky sa meniaci text vo vodorovnom okne,
• reklamná tabuľa - analógia jednoriadkových svetelných reklám s textom pohybujúcim sa v rôznych smeroch, so zmenou farieb a ďalšími efektmi,
• roztrasený text - jednotlivé písmená textu menia nezávisle na sebe nepravidelne svoju polohu,
• animovaný obrázok - sekvencia obrázkov sa strieda, vyvoláva dojem pohybu,
• ubiehajúci panoramatický obrázok vo vodorovnom okne,
• pri aktivácii stránky sa štartuje zvuková nahrávka (hovorené slovo, hudobný motív, zvukový efekt).

• tlačidlá s textom - odkazy na iné dokumenty môžem aktivovať kliknutím na príslušné tlačidlo (niekedy aj s odlíšením troch stavov - kurzor je mimo, kurzor je nad tlačidlom a kliknuté na tlačidlo - napríklad pomocou zmeny jasu),
• tlačidlá s obrázkami - analogické tlačidlám s textom, len rozlíšenie stavov signalizuje zmena obrázku (pozri Ako zaradím aplet na svoju webovskú stránku),
• kontextovo senzitívna nápoveď - keď sa s myšou nastavím na nejaký grafický odkaz, objaví sa vedľa neho dočasné okienko s vysvetľujúcim textom,
• kompletný návrh grafického okna s pozadím, tlačidlami, grafickými odkazmi,
• všetky uvedené funkcie je obvykle možné doplniť o zvukovú nahrávku (hovorené slovo, hudobný motív, zvukový efekt).

• hodiny aktuálneho miestneho času,
• kalkulačku,
• jednoduchý tabuľkový procesor,
• zobrazovanie tabelárnych údajov stĺpcovými alebo čiarovými grafmi.

• vývoj počasia pre USA - http://cirrus.sprl.umich.edu/javaweather/
• Fourierova analýza - http://www.orbital.co.uk/fft/fft.htm
• simulátor hry života - http://www.cs.jhu.edu/~callahan/patterns/javalife.htm
• simulátor jadrovej elektrárne - http://www.ida.liu.se/~her/npp/demo.htm

Ako zaradím applet na svoju webovskú stránku ?

Použijem dve animované tlačidlá v ľavom rámci na zmenu obsahu pravého rámca. V hlavnom dokumente aphlav.htm definujem tieto rámce:

<FRAMESET COLS="120,*" >
<FRAME SRC="apcall.htm">
<FRAME SRC="aptxt1.htm" NAME="F_TEXT">
</FRAMESET>

V dokumentoch aptxt1.htm a aptxt2.htm uvediem príslušné texty. Applet je volaný dvakrát z dokumentu apcall.htm. Prvé volanie má tvar:

<APPLET CODE="URLImageButton.class" WIDTH=34 HEIGHT=34>
<PARAM NAME="url" VALUE="aptxt1.htm">
<PARAM NAME="urlTargetFrame" VALUE=F_TEXT>
<PARAM NAME="urlDescription" VALUE="Pride zla sprava">
<PARAM NAME="buttonImage" VALUE="button.sad.gif">
<PARAM NAME="mouseOverImage" VALUE="button.sadi.gif">
<PARAM NAME="mouseDownImage" VALUE="button.lite.gif">
Vas prehliadac zial nepodporuje Javu
</APPLET>

Najprv zadám parametre príkazu <APPLET>: v parametri CODE je adresa bajtového kódu appletu. Rozmery appletu 34*34 (dané rozmerom obrázkov tlačidiel) uvediem ako hodnoty parametrov WIDTH a HEIGHT. Ďalej nasleduje definovanie parametrov appletu: v parametri url zadám URL adresu dokumentu, ktorý sa má zobraziť v rámci s menom F_TEXT (meno rámca so zadal v parametri urlTargetFrame). Hodnota parametra urlDescription predstavuje text, ktorý applet vypíše do stavového riadku, keď kurzor je nad obrázkom tlačidla. V ďalších troch parametroch zadám mená súborov obsahujúcich obrázky tlačidla v tomto poradí: kľudová poloha (kyslý úsmev), kurzor je nad tlačidlom (negatív predošlého obrázku) a nakoniec ľavé tlačidlo myši bolo stlačené (žiarovka). Text na konci appletu sa zobrazí iba prehliadačmi, ktoré nepodporujú Javu.

Analogicky nadefinujem v druhej časti dokumentu apcall.htm volanie appletu pre 'veselé' tlačidlo. Striedavým stláčaním oboch tlačidiel mením obsah pravého rámca.    

Skriptový jazyk JavaScript

• program v JavaScripte interpretuje priamo prehliadač na klientskom počítači (žiadny preklad do bajtového kódu ako v Jave),
• JavaScript nie je v pravom slova zmysle objektovo orientovaný - nepozná triedy ani dedičnosť; samotní autori ho označili ako 'jazyk založený na objektoch', nakoľko poskytuje sadu predpripravených rozšíriteľných objektov,
• v Jave sú objekty prepájané už v priebehu prekladu do bajtového kódu, kdežto v JavaScripte až za behu programu (prípadné chyby zistí až prehliadač),
• v JavaScripte nie je potrebná deklarácia premenných,
• programy v JavaScripte sú pomalšie ako javovské,
• celý zdrojový text programu v JavaScripte je obsiahnutý vo webovskom dokumente (v prípade jednoduchého programu to môže byť skôr výhoda), v prípade Javy je v dokumente iba príkaz volania appletu.

http://sophia.dtp.fmph.uniba.sk/~bendik/java.script/index.htm
http://rummelplatz.uni-mannheim.de/~skoch/js/script.htm

Ako vytvorím program v JavaScripte ?

<HEAD>
<TITLE>Prvy JavaScrip</TITLE>
<SCRIPT><!-- "komentar" zakryje skript
window.status = "Ahoj JavaSkript !!"
// koniec skriptu aj "komentara" -->
</SCRIPT>
</HEAD>
<BODY>
.......... tu je vlastný dokument
</BODY>

Pomocou JavaScriptu môžem zaradiť do svojej webovskej stránky niektoré automaticky aktualizované informácie. Pomocou nasledujúceho skriptu zobrazím čas poslednej zmeny stránky (umiestnim ho v texte dokumentu na miesto, kde požadujem výpis tejto informácie):

Posledna zmena dokumentu:
<SCRIPT>
document.write(document.lastModified)
</SCRIPT>

Pomocou ďalšieho skriptu môžem na svojej stránke zobraziť aktuálny čas a dátum:

<SCRIPT>
dnes = new Date();
document.write ("Teraz je ",dnes.getHours(),":",
dnes.getMinutes());
document.write (" dna ", dnes.getDate(),"/",
dnes.getMonth()+1,"/",dnes.getYear());
</SCRIPT>

Ako môžem dosiahnuť pohyb textu na obrazovke ?

<TITLE>Beha v stavovom riadku</TITLE>
<SCRIPT>
textik = "Nazdar JavaSkript !!";
Cakaj = 40;
for (i=0 ; i < 100 ; ++i) textik = " " + textik
function Behaj(od) {
if (++od > textik.length) od = 0;
vypis = textik.substring (od, textik.length);
cas = window.setTimeout ("Behaj (" + od + ");", Cakaj);
window.status = vypis; }
</SCRIPT>
</HEAD>
<BODY onLoad="Behaj( 0 )" onUnload="window.status=' '">
......... vlastný dokument
</BODY>

Na začiatku programu je cyklus, ktorý pred požadovaný text vloží sto medzier. Potom nasleduje definícia funkcie, ktorá posúva text (metóda setTimeout objektu window pozastaví vykonanie príkazu v prvom argumente na počet milisekúnd, uvedených v druhom argumente). V prvom argumente funkcie Behaj chcem mať hodnotu premennej od, preto musím tento argument poskladať z čiastkových reťazcov. Počet krokov cyklu posúvania je daný dĺžkou vypisovaného textu a vyvoláva sa stále znova. Prvé volanie funkcie Behaj je v tele príkazu <BODY>, ďalšie sú už rekurzívne. Pri prechode na iný dokument sa stavový riadok vyčistí. Použil som dva tzv. event handlery: onLoad (aktivuje sa pri natiahnutí dokumentu) a onUnload (aktivuje sa pri prechode na iný dokument).

Ako napíšem interaktívny JavaScript ?
Uvedené programy sa štartovali automaticky pri natiahnutí dokumentu. Keď chcem umožniť interaktívnu prácu s webovskou stránkou, použijem tzv. event handlery JavaScriptu, predstavujúce jeho skutočnú silu. Umožňujú reakcie programu na rôzne udalosti (posun kurzora na odkaz, kliknutie myšou, prechod na iný dokument, atď). Napríklad príkaz:

<A HREF="engdoc.htm"
onMouseOver="window.status='Anglicka verzia';
return true">
<IMG SRC="flagUK.gif" ALT="English"></A>

Spôsobí, že keď sa nastavím myšou na tento odkaz (na obrázok anglickej vlajky), v stavovom riadku sa namiesto URL adresy dokumentu engdoc.htm objaví text Anglická verzia. Toto jednoduché riešenie má nevýhodu, že text ostane v stavovom riadku aj keď odídem s myšou z odkazu. Keď v hlavičke dokumentu vytvorím skript:

<SCRIPT>
function mysNaOdkaz(text) {
window.status = text; setTimeout("zmaz()",2000); }
function zmaz() { window.status=""; }
</SCRIPT>

potom môžem odkaz na anglickú verziu upraviť nasledovne:

<A HREF="engdoc.htm"
onMouseOver="mysNaOdkaz('Anglicka verzia');return true">
<IMG SRC="flagUK.gif" ALT="English"></A>

Vďaka použitiu časovača setTimeout text po dvoch sekundách zmizne zo stavového riadku.

Ďalším príkladom interaktívneho dokumentu je formulár, v ktorého prvom poli zadám hodnotu výrazu a kliknutím na tlačidlo vyvolám funkciu pre výpočet hodnoty zadaného výrazu a jeho zobrazenie v druhom poli formulára. Pred vlastným výpočtom si skript vyžiada potvrdenie (príklad ďalšej interakcie):

<SCRIPT>
function vypocitaj(form) {
if (confirm("Skutocne ?"))
form.vysledok.value = eval(form.vyraz.value)
else
alert("Tak ahoj") }
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Zadaj vyraz:
<INPUT TYPE="text" NAME="vyraz" SIZE=15 >
<INPUT TYPE="button" VALUE="Vypocet" ONCLICK="vypocitaj(this.form)">
Vysledok:
<INPUT TYPE="text" NAME="vysledok" SIZE=15 >
</FORM>
</BODY>

Užitočnou aplikáciou interaktívneho skriptu je testovanie správnosti jednotlivých položiek formulára. V nasledujúcom príklade sa po natiahnutí dokumentu kurzor umiestni do vstupného poľa (aktivuje sa event handler onLoad a ten vyvolá metódu focus pre zadávanie adresy). Keď zadám adresu a prejdem do nasledujúceho vstupného poľa pre URL, aktivuje sa event handler onBlur a vyvolá test zadaného reťazca. Funkcia testAdresy v prípade, že reťazec je prázdny alebo ( || je logické OR) keď neobsahuje 'zavináč' @ otvorí chybové okno (metóda alert) a vráti kurzor späť do vstupného poľa s chybným údajom (metóda focus). Metóda indexOf hľadá v premennej form.adresa.value znak z prvého argumentu od pozície, uvedenej v druhom argumente a vracia pozíciu nájdeného znaku alebo -1, keď znak v reťazci nie je.

<HEAD><SCRIPT>
function testAdresy(form) {
if (form.adresa.value == "" || form.adresa.value.indexOf('@',0)== -1)
{ alert("Zadaj platnu e-mail addresu !!");
document.MojFormular.adresa.focus() ; } }
</SCRIPT></HEAD>
<BODY onLoad = "document.MojFormular.adresa.focus()">
<FORM NAME="MojFormular">
Zadaj e-mail addresu:
<INPUT TYPE="text" NAME="adresa" OnBlur="testAdresy(this.form)">
Zadaj URL: <INPUT TYPE="text" NAME="url" >
</FORM>
</BODY>

Ako môžem Javascript-om prepojiť rámce ?

<SCRIPT>
function natiahniDvaRamce(ramec1, ramec2) {
parent.F_TEXT.location.href=ramec1;
parent.F_AUTOR.location.href=ramec2; }
</SCRIPT>

V argumentoch ramec1 a ramec2 som definoval, do ktorých rámcov v danej hierarchii sa budú nové dokumenty vkladať. Keby som z nejakého dôvodu chcel zvoliť v druhom argumente rámec F_OBSAH, potom by jeho definícia mala tvar (oproti F_AUTOR je v hierarchii o jednu úroveň vyššie !!):

parent.parent.F_OBSAH.location.href=ramec2;

V tele dokumentu kap1t.htm uvediem v odkaze smerujúcom do iného dokumentu volanie funkcie natiahniDvaRamce :

....pozri kapitolu o
<a HREF="javascript:natiahniDvaRamce('kap4t.htm#nec',
'kap4a.htm')">necislovanych zoznamoch</A>....

Použil som pritom nový špeciálny protokol javascript:. Keď požijem tento protokol v rámci svojho dokumentu nasledovným spôsobom:

...<A HREF="javascript:">zadaj prikaz JavaScriptu</A>...

natiahne sa dokument, rozdelený na dva rámce a v spodnom je vstupné pole, označené javascript typein. Do tohoto poľa zapíšem príkaz JavaScriptu a ten sa okamžite vykoná.

Ako využijem cookie z JavaScript-u ?

<SCRIPT>
<!-- zaciname
document.write(document.cookie)
// koncime -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" NAME="vstup" SIZE=15
OnBlur="document.cookie=this.value" >
</FORM>