Weblap Hová jutunk?

Bevezető a JavaScriptbe

A JavaScript képességei

  1. Jobb navigáció a weblapokon ( lenyíló, vagy előugró ablakok, melyek almenűket tartalmaznak.
  2. Űrlapok érvényesítéseí
  3. Különleges hatások figyelmeztető , futó üzenetek, villogó hátterek.
  4. Távoli parancsvégrehajtások.(AJAX)

Szkripteknek azokat a kis programokat nevezzük, amelyek a XHTML oldalakkal együtt, vagy azokba ágyazva töltődnek le a kliens számítógépére.
Tehát a szkriptek lehetnek:
- beágyazottak az XHTML programba, vagy
- külső szkriptek.

A szkripteket a böngészőprogramok futtatják.

Az XHTML dokumentum fejlécében a:
<script type="text/language-name">Script-tartalom </script>
elemet használjuk a beágyazott szkript kód elhelyezésére.

A script elem segítségével futatni tudjuk a JavaScript, JScript és VBScript programokat.
A language-name meghatározza a szkript nyelvet, amelyet alkalmazunk.

Nem minden böngésző támogatja a szkriptek használatát.
Azok számára, akik ilyen böngészőt használnak, alternatív megoldást nyújt a következő elem:
<noscript> Szöveges megjegyzés </noscript>
A noscript elem nyitó- és záró jelölőeleme közé tehát szöveges megjegyzést tehetünk.
Ez a szöveg akkor jelenik meg, ha a böngésző nem tudja futtatni a szkriptet.

Futtatásuk szempontjából a szkripteket feloszthatjuk:

  1. Automatikusan futtató szkriptek - ezek akkor aktíválodnak, ha a böngésző beolvassa őket. A felhasználó ezekre a szkriptekre nem tud kihatni.
  2. Eseményszkriptek - akkor aktiválódnak, ha a felhasználó aktiválja őket.

Alapfogalmak

Utasítások:
Egyetlen műveletet hajtanak végre. Az utasítások több sorban is tördelhetők, és egy sorban több is elhelyezhetünk.
Az utasítások végét pontosvesszővel jelezzük, mint a Css-ben

Rendszerezés fügvényekkel
A JavaScript utasításokban találkoztunk zárojeles részekkel.pl: document.write ("Teszt");
Ez az utasítás valójában egy függvény, mely segítségével könyebben elvégezhetünk feladatokat, a weboldalra történő kiíráshoz.
Az olyan utasításokat melyek függvényeket használnak függvényhívásoknak nevezzük.

A következ függvényhívás például egy választ vár a felhasználótól, amit aztán a text nevű változóba másol:
text = prompt (Írjon be valamit. ") ;

Saját magunk is írhatunk fügvényeket. Így elkülöníthetjük egymástól a program külömböz részeit a könnyebb érthetség kedvéért.
Másodszor: ez a fontos, a függvényeket több helyről is meghívhatjuk, külömböző adatokkal, elkerülve azt, hogy ujra és ujra be keljen gépelni ugyan azokat a parancsokat.

Változók
Olyan tárolók, melyekben számokat, karakterláncokat, és más értékeket tárolhatunk.

A JScript nyelvben minden változót be kell vezetni, azaz deklarálni kell.
Ezt a var kulcsszóval tudjuk megtenni.
A következ utasítás létrehoz egy valtozok nevű változót, és az 57 értéket rendeli hozzá:
var valtozok = 57 ;

Lehet csoportos deklaráció is, amikor vesszővel elválasztva több változót megadunk, és akár értéket is rendelhetünk hozzájuk.
Arra is van lehetőség, hogy a var kulcsszót elhagyjuk, viszont ilyenkor az értékadás kötelező.

var str;
var int1, int2, int3;
var i = 57;
j = null;

A fentiekben többféle deklarációra látunk példát.
Fontos megjegyeznünk, hogy az első és második esetben a változó típusa undefined lesz.
A negyedik esetben pedig a j változó null értéket kap.

A különbség a két fogalom között az, hogy a null úgy viselkedik, mint egy 0 szám érték, a definiálatlan típus pedig egy speciális érték: NaN (Not a Number). A két érték összehasonlítása egyenlőséget mutat minden esetben.

Objektumok
A változókhoz hasonlóan ezek is adatokat tárolnak.
Külömbség: Az objektum több adatot is tartalmazhat, még a változó csak egyet.
Az objektumban tárolt adatokat az objektum tulajdonságainak nevezzük.
A JavaScrip ponttal választja el egymástól az objektumok és tulajdonságok nevét.
Például egy Feri nevű személy esetén.( objektum = Feri, tulajdonság = cim, vagy telefon, munkahely, stb. lehetséges)
Feri . cim, vagy Feri . telefon

Az objektumok tagfüggvényeket (metódusokat) is tartalmaznak, melyek az objektum adataival dolgoznak.
A címjegyzékhez készített személyobjektum tartalmazhat például egy display ( ) tagfüggvényt, ami a személy adatait jeleníti meg.
A Feri . display ( ) utasítás, a Feri adatait jeleníti meg.

Beépített objektumok: Date, Array, String

DOM objektumok:
A böngésző és az adott html dokumentum egyes részeit jelképezik. Az alert() függvény mely a window objektum függvénye.

Egyedi objektumok.
Ezeket mi magunk készítjük.
Készíthetünk pl. egy person (személy) nevű objektumot

Feltételes utasítások.
Előfordulhat, hogy mi magunk szeretnénk ellenőrizni bizonyos feltételeket.
Pl: meg szeretnénk tudni, hogy érvényes-e a felhasználó által megadott elektronikus levélcím.

A feltételes utasítások kulcsszava az if:
Példa:
If (szamlalo == 1) alert ("A visszaszámlálás 1-hez érkezett. ");
A fenti utasítás összehasonlítja a számláló változó értékét az 1 állandóval, ha a két érték megegyezik, figyelmeztető üzenetet ad.
Ehhez hasonló feltételes utasításokra szinte minden programban szükségünk lesz.

Ciklusok:
Utasításcsoport, mely több alkalommal hajtódik végre.
Az alábbi utasítás például 10-szer jeleníti meg ugyanazt a figyelmeztetést, jelentsen próbára téve a felhasználó türelmét.

Ilyen például a for utasitás, mely egy a sok közül:
for ( i = 1 ; i <10; i + + ) { alert ("Igen ez egy újabb figyelmeztetés! " ) ; }

Eseménykezelők: olyan programok melyek eseményeket kezelnek.
A programok nem mindig a <script> elemek között helyezkednek el.
Az eseménykezelők megmondják a böngészőknek, hogy mit kell tenni, ha az esemény bekövetkezik.
Például: lenyomják az egér gombját, befejeződött a HTML dokumentum betöltése, stb.
Eseménykezelő kódját az objektumhoz tartozó HTML elemben adjuk meg.
A képekhez és a szövegekhez tartozik például egy onMouseOver nevű esemény, ami akkor következik be, amikor az egérmutató az objektum fölé kerül.

Az eseménykezelő idézőjelek között sorolja fel a javascript utasításokat. Melyeket a html elem jellemzőjeként adunk meg, idézőjelek között. 

Példa egy képre:
	<img id="bkep" src="button.gif" width="20" height="20"  onMouseOver = "highlight();" >

JavaScript meírása.
          <script type="text/javascript">
          function highlight() {
          var tema=document.getElementById('bkep'); 
          tema.style.width="40px"; 
          tema.style.height="40px";
          }
          </script>

Megjelenése, a böngészőben. (Egeret a képre kell mozgatni. Ismétléshez, F5 billentyűt kell leütni.)

Melyik program fut előbb:

  1. A html head részében található script programok futnak előbb
  2. Másodszor a body részében található script elemek, a beírási sorrendnek megfelelően.
  3. Az eseménykezelők csak akkor indulnak el, ha az esemény bekövetkezik
  4. Az onLoad eseménykezelő csak akkor fut le, amikor a weboldal törzse betöltődött.
  5. A head azelőtt betöltődik, mielőtt bármilyen esemény bekövetkezne, célszerű itt elhelyezni az eseménykezelőkben használt függvényeket.

A JavaScript utasításokban fontos a kis és nagybetűk helyes használata.
Pl: for, if, Math, Date,
A DOM objektum neve általában kisbetűs, de a tagfüggvényeik gyakran kis és nagybetűket tartalmaznak.

Térközök:
Térközöket a JavaSkript figyelmen kívül hagyja, akár egy teljes sort is üresen hagyhatunk.
Így átláthatóbbá tehetjük programunkat, és olvashatóbbak.

Megjegyzésjelek:
A sort kettő per vonallal kell kezdeni
Példa: // ez egy megjegyzés
De támogatja a css típusu megjegyzést is, mellyel, többsoros megjegyzést is beírhatunk
/* ----- ---- */

Szkriptek, Dokumentumobjektum-model (DOM)

A javaScript-változatai: 1.0 1.1 1.2 1.3 1.5 1.6
Változat megadása html-fájlban, melyet a kezdő <script> elemben adunk meg.
Példa az 1.3 verzióra:
<sript language="JavaScript1.3" type="text/javascript">
Ha nem adunk meg verziószámot akkor a böngésző az 1.0 verziót veszi figyelembe , mely minden böngészőben megjelenik.
De van amikor fontos megadni.

Ajánlott a külön JávaScript fájl használata.

Külön JávaScript fájl-ban, nem lehet <script> elem és html utasítás.

Így több webhelyünk, vagy weboldalunk is hivatkozhat ugyan arra a programra. A html és jávascript programokat is könyebb modosítani, ha külön kölön fájlban vannak, vagy a kollégák is ugyan azt használják.

Példa egy külső, js fájl megjelenítésére:

Két fájlra lesz szükségünk, ha külön JávaScript fájl használunk.
Hasonlit a html és a CSS kapcsolatára, a behivó meghatározás: src="javascript-fájl elnevezése.js"

Az utasítási sor, HTML és JavaScript összekapcsolására:
<script language="JavaScript" type="text/javascript" src="fájl_elnevezés.js"> </script>

Külső szkriptek használata esetében, melyek, másik url címen vagy ugyan azon mappában helyezkednek el, hól a html-fájl is található
<script type="text/language-name" src="script.url" charset="code"> Szkript-tartalom </script>
a szkript meghívására a következő attribútumot használjuk:
src="script.url"
ahol a script.url a külső szkript elérési útvonalát határozza meg.
A charset="code"
attribútum segítségével a külső szkript jelölőkészletét határozhatjuk meg, ha a code helyébe a külső szkript jelölőkészletének a nevét írjuk be.

Példa:
<script type="text/javascript" src="http://kadocsa.extra.hu/prog"> JavaScript-tartalom </script>
A fenti példa esetében JavaScript-tet használunk, amelynek az elérési útvonala:
http://kadocsa.extra.hu/prog

Vissza a lap elejére