لغة JavaScript هي لغة برمجة ديناميكية تُستخدم بشكل رئيسي في تطوير الويب لإنشاء صفحات تفاعلية وتحسين تجربة المستخدم. تُعد واحدة من الركائز الثلاثة الأساسية في تطوير الويب بجانب HTML (لبناء الهيكل) وCSS (لتنسيق الشكل).

استخدام JavaScript في تصميم الويب:

1. إضافة التفاعل: تجعل صفحات الويب تفاعلية من خلال التعامل مع الأحداث مثل النقر، والتمرير، والإدخال في النماذج.


2. التعديل على المحتوى ديناميكيًا: يمكن تغيير النصوص، الصور، والألوان دون الحاجة إلى إعادة تحميل الصفحة.


3. إنشاء تأثيرات ورسوم متحركة: مثل القوائم المنسدلة، السلايدرات، والتأثيرات البصرية الأخرى.


4. التحقق من المدخلات: تستخدم لفحص البيانات المدخلة في النماذج قبل إرسالها إلى الخادم.


5. التعامل مع API's: تسمح بجلب بيانات من مصادر خارجية مثل واجهات برمجية لخدمات الطقس أو الأخبار.


6. تصميم واجهات مستخدم متقدمة: من خلال مكتبات وأُطر مثل React.js وVue.js وAngular.

anWriter Free

CSS & HTML & JavaScript Editor

مُرفق إليكم تفاصيل المشروع النهائي للمادة

سيتم شرحه كاملًا مع الأمثلة خلال محاضرات هذا الأسبوع

HTML5 headings from h1 to h6

Front-End Development

الفرق بين Semantic HTML و Non-Semantic HTML


1. Semantic HTML (HTML الدلالي)

يشير إلى العناصر التي تحمل معنى واضحًا يعبر عن محتواها ووظيفتها.

يساعد في تحسين إمكانية الوصول (Accessibility) وتحسين محركات البحث (SEO).

يسهل على المطورين والمتصفحات ومحركات البحث فهم بنية الصفحة.


أمثلة:

<header>العنوان الرئيسي</header>
<nav>روابط التنقل</nav>
<article>مقال</article>
<section>قسم من المحتوى</section>
<footer>التذييل</footer>

2. Non-Semantic HTML (HTML غير الدلالي)

لا يعطي أي دلالة عن محتواه، بل يعتمد فقط على الشكل والتنسيق.

يحتاج المطورون إلى إضافة class أو id لشرح وظيفته.

يصعب فهمه بالنسبة لمحركات البحث والأشخاص ذوي الاحتياجات الخاصة.


أمثلة:

<div class="header">العنوان الرئيسي</div>
<span class="nav">روابط التنقل</span>
<div class="article">مقال</div>
<div class="footer">التذييل</div>

HTML5 input types

أهم وسوم الوسائط في HTML5 مع شرح لكل منها:




1. <audio>

يستخدم لتضمين وتشغيل الملفات الصوتية على صفحات الويب.

السمات المهمة:

controls:
لإظهار عناصر التحكم بالصوت مثل التشغيل والإيقاف.

autoplay:
لتشغيل الصوت تلقائيًا عند تحميل الصفحة.

loop:
لتكرار تشغيل الصوت تلقائيًا.

muted:
لكتم الصوت افتراضيًا.

src:
لتحديد مصدر الملف الصوتي (يمكن استخدام <source> بدلًا منه).


مثال:

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
متصفحك لا يدعم عنصر الصوت.
</audio>


---

2. <video>

يستخدم لتضمين وتشغيل مقاطع الفيديو في صفحات الويب.

السمات المهمة:

controls:
لإظهار عناصر التحكم بالفيديو.

autoplay:
لتشغيل الفيديو تلقائيًا.

loop:
لتكرار تشغيل الفيديو.

muted:
لجعل الفيديو مكتومًا افتراضيًا.

poster:
لتحديد صورة تُعرض قبل بدء تشغيل الفيديو.

src:
لتحديد مصدر الفيديو (يمكن استخدام <source> بدلًا منه).


مثال:

<video controls width="600" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
متصفحك لا يدعم تشغيل الفيديو.
</video>


---

3. <source>

يُستخدم داخل <audio> أو <video> لإضافة مصادر متعددة للملف نفسه، بحيث يختار المتصفح التنسيق المناسب.

مثال داخل <video>:

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
متصفحك لا يدعم تشغيل الفيديو.
</video>

مثال داخل <audio>:

<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
متصفحك لا يدعم تشغيل الصوت.
</audio>


---

4. <track>

يُستخدم لإضافة ترجمات مصاحبة أو وصف صوتي أو ترجمة توضيحية داخل <video>.


السمات المهمة:

kind:
يحدد نوع الترجمة (مثل "subtitles" أو "captions").

src:
يحدد ملف الترجمة (VTT format).

srclang:
يحدد لغة الترجمة (مثل "en" للإنجليزية أو "ar" للعربية).

label:
يحدد اسم الترجمة المعروضة في قائمة الترجمة.


مثال:

<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_ar.vtt" kind="subtitles" srclang="ar" label="Arabic">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

إلى جميع الطلاب


بداية من الأسبوع القادم سنبدأ بمتابعة المشروع

المطلوب منكم تجهيز ال ٧ الصفحات بلغة HTML فقط كما تم توضيحه بالملف المرفق سابقًا


تنوية:-

الطالب الذي يصل الأسبوع القادم ولم يبداء بالمشروع سيتم الخصم عليه

CSS
هي لغة تستخدم لتنسيق صفحات الويب

أنواع CSS

هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:

1. Inline CSS (الأنماط الداخلية)

يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.

تستخدم خاصية style داخل الوسم.


مثال:

<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>

الميزات:

سهل وسريع للتعديلات الصغيرة.

يؤثر فقط على العنصر المحدد.


العيوب:

غير عملي مع المشاريع الكبيرة.

يصعب الصيانة والتعديل لاحقًا.




2. Internal CSS (الأنماط الداخلية في رأس الصفحة)

يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).


مثال:

<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>

الميزات:

مفيد لتنسيق صفحة واحدة فقط.

منظم أكثر من inline.


العيوب:

لا يمكن إعادة استخدامه عبر صفحات متعددة.





3. External CSS (الأنماط الخارجية في ملف منفصل)

يتم كتابة CSS في ملف منفصل بامتداد .css.

يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.


مثال لملف HTML:

<head>
<link rel="stylesheet" href="style.css">
</head>

مثال لملف style.css:

p {
color: green;
font-weight: bold;
}

الميزات:

الأفضل للمشاريع الكبيرة.

يسهل إعادة الاستخدام والصيانة.

يتم تحميله مرة واحدة ويوفر الأداء.


العيوب:

يحتاج إلى تحميل ملف خارجي.





CSS Syntax (بنية CSS)

بنية CSS تتكون من:

selector {
property: value;
}

شرح المكونات:

العنصر الشرح

selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.


مثال:

h1 {
color: red;
text-align: center;
font-size: 30px;
}

هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.




Inline CSS

كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.

مثال عملي:

<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>

التفسير:

style="..."
يحتوي على مجموعة خصائص CSS.

background-color: green; تجعل خلفية الزر خضراء.

color: white; تجعل لون النص أبيض.

padding: 10px; تضيف مسافة داخلية داخل الزر.