javascript alapjai

JavaScript alapjai

Készítette:

Csorba Máté fw0jo1

Forrás:Forrás: - Nagy Gusztáv Web programozás I. - Nagy Gusztáv Web programozás I. 0.7. verzió 0.7. verzió 2008. szeptember 2008. szeptember

- Webszerkesztés, a web programozás alapjai- Webszerkesztés, a web programozás alapjai CSS és JavaScript programozás Szerkesztette: Ember László

Mi a JavaScript?• A JavaScript programozási nyelv, egy objektumalapú szkriptnyelv,

amelyet weblapokon elterjedten használnak.

• Weboldalak használják űrlapok helyes kitöltésének ellenőrzéséhez, sütik kezeléséhez, a felhasználói élmény növeléséhez.

• Interaktivitást (működést) ad a HTML oldalhoz

• Kód vagy a html fájlban vagy külön (jellemzően .js kiterjesztésű) szövegfájlban van. Ezek a fájlok tetszőleges szövegszerkesztő (nem dokumentumszerkesztő) programmal szerkeszthetőek.

• Események kezelésére alkalmazható

• A neve ellenére nincs szoros kapcsolatba a Java nyelvvel

• C++ és Java szintaxisra alapoz

• A szabvány leírását az ECMAScript specifikáció tartalmazza

JavaScript története, fejlődése• A JavaScript története egészen 1996-ig nyúlik vissza, szorosan

összekapcsolódva az ismert Netscape böngésző második verziójának megjelenéséhez. A programnyelv ebben a böngészőben jelent meg először.

• Eredetileg Mocha majd később LiveScript néven futott, és csak ezután kapta meg "végleges" nevét, a JavaScriptet. Bár elméletileg volt köze a névadásnál a Java-hoz, főleg marketing okokból, nagyon fontos,hogy a JavaScript-nek semmi köze a Java-hoz.

• A nyelv létrejöttének oka, hogy szükség volt egy olyan eszközre, mellyel a megjelenített HTML, XML stb. oldalak programozhatóvá válnak.

• A nyelv alapja az úgynevezett ECMA Script szabvány, amely sok szkriptnyelvnek az alapja.

JavaScript verziók:

• JavaScript 1.0

1996-ban jelent meg a Netscape 2.0 böngészőben, valamint később az Internet Explorer 3.0-s verziójában. A korai ECMA Script szabványra és a DOM Level 0-ra épült a képelemek kivételével.

• JavaScript 1.1

A Netscape 3.0 használta. Alapja a korai ECMA Script és a már teljesDOM Level 0.

JavaScript verziók:• JavaScript 1.2

1997 júniusában jelent meg a Netscape 4.0-ás verziójától. Az ECMA Script szabványra és a DOM kiterjesztett változatára épült (DOM Level 0 + Proprietary DOM vagy Layers DOM), mely leírja hogy az egyes pozícionált elemek és gyermek elemek stílusát hogyan érhetjük el és változtathatjuk meg.

• JavaScript 1.3

1998 október. A Netscape 4.06-tól valamint az Internet Explorer 4.0-tól. A továbbfejlesztett ECMA Script szabványra és persze a DOM kiterjesztett verziójára épült.

JavaScript verziók:• JavaScript 1.4

Csakis a Netscape Server változathoz készült. (Server side JavaScript) • JavaScript 1.5

2000 november. Az ECMA Script harmadik verziójára épül valamint a DOM W3C-re mely már teljes egészében leírja az elemek kezelését, elérését, valamint az egyes elemek, objektumok létrehozását, törlését, módosítását az oldal betöltődése után. Ezt a verziót lényegében az összes ma is használt elterjedt böngésző támogatja. A Netscape 6.0-ás verziója, az Internet Explorer 5.5-től napjainkig (ezekben a böngésző a Microsoft már JScript-nek hívja), az ekkor megjelent Mozilla Firefox 1.0, az Opera 6.0-tól napjainkig, a Safari 3.0-tól napjainkig, és a Google Chrome.

