💡 DOM nədir və JavaScript-də DOM-dan necə istifadə etmək
olar ?


Document Object Model (DOM) HTML və XML sənədləri üçün nəzərdə tutulmuş proqramlaşdırma interfeysidir. Sənədlərin və ya websaytın quruluşunu, tərzini, məzmununu dəyişdirmək, dinamikləşdirmək üçün istifadə olunur. Beləliklə, proqramlaşdırma dilləri səhifələrə əlavə olunur. Bu o demək deyil ki, DOM proqramlaşdırma dilidir, DOM standart bir modeldir və bu modeldən istifadə edərək HTML və ya XML sənədləri, və ya, bu sənədlərdə işlədilən elementləri (h1, a, table, form və s.) dəyişə, idarə edə bilirik.

JavaScript`in HTML sənədinə qoşulmasından danışanda, JavaScript`də HTML elementlərinə uyğun obyekt yaratmağı nəzərdə tuturuq. Necə ki, HTML`də hər hansı element class, id və ya elementin adına əsasən seçilir, CSS`də bu elementin xarakteristikaları dəyişdirilirdi. Eyni ilə, JavaScript`də də müxtəlif seçim üsulları vardır.

@TechCodeAz | #javascript

Nədir axı bu JSON ?(What is JSON?)
JSON (JavaScript Object Notation) dataları (çox böyük olmayan) depolamaq və dəyişdirmək üçün istifadə olunan JavaScript obyekt məntiqinə əsaslanan mətn əsaslı formatdır. Məsələn, JSON-dan istifadə edərək serverdən alınan JSON-ları JavaScript obyektinə çevirə bilərsiniz və ya hər hansısa bir JavaScript obyektini JSON-a çevirib serverə göndərə bilərsiniz. Fayl genişləməsi ".json"-dur. JSON-da verilənlər açar (key) və dəyərlərdən (value) ibarət olur.

Nümunə:

{ "ad": "Vüsalə", "soyad": "İsbəndiyarova" }

@TechCode #javascript

💡 JavaScript’də Elementlərin manipulasiyası

HTML sənədində yazdığımız elementləri seçməyi, obyektlərə mənimsətməyi öyrəndik, indi isə onları idarə etməkdən danışaq.
createElement() — boş element yaradır;
innerHTML — elementə məlumat əlavə edir;
appendChild() — elementi tələb olunan elementin daxilinə əlavə edir;
removeChild() — elementi HTML sənədindən silmək üçün istifadə olunur.

Qeyd: Bunları oxuyub keçməyin, not dəftərinizə yazın. Örgənin 💎

@TechCodeAz | #javascript

💡 REACT MÜSAHİBƏ SUALLARI PART 1

React-in əsas xüsusiyyətləri hansılardır?

1. RealDOM manipulyasiyalarının bahalı olduğunu nəzərə alaraq RealDOM əvəzinə VirtualDOM istifadə edir.

2. Server tərəfində render olmanı dəstəkləyir.

3. Bir istiqamətli məlumat axını və ya məlumat bağlanmasını izləyir.

4. Təkrar istifadə olunan birləşdirilə bilən UI komponentlərindən istifadə edir.

5. State idarə edilməsi daha asandır.

@TechCodeAz | #javascript

💡 REACT MÜSAHİBƏ SUALLARI PART 2

State və props xüsusiyyətləri haqqda?

Props :
1. Qəbul eden komponentdə yalnız oxumaq mümkündür
2. Bir komponentdən digər komponentlərə arqument kimi ötürməyə imkan verir
3. Child komponent tərəfindən əlçatan ola bilər

State :
1. Həm oxumaq həm də dəyişikliklər etmək olur
2. Komponentlər haqqında məlumat saxlayır
3. Child komponent tərəfindən əlçatan deyil
@TechCodeAz I #javascript

Qrupdan yazdı bir nəfər

Müsahibədə veriblər :
1) Array’ın içində random rəqəmlər var. Methodlardan istifadə etmədən maksimum rəqəmi tapmalıyıq.

2) Array’ın içində ki rəqəmlərin cəmini tapmaq lazımdır. Methodlardan istifadə etmədən

Buyrun həlləri göndərin 🔥

@TechCodeAz | #javascript

💡 REACT MÜSAHİBƏ SUALLARI PART 3

UseEffect nədir ?

@TechcodeAz | #javascript

💡 REACT MÜSAHİBƏ SUALLARI PART 3

“Key" nədir və onu element massivlərində istifadə etməyin faydası nədir?


Key elementlərin massivlərini yaradarkən daxil etməli olduğunuz xüsusi sətir atributudur. O reacta hansı elementlərin dəyişdirildiyini, əlavə olunduğunu və ya silindiyini müəyyən etməyə kömək edir.

const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

Key olaraq index istifadə etməməyə çalışmalıyıq.

@TechCodeAz | #javascript

Marağlıdı 😀

@TechCodeAz | #javascript

(function() {
var a = b = 5;
})();

console.log(b);

Consola nə çıxaracaq ?

@TechCodeAz | #javascript

JAVACSCRIPT MÜSAHİBƏ SUALLARI

1. Void (0) nə üçün istifadə olunur?
2. JavaScript-də innerHTML istifadə etməyin mənfi cəhətləri hansılardır?

@TechCodeAz I #javascript

JavaScript-də Promise nədir ?


Promise – söz, vəd(söz vermək) vermək deməkdir. Bəs proqramlaşdırmada?

Bizə hər hansı bir qiymət verməyi nəzərdə tutan bir obyektdir. Bu qiymət müsbət mənada da ola bilər, mənfi mənada da.

Yəni ilk olaraq bizə söz verildikdə bu gözləmə (pending) rejimində olur. Sonra isə bizə ya uğurlu (resolved) ya da uğursuz (rejected) olması haqqında bir qiymət qaytarır. Əgər uğurludursa ƏLA həyata davam et) Yox uğursuz nəticə almış olduğumuz halda isə, bir az məyus olaraq bu vəziyyəti idarə edə bilərik(error handling).
Bəs bu promise-i JavaScript`də niyə çox eşitməmişik? niyə istifadə eləmirik? suallarına cavab tapaq.
Promise EcmaScript 6 ilə javascript dünyasına giriş edib. Digər bir məsələ isə EcmaScript 5-də ən çox XMLHttpRequest API istifadə etməyimizdir (fikrimcə). XMLHttpRequest API promise API istifadə eləmir. Lakin promise istifadə edən bir neçə native API var

