Lesson 1-JQuery from A to Z

0
193
Courses - Development - Front-End - JQuery from A to Z

JQuery-ի մասին

jQuery, JavaScript գրադարան, որը կենտրոնացված է JavaScript-ի և HTML-ի փոխազդեցությունն հեշտացնելու համար։ jQuery գրադարանի օգնությամբ կարելի է հեշտությամբ ընտրել DOM տարրը, դիմել դրա ատրիբուտներին ու բովանդակությանը, փոփոխել դրանք։ jQuery-ն ունի նաև AJAX-ի հետ աշխատելու համար պարզ և հասկանալի API։
Երբ Ջոն Ռեզինգը սկսեց հետաքրքրվել ծրագրավորմամբ, առաջինը, ինչ նա ուսումնասիրեց վեբ-ծրագրավորումից, դա HTML-ն էր։ Ռեզինգն արդեն կարողանում էր ծրագրավորել QBasic-ով, երբ իր ծանոթներից մեկը ցուցադրեց, թե ինչպես կարելի է ստեղծել վեբ-էջ Angelfire ծրագրի միջոցով՝ օգտագործելով HTML-ը։ Հայրը Սուրբ ծննդյան տոներին նվիրեց նրան HTML-ի երկու գիրք։ Այն ժամանակ, երբ նա սկսեց ծրագրավորել Visual Basic լեզվով, HTML-ն ու վեբ-դիզայնը սկսեցին հետաքրքրել նրան։
Բայց JavaScript-ի նկատմամբ իր հետաքրքրությունը սկսեց ավելի ուշ, մոտավորապես 2004 թ.։ Այդ տարի Ռեզինգը համակարգչային գիտությունների ոլորտում աստիճան ստացավ և, որոշ ժամանակ անց, կես դրույքով սկսեց աշխատել տեղական Brand Logic ընկերությունում։ Նա զբաղվում էր մի կայքի դիզայնով, որտեղ ստեղծվում էր scroll էֆեկտ։ Ջոնին դուր չէր գալիս այն, որ ինքն ստիպված է օգտագործել այլ մշակողների կոդը։ Նա որոշեց, որ պետք է լուրջ ուսումնասիրի JavaScript-ը։ Ուսումնասիրելով այն, նա հասկացավ, որ JavaScript-ը պարզ, բայց նուրբ լեզու է։ Այն բավականին հզոր է և կարող է օգնել լուծել բավականին լուրջ և դժվար խնդիրներ։ Հաջորդ մի քանի տարիների ընթացքում Ջոնը ստեղծեց տարբեր JavaScript ծրագրեր, մինչև ավարտեց jQuery-ի մշակումը։ jQuery-ի ստեղծման հիմնական նպատակն էր գրել JavaScript-ի հետ աշխատանքը հեշտացնող բազմանգամյա օգտագործման կոդեր, ինչպես նաև դրա միջոցով մոռանալ տարբեր բրաուզերների կողմից այս կամ այն բանի աջակցության մասին։ Գրադարանը ներկայացվեց 2006 թվականին Նյու-Յորքում կայացած «BarCamp» կոնֆերանսի ժամանակ։

Ի՞նչ է JQuery-ն

JQuery-ն JavaScript-ի թեթև գրադարան է՝ “write less, do more” կարգախոսով:
JQuery-ի նպատակն է հեշտացնել JavaScript-ի օգտագործումը վեբ կայքերում:
JQuery-ն ունի բազմաթիվ մեթոդներ, որոնց միջոցով կարելի է իրականացնել շատ ընդհանուր առաջադրանքներ, ինչի իրականացման համար JavaScript կոդի բազմաթիվ տողեր են անհրաժեշտ:
JQuery-ն պարզեցում է JavaScript-ի շատ առաջադրանքներ, ինչպիսիք են AJAX-ի օգտագործումը և DOM-ի հետ մանիպուլյացիաները:
JQuery գրադարանը պարունակում է հետևյալ ֆունկցիաները՝

  • HTML DOM-ի մանիպուլյացիաներ
  • CSS մանիպուլյացիաներ
  • HTML event-ների մեթոդներ
  • Էֆեկտներ և անիմացիաներ
  • Աշխատանք AJAX-ի հետ
  • Այլ օգտակար ֆունկցիաներ

Կարելի է վստահաբար պնդել, որ JQuery-ի միջոցով հնարավոր է կատարել գրեթե ամեն ինչ:

Ի՞նչ է անհրաժեշտ իմանալ սկսելուց առաջ

Դասընթացը սկսելուց դուք պետք է բազային գիտելիքներ ունենանք հետևյալ լեզուներից.

  • HTML
  • CSS
  • JavaScript

Ինչու՞ JQuery

Առկա են բազմաթիվ այլ JavaScript գրադարաններ, բայց JQuery-ն ամենատարածվածն է և նաև առավել ընդարձակվողը:
Համացանցի խոշորագույն շատ ընկերություններ օգտագործում են JQuery, ինչպիսիք են.
Google
Microsoft
IBM
Netflix
JQuery-ի ծրագրավորողների թիմը գիտի ամեն ինչ browser-ային խնդիրների մասին և նրանք այդ գիտելիքները ներդրել են JQuery գրադարանում: JQuery-ն բոլոր հիմնական browser-ներում աշխատելու է նույն կերպ:

JQuery-ի օգտագործման օրինակ

jQuery-ն, որպես կանոն, միացվում է HTML փաստաթղթին ինչպես սովորական JavaScript ֆայլ։
jQuery-ի հետ ամբողջ աշխատանքը հիմնականում կատարվում է $ ֆունկցիայի միջոցով։ Եթե կայքում jQuery-ից բացի օգտագործվում են այլ JavaScript գրադարաններ, որոնցում $ նշանը օգտագործվում է այլ նպատակներով, ապա դրա փոխարեն կարելի է օգտագործել այլ ֆունկցիայի հոմանիշը՝ jQuery ֆունկցիան։

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Էջի վերնագիր</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("p").click(function(){
                    $(this).hide();
                });
            });
        </script>
    </head>
    <body>
        <p>Եթե click անես ինձ վրա, ապա ես կանհետանամ</p>
        <p>Click արեք ինձ վրա</p>
        <p>Ինձ վրա էլ Click արեք</p>
    </body>
</html>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Էջի վերնագիր&lt;/title&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
            $(document).ready(function(){
                $("p").click(function(){
                    $(this).hide();
                });
            });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Եթե click անես ինձ վրա, ապա ես կանհետանամ&lt;/p&gt;
        &lt;p&gt;Click արեք ինձ վրա&lt;/p&gt;
        &lt;p&gt;Ինձ վրա էլ Click արեք&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;

Երկրորդ եղանակով կատարվող աշխատանքը համարվում է ավելի ճիշտ։ Բայց, որպեսզի երկրորդ եղանակով գրված կոդը շատ մեծ չստացվի, կարելի է այն գրել հետևյալ կերպ.

Նմանատիպ դասեր