לדלג לתוכן

0.2 איך עובד האינטרנט פתרון

פתרונות

תרגיל 1: שאלות הבנה בסיסיות

  1. DNS (Domain Name System) הוא שירות שממיר שמות דומיין (כמו google.com) לכתובות IP (כמו 142.250.185.206). הוא עובד כמו ספר טלפונים - במקום לזכור מספרים, אנחנו זוכרים שמות.

  2. לקוח (client) הוא תוכנה ששולחת בקשות - למשל הדפדפן. שרת (server) הוא מחשב שמחכה לקבל בקשות, מעבד אותן ומחזיר תשובות - למשל שרת של אתר אינטרנט.

  3. קוד סטטוס 404 (Not Found) אומר שהעמוד שביקשנו לא נמצא בשרת. הכתובת שפנינו אליה לא קיימת.

  4. קוד סטטוס 200 (OK) אומר שהבקשה הצליחה והשרת מחזיר את מה שביקשנו.

  5. קוד סטטוס 500 (Internal Server Error) אומר שמשהו השתבש בצד של השרת - באג בקוד, קריסה, או בעיה פנימית. הבעיה היא לא באשמת הלקוח.

תרגיל 2: הבדל בין GET ל-POST

  1. בקשת GET מיועדת לקבלת מידע מהשרת, ולא שולחת מידע בגוף הבקשה. בקשת POST מיועדת לשליחת מידע לשרת, ומעבירה את המידע בגוף הבקשה (body).

  2. כשמקלידים כתובת URL בדפדפן ולוחצים Enter, הדפדפן שולח בקשת GET. גם כשלוחצים על קישור באתר.

  3. כשממלאים טופס הרשמה באתר (שם משתמש, סיסמה, אימייל) ולוחצים על כפתור "הרשמה" - הדפדפן שולח בקשת POST עם הפרטים שמילאנו.

  4. לא, בקשת GET לא שולחת מידע בגוף הבקשה. אם צריך להעביר פרמטרים ב-GET, הם מועברים ב-URL עצמו (כמו ?q=hello&lang=he).

תרגיל 3: מה קורה כשמקלידים URL

כשמקלידים https://www.youtube.com:

  1. חיפוש DNS - הדפדפן שולח שאילתה לשרת DNS כדי לברר מה ה-IP של www.youtube.com.
  2. חיבור TCP/TLS - הדפדפן יוצר חיבור TCP לשרת של יוטיוב ומבצע TLS handshake כדי ליצור חיבור מוצפן (כי הכתובת היא HTTPS).
  3. בקשת HTTP - הדפדפן שולח בקשת GET / HTTP/1.1 לשרת עם הדרים כמו Host, User-Agent ו-Accept.
  4. תשובת השרת - השרת מחזיר תשובה עם קוד 200 OK וגוף התשובה שמכיל קוד HTML.
  5. רינדור - הדפדפן בונה DOM מה-HTML, טוען קבצי CSS ו-JavaScript נוספים, ומצייר את הדף על המסך.

תרגיל 4: קודי סטטוס

  1. 200 OK - הכל עובד תקין, השרת מחזיר את דף הבית.
  2. 404 Not Found - העמוד שהמשתמש ניסה לגשת אליו לא קיים.
  3. 500 Internal Server Error - באג בקוד של השרת גרם לקריסה.
  4. 301 Moved Permanently - האתר עבר לכתובת חדשה לצמיתות, הדפדפן יופנה אוטומטית.

תרגיל 5: אתר סטטי מול דינמי

  1. אתר סטטי מחזיר את אותו תוכן לכל המשתמשים - הקבצים קבועים ולא משתנים. אתר דינמי מייצר תוכן שמשתנה לפי המשתמש, הזמן, או מידע ממסד נתונים.

  2. סיווג:

  3. אתר תדמית של מסעדה עם תפריט קבוע - סטטי (התוכן לא משתנה)
  4. פייסבוק - דינמי (כל משתמש רואה פיד אחר)
  5. בלוג אישי עם מאמרים קבועים - סטטי (המאמרים קבועים ולא משתנים לפי המשתמש)
  6. חנות אונליין עם מוצרים ועגלת קניות - דינמי (מוצרים מגיעים ממסד נתונים, עגלת קניות שונה לכל משתמש)

תרגיל 6: חקירה ב-DevTools

התשובות תלויות במה שתראו, אבל לאתר https://www.example.com בדרך כלל:

  • נשלחת בקשת HTTP אחת (או שתיים אם נטען גם favicon).
  • הסטטוס של הבקשה הראשונה הוא 200.
  • ה-Content-Type הוא text/html; charset=UTF-8.
  • ה-User-Agent תלוי בדפדפן שלכם, למשל Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36.

תרגיל 7: שימוש ב-curl

  1. הפקודה curl https://www.example.com מחזירה את קוד ה-HTML של העמוד.

  2. עם הדגל -v:

  3. קוד הסטטוס: 200 OK
  4. התשובה מכילה HTML, התגית הראשונה היא <!doctype html>

  5. ההדר Content-Type: text/html; charset=UTF-8

  6. כשפונים לכתובת שלא קיימת (/this-page-does-not-exist):

  7. קוד הסטטוס יהיה 404 Not Found (בגוגל לפעמים יחזיר 404, ולפעמים 301 שמפנה לדף חיפוש).

תרגיל 8: השוואה לפייתון

  1. הדפדפן לא רק מקבל את ה-HTML, אלא גם מרנדר אותו - הופך אותו מטקסט גולמי לדף ויזואלי עם צבעים, פונטים ותמונות. בנוסף הדפדפן טוען קבצים נוספים (CSS, JS, תמונות) ומריץ JavaScript.

  2. בפייתון אנחנו מדפיסים את ה-HTML כמחרוזת טקסט רגילה - print פשוט מציג טקסט. הדפדפן לעומת זאת מפרסר (מנתח) את ה-HTML, בונה ממנו עץ DOM, מחיל עליו CSS, ומצייר פיקסלים על המסך.

  3. הדפדפן קורא את ה-HTML ובונה עץ DOM, קורא את ה-CSS ובונה CSSOM, משלב את שניהם לעץ רינדור, מחשב פריסה (layout), ומצייר (paint) את הפיקסלים על המסך.