Jellemzők: gyengén típusos: bármilyen típusú értéket értékül adhatunk egy változónak, és később másik típusú értéket is adhatunk ennek a változónak. objektum alapú: nem objektum orientált script nyelv kliens oldali programozás: kliens oldali JavaScript létezésének egyik oka, hogy a statikus HTML dokumentumokat interaktív webes alkalmazásokká alakítja. kliens futtatja Előnyei: egyszerű nyelv,plusz funkcionalitás, form ellenőrzés, mozgó elemek, ajax Hátrányai: biztonsági kérdések JavaScript változók JavaScript típusuok két kategóriába sorolhatóak. Primitív típusok és objektum típusok. Primitív típusok: számok, szövegek, logikai értékek. Speciális javascript értékek: null, undefined. Ezek is primitívek, de nem számok, nem logikai értékek, nem szövegek. Number: JavaScript nem teszt különbséget egész és lebegőpontos számok között. Mindegyik szám lebegőpontos számként van ábrázolva a JavaScriptben. Numerikus literálok: szám közvetlenül a JavaScript programban Több megjelenési formátumot biztosít a JavaScript. Egész literálok például: 0 3 1000000 JavaScript felismer hexadecimális számokat is. Ezek 0x vagy 0Xel kezdődnek. Ha egy numerikus literált – jel előz meg, ez azt jelzi, hogy negatív szám, de ez nem a literál része, hanem egy -1-es szorzó technikailag. Lebegőpontos literálok: Egy tizedesjegy. Exponenciális jelölést támogatják: e vagy E betűt követi egy valós szám (a valós szám előtt lehet – vagy + jel) A lebegőpontos literál kinézetének szabálya megadható pontosan: A [….] jel azt jelenti, hogy opcionális (ami közötte van az elhagyható is), a | pedig hogy csak az egyik. Lebegőpontos literálok alakja JavaScriptben: [számjegyek][.számjegyek][(E|e)[(+|-)]számjegyek] Érvényes lebegőpontos literál például: 3.14, 2345.789, .33333333333 6.02e23 1.3455666E-32 Látható hogy ezek mind illeszkednek a jelöléseinkre. Stringek:
string literál: javascript kódban idézőjelek között előforduló szöveg. Szöveg karaktereit zárjuk idézőjelek közé (lehet ’ ’ vagy ” ” közé). Egyszeres idézőjelekkel határolt szövegben lehet dupla idézőjel és dupla idézőjelek közé határolt szövegben lehet egyszeres idézőjel. Példa string literálokra üres string: ”” ’testing’ ”3.14” ’name=”myform”’ String liter "’Captain’ Jack Sparrow" ’"Captain" Jack Sparrow’ String literál írható több sorba is. A tördelést \ jellel érhetjük el (ez megjelenítésben nem tördeli, csupán ha pl. kódolunk és más a sor végén vagyunk, akkor megtörhetjük a literálunkat) ”two\nlines” ”one\ long\ line” Kliens oldali programozásban, JavaScript kód tartalmazhat HTML kódot tároló stringet és HTML kód is tartalmazhat JavaScript kódot. A HTML is használja mindkét idézőjeltípust Ha JavaScript és HTML kódot kombinálunk, egyik idézőjelet használjuk a JavaScriptes dolgokra, másikat pedig HTML-es dolgokra példa Click Me Logikai értékek: két lehetséges érték, ezekre fenntartott foglalt szavak JavaScriptben: true, false. Bármilyen JavaScript érték konvertálható logikai értékre. false értéket eredményeznek a következők: undefined, null, 0, -0, NaN, ”” (üres sztring) true értéket eredményeznek: minden más,ami az előbbi felsorolásban nem szerepelt null és undefined null null egy nyelvi kulccszó, ami speciális értékre értékelődik ki, és egy érték hiányának kifejezésére használjuk leggyakrabban. JavaScriptben a typeof operátor null-on „object”-et ad vissza, azaz a null-ra lehet gondolni speciális objektum értékként, ami azt jelzi, hogy nincs objektum. Más programozási nyelvekben is megtalálható hasonló szerepre fenntartva a null. JavaScriptben azonban van másik érték is egy érték hiányának kifejezésére. Ez pedig az undefined. Ennek kicsit mélyebb a jelentése, mint a nullnak. Használjuk pl: olyan változó értéke, ami még nincs inicializálva egy objektum olyan propertijének értékét kérdezzük le, ami nem létezik vagy nem létező tömbelem lekérdezésénél is undefined-et kapunk. Függvények is ilyennel térnek vissza, ha nincs visszatérési értékük.
az undefined nem nyelvi kulcsszó (mint a null), hanem egy előre definiált globális változó. a null és undefined tehát mindketten egy érték hiányát fejezik ki és gyakran felcserélhetőek. == operátor egyenlőnek veszi őket === operátor már nem veszi őket egyenlőnek. undefined rendszer szintű, nemvárt, hiba szerű érték hiány ábrázolására használjuk, null program szintű, normál, várt értékhiány. Változók deklarálása: mielőtt használunk egy változót a javascript programban egy változót, deklarálhatjuk előtte. Változókat a var kulcsszó segítségével tudunk deklarálni. var i; var szum; Több változót is lehet ugyanazzal a var kulcsszóval deklarálni. var i, szum; Deklaráció és inicalizáció kombinálható: var i=4; Ha a var utasítás használatákor nem határozunk meg kezdeti értéket a változó számára, a változó deklarálva lesz, de az értéke undefined, amíg a kódunk nem ad neki értéket. var utasítás for vagy for/inban a ciklusváltozó deklarálásának részeként is megjelenhet. for(var i=0; i<5; i++) {..} Egy változót lehet többször is deklarálni a var kulcsszóval Az ismételt deklarációnak van egy inicializációja, olyan mintha szimpla értékadó utasítás lenne. Javascript case-sensitiv. A JavaScript azonosítóknak betűvel, aláhúzásjellel vagy dollárjellel kell kezdődnie Tömbök: Tömbök készítése: var empty=[]; var primes=[2,3,5,7,11]; var misc = [1.1, true, „a”]; Tömb literálba nem csak konstans lehet var szam=1045; var tomb [ szam, szam+1, szam+2]; Tömböt nem csak literálokkal, hanem az Array() konstruktorral is készíthetünk var a = new Array(); //u.a mint [] var b = new Array(10); //tömb meghatározott hosszal var c= new Array(1.1, true, „a”); Tömb elemeihez hozzáférés [] operátor használatával 0tól indexelünk
var a=[„world”] Az indexelés azonban nem csak számokkal történhet. Lehet közötte akár szöveg is. Ez azzal is magyarázható, hogy a tömbök JavaScriptben speciális objektumok, és a tömb elemhez szögletes zárójellel hozzáférés kb annak felelne meg, minta egy objektum propetijének értékét kérjük le. Tömb hossza Mindegyik tömbnek van length propertije, Tömbök elemi lehetnek egyszerű típusok, tömbök, objektumok, függvények Új elem hozzáadása tömbhöz:adjunk értékül új indexnek értéket a=[]; //üres tömb a[0]=”zero”; //egy elem hozzáadása a[1]=”one”; //még egy elem hozzáadása De push() metódussal is adhatunk egy vagy több elemet hozzá. a=[]; a.push(„zero”) a.push(„one”,”two”); Törlés tömbből: delete operátorral törölhetünk, de ez a méretet nem csökkenti, hanem undefined-re változtatja az értéket: a=[1,2,3]; delete a[1]; a.length //még mindig 3 Megoldás lehet, ha a végéről törlünk és a length propertit kézzel állítjuk, vagy törlés után eltoljuk az elemeket Tömbök bejárása: for ciklussal: Ha az indexelés számokkal történt: for(var i=0;i
a[„alma”]=2; a[„korte”]=3; a[„nev”]=3; a[„kor”]=4; Két módja van ilyenkor for(var key in a) { console.log(a[key]); } Lekérjük az indexhalmazát: var indexek=Object.keys(a); for(i=0; i
var product = table[1][1]; Objektumok Bármi lehet, .operátor, adattagok, metódusok megadhatók változóként JavaScript alapvető adattípusa az object. (object több értékből áll; propertik rendezetlen gyűjteménye, melyek mindegyikének van neve és értéke (mint pl. java-ba a map, ahhoz hasonlóként is felfogható). JavaScript objektumok dinamikusak, propertit lehet hozzáadni és törölni menet közben is JavaScript-ben minden érték ami nem string, szám, true, false, null és undefined az objektum. Habár ezen felsoroltak is tudnak objektumként viselkedni Adattagok (~property): van nevük és értékük. Property neve lehet bármilyen string, akár üres string is, de ugyanazon objektumnak két ugyanolyan nevű propertije nem lehet. Értéke lehet bármilyen JavaScript érték. Objektumok készítése: Módja: object literállal, new kulcsszóval, Object.create() függvénnyel. object literal: kapcsos zárójelben összefogott, vesszővel elválasztott név:érték párokat tartalmaz. pl. var empty={}; var point={x:0, y:0}; var point2 = {x:point.x, y:pont.y+1 }; var book= { „main title”: „JavaScript”, author: { nev: „Balint”, kor : 23 }}; new kulcsszóval: objektum készítése és inicalizálása. new kulcsszót függvényhívásnak kell követnie. Ilyen módon használt függvény: konstruktor. var o=new Object(); var d=new Date(); var r=new RegExp(„js”); Property értékének lekérdezése és értékének beállítása: property értékének megszerezésére a pont (.) vagy szögletes zárójelet használhatjuk. Bal oldal: olyan kifejezés aminek értéke objektum. (amire meg akarjuk hívni) Jobb oldal: ha a pont operátort használjuk, akkor azonosítónak kell lenni. Ha szögeletes, akkor nem muszáj azonosítónak lenni, akkor olyan kifejezésnek kell lenni, ami string-re értékelődik ki (ez a string lesz az elérni vagy hozzáadni kívánt property neve) var author=book.author; var name=author.nev;
var title=book[„main title”]; //ezt ugye csak így lehet a propery neve miatt, mert az nem felel meg azonosító képzés szabályoknak (pl. van benne szóköz …) Property készítése vagy beállítása ugyanúgy ezen két operátor segítségével történhet. book.author.nev = „alma”; book[„main title”]=”kidolgozás”; Értékadás előtt hasznos lehet, ha le tudjuk kérdezni,hogy van e ilyen adattag. Ezt az in operátor segítségével tudjuk megtenni „eladas” in book: false „main title” in book: true Objektum viselkedhet asszocatív tárolóként (pl. object.adattag elérhető object[„adattag”]) al is, ezért bejárható ciklussal, úgy mint a fent említett példa (tömbök, ahol az indexek nem csak számok lehetnek bejárása példa) Metódus készítése és meghívása Metódus JavaScript-ben: JavaScript függvény,ami egy objektum adattagjában van tárolva. pl: var auto={}; auto.szin=”piros”; auto.motor=”disele”; auto.megy = function () {//…}; Meghívás: auto.megy()
Függvények: JavaScript függvényeknek is lehetnek paramétere: azonosítók listája, a függvény törzsében ezek lokális változóként viselkednek. Függvényhíváskor mikor értéket adunk a paramétereknek, azok az argumentumok. Függvények definiálása: function kulcsszóval definiáljuk őket. Ezt használhatjuk függvényt definiáló kifejezésben és függvényt deklaráló kifejezésben. Egy függvénydefiníció ezen a kulcsszón felül a következőkből áll JavaScriptben: azonosító,ami a függvény neve. Ha deklaráló utasításról van szó, akkor kötelező. Definíciós utasításnál nem. Deklaráló például: function negyzet(a) { return a*a; }; Defininíáló például: valami.negyzet = function (a) { return a*a; }
zárjójelpár, ami 0 vagy több azonosítót tartalmaz vesszővel elválasztva (típusokat nem kell megadni, mert gyengén típusos nyelv..) kapcsoszárójelpár, ami 0 vagy több javascript utasítást foglal magába. JavaScriptbe a függvények lehetnek más függvényekbe ágyazva: function hypotenuse(a, b) { function square(x) { return x*x; } return Math.sqrt(square(a) + square(b)); } Érdekes hogy ilyenkor a belső függvény a beágyazó függvény változóihoz és paramétereihez hozzáférhetnek. Visszatérési érték is lehet,de nem kell feltünteni a típusát nyílván, mivel gyengén típusos, szóval csak a függvény törzséből látszik hogy van e visszatéréi értéke vagy beszédes nevéből. Visszatérési értéket a return utasítással adhatunk meg a fgv. törzsében. Függvények hívása függvény törzse függvény definiálásakor nyílván nem hajtódik végre, csak meghíváskor. Függvény hívására több mód is van: függvényként metóduskénr konstruktorként közvetlenül call() vagy apply() metódusokkal függvény hívási kifejezés: függvény objektumra kiérteklődő kifejezés + ( argumentumok, ha van ); Mintaillesztés: JavaScript definiál egy RegExp() konstruktort olyan objektumok készítésére, amelyek szöveges mintát reprezentálnak. A mintát szabályos kifejezések segítségével adjuk meg, a JavaScript a Perl reguláirs kifejezés szintaxisát építette be. Mind a stringeknek, min a RegExp objektumoknak vannak metódusai minta egyezésre, keresés és csere műveletekre szabályos kifejezést használva. Van literál szintaxisuk nekik is. Két (nem fordított) perjel közötti szöveg reguláris kifejezésll literált jelent JavaScriptben. A záró perjel után lehet egy vagy több betű,ezek a minta jeentését módosítják. Példák: /^HTML/ // Match the letters H T M L at the start of a string /[1-9][0-9]*/ // Match a non-zero digit, followed by any # of digits /\bjavascript\b/i // Match "javascript" as a word, case-insensitive var text = "testing: 1, 2, 3"; // Sample text var pattern = /\d+/g // Matches all instances of one or more digits pattern.test(text) // => true: a match exists text.search(pattern) // => 9: position of first match
text.match(pattern) // => ["1", "2", "3"]: array of all matches text.replace(pattern, "#"); // => "testing: #, #, #" text.split(/\D+/); // => ["","1","2","3"]: split on non-digits
Dátum és idő: JavaScript magában foglal egy Date() konstruktort, amivel dátumot és időt reprezentáló JavaScript objektumot készíthetünk. Ezeknek az objektumoknak vannak metódusai, amelyek egyszerű dátumszámítós API-t biztosítanak. Példa használatukra: var then = new Date(2010, 0, 1); // 2010 január 1. var later = new Date(2010, 0, 1, // Same day, at 5:10:30pm, local time 17, 10, 30); var now = new Date(); // Aktuális dátum és idő var elapsed = now - then; // Különbség later.getFullYear() // => 2010 later.getMonth() // => 0: hónap, l, 0 alapú! ater.getDate() // => 1: nap, 1től kezdődik a számozás later.getDay() // => 5:hét napja:. 0 is Sunday 5 is Friday. later.getHours() // => 17: 5pm, local time later.getUTCHours() // hours in UTC time; depends on timezone DOM Document Object Model Minden web böngésző ablak, tab, frame egy Window object-el van ábrázolva. Minden Window objektumnak van egy document propertije, ami a Document objektumra hivatkozik. Document objektum az ablak tartalmát reprezentálja. De nem csak Document objektum van e célra. Ez csak egy nagy API középpontjta, a Document Object Model vagy DOM-nak, ami arra hivatott, hogy ábrázolja és manipulálja a dokumentum tartalmát. DOM tehát egy alapvető API HTML és XML dokumentumok tartalmának ábrázolására és manipulálásra DOM megértéséhez szükséges: HTML vagy XML dokumentumban egymásbaágyazott elemek a DOM-ban objektumok fájaként ábrázolódnak. Egy HTML dokumentum fa ábrázolása olyan csúcsokat tartalmaz, amelyek HTML tageket vagy elemek ábrázolnak, mint például ,
és a csúcsók ábrázolják a szövegeket is. Akár kommentet is ábrázolhatnak. Például:
Ennek a HTML dokumentumnak a fája
Sample Document
An HTML Document
This is a simple document. Egy csúcs feletti közvetlen csúcs a szülő. Csúcsok,amik egy csúcstól eggyel lentebb vannak,azok ennek a csúcsnak a gyereki. descendant: azok a csúcsok, amik egy csúcstól bármennyivel lentebbi szinten helyezkednek el. ancestors: minden csúcs, ami az adott csúcstól bármennyivel fentebb van Fa gyökere: Document node, és ez az egész dokumentumot ábrázolja Element node: azok a node-ok, amik HTML elemet tartalmaznak. Text node: azok a node-k, amik szöveget tartalmaznak. HTMLDocument, HTMLElement: ezek HTML dokumentumok és elemekre specializálódott osztályok (Document és Element osztályok specializációi) document legtöbb kliens oldali javascript program úgy működik, hogy valahogy manipulál egy vagy két dokumentum elemet. Amikor ezek a programok elindulnak, a globális document nevű változót használhatják, hogy hivatkozzanak a Document objektumra. Ahhoz, hogy manipulálni tudjunk a dokumentum elemein, valahogy meg kell szerezni vagy ki választani azokat az Element objektumokat, amik azokra a dokumentum elemekre hivatkoznak (vagy azokat reprezentálják). DOM a következők szerint enged kiválasztani elemet: -meghatározott id attribútummal rendelkező elem -meghatározott name attribútumú elem -elem meghatározott tagname-el -elem meghatározott CSS osztállyal vagy osztályokkal -CSS selectorral való egyezőség alapján Elemek kiválasztása ID alapján: document.getElementById minden HTML elemenek lehet id attribútuma. Ennek az attribútumnak az értékének egyedinek kell lenni a dokumentumon belül (két elemnek ugyanabban a dokumentumban nem lehet ugyanaz az id-je. Ezen egyedi ID alapján a Document objektum getElementById() metódusával tudunk elemet kiválasztani Elemek kiválasztása Name alapján: document.getElementsByName()
HTML name attribútum célja eredetileg az volt, hogy a form elemeknek nevet tudjunk adni és ennek az attribútumnak az értéke volt használt, amikor a form adatokat elküldik a szerverhez (a formba megadott értékre ezzel hivatkozhatunk, pl. php $_POST, $_GET, $_REQUEST stb.) name értékének azonban nem kell egyedinek lenni, több elemnek lehet ugyanaz a name értéke, és ez pl gyakori radio gomboknál és checkboxoknál a formokban. Form elemeknél kézenfekvő a name attribútum, iframe-knél és img elemeknél HTML elemek kiválasztása name attribútum érték alapján a Document objektum getElementsByName metódusával történik. Tömbbel tér vissza Elemek kiválasztása típus alapján: document.getElementsByTagName HTML elemelet tag name alapján a Document objectnek getElementsByTagName metodusával történik. Az elemek a dokumentumban lévő sorrend alapján helyezkednek el benne. Tehát például a dokumentum első bekezdését a var firstpara = document.getElementsByTagName(„p”)[0]; al kérhetjük le. A HTMLElement is definiál getElementsByTagName() metódust.Pl. Első táblázat minden második sora… var tablazat =document.getElementsByTagName(„table”)[0]; var sorok = tablazat.getElementsByTagName(„tr”); for(var i=1; i<sorok.length; i+=2) { //sorok[i] } Történelmi okokból, a HTMLDocument osztály definiál rövidített adattagokat bizonyos fajtájú node eléréséhez (tehát ezekre nem kell getElementsByTagName, getElementsByName, stb..-t hívni). images, forms, links propertik olyan objektumokra hivatkoznak, amik ,
