HTML with JavaScript | PhineX Academy

1. إزاي نربط الـ JS بالـ HTML؟

الطريقة	الكود	الاستخدام
`Internal`	`<script> // code </script>`	جوه صفحة الـ HTML (عادةً قبل قفلة الـ body).
`External`	`<script src="script.js"></script>`	ملف منفصل، أحسن للتنظيم والمشاريع الكبيرة.
`Inline`	`onclick="alert('Hi')"`	جوه التاج نفسه (مش مفضل استخدامه كتير).

2. لغة الحوار مع العناصر (The DOM)

الـ DOM هو الطريقة اللي الـ JS بيشوف بيها الـ HTML عشان يقدر يغير فيها:

`document.getElementById()`	بتمسك عنصر عن طريق الـ ID بتاعه.
`element.innerHTML`	بتغير الكلام اللي جوه التاج.
`element.style.color`	بتغير لون العنصر بالكود.
`element.classList.add()`	بتضيف CSS Class للعنصر.

3. الأحداث (Events)

الـ JS مستني المستخدم يعمل حاجة عشان يبدأ يشتغل:

onclick: لما المستخدم يدوس على حاجة.
onmouseover: لما الماوس يقف فوق عنصر.
onsubmit: لما المستخدم يبعت بيانات (Form).
onkeydown: لما المستخدم يدوس على زرار في الكيبورد.

1. المخازن (let vs const)

زمان كان فيه var، دلوقتي السنيورز بيستخدموا:

النوع	الاستخدام
`const`	للحاجة اللي مش هتغير قيمتها أبدًا (زي اسم الموقع).
`let`	للحاجة اللي قيمتها ممكن تتغير (زي سكور اللعبة).

2. دمج النصوص الذكي

بدل ما تستخدم علامة الـ (+) وتتلخبط في المسافات، استخدم الـ Backtick (`):

`Hello ${name}` بتسمح لك تحط متغيرات جوه النص بسهولة.

3. إف الشرطية في سطر واحد

بدل ما تكتب 4 سطور if/else، اختصرها:

(age > 18) ? "Welcome" : "Stop" لو الشرط صح نفذ اللي بعد (؟) لو غلط نفذ اللي بعد (:).

4. الدوال السريعة (Arrow Functions)

أحدث وأسرع طريقة لكتابة الـ functions:

const sayHi = () => console.log("Hi"); شكل أنظف وكود أقل.

5. المصفوفة (Array)

صندوق واحد بيشيل حاجات كتير بالترتيب:

`fruits[0]`	بنجيب أول عنصر (العد بيبدأ من صفر).
`fruits.length`	بيعرفك عندك كام حاجة جوه الصندوق.

6. التعامل مع المصفوفة

إزاي تزود أو تنقص حاجات من صندوقك:

`push()`	بتضيف عنصر في آخر المصفوفة.
`pop()`	بتمسح آخر عنصر.
`unshift()`	بتضيف عنصر في الأول خالص.

7. اللف على العناصر (forEach)

بدل الـ for loop المعقدة، دي بتلف على كل عنصر وتعمل فيه اللي إنت عايزه:

users.forEach(u => console.log(u)) بتطبع كل مستخدم لوحده.

8. الفلترة (Filter)

لو عايز تطلع عناصر معينة بس من المصفوفة (مثلاً المنتجات اللي سعرها أقل من 100):

items.filter(i => i.price < 100) بترجع مصفوفة جديدة فيها اللي نجح في الاختبار بس.

9. التحويل السحري (Map)

بتاخد مصفوفة وتغير كل عنصر فيها وترجع مصفوفة جديدة بنفس العدد:

numbers.map(n => n * 2) بتضرب كل الأرقام في 2.

10. الكائن (Object)

بيوصف حاجة بكل تفاصيلها (Key & Value):

user.name بتجيب اسم المستخدم من جوه الكائن.

11. تفكيك الكائنات

بدل ما تكتب user.name و user.age، استخرجهم مرة واحدة:

const {name, age} = user; بقى عندك متغيرين جاهزين للاستخدام فوراً.

12. مؤقت التأخير (setTimeout)

نفذ الكود ده بعد وقت معين (بالملي ثانية):

setTimeout(fn, 3000) هينفذ الدالة بعد 3 ثواني بالظبط.

13. التكرار الزمني (setInterval)

كرر الكود ده كل فترة زمنية (مثلاً لساعة رقمية):

setInterval(fn, 1000) هينفذ الكود كل ثانية للأبد.

14. تحويل النصوص لأرقام

لو عندك "10" وعايز تجمعها كرقم مش كنص:

`Number("10")`	بتحول النص لرقم صريح.
`parseInt("10.5")`	بتحولها لرقم صحيح (10).

15. الأرقام العشوائية

أساس عمل الألعاب والقرعة:

`Math.random()`	بتطلع رقم عشوائي بين 0 و 1.
`Math.floor()`	بتقرب الرقم لتحت (عشان تشيل الكسور).

16. الوعود (Promises)

كود بيقولك: "استنى لما أجيب الداتا وهرد عليك يا نجحت يا فشلت":

`.then()`	لو الوعد اتنفذ بنجاح.
`.catch()`	لو حصلت مشكلة.

17. الانتظار الحديث (Async/Await)

أشيك طريقة للتعامل مع الـ Promises، بتخلي الكود يبدو كأنه سطر ورا سطر:

await getData() استنى لما الداتا تيجي قبل ما تنزل للسطر اللي بعده.

18. جلب البيانات الخارجية (Fetch)

إزاي تكلم سيرفر وتجيب منه معلومات (زي حالة الطقس):

fetch(url) بتبعت طلب للسيرفر وتستلم الـ Response.

19. ذاكرة المتصفح (LocalStorage)

احفظ بيانات المستخدم حتى لو قفل الصفحة وفتحها تاني هتفضل موجودة:

`localStorage.setItem('key', 'value')`	حفظ البيانات.
`localStorage.getItem('key')`	استرجاع البيانات.

20. لغة السيرفرات (JSON)

إزاي تحول الكائن (Object) لنص عشان ينفع يتبعت للسيرفر:

`JSON.stringify()`	من كائن لنص.
`JSON.parse()`	من نص لكائن (عشان تعرف تستخدمه).

جرب كود الـ JavaScript بنفسك 🧪

اكتب كود JS هنا:

النتيجة (Console):

JavaScript: العقل المدبر 🧠