WEBVTT

00:00:00.556 --> 00:00:03.450
აქ არის ვებგვერდი
რომელზეც ვინსტონის სურათია.

00:00:03.450 --> 00:00:06.556
აცივდა და ვინსტონi ბერდება,

00:00:06.556 --> 00:00:08.646
ამიტომ სურს წვერი ჰქონდეს.

00:00:08.646 --> 00:00:10.750
შემიძლია წვერი მე თვითონ დავხატო,

00:00:10.750 --> 00:00:13.523
მაგრამ უფრო მაგარი იქნება
თუ მომხმარებელს შეეძლება

00:00:13.523 --> 00:00:16.412
ვინსტონის სახეზე წვერის დახატვა,
როგორც თვითონ მოესურვება --

00:00:16.412 --> 00:00:20.380
გრძელი წვერი, უბრალოდ
ღინღლი, როგორც თვითონ ურჩევნია

00:00:20.380 --> 00:00:22.711
როგორ გავაკეთოთ ეს?

00:00:22.711 --> 00:00:28.693
ამისი ერთი გზაა event listener-ის დამატება
სურათზე "mouseMove" event-ისთვის,

00:00:28.693 --> 00:00:34.386
ანუ ფუნქცია გამოძახებული იქნება როცა
მაუსი ვინსტონის სახეზე გამოძრავდება.

00:00:34.386 --> 00:00:37.614
ვნახოთ როგორ იქნება ეს
იმის მიხედვით რაც უკვე ვიცით.

00:00:37.614 --> 00:00:47.009
პირველი ნაბიჯია
ელემენტის ანუ სურათის მოძებნა.

00:00:47.009 --> 00:00:50.281
"face", რადგან ასე დავარქვით.

00:00:50.281 --> 00:00:53.866
მეორე ნაბიჯია
უკუკავშირის ფუნქციის გაკეთება.

00:00:53.866 --> 00:00:58.267
უბრალოთი დავიწყოთ, რათა
დავრწმუნდეთ რომ ნამდვილად იმუშავა,

00:00:58.267 --> 00:01:11.720
მოგვიანებით უფრო მეტს გავაკეთებინებთ.

00:01:11.720 --> 00:01:13.182
ესეც ასე.

00:01:13.182 --> 00:01:17.946
უკანასკნელი ნაბიჯი
ამისი გაერთიანების, არის ის,

00:01:17.946 --> 00:01:21.941
რომ ფუნქცია მაშინ უნდა იქნეს გამოძახებული,
როცა ეს "mouseMoved" event-ს მიიღებს.

00:01:21.941 --> 00:01:27.854
მაშინ, დავწეროთ
face.addEventListener("mousemove",

00:01:27.854 --> 00:01:32.070
შემდეგ კი გადავცეთ
ფუნქციის სახელი, 'onMouseMove'.

00:01:32.070 --> 00:01:36.590
ახლა გირჩევთ დააპაუზოთ გაკვეთილი
და მაუსის სახეზე გადატარება სცადოთ.

00:01:36.590 --> 00:01:39.885
მიიღეთ შეტყობინება?

00:01:39.885 --> 00:01:43.856
იმედია ნახეთ რომ ყველაფერი კარგად მუშაობს.

00:01:43.856 --> 00:01:47.344
მაგრამ ეს ის არაა რაც გვინდა
რომ ჩვენმა event listener-მა გააკეთოს.

00:01:47.344 --> 00:01:50.450
ჩვენ გვინდა ხატოს და არა ტექსტი წეროს.

00:01:50.450 --> 00:01:53.356
როგორ ვხატოთ ვებგვერდზე?

00:01:53.356 --> 00:01:58.596
შეგვიძლია -ის tag შემოვიტანოთ
და ზედ პიქსელები დავხატოთ,

00:01:58.596 --> 00:02:00.732
როგორც ვაკეთბთ ProcessingjS პროგრამებში.

00:02:00.732 --> 00:02:06.502
ამჯერად მხოლოდ წვერს ვხატავთ,
რაც უბრალოდ შავი წერტილებია,

00:02:06.502 --> 00:02:11.566
ამიტომ შეგვიძლია უბრალოდ შევქმნათ
 თითოეული წერტილისთვის, და ეს 

00:02:11.566 --> 00:02:13.551
აბსოლუტური პოზიციონირებით მოვათავსოთ.

00:02:13.551 --> 00:02:18.310
ამას წვერის ერთი ფოლიკულით გიჩვენებთ.

00:02:18.310 --> 00:02:24.524
შევქმნით -ს 'beard' კლასით
და შემდეგ CSS-ს გამოვიყენებთ,

00:02:24.524 --> 00:02:29.741
რათა ამ წვერს ცოტა სტილი შევუცვალოთ.

00:02:29.741 --> 00:02:31.750
ახლა ეს გავასწოროთ.

00:02:31.750 --> 00:02:36.471
როგორც ხედავთ, წვერი შავი
ფონია, ხუთი ხუთზე პიქსელით,

00:02:36.471 --> 00:02:40.525
პიქსელების საზღვრის რადიუსია
ორი, ცოტა მრგვალი ფორმა რომ მიეცეს

00:02:40.525 --> 00:02:44.684
რომელიც აბსოლუტურ
პოზიციონირების სქემას იყენებს.

00:02:44.684 --> 00:02:48.488
ამჟამად  სურათს ქვეშ ჩანს.

00:02:48.488 --> 00:02:51.473
როგორ მოვიქცეთ რომ
პირდაპირ სახეზე გამოჩნდეს?

00:02:51.473 --> 00:02:55.271
ჩვენ აბსოლუტურ პოზიციონირებას
ვიყენებთ, მაშინ ეს ნიშნავს იმას,

00:02:55.271 --> 00:02:59.827
რომ უნდა გამოვიყენოთ 'top'
და 'left' თვისებები რომ ზუსტად მივუთითოთ,

00:02:59.827 --> 00:03:02.073
თუ სად გვინდა მოთავსება.
ახლა ეს აბსოლუტურია.

00:03:02.073 --> 00:03:07.923
კარგი, ვთქვათ 'top: 80px;'
და შემდეგ 'left: 15px;'.

00:03:07.923 --> 00:03:09.422
მშვენიერია.

00:03:09.422 --> 00:03:13.750
რადგან ეს უკვე მუშაობს HTML-ში,
ახლა JavaScript-ში ავამუშაოთ,

00:03:13.750 --> 00:03:18.865
რათა მომხმარებელმა დინამიურიად შექმნას ეს
 ყოველ ჯერზე როცა მაუსს გაამოძრავებს.

00:03:18.865 --> 00:03:22.778
დავუბრუნდეთ ჩვენი
javaScript-ის უკუკავშირის ფუნქციას.

00:03:22.778 --> 00:03:25.534
პირველ რიგში ვქმნით -ს,

00:03:25.534 --> 00:03:31.406
რომელიც შეგვიძლია შევქმნათ ამით:
`document.createElement()` function--

00:03:31.406 --> 00:03:33.590
აქ იქნება .

00:03:33.590 --> 00:03:39.580
მეორე, რაც უნდა გავაკეთოთ, არის კლასის
დამატება: beard.className = "beard";.

00:03:39.580 --> 00:03:42.198
ესეიგი გვაქვს 
რომელიც ჰაერში ლივლივებს.

00:03:42.198 --> 00:03:47.072
უკანასკნელი ნაბიჯი
ამ კოდის მთელ კოდზე მიბმაა.

00:03:47.072 --> 00:03:52.103
კარგი, ახლა რაც HTML-ში
იყო javaScript-შია გადაწერილი,

00:03:52.103 --> 00:03:54.666
ამიტომ ამ HTML-ს წაშლა შეგვიძლია.

00:03:54.666 --> 00:03:58.764
ისევ, დააპაუზეთ გაკვეთილი
და დააკლიკეთ ვინსტონს,

00:03:58.764 --> 00:04:02.412
ნახეთ რა მოხდება.

00:04:02.412 --> 00:04:04.933
გამოჩნდა წვერის ფოლიკულა?

00:04:04.933 --> 00:04:07.191
რამდენჯერმე დაკლიკება სცადეთ?

00:04:07.191 --> 00:04:11.090
თუ სცადეთ, ნახავდით რომ
მეორეჯერ აღარაფერი მოხდებოდა,

00:04:11.090 --> 00:04:13.525
ან, გამოჩნდა რომ არაფერი მომხდარა.

00:04:13.525 --> 00:04:17.863
ეს იმიტომ, რომ ყოველი  ერთსა და
იმავე "top" და "left" თვისებების მქონეა,

00:04:17.863 --> 00:04:21.081
ანუ ყოველი ახალი ძველის ადგილზე თავსდება.

00:04:21.081 --> 00:04:25.493
ჩვენ გვინდა რომ  გამოჩნდეს ყველგან,
სადაც მომხმარებლის მაუსი იქნება.

00:04:25.493 --> 00:04:30.386
როგორ გავიგოთ თუ სადაა მომხმარებლის მაუსი?

00:04:30.386 --> 00:04:34.317
როგორც აღმოჩნდა, ინტერნეტ-browser-ები
მრავალ ინფორმაციას იწერენ,

00:04:34.317 --> 00:04:38.082
ნებისმიერ მომხმარებელთან
დაკავშირებულ მოვლენას, ადგილს და ა.შ.

00:04:38.082 --> 00:04:41.018
browser გვაძლევს ინფორმაციას ყოველ ჯერზე,

00:04:41.018 --> 00:04:43.224
ჩვენი event listener
ფუნქციის გამოძახებისას.

00:04:43.224 --> 00:04:46.804
კი მაგრამ სად და როგორ
მივიღოთ ეს საოცარი ინფორმაცია?

00:04:46.804 --> 00:04:51.412
ერთ ასოს დავწერ რომ მინიშნება მოგცეთ.

00:04:51.412 --> 00:04:56.074
ეს 'e' ნიშნავს event information object-ს.
(მოვლენის ინფორმაციის ობიექტი)

00:04:56.074 --> 00:04:59.609
browser ამას ყოველთვის
პირველ არგუმენტად აგზავნის

00:04:59.609 --> 00:05:02.129
როცა იძახებს event listener-ის
უკუკავშირის ფუნქციას.

00:05:02.129 --> 00:05:06.178
აქამდე არ გვჭირდებოდა, ამიტომ
არგუმენტების სიაც არ ჩამოგვიწერია.

00:05:06.178 --> 00:05:09.002
ახლა რადგან გამოყენებას
ვაპირებთ, დავარქვათ სახელი,

00:05:09.002 --> 00:05:11.594
რათა უფრო მარტივი
იყოს ფუნქციაში მისი მითითება.

00:05:11.594 --> 00:05:14.966
გახსოვდეთ, რომ javaScript-ში
ფუქნქცია შეიძლება ნებისმიერი რაოდენობის

00:05:14.966 --> 00:05:18.588
არგუმენტებით იქნეს გამოძახებული,
რომც არ ეხებოდეს ის რომელიმე მათგანს.

00:05:18.588 --> 00:05:22.701
ესეიგი, ამ ინფორმაციას ჩვენ ყოველთვის
ვიღებდით, უბრალოდ აქამდე არ ვიცოდით.

00:05:22.701 --> 00:05:28.278
ახლა 'e'-ს log out
გავუკეთოთ: 'console.log(e)'.

00:05:28.278 --> 00:05:32.162
დააპაუზეთ გაკვეთილი, დააკლიკეთ
ვინსტონს და შეამოწმეთ თქვენი კონსოლი.

00:05:32.162 --> 00:05:34.410
აქ event ობიექტი logged out არის,

00:05:34.410 --> 00:05:38.580
შეგიძლიათ იხილოთ მისი ყველა თვისება.

00:05:38.580 --> 00:05:43.267
განსაკუთრებით საინტერესოა
ორი event თვისება:

00:05:43.267 --> 00:05:45.594
'clientX' და 'clientY'.

00:05:45.594 --> 00:05:49.314
ჩაწერა ხდება ნებისმიერი მოვლენის
x და y კოორდინატის, რასაც ჩვენ

00:05:49.314 --> 00:05:51.155
წვერის მოთავსებისთვის გამოვიყენებთ.

00:05:51.155 --> 00:06:02.015
წვერის top კოორდინატი
გავუტოლოთ 'e.clientY + "px"'-ს,

00:06:02.015 --> 00:06:10.323
left კოორდინატი
გავუტოლოთ 'e.clientX + "px"'-ს.

00:06:10.323 --> 00:06:14.320
დააპაუზეთ და გადაატარეთ მაუსი.

00:06:14.320 --> 00:06:17.973
მიახატეთ ვინსტონს წვერი.

00:06:17.973 --> 00:06:19.454
მაგარია არა?

00:06:19.454 --> 00:06:23.157
ალბათ მრავალი ძალიან საინტერესო
სახატავი პროგრამის მოფიქრება შეიძლება

00:06:23.157 --> 00:06:25.559
clientX და clientY-ს გამოყენებით.

00:06:25.559 --> 00:06:28.793
როგორც კონსოლში იხილეთ,
კიდევ სხვა მონაცემებიც არის,

00:06:28.793 --> 00:06:31.251
რომელიც ეხება event
object-ს და გამოყენებადია.

00:06:31.251 --> 00:06:35.354
ალბათ ყველაზე გამოსადეგი მაინც
კლავიშებთან დაკავშირებული თვისებებია,

00:06:35.354 --> 00:06:38.107
რომელთა მეშვეობით
ვიგებთ თუ რა ღილაკს დააწვნენ

00:06:38.107 --> 00:06:40.541
როცა გარკვეული მოვლენა
მოხდა და ამისი გამოყენებით

00:06:40.541 --> 00:06:44.352
შესაძლებელია კლავიშებთან
დაკავშირებული თამაშის აწყობა.

00:06:44.352 --> 00:06:47.206
კიდევ ერთი რამ:

00:06:47.206 --> 00:06:49.700
აუცილებელი არაა 'e' არგუმენტის გამოძახება.

00:06:49.700 --> 00:06:57.312
ეს ტიპიურია, მაგრამ ზოგიერთი დეველოპერი
მას 'evt'-ს ან 'event-ს უწოდებენ.

00:06:57.312 --> 00:07:00.602
მნიშვნელობა არ აქვს რას ვუწოდებთ,
მთავარია ის მიუთითებდეს

00:07:00.602 --> 00:07:03.695
პირველ არგუმენტზე, რომელიც
browser-იდან ფუნქციას გადაეცემა,

00:07:03.695 --> 00:07:09.485
შემდეგ კი ჩვენც ეს
მითითება უნდა გამოვიყენოთ.

00:07:09.485 --> 00:07:13.281
თუ რამე პრობლემა გაქვთ,
გამოიყენეთ console.log,

00:07:13.281 --> 00:07:15.639
რომელიც მოგეხმარებათ
პრობლემების მოგვარებაში.

00:07:15.639 --> 00:07:21.415
ვებ დეველოპერისთვის კონსოლი
საუკეთესო მეგობარია, გამოიყენეთ!