0:00:00.556,0:00:03.450
აქ არის ვებგვერდი[br]რომელზეც ვინსტონის სურათია.

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

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

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

0:00:10.750,0:00:13.523
მაგრამ უფრო მაგარი იქნება[br]თუ მომხმარებელს შეეძლება

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

0:00:16.412,0:00:20.380
გრძელი წვერი, უბრალოდ[br]ღინღლი, როგორც თვითონ ურჩევნია

0:00:20.380,0:00:22.711
როგორ გავაკეთოთ ეს?

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

0:00:28.693,0:00:34.386
ანუ ფუნქცია გამოძახებული იქნება როცა[br]მაუსი ვინსტონის სახეზე გამოძრავდება.

0:00:34.386,0:00:37.614
ვნახოთ როგორ იქნება ეს[br]იმის მიხედვით რაც უკვე ვიცით.

0:00:37.614,0:00:47.009
პირველი ნაბიჯია[br]ელემენტის ანუ სურათის მოძებნა.

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

0:00:50.281,0:00:53.866
მეორე ნაბიჯია[br]უკუკავშირის ფუნქციის გაკეთება.

0:00:53.866,0:00:58.267
უბრალოთი დავიწყოთ, რათა[br]დავრწმუნდეთ რომ ნამდვილად იმუშავა,

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

0:01:11.720,0:01:13.182
ესეც ასე.

0:01:13.182,0:01:17.946
უკანასკნელი ნაბიჯი[br]ამისი გაერთიანების, არის ის,

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

0:01:21.941,0:01:27.854
მაშინ, დავწეროთ[br]face.addEventListener("mousemove",

0:01:27.854,0:01:32.070
შემდეგ კი გადავცეთ[br]ფუნქციის სახელი, 'onMouseMove'.

0:01:32.070,0:01:36.590
ახლა გირჩევთ დააპაუზოთ გაკვეთილი[br]და მაუსის სახეზე გადატარება სცადოთ.

0:01:36.590,0:01:39.885
მიიღეთ შეტყობინება?

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

0:01:43.856,0:01:47.344
მაგრამ ეს ის არაა რაც გვინდა[br]რომ ჩვენმა event listener-მა გააკეთოს.

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

0:01:50.450,0:01:53.356
როგორ ვხატოთ ვებგვერდზე?

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

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

0:02:00.732,0:02:06.502
ამჯერად მხოლოდ წვერს ვხატავთ,[br]რაც უბრალოდ შავი წერტილებია,

0:02:06.502,0:02:11.566
ამიტომ შეგვიძლია უბრალოდ შევქმნათ[br] თითოეული წერტილისთვის, და ეს

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

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

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

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

0:02:29.741,0:02:31.750
ახლა ეს გავასწოროთ.

0:02:31.750,0:02:36.471
როგორც ხედავთ, წვერი შავი[br]ფონია, ხუთი ხუთზე პიქსელით,

0:02:36.471,0:02:40.525
პიქსელების საზღვრის რადიუსია[br]ორი, ცოტა მრგვალი ფორმა რომ მიეცეს

0:02:40.525,0:02:44.684
რომელიც აბსოლუტურ[br]პოზიციონირების სქემას იყენებს.

0:02:44.684,0:02:48.488
ამჟამად  სურათს ქვეშ ჩანს.

0:02:48.488,0:02:51.473
როგორ მოვიქცეთ რომ[br]პირდაპირ სახეზე გამოჩნდეს?

0:02:51.473,0:02:55.271
ჩვენ აბსოლუტურ პოზიციონირებას[br]ვიყენებთ, მაშინ ეს ნიშნავს იმას,

0:02:55.271,0:02:59.827
რომ უნდა გამოვიყენოთ 'top'[br]და 'left' თვისებები რომ ზუსტად მივუთითოთ,

0:02:59.827,0:03:02.073
თუ სად გვინდა მოთავსება.[br]ახლა ეს აბსოლუტურია.

0:03:02.073,0:03:07.923
კარგი, ვთქვათ 'top: 80px;'[br]და შემდეგ 'left: 15px;'.

0:03:07.923,0:03:09.422
მშვენიერია.

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

0:03:13.750,0:03:18.865
რათა მომხმარებელმა დინამიურიად შექმნას ეს[br] ყოველ ჯერზე როცა მაუსს გაამოძრავებს.

0:03:18.865,0:03:22.778
დავუბრუნდეთ ჩვენი[br]javaScript-ის უკუკავშირის ფუნქციას.

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

0:03:25.534,0:03:31.406
რომელიც შეგვიძლია შევქმნათ ამით:[br]`document.createElement()` function--

0:03:31.406,0:03:33.590
აქ იქნება .

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

0:03:39.580,0:03:42.198
ესეიგი გვაქვს [br]რომელიც ჰაერში ლივლივებს.

0:03:42.198,0:03:47.072
უკანასკნელი ნაბიჯი[br]ამ კოდის მთელ კოდზე მიბმაა.

0:03:47.072,0:03:52.103
კარგი, ახლა რაც HTML-ში[br]იყო javaScript-შია გადაწერილი,

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

0:03:54.666,0:03:58.764
ისევ, დააპაუზეთ გაკვეთილი[br]და დააკლიკეთ ვინსტონს,

0:03:58.764,0:04:02.412
ნახეთ რა მოხდება.

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

0:04:04.933,0:04:07.191
რამდენჯერმე დაკლიკება სცადეთ?

0:04:07.191,0:04:11.090
თუ სცადეთ, ნახავდით რომ[br]მეორეჯერ აღარაფერი მოხდებოდა,

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

0:04:13.525,0:04:17.863
ეს იმიტომ, რომ ყოველი  ერთსა და[br]იმავე "top" და "left" თვისებების მქონეა,

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

0:04:21.081,0:04:25.493
ჩვენ გვინდა რომ  გამოჩნდეს ყველგან,[br]სადაც მომხმარებლის მაუსი იქნება.

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

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

0:04:34.317,0:04:38.082
ნებისმიერ მომხმარებელთან[br]დაკავშირებულ მოვლენას, ადგილს და ა.შ.

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

0:04:41.018,0:04:43.224
ჩვენი event listener[br]ფუნქციის გამოძახებისას.

0:04:43.224,0:04:46.804
კი მაგრამ სად და როგორ[br]მივიღოთ ეს საოცარი ინფორმაცია?

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

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

0:04:56.074,0:04:59.609
browser ამას ყოველთვის[br]პირველ არგუმენტად აგზავნის

0:04:59.609,0:05:02.129
როცა იძახებს event listener-ის[br]უკუკავშირის ფუნქციას.

0:05:02.129,0:05:06.178
აქამდე არ გვჭირდებოდა, ამიტომ[br]არგუმენტების სიაც არ ჩამოგვიწერია.

0:05:06.178,0:05:09.002
ახლა რადგან გამოყენებას[br]ვაპირებთ, დავარქვათ სახელი,

0:05:09.002,0:05:11.594
რათა უფრო მარტივი[br]იყოს ფუნქციაში მისი მითითება.

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

0:05:14.966,0:05:18.588
არგუმენტებით იქნეს გამოძახებული,[br]რომც არ ეხებოდეს ის რომელიმე მათგანს.

0:05:18.588,0:05:22.701
ესეიგი, ამ ინფორმაციას ჩვენ ყოველთვის[br]ვიღებდით, უბრალოდ აქამდე არ ვიცოდით.

0:05:22.701,0:05:28.278
ახლა 'e'-ს log out[br]გავუკეთოთ: 'console.log(e)'.

0:05:28.278,0:05:32.162
დააპაუზეთ გაკვეთილი, დააკლიკეთ[br]ვინსტონს და შეამოწმეთ თქვენი კონსოლი.

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

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

0:05:38.580,0:05:43.267
განსაკუთრებით საინტერესოა[br]ორი event თვისება:

0:05:43.267,0:05:45.594
'clientX' და 'clientY'.

0:05:45.594,0:05:49.314
ჩაწერა ხდება ნებისმიერი მოვლენის[br]x და y კოორდინატის, რასაც ჩვენ

0:05:49.314,0:05:51.155
წვერის მოთავსებისთვის გამოვიყენებთ.

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

0:06:02.015,0:06:10.323
left კოორდინატი[br]გავუტოლოთ 'e.clientX + "px"'-ს.

0:06:10.323,0:06:14.320
დააპაუზეთ და გადაატარეთ მაუსი.

0:06:14.320,0:06:17.973
მიახატეთ ვინსტონს წვერი.

0:06:17.973,0:06:19.454
მაგარია არა?

0:06:19.454,0:06:23.157
ალბათ მრავალი ძალიან საინტერესო[br]სახატავი პროგრამის მოფიქრება შეიძლება

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

0:06:25.559,0:06:28.793
როგორც კონსოლში იხილეთ,[br]კიდევ სხვა მონაცემებიც არის,

0:06:28.793,0:06:31.251
რომელიც ეხება event[br]object-ს და გამოყენებადია.

0:06:31.251,0:06:35.354
ალბათ ყველაზე გამოსადეგი მაინც[br]კლავიშებთან დაკავშირებული თვისებებია,

0:06:35.354,0:06:38.107
რომელთა მეშვეობით[br]ვიგებთ თუ რა ღილაკს დააწვნენ

0:06:38.107,0:06:40.541
როცა გარკვეული მოვლენა[br]მოხდა და ამისი გამოყენებით

0:06:40.541,0:06:44.352
შესაძლებელია კლავიშებთან[br]დაკავშირებული თამაშის აწყობა.

0:06:44.352,0:06:47.206
კიდევ ერთი რამ:

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

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

0:06:57.312,0:07:00.602
მნიშვნელობა არ აქვს რას ვუწოდებთ,[br]მთავარია ის მიუთითებდეს

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

0:07:03.695,0:07:09.485
შემდეგ კი ჩვენც ეს[br]მითითება უნდა გამოვიყენოთ.

0:07:09.485,0:07:13.281
თუ რამე პრობლემა გაქვთ,[br]გამოიყენეთ console.log,

0:07:13.281,0:07:15.639
რომელიც მოგეხმარებათ[br]პრობლემების მოგვარებაში.

0:07:15.639,0:07:21.415
ვებ დეველოპერისთვის კონსოლი[br]საუკეთესო მეგობარია, გამოიყენეთ!