بەخێربێیت بۆ وانە شەشەم لە سلسلەی فێربوونی HTML و CSS و JavaScript ! 🎉

لەم وانەیەدا، ئێمە ڕێگەمان دەدەین بۆ AJAX و APIs . ئێمە فێردەبین چۆن داتا لە ئینتەرنێت بەدەستبهێنین بە بێ ڕۆشتنەوەی پەڕگە بە بەکارهێنانی AJAX ، و چۆن بە API هەڵبگرین بۆ نیشاندانی داتای جوڵاو وەک ئەزموونی خەبرەکان یان هاوایەکان .

1. پێداچوونەوەی خێرا

لە وانەکانی پێشوو، ئێمە فێر بووین:

• چۆن ڕاکێشی زیاد بکەین بە بەکارهێنانی JavaScript.
• دروستکردنی دوگمە و شوێنی جوڵاو .
• جوڵاندنی ئەلیمەنتەکان و گۆڕینی ڕوونکردنەوەکان بە شێوەیەکی جوڵاو.

ئێستا، ئێمە ڕێگەمان دەدەین بۆ AJAX و APIs بۆ زیادکردنی زیاتر جوڵایەتی !

2. AJAX چییە؟

ئە. پێناسەی AJAX:

AJAX (Asynchronous JavaScript and XML) تەکنیکێکە کە ڕێگەت پێدەدات داتا لە خزمەتگوزار بەدەستبهێنیت بە بێ ڕۆشتنەوەی تەواوی پەڕگە. ئەمە دەتوانێت بەکاربێت بۆ هێنانی داتای JSON یان XML .

ب. فایدەکانی AJAX:

• ڕۆشتنەوەی پەڕگە بە بێ دابەزاندنی دووبارە.
• باشترکردنی ئەزموونی بەکارهێنەر .
• دەستەیاندن لە سەرچاوەکان (نیازی بە ڕۆشتنەوەی تەواوی پەڕگە نییە).

3. AJAX چۆن کار دەکات؟

ئە. هەنگاوە بنەڕەتییەکان:

1. دروستکردنی داواکاری AJAX بە بەکارهێنانی XMLHttpRequest یان fetch .
2. ناردنی داواکاری بۆ خزمەتگوزار.
3. وەرگرتنی داتا لە خزمەتگوزار.
4. نیشاندانی داتا لە پەڕگە.

ب. نموونە بە بەکارهێنانی fetch:

fetch('https://api.example.com/data')
.then(response => response.json()) // گۆڕینی داتا بۆ JSON
.then(data => {
console.log(data); // نیشاندانی داتا لە کۆنسۆڵ
})
.catch(error => {
console.error('هەڵەیەک ڕوویدا:', error);
});

4. کارکردن لەگەڵ APIs

ئە. API چییە؟

API (Application Programming Interface) ئامرازێکە کە ڕێگەت پێدەدات بۆ دەستگەیشتن بە داتا یان خزمەتەکان کە لە خزمەتگوزارێکی تر پێشکەش کرابێت. بۆ نموونە:

• API بۆ هاوایەکان .
• API بۆ خەبرەکان .
• API بۆ نرخی دراوەکان .

ب. نموونەی تاقیکردنەوە: هێنانی داتای هاوا بە بەکارهێنانی API

ئێمە دەتوانین APIی بەتاڵ بۆ هاوا (وەک OpenWeatherMap ) بەکاربێنین بۆ هێنانی حاڵەتی هاوا بۆ شارێکی دیاریکراو.

HTML:

<div id="weather">
<h2>حاڵەتی هاوا</h2>
<p id="temperature"></p>
<p id="description"></p>
</div>
<button onclick="getWeather()">هاوای ئێستا بۆ بەدەستبهێنە</button>

JavaScript:

function getWeather() {
const apiKey = 'YOUR_API_KEY'; // ئەمە بگۆڕە بە مافی APIی خۆت
const city = 'Cairo';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;


fetch(url)
.then(response => response.json())
.then(data => {
const temperature = data.main.temp;
const description = data.weather[0].description;
document.getElementById('temperature').textContent = `پلەی گەرمی: ${temperature}°C`;
document.getElementById('description').textContent = `حاڵەت: ${description}`;
})
.catch(error => {
console.error('هەڵەیەک ڕوویدا:', error);
});
}

5. دروستکردنی بەرنامەیەکی سادە بۆ نیشاندانی خەبرەکان

ئە. بەکارهێنانی News API:

ئێمە دەتوانین News API بەکاربێنین بۆ هێنانی خەبرە نوێکان.

HTML:

<div id="news">
<h2>خەبرە نوێکان</h2>
<ul id="news-list"></ul>
</div>
<button onclick="getNews()">خەبرە نوێکان بۆ بەدەستبهێنە</button>

JavaScript:

function getNews() {
const apiKey = 'YOUR_NEWS_API_KEY'; // ئەمە بگۆڕە بە مافی APIی خۆت
const url = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`;


fetch(url)
.then(response => response.json())
.then(data => {
const articles = data.articles;
const newsList = document.getElementById('news-list');
newsList.innerHTML = ''; // پاککردنی لیستی ئێستا


articles.forEach(article => {
const li = document.createElement('li');
li.textContent = article.title;
newsList.appendChild(li);
});
})
.catch(error => {
console.error('هەڵەیەک ڕوویدا:', error);
});
}

6. کاری تاقیکردنەوە

هەوڵبدە پەڕگەیەکی HTML دروست بکەیت کە پێکهاتووە لە:

• بەرنامەی نیشاندانی هاوا:

  • کاتێک دوگمە کرتە دەکرێت، هاوا ئێستا بۆ شارێکی دیاریکراو نیشان دەدرێت.

• بەرنامەی نیشاندانی خەبرەکان:

  • کاتێک دوگمە کرتە دەکرێت، خەبرە نوێکان نیشان دەدرێن.

• بەرنامەی نیشاندانی نرخی دراوەکان:

  • بەکاربێنە APIی نرخی دراوەکان بۆ نیشاندانی نرخی گۆڕانکاری دراوەکان.

7. چی دواتر؟

لە وانەی داهاتوودا، ئێمە فێردەبین:

• چۆن بەرنامەی وێبی چەندپەڕگەیی دروست بکەین بە بەکارهێنانی JavaScript.
• بەکارهێنانی Local Storage بۆ کۆدەرخستنی داتا بە شێوەی شوێنی.
• دروستکردنی بەرنامەی زیاتر پێشکەوتوو بە بەکارهێنانی کتێبخانەکان وەک jQuery.

📌 پێشنیار: هیچ شک نەکە بۆ تاقیکردنەوەی کۆدەکان بە خۆت و گۆڕینیان بۆ بینینی ئەنجامەکان. چارەسەرکردن مەرجە بۆ باشبوونەوە! 🚀