WEBVTT

00:00:00.552 --> 00:00:05.452
ფორმა არის ვებ-გვერდის ინსტრუმენტი,
რომლითაც იგი უგზავნის ინფორმაციას სერვერს.

00:00:05.452 --> 00:00:08.843
ხანის აკადემიაზე უსაფრთხოების მიზეზით


00:00:08.843 --> 00:00:11.442
გვერდებს არ ვაძლევთ სერვერებთან 
დაკავშირების უფლებას.

00:00:11.442 --> 00:00:13.648
ამიტომ, აქ არ ვასწავლით ფორმებს.

00:00:13.648 --> 00:00:16.997
მაგრამ ახლა, რადგანაც JavaScript-ს სწავლობ
გვერდების სამართავად

00:00:16.997 --> 00:00:20.550
შემიძლია გაჩვენო, როგორ გამოიყენო JavaScript 
ფორმის ელემენტების დასამუშავებლად

00:00:20.550 --> 00:00:23.074
იმის მაგივრად, რომ გაუგზავნო ისინი სერვერს.

00:00:23.074 --> 00:00:28.096
აქ ჩავსვი რამდენიმე ფორმა, მაგალითად 
მომხმარებლის სახელისა

00:00:28.096 --> 00:00:30.045
და ენის გასაგებად.

00:00:30.045 --> 00:00:34.027
მინდა, რომ გვერდი მომხმარებელს მის
მშობლიურ ენაზე მიესალმოს,

00:00:34.027 --> 00:00:36.666
როცა ისინი ამ ღილაკს დააჭერენ.

00:00:36.666 --> 00:00:41.457
პირველ რიგში, ღილაკის ელემენტი
უნდა შევინახოთ ცვლადში.

00:00:41.457 --> 00:00:49.307
მაგალითად: 
`document.getElementById("button")`.

00:00:49.307 --> 00:00:53.192
შემდეგ უნდა განვსაზღვროთ ფუნქციის 
event listener.

00:00:53.192 --> 00:00:57.885
`var onButtonClick = function() {`

00:00:57.885 --> 00:01:03.770
და შემდეგ აქ უნდა მივამაგრებინოთ შეტყობინება

00:01:03.770 --> 00:01:08.729
`document.getElementById("message")`,

00:01:08.729 --> 00:01:10.709
გვექნება პატარა საყვარელი შეტყობინება
`div`.

00:01:10.709 --> 00:01:20.707
შემდეგ კი უბრალოდ `textContent +=
"აქ დაკლიკეთ? დიდი მადლობა!"`

00:01:20.707 --> 00:01:23.161
აი, ასე.

00:01:23.161 --> 00:01:28.796
დაბოლოს, მესამე ნაბიჯი, ღილაკს უნდა
დავურთოთ event listener

00:01:28.796 --> 00:01:31.711
რომელიც გამოიძახებს ფუნქციას, როცა 
ღილაკს დააჭერენ.

00:01:31.711 --> 00:01:36.491
დავურთოთ: `("click", onButtonClick)`.

00:01:36.491 --> 00:01:42.959
ახლა დააპაუზე ტუტორილი და შეამოწმე,
ხომ ისე მუშაობს ყველაფერი, როგორც მოელოდი.

00:01:42.959 --> 00:01:47.971
ახლა კი ისე გავაკეთოთ, რომ მართლა
ფორმის შიგთავსზე დაყრდნობით თქვას რამე.

00:01:47.971 --> 00:01:52.850
როგორ გამოვიყენოთ მომხმარებლის მიერ
შეყვანილი ინფორმაცია?

00:01:52.850 --> 00:01:55.834
შევქმნათ ამისთვის ცვლადი.

00:01:55.834 --> 00:02:04.770
`var name = document.getElementById`,

00:02:04.770 --> 00:02:07.337
რადგანაც მას აქვს ID

00:02:07.337 --> 00:02:11.322
მას მივიღებთ აქ.

