If you're seeing this message, it means we're having trouble loading external resources on our website.

Եթե գտնվում ես վեբ զտիչի հետևում, խնդրում ենք համոզվել, որ *.kastatic.org և *.kasandbox.org տիրույթները հանված են արգելափակումից։

Հիմնական նյութ

Կոճակ ֆունկցիա

Եթե սովորել ես JavaScript դասընթացի ներածությունը, ուրեմն նաև ստեղծել ես մի քանի պարզ կոճակ տրամաբանական մարտահրավերներում՝ Քո առաջին կոճակը և Ավելի խելացի կոճակ։ Եթե մոռացել ես, արի միասին կրկնենք, թե ինչպես են ստեղծում պարզ կոճակներ։
Նախ՝ որո՞նք են կոճակի նվազագույն հատկությունները։
  1. Կտավի վրա մի պատկեր (հիմնականում ուղղանկյուն)
  2. Ներառում է պիտակ կամ պատկեր, որը ներկայացնում է, թե ինչ է այն կատարելու
  3. Արձագանքում է օգտատիրոջ սեղմմանը նրա վրա (բայց ոչ որևէ այլ վայրում)
Հեշտությամբ կարող ենք հասնել #1 և #2-ին.
fill(0, 234, 255);
rect(100, 100, 150, 50, 5);
fill(0, 0, 0);
textSize(19);
text("Useless button", 110, 133);
Հասնելու համար #3-ին՝ անհրաժեշտ է սահմանել mouseClicked ֆունկցիան, որը կկանչվի, երբ օգտատերը սեղմի, իսկ նրա ներսում պետք է ստուգենք՝ արդյոք mouseX-ը և mouseY-ը կոճակի սահմանների ներսում են։ Վերևում ներկայացված կոճակը տարածվում է x=100-ից մինչև x=250, և y=100-ից մինչև y=150, ինչպես ներկայացված է ներքևում.
Կարող ենք ստուգել այդ կոորդինատները՝ && չորս պայմաններն իրար կապելով.
mouseClicked = function() {
    if (mouseX >= 100 && mouseX <= 250 &&
        mouseY >= 100 && mouseY <= 150) {
        println("Still pretty useless");    
    }
};
Փորձիր սեղմել կոճակի վրա և նրա շրջակայքում, որպեսզի համոզվես, որ այն աշխատում է.
Այն միանգամայն աշխատում է,բայց, միևնույնն է, ես անհանգստանում եմ, որ այն կրկին օգտագործման ենթակա կոդ չէ։ Որքա՞ն աշխատանք պետք է անենք, եթե ցանկանանք փոխել կոճակի դիրքը (Փորձիր դա վերևում): Ինչպես երևում է, կոդի մեջ կան բազմաթիվ «բարդ կոդեր»՝ թվեր, ինչպես, օրինակ mouseClicked ֆունկցիայի կոորդինատները: Հետաքրքիր է՝ չկա արդյոք ավելի պարզ եղանակ։
Սկսելու համար արի դիրքի և չափի համար ստեղծենք փոփոխականններ, որպեսզի կարողանանք փոփոխել դրանք մեկ վայրում, և որ կոճակի սեղմումն էլ աշխատի անշարժ կերպով։ Ստորև բերված ծրագրին ես ավելացրել եմ btnX, btnY, btnWidth և btnHeight։ Փորձիր փոխել դրանց արժեքները և սեղմել կոճակը.
Հիմա ավելի լավ տեսք ստացանք։ Բայց կրկին որքա՞ն աշխատանք դեռևս ունենք նոր հավելյալ կոճակ ավելացնելու համար։ Պե՞տք է այդ ամբողջը պատճենենք, տեղադրենք և ստեղծենք btn2X, btn2Y։ Սա ընդհանրապես հաճելի աշխատանք չի երևում։ Հենց այդ իսկ պատճառով էլ այս ծանր աշխատանքը մեզ մոտիվացնում է գրել մի ֆունկցիա, որը կկատարի այս ամբողջ աշխատանքը, որը նույնը կլինի կոճակների համար, և օգտագործելով պարամետրեր՝ հոգ կտանի տարբերվող մասերի համար։ Կարող ենք հենց այսպես էլ գրել՝ փոփոխականները դարձնելով պարամետրեր.
var drawButton = function(btnX, btnY, btnWidth, btnHeight) {
    fill(0, 234, 255);
    rect(btnX, btnY, btnWidth, btnHeight, 5);
    fill(0, 0, 0);
    textSize(19);
    textAlign(LEFT, TOP);
    text("Useless button", btnX+10, btnY+btnHeight/4);
};
Հետո կկանչենք այն այսպես՝
drawButton(100, 100, 150, 50);
Իսկ ի՞նչ կասես մեր mouseClicked կոդի մասին։ Տեսնո՞ւմ ես՝ ինչի հետ է կապված խնդիրը։
mouseClicked = function() {
    if (mouseX >= btnX && mouseX <= (btnX+btnWidth) &&
        mouseY >= btnY && mouseY <= (btnY+btnHeight)) {
        println("Still pretty useless");    
    }
};
Եթե ամբողջ կոդը միացնեինք իրար, կստանայինք սխալմունքի զգուշացում Օ-ոչից, որը կնշեր՝ «btnX-ը սահմանված չէ»,— և դա ճիշտ կլիներ։ Մենք btnX-ը դարձրեցինք ֆունկցիայի պարամետր, ինչը նշանակում է, որ այն այլևս գլոբալ փոփոխական չէ։ Դա հրաշալի է drawButton ֆունկցիայի վերաօգտագործման համար, սակայն այժմ mouseClicked ֆունկցիան որևէ տարբերակ չունի՝ իմանալու համար, թե որ կոորդինատները պետք է ստուգի։
Այսպիսով՝ անհրաժեշտ է մտածել մի նոր տարբերակ, որպեսզի փոխանցենք ինֆորմացիան drawButton-ին և այդ ինֆորմացիան հասանելի դարձնենք mouseClicked-ին։ Մի քանի տարբերակ կա.
  1. Կրկին ներկայացրու դիրքի և չափի համար գլոբալ փոփոխականներ (btnX, btnY, btnWidth, btnHeight),
  2. ներկայացրու մի գլոբալ զանգված, որը պահպանում է բոլոր պարամետրերը (var btn1 = [...];),
  3. ներկայացրու մի գլոբալ օբյեկտ, որը պահպանում է պարամետրերը (var btn1 = {..}),
  4. օգտագործիր օբյեկտային կողմնորոշվածության սկզբունքներ՝ կոճակը սահմանելու և հատկությունները պահպանելու համար (var btn1 = new Button(...)):
