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

0:00:05.452,0:00:08.843
ხანის აკადემიაზე უსაფრთხოების მიზეზით[br]

0:00:08.843,0:00:11.442
გვერდებს არ ვაძლევთ სერვერებთან [br]დაკავშირების უფლებას.

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

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

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

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

0:00:23.074,0:00:28.096
აქ ჩავსვი რამდენიმე ფორმა, მაგალითად [br]მომხმარებლის სახელისა

0:00:28.096,0:00:30.045
და ენის გასაგებად.

0:00:30.045,0:00:34.027
მინდა, რომ გვერდი მომხმარებელს მის[br]მშობლიურ ენაზე მიესალმოს,

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

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

0:00:41.457,0:00:49.307
მაგალითად: [br]`document.getElementById("button")`.

0:00:49.307,0:00:53.192
შემდეგ უნდა განვსაზღვროთ ფუნქციის [br]event listener.

0:00:53.192,0:00:57.885
`var onButtonClick = function() {`

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

0:01:03.770,0:01:08.729
`document.getElementById("message")`,

0:01:08.729,0:01:10.709
გვექნება პატარა საყვარელი შეტყობინება[br]`div`.

0:01:10.709,0:01:20.707
შემდეგ კი უბრალოდ `textContent +=[br]"აქ დაკლიკეთ? დიდი მადლობა!"`

0:01:20.707,0:01:23.161
აი, ასე.

0:01:23.161,0:01:28.796
დაბოლოს, მესამე ნაბიჯი, ღილაკს უნდა[br]დავურთოთ event listener

0:01:28.796,0:01:31.711
რომელიც გამოიძახებს ფუნქციას, როცა [br]ღილაკს დააჭერენ.

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

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

0:01:42.959,0:01:47.971
ახლა კი ისე გავაკეთოთ, რომ მართლა[br]ფორმის შიგთავსზე დაყრდნობით თქვას რამე.

0:01:47.971,0:01:52.850
როგორ გამოვიყენოთ მომხმარებლის მიერ[br]შეყვანილი ინფორმაცია?

0:01:52.850,0:01:55.834
შევქმნათ ამისთვის ცვლადი.

0:01:55.834,0:02:04.770
`var name = document.getElementById`,

0:02:04.770,0:02:07.337
რადგანაც მას აქვს ID

0:02:07.337,0:02:11.322
მას მივიღებთ აქ.

0:02:11.322,0:02:17.115
გავაკეთოთ ახალი ხაზი მისალმებისთვის,[br]და დავუკავშიროთ მას შევყანილი სახელი

0:02:17.115,0:02:22.720
გამოვა `var greeting = "Heyaz"`,[br]ეს ჩემი საყვარელი მისალმებაა,

0:02:22.720,0:02:24.203
` + name`.

0:02:24.203,0:02:30.351
ახლა გვაქვს ხაზი და კიდევ რაღაც, რაც[br]ინახება ამ ცვლადში.

0:02:30.351,0:02:38.772
ახლა კი, ეს ტექსტი[br]ნამდვილი მისალმება უნდა იყოს.

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

0:02:41.688,0:02:44.899
ვიპოვეთ, სად შეყვათ სახელი,[br]შევქმენით მისალმების ხაზი

0:02:44.899,0:02:47.732
და დავუკავშირეთ ის ცვლადს.

0:02:47.732,0:02:53.032
დააპაუზე ტუტორიალი და ნახე,[br]თუ მუშაობს ყველაფერი.

0:02:53.032,0:02:55.632
არც ისე, ჰო?

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

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

0:03:04.761,0:03:08.073
იმ შეთხვევაშიც კი, თუ არის[br](რაც მშვენიერია)

0:03:08.073,0:03:10.508
აქ რაღაც შეცდომაა.

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

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

0:03:16.482,0:03:20.682
ეს იმას ნიშნავს, რომ ცვლადი "name"[br]მიუთითებს ობიექტზე,

0:03:20.682,0:03:23.581
და არა ხაზზე, რომელზეც გვეგონა, რომ [br]მიუთითებდა.

0:03:23.581,0:03:26.647
შეიძლება, უკვე მიხვდი, როგორ[br]გამოასწორო პრობლემა.

0:03:26.647,0:03:31.885
ცვლადში "name" ჩვენ შევინახეთ [br]მთელი ელემენტი-ობიექტი

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

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

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

0:03:39.532,0:03:43.472
იმისთვის, რომ გავიგოთ, რა ჩაწერა მომხმარებელმა,[br]ელემენტის კონკრეტულ თვისებაზე

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

0:03:46.211,0:03:51.918
უბრალოდ უნდა დავუმათოთ `.value`[br]და ეს გვიშველის.

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

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

0:03:57.984,0:04:01.913
ეს შეცდომა ძალიან გავრცელებულია, ამიტომ[br]ყურადღებით იყავი

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

0:04:05.007,0:04:13.960
ავიღოთ ეს ხაზი და გავიტანოთ იგი[br]ფუნქციის გარეთ.

0:04:13.960,0:04:22.740
დააპაუზე ტუტორიალი, ჩაწერე რამე და[br]დააჭირე ღილაკს.

0:04:22.740,0:04:25.997
თუ ყველაფერი ისე გაფუჭდა, [br]როგორც უნდა გაფუჭებულიყო,

0:04:25.997,0:04:28.050
მაშინ შენი სახლის მაგივრად ცარიელი[br]ხაზი უნდა დაგენახა.

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