00:02:11.322 --> 00:02:17.115
გავაკეთოთ ახალი ხაზი მისალმებისთვის,
და დავუკავშიროთ მას შევყანილი სახელი

00:02:17.115 --> 00:02:22.720
გამოვა `var greeting = "Heyaz"`,
ეს ჩემი საყვარელი მისალმებაა,

00:02:22.720 --> 00:02:24.203
` + name`.

00:02:24.203 --> 00:02:30.351
ახლა გვაქვს ხაზი და კიდევ რაღაც, რაც
ინახება ამ ცვლადში.

00:02:30.351 --> 00:02:38.772
ახლა კი, ეს ტექსტი
ნამდვილი მისალმება უნდა იყოს.

00:02:38.772 --> 00:02:41.688
აბა, ვნახოთ, ხომ ყველაფერი სწორად გვაქვს

00:02:41.688 --> 00:02:44.899
ვიპოვეთ, სად შეყვათ სახელი,
შევქმენით მისალმების ხაზი

00:02:44.899 --> 00:02:47.732
და დავუკავშირეთ ის ცვლადს.

00:02:47.732 --> 00:02:53.032
დააპაუზე ტუტორიალი და ნახე,
თუ მუშაობს ყველაფერი.

00:02:53.032 --> 00:02:55.632
არც ისე, ჰო?

00:02:55.632 --> 00:03:01.877
ხედავ შეტყობინებას "Heyaz [object Object]", ან
"Heyaz object Element"?

00:03:01.877 --> 00:03:04.761
თუ დავუშვებთ, რომ შენი სახელი არ არის Object

00:03:04.761 --> 00:03:08.073
იმ შეთხვევაშიც კი, თუ არის
(რაც მშვენიერია)

00:03:08.073 --> 00:03:10.508
აქ რაღაც შეცდომაა.

00:03:10.508 --> 00:03:13.704
უნდა დაგვენახა ის, რაც აქ ჩაწერე,

00:03:13.704 --> 00:03:16.482
მაგრამ სინამდვილეში მივიღეთ "object".

00:03:16.482 --> 00:03:20.682
ეს იმას ნიშნავს, რომ ცვლადი "name"
მიუთითებს ობიექტზე,

00:03:20.682 --> 00:03:23.581
და არა ხაზზე, რომელზეც გვეგონა, რომ 
მიუთითებდა.

00:03:23.581 --> 00:03:26.647
შეიძლება, უკვე მიხვდი, როგორ
გამოასწორო პრობლემა.

00:03:26.647 --> 00:03:31.885
ცვლადში "name" ჩვენ შევინახეთ 
მთელი ელემენტი-ობიექტი

00:03:31.885 --> 00:03:34.987
ელემენტი-ობიექტი კი ძალიან დიდი ობიექტია

00:03:34.987 --> 00:03:37.095
უამრავი ინფორმაციით ელემენტის შესახებ:

00:03:37.095 --> 00:03:39.532
ყველა მისი ატრიბუტითა და მეთოდით.

00:03:39.532 --> 00:03:43.472
იმისთვის, რომ გავიგოთ, რა ჩაწერა მომხმარებელმა,
ელემენტის კონკრეტულ თვისებაზე

00:03:43.472 --> 00:03:46.211
უნდა გვქონდეს წვდომა: მნიშვნელობაზე.

00:03:46.211 --> 00:03:51.918
უბრალოდ უნდა დავუმათოთ `.value`
და ეს გვიშველის.

00:03:51.918 --> 00:03:56.177
დააპაუზე ტუტორიალი და სცადე კიდევ ერთხელ

00:03:56.177 --> 00:03:57.984
ახლა გამოვიდა, ჰო ასეა?

00:03:57.984 --> 00:04:01.913
ეს შეცდომა ძალიან გავრცელებულია, ამიტომ
ყურადღებით იყავი