JavaScript verziók:

• JavaScript 1.6, 1.7, 1.8, 1.8.1, 1.8.2, 1.9 Ezek a verziók mind csak az 1.5-ös valamilyen fejlesztései melyek csak a Mozilla Firefox új verzióban jelentek meg vagy fognak megjelenni. Sorban az 1.5, 2.0, 3.0, 3.5, 3.6, 4.0. Ennek oka egyszerű. A nyelv fejlesztője Brendan Eich ahogy a fejlődésen is végigkövethető először a Netscape-nél dolgozott, majd részt vett a Mozilla Foundation megalapításában, és a Mozilla fejlesztője lett, ahol napjainkban is tevékenykedik.

• JavaScript 2.0 A Mozilla által tervezett jövőbeli kiadás.

Kód beillesztése a HTML oldalba• beillesztése a <script> tag segítségével

• <head> elemen belül– függvények, változók deklarációja– látható kimenete itt ne legyen– az itt lévő kódot meg kell hívni

• <body> elemen belül– végrehajtás a feldolgozás során– függvényeket itt is meg kell hívni

• JavaScript kód külső fájlban is elhelyezhető<script type="text/javascript" src="szkript.js"></script>

Adattípusok

• stringek: karakterláncok A stringek karakterláncok, amelyeket egyszeres (’) vagy kétszeres (”) idézőjelek között kell megadnunk.

• numerikus értékek: egész és valós számok A numerikus értékek (számok) mind egész (integer), mind pedig valós (floating point vagy real) számok lehetnek.

• boolean: igaz vagy hamis logikai értékek A boolean típusú (logikai) adatok csak true (igaz) illetve

false (hamis) értéket vehetnek fel.

A JavaScript változói és konstansai alapvetően három adattípust használhatnak:

Változók

• értékadással

Ha értékadással hozzuk létre a változót, akkor rendelkezni fog értékkel is és az abból következtetett típussal is.

Például: szoveg=”Nagy Liza virágot szed”;

• a var kulcsszó használatával

nem kötelező neki kezdőértéket adni.

Például: var szoveg;

Ekkor a változónak még nem lesz értéke, de típusa lényegében már lesz, méghozzá a definiálatlan típus (undefinied).

A JavaScript-ben a változókat kétféleképpen hozhatjuk létre.

Operátorok

Az operátorok olyan programnyelvi elemek melyek elvégzik a műveletek végrehajtását.

Több csoportba sorolhatjuk őket aszerint, hogy milyen műveleteket végeznek.

Aritmetikai operátorokA példák miatt említsük meg hogy az "a" változónk jelenlegi értéke 5.

operátor példa új eredmény

Összeadás: + a=a+4 9

Kivonás: - a=a-3 2

Szorzás: * a=a*4 20

Osztás: / a=a/2 2.5

Maradékszámítás: % a=a%4 1

Inkrementálás:(növelés 1-el) ++ a++ 6

Dekrementálás:(csökkentés 1-el)

-- a-- 4

Összehasonlító operátorok

operátor példa eredmény

Egyenlő: == a==10 igaz

Pontosan egyenlő: (értéket és típust is vizsgál)

=== a==="10" hamis

Nem egyenlő: != a!=10 hamis

Nagyobb mint: > a>10 hamis

Kisebb mint: < a<10 hamis

Nagyobb vagy egyenlő: >= a>=10 igaz

Kisebb vagy egyenlő: <= a<=10 Igaz

A példák miatt említsük meg hogy az "a" változónk jelenlegi értéke 10.

Logikai operátorok

operátor példa eredmény

Logikai ÉS kapcsolat: && (a>=5) && (b<=20) igaz

Logikai VAGY kapcsolat: || (a<5) || (b==20) hamis

Tagadás:(egyoperandusú)

! !(a>5) hamis

