< Return to Video

Sneak Peek (Video Version)

  • 0:02 - 0:04
    אוקיי, בואו נקפוץ ישר למים ונכתוב תוכנית.
  • 0:04 - 0:09
    נתחיל מכלום, ובסוף יהיה לנו משהו די מרשים,
    מעין תוכנית ציור קטנה.
  • 0:09 - 0:15
    תחשבו על זה בתור סיור מהיר בחומר של השיעורים
    הראשונים בקאן אקדמי, שנועד לתת לכם
    תחושה של מה אפשרי.
  • 0:15 - 0:18
    אל תדאגו לגבי להבין כל פרט קטן כרגע.
  • 0:18 - 0:20
    אנחנו רק רוצים לתת לכם רעיון של מה מצפה לכם
  • 0:20 - 0:23
    וסוג התוכניות שאתם תהיו מסוגלים לכתוב
    בעוד לא הרבה זמן.
  • 0:23 - 0:27
    כרגע אין כאן כלום, אז בואו נצייר משהו.
  • 0:27 - 0:33
    אני רוצה לצייר אליפסה (צורה דמוית עיגול).
    כפי שתלמדו גם בהמשך, ככה עושים זאת.
  • 0:33 - 0:36
    האליפסה הופיעה, ממש בקלות.
  • 0:36 - 0:42
    הסיבה לכך היא שיש כמה דברים מיוחדים
    שסביבת העבודה בקאן אקדמי כבר מכירה,
    ואחד הדברים האלו הוא לצייר אליפסה.
  • 0:42 - 0:46
    אל תדאגו כרגע להבין מהם כל המספרים האלה.
    תלמדו עליהם בשיעור מבוא לציור.
  • 0:46 - 0:49
    אבל בכל זאת, הנה הצצה קטנה
  • 0:49 - 0:58
    כשאנו משנים את המספרים,
    אנו שמים לב שהראשון פשוט מייצג את המיקום לרוחב,
    השני מייצג את המיקום לגובה
  • 0:58 - 1:04
    השלישי מייצג את הגודל לרוחב,
    והאחרון את הגודל לגובה.
  • 1:04 - 1:10
    אתם לא צריכים לדעת את זה כרגע,
    אבל אם תרצו אתם יכולים לעצור את התוכנית הזה
    ולשחק עם המספרים בעצמכם עכשיו.
  • 1:10 - 1:17
    תלמדו את כל הפרטים בשיעורים עתידיים,
    והדבר החשוב כרגע הוא שהמספרים האלו
    שולטים באופן שהצורה מופיעה.
  • 1:17 - 1:20
    אוקיי, זה נחמד, אבל בטח לא מרשים
    אתכם יותר מדי.
  • 1:20 - 1:27
    אז אני אעשה משהו שנראה קצת יותר מסובך,
    ואז אשים את השורה של האליפסה בתוכו.
  • 1:27 - 1:31
    כלום לא קרה, אז אתם בטח עדיין
    לא כל כך מתרשמים..
  • 1:31 - 1:37
    אבל עכשיו מה שאני אעשה,
    והתוצאה תהיה לדעתי יותר מרשימה,
    היא ליצור אנימציה בתוכנית.
  • 1:37 - 1:43
    ועכשיו, כפי שאתם רואים,
    יש המון עיגולים והם עוקבים אחרי העכבר שלי
    כשאני מזיזה אותו
  • 1:43 - 1:47
    אתם יכולים לעצור את התוכנית לרגע ולראות
    שהם עוקבים אחרי העכבר שלכם במקום.
  • 1:47 - 1:49
    אז איך זה קורה בעצם?
  • 1:49 - 1:51
    מאיפה באו כל העיגולים האלו?
  • 1:51 - 1:59
    תלמדו על כל זה בשיעור מבוא לאנימציה.
    אבל אם אתם תוהים, מה שקורה הוא שהמחשב
    אומר לתוכנית שלנו, אוטומטית,
  • 1:59 - 2:03
    שוב ושוב ושוב, "צייר", "צייר", "צייר".
  • 2:03 - 2:10
    ואולי תחשבו שהתוכנית שלנו תתעייף מזה,
    אבל היא פשוט ממשיכה לבצע את מה שרשום לה.
  • 2:10 - 2:13
    כך שהיא ממשיכה לצייר אליפסה אחרי אליפסה..
  • 2:13 - 2:21
    וזה מה שקורה מאחורי הקלעים כשאנו
    מזיזים את העכבר, שיוצר כל כך הרבה אליפסות,
    למרות שכתבנו את שורת הציור רק פעם אחת.
  • 2:21 - 2:28
    אז, איך התוכנית יודעת היכן לצייר את האליפסה?
    איך היא יודעת לצייר את האליפסה איפה שהעכבר?
  • 2:28 - 2:31
    על כך תלמדו בשיעור על אינטראקציה עם העכבר.
  • 2:31 - 2:38
    הרעיון הכללי הוא שבכל פעם, המחשב אומר
    לתוכנית איפה העכבר נמצא, באמצעות שתי מילות
    קוד מיוחדות - mouseX ו-mouseY.
  • 2:38 - 2:45
    אתם לא צריכים לדעת עליהם יותר מדי עכשיו,
    אבל mouseX מייצג את המיקום של העכבר לרוחב,
    ו-mouseY מייצג את המיקום שלו לגובה.
  • 2:45 - 2:53
    אם כן, כשאנו יוצרים את האליפסה אנו בעצם אומרים
    למחשב לצייר את האליפסה באותו מיקום לרוחב
    שהעכבר נמצא בו,
  • 2:53 - 2:57
    ואנחנו אומרים לו גם לצייר אותה
    באותו מיקום לגובה כמו העכבר.
  • 2:57 - 3:03
    שזה אומר בעצם, לצייר את האליפסה בדיוק במקום
    שהעכבר נמצא, בכל פעם שמריצים את draw.
  • 3:04 - 3:08
    ושני המספרים האחרונים כאן פשוט אומרים
    מה יהיה גודל האליפסה.
  • 3:08 - 3:14
    שוב, אל תדאגו כרגע על כל הפרטים האלה.
    אחרי שתעברו כמה שיעורים,
    כל זה יהיה הרבה יותר מובן.
  • 3:14 - 3:22
    עכשיו המסך שלנו קצת נראה מבולגן אז אנחנו נוכל
    פשוט ללחוץ על כפתור restart (התחל מחדש)
    כדי להתחיל את התוכנית מחדש.
  • 3:22 - 3:27
    אתם מוזמנים לעצור את התוכנית עכשיו ולשחק
    בעצמכם עם זה, כדי שתראו מה קורה.
  • 3:27 - 3:33
    אוקיי. עכשיו יש לנו משהו די מגניב.
    אבל מה עוד אנחנו יכולים לעשות?
  • 3:33 - 3:40
    ובכן, העיגולים האלה קצת מכוערים.
    הם פשוט לבנים.
    מה אם יכלנו להפוך אותם לצבעוניים?
  • 3:40 - 3:48
    יש שיעור שלם על מבוא לצבעים, שם תלמדו הכל
    על צבעים, אבל אני אהרוס את הסוד עכשיו ואראה
    לכם איך לעשות את זה.
  • 3:48 - 3:51
    יופי! עכשיו יש לנו עיגולים אדומים שעוקבים
    אחרי העכבר.
  • 3:51 - 4:00
    אבל הם לא חייבים להיות רק אדומים,
    כי כשאתם לוחצים על הצבע הזה כאן,
    אתם רואים שאפשר לבחור איזה צבע שתרצו,
    מכל קשת הצבעים.
  • 4:00 - 4:07
    אולי צבע סגול נחמד? תלמדו על הסיבה שהצבע
    משתנה במקרה זה, בשיעור מבוא לצבעים
  • 4:07 - 4:12
    אם נתחיל מחדש.. יופי, יש לנו רק עיגולים סגולים
  • 4:12 - 4:19
    עכשיו, עשינו את כל העבודה הזאת כדי לצייר
    את הצורות היפות האלו, בכל פעם שהעכבר זז
  • 4:19 - 4:27
    אבל יהיה נחמד אם נוכל לצייר את זה רק חלק מהזמן
    למשל רק כשלוחצים על העכבר. אני אראה לכם איך
    לעשות זאת.
  • 4:27 - 4:36
    מבחינה הגיונית, זה לא כל כך מסובך. מה שנרצה
    הוא להגיד לתוכנית - אם העכבר לחוץ עכשיו,
    לצייר את העיגול. אחרת, לא לעשות כלום.
  • 4:36 - 4:46
    הנה איך שאומרים את זה בקוד: כותבים 'if', ואז
    סוגריים כאלו, אל תדאגו לגביהם עכשיו
  • 4:46 - 4:51
    אז, if ואז mouseIsPressed, ואז מה
    שאנחנו רוצים שיקרה בכל פעם שהעכבר לחוץ.
    אנחנו רוצים שזה יצייר את האליפסה שלנו.
  • 4:51 - 4:57
    אחרת, אנחנו לא רוצים לעשות כלום.
    אז נשאיר את החלק הזה כאן ריק.
  • 4:57 - 5:06
    נריץ את התוכנית מחדש עם restart, ונראה
    שאם מזיזים את העכבר, לא קורה כלום.
    אבל אם לוחצים על העכבר, זה מצייר, בסגול
  • 5:06 - 5:15
    אפשר בדרך זו לכתוב דברים, לצייר דברים, ובעצם
    כמעט כל דבר שנרצה. זה די מגניב שבמעט שורות
    קוד יצרנו את תוכנית הציור הקטנה הזו.
  • 5:15 - 5:22
    יש שיעור שלם על מבוא לתנאים (if), שם
    תלמדו הכל על מה הקוד הזה שכתבתי עושה
    ואיך הוא עובד.
  • 5:22 - 5:32
    אבל אני חושבת שאתם מתחילים לראות את
    הרעיון הכללי. אנחנו פשוט אומרים, אם העכבר
    לחוץ תעשה את זה, ואחרת אל תעשה כלום.
  • 5:32 - 5:36
    מגניב. זה בדיוק אותו ההיגיון שהיה לנו בראש.
    אנחנו פשוט כתבנו את זה בקוד.
  • 5:36 - 5:41
    מה לגבי הקו המתאר הזה מסביב לכל העיגולים?
  • 5:41 - 5:49
    תלדמו איך לשלוט בו בקרוב. תוכלו לעשות אותו
    עבה יותר, או דק יותר, ובצבעים שונים.
    אבל לבינתיים, למען האמת, אני פשוט רוצה
    להיפטר ממנו.
  • 5:49 - 5:58
    אז אני פשוט ארשום noStroke()
    כאן למעלה, כי הקו הזה נקרא stroke.
    נתחיל מחדש, ותראו, הקו נעלם!
  • 5:58 - 6:03
    מצוין. עכשיו זה נראה כמו תוכנית ציור אמיתית.
  • 6:03 - 6:13
    ניקח רגע צעד אחורה. אולי אתם סקרנים,
    מאיפה באות כל היכולות הקסומות האלו,
    כמו if ו-ellipse ו-draw?
  • 6:13 - 6:20
    הפקודות השימושיות האלו מובנות בתוך קאן אקדמי.
    יצרנו אותן, והחלק הכיף הוא ללמוד איך לשלב אותן
    לתוכניות שונות.
  • 6:20 - 6:29
    אם אתם ממש סקרנים, אנחנו משתמשים בשפה
    שנקראת JavaScript פה בקאן אקדמי.
    ג'אווה-סקריפט היא אחת השפות הכי פופולריות
    לכתיבת תוכניות בעולם, בייחוד באינטרנט.
  • 6:29 - 6:31
    כך שתהיו בחברה טובה.
  • 6:31 - 6:35
    אז יצרנו תוכנית ציור מגניבה, אבל זה לא אומר
    שסיימנו איתה לגמרי.
  • 6:35 - 6:39
    אתם יכולים לעצור את התוכנית
    ולשנות אותה איך שתרצו
  • 6:39 - 6:50
    אתם יכולים לשנות את גודל העיגול, את הצבע..
    וכשאתם מרוצים אתם יכולים לשמור את התוכנית
    בתור spin-off עם הכפתור הזה כאן למטה
    ותוכלו להראות אותה לכל מי שאתם רוצים.
  • 6:50 - 6:58
    אבל אני בטוחה שאתם יכולים לדמיין הרבה דרכים
    לעשות את התוכנית הזו טובה יותר, שאתם עדיין
    לא יודעים איך לעשות, דברים מעבר לפשוט
    לשנות צבעים וגודל..
  • 6:58 - 7:04
    אולי אתם רוצים לעשות אנימציה מגניבה עם
    פינגווינים, או משחק כיף, או פשוט משהו נחמד
    בשביל החברים והמשפחה שלכם.
  • 7:04 - 7:10
    ובכן, אתם במקום הנכון, כי אם תישארו איתנו,
    אתם בדרך ללמוד איך לעשות את כל הדברים
    האלו ועוד באמצעות קוד.
  • 7:10 - 7:15
    אז, אני מקווה שחשבתם שזה די מגניב.
    אם כן, אתם מוזמנים לתת לנו up vote.
  • 7:15 - 7:21
    לקח לנו רק כמה דקות ליצור את התוכנית הזאת,
    אבל למדנו קצת על איך קוד עובד.
  • 7:21 - 7:27
    בשיעורים הבאים נצלול פנימה ונלמד בדיוק
    איך מה שעשינו כאן עובד, כדי שזה לא יראה
    כל כך מסתורי.
  • 7:27 - 7:34
    נתחיל ממש בהתחלה ונבנה את הדרך מהבסיס.
    וממש עוד מעט, תאמינו או לא, תוכניות כזו
    ממש לא תהיה סיפור גדול.
  • 7:34 - 7:38
    אם תמשיכו איתנו, בקרוב תוכלו לעשות דברים
    הרבה יותר מתקדמים מהתוכנית הזו.
Title:
Sneak Peek (Video Version)
Description:

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
07:41

Hebrew subtitles

Revisions

Our website uses cookies for analysis purposes.