Forms - Event Object
פרקי ההרצאה: Forms - Event Object
תמלול ההרצאה: Forms - Event Object
הטקסט המלא של הדקות הראשונות בהרצאה «Forms - Event Object» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם אנחנו נתחיל לעבוד עכשיו עם טפסים שזה אומר למלא שדות ולשלוח אותם לשרת איך עובדים ולידטורים איך עובדים כל מיני חוקים נניח שכחתי לרשום שם אז יש לי פה הודעה שקופצת ושכחתי לשים v אבל נתחיל ממשהו פשוט עם הכמות עם quantity להוסיף כמות להזמנה למוצר ונראה איך
הדבר הזה עובד ואחרי זה נעבור לנושאים יותר מורכבים כמו ולידטורים אז בואו נתחיל להוסיף פה את השדה הזה זה נקרא עבודה עם טפסים מתחילים בשדה אחד פשוט להבין איך כל הסיפור הזה עובד.
אז אנחנו רוצים להוסיף כמות לפרודקט דיטלס, נכון? לפרודקט ליסט. פה שיהיה לי גם שם לבחור, גם מחיר, ויהיה לי פה עוד איזשהו טקסט בוקס, תיבת טקסט של לבחור כמות.
אז בואו נעשה פה אינפוט. האינפוט הזה אמור להיות חלק מטופס, אין לי פה טופס אני לא הולך לשלוח שום נתון לשרת אז אני לא עושה טופס כי זה סתם קבלת מידע בלי שליחת מידע לשרת ולא צריך טופס אז אני משתמש רק בקומפוננטה ברכיב ששייך לעולם הטפסים input type אני משתמש בnumber לחצתי טאפ טאפ פעמיים כשלחצתי טאפ טאפ פעמיים כשכתבתי מילת
input כדי שהוא ירשום לי את כל הדבר הזה את כל הטמפלייט הזה זה נקרא snippet אוקיי אז input type number ברגע ששמתי לו number ניתן לו איזשהו name נניח ניתן לו name נעים קוונטיטי html אני אקרא לו בסדר רק כדי שנראה מה הנעים הזה עושה הנעים הזה משפיע כשאנחנו נשלח טופס לשרת עד שאנחנו לא שולחים טופס לשרת הנעים הזה לא משפיע למעשה בזמן שליחת
טופס לשרת הוא לוקח את הנעים הזה ומשייך לו value ערך נניח אחד ברגע שהייתי לוחץ כפתור לשלוח לשרת את כל הטופס למרות שאין לי פה טופס הוא היה לוקח את הקוונטיטי הזה ושולח את הvalue ונראה את זה בהמשך value זה מה שמוצג על המסך יפה מאוד עכשיו בגלל ששמתי לו number יש לי אופציה לעשות מינימום לכתוב שהמספר המינימלי שלי
זה 1 ולעשות לו מקסימום לתת לו ערך מקסימלי במה הערך המקסימלי שאני רוצה אני רוצה שהוא ייקח עבור כל מוצר את המלאי המקסימלי שלו תראו בתוך פרודקט בתוך אובייקט של פרודקט יש לנו פה units in stock כמה יש במלאי זה הגיע לי מהשרת ואז אני יכול לקחת את השדה הזה ולהגיד לו שהערך המקסימלי שאפשר להקיש בתיבת טקסט הזאת זה יהיה כמות במלאי יש אז יש לי דבר כזה עכשיו יש
לי שאלה איך האינפוט הזה של כמות לאן הוא נכנס איפה שומרים את המידע הזה אנחנו איפה אנחנו רוצים לשמור אותו בואו נחשוב ביחד איפה לשמור את זה טוב מאוד שיש לי ערך מינימלי ערך מקסימלי וה-name הזה אני חייב אותו בכל רכיב אינפוט אבל איפה אני שומר את מה שהזינו שם מספר 3 מספר 4 אני רוצה לשלוח את זה בסופו של יום
לשרת איך אני שולח דברים לשרת ב-checkout component כשאנחנו שולחים מידע לשרת עכשיו השאלה איפה אני רוצה לשמור את המידע הזה אני יכול לשמור אותו באיזשהו שדה בתוך פרודקט את הכמות שהוזמנה אני יכול ללכת למוצר פרודקט ולהוסיף פה שדה חדש שלא היה לי אותו נניח quantity to buy או להגיד שזה number ולשמור פה את הנתון הזה שהקיש לי המשתמש
כמה הוא רוצה לקנות נניח שאני שומר את זה ככה ומה שאני ממלא בטופס הפרודקט הזה נכנס לתוך בזמן הקנייה, מה קורה בזמן הקנייה? בזמן הקנייה, כשהלקוח לוחץ ביי, כפתור של לקנות, הוא שומר את המוצר, כולל כל השדות שלו. דרך אגב, אנחנו יכולים להגיד לו עכשיו שזה מוצר עם כל השדות שלו.
נקודתה עם פרודקט. ברגע שאמרנו שזה מוצר עם כל השדות, אנחנו יכולים לשים נקודה ולראות את כל השדות שלו. אתם רואים? ואם אני מחזיר הכל חזרה ומוחק את הפרודקט הזה, תראו שכשאני שם נקודה, הוא לא יודע איזה טיפוס נתונים זה, אז הוא לא יודע להגיד לי כלום.
אתם רואים הוא לא יודע להגיד לי כלום וברגע שאני שם פה נקודתיים product ואומר לו איזה סוג נתונים זה אז כשאני אלחץ פה control רווח הוא ייתן לי את כל השדות ולכן יותר נוח לעבוד עם intelligence ועם סוג נתונים מוגדר זה גם נותן לי את העזרה וגם מונע ממני לכתוב משהו לא נכון רוצים לראות משהו לא נכון שהיה כתוב תראו היה פה כתוב
נקודה name ואם תסתכלו טוב טוב על הפרודקט אתם תראו שאין פה נקודה name אתם רואים יש פה product name זאת אומרת היה לי פה שדה לא נכון והוא לא זיהה אותו עכשיו כששמתי לו טייפ הוא ישר כותב לי שתקשיב השדה הזה לא קיים יש פה תקלה יש פה טעות יפה מאוד אז אנחנו פה מכריזים על טייפ וברגע שבן אדם קונה דוחפים אותו לתוך הסל קניות אתם רואים
לתוך הקארט סרוויס שופינג קארט ואז כשזה בתוך סל הקניות אנחנו הולכים לקומפוננטה של צ'ק אאוט ששולחת את זה לשרת קומפוננטה צ'ק אאוט לוקחת את סל הקניות שלי ונכניסה אותו לבאדי ושולחת לשרת אוקיי זאת כל השרשרת בעצם.
עכשיו, למה אני מספר לכם את כל השרשרת הזאת? כי יש לי פה שאלה מעניינת, איך לקרוא לשדה הזה? האם לקרוא לו Quantity to Buy או לקרוא לו באיזשהו שם אחר? אז אם אנחנו שולחים את זה לשרת, בואו נראה איזה שם השרת רוצה לקבל במיפוי שהוא מקבל. הרי הוא מקבל את כל זה, את כל האובייקט הזה הוא מקבל אצלו. איזה שם יהיה לו הכי נוח?
כי לי, בתוך ה-Client לא אכפת לי איזה שם לתת. שכבר בצד של השרת הוא יהיה מוכן לקבל. אז אנחנו הולכים פה ל-API צ'ק-אאוט בשרת ומחפשים API צ'ק-אאוט, הנה צ'ק-אאוט בשרת ורואים שכאן מגיע בעצם בפוסט המשתנה מפוסט פראמס מסוג הזה, מהקלאס הזה. בואו נראה מה יש לו בפנים.
בפנים יש לו Customers ו-Order Details שזה למעשה סל הקניות שלי, ליסט של מוצרים. אני עושה לו Go to Definition ואני רואה שיש לו Product ID, orderid ו-quantity כמות וזאת הכמות שיש בהזמנה השדה הזה זאת הכמות ואני עושה לו קופי וככה אני אקרא לו בדיוק בשם הזה כי השרת כבר מצפה ואז אני לא צריך להחליף
צד שרת במקום quantity to buy אני קורא לו בשם פשוט quantity כי זה מה שהצד של השרת מחכה לקבל וזה יפה מאוד אז קראתי לו quantity וזהו כי זה בצד של השרת ואז כשהוא יגיע לפה אני אוכל להגיד ש-o quantity שווה למה?
שווה ל... בעצם אני לא צריך לעשות שום דבר שווה כי כבר ה-Quantity הזה הגיע פה ב-Order Details, מה שלא היה לפני כן. זאת אומרת שאני יכול למחוק את השורה הזאת שמכניסה ל-Quantity 1. למה אני מוחק את ה-Quantity שווה 1? כי ה-Quantity הגיע לי כבר מהקליינט.
אוקיי, בואו נעצור את הריצה, Shift F5, ונמחק את השורה הזאת. אז אני עובר על כל המוצרים, רק משייך להם מספר הזמנה, אני לא צריך לקבוע להם כמות של 1 כי הכמות כבר מגיעה מהקליינט, שזה משהו מאוד יפה.
חזרה לproduct list ופה בby אני רוצה שידפיס לי את הכמות שימו לב הוא מזהה שזה קוראים לזה quantity יופי אז אני צריך בתוך האינפוט לשמור את זה בשדה שקוראים לו prd.quantity זאת אומרת אני צריך פה להגיד לו דבר כזה שהאינפוט שמכניסים זה השדה הזה איך אני עושה לו את זה אני עושה לו כזה דבר אני צריך להתלבש על אירוע שקורה אצלו בפנים בזמן שמישהו מכניס אינפוט נתונים כשמישהו
הכניס נתונים אני רוצה להתחבר אליהם ולקבל אותם ולשמור אותם במשתנה החדש שעשינו אז איך אנחנו מתחברים לתוך האירוע של הכנסת נתונים שקורה בתוך הקומפוננטה הזאת בפנים בתוך האובייקט הזה אז יש לנו פה html form events events html events אירועים של html בואו נראה אירועים שיש לנו ב html יש לנו אירועים גלובליים מה זה אומר ברמת חלון כולו ברמת כל הטאב נניח אירוע שהחלון סיים
טעינה יש לנו אירועים ברמת טופס שזה בדיוק מה שאנחנו צריכים כי העולם הזה של שדות נמצא בעולם של טפסים ואני יכול להתלבש על אירוע on change כשהרכיב משתנה אני יכול on input כשמישהו מכניס מידע לתוך התיבה הזאת ויש פה on submit כשמישהו שולח את הטופס לשרת אז בוא נתלבש על אירוע on input ובעולם של javascript
היינו עושים דבר כזה היינו עושים input type טקסט נניח on input כשקורה אירוע של input תפעיל את הפונקציה שלי ככה עושים את זה בעולם של javascript אנחנו לוקחים את זה ושמים את זה כאן רק בעולם של אנגולר הם אומרים תן לנו להשתלט על האירוע
תן לנו לטפל באירוע של input אנחנו נתלבש עליו ואתה תתלבש עלינו אירוע גורר אירוע אז כדי שאני אתלבש לא על javascript אלא על אנגולר כאילו בשכבה מעל אז אני שם פה סוגריים ומוריד מילת on שמתי סוגריים והורדתי מילת on התלבשתי על אותו אירוע של input אחרי שכבר אנגולר טיפל בו והעביר לי את השליטה לפונקציה
שלי עכשיו אנגולר מעביר לי גם יחד עם האירוע עוד איזשהו אובייקט עם מידע אקסטרה יש שם מידע לדוגמה איפה הכניסו ערך איזה ערך הכניסו אז האובייקט הזה באנגולר נקרא דולר איבנט דולר איבנט זה אובייקט שפולט החוצה האירוע של input של אנגולר והאובייקט הזה ברגע שהוא נפלט