JavaScript változók Number Stringek:

Átírás

1 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: 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, , e E-32 Látható hogy ezek mind illeszkednek a jelöléseinkre. Stringek:

2 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 <input type= button onclick= alert( Thank you ) >Click Me</button> 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.

3 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

4 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.length; i++) { console.log(a[i]); Másik módja: for(var index in a) { console.log(a[index]); Itt ez a ciklustípus eltér kicsit a javaban vagy a C#-ban megszokottól, mert itt az indexeket kapjuk meg, nem a hozzájuk tartozó értéket. Ha az indexek nem (csak) számok: var a[];

5 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<indexek.length; i++) { console.log(a[indexek[i]]); Előfordulhat hogy amikor indexeket járunk be, kapunk undefined-ot is Bejáráskor mielőtt dolgozunk az elemmel, érdemes vizsgálni null-e, undefined-e stb.. if(!a[i]) continue; //ha null, undefined stb.. menj a következő iterációra Többdimenziós tömbök: JavaScript nem támogatja a többdimenziós tömböket, de lehet közelíteni őket tömbök tömbjével Pl két dimenziós tömbhöz hasonlót tömbök tömbjével hozhatunk létre. Ennek egy értékéhez két szögletes zárójellel kell hivatkozni Példa: 5x5-ös kétdimenziós tömb létrehozása var table = new Array(5); fo(var i=0; i<5; i++) { table[i]=new Array(5); bejárás for(var i=0; i<5; i++) { for(var j=0; j<5; j++) { table[i][j]=row*col; //2. sor 2. eleme

6 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;

7 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;

8 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

9 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 <body>, <p> és a csúcsók ábrázolják a szövegeket is. Akár kommentet is ábrázolhatnak. Például:

10 Ennek a HTML dokumentumnak a fája <html> <head> <title>sample Document</title> </head> <body> <h1>an HTML Document</h1> <p>this is a <i>simple</i> document. </html> 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()

11 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 <img>, <form>, <a> (de olyan <a>-k amiknek van href attribútum) ok tömbjeiként viselkedenk tehát a forms adattag az a document összes formjának tömbje. Ezek az adattagok (images, forms, links) HTMLCollection objektumokra hivatkoznak, amik annyival többek azoknál amikel getelementsbytagname és társai térnek vissza, hogy ezeket lehet indexelni az elemek ID-val vagy name-vel. document.body, document.head: ezek mindig léteznek Kiválasztás CSS osztály szerint HTML-ben a class attribútum spacel elválaszott 0 vagy több azonosítóból álló lista. Mivel a class egy foglalt szó JavaScriptbe, kliens oldali javascript a classname adattagot használja egy HTML class attribútum értékének módosítására, lekérdezésére Lekérdezni adott osztályba tartozó elemeket a getelementsbyclassname() val lehet: ezzel

12 tehát dokumentum elemek halmazát választhatjuk ki a class attribútumkba található azonosító alapján. Kiválasztás CSS selectorral: queryselector(selector): az első elem, amire illik a CSS selector queryselectorall(selector): össze elem, amire illika CSS selector Fontosabba adattagok Document, Element, Text objektumnak parentnode: a szülőt reprezentáló objektumot adja vissza, ha nincs (pl. document), akkor nullal tér vissza var sor=document.getelementsbytagname( tr )[0]; sor.parentnode; //ez valszeg egy táblázat childnodes: tömb, ami a gyerekeket adja vissza firstchild, lastchild : első, utolsó gyerek nextsibling, previoussibling: őt követő szomszéd, vagy őt megelőz. Attribútumok: HTML elemek (itt még nem a javascriptes objektumokra kell gondolni) tag névből és attribútumokból állnak. Adott HTML elemek attribútumainak értékee elérhető HTMLElement objektumok adattagjaiként, amelyek ezeket az adott HTML elemeket ábrázolják DOM biztosít API-t még nemszabványos HTML attribútum értékek módosítására és lekérdezésére is. HTML attribútumok mint HTMLElement adattagok: A HTMLElement objektumok, amik HTML dokumentum elemeket reprezentálnak, definálnak írható és olvasható adattagokat, amik az elemek HTML attribútumait tükrözik HTMLElement definiál univerzális http propertiket, mint az id, title, lang, dir és esemény kezelőket, mint pl. click. Elem specifikus típusok (<img> elemet ábrázoló HTMLElement) definiálnak csak erre az elemere vonatkozó attribútumokat is, tehát nekik lesz src attribútum is. pl. <img id= kep src= egy.jpg /> src-jét a következő JavaScript kóddal tudjuk változtani var kep = document.getelementsbyid( kep ); kep.src= ketto.jpg ; vagy mivel ez kép document.images[ kep ].src= ketto.jpg ; HTML attribútumok case-insensitivek, de a Javascript properti nevek meg case sensitiveek. Attribútum nevet kisbetűkkel írjuk ha JavaScript adattagként szeretnénk rá hivatkozni. Ha a HTML attribútum több mint egy szóból áll, akkor az első szó kivételével a többit nagybetűvel kezdjük valami.defaultchecked stb..

13 Vannak olyan HTML attribútumok, amelyek JavaScriptben foglalt szavak Ezekre JavaScriptbe más alternatívákat találtak ki for attribútum JS-ben: for->htmlfor class JS-ben: classname Adattagok, amik HTML atttribútumokat ábrázolnak, gyakran string értéket kapnak értéül. De ha az attribútum logikai vagy egész jellegű (pl. checked az logikai jellegű, de maxlength egész), akkor ezek JavaScriptben rendesen logikai és egész értéket kapnak. Pl. egy checkboxról a bejelölést így vehetjük el <input type= radio name= gomb > // document.getelementsbyname( gomb )[0].checked=false; Eseménykezelők mikor adattagon keresztül állítjuk, függvény objektumokat vagy null-t kapnak ha nem akarunk hozzájuk rendelni Ami érdekesebb, a style attribútum. Az ember azt várná, hogy ennek stringet kell megadni (pl. valami.style= font-size: 5px ;) de NEM. A style adattag értéke minden HTML elemnél CSSStyleDeclaration. Ennek a style objektumak az adattagjai reprezentálják a HTML style attribútum CSS beállításait (neveit és értékei) Így nem név:érték párként adjuk minden CSS tulajdonságnak van a CSSStyleDeclaration-ba adattag és annak kell értéket adni. tehát valami.style= font-size: 5px NEM JÓ, HELYETTE valami.style.fontsize= 5px ; Elemek tartalmat. Három féle tartalmat különböztethetünk meg. 1. Tartalom HTML szöveg This is a <i>simple</i> document Egy Element-nek az innerhtml adattagját olvasva az elemen belüli HTML tartalmat kapjuk meg (tehát HTML jelölésekkel, mindennel). Pl. ha egy table-re alkalmazzuk, akkor sok <tr></tr> meg ilyesmit tartalmazna. 2. Tartalom sima szöveg: This is a simple document Az elem tartalmát lehetőségünk van sima szövegként lekérdezni. textcontent adattag ha van ilyen a dokumentumba hogy <p> This is a <i>simple</i> document </p> var para = document.getelementsbytagname("p")[0]; // First in the document var text = para.textcontent; // Text is "This is a simple document." para.textcontent = "Hello World!"; // Alter paragraph content

14 3. Tartalom Text node, vagy olyan Element node (HTMLElement osztály), aminek van szöveget leíró gyereke (ezt nem részletezzük) Elem készítése, beszúrása, törlése Elem készítése: pl. bekezdés készítése és beszúrás egy div-be var par = document.createelement( p ); par.innerhtml= Alma ; document.getelementsbytagname( div )[0].appendChild(par); Létrehozni: Document createelement metódusával lehet Beszúrni: Document element vagy HTMLElement appendchild metódusával vagy insertbefore(mit akarunk beszúrni, mi elé) document.insertbefore(par, document.getelementsbytagname( p )[0]); Broweser Object Model Böngésző kezelésére irányul Egy böngésző több dokumentum history objektum: felhasználó által látogatott URL-ket tartalmazza (egy browser windowsba) history objektum a window objektum része, window.history adattagon keresztül érhetjük el adattagjai length: előzmények listába az URL-k száma (window.history.length) metódusok: back(): előző URL-t betölti forward() következő URL-t betölti go() meghatározott URL-t tölt be az előzmény listából Fontosabb események: onload: betöltődés. Például window.onload=function() { //betöltődéskor ez végrehajtódik) onsubmit: ez az esemény akkor következik be, ha egy formot elküldünk. Tehát ezt formokra lehet meghatározni, a form HTML definícióban, vagy egy form HTML Element onsubmit adattagjában onchange onkeydown onkeyup onclick ondbclick:dupla kattintáskor mi történjen

15 navigator:ez egy objektum, a böngészőről tárol információkat navigator.appname: böngésző alkalmazás neve navigator.cookieenabled: böngészőbe a sütik engedélyezve vannak-e Window objektum a fő belépési pontja mindegyik kliens oldali javascriptnek Ez web böngésző ablakot vagy frame-t ábrázol és a window azonosítóval tudunk rá hivatkozni. Window objektum definiál adattagot, például: location, ez egy Location objektumra hivatkozik, ami az ablakban aktuálisan megjelenítendő URL-t határozza meg. Segítségével írható lenne olyan script, ami új URL-t tölt be (tehát nem csak <a> elemekkel érhetjük el ezt a hatást) alert(): Window objektum által definiált metódus, ami üzenetet jelenít meg dialógusablakban. Kliens oldalon a Windo objektum globális objektum, ezért pl window.alert( itt ) helyett elég alert( itt )-et írni. Window objektum egyik legfontosabb adattagja (erről volt szó az előbbiekben: a document) Math Alap matematikai függvények és konstansok round() random() [0,1] sqrt() max() min() PI E String Karakterlánc str[3] "alma".length = 4 Escape szekvenciák indexof() match() : megadott szabályos kifejezésre illeszkedő mintákat keres szövegben, és a találatok tömbjével tér vissza replace() touppercase() tolowercase() split() trim(): whitespace-ek eltárolás a string mindkét oldaláról. Ezek műveletek nem módosítják azt a stringet, amire meghívjuk, hanem visszaadnak új stringet, amibe a függvény által elkövetett módosítások látszanak is.

16 var str = " Hello World! "; alert(str.trim()); Kimenet: Hello World! Cookiek (sütik): Webes alkalmazások használhatják a böngésző API-t hogy adatok lokálisan a felhasználó gépén tároljanak. Kliens oldali tárolás tulajdonképpen arra hivatott, hogy a böngészőnek memóriát adjon. Webes alkalmazások így megjegyezhetik, hogy a felhasználó milyen háttérel szereti a weblapot, vagy hogy nem kell csak egyszer beírni a hosszadalmas felhasználónevet és jelszót, és ezután a böngésző megtudja jegyezni. Szeparált olyan értelemben, hogy oldalak egy weboldalrol (kiszolgálóról?) nem tudják olvvasni másik weboldal oldalai által a felhasználó böngészőjében eltárolt adatokat. De két oldal ugyanarról a weboldalról(kiszolgálóról) megoszthatja a tárolást (~adatokat) és akár kommunikációs mechanizmusként is használhatják.például: Egyik oldalon form bemenetét meg lehet jeleníteni egy másik oldalon, táblázattal Webes alkalmazások tudják a tárolt adatok élettartalmát is választani: adatokat tárolhatunk ideiglenesen,azaz addig tárolódnak, amíg az ablak nem záródik be vagy a böngésző létezik de lehet tárolniúgy is, hogy akár hónapig, sőt évekig elérhető legyen A kliens oldali adatttárolásnak számos formája van, egyik formája: Cookies régi kliens oldali tárolási mechanizmus, eredetileg server oldali scriptekre volt tervezve. Későbbiekben lett scriptelhető kliens oldalon alapvetően nehéz őket használni, és kisebb mennyiségű szöveges adat tárolására megfelelő inkább. Tehát minden adat, ami sütiként van tárolva, előbb utóbb a szervernek lesz elküldve minden http kéréskor, még akkor is, ha az adatok csak a kliens számára érdekesek mégis elterjedt, mert minden böngésző, legyen az régi, új, támogatja. maga a süti (cookie) egy kis mennyiséű elnevezett adat, amit a böngésző tárol és ami egy bizonyos weboldalhoz, vagy website-hoz van társítva. legalacsonyabb szinten, http protokol bővítményeként implementálták. süti adatok automatikusan elküldve vannak a webböngésző és webszerver között, így szerver oldali scriptek tudják olvasni és tudnak írni süti adatokba, amik a kliensen tárolódnak. Document objectumank (így a document)-nek is van cookie adattagja. Elnevezés eredete: cookie, magic cookie : kisebb adat darabra használt elnevezés volt, titkos adatokra, amiket azonosítást tudnak szolgálni JavaScriptben állapot mentésre használjuk, és a böngészőkre bizonyos azonosítás megvalósítását teszi lehetővé

17 egy cookienak van neve és értéke alapértelmezett élettartam: utoljára beleírtt értékeket tárolják és elvesznek, ha a felhasználó kilép a böngészőből sütikeltárolása: name=value document.cookie = nev= + Balint ; süti értékek nem tartalmazhatnak pontosvesszőt, vesszőt vagy whitespacest max-age attribútum: cookie élettartama másodpercbe name=value; max-age=seconds;