Müsahibəyə hazırlıq: HTML, CSS və JavaScript

Əsas JavaScript sualları

null və undefined? Qəsdən boşluq seçimi ilə verilməmiş dəyəri fərqləndir; ikisi də öz primitiv tipinə malikdir.
== və ===? Birincidə çevirmə qaydaları var, ikincidə tip çevrilmir. NaN === NaN yenə false-dur; Number.isNaN istifadə et.
&&, ||, !!? İlk iki operator operand qaytara bilər; iki inkar boolean yaradır. Falsy dəyərləri nümunələrlə sadala.
var, let və const? var funksiya görünmə sahəli, let/const blok görünmə sahəlidir. const obyektin içini dəyişməz etmir.
Funksiyanı necə çağırırsan? Adi çağırış, metod çağırışı və new ilə konstruktor çağırışı fərqli kontekst yaradır.
this, oxlu funksiya və arguments? Adi funksiyanın this-i çağırışdan asılıdır; arrow öz this/arguments yaratmır. Rest parametri müasir alternativdir.
Spread və rest? Eyni üç nöqtə sintaksisi bir yerdə açır, parametr və destrukturizasiyada toplayır.
Obyekt və massiv yoxlaması? Array.isArray massivi, Object.hasOwn öz xassənin varlığını yoxlayır.
Destrukturizasiya, şablon sətir və class? Məlumatı ayırmaq, ifadəni mətnə daxil etmək və ortaq davranışlı nümunələr yaratmaq üçündür.
Saf və yüksək səviyyəli funksiya? Saf funksiya kənarı dəyişmir; yüksək səviyyəli funksiya funksiya qəbul edir və ya qaytarır. IIFE dərhal çağırılan funksiya ifadəsidir.
DOM və preventDefault? DOM sənəd ağacıdır; preventDefault uyğun hadisənin standart hərəkətini dayandırır. target və currentTarget fərqini göstər.

map, filter və reduce məntiqi

function mapValues(items, callback) {
  const result = [];
  for (let i = 0; i < items.length; i++) result.push(callback(items[i], i));
  return result;
}
function reduceValues(items, callback, initial) {
  let result = initial;
  for (const item of items) result = callback(result, item);
  return result;
}
console.log(reduceValues([1, 2, 3], (sum, value) => sum + value, 0)); // 6

Nümunə

Bu sıx massivlər üçün təlim modelidir; native metodların bütün incəliklərini təkrarlamır. Filter üçün uyğun dəyəri yalnız şərt true olduqda nəticəyə əlavə et.

Dörd praktik tapşırıq

reverseArray(items) yeni tərs massiv qaytarsın, ilkin massiv dəyişməsin.
greetAliens(names) hər adı salamlama mətninə daxil edib dövrlə göstərsin.
justCoolStuff(a, b) iki massivdə ortaq dəyərləri tapsın. Təkrarlanan elementləri saxlayıb-saxlamamaq qaydasını əvvəl yaz.
isTheDinnerVegan(meal) bütün elementlərin source dəyərinin plant olduğunu yoxlasın. Qarışıq tərkib və boş yemək üçün seçdiyin qaydanı izah et.

Əlavə düşünmə sualları

Event bubbling hadisənin ağac boyunca yayılmasıdır. Closure funksiyanın yaradıldığı leksik mühitə çıxışını saxlayır. call, apply və bind adi funksiyanın çağırış kontekstini idarə edir. 0.1 + 0.2 ilə dəqiq bərabərliyin pozulması ikilik üzən nöqtə təqdimatından gəlir. HTML/CSS təkrarı üçün ilk modulun müsahibə dərsinə qayıt.

Event loop cari sinxron iş bitdikdən sonra uyğun növbələrdəki davamları emal edir. Promise davamları ilə taymer callback-ləri eyni növbə deyil; əvvəl cari kodu, sonra mikroişləri və uyğun taymer işini düşün. CSS təkrarı və əlavə layout tapşırıqları üçün HTML/CSS müsahibə dərsini aç.

Əlavə qeydlər və mənbələr

İlk iki modulun suallarını və alqoritmik tapşırıqlarını təkrarla. Tip çevrilməsi, callback, massiv metodları və obyektləri kodun nəticəsini əvvəlcədən söyləməklə yoxla.

Niyə vacibdir?

JavaScript istifadəçi hərəkətinə cavab verən və məlumatı emal edən səhifələr yaratmağa imkan verir.

Əvvəlki biliklər

Git və GitHub

Bu mövzuda

HTML və CSS təkrarı
JavaScript və massiv metodları
Mətn və obyekt massivləri üzrə tapşırıqlar

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Hər ədədi dəyiş

Vurğunu dəyiş. Nəticəni müqayisə et.

Giriş massiviVurğu 2

Hədəf: Vurğunu 3 et.

Canlı nəticə

Giriş123

Nəticə246

Mənbə kodu

[1,2,3].map(n => n * 2)

Addım-addım izlə

1 × 2 → 2
2 × 2 → 4
3 × 2 → 6

Özün sına

Bu dərsdəki tapşırıqları həll et. Yeməklər massivində bütün tərkiblərin bitki mənşəli olub-olmadığını müəyyən edən funksiyanı boş və qarışıq girişlərlə yoxla.

Nəticəni necə yoxlayım?

Dörd alqoritmik tapşırıq boş və sərhəd girişlərlə yoxlanılıb; tip, görünmə sahəsi və callback sualları nümunə ilə cavablandırılır.

Gözlənilən nəticə

Dörd praktik funksiya işləyir; təkrar və boş giriş qaydaları açıqdır.
Yeməkdə bütün tərkiblər plant olmalıdır və ən az bir tərkib lazımdır.

[3,2,1]
Salam, Zorq!
[1]
true
false
false

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Tərs massiv ilkin girişi dəyişmir. Ortaq elementlər təkrarsız qaytarılır. Boş yeməyin vegan sayılmaması bu nümunənin açıq qaydasıdır.

main.js

const reverseArray = items => [...items].reverse();
function greetAliens(names) { for (const name of names) console.log(`Salam, ${name}!`); }
const justCoolStuff = (a, b) => [...new Set(a.filter(item => b.includes(item)))];
const isTheDinnerVegan = meal => meal.length > 0 && meal.every(item => item.source === 'plant');
console.log(JSON.stringify(reverseArray([1, 2, 3])));
greetAliens(['Zorq']);
console.log(JSON.stringify(justCoolStuff([1, 1, 2], [1, 3])));
console.log(isTheDinnerVegan([{ source: 'plant' }]));
console.log(isTheDinnerVegan([{ source: 'plant' }, { source: 'animal' }]));
console.log(isTheDinnerVegan([]));

qisa-cavablar.txt

- null və undefined? Qəsdən boşluq seçimi ilə verilməmiş dəyəri fərqləndir; ikisi də öz primitiv tipinə malikdir.

- == və ===? Birincidə çevirmə qaydaları var, ikincidə tip çevrilmir. `NaN === NaN` yenə false-dur; `Number.isNaN` istifadə et.

- &&, ||, !!? İlk iki operator operand qaytara bilər; iki inkar boolean yaradır. Falsy dəyərləri nümunələrlə sadala.

- var, let və const? var funksiya görünmə sahəli, let/const blok görünmə sahəlidir. const obyektin içini dəyişməz etmir.

- Funksiyanı necə çağırırsan? Adi çağırış, metod çağırışı və new ilə konstruktor çağırışı fərqli kontekst yaradır.

- this, oxlu funksiya və arguments? Adi funksiyanın this-i çağırışdan asılıdır; arrow öz this/arguments yaratmır. Rest parametri müasir alternativdir.

- Spread və rest? Eyni üç nöqtə sintaksisi bir yerdə açır, parametr və destrukturizasiyada toplayır.

- Obyekt və massiv yoxlaması? `Array.isArray` massivi, `Object.hasOwn` öz xassənin varlığını yoxlayır.

- Destrukturizasiya, şablon sətir və class? Məlumatı ayırmaq, ifadəni mətnə daxil etmək və ortaq davranışlı nümunələr yaratmaq üçündür.

- Saf və yüksək səviyyəli funksiya? Saf funksiya kənarı dəyişmir; yüksək səviyyəli funksiya funksiya qəbul edir və ya qaytarır. IIFE dərhal çağırılan funksiya ifadəsidir.

- DOM və preventDefault? DOM sənəd ağacıdır; preventDefault uyğun hadisənin standart hərəkətini dayandırır. target və currentTarget fərqini göstər.

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.