JavaScript és JQuery - a biztos alapok

Termékleírás

A tanfolyam a JavaScript (ECMAScript) nyelven és a Document Object Model (DOM) szabványon keresztül megismerteti a hallgatókat a kliens oldali programozás alapelveivel. Bemutatjuk a JavaScript történetét és szerepét a weboldalakon. Tisztázzuk a JavaScript-hez kapcsolódó, kicsit összekeveredett fogalmakat. Megnézzük, hogy napjainkban milyen webszabványok segítik szabályozott mederbe terelni a kliens oldali programozást, illetve azt, hogy ezeket a különböző böngészőprogramok hogyan és milyen mértékben támogatják.

Az elméleti alapok lefektetése után gyakorlati példákon keresztül megismerkedünk a modern DOM szkriptelés lehetőségeivel, az egyes elemek elérésével és manipulálásával.

A tanfolyam második részében tisztázzuk, hogy a jQuery-nek milyen szerepe lehet a weboldalon, és hogyan kapcsolódik a weboldal HTML/CSS/JavaScript rétegeihez. Megtanuljuk hogyan lehet jQuery kiválasztókat írni a DOM elemek összegyűjtéséhez, majd hogyan lehet az így összegyűjtött elemeket többszörösen manipulálni. Ezt követően megismerkedünk a jQuery eseménykezelő modelljével és animációs effektusaival. Röviden betekintünk az AJAX technológia kliens oldali használatába a jQuery-n keresztül.

Kiknek ajánljuk

A tanfolyamot azoknak az elszánt webfejlesztő jelölteknek szánjuk, akik a HTML és CSS, esetleg valamilyen CMS  rendszer megismerése során ráébredtek arra, hogy manapság JavaScript tudás nélkül nem lehet boldogulni.

Szükséges előképzettség

• Stabil HTML és CSS ismeretek

• Bármilyen programozási ismeret előny, de nem feltétel

Tematika

Bevezető

- A JavaScript és a kliens oldali programozás története
- A kliens oldali szkriptek szerepe a weboldalakon
- A kliens oldali programozáshoz kapcsolódó webszabványok
- Az ECMAScript, a Browser Object Model (BOM) és a Document Object Model (DOM) fogalma, kapcsolata
- A DOM szkriptelés fogalma
- A jQuery és egyéb JavaScript könyvtárak szerepe

A JavaScript kód és a HTML kód kapcsolata

- JavaScript jelölése a HTML kódban
- Beágyazott kontra külső JavaScript kód

JavaScript kód nyomkövetése és hibakeresése

- Beépített vagy letölthető fejlesztői eszközök használata a böngészőprogramokban

jQuery bevezető

- Mi a jQuery és mire használható?
- jQuery letöltése és beillesztése az oldalba
- A fejlesztői és a produkciós verzió összehasonlítása
- jQuery névtér és a jQuery "$" alias
- jQuery szintaktika

JavaScript (ECMAScript) nyelvi alapok

- Változók, értékadások, adattípusok, műveletek
- Döntéshozatal, értékek összehasonlítása
- Szelekciók
- Ciklusok
- Függvények
- Tömbök
- Objektumok
- Hasznos jQuery segédfüggvények

Browser Object Model (BOM)

- A BOM felépítése, objektuma

Document Object Model (DOM)

- A hagyományos "DOM Level 0"
- W3C DOM (Level 1,2,3)
- DOM támogatás a böngészőkben
- Jellegzetes DOM fogalmak: fa, csomópontok, szülő-gyerek-testvér viszony

DOM csomópontok elérése natívan és jQuery-vel

- Csomópontok közvetlen elérése id vagy jelölőelem-név alapján
- Szülő, gyermek és testvér csomópontok elérése
- Szövegcsomópontok
- DOM elemek elérése jQuery segítségével
- jQuery kiválasztók és szűrők
- jQuery objektum és wrapped set fogalma

DOM csomópontok manipulációja natívan és jQuery-vel

- Elemek attribútum manipulációja
- Elemek megjelenésének manipulációja közvetlen CSS stílusmanipulációval és osztálymanipulációval
- Elemek beillesztése, másolása, áthelyezése, törlése
- Tartalom módosítása
- Többszörös manipuláció a jQuery függvények láncolásával

Eseménykezelés natívan és jQuery-vel

- Az esemény fogalma, HTML események
- Eseményfolyam modellek
- Eseménykezelési modellek a böngészőprogramokban (hagyományos, DOM Level 2, IE)
- jQuery eseménykezelés

Időzített események

- Egyszer lefutó időzítő
- Folyamatosan ismétlődő időzítő

jQuery effektek és animációk

- Alapszintű effektek (elrejtés, elhalványítás, stb)
- Saját animációk létrehozása

Az AJAX technológiáról röviden

- Betekintés az AJAX technológiába
- Az XMLHttpRequest objektum
- Ajax hívások jQuery-ből

Űrlapkezelés jQuery segítségével

- Űrlapellenőrzés, hibakezelés
- Adatbevitelt támogató megoldások

jQuery bővítmények használata

- Az alap jQuery és a jQuery UI kapcsolata
- jQuery plugin-ek letöltése, használata