JavaScript tanfolyam

1. rész

Mielőtt belebonyolódnánk a részletekbe, nyomogassuk az alábbi nyomógombokat, és húzogassuk az egeret a táblázat elemei felett. Amit cselekedni fogunk az meglehetősen haszontalan, de annál látványosabb lesz. Egyike azon trükköknek, amit a JavaScript nyelv segítségével valósíthatunk meg. (A Navigator + Unix összeállításon dolgozóknak a refresh frame parancsot is használniuk kell.)

Zöld lesz a háttér, ha elhúzod felette az egeret. Piros lesz a háttér, ha elhúzod felette az egeret. Visszaáll az eredeti háttér, ha elhúzod felette az egeret.

A háttérszínek megváltoztatásához a következő három függvényt használtuk fel. (Ezek szerint a JavaScriptben lehet függvényeket definiálni.)

<script LANGUAGE="JavaScript">

function PirosHatter() {document.bgColor="#ff0000"}

function ZoldHatter() {document.bgColor="#00ff00"}

p>function EredetiHatter() {document.bgColor="#f8f4e0"}

</script>

Láthatjuk, hogy a függvényeket a <script></script> utasítások közé kell helyezni, a függvény definiálásához a function kulcsszót kell használni és ne felejtsük el a kapcsos zárójelet sem. (Aki C-ben programozott már, az nem fogja.)

A document az éppen aktuális dokumentumra (jelen esetben a frame tartalmára) utal. A document.*** azt jelenti, hogy a dokumentumunk valamilyen *** tulajdonságát, jelen esetben a háttérszínét kívánjuk megváltoztatni.

A document nevű objektumnak a következő tulajdonságait változtathatjuk meg hasonlóképpen:

alinkColor Az aktív linkek szine (active link)
bgColor Háttérszín
fgColor Előtérszín
linkColor A linkek szine
vlinkColor A már használt linek szine (visited link)

Nézzük meg, hogy pl. a piros nyomógomb esetén mi aktivizálja a függvényeket!

<FORM>
<INPUT TYPE="button" value="Piros háttér"
onclick="PirosHatter()">
</FORM>

Az onclick="PirosHatter()" azt jelenti, hogy klikkentés esetén a PirosHatter() függvény dolgozik.

Nézzük meg, hogy pl. a második esetben - az egérmozgatáskor - aktivizálja a függvényeket!

<a href="js1.htm#eleje" onmouseover="PirosHatter();return true">
Piros  lesz a háttér, ha elhúzod felette az egeret.</a>

Az onmouseover="PirosHatter();return true" azt jelenti, hogy az egér átmozdítása esetén a PirosHatter() függvény dolgozik.

hasonló módon lehet a bal oldalon alul található státuszmezőben szöveget elhelyezni.

Itt az ablak nevű objektum státuszmező nevű tulajdonságát kell átírni:


onMouseOver="window.status='Ez a státuszmezo';return true"

Megváltoztatja a státuszmezőt, ha elhúzod felette az egeret.

Innen folytatjuk...