תרגילים 1-3
index, שמציג את הדף, וקובץ JavaScript משלו שמקושר אליו בתגית script.onclick מפעיל פונקציה, ו-div עם מזהה מציג את התוצאה.for שמתחיל מ-7 ועובר עד 20, ובכל סיבוב מוסיפים את המספר לתוצאה בעזרת +=.br, כדי שכל מספר יופיע בשורה משלו.startNum, וממנו מתחילה הלולאה.document.getElementById כותבים $("#id"), ו-.html או .text מכניסים את התוכן לדיב.i נכתב בלי גרשיים, כי גרשיים הופכים אותו לטקסט שמוצג כמו שהוא.פרקי ההרצאה: תרגילים 1-3
תמלול ההרצאה: תרגילים 1-3
הטקסט המלא של הדקות הראשונות בהרצאה «תרגילים 1-3» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
ברוכים הבאים לתרגילים מעשיים בג'אווה סקריפט אנחנו נלמד jQuery וג'אווה סקריפט ונפתור שאלות מהפשוטות למסובכות התרגיל הראשון שלנו יהיה לכתוב את כל המספרים מ-7 עד 20 ברצף מ-7 עד 20 ברצף אנחנו רוצים להדפיס כל מספר בשורה נפרדת בואו נתחיל בואו נתחיל בזה שאנחנו ניכנס לוויז'ואל סטודיו ונעשה פרויקט חדש פרויקט
ריק אפשר להשתמש לא רק בוויז'ואל סטודיו בכל סביבת פיתוח נתחיל לעשות פרויקט ריק ואנחנו יוצרים פרויקט ריק אמפתי בלי שום ויים למטה לא שמים אף וי למטה כי אנחנו לא צריכים צד שרת אנחנו עושים הכל בצד לקוח בינתיים אחרי זה נגיע לאג'קס ונעשה צד שרת ואנחנו דבר ראשון מוסיפים קובץ html רק אני אעביר את זה לצד השני שתראו אנחנו עושים add new item מוסיפים קובץ חדש
לפרויקט שלנו לתיקיית הפרויקט שלנו ונתחיל בקובץ html ונקרא לו אינדקס כדי שדפדפן יעלה אותו כברירת מחדל יכלנו לתת לו כל שם אחר אבל אם היינו נותנים לו שם אחר היינו צריכים לציין במפורש את השם בדפדפן אז אני נותן לו אינדקס כדי שזה יעבוד בלי לתת שם מפורש של הדף בדפדפן ואני גם שם קובץ javascript פקודות javascript
משלי אני מזכיר לכם ש-JavaScript זה הדבר היחיד שדפדפן מבין חוץ מ-HTML ו-CSS. ודבר ראשון, אני אעשה לינק לקובץ JavaScript שלי, שזה מצוין.
עכשיו, אני גם רוצה להוסיף תמיכה ב-JQuery, ואז מה שאני עושה, אני עושה Nuget Package. Nuget Package זה חבילות מוכנות של סקריפטים, ואני כותב JQuery, ושימו לב בצד שמאל, ברגע שאני אלחץ Install, הוא לבד יוריד מהאתר של מיקרוסופט את ה-JQuery, וישים לי בתיקיית סקריפט תסתכלו בצד שמאל תכף
תופיע תיקיית סקריפט עם jQuery בפנים אתם רואים הוא הצליח Successfully למטה Installed עודכן בהצלחה ואני רואה כבר שיש לנו תיקיית סקריפטים בפנים יופי אפשר גם היה לעשות לינק לאתר עם jQuery באתר אבל אנחנו רואים שjQuery זה קודות רגילות לגמרי ב-JavaScript jQuery זה למעשה לקחו
פקודות של ג'אווה סקריפט ועטפו אותם למשהו יותר נוח לשימוש. זה כמו מעטפת סביב פקודות מוכנות של ג'אווה סקריפט וחייבים לשים אותם מעל הג'אווה סקריפט שלי, מעל הקובץ שלי.
למה מעל? כי אני בתוך קובץ ג'אווה סקריפט שלי אשתמש ב-JQuery, לכן JQuery צריך להיות מעליי, כדי שכשיופעל הקובץ שלי כבר JQuery יהיה טעון בזיכרון של המערכת.
זה מה שהייתי צריך בסופו של דבר לעשות קובץ html קובץ javascript משלי ולחבר ספריית jQuery עכשיו כשהכל מוכן אני יכול להתחיל פה לכתוב כל מיני פונקציות לכתוב כאן את הקוד שלי של html ובואו נתחיל מזה שנעשה כפתור נעשה בטון נעשה כפתור והדבר היחיד שאני צריך בכפתור הזה אני הולך על המינימום זה רק פונקצייט onclick מה יקרה כשלוחצים
על הבטון הזה ואני מפעיל פונקצייט javascript שנקראת task1 עוד מעט נעשה אותה ובתוך הכפתור נרשום task אחד וזהו, אני חושב שזה יהיה מספיק טוב.
אז אני כותב button נותן לו attribute on click, attribute זה מאפיין, זאת אומרת button זה שם הרכיב אלמנט ו-on click זה המאפיין שלו, ואומר בסוף br שיראה תשורה.
כמו כן אני צריך להוסיף div לתוצאות, div זה סתם ריבוע במסך שיש שם תוצאות. אני כותב בפנים רזלצה ואני נותן לו ID מזהה ייחודי במסך אני נותן לו מזהה ייחודי במסך והמטרה שלי זה בעצם לרשום שם את התוצאות של המשימות של התרגילים שלי אני כותב function ויש לי
snippet מוכן אני לוחץ פעמיים tab ואחרי שלחצתי פעמיים tab הוא משלים לי בעצם את הסוגריים וכותב לי את התבנית snippet זה קוד מוכן ואם אתם לוחצים פעמיים tab אז הוא כותב את התבנית המוכנה מה התבנית שלו function שם שלה סוגריים וסוגריים מסולסלות טוב טוב בואו נתחיל מזה שאנחנו ניקח את הדיו שלנו,
קראנו לה רסולטס ונגיד שבדיו הזה נשים מספר 7 ומספר 8. כאילו אנחנו מנסים לפתור את התרגיל בלי לולאה, כאילו אנחנו לא יודעים לולאה ועכשיו נבין למה צריך לולאה בעצם.
עכשיו לפני שאני מתחיל את זה אני רוצה לעשות מסך ריק, אחרי שעשיתי את הדיו ניקיתי אותה בריק אני עושה פלוס שווה, פלוס שווה זה אומר תיקח את מה שהיה לפניך ותוסיף לו עוד משהו, ושימו לב, אם אני לא יודע לולאות, אני ממשיך ככה שבע, שמונה, תשע, עשר, ועושה המון המון המון שורות קוד ידנית.
במקום לעשות את כל השורות קוד הידניות האלו, אני יכול לעשות לולאה עם מספר i בפנים, שזה הרבה יותר נוח. פלוס שווה זה אותו דבר כאילו הייתי כותב רק שווה רגיל, ומצד ימין של השווה הייתי כותב את השם של הרכיב, שזה אומר כל מה שיש ברכיב הזה, פלוס שבע, וכל מה שיצא לך תשים חזרה בצד שמאל.
אבל במקום לרשום פעמיים את השם של הרכיב אני השתמשתי בפלוס שווה, בפועל זה מוסיף פשוט לרכיב אינפורמציה, שומר את הערך הקיים. אוקיי, אז אנחנו מתחילים לולאה מ-7, מתחילים לולאה מ-7 עד 20, i שווה 7, מתחילים את הלולאה, זו הפקודה שבתחילת הלולאה, כל עוד i פחות מ-20 אנחנו ממשיכים, אבל אנחנו צריכים גם במקרה
של שווה ל-20 גם להסתובב, אחרת הוא היה יוצא לי ב-19 ו-i++, זה אומר תוסיף כל פעם ל-i אחד, 7, 8, 9, 10, כל פעם תוסיף אחד, זה הפקודה האחרונה בלולאה, זאת אומרת פקודה ראשונה, תנאי לסיום או יותר נכון להמשך ופקודה אחרונה.
ועכשיו אני אומר לו הדיב שלי שווה פלוס שווה i, i זה בעצם המספר הזה שירוץ, זה אינדקס, זה המספר שירוץ 7, 8, 9, 10, החלטתי לתת לזה כל שם שאני רוצה, אני לא חייב להשתמש ב-I.
יכלתי לתת גם יוני, למשתנה בשם יוני. אבל נהוג לתת ל-I כי זה אינדקס. ואני כותב הערות לקוד שלי, למה אני עושה את זה, משהו, מאיזה סיבה עשיתי את זה.
והעיקר שההערות יעזרו לי אחרי זה להבין את המשמעות כשאני אגיע לקוד הזה עוד חצי שנה. באמצעות הקוד הוא מסובך. תלמידים רבים כותבים בגרשיים I. ברגע שנרשם בגרשיים I הוא יכתוב לי את האות I על המסך, אני לא רוצה אות I על המסך, אני רוצה את הערך של המשתנה אז אני משאיר i בלי גרשיים מה שאתם כותבים בין הגרשיים הוא משתמש בזה as is כמו שזה אז הוא חושב שאתה
מתכוון לאות i אז לא להתבלבל בין סטרינג בין הגרשיים וזה לא משנה אם זה גרש בודד או גרש כפול אם אתם רוצים משתנה אז זה בלי גרשיים אם אתם רוצים אות i עצמה זה עם גרשיים ואנחנו רואים שהמסך נראה כמו שציפינו אבל כשנלחץ אנחנו רואים שום דבר לא עובד לנו אנחנו לא יודעים מה קרה למה זה לא עובד לנו אנחנו יכולים ללכות סף
12 וללכת לקונסול ולראות את השגיאות ולסורס לראות את הקוד שלנו ככה מחפשים טעויות מה קרה זאת אומרת הלקוח שלנו צד לקוח שלנו זה למעשה דפדפן פותחים דפדפן פותחים כלי דיבאג ואנחנו יכולים לעשות שורה שורה להריץ את זה ולראות מה קורה במציאות ואני כבר רואה שהוא שם לי קו אדום מתחת למשהו שהוא לא מבין מה לעשות איתו יפה מאוד בוא נתחיל להבין מה קרה כאן ואני
רואה שהוא אומר שיש פה בעיה הוא כותב שיש כאן בעיה בשורה הזאת הוא שם אותה בקבקוב אדום טוב בוא ניקח קודם כל את השורה הזאת את הצד שמאל כי הוא כותב שזה left hand מצד שמאל של סימן שווה אוקיי זה מצד שמאל של סימן שווה וכדי למצוא את הבעיה אני אעשה לזה copy הולך לקונסול הוא רואה פה את כל השגיאות הם דרך אגב כל השגיאות יוצאות כאן בקונסול
אני רואה שהם פה באדום ומנקה את המסך ומכניס את הצד שמאל ולוחץ enter ואני רואה שהוא כן זיהה את הרכיב. אם הייתי מתבלבל בשם של הרכיב של הדיו אז הוא לא היה נותן לי תוצאות, אני רואה שהוא כן מזהה את הרכיב וכשאני לוחץ task1 עדיין הבעיה קיימת.
אוקיי, אני אחסוך לכם מה הבעיה. הבעיה היא שאין פה באובייקט הזה, צריך לציין בדיוק מה אנחנו רוצים להחליף, יש לנו אובייקט עם הרבה דברים ואנחנו צריכים להחליט מה בתוך האובייקט הזה אנחנו רוצים להחליף, אנחנו רוצים להחליף inner html, את הטקסט, את ה html שלו, מה יש לנו חוץ מ-inner html, מה יכול להיות באובייקט הזה חוץ מטקסט שלו,
לדוגמה אני יכול לכתוב style ולהחליף את הצבע שלו, לדוגמה style ולהחליף את הצבע שלו ולהגיד לו לדוגמה שלאובייקט הזה הכל יהיה בצבע אדום, זה כמו ב-CSS להחליף צבע.
זאת אומרת לרכיב הזה שלקחנו, שזה הדיב שלנו, יש הרבה מאפיינים. לאובייקט יש הרבה מאפיינים ואנחנו צריכים להגיד לו איזה מאפיין אנחנו רוצים להחליף, אנחנו רוצים להחליף מאפיין שנקרא InnerHTML. שימו לב, כל מה שאני מסביר לכם זה JavaScript טהור, JavaScript נקי.
ככה עובד הדפדפן בצורה ישירה. בואו נבדוק שהבעיה נעלמה לנו. נעשה Control-F5, קונטרול F5 ואנחנו רואים שהבעיה נעלמה והנה כל המספרים ברצף 7, 8, 9, 10 אני רואה שזה יותר מדי דבוקים אחד לשני ואין פה בר אני רוצה להוסיף פה את הבר אוקיי כדי או פסיק להוסיף או בר כאילו אני אומר לו לכל שורה תוסיף i וגם תרד שורה אוקיי צריך היה לעשות סייב
לא עשיתי סייב טוב לא נורא בואו נחזור לקוד ונעשה פה פלוס בר ואנחנו רואים שזה באמת עובד, אנחנו רואים שהכל עובד כמו שצריך, מעולה, עכשיו אנחנו לא צריכים יותר דיבאגר, אנחנו צריכים פה להעיף את השורה הזאת, אנחנו לא צריכים אותה באמצעיות, ולמעשה סיימנו את התרגיל הזה.
אז אמרנו שורה ראשונה מנקה את המסך, השורה השנייה פותחת לנו את הלולאה מ-7 עד 20, ואנחנו לוקחים את הערך של האינדקס של הלולאה 7, 8, 9, מוסיפים לו ירידת שורה, ואת כל זה ביחד, שמים במסך בתוצאות במסך התוצאות מצוין בואו נבדוק עוד פעם שהכל עובד כמו שצריך ואני רואה
שזה באמת עובד מצוין בואו נעבור למשימה שנייה המשימה השנייה שלנו זה לעשות את אותו הדבר רק להתחיל ממספר 3 נכון התחלנו ממספר 3 ממספר 7 עכשיו אנחנו צריכים אותו דבר להתחיל במספר 3 אוקיי בואו נתחיל כותבים function לוחצים טאפ טאפ כי זה סניפט אם לא היה לנו סניפט היינו צריכים לרשום לבד את השם של הפונקציה ואת הסוגריים שזה גם לא
בעיה כל כך גדולה עושים כפתור שבקליק שלו מפעיל את המשימה השנייה מצוין אז יש לנו עכשיו שני כפתורים על המסך מי שרוצה שיהיו לו כפתורים יפים אפשר לחבר בוטסטראפ אם הייתי מחבר בוטסטראפ הכפתורים היו נראים הרבה יותר יפים בוטסטראפ זה ספרייה מוכנה של עיצוב אוקיי והדבר היחיד שאני צריך לשנות במשימה השנייה זה רק שהעלונה תתחיל ממספר 3 ולא ממספר 7 וזהו בוא
נראה זה עובד וגם זה עובד יופי המשימה השנייה הייתה מאוד פשוטה המשימה השלישית שלי המשימה השלישית שלי זה בעצם לעשות פונקציה אחת אוניברסלית שמתאימה לפתור לבד גם את המשימה הראשונה וגם את המשימה השנייה בעצם לחבר את שתי המשימות למשימה אחת שיהיה לי קוד אוניברסלי שמצליח גם להדפיס מ-7 גם להדפיס מ-3 ומכל מספר שאני ארצה שאני אוכל להדפיס
מכל מספר שאני ארצה בשביל לא לשכפל אותו קוד הרבה פעמים אז אני עושה פונקציה שלישית שהיא תהיה אוניברסלית ומוסיף לה איזשהו רכיב שיעבירו מבחוץ אני קורא לו start num בסוגריים וכשקוראים לפונקציה בסוגריים מעבירים לה מאיפה להתחיל מאז הפונקציה
השלישית יכולה להחליף גם את הפונקציה הראשונה וגם את הפונקציה השנייה. היא ככה פותרת לי את הבעיה שלי לכל המשימות מהסוג הזה.
יפה מאוד. וזה מאוד חשוב, שימו לב שאת הסטארט-נאם גם רשמתי בתחילת הלולאה. משם מתחילה הלולאה. במקום שבע שלוש אני כותב שהלולאה תתחיל מסטארט-נאם ואז הלולאה מתחילה מסטארט-נאם ואת הסטארט-נאם אני מקבל מבחוץ