JavaScript nədir və harada işləyir

JavaScript veb-səhifələri canlandıran proqramlaşdırma dilidir: kliklərə reaksiya verir, formaları yoxlayır, səhifəni yeniləmədən məlumat yükləyir. Brauzerlər onu heç bir plaqin olmadan icra edir, üstəlik bu dildə serverlər, mobil və masaüstü tətbiqlər də yazılır. Bu dərsdə JavaScript-in HTML və CSS yanında hansı yeri tutduğunu, dilin necə inkişaf etdiyini, harada işlədiyini öyrənəcək və ilk kod sətrinizi işə salacaqsınız.

HTML, CSS və JavaScript: səhifənin üç qatı

Veb-səhifəni üç qat kimi təsəvvür etmək rahatdır:

Hər üç qatın iştirak etdiyi «bəyən» düyməsi:

<!-- HTML: səhifədə nə var -->
<button class="like">♥ 0</button>

<!-- CSS: necə görünür -->
<style>
  .like { padding: 8px 16px; border: none; border-radius: 8px; background: #ffe4ec; }
</style>

<!-- JavaScript: klik zamanı nə baş verir -->
<script>
  let likes = 0;
  const button = document.querySelector('.like');
  button.addEventListener('click', () => {
    likes = likes + 1;
    button.textContent = '♥ ' + likes;
  });
</script>

HTML düyməni yaradır, CSS onu çəhrayı rəngə boyayır və künclərini yumrulaşdırır, JavaScript isə bəyənmələrin sayını likes dəyişənində saxlayır, hər klikdə onu artırır və mətni yeniləyir: ♥ 1, ♥ 2 və s. JavaScript olmasa, düymə eyni görünərdi, amma heç nə etməzdi. Detalları (let, document, addEventListener) növbəti mövzularda öyrənəcəyik.

💡 HTML və CSS səhifəni təsvir edir, JavaScript isə onu idarə edir. Əgər tapşırığı CSS həll edirsə (məsələn, :hover effekti), JavaScript-ə ehtiyac yoxdur.

İlk kod sətri: console.log

Heç nə quraşdırmaq lazım deyil — hər brauzerdə daxili konsol var. İstənilən tabı açın, F12 və ya Ctrl+Shift+J (macOS-da Cmd+Option+J) basın, Console tabına keçin, sətirləri yazın və Enter basın:

console.log('Hello, world!');
console.log(2 + 3);
console.log('Price:', 150, 'AZN');

Hello, world!
5
Price: 150 AZN

console.log() «konsola çıxar» deməkdir. Mötərizədəki dəyərə arqument deyilir: dırnaq içindəki mətn olduğu kimi çıxır, 2 + 3 ifadəsi əvvəlcə hesablanır, vergüllə ayrılmış bir neçə dəyər isə bir sətirdə boşluqla çıxarılır. Konsolun imkanlarına «DevTools və konsol» mövzusu həsr olunub.

⚠️ Əmrdən sonra görünən boz undefined səhv deyil: konsol console.log()-un heç nə qaytarmadığını bildirir. Sizin mətniniz bir sətir yuxarıda çıxıb.

Kiçik demo: JavaScript səhifəni dəyişir

Real layihələrdə kod HTML faylın içində yaşayır və ya ona qoşulur. Skriptin başlığın mətnini dəyişdiyi minimal səhifə:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>First script</title>
</head>
<body>
  <h1 id="title">Hello!</h1>
  <script>
    // başlığı tapırıq və mətnini dəyişirik
    document.getElementById('title').textContent = 'Hello from JavaScript!';
  </script>
</body>
</html>

Brauzer «Hello!» başlığını qurur, <script>-ə çatır və kodu icra edir: id="title" olan elementi tapıb mətnini əvəz edir. İstifadəçi dərhal «Hello from JavaScript!» görür. Skriptlərin qoşulma üsulları növbəti dərsin mövzusudur, elementlərlə iş isə DOM bölməsində olacaq.

ECMAScript: dilin standartı və versiyaları

JavaScript-i 1995-ci ildə Netscape şirkətində Brendan Eich yaradıb — ilk versiya təxminən on günə yazılıb. Bütün brauzerlərin eyni kodu başa düşməsi üçün dil standartlaşdırılıb: 1997-ci ildən onun spesifikasiyası ECMAScript (ECMA-262) adlanır, onu isə TC39 komitəsi inkişaf etdirir. ECMAScript dilin qaydalarıdır, JavaScript isə bu qaydaların reallaşdırılması üstəgəl mühitin imkanlarıdır (məsələn, brauzerdə document).

ES2015 dilin üslubunu kökündən dəyişdi:

// ES5: əvvəllər belə yazırdılar
var name = 'Aysel';
var greet = function (user) {
  return 'Hello, ' + user + '!';
};
console.log(greet(name)); // → Hello, Aysel!

// ES2015+: müasir sintaksis
const userName = 'Aysel';
const greetUser = (user) => `Hello, ${user}!`;
console.log(greetUser(userName)); // → Hello, Aysel!

Nəticə eynidir, amma müasir variant qısadır: var əvəzinə const, arrow funksiya, + ilə birləşdirmə əvəzinə template literal. Kursda müasir kod yazırıq, köhnəsini isə başqalarının layihələrini oxuya biləsiniz deyə öyrənirik. Son illərin yenilikləri artıq brauzerlərdə və Node.js 22-də işləyir:

// ES2024: massivi əlamətə görə qruplaşdırmaq
const students = [
  { name: 'Aysel', course: 'js' },
  { name: 'Murad', course: 'php' },
];
console.log(Object.keys(Object.groupBy(students, (s) => s.course))); // → [ 'js', 'php' ]

// ES2025: iki çoxluğun kəsişməsi
const frontend = new Set(['html', 'css', 'js']);
console.log(frontend.intersection(new Set(['php', 'js']))); // → Set(1) { 'js' }

İmkanların dəstəklənməsini caniuse.com və MDN saytlarında yoxlayırlar.

Mühərriklər və icra mühitləri

Kodu JavaScript mühərriki (engine) icra edir: kodu oxuyan, işləmə zamanı maşın təlimatlarına kompilyasiya edən (JIT-kompilyasiya) və işə salan proqram:

• V8 — Chrome, Edge, Opera, həmçinin Node.js və Deno;
• SpiderMonkey — Firefox;
• JavaScriptCore — Safari və iOS-dakı bütün brauzerlər, həmçinin Bun.

Mühərrik yalnız dilin özünü bilir: dəyişənlər, funksiyalar, obyektlər. Qalan hər şeyi icra mühiti (runtime) verir:

«Təmiz» JavaScript hər iki mühitdə işləyir. İçində console.log('Welcome to JavaScript!') kodu olan hello.js faylını Node.js-də terminalda bu əmrlə işə salırlar:

node hello.js

Welcome to JavaScript!

Node.js və VS Code-un quraşdırılmasını «İş mühiti» mövzusunda keçəcəyik.

Java və JavaScript eyni şey deyil

«JavaScript» adı 1995-ci ilin marketinq gedişidir: o vaxt Java populyarlığının zirvəsində idi. Əslində bunlar fərqli dillərdir: Java-da statik tipləşdirmə və JVM üçün bayt-koda kompilyasiya var, JavaScript-də isə dinamik tipləşdirmə və brauzer və ya Node.js mühərriki tərəfindən icra. Java-da proqram:

public class Main {
    public static void main(String[] args) {
        String name = "Murad";
        System.out.println("Hello, " + name);
    }
}

Java-da ən sadə proqram belə sinif, main metodu və açıq String tipi tələb edir. JavaScript-də iki sətir kifayətdir: const name = 'Murad'; və console.log('Hello, ' + name);.

⚠️ Materialları «JavaScript» və ya «JS» sorğusu ilə axtarın — Java üzrə məqalələr sizə kömək etməyəcək.

Tipik səhvlər

1. Hərflərin registrində səhv. Console və console fərqli adlardır:

Console.log('Hi'); // ✗ ReferenceError: Console is not defined
console.log('Hi'); // ✓ Hi

2. Word və ya messencerdən gələn «ağıllı» dırnaqlar. Tipoqrafik “…” və «…» dırnaqlarını JavaScript başa düşmür:

console.log(“Hello”); // ✗ SyntaxError: Invalid or unexpected token
console.log("Hello"); // ✓ adi düz dırnaqlar

3. Konsoldakı dəyişikliklərin qalacağını gözləmək. Onlar yalnız cari tabda yaşayır və səhifə yeniləndikdən sonra itir. Daimi kodu layihənin fayllarında yazırlar.

Xülasə

• HTML struktura, CSS tərtibata, JavaScript isə davranışa cavabdehdir.
• Dilin qaydalarını ECMAScript standartı müəyyən edir; versiyalar hər il çıxır, ES2015 isə dönüş nöqtəsi oldu.
• Kodu mühərrik icra edir: V8, SpiderMonkey və ya JavaScriptCore.
• Mühit öz imkanlarını əlavə edir: brauzerdə document və window, Node.js-də fayllar və şəbəkə.
• console.log() dəyərləri konsola çıxarır — ilk təcrübələrin əsas aləti.
• Java və JavaScript fərqli dillərdir.

Praktika

1. Brauzer konsolunda adınızı, sonra şəhərinizi çıxarın — hər birini ayrıca console.log() əmri ilə.
2. Konsoldan kalkulyator kimi istifadə edin: bir sutkadakı saniyələrin və bir ildəki dəqiqələrin sayını izahla çıxarın, məsələn console.log('Seconds per day:', 24 * 60 * 60).
3. Tapşırıqları qatlara bölün (HTML, CSS, JavaScript): giriş forması əlavə etmək; düyməni göy rəngə boyamaq; forma göndərildikdən sonra «Parol yanlışdır» göstərmək; kartları üç sütunda yerləşdirmək; valyuta məzənnəsini serverdən yükləmək; üzərinə gəldikdə linki rəvan işıqlandırmaq.
4. h1 olan istənilən səhifədə konsolda document.querySelector('h1').textContent = 'Edited by me' və document.body.style.background = 'lightyellow' əmrlərini icra edin. Sonra səhifəni yeniləyin və dəyişikliklərin hara getdiyini izah edin.