\n", "a":"קישור", "img":"\"תיאור", "form":"
\n \n \n \n
", "selector":".card {\n color: #fff;\n background: #15171c;\n}", "Flexbox":".container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n}", "Grid":".grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 20px;\n}", "Media Queries":"@media (max-width: 700px) {\n .grid {\n grid-template-columns: 1fr;\n }\n}", "function":"function add(a, b) {\n return a + b;\n}\n\nconsole.log(add(2, 3));", "Arrow Functions":"const add = (a, b) => a + b;", "querySelector":"const button = document.querySelector(\"button\");\nbutton.textContent = \"נלחץ\";", "Event Delegation":"document.querySelector(\"ul\").addEventListener(\"click\", event => {\n if(event.target.matches(\"li\")) {\n console.log(event.target.textContent);\n }\n});", "fetch":"async function loadUsers() {\n const response = await fetch(\"https://example.com/api/users\");\n const users = await response.json();\n console.log(users);\n}", "Promise":"fetch(\"/api/data\")\n .then(response => response.json())\n .then(data => console.log(data))\n .catch(error => console.error(error));", "localStorage":"localStorage.setItem(\"theme\", \"dark\");\nconst theme = localStorage.getItem(\"theme\");", "TypeScript":"interface User {\n id: number;\n name: string;\n}\n\nfunction greet(user: User): string {\n return `שלום ${user.name}`;\n}", "API":"fetch(\"/api/products\")\n .then(response => {\n if (!response.ok) throw new Error(\"Request failed\");\n return response.json();\n })\n .then(data => console.log(data));", "Git":"git init\ngit add .\ngit commit -m \"Initial commit\"\ngit branch -M main\ngit remote add origin \ngit push -u origin main" }; return examples[name] || null; } function renderConcept(name,definition,relation){ let html=`
${escapeHTML(name)}

${escapeHTML(definition)}

הקשר ל־Frontend: ${escapeHTML(relation)}
`; const ex=exampleFor(name); if(ex) html+=codeBlock(ex); return html; } function slug(text){ return String(text).toLowerCase() .replace(/[^\u0590-\u05ff\w]+/g,"-") .replace(/^-|-$/g,""); } function renderPage(key){ const page=pages[key]; if(page.home) return renderHome(); if(page.projects) return renderProjects(); if(page.dictionary) return renderDictionary(); if(page.map) return renderMap(); let html=`
ראשי / ${escapeHTML(page.title)}

${escapeHTML(page.title)}

${escapeHTML(page.description)}

`; html+=`
תוכן העניינים
`; page.sections.forEach((s,i)=>{ html+=`${escapeHTML(s[0])}`; }); html+=`
`; page.sections.forEach((section,index)=>{ html+=`

${escapeHTML(section[0])}

`; section[1].forEach(item=>{ html+=renderConcept(item[0],item[1],item[2]); }); html+=`
`; }); html+=`
איך התחום מתחבר למערכת?
${connectionText(key)}
${navigation(key)} `; return html; } function connectionText(key){ const relations={ web:"HTML, CSS ו־JavaScript פועלים בתוך סביבת ה־Web, והדפדפן מתקשר עם שרתים באמצעות HTTP.", html:"HTML מספק את המבנה הסמנטי שעליו CSS מעצב ו־JavaScript מוסיף התנהגות.", css:"CSS מקבל את מבנה HTML ומייצר את השכבה החזותית והפריסתית.", javascript:"JavaScript משתמש ב־DOM וב־Web APIs כדי להפוך מסמך לממשק אינטראקטיבי.", dom:"ה־DOM הוא הגשר המעשי בין מסמך HTML לבין קוד JavaScript שרוצה לקרוא ולשנות אותו.", browser:"הדפדפן הוא סביבת ההרצה שבה HTML, CSS ו־JavaScript נפגשים.", apis:"Web APIs פותחים ל־Frontend יכולות של הדפדפן מעבר לשפת JavaScript עצמה.", forms:"טפסים מחברים בין ממשק המשתמש לבין קלט שניתן לשלוח ל־API או לעבד בצד הלקוח.", accessibility:"נגישות משפיעה על HTML, CSS, JavaScript, Forms, Navigation ו־UI.", responsive:"Responsive Design מחבר CSS, Layout ו־UX כדי להתאים את הממשק למסכים שונים.", uiux:"UI ו־UX מגדירים כיצד המבנה הטכני הופך לממשק ברור ושימושי.", animation:"אנימציות משתמשות ב־CSS וב־JavaScript כדי לספק תנועה ומשוב.", performance:"ביצועים נוגעים לכל שכבה: משאבים, רשת, JavaScript, Rendering ו־UX.", security:"אבטחה מחייבת להבין גם את הדפדפן וגם את האופן שבו Frontend מתקשר עם מערכות חיצוניות.", api:"API הוא החיבור בין ממשק המשתמש לבין נתונים ושירותים שאינם חלק מה־UI עצמו.", frameworks:"Frameworks מארגנים את הידע הבסיסי של JavaScript, DOM, Components ו־Routing למערכת פיתוח רחבה.", libraries:"Libraries מוסיפות יכולות ממוקדות למערכת מבלי בהכרח להכתיב את כל מבנה היישום.", typescript:"TypeScript מוסיפה שכבת טיפוסים ל־JavaScript ומשתלבת בכלי build.", packages:"ניהול חבילות מחבר את הפרויקט לאקוסיסטם של ספריות וכלי פיתוח.", build:"Build Tools הופכים קוד מקור ומודולים לתוצרים שניתן להריץ ולפרסם.", git:"Git מנהל את ההיסטוריה של כל שכבות הפרויקט ומאפשר עבודה משותפת.", testing:"בדיקות מאמתות שהרכיבים, הלוגיקה והתהליכים עובדים כפי שתוכננו.", debugging:"Debugging משתמש בכלי הדפדפן כדי להבין את הקשר בין קוד, DOM, Network ו־Runtime.", deployment:"Deployment לוקח את התוצר ומנגיש אותו למשתמשים דרך Hosting, Domain ו־HTTPS.", architecture:"ארכיטקטורה מחברת Components, State, Services, Routing ו־Data Flow למערכת אחת.", components:"Components הם יחידות הבנייה של ממשקים מודרניים.", routing:"Routing מחבר בין URL, Pages, Components ו־State.", state:"State הוא המידע המשתנה שמניע את הממשק.", pwa:"PWA מחברת Frontend, Browser APIs, Service Workers ו־Caching.", seo:"SEO מתחבר ל־HTML סמנטי, Metadata, Performance, Accessibility ותוכן.", media:"Multimedia משלבת HTML, CSS, Browser APIs, Performance ו־Accessibility." }; return relations[key] || "התחום הוא חלק ממפת הידע הרחבה של Frontend ומתחבר ישירות לתחומים נוספים."; } function navigation(key){ const index=order.indexOf(key); const prev=order[index-1]; const next=order[index+1]; return `
`; } function renderHome(){ const topics=order.filter(k=>!["projects","dictionary","map"].includes(k)); let html=`
מפת ידע • קורס • אנציקלופדיה

Frontend
המדריך המלא

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

${[ ["HTML","מבנה"], ["CSS","מראה"], ["JavaScript","התנהגות"], ["DOM","מבנה בזמן ריצה"], ["Browser","סביבת הרצה"], ["API","נתונים ושירותים"], ["Frameworks","מערכות מורכבות"], ["Build","תהליך בנייה"], ["Testing","בדיקה"], ["Deployment","פרסום"] ].map((x,i)=>`
${x[0]}
${x[1]}
${i<9?'
←
':''} `).join("")}

מהו Frontend?

Frontend הוא הצד של יישום Web שהמשתמש רואה ומפעיל. הוא כולל את מבנה התוכן, העיצוב, האינטראקציות, התקשורת עם שירותים והאופן שבו הדפדפן מציג את המערכת.

HTML

מגדיר את המבנה והמשמעות של התוכן.

CSS

מגדיר פריסה, מראה, צבעים, טיפוגרפיה ואנימציות.

JavaScript

מוסיף לוגיקה, אינטראקציה והתנהגות.

Browser

מוריד, מפרש, מרנדר ומריץ את האפליקציה.

DOM

מייצג את מסמך HTML כמבנה שניתן לשנות.

Web APIs

מספקים יכולות דפדפן כמו Fetch, Storage ו־Workers.

כל תחומי הפרונטאנד

`; topics.forEach(key=>{ html+=` `; }); html+=`

שרשרת הידע

HTML מגדיר את מבנה התוכן → CSS מגדיר את המראה → JavaScript מוסיף התנהגות → DOM מאפשר לקוד לעבוד עם המסמך → Browser מריץ ומציג הכול → API מחבר נתונים ושירותים → Frameworks מארגנים מערכות מורכבות → Build Tools בונים את התוצר → Testing בודק אותו → Deployment מפרסם אותו.

מפת הפרונטאנד

${renderMapCompact()}
`; return html; } function renderProjects(){ let html=`
ראשי / פרויקטים מעשיים

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

הפיכת הידע התאורטי למערכות Frontend אמיתיות.

`; projectsData.forEach((p,i)=>{ html+=`
${i+1}. ${p[0]}

מטרת הפרויקט: ${p[1]}

הטכנולוגיות: ${p[2]}

מבנה האתר: ${p[3]}

הידע הדרוש: ${p[4]}

שלבי הבנייה: ${p[5]}

`; }); html+=`

סדר התקדמות מומלץ

${["HTML","CSS","JavaScript","DOM","APIs","Responsive","Accessibility","Frameworks","Testing","Deployment"].map((x,i)=>`
${i+1}
${x}
`).join('
←
')}
${navigation("projects")}`; return html; } function buildDictionary(){ const all=[]; Object.keys(pages).forEach(key=>{ const p=pages[key]; if(!p.sections)return; p.sections.forEach(section=>{ section[1].forEach(item=>{ all.push({ name:item[0], definition:item[1], category:labels[key], page:key }); }); }); }); const unique=[]; const seen=new Set(); all.forEach(x=>{ const k=x.name.toLowerCase(); if(!seen.has(k)){ seen.add(k); unique.push(x); } }); return unique.sort((a,b)=>a.name.localeCompare(b.name,"he")); } const dictionaryData=buildDictionary(); function renderDictionary(){ return `
ראשי / מילון Frontend

מילון Frontend

מאגר מושגים לפי א״ב. ניתן לחפש ולסנן לפי תחום.

${navigation("dictionary")}`; } function filterDictionary(){ const q=(document.getElementById("dictSearch")?.value||"").toLowerCase(); const cat=document.getElementById("dictCategory")?.value||""; const list=dictionaryData.filter(x=> (!q || x.name.toLowerCase().includes(q) || x.definition.toLowerCase().includes(q)) && (!cat || x.category===cat) ); const container=document.getElementById("dictionaryList"); if(!container)return; container.innerHTML=list.map(x=>`
${escapeHTML(x.name)}

${escapeHTML(x.definition)}

תחום: ${escapeHTML(x.category)} ·
`).join("") || `
לא נמצאו מושגים התואמים לחיפוש.
`; } function renderMapCompact(){ return `
${order.filter(k=>pages[k]&&!["projects","dictionary","map"].includes(k)).map((key,i)=>` ${labels[key]} ${i→':''} `).join("")}
`; } function renderMap(){ return `
ראשי / מפת Frontend

מפת Frontend

המפה מציגה את התחומים המרכזיים ואת הקשרים ביניהם. כל רכיב ניתן ללחיצה ומוביל לדף הלימוד שלו.

Frontend

Web
יסודות האינטרנט
←
HTML
מבנה
←
CSS
עיצוב
←
JavaScript
התנהגות
Browser
DOM
Web APIs
Forms
UI / UX
Accessibility
Responsive
Performance
Security
API
Frameworks
Libraries
TypeScript
Package Management
Build Tools
Git
Testing
Debugging
Architecture
Components
Routing
State Management
PWA
SEO
Multimedia
Deployment

כל התחומים

${renderMapCompact()}

הקשר בין השכבות

Web מספק את התשתית → HTML מתאר תוכן → CSS מעצב אותו → JavaScript מוסיף לוגיקה → DOM מחבר את הקוד למסמך → Browser APIs מספקים יכולות → API מחבר שירותים חיצוניים → Frameworks מארגנים יישומים גדולים → Tooling בונה ומנהל את הקוד → Testing מאמת אותו → Deployment מפרסם אותו.
${navigation("map")}`; } /* ========================================================= NAVIGATION ========================================================= */ function buildSideNav(){ const side=document.getElementById("sideNav"); side.innerHTML=`
${order.filter(k=>!["projects","dictionary","map"].includes(k)).map(k=>` `).join("")}`; } function navigate(key){ if(!pages[key])key="home"; document.getElementById("app").innerHTML=renderPage(key); document.querySelectorAll(".side-btn").forEach(btn=>{ btn.classList.toggle("active",btn.dataset.page===key); }); history.replaceState({page:key},"",`#${key}`); window.scrollTo({top:0,behavior:"smooth"}); if(key==="dictionary"){ setTimeout(filterDictionary,0); } document.getElementById("sidebar").classList.remove("open"); } function toggleSidebar(){ document.getElementById("sidebar").classList.toggle("open"); } /* ========================================================= SEARCH ========================================================= */ const searchIndex=[]; Object.keys(pages).forEach(key=>{ const page=pages[key]; searchIndex.push({ title:page.title, description:page.description, page:key }); if(page.sections){ page.sections.forEach(section=>{ section[1].forEach(item=>{ searchIndex.push({ title:item[0], description:item[1], page:key }); }); }); } }); function searchSite(value){ const q=value.trim().toLowerCase(); const box=document.getElementById("searchResults"); if(!q){ box.classList.remove("show"); box.innerHTML=""; return; } const results=searchIndex.filter(x=> x.title.toLowerCase().includes(q) || x.description.toLowerCase().includes(q) ).slice(0,12); box.innerHTML=results.map(x=>` `).join("") || `
לא נמצאו תוצאות.
`; box.classList.add("show"); } function navigateFromSearch(page){ document.getElementById("searchInput").value=""; document.getElementById("searchResults").classList.remove("show"); navigate(page); } /* ========================================================= COPY ========================================================= */ function copyCode(button){ const code=button.parentElement.querySelector("pre").innerText; navigator.clipboard?.writeText(code).then(()=>{ const old=button.textContent; button.textContent="הועתק"; setTimeout(()=>button.textContent=old,1200); }); } /* ========================================================= KEYBOARD / HISTORY ========================================================= */ window.addEventListener("popstate",()=>{ const key=location.hash.replace("#",""); navigate(pages[key]?key:"home"); }); document.addEventListener("keydown",e=>{ if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="k"){ e.preventDefault(); document.getElementById("searchInput").focus(); } }); document.addEventListener("click",e=>{ const search=document.querySelector(".header-search"); if(search && !search.contains(e.target)){ document.getElementById("searchResults").classList.remove("show"); } }); /* ========================================================= START ========================================================= */ buildSideNav(); const initial=location.hash.replace("#",""); navigate(pages[initial]?initial:"home");