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

თუ ვებფილტრს იყენებთ, დარწმუნდით, რომ *.kastatic.org და *.kasandbox.org დომენები არ არის დაბლოკილი.

ძირითადი მასალა

ღილაკის ფუნქცია

თუ თქვენ გაიარეთ JS-ის შესავლის კურსი, მაშინ გაკეთებული გაქვთ რამდენიმე მარტივი ღილაკი ლოგიკის ამოცანებში თქვენი პირველი ღილაკი და უფრო ჭკვიანი ღილაკი. თუ დაგავიწყდათ, გავიმეოროთ, როგორ კეთდება მარტივი ღილაკი.
პირველ ყოვლისა, რა არის აუცილებელი თვისებები ღილაკისთვის?
  1. ფიგურა სამუშაო სივრცეზე (ძირითადად, მართკუთხედი)
  2. შეიცავს წარწერას ან ნახატს, რომელიც აღწერს, რას აკეთებს ეს ღილაკი
  3. რეაგირებს მომხმარებლის მიერ მასზე დაწკაპუნებაზე (მაგრამ არა - სხვაგან დაწკაპუნებაზე)
ჩვენ საკმაოდ მარტივად შეგვიძლია მივაღწიოთ #1-სა და #2-ს:
fill(0, 234, 255);
rect(100, 100, 150, 50, 5);
fill(0, 0, 0);
textSize(19);
text("უსარგებლო ღილაკი", 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("კვლავ უსარგებლო");    
    }
};
სცადეთ და დააწკაპეთ ქვემოთ მოცემულ ღილაკს, რათა დარწმუნდეთ, რომ ის მუშაობს:
ის ნამდვილად მუშაობს, მაგრამ ცოტათი მაღელვებს. ვღელავ, რადგან ეს არ არის დიდად ხელახლა გამოყენებადი კოდი. რამდენი რამის გაკეთება მომიწევს, თუ ღილაკის პოზიციის ცვლილება მინდა? (სცადეთ ზემოთ!) ვხედავ ხელით შეყვანილ ბევრ რიცხვს კოდში, მაგალითად, კოორდინატებს mouseClicked ფუნქციაში, და მაშინვე ვფიქრობ, არსებობს თუ არა უფრო სუფთად წერის გზა.
დასაწყისისთვის, შევქმნათ მდებარეობისა და ზომის ცვლადები, რათა შეგვეძლოს მათი ერთბაშად შეცვლა ისე, რომ ღილაკი კვლავ მუშაობდეს. მე დავამატე btnX, btnY, btnWidth და btnHeight პროგრამას ქვემოთ. სცადეთ მათი მნიშვნელობების შეცვლა და ღილაკზე დაწკაპუნება:
კარგი, ასე უკეთესია. მაგრამ, კიდევ რამდენი უნდა ვიმუშაო, თუ მინდა, რომ ღილაკი დავამატო? დამჭირდება ყველაფრის დაკოპრება და ჩასმა, რომ დავწერო btn2X, btn2Y? ოჰ, სულ არ ჩანს სახალისო. This sounds like good motivation to write a function that will take care of doing everything that's the same for buttons, and use parameters to take care of what's different. We could write it like this, turning the variables into parameters:
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("კვლავ უსარგებლო");    
    }
};
ყველა ეს კოდი ერთად რომ გვქონოდა, მაშინ მივიღებდით შეცდომის შეტყობინებას „ოჰ, არა“ კაცუნასგან, რომელიც გვეტყოდა: „btnX არ არის განსაზღვრული“ — და ის მართალია! ჩვენ btnX ვაქციეთ ფუნქციის პარამეტრად, რაც ნიშნავს, რომ ის აღარაა გლობალური ცვლადი. ეს დიდებულია drawButton ფუნქციის ხელახლა გამოყენებადობისთვის, მაგრამ ახლა mouseClicked ფუნქციამ არ იცის, რა კოორდინატები უნდა შეამოწმოს.
ამიტომ უნდა მოვძებნოთ ინფორმაციის drawButton -ისთვის გადაცემისა და ამ ინფორმაციის mouseClicked-ისთვის ხელმისაწვდომად გახდის გზა. რამდენიმე ვარიანტი მაქვს:
  1. კიდევ ერთხელ შემოვიღოთ გლობალური ცვლადები (btnX, btnY, btnWidth, btnHeight)-ის მდებარეობისა და ზომისათვის
  2. შემოვიღოთ გლობალური მასივი, რომელიც ინახავს ყველა პარამეტრს (var btn1 = [...];)
  3. შემოვიღოთ გლობალური ობიექტი, რომელიც ინახავს პარამეტრებს (var btn1 = {..})
  4. გამოვიყენოთ ობიექტზე ორიენტირებული წესები ღილაკის განსასაზღვრად და შევინახოთ თვისებები (var btn1 = new Button(...))
რომელი ავირჩიოთ? არ მომწონს პირველი ვარიანტი, რადგან მოგვიწევს ძალიან ბევრი გლობალური ცვლადის დამატება და მე ალერგიული ვარ გლობალურ ცვლადების მიმართ. არ მომწონს მეორე ტექნიკა, რადგან რთულია ისეთი კოდის კითხვა, რომელიც მონაცემებს იღებს მასივის ინდექსების მიხედვით. მომწონს მესამე ტექნიკა, რადგან მას შემოაქვს მხოლოდ ერთი გლობალური ცვლადი და აწარმოებს უფრო ადვილად წაკითხვად კოდს. აგრეთვე მომწონს მეოთხე ტექნიკა, ობიექტზე ორიენტირებული წესების გამოყენება სტანდარტული 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("კვლავ უსარგებლო");    
    }
};
სცადეთ ის ქვემოთ! როგორც ადრე აკეთებდით, სცადეთ ღილაკის სხვადასხვა პარამეტრის შეცვლა და ნახეთ, ყველაფერი ისევ მუშაობს თუ არა:
ამ ყველაფრის იდეა იყო ის, რომ ჩვენთვის მოეცა საშუალება, ადვილად დაგვემატებინა ღილაკები - ხელახლა გამოყენებადობის საბოლოო ტესტი. შეგვიძლია ამის გაკეთება? რა თქმა უნდა!
დავიწყებთ ახალი გლობალური ცვლადით, btn2, ჩანაცვლება y მიმართულებაში პირველი ღილაკიდან:
var btn2 = {
    x: 100,
    y: 200,
    width: 150,
    height: 50
};
შემდეგ კი დავხატავთ ამ ღილაკს:
drawButton(btn2);
ეს წარმატებით დახატავს ორ ღილაკს სამუშაო სივრცეზე, მაგრამ მხოლოდ პირველი იქნება დაწკაპუნებებზე რეაგირებადი. შეგვიძლია, მეორეც გავხადოთ რეაგირებადი ლოგიკის ზუსტი ასლის შექმნით და btn1-ის btn2-ით ჩანაცვლებით, აი, ასე:
mouseClicked = function() {
    if (mouseX >= btn1.x && mouseX <= (btn1.x+btn1.width) &&
        mouseY >= btn1.y && mouseY <= (btn1.y+btn1.height))     {
        println("კვლავ უსარგებლო");    
    }

    if (mouseX >= btn2.x && mouseX <= (btn2.x+btn2.width) &&
        mouseY >= btn2.y && mouseY <= (btn2.y+btn2.height))     {
        println(მეორეც საკმაოდ უსარგებლოა");    
    }
};
მაგრამ ეს გამეორებული კოდი არ გაწუხებთ? მოდით, შევქმნათ ფუნქცია isMouseInside, რომელმაც იცის, როგორ შეამოწმოს ნებისმიერი ღილაკის ობიექტი და დააბრუნოს true, თუ მაუსი მის შიგნითაა:
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("კვლავ უსარგებლო");    
    } else if (isMouseInside(btn2))     {
        println("მეორეც საკმაოდ უსარგებლოა!");    
    }
};
და, აი, ისიც! ჩვენ გამოვიყენეთ ფუნქციები რამდენიმე ღილაკის დასახატად და შედარებით ადვილი გავხადეთ ახალი ღილაკების დამატება. გამოსცადეთ ეს ქვემოთ:
შეგვიძლია, გავაგრძელოთ -- შევქმნათ პროგრამაში არსებული ყველა ღილაკის მასივი, გავხადოთ შესაძლებელი ღილაკის წარწერისა და ფერის ცვლილება -- მაგრამ, იმედია, უკვე საკმარისად მიიღეთ საფუძვლები ფუნქციების გამოყენებით მარტივი ღილაკების შესაქმნელად. შემდეგში ჩვენ განვიხილავთ, როგორ კეთდება ღილაკები ობიექტზე ორიენტირებული პრინციპების გამოყენებით.

გსურთ, შეუერთდეთ დისკუსიას?

პოსტები ჯერ არ არის.
გესმით ინგლისური? დააწკაპუნეთ აქ და გაეცანით განხილვას ხანის აკადემიის ინგლისურენოვან გვერდზე.