JavaScript

1 📘 JavaScript შესავალი

JavaScript არის პროგრამირების ენა, რომელიც ვებ-გვერდებს ცოცხალსა და ინტერაქტიულს ხდის. HTML არის სტრუქტურა, CSS — გარეგნობა, JavaScript კი — ქცევა და ლოგიკა.

რა არის JavaScript

JavaScript (JS) არის მაღალი დონის პროგრამირების ენა, რომელიც თავდაპირველად ბრაუზერისთვის შეიქმნა. დღეს ის ყველგანაა: ბრაუზერში, სერვერზე (Node.js), მობილურ აპებსა და დესკტოპ პროგრამებშიც.

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

მაგალითები

პირველი ცოცხალი კოდი

დააჭირე Run-ს და ნახე შედეგი Output პანელში.

console.log("გამარჯობა, JavaScript!");
console.log("2 + 2 =", 2 + 2);

💡 რჩევა: JavaScript ≠ Java. ეს სრულიად სხვადასხვა ენებია — სახელების მსგავსება ისტორიული მარკეტინგია.

Browser vs Server

JavaScript ორ ძირითად გარემოში მუშაობს:

Browser (client-side) — მომხმარებლის ბრაუზერში; აქვს წვდომა გვერდის DOM-ზე, ფანჯარაზე, მოვლენებზე.
Server (Node.js) — სერვერზე; აქვს წვდომა ფაილებზე, ბაზაზე, ქსელზე, მაგრამ არ აქვს DOM.

💡 რჩევა: ერთი ენა — ორ მხარეს: ფრონტენდსაც და ბექენდსაც JavaScript-ით წერ (full-stack JS).

JS Engine

JavaScript Engine

JS Engine არის პროგრამა, რომელიც JavaScript კოდს კითხულობს და ასრულებს. ყველაზე ცნობილია Google-ის V8 (Chrome-სა და Node.js-ში), Firefox-ის SpiderMonkey და Safari-ს JavaScriptCore.

Engine კოდს ბაიტ-კოდად და მანქანურ კოდად გარდაქმნის (JIT compilation) სისწრაფისთვის.

როგორ მუშაობს

როგორ მუშაობს JavaScript

JavaScript არის single-threaded (ერთ ნაკადიანი) — კოდი ზემოდან ქვემოთ, თანმიმდევრობით სრულდება. ხანგრძლივი ოპერაციები (ქსელი, ტაიმერი) ასინქრონულად სრულდება Event Loop-ის მეშვეობით, რომ გვერდი არ „გაიყინოს".

მაგალითები

თანმიმდევრობა და setTimeout

ნახე, რომ „მესამე" ბოლოს დაიბეჭდება, თუმცა კოდში შუაშია.

console.log("პირველი");
setTimeout(function(){ console.log("მესამე (ასინქრონული)"); }, 0);
console.log("მეორე");

ECMAScript (ES)

ECMAScript

ECMAScript არის სტანდარტი, რომელსაც JavaScript მიჰყვება. ვერსიები წლების მიხედვით იყოფა: ES6 (ES2015) იყო უდიდესი განახლება (let/const, arrow functions, classes, modules). შემდეგ ყოველწლიურად გამოდის ES2016, ES2017... .

💡 რჩევა: როცა „თანამედროვე JS"-ს ამბობენ, იგულისხმება ES6+ სინტაქსი.

2 🚀 პირველი პროგრამა

დავიწყოთ კლასიკით — „Hello World". console.log() ბეჭდავს მნიშვნელობას კონსოლში (აქ — Output პანელში).

console.log()

console.log & Hello World

console.log() არის დეველოპერის საუკეთესო მეგობარი — ბეჭდავს მნიშვნელობებს კონსოლში, რაც დებაგინგისთვის შეუცვლელია.

Syntax

console.log(value1, value2, ...);

Parameters

პარამეტრი	აღწერა
`value`	ნებისმიერი რაოდენობის მნიშვნელობა, რომელიც ერთ ხაზზე დაიბეჭდება

მაგალითები

Hello World

შეცვალე ტექსტი და დააჭირე Run.

console.log("Hello World");

რამდენიმე მნიშვნელობა

let name = "ნინო";
console.log("გამარჯობა,", name);
console.log("შენ ხარ", 2026 - 2005, "წლის");

console.error და warn

console.log("ჩვეულებრივი");
console.warn("გაფრთხილება!");
console.error("შეცდომა!");

💡 რჩევა: ბრაუზერში კონსოლი იხსნება F12 → Console ჩანართით.

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

console.log ნაცვლად Console.log — JavaScript რეგისტრზე მგრძნობიარეა.
წერტილმძიმის დავიწყება — ხშირად მუშაობს, მაგრამ კარგი ჩვევაა მისი დაწერა.

3 📦 ცვლადები (Variables)

ცვლადი არის „ყუთი", რომელშიც მნიშვნელობას ვინახავთ სახელის ქვეშ. JS-ში სამი გზაა: var (ძველი), let და const (თანამედროვე).

let ES6

let — ცვალებადი ცვლადი

let ქმნის ცვლადს, რომლის მნიშვნელობის შეცვლა (reassignment) შესაძლებელია. აქვს block scope — მოქმედებს მხოლოდ იმ { } ბლოკში, სადაც გამოცხადდა.

Syntax

let variableName = value;

მაგალითები

შექმნა და შეცვლა

let age = 20;
console.log(age);
age = 21;          // მნიშვნელობის შეცვლა
console.log(age);

Block scope

let x = "გარე";
{
  let x = "შიდა";
  console.log(x);   // შიდა
}
console.log(x);     // გარე

✓ საუკეთესო პრაქტიკა

გამოიყენე let მაშინ, როცა მნიშვნელობა შეიცვლება (მაგ. ციკლის მთვლელი).

const ES6

const — მუდმივი

const ქმნის ცვლადს, რომლის ხელახლა მინიჭება შეუძლებელია. block scope-იანია. ⚠️ ობიექტის/მასივის შიგთავსი მაინც იცვლება — დაცულია მხოლოდ თავად მისამართი.

Syntax

const PI = 3.14159;

მაგალითები

მუდმივი

const pi = 3.14;
console.log(pi);
// pi = 4;  // ❌ ეს შეცდომას გამოიწვევს

const ობიექტი მაინც იცვლება

const user = { name: "ანა" };
user.name = "ბექა";        // ✅ ეს დაშვებულია
console.log(user.name);

✓ საუკეთესო პრაქტიკა

ნაგულისხმევად ყოველთვის const გამოიყენე; let — მხოლოდ მაშინ, როცა ცვლა გჭირდება.
ეს კოდს უფრო პროგნოზირებადსა და უსაფრთხოს ხდის.

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

const-ით გამოცხადებული ცვლადის ხელახლა მინიჭება → TypeError.

var

var — ძველი გზა (Hoisting)

var არის ცვლადის გამოცხადების ძველი გზა. აქვს function scope (არა block) და ექვემდებარება hoisting-ს — გამოცხადება „აიწევს" ფუნქციის თავში. დღეს var-ს თითქმის აღარ იყენებენ.

Syntax

var x = 10;

მაგალითები

Hoisting დემონსტრაცია

var-ით გამოცხადებამდე წვდომა undefined-ს აბრუნებს, არ აგდებს შეცდომას.

console.log(a);   // undefined (hoisted)
var a = 5;
console.log(a);   // 5

💡 რჩევა: ახალ კოდში გამოიყენე let/const. var იცოდე მხოლოდ ძველი კოდის გასაგებად.

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

var-ის block scope-ად აღქმა — ის ფუნქციის დონეზე მოქმედებს, არა ბლოკის.
ციკლებში var-ის გამოყენება closure-ებთან ერთად ხშირად შეცდომებს იწვევს.

4 🔢 მონაცემთა ტიპები

JavaScript-ში მონაცემები იყოფა primitive (მარტივი) და reference (რთული, ობიექტური) ტიპებად. typeof ოპერატორი გვიჩვენებს ტიპს.

string, number, boolean...

Primitive Types

7 პრიმიტიული ტიპი: string (ტექსტი), number (რიცხვი), boolean (true/false), undefined (მნიშვნელობა არ მინიჭებია), null (შეგნებული „ცარიელი"), bigint (დიდი მთელი) და symbol (უნიკალური იდენტიფიკატორი).

მაგალითები

ყველა პრიმიტივი და typeof

let str = "ტექსტი";
let num = 42;
let bool = true;
let nothing = null;
let notDefined;

console.log(typeof str);        // string
console.log(typeof num);        // number
console.log(typeof bool);       // boolean
console.log(typeof notDefined); // undefined
console.log(typeof nothing);    // object (ცნობილი ისტორიული ბაგი!)

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

typeof null აბრუნებს "object"-ს — ეს JS-ის ცნობილი ბაგია, არა შენი შეცდომა.
null-სა და undefined-ს შორის სხვაობის უგულებელყოფა.

object, array, function

Reference Types

რთული ტიპები ინახება მისამართით (reference), არა მნიშვნელობით. ესენია: object (ობიექტი), array (მასივი) და function (ფუნქცია). მათი კოპირებისას იკოპირება მისამართი, არა შიგთავსი.

მაგალითები

Reference vs Value

let a = [1, 2, 3];
let b = a;          // იგივე მისამართი!
b.push(4);
console.log(a);     // [1,2,3,4] — a-ც შეიცვალა

let x = 10;
let y = x;          // value კოპირდება
y = 20;
console.log(x);     // 10 — x უცვლელია

💡 რჩევა: მასივის რეალური ასლისთვის გამოიყენე spread: let copy = [...a];

5 ➗ ოპერატორები

ოპერატორები ასრულებენ მოქმედებებს მნიშვნელობებზე: არითმეტიკულს, მინიჭებას, შედარებასა და ლოგიკურს.

+ - * / % **

Arithmetic Operators

არითმეტიკული ოპერატორები: შეკრება +, გამოკლება -, გამრავლება *, გაყოფა /, ნაშთი % (modulo), ხარისხი **.

მაგალითები

არითმეტიკა

console.log(10 + 3);   // 13
console.log(10 - 3);   // 7
console.log(10 * 3);   // 30
console.log(10 / 3);   // 3.333...
console.log(10 % 3);   // 1  (ნაშთი)
console.log(2 ** 10);  // 1024 (ხარისხი)

ლუწი/კენტი — modulo-თი

let n = 7;
console.log(n % 2 === 0 ? "ლუწი" : "კენტი");

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

+ string-თან აერთებს (კონკატენაცია): "5" + 1 → "51", არა 6.

= += -= *=

Assignment Operators

მინიჭების ოპერატორები: = ანიჭებს, ხოლო +=, -=, *=, /= აერთებენ მოქმედებასა და მინიჭებას.

მაგალითები

შემოკლებული მინიჭება

let score = 10;
score += 5;   // = score + 5
console.log(score);  // 15
score *= 2;
console.log(score);  // 30

== === != !== > <

Comparison Operators

შედარების ოპერატორები აბრუნებენ true/false. ⚠️ == ადარებს მნიშვნელობას ტიპის გადაყვანით, === კი — მნიშვნელობასაც და ტიპსაც (მკაცრი შედარება).

მაგალითები

== vs ===

console.log(5 == "5");   // true  (ტიპი გადაყვანილია)
console.log(5 === "5");  // false (ტიპი განსხვავდება)
console.log(0 == false); // true
console.log(0 === false);// false

✓ საუკეთესო პრაქტიკა

ყოველთვის გამოიყენე === და !== — თავიდან აიცილებ მოულოდნელ ტიპის გადაყვანას.

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

==-ის გამოყენება იწვევს დამაბნეველ შედეგებს ("" == 0 → true).

&& || !

Logical Operators

ლოგიკური ოპერატორები: && (AND — ორივე true), || (OR — ერთი მაინც true), ! (NOT — შებრუნება). იყენებენ short-circuit შეფასებას.

მაგალითები

AND / OR / NOT

let age = 20;
console.log(age > 18 && age < 65);  // true
console.log(age < 13 || age > 65);  // false
console.log(!(age > 18));           // false

Short-circuit default value

let name = "";
let display = name || "სტუმარი";
console.log(display);   // სტუმარი

6 🔄 ტიპის გადაყვანა

ხშირად საჭიროა მნიშვნელობის ერთი ტიპიდან მეორეში გადაყვანა — მაგ. ფორმის ტექსტი რიცხვად. JS-ში ეს ხდება ცხადი (manual) ან არაცხადი (implicit) გზით.

String()

String() — ტექსტად

ნებისმიერ მნიშვნელობას ტექსტად აქცევს. ალტერნატივა: value.toString() ან + "".

Syntax

String(value)

Return Value

ტექსტური (string) წარმოდგენა.

მაგალითები

რიცხვი → ტექსტი

console.log(String(42));        // "42"
console.log(String(true));      // "true"
console.log((123).toString());  // "123"
console.log(typeof String(5));  // string

Number() / parseInt()

Number(), parseInt(), parseFloat()

Number() აქცევს რიცხვად (მკაცრად), parseInt() კითხულობს მთელ რიცხვს ტექსტის დასაწყისიდან, parseFloat() — ათწილადს.

Syntax

Number(value)
parseInt(string, radix)
parseFloat(string)

მაგალითები

ტექსტი → რიცხვი

console.log(Number("42"));      // 42
console.log(Number("42px"));    // NaN
console.log(parseInt("42px"));  // 42
console.log(parseFloat("3.14m"));// 3.14
console.log(Number(""));        // 0

💡 რჩევა: სწრაფი გადაყვანა: +"42" → 42 (unary plus).

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

Number("12px") → NaN; ასეთ შემთხვევაში parseInt სჯობს.
NaN (Not a Number) ნებისმიერ შედარებაში false-ს აბრუნებს — შესამოწმებლად Number.isNaN() გამოიყენე.

Boolean()

Boolean() & Truthy/Falsy

Boolean() აქცევს მნიშვნელობას true/false-ად. Falsy მნიშვნელობებია: false, 0, "", null, undefined, NaN. დანარჩენი ყველაფერი truthy-ა.

მაგალითები

Truthy / Falsy

console.log(Boolean(0));      // false
console.log(Boolean(""));     // false
console.log(Boolean("ა"));    // true
console.log(Boolean([]));     // true (ცარიელი მასივიც truthy-ა!)
console.log(Boolean(null));   // false

💡 რჩევა: ორმაგი !!value სწრაფად აქცევს boolean-ად.

7 🔀 პირობები (Conditionals)

პირობები საშუალებას აძლევენ პროგრამას გადაწყვეტილების მიღებას — კოდის სხვადასხვა ნაწილი შესრულდეს პირობის მიხედვით.

if / else

if / else if / else

if ასრულებს ბლოკს, თუ პირობა true-ა. else if ამოწმებს დამატებით პირობას, else — ყველა დანარჩენ შემთხვევას.

Syntax

if (condition) {
  // ...
} else if (otherCondition) {
  // ...
} else {
  // ...
}

მაგალითები

ქულის შეფასება

შეცვალე score და გაუშვი ხელახლა.

let score = 75;
if (score >= 90) {
  console.log("შესანიშნავი");
} else if (score >= 60) {
  console.log("დამაკმაყოფილებელი");
} else {
  console.log("ჩაიჭრა");
}

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

მინიჭება = შედარების ==/=== ნაცვლად პირობაში.
if (x = 5) ყოველთვის true-ა — სავარაუდოდ გინდოდა ===.

switch

switch ერთ მნიშვნელობას ადარებს მრავალ ვარიანტს. break აუცილებელია, თორემ შესრულება „გადაიღვრება" შემდეგ case-ში. default — როცა არცერთი არ ემთხვევა.

Syntax

switch (value) {
  case "a": ...; break;
  default: ...;
}

მაგალითები

კვირის დღე

let day = 3;
switch (day) {
  case 1: console.log("ორშაბათი"); break;
  case 3: console.log("ოთხშაბათი"); break;
  default: console.log("სხვა დღე");
}

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

break-ის დავიწყება — fall-through ეფექტი (ხშირი ბაგი).

condition ? a : b

Ternary operator

სამეული ოპერატორი არის if/else-ის მოკლე ჩანაწერი ერთ ხაზში. იდეალურია მარტივი არჩევანისთვის.

Syntax

condition ? valueIfTrue : valueIfFalse

მაგალითები

სრულწლოვანება

let age = 17;
let status = age >= 18 ? "სრულწლოვანი" : "არასრულწლოვანი";
console.log(status);

✓ საუკეთესო პრაქტიკა

გამოიყენე მარტივი პირობებისთვის; ჩალაგებული ternary კითხვადობას აზიანებს.

8 🔁 ციკლები (Loops)

ციკლი იმეორებს კოდს მრავალჯერ. JS-ში არსებობს for, while, do...while, for...of და for...in.

for

კლასიკური ციკლი — როცა იცი გამეორებათა რაოდენობა. სამი ნაწილი: დაწყება, პირობა, ბიჯი.

Syntax

for (let i = 0; i < n; i++) { ... }

მაგალითები

დათვლა 1-დან 5-მდე

for (let i = 1; i <= 5; i++) {
  console.log("ნომერი:", i);
}

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

<= vs < არევა — „off-by-one" შეცდომა (ერთით მეტი/ნაკლები ბიჯი).

while / do while

while & do...while

while მეორდება სანამ პირობა true-ა (შესაძლოა საერთოდ არ შესრულდეს). do...while — ჯერ ერთხელ შესრულდება, შემდეგ ამოწმებს პირობას.

Syntax

while (condition) { ... }
do { ... } while (condition);

მაგალითები

while

let n = 3;
while (n > 0) {
  console.log("გაშვება:", n);
  n--;
}

💡 რჩევა: გამოიყენე while, როცა გამეორებათა რაოდენობა წინასწარ უცნობია.

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

პირობის განახლების დავიწყება → უსასრულო ციკლი (აქ 3წმ-ში ავტომატურად შეწყდება).

for...of / for...in ES6

for...of & for...in

for...of გადის მნიშვნელობებზე (მასივი, string). for...in გადის გასაღებებზე (ობიექტის property-ები, მასივის ინდექსები).

მაგალითები

for...of (მნიშვნელობები)

let fruits = ["ვაშლი", "ბანანი", "მსხალი"];
for (let fruit of fruits) {
  console.log(fruit);
}

for...in (გასაღებები)

let user = { name: "ნინო", age: 25 };
for (let key in user) {
  console.log(key, "=", user[key]);
}

💡 რჩევა: მასივებზე გამოიყენე for...of, ობიექტებზე — for...in ან Object.entries().

9 ⚙️ ფუნქციები

ფუნქცია არის მრავალჯერ გამოყენებადი კოდის ბლოკი, რომელიც იღებს მონაცემს (პარამეტრებს) და აბრუნებს შედეგს. ფუნქციები კოდს ორგანიზებულსა და მოკლეს ხდიან.

function name(){}

Function Declaration

ფუნქციის კლასიკური გამოცხადება function საკვანძო სიტყვით. ექვემდებარება hoisting-ს — გამოძახება შესაძლებელია გამოცხადებამდეც.

Syntax

function name(param1, param2) {
  return result;
}

Parameters

პარამეტრი	აღწერა
`param`	შესასვლელი მონაცემი (არგუმენტი)

Return Value

return-ით დაბრუნებული მნიშვნელობა; თუ return არ არის — undefined.

მაგალითები

ჯამის ფუნქცია

function add(a, b) {
  return a + b;
}
console.log(add(3, 5));   // 8
console.log(add(10, 20)); // 30

const f = function(){}

Function Expression

ფუნქცია, რომელიც ცვლადს ენიჭება. არ ექვემდებარება hoisting-ს — გამოძახება მხოლოდ გამოცხადების შემდეგ შეიძლება.

Syntax

const greet = function(name) {
  return "გამარჯობა, " + name;
};

მაგალითები

Function expression

const square = function(x) {
  return x * x;
};
console.log(square(6));   // 36

() => {} ES6

Arrow Function

arrow function არის ფუნქციის მოკლე ჩანაწერი. ერთსტრიქონიანის შემთხვევაში return და { } არ სჭირდება. არ აქვს საკუთარი this (მემკვიდრეობით იღებს გარემოდან).

Syntax

const f = (a, b) => a + b;
const g = x => x * 2;        // ერთი პარამეტრი
const h = () => "გამარჯობა"; // უპარამეტრო

მაგალითები

arrow ვარიაციები

const double = x => x * 2;
const sum = (a, b) => a + b;
const hi = () => "მოგესალმები!";

console.log(double(8));   // 16
console.log(sum(4, 5));   // 9
console.log(hi());

💡 რჩევა: arrow function-ს არ აქვს საკუთარი this — ეს მისი მთავარი თავისებურებაა.

✓ საუკეთესო პრაქტიკა

arrow function იდეალურია მოკლე callback-ებისთვის (map/filter/forEach).

default & ...rest ES6

Parameters, Default & Rest

Default values: პარამეტრს ნაგულისხმევ მნიშვნელობას ვაძლევთ. Rest parameter (...args) ნებისმიერი რაოდენობის არგუმენტს მასივად კრებს.

Syntax

function f(a, b = 10, ...rest) { ... }

მაგალითები

Default value

function greet(name = "სტუმარი") {
  return "გამარჯობა, " + name;
}
console.log(greet());        // გამარჯობა, სტუმარი
console.log(greet("ლუკა"));  // გამარჯობა, ლუკა

Rest parameters

function sumAll(...numbers) {
  let total = 0;
  for (let n of numbers) total += n;
  return total;
}
console.log(sumAll(1, 2, 3, 4, 5));  // 15

10 🔭 Scope & Closures

Scope განსაზღვრავს, სად არის ცვლადი ხელმისაწვდომი. Closure კი ფუნქციის უნარია, „დაიმახსოვროს" გარემო, რომელშიც შეიქმნა.

global / function scope

Global & Function Scope

Global scope — ცვლადი ხელმისაწვდომია ყველგან. Function scope — ცვლადი მხოლოდ ფუნქციის შიგნით არსებობს.

მაგალითები

Function scope

let global = "ყველგან ჩანს";

function test() {
  let local = "მხოლოდ აქ";
  console.log(global);  // ✅
  console.log(local);   // ✅
}
test();
console.log(global);    // ✅
// console.log(local);  // ❌ ReferenceError

✓ საუკეთესო პრაქტიკა

მინიმუმამდე დაიყვანე global ცვლადები — ისინი იწვევენ კონფლიქტებსა და ბაგებს.

block scope ES6

Block Scope

let და const ქმნიან block scope-ს — ცვლადი მხოლოდ უახლოეს { }-ში არსებობს (if, for, ნებისმიერი ბლოკი). var-ს ეს არ ახასიათებს.

მაგალითები

if ბლოკის scope

if (true) {
  let secret = 42;
  console.log(secret);  // 42
}
// console.log(secret); // ❌ ბლოკის გარეთ არ ჩანს

closure

Closures

Closure არის ფუნქცია, რომელიც „იმახსოვრებს" და წვდება გარე (parent) ფუნქციის ცვლადებს მაშინაც კი, როცა გარე ფუნქცია უკვე დასრულდა. ეს JS-ის ერთ-ერთი ყველაზე ძლიერი კონცეფციაა.

მაგალითები

მთვლელი closure-ით

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter());  // 1
console.log(counter());  // 2
console.log(counter());  // 3

💡 რჩევა: თითოეული createCounter() ქმნის ახალ, დამოუკიდებელ count-ს.

🌍 რეალური გამოყენება

Closure-ები გამოიყენება კერძო (private) მონაცემების შესაქმნელად, event handler-ებში, debounce/throttle ფუნქციებსა და მოდულებში.

11 📚 მასივები (Arrays)

მასივი არის მნიშვნელობების დალაგებული სია ერთ ცვლადში. ინდექსი იწყება 0-დან. მასივებს აქვთ უამრავი ძლიერი მეთოდი მონაცემთა დასამუშავებლად.

[ ] (array)

მასივის შექმნა & წვდომა

მასივი იქმნება კვადრატული ფრჩხილებით [ ]. ელემენტებზე წვდომა ხდება ინდექსით (0-დან). .length აბრუნებს სიგრძეს.

Syntax

let arr = [item0, item1, item2];
arr[0]; // პირველი ელემენტი

მაგალითები

შექმნა და წვდომა

let colors = ["წითელი", "მწვანე", "ლურჯი"];
console.log(colors[0]);        // წითელი
console.log(colors.length);    // 3
console.log(colors[colors.length - 1]); // ბოლო: ლურჯი

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

ინდექსი 1-დან ითვლება — არა! ყოველთვის 0-დან იწყება.

push, pop, slice, splice...

ძირითადი მეთოდები

მასივის შეცვლისა და ნაწილების ამოღების მეთოდები: push/pop (ბოლოში დამატება/წაშლა), unshift/shift (დასაწყისში), slice (ასლი), splice (ჩასმა/წაშლა), concat, join, includes, indexOf.

Parameters

პარამეტრი	აღწერა
`push(item)`	ამატებს ელემენტს ბოლოში, აბრუნებს ახალ სიგრძეს
`pop()`	შლის და აბრუნებს ბოლო ელემენტს
`slice(start, end)`	აბრუნებს ნაწილის ასლს (ორიგინალს არ ცვლის)
`splice(i, count, ...items)`	შლის/ამატებს ადგილზე (ცვლის ორიგინალს)
`includes(item)`	true/false — შეიცავს თუ არა

მაგალითები

push / pop / unshift / shift

let stack = [1, 2, 3];
stack.push(4);       // [1,2,3,4]
stack.pop();         // [1,2,3]
stack.unshift(0);    // [0,1,2,3]
stack.shift();       // [1,2,3]
console.log(stack);

slice vs splice

let arr = [10, 20, 30, 40, 50];
console.log(arr.slice(1, 3));  // [20,30] (ასლი)
console.log(arr);              // უცვლელი
arr.splice(1, 2);              // შლის 2 ელემენტს ინდექს 1-დან
console.log(arr);              // [10,40,50]

join & includes

let words = ["სწავლა", "არის", "ძალა"];
console.log(words.join(" "));      // "სწავლა არის ძალა"
console.log(words.includes("ძალა")); // true

map, filter, find, reduce ES6

Modern Methods (map, filter, reduce...)

თანამედროვე, ფუნქციური მეთოდები — მონაცემთა დამუშავების გული: map (გარდაქმნა), filter (გაფილტვრა), find (პოვნა), reduce (დაყვანა ერთ მნიშვნელობამდე), some/every, sort.

Parameters

პარამეტრი	აღწერა
`map(fn)`	ქმნის ახალ მასივს, სადაც თითო ელემენტი გარდაქმნილია
`filter(fn)`	ახალი მასივი მხოლოდ იმ ელემენტებით, სადაც fn → true
`find(fn)`	პირველი ელემენტი, სადაც fn → true
`reduce(fn, init)`	აგროვებს ყველა ელემენტს ერთ მნიშვნელობად

მაგალითები

map — ყველა გააორმაგე

let nums = [1, 2, 3, 4];
let doubled = nums.map(n => n * 2);
console.log(doubled);   // [2,4,6,8]

filter — მხოლოდ ლუწები

let nums = [1, 2, 3, 4, 5, 6];
let even = nums.filter(n => n % 2 === 0);
console.log(even);   // [2,4,6]

reduce — ჯამი

let prices = [10, 25, 5, 60];
let total = prices.reduce((sum, p) => sum + p, 0);
console.log("ჯამი:", total);   // 100

ჯაჭვი: filter + map + reduce

let cart = [
  { name: "წიგნი", price: 20 },
  { name: "კალამი", price: 3 },
  { name: "ჩანთა", price: 50 }
];
let expensiveTotal = cart
  .filter(item => item.price > 5)
  .map(item => item.price)
  .reduce((a, b) => a + b, 0);
console.log("ძვირი ნივთების ჯამი:", expensiveTotal);  // 70

✓ საუკეთესო პრაქტიკა

გამოიყენე map/filter/reduce ციკლების ნაცვლად — კოდი უფრო წაკითხვადი და დეკლარაციულია.
ეს მეთოდები არ ცვლიან ორიგინალ მასივს (გარდა sort/reverse-ისა).

🌍 რეალური გამოყენება

ეს მეთოდები ყველგანაა: პროდუქტების სიის გაფილტვრა, კალათის ჯამი, მონაცემთა ცხრილების გარდაქმნა, API პასუხების დამუშავება.

12 🗃️ ობიექტები (Objects)

ობიექტი ინახავს მონაცემს key: value წყვილებად. ის რეალური ცნებების მოდელირების მთავარი საშუალებაა (მომხმარებელი, პროდუქტი, მანქანა).

{ key: value }

ობიექტის შექმნა, properties & methods

ობიექტი იქმნება ფიგურული ფრჩხილებით { }. თვისებებზე (properties) წვდომა — წერტილით . ან [ ]-ით. ფუნქცია ობიექტში არის method.

Syntax

const obj = {
  key: value,
  method() { ... }
};

მაგალითები

ობიექტი მეთოდით

const user = {
  name: "ნინო",
  age: 25,
  greet() {
    return "გამარჯობა, მე ვარ " + this.name;
  }
};
console.log(user.name);     // ნინო
console.log(user["age"]);   // 25
console.log(user.greet());

💡 რჩევა: this მეთოდის შიგნით მიუთითებს თავად ობიექტზე.

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

არარსებულ property-ზე წვდომა აბრუნებს undefined-ს (არა შეცდომას).

const {a} = obj ES6

Destructuring & Spread

Destructuring ამოიღებს property-ებს ცალკეულ ცვლადებად. Spread (...) აკოპირებს/აერთიანებს ობიექტებს.

მაგალითები

Object destructuring

const user = { name: "ლუკა", age: 30, city: "თბილისი" };
const { name, city } = user;
console.log(name);   // ლუკა
console.log(city);   // თბილისი

Spread — ობიექტების გაერთიანება

const base = { role: "user", active: true };
const extra = { name: "ანა" };
const merged = { ...base, ...extra };
console.log(merged);

13 🔤 სტრიქონები (Strings)

სტრიქონი არის ტექსტი. JS-ს აქვს მრავალი მეთოდი ტექსტის დასამუშავებლად — ძებნა, ჩანაცვლება, დაყოფა, რეგისტრის ცვლა.

length, slice, replace, split...

String მეთოდები

ხშირად გამოყენებადი მეთოდები: length, slice, substring, replace, split, trim, toUpperCase/toLowerCase, includes. სტრიქონები immutable-ია — მეთოდები ახალ სტრიქონს აბრუნებენ.

Parameters

პარამეტრი	აღწერა
`slice(start, end)`	ამოიღებს ნაწილს ინდექსების მიხედვით
`replace(a, b)`	ცვლის პირველ დამთხვევას (regex-ით — ყველას)
`split(sep)`	ჭრის სტრიქონს მასივად გამყოფის მიხედვით
`trim()`	შლის ზედმეტ ცარიელ ადგილს კიდეებიდან

მაგალითები

ძირითადი მეთოდები

let text = "  JavaScript მაგარია  ";
console.log(text.trim());              // "JavaScript მაგარია"
console.log(text.trim().toUpperCase());
console.log(text.includes("მაგარია")); // true
console.log("a,b,c".split(","));       // ["a","b","c"]

slice და replace

let s = "Hello World";
console.log(s.slice(0, 5));        // "Hello"
console.log(s.replace("World", "JS")); // "Hello JS"
console.log(s.length);             // 11

`${value}` ES6

Template Literals

