JavaScript — საიტის დამზადება ინტერაქტიულობით

JavaScript — საიტის დამზადება ინტერაქტიულობით

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

JavaScript რა არის?

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

  • ღილაკებზე რეაგირება
  • ფორმების შემოწმება
  • ანიმაციების შექმნა
  • სერვერიდან მონაცემების ჩატვირთვა
  • კონტენტის დინამიურად შეცვლა

JavaScript-ის HTML-თან დაკავშირება

<body>
  <h1>ჩემი საიტი</h1>

  <!-- JavaScript ფაილი ბოლოს ჩავრთოთ -->
  <script src="script.js"></script>
</body>

JavaScript-ის საფუძვლები

ცვლადები:

let სახელი = "გიორგი";
const წელი = 2024;
var ასაკი = 25; // ძველი სტილი, ნაკლებად გამოიყენება

ფუნქციები:

function მისალმება(სახელი) {
  return "გამარჯობა, " + სახელი + "!";
}

console.log(მისალმება("ნინო")); // გამარჯობა, ნინო!

პირობითი ოპერატორები:

let ასაკი = 20;

if (ასაკი >= 18) {
  console.log("სრულწლოვანია");
} else {
  console.log("არასრულწლოვანია");
}

DOM — გვერდის მართვა

DOM (Document Object Model) არის ის, რითაც JavaScript “საუბრობს” HTML-თან. საიტის დამზადებისას DOM-ის გაგება აუცილებელია:

// ელემენტის პოვნა
const სათაური = document.getElementById("main-title");

// ტექსტის შეცვლა
სათაური.textContent = "ახალი სათაური!";

// სტილის შეცვლა
სათაური.style.color = "red";

// ახალი ელემენტის დამატება
const პარაგრაფი = document.createElement("p");
პარაგრაფი.textContent = "ეს ახალი პარაგრაფია.";
document.body.appendChild(პარაგრაფი);

Events — მოვლენებზე რეაგირება

const ღილაკი = document.getElementById("my-btn");

ღილაკი.addEventListener("click", function() {
  alert("ღილაკს დააჭირეთ!");
});

// ფორმის შემოწმება
const ფორმა = document.getElementById("contact-form");

ფორმა.addEventListener("submit", function(e) {
  e.preventDefault(); // გვერდის გადატვირთვის შეჩერება
  console.log("ფორმა გაიგზავნა!");
});

პრაქტიკული მაგალითი — სიბნელის რეჟიმი

const ღილაკი = document.getElementById("dark-mode-btn");

ღილაკი.addEventListener("click", function() {
  document.body.classList.toggle("dark-mode");
});

.dark-mode {
  background-color: #1a1a2e;
  color: #ffffff;
}

დამწყებთათვის პრაქტიკული რჩევები

  1. Console გამოიყენე — console.log() შენი საუკეთესო მეგობარია
  2. F12 DevTools — ბრაუზერში JavaScript-ი პირდაპირ სცადე
  3. შეცდომები წაიკითხე — Console-ში ნაჩვენები შეცდომები ძალიან ინფორმატიულია
  4. MDN Documentation — developer.mozilla.org — JavaScript-ის საუკეთესო სახელმძღვანელო

შეჯამება

JavaScript არის საიტის დამზადების მესამე და ყველაზე მძლავრი ინსტრუმენტი. HTML + CSS + JavaScript — ეს სამეული საკმარისია ნებისმიერი პროფესიონალური საიტის დასამზადებლად. შემდეგი ნაბიჯი — React.js ან WordPress-ის გაღრმავება!


Tags :