JQuery ilə necə başlamalı: JavaScript proqramlaşdırmasını asanlaşdırın

Açıqlama: Dəstəyiniz saytın işini davam etdirməyə kömək edir! Bu səhifədə tövsiyə etdiyimiz bəzi xidmətlər üçün bir müraciət haqqı qazanırıq.


Son hesablamalara görə, bütün veb saytların 90% -dən çoxu JavaScript-lə işləyirdi. Ən populyar JavaScript kitabxanası olaraq, jQuery müasir veb saytların əksəriyyəti tərəfindən istifadə olunur və vebdəki 10 milyon ən populyar saytların təxminən 65% -i.

Bunun mənası nədir ki, veb tərtibatçısı, veb dizayneri və ya veb ustası olmaq istəyirsinizsə, jQuery ilə necə işləməyi bilməlisiniz.

JQuery-yə giriş

Contents

JQuery nədir?

JavaScript veb saytlara interaktivlik əlavə etmək üçün istifadə olunan proqramlaşdırma dilidir. jQuery, ümumiyyətlə JavaScript ilə idarə olunan vəzifələri idarə edən əvvəlcədən qurulmuş JavaScript funksiyalarının kitabxanasıdır. Əslində, jQuery JavaScript istifadə etməyi asan və sürətli edir.

jQuery, ziyarətçilərin fəaliyyətinə cavab olaraq veb səhifədə HTML elementlərini tapmaq, seçmək və idarə etmək asanlaşdıran əmrlər kitabxanasıdır. Məsələn, jQuery istifadə edərək hamısı kimi müəyyən bir element seçə bilərsiniz

başlıq elementlərini yerləşdirin və onları ziyarətçi fəaliyyətinə əsaslanaraq bir şəkildə idarə olunmalarına səbəb olun – məsələn, siçan onların üzərindən keçərkən şrift ölçüsünü dəyişdirmək.

JQuery-nin gücü, HTML elementlərinə heç bir əlavə atributun tətbiq edilməsini tələb etmədən asanlıqla HTML elementlərini tapmaq və seçmək qabiliyyətindədir..

jQuery çətin şeyləri asanlaşdırır

JavaScript ilə də edə biləcəyiniz jQuery ilə edə biləcəyiniz hər şey. Fərq ondadır ki, JavaScript ilə yerinə yetirmək üçün olduqca mürəkkəb ola biləcək bir çox şeyi jQuery ilə etmək çox asandır. İki misala baxaq: keçid və tetik.

Keçidlə səhifə elementlərini gizlət və ya göstər

CSS ekran xüsusiyyət HTML elementlərini gizlətmək üçün istifadə edilə bilər. CSS seçicisi ilə hər hansı bir HTML elementini seçin və heç birinin dəyərini ekran xüsusiyyətinə tətbiq etməyin və element görünmədən gizlənəcəkdir. Bir HTML elementini əmrdə gizlətmək istəyirsinizsə, CSS görüntüləmə xassəsi bunu necə edə biləcəyinizdir.

CSS ekran xüsusiyyətini idarə etməklə HTML elementini gizlətmək və ya göstərmək üçün JavaScript istifadə etmək çox çətin deyil. Bununla birlikdə, jQuery keçid () metodu, JavaScript ilə çoxaltmaq çox çətin olacaq güclü keçid effektləri istehsal etməyi asanlaşdıran bir çox daxili variantları ehtiva edir. HTML sənədinizdə qazan jQuery ilə yanaşı jQuery UI əlavə etsəniz, keçid elementlərinin gizlədildiyini və nümayiş etdirilməsini idarə etmək üçün bir sıra jQuery UI effektlərindən istifadə edə bilərsiniz..

JQuery keçid () metodundan necə istifadə etməyinizi öyrənmək istəyirsinizsə, başlamaq üçün çox yer var:

  • JQuery məlumatını əldə edin: jQuery Fondundan pulsuz bir təhsil mənbəyi. Tamamilə jQuery təlimini tamamlamağa dəyər və bu sənədin sonundakı mənbələrə bağlayırıq. Ancaq keçid metodunu izah edən bölməyə birbaşa getmək istəyirsinizsə bu linkdən istifadə edin.
  • jQuery API Sənədləşdirmə: keçid metodu və onun yanında istifadə edilə bilən variantların hamısı.
  • jQuery UI effektləri və keçid: jQuery UI bir sıra effektlərlə keçid metodunu genişləndirir. Bundan əlavə, effektlərin keçid metodunu necə tamamladığı barədə canlı bir demo var.
  • W3S məktəblərində jQuery keçid () metodu: keçid metoduna sürətli bir giriş və sınaya biləcəyiniz bir kod qutusu.
  • Akshay Jaiswal tərəfindən jQuery Toggle Effect Tutorial və Harry Finn tərəfindən jQuery Toggle effekti, jQuery daxil edən HTML sənədini necə qurduğunu və HTML elementini gizlətmək və ya göstərmək üçün keçid metodundan istifadə etdiyini qısa nümayiş etdirən iki YouTube video dərsidir..

Tetik hadisəsi idarəedicisi ilə bir skript icra edin

JQuery-ni olduqca asanlaşdıran başqa bir vəzifə, faktiki hadisə keçməmiş olsa belə bir hadisə idarəedicisini işə salmaqdır. Məsələn, deyək ki, JavaScript onclick hadisəsindən istifadə edərək müəyyən bir düymə tıklandığında hər dəfə icra olunan bir skriptiniz var. İndi eyni skriptin istədiyi zaman başqa bir hərəkətin olmasını istəsəniz, düymənin özü tıklandığından nə etmək olar? Tətik () hadisə idarəedicisi cavabdır.

