A ‘JavaScript’ kategória arhívuma

Analóg óra készítése Photoshop és Flash segítségével, SWFObject rész

Az előző részekben létrehoztunk egy analóg órát Photoshop segítségével, a mutatókat „elindítottuk” ActionScript-el. A mostani részben Javascript kódot használva beágyazzuk a HTML kódba.

III. rész SWFObject

Az SWFObject – mostantól csak so – egy nyílt forrású Javascript könyvtár, amit a Flash tartalmak gyors és egyszerű beágyazására használhatsz a weblapodon. Nem kell az <object> vagy az <embed> tag-ekkel bajlódni – ez utóbbi nem is standard! A böngészők közti különbségről nem is beszélve, ezért hát elég macerás olyan kódot írni, ami a főbb böngészőkben megfelelően működik. Hogy ezzel ne kelljen szórakozni, segítségül hívjuk a so objektumot. A so csak egy pár sor adatot kér, a többit majd ő intézi (böngésző és Flash player detektálás stb.).

jQuery: Alapok

Miután sikeresen letöltötted a jQuery keretrendszert, itt az ideje, hogy tovább lépj! Mint minden más JavaScript állományt, ezt is a <script type=”text/javascript”></script> tag-ekkel tudod a HTML oldaladba ágyazni.

Kezdjük azzal, hogy mivel amíg a DOM nincs felépítve nem szabad JavaScript kódot futtatni, mert elronthatja az oldal szerkezetét, ha a félig felépített DOM-ot akarod szerkeszteni (vagy egyszerűen JavaScript hibát ad, ha például egy elemet elszeretnél rejteni, de az még nincs a DOM-ba bekerülve, így nem található). Ez egy általános JavaScript probléma, a jQuery megoldása viszont egyszerű!

$(document).ready(function(){ alert('igen!'); });

jQuery: A Framework

A jQuery keretrendszer 2006 januárjában látott először napvilagot a BarCamp elnevezést viselő rendezvényen, New Yorkban. A bemutató John Resig volt. Jelenleg a legelterjedtebb JavaScript framework úgy a nagy és elismert, mint a kissebb és kevésbé neves weboldalak esetében. A keretrendszer ingyenes és nyiltforráskodú.

jQuery: JavaScript Framework alapok

A JavaScript nyelv önmagában is egy nagyon jól és könnyedén használható, erőteljes programozási eszköz. Rengeteg dolog egyszerűen megoldható vele, de nem előnyös a kódot mindig ismételni, mivel az több gondot is okozhat (hibajavítás, rendbentartás, továbbfejlesztési nehézségek, stb.). További szükség a JavaScript könyvtárak/keretrendszerek létrehozására, hogy az alapokat nem feltétlenül ismerő felhasználók is gyorsan és egyszerűen tudjanak cross-browser animációkat, AJAX lekéréseket és egyéb dolgokat végezni. Mára már szinte nélkülözhetetlen egy jó framework a gyors, bővíthető, megbízható fejlesztéshez.

A legtöbb framework cross-browser akár több, mint 10 évre visszamenőleg is (a Rico keretrendszer az Internet Explorer 5.5-öt is támogatja). Közös pontjaik közé tartoznak a AJAX lekérések, a JSON feldolgozása, drag and drop, egyszerű és komplex animációk, event handling (esemény kezelés), űrlap validálás és űrlap elem kiegészítés (pl. naptár), illetve beépített szövegszerkesztő.

jQuery: Bevezető

Bizonyára többen használtatok már JavaScript-et és JavaScript keretrendszereket. Ez a leírás sorozat főként azoknak szól, akik még nem vagy keveset használtak JavaScript Framework-okat. A fókusz a jQuery-re esett, mivel ez az egyik legelterjedtebb és legerőteljesebb keretrendeszer, ami a JavaScript-re épül.

A leírás sorozat az alapoktól indulva a haladó témákig próbál különböző területeket érinteni. A követlező témákról lesz szó:

1. JavaScript Framework alapok
2. A Framework
3. Alapok
4. Szelektorok és DOM bejárás
5. Mark-up módosítás
6. Stílus módosítás
7. Egyéni adat kezelés
8. Effektek
9. Események (event)
10. AJAX
11. Űrlapok
12. Plug-in készítése
13. Legjobb 15 kiegészítő
14. jQueryUI
15. jQueryMobile

Űrlapok készítése és formázása: CSS és jQuery trükkök

Sokaknak a mai napig gondot vagy fejtörést okoz az (X)HTML űrlapok készítése. Régen táblázatokkal volt megoldva a formázás, természetesen ez nem helyes szemantikailag. Ha kinézetre nem is feltétlenül változtak a régebbi form-ok, jópár éve már az úgynevezett float-olt technikát használják. Az egyik legnagyobb előnye, hogy az űrlap kódja logikailag is helyes lesz, így az oldalunk elérhetőbb lesz a fogyatékos internetezők számára is (például a látássérülteknek, akik képernyő felolvasót használnak). Ez a leírás megmutatja, hogyan lehet egyszerű és mégis helyes form-okat készíteni, illetve néhány hasznos trükkre is felhívja a figyelmet, ami nem feltétlen a fogyatékos felhasználókat célozza meg, de az átlagfelhasználó életét nagyban megkönnyítheti, felgyorsíthatja annak munkáját.

El nem tüntethető reklám

Kérésre érkezett ez a leírás, amiben bemutatok egy egyszerű trükköt, hogyan készíthetsz olyan popup (felugró) vagy overlay (eltakaró) reklámot, ami egészen addig nem tűnik el, amíg egy reklámra rá nem kattint az olvasó. Tudom, hogy nem szép dolog, de legyünk naívak és gondoljunk arra, hogy ennek akár jószándékú felhasználásai is lesznek.

Induljunk ki abból, hogy senki sem szereti, ha a már meglévő weboldalukat át kell írni egy kis ráncfelvarrásért.

Firebug: Firefox, Internet Explorer és társai

Minden webfejlesztő rémálma, tisztelet a kivételnek, hogy az elkészült weboldalt Internet Explorer összeférhetővé tegye. Bár a Microsoft webböngészőjének újabb változatai már eléggé standard követőek és szépen jelenítik meg a weboldalak túlnyomó többségét, mégis szükség van a weboldalak trükkös kódokkal való teleszúrkálására, mivel sokan használnak régebbi böngészőket.

Elemek újraméretezés az ablakméret változásakor

Biztos vagyok benne, hogy már többetek fejében megfordult a gondolat, hogy bizonyos elemeknek új méretet kellene adni az ablak újraméretezése esetén. Nem nagy szó, CSS. Igen ám, de mi van abban az esetben, hogyha egyes elemek, mint például egy űrlap elemei dinamikusan fix egy százalékban kifejezett értékből kivont képpontokban meghatározott mérték szélességű.

Példa

Az oldal dinamikusan váltja a szélességét az ablakmérettől függően. Ráadásként, az oldal tartalmi része dinamikus szélességű, míg az oldaléc fix értékkel rendelkezik. A tartalmi részben van egy űrlap, ami dinamikusan kell változtassa a méretét a tartalmi rész szélességétől függően.