תרגילים 21-22
this.this מתייחס לרכיב שנלחץ רק אם מעבירים אותו כפרמטר. קריאה ישירה בלי פרמטר מעבירה את החלון כולו, והמרצה מראה זאת בדיבאגר.type, id ו-checked הם מאפיינים של האובייקט. type קיים רק בשדות קלט, ולכן בדיב הוא לא מופיע.if בודק קודם את הסוג, אחר כך את ה-id, ואם מדובר בצ'קבוקס בודק אם הוא checked, וכותב את התוצאה.type, id ו-onclick מוגדרים בקוד, ואחר כך appendChild מציג את הרכיב.onclick מבטיחה שה-this יהיה הרכיב הנכון בזמן הלחיצה.createAttribute במקום createElement גרמה לשגיאה, ולכן כדאי לבדוק את שמות הפונקציות בקונסולה.this בכל רגע.פרקי ההרצאה: תרגילים 21-22
תמלול ההרצאה: תרגילים 21-22
הטקסט המלא של הדקות הראשונות בהרצאה «תרגילים 21-22» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו ממשיכים עם התרגילים שלנו ואנחנו עוברים לתרגיל מספר 21. בתרגיל 21 אנחנו צריכים לעשות שני צ'קבוקסים, שני ויים כמו שאתם רואים על המסך ולכל וי כשאנחנו לוחצים עליו צריך לרשום על המסך לחצת על הוי הראשון ומה המצב שלו, לחצת על הוי השני האם הוא צ'קט או לא צ'קט וגם לעשות שני דיבים על המסך ולרשום לחצת
על דיב ראשון או לחצת על הדיב השני זאת אומרת לזהות בדיוק על מה הבן אדם לחץ על ידי פונקציה אחת שמזהה את הכל. אנחנו רוצים לעשות פונקציה אוניברסלית שיודעת לזהות על מה בדיוק לחצו.
אנחנו מדמיינים מצב של משחק או מצב של שלא לכל כפתור יש פונקציה משלו אלא פונקציה אחת כללית שמטפלת בכל הלחיצות על כל הצ'קבוקסים ועל כל התיבות אנחנו רוצים ללמוד איך אנחנו מזהים.
אנחנו נעשה דוגמה פשוטה נוריד את כל הערכים נוריד את הכל אנחנו צריכים לעשות שני צ'קבוקסים שני דיווים והדבר היחיד שאנחנו נשאיר זה בעצם רק את ה-ID שלהם כי אנחנו לא הולכים לשלוח שום דבר לשרת.
יכלנו להשאיר את המאפיינים האחרים כמו name כמו vehicle כאילו רכב שווה בייק או זה היה טוב אם היינו צריכים לשלוח ערכים לשרת לדוגמה היינו צריכים לשלוח לשרת name שווה value אנחנו לא הולכים לשלוח שום דבר לשרת אז זה קצת חסר משמעות מבחינתנו לנו יספיק.
אני רוצה ללכת על המינימום ולא על המקסימום. תכף תסדר את הממשק ונוסיף שני איי-דיים גם לשני דיבים ולדיב אנחנו חייבים לתת גובה ורוחב כדי שנראה אותם במסך נעשה 50 על 50 ונעשה בורדר כדי שנראה את הדיב עצמו.
בורדר ברוחב אחד פיקסל בצבע שחור רציף סוליד זה אומר רציף לדוגמת דוטד זה נקרא מכווקר. אז נתנו לו, לכל דיו נתנו ID ונתנו גובה ורוחב ואנחנו נזהה הכל לפי ה-ID.
אנחנו נעשה את המינימום הנדרש, כמובן שכמו שאנחנו נעבוד עם ID, אתם תראו, אנחנו יכולים לעבוד גם עם value ועם כל מאפיין אחר. צריך להוסיף on-click שאנחנו מפעילים פונקציה שנקראת task21, אנחנו רוצים שאותה פונקציה תטפל בכל הקליקים של כולם ותזהה בדיוק על מי לחצו ותרשום לי את זה על
המסך. בואו נעשה פונקציה חדשה task21 ונפעיל דיבאגר כדי לראות מה אנחנו בדיוק מקבלים אני רוצה לבדוק מה זה ה-this, this זה הרכיב הנוכחי, בואו נראה למה הוא שווה כשאני אלחץ, קודם כל חיצונית זה נראה בסדר, זה נראה שני צ'קבוקסים ושני דיווים, מצוין אני אלחץ F12 ואני רוצה לזהות על איזה רכיב בדיוק לחצתי
בואו נעשה F12 ונעשה קליק ונראה למה שווה ה-this ברגע זה ואני רואה שהדיס הרכיב הנוכחי זה בעצם כל החלון, הוא בתוך הפונקציה לא ראה את הרכיב הנוכחי.
יצרנו בתוך הפונקציה, ואני רואה שבתוך הפונקציה דיס הרכיב הנוכחי זה כל החלון. זה לא טוב לי כי אני רוצה לקבל את הרכיב הנוכחי, אז אני צריך שישלחו לי אותו כפרמטר.
אז נעשה פה איזשהו משתנה, נניח קליקט אייטם, והפרמטר הזה אמור לקבל מ-HTML את הרכיב הנוכחי. עכשיו שימו לב, בזמן הקליק הרכיב הנוכחי זה זה שמקליקים עליו.
אז אני שולח את ה-dis, דיס זה כמו להגיד בעברית אני, זה הרכיב הנוכחי. אז אני, כשאני קורא לפונקציה, אני מעביר את כל הרכיב הנוכחי עם כל המאפיינים שלו, את כל האובייקט שלו.
ואז אני אוכל מתוך האובייקט להוציא לדוגמה את המזהה. ובואו נראה אם זה יצליח לנו, אפילו נעשה הדפסה של האובייקט שהגיע. מה שאמור להיות, שאני מצפה לראות שהגיע לי אובייקט לא של ווינדו אלא של ה-checkbox או של דיב ואז נעשה עם דבאגר ונראה את המאפיינים של האובייקט הזה.
אני שם v ואני רואה שבאמת בקליקט אייטם הגיע input type input checkbox אתם רואים input checkbox הגיע מצוין וזה בדיוק מה שהייתי צריך זה בדיוק מה שהייתי צריך שהקליקט אייטם זה בעצם ה-checkbox שלנו אז יש לנו עכשיו בעצם בתוך הפונקציה משתנה קליק אייטם שזה ה-checkbox ויש לו מאפיינים כמו ID, כמו פונקציית קליק שלו, כמו Attribute Type.
אתם יודעים מה זה Attribute Type? כל המאפיינים האלו זה מה שכתבנו ב-HTML, כמו checked האם יש לו V או אין לו V. מאיפה אני מכיר את כל ה... מאיפה אני יודע שיש טייפ ו-checked וקליק?
כי זה מה שאנחנו כותבים ב-HTML. הטייפ הזה זה למעשה הוא לוקח את ה-HTML והופך אותו ל-object מאחורי הקלעים, ואנחנו נשתמש בזה כדי לבדוק האם לחצנו על צ'קבוקס ואם לחצנו על צ'קבוקס אז ניתן הודעה לחצת על צ'קבוקס ואם לא לחצת על דיב ונעשה אלס לחצת על דיב אחרי זה אנחנו ניכנס לתוך האיפים האלו ונבדוק על איזה צ'קבוקס
לחצנו על צ'קבוקס הראשון או השני אני בא להראות לכם שאנחנו מבחוץ יכולים לקבל פרמטר שזה האובייקט הנוכחי שנקרא דיס דיס זה האובייקט הנוכחי וכל פעם צריך לבדוק למה הוא שווה כי זה תלוי איפה אנחנו נמצאים, הערך שלו משתנה.
אני רואה כשנחצתי על דיו אז הטייפ הוא undefined. למה טייפ undefined? למה הוא לא מוגדר? כי האטריביוט המאפיין של טייפ נמצא רק באינפוט אלמנטס, ברכיבי אינפוט יש רק טייפ, האם זה פאסוורד, האם זה טקסט, האם זה רדיו בטון, זה קיים רק ברכיבי האינפוט,
בדיו לא קיים דבר כזה, אז הוא undefined, אז הוא כותב לי שלחצתי על דיפ ובצ'קבוקס הוא כותב לי שלחצתי על צ'קבוקס מצוין בואו נראה איפה זה כתוב ב html שימו לב בתוך html אנחנו כותבים רכיב input type checkbox הטייפ הזה זה המאפיין שאותו אנחנו בודקים בג'אווה סקריפט למעשה כל מה שאנחנו כותבים ב html הופך לאובייקט
בג'אווה סקריפט עכשיו בואו נבדוק את ה-id נבדוק האם זה צ'קבוקס הראשון או הצ'קבוקס השני אנחנו כמובן עושים כזה פתרון ידני כרגע, פשוט, רק כדי שאנחנו נלמד איך עובדים עם המאפיינים של האובייקט.
ואנחנו בודקים אם ה-ID שלו שווה ל-Task 21, צ'קבוקס 1, אם כן כותבים הודעה אחת, אם לא כותבים הודעה אחרת. ככה אנחנו יודעים האם לחצת לראשון או לחצת לשני.
עכשיו נעשה אותו דבר עבור דיו, Second Dive ו-First Dive. מצוין, אז אנחנו בודקים האם זה צ'קבוקס ואחרי זה בודקים את ה-ID של הצ'קבוקס.
אחרי זה אנחנו, אם זה לא צ'קבוקס, אנחנו בודקים את ה-ID של ה-Dev. מצוין. המטרה של התרגיל הזה להראות לכם איך אפשר לקבל רכיב גרפי כ-Object This ולהתחיל לבדוק לו את המאפיינים.
ודרך אגב, התרגיל הבא, אנחנו נעשה אותו דבר, רק נייצר את כל הרכיבים לא בתוך HTML, אלא דינמית ב-JavaScript, שזה ממש נקרא רמה גבוהה. נייצר את הרכיבים כבר ב-JavaScript עם כל המאפיינים שלהם.
זה יהיה עוד חמש דקות. טוב בואו נתחיל לראות שכל הסיפור הזה עובד לנו ואם כל זה עובד לנו נוסיף גם את הסטטוס של הצ'קבוקס האם יש לנו v או אין לנו v או לחצת על הצ'קבוקס השני לחצת על הדיו הראשון לחצת על הדיו השני לחצת על הצ'קבוקס הראשון לחצת על הצ'קבוקס השני הדבר היחיד שנשאר לי פה לא סגור זה הפינה האם צ'קבוקס הוא בv או לא בv אז בואו נוסיף גם את הבדיקה הזאת יש לנו מאפיין שנקרא
checked אנחנו יכולים לכתוב it is now הוא checked אבל checked ייתן לי true או false אז זה לא יפה לכתוב it is now true או it is now false אז זה יוצא לא יפה אתם רואים זה המאפיין הזה שנקרא checked אני חושב שזה לא יצא יפה אז בואו נשנה את זה אבל נבדוק שזה באמת עובד לפני שאנחנו מתחילים
ככה לראות שהמאפיין באמת עובד איך אנחנו פשוט עצרנו בתוך הפונקציה ואנחנו רוצים לראות checked true נכון אנחנו ברכיב הראשון יפה אז המאפיין הזה עובד נכון בואו נעשה עוד בדיקה עכשיו הוא, הורדנו את ה-v ואז הוא false.
אז המאפיין עובד נכון, רק שזה לא יצא יפה לכתוב it is now true או it is now false. אז אנחנו בעצם יכולים לכתוב הודעה מתחכמת כזאתי, האם זה checked, true או false.
אבל גם זה, לפי דעתי, פתרון לא יפה. בואו כבר נשקיע קצת מאמץ ונעשה פה הודעה נוספת, שאם checked item שווה true, it is now checked.
אם checked item שווה false, it is now not checked, unchecked ככה שיהיה יותר ברור בצורה מפורשת אנחנו בודקים האם זה שווה לטרו אם טרו נותנים הודעה שזה checked אם זה לא טרו נותנים הודעה שזה false מה שחשוב לי לראות שלאובייקט יש מאפיינים יש לו מאפיין type ואנחנו בודקים אותו אחרי זה אנחנו בודקים מאפיין ID אחרי זה אנחנו בודקים
מאפיין checked זאת הייתה המטרה של התרגיל הזה ואני רואה שחסר לי פה ירידת שורה אין בעיה נוסיף פה ירידת שורה ויוצאת לנו הודעה יפה שלחסנו על צ'קבוקס הראשון והוא צ'קת.
לחצנו, הורדנו את ה-v, it's not checked. שמנו v על השני, יש לנו הודעות מתאימות על כל קליק. יפה מאוד. חבר'ה, אנחנו מתקדמים מאוד יפה ולמעשה אפשר להגיד שסיימנו את התרגיל הזה.
אני מקווה שאתם מבינים את התרגיל הזה כי הוא מאוד חשוב להבנה לבניית ממשק גרפי. עכשיו אנחנו רוצים לראות איך אתם יכולים ללמוד את כל המאפיינים האלו אתם פשוט עושים דיבאגר, עוצרים בנקודת זמן מסוימת ורואים את כל המאפיינים לדוגמה ID, מפה אני לקחתי את כל המאפיינים, זה לא סוד האובייקט מראה לכם את כל המאפיינים שלו ואתם
יכולים לראות אותם אתם יכולים לראות סוג שלו, אתם יכולים לראות את כל הפעולות שלו לדוגמה מה קורה ב-on-click, תעברו על הרשימה הזאת ויש שם את כל המאפיינים לדוגמה מאפיין checked, הנה עכשיו הוא true אני שמתי b אז הבנתם שאתם יכולים בדבאגר בזמן ריצה לעצור את התוכנית ולראות את כל המאפיינים
של כל אובייקט בואו נתקדם ונעבור לתרגיל