JavaScript programozási nyelv - jQuery könyvtár

Manipulation

String

A JavaScript string-jei lehetnek üresek, vagy tartalmazhatnak egy vagy annál több karaktert, ezeket szimpla vagy dupla aposztrófok közé kell zárni

"I'm a String in JavaScript!" 'So am I!'

A string típusa "string":

typeof "some string"; // "string"

Aposztrófok

Ha egy string aposztrófor tartalmaz, használjuk a string határainak ejlölésére a másik típusú aposztrófot, vagy \ karakterrel védjuük le a jelentését:

"You make 'me' sad." 'Holy "cranking" moses!'

Beépített metódusok

A JavaScript számos stringkezelő metódust tartalmaz, a végeredmény mindig egy új string, vagy más, pl a split tömböt ad vissza.

"hello".charAt(0) // "h" "hello".toUpperCase() // "HELLO" "Hello".toLowerCase() // "hello" "hello".replace(/e|o/g, "x") // "hxllx" "1,2,3".split(",") // ["1", "2", "3"]

String-ek hossza

Egy string hosszát a lenght tulajdonságának(property) lekérésével kapjuk meg:

"Hello".length // 5 "".length // 0

boolean

Egy üres string alapesetben false

!"" // true !"hello" // false !"true" // false !new Boolean(false) // false

Számok

12 3.543

a számok típusa "number":

typeof 12 // "number" typeof 3.543 // "number"

Boolean

Ha egy szám nulla, akkor a boolean értéke false.

!0 // true !1 // false !-1 // false

A számok és a double értékének pontosságának köszönhetóen a következő eredmény nem hiba:

0.1 + 0.2 // 0.30000000000000004

Matematika

A JavaScript, a számokkal való munkára a Math objektumban kínál eszközöket.

Math.PI // 3.141592653589793 Math.cos(Math.PI) // -1

Számmá alakítás

parseInt és parseFloat segít stringeket számmá konvertálni.

parseInt("123") = 123 (implicit decimal) parseInt("010") = 8 (implicit octal) parseInt("0xCAFE") = 51966 (implicit hexadecimal) parseInt("010", 10) = 10 (explicit decimal) parseInt("11", 2) = 3 (explicit binary) parseFloat("10.10") = 10.1

Számok stringre konvertálása

JavaScriptben számok összeadására és stringek konkatenálására is a + jelet használjuk. Ha 2 szám közé + jelet teszünk, a számokat adjuk össze. ha nem ez a célunk, az összedás elejére üres stringet írva stringet kapunk eredményként

"" + 1 + 2; // "12" "" + (1 + 2); // "3" "" + 0.0000001; // "1e-7"

Ezen kívül használhatjuk a String osztályt:

String(1) + String(2); //"12" String(1 + 2); //"3"

NaN és végtelen

ha nem számot próbálunk konvertálni, NaN-t kapunk:

parseInt("hello", 10) // NaN isNaN(parseInt("hello", 10)) // true

Nullával osztás végtelent ad

1 / 0 // Infinity

A NaN és a végtelen típusa is number

typeof NaN // "number" typeof Infinity // "number"

NaN-ok összehasonlítása érdekes eredményt ad:

NaN == NaN // false (!)

végtelen esetén viszont

Infinity == Infinity // true

Integer

Egy integer egy sima Number típus, de bármikor explicit leírható, egy nem lebegőpontos számot jelől.

Float

Egy float egy sima Number típus, akár az integer, de bármikor explicit leírható, egy lebegőpontos számot jelől.

A Boolean

JavaScript-ben a boolean true vagy false lehet:

if ( true ) console.log("always!") if ( false ) console.log("never!")

Ha egy option-t booleanként haszánlunk, az gyakran így néz ki:

$("...").somePlugin({ hideOnStartup: true, onlyOnce: false });

Objektumok

JavaScript-ben minden objektum, de néha több annál:) A legegyszerűbb módja, hogy objektumot hozzunk létre, a literál:

var x = {}; var y = { name: "Pete", age: 15 };

