עולם הפרונטאנד
אנציקלופדיה מקיפה לכל תחומי בניית ממשקי Web, מהמבנה הבסיסי של HTML ועד Frameworks, API, ביצועים, אבטחה וכלי פיתוח.
HTML CSS JavaScript DOM API UI HTTP Reactמהו Frontend?
Frontend הוא החלק במערכת Web שהמשתמש רואה ומפעיל. הוא כולל את מבנה התוכן, העיצוב, האינטראקציה, המדיה, הטפסים והתקשורת עם שירותים חיצוניים.
מפת התחום
HTML
מבנה ומשמעות של מסמך Web.
CSS
עיצוב, פריסה, צבעים, טיפוגרפיה ואנימציות.
JavaScript
לוגיקה, אינטראקציות, אירועים והתנהגות.
DOM
ייצוג המסמך ועבודה דינמית עם האלמנטים.
API
תקשורת בין הממשק לבין שירותים ונתונים.
UI
כפתורים, תפריטים, טפסים, חלונות ורכיבים.
אבטחה
הגנה על הממשק, הנתונים והתקשורת.
ביצועים
טעינה מהירה, אופטימיזציה וחוויית משתמש.
HTML
HTML מגדיר את המבנה והמשמעות של מסמך Web.
מושגים מרכזיים
Element
רכיב HTML.
Tag
תגית המגדירה את סוג הרכיב.
Attribute
מאפיין של אלמנט.
Semantic HTML
שימוש באלמנטים בעלי משמעות.
Head
מידע על המסמך ומשאבים.
Body
התוכן המוצג למשתמש.
Header
אזור הכותרת.
Nav
אזור ניווט.
Main
התוכן המרכזי.
Section
חלוקת תוכן לאזורים.
Article
יחידת תוכן עצמאית.
Footer
אזור תחתון של הדף.
דוגמה
<main>
<h1>כותרת ראשית</h1>
<p>
זהו טקסט המופיע באתר.
</p>
<a href="https://example.com">
קישור
</a>
</main>
CSS
CSS אחראי על המראה, העיצוב והפריסה.
תחומי CSS
Selectors
בחירת אלמנטים.
Box Model
Content, Padding, Border, Margin.
Flexbox
פריסה חד־ממדית.
Grid
פריסה דו־ממדית.
Position
static, relative, absolute, fixed, sticky.
Typography
גופנים, גדלים, משקלים וריווח.
Colors
צבעי טקסט, רקע, גבולות ואלמנטים.
Responsive
התאמה למסכים שונים.
Variables
משתני CSS.
Transitions
מעברים חזותיים.
Animations
אנימציות.
דוגמה
.card {
display: grid;
gap: 16px;
padding: 24px;
border: 1px solid #333;
border-radius: 12px;
}
JavaScript
JavaScript מוסיף לוגיקה, התנהגות ואינטראקציה.
מושגים
Variable
let ו־const.
Data Types
String, Number, Boolean, Object, Array ועוד.
Function
יחידת קוד המבצעת פעולה.
Condition
if, else, switch.
Loop
for, while, for...of.
Promise
פעולה אסינכרונית.
Async/Await
עבודה נוחה עם פעולות אסינכרוניות.
Module
חלוקת הקוד למודולים.
Object
מבנה נתונים המבוסס על מאפיינים וערכים.
Array
רשימה של ערכים.
דוגמה
const button =
document.querySelector("button");
button.addEventListener("click", () => {
alert("שלום!");
});
DOM
ה־DOM הוא הייצוג המבני של מסמך HTML.
פעולות מרכזיות
| פעולה | מטרה |
|---|---|
| querySelector | איתור אלמנט |
| querySelectorAll | איתור מספר אלמנטים |
| createElement | יצירת אלמנט |
| appendChild | הוספת אלמנט |
| remove | הסרת אלמנט |
| textContent | שינוי טקסט |
| classList | ניהול מחלקות CSS |
| addEventListener | האזנה לאירועים |
הדפדפן
הדפדפן הוא סביבת ההרצה של Frontend.
DOM
עבודה עם מסמך HTML.
Fetch
תקשורת עם שרתים.
History
ניהול היסטוריית ניווט.
Location
גישה לכתובת הנוכחית.
Console
כלי אבחון ופיתוח.
Geolocation
גישה למיקום בכפוף להרשאה.
Responsive Design
בניית ממשק המתאים למסכים בגדלים שונים.
Media Queries
כללים לפי רוחב ותנאי תצוגה.
Fluid Layout
פריסה גמישה.
Mobile First
תכנון המתחיל ממסכים קטנים.
Viewport
אזור התצוגה של הדפדפן.
UI ורכיבים
ממשק משתמש מורכב מרכיבים שניתן להציג ולעבוד איתם.
Button
פעולה.
Link
ניווט.
Card
יחידת תוכן.
Modal
חלון מעל התוכן.
Navigation
מערכת ניווט.
Dropdown
רשימת בחירה.
Tabs
מעבר בין אזורי תוכן.
Tooltip
מידע משלים.
Accordion
פתיחה וסגירה של תוכן.
Navbar
סרגל ניווט.
טפסים וקלט
טפסים מאפשרים למשתמש להזין ולשלוח מידע.
רכיבים
form, input, label, textarea, select, option, checkbox, radio, button, submit.
דוגמה
<form>
<label>שם</label>
<input
type="text"
required
>
<button type="submit">
שליחה
</button>
</form>
תמונה, אודיו ווידאו
Image
img, src, alt, loading.
Video
video, source, controls, poster.
Audio
audio, source, controls.
Iframe
הטמעת תוכן חיצוני כאשר האתר מאפשר זאת.
SVG
גרפיקה וקטורית.
Canvas
משטח ציור הנשלט באמצעות JavaScript.