IZBORNIK HOME FORUM ACCESS EXCEL WORD KAZALO
   
  Kazalo - sadržaj tema
  Uvod u JavaScript
1 Načini ispisa
2 Kontrola prozora
2a Sintaxa
3 Kontrola događaja
3a Kontrola toka
4 Detekcija podataka
5 Efekti s podlogom
6 Efekti s tekstom
7 Efekti sa slikom
8 Razna rješenja
9 Rad s formama
10 Razni primjeri
11 Ključne riječi
12 Događaji
   
AutoCAD tutoriali

-

-
 

Adsense sponzor



JS - JAVA SCRIPT za početnike i neznalice - JAVA SCRIPT for dummies

JS - KONTROLA DOGAĐAJA

Search This Web Site

Adsense sponzor






onClick - KLIK MIŠA NA OBJEKTU

Nad nekim objektima možemo kontrolirati događaje kako što su klik miša (onClick), prijelaz miša preko objekta (onMouseOver), kretanje miša izvan objekta (onMouseOut), i druge.
Evo primjera kako možemo kontrolirati onClick događaj unutar <A HREF...> i unutar <INPUT...>:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    function
dajPoruku1() {
        ime = prompt("Upišite svoje ime:","Vaše ime je ?")
        alert("Bok, " + ime)
        return false;
    }
    function
dajPoruku2() {
        alert("Ovo je dijalog ALERT!")
    }
    -->
</SCRIPT>
</HEAD>

<BODY>
Evo nekoliko načina uporabe onClick:
<HR>
Klikom
<A HREF="" onClick="return dajPoruku1()">ovdje</A> otvarate PROMPT i potom ALERT dijalog!
<BR><BR>
Kliknite na gumb
<INPUT TYPE="button" VALUE="Dijalog ALERT!" onClick="dajPoruku2()">
<BR><BR>
Klikom
<A HREF="JavaScript:dajPoruku2()">ovdje</A> otvarate ALERT dijalog!
</BODY>
</HTML>

U prilogu js-vje3a.html imate izdvojen ovaj kod pa malo kombinirajte...


onMouseOver i onMouseOut - PRIJELAZ MIŠA PREKO I IZVAN OBJEKTA

Ako uzmemo u obzir da objektima možemo dodijeliti imena (NAME="...") i ako malo pustimo mašti na volju, ove događaje možemo iskoristiti za izradu efektnih izbornika. Evo jednog primjera:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    if (document.images) {
        gumb1On = new Image();

        gumb1On.src = "
js-glnk1.gif"; /* slika za prvi gumb - kada je aktivan */
        gumb1Off = new Image();
        gumb1Off.src = "
js-glnk2.gif";  /* slika za prvi gumb - kada je neaktivan */
        gumb2On = new Image();
        gumb2On.src = "
js-gzab1.gif"; /* slika za drugi gumb - kada je aktivan */
        gumb2Off = new Image();
        gumb2Off.src = "
js-gzab2.gif"; /* slika za drugi gumb - kada je neaktivan */
    }
    function
slikaAktivna(imeSlike) { /* "prekidač" za postavku "aktivne" slike */
        if (document.images) {
            document[
imeSlike].src = eval(imeSlike + "On.src");
        }
    }
    function
slikaNeaktivna(imeSlike){
/* "prekidač" za postavku "neaktivne" slike */
        if (document.images) {
            document[
imeSlike].src = eval(imeSlike + "Off.src");
        }
    }
    // -->
</SCRIPT>
</HEAD>

<BODY>
<!-- definiranje prvog gumba -->
<A HREF="javascript:alert('Izbor LIKOVA!')"
onMouseOver="slikaAktivna('gumb1')" onMouseOut="slikaNeaktivna('gumb1')">
<IMG SRC="
js-glnk2.gif" ALT="Izbor linkova" border="0" NAME="gumb1" WIDTH="100" HEIGHT="20"></A>
<BR><BR>
<!-- definiranje drugog gumba -->
<A HREF="javascript:alert('Izbor ZABAVE!')"
onMouseOver="slikaAktivna('gumb2')" onMouseOut="slikaNeaktivna('gumb2')">
<IMG SRC="
js-gzab2.gif" ALT="Izbor zabave" border="0" NAME="gumb2" WIDTH="100" HEIGHT="20"></A>
</BODY>
</HTML>

U prilogu js-vje3b.hml možete vidjeti kako ovaj kod funkcionira i pokušati sami nešto iskombinirati...


TimeOUT - VREMENSKA ZADRŠKA

Zatreba li nam vremenska zadrška u programu, rješenje je jednostavno:

<HTML>
<HEAD></HEAD>
<BODY>
Ovo je primjer vremenske zadrške.<BR><BR>
Nakon 10 sekundi će se pojaviti ALERT dijalog!<BR><BR>
Pričekajte...
<SCRIPT>
  
setTimeout("alert('Evo me!')",5000); /*čeka 5 sekundi i tada pokreće Alert*/
</SCRIPT>
</BODY>
</HTML>

Gornji primjer ispisuje navedeni tekst u dokument i zatim čeka 5 sekundi, nakon čega pokreće alert dijalog.
Na isti način, umjesto alerta, možete postaviti link na neku stranicu, pozvati neku svoju funkciju i slično.

          U prilogu js-vje3c.html možete vidjeti kako gornji primjer funkcionira ...


history.back() i history.forward() - KONTROLA HISTORY

Ovim funkcijama možemo ostvariti programsku kontrolu History u browseru, odnosno kontrolu gumba Back i Forward.
Kako ovu kontrolu izvesti u praksi, možete vidjeti u donjem primjeru:

<HTML>
<HEAD></HEAD>
<BODY>
Primjer kontrole HISTORY (programsko rješenje gumba BACK/FORWARD)<BR>
<HR>
<FORM>
<INPUT TYPE="button" VALUE="Nazad/Back"
onClick="history.back()">
<INPUT TYPE="button" VALUE="Naprijed/Forward"
onClick="history.forward()">
</FORM>
</BODY>
</HTML>

Ako želite točno definirati za koliko stranica da se pomjerite u history naprijed ili nazad, možete koristiti i slijedeću sintaksu: history.go(-1) i history.go(1),

Također pogledajte primjere Kontrole toka i iskaza

         U prilogu js-vje3d.html imate kod gornjeg primjera...

Adsense sponzor






 Ova web stranica koristi COOKIES - COPYRIGHT - 2006 - 2016 - IvanC - ic.ims.hr