400+ JAVASCRIPT INTERVIEW QUESTIONS.pdf
5.4 MB
#javascript #pdf
📚 400+ JAVASCRIPT INTERVIEW QUESTIONS
⚡️JavaScript 400+ İntervyu Sualı və Cavabı
@TechCodeAz | TechCode.Az
📚 400+ JAVASCRIPT INTERVIEW QUESTIONS
⚡️JavaScript 400+ İntervyu Sualı və Cavabı
@TechCodeAz | TechCode.Az
🔥2
#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 (
- 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:
2. Komponent və useFormStatus istifadəsi:
3. Əsas Form komponenti:
💡 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
- 🔒
- ❌ Form xaricində çağırıldıqda heç bir məlumat qaytarmır.
- ✅ React 19-un
@TechCodeAz | TechCode.Az
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
👍1🔥1
#frontend #javascript #socket.io
Socket.io nədir? - Real vaxt rejimində veb programları üçün Javascript kitabxanasıdır.
O, WebSockets və ya fallbacks kimi ehtiyatlardan istifadə edərək brauzer və server arasında iki istiqamətli, hadisəyə əsaslanan əlaqəni təmin edir.
⚙️ Yüklənməsi:
Backend (Node.js):
Frontend (Client):
💻 Nümunə:
Server (server.js):
Client (index.html):
Sən bunları edə bilərsən:
- 💬 Chat applications
- 🔔 Notifications (e.g., new followers, messages)
- 📈 Live dashboards (e.g., user count, data updates)
- 🎮 Multiplayer games
- 🧑💻 Real-time collaborative editors
@TechCodeAz | TechCode.Az
Socket.io nədir? - Real vaxt rejimində veb programları üçün Javascript kitabxanasıdır.
O, WebSockets və ya fallbacks kimi ehtiyatlardan istifadə edərək brauzer və server arasında iki istiqamətli, hadisəyə əsaslanan əlaqəni təmin edir.
⚙️ Yüklənməsi:
Backend (Node.js):
npm install express socket.io
Frontend (Client):
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
💻 Nümunə:
Server (server.js):
const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
const app = express();
const server = http.createServer(app);
const io = new Server(server, {
cors: {
origin: "*",
},
});
io.on("connection", (socket) => {
console.log("User connected:", socket.id);
socket.on("chat-message", (msg) => {
io.emit("chat-message", msg);
});
socket.on("disconnect", () => {
console.log("User disconnected:", socket.id);
});
});
server.listen(3000, () => {
console.log("Server running on http://localhost:3000");
});Client (index.html):
<!DOCTYPE html>
<html>
<head><title>Socket.IO Chat</title></head>
<body>
<input id="msgInput" placeholder="Type a message..." />
<button onclick="sendMessage()">Send</button>
<ul id="messages"></ul>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script>
const socket = io("http://localhost:3000");
const messages = document.getElementById("messages");
const input = document.getElementById("msgInput");
socket.on("chat-message", (msg) => {
const li = document.createElement("li");
li.textContent = msg;
messages.appendChild(li);
});
function sendMessage() {
const msg = input.value;
socket.emit("chat-message", msg);
input.value = "";
}
</script>
</body>
</html>
Sən bunları edə bilərsən:
- 💬 Chat applications
- 🔔 Notifications (e.g., new followers, messages)
- 📈 Live dashboards (e.g., user count, data updates)
- 🎮 Multiplayer games
- 🧑💻 Real-time collaborative editors
@TechCodeAz | TechCode.Az
❤3👍2🔥1