[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.56,0:00:03.45,Default,,0000,0000,0000,,აქ არის ვებგვერდი\Nრომელზეც ვინსტონის სურათია.
Dialogue: 0,0:00:03.45,0:00:06.56,Default,,0000,0000,0000,,აცივდა და ვინსტონi ბერდება,
Dialogue: 0,0:00:06.56,0:00:08.65,Default,,0000,0000,0000,,ამიტომ სურს წვერი ჰქონდეს.
Dialogue: 0,0:00:08.65,0:00:10.75,Default,,0000,0000,0000,,შემიძლია წვერი მე თვითონ დავხატო,
Dialogue: 0,0:00:10.75,0:00:13.52,Default,,0000,0000,0000,,მაგრამ უფრო მაგარი იქნება\Nთუ მომხმარებელს შეეძლება
Dialogue: 0,0:00:13.52,0:00:16.41,Default,,0000,0000,0000,,ვინსტონის სახეზე წვერის დახატვა,\Nროგორც თვითონ მოესურვება --
Dialogue: 0,0:00:16.41,0:00:20.38,Default,,0000,0000,0000,,გრძელი წვერი, უბრალოდ\Nღინღლი, როგორც თვითონ ურჩევნია
Dialogue: 0,0:00:20.38,0:00:22.71,Default,,0000,0000,0000,,როგორ გავაკეთოთ ეს?
Dialogue: 0,0:00:22.71,0:00:28.69,Default,,0000,0000,0000,,ამისი ერთი გზაა event listener-ის დამატება\Nსურათზე "mouseMove" event-ისთვის,
Dialogue: 0,0:00:28.69,0:00:34.39,Default,,0000,0000,0000,,ანუ ფუნქცია გამოძახებული იქნება როცა\Nმაუსი ვინსტონის სახეზე გამოძრავდება.
Dialogue: 0,0:00:34.39,0:00:37.61,Default,,0000,0000,0000,,ვნახოთ როგორ იქნება ეს\Nიმის მიხედვით რაც უკვე ვიცით.
Dialogue: 0,0:00:37.61,0:00:47.01,Default,,0000,0000,0000,,პირველი ნაბიჯია\Nელემენტის ანუ სურათის მოძებნა.
Dialogue: 0,0:00:47.01,0:00:50.28,Default,,0000,0000,0000,,"face", რადგან ასე დავარქვით.
Dialogue: 0,0:00:50.28,0:00:53.87,Default,,0000,0000,0000,,მეორე ნაბიჯია\Nუკუკავშირის ფუნქციის გაკეთება.
Dialogue: 0,0:00:53.87,0:00:58.27,Default,,0000,0000,0000,,უბრალოთი დავიწყოთ, რათა\Nდავრწმუნდეთ რომ ნამდვილად იმუშავა,
Dialogue: 0,0:00:58.27,0:01:11.72,Default,,0000,0000,0000,,მოგვიანებით უფრო მეტს გავაკეთებინებთ.
Dialogue: 0,0:01:11.72,0:01:13.18,Default,,0000,0000,0000,,ესეც ასე.
Dialogue: 0,0:01:13.18,0:01:17.95,Default,,0000,0000,0000,,უკანასკნელი ნაბიჯი\Nამისი გაერთიანების, არის ის,
Dialogue: 0,0:01:17.95,0:01:21.94,Default,,0000,0000,0000,,რომ ფუნქცია მაშინ უნდა იქნეს გამოძახებული,\Nროცა ეს "mouseMoved" event-ს მიიღებს.
Dialogue: 0,0:01:21.94,0:01:27.85,Default,,0000,0000,0000,,მაშინ, დავწეროთ\Nface.addEventListener("mousemove",
Dialogue: 0,0:01:27.85,0:01:32.07,Default,,0000,0000,0000,,შემდეგ კი გადავცეთ\Nფუნქციის სახელი, 'onMouseMove'.
Dialogue: 0,0:01:32.07,0:01:36.59,Default,,0000,0000,0000,,ახლა გირჩევთ დააპაუზოთ გაკვეთილი\Nდა მაუსის სახეზე გადატარება სცადოთ.
Dialogue: 0,0:01:36.59,0:01:39.88,Default,,0000,0000,0000,,მიიღეთ შეტყობინება?
Dialogue: 0,0:01:39.88,0:01:43.86,Default,,0000,0000,0000,,იმედია ნახეთ რომ ყველაფერი კარგად მუშაობს.
Dialogue: 0,0:01:43.86,0:01:47.34,Default,,0000,0000,0000,,მაგრამ ეს ის არაა რაც გვინდა\Nრომ ჩვენმა event listener-მა გააკეთოს.
Dialogue: 0,0:01:47.34,0:01:50.45,Default,,0000,0000,0000,,ჩვენ გვინდა ხატოს და არა ტექსტი წეროს.
Dialogue: 0,0:01:50.45,0:01:53.36,Default,,0000,0000,0000,,როგორ ვხატოთ ვებგვერდზე?
Dialogue: 0,0:01:53.36,0:01:58.60,Default,,0000,0000,0000,,შეგვიძლია -ის tag შემოვიტანოთ\Nდა ზედ პიქსელები დავხატოთ,
Dialogue: 0,0:01:58.60,0:02:00.73,Default,,0000,0000,0000,,როგორც ვაკეთბთ ProcessingjS პროგრამებში.
Dialogue: 0,0:02:00.73,0:02:06.50,Default,,0000,0000,0000,,ამჯერად მხოლოდ წვერს ვხატავთ,\Nრაც უბრალოდ შავი წერტილებია,
Dialogue: 0,0:02:06.50,0:02:11.57,Default,,0000,0000,0000,,ამიტომ შეგვიძლია უბრალოდ შევქმნათ\N თითოეული წერტილისთვის, და ეს 
Dialogue: 0,0:02:11.57,0:02:13.55,Default,,0000,0000,0000,,აბსოლუტური პოზიციონირებით მოვათავსოთ.
Dialogue: 0,0:02:13.55,0:02:18.31,Default,,0000,0000,0000,,ამას წვერის ერთი ფოლიკულით გიჩვენებთ.
Dialogue: 0,0:02:18.31,0:02:24.52,Default,,0000,0000,0000,,შევქმნით -ს 'beard' კლასით\Nდა შემდეგ CSS-ს გამოვიყენებთ,
Dialogue: 0,0:02:24.52,0:02:29.74,Default,,0000,0000,0000,,რათა ამ წვერს ცოტა სტილი შევუცვალოთ.
Dialogue: 0,0:02:29.74,0:02:31.75,Default,,0000,0000,0000,,ახლა ეს გავასწოროთ.
Dialogue: 0,0:02:31.75,0:02:36.47,Default,,0000,0000,0000,,როგორც ხედავთ, წვერი შავი\Nფონია, ხუთი ხუთზე პიქსელით,
Dialogue: 0,0:02:36.47,0:02:40.52,Default,,0000,0000,0000,,პიქსელების საზღვრის რადიუსია\Nორი, ცოტა მრგვალი ფორმა რომ მიეცეს
Dialogue: 0,0:02:40.52,0:02:44.68,Default,,0000,0000,0000,,რომელიც აბსოლუტურ\Nპოზიციონირების სქემას იყენებს.
Dialogue: 0,0:02:44.68,0:02:48.49,Default,,0000,0000,0000,,ამჟამად  სურათს ქვეშ ჩანს.
Dialogue: 0,0:02:48.49,0:02:51.47,Default,,0000,0000,0000,,როგორ მოვიქცეთ რომ\Nპირდაპირ სახეზე გამოჩნდეს?
Dialogue: 0,0:02:51.47,0:02:55.27,Default,,0000,0000,0000,,ჩვენ აბსოლუტურ პოზიციონირებას\Nვიყენებთ, მაშინ ეს ნიშნავს იმას,
Dialogue: 0,0:02:55.27,0:02:59.83,Default,,0000,0000,0000,,რომ უნდა გამოვიყენოთ 'top'\Nდა 'left' თვისებები რომ ზუსტად მივუთითოთ,
Dialogue: 0,0:02:59.83,0:03:02.07,Default,,0000,0000,0000,,თუ სად გვინდა მოთავსება.\Nახლა ეს აბსოლუტურია.
Dialogue: 0,0:03:02.07,0:03:07.92,Default,,0000,0000,0000,,კარგი, ვთქვათ 'top: 80px;'\Nდა შემდეგ 'left: 15px;'.
Dialogue: 0,0:03:07.92,0:03:09.42,Default,,0000,0000,0000,,მშვენიერია.
Dialogue: 0,0:03:09.42,0:03:13.75,Default,,0000,0000,0000,,რადგან ეს უკვე მუშაობს HTML-ში,\Nახლა JavaScript-ში ავამუშაოთ,
Dialogue: 0,0:03:13.75,0:03:18.86,Default,,0000,0000,0000,,რათა მომხმარებელმა დინამიურიად შექმნას ეს\N ყოველ ჯერზე როცა მაუსს გაამოძრავებს.
Dialogue: 0,0:03:18.86,0:03:22.78,Default,,0000,0000,0000,,დავუბრუნდეთ ჩვენი\NjavaScript-ის უკუკავშირის ფუნქციას.
Dialogue: 0,0:03:22.78,0:03:25.53,Default,,0000,0000,0000,,პირველ რიგში ვქმნით -ს,
Dialogue: 0,0:03:25.53,0:03:31.41,Default,,0000,0000,0000,,რომელიც შეგვიძლია შევქმნათ ამით:\N`document.createElement()` function--
Dialogue: 0,0:03:31.41,0:03:33.59,Default,,0000,0000,0000,,აქ იქნება .
Dialogue: 0,0:03:33.59,0:03:39.58,Default,,0000,0000,0000,,მეორე, რაც უნდა გავაკეთოთ, არის კლასის\Nდამატება: beard.className = "beard";.
Dialogue: 0,0:03:39.58,0:03:42.20,Default,,0000,0000,0000,,ესეიგი გვაქვს \Nრომელიც ჰაერში ლივლივებს.
Dialogue: 0,0:03:42.20,0:03:47.07,Default,,0000,0000,0000,,უკანასკნელი ნაბიჯი\Nამ კოდის მთელ კოდზე მიბმაა.
Dialogue: 0,0:03:47.07,0:03:52.10,Default,,0000,0000,0000,,კარგი, ახლა რაც HTML-ში\Nიყო javaScript-შია გადაწერილი,
Dialogue: 0,0:03:52.10,0:03:54.67,Default,,0000,0000,0000,,ამიტომ ამ HTML-ს წაშლა შეგვიძლია.
Dialogue: 0,0:03:54.67,0:03:58.76,Default,,0000,0000,0000,,ისევ, დააპაუზეთ გაკვეთილი\Nდა დააკლიკეთ ვინსტონს,
Dialogue: 0,0:03:58.76,0:04:02.41,Default,,0000,0000,0000,,ნახეთ რა მოხდება.
Dialogue: 0,0:04:02.41,0:04:04.93,Default,,0000,0000,0000,,გამოჩნდა წვერის ფოლიკულა?
Dialogue: 0,0:04:04.93,0:04:07.19,Default,,0000,0000,0000,,რამდენჯერმე დაკლიკება სცადეთ?
Dialogue: 0,0:04:07.19,0:04:11.09,Default,,0000,0000,0000,,თუ სცადეთ, ნახავდით რომ\Nმეორეჯერ აღარაფერი მოხდებოდა,
Dialogue: 0,0:04:11.09,0:04:13.52,Default,,0000,0000,0000,,ან, გამოჩნდა რომ არაფერი მომხდარა.
Dialogue: 0,0:04:13.52,0:04:17.86,Default,,0000,0000,0000,,ეს იმიტომ, რომ ყოველი  ერთსა და\Nიმავე "top" და "left" თვისებების მქონეა,
Dialogue: 0,0:04:17.86,0:04:21.08,Default,,0000,0000,0000,,ანუ ყოველი ახალი ძველის ადგილზე თავსდება.
Dialogue: 0,0:04:21.08,0:04:25.49,Default,,0000,0000,0000,,ჩვენ გვინდა რომ  გამოჩნდეს ყველგან,\Nსადაც მომხმარებლის მაუსი იქნება.
Dialogue: 0,0:04:25.49,0:04:30.39,Default,,0000,0000,0000,,როგორ გავიგოთ თუ სადაა მომხმარებლის მაუსი?
Dialogue: 0,0:04:30.39,0:04:34.32,Default,,0000,0000,0000,,როგორც აღმოჩნდა, ინტერნეტ-browser-ები\Nმრავალ ინფორმაციას იწერენ,
Dialogue: 0,0:04:34.32,0:04:38.08,Default,,0000,0000,0000,,ნებისმიერ მომხმარებელთან\Nდაკავშირებულ მოვლენას, ადგილს და ა.შ.
Dialogue: 0,0:04:38.08,0:04:41.02,Default,,0000,0000,0000,,browser გვაძლევს ინფორმაციას ყოველ ჯერზე,
Dialogue: 0,0:04:41.02,0:04:43.22,Default,,0000,0000,0000,,ჩვენი event listener\Nფუნქციის გამოძახებისას.
Dialogue: 0,0:04:43.22,0:04:46.80,Default,,0000,0000,0000,,კი მაგრამ სად და როგორ\Nმივიღოთ ეს საოცარი ინფორმაცია?
Dialogue: 0,0:04:46.80,0:04:51.41,Default,,0000,0000,0000,,ერთ ასოს დავწერ რომ მინიშნება მოგცეთ.
Dialogue: 0,0:04:51.41,0:04:56.07,Default,,0000,0000,0000,,ეს 'e' ნიშნავს event information object-ს.\N(მოვლენის ინფორმაციის ობიექტი)
Dialogue: 0,0:04:56.07,0:04:59.61,Default,,0000,0000,0000,,browser ამას ყოველთვის\Nპირველ არგუმენტად აგზავნის
Dialogue: 0,0:04:59.61,0:05:02.13,Default,,0000,0000,0000,,როცა იძახებს event listener-ის\Nუკუკავშირის ფუნქციას.
Dialogue: 0,0:05:02.13,0:05:06.18,Default,,0000,0000,0000,,აქამდე არ გვჭირდებოდა, ამიტომ\Nარგუმენტების სიაც არ ჩამოგვიწერია.
Dialogue: 0,0:05:06.18,0:05:09.00,Default,,0000,0000,0000,,ახლა რადგან გამოყენებას\Nვაპირებთ, დავარქვათ სახელი,
Dialogue: 0,0:05:09.00,0:05:11.59,Default,,0000,0000,0000,,რათა უფრო მარტივი\Nიყოს ფუნქციაში მისი მითითება.
Dialogue: 0,0:05:11.59,0:05:14.97,Default,,0000,0000,0000,,გახსოვდეთ, რომ javaScript-ში\Nფუქნქცია შეიძლება ნებისმიერი რაოდენობის
Dialogue: 0,0:05:14.97,0:05:18.59,Default,,0000,0000,0000,,არგუმენტებით იქნეს გამოძახებული,\Nრომც არ ეხებოდეს ის რომელიმე მათგანს.
Dialogue: 0,0:05:18.59,0:05:22.70,Default,,0000,0000,0000,,ესეიგი, ამ ინფორმაციას ჩვენ ყოველთვის\Nვიღებდით, უბრალოდ აქამდე არ ვიცოდით.
Dialogue: 0,0:05:22.70,0:05:28.28,Default,,0000,0000,0000,,ახლა 'e'-ს log out\Nგავუკეთოთ: 'console.log(e)'.
Dialogue: 0,0:05:28.28,0:05:32.16,Default,,0000,0000,0000,,დააპაუზეთ გაკვეთილი, დააკლიკეთ\Nვინსტონს და შეამოწმეთ თქვენი კონსოლი.
Dialogue: 0,0:05:32.16,0:05:34.41,Default,,0000,0000,0000,,აქ event ობიექტი logged out არის,
Dialogue: 0,0:05:34.41,0:05:38.58,Default,,0000,0000,0000,,შეგიძლიათ იხილოთ მისი ყველა თვისება.
Dialogue: 0,0:05:38.58,0:05:43.27,Default,,0000,0000,0000,,განსაკუთრებით საინტერესოა\Nორი event თვისება:
Dialogue: 0,0:05:43.27,0:05:45.59,Default,,0000,0000,0000,,'clientX' და 'clientY'.
Dialogue: 0,0:05:45.59,0:05:49.31,Default,,0000,0000,0000,,ჩაწერა ხდება ნებისმიერი მოვლენის\Nx და y კოორდინატის, რასაც ჩვენ
Dialogue: 0,0:05:49.31,0:05:51.16,Default,,0000,0000,0000,,წვერის მოთავსებისთვის გამოვიყენებთ.
Dialogue: 0,0:05:51.16,0:06:02.02,Default,,0000,0000,0000,,წვერის top კოორდინატი\Nგავუტოლოთ 'e.clientY + "px"'-ს,
Dialogue: 0,0:06:02.02,0:06:10.32,Default,,0000,0000,0000,,left კოორდინატი\Nგავუტოლოთ 'e.clientX + "px"'-ს.
Dialogue: 0,0:06:10.32,0:06:14.32,Default,,0000,0000,0000,,დააპაუზეთ და გადაატარეთ მაუსი.
Dialogue: 0,0:06:14.32,0:06:17.97,Default,,0000,0000,0000,,მიახატეთ ვინსტონს წვერი.
Dialogue: 0,0:06:17.97,0:06:19.45,Default,,0000,0000,0000,,მაგარია არა?
Dialogue: 0,0:06:19.45,0:06:23.16,Default,,0000,0000,0000,,ალბათ მრავალი ძალიან საინტერესო\Nსახატავი პროგრამის მოფიქრება შეიძლება
Dialogue: 0,0:06:23.16,0:06:25.56,Default,,0000,0000,0000,,clientX და clientY-ს გამოყენებით.
Dialogue: 0,0:06:25.56,0:06:28.79,Default,,0000,0000,0000,,როგორც კონსოლში იხილეთ,\Nკიდევ სხვა მონაცემებიც არის,
Dialogue: 0,0:06:28.79,0:06:31.25,Default,,0000,0000,0000,,რომელიც ეხება event\Nobject-ს და გამოყენებადია.
Dialogue: 0,0:06:31.25,0:06:35.35,Default,,0000,0000,0000,,ალბათ ყველაზე გამოსადეგი მაინც\Nკლავიშებთან დაკავშირებული თვისებებია,
Dialogue: 0,0:06:35.35,0:06:38.11,Default,,0000,0000,0000,,რომელთა მეშვეობით\Nვიგებთ თუ რა ღილაკს დააწვნენ
Dialogue: 0,0:06:38.11,0:06:40.54,Default,,0000,0000,0000,,როცა გარკვეული მოვლენა\Nმოხდა და ამისი გამოყენებით
Dialogue: 0,0:06:40.54,0:06:44.35,Default,,0000,0000,0000,,შესაძლებელია კლავიშებთან\Nდაკავშირებული თამაშის აწყობა.
Dialogue: 0,0:06:44.35,0:06:47.21,Default,,0000,0000,0000,,კიდევ ერთი რამ:
Dialogue: 0,0:06:47.21,0:06:49.70,Default,,0000,0000,0000,,აუცილებელი არაა 'e' არგუმენტის გამოძახება.
Dialogue: 0,0:06:49.70,0:06:57.31,Default,,0000,0000,0000,,ეს ტიპიურია, მაგრამ ზოგიერთი დეველოპერი\Nმას 'evt'-ს ან 'event-ს უწოდებენ.
Dialogue: 0,0:06:57.31,0:07:00.60,Default,,0000,0000,0000,,მნიშვნელობა არ აქვს რას ვუწოდებთ,\Nმთავარია ის მიუთითებდეს
Dialogue: 0,0:07:00.60,0:07:03.70,Default,,0000,0000,0000,,პირველ არგუმენტზე, რომელიც\Nbrowser-იდან ფუნქციას გადაეცემა,
Dialogue: 0,0:07:03.70,0:07:09.48,Default,,0000,0000,0000,,შემდეგ კი ჩვენც ეს\Nმითითება უნდა გამოვიყენოთ.
Dialogue: 0,0:07:09.48,0:07:13.28,Default,,0000,0000,0000,,თუ რამე პრობლემა გაქვთ,\Nგამოიყენეთ console.log,
Dialogue: 0,0:07:13.28,0:07:15.64,Default,,0000,0000,0000,,რომელიც მოგეხმარებათ\Nპრობლემების მოგვარებაში.
Dialogue: 0,0:07:15.64,0:07:21.42,Default,,0000,0000,0000,,ვებ დეველოპერისთვის კონსოლი\Nსაუკეთესო მეგობარია, გამოიყენეთ!