az objektumok típusa object

typeof {} // "object"

Hozzásérés pontal

A pont segítségével tudjuk lekérdezni vagy beállítani egy objektum tulajdonságait(property). Az előző példát felhasználva:

y.name // "Pete" y.age // 15 x.name = y.name + " Pan" // "Pete Pan" x.age = y.age + 1 // 16

Hozzáférés tömbként

Ha asszociatív tömbként használjuk az adatszerkezetünket, a [] jelekkel férünk hozzá a tartalmához:

var operations = { increase: "++", decrease: "--" } var operation = "increase"; operations[operation] // "++"; operations["multiply"] = "*"; // "*"

Iterátor

A nyelv lehetőséget ad a for használatával végig haladni az adatszerkezez minden elemén.

var obj = { name: "Pete", age: 15 }; for(key in obj) { alert("key is "+[key]+", value is "+obj[key]); }

megjegyezzük, hogy a for-in-loop elrontható az Object.prototype (lásd Object.prototype tiltott) , szóval csínyán bánj a külső könyvtárak alkalmazásával.

jQuery kínál egy generikus ún. each-function függvényt, mellyel bejárhatod az objektumok tulajdonságait(property), mint egy tömb elemeit.

jQuery.each(obj, function(key, value) { console.log("key", key, "value", value); });

A hátrány az, hogy a callback minden érték kontextusában meghívódik, ezért elveszted a saját objektumod kontextusát.

Boolean

függetlenül attól, hogy az objektumnak ven-e tulagdonsága, a boolean értéke nme false:
!{} // false

Prototípusok

Minden objektum rendelkezik egy prototípus (prototype) tulajdonsággal. jQuery-ben ezek segítségével tudunk metudusokat létre hozni:

var form = $("#myform"); form.clearForm; // nem definiált form.fn.clearForm = function() { return this.find(":input").each(function() { this.value = ""; }).end(); }; form.clearForm() // works for all instances of jQuery objects, because the new method was added to the prototype

Options

A jQuery options-ök egyszerű JavaScript objektumok. Abban az esetben, ha az Options van megadva típusként, akkor ez a tárgy és annak minden tulajdonsága(property) opcionális. Vannak kivételek, ahol legalább egy option szükséges. Az option-öket leggyakrabban az AJAX-metódusokban használjuk. Majdnem minden jQuery csatlakozás biztosít options-alapú API-t: Ezek konfiguráció nélkül működnek, de a felhasználónak lehetővé teszi, hogy testre szabhassák, ha szükséges.

Tekintünk egy példát a form pluginból. Elküldhetsz egy form-ot AJAX-on kersztül a következő egyszerű kóddal:

("#myform").ajaxForm();

Ebben az formában a form action-attribútumát, mint AJAX-URL és a form method-attribútumát, mint annak meghatározása, hogy a metódus GET vagy a POST használja. Ezek felüldefiniálhatóak, optionként való megadással:

$("#myform").ajaxForm({ url: "mypage.php", type: "POST" });

Tömbök

a JavaScript tömbök valójában dinamikus listák néhány beépített metódussal. Tömb definiálásához használjuk a következőt:

var x = []; var y = [1, 2, 3];

A típus tömbje "objektum":

typeof []; // "object" typeof [1, 2, 3]; // "object"

tömbök írására és olvasására a tömbös jelölést használjuk:

x[0] = 1; y[2] // 3

Iteráció

A tömböknek a length tulajdonsága(property) hasznos lehet számunkra:

