אובייקט Screen
screen.width ו-screen.height מחזירים את הרוחב והגובה בפיקסלים. בזמן ההקלטה הרזולוציה הייתה 1024 על 768.availWidth ו-availHeight מחזירים את השטח הפנוי. בזמן ההקלטה הגובה הפנוי היה 734 במקום 768, כי שורת המשימות תופסת את ההפרש.colorDepth מחזיר כמה צבעים המסך יכול להציג, למשל 32 או 16.onload של תגית body, כשהדף נטען.window.open עם top=0 ו-left=0, ו-width ו-height לפי availWidth ו-availHeight, פותח חלון שממלא את המסך הפנוי.screen.width, screen.height, screen.availWidth, screen.availHeight, screen.colorDepth.להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד
פרקי ההרצאה: אובייקט Screen
תמלול ההרצאה: אובייקט Screen
הטקסט המלא של הדקות הראשונות בהרצאה «אובייקט Screen» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
כעת אנחנו הולכים להיכנס למספר אובייקטים שנחשבים כ-browser objects. האובייקטים האלה מאפשרים לגלות כל מיני פרמטרים ולבצע כל מיני דברים על הבראוזר עצמו, על הדפדפן עצמו, חלונות שקשורים עם הדפדפן, מידע שקשור לדפדפן ועוד.
האובייקטים שאנחנו הולכים לראות הם screen שקשור למסך עצמו, מאפשר לנו לקבל נתונים על המסך ולדעת כל מיני דברים שקשורים על הרזולוציה, ווינדואו מאפשר לנו לעשות פעולות על החלון של הדפדפן עצמו, נאביגייטור מאפשר לנו לקבל מידע על הדפדפן, היסטורי מאפשר לנו לקבל מידע על ההיסטוריה, ולוקיישן מאפשר לנו לבצע פעולות על המיקום
של הדף. אז אנחנו נתחיל קודם כל עם הסקרין. ואנחנו בעצם יכולים לקבל מידע לגבי המסך עצמו של המשתמש.
איזה מידע אנחנו יכולים לקבל? אז ראשית, יש לנו את האובייקט סקרין. אין לי פה אינטליסנס מאיזושהי סיבה, אנחנו נצטרך לעבוד בלי אינטליסנס. יש לנו screen.width בואו נציג את זה ונראה כמה הרוחב של המסך עצמו.
הרוחב של המסך ניתן בפיקסלים ואנחנו יכולים לראות שבהתאם לרזולוציה כרגע הנוכחית של המסך שלי ה-width כלומר רוחב של המסך בפיקסלים זה 1024. יש לנו אפשרות לקבל גם את ה-height הגובה בפיקסלים וזה screen.height בואו נבדוק זה הרוחב והגובה זה 768. עכשיו, יש לנו בנוסף גם מאפיין שנקרא Available Width ו-Available Height.
מה זה בעצם המשתנה הזה Available? בואו נסתכל קודם כל מה ההבדל ביניהם. אז כרגע אני רואה שה-Width הוא אותו הדבר, אבל ה-Height ה-Available, כלומר מה שפנוי זה פחות מהרוחב עצמו.
והסיבה היא כי בגובה יש לנו פה את ה-Task Bar. זאת אומרת שה-Available וכל רוחב המסך פחות ממה שקשור ל-Taskbar. שה-Taskbar יכול להיות למטה, הוא יכול להיות בצד וכולי.
אז כאן אנחנו בעצם יכולים לראות שיש לנו אפשרות להתעסק עם ה-Available, כלומר עם כמה שפנוי. אז בואו נרשום שזה ה-Available Width וזה ה-Available Height.
דבר נוסף שאנחנו יכולים לקבל מהמסך זה את עומק הצבעים. זה מתבצע על ידי המאפיין Color. בואו נסתכל מה עומק הצבעים שיש לנו כרגע.
נראה שעומק הצבעים זה 32. זה בעצם מספר שמציין כמה המסך מסוגל להחזיק צבעים. יש 8, יש 16, יש 32 ויש גם יותר. בואו נסתכל רגע מה קורה אם אני משנה אותם, או איך אני בעצם יכול לשנות ואיך אני יכול לגלות את זה מג'אווה סקריפט.
אז כרגע אם אנחנו מציגים בעצם את הנתונים הנוכחיים של המסך, אנחנו מקבלים שהוויד זה 1024, ה-available with זה 1024, ה-height זה 768 פיקסלים, available height זה רק 734 פיקסלים ועומק הצבעים זה 32. אבל בואו כעת נשנה את זה.
השינוי מתבצע על ידי שינוי של הרזולוציה. בואו נלך ל-settings ונשנה כרגע את הרזולוציה ללדוגמה 1152 על 864 פיקסלים. נשאיר את עומק הצבעים כ-32.
נבצע אוקיי, נחזור לתוכנית. ונריץ שוב וכעת אנחנו מקבלים שהווי זה 1152 available גם 1152 מפני שהטאסק בר לא מפריע לרוחב של המסך. הייט הגובה 864 פיקסלים אבל ה-available זה רק 830 עומק הצבעים 32.
בואו נשנה כעת את עומק הצבעים ונראה איך זה משפיע. נגדיר כאן שעומק הצבעים זה רק 16. נחזור לדף נריץ והרוחב והגובה וקיבלנו רק 16, עומק 16 של צבעים.
בואו נחזיר את זה בחזרה ונראה איך אנחנו בעצם יכולים להשתמש עם הנתונים האלה. אז ראשית נלך לרזולוציה, נחזיר את זה ל-32, ורזולוציה של 1024 על 768 שמתאימה לנו כרגע להקלטה.
אז מתי בעצם נרצה לקבל את הנתונים האלה ולפיהם לעשות משהו? ראשית, בוא נניח שאנחנו רוצים להציג איזושהי תמונה על הדף אינטרנט שלנו, אם המסך של המשתמש הוא מסך מסך יחסית חזק, אנחנו יכולים להציג תמונה יותר מפורטת ויותר כבדה.
אם המסך שלו לא מסוגל להציג הרבה צבעים, אולי כדאי שנציג לו תמונה קצת פחות כבדה. לכן זה מצב שאנחנו יכולים לבדוק את עומק הצבעים, ולפי זה להחליט איזה תמונה להגדיר.
אז בואו נבנה פונקציה, נקרא לה set background image. הפונקציה הזאת בודקת את color depth של המסך, ואומרת דבר כזה:
אם ה-Color Depth קטן או שווה בואו נניח ל-16 אנחנו רוצים להציג תמונה יחסית קטנה או