10-ameliy_paradigma_qq
.pdf
10-ámeliy jumıs. World Wide Web ushın scenariy jazıwdıń tiykarǵı ámeliyatları
Jumıstıń maqseti: Web-skriptlew (Scripting) tiykarın úyreniw. Frontend (Klient tárep) ushın JavaScript hám Backend (Server tárep) ushın ápiwayı texnologiyalardı (mısalı, Node.js yamasa Python) qollanıp, interaktiv veb-betler jaratıw. DOM (Document Object Model) menen islesiw, waqıya (Event) basqarıw hám HTTP sorawlardı jiberiw/qabıllaw kónlikpelerin qáliplestiriw.
Teoriyalıq bólim:
Veb-programmalastırıw eki tiykarǵı bólekten turadı:
1.Client-side Scripting (Frontend): Brauzerde orınlanadı. Tiykarǵı til – JavaScript. HTML (struktura) hám CSS (dizayn) penen birge veb-bettiń dinamikasın támiyinleydi.
2.Server-side Scripting (Backend): Serverde orınlanadı. Maǵlıwmatlar bazası menen isleydi, HTML betti generaciya etedi yamasa API (JSON) qaytaradı.
(PHP, Python, Node.js, Ruby).
ÁMELIY BÓLIM:
Bul jumısta tiykarınan JavaScript (Frontend) hám HTML-diń óz-ara baylanısın kórip shıǵamız.
1-mısal: HTML hám JavaScript baylanısı (DOM Manipulation)
Másele: Tıshqanshanı basqanda (Click) bettegi tekstti ózgertiw.
Kod (index.html):
<!DOCTYPE html> <html>
<head>
<title>JS Mısalı</title>
</head>
<body>
<h1 id="basBet">Sálem, Veb Dúnya!</h1>
<button onclick="ozgert()">Meni bas</button>
<script>
function ozgert() {
// DOM arqalı elementti tabıw
var element = document.getElementById("basBet");
// Elementtiń ishki tekstin ózgertiw element.innerHTML = "Siz túymeni bastıńız!";
// Stilini ózgertiw element.style.color = "red";
}
</script>
</body>
</html>
Túsindirme: document.getElementById funckiyası HTML elementine JavaScript arqalı kiriwge imkaniyat beredi.
2-mısal: Formanı tekseriw (Validation)
Másele: Paydalanıwshı atı hám parolin kirgizgende, bos emesligin tekseriw.
Kod (HTML + JS):
<form name="loginForm" onsubmit="return validateForm()">
Atı: <input type="text" name="fname" id="fname"><br>
Parol: <input type="password" name="pass" id="pass"><br> <input type="submit" value="Kirisiw">
</form>
<script>
function validateForm() {
var x = document.getElementById("fname").value; var y = document.getElementById("pass").value;
if (x == "" || y == "") {
alert("Atı hám Parol toltırılıwı shárt!"); return false; // Formanı jiberiwdi toqtatadı
}
return true; // Serverge jiberiledi
}
</script>
3-mısal: Waqıyalar (Events) hám Tıshqansha
Másele: Tıshqansha elementtiń ústine barǵanda reńin ózgertiw (Hover effect).
Kod:
<div id="quti" style="width:100px; height:100px; backgroundcolor:blue;"></div>
<script>
var box = document.getElementById("quti");
// Tıshqansha kelgende box.onmouseover = function() {
this.style.backgroundColor = "green";
}
// Tıshqansha ketkende box.onmouseout = function() {
this.style.backgroundColor = "blue";
}
</script>
4-mısal: Massivler hám Cikller (Dinamykalıq dizim)
Másele: JavaScript massivindegi maǵlıwmatlardı HTML dizim (UL/LI) retinde shıǵarıw.
Kod:
<h2>Miyweler dizimi:</h2> <ul id="dizim"></ul>
<script>
var fruits = ["Alma", "Anar", "Júzim", "Shiye"]; var text = "";
for (var i = 0; i < fruits.length; i++) { text += "<li>" + fruits[i] + "</li>";
}
document.getElementById("tizim").innerHTML = text; </script>
5-mısal: Asinxron soraw (Fetch API - AJAX)
Másele: Serverden (fake API) maǵlıwmat júklep kórsetiw.
Kod:
<button onclick="juklew()">Maǵlıwmat júklew</button>
<p id="info"></p>
<script>
function juklew() { fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json()) // JSON formatına aylandırıw
.then(data => {
// Nátiyjeni ekranda kórsetiw document.getElementById("info").innerHTML =
"ID: " + data.id + "<br>Title: " + data.title;
})
.catch(error => console.error('Qáte:', error));
}
</script>
ÁMELIY TAPSÍRMALAR
1-tapsırma: Kalkulyator (HTML + JS).
Eki input maydanı (san1, san2) hám 4 túyme (+, -, *, /) bolǵan ápiwayı kalkulyator jaratıń.
Túyme basılǵanda nátiyje <p id="result"> tegininiń ishinde kórinsin.
2-tapsırma: Saat (Timer).
Bette hárbir sekund sayın jańalanıp turatuǵın haqıyqıy waqıttı (Saat:Minut:Sekund) kórsetiń.
Kórsetpe: setInterval funkciyası hám new Date() obyektinen paydalanıń.
3-tapsırma: Túngi/Kúndizgi rejim (Dark Mode).
Bir túyme (Button) qoyıń. Túymeni basqanda bettiń fonı (background) qara, jazıwı (color) aq bolsın. Qayta basqanda aq fon, qara jazıwǵa qaytsın.
Kórsetpe: document.body.style.backgroundColor dı ózgertiń yamasa classList.toggle() qollanıń.
4-tapsırma: Todo List (Wazıypalar dizimi). Bir input hám "Qosıw" túymesi bolsın.
Túymeni basqanda inputtaǵı sóz tómendegi <ul> dizimine jańa <li> retinde qosılsın.
(Bonus: Qosılǵan elementti basqanda ol óshirilsin).
5-tapsırma: Súwret galereyası.
3 dana kishi súwret (thumbnail) hám 1 úlken súwret (main image) qoyıń.
Kishi súwretlerdiń birewin basqanda, úlken súwret sol basılǵan súwretke almassın. Kórsetpe: src atributın ózgertiw arqalı isleń.