1. Battery API
2. Fetch API
3. ServiceWorkers

Promise gün keçdikcə məhşurlaşan bir temadı. Buna görə də front-end developerlərə bu temanı dərindən öyrənmələrini məsləhət görürəm. Bundan əlavə Node.js proqramlaşdırma dilinə promise teması üçün başqa bir dünyasıda demək olar (Promise sistemi dilin kökündə olduğu üçün).

Promise new açar sözü ilə istifadə edirik.
Uğurlu (resolve), uğursuz (reject) funksiyaları ilə birlikdə istifadə edirik. Sıralamanı pozmadan adlarını fərqli yaza bilərsiniz. — Promise.resolve() :Promise.all() :, Promise.race(): , Promise.reject() :
Promise gözlənilən əməliyyatı həyatə keçirdikdən sonra nöbəti əməliyyatlar üçün then() metodunun daxilinə keçir. Göndərilən parametr isə resolve() ilə göndərilir.
Hər hansı bir problem baş verdiyi halda catch() daxilinə keçir.

@TechCodeAz | #javascript

JavaScript-də callback funksiyalarının işləmə sxemi
Asinxron JavaScript-də callback funskiyalarından istifadə edilərək bir neçə işi eyni vaxtda etmək mümkün olur.Məsələn, bizim yazdığımız kodlar yuxarıdan aşağı (top-down) işlədilmə məntiqi ilə işləyir. Asinxron (async) isə “hal hazırda yox, sonradan işlədiləcək” ya da “bir az vaxt alır” kimi mənalarda düşünülə bilər. Yəni birdən çox iş görə bilmə qabiliyyəti deyə bilərik. Elektrik sahəsindəki məna ilə eyni mənaya gəlib gəlmədiyini bilmirəm, amma JavaScript üçün belədir. Callback isə əsasən giriş-çıxış (I/O) işləri üçün istifadə edilir. Məsələn, fayl yükləyəndə, fayl oxuyanda, baza ilə əlaqədə və s. Yəni qısaca Nodejs-də daha çox qarşınıza çıxar nəyin ki, front-end işi ilə məşğul olanda.

