diff options
Diffstat (limited to 'files/he/learn/javascript/objects/json')
| -rw-r--r-- | files/he/learn/javascript/objects/json/index.html | 346 |
1 files changed, 346 insertions, 0 deletions
diff --git a/files/he/learn/javascript/objects/json/index.html b/files/he/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..5f61b5aa22 --- /dev/null +++ b/files/he/learn/javascript/objects/json/index.html @@ -0,0 +1,346 @@ +--- +title: Working with JSON +slug: Learn/JavaScript/Objects/JSON +translation_of: Learn/JavaScript/Objects/JSON +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">JavaScript Object Notation (JSON) הוא סטדנרט לפורמט מבוסס-טקסט, המבוסס על הסינטקס של אובייקט ב-ה. הוא לרוב משמש בעבור העברת מידע ביישומי רשת (כלומר העברת מידע משרת לקוח, כך שהמידע יוכל להיות מוצג על גבי דף אינטרנט, או ההפך). אנחנו ניתקל בו לעיתים קרובות מאוד ומאמר זה נועד להעניק לכם כל מה שצריך לדעת על עבודה עם JSON כשאנחנו משתמשים ב-JavaScript, כולל עיבוד שלו כך שאנחנו נוכל לגשת למידע המאוחסן בו וכן ליצור JSON.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">ידע מוקדם:</th> + <td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) and OOJS basics (see <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> + </tr> + <tr> + <th scope="row">מטרה:</th> + <td>להבין כיצד לעבוד עם מידע המאוחסן בתוך JSON וכיצד ליצור אובייקטי JSON בעצמנו.</td> + </tr> + </tbody> +</table> + +<h2 id="מה_זה_JSON">מה זה JSON?</h2> + +<p>{{glossary("JSON")}} הוא פורמט מידע מבוסס-טקסט אשר דומה לסינטקס של אובייקט ב-JavaScript. פורמט זה הוצג על ידי <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. למרות שהוא מאוד דומה ומזכיר סינטקס של object literal ב-JavaScript, ניתן להשתמש בו באופן עצמאי ולא רק ב-JavaScript, וסביבות פיתוח אחרות מכילות אפשרויות לקרוא או לעבד וכן ליצור JSON. </p> + +<p>JSON מתקיים כמחרוזת - שימושי מאוד כשאנחנו רוצים להעביר מידע ברשת. הוא צריך להיות מומר לאובייקט JavaScript כאשר אנחנו רוצים לגשת לאותו מידע שמאוחסן בתוך ה-JSON. זה לא מורכב או מסובך - JavaScript מעניקה לנו את האובייקט <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> הגלובלי שיש לו מתודות שזמינות עבורו בעבור המרה בין JSON למחרוזת.</p> + +<div class="note"> +<p><strong>לתשומת לב</strong>: המרה של מחרוזת לאובייקט נקראת <em>parsing</em> ואילו המרה של אובייקט למחרזות כך שהוא יוכל להיות מועבר ברשת, נקראת <em>stringification</em>.</p> +</div> + +<p>אובייקט JSON יכול להיות מאוחסן בתוך קובץ נפרד משלו, שהוא בעצם קובץ טקסט עם סיימות של <code>.json</code> ו-{{glossary("MIME type")}} של <code>application/json</code>.</p> + +<h3 id="המבנה_של_JSON">המבנה של JSON</h3> + +<p>כפי שציינו למעלה, JSON הוא מחרוזת, שהמבנה שלה מזכיר מאוד object literal ב-JavaScript. אנחנו יכולים לכלול את אותם סוגי מידע בסיסיים בתוך JSON כפי אנחנו יכולים לכלול אותם בתוך אובייקט של JavaScript - מחרוזות, מספרים, מערכים, בוליאנים ואובייקטים אחרים. זה מאפשר לנו ליצור היררכיית מידע כמו זו לדוגמא:</p> + +<pre class="brush: json">{ + "squadName": "Super hero squad", + "homeTown": "Metro City", + "formed": 2016, + "secretBase": "Super tower", + "active": true, + "members": [ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + }, + { + "name": "Eternal Flame", + "age": 1000000, + "secretIdentity": "Unknown", + "powers": [ + "Immortality", + "Heat Immunity", + "Inferno", + "Teleportation", + "Interdimensional travel" + ] + } + ] +}</pre> + +<p>אם אנחנו נטען את האובייקט הזה לתוך תוכנית JavaScript ונמיר אותו (parse) בתוך משתנה בשם <code>superHeroes</code> לדוגמא, אנחנו אז נוכל לגשת לאותו מידע המאוחסן בו באמצעות שימוש ב-00000 שאנחנו מכירים מהמאמר בנושא <a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a>. לדוגמא: </p> + +<pre class="brush: js">superHeroes.homeTown +superHeroes['active']</pre> + +<p>על מנת לגשת למידע בהמשך ההיררכיה, אנחנו פשוט נצטרך ״לקשור״ את שם הפרופ׳ המבוקש והאינדקס הרלוונטי במערך ביחד. לדוגמא, על מנת לגשת ל-9999 השלישי של ה-0000 השני ברשימת ה-9999, נוכל לרשום קוד כזה:</p> + +<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre> + +<ol> + <li>ראשית יש לנו את שם המשתנה — <code>superHeroes</code>.</li> + <li>בתוך המשתנה אנחנו רוצים לגשת לפרופ׳ <code>members</code>, אז אנחנו משתמשים ב- <code>["members"]</code>. </li> + <li><code>members</code> מכיל מערך של אובייקטים. אנחנו רוצים לגשת לאובייקט השני בתוך המערך אז אנחנו נשתמש באינדקס <code>[1]</code>. </li> + <li>בתוך האובייקט, אנחנו רוצים לגשת לפרופ׳ <code>powers</code>, אז אנחנו נשתמש ב-<code>["powers"]</code>. </li> + <li>ובתוך הפרופ׳ <code>powers</code>, אנחנו נרצה את הערך השלישי, אז אנחנו נשתמש ב-<code>[2]</code>. </li> +</ol> + +<div class="note"> +<p><strong>לתשומת לב</strong>: יצרנו את ה-JSON שבדוגמא למעלה בקובץ <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> וניתן לראותו גם ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">קוד המקור</a>. </p> + +<p>מנסו להעלות את הקובץ ולגשת למידע בתוך המשתנה באמצעות הקונסולה בדפדפן. </p> +</div> + +<h3 id="מערכים_כ-JSON">מערכים כ-JSON</h3> + +<p>למעלה ציינו שטקסט ב-JSON דומה בעקרון לאובייקט ב-JavaScript, וזה דיי נכון. הסיבה שאנחנו אומרים ״דומה״ ולא ״זהה״, מכיוון שמערך ב-JavaScript הוא בעצם JSON תקין:</p> + +<pre class="brush: json">[ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + } +]</pre> + +<p>הטקסט למעלה הוא JSON תקין לחלוטין. אנחנו פשוט נצטרך לגשת לאיברים במערך (בגרסה המעובדת שלו), באמצעות אינדקס של מערך/</p> + +<h3 id="הערות_נוספות">הערות נוספות</h3> + +<ul> + <li>JSON הוא פשוט פורמט מידע — הוא מכיל רק פרופ׳ ולא מתודות. </li> + <li>JSON דורש גרשיים כפולות - <code>״ ״</code> - סביב מחרוזות ושמות של פרופ׳. גרשיים בודדות - <code>׳ ׳</code> - אינן תקינות. </li> + <li>אפילו טעות כתיב קטנה כמו פסיק או נקודותיים לא במקום יכולה לגרום לקובץ JSON לשגיאה. צריך לשים לב ולעשות ולידציה לכל מידע שאנחנו נרצה להשתמש בו, למרות שהסיכויים שקובץ JSON שנוצר על ידי מחשב יכיל שגיאות הוא נמוך, אם התוכנה שיצרה אותו עובדת כמו שצריך. אנחנו יכולים לעשות ולידציה לקבצי JSON באמצעות יישומים כמו <a href="http://jsonlint.com/">JSONLint</a>. </li> + <li>JSON גם יכול לקחת תבנית של כל סוג מידע שאפשר לכלול אותו ב-JSON, לא רק מערכים או אובייקטים. לדוגמא, מחרוזת בודדת או מספר הם אובייקטי JSON תקינים לחלוטין. </li> + <li>שלא כמו בקוד JavaScript שבו פרופ׳ של אובייקטים אינם מחוייבים בגרשיים, ב-JSON, הפרופ׳ מחוייבים בגרשיים (וכפי שציינו למעלה, רק גרשיים כפולות).</li> +</ul> + +<h2 id="למידה_עצמאית_עבודה_עם_JSON">למידה עצמאית: עבודה עם JSON</h2> + +<p>כעת נלמד באמצעות דוגמא כיצד ניתן לעשות שימוש במידע JSON באתר אינטרנט.</p> + +<h3 id="התחלה">התחלה</h3> + +<p>על מנת להתחיל, עשו עותקים מקודמיים של <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> ושל <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> . הקובץ האחרון מכיל CSS פשוט לעיצוב הדף שלנו והראשון מכיל גוף HTML פשוט:</p> + +<pre class="brush: html"><header> +</header> + +<section> +</section></pre> + +<p>בנוסף, הקובץ הראשון מכיל אלמנט {{HTMLElement("script")}} פשוט שיכיל את קוד ה-JavaScript שנכתוב בתרגיל זה. כעת, קובץ זה מכיל שתי שורות, אשר מכילות הפניה לאלמנט {{HTMLElement("header")}} ולאלמנט {{HTMLElement("section")}} ומאחסן הפניות אלו בתוך משתנים:</p> + +<pre class="brush: js">var header = document.querySelector('header'); +var section = document.querySelector('section');</pre> + +<p>מידע ה-JSON זמין ב-GitHub בכתובת: <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p> + +<p>בתרגיל אנחנו נעלה את המידע לתוך הדף שלנו, באמצעות שימוש במניפולציות על ה-DOM, כך שהדף שלנו ייראה כך:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="קבלת_ה-JSON">קבלת ה-JSON</h3> + +<p>על מנת להשיג את ה-JSON, אנחנו נשתמש ב-API שנקרא {{domxref("XMLHttpRequest")}} (לרוב נקרא <strong>XHR</strong>). זהו אובייקט JavaScript שימושי מאוד, אשר מאפשר לנו לבצע בקשות רשת על מנת לקבל משאבים מהשרת באמצעות JavaScript (כמו תמונות, טקסט, JSON, ואפילו קוד HTML), כלומר, אנחנו יכולים לעדכן חלקים מתוך התוכן שלנו, מבלי לטעון מחדש את הדף כולו. אפשרות זו איפשה לדפי אינטרנט להיות הרבה יותר רספונסיביים. אנחנו נלמד בהרחבה על נושא זה בהמשך. </p> + +<ol> + <li>על מנת להתחיל, אנחנו הולכים לאחסן את ה-URL של ה-JSON שאנחנו נרצה לקבל בתוך משתנה. הוסיפו את הקוד הבא בתחתית הקוד של JavaScript שברשותכם:</li> + <li> + <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre> + </li> + <li>על מנת ליצור בקשה, אנחנו צריכים ליצור אובייקט בקשה חדשה מה-constructor בשם <code>XMLHttpRequest</code>, באמצעות שימוש במילה השמורה <code>new</code>. הוסיפות את הקוד הבא מתחת לשורה האחרונה: + <pre class="brush: js">var request = new XMLHttpRequest();</pre> + </li> + <li>כעת, אנחנו צריכים לפתוח בקשה חדשה לאובייקט בקשה שיצרנו באמצעות המתודה <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">()open</a></code>. הוסיפו את הקוד הבא: + <pre class="brush: js">request.open('GET', requestURL);</pre> + + <p>מתודה זו מקבל לפחות שני פרמטרים - וניתן להזין עוד פרמטרים אופציונליים. הפרמטרים שאנחנו חייבים לציין בעבור הדוגמא הזו הם:</p> + + <ul> + <li>סוג המתודה של HTTP שאנחנו נרצה לבצע בבקשת השרת - במקרה שלנו זו תהיה <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code>, שכן אנחנו רוצים לקבל מידע כלשהו. </li> + <li>ה-URL שאנחנו נבצע אליו בקשה - זהו ה-URL שבו מאוחסן קובץ ה-JSON שלנו. </li> + </ul> + </li> + <li>כעת, הוסיפו את השורות הבאות - בשורות אלו אנחנו מגדירים את ה-<code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> ל-JSON, כך שה-XHR יודע שהשרת יחזיר לנו JSON, ושמאחורי הקלעים תבוצע לו המרה לאובייקט JavaScript. בשורה השנייה אנחנו שולחים את הבקשה באמצעות מתודת <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">()send</a></code>: + <pre class="brush: js">request.responseType = 'json'; +request.send();</pre> + </li> + <li>החלק האחרון של הקוד הרשום להלן הוא בעצם המתנה לקבלת תגובה מהשרת, וביצוע פעולה איתה. הוסיפו את הקוד הבא מתחת לקוד הנוכחי שלכם: + <pre class="brush: js">request.onload = function() { + var superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + </li> +</ol> + +<p>כאן אנחנו מאחסנים את התגובה לבקשה לשלנו (הזמינה בפרופ׳ <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code> ) בתוך משתנה שנקרא <code>superHeroes</code>. המשתנה עכשיו מכיל את האובייקט JavaScript שמבוסס על ה-JSON. לאחר מכן אנחנו מעבירים את אותו אובייקט כארגומנט לשתי קריאות פונקציות - הראשונה תמלא את ה-<<code>header></code> עם המידע הנכון, ואילו השניה תיצור לנו כרטיס מידע בעבור כל ״גיבור״ בקבוצה ותכניס את הכרטיס הזה לתוך <<code>section></code>. </p> + +<p>עטפנו את הקוד הזה בתוך מטפל אירוע - event handler - שירוץ ברגע שהאירוע load נוצר על האובייקט <code>request</code> (ראו <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) - זה מכיוון שהאירוע load נוצר כאשר התגובה מהשרת הוחזרה בהצלחה. ביצוע של דבר זה מבטיח לנו שה-<code>request.response</code> יהיה זמין בוודאות כשנרצה לעשות משהו איתו.</p> + +<h3 id="מילוי_של_מידע_ב-header">מילוי של מידע ב-header</h3> + +<p>כעת, כשהשגנו את המידע ב-JSON והמרנו אותו לאובייקט JavaScript, אנחנו יכולים לעשות בו שימוש באמצעות כתיבה של הפונקציות שציינו למעלה. ראשית, הוסיפו את הפונקציות הרשומות מטה מתחת לקוד הנוכחי שלכם: </p> + +<pre class="brush: js">function populateHeader(jsonObj) { + var myH1 = document.createElement('h1'); + myH1.textContent = jsonObj['squadName']; + header.appendChild(myH1); + + var myPara = document.createElement('p'); + myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed']; + header.appendChild(myPara); +}</pre> + +<p>אנחנו קראנו לפרמטר בשם <code>jsonObj</code>, על מנת להזכיר לעצמנו שזהו בעצם אובייקט JavaScript שמקורו ב-JSON. ראשית, יצרנו אלמנט {{HTMLElement("h1")}} עם <code><a href="/en-US/docs/Web/API/Document/createElement">()createElement</a></code>, והשמנו את ה-<code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> שיהיה שווה לפרופ׳ <code>squadName</code> של האובייקט, ולאחר מכן שייכנו אותו ל-header באמצעות <code><a href="/en-US/docs/Web/API/Node/appendChild">()appendChild</a></code>. </p> + +<p>לאחר מכן עשינו פעולה דומה בעבור הפסקה - <code>p</code>: יצרנו אותה, השמנו את ה-<code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> שלה ולאחר מכן הוספנו אותה ל-header. ההבדל היחיד הוא שהטקסט שלה הוא שרשור של מחרוזות המכילות את הפרופ׳ <code>homeTown</code> ו-<code>formed</code> של האובייקט <code>jsonObj</code>.</p> + +<h3 id="יצירה_של_כרטיסי_המידע_״hero״">יצירה של כרטיסי המידע ״hero״</h3> + +<p>כעת, הוסיפו את הפונקציה הבאה מתחת לקוד הנוכחי, אשריוצרץ ומצגיה את כרטיסי המידע של ה-hero: </p> + +<pre class="brush: js">function showHeroes(jsonObj) { + var heroes = jsonObj['members']; + + for (var i = 0; i < heroes.length; i++) { + var myArticle = document.createElement('article'); + var myH2 = document.createElement('h2'); + var myPara1 = document.createElement('p'); + var myPara2 = document.createElement('p'); + var myPara3 = document.createElement('p'); + var myList = document.createElement('ul'); + + myH2.textContent = heroes[i].name; + myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; + myPara2.textContent = 'Age: ' + heroes[i].age; + myPara3.textContent = 'Superpowers:'; + + var superPowers = heroes[i].powers; + for (var j = 0; j < superPowers.length; j++) { + var listItem = document.createElement('li'); + listItem.textContent = superPowers[j]; + myList.appendChild(listItem); + } + + myArticle.appendChild(myH2); + myArticle.appendChild(myPara1); + myArticle.appendChild(myPara2); + myArticle.appendChild(myPara3); + myArticle.appendChild(myList); + + section.appendChild(myArticle); + } +}</pre> + +<p>לשם התחלה, אחסנו את הפרופ׳ <code>members</code> של אובייקט ה-JavaScript בתוך משתנה חדש. מערך זה מכיל מספר אובייקטים שמכילים את המידע בעבור כל hero. </p> + +<p>לאחר מכן, השתמשנו בלולאת <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a> על מנת לעבור על כל אובייקט בתוך מערך זה. בעבור כל אובייקט במערך, עשינו את הדברים הבאים: </p> + +<ol> + <li>יצרנו מספר אלמנטים חדשים: <code><article></code>, <code><h2></code>, שלוש <code><p></code>, ו-<code><ul></code>.</li> + <li>קבענו ש-<code> <h2> </code>יכיל את הערך הנוכחי של ה-<code>name</code> של ה-hero.</li> + <li>מילאנו את שלושת ה-p עם <code>secretIdentity</code>, <code>age</code> ושורה עם הטקסט "Superpowers:".</li> + <li>אחסנו את הפרופ׳ <code>powers</code> בתוך משתנה חדש שנקרא <code>superPowers</code> - זה מכיל מערך שמציג את ה-superpowers הנוכחיים.</li> + <li>השתמשנו בלולאת <code>for</code> שוב על מנת לעבור על כל ה-superpowers הנוכחיים של hero - בעבור כל אחד יצרנו אלמנט <code><li></code>, והכנסו את ה-superpower לתוכו ולאחר מכן שמנו את ה-<code>listItem</code> בתוך <code><ul></code> באמצעות <code>()appendChild</code>.</li> + <li>לבסוף, שייכנו את <code><h2></code>, <code><p></code> ו-<code><ul></code> לתוך <code><article></code> (<code>myArticle</code>) ולאחר מכן שייכנו את <code><article></code> לתוך <code><section></code>. הסדר שבו דברים משוייכים הוא חשוב שכן כך הם יוצגו על גבי הדף.</li> +</ol> + +<div class="note"> +<p><strong>לתשומת לב</strong>: אם אתם נתקלים בבבעיה, ראו את הקוד המקור ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> או כ-<a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">דף אינטרנט</a>. </p> +</div> + +<div class="note"> +<p><strong>לתשומת לב</strong>: אם אתם מתקשים בעניין ה-dot/bracket notation שאנו משתמשים כדי לגשת לאובייקט JavaScript, אולי יעזור לכם לפתוח את הקובץ <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> בלשונית אחרת או בעורך הקוד שלכם, ולהסתכל עליו תוך כדי מעבר על הקוד שלנו. בנוסף, שקלו לעשות חזרה על המאמר שלנו בנושא <a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a>.</p> +</div> + +<h2 id="המרה_בין_אובייקטים_וטקסט">המרה בין אובייקטים וטקסט</h2> + +<p>הדוגמא למעלה הייתה יחסי פשוטה במונחים של לגשת לאובייקט JavaScript, מכיוון שקבענו שבקשת ה-XHR שלנו תמיר את התגובת JSON ישירות לאובייקט JavaScript באמצעות: </p> + +<pre class="brush: js">request.responseType = 'json';</pre> + +<p>לפעמים אנחנו נקבל מחרוזת JSON לא מעובדת, ואנחנו נצטרך להמיר אותה לאובייקט בעצמנו. וכאשר אנחנו נרצה לשלוח אובייקט JavaScript ברשת, אנחנו נצטרך להמיר אותו ל-JSON (מחרוזת) לפני השליחה שלו. למזלנו, שתי בעיות אלו כל כך נפוצות, שקיים אובייקט בשם <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> הזמין בכל הדפדפנים, המכיל שתי מתודות: </p> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">()parse</a></code>: מקבל מחרוזת JSON כפרמטר ומחזיר את אובייקט JavaScript בהתאם. </li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">()stringify</a></code>: מקבל אובייקט כפרמטר ומחזיר אותו כמחרוזת JSON בהתאם.</li> +</ul> + +<p>אתם יכולים לראות את הראשון בפעולה בקובץ -<a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> - הוא עושה בדיוק את אותו הדבר כמו בדוגמא שבנינו קודם, רק שאנחנו קבענו שה-XHR יחזיר טקסט JSON גולמ, ואז השתמשנו ב-<code>()parse</code> על מנת להמיר אותו לאובייקט JavaScript זה הקוד הרלוונטי:</p> + +<pre class="brush: js">request.open('GET', requestURL); +request.responseType = 'text'; // now we're getting a string! +request.send(); + +request.onload = function() { + var superHeroesText = request.response; // get the string from the response + var superHeroes = JSON.parse(superHeroesText); // convert it to an object + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<p>כפי שאתם יכולים לנחש, <code>()stringify</code> עובד בדרך ההפוכה. נסו להזין את השורות הבאות לקונסולה:</p> + +<pre class="brush: js">var myJSON = { "name": "Chris", "age": "38" }; +myJSON +var myString = JSON.stringify(myJSON); +myString</pre> + +<p>כאן יצרנו אובייקט JavaScript ואז המרנו אותו למחרוזת JSON באמצעות <code>()stringify</code> - ושמרנו את הערך שחזר במשתנה חדש. </p> + +<h2 id="לסיכום">לסיכום</h2> + +<p>במאמר זה, ניסינו להעניק לכם מדריך פשוט כיצד להשתמש ב-JSON בתוכנויות שלנו, כולל כיצד ליצור ולהמיר JSON, וכיצד לגשת למידע המאוחסן בתוכו. במאמר הבא אנחנו נסתכל על פרקטיקות ביצירת אובייקטים ב-JavaScript.</p> + +<h2 id="ראו_גם">ראו גם</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object reference page</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li> + <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a></li> + <li><a href="/he/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript למתחילים</a></li> + <li><a href="/he/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/he/docs/Learn/JavaScript/Objects/Inheritance">הורשה ב-JavaScript</a></li> + <li><a href="/he/docs/Learn/JavaScript/Objects/JSON">עבודה עם JSON data</a></li> + <li><a href="/he/docs/Learn/JavaScript/Objects/Object_building_practice">שיטות ליצירת אובייקטים</a></li> + <li><a href="/he/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> |