אובייקט Window (דפדפן עצמו)
window.alert ו-alert עושים בדיוק את אותו דבר.innerHeight ו-innerWidth מחזירים את הגודל הפנימי של החלון, ו-outerHeight ו-outerWidth את הגודל החיצוני כולל הסרגלים. screenLeft ו-screenTop מחזירים את המיקום של החלון על המסך.pageXOffset ו-pageYOffset מחזירים כמה גללנו אופקית ואנכית. גם הם נתמכים ב-Chrome ולא ב-Internet Explorer.name מאפשר לתת לחלון שם, שעוזר לזהות אותו.window.length מחזיר את מספר מסגרות ה-iframe בדף. window.frames[i] נותן גישה לחלון של מסגרת מסוימת, ודרכו אפשר לשנות את צבע הרקע של המסמך שבתוכה.self הוא החלון הנוכחי, top הוא החלון הגבוה ביותר בהיררכיה, ו-parent הוא החלון שמכיל את המסגרת הנוכחית.window.open ושולחים לו כתובת. הפונקציה מחזירה אובייקט של החלון החדש. בעזרתו בודקים את closed, שמחזיר true אחרי שהחלון נסגר.width ו-height, כדי לפתוח חלון קטן.close סוגר את החלון. סגירה של החלון הראשי מבקשת אישור מהמשתמש. print פותח את חלון ההדפסה.blur מוציא את הפוקוס מהחלון, ו-focus מחזיר אליו את הפוקוס.moveBy ו-resizeBy משנים את המיקום או הגודל ביחס למצב הנוכחי, ו-moveTo ו-resizeTo מציבים ערך מוחלט. יש גודל מינימלי שהחלון לא יורד ממנו.scrollBy גולל ביחס למצב הנוכחי, ו-scrollTo גולל למיקום מוחלט בדף.alert מציג הודעה. prompt מבקש קלט, ומחזיר את הטקסט שהוקלד, או null אם המשתמש ביטל. confirm מציג אישור ומחזיר true רק אם נלחץ OK.var myWindow = window.open("secondpage.htm"), myWindow.closed, window.moveTo(100, 100), window.resizeTo(400, 200), window.scrollBy(50, 200), prompt("Please enter your name", "your name here").setTimeout, setInterval ו-document הוזכרו רק כנושא לשיעורים הבאים. ב-confirm בודקים במפורש אם נלחץ OK, כי ביטול, מקש Esc או סגירה של התיבה לא נחשבים ללחיצה על OK.להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד
פרקי ההרצאה: אובייקט Window (דפדפן עצמו)
תמלול ההרצאה: אובייקט Window (דפדפן עצמו)
הטקסט המלא של הדקות הראשונות בהרצאה «אובייקט Window (דפדפן עצמו)» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
האובייקט הבא שלנו זה אובייקט שנקרא ווינדואו. אובייקט ווינדואו מאפשר לנו לדעת כל מיני דברים שקשורים בדפדפן עצמו.
בואו נראה דוגמה. יש לנו פה את אתר ynet, ויש לי כאן לינק, ואני לוחץ עליו, ואני יכול לפתוח בעצם חלון חדש.
אפשר לעשות את זה עם לינק רגיל, ואפשר לעשות את זה גם עם אובייקט ווינדואו. כמו כן, אני יכול להגדיר כל מיני הגדרות בקשר לחלון.
אני יכול להגדיר את המיקום שלו, את הגודל שלו, אני יכול להגדיר צבעים לגביו, אני יכול לדעת מי חלון האבא שלו שפתח אותו, אני יכול לגשת ממנו לחלון האבא שלו ועוד כל מיני דברים שניתן לעשות עם אובייקט ווינדואו.
כרגע אני רואה שהחלון הזה נפתח לי בעצם על כל המסך. אוקיי, בואו נסגור ונסתכל על אובייקט ווינדואו. אז ברגע שאני רושם ווינדואו אני בעצם רואה אותו ואז כשאני לוחץ נקודה אני מגיע לכל התכונות והפונקציות שלו ואפשר לראות שזה אובייקט די גדול.
אחת מהפונקציות שלו זאת alert, פונקציה שהשתמשנו איתה המון. אנחנו כשהשתמשנו עם הפונקציה הזאת, אנחנו בעצם לא רשמנו כל הזמן window.alert אלא פשוט רשמנו alert.
בואו נבדוק. אנחנו רואים שמוצג לנו הודעה של הלו. אז למעשה מה שקורה זה שכל המאפיינים והפונקציות ששייכים לאובייקט ווינדואו ניתנים לקריאה עם המילה ווינדואו או בלי המילה ווינדואו.
לכתוב window.alert ו-alert זה יהיה אותו הדבר בול. ולכן ככה אנחנו יכולים בעצם להשתמש בכל המאפיינים של ווינדו. לא באמת צריך את המילה ווינדו, אבל אנחנו נוסיף אותה.
אז הדבר הראשון שאנחנו הולכים לראות זה מאפיינים שקשורים לממדים ולמיקום של החלון. אז בואו בעצם נציג מספר מאפיינים כאלה ואז נראה מה כל אחד אומר.
המאפיין הראשון שאנחנו הולכים לראות בעצם נקרא Inner Height. המאפיין הבא, Inner Width. מאפיין נוסף, Outer Height. מאפיין נוסף, Outer Width.
עוד שני מאפיינים שאנחנו יכולים להשתמש איתם בנוגע למימדים יהיו Screen Left וסקרין שניים נוספים יהיו Screen X וסקרין Y. אז בואו בעצם נכתוב את הדברים האלה בשביל שנוכל בבת אחת לראות מה בעצם שווה כל אחד מהם.
בואו פשוט נעתיק כל אחד ונראה מה ערכו של כל אחד מהם. יש לנו פה את ה Outer Height, נציג אותו כמחרוזת, גם את ה-Window כמובן.
יש לנו כאן את ה- Outer Width, יש לנו את ה- Window Screen Left, יש לנו את ה- Screen Top, Window.Screen X, Window.Screen Y. בואו נריץ.
נרפרש ונתחיל לראות. Window.Inner Height לא נתמך על ידי אינטרנט אקספלורר ולכן אנחנו רואים Undefined. כנ"ל, Inner Width, Outer Height, Outer Width גם לא נתמכים.
Screen Left זה 0, כי אנחנו רואים שהחלון צמוד לשמאל. סקרין טופ זה 90, יש לנו פה 90 פיקסלים מלמעלה. סקרין X לא נתמך, סקרין Y לא נתמך, וזהו זה.
בואו נזיז את החלון טיפה לכאן, ונרפרס שוב. יש לנו אינר הייט, אינר וויד, אאוטר הייט, אאוטר וויד, סקרין לפט הפעם זה 54 פיקסלים משמאל, 133 מלמעלה, X ו-Y לא נתמכים.
בואו עכשיו נריץ את אותו חלון, אבל הפעם נריץ אותו עם דפדפן אחר, כנראה אולי דפדפן אחר תומך בעוד אלמנטים. אז בואו נפתח את התיקייה, ניקח דפדפן חרום ונפתח אותו בעזרת דפדפן חרום.
כעת אנחנו רואים שה-Inner Height כן נתמך על ידי חרום לדוגמה, והוא שווה 649. כלומר הרוחב, או יותר נכון הגובה הפנימי זה 649 פיקסלים. Width, Inner Width 1024 ממש כל המסך.
Outer Height 734, כלומר הגובה החיצוני שכולל את השורה העליונה כולל את הסטטוס למטה 734. Outer Width 1024 עדיין זה בעצם כרגע אין שום דבר שמפריע ל-Width ולכן זה אותו דבר.
Screen Left 0, Screen Top 0, מרחקים מהקצה השמאלי של המסך והקצה העליון של המסך. Screen X 0, Screen Y 0. בואו נזיז כרגע את החלון לכאן ושוב נבדוק.
הנר הייט, הנר וויד, אאוטר הייט, אאוטר וויד, סקרין לפט, כלומר המרחק מהמסך לקצה השמאלי של החלון, סקרין טופ, המרחק מהמסך לקצה העליון של החלון, מקצה המסך העליון לקצה העליון של החלון שלנו, סקרין איקס, גם הוא המרחק מהקצה השמאלי של המסך לחלון
שלנו, וסקרין וואי, אותו הדבר כמו סקרין טופ, גם המרחק מהקצה העליון של המסך לקצה העליון של החלון. שלנו ואלה בעצם המאפיינים שקשורים לממדים של החלון אוקיי אז בואו נשים את כל אלה בהערה ונראה אלמנטים נוספים אז המאפיין הבא שאנחנו הולכים לראות נקרא Page X Offset כנ"ל יש לנו Page Y Offset מה שהחבר'ה האלה מייצגים
זה בעצם את המרחק שבו ביצענו גלילה בצורה אוריזונטלית ובצורה ורטיקלית זאת אומרת שנניח שיש לנו פה חלון מאוד מאוד גדול שאנחנו מסוגלים לגרור אותו בצורה כזאתי וגם אנחנו מסוגלים לגרור אותו בצורה אופקית.
זאת אומרת שאם אנחנו נגדיר כאן לדוגמה איזושהי טבלה בואו נניח שיש לנו שורה אחת ויש לנו המון ערכים בתוך השורה הזאת. אוקיי בואו נבדוק ואנחנו רואים שבדפדפן explorer page x offset וpage y offset לא נתמכים בעצם.
אוקיי בואו נלך לדפדפן אחר. נפתח כאן את chrome, PageX Offset אנחנו רואים 0, PageY Offset גם 0, אבל כעת נבצע איזושהי גלילה מסוימת.
PageX Offset 0, PageY Offset גם 0. אנחנו לא רואים בעצם השפעה, אז בואו ננסה לשים את החבר'ה האלה בלחצנים. כלומר, בואו ניקח לחצנים פה למטה, input type = button, PageX Offset ו-PageY Offset, כאשר ה-on-click שווה לפקודות שאנחנו רוצים להגדיר.
בואו ניקח פה את ה-alert ונגדיר אותו בלחצן. יש לנו פה את ה-y. אוקיי, בואו נבדוק שוב.
כעת אנחנו רואים שה-page y-offset בעצם זה 639, כלומר הדף בעצם נגלל 639 פיקסלים למטה בציר ה-y. בואו ננסה עכשיו לבצע משהו עם ציר ה-x.
איך אנחנו יכולים לעשות את זה? בואו ננסה לצמצם את החלון בצורה כזאת שתהיה לו גלילה פה למטה שאנחנו רואים אותה. ואז אם אנחנו מבצעים איזושהי גלילה מסוימת ולוחצים על הלחצן שמאפשר לראות את הגלילה על ציר ה-X, אנחנו בעצם רואים שגללנו 81 פיקסלים ימינה.
זאת אומרת שה-Page X Offset מאפשר לנו לראות כמה בעצם הצלחנו לגלול ימינה או כמה בעצם הגלילה זזה ימינה או שמאלה, אנחנו מדברים על אתר בעברית והפייג' וואי אופסט מאפשר לנו לראות כמה בעצם גללנו למטה על ציר הוואי.
המאפיין הבא שאנחנו הולכים לראות נקרא ניים. לווינדו יש ניים, אנחנו יכולים להכניס לתוכו ערך ואנחנו יכולים להציג את הערך.
בואו נציג, כרגע נראה שלחלון שלנו אין בעצם שם אבל אנחנו יכולים להגדיר לו שם והשם הזה סך הכל מה שנקרא פרנדלי ניים מאפשר לנו לזהות חלונות או לדעת איזה שם נתנו או לזהות את החלון לפי השם.
בעצם זה רק איזשהו שם מבחינת קלות הפיתוח או השגת החלון לפי השם שלו. הדבר הבא שאנחנו הולכים לראות זה בעצם האובייקטים שכבר ראינו אותם ואנחנו בעצם ראינו את האובייקטים האלה כאובייקטים ששייכים לדפדפן, הדפדפן עצמו והאובייקטים האלה זה אובייקטים ששייכים לווינדואו.
אז בואו נזכר מה בדיוק האובייקטים האלה היו. דבר ראשון אנחנו ראינו אובייקט של היסטורי ואנחנו יכולים לראות כאן שיש לנו גישה להיסטורי דרך הווינדואו. בואו נציג כרגע היסטורי לדוגמה length זה ייתן לנו את מספר הדפים שיש בהיסטוריה כרגע יש 0 בואו ניגש ליהוד.קום נחזור לאחר מכן אחד אחורה ויש לנו כבר שני דפים הדף הנוכחי ויהוד.קום.
אז כשאנחנו ביצענו פעולות עם אובייקט היסטורי הוא בעצם שייך לאובייקט ווינדואו אבל כמו שציינו מקודם אנחנו לא צריכים לרשום את המילה ווינדואו