אם הגעתם עד הלום בשיעורי התכנות שלנו, הגעתם לפרס. היום אנחנו לומדים על פונקציות ואז אנחנו הולכים לעשות משחק ניחושים פשוט מאוד.
שיעורים אלה עובדים בצורה הטובה ביותר עם הסרטון, שתוכל לראות למעלה, אך אנו מספקים גם טקסט לעיון בהמשך. גם אם אתה מעדיף לקרוא, הסרטונים יהיו מפורשים יותר וידגימו איך לעשות את כל מה שאנחנו דנים בו. אם הטקסט נראה קצת מסובך מדי, הקפד לצפות בסרטון.
היום הוא השיעור האחרון שלנו (יהיה "אפילוג" עם שיעור קטן על שיטות עבודה מומלצות ומשאבים נוספים בעקבות הקורס הזה), ואנחנו הולכים לכסות שני דברים: פונקציות ויצירת משחק ניחושים פשוט מאוד. אם עברת את זהשיעור 3, רוב הסיכויים שתמצא פונקציות קלות למדי ללמידה. אנחנו הולכים להתמודד עם זה קודם ואז להשתמש בידע הזה - בתוספת קצת HTML - כדי להרכיב את המשחק.
מהי ה-F פונקציה?
בחייך, אתה כבר יודע הכל על פונקציות. השתמשת באחד כל הזמן הזה: alert(). פונקציה היא בעצם אמצעי לקרוא לגוש גדול של קוד עם מעט טקסט בלבד. פונקציות הן בערך כמו ההרחבת טקסטשל תכנות. למרות שהשתמשת ב-alert(), זו רק פונקציה מובנית (שיש הרבה מהם ב-JavaScript ובכל תכנות שפות תכנות מודרניות מונחה עצמים). היום, אנחנו הולכים ליצור פונקציה משלנו שבסופו של דבר תעזור לנו ליצור משחק ניחושים. ראשית, בוא נסתכל על האופן שבו פונקציה מוצהרת בקוד שלך:
function nameOfFunction(variables)
{}
זה אמור להיראות די מוכר. פונקציות נראות מאוד כמו עבור לולאות והצהרות if. בוא נפרק את מה שאנחנו מסתכלים עליו. ראשית, נתחיל במילהfunctionלהגיד למחשב שאנחנו מגדירים פונקציה. לאחר מכן עלינו לתת שם לפונקציה הזו. בדוגמה זו זה נקראnameOfFunctionאבל בדרך כלל תקרא לזה משהו יחסית למה שהוא עושה (כמו איך alert() יוצר תיבת דו-שיח של התראה בעת שימוש). אחרי שם הפונקציה מופיעים סוגריים. אתה לא חייב לשים שום דבר בתוך הסוגריים, אבל אם אתה צריך לתת לפונקציה מידע כלשהו (שנקרא להעביר לה משתנים/משתנה) אתה צריך לציין את שם המשתנים שבהם תשתמש בתוך הפונקציה. זה אולי קצת מבלבל עכשיו, אבל אנחנו הולכים להסתכל על זה קצת יותר מאוחר יותר אז אל תדאג. לבסוף, יש לנו את הפלטה המתולתלת שלנו בסוף. כל מה שהפונקציה צריכה לעשות יכנס לתוך הפלטה המתולתלת האלה.
עכשיו כשאתה יודע איך מוגדרת פונקציה ומה היא עושה, בואו נשתמש בה!
הכנת משחק ניחושים פשוט ב-JavaScript
יש שני חלקים לתהליך הזה: הפונקציה והממשק (שזה בעצם טופס שבו המשתמש יכול להזין מספר). ראשית, נתחיל עם הפונקציה.
יצירת הפונקציה שמפעילה את המשחק שלך
כדי ליצור את המשחק, נצטרך ליצור פונקציה המגיבה לקלט המשתמש. בואו נרכיב פונקציה שעושה את זה:
var perfectNumber = 12;function checkApples(numApples){ if (numApples == perfectNumber) { alert("You ate the perfect number of apples!"); } else if (numApples > perfectNumber) { alert("You ate way too many apples."); } else if (numApples < perfectNumber) { alert("You didn't eat enough apples."); }}אוקיי, יש הרבה מה להסתכל עליו אז בואו נפרק את זה. ראשית, יצרתי משתנה בשםperfectNumberוהגדר אותו ל12. זה המספר שהמשתמש ינסה לנחש במשחק שלנו. אתה יכול להגדיר את המספר הזה לכל מה שאתה רוצה, ואם אתה רוצה כמה נקודות בונוס אתה יכול לנסות ליישם את זההפונקציה randRange()לעשות את המספר באקראי בכל פעם שהדף נטען - אבל בוא נעשה קודם כל את הדברים הבסיסיים.
אחרי המשתנהperfectNumberמוגדר, אנו יוצרים פונקציה שנקראתcheckApplesומעבירים לו משתנה שנקראnumApples. זה אומר שכאשר אנו קוראים לפונקציה הזו נצטרך לתת לה מספר, שייראה משהו כמו checkApples(5). עם זאת, המספר הזה יגיע מהמשתמש, אז אנחנו לא הולכים לדבר על זה עדיין.
בתוך הפונקציה יש משפט if עם שלושה תנאים. התנאי הראשון בודק אם numApples - משתנה המספר המועבר לפונקציה checkApples - שווה ל-perfectNumber - המשתנה שהגדרנו קודם לכן (זו התשובה שהמשתמש ינסה לנחש. אם התנאי הזה מתקיים, המשתמש יקבל התראה שמברכת אותם על בחירת המספר הנכון. אם לא, התנאי השני יבדוק אם הם ניחשו גבוה מדי הם יקבלו התראה שהם אכלו יותר מדי תפוחים בעצם אותו דבר קורה עם המצב השלישי, אבל אם הם מנחשים מספר נמוך מדי.
זה כל מה שיש לפונקציה, והיא די פשוטה. אבל איך נבקש מספר מהמשתמש? זה ידרוש שילוב של קצת JavaScript עם קצת HTML.
הכנת טופס קלט משתמש
יצירת טופס היא משהו שאולי עשית בעבר אם אי פעם השתמשת ב-HTML. זה די קל. ראשית, תצטרך לשים את זה במסמך ה-HTML שלך:
<form> <input type="text" name="numApples" id="numApples" /> <input type="Submit" name="Submit" /></form>
זה יביא לך טופס סופר פשוט עם תיבת טקסט וכפתור שלח, אבל זה לא יעשה כלום. ראשית, עלינו להוסיף כמה דברים לתג הטופס כדי לחבר את הקלט שלךcheckApples()פוּנקצִיָה:
<form method="POST" name="applesForm" onSubmit="checkApples(document.applesForm.numApples.value);">
אז מה בדיוק הוספנו? ראשית, אמרנו לטופס להשתמש בשיטת POST. זה לא נורא חשוב כי זה יעבוד בכל מקרה, אבל שיטת ה-POST קצת יותר נקייה למה שאתה עושה כאן. POST לא יכניס את כל המשתנים שנשלחו בטופס לכתובת ה-URL, אבל GET - האפשרות האחרת שלך - כן. שנית, קראנו לטופס applesForm כי נצטרך להתייחס אליו בשם כאשר אנו מציינים היכן נמצאת תיבת הטקסט של קלט המשתמש במסמך. לבסוף, יש לנו משהו שנקראonSubmitמה שמאפשר לנו להפעיל קוד JavaScript בעת לחיצה על כפתור השליחה. ברוב הטפסים יהיה גם מאפיין שנקרא פעולה, שאומר לטופס לאן ללכת לאחר השליחה, אבל אנחנו רק רוצים להישאר בדף כדי שלא נצטרך אותו. אם נחזור ל-onSubmit, אתה יכול לראות שבעצם הגדרנו אותו לפונקציה checkApples() . במקום לתת ל-checkApples() מספר, עם זאת, נתנו אותוdocument.applesForm.numApples.value. כך אנו מתייחסים לתיבת הטקסט של קלט המשתמש בטופס שלנו. אנו עושים זאת על ידי שימוש ב-Document Object Model, או DOM, ב-JavaScript. בואו נפרק את זה:
מִסְמָך- מסמך ה-HTML שלך.
תפוחיםטופס- שם הטופס שיצרנו.
numApples- השם של שדה הטקסט שיצרנו עבור קלט המשתמש, שנמצא בתוך ה-applesForm.
עֵרֶך- אנחנו לא רוצים את שדה הטקסט שיצרנו, אלא את מה שנמצא בתוך שדה הטקסט. אתה צריך לצרף
valueלסוף שדה טקסט אתה יכול לקבל את הערך שלו ולא הפניה לאובייקט שדה הטקסט שמכיל אותו.
ברגע שיש לך את כל זה בקוד שלך, סיימת! שמור את הדף, טען אותו מחדש בדפדפן ונסה לנחש את המספר שלך. כוון גבוה מדי, נמוך מדי, ואז נחש את זה נכון. אתה אמור לגלות שאתה מקבל את התגובות שהגדרת בקוד שלך התראה בכל פעם שאתה מנחש. אז, מזל טוב, הרגע עשית את המשחק הראשון שלך!
זה כמעט הזמן להיפרד
ובכן, זה בערך עושה את זה עבור שיעורי הקידוד הבסיסיים שלנו. אנו מקווים שנהניתם מהם ותרגישו מוכנים לגשת לדברים מסובכים יותר כשאתם מתחילים את הגיחה שלכם לעולם התכנות. לפי דרישה עממית, נפרסם מחר פוסט אחד נוסף על כמה שיטות עבודה מומלצות לתכנות - בעיקר הערות על הקוד שלך - וכן נכלול משאבים נוספים שיעזרו לך ללמוד יותר על כל מה שדיברנו עליו ולאן להמשיך.
