JSON
בשיעור זה אנו לומדים את פורמט JSON, קיצור של JavaScript Object Notation. אנו מכירים את התחביר להגדרת אובייקטים ומערכים ואת השילובים ביניהם, לומדים להפוך מחרוזת JSON לאובייקט בעזרת הפונקציה eval, משווים את JSON ל-XML, ובונים פרויקט מלא שמשלב אג'אקס, JSON, צד שרת עם Generic Handler, מחלקת Business Logic, טיפול בחריגות ופעולות DOM להצגת מוצרים לפי קטגוריה.
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד
פרקי ההרצאה: JSON
תמלול ההרצאה: JSON
הטקסט המלא של הדקות הראשונות בהרצאה «JSON» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לדבר שנקרא ג'ייסון. ג'ייסון זה קיצור של JavaScript Object Notation. המילה Notation זה ציון, לציין משהו. Object, אובייקט שחי בזיכרון, ו-JavaScript, אנחנו כמובן יכולים לעשות את זה ב-JavaScript.
אז בעצם, בואו ניזכר מה זה בעצם אובייקט. אובייקט זה ישות שחיה לנו בזיכרון, ומתארת ישות מסוימת. לדוגמה, תלמיד. מידע שאנחנו רוצים לגבי תלמיד אחד ויחיד כמובן צריך לשבת איפשהו בזיכרון, בזיכרון הר"מ של המחשב בדרך כלל, זיכרון קריאה מיידית או גישה מיידית והפרטים של האובייקט הזה של אותו תלמיד, בוא נניח שם
פרטי מוישה, שם משפחה כהן ויש לו איזה שהם מערך ציונים, יש לו כתובת, יש לו תעודת זהות, כל הפרטים האלה אנחנו יודעים שהם מאוגדים במקום אחד בזיכרון בתאים תאים.
כל פרט יושב בתא נפרד, לדוגמה השם הפרטי יושב בתא א', שם משפחה יושב בתא ב', מערך הציונים יושב בתא ג', שיש בו סך הכל מערך של ציונים, וכולם ביחד נמצאים כגוש אחד בזיכרון.
וכל הגוש הזה נקרא אובייקט, אובייקט אחד ויחיד. אנחנו יכולים שיהיה לנו 100 תלמידים, אבל מידע של 100 תלמידים יישב ב-100 אובייקטים שונים, שכל אובייקט יכול להיות במקום אחר בזיכרון, אבל המידע שלו בדרך כלל מקובץ ביחד.
אוקיי, אז מה זה ג'ייסון? ג'ייסון מאפשר להגדיר אובייקטים ומערכים בזיכרון, והוא לא תלוי בשפת תכנות. ישנם המון שפות תכנות שתומכות בג'ייסון, וג'אווה סקריפט היא אחת מהן.
זאת אומרת שאני יכול בתחביר הזה, נוטיישן הכוונה לציון או תחביר, אני יכול בתחביר הזה של ג'ייסון להגדיר אובייקטים ולהגדיר מערכים.
אז בואו נראה איך זה מתבצע. אז בואו נחליט שאנחנו רוצים להגדיר אובייקט שמתאר לנו מידע לגבי מכונית. אז קודם כל כמובן שצריך להיות לי את המשתנה. לדוגמה var car1.
עכשיו אם אני רוצה להגדיר אובייקט בתחביר של ג'ייסון, אז אני צריך להשתמש בסוגריים מסולסלות. סוגריים מסולסלות מציינות שאני עכשיו מגדיר אובייקט.
לאובייקט כמובן יש מספר תאים. לכל תא יש שם התא שאחר כך מאפשר לי להגיע למידע של התא דרך השם, ויש את הערך של התא. השם של התא פשוט נכתב כשם רגיל, לדוגמה מניופקטור.
ואז אני רושם נקודותיים, ואז אני רושם את הערך שהוא יכול לבוא במספר צורות, כרגע אנחנו רואים שהוא יכול לבוא בגרשיים, כלומר מחרוזת.
לאחר מכן אני רושם פסיק, ואז את התא השני, לדוגמה מודל. ויש לנו כרגע מכונית אחת שיש לה מניופקטור ומודל. מניופקטור למבורגיני מודל קונטאץ'.
יש לי פה כרגע אובייקט אחד ויחיד שיש לו שני תאים לכל תא יש שם ויש ערך בתוכו. אני יכול כמובן אחר כך ללכת ולשנות את הערכים בהתאם לגישה לפי השמות.
בואו ניצור עוד שני אובייקטים יש לנו כאן את פרארי דגם ספיידר יש לנו את פורשה ודגם ררה יש לי עכשיו שלושה אובייקטים בזיכרון שהגדרתי אותם בעזרת התחביר של ג'ייסון.
אם עכשיו אני רושם car1 נקודה אני רואה שבין כל הפונקציות שיש לי יש לי כאן מניופקטור ומודל. אני יכול להגיע לדוגמה למודל ולשנות אותו. בואו נציג על ידי אלרט את car1 נקודה מניופקטור וcar1 נקודה מודל לפני השינוי ואחרי השינוי.
בואו נפעיל את הכל עם לחצן כך שאנחנו נבדוק את האובייקטים value, ג'ייסון אובייקט יש לנו פה טסט ג'ייסון אובייקט ונשים את הכל בפונקציה בואו נריץ ואנחנו יכולים ללחוץ על הלחצן ולראות שיש לנו למבורגיני קונטאץ׳ לפני השינוי ויש לנו למבורגיני דיאבלו אחרי השינוי בעצם מה
שעשינו כאן ויצרנו שלושה אובייקטים בג'ייסון הצגנו את הראשון שינינו דבר מה בראשון ושוב פעם הצגנו אותו כאשר כתבנו את הערכים של האובייקטים ראינו שכתבנו את שם הפרמטר או שם התא שהוא נמצא ללא גרשיים, לאחר מכן נקודותיים ולאחר מכן את הערך שאם הוא סטרינג הוא מופיע בגרשיים.
אבל לפעמים אפשר לראות שגם את השם של התא אנחנו יכולים להגדיר בתוך גרשיים. בואו נעשה את אותו הדבר עבור car2. בואו נשנה פה בכל מקום לcar2 בכדי לראות שגם זה עובד.
נחזור, נרפרש, נריץ. יש לנו בהתחלה את למבורגיני קונטאץ' ששינינו ללמבורגיני דיאבלו, ולאחר מכן יש לנו את פרארי ספיידר ששינו לפרארי דיאבלו, לא נורא, אבל אנחנו רואים שזה בעצם עובד גם כאשר השמות של התאים עטופים בגרשיים.
אז לפעמים באתרים רואים שזאת השיטה להגדיר את שמות התאים, ולפעמים בלי גרשיים, אני אישית מעדיף בלי גרשיים, לפני שכמה שפחות קוד, יותר טוב.
זה היה אובייקטים. אנחנו עוברים למערכים. ואם אנחנו רוצים לראות מערך, בואו נבנה פונקציה test.json.aray. נקרא לה מלחצן שני, יש לנו פה test.json.aray שקורא לפונקציה test.json.aray.
אז מה התחביר ב-JSON בכדי להגדיר מערך? אז מערך כמובן קודם כל הוא מערך חד-ממדי. ואיך אנחנו בעצם מגדירים אותו? בואו נגדיר משתנה, לדוגמה Numbers, ונכניס לתוכו מערך בשביל להגדיר מערך ב-JSON אני משתמש לא בסוגריים מסוסלות אלא בסוגריים מרובעות ובתוכם אני רושם את הערכים מופרדים על ידי פסיקים כל הערכים שאני רוצה וכמובן שאני לא חייב שכולם יהיו מאותו סוג אני
יכול שיהיה לי פה משתנה דאבל אני יכול שיהיה לי פה סטרינג אני יכול שיהיה לי כל דבר שאני רוצה להעלות על הדעת שאפשרי ב-JavaScript אנחנו בהמשך נראה בדיוק מה הדברים הנוספים שאפשר להגדיר כרגע הגדרתי מערך בואו נציג את האורך שלו.
הרייז לנקס נאמברס ואנחנו רואים שג'אווה סקריפט אוטומטית קולטת שהדבר הזה זה מערך ונותנת לי לנקס. בואו נבדוק.
נלחץ על הלחצן של טסט ג'ייסון הריי ואנחנו רואים שיש לנו 11 תאים במערך. אם אני רוצה להציג את הערכים השונים ואני יכול להציג אותם על ידי הצגה רגילה של ערכי מערך.
לדוגמה בנאמברס 0 יש לנו 33 תאשר מערכים מתחילים מ-0. אז אם אני יציג את זה אז אני אראה בעצם שהאורך שלו זה 11 והמיקום הראשון מכיל את המספר 33.
אם אני רוצה לסרוק את המערך אני כמובן יכול לסרוק בלולה הרגילה for i שווה 0 כל עוד i יותר קטן מ-numbers.length כמובן לא שווה ל-numbers.length מפני שאורך המערך זה סך כל התאים התא האחרון זה 1 פחות מבחינת אינדקס ואז אני יכול להגיע ל-alert בואו נבדוק את זה, יש לנו קודם כל האורך 11, נאמברס 33 ואנחנו מתחילים להציג אותם, את הערכים לפי הסדר במערך שלנו,
66, 3, מינוס 2, 6.7, הלו, כמובן אנחנו יכולים לראות גם סטרינגים פה וזה בעצם הציון בג'ייסון להגדרת מערך. עכשיו האם אובייקט ומערך יכולים להשתלב ביחד?
כלומר האם אובייקט יכול להכיל בתוכו מערך והאם מערך יכול להכיל בתוכו אובייקט? אז התשובה היא כן, אובייקט יכול להכיל מערך ומערך יכול להכיל אובייקטים.
בואו נסתכל רגע איך זה יכול להיות. אז בואו נגדיר לחצה נוסף test object containing array. נבנה את הפונקציה הזאת ונגדיר כרגע אובייקט של סטודנט, נקרא לו סטודנט 1.
כשאני רוצה להגדיר אובייקט אז אני משתמש בסוגריים סלסלות. אז יש לי כמובן לדוגמה first name, נקודותיים, מוישה.
יש לי last name נקודתיים רופניק ויש לי grades אבל מה עם הציונים שלו? הציונים שלו הם מערך ולכן אני יכול להגדיר מערך בתוך אובייקט כאילו שהמערך זה ערך שנמצא בתוך אחד התאים של האובייקט כרגע זה grades.
אה ולדוגמה הציונים שלו זה 80.5 יש לו ציון נוסף של 70 יש לו ציון נוסף של 98 יש לו ציון אחד 100 עוד 100 ויש לו ציון אחד של 97.3. וזה בעצם אובייקט שהצגנו או שיצרנו בזיכרון שמחזיק לנו שם פרטי, שם משפחה ומערך של ציונים.
אז בואו נציג אותו. אז יש לנו first name ואני רוצה להגיע לשם הפרטי אז כמובן יש לי student או יותר נכון student1.first name last name יש לנו את סטיודנט אחד נקודה last name ובואו נציג גם את מערך הציונים grades ונשרשר אותו עם סטיודנט אחד נקודה grades להזכירכם אם אני מדפיס מערך כל המספרים שלו מוצגים לי בואו נבדוק את זה
נרפרש נלחץ על הלחצן ויש לנו first name משה last name עופני grades ואנחנו רואים את כל מערך הציונים של המערך שלנו אז מה שעשינו כאן והצלחנו לקחת מערך ולייצג אותו בתור אחד הערכים של אובייקט האם עכשיו אנחנו יכולים לעשות את הדבר ההפוך.
בואו נפנה פונקציה test.json.array.of.objects נשכפל את הלחצן של test.array.of.objects. ניקח את הפונקציה הזאת, נקרא לה ונגדיר כאן קודם כל מערך שמחזיק אובייקטים.
איך אנחנו יכולים לעשות את זה? אז בואו נניח שהיו לנו כבר את שלושת האובייקטים של המכוניות פה למעלה, בואו ניקח אותם ונדביק אותם כאן.
אם אני רוצה עכשיו מערך שיחזיק לי מכוניות, לדוגמה cars, אז אני יכול פשוט מאוד להגדיר את התחביר של מערך, סוגריים מרובעות, ואז car1 פסיק car2 פסיק car3.
בואו לדוגמה נציג את הכל, אז אני רץ על הכל, for var i שווה 0 כל עוד i קטן מcars.length