Template literals (backtick `) საშუალებას იძლევა ცვლადების ჩასმა ტექსტში ${ }-ით და მრავალხაზიანი ტექსტი — გაცილებით სუფთა, ვიდრე +-ით კონკატენაცია.

Syntax

const msg = `გამარჯობა, ${name}!`;

მაგალითები

ცვლადის ჩასმა

let name = "ბექა";
let age = 22;
console.log(`${name} არის ${age} წლის.`);
console.log(`მომავალ წელს ${age + 1} გახდება.`);

მრავალხაზიანი

let html = `
  <div>
    <h1>სათაური</h1>
  </div>`;
console.log(html);

✓ საუკეთესო პრაქტიკა

ცვლადებიანი ტექსტისთვის ყოველთვის ამჯობინე template literals — წაკითხვადია და ნაკლები შეცდომაა.

14 🧮 რიცხვები & Math

JavaScript-ში ერთი რიცხვითი ტიპია — number (მთელიც და ათწილადიც). Math ობიექტი იძლევა მათემატიკურ ფუნქციებს.

Math.random(), floor()...

Math ობიექტი

Math არის ჩაშენებული ობიექტი მათემატიკური ოპერაციებისთვის: Math.random() (შემთხვევითი 0–1), Math.floor()/ceil()/round() (დამრგვალება), Math.max()/min(), Math.abs(), Math.sqrt().

Parameters

პარამეტრი	აღწერა
`Math.random()`	შემთხვევითი ათწილადი [0, 1)
`Math.floor(x)`	ამრგვალებს ქვემოთ
`Math.round(x)`	ამრგვალებს უახლოეს მთელამდე
`Math.max(...)`	უდიდესი მნიშვნელობა

მაგალითები

დამრგვალება

console.log(Math.floor(4.9));  // 4
console.log(Math.ceil(4.1));   // 5
console.log(Math.round(4.5));  // 5
console.log(Math.max(3, 7, 2));// 7
console.log(Math.min(3, 7, 2));// 2

შემთხვევითი რიცხვი 1–6 (კამათელი)

გაუშვი რამდენჯერმე — ყოველ ჯერზე სხვა შედეგი.

let dice = Math.floor(Math.random() * 6) + 1;
console.log("კამათელი:", dice);

💡 რჩევა: შემთხვევითი მთელი a-დან b-მდე: Math.floor(Math.random()*(b-a+1))+a.

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

Math.random() არასოდეს აბრუნებს 1-ს — დიაპაზონია [0, 1).

15 📅 თარიღები (Date)

Date ობიექტი მუშაობს თარიღებსა და დროსთან — მიმდინარე დროის მიღება, ფორმატირება, გამოთვლები.

new Date()

Date ობიექტი

new Date() ქმნის თარიღის ობიექტს. მეთოდები: getFullYear(), getMonth() (0–11!), getDate(), getHours(), getDay() (კვირის დღე).

Syntax

const now = new Date();
const specific = new Date("2026-01-15");

მაგალითები

მიმდინარე თარიღი

const now = new Date();
console.log("წელი:", now.getFullYear());
console.log("თვე (0-11):", now.getMonth());
console.log("რიცხვი:", now.getDate());
console.log("ISO:", now.toISOString());

💡 რჩევა: რთული თარიღების სამუშაოდ ხშირად იყენებენ ბიბლიოთეკას (date-fns, Day.js).

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

getMonth() აბრუნებს 0–11-ს (იანვარი = 0). +1 დაამატე ჩვენებისთვის.
თარიღის ფორმატები ბრაუზერებს შორის განსხვავდება — ISO ფორმატი (YYYY-MM-DD) ყველაზე უსაფრთხოა.

16 🌳 DOM შესავალი

DOM (Document Object Model) არის HTML გვერდის ხის სტრუქტურის წარმოდგენა, რომელსაც JavaScript კითხულობს და ცვლის. ეს არის ხიდი JS-სა და გვერდს შორის. ქვემოთ ცოცხალი DOM Playground ნახე!

DOM Tree

რა არის DOM & DOM Tree

როცა ბრაუზერი HTML-ს კითხულობს, ის ქმნის ობიექტების ხეს — DOM Tree. ყოველი ტეგი ხდება node (კვანძი). JavaScript-ს შეუძლია ამ კვანძების პოვნა, შეცვლა, დამატება და წაშლა.

document არის მთელი გვერდის შესვლის წერტილი.

💡 რჩევა: DOM ცოცხალია — JS-ით მისი ცვლილება მყისიერად აისახება გვერდზე.

getElementById, querySelector

ელემენტის შერჩევა

ელემენტის პოვნა DOM-ში: getElementById("id"), querySelector("css selector") (პირველი დამთხვევა), querySelectorAll() (ყველა, NodeList).

Parameters

პარამეტრი	აღწერა
`getElementById(id)`	ერთი ელემენტი id-ით
`querySelector(sel)`	პირველი ელემენტი CSS სელექტორით
`querySelectorAll(sel)`	ყველა ელემენტი (NodeList)

მაგალითები

ცოცხალი შერჩევა — DOM Playground

შეცვალე JS კოდი და დააჭირე Run — შედეგი მარჯვნივ.

HTML

CSS

JavaScript

👁 Live Preview

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

სკრიპტის გაშვება ელემენტის ჩატვირთვამდე → null. სკრიპტი <body>-ის ბოლოს ან DOMContentLoaded-ში დადე.
querySelectorAll აბრუნებს NodeList-ს, არა ნამდვილ მასივს (თუმცა forEach მუშაობს).

17 ✏️ DOM Manipulation

ელემენტის პოვნის შემდეგ მისი შინაარსის, სტილისა და სტრუქტურის შეცვლა შეგვიძლია — სწორედ ეს ხდის გვერდს დინამიკურს.

innerHTML, textContent

შინაარსის შეცვლა

textContent — მხოლოდ ტექსტი (უსაფრთხო). innerHTML — HTML-ის ჩასმა (ფრთხილად, XSS რისკი). .style — CSS-ის შეცვლა. .classList.add/remove/toggle — კლასების მართვა.

მაგალითები

textContent vs innerHTML — DOM Playground

HTML

CSS

JavaScript

👁 Live Preview

✓ საუკეთესო პრაქტიკა

მომხმარებლის შეტანილ მონაცემზე გამოიყენე textContent, არა innerHTML — XSS-ის თავიდან ასაცილებლად.

createElement, append, remove

ელემენტების შექმნა/წაშლა

ახალი ელემენტის შექმნა: document.createElement(), დამატება: appendChild() / append(), წაშლა: element.remove() / removeChild().

მაგალითები

სიის დინამიკური აგება — DOM Playground

HTML

CSS

JavaScript

👁 Live Preview

🌍 რეალური გამოყენება

ასე იქმნება დინამიკური სიები, ცხრილები, ქარდები — მონაცემები (მაგ. API-დან) გარდაიქმნება DOM ელემენტებად.

18 🖱️ მოვლენები (Events)

მოვლენა (event) არის მომხმარებლის ქმედება — დაკლიკება, აკრეფა, გადატარება. addEventListener-ით ვუსმენთ მათ და ვრეაგირებთ.

addEventListener("click")

addEventListener & click

element.addEventListener(type, handler) არეგისტრირებს მოვლენის დამმუშავებელ ფუნქციას. ყველაზე ხშირია click. ერთ ელემენტს რამდენიმე listener-ის მიბმა შეიძლება.

Syntax

el.addEventListener("click", function(event) { ... });

Parameters

პარამეტრი	აღწერა
`type`	მოვლენის ტიპი: "click", "input", "submit"...
`handler`	ფუნქცია, რომელიც მოვლენისას გამოიძახება

მაგალითები

მთვლელი ღილაკი — DOM Playground

დააჭირე ღილაკს preview-ში!

HTML

CSS

JavaScript

👁 Live Preview

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

onclick="handler()" ნაცვლად — addEventListener სჯობს (მრავალი listener, განცალკევება HTML-ისგან).

input, submit, change, keydown...

მოვლენების ტიპები

ხშირი ტიპები: click, input (ტექსტის აკრეფისას), change (ცვლილების დასრულებისას), submit (ფორმა), keydown/keyup (კლავიატურა), mouseover/mouseout (მაუსი).

მაგალითები

ცოცხალი input — DOM Playground

აკრიფე რამე input-ში.

HTML

CSS

JavaScript

👁 Live Preview

19 🎯 Event Object

handler ფუნქცია იღებს event ობიექტს, რომელიც შეიცავს ინფორმაციას მოვლენის შესახებ და მართვის მეთოდებს.

event.target / preventDefault()

event.target, preventDefault, stopPropagation

event.target — ელემენტი, რომელზეც მოხდა მოვლენა. event.preventDefault() — აუქმებს ნაგულისხმევ ქცევას (მაგ. ფორმის გადაგზავნას). event.stopPropagation() — აჩერებს მოვლენის „ამოტივტივებას" მშობელ ელემენტებზე.

მაგალითები

event.target — DOM Playground

დააჭირე სხვადასხვა ღილაკს.

HTML

CSS

JavaScript

👁 Live Preview

💡 რჩევა: preventDefault() ფორმებში თითქმის ყოველთვის საჭიროა, რომ გვერდი არ გადაიტვირთოს.

20 📋 ფორმები (Forms)

ფორმები მომხმარებლისგან მონაცემს იღებენ. JS-ით ვამოწმებთ (validation) და ვამუშავებთ მათ გადაგზავნას.

submit, validation

Validation & Submit

ფორმის submit მოვლენაზე ვამოწმებთ მონაცემს და preventDefault()-ით ვაჩერებთ გადატვირთვას. ვალიდაცია იცავს არასწორი მონაცემისგან.

მაგალითები

ფორმის ვალიდაცია — DOM Playground

შეავსე და დააჭირე „გაგზავნა".

HTML

CSS

JavaScript

👁 Live Preview

✓ საუკეთესო პრაქტიკა

ყოველთვის preventDefault() submit-ზე, თუ AJAX-ით ამუშავებ.
სერვერზეც გადაამოწმე — client-side ვალიდაცია მხოლოდ მოხერხებულობისთვისაა, არა უსაფრთხოებისთვის.

21 💾 Local Storage

localStorage და sessionStorage საშუალებას იძლევიან მონაცემი ბრაუზერში შეინახო. localStorage მუდმივია, sessionStorage — მხოლოდ ჩანართის დახურვამდე.

localStorage.setItem()

localStorage & sessionStorage

localStorage.setItem(key, value) ინახავს, getItem(key) კითხულობს, removeItem(key) შლის. ინახება მხოლოდ ტექსტი — ობიექტებისთვის JSON.stringify/parse გამოიყენე.

Syntax

localStorage.setItem("name", "ნინო");
let name = localStorage.getItem("name");
localStorage.removeItem("name");

მაგალითები

localStorage-ის გამოყენება (კოდი)

ეს მაგალითი რეალურ გვერდზე მუშაობს (sandbox preview-ში localStorage შეზღუდულია).

JavaScript

// მონაცემის შენახვა
localStorage.setItem("theme", "dark");
localStorage.setItem("user", JSON.stringify({ name: "ანა", age: 25 }));

// წაკითხვა
const theme = localStorage.getItem("theme");
const user = JSON.parse(localStorage.getItem("user"));

console.log(theme);     // dark
console.log(user.name); // ანა

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

ობიექტის პირდაპირ შენახვა → ინახება "[object Object]". გამოიყენე JSON.stringify.
localStorage მხოლოდ ტექსტს ინახავს — რიცხვიც კი string-ად ბრუნდება.

🌍 რეალური გამოყენება

localStorage გამოიყენება თემის (dark/light) დასამახსოვრებლად, კალათის შესანახად, „გახსოვდეს" პარამეტრებისთვის — ზუსტად ისე, როგორც ამ გზამკვლევის თემის გადამრთველი.

22 🔗 JSON

JSON (JavaScript Object Notation) არის მონაცემთა გაცვლის ფორმატი — ტექსტი, რომელიც ჰგავს JS ობიექტს. API-ებთან მუშაობის სტანდარტია.

JSON.stringify / parse

JSON.stringify() & JSON.parse()

JSON.stringify(obj) აქცევს ობიექტს JSON ტექსტად (სერვერზე გასაგზავნად ან შესანახად). JSON.parse(text) — პირიქით, ტექსტს ობიექტად.

Syntax

let text = JSON.stringify(object);
let obj = JSON.parse(text);

Parameters

პარამეტრი	აღწერა
`JSON.stringify(value, replacer, space)`	ობიექტი → ტექსტი; `space` ლამაზად ფორმატავს
`JSON.parse(text)`	ტექსტი → ობიექტი

მაგალითები

stringify და parse

const user = { name: "ლუკა", age: 30, hobbies: ["კოდი", "ჭადრაკი"] };

const json = JSON.stringify(user);
console.log(json);    // ტექსტი

const back = JSON.parse(json);
console.log(back.name);          // ლუკა
console.log(back.hobbies[0]);    // კოდი

ლამაზი ფორმატირება

const data = { a: 1, b: { c: 2 } };
console.log(JSON.stringify(data, null, 2));

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

არასწორი JSON-ის parse → SyntaxError. ჩადე try/catch-ში.
JSON-ში გასაღებები ორმაგ ბრჭყალებში უნდა იყოს: {"key": 1}, არა {key: 1}.

🌍 რეალური გამოყენება

Fetch API-ით მიღებული პასუხი თითქმის ყოველთვის JSON-ია — response.json() შიგნით JSON.parse მუშაობს.

23 🛡️ შეცდომების მართვა

შეცდომები გარდაუვალია. try/catch/finally საშუალებას იძლევა პროგრამა არ „ჩამოვარდეს", არამედ შეცდომა დახელოვნებულად დაამუშაოს.

try { } catch { }

try / catch / finally / throw

try ბლოკში სრულდება „სარისკო" კოდი. შეცდომისას მართვა გადადის catch-ში. finally სრულდება ყოველთვის. throw ქმნის საკუთარ შეცდომას.

Syntax

try {
  // სარისკო კოდი
} catch (error) {
  // შეცდომის დამუშავება
} finally {
  // ყოველთვის
}

მაგალითები

try / catch

try {
  let data = JSON.parse("{ არასწორი json }");
  console.log(data);
} catch (error) {
  console.error("დაიჭირა შეცდომა:", error.name);
} finally {
  console.log("finally ყოველთვის სრულდება");
}

throw — საკუთარი შეცდომა

function divide(a, b) {
  if (b === 0) {
    throw new Error("ნულზე გაყოფა აკრძალულია!");
  }
  return a / b;
}
try {
  console.log(divide(10, 2));  // 5
  console.log(divide(10, 0));  // throw
} catch (e) {
  console.error(e.message);
}

✓ საუკეთესო პრაქტიკა

try/catch გამოიყენე იქ, სადაც შეცდომა მოსალოდნელია (JSON, ქსელი, მომხმარებლის შეტანა).
არ დაიჭირო შეცდომა მხოლოდ იმისთვის, რომ უგულებელყო — დაალოგე ან აცნობე მომხმარებელს.

24 ⏳ Asynchronous JS

ასინქრონული კოდი საშუალებას იძლევა ხანგრძლივი ოპერაციები (ქსელი, ტაიმერი) შესრულდეს გვერდის გაყინვის გარეშე. ეს JS-ის ერთ-ერთი ყველაზე მნიშვნელოვანი თემაა.

callback

Callbacks

Callback არის ფუნქცია, რომელიც სხვა ფუნქციას გადაეცემა და მოგვიანებით (მაგ. ოპერაციის დასრულებისას) გამოიძახება. ისტორიულად ასინქრონულობის პირველი გზა იყო, მაგრამ „callback hell"-ს იწვევდა.

მაგალითები

setTimeout callback

console.log("შეკვეთა მიღებულია");
setTimeout(function() {
  console.log("საჭმელი მზადაა! (2წმ შემდეგ)");
}, 2000);
console.log("ველოდებით...");

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

ღრმად ჩალაგებული callback-ები („callback hell") — გამოიყენე Promise/async ნაცვლად.

Promise ES6

Promises

Promise არის ობიექტი, რომელიც წარმოადგენს მომავალში დასასრულებელ ოპერაციას. სამი მდგომარეობა: pending (ელოდება), fulfilled (წარმატება), rejected (შეცდომა). .then() — წარმატებაზე, .catch() — შეცდომაზე.

Syntax

promise
  .then(result => { ... })
  .catch(error => { ... });

მაგალითები

Promise შექმნა და გამოყენება

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("მონაცემი მზადაა!"), 1000);
});

promise
  .then(result => console.log("✓", result))
  .catch(error => console.log("✗", error));

console.log("Promise დაიწყო...");

async / await ES2017

async/await არის Promise-ების სინქრონული გარეგნობის ჩანაწერი — გაცილებით წაკითხვადი. await „ელოდება" Promise-ის შედეგს. await მხოლოდ async ფუნქციაში მუშაობს.

Syntax

async function f() {
  const result = await somePromise;
}

მაგალითები

await — წაკითხვადი ასინქრონი

function wait(ms, value) {
  return new Promise(res => setTimeout(() => res(value), ms));
}

async function run() {
  console.log("დაწყება");
  const a = await wait(500, "ნაბიჯი 1");
  console.log(a);
  const b = await wait(500, "ნაბიჯი 2");
  console.log(b);
  console.log("დასასრული");
}
run();

💡 რჩევა: async ფუნქცია ყოველთვის Promise-ს აბრუნებს.

✓ საუკეთესო პრაქტიკა

await ჩადე try/catch-ში შეცდომების დასაჭერად.
პარალელური ოპერაციებისთვის გამოიყენე Promise.all([...]).

25 🌐 Fetch API

fetch() არის თანამედროვე გზა სერვერთან მონაცემის გასაცვლელად (HTTP requests). აბრუნებს Promise-ს და async/await-თან მშვენივრად მუშაობს.

fetch() GET modern

GET request

fetch(url) აგზავნის GET მოთხოვნას და აბრუნებს Promise-ს Response ობიექტით. response.json() კითხულობს JSON-ს (ისიც Promise).

Syntax

const res = await fetch(url);
const data = await res.json();

მაგალითები

მონაცემის წამოღება API-დან

ცოცხალი fetch (საჭიროა ინტერნეტი; sandbox-მა შეიძლება დაბლოკოს — სრულ გვერდზე მუშაობს).

async function getUser() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const user = await res.json();
    console.log("სახელი:", user.name);
    console.log("ელფოსტა:", user.email);
  } catch (e) {
    console.error("ქსელის შეცდომა:", e.message);
  }
}
getUser();

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

response.json()-ის await-ის დავიწყება — ის თავადაც Promise-ია.
fetch მხოლოდ ქსელის შეცდომაზე rejects-ს — 404/500 სტატუსზე უნდა შეამოწმო response.ok.

fetch() POST

POST request

მონაცემის გასაგზავნად გამოიყენება მეორე არგუმენტი: method, headers და body (JSON ტექსტად).

Syntax

fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});

მაგალითები

POST მონაცემის გაგზავნა

async function createPost() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title: "ჩემი პოსტი", body: "შინაარსი" })
  });
  const data = await res.json();
  console.log("შეიქმნა ID:", data.id);
}
createPost();

🌍 რეალური გამოყენება

POST-ით იგზავნება ფორმის მონაცემი, ახალი ჩანაწერი, ავტორიზაცია — ნებისმიერი მონაცემი, რომელიც სერვერზე უნდა შეიქმნას.

26 📦 Modules

მოდულები საშუალებას იძლევიან კოდი ფაილებად დაყო და ერთმანეთს გაუზიარო export/import-ით. ეს კოდს ორგანიზებულსა და მრავალჯერ გამოყენებადს ხდის.

export / import ES6

export ხდის ფუნქციას/ცვლადს სხვა ფაილისთვის ხელმისაწვდომს; import კი შემოაქვს. არსებობს named და default export. HTML-ში მოდული ერთვის <script type="module">-ით.

Syntax

// math.js
export function add(a, b) { return a + b; }
export const PI = 3.14;

// app.js
import { add, PI } from "./math.js";

მაგალითები

Named & default export (კოდი)

მოდულები ცალკე ფაილებს საჭიროებენ — ქვემოთ სტრუქტურის ნიმუშია.

JavaScript

// ── utils.js ──
export const greet = name => "გამარჯობა, " + name;
export default function() { return "default export"; }

// ── main.js ──
import myDefault, { greet } from "./utils.js";
console.log(greet("ნინო"));

✓ საუკეთესო პრაქტიკა

თითო ფაილი — თითო პასუხისმგებლობა (single responsibility).
default export თითო ფაილზე ერთი, named — რამდენიც გინდა.

27 🏗️ Classes

კლასი არის „შაბლონი" ობიექტების შესაქმნელად. ის OOP-ის (ობიექტზე ორიენტირებული პროგრამირების) საფუძველია JS-ში.

class { constructor() } ES6

class & constructor

class განსაზღვრავს ობიექტის შაბლონს. constructor გამოიძახება new-ით ობიექტის შექმნისას და აყენებს საწყის თვისებებს. მეთოდები კლასის შიგნით იწერება.

Syntax

class Name {
  constructor(param) { this.prop = param; }
  method() { ... }
}
const obj = new Name(value);

მაგალითები

Person კლასი

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    return `გამარჯობა, მე ვარ ${this.name}, ${this.age} წლის.`;
  }
}
const p = new Person("ლუკა", 28);
console.log(p.greet());
console.log(p.name);

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

new-ის დავიწყება ობიექტის შექმნისას → this არასწორად მუშაობს.

extends / super ES6

Inheritance (extends / super)

extends ქმნის ქვეკლასს, რომელიც მემკვიდრეობით იღებს მშობელი კლასის თვისებებსა და მეთოდებს. super() იძახებს მშობლის constructor-ს.

მაგალითები

Animal → Dog

class Animal {
  constructor(name) { this.name = name; }
  speak() { return this.name + " ხმას გამოსცემს"; }
}
class Dog extends Animal {
  speak() { return this.name + " ყეფს: ჰავ!"; }
}
const a = new Animal("კატა");
const d = new Dog("რექსი");
console.log(a.speak());
console.log(d.speak());

28 🧩 OOP კონცეფციები

ობიექტზე ორიენტირებული პროგრამირების 4 ბურჯი: Encapsulation, Inheritance, Polymorphism, Abstraction.

OOP principles

4 ბურჯი

Encapsulation — მონაცემისა და მეთოდების ერთად შეფუთვა; დეტალების დამალვა (private #field).
Inheritance — კლასი იღებს სხვის თვისებებს (extends).
Polymorphism — ერთი მეთოდი სხვადასხვა კლასში სხვადასხვაგვარად მუშაობს (method override).
Abstraction — სირთულის დამალვა მარტივი ინტერფეისის უკან.

მაგალითები

Encapsulation — private ველი

class BankAccount {
  #balance = 0;            // private
  deposit(amount) { this.#balance += amount; }
  getBalance() { return this.#balance; }
}
const acc = new BankAccount();
acc.deposit(100);
console.log(acc.getBalance());  // 100
// console.log(acc.#balance);   // ❌ private — გარედან არ ჩანს

Polymorphism

class Shape { area() { return 0; } }
class Circle extends Shape {
  constructor(r) { super(); this.r = r; }
  area() { return Math.PI * this.r ** 2; }
}
class Square extends Shape {
  constructor(s) { super(); this.s = s; }
  area() { return this.s ** 2; }
}
const shapes = [new Circle(5), new Square(4)];
shapes.forEach(s => console.log(s.area().toFixed(2)));

29 ✨ Modern JavaScript

ES6+ სინტაქსი, რომელიც კოდს მოკლეს, წაკითხვადსა და უსაფრთხოს ხდის: destructuring, spread, optional chaining, nullish coalescing, template literals.

const {a} = obj ES6

Destructuring

Destructuring ამოიღებს მნიშვნელობებს მასივიდან ან ობიექტიდან ცალკეულ ცვლადებად — ერთ ხაზში.

მაგალითები

array & object destructuring

const [first, second] = [10, 20];
console.log(first, second);   // 10 20

const { name, age } = { name: "ანა", age: 22 };
console.log(name, age);       // ანა 22

...spread ES6

Spread & Rest (...)

... spread „გაშლის" მასივს/ობიექტს; rest კი აერთიანებს. იყენებენ ასლისთვის, გაერთიანებისა და არგუმენტებისთვის.

მაგალითები

spread

const a = [1, 2, 3];
const b = [...a, 4, 5];      // ასლი + დამატება
console.log(b);              // [1,2,3,4,5]

const merged = { ...{x:1}, ...{y:2} };
console.log(merged);         // {x:1, y:2}

console.log(Math.max(...a)); // 3

?. ES2020

Optional Chaining (?.)

?. უსაფრთხოდ წვდება ღრმად ჩალაგებულ property-ს — თუ რომელიმე რგოლი null/undefined-ია, აბრუნებს undefined-ს შეცდომის ნაცვლად.

მაგალითები

უსაფრთხო წვდომა

const user = { profile: { name: "ბექა" } };
console.log(user.profile?.name);      // ბექა
console.log(user.address?.city);      // undefined (შეცდომის გარეშე)
console.log(user.address?.city ?? "უცნობი"); // უცნობი

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

?.-ის გარეშე user.address.city → TypeError, თუ address არ არსებობს.

?? ES2020

Nullish Coalescing (??)

?? აბრუნებს მარჯვენა მნიშვნელობას მხოლოდ მაშინ, როცა მარცხენა null ან undefined-ია. განსხვავდება ||-სგან, რომელიც ყველა falsy-ზე (0, "", false) მუშაობს.

მაგალითები

?? vs ||

let count = 0;
console.log(count || 10);   // 10  (0 falsy-ა)
console.log(count ?? 10);   // 0   (0 არც null, არც undefined)

let name = null;
console.log(name ?? "სტუმარი"); // სტუმარი

💡 რჩევა: როცა 0 ან "" ვალიდური მნიშვნელობაა, გამოიყენე ??, არა ||.

30 🧭 Browser APIs

ბრაუზერი იძლევა ჩაშენებულ API-ებს: navigator, Geolocation, Clipboard, URL, History. (ეს მაგალითები რეალურ ბრაუზერშია გასაშვები — sandbox preview-ში ნაწილი შეზღუდულია.)

navigator / clipboard

navigator, Clipboard, URL

navigator — ინფორმაცია ბრაუზერსა და მოწყობილობაზე. navigator.clipboard.writeText() — ბუფერში კოპირება. navigator.geolocation — მდებარეობა (ნებართვით). URL და URLSearchParams — მისამართებთან მუშაობა. history.pushState() — გვერდის მისამართის ცვლა გადატვირთვის გარეშე.

მაგალითები

URL parsing (კოდი)

JavaScript

const url = new URL("https://shop.ge/search?q=laptop&page=2");
console.log(url.hostname);                  // shop.ge
console.log(url.searchParams.get("q"));     // laptop
console.log(url.searchParams.get("page"));  // 2

Clipboard & navigator (ბრაუზერში)

JavaScript

// ბუფერში კოპირება (ნებართვას საჭიროებს)
navigator.clipboard.writeText("დაკოპირებული ტექსტი");

// ბრაუზერის ენა
console.log(navigator.language);   // მაგ. "ka-GE"

💡 რჩევა: Geolocation, Clipboard და Notifications მომხმარებლის ნებართვას საჭიროებენ.

31 ⚡ Performance

სწრაფი და გამართული აპლიკაციისთვის მნიშვნელოვანია ხშირი მოვლენების შეზღუდვა (debounce/throttle) და რესურსების lazy loading.

debounce / throttle

Debounce & Throttle

Debounce — ფუნქცია შესრულდება მხოლოდ მას შემდეგ, რაც მოვლენა შეწყდა (მაგ. ძებნა აკრეფის დასრულებისას). Throttle — ფუნქცია შესრულდება მაქსიმუმ ერთხელ მოცემულ ინტერვალში (მაგ. scroll). ორივე ამცირებს ზედმეტ გამოძახებებს.

მაგალითები

debounce იმპლემენტაცია

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const search = debounce(q => console.log("ვეძებ:", q), 300);
// სწრაფი ზედიზედ გამოძახება — მხოლოდ ბოლო შესრულდება
search("a"); search("ab"); search("abc");

💡 რჩევა: ეს გზამკვლევი თავად იყენებს debounce-ს ძებნაში და IntersectionObserver-ს playground-ების lazy ჩასატვირთად.

🌍 რეალური გამოყენება

Debounce — ძებნის input-ზე (API-ს ყოველ ასოზე არ დაარტყა). Throttle — scroll/resize მოვლენებზე. Lazy loading — სურათები/კომპონენტები იტვირთება მხოლოდ ხილვადობისას (IntersectionObserver).

32 🔒 Security

ფრონტენდის უსაფრთხოების საფუძვლები — განსაკუთრებით XSS (Cross-Site Scripting) და DOM injection-ისგან დაცვა.

XSS / safe coding

XSS & DOM Injection

XSS ხდება, როცა მომხმარებლის შეტანილ მონაცემს innerHTML-ით პირდაპირ ჩასვამ — ბოროტმოქმედს შეუძლია <script> შემოაპაროს. დაცვა: გამოიყენე textContent, არა innerHTML; მონაცემი ვალიდირდეს და escape-დეს.

მაგალითები

საშიში vs უსაფრთხო (კოდი)

JavaScript

const userInput = "<img src=x onerror=alert(1)>";

// ❌ საშიში — კოდი შესრულდება
// element.innerHTML = userInput;

// ✅ უსაფრთხო — მხოლოდ ტექსტად ჩაისმება
// element.textContent = userInput;

console.log("გამოიყენე textContent მომხმარებლის მონაცემზე");

✓ საუკეთესო პრაქტიკა

მომხმარებლის შეტანილზე ყოველთვის textContent, არა innerHTML.
სერვერზეც გადაამოწმე — client-side შემოწმება გვერდს ვერ იცავს.
არ ენდო URL-ის პარამეტრებსა და მომხმარებლის input-ს.

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

innerHTML += userInput — კლასიკური XSS ხვრელი.

33 🏅 Best Practices

სუფთა, წაკითხვადი და მხარდასაჭერი კოდის წერის პრინციპები — სახელდება, ორგანიზება, თანმიმდევრულობა.

clean code

Clean Code & Naming

კარგი კოდი თავის თავს ხსნის. გამოიყენე აღწერითი სახელები, მცირე ფუნქციები (თითო — ერთი საქმე), თავი აარიდე გამეორებას (DRY).

მაგალითები

ცუდი vs კარგი სახელდება

// ❌ ცუდი
let d = 86400;
function f(x) { return x * d; }

// ✅ კარგი
const SECONDS_IN_DAY = 86400;
function daysToSeconds(days) {
  return days * SECONDS_IN_DAY;
}
console.log(daysToSeconds(2));  // 172800

✓ საუკეთესო პრაქტიკა

ცვლადებს დაარქვი რას ნიშნავენ, არა რა ტიპისაა.
გამოიყენე const ნაგულისხმევად, let საჭიროებისას, var — არასოდეს.
ფუნქცია მცირე და ერთ ამოცანაზე ორიენტირებული იყოს.
თანმიმდევრული სტილი — გამოიყენე Prettier/ESLint.

organization

Code Organization

კოდი დაყავი ლოგიკურ მოდულებად, თითო ფაილი ერთი პასუხისმგებლობით. გამოყავი მონაცემი, ლოგიკა და გარეგნობა — ზუსტად ისე, როგორც ეს მოდულია აგებული (data / includes / js).

✓ საუკეთესო პრაქტიკა

დააჯგუფე დაკავშირებული ფუნქციები ერთ მოდულში.
მონაცემი გამოყავი კოდისგან (data-driven არქიტექტურა).
დაწერე კომენტარი რატომ-ზე, არა რა-ზე (კოდი თავად ხსნის რას აკეთებს).

🌍 რეალური გამოყენება

ეს გზამკვლევი თავად არის მაგალითი: კონტენტი data/js_data.php-შია, რენდერი includes/-ში, ქცევა js/modules/-ში — სუფთა გამიჯვნა.

JavaScript — ინტერაქტიული ქართულენოვანი გზამკვლევი

1 📘 JavaScript შესავალი

მაგალითები

პირველი ცოცხალი კოდი

დაკავშირებული თემები:

დაკავშირებული თემები:

დაკავშირებული თემები:

მაგალითები

თანმიმდევრობა და setTimeout

დაკავშირებული თემები:

დაკავშირებული თემები:

2 🚀 პირველი პროგრამა

Syntax

Parameters

მაგალითები

Hello World

რამდენიმე მნიშვნელობა

console.error და warn

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

დაკავშირებული თემები:

3 📦 ცვლადები (Variables)

Syntax

მაგალითები

შექმნა და შეცვლა

Block scope

✓ საუკეთესო პრაქტიკა

დაკავშირებული თემები:

Syntax

მაგალითები

მუდმივი

const ობიექტი მაინც იცვლება

✓ საუკეთესო პრაქტიკა

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

დაკავშირებული თემები:

Syntax

მაგალითები

Hoisting დემონსტრაცია

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

დაკავშირებული თემები:

4 🔢 მონაცემთა ტიპები

მაგალითები

ყველა პრიმიტივი და typeof

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

დაკავშირებული თემები:

მაგალითები

Reference vs Value

დაკავშირებული თემები:

5 ➗ ოპერატორები

მაგალითები

არითმეტიკა

ლუწი/კენტი — modulo-თი

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

დაკავშირებული თემები:

მაგალითები

შემოკლებული მინიჭება

დაკავშირებული თემები:

მაგალითები

== vs ===

✓ საუკეთესო პრაქტიკა

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

დაკავშირებული თემები:

მაგალითები

AND / OR / NOT

Short-circuit default value

დაკავშირებული თემები:

6 🔄 ტიპის გადაყვანა

Syntax

Return Value

მაგალითები

რიცხვი → ტექსტი

დაკავშირებული თემები:

Syntax

მაგალითები

ტექსტი → რიცხვი

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

დაკავშირებული თემები:

მაგალითები

Truthy / Falsy

დაკავშირებული თემები:

7 🔀 პირობები (Conditionals)