ფორმების დამუშავება (ვიდეო ვერსია)

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

ხანის აკადემიაზე უსაფრთხოების მიზეზით

გვერდებს არ ვაძლევთ სერვერებთან
დაკავშირების უფლებას.

ამიტომ, აქ არ ვასწავლით ფორმებს.

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

შემიძლია გაჩვენო, როგორ გამოიყენო JavaScript
ფორმის ელემენტების დასამუშავებლად

იმის მაგივრად, რომ გაუგზავნო ისინი სერვერს.

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

და ენის გასაგებად.

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

როცა ისინი ამ ღილაკს დააჭერენ.

პირველ რიგში, ღილაკის ელემენტი
უნდა შევინახოთ ცვლადში.

მაგალითად:
`document.getElementById("button")`.

შემდეგ უნდა განვსაზღვროთ ფუნქციის
event listener.

`var onButtonClick = function() {`

და შემდეგ აქ უნდა მივამაგრებინოთ შეტყობინება

`document.getElementById("message")`,

გვექნება პატარა საყვარელი შეტყობინება
`div`.

შემდეგ კი უბრალოდ `textContent +=
"აქ დაკლიკეთ? დიდი მადლობა!"`

აი, ასე.

დაბოლოს, მესამე ნაბიჯი, ღილაკს უნდა
დავურთოთ event listener

რომელიც გამოიძახებს ფუნქციას, როცა
ღილაკს დააჭერენ.

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

ახლა დააპაუზე ტუტორილი და შეამოწმე,
ხომ ისე მუშაობს ყველაფერი, როგორც მოელოდი.

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

როგორ გამოვიყენოთ მომხმარებლის მიერ
შეყვანილი ინფორმაცია?

შევქმნათ ამისთვის ცვლადი.

`var name = document.getElementById`,

რადგანაც მას აქვს ID

მას მივიღებთ აქ.

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

გამოვა `var greeting = "Heyaz"`,
ეს ჩემი საყვარელი მისალმებაა,

` + name`.

ახლა გვაქვს ხაზი და კიდევ რაღაც, რაც
ინახება ამ ცვლადში.

ახლა კი, ეს ტექსტი
ნამდვილი მისალმება უნდა იყოს.

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

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

და დავუკავშირეთ ის ცვლადს.

დააპაუზე ტუტორიალი და ნახე,
თუ მუშაობს ყველაფერი.

არც ისე, ჰო?

ხედავ შეტყობინებას "Heyaz [object Object]", ან
"Heyaz object Element"?

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

იმ შეთხვევაშიც კი, თუ არის
(რაც მშვენიერია)

აქ რაღაც შეცდომაა.

უნდა დაგვენახა ის, რაც აქ ჩაწერე,

მაგრამ სინამდვილეში მივიღეთ "object".

ეს იმას ნიშნავს, რომ ცვლადი "name"
მიუთითებს ობიექტზე,

და არა ხაზზე, რომელზეც გვეგონა, რომ
მიუთითებდა.

შეიძლება, უკვე მიხვდი, როგორ
გამოასწორო პრობლემა.

ცვლადში "name" ჩვენ შევინახეთ
მთელი ელემენტი-ობიექტი

ელემენტი-ობიექტი კი ძალიან დიდი ობიექტია

უამრავი ინფორმაციით ელემენტის შესახებ:

ყველა მისი ატრიბუტითა და მეთოდით.

იმისთვის, რომ გავიგოთ, რა ჩაწერა მომხმარებელმა,
ელემენტის კონკრეტულ თვისებაზე

უნდა გვქონდეს წვდომა: მნიშვნელობაზე.

უბრალოდ უნდა დავუმათოთ `.value`
და ეს გვიშველის.

დააპაუზე ტუტორიალი და სცადე კიდევ ერთხელ

ახლა გამოვიდა, ჰო ასეა?

ეს შეცდომა ძალიან გავრცელებულია, ამიტომ
ყურადღებით იყავი

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

ავიღოთ ეს ხაზი და გავიტანოთ იგი
ფუნქციის გარეთ.

დააპაუზე ტუტორიალი, ჩაწერე რამე და
დააჭირე ღილაკს.

თუ ყველაფერი ისე გაფუჭდა,
როგორც უნდა გაფუჭებულიყო,

მაშინ შენი სახლის მაგივრად ცარიელი
ხაზი უნდა დაგენახა.

ხვდები, რატომ?

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

ამ კოდში ბრაუზერი ტვირთავს გვერდს

და ასრულებს JavaScript-ის ხაზებს
ერთი მეორეს თანმიმდევრობით.

პირველ რიგში, იგი ინახავს ცვლადში
ღილაკის ელემენტს.

შემდეგ ინახავს ცვლადში შეყვანილი
ელემენტის მნიშვნელობას.

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

მნიშვნელობა კი ამ დროს ცარიელია.

შემდეგ იგი განსაზღვრავს ფუნქციას და
ანიჭებს მას event listener-ს

მისი გამოძახების შემდეგ,
სახელი ისევ იგივე ხაზია,

რაც გვერდის ჩატვირთვისას იყო.

ამიტომ listener ვერასდროს ვერ გაიგებს,
რა ჩაწერა მომხმარებელმა ბოლოს.

ამიტომ, კოდის ეს ხაზი

უნდა იყოს event listener-ის
ფუნქციის შიგნით,

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

ახლა ვნახოთ ენის მნიშვნელობა,

უნდა დავწრმუნდეთ, რომ ყველაფერი
კარგად გაიგე.

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

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

მოვაწესრიგოდ ყველაფერი

აი, ასე.

[ბეჭდავს]

ალბათ, ამჩნევ, რომ ჩემს ცვლადებს იგივეს
ვარქმევ, რაც ჩემს ID-ებს

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

მინდა, რომ სხვადასხვა შეტყობინება დაინახონ,
იმაზე დაყრდნობით, თუ რომელი ენა აირჩიეს.

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

მნიშვნელობა HMTL ატრიბუტია,

'lang' უნდა იყოს
"en", "es", ან "plt"

რაც ნიშნავს
`if (lang === "es")`,

მისალმება იქნება "Hola"

გავაგრძელოთ და ჩავსვათ ეს მისალმების
ცვლადი აქ.

ანუ 'greeting' იქნება "Hola" + სახელი

და თუ 'lang' უდრის "ptl"-ს,
ანუ Pig Latin-ს,

მისალმება იქნება
"Ello-hey, " + სახელი

ინგლისურისთვის კი შეგვიძლია გამოვიყენოთ
'else'

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

ესეც ასე.

და, თუ გინდა, ბონუს-ამოცანა:

სცადე გააკეთო Pig Latin
სახელების კონვერტერი;

იმისთვის, რომ მისალმებაში სახელიც
Pig Latin ენაზე იყოს.

ძალიან მაგარი იქნება.

დააპაუზე ახლა ტუტორიალი,
შეიყვანე სახელი,

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

კარგია, არა?

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

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

და თუ ხანის აკედემიის ფარგლებს გარეთ გაქვს სერვერი

შეგიძლია გამოიყენო JavaScript მონაცემების
პირველადი დამუშავებისთვის,

სერვერზე გაგზავნამდე.

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

მაგალიად, კლავიატურის ღილაკის დაჭერა.

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

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

უფრო მეტ პრაქტიკას შემდეგ
დავალებაში მიიღებ.

შემდეგი დავალება ჩემი პირადი ფავორიტია.