JavaScript nədir və nə üçün istifadə olunur?

Frontend proqramlaşdırmaya başlayanda HTML və CSS-dən sonra qarşımıza çıxan əsas texnologiyalardan biri JavaScript olur. HTML səhifənin strukturunu yaradır, CSS həmin strukturun görünüşünü formalaşdırır, JavaScript isə səhifəyə interaktivlik və dinamik davranış əlavə etməyə imkan verir.

Bəs JavaScript nədir, nə üçün istifadə olunur və real veb saytda hansı işi görür?

Sadə bir nümunə düşünək. Saytda “Menyunu aç” düyməsi var. İstifadəçi həmin düyməyə klik etdikdə menyunun açılması üçün proqram məntiqinə ehtiyac yaranır. Bu tip davranışlar JavaScript ilə yaradıla bilər.

Frontend-in əsaslarını ardıcıllıqla öyrənirsinizsə, əvvəlcə HTML nədir və necə işləyir? və CSS nədir və saytda nə üçün istifadə olunur? yazılarını oxumaq JavaScript-in rolunu daha rahat başa düşməyə kömək edəcək. Hər iki məqalə hazırda saytda canlıdır.

JavaScript nədir?

JavaScript veb səhifələrdə proqram məntiqi və interaktiv funksionallıq yaratmaq üçün geniş istifadə olunan proqramlaşdırma dilidir.

HTML ilə belə bir button yarada bilərik:

<button>Ətraflı bax</button>

Bu mərhələdə button səhifədə görünür, amma klik etdikdə hansı əməliyyatın baş verməli olduğunu hələ müəyyən etməmişik. JavaScript vasitəsilə istifadəçinin klik etməsinə reaksiya verə bilərik.

Sadə nümunə:

const button = document.querySelector("button");

button.addEventListener("click", function () {

alert("Button klikləndi!");

});

Burada JavaScript button-u tapır və istifadəçinin klik hadisəsini izləyir. Klik baş verdikdə müəyyən etdiyimiz funksiya işləyir.

MDN JavaScript-i veb səhifələrdə mürəkkəb funksiyaların yaradılmasına imkan verən scripting dili kimi izah edir. JavaScript yalnız brauzerdə istifadə olunmur, amma frontend öyrənən biri üçün ilk qarşılaşdığı istifadə sahəsi adətən veb səhifələr olur.

HTML, CSS və JavaScript arasında fərq nədir?

Frontend öyrənərkən bu üç texnologiyanın rolunu bir-birindən ayırmaq vacibdir.

Sadə formada belə düşünə bilərik:

1. HTML → struktur
2. CSS → görünüş
3. JavaScript → davranış

Məsələn, bir modal pəncərə hazırladığımızı düşünək.

HTML modalın daxilində hansı elementlərin olduğunu müəyyən edir:

• Başlıq, mətn, şəkil və button.
• CSS modalın necə göründüyünü müəyyən edir:
• Ölçüsü, rəngi, yerləşməsi, background-u və animasiyası.
• JavaScript isə modalın nə zaman açılıb bağlanacağını idarə edə bilər.
• İstifadəçi button-a klik edir → modal açılır.
• Close button-a klik edir → modal bağlanır.

Bu üç texnologiyanın birlikdə istifadəsi frontend development-in əsasını təşkil edir.

Frontend sahəsinin ümumi iş prinsipi ilə tanış olmaq istəyirsinizsə, Frontend Developer Kimdir və Nə İş Görür? məqaləsində frontend developer-in HTML, CSS, JavaScript və digər texnologiyalarla hansı işləri gördüyünü ayrıca izah etmişəm.

JavaScript nə üçün istifadə olunur?

JavaScript-in istifadə sahəsi kifayət qədər genişdir. Frontend tərəfdə JavaScript vasitəsilə istifadəçinin səhifə ilə qarşılıqlı əlaqəsinə reaksiya vermək və səhifənin məzmununu dinamik şəkildə dəyişmək mümkündür.

Məsələn:

• menyunu açıb bağlamaq;
• modal pəncərə göstərmək;
• slider idarə etmək;
• form məlumatlarını yoxlamaq;
• tab-lar arasında keçid etmək;
• accordion açmaq;
• istifadəçinin kliklərinə reaksiya vermək;
• API-dən məlumat almaq;
• səhifədə məlumatı dinamik dəyişmək;
• məhsulları filter etmək;
• axtarış funksiyası yaratmaq;
• səbət sisteminin frontend hissəsini idarə etmək;
• animasiyalar və interaktiv UI elementləri yaratmaq.

Bu səbəbdən JavaScript yalnız kiçik effektlər yaratmaq üçün istifadə olunan texnologiya deyil. Müasir frontend development-də əsas proqramlaşdırma dillərindən biridir.

JavaScript necə işləyir?

Brauzerdə JavaScript kodu JavaScript engine tərəfindən icra olunur. Developer olaraq bizim üçün başlanğıc mərhələdə əsas məsələ engine-in bütün daxili detallarını öyrənmək deyil. Əvvəlcə JavaScript kodunun səhifədəki məlumat və elementlərlə necə işlədiyini başa düşmək kifayətdir.

Məsələn:

const name = "Emil";

console.log(name);

Burada name adlı dəyişən yaradırıq və ona "Emil" dəyərini veririk.

Daha sonra həmin məlumatı console-da göstəririk.

Başqa nümunə:

const price = 100;

const discount = 20;

const finalPrice = price - discount;

console.log(finalPrice);

Nəticə:

80

HTML və CSS-də əsasən struktur və vizual qaydalarla işləyirdiksə, JavaScript-də artıq dəyişənlər, şərtlər, funksiyalar, array-lər, object-lər və digər proqramlaşdırma anlayışları ilə işləməyə başlayırıq.

JavaScript dəyişənləri nədir?

Proqram daxilində məlumat saxlamaq üçün dəyişənlərdən istifadə edilir.

Məsələn:

let age = 25;

və ya:

const name = "Emil";

Burada age və name dəyişənlərdir.

JavaScript-də dəyişən yaratmaq üçün let, const və köhnə kodlarda var ilə qarşılaşa bilərsiniz. Başlanğıc üçün let və const arasındakı əsas fərqi anlamaq kifayətdir.

const dəyişəninə başqa dəyər assign etmək planlaşdırılmırsa istifadə edilə bilər.

Məsələn:

const siteName = "EmilGasarayev.com";

Dəyər sonradan dəyişəcəksə:

let count = 0;

count = 1;

Bu anlayışlar JavaScript öyrənərkən qarşılaşacağınız ən fundamental mövzulardandır.

JavaScript function nədir?

Function müəyyən işi yerinə yetirən və lazım olduqda yenidən çağırıla bilən kod blokudur.

Sadə nümunə:

function sayHello() {

console.log("Salam!");

}

Function-u işlətmək üçün:

sayHello();

Nəticə:

Salam!

Function-a məlumat da ötürə bilərik:

function sayHello(name) {

console.log("Salam " + name);

}

sayHello("Emil");

Nəticə:

Salam Emil

Real layihələrdə function-lar kodun daha məntiqli hissələrə bölünməsinə və eyni funksionallığın təkrar istifadə edilməsinə kömək edir.

JavaScript-də şərtlər necə işləyir?

Bəzən proqram müəyyən şərtə görə fərqli əməliyyat etməlidir.

Məsələn, istifadəçinin yaşı 18 və ya daha çoxdursa bir mesaj, əks halda başqa mesaj göstərə bilərik.

const age = 20;

if (age >= 18) {

console.log("Giriş mümkündür");

} else {

console.log("Giriş mümkün deyil");

}

Burada JavaScript əvvəlcə şərti yoxlayır.

Şərt doğrudursa if daxilindəki kod, doğru deyilsə else daxilindəki kod işləyir.

Bu sadə məntiq real layihələrdə çox fərqli formada istifadə olunur.

Məsələn:

• İstifadəçi login olub?
• Səbətdə məhsul varmı?
• Form sahəsi boşdur?
• API-dən məlumat gəlib?
• Button aktiv olmalıdır?

Bu qərarların hamısında proqram məntiqindən istifadə olunur.

DOM nədir və JavaScript DOM ilə necə işləyir?

JavaScript-i frontend üçün vacib edən əsas mövzulardan biri DOM ilə işləyə bilməsidir.

DOM — Document Object Model ifadəsinin qısaltmasıdır.

Brauzer HTML sənədini JavaScript-in işləyə biləcəyi obyekt strukturu şəklində təqdim edir. JavaScript bu struktur vasitəsilə səhifədəki elementləri tapa, dəyişə və onlarla qarşılıqlı əlaqə qura bilər.

Məsələn, HTML-də belə elementimiz olsun:

<h2 id="title">JavaScript öyrənirəm</h2>

JavaScript ilə həmin elementi tapa bilərik:

const title = document.querySelector("#title");

Daha sonra mətnini dəyişə bilərik:

title.textContent = "JavaScript öyrənməyə başladım";

Beləliklə səhifəni yenidən əl ilə HTML yazmadan JavaScript vasitəsilə dinamik dəyişmək mümkündür.

Event nədir?

Event istifadəçinin və ya brauzerin həyata keçirdiyi müəyyən hadisədir.

Məsələn:

• button-a klik;
• form göndərilməsi;
• input-a məlumat yazılması;
• mouse hərəkəti;
• klaviaturada düymənin basılması;
• səhifənin yüklənməsi.

JavaScript bu event-ləri dinləyə və hadisə baş verdikdə müəyyən kod işlədə bilər.

Məsələn:

const button = document.querySelector("#menu-button");

button.addEventListener("click", function () {

console.log("Menyu açıldı");

});

Bu məntiq real frontend interfeyslərində daim istifadə olunur.

Dropdown, modal, mobile menu, accordion və bir çox UI elementi event-lər üzərində qurula bilər.

JavaScript ilə form yoxlaması necə edilir?

Tutaq ki, əlaqə formasında istifadəçi adını yazmalıdır.

HTML:

<input id="name" type="text">

<button id="submit">Göndər</button>

JavaScript ilə input-un boş olub-olmadığını yoxlaya bilərik.

const input = document.querySelector("#name");

if (input.value === "") {

console.log("Adınızı daxil edin");

}

Real layihədə validation bundan daha geniş ola bilər.

Məsələn:

• Email düzgündür?
• Telefon nömrəsi tələb olunan formata uyğundur?
• Password kifayət qədər uzundur?
• Bütün tələb olunan sahələr doldurulub?

Frontend validation istifadəçiyə səhvi daha tez göstərməyə kömək edə bilər. Bununla belə təhlükəsizlik və məlumatın doğrulanması üçün server tərəfdə validation da ayrıca vacibdir.

JavaScript ilə API-dən məlumat almaq mümkündür?

Bəli. Müasir frontend development-də JavaScript-in vacib istifadə sahələrindən biri API ilə işləməkdir.

Məsələn, bir e-commerce saytında məhsullar serverdən API vasitəsilə gələ bilər. JavaScript həmin məlumatı alıb səhifədə göstərə bilər.

Sadə fetch nümunəsi:

fetch("https://example.com/api/products")

.then(response => response.json())

.then(data => {

console.log(data);

});

Real layihələrdə API vasitəsilə:

• məhsullar;
• istifadəçi məlumatları;
• blog yazıları;
• hava məlumatları;
• sifarişlər;
• axtarış nəticələri

kimi müxtəlif məlumatlar frontend-ə gətirilə bilər.

JavaScript-i yaxşı başa düşmək React kimi frontend texnologiyalarını öyrənərkən də bu səbəbdən vacibdir.

JavaScript və React arasında əlaqə nədir?

React ayrıca proqramlaşdırma dili deyil. React JavaScript əsasında işləyən UI kitabxanasıdır. Ona görə React öyrənməyə başlamazdan əvvəl JavaScript-in əsaslarını bilmək vacibdir.

Xüsusilə bu mövzular React üçün faydalıdır:

• variables;
• functions;
• arrow functions;
• arrays;
• objects;
• map;
• filter;
• destructuring;
• spread operator;
• modules;
• promises;
• async/await.

JavaScript bazası zəif olduqda React-də qarşılaşdığınız problemin React-dən, yoxsa JavaScript-dən qaynaqlandığını ayırmaq çətinləşə bilər.

Buna görə əvvəl JavaScript fundamental mövzularını öyrənmək, sonra React-ə keçmək daha məntiqli ardıcıllıqdır.

JavaScript veb sayt hazırlanmasında hansı rol oynayır?

Real veb sayt hazırlanması yalnız HTML və CSS-dən ibarət deyil. HTML səhifənin strukturunu, CSS görünüşünü qurduqdan sonra istifadəçinin interfeyslə qarşılıqlı əlaqəsi üçün çox vaxt JavaScript lazım olur.

Məsələn, sayt daxilində:

• mobile menu,
• filter sistemi,
• form validation,
• slider,
• modal,
• dynamic search,
• API inteqrasiyası

kimi funksiyalar JavaScript ilə hazırlana bilər.

JavaScript buna görə frontend development mərhələsinin əsas hissələrindən biridir.

Bir veb layihənin planlama, UX/UI, frontend, backend, SEO, test və yayımlama mərhələlərinin bütöv şəkildə necə birləşdiyini saytların hazırlanması mərhələləri məqaləsində daha geniş izah etmişəm. Həmin səhifədə frontend mərhələsində HTML, CSS, JavaScript, React və Next.js kimi texnologiyaların istifadə oluna biləcəyi də göstərilir.

JavaScript və SEO arasında əlaqə varmı?

JavaScript və SEO əlaqəsi xüsusilə müasir frontend saytlarında vacib mövzudur.

Google JavaScript-i emal edə bilir, lakin JavaScript əsaslı səhifələrdə crawling, rendering və indexləmə məsələlərini nəzərə almaq lazımdır. Google-un JavaScript SEO sənədlərində də JavaScript tətbiqlərinin crawl və index olunması üçün texniki tövsiyələr verilir.

Frontend tərəfdə əsas məqsəd vacib məzmunun və linklərin axtarış sistemi üçün əlçatan qalmasını təmin etməkdir. JavaScript-dən həddindən artıq və ya düzgün olmayan istifadə bəzi hallarda səhifə performansına da təsir edə bilər.

Bu səbəbdən frontend hazırlayarkən yalnız funksionallığa yox, aşağıdakılara da baxmaq lazımdır:

• əsas məzmunun render olunması;
• linklərin crawl edilə bilməsi;
• səhifə sürəti;
• lazımsız JavaScript yükü;
• mobil performans;
• düzgün HTML strukturu.

Frontend və SEO-nun birlikdə düşünülməsi xüsusilə React və Next.js kimi texnologiyalarla işləyərkən daha vacib olur.

Saytın sürət, mobil uyğunluq və SEO-friendly texniki strukturunun birlikdə necə optimallaşdırıldığını Veb Sayt Optimallaşdırılması: SEO Friendly Sayt məqaləsində ayrıca izah etmişəm.

JavaScript öyrənərkən ən çox edilən səhvlər

JavaScript artıq proqramlaşdırma məntiqinə keçdiyimiz mərhələ olduğu üçün başlanğıcda bəzi mövzular qarışıq görünə bilər.

Kodu yalnız əzbərləmək

JavaScript öyrənərkən hazır kodları əzbərləmək əvəzinə hər sətrin nə etdiyini anlamaq daha vacibdir.

Məsələn:

const button = document.querySelector("button");

sətrini sadəcə yadda saxlamaq əvəzinə document, querySelector və selector-un nə etdiyini ayrıca anlamaq lazımdır.

JavaScript əsaslarını keçib birbaşa React-ə başlamaq

React öyrənmək istəyənlərin tez-tez etdiyi səhvlərdən biri JavaScript fundamental mövzularını çox sürətlə keçməkdir. Variables, functions, arrays, objects və array metodları rahat başa düşülmədən React kodu daha mürəkkəb görünə bilər.

Console-dan istifadə etməmək

console.log() başlanğıc mərhələsində çox faydalı debugging alətidir.

Məsələn:

console.log(user);

vasitəsilə dəyişənin hansı məlumatı saxladığını yoxlamaq mümkündür. Kod işləmirsə, problemi yalnız vizual olaraq axtarmaq əvəzinə məlumatın proqram daxilində hansı mərhələdə dəyişdiyini izləmək daha faydalıdır.

Səhv mesajlarını oxumamaq

JavaScript səhv verdikdə console-da çox vaxt problemin növü və baş verdiyi yer göstərilir. Error mesajını dərhal silməyə çalışmaq əvəzinə əvvəlcə onu oxumaq lazımdır. Developer üçün debugging də proqramlaşdırmanın bir hissəsidir.

Hər şeyi eyni anda öyrənməyə çalışmaq

JavaScript böyük ekosistemdir. İlk gündən React, Node.js, TypeScript, Next.js və onlarla kitabxananı birlikdə öyrənməyə ehtiyac yoxdur. Əvvəl fundamental JavaScript biliklərini qurmaq daha sağlam yanaşmadır.

JavaScript öyrənmək üçün hansı ardıcıllıqla getmək lazımdır?

Başlanğıc üçün belə ardıcıllıq istifadə etmək olar:

1. Variables və data types

let, const, string, number, boolean kimi əsas anlayışları öyrənin.

2. Operators və conditions

Müqayisələr, if, else və məntiqi operatorlarla işləyin.

3. Functions

Function yaradılması, parameters və return anlayışlarını öyrənin.

4. Arrays

Məlumat siyahıları ilə işləməyi öyrənin.

5. Objects

Məlumatı key-value strukturu ilə saxlamağı öyrənin.

6. Array methods

map, filter, find, reduce kimi metodlara keçin.

7. DOM

HTML elementlərini JavaScript ilə seçməyi və dəyişməyi öyrənin.

8. Events

Click, submit və input kimi hadisələrlə işləyin.

9. Async JavaScript

Promise, async/await və API request mövzularını öyrənin.

10. Kiçik layihələr hazırlayın

Məsələn:

• Todo list,
• calculator,
• modal,
• accordion,
• weather app,
• product filter.

Kiçik layihələr nəzəri biliklərin real kodda necə işlədiyini görməyə kömək edir.

JavaScript müsahibələrində hansı mövzular soruşulur?

Frontend müsahibələrində JavaScript əsas mövzulardan biridir.

Müsahibədə yalnız sintaksis yox, proqramlaşdırma məntiqini necə başa düşdüyünüz də yoxlanıla bilər.

Məsələn:

• let, const və var fərqi nədir?
• Closure nədir?
• Promise nədir?
• map() və filter() nə edir?
• DOM nədir?
• Event bubbling nədir?
• Async/await necə işləyir?

JavaScript-in fundamental mövzularını öyrəndikdən sonra Frontend Müsahibə Sualları məqaləsində HTML, CSS və JavaScript üzrə müsahibə mövzularını təkrar edə bilərsiniz. Həmin məqalə JavaScript fundamental anlayışlarını da əhatə edir.

JavaScript öyrəndikdən sonra nə öyrənmək lazımdır?

JavaScript-in əsaslarını öyrəndikdən sonra birbaşa framework seçməyə tələsmədən əvvəl kiçik layihələr hazırlamaq faydalıdır. DOM, events, API və async JavaScript ilə rahat işləyə bildikdən sonra React kimi texnologiyalara keçmək daha asan olur.

Ümumi frontend roadmap belə görünə bilər:

HTML → CSS → JavaScript → Git → React → daha geniş frontend ekosistemi

Bu ardıcıllıq sərt qayda deyil, amma hər yeni mərhələnin əvvəlki biliklərin üzərində qurulmasına kömək edir.

Nəticə

JavaScript nədir sualına qısa cavab versək, JavaScript veb səhifələrdə proqram məntiqi, interaktivlik və dinamik funksionallıq yaratmağa imkan verən proqramlaşdırma dilidir.

HTML səhifənin strukturunu, CSS görünüşünü qurur. JavaScript isə istifadəçinin həmin səhifə ilə qarşılıqlı əlaqəsinə reaksiya verməyə imkan verir.

Button klikləri, menyular, modal pəncərələr, form validation, DOM dəyişiklikləri və API-dən məlumat alınması JavaScript-in frontend-də istifadə olunduğu nümunələrdəndir.

JavaScript öyrənərkən məqsəd bütün sintaksisi əzbərləmək olmamalıdır. Variables, functions, conditions, arrays, objects, DOM və events kimi əsas anlayışları başa düşüb kiçik layihələrdə tətbiq etmək daha faydalıdır.

HTML və CSS-dən sonra bu mərhələni düzgün qurduqda React və digər frontend texnologiyalarını öyrənmək də daha rahat olur.