შეტანა და გამოტანა

რას ისწავლი

• რა არის შეტანა (input) და გამოტანა (output)
• რატომ არის მომხმარებლის შეტანა ტექსტი და როგორ შეამოწმო ის
• როგორ წაიკითხო ველიდან ტექსტი ბრაუზერის გვერდზე

შეტანა, დამუშავება, გამოტანა

თითქმის ყველა პროგრამა ერთ სქემას მიჰყვება: იღებს მონაცემს, ამუშავებს და შედეგს აჩვენებს. კალკულატორი იღებს რიცხვებს, ითვლის და აჩვენებს პასუხს. თამაში იღებს ღილაკზე დაჭერას, ამოძრავებს გმირს და ხატავს ეკრანს.

შეტანა (input) შეიძლება მოვიდეს კლავიატურიდან, ფორმის ველიდან, ფაილიდან, ინტერნეტიდან ან სენსორიდან. გამოტანა (output) შეიძლება იყოს ტექსტი ეკრანზე, ფაილი, ხმა ან შეტყობინება სხვა პროგრამისთვის. ამ კურსში აქამდე შეტანა ცვლადებში ხელით ვწერეთ, გამოტანა კი console.log-ით ვბეჭდეთ.

prompt: უმარტივესი შეტანა

ბრაუზერში არსებობს ფუნქცია prompt, რომელიც ფანჯარას აჩენს, მომხმარებელს ტექსტს აწერინებს და მას აბრუნებს:

let name = prompt("რა გქვია?");
console.log("გამარჯობა, " + name + "!");

ამ გვერდის რედაქტორი უსაფრთხოების მიზნით ცალკე, დახურულ გარემოში მუშაობს და prompt-ს არ უშვებს. ამიტომ შემდეგ მაგალითებში შეტანას ჩვეულებრივ ცვლადად დავწერთ, პროგრამის თავში: „ეს ის მნიშვნელობაა, რომელიც მომხმარებელმა ჩაწერა“. ბოლოს კი ნახავ, როგორ კეთდება ეს ნამდვილ გვერდზე, ველით და ღილაკით.

შეტანა ყოველთვის ტექსტია

რასაც მომხმარებელი ჩაწერს, prompt-ში თუ ფორმის ველში, პროგრამაში სტრიქონად მოდის, ციფრებიც. ტიპების თავში უკვე ნახე, რა ხდება მაშინ: "5" + "3" არის "53". ამიტომ რიცხვითი შეტანა ჯერ Number()-ით გარდაქმენი.

და კიდევ ერთი წესი: არასოდეს ენდო შეტანას. მომხმარებელმა შეიძლება ჩაწეროს „ათი“ ციფრების ნაცვლად, დატოვოს ველი ცარიელი ან ჩაწეროს უარყოფითი ასაკი. კარგი პროგრამა შეტანას ამოწმებს, სანამ გამოიყენებს:

let input = "ათი";            // თითქოს მომხმარებელმა ჩაწერა
let age = Number(input);

if (input.trim() === "" || Number.isNaN(age)) {
  console.log("გთხოვ, ჩაწერე რიცხვი");
} else if (age < 0 || age > 120) {
  console.log("ასეთი ასაკი არ არსებობს");
} else {
  console.log("10 წელიწადში იქნები", age + 10, "წლის");
}

trim() სტრიქონს თავსა და ბოლოში ინტერვალებს აჭრის. ასე ველი, რომელშიც მხოლოდ ინტერვალებია, ცარიელად ჩაითვლება.

ველი და ღილაკი ნამდვილ გვერდზე

ვებგვერდზე შეტანა ჩვეულებრივ ველით (<input>) და ღილაკით (<button>) ხდება, გამოტანა კი გვერდზე ტექსტის ჩაწერით. ქვემოთ მოცემული რედაქტორი HTML-ს უშვებს: ჩაწერე სახელი და დააჭირე ღილაკს. HTML-სა და გვერდთან მუშაობას დაწვრილებით ცალკე კურსებში ისწავლი, აქ მთავარი იდეა ნახე:

1. document.getElementById("age") გვერდზე პოულობს ელემენტს id-ით „age“, .value კი აბრუნებს ველში ჩაწერილ ტექსტს.
2. onclick ღილაკზე დაჭერისას ფუნქციას იძახებს.
3. out.textContent = ... ტექსტს გვერდზე წერს. ეს გამოტანაა console.log-ის ნაცვლად.

სცადე თავად

შეცვალე input-ის მნიშვნელობა: "12", "", "-5", "თორმეტი". ოთხივე შემთხვევაში გონივრული პასუხი უნდა მიიღო.

ხშირი შეცდომები

• შეტანის შეკრება გარდაქმნის გარეშე. ველიდან მოსული "5" და "3" +-ით "53" ხდება.
• ცარიელი ველის გამოტოვება. Number("") არის 0 და არა NaN, ამიტომ ცარიელი ველი ცალკე შეამოწმე.
• შემოწმების გარეშე გამოყენება. მომხმარებელი ყოველთვის ჩაწერს იმას, რასაც არ ელოდი.

let input = "7";
let n = Number(input);

if (input.trim() === "" || Number.isNaN(n)) {
  console.log("ეს რიცხვი არ არის");
} else if (n % 2 === 0) {
  console.log(n + " ლუწია");
} else {
  console.log(n + " კენტია");
}

მინი-ქვიზი

შეჯამება

• პროგრამა: შეტანა → დამუშავება → გამოტანა.
• მომხმარებლის შეტანა ყოველთვის ტექსტია: გამოთვლამდე Number().
• შეამოწმე შეტანა: ცარიელი, არარიცხვითი, დაუშვებელი მნიშვნელობა.
• გვერდზე შეტანა ველიდან .value-ით იკითხება, გამოტანა textContent-ით იწერება.