Invalid RSS feed!

jQuery Alapok – Bevezetés

-

A jQuery Alapok című oktató sorozat segítségével bevezetést nyerhetünk a jQuery JavaScript program könyvtár használatába. Megtanulhatjuk a rendszer alap szintű használatát, valamint megtudhatjuk hogy miért ilyen hatékony.

jquery-alapA jQuery egy erőteljes és népszerű JavaScript keretrendszer, amit John Resig alkotott meg és mutatta be, elsőként a 2006-os New York-i Barcamp-en. A framework a HTML-t és a JavaScript-et igyekszik közelebbi kapcsolatba hozni. Igyekszik a JavaScript-ben megismert technikákat használhatóbbá és egyszerűbbé tenni úgy, hogy az eredeti nyelv erejéből semmit nem veszít. Úgy is írhatunk jQuery kódot, ha nem ismerjük a JavaScript-et, azonban ahhoz hogy a megfelelő eredmények érjük el feltétlenül fontos, hogy kellően ismerjük az alapot, amire a keretrendszer épül.

A Dokumentum Objektum Modell (DOM)

A DOM egy standard objektummodell, amire a HTML, XML is épül. A modell egymással gyerek-szülő kapcsolatban álló objektumok rendszere. A kialakulása a böngészőháború kezdetére tehető, fejlődése a böngészők, illetve a JavaScript fejlődésével köthető össze. A DOM segítségével érhetjük el a HTML dokumentumunk elemeit, valamint a böngésző eseményeit, mint a kattintás, vagy a görgetés. A DOM-ban az elemeket node-nak, vagyis csomópontnak nevezzük.

Alap DOM szerkezet bemutatása:

<div>
   <p>Szöveg</p>
   <p>Szöveg</p>
</div>

div elem csomópont
– bekezdés elem csomópont
– – szöveg csomópont
– – szöveg csomópont

jQuery letöltése

A jQuery-t a jQuery.com oldalról tölthetjük le. A jelenlegi legfrissebb verzió az 1.10.1 és a 2.0.2 ( a 2-es verzió számú jQuery abban különbözik az 1-es jelölésűtől, hogy elhagyták az IE 6, 7, 8 támogatását ). Választhatunk, hogy letöltjük és miután elhelyeztük a könyvtárunkban a fájlt, hivatkozunk rá. Vagy választhatjuk a CDN linket, amit az oldal alján találhatunk, valamint a Google Code-ról is belinkelhetünk.

<script src="https://code.jquery.com/jquery-latest.js"></script>

Alap jQuery Kód

A JavaScript kódot, vagy a linket a külső fájlhoz két helyre tudjuk beszúrni a HTML fájlunkban: a head részbe és a záró body tag elé. Az utóbbinak a teljesítmény szempontjából van jelentősége, hiszen a kód a HTML kód után töltődik le.

Ezzel elő is jön az első probléma a JavaScript kódok futtatása során. Ha a JavaScript/jQuery kód a head részben található, akkor a kód az előtt fut le, mielőtt létre jönne maga a HTML dokumentum és annak a DOM-ja, vagyis mivel a kód lefutásakor még nem létezik, így módosítani/hozzáférni sem tudunk. Erre jelenthet megoldást a már említett záró body tag előtti elhelyezés, vagy a JavaScript-ben használatos onload eljárás jQuery megfelelője a ready() eljárás.

$( document ).ready(function() {
    console.log( "ready!" );
});

A fenti kódrészlet belsejében található console.log() függvény akkor fut le, ha a dokumentum teljesen betöltött. A kijelelőben található document elnevezéssel a dokumentumot jelöljük ki, míg a ready() eljárás segítségével elérhetjük, hogy a kód az oldal letöltődése után fusson le, vagyis akkor amikor már kész a HTML szerkezet.

$(function() {
    console.log( "ready!" );
});

Ugyanennek a megoldásnak létezik egy rövidebb változata, melyben a $ (jQuery definiáló karakter) után egy üres függvényt nyitunk, amiben elhelyezzük a futtatni kívánt kódot. Az üres függvény hívás egy megszokott eljárás jQuery-ben, amivel még sokat találkozunk az egyéb eljárások visszatérése során.

$(function() {
   $("div").click(function() {
      $("body").css("background", "#ccc");
   });
});

Tehát, a fent bemutatott kódrészlet, miután betöltött a dokumentum kattinthatóvá teszi a div elemünket, ami a kattintás hatására az egész törzs hátterét #ccc értékűre állítja.

Fejlesztést segítő eszközök

A fejlesztés során a legnagyobb segítségünk a böngészőnk fejlesztői panelja lesz. Chrome-ban a Shift + CTRL + I-vel tudjuk elő hívni és ha kiválasztjuk a console fület megtekinthetjük az esetleges hibáinkat és kiíratásainkat.

Részeredmények kiíratása, avagy console.log()

Hasznos segítség a console.log() függvény, mellyel bármilyen változó, objektum, tömb, string-et kiírathatunk a böngészőnk fejlesztői paneljára.

Kiíratás a console.log() függvénnyel.
Kiíratás a console.log() függvénnyel.

jQuery dokumentáció

A legnagyobb segítség számunkra a jQuery hivatalos dokumentációja. Részben ennek is köszönheti a framework a népszerűségét, hiszen tökéletes dokumentációt készítettek hozzá, ahol minden szükséges információt megtalálhatunk.

A click() eljárás dokumentációja.
A click() eljárás dokumentációja.

Összefoglalás – jQuery Alapok – Bevezetés

A jQuery egy lenyűgöző eszköz, ahhoz hogy hatékonyabbak legyünk. Az elsajátítása egy kis előismeret után meglepően gyorsan véghez vihető. Azonban fontos, hogy tisztában legyünk a HTML/CSS, JavaScript, DOM alapjaival. Természetesen előnye és hátránya is van a keretrendszerek használatának. Mivel nagy mennyiségű kódrészletet tesz közénk és a programnyelv közé figyelnünk kell rá, hogy a lehető leghatékonyabb kódot írjuk meg, hogy a programjaink kellően gyorsak legyenek. Igaz ez hátrány, de ez lehet előny is, hiszen csak jobb kód írására ösztönöz minket. Előny, hogy a böngészők kompatibilitásával nem kell foglalkoznunk, megoldja a jQuery. A program könyvtár tanulmányozása során nem törekszem az összes eljárás bemutatására, felesleges is lenne, hiszen a dokumentációban megtalálhatunk minden információt.

A sorozat további részei

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.