var res = add(5,3);
console.log(res); // 8
Yuxarıdakı kodda normal funksiyadan istifadə ediləndə iki iş görülür.

Toplama əməli
Ekranda göstər
Asinxron olan funksiyalar isə tez cavab vermir.

var res = download("http://huseyn.org/photo.jpg");
console.log(res);
// res undefined olar

@TechCodeAz | #javascript

💡 REACT MÜSAHİBƏ SUALLARI

React-in əsas xüsusiyyətləri hansılardır?

1. RealDOM manipulyasiyalarının bahalı olduğunu nəzərə alaraq RealDOM əvəzinə VirtualDOM istifadə edir.

2. Server tərəfində render olmanı dəstəkləyir.

3. Bir istiqamətli məlumat axını və ya məlumat bağlanmasını izləyir.

4. Təkrar istifadə olunan birləşdirilə bilən UI komponentlərindən istifadə edir.

5. State idarə edilməsi daha asandır.

@TechCodeAz | #javascript

📢 Yeni başlayanlar və Tələbələr üçün #Onlayn #Frontend Proqramlaşdırma Təlimi!

Frontend proqramlaşdırma, interaktiv veb səhifələr və veb tətbiqlərin inkişafında əsas rol oynayır. Bizim təlimlərimiz vasitəsilə, HTML, CSS və JavaScript (React Js) kimi ən güclü və populyar veb texnologiyalarını öyrənəcəksiniz.

MasterCode Academy-də #Onlayn #frontend bootcamp-ına qoşulun və təcrübəli təlimçilərlə 5 ay müddətində frontend kodlaşdırma biliklərinə yiyələnin.

Bizim təlimlərimizdən faydalanmaqla, bir frontend proqramçı olmaq üçün tələb olunan lazımi bacarıqları əldə edəcəksiniz.

Dərslər həftədə 5 dəfə xüsusi tədris proqramı ilə həyata keçirilir.
Təlimçilərimiz ilə yanaşı mentor heyətimiz sizə 7/24 dəstək olur.

Bootcamp-a qoşulan #tələbələr üçün özəl qiymət təklifimiz də mövcuddur.

💬 Ətraflı məlumat üçün rəy bölməsinə və ya @coderarxivdev'ə yaza bilərsiniz.

#javascript #developer #html #css #reactjs

#frontend #html #javascript

<script /> nədir?

HTML-də JavaScript kodunu işlətmək üçün <script> tagından istifadə olunur.

Bu tag brauzerə deyir ki, "buradan sonra JavaScript kodu gəlir və onu icra et.”:

<script>
  alert("Salam, dünya!");
</script>

JavaScript-in HTML-ə 3 cür bağlanma üsulu:

1. Daxili script (Internal JavaScript) - JavaScript kodları birbaşa HTML faylının içində, <script> tagı vasitəsilə yazılır:

<!DOCTYPE html>
<html>
<head>
  <title>Daxili Script</title>
</head>
<body>
  <h1>Salam!</h1>
  <script>
    alert("Bu daxili scriptdir.");
  </script>
</body>
</html>

✅ Üstünlükləri:

- Kiçik layihələr üçün rahatdır.
- Fayl sayı az olur.

❌ Dezavantajları:

- Kodlar HTML ilə qarışır.
- Təmizlik və təkrar istifadəyə uyğun deyil.

2. Xarici script (External JavaScript) - Kodlar ayrıca .js faylına yazılır və HTML faylında çağırılır:

<!DOCTYPE html>
<html>
<head>
  <title>Xarici Script</title>
  <script src="main.js"></script>