0:04:29.693,0:04:33.937
დაფიქრდი იმაზე, როგორ მუშავდება კოდის[br]თითოეული ხაზი.

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

0:04:37.098,0:04:39.770
და ასრულებს JavaScript-ის ხაზებს[br]ერთი მეორეს თანმიმდევრობით.

0:04:39.770,0:04:42.928
პირველ რიგში, იგი ინახავს ცვლადში [br]ღილაკის ელემენტს.

0:04:42.928,0:04:46.817
შემდეგ ინახავს ცვლადში შეყვანილი[br]ელემენტის მნიშვნელობას.

0:04:46.817,0:04:50.460
მაგრამ ის ინახავს მნიშნველობას,[br]როცა გვერდი იტვირთება..

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

0:04:52.465,0:04:56.320
შემდეგ იგი განსაზღვრავს ფუნქციას და [br]ანიჭებს მას event listener-ს

0:04:56.320,0:05:00.421
მისი გამოძახების შემდეგ,[br]სახელი ისევ იგივე ხაზია,

0:05:00.421,0:05:02.877
რაც გვერდის ჩატვირთვისას იყო.

0:05:02.877,0:05:06.201
ამიტომ listener ვერასდროს ვერ გაიგებს,[br]რა ჩაწერა მომხმარებელმა ბოლოს.

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

0:05:08.529,0:05:13.190
უნდა იყოს event listener-ის [br]ფუნქციის შიგნით,

0:05:13.190,0:05:18.757
იმისთვის რომ მნიშვნელობა დაფიქსირდეს მაშინ,[br]როცა ეს მოვლენა განხორციელდება.

0:05:18.757,0:05:21.938
ახლა ვნახოთ ენის მნიშვნელობა,[br]

0:05:21.938,0:05:24.414
უნდა დავწრმუნდეთ, რომ ყველაფერი[br]კარგად გაიგე.

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

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

0:05:34.546,0:05:36.891
მოვაწესრიგოდ ყველაფერი

0:05:36.891,0:05:38.842
აი, ასე.

0:05:38.842,0:05:41.453
[ბეჭდავს]

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

0:05:51.234,0:05:55.291
მაგრამ ეს მე ვაკეთებ ასე, შენ შეგიძლია[br]სხვა სახელები დაარქვა.

0:05:55.291,0:05:59.787
მინდა, რომ სხვადასხვა შეტყობინება დაინახონ,[br]იმაზე დაყრდნობით, თუ რომელი ენა აირჩიეს.

0:05:59.787,0:06:03.627
მიაქციე ყურადღება, რომ მნიშვნელობა არ[br]არის იგივე, რაც მენიუში ჩანს

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

0:06:06.880,0:06:11.250
'lang' უნდა იყოს[br]"en", "es", ან "plt"

0:06:11.250,0:06:17.212
რაც ნიშნავს[br]`if (lang === "es")`,

0:06:17.212,0:06:23.684
მისალმება იქნება "Hola"

0:06:23.684,0:06:26.809
გავაგრძელოთ და ჩავსვათ ეს მისალმების[br]ცვლადი აქ.

0:06:26.809,0:06:35.105
ანუ 'greeting' იქნება "Hola" + სახელი

0:06:35.105,0:06:41.218
და თუ 'lang' უდრის "ptl"-ს,[br]ანუ Pig Latin-ს,

0:06:41.218,0:06:48.538
მისალმება იქნება[br]"Ello-hey, " + სახელი

0:06:48.538,0:06:53.167
ინგლისურისთვის კი შეგვიძლია გამოვიყენოთ[br]'else'

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

0:06:55.366,0:06:56.799
ესეც ასე.

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

0:07:00.374,0:07:03.840
სცადე გააკეთო Pig Latin [br]სახელების კონვერტერი;

0:07:03.840,0:07:07.678
იმისთვის, რომ მისალმებაში სახელიც [br]Pig Latin ენაზე იყოს.

0:07:07.678,0:07:10.009
ძალიან მაგარი იქნება.

0:07:10.009,0:07:13.295
დააპაუზე ახლა ტუტორიალი,[br]შეიყვანე სახელი,

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

0:07:19.098,0:07:20.239
კარგია, არა?

0:07:20.239,0:07:24.691
ცოტა JavaScript-ისა და ფორმების გამოყენებით[br]ბევრი რამის გაკეთება შეგიძლია:

0:07:24.691,0:07:27.316
სიტყვების თამაშების, რიცხვების თამაშების,[br]ისტორიების შექმნა..

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

0:07:30.029,0:07:33.447
შეგიძლია გამოიყენო JavaScript მონაცემების [br]პირველადი დამუშავებისთვის,

0:07:33.447,0:07:35.361
სერვერზე გაგზავნამდე.

0:07:35.361,0:07:38.522
არის კიდევ ბევრი სხვა მოვლენა, რომელიც[br]ფორმასთან შეგიძლია აკონტროლო,

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

0:07:40.701,0:07:44.152
მთავარია, გახსოვდეს, რომ[br]შენ გაინტერესებს მნიშვნელობა

0:07:44.152,0:07:47.289
და ეს მნიშვნელობა სწორ დროს [br]უნდა დაფიქსირდეს.

0:07:47.289,0:07:50.031
უფრო მეტ პრაქტიკას შემდეგ[br]დავალებაში მიიღებ.

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