აქ არის ვებგვერდი
რომელზეც ვინსტონის სურათია.

აცივდა და ვინსტონi ბერდება,

ამიტომ სურს წვერი ჰქონდეს.

შემიძლია წვერი მე თვითონ დავხატო,

მაგრამ უფრო მაგარი იქნება
თუ მომხმარებელს შეეძლება

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

გრძელი წვერი, უბრალოდ
ღინღლი, როგორც თვითონ ურჩევნია

როგორ გავაკეთოთ ეს?

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

ანუ ფუნქცია გამოძახებული იქნება როცა
მაუსი ვინსტონის სახეზე გამოძრავდება.

ვნახოთ როგორ იქნება ეს
იმის მიხედვით რაც უკვე ვიცით.

პირველი ნაბიჯია
ელემენტის ანუ სურათის მოძებნა.

"face", რადგან ასე დავარქვით.

მეორე ნაბიჯია
უკუკავშირის ფუნქციის გაკეთება.

უბრალოთი დავიწყოთ, რათა
დავრწმუნდეთ რომ ნამდვილად იმუშავა,

მოგვიანებით უფრო მეტს გავაკეთებინებთ.

ესეც ასე.

უკანასკნელი ნაბიჯი
ამისი გაერთიანების, არის ის,

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

მაშინ, დავწეროთ
face.addEventListener("mousemove",

შემდეგ კი გადავცეთ
ფუნქციის სახელი, 'onMouseMove'.

ახლა გირჩევთ დააპაუზოთ გაკვეთილი
და მაუსის სახეზე გადატარება სცადოთ.

მიიღეთ შეტყობინება?

იმედია ნახეთ რომ ყველაფერი კარგად მუშაობს.

მაგრამ ეს ის არაა რაც გვინდა
რომ ჩვენმა event listener-მა გააკეთოს.

ჩვენ გვინდა ხატოს და არა ტექსტი წეროს.

როგორ ვხატოთ ვებგვერდზე?

შეგვიძლია -ის tag შემოვიტანოთ
და ზედ პიქსელები დავხატოთ,

როგორც ვაკეთბთ ProcessingjS პროგრამებში.

ამჯერად მხოლოდ წვერს ვხატავთ,
რაც უბრალოდ შავი წერტილებია,

ამიტომ შეგვიძლია უბრალოდ შევქმნათ
 თითოეული წერტილისთვის, და ეს

აბსოლუტური პოზიციონირებით მოვათავსოთ.

ამას წვერის ერთი ფოლიკულით გიჩვენებთ.

შევქმნით -ს 'beard' კლასით
და შემდეგ CSS-ს გამოვიყენებთ,

რათა ამ წვერს ცოტა სტილი შევუცვალოთ.

ახლა ეს გავასწოროთ.

როგორც ხედავთ, წვერი შავი
ფონია, ხუთი ხუთზე პიქსელით,

პიქსელების საზღვრის რადიუსია
ორი, ცოტა მრგვალი ფორმა რომ მიეცეს

რომელიც აბსოლუტურ
პოზიციონირების სქემას იყენებს.

ამჟამად  სურათს ქვეშ ჩანს.

როგორ მოვიქცეთ რომ
პირდაპირ სახეზე გამოჩნდეს?

ჩვენ აბსოლუტურ პოზიციონირებას
ვიყენებთ, მაშინ ეს ნიშნავს იმას,

რომ უნდა გამოვიყენოთ 'top'
და 'left' თვისებები რომ ზუსტად მივუთითოთ,

თუ სად გვინდა მოთავსება.
ახლა ეს აბსოლუტურია.

კარგი, ვთქვათ 'top: 80px;'
და შემდეგ 'left: 15px;'.

მშვენიერია.

რადგან ეს უკვე მუშაობს HTML-ში,
ახლა JavaScript-ში ავამუშაოთ,

რათა მომხმარებელმა დინამიურიად შექმნას ეს
 ყოველ ჯერზე როცა მაუსს გაამოძრავებს.

დავუბრუნდეთ ჩვენი
javaScript-ის უკუკავშირის ფუნქციას.

პირველ რიგში ვქმნით -ს,

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

აქ იქნება .

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

ესეიგი გვაქვს 
რომელიც ჰაერში ლივლივებს.

უკანასკნელი ნაბიჯი
ამ კოდის მთელ კოდზე მიბმაა.

კარგი, ახლა რაც HTML-ში
იყო javaScript-შია გადაწერილი,

ამიტომ ამ HTML-ს წაშლა შეგვიძლია.

ისევ, დააპაუზეთ გაკვეთილი
და დააკლიკეთ ვინსტონს,

ნახეთ რა მოხდება.

გამოჩნდა წვერის ფოლიკულა?

რამდენჯერმე დაკლიკება სცადეთ?

თუ სცადეთ, ნახავდით რომ
მეორეჯერ აღარაფერი მოხდებოდა,

ან, გამოჩნდა რომ არაფერი მომხდარა.

ეს იმიტომ, რომ ყოველი  ერთსა და
იმავე "top" და "left" თვისებების მქონეა,

ანუ ყოველი ახალი ძველის ადგილზე თავსდება.

ჩვენ გვინდა რომ  გამოჩნდეს ყველგან,
სადაც მომხმარებლის მაუსი იქნება.

როგორ გავიგოთ თუ სადაა მომხმარებლის მაუსი?

როგორც აღმოჩნდა, ინტერნეტ-browser-ები
მრავალ ინფორმაციას იწერენ,

ნებისმიერ მომხმარებელთან
დაკავშირებულ მოვლენას, ადგილს და ა.შ.

browser გვაძლევს ინფორმაციას ყოველ ჯერზე,

ჩვენი event listener
ფუნქციის გამოძახებისას.

კი მაგრამ სად და როგორ
მივიღოთ ეს საოცარი ინფორმაცია?

ერთ ასოს დავწერ რომ მინიშნება მოგცეთ.

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

browser ამას ყოველთვის
პირველ არგუმენტად აგზავნის

როცა იძახებს event listener-ის
უკუკავშირის ფუნქციას.

აქამდე არ გვჭირდებოდა, ამიტომ
არგუმენტების სიაც არ ჩამოგვიწერია.

ახლა რადგან გამოყენებას
ვაპირებთ, დავარქვათ სახელი,

რათა უფრო მარტივი
იყოს ფუნქციაში მისი მითითება.

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

არგუმენტებით იქნეს გამოძახებული,
რომც არ ეხებოდეს ის რომელიმე მათგანს.

ესეიგი, ამ ინფორმაციას ჩვენ ყოველთვის
ვიღებდით, უბრალოდ აქამდე არ ვიცოდით.

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

დააპაუზეთ გაკვეთილი, დააკლიკეთ
ვინსტონს და შეამოწმეთ თქვენი კონსოლი.

აქ event ობიექტი logged out არის,

შეგიძლიათ იხილოთ მისი ყველა თვისება.

განსაკუთრებით საინტერესოა
ორი event თვისება:

'clientX' და 'clientY'.

ჩაწერა ხდება ნებისმიერი მოვლენის
x და y კოორდინატის, რასაც ჩვენ

წვერის მოთავსებისთვის გამოვიყენებთ.

წვერის top კოორდინატი
გავუტოლოთ 'e.clientY + "px"'-ს,

left კოორდინატი
გავუტოლოთ 'e.clientX + "px"'-ს.

დააპაუზეთ და გადაატარეთ მაუსი.

მიახატეთ ვინსტონს წვერი.

მაგარია არა?

ალბათ მრავალი ძალიან საინტერესო
სახატავი პროგრამის მოფიქრება შეიძლება

clientX და clientY-ს გამოყენებით.

როგორც კონსოლში იხილეთ,
კიდევ სხვა მონაცემებიც არის,

რომელიც ეხება event
object-ს და გამოყენებადია.

ალბათ ყველაზე გამოსადეგი მაინც
კლავიშებთან დაკავშირებული თვისებებია,

რომელთა მეშვეობით
ვიგებთ თუ რა ღილაკს დააწვნენ

როცა გარკვეული მოვლენა
მოხდა და ამისი გამოყენებით

შესაძლებელია კლავიშებთან
დაკავშირებული თამაშის აწყობა.

კიდევ ერთი რამ:

აუცილებელი არაა 'e' არგუმენტის გამოძახება.

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

მნიშვნელობა არ აქვს რას ვუწოდებთ,
მთავარია ის მიუთითებდეს

პირველ არგუმენტზე, რომელიც
browser-იდან ფუნქციას გადაეცემა,

შემდეგ კი ჩვენც ეს
მითითება უნდა გამოვიყენოთ.

თუ რამე პრობლემა გაქვთ,
გამოიყენეთ console.log,

რომელიც მოგეხმარებათ
პრობლემების მოგვარებაში.

ვებ დეველოპერისთვის კონსოლი
საუკეთესო მეგობარია, გამოიყენეთ!