Tetikləmə metodunun əsas istifadəsi müəyyən bir hadisəyə tetikleyici metodun tətbiq edilməsini və ilk hadisə keçdikdə ikinci bir hadisəni tetiklemek üçün istifadə etməyi əhatə edir. Bu mürəkkəb görünə bilər, lakin tətik metodundan əsas istifadə sadədir. Əsas mənbələri əhatə etmək üçün aşağıdakı mənbələrdən istifadə edin və metodun daha qabaqcıl istifadəsinə nəzər salın.

  • Tətil hadisəsi idarəediciləri: məlumat əldə et jQuery təlimatında hadisə idarəediciləri tetiklemek fəslinə keçmək üçün bu linki istifadə edin..
  • jQuery API Sənədləşdirmə: tetikləmə metoduna və onunla istifadə edilə bilən bütün parametrlərə və seçimlərə ümumi bir baxış.
  • W3S məktəblərində jQuery trigger () metodu: jQuery trigger metoduna giriş və kodu sınamaq üçün bir kod qutusu.
  • JQuery-də Xüsusi Hadisələri necə Yaratmaq olar: Xüsusi jQuery hadisələrini necə yaratmağı izah edən Sitepoint təlimatı, daxili jQuery hadisələrindən daha çox xüsusi hadisələrlə trigger metodundan istifadə edə bilərsiniz..
  • JQuery ilə Həqiqi hadisə adlarını işə salmayın! Bir çox tərtibatçı standart jQuery hadisələrindən istifadə edir "vurun" bir hadisəni tətikləyəcək hadisə növü kimi. Ancaq bu problem yarada bilər və David Walsh, tətil metodu ilə xüsusi hadisələrdən istifadə etməyi tövsiyə edir.

JQuery istifadə üstünlükləri

JQuery sadəcə JavaScript istifadə etməyi asanlaşdırırsa, niyə ümumiyyətlə jQuery istifadə edirik? Niyə yalnız JavaScript ilə yapışmaq və yeni bir sıra əmrlər və tətbiqlər öyrənməkdən çəkinmək olmaz?

Vikipediyaya görə, jQuery tərəfindən təklif olunan ən azı dörd üstünlük var.

  1. jQuery skript və HTML ayrılmasını təşviq edir. Skriptlər birbaşa HTML sənədlərinə yazıla bilsə də, veb dizayn və inkişaf cəmiyyətində mövcud düşüncə HTML, CSS və JavaScript-lərin hamısının ayrıca saxlanılmasıdır. Skriptləri xüsusi HTML elementləri və hadisələri ilə əlaqələndirmək üçün bir yol olmalıdır ki, bu da mürəkkəbdir. JQuery olmadan bunun ən asan yolu, JavaScript funksiyalarını çağıran HTML sənədinə hadisə atributları əlavə etməkdir. Bununla yanaşı, jQuery, JavaScript istifadə edərək hadisə idarəedicilərini əlavə etmək üçün sadə bir sintaksis təmin etməklə bunu etmək ehtiyacı ətrafında olur. Bu, JavaScript sənədinin HTML sənədindən tam ayrılmasına imkan verir.
  2. jQuery koderləri daha aydın skriptlər yazmağa həvəsləndirir. jQuery genişliyi üçün hazırlanmışdır. JQuery ilə edə biləcəyiniz hər şeyi düz JavaScript ilə edə bilərsiniz. Bununla yanaşı, eyni işi yerinə yetirmək üçün jQuery kodu JavaScript kodundan daha qısa və daha aydın olacaqdır.
  3. JQuery istifadə brauzerlərarası uyğunsuzluğu aradan qaldırır. JavaScript fərqli brauzer mühərrikləri tərəfindən bir qədər fərqli göstərilsə də, jQuery brauzerlərarası fərqləri idarə etmək və brauzerlər arasında ardıcıl təcrübə təmin etmək üçün hazırlanmışdır.
  4. jQuery genişlənir. JQuery kitabxanası yeni elementlər, hadisələr və metodlarla asanlıqla əlavə olunmaq üçün hazırlanmışdır. Bu yeni maddələr yerli jQuery kitabxanasına əlavə olunduqdan sonra veb saytlarda bir plugin kimi asanlıqla istifadə edilə bilər.

JQuery ilə başlamaq

JQuery-dən necə istifadə etməyi öyrənməyə başlamağa hazırsınızsa və JavaScript ilə hələ də tanış deyilsinizsə, jQuery öyrənməyin ilk addımı JavaScript öyrənməkdir.

Qeyd etdiyimiz kimi, jQuery JavaScript əmrlərinin kitabxanasıdır. Nəticədə, jQuery JavaScript ilə eyni əsas sintaksis və quruluşu izləyir. JavaScript-in sintaksisini, quruluşunu və əsas funksiyalarını yaxşı başa düşmək jQuery-ni mənimsəmək üçün vacibdir. JQuery Fonduna görə:

JQuery’nin bütün gücünə JavaScript vasitəsi ilə daxil olur, buna görə də JavaScript’i güclü bir şəkildə bilmək, kodunuzu anlamaq, strukturlaşdırmaq və ayıklama üçün vacibdir. Müntəzəm olaraq jQuery ilə işləyərkən zamanla JavaScript ilə biliklərinizi artıra bilər, JavaScript-in qurulmuş konstruksiyaları və sintaksisindən xəbərsiz jQuery yazmağa başlamaq çətin ola bilər..

İnkişaf mühitiniz

Kodlamağa başlamazdan əvvəl inkişaf mühitinizi qurmalısınız. Yaxşı xəbər budur ki, həqiqətən jQuery yazmağa başlamağınız üçün lazım olanların hamısı veb brauzer, mətn redaktoru və jQuery surətidir.

Hər hansı bir veb brauzer edəcəyi halda, inkişaf etdiricilər ya Mozilla Firefox ya da Google Chrome istifadə edirlər. Ayrıca brauzerlərdə kodunuzu yoxlamaq üçün İnternet Explorer və ya Edge, Opera və Safari-yə sahib olmağınız lazım olsa da, əgər Firefox və ya Chrome-dan istifadə etmirsinizsə, bu pulsuz tətbiqlərdən birinin və ya hər ikisinin son versiyasını yükləyin və quraşdırın. inkişaf məqsədləri üçün istifadə edin.

Şübhəsiz, kod yazmaq üçün Notepad-dan istifadə edə bilərsiniz, amma niyə istəyərdiniz? Kodlaşdırmanı asanlaşdırmaq və az səhv etməyə meylli etmək üçün hazırlanmış bir çox xüsusiyyətləri təmin edən pulsuz və ya çox ağlabatan xərc üçün çox sayda böyük mətn redaktoru var. Bəzi sevimlilərimiz Atom, Apple kompüterləri üçün TextMate, Windows kompüterləri üçün Notepad ++ və Mötərizələrdir.

