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

2
00:00:05,452 --> 00:00:08,843
ხანის აკადემიაზე უსაფრთხოების მიზეზით


3
00:00:08,843 --> 00:00:11,442
გვერდებს არ ვაძლევთ სერვერებთან 
დაკავშირების უფლებას.

4
00:00:11,442 --> 00:00:13,648
ამიტომ, აქ არ ვასწავლით ფორმებს.

5
00:00:13,648 --> 00:00:16,997
მაგრამ ახლა, რადგანაც JavaScript-ს სწავლობ
გვერდების სამართავად

6
00:00:16,997 --> 00:00:20,550
შემიძლია გაჩვენო, როგორ გამოიყენო JavaScript 
ფორმის ელემენტების დასამუშავებლად

7
00:00:20,550 --> 00:00:23,074
იმის მაგივრად, რომ გაუგზავნო ისინი სერვერს.

8
00:00:23,074 --> 00:00:28,096
აქ ჩავსვი რამდენიმე ფორმა, მაგალითად 
მომხმარებლის სახელისა

9
00:00:28,096 --> 00:00:30,045
და ენის გასაგებად.

10
00:00:30,045 --> 00:00:34,027
მინდა, რომ გვერდი მომხმარებელს მის
მშობლიურ ენაზე მიესალმოს,

11
00:00:34,027 --> 00:00:36,666
როცა ისინი ამ ღილაკს დააჭერენ.

12
00:00:36,666 --> 00:00:41,457
პირველ რიგში, ღილაკის ელემენტი
უნდა შევინახოთ ცვლადში.

13
00:00:41,457 --> 00:00:49,307
მაგალითად: 
`document.getElementById("button")`.

14
00:00:49,307 --> 00:00:53,192
შემდეგ უნდა განვსაზღვროთ ფუნქციის 
event listener.

15
00:00:53,192 --> 00:00:57,885
`var onButtonClick = function() {`

16
00:00:57,885 --> 00:01:03,770
და შემდეგ აქ უნდა მივამაგრებინოთ შეტყობინება

17
00:01:03,770 --> 00:01:08,729
`document.getElementById("message")`,

18
00:01:08,729 --> 00:01:10,709
გვექნება პატარა საყვარელი შეტყობინება
`div`.

19
00:01:10,709 --> 00:01:20,707
შემდეგ კი უბრალოდ `textContent +=
"აქ დაკლიკეთ? დიდი მადლობა!"`

20
00:01:20,707 --> 00:01:23,161
აი, ასე.

21
00:01:23,161 --> 00:01:28,796
დაბოლოს, მესამე ნაბიჯი, ღილაკს უნდა
დავურთოთ event listener

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

23
00:01:31,711 --> 00:01:36,491
დავურთოთ: `("click", onButtonClick)`.

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

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

26
00:01:47,971 --> 00:01:52,850
როგორ გამოვიყენოთ მომხმარებლის მიერ
შეყვანილი ინფორმაცია?

27
00:01:52,850 --> 00:01:55,834
შევქმნათ ამისთვის ცვლადი.

28
00:01:55,834 --> 00:02:04,770
`var name = document.getElementById`,

29
00:02:04,770 --> 00:02:07,337
რადგანაც მას აქვს ID

30
00:02:07,337 --> 00:02:11,322
მას მივიღებთ აქ.

31
00:02:11,322 --> 00:02:17,115
გავაკეთოთ ახალი ხაზი მისალმებისთვის,
და დავუკავშიროთ მას შევყანილი სახელი

32
00:02:17,115 --> 00:02:22,720
გამოვა `var greeting = "Heyaz"`,
ეს ჩემი საყვარელი მისალმებაა,

33
00:02:22,720 --> 00:02:24,203
` + name`.

34
00:02:24,203 --> 00:02:30,351
ახლა გვაქვს ხაზი და კიდევ რაღაც, რაც
ინახება ამ ცვლადში.

35
00:02:30,351 --> 00:02:38,772
ახლა კი, ეს ტექსტი
ნამდვილი მისალმება უნდა იყოს.

36
00:02:38,772 --> 00:02:41,688
აბა, ვნახოთ, ხომ ყველაფერი სწორად გვაქვს

37
00:02:41,688 --> 00:02:44,899
ვიპოვეთ, სად შეყვათ სახელი,
შევქმენით მისალმების ხაზი

38
00:02:44,899 --> 00:02:47,732
და დავუკავშირეთ ის ცვლადს.

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

40
00:02:53,032 --> 00:02:55,632
არც ისე, ჰო?

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

42
00:03:01,877 --> 00:03:04,761
თუ დავუშვებთ, რომ შენი სახელი არ არის Object

43
00:03:04,761 --> 00:03:08,073
იმ შეთხვევაშიც კი, თუ არის
(რაც მშვენიერია)

44
00:03:08,073 --> 00:03:10,508
აქ რაღაც შეცდომაა.

