\n" }, { title:"טקסט", text:"אלמנטים כמו h1 עד h6 מייצגים כותרות ברמות שונות. p מייצג פסקה. strong ו־em מוסיפים משמעות סמנטית. code ו־pre מתאימים להצגת קוד.", code: "

כותרת ראשית

\n

כותרת משנה

\n

זוהי פסקה.

\nטקסט חשוב\nהדגשה\n
const x = 10;
" }, { title:"קישורים", text:"אלמנט a יוצר קישור. href קובע את היעד. target מאפשר למשל פתיחה בחלון חדש, ו־rel מתאר את היחס או מגביל התנהגויות מסוימות.", code: "לאתר\n\n פתיחה בחלון חדש\n" }, { title:"תמונות ומדיה", text:"HTML מספק אלמנטים להצגת תמונות, וידאו ואודיו וכן להטמעת מסמכים או תכנים חיצוניים.", code: "\"תיאור\n\n\n\n" }, { title:"רשימות וטבלאות", text:"רשימות מתאימות להצגת אוסף פריטים. טבלאות מתאימות לנתונים טבלאיים שבהם יש קשר בין שורות ועמודות.", code: "\n\n\n \n \n \n \n
שםתחום
HTMLמבנה
" }, { title:"טפסים", text:"טפסים מאפשרים למשתמש להזין מידע. label מחבר תווית לשדה, required מאפשר ולידציה בסיסית, ו־button יכול לשלוח את הטופס או לבצע פעולה.", code: "
\n \n \n\n \n \n\n \n
" }, { title:"HTML סמנטי", text:"אלמנטים כגון header, nav, main, section, article, aside ו־footer מתארים את תפקיד התוכן. מבנה סמנטי מסייע לנגישות, תחזוקה, SEO והבנת המסמך.", code: "
כותרת האתר
\n\n
\n
\n
תוכן
\n
\n
\n" }, { title:"HTML מתקדם", text:"data-* מאפשר שמירת מידע מותאם באלמנט. template מאפשר להגדיר תבנית שאינה מוצגת מיד. details ו־summary מאפשרים אזור נפתח. dialog מספק מנגנון לדיאלוגים.", code: "\n\n
\n פרטים נוספים\n

תוכן מוסתר שניתן לפתוח.

\n
" } ]); /* ---------- CSS ---------- */ addPage("css","CSS", "CSS אחראית על המראה, הפריסה, ההתאמה למסכים והאנימציה של ממשק Web.", [ { title:"יסודות CSS", text:"כלל CSS מורכב מ־selector ומבלוק declarations. כל declaration מורכב מ־property ו־value. מנגנון cascade קובע אילו כללים חלים כאשר קיימות התנגשות או ירושה.", code: ".card {\n color: white;\n background: #151922;\n padding: 20px;\n}" }, { title:"Selectors", text:"Selectors מאפשרים לבחור אלמנטים. ניתן לבחור לפי תגית, class, id, attribute, קשר בין אלמנטים, pseudo-class או pseudo-element.", code: "p { }\n.card { }\n#main { }\ninput[type=\"email\"] { }\nnav a:hover { }\nbutton::before { }" }, { title:"Box Model", text:"כל אלמנט מתואר באמצעות content, padding, border ו־margin. box-sizing מאפשר לקבוע כיצד width ו־height מחושבים.", code: ".box {\n width: 300px;\n padding: 20px;\n border: 1px solid #444;\n margin: 10px;\n box-sizing: border-box;\n}" }, { title:"Flexbox", text:"Flexbox מתאים בעיקר לפריסה חד־ממדית. הוא מאפשר לשלוט בכיוון, יישור, רווחים, עטיפה וגודל יחסי של פריטים.", code: ".container {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n flex-wrap: wrap;\n}" }, { title:"Grid", text:"CSS Grid מתאים לפריסות דו־ממדיות של שורות ועמודות. ניתן להגדיר תבניות, אזורים, רווחים ויחידות גמישות.", code: ".grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n}" }, { title:"Position", text:"static הוא המצב הרגיל. relative מאפשר שינוי מיקום ביחס למיקום המקורי. absolute מוציא את האלמנט מזרימת המסמך. fixed נצמד לחלון ו־sticky משלב התנהגות יחסית והיצמדות.", code: ".menu {\n position: sticky;\n top: 0;\n z-index: 10;\n}" }, { title:"Responsive Design", text:"Media Queries מאפשרות לשנות את העיצוב בהתאם לרוחב או מאפיינים אחרים של המסך. גישת Mobile First מתחילה מעיצוב למסכים קטנים ומרחיבה אותו.", code: ".cards {\n display:grid;\n grid-template-columns:1fr;\n}\n\n@media (min-width:700px) {\n .cards {\n grid-template-columns:repeat(3,1fr);\n }\n}" }, { title:"אנימציות", text:"transition מתאים למעבר בין מצבים. animation ו־keyframes מאפשרים רצף אנימציה. transform משנה מיקום, סיבוב או קנה מידה.", code: ".button {\n transition:transform .2s ease;\n}\n\n.button:hover {\n transform:translateY(-2px) scale(1.02);\n}" }, { title:"CSS מתקדם", text:"משתני CSS, calc, min, max ו־clamp מאפשרים ליצור מערכות עיצוב גמישות. :is, :where ו־:has מספקים יכולות בחירה מתקדמות. Container Queries מאפשרות התאמה לפי גודל הקונטיינר.", code: ":root {\n --accent:#c9a86a;\n --space:clamp(12px,2vw,28px);\n}\n\n.title {\n font-size:clamp(28px,5vw,64px);\n}" } ]); /* ---------- JAVASCRIPT ---------- */ addPage("javascript","JavaScript", "שפת תכנות המאפשרת להוסיף לוגיקה, אינטראקציה, עיבוד נתונים ותקשורת לממשק.", [ { title:"משתנים וערכים", text:"JavaScript כוללת ערכים מסוגים שונים. const משמש כאשר המשתנה לא יקבל השמה חדשה, ו־let כאשר נדרשת השמה מחדש. var הוא מנגנון ותיק עם כללי scope שונים.", code: "const name = \"Frontend\";\nlet count = 0;\ncount = count + 1;\n\nconst active = true;\nconst empty = null;\nlet unknown;" }, { title:"סוגי נתונים", text:"הסוגים המרכזיים כוללים string, number, boolean, null, undefined, object ו־symbol. Arrays הם אובייקטים מיוחדים המשמשים כאוספים מסודרים.", code: "const text = \"שלום\";\nconst number = 42;\nconst enabled = true;\nconst user = { name:\"דני\" };\nconst items = [1,2,3];" }, { title:"תנאים ולולאות", text:"תנאים מאפשרים לבחור פעולה. לולאות מאפשרות לבצע פעולה על פני סדרת ערכים או כל עוד תנאי מתקיים.", code: "if (age >= 18) {\n console.log(\"בוגר\");\n} else {\n console.log(\"צעיר\");\n}\n\nfor (const item of items) {\n console.log(item);\n}" }, { title:"Functions", text:"פונקציה היא יחידת פעולה שניתן להפעיל עם פרמטרים ולהחזיר ממנה ערך. Arrow Functions מספקות תחביר מקוצר ומשתלבות רבות עם callbacks.", code: "function add(a,b) {\n return a + b;\n}\n\nconst multiply = (a,b) => a * b;\n\nconsole.log(add(2,3));" }, { title:"Arrays", text:"מתודות כגון map, filter, reduce, find, some ו־every מאפשרות לעבד אוספים בצורה הצהרתית.", code: "const numbers = [1,2,3,4];\n\nconst doubled = numbers.map(n => n * 2);\nconst even = numbers.filter(n => n % 2 === 0);\nconst total = numbers.reduce((sum,n) => sum + n,0);" }, { title:"Objects", text:"Objects מאחסנים מאפיינים ומתודות. Destructuring מאפשר לפרק ערכים מתוך אובייקטים ומערכים. Spread ו־Rest מאפשרים עבודה גמישה עם אוספים.", code: "const user = {\n name:\"דנה\",\n age:30\n};\n\nconst {name,age} = user;\nconst copy = {...user};" }, { title:"DOM", text:"JavaScript יכולה לבחור אלמנטים במסמך, לשנות תוכן, להוסיף ולהסיר אלמנטים, לשנות classes ולהאזין לאירועים.", code: "const button = document.querySelector(\"button\");\n\nbutton.addEventListener(\"click\", () => {\n document.body.classList.toggle(\"dark\");\n});" }, { title:"Events", text:"אירועים מייצגים פעולות או שינויים כגון click, input, submit, change ואירועי מקלדת. Event Bubbling מאפשר לאירוע לעלות מהאלמנט אל אבותיו.", code: "document.querySelector(\"form\")\n .addEventListener(\"submit\", event => {\n event.preventDefault();\n console.log(\"נשלח\");\n });" }, { title:"Asynchronous JavaScript", text:"פעולות רשת ופעולות אחרות אינן תמיד מסתיימות מיד. Promise מייצג תוצאה עתידית. async ו־await מאפשרים לכתוב קוד אסינכרוני בצורה קריאה.", code: "async function loadUsers() {\n const response = await fetch(\"/api/users\");\n const users = await response.json();\n console.log(users);\n}\n\nloadUsers();" }, { title:"Browser APIs", text:"הדפדפן מספק APIs כגון localStorage, History, Clipboard, Geolocation, Notifications ו־Web Workers.", code: "localStorage.setItem(\"theme\",\"dark\");\nconst theme = localStorage.getItem(\"theme\");\n\nnavigator.clipboard.writeText(\"שלום\");" }, { title:"Modules, Classes ו־Errors", text:"Modules מאפשרים לפצל קוד לקבצים לוגיים. Classes מספקות תחביר ליצירת אובייקטים ומבנים. try/catch מאפשר לטפל בשגיאות בזמן ריצה.", code: "export function add(a,b) {\n return a + b;\n}\n\ntry {\n riskyOperation();\n} catch (error) {\n console.error(error);\n}" } ]); /* ---------- DOM ---------- */ addPage("dom","DOM", "Document Object Model — הייצוג של מסמך HTML כעץ אובייקטים ש־JavaScript יכולה לקרוא ולשנות.", [ { title:"DOM Tree", text:"הדפדפן מפרש HTML ובונה עץ. document נמצא בראש עץ המסמך, ומתחתיו נמצאים אלמנטים, צמתי טקסט ויחסים בין הורים לילדים.", code: "document\n└── html\n ├── head\n └── body\n ├── header\n └── main" }, { title:"Selection", text:"ניתן לבחור אלמנטים באמצעות querySelector, querySelectorAll ו־getElementById.", code: "const title = document.querySelector(\"h1\");\nconst cards = document.querySelectorAll(\".card\");\nconst app = document.getElementById(\"app\");" }, { title:"Creation and Modification", text:"JavaScript יכולה ליצור אלמנטים חדשים, להוסיף אותם למסמך, לשנות טקסט, attributes ו־classes.", code: "const button = document.createElement(\"button\");\nbutton.textContent = \"לחץ כאן\";\nbutton.classList.add(\"primary\");\ndocument.body.append(button);" }, { title:"Events ו־Propagation", text:"אירועים עוברים במסלול capture, target ו־bubble. Event Delegation מאפשר להאזין לאירועים על אב במקום ליצור מאזין לכל ילד.", code: "document.querySelector(\"ul\")\n .addEventListener(\"click\", event => {\n const item = event.target.closest(\"li\");\n if (!item) return;\n console.log(item.textContent);\n });" } ]); /* ---------- BROWSER ---------- */ addPage("browser","הדפדפן", "הסביבה שבה HTML, CSS ו־JavaScript נטענים, מפוענחים, מעובדים ומוצגים למשתמש.", [ { title:"Rendering Pipeline", text:"הדפדפן מוריד משאבים, מפרש HTML ו־CSS, יוצר DOM ו־CSSOM, בונה Render Tree, מבצע Layout, Paint ו־Composite.", code: "HTML\n ↓\nDOM\n ↓\nCSSOM\n ↓\nRender Tree\n ↓\nLayout\n ↓\nPaint\n ↓\nComposite\n ↓\nמסך" }, { title:"JavaScript Engine", text:"מנוע JavaScript מפרש או מהדר קוד JavaScript ומריץ אותו. מנועים שונים קיימים בדפדפנים שונים, אך כולם מספקים סביבת הרצה של JavaScript.", }, { title:"DevTools", text:"כלי המפתחים מאפשרים לבדוק Elements, Console, Network, Sources, Application, Storage וביצועים. הם כלי מרכזי באבחון בעיות Frontend." }, { title:"Reflow ו־Repaint", text:"שינויי סגנון מסוימים דורשים חישוב Layout מחדש. שינויים אחרים משפיעים רק על ציור. תכנון נכון יכול לצמצם עבודה מיותרת בזמן אינטראקציה." } ]); /* ---------- APIS ---------- */ addPage("apis","Web APIs", "ממשקים שהדפדפן מספק ל־JavaScript כדי לבצע פעולות מעבר לשפת הליבה.", [ { title:"Fetch API", text:"Fetch משמש לשליחת בקשות HTTP וקבלת תשובות.", code: "fetch(\"/api/data\")\n .then(response => response.json())\n .then(data => console.log(data))\n .catch(error => console.error(error));" }, { title:"Storage", text:"localStorage ו־sessionStorage מאפשרים לשמור מחרוזות בדפדפן. localStorage נשאר בדרך כלל גם לאחר סגירת הדפדפן, בעוד sessionStorage קשור לסשן החלון.", code: "localStorage.setItem(\"language\",\"he\");\nconst language = localStorage.getItem(\"language\");" }, { title:"History ו־URL", text:"History API מאפשרת לשנות את כתובת ה־URL ולנהל היסטוריה ללא טעינת מסמך מלא. URL API מאפשר לפרק ולבנות כתובות.", code: "history.pushState({},\"\",\"/products\");\n\nconst url = new URL(location.href);\nconsole.log(url.pathname);" }, { title:"Observers", text:"Intersection Observer מזהה כניסה של אלמנט לאזור התצוגה. Mutation Observer עוקב אחר שינויים בעץ ה־DOM. Resize Observer מגיב לשינויי גודל.", code: "const observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n console.log(\"נראה במסך\");\n }\n });\n});\n\nobserver.observe(document.querySelector(\"section\"));" }, { title:"Workers ו־WebSocket", text:"Web Worker מאפשר להריץ JavaScript ברקע. WebSocket מאפשר תקשורת דו־כיוונית מתמשכת בין לקוח לשרת.", code: "const socket = new WebSocket(\"wss://example.com/socket\");\n\nsocket.onmessage = event => {\n console.log(event.data);\n};" } ]); /* ---------- FORMS ---------- */ addPage("forms","Forms ואינטראקציה", "טפסים הם נקודת מפגש מרכזית בין המשתמש למערכת.", [ { title:"Validation", text:"HTML מספקת ולידציה בסיסית באמצעות required, type, pattern, min, max ועוד. JavaScript יכולה להוסיף כללים דינמיים.", code: "\n\n" }, { title:"מצבי ממשק", text:"טופס טוב צריך להתמודד עם מצבי idle, loading, success ו־error. המשתמש צריך להבין מה קורה לאחר פעולה.", code: "button.disabled = true;\nbutton.textContent = \"שולח...\";\n\n// לאחר הצלחה\nbutton.textContent = \"נשלח בהצלחה\";" }, { title:"Dynamic Forms", text:"JavaScript יכולה להוסיף שדות, להסיר אותם, לשנות אפשרויות ולבצע ולידציה בהתאם לבחירות המשתמש." } ]); /* ---------- ACCESSIBILITY ---------- */ addPage("accessibility","נגישות", "נגישות היא חלק מתכנון ממשק שמאפשר שימוש במערכת גם באמצעות טכנולוגיות מסייעות ואופני קלט שונים.", [ { title:"Semantic HTML", text:"שימוש באלמנט המתאים למשמעות שלו מספק מידע חשוב לדפדפנים ולקוראי מסך. button עדיף לפעולה, a לניווט, ו־heading לכותרת." }, { title:"ARIA", text:"ARIA מספקת מאפיינים ותפקידים כאשר HTML סמנטי לבדו אינו מספיק. אין להשתמש ב־ARIA כתחליף למבנה HTML נכון.", code: "" }, { title:"Keyboard Navigation", text:"כל פעולה מרכזית צריכה להיות נגישה באמצעות מקלדת. חשוב לשמור על focus ברור ולנהל focus נכון בדיאלוגים ורכיבים דינמיים." }, { title:"Forms ו־Images", text:"יש לספק label ברור לשדות ו־alt משמעותי לתמונות כאשר התמונה מעבירה מידע. תמונה דקורטיבית יכולה להשתמש ב־alt ריק." } ]); /* ---------- RESPONSIVE ---------- */ addPage("responsive","Responsive Design", "עיצוב שמסתגל למגוון גדלים, יחסי מסך ואמצעי קלט.", [ { title:"Mobile First", text:"בגישה זו מתחילים ממסך קטן ובונים את הממשק בהדרגה למסכים רחבים יותר.", code: ".layout {\n display:grid;\n grid-template-columns:1fr;\n}\n\n@media (min-width:768px) {\n .layout {\n grid-template-columns:1fr 1fr;\n }\n}" }, { title:"Fluid Layouts", text:"יחידות כמו %, rem, vw ו־clamp מאפשרות לממשק לגדול ולהצטמצם באופן רציף במקום להסתמך רק על גדלים קבועים." }, { title:"Responsive Images", text:"תמונות צריכות להתאים למקום שבו הן מוצגות. picture ו־srcset מאפשרים לספק גרסאות שונות לפי תנאים מתאימים." } ]); /* ---------- UI UX ---------- */ addPage("uiux","UI ו־UX", "UI עוסק בממשק עצמו; UX עוסק בחוויה, בזרימה ובאופן שבו המשתמש משיג את מטרתו.", [ { title:"Hierarchy", text:"היררכיה חזותית יוצרת סדר באמצעות גודל, משקל, מרווח, מיקום וניגודיות. המשתמש צריך להבין במה להתמקד ומה אפשר לבצע." }, { title:"רכיבי ממשק", terms:[ ["Buttons","פעולות."], ["Cards","קבוצות תוכן עצמאיות."], ["Menus","ניווט או פעולות."], ["Modal","שכבה המופיעה מעל התוכן."], ["Tabs","מעבר בין קבוצות תוכן באותו הקשר."], ["Accordion","פתיחה וסגירה של תוכן."], ["Tooltip","מידע קצר שמופיע בהקשר."], ["Feedback","משוב למשתמש לאחר פעולה."] ] }, { title:"מצבים", text:"מערכת ממשק שלמה צריכה לטפל גם בטעינה, הצלחה, שגיאה ומצב ריק. מצבים אלה הם חלק מהעיצוב ולא חריגה ממנו." } ]); /* ---------- ANIMATION ---------- */ addPage("animation","אנימציות ואפקטים", "אנימציה בפרונטאנד משמשת להמחשת שינוי, מתן משוב ויצירת מעבר ברור בין מצבים.", [ { title:"Transition", code: ".card {\n transition:transform .2s ease, opacity .2s ease;\n}\n\n.card:hover {\n transform:translateY(-4px);\n}" }, { title:"Keyframes", code: "@keyframes fadeIn {\n from { opacity:0; }\n to { opacity:1; }\n}\n\n.panel {\n animation:fadeIn .4s ease;\n}" }, { title:"Micro-interactions", text:"שינויים קטנים בזמן hover, focus, click או loading יכולים לספק משוב ברור. חשוב שהאנימציה לא תפגע בקריאות או בנגישות." } ]); /* ---------- PERFORMANCE ---------- */ addPage("performance","Web Performance", "ביצועים עוסקים במהירות שבה תוכן מופיע, באיכות האינטראקציה ובכמות העבודה שהדפדפן והשרת צריכים לבצע.", [ { title:"טעינה", text:"יש לצמצם משאבים מיותרים, לדחוס קבצים, להשתמש ב־cache, CDN ו־lazy loading במקומות מתאימים.", }, { title:"Core Web Vitals", terms:[ ["LCP","מדד הקשור לזמן שבו התוכן המרכזי מופיע."], ["INP","מדד הקשור למהירות התגובה לאינטראקציות."], ["CLS","מדד הקשור ליציבות החזותית של הדף."] ] }, { title:"JavaScript Performance", text:"JavaScript כבד יכול לעכב אינטראקציות. יש לצמצם עבודה מיותרת, לפצל קוד כאשר מתאים, להשתמש ב־Web Workers לחישובים מתאימים ולמנוע עדכוני DOM מיותרים." }, { title:"Images", text:"תמונות הן לעיתים חלק משמעותי מגודל האתר. התאמת פורמט, ממדים, דחיסה וטעינה עצלה יכולים לצמצם עומס." } ]); /* ---------- SECURITY ---------- */ addPage("security","Frontend Security", "אבטחת Frontend עוסקת בהפחתת סיכונים בממשק, בנתונים ובתקשורת עם שירותים.", [ { title:"XSS", text:"Cross-Site Scripting הוא מצב שבו תוכן לא אמין מצליח להתפרש כקוד פעיל. יש להפריד בין תוכן ל־HTML ולהימנע מהזרקה לא בטוחה.", code: "// עדיף כאשר מציגים טקסט\nelement.textContent = userInput;\n\n// יש להיזהר מאוד מהזרקת HTML\n// element.innerHTML = userInput;" }, { title:"HTTPS", text:"HTTPS מצפין את התקשורת בין הדפדפן לשרת באמצעות TLS ומגן מפני שינוי או קריאה של התעבורה בדרך." }, { title:"CORS", text:"CORS הוא מנגנון שבו שרת מצהיר אילו מקורות רשאים לבצע גישות מסוימות למשאביו מהדפדפן." }, { title:"CSP", text:"Content Security Policy מאפשרת להגדיר מדיניות לגבי מקורות תוכן מותרים ומסייעת לצמצם סוגים מסוימים של תקיפות." }, { title:"Cookies ואימות", text:"Cookies יכולות לשמש לניהול Session. מאפיינים כמו Secure ו־HttpOnly יכולים לצמצם סיכונים מסוימים. פרטי אימות רגישים צריכים להיות מתוכננים כחלק ממערכת שלמה ולא רק בצד הלקוח." }, { title:"Clickjacking ו־iframe", text:"Clickjacking עלול לגרום למשתמש לבצע פעולה בתוך תוכן מוסווה. הגנות ברמת שרת כמו CSP ו־frame-ancestors יכולות לסייע." } ]); /* ---------- API ---------- */ addPage("api","API", "API הוא חוזה שבאמצעותו תוכנה אחת מתקשרת עם יכולת או מערכת אחרת.", [ { title:"Request ו־Response", text:"בקשה יכולה לכלול Method, URL, Headers ו־Body. התשובה כוללת Status, Headers ולעיתים Body.", code: "fetch(\"https://api.example.com/users\", {\n method:\"POST\",\n headers:{\n \"Content-Type\":\"application/json\"\n },\n body:JSON.stringify({name:\"דנה\"})\n});" }, { title:"Parameters", terms:[ ["Path Parameter","חלק מהנתיב, למשל /users/42."], ["Query Parameter","מידע אחרי סימן ?, למשל ?page=2."], ["Header","מטא־מידע על הבקשה."], ["Body","תוכן שנשלח בבקשה."] ] }, { title:"REST", text:"REST הוא סגנון ארכיטקטוני נפוץ ל־APIs המבוססים על משאבים ופעולות HTTP." }, { title:"GraphQL ו־WebSocket", text:"GraphQL מאפשר ללקוח לתאר את הנתונים הדרושים לו דרך סכימה. WebSocket מתאים לתקשורת דו־כיוונית מתמשכת כאשר נדרש עדכון בזמן אמת." } ]); /* ---------- FRAMEWORKS ---------- */ addPage("frameworks","Frameworks", "Frameworks מספקים מבנה, כלים ודפוסי עבודה לבניית יישומים מורכבים.", [ { title:"React", text:"React היא ספריית JavaScript לבניית ממשקי משתמש מבוססי Components. היא משתמשת במודל הצהרתי ובמערכת אקולוגית רחבה." }, { title:"Vue", text:"Vue היא framework לבניית ממשקי Web, עם מודל רכיבים, מערכת תגובתית וכלים סביבתיים." }, { title:"Angular", text:"Angular היא framework מקיפה המבוססת על TypeScript ומספקת מנגנונים רבים לבניית יישומים, כולל Dependency Injection, Routing ו־Forms." }, { title:"Svelte", text:"Svelte משתמשת בגישה שבה חלק משמעותי מהעבודה מתבצע בזמן build, ומייצרת JavaScript המתאים לאפליקציה." }, { title:"Next.js ו־Nuxt", text:"Next.js ו־Nuxt הן מסגרות סביב React ו־Vue בהתאמה, ומוסיפות יכולות כמו routing, rendering, data fetching ותהליכי build." }, { title:"השוואה מושגית", text:"אין Framework אחד שמתאים לכל מצב. הבחירה תלויה בדרישות הפרויקט, היכרות הצוות, אקוסיסטם, ארכיטקטורה, deployment וצרכים טכניים." } ]); /* ---------- LIBRARIES ---------- */ addPage("libraries","Libraries", "ספרייה היא אוסף קוד שאפליקציה יכולה להשתמש בו כדי לפתור בעיה מסוימת.", [ { title:"Library לעומת Framework", text:"בספרייה האפליקציה בדרך כלל קוראת לקוד של הספרייה. Framework בדרך כלל מספק את המבנה והזרימה שבתוכם האפליקציה פועלת. הגבול אינו תמיד חד, ולכן חשוב לבחון את אופן השימוש בפועל." }, { title:"סוגי ספריות", terms:[ ["UI Libraries","רכיבי ממשק מוכנים."], ["Utility Libraries","פעולות עזר."], ["Animation Libraries","אנימציות ואינטראקציות."], ["State Libraries","ניהול State."], ["Date Libraries","עבודה עם תאריכים."], ["Chart Libraries","גרפים ונתונים חזותיים."], ["Form Libraries","ניהול טפסים וולידציה."] ] } ]); /* ---------- TYPESCRIPT ---------- */ addPage("typescript","TypeScript", "שפה המבוססת על JavaScript ומוסיפה מערכת טיפוסים סטטית שעובדת בזמן פיתוח וקומפילציה.", [ { title:"Types", code: "let name: string = \"דנה\";\nlet age: number = 30;\nlet active: boolean = true;" }, { title:"Interfaces ו־Type Aliases", code: "interface User {\n id:number;\n name:string;\n}\n\ntype Status = \"loading\" | \"success\" | \"error\";" }, { title:"Generics", text:"Generics מאפשרים לכתוב קוד שמקבל טיפוס כפרמטר במקום לקבע אותו לטיפוס יחיד.", code: "function first(items:T[]):T {\n return items[0];\n}\n\nconst value = first([1,2,3]);" }, { title:"Narrowing ו־Inference", text:"Type Inference מאפשר ל־TypeScript להסיק טיפוסים מהקוד. Narrowing מצמצם את האפשרויות האפשריות לאחר בדיקות מתאימות." }, { title:"הקשר ל־JavaScript", text:"TypeScript אינה רצה ישירות בדפדפן בדרך הרגילה. היא עוברת תהליך המרה לקוד JavaScript שניתן להריץ." } ]); /* ---------- PACKAGES ---------- */ addPage("packages","Package Management", "ניהול חבילות מאפשר לפרויקט להשתמש בקוד חיצוני ולשמור גרסאות ותלויות.", [ { title:"package.json", code: "{\n \"name\":\"frontend-project\",\n \"scripts\":{\n \"dev\":\"vite\",\n \"build\":\"vite build\"\n },\n \"dependencies\":{\n \"example\":\"^1.0.0\"\n }\n}" }, { title:"Dependencies", text:"dependencies הן תלויות הנדרשות בזמן הריצה. devDependencies משמשות בדרך כלל לכלי פיתוח, בדיקות ובנייה." }, { title:"npm", code: "npm install\nnpm install package-name\nnpm install -D package-name\nnpm run dev\nnpx command" }, { title:"Semantic Versioning", text:"גרסאות רבות משתמשות בתבנית MAJOR.MINOR.PATCH. שינוי MAJOR עשוי לציין שינוי שאינו תואם לאחור, בעוד MINOR ו־PATCH מתארים שינויים ברמות שונות." } ]); /* ---------- BUILD ---------- */ addPage("build","Build Tools", "כלי Build מכינים את קוד המקור לסביבת פיתוח או Production.", [ { title:"Bundler", text:"Bundler אוסף מודולים ומשאבים ומייצר פלט המתאים להרצה. Vite ו־Webpack הן דוגמאות לכלים נפוצים בעולם ה־Frontend." }, { title:"Compiler ו־Transpiler", text:"Compiler מתרגם קוד משפה או ייצוג אחד לאחר. Transpiler משמש לעיתים לתרגום קוד בין גרסאות או שפות בעלות רמה דומה." }, { title:"Babel", text:"Babel משמש ככלי טרנספילציה של JavaScript, למשל כדי להפוך תחביר מודרני לפלט שמתאים לסביבות יעד מסוימות." }, { title:"Tree Shaking ו־Minification", text:"Tree Shaking מסיר קוד שאינו בשימוש בתנאים מתאימים. Minification מקטינה את הקבצים באמצעות הסרת רווחים ושינויים תחביריים בטוחים." }, { title:"Source Maps", text:"Source Maps מקשרות בין הקוד שנשלח לדפדפן לבין קוד המקור ומקלות על Debugging." } ]); /* ---------- GIT ---------- */ addPage("git","Git ו־Version Control", "Git מאפשר לנהל היסטוריה של שינויים בקוד ולעבוד על גרסאות וענפים.", [ { title:"Repository", text:"Repository מכיל את הקוד וההיסטוריה שלו. Commit הוא נקודת שמירה של שינויים." }, { title:"Branches", text:"Branch מאפשר לפתח קו שינויים נפרד. Merge משלב שינויים מענף אחד לאחר. Rebase משנה את בסיס ההיסטוריה של ענף." }, { title:"פקודות בסיס", code: "git init\ngit clone URL\ngit status\ngit add .\ngit commit -m \"Initial commit\"\ngit branch\ngit switch main\ngit pull\ngit push" }, { title:"GitHub ו־Pull Request", text:"GitHub הוא שירות אירוח ושיתוף לפרויקטי Git. Pull Request מאפשר להציע שינויים לבדיקה ולמיזוג." } ]); /* ---------- TESTING ---------- */ addPage("testing","בדיקות", "בדיקות בודקות שקוד והתנהגות המערכת עומדים בדרישות.", [ { title:"סוגי בדיקות", terms:[ ["Unit","בודקת יחידת קוד קטנה."], ["Integration","בודקת חיבור בין חלקים."], ["Component","בודקת רכיב ממשק."], ["End-to-End","בודקת תרחיש משתמש שלם."] ] }, { title:"כלים", text:"Jest ו־Vitest משמשים לבדיקות JavaScript ו־TypeScript. Playwright ו־Cypress משמשים לבדיקות Browser ותרחישים רחבים." }, { title:"Assertions ו־Mocks", code: "expect(add(2,3)).toBe(5);\n\nconst api = {\n getUser: () => Promise.resolve({name:\"דנה\"})\n};" }, { title:"Coverage", text:"Coverage מודד אילו חלקים מהקוד הופעלו בבדיקות. אחוז גבוה אינו מבטיח לבדו איכות, ולכן יש לבחון גם את איכות התרחישים." } ]); /* ---------- DEBUGGING ---------- */ addPage("debugging","Debugging", "תהליך איתור והבנת תקלות בקוד, בממשק, ברשת או בביצועים.", [ { title:"Console", code: "console.log(user);\nconsole.warn(\"אזהרה\");\nconsole.error(error);\nconsole.table(items);" }, { title:"Breakpoints", text:"Breakpoint עוצר את הרצת JavaScript בנקודה מוגדרת ומאפשר לבדוק משתנים, Stack וזרימת קוד." }, { title:"Network", text:"Network DevTools מאפשר לראות בקשות, זמני טעינה, Headers, Status, Response ומידע נוסף על תקשורת." }, { title:"Stack Trace", text:"Stack Trace מציג את שרשרת הקריאות שהובילה לשגיאה ומסייע לזהות את מקור התקלה." } ]); /* ---------- DEPLOYMENT ---------- */ addPage("deployment","Deployment", "המעבר מקוד פיתוח למערכת הזמינה למשתמשים.", [ { title:"Development → Staging → Production", text:"Development הוא סביבת העבודה. Staging משמשת לעיתים לבדיקה קרובה לייצור. Production היא הסביבה המשרתת משתמשים אמיתיים." }, { title:"Build ו־Hosting", text:"באתר Frontend סטטי, תהליך Build מייצר קבצים שניתן להגיש משרת סטטי או CDN. יישומים אחרים עשויים להזדקק גם לשירותי שרת." }, { title:"Domain, DNS ו־SSL", text:"Domain הוא השם שהמשתמש מקליד. DNS מפנה אותו ליעד. SSL/TLS מאפשר HTTPS ומגן על התקשורת." }, { title:"CI/CD", text:"CI/CD מאפשר לבצע תהליכים אוטומטיים כגון בדיקות, Build ו־Deployment לאחר שינויים בקוד." }, { title:"Environment Variables", text:"משתני סביבה מאפשרים להגדיר ערכים שונים לפי סביבת הרצה. מידע סודי אינו צריך להיחשף בקוד Frontend, משום שכל מה שנשלח לדפדפן נגיש למשתמש." } ]); /* ---------- ARCHITECTURE ---------- */ addPage("architecture","ארכיטקטורת Frontend", "ארכיטקטורה מגדירה כיצד הקוד מחולק, כיצד מידע זורם ואיך חלקי המערכת מתקשרים.", [ { title:"מבנה טיפוסי", code: "src/\n├── components/\n├── pages/\n├── layouts/\n├── services/\n├── utilities/\n├── modules/\n├── routes/\n└── styles/" }, { title:"Separation of Concerns", text:"חלוקת אחריות ברורה מקטינה תלות בין חלקים ומאפשרת תחזוקה ושינוי. Component יכול לטפל בתצוגה, Service בתקשורת ו־Utility בפעולה כללית." }, { title:"Data Flow", text:"חשוב לדעת מאיפה מידע מגיע, מי מחזיק אותו, מי משנה אותו ואילו רכיבים צורכים אותו." }, { title:"Design Systems", text:"Design System מרכז רכיבי UI, כללי עיצוב, טיפוגרפיה, צבעים והתנהגויות לשימוש חוזר." } ]); /* ---------- COMPONENTS ---------- */ addPage("components","Components", "Component הוא יחידת ממשק עצמאית יחסית שניתן להרכיב עם רכיבים אחרים.", [ { title:"Props ו־State", text:"Props הם נתונים המועברים לרכיב. State הוא מצב פנימי או מנוהל שהשינוי בו יכול להשפיע על התצוגה." }, { title:"Composition", text:"במקום ליצור רכיב ענק, ניתן להרכיב רכיבים קטנים יותר שכל אחד מהם מטפל באחריות ברורה." }, { title:"Controlled ו־Uncontrolled", text:"רכיב Controlled מקבל את הערך שלו ממקור מצב חיצוני. Uncontrolled מסתמך במידה רבה יותר על מצב פנימי או DOM." }, { title:"Communication", text:"רכיבים יכולים להעביר מידע באמצעות props, callbacks, context או מנגנוני state management בהתאם לארכיטקטורה." } ]); /* ---------- ROUTING ---------- */ addPage("routing","Routing", "Routing מחבר בין כתובות URL לבין תצוגות או מצבים שונים של אפליקציה.", [ { title:"Route", text:"Route מגדיר התאמה בין URL לבין תוכן או רכיב." }, { title:"Dynamic Routes", code: "/users/42\n/products/123\n/courses/frontend" }, { title:"Query Parameters", code: "/search?q=javascript&page=2" }, { title:"SPA Routing", text:"ב־Single Page Application הדפדפן יכול לשנות את ה־URL ולהחליף תצוגה בלי לטעון מסמך HTML חדש בכל מעבר." }, { title:"Navigation Guards", text:"במערכות מסוימות ניתן למנוע או לשנות ניווט בהתאם למצב משתמש, הרשאות או נתונים נדרשים." } ]); /* ---------- STATE ---------- */ addPage("state","State Management", "State הוא מידע שהממשק צריך לזכור ולהשתמש בו כדי לקבוע את התצוגה או ההתנהגות.", [ { title:"Local State", text:"מידע שרלוונטי לרכיב או לאזור קטן, כגון האם תפריט פתוח." }, { title:"Global State", text:"מידע הנדרש על ידי אזורים רבים באפליקציה, כגון משתמש מחובר או העדפת שפה." }, { title:"Server State", text:"מידע שמקורו בשרת ויכול להשתנות ללא תלות ישירה בממשק." }, { title:"Derived State", text:"ערך שניתן לחשב ממידע קיים במקום לשמור אותו בנפרד." }, { title:"כלים", terms:[ ["Context","מנגנון להעברת מידע דרך עץ רכיבים."], ["Redux","מערכת לניהול State עם מודל מרכזי וזרימת עדכונים מוגדרת."], ["Zustand","ספריית State פשוטה יחסית המבוססת Store."], ["Signals","מודל תגובתיות שבו שינוי ערך יכול להפעיל עדכונים תלויי־ערך."] ] } ]); /* ---------- PWA ---------- */ addPage("pwa","PWA", "Progressive Web App משלבת מאפייני Web עם יכולות המאפשרות חוויה קרובה יותר לאפליקציה.", [ { title:"Service Worker", text:"Service Worker הוא Worker מיוחד שיכול לפעול בין האפליקציה לרשת ולנהל יכולות כגון Cache ובמצבים מסוימים Offline." }, { title:"Manifest", code: "{\n \"name\":\"האפליקציה שלי\",\n \"short_name\":\"האפליקציה\",\n \"start_url\":\"/\",\n \"display\":\"standalone\"\n}" }, { title:"Offline ו־Cache", text:"ניתן לשמור משאבים ולהשתמש בהם גם כאשר אין חיבור, בהתאם לאסטרטגיית Cache." }, { title:"Push Notifications", text:"PWA יכולה להשתמש ביכולות התראות במערכות ובדפדפנים שתומכים בכך, בכפוף להרשאות ולתנאי הפלטפורמה." } ]); /* ---------- SEO ---------- */ addPage("seo","SEO", "Search Engine Optimization עוסק בהפיכת תוכן האתר להבנה ונגישה למנועי חיפוש ולמשתמשים.", [ { title:"מבנה המסמך", code: "קורס Frontend\n\n

Frontend

\n

HTML

" }, { title:"Canonical ו־Structured Data", text:"Canonical מסייעת לציין URL מועדף כאשר קיימים URLs חלופיים. Structured Data מאפשרת לתאר מידע באמצעות פורמט מובנה שמנועים יכולים לעבד." }, { title:"Open Graph", text:"Open Graph מאפשרת להגדיר כיצד תוכן יוצג בעת שיתוף ברשתות ושירותים תומכים." }, { title:"Robots ו־Sitemap", text:"robots.txt מספק הוראות לסורקים. Sitemap מתאר כתובות חשובות באתר ומסייע בגילוי שלהן." }, { title:"SEO, Accessibility ו־Performance", text:"מבנה סמנטי, תוכן ברור, נגישות וביצועים יכולים לתרום לחוויית משתמש טובה ולהקל על הבנת האתר." } ]); /* ---------- MULTIMEDIA ---------- */ addPage("multimedia","Multimedia", "עבודה עם תמונות, וידאו, אודיו ותוכן מוטמע בתוך ממשקי Web.", [ { title:"Images", code: "" }, { title:"Video", code: "" }, { title:"Audio", code: "" }, { title:"iframe ו־embed", text:"iframe מאפשר להציג מסמך או תוכן ממקור אחר בתוך מסמך. יש להתייחס לאבטחה, הרשאות, CSP ו־sandbox בהתאם למקרה." }, { title:"Captions ו־Subtitles", text:"track מאפשר להוסיף כתוביות ורצועות טקסט לוידאו. כתוביות משפרות נגישות ומאפשרות לצפות בתוכן גם כאשר אי אפשר לשמוע אותו." } ]); /* ---------- PROJECTS ---------- */ const projectData = [ ["אתר תדמית","הצגת עסק, ארגון או אדם","HTML, CSS, JavaScript","Header, Hero, Sections, Footer","HTML, CSS, Responsive"], ["דף נחיתה","העברת מסר והנעה לפעולה","HTML, CSS, JavaScript","Hero, Benefits, CTA, Form","Layout, Typography, Forms"], ["בלוג","פרסום תוכן לפי פוסטים","HTML, CSS, JavaScript","Posts, Categories, Article","DOM, Data, Routing"], ["אתר לימודים","ארגון קורסים ושיעורים","HTML, CSS, JavaScript","Courses, Lessons, Search","Components, State, Search"], ["מערכת חיפוש","חיפוש וסינון מידע","JavaScript","Search, Results, Filters","Arrays, DOM, Events"], ["נגן וידאו","הפעלת תוכן וידאו","HTML, CSS, JavaScript","Player, Controls, Playlist","Media API, Events"], ["נגן אודיו","הפעלת מוזיקה או שיעורים","HTML, CSS, JavaScript","Player, Playlist","Audio API, DOM"], ["גלריית תמונות","הצגת אוסף תמונות","HTML, CSS, JavaScript","Grid, Viewer, Navigation","Grid, Events, Images"], ["Dashboard","הצגת נתונים ומדדים","HTML, CSS, JavaScript","Sidebar, Cards, Charts","Layout, API, State"], ["טופס הרשמה","קליטת פרטי משתמש","HTML, CSS, JavaScript","Fields, Validation, Feedback","Forms, Validation"], ["מערכת Login","ממשק התחברות","HTML, CSS, JavaScript","Login, Error, Loading","Forms, API, Security"], ["To-Do","ניהול משימות","JavaScript","List, Add, Delete, Complete","DOM, State, Storage"], ["מזג אוויר","הצגת נתוני מזג אוויר","JavaScript, API","Search, Current Weather","Fetch, JSON, API"], ["אפליקציית API","צריכת נתונים משירות חיצוני","JavaScript","Request, Loading, Results","Fetch, Async, Error Handling"], ["SPA","יישום Single Page","JavaScript / Framework","Routes, Views, State","Routing, Components, State"] ]; /* ---------- GENERIC ADVANCED ---------- */ addPage("projects","פרויקטים מעשיים", "דרך טובה ללמוד Frontend היא לבנות מערכות שמחברות כמה תחומים יחד.", [ { title:"מסלול פרויקטים", text:"כל פרויקט מחבר בין מבנה, עיצוב, התנהגות, נתונים ונגישות. מומלץ להתחיל בפרויקט קטן ולהוסיף לו בהדרגה יכולות." } ]); /* ========================================================= MISSING / EXTRA PAGES REQUIRED BY THE REQUEST ========================================================= */ addPage("map","מפת Frontend", "מפת ידע היררכית המציגה כיצד התחומים השונים מתחברים זה לזה.", []); addPage("dictionary","מילון Frontend", "מילון מושגים רחב המחבר בין מונחים לבין התחום שבו הם מופיעים.", []); /* ========================================================= DICTIONARY ========================================================= */ const dictionary = [ ["API","ממשק תקשורת בין תוכנות","API"], ["Accessibility","נגישות של ממשק למשתמשים שונים","accessibility"], ["Array","מבנה נתונים מסודר ב־JavaScript","javascript"], ["Browser","תוכנה שמריצה ומציגה Web","browser"], ["CSS","שפת עיצוב ל־Web","css"], ["CDN","רשת להפצת תוכן ומשאבים","internet"], ["Component","יחידת ממשק הניתנת לשימוש חוזר","components"], ["Cookie","מידע קטן שהדפדפן שומר ושולח לפי כללים","internet"], ["CORS","מנגנון הרשאות בין מקורות","security"], ["DOM","ייצוג מסמך HTML כעץ אובייקטים","dom"], ["DNS","מערכת תרגום שמות דומיין לכתובות IP","internet"], ["Flexbox","מערכת פריסה חד־ממדית ב־CSS","css"], ["Framework","מסגרת עבודה לבניית מערכת","frameworks"], ["Frontend","צד הממשק של מערכת Web","home"], ["Git","מערכת לניהול גרסאות","git"], ["Grid","מערכת פריסה דו־ממדית ב־CSS","css"], ["HTML","שפת סימון למבנה Web","html"], ["HTTP","פרוטוקול תקשורת של ה־Web","internet"], ["HTTPS","HTTP המאובטח באמצעות TLS","security"], ["JavaScript","שפת תכנות מרכזית ב־Frontend","javascript"], ["JSON","פורמט טקסטואלי נפוץ לנתונים","api"], ["LCP","מדד ביצועים הקשור לתוכן המרכזי","performance"], ["Layout","שלב חישוב מיקום וגודל אלמנטים","browser"], ["Library","אוסף קוד לשימוש בפרויקט","libraries"], ["localStorage","אחסון מחרוזות בדפדפן","apis"], ["Media Query","כלל CSS מותנה לפי מאפייני סביבה","responsive"], ["Module","יחידת קוד שניתן לייבא ולייצא","javascript"], ["npm","מנהל חבילות נפוץ","packages"], ["PWA","Progressive Web App","pwa"], ["Promise","ייצוג של תוצאה עתידית ב־JavaScript","javascript"], ["React","ספריית UI מבוססת Components","frameworks"], ["REST","סגנון נפוץ לתכנון API","api"], ["Responsive","ממשק שמתאים למגוון מסכים","responsive"], ["Sitemap","קובץ המתאר כתובות חשובות באתר","seo"], ["SPA","Single Page Application","routing"], ["State","מידע שהמערכת שומרת ומשתמשת בו","state"], ["TypeScript","JavaScript עם מערכת טיפוסים","typescript"], ["URL","כתובת של משאב","internet"], ["WebSocket","תקשורת דו־כיוונית מתמשכת","api"], ["XSS","סוג תקיפה המבוססת על הזרקת סקריפט","security"], ["Vue","Framework לבניית ממשקי Web","frameworks"], ["Webpack","כלי Build ו־Bundling","build"], ["Vite","כלי פיתוח ו־Build מודרני","build"], ["Unit Test","בדיקה של יחידת קוד","testing"], ["Pull Request","הצעה לשילוב שינויים ב־Git","git"], ["Service Worker","Worker מיוחד עבור יכולות Web מתקדמות","pwa"], ["SEO","אופטימיזציה למנועי חיפוש","seo"], ["SSR","רינדור HTML בצד השרת","frameworks"], ["CSR","רינדור המתרחש בעיקר בצד הלקוח","browser"], ["Hydration","חיבור JavaScript ל־HTML שנוצר מראש","frameworks"], ["Lazy Loading","טעינת משאבים רק כאשר נדרש","performance"] ]; /* ========================================================= HELPERS ========================================================= */ function escapeHTML(value){ return String(value) .replaceAll("&","&") .replaceAll("<","<") .replaceAll(">",">") .replaceAll('"',""") .replaceAll("'","'"); } function codeBlock(code){ return ( '
' + '
דוגמת קוד
' + '
' + escapeHTML(code) + '
' + '
' ); } function termsHTML(terms){ if(!terms || !terms.length) return ""; let html = '
'; for(let i=0;i' + escapeHTML(terms[i][0]) + '' + '' + escapeHTML(terms[i][1]) + '' + '
'; } html += ''; return html; } function sectionHTML(section,index){ let html = '
' + '

' + escapeHTML(section.title) + '

'; if(section.text){ html += '

' + escapeHTML(section.text) + '

'; } if(section.terms){ html += termsHTML(section.terms); } if(section.code){ html += codeBlock(section.code); } if(section.note){ html += '
' + escapeHTML(section.note) + '
'; } html += '
'; return html; } /* ========================================================= PROJECTS PAGE CONTENT ========================================================= */ function renderProjects(){ let html = ""; for(let i=0;i' + (i+1) + '. ' + escapeHTML(p[0]) + '' + '

מטרה: ' + escapeHTML(p[1]) + '

' + '

טכנולוגיות: ' + escapeHTML(p[2]) + '

' + '

מבנה: ' + escapeHTML(p[3]) + '

' + '

ידע דרוש: ' + escapeHTML(p[4]) + '

' + '
' + 'תכנון' + 'מימוש' + 'Responsive' + 'Accessibility' + '
' + ''; } return html; } /* ========================================================= MAP ========================================================= */ const mapItems = [ ["Frontend","home"], ["Web","internet"], ["HTML","html"], ["CSS","css"], ["JavaScript","javascript"], ["Browser","browser"], ["DOM","dom"], ["Web APIs","apis"], ["Forms","forms"], ["Accessibility","accessibility"], ["Responsive","responsive"], ["UI / UX","uiux"], ["Animations","animation"], ["Performance","performance"], ["Security","security"], ["API","api"], ["Frameworks","frameworks"], ["Libraries","libraries"], ["TypeScript","typescript"], ["Package Management","packages"], ["Build Tools","build"], ["Git","git"], ["Testing","testing"], ["Debugging","debugging"], ["Deployment","deployment"], ["Architecture","architecture"], ["Components","components"], ["Routing","routing"], ["State Management","state"], ["PWA","pwa"], ["SEO","seo"], ["Multimedia","multimedia"] ]; function renderMap(){ let html = '
'; for(let i=0;i' + escapeHTML(mapItems[i][0]) + ''; if(i < mapItems.length-1){ html += '
↓
'; } } html += '
'; return html; } /* ========================================================= DICTIONARY ========================================================= */ function renderDictionary(filter){ const query = (filter || "").trim().toLowerCase(); let html = '' + '
'; let count = 0; for(let i=0;i' + '' + escapeHTML(item[0]) + '' + '' + escapeHTML(item[1]) + '' + ''; count++; } if(count === 0){ html += '
לא נמצאו מושגים התואמים לחיפוש.
'; } html += '
'; return html; } /* ========================================================= PAGE RENDERING ========================================================= */ function renderHome(){ const categories = [ ["יסודות האינטרנט","הבסיס של Web, HTTP, DNS, Browser ו־API.","internet"], ["HTML","מבנה, סמנטיקה, טפסים, מדיה ונגישות.","html"], ["CSS","עיצוב, Box Model, Flexbox, Grid ו־Responsive.","css"], ["JavaScript","תכנות, DOM, Events, Async ו־Browser APIs.","javascript"], ["DOM","העץ שמחבר בין HTML לבין JavaScript.","dom"], ["הדפדפן","Rendering, Engines, DevTools ו־Storage.","browser"], ["Web APIs","Fetch, Storage, History, Workers ו־Observers.","apis"], ["נגישות","בניית ממשקים שניתן להשתמש בהם במגוון דרכים.","accessibility"], ["Responsive","התאמת הממשק למחשב, טאבלט וטלפון.","responsive"], ["UI ו־UX","מבנה, היררכיה, רכיבים וחוויית משתמש.","uiux"], ["ביצועים","טעינה, Rendering, Web Vitals ואופטימיזציה.","performance"], ["אבטחה","XSS, CORS, CSP, HTTPS ואימות.","security"], ["API","תקשורת עם שירותים ונתונים.","api"], ["Frameworks","React, Vue, Angular, Svelte ועוד.","frameworks"], ["Libraries","ספריות UI, Utility, Animation ועוד.","libraries"], ["TypeScript","טיפוסים, Interfaces, Generics ו־Inference.","typescript"], ["Build Tools","Vite, Webpack, Babel ו־Bundling.","build"], ["Git","ניהול גרסאות, Branches ו־Pull Requests.","git"], ["Testing","Unit, Integration ו־E2E.","testing"], ["Deployment","Build, Hosting, DNS, SSL ו־CI/CD.","deployment"], ["Architecture","Components, Services, State ו־Data Flow.","architecture"], ["Components","Props, State, Composition ותקשורת.","components"], ["Routing","URLs, Routes, SPA ו־Navigation.","routing"], ["State Management","Local, Global ו־Server State.","state"], ["PWA","Service Workers, Manifest ו־Offline.","pwa"], ["SEO","מבנה, Metadata, Sitemap ו־Structured Data.","seo"], ["Multimedia","תמונות, וידאו, אודיו והטמעה.","multimedia"], ["פרויקטים","תרגול מעשי מהבסיס ועד SPA.","projects"], ["מפת Frontend","מפת הקשרים בין כל התחומים.","map"], ["מילון","חיפוש מהיר במושגים.","dictionary"] ]; let html = '
' + '

Frontend — המדריך המלא

' + '

מפת ידע לימודית ומעשית לעולם הפרונטאנד: מהבסיס של האינטרנט, דרך HTML, CSS ו־JavaScript, ועד APIs, Frameworks, ביצועים, אבטחה, בדיקות, ארכיטקטורה ו־Deployment.

' + '
' + '' + '' + '' + '
' + '
' + '
' + '

איך בנוי עולם הפרונטאנד?

' + '

HTML מגדיר את מבנה התוכן. CSS מגדיר את המראה והפריסה. JavaScript מוסיף התנהגות. הדפדפן מריץ ומציג את הכול באמצעות DOM, CSSOM ומנועי עיבוד. APIs מאפשרים לקבל נתונים ולהשתמש ביכולות הדפדפן. Frameworks ו־Libraries עוזרים לבנות מערכות גדולות. Tooling, Testing ו־Deployment משלימים את מחזור הפיתוח.

' + '
' + '
'; for(let i=0;i' + escapeHTML(categories[i][0]) + '' + '

' + escapeHTML(categories[i][1]) + '

' + '' + ''; } html += '
'; return html; } /* ========================================================= NAVIGATION ========================================================= */ const pageOrder = [ "home", "internet", "html", "css", "javascript", "dom", "browser", "apis", "forms", "accessibility", "responsive", "uiux", "animation", "performance", "security", "api", "frameworks", "libraries", "typescript", "packages", "build", "git", "testing", "debugging", "deployment", "architecture", "components", "routing", "state", "pwa", "seo", "multimedia", "projects", "dictionary", "map" ]; function getIndex(id){ return pageOrder.indexOf(id); } function renderPage(id){ const content = document.getElementById("content"); if(id === "home"){ content.innerHTML = renderHome(); return; } if(id === "map"){ content.innerHTML = '
› מפת Frontend
' + '

מפת Frontend

' + '

היררכיה שמציגה את הקשרים המרכזיים בין התחומים.

' + renderMap() + navigationButtons(id); return; } if(id === "dictionary"){ content.innerHTML = '
› מילון
' + '

מילון Frontend

' + '

חפש מושג וקפוץ לתחום הרלוונטי.

' + renderDictionary("") + navigationButtons(id); bindDictionary(); return; } if(id === "projects"){ content.innerHTML = '
› פרויקטים
' + '

פרויקטים מעשיים

' + '

פרויקטים שמחברים בין כמה תחומי Frontend למערכת אחת.

' + renderProjects() + navigationButtons(id); return; } const page = pages[id]; if(!page){ navigate("home"); return; } let html = '
' + '' + ' › ' + escapeHTML(page.title) + '
' + '

' + escapeHTML(page.title) + '

' + '

' + escapeHTML(page.description) + '

'; if(page.sections && page.sections.length){ html += '
' + '
תוכן עניינים
'; for(let i=0;i' + escapeHTML(page.sections[i].title) + ''; } html += '
'; for(let i=0;i 0 ? pageOrder[index-1] : null; let next = index < pageOrder.length-1 ? pageOrder[index+1] : null; let html = '
'; if(previous){ html += ''; } html += ''; if(next){ html += ''; } html += '
'; return html; } function navigate(id){ renderPage(id); document.querySelectorAll(".nav-item").forEach(function(item){ item.classList.toggle( "active", item.getAttribute("data-page") === id ); }); const sidebar = document.getElementById("sidebar"); sidebar.classList.remove("open"); window.scrollTo({ top:0, behavior:"smooth" }); if(history.replaceState){ history.replaceState(null,"","#"+id); } } /* ========================================================= SEARCH ========================================================= */ const searchInput = document.getElementById("searchInput"); const searchResults = document.getElementById("searchResults"); function searchSite(query){ const q = query.trim().toLowerCase(); searchResults.innerHTML = ""; if(!q){ searchResults.classList.remove("show"); return; } let results = []; for(let i=0;i' + '' + escapeHTML(item[0]) + '' + '' + escapeHTML(item[1]) + '' + ''; count++; } if(count === 0){ html = '
לא נמצאו מושגים התואמים לחיפוש.
'; } container.innerHTML = html; }); } /* ========================================================= MOBILE MENU ========================================================= */ document.getElementById("menuButton").addEventListener("click",function(){ document.getElementById("sidebar").classList.toggle("open"); }); document.querySelectorAll(".nav-item").forEach(function(item){ item.addEventListener("click",function(){ navigate(this.getAttribute("data-page")); }); }); /* ========================================================= KEYBOARD SEARCH ========================================================= */ document.addEventListener("keydown",function(event){ if( (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k" ){ event.preventDefault(); searchInput.focus(); } if(event.key === "Escape"){ searchResults.classList.remove("show"); document.getElementById("sidebar").classList.remove("open"); } }); /* ========================================================= INITIAL PAGE ========================================================= */ (function init(){ let id = location.hash.replace("#",""); if(!pages[id] && id !== "map" && id !== "dictionary"){ id = "home"; } navigate(id); })(); window.addEventListener("hashchange",function(){ const id = location.hash.replace("#","") || "home"; if(id === "map" || id === "dictionary" || pages[id]){ renderPage(id); document.querySelectorAll(".nav-item").forEach(function(item){ item.classList.toggle( "active", item.getAttribute("data-page") === id ); }); } });