roadmap.az

Menyu

JavaScript & DOMDərs 1 / 25

JavaScript sintaksisi

Əmrlərin ardıcıllığı

Alqoritm nəticəyə çatmaq üçün addımlar ardıcıllığıdır. JavaScript-də ifadələr dəyər hesablayır, əmrlər işi yerinə yetirir. Brauzerin Console bölməsində kiçik ifadələri yoxlaya bilərsən. Səhifəyə ayrıca fayl qoşmaq üçün <script src="app.js" defer></script> istifadə et.

const bookPrice = 12;
let bookAmount = 5;
const total = bookPrice * bookAmount;
console.log('Ümumi məbləğ:', total); // 60
bookAmount = 6;
console.log(bookPrice * bookAmount); // 72
// Bu şərh icra edilmir.
/* Bir neçə sətirlik şərh də yazmaq olar. */
Nümunə

Ad və mənimsətmə

const yenidən mənimsədilməyən bağ, let isə yenidən mənimsədilə bilən bağ yaradır. Ad hərf, alt xətt və ya dollar işarəsi ilə başlaya bilər; böyük və kiçik hərflər fərqlidir. Məqsədi bildirən ad seç: bookPrice sonradan x-dən daha rahat oxunur.

= mənimsətmədir, riyazi bərabərlik yoxlaması deyil. +, -, *, / ədədlərlə hesablayır. Sintaksis xətası görsən, konsoldakı fayl və sətir məlumatına bax; bir səhvi düzəldib yenidən icra et.

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

Alqoritmi sonlu addımlar ardıcıllığı kimi təsvir et. const və let ilə dəyərləri saxla, konsola nəticə çıxar, hesab əməliyyatları və şərhlərlə ilk proqramını yaz.

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

Bu mövzuda

  • Alqoritm və əmrlərin ardıcıllığı
  • const, let və console.log
  • Hesab əməliyyatları və şərhlər

Mövzuya baxış

Məlumatdan nəticəyə

Funksiya müəyyən işi görən, adlandırılmış kod hissəsidir. Giriş parametrləri alır və return ilə nəticə qaytara bilər. Kiçik funksiyaları yoxlamaq və yenidən istifadə etmək daha asandır.

const products = [{ name: 'Dəftər', price: 4 }, { name: 'Çanta', price: 30 }];
function affordable(items, budget) {
  return items.filter(item => item.price <= budget);
}
console.log(affordable(products, 10));
Nümunə

filter şərtə uyğun elementlərdən yeni massiv yaradır. map isə hər elementi çevirmək üçündür. const dəyişənin yenidən mənimsədilməsini qadağan edir, amma obyektin daxilini avtomatik dəyişməz etmir.

Şərtlər, dövrlər və nəticə qaytarmaq

if müxtəlif kod yollarını seçir, switch eyni dəyəri bir neçə variantla müqayisə edir, üçlü operator isə iki ifadədən birini seçir. while şərtə, for isə çox vaxt sayğaca əsaslanan təkrardır. Dövrün dayanma şərtini əvvəl müəyyən et; break dövrü bitirir, continue cari iterasiyanın qalan hissəsini ötürür.

function sumTo(limit) {
  if (!Number.isInteger(limit) || limit < 0) return null;
  let total = 0;
  for (let n = 1; n <= limit; n++) total += n;
  return total;
}
console.log(sumTo(4)); // 10
console.log(sumTo(-1)); // null
Nümunə

Number('12') ədədə çevrilir, Number('salam') isə NaN verir. prompt ləğv olunanda null qaytarır; bu halı boş sətirdən ayır. Müqayisədə === tip çevirmir. Dəyəri konsola çıxarmaq funksiyadan return ilə qaytarmaqla eyni deyil.

Massivləri dəyişmək, axtarmaq və sıralamaq

push, pop, shift və unshift ilkin massivi dəyişir. split mətni hissələrə ayırır, join hissələri mətnə birləşdirir. forEach hər element üçün iş görür; map yeni dəyərlər, filter seçilmiş elementlər qaytarır. find ilk uyğun elementi, tapmadıqda undefined qaytarır.

const scores = [12, 3, 21, 8];
const ordered = [...scores].sort((a, b) => a - b);
const passed = ordered.filter(score => score >= 10);
const doubled = scores.map(score => score * 2);
console.log(ordered, passed, doubled);
console.log(scores); // [12, 3, 21, 8]
Nümunə

sort yerində dəyişir və eyni massivi qaytarır. Əvvəl surət çıxarmaq ilkin sıralamanı qoruyur. Spread yalnız səthi surətdir: içəridəki obyektlər yenə eyni istinadla paylaşıla bilər. Destrukturizasiya ilə elementləri ayrıca dəyişənlərə ayıra bilərsən.

Obyekt metodları, siniflər və irsilik

Obyekt əlaqəli məlumatı açarlarla saxlayır, metod isə onun davranışını təsvir edir. Adi metodu obyekt üzərindən çağıranda this həmin obyektə müraciət edir. Oxlu funksiya öz this dəyərini yaratmır.

class Person {
  constructor(name) { this.name = name; }
  rename(name) { this.name = name; }
}
class Player extends Person {
  constructor(name, level) {
    super(name);
    this.level = level;
  }
}
const player = new Player('Aysel', 1);
player.rename('Leyla');
console.log(player.name, player.level); // Leyla 1
Nümunə

constructor başlanğıc vəziyyəti qurur, new nümunə yaradır, extends ortaq davranışı miras alır. Kapsullama məlumatı və onunla işləyən davranışı bir yerdə saxlayır; polimorfizm eyni əməliyyatın fərqli tiplərdə fərqli həyata keçirilməsinə imkan verir.

Məsələ həll edərkən giriş və çıxışı yaz, boş və etibarsız nümunələri seç, psevdokod qur, sonra kiçik funksiyalarla həll et. Aşağıdakı dərslərdə dilin hər hissəsi ayrıca praktika ilə açılır.

Mövzu üzrə praktika

Məhsullar massivindən qiyməti verilmiş büdcədən aşağı olanları seçən funksiya yaz. Boş massiv və sıfır büdcə ilə yoxla.

Funksiya müxtəlif girişlər üçün düzgün nəticə qaytarır və ilkin massivi dəyişmir.

Mövzunun yoxlama siyahısı

  • const və let, əsas məlumat tipləri
  • Şərtlər, dövrlər və funksiyalar
  • Massivlər, obyektlər, map və filter
  • Xətaları konsolda oxumaq
  • Tip çevrilməsi, switch və üçlü operator
  • Massivlərin surəti, find, forEach və sort
  • Obyekt metodları, this, class və extends
  • Məsələni parçalamaq və sərhəd hallarını yoxlamaq

Mənbələr

Məşqin idarəetməsi
Addım 1 / 3

Kitabların ümumi qiymətini hesabla

Sayı dəyiş və məbləğin necə dəyişdiyini gör. Sonda 6 kitab seç.

Hədəf: Kitab sayını 6 et.

Canlı nəticə

Giriş12
Nəticə60
Mənbə kodu
12 * 5

Özün sına

Kitabın qiyməti və sayı üçün dəyişənlər yarat. Ümumi dəyəri hesablayıb konsolda göstər və hesablamanı şərhlə izah et.

Nəticəni necə yoxlayım?

Dəyişənlər düzgün elan olunur; verilən qiymət və saydan ümumi məbləğ hesablanır, konsolda nəticə görünür.

Gözlənilən nəticə

  • Konsolda 36 görünür.
  • quantity 0 olduqda nəticə 0 olur.
36
Nümunə həllə bax

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

const dəyişməyən girişlər üçün uyğundur; hasil ümumi məbləği verir.

main.js

const price = 12;
const quantity = 3;
// Bir kitabın qiymətini kitab sayına vururuq.
const total = price * quantity;
console.log(total);

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