WEBVTT

00:00:01.337 --> 00:00:03.306
בואו נמשיך לחקור מה אנו יכולים לעשות עם אובייקטים.

00:00:04.109 --> 00:00:08.001
אנחנו שוב עם התוכנית שהשתמשנו בה במדריך לפונקציות.

00:00:08.715 --> 00:00:14.273
בתוכנית הזאת יש פונקציית drawWinston שיודעת לצייר את ווינסטון במיקום X ו-Y מסוים.

00:00:14.273 --> 00:00:22.580
ואז כאן למטה, אנחנו קוראים ל-drawWinston ארבע פעמים, כל פעם עם קואורדינטות X ו-Y שונות.

00:00:22.580 --> 00:00:28.009
אתם מכירים אותי, כשאני מסתכלת על ארבעת הקריאות האלו לפונקציה drawWinston שהן כל כך דומות,

00:00:28.787 --> 00:00:39.194
כל מה שאני יכולה לחשוב זה כמה זה היה יותר טוב אם יכולנו להשתמש בלולאה ולקרוא לפונקציה רק פעם אחת בתוך הלולאה, עם שינוי קואורדינטות ה-X ו-Y בכל סיבוב.

00:00:39.194 --> 00:00:47.036
אז, כדי לעשות את זה, אנחנו צריכים למצוא דרך לשמור את מיקומי ה-X וה-Y במערך כדי שנוכל לעבור עליו בלולאה.

00:00:47.036 --> 00:00:55.816
ובכן, יש לנו שני סטים של ערכים, אז נוכל לעשות את זה עם שני מערכים. אחד למיקומי ה-X, ואחד למיקומי ה-Y.

00:00:55.816 --> 00:01:08.648
עבור מיקומי X יהיו לנו למשל, 99, 294, 101, ו-294, ועבור מיקומי Y יהיו לנו 117, 117, 316, 316.

00:01:08.648 --> 00:01:18.399
אוקיי, עכשיו נוכל לעבור עם לולאה על המערכים האלו עם לולאת for. נרשום: var i = 0;
i < xPositions.length;
i++

00:01:18.399 --> 00:01:29.727
אז אנחנו עוברים על כל איבר במערך xPositions והפקודה שנרשום היא
drawWinston(xPositions[i], yPositions[i])

00:01:29.727 --> 00:01:33.926
אוקיי, אז, בואו נראה אם זה עבד, נחמק את זה...

00:01:33.926 --> 00:01:36.200
בסדר, זה עבד.

00:01:36.200 --> 00:01:44.645
עכשיו יש לנו שורת קוד אחת שקוראת לפונקציה drawWinston, והיא מתבצעת עבור כל מיקום במערך xPosition.

00:01:44.645 --> 00:01:56.741
אנחנו יכולים להוסיף עוד... (10,1) ואז (1,1), ו-(100,1).

00:01:56.741 --> 00:02:13.107
עכשיו זה מתחיל להיראות קצת מבולגן, ואני לא אוהבת את זה, כי זה ממש קשה לראות איזה Xים שייכים לאיזה Yים. אני רוצה רק להעיף מבט ולדעת מה הם

00:02:13.107 --> 00:02:20.933
הזוגות של X ו-Y, במקום שאצטרך לוודא שאני מסדרת אותם אחד מעל השני במערך.

00:02:22.409 --> 00:02:26.729
אני רוצה למצוא דרך אחרת לשמור את המיקומים האלו.

00:02:26.729 --> 00:02:30.791
רעיון אחד הוא לשמור אותם בתור אובייקטים.

00:02:30.791 --> 00:02:38.660
תחשבו על זה, כל מיקום הוא בסה"כ שני חלקי מידע: מיקום ה-X וה-Y. אז, אנחנו יכולים להחזיק אובייקט שיש לו מאפיין X ומאפיין Y

00:02:38.660 --> 00:02:43.969
ואז יכול להיות לנו מערך של אובייקטים עם כל מיקומי ה-X וה-Y.

00:02:43.969 --> 00:02:45.758
בואו נעשה את זה.

00:02:45.758 --> 00:02:51.395
נרשום: var positions שווה.. וכאן יהיה לנו מערך גם.

00:02:51.395 --> 00:02:55.852
אבל, כל איבר, במקום להיות מספר, הולך להיות אובייקט.

00:02:55.852 --> 00:03:04.691
אז, כאן הסוגריים המסלוסלים שלנו, ואז נרשום פשוט: X: 99, Y: 117.

00:03:04.691 --> 00:03:13.392
אוקיי, אז עכשיו יש לנו את אחד המיקומים שלנו, נוסיף עוד אחד.

00:03:13.392 --> 00:03:30.897
אוקיי, X צריך להיות 294, 117, השלישי הולך להיות 101, 316, והאחרון 294, 316.

00:03:30.897 --> 00:03:37.524
אוקיי, עכשיו יש לנו מערך של אובייקטים, וכל אובייקט מכיל מאפייני X ו-Y.

00:03:37.524 --> 00:03:44.228
כאן למטה, בלולאת ה-for שלנו, נשנה את הלולאה כך שתרוץ מספר פעמים כאורך המערך positions.length

00:03:44.228 --> 00:03:48.993
אז נעביר את האובייקט

00:03:48.993 --> 00:03:58.851
עכשיו זה מעביר את כל האובייקט, אבל אנחנו רוצים להעביר את ה-X וה-Y, אז אנחנו צריכים לרשום: positions[i].X ו-positions[i].Y.

00:03:58.851 --> 00:04:00.228
טה-דה!

00:04:00.228 --> 00:04:03.969
עכשיו, אנחנו יכולים להיפטר מהמערכים הישנים.

00:04:03.969 --> 00:04:12.687
מעולה, זה נראה הרבה יותר נחמד, והופך את הקוד להרבה יותר קריא - וזה תמיד יותר טוב שיש לנו קוד יותר קריא.

00:04:12.687 --> 00:04:24.805
זה גם הופך את זה לפשוט יותר להוסיף מיקומים, אם נרצה. אני אוסיף אחד כאן - X הוא 200, Y הוא 200, נכניס את ווינסטון שם באמצע.

00:04:24.805 --> 00:04:27.301
מגניב.

00:04:27.301 --> 00:04:31.266
עכשיו אני רוצה להראות לכם משהו אפילו יותר יפה.

00:04:31.266 --> 00:04:38.635
שימו לב שהפונקציה שלנו מקבלת כרגע שני מספרים, ואז משתמשת בשני המספרים האלו.

00:04:38.635 --> 00:04:44.657
אנחנו יכולים לשנות את הפונקציה כך שהיא תצפה לאובייקט יחיד, ואז היא לוקחת את מאפייני ה-X וה-Y מהאובייקט,

00:04:44.657 --> 00:04:49.230
כך שכאן נוכל פשוט להעביר את האובייקט.

00:04:49.230 --> 00:04:50.846
בואו ננסה את זה.

00:04:50.846 --> 00:04:53.596
נעביר את האובייקט, עכשיו זה לא עובד.

00:04:53.596 --> 00:05:00.178
זה כי הפונקציה שלנו עדיין מצפה לשני פרמטרים והיא מקבלת רק אחד, אז נשנה את זה

00:05:00.178 --> 00:05:07.433
נרשום שהיא מקבלת facePosition, ועכשיו אנחנו מקבלים עוד שגיאה, ש-faceX לא מוגדר

00:05:07.433 --> 00:05:12.901
כי קודם העברנו את faceX כפרמטר, אבל עכשיו הוא לא קיים, אנחנו מקבלים רק אובייקט.

00:05:12.901 --> 00:05:20.899
אז, מה שאנחנו יכולים לעשות, זה לשמור את מיקום ה-X שיש באובייקט בתוך המשתנה faceX.

00:05:20.899 --> 00:05:27.684
אז קיבלנו את האובייקט הזה, אנחנו יודעים שיש לו מאפיין X, אז אנחנו פשוט הולכים לשמור את הערך הזה לתוך המשתנה faceX.

00:05:27.684 --> 00:05:33.637
אנחנו יכולים לעשות את אותו הדבר עם Y, אז faceY = facePosition.y.

00:05:33.637 --> 00:05:34.850
טה-דה!

00:05:34.850 --> 00:05:38.167
ואז, שאר הפונקציה משתמשת ב-faceX וב-faceY.

00:05:38.167 --> 00:05:43.968
שימו לב, אנחנו צריכים לוודא שאנחנו מאייתים את זה נכון, אם היינו כותבים xx, זה לא היה עובד כי זה לא מה שרשום למטה

00:05:43.968 --> 00:05:48.125
במערך האובייקטים שלנו - זה צריך להתאים.

00:05:48.125 --> 00:05:52.761
זה די מגניב - אתם יכולים ליצור מערכים של אובייקטים, ליצור פונקציות שמקבלות אובייקטים

00:05:52.761 --> 00:06:00.160
ואתם תגלו שלתוכניות שלכם יכול להיות הרבה כוח עם הדרך שבה אובייקטים מארגנים מידע

00:06:00.160 --> 00:06:05.184
בייחוד כי זה מאוד נפוץ לרצות לצמד את X ו-Y יחד, אני חושבת שתמצאו את זה

00:06:05.184 --> 00:06:08.926
מאוד שימושי בכל תוכניות הציור והאנימציה.

00:06:08.926 --> 00:06:12.000
אז תמשיכו עם זה ותהנו!