</head>
<body>
  <h1>Xarici fayl nümunəsi</h1>
</body>
</html>

main.js:

alert("Bu, xarici scriptdir.");

✅ Üstünlükləri:

- Kod daha səliqəli və təşkilatlanmış olur.
- Eyni faylı bir neçə HTML faylında istifadə etmək mümkündür.
- Kodun saxlanması və inkişafı asanlaşır.

❌ Dezavantajları:

- Əlavə HTTP sorğusu (performansa təsir edə bilər).
- Əgər script faylı tapılmasa, səhv çıxar.

3. Inline script (Sətir içi JavaScript) - HTML elementinin içində birbaşa yazılır (məsələn, onclick atributu ilə).:

<button onclick="alert('Düyməyə basıldı!')">Beni bas</button>

✅ Üstünlükləri:

- Sadə funksiyalar üçün tez və rahatdır.

❌ Dezavantajları:

- Kodlar HTML ilə qarışır.
- Oxunması və idarə olunması çətindir.
- Təhlükəsizlik riski artar (XSS hücumları).

⭐️ Ən çox istifadə olunan hansıdır və niyə? -

✅ Xarici script üsulu ən çox istifadə olunur.

Səbəbləri:

- Kodun təkrar istifadəsi mümkündür.
- Layihənin böyüməsinə uyğun səliqəli struktur təmin edir.
- HTML və JavaScript ayrı saxlandığı üçün baxımı və inkişafı asan olur.

@TechCodeAz | TechCode.Az

#javascript #pdf

📚 400+ JAVASCRIPT INTERVIEW QUESTIONS

⚡️JavaScript 400+ İntervyu Sualı və Cavabı


@TechCodeAz | TechCode.Az

#frontend #javascript #reactjs

useFormStatus - React 19 ilə gələn yeni hook-lardan 1-i:
- useFormStatus
- useActionState
- useOptimistic
- use


useFormStatus — yalnızca formun içindəki Form komponentinin bir child komponentində istifadə oluna bilən bir hook-dur. Bu hook vasitəsilə:
- Formun hazırda göndərildiyini (pending) öyrənə bilərsən.
- Göstərilən butonun deaktiv olub-olmayacağını təyin edə bilərsən.
- Yükləmə animasiyası və ya spinner əlavə edə bilərsən.


✅ İstifadə qaydası (React 19 Server Actions ilə):

1. Form və Server Action:

// app/actions.ts
'use server'

export async function sendData(formData: FormData) {
  const name = formData.get("name")
  await new Promise(resolve => setTimeout(resolve, 2000)) // sadə gecikmə
  console.log("Ad göndərildi:", name)
}

2. Komponent və useFormStatus istifadəsi:

'use client'

import { useFormStatus } from "react-dom"

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button
      type="submit"
      disabled={pending}
      className={px-4 py-2 rounded ${pending ? "bg-gray-400" : "bg-blue-600 text-white"}}
    >
      {pending ? "Göndərilir..." : "Göndər"}
    </button>
  )
}

3. Əsas Form komponenti:

import { sendData } from "./actions"
import SubmitButton from "./SubmitButton"

export default function Page() {
  return (
    <form action={sendData} className="space-y-4">
      <input
        type="text"
        name="name"
        placeholder="Adınızı yazın"
        className="border p-2 rounded w-full"
      />
      <SubmitButton />
    </form>
  )
}

💡 Nə üçün useFormStatus faydalıdır?
- UX yaxşılaşdırır: Form göndərilərkən "Göndərilir..." mesajı və ya spinner göstərə bilərsən.
- Button disable: İkinci dəfə göndərmənin qarşısını alır.
- Server Action ilə uyğun işləyir.

⚠️ Nəzərə alınmalı məqamlar
- 🔒 useFormStatus yalnız form komponentinin içindəki child elementlərində işləyir.
- ❌ Form xaricində çağırıldıqda heç bir məlumat qaytarmır.
- ✅ React 19-un form komponenti ilə action={serverFunction} yazaraq istifadə etməlisən.

@TechCodeAz | TechCode.Az