for (var i = 0; i < a.length; i++) { // Do something with a[i] }

Ha fontos a teljesítmény, a length tulajdonságot(property) csak egyszer kiolvasva optimalizálhatunk a végrehajtáson:

for (var i = 0, j = a.length; i < j; i++) { // Do something with a[i] }

Egy másik lehetőség, hogy foreach-szerően haladunk végig a tömbön:

for (var i = 0, item; item = a[i]; i++) { // Do something with item }

Egy másik lehetőség szerint készítünk egy változód, ami minden iterációban értéket kap, eltávolítva ezzel a tömbös jelölést a ciklusmagból. Ez a módszer nem használható, ha a tömb tartalmaz nullát vagy üres stringet.

jQuery biztosít egy generikus each függvényt, mellyel végigiterálhatunk a tömbök elemein, valamint properties objektumokon:

var x = [1, 2, 3]; jQuery.each(x, function(index, value) { console.log("index", index, "value", value); });

A hátrány az, hogy a callback minden érték kontextusában meghívódik, ezért elveszted a saját objektumod kontextusát.

a length segítségével új elemet is adhatunk a tömbhöz. Ugyan azt az eredményt érjük el a push metódus használatával:

var x = []; x.push(1); x[x.length] = 2; x // 1, 2

mindkét verzióval fogsz találkozni, ha a JavaScript library-ket nézegeted

Egyéb beépített metódusok a reverse, join, shift, unshift, pop, slice, splice és a sort:

var x = [0, 3, 1, 2]; x.reverse() // [2, 1, 3, 0] x.join(" – ") // "2 - 1 - 3 - 0" x.pop() // [2, 1, 3] x.unshift(-1) // [-1, 2, 1, 3] x.shift() // [2, 1, 3] x.sort() // [1, 2, 3] x.splice(1, 2) // [2, 3]
Megjegyzés: .unshift() metódus nem tér vissza internet explorerben a length-el.

Boolean

Egy tömb, függetlenül attól, hogy tartalmaz-e elemet vagy nem, sosem false értékű

![] // false

Array<Type> jelölés

a jQuery API-ban gyakran találkozhatsz a következő jelöléssel:

dragPrevention Array<String>

Ezt azt jelenti, hogy a metódus nem csak tömböt vár argumentumként, hanem azt is specifikálja, hogy milyen típusokat tartalmazhat az elvárt tömb.

MAP-ek

A map típus az AJAX függvények által használatosak arra, hogy tárolják egy kérés (request) adatait.

{'key[]':['valuea','valueb']}

Szerveroldalon ez így néz ki (PHP-ban):

$_REQUEST['key'][0]="valuea"; $_REQUEST['key'][1]="valueb";

Függvények

A JavaScript függvények rendelkezhetnek névvel, de lehetnek névtelenek is. Egy függvényt értékül adhatunk egy változónak, vagy átadni egy metódusnak, így meghívhatóak egy másik objektum kontextusában is (például egy másik "this" objektummal)

function named() {} var handler = function() {}

a jQuery kódban gyakran szerepelnek névtelen függvények:

$(document).ready(function() {}); $("a").click(function() {}); $.ajax({ url: "someurl.php", success: function() {} });

a függvények típusa "function".

Argumentumok

a függvények belsejében mindig elérhető egy speciális "arguments" változó. Hasonlít egy tömbhöz, aminek van lenght tulajdonsága(property), de hiányoznak belőle a beépített metódusok. A pszeudó-tömb elemei az argumentumai a függvényhívásnak.

function log(x) { console.log(typeof x, arguments.length); } log(); // "undefined", 0 log(1); // "number", 1 log("1", "2", "3"); // "string", 3

az argumentum objektumoknak van egy "calee" tulajsonságuk, ami arra a függvényre hivatkozik, amiben használjuk:

var awesome = function() { return arguments.callee } awesome() == awesome // true

Context, Call and Apply

JavaScriptben a "this" változó mindig az aktuális környezetre hivatkozik. Alapesetben a window objektumra hivatkozik. Egy függvénnyben ez megváltozhat, attól függően, hogy hol hívtuk a függvényt.

A jQueryben minden eseménykezelő az adott elemhez van hozzárendelve.

$(document).ready(function() { // this refers to window.document }); $("a").click(function() { // this refers to an anchor DOM element });
Specializálhatjuk ezt a kontextust fügvényhívásként a call és az apply beépített metódusokkal. A különbség a kettő közt, hogy hogyan adják át az argumentumokat. A call argumentumként adja át, míg az apply tömbként.
function scope() { console.log(this, arguments.length); } scope() // window, 0 scope.call("foobar", [1,2]); // "foobar", 1 scope.apply("foobar", [1,2]); // "foobar", 2

Hatókör

JavaScriptben minden függvényben definiált változó csak a függvényen belül látható:

Tekintsük a következő példát:

// global var x = 0; (function() { // private var x = 1; console.log(x); // 1 })(); console.log(x); // 0

Ez egy x változót definiál globálisként, aztán definiál egy névtelen függvényt, és azonnal végre is hajtja (a zárójelek szükségesek az azonnal futtatáshoz) A függvényben egy másik x változó egy másik értékkel szerepel. ez csak a függvényen belül látható, és nem írja felül a globális változót.

Lezárások

Akkor jönnek létre, amikor az aktuális hatáskörön kívül definiált változóhoz férünk hozzá egy belső hatáskörből. A következő példában a counter változó látható a create, increment és print függvényekből, de kívül nem.

function create() { var counter = 0; return { increment: function() { counter++; }, print: function() { console.log(counter); } } } var c = create(); c.increment(); c.print(); // 1
Ez a minta lehetővé teszi, hogy objektumot hozzunk létre olyan metódusokkal, ami műveletet végez egy kívülről nem látható adaton: Ez az objektumorientáltság alapja.

Proxy (Közvetítő) tervminta

Keverjük össze a fenti ismereteket, például implementáljuk le a közvetítő retvezési mintát JavaScript segítségével:

(function() { // log all calls to setArray var proxied = jQuery.fn.setArray; jQuery.fn.setArray = function() { console.log(this, arguments); return proxied.apply(this, arguments); }; })();

A függvény elrejti a közvetítendő proxied változót. Lementi a jQuery setArray metódusát egy lezárásba, majd felülírja azt. A közvetítő loggol minden hívást, és meghívja az eredetit. Az apply használata garantálja, hogy a hívó nem tudja megkülönböztetni az eredezit a közvetítőtől.

Callback

a callback egy egyszerű JavaScript függvény, ami metódusnak van átadva, mint argumentum vagy opció. némely callbackek sima események, lehetőséget biztosítva ezáltal a fejlesztőnek, hogy bizonyos állapotváltozásokra reagálni tudjon. jQuery eseményrendszere ilyen callback-eket használ mindenhol:

$("body").click(function(event) { console.log("clicked: " + event.target); });

A a legtöbb callback gondoskodik argumentumokról és egy konetxtusról. Az eseménykezelő példában, a callback egyetlen egy argumentummal, az Eventtel lett meghívva. A kontextus maga a kezelő elem, a fenti példában a document.body.

Némely callbacknek vissza kell térnie valamilyen értékkel, másoknál ez opcionális. Megelőzni egy űrlap beküldését a beküld (submit) eseménykezelő vissza tud térni false értékkel:

$("#myform").submit(function() { return false; });

Ahelyett, hogy mindig hamissal térne vissza, a callback ellenőrizheti a mezőket az űrlapban validálási céllal és csak akkor tér vissza hamissal, ha az űrlap nem megfelelően van kitöltve.

Selector

a selector a jQuery-ben arra való, hogy kiválasszunk egy DOM elemet a DOM dokumentumból. Ahogy a dokumentumok áltlában, a DOM dokumentum is megjelenik a böngészőben, de lehet egy XML is, amit egy AJAX hívás adott vissza.

A szelektorok CSS és egyéb elemekből állnak. XPaht selectorok kigészítőként (pluginként) érhetőek el.

A jQuery összes selectora dokumentálva van a Selectos API page oldalon

Sok plugin létezik, melyek valahogyan befolyásolják a selectorok működését. A validációs plugin elfogad egy selector, hogy specifikáljon egy függőséget, hogy mely input kötelező és melyik nem:

emailrules: { required: "#email:filled" }

Események

a jQuery esemény rendszere a W3C ajánlása szerint normalizálja az eseményeket. Egy esemény objektumot garantáltan egy eseménykezelő fog megkapni.

A szabványos események a DOM-ban: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup.