תרגיל 19
table, tr או td. באותו שלב האלמנט עדיין לא מוצג במסך.i*j, כלומר המכפלה של השורה והעמודה.appendChild, האלמנט נשאר בזיכרון בלבד ולא מופיע בדף.this מצביע על התא הנכון, כי הערך שלו משתנה לפי המקום שבו הקוד נקרא.פרקי ההרצאה: תרגיל 19
תמלול ההרצאה: תרגיל 19
הטקסט המלא של הדקות הראשונות בהרצאה «תרגיל 19» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו ממשיכים בתרגילים שלנו ועכשיו אנחנו מגיעים לתרגיל מאוד מעניין שאנחנו צריכים לבנות דינמית, לא ב-HTML, בתוך ה-JavaScript לייצר רכיבי HTML ולבנות לוח הכפל ב-JavaScript.
לבנות לוח הכפל ב-JavaScript ובואו נראה איך אנחנו עושים את זה. נתחיל מלוח הכפל פשוט ואחרי זה נסתבך ונוסיף לזה דינמית עמודות ושורות ונעשה טבלה דינמית אבל נתחיל מלוח כפל פשוט.
אנחנו צריכים 10 שורות ו-10 עמודות אז נעשה פונקציה חדשה משימה 19 נעשה לולאה מ-1 עד 10 שזה השורות שלי שימו לב אני מתחיל מ-1 עד 10 זה השורות שלי ובכל שורה אני רוצה 10 עמודות אז אני עושה פה J שימו לב אסור בתוך לולאה לשנות את הלולאה הראשית אז אני מחליף I ב-J וה-I שלי זה 10 שורות ועבור כל שורה יש לי 10 עמודות יפה מאוד ומה אני
עושה בפנים אני מכפיל את i ב-j נעשה משתנה שצובר לנו את התוצאות rest פלוס שווה i כפול j והוא למעשה צובר לנו את המכפלות של לוח הכפל רק בואו נעשה את זה טיפה יותר יפה נדפיס i על המסך סימן של כפול את הערך של j על המסך
סימן שווה ואת המכפלה שלהם יופי יצא לנו לוח הכפל כאשר i כפול j שווה למכפלה שלהם. אתם מבינים כאילו הוא כל שורה רץ על כל העמודות ועושה הכפלות.
עבור i שווה 6 הוא יעשה 6 כפול 1, 6 כפול 2, 6 כפול 3, 6 כפול 4, 6 כפול 5 וככה עד 6 כפול 10. ובסוף של לולאה ראשית אני רוצה לרדת שורה כי כאילו i שלי זה השורות.
אז אחרי שסיימתי שימו לב ה-i זה השורות ובכל שורה אני רוצה לבצע את הקוד הזה, זה אומר לעשות 10 עמודות ולרדת שורה זה הפתרון הפשוט בלי JavaScript דינמי תכף נראה שזה עובד ואם יש איזושהי תקלה אני אסדר אותה אני רואה שכל הדפדפן נתקע לי תראו כל הדפדפן נתקע, אין שום שגיאות והדפדפן
פשוט תקוע בואו נראה מה קרה, יש פה טעות לוגית ואתם רואים מה שקרה שבלולאה של J שכחתי לעדכן את ה-J עצמו והלולאה של J נתקעה במצב שה-J שווה 1, זה פשוט נתקע שמה, ודבדפן נפל.
עכשיו שום דבר לא נתקע, אין שגיאות, אבל אני לא רואה שום דבר על המסך. דבדפן עובד, אבל אין שום תוצאות על המסך. כנראה שפשוט שכחנו לעדכן להוציא את פקודת ההדפסה בסוף.
אנחנו צברנו הכל לתוך משתנה RS, אבל לא הוצאנו את פקודת ההדפסה. אז בואו ניקח את ה-dif של ה-RS ונוציא אותו, ונכניס לתוכו את המשתנה רס, המשתנה של רס נכנס לתוך דיו של רס כ-HTML כי יש לו תגיות של HTML.
יפה מאוד, ואני רואה שלוח הכפל יוצא לנו בלי שום שגיאות, ואני רואה שאחד כפול אחד יוצא לי 11, לוח כפל מעניין יצא, לא, זה פשוט חסר רווח, צר רווח, שכחנו להוסיף רווח, ואנחנו נוסיף רווח בסוף שורה וגם בתחילת שורה.
אז קודם כל הבנו איך עובד לוח הכפל, לוח הכפל הוא רץ בעצם כל אחד כזה, זה צריך להיות תא נפרד בטבלה. ואני רואה שהכל עובד והוא רץ מ-1 ל-1 עד 10 כפול 10 כמו שלוח כפל אמור לעבוד.
נשארה לנו רק בעיה אחת, איך לעשות את כל זה טבלה, אני רוצה לעשות טבלה דינמית, אני לא רוצה לעשות סטרינגים של html, אני רוצה לייצר רכיבים דינמית ב-JavaScript.
שימו לב, התחלתי לעשות הכל כטקסט של html ולצבור אותו, אבל זה נקרא פתרון לא יפה. אנחנו עכשיו נראה איך אנחנו על ידי פקודות מוכנות יוצרים טבלה דינמית.
התחלנו לא לעשות את כל מה שאני הולך לעשות עכשיו, אלא פשוט לעשות הרבה טקסט שמצטבר ל-JavaScript, לקוד html, ובסוף להכניס אותו ל-HTML, וזה לא יפה.
ויש מקום להרבה טעויות. אנחנו רוצים לקחת דוגמה מוכנה איך לעשות טבלה דינמית, למעשה יש פה כולה שתי פקודות, Create Element ו-Append Child.
Create Element יוצר לי רכיב בזיכרון, לדוגמה יוצר לי טבלה או רוצה לי שורה, TR או עמודה TD, יוצר לי איזשהו רכיב בזיכרון. בואו נתחיל מזה שאנחנו עכשיו נעשה את הרכיב טבלה בזיכרון, כי אנחנו רוצים להכניס הכל לטבלה, וזה נקרא התכנות הנכון. התכנות הלא נכון זה לצבור הרבה טקסט בצורת HTML ובסוף לדחוף אותו כ-HTML.
פרנקטנציה חיבור של סטרינגים שיוצר בסוף html נחשב קוד לא יפה עם הרבה טעויות ומאוד קשה לחפש את הטעויות האלו אחרי זה גם אבל הרבה עושים את זה כי זה יותר פשוט אנחנו מתחילים מזה שאנחנו נתחיל אנחנו לוקחים רכיב של התוצאה שלנו את הדיו של התוצאה שלנו ומכניסים אותו למשתנה שנקרא רס דיו זה משתנה בזיכרון ואז יוצרים טבלה חדשה רכיב של טבלה וצריך
לחבר את הטבלה הזאת ל-RestDiv שלנו. שמתם לב, אנחנו מתחילים לעבוד עם משתנים. אז RestDiv מצביע על רכיב של דיו, ואנחנו מייצרים רכיב של טבלה, והטבלה הזאת בזיכרון היא לא מחוברת לשום דבר במסך.
והפקודה הבאה לוקחת את הדיו שלנו ומוסיפה לו Child, ילד, הפן Child להוסיף ילד, ומוסיפים לו את הרכיב של הטבלה.
אני יודע שזה לא ברור בגלל זה אנחנו נעשה עכשיו דבאגר ונראה מה קורה שורה שורה תראו מה קורה אנחנו לוקחים עכשיו מוצאים את המשתנה רס דיו מצביע על רכיב במסך יפה הפקודה הזאת המשתנה טייבל יוצר רכיב html חדש שלא מחובר לשום דבר שקורה כרגע במסך אנחנו יכולים לראות שבתוך דיו של התוצאה שלי אין כלום בפנים המסך ריק
אין כלום בפנים בגלל שהמסך ריק, אנחנו בשורה הזאת, 364, אנחנו נוסיף בעצם נוסיף את הטבלה החדשה לתוך ה-div שלנו, והנה הוספנו אלמנט של טבלה לתוך ה-div, יפה מאוד, הוספנו את האלמנט של הטבלה לתוך ה-div וזה מאוד יפה וזה בדיוק מה שרצינו לעשות.
זאת אומרת למדנו שיש לנו שתי פקודות חדשות שלמדנו, קריאייט אלמנט, ליצור רכיב חדש ב-HTML ולהוסיף את הרכיב כילד לרכיב אחר, הפנד צ'יילד.
באותה שיטה אנחנו הולכים לעשות עכשיו שורות ועמודות. בדיוק באותה שיטה, בואו נעתיק את זה מהדוגמה כאן. ליצור שורה, אנחנו צריכים ליצור שורות, ולהוסיף את השורה הזאת לטבלה.
אז אנחנו יוצרים שורה חדשה, אנחנו יוצרים שורה חדשה, בזיכרון, היא עדיין לא מחוברת לשום דבר במסך, ועכשיו לוקחים את הטבלה ומוסיפים לה את השורה שלנו.
הבנתם? אנחנו לוקחים רכיב, לדוגמת טייבל, עושים לו append child ומוסיפים לו משתנה tr שהוא מצביע על רכיב חדש בזיכרון. יפה.
אם אנחנו שוכחים לעשות append child אז הוא פשוט קיים בזיכרון ולא קיים ב-HTML ולא מוצע. זה שתי הפקודות שצריך ליצור רכיב חדש ולהוסיף אותו כילד לרכיב קיים.
עושה כל מה שאתם צריכים לדעת. הקטע שאנחנו עושים את זה בתוך לולאה ואז זה מתבצע עשר פעמים, זה יוצר לנו עשר שורות. ועבור כל שורה אנחנו צריכים עכשיו לייצר עשר עמודות.
ואנחנו עושים את אותו הטריק, רק עכשיו על TD, TD זה בעצם עמודות. אנחנו מייצרים עמודות חדשות, עשר עמודות חדשות עבור כל שורה, ולכל שורה מוסיפים את העמודות האלה.
יפה מאוד. וזה כל מה שאתם צריכים לדעת בשביל לעשות טבלה דינמית, ליצור רכיב ולהוסיף אותו לרכיב שמעליו.
בואו נמשיך ונוסיף עוד רכיב של טקסט, רכיב של טקסט שיהיה בתוכו המכפלה שלנו. נקרא לו טקסט, משתנה טקסט ובפנים אנחנו שמים, אפשר לשים את כל הדבר הזה, אפשר לעשות רק i כפול j, מה שאתם רוצים.
אנחנו כל פעם יוצרים רכיב חדש ומוסיפים אותו, אפשר לעשות ככה, אפשר לעשות ככה, יש כמה דרכים, יש יותר מדרך אחת נכונה.
יודעים מה? בואו נשאיר את השורה ההיא כמו שהייתה ופה נשים, בואו נשים פה i כפול j פשוט. אני עושה קונטרול Z מחזיר הכל אחורה קונטרול Z ועושה פה I כפול J יופי וזה מה שהיה לנו בדוגמה ובואו נראה שורה אחרי שורה נעבור ונראה בדיוק מה קורה אז דבר ראשון אנחנו אנחנו לוקחים את הדיו של התוצאה שלנו לתוך משתנה רס דיו
יוצרים טבלה חדשה ומוסיפים עכשיו את הטבלה לתוך התוצאות אתם יכולים לראות שלפני שנעשה את השורה הזאת הדיו הוא ריק ורק אחרי ה-Pan Child הוא יתווסף שם, רק אחרי ה-Pan Child.
אנחנו יכולים גם לעשות Watch ולעקוב אחרי מה שקורה במשתנה פה בצד, אבל אני אראה לכם את זה בשיטה יותר פשוטה, פשוט להראות לכם פה שהטייבל יתווסף לתור דיו.
ועכשיו שימו לב, הטייבל הוא ריק. אתם רואים שהטייבל הוא ריק? הטבלה ריקה? תכף נתחיל להוסיף אליה שורות, ליצור שורות.
אתם רואים משתנה TR יצביע על רכיב TR, אבל הוא עדיין קיים רק בזיכרון, עוד לא קיים באמת ב-HTML ועכשיו אנחנו נוסיף את הרכיב הזה לתוך טבלה. בואו נראה, נוסיף רכיב לתוך טבלה.
אתם רואים הוא עדיין, אתם רואים יש פה שורה ריקה כי הוספנו שורה לתוך טבלה ועדיין אין בתוכה עמודות, תכף ניצור בעמודות. אנחנו מתחילים ליצור עמודות, 10 עמודות. בואו נראה את זה, מתחילים ליצור עמודה ראשונה, עמודה שנייה, אנחנו מסתובבים ועושים 10 עמודות ומוסיפים את העמודות למשתנה TR שמצביע על שורה.
נהדר, וגם רכיב של טקסט, אנחנו רואים שיש לנו פה עמודה עם טקסט בפנים. יפה מאוד. זה נקרא לעבוד עם אובייקטים ב-JavaScript שכל אובייקט מצביע על רכיב אחר HTML בטבלה.
טוב, אתם רואים איך שזה מוסיף לי את העמודות וכל עמודה הוא מכניס בפנים ערך. הקוד פה די ברור ליצור רכיב ולהוסיף אותו לרכיב אחר.
וככה אנחנו עושים בעצם הרבה פעמים ומוסיפים שורות. אנחנו צריכים 10 שורות, 10 עמודות הוספנו בשורה הראשונה רק 4, וככה אנחנו רצים ומוסיפים הכל דינמית.
יפה מאוד, בואו נראה, נעשה את זה עכשיו זריז, ואנחנו גם נעיף את השורות האלו שאנחנו לא צריכים שהוא יחליף לנו את הדיו של התוצאה. זה היה מהפתרון הקודם, לפני ה-HTML הדינמי, זה נקרא לבנות דינמית בזמן ריצה.
בזמן שהתוכנה עובדת אנחנו בונים הכל דינמית. הוא לא יתעדכן. צריך ללחוץ קונטרול F5. יופי, ואני רואה שהטבלה כן עובדת, יש לנו בעצם טבלה פה 10 על 10 שכן עובדת.
יפה מאוד. אני אומר שעדיין יותר יפה לי כשזה היה כתוב הפעולה עצמה, 7 כפול 7,