חומרי עזר למורה - מרכז המורים הארצי למדעי המחשב
משרד החינוך
המזכירות הפדגוגית – אגף
מדעים
הטכניון – מכון טכנולוגי לישראל
מרכז המורים הארצי למדעי המחשב
מינהלת מל"מ ,המרכז הישראלי
לחינוך מדעי טכנולוגי ע"ש עמוס דה שליט
פיתוח:
משתתפי קורס מורים מובילים לחטיבת הביניים תשע"ה
בהנחיית ד"ר דורון זוהר
יעוץ אקדמי :פרופ' עמירם יהודאי
פרויקט 7פיתוח חומרי עזר למורה להוראת מדעי המחשב בחטיבת הביניים ( 150עמודים)
מרכז מורים ארצי במקצוע מדעי המחשב .הפרויקט מבוצע עפ"י מכרז .9/7.2013
הפרויקט מבוצע עבור האגף לתכנון ופיתוח תוכניות לימודים ,המזכירות הפדגוגית ,משרד החינוך
יצא לאור במימון ובפיקוח המזכירות הפדגוגית ,אגף מדעים במשרד החינוך
ומינהלת מל"מ ,המרכז הישראלי לחינוך מדעי טכנולוגי ע"ש עמוס דה-שליט
© כל הזכויות שמורות למשרד החינוך
א .מודול מבוא למדעי המחשב בסביבת סקרץ' 2 ...........................................................................
הכרות עם הסביבה ,משתנים ומסרים – דפי תרגול לתלמיד .........................................
3
ביצוע חוזר מוגבל מראש – מערך שיעור 16 ..............................................................................
תרגילים לקראת משימה מסכמת – דפי תרגול לתלמיד 23 .................................................
מערך שיעור :תקשורת בין דמויות והעברת מסרים 34 ...........................................................
מאגר תרגילים 41 .........................................................................................................................................
הנדסה בסיסית באמצעות סקראצ' 63 .............................................................................................
שאלות תרגול לקראת משימה מסכמת 72 ......................................................................................
ב .מודול תכנות צד לקוח 82 .......................................................................................................................
מונה וצובר – מערך שיעור 83 .............................................................................................................
ציור על קנבס – יחידת לימוד עצמי 96 ........................................................................................
תרגילים לקראת משימה מסכמת 106 ............................................................................................
תרגילים לקראת משימה מסכמת 113 ...........................................................................................
דף מסכם – דורון זוהר ורחל פרלמן 125 .........................................................................................
תרגילי הכנה לקראת משימה מסכמת 137 .........................................
ג .מודול סייבר ואינטרנט 146 ......................................................................................................................
תרגילי חזרה 147 ........................................................................................................................................
1
הכרות עם הסביבה ,משתנים ומסרים – דפי תרגול לתלמיד ......................................
3
ביצוע חוזר מוגבל מראש – מערך שיעור 16 ...........................................................................
תרגילים לקראת משימה מסכמת – דפי תרגול לתלמיד 23 ..............................................
מערך שיעור :תקשורת בין דמויות והעברת מסרים 34 .......................................................
מאגר תרגילים 41 ...................................................................................................................................
הנדסה בסיסית באמצעות סקראצ' 63 ........................................................................................
שאלות תרגול לקראת משימה מסכמת 72 ..................................................................................
2
הכרות עם הסביבה ,משתנים ומסרים – דף לתלמיד
פיתוח :מני עבודי ,יעוץ :ד"ר דורון זוהר
סביבת :Scratchהתחל עוד היום לתכנת
תרגיל 1
לפניכם התסריט הבא:
להלן מספר שאלות .יש לענות במקום הנדרש.
תשובה
שאלה/הנחייה
איזו מצולע שרטטה דמות החתול?
יש לענות על השאלה ללא הרצת התסריט.
כעת ,העתיקו את התסריט לתוכנת .Scratch
מה ,לדעתך ,מטרת הפקודה
?
הסר מהתסריט את הפקודה
.
מה קרה כתוצאה מכך?
הסר את הפקודה
מה התוצאה?
.
3
תשובה
שאלה/הנחייה
מה לדעתך מטרת פקודה זו?
מה שטח המצולע שלפניך?
רמז :שטח ריבוע בעל צלע 𝑎 הוא 𝑆 = 𝑎2
אנו מעוניינים שדמות החתול תשרטט מצולע אשר
אורך צלעו קטן פי 2מאורך הצלע הקיים.
אילו שינויים נדרש לעשות בתסריט הקיים?
יש לשנות את התסריט כך שדמות החתול תשרטט
מלבן בעל היקף זהה לזה של הריבוע.
אילו שינויים נדרש לעשות בתסריט הקיים?
רמז :היקף ריבוע בעל צלע 𝑎 הוא 𝑎𝑉 = 4
היקף מלבן בעל צלעות 𝑏 𝑎,הוא 𝑏𝑉 = 2𝑎 + 2
מה מיקומה של דמות החתול בתום הרצת
התסריט?
יש לציין את מיקום הדמות ביחס לפינה בה
הדמות מצויה במערכת הצירים (ימנית עליונה,
ימנית תחתונה ,שמאלית תחתונה ,שמאלית
עליונה)
נניח ומיקומה של דמות החתול במערכת הצירים
בנקודה ( .)100,100מה יהיה מיקומה לאחר סדרת
ההוראות הבאות:
?
יש לציין קואורדינטות בלבד.
נניח ומיקומה של דמות החתול במערכת הצירים
בנקודה ( .)100,100מה יהיה מיקומה לאחר סדרת
ההוראות הבאות:
?
יש לציין קואורדינטות בלבד.
מה מיקומה של דמות החתול בתום הרצת
התסריט? יש לציין את מיקום הדמות ביחס לפינה
בה הדמות מצויה במערכת הצירים (ימנית
עליונה ,ימנית תחתונה ,שמאלית תחתונה,
שמאלית עליונה)
4
תשובה
שאלה/הנחייה
מעוניינים לשנות את מיקומה של דמות החתול
בסיום התסריט כך שתופיע בפינה השמאלית
העליונה של מערכת הצירים (לצד המצולע).
אילו שינויים נדרש לעשות בתסריט הקיים?
הצעד
שקול לצעד
בהנחה ודמות החתול מצויה בכיוון ימין (כפי
שנמצא בהתחלה) ,יש לשנות את התסריט כך
שיכלול צעדים מסוג "הסתובב" מאשר "פנה".
אילו שינויים נדרש לעשות בתסריט הקיים?
רמז :השינוי בצעד תלוי בכיוון אליו פונה דמות
החתול.
תרגיל 2
כתבו את התסריט הבא:
שרטטו בעזרת החתול מצולע מסוג משולש שווה צלעות .מיקומה של דמות החתול בתום התסריט
יהיה בקודקוד העליון של המשולש.
תזכורת :משולש שווה צלעות הוא משולש שכל צלעותיו שוות זו לזו .בנוסף ,כל זוויותיו שוות זו לזו
ועל כן כל אחת מהן היא בת 60מעלות ,ראו דוגמת האיור:
משולש שווה צלעות
5
משתנים :לא מה שהכרת
תרגיל 1
העתיקו את התסריט הבא
לסביבת העבודה:
לפניכם מספר שאלות.
יש לענות במקום הנדרש.
תשובה
שאלה/הנחייה
המשתנה sumמוגדר כמשתנה צובר .מדוע חשוב
לאתחל אותו בתחילת התסריט ל?0 -
רמז :הסירו את הפקודה
ובחנו את השינויים המתקבלים בתסריט לאחר
מספר הרצות.
לאור עליית מחירים כללית ,אתם מקבלים מאמא
בכל קנייה שטר של 100ש"ח (במקום 40ש"ח).
אילו שינויים יש לשנות בתסריט הקיים בכדי
לתמוך בדרישה זו?
כחלק מבדיקת תקינות הקלט ,הניחו כי לא ייתכן
עלות פריט בסופר נמוכה מ 1.99 -ש"ח.
אילו שינויים נדרש לעשות בתסריט הקיים בכדי
לתמוך בדרישה זו?
ברצוננו להכליל את האלגוריתם הקיים ולתמוך
בבדיקה של סכום הפריטים הכולל בהינתן מגבלת
6
תשובה
שאלה/הנחייה
סכום אשר אינה ידוע מראש.
אילו שינויים נדרש לעשות בתסריט הקיים בכדי
לתמוך בדרישה זו?
רמז :הגדירו משתנה חדש (זכרו לתת שם
משמעותי) ובצעו שינוי בהוראה אחת בלבד
באלגוריתם.
ברצוננו לשכלל את האלגוריתם כך שימנה את
מספר הפריטים שהתקבלו ברשימה.
אילו שינויים נדרש לעשות בתסריט הקיים בכדי
לתמוך בדרישה זו?
רמזים :יש לבצע את השינויים הבאים
.1הגדירו משתנה חדש אשר ימנה את מספר
הפריטים שהתקבלו .משתנה מסוג זה
מוגדר במדעי המחשב כמשתנה מנייה
( .)counterתפקידו למנות מספר מופעים
של אותו פריט או תהליך.
.2בתחילת התסריט ,אתחלו את המונה ל.0 -
.3הגדילו ב 1 -את המונה לאחר קליטה כל
פריט (חישבו היכן למקם את ההוראה
באלגוריתם):
אתם נדרשים ללכת תמיד לשלם בקופה המהירה.
ידוע כי קופה זו מוגבלת ל 10 -מוצרים בלבד.
אילו שינויים נדרש לעשות בתסריט הקיים בכדי
לתמוך בדרישה זו?
רמז :השתמשו בערך של counterבכדי לבדוק את
קיום התנאי
7
תרגיל 2
1
כתבו תסריט בשפת Scratchהמקבל מהמשתמש שני מספרים שלמים .על התסריט להדפיס את
סכום המספרים ,הפרשם (המספר הראשון פחות המספר השני) ,מכפלתם והחילוק שלהם.
לדוגמא :עבור שני הקלטים 10ו 5-יינתנו הפלטים הבאים (כל פלט במשך מספר שניות):
אתגר -תרגיל 3
כתבו תסריט בשפת Scratchהקולט שני מספרים עשרוניים :טמפרטורה ( )temperatureואחוזי
לחות.)humidity( 2
על התסריט לחשב את הטמפרטורה המורגשת ( )actualTemperatureולהדפיס אותה למספר שניות.
חישוב הטמפרטורה המורגשת נעשה על בסיס הטבלה הבאה:3
1
לקוח מתוך מאגר "עקרונות אלגוריתמיים בתכנות" (זוהר וצור)
2
הניחו כי אחוזי הלחות נקלטים כמספר ממשי שערכו בין 0ל . 1.0 -לדוגמה ,אם אחוז הלחות הוא , 60%המספר
שייקלט הוא 0.6
http://en.wikipedia.org/wiki/Heat_index 3
8
בכדי להקל על החישוב הניחו את אופן החישוב הבא:
אם הטמפרטורה נמוכה מ 27 -מעלות צלסיוס ,הטמפרטורה המורגשת נותרת ללא שינוי ,ללא קשר
לאחוז הלחות.
אם הטמפרטורה שווה או גבוהה ל 27 -מעלות צלסיוס וגם אחוז הלחות גבוה מ ,50% -הטמפרטורה
המורגשת היא:
)actualTemperature = temperature + temperature*(humidity-0.4
9
מבוא למסרים ()Messaging
טבלת מעקב עבור תסריט קיים
לפניך התסריט הבא.4
יש לענות על השאלות המופיעות לאחריו ללא הרצה בסביבת סקראצ'.
הוראה
תולי
מיאו
1
2
3
4
5
4
מבוסס על האלגוריתם המופיע באתרhttp://kesher- :
old.ort.org.il/scripts/index_info.asp?id=747654503&item=256167382
10
.1עקבו אחר התסריט עבור הקלטים הבאים (ניתן להעזר במחשבון).
שימו לב ,בשלב ראשון אין להריץ את התסריט.
אnum = 4 .
בnum = 5 .
גnum = 11 .
דnum = 17 .
תקינות קלט
(כן/לא)
ערכו של
num
הוראה 1
הוראה 2
הוראה 3
הוראה 4
הוראה 5
(אמת/שקר)
עבור קלט א
עבור קלט ב
עבור קלט ג
עבור קלט ד
.2האם ניתן לשנות את הוראה מס' 2של דמות החתול בהוראה שקולה/מקבילה אחרת?
להלן בנק של הוראות ,בחרו הוראה אחת והסברו מדוע היא עונה על המבוקש.
בנק הוראות:
א.
ב.
ג.
הסבר:
_________________________________________________________________
_________________________________________________________________
.3בתסריט להלן בחרנו להשתמש במשתנה numלבדיקת ניחוש שארית החלוקה .בכדי למנוע
בלבול ,החלטנו להוסיף משתנה נוסף ,בשם .resultהמשתנה resultישמור את ערכי תוצאות
החישוב לאחר קליטת .numלהלן השינוי המוצע .יש להשלים את החלקים החסרים בטבלה.
11
אות
הפקודה החסרה
א
(א)
ב
ג
ד
(ב )
ה
(ד )
(ג)
(ה)
ו
ז
(ו )
ח
.4על פי התסריט הקיים,
האם תמיד דמות החתול תנחש את תוצאת
השארית של כל מספר ראשוני גדול מ?3 -
(ז)
(ח)
רמז :מהי שארית החלוקה של כל מספר
ראשוני בריבוע ,הגדול מ ,3 -ב?12 -
מה תהיה שארית החלוקה אם מוסיפים
למספר זה ?15
רמז :הסתכל בטבלת המעקב בסעיף .1
תשובה :כן /לא
הסבר:
_________________________________________________________________
________________________________________________________________
.5אנו מעוניינים לשנות את התסריט כך שינחש תמיד ששארית החלוקה של המספר שנקלט
(ראשוני גדול מ )3 -יהיה .7
אילו שינויים יש לבצע בתסריט בכדי לתמוך בדרישה זו?
הסתכלו בתסריט המוצע ומלאו את החלקים החסרים.
12
(א)
(ב)
(ג)
(ד)
(ה)
(ו )
(ז)
(ח)
13
בניית משחק 5אבן-נייר-מספריים
אבן ,נייר ומספריים הינו משחק עתיק יומין (יש מאמינים שמשחק זה שוחק עוד בשנת 200לפני
הספירה ביפן).
כללי המשחק:
כל אחד מן השחקנים מסתיר יד אחת מאחורי גבו ובוחר לו אחת מתנוחות האצבעות המסמלות את
החפץ :אגרוף כאבן ,יד פרושה כנייר ושתי אצבעות כמספריים .אז קוראים יחדיו השניים" :אבן נייר
ומספריים ,המנצח בין השניים ,אחת שתיים שלוש" ,ומראים בו זמנית את הידיים .המנצח הוא זה
שהחפץ שלו גובר על החפץ של רעהו (אבן גוברת על מספריים ,מספריים גוברים על נייר ,נייר גובר על
אבן) .אם שני השחקנים מראים אותו חפץ חוזרים על הפעולה ,עד אשר אחד מהשחקנים מנצח.
הדרכה למימוש המשחק בסביבה סקראצ':
.1בתחילת המשחק ,נגדיר משתנה בשם statusלהציג את מצב המשחק .אילו ערכים אפשריים
יוכל לקבל המשתנה? (בכל פעם ערך אחד) .בחרו את האפשרות הנכונה ביותר.
אפשרות
ערכי status
א
start, end
ב
), paperמספריים( rock, scissors
ג
)תיקו( start, win, deuce
.2כיצד נשמור את בחירת השחקנים? הגדירו משתנים בעלי שמות משמעותיים.
.3אילו ערכים אפשריים יוכלו לקבל המשתנים? בחרו את האפשרות הנכונה ביותר.
אפשרות
ערכי שחקן א' /ב'
א
start, end
ב
), paperמספריים( rock, scissors
ג
)תיקו( start, win, deuce
.4כמה מצבי בחירה נדרשים כדי להכריע האם מדובר בניצחון או ש קיים תיקו במשחק?
____ _ מצבים
נסו למלא את הטבלה הבאה בטרם תענו .שימו לב כי תחילת הטבלה מולאה עבורכם.
5
מעובד על פי
http://he.wikipedia.org/wiki/%D7%90%D7%91%D7%9F_%D7%A0%D7%99%D7%99%D7%A8_%D7%
95%D7%9E%D7%A1%D7%A4%D7%A8%D7%99%D7%99%D7%9D
14
שחקן א
שחקן ב
מצב המשחק
זהות המנצח
נייר
נייר
תיקו
אף אחד
נייר
מספריים
ניצחון
שחקן ב
נייר
אבן
ניצחון
שחקן א
מספריים
נייר
מספריים
מספריים
מספריים
אבן
אבן
נייר
אבן
מספריים
אבן
אבן
.5אילו מסרים נדרש להגדיר?
חשבו על כללי המשחק ושלביו השונים:
התחלה :קליטה של בחירת השחקנים בסיבוב המשחק הנוכחי
ביניים :בדיקה של מצב המשחק לאחר שכל אחד מהשחקנים הציג את בחירתו
באותו סיבוב
סיום :הכרזה על ניצחון של אחד השחקנים או ביצוע משחק חוזר ,במקרה של תיקו
שם המסר
משמעות המסר
בחר_מצב
כל אחד מהשחקנים בוחר את המצב אותו הוא הולך להציג ליריב :אבן,
נייר או מספריים
.6על פי כללי המשחק ,כאשר יש תיקו ,יש לבצע סיבוב משחק נוסף.
האם ניתן להשתמש בלולאות "חזור עד ש "..או "לעולמים"?
האם קיימת דרך נוספת לומר לשני השחקנים כי מצב המשחק ( )statusהוא תיקו ועל כן
לבצע סיבוב משחק חדש? רמז :השתמש במסר.
.7לאור ההדרכה הנ"ל ,נסה לכתוב את התסריט למימוש המשחק בעצמך.
15
ביצוע חוזר – מוגבל מראש – מערך שיעור
פיתוח :ארנון לוי ,יעוץ :ד"ר דורון זוהר
קהל יעד
כיתה ז'.
מטרה
הכרת הרעיון והפקודות לביצוע חוזר מוגבל מראש.
מטרות ביצועיות :
התלמידים יזהו בעיות שפתרונן דורש ביצוע חוזר.
התלמידים יזהו ויסבירו לולאות בעלות ביצוע חוזר.
התלמידים יסבירו במילים שלהם את נכונות האלגוריתם המתבסס על ביצוע חוזר.
התלמידים יכתבו תסריט ,ובו ביצוע חוזר מוגבל מראש.
התלמידים יבצעו תיעוד של התסריט (האלגוריתם).
משך המפגש
שני שיעורי מעבדה רצופים.
ידע קודם נדרש
הכרת סביבת העבודה ,רקע ,תלבושות.
יכולת כתיבה הוראות תנועה סדרתיות ,פלטים ,ומראה.
יכולת הבנה והסברה של תסריט/אלגוריתם פשוט.
יכולת תיעוד תסריט/אלגוריתם.
דרכי הוראה/עבודה
תרגול אישי במעבדה
עמדת מחשב עם תכנת Scratch 2
ביצוע בקבוצה של תרגיל האתגר ( 2תלמידים)
חומרי עזר
חוברת -רעיונות ומושגים במדעי המחשב דרך Scratch
חוברת - Scratch 2רעיונות ומושגים במדעי המחשב דרך Scratch
חוברת עקרונות אלגוריתמיים בתכנות
אתר סקרטצ' – מכון ויצמן
אתר התקנת Scratch 2
אתר סקראץ צ'געון
אתר פרויקט סקראץ' ישראל
אתר Scratch
פייסבוק – סקראץ' – משחק ויצירה אינטראקטיבית
" הרב גוגל" – מנוע החיפוש גוגל
מבנה המפגש
הדגמת ביצוע חוזר מותנה מראש.
ביצוע משימת התנסות בשימוש בביצוע חוזר מותנה מראש .דרגת קושי "מתגלגלת".
16
ביצוע משימת אתגר.
דיון כיתתי – הצגת פעילויות.
מושגים נלמדים
ביצוע חוזר מוגבל מראש
דרכי הערכה
ביצוע משימות ההתנסות
ביצוע משימות אתגר – כתיבת תכנית הכוללת ביצוע חוזר מוגבל מראש
השתתפות פעילה בשיעור/דיונים
מהלך השיעור
.1הגדרת ביצוע חוזר מוגבל מראש " -חזרה על פעולה (אחת או יותר) מספר פעמים קבוע מראש".
הדגמת אלגוריתם במבצע פעולה מוגבלת מראש:
17
תוצאות הרצת התסריט:
.2
הקלידו את התסריט שבסעיף 1לעיל והשלימו את החסר בקטע הבא:
חוד העיפרון נוגע בבמה בציר ה– Xבנקודה_____ ובציר ה– Yבנקודה_____ .הלולאה
חוזרת על שתי פקודות 4פעמים – תנועת העט ושהייה .בכל מחזור העט זזה ימינה על ציר ה–
Xומציירת קו בגודל של ___ נקודות על ציר ה– Xומשתהה____ שניה .בסוף המחזור
הרביעי (האחרון) חוד העיפרון הגיע לנקודה ____ בציר ה– Xובציר ה– Yלנקודה ____.
הערה :בחירת רקע – "מערכת צירים" מאפשרת לנו לראות לאן וכמה זז העיפרון על הבמה.
(למורה :חוד העיפרון נוגע בבמה בציר ה– Xבנקודה 0ובציר ה– Yבנקודה . 0הלולאה חוזרת על שתי
פקודות 4פעמים -תנועת העט ושהייה .בכל מחזור העט זזה ימינה על ציר ה– Xומציירת קו בגודל של
50נקודות על ציר ה– Xומשתהה 1שניה .בסוף המחזור הרביעי (האחרון) חוד העיפרון הגיע לנקודה
200בציר ה– Xובציר ה– Yלנקודה ) 0
הסבירו בקצרה ובמילים שלכם מה עושה התסריט שכתבנו (רמז :ציור במקטעים)
______________________________________________________________
______________________________________________________________
.3שפרו את התסריט שבשאלה הקודמת כך שהעיפרון ישרטט קו אופקי מנקודה
X = -200 ; Y = 0
לנקודה ( X = 200 ; Y = 0חובה לתעד את התסריט והפקודות שבו).
תוצאת ההרצה של התסריט המבוקש:
18
.4המטלה :הוספת שנתה אחת על ציר ה– Xבצדו השמאלי.
התהליך :ציור ציר ה–( Xכמו בסעיף 3לעייל) והוספת שנתה על ציר Xבצדו השמאלי בגודל
של 50נקודות (קו אנכי מנקודה X =-175 ; Y =-25לנקודה .)X=-175 ; Y=25
להלן התוצאה הרצויה:
19
הוסיפו את פקודות הבאות לתסריט שבסעיף 3לעיל (בסופו)
בטבלה הבאה רשומות הפקודות שבהם השתמשנו לביצוע התסריט.
רשמו ליד כל פקודה (או אוסף פקודות) מה תפקידה ומה היא מבצעת.
הסבר
פקודה/ות
4
20
פקודה/ות
.5
הסבר
שנו והוסיפו את התסריט שבסעיף הקודם בכדי לצייר את כל השנתות החסרות על ציר ה– .X
הקפידו על תיעוד .להלן התוצאה הרצויה:
הערות :קיימות 7שנתות בציר Xבעלות אותו גובה ( 50נקודות על ציר ה – .)Yבכל שנתה המיקום
ההתחלתי והסופי של ציר Yאינו משתנה ,רק ציר Xגדל ב – 50נקודות.
21
שאלת אתגר (אפשר ורצוי לעבוד בזוגות) :שנו והוסיפו את התסריט שבסעיף הקודם בכדי לצייר
גם את ציר Yעם כל השנתית באותו היחס ( 7שנתות) .הקפידו על תיעוד.
להלן התוצאה הרצויה :
22
תרגילים לקראת משימה מסכמת – דף לתלמיד
פיתוח :מני עבודי ,יעוץ :ד"ר דורון זוהר
שאלה ראשונה
לפניכם תסריט:
א .עקבו אחר ביצוע התסריט עבור הקלט( 2,4,5,8 :משמאל לימין ,כ שהקלט הראשון )2
והשלימו את טבלת המעקב הבאה:
23
מספר
הפעם
sod
num1
num2
I
counter
אמירת
הדמות
ב .מה מבצע התסריט?
א .מחשב את סדרת סכום מכפלת המספרים num1ו num2 -מ 0 -עד ( countכולל)
והצגתו
ב .מחשב את סדרת סכום מכפלת המספרים num1ו num2 -מ 1 -עד ( countכולל)
והצגתו
ג .מחשב את סדרת סכום המספרים num1ו num2 -מ 0 -עד ( countכולל) והצגתו
ד .מחשב את סדרת סכום המספרים num1ו num2 -מ 1 -עד ( countכולל) והצגתו
ה .אף תשובה אינה נכונה
ג .מספר הפעמים בהם מתבצעת לולאת "חזור עד ש "..המתבצעת בתסריט:
א .הלולאה מורצת i+1פעמים
ב .הלולאה מורצת countפעמים
ג .הלולאה מורצת sodפעמים
ד .הלולאה מורצת num1+num2פעמים
ה .אף תשובה אינה נכונה
24
שאלה שנייה
א .עקבו אחר ביצוע התסריט עבור הקלט (משמאל לימין) 58,321,3421,9,29567 :וכתבו
את הפלט ,כלומר את אמירות הדמות
אמור what
num
58
321
3421
9
29567
ב .מה מבצע התסריט?
א .מחשב את סכום הספרות בכל מספר
ב .מחשב את מספר הספרות בכל מספר
ג .מחשב את מספר המספרים שגדולים מ10 -
ד .מחשב את מספר המספרים החיוביים
ה .אף תשובה אינה נכונה
25
שאלה שלישית
לפניכם תסריט חלקי .השלימו את החלקים החסרים בטבלה מטה:
(א)
(ב)
(ג)
(ד)
א
ב
ג
ד
26
שאלה רביעית
לפניכם תסריט המציג מצולע:
הציגו על הבמה
המצורפת את
המצולע
המתקבל.
27
שאלה חמישית
עצרת ( )Factorialמחושב כמכפלת כל המספרים הטבעיים מ 1 -עד למספר הנתון .מקובל לסמן את
סימן העצרת בסימן קריאה "!" ,כך שנחשב את הביטוי !𝑛 באופן הבא.𝑛! = 1 × 2 × … × 𝑛 :
לדוגמה:
!𝒏
1
2×1= 2
3×2×1=6
44 × 3 × 2 × 1 = 2
𝒏
1
2
3
4
לפניכם תסריט בו הדמות קולטת מספר טבעי (שלם וחיובי) 𝑛 .הדמות בתסריט מחשבת ואומרת את
ערך העצרת שלו.
28
א .עקבו אחר ביצוע התסריט עבור הקלט (משמאל לימין) 4,5,6,7 :וכתבו את אמירות
הדמות.
num
4
5
6
7
אמירת הדמות
ב .מה תפקידו של המשתנה factorבתסריט?
א .למנות את מספר הפעמים שלולאת "חזור" מתבצעת
ב .לצבור את סכום מכפלת המספרים הטבעיים החל מ 1 -עד num
ג .לקלוט את המספר לביצוע תוצאת העצרת
ד .אף תשובה אינה נכונה
ג .בתסריט הבא נפלו מספר שגיאות הממוספרות מ-א עד ג .הציעו דרך פתרון.
הצעה לפתרון השגיאה
א
(א)
ב
(ב)
ג
(ג)
29
הצעת פתרונות
שאלה ראשונה (סידרת פיבונאצ'י)
6
א .טבלאות המעקב:
עבור הקלט 2
מספר הפעם
sod
מצב התחלתי
1
2
1
3
num1
num2
i
counter
0
1
2
1
1
3
1
2
3
2
2
2
אמירת
הדמות
3
עבור הקלט 4
מספר הפעם
מצב התחלתי
1
2
3
4
num1
Sod
num2
0
1
2
3
5
1
3
5
8
1
1
3
5
8
i
1
2
3
4
5
אמירת
הדמות
counter
4
4
4
4
4
8
עבור הקלט 5
מספר
הפעם
מצב
התחלתי
1
2
3
4
5
6
Sod
1
3
5
8
13
num1
num2
i
counter
0
1
1
5
1
2
3
5
8
1
3
5
8
13
2
3
4
5
6
5
5
5
5
5
http://en.wikipedia.org/wiki/Fibonacci_number
30
אמירת
הדמות
13
עבור הקלט 8
מספר הפעם
Sod
מצב התחלתי
1
2
3
4
5
6
7
8
1
3
5
8
13
21
34
55
num1
num2
I
counter
0
1
2
3
5
8
13
21
34
1
1
3
5
8
13
21
34
55
1
2
3
4
5
6
7
8
9
8
8
8
8
8
8
8
8
8
ב .סדרת סכום המספרים num1ו num2 -מ 0 -עד ( countכולל) והצגתו (תשובה ג).
ג .הלולאה מורצת i+1פעמים (תשובה א).
שאלה שנייה
א.
אמור what
2
3
4
1
5
num
58
321
3421
9
29567
ב .מחשב את מספר הספרות בכל מספר (תשובה ב).
31
אמירת
החתול
55
שאלה שלישית
שאלה רביעית
הצורה הגיאומטרית המתקבלת היא משולש (ישר זוית ושווה-שוקיים).
32
שאלה חמישית
א .טבלת פלט:
num
4
5
6
7
אמירת הדמות
24
120
720
5040
ב .לצבור את סכום מכפלת המספרים הטבעיים החל מ 1 -עד ( numתשובה ב).
ג .הצעת פתרון:
33
מערך שיעור בנושא תקשורת בין דמויות והעברת מסרים
פיתוח :מרינה רבינוביץ' ,יעוץ :ד"ר דורון זוהר
משך השיעור:
שיעור כפול במעבדת מחשבים.
ידע קודם:
ייבוא ועריכת תלבושות לדמויות ,ריבוי דמויות ,לולאות.
מטרות השיעור:
התלמידים יכירו את מנגנון העברת מסרים ואת הצורך בהם.
התלמידים יגדירו מסרים עם שמות משמעותיים.
התלמידים יצרו מספר תלבושות לדמות – ע"י העתקה ועריכה.
התלמידים יגדירו ויפעילו תסריטים למספר דמויות שירוצו במקביל.
השיעור כולל פתרון תרגילים :התרגיל הראשון בהכוונה (בצמוד לדף העבודה שיחלוק לתלמידים והמצורף
בהמשך) ותרגיל בו פותרים התלמידים את המבוקש ביחיד או זוגות.
התרגיל הראשון מתאר את הסיפור הנודע של תחרות ריצה בין צב לארנב.
בתחילה נערוך שיחה קצרה על הסיפור ומוסר ההשכל שלו.
לפתרון בשלב ראשון יש לייבא רקע מתאים לסיפור שישמש כמקום התחרות.
כמו כן ,על התלמידים להוסיף את הדמויות הפועלות :דמות ארנב שקיימת במחיצת הדמויות של ,Animals
ואת דמות הצב שאותה יש לחפש ברשת.
הצעה :המורה יכין את דמות הצב והתלמידים יבצעו יבוא של דמות מוכנה.
כדי לשפר את איכות התסריט על התלמידים להכין
מספר תלבושות לדמות הארנב ,במהלך התרגיל:
הסבר תלבושות:
– Rabbit1הדמות הראשונית ממחיצת הדמויות.
תלבושת/דמות זו תשמש בסיס ליצירת הדמיית ריצת ארנב.
– Rabbit2יצירת תלבושת חדשה שניצור ע"י אפשרויות
עריכה ובה שינוי מצב רגליו של ארנב ליצירת הדמיית ריצה.
-Rabbit3יצירת תלבושת להפיכת כיוון .התלבושת
תשמש בזמן השיחה בין צב וארנב לפני תחילת התחרות.
-Rabbit4תלבושת לארנב במנוחה/שוכב.
נגדירה בעת שארנב נח וממתין לצב
(יצירת ע"י עריכת התלבושת השנייה).
34
בתחילת התרגיל מתקיימת שיחה בין ארנב לצב .כדי ליצור הדמיית דו-שיח בין הדמויות ,יש לתזמן את
האמירות בניהם .התזמון נעשה ע"י הגדרת ,העברת וקבלת מסרים .לצורך זה יש לפעול באופן הבא:
-
להגדיר אמירה לדמות המדברת.
-
להוסיף פקודה של "שדר מסר" ,ולתת שם משמעותי למסר .לרוב שם המסר יהיה תמצות האמירה.
בתסריט של הדמות המקבלת את המסר יש להוסיף את הפקודה "כשמתקבל מסר "...ולבחור מתוך רשימת
המסרים את המסר ששודר לעבר הדמות .אם הדמות שקיבלה את המסר עונה באמירה ,יש לחזור על
התהליך.
בשיעור יוסבר לתלמידים תהליך העברת המסרים ויודגמו הגדרות הפקודות הדרושות למסרים ראשונים.
בהמשך על התלמידים להגדיר באופן יותר עצמאי את העברת מסרים בין צב לארנב לצורך תיאור השיחה
ביניהם לפני תחילת התחרות ,בזמן התחלת התחרות ובסופה כאשר הצב מנצח והארנב מתעורר משנתו
ומבין שהפסיד בתחרות.
על התלמידים לתכנן את הריצה של ארנב ,תוך שינוי תלבושות להדמיית תזוזת רגליים באופן הבא (או דומה
לו):
כאשר ארנב מגיע לסוף המסלול יש להוסיף את הקטע הבא:
לעומת הארנב ,בתסריט הצב אין להגדיר תלבושות נוספות.
הצב יוצא לתחרות עם קבלת המסר "צא" .נשתמש בפקודת "גלוש:"...
35
בהגיעו לקו הסיום (מסגרת הבמה) הוא יכריז על ניצחונו וישדר מסר לארנב:
הערה :על התלמידים לתכנן את ריצת הארנב תוך כדי הגדרה ושינוי תלבושות מתאימות ותזמון ריצת הצב
כדי ליצור רושם שהצב הרבה יותר איטי מהארנב .בסוף התרגיל יש להגדיר אמירה מאוכזבת לארנב כאשר
הוא "מתעורר" ומבין שהפסיד בתחרות.
הצעה :יש להציג את פתרון התרגיל ,המלצה לתוצאה סופית כדי שיבינו את הרעיון המרכזי בעבודה זו.
לאחר שקבוצת תלמידים מסיימת ניתן להציג את התרגילים השונים ולבקש מהמציגים להסביר את הרעיון
האלגוריתמי.
זמן ביצוע התרגיל :כ 50-60 -דקות.
תרגיל שני – הגדרת תסריט לתיאור שיחת דמויות.
מטרת התרגיל :תרגול נוסף בנושא העברת מסרים .על התלמידים לייבא רקע מתאים ,לייבא ולמקם את
הדמויות .על התלמידים לתכנן את תוכן השיחה ולהגדיר מסרים בהתאם לאמירות בשיחה.
משך התרגיל כ 20-דקות.
תרגיל זה יוגדר כבסיס לשיעורי הבית.
תרגיל לשיעורי בית – שידרוג תרגיל שיחת הדמויות ע"י הוספת דמות חדשה שתגיע בהליכה אל
מקום/ספסל עליו יושבות הדמויות .על הדמות להשתלב בשיחה.
36
דף תרגילי מעבדה בנושא תקשורת בין דמויות והעברת מסרים
תרגיל
המכירים את הסיפור של הצב והארנב?
לפניכם מספר משימות בהן נגדיר תסריט המדמה שיחה ותחרות בין השניים
.1הגדירו את הרקע המתאים – בחרו רקע מתוך מחיצה , Outdoorsלדוגמה .gravel-desert
.2הוסיפו דמויות של ארנב וצב (במידה והדמויות לא קיימות במאגר הדמויות של הסביבה ,ניתן לחפש
תמונות מתאימות באינטרנט ולייבא אותן).
התאימו את גודל התמונות לרקע.
.3הגדירו לארנב תלבושת נוספת בשם "עומדת" ,ע"י ציור והזזת רגליו .תלבושת זו נועדה ליצור את
המשך האנימציה של ריצה .שמרו את התלבושות בשמות rabbit1ו. rabbit2-
.4העתיקו את התלבושת החדשה "העומדת" וערכו אותה בסיבוב של 180מעלות .שמרו את התלבושת
בשם .rabbit3
.5הגדירו תסריטים ראשונים לכל דמות:
צב:
ארנב:
.6כעת ,נוסיף מסרים כדי ליצור הדמיית שיחה בין ארנב לצב.
על הצב לענות לברכת השלום של ארנב לאחר קבלת המסר ממנו .לצורך כך נוסיף את הפקודה:
37
בלחיצה על החץ הפנימי תתקבל התיבה הבאה:
התיבה מאפשרת יצירת מסר חדש באמצעותו ניתן לתקשר בין הדמויות .יש לתת שם משמעותי למסר
כדי שבהמשך נוכל להבדיל בין המסרים השונים.
הגדירו את שם המסר "שלום צב".
בתסריט צב נוסיף פקודה חדשה "כשמתקבל מסר שלום צב" ונמקם אותה לפני אמירת השלום של הצב,
בצורה הבאה:
ונשדר מסר "שלום ארנב".
נחזור לתסריט של הארנב ונוסיף פקודה "כשמתקבל מסר שלום ארנב" ונוסיף את האמירה" :צב ,אתה
רוצה לעשות איתי תחרות ריצה?" באמצעות שדר מסר בשם "רוצה תחרות" לארנב.
בתסריט של צב נוסיף פקודה "כשמתקבל מסר רוצה תחרות" ונוסיף גם אמירה "כן ,אתחרה אתך"
ונשדר מסר בשם כזה לארנב.
.7הוסיפו את הפקודות הדרושות לתסריטים של הארנב והצב כדי לתאר את המשך השיחה ביניהם.
הקפידו על שידור וקבלת מסרים עם שמות מתאימים.
.8בסיום השיחה בין ארנב לצב ,לתסריט של ארנב תוסיפו את הפקודות הבאות:
שנה לדמות ( rabbit2כדי שהארנב יסתובב לכיוון הפוך).
קפוץ לנקודה y=-110 ,x=-200
.9הוסיפו לתסריט של ארנב פקודות כדי שיודיע "היכון ...צאאאא!!!" ,בשלוש אמירות נפרדות ,ובסופן
ישדר מסר "צא" ויתחיל לרוץ .דאגו לשנות ולהתאים את התלבושות של הארנב בין rabbit1ל-
rabbit2כדי ליצור את תנועת הזזת רגליים תוך כדי הריצה.
38
לקראת סיום הריצה הארנב יודיע "עד שהצב האיטי הזה יגיע אספיק קצת לנוח" .תיצרו תלבושת נוספת
לארנב – rabbit4סובבו את הארנב למצב שכיבה וציירו לו עיניים ופה סגורים – ארנב נח .ניתן גם
קצת להזיז אותו מטה.
.10לתסריט של הצב הוסיפו פקודות שיאפשרו לצב גלישה במשך 40שניות לנקודה ,x=190
.y=-120בהגיעו למסגרת עליו להודיע "ניצחתי" ולשדר מסר בשם כזה לארנב.
הארנב ,בתורו ,עם קבלת המסר הזה ,אמור להתעורר ,כלומר יש לשנות לו תלבושת בחזרה ל. rabbit2-
ניתן להוסיף לו אמירה מאוכזבת כלשהי.
הערה :ניתן לשנות את רקעי מסלול הריצה של צב וארנב.
.11הריצו את התחרות ושמרו את הקובץ בשם "צב וארנב".
תרגיל 2
.1בחרו רקע של ספסל ומקמו עליו שתי דמויות של חברות או חברים כגון הדוגמה הבא:
.2בחרו שם כרצונכם לכל אחת מדמויות שהגדרתם.
.3חברו תסריטים לכל אחת מדמויות כך שיתארו את השיחה ביניהן או בניהם בנושא כלשהו כגון
משחק/קניות /בילויים /שעורי בית תוך הגדרת והעברת מסרים.
.4הריצו את השיחה ושמרו את הקובץ בשם "שיחת דמויות ."1
שעורי בית
לתסריט של שיחת הדמויות הוסיפו את שינויים הבאים:
.1תוסיפו דמות חדשה שתצטרף לשתי הדמויות (למשל בשיחת בנות דמות חדשה שתעמוד בניהן).
.2הגדירו לדמות החדשה שם ותלבושת נוספת.
.3תוסיפו פקודות שיאפשרו את הצטרפות הדמות החדשה לשיחה.
.4שמרו את השינויים בקובץ "שיחת דמויות ."2
39
הצעת פתרון תרגיל ראשון:
.1התסריט של הארנב -
.2התסריט של הצב-
40
מאגר תרגילים
פיתוח :מורים מובילים ,יעוץ :ד"ר דורון זוהר
שאלה ( 1טטיאנה קגן)
לפניך תסריט שניתן לדמות החתול:
א) ציירו את המסלול (הדרך) שהולך החתול
במהלך ביצוע תסריט
ב) לאיזה כיוון פונה החתול בסוף התסריט?
.1ימינה ()90
.2מעלה ( )0
.3
שמאלה ()-90
.4מטה ()180
ג) כמה צעדים יצעד החתול מתחילת ביצוע התסריט עד לסיומו:
.1
100
.2
200
.3
50
.4
150
41
ד) אילו הוראות יש להוסיף לתסריט כך שניתן יהיה לראות על הבמה את מסלול ההליכה
של החתול מתחילת התסריט עד סיומו (בצבע כלשהו)?
_____________________________
_____________________________
ה) אחרי איזו הוראה בתסריט הקיים צריך להוסיף את הוראות שהגדרת בסעיף קודם?
_____________________________
ו) בתחילת התסריט :מהי נקודת הציר על הבמה בה נמצא החתול?
_____________________________
ז) בסיום התסריט :מהי נקודת הציר על הבמה בה נמצא החתול?
_____________________________
שאלה ( 2טטיאנה קגן)
לפניך תסריט שניתן לדמות החתול:
א .באיזו הוראה תחליפו את ההוראות הבאות בלי לפגוע בתסריט?
42
.1בהוראה "זוז 100צעדים".
.2בהוראה "זוז 200צעדים".
.3בהוראה "זוז 150צעדים".
.4אי-אפשר להחליף את ההוראות.
ב .ציירו את המסלול (הדרך) שהולך החתול במהלך ביצוע תסריט:
שאלה ( 3רווית ברקוביץ-אשר)
לפניכם תסריט.
א .עקבו אחר התסריט ושרטטו על מערכת הצירים את הצורה המתקבלת.
ב .איזו אות מתקבלת?
____________
43
שאלה ( 4רווית ברקוביץ-אשר)
כתבו תסריט בו הדמות משרטטת פפיון משני משולשים
ישרי זווית כמוצג באיור הבא:
שאלה ( 5רווית ברקוביץ-אשר)
כתבו תסריט בו הדמות משרטטת בית כמוצג באיור הבא:
שאלה ( 6רווית ברקוביץ-אשר)
לפניכם שני תסריטים שכתבו אמנון ותמר:
תמר
אמנון
א .תמר טוענת ששני התסריטים זהים .אמנון טוען ששני התסריטים שונים .מי צדק
מביניהם? נימוק.
הסבירו בקצרה מה מבצע כל תסריט.
44
שאלה ( 7ענת לאופר)
פקודה מוחלטת היא פקודה שתוצאתה אינה תלויה במצב הקיים של הדמות
ואילו פקודה יחסית היא פקודה שתוצאתה תלויה במצב הקיים של הדמות.
רשמו לצד כל פקודה אם היא פקודה מוחלטת הוא פקודה יחסית.
א.
ב.
ג.
ד.
ה.
ו.
ז.
ח.
ט.
שאלה ( 8אילנה קלמנוביץ)
לפניכם מספר הוראות מארגז הכלים עט ותנועה .לצד כל הוראה הסבירו בקצרה את תפקידה.
הסבר
פקד
א.
ב.
ג.
ד.
ה.
ו.
ז.
45
שאלה ( 9אילנה קלמנוביץ)
כתבו תסריט בו דמות החתול משרטטת על הבמה את האות "ב".
(אילנה קלמנוביץ)
שאלה 10
יונתן תכנת תסריט בו דמות החתול מציירת על הבמה ריבוע בו צלע בת 150צעדים .לפתע הגיע איתן
אחיו הקטן ובלגן לו את כל הפקודות.
אנא עזרו ליונתן המיואש לסדר את הוראות התסריט כך שהתסריט יבצע את המבוקש.
שאלה ( 11אילנה קלמנוביץ)
משּושה ) (Hexagonהוא מצולע בעל שש צלעות .סכום כל זוויותיו הפנימיות הוא 720מעלות .כל
משושה הוא בעל תשעה אלכסונים שיוצרים שישה משולשים.
הצרפתים מכנים לעתים את צרפת" המשושה" בגלל צורתה שנראית כמו משושה.
()14.6.15 ,https://he.wikipedia.org/wiki/%D7%9E%D7%A9%D7%95%D7%A9%D7%94
כתבו תסריט כך שהדמות תסרטט את המשושה הבא (במשושה משוכלל כל הצלעות שוות זו לזו וכל
הזויות שוות ל.120° -
46
שאלה ( 12אילנה קלמנוביץ)
לפניכם שלושה תסריטים (א-ג) ושלושה פלטים .התאימו (העבירו קו) בין התסריט לבין הפלט:
תסריט א'
תסריט ב'
תסריט ג'
שאלה 13
לפניכם טבלה בת שלושה טורים (א-ג) .בשני הטורים הראשונים הגדרות שונות ללולאות שונות .בטור
ג' צילום מבנה הלולאה בסביבת סקרצ' .התאימו (העבירו קוים) את שלוש הטורים כך שיענו על
הגדרת אותה לולאה.
טור א
מבנה זה גורם לגוף
הלולאה (בלוק
טור ב
ביצוע חוזר מותנה
הפקודות) להתבצע שוב
ושוב ללא הפסקה.
הלולאה מתבצעת כל
עוד התנאי/הזקיף
מחזיר ערך "אמת".
ביצוע חוזר אינסופי
47
טור ג
טור א
גורמת לביצוע של בלוק
הפקודות מספר פעמים
קבוע
בלוק הפקודות בלולאה
מתבצע שוב ושוב עד
שהתנאי הופך ל-
"אמת".
טור ב
טור ג
ביצוע חוזר מוגבל מראש
ביצוע חוזר אינסופי משולב
בדיקה
שאלה 14
לפניכם תסריט שניתן לדמות לעט בסביבת סקראצ' .
שימו לב כי כל משבצת שווה ל 30-צעדים בציר ה x-ו 30-צעדים על ציר ה.y-
סמנו על הבמה את המסלול של הדמות וענו על השאלות הבאות:
א .מקמו את העט ע"י סימון האות Aבנקודת ההתחלה של התסריט.
ב .מה יקרה על הבמה כל עוד לא התקבל קלט מהעכבר?
______________________________________
ג .שרטטו על הבמה את מסלול הדמות אם עכבר נלחץ בנקודת הציר .-30 ,-30
48
שאלה ( 15שלמה סרוק)
(שאלה 5מתוך בחינת בגרות יסודות מדעי המחשב ,קיץ תש"ע)
כתבו תסריט בסביבת סקראצ' הקולט זוגות של מספרים שלמים .לכל זוג שנקלט תחושב מכפלתם
ותיצבר (תיסכם) מכפלה זו.
הקליטה תסתיים כאשר ייקלט זוג מספרים שהמכפלה שלהם היא אפס.
התסריט ידפיס את סכום כל המכפלות.
שאלה 16
כתבו משחק בסביבת סקראצ' המגריל מספרים שלמים בין 1ל .100על המשתמש לנחש את המספר
המוגרל במינימום ניחושים.
בכל ניחוש יוצגו למשתמש אחת משלוש ההודעות הבאות:
-
המספר שבחרת גדול מדי ,נסה שוב.
-
המספר שבחרת קטן מדי ,נסה שוב.
-
כל הכבוד!!! גילית לאחר countניחושים!
בסיום המשחק ניתנת אפשרות למשתמש או חברו לשחק שוב.
אם תשובתו חיובית ,על המחשב להגריל מספר חדש ולהתחיל את המשחק מההתחלה.
49
הנה כמה דוגמאות למסכים אפשריים:
שאלה 17
השלימו את מיקום הדמות בכל אחד מנקודות הציר הבאות:
א.
y=50
x=-100
ב.
y=50
x=100
ג.
y=0
ד.
y=-50
ה.
y=-100
x=150
x=100
x=-50
תשובה
תסריט
1
50
תשובה
תסריט
2
3
4
5
51
שאלה ( 18אגי מנדל)
תזכורת
תסריט בלולאה
אינסופית
תסריט בלולאה עם תנאי המשך
ביצוע
לולאה אינסופית -
התסריט מתבצע כל
הזמן ,והלולאה
תפסיק אם נפסיק
לולאה עם תנאי -התסריט מתבצע
כל זמן שהתנאי מתקיים .כאשר
התנאי מפסיק להתקיים ,הלולאה
תפסיק להתבצע.
את התסריט ב-
לדוגמה:
תסריט בלולאה עם תנאי עצירה
לולאת חזרה עם תנאי .הלולאה
מתבצעת עד שהתנאי כלשהו
מתקיים ואז התסריט מפסיק
להתבצע.
לדוגמה:
שימו לב כי בלולאות לעולמים ניתן להכיל לולאות רק בגוף הלולאה ולא אחריה.
א) לפניכם התסריט הבא:
ענו על השאלות הבאות:
מהו הערך ההתחלתי של המשתנה ? counter
___________________________________
מה השינוי בערכי המשתנה counterבכל סיבוב ?
_____________________________
מה תפקידו של משתנה ? counter
____________________________________
מה הדמות תאמר בסוף התסריט אם נקלטו הערכים ? -3 ,12 ,7 ,5
__________________________________________________
האם מספר סיבובי הלולאה ידוע? נימוק_______________________________________ .
מה מטרת התסריט________________________________________________ :
52
ב) לפניכם תסריט נוסף
ענו על השאלות הבאות:
מהו הערך ההתחלתי של המשתנה ? counter
___________________________________
מה השינוי בערכים של המשתנה counterבכל
סיבוב ? _________________________
מה תפקידו של המשתנה ? counter
____________________________________
באיזה סוג תנאי משתמשים בתסריט זה?
_____________________________________
מה הדמות תאמר בסוף התסריט אם נקלטו הערכים ? -3 ,12 ,7 ,5
_______________________________
האם מספר סיבובי הלולאה ידוע? נימוק_______________________________________ .
מה הבדל ,אם יש כזה ,בין שני התסריטים? הסבר.
_____________________________________________________________________________
_____________________________________________________________________________
שאלה ( 19אלה לב)
לפניך שני תסריטים:
תסריט א'
א.
תסריט ב'
האם שני התסריטים יעצרו כאשר ערכו של numיהיה ?10
אמת /שקר
הסבר ___________________________________________________
53
ב.
כמה פעמים תתבצע הלולאה שבתסריט א' ?
10 .1פעמים
.2אינסוף פעמים
.3עד שייקלט מספר שאיננו 10
.4עד שייקלט 10
ג.
כמה פעמים תתבצע הלולאה שבתסריט ב' ?
10 .1פעמים
.2אינסוף פעמים
.3עד שייקלט מספר שאיננו 10
.4עד שייקלט 10
ד.
אם נאתחל את numבערך התחלתי 10כיצד ,אם בכלל ,תשתנה תשובתך בסעיפים
ב ___________________
ג ___________________
שאלה ( 20מושית וולץ)
רונן מעוניין לארגן מסיבת חנוכה לחברים ולחברות בכיתה .כדי שיוכל לרכוש כיבוד למסיבה החליט
לאסוף כסף מחבריו.
לשם כך כתב רונן תסריט על פי הרעיונות הבאים:
כל חבר או חברה המעוניינים להשתתף במסיבה נשאל השאלה "כמה כסף יש לך".
את תשובתם יקיש כקלט .לבסוף על התסריט להדפיס את סכום הכסף שנצבר (נאסף).
כיוון שמספר המשתתפים
אינו ידוע הקיש רונן את
סכומי הכסף השונים
ובסיום הקליטה הקיש
את המספר .0
לפניכם התסריט:
כשהריץ רונן את התסריט
לא קיבל את התוצאה הנכונה.
בתסריט נפלו 3טעויות.
אנא עזרו לרונן לאתר את הטעויות
כדי שיוכל להריץ את התכנית,
לסכום ולדעת כמה כסף
מוקצה לרכישת כיבוד.
54
המלצת תיקון
הטעות והסברה
1
2
3
הצעות פתרון לתרגילים
הצעת פתרון לשאלה :1
א)
ב) תשובה נכונה - 4מטה ()180
ג) 200צעדים
ד) "עט מטה" ו" -קבע צבע עט".
ה) אחרי הוראה "קפוץ אל"0:y 0:x-
ו) בתחילת התסריט חתול בנקודת הציר (.)0,0
ז) בסיום התסריט חתול חוזר לנקודת ההתחלה ,כלומר לנקודת הציר (.)0,0
הצעת פתרון לשאלה :2
א .בהוראה "זוז 200צעדים".
ב.
הצעת פתרון לשאלה :3תתקבל צורת האות ד
הצעת פתרון לשאלה :4
55
הצעת פתרון לשאלה :5
הצעת פתרון לשאלה :6
א .תמר צודקת ,היות וההוראות הסתובב 90מעלות וזוז 150צעדים חוזרות על עצמן ולכן יעיל יותר
להכניסן ללולאה.
ב .שני הסריטים יוצרים ריבוע.
הצעת פתרון לשאלה :7
יחסית
א.
ב.
יחסית
ג.
יחסית
קבועה
ד.
ה.
יחסית
ו.
קבועה
ז.
ח.
ט.
י.
קבועה
קבועה
קבועה
קבועה
56
הצעת פתרון לשאלה :8
הסבר
פקד
א.
הגדלת/העלאת עובי העט ב5-
ב.
קפיצה/מעבר של הדמות לנקודה ( )0,0שעל הבמה
ג.
בחירת צבע אדום בעזרת מכחול מתוך ערכת
צבעים
ד.
סיבוב ל 150מעלות שמאלה
ה.
בחירת עובי ראשוני של עט ב1-
ו.
שינוי ערך של הנקודה בציר ה X-ב50-
ז.
שיכפול דמות
הצעת פתרון לשאלה :9
57
הצעת פתרון לשאלה :10
התסריט המסודר
התסריט המבולגן
כאשר לוחצים על
נקה
עט מטה
חדור 4פעמים
זוז 150צעדים
הסתובב 90מעלות שמאלה
עט מעלה
הצעת פתרון לשאלה :11
58
הצעת פתרון לשאלה :12
תסריט א'
הצעת פתרון לשאלה :13
טור א
מבנה זה גורם לגוף הלולאה
(בלוק הפקודות) להתבצע שוב
ושוב ללא הפסקה.
הלולאה מתבצעת כל עוד
התנאי/הזקיף מחזיר ערך
"אמת".
תסריט ב'
טור ב
ביצוע חוזר אינסופי
ביצוע חוזר אינסופי
משולב בדיקה
גורמת לביצוע של בלוק
הפקודות מספר פעמים קבוע.
ביצוע חוזר מוגבל
מראש
בלוק הפקודות בלולאה
מתבצע שוב ושוב עד שהתנאי
ביצוע חוזר מותנה
הופך ל"-אמת".
59
תסריט ג'
טור ג
הצעת פתרון תרגיל :14
הצעת פתרון לשאלה :15
60
הצעת פתרון לשאלה :16
הצעת פתרון לשאלה :17
תסריט מס'
תשובה
1
ב
2
ד
3
א
4
ה
5
ג
61
הצעת פתרון לשאלה :19
א .שקר
ב .עד שייקלט 10
ג .עד שייקלט מספר שאיננו 10
הצעת פתרון לשאלה :20
הטעות והסבר
תיקון
ההוראה "קבע sumל "0-נמצאת בתוך הלולאה
יש להעביר אותה לפני הלולאה
ההוראה "שנה ערך sumב "1-סופרת כמה חברים באים
יש לשנותה ל:
למסיבה במקום לסכם את סכום הכסף.
"שנה sumב"money -
הוראות הפלט מציגות את כל סיכומי הביניים.
יש להעבירן לאחרי הלולאה.
התסריט לאחר תיקונים:
62
הנדסה בסיסית באמצעות סקראצ'
פיתוח :ד"ר דורון זוהר
הנחיות :
בכל התסריטים מטה נעשה שימוש בדמות נקודה העוברת מנקודת ציר אחת על הבמה לנקודת ציר
אחרת .ההוראות נכתבו באנגלית כחלק מרעיון עתידי לקדם את הלימוד הסביבה בשפה זו.
ברוב התסריטים קיים שימוש במספר הוראות:
הוראת set pen color to 200מגדירה את העט בצבע אדום.
ההוראה point in direction 90מפנה את הדמות להתחיל בצד ימין.
הוראות העט clearמנקה את הבמה pen down/up ,מעלה ומורידה את העט על הבמה.
ההוראה go to x:.. y:..מעבירות את הדמות מהנקודה הנוכחית בה נמצאת הדמות לנקודת הציר על
הבמה.
בעת התרגול ,באפשרותכם להגדיר מספר דמויות ,ולהגדיר מספר צורות על הבמה בו זמנית.
כדי לבחון את התוצאות מומלץ להיעזר בפקודת waitולבדוק לאן נעה הדמות לאחר כל הוראה.
לשמירת התסריטים פתחו תיקייה בשם 'צורות הנדסיות' ושמרו כל תסריט בשם משמעותי לצורה
המתקבלת (יש לפתוח את התיקייה גם אם בחרתם להגדיר מספר צורות בתסריט אחד .בהמשך נבקש
להגדיר צורות נוספות).
מתחילים לעבוד.
לפניכם הגדרות של מספר צורות הנדסיות.
בכל תסריט הוגדרו חלקי הוראות ,השלימו ,הריצו ובדקו הא התוצאה שהתקבלה זהה לצילום הבמה
בצד התסריט.
63
משולש הוא מצולע בעל שלוש צלעות.
השלם את המספרים החסרים.
משולש שווה שוקיים הוא משולש ששתיים מצלעותיו שוות זו לזו .הצלעות השוות נקראות שוקיים
והצלע השלישית נקראת בסיס.
א .השלם את המספרים החסרים.
ב .השלם את המספרים החסרים.
64
משולש ישר זווית הוא משולש בעל זווית ישרה .במשולש זה ,שתי הצלעות שכולאות את הזווית
הישרה נקראות ניצבים ,והצלע שמול הזווית הישרה נקראת יתר.
השלם את המספרים החסרים:
ריבוע הוא מרובע משוכלל בעל התכונות:
כל צלעותיו שוות ,כל הצלעות המקבילות שוות ,כל הזוויות בריבוע הן זוויות ישרות ולכן כל הזוויות
שוות ,האלכסונים של ריבוע שווים זה לזה ,מאונכים זה לזה וחוצים זה את זה (לזוויות בנות 45
מעלות).
השלם את המספרים החסרים:
65
מעוין הוא מצולע בן ארבע צלעות השוות באורכיהן.
כל ריבוע הוא מעוין ,אך לא כל מעוין הוא ריבוע.
השלם את המספרים החסרים.
מלבן הוא מרובע שבו כל הזוויות ישרות .אורכו של המלבן מוגדר כאורך של צלע מזוג הצלעות
הארוכות יותר ,ורוחבו של המלבן מוגדר כאורך של צלע מזוג הצלעות הקצרות יותר.
השלם את המספרים החסרים.
66
מעגל הוא המקום הגאומטרי של כל הנקודות במישור שמרחקן מנקודה מסוימת ,המרכז ,קבוע.
המרחק של כל נקודה מהמרכז נקרא רדיוס (בעברית מחוג).
מה ההבדל בין עיגול למעגל ?
השלם את המספרים החסרים.
לפניכם מספר תסריטים המציירים על הבמה עיגולים בגדלים שונים.
השלימו את הפרטים החסרים ,הריצו את התסריטים ובדקו את התוצאות.
שני עיגולים .השלם את המספרים החסרים.
67
המלצות פתרון
משולש
משולש שווה שוקיים
א.
ב.
68
משולש ישר זווית
ריבוע
מעוין
69
מלבן
מעגל
ההבדל בין מעגל לעיגול -
70
השלמת העיגולים השונים:
שני עיגולים
71
דוגמאות לשאלות משימה מסכמת
פיתוח :ד"ר דורון זוהר
שאלה ראשונה
לפניכם מספר שאלות רב בררה ,הקיפו את התשובה הנכונה ביותר:
א.
.1
.2
.3
מבצעת:
ההוראה
הדמות תקפוץ לראשית הצירים.
הדמות תקפוץ מעלה ומטה בהתאם למיקומה העכשווי.
הדמות תקפוץ למרכז הבמה.
.4
שכפול השמות והעברת לנקודת הציר x:0, y:
ב.
.1
.2
.3
.4
.5
מבצעת:
ההוראה
שיכפול חתימה.
שיכפול דמות.
שיכפול רקע.
שיכפול הוראה.
סגירת הקובץ ע"י חתימת המתכנת.
ג .ההוראה
.1
.2
.3
.4
מבצעת:
מחיקת הדמות מהבמה.
איתחול וניקוי הקובץ.
מנקה את כל ההוראות.
מאתחלת את הבמה.
ד .ההוראה
מבצעת:
.1
.2
שליחת הודעת SMSבין דמות אחת לאחרת.
שליחת הודעה לבמה.
.3
.4
שליחת הוראה בודדת או סדרת הוראות לדמות.
שליחת מסר בין הוראות.
72
שאלה שנייה
לפניכם שני תסריטים שכתבו ע"י עמי ותמי:
תמי
עמי
א .עמי טוען ששני התסריטים שונים .לעומתו תמי טוענת ששני התסריטים זהים .מי צודק
או טועה?
.1עמי ותמי צודקים.
.2עמי צודק ,תמי טועה.
.3תמי צודקת ,עמי טועה.
.4עמי ותמי טועים.
ב .השלימו את התיאור לכל אחד מהתסריטים:
בתסריט של עמי מתקבלת הצורה ההנדסית _________
הסבר
_________________________________________________________________
בתסריט של תמי מתקבלת הצורה ההנדסית _________
הסבר
_________________________________________________________________
73
שאלה שלישית
בבית הספר כל תלמיד או תלמידה מתלמידי כיתה ז' העושה מעשה טוב מקבל כוכב .תלמידים
הצוברים מעל 15כוכבים זוכים לשבחים מהמורה.
כל אחד ואחת יכולים לאסוף כוכבים בכל אחד מימי השבוע ובסוף יום שישי המורה מציינת את
שמות התלמידים והתלמידים שזכו לשבחים.
לחישוב כולל של כל הכוכבים שקיבל רונן במהלך השבוע הוא בנה את התסריט הבא:
א .מה תפקידו של המשתנה _________________________ sumStars
ב .מה תפקידו של המשתנה ____________________________ starts
ג .האם יש צורך לאפס את מתשנה ? startsכן /לא (הקף/י בעיגול)
הסבר _____________________________________________________
ד .בתסריט נפלה טעות .ערכו טבלת מעקב והסבירו בקצרה את הטעות וכצד יש לתקנה.
_________________________________________________________________
_________________________________________________________________
ה .רווית טוענת שאין צורך במשתנה startsואפשר היה להגדיר את התסריט הבא:
האם רווית צודקת? הסבירו בקצרה.
_________________________________________________________________
_________________________________________________________________
ו .רונן מבקש להוסיף פלט האם מגיע לו שבחים מהמורה.
לפניכם מספר תנאים ,איזה מבין התנאים תקין ואיזה לא ,הסבירו בקצרה.
74
תנאי
הסבר
אפשרות
1.
2.
3.
4.
5.
המלצת פתרון למורה:
תסריט זה מכיל את התשובות לרוב הסעיפים.
75
שאלה רביעית
לפניכם תסריט:
מטרת הקטע לקלות מספר ציון בין 0ל( 100-כולל).
בתסריט נפלה טעות.
א .הסבירו בקצרה את הטעות
_________________________________________________________________
ב .לתיקון תנאי הכניסה הציעו תלמידי הכיתה מספר תנאים.
סמנו Vליד כל אפשרות נכונה ולצד כל תנאי שגוי הסבירו בקצרה את הסיבה.
תנאי
הסבר
אפשרות
1.
2.
3.
4.
5.
6.
7.
76
שאלה חמישית
א .לפניכם מספר תסריטים.
מטרת כל תסריט להדפיס את כל המספרים הזוגיים בין ( 2-10כולל).
לצד כל תסריט רשמו Vהאם התסריט מדפיס את הערכים המבוקשים ואם לא הסבירו
בקצרה מה מבצע התסריט ומדוע אינו מבצע את המבוקש.
תסריט
הסבר
קטע
תסריט
1.
2.
3.
77
תסריט
הסבר
קטע
תסריט
4.
5.
6.
7.
8.
78
הצעת פתרון למורה:
קטע תסריט
הסבר
V
1.
V
2.
X
3.
X
4.
V
5.
X
6.
X
7.
V
8.
שאלה שישית
לפניכם תסריט:
מה הפלט שיתקבל על הבמה ?
א
ב
פתרון למורה :אפשרות ב'
79
ג
שאלה שביעית
לפניכם שני קטעי תסריטים:
ב
א
.1במה שונה לולאת חזור ללולאת לעולמים?
_________________________________________________________________
.2האם פלט שני הקטעים זהה?
כן /לא הסבר _______________________________________________________
.3כדי שהצורה המתקבלת תופיע במרכז הבמה יש להוסיף את הפקודה הבאה:
א.
ב.
ג.
ד.
.4לפניכם קטע תסריט נוסף המבוסס על קטע תסריט א' .
הריצו ורשמו את הפלט המתקבל על הבמה:
80
פתרון למורה:
81
מונה וצובר – מערך שיעור 83 .........................................................................................................
ציור על קנבס – יחידת לימוד עצמי 96 .....................................................................................
תרגילים לקראת משימה מסכמת 106 .........................................................................................
תרגילים לקראת משימה מסכמת 113 .......................................................................................
דף מסכם – דורון זוהר ורחל פרלמן 125 .....................................................................................
תרגילי הכנה לקראת משימה מסכמת 137 .........................................
82
מונה וצובר – מערך שיעור (בסביבת אקדמיית קאהן)
פיתוח :איריס רווח ,יעוץ :ד"ר דורון זוהר
שיטות ההוראה :חקר במעבדה ,בשילוב של דיון כיתתי והוכחת פתרונות באמצעות דיון בכיתה.
זמן :עד 2שיעורי מעבדה כפולים (כל שיעור מעבדה מורכב משני שיעורים רצופים במערכת השעות,
90דקות).
מטרות:
הבנת המושג מונה וזיהוי הצורך במונה בתוכנית.
הבנת המושג צובר (סוכם) וזיהוי הצורך בצובר בתוכנית.
שימוש במונה ובצובר בסביבת אקדמיית קהאן לצורך פתרון בעיות.
הכרת ההבדלים בין מונה לצובר בלולאה.
הכרת ההבדלים באיתחול מונה/צובר.
תרגול שאלות מבוססות בחינת בגרות ביסודות 2יח"ל.
ידע קודם נדרש:
הכרות עם סביבת העבודה באקדמיית קהאן.
פתירת כל היחידות הקודמות לשימוש בלולאה.
קישורhttps://he-il.khanacademy.org/computing/computer-programming/programming :
ידע בלולאות ,for ,whileתנאים לוגיים ופונקציית .random
עזרים:
דף סיכום בנושא
קובץ תרגילים לתלמיד
קובץ תרגילים +פתרון למורה
תכנון משך השיעורים
זמן כ-
פעילות
חלוקת דף העבודה ,דיון
כיתתי על שני
התלמידים ילמדו בכיתה מתוך דף
"יחידת הלימוד בנושא מונה וצובר"
המשתנים/מונחים
להסבר ראשוני של המושגים מונה וצובר.
(מצורף בהמשך)
תרגיל ראשון
מתן זמן ראשוני להתנסות בפתרון התרגיל 5-7דק' לעבודה עצמית או
בזוגות
ולאחר מכן פתרון התרגיל מורה-כיתה.
ולאחר מכן שוב 5-7דק'.
הוכחת נכונות הפתרון באמצעות טבלת
מעקב.
83
10דק'
זמן כ-
פעילות
קישור להצעת פתרון תרגיל https://he-il.khanacademy.org/cs/1/5469410103394304 - 1
תרגיל שני
שוב ,מתן התרגיל לתלמידים ,ניסיון
פתרון עצמי ולאחר זמן יוצג פתרון שיוצע
ע"י אחד התלמידים.
5-7דק' לעבודה עצמית או
בזוגות
ולאחר מכן שוב 5-7דק'.
קישור להצעת פתרון תרגיל https://he-il.khanacademy.org/cs/2/6335587096723456 - 2
תרגיל שלישי
יש להפנות תלמידים שסיימו את
התרגילים הקודמים לפני הזמן המוקצה
לניסיון פתירת תרגיל זה -תרגיל בנושא
צבירת מכפלה בחישוב עצרת.
לכלל הכיתה התרגיל יוצג וייפתר ע"י
המורה באמצעות רעיונות שיינתנו ע"י
התלמידים .רק לאחר הפתרון הכיתתי
יינתן זמן להרצת התרגיל בסביבה.
10דק' לפתרון כיתתי
ו 5-דק' להרצת התרגיל
בסביבה.
(ניתן לשנות את סדר
התרגילים 3-4בהתאם)
קישור להצעת פתרון תרגיל https://he-il.khanacademy.org/cs/4/6436980335837184 - 4
תרגיל רביעי
גם כאן המורה פותר בדרך פתרון מודרך
תוך הצגת שאלות מנחות לתלמידים.
פתרון תרגיל זה משלב תנאי ,החלפת
משתנים ,לולאה ,צובר סכום וצובר
מכפלה.
10דק' לפתרון כיתתי
ו 5-דק' להרצת התרגיל
בסביבה.
קישור להצעת פתרון תרגיל https://he-il.khanacademy.org/cs/3/5024012784107520 - 3
תרגיל חמישי
בתחילה תינתן עבודה עצמית לתלמידים
ולאחר מכן יש לפתור את התרגיל על פי
הצעות התלמידים .התרגיל המשלב מונה
וצובר עם לולאת .while
10דק' לעבודה עצמית או
בזוגות ו 5-7-דק' פתרון
כיתתי.
קישור להצעת פתרון תרגיל https://he-il.khanacademy.org/cs/5/5519825973018624 - 5
תרגול
יינתן כעבודה לבית – מומלץ לפתור את
התרגיל בשיעור הבא.
הרעיון זהה לרעיון המיושם בתרגיל קודם.
הצגת התרגיל 5דק'
סיום שיעור מעבדה ראשון
דיון כיתתי
מהם ההבדלים בין מונה לצובר,
מתי נשתמש בכל אחד ממשתנים אלו.
דוגמאות לאתחול מונה וצובר.
פתרון שיעורי הבית.
84
כ 15-דק'
זמן כ-
פעילות
הפניה להמשך עבודה מול דף התרגילים.
תרגיל שישי
בתרגיל זה יש שילוב של סכמה ומנייה.
דרך הפתרון עצמית ולאחר טווח הזמן
המוקצה נפתור את התרגיל בדיון
תלמידים/מורה.
10דק' לעבודה עצמית או
בזוגות ו 5-7-דק' פתרון
כיתתי.
קישור להצעת פתרון תרגיל https://he-il.khanacademy.org/cs/6/6316912880910336 - 6
תרגיל שביעי +תרגיל
שמיני
קריאת התרגילים ופתיחת דיון כיתתי על
דרך פתרון כל תכנית.
לאחר הדיון הקצר יינתן לתלמידים זמן
לפתור את התרגילים עצמאית ולבסוף
5דק' לקריאת התרגילים
ודיון ראשוני.
10דק' עבודה עצמית/זוגות
נפתור את התרגיל שפתרו בעצמם.
5דק' פתרון כל תכנית.
קישור להצעת פתרון תרגיל https://he-il.khanacademy.org/cs/7/5393399953227776 - 7
קישור להצעת פתרון תרגיל https://he-il.khanacademy.org/cs/8/4536231603470336 - 8
תרגיל תשיעי
דיון כיתתי -מה צריך להיות תנאי
הכניסה ללולאה (תנאי לוגי מורכב) ,תוך
הדגמה של טבלת מעקב על התנאי .לאחר
מכן יינתן זמן לתלמידים לפתור את
התרגיל.
5-7דק' לדיון כיתתי ומתן
דוגמאות.
5-7דק' לעבודה
עצמית/זוגות ובהמשך עוד
5-7דק' לפתרון התרגיל
בדיון כיתתי.
קישור להצעת פתרון תרגיל https://he-il.khanacademy.org/cs/9/5663561013002240 - 9
תרגיל עשירי
5-7דק' לפתרון התרגיל
בהמשך לתרגיל הקודם ,כאן יינתן זמן
ראשוני לפתירת התרגיל ולאחר מכן נפתור בעבודה עצמית/זוגות
ובהמשך עוד 5-7דק'
את התרגיל בצורת דיון כיתתי.
לפתרון התרגיל בדיון
כיתתי.
קישור להצעת פתרון תרגיל https://he-il.khanacademy.org/cs/10/6694577643192320 - 10
סיום שיעור מעבדה שני
85
יחידת לימוד לתלמיד בנושא מונה וצובר בלולאה
מהו מונה:
מונה הוא משתנה שתפקידו לספור מספר הופעות של מקרים ,נתונים או חישובים מבוצעים .פעולת
המנייה מחייבת איתחול של המשתנה .כלומר ,מתן ערך התחלתי למשתנה לפני תחילת המנייה.
דוגמה:
בכיתה ז' 30תלמידים ותלמידות המשתתפים בפעילות תנועת נוער.
אחת התלמידות כתבה תוכנה השואלת את המשתמשים האם הם פעילים בתנועת נוער.
משתמש מקיש "כן" באם הוא פעיל בתנועת נוער ו"-לא" אם אינו פעיל.
התוכנה משתמשת בשני משתנים ,המונים את תשובות המשתמשים .המשתנה countYesהמונה את
מספר המשתמשים הפעילים בתנועת נוער והמשתנה countNoהמונה את מספר המשתמשים שאינם
פעילים בתנועת נוער( .משמעות המילה countהיא ספירה) .שני המונים בתוכנה זו אותחלו לערך :0
;var countYes = 0
;var countNo = 0
עדכון המונה יעשה בהתאם לתשובת המשתמשים .במידה ומשתמש ענה "כן" יש להעלות ב 1-את
מספר המשתמשים הפעילים בתנועת הנוער ,כלומר להוסיף 1למונה :countYes
;countYes = countYes + 1
במידה והמשתמש ענה "לא" ,יש להוסיף 1למונה .countNoניתן לכתוב את ההוראה המוסיפה 1
למשתנה גם בדרך נוספת .הרי היא לפניכם:
countNo++
תרגיל -תנו דוגמה נוספת לתכניות בהן נדרש מונה.
מהו צובר:
צובר הוא משתנה אשר תפקידו לבצע סכימת נתונים .גם פעולת הצבירה/סכימה מחייבת איתחול
(השמת ערך ראשוני) של המשתנה.
דוגמה:
תלמידי כיתה ז' סייעו באיסוף תרומות לרכישת ציוד רפואי לבית החולים המקומי .אחד מתלמידי
הכיתה כתב תוכנה לקליטת סכומי התרומה שאספו התלמידים וחישוב הסכום הכללי שנאסף .בסוף
יום ההתרמה הוכנסו נתוני סך כל התרומות שנאספו ,כקלט לתוכנה .לשם כך הוגדר משתנה ,בשם
,sumשאותחל בערך אפס:
;var sum = 0
בנוסף הוגדר משתנה בשם donationאליו נקלט ערך התרומות שאסף כל תלמיד .ערך זה התווסף
לערך הקיים במשתנה:
;sum = sum + donation
תרגיל -תנו דוגמה נוספת לתכניות בהן נדרש צובר.
86
דף תרגילים
.1כתבו תכנית המגרילה 10מספרים שלמים בתחום 1-100מחשבת ומדפיסה את ממוצע עשרת
המספרים.
.2כתבו תכנית המגרילה 10שלשות של מספרים שלמים בתחום -100ועד .100על התכנית לחשב
ולהדפיס:
א .מהו ממוצע שלוש המספרים.
ב .כמה מבין הממוצעים שחושבו בסעיף א הם מספר חיובי.
.3עֲצֶ ֶרת היא מכפלת כל המספרים הטבעיים מ 1 -ועד למספר נתון.
.
למשל 4" ,עצרת" (או ! )4היא המכפלה
כתבו תכנית המגרילה מספר שלם חיובי למשתנה nבתחום .1-10על התכנית לחשב
ולהדפיס את nעצרת (! ,)nכלומר את מכפלת כל המספרים השלמים מ 1-ועד המספר ( nכולל).
.4כתבו תכנית המגרילה 2מספרים שלמים בטווח 1-30ומציבה אותם במשתנים miniו.maxi-
לאחר הגרלת המספרים יש להדפיס את הערכים המוגרלים ולהציב את המספר הקטן יותר
במשתנה miniואת הגדול יותר במשתנה .maxiעל התכנית לחשב ולהדפיס את סכום הערכים
וסכום המכפלות בין miniל.maxi-
לדוגמה ,אם הוגרלו שני המספרים הבאים 5 :ו ,10-המספר 10יוצב במשתנה maxiוהמספר 5
במשתנה .mini
מכפלת הערכים 50וסכומם .15
.5כתבו תכנית המגרילה מספרים שלמים בטווח 1-50כל עוד סכומם המצטבר קטן מ .200-על
התכנית למנות ולהדפיס כמה מספרים כאלה הוגרלו.
הצעות פתרון למורה לדף התרגילים
.1הצעת פתרון -
;var sum=0
;var x,y=30
)for (var i=1; i<=10; i++
{
;))x=round(random(1,100
;sum=sum+x
;)fill(255, 0, 0
;)text("x="+x,10,y
;y=y+30
}
87
var avg=sum/10;
fill(255, 0, 0);
text("avg="+avg,10,y);
- הצעת פתרון.2
var a,b,c,sum,count=0,avg;
var y=30;
for (var i=1; i<=10; i++)
{
a=round(random(-100,100));
b=round(random(-100,100));
c=round(random(-100,100));
sum=a+b+c;
avg=sum/3;
fill(255, 0, 0);
text("avg="+avg,10,y);
y=y+30;
if (avg>0)
{
count++;
}
}
text("count="+count,10,y);
- הצעת פתרון.3
var n,atz=1;
n=round(random(1,10));
fill(255, 0, 0);
text(n,10,30);
for (var i=1; i<=n; i++)
{
atz=atz*i;
}
text(n+"!"+"="+atz,10,60);
88
- הצעת פתרון.4
var sum=0;
var mult=1;
var mini=round(random(1,30));
var maxi=round(random(1,30));
fill(255, 0, 0);
text("mini="+mini,10,10);
text("maxi="+maxi,10,30);
if (mini>maxi)
{
var temp=mini;
mini=maxi;
maxi=temp;
}
for (var i=mini; i<=maxi; i++)
{
sum=sum+i;
mult=mult*i;
}
fill(255, 0, 0);
text("sum="+sum,10,50);
text("mult="+mult,10,70);
- הצעת פתרון.5
var x, sum=0, count=0, y=30;
while (sum<200)
{
x=round(random(1,50));
fill(255, 0, 0);
text(x,10,y);
sum=sum+x;
y=y+30;
count++;
}
text("sum="+sum,10,y);
text("count="+count,10,y+30);
89
שיעורי בית לסיום שיעור ראשון:
.1חברת תעופה מציעה לקהל הלקוחות תכנית "הנוסע המתמיד" בה ניתן לצבור מיילים בכל
טיסה .ללקוחות שצברו 30אלף מייל ומעלה ניתנת זכאות טיסה חינם לאחד מיעדי החברה
לאירופה.
כתבו תכנית המגרילה את מרחקי הטיסות (בין 5000ל )20000-של נוסע ומדפיסה לאחר כמה
טיסות זכאי הלקוח לטיסה חינם.
לדוגמה ,אם הוגרלו המרחקים הבאים 6000 ,15000 ,7000 ,5000 :יודפס "לאחר 4טיסות ניתנה
טיסה חינם" (כי סכום המרחקים שנצברו עד כה הוא 33,000מייל).
.2פראן סלאק ,האיש הכי בר מזל בעולם ,זכה בגיל 72בסכום של .₪ 500פראן רוצה לחלק את
סכום זכייתו בין חבריו כך שכל אחד מהם יקבל בשקל אחד יותר מאשר קודמו .כלומר החבר
הראשון יקבל 1ש"ח ,השני 2ש"ח וכן הלאה.
כתבו תכנית המחשבת מהו מספר האנשים אשר להם יחלק פראן בר המזל את כספו.
הערה :אם אתם רוצים לשמוע את סיפרו של פראן צפו בסרטון הבא:
https://www.youtube.com/watch?v=kBMvfkG0CeY
.3אחת התוצאות הטובות ביותר של זריקת קוביות במשחק שש-בש היא ( 5-6כלומר כאשר אחת
הקוביות מציגה 5והשנייה מציגה ,6לצרוף הזה נהוג לקרוא שש-בש .)
מה הסיכוי לקבלת שני ערכים אלו? _____ ,הסבר _______________________
כתבו תכנית המטילה/מגרילה 2קוביות 100פעמים ,מונה ומדפיסה כמה פעמים הוגרל המספר
שש-בש.
.4עמי ותמי משחקים במשחק קובייה.
בכל סיבוב הם מטילים ,אחד אחר השנייה את הקוביה.
עבור סכום מספרים זוגי ,זוכה עמי ב 5-נקודות .אם סכום המספרים אי זוגי ,זוכה תמי ב5-
נקודות.
כתבו תכנית המדמה את המשחק במשך 50סיבובים ומדפיסה את שם הזוכה.
.5למשחק הקלפים "מלחמה כיתתית" הכללים הבאים:
במרכז השולחן מונחת חבילת קלפים ווירטואלית אין סופית.
ערך כל קלף ,בין ( 1-13כולל).
בכל תור שולפים השחקנים קלף אקראי.
בעל הקלף הגבוה ביותר צובר את סכום הנקודות שבקלף שלו.
אם הקלפים שווים אין כל שינוי וממשיכים לתור הבא.
השחקן המנצח הוא השחקן הראשון שהצליח לצבור 50נקודות.
כתבו תכנית המדמה משחק בין 2שחקנים .על התכנית להדפיס את שם המנצח/ת.
ראו דוגמה בעמוד הבא.
90
לדוגמה ,עבור שלושה מהלכי המשחק הבאים של רונן ודינה:
מספר שהגריל
רונן
מספר
שהגרילה דינה
5
8
6
7
10
2
סכום הנקודות
לרונן
0
סכום הנקודות
לדינה
0
7
17
6
.6נגדיר משחק סביבון מתמטי ,שבו במקום המילים נס גדול היה פה ,מופיעים המספרים . 1-4
על שני המשתתפים ,כל אחד בתורו ,לסובב את הסביבון .בהתאם לתוצאה המתקבלת ,כל
משתתף צובר או מפסיד נקודות על פי הכללים הבאים:
אם התוצאה ,1הפסד של 4נקודות מסך הניקוד הכולל (למשתתף שסובב את הסביבון).
אם התוצאה ,2רווח של 6נקודות מסך הניקוד הכולל.
אם התוצאה ,3מוכפלות סך כל הנקודות.
אם התוצאה ,4מתאפסות כל הנקודות שנצברו עד כה.
כתבו תכנית המדמה את המשחק עד למצב בו המנצח/ת זוכה ב 50-נקודות .על התכנית
להדפיס את שם המנצח/ת.
לדוגמה ,נדמה שלושה מהליכי משחק של שני השחקים רונן ודינה:
מספר שהגריל
רונן
סכום הנקודות
לרונן
0
0
מספר שהגרילה
דינה
4
2
סכום הנקודות
לדינה
0
6
1
-4
12
3
2
-2
8
1
91
הצעה לפתרון עבור שיעורי הבית לסיום שיעור ראשון
- הצעת פתרון.1
var amountOfMoney=5000;
var count=0;
var sum=1;
while (amountOfMoney>0)
{
amountOfMoney=amountOfMoney-sum;
sum++;
count++;
}
fill(255, 0, 0);
text("count="+count,10,20);
- הצעת פתרון.2
var count=0, dice1, dice2, y=20;
for (var i=1; i<=100; i++)
{
dice1=round(random(1,6));
dice2=round(random(1,6));
fill(255, 0, 0);
text(dice1,10,y);
text(dice2,40,y);
y=y+30;
if (dice1+ dice2===11)
{
count++;
}
}
text("count="+count,10,y);
- הצעת פתרון.3
var sumAmi=0, sumTami=0, a,b;
for (var i=1; i<=50; i++)
{
a=round(random(1,6));
b=round(random(1,6));
if ((a+b) % 2===0)
92
sumAmi+= 5;
else
sumTami+= 5;
}
fill(255, 0, 0);
text("Ami score "+sumAmi,10,20);
text("Tami score "+sumTami,10,40);
if (sumAmi>sumTami)
{
fill(255, 0, 0);
text("Ami win ",10,60);
}
else
if (sumTami>sumAmi)
{
fill(255, 0, 0);
text("Tami win ",10,60);
}
else
{
fill(255, 0, 0);
text("Tie ",10,60);
}
- הצעת פתרון.4
var sum1=0, sum2=0, a, b;
var y=30;
while (sum1<50 && sum2<50)
{
a=round(random(1,13));
b=round(random(1,13));
if (a>b)
{
sum1+= a;
}
else
if (b>a)
{
93
sum2+= b;
}
fill(255, 0, 0);
text("sum1="+sum1,10,y);
text("sum2="+sum2,100,y);
y+= 30;
}
if (sum1>sum2)
{
fill(255, 0, 0);
text("player1 win with "+sum1+" points",10,y);
}
else
if (sum2>sum1)
{
fill(255, 0, 0);
text("player2 win with "+sum2+" points",10,y);
}
else
{
fill(255, 0, 0);
text("Tie",10,150);
}
- הצעת פתרון.5
var sum1=0, sum2=0;
var y=20;
var Game=function(points)
{
var a;
a=round(random(1,4));
if (a===1)
{
points-= 4;
}
if (a===2)
{
points+= 6;
}
94
if (a===3)
{
points= sum1*2;
}
if (a===4)
{
points= 0;
}
return points;
};
while (sum1<50 && sum2<50)
{
sum1=Game(sum1);
sum2=Game(sum2);
fill(255, 0, 0);
text("sum1="+sum1,10,y);
text("sum2="+sum2,150,y);
y+= 15;
}
if (sum1>sum2)
{
fill(255, 0, 0);
text("player1 win with "+sum1+" points",10,y);
}
else
if (sum2>sum1)
{
fill(255, 0, 0);
text("player2 win with "+sum2+" points",10,y);
}
else
{
fill(255, 0, 0);
text("Tie",10,150);
}
95
ציור על קנבס – יחידת לימוד עצמית (בסביבת אקדמיית קאהן)
פיתוח :שלומית בן שחר ,יעוץ :ד"ר דורון זוהר
מבוא
תקן HTML5מאפשר לנו ליצור צורות דו-ממדיות באופן פשוט וקל באמצעות אלמנט .canvasזהו
אלמנט פשוט שניתן לשלוט עליו באמצעות הגדרות עיצוב ,ובאמצעות שימוש ב JavaScript-ניתן
לצייר כל מה שאנו רוצים וגם ליצור אנימציה.
בסוף יחידת לימוד זו תדעו להגדיר את אזור הציור ) (canvasולצייר עליו קווים וצורות סגורות.
ביחידה מרכיבים שונים:
הסברים
דוגמאות
הפניה לסרטונים
הפניה להדרכה
משימות
למידה בחקירה עצמית.
בהצלחה
96
בד הציור ()canvas
בזמן ריצה אנו יכולים ליצור תוכן גרפי בדף .HTMLעל מנת לעשות זאת נשתמש בתג <.>canvas
התגית מגדירה אזור בעמוד שמשמש כמסגרת ריקה ("בד ציור") שבתוכה ניתן לייצר את
התוכן הגרפי בעזרת תסריט ב.Javascript -
הקנבס הוא רשת נקודות דו ממדים .כל נקודה בו מוגדרת ע"י
).(x,y
הפינה השמאלית העליונה של הקנבס היא הנקודה (.)0,0
באזור זה נוכל להטמיע איורים ואנימציות ,כלומר איורים המוגדרים באמצעות קווי מתאר
ללא תמונות פיזיות .התגית בעצמה אינה מגדירה/מבצעת שום דבר ויזואלי ,אלא רק מגדירה
אזור שבו ה JavaScript-יוכל לפעול ולהטמיע את האיורים.
כתיבת התגית תעשה בתוך תגית ה <body> -באופן הבא:
"גובה"=" heightרוחב"=" widthמזהה"=<canvas id
>"צבע רקע; background-color:צבע מסגרת solidרוחב מסגרתstyle="border:
></canvas
בדוגמה הבאה מגדירים canvasחדש בשם myCanvasבגודל 400X400צבע קו המסגרת
יהיה שחור ( )#000000ורוחב הקו 1pxוצבע הקנבס ורוד.
> <html
><body
>הגדרת הקנבס !<
<canvas id="myCanvas" width="400" height="400" style="border:1px solid
;#000000
>background-color:pink"> </canvas
></body
></html
משימה 1
.1העתיקו את הקוד הנ"ל ל notepad++ -ושמרו אותו כ.html -
.2שנו את מאפייני הקנבס :רוחב ) ,(wגובה ) (hוצבע.
.3הפעילו את הקובץ.
העשרה -הסרטון מדגים הגדרת קנבס בדף ( HTMLהחל מ.(4:20 -
עיצוב הקנבס יכול להעשות בתגית ה <canvas> -או ע"י הגדרות cssכפי שמודגם בסרטון.
97
הכתובת לאתר הסרטון:
https://www.youtube.com/watch?v=uxQxBz54Dpk&list=PLftmDuo1PWLZT6YyyZ807MpCXkb4Ox-P
הקו
אבן היסוד בכל ציור היא הקו .כדי לצייר קווים על התג ב canvas-עלינו להשתמש בצירוף של
מספר מתודות ( )methodsשהן חלק מההקשר ( )contextשל ה.canvas -
מתודה
תיאור פעילות המתודה
beginPathאיתחול ( )resetהנתיב ( )pathהנוכחי
moveToפתיחת תת נתיב חדש והגדרת נקודת ההתחלה של הקו שברצוננו לצייר.
מתודה זו מקבלת כפרמטרים את ערכי ציר הרוחב ( )xוציר הגובה ( )yשל
הנקודה.
closePathסגירת תת הנתיב הנוכחי.
Fillמילוי הנתיב הנוכחי על פי סגנון המילוי שנבחר.
" Strokeמשיכת מכחול" בנתיב שהוגדר ובסגנון שהוגדר.
lineToהגדרת הנקודה הבאה בנתיב .שימוש בה יגרום למתיחת קו ישר מהנקודה
הקודמת לנקודה החדשה שהיא מגדירה .מתודה זו מקבלת כפרמטרים את
ערכי ציר הרוחב ( )xוציר הגובה ( )yשל הנקודה.
מתוך המדריך השלם לשפת HTML
http://www.devschool.co.il/guides/html5/HTML5_Canvas_Lines.aspx
אפשר להגדיר לקו תכונות:
תכונה
lineWidthעובי הקו
strokeStyleצבע הקו.
lineCapהגדרת קצה הקו – roundמעוגל; - squareמרובע
חשוב לזכור! ב Javascript -חייבים להשתמש בשמות של המתודות כפי שהן ,תוך הקפדה על
אותיות לועזיות גדולות וקטנות.
בדוגמה הבאה מגדירים canvasחדש בשם Canvas1בגודל 400X100צבע קו המסגרת יהיה
אדום .על הקנבס נצייר קו כחול בעובי 2החל מנקודה ) (20,30לנקודה ).(200,50
><!DOCTYPE html
> <html
><body
98
>הגדרת הקנבס !<
><canvas id="Canvas1" width="400" height="100"></canvas
><script
נגדיר הצבעה לקנבס שעליו נרצה לצייר //
;)'var canvas = document.getElementById('Canvas1
;)'var context = canvas.getContext('2d
מנקודה זו אנו מתחילים לצייר את הקו //
צבע הקו //
;" context.strokeStyle = "blue
רוחב הקו //
;context.lineWidth=2
איתחול //
;)(context.beginPath
נקודת ההתחלה //
)context.moveTo(20, 30
הנקודה הבאה //
;)context.lineTo(200, 50
ביצוע //
;)(context.stroke
></script
></body
></html
פלט הדף יהיה:
משימה 2
.1העתיקו את הקוד הנ"ל ל notepad++ -ושמרו אותו כ.html -
.2שנו את מאפייני הקנבס :רוחב ) ,(wגובה ) .(hהגדירו צבע ומסגרת.
.3ציירו על הקנבס שלושה קוים :לרוחב ,לאורך ובאלכסון.
99
.4הגדירו לכל אחד מהקווים תכונות ומאפיינים שונים:
א .עובי הקו (.)n
ב .נקודת ההתחלה ).(x, y
ג .נקודת הסיום ).(x, y
.5הפעילו את הקובץ.
המשולש
משולש היא צורה הנדסית סגורה בעלת שלוש צלעות (כלומר שלושה קווים).
על מנת לצייר משולש נעשה זאת באמצעות ציור של קווים.
נשתמש בתכונה fillStyleלהגדיר את צבע המילוי ובמתודה )( fillעל מנת לגרום למילוי
הצורה בצבע שהגדרנו.
בדוגמה הבאה נצייר על הקנבס משולש על-ידי ציור קו שבור שיש לו שלושה מקטעים .הקו
הראשון יצוייר החל מנקודה ) (50,50לנקודה ) (250 ,50לנקודה ) (50, 350ויחזור לנקודת
ההתחלה.
הקו יהיה בצבע שחור בעובי שחור והמילוי יהיה בצבע אדום.
<canvas id="Canvas1" width="400" height="400" style="border:1px solid
>#FF0000"> </canvas
><script
;)'var canvas = document.getElementById('Canvas1
;)'var ctx = canvas.getContext('2d
;)(ctx.beginPath
;ctx.lineWidth = 3
קודקוד ראשון -נקודת ההתחלה //
;)ctx.moveTo(50, 50
קודקוד שני//
;)ctx.lineTo(250, 50
קודקוד שלישי //
;)ctx.lineTo(50, 350
חזרה לנקודת ההתחלה //
;)ctx.lineTo(50, 50
צבע מילוי המשולש //
;'ctx.fillStyle = 'red
צבע הקו //
100
;"ctx.strokeStyle = "black
;)(ctx.fill
;)(ctx.stroke
;)(ctx.closePath
></script
פלט הדף יהיה:
משימה 3
.1העתיקו את הקוד הנ"ל ל notepad++ -ושמרו אותו כ.html -
.2הגדירו קנבס שרוחבו 900ואורכו .300
.3על גבי הקנבס ציירו שלושה משולשים (ישר זווית ,שווה צלעות וכהה זווית) ,כך שכל
משולש יהיה בכל שליש מהקנבס.
לדוגמא:
.4הגדירו את נקודת ההתחלה ואת הנקודות הבאות כך שיווצר משולש.
.5הגדירו לכל אחד מהקווים תכונות שונות:
א .צבע הקו -שם צבע או קוד צבע
ב .עובי הקו
ג .צבע המילוי -שם צבע או קוד צבע.
.6שימו לב שנקודת ההתחלה היא גם נקודת הסיום על מנת לסגור את הצורה.
מרובע ועיגול
בעזרת המתודה rectאנו יכולים להגדיר מרובע ובעזרת המתודה arcלהגדיר עיגול.
משימה 4
העזרו במדריכים הבאים ,בסרטונים או בכל אתר אחר ומצאו כיצד מגדירים ריבוע ועיגול.
101
צרו ב canvas -משלכם ציור שיש בו ריבוע ועיגול.
מדריכים:
HTML5 Canvas
http://www.w3schools.com/html/html5_canvas.asp
ציור צורות גאומטריות על התג <>canvas
http://www.devschool.co.il/guides/html5/HTML5_Canvas_Geometric_Shapes.as
px
מדריך - HTML5ציור על קאנבאס (התגית )canvas
http://webmaster.org.il/articles/html5-canvas
סרטון:
כיצד מציירים ריבוע
https://www.youtube.com/watch?v=vVAbNncZNlg
חידה
בהפעלת הקוד הבא יצוייר דגל
.1איזה דגל מבין הדגלים הבאים יצוייר בהפעלת הקוד?
.2של איזו מדינה דגל זה?
משימה 5
א.
מצאו וציירו דגל של מדינה אחרת ,שעל מנת לצייר אותו אפשר להשתמש בקוד רק
בשינוי צבעים.
ב.
לאחר שלמדתם כיצד להגדיר קוים וצורות ,צרו canvasחדש והשתמשו בצורות
שלמדתם על מנת ליצור דגל של מדינה אשר יש בו אלמנטים מורכבים (עיגול ,סהר,
כוכב ,תמונה ועוד).
משימה – 6משימת סיכום עם ציון
.1צרו ציור חופשי שעושה שימוש בקווים ,מרובע ,עיגול וצורה סגורות .השתמשו
בצבעים וגוונים שונים .ניתן להעזר באתרים הבאים כדי לקבל את קוד ה RGB -של
הצבעים:
102
HTML Color Picker - http://www.htmlcolorpicker.com/color-picker.html
HTML Color Values - http://www.w3schools.com/html/html_colorvalues.asp
.2את המשימה יש לשלוח למורה להערכה.
.3המשימה תוערך באופן הבא:
פעולה
משקל %
ציור עיגול
20
ציור קו
20
ציור מרובע
20
ציור צורה סגורה
20
מילוי צורה בצבע
10
הגדרת צבע לקו
10
ציור לדוגמה:
הנחיות למורה
רקע לשיעור
נושא השיעור/יחידה
ציור על קנבס
שם המפתח
שלומית בן שחר – shlomit.bensh@gmail.com
אוכלוסיה
כתה ח'
משך השיעור/יחידה
שיעור כפול +המשך עבודה בבית
סביבת הלמידה
מעבדה
רציונל למורה
מיקום ברצף הלמידה
תקן HTML5מאפשר לנו ליצור צורות דו-ממדיות באופן פשוט וקל
באמצעות אלמנט .canvasזהו אלמנט פשוט שניתן לשלוט עליו באמצעות
הגדרות עיצוב ,ובאמצעות שימוש ב JavaScript-ניתן לצייר כל מה שאנו
רוצים וגם ליצור אנימציה.
פרק 3בתכנית "תכנות צד לקוח"
ידע מוקדם
תגיות ,htmlמשתנים בjavaScript -
מטרות מתחום הדעת
שילוב גרפיקה ותרשימים באתרי אינטרנט
מטרות ביצועיות
.1התלמיד יגדיר איזור ציור ) (canvasומאפייניו.
103
דרכי הוראה
.2התלמיד יגדיר קו ,תכונות ומתודות של הקו (איתחול וסגירה של נתיב
הקו ,הגדרת נקודת התחלה וסוף וסגנון).
.3התלמיד יגדיר צורה סגורה ,תכונות והמתודות של הצורה.
.4התלמיד יגדיר מרובע ,תכונות והמתודות של המרובע.
.5התלמיד יגדיר עיגול ,תכונות והמתודות של העיגול.
יחידת לימוד זו הינה ללימוד עצמי והיא בנויה בהדרגה ,החל מההגדרה
הבסיסית של הקנבס ,דרך ציור קווים וציור הצורות הסגורות (משולש,
מרובע ועיגול) .חלק מהמידע ניתן לתלמידים ואת חלקו הוא צריך לחקור
ולמצוא לבד (הגדרת מרובע ועיגול).
ביחידה מרכיבים שונים:
הפניה לסרטונים,
חידה,
הסברים,
דוגמאות – קוד ,html
הפניה להדרכה ברשת,
משימות,
למידה בחקירה עצמית.
חומרי למידה
קובץ ללמידה עצמית הכולל משימות שונות ללומד
חומרי עזר
סרטונים ומדריכים (פירוט בהמשך)
תוצר הלמידה המצופה
.1ציור קוים
מהפעילות
.2ציור משולשים
.3ציור מרובע +עיגול
.4ציור דגל
.5ציור חופשי
דרכי הערכה
משימת סיכום -במשימה זו יבחנו יכולות התלמיד להגדיר קנבס ,קו
והמתודות שלו ,משולש ,מרובע ,ועיגול.
מהלך ההוראה
מהלך ההוראה
זמן כ-
תוצר הלמידה
הגדרת בד הציור canvas
10ד'
דף htmlשמוגדר בו קנבס
הגדרת קו ,מתודות ,מאפיינים
15ד'
דף htmlאשר מצויירים בו שלושה קווים
הגדרת צורה סגורה -המשולש
30ד
דף htmlאשר מצויירים בו שלושה משלושים
מרובע ועיגול
35ד
דף htmlאשר מצויירים בו מרובע ועיגול
משימת סיכום
בית
דף htmlאשר מצויירים בו דגל
ציור חופשי שעושה שימוש בקווים ,צורות סגורות ,מרובע ועיגול
104
תת נושאים
תת-
נושא
בד
הציור
canvas
הקו
קובץ הקוד של
הדוגמא +
פלט
מהו
קנבס,
הגדרת
קנבס
+
שם קובץ המשימה
למורה +פלט
/
הסרטון מדגים
הגדרת קנבס בדף
( HTMLהחל מ-
.(4:20
1
newCanvas
הגדרת
מתודות
ותכונות
של קו
+
line
2
3lines
המשולש הגדרת
מתודה
ותכונה
של צורה
סגורה
מרובע
ועיגול
חקירה
עצמית
+
triangle
3
3triangle
4
rectangleAndCircle
+
מדריכים:
HTML5 Canvas
ציור צורות
גאומטריות על
התג <>canvas
מדריך - HTML5
ציור על קאנבאס
(התגית )canvas
סרטון:
כיצד מציירים
ריבוע
5
בהפעלת
הקוד מצוייר דגל
סרביה (ב).
סיכום
6
משימת
סיכום
להערכה:
ציור
חופשי
שעושה
שימוש
בקווים,
עיגול
וצורות
סגורות.
105
serbiaFlag
flagsQuiz:
Boat
תכנות צד לקוח :תרגיל סיכום לתלמידי כיתה ח
פיתוח :מיכל אוסטרוב וזיו יהלום ,יעוץ :ד"ר דורון זוהר
שאלה מספר 1
לפניכם אפשרויות להצהרה על מערך ב .JAVASCRIPT -לצד כל אפשרות סמנו Vאם דרך ההצהרה
נכונה ותקינה .במידה ולא – סמנו מהי הטעות:
האם תקין?
הצהרה
1
)var a = new Array(100
2
]var a = new Array[100
3
]var[] a = new String[100
4
]a = new Array[100
5
)a = new Array(100
6
]a = new Array[1,2,3,4
7
)a = new Array(1,2,3,4
8
][a = new Array
9
)(a = new Array
שאלה מספר 2
לפניכם מספר טענות .לכל טענה הקיפו סמנו האם היא נכונה או לא:
טענה
1
ניתן להגדיר ב JAVASCRIPT -משתנים מבלי לציין את סוג
המשתנה
2
בחלוקה של מספר חיובי במספר שלילי תינתן תוצאה שלילית
3
תוצאת חלוקה השלמים 5/3זהה לתוצאת חלוקה שארית 5%3
4
פונקציה/פעולה יכולה להחזיר פרמטר אחד בלבד
5
לולאת forחייבת תמיד להתחיל בערך השווה ל 1ולהתקדם
בכל סבב בערך ההתחלתי שנקבע לו
6
לולאת whileתעצר רק כאשר תנאי העצירה יהיה שקר
7
הביטוי ) if (a>30 && a<10הינו ביטוי אשר ערכו יהיה אמת
עבור כל ערך של a
106
נכון/לא נכון
שאלה מספר 3
נתון קטע הקוד הבא:
;)(a = new Array
;a[0] = 12
;a[1] = false
;"a[2] = "text
איזה מבין שני המשפטים הבאים נכון יותר?
א .קטע הקוד שגוי ,תתקבל הודעת שגיאה כיוון שלא ניתן להגדיר במערך טיפוסים שונים.
ב .קטע הקוד תקין.
שאלה מספר 4
סעיף א
נתונה הפונקציה:
) function doSomething ( num
{
;var x=10
;return x+num
}
לפניכם מספר משפטים .הקיפו את המשפט הנכון ביותר:
.1הערך המוחזר תמיד יהיה .10
.2הערך המוחזר איננו מוגדר.
.3הערך המוחזר יהיה תמיד גדול ב 10מהערך שהתקבל כפרמטר.
.4הערך המוחזר יהיה תמיד גדול פי 10מהערך שהתקבל
סעיף ב
לפניכן קטע הקוד המשתמש בפונקציה שהוגדרה בסעיף קודם:
{)for(var k=1; k<=6; k=k+2
;)" document.write) " doSomething(a)+1
}
צרו טבלת המעקב זהה למבנה המופיע מטה ורשמו את הפלטים המתקבלים:
הערך שיודפס
ערכו של הערך המוחזר
107
ערכו של k
סעיף ג
האם היו מתקבלים פלטים שונים אם היינו כותבים בתנאי הלולאה במקום k<=6את התנאי ?k<6
______________________________________________________________
שאלה מספר 5
{)for(var a=1; a<=10; a++
לפניכם קטע תכנית:
{)for(var b=1; b<=10; b++
;)" "document.write(a*b+
מהו הפלט המתקבל?
}
;)">document.write("<br/
}
שאלה מספר 6
לפניכם קטע תכנית:
;var num =15
{)for (var i=1; i<=num; i++
;)"*"(document.write
{)if (i%3==0
;)">document.write("<br/
}
}
מהו הפלט המתקבל?
שאלה מספר 7
לפניכם קטע תכנית המציג תמונה של מכונית:
לפניכם קוד חלקי שמטרתו להציג אנימציה של מכונית זו על קנבס בגודל ,400*400כך שהמכונית
חוצה את הקנבס משמאל לימין.
השלימו את החלקים החסרים:
;"ctx.fillStyle="black
;)ctx.fillRect(x,80,220,50
;)ctx.fillRect(x+50,30,120,50
;)ctx.arc(x+50,155,25,0,2*Math.PI,true
;)(ctx.fill
;)ctx.arc(x+170,155,25,0,2*Math.PI,true
{)(var drawCar = function
; ______________ )x= (1
108
cfx.fillStyle = "white";
ctx.fillRect (0,0,400,400);
ctx.beginPath();
ctx.fillStyle = "black";
ctx.fillRect ((2) _________, 80,220,50);
ctx.fillRect ((3) _________, 30,120,50);
ctx.arc ((4) __________, 155,25,0,2*Math.PI,true);
ctx.fill();
ctx.arc ((5) _________, 155,25,0,2*Math.PI,true);
ctx.fill();
if (x==400 {)
x= (6) _____________;
}
}
var x= (7)___________;
setInterval(function(){ drawCar() },50);
8 שאלה מספר
400*400 לציור הגלידה הבאה על קנבס בגודל
:משתמשים בקוד הבא המצורף
ctx.fillStyle="white";
ctx.fillRect(0,0,400,400);
ctx.beginPath();
ctx.arc(200, 95, 40, 0,2*Math.PI, true);
ctx.strokeStyle="black";
ctx.stroke();
ctx.fillStyle="yellow";
ctx.fill();
ctx.beginPath();
ctx.arc(200, 45, 10, 0,2*Math.PI, true); ctx.strokeStyle="black";
ctx.stroke();
ctx.fillStyle="red";
ctx.fill();
ctx.beginPath()
ctx.moveTo(160, 95);
109
ctx.lineTo(240, 95);
ctx.lineTo(200,275);
ctx.lineTo(160, 95);
ctx.stroke();
ctx.fillStyle="brown";
ctx.fill();
.מבקשים להציג את הגלידה באנימציה כשהיא גדלה סביב נקודת האמצע שלה שוב ושוב
. סייעו לנו השלימו ולשחזרו,חלק מהקוד נמחק
var drawIceCream = function(){
ctx.fillStyle="white";
ctx.fillRect(0,0,400,400);
ctx.beginPath();
ctx.arc(x, y-3*s/2, s, 0,2*Math.PI, true);
ctx.strokeStyle="black";
ctx.stroke();
ctx.fillStyle="yellow";
ctx.fill();
ctx.beginPath();
ctx.arc(x, y-s*11/4, (1)__________, 0,2*Math.PI, true);
ctx.strokeStyle="black";
ctx.stroke();
ctx.fillStyle="red";
ctx.fill();
ctx.beginPath()
ctx.moveTo((2)__________, (3)__________);
ctx.lineTo((4)__________, y-3*s/2);
ctx.lineTo((5)__________, (6)__________);
ctx.lineTo((7)__________, (8)__________);
ctx.stroke();
ctx.fillStyle="brown";
ctx.fill();
s++;
if (s==100){
110
;s=20
}
}
;var x=200
;var y=155
;var s=40
;)setInterval(function(){ drawIceCream() },50
פתרון שאלה 1
תשובות נכונות 9 ,7 ,5 ,1
פתרונות דגשים וקשיים
דגשים וקשיים -השאלה עוסקת בהכרות עם נושא המערך ,כתיבה נכונה של ההצהרה והאתחול
מערך .התלמידים יכולים שלא להבחין ברישום נכון של סוגי הסוגריים השונים או לחשוב שמערך
אינו ניתן לאתחול בשורת ההצהרה.
פתרון שאלה 2
.1נכון
.2נכון
.3לא נכון
.4נכון
דגשים וקשיים -השאלה עוסקת במספר תחומים שבהם נדרש ידע בעבודה עם משתנים ופונקציות.
א .השימוש בהצהרה - varבניגוד לשפות תכנות javascriptאין חובה על הצהרת טיפוס
הנתונים .חשוב להבהיר לתלמידים את ההבדלים בין טיפוסי הנתונים השונים.
ב .שאלה פשוטה של הבנה מתמטית הבאה לידי יישום בכתיבת קוד .javascriptהתלמידים
יכולים לחשוב כי יש חשיבות להגדרת המספר השלילי .מיהו הגורם שישפיע על התוצאה
השלילית האם המחלק או המחולק.
ג .קושי בהבנת הנושא של חלוקה בשלמים
ד .הבנת נושא ערכים המוחזרים על ידי פונקציות ואופן הבחירה של הערך המוחזר .שאלה
זו יכולה לשמש כבסיס או כהמשך לנושא משפט בחירה המיושם בפונקציה
פתרון שאלה 3
תשובה נכונה :ב
דגשים -מערך יכול להכיל טיפוס נתונים יחידי.
פתרון שאלה 4
תשובה נכונה :ג
דגשים וקשיים -ההבדל בין ערך מתקבל לערך מוחזר והשוני בניהם.
הבנת אפשרויות קידום לולאה וההשפעה של זה על תנאי העצירה של הלולאה
ניהול טבלת מעקב
111
הערך שיודפס
ערכו של הערך המוחזר
ערכו של a
12
11
1
14
13
3
16
15
5
סעיף ג
הפלט לא היה משתנה.
שאלה מספר 5
דגשים :לולאה מקוננת.
פתרון :לוח הכפל.
קשיים :תלמידים מתקשים להבין איפה מתחילה והיכן מסתיימת כל לולאה.
פתרון שאלה 6
דגשים :תנאי בתוף הלולאה.
***
פתרון:
***
***
***
***
פתרון שאלה 7
דגשים :עבודה עם אנימציה .הזזה על ידי הוספת ערך קבוע.
פתרון0 )7( 0 )6( x+170 )5( x+50 )4( x+50 )3( x )2( x+1 )1( :
קשיים :ערך התחלתי בלולאה ,שינוי ערך ,ציור בעזרת פרמטרים.
פתרון שאלה 8
דגשים :עבודה עם אנימציה .גדילה פרופורציונית.
(x+s )4
(y-3*s/2 )3
(x-s )2
פתרוןs/4 )1( :
(y+3*s )8
(x-s )7
(y+3*s )6
(x )5
קשיים :חישוב גדילה פרופורציונית ע"י 3משתנים שונים.
112
צד לקוח :תרגילים לקראת משימה מסכמת
פיתוח :אייל עפרון ,יעוץ :ד"ר דורון זוהר
לפניכם מספר תרגילי חזרה בנושא תכנות צד לקוח לקראת משימה מסכמת
לרשותנו הספרייה sj.scihG.rGהמכילה בתוכה ,בין היתר ,את הפונקציות הבאות:
)drawLine(x1,y1,x2,y2, pen, pen_width
;(drawCircle(x, y, radius, brush, pen, pen_width
;)drawRect(x, y, width, height, brush, pen, pen_width
;)drawTriangle(x1,y1,x2,y2,x3,y3, brush, pen, pen_width
ניתן להשתמש בפונקציות הנ"ל בכל אחת מהשאלות המופיעות במבחן.
תרגיל 1
לפניכם קטע קוד חלקי אשר מטרתו:
● קליטת מספר שלם בן שתי ספרות.
● הצגת סכום כל המספרים המתחלקים ב 3 -או ב ,5 -החל מהמספר 10עד למספר
הנקלט.
השלימו את החסר.
;var x
;var validNum = 0
;_____ = var sumNumbers
)while (validNum != 1
{
;))" 99הקלידו מספר שלם שערכו בין 10ל"(x = parseInt(window.prompt
;___ = if (10 <= x && x <= 99) validNum
;)"המספר שהקלדתם אינו חוקי ,נא נסו שנית"(else window.alert
}
)for (var k = 1; k <= _____; k++
{
;_________________ = if (k % 2 == 0) sumNumbers
;______________________________ )else if (______________ == 0
}
" + x +סכום המספרים מ 1ועד ;document.write( " 
" + sumNumbersהמתחלקים ב 2או ב 5הינם;"  
;)
113
תרגיל 2
לפניכם האלגוריתם אשר מטרתו:
.1קליטת רשימת תוצאות תלמידי הכיתה בתחרות קליעה לסל .מספר התלמידים
בכיתה אינו ידוע מראש .לכל תלמיד עשר ניסיונות קליעה .כל קליעה מוצלחת מזכה בנקודה
אחת .את סוף סדרת הציונים יציין המספר .99
.2הצגת רשימת התוצאות.
.3הצגת מספר המשתתפים.
.4הצגת סכום הנקודות שצברו כל תלמידי הכיתה.
.5הצגת ממוצע קליעה לתלמיד.
לפניכם קטע קוד חלקי הנעזר בשני המשתנים הבאים:
– count1משתנה מונה את מספר התלמידים שהשתתפו בתחרות
–GbmebmuNjGמשתנה צובר סה"כ הנקודות שנצברו ע"י כל התלמידים בכיתה.
השלימו את החסר.
;_____ = var count1
;_____ = var sumNumbers
;))", 0הקלידו מספר קליעות לתלמיד"(var x = parseInt(window.prompt
{ )______ =! while (x
)if (0 <= x && x <= 10
;_______________________________________ {
;__________________ = sumNumbers
;)">document.write(x + " </br
}
;)"המספר הקלדתם אינו חוקי ,נא נסו שנית"(else window.alert
;))", 0הקלידו מספר קליעות לתלמיד"(x = parseInt(window.prompt
}
;)">: " + __________ + "</brמספר התלמידים שהשתתפו בתחרות"(document.write
;)">: " + ______________+ "</brסך הנקודות שצברה הכיתה"(document.write
: " + _____________________ +לתלמיד סלים ממוצע"(document.write
;)">"</br
114
תרגיל 3
בעיריית הרצליה ערכו סקר לגבי שביעות רצון תלמידי כיתות ז' משירותי ההסעה לביה"ס וממנו.
התלמידים יכלו לענות האם הם מרוצים מאוד ( ,)1מרוצים בצורה חלקית ( )2או לא מרוצים כלל (.)3
הסקר נערך בהשתתפות 420תלמידים.
.1לפניכם קטע קוד אשר קולט את הבחירה של כל תלמיד ומדפיס את תוצאות הסקר.
השלימו את ההוראות החסרות .שימו לב כי לא נספרת האפשרות בה התלמידים כלל לא מרוצים.
;___________=var i,choice1
;var choice2=0
)for (i = 1; i <= ____; i++
{
;)" הקישו בחירתכם "(var choice = window.prompt
;if (_______________________) choice1++
;else if (___________________) choice2++
}
: " + _____ +מספר התלמידים המרוצים מאוד משירותי ההסעה "(document.write
;)">"<br/
: " + _____ +מספר התלמידים המרוצים באופן חלקי משירותי ההסעה "(document.write
;)">"<br/
;_____________________ = var choice3
;): " + choice3מספר התלמידים שאינם מרוצים משירותי ההסעה "(document.write
.2כעת מבקשת ראשת העיר כי הבחירה שקיבלה את מירב קולות התלמידים תופיע בנפרד
בשורה נוספת.
השלימו את ההוראות החסרות (בהמשך לקוד שמעלה).
) __________________________________________ ( If
;)"> <br/התלמידים מרוצים מאוד משירותי ההסעה "(document.write
) __________________________________________ ( else If
;)"> <br/התלמידים מרוצים חלקית משירותי ההסעה "(document.write
________________
;)"> <br/התלמידים אינם מרוצים משירותי ההסעה "(document.write
115
4 תרגיל
. רשמו לצד כל קוד את הפלט המתקבל.לפניכם מספר קטעי קוד
קוד
פלט
var j = 10;
while (j > 2) {
document.write(j + "</br>");
j=j-2;
}
document.write(j + "</br>");
var j = 1; var k = 10;
for (j = 1; j < k;j++ ) {
document.write(j * k + "</br>");
k = k - j;
}
document.write(j + "</br>");
var j; var count = 0; var total = 0;
for (j = 16; j < 20;j++ ) {
count++;
total = total + count;
document.write(total + "</br>");
}
J=parseInt(total/count);
document.write(j +"</br>" + count +"</br>" + total);
var j; var count = 0; var total = 0;
for (j = 16; j < 20;j++ )
{
count++;
if (count % 3 != 0)
{
total = total + count;
document.write(total + "</br>");
}
}
document.write(total/count);
116
:5 תרגיל
.לפניכם קטע קוד
var x = 100;
/* Second draw */
var y = 150;
x = x + y;
radius= y/3;
y = y + 50;
var width = 200;
context.fillStyle ="yellow"
var height = 100;
context.beginPath();
context.fillRect(x, y, width, height);
var canvas =
document.getElementById("myCanvas2
/* Third draw */
");
context.beginPath();
var context = canvas.getContext("2d");
context.fillStyle = "green";
context.arc(x, y, radius, 0, Math.PI *2,
/* First draw */
context.beginPath();
true);
context.fill();
context.fillStyle = "red";
context.fillRect(x, y, width, height);
.ציירו את הציור המתקבל מהרצת הדף
. ניתן לציין את הצבעים במלל.אין צורך להשתמש בצבעים
50*50 כל משבצת בגודל
117
6 תרגיל
:לפניכם קטע קוד
for (i=1;i<=3;i++)
{
var x = 100;
var y = i*50;
var w= x;
var h = w/2;
var color ="white";
if (i % 3 == 0) color = "blue";
else if (i % 3 == 1) color = "yellow"; else color = "red";
drawRect(x,y,w,h,color, "black",0);
}
.ציירו על גבי הקנבס את הצורה המתקבלת
.משבצת את הצבע שלה/רשמו בתוך כל צורה
.50*50 כל משבצת בגודל
118
תרגיל 7
לפניכם קטע קוד.
;var a = 3
;var b = 5
;)">documnet.write("3 + 5 " + "</br
;)">documnet.write("3 + 5 " + "=" + a + "</br
;)">documnet.write(3 + 3 + "=" + b + "</br
;)">documnet.write(3 + a + "=" + a + b + "</br
;)">documnet.write(3 + b + "=" + "a + b" + "</br
רשמו את פלט התכנית כפי שיראה בדף htmlהמוצג בדפדפן במקום המתאים.
תרגיל 8
נעם רוצה לפתח משחק המדמה קליעה למטרה.
לוח המטרה נמצא ע"ג קנבס שמימדיו 800*800
ומכיל שלשה עיגולים כמוצג בציור:
-
עיגול פנימי בצבע שחור שרוחבו .50
-
עיגול אמצעי בצבע ירוק שרוחבו .50
-
עיגול חיצוני בצבע צהוב שרוחבו .50
המתחרה שולח "חץ" לכיוון המטרה ומקבל
ניקוד בהתאם למיקום בו פגע החץ.
-
פגיעה באזור הצהוב – 10נק'
-
פגיעה באזור הירוק 30 -נק'
-
פגיעה באזור השחור – 100נק'
חברתו מאיה עוזרת לו בפיתוח המשחק וסיפקה לנעם שלוש פונקציות בוליאניות המקבלות כקלט
את שיעור ה X-ואת שיעור ה Y -של נקודת פגיעת החץ בלוח המטרה ומחזירות ערך אמת או שקר
( :)ejbN j .uGNבהתאמה.
;)isBlack(arrowX, arrowY); isGreen(arrowX, arrowY); isYellow(arrowX, arrowY
עזרו לנעם להשלים את התכנית.
.1
השלימו את הפקודות כדי לקבל לוח קליעה למטרה המתאים לתנאי השאלה
;var centerX = canvas.width/2
;var centerY =canvas.height/2
;)_______ drawCircle(centerX, centerY , ________ , _______ , _________,
;)_______ drawCircle(centerX, centerY , ________ , _______ , _________,
;)_______ drawCircle(centerX, centerY, ________ , _______ , _________,
119
.2
השלימו את קטע הקוד הבא (היעזרו בפונקציות שסיפקה מאיה) כדי לחשב את
הניקוד שמקבל השחקן (בהטלה אחת של החץ).
המשתנים .jj rX, .jj rYמוכרים למערכת ומכילים את שיעורי נקודת פגיעת החץ.
;= var score
;____________________ )______________________________( If
;____________________ ) _________________________( else if
;____________________ ) _________________________( else if
; _____________ else
;) __________ : " +הוא שצברת הנקודות מספר"(window.alert
הצעת פתרון +נקודות לבדיקה וקשיים בהם עלולים להיתקל התלמידים.
תרגיל 1
;var x
;var validNum = 0
;___var sumNumbers = __0
)while (validNum != 1
{
;))" 99הקלידו מספר שלם שערכו בין 10ל"(x = parseInt(window.prompt
;__if (10 <= x && x <= 99) validNum = _1
;)"המספר שהקלדתם אינו חוקי ,נא נסו שנית"(else window.alert
}
)for (var k = 1; k <= _x____; k++
{
;_if (k % 2 == 0) sumNumbers = __ sumNumbers +k
;_ else if (_k % 5___ == 0) sumNumbers +k
}
" + x +סכום המספרים מ 1ועד ;document.write( " 
;  המתחלקים ב 2או ב 5הינם;"  
;) " + sumNumbers
קשיים
● השמת הערך " "1למשתנה m.uiiebmכבקרה לקלט תקין ,ולגרום לכך שלולאת ה
rciuNתסתיים כאשר הוזן קלט תקין והתכנית תמשיך להתבצע.
● שימוש במשתנה xבלולאת ה r jכמציין את מספר הפעמים שעל הלולאה להתבצע.
● ההבנה כי מונה לולאת ה r j fמייצג גם את המספר אותו אנו כרגע בודקים וכי זה
הערך שיש להוסיף למשתנה הצבירה
120
2 תרגיל
var x;
var count1 = ____0_;
var sumNumbers = ___0__;
x = parseInt(window.prompt(""הקלידו מספר קליעות לתלמיד, 0));
while (x != __99____)
{
if (0 <= x && x <= 10)
{ __ count1++;______________;
sumNumbers = sumNumbers + x________;
document.write(x + " </br>");
}
else window.alert(" נא נסו שנית,;)"המספר הקלדתם אינו חוקי
x = parseInt(window.prompt(""הקלידו מספר קליעות לתלמיד, 0));
}
document.write("מספר התלמידים שהשתתפו בתחרות: " + count1__ + "</br>");
document.write("סך הנקודות שצברה הכיתה: " + _ sumNumbers _+ "</br>");
document.write("לתלמיד סלים ממוצע: " + _ sumNumbers / count1 +
"</br>");
3 תרגיל
var choice1=_0__________;
var choice2=0;
for (i = 1; i <= _420___; i++)
{
var choice = window.prompt(" ;)" הקישו בחירתכם
if (_choice == "1"____) choice1++;
else if (_choice == "2"__) choice2++;
}
document.write(" מספר התלמידים המרוצים מאוד משירותי ההסעה: " + choice1 +
"<br/>");
document.write(" מספר התלמידים המרוצים באופן חלקי משירותי ההסעה: " + choice2
+ "<br/>");
var choice3 = 420 - choice1 – choice2;
document.write(" מספר התלמידים שאינם מרוצים משירותי ההסעה: " + choice3);
121
If ( choice1 > choice2 && choice1 > choice3 )
document.write(" < התלמידים מרוצים מאוד משירותי ההסעהbr/>");
else If ( choice2 > choice1 && choice2 > choice3 )
document.write(" < התלמידים מרוצים חלקית משירותי ההסעהbr/>");
_else_______________
document.write(" < התלמידים אינם מרוצים משירותי ההסעהbr/>");
קשיים
● קביעת מספר הפעמים שעל הלולאה להתבצע
אינוhc ihN1 hc ihN2 ובכלל העובדה שבניגוד למשתנים,hc ihN3 ● חישוב ערכו של המשתנה
.מופיע כלל כחלק מהלולאה
.● הבנת הכלל על פיו תקבע איזו בחירה קיבלה את מירב הקולות
.● רישום תנאי בוליאני בתחביר השפה
4 תרגיל
קוד
var j = 10;
while (j > 2)
{
document.write(j + "</br>");
}
document.write(j + "</br>");
פלט
10
8
6
j=j-2;
4
2
var j = 1;
var k = 10;
for (j = 1; j < k;j++ ) {
document.write(j * k + "</br>"); k = k - j;
}
document.write(j + "</br>");
var j;
var count = 0;
var total = 0;
for (j = 16; j < 20;j++ ) {
count++;
total = total + count;
document.write(total + "</br>");
}
J=parseInt(total/count);
document.write(j +"</br>" + count +"</br>" + total);
122
10
18
21
4
1
3
6
10
20
4
10
;var j
;var count = 0
;var total = 0
) for (j = 16; j < 20;j++
{
;count++
)if (count % 3 != 0
{
;total = total + count
;)">document.write(total + "</br
}
}
;)document.write(total/count
1
3
7
1.75
קשיים
● אבחנה בין מה שמתבצע בתוך בלוג הפקודות של הלולאה למתבצע מחוץ לבלוג זה.
● ביצוע מעקב נכון אחר שינוי ערכי המשתנים.
תרגיל :5
תרגיל 6
123
קשיים
● מעקב אחר ערכו הנכון של כל אחד מהמשתנים המשמשים לציור המלבנים
● שינוי בערכו של כמכפלה בערכו של מונה לולאת ה .r j
● השמת הצבע הנכון לכל מלבן בהתאמה .להתנייה
תרגיל 7
3+5
3+5=3
6=5
6=8
8=a+b
קשיים
דגשים – שאלה 7
● אבחנה בין משתנה למחרוזת טקסט.
● אבחנה בין משתנה למחרוזת טקסט
● לדעת מתי מתבצעת פעולת חיבור אריתמטית ומתי
● הבנת התפקיד הכפול של האופרטור ""+
כתלות בסוג האופרנדים.
מתבצע שרשור של מחרוזות טקסט.
תרגיל 8
;var centerX = canvas.width/2
;var centerY =canvas.height/2
;)drawCircle(centerX, center, 150, "black", "black",1
;)drawCircle(centerX, center, 100,"green","black",1
;)drawCircle(centerX, centerY, 50, "yellow","black",1
;= var score
;If (isBlack()) score= 10
;else if (isGreen()) score= 30
;else if (isYellow()) score= 100
; else score=0
;) : " + scoreמספר הנקודות שצברת הוא"(window.alert
קשיים
דגשים – שאלה 8
● קביעת הסדר הנכון של העיגולים על פי השכבות
● תכנון ציור ע"ג הקנבס
● הבנת תפקידן של הפונקציות והשימוש/זימון שלהן
● קביעת הסדר הנכון לצורות
● קריאה נכונה לפונקציה.
● שימוש בפונקציה המחזירה ערך
● ה NuGNהאחרון – הצורך ערך אפס למשתנה Gh jNבמידה
והחץ לא פגע בלוח המטרה
● בניית מערכת של התניות
124
דף עבודה מסכם :תכנות צד לקוח
פיתוח :רחל פרלמן ודורון זוהר ,יעוץ :ד"ר דורון זוהר
שאלה 1
תלמידים כתבו אתר המורכב מ 3-דפיםp1.html, p2.html, p3.html :
לפניכם חלק מקוד המקור של דף .p1.htmlהשלימו את החסר ,כך ש:
א.
הקלקה על המלל "מעבר לדף "2תעביר לדף p2.html
ב.
הקלקה על התמונה pic4.jpgהנמצאת באותה תיקיה עם p1.htmlתעביר לדף p3.html
><html
>"<body dir="rtl
)א(
)ב(
></body></html
שאלה 2
לפניכם מספר קטעי קוד .בצד כל קוד רשמו את הפלט המתקבל:
;var number =10
;var x=0
{(while (x<number
;x=x+3
;)alert(x
}
;var result =0
;var num =5
{)for (var k=0; k<num; k++
;result = result+ k
}
;)alert(result
;var number =5836
;var x=0
{(while (number != 0
;x++
;number = number / 10
}
;)alert(x
125
שאלה 3
דגל הולנד הבא מיוצג ע"י שלושה פסים אופקיים בצבעים אדום (העליון) ,לבן וכחול על פי הציור
הבא:
כתבו קטע קוד JavaScriptהמצייר את דגל הולנד בגודל 180 x 120 :פיקסלים בתוך המסגרת
השחורה כמוצג באיור.
יש להציג את הדגל במרכז הקנבס.
שאלה 4
א .הוגדרה פונקציה חדשה בשם ,rectRהמקבלת 6ארגומנטים :שיעור ,xשיעור ( yשל הפינה
הימנית העליונה של המלבן המבוקש) ,אורך ,רוחב ,צבע עט ,עובי עט.
הפונקציה מציירת מלבן בהתאם לנתונים שהוזנו ,תוך שימוש בפונקציה drawLineבלבד.
חלק מהקוד של הפונקציה נמחק ,יש להשלימו.
שימו לב,
.1הפונקציה זו שונה מהפונקציה לציור מלבן המוכרת לכם.
.2פונקציה החדשה מציירת מלבן החל מהפינה הימנית העליונה.
{ )var _____ = function(x, y, width, height, pen, pen_width
;)drawLine(x, y, x, y+height, pen, pen_width
;)drawLine(x, y+height, x-width, ________ , pen, pen_width
;)drawLine(x-width, ______ , x-width, _____ , pen, pen_width
;)drawLine(x-width, y, ___ , ____ , pen, pen_width
}
ב .ציירו את הצורות המתקבלות על קנבס בגודל 400 x 400פיקסלים בהתאם לפונקציה
RectRשהגדרתם.
רשמו בתוך המלבן את צבע קו המתאר המתאים לו בהתאם לקוד.
126
שורות קוד
Canvas
;"var pen = "red
;) rectR(300,100, 50, 200, pen, pen_width
;"pen = "blue
;)rectR(100,100, 50, 50, pen, pen_width
;"pen = "green
;)rectR(200,200, 100, 50, pen, pen_width
שאלה 5
ענבר מעלה מידי יום פוסט לחשבון הפייסבוק שלה .על פי מספר הלייקים לפוסט זה היא יודעת עד
כמה הקוראים ,מסכימים עם הכתוב:
מספר לייקים גדול מ – 25מציין כי קוראים רבים מסכימים עם הכתוב
מספר לייקים קטן מ 10 -מציין כי בודדים הקוראים המסכימים עם הכתוב
בין 10ל( 25-כולל) לייקים מציין כי מספר מועט של קוראים מסכימים עם הכתוב
לפניכם אלגוריתם שכתבה ענבר .האלגוריתם הקולט את מספר הלייקים שהתקבלו עבור פוסט ומציג
הודעה מתאימה.
האלגוריתם משתמש במשתנה בשם likeלקליטת מספר הלייקים .באלגוריתם חסרים 3תנאים לוגים
ממוספרים מ 1-ועד .3
><script
;)"הכנס מספר לייקים"(like = window.prompt
{ )____)if ( ___(1
;)"> <br /קלט שגוי "(document.write
}
{)____)else if (___(2
;)"> <br /קוראים רבים מסכימים עם הכתוב "(document.write
}
{)____)else if (___(3
;)"> <br /קוראים בודדים מסכימים עם הכתוב "(document.write
}
;)"> <br /מספר מועט של קוראים מסכימים עם הכתוב "(else document.write
></script
127
מקמו את ההוראות הבאות במקום המתאים באלגוריתם (כתבו את הספרה המציינת את
המיקום הנכון):
ההוראות החסרות
()i
like>25
()ii
like<0
()iii
like<10
מיקום ההוראה 1( :עד )3
שאלה 6
כתבו קטע קוד הקולט את אחוז הטעינה שנותר בטלפון נייד .על קטע הקוד לצייר את הסוללה על פי
ההנחיות הבאות:
א .רוחב הסוללה קבוע 50פיקסלים.
ב .גובה סוללה נקבע בהתאם לאחוז הטעינה שנותר.
לדוגמה
100%טעינה שווה ל 200-פיקסלים.
80%טעינה שווה 160-פיקסלים.
0%טעינה שווה ל 0 -פיקסלים.
ג .צבע הסוללה נקבע בהתאם להנחיות הבאות:
מעל 70%בצבע ירוק,
בין 70%ל 40%-בצבע כחול,
בין 39%ל 20%-בצבע כתום,
וכל אחוז מתחת ל 20-אחוז בצבע אדום.
שאלה 7
בביה"ס 'עירוני חברתי' לומדים 657תלמידים .במסגרת עבודת חקר בקשו תלמידי כיתה ז' לבדוק
כמה תלמידים בבית הספר הם רב לשוניים ,כלומר דוברים יותר משפת אם אחת.
לשם כך כתבו התלמידים אלגוריתם ובקשו מתלמידי בית הספר לענות לשאלה שבאלגוריתם .תלמיד
הדובר שפה אחת נדרש להקיש ,1תלמיד הדובר 2שפות נדרש להקיש 2ותלמיד הדובר 3שפות ומעלה
נדרש להקיש .3
בסיום הקליטה האלגוריתם מודיע כמה תלמידים בבית הספר הם דו לשוניים (דוברים 2שפות) ,כמה
רב לשוניים (דוברים 3שפות ויותר) וכמה מהם חד לשוניים (דוברים שפה אחת).
לפניכם שלד האלגוריתם הקולט מכל תלמיד את בחירתו ( 1או 2או )3ומודיע כמה תלמידים
משתייכים לכל אחת מהקטגוריות.
באלגוריתם נעשה שימוש במשתנה ( choiceבחירה) המייצג את בחירת התלמיד.
כמו כן נעשה שימוש במשתנים count2למניית מספר התלמידים הדו-לשוניים ו count3-למניית
התלמידים הרב לשוניים .שימו לב כי האלגוריתם אינו מונה את מספר התלמידים החד לשוניים אך
דורש לחשב את מספרם.
128
><script
_____)_____(1
_____)_____(2
;var choice
{)for ( k=1; k<=__(3)__; k++
;))"בחירה-1 :שפה אחת-2 ,שתי שפות-3,שלוש שפות או יותר"( _____)choice=_____(4
{)_____)if (_____(5
;_____)_____(6
}
{)_____)if (_____(7
;count3=count3+1
}
}
;)"><br/כמות תלמידים חד לשוניים"document.write(_____(8)______+
;)"><br/כמות תלמידים דו לשוניים"document.write(_____(9)______+
;)"><br/כמות תלמידים רב לשוניים"document.write(_____(10)_____+
></script
השלימו את השלד.
א)1 ( .
ו.
ב)2 ( .
ז)7 ( .
( )3
ח)8 ( .
ד)4 ( .
ט)9 ( .
ה)5 ( .
י)10( .
ג.
129
( )6
דף עזר תכנות צד לקוח – סיכום הוראות
HTML
ירידת שורה
><br /
כותרות
מבנה הדף:
><html
><h1></h1> … <h6></h6
><head
מקטע
><div></div
טבלה
><table><tr><td></td></tr></table
></head
><a href="…"></a
><body
><img src="pic/X.jpg" alt="X" height="10" /
></body
קישוריות
תמונה
><title></title
></html
JAVASCRIPT
הוראת ההדפסה:
;)(document.write
הגדרת משתנים:
;var score = 5
אופרטורים חשבוניים( + :חיבור מספרים או שרשור מחרוזות) ( % / * -שארית) -- ++
אופרטורים לוגיים( == :שווה) =! (שונה) > < => =< && (וגם) || (או) ! (לא)
{)>תנאי<(if
{)>תנאי<( while
} סדרת הוראות//
} סדרת הוראות//
} סדרת הוראותelse { //
{ )function newFunc(n1, n2
} סדרת הוראות//
{)>שינוי הערך< ;>ע .עליון< ;>ע .התחלתי<( for
} סדרת הוראות//
התגית ><Canvas
נתייחס להגדרת בד הציור ולסקריפט הבא:
><body><canvas id="myCanvas" width="300" height="150"></canvas
><script
; )'var canvasObj = document.getElementById('myCanvas
; )'var ctx = canvasObj.getContext('2d
; )(ctx.beginPath
הקוד שיכתב כאן יקבע את הצורה והסגנון של ציור על הבד
; )(ctx.fill
; )(ctx.endPath
הוראת הציור בפועל ctx.stroke() ; //
></script></body
130
מלבן
קו
מיקום התחלת הקו ctx.moveTo(X, Y); //
מיקום סוף הקו //
קשת
(נקודה שמאלית עליונה)
;)אורך ,רוחב ctx.fillRect(X, Y,
;) ctx.lineTo(X, Yמשולש /מסלול (סגור /פתוח)
נקודת התחלה ctx.moveTo(X, Y); //
(נקודת מרכז המעגל)
;)כיוון ,סיום ,התחלה ,רדיוס ctx.arc( X, Y,
;)ctx.lineTo(X , Y1
;)ctx.lineTo(Y1, X
נקודת סיוםctx.lineTo(X , Y); //
אותיות
;' סגנון "סוג גופן" גודל גופן ' = ctx.font
;)", X, Yטקסט"(ctx.strokeText
תמונה
תכונות הציור
צבע רקע //
;… = ctx.fillStyle
;)(var img = new Image
עובי הקו //
;… = ctx.lineWidth
נתיב התמונה img.src = "imgName.png"; //
צבע מסגרת ctx. strokeStyle = …; //
טעינת התמונה img.onload = function () { //
;}
131
;)אורך ,רוחב g.drawImage(img, X, Y,
דף תשובות
1 שאלה
<html>
<body dir="rtl">
(< )גa href="p2.html">2 <מעבר לדף/a>
(< )דa href="p3.html"><img src="pic4.jpg"></a>
</body></html>
2 שאלה
3 6 9 12
10
4
3 שאלה
<html>
<body>
<canvas id="canvasFrame" width="400" height="400" style="backgroundcolor:#f5ff27"></canvas>
<script>
var elem = document.getElementById('canvasFrame');
var ctx = elem.getContext('2d');
var middleX=(400-180)/2;
var middleY=(400-120)/2;
ctx.fillStyle = "red";
ctx.fillRect(middleX, middleY, 180, 40);
ctx.fillStyle = "white";
ctx.fillRect(middleX, middleY+40, 180, 40);
ctx.fillStyle = "blue";
ctx.fillRect(middleX, middleY+80, 180, 40);
</script>
</html></body>
- 132 -
4 שאלה
function(x, y, width, height, pen, pen_width) {
drawLine(x, y, x, y+height, pen, pen_width);
drawLine(x, y+height, x-width, y+height , pen, pen_width);
drawLine(x-width, y+height , x-width, y , pen, pen_width);
drawLine(x-width, y, _x_ , _y__ , pen, pen_width);
}
מומלץ להציג לתלמידים את התכנית המלאה הכוללת את פעולת העזר
<html>
<head><script>
function rectR(x, y, width, height, pen, pen_width){
drawLine(x, y, x, y+height, pen, pen_width);
drawLine(x, y+height, x-width, y+height , pen, pen_width);
drawLine(x-width, y+height , x-width, y , pen, pen_width);
drawLine(x-width, y, x ,y , pen, pen_width);
}
function drawLine(x1,y1,x2,y2,pen, pen_width){
ctx.strokeStyle = pen;
ctx.lineWidth = pen_width;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
</script></head>
<body>
<canvas id="canvasFrame" width="400" height="400" style="backgroundcolor:#f5ff27"></canvas>
<script>
var elem = document.getElementById('canvasFrame');
- 133 -
var ctx = elem.getContext('2d');
var x=200;
var y=100;
var width=100;
var height=50;
var pen="blue"
var pen_width=5;
rectR(x, y, width, height, pen, pen_width);
.ב
Canvas
5 שאלה
)3 עד1( :מיקום ההוראה
ההוראות החסרות
2
like>25
)i(
1
like<0
)ii(
3
like<10
)iii(
- 134 -
6 שאלה
<html>
<head><script>
function rectR(percent){
var num=0;
if (percent==100){
num=200;
ctx.fillStyle = "green";
}
else if(percent>=80){
num=160;
ctx.fillStyle = "blue";
}
else if (num>=50){
num=100;
ctx.fillStyle = "orange";
}
else{
num=20;
ctx.fillStyle = "red";
}
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.fillRect(50, 100, num, 50);
ctx.strokeRect(50, 100, 200, 50);
ctx.stroke();
}
</script></head>
<body>
- 135 -
<canvas id="canvasFrame" width="400" height="400" style="backgroundcolor:#f5ff27"></canvas>
<script>
var elem = document.getElementById('canvasFrame');
var ctx = elem.getContext('2d');
var percent = parseInt(window.prompt(";))"הכנס מספר
rectR(percent);
</script>
</html></body>
7 שאלה
השלימו את השלד
count2 = 0 )1(
count3 = 0 )2(
657 )3(
window.prompt )4(
choice == 2 )5(
count2 = count2 + 1 )6(
choice == 3 )7(
657 – count2 – count3 )8(
count2 )9(
count3 )10(
- 136 -
תרגילי הכנה לקראת משימה מסכמת
שאלה 1
א .בביה"ס "סובלנות ומצוינות" החליטו להוסיף לאתר ביה"ס קישור לאתר
. www.TheOtherIsMe.org.ilבחרו את השורה המתאימה שעליהם להוסיף לקוד המקור של
הדף.
1
> < link=" https:// www.TheOtherIsMe.org.il "> TheOtherIsMe </link
< ahref=" https:// www.TheOtherIsMe.org.il "> TheOtherIsMe </ahref < 2
3
> <a href="https:// www.TheOtherIsMe.org.il "> TheOtherIsMe </a
4
> < p=" https://www.TheOtherIsMe.org.il "> TheOtherIsMe </p
ב .מרים ודוד הוסיפו לקוד המקור של הדף תגית של תמונה.
<"< img src="picture.jpg
ומעוניינים שתמונה זו תהווה לינק לאתר www.TheOtherIsMe.org.ilהשלימו את הנדרש לקוד:
>"< img src="picture.jpg
ג .הוחלט להוסיף ולרשום "האחר הוא אני" 4פעמים בצבעים שונים
(.)blue, red, yellow, green
לפניכם חלק מקוד המקור של הדף .השלימו את החסר:
><html
>"<body dir="rtl
)ה(
)ו(
)ז(
)ח(
></body></html
- 137 -
2 שאלה
: רשמו לצד כל קוד את הפלט המתקבל. אין קשר בין קטעי הקוד השונים.)script( לפניכם מספר קטעי קוד
קוד
פלט
var k;
.א
for (k= 15; k < 20; k++) {
document.write(k+" ");
}
document.write("<br/>");
document.write(";)"שלום
var k=5;
.ב
var sum=0;
while(sum<30){
sum=sum+k;
k=k+10;
}
document.write(sum+"<br/>");
document.write(k+"<br/>");
var k=40;
var sum= k;
.ג
for (k = 1; k <= 10; k++) {
if (k %2==0){
sum= sum+ k;
}
}
document.write(sum);
.ד
var number=35;
var digit1,digit2;
digit1 = parseInt(number % 10);
digit2 = parseInt(number / 10);
document.write(digit1+digit2);
- 138 -
שאלה 3
בכיתה מדעית טכנולוגית קיימת תחרות כישרונות בה מתמודדים אמיר יסמין ואיתמר .לפניכם אלגוריתם הקולט
את מספר ההצבעות שקיבל כל מתמודד ,בודק ומדפיס את שם המתמודד שזכה במקום הראשון .נתון שאין שוויון
במספר ההצבעות.
א .השלימו את ההוראות החסרות
><html
> "<body dir="rtl
><script
;))"הצבעות עבור אמיר"(var amir = parseInt(window.prompt
;))"הצבעות עבור יסמין"(var yasmin = parseInt(window.prompt
;))"הצבעות עבור איתמר"(var itamar = parseInt(window.prompt
)___________)if (________(1
;)"><br/אמיר מקום ראשון "(document.write
)___________)else if (________(2
;)"><br/יסמין מקום ראשון "(document.write
___________)else ________(3
ב .בכיתה הוחלט להעניק פרס גם למתמודד שהגיע למקום השני .הוסיפו תנאים לאלגוריתם הבודק ומדפיס את
שם המתמודד שזכה במקום השני.
)___________)if (________(4
;)"><br/אמיר מקום שני "(document.write
)___________)else if (________(5
;)"><br/יסמין מקום שני "(document.write
___________)else ________(6
></script></body><html/
- 139 -
שאלה 4
במסגרת זהירות בדרכים הוחלט לערוך סקר בקרב 120תלמידי בית הספר על דרך ההגעה לביה"ס.
בסקר נשאלים התלמידים כיצד הם מגיעים לביה"ס על פי האפשרויות הבאות 1 :אם מגיעים בהסעה 2 ,אם
מגיעים באופניים ו 3-אם מגיעים בהליכה.
ידוע כי משך זמן הליכה הוא 20דק' ,משך זמן הגעה באופניים הוא 10דק' ומשך הזמן בהסעה 3דק'.
כתבו קוד אשר:
א .קולט מידע מכל עונה לסקר על דרך ההגעה לבית הספר ( 2 ,1או ,)3מחשב ומדפיס כמה תלמידים מגיעים
לביה"ס בכל אחת משלוש הדרכים.
ב .מחשב ומדפיס את הזמן הממוצע להגעה לבית הספר.
לפניכם קוד חלקי ,השלימו את ההוראות החסרות באלגוריתם.
יש להתייחס למשתנים הבאים:
count1
– למניית מספר התלמידים המגיעים בהסעה
count2
– למניית מספר התלמידים המגיעים באופניים
count3
– לחישוב מספר התלמידים המגיעים בהליכה.
choice
– לקליטת בחירת דרך ההגעה לביה"ס ( 2 ,1או )3
average
– לחישוב הזמן הממוצע עבור ההגעה לביה"ס.
לפניכם קוד חלקי ,השלימו את ההוראות החסרות.
><script
;, count3, k , average
2
=, count2
{ ); k++
1
3
=var count1
=< for (k = 1; k
;))"הכנס/י בחירת אפשרות הגעה choice = parseInt(window.prompt("1,2,3
;
)
4
5
= count1
)
;
8
=
6
( if
( else if
7
}
__________count3 = _______9
;)" מספר התלמידים שמגיעים בהסעה " document.write ( count1 +
;)"מספר המטיילים שמגיעים באופניים " document.write ( count2 +
- 140 -
document.write ( count3 + " ;)" מספר המטיילים שבחרו בהליכה רגלית
average =
10
;
document.write (average + " ;)"זמן ממוצע בדקות עבור הגעת תלמיד לביה"ס
</script>
5 שאלה
canvas הכולל תגיתHTML לפניכם קוד דף
<html><head></head><body>
<canvas id="canvasFrame" width="400" height="400" </canvas>
<script>
var num = 400;
var canvasObj = document.getElementById("canvasFrame");
var ctx = canvasObj.getContext("2d");
ctx.fillStyle = "blue";
ctx.rect ( num-300 , num-300 , 200 , 100);
ctx.fill ( );
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(150, 200, 25, 0, Math.PI * 2, true);
ctx.arc(250, 200, 25, 0, Math.PI * 2, true);
ctx.fill();
</script></body></html>
. ואת הציור המתקבל מהרצת הדףcanvas ציירו על גבי המשבצות את גבולות ה
. ניתן לציין את הצבעים במלל,אין צורך להשתמש בצבעים
.50 X 50 כל משבצת הינה
- 141 -
.א
שאלה 6
במסגרת זהירות בדרכים תלמידי השכבה הכינו רמזור להולכי רגל
המורכב מ 2-עיגולים ומלבן המקיף אותם.
העיגול העליון הינו בצבע אדום ואילו העיגול התחתון בצבע ירוק,
וכן יש מלבן שחור המקיף הכל בצורת מלבן.
נתוני עיגול אדום , 25– R-מיקום 100,100
נתוני עיגול ירוק , 25– R-מיקום 100,200
– xRמיקום עיגול אדום ,מרחק מleft-
– xGמיקום עיגול ירוק ,מרחק מleft-
– yRמיקום עיגול אדום ,מרחק מtop-
– yGמיקום עיגול ירוק ,מרחק מtop-
השלימו את ההוראות החסרות באלגוריתם.
> <html><body
><canvas id="canvasFrame" width="400" height="400" ></canvas
><script
;__)var x1 = __(1
- 142 -
var y1 = __(2)__;
var x2 = __(3)__;
var y2 = __(4)__;
var canvasObj = document.getElementById("canvasFrame");
var ctx = canvasObj.getContext("2d");
//Draw a black square
____(5)__= "black";
____(6)__ (75, 50, 50,150);
//Draw a red circle
ctx.beginPath();
____(7)_____
____(8)__ (x1, y1, 25, 0, Math.PI * 2, true);
ctx.fill();
//Draw a red circle
ctx.beginPath();
____(9)______
____(10)__ (x2, y2, 25, 0, Math.PI * 2, true);
ctx.fill();
</script>
</body>
</html>
הצעות פתרון
4
3
2
1 א-1
<a href=" https://www.TheOtherIsMe.org.il ">< img src="picture.jpg"></a > ב-1
ג-1
<html>
<body dir="rtl">
- 143 -
(< )אp style="color:blue"><האחר הוא אני/p>
()ב
<p style="color:red"><האחר הוא אני/p>
()ג
<p style="color:yellow"><האחר הוא אני/p>
(< )דp style="color:green"><האחר הוא אני/p>
15 16 17 18 19 ) (א.2
שלום
45 )(ב
35
30
)(ג
8 )(ד
' סעיף א.3
)amir>yasmin && amir>itamar( )1(
)yasmin > amir && yasmin >itamar(______)2(
document.write)") ("איתמר במקום הראשון3(
' סעיף ב.3
((amir>yasmin && amir<itamar)||(amir>itamar && amir<yasmin ))____)4(
((yasmin>amir && yasmin<itamar)||(yasmin>itamar && yasmin<amir (()5(
document.write)") ___________________________ ("איתמר במקום השני6(
.4
0
)2(
0 )1(
choice==1
)4(
120 )3(
choice==2
)6(
count1+1 )5(
count2+1
)8(
count2 )7(
(count1*5+count2*10+count3*20)/120 )10(
120-count1-count2 )9(
- 144 -
.6
________100_________ )1(
________100_________ )2(
________100_________ )3(
________150_________ )4(
_______ ctx.fillStyle_____ )5(
________ ctx.fillRect_____ )6(
ctx.fillStyle = "red";______)7(
ctx.arc(x1, y1, 25, 0, Math.PI * 2, true(; )8(
ctx.fillStyle = "green";____ )9(
ctx.arc(x2, y2, 25, 0, Math.PI * 2, true(; )10(
- 145 -
תרגילי חזרה לקראת משימה מסכמת – מני עבודי ..................................................
- 146 -
147
מודול סייבר ואינטרנט :תרגילי חזרה לקראת משימה מסכמת
פיתוח :מני עבודי ,יעוץ :ד"ר דורון זוהר
פרק :1ייצוג מידע
האיור הבא מתייחס לשאלות 1-3
לפניכם כתובת פיזית (כתובת )MACשל כרטיס רשת במחשב כלשהו.
.1באיזה בסיס נמצאת כתובת כרטיס הרשת?
א .בסיס עשרוני ()10
ב .בסיס בינארי ()2
ג .בסיס אוקטלי ()8
ד .בסיס הקסדצימאלי ()16
.2מהו מספר הסיביות של כתובת זו?
רמז :חשבו כמה סיביות נדרש להמיר כל "ספרה" בבסיס הנוכחי
א24 .
ב36 .
ג48 .
ד96 .
.3תרגמו את הכתובת לבסיס בינארי .ניתן להיעזר בטבלת המרת הבסיסים.
כתובת
פיזית
7F
F1
EB
בסיס
בינארי
- 147 -
DE
F0
.4לפניכם מפרט חומרה של מחשב .איזה נתון מייצג נפח אחסון של מידע?
נתוני מחשב
* מעבד2.4GHz :
* כרטיס רשת100MB :
* דיסק קשיח1TB :
* מסך1920x1080 :
א .מעבד
ב .כרטיס רשת
ג .דיסק קשיח
ד .מסך
.5אתם מעוניינים להגדיל את נפח דיסק קשיח ( )Hard Diskלמחשב שרכשתם לפני כשנה .נפח
הדיסק הקשיח הנוכחי הוא .0.5TBסדרו את הנפחים הבאים ביחס לנפח הדיסק הקיים לכם:
300GB, 1TB, 450000MB, 75000KB
הנפח הנמוך
ביותר
הנפח הגבוה
ביותר
האיור הבא מתייחס לשאלות 6-8
להלן ייצוג של סמל השלום בגודל 11x12פיקסלים.
- 148 -
.6חשבו את ייצוג התמונה לפי שיטת .bit map
תמונה
ייצוג לפי שיטת bit map
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
.7חשבו את ייצוג התמונה לפי שיטת .RLE
תמונה
ייצוג לפי שיטת RLE
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
.8מספר פלינדרומי הינו מספר שסדר ספרותיהם הוא סימטרי.
לדוגמא ,המספר 66366הינו מספר פלידרומי לעומת המספר 13232שאינו מספר פלינדרומי.
כמה מספרים פולינדרומים קיימים בייצוג התמונה על-פי ?RLE
א5 .
ב6 .
ג7 .
ד12 .
- 149 -
תשובות
.1תשובה ד .בסיס הקסדצימאלי ()16
.2תשובה ג48 .
.3להלן המרת הכתובת לבסיס בינארי:
כתובת
פיזית
7F
EB
F1
DE
F0
בסיס 2
01111111
11101011
11110001
11011110
11110000
.4תשובה ג .דיסק קשיח
.5להלן סידור נפחי הדיסק הקשיח:
הנפח הגבוה
ביותר
0.5TB
1TB
הנפח הנמוך
ביותר
450000MB
300GB
75000KB
.6ייצוג התמונה לפי שיטת .bit map
שימו לב כי יש להשלים 0מוביל עבור הספרה הראשונה בכל שורה (השלמה ל 12 -סיביות):
תמונה
ייצוג לפי בסיס בינארי
- 150 -
.7ייצוג התמונה לפי שיטת .RLE
תמונה
ייצוג לפי שיטת RLE
.8תשובה ד12 .
(רואים כי התמונה סימטרית כלפי ציר אנכי שעובר בעמודה 6ולכן בכל השורות מתקבל
פלינדרום)
- 151 -
© Copyright 2024