A példák miatt említsük meg hogy az "a" változónk jelenlegi értéke 20, „b” változónk jelenlegi értéke pedig 15.

String operátorokString típusú értékek, azaz szövegek összefűzésére is használunk operátort. Ekkor hasonlóan az aritmetikai összeadáshoz a + jelet használjuk, de abban az esetben, ha a két operandus egyike string, a végeredmény a két érték összefűzéséből álló karaktersorozat lesz. • ”alma”+”körte” = ”almakörte” • ”46” + ”57” = ”4657” • ”46” + 57 = ”4657” • 46 + 57 = 103 • ”Helló”+(5>4) = ”Helló true”

Feltételes operátorA háromoperandusú feltételes operátor egyszerű esetekben egy if-else utasítást is kiválthat.

Szintaxis:változónév=(feltétel)?kifejezéshaigaz:kifejezéshahamis

A feltétel teljesülése esetén változónév értéke kifejezéshaigaz értéke lesz, különben pedig kifejezéshahamis értéke.

A következő példa a Jó reggelt újabb verziója:<script type="text/javascript"> var d=new Date() var time=d.getHours() var message = "Jó " + ((time<9)?"reggelt":"napot") + "!" document.write(message)</script>

Típuskényszerítés

Tevékenység Eredmény

szám és szöveg összeadása a szám a szövegbe épül

logikai érték és szöveg összeadása a logikai érték a szövegbe épül

szám és logikai érték összeadása a logikai érték a számba épül

A JavaScript esetében könnyű az átmenet a változó típusok között. Ha a feldolgozó kiértékel egy kifejezést, akkor az alábbi szabályok szerint jár el:

Elágazások (if utasítás)

Akkor használjuk, ha egy adott feltétel beteljesülése esetén szeretnénk valamit végrehajtani. Szintaxis:

if (feltétel) { utasítás

}

A következő kód Jó reggelt kíván, ha még nincs 9 óra.

<script type="text/javascript"> var d=new Date() var time=d.getHours() if (time<9) { document.write("<strong>Jó reggelt!</ strong >") }</script>

Elágazások (if-else utasítás)Akkor van szükségünk erre az utasításra, ha a feltételünk teljesülése mellett a nem teljesülés esetén is kell valamilyen feladatot ellátni. Szintaxis:

if (feltétel) { utasítás ha igaz

} else { utasítás ha hamis

}Kiegészítsük ki a „Jó reggelt” példát:<script type="text/javascript"> var d=new Date() var time=d.getHours() if (time<9) { document.write("<strong>Jó reggelt!</ strong >") } else { document.write("Jó napot!") }</script>

Elágazások (switch utasítás)Ez az utasítás akkor alkalmazható nagyszerűen, ha egy adott kifejezés különböző értékei esetén más-más feladatot kell a kódnak végrehajtani. Szintaxis:

switch(n) {case 1:

utasítás 1 break

case 2: utasítás 2 break

default: utasítás

}

Függvények

• A JavaScript-ben is rendkívül fontos szerepet kapnak a függvények • Mi magunk is írhatunk függvényeket, hogy a nagyobb, összetettebb feladatokat kisebb, jobban kezelhetőbb részekre bontsuk

• Készítsünk olyan programot, amely bekér egy nevet, majd egy alert ablakban kiírja: Szia <NÉV>!

BODY rész

• <BODY>• <FORM NAME="urlap1">• Add meg a neved:<BR>• <INPUT TYPE="text" NAME="nev"><BR>• <INPUT TYPE="button" VALUE="Köszönés"

onClick="koszon()">• </FORM>• </BODY>• </HTML>

HEAD rész

• <HTML>• <HEAD>• <SCRIPT LANGUAGE="JavaScript">• function koszon(){• var x = document.urlap1.nev.value;• alert("Szia "+x+" !");• }• </SCRIPT>• </HEAD>

Függvénydeklaráció

• A function kulcsszót közvetlenül a függvény neve követi, majd zárójelekben a paramétereket adjuk meg

