JavaScript-də funksiyalar obyektlər kimi qəbul olunur. Bu səbəbdən funksiyalara aid əlavə metodlardan istifadə etmək mümkündür. Bu metodlardan ən çox istifadə olunanları bind(), call() və apply() funksiyalarıdır. Bu metodlar vasitəsilə funksiyanın this kontekstini istədiyimiz şəkildə dəyişə bilərik.
Bu məqalədə hər üçünü sadə və aydın şəkildə izah edəcəyik.
1. call() Metodu
Təyinat:
call() funksiyası bir funksiyanı başqa bir obyektin konteksti (this) ilə çağırmağa imkan verir.
Sintaksis:
funksiya.call(thisArg, arg1, arg2, ...)
thisArg – funksiyanın içində this olaraq istifadə ediləcək obyekt.
arg1, arg2... – funksiyaya ötürüləcək arqumentlər.
Nümunə:
const user = {
ad: 'Nilay',
salamla: function(yas) {
console.log(`Salam, mənim adım ${this.ad} və mən ${yas} yaşındayam.`);
}
};
const digerUser = {
ad: 'Elvin'
};
user.salamla.call(digerUser, 30);
// Çıxış: Salam, mənim adım Elvin və mən 30 yaşındayam.
İzah:
user.salamla funksiyası digerUser obyektinin kontekstində çağırıldı.
this.ad artıq digerUser obyektinə aiddir.
2. apply() Metodu
Təyinat:
apply() funksiyası call() metoduna bənzəyir, yalnız arqumentlər massiv (array) şəklində verilir.
Sintaksis:
funksiya.apply(thisArg, [arg1, arg2, ...])
Nümunə:
function topla(a, b) {
return a + b;
}
console.log(topla.apply(null, [5, 10])); // 15
İstifadə Fərqi:
call() → arqumentləri ayrı-ayrı ötürürük.
apply() → arqumentləri massiv kimi ötürürük.
3. bind() Metodu
Təyinat:
bind() funksiyası call() və apply() kimi this kontekstini dəyişmək üçün istifadə olunur, lakin funksiyanı dərhal çağırmır. Əvəzində, yeni bir funksiyanı qaytarır.
Sintaksis:
const yeniFunksiya = funksiya.bind(thisArg, arg1, arg2, ...)
Nümunə:
const user = {
ad: 'Nilay'
};
function salamla(yas) {
console.log(`Salam, mənim adım ${this.ad} və mən ${yas} yaşındayam.`);
}
const salamlaNilay = salamla.bind(user, 25);
salamlaNilay(); // Salam, mənim adım Nilay və mən 25 yaşındayam.
İstifadə Yeri:
Callback funksiyalar (məsələn, setTimeout, event handlers)
React komponentlərində this problemi
Ümumi Müqayisə Cədvəli
Metod
this təyin edir
Dərhal çağırılır
Arqument ötürmə forması
call
️
️
Ayrı-ayrı (arg1, arg2)
apply
️
️
Massiv ([arg1, arg2])
bind
️
(sonradan)
Ayrı-ayrı (arg1, arg2)
Real Həyat Nümunəsi: setTimeout və bind
const user = {
ad: 'Nilay',
salamla: function() {
console.log(`Salam, mənim adım ${this.ad}`);
}
};
setTimeout(user.salamla, 1000); // undefined (çünki this itirilib)
setTimeout(user.salamla.bind(user), 1000); // Salam, mənim adım Nilay
Nəticə
bind(), call() və apply() JavaScript funksiyalarında this kontekstini idarə etmək üçün əsas vasitələrdir. Onların fərqlərini və istifadələrini bilmək, daha təmiz və anlaşılan kod yazmağınıza kömək edəcək.
call() və apply() dərhal funksiyanı çağırır.
bind() isə yeni bir funksiya qaytarır və istənilən vaxt çağırmaq mümkündür.
Bu metodlar — funksiya davranışına nəzarət etmək və təkrar istifadəni artırmaq üçün proqramçının alətlər çantasındakı vacib alətlərdəndir.
Java proqramlaşdırma dilində operatorlar dəyişənlər və dəyərlər üzərində müxtəlif əməliyyatlar aparmaq üçün istifadə olunur. Operatorlar proqramda əsas riyazi, məntiqi və müqayisə əməliyyatlarını icra etməyə imkan verir. Bu məqalədə Java-da istifadə olunan əsas operator növlərinə baxacağıq.
1. Riyazi operatorlar (Arithmetic operators)
Riyazi operatorlar ədədi dəyərlər üzərində toplama, çıxma, vurma və bölmə kimi əməliyyatlar aparır.
Əsas riyazi operatorlar:
+ (toplama)
- (çıxma)
* (vurma)
/ (bölmə)
% (modul - qalıq tapmaq)
Nümunə:
int a = 10;
int b = 3;
System.out.println(a + b); // 13
System.out.println(a % b); // 1
2. Təkli operatorlar (Unary operators)
Təkli operatorlar bir operand üzərində işləyir. Onlar dəyişənin dəyərini artırmaq, azaltmaq və ya mənfi etmək üçün istifadə olunur.
Əsas təkli operatorlar:
+ (müsbət etmək)
- (mənfi etmək)
++ (1 artırmaq)
-- (1 azaltmaq)
! (məntiqi inkar)
Nümunə:
int x = 5;
System.out.println(++x); // 6
System.out.println(--x); // 5
System.out.println(-x); // -5
3. Müqayisə operatorları (Relational operators)
Müqayisə operatorları iki dəyəri müqayisə edir və nəticə olaraq true və ya false verir.
Əsas müqayisə operatorları:
== (bərabərdir)
!= (bərabər deyil)
> (böyükdür)
< (kiçikdir)
>= (böyük və ya bərabərdir)
<= (kiçik və ya bərabərdir)
Nümunə:
int a = 5, b = 10;
System.out.println(a > b); // false
System.out.println(a <= b); // true
4. Məntiqi operatorlar (Logical operators)
Məntiqi operatorlar bir neçə şərtin birgə qiymətləndirilməsində istifadə olunur.
Əsas məntiqi operatorlar:
&& (və - hər iki şərt doğru olmalıdır)
|| (və ya - ən azı bir şərt doğru olmalıdır)
! (inkar)
Nümunə:
boolean cond1 = true;
boolean cond2 = false;
System.out.println(cond1 && cond2); // false
System.out.println(cond1 || cond2); // true
System.out.println(!cond1); // false
5. Bitiş operatorları (Bitwise operators)
Bitiş operatorları ikili (binary) səviyyədə bitlər üzərində əməliyyat aparır.
Əsas bitiş operatorları:
& (AND)
| (OR)
^ (XOR)
~ (NOT)
<< (sola sürüşdürmə)
>> (sağa sürüşdürmə)
Nümunə:
int a = 5; // 0101
int b = 3; // 0011
System.out.println(a & b); // 1 (0001)
System.out.println(a | b); // 7 (0111)
6. Sürüşdürmə operatorları (Shift operators)
Sürüşdürmə operatorları bitləri müəyyən sayda sola və ya sağa hərəkət etdirir:
<< (sola sürüşdürmə)
>> (sağa sürüşdürmə)
Nümunə:
int a = 8; // 1000
System.out.println(a << 2); // 32 (100000)
System.out.println(a >> 2); // 2 (10)
7. Təyinat operatorları (Assignment operators)
Təyinat operatorları dəyişənə dəyər mənimsətmək üçün istifadə olunur.
Əsas təyinat operatorları:
= (sadə mənimsətmə)
+= (toplayaraq mənimsətmə)
-= (çıxaraq mənimsətmə)
*= (vurararaq mənimsətmə)
/= (bölərək mənimsətmə)
%= (modul alaraq mənimsətmə)
Nümunə:
int a = 5;
a += 3; // a = a + 3 -> a = 8
System.out.println(a);
8. Ternar operatoru (Ternary operator)
Ternar operator sadə if-else şərtinin qısa yazılış formasıdır:
şərt ? dəyər1 : dəyər2
Əgər şərt doğru olarsa, dəyər1, əks halda dəyər2 seçilir.
Nümunə:
int a = 5, b = 10;
int max = (a > b) ? a : b;
System.out.println(max); // 10
Nəticə
Java-da operatorlar proqramların əsas hissəsini təşkil edir və müxtəlif əməliyyatları yerinə yetirmək üçün istifadə olunur. Riyazi, məntiqi, təyinat və digər operator növlərini yaxşı başa düşmək, effektiv və düzgün kod yazmaq üçün vacibdir.
CSS Flexbox (Flexible Box Layout) veb səhifələrdə elementlərin elastik və səmərəli şəkildə yerləşdirilməsi üçün istifadə olunan güclü bir layout modelidir. Flexbox xüsusilə kompleks tərtibatlarda (naviqasiya panelləri, kart düzülüşləri, məzmun bölgüləri və s.) dizaynerlərə və proqramçılara böyük rahatlıq təmin edir. Bu məqalədə Flexbox-un əsas anlayışları, xüsusiyyətləri və istifadəsi ətraflı şəkildə izah olunacaq.
Flexbox-un əsas anlayışları
Flex Container və Flex Item
Flexbox istifadəsi üçün ilk öncə bir konteyner yaradılır. Bu konteyner display: flex; və ya display: inline-flex; ilə aktivləşdirilir:
.container {
display: flex;
}
Bu konteyner daxilində olan bütün child elementlər (flex item-lar) artıq flexbox qaydalarına uyğun şəkildə davranacaq.
Əsas istiqamət (Main Axis) və Çarpaz istiqamət (Cross Axis)
Flexbox-da iki əsas ox anlayışı var:
Main Axis – elementlərin düzüləcəyi əsas istiqamət.
Cross Axis – əsas oxun əksi istiqamət.
flex-direction xüsusiyyəti main axis-in istiqamətini təyin edir:
.container {
flex-direction: row; /* Default - soldan sağa */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}
Elementlərin əsas oxa görə yerləşdirilməsi: justify-content
Flex item-ları əsas ox üzrə necə yerləşdirmək istədiyinizi təyin edir:
.container {
justify-content: flex-start; /* Sol tərəfə düzülür */
justify-content: flex-end; /* Sağ tərəfə düzülür */
justify-content: center; /* Ortaya düzülür */
justify-content: space-between;/* Aralarında boşluq, kənarlar sıx */
justify-content: space-around; /* Ətrafında bərabər boşluq */
justify-content: space-evenly; /* Bütün boşluqlar bərabər */
}
Elementlərin çarpaz oxa görə yerləşdirilməsi: align-items
Cross axis üzrə yerləşdirməni təyin edir:
.container {
align-items: stretch; /* Default - boyu uyğunlaşdırır */
align-items: flex-start; /* Yuxarıya düzülür */
align-items: flex-end; /* Aşağıya düzülür */
align-items: center; /* Ortaya düzülür */
align-items: baseline; /* Mətnin xəttinə görə düzülür */
}
Çox sətirli flex yerləşdirmə: flex-wrap
Elementlər bir sətrə sığmadıqda, yeni sətrə keçməsini istəyirsinizsə:
.container {
flex-wrap: nowrap; /* Default - sarılmır */
flex-wrap: wrap; /* Sarılır */
flex-wrap: wrap-reverse;
}
Kombinasiya üçün:
.container {
flex-flow: row wrap; /* flex-direction və flex-wrap birlikdə */
}
Çoxlu sətirlərin çarpaz oxa görə yerləşdirilməsi: align-content
Çoxlu sətirlər olduqda bütün sətirlərin cross axis üzrə yerləşməsini təyin edir:
.container {
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;
}
Flex item xüsusiyyətləri
order: Elementlərin sırasını dəyişmək
Elementlərin sırasını dəyişmək üçün:
.item {
order: 2; /* Default 0-dır, daha kiçik olan daha əvvəl gəlir */
}
flex-grow: Elementin böyümə qabiliyyəti
Elementin böyümə qabiliyyəti:
.item {
flex-grow: 1;
}
Əgər bir neçə element flex-grow: 1; olarsa, boşluq bərabər paylaşılır.
flex-shrink: Elementin kiçilmə qabiliyyəti
Elementin kiçilmə qabiliyyəti:
.item {
flex-shrink: 1;
}
flex-basis: Başlanğıc ölçü
Başlanğıc ölçünü təyin edir:
.item {
flex-basis: 100px;
}
flex: Qısa yazılış
.item {
flex: 1 0 100px; /* grow shrink basis */
}
align-self: Tək element üçün yerləşmə
Xüsusi bir item üçün fərdi yerləşdirmə:
.item {
align-self: flex-start;
align-self: center;
align-self: flex-end;
align-self: stretch;
}
Nümunə
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
background: #6c5ce7;
color: white;
padding: 20px;
margin: 10px;
}
Flexbox, CSS-də çox güclü və geniş istifadə olunan layout texnologiyasıdır. Əgər dizaynınız dinamik və cavab verən olmalıdırsa, Flexbox sizin üçün ideal seçimdir. Tətbiqatlarda daha çevik, daha sadə və daha təmiz kod üçün Flexbox istifadə etməyi öyrənmək böyük üstünlükdür.
Flexbox haqqında hazırlanmış bəlkə də ən yaxşı tutorial:
https://www.youtube.com/watch?v=wsTv9y931o8
-
-
Front-end
Frontend əsaslı müzakirə kateqoriyası
11 12 -
-
Maşın öyrənməsi və Süni intellekt
Maşın öyrənməsi və intellektual verilənlərin analizi və Suni intelekt ilə bağlı paylaşımlar
1 1 -
-
-
0
Onlayn6
İstifadəçilər49
Mövzular56
YazılarBilik paylaşdıqca artan bir sərvətdir