Nəhayət, jQuery JavaScript-də qurulmuş əmrlər kitabxanası olduğundan, jQuery istifadə edən hər hansı bir sənəddən jQuery kitabxanasına zəng etməlisiniz. Bunu etmək üçün ya jQuery yükləməlisiniz, ya da onlayn olaraq yerləşdirilmiş jQuery kitabxanasına bağlantı etməlisiniz.

Resurslar

Ən yaxşı jQuery dərsləri, elektron kitablar və interaktiv kurslar üçün interneti gəzdik. Tövsiyəmiz budur ki, bu mənbələrdən bir neçəsindən istifadə edib öyrənmə tərzinizə ən uyğun olan mənbələrdən istifadə edin.

Tövsiyə etdiyimiz təlim irəliləməsi sizə jQuery gücünü göstərəcək və dünyanın ən populyar JavaScript kitabxanası ilə mümkün olanı nümayiş etdirəcək bəzi əsas interaktiv dərslərdən başlayır. Sonra, Mozilla Developer Şəbəkəsi və jQuery Vəqfi daxil olmaqla veb inkişafındakı ən hörmətli adlardan bəzilərinin təklif etdiyi dərin dərsləri nəzərdən keçirərək jQuery’yə daha dərindən daxil olun. Nəhayət, bir ebook və ya kağız kartı mətni ilə işləməklə jQuery-i master edin.

Pulsuz İnteraktiv Kurslar

Yazılı bir sənədin bir proqramlaşdırma dilinin necə işlədiyini və nə edə biləcəyini izah etmək üçün edə biləcəyi çox şey var. Həqiqətən bir dilin gücünə sahib olmaq üçün onu hərəkətdə görmək lazımdır. Pulsuz interaktiv kurslar, həqiqətən nə edə biləcəyini öyrənərkən bir proqramlaşdırma dilinin əsas sintaksisini tez bir şəkildə əldə etməyin ən yaxşı yollarından biridir..

JQuery Vəqfi jQuery-ə girmədən əvvəl JavaScript öyrənməyi tövsiyə etdiyindən, eyni şeyi etməyi məsləhət görürük. Bu pulsuz kurslar heç bir zaman əsas JavaScipt yazmağınız olacaq:

  • CodeSchool-dan JavaScript Yol Giriş Hissəsi 1: Bu yol səyahətinin yalnız 1 hissəsi pulsuzdur. Gəzintinin qalan hissəsi bir ödəmə divarının arxasında gizlənir. Pulsuz məzmundan keçin və sonra öyrənməyə davam etmək üçün Codecademy-ə gedin.
  • Codecademy tərəfindən JavaScript: Bu tam metrajlı onlayn kursdakı məzmun pulsuzdur. Viktorinalara giriş isteğe bağlıdır və qiymət etiketi daşıyır. Kursun başa çatması üçün təxminən on saat çəkməlidir və əsas JavaScript kodunu yazma qabiliyyətini tərk edəcəkdir. Kəmərinizin altındakı bu kursla bəzi jQuery-ləri həll etməyə hazır olacaqsınız.

JQuery ilə nəyin mümkün olduğunu yaxşı bir əsas anlayışına sahib olmaq üçün iki interaktiv jQuery kursu var. Bu kurslara aşağıdakılar daxildir:

  • JQuery cəhd edin: jQuery Vəqfi tərəfindən CodeSchool ilə ortaq olaraq qoyulmuş jQuery-yə pulsuz giriş..
  • jQuery by Codecademy: Bu kursun başa çatması üçün üç saat davam edəcəkdir. JavaScript kursunda olduğu kimi, kursun məzmunu da pulsuzdur, lakin sınavları keçirmək istəyirsinizsə, bunun əvəzini ödəməli olacaqsınız. Tövsiyəmiz, pulsuz məzmunla işləmək və sonra əlavə mənbələrə keçməkdir. Bitirdikdə, HTML elementlərini seçmək üçün jQuery-dən necə istifadə edəcəyinizi, bu elementləri necə tərtib edəcəyinizi və veb saytın interaktiv cavab verməsi üçün veb sayt ziyarətçilərinin hərəkətlərini jQuery koduna necə bağlayacağınızı biləcəksiniz..

Dərinlik Dərslikləri və Sənaye Liderlərindən Öyrənmə təlimatları

JavaScript və jQuery öyrənmək əl-ələ verməlidir. JQuery ilə daha dərindən tanış olmağa hazırsınızsa, JavaScript ilə bağlı biliklərinizi də genişləndirməlisiniz. JavaScript haqqında öyrənmək üçün ən yaxşı yerlərdən biri Mozilla Developer Şəbəkəsidir (MDN). Bu böyük mənbələri nəzərdən keçirin:

  • JavaScript əsasları: Tövsiyə etdiyimiz interaktiv kurslar vasitəsilə JavaScript-in həqiqətən necə istifadə olunmasının əsaslarını öyrəndiyiniz halda, MDN-də peşəkar tərtibatçıların JavaScript haqqında necə düşündüklərini və istifadə etdiyini öyrənəcəksiniz. Diqqətlə oxuduğunuz təqdirdə, bu sənədin tam həzm edilməsi üçün bir neçə saat çəkəcəkdir.
  • JavaScript Bələdçisi: Bu geniş bələdçi və təlimat, JavaScript, dil, təməl mövzuları, səhvlər, işləmə, qrammatika, ifadələr və daha çoxunu əhatə edən bütün mövzuları gəzəcəkdir. Bu təlimat vasitəsilə düzəldin və orta veb dizaynerlərinin daha çox JavaScript olduğunu biləcəksiniz.

Bunu MDN-də JavaScript mənbələri vasitəsi ilə etmiş olsanız, jQuery Vəqfinin təklif etdiyi təlimlə məşğul olmağa tam hazır olacaqsınız. JQuery Fondunun veb saytında fəsillərə bölünmüş geniş bir Öyrənmə Mərkəzi tapa bilərsiniz. Hər fəsil jQuery, Effektlər, Ajax, Plugins və daha çox kimi müəyyən bir mövzuya həsr olunmuşdur. Bu avtoritet mənbəyi ətraflı və texniki – jQuery proqramını mənimsəməyiniz üçün lazım olacaq bir şeydir.

Elektron kitablar və kağız sənədləri

Əvvəl əhatə etdiyimiz mənbələrdən istifadə edərək bir dəfə ümumi veb dizayn ssenarisini həll etmək üçün jQuery-dən istifadə etməyə hazır olacaqsınız. Bundan əlavə, jQuery API istifadə edərək daha mürəkkəb problemləri həll etmək üçün lazım olan köməyi tapmaq üçün kifayət qədər məlumatlı olacaqsınız.