• A függvény törzse kapcsos zárójelek között van, és ide helyezzük el a függvényhez tartozó utasításokat function függvénynév(par1,par2,...,parX) { függvénytörzs

}

• A JavaScript programok változókban tárolják az információkat, adatokat

Visszatérési érték

Egyes függvények visszatérési értéket is előállíthatnak. A visszatérési érték a return utasítással adható meg. A kód a return hatására a függvényből kilépve a vezérlést is visszaadja az őt hívó kódnak.

A következő egyszerű függvény a két paramétere szorzatát adja vissza:

function prod(a,b) { return a*b

}

A függvényt például a következő módon tudjuk meghívni:

product=prod(2,3)

A függvény 6-os visszatérési értéke bekerül a product változóba.

Ciklusok

• Ha ugyanazon, vagy hasonló programrészleteket ismételnünk kell a programunkban akkor valószínű azokat egy jól szervezett ciklusba illeszthetjük.

• Négyféle ciklusfajtát ismer a JavaScript. Kettőt a while utasítás kettőt pedig a for utasítással írhatunk le. A for utasítás olyan esetekben használható hatékonyan, amikor tudjuk, hogy a ciklus hányszor fog végrehajtódni, vagy legalábbis ez az érték valahol megtalálható lesz a program végrehajtódása közben.

for ciklus Szintaktikája :

for (változó=kezdőérték ; feltétel ; változó=változó+érték){ ...utasítások...

} A változót ciklusváltozónak hívjuk. A ciklusváltozó felvesz egy kezdő-értéket, a feltételben a ciklus megvizsgálja minden egyes lépés előtt hogy a ciklusváltozónk értéke még megfelel-e, ha igen, akkor végrehajtja az utasításokat majd növeli a ciklusváltozó értékét a megadott értékkel. A feltételt ciklusban maradási feltételnek hívjuk, hisz amíg igaz addig fogja végre hajtani a ciklus az utasításokat.

Egy példa: egytől tízig a számok összege

var ossz=0; for (var i=1 ; i<=10 ; i++){ ossz=ossz+i; }

for-in ciklus Másik fajta felhasználása a for ciklusnak, amikor segítségével bejárjuk egy tömb összes elemét vagy egy objektum összes tulajdonságát. for (változó in objektum){

...utasítások... }

A ciklus pontosan annyiszor fog végrehajtódni ahány elemű a tömb vagy ahány tulajdonsága van az objektumnak. A változó maga pedig tömb esetén felveszi az index értékét, azaz, hogy hányadik elemnél járunk, objektum esetén pedig a tulajdonság nevét fogja magába hordozni.

Például így tudjuk kiíratni a document objektum összes tulajdonságát:

for (a in document){ document.write(a);

}

while ciklus

Ezt a ciklust akkor szokás alkalmazni, ha nem tudjuk előre, hányszor kell a ciklusmagnak lefutnia. Általában ciklusváltozóra nincs is szükség, a ciklus futási feltétele valamilyen más módon áll össze.

A while ciklus magja addig fut, amíg a feltétel igaz. (Akár „végtelen” ciklus is lehet logikailag. Gyakorlatilag a böngésző egy idő után leállítja a túl sokáig futó szkriptet.)

while (feltétel) { cikusmag

}

do-while ciklus

Ezt a ciklust is akkor szokás alkalmazni, ha nem tudjuk előre, hányszor kell a ciklusmagnak lefutnia.

A do-while ciklus logikája csak abban mása while ciklushoz képest, hogy mindenképpen lefut egyszer a ciklusmag, és csak ez után értékelődik ki a feltétel:

do { cikusmag } while (feltétel);

Dialógusablakok

• A felhasználó figyelmét ráirányítjuk valamilyen fontos információra egy dialógusablak segítségével. Lehet:

-Üzenetablak-Kérdés-Egyszerű adatbevitel

