Web Development
Photo
لغة JavaScript هي لغة برمجة ديناميكية تُستخدم بشكل رئيسي في تطوير الويب لإنشاء صفحات تفاعلية وتحسين تجربة المستخدم. تُعد واحدة من الركائز الثلاثة الأساسية في تطوير الويب بجانب HTML (لبناء الهيكل) وCSS (لتنسيق الشكل).
Web Development
Photo
استخدام JavaScript في تصميم الويب:
1. إضافة التفاعل: تجعل صفحات الويب تفاعلية من خلال التعامل مع الأحداث مثل النقر، والتمرير، والإدخال في النماذج.
2. التعديل على المحتوى ديناميكيًا: يمكن تغيير النصوص، الصور، والألوان دون الحاجة إلى إعادة تحميل الصفحة.
3. إنشاء تأثيرات ورسوم متحركة: مثل القوائم المنسدلة، السلايدرات، والتأثيرات البصرية الأخرى.
4. التحقق من المدخلات: تستخدم لفحص البيانات المدخلة في النماذج قبل إرسالها إلى الخادم.
5. التعامل مع API's: تسمح بجلب بيانات من مصادر خارجية مثل واجهات برمجية لخدمات الطقس أو الأخبار.
6. تصميم واجهات مستخدم متقدمة: من خلال مكتبات وأُطر مثل React.js وVue.js وAngular.
1. إضافة التفاعل: تجعل صفحات الويب تفاعلية من خلال التعامل مع الأحداث مثل النقر، والتمرير، والإدخال في النماذج.
2. التعديل على المحتوى ديناميكيًا: يمكن تغيير النصوص، الصور، والألوان دون الحاجة إلى إعادة تحميل الصفحة.
3. إنشاء تأثيرات ورسوم متحركة: مثل القوائم المنسدلة، السلايدرات، والتأثيرات البصرية الأخرى.
4. التحقق من المدخلات: تستخدم لفحص البيانات المدخلة في النماذج قبل إرسالها إلى الخادم.
5. التعامل مع API's: تسمح بجلب بيانات من مصادر خارجية مثل واجهات برمجية لخدمات الطقس أو الأخبار.
6. تصميم واجهات مستخدم متقدمة: من خلال مكتبات وأُطر مثل React.js وVue.js وAngular.
This media is not supported in your browser
VIEW IN TELEGRAM
3 Ways to center a div in css
هناك ثلاث طرق لربط ملفات CSS و JavaScript مع HTML:
1. الربط الخارجي (External)
يتم إنشاء ملف CSS أو JavaScript منفصل ثم يتم ربطه داخل ملف HTML باستخدام وسم <link> لملفات CSS ووسم <script> لملفات JavaScript.
مثال على ربط CSS خارجيًا:
<head>
<link rel="stylesheet" href="styles.css">
</head>
مثال على ربط JavaScript خارجيًا:
<body>
<script src="script.js"></script>
</body>
2. الربط الداخلي (Internal)
يتم كتابة CSS داخل وسم <style> في ملف HTML، أو كتابة JavaScript داخل وسم <script> في نفس الملف.
مثال على CSS داخلي:
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>
مثال على JavaScript داخلي:
<head>
<script>
function showMessage() {
alert("Hello, World!");
}
</script>
</head>
3. الربط المباشر (Inline)
يتم إضافة CSS مباشرة داخل وسم العنصر باستخدام خاصية style=""، أو يتم إضافة JavaScript مباشرة في خاصية onclick="" أو onload="" وغيرها.
مثال على CSS مضمّن (Inline CSS):
<p style="color: red; font-size: 20px;">مرحبا بالعالم</p>
مثال على JavaScript مضمّن (Inline JavaScript):
<button onclick="alert('تم الضغط على الزر!')">اضغط هنا</button>
ما هي الطريقة الأفضل؟
الربط الخارجي هو الأفضل من حيث التنظيم، وإعادة الاستخدام، وسهولة الصيانة.
الربط الداخلي مفيد في بعض الحالات مثل تخصيص أنماط أو سكريبتات لصفحة معينة دون الحاجة إلى ملف خارجي.
الربط المباشر يُفضل تجنبه إلا في الحالات الضرورية لأنه يسبب فوضى في الكود وصعوبة في الصيانة.
1. الربط الخارجي (External)
يتم إنشاء ملف CSS أو JavaScript منفصل ثم يتم ربطه داخل ملف HTML باستخدام وسم <link> لملفات CSS ووسم <script> لملفات JavaScript.
مثال على ربط CSS خارجيًا:
<head>
<link rel="stylesheet" href="styles.css">
</head>
مثال على ربط JavaScript خارجيًا:
<body>
<script src="script.js"></script>
</body>
2. الربط الداخلي (Internal)
يتم كتابة CSS داخل وسم <style> في ملف HTML، أو كتابة JavaScript داخل وسم <script> في نفس الملف.
مثال على CSS داخلي:
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>
مثال على JavaScript داخلي:
<head>
<script>
function showMessage() {
alert("Hello, World!");
}
</script>
</head>
3. الربط المباشر (Inline)
يتم إضافة CSS مباشرة داخل وسم العنصر باستخدام خاصية style=""، أو يتم إضافة JavaScript مباشرة في خاصية onclick="" أو onload="" وغيرها.
مثال على CSS مضمّن (Inline CSS):
<p style="color: red; font-size: 20px;">مرحبا بالعالم</p>
مثال على JavaScript مضمّن (Inline JavaScript):
<button onclick="alert('تم الضغط على الزر!')">اضغط هنا</button>
ما هي الطريقة الأفضل؟
الربط الخارجي هو الأفضل من حيث التنظيم، وإعادة الاستخدام، وسهولة الصيانة.
الربط الداخلي مفيد في بعض الحالات مثل تخصيص أنماط أو سكريبتات لصفحة معينة دون الحاجة إلى ملف خارجي.
الربط المباشر يُفضل تجنبه إلا في الحالات الضرورية لأنه يسبب فوضى في الكود وصعوبة في الصيانة.
Media Query
هي تقنية في CSS3 تُستخدم لجعل تصميم الويب متجاوبًا مع أحجام الشاشات المختلفة، مثل شاشات الكمبيوتر، الأجهزة اللوحية، والهواتف المحمولة.
تتيح لك Media Query تطبيق أنماط CSS مختلفة بناءً على خصائص الجهاز مثل عرض الشاشة، الطول، الدقة، الاتجاه (عمودي أو أفقي) وغيرها.
هي تقنية في CSS3 تُستخدم لجعل تصميم الويب متجاوبًا مع أحجام الشاشات المختلفة، مثل شاشات الكمبيوتر، الأجهزة اللوحية، والهواتف المحمولة.
تتيح لك Media Query تطبيق أنماط CSS مختلفة بناءً على خصائص الجهاز مثل عرض الشاشة، الطول، الدقة، الاتجاه (عمودي أو أفقي) وغيرها.
كيفية استخدام Media Query
يتم تعريف Media Query باستخدام الكلمة المفتاحية @media، متبوعة بنوع الوسائط (مثل screen أو print) ثم الشروط التي يجب أن تتحقق، يليها كود CSS الذي سيتم تطبيقه.
1. استخدام Media Query داخل ملف CSS خارجي
تنسيق عام للصفحة
body {
background-color: white;
font-size: 18px;
}
عندما يكون عرض الشاشة 768 بكسل أو أقل (مثل التابلت والهواتف)
@media screen and (max-width: 768px) {
body {
background-color: lightgray;
font-size: 16px;
}
}
عندما يكون عرض الشاشة 480 بكسل أو أقل (مثل الهواتف الصغيرة)
@media screen and (max-width: 480px) {
body {
background-color: lightblue;
font-size: 14px;
}
}
2. استخدام Media Query داخل وسم <style> في HTML
<head>
<style>
@media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
</style>
</head>
3. استخدام Media Query داخل HTML مباشرة (ينصح بتجنبها)
<p style="color: red; font-size: 18px; @media (max-width: 500px) { font-size: 14px; }">نص متجاوب</p>
⚠ هذه الطريقة غير مدعومة في جميع المتصفحات، لذلك لا يُنصح باستخدامها.
يتم تعريف Media Query باستخدام الكلمة المفتاحية @media، متبوعة بنوع الوسائط (مثل screen أو print) ثم الشروط التي يجب أن تتحقق، يليها كود CSS الذي سيتم تطبيقه.
1. استخدام Media Query داخل ملف CSS خارجي
تنسيق عام للصفحة
body {
background-color: white;
font-size: 18px;
}
عندما يكون عرض الشاشة 768 بكسل أو أقل (مثل التابلت والهواتف)
@media screen and (max-width: 768px) {
body {
background-color: lightgray;
font-size: 16px;
}
}
عندما يكون عرض الشاشة 480 بكسل أو أقل (مثل الهواتف الصغيرة)
@media screen and (max-width: 480px) {
body {
background-color: lightblue;
font-size: 14px;
}
}
2. استخدام Media Query داخل وسم <style> في HTML
<head>
<style>
@media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
</style>
</head>
3. استخدام Media Query داخل HTML مباشرة (ينصح بتجنبها)
<p style="color: red; font-size: 18px; @media (max-width: 500px) { font-size: 14px; }">نص متجاوب</p>
⚠ هذه الطريقة غير مدعومة في جميع المتصفحات، لذلك لا يُنصح باستخدامها.
أهم خصائص Media Query في CSS3
max-width:
يطبق الأنماط عندما يكون عرض الشاشة أقل من أو يساوي قيمة معينة.
min-width:
يطبق الأنماط عندما يكون عرض الشاشة أكبر من أو يساوي قيمة معينة.
max-height:
يطبق الأنماط عندما يكون ارتفاع الشاشة أقل من أو يساوي قيمة معينة.
min-height:
يطبق الأنماط عندما يكون ارتفاع الشاشة أكبر من أو يساوي قيمة معينة.
orientation:
يحدد إذا كان اتجاه الشاشة أفقي (landscape) أو عمودي (portrait).
aspect-ratio:
يطبق الأنماط بناءً على نسبة العرض إلى الارتفاع للشاشة.
resolution:
يطبق الأنماط بناءً على دقة الشاشة (مثل Retina Display).
max-width:
يطبق الأنماط عندما يكون عرض الشاشة أقل من أو يساوي قيمة معينة.
min-width:
يطبق الأنماط عندما يكون عرض الشاشة أكبر من أو يساوي قيمة معينة.
max-height:
يطبق الأنماط عندما يكون ارتفاع الشاشة أقل من أو يساوي قيمة معينة.
min-height:
يطبق الأنماط عندما يكون ارتفاع الشاشة أكبر من أو يساوي قيمة معينة.
orientation:
يحدد إذا كان اتجاه الشاشة أفقي (landscape) أو عمودي (portrait).
aspect-ratio:
يطبق الأنماط بناءً على نسبة العرض إلى الارتفاع للشاشة.
resolution:
يطبق الأنماط بناءً على دقة الشاشة (مثل Retina Display).
في CSS، كل من margin و padding يستخدمان للتحكم في التباعد حول العناصر، ولكن هناك فرق بينهما:
1. الفرق بين margin و padding
margin: المسافة الخارجية التي تفصل العنصر عن العناصر الأخرى حوله.
padding: المسافة الداخلية بين محتوى العنصر وحدوده (border).
2. شرح بالمخطط
يمكن تصور ذلك كمربع يحتوي على أربع طبقات:
المحتوى (Content): النص أو الصورة داخل العنصر.
الحشو (Padding): المسافة بين المحتوى والحدود.
الحدود (Border): الإطار المحيط بالعنصر.
الهامش (Margin): المسافة بين العنصر والعناصر المجاورة.
3. أمثلة عملية
مثال على margin
div {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 20px;
}
يضيف مسافة خارجية 20px من جميع الجهات
> هنا، سيتم إضافة مسافة 20px خارج العنصر، مما يؤدي إلى إبعاده عن العناصر الأخرى.
مثال على padding
div {
width: 200px;
height: 100px;
background-color: lightgreen;
padding: 20px;
}
يضيف مسافة داخلية 20px من جميع الجهات
> هنا، سيبتعد المحتوى داخل العنصر بمقدار 20px عن الحدود الداخلية.
4. الخصائص لكل منهما
margin:
يمكن تعيينه لكل جهة على حدة:
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
أو استخدام الخاصية المختصرة:
margin: 10px 15px 20px 25px;
(أعلى - يمين - أسفل - يسار)
يمكن أن تكون القيم:
عدد بيكسلات (px) أو نسبة (%) أو auto (يتم حسابه تلقائيًا).
padding:
يمكن تعيينه بنفس الطريقة:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
أو استخدام المختصر:
padding: 10px 15px 20px 25px;
لا يمكن أن يكون auto مثل margin.
5. متى نستخدم margin ومتى نستخدم padding؟
استخدم margin عندما تحتاج إلى إبعاد العنصر عن العناصر الأخرى.
استخدم padding عندما تحتاج إلى إبعاد المحتوى داخل العنصر عن حدوده.
1. الفرق بين margin و padding
margin: المسافة الخارجية التي تفصل العنصر عن العناصر الأخرى حوله.
padding: المسافة الداخلية بين محتوى العنصر وحدوده (border).
2. شرح بالمخطط
يمكن تصور ذلك كمربع يحتوي على أربع طبقات:
المحتوى (Content): النص أو الصورة داخل العنصر.
الحشو (Padding): المسافة بين المحتوى والحدود.
الحدود (Border): الإطار المحيط بالعنصر.
الهامش (Margin): المسافة بين العنصر والعناصر المجاورة.
3. أمثلة عملية
مثال على margin
div {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 20px;
}
يضيف مسافة خارجية 20px من جميع الجهات
> هنا، سيتم إضافة مسافة 20px خارج العنصر، مما يؤدي إلى إبعاده عن العناصر الأخرى.
مثال على padding
div {
width: 200px;
height: 100px;
background-color: lightgreen;
padding: 20px;
}
يضيف مسافة داخلية 20px من جميع الجهات
> هنا، سيبتعد المحتوى داخل العنصر بمقدار 20px عن الحدود الداخلية.
4. الخصائص لكل منهما
margin:
يمكن تعيينه لكل جهة على حدة:
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
أو استخدام الخاصية المختصرة:
margin: 10px 15px 20px 25px;
(أعلى - يمين - أسفل - يسار)
يمكن أن تكون القيم:
عدد بيكسلات (px) أو نسبة (%) أو auto (يتم حسابه تلقائيًا).
padding:
يمكن تعيينه بنفس الطريقة:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
أو استخدام المختصر:
padding: 10px 15px 20px 25px;
لا يمكن أن يكون auto مثل margin.
5. متى نستخدم margin ومتى نستخدم padding؟
استخدم margin عندما تحتاج إلى إبعاد العنصر عن العناصر الأخرى.
استخدم padding عندما تحتاج إلى إبعاد المحتوى داخل العنصر عن حدوده.
This media is not supported in your browser
VIEW IN TELEGRAM
Padding vs Margin