איך יוצרים שכבות בדף אינטרנט

שרה רחל

לדוגמא התוכן בצד העמוד נשאר קבוע
וכל לחיצה על קשור מביאה תוכן שונה
איך זה נקרא? איך אני מחפשת לזה הדרכה בגוגל?

shraga

באיזו פלטפורמה? html טהור? וורדפרס?

dovid

@שרה-רחל נתחיל עם זה שיש שתי גישות:
א. ריענון מלא, אבל שמירת מראה עקבי.
זה מה שקורה בכל האתרים כמו אמזון ואיביי, או זאפ הישראלי. את לוחצת על מאפיין בצד, כל הדף עובר ריענון ונראה בדיוק זהה חוץ מהשינויים המתבקשים. הכתובת למעלה משתנית כמובן בעת הלחיצה.
ב. ריענון AJAX - הדף נשאר אותו דבר ורק חלקים ממנו משתנים ע"י רכיב קוד.
דפים שעובדים ככה לגמרי נקראים SPA.
באופן הזה הכתובת לא בהכרח משתנית, ברוב המקרים רצוי שהיא תשתנה הן בשביל הלחצנים הקודם/הבא והן בשביל שהמשתמש יוכל לשמור או לשלוח כתובת שמייצגת את המצב המדוייק של האפליקציה.

אני מניח שאת שואלת על השני,
יש דרכים פרימיטיביות לעשות את זה, ויש דרכים מודרניות ע"י ספריות כמו angular, react וכמובן vue.
בספריות מודרניות כאלו קוראים לזה router.

שרה רחל

@shraga
HTML טהור

yossiz

@dovid אפשר להוסיף עוד גישה שהוא איפשהו באמצע, דהיינו iframe.

שרה רחל

@yossiz
תודה

dovid

@שרה-רחל את רוצה פתרון מבוסס HTML ללא JS בכלל?

הנה דוגמת פתרון מבוסס אייפרים:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_target

שרה רחל

@dovid
יכול להיות גם עם JS
אבל פשוט לי יותר כך
תודה זה באמת מאד עזר

מוטי אורן

@שרה-רחל נאמרו פה תשובות מצויינות, מה אני כבר יכול להוסיף... אבל כעיקרון את יכולה גם להזריק את האלמנטים בצורה דינאמית לדף באמצעות אובייקט ה-DOM, ע"י האזנה לאירוע הלחיצה על הקישורים שבדף. אני מתכוון לרעיון בסגנון של זה:

const homePageButton = document.getElementById('home-page-button');
const aboutButton = document.getElementById('about-button');

homePageButton.addEventListener('click', createHomePageElements)
aboutButton.addEventListener('click', createAboutPageElements)

function createHomePageElements() {
  // הקוד שמוסיף את האלמנטים הנצרכים לדף הבית
}

function createAboutePageElements() {
   //הקוד שמוסיף את האלמנטים הנצרכים לדף האודות 
}

Avi Klaine

@שרה-רחל או לשנות את display של האלמנט שיתגלה מ none ל- block ושל שאר האלמנטים לnone באמצעות לחיצה על כפתור כמובן