#advanced_programming2 #web

HTML

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

HTML (שפת סימון HyperText) היא שפת סימון המורה לדפדפני אינטרנט כיצד לבנות את דפי האינטרנט שבהם אתה מבקר. זה יכול להיות מסובך או פשוט כמו שמפתח האינטרנט רוצה שזה יהיה. HTML מורכב מסדרה של אלמנטים שבהם אתה משתמש כדי לכלול, לעטוף או לסמן חלקים שונים של תוכן כדי לגרום לו להופיע או לפעול בצורה מסוימת.

למשל אם נרצה לעטוף טקסט כלשהו נוכל להשתמש בתגית <p> כדי שנוכל להוסיף עליו עיצובים ותכונות נוספות

<p>My cat is very grumpy</p>

הבחנה

תגיות ב-HTML אינן תלויות רישיות. זה אומר שהם יכולים להיכתב באותיות גדולות או קטנות. לדוגמה, תג <title> יכול להיכתב בתור <title>, <TITLE>, <Title>, <TiTlE> וכו', וזה יעבוד. עם זאת, עדיף לכתוב את כל התגים באותיות קטנות למען עקביות וקריאה.

מבנה של אלמנט ב HTML

נמשיך עם התגית מהדוגמה למעלה:
Pasted image 20230723200026.png|400
המבנה של תגית HTML מורכב מ:

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

אלמנטים מקננים

ניתן למקם אלמנטים בתוך אלמנטים אחרים.
זה נקרא קינון. אם היינו רוצים לציין שהחתול שלנו מאוד עצבני, נוכל לעטוף את המילה מאוד באלמנט <strong>, מה שאומר שהמילה צריכה להיות בעלת עיצוב טקסט חזק:

<p>My cat is <strong>very</strong> grumpy.</p>

יש דרך נכונה ושגויה לעשות קינון. בדוגמה למעלה, פתחנו תחילה את האלמנט p, ואז פתחנו את האלמנט strong. לקינון נכון, עלינו לסגור תחילה את האלמנט strong, לפני סגירת ה-p.

Error

<p>My cat is <strong>very grumpy.</p></strong>

Void Elements

לא כל האלמנטים עוקבים אחר הדפוס של תג פתיחה, תוכן ותג סגירה. חלק מהאלמנטים מורכבים מתג בודד, המשמש בדרך כלל להוספה/הטמעה של משהו במסמך. אלמנטים כאלה נקראים אלמנטים ריקים. לדוגמה, האלמנט מטמיע קובץ תמונה בדף:

<img
  src="some_src.png"
  alt="icon" />

הבחנה

זה לא חובה להוסיף לתגית void את ה / בסגירה למשל עבור התגית <br> נוכל לרשום אותה כך (זאת תגיד שמבצעת ירידת שורה) והיא עדיין תעבוד, הדפדפן יודע להתעלם אם סוגרים עם התו / שלא לצורך

Attributes

לאלמנטים יכולים להיות תכונות. מבנה התכונה נראה כך:
Pasted image 20230723201142.png|400
תכונות מכילות מידע נוסף על האלמנט שלא יופיע בתוכן. בדוגמה זו, תכונת class היא שם מזהה המשמש למיקוד האלמנט עם מידע על סגנון.

לתכונה צריך להיות הסינתקס הבא :

רווח בינו לבין שם האלמנט. (עבור רכיב עם יותר מתכונה אחת, יש להפריד את התכונות גם ברווחים).
שם התכונה- ואחריו סימן שוויון.
ערך תכונה- עטוף במרכאות פתיחה וסגירה.

Boolean attributes

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

<input type="text" disabled="disabled" />

רוב הדפדפנים מאפשרים לבצע את הקיצור הבא

<!-- using the disabled attribute prevents the end user from entering text into the input box -->
<input type="text" disabled />

<!-- text input is allowed, as it doesn't contain the disabled attribute -->
<input type="text" />

אנטומיה של מסמך HTML

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

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

<!DOCTYPE html> - נועדו לשמש כקישורים למערכת של כללים שדף ה-HTML היה צריך לעקוב אחריהם כדי להיחשב HTML טוב. דוקטיפסים היו נראים בערך כך:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

לאחרונה, ה-doctype הוא boiler plate שצריך לכלול כדי שכל השאר יפעל כמו שצריך. <!DOCTYPE html> היא המחרוזת הקצרה ביותר של תווים שנחשבת כ-doctype חוקי. זה כל מה שצריך לדעת!

<html></html> - רכיב זה עוטף את כל התוכן בדף. זה ידוע לפעמים כאלמנט השורש.
<head></head> - אלמנט זה פועל כמיכל לכל מה שאתה רוצה לכלול בדף HTML, זה לא התוכן שהדף יציג למשתמשים.
זה כולל מילות מפתח ותיאור עמוד שיופיע בתוצאות החיפוש,
נתיב CSS עבור העיצוב של התוכן, הצהרות על charset ועוד.
<meta charset="utf-8"> - אלמנט זה מייצג מטא נתונים שאינם יכולים להיות מיוצגים על ידי רכיבים אחרים הקשורים למטא HTML,
כמו <link>, <script>, <style>, <title>. תכונת התווים מציינת את קידוד התווים עבור המסמך שלך כ-[[UTF-8]], הכולל את רוב התווים מהרוב המכריע של השפות הכתובות האנושיות. עם הגדרה זו, הדף יכול כעת להתמודד עם כל תוכן טקסטואלי שהוא עשוי להכיל. אין סיבה לא להגדיר זאת, וזה יכול לעזור למנוע כמה בעיות מאוחר יותר.
<title> - כותרת הדף בדפדפן כאשר הדף נטען או נשמר בתיקיית bookmark של הדפדפן.
<body> - מכיל את כל התוכן שיוצג על המסך החל מטקסטים , תמונות , סרטונים, משחקים , שמע וכדומה.

דגשי סינתקס

השמטת גרשיים

ניתן במקרים מסויימים להשמיט גרשיים ממחרוזות למשל

<a href=https://www.mozilla.org/>favorite website</a>

עם זאת, ברגע שנוסיף את התכונה title נקבל התנהגות לא צפויה.
Pasted image 20230723223628.png
ההתנהגות אינה צפויה כיוון שהדפדפן מפרש את זה כרגע כאילו יש משתנה title עם ערך The שתי משתנים בוליאנים Mozilla ו homepage.

שני גרשיים או אחד?

ב HTML , זה לא משנה אם מחרוזות מסמנים עם ״ או עם ' בודד כלומר
"hello world" זה כמו 'hello world' ואין חשיבות בין השניים רק צריך לשים לב שאם השתמשנו באחד כדי לפתוח מחרוזת חייבים להשתמש באותו אחד כדי לסגור אותה למשל "hello world' אינה מחרוזת תקינה

רווחים ב HTML

לא משנה כמה רווחים נכניס במסמך שלנו כולל ירידות שורה, ה praser מוריד מספר רווחים לרווח אחד בודד כאשר הוא מרנדר את הקוד.
הסיבה היחידה להוסיף מספר רווחים גדול יותר הוא בשביל נראות עבור המתכנתים . למשל עבור הקוד

<p id="noWhitespace">Dogs are silly.</p>

<p id="whitespace">Dogs
    are
        silly.</p>

הדפדפן ירנדר אותם ככה :

Screenshot 2023-07-23 at 22.44.02.png

הבחנה

גישה ל innerHTML של אלמנט ב javascript ישאיר את כל הרווחים מחוברים וזה עלול לגרום להתנהגויות לא צפויות
Pasted image 20230723224551.png|500

תווים מיוחדים במחרוזות HTML

התווים < ,>,",' וגם & הם תווים מיוחדים ב HTML והם חלק מהסינתקס עצמו. אם נרצה לכלול אותם במחרוזות נצטרך להשתמש ברפרנס בתוך המחרוזת שהדפדפן יודע לפרש כתו זה

Pasted image 20230723224852.png|500

HTML text

headings and paragraphs

פסקה תסומן בתגית <p> למשל

<p>I am a paragraph, oh yes I am.</p>

כותרת תסומן בתגית <hi> כאשר $i \in {0, 1, 2, 3, 4, 5, 6}$ . ככל ש $i$ גדול יותר ככה הכותרת קטנה יותר.

רשימות

unordered

כל רשימה לא מסודרת מתחילה ברכיב <ul> - זה עוטף את כל פריטי הרשימה:

<ul>
  milk
  eggs
  bread
  hummus
</ul>

השלב האחרון הוא לעטוף כל פריט ברשימה ברכיב <li> (פריט רשימה):

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

ordered

זהה בסינתקס ל unordered רק שמחליפים את התגיד העוטפת בתגית ol

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

Block and Inline Elements

Block-level Elements

אלמנט ברמת הבלוק תמיד מתחיל בשורה חדשה, והדפדפנים מוסיפים אוטומטית קצת רווח (margin) לפני ואחרי האלמנט. אלמנט ברמת בלוק תמיד תופס את מלוא הרוחב הזמין (נמתח לשמאל ולימין ככל שהוא יכול).
רשימה של אלמנטים ברמת הבלוק :
Screenshot 2023-07-24 at 0.34.51.png|500

Inline Elements

אלמנט inline אינו מתחיל בשורה חדשה.
אלמנט inline תופס רק רוחב ככל הדרוש.
רשימה של אלמנטים inline:
Pasted image 20230724003602.png|500

CSS

css או Cascading Style Sheets היא הטכנולוגיה הראשונה שכדאי להבין אחרי הבנה ב HTML.
בעוד ש-HTML משמש להגדרת המבנה והסמנטיקה של התוכן שלך, CSS משמש כדי לסגנן אותו ולפרוס אותו. לדוגמה, ניתן להשתמש ב-CSS כדי לשנות את הגופן, הצבע, הגודל והמרווח של התוכן שלך, לפצל אותו למספר עמודות או להוסיף אנימציות ותכונות דקורטיביות אחרות.

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

הערה

דפדפן נקרא לפעמים user agent, שפירושו בעצם תוכנית מחשב המייצגת אדם בתוך מערכת מחשב. דפדפנים הם הסוג העיקרי של user agents שאנחנו חושבים עליהם כשמדברים על CSS, עם זאת, הם לא היחידים. ישנם user agent זמינים, כגון אלה הממירים מסמכי HTML ו-CSS לקובצי PDF להדפסה.

סינתקס

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

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

h1 {
  color: red;
  font-size: 5em;
}

מה קרה כאן בעצם?

CSS נפתח עם Selector (עליו נדבר בהמשך)
לאחר מכן סוגריים מסולסלים {}
בתוך הסוגריים תהיה הצהרה או מספר הצהרות על תכונות של אותו selector בתצורת key ו value.

לתכונות ב css יש ערכים שונים שכל אחד מהם מסכימה לקבל וזה תלוי בתכונה עצמה, כדי לשלוט ב css יש צורך להכיר את התכונות הרלוונטיות ואת הערכים שהם צריכים לקבל.

קובץ CSS יכול להכיל מספר רב של חוקים שכתובים אחד אחרי השני

h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}

shorthands

תכונות מסוימות כמו font ו background יכולות לקבל מספר ארגומנטים
בשורה אחת במקום במספר שורות למשל
padding: 10px 20% 15px 20px

הוספת CSS ל HTML

Style tag

הדרך הכי מהירה היא על ידי שימור ב style tag בתוך המסמך והיא תכיל בתוכה את הסטייל הרלוונטי לכל עמוד, למשל:

<html>
	<head>
		<style>
			div {
			  background-color: red;
			  color: green;
			  text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div> Hello </div>
		<div> world </div>
	</body>
</html>

זאת גישה שעובדת למשל העיצוב עבור העמוד ייראה כך:
Pasted image 20230724164623.png|250
עם זאת, ישנן מספר בעיות בגישה הזאת

שכפול קוד- בשיטה זאת עיצוב יהיה רלוונטי ברמת העמוד בלבד, עם זאת, באתר אמיתי ישנם מספר עמודים ועיצוב זהה ולכן נצטרך לכתוב בכל עמוד html את אותו הקוד.
קוד פחות קריא - שילוב של שתי סינתקסים שונים יכול מאוד לבלבל (אם כי, ישנן טכניקות בהן זה עובד טוב כמו ב [[React]]).

Link to CSS file

בתוך תגית ה <head> נוכל לקשר לקובץ css שמכיל עיצוב באמצעות תגיד <link> למשל

<link rel="stylesheet" href="styles.css" />

אלמנט <link> אומר לדפדפן שיש לנו גיליון סגנונות, באמצעות התכונה $r e l$ , והמיקום של גיליון הסגנונות הזה כערך של תכונת $h r e f$ .

בתוך הקובץ הזה נוכל לשים את כל הסלקטורים הרלוונטים.

Selectors

element selector

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

p {
  color: green;
}

נוכל להתמקד על כמה סלקטורים, למשל אם נרצה שגם כל <li> יהיו בצבע ירוק, התחביר הבא נקרא selector list

p,
li {
  color: green;
}

הבחנה

הדפדפנים מוסיפים הרבה פעמים עיצוב דיפולטי לאלמנטים ב HTML. הדוגמה הקלאסית לכך היא העיצוב הדיפולטי של אלמנטי $h_{i}$ למשל $h_{1}$ יהיה בbold. חשוב לציין שנוכל בקבצי ה css שלנו לדרוס עיצובים אלה לעתים אם נרצה בכך.

class selector

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

הגדר לאלמנט רצוי תכונת class

<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

בקובץ ה css נוכל לפנות למחלקה speciel על ידי יצירת selector שמתחיל בתו .

.special {
  color: orange;
  font-weight: bold;
}

אתה יכול להחיל את המחלקה של $s p e c i e l$ על כל רכיב בדף שלך שאתה רוצה שיהיה זהה למראה של פריט זה ברשימה. לדוגמה, ייתכן שנרצה שה<span> בפסקה יהיה גם כתום ומודגש.

לפעמים נראה כללים עם בורר שמפרט את בורר רכיבי ה-HTML יחד עם המחלקה:

li.special {
  color: orange;
  font-weight: bold;
}

תחביר זה פירושו "למקד לכל אלמנט li שיש לו מחלקה של speciel".

id selector

באופן דומה למחלקות נוכל לבצע עיצוב ספציפי על אלמנטים עם תכונה ה id באופן הבא

#unique {\\some design}

Pseudo-classes and pseudo-elements

קבוצה זו של בוררים כוללת מחלקות פסאודו, המעצבות מצבים מסוימים של אלמנט. ה-hover pseudo-class למשל בוחר אלמנט רק כאשר מרחף מעליו על ידי מצביע העכבר:

a:hover {
  text-decoration: none;
}

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

נוכל גם לגשת לפסודו אלמנטים שהם חלק מאלמנט כלשהו, לאלו אפשר לגשת רק כ selectors ב CSS למשל ::firstline משמש את השורה הראשונה בפסקה.

p::first-line {
}

דCombinators

בורר CSS יכול להכיל יותר מבורר פשוט אחד. בין הבוררים הפשוטים, נוכל לכלול קומבינטור.
יש 4 סוגי קומבינטורים

descendant selector - תו הרווח
child selector - <
adjacent sibling selector - +
general sibling selector - ~

Descendant Selector

בורר הצאצאים מתאים לכל האלמנטים שהם צאצאים של אלמנט שצוין.
למשל עבור כל ה p שנמצאים בתוך div:

div p {  background-color: yellow;}

Child Selector

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

div > p {  background-color: yellow;}

Adjacent Sibling Selector

בורר אחים סמוכים: מסומן בסימן פלוס (+) ומשמש לבחירת אלמנט העוקב ישירות אחרי אלמנט ספציפי אחר. שני האלמנטים חייבים לחלוק את אותו הורה.

div + p {  background-color: yellow;}

General Sibling Selector

בורר האחים הכללי (~) משמש לבחירת אלמנטים שהם אחים של אלמנט מסוים ומופיעים אחריו במבנה ה-HTML. בניגוד לבורר האחים הסמוך (+), שבוחר רק את האח הבא המיידי, בורר האחים הכללי בוחר את כל האחים הבאים התואמים את הקריטריונים שצוינו.

div ~ p {  background-color: yellow;}

קומבינציות של הנ״ל

נוכל לשלב מספר קומבינטורים ביחד באופן דומה למשל

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

זה יעצב כל אלמנט עם מחלקה של special, שנמצאת בתוך <p>, שמגיעה מיד אחרי <h1>, שנמצאת בתוך body.

Specificity

אתה עלול להיתקל בתרחישים שבהם שני בוררים בוחרים באותו אלמנט HTML. למשל עבור <p class="special">What color am I?</p>
אם יהיה לנו CSS כזה

.special {
  color: red;
}

p {
  color: blue;
}

לשפת ה-CSS יש כללים לשלוט איזה בורר חזק יותר במקרה של התנגשות. כללים אלה נקראים Specificity.
ההירכייה היא כזאת

Inline style
ID
classes, pseudo classes, attribute selectors
elements, pseudo elements

הבחנה

במצב שבו יש שיוויון בspecificity החוק האחרון הוא המנצח למשל
Pasted image 20230724185055.png|300
במצב זה הרקע יהיה אדום

איך מחשבים Specificity?

התחל ב-0, הוסף 100 עבור כל ערך מזהה, הוסף 10 עבור כל ערך מחלקה (או בורר פסאודו-מחלקה או תכונות), הוסף 1 עבור כל בורר אלמנטים או פסאודו-אלמנט.

הבחנה

inline css מקבל אוטומטי ערך של 1000 והוא מקבל את העדיפות הגבוהה ביותר תמיד.
ההחרגה היחידה לנ״ל היא !important שידרוס גם inline CSS , הוא מתעלם מה cascade ומיד נותן את העידפות הגבוהה ביותר לתכונה שמסומנת כ״חשובה״

להלן טבלה המדגימה חישוב של specificity
Pasted image 20230724190207.png

CSS Functions

calc

דוגמה לכך תהיה הפונקציה $c a l c ()$ שיכולה לעשות מתמטיקה פשוטה בתוך CSS:

<div class="outer">
	<div class="box">The inner box is 90% - 30px.</div></div>
<style>
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}
</style>

זה מתרנדר כך :
Pasted image 20230724191835.png
פונקציה מורכבת משם הפונקציה, ומסוגריים כדי להקיף את הערכים של הפונקציה. במקרה של דוגמה $c a l c ()$ למעלה, הערכים מגדירים את הרוחב של תיבה זו להיות 90% מרוחב הבלוק המכילה, מינוס 30 פיקסלים. התוצאה של החישוב היא לא משהו שניתן לחשב מראש ולהזין אותו כערך סטטי.

Transform functions

דוגמה נוספת תהיה הערכים השונים עבור טרנספורמציה, כגון $r o t a t e ()$ .

<div class="box"></div>
<style>
 .box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}
</style>

התוצאה על המסך תיראה ככה
Pasted image 20230724192148.png|400

ויש רבים נוספים הנפוצים שבהם הם ,

color
background-image

rules@

$@ r u l e s$ (מבוטא "at-rules") מספקים הנחיות לגבי מה CSS צריך לבצע או איך הוא צריך להתנהג. חלק מכללי @ הם פשוטים עם מילת מפתח וערך בלבד. לדוגמה, $@ i m p o r t$ מייבא גיליון סגנונות לגיליון סגנונות אחר של CSS.

חוק @ נפוץ אחד שאתה צפוי להיתקל בו הוא $@ m e d i a$ , המשמש ליצירת media queries. שאילתות אלו משתמשות בלוגיקה מותנית להחלת סגנון CSS.

בדוגמה למטה, גיליון הסגנונות מגדיר ברירת מחדל ברקע ורוד עבור האלמנט <body>. עם זאת, מופיעה שאילתת מדיה המגדירה רקע כחול אם יציאת התצוגה של הדפדפן רחבה יותר מ-30em.

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

The box model

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

Block and Inline block

ב-CSS יש לנו כמה סוגים של קופסאות שמתאימות בדרך כלל לקטגוריות של block boxes ו Inline boxes . הסוג מתייחס לאופן שבו התיבה מתנהגת מבחינת זרימת העמוד וביחס לתיבות אחרות בדף. לקופסאות יש Inner display type ו outer display type האחד קובע את מיקום האלמנטים בתוך הקופסא של אלמנט כלשהו (למשל של div) והשני (outer) של האלמנט עצמו ביחס לאבא שלו.
ניתן לשנות את הערך והסוג של display ב CSS עם התכונה display שיכולה לקבל מספר ערכים.

ישנם ערכים ערכים שהפרמטר יכול לקבל, אתמקד בכמה מהם:

block:
ערך זה גורם לאלמנט ליצור תיבה ברמת בלוק. אלמנטים ברמת הבלוק תופסים את מלוא הרוחב הזמין של המיכל שלהם ומתחילים בקו חדש. אלמנטים נפוצים ברמת הבלוק הם <div>, <p>, <h1> ... <h6> ו-<ul>, בין היתר.

inline:
ערך זה גורם לאלמנט ליצור תיבה ברמה inline. אלמנטים מוטבעים אינם יוצרים מעברי שורה ותופסים רק רוחב ככל הדרוש לתוכן שלהם. אלמנטים מוטבעים נפוצים הם <span>, <a>, <strong> ו-<em>, בין היתר.

inline-block:
ערך זה משלב מאפיינים גם של inline וגם של block. זה מאפשר לאלמנט להתנהג כאלמנט inline, אבל הוא גם מאפשר לך להגדיר את מאפייני הרוחב, הגובה, הריפוד והשוליים שלו כמו אלמנט ברמת הבלוק. זה שימושי ליצירת אלמנטים שצריכים להיות מוטבעים אך בעלי מאפיינים ברמת הבלוק.

none:
מוריד את האלמנט לגמרי מהdocument flow כלומר הוא בלתי נראה ולא תופס מקום במסמך.

flex:
ערך זה עוטף את הילדים של האלמנט ב flex container כך שניתן להשתמש ב flexbox layout עליהם.

grid:
תחת אותו הסבר כמו למעלה רק משתמש ב grid container ו flex container

חלקי הקופסא

מודל הקופסאה מורכב מארבעה רכיבים חיוניים המקיפים אלמנט HTML, ויוצרים תיבה מלבנית. רכיבים אלו הם:
תוכן:
החלק הפנימי ביותר של התיבה, שבו מוצג התוכן האמיתי של האלמנט, כגון טקסט, תמונות או מדיה אחרת.
padding:
הרווח בין התוכן לגבול. ריפוד מספק אזור חיץ סביב התוכן, יוצר רווח לבן בין התוכן לגבול.
border: קו דק המקיף את הריפוד והתוכן. הוא משמש כגבול בין תוכן האלמנט לרקע שלו.
margin:
הרווח בין הגבול לאלמנטים שכנים. השוליים יוצרים רווח בין אלמנטים ועוזרים לשלוט במיקומם בדף האינטרנט.

Pasted image 20230724214024.png|500

Positioning

מיקום מאפשר לך להוציא אלמנטים מזרימת המסמך הרגילה ולגרום להם להתנהג בצורה שונה, למשל, על ידי ישיבה זה על גבי זה או על ידי הישארות תמידית באותו מקום בתוך הדפדפן.
ישנם מספר סוגים שונים של מיקום שניתן להפעיל על רכיבי HTML. כדי להפוך סוג מסוים של מיקום פעיל באלמנט, אנו משתמשים במאפיין position.

static

מיקום סטטי הוא ברירת המחדל שכל אלמנט מקבל. זה רק אומר "להכניס את האלמנט למקומו הרגיל בזרימת המסמכים - שום דבר מיוחד לראות כאן."

relative

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

position: relative

top, bottom, left, right

פרמטרים אלו באים בקולורצייה ישירה עם position
הם מתארים במדויק כיצד למקם את האלמנט והמשמעות שלהם משתנה בהתאם לערך של המיקום. למשל ברלטיבי , המשמעות היא בעצם תזוזה מהמיקום המקורי ב document flow.
עבור הקוד הזה:
Pasted image 20230725113802.png
נקבל שאם נשנה את ערכי ה top,left ל 30px נקבל
Pasted image 20230725113832.png
נשים לב שהערכים האלה מציינים ״תזוז 30 פיקסלים מהמיקום top המקורי שאתה נמצא בו״ כלומר זה בעצם מרחיק אותנו מהtop שהיינו בו וגם מהleft.

absolute

אם נשנה את הקוד הנ״ל ל position:absolute
המסך ממקודם ייראה ככה

Pasted image 20230725114418.png|500
נשים לב ש המרווח בין האלמנטים בתכלת נעלם כלומר המסמך הצהוב יצא מזרימת המסך ונמצא מעליהם בשכבה משלו. כעת נשים לב שהפרמטרים top,left,right,bottom מתנהגים קצת אחרת במיקום אבסולוטי.
הם נותנים את המרחק שהאלמנט צריך להיות מכל אחד מהצדדים של האלמנט שמכיל אותו. אלמנט זה נקרא ה initial containing block.
בדיפולט הבלוק הנ״ל הוא האלמנט שׁמכיל את התגית html. אבל ניתן לשנות את זה על ידי שינוי הגדרות המיקום ל relative באחד האבות שלו ב DOM.

הבחנה

אם נשים ערכים עבור כל הפרמטרים top, right, left ,bottom נקבל שהגודל של האלמנט משתנה כאשר המיקום הוא אבסולוטי, אלא אם כן , שינינו את המימדים עצמם בעצמנו. כמו כן margin עדיין יעבוד, נוכל להשתמש ב margin:auto בשביל למקם אלמנט שמוגדר כאבסולוטי במרכז המסך.

z-index

נוכל להשתמש בפרמטר זה כדי לקבוע במצב שבו שתי ערכים מתנגשים אחד בשני מי יעלה על מי.
על ידי שינוי הפרמטר z-index לסלקטורים ב css נוכל לקבוע להם את הערך ב ציר הz וככה לקבוע מי יהיה מעל מי (הגבוה ביותר עולה על הנמוך כמובן)
Pasted image 20230725122438.png|400

fixed

ממקם אל האלמנט רלטיבי לאזור נראה של ה viewport (בקצרה vp זה האזור שנראה לעין עבור יוזרים והוא משתנה ממכשיר למכשיר). בעצם זה כמו אבסולוטי רק שהמיקום הוא תמיד קבוע במיקום כלשהו , למשל תפריט הניווט של האפליקצייה וכו׳.
המיקום נשאר קבוע גם אם הדף נגלל. המשמעות של הפרמטרים top,botoom,right,left זהה לאבסולוטי רק שהוא ביחס ל view port.

Sticky

קיים ערך מיקום נוסף שנקרא מיקום: sticky, שהוא קצת יותר חדש מהאחרים. זהו בעצם הכלאה בין מיקום relative וabsolute. זה מאפשר לאלמנט הממוקם לפעול כאילו הוא ממוקם יחסית עד שהוא גולל לסף מסוים (למשל, 10px מהחלק העליון של נקודת התצוגה), ולאחר מכן הוא מתקבע.

כלומר המיקום שלו נשאר ב document page flow ורק לאחר שמגיעים למקום כלשהו בגלילה הוא נדבק.

כלים נוספים

ישנם כלי נוספים הקשורים ל CSS layout כדי ליצור עיצובים מורכבים הרבה יותר, לא אתעמק בכולם אבל ניתן להכנס ל mdn-CSS layout כדי להעמיק בנושא.

Responsive design

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

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

Pasted image 20230725143509.png|500

הכלים המרכזיים ביותר ב CSS הם media queries , displays ועבודה עם יחידות מידה שאינן קבועות (כמו אחוזים ויחידות מידה שרלטיביות ל View port) שמאפשרים התנהגות דינמית במגוון רחב של מסכים.

Bootstrap

ספרייה עם 2 מטרות עיקריות

לספק סט כלים עיצוביים מאוד נוח ומוכן שרק צריך להשתמש בו. (לא אתעמק בכלים אלו כאן)
תמיכה בעיצוב ריספונסיבי בלי מסכים מורכבים באמצעים Grid system

מערכת הgrid של Bootstrap משתמשת בסדרה של containers, שורות ועמודות כדי לפרוס וליישר תוכן. זה בנוי עם flexbox והוא ריספונסיבי במלואו.

למשל :

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

ייתן לנו במסכים גדולים :
Pasted image 20230725144946.png
ובמסכי Mobile:
Pasted image 20230725145005.png|500
הדוגמה שלמעלה יוצרת שלוש עמודות ברוחב שווה במכשירים קטנים, בינוניים, גדולים וגדולים במיוחד באמצעות מחלקות הגריד המוגדרות מראש של הספרייה. עמודות אלו ממורכזות בעמוד עם האבא שהמחלקה שלו היא $c o n t a i n e r$ .

איך זה עובד?

containers מספקים אמצעי למרכז ולרפד אופקית את תוכן האתר. השתמש ב-.container עבור רוחב פיקסל מגיב או ב-.container-fluid עבור רוחב: 100% בכל viewport וגדלי המכשירים השונים.
rows הן מעטפת עבור cols. לכל עמודה יש ריפוד אופקי (הנקרא gutter) לשליטה על הרווח ביניהם. לאחר מכן מתמודדים עם ריפוד זה בשורות עם שוליים שליליים. בדרך זו, כל התוכן בעמודות מיושר ויזואלית בצד שמאל.
בפריסת grid, תוכן חייב להיות ממוקם בתוך עמודות ורק עמודות עשויות להיות ילדים מיידיים של שורות.
הודות ל-flexbox, עמודות grid ללא רוחב מוגדר יתפרסו אוטומטית כעמודות ברוחב שווה. לדוגמה, ארבעה מופעים של .col-sm יהיו ברוחב אוטומטי של 25% מנקודת הפריצה הקטנה ומעלה.
מחלקות של עמודות מציינות את מספר העמודות שבהן תרצה להשתמש מתוך 12 האפשרויות בכל שורה. לכן, אם נרצה שלוש עמודות ברוחב שווה, נוכל להשתמש ב-.col-4.
רוחבי העמודות נקבעים באחוזים, כך שהם תמיד זורמים וגודלים ביחס לאלמנט האב שלהם.
לעמודות יש ריפוד אופקי כדי ליצור את הgutters בין עמודות בודדות, עם זאת, ניתן להסיר את השוליים משורות וריפוד מעמודות עם .no-gutters בשורה.
כדי להפוך את הgrid לresponsive, ישנן חמש grid breakpoints, אחת לכל נקודת עצירה ריספונסיבית: כל נקודות השבירה (קטנות במיוחד), קטנות, בינוניות, גדולות וגדולות במיוחד.
נקודות עצירה ברשת מבוססות על media queries ברוחב מינימלי, כלומר הן חלות על נקודת עצירה אחת ועל כל אלו שמעליה (למשל, .col-sm-4 חל על מכשירים קטנים, בינוניים, גדולים וגדולים במיוחד, אך לא על xs).

Grid options

Pasted image 20230725150215.png

Auto-layout columns

נוכל להשתמש בעמודות עם breakpoints כדי שלא נהיה חייבים לתת מספר ספציפי למחלקה.
למשל, הנה 2 grids שתקפים לכל מכשיר ולכל viewport מ xs עד ל xl.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Pasted image 20230725152024.png

נוכל להגדיר רוחב בין 1 ל 12 עבור עמודה כלשהי ולתת לאלמנטים האחרים לשנות גודלם סביבו.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Pasted image 20230725152214.png

נוכל להשתמש ב col-{breakpoint}-auto כדי לקבוע גודל של עמודה בהתאם לגודל התוכן שבתוכה.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Pasted image 20230725152403.png

נוכל גם להשתמש ב .w-100 כדי לשבור שורה בין עמודות למשל

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Pasted image 20230725152724.png

אם לא חשוב לנו הbreakpoint נוכל להשמיטו בהגדרת הclass ולקבל התנהגות שווה בין כל הגדלים.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Pasted image 20230725152842.png

הבחנה

אם אנחנו מציינו breakpoint כלשהו אז כל מה שמלפניו מבחינת גודל מסך יהיה stacked up כלומר אחד אחרי השני בשורה (זה פחות או יותר ה document flow שהיה להם כאילו לא שמנו את המחלקה בכלל)

נוכל לעשות שילוב כדי לתמוך בעיצוב שונה עבור כמה גדלי מסכים

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

בכל מה שהוא לא ה breakpoint הקטן ביותר זה יראה ככה:
Pasted image 20230725153254.png
ואחרת :
Pasted image 20230725153307.png

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

JavaScript

JavaScript היא שפת סקריפטים או תכנות המאפשרת לך ליישם תכונות מורכבות בדפי אינטרנט - בכל פעם שדף אינטרנט עושה יותר מסתם לשבת שם ולהציג מידע סטטי כדי שתוכל להסתכל עליו - הצגת עדכוני תוכן בזמן, מפות אינטראקטיביות, גרפיקה 2D/3D מונפשת, גלילה של תיבות וידאו וכו' - אתה יכול להמר ש-JavaScript כנראה מעורב.

בעוד שלשפה עצמה יש המון פונקציונליות שאפשר לנצל כמו לשמור מידע במשתנים, מניפולציות על מחרוזות ומערכים והרצת קוד כאשר התרחשו event מסויימים במסך כמו לחיצה, כוחה האמיתי של השפה היא הפונקציונליות שכתובה מעל השפה - ה API שמסופק לשפה כדי שנוכל לבצע פונקציונליות נוספת בצד לקוח (וגם בצד שרת).

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

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

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

ברגע שהדפדפן נתקל בקוד javascript שאינו מקושר ל event הוא מריץ אותו מיד לפי הסדר מלמעלה למטה.

Interpreted vs compiled code

בשפות Interpreted, הקוד מופעל מלמעלה למטה והתוצאה של הפעלת הקוד מוחזרת מיד. לא צריך להפוך את הקוד לצורה אחרת לפני שהדפדפן מפעיל אותו. הקוד מתקבל בצורת הטקסט הידידותית שלו למתכנת ומעובד ישירות ממנו.
לעומת זאת, שפות הידור עוברות טרנספורמציה (קומפילציה) לצורה אחרת לפני שהן מופעלות על ידי המחשב. לדוגמה, C/C++ מקומפלים לקוד מכונה שמופעל לאחר מכן על ידי המחשב. התוכנית מופעלת מפורמט בינארי, אשר נוצר מקוד המקור של התוכנית.

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

הוספת JavaScript למסמך HTML

Internal

באמצעות תגיד <script> ניתן גם לכתוב קוד בתוך קובץ HTML עצמו למשל

<script>
document.addEventListener("DOMContentLoaded", () => {
  function createParagraph() {
    const para = document.createElement("p");
    para.textContent = "You clicked the button!";
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll("button");

  for (const button of buttons) {
    button.addEventListener("click", createParagraph);
  }
});
</script>

external

באמצעות אותה תגית נוכל ליצור קובץ js ולשייך אותו לדף

<script src="script.js" defer></script>

המטרה של ה defer היא למנוע מצב שהדפדפן נתקל בקובץ סקריפט ומריץ אותו לפני שהHTML מרונדר.

The HTML DOM Document Object

אובייקט document מייצג את דף האינטרנט שלך.
אם נרצה לגשת לרכיב כלשהו בדף HTML, נוכל תמיד לגשת לאובייקט זה.

גישה לאלמנטים

Pasted image 20230725163857.png

שינוי אלמנטים

Pasted image 20230725164057.png

הוספה ומחיקה של אלמנטים

Pasted image 20230725164141.png

הוספת events

Pasted image 20230725164155.png

ביצוע קוד בעת טעינת המסמך

אמרנו שהדפדפן באמצעות הפונקצייה defer בתגית script מחכה לטעינת הדף לפני שהוא מריץ את הסקריפט אבל אם נרצה להיות ספציפיים יותר נוכל להשתמש ב event listener מהצורה

document.addEventListener("DOMContentLoaded"), function() {
	// do something in here
});

JS event handlers

בנוסף לevent הטעינה שראינו למעלה , ישנם רשימה ארוכה של events שאפשר להטמיע על האלמנטים השונים. הנה חלקם המוכרים יותר
Pasted image 20230727012158.png
וניתן לראות גם את חלקם המוכרים פחות

נשים לב שאלו events מובנים ויש עוד רבים שאפשר להוסיף עם addEventListener כמו שעשינו למעלה.

כל event מקבל כפרמטר event object והוא מכיל מידע ופונקציונליות על הevent שנלחץ למשל

function bgChange(e) {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener("click", bgChange);

default events

לevents מסוימים יש התנהגות דיפולטית שהדפדפן מגדיר. אם נרצה למנוע אותה בתוך הפונקציית handle שלנו נשתמש ב e.preventDefaults .

BOM

אומנם אין סטנדרט קבוע אבל ה API של הדפדפנים מאוד דומה ולכן מתייחסים אליו כ Browser Object Model שזה דרך לגשת למידע על הדפדפן עצמו באמצעו API . ברוב המקרים לא נצטרך אותו ונוכל להסתפק בגישה ל DOM ישירות.

משתנים

ניתן להצהיר על משתנים ב4 דרכים

אוטומטי
var - ישן יותר מהאחרים, לא צריך להשתמש בו יותר
let
const

כל אחד מהם הוא דרך מסויימת להגדיר משתנה ב javascript אבל יש הבדלים הנוגעים בכל אחד מהם

scope
הצהרה והשמה מחדש
hoisting

VAR:
משתנים עם var יכולים להיות עם global scope או local scope. הסקופ הגלובלי הוא למשתנים שהוכרזו מחוץ לפונקצייה והמקומי הוא לכאלה שהוצהרו בתוך פונקצייה.

משתני var יכולים להיות מוצהרים מחדש למשל

var number = 50
console.log(number) // 50

var number = 100
console.log(number) // 100

כמו כן משתנים אלו ניתנים גם להשמה מחדש

var number = 50
console.log(number) // 50

number = 100
console.log(number) // 100

number = 200
console.log(number) // 200

בהכרזות של משתנים (לא השמה שלהם) javascript מבצע hoist עבור ההצהרה ומעלה אותו למעלה. למשל

console.log(number) // undefined

var number = 50

console.log(number) // 50

הקוד הזה לא יקרוס אלא רק ידפיס undefined כי הוא מזהה את ההצהרה אבל לא את ההשמה.

במקרה של סקופ מקומי

function print() {
  var square1 = number * number
  console.log(square1)

  var number = 50

  var square2 = number * number
  console.log(square2)
}

print()
// NaN
// 2500

ההדפסה הראשונה תהיה NaN שזה קיצר של Not a Number וזה נובע מכך שניסינו לבצע פעולה אריתמטית לא תקינה בין שתי undefined.

הבחנה

$N a N === N a N$ מחזיר false כי זה אינו שווה לעצמו

Let:
let מקבל כוח נוסף שנקרא block scope שזה מיועד למשתנים שהוכרזו בתוך בלוק.

{
  // a block
}

כל סינתקס שאנחנו מכירים בערך יש לו בלוק כזה (תנאים, לולאות וכו)

בדומה לשפות קימפול, המשמעות היא שלא נוכל לגשת למשתנים מחוץ לסקופ שבו הם הוכרזו.

let number = 50

function print() {
  let square = number * number

  if (number < 60) {
    var largerNumber = 80
    let anotherLargerNumber = 100

    console.log(square)
  }

  console.log(largerNumber)
  console.log(anotherLargerNumber)
}

print()
// 2500
// 80
// ReferenceError: anotherLargerNumber is not defined

משתני let לא יכולים להיות מוצהרים מחדש אבל ניתן לבצע עבורם השמה מחדש.

בדומה לhoisting של var גם כאן הכרזה על משתנה עולה לתחילת הסקופ. בשונה מ var שמעלה עם ערך דיפולטי של undefined מה שמאפשר גישה אליהם, כאן אין אתחול דיפולטי, לכן אם ננסה לגשת אליהם נקבל Reference Error כלומר כל הקונספט של hoist אינו רלוונטי כאן.

console.log(number)
// ReferenceError: Cannot access 'number' before initialization

let number = 50

Const:
בידיוק כמו let רק שלא ניתן לבצע עבורו reassignment , כלומר, חייב לשים ערך למשתנה בעת הכרזתו.

const number = 50

number = 100

// TypeError: Assignment to constant variable

לסיכום:
Pasted image 20230725181641.png

Equality comparisons and sameness

js מספקת 3 שיטות להשוואה :

$===$ - strict equal
$==$ - loose equal
Object.is

Double equals $(==)$ :
יבצע המרת סוג בעת השוואת שני דברים, ויטפל ב-NaN, -0 ו-+0 במיוחד כדי להתאים ל-IEEE 754 (לכן NaN != NaN, ו-0 $==$ +0);

Triple equals $(===)$ :
יבצע את אותה הפעולה כמו $==$ אבל בלי ההמרת טיפוס, כלומר אם הטיפוס לא שווים יהיה false

Object.is:
לא מבצע שום המרת טיפוס ולא טיפול מיוחד בפרטרים כמו $N a N, - 0, + 0$

Objects

כמו בשפות מונחות עצמים זה דרך לעטוף כמות כלשהי של מידע במשתנה אחד

const car = {type:"Fiat", model:"500", color:"white"};

הסינתקס הוא עם name:value כמו בmap.

ניתן לגשת לתכונות של אובייקט עם object.param או עם object["param"] .
בתוך אובייקטים יכולים להיות גם פונקציות

const person = {  
  firstName: "John",  
  lastName : "Doe",  
  id       : 5566,  
  fullName : function() {  
    return this.firstName + " " + this.lastName;  
  }  
};

this , כמו שjava זה האובייקט עליו הופעלה הפונקצייה.
נשים לב, מומלץ להשתמש בפונקציות ולא בlambdas כאשר עובדים עם אובייקטים אחרת לא נוכל לגשת לthis.

הדפסת אובייקטים

נשים לב שכאשר אנחנו מנסים להדפיס אובייקט באמצעות console.log אכן נדפיס את האובייקט וערכיו, עם זאת, אם ננסה לבצע שרשור לסטרינג יודפס [object Object] כדי להמנע זאת נוכל להשתמש באופרטור $,$ בין הסטרינג לבין האובייקט במקום שרשור רגיל עם $+$

modules

באמצעות מודולים נוכל להפריד את הלוגיקת js שלנו למודולים שלכל אחד מהם יש חשיבות מסויימת בתוכנה והוא מבודד בפני עצמו. מי שיצטרך להשתמש במודול יוכל פשוט לייבא אותו (נראה את זה בא לידי ביטוי ב [[React]]).

export

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

export const name = "square";

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

נוכל לייצא כל דבר בנפרד.
באופן דומה נוכל לייצא כל דבר שנצהיר עליו בקובץ על ידי

export { name, draw, reportArea,reportPerimeter };

import

כדי לייבא מודול נשתמש בקוד הבא

import { name, draw, reportArea, reportPerimeter } from "./modules/square.js";

Import map:
באמצעות import maps נוכל לשנות את השם של מודולים שאנחנו מייבאים או לעטוף כמה חלקים מהמודול כשם אחד למשל

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

Concurrency models

ל-JavaScript יש מודל זמן ריצה המבוסס על event loop, שאחראית על ביצוע הקוד, איסוף ועיבוד אירועים וביצוע משימות משנה בתור. מודל זה שונה למדי מדגמים בשפות אחרות כמו C ו-Java.

Pasted image 20230726112732.png|400

Stack
הפונקציות נקראות ממחסנית של frames

function foo(b) {
  const a = 10;
  return a + b + 11;
}

function bar(x) {
  const y = 3;
  return foo(x * y);
}

const baz = bar(7); // assigns 42 to baz

סדר הקריאות כאן הוא כמו שאנחנו מכירים בכל שפה אחרת,
קודם נוצר frame עבור bar והמשתנים המקומיים שלו
אחר כך עבור foo יפתח frame חדש. כשהוא יחזיר ערך הframe שלו יצא מהמחסנית וכשbar יחזיר ערך המחסנית תהיה ריקה.

המשתנים לא נמחקים לגמרי מהמחסנית שכן אולי נצטרך לגשת אליהם מפונקציות callback כאלה ואחרות

Heap
אובייקטים של js מאוכלסים ב heap שזה זכרון שאינו מאורגן בסדר מסויים.

Queue
זמן ריצה של JavaScript משתמש בתור הודעות, שהוא רשימה של הודעות שיש לעבד. לכל הודעה יש פונקציה משויכת שנקראת לטפל בהודעה.
בשלב מסוים במהלך event loop, סביבת זמן הריצה של js מתחילה לטפל בהודעות בתור, החל מהישן ביותר. לשם כך, ההודעה מוסרת מהתור והפונקציה המתאימה לה נקראת עם ההודעה כפרמטר קלט. כמו תמיד, קריאה לפונקציה יוצרת מסגרת מחסנית חדשה לשימוש הפונקציה הזו. עיבוד הפונקציות נמשך עד שהמחסנית שוב ריקה. לאחר מכן, ה event loop תעבד את ההודעה הבאה בתור (אם יש כזו).

Event loop

הוא קיבל את שמו בגלל המימוש שלרוב נותנים לו, שנראה ככה בדרך כלל

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

כאשר waitForMessage מחכה באופן סינכרוני להודעה שתגיע.
זה מציע כמה מאפיינים נחמדים בעת חשיבה לגבי תוכנית js, כולל העובדה שבכל פעם שפונקציה פועלת, לא ניתן להקדים אותה והיא תרוץ לחלוטין לפני הפעלת קוד אחר (ויכול לשנות נתונים שהפונקציה מפעילה). זה שונה מ-C, למשל, שבו אם פונקציה פועלת ב thread, היא עשויה להיעצר בכל נקודה על ידי מערכת זמן הריצה כדי להפעיל קוד אחר בthread אחר.

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

הוספת הודעות

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

שני הארגומנטים הראשונים לפונקציה setTimeout הם הודעה להוספה לתור וערך זמן (אופציונלי; ברירת המחדל היא 0). ערך הזמן מייצג את ההשהיה (המינימלית) שאחריה ההודעה תידחף לתור. אם אין הודעה אחרת בתור, והמחסנית ריקה, ההודעה מעובדת מיד לאחר ההשהיה. עם זאת, אם יש הודעות, הודעת setTimeout תצטרך לחכות לעיבוד הודעות אחרות. מסיבה זו, הפרמטר השני מציין זמן מינימלי - לא זמן מובטח.

const seconds = new Date().getTime() / 1000;

setTimeout(() => {
  // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
  console.log(`Ran after ${new Date().getTime() / 1000 - seconds} seconds`);
}, 500);

while (true) {
  if (new Date().getTime() / 1000 - seconds >= 2) {
    console.log("Good, looped for 2 seconds");
    break;
  }
}

setTimeout צריך להמתין עד שכל הקוד כדי להשלים את ההודעות בתור, למרות שציינת מגבלת זמן מסוימת עבור setTimeout.

(() => {
  console.log("this is the start");

  setTimeout(() => {
    console.log("Callback 1: this is a msg from call back");
  }); // has a default time value of 0

  console.log("this is just a message");

  setTimeout(() => {
    console.log("Callback 2: this is a msg from call back");
  }, 0);

  console.log("this is the end");
})();

// "this is the start"
// "this is just a message"
// "this is the end"
// "Callback 1: this is a msg from call back"
// "Callback 2: this is a msg from call back"

הבחנה

תכונה מאוד מעניינת של מודל ה eventloop היא ש-JavaScript, בניגוד להרבה שפות אחרות, לעולם לא חוסמת. טיפול ב-I/O מבוצע בדרך כלל באמצעות אירועים והתקשרויות חוזרות, כך שכאשר האפליקציה ממתינה לחזרת שאילתת IndexedDB או לבקשת XHR לחזור, היא עדיין יכולה לעבד דברים אחרים כמו קלט משתמש.

Promises

אובייקט הpromise מייצג את ההשלמה (או הכישלון) בסופו של דבר של פעולה אסינכרונית ואת הערך הנובע ממנה.
הבטחה היא פרוקסי לערך שלא בהכרח ידוע כאשר ההבטחה נוצרת. זה מאפשר לנו לשייך מטפלים לערך ההצלחה הסופי של פעולה אסינכרונית או סיבת הכישלון. זה מאפשר לשיטות אסינכרוניות להחזיר ערכים כמו שיטות סינכרוניות: במקום להחזיר מיד את הערך הסופי, השיטה האסינכרונית מחזירה הבטחה לספק את הערך בשלב מסוים בעתיד.

promise יכול להיות באחד מהמצבים הבאים

pending- המצב ההתחלתי
fulfilled- הפעולה הסתיימה בהצלחה
rejected- הפעולה נכשלה

המצב הסופי של הבטחה במצב pending יכול להתקיים עם ערך או לדחות עם סיבה (שגיאה). כאשר אחת מהאפשרויות הללו מתרחשת, המטפלים המשויכים בתור לפי הפונקצייה then נקראים. אם ההבטחה כבר מומשה או נדחתה כאשר מטפל תואם מצורף, המטפל ייקרא, כך שאין תנאי מירוץ בין השלמת פעולה אסינכרונית לבין המטפלים שלה.

Pasted image 20230726122458.png

const promiseA = new Promise((resolve, reject) => {
  resolve(777);
});
// At this point, "promiseA" is already settled.
promiseA.then((val) => console.log("asynchronous logging has val:", val));
console.log("immediate logging");

// produces output in this order:
// immediate logging
// asynchronous logging has val: 777

async/await

מילת המפתח async לפני פונקציה גורמת לפונקציה להחזיר promise.

async function myFunction() {  
  return "Hello";  
}
//its the same as: 
function myFunction() {  
  return Promise.resolve("Hello");  
}

נוכל להשתמש בסינתקס של promise לאחר מכן

myFunction().then(  
  function(value) { /* code if successful */ },  
  function(error) { /* code if some error */ }  
);

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

let value = await promise;

לדוגמה:

async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("done!"), 1000)
});

let result = await promise; // wait until the promise resolves (*)
alert(result); // "done!"
}

ההשהייה מתרחשת בקוד שלנו בהמתנה ל promise , הפונקצייה לא ממשיכה עד שמקבלים תוצאה.
זה לא עולה משאבים למעבד שכן המנוע של js יכול לבצע עבודות נוספות בזמן הזה כמו ניהול events.
בסופו של דבר מדובר בסינתקס אלגנטי יותר ל promise.then עליו כבר דיברנו.

לא ניתן להשתמש ב await בפונקציות רגילות

אם ננסה לעשות את זה , נקבל שגיאת סינתקס למשל
function f() { let result = await promise;}

דוגמה כבדה יותר באמצעות בקשת אינטרנט על ידי fetch שהוא חלק מה Fetch API בצורה פשוטה יותר על ידי הסתרה של מימוש של AJAX

async function showAvatar() {
// read our JSON
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();
// read github user
let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);

let githubUser = await githubResponse.json();
// show the avatar
let img = document.createElement('img');
img.src = githubUser.avatar_url;
img.className = "promise-avatar-example";
document.body.append(img);
// wait 3 seconds

await new Promise((resolve, reject) => setTimeout(resolve, 3000));
img.remove();
return githubUser;

}
showAvatar();

היה אפשר לכתוב מימוש זהה באמצעות then אבל הסינתקס הזה הרבה יותר נוח למתכנת.

הבחנה

דפדפנים מודרנים מאפשרים שימוש ב await מחוץ לפונקציות בתוך מודולים.