Ո՞րն ընտրել։ Ես չեմ նախընտրում առաջին տարբերակը, քանի որ պետք է չափազանց շատ գլոբալ փոփոխականներ ավելացնել, և ես ալերգիա ունեմ գլոբալ փոփոխականի հանդեպ։ Չեմ հավանում նաև երկրորդ տեխնիկան, քանի որ բարդանում է կոդը կարդալը, որը վերցնում է տվյալներ՝ զանգվածի ցուցիչների վրա հիմնված։ Ես նախընտրում եմ երրորդ տեխնիկան, քանի որ վերջինս ներկայացնում է միայն մեկ գլոբալ փոփոխական և ստեղծում է ավելի հեշտ ընթեռնելի կոդեր։ Չորրորդ կոդը ևս լավ տարբերակ է, որն օգտագործում է օբյեկտային կողմնորոշվածության սկզբունքներ, որպեսզի ստեղծի ընդհանուր Կոճակ օբյեկտի տեսակներ, սակայն եկեք այս չորրորդ տարբերակը դեռևս պահենք ավելի ուշ օգտագործելու համար։
Կարող ենք ստեղծել մեր գլոբալ btn1 օբյեկտն այսպես՝
var btn1 = {
    x: 100,
    y: 100,
    width: 150,
    height: 50
};
Եվ փոփոխենք drawButton ֆունկցիան, որպեսզի այն ընդունի մեկ առարկա, որն էլ հետո կվերցնի հատկություններ այստեղից՝
var drawButton = function(btn) {
    fill(0, 234, 255);
    rect(btn.x, btn.y, btn.width, btn.height, 5);
    fill(0, 0, 0);
    textSize(19);
    textAlign(LEFT, TOP);
    text("Useless button", btn.x+10, btn.y+btn.height/4);
};
mouseClicked ֆունկցիան կստուգի գլոբալ փոփոխականի հատկությունները.
mouseClicked = function() {
    if (mouseX >= btn1.x && mouseX <= (btn1.x+btn1.width) &&
        mouseY >= btn1.y && mouseY <= (btn1.y+btn1.height))     {
        println("Still pretty useless");    
    }
};
Փորձիր սա ներքևում։ Ինչպես նախորդ անգամները, փորձիր փոփոխել կոճակի տարբեր պարամետրերը և տես՝ արդյոք ամեն ինչ դեռ աշխատում է, թե ոչ.
Այս ամենի նպատակն այն էր, որկարողանանք հեշտությամբ ավելացնել ավելի շատ կոճակներ. կրկին օգտագործման թեստ։ Կարո՞ղ ենք կատարել դա։
Կսկսենք նոր գլոբալ փոփոխականով՝ btn2, առաջին կոճակից offset /ճյուղավորում y դիրքում։
var btn2 = {
    x: 100,
    y: 200,
    width: 150,
    height: 50
};
Հետո կնկարենք այդ կոճակը.
drawButton(btn2);
Հետո կնկարենք երկու կոճակ կտավի վրա, բայց միայն առաջինը կարձագանքի սեղմմանը։ Կարող ենք ստեղծել երկրորդ արձագանքը՝ կրկնօրինակելով տրամաբանությունը և փոխանակելով btn2btn1-ով, այսպես՝
mouseClicked = function() {
    if (mouseX >= btn1.x && mouseX <= (btn1.x+btn1.width) &&
        mouseY >= btn1.y && mouseY <= (btn1.y+btn1.height))     {
        println("Still pretty useless");    
    }

    if (mouseX >= btn2.x && mouseX <= (btn2.x+btn2.width) &&
        mouseY >= btn2.y && mouseY <= (btn2.y+btn2.height))     {
        println("2nd one still quite useless!");    
    }
};
Այս բոլոր կրկնվող կոդերը կարող են նյարդայնացնել քեզ։ Եկեք ստեղծենք isMouseInside ֆունկցիան, որը գիտի՝ ինչպես ստուգել ցանկացած կոճակի օբյեկտ, և վերադարձնել այն դեպի ճիշտը, եթե մկնիկը նրա ներսում լինի.
var isMouseInside = function(btn) {
    return (mouseX >= btn.x &&
            mouseX <= (btn.x+btn.width) &&
            mouseY >= btn.y && 
            mouseY <= (btn.y+btn.height));
};
Այժմ կարող ենք օգտագործել այդ ֆունկցիան mouseClicked-ի ներսում և ակնհայտորեն կնվազեցնենք կրկնվող կոդերի քանակը.
mouseClicked = function() {
    if (isMouseInside(btn1))     {
        println("Still pretty useless");    
    } else if (isMouseInside(btn2))     {
        println("2nd one still quite useless!");    
    }
};
Ահա և ստացանք այն, ինչ ցանկանում էինք։ Տարբեր կոճակներ նկարելու համար օգտագործեցինք ֆունկցիաներ և որոշակիորեն հեշտացրինք նոր կոճակներ ավելացնելու գործընթացը։ Փորձիր դա ներքևում՝
Իհարկե, կարող ենք շարունակել այս ամենը՝ ծրագրում բոլոր կոճակներից ստեղծել զանգվածներ, հնարավոր դարձնել պիտակի և կոճակի գույնի անհատականացումը, սակայն հուսով ենք, որ այս ամենը ամուր հիմք կծառայի քեզ համար, որպեսզի կարողանաս ստեղծել պարզ կոճակներ՝ ֆունկցիաներ օգտագործելով։ Հաջորդիվ կսովորենք ստեղծել կոճակներ օբյեկտային կողմնորոշվածության սկզբունքներով։

Ուզո՞ւմ ես միանալ խոսակցությանը։

Առայժմ հրապարակումներ չկան։
Անգլերեն հասկանո՞ւմ ես: Սեղմիր այստեղ և ավելի շատ քննարկումներ կգտնես «Քան» ակադեմիայի անգլերեն կայքում: