Return to Video

event თვისებების გამოყენება (ვიდეო ვერსია)

  • 0:01 - 0:03
    აქ არის ვებგვერდი
    რომელზეც ვინსტონის სურათია.
  • 0:03 - 0:07
    აცივდა და ვინსტონi ბერდება,
  • 0:07 - 0:09
    ამიტომ სურს წვერი ჰქონდეს.
  • 0:09 - 0:11
    შემიძლია წვერი მე თვითონ დავხატო,
  • 0:11 - 0:14
    მაგრამ უფრო მაგარი იქნება
    თუ მომხმარებელს შეეძლება
  • 0:14 - 0:16
    ვინსტონის სახეზე წვერის დახატვა,
    როგორც თვითონ მოესურვება --
  • 0:16 - 0:20
    გრძელი წვერი, უბრალოდ
    ღინღლი, როგორც თვითონ ურჩევნია
  • 0:20 - 0:23
    როგორ გავაკეთოთ ეს?
  • 0:23 - 0:29
    ამისი ერთი გზაა event listener-ის დამატება
    სურათზე "mouseMove" event-ისთვის,
  • 0:29 - 0:34
    ანუ ფუნქცია გამოძახებული იქნება როცა
    მაუსი ვინსტონის სახეზე გამოძრავდება.
  • 0:34 - 0:38
    ვნახოთ როგორ იქნება ეს
    იმის მიხედვით რაც უკვე ვიცით.
  • 0:38 - 0:47
    პირველი ნაბიჯია
    ელემენტის ანუ სურათის მოძებნა.
  • 0:47 - 0:50
    "face", რადგან ასე დავარქვით.
  • 0:50 - 0:54
    მეორე ნაბიჯია
    უკუკავშირის ფუნქციის გაკეთება.
  • 0:54 - 0:58
    უბრალოთი დავიწყოთ, რათა
    დავრწმუნდეთ რომ ნამდვილად იმუშავა,
  • 0:58 - 1:12
    მოგვიანებით უფრო მეტს გავაკეთებინებთ.
  • 1:12 - 1:13
    ესეც ასე.
  • 1:13 - 1:18
    უკანასკნელი ნაბიჯი
    ამისი გაერთიანების, არის ის,
  • 1:18 - 1:22
    რომ ფუნქცია მაშინ უნდა იქნეს გამოძახებული,
    როცა ეს "mouseMoved" event-ს მიიღებს.
  • 1:22 - 1:28
    მაშინ, დავწეროთ
    face.addEventListener("mousemove",
  • 1:28 - 1:32
    შემდეგ კი გადავცეთ
    ფუნქციის სახელი, 'onMouseMove'.
  • 1:32 - 1:37
    ახლა გირჩევთ დააპაუზოთ გაკვეთილი
    და მაუსის სახეზე გადატარება სცადოთ.
  • 1:37 - 1:40
    მიიღეთ შეტყობინება?
  • 1:40 - 1:44
    იმედია ნახეთ რომ ყველაფერი კარგად მუშაობს.
  • 1:44 - 1:47
    მაგრამ ეს ის არაა რაც გვინდა
    რომ ჩვენმა event listener-მა გააკეთოს.
  • 1:47 - 1:50
    ჩვენ გვინდა ხატოს და არა ტექსტი წეროს.
  • 1:50 - 1:53
    როგორ ვხატოთ ვებგვერდზე?
  • 1:53 - 1:59
    შეგვიძლია -ის tag შემოვიტანოთ
    და ზედ პიქსელები დავხატოთ,
  • 1:59 - 2:01
    როგორც ვაკეთბთ ProcessingjS პროგრამებში.
  • 2:01 - 2:07
    ამჯერად მხოლოდ წვერს ვხატავთ,
    რაც უბრალოდ შავი წერტილებია,
  • 2:07 - 2:12
    ამიტომ შეგვიძლია უბრალოდ შევქმნათ
    თითოეული წერტილისთვის, და ეს
  • 2:12 - 2:14
    აბსოლუტური პოზიციონირებით მოვათავსოთ.
  • 2:14 - 2:18
    ამას წვერის ერთი ფოლიკულით გიჩვენებთ.
  • 2:18 - 2:25
    შევქმნით -ს 'beard' კლასით
    და შემდეგ CSS-ს გამოვიყენებთ,
  • 2:25 - 2:30
    რათა ამ წვერს ცოტა სტილი შევუცვალოთ.
  • 2:30 - 2:32
    ახლა ეს გავასწოროთ.
  • 2:32 - 2:36
    როგორც ხედავთ, წვერი შავი
    ფონია, ხუთი ხუთზე პიქსელით,
  • 2:36 - 2:41
    პიქსელების საზღვრის რადიუსია
    ორი, ცოტა მრგვალი ფორმა რომ მიეცეს
  • 2:41 - 2:45
    რომელიც აბსოლუტურ
    პოზიციონირების სქემას იყენებს.
  • 2:45 - 2:48
    ამჟამად სურათს ქვეშ ჩანს.
  • 2:48 - 2:51
    როგორ მოვიქცეთ რომ
    პირდაპირ სახეზე გამოჩნდეს?
  • 2:51 - 2:55
    ჩვენ აბსოლუტურ პოზიციონირებას
    ვიყენებთ, მაშინ ეს ნიშნავს იმას,
  • 2:55 - 3:00
    რომ უნდა გამოვიყენოთ 'top'
    და 'left' თვისებები რომ ზუსტად მივუთითოთ,
  • 3:00 - 3:02
    თუ სად გვინდა მოთავსება.
    ახლა ეს აბსოლუტურია.
  • 3:02 - 3:08
    კარგი, ვთქვათ 'top: 80px;'
    და შემდეგ 'left: 15px;'.
  • 3:08 - 3:09
    მშვენიერია.
  • 3:09 - 3:14
    რადგან ეს უკვე მუშაობს HTML-ში,
    ახლა JavaScript-ში ავამუშაოთ,
  • 3:14 - 3:19
    რათა მომხმარებელმა დინამიურიად შექმნას ეს
    ყოველ ჯერზე როცა მაუსს გაამოძრავებს.
  • 3:19 - 3:23
    დავუბრუნდეთ ჩვენი
    javaScript-ის უკუკავშირის ფუნქციას.
  • 3:23 - 3:26
    პირველ რიგში ვქმნით -ს,
  • 3:26 - 3:31
    რომელიც შეგვიძლია შევქმნათ ამით:
    `document.createElement()` function--
  • 3:31 - 3:34
    აქ იქნება .
  • 3:34 - 3:40
    მეორე, რაც უნდა გავაკეთოთ, არის კლასის
    დამატება: beard.className = "beard";.
  • 3:40 - 3:42
    ესეიგი გვაქვს
    რომელიც ჰაერში ლივლივებს.
  • 3:42 - 3:47
    უკანასკნელი ნაბიჯი
    ამ კოდის მთელ კოდზე მიბმაა.
  • 3:47 - 3:52
    კარგი, ახლა რაც HTML-ში
    იყო javaScript-შია გადაწერილი,
  • 3:52 - 3:55
    ამიტომ ამ HTML-ს წაშლა შეგვიძლია.
  • 3:55 - 3:59
    ისევ, დააპაუზეთ გაკვეთილი
    და დააკლიკეთ ვინსტონს,
  • 3:59 - 4:02
    ნახეთ რა მოხდება.
  • 4:02 - 4:05
    გამოჩნდა წვერის ფოლიკულა?
  • 4:05 - 4:07
    რამდენჯერმე დაკლიკება სცადეთ?
  • 4:07 - 4:11
    თუ სცადეთ, ნახავდით რომ
    მეორეჯერ აღარაფერი მოხდებოდა,
  • 4:11 - 4:14
    ან, გამოჩნდა რომ არაფერი მომხდარა.
  • 4:14 - 4:18
    ეს იმიტომ, რომ ყოველი ერთსა და
    იმავე "top" და "left" თვისებების მქონეა,
  • 4:18 - 4:21
    ანუ ყოველი ახალი ძველის ადგილზე თავსდება.
  • 4:21 - 4:25
    ჩვენ გვინდა რომ გამოჩნდეს ყველგან,
    სადაც მომხმარებლის მაუსი იქნება.
  • 4:25 - 4:30
    როგორ გავიგოთ თუ სადაა მომხმარებლის მაუსი?
  • 4:30 - 4:34
    როგორც აღმოჩნდა, ინტერნეტ-browser-ები
    მრავალ ინფორმაციას იწერენ,
  • 4:34 - 4:38
    ნებისმიერ მომხმარებელთან
    დაკავშირებულ მოვლენას, ადგილს და ა.შ.
  • 4:38 - 4:41
    browser გვაძლევს ინფორმაციას ყოველ ჯერზე,
  • 4:41 - 4:43
    ჩვენი event listener
    ფუნქციის გამოძახებისას.
  • 4:43 - 4:47
    კი მაგრამ სად და როგორ
    მივიღოთ ეს საოცარი ინფორმაცია?
  • 4:47 - 4:51
    ერთ ასოს დავწერ რომ მინიშნება მოგცეთ.
  • 4:51 - 4:56
    ეს 'e' ნიშნავს event information object-ს.
    (მოვლენის ინფორმაციის ობიექტი)
  • 4:56 - 5:00
    browser ამას ყოველთვის
    პირველ არგუმენტად აგზავნის
  • 5:00 - 5:02
    როცა იძახებს event listener-ის
    უკუკავშირის ფუნქციას.
  • 5:02 - 5:06
    აქამდე არ გვჭირდებოდა, ამიტომ
    არგუმენტების სიაც არ ჩამოგვიწერია.
  • 5:06 - 5:09
    ახლა რადგან გამოყენებას
    ვაპირებთ, დავარქვათ სახელი,
  • 5:09 - 5:12
    რათა უფრო მარტივი
    იყოს ფუნქციაში მისი მითითება.
  • 5:12 - 5:15
    გახსოვდეთ, რომ javaScript-ში
    ფუქნქცია შეიძლება ნებისმიერი რაოდენობის
  • 5:15 - 5:19
    არგუმენტებით იქნეს გამოძახებული,
    რომც არ ეხებოდეს ის რომელიმე მათგანს.
  • 5:19 - 5:23
    ესეიგი, ამ ინფორმაციას ჩვენ ყოველთვის
    ვიღებდით, უბრალოდ აქამდე არ ვიცოდით.
  • 5:23 - 5:28
    ახლა 'e'-ს log out
    გავუკეთოთ: 'console.log(e)'.
  • 5:28 - 5:32
    დააპაუზეთ გაკვეთილი, დააკლიკეთ
    ვინსტონს და შეამოწმეთ თქვენი კონსოლი.
  • 5:32 - 5:34
    აქ event ობიექტი logged out არის,
  • 5:34 - 5:39
    შეგიძლიათ იხილოთ მისი ყველა თვისება.
  • 5:39 - 5:43
    განსაკუთრებით საინტერესოა
    ორი event თვისება:
  • 5:43 - 5:46
    'clientX' და 'clientY'.
  • 5:46 - 5:49
    ჩაწერა ხდება ნებისმიერი მოვლენის
    x და y კოორდინატის, რასაც ჩვენ
  • 5:49 - 5:51
    წვერის მოთავსებისთვის გამოვიყენებთ.
  • 5:51 - 6:02
    წვერის top კოორდინატი
    გავუტოლოთ 'e.clientY + "px"'-ს,
  • 6:02 - 6:10
    left კოორდინატი
    გავუტოლოთ 'e.clientX + "px"'-ს.
  • 6:10 - 6:14
    დააპაუზეთ და გადაატარეთ მაუსი.
  • 6:14 - 6:18
    მიახატეთ ვინსტონს წვერი.
  • 6:18 - 6:19
    მაგარია არა?
  • 6:19 - 6:23
    ალბათ მრავალი ძალიან საინტერესო
    სახატავი პროგრამის მოფიქრება შეიძლება
  • 6:23 - 6:26
    clientX და clientY-ს გამოყენებით.
  • 6:26 - 6:29
    როგორც კონსოლში იხილეთ,
    კიდევ სხვა მონაცემებიც არის,
  • 6:29 - 6:31
    რომელიც ეხება event
    object-ს და გამოყენებადია.
  • 6:31 - 6:35
    ალბათ ყველაზე გამოსადეგი მაინც
    კლავიშებთან დაკავშირებული თვისებებია,
  • 6:35 - 6:38
    რომელთა მეშვეობით
    ვიგებთ თუ რა ღილაკს დააწვნენ
  • 6:38 - 6:41
    როცა გარკვეული მოვლენა
    მოხდა და ამისი გამოყენებით
  • 6:41 - 6:44
    შესაძლებელია კლავიშებთან
    დაკავშირებული თამაშის აწყობა.
  • 6:44 - 6:47
    კიდევ ერთი რამ:
  • 6:47 - 6:50
    აუცილებელი არაა 'e' არგუმენტის გამოძახება.
  • 6:50 - 6:57
    ეს ტიპიურია, მაგრამ ზოგიერთი დეველოპერი
    მას 'evt'-ს ან 'event-ს უწოდებენ.
  • 6:57 - 7:01
    მნიშვნელობა არ აქვს რას ვუწოდებთ,
    მთავარია ის მიუთითებდეს
  • 7:01 - 7:04
    პირველ არგუმენტზე, რომელიც
    browser-იდან ფუნქციას გადაეცემა,
  • 7:04 - 7:09
    შემდეგ კი ჩვენც ეს
    მითითება უნდა გამოვიყენოთ.
  • 7:09 - 7:13
    თუ რამე პრობლემა გაქვთ,
    გამოიყენეთ console.log,
  • 7:13 - 7:16
    რომელიც მოგეხმარებათ
    პრობლემების მოგვარებაში.
  • 7:16 - 7:21
    ვებ დეველოპერისთვის კონსოლი
    საუკეთესო მეგობარია, გამოიყენეთ!
Title:
event თვისებების გამოყენება (ვიდეო ვერსია)
Description:

ეს არის გაკვეთლის ჩანაწერი. გირჩევთ შეხვიდეთ Khan Academy-ზე და უყუროთ გაკვეთილი ინტერაქტიულ ვერსიას, სადაც შეგიძლიათ დაპაუზება, კოდის შეცვლა და ყველაფრის უკეთესი გაფართოებით ნახვა:
http://www.khanacademy.org/computer-programming
more » « less
Video Language:
English
Duration:
07:23

Georgian subtitles

Revisions

Our website uses cookies for analysis purposes.