Bootstrap-Cheat-Sheet-websitesetup.org_.pdf
616 KB
Bootstrap5 Cheat Sheet
Web Development
animation.gif
DOM (Document Object Model)
1. ما هو الـ DOM؟
DOM هو اختصار لـ Document Object Model، وهو عبارة عن واجهة برمجية تمثل هيكلة مستندات الويب (HTML أو XML) على هيئة شجرة من الكائنات (Objects)، بحيث يمكن التفاعل معها برمجيًا باستخدام JavaScript أو لغات أخرى.
2. كيف يعمل الـ DOM؟
عندما يقوم المتصفح بتحميل صفحة ويب، فإنه يقوم بتحويل ملف HTML إلى شجرة DOM تتكون من عناصر (Nodes) تمثل كل عنصر في الصفحة، مثل:
العناصر (Elements) مثل <div>، <p>، <h1>، <img>...
النصوص (Text Nodes) وهي المحتوى النصي داخل العناصر.
السمات (Attributes Nodes) مثل class="box" أو id="header".
بمجرد أن يصبح DOM جاهزًا، يمكن التعديل عليه وإجراء تغييرات على الصفحة باستخدام JavaScript.
---
3. كيفية التفاعل مع DOM باستخدام JavaScript
بما أن DOM هو كائن (Object)، فيمكن الوصول إلى عناصره وتعديلها باستخدام JavaScript من خلال عدة طرق، مثل:
أ. الوصول إلى العناصر (Selecting Elements)
يمكنك اختيار العناصر في الصفحة باستخدام:
document.getElementById("myElement") → لاختيار عنصر بواسطة ID.
document.getElementsByClassName("myClass") → لاختيار العناصر بواسطة Class.
document.getElementsByTagName("p") → لاختيار جميع العناصر من نوع معين.
document.querySelector(".myClass") → لاختيار أول عنصر مطابق للبحث.
document.querySelectorAll("p") → لاختيار جميع العناصر المطابقة.
ب. تعديل محتوى العناصر
element.innerHTML = "مرحبا" → يغير المحتوى الداخلي لعنصر.
element.textContent = "مرحبا" → يغير النص فقط بدون HTML.
ج. تغيير الأنماط (CSS)
element.style.color = "red" → تغيير لون النص.
element.style.backgroundColor = "blue" → تغيير لون الخلفية.
د. التعامل مع الأحداث (Events)
element.addEventListener("click", function() { alert("تم النقر!"); })
→ تنفيذ حدث عند النقر على العنصر.
هـ. إضافة وحذف عناصر
document.createElement("div") →
إنشاء عنصر جديد.
parentElement.appendChild(newElement) →
إضافة عنصر داخل عنصر آخر.
element.remove() →
حذف العنصر من الصفحة.
---
4. مثال عملي
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مثال على DOM</title>
</head>
<body>
<h1 id="title">مرحبا بك!</h1>
<button onclick="changeText()">اضغط هنا</button>
<script>
function changeText() {
document.getElementById("title").textContent = "تم التغيير!";
}
</script>
</body>
</html>
شرح الكود:
1. لدينا عنوان <h1> يحتوي على نص.
2. عند الضغط على الزر، يتم استدعاء changeText().
3. تستبدل الدالة changeText() النص الموجود في <h1> بنص جديد.
---
5. لماذا الـ DOM مهم؟
يمكنك التفاعل مع عناصر الصفحة ديناميكيًا دون الحاجة لإعادة تحميل الصفحة.
يستخدم في تطوير تطبيقات الويب التفاعلية مثل تغيير المحتوى، وإضافة الرسوم المتحركة، والتفاعل مع المستخدم.
ضروري في مكتبات وأُطر العمل الحديثة مثل React.js و Vue.js التي تعتمد على مفهوم Virtual DOM لتحسين الأداء.
1. ما هو الـ DOM؟
DOM هو اختصار لـ Document Object Model، وهو عبارة عن واجهة برمجية تمثل هيكلة مستندات الويب (HTML أو XML) على هيئة شجرة من الكائنات (Objects)، بحيث يمكن التفاعل معها برمجيًا باستخدام JavaScript أو لغات أخرى.
2. كيف يعمل الـ DOM؟
عندما يقوم المتصفح بتحميل صفحة ويب، فإنه يقوم بتحويل ملف HTML إلى شجرة DOM تتكون من عناصر (Nodes) تمثل كل عنصر في الصفحة، مثل:
العناصر (Elements) مثل <div>، <p>، <h1>، <img>...
النصوص (Text Nodes) وهي المحتوى النصي داخل العناصر.
السمات (Attributes Nodes) مثل class="box" أو id="header".
بمجرد أن يصبح DOM جاهزًا، يمكن التعديل عليه وإجراء تغييرات على الصفحة باستخدام JavaScript.
---
3. كيفية التفاعل مع DOM باستخدام JavaScript
بما أن DOM هو كائن (Object)، فيمكن الوصول إلى عناصره وتعديلها باستخدام JavaScript من خلال عدة طرق، مثل:
أ. الوصول إلى العناصر (Selecting Elements)
يمكنك اختيار العناصر في الصفحة باستخدام:
document.getElementById("myElement") → لاختيار عنصر بواسطة ID.
document.getElementsByClassName("myClass") → لاختيار العناصر بواسطة Class.
document.getElementsByTagName("p") → لاختيار جميع العناصر من نوع معين.
document.querySelector(".myClass") → لاختيار أول عنصر مطابق للبحث.
document.querySelectorAll("p") → لاختيار جميع العناصر المطابقة.
ب. تعديل محتوى العناصر
element.innerHTML = "مرحبا" → يغير المحتوى الداخلي لعنصر.
element.textContent = "مرحبا" → يغير النص فقط بدون HTML.
ج. تغيير الأنماط (CSS)
element.style.color = "red" → تغيير لون النص.
element.style.backgroundColor = "blue" → تغيير لون الخلفية.
د. التعامل مع الأحداث (Events)
element.addEventListener("click", function() { alert("تم النقر!"); })
→ تنفيذ حدث عند النقر على العنصر.
هـ. إضافة وحذف عناصر
document.createElement("div") →
إنشاء عنصر جديد.
parentElement.appendChild(newElement) →
إضافة عنصر داخل عنصر آخر.
element.remove() →
حذف العنصر من الصفحة.
---
4. مثال عملي
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مثال على DOM</title>
</head>
<body>
<h1 id="title">مرحبا بك!</h1>
<button onclick="changeText()">اضغط هنا</button>
<script>
function changeText() {
document.getElementById("title").textContent = "تم التغيير!";
}
</script>
</body>
</html>
شرح الكود:
1. لدينا عنوان <h1> يحتوي على نص.
2. عند الضغط على الزر، يتم استدعاء changeText().
3. تستبدل الدالة changeText() النص الموجود في <h1> بنص جديد.
---
5. لماذا الـ DOM مهم؟
يمكنك التفاعل مع عناصر الصفحة ديناميكيًا دون الحاجة لإعادة تحميل الصفحة.
يستخدم في تطوير تطبيقات الويب التفاعلية مثل تغيير المحتوى، وإضافة الرسوم المتحركة، والتفاعل مع المستخدم.
ضروري في مكتبات وأُطر العمل الحديثة مثل React.js و Vue.js التي تعتمد على مفهوم Virtual DOM لتحسين الأداء.
This media is not supported in your browser
VIEW IN TELEGRAM
Object fit CSS
This media is not supported in your browser
VIEW IN TELEGRAM
3 Ways to center a div
أهم وسوم الوسائط في 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>
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>
This media is not supported in your browser
VIEW IN TELEGRAM
Linear Gradient CSS
This media is not supported in your browser
VIEW IN TELEGRAM
Padding vs Margin CSS
This media is not supported in your browser
VIEW IN TELEGRAM
Hover Transition HTML & CSS
This media is not supported in your browser
VIEW IN TELEGRAM
Searchable Drop Down List HTML
This media is not supported in your browser
VIEW IN TELEGRAM
Loading Lazy HTML
This media is not supported in your browser
VIEW IN TELEGRAM
Text Animation CSS
Web Development
Photo
الفرق بين 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>
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>
This media is not supported in your browser
VIEW IN TELEGRAM
Sort function in JS
Best way to center a div:-
Using flexbox
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Div - Flexbox</title>
<style>
.parent {
display: flex;
justify-content: center;
/* أفقيًا */
align-items: center;
/* عموديًا */
height: 100vh;
background-color: #f0f0f0;
}
.child {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Centered</div>
</div>
</body>
</html>
Using flexbox
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Div - Flexbox</title>
<style>
.parent {
display: flex;
justify-content: center;
/* أفقيًا */
align-items: center;
/* عموديًا */
height: 100vh;
background-color: #f0f0f0;
}
.child {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Centered</div>
</div>
</body>
</html>