45
00:03:10,508 --> 00:03:13,704
უნდა დაგვენახა ის, რაც აქ ჩაწერე,

46
00:03:13,704 --> 00:03:16,482
მაგრამ სინამდვილეში მივიღეთ "object".

47
00:03:16,482 --> 00:03:20,682
ეს იმას ნიშნავს, რომ ცვლადი "name"
მიუთითებს ობიექტზე,

48
00:03:20,682 --> 00:03:23,581
და არა ხაზზე, რომელზეც გვეგონა, რომ 
მიუთითებდა.

49
00:03:23,581 --> 00:03:26,647
შეიძლება, უკვე მიხვდი, როგორ
გამოასწორო პრობლემა.

50
00:03:26,647 --> 00:03:31,885
ცვლადში "name" ჩვენ შევინახეთ 
მთელი ელემენტი-ობიექტი

51
00:03:31,885 --> 00:03:34,987
ელემენტი-ობიექტი კი ძალიან დიდი ობიექტია

52
00:03:34,987 --> 00:03:37,095
უამრავი ინფორმაციით ელემენტის შესახებ:

53
00:03:37,095 --> 00:03:39,532
ყველა მისი ატრიბუტითა და მეთოდით.

54
00:03:39,532 --> 00:03:43,472
იმისთვის, რომ გავიგოთ, რა ჩაწერა მომხმარებელმა,
ელემენტის კონკრეტულ თვისებაზე

55
00:03:43,472 --> 00:03:46,211
უნდა გვქონდეს წვდომა: მნიშვნელობაზე.

56
00:03:46,211 --> 00:03:51,918
უბრალოდ უნდა დავუმათოთ `.value`
და ეს გვიშველის.

57
00:03:51,918 --> 00:03:56,177
დააპაუზე ტუტორიალი და სცადე კიდევ ერთხელ

58
00:03:56,177 --> 00:03:57,984
ახლა გამოვიდა, ჰო ასეა?

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

60
00:04:01,913 --> 00:04:05,007
კიდევ ერთ გავრცელებულ შეცდომას გაჩვენებ

61
00:04:05,007 --> 00:04:13,960
ავიღოთ ეს ხაზი და გავიტანოთ იგი
ფუნქციის გარეთ.

62
00:04:13,960 --> 00:04:22,740
დააპაუზე ტუტორიალი, ჩაწერე რამე და
დააჭირე ღილაკს.

63
00:04:22,740 --> 00:04:25,997
თუ ყველაფერი ისე გაფუჭდა, 
როგორც უნდა გაფუჭებულიყო,

64
00:04:25,997 --> 00:04:28,050
მაშინ შენი სახლის მაგივრად ცარიელი
ხაზი უნდა დაგენახა.

65
00:04:28,050 --> 00:04:29,693
ხვდები, რატომ?

66
00:04:29,693 --> 00:04:33,937
დაფიქრდი იმაზე, როგორ მუშავდება კოდის
თითოეული ხაზი.

67
00:04:33,937 --> 00:04:37,098
ამ კოდში ბრაუზერი ტვირთავს გვერდს

68
00:04:37,098 --> 00:04:39,770
და ასრულებს JavaScript-ის ხაზებს
ერთი მეორეს თანმიმდევრობით.

69
00:04:39,770 --> 00:04:42,928
პირველ რიგში, იგი ინახავს ცვლადში 
ღილაკის ელემენტს.

70
00:04:42,928 --> 00:04:46,817
შემდეგ ინახავს ცვლადში შეყვანილი
ელემენტის მნიშვნელობას.

71
00:04:46,817 --> 00:04:50,460
მაგრამ ის ინახავს მნიშნველობას,
როცა გვერდი იტვირთება..

72
00:04:50,460 --> 00:04:52,465
მნიშვნელობა კი ამ დროს ცარიელია.

73
00:04:52,465 --> 00:04:56,320
შემდეგ იგი განსაზღვრავს ფუნქციას და 
ანიჭებს მას event listener-ს

74
00:04:56,320 --> 00:05:00,421
მისი გამოძახების შემდეგ,
სახელი ისევ იგივე ხაზია,

75
00:05:00,421 --> 00:05:02,877
რაც გვერდის ჩატვირთვისას იყო.

76
00:05:02,877 --> 00:05:06,201
ამიტომ listener ვერასდროს ვერ გაიგებს,
რა ჩაწერა მომხმარებელმა ბოლოს.

77
00:05:06,201 --> 00:05:08,529
ამიტომ, კოდის ეს ხაზი

78
00:05:08,529 --> 00:05:13,190
უნდა იყოს event listener-ის 
ფუნქციის შიგნით,

79
00:05:13,190 --> 00:05:18,757
იმისთვის რომ მნიშვნელობა დაფიქსირდეს მაშინ,
როცა ეს მოვლენა განხორციელდება.

80
00:05:18,757 --> 00:05:21,938
ახლა ვნახოთ ენის მნიშვნელობა,


