مرحبًا بك في الدرس السادس من سلسلة تعلم HTML وCSS وJavaScript! 🎉

في هذا الدرس، سنركز على AJAX وAPIs . سنتعلم كيفية جلب البيانات من الإنترنت دون تحديث الصفحة باستخدام AJAX، وكيفية التعامل مع APIs لعرض بيانات ديناميكية مثل الأخبار أو الطقس.

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 تحتوي على العناصر التالية:

1. تطبيق لعرض الطقس :

   • عند النقر على الزر، يظهر الطقس الحالي لمدينة محددة.

2. تطبيق لعرض الأخبار :

   • عند النقر على الزر، تعرض أحدث الأخبار.

3. تطبيق لعرض أسعار العملات :

   • استخدم API لأسعار العملات لعرض سعر صرف العملة.

7. ما التالي؟

في الدرس القادم، سنتعلم:

• كيفية إنشاء تطبيقات ويب متعددة الصفحات باستخدام JavaScript.
• استخدام Local Storage لتخزين البيانات محليًا.
• إنشاء تطبيقات أكثر تعقيدًا باستخدام مكتبات مثل jQuery .

📌 نصيحة: لا تتردد في تجربة الأكواد بنفسك وتعديلها لترى النتائج. الممارسة هي مفتاح الإتقان! 🚀