Qabaqcıl bir jQuery inkişaf etdiricisi olmağa hazır olduqdan sonra yolunuzda sizə kömək edə biləcək bir neçə mətn var.

Pulsuz kitablar

Biz jQuery icması içərisində əla nüfuza sahib olan iki pulsuz kitabı tapdıq. Kəməriniz altında bir neçə jQuery kodlaşdırma təcrübəsi ilə, bu yüksək keyfiyyətli mətnlərdən birini və ya hər ikisini işləyərək ən populyar JavaScript kitabxanasını başa düşməyin yeni səviyyəsini inkişaf etdirin.

  • BoCoup, LLC tərəfindən jQuery əsasları. Hissə kitab və hissə interaktiv dərslik, bu mətn jQuery-ni həm yazılı, həm də praktik nümunələrlə əhatə edir..
  • jQuery Succinctly, Cody Lindley tərəfindən yazılmış və Syncfusion ev sahibi: qabaqcıl jQuery inkişafı üçün zəruri olan anlayışları əhatə edən yüz səhifəlik mətn. Yeni başlamısınızsa, bu sizin üçün mətn deyil, ancaq yetərincə səlahiyyətli JavaScript və ya jQuery hazırlayıcısı növbəti addım atmağa hazırsınızsa, bu mətn əla seçimdir.

Paperback mətnləri

Fiziki bir mətnə ​​üstünlük verirsinizsə, bu gün mövcud olan ən yaxşı jQuery mətnlərindən bəziləri:

  • JQuery öyrənmək: jQuery Vəqfi Müşavirlər Şurasının hazırkı üzvü Karl Swedberg, veb tərtibatçısı və nüfuzlu Drupal proqramçısı Jonathan Chaffer ilə birlikdə bu mətni JavaScript yeniləri və ya təcrübəli inkişaf etdiricilər üçün uyğun olması üçün hazırladı. Bu mətn Kindle üçün də mövcuddur.
  • JavaScript və JQuery, İnteraktiv Ön İnternet İnkişafı: Jon Duckettin bu mətni HTML və CSS-də aparıcı mətnini tamamlayır və bu gün ən populyar JavaScript və jQuery mətni ola bilər..
  • JQuery in Action Bear Bibeault, Yehuda Katz və Aurelio De Rosa: Katz və De Rosa hər ikisi jQuery Vəqfinin fəal üzvləridir – Katz Müşavirlər Şurasının üzvü və De Rosa Məzmun qrupunun üzvü olaraq. Bu nüfuzlu mətn, JavaScript inkişaf etdiricilərinə başlamağa ideal uyğun jQuery-ə sürətli bir görünüşdür.

JQuery ilə dizayn

Bu hissədə, qarşılıqlı təsir bağışlayan veb saytları dizayn etmək üçün jQuery-dən necə istifadə edəcəyimizə baxacağıq. Bunun sonunda əlinizdə olan vasitələr ilə tanış olacaqsınız və lazım olan bütün biliklərə, mənbələrə və vasitələrə sahib olacaqsınız.

JavaScript

JavaScript hər müasir veb brauzerdə qurulmuş bir proqramlaşdırma dilidir. HTML və CSS ilə yanaşı, müasir veb texnologiya triadasında üçüncüdür.

JavaScript həm internetdə həm də xaricində müxtəlif skript yazıları üçün istifadə edilə bilən yüksək səviyyəli ümumi bir proqramlaşdırma dilidir. Dizaynerlərin JavaScript istifadə etməsinin əsas yolu istifadəçi qarşılıqlı əlaqələrini gücləndirməkdir. Styling dəyişiklikləri və AJAX çağırışları, JavaScript ilə gücləndirilə bilən istifadəçi qarşılıqlılığının iki nümunəsidir. Hər birinə qısa nəzər salaq.

Ancaq əvvəlcə geri addım atacağıq və JavaScript-nin bəzi məqamlarını müzakirə edəcəyik.

JavaScript ilə Stilin dəyişdirilməsi

Bir veb səhifənin üslubu ümumiyyətlə kaskad stil cədvəllərinin (CSS) sahəsidir, JavaScript-dən CSS-i idarə etmək üçün istifadə edilə bilər. Üslublar bir element seçərək və stil xüsusiyyətlərindən istifadə etməklə birbaşa idarə edilə bilər:

Divimin məzmunu

sənəd.getElementById ("mənim-div") .style.backgroundColor = "mavi";

JavaScript-in bu hissəsi elementi my-div id-i ilə ələ keçirir və mavi rəngin fon rəngini tətbiq edir. JavaScript ilə birbaşa CSS manipulyasiya etmək faydalıdır, bir anda bir dəstə üslub dəyişdirmək istəyirsinizsə, bu üslubları saytınızın CSS-ə daxil etmək və sonra JavaScript-dən istifadə edərək üslubları tətbiq etmək çox asandır. Bunun bir yolu budur:

.birinci dövlət {
background-color: # 303030;
rəng: #fff;
sərhəd: 3px bərk #ddd;
eni: 200px;
hündürlüyü: 200px;
}
.ikinci dövlət {
background-color: #ddd;
rəng: # 333;
haşiyə: 3px bərk # 333;
eni: 300px;
hündürlüyü: 300px;
}

Divimin məzmunu

sənəd.getElementById ("mənim-div") .onclick = funksiya () {
bu.className = "ikinci dövlət";
}

İndi, my-div-in id atributu olan div elementi tıklandığında, birinci dövlət sinfi çıxarılır və ikinci dövlət sinfi ilə əvəz olunur, ikinci dövlət sinfi CSS tətbiq olunacaq.

Sinif Animasiya əlavə edin

AJAX ilə uçuşdakı məzmunun yenilənməsi

Asinxron JavaScript və XML üçün dayanan AJAX, səhifəni yeniləmədən veb səhifəsinə məzmun əlavə etmək üçün istifadə olunan bir texnikadır. Əsas fikir budur ki, JavaScript səhnə arxasında veb-serverə məlumat göndərir, serverdən cavab alır və həmin cavab əsasında veb səhifənin məzmununu tənzimləyir..