81
00:05:21,938 --> 00:05:24,414
უნდა დავწრმუნდეთ, რომ ყველაფერი
კარგად გაიგე.

82
00:05:24,414 --> 00:05:29,599
ენას 'lang' ცვლადში შევინახავ, მოვლენის კონტროლში.

83
00:05:31,769 --> 00:05:34,546
რა საშინლად გამოიყურება ვიზუალურად,

84
00:05:34,546 --> 00:05:36,891
მოვაწესრიგოდ ყველაფერი

85
00:05:36,891 --> 00:05:38,842
აი, ასე.

86
00:05:38,842 --> 00:05:41,453
[ბეჭდავს]

87
00:05:46,773 --> 00:05:51,234
ალბათ, ამჩნევ, რომ ჩემს ცვლადებს იგივეს
ვარქმევ, რაც ჩემს ID-ებს

88
00:05:51,234 --> 00:05:55,291
მაგრამ ეს მე ვაკეთებ ასე, შენ შეგიძლია
სხვა სახელები დაარქვა.

89
00:05:55,291 --> 00:05:59,787
მინდა, რომ სხვადასხვა შეტყობინება დაინახონ,
იმაზე დაყრდნობით, თუ რომელი ენა აირჩიეს.

90
00:05:59,787 --> 00:06:03,627
მიაქციე ყურადღება, რომ მნიშვნელობა არ
არის იგივე, რაც მენიუში ჩანს

91
00:06:03,627 --> 00:06:06,880
მნიშვნელობა HMTL ატრიბუტია,

92
00:06:06,880 --> 00:06:11,250
'lang' უნდა იყოს
"en", "es", ან "plt"

93
00:06:11,250 --> 00:06:17,212
რაც ნიშნავს
`if (lang === "es")`,

94
00:06:17,212 --> 00:06:23,684
მისალმება იქნება "Hola"

95
00:06:23,684 --> 00:06:26,809
გავაგრძელოთ და ჩავსვათ ეს მისალმების
ცვლადი აქ.

96
00:06:26,809 --> 00:06:35,105
ანუ 'greeting' იქნება "Hola" + სახელი

97
00:06:35,105 --> 00:06:41,218
და თუ 'lang' უდრის "ptl"-ს,
ანუ Pig Latin-ს,

98
00:06:41,218 --> 00:06:48,538
მისალმება იქნება
"Ello-hey, " + სახელი

99
00:06:48,538 --> 00:06:53,167
ინგლისურისთვის კი შეგვიძლია გამოვიყენოთ
'else'

100
00:06:53,167 --> 00:06:55,366
რომელიც უბრალოდ გადმოვიტანე აქ.

101
00:06:55,366 --> 00:06:56,799
ესეც ასე.

102
00:06:56,799 --> 00:07:00,374
და, თუ გინდა, ბონუს-ამოცანა:

103
00:07:00,374 --> 00:07:03,840
სცადე გააკეთო Pig Latin 
სახელების კონვერტერი;

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

105
00:07:07,678 --> 00:07:10,009
ძალიან მაგარი იქნება.

106
00:07:10,009 --> 00:07:13,295
დააპაუზე ახლა ტუტორიალი,
შეიყვანე სახელი,

107
00:07:13,295 --> 00:07:19,098
აირჩიე ენა და ნახე, რა გამოვა.

108
00:07:19,098 --> 00:07:20,239
კარგია, არა?

109
00:07:20,239 --> 00:07:24,691
ცოტა JavaScript-ისა და ფორმების გამოყენებით
ბევრი რამის გაკეთება შეგიძლია:

110
00:07:24,691 --> 00:07:27,316
სიტყვების თამაშების, რიცხვების თამაშების,
ისტორიების შექმნა..

111
00:07:27,316 --> 00:07:30,029
და თუ ხანის აკედემიის ფარგლებს გარეთ გაქვს სერვერი

112
00:07:30,029 --> 00:07:33,447
შეგიძლია გამოიყენო JavaScript მონაცემების 
პირველადი დამუშავებისთვის,

113
00:07:33,447 --> 00:07:35,361
სერვერზე გაგზავნამდე.

114
00:07:35,361 --> 00:07:38,522
არის კიდევ ბევრი სხვა მოვლენა, რომელიც
ფორმასთან შეგიძლია აკონტროლო,

115
00:07:38,522 --> 00:07:40,701
მაგალიად, კლავიატურის ღილაკის დაჭერა.

116
00:07:40,701 --> 00:07:44,152
მთავარია, გახსოვდეს, რომ
შენ გაინტერესებს მნიშვნელობა

117
00:07:44,152 --> 00:07:47,289
და ეს მნიშვნელობა სწორ დროს 
უნდა დაფიქსირდეს.

118
00:07:47,289 --> 00:07:50,031
უფრო მეტ პრაქტიკას შემდეგ
დავალებაში მიიღებ.

119
00:07:50,031 --> 00:07:52,644
შემდეგი დავალება ჩემი პირადი ფავორიტია.