00:04:01.913 --> 00:04:05.007
კიდევ ერთ გავრცელებულ შეცდომას გაჩვენებ

00:04:05.007 --> 00:04:13.960
ავიღოთ ეს ხაზი და გავიტანოთ იგი
ფუნქციის გარეთ.

00:04:13.960 --> 00:04:22.740
დააპაუზე ტუტორიალი, ჩაწერე რამე და
დააჭირე ღილაკს.

00:04:22.740 --> 00:04:25.997
თუ ყველაფერი ისე გაფუჭდა, 
როგორც უნდა გაფუჭებულიყო,

00:04:25.997 --> 00:04:28.050
მაშინ შენი სახლის მაგივრად ცარიელი
ხაზი უნდა დაგენახა.

00:04:28.050 --> 00:04:29.693
ხვდები, რატომ?

00:04:29.693 --> 00:04:33.937
დაფიქრდი იმაზე, როგორ მუშავდება კოდის
თითოეული ხაზი.

00:04:33.937 --> 00:04:37.098
ამ კოდში ბრაუზერი ტვირთავს გვერდს

00:04:37.098 --> 00:04:39.770
და ასრულებს JavaScript-ის ხაზებს
ერთი მეორეს თანმიმდევრობით.

00:04:39.770 --> 00:04:42.928
პირველ რიგში, იგი ინახავს ცვლადში 
ღილაკის ელემენტს.

00:04:42.928 --> 00:04:46.817
შემდეგ ინახავს ცვლადში შეყვანილი
ელემენტის მნიშვნელობას.

00:04:46.817 --> 00:04:50.460
მაგრამ ის ინახავს მნიშნველობას,
როცა გვერდი იტვირთება..

00:04:50.460 --> 00:04:52.465
მნიშვნელობა კი ამ დროს ცარიელია.

00:04:52.465 --> 00:04:56.320
შემდეგ იგი განსაზღვრავს ფუნქციას და 
ანიჭებს მას event listener-ს

00:04:56.320 --> 00:05:00.421
მისი გამოძახების შემდეგ,
სახელი ისევ იგივე ხაზია,

00:05:00.421 --> 00:05:02.877
რაც გვერდის ჩატვირთვისას იყო.

00:05:02.877 --> 00:05:06.201
ამიტომ listener ვერასდროს ვერ გაიგებს,
რა ჩაწერა მომხმარებელმა ბოლოს.

00:05:06.201 --> 00:05:08.529
ამიტომ, კოდის ეს ხაზი

00:05:08.529 --> 00:05:13.190
უნდა იყოს event listener-ის 
ფუნქციის შიგნით,

00:05:13.190 --> 00:05:18.757
იმისთვის რომ მნიშვნელობა დაფიქსირდეს მაშინ,
როცა ეს მოვლენა განხორციელდება.

00:05:18.757 --> 00:05:21.938
ახლა ვნახოთ ენის მნიშვნელობა,


00:05:21.938 --> 00:05:24.414
უნდა დავწრმუნდეთ, რომ ყველაფერი
კარგად გაიგე.

00:05:24.414 --> 00:05:29.599
ენას 'lang' ცვლადში შევინახავ, მოვლენის კონტროლში.

00:05:31.769 --> 00:05:34.546
რა საშინლად გამოიყურება ვიზუალურად,

00:05:34.546 --> 00:05:36.891
მოვაწესრიგოდ ყველაფერი

00:05:36.891 --> 00:05:38.842
აი, ასე.

00:05:38.842 --> 00:05:41.453
[ბეჭდავს]

00:05:46.773 --> 00:05:51.234
ალბათ, ამჩნევ, რომ ჩემს ცვლადებს იგივეს
ვარქმევ, რაც ჩემს ID-ებს

00:05:51.234 --> 00:05:55.291
მაგრამ ეს მე ვაკეთებ ასე, შენ შეგიძლია
სხვა სახელები დაარქვა.