ÜzenetablakAz üzenetablak csupán egy egyszerű információt közöl, ezért az alert függvénynek is csak egy paramétert kell megadnunk. A felhasználó mindössze tudomásul veheti a közölt üzenetet.

<head> <script type="text/javascript"> function figyelmeztet() { alert("Figyelmeztetés!") } </script></head><body> <form> <input type="button" onclick="figyelmeztet()" value="Gomb"> </form></body>

Kérdés• A felhasználótól külön dialógus-ablakból kérünk választ egy eldöntendő kérdésre.

•A confirm függvény visszatérési értéke jelzi, hogy a felhasználó melyik gombot választotta.

<head> <script type="text/javascript"> function kerdes() { if (confirm("Kérdés"))

{document.write("OK") } else { document.write("Mégse") } }

</script></head><body> <form> <input type="button"

onclick="kerdes()" value="Gomb"> </form> </body>

Egyszerű adatbevitel• A prompt függvénnyel egy egysoros szöveg bevitelét kérhetjük a felhasználótól. A függvény első paramétere az üzenet szövege, a második pedig az alapértelmezett válasz (nem kötelező megadni). Itt is a függvény visszatérési értékén keresztül juthatunk a felhasználó válaszához. (Ha a felhasználó a Mégse gombot választotta, null a visszaadott érték.)

<head> <script type="text/javascript"> function disp_prompt() { var name=prompt( "Add meg a neved","Névtelen") if (name!=null && name!=""){ document.write( "Szia " + name + "!") } } </script></head><body> <form> <input type="button" onclick="disp_prompt()" value="Gomb"> </form></body>

EseménykezelésJavaScript segítségével készíthetünk dinamikus weblapokat. Alapvetően ez azt jelenti, hogy a honlap különböző felhasználói (ésböngésző) eseményeket képes érzékelni, és azokra valamilyen módon reagálni.

Jellemző események a következők:(A teljesség igénye nélkül)

• egérkattintás• a weboldal vagy egy objektum letöltődése• az egeret érzékeny területen mozgatjuk• listából egy elem kiválasztásra kerül• űrlap elküldés vagy alaphelyzetbe állítás• billentyűleütés

Események

• A programoknak gyakran kell reagálnia olyan eseményekre, mint billentyű lenyomása, vagy az egér mozgatása

• Készítsük el a következő weblapot!

onClick

• ha a felhasználó megnyomja a gombot

• végrehajtja az alert('Hello!') JavaScript kódot

• Ez egy függvény, amely létrehoz egy üzenetablakot, melyben a zárójelen belül idézőjelek közé írt szöveget jeleníti meg

• lehet idézőjelen belül idézőjelet használni!

Gyakran használt eseménykezelők

• weboldal betöltésekor, elhagyásakor– onLoadonLoad, - böngésző típusának lekérdezése– onUnloadonUnload, - kilépés kezelése

• űrlap kezelés– onFocusonFocus – belépés egy űrlap elembe– onBluronBlur – űrlap elem elhagyása– onChangeonChange – űrlap elem tartalma megváltozik– onSubmitonSubmit – űrlap elküldése

Gyakran használt eseménykezelők

• egérmozgás– onMouseOveronMouseOver – egér felö kerül egy elemnek– onMouseOutonMouseOut – egér elhagyja az elemet

• időzítő események– getHours(), getMinutes(), getSeconds()getHours(), getMinutes(), getSeconds()– setTimeoutsetTimeout

Befejezés

• Sajnos a JavaScript is küszködik egy betegséggel, azzal, hogy az egyes böngészők nem teljesen egyformán kezelik a nyelvet.

• több böngészőben is teszteljük le az oldalainkat és az azokba ágyazott programokat!

• Sajnos amíg a legelterjedtebb böngészők egymással csatáznak, addig csak újabb és újabb eltérések várhatók

Köszönöm a figyelmet!Köszönöm a figyelmet!

javascript alapjai

Documents