Bu bir az nəzəri görünə bilər, buna görə də praktik olaq. AJAX, avtomatik tamamlama xüsusiyyətləri, sonsuz sürüşmə və sürətli axtarış nəticələri kimi şeyləri mümkün edir. Hər bir halda veb səhifə məlumatları veb serverə göndərir və cavabı veb-səhifəyə yeniləmədən yükləyir.

AJAX çağırışını həyata keçirmək çətin bir işdir və əsas JavaScript proqramlaşdırmadan kənara çıxır. Bununla yanaşı, bir ön hazırlayıcı və ya dizayner olaraq, AJAX, çətinlik çəkmədən edə biləcəyiniz bir JavaScript xüsusiyyətidir. Növbəti hissədə əla AJAX qaynağını qeyd edəcəyik.

JavaScript Resursları

JavaScript bacarıqlarınız bir az paslıdırsa, sizi sürətləndirməyə kömək edəcək üç əla mənbədir:

  • CodeCademy-nin JavaScript Kursu brauzer əsaslı interaktiv kursda sintaksis, döngələr, idarəetmə axını, məlumat strukturları və obyektləri təqdim edir..
  • Mozilla Developer Şəbəkəsi (MDN) JavaScript əsasları təlimatı JavaScript sintaksisinə, dəyişənlərə, operatorlara, şərtlərə, funksiyalara və hadisələrə girişdir..
  • Başlamaq üçün MDN AJAX, əsas AJAX zənglərini əhatə edən qısa bir dərslikdir. Əlavə məqalələr də inkişaf etmiş AJAX texnikalarını əhatə edən MDN-də mövcuddur.

JavaScript güclü olsa da, jQuery daha az səylə çox şey etməyə imkan verir.

jQuery: Dünyanı roka hazırlamaq

JQuery’i əvvəlcədən qurulmuş JavaScript blokları dəstəsi kimi düşünün. Əsas bir nümunəyə baxaq. Budur, əvvəlcə JavaScript-də, sonra isə jQuery-də id-id ilə bir element seçmisiniz.

// JavaScript
sənəd.getElementById (‘mənim-div’);

// jQuery
$ (‘# mənim-div’);

Bir elementi id ilə seçmək hər iki dildə etmək olduqca asandır. Ancaq gördüyünüz kimi, bunu JavaScript-dən daha az jQuery-də etmək üçün təxminən 25 az düymə lazımdır.

HTML sənədinizə jQuery əlavə edin

JQuery’i istifadə etməzdən əvvəl yükləməlisiniz və bunun iki sadə yolu var. Siz ya jQuery-ni yükləyə və yerli bir nüsxə əlavə edə bilərsiniz və ya Google Hosted Kitabxanalar kimi bir ana nüsxəsini istifadə edə bilərsiniz.

Budur, HTML sənədinizə jQuery yükləmək üçün daxil edəcəyiniz kod:

Qeyd edək ki, jQuery yazarkən kodunuzu jQuery nüvəsi yükləndikdən sonra yükləməlisiniz.

WordPress ilə jQuery istifadə

Diqqəti çəkməyin vacib bir cəhəti, WordPress veb saytında jQuery istifadə edərkən kodunuzu $ əvəzinə prefiks etmək üçün jQuery istifadə etməlisiniz. İşləmək üçün $ prefiksini əldə etmək üçün istifadə edə biləcəyiniz işlər var, ancaq bunu edə bilmədikdə kodunuzu jQuery ilə prefiks etmək bu kimi:

// Normal jQuery
$ (‘# mənim-div’);

// WordPress üçün jQuery
jQuery (‘# mənim-div’);

jQuery CSS

CSS-i manipulyasiya etmək üçün JavaScript-dən istifadə edə bildiyiniz kimi, eyni şeyi jQuery ilə edə bilərsiniz.

Dərsləri jQuery ilə olduqca effektiv şəkildə idarə edə bilərik. Aşağıdakı skript, my-div id nömrəsi ilə elementə siçan vurmağı izləyir və sonra bir sinfi çıxarır və fərqli bir sinif əlavə edir. Bu kodu iki CSS sinifləri arasında alternativ etmək üçün istifadə edə bilərsiniz.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (funksiya () {
əgər ($ (‘# mənim-div’) .hasClass (‘ilk vəziyyət’)) {
$ (‘# my-div’) .removeClass (‘ilk vəziyyət’);
$ (‘# my-div’) .addClass (‘ikinci vəziyyət’);
}
başqa əgər ($ (‘# mənim-div’) .hasClass (‘ikinci vəziyyət’)) {
$ (‘# my-div’) .removeClass (‘ikinci vəziyyət’);
$ (‘# my-div’) .addClass (‘ilk vəziyyət’);
}
})

Faydalıdır, baxmayaraq ki, bunun yerinə .toggleClass () istifadə edərək bunu daha asan edə bilərdik.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (funksiya () {
$ (myDiv) .toggleClass (‘ilk vəziyyət’);
$ (myDiv) .toggleClass (‘ikinci vəziyyət’);
})

Keçidin hərəkətdə olduğunu görək.

Sinif Animasiyasını dəyişdirin

Bir çox əlavə jQuery CSS metodu var. Ən diqqətəlayiqdir .css () metodu birbaşa hədəflənmiş elementin CSS-i idarə etmək üçün istifadə edilə bilər. Xüsusi CSS dəyərlərini hədəfləmək üçün .height () və .width () kimi digər metodlardan istifadə edilə bilər.

jQuery effektləri

Müxtəlif effektlər jQuery-də qurulur. Bu effektlər səhifə elementlərinə edilən dəyişikliklərin icrasını idarə etmək üçün digər jQuery metodları və funksiyaları ilə birlikdə sıxışdırılmışdır.

Bu, ağız doludur, buna görə bir nümunəyə baxaq. .ToggleClass () funksiyamıza qayıtsaq, keçidi hamarlaşdırmaq üçün bəzi effektlər əlavə edə bilərik.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (funksiya () {
$ (bu) .fadeOut (‘yavaş’, funksiya () {
$ (bu) .toggleClass (‘ilk vəziyyət’);
$ (bu) .toggleClass (‘ikinci vəziyyət’);
})
$ (bu) .fadeIn (‘yavaş’);
})

Bu kodun elementi sönmək, sinifləri dəyişdirmək və dəyişdirilmiş elementi geri qaytarmaqdır.

Effekt Animasiyasını dəyişdirin

Bu fadeOut () və fadeIn () effektləri mövcud bir neçə jQuery effektindən yalnız ikisidir. Bundan əlavə, bütün effektlər davranışlarını incələmək üçün bir sıra fərqli seçimlərdən istifadə edə bilər.

jQuery Hadisələri

Bu dərslikdə bir neçə dəfə bir jQuery hadisəsini görmüşdük: istifadəçi hədəflənmiş elementi tıkladığında atəş açan .click (). Bununla birlikdə, bir çox əlavə tədbirlər mövcuddur.

Istifadəçi fəaliyyətini hədəfləmək üçün istifadə olunan hadisələrə kifayət qədər özünü izah edən .click (), .dblclick (), .hover (), .mouseenter (), .mouseleave () və .mousemove () daxildir. Səhifənin elementlərində dəyişiklikləri izləyən bir neçə hadisə idarəedicisi də var:

  • .forma elementləri dəyişdikdə dəyişiklik () aşkar edir. Eynilə, .submit () bir forma təqdim edildikdə aşkar edir.
  • .hədəf () hədəflənmiş element fokus qazandıqda işə salınır.
  • .hazır () brauzer veb səhifəni qurduqdan sonra yanır.
  • .viewize ölçüsü dəyişdikdə işə salmaq üçün resize () kodunu işə salır.
  • .trigger () bir hadisəni digər əlaqəli hadisə ilə əlaqələndirir.

Bu qısa təlimatda əhatə etmədiyimiz əlavə jQuery hadisələri var. JQuery sənədlərinə və ya təklif olunan mənbələrə istinad edərək daha çox məlumat əldə edin.

jQuery UI

jQuery UI güclü UI widget və alətləri daxil edən jQuery üçün bir uzantıdır. Bir akkordeon widget kimi bir jQuery UI xüsusiyyətini tətbiq etmək, eyni xüsusiyyəti sıfırdan kodlaşdırmaqla müqayisədə olduqca sadədir..

jQuery UI xüsusiyyətləri dörd kateqoriyaya bölünə bilər: widget, effekt, qarşılıqlı əlaqə və kommunal xidmətlər. Hər birinə nəzər salaq. Ancaq əvvəlcə jQuery UI’nu HTML sənədinə necə əlavə edəcəyimizi bilməliyik.

HTML sənədinə jQuery UI əlavə etmək

JQuery UI yükləməyinizə gəldikdə iki seçiminiz var: onu yükləyin və yerli bir nüsxə əlavə edin və ya bir CDN-in əsas nüsxəsini daxil edin.

Bundan əlavə, bu məqamları unutmayın.

  • CSS üslub cədvəli bağlantısı sənəd başlığına daxil olmalıdır.
  • JQuery UI skript yalnız bağlanan bədən etiketinin üstündən keçməlidir.
  • JQuery nüvəsi (jquery.js və ya jquery.min.js) jQuery UI (jquery-ui.js və ya jquery-ui.min.js) yüklənməmişdən əvvəl yüklənməlidir..

jQuery UI Mövzular

JQuery UI surətini yüklədiyiniz zaman yükləmə qurucusu bir mövzu daxil etməyə imkan verir. Bunun səbəbi jQuery UI vidjetlərinin standart üslub tələb edir. Seçdiyiniz jQuery UI mövzusu, standart widget üslublarını müəyyənləşdirir və müvafiq kod jquery-ui.css daxil edilir.

Google’ın ev sahibliyi etmə seçimini etməsəniz, mövzu adının fayl adından əvvəl düşdüyünə diqqət yetirin: … / hamarlıq / jquery-ui.css. Düzgünlük, standart jQuery UI mövzusudur. URL qurarkən mövzu adını dəyişdirərək istənilən mövzudan istifadə edə bilərsiniz.

Bundan əlavə, jQuery UI veb saytı, öz mövzunu yaratmaq və jQuery UI yüklədiyiniz zaman daxil edə biləcəyiniz bir ThemeRoller təklif edir..

jQuery UI Widgets

Widgets, təmiz JavaScript və CSS ilə yaratmaq üçün bir kod dağını götürəcək faydalı UI elementləri yaratmaq üçün nisbətən səy göstərmir. Ən faydalı jQuery vidjetlərinə nəzər salaq (bir nümayiş üçün alın)

  • Akkordeonlar bir başlıq arxasında məlumat gizlətməyə və hər bölməni açıq və qapalı dəyişdirərək göstərmək imkanı verir.
  • Nişanlar akkordeonlara alternativdir. Onlar məlumat təqdim etmək üçün kosmik qənaət üsuludur.
  • JQuery UI-dəki düymələr gözəldir və ardıcıllıqla təqdim olunur.
  • Tarixlərin düzgün seçilməsini və biçimlənməsini təmin etmək üçün bir tarix seçicisi bir formaya əlavə edilə bilər.
  • Tərəqqi çubuğu bir məqsədə çatmaq üçün nə qədər irəliləyişin əldə olunduğunu əyani göstərir.
  • Sürgülər istifadəçilərə bir forma təqdim edərkən vahid bir dəyər və ya bir sıra dəyər seçmək imkanı verir.
  • Bir əyirici bir forma sahəsinə nömrələri daxil etmək üçün yuxarı və aşağı oxlar əlavə edir.
  • Tooltips istifadəçiləri formalaşdırmaq üçün sahəyə xüsusi məlumat vermək üçün istifadə edilə bilər.

Widjetlərin nə qədər asan tətbiq olunduğunu başa düşmək üçün bir neçə akkordeon yaratmaq üçün istifadə etməli olduğunuz bütün kod bunlardır:

Akkordeon Bölmə 1

Akkordeon məzmunu. Paraqraflar, siyahılar, bağlantılar, nə varsa istifadə edə bilərsiniz.

Akkordeon Bölmə 2

Dediyim kimi.

  • Sən
  • Bacarmaq
  • İstifadə edin
  • Siyahıları

Akkordeon Bölmə 3

Bu belədir. Çox asandır.

$ (funksiya () {
$ ( "# akkordeon" ) .akkordion ();
});

Gördüyünüz kimi HTML HTML’i akkordeona çevirmək üçün tələb olunan bir neçə sətirdən çoxdur.

jQuery UI Accordions Animation

jQuery UI effektləri

Bu kateqoriyadakı metodların çoxu əsas jQuery metodlarının genişləndirilməsidir. Məsələn, dərsləri idarə etmək istəyirsinizsə, .addClass (), .removeClass () və .toggleClass () metodları, əlavə metodla yanaşı, jQuery UI-də mövcuddur .switchClass (). Fərq ondadır ki, jQuery UI-də bu metodlara birbaşa keçid effektlərini metodun özünə əlavə etmək imkanı kimi əlavə seçimlər daxildir.

Bir nümunəyə baxaq. Divin görünüşünü dəyişdirmək üçün .fadeIn () və .fadeOut () istifadə etdiyimizi xatırlayın? Yaxşı, jQuery UI istifadə edərək daha az kodu ilə daha gözəl bir effekt yarada bilərik.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (funksiya () {
$ (bu) .toggleClass (‘ikinci vəziyyət’, 1000);
})

İşdə bu keçid.

jQuery UI Toggle Sinif Animasiya

Bilmək istədiyiniz bir neçə əlavə təsir metodu bunları əhatə edir:

  • .Show () metodu ekrandan silinir: heç biri; hədəflənən elementdən.
  • .Hide () metodu ekrana əlavə edir: heç biri; hədəf elementə.
  • .Toggle () metodu hədəf elementi görünən və gizli vəziyyət arasında dəyişəcəkdir.
jQuery UI Effekt Animasiyalar

Kor, sıçramaq, klip çəkmək, partlatmaq kimi adlarla 15 fərqli effekt animasiya var. Slayd effektinin bir nümunəsinə baxaq.

var myDiv = $ (‘# my-div’);
var myButton = $ (‘# mənim düyməm’);
$ (myButton) .click (function () {
$ (myDiv) .toggle ( "sürüşmək" );
})

Bu vəziyyətdə, divi ekrana sürüşdürmək üçün bir düymə əlavə etdik. Gəlin görək divimiz o jQuery ilə gizlədildiyi zaman nəyə oxşayır.

jQuery UI Animasiya Gizləyin

Bu jQuery keçid effektləri .show (), .hide () və .toggle () metodlarına tətbiq edilə bilər. JQuery UI veb saytı, hansı effektin həyata keçirilməyinizə ən uyğun olduğuna qərar vermək üçün istifadə edə biləcəyiniz bir effektiv baxış alətini özündə cəmləşdirir.

JQuery UI keçidlərini asanlaşdırmaq

JQuery nüvəsinə yalnız iki boşluq daxildir: yelləncək və xətti. Bununla birlikdə jQuery UI 20-dən çox asanlaşdırma əlavə edir. .Toggle () metodunun tətbiqinə bir dəfə nəzər salaq, bu dəfə iki fərqli asanlaşdırma əlavə edildi.

var myButton = $ (‘# mənim düyməm’);
$ (myButton) .click (function () {
$ (‘# birinci div’) .toggleClass (‘ikinci dövlət’, 2000, ‘easeInOutQuad’);
$ (‘# ikinci div’) .toggleClass (‘ikinci dövlət’, 2000, ‘easeInOutExpo’);
})

Bu nümunədə iki div var. Hər ikisi 2 saniyədə ikinci vəziyyətə keçəcək. Ancaq hər biri fərqli bir rahatlama istifadə edəcək. Bir nəzər salaq.

jQuery UI Asanlaşdırıcı Animasiya

jQuery UI qarşılıqlı əlaqələri

Qarışıqlıqlar veb sayt və tətbiqetmə istifadəçilərinə səhifə elementlərini seçməyə və köçürməyə imkan verən jQuery UI metodlarının məcmusudur. Beş jQuery UI qarşılıqlılığı var. Aşağıdakı linklərdən birini tıklamaq, jQuery UI veb saytındakı hər bir qarşılıqlı əlaqənin bir demosuna aparacaqsınız.

  • Sürüklənən qarşılıqlı əlaqə istifadəçilərə veb səhifəsi elementini siçanla sürükləyərək yerləşdirməyə imkan verir.
  • Çəkilən qarşılıqlı təsir sürüklənən qarşılıqlı təsirlə əl-ələ işləyir. Onu istifadə etmək üçün veb səhifədə həm süründürülə bilən, həm də süründürülə bilən bir şey mövcud olmalıdır. Çəkilə bilən element düşmə qabiliyyətli əşyanın üzərinə atıldıqda, bir hərəkət başlanır.
  • Ölçülenebileceğinizi düşündüyünüzü tam olaraq yerinə yetirir: bir səhifə elementini ölçülü hala gətirir.
  • Seçilə bilənlər siyahıdakı əşyaları bir-bir vurmaqla ya da Ctrl düyməsini basıb saxlayın və ya birdən çox element seçmək üçün birdən çox elementlər arasında sürüşdürərək seçilə bilər..
  • Sortable, siyahı maddələrini istənilən qaydada yenidən tənzimləməyi mümkün edir.

jQuery UI qarşılıqlı əlaqələri ortalama veb saytında gözlədiyiniz bir növ deyil. Ancaq interaktiv bir veb tətbiqetməsini, oyunu və ya mürəkkəb bir forma yaratarsanız, bu qarşılıqlı əlaqə lazımlı olacaqdır.

jQuery UI Kommunal xidmətlər

jQuery UI genişləndirilə bilər və widget fabriki bunun üçün istifadə olunan bir yardım proqramıdır. Widget fabriki birdən çox istifadə edilə bilən bir widget-a bir çox jQuery UI metodu, üslub və funksiyanı yığmağa imkan verir.

Obyekt yönümlü proqramlaşdırma ilə tanış olsanız, jQuery UI vidjetlərini obyekt kimi düşünmək faydalı ola bilər. Belə ki, bir jQuery UI akkordeonu, əslində, akkordeon sinfinin obyektidir. Widget fabrikinin sizə edə biləcəyi şey, widgetların yeni siniflərini müəyyənləşdirmək və sonra bir sinif yaratmaq və OOP-da təkrar istifadə etmək üçün çox sayda obyekt yaratmaq üçün həmin sinifdən istifadə etməkdir..

Digər faydalı jQuery UI proqramı .position () metodudur. Bu üsul başqa bir elementə və ya istifadəçi hərəkətinə nisbətən istənilən elementin mövqeyini təyin etməyə imkan verir. Asmaqdan sonra üsul olduqca sadədir. Bir nümunəyə baxaq.

$ (‘# ikinci div’) .pozisiya ({
mənim: ‘sol üst’,
at: ‘sağ alt’,
of: ‘# birinci div’
});

Bu bit kod deyir ki, ikinci div id ilə elementin sol üst küncü elementin sağ alt küncündə birinci div id ilə birlikdə yerləşdirilməlidir:

jQuery UI Vəzifə Animation

Bundan əlavə, əşyalar istifadəçi hərəkətlərinə əsasən yerləşdirilə bilər. Gəlin kodu ikinci divin mövqeyini təyin etmək üçün birinci div yerinə siçan mövqeyindən istifadə etmək üçün düzəliş edək.

$ (sənəd) .mousemove (funksiya (hadisə) {
$ (‘# ikinci div’) .pozisiya ({
mənim: ‘mərkəz’,
of: hadisə,
toqquşma: ‘uyğun’
})
})

Bu kod siçan sənədə daxil olduqda işə salınacaq .mousemove () hadisəsi üçün dinləyici əlavə edir. Bu baş verdikdə, hədəflənən div .pozisiya () siçanın vəziyyətinə əsasən təyin ediləcəkdir.

Bunu hərəkətdə görək.

jQuery UI Mousemove Animation

jQuery Mobil

jQuery Mobile jQuery kitabxanasının başqa bir uzantısıdır. Toxunuşa optimallaşdırılmış cavab verən veb saytlar və tətbiqlər yaratmaq üçün istifadə olunur.

JQuery Mobile düşünərkən, vurğu həqiqətən toxunuşa uyğunlaşdırılmalıdır. Bir çox cQuery və jQuery UI metodları və sadəcə bir cib cihazına aid olmayan hadisələr var və çatışmayan jQuery Mobile ünvanları var. Bir veb saytın yalnız bir və ya iki tərəfini gücləndirmək üçün istifadə edilə bilən jQuery UI-dən fərqli olaraq, jQuery Mobile toxunuşa əsaslanan cavabverici veb saytlar və tətbiqlər üçün tamamilə və ya heç bir həll yolu olaraq hazırlanmışdır..

Kitabxanaya cavab verən, toxunma ilə optimallaşdırılmış düymələr, tarix seçiciləri, forma elementləri, çalmak hadisələri, naviqasiya elementləri, masalar, nişanlar, sürgülər və daha çox şey daxildir. Bundan əlavə, jQuery Mobile-a ThemeRoller daxildir.

JQuery Mobile-dan istifadə etməkdə çətinlik bütün və ya heç bir yanaşmadır. Veb saytların və tətbiqlərin masaüstü versiyaları üçün tam əvəzləmə yaratmaq üçün hazırlanmışdır. Bütün cihazlarda işləyən bir sayt və ya tətbiqiniz varsa, jQuery Mobile axtardığınız deyil. Bütün cihazlarda işləyən bir tətbiq və ya veb sayt üçün jQuery Mobile istifadə etsəniz – toxunuş effektivdir və olmayanlar – cihazın tipini, ölçüsünü və toxunuşun mövcudluğunu aşkar edərək jQuery Mobile-ı yandırmaq və söndürmək üçün bir yol tapmalısınız..

Dizayn Resursları

Artıq JavaScript öyrənə biləcəyiniz bir neçə yerə işarə etdik. Əgər siz bir neçə JavaScript-ni bilmirsinizsə, jQuery-ə girmədən əvvəl bu bacarıqları inkişaf etdirin. Kəmərinizin altına bir neçə JavaScript qoymağınızdan sonra aşağıdakı mənbələr sizi jQuery, jQuery UI və jQuery Mobile ilə sürətləndirəcəkdir.

  • jQuery Vəqfi Tədris Mərkəzi jQuery öyrənmək üçün rəsmi (və ən yaxşı yerlərdən) biridir. Burada əsasları, hadisələri və effektləri, AJAX, plaginləri və daha çoxunu əhatə edən fəsil əsaslı bir kurs tapa bilərsiniz. Hazır olduqda, jQuery UI və jQuery Mobile-dan necə istifadə edəcəyinizi də öyrənə bilərsiniz.
  • Scratch-dan jQuery-ni öyrənin, bir jQuery proqramçısı kimi etimad qazanmağa kömək edəcək bir layihə əsaslı bir dərslikdir.
  • CodeCademy jQuery Kursu sizə jQuery sintaksisini, həmçinin əsas funksiyaları necə yazmağı, DOM elementlərini dəyişdirməyi, hadisələrdən istifadə etməyi və effektləri həyata keçirməyi öyrədir..
  • BQoup tərəfindən jQuery əsasları, brauzerdə kodu sınamaq üçün daxili JavaScript konsolu ilə bir kitabdır. Bu jQuery əsaslarını, DOM elementlərini, hadisələri, effektləri və AJAX-ı keçərək idarə edir..

Dizaynerlərə jQuery lazımdır

JQuery, jQuery UI və jQuery Mobile-a uzantılar geniş vidjet, qarşılıqlı əlaqə, metod, effekt və toxunma ilə işlənmiş vasitələr əlavə edir. Bunları mənimsəmək sizi daha yaxşı bir dizayner və inkişaf etdirici edəcək, çünki heç bir tuş vurmadan güclü, interaktiv veb tətbiqləri qura biləcəksiniz..

Digər maraqlı məqamlar

Kodlaşdırma və veb saytın inkişafı ilə əlaqəli daha çox təlimat, dərs vəsaiti və infoqrafiya var:

  • CSS3 – giriş, təlimatlar & Resurslar: bu veb səhifənin sxemini öyrənməyə başlamaq üçün əla bir yerdir.
  • ASP.NET mənbələri: bu təlimat sizə veb səhifələr yaratmaq üçün Microsoft-un .NET çərçivəsi ilə tanış olmağa imkan verəcəkdir.

Hansı kodu öyrənməlisiniz?

Kodlamağı hansı proqramla öyrənməlisiniz? İnfografiyamıza baxın, Hansı Kod Öyrənməlisiniz? Bu, yalnız dillərin fərqli cəhətlərini müzakirə etmir, “Java üçün bir proqram üçün nə qədər pul qazanacam?” Kimi vacib suallara cavab verir.

Hansı kodu öyrənməlisiniz?
Hansı kodu öyrənməlisiniz?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map