אובייקט Location (שורת URL)

בלי כתוביותעם כתוביות

מילון מושגים:

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

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

Localhost - שם המפנה למחשב המקומי עצמו (כתובת 127.0.0.1), המשמש לבדיקת שירותים הרצים על אותו מחשב.

פרוטוקול - מערכת כללים מוסכמת שקובעת כיצד מכשירים או תוכנות מתקשרים ומחליפים מידע, למשל HTTP או TCP.

נתיב - מחרוזת שמתארת את מיקומו של קובץ או תיקייה במערכת הקבצים, או כתובת של משאב בתוך אתר.

HTTP - פרוטוקול להעברת דפי אינטרנט ונתונים בין דפדפן לשרת. הגרסה המאובטחת שלו היא HTTPS.

דפדפן - תוכנה שמציגה דפי אינטרנט ומריצה את הקוד שבהם, ומאפשרת לגלוש בין אתרים, למשל Chrome או Firefox.

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

אובייקט Location (שורת URL)

אובייקט location מתאר את הכתובת של הדף הנוכחי. הוא מאפשר לקרוא כל חלק בה, לטעון דף אחר ולרענן את הדף.

השלבים העיקריים

1. שם השרת והפורט: location.hostname מחזיר את שם השרת, ובהרצה מהמחשב הנוכחי מופיע localhost. location.port מחזיר את הפורט, ו-location.host מחזיר את השם והפורט ביחד.

2. פרוטוקול ונתיב: location.protocol מחזיר את הפרוטוקול, למשל http. location.pathname מחזיר את הנתיב אחרי הפורט, כולל שם הדף.

3. כתובת מלאה: location.href מחזיר את הכתובת המלאה, בדיוק כמו בשורת הכתובת של הדפדפן.

4. עוגן בדף: location.hash מחזיר את החלק שאחרי הסולמית. לינק עם סולמית ושם של מזהה בדף מזיז את הגלילה לאותו מקום, וה-hash מציג את אותו מזהה.

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

6. ניווט: assign טוען דף חדש ומשאיר את הדף הקודם בהיסטוריה. replace טוען דף חדש במקום הנוכחי, בלי היסטוריה. השמה ישירה ל-location עושה את אותו דבר כמו assign.

7. רענון: reload טוען את הדף מחדש מהשרת.

פקודות והגדרות

location.hostname, location.port, location.protocol, location.pathname, location.href, location.hash, location.search, location.assign(url), location.replace(url), location.reload().

שימו לב

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

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

השיעור הבא בקורס: אובייקט Window (דפדפן עצמו)

מילון מושגים:

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

Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד

פרקי ההרצאה: אובייקט Location (שורת URL)

תמלול ההרצאה: אובייקט Location (שורת URL)

הטקסט המלא של הדקות הראשונות בהרצאה «אובייקט Location (שורת URL)» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

00:00
האובייקט הבא שקשור לדפדפן נקרא לוקיישן. לוקיישן זה אובייקט שמתאר כל מיני מאפיינים בקשר לשורת ה-URL שהדפדפן גולש אליה. אז בואו נראה מה יש לנו שמה. ראשית אנחנו יכולים להגיע אליו על ידי כתיבת לוקיישן, נקודה, ואז להגיע למאפיינים השונים.
00:25
מאפיין ראשון, הוסט ניים. בואו נציג אותו, נריץ, ואנחנו רואים שבעצם המידע שמוצג לנו זה השם של האתר שלנו, כרגע זה לוקל הוסט, מפני שאני רץ על המחשב הנוכחי.
00:48
זאת אומרת שאם האתר שלי לדוגמה היה google.com אז ה-hostname היה www.google.com. כרגע אנחנו רואים את ה-localhost. ה-localhost מתאר שהאתר בעצם רץ מהמחשב הנוכחי וכאילו שהמחשב הנוכחי זה האתר שלנו או הכתובת localhost זה האתר שלנו.
01:09
הדבר הבא נקרא port. port מתאר את התובת דרכה נכנס המידע למחשב. כרגע אנחנו רואים שהפורט זה 1382 אנחנו יכולים לראות את זה כאן למעלה. במידה והאתר שלי נחשף על ידי פורט חיצוני אז אני רואה את הפורט כמו במקרה הזה.
01:42
רוב האתרים עובדים על פורט 80 ואנחנו לא נראה בעצם שום פורט כשאנחנו גולשים אליהם. הדבר הבא לוקיישן נקודה הוסט כאן אנחנו בעצם הולכים לראות גם את ההוסט ניים וגם את הפורט ביחד.
02:04
אנחנו יכולים לראות שזה בדיוק מה שכתוב לנו פה למעלה. הדבר הבא הוא לוקיישן.פרוטוקול כאן אנחנו בעצם הולכים לראות את פרוטוקול התקשורת בו נמצא האתר שלנו.
02:27
כרגע אנחנו רואים שפרוטוקול התקשורת זה http קיצור של hypertext transfer protocol וזה בעצם שיטת התקשורת שקיימת באינטרנט. יש כמובן עוד פרוטוקולי תקשורת לדוגמה htts או ftp.
02:43
כרגע קיבלנו את הפרוטוקול עצמו. הדבר הבא הוא לוקיישן נקודה path name בואו נסתכל מה זה נותן לנו כאן אנחנו רואים שקיבלנו את כל הנתיב אחרי הפורט זאת אומרת את הדף עצמו או את התיקייה ביחד עם הדף אחרי השם של האתר בעצם כאן אנחנו יכולים לדעת באיזה דף אנחנו נמצאים המאפיין הבא שלנו הוא לוקיישן
03:30
נקודה href בואו נראה מה זה נותן לנו כאן אנחנו רואים שקיבלנו את כל הכתובת URL בבת אחת כמו שהיא מופיעה בתיבת ה-URL של הדפדפן. אנחנו רואים את ה-HTTP, אנחנו רואים את ה-Localhost, פורט, דף, כולל סיומת HTM.
03:54
אז בעצם כאן קיבלנו את הכל ביחד. המאפיין הבא שלנו הוא נקודה hash. בואו נראה מה זה נותן לנו. אם כרגע אני אריץ את זה, אז אני בעצם לא אראה כלום.
04:14
בואו נראה מה זה באמת אומר. נניח שיש לנו כאן איזשהו לינק שה-HRF שלו שווה לסולמית ואיזושהי כתובת מסוימת או איזשהו ID מסוים שאני ממציא.
04:31
נניח שיש איזשהו חלק בדף שמדבר על ספורט, אז אני יכול להגדיר כאן סולמית ספורט וה-anchor הזה בעצם מצביע לי על הסולמית ספורט הזה וכעת יש לי בעצם לינק שמצביע על משהו שנקרא סולמית ספורט.
04:59
בואו נניח שהדף שלי הוא מאוד גדול נגדיל אותו בצורה משמעותית וכאן למטה נגדיר את אותו ספורט סקשן, נגדיר A וניתן לו ID שנקרא ספורטס. בואו נגלוש לדף וקיבלנו כרגע את הדף שיש לנו פה ספורט סקשן כאשר פה למטה אני רואה בעצם את החלק של הספורט שאנחנו מדברים עליו.
05:43
אם אני לוחץ על הספורט סקשן אז אנחנו בעצם גולשים לאותו הדף ורואים פה למטה את הספורט סקשן אבל כעת מה שאנחנו רואים פה למעלה זה סולמית ספורטס. אז אם אני אבצע עכשיו רפרש אני בעצם אקבל בדיוק את הנקודה הזאת.