1.2 JavaScript Azerbaycan Dilinde Izahli Hello World

1.2 JavaScript Azerbaycan Dilinde Izahli Hello World

Bu bloq yazısı sizə JavaScript Azerbaycan dilinde izahlı şəkildə başlamağa kömək edir və sadə bir Hello World mesajını göstərmək üçün JavaScript kodunu HTML səhifəsinə necə yerləşdirəcəyinizi addım-addım izah edir. Əgər siz yeni başlayaraq frontend developer olmağa çalışırsınızsa və veb sayt yaratmaq istəyirsinizsə, bu dərs sizin üçün əla başlanğıcdır.

JavaScript Hello World layihəsinin yaradılması

  1. Addım 1. HTML və JavaScript fayllarını saxlamaq üçün helloworld adlı yeni layihə qovluğu yaradın.
  2. Addım 2. helloworld layihə qovluğunu sevdiyiniz kod redaktorunda açın. Biz VS Code istifadə edəcəyik.
  3. Addım 3. helloworld qovluğunun içində index.html adlı yeni bir HTML faylı yaradın və aşağıdakı kodu əlavə edin:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>JavaScript Hello, World!</title>
 </head>
 <body>
   <script>
     alert('Hello, World!');
   </script>
 </body>
</html>

  1. Addım 4. Mausda sağ klikləyin və “Open with Live Server” seçin. VS Code bir veb server başladacaq və index.html faylını brauzerdə açacaq.

JavaScript Hello World necə işləyir

Birincisi, JavaScript kodunu index.html faylında yerləşdirmək üçün <script> elementindən istifadə edin:

<script>
   alert('Hello, World!');
</script>

İkincisi, veb brauzerdə xəbərdarlıq (alert) göstərmək üçün alert() funksiyasını çağırın:

alert('Hello, World!');

alert() — JavaScript-in daxili funksiyasıdır və çox vaxt test məqsədilə istifadə olunur. Bu üsul, veb saytların hazırlanması zamanı sadə nəticələri yoxlamaq üçün üsullardan biridir.

Qeyd: JavaScript kodunu birbaşa HTML-də <script> etiketi içində yerləşdirmək tövsiyə edilmir. Bu, yalnız test və ya sübut məqsədi ilə istifadə olunmalıdır.

Daha ümumi üsul — JavaScript kodunu ayrıca .js faylında yazmaq və <script> tagi ilə onu HTML-ə əlavə etməkdir.

Xarici JavaScript faylının daxil edilməsi

  1. Addım 1. Layihə qovluğunda js adlı yeni bir qovluq yaradın. Ənənəyə görə, JavaScript faylları js adlı qovluqda saxlanılır.
  2. Addım 2. js qovluğunda app.js adlı yeni fayl yaradın və aşağıdakı kodu əlavə edin:

alert('Hello, World!');

  1. Addım 3. index.html faylını dəyişdirin və app.js faylını </body> etiketindən əvvəl əlavə edin:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>JavaScript Hello, World!</title>
 </head>
 <body>
   <script src="js/app.js"></script>
 </body>
</html>

Bu necə işləyir

Aşağıdakı kod index.html faylında js qovluğundan app.js faylını daxil edir:

<script src="js/app.js"></script>

Bu sintaksisdə, <script> etiketinin src atributuna JavaScript faylının yolu yazılır.

Veb brauzer <script> etiketini görəndə, src atributunda göstərilən app.js faylını yükləyir və JavaScript kodunu icra edir.

Nəticə

Bu bloqda JavaScript ilə ilk addımlarınızı atdınız və sadə bir "Hello, World!" mesajını həm birbaşa HTML-də, həm də xarici .js faylı vasitəsilə necə göstərmək lazım olduğunu öyrəndiniz. JavaScript kodunun script elementi ilə HTML səhifəsinə necə yerləşdirildiyini və alert() funksiyasının necə işlədiyini praktik şəkildə gördünüz.

  1. JavaScript Azərbaycan dilində əsasları öyrəndiniz
  2. HTML və JavaScript faylı yaradıb əlaqələndirməyi bacardınız
  3. alert() funksiyası ilə brauzerdə Hello World mesajı göstərməyi öyrəndiniz
  4. Ən əsası isə frontend proqramlaşdırma üçün ilk addımınızı atdınız

Əgər siz də veb saytların hazırlanması ilə maraqlanırsınızsa və frontend developer olmaq istəyirsinizsə, bu kimi təməl dərslərlə başlanğıc etməyiniz çox vacibdir.

Note: JavaScript Tutorial Hello World Example

Müsahibə Sualları

HTML5-də semantic (mənalı) elementlər nədir və niyə istifadə olunur?

Cavab gözləntisi: Namizəd header, footer, section, article, aside, nav kimi elementləri izah etməli və onların SEO və oxunaqlılıq baxımından faydasını bildirməlidir.

Flexbox və CSS Grid nədir və onların əsas fərqləri nələrdir? Hər ikisinin tətbiq sahələrinə nümunələr verin.

Cavab gözləntisi: Namizəd izah etməlidir ki, Flexbox əsasən tək ölçülü (1D) düzülüşlər – ya sıra, ya da sütun üçün istifadə olunur, məsələn, naviqasiya menyusu və ya düymələrin yan-yana düzülməsi.
Grid isə iki ölçülü (2D) düzülüşlər – həm sıra, həm də sütun strukturunda mürəkkəb layout-lar üçün uyğundur, məsələn, blog səhifələrinin kontent bölgüsü və dashboard layout-ları.

let, const və var arasındakı əsas fərqlər nələrdir? Onların hər biri üçün istifadə nümunəsi göstərin və Temporal Dead Zone (TDZ) nədir, izah edin.

Cavab gözləntisi: var funksiyaya bağlı scope-a (function scope) malikdir, let və const isə blok səviyyəli scope-a (block scope) malikdir. 

let ilə təyin olunan dəyişənin dəyəri sonradan dəyişdirilə bilər. 

const ilə təyin olunan dəyişənin dəyəri dəyişdirilə bilməz (amma obyektlərdə property-lər dəyişə bilər). 

var hoist edilir və undefined dəyər qaytarır (əgər dəyişən təyin edilmədən əvvəl istifadə edilərsə), amma let və const hoist olunsa da Temporal Dead Zone (TDZ) adlanan mərhələdə istifadə edilə bilməz — dəyişən istifadədən əvvəl təyin edilməlidir, əks halda ReferenceError yaranar.

Mənim Bloqlarım

Blog Page