תרגיל 4
input עם מזהה ייחודי וערך התחלה. את תכונת name מוחקים, כי אין שליחה לשרת.button עם onclick שקורא לפונקציה task4.document.getElementById("...").value, וב-jQuery $("#...").val().parseInt הופך את הטקסט למספר. בלי המרה ההשוואה נעשית כטקסט, ולכן 3 נראה גדול מ-11, כי הוא מתחיל בספרה גדולה יותר.+= ומוסיף בכל סיבוב את המספר ואת br.task4 עם רקע צהוב ויישור למרכז. המרצה ממליץ לשים את כל העיצוב בקובץ נפרד ולא בתוך ה-HTML.text מתעלם מתגיות, ולכן כשיש br משתמשים ב-html, כדי שהשורות ירדו.פרקי ההרצאה: תרגיל 4
תמלול ההרצאה: תרגיל 4
הטקסט המלא של הדקות הראשונות בהרצאה «תרגיל 4» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו ממשיכים עם התרגילים המעשיים שלנו בג'אווה סקריפט ועכשיו אנחנו נפתור את התרגיל כמו שעשינו בתרגיל ראשון, שני ושלישי, נעשה תרגיל רביעי עם טקסט בוקס שאנחנו ניקח את המספרים ונעשה בלולאה להדפיס מספרים על המסך, רק לא נתחיל אותם לא משלוש ולא משבע אלא ניתן למשתמש להכניס לבד מאיזה מספר הוא רוצה להתחיל
ובואו נעשה על המסך שני טקסט בוקסים ונתחיל לרשום קוד, אנחנו רושמים קוד גם ב-JavaScript וגם ב-JQuery במקביל, כי אתם צריכים לדעת את שניהם.
אתם חייבים לדעת גם את ה-JavaScript וגם את ה-JQuery, כי זה מה שהשוק היום דורש. נעשה פונקצ'ן חדש, פונקציה חדשה, שנקרא לה Task 4, משימה רביעית, שהיא תופעל על ידי לחיצת כפתור.
בואו נעשה גם כפתור, Task 4 שמפעיל את הפונקציה הזאת, אבל לפני הכפתור אנחנו צריכים לשים טקסט בוקס.
אנחנו צריכים לשים טקסט בוקס כדי שליוזר יהיה איפה להכניס את המספר תחילי ומספר סופי. אנחנו כותבים input, שזה רכיבי input של html שנועדו במקור לשלוח טופס לשרת.
אנחנו לא הולכים לעשות טפסים ולשלוח אותם לשרת, אנחנו רוצים רק את השדה טקסט. חוץ מזה יש לנו גם לדוגמה, יש לנו סוג לדוגמה color לבחור צבע, button לבחור כפתור, פסוורד זה סיסמאות, Numbers זה רק מספרים, רדיו זה לבחור לדוגמה מין זכר או נקבה איזה, לבחור אחת האופציות.
ויש פה עוד הרבה אפשרויות בסוג input, כאילו להכניס נתונים לטופס. מדברים עליהם בהרחבה בקורס של HTML, אנחנו עכשיו לא נעבור על כל הרכיבים ונסתפק ברכיב הקלאסי שנקרא טקסט.
כשאנחנו נכתוב שם משהו ונשלח לשרת, הוא שלח עם שם שנחשום בפרמטר name. אנחנו לא רוצים לשלוח שום דבר לשרת, אז אנחנו פשוט יכולים למחוק את הרכיב הזה. המטרה של החלק הזה זה לבנות כזאת שורה שנשלחת לשרת, שיהיה כתוב שם name שווה yoni.
h שווה 29. השם של הפרמטר הזה נכנס ב-name, אבל זה לא מעניין אותנו, אנחנו מוחקים אותו, ומכניסים איזשהו ערך תחילי. value זה ערך תחילי שהוא הולך להיות בתיבת טקסט עד שלא נחליף אותו, עד שלא נשנה אותו.
נכניס שם אחד, וניתן לזה מזהה, סטארט-נאם. עכשיו לפי המזהה הזה אנחנו נמצא אותו אחרי זה דרך ג'אווה סקריפט, אנחנו נשלוף משם ערך דרך המזהה הזה, זה המזהה של תיבת טקסט הזאת.
מצוין, בוא נעשה עוד תיבת טקסט, הפעם עם ערך נניח 10 או 9, וזה יהיה הערך הסופי, אני נותן לזה מזהה task4 end num יפה ואני צריך גם כפתור אני יכול לעשות כפתור על ידי תגיד button ואני יכול לעשות כפתור על ידי תגיד input type button אין שום הבדל בסופו של דבר זה אותו כפתור ואנחנו נעשה עכשיו את הכפתור בצורת input type button ונרשום לו לדוגמה על הכפתור
task4 שימו לב יש שני דרכים איך להכין כפתור ב html דרך תג אלמנט button רכיב button ודרך input type button כמובן שצריך להגיד לו שבזמן הלחיצה on click להפעיל פונקציה שנקראת task 4 משימה מספר 4 יפה אז משימה מספר 4 תופעל כשנעשה
קליק יפה מאוד ונעבור לשורה חדשה למשימה הבאה אחרי זה שנוכל להתחיל משימה הבאה נהדר בוא נתחיל עכשיו לכתוב קוד בג'אווה סקריפט והדבר הראשון שאנחנו רוצים לקחת את הערך שהמשתמש הכניס לנו אנחנו עושים משתנה שנקרא סטארט-נאם ולוקחים את הערך מתוך הרכיב כאשר את הרכיב אנחנו מזהים לפי ה-ID שלו במסך אנחנו עושים דוקיומנט
get-element-by-ID זאת אומרת אנחנו עוברים על כל הרכיבים ומחפשים רכיב שיש לו מזהה ID מסוים ולוקחים מתוך האובייקט הזה את ה-value לא אינרדג' טימל ב-div ב-p בפראגרף לוקחים אינרדג' טימל בטקסט בוקס לוקחים value, אוקיי?
ועכשיו אני כותב אותו דבר ב-JQuery. ב-JQuery, לפי הסינטקסט של JQuery, אנחנו כותבים אותו דבר, רק שימו לב, נקודה value. ב-JavaScript זה נקודה value, ב-JQuery זה נקודה value, וזה פונקציה.
ולכן צריך להוסיף סוגריים בסוף. אם אתם שואלים אותי איך אתה יודע את כל זה, איך אתה זוכר את כל זה, אתם יכולים לראות שב-W3school יש דוגמאות ב-JQuery, html get אתם הולכים לw3school ולוקחים משם את הדוגמאות אין שום בעיה שימו לב ב jquery כותבים קודם כל דולר אחרי זה מזהה עם סולמית ואחרי זה נקודה val כן יכולנו עשינו נקודה html נקודה טקסט עכשיו נקודה val יפה מאוד
אתם יכולים לעבור על הדוגמאות של w3school יש שם דוגמאות מצוינות אנחנו לא צריכים את שניהם אנחנו נעשה קודם javascript אחרי זה נעשה jquery ונראה שזה אותו דבר לא נעשה את כל הפתרון גם בזה וגם בזה כי אתם צריכים להכיר את שניהם כי זה מה שהמציאות דורשת טוב עשינו את הסטארטנאם עכשיו נעשה אותו דבר עם אדנאם כמובן שבאמצעות אתם לא כותבים את שניהם כן זה או זה או זה
לא עושים עבודה פעמיים אני עושה פה עבודה פעמיים בשביל ללמד אתכם אבל אתם בחברה אמיתית רואים איך החברה עובדת נניח החברה עובדת בג'קווירי אז אתם עושים הכל בג'קווירי או חברה לא עובדת עם ג'קווירי אז אתם עושים הכל בג'אווה סקריפט.
יפה, בואו נתחיל בג'אווה סקריפט ושימו לב גם איך נהוג בג'אווה סקריפט לרשום שם של משתנה. כל מילה, שם משתנה שמורכב מכמה מילים, כל מילה מתחילה בעוד גדולה, חוץ ממילה ראשונה שמתחילה בעוד קטנה.
זה נקרא סגנון של גמל, קמל קייס. סגנון של גמל זה אומר שמחברים את כל המילים ביחד וכל מילה חדשה, כדי לזהות בעין שהיא מילה חדשה, עוד גדולה באמצע לדוגמה החלופה של זה זה לשים מקפים או קווים תחתונים במקום הרווח קו תחתון במקום רווח נהוג בג'אווה סקריפט
לשים camel case טוב בוא נתחיל לעשות לולאה שבה מתחילים מ-i מתחיל אינדקס של לולאה i מתחיל מהרכיב שהכניס לנו משתמש והלולאה ממשיכה כל עוד i הזה קטן מהערך העליון שהמשתמש הכניס לנו וכל פעם i מתקדם ב-1.
זאת אומרת מתחילים נניח מ-7 ואחרי זה 8, יש 10, 11, 12 עד שמגיעים. יפה.
ועכשיו אנחנו רוצים בתוך הלולאה להתחיל בתוך הלולאה להדפיס את ה-i שלנו כמו שעשינו בתרגיל קודם. אז לוקחים את ה-HTML של הרכיב ומוסיפים לו את ה-i בשורה ריקה.
רק לפני כן בואו ננקה מסך ונעשה ש-InnerHTML שווה מקום ריק. סטרינג ריק. אין גרעק זה אומר מקום פנוי יפה מאוד אז לוקחים את ה-InnerHTML מנקים אותו ואחרי זה מתחילים לצבור לתוכו את התוצאות של הלולאה ואז לדוגמה ה-InnerHTML היה נניח שבע בפנים אז אנחנו צוברים
שמונה שורה חדשה תשע שורה חדשה עשר שורה חדשה כאילו צוברים לתוכו כשמתחילים משורה ריקה פלוס שווה זה לצבור לתוך רכיב בלי למחוק את מה שיש בפנים טוב בואו נראה שזה באמת עובד לנו אני רואה שזה באמת עובד אבל אין תשע אתם רואים אחד עד שמונה
הוא עשה לנו כי עשינו שהוא קטן מתשע אוקיי וזה בסדר שבפעם הראשונה משהו לא עובד את זה אתם לא צריכים אף אחד לא מצפה מאף מתכנת שהכל יעבוד בפעם הראשונה אין שום בעיה לזהות את הטעות הקטנה ולתקן אותה זה לגיטימי ואל תחשבו שמישהו מצפה ממכם להיות מושלמים גם מתכנתים שעובדים המון המון שנים בתחום פעם ראשונה עושים איזושהי טעות קטנה וזה דבר לגיטימי נהדר אני רואה שהכל עובד
הכל מצוין תראו פתאום זה לא עובד מה קרה לו למה הוא לא עובד אני אומר לו תדפיס לי מ-3 עד 21 והוא לא עובד לי בוא נעשה F12 ונעבור שורה שורה ונמצא איפה הבעיה למה פתאום הוא הפסיק לעבוד לי אין דבר כזה שלפעמים הוא עובד לפעמים הוא לא עובד הוא תמיד צריך לעבוד וזה התפקיד של אנשי QA בדיקות תוכנה שמחפשים את המקרים בהם התוכנה פתאום הפסיקה לעבוד כי מתכנת לא חשבה על משהו בואו נריץ דיבאגר זה
אומר תעצור בנקודה הזאת זאת אומרת ברגע שתגיע לנקודה הזאת בקוד, תעצור ותפעיל לי את הדבאגר שעובר שורה שורה על הקוד. יופי, אני רואה קונטרול F5 שהשורה התווספה כאן.
עשיתי קונטרול F5 ואני אומר לו כזה דבר מ-3 עד 11. בואו נראה מה יקרה. שמתם לב שהוא עצר לבד שם? אוי, הוא לא נכנס ללולאה. אתם רואים שהוא דילג על הלולאה?
הוא דילג על הלולאה, הוא לא נכנס. מאוד מוזר מה קורה פה. I3, סטארט-נאם 3, N-11, הכל נראה תקין אבל הוא לא נכנס לי לתוך לולאה, הוא ישר קפץ מעליה.
בגלל זה גם המסך ריק. בואו ניקח את התנאי של הלולאה ונראה אם התנאי הזה אמת ואם הוא היה אמת הוא היה צריך להיכנס, אבל הוא פולס, הוא שקר.
למה התנאי שקר? I3, N-11, 3 ו-11 זה בסדר, זה מה שהכנסתי ו-I3 לא קטן מ-11, איך זה יכול להיות? עכשיו אני אספר לכם זאת בעיה ידועה שכשמתייחסים למספרים כאילו זה טקסט כאילו זה סטרינג אנחנו צריכים להגיד למערכת זה מספרים אל תחשבי שזה טקסט למרות שהמשתמש הכניס את זה אז הוא חושב שזה טקסט אני אומר
תתייחסי להכל כאילו זה מספרים אז parseInt זה פונקציה שהופכת טקסט למספר ואז המערכת מתחילה לעבוד עם זה כמספר ואז פונקציה parseInt הופכת טקסט למספר וזה בדיוק מה שהיינו צריכים להפוך את הטקסט למספר אוקיי זו בעיה ידועה שכולם נתקלים בה לא מבינים מה קורה לוקח להם הרבה זמן להבין אז תזכרו שכשאנחנו לוקחים משהו מטקסט בוקס מתיבת טקסט הוא מניח שזה
טקסט ולא מספר ובניגוד לשפות כמו c-sharp וג'אווה שם אני מגדיר סוג טיפוס נתונים מוגדר לדוגמה אני אומר שזה אינטג'ר פה אנחנו לא מגדירים טיפוס נתונים מוגדר בגלל זה מאוד חשוב שנעשה ידנית פרס אינט אחרת פשוט המערכת שלנו לא תעבוד במקרים מסוימים.
במקרים בהם הספרה הראשונה היא... הוא שופט הכל לפי הספרה הראשונה, אוקיי? כי הוא משווה את זה בסדר האלף-בית, היא בסדר הטקסטואלי, ובגלל זה הוא לא מזהה שאחד גדול משני.
הוא לא רואה את כל הספרות, הוא מסתכל, הספרה הראשונה היא ראשונה, השנייה היא שנייה, כי ככה משווים טקסט לטקסט.
בואו נראה שהכל עובד לנו, ואני רואה שזה עובד, 3 עד 11 עובד, מה שלא היה לפני כן, תמיד אני עובד עם F12 ועם קונסול פתוח לראות את השגיאות.
אם יש לי שגיאות, אני מקבל אותן במסך של קונסול. המערכת כותבת פה את השגיאות ואני רואה שזה כן עובד. למרות שהספרה הראשונה 4 יותר גדולה מספרה הראשונה 1, הוא עדיין מבין ש-4 יותר קטן מ-13, אוקיי?
הלאה, עכשיו מבקשים ממני לצבוע את הכל בצהוב, לצבוע בצהוב ולמרכז את התשובות. אז אני צריך לצבוע אותן בצהוב ולמרכז. בואו נעשה את זה אני מתחיל לעשות את זה בקליינד בשביל לראות איך הכל יוצא לפני שאני שומר את זה בתוכנה כי פה אני רואה בלייב דברים משתנים בתוך הדפדפן אני יכול לשנות מאפיינים בלייב בשידור חי
וזה ממש נוח אז אני עושה צבע ילו או בגראונד קולור ילו צבע לי הכל לצהוב יפה מאוד טקסט אליין סנטר מסדר את זה באמצע יפה מאוד