Frontend proqramlaşdırma sahəsində iş müsahibələrinə hazırlaşanlar üçün HTML, CSS, JavaScript və React.js ilə bağlı ən çox soruşulan sualları topladım. Semantic tag-lərdən başlayaraq Flexbox, Grid, Box Model, JavaScript-in fundamental anlayışları və React-in əsas mövzularına qədər izahlarla dolu bu yazı müsahibəyə hazırlaşanlar üçün faydalı ola bilər.
İstər təcrübəli frontend developer olun, istərsə də bu sahəyə yeni başlayan biri — bu suallar və cavablar sizin üçün yaxşı bir başlanğıc qaynağı ola bilər.
Frontend sahəsi haqqında daha ümumi məlumat üçün bu yazıya da baxa bilərsiniz:
Frontend Developer Kimdir və Nə İş Görür?Saytların SEO və texniki optimallaşdırılması ilə maraqlanırsınızsa, bu yazı da faydalı ola bilər:
Veb Sayt Optimallaşdırılması: SEO Friendly Sayt
HTML və CSS Müsahibə Sualları
Semantic tags nədir?
Frontend proqramlaşdırmada semantic tags, yəni semantik teqlər HTML5-də təqdim olunan və veb saytların səhifə strukturunu daha mənalı və anlaşılan edən teqlərdir. Bu teqlər həm brauzerlər, həm axtarış sistemləri, həm də screen reader kimi alətlər üçün məzmunun məqsədini daha aydın göstərir.
| Semantic Tag | Məqsədi |
|---|---|
| Səhifənin başlıq hissəsi | |
| Menyu bölməsi üçün | |
| Səhifənin əsas məzmunu | |
| Məzmun bölməsi | |
| Müstəqil və yenidən istifadə edilə bilən məqalə və ya yazı | |
| Əlavə məlumatlar, yan panel | |
| Səhifənin alt hissəsi |
Semantic tags üstünlükləri
- SEO üçün faydalıdır.
- Kodun oxunmasını və baxımını asanlaşdırır.
- Görmə əngəlli şəxslər üçün veb saytı daha əlçatan edir.
- Brauzerlər və cihazlar arasında daha yaxşı uyğunluq təmin edir.
CSS-də Flexbox və Grid nədir?
Flexbox və CSS Grid elementləri səhifədə yerləşdirmək üçün istifadə olunan iki güclü CSS layout texnologiyasıdır. Hər ikisi responsive dizayn yaratmaq üçün geniş istifadə olunur, lakin fərqli məqsədlər üçün daha uyğundur.
Flexbox nədir?
Flexbox bir istiqamətli yerləşdirmə üçün uyğundur: ya sətir, ya da sütun istiqamətində işləyir. Əsasən elementləri bir xətt üzərində düzmək və aralarındakı məsafəni idarə etmək üçün istifadə olunur.
Flexbox istifadə etmək üçün parent elementə display: flex yazılır.
Grid nədir?
CSS Grid iki istiqamətli layout yaratmaq üçündür. Yəni həm row, həm də column üzərində işləyir. Kompleks layoutlar, səhifə strukturları və dashboardlar üçün daha uyğundur.
Grid istifadə etmək üçün parent elementə display: grid yazılır.
| Xüsusiyyət | Flexbox | Grid |
|---|---|---|
| İstiqamət | Bir xətt üzrə: row və ya column | İki ölçülü: row və column |
| İstifadə sahəsi | Elementləri sırayla düzmək | Bütün səhifə layoutu qurmaq |
| Daha uyğundur | Navbar, düymə qrupları | Səhifə bölmələri, kompleks dizayn |
Box Model nədir?
Box Model HTML-də hər bir elementin bir qutu kimi davranmasını izah edən CSS konseptidir. Bu qutunun dörd əsas hissəsi var:
+---------------------------+
| margin | ← Xarici boşluq
| +--------------------+ |
| | border | | ← Sərhəd
| | +-------------+ | |
| | | padding | | | ← Daxili boşluq
| | | +--------+ | | |
| | | | content | | | | ← Məzmun (text, şəkil və s.)
| | | +--------+ | | |
| | +-------------+ | |
| +--------------------+ |
+-------------------------+
Box Model-in tərkib hissələri
- Content — əsas məzmun, yəni mətn, şəkil və digər elementlər.
- Padding — məzmunla sərhəd arasındakı daxili boşluq.
- Border — qutunun ətrafındakı sərhəd.
- Margin — qutunun digər elementlərlə arasındakı xarici boşluq.
Pseudo-class və Pseudo-element nədir?
Pseudo-class HTML elementinin müəyyən xüsusi vəziyyətini seçmək üçün istifadə olunan CSS selector-dur.
| Pseudo-class | İstifadəsi |
|---|---|
| :hover | Elementin üzərinə mouse gəldikdə |
| :focus | Elementə fokus olduqda |
| :nth-child(n) | Müəyyən sıradakı child elementi seçmək üçün |
| :first-child | İlk child elementi seçmək üçün |
| :last-child | Son child elementi seçmək üçün |
| :visited | Ziyarət edilmiş link üçün |
Pseudo-element isə elementin xüsusi bir hissəsinə stil verməyə imkan verir. Məsələn, bir elementin əvvəlində və ya sonunda süni content əlavə etmək üçün istifadə olunur.
| Pseudo-element | İstifadəsi |
|---|---|
| ::before | Elementin əvvəlində süni content əlavə edir |
| ::after | Elementin sonunda süni content əlavə edir |
| ::first-letter | Məzmunun ilk hərfini seçir |
| ::first-line | Məzmunun ilk sətrini seçir |
HTML-də block, inline və inline-block elementlər nələrdir?
Block elementlər HTML səhifəsində tam bir sətri tutur. Yəni ondan sonra gələn hər hansı element avtomatik olaraq yeni sətrə keçir. Block elementlərə width və height kimi ölçülər tətbiq etmək mümkündür.
Məsələn:
Məsələn: <div>, <p>, <h1>–<h6>, <section>, <article> və s.
Inline elementlər yalnız öz məzmunları qədər yer tutur və yeni sətrə keçmir. Onlar digər inline elementlərlə eyni sətrdə yanaşı dayana bilir. Lakin inline elementlərə width və height vermək mümkün deyil.
Məsələn: <span>, <a>, <strong>, <em>, <b>, <i> və s.
Inline-block elementlər görünüşcə inline elementlər kimi sətrin içində yerləşir, amma block elementlər kimi width və height qəbul edir. Bu da onları dizayn baxımından daha çevik edir.
JavaScript Müsahibə Sualları
JavaScript-də primitive və non-primitive data tipləri nədir?
Primitive data tipləri dəyərin özünü saxlayır və immutable, yəni dəyişməz olur. Bu tiplər birbaşa yaddaşda saxlanılır və kopyalandıqda orijinal dəyərə təsir etmir.
Primitive data types:
String — "salam"
Number — 42, 3.14
Boolean — true, false
Undefined — təyin olunmamış dəyişən
Null — boş dəyər
BigInt — böyük ədədlər
Symbol — unikal identifikatorlar
Non-primitive data tipləri obyektə əsaslanan verilənlərdir. Bu tiplərdə dəyər deyil, onun yaddaşdakı ünvanı, yəni reference saxlanılır. Yəni bir dəyişəni digərinə bərabər etdikdə hər ikisi eyni obyektə işarə edə bilər.
Non-primitive data types:
Object — { ad: "Ali" }
Array — [1, 2, 3]
Function — function() {} və ya () => {}
Hoisting nədir? JavaScript-də var, let və const nədir?
JavaScript-də dəyişən yaratmaq üçün 3 əsas açar söz var: var, let və const.
var köhnə üsuldur. Funksiya daxilində görünür, amma block scope qaydasına tam uyğun işləmir. Məsələn, if və ya for daxilində yaradılan var dəyişəni həmin blokdan kənarda da görünə bilər. Bu isə bəzi hallarda səhvlərə səbəb olur.
var ilə yaradılan dəyişənin deklarasiyası yuxarı qaldırılır, yəni hoisting olunur. Əgər dəyər verilmədən əvvəl istifadə olunarsa, undefined nəticəsi verə bilər.
let daha müasir üsuldur və yalnız yaradıldığı blok daxilində görünür. let də hoisting olunur, amma dəyər verilmədən əvvəl istifadə edildikdə ReferenceError yaranır. let dəyişəninin dəyərini sonradan dəyişmək mümkündür, amma eyni blokda eyni adlı dəyişəni iki dəfə let ilə yaratmaq olmaz.
const sabit dəyişənlər üçün istifadə olunur. const ilə yaradılan dəyişənə mütləq yaradılarkən dəyər verilməlidir və həmin dəyişən sonradan başqa dəyərə yönləndirilə bilməz.
Qeyd etmək lazımdır ki, const ilə yaradılan obyektlərin və array-lərin içindəki məlumatları dəyişmək mümkündür. Yəni obyektin və ya array-in elementləri dəyişə bilər, amma dəyişənin özü başqa obyektə yönləndirilə bilməz.
JavaScript-də Arrow Function nədir? Xüsusiyyətləri nələrdir?
ES6 JavaScript-in böyük yenilənmələrindən biridir. 2015-ci ildə qəbul olunub və JavaScript dilinə çoxlu yeni xüsusiyyətlər əlavə edib. Bu yeniliklər kod yazmağı daha rahat, qısa və oxunaqlı edib.
ES6 ilə gələn əsas yeniliklərdən biri də arrow function-lardır.
Arrow function JavaScript-də funksiya yaratmağın daha qısa və sadə üsuludur. Adətən function açar sözünü yazmadan, sadəcə ox işarəsi => ilə funksiya yazılır.
const topla = (a, b) => {
return a + b;
};
Arrow Function-un əsas xüsusiyyətləri
1. Qısa yazılış
Əgər funksiya tək sətrlikdirsə, {} və return yazmağa ehtiyac yoxdur.
const addNumbers = (a, b) => a + b;
console.log(addNumbers(5, 3)); // 8
2. this davranışı
Arrow function-larda this ən yaxın əhatə edən kontekstdən götürülür. Yəni this arrow function daxilində ayrıca dəyişmir.
const obj = {
value: 10,
showValue: function() {
setTimeout(() => {
console.log(this.value); // 10
}, 1000);
}
};
obj.showValue();
Burada setTimeout içindəki arrow function this dəyərini showValue funksiyasının kontekstindən götürür. Ona görə də this.value nəticəsi 10 olur.
3. arguments dəstəkləmir
Arrow function daxilində arguments mövcud deyil. Əgər parametr siyahısını almaq lazımdırsa, rest operatorundan istifadə olunur.
const showArgs = (...args) => {
console.log(args);
};
showArgs(1, 2, 3); // [1, 2, 3]
JavaScript single-threaded dildir yoxsa multi-threaded?
JavaScript single-threaded dildir. Yəni kodu bir vaxtda yalnız bir əsas axın üzərindən icra edir. Lakin asinxron əməliyyatları idarə etmək üçün event loop mexanizmi mövcuddur.
Bu sayədə şəbəkə sorğuları, vaxt gecikmələri və digər asinxron əməliyyatlar əsas axını bloklamadan işləyə bilir.
Beləliklə, JavaScript özü multi-threaded olmasa da, işləmə mühiti asinxron əməliyyatları effektiv şəkildə idarə etməyə imkan verir.
const ilə obyekt yaratdıqda, həmin obyektin dəyərlərini dəyişmək mümkündürmü?
Bəli, const ilə yaradılan obyektin özünü, yəni yaddaşdakı referansını dəyişmək olmaz. Amma obyektin içindəki sahələri dəyişmək mümkündür.
const user = { name: "Eli", age: 25 };
// Bu mümkündür, obyektin xüsusiyyətini dəyişmək
user.age = 26;
user.name = "Elvin";// Amma bu olmaz, çünki user referansı dəyişdirilir
user = { name: "Tural", age: 30 }; // Xəta verir!
const dəyişənin referansını sabit saxlayır. Yəni user başqa bir obyektə yönləndirilə bilməz. Amma həmin obyektin daxilindəki məlumatları dəyişmək mümkündür.
React.js Müsahibə Sualları
React.js nədir?
React.js istifadəçi interfeysləri yaratmaq üçün istifadə olunan JavaScript kitabxanasıdır. Əsasən tək səhifəli tətbiqlərin hazırlanmasında geniş istifadə olunur. React-in əsas məqsədi veb saytların daha sürətli və interaktiv istifadəçi təcrübəsi təmin etməsidir.
React səhifəni tamamilə yenidən yükləmədən yalnız dəyişiklik baş verən hissəni yeniləməyə imkan verir. Bu isə istifadəçinin qarşılıqlı əlaqədə olduğu sistemlərin daha sürətli və axıcı işləməsini təmin edir. Bu məqsədlə React Virtual DOM adlı texnologiyadan istifadə edir.
React həmçinin komponent əsaslı yanaşma təklif edir. Bu o deməkdir ki, bir veb sayt bir neçə kiçik, müstəqil və yenidən istifadə edilə bilən hissəyə bölünür. Hər komponent öz daxilində işləyir və digər komponentlərlə birlikdə bütöv bir tətbiq yaradır.
React.js müasir veb saytların hazırlanması zamanı geniş istifadə edilən çevik və güclü bir alətdir. O, həm developer-lər üçün kodun idarə olunmasını asanlaşdırır, həm də istifadəçilər üçün daha sürətli təcrübə yaradır.
Virtual DOM nədir? Real DOM ilə fərqləri nələrdir?
Virtual DOM React tərəfindən istifadə olunan bir texnikadır və əsas məqsədi veb saytın daha sürətli və effektiv şəkildə yenilənməsini təmin etməkdir. Bu texnika real DOM-un performans problemlərini azaltmaq üçün istifadə olunur.
Virtual DOM əslində real DOM-un yaddaşda saxlanılan bir nüsxəsidir. Brauzer tərəfindən birbaşa göstərilmir. React tətbiqdə hər hansı dəyişiklik baş verdikdə əvvəlcə bu dəyişiklikləri Virtual DOM üzərində tətbiq edir.
Daha sonra Virtual DOM ilə əvvəlki versiya arasında fərqlər müqayisə olunur. Bu prosesə diffing deyilir. React yalnız dəyişmiş hissələri real DOM-a ötürür. Bu isə performans baxımından üstünlük yaradır.
Real DOM isə brauzerin istifadəçiyə göstərdiyi orijinal sənəd modelidir. Burada baş verən dəyişikliklər zamanı brauzer DOM strukturunu yenidən işləyə bilər. Böyük tətbiqlərdə bu proses daha çox resurs tələb edə bilər.
Əsas fərqlər:
Performans baxımından Virtual DOM daha səmərəlidir, çünki dəyişikliklər əvvəlcə yaddaşda edilir və sonra optimallaşdırılmış şəkildə real DOM-a tətbiq olunur.
Yenilənmə üsulu baxımından Virtual DOM yalnız dəyişmiş hissələri yeniləyir. Real DOM isə bəzi hallarda daha geniş strukturun yenidən işlənməsinə səbəb ola bilər.
Səmərəlilik baxımından Virtual DOM daha az sistem resursu istifadə etməyə kömək edir.
React komponent nə zaman render olunur?
React komponenti müxtəlif hallarda render edilir, yəni istifadəçi interfeysində yenidən göstərilir. Bu proses React-in dəyişikliklərə necə reaksiya verdiyini və UI-nin necə yeniləndiyini müəyyən edir.
1. Başlanğıcda — initial render
Komponent ilk dəfə yaradılıb DOM-a yerləşdiriləndə render prosesi baş verir. Bu zaman React komponentin nəticəsini istifadəçiyə göstərir.
2. State dəyişdikdə
Əgər komponentin daxili vəziyyəti, yəni state dəyişirsə, React avtomatik olaraq həmin komponenti yenidən render edir. Məsələn, useState hook-u ilə idarə olunan bir dəyər dəyişdikdə komponent bu dəyişikliyə reaksiya verir və UI yenilənir.
3. Props dəyişdikdə
Komponentə ötürülən props-lar dəyişdikdə React həmin komponenti yenidən render edə bilər. Bu, komponentin xaricdən aldığı məlumat dəyişdikdə baş verir.
4. Parent komponent render olunduqda
Əgər bir komponentin daxilində yerləşdiyi parent komponent hər hansı səbəbdən render olunarsa, child komponentlər də yenidən render oluna bilər. Hətta onların öz state və props-ları dəyişməsə belə, React onları yenidən hesablaya bilər.