00:05:55.291 --> 00:05:59.787
მინდა, რომ სხვადასხვა შეტყობინება დაინახონ,
იმაზე დაყრდნობით, თუ რომელი ენა აირჩიეს.

00:05:59.787 --> 00:06:03.627
მიაქციე ყურადღება, რომ მნიშვნელობა არ
არის იგივე, რაც მენიუში ჩანს

00:06:03.627 --> 00:06:06.880
მნიშვნელობა HMTL ატრიბუტია,

00:06:06.880 --> 00:06:11.250
'lang' უნდა იყოს
"en", "es", ან "plt"

00:06:11.250 --> 00:06:17.212
რაც ნიშნავს
`if (lang === "es")`,

00:06:17.212 --> 00:06:23.684
მისალმება იქნება "Hola"

00:06:23.684 --> 00:06:26.809
გავაგრძელოთ და ჩავსვათ ეს მისალმების
ცვლადი აქ.

00:06:26.809 --> 00:06:35.105
ანუ 'greeting' იქნება "Hola" + სახელი

00:06:35.105 --> 00:06:41.218
და თუ 'lang' უდრის "ptl"-ს,
ანუ Pig Latin-ს,

00:06:41.218 --> 00:06:48.538
მისალმება იქნება
"Ello-hey, " + სახელი

00:06:48.538 --> 00:06:53.167
ინგლისურისთვის კი შეგვიძლია გამოვიყენოთ
'else'

00:06:53.167 --> 00:06:55.366
რომელიც უბრალოდ გადმოვიტანე აქ.

00:06:55.366 --> 00:06:56.799
ესეც ასე.

00:06:56.799 --> 00:07:00.374
და, თუ გინდა, ბონუს-ამოცანა:

00:07:00.374 --> 00:07:03.840
სცადე გააკეთო Pig Latin 
სახელების კონვერტერი;

00:07:03.840 --> 00:07:07.678
იმისთვის, რომ მისალმებაში სახელიც 
Pig Latin ენაზე იყოს.

00:07:07.678 --> 00:07:10.009
ძალიან მაგარი იქნება.

00:07:10.009 --> 00:07:13.295
დააპაუზე ახლა ტუტორიალი,
შეიყვანე სახელი,

00:07:13.295 --> 00:07:19.098
აირჩიე ენა და ნახე, რა გამოვა.

00:07:19.098 --> 00:07:20.239
კარგია, არა?

00:07:20.239 --> 00:07:24.691
ცოტა JavaScript-ისა და ფორმების გამოყენებით
ბევრი რამის გაკეთება შეგიძლია:

00:07:24.691 --> 00:07:27.316
სიტყვების თამაშების, რიცხვების თამაშების,
ისტორიების შექმნა..

00:07:27.316 --> 00:07:30.029
და თუ ხანის აკედემიის ფარგლებს გარეთ გაქვს სერვერი

00:07:30.029 --> 00:07:33.447
შეგიძლია გამოიყენო JavaScript მონაცემების 
პირველადი დამუშავებისთვის,

00:07:33.447 --> 00:07:35.361
სერვერზე გაგზავნამდე.

00:07:35.361 --> 00:07:38.522
არის კიდევ ბევრი სხვა მოვლენა, რომელიც
ფორმასთან შეგიძლია აკონტროლო,

00:07:38.522 --> 00:07:40.701
მაგალიად, კლავიატურის ღილაკის დაჭერა.

00:07:40.701 --> 00:07:44.152
მთავარია, გახსოვდეს, რომ
შენ გაინტერესებს მნიშვნელობა

00:07:44.152 --> 00:07:47.289
და ეს მნიშვნელობა სწორ დროს 
უნდა დაფიქსირდეს.

00:07:47.289 --> 00:07:50.031
უფრო მეტ პრაქტიკას შემდეგ
დავალებაში მიიღებ.

00:07:50.031 --> 00:07:52.644
შემდეგი დავალება ჩემი პირადი ფავორიტია.