Ecmascript 6 (ES6) جافا سكربت (6)

‫ﺍﻟﺮﺣﻴﻢ‬ ‫ﺍﻟﺮﺣﻤﻦ‬ ‫ﷲ‬ ‫ﺑﺴﻢ‬
‫ﺩﻭﺭﺓ‬:ECMAScript 6)‫ﺳﻜﺮﺑﺖ‬ ‫ﻟﻠﺠﺎﻓﺎ‬ ‫ﺗﺤﺪﻳﺪﺍ‬(
‫ﺗﻘﺪﻳﻢ‬:‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬.
‫ﺍﻹﻟﻜﺘﺮﻭﻧﻲ‬ ‫ﺍﻟﺒﺮﻳﺪ‬:nees.com2aneeshikmat@
‫ﺍﻹﻟﻜﺘﺮﻭﻧﻲ‬ ‫ﺍﻟﻤﻮﻗﻊ‬:nees.com2www.
‫ﻣﺠﺎﻧﻴﺔ‬‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com

‫ﺍﻟﻔﻬﺮﺱ‬
‫ﺍﻟﻤﻘﺪﻣﺔ‬)‫ﺍﻟﻤﻘﺪﻣﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻓﻲ‬ ‫ﻭﺭﺩ‬ ‫ﻣﺎ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻹﻁﻼﻉ‬ ‫ﺗﻨﺴﻰ‬ ‫ﻻ‬(
ECMAScript
ECMAScript & Browsers Support
6Running ECMAScript
let Keyword
KeywordConst
Destruct Values
ValuesDefault Function Arguments
operatorJS spread “…”
Template Strings ` `

‫ﺍﻟﻔﻬﺮﺱ‬
Function =>Arrow
Keyword on JSClass
Loopfor of
o” Literal0“
b" Literal0"
Yield Keyword & Fun *()
Set Object
Map Object
JS modules)‫ﻓﻘﻂ‬ ‫ﺳﺮﻳﻌﺔ‬ ‫ﻧﺒﺬﺓ‬(
‫ﺍﻟﺨﺎﺗﻤﺔ‬

‫ﺍﻟﻤﻘﺪﻣﺔ‬
‫ﺍﻟﺮﺣﻴﻢ‬ ‫ﺍﻟﺮﺣﻤﻦ‬ ‫ﷲ‬ ‫ﺑﺴﻢ‬
‫ﺃﻧﻮﺍﺭ‬ ‫ﺇﻟﻰ‬ ‫ﻭﺍﻟﻮﻫﻢ‬ ‫ﺍﻟﺠﻬﻞ‬ ‫ﻅﻠﻤﺎﺕ‬ ‫ﻣﻦ‬ ‫ﺑﺎﻹﺳﻼﻡ‬ ‫ﺃﺧﺮﺟﻨﺎ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺤﻤﺪ ہﻠﻟ‬
‫ﻭﺍﻟﺤﻤﺪ ہﻠﻟ‬ ، ‫ﺍﻟﺸﻬﻮﺍﺕ ﺇﻟﻰ ﺟﻨﺎﺕ ﺍﻟﻘﺮﺑﺎﺕ‬ ‫ﻭﻣﻦ ﻭﺣﻮﻝ‬ ، ‫ﻤﻌﺮﻓﺔ ﻭﺍﻟﻌﻠﻢ‬
‫ﻭﺟﻌﻞ‬ ‫ﺍﻹﺳﻼﻡ‬ ‫ﻭﺷﺮﻉ‬ ، ‫ﻋﻮﺟﺎ‬ ‫ﻟﻪ‬ ‫ﻳﺠﻌﻞ‬ ‫ﻭﻟﻢ‬ ‫ﺍﻟﻜﺘﺎﺏ‬ ‫ﻋﺒﺪﻩ‬ ‫ﻋﻠﻰ‬ ‫ﺃﻧﺰﻝ‬ ‫ﺍﻟﺬﻱ‬
، ‫ﺑﻪ‬ ‫ﺗﻤﺴﻚ‬ ‫ﻟﻤﻦ‬ ً‫ﺎ‬‫ﺃﻣﻨ‬ ‫ﻓﺠﻌﻠﻪ‬ ، ‫ﻏﺎﻟﺒﻪ‬ ‫ﻣﻦ‬ ‫ﻋﻠﻰ‬ ‫ﺃﺭﻛﺎﻧﻪ‬ ‫ﻭﺃﻋﺰ‬ ، ً‫ﺎ‬‫ﻣﻨﻬﺠ‬ ‫ﻟﻪ‬
ً‫ﺍ‬‫ﻭﻧﻮﺭ‬ ، ‫ﻋﻨﻪ‬ ‫ﺧﺎﺻﻢ‬ ‫ﻟﻤﻦ‬ ً‫ﺍ‬‫ﻭﺷﺎﻫﺪ‬ ، ‫ﺑﻪ‬ ‫ﺗﻜﻠﻢ‬ ‫ﻟﻤﻦ‬ ً‫ﺎ‬‫ﻭﺑﺮﻫﺎﻧ‬ ، ‫ﺩﺧﻠﻪ‬ ‫ﻟﻤﻦ‬ ً‫ﺎ‬‫ﻭﺳﻠﻤ‬
، ‫ﺗﻮﺳﻢ‬ ‫ﻟﻤﻦ‬ ً‫ﺔ‬‫ﻭﺁﻳ‬ ، ‫ﺗﺪﺑﺮ‬ ‫ﻟﻤﻦ‬ ً‫ﺎ‬‫ﻭﻟﺒ‬ ، ‫ﻋﻘﻞ‬ ‫ﻟﻤﻦ‬ ً‫ﺎ‬‫ﻭﻓﻬﻤ‬ ، ‫ﺑﻪ‬ ‫ﺍﺳﺘﻀﺎء‬ ‫ﻟﻤﻦ‬
‫ﻟﻤﻦ‬ ‫ﻭﺛﻘﺔ‬ ، ‫ﺻﺪﻕ‬ ‫ﻟﻤﻦ‬ ‫ﻭﻧﺠﺎﺓ‬ ، ‫ﺍﺗﻌﻆ‬ ‫ﻟﻤﻦ‬ ‫ﻭﻋﺒﺮﺓ‬ ، ‫ﻋﺰﻡ‬ ‫ﻟﻤﻦ‬ ً‫ﺓ‬‫ﻭﺗﺒﺼﺮ‬
‫ﺻﺒﺮ‬ ‫ﻟﻤﻦ‬ ‫ﻭﺟﻨﺔ‬ ، ‫ﻓﻮﺽ‬ ‫ﻟﻤﻦ‬ ‫ﻭﺭﺍﺣﺔ‬ ، ‫ﺗﻮﻛﻞ‬.)‫ﺍﻟﻨﺎﺑﻠﺴﻲ‬ ‫ﻟﻠﺪﻛﺘﻮﺭ‬ ‫ﺍﻹﺳﻼﻡ‬ ‫ﻓﻲ‬ ‫ﻭﻣﻀﺎﺕ‬ ‫ﻛﺘﺎﺏ‬ ‫ﻣﻘﺪﻣﺔ‬(
‫ﺍﻟﺤﺮﻛﺎﺕ‬ ‫ﻭﻋﺪﺩ‬ ،‫ﻳﻜﻮﻥ‬ ‫ﻣﺎ‬ ‫ﻭﻋﺪﺩ‬ ،‫ﻛﺎﻥ‬ ‫ﻣﺎ‬ ‫ﻋﺪﺩ‬ ،‫ﺍﻟﻌﺎﻟﻤﻴﻦ‬ ‫ﺭﺏ‬ ‫ﺤﻤﺪ ہﻠﻟ‬
‫ﻭﺍﻟﺴﻜﻮﻥ‬.

‫ﺍﻝ‬ ‫ﻭﻫﻮ‬ ،‫ﺟﺪﻳﺪ‬ ‫ﻣﻮﺿﻮﻉ‬ ‫ﻋﻦ‬ ،‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ،‫ﺍﻟﻴﻮﻡ‬ ‫ﺳﻨﺘﺤﺪﺙ‬
ECMAScript 6‫ﻋﻦ‬ ‫ﺑﺎﻟﺤﺪﻳﺚ‬ ‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬ ‫ﻭﺳﻨﺒﺪﺃ‬ ،
ECMAScript‫ﺍﻟﻤﺰﺍﻳﺎ‬ ‫ﻋﺎﻟﻢ‬ ‫ﺍﻟﻰ‬ ‫ﺳﻮﻳﺎ‬ ‫ﺳﻨﻨﺘﻘﻞ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬ ،‫ﻣﺨﺘﺼﺮ‬ ‫ﺑﺸﻜﻞ‬
‫ﺍﻟﺠﺪﻳﺪ‬ ‫ﺍﻹﺻﺪﺍﺭ‬ ‫ﻣﻊ‬ ‫ﺗﻘﺪﻳﻤﻬﺎ‬ ‫ﺗﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﻭﺍﻟﺨﺼﺎﺋﺺ‬)‫ﺍﻹﺻﺪﺍﺭ‬6(‫ﻣﻮﺿﻮﻉ‬ ‫ﻭﻫﻮ‬
‫ﺍﻟﻤﺘﻮﺍﺿﻌﺔ‬ ‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻫﺬﻩ‬.
‫ﺗﻬﻢ‬ ‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻫﺬﻩ‬ ‫ﻁﺒﻌﺎ‬‫ﻭﺍﻟﻤﺒﺮﻣﺠﻴﻦ‬ ‫ﺍﻟﻤﻄﻮﺭﻳﻦ‬ ‫ﺟﻤﻴﻊ‬‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻌﻤﻠﻮﻥ‬ ‫ﺍﻟﺬﻳﻦ‬
‫ﻟﻞ‬ ‫ﺍﻷﻫﻤﻴﺔ‬ ‫ﻭﺗﺰﺩﺍﺩ‬ ،‫ﺳﻜﺮﺑﺖ‬FRONT END‫ﻭﺃﻫﻤﻴﺔ‬ ،‫ﻷﻫﻤﻴﺘﻬﺎ‬ ،‫ﻣﻨﻬﻢ‬
‫ﺍﻹﺻﺪﺍﺭ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﻟﻠﺠﺎﻓﺎ‬ ‫ﺣﺼﻠﺖ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﺘﺤﺪﻳﺜﺎﺕ‬^^‫ﻣﻌﻨﺎ‬ ‫ﻓﻜﻮﻧﻮﺍ‬ ،^_^

‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻣﺘﻄﻠﺒﺎﺕ‬:
(1HTML
(2CSS
(3JS)‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬ ‫ﺟﻴﺪﺓ‬ ‫ﻣﻌﺮﻓﺔ‬(
(4‫ﻣﺜﻞ‬ ‫ﻧﺼﻮﺹ‬ ‫ﻣﺤﺮﺭ‬notepad++‫ﺇﻧﺘﺮﻧﺖ‬ ‫ﻣﺘﺼﻔﺢ‬ ‫ﻭ‬:P
*‫ﻣﻼﺣﻈﺔ‬:‫ﻫﺬﺍ‬ ‫ﺑﻞ‬ ،‫ﻗﺒﻠﻪ‬ ‫ﻣﺎ‬ ‫ﻛﻞ‬ ‫ﺣﺬﻑ‬ ‫ﺟﺪﻳﺪﺓ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﺃﻭ‬ ‫ﺟﺪﻳﺪ‬ ‫ﺇﺻﺪﺍﺭ‬ ‫ﻳﻌﻨﻲ‬ ‫ﻻ‬
‫ﻳﻜﻮﻥ‬ ‫ﻭﻗﺪ‬ ،‫ﻣﺎ‬ ‫ﻣﻮﺿﻮﻉ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺠﻮﺍﻧﺐ‬ ‫ﺃﺣﺪ‬ ‫ﻋﻠﻰ‬ ‫ﻭﻗﻊ‬ ‫ﺗﺤﺪﻳﺚ‬ ‫ﻫﻨﺎﻙ‬ ‫ﺃﻥ‬ ‫ﻳﻌﻨﻲ‬
‫ﻛﻠﻪ‬ ‫ﻳﻜﻮﻥ‬ ‫ﻭﻗﺪ‬ ،‫ﺟﻠﻪ‬... !
*‫ﻣﻼﺣﻈﺔ‬2:ECMAScript6‫ﺏ‬ ‫ﻟﻬﺎ‬ ‫ﻳﺮﻣﺰ‬:ES6

*‫ﻣﻼﺣﻈﺔ‬3:‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻫﺬﻩ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺒﺪء‬ ‫ﺗﺎﺭﻳﺦ‬23-09-2015‫ﺍﻟﺘﺎﺭﻳﺦ‬ ‫ﺍﻋﺘﻤﺎﺩ‬ ‫ﻭﺗﻢ‬ ،
01-10-2015‫ﺍﻹﺻﺪﺍﺭ‬ ‫ﺃﻥ‬ ‫ﺍﻋﺘﺒﺎﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺎﻟﺪﻭﺭﺓ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﻟﺠﻤﻴﻊ‬ ‫ﻛﺘﺎﺭﻳﺦ‬
‫ﺑﺎﻝ‬ ‫ﺍﻟﺨﺎﺹ‬compiler‫ﻷﻥ‬ ،‫ﻛﺘﺎﺑﺘﻪ‬ ‫ﺣﻴﻦ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻫﺬﻩ‬ ‫ﻓﻲ‬ ‫ﻗﻮﻟﻪ‬ ‫ﻳﺘﻢ‬ ‫ﻣﺎ‬ ‫ﻳﺪﻋﻢ‬
‫ﻟﻠﺠﺎﻓﺎ‬ ‫ﺍﻟﺠﺪﻳﺪ‬ ‫ﺑﺎﻹﺻﺪﺍﺭ‬ ‫ﺍﻹﻋﺘﻤﺎﺩ‬ ‫ﺇﻁﻼﻕ‬ ‫ﺑﻌﺪ‬ ‫ﻛﺎﻧﺖ‬ ‫ﺍﻟﺘﺎﺭﻳﺦ‬ ‫ﻫﺬﺍ‬ ‫ﻭﻓﻲ‬ ‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻫﺬﻩ‬
‫ﺳﻜﺮﺑﺖ‬ES6‫ﺍﻟﻔﻜﺮﺓ‬ ‫ﻭﺳﺘﺘﻀﺢ‬ ،‫ﺑﻌﺪ‬ ‫ﺗﺪﻋﻤﻬﺎ‬ ‫ﻟﻢ‬ ‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬ ‫ﺃﻥ‬ ‫ﺣﻴﻦ‬ ‫ﻓﻲ‬
‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ،‫ﺍﻟﻘﺎﺩﻣﺔ‬ ‫ﺑﺎﻟﺸﺮﺍﺋﺢ‬..

ECMASCRIPT
‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﻗﻠﻴﻼ‬ ‫ﺃﺗﺤﺪﺙ‬ ‫ﻫﻞ‬ ،‫ﻣﺤﺘﺎﺭﺍ‬ ‫ﻛﻨﺖ‬ ،‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻫﺬﻩ‬ ‫ﺑﺎﺩﺉ‬ ‫ﻓﻲ‬
ECMAScript‫ﷲ‬ ‫ﻫﺪﺍﻧﻲ‬ ‫ﺛﻢ‬ ،‫ﻻ‬ ‫ﺃﻡ‬ ‫ﺑﻬﺎ‬ ‫ﺧﺎﺻﺎ‬ ‫ﺟﺰﺋﺎ‬ ‫ﻟﻬﺎ‬ ‫ﺃﻓﺮﻍ‬ ‫ﻭﻫﻞ‬ ،‫ﻻ‬ ‫ﺃﻡ‬
‫ﻋﻦ‬ ‫ﺍﻟﻜﻠﻤﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻏﻴﺎﺏ‬ ‫ﺍﻟﻰ‬ ‫ﻳﻌﻮﺩ‬ ‫ﻭﺍﻟﺴﺒﺐ‬ ،‫ﻣﻨﻔﺼﻞ‬ ‫ﺟﺰء‬ ‫ﻓﻲ‬ ‫ﺃﺿﻌﻬﺎ‬ ‫ﻷﻥ‬ ‫ﺗﻌﺎﻟﻰ‬
‫ﻣﻨﻬﻢ‬ ‫ﺍﻟﻨﺎﺷﺌﻴﻦ‬ ‫ﻭﺧﺼﻮﺻﺎ‬ ،‫ﻭﺍﻟﻤﻄﻮﺭﻳﻦ‬ ‫ﺍﻟﻤﺒﺮﻣﺠﻴﻦ‬ ‫ﻣﻌﻈﻢ‬..
‫ﺍﻝ‬ECMAScript‫ﺍﻟﻤﻌﺎﻳﻴﺮ‬ ‫ﻭﺿﻊ‬ ‫ﻫﺪﻓﻬﺎ‬ ،‫ﺭﺑﺤﻴﺔ‬ ‫ﻏﻴﺮ‬ ‫ﻋﺎﻟﻤﻴﺔ‬ ‫ﻣﻨﻈﻤﺔ‬ ‫ﻫﻲ‬
‫ﺍﻟﺴﻜﺮﺑﺖ‬ ‫ﺑﻠﻐﺎﺕ‬ ‫ﺍﻟﺨﺎﺻﺔ‬JavaScript, Action Script, JScript
‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬ ،‫ﺑﺎﻟﺴﻜﺮﺑﺖ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﻭﺍﻟﻘﻮﺍﻋﺪ‬ ‫ﺍﻟﻌﺎﻡ‬ ‫ﺍﻟﻮﺻﻒ‬ ‫ﻭﺿﻊ‬ ‫ﻋﻠﻰ‬ ‫ﻭﺗﻘﻮﻡ‬
‫ﻟﻠﺴﻜﺮﺑﺖ‬ ‫ﺍﻟﺘﻄﻮﻳﺮ‬ ‫ﻋﻦ‬ ‫ﺍﻟﻤﺴﺆﻭﻟﺔ‬ ‫ﺍﻟﺠﻬﺔ‬ ‫ﻫﻲ‬ ‫ﻭﻟﺘﺼﺒﺢ‬ ،‫ﻭﻣﻜﺎﺗﺒﻬﺎ‬ ‫ﺍﻟﻠﻐﺔ‬ ‫ﺗﻄﻮﻳﺮ‬
‫ﺍﻝ‬ ‫ﻣﻊ‬ ‫ﻳﺘﻌﺎﻣﻞ‬ ‫ﺍﻟﺬﻱ‬ ‫ﻟﻠﺠﺎﻧﺐ‬ ‫ﻭﺗﺤﺪﻳﺪﺍ‬Client-Side...‫ﻭﺍﻝ‬ECMA‫ﻫﻲ‬
‫ﻝ‬ ‫ﺇﺧﺘﺼﺎﺭ‬European Computer Manufacturers Association (ECMA)

ECMASCRIPT
‫ﻭﺍﻝ‬ECMA‫ﺗﻄﻮﻳﺮ‬ ‫ﻋﻦ‬ ‫ﻭﺍﻟﻤﺴﺆﻭﻟﺔ‬ ‫ﺭﺑﺤﻴﺔ‬ ‫ﺍﻟﻐﻴﺮ‬ ‫ﺍﻟﻤﻨﻈﻤﺔ‬ ‫ﻓﺈﻧﻪ‬ ‫ﻟﻮﺣﺪﻫﺎ‬
‫ﻣﺜﻞ‬ ‫ﺍﻷﺧﺮﻯ‬ ‫ﻭﺍﻷﻣﻮﺭ‬ ‫ﺍﻟﻠﻐﺎﺕ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻌﺪﻳﺪ‬ ‫ﻣﻌﺎﻳﻴﺮ‬ ‫ﻭﻭﺿﻊ‬C++/Cli‫ﺍﻝ‬ ‫ﻭ‬
HVD‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻟﺘﺨﺼﻴﺺ‬ ‫ﺍﻹﺳﻢ‬ ‫ﺑﻌﺪ‬ ‫ﺑﺎﻟﻤﺠﺎﻝ‬ ‫ﺗﺤﺪﻳﺪﻫﺎ‬ ‫ﻳﺘﻢ‬ ‫ﻟﺬﻟﻚ‬ ،‫ﻭﻏﻴﺮﻫﺎ‬
‫ﻣﻔﻬﻮﻡ‬ ‫ﻋﻦ‬ ‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺍﻟﺸﺮﻳﺤﺔ‬ ‫ﻓﻲ‬ ‫ﺫﻛﺮﻧﺎ‬ ‫ﻛﻤﺎ‬ECMAScript....
‫ﺷﺮﻛﺔ‬ ‫ﻗﺒﻞ‬ ‫ﻣﻦ‬ ‫ﻁﻮﺭﺕ‬ ،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺑﺄﻥ‬ ‫ﻳﻌﻠﻢ‬ ‫ﺟﻤﻴﻌﻨﺎ‬ ‫ﻁﺒﻌﺎ‬Netscape
‫ﺍﻝ‬ ‫ﺍﻟﻰ‬ ‫ﻣﻨﻬﺎ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺑﻨﻘﻞ‬ ‫ﻗﺎﻣﺖ‬ ‫ﺍﻟﺸﺮﻛﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻟﻜﻦ‬ECMA،‫ﺍﻟﻌﺎﻟﻤﻴﺔ‬
‫ﻋﻠﻴﻬﺎ‬ ‫ﺳﻴﻌﻤﻞ‬ ‫ﻟﻤﻦ‬ ‫ﻋﺎﻟﻤﻴﺎ‬ ‫ﻭﺍﺿﺤﺔ‬ ‫ﻭﻣﻌﺎﻳﻴﺮ‬ ‫ﺃﺳﺲ‬ ‫ﻭﺿﻊ‬ ‫ﻟﻴﺘﻢ‬..‫ﻋﺎﻡ‬ ‫ﻓﻲ‬ ‫ﻫﺬﺍ‬ ‫ﻭﻛﺎﻥ‬
1996‫ﺷﻬﺮ‬ ‫ﻓﻲ‬ ‫ﺇﺻﺪﺍﺭ‬ ‫ﺃﻭﻝ‬ ‫ﻭﺻﺪﺭ‬ ،6‫ﻋﺎﻡ‬1997...
‫ﻣﻬﺎﻡ‬ ‫ﻣﻦ‬ ‫ﺗﻘﺪﻣﻪ‬ ‫ﻭﻣﺎ‬ ،‫ﺗﺸﻴﺮ‬ ‫ﻣﺎﺫﺍ‬ ‫ﻭﺍﻟﻰ‬ ،‫ﺍﻟﻜﻠﻤﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺗﻌﻨﻲ‬ ‫ﻣﺎﺫﺍ‬ ‫ﻋﺮﻓﻨﺎ‬ ‫ﻧﻜﻮﻥ‬ ‫ﻭﺑﻬﺬﺍ‬ ،‫ﻭﺍﻵﻥ‬
‫ﻣﻮﺿﻮﻋﻨﺎ‬ ‫ﻷﻧﻬﺎ‬ ‫ﺧﺼﻮﺻﺎ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﻭﺍﻟﺠﺎﻓﺎ‬ ‫ﻋﻤﻮﻣﺎ‬ ‫ﺍﻟﺴﻜﺮﺑﺖ‬ ‫ﻟﻤﻄﻮﺭﻳﻦ‬^_^

ECMASCRIPT&BROWSERS
‫ﻟﻴﺘﻢ‬ ‫ﺯﻣﻨﻴﺔ‬ ‫ﻓﺘﺮﺓ‬ ‫ﻫﻨﺎﻙ‬ ‫ﺃﻥ‬ ‫ﺍﻟﻤﻌﻠﻮﻡ‬ ‫ﻣﻦ‬ ‫ﻓﺈﻧﻪ‬ ،‫ﻣﻜﺘﺒﺔ‬ ‫ﺃﻱ‬ ‫ﺗﺤﺪﻳﺚ‬ ‫ﺃﻭ‬ ‫ﺗﻄﻮﻳﺮ‬ ‫ﻋﻨﺪ‬
‫ﻣﺜﺎﻝ‬ ‫ﻭﺃﻗﺮﺏ‬ ،‫ﺍﻟﻤﻀﺎﻓﺔ‬ ‫ﺍﻟﺠﺪﻳﺪﺓ‬ ‫ﺍﻟﺨﺼﺎﺋﺺ‬ ‫ﺟﻤﻴﻊ‬ ‫ﻟﺘﺨﺪﻡ‬ ‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬ ‫ﺗﻄﻮﻳﺮ‬
‫ﺍﻝ‬ ‫ﻫﻨﺎ‬CSS3‫ﺩﻋﻢ‬ ‫ﺗﺤﺎﻭﻝ‬ ‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬ ‫ﻓﺈﻥ‬ ،‫ﻭﺍﻋﺘﻤﺎﺩﻫﺎ‬ ،‫ﺗﻄﻮﻳﺮﻫﺎ‬ ‫ﻓﻤﻨﺬ‬ ،
‫ﻣﻤﻜﻦ‬ ‫ﺷﻜﻞ‬ ‫ﺑﺄﻛﺒﺮ‬ ‫ﺍﻟﺨﺼﺎﺋﺺ‬..‫ﺟﻞ‬ ‫ﺗﺪﻋﻢ‬ ‫ﻟﻢ‬ ‫ﻣﺘﺼﻔﺤﺎﺕ‬ ‫ﻫﻨﺎﻙ‬ ،‫ﺍﻵﻥ‬ ‫ﻭﺍﻟﻰ‬
‫ﻣﻦ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﺗﺪﻋﻢ‬ ‫ﻣﻌﻈﻤﻬﺎ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬ ‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬ ‫ﻟﻜﻦ‬ ،‫ﺍﻟﺨﺼﺎﺋﺺ‬
‫ﻫﺬﻩ‬ ‫ﺍﻟﻰ‬ ‫ﻭﻭﺻﻮﻻ‬ ،‫ﻭﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻭﺟﻮﺩﻫﺎ‬ ‫ﺍﻟﺒﺪﺍﻫﺔ‬ ‫ﻣﻦ‬ ‫ﺍﻵﻥ‬ ‫ﺃﺻﺒﺤﺖ‬ ‫ﺍﻟﺨﺼﺎﺋﺺ‬
‫ﺍﻝ‬ ‫ﻳﺴﺘﺨﺪﻡ‬ ‫ﻟﻢ‬ ‫ﻣﻨﺎ‬ ‫ﻣﻦ‬ ،‫ﺍﻟﻠﺤﻈﺔ‬CSS3‫ﺭﺍﺋﻌﺔ‬ ‫ﻭﺧﺪﻣﺎﺕ‬ ‫ﻣﺰﺍﻳﺎ‬ ‫ﻣﻦ‬ ‫ﺗﻘﺪﻣﻪ‬ ‫ﻭﻣﺎ‬..
‫ﻣﺪﻋﻮﻣﺔ‬ ‫ﻟﻴﺴﺖ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﻟﻠﺠﺎﻓﺎ‬ ‫ﺍﻟﺠﺪﻳﺪﺓ‬ ‫ﺍﻟﺨﺼﺎﺋﺺ‬ ‫ﻓﺈﻥ‬ ،‫ﺍﻟﻘﻴﺎﺱ‬ ‫ﻧﻔﺲ‬ ‫ﻭﻋﻠﻰ‬
‫ﻳﻤﻜﻨﻚ‬ ،‫ﺍﻟﺠﺪﻳﺪﺓ‬ ‫ﺍﻟﻤﺰﺍﻳﺎ‬ ‫ﻫﺬﻩ‬ ‫ﺩﻋﻢ‬ ‫ﻭﻟﻀﻤﺎﻥ‬ ،‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬ ‫ﺟﻤﻴﻊ‬ ‫ﻣﻦ‬ ‫ﻛﺎﻣﻞ‬ ‫ﺑﺸﻜﻞ‬
‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬Compiler‫ﻧﻘﻮﻡ‬ ‫ﻛﻤﺎ‬ ،‫ﻟﻪ‬ ‫ﺭﺍﺑﻂ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﻟﻠﺠﺎﻓﺎ‬ ‫ﺍﻟﻘﺎﺭﺉ‬
‫ﺑﺘﻀﻤﻴﻦ‬Font‫ﻣﺜﻼ‬ ‫ﺟﻮﺟﻞ‬ ‫ﻣﻦ‬)‫ﺍﻟﺘﺸﺒﻴﻪ‬ ‫ﻓﺎﺭﻕ‬ ‫ﻣﻊ‬.(

ECMASCRIPT&BROWSERS
‫ﻣﻦ‬ ‫ﻣﻌﻴﻨﺔ‬ ‫ﺳﻤﺔ‬ ‫ﺃﻭ‬ ‫ﺧﺎﺻﻴﺔ‬ ‫ﺗﺪﻋﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻺﻁﻼﻉ‬ ،‫ﻭﺍﻵﻥ‬
‫ﺍﻝ‬ ‫ﻭﺣﺘﻰ‬ ،‫ﻋﺪﻣﻬﺎ‬Compiler‫ﺧﺼﺎﺋﺺ‬ ‫ﻣﻦ‬ ‫ﻳﺪﻋﻢ‬ ‫ﻛﻢ‬ ‫ﺑﺘﻀﻤﻴﻨﻪ‬ ‫ﺳﻨﻘﻮﻡ‬ ‫ﺍﻟﺬﻱ‬
‫ﺍﻟﺮﺍﺑﻂ‬ ‫ﻫﺬﺍ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﺪﺧﻮﻝ‬ ‫ﺳﻮﻯ‬ ‫ﻋﻠﻴﻨﺎ‬ ‫ﻣﺎ‬:
/6table/es-https://kangax.github.io/compat
)‫ﻣﻼﺣﻈﺔ‬:‫ﺍﻟﺠﺪﻭﻝ‬ ‫ﺗﺼﻔﺢ‬ ‫ﻣﻦ‬ ‫ﺗﺘﻤﻜﻦ‬ ‫ﺣﺘﻰ‬ ‫ﻭﻟﻠﻴﺴﺎﺭ‬ ‫ﻟﻠﻴﻤﻴﻦ‬ ‫ﺍﻟﺴﻬﻢ‬ ‫ﺣﺮﻙ‬(
‫ﻟﻠﺨﺼﺎﺋﺺ‬ ‫ﺍﻟﻤﻮﻗﻊ‬ ‫ﻋﻦ‬ ‫ﺻﻮﺭﺓ‬ ‫ﻟﻤﺸﺎﻫﺪﺓ‬ ‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﻟﻠﺸﺮﻳﺤﺔ‬ ‫ﺗﻨﺘﻘﻞ‬ ‫ﺃﻥ‬ ‫ﻗﺒﻞ‬ ‫ﻭﺍﻵﻥ‬
‫ﻓﻲ‬ ‫ﺩﻋﻤﻬﺎ‬ ‫ﺗﻢ‬ ‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬ ‫ﺍﻟﺴﻤﺎﺕ‬ ‫ﺃﻭ‬ ‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬ ‫ﺍﻟﺨﺼﺎﺋﺺ‬ ‫ﻓﺈﻥ‬ ،‫ﺍﻟﻤﺪﻋﻮﻣﺔ‬
‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬ ‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬..‫ﺃﻥ‬ ‫ﻣﺜﻼ‬ ‫ﻓﻼﺣﻆ‬40%‫ﻣﺘﻔﻖ‬ ‫ﻳﻜﻮﻥ‬ ‫ﻗﺪ‬ ‫ﺍﻟﺨﺼﺎﺋﺺ‬ ‫ﻣﻦ‬
‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬ ‫ﺑﻴﻦ‬ ‫ﻣﻦ‬ ‫ﺍﻵﻥ‬ ‫ﻋﻠﻴﻬﺎ‬..‫ﺧﺼﺎﺋﺺ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻓﻲ‬ ‫ﺗﻌﻤﻘﺖ‬ ‫ﻛﻠﻤﺎ‬ ‫ﻟﻜﻦ‬
‫ﻣﺸﻬﻮﺭﺓ‬ ‫ﻏﻴﺮ‬ ‫ﺃﻭ‬ ‫ﺟﺪﻳﺪﺓ‬..‫ﻣﻦ‬ ‫ﻣﺪﻋﻮﻣﺔ‬ ‫ﺃﻭ‬ ،‫ﻣﺪﻋﻮﻣﺔ‬ ‫ﻏﻴﺮ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﻓﺴﺘﻜﻮﻥ‬
‫ﺍﻟﻜﻞ‬ ‫ﻣﻦ‬ ‫ﻭﻟﻴﺲ‬ ‫ﻣﺘﺼﻔﺢ‬...

RUNNING ECMASCRIPT 6
‫ﻣﻦ‬ ‫ﺑﺪﻋﻢ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺑﺮﻣﺠﺔ‬ ‫ﻓﻲ‬ ‫ﷲ‬ ‫ﺑﺮﻛﺔ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻨﺒﺪء‬ ،‫ﻭﺍﻵﻥ‬ES6^_^
‫ﺍﻝ‬ ‫ﺑﺘﺤﻤﻴﻞ‬ ‫ﻧﻘﻮﻡ‬ ‫ﺃﻭﻻ‬ ‫ﻋﻠﻴﻨﺎ‬ ،‫ﺻﺤﻴﺢ‬ ‫ﺑﺸﻜﻞ‬ ‫ﻟﻨﺒﺪﺃ‬babel‫ﻣﻦ‬ ‫ﺑﺎﻟﻤﺘﺼﻔﺢ‬ ‫ﺍﻟﺨﺎﺹ‬
‫ﺍﻟﺮﺍﺑﻂ‬ ‫ﻫﺬﺍ‬ ‫ﺧﻼﻝ‬) :‫ﺍﻝ‬Babel‫ﺳﻜﺮﺑﺖ‬ ‫ﺟﺎﻓﺎ‬ ‫ﻫﻮ‬compiler: (
https://babeljs.io/docs/setup/#babel_in_browser
‫ﺍﻝ‬ ‫ﻟﺘﺤﻤﻴﻞ‬ ‫ﻁﺒﻌﺎ‬babel‫ﺍﻝ‬ ‫ﺑﺘﺤﻤﻴﻞ‬ ‫ﺗﻘﻮﻡ‬ ‫ﺃﻥ‬ ‫ﻳﺠﺐ‬npm..
‫ﺍﻝ‬ ‫ﺗﺤﻤﻴﻞ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬ ‫ﺑﺎﻟﺒﺤﺚ‬ ‫ﺗﻘﻮﻡ‬ ‫ﺑﺄﻥ‬ ‫ﻭﺃﻧﺼﺤﻚ‬npm)..‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬npm
‫ﺍﻷﻣﺮ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﻤﻜﻨﻨﺎ‬npm‫ﺍﻝ‬ ‫ﻟﺘﻨﺼﻴﺐ‬babel‫ﺍﻷﻣﺮ‬ ‫ﻁﺮﻳﻖ‬ ‫ﻋﻦ‬
npm install babel(‫ﺍﻟﻰ‬ ‫ﺗﺬﻫﺐ‬ ‫ﺛﻢ‬bable-core‫ﺍﻝ‬ ‫ﻣﻠﻒ‬ ‫ﻭﺗﺄﺧﺬ‬
browser.js) ....‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﺑﻬﺬﻩ‬ ‫ﺍﻟﺨﺎﺹ‬ ‫ﺍﻟﻤﺠﻠﺪ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﻠﻒ‬ ‫ﺑﻮﺿﻊ‬ ‫ﺳﺄﻗﻮﻡ‬ ‫ﻁﺒﻌﺎ‬
‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬(..

RUNNING ECMASCRIPT 6
‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻁﺮﻳﻘﺔ‬Babel‫ﻫﻲ‬:
‫ﺍﻝ‬ ‫ﺑﺘﻀﻤﻴﻦ‬ ‫ﺗﻘﻢ‬ ‫ﻟﻢ‬ ‫ﺣﺎﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺨﻄﺄ‬ ‫ﻫﺬﺍ‬ ‫ﺷﺎﻫﺪ‬Babel)‫ﻣﺜﺎﻝ‬ ‫ﺗﻄﺒﻴﻖ‬ ‫ﻟﻨﺎﺗﺞ‬ ‫ﺍﺳﺘﺒﺎﻕ‬ ‫ﻫﺬﺍ‬(

LET KEYWORD
‫ﻛﻠﻤﺔ‬LET‫ﻣﻌﻴﻦ‬ ‫ﻧﻄﺎﻕ‬ ‫ﺗﻌﺮﻳﻒ‬ ‫ﻭﻫﻲ‬ ،‫ﻣﻬﻤﺔ‬ ‫ﺑﻌﻤﻠﻴﺔ‬ ‫ﻟﺘﻘﻮﻡ‬ ‫ﺇﺿﺎﻓﺘﻬﺎ‬ ‫ﺗﻢ‬
)Block Scope(‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﺘﻢ‬ ‫ﺍﻟﻤﺘﻐﻴﺮ‬ ‫ﺃﻥ‬ ‫ﺃﻱ‬ ،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬ ‫ﻟﻠﻤﺘﻐﻴﺮﺍﺕ‬
‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺩﺍﺧﻞ‬ ‫ﻣﻌﻬﺎ‬ ‫ﻭﺍﻟﺘﻌﺎﻣﻞ‬ ‫ﻗﻴﻤﺘﻪ‬scope‫ﺍﻝ‬ ‫ﺧﺎﺭﺝ‬ ‫ﻭﻳﻌﺘﺒﺮ‬ ،Scope‫ﻏﻴﺮ‬
‫ﻣﻌﺮﻑ‬..^_^‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:
‫ﺍﺳﺘﺨﺪﻣﺖ‬ ‫ﺃﻧﻨﻲ‬ ‫ﻫﻨﺎ‬ ‫ﻻﺣﻆ‬let
‫ﺍﻝ‬ ‫ﻭﺍﺳﺘﺨﺪﻣﺖ‬var‫ﻭﻻﺣﻆ‬ ،
‫ﺍﻝ‬ ‫ﺃﻥ‬alert‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬scope
‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﻛﻞ‬ ‫ﻧﺘﻴﺠﺔ‬ ‫ﺑﺎﻅﻬﺎﺭ‬ ‫ﻗﺎﻣﺖ‬
X‫ﻭﺍﻝ‬Y‫ﺍﻝ‬ ‫ﺧﺎﺭﺝ‬ ‫ﺃﻣﺎ‬ ،scope
‫ﻟﻞ‬ ‫ﺍﻟﻨﺎﺗﺞ‬ ‫ﻓﻜﺎﻥ‬x=undefined

CONST KEYWORD
‫ﺍﻟﻤﺤﺠﻮﺯﺓ‬ ‫ﺍﻟﻜﻠﻤﺔ‬const‫ﺃﺧﺮﻯ‬ ‫ﻟﻐﺎﺕ‬ ‫ﻓﻲ‬ ‫ﺷﺎﻫﺪﻧﺎﻫﺎ‬ ‫ﻟﻄﺎﻟﻤﺎ‬ ‫ﻛﻠﻤﺎ‬ ،
‫ﻫﻮ‬ ‫ﻭﻛﻤﺎ‬ ،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬ ‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﺑﺎﻹﻣﻜﺎﻥ‬ ‫ﻳﻜﻦ‬ ‫ﻟﻢ‬ ‫ﻟﻜﻨﻪ‬ ،‫ﻭﺍﺳﺘﺨﺪﻣﻨﺎﻫﺎ‬
‫ﺍﻝ‬ ‫ﻓﺈﻥ‬ ،‫ﻟﺪﻳﻨﺎ‬ ‫ﻣﻌﺮﻭﻑ‬const‫ﺍﻟﻰ‬ ‫ﺗﺸﻴﺮ‬“‫ﺍﻟﺜﺎﺑﺖ‬”‫ﻳﺠﻮﺯ‬ ‫ﻻ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺃﻥ‬ ‫ﺃﻱ‬ ،
‫ﺍﻟﻀﺮﻳﺒﺔ‬ ‫ﻗﻴﻤﺔ‬ ‫ﻣﺜﻞ‬ ،‫ﺑﻬﺎ‬ ‫ﺍﻟﻤﺴﺎﺱ‬ ‫ﺃﻭ‬ ‫ﺗﻐﻴﻴﺮﻫﺎ‬16) %‫ﺍﻷﺭﺩﻥ‬ ‫ﻓﻲ‬(‫ﻳﻌﻨﻲ‬ ‫ﻭﻫﺬﺍ‬ ،
‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﺳﺘﺘﻢ‬ ،‫ﻟﻬﺎ‬ ‫ﺍﻟﻀﺮﻳﺒﺔ‬ ‫ﺣﺴﺎﺏ‬ ‫ﺳﻴﺘﻢ‬ ‫ﻋﻤﻠﻴﺎﺕ‬ ‫ﻣﻦ‬ ‫ﺗﻨﻔﻴﺬﻩ‬ ‫ﺳﻴﺘﻢ‬ ‫ﻣﺎ‬ ‫ﺟﻤﻴﻊ‬ ‫ﺃﻥ‬
‫ﺗﻐﻴﻴﺮ‬ ‫ﻳﻌﻨﻲ‬ ‫ﻓﻬﺬﺍ‬ ،‫ﺍﻟﻀﺮﻳﺒﺔ‬ ‫ﻗﻴﻤﺔ‬ ‫ﺗﻐﻴﻴﺮ‬ ‫ﺃﺭﺩﺕ‬ ‫ﻟﻮ‬ ‫ﺍﻟﻮﻗﺖ‬ ‫ﻭﺑﺬﺍﺕ‬ ،‫ﺍﻟﻀﺮﻳﺒﺔ‬ ‫ﺛﺎﺑﺖ‬
‫ﺍﻝ‬ ‫ﻗﻴﻤﺔ‬const‫ﺑﺘﻌﺮﻳﻔﻪ‬ ‫ﻗﻤﻨﺎ‬ ‫ﺍﻟﺬﻱ‬*^_....
‫ﺍﻵﻥ‬ ‫ﻭﺍﻟﺴﺆﺍﻝ‬..‫ﺍﻝ‬ ‫ﻗﻴﻤﺔ‬ ‫ﺑﻪ‬ ‫ﻭﻧﻀﻊ‬ ‫ﻣﺘﻐﻴﺮ‬ ‫ﺑﺘﻌﺮﻳﻒ‬ ‫ﻧﻘﻮﻡ‬ ‫ﺃﻥ‬ ‫ﺍﻟﻤﻤﻜﻦ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻴﺲ‬
16%‫ﺍﻝ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﺤﺎﺟﺔ‬ ‫ﺩﻭﻥ‬const‫؟‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺇﺻﺪﺍﺭ‬ ‫ﺍﻟﻰ‬

CONST KEYWORD
‫ﺍﻟﺠﻮﺍﺏ‬:‫ﺣﻤﺎﻳﺔ‬ ‫ﻫﻨﺎﻙ‬ ‫ﻓﻬﻞ‬ ،‫ﻣﺘﻐﻴﺮ‬ ‫ﻋﻦ‬ ‫ﺗﺘﺤﺪﺙ‬ ‫ﺃﻧﻚ‬ ‫ﻁﺎﻟﻤﺎ‬ ‫ﻟﻜﻦ‬ ،‫ﺫﻟﻚ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﻧﻌﻢ‬
،‫ﺑﻚ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬ ‫ﻗﺒﻞ‬ ‫ﻣﻦ‬ ‫ﺗﻐﻴﻴﺮ‬ ‫ﺩﻭﻥ‬ ‫ﺛﺎﺑﺘﺔ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﺣﻔﻆ‬ ‫ﻟﻚ‬ ‫ﺗﻀﻤﻦ‬
‫؟‬ ‫ﺛﺎﻟﺚ‬ ‫ﻁﺮﻑ‬ ‫ﻣﻦ‬ ‫ﺃﺧﺮﻯ‬ ‫ﺑﺮﻣﺠﻴﺔ‬ ‫ﺷﻴﻔﺮﺓ‬ ‫ﺃﻭ‬!
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬const‫ﻭﻣﻦ‬ ‫ﺍﻟﻤﺤﺠﻮﺯﺓ‬ ‫ﺍﻟﻜﻠﻤﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻫﻮ‬ ‫ﻓﻌﻠﻪ‬ ‫ﻋﻠﻴﻚ‬ ‫ﻣﺎ‬ ‫ﻛﻞ‬
‫ﺗﻌﺪﻳﻞ‬ ‫ﺃﻱ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﻟﻬﺬﻩ‬ ‫ﺍﻟﺤﻤﺎﻳﺔ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻵﻟﺔ‬ ‫ﺳﺘﺘﻮﻟﻰ‬ ‫ﺛﻢ‬^_^..
‫ﻣﺜﺎﻻ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬:
‫ﻣﺜﺎﻝ‬1:

CONST KEYWORD
‫ﻣﺜﺎﻝ‬2:‫ﺍﻟﺨﻄﺄ‬ ‫ﻫﻨﺎ‬ ‫ﻻﺣﻆ‬..
‫ﺍﻝ‬ ‫ﺑﺄﻥ‬ ‫ﻳﺨﺒﺮﻙ‬ ‫ﺍﻟﺨﻄﺄ‬const
Read only..‫ﻗﻴﻤﺘﻪ‬ ‫ﺗﻐﻴﻴﺮ‬ ‫ﻳﻤﻜﻦ‬ ‫ﻻ‬

CONST KEYWORD
‫ﻣﺜﺎﻝ‬3:‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻭﻫﻲ‬ ،‫ﻣﻬﻤﺔ‬ ‫ﻟﻨﻘﻄﺔ‬ ‫ﻫﻨﺎ‬ ‫ﺇﻧﺘﺒﻪ‬const‫ﺍﻝ‬ ‫ﻣﺜﻞ‬ ‫ﺗﻌﺮﻳﻔﻪ‬ ‫ﻳﺘﻢ‬ ‫ﻋﻨﺪﻣﺎ‬
tax‫ﺳﻴﻜﻮﻥ‬ ، ‫ﻫﻨﺎ‬Global‫ﻗﻤﻨﺎ‬ ‫ﺍﺫﺍ‬ ‫ﻟﻜﻦ‬ ،‫ﺗﻌﻠﻤﻨﺎ‬ ‫ﻛﻤﺎ‬ ‫ﻗﻴﻤﺘﻪ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻭﻳﻤﻜﻦ‬
‫ﺍﻝ‬ ‫ﺗﻌﺮﻳﻒ‬ ‫ﺑﺈﻋﺎﺩﺕ‬const‫ﺩﺍﺧﻞ‬scope‫ﻫﺬﺍ‬ ‫ﺿﻤﻦ‬ ‫ﺍﻟﺜﺎﺑﺖ‬ ‫ﺑﺎﻧﺸﺎء‬ ‫ﻓﺴﻴﻘﻮﻡ‬ ،
‫ﺍﻝ‬scope‫ﺍﻝ‬ ‫ﻗﻴﻤﺔ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﺃﻭ‬ ‫ﺧﺎﺭﺟﺎ‬ ‫ﻗﻴﻤﺘﻪ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﻭﻻ‬Global
const‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺩﺍﺧﻞ‬block...

CONST KEYWORD
‫ﻭﺍﻵﻥ‬..‫ﺑﺎﻝ‬ ‫ﺍﻟﻤﺘﻌﻠﻘﺔ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﺟﻤﻴﻊ‬ ‫ﻟﻨﺸﺎﻫﺪ‬const‫ﻋﻠﻰ‬ ‫ﻟﺬﻛﺮﻫﺎ‬ ‫ﺗﻄﺮﻗﻨﺎ‬ ‫ﻭﺍﻟﺘﻲ‬
‫ﷲ‬ ‫ﺑﺮﻛﺔ‬^ _^
‫ﻣﻼﺣﻈﺔ‬:‫ﺍﻟﺸﺮﻁ‬ ‫ﺟﻤﻠﺔ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬if(true)‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﺗﻮﺿﻴﺢ‬ ‫ﻓﻘﻂ‬ ‫ﻣﻨﻪ‬ ‫ﺍﻟﻬﺪﻑ‬
‫ﺿﻤﻦ‬ ‫ﺍﻷﻣﺜﻠﺔ‬block‫ﺍﻟﺘﻨﻮﻳﻪ‬ ‫ﻭﺟﺐ‬ ‫ﻭﻟﺬﻟﻚ‬ ،‫ﺃﺳﻠﻮﺏ‬ ‫ﺑﺄﺳﻬﻞ‬ ‫ﻣﻌﻴﻦ‬_^*

DESTRUCT VALUES
‫ﻋﺪﺓ‬ ‫ﻹﺭﺟﺎﻉ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬ ‫ﻧﺴﺘﺨﺪﻣﻬﺎ‬ ‫ﻛﻨﺎ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻄﺮﻕ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻜﺜﻴﺮ‬ ‫ﻫﻨﺎﻙ‬
‫ﻣﻦ‬ ‫ﺍﻟﻘﻴﻢ‬function)Function Return Multiple Values(
‫ﺍﻝ‬ ‫ﻣﻔﻬﻮﻡ‬ ‫ﻅﻬﺮ‬ ‫ﻫﻨﺎ‬ ‫ﻭﻣﻦ‬Destruct-‫ﺍﻟﺘﻔﻜﻴﻚ‬-‫ﺑﺠﻌﻞ‬ ‫ﺑﺪﻭﺭﻩ‬ ‫ﻳﻘﻮﻡ‬ ‫ﻭﺍﻟﺬﻱ‬ ،
‫ﺃﺧﺮﻯ‬ ‫ﺑﺮﻣﺠﻴﺔ‬ ‫ﺷﻴﻔﺮﺓ‬ ‫ﺃﻭ‬ ‫ﻟﻤﺘﻐﻴﺮﺍﺕ‬ ‫ﺍﻟﺮﺍﺟﻌﺔ‬ ‫ﺍﻟﻘﻴﻢ‬ ‫ﺍﺳﻨﺎﺩ‬ ‫ﻧﺎﺣﻴﺔ‬ ‫ﻣﻦ‬ ‫ﺍﺳﻬﻞ‬ ‫ﺍﻷﻣﻮﺭ‬
‫ﺍﻟﻘﻴﻢ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺴﺘﻘﺒﻞ‬..‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﺗﺒﺪﻳﻞ‬ ‫ﺧﻼﻟﻬﺎ‬ ‫ﻣﻦ‬ ‫ﺑﺈﻣﻜﺎﻧﻚ‬ ‫ﺃﺻﺒﺢ‬ ‫ﺃﻧﻪ‬ ‫ﻛﻤﺎ‬
‫ﺛﺎﻟﺚ‬ ‫ﻣﺘﻐﻴﺮ‬ ‫ﺗﻌﺮﻳﻒ‬ ‫ﺩﻭﻥ‬ ‫ﺑﻤﺘﻐﻴﺮﻳﻦ‬^_^...‫ﻋﻠﻴﻜﻢ‬ ‫ﻧﻄﻴﻞ‬ ‫ﻻ‬ ‫ﻭﺣﺘﻰ‬..‫ﺩﻋﻮﻧﺎ‬
‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻋﻠﻰ‬ ‫ﺳﻬﻼ‬ ‫ﻣﺜﺎﻻ‬ ‫ﻧﺸﺎﻫﺪ‬:P_^) :*‫ﻣﺜﺎﻝ‬1( :

DESTRUCT VALUES
‫ﻣﺜﺎﻝ‬2:‫ﺍﻟﻰ‬ ‫ﺍﻟﺤﺎﺟﺔ‬ ‫ﺩﻭﻥ‬ ‫ﻣﺘﻐﻴﺮﻳﻦ‬ ‫ﺑﻴﻦ‬ ‫ﻟﻠﻘﻴﻢ‬ ‫ﺗﺒﺪﻳﻞ‬ ‫ﺑﻌﻤﻠﻴﺔ‬ ‫ﺳﻨﻘﻮﻡ‬ ،‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬
‫ﺟﺪﻳﺪ‬ ‫ﺛﺎﻟﺚ‬ ‫ﻣﺘﻐﻴﺮ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬^_^‫ﺍﻟﺘﺎﻟﻲ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻓﻲ‬ ‫ﻛﻤﺎ‬ ‫ﺗﺘﻢ‬ ‫ﺑﺒﺴﺎﻁﺔ‬ ‫ﺍﻟﻌﻤﻠﻴﺔ‬ ‫ﻫﺬﻩ‬ ،:

DESTRUCT VALUES
‫ﻣﺜﺎﻝ‬3:،‫ﺭﺍﺋﻌﺔ‬ ‫ﻣﺰﻳﺔ‬ ‫ﺃﻳﻀﺎ‬ ‫ﻓﻬﻨﺎﻙ‬ ،‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﻓﻲ‬ ‫ﺫﻛﺮﻧﺎﻩ‬ ‫ﻣﺎ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬
‫ﺩﺍﺧﻞ‬ ‫ﺍﻟﻤﻮﺟﻮﺩﺓ‬ ‫ﺍﻟﻘﻴﻢ‬ ‫ﺍﺳﻨﺎﺩ‬ ‫ﺇﻣﻜﺎﻧﻴﺔ‬ ‫ﻭﻫﻲ‬obj‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻣﺘﻐﻴﺮﺍﺕ‬ ‫ﺍﻟﻰ‬
Destruct‫ﺍﻝ‬ ‫ﺍﺳﻢ‬ ‫ﺑﻨﻔﺲ‬ ‫ﺍﻟﻤﺘﻐﻴﺮﺍﺕ‬ ‫ﺍﺳﻢ‬ ‫ﻭﺿﻊ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻫﺬﺍ‬ ‫ﻭﻳﻜﻮﻥ‬ ،key
‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﺍﻟﻤﻮﺟﻮﺩ‬object..‫ﻣﺎ‬ ‫ﺑﻴﻦ‬ ‫ﻭﻣﻄﺎﺑﻘﺔ‬ ‫ﺑﺤﺚ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﻫﻲ‬ ‫ﻭﺍﻟﻌﻤﻠﻴﺔ‬
‫ﺍﻝ‬ ‫ﻭﺑﻴﻦ‬ ‫ﻣﺘﻐﻴﺮﺍﺕ‬ ‫ﻣﻦ‬ ‫ﻭﺿﻌﺘﻪ‬key‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﺍﻟﻤﺴﺘﺨﺪﻣﺔ‬object‫ﻓﺈﻧﻪ‬ ‫ﻭﺑﻬﺬﺍ‬ ،
‫ﺍﻝ‬ ‫ﺗﺸﺎﺑﻪ‬ ‫ﺇﻥ‬key‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﺍﺳﻨﺎﺩ‬ ‫ﻓﻴﺘﻢ‬ ،‫ﺍﻟﻤﺘﻐﻴﺮ‬ ‫ﻭﺍﺳﻢ‬...‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:

DEFAULT FUNCTION
ARGUMENTS VALUES
‫ﻗﻴﻤﺔ‬ ‫ﻭﺿﻊ‬ ‫ﺇﻣﻜﺎﻧﻴﺔ‬ ‫ﻫﻲ‬ ،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬ ‫ﻧﻔﺘﻘﺪﻫﺎ‬ ‫ﻛﻨﺎ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻷﻣﻮﺭ‬ ‫ﻣﻦ‬
‫ﻟﻞ‬ ‫ﺇﻓﺘﺮﺍﺿﻴﺔ‬Args‫ﻓﻲ‬ ‫ﺍﻟﻤﺴﺘﺨﺪﻣﺔ‬function‫ﺇﻧﺘﻬﻰ‬ ‫ﺍﻷﻣﺮ‬ ‫ﻫﺬﺍ‬ ‫ﻟﻜﻦ‬ ،‫ﻣﻌﻴﻦ‬
‫ﺃﻭ‬ ،‫ﻣﺒﺎﺷﺮﺓ‬ ‫ﻗﻴﻤﺔ‬ ‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﺇﻓﺘﺮﺍﺿﻴﺔ‬ ‫ﻗﻴﻤﺔ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﺍﻵﻥ‬ ‫ﺑﺎﻹﻣﻜﺎﻥ‬ ‫ﻭﺃﺻﺒﺢ‬ ،‫ﺍﻵﻥ‬
‫ﺍﺭﺳﺎﻝ‬ ‫ﺍﻟﻤﻤﻜﻦ‬ ‫ﻣﻦ‬ ‫ﺃﻧﻪ‬ ‫ﻛﻤﺎ‬ ،‫ﺣﺴﺎﺑﻴﺔ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬undefined‫ﺃﻧﻬﺎ‬ ‫ﻋﻠﻰ‬
‫ﺇﻓﺘﺮﺍﺿﻴﺔ‬ ‫ﻗﻴﻤﺔ‬^_^...‫ﻭﻓﻀﻠﻪ‬ ‫ﻧﻌﻤﻪ‬ ‫ﻋﻠﻰ‬ ‫ﺤﻤﺪ ہﻠﻟ‬^^
‫ﺳﻬﻞ‬ ‫ﺑﺸﻜﻞ‬ ‫ﺍﻹﻓﺘﺮﺍﺿﻴﺔ‬ ‫ﺍﻟﻘﻴﻢ‬ ‫ﻭﺿﻊ‬ ‫ﻳﺘﻢ‬ ‫ﻛﻴﻒ‬ ‫ﻻﺣﻆ‬^_^‫ﻭﺟﻮﺩ‬ ‫ﺃﻳﻀﺎ‬ ‫ﻭﻻﺣﻆ‬ ،
‫ﻋﻤﻠﻴﺔ‬concat‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﺗﺨﺰﻥ‬f‫ﺍﻟﺤﺴﺎﺑﻴﺔ‬ ‫ﺍﻟﻌﻤﻠﻴﺎﺕ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﻤﻜﻨﻚ‬ ‫ﺃﻱ‬ ،
‫ﺍﻟﻘﻴﻢ‬ ‫ﻹﺳﻨﺎﺩ‬^^)..‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﺑﺎﻟﺸﺮﻳﺤﺔ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬(

DEFAULT FUNCTION
ARGUMENTS VALUES
‫ﻣﺜﺎﻝ‬:

JS SPREAD “…” OPERATOR
‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﺘﻢ‬Spread Perator‫ﺍﻟﻤﺘﻐﻴﺮﺍﺕ‬ ‫ﻣﻦ‬ ‫ﻧﻬﺎﺋﻲ‬ ‫ﻻ‬ ‫ﻋﺪﺩ‬ ‫ﻟﺘﻌﺮﻳﻒ‬
‫ﻏﻴﺮ‬ ‫ﻋﺪﺩ‬ ‫ﺑﺈﺭﺳﺎﻝ‬ ‫ﺍﻟﻘﻴﺎﻡ‬ ،‫ﺃﺩﻕ‬ ‫ﻭﺑﻤﻌﻨﻰ‬ ،‫ﻣﻌﻴﻨﺔ‬ ‫ﻟﻮﻅﻴﻔﺔ‬ ‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻳﻤﻜﻨﻨﻲ‬ ‫ﺍﻟﺘﻲ‬
‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﻣﻌﻴﻦ‬Args‫ﻋﻤﻠﻴﺔ‬ ‫ﻓﻜﺮﺓ‬ ،‫ﺍﻟﻌﻤﻠﻴﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻟﻤﺜﻞ‬ ‫ﺍﻟﻤﻔﻴﺪﺓ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﺃﺷﻬﺮ‬ ‫ﻭﻣﻦ‬ ،
‫ﺟﻤﻌﻬﺎ‬ ‫ﺍﻟﻤﺮﺍﺩ‬ ‫ﺍﻷﺭﻗﺎﻡ‬ ‫ﻋﺪﺩ‬ ‫ﻣﻌﺮﻭﻑ‬ ‫ﺍﻟﻐﻴﺮ‬ ‫ﺍﻟﺠﻤﻊ‬..‫ﻧﻘﻮﻝ‬ ‫ﺍﻟﺤﺎﺳﺒﺔ‬ ‫ﺍﻵﻟﺔ‬ ‫ﻣﺜﻞ‬
5+6+7+55..‫ﺑﺠﻤﻞ‬ ‫ﻗﻤﺖ‬ ‫ﻓﻬﻨﺎ‬4‫ﺑﺠﻤﻊ‬ ‫ﻳﻘﻮﻡ‬ ‫ﻗﺪ‬ ‫ﻭﻏﻴﺮﻱ‬ ،‫ﻗﻴﻢ‬10‫ﻓﻬﻞ‬ ،‫ﻗﻴﻢ‬
‫؟‬ ‫ﺇﺩﺧﺎﻟﻬﺎ‬ ‫ﺍﻟﻤﻤﻜﻦ‬ ‫ﺍﻟﻘﻴﻢ‬ ‫ﺑﻌﺪﺩ‬ ‫ﺩﻭﺍﻝ‬ ‫ﺇﻧﺸﺎء‬ ‫ﺍﻟﻤﻌﻘﻮﻝ‬ ‫ﻣﻦ‬!
‫ﺍﻝ‬ ‫ﻣﻨﻬﺎ‬ ‫ﺃﺧﺮﻯ‬ ‫ﺑﺮﻣﺠﻴﺔ‬ ‫ﺃﻓﻜﺎﺭ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﻤﻜﻨﻚ‬ ‫ﻟﻜﻦ‬ ،‫ﻻ‬ ‫ﻁﺒﻌﺎ‬ ‫ﺍﻟﺠﻮﺍﺏ‬
SPREAD^_^‫ﺛﻤﻨﺎ‬ ‫ﺇﺫﺍ‬ ،‫ﺃﻳﻀﺎ‬ ‫ﺑﻬﺎ‬ ‫ﺍﻟﺠﻤﻴﻠﺔ‬ ‫ﻭﺍﻹﺳﺘﺨﺪﺍﻣﺎﺕ‬ ‫ﺍﻷﻓﻜﺎﺭ‬ ‫ﻭﻣﻦ‬ ،
‫ﺑﻮﺿﻊ‬…arrayName‫ﻋﻠﻰ‬ ‫ﻓﺮﻁﺖ‬ ‫ﻭﻛﺄﻧﻬﺎ‬ ‫ﺳﺘﻌﻤﺎﻝ‬ ‫ﺍﻟﻤﺼﻔﻮﻓﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻓﺈﻥ‬
‫ﻣﺜﻞ‬ ‫ﻣﺘﻐﻴﺮﺍﺕ‬ ‫ﺷﻜﻞ‬[a, b]‫ﻭﻛﺄﻧﻬﺎ‬ ‫ﺳﺘﺼﺒﺢ‬a, b‫ﻣﺜﺎﻻ‬ ‫ﻗﻠﻴﻞ‬ ‫ﺑﻌﺪ‬ ‫ﻭﺳﻨﺮﻯ‬
‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺍﻟﺤﺮﻛﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻣﺜﻞ‬ ‫ﺣﺮﻛﺔ‬ ‫ﺃﻫﻤﻴﺔ‬ ‫ﻳﻮﺿﺢ‬^_^

‫ﻣﺜﺎﻝ‬2:‫ﻭﻣﻦ‬ ،‫ﺍﻟﺪﻭﺭﺍﺕ‬ ‫ﻋﻨﺎﻭﻳﻦ‬ ‫ﺗﺤﺘﻮﻱ‬ ‫ﻣﺼﻔﻮﻓﺔ‬ ‫ﺑﺈﻧﺸﺎء‬ ‫ﻗﻤﺖ‬ ‫ﺃﻧﻨﻲ‬ ‫ﻫﻨﺎ‬ ‫ﻻﺣﻆ‬
‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﺃﺭﺳﻠﺘﻬﺎ‬ ‫ﺛﻢ‬Args^_^.
‫ﻣﻼﺣﻈﺔ‬:‫ﺍﻟﻤﺘﻐﻴﺮﺍﺕ‬ ‫ﻋﺪﺩ‬ ‫ﻳﻜﻮﻥ‬ ‫ﺃﻥ‬ ‫ﺍﻟﻀﺮﻭﺭﻱ‬ ‫ﻣﻦ‬ ‫ﻟﻴﺲ‬courses_tow
‫ﺳﻴﺘﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻤﺘﻐﻴﺮﺍﺕ‬ ‫ﻋﺪﺩ‬ ‫ﻳﺴﺎﻭﻱ‬“‫ﻓﺮﻁﻬﺎ‬“‫ﻗﺒﻞ‬ ‫ﻣﻦ‬…array^_^

‫ﻣﺜﺎﻝ‬3:‫ﻋﻨﺪﻣﺎ‬ ‫ﺃﻧﻨﻲ‬ ‫ﻭﻫﻲ‬ ،‫ﻣﻬﻤﺔ‬ ‫ﻓﻜﺮﺓ‬ ‫ﻳﻮﺿﺢ‬ ‫ﻓﻬﻮ‬ ،‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺃﻫﻤﻴﺔ‬ ‫ﻻﺣﻆ‬
‫ﺍﻝ‬ ‫ﻣﺼﻔﻮﻓﺔ‬ ‫ﺑﺎﺭﺳﺎﻝ‬ ‫ﻗﻤﺖ‬Spread args‫ﺍﻟﻤﺼﻔﻮﻓﺔ‬ ‫ﺍﻋﺘﺒﺮ‬arg‫ﻭﺍﺣﺪ‬
‫ﻋﻠﻰ‬ ‫ﻳﺤﺘﻮﻱ‬6‫ﻋﻨﺎﺻﺮ‬)‫ﻣﺼﻔﻮﻓﺔ‬ ‫ﻧﻮﻋﻬﺎ‬ ‫ﻁﺒﻴﻌﺔ‬ ‫ﻋﻠﻰ‬ ‫ﻋﺎﻣﻠﻬﺎ‬(‫ﺃﻥ‬ ‫ﻭﻳﻤﻜﻨﻪ‬
‫ﺍﻟﻤﺼﻔﻮﻓﺔ‬ ‫ﺑﻔﺮﻁ‬ ‫ﻗﻤﺖ‬ ‫ﺍﻟﺜﺎﻧﻴﺔ‬ ‫ﺍﻟﺤﺎﻟﺔ‬ ‫ﻓﻲ‬ ‫ﺑﻴﻨﻤﺎ‬ ،‫ﻣﺼﻔﻮﻓﺔ‬ ‫ﻣﻦ‬ ‫ﺃﻛﺜﺮ‬ ‫ﻳﺴﺘﻘﺒﻞ‬
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺗﻄﺒﻴﻖ‬ ‫ﻧﺘﻴﺠﺔ‬ ‫ﻓﻲ‬ ‫ﺟﻠﻴﺎ‬ ‫ﻳﻈﻬﺮ‬ ‫ﻭﻫﺬﺍ‬ ،‫ﻗﻴﻢ‬ ‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﻭﺍﺭﺳﺎﻟﻬﺎ‬^ _^

‫ﺍﻟﺮﺍﺋﻌﺔ‬ ‫ﺍﻟﻔﻜﺮﺓ‬ ‫ﻫﺬﻩ‬ ‫ﺷﺮﺡ‬ ‫ﻣﻦ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺍﻧﺘﻬﻴﻨﺎ‬ ‫ﻧﻜﻮﻥ‬ ‫ﻭﺑﻬﺬﺍ‬^_^‫ﻟﻜﻨﻨﻲ‬ ،
‫ﻧﺴﺘﺨﺪﻡ‬ ‫ﻛﻨﺎ‬ ،‫ﺳﻜﺮﺑﺖ‬ ‫ﺑﺎﻟﺠﺎﻓﺎ‬ ‫ﺃﻧﻨﺎ‬ ‫ﻭﻫﻲ‬ ،‫ﻧﻘﻄﺔ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻟﺘﻨﻮﻳﻪ‬ ‫ﺃﺭﻏﺐ‬
Array.prototype.slice.call‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﻣﻌﺮﻭﻑ‬ ‫ﻏﻴﺮ‬ ‫ﻋﺪﺩ‬ ‫ﻻﺳﺘﻘﺒﺎﻝ‬
args‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﻛﻤﺎ‬Spread‫ﻳﻮﺿﺢ‬ ‫ﺑﺴﻴﻂ‬ ‫ﻣﺜﺎﻝ‬ ‫ﻭﻫﺬﺍ‬ ،‫ﻗﻠﻴﻞ‬ ‫ﻗﺒﻞ‬ ‫ﺗﻌﻠﻤﻨﻬﺎ‬ ‫ﺍﻟﺘﻲ‬
‫ﺍﻟﻔﻜﺮﺓ‬^_^

‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺭﺣﻤﻪ‬ ‫ﺍﻟﺸﺎﻓﻌﻲ‬ ‫ﻟﻺﻣﺎﻡ‬ ‫ﺷﻌﺮ‬

TEMPLATE STRINGS ` `
‫ﺍﻝ‬Template String‫ﻋﻦ‬ ‫ﻋﺒﺎﺭﺓ‬single line‫ﺃﻭ‬multiline‫ﻣﻦ‬
‫ﺍﻝ‬String)‫ﺍﻟﺴﻄﻮﺭ‬ ‫ﻣﻦ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﺃﻭ‬ ‫ﺳﻄﺮ‬(‫ﺍﻵﻥ‬ ‫ﺗﻌﺮﻳﻔﻬﺎ‬ ‫ﻳﺘﻢ‬)‫ﺍﻹﺻﺪﺍﺭ‬ ‫ﻣﻦ‬
ES6(‫ﺍﻝ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬back-tick)`... (‫ﻣﻦ‬ ‫ﺍﻟﺠﺪﻳﺪﺓ‬ ‫ﺍﻟﻤﺰﻳﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺗﻤﻜﻨﻨﺎ‬ ‫ﻛﻤﺎ‬
‫ﻭﺿﻊ‬expressions‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬template string‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬
‫ﺍﻝ‬${ }^_^..
‫ﻣﻌﺎ‬ ‫ﻣﺜﺎﻻ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ،‫ﻭﺍﻵﻥ‬:^_^:
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺗﻄﺒﻴﻖ‬ ‫ﻧﺎﺗﺞ‬..‫ﺍﻟﺸﻴﻔﺮﺓ‬
‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬*_*

TEMPLATE STRINGS ` `

ARROW FUNCTION =>
‫ﺍﻹﺻﺪﺍﺭ‬ ‫ﻓﻲ‬ES6‫ﻟﺘﻌﺮﻳﻒ‬ ‫ﺟﺪﻳﺪﺓ‬ ‫ﻁﺮﻳﻘﺔ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﺗﻢ‬Function
‫ﻭﺍﺳﺘﺨﺪﺍﻣﻪ‬!!
‫ﺃﻫﻢ‬ ‫ﻭﺇﺣﺪﻯ‬ ،‫ﻋﻤﻠﻪ‬ ‫ﺍﻟﻤﺒﺮﻣﺞ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻴﺴﻬﻞ‬ ‫ﺻﻤﻢ‬ ‫ﺍﻟﺘﻌﺮﻳﻒ‬ ‫ﻫﺬﺍ‬ ‫ﻟﻜﻦ‬ ،‫ﺗﺘﻌﺠﺐ‬ ‫ﻻ‬ ‫ﻧﻌﻢ‬
‫ﺍﻝ‬ ‫ﻛﺘﺎﺑﺔ‬ ‫ﻫﻮ‬ ،‫ﺍﻷﺳﻠﻮﺏ‬ ‫ﻫﺬﺍ‬ ‫ﺍﺳﺘﺨﺪﺍﻣﺎﺕ‬function‫ﻭﺍﺣﺪﺍ‬ ‫ﺳﻄﺮﺍ‬ ‫ﻳﺤﺘﻮﻱ‬ ‫ﺍﻟﺬﻱ‬
‫ﺑﻜﺘﺎﺑﺔ‬ ‫ﻓﻴﻬﺎ‬ ‫ﻧﻄﺮ‬ ،‫ﺑﺤﺎﻟﺔ‬ ‫ﻣﺮﺭﻧﺎ‬ ‫ﻭﻟﻄﺎﻟﻤﺎ‬ ،‫ﻟﻠﺘﻨﻔﻴﺬ‬function‫ﺑﻌﻤﻞ‬ ‫ﻳﻘﻮﻡ‬ ‫ﻓﻘﻂ‬
return‫ﻣﻌﻴﻨﺔ‬ ‫ﻟﻘﻴﻤﺔ‬...،‫ﻭﺍﺣﺪ‬ ‫ﺳﻄﺮ‬ ‫ﺗﻨﻔﻴﺬ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻄﺮﻳﻘﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺗﻤﻜﻨﻚ‬ ،‫ﻭﻁﺒﻌﺎ‬
‫ﺳﻄﺮ‬ ‫ﻣﻦ‬ ‫ﻷﻛﺜﺮ‬ ‫ﺃﻭ‬ ،‫ﻟﻪ‬ ‫ﺻﻤﻢ‬ ‫ﻛﻤﺎ‬^_^....‫ﻣﻌﺎ‬ ‫ﻣﺜﺎﻻ‬ ‫ﻭﻟﻨﺸﺎﻫﺪ‬:
‫ﻣﻼﺣﻈﺔ‬1‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻹﻧﺘﻘﺎﻝ‬ ‫ﻗﺒﻞ‬:‫ﺍﻝ‬Arrow function‫ﺍﺳﺘﺨﺪﺍﻣﻪ‬ ‫ﻳﻤﻜﻦ‬
‫ﺍﻝ‬ ‫ﻣﻊ‬Expression‫ﺃﻭ‬Statement‫ﺃﻭ‬Lexical this...
‫ﻣﻼﺣﻈﺔ‬2:‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﺣﻮﻝ‬ ‫ﻣﻬﻤﺔ‬ ‫ﻧﻘﺎﻁ‬ ‫ﻫﻨﺎﻙ‬arrow function
‫ﺍﻷﻣﺮ‬ ‫ﻧﺴﻬﻞ‬ ‫ﺣﺘﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﻓﻲ‬ ‫ﻟﻬﺎ‬ ‫ﺳﻨﺘﻄﺮﻕ‬ ،‫ﻭﺃﻫﻤﻴﺘﻬﺎ‬^_^

ARROW FUNCTION =>
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺮﺡ‬:
‫ﺍﻝ‬contactName‫ﺍﻝ‬ ‫ﺇﺳﻢ‬ ‫ﻳﻤﺜﻞ‬function‫ﺑﺎﺳﺘﺪﻋﺎﺋﻪ‬ ‫ﺳﻨﻘﻮﻡ‬ ‫ﺍﻟﺬﻱ‬.
‫ﺍﻝ‬fname, mname‫ﺍﻝ‬ ‫ﺗﻤﺜﻞ‬function parameter
‫ﺍﻝ‬ ‫ﻓﻲ‬console.log‫ﺍﻝ‬ ‫ﺑﺎﺳﺘﺪﻋﺎء‬ ‫ﻗﻤﻨﺎ‬function‫ﺍﻟﻘﻴﻢ‬ ‫ﻭﺍﺭﺳﺎﻝ‬
“anees”‫ﻭ‬“hikmat”‫ﺍﻝ‬ ‫ﻗﺎﻡ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬function‫ﺑﻴﻦ‬ ‫ﺍﻟﺮﺑﻂ‬ ‫ﺑﻌﻤﻠﻴﺔ‬
‫ﺍﻹﺳﻤﻴﻦ‬^_^...
‫ﺍﻟﺸﻜﻞ‬ ‫ﻫﺬﺍ‬ ‫ﺑﻜﺘﺎﺑﺔ‬ ‫ﻗﻤﻨﺎ‬ ‫ﻛﺄﻧﻨﺎ‬ ‫ﺃﻱ‬:

ARROW FUNCTION =>
‫ﻣﺜﺎﻝ‬2:‫ﻛﺘﺎﺑﺔ‬ ‫ﻳﻤﻜﻨﻨﺎ‬multiple statements‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬
Arrow Function‫ﺍﻟﺘﺎﻟﻲ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻓﻲ‬ ‫ﻛﻤﺎ‬:
‫ﻫﻨﺎ‬ ‫ﻻﺣﻆ‬..‫ﻭﺟﻮﺩ‬ ‫ﺣﺎﻟﺔ‬ ‫ﻓﻲ‬multiple statements‫ﺳﻨﻘﻮﻡ‬ ‫ﻣﺒﺎﺷﺮﺓ‬ ‫ﻓﺈﻧﻨﺎ‬
‫ﻧﻄﺎﻕ‬ ‫ﺿﻤﻦ‬ ‫ﺑﺤﺼﺮﻫﺎ‬block‫ﺧﻼﻝ‬ ‫ﻣﻦ‬{}..‫ﺍﻝ‬ ‫ﺳﻨﺴﺘﺨﺪﻡ‬ ‫ﺃﻧﻨﺎ‬ ‫ﻛﻤﺎ‬
Return‫ﺗﻨﻔﻴﺬﻫﺎ‬ ‫ﺍﻟﻤﻄﻠﻮﺏ‬ ‫ﺍﻟﻌﻤﻠﻴﺔ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻨﺎﺗﺠﺔ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﻹﺭﺟﺎﻉ‬^_^

ARROW FUNCTION =>
‫ﻣﺜﺎﻝ‬3:‫ﺍﻝ‬ ‫ﺗﻨﻔﻴﺬ‬ ‫ﻧﺎﺗﺞ‬Arrow Function‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻜﻮﻥ‬obj‫ﻣﻦ‬ ‫ﻧﺎﺗﺞ‬
‫ﺍﻝ‬function‫ﻳﻤﻜﻦ‬ ‫ﺃﻧﻨﺎ‬ ‫ﻭﻫﻲ‬ ،‫ﺟﻤﻴﻠﺔ‬ ‫ﺃﺧﺮﻯ‬ ‫ﻣﻴﺰﺓ‬ ‫ﻟﻨﺎ‬ ‫ﻳﺘﻴﺢ‬ ‫ﻭﻫﺬﺍ‬ ،‫ﺍﻹﻋﺘﻴﺎﺩﻱ‬
‫ﻛﺄﻧﻬﺎ‬ ‫ﺍﻟﺮﺍﺟﻌﺔ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﻧﺴﺘﺨﺪﻡ‬ ‫ﺃﻥ‬regular JavaScript function object
‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻠﺘﻌﺎﻣﻞ‬ ‫ﻣﻔﻴﺪ‬ ‫ﻭﻫﺬﺍ‬callback function..‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:

ARROW FUNCTION =>
‫ﻣﺜﺎﻝ‬4:‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻵﻥ‬2‫ﺍﻝ‬ ‫ﻻﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﻠﺰﻡ‬ ‫ﻛﺎﻥ‬statementsmultiple
‫ﺑﺎﺳﺘﻌﻤﺎﻝ‬ ‫ﻧﻘﻮﻡ‬ ‫ﺃﻥ‬{}‫ﻫﺬﻩ‬ ‫ﻟﻜﻦ‬ ،{}‫ﺇﺭﺳﺎﻝ‬ ‫ﻓﻲ‬ ‫ﺭﻏﺒﻨﺎ‬ ‫ﺣﺎﻝ‬ ‫ﻓﻲ‬ ‫ﻣﺸﻜﻠﺔ‬ ‫ﻟﻨﺎ‬ ‫ﺳﺘﺴﺒﺐ‬
literalobj...-_-
^_^‫ﻭﻣﺘﻮﻓﺮ‬ ‫ﻭﺑﺴﻴﻂ‬ ‫ﺳﻬﻞ‬ ‫ﻓﺎﻟﺤﻞ‬ ،‫ﺗﻘﻠﻖ‬ ‫ﻻ‬ ‫ﻟﻜﻦ‬:P‫ﺍﻝ‬ ‫ﺇﺣﺎﻁﺔ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻭﻳﻜﻮﻥ‬
{}‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬.. ()‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:
‫ﺍﻝ‬ ‫ﺃﺭﺳﻠﺖ‬ ‫ﺃﻧﻨﻲ‬ ‫ﻫﻨﺎ‬ ‫ﻻﺣﻆ‬id
‫ﺍﻝ‬ ‫ﻳﺘﻐﻴﺮ‬ ‫ﻟﻢ‬ ‫ﻭﻟﻬﺬﺍ‬ ،‫ﻓﻘﻂ‬name

ARROW FUNCTION =>
‫ﻣﺜﺎﻝ‬5:‫ﺑﻤﻜﺎﻥ‬ ‫ﺍﻷﻫﻤﻴﺔ‬ ‫ﻣﻦ‬ ‫ﻭﺍﻟﻤﺜﺎﻝ‬ ‫ﺍﻷﺧﻴﺮ‬ ‫ﻭﺍﻟﻤﺜﺎﻝ‬:P،

ARROW FUNCTION =>
‫ﺍﻝ‬ ‫ﻣﻮﺿﻮﻉ‬ ‫ﻣﻦ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺍﻧﺘﻬﻴﻨﺎ‬ ‫ﻧﻜﻮﻥ‬ ‫ﺑﻬﺬﺍ‬Arrow Function،
‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﻟﻸﻣﺜﻠﺔ‬ ‫ﺗﻄﺒﻴﻖ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ،‫ﻭﺍﻵﻥ‬:

‫ﺍﻟﻨﻮﺍﺱ‬ ‫ﺃﺑﻮ‬ ‫ﺷﻌﺮ‬ ‫ﻣﻦ‬

CLASS KEYWORD ON JS
‫ﻫﻮ‬ ‫ﻭﻣﺘﻰ‬ ،‫ﻟﻜﻢ‬ ‫ﻋﺮﺿﻪ‬ ‫ﻁﺮﻳﻘﺔ‬ ‫ﻓﻲ‬ ‫ﺟﺪﺍ‬ ‫ﻣﺤﺘﺎﺭﺍ‬ ‫ﺟﻌﻠﻨﻲ‬ ‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬ ‫ﺣﻘﻴﻘﺔ‬
‫ﻓﻲ‬ ‫ﻭﻓﻘﻨﺎ‬ ‫ﻧﻜﻮﻥ‬ ‫ﺃﻥ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﻭﻧﺴﺄﻝ‬ ،‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬ ‫ﻟﺸﺮﺡ‬ ‫ﺍﻟﻤﻨﺎﺳﺐ‬ ‫ﺍﻟﻮﻗﺖ‬
‫ﺍﻝ‬ ‫ﻟﻌﺮﺽ‬ ‫ﺍﻟﺘﻮﻗﻴﺖ‬ ‫ﻫﺬﺍ‬ ‫ﺍﺧﺘﻴﺎﺭ‬Class Keyword‫ﻧﻮﻓﻖ‬ ‫ﺃﻥ‬ ‫ﻭﻧﺴﺄﻟﻪ‬ ،‫ﻋﻠﻴﻜﻢ‬
‫ﺍﻟﺸﺮﺡ‬ ‫ﻓﻲ‬.
‫ﺍﻟﻤﻔﺎﻫﻴﻢ‬ ‫ﻣﻦ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﺑﺸﺮﺡ‬ ‫ﺳﺄﺑﺪﺃ‬ ‫ﺍﻧﻲ‬ ‫ﺍﻋﺘﻘﺪ‬ ‫ﺻﺤﻴﺤﺔـ‬ ‫ﺍﻟﺒﺪﺍﻳﺔ‬ ‫ﺗﻜﻮﻥ‬ ‫ﺣﺘﻰ‬
‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﺍﻟﺤﺪﻳﺚ‬ ‫ﻗﺒﻞ‬ ،‫ﻭﺍﻟﻤﻬﻤﺔ‬ ‫ﺍﻷﺳﺎﺳﻴﺔ‬Class‫ﺍﻝ‬ ‫ﺍﻟﺤﺪﻳﺚ‬ ‫ﻭﺳﻴﻜﻮﻥ‬ ،
JS Object Oriented Programming^_^‫ﻓﻌﻼ‬ ‫ﻳﻮﺟﺪ‬ ‫ﻭﻫﻞ‬ ،
CLASS‫؟‬ ‫ﺍﻟﻤﺨﺘﻠﻔﺔ‬ ‫ﺍﻟﺒﺮﻣﺠﺔ‬ ‫ﻟﻐﺎﺕ‬ ‫ﻓﻲ‬ ‫ﻛﻤﺎ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬!

CLASS KEYWORD ON JS
‫ﺍﻝ‬ ‫ﻣﻔﻬﻮﻡ‬obj‫ﺍﻷﺧﺮﻯ‬ ‫ﺍﻟﻠﻐﺎﺕ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﺒﺮﻣﺠﻴﻦ‬ ‫ﺑﻴﻦ‬ ‫ﺍﻟﻤﻌﺮﻭﻑ‬ ‫ﺑﺸﻜﻠﻪ‬
)‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻏﻴﺮ‬(‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﻳﺨﺘﻠﻒ‬obj،‫ﺳﻜﺮﺑﺖ‬ ‫ﺑﺎﻟﺠﺎﻓﺎ‬ ‫ﺍﻟﻤﻮﺟﻮﺩ‬
‫ﺍﻟﻰ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻣﻦ‬ ‫ﻳﻨﺘﻘﻞ‬ ‫ﻣﻦ‬ ‫ﻳﺘﻌﺠﺐ‬ ‫ﻛﺎﻥ‬ ‫ﻓﻤﺜﻼ‬ ،‫ﺑﺎﻟﺒﻨﺎء‬ ‫ﻫﻨﺎ‬ ‫ﺍﻟﻤﻔﺎﻫﻴﻤﻲ‬ ‫ﻭﺍﻹﺧﺘﻼﻑ‬
‫ﻫﻮ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺑﺎﻟﺠﺎﻓﺎ‬ ‫ﻧﺴﺘﺨﺪﻣﻪ‬ ‫ﻣﺎ‬ ‫ﺃﻥ‬ ‫ﻛﻴﻒ‬ ،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬obj‫ﺳﺆﺍﻝ‬ ‫ﻭﺃﻭﻝ‬ ،
‫ﺍﻝ‬ ‫ﺃﻳﻦ‬ ‫ﺑﺒﺎﻟﻪ‬ ‫ﻳﺨﻄﺮ‬Class‫؟‬..‫ﺍﻝ‬ ‫ﺗﻌﺮﻳﻒ‬ ‫ﻷﻥ‬obj‫ﻋﻠﻰ‬ ‫ﻳﺆﺷﺮ‬ ‫ﺃﻥ‬ ‫ﻳﻠﺰﻣﻪ‬
class!!‫ﻳﻮﺟﺪ‬ ‫ﻟﻢ‬ ‫ﺫﻛﺮ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺑﺎﻟﺸﻜﻞ‬ ‫ﺍﻟﻤﻔﻬﻮﻡ‬ ‫ﻭﻫﺬﺍ‬ ،)..‫ﺍﻝ‬ ‫ﻣﻔﻬﻮﻡ‬ ‫ﻳﻮﺟﺪ‬ ‫ﻟﻢ‬
class‫ﺃﺑﺪﺍ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺸﻜﻞ‬ ‫ﺑﻬﺬﺍ‬.. (‫ﻳﻘﻮﻝ‬ ‫ﻟﺬﻟﻚ‬
Narayan Prusty‫ﻛﺘﺎﺏ‬ ‫ﻣﺆﻟﻒ‬Learning ECMAScript 6
“JavaScript never had the concept of classes,
although it's an object-oriented programming
language.”

CLASS KEYWORD ON JS
‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺑﻤﻔﻬﻮﻡ‬ ‫ﺍﻟﻜﻼﺱ‬ ‫ﻋﻦ‬ ‫ﻟﻠﺤﺪﻳﺚ‬ ‫ﻧﻨﺘﻘﻞ‬ ،‫ﺍﻟﺒﺴﻴﻄﺔ‬ ‫ﺍﻟﻤﻘﺪﻣﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺑﻌﺪ‬ ‫ﻭﺍﻵﻥ‬
‫ﺳﻜﺮﺑﺖ‬^_^‫ﻋﻦ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﻭﺳﻨﺘﺤﺪﺙ‬ ،:
(1‫ﺍﻝ‬ ‫ﺇﻧﺸﺎء‬object‫ﺍﻟﺘﻘﻠﻴﺪﻳﺔ‬ ‫ﺑﺎﻟﻄﺮﻳﻘﺔ‬) .‫ﺍﻝ‬ ‫ﺳﺒﻖ‬ ‫ﻟﻤﺎ‬ ‫ﻭﺷﺮﺡ‬ ‫ﻣﺮﺍﺟﻌﺔ‬
ES6(
(2‫ﺍﻝ‬ ‫ﻫﻲ‬ ‫ﻣﺎ‬classes‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬
(3‫ﺍﻝ‬ ‫ﺇﻧﺸﺎء‬object‫ﺍﻝ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬classes
(4‫ﺍﻟﻮﺭﺍﺛﺔ‬)inheritance in classes(

CLASS KEYWORD ON JS
(1‫ﺇﻧﺸﺎء‬JS Object‫ﺍﻟﺘﻘﻠﻴﺪﻳﺔ‬ ‫ﺑﺎﻟﻄﺮﻳﻘﺔ‬:
*‫ﻣﻼﺣﻈﺔ‬:‫ﺍﻝ‬ ‫ﻟﻔﻬﻢ‬ ‫ﻣﻬﻤﺔ‬ ‫ﺍﻟﻤﺮﺍﺟﻌﺔ‬ ‫ﻫﺬﻩ‬js object‫ﻣﺘﺎﺑﻌﺔ‬ ‫ﻭﻟﺘﺴﺘﻄﻴﻊ‬
‫ﺍﻟﻘﺎﺩﻣﺔ‬ ‫ﺍﻟﺸﺮﺍﺋﺢ‬...
‫ﺃﻱ‬ ‫ﻹﻧﺸﺎء‬Object)‫ﺍﻟﺘﻘﻠﻴﺪﻳﺔ‬ ‫ﺑﺎﻟﻄﺮﻳﻘﺔ‬(‫ﻟﺬﻟﻚ‬ ‫ﺇﺳﻠﻮﺑﻴﻦ‬ ‫ﻫﻨﺎﻙ‬:
1(object literal:‫ﻹﻧﺸﺎء‬ ‫ﺍﻟﻄﺮﻳﻘﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬object‫ﺛﺎﺑﺖ‬
)fixed... (‫ﻣﺜﻞ‬:
var person = {fname:“anees", mname:“hikmat”}
2(constructor:‫ﻹﻧﺸﺎء‬ ‫ﺍﻟﻄﺮﻳﻘﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬object
Dynamically‫ﺍﻝ‬ ‫ﺃﺛﻨﺎء‬runtime‫ﻟﻠﻌﻤﻞ‬ ‫ﺍﻟﻔﻌﺎﻟﺔ‬ ‫ﺍﻟﻄﺮﻳﻘﺔ‬ ‫ﻭﻫﻲ‬
Dynamic^_^

CLASS KEYWORD ON JS
‫ﺍﻵﺗﻲ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:
‫ﺍﻝ‬ ‫ﻟﺪﻳﻨﺎ‬object literal‫ﺍﻟﻤﺴﻤﻰ‬Employee‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺃﻥ‬ ‫ﻭﻻﺣﻆ‬ ،
object‫ﻫﻨﺎﻟﻚ‬ ‫ﻛﺎﻥ‬ ‫ﻟﻮ‬ ‫ﻣﺎﺫﺍ‬ ‫ﻟﻜﻦ‬ ،‫ﺃﻧﻴﺲ‬ ‫ﻫﻮ‬ ‫ﻭﺍﺣﺪ‬ ‫ﺷﺨﺺ‬ ‫ﻳﺨﺪﻡ‬100‫ﻣﻮﻅﻒ؟‬

CLASS KEYWORD ON JS
‫ﺇﻧﺸﺎء‬ ‫ﺍﻟﻰ‬ ‫ﻣﺜﻼ‬ ‫ﺳﻨﺤﺘﺎﺝ‬ ‫ﺑﺄﻧﻨﺎ‬ ‫ﺍﻟﺴﺎﺑﻖ‬ ‫ﺍﻷﺳﻠﻮﺏ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﺸﻜﻠﺔ‬ ‫ﺗﻜﻤﻦ‬100obj
‫ﺍﻝ‬ ‫ﻋﺪﺩ‬ ‫ﻛﺎﻥ‬ ‫ﻟﻮ‬ ‫ﻣﺎﺫﺍ‬ ‫ﺍﺫﻥ‬ ،‫ﻳﺠﻮﺯ‬ ‫ﻻ‬ ‫ﺍﻟﻜﻼﻡ‬ ‫ﻭﻫﺬﺍ‬ ،‫ﻟﻠﻤﻮﻅﻔﻴﻦ‬employee
‫ﻣﺘﻐﻴﺮ‬^_^...‫؟‬!
‫ﺍﻝ‬ ‫ﻭﻫﻮ‬ ‫ﺍﻟﺜﺎﻧﻲ‬ ‫ﻟﻠﺸﻜﻞ‬ ‫ﺍﻟﺤﺎﺟﺔ‬ ‫ﺗﻜﻤﻦ‬ ‫ﻭﻫﻨﺎ‬constructor،‫ﺃﻭﻝ‬ ‫ﻫﻨﺎ‬ ‫ﻭﻣﻦ‬
‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﺗﻌﻠﻤﻬﺎ‬ ‫ﺃﻥ‬ ‫ﻳﺠﺐ‬ ‫ﻣﻌﻠﻮﻣﺔ‬constructor‫ﻫﻮ‬ ‫ﺍﻟﻮﺍﻗﻊ‬ ‫ﻓﻲ‬function
‫ﻛﻠﻤﺔ‬ ‫ﻟﻪ‬ ‫ﻣﻀﺎﻑ‬new^_^‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻭﻳﻘﻮﻡ‬ ،constructor‫ﻭﺇﺭﺟﺎﻉ‬ ‫ﺑﺎﻧﺸﺎء‬
object_^*‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻛﻤﺎ‬ ،this‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬constructor‫ﺍﻝ‬ ‫ﺍﻟﻰ‬ ‫ﺗﺸﻴﺮ‬
object‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﺍﻟﺘﻨﻔﻴﺬ‬ ‫ﺇﻧﺘﻬﺎء‬ ‫ﻳﺘﻢ‬ ‫ﻭﻋﻨﺪﻣﺎ‬ ،‫ﺑﺎﻧﺸﺎﺋﻪ‬ ‫ﻧﻘﻮﻡ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺍﻟﺠﺪﻳﺪ‬
constructor‫ﺍﻝ‬ ‫ﺍﺭﺟﺎﻉ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻘﻮﻡ‬object‫ﺑﺸﻜﻞ‬dynamic*_*
‫ﻭﺍﻵﻥ‬..‫ﺫﻛﺮﻧﺎﻩ‬ ‫ﻣﺎ‬ ‫ﻳﻮﺿﺢ‬ ‫ﻣﺜﺎﻻ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ،‫ﺑﺴﻴﻂ‬ ‫ﺍﻟﻜﻼﻡ‬ ‫ﻫﺬﺍ‬ ‫ﻭﺑﻌﺪ‬^_^

CLASS KEYWORD ON JS
‫ﺍﻟﻤﺜﺎﻝ‬)‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﺑﺎﻟﺸﺮﻳﺤﺔ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺮﺡ‬(‫ﻣﻮﺟﻮﺩ‬ ‫ﻟﻮﻥ‬ ‫ﻟﻜﻞ‬ ‫ﺍﻧﺘﺒﻪ‬ ‫ﻟﻜﻦ‬ ،:

CLASS KEYWORD ON JS
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺮﺡ‬:
‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻫﻲ‬ ‫ﻣﻼﺣﻈﺔ‬ ‫ﻭﺃﻫﻢ‬ ‫ﺃﻭﻝ‬employeeName‫ﺗﻼﺣﻆ‬ ‫ﻛﻤﺎ‬function
‫ﺟﻌﻠﻪ‬ ‫ﻣﺎ‬ ‫ﻟﻜﻦ‬ ،‫ﻁﺒﻴﻌﻲ‬constructor‫ﻭﺟﻮﺩ‬ ‫ﻫﻮ‬
new employeeName‫ﺍﻝ‬ ‫ﺗﻌﺮﻳﻒ‬ ‫ﻋﻨﺪ‬object،‫ﺃﻳﻀﺎ‬ ‫ﺗﻼﺣﻆ‬ ‫ﻭﻛﻤﺎ‬ ،
‫ﺍﻝ‬ ‫ﻓﺈﻥ‬prototype،‫ﺍﻟﺨﺼﺎﺋﺺ‬ ‫ﺃﻭ‬ ‫ﺍﻟﺪﻭﺍﻝ‬ ‫ﻣﻦ‬ ‫ﺃﻱ‬ ‫ﻹﺿﺎﻓﺔ‬ ‫ﺍﺳﺘﺨﺪﻣﺖ‬
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻳﺘﻢ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻟﻬﺬﻩ‬ ‫ﺍﻟﻮﺻﻮﻝ‬ ‫ﻭﻛﺎﻥ‬ ،‫ﺍﻹﺳﻢ‬ ‫ﻁﺒﺎﻋﺔ‬ ‫ﺩﺍﻟﺔ‬ ‫ﺃﺿﻔﻨﺎ‬ ‫ﻭﺑﻤﺜﺎﻟﻨﺎ‬
Object‫ﺑﺈﻧﺸﺎﺋﻪ‬ ‫ﻗﻤﻨﺎ‬ ‫ﺍﻟﺬﻱ‬...
‫ﺑﻤﻔﺎﺟﺄﺓ‬ ‫ﺳﺄﺧﺒﺮﻛﻢ‬ ‫ﻭﺍﻵﻥ‬^_^:P‫ﺃﻱ‬ ‫ﺃﻥ‬ ‫ﺗﺨﻴﻞ‬ ،Object Letiral‫ﻓﻲ‬
‫ﻫﻮ‬ ‫ﺍﻟﻮﺍﻗﻊ‬constructor!!،‫ﻧﻌﻢ‬ ،constructor‫ﺍﻝ‬ ‫ﻟﻜﻦ‬pointer
‫ﻋﻠﻰ‬ ‫ﻳﺆﺷﺮ‬ ‫ﺑﻪ‬ ‫ﺍﻟﺨﺎﺹ‬Global Constructor Object^^

CLASS KEYWORD ON JS
‫ﺳﻜﺮﺑﺖ‬ ‫ﺑﺎﻟﺠﺎﻓﺎ‬ ‫ﺍﻟﻮﺭﺍﺛﺔ‬ ‫ﻣﻔﻬﻮﻡ‬ ‫ﺍﻟﻰ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺳﻨﺘﻄﺮﻕ‬ ،‫ﻭﺍﻵﻥ‬
)Understanding inheritance(‫ﺃﻥ‬ ‫ﻫﻮ‬ ‫ﻣﻌﺮﻓﺘﻪ‬ ‫ﻣﻨﻚ‬ ‫ﺃﺭﻳﺪ‬ ‫ﻣﺎ‬ ‫ﻭﺃﻭﻝ‬ ،
‫ﺍﻝ‬ ‫ﺟﻤﻴﻊ‬object‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﺍﻟﻤﻮﺟﻮﺩﺓ‬js‫ﻟﺪﻳﻬﺎ‬“‫ﺧﺎﺻﻴﺔ‬property“‫ﺗﺴﻤﻰ‬
prototype‫ﺍﻟﺨﺎﺻﻴﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺗﻘﻮﻡ‬ ،“property”‫ﻋﻠﻰ‬ ‫ﺑﺎﻟﺘﺄﺷﻴﺮ‬object
‫ﻳﺪﻋﻰ‬ ‫ﺁﺧﺮ‬prototype)‫ﺍﻟﺴﺎﺑﻖ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻓﻲ‬ ‫ﺷﺎﻫﺪﻧﺎ‬ ‫ﻛﻤﺎ‬.. (
‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺍﻵﻥ‬prototype object‫ﺃﻳﻀﺎ‬ ‫ﻳﻤﻠﻚ‬ ‫ﺑﺬﺍﺗﻪ‬ ‫ﻫﻮ‬ ‫ﺍﻟﻴﻪ‬ ‫ﻭﺻﻠﻨﺎ‬ ‫ﺍﻟﺬﻱ‬
Prototype‫ﻭﺍﻝ‬ ،null‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﺗﻌﻨﻲ‬prototype‫ﻭﺟﻮﺩﻩ‬ ‫ﻋﺪﻡ‬
)‫ﻭﺟﻮﺩ‬ ‫ﻋﺪﻡ‬–‫ﻟﻞ‬ ‫ﻗﻴﻤﺔ‬ ‫ﺍﺳﻨﺎﺩ‬prototype.. (‫ﻧﺼﻞ‬ ‫ﻋﻨﺪﻣﺎ‬ ،‫ﺍﻟﻮﺍﻗﻊ‬ ‫ﻭﻓﻲ‬
‫ﺍﻝ‬ ‫ﻗﻴﻤﺔ‬ ‫ﺃﻥ‬ ‫ﻓﻴﻬﺎ‬ ‫ﻧﺠﺪ‬ ‫ﻟﻤﺮﺣﺔ‬prototype‫ﺗﺴﺎﻭﻱ‬null‫ﺃﻧﻨﺎ‬ ‫ﻳﻌﻨﻲ‬ ‫ﻓﻬﺬﺍ‬
‫ﺍﻟﺤﻠﻘﺔ‬ ‫ﻧﻬﺎﻳﺔ‬ ‫ﺍﻟﻰ‬ ‫ﻭﺻﻠﻨﺎ‬^_^..‫؟‬ ‫ﺍﻧﺘﻬﺖ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﺤﻠﻘﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻫﻲ‬ ‫ﻣﺎ‬ ‫ﻟﻜﻦ‬

CLASS KEYWORD ON JS
‫ﺳﻜﺮﺑﺖ‬ ‫ﺑﺎﻟﺠﺎﻓﺎ‬ ‫ﺍﻟﻮﺭﺍﺛﺔ‬ ‫ﻣﻔﻬﻮﻡ‬ ‫ﻫﻲ‬ ‫ﻋﻨﻬﺎ‬ ‫ﻭﺳﻨﺘﺤﺪﺙ‬ ‫ﺍﻧﺘﻬﺖ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﺤﻠﻘﺔ‬ ‫ﺇﻥ‬)
‫ﻟﻢ‬ ،‫ﺍﻹﺻﺪﺍﺭ‬ ‫ﻫﺬﺍ‬ ‫ﺗﺴﺒﻖ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻣﻔﺎﻫﻴﻢ‬ ‫ﻋﻦ‬ ‫ﻧﺘﺤﺪﺙ‬ ‫ﺃﻧﻨﺎ‬ ‫ﻻﺣﻆ‬
‫ﺑﻌﺪ‬ ‫ﺍﻟﺠﺪﻳﺪ‬ ‫ﻋﻦ‬ ‫ﻧﺘﺤﺪﺙ‬“‫ﻛﻤﻔﺎﻫﻴﻢ‬”‫ﻣﻌﺎ‬ ‫ﻛﻠﻴﻬﻤﺎ‬ ‫ﻋﻦ‬ ‫ﻧﺘﺤﺪﺙ‬ ‫ﻓﻘﺪ‬ ‫ﻭﺧﺼﺎﺋﺺ‬ ‫ﻛﺪﻭﺍﻝ‬ ‫ﺃﻣﺎ‬ ،(
‫ﻫﻲ‬ ‫ﺍﻟﺤﻠﻘﺔ‬:‫ﺍﻟﻰ‬ ‫ﺍﻟﻮﺻﻮﻝ‬ ‫ﻧﺤﺎﻭﻝ‬ ‫ﻋﻨﺪﻣﺎ‬property‫ﺩﺍﺧﻞ‬object‫ﻭﻛﺎﻧﺖ‬ ،
‫ﻫﺬﻩ‬property‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺑﺪﺍﺧﻞ‬ ‫ﻣﻮﺟﻮﺩﺓ‬ ‫ﻏﻴﺮ‬object‫ﺍﻝ‬ ‫ﺳﻴﻘﻮﻡ‬ ،
property‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﺑﺎﻟﺒﺤﺚ‬property‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬prototype‫ﻟﻢ‬ ‫ﺇﺫﺍ‬ ،
‫ﺍﻝ‬ ‫ﻫﺬﻩ‬ ‫ﺃﻳﻀﺎ‬ ‫ﻳﺠﺪ‬property‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬prototype‫ﺩﺍﺧﻞ‬ ‫ﺑﺎﻟﺒﺤﺚ‬ ‫ﺳﻴﻘﻮﻡ‬ ،
‫ﺍﻝ‬prototype‫ﺑﺎﻝ‬ ‫ﺍﻟﺨﺎﺹ‬prototype object‫ﺍﻟﺴﻠﺴﻠﺔ‬ ‫ﺗﺘﻢ‬ ‫ﻭﻫﻜﺬﺍ‬ ،
‫ﺍﻝ‬ ‫ﻧﺘﻴﺠﺔ‬ ‫ﻛﺎﻧﺖ‬ ‫ﻁﺎﻟﻤﺎ‬prototype‫ﺗﺴﺎﻭﻱ‬null‫ﻓﻲ‬ ‫ﺍﻟﻮﺭﺍﺛﺔ‬ ‫ﻣﺒﺪﺃ‬ ‫ﻫﻮ‬ ‫ﻭﻫﺬﺍ‬ ،
‫ﺃﺭﻳﺪ‬ ‫ﻣﺎ‬ ‫ﺃﺟﺪ‬ ‫ﺣﺘﻰ‬ ‫ﺍﻟﺨﺼﺎﺋﺺ‬ ‫ﺑﻮﺭﺍﺛﺔ‬ ‫ﺃﺳﺘﻤﺮ‬ ‫ﺗﻼﺣﻆ‬ ‫ﻛﻤﺎ‬ ،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬
‫ﺃﻭﺃﻧﺘﻬﻲ‬^_^

CLASS KEYWORD ON JS
‫ﻣﻬﻤﺔ‬ ‫ﻣﻼﺣﻈﺔ‬:‫ﺍﻝ‬JS Object‫ﻳﻤﻠﻚ‬ ‫ﺃﻥ‬ ‫ﺑﺈﻣﻜﺎﻧﻪ‬prototype،‫ﻓﻘﻂ‬ ‫ﻭﺍﺣﺪ‬
‫ﻓﻘﻂ‬ ‫ﺍﻷﺣﺎﺩﻳﺔ‬ ‫ﺍﻟﻮﺭﺍﺛﺔ‬ ‫ﺗﺪﻋﻢ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﻭﺍﻟﺠﺎﻓﺎ‬)single inheritance(
‫ﺍﻟﺨﺎﺻﻴﺔ‬ ‫ﺇﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﻤﻜﻨﻨﺎ‬__proto__‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﺃﻭ‬
Object.setPrototypeOf()‫ﺍﻝ‬ ‫ﻹﺳﻨﺎﺩ‬prototype‫ﺍﻝ‬ ‫ﺍﻟﻰ‬obj
‫ﺍﻝ‬ ‫ﺗﺪﻋﻢ‬ ‫ﻛﻤﺎ‬js‫ﺍﻟﺪﺍﻟﺔ‬Object.create()‫ﻹﻧﺸﺎء‬new object‫ﻳﺤﺘﻮﻱ‬
prototype‫ﺑﺘﺤﺪﻳﺪﻩ‬ ‫ﻧﺤﻦ‬ ‫ﻗﻤﻨﺎ‬ ‫ﻣﻌﻴﻦ‬...
‫ﻭﺍﻵﻥ‬..‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺍﻵﻥ‬ ‫ﺳﺘﺘﻀﺢ‬ ‫ﻟﻜﻨﻬﺎ‬ ،‫ﻣﺎ‬ ‫ﻧﻮﻋﺎ‬ ‫ﺿﺒﺎﺑﻴﺔ‬ ‫ﺗﻜﻮﻥ‬ ‫ﻗﺪ‬ ‫ﺍﻟﻔﻜﺮﺓ‬ ‫ﺃﻥ‬ ‫ﺃﻋﻠﻢ‬
‫ﺑﺎﻟﺸﺮﺡ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﻭﺍﻟﺼﻮﺭﺓ‬ ،‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﺍﻟﺸﺮﻳﺤﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻹﻁﻼﻉ‬ ‫ﺑﻌﺪ‬ ‫ﺗﻌﺎﻟﻰ‬
‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﺑﻌﺪ‬ ‫ﺍﻟﺸﺮﻳﺤﺔ‬ ‫ﻓﻲ‬...

CLASS KEYWORD ON JS
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:
__proto__‫ﺧﺎﺻﻴﺔ‬deprecated‫ﻓﻲ‬ ‫ﻣﺪﻋﻮﻣﺔ‬ ‫ﻣﺎﺯﺍﻟﺖ‬ ‫ﻟﻜﻨﻬﺎ‬ ،
‫ﺑﺎﻷﺩﺍء‬ ‫ﺗﻬﺘﻢ‬ ‫ﻛﺎﻧﺖ‬ ‫ﺇﺫﺍ‬ ‫ﺧﺼﻮﺻﺎ‬ ،‫ﺑﺎﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻳﻨﺼﺢ‬ ‫ﻻ‬ ‫ﻟﻜﻦ‬ ،‫ﺍﻟﻤﺘﺼﺤﻔﺎﺕ‬^_^
‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻭﺑﺈﻣﻜﺎﻧﻚ‬create()‫ﻣﻨﻬﺎ‬ ‫ﺑﺪﻻ‬^_^...

CLASS KEYWORD ON JS
‫ﺍﻝ‬ ‫ﻓﻜﺮﺓ‬ ‫ﺷﺎﻫﺪ‬ ،‫ﻭﺍﻵﻥ‬inheritance‫ﺑﺒﺎﻟﻲ‬ ‫ﺗﻜﻦ‬ ‫ﻟﻢ‬ ‫ﻭﺣﻘﻴﻘﺔ‬ ،‫ﻋﻨﻬﺎ‬ ‫ﺗﺤﺪﺛﻨﺎ‬ ‫ﺍﻟﺘﻲ‬
‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺒﺤﺚ‬ ‫ﺃﺛﻨﺎء‬ ‫ﻓﻲ‬ ‫ﻣﺼﺎﺩﻓﺔ‬ ‫ﻭﺟﺪﺗﻬﺎ‬ ‫ﺣﺘﻰ‬ ‫ﺍﻟﺼﻮﺭﺓ‬ ‫ﻫﺬﻩ‬^_^

CLASS KEYWORD ON JS
‫ﻣﺜﺎﻝ‬2:‫ﺍﻟﻮﺭﺍﺛﺔ‬ ‫ﻣﺒﺪﺃ‬ ‫ﻋﻠﻰ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﻓﻜﺮﺓ‬ ‫ﻳﻮﺿﺢ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬:
‫ﻓﻲ‬ ‫ﺗﻜﻤﻦ‬ ‫ﺍﻟﻔﻜﺮﺓ‬ ‫ﺃﻥ‬ ‫ﻻﺣﻆ‬
‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬school‫ﻣﻦ‬
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬student،
‫ﺑﺎﻟﻨﻬﺎﻳﺔ‬ ‫ﺃﻧﻨﻲ‬ ‫ﻛﻴﻒ‬ ‫ﻭﻻﺣﻆ‬
‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﻣﺖ‬student
‫ﻣﻦ‬ ‫ﻛﻞ‬ ‫ﻟﻄﺒﺎﻋﺔ‬ ‫ﺃﻭﺑﺠﻴﻜﺖ‬
‫ﺍﻟﻤﺪﺭﺳﺔ‬ ‫ﻭﺍﺳﻢ‬ ‫ﺍﻟﻄﺎﻟﺐ‬ ‫ﺍﺳﻢ‬
‫ﺍﻝ‬ ‫ﻣﻦ‬)School.. (

ِ‫ﻪ‬‫ﻴ‬َ‫ﻠ‬َ‫ﻋ‬ ُ ‫ﱠ‬‫ﷲ‬ ‫ﻰ‬‫ﱠ‬‫ﻠ‬َ‫ﺻ‬ ِ ‫ﱠ‬‫ﷲ‬ ‫ﻮﻝ‬ُ‫ﺳ‬َ‫ﺭ‬ ‫ﺃﻥ‬ ُ‫ﻪ‬‫ﻨ‬َ‫ﻋ‬ ُ ‫ﱠ‬‫ﷲ‬ َ‫ﻲ‬ِ‫ﺿ‬َ‫ﺭ‬ ‫ﻨﻴﻒ‬ُ‫ﺣ‬ ‫ﺑﻦ‬ ‫ﺳﻬﻞ‬ ‫ﻭﻋﻦ‬
‫ﻗﺎﻝ‬ ‫ﻢ‬‫ﱠ‬‫ﻠ‬َ‫ﺳ‬َ‫ﻭ‬:
‫ﺭﻭﺍﻩ‬‫ﻣﺴﻠﻢ‬

CLASS KEYWORD ON JS
‫ﺍﻝ‬ ‫ﺍﻟﻰ‬ ‫ﻣﻌﺎ‬ ‫ﻧﺄﺗﻲ‬ ،‫ﻭﺍﻵﻥ‬CLASS‫ﺍﻟﻴﻬﺎ‬ ‫ﻭﺻﻠﻨﺎ‬ ‫ﺣﺘﻰ‬ ‫ﺍﻧﺘﻈﺎﺭﻧﺎ‬ ‫ﻁﺎﻝ‬ ‫ﺍﻟﺘﻲ‬^_^
‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻛﻴﻒ‬ ،‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺑﺎﻟﺸﺮﺍﺋﺢ‬ ‫ﺷﺎﻫﺪﻧﺎ‬js object model‫ﺃﻣﺮﻳﻦ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻌﺘﻤﺪ‬
‫ﺍﻝ‬ ‫ﻭﻫﻤﺎ‬ ‫ﺭﺋﻴﺴﻴﻴﻦ‬constructors‫ﻭﺍﻝ‬prototype‫ﻓﻲ‬ ‫ﻟﻪ‬ ‫ﺗﻄﺮﻗﻨﺎ‬ ‫ﺍﻟﺘﻲ‬
‫ﺍﻝ‬ ‫ﻟﻜﺘﺎﺑﺔ‬ ‫ﺟﺪﻳﺪﺓ‬ ‫ﻭﺳﻴﻠﺔ‬ ‫ﻋﻦ‬ ‫ﺳﻨﺘﺤﺪﺙ‬ ،‫ﻭﺍﻵﻥ‬ ،‫ﺍﻟﻮﺭﺍﺛﺔ‬ ‫ﻣﻮﺿﻮﻉ‬syntax
‫ﺑﺎﻝ‬ ‫ﺍﻟﺨﺎﺹ‬js object model‫ﻗﻠﺖ‬ ‫ﺃﻧﻨﻲ‬ ‫ﻭﻻﺣﻆ‬ ،)‫ﺟﺪﻳﺪﺓ‬ ‫ﻭﺳﻴﻠﺔ‬(‫ﻓﺎﻝ‬ ،
classes‫ﻟﻞ‬ ‫ﺟﺪﻳﺪ‬ ‫ﻣﻔﻬﻮﻡ‬ ‫ﺑﺈﻧﺸﺎء‬ ‫ﺗﻘﻮﻡ‬ ‫ﻻ‬js object model_^*‫ﻭﻫﺬﺍ‬ ،
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻣﻪ‬ ‫ﺳﻨﻘﻮﻡ‬ ‫ﻭﺍﻟﺬﻱ‬ ‫ﺍﻷﺳﻠﻮﺏ‬Class‫ﺗﺄﻛﻴﺪ‬ ‫ﺑﻜﻞ‬ ‫ﻣﻦ‬ ‫ﺳﻴﻜﻮﻥ‬ ،
‫ﺍﻝ‬ ‫ﺧﺼﺎﺋﺺ‬ ‫ﻣﻦ‬ES6‫ﺍﻟﺠﺪﻳﺪﺓ‬^_^‫ﺭﺅﻳﺔ‬ ‫ﻫﻮ‬ ‫ﺍﻷﺳﻠﻮﺏ‬ ‫ﻫﺬﺍ‬ ‫ﻳﻘﺪﻣﻪ‬ ‫ﻣﺎ‬ ‫ﻭﺃﻫﻢ‬ ،
‫ﻭﺍﻟﺘﺘﺒﻊ‬ ‫ﻟﻠﻔﻬﻢ‬ ‫ﻭﺃﻭﺿﺢ‬ ‫ﻭﻣﺮﻭﻧﺔ‬ ‫ﺳﻬﻮﻟﺔ‬ ‫ﺫﺍﺕ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﻟﻠﺸﻴﻔﺮﺓ‬ ‫ﺗﺮﻛﻴﺒﻴﺔ‬ ‫ﺑﻨﻴﺔ‬..

CLASS KEYWORD ON JS
‫ﻣﻼﺣﻈﺔ‬:‫ﺍﻝ‬class‫ﻫﻮ‬ ‫ﺍﻟﻮﺍﻗﻊ‬ ‫ﻓﻲ‬function‫؟‬!‫ﺫﻭ‬ ‫ﻟﻜﻨﻪ‬ ،syntax‫ﺟﺪﻳﺪ‬
‫ﺍﻝ‬ ‫ﻹﻧﺸﺎء‬Function‫ﺍﻝ‬ ‫ﻳﺴﺘﺨﺪﻡ‬ ‫ﺍﻟﺬﻱ‬constructors‫ﺗﻘﻢ‬ ‫ﻻ‬ ‫ﻟﺬﻟﻚ‬ ،
‫ﺑﺎﻧﺸﺎء‬Class‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻓﻲ‬ ‫ﺗﻔﻜﺮ‬ ‫ﻻ‬ ‫ﻛﻨﺖ‬ ‫ﺇﺫﺍ‬constructing objects
‫ﺍﻝ‬ ‫ﻟﺘﻌﺮﻳﻒ‬ ‫ﺇﺛﻨﺘﻴﻦ‬ ‫ﻁﺮﻳﻘﺘﻴﻦ‬ ‫ﻫﻨﺎﻙ‬Classً‫ﻭﻫﻦ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬:
(1class declaration
(2class expression
‫ﺑﺎﻝ‬ ‫ﺍﻵﻥ‬ ‫ﻭﻟﻨﺒﺪﺃ‬class declaration_^*

CLASS KEYWORD ON JS
1(The class declaration:‫ﻟﺘﻌﺮﻳﻒ‬Class‫ﺍﻟﻄﺮﻳﻘﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬
)Class Declaration(‫ﺍﻟﻤﺤﺠﻮﺯﺓ‬ ‫ﺍﻟﻜﻠﻤﺔ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬ ‫ﺍﻟﻘﻴﺎﻡ‬ ‫ﻳﻠﺰﻣﻚ‬
“ class “‫ﺛﻢ‬ ‫ﻭﻣﻦ‬“‫ﺍﻟﻜﻼﺱ‬ ‫ﺍﺳﻢ‬“....‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:

CLASS KEYWORD ON JS
2(The class expression:‫ﻟﻜﻦ‬ ،‫ﺍﻷﻭﻝ‬ ‫ﺑﺎﻷﺳﻠﻮﺏ‬ ‫ﺷﺒﻴﻪ‬ ‫ﺍﻷﺳﻠﻮﺏ‬ ‫ﻫﺬﺍ‬
‫ﺍﻟﻜﻼﺱ‬ ‫ﺍﺳﻢ‬ ‫ﻛﺘﺎﺑﺔ‬ ‫ﺍﻟﻰ‬ ‫ﺗﺤﺘﺎﺝ‬ ‫ﻟﻦ‬ ‫ﻫﻨﺎ‬...‫ﺍﻝ‬ ‫ﻛﺘﺎﺑﺔ‬ ‫ﻁﺮﻳﻘﺔ‬ ‫ﻭﺗﺒﻘﻰ‬ ،body‫ﻭﺍﻝ‬
Method‫ﺫﺍﺗﻬﺎ‬ ‫ﻫﻲ‬^_^...‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:

CLASS KEYWORD ON JS
‫ﺍﻝ‬ ‫ﻣﻮﺿﻮﻉ‬ ‫ﺍﻟﻰ‬ ‫ﻧﻌﻮﺩ‬ ،‫ﻭﺍﻵﻥ‬Prototype‫ﻣﺠﺪﺩﺍ‬^_^..‫ﺳﻬﻮﻟﺔ‬ ‫ﺷﺎﻫﺪ‬ ‫ﻟﻜﻦ‬
‫ﺍﻵﻥ‬ ‫ﺍﻷﻣﺮ‬ ‫ﻫﺬﺍ‬^_^..
‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻫﻮ‬ ‫ﺍﻵﻥ‬ ‫ﻣﻌﺮﻓﺘﻪ‬ ‫ﻣﻨﻚ‬ ‫ﺃﺭﻳﺪ‬ ‫ﻣﺎ‬prototype methods‫ﺃﻱ‬ ‫ﻫﻲ‬
Method‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﻭﺿﻌﻬﺎ‬ ‫ﻳﺘﻢ‬Class Body^_^...‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:

CLASS KEYWORD ON JS
The Set & Get Method:‫ﻣﻦ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﺩﻭﺍﻝ‬ ‫ﻹﻧﺸﺎء‬ ‫ﺍﻟﺪﻭﺍﻝ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺴﺘﺨﺪﻡ‬
‫ﺍﻝ‬ ‫ﻧﻄﺎﻕ‬ ‫ﺿﻤﻦ‬ ‫ﺗﺴﺘﺨﺪﻡ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻘﻴﻢ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﻮﺻﻮﻝ‬ ‫ﺧﻼﻟﻬﺎ‬class‫ﻗﻴﻤﺘﻬﺎ‬ ‫ﺗﻐﻴﻴﺮ‬ ‫ﺃﻭ‬
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﺍﺳﻨﺎﺩﻫﺎ‬ ‫ﺗﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺃﻭ‬ ‫ﺍﻟﺤﺎﻟﻴﺔ‬constructor..‫ﺳﻬﻞ‬ ‫ﺍﻟﻤﻮﺿﻮﻉ‬
‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﻳﺨﺘﻠﻒ‬ ‫ﻭﻟﻢ‬ES5‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﺮﺓ‬ ‫ﻫﺬﻩ‬ ‫ﺳﻨﺴﺘﺨﺪﻣﻬﺎ‬ ‫ﺃﻧﻨﺎ‬ ‫ﺳﻮﻯ‬ ،class^^
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬)‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﺍﻟﺸﺮﻳﺤﺔ‬ ‫ﻓﻲ‬:(‫ﻻﺳﺘﻌﺮﺍﺽ‬ ‫ﺍﻹﻧﺘﻘﺎﻝ‬ ‫ﻗﺒﻞ‬ ‫ﻟﻠﻨﺘﺎﺋﺞ‬ ‫ﻭﺍﻧﺘﺒﻪ‬
‫ﺑﺎﻟﻨﺘﺎﺋﺞ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬:

CLASS KEYWORD ON JS

CLASS KEYWORD ON JS
Implementing inheritance in classes:‫ﻋﻦ‬ ‫ﺗﺤﺪﺛﻨﺎ‬ ‫ﻟﻘﺪ‬
‫ﺍﻝ‬ ‫ﻟﺘﺘﺒﻊ‬ ‫ﻣﺰﻋﺠﺎ‬ ‫ﺍﻷﻣﺮ‬ ‫ﻛﺎﻥ‬ ‫ﻛﻢ‬ ‫ﺳﻮﻳﺎ‬ ‫ﻭﺷﺎﻫﺪﻧﺎ‬ ،‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻮﺭﺍﺛﺔ‬
Function‫ﺍﻵﺧﺮ‬ ‫ﻣﻨﻬﻤﺎ‬ ‫ﻛﻞ‬ ‫ﻭﻭﺭﺍﺛﺔ‬..‫ﺑﺎﻝ‬ ‫ﺗﻄﻮﺭ‬ ‫ﺍﻷﺳﻠﻮﺏ‬ ‫ﻫﺬﺍ‬ ‫ﻟﻜﻦ‬ ،‫ﺍﻟﺦ‬
ES6‫ﻭﻫﻲ‬ ‫ﻣﺤﺠﻮﺯﺓ‬ ‫ﻛﻠﻤﺔ‬ ‫ﻟﺪﻳﻨﺎ‬ ‫ﻓﺄﺻﺒﺢ‬ ،extends‫ﻟﻨﺎ‬ ‫ﻟﺘﻘﺪﻡ‬ ‫ﻭﺟﺪﺕ‬ ،
‫ﺍﻟﻮﺭﺍﺛﺔ‬ ‫ﻋﺎﻟﻢ‬ ‫ﻓﻲ‬ ‫ﺧﺪﻣﺎﺗﻬﺎ‬_^*‫ﺍﻝ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺄﺗﻲ‬ ‫ﻟﻢ‬ ‫ﻟﻜﻦ‬ ،extends‫ﺑﻞ‬ ،‫ﻟﻮﺣﺪﻫﺎ‬
‫ﺍﻟﻤﺤﺠﻮﺯﺓ‬ ‫ﺍﻟﻜﻠﻤﺔ‬ ‫ﻫﻨﺎﻙ‬ ‫ﺃﻳﻀﺎ‬super‫ﺑﺮﻣﺠﺔ‬ ‫ﻟﻐﺔ‬ ‫ﻓﻲ‬ ‫ﺧﺒﺮﺓ‬ ‫ﺃﻱ‬ ‫ﻟﺪﻳﻪ‬ ‫ﻭﺍﻟﺬﻱ‬ ،
‫ﻋﻦ‬ ‫ﺷﻲء‬ ‫ﻳﻌﻠﻢ‬ ‫ﻻ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺃﻣﺎ‬ ،‫ﻭﺃﻫﻤﻴﺘﻬﺎ‬ ‫ﺍﻟﻜﻠﻤﺎﺕ‬ ‫ﻫﺬﻩ‬ ‫ﺭﻭﻋﺔ‬ ‫ﻣﺪﻯ‬ ‫ﺳﻴﻌﻠﻢ‬ ،‫ﺃﺧﺮﻯ‬
‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺍﻵﻥ‬ ‫ﺭﻭﻋﺘﻬﺎ‬ ‫ﻓﺴﺘﺪﺭﻙ‬ ،‫ﺍﻟﻜﻠﻤﺎﺕ‬ ‫ﻫﺬﻩ‬^_^...

CLASS KEYWORD ON JS
extends:‫ﺍﻝ‬ ‫ﺗﺴﺘﺨﺪﻡ‬extends‫ﺍﻟﺨﺼﺎﺋﺺ‬ ‫ﻟﻮﺭﺍﺛﺔ‬
OR staticnon-static‫ﺃﻱ‬ ‫ﻣﻦ‬Constructor،‫ﺁﺧﺮ‬
‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﺍﻟﻨﻈﺮ‬ ‫ﻭﺑﻐﺾ‬Constructor‫ﺿﻤﻦ‬ ‫ﻭﺟﺪ‬ ‫ﻫﻞ‬class keyword
‫ﺿﻤﻦ‬ ‫ﻳﻮﺟﺪ‬ ‫ﻟﻢ‬ ‫ﺃﻡ‬class‫ﺍﻟﻮﺭﺍﺛﺔ‬ ‫ﺳﺘﺘﻢ‬ ‫ﻓﺈﻧﻪ‬ ،_^*
super:‫ﺍﻝ‬ ‫ﺗﺴﺘﺨﺪﻡ‬super‫ﺍﺛﻨﻴﻦ‬ ‫ﻷﻣﺮﻳﻦ‬:
(1‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﺗﺴﺘﺨﺪﻡ‬Constructor‫ﺩﺍﺧﻞ‬ ‫ﺍﻟﻤﻮﺟﻮﺩ‬class‫ﺍﻝ‬ ‫ﻹﺳﺘﺪﻋﺎء‬ ،
Parent Constructor)‫ﺍﻝ‬Constructor‫ﺑﺎﻟﻜﻼﺱ‬ ‫ﺍﻟﺨﺎﺹ‬
‫ﻭﺭﺍﺛﺘﻪ‬ ‫ﺗﻢ‬ ‫ﺍﻟﺬﻱ‬.(
(2‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﺗﺴﺘﺨﺪﻡ‬method‫ﺍﻝ‬ ‫ﻻﺳﺘﺪﻋﺎء‬ ،‫ﻛﻼﺱ‬ ‫ﺩﺍﺧﻞ‬ ‫ﺍﻟﻤﻮﺟﻮﺩ‬
static or non-static method‫ﺍﻝ‬ ‫ﻣﻦ‬class‫ﻭﺭﺍﺛﺘﻪ‬ ‫ﺗﻢ‬ ‫ﺍﻟﺬﻱ‬
‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﺑﺎﻟﺸﺮﻳﺤﺔ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:

CLASS KEYWORD ON JS
‫ﺍﻝ‬ ‫ﻣﻮﺿﻮﻉ‬ ‫ﻣﻦ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﻔﻀﻞ‬ ‫ﺍﻧﺘﻬﻴﻨﺎ‬ ‫ﻧﻜﻮﻥ‬ ‫ﻭﻫﻜﺬﺍ‬Class‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬
‫ﻫﻮ‬ ‫ﻋﻨﻪ‬ ‫ﺗﺤﺪﺛﻨﺎ‬ ‫ﻣﺎ‬ ‫ﻭﻣﻠﺨﺺ‬ ،‫ﺳﻜﺮﺑﺖ‬)‫ﻟﻺﺻﺪﺍﺭ‬ES6‫ﺍﻝ‬ ‫ﻁﺮﻳﻘﺔ‬ ‫ﻣﺜﻞ‬ ‫ﻗﺒﻞ‬ ‫ﻭﻣﺎ‬
inherit‫ﺍﻝ‬ ‫ﻗﺒﻞ‬ES6‫ﺑﺎﻝ‬ ‫ﻟﺸﺮﺣﻬﺎ‬ ‫ﺍﻟﺘﻄﺮﻕ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬ES6: (
(1CLASS
(2Extends
(3Super
(4Get & Set Method
(5Object in javascript
(6Prototype
(7Constructor
(8Inheritance
‫ﻫﻨﺎ‬ ‫ﻣﻦ‬ ‫ﻭﻏﻴﺮﻫﺎ‬ ‫ﺗﻄﺒﻴﻘﻬﺎ‬ ‫ﺗﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﺟﻤﻴﻊ‬ ‫ﺷﺎﻫﺪ‬

‫ﻣﻜﺎﻥ‬ ‫ﻛﻞ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺤﻖ‬ ‫ﺃﻫﻞ‬ ‫ﺍﻧﺼﺮ‬ ‫ﺍﻟﻠﻬﻢ‬
‫ﺍﺳﻤﻚ‬ ‫ﻓﻴﻪ‬ ‫ُﺬﻛﺮ‬‫ﻳ‬
‫ﺭﺍﻳﺘﻚ‬ ‫ﻭﺭﻓﻊ‬ ‫ﻛﻠﻤﺘﻚ‬ ‫ﻹﻋﻼء‬ ‫ﻓﻴﻪ‬ ‫ُﺠﺎﻫﺪ‬‫ﻳ‬‫ﻭ‬
‫ﻋﺒﺎﺩﻙ‬ ‫ﻣﻦ‬ ‫ﻭﺍﻟﻤﺴﺘﻀﻌﻔﻴﻦ‬ ‫ﺍﻟﺤﻖ‬ ‫ﻷﻫﻞ‬ ‫ﻓﻴﻪ‬ ‫ُﻨﺘﺼﺮ‬‫ﻳ‬‫ﻭ‬
‫ﻣﻜﺎﻥ‬ ‫ﻛﻞ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺤﻖ‬ ‫ﻷﻫﻞ‬ ‫ﻛﻦ‬ ‫ﺍﻟﻠﻬﻢ‬...
‫ﺟﻬﻠﻨﺎﻫﻢ‬ ‫ﻭﺇﻥ‬ ‫ﺍﻟﺤﻖ‬ ‫ﺃﻫﻞ‬ ‫ﺍﻧﺼﺮ‬ ‫ﺍﻟﻠﻬﻢ‬
‫ﻭﺃﺷﻜﺎﻟﻬﻢ‬ ‫ﺃﺳﻤﺎﺅﻫﻢ‬ ‫ﻏﺮﺗﻨﺎ‬ ‫ﻭﺇﻥ‬ ‫ﺍﻟﺒﺎﻁﻞ‬ ‫ﺑﺄﻫﻞ‬ ‫ﻭﻋﻠﻴﻚ‬
‫ﺫﻟﻚ‬ ‫ﺩﻭﻥ‬ ‫ﺗﺠﻌﻠﻨﺎ‬ ‫ﻭﻻ‬ ‫ﻟﻠﺤﻖ‬ ‫ﻧﺼﺮﺍ‬ ‫ﺍﺟﻌﻠﻨﺎ‬ ‫ﺍﻟﻠﻬﻢ‬
‫ﺁﻣﻴﻦ‬ ‫ﺍﻟﻠﻬﻢ‬

FOR OF LOOP
‫ﺍﻝ‬For Of Loop‫ﺍﻹﺻﺪﺍﺭ‬ ‫ﻣﻦ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺍﻟﻰ‬ ‫ﺇﺿﺎﻓﺘﻪ‬ ‫ﺗﻢ‬ ‫ﺟﺪﻳﺪ‬ ‫ﺃﺳﻠﻮﺏ‬
‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻭﻳﺘﻢ‬ ،‫ﺍﻟﺴﺎﺩﺱ‬for...of‫ﺍﻟﻌﻨﺎﺻﺮ‬ ‫ﻋﻠﻰ‬ ‫ﺗﺪﻭﺭ‬ ‫ﺩﻭﺭﺍﻥ‬ ‫ﺣﻠﻘﺔ‬ ‫ﻹﻧﺸﺎء‬
‫ﺳﻜﺮﺑﺖ‬ ‫ﺟﺎﻓﺎ‬ ‫ﺩﺍﺧﻞ‬ ‫ﻣﻮﺟﻮﺩﺓ‬ ‫ﻓﺌﺔ‬ ‫ﺃﻭ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﺃﻱ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﻮﺟﻮﺩﺓ‬)object,
array, map...‫ﺍﻟﺦ‬(‫ﺑﺮﻣﺠﻴﺔ‬ ‫ﺟﻤﻠﺔ‬ ‫ﺗﻨﻔﻴﺬ‬ ‫ﻣﻦ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﺍﻷﺳﻠﻮﺏ‬ ‫ﻫﺬﺍ‬ ‫ﺃﻥ‬ ‫ﻛﻤﺎ‬ ،
‫ﺧﺼﺎﺋﺼﻪ‬ ‫ﻣﻦ‬ ‫ﺃﻱ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻠﺘﻌﺪﻳﻞ‬ ‫ﺣﺪﻯ‬ ‫ﻋﻠﻰ‬ ‫ﺟﻠﺒﻪ‬ ‫ﺗﻢ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻛﻞ‬ ‫ﻋﻠﻰ‬_^*
)Invoking Custom Hook With Statement(
‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﺍﻟﺼﻴﻐﺔ‬:

FOR OF LOOP
‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﺍﻟﺼﻴﻐﺔ‬ ‫ﺷﺮﺡ‬:
Variable:‫ﺍﻟﺨﺼﺎﺋﺺ‬ ‫ﻣﻦ‬ ‫ﺟﻠﺒﻬﺎ‬ ‫ﻳﺘﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻘﻴﻢ‬ ،‫ﺩﻭﺭﺍﻥ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﻛﻞ‬ ‫ﻓﻲ‬
)property(‫ﻟﻞ‬object
‫ﺍﻝ‬Object:‫ﻋﻠﻰ‬ ‫ﻭﺍﺣﺪﺓ‬ ‫ﻛﻞ‬ ‫ﺍﻟﺪﻭﺭﺍﻥ‬ ‫ﺃﺛﻨﺎء‬ ‫ﻣﻨﻪ‬ ‫ﺍﻟﻌﻨﺎﺻﺮ‬ ‫ﺃﺧﺬ‬ ‫ﻳﺘﻢ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺍﻟﻜﺎﺋﻦ‬
‫ﺣﺪﺓ‬_^*
‫ﺍﻟﻌﺮﺑﻴﺔ‬ ‫ﺍﻟﻠﻐﺔ‬ ‫ﻓﻲ‬ ‫ﻣﻼﺣﻈﺔ‬:“‫ﺣﺪﻯ‬“‫ﺃﻭ‬“‫ﺣﺪﺍ‬“‫ﻭﺍﻟﺼﺤﻴﺢ‬ ،‫ﺧﺎﻁﺌﺔ‬ ‫ﻛﺘﺎﺑﺔ‬ ‫ﻫﻲ‬
‫ﺍﻟﻤﺮﺑﻮﻁﺔ‬ ‫ﺑﺎﻟﺘﺎء‬ ‫ﻛﺘﺎﺑﻬﺎ‬“‫ﺣﺪﺓ‬“
‫ﻣﻌﺠﻢ‬ ‫ﻓﻲ‬ ‫ﺟﺎء‬)‫ﺍﻟﻠﻐﺔ‬ ‫ﻣﺘﻦ‬/‫ﻭﺣﺪ‬:(
»ً‫ﺓ‬َ‫ﺪ‬ِ‫ﻭﺣ‬ ً‫ﺍ‬‫ﺪ‬ْ‫ﺣ‬َ‫ﻭ‬ ُ‫ﺪ‬ِ‫ﺤ‬َ‫ﻳ‬ َ‫ﺪ‬َ‫ﺣ‬َ‫ﻭ‬:‫ﻩ‬َ‫ﺪ‬ْ‫ﺣ‬َ‫ﻭ‬ ‫ﺻﺎﺭ‬«.‫ﻓﻴﻪ‬ ‫ﻭﺟﺎء‬:
»ُ‫ﺓ‬َ‫ﺪ‬ِ‫ﺍﻟﺤ‬:‫ﺓ‬َ‫ﺪ‬ِ‫ﻌ‬‫ﻛﺎﻟ‬)‫ﺪﺭ‬ْ‫ﺼ‬َ‫ﻣ‬.(‫ﺗﻘﻮﻝ‬:ُ‫ﻩ‬َ‫ﺪ‬ْ‫ﺣ‬َ‫ﻭ‬ ً‫ﺍ‬‫ﻔﺮﺩ‬ْ‫ﻨ‬ُ‫ﻣ‬ ‫ﺃﻱ‬ ،ٍ‫ﺓ‬َ‫ﺪ‬ِ‫ﺣ‬ ‫ﻋﻠﻰ‬ ‫ﻪ‬َ‫ﻠ‬َ‫ﻌ‬َ‫ﺟ‬.‫ﻭﺗﻘﻮﻝ‬:‫ﻪ‬َ‫ﻠ‬َ‫ﻌ‬َ‫ﻓ‬
‫ﺫﺍﺕ‬ ‫ﻭﻣﻦ‬ ‫ﻪ‬ِ‫ﺴ‬ْ‫ﻔ‬َ‫ﻧ‬ ‫ﺫﺍﺕ‬ ‫ﻣﻦ‬ ‫ﺃﻱ‬ ،‫ﻪ‬ِ‫ﺗ‬َ‫ﺪ‬ِ‫ﺣ‬ ‫ﺫﻱ‬ ‫ﻭﻣﻦ‬ ‫ﻪ‬ِ‫ﺗ‬َ‫ﺪ‬ِ‫ﺣ‬ ‫ﺫﺍﺕ‬ ‫ﻭﻋﻠﻰ‬ ،ِ‫ﻪ‬ِ‫ﺗ‬َ‫ﺪ‬ِ‫ﺣ‬ ‫ﺫﺍﺕ‬ ‫ﻣﻦ‬
‫ﺭﺃﻳﻪ‬.‫ﻭﺗﻘﻮﻝ‬:‫ﱠ‬‫ﻦ‬ِ‫ﻬ‬ِ‫ﺗ‬َ‫ﺪ‬ِ‫ﺣ‬ ‫ﻭﻋﻠﻰ‬ ،‫ﻬﻢ‬ِ‫ﺗ‬َ‫ﺪ‬ِ‫ﺣ‬ ‫ﻭﻋﻠﻰ‬ ،‫ﻬﻤﺎ‬ِ‫ﺗ‬َ‫ﺪ‬ِ‫ﺣ‬ ‫ﻭﻋﻠﻰ‬ ،‫ﻪ‬ِ‫ﺗ‬َ‫ﺪ‬ِ‫ﺣ‬ ‫ﻋﻠﻰ‬ َ‫ﺲ‬َ‫ﻠ‬َ‫ﺟ‬.«

FOR OF LOOP
‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﺍﻟﺤﺪﻳﺚ‬ ‫ﻗﺒﻞ‬For Of‫ﻋﻠﻰ‬ ‫ﺃﻣﺜﻠﺔ‬ ‫ﻧﺸﺎﻫﺪ‬ ‫ﺩﻋﻮﻧﺎ‬For Loop‫ﻧﺴﺘﺨﺪﻣﻬﺎ‬
‫ﻣﺜﻞ‬For In‫ﺃﻭ‬For‫ﺃﻭ‬
For each‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:

FOR OF LOOP
،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺃﺳﺎﺳﻴﺎﺕ‬ ‫ﻣﻦ‬ ‫ﻓﺘﻠﻚ‬ ،‫ﺍﻟﺴﺎﺑﻖ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺮﺡ‬ ‫ﻋﻦ‬ ‫ﺃﺗﺤﺪﺙ‬ ‫ﻟﻦ‬ ،‫ﻭﺍﻵﻥ‬
‫ﺍﻝ‬ ‫ﺃﺟﻠﻬﺎ‬ ‫ﻣﻦ‬ ‫ﺟﺎﺋﺖ‬ ‫ﺍﻟﺘﻲ‬ ‫ﻭﺍﻟﻤﺸﻜﻠﺔ‬ ،‫ﺍﻷﺳﺎﻟﻴﺐ‬ ‫ﺗﻠﻚ‬ ‫ﺳﻠﺒﻴﺎﺕ‬ ‫ﻫﻮ‬ ‫ﺳﺄﺫﻛﺮﻩ‬ ‫ﻣﺎ‬ ‫ﻟﻜﻦ‬
For OF_^*
1(For In:
*‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﻤﻜﻨﻚ‬ ‫ﻻ‬break, continue
*‫ﺟﻤﻴﻊ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺎﻟﺪﻭﺭﺍﻥ‬ ‫ﺗﻘﻮﻡ‬“‫ﺍﻟﺨﺼﺎﺋﺺ‬“‫ﻟﻠﻌﺪ‬ ‫ﺍﻟﻘﺎﺑﻠﺔ‬)‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻻﺣﻆ‬
‫ﺍﻟﺴﺎﺑﻖ‬(
*‫ﻣﺎ‬ ‫ﻓﺈﻥ‬ ،‫ﺭﻗﻢ‬ ‫ﻛﺎﻥ‬ ‫ﻟﻮ‬ ‫ﻭﺣﺘﻰ‬ ،‫ﻧﺼﻲ‬ ‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺒﻴﺎﻧﺎﺕ‬ ‫ﺍﺭﺟﺎﻉ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻘﻮﻡ‬
‫ﻫﻮ‬ ‫ﺍﺭﺟﺎﻋﻪ‬ ‫ﻳﺘﻢ‬“1”‫ﺗﺼﺒﺢ‬ ‫ﺍﻟﺠﻤﻊ‬ ‫ﻭﻋﻨﺪ‬“1”+“2”=“3”‫ﻭﻫﺬﻩ‬
‫ﺳﻴﺌﺔ‬ ‫ﻋﻤﻠﻴﺔ‬
*،‫ﻣﺎ‬ ‫ﻟﺴﺒﺐ‬ ‫ﺍﻟﺘﻜﺮﺍﺭ‬ ‫ﻳﺰﻳﺪ‬ ‫ﻗﺪ‬ ‫ﺍﻟﻈﺮﻭﻑ‬ ‫ﺑﻌﺾ‬ ‫ﻓﻲ‬ ‫ﺃﻧﻬﺎ‬ ‫ﻣﺸﺎﻛﻠﻬﺎ‬ ‫ﺇﺣﺪﻯ‬ ‫ﻣﻦ‬
‫ﺍﻟﺨﺎﺹ‬ ‫ﺍﻟﺘﺮﺗﻴﺐ‬ ‫ﻳﻀﻤﻦ‬ ‫ﻣﺎ‬ ‫ﻳﻮﺟﺪ‬ ‫ﻻ‬ ‫ﺃﻧﻪ‬ ‫ﻛﻤﺎ‬ ،‫ﻛﺜﻴﺮﺓ‬ ‫ﻣﺸﺎﻛﻞ‬ ‫ﻳﺴﺒﺐ‬ ‫ﻭﻫﺬﺍ‬
‫ﺍﻟﻤﺼﻔﻮﻓﺔ‬ ‫ﺩﺍﺧﻞ‬ ‫ﺭﺗﺒﺖ‬ ‫ﻛﻤﺎ‬ ‫ﺗﻈﻬﺮ‬ ‫ﺃﻥ‬ ‫ﺑﺎﻟﻨﺘﺎﺋﺞ‬...

FOR OF LOOP
2(Foreach:
*‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﻤﻜﻦ‬ ‫ﻻ‬break, continue
*‫ﺍﻝ‬ ‫ﻣﻊ‬ ‫ﻓﻘﻂ‬ ‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻳﻤﻜﻦ‬Array Objects
3(Default For Loop:
*‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻤﺼﻔﻮﻓﺔ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﻋﺪﺩ‬ ‫ﺑﻤﻌﺮﻓﺔ‬ ‫ﻭﺗﻠﺰﻣﻨﻲ‬ ،‫ﻣﺎ‬ ‫ﻧﻮﻋﺎ‬ ‫ﻁﻮﻳﻠﺔ‬
‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﺃﻭ‬ ‫ﺭﻗﻢ‬length...
*‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﺍﻟﻰ‬ ‫ﻓﺴﺘﺤﺘﺎﺝ‬ ،‫ﺧﻼﻟﻬﺎ‬ ‫ﻣﻦ‬ ‫ﻣﺒﺎﺷﺮﺓ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﻮﺻﻮﻝ‬ ‫ﻳﻤﻜﻦ‬ ‫ﻻ‬
‫ﻭﺍﻝ‬ ‫ﺍﻟﻤﺼﻔﻮﻓﺔ‬index‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻠﺤﺼﻮﻝ‬ ‫ﻓﻴﻪ‬ ‫ﺍﻟﻤﺘﻮﺍﺟﺪ‬..
‫ﺍﻝ‬ ‫ﻓﻜﺮﺓ‬ ،‫ﺍﻵﻥ‬For Of‫ﻭﺭﺩﺕ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻤﺸﺎﻛﻞ‬ ‫ﻫﺬﻩ‬ ‫ﺑﺤﻞ‬ ‫ﻟﺘﻘﻮﻡ‬ ‫ﺃﺗﺖ‬_^*
‫ﻣﺜﺎﻻ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ،‫ﻭﻋﻠﻴﻬﺎ‬^ _^

FOR OF LOOP

FOR OF LOOP
‫ﻣﺜﺎﻝ‬2:‫ﺗﺤﺘﻮﻱ‬ ‫ﻣﺼﻔﻮﻓﺔ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺎﻟﺪﻭﺭﺍﻥ‬ ‫ﺳﻨﻘﻮﻡ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬object
‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻗﻴﻢ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﻮﺻﻮﻝ‬ ‫ﻳﻤﻜﻨﻨﻲ‬ ‫ﻭﻛﻴﻒ‬ ،‫ﺑﺪﺍﺧﻠﻬﺎ‬object‫ﺑﺴﻬﻮﻟﺔ‬^_^
‫ﻣﻼﺣﻈﺔ‬:‫ﺃﻥ‬ ‫ﺇﻧﺘﺒﻪ‬empInfo‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﺗﻌﺮﻳﻔﻬﺎ‬ ‫ﻳﺘﻢ‬ ‫ﻟﻢ‬ ‫ﺍﺫﺍ‬let‫ﺃﻭ‬var‫ﻗﺒﻞ‬
‫ﺧﻄﺄ‬ ‫ﻟﻚ‬ ‫ﺳﻴﻈﻬﺮ‬ ‫ﺍﻹﺳﺘﺨﺪﺍﻡ‬ ‫ﺃﺛﻨﺎء‬ ‫ﺃﻭ‬ ‫ﺍﻹﺳﺘﺨﺪﺍﻡ‬empInfo is not defined

“0O” LITERAL
‫ﺍﻝ‬0o‫ﺍﻟﺜﻤﺎﻧﻲ‬ ‫ﺍﻟﻨﻈﺎﻡ‬ ‫ﻣﻦ‬ ‫ﺍﻷﺭﻗﺎﻡ‬ ‫ﻟﺘﻌﺮﻑ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬ ‫ﺟﺪﻳﺪﺓ‬ ‫ﻁﺮﻳﻘﺔ‬ ‫ﻫﻲ‬
)octal(‫ﻣﻊ‬ ‫ﻟﻠﺘﻌﺎﻣﻞ‬ ‫ﻋﻤﻠﻬﻢ‬ ‫ﺍﻟﻤﺒﺮﻣﺠﻴﻦ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻴﺴﻬﻞ‬ ‫ﺟﺎء‬ ‫ﺍﻷﺳﻠﻮﺏ‬ ‫ﻭﻫﺬﺍ‬ ،
‫ﺍﻟﺜﻤﺎﻧﻲ‬ ‫ﺍﻟﻨﻈﺎﻡ‬.
‫ﺩﺍﺧﻠﻲ‬ ‫ﺑﺸﻜﻞ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺑﻪ‬ ‫ﻳﻘﻮﻡ‬ ‫ﻣﺎ‬ ‫ﺇﻥ‬)‫ﺗﺪﺧﻠﻨﺎ‬ ‫ﺩﻭﻥ‬(‫ﺍﻟﺜﻤﺎﻧﻲ‬ ‫ﺍﻟﻨﻈﺎﻡ‬ ‫ﺗﺤﻮﻳﻞ‬
‫ﺃﻧﻬﺎ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﺣﻔﻆ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬ ‫ﺍﻟﻌﺸﺮﻱ‬ ‫ﺍﻟﻨﻈﺎﻡ‬ ‫ﺍﻟﻰ‬binary.^_^.

"0b” LITERAL
0b‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﺘﻢ‬Literal‫ﻹﻧﺸﺎء‬)‫ﺭﻗﻢ‬(‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬binary
‫ﻣﺒﺎﺷﺮﺓ‬^_^‫ﺑﺎﻟﺸﻜﻞ‬ ‫ﺍﻷﺭﻗﺎﻡ‬ ‫ﺑﺘﻌﺮﻳﻒ‬ ‫ﺍﻟﻤﺒﺮﻣﺠﻴﻦ‬ ‫ﻳﻘﻮﻡ‬ ،‫ﺍﻹﻓﺘﺮﺍﺿﻴﺔ‬ ‫ﺍﻟﺤﺎﻟﺔ‬ ‫ﻓﻲ‬ ،
‫ﺍﻝ‬ ‫ﻳﻘﻮﻡ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬ ،‫ﺍﻟﻌﺸﺮﻱ‬js‫ﺍﻟﻰ‬ ‫ﺍﻟﺮﻗﻢ‬ ‫ﻫﺬﺍ‬ ‫ﺑﺘﺤﻮﻳﻞ‬binary‫ﻳﺘﻢ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬
‫ﻫﺬﺍ‬ ‫ﻟﻜﻦ‬ ،‫ﺍﻟﺬﺍﻛﺮﺓ‬ ‫ﻓﻲ‬ ‫ﺣﻔﻈﻪ‬Literal‫ﺍﻟﺮﻗﻢ‬ ‫ﺣﻔﻆ‬ ‫ﻣﻦ‬ ‫ﺳﻴﻤﻜﻨﻚ‬binary
‫ﻣﺒﺎﺷﺮﺓ‬^_^...

‫ﻛﺘﺎﺏ‬:100،‫ﺍﻹﺳﻼﻡ‬ ‫ﻋﻈﻤﺎء‬ ‫ﻣﻦ‬ ‫ﻋﻈﻴﻢ‬
‫ﺍﻟﺘﺎﺭﻳﺦ‬ ‫ﻣﺠﺮﻯ‬ ‫ﻏﻴﺮﻭ‬

YIELD KEYWORD & FUN *()
‫ﻣﻦ‬ ‫ﺍﻟﺴﺎﺩﺱ‬ ‫ﺍﻹﺻﺪﺍﺭ‬ ‫ﻓﻲ‬ECMAScript‫ﻟﻠﺠﺎﻓﺎ‬ ‫ﺟﺪﻳﺪﺓ‬ ‫ﻣﻴﺰﺓ‬ ‫ﺇﺩﺭﺍﺝ‬ ‫ﺗﻢ‬
‫ﺗﺴﻤﻰ‬ ،‫ﺳﻜﺮﺑﺖ‬JavaScript Generator‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻭﻳﺘﻜﻮﻥ‬ ،
Generator‫ﺍﻟﻤﺤﺠﻮﺯﺓ‬ ‫ﺍﻟﻜﻠﻤﺔ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬Yield‫ﺍﻝ‬ ‫ﻭﺍﺳﺘﺨﺪﺍﻡ‬
function*()‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬ ‫ﻓﻲ‬^_^
Yield keyword + functon * () syntax used => JS Generator
‫ﺍﻝ‬ ‫ﻳﻘﺪﻣﻬﺎ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻮﻅﻴﻔﺔ‬ ‫ﻓﺈﻥ‬ ،‫ﻭﺑﺎﺧﺘﺼﺎﺭ‬JS Generator‫ﺇﺿﺎﻓﺔ‬ ‫ﻫﻲ‬
‫ﻟﻞ‬ ‫ﺟﺪﻳﺪﺓ‬ ‫ﻁﺮﻳﻘﺔ‬function‫ﻻﺭﺟﺎﻉ‬)return(‫ﻗﻴﻢ‬ ‫ﻣﻦ‬ ‫ﻣﺠﻤﻮﻋﺔ‬
)Collection(‫ﺟﺪﻳﺪ‬ ‫ﺍﺳﻠﻮﺏ‬ ‫ﺑﺈﺿﺎﻓﺔ‬ ‫ﺗﻘﻮﻡ‬ ‫ﻛﻤﺎ‬ ،-‫ﻣﻨﻄﻘﻲ‬-‫ﺍﻟﺪﻭﺭﺍﻥ‬ ‫ﺟﻤﻠﺔ‬ ‫ﻓﻲ‬
‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﺍﺳﺘﺮﺟﺎﻋﻬﺎ‬ ‫ﺳﻴﺘﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻘﻴﻢ‬ ‫ﻻﺳﺘﻘﺒﺎﻝ‬Collection‫ﺑﺎﻝ‬ ‫ﺍﻟﻤﻮﺟﻮﺩﺓ‬
function* ()...

‫ﺍﻝ‬ ‫ﻫﺬﻩ‬ ‫ﻣﻤﻴﺰﺍﺕ‬ ‫ﺃﻫﻢ‬ ‫ﻣﻦ‬Generator‫ﺍﻟﺘﻮﻗﻒ‬ ‫ﺇﻣﻜﺎﻧﻴﺔ‬ ‫ﻫﻮ‬ ‫ﺍﻧﺸﺎﺋﻬﺎ‬ ‫ﺳﻴﺘﻢ‬ ‫ﺍﻟﺘﻲ‬
‫ﻣﻦ‬ ‫ﺍﻟﺨﺎﻣﺲ‬ ‫ﻟﻠﻌﻨﺼﺮ‬ ‫ﺃﺻﻞ‬ ‫ﺃﻥ‬ ‫ﻳﻤﻜﻨﻨﻲ‬ ‫ﻣﺜﻼ‬ ،‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻳﻤﻜﻦ‬ ‫ﺍﻟﺘﻲ‬ ‫ﻭﺍﻹﺳﺘﻤﺮﺍﺭ‬
‫ﺍﻝ‬Generator‫ﺍﻟﻌﻤﻠﻴﺔ‬ ‫ﺃﺗﺎﺑﻊ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬ ،‫ﺃﺧﺮﻯ‬ ‫ﺑﺮﻣﺠﻴﺔ‬ ‫ﺷﻴﻔﺮﺓ‬ ‫ﻟﺘﻨﻔﻴﺬ‬ ‫ﺃﺫﻫﺐ‬ ‫ﺛﻢ‬
‫ﺍﻟﻤﺮﻭﺭ‬ ‫ﺃﻭ‬ ‫ﻣﺜﻼ‬ ‫ﺍﻟﺪﻭﺭﺍﻥ‬ ‫ﺇﻋﺎﺩﺓ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﺤﺎﺟﺔ‬ ‫ﺩﻭﻥ‬ ‫ﻣﺒﺎﺷﺮﺓ‬ ‫ﺍﻟﺴﺎﺩﺱ‬ ‫ﺍﻟﻌﻨﺼﺮ‬ ‫ﺑﺄﺧﺬ‬
‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻫﺬﺍ‬ ‫ﻭﻳﺘﻢ‬ ،‫ﺍﻟﻘﻴﻢ‬ ‫ﺟﻤﻴﻊ‬ ‫ﻋﻠﻰ‬next()‫ﺍﻟﺸﺮﺍﺋﺢ‬ ‫ﻓﻲ‬ ‫ﺳﻨﺸﺎﻫﺪ‬ ‫ﻛﻤﺎ‬
‫ﺍﻟﻘﺎﺩﻣﺔ‬..‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻛﻤﺎ‬ ،Generator‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﺑﺎﺭﺟﺎﻉ‬ ‫ﺗﺘﻤﻴﺰ‬)value(‫ﻭ‬
)done(‫ﺍﻝ‬ ‫ﺗﻜﻮﻥ‬ ‫ﺑﺤﻴﺚ‬value‫ﺍﺭﺟﺎﻋﻬﺎ‬ ‫ﺍﻟﻤﺮﺍﺩ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﻫﻲ‬)‫ﻣﺎ‬ ‫ﺃﻱ‬ ‫ﻭﺗﻜﻮﻥ‬
‫ﺍﻝ‬ ‫ﻗﺒﻞ‬ ‫ﻣﻦ‬ ‫ﺍﺭﺟﺎﻋﻪ‬ ‫ﻳﻤﻜﻦ‬yield(‫ﻭﺍﻝ‬ ،done‫ﻳﻤﺜﻞ‬Boolean‫ﺍﻟﻰ‬ ‫ﻳﺸﻴﺮ‬
‫ﻟﻠﺪﺍﻟﺔ‬ ‫ﻻ‬ ‫ﺃﻡ‬ ‫ﺍﻹﺭﺟﺎﻉ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﺍﻧﺘﻬﺎء‬
‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻋﻠﻰ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﺃﻣﺜﻠﺔ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬^_^

‫ﺳﺎﺑﻘﺎ‬)‫ﺍﻝ‬ ‫ﻗﺒﻞ‬ES6:(‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﺍﺳﺘﻘﺒﺎﻝ‬ ‫ﻛﻴﻔﻴﺔ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺘﻘﻠﻴﺪﻱ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺷﺎﻫﺪ‬
‫ﺟﺪﺍ‬ ‫ﺑﺴﻴﻄﺔ‬ ‫ﻁﺮﻳﻘﺔ‬ ،‫ﺍﻟﻘﻴﻢ‬ ‫ﻣﻦ‬..‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﺍﻟﺸﺮﻳﺤﺔ‬ ‫ﺍﻟﻰ‬ ‫ﻟﻨﻨﺘﻘﻞ‬ ‫ﺍﻵﻥ‬_^*

‫ﺍﻝ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬ ‫ﻣﺜﺎﻝ‬JS Generator:
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺷﺎﻫﺪ‬
‫ﻟﻜﻞ‬ ‫ﺟﻴﺪﺍ‬ ‫ﻭﺍﻧﺘﺒﻪ‬
‫ﻣﻠﻮﻥ‬ ‫ﻫﻮ‬ ‫ﻣﺎ‬^_^
‫؟‬ ‫ﺍﻧﺘﻬﻴﺖ‬ ‫ﻫﻞ‬
‫ﺑﺘﻨﻔﻴﺬ‬ ‫ﻗﻤﺖ‬ ‫ﻫﻞ‬
‫؟‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬
‫ﺧﻄﺄ‬ ‫ﻟﻚ‬ ‫ﻅﻬﺮ‬ ‫ﻫﻞ‬
‫ﻓﻲ‬ ‫ﻣﻮﺟﻮﺩ‬ ‫ﻫﻮ‬ ‫ﻛﻤﺎ‬
‫؟‬ ‫ﺍﻟﺼﻮﺭﺓ‬ ‫ﺃﺳﻔﻞ‬

‫ﺍﻝ‬ ‫ﻗﺪﺭﺓ‬ ‫ﺑﻌﺪﻡ‬ ‫ﺗﺨﺒﺮﻙ‬ ‫ﻫﺬﻩ‬ ‫ﺍﻟﺨﻄﺄ‬ ‫ﺭﺳﺎﻟﺔ‬browsers.js‫ﺑﺎﺳﺘﺨﺪﺍﻣﻪ‬ ‫ﻗﻤﻨﺎ‬ ‫ﺍﻟﺬﻱ‬
‫ﺍﻝ‬ ‫ﺗﺤﻤﻴﻞ‬ ‫ﺑﻌﺪ‬babel compiler‫ﺍﻝ‬ ‫ﺗﻨﻔﻴﺬ‬ ‫ﻋﻠﻰ‬Generator‫ﺍﻝ‬ ‫ﺃﺛﻨﺎء‬
Runtime...‫؟‬ ‫ﺍﻟﺤﻞ‬ ‫ﻣﺎ‬ ‫ﺍﺫﺍ‬
‫ﺍﻝ‬ ‫ﺗﻀﻤﻴﻦ‬ ‫ﺃﻭ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬ ‫ﻫﻮ‬ ‫ﺍﻟﺤﻞ‬browser-polyfill.js‫ﺑﺎﻝ‬ ‫ﺃﻳﻀﺎ‬ ‫ﺍﻟﺨﺎﺹ‬
Babel_^*‫ﺍﻝ‬ ‫ﺗﻀﻤﻴﻦ‬ ‫ﻋﻠﻰ‬ ‫ﻫﺬﺍ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻣﻠﻒ‬ ‫ﻭﻳﻘﻮﻡ‬ ،runtime
‫ﻭﺍﻝ‬core js‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﺃﻱ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﺣﺎﻝ‬ ‫ﻓﻲ‬ ‫ﺗﻠﻘﺎﺋﻲ‬ ‫ﺑﺸﻜﻞ‬Babel node‫ﺃﻭ‬
Babel register‫ﺗﻀﻤﻴﻨﻪ‬ ‫ﻳﺘﻢ‬ ‫ﺃﻥ‬ ‫ﻳﺠﺐ‬ ‫ﺍﻟﻤﻠﻒ‬ ‫ﻫﺬﺍ‬ ‫ﺃﻥ‬ ‫ﻭﺍﻧﺘﺒﻪ‬ ،“‫ﺃﻱ‬ ‫ﻗﺒﻞ‬
‫ﺏ‬ ‫ﺧﺎﺻﺔ‬ ‫ﺑﺮﻣﺠﻴﺔ‬ ‫ﺷﻴﻔﺮﺓ‬Babel...”
This needs to be included before all your compiled Babel code.
)‫ﺍﻝ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬ ‫ﻗﻤﺖ‬ ‫ﺣﺎﻟﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﻠﻒ‬ ‫ﻫﺬﺍ‬ ‫ﺍﺳﺘﺪﻋﺎء‬ ‫ﻋﻦ‬ ‫ﺍﻹﺳﺘﻐﻨﺎء‬ ‫ﻳﻤﻜﻨﻚ‬ ‫ﻁﺒﻌﺎ‬babel‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬
babel/polyfill

‫ﺍﻟﻜﺎﻣﻞ‬ ‫ﺑﺸﻜﻠﻪ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬:

‫ﻣﺜﺎﻝ‬2:‫ﺍﻝ‬ ‫ﺩﻭﺭ‬ ‫ﻫﻨﺎ‬ ‫ﻻﺣﻆ‬next^_^..‫ﻗﻤﺖ‬ ‫ﻟﻤﺎﺫﺍ‬ ،‫ﻫﺬﺍ‬ ‫ﻗﺒﻞ‬ ‫ﻻﺣﻆ‬ ‫ﻭﻟﻜﻦ‬
‫ﺑﺘﺨﺰﻳﻦ‬collection_name()‫؟‬ ‫ﻣﺘﻐﻴﺮ‬ ‫ﺩﺍﺧﻞ‬!

‫ﺍﻝ‬ ‫ﺑﺘﺨﺰﻳﻦ‬ ‫ﻧﻘﻢ‬ ‫ﻟﻢ‬ ‫ﻟﻮ‬ ،‫ﺍﻟﺴﺎﺑﻖ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻓﻲ‬collection_name()‫ﺩﺍﺧﻞ‬
‫ﻗﻴﻤﺔ‬ ‫ﺃﻭ‬ ‫ﺩﺍﺋﻤﺎ‬ ‫ﺳﻴﻜﻮﻥ‬ ‫ﺍﻟﻨﺎﺗﺞ‬ ‫ﻓﺈﻥ‬ ،‫ﻣﺘﻐﻴﺮ‬Yield....

‫ﻣﺜﺎﻝ‬3:‫ﺍﻝ‬ ‫ﺑﺎﺳﺘﺪﻋﺎء‬ ‫ﻗﻤﺖ‬ ‫ﻫﻨﺎ‬value‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﻣﺒﺎﺷﺮﺓ‬console‫ﺃﻧﻨﻲ‬ ‫ﻛﻤﺎ‬ ،
‫ﺍﻝ‬ ‫ﺃﺣﺪ‬ ‫ﺩﺍﺧﻞ‬ ‫ﻣﺼﻔﻮﻓﺔ‬ ‫ﺑﺤﻔﻆ‬ ‫ﻗﻤﺖ‬yield‫ﺍﺳﺘﺪﻋﺎﺋﻬﺎ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬ ،..

‫ﻣﺜﺎﻝ‬4:‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﻣﺖ‬ ‫ﺃﻧﻨﻲ‬ ‫ﻻﺣﻆ‬ ،‫ﺍﻟﺠﻤﻴﻞ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬yield‫ﻭﻛﺄﻧﻬﺎ‬
return‫ﻭﺃﻧﻮﺍﻋﻬﺎ‬ ‫ﺍﻟﺒﻴﺎﻧﺎﺕ‬ ‫ﻣﺨﺘﻠﻒ‬ ‫ﺍﺭﺟﺎﻉ‬ ‫ﺍﺳﺘﻄﻌﺖ‬ ‫ﻭﺑﻬﺬﺍ‬ ،)data type(
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬yield...

‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻫﺬﻩ‬ ‫ﻓﻲ‬ ‫ﺃﺧﺮﻯ‬ ‫ﺟﺰﺋﻴﺔ‬ ‫ﺍﻟﻰ‬ ‫ﻧﻨﺘﻘﻞ‬ ،‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬ ‫ﻭﺑﻌﺪ‬ ،‫ﻭﺍﻵﻥ‬
‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﺟﻤﻴﻊ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ،‫ﺍﻟﺠﺪﻳﺪ‬ ‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻹﻧﺘﻘﺎﻝ‬ ‫ﻭﻗﺒﻞ‬ ‫ﻟﻜﻦ‬ ،‫ﺍﻟﻤﺘﻮﺍﺿﻌﺔ‬
‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬ ‫ﺑﻌﺮﺿﻬﺎ‬ ‫ﻗﻤﻨﺎ‬ ‫ﺍﻟﺘﻲ‬)..‫ﺍﻟﻤﻬﻢ‬ ‫ﻫﻮ‬ ‫ﺍﻟﺘﻄﺒﻴﻖ‬ ‫ﺃﻥ‬ ‫ﺗﻨﺴﻰ‬ ‫ﻭﻻ‬(

‫ﺍﻟﺮﺟﻴﻢ‬ ‫ﺍﻟﺸﻴﻄﺎﻥ‬ ‫ﻣﻦ‬ ‫ﻮﺫ ﺑﺎہﻠﻟ‬
َ ‫ﱠ‬‫ﷲ‬ ‫ﱠ‬‫ﻥ‬ِ‫ﺇ‬ َ ‫ﱠ‬‫ﷲ‬ ‫ﻮﺍ‬ُ‫ﻘ‬‫ﱠ‬‫ﺗ‬‫ﺍ‬َ‫ﻭ‬ ٍ‫ﺪ‬َ‫ﻐ‬ِ‫ﻟ‬ ْ‫ﺖ‬َ‫ﻣ‬‫ﱠ‬‫ﺪ‬َ‫ﻗ‬ ‫ﺎ‬‫ﱠ‬‫ﻣ‬ ٌ‫ﺲ‬ْ‫ﻔ‬َ‫ﻧ‬ ْ‫ﺮ‬ُ‫ﻈ‬‫ﻨ‬َ‫ﺘ‬ْ‫ﻟ‬َ‫ﻭ‬ َ ‫ﱠ‬‫ﷲ‬ ‫ﻮﺍ‬ُ‫ﻘ‬‫ﱠ‬‫ﺗ‬‫ﺍ‬ ‫ﻮﺍ‬ُ‫ﻨ‬َ‫ﻣ‬‫ﺁ‬ َ‫ﻳﻦ‬ِ‫ﺬ‬‫ﱠ‬‫ﺍﻟ‬ ‫ﺎ‬َ‫ﻬ‬‫ﱡ‬‫ﻳ‬َ‫ﺃ‬ ‫ﺎ‬َ‫ﻳ‬
َ‫ﻮﻥ‬ُ‫ﻠ‬َ‫ﻤ‬ْ‫ﻌ‬َ‫ﺗ‬ ‫ﺎ‬َ‫ﻤ‬ِ‫ﺑ‬ ٌ‫ﺮ‬‫ﻴ‬ِ‫ﺒ‬َ‫ﺧ‬
‫ﺍﻟﻌﻈﻴﻢ‬ ‫ﷲ‬ ‫ﺻﺪﻕ‬
‫ﺍﻟﺤﺸﺮ‬ ‫ﺳﻮﺭﺓ‬–‫ﺍﻵﻳﺔ‬:18

SET OBJECT
‫ﻫﻨﺎﻙ‬ ‫ﻳﻜﻦ‬ ‫ﻟﻢ‬ ،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻣﻦ‬ ‫ﺍﻟﺨﺎﻣﺲ‬ ‫ﻟﻺﺻﺪﺍﺭ‬ ‫ﻭﺻﻮﻻ‬collection
‫ﺍﻝ‬ ‫ﺳﻮﻯ‬Array‫ﺑﺘﻌﺮﻳﻒ‬ ‫ﺭﻏﺒﻨﺎ‬ ‫ﺍﺫﺍ‬ ‫ﻭﻛﻨﺎ‬ ،index‫ﺍﻝ‬ ‫ﻧﺴﺘﺨﺪﻡ‬ ‫ﺭﻗﻤﻲ‬ ‫ﻏﻴﺮ‬
object‫ﺍﻝ‬ ‫ﻓﻈﻬﺮﻣﻔﻬﻮﻡ‬ ،‫ﺍﻟﻴﻮﻡ‬ ‫ﺑﻌﺪ‬ ‫ﻳﻜﻔﻲ‬ ‫ﻳﻌﺪ‬ ‫ﻟﻢ‬ ‫ﺍﻷﻣﺮ‬ ‫ﻫﺬﺍ‬ ‫ﻟﻜﻦ‬ ،“SET”
‫ﻟﻺﺻﺪﺍﺭ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺑﺎﻟﺠﺎﻓﺎ‬6)‫ﺍﻟﻤﻬﺎﻡ‬ ‫ﻟﺘﺤﻘﻴﻖ‬ ‫ﺃﺩﺍء‬ ‫ﻭﺃﻓﻀﻞ‬ ‫ﺍﺣﺘﺮﺍﻓﻴﺔ‬ ‫ﺃﻛﺜﺮ‬ ‫ﺍﻟﻬﺪﻑ‬(
‫ﺍﻝ‬ ‫ﻁﺒﻌﺎ‬SET‫ﻣﻌﺮﻭﻓﺔ‬ ‫ﻓﻬﻲ‬ ،‫ﺍﻟﺒﺮﻣﺠﺔ‬ ‫ﻟﻐﺎﺕ‬ ‫ﻋﻠﻰ‬ ‫ﺟﺪﻳﺪﺍ‬ ‫ﻣﻔﻬﻮﻣﺎ‬ ‫ﻟﻴﺴﺖ‬
‫ﺍﻝ‬ ‫ﻟﻤﺒﺮﻣﺠﻴﻦ‬python‫ﻭﺍﻟﺠﺎﻓﺎ‬..‫ﺍﻝ‬ ‫ﺗﻌﺮﻳﻒ‬ ‫ﺃﻣﺎ‬ ،‫ﺍﻟﺦ‬SET‫ﻓﻬﻮ‬:
‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻘﻴﻢ‬ ‫ﻣﻦ‬ ‫ﻣﺮﺗﺒﺔ‬ ‫ﻗﺎﺋﻤﺔ‬،‫ﺗﻜﺮﺍﺭﻫﺎ‬ ‫ﻳﻤﻜﻦ‬ ‫ﻻ‬‫ﺍﻟﻘﻴﻢ‬ ‫ﻫﺬﻩ‬ ‫ﻛﺎﻧﺖ‬ ‫ﺳﻮﺍء‬
primitive‫ﺃﻭ‬object...^_^.

SET OBJECT
‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﺍﻟﺒﺴﻴﻄﺔ‬ ‫ﺍﻟﺼﻴﻐﺔ‬ ‫ﻳﻮﺿﺢ‬ ‫ﻣﺜﺎﻻ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬Set‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﻭﺍﻟﺘﻲ‬
‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬^_^:
‫ﺃﻥ‬ ‫ﺍﻟﺒﺴﻴﻂ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬ ‫ﻻﺣﻆ‬
‫ﺍﻝ‬Set()‫ﺍﻝ‬ ‫ﺣﺮﻑ‬ ‫ﻓﻴﻬﺎ‬ ‫ﻳﻜﺘﺐ‬
S Capital...
‫ﺍﻝ‬ ‫ﺃﻣﺎ‬add:‫ﻟﻠﻤﺼﻔﻮﻓﺔ‬ ‫ﺟﺪﻳﺪﺓ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﻋﻦ‬ ‫ﺍﻟﻤﺴﺆﻭﻟﺔ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻓﻬﻲ‬.
‫ﺍﻝ‬size:‫ﺍﻝ‬ ‫ﺣﺠﻢ‬ ‫ﺗﺤﺪﻳﺪ‬ ‫ﻋﻦ‬ ‫ﺍﻟﻤﺴﺆﻭﻟﺔ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﻲ‬Set_^*
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺑﺘﻨﻔﻴﺬ‬ ‫ﻗﻢ‬..‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﻟﻠﺸﺮﻳﺤﺔ‬ ‫ﺍﻧﺘﻘﻞ‬ ‫ﺛﻢ‬..

SET OBJECT
‫ﻟﻠﺮﻗﻢ‬ ‫ﺍﻹﺿﺎﻓﺔ‬ ‫ﻋﻤﻠﻴﺔ‬ ،‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﻬﻤﺔ‬ ‫ﺍﻟﻔﻜﺮﺓ‬ ‫ﻻﺣﻆ‬24‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﻛﺎﻧﺖ‬
‫ﻧﺼﻲ‬ ‫ﺷﻜﻞ‬ ‫ﻭﻋﻠﻰ‬ ،‫ﻭﺍﻟﺜﺎﻧﻲ‬ ‫ﺍﻷﻭﻝ‬ ‫ﻓﻲ‬ ‫ﺭﻗﻤﻲ‬“24”‫ﻟﻜﻦ‬ ،‫ﺍﻟﺜﺎﻟﺚ‬ ‫ﺍﻟﺴﻄﺮ‬ ‫ﻓﻲ‬
‫ﺍﻝ‬ ‫ﻟﺤﺠﻢ‬ ‫ﺍﻟﻨﻬﺎﺋﻴﺔ‬ ‫ﺍﻟﻨﺘﻴﺠﺔ‬Set‫ﺳﻴﻜﻮﻥ‬3‫؟‬!‫؟‬ ‫ﺑﺮﺃﻳﻚ‬ ‫ﻟﻤﺎﺫﺍ‬
‫ﺍﻝ‬ ‫ﺑﺄﻥ‬ ‫ﻳﻜﻤﻦ‬ ‫ﺍﻟﺠﻮﺍﺏ‬Set‫ﻳﺘﻢ‬ ‫ﺍﻟﺘﻜﺮﺍﺭ‬ ‫ﻓﺈﻥ‬ ‫ﻭﻟﺬﻟﻚ‬ ،‫ﺫﻛﺮﻧﺎ‬ ‫ﻛﻤﺎ‬ ‫ﺍﻟﺘﻜﺮﺍﺭ‬ ‫ﺗﻤﻨﻊ‬
‫ﻗﻴﻤﺔ‬ ‫ﺑﻴﻦ‬ ‫ﻣﻴﺰ‬ ‫ﺍﻟﻮﻗﺖ‬ ‫ﺑﺬﺍﺕ‬ ‫ﻟﻜﻨﻪ‬ ،‫ﺗﺠﺎﻫﻠﻪ‬24‫ﻭﺍﻝ‬ ‫ﺍﻟﺮﻗﻤﻴﺔ‬24‫ﺍﻟﻨﺼﻴﺔ‬^_^
‫ﺍﻟﺸﻜﻞ‬ ‫ﻳﺼﺒﺢ‬ ‫ﻭﺑﻬﺬﺍ‬ ،‫ﻓﻘﻂ‬ ‫ﺍﺩﺧﻠﺖ‬ ‫ﻗﻴﻤﺔ‬ ‫ﺃﻭﻝ‬ ‫ﺍﻋﺘﻤﺎﺩ‬ ‫ﻭﻳﺘﻢ‬24-”24”-”anees”

SET OBJECT
‫ﻣﺜﺎﻝ‬2:‫ﻟﻞ‬ ‫ﺍﺑﺘﺪﺍﺋﻴﺔ‬ ‫ﻗﻴﻤﺔ‬ ‫ﺗﻌﺮﻳﻒ‬ ‫ﻳﻤﻜﻨﻨﺎ‬Set‫ﺩﻭﻥ‬ ‫ﻣﺒﺎﺷﺮﺓ‬ ‫ﺑﺎﻧﺸﺎﺋﻬﺎ‬ ‫ﻧﺮﻏﺐ‬ ‫ﺍﻟﺘﻲ‬
‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬add()‫ﻣﺼﻔﻮﻓﺔ‬ ‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻘﻴﻢ‬ ‫ﺍﺭﺳﺎﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﺫﻟﻚ‬ ‫ﻭﻳﻜﻮﻥ‬ ،
‫ﺍﻟﻰ‬constructor^_^..‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻟﻨﺸﺎﻫﺪ‬:
،‫ﺗﻠﻘﺎﺋﻲ‬ ‫ﺑﺸﻜﻞ‬ ‫ﺗﺘﻢ‬ ‫ﺍﻟﺘﻜﺮﺍﺭ‬ ‫ﺗﺠﺎﻫﻞ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﺃﻥ‬ ‫ﻫﻨﺎ‬ ‫ﻻﺣﻆ‬)‫ﺍﻟﻤﻘﺎﺭﻧﺔ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﺑﺎﻟﻤﻨﺎﺳﺒﺔ‬
‫ﺍﻟﺘﺎﻟﻲ‬ ‫ﺑﺎﻟﺸﻜﻞ‬ ‫ﺗﺘﻢ‬( ===‫ﺗﻜﻮﻥ‬ ‫ﺃﻥ‬ ‫ﻳﻤﻜﻦ‬ ‫ﺍﺭﺳﺎﻟﻬﺎ‬ ‫ﺗﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻘﻴﻢ‬ ‫ﺃﻥ‬ ‫ﻛﻢ‬ ،obj‫ﺃﻭ‬
‫ﻋﺎﺩﻱ‬ ‫ﺭﻗﻢ‬ ‫ﺃﻭ‬ ‫ﻣﺼﻔﻮﻓﺔ‬..‫ﺍﻟﺦ‬

SET OBJECT
‫ﺗﺪﻋﻰ‬ ‫ﺟﺪﻳﺪﺓ‬ ‫ﻟﺪﺍﻟﺔ‬ ‫ﺗﻄﺮﻗﻨﺎ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬has‫ﻣﻦ‬ ‫ﺍﻟﺘﺄﻛﺪ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻘﻮﻡ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﺬﻩ‬ ،
‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﻣﻮﺟﻮﺩﺓ‬ ‫ﻣﺎ‬ ‫ﻗﻴﻤﺔ‬ ‫ﺃﻥ‬set‫ﺑﺎﺭﺟﺎﻉ‬ ‫ﺫﻟﻚ‬ ‫ﻋﻠﻰ‬ ‫ﺑﻨﺎﺋﺎ‬ ‫ﻭﺗﻘﻮﻡ‬ ،‫ﻻ‬ ‫ﺃﻡ‬
True or False^_^

SET OBJECT
‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﺗﺴﺘﺨﺪﻡ‬delete‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﻣﻮﺟﻮﺩ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻟﺤﺬﻑ‬set‫ﺍﻟﻨﺘﺎﺋﺞ‬ ‫ﻫﻨﺎ‬ ‫ﺷﺎﻫﺪ‬ ،
‫ﺍﻟﺤﺬﻑ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﺑﻌﺪ‬ ‫ﺗﻐﻴﺮﺕ‬ ‫ﻛﻴﻒ‬...

SET OBJECT
‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬ ‫ﻗﻤﻨﺎ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬clear()‫ﺟﻤﻴﻊ‬ ‫ﺣﺬﻑ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻘﻮﻡ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﺬﻩ‬ ،
‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﺍﻟﻤﻮﺟﻮﺩﺓ‬ ‫ﺍﻟﻘﻴﻢ‬Set..

SET OBJECT
‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﺍﻟﻤﻮﺟﻮﺩﺓ‬ ‫ﺍﻟﻌﻨﺎﺻﺮ‬ ‫ﻁﺒﺎﻋﺔ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﻛﻴﻒ‬ ،‫ﻭﺍﻵﻥ‬Set‫؟‬
‫ﺍﻟﺠﻮﺍﺏ‬:‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬For of‫ﺳﺎﺑﻘﺎ‬ ‫ﺗﻌﻠﻤﻨﺎﻫﺎ‬ ‫ﺍﻟﺘﻲ‬^_^
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻟﻨﺸﺎﻫﺪ‬6:
‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﺍﻟﻰ‬ ‫ﺗﺪﻋﻮﻧﺎ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻨﻘﺎﻁ‬ ‫ﺃﻫﻢ‬ ‫ﻣﻦ‬Set‫ﺃﻱ‬ ‫ﻭﺟﻮﺩ‬ ‫ﻋﺪﻡ‬ ‫ﻧﻀﻤﻦ‬ ‫ﺍﻧﻨﺎ‬
‫ﻳﺒﻘﻰ‬ ‫ﻭﺍﻟﺮﻗﻤﻲ‬ ،‫ﻧﺼﻲ‬ ‫ﻳﺒﻘﻰ‬ ‫ﻓﺎﻟﻨﺼﻲ‬ ،‫ﺍﺭﺳﺎﻟﻬﺎ‬ ‫ﻳﺘﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﺒﻴﺎﻧﺎﺕ‬ ‫ﻧﻮﻉ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻌﺪﻳﻞ‬
‫ﻣﺼﻔﻮﻓﺔ‬ ‫ﺗﺒﻘﻰ‬ ‫ﻭﺍﻟﻤﺼﻔﻮﻓﺔ‬ ،‫ﺭﻗﻤﻴﺎ‬...‫ﺍﻟﺦ‬

Ecmascript 6 (ES6) جافا سكربت (6)

Ecmascript 6 (ES6) جافا سكربت (6)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

More from anees abu-hmaid

More from anees abu-hmaid (20)

Ecmascript 6 (ES6) جافا سكربت (6)