1
00:00:00,556 --> 00:00:03,450
აქ არის ვებგვერდი
რომელზეც ვინსტონის სურათია.

2
00:00:03,450 --> 00:00:06,556
აცივდა და ვინსტონi ბერდება,

3
00:00:06,556 --> 00:00:08,646
ამიტომ სურს წვერი ჰქონდეს.

4
00:00:08,646 --> 00:00:10,750
შემიძლია წვერი მე თვითონ დავხატო,

5
00:00:10,750 --> 00:00:13,523
მაგრამ უფრო მაგარი იქნება
თუ მომხმარებელს შეეძლება

6
00:00:13,523 --> 00:00:16,412
ვინსტონის სახეზე წვერის დახატვა,
როგორც თვითონ მოესურვება --

7
00:00:16,412 --> 00:00:20,380
გრძელი წვერი, უბრალოდ
ღინღლი, როგორც თვითონ ურჩევნია

8
00:00:20,380 --> 00:00:22,711
როგორ გავაკეთოთ ეს?

9
00:00:22,711 --> 00:00:28,693
ამისი ერთი გზაა event listener-ის დამატება
სურათზე "mouseMove" event-ისთვის,

10
00:00:28,693 --> 00:00:34,386
ანუ ფუნქცია გამოძახებული იქნება როცა
მაუსი ვინსტონის სახეზე გამოძრავდება.

11
00:00:34,386 --> 00:00:37,614
ვნახოთ როგორ იქნება ეს
იმის მიხედვით რაც უკვე ვიცით.

12
00:00:37,614 --> 00:00:47,009
პირველი ნაბიჯია
ელემენტის ანუ სურათის მოძებნა.

13
00:00:47,009 --> 00:00:50,281
"face", რადგან ასე დავარქვით.

14
00:00:50,281 --> 00:00:53,866
მეორე ნაბიჯია
უკუკავშირის ფუნქციის გაკეთება.

15
00:00:53,866 --> 00:00:58,267
უბრალოთი დავიწყოთ, რათა
დავრწმუნდეთ რომ ნამდვილად იმუშავა,

16
00:00:58,267 --> 00:01:11,720
მოგვიანებით უფრო მეტს გავაკეთებინებთ.

17
00:01:11,720 --> 00:01:13,182
ესეც ასე.

18
00:01:13,182 --> 00:01:17,946
უკანასკნელი ნაბიჯი
ამისი გაერთიანების, არის ის,

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

20
00:01:21,941 --> 00:01:27,854
მაშინ, დავწეროთ
face.addEventListener("mousemove",

21
00:01:27,854 --> 00:01:32,070
შემდეგ კი გადავცეთ
ფუნქციის სახელი, 'onMouseMove'.

22
00:01:32,070 --> 00:01:36,590
ახლა გირჩევთ დააპაუზოთ გაკვეთილი
და მაუსის სახეზე გადატარება სცადოთ.

23
00:01:36,590 --> 00:01:39,885
მიიღეთ შეტყობინება?

24
00:01:39,885 --> 00:01:43,856
იმედია ნახეთ რომ ყველაფერი კარგად მუშაობს.

25
00:01:43,856 --> 00:01:47,344
მაგრამ ეს ის არაა რაც გვინდა
რომ ჩვენმა event listener-მა გააკეთოს.

26
00:01:47,344 --> 00:01:50,450
ჩვენ გვინდა ხატოს და არა ტექსტი წეროს.

27
00:01:50,450 --> 00:01:53,356
როგორ ვხატოთ ვებგვერდზე?

28
00:01:53,356 --> 00:01:58,596
შეგვიძლია -ის tag შემოვიტანოთ
და ზედ პიქსელები დავხატოთ,

29
00:01:58,596 --> 00:02:00,732
როგორც ვაკეთბთ ProcessingjS პროგრამებში.

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

31
00:02:06,502 --> 00:02:11,566
ამიტომ შეგვიძლია უბრალოდ შევქმნათ
 თითოეული წერტილისთვის, და ეს 

32
00:02:11,566 --> 00:02:13,551
აბსოლუტური პოზიციონირებით მოვათავსოთ.

33
00:02:13,551 --> 00:02:18,310
ამას წვერის ერთი ფოლიკულით გიჩვენებთ.

34
00:02:18,310 --> 00:02:24,524
შევქმნით -ს 'beard' კლასით
და შემდეგ CSS-ს გამოვიყენებთ,

35
00:02:24,524 --> 00:02:29,741
რათა ამ წვერს ცოტა სტილი შევუცვალოთ.

36
00:02:29,741 --> 00:02:31,750
ახლა ეს გავასწოროთ.

37
00:02:31,750 --> 00:02:36,471
როგორც ხედავთ, წვერი შავი
ფონია, ხუთი ხუთზე პიქსელით,

38
00:02:36,471 --> 00:02:40,525
პიქსელების საზღვრის რადიუსია
ორი, ცოტა მრგვალი ფორმა რომ მიეცეს

39
00:02:40,525 --> 00:02:44,684
რომელიც აბსოლუტურ
პოზიციონირების სქემას იყენებს.

40
00:02:44,684 --> 00:02:48,488
ამჟამად  სურათს ქვეშ ჩანს.

41
00:02:48,488 --> 00:02:51,473
როგორ მოვიქცეთ რომ
პირდაპირ სახეზე გამოჩნდეს?

42
00:02:51,473 --> 00:02:55,271
ჩვენ აბსოლუტურ პოზიციონირებას
ვიყენებთ, მაშინ ეს ნიშნავს იმას,

43
00:02:55,271 --> 00:02:59,827
რომ უნდა გამოვიყენოთ 'top'
და 'left' თვისებები რომ ზუსტად მივუთითოთ,

44
00:02:59,827 --> 00:03:02,073
თუ სად გვინდა მოთავსება.
ახლა ეს აბსოლუტურია.

45
00:03:02,073 --> 00:03:07,923
კარგი, ვთქვათ 'top: 80px;'
და შემდეგ 'left: 15px;'.

46
00:03:07,923 --> 00:03:09,422
მშვენიერია.

47
00:03:09,422 --> 00:03:13,750
რადგან ეს უკვე მუშაობს HTML-ში,
ახლა JavaScript-ში ავამუშაოთ,

48
00:03:13,750 --> 00:03:18,865
რათა მომხმარებელმა დინამიურიად შექმნას ეს
 ყოველ ჯერზე როცა მაუსს გაამოძრავებს.

49
00:03:18,865 --> 00:03:22,778
დავუბრუნდეთ ჩვენი
javaScript-ის უკუკავშირის ფუნქციას.

50
00:03:22,778 --> 00:03:25,534
პირველ რიგში ვქმნით -ს,

51
00:03:25,534 --> 00:03:31,406
რომელიც შეგვიძლია შევქმნათ ამით:
`document.createElement()` function--

52
00:03:31,406 --> 00:03:33,590
აქ იქნება .

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

54
00:03:39,580 --> 00:03:42,198
ესეიგი გვაქვს 
რომელიც ჰაერში ლივლივებს.

55
00:03:42,198 --> 00:03:47,072
უკანასკნელი ნაბიჯი
ამ კოდის მთელ კოდზე მიბმაა.

56
00:03:47,072 --> 00:03:52,103
კარგი, ახლა რაც HTML-ში
იყო javaScript-შია გადაწერილი,

57
00:03:52,103 --> 00:03:54,666
ამიტომ ამ HTML-ს წაშლა შეგვიძლია.

58
00:03:54,666 --> 00:03:58,764
ისევ, დააპაუზეთ გაკვეთილი
და დააკლიკეთ ვინსტონს,

59
00:03:58,764 --> 00:04:02,412
ნახეთ რა მოხდება.

60
00:04:02,412 --> 00:04:04,933
გამოჩნდა წვერის ფოლიკულა?

61
00:04:04,933 --> 00:04:07,191
რამდენჯერმე დაკლიკება სცადეთ?

62
00:04:07,191 --> 00:04:11,090
თუ სცადეთ, ნახავდით რომ
მეორეჯერ აღარაფერი მოხდებოდა,

63
00:04:11,090 --> 00:04:13,525
ან, გამოჩნდა რომ არაფერი მომხდარა.

64
00:04:13,525 --> 00:04:17,863
ეს იმიტომ, რომ ყოველი  ერთსა და
იმავე "top" და "left" თვისებების მქონეა,

65
00:04:17,863 --> 00:04:21,081
ანუ ყოველი ახალი ძველის ადგილზე თავსდება.

66
00:04:21,081 --> 00:04:25,493
ჩვენ გვინდა რომ  გამოჩნდეს ყველგან,
სადაც მომხმარებლის მაუსი იქნება.

67
00:04:25,493 --> 00:04:30,386
როგორ გავიგოთ თუ სადაა მომხმარებლის მაუსი?

68
00:04:30,386 --> 00:04:34,317
როგორც აღმოჩნდა, ინტერნეტ-browser-ები
მრავალ ინფორმაციას იწერენ,

69
00:04:34,317 --> 00:04:38,082
ნებისმიერ მომხმარებელთან
დაკავშირებულ მოვლენას, ადგილს და ა.შ.

70
00:04:38,082 --> 00:04:41,018
browser გვაძლევს ინფორმაციას ყოველ ჯერზე,

71
00:04:41,018 --> 00:04:43,224
ჩვენი event listener
ფუნქციის გამოძახებისას.

72
00:04:43,224 --> 00:04:46,804
კი მაგრამ სად და როგორ
მივიღოთ ეს საოცარი ინფორმაცია?

73
00:04:46,804 --> 00:04:51,412
ერთ ასოს დავწერ რომ მინიშნება მოგცეთ.

74
00:04:51,412 --> 00:04:56,074
ეს 'e' ნიშნავს event information object-ს.
(მოვლენის ინფორმაციის ობიექტი)

75
00:04:56,074 --> 00:04:59,609
browser ამას ყოველთვის
პირველ არგუმენტად აგზავნის

76
00:04:59,609 --> 00:05:02,129
როცა იძახებს event listener-ის
უკუკავშირის ფუნქციას.

77
00:05:02,129 --> 00:05:06,178
აქამდე არ გვჭირდებოდა, ამიტომ
არგუმენტების სიაც არ ჩამოგვიწერია.

78
00:05:06,178 --> 00:05:09,002
ახლა რადგან გამოყენებას
ვაპირებთ, დავარქვათ სახელი,

79
00:05:09,002 --> 00:05:11,594
რათა უფრო მარტივი
იყოს ფუნქციაში მისი მითითება.

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

81
00:05:14,966 --> 00:05:18,588
არგუმენტებით იქნეს გამოძახებული,
რომც არ ეხებოდეს ის რომელიმე მათგანს.

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

83
00:05:22,701 --> 00:05:28,278
ახლა 'e'-ს log out
გავუკეთოთ: 'console.log(e)'.

84
00:05:28,278 --> 00:05:32,162
დააპაუზეთ გაკვეთილი, დააკლიკეთ
ვინსტონს და შეამოწმეთ თქვენი კონსოლი.

85
00:05:32,162 --> 00:05:34,410
აქ event ობიექტი logged out არის,

86
00:05:34,410 --> 00:05:38,580
შეგიძლიათ იხილოთ მისი ყველა თვისება.

87
00:05:38,580 --> 00:05:43,267
განსაკუთრებით საინტერესოა
ორი event თვისება:

88
00:05:43,267 --> 00:05:45,594
'clientX' და 'clientY'.

89
00:05:45,594 --> 00:05:49,314
ჩაწერა ხდება ნებისმიერი მოვლენის
x და y კოორდინატის, რასაც ჩვენ

90
00:05:49,314 --> 00:05:51,155
წვერის მოთავსებისთვის გამოვიყენებთ.

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

92
00:06:02,015 --> 00:06:10,323
left კოორდინატი
გავუტოლოთ 'e.clientX + "px"'-ს.

93
00:06:10,323 --> 00:06:14,320
დააპაუზეთ და გადაატარეთ მაუსი.

94
00:06:14,320 --> 00:06:17,973
მიახატეთ ვინსტონს წვერი.

95
00:06:17,973 --> 00:06:19,454
მაგარია არა?

96
00:06:19,454 --> 00:06:23,157
ალბათ მრავალი ძალიან საინტერესო
სახატავი პროგრამის მოფიქრება შეიძლება

97
00:06:23,157 --> 00:06:25,559
clientX და clientY-ს გამოყენებით.

98
00:06:25,559 --> 00:06:28,793
როგორც კონსოლში იხილეთ,
კიდევ სხვა მონაცემებიც არის,

99
00:06:28,793 --> 00:06:31,251
რომელიც ეხება event
object-ს და გამოყენებადია.

100
00:06:31,251 --> 00:06:35,354
ალბათ ყველაზე გამოსადეგი მაინც
კლავიშებთან დაკავშირებული თვისებებია,

101
00:06:35,354 --> 00:06:38,107
რომელთა მეშვეობით
ვიგებთ თუ რა ღილაკს დააწვნენ

102
00:06:38,107 --> 00:06:40,541
როცა გარკვეული მოვლენა
მოხდა და ამისი გამოყენებით

103
00:06:40,541 --> 00:06:44,352
შესაძლებელია კლავიშებთან
დაკავშირებული თამაშის აწყობა.

104
00:06:44,352 --> 00:06:47,206
კიდევ ერთი რამ:

105
00:06:47,206 --> 00:06:49,700
აუცილებელი არაა 'e' არგუმენტის გამოძახება.

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

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

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

109
00:07:03,695 --> 00:07:09,485
შემდეგ კი ჩვენც ეს
მითითება უნდა გამოვიყენოთ.

110
00:07:09,485 --> 00:07:13,281
თუ რამე პრობლემა გაქვთ,
გამოიყენეთ console.log,

111
00:07:13,281 --> 00:07:15,639
რომელიც მოგეხმარებათ
პრობლემების მოგვარებაში.

112
00:07:15,639 --> 00:07:21,415
ვებ დეველოპერისთვის კონსოლი
საუკეთესო მეგობარია, გამოიყენეთ!