JavaScript JSON Practical
)Tasks (Intermediate Level
ﺗﺤﻮﯾﻞ A) [Link]() -
اﻟﻨﺼﻮص إﻟﻰ ﻛﺎﺋﻨﺎت
)أﺳﺌﻠﺔ (10
:ﻟﺪﯾﻚ اﻟﻨﺺ اﻟﺘﺎﻟﻲ 1.
;'}let data = '{"name":"John","age":30
name.اﻛﺘﺐ ﻛﻮدًا ﻟﺘﺤﻮﯾﻠﮫ إﻟﻰ ﻛﺎﺋﻦ ﺛﻢ اطﺒﻊ ﻗﯿﻤﺔ
:ﯾﺤﺘﻮي ﻋﻠﻰ ﻣﺼﻔﻮﻓﺔ ﻣﻦ اﻟﻄﻼب JSONﻟﺪﯾﻚ 2.
;']}"let studentsJSON = '[{"name":"Ali"}, {"name":"Lina
.ﻟﻄﺒﺎﻋﺔ أﺳﻤﺎء اﻟﻄﻼب واﺣﺪًا واﺣﺪًا )([Link]اﺳﺘﺨﺪم
:ﯾﺤﺘﻮي ﻋﻠﻰ ﻛﺎﺋﻦ داﺧﻞ ﻛﺎﺋﻦ JSONﻟﺪﯾﻚ ﻧﺺ 3.
;'}}}let info = '{"user":{"name":"Sara","scores":{"math":90
math.اﺳﺘﺨﺮج ﻗﯿﻤﺔ
ﻏﯿﺮ ﺻﺎﻟﺢ ،ﺛﻢ اطﻠﺐ ﻣﻦ اﻟﻄﺎﻟﺐ إﺻﻼﺣﮫ ﻟﯿﻌﻤﻞ JSONأﻋﻂ ﻣﺜﺎًﻻ ﻟﻨﺺ 4.
[Link]().ﻣﻊ
:ﺣّﻮل اﻟﻨﺺ اﻟﺘﺎﻟﻲ إﻟﻰ ﻛﺎﺋﻦ وﻏﯿّﺮ ﻗﯿﻤﺔ اﻟﻌﻤﺮ ﻓﻘﻂ 5.
'}'{"name":"Adam","age":22
null:و Booleanﯾﺤﺘﻮي ﻋﻠﻰ JSONﻟﺪﯾﻚ ﻧﺺ 6.
'}'{"active":true,"data":null
.ﻟﻜﻞ ﻗﯿﻤﺔ datatypeﺣّﻮﻟﮫ إﻟﻰ ﻛﺎﺋﻦ واطﺒﻊ اﻟﻨﻮع
ﺛﻢ اﺣﺴﺐ ﻣﺠﻤﻮع درﺟﺎت )([Link]إﻟﻰ JSONأرﺳﻞ ﻧﺺ 7.
:اﻟﻄﺎﻟﺐ
'}]'{"grades":[50, 60, 70
ﯾﺤﺘﻮي ﻋﻠﻰ ﻣﺼﻔﻮﻓﺔ ﻣﻦ اﻟﻤﻨﺘﺠﺎت ،اطﺒﻊ ﻓﻘﻂ JSONﻟﺪﯾﻚ ﻧﺺ 8.
.اﻟﻤﻨﺘﺠﺎت اﻟﺘﻲ ﺳﻌﺮھﺎ أﻛﺒﺮ ﻣﻦ 50
:ﯾﺤﺘﻮي ﻋﻠﻰ ﺗﺎرﯾﺦ 9. parse JSON
'}"'{"created":"2024-01-10
Date.اطﺒﻊ اﻟﺘﺎرﯾﺦ ﻓﻲ ﻛﺎﺋﻦ
10. ﻓﻲ ><ulﯾﺤﺘﻮي ﻋﻠﻰ ﻗﺎﺋﻤﺔ ﻣﮭﺎم ،ﺛﻢ اﻋﺮﺿﮭﺎ داﺧﻞ parse JSON
DOM.
ﺗﺤﻮﯾﻞ — )(B) [Link]
JSONاﻟﻜﺎﺋﻨﺎت إﻟﻰ ﻧﺼﻮص
)أﺳﺌﻠﺔ (10
11. :ﻟ ﺪ ﯾ ﻚ ا ﻟ ﻜ ﺎ ﺋ ﻦ ا ﻟ ﺘ ﺎ ﻟ ﻲ
;}let user = {name: "Mona", age: 28
[Link]().ﺑﺎﺳﺘﺨﺪام JSONﺣّﻮﻟﮫ إﻟﻰ
12. JSON.ﺛﻢ ﺣّﻮﻟﮫ إﻟﻰ )][ (skillsﻗﻢ ﺑﺈﻧﺸﺎء ﻛﺎﺋﻦ ﯾﻀﻢ 3ﻣﮭﺎرات
13. localStorage:ﺛﻢ ﺧّﺰﻧﮫ ﻓﻲ JSONﺣّﻮل اﻟﻜﺎﺋﻦ اﻟﺘﺎﻟﻲ إﻟﻰ
;}"let settings = {theme: "dark", lang: "en
14. ﻟﺘﺠﺎھﻞ ﺧﺎﺻﯿﺔ replacerﻣﻊ )([Link]اﺳﺘﺨﺪم
password:
}"{username:"admin", password:"1234
15. ﺛﻢ ﻻﺣﻆ ﻛﯿﻒ ﯾﺘﻢ ﺗﻤﺜﯿﻞ JSONﺣّﻮل ﻛﺎﺋﻨًﺎ ﯾﺤﺘﻮي ﻋﻠﻰ ﺗﻮارﯾﺦ إﻟﻰ
.اﻟﺘﺎرﯾﺦ
16. :ﺣّﻮل ﻛﺎﺋﻦ ﯾﺤﺘﻮي ﻋﻠﻰ داﻟﺔ
;}};let obj = {name:"Test", action:function(){return 5
.وﺻﻒ ﻣﺎذا ﯾﺤﺪث وﻟﻤﺎذا
17. ﺑﺎﺳﺘﺨﺪام اﻟﻤﺴﺎﻓﺎت JSONﻟﺘﻨﺴﯿﻖ )([Link]اﺳﺘﺨﺪم
readable.ﻟﺠﻌﻠﮫ )(space parameter
18. ﺛﻢ اطﺒﻊ طﻮل JSONﻗﻢ ﺑﺘﺤﻮﯾﻞ ﻛﺎﺋﻦ ﯾﻤﺜﻞ “ﻓﺎﺗﻮرة ﺷﺮاء” إﻟﻰ
.اﻟﻨﺺ
19. stringfyأﻧﺸﺊ ﻛﺎﺋﻨًﺎ ﯾﻤﺜﻞ ﻣﺴﺘﺨﺪًﻣﺎ ﺑﺪاﺧﻠﮫ ﻣﺼﻔﻮﻓﺔ ﻟﻠﻤﮭﺎم ،ﺛﻢ
.ﻛﺎﻣﻞ اﻟﻜﺎﺋﻦ
20. اﻟﻨﺘﯿﺠﺔ ﻣّﺮة أﺧﺮى parse ،ﻋﻠﻰ ﻛﺎﺋﻦ ﻛﺒﯿﺮ ،ﺛﻢ stringifyاﺳﺘﺨﺪم
DOM.ﺛﻢ اﻋﺮﺿﮭﺎ ﻓﻲ
اﻟﺘﻌﺎﻣﻞ ﻣﻊ( C) JSON + APIs
) JSONوإرﺟﺎع API
)أﺳﺌﻠﺔ ﻋﻤﻠﯿﺔ ﻣﺘﻘﺪﻣﺔ (12
21. :ﻣﻦ اﻟﺮاﺑﻂ JSONﻟﺠﻠﺐ )(fetchاﺳﺘﺨﺪم
[Link]
.اطﺒﻊ أﺳﻤﺎء اﻟﻤﺴﺘﺨﺪﻣﯿﻦ
22. :ﻣﻦ postاﺟﻠﺐ أول
[Link]
DOM.داﺧﻞ ><h2ﻓﻲ titleﺛﻢ اﻋﺮض
23. === (completedﺛﻢ اﻋﺮض ﻓﻘﻂ اﻟﻤﻜﺘﻤﻞ todo itemsاﺟﻠﺐ ﻗﺎﺋﻤﺔ
true).
24. ﺛﻢ اﻋﺮض أول ﺻﻮرة APIﻟﺠﻠﺐ ﺻﻮر ﻣﻦ )(fetchاﺳﺘﺨﺪم
<img>.داﺧﻞ
25. fetch + method:وھﻤﯿﺔ )ﺑﺎﺳﺘﺨﺪام APIإﻟﻰ JSONأرﺳﻞ
POST).
26. دﯾﻨﺎﻣﯿﻜﯿًﺎ ) (Cardﺛﻢ أﻧﺸﺊ ﺑﻄﺎﻗﺔ APIاﺟﻠﺐ ﺑﯿﺎﻧﺎت ﻣﺴﺘﺨﺪم ﻋﺒﺮ
DOM.ﻓﻲ
27. .ﻹﺣﻀﺎر ﻗﺎﺋﻤﺔ ﺗﻌﻠﯿﻘﺎت ﺛﻢ اﻋﺮض أول 5ﻓﻘﻂ APIاﺳﺘﺨﺪم
28. ﺟﺪﯾﺪ وﺿﻌﮫ داﺧﻞ ﻋﻨﺼﺮ JSONﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ زر ،اﺟﻠﺐ
<pre>.
29. [Link](obj, null,ﺛﻢ اﺳﺘﺨﺪم APIﻣﻦ JSONاﺟﻠﺐ
.ﻟﻌﺮﺿﮫ ﺑﺸﻜﻞ ﺟﻤﯿﻞ )2
30. ﯾﺤﺘﻮي ﻋﻠﻰ ﻣﺼﻔﻮﻓﺔ ﻣﻨﺘﺠﺎت ﺛﻢ ﻗﻢ ﺑﺒﻨﺎﺋﮭﺎ داﺧﻞ JSONاﺟﻠﺐ
<table>.ﺟﺪول
31. API.ﻏﯿﺮ ﺻﺎﻟﺢ ﻗﺎدم ﻣﻦ JSONﻟﻤﻌﺎﻟﺠﺔ try/catchاﺳﺘﺨﺪم
32. ) (Searchﺛﻢ اﺑﺤﺚ داﺧﻞ اﻟﺒﯿﺎﻧﺎت ﻋﻦ ﻗﯿﻤﺔ ﻣﻌﯿﻨﺔ JSONاﺟﻠﺐ
DOM.وﻋﺮض اﻟﻨﺘﺎﺋﺞ ﻓﻲ
ﺧﺰن ﺑﯿﺎﻧﺎت ﻧﻤﻮذج BONUS
داﺧﻞ JSONﻛﺎﻣﻠﺔ ﻛـ )(form
LocalStorage.
33. ﻟﺠﻠﺐ اﻹﻋﺪادات JSONﺻﻐﯿﺮة ﺗﻌﺘﻤﺪ ﻋﻠﻰ Dashboardأﻧﺸﺊ
(theme, language).
34. spreadﺛﻢ دﻣﺞ اﻟﺒﯿﺎﻧﺎت ﻓﻲ ﻛﺎﺋﻦ ﺟﺪﯾﺪ ﺑﺎﺳﺘﺨﺪام JSONاﺟﻠﺐ
operator.
35. ﺑﺎﺳﺘﺨﺪام( graph chartإﻟﻰ ﻣﺨﻄﻂ APIﻣﻦ JSONﺣّﻮل
).ﺑﺪل ﻣﻜﺘﺒﺎت DOM