Weitere ähnliche Inhalte Mehr von anees abu-hmaid (19) Js dom & JS bom1. ﺓﺭﻭﺩJS DOM & JS BOM
ﺗﻘﺪﻳﻢ:ﺣﻤﻴﺪ ﺃﺑﻮ ﺃﻧﻴﺲ ﺣﻜﻤﺖ ﺃﻧﻴﺲ.
ﺍﻹﻟﻜﺘﺮﻭﻧﻲ ﺍﻟﺒﺮﻳﺪ:nees.com2aneeshikmat@
ﺍﻹﻟﻜﺘﺮﻭﻧﻲ ﺍﻟﻤﻮﻗﻊ:www.2nees.com
ﺍﻟﺭﺣﻳﻡ ﺍﻟﺭﺣﻣﻥ ﷲ ﺑﺳﻡ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
4. ﺍﻟﻣﻘﺩﻣﺔ
،ﺍﻟﺸﺎﻛﺮﻳﻦ ﺣﻤﺪ ﺃﺣﻤﺪﻩ ،ﻳﻌﻠﻢ ﻟﻢ ﻣﺎ ﺍﻹﻧﺴﺎﻥ ﻋﻠﻢ ،ﺑﺎﻟﻘﻠﻢ ﻋﻠﻢ ﺍﻟﺬﻱ ﺤﻤﺪ ہﻠﻟ
ﺁﻟﻪ ﻭﻋﻠﻰ ،ﺍﻟﺨﻴﺮ ﺍﻟﻨﺎﺱ ﻣﻌﻠﻢ ﻋﻠﻰ ﻭﺍﻟﺴﻼﻡ ﻭﺍﻟﺼﻼﺓ ،ﺃﻫﻠﻪ ﻫﻮ ﺑﻤﺎ ﻋﻠﻴﻪ ﻭﺃﺛﻨﻲ
ﺍﻟﺪﻳﻦ ﻳﻮﻡ ﺇﻟﻰ ﺃﺛﺮﻩ ﻭﺍﻗﺘﻔﻰ ﺑﺪﻋﻮﺗﻪ ﺩﻋﺎ ﻣﻦ ﻭﻛﻞ ،ﻭﺻﺤﺒﻪ.
ﻣﻦ ﺍﻟﻌﺒﺪ ﺑﻬﺎ ﻳﺘﻘﺮﺏ ﺍﻟﺘﻲ ﺍﻟﻘﺮﺑﺎﺕ ﺃﻓﻀﻞ ﻣﻦ ﻭﻧﺸﺮﻩ ﺍﻟﻌﻠﻢ ﻁﻠﺐ ﻓﺈﻥ ﺑﻌﺪ ﺃﻣﺎ
ﷲ ﻋﻨﺪ ﻗﺪﺭﻩ ﻭﺗﺮﻓﻊ ،ﺍﻟﻤﺴﻠﻢ ﻣﻨﺰﻟﺔ ﺗﻌﻠﻲ ﺍﻟﺘﻲ ﺍﻟﻄﺎﻋﺎﺕ ﺃﺑﺮﺯ ﻭﻣﻦ ،ﺭﺑﻪ
ﻣﻦ ﻭﺣﺬﺭﻫﻢ ،ﻭﺍﻟﺘﺪﺑﺮ ﻭﺍﻟﺘﻔﻜﺮ ،ﻭﺍﻟﺘﻌﻠﻢ ﺑﺎﻟﻌﻠﻢ ﻋﺒﺎﺩﻩ ﷲ ﺃﻣﺮ ﻭﻟﻘﺪ ،ﺗﻌﺎﻟﻰ
ﺍﻟﻌﻠﻢ ﻫﻮ ﺍﻟﻘﻴﺎﻣﺔ ﻳﻮﻡ ﺻﺎﺣﺒﻪ ﻳﻨﻔﻊ ﺍﻟﺬﻱ ﺍﻟﻌﻠﻢ ﺃﻥ ﻭﺑﻴﻦ ،ﺍﻟﻬﻮﻯ ﻭﺍﺗﺒﺎﻉ ﺍﻟﺠﻬﻞ
ﺑﺄﺩﺏ ﻓﻴﻪ ﻭﻳﺘﺄﺩﺏ ،ﺭﺿﺎﻩ ﻧﻴﻞ ﻓﻴﻪ ﻭﻳﺒﺘﻐﻲ ،ﻟﻤﻮﻻﻩ ﺍﻟﻌﺒﺪ ﻓﻴﻪ ﻳﺨﻠﺺ ﺍﻟﺬﻱ
ﺧﻠﻘﻪ ﻛﺎﻥ ﺍﻟﺬﻱ ،ﻭﺳﻠﻢ ﻋﻠﻴﻪ ﷲ ﺻﻞ ،ﺍﻷﻧﺎﻡ ﺳﻴﺪ ﺑﺄﺧﻼﻕ ﻭﻳﺘﺨﻠﻖ ،ﺍﻹﺳﻼﻡ
ﺍﻟﻌﺎﻟﻤﻴﻦ ﺭﺏ ﻘﺮﺁﻥ، ﻭﺍﻟﺤﻤﺪ ہﻠﻟ.
ﺍﻟﺠﻤﻴﻞ ﺍﻟﻜﻼﻡ ﻫﺬﺍ“ﻣﻨﻘﻮﻝ“
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
5. ﺍﻟﻣﻘﺩﻣﺔ
ﺗﻌﻠﻢ ﻣﺸﻮﺍﺭ ﻓﻲ ﺑﺪﺃﻧﺎﻩ ﻣﺎ ﺳﻨﻜﻤﻞ ،ﺍﻟﻤﺘﻮﺍﺿﻌﺔ ﺍﻟﺪﻭﺭﺓ ﻫﺬﻩ ﻓﻲ ،ﷲ ﻓﻲ ﺃﺣﺒﺘﻲ
ﻭﺇﺗﻘﺎﻥ“ﺳﻜﺮﺑﺖ ﺍﻟﺠﺎﻓﺎ“ﺇﺛﻨﻴﻦ ﺟﺰﺋﻴﻦ ﻓﻲ ﺍﻟﺪﻭﺭﺓ ﻫﺬﻩ ﻣﻮﺿﻮﻉ ﻭﺳﻴﻜﻮﻥ ،
ﻭﻫﻤﺎ:
(1JavaScript DOM
(2JavaScript BOM
ﺧﻴﺮ ﻛﻞ ﺍﻟﻰ ﺍﻷﻋﻤﺎﻝ ﻛﻞ ﻭﻓﻲ ،ﺍﻟﻌﻤﻞ ﻫﺬﺍ ﻓﻲ ﻭﺇﻳﺎﻛﻢ ﻳﻮﻓﻘﻨﺎ ﺃﻥ ،ﺗﻌﺎﻟﻰ ﷲ ﻧﺴﺄﻝ.
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
6. ﺍﻟﺩﻭﺭﺓ ﻣﺗﻁﻠﺑﺎﺕ
،ﺍﻟﺘﻌﻠﻢ ﻓﻲ ﺍﻹﺳﺘﻤﺮﺍﺭﻳﺔ ﻟﻀﻤﺎﻥ ﺍﻟﻤﺘﻄﻠﺒﺎﺕ ﻣﻦ ﻭﻣﺠﻤﻮﻋﺔ ﻣﻨﻬﺎﺝ ﺩﻭﺭﺓ ﻟﻜﻞ
،ﺍﻟﺼﺤﻴﺢ ﺑﺎﻟﺸﻜﻞ ﻭﺍﻟﺘﻄﺒﻴﻖ ﻟﻠﻔﻬﻢ ﺍﻟﻘﺎﺑﻠﺔ ﺍﻟﻤﻌﻠﻮﻣﺔ ﻣﻦ ﻗﺪﺭ ﺃﻛﺒﺮ ﻭﺗﺤﺼﻴﻞ
ﻫﻲ ﺍﻟﺪﻭﺭﺓ ﻣﺘﻄﻠﺒﺎﺕ ﺳﺘﻜﻮﻥ ﻭﻫﻨﺎ:
(1HTML
(2CSS
(3JS)ﻭﺍﻝ ﻭﺍﻟﻤﺼﻔﻮﻓﺎﺕ ﻭﺍﻟﻤﺘﻐﻴﺮﺍﺕ ﺍﻷﻧﻮﺍﻉ ﻣﻌﺮﻓﺔfunction..ﺍﻟﺦ(
(4ﻣﺜﻞ ﻧﺼﻮﺹ ﻣﺤﺮﺭnotepad++ﺇﻧﺘﺮﻧﺖ ﻭﻣﺘﺼﻔﺢ:P.
ﺳﻜﺮﺑﺖ ﺑﺎﻟﺠﺎﻓﺎ ﺍﻟﺨﺎﺻﺔ ﺍﻟﺪﻭﺭﺓ ﺗﺤﻤﻴﻞ ﻳﻤﻜﻨﻚ)ﺍﻟﺴﺎﺑﻖ ﺍﻟﻤﺘﻄﻠﺐ(ﻫﻨﺎ ﻣﻦ^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
7. JAVASCRIPT DOM
(DOCUMENT OBJECT MODEL)
1
ﻣﻼﺣﻈﺔ:ﻋﻦ ﺃﺗﺤﺪﺙ ﻋﻨﺪﻣﺎJS DOMﻣﻦ ﺃﺧﺘﺼﺮﻫﺎ ﻓﺄﻧﺎJS HTML DOM
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
9. ﺍﻝ ﺗﻌﺭﻳﻑDOM
ﺍﻟﺴﺎﺑﻘﺔ ﺍﻟﺼﻮﺭﺓ ﻋﻠﻰ ﺑﻨﺎﺋﺎ ﻋﻠﻤﻲ ﺑﺸﻜﻞ ﺍﻟﻤﻮﺿﻮﻉ ﺑﺘﺤﻠﻴﻞ ﻟﻨﺒﺪﺃ ،ﻭﺍﻵﻥ^^
ﺍﻝ ﺃﻭﻻDOMﻛﻠﻤﺎﺕ ﻟﺜﻼﺙ ﺇﺧﺘﺼﺎﺭ ﻫﻲDocument Object Model
ﺍﻟﻮﻳﺐ ﻣﻌﺎﻳﻴﺮ ﻻﻋﺘﻤﺎﺩ ﺍﻟﻌﺎﻟﻤﻴﺔ ﺍﻟﻤﻨﻈﻤﺔ ﺣﺴﺐ ﻭﻫﻲ)W3C: (“ﻧﻈﺎﻡ ﻫﻲ
ﺍﻟﻰ ﺍﻟﻮﺻﻮﻝ ﻣﻦ ﺍﻟﺴﻜﺮﺑﺖ ﻭﻟﻐﺎﺕ ﻟﻠﺒﺮﺍﻣﺞ ﺗﺴﻤﺢ ﻣﺤﺎﻳﺪﺓ ﻭﻟﻐﺔ ﺃﺳﺎﺳﻲ
ﻭﺍﻟﺘﻨﺴﻴﻖ ،ﻟﻠﻤﻠﻒ ﺍﻟﺘﺮﻛﻴﺒﻴﺔ ﻭﺍﻟﺒﻨﻴﺔ ،ﺍﻟﻤﺤﺘﻮﻯ..ﻋﻠﻴﻪ ﻭﺍﻟﺘﻌﺪﻳﻞ ،
ﺑﺸﻜﻞDynamic..ﺍﻝ ﺗﻘﺴﻴﻢ ﻭﻳﺘﻢDOMﺍﻟﻰ3ﻭﻫﻲ ﺭﺋﻴﺴﻴﺔ ﺃﻗﺴﺎﻡ:
1(Core DOM
2(HTML DOM
3(XML DOM
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
10. ﺍﻝ ﺗﻌﺭﻳﻑHTML DOM
ﺍﻝ ﺗﻌﺮﻳﻒ ﻋﻠﻰ ﺇﻋﺘﻤﺎﺩﺍDOMﺍﻝ ﺗﻌﺮﻳﻒ ﺗﺨﻴﻞ ﻳﻤﻜﻨﻨﺎ ،HTML DOM
ﻟﻞ ﺍﻟﺘﻌﺮﻳﻒ ﺻﻴﺎﻏﺔ ﺇﻋﺎﺩﺓ ﺑﺎﺧﺘﺼﺎﺭ ﻭﻳﻤﻜﻦHTML DOMﺃﻧﻬﺎ ﻋﻠﻰ:
ﺍﻝ ﻗﺒﻞ ﻣﻦ ﺍﻋﺘﻤﺎﺩﻫﺎ ﺗﻢ ﺍﻟﺘﻲ ﺍﻟﻤﻌﺎﻳﻴﺮW3Cﺍﻝ ﻋﻨﺎﺻﺮ ﺟﻤﻴﻊ ﻣﻊ ﻟﻠﺘﻌﺎﻣﻞ
HTMLﻭﺍﻟﺘﻌﺪﻳﻞ ﻭﺍﻹﺿﺎﻓﺔ ﺍﻟﺤﺬﻑ ﻋﻤﻠﻴﺎﺕ ﺧﻼﻝ ﻣﻦ ،.
ﺍﻝ ﻣﻊ ﺍﻟﺘﻌﺎﻣﻞ ﻋﻦ ﺍﻟﺤﺪﻳﺚ ﺑﺼﺪﺩ ﺍﻟﺪﻭﺭﺓ ﻭﺑﻬﺬﻩ ،ﻫﻨﺎ ﻭﻧﺤﻦHTML DOM،
ﺍﻷﻭﻟﻰ ﺍﻟﺸﺮﻳﺤﺔ ﻓﻲ ﺫﻛﺮﺕ ﻟﺬﻟﻚ)ﺍﻷﻭﻝ ﻟﻠﺠﺰء(ﻋﻦ ﺑﺤﺪﻳﺜﻲ ﺃﻧﻨﻲ ،ﻣﻼﺣﻈﺔJS
DOMﺃﻋﻨﻲ ﻓﺄﻧﺎJS HTML DOM^_^...
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
11. ﺍﻝ ﺗﻌﺭﻳﻑHTML DOM
ﺍﻟﺪﻭﺭﺓ؟ ﻣﻦ ﺍﻟﺠﺰء ﻫﺬﺍ ﺗﻌﻠﻢ ﺑﻌﺪ ﺇﻧﺠﺎﺯﻫﺎ ﻳﻤﻜﻨﻨﻲ ﺍﻟﺘﻲ ﺍﻷﻣﻮﺭ ﻫﻲ ﻣﺎ
ﻫﻮ ﺍﻟﺠﻮﺍﺏ:
(1ﺑﺎﻝ ﺍﻟﻤﻮﺟﻮﺩ ﺍﻟﻤﺤﺘﻮﻯ ﺗﻐﻴﺮHTMLﺑﺸﻜﻞDynamicallyﺍﻟﺠﺎﻓﺎ ﺧﻼﻝ ﻣﻦ
ﺳﻜﺮﺑﺖ.
(2ﺍﻝ ﻋﻨﺎﺻﺮ ﻣﻦ ﻋﻨﺼﺮ ﺑﺄﻱ ﺍﻟﺨﺎﺹ ﺍﻟﺘﻨﺴﻴﻖ ﺗﻐﻴﻴﺮHTML.
(3ﺍﻟﺼﻔﺤﺔ ﻋﻠﻰ ﺟﺪﻳﺪ ﻣﺤﺘﻮﻯ ﺃﻭ ﻋﻨﺎﺻﺮ ﺇﺿﺎﻓﺔ.
(4ﺍﻟﺼﻔﺤﺔ ﻣﻦ ﻣﺤﺘﻮﻯ ﺃﻭ ﻋﻨﺼﺮ ﺣﺬﻑ.
(5ﻭﺃﻱ ﺍﻟﺼﻔﺤﺔ ﺑﻴﻦ ﺗﻔﺎﻋﻠﻲ ﺑﺪﻭﺭ ﺍﻟﻘﻴﺎﻡEventﺑﺘﺼﻤﻴﻤﻪ ﺗﻘﻮﻡ..
(6ﺍﻟﻌﻨﺎﺻﺮ ﺧﺼﺎﺋﺺ ﻣﻦ ﺃﻱ ﻋﻠﻰ ﺍﻹﺿﺎﻓﺔ ﺃﻭ ﺍﻟﺤﺬﻑ ﺃﻭ ﺍﻟﺘﻌﺪﻳﻞ ﺇﻣﻜﺎﻧﻴﺔ
)attribute(
ﺍﻟﺠﺰء ﻫﺬﺍ ﻓﻲ ﻟﻨﺎ ﺭﺳﻤﻲ ﻣﻮﺿﻮﻉ ﺃﻭﻝ ﻓﻲ ،ﺗﻌﺎﻟﻰ ﷲ ﺑﺮﻛﺔ ﻋﻠﻰ ﻟﻨﺒﺪء ﻭﺍﻵﻥ^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
12. ﻭﺳﻠﻢ ﻋﻠﻴﻪ ﷲ ﺻﻞ ﺍﻟﻤﺼﻄﻔﻰ ﺍﻟﺤﺒﻴﺐ ﻭﻓﺎﺓ ﻳﻮﻡ ،ﻋﻨﻪ ﷲ ﺭﺿﻲ ﺍﻟﺼﺪﻳﻖ ﺑﻜﺮ ﺃﺑﻮ ﻗﺎﻝ:
ﺃﻻﻣﺤﻤﺪﺍ ﻳﻌﺒﺪ ﻛﺎﻥ ﻣﻦﺻﻞﷲ ﻓﺈﻥ ﷲ ﻳﻌﺒﺪ ﻛﺎﻥ ﻭﻣﻦ ﻣﺎﺕ ﻗﺪ ﻣﺤﻤﺪﺍ ﻓﺈﻥ ﻭﺳﻠﻢ ﻋﻠﻴﻪ ﷲ
ﻗﺒﻠﻪ ﻣﻦ ﺧﻠﺖ ﻗﺪ ﺭﺳﻮﻝ ﺇﻻ ﻣﺤﻤﺪ ﻭﻣﺎ ﻭﻗﺎﻝ ﻣﻴﺘﻮﻥ ﻭﺇﻧﻬﻢ ﻣﻴﺖ ﺇﻧﻚ ﻭﻗﺎﻝ ﻳﻤﻮﺕ ﻻ ﺣﻲ
ﺷﻴﺌﺎ ﷲ ﻳﻀﺮ ﻓﻠﻦ ﻋﻘﺒﻴﻪ ﻋﻠﻰ ﻳﻨﻘﻠﺐ ﻭﻣﻦ ﺃﻋﻘﺎﺑﻜﻢ ﻋﻠﻰ ﺍﻧﻘﻠﺒﺘﻢ ﻗﺘﻞ ﺃﻭ ﻣﺎﺕ ﺃﻓﺈﻥ ﺍﻟﺮﺳﻞ
ﺍﻟﻨﺎﺱ ﻓﻨﺸﺞ ﻗﺎﻝ ﺍﻟﺸﺎﻛﺮﻳﻦ ﷲ ﻭﺳﻴﺠﺰﻱﻳﺒﻜﻮﻥ.
ﺭﻗﻢ ﺣﺪﻳﺚ ﻣﻦ ﻣﻘﺘﺒﺲ3467ﺍﻟﺒﺨﺎﺭﻱ ﺻﺤﻴﺢ ﻣﻦ–ﺍﻟﺼﺤﺎﺑﺔ ﻓﻀﺎﺋﻞ ﻛﺘﺎﺏ
ﺍﻟﺴﺆﺍﻝ ﻟﻜﻦ ،ﺑﻌﺪﻩ ﻣﻦ ﺳﻨﻤﻮﺕ ﻭﻧﺤﻦ ،ﻣﺎﺕ ﻗﺪ ﻭﺳﻠﻢ ﻋﻠﻴﻪ ﷲ ﺻﻞ ﺍﻟﻤﺼﻄﻔﻰ ﺍﻟﺤﺒﻴﺐ ﻓﻬﺬﺍ
ﻣﻬﻤﺘﻪ ﺃﺩﻯ ،ﺍﻷﻣﺔ ﻭﻧﺼﺢ ﺍﻟﺮﺳﺎﻟﺔ ﻭﺑﻠﻎ ﺍﻷﻣﺎﻧﺔ ﺃﺩﻯ ﻭﺳﻠﻢ ﻋﻠﻴﻪ ﷲ ﺻﻞ ﺍﻟﺮﺳﻮﻝ ،ﺍﻷﻫﻢ
؟ ﺧﻠﻘﻨﺎ ﻣﻦ ﺍﻟﻬﺪﻑ ﺗﺤﻘﻖ ﺃﻋﻤﺎﻝ ﻧﺤﻦ ﻗﺪﻣﻨﺎ ﻫﻞ ﻟﻜﻦ ،ﺗﻌﺎﻟﻰ ﷲ ﺃﻣﺎﻡ ﺑﺬﻟﻚ ﻟﻪ ﻭﻧﺸﻬﺪ
ﺃﺟﻠﻪ ﻣﻦ ﺧﻠﻘﻨﺎ ﻣﺎ ﺳﺒﻴﻞ ﻓﻲ ﺃﻋﻤﺎﻟﻨﺎ ﺗﻜﻮﻥ ﺃﻥ ﺗﻌﺎﻟﻰ ﷲ ﻧﺴﺄﻝ..ﺁﻣﻴﻦ ﺍﻟﻠﻬﻢ.
ﺧﺎﻁﺭﺓ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
13. HTML DOM METHOD & Property
(1Method:ﺍﻝ ﻫﻲActionﺗﺤﺪﻳﺪ ﺃﻭ ﻟﻠﻮﺻﻮﻝ ﺑﺎﺳﺘﺨﺪﺍﻣﻪ ﺳﺄﻗﻮﻡ ﺍﻟﺬﻱ
ﺍﻝ ﺻﻔﺤﺔ ﻓﻲ ﺍﻟﻤﻮﺟﻮﺩ ﺍﻟﻌﻨﺼﺮHTML.
(2Property:ﻋﻨﺼﺮ ﻣﻦ ﺟﻠﺒﻬﺎ ﻳﻤﻜﻨﻨﺎ ﺍﻟﺘﻲ ﺍﻟﻘﻴﻤﺔ ﻫﻲHTMLﺗﻌﺪﻳﻠﻬﺎ ﺃﻭ
ﺍﻝ ﻋﻨﺼﺮ ﻋﻠﻰHTML...^_^
ﺫﻟﻚ ﻣﺜﺎﻻ ﻟﻨﺸﺎﻫﺪ^_^:
ﻣﻼﺣﻈﺔ1:innerHTMLﻋﻨﺼﺮ ﻣﻦ ﺗﻌﺪﻳﻠﻬﺎ ﺃﻭ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻟﺠﻠﺐ ﺗﺴﺘﺨﺪﻡ
HTML
ﻣﻼﺣﻈﺔ2:getElementByIdﻋﻨﺼﺮ ﻭﺗﺤﺪﻳﺪ ﻟﻠﺒﺤﺚ ﺗﺴﺘﺨﺪﻡHTML
ﺧﻼﻝ ﻣﻦIDﺑﻪ ﺍﻟﺨﺎﺹ^_^..
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
14. HTML DOM METHOD & Property
ﻣﺜﺎﻝ:
ﺍﻝ ﺃﻥ ﻫﻨﺎ ﻻﺣﻆgetElementById
ﺍﻝ ﻫﻲMethodﻭﺃﻥ ﺍﻟﺘﻌﺮﻳﻒ ﺣﺴﺐ
ﺍﻝinnerHTMLﺍﻟﺘﻲ ﻫﻲ
ﻋﻠﻰ ﺍﺣﺘﻮﺕ“ﻗﻴﻤﺔ“Property
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
15. JS DOM (methods, property can be used)
ﺃﺷﻬﺮ ﻣﻦ ﻣﺠﻤﻮﻋﺔ ﺍﻟﻰ ،ﺗﻌﺎﻟﻰ ﷲ ﺑﺈﺫﻥ ﺳﻨﺘﻄﺮﻕ ،ﺍﻵﻥmethodsﻳﻤﻜﻨﻨﺎ ﺍﻟﺘﻲ
ﺍﻝ ﻣﻊ ﺍﺳﺘﺨﺪﺍﻣﻬﺎJSﺍﻝ ﻋﻨﺎﺻﺮ ﻟﺘﻐﻴﻴﺮHTMLﻧﺬﻛﺮ ﺍﻟﻤﺨﺘﻠﻔﺔ ﺑﺠﺰﺋﻴﺎﺗﻬﺎ
ﺍﻟﻮﻅﻴﻔﺔ ﻣﻊ ﻣﻨﻬﺎ:
ﻣﻼﺣﻈﺔ:ﻓﻲ ﺃﻭ ﺫﻟﻚ ﺑﻌﺪ ﺍﻟﺪﻭﺍﻝ ﻫﺬﻩ ﺗﺸﺮﺡ ﺃﻣﺜﻠﺔ ﺍﻟﻰ ،ﺗﻌﺎﻟﻰ ﷲ ﺑﺈﺫﻥ ﺳﻨﺘﻄﺮﻕ
ﺗﻌﺎﻟﻰ ﷲ ﺷﺎء ﺇﻥ ﺍﻟﻘﺎﺩﻣﺔ ﺍﻟﻤﻮﺍﺿﻴﻊ^_^.
(1Methodﺍﻝ ﺻﻔﺤﺔ ﻓﻲ ﻋﻨﺼﺮ ﻋﻦ ﻟﻠﺒﺤﺚ ﻧﺴﺘﺨﺪﻣﻬﺎHTMLﻭﻫﻲ:
(1document.getElementById()ﺍﻝ ﺧﻼﻝ ﻣﻦ ﻋﻨﺼﺮ ﻋﻦ ﻟﻠﺒﺤﺚ ﻭﺗﺴﺘﺨﺪﻡID
(2document.getElementsByTagName()ﻋﻨﺎﺻﺮ ﻋﻦ ﻟﻠﺒﺤﺚ ﻭﺗﺴﺘﺨﺪﻡ
ﺍﻝ ﺍﺳﻢ ﺣﺴﺐtagﻣﺜﻞ“ul”
(3document.getElementsByClassName()ﻋﻨﺎﺻﺮ ﻋﻦ ﻟﻠﺒﺤﺚ ﻭﺗﺴﺘﺨﺪﻡ
ﻣﺜﻞ ﻣﻌﻴﻦ ﻛﻼﺱ ﺗﺤﺘﻮﻱ“className”
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
16. JS DOM (methods, property can be used)
(2Methodﺍﻝ ﻋﻨﺎﺻﺮ ﻋﻠﻰ ﻟﻠﺘﻐﻴﺮ ﻧﺴﺘﺨﺪﻣﻬﺎHTMLﻭﻫﻲ:
(1element.innerHTML:ﺍﻝ ﻋﻨﺼﺮ ﻣﺤﺘﻮﻯ ﻟﺠﻠﺐ ﻭﺗﺴﺘﺨﺪﻡHTMLﺗﻐﻴﻴﺮﻩ ﺃﻭ.
(2element.attribute:ﺍﻝ ﻗﻴﻢ ﻟﺠﻠﺐ ﻭﺗﺴﺘﺨﺪﻡAttributeﺑﻌﻨﺼﺮ ﺍﻟﺨﺎﺻﺔ
HTMLﺷﻜﻞ ﻋﻠﻰNamedNodeMap object.
(3element.setAttribute(attribute,value):ﻹﺿﺎﻓﺔ ﻭﺗﺴﺘﺨﺪﻡAttrﺍﻟﻰ
ﻋﻨﺼﺮHTMLﺑﺎﺳﻢ ﻛﻼﺱ ﺍﺿﺎﻓﺔ ﻣﺜﻞ ﻗﻴﻤﺘﻬﺎ ﺗﺤﺪﻳﺪ ﻣﻊclassName.
ﻣﻼﺣﻈﺔ:ﻣﺜﻞ ﻭﺳﺎﺋﻞ ﻫﻨﺎﻙ ﺳﺘﺠﺪ ﺗﺄﻛﻴﺪ ﺑﻜﻞgetAttr..ﻭhasAttr..ﺍﻟﺦ..ﻟﻜﻦ
ﻳﻤﻜﻦ ﺍﻟﺘﻲ ﺍﻟﺪﻭﺍﻝ ﻟﻜﻞ ﺃﺗﻄﺮﻕ ﻟﻦ ﺗﺄﻛﻴﺪ ﺑﻜﻞ ﺛﻢ ﻭﻣﻦ ،ﺍﻟﻌﻨﺼﺮ ﻗﻴﻤﺔ ﺗﻐﻴﻴﺮ ﻫﻨﺎ ﺍﻟﻤﻮﺿﻮﻉ
ﺑﺬﺍﺗﻚ ﻋﻨﻬﺎ ﺍﻟﺒﺤﺚ ﻓﻴﻤﻜﻨﻚ ،ﺍﺳﺘﺨﺪﺍﻣﻬﺎ.
(4element.style.property:ﺍﻟﺘﻨﺴﻴﻖ ﻟﺘﻐﻴﺮ ﻫﺬﻩ ﻭﺗﺴﺘﺨﺪﻡ)style(ﺑﻌﻨﺼﺮ ﺍﻟﺨﺎﺹ
ﺍﻝ ﺻﻔﺤﺔ ﻋﻠﻰ ﻣﺎHTML.
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
17. JS DOM (methods, property can be used)
(3Methodﺍﻝ ﻋﻨﺎﺻﺮ ﺣﺬﻑ ﺃﻭ ﻹﺿﺎﻓﺔ ﻧﺴﺘﺨﺪﻣﻬﺎHTMLﻭﻫﻲ:
(1document.createElement():ﻋﻨﺼﺮ ﻹﻧﺸﺎء ﺗﺴﺘﺨﺪﻡHTMLﺟﺪﻳﺪ.
(2document.removeChild():ﻋﻨﺼﺮ ﻟﺤﺬﻑ ﻭﺗﺴﺘﺨﺪﻡHTML.
(3document.appendChild():ﻋﻨﺼﺮ ﻹﺿﺎﻓﺔ ﻭﺗﺴﺘﺨﺪﻡHTMLﻋﻨﺼﺮ ﻋﻠﻰ
ﻣﻮﺟﻮﺩ.
(4document.replaceChild():ﺍﻝ ﻋﻨﺎﺻﺮ ﺃﺣﺪ ﻻﺳﺘﺒﺪﺍﻝ ﻭﺗﺴﺘﺨﺪﻡHTML
ﺁﺧﺮ ﺑﻌﻨﺼﺮ.
(5document.write(text):ﻣﺤﺘﻮﻯ ﻹﺿﺎﻓﺔ ﺍﻟﺪﺍﻟﺔ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡHTML)ﺑﺎﻝtag(
ﺍﻝ ﺻﻔﺤﺔ ﺍﻟﻰ ﻛﻮﺩ ﺳﻜﺮﺑﺖ ﺇﺿﺎﻓﺔ ﺃﻭ ،ﺑﺪﻭﻥ ﺃﻭHTMLﻟﻐﺎﻳﺎﺕ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡ ﻣﺎ ﻭﻏﺎﻟﺒﺎ ،
ﺍﻝTEST.
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
18. JS DOM (methods, property can be used)
(4ﺇﺿﺎﻓﺔEvents HandlersﺍﻟﻰHTML DOM:
(1document.getElementById(id).onclick=function(){code}:
ﻳﺤﺘﻮﻱ ﺍﻟﺬﻱ ﻋﻨﺼﺮ ﻋﻦ ﻟﻠﺒﺤﺚ ﺍﻟﺼﻴﻐﺔ ﻫﺬﻩ ﻭﺗﺴﺘﺨﺪﻡ“ﺍﻝid“ﺗﻨﻔﻴﺬ ﺛﻢ ﻭﻣﻦ ،ﺍﻟﻤﺮﺍﺩ
ﻣﻌﻴﻦ ﺃﻣﺮ)function(ﻋﻠﻰ ﺑﻨﺎﺋﺎ ﻣﺎonclick event^^
(2ﺇﺳﺘﺨﺪﺍﻡ ﻳﻤﻜﻨﻨﺎ ﺍﻷﺳﻠﻮﺏ ﺑﻨﻔﺲonchangeﺍﻝ ﻣﻦ ﻭﻏﻴﺮﻫﺎEventﺍﻝ ﻣﻜﺎﻥClick.
ﺍﻝ ،ﺍﻟﻌﻤﻠﻴﺎﺕ ﻫﺬﻩ ﺇﺳﺘﺨﺪﺍﻡ ﻋﻠﻰ ﺍﻷﻣﺜﻠﺔ ﻣﻦValidation)ﺍﻷﺧﻄﺎء ﻣﻦ ﺍﻟﺘﺤﻘﻖ(ﺇﻅﻬﺎﺭ ﺃﻭ ،
ﻭﺇﺧﻔﺎﺋﻬﺎ ﻧﺼﻮﺹ)collapse.. (ﺍﻟﺦ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
19. JS DOM (methods, property can be used)
(5HTML DOM Objectﺍﻝ ﻣﻦ ﺗﺤﺘﻮﻱDOM 1ﻣﻦ ﺍﻟﻌﺪﻳﺪ
ﺍﻝ ﻁﺮﻳﻖ ﻋﻦ ﺍﺳﺘﺨﺪﺍﻣﻬﺎ ﻳﻤﻜﻨﻨﺎ ﺍﻟﺘﻲ ﺍﻟﺨﺼﺎﺋﺺObject^_^ﻟﻨﺸﺎﻫﺪ ،
ﺃﻫﻤﻬﺎ^^:
(1document.anchors:ﺍﻝ ﺟﻤﻴﻊ ﻟﺠﻠﺐ ﻭﺗﺴﺘﺨﺪﻡ“<a>“ﻗﺪ ﻭﺍﻟﺘﻲ ﺍﻟﺼﻔﺤﺔ ﻣﻦ
ﺑﺎﺳﺘﺨﺪﺍﻡ ﻋﺪﺩﻫﻢ ﺣﺘﻰ ﺃﻭ ،ﻣﺎ ﺗﺮﺗﻴﺐ ،ﻣﺎ ﺻﻔﺔ ﺗﺤﺘﻮﻱlengthﺍﻝ ﺑﻌﺪachors^^.
(2document.baseURI:ﺍﻟﺮﺍﺑﻂ ﻟﺠﻠﺐ ﺗﺴﺘﺨﺪﻡ)Absolute URI(ﺍﻟﺨﺎﺹ
ﺑﺎﻟﺼﻔﺤﺔ.
(3document.body:ﺍﻝ ﻟﺠﻠﺐ ﺗﺴﺘﺨﺪﻡ<body></body>ﻳﺤﺘﻮﻳﻪ ﻭﻣﺎ^^.
(4document.cookie:ﺍﻝ ﺟﻤﻴﻊ ﻻﺳﺘﺮﺟﺎﻉ ﺗﺴﺘﺨﺪﻡ ﺍﻟﻤﻬﻤﺔ ﺍﻟﺨﺎﺻﻴﺔ ﻫﺬﻩcookie
ﺑﻲ ﺍﻟﺨﺎﺻﺔ^_^.
(5document.doctype:ﺍﻝ ﻧﻮﻉ ﻹﺭﺟﺎﻉ ﺗﺴﺘﺨﺪﻡdoctypeﺑﺎﻟﺼﻔﺤﺔ ﺍﻟﺨﺎﺹ^^.
(6document.documentElement:ﻹﺭﺟﺎﻉ ﺗﺴﺘﺨﺪﻡ<html></html>
ﺗﺤﺘﻮﻱ ﻭﻣﺎ.
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
20. JS DOM (methods, property can be used)
(5ﺗﺎﺑﻊHTML DOM Object
(7document.documentURI:ﻣﻠﻒ ﺑﻤﻮﻗﻊ ﺍﻟﺨﺎﺹ ﺍﻟﺮﺍﺑﻂ ﺍﺭﺟﺎﻉ ﻋﻠﻰ ﺗﻘﻮﻡ
ﺍﻟﻤﻠﻔﺎﺕ ﺃﻧﻮﺍﻉ ﺟﻤﻴﻊ ﻋﻠﻰ ﻭﺗﻌﻤﻞ ،ﻣﻌﻴﻦ..
(8document.domain:ﻣﺜﻞ ﺑﺎﻟﻤﻮﻗﻊ ﺍﻟﺨﺎﺹ ﺍﻟﺪﻭﻣﻴﻦ ﺇﺭﺟﺎﻉ ﻋﻠﻰ ﺗﻘﻮﻡ
nees.com2www.^_^
(9document.embeds:ﺍﻝ ﺟﻤﻴﻊ ﺇﺭﺟﺎﻉ ﻋﻠﻰ ﺗﻘﻮﻡ<embed>ﺍﻟﺼﻔﺤﺔ ﻓﻲ.
(10document.forms:ﺍﻝ ﺟﻤﻴﻊ ﺇﺭﺟﺎﻉ ﻋﻠﻰ ﺗﻘﻮﻡ<form>ﺍﻟﺼﻔﺤﺔ ﻓﻲ.
(11document.head:ﺍﻝ ﺇﺭﺟﺎﻉ ﻋﻠﻰ ﺗﻘﻮﻡ<head></head>ﻭﻣﺎ ﺍﻟﺼﻔﺤﺔ ﻓﻲ
ﺗﺤﺘﻮﻳﻪ.
(12document.images:ﺍﻝ ﺟﻤﻴﻊ ﺇﺭﺟﺎﻉ ﻋﻠﻰ ﺗﻘﻮﻡ<images>ﺍﻟﺼﻔﺤﺔ ﻓﻲ.
(13document.inputEncoding:ﺍﻝ ﺗﺮﺟﻊ ﺍﻟﺠﻤﻴﻠﺔ ﺍﻟﺨﺎﺻﻴﺔ ﻫﺬﻩEncode
ﻣﺜﻞ ﺑﺎﻟﺼﻔﺤﺔ ﺍﻟﺨﺎﺹ:UTF-8ﺃﻭISO..ﺍﻟﺦ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
21. JS DOM (methods, property can be used)
(5ﺗﺎﺑﻊHTML DOM Object
(14document.links:ﻧﻮﻉ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺟﻤﻴﻊ ﻹﺭﺟﺎﻉ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡ.<a>ﺃﻭ
<area>ﻋﻠﻰ ﺗﺤﺘﻮﻱ ﻭﺍﻟﺘﻲhref^_^.
(15document.scripts:ﺍﻝ ﺟﻤﻴﻊ ﻹﺭﺟﺎﻉ ﺍﻟﺪﺍﻟﺔ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡ
<script></script>ﺍﻝ ﺻﻔﺤﺔ ﻓﻲ ﺍﻟﻤﺴﺘﺨﺪﻣﺔHTML.
(16document.title:ﺍﻝ ﻣﻦ ﺑﺎﻟﺼﻔﺤﺔ ﺍﻟﺨﺎﺹ ﺍﻟﻌﻨﻮﺍﻥ ﺇﺭﺟﺎﻉ ﻋﻠﻰ ﺗﻘﻮﻡtag
<title>.
(17document.URL:ﺍﻝ ﻹﺭﺟﺎﻉ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡURLﺑﺎﻟﻤﻠﻒ ﺍﻟﺨﺎﺹ.
ﻣﻼﺣﻈﺔ:ﻟﻚ ﻭﻅﻴﻔﺔ:ﺍﻝ ﺑﻴﻦ ﺍﻟﻔﺮﻕ ﻋﻦ ﺍﻟﺒﺤﺚ ﻳﻤﻜﻨﻚURIﻭﺍﻝURLﻭﺍﻝURNﻛﻤﺎ ،
ﺑﻴﻦ ﺍﻟﻔﺮﻕ ﻋﻦ ﺍﻟﺒﺤﺚ ﻳﻤﻜﻨﻚobjectﺍﻟﺮﻭﺍﺑﻂ ﻟﺠﻠﺐ ﺑﺎﺳﺘﺨﺪﺍﻣﻬﺎ ﻗﻤﺖ ﺍﻟﺘﻲ^^.
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
22. JS DOM (methods, property can be used)
ﺍﻟﺘﺎﻟﻴﺔ ﺍﻟﺨﻄﻮﺓ ﺍﻟﻰ ﻟﻨﻨﺘﻘﻞ ،ﺍﻟﻌﺰﻳﺰ ﺻﺪﻳﻘﻲ ﻳﺎ ﻭﺍﻵﻥ!_: !Pﺍﻹﻧﺘﻘﺎﻝ ﻗﺒﻞ ﻟﻜﻦ ،
ﻣﺎ ﺟﻤﻴﻊ ﺑﺘﻨﻔﻴﺬ ﺃﻗﻮﻡ ﻟﻦ ﺗﺄﻛﻴﺪ ﻭﺑﻜﻞ ،ﺫﻛﺮﻧﺎ ﻣﺎ ﻋﻠﻰ ﺍﻷﻣﺜﻠﺔ ﺑﻌﺾ ﻟﻨﺴﺘﻌﺮﺽ
ﺍﻟﻰ ﺗﻌﺎﻟﻰ ﷲ ﺑﺈﺫﻥ ﺳﻨﻨﺘﻘﻞ ﺫﻟﻚ ﻭﺑﻌﺪ ،ﺍﻧﺘﻘﺎﺋﻴﺔ ﻋﻴﻨﺔ ﺍﻵﻥ ﺳﺄﺧﺘﺎﺭ ﻟﻜﻦ ،ﺫﻛﺮﺕ
ﺫﻛﺮﻧﺎ ﻣﺎ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻰ ﺳﻨﺘﻄﺮﻕ ﺍﻟﻘﺎﺩﻣﺔ ﺍﻟﻤﻮﺍﺿﻴﻊ ﻓﻲ ﺃﻧﻨﺎ ﻛﻤﺎ ،ﺟﺪﻳﺪ ﻣﻮﺿﻮﻉ
ﺍﻟﻰ ﺍﻟﻌﻮﺩﺓ ﺩﻭﻥ
ﻣﺠﺪﺩﺍ ﺍﻟﺸﺮﺡ^_^..
ﻣﺜﺎﻝ:
)ﻛﺘﺎﺑﺔ ﻳﻤﻜﻨﻚ ﻫﻞ
ﺍﻟﺒﺮﻣﺠﻴﺔ ﺍﻟﺸﻴﻔﺮﺓ
ﺍﻟﻨﺘﻴﺠﺔ ﺑﻬﺬﻩ ﺍﻟﺨﺎﺻﺔ
ﺍﻹﻧﺘﻘﺎﻝ ﻗﺒﻞ
ﺍﻟﺘﺎﻟﻴﺔ؟ ﻟﻠﺸﺮﻳﺤﺔ(
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
23. JS DOM (methods, property can be used)
ﺍﻟﺴﺎﺑﻘﺔ ﺑﺎﻟﺸﺎﺷﺔ ﺍﻟﺨﺎﺻﺔ ﺍﻟﺒﺮﻣﺠﻴﺔ ﺍﻟﺸﻴﻔﺮﺓ:
ﺍﻝ ﻣﺸﺎﻫﺪﺓ ﺗﻨﺴﻰ ﻻConsole
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
24. ﺍﻟﺮﺟﻴﻢ ﺍﻟﺸﻴﻄﺎﻥ ﻣﻦ ﻮﺫ ﺑﺎہﻠﻟ
}ﺃﻣﺮﺕ ﻭﺑﺬﻟﻚ ﻟﻪ ﺷﺮﻳﻚ ﻻ ﺍﻟﻌﺎﻟﻤﻴﻦ ﺭﺏ ﺇﻥ ﺻﻼﺗﻲ ﻭﻧﺴﻜﻲ ﻭﻣﺤﻴﺎﻱ ﻭﻣﻤﺎﺗﻲ ہﻠﻟ
ﺍﻟﻤﺴﻠﻤﻴﻦ ﺃﻭﻝ ﻭﺃﻧﺎ{.
ﺍﻟﻌﻈﻴﻢ ﷲ ﺻﺪﻕ
ﺧﺎﻁﺭﺓ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
25. Finding HTML Elements
ﺍﻝ ﻋﻦ ﺍﻟﻤﺘﻮﺍﺿﻊ ﺣﺪﻳﺜﻨﺎ ﺑﻌﺪmethodﺍﻟﻔﻜﺮﺓ ﺷﺮﺡ ﻭﺑﻌﺪ ،ﺇﺳﺘﺨﺪﺍﻣﻬﺎ ﻭﻛﻴﻔﻴﺔ
ﻛﻞ ﺣﺴﺐ ﺍﻟﺸﺮﺡ ﻋﻤﻠﻴﺔ ﺗﺨﺼﻴﺺ ﺍﻟﻰ ﻧﻨﺘﻘﻞ ،ﺑﺬﻛﺮﻩ ﻗﻤﻨﺎ ﺗﺼﻨﻴﻒ ﻟﻜﻞ ﺍﻟﻌﺎﻣﻞ
ﻓﻲ ﻳﻬﻤﻨﺎ ﻣﺎ ﺧﺼﻮﺻﺎ ،ﺟﺰﺋﻴﺔ ﻛﻞ ﻋﻠﻰ ﻣﺘﻨﻮﻋﺔ ﺃﻣﺜﻠﺔ ﺑﺬﻛﺮ ﻭﺫﻟﻚ ،ﺗﺼﻨﻴﻒ
ﺳﻜﺮﺑﺖ ﺍﻟﺠﺎﻓﺎ ﻣﻊ ﺍﻟﺘﻌﺎﻣﻞ..
ﺍﻝ ﻋﻨﺎﺻﺮ ﺍﻟﻰ ﻭﺍﻟﻮﺻﻮﻝ ﺍﻟﺒﺤﺚ ﻋﻦ ﺳﻴﺘﺤﺪﺙ ﺍﻟﻤﻮﺿﻮﻉ ﻫﺬﺍ ﻓﺈﻥ ،ﻭﺑﺎﺧﺘﺼﺎﺭ
HTMLﺑﺎﻟﺼﻔﺤﺔ^^ﺍﻝ ﻫﻲ ﺧﺼﺎﺋﺺ ﻣﻦ ﺍﺳﺘﺨﺪﺍﻣﻪ ﺳﻴﺘﻢ ﻭﻣﺎIDﻭﺍﻟﻜﻼﺱ
ﻭﺍﻝTagﻭﺍﻝCss selectorﻭﺍﻝHtml Obj..
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
31. Finding HTML Elements
^_^ﻫﻮ ﺑﻪ ﺍﻟﻘﻴﺎﻡ ﻋﻠﻴﻚ ﻣﺎ ﻛﻞ ﺑﺴﺎﻁﺔ ﺑﻜﻞ ،ﺍﻷﻣﺮ ﻭﺟﻤﺎﻝ ﺳﻬﻮﻟﺔ ﺭﺃﻳﺖ ﻫﻞ
،ﺍﻟﻌﺎﻟﻨﻢ ﻫﺬﺍ ﺿﻤﻦ ﻭﺍﻹﺑﺪﺍﻉ ﺍﻹﻧﻄﻼﻕ ﺛﻢ ﻭﻣﻦ ،ﺩﻭﺍﻝ ﻣﻦ ﺗﻌﻠﻤﻨﺎﻩ ﻣﺎ ﺍﺳﺘﺨﺪﺍﻡ
ﺧﺒﺮﺓ ﺗﺴﺘﻔﻴﺪ ﻓﻠﻦ ﻭﺍﻻ ،ﺍﻟﺴﺎﺑﻘﺔ ﺍﻷﻣﺜﻠﺔ ﺟﻤﻴﻊ ﺑﺘﻄﺒﻴﻖ ﻗﻤﺖ ﺃﻧﻚ ﺃﺭﺟﻮﺍ ﻭﺍﻵﻥ
ﺑﺮﻣﺠﻴﺔ!!
ﻟﺠﻤﻴﻊ ﺗﻄﺒﻴﻖ ﺗﺸﺎﻫﺪ ﻓﻞ ،ﺍﻷﺧﻄﺎء ﻣﻦ ﻣﺠﻤﻮﻋﺔ ﻭﺍﺟﻬﺖ ﻗﺪ ﺃﻭ ﺑﺘﻨﻔﻴﺬﻫﺎ ﻗﻤﺖ ﺍﺫﺍ
ﺍﻟﺴﺎﺑﻘﺔ ﺍﻷﻣﺜﻠﺔ:
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
32. ﺍﻟﺠﻬﻞ ﺃﺧﺎ ﺗﺼﺤﺐ ﻓﻼ***ﻭﺇﻳﺎﻩ ﻭﺇﻳﺎﻙ
ﺃﺭﺩﻯ ﺟﺎﻫﻞ ﻣﻦ ﻓﻜﻢ***ﺁﺧﺎﻩ ﺣﻴﻦ ًﺎﺣﻠﻴﻤ
ﺑﺎﻟﻤﺮء ﺍﻟﻤﺮء ﻳﻘﺎﺱ***ﻣﺎﺷﺎﻩ ﺍﻟﻤﺮء ﻣﺎ ﺇﺫﺍ
ﺍﻟﺸﻲء ﻣﻦ ﻟﻠﺸﻲء ﻭ***ﻭﺃﺷﺒﺎﻩ ﻣﻘﺎﻳﻴﺲ
ﺍﻟﻘﻠﺐ ﻋﻠﻰ ﻭﻟﻠﻘﻠﺐ***ﻳﻠﻘﺎﻩ ﺣﻴﻦ ﺩﻟﻴﻞ
ﺑﻦ ﻋﻠﻲﺭﺿﻲ ﻁﺎﻟﺐ ﺃﺑﻲﻭﺃﺭﺿﺎﻩ ﻋﻨﻪ ﷲ
ﺧﺎﻁﺭﺓ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
33. Changing HTML & CSS
ﺃﻭﻻ:Changing Html:ﻫﺬﻩ ﻓﻲ ﺑﻜﺜﺮﺓ ﺍﺳﺘﺨﺪﻣﻨﺎﻫﺎ ﺍﻟﺘﻲ ﺍﻷﻣﺜﻠﺔ ﺃﺷﻬﺮ ﻣﻦ
ﺍﻝ ﺍﻵﻥ ﻭﺍﻟﻰ ﺍﻟﺪﻭﺭﺓinnerHTML^_^ﻏﻴﺮﻫﺎ ﻋﻠﻴﻰ ﻟﻨﻄﻠﻊ ﻭﺍﻵﻥ ،:
(1document.write():ﻋﻠﻰ ﻟﻠﻜﺘﺎﺑﺔ ﺗﺴﺘﺨﺪﻡ ﺍﻟﺪﺍﻟﺔ ﻫﺬﻩ ﺃﻥ ﺳﺎﺑﻘﺎ ﺗﺤﺪﺛﻨﺎ
ﺍﻝ ﺻﻔﺤﺔHTMLﺑﺮﻣﺠﻴﺔ ﺷﻔﺮﺓ ﺑﺘﻨﻔﻴﺬ ﺗﻘﻮﻡ ﺍﻥ ﻭﻳﻤﻜﻦ)ﺳﻜﺮﺑﺖ ﺟﺎﻓﺎ(
ﺍﺳﺘﺨﺪﺍﻡ ﻣﺒﺎﺷﺮﺓ ﻳﻤﻜﻨﻨﺎ ﺃﻭ ﻧﺘﺎﺋﺠﻬﺎ ﻭﻁﺒﺎﻋﺔHTML..ﺍﻟﻤﺜﺎﻝ ﺷﺎﻫﺪ:
ﻣﻼﺣﻈﺔ) :ﺑﺤﺬﻑ ﺳﻴﻘﻮﻡ ،ﺍﻟﺼﻔﺤﺔ ﺗﺤﻤﻴﻞ ﺑﻌﺪ ﺍﻟﺪﺍﻟﺔ ﻫﺬﻩ ﺑﺎﺳﺘﺨﺪﺍﻡ ﻗﻤﺖ ﺍﺫﺍ
ﺍﻟﻘﺪﻳﻢ ﺍﻟﻤﺤﺘﻮﻯ.(
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
34. Changing HTML & CSS
(2ﺏ ﺍﻟﺨﺎﺻﺔ ﺍﻟﻘﻴﻤﺔ ﺗﻐﻴﻴﺮAttribute:ﺏ ﺍﻟﺨﺎﺻﺔ ﺍﻟﻘﻴﻤﺔ ﺃﻳﻀﺎ ﺗﻐﻴﺮ ﻳﻤﻜﻨﻨﺎ
Attrﺍﻟﻤﺤﺘﻮﻯ ﻋﻠﻰ ﻳﻘﺘﺼﺮ ﻻ ﻓﺎﻟﺘﻌﺪﻳﻞ ،^_^ﻫﻲ ﻟﺬﻟﻚ ﺍﻟﻌﺎﻣﺔ ﻭﺍﻟﺼﻴﻐﺔ ،:
document.getElementById(id).attribute=new value
ﻣﺜﺎﻝ:ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
35. Changing HTML & CSS
ﺛﺎﻧﻴﺎ:Changing Css:ﺍﻝ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺳﻨﻘﻮﻡ ﻫﻨﺎDOMﺧﺼﺎﺋﺺ ﻟﺘﻐﻴﻴﺮ
ﻣﺎ ﻟﻌﻨﺼﺮ ﺍﻟﺘﻨﺴﻴﻖ^_^ﺇﺿﺎﻓﺔ ﺳﻮﻯ ﻳﺘﻌﺪﻯ ﻻ ﺍﻷﻣﺮ ﺑﺴﺎﻁﺔ ﻭﺑﻜﻞ ،style
ﺍﻟﻤﻄﻠﻮﺏ ﺍﻟﺘﻨﺴﻴﻖ ﺛﻢ ﻭﻣﻦ^^ﺍﻟﻌﺎﻣﺔ ﺍﻟﺼﻴﻐﺔ ﺷﺎﻫﺪ ،:^_^
document.getElementById(id).style.property=new style
ﻣﺜﺎﻝ:ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
36. Changing HTML & CSS
ﻣﻌﺎ ﺍﻟﺴﺎﺑﻘﺔ ﺍﻷﻣﺜﻠﺔ ﺗﻄﺒﻴﻖ ﻧﺎﺗﺞ ﻟﻨﺸﺎﻫﺪ ﻭﺍﻵﻥ:
)ﻓﻲ ﺫﻛﺮﻩ ﺗﻢ ﻣﺎ ﺗﻄﺒﻴﻖ ﺃﻭ ﺗﻨﻔﻴﺬ ﻣﺤﺎﻭﻟﺘﻚ ﻗﺒﻞ ﺍﻟﺒﺮﻣﺠﻴﺔ ﺍﻟﺸﻴﻔﺮﺓ ﺗﺴﺘﻌﺮﺽ ﻻ
ﺍﻟﺴﺎﺑﻘﺔ ﺍﻟﺸﺮﺍﺋﺢ(
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
37. HTML DOM Events
ﻣﺜﻞ ،ﺍﻟﻤﺴﺘﺨﺪﻡ ﻭﺑﻴﻦ ﺑﻴﻨﻬﺎ ﺍﻟﺘﻔﺎﻋﻠﻴﺔ ﺍﻷﻣﻮﺭ ﻣﻦ ﺍﻟﻌﺪﻳﺪ ﺗﺤﺘﻮﻱ ﺍﻟﻮﻳﺐ ﺻﻔﺤﺎﺕ
ﺍﻟﻔﺄﺭﺓ ﻣﺆﺷﺮ ﻭﺗﺤﺮﻳﻚ ﻧﺼﻮﺹ ﻭﺗﺤﺪﻳﺪ ﻭﺭﻭﺍﺑﻂ ﺃﺯﺭﺍﺭ ﻋﻠﻰ ﺍﻟﻨﻘﺮ....ﻭﻫﺬﺍ ،ﺍﻟﺦ
ﺍﻝ ﺗﺪﺧﻞ ﻳﺘﻄﻠﺐ ﺍﻷﻣﺮScriptﺍﻝ ﻫﺬﻩ ﻓﻲ ﺍﻟﺘﺤﻜﻢ ﻳﺘﺴﻨﻰ ﺣﺘﻰActionﺍﻟﺘﻲ
ﺑﺎﻝ ﻳﺴﻤﻰ ﻣﺎ ﻭﻫﺬﺍ ، ﺍﻟﻤﺴﺘﺨﺪﻡ ﺑﻬﺎ ﻗﺎﻡEvent^_^..
ﺍﻝ ﺇﺳﺘﺨﺪﺍﻡ ﻋﻠﻰ ﻣﺜﺎﻻ ﻟﻨﺸﺎﻫﺪ ﻭﺍﻵﻥEventﺷﻬﺮﺓ ﺍﻷﻛﺜﺮ:P)onclick(
ﺍﻟﻨﻘﺮ ﻗﺒﻞ ﺍﻟﻨﻘﺮ ﺑﻌﺪ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
38. HTML DOM Events
ﺍﻝ ﻣﻦ ﺑﻌﻀﺎ ﻟﻨﺸﺎﻫﺪ ﻭﺍﻵﻥeventﺇﺳﺘﺨﺪﺍﻣﻬﺎ ﻳﻤﻜﻨﻨﺎ ﺍﻟﺘﻲ:
(1onchange:ﺍﻝ ﻋﻨﺼﺮ ﻋﻠﻰ ﺗﻐﻴﻴﺮ ﻳﺤﺪﺙ ﻋﻨﺪﻣﺎhtml)ﺍﻹﺩﺧﺎﻝ ﺗﻘﺒﻞ ﺍﻟﺘﻲ(
ﺩﺍﺧﻞ ﺍﻟﻜﺘﺎﺑﺔ ﻣﺜﻞtextbox.
(2onmouseover:ﻫﺬﺍ ﻳﻨﻄﻠﻖEventﻋﻨﺼﺮ ﻓﻮﻕ ﺍﻟﻔﺄﺭﺓ ﻣﺆﺷﺮ ﻳﻤﺮ ﻋﻨﺪﻣﺎ
ﺍﻝHTML.
(3onmouseout:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEventﺧﺎﺭﺝ ﺍﻟﻔﺄﺭﺓ ﻣﺆﺷﺮ ﻳﺼﺒﺢ ﻋﻨﺪﻣﺎ
ﺍﻟﻌﻨﺼﺮ.
(4onmousedown:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEvent،ﺍﻟﻔﺄﺭﺓ ﺯﺭ ﻋﻠﻰ ﺍﻟﻨﻘﺮ ﻳﺘﻢ ﻋﻨﺪﻣﺎ
ﺍﻝ ﻟﻴﻨﻄﻠﻖ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﻳﺪﻙ ﺃﺻﺒﻊ ﺗﺮﻓﻊ ﻋﻨﺪﻣﺎ ﻭﻳﻨﺘﻬﻲEventﺍﻟﺘﺎﻟﻲ
(5onmouseup:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEventﻟﻠﺰﺭ ﺍﻷﺻﺒﻊ ﺗﺮﻙ ﻋﻨﺪ ﺑﻌﺪ ﻣﺒﺎﺷﺮﺓ)
ﺍﻟﻀﻐﻂ ﻋﻤﻠﻴﺔ ﺑﻌﺪDown.(
ﻣﻼﺣﻈﺔ:ﺃﻭﻻ ﻳﺘﻢ ﺍﻟﻔﺄﺭﺓ ﺯﺭ ﻋﻠﻰ ﺍﻟﻨﻘﺮ ﻋﻤﻠﻴﺎﺕ ﺗﺮﺗﻴﺐdownﺛﻢupﺛﻢclick
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
39. HTML DOM Events
(6onfocus:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEventﺍﻝ ﻋﻨﺼﺮ ﺗﺤﺪﻳﺪ ﻳﺘﻢ ﻋﻨﺪﻣﺎhtml.
)ﺍﻝ ﺑﻌﺾ ﺫﻛﺮ ﺑﻌﺪ ﺍﻟﻔﻜﺮﺓ ﻟﺘﺘﻀﺢ ﻣﺜﺎﻝ ﻋﺮﺽ ﺳﻴﺘﻢEventsﷲ ﺑﺈﺫﻥ
ﺗﻌﺎﻟﻰ.(
(7onload:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEventﺍﻝ ﻋﻨﺼﺮ ﺗﺤﻤﻴﻞ ﻣﻦ ﺍﻹﻧﺘﻬﺎء ﺑﻌﺪ
HTMLﺍﻟﻤﺮﺍﺩ.
(8onkeydown:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEventﺃﺯﺭﺍﺭ ﺃﺣﺪ ﻋﻠﻰ ﺍﻟﻀﻐﻂ ﻋﻨﺪ
ﺍﻟﻤﻔﺎﺗﻴﺢ ﻟﻮﺣﺔ)ﺑﺎﻷﺳﻔﻞ ﺍﻟﻔﺎﺗﻴﺢ ﻟﻮﺣﺔ ﺯﺭ ﻳﺼﺒﺢ ﻋﻨﺪﻣﺎ(
(9onkeyup:ﺍﻝ ﻳﻨﻄﻠﻖEventﻓﻲ ﺍﻟﻤﻔﺎﺗﻴﺢ ﻟﻮﺣﺔ ﺯﺭ ﻳﺼﺒﺢ ﻋﻨﺪﻣﺎ
ﺍﻷﻋﻠﻰ.
(10onkeypress:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEvent،ﺍﻟﻤﻔﺎﺗﻴﺢ ﻟﻮﺣﺔ ﻋﻠﻰ ﺍﻟﻀﻐﻂ ﻋﻨﺪ
ﺍﻟﻤﻔﺎﺗﻴﺢ ﻟﻮﺣﺔ ﺃﺯﺭﺍﺭ ﺟﻤﻴﻊ ﺗﻌﺘﻤﺪ ﻻ ﺍﻟﺨﺎﺻﻴﺔ ﻫﺬﻩ ﻟﻜﻦ)ﻣﺜﻼ ﻓﻴﺴﺘﺜﻰ
shift, ctrl, alt..ﺍﻟﺦ(
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
40. HTML DOM Events
(11onblur:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEventﺍﻝ ﻋﻨﺼﺮ ﻣﻐﺎﺩﺭﺓ ﻋﻨﺪHTML
)ﻟﻞ ﺍﻟﻤﻘﺎﺑﻞ ﺍﻟﺤﺪﺙ ،ﺁﺧﺮ ﺑﻤﻌﻨﻰonfocus(
(12onsubmit:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEventﻋﻠﻰ ﺍﻟﻀﻐﻂ ﻋﻨﺪSubmit
ﺑﺎﻝ ﺍﻟﺨﺎﺻﺔForm) .When Form Is Submitted.(
(13oncopy:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEventﺍﻝ ﺑﻌﻤﻠﻴﺔ ﺍﻟﻘﻴﺎﻡ ﻋﻨﺪcopyﻟﻨﺺ
ﻣﻌﻴﻦ^_^ﺍﻟﺜﻼﺙ ﺍﻟﻄﺮﻕ ﻣﻦ ﻁﺮﻳﻘﺔ ﺑﺄﻱ)ctrl & cﺍﻟﻔﺄﺭﺓ ﺧﻼﻝ ﻣﻦ ﺃﻭ
ﺍﻟﻤﺘﺼﻔﺢ ﺃﻭ.(
(14onscroll:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖEventﺑﻌﻤﻠﻴﺔ ﺍﻟﻘﻴﺎﻡ ﻋﻨﺪscrolling.
(15onresize:ﺍﻝ ﻫﺬﺍ ﻳﻨﻄﻠﻖeventﺍﻟﻌﺮﺽ ﺷﺎﺷﺔ ﺣﺠﻢ ﺑﺘﻐﻴﻴﺮ ﺍﻟﻘﻴﺎﻡ ﻋﻨﺪ
ﻟﻞdocument.
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
41. HTML DOM Events
ﺍﻝ ﻫﺬﻩEventsﺍﻝ ﻣﻦ ﺍﻟﻜﺜﻴﺮ ﻫﻨﺎﻙ ﻳﻮﺟﺪ ﺃﻱ ،ﻛﻞ ﻣﻦ ﺟﺰء ﻫﻲ ﺫﻛﺮﻧﻬﺎ ﺍﻟﺘﻲ
Eventsﺍﻝ ﺑﻌﺾ ﺟﺰﺋﻴﺔ ﻛﻞ ﻣﻦ ﻫﻨﺎ ﺍﻹﻗﺘﺒﺎﺱ ﻭﺣﺎﻭﻟﺖ ،ﻏﻴﺮﻫﺎevents
ﺍﻝ ﻣﻦ ﻓﻤﺜﻼClipboard Eventﺍﻝ ﺑﺄﺧﺬ ﻗﻤﺖoncopyﻣﺜﻼ ﻭﻫﻨﺎﻙ
onpasteﻟﻬﺎ ﺃﺗﻄﺮﻕ ﻟﻢ^_^ﺍﻝ ﻋﻦ ﺗﺒﺤﺚ ﺃﻥ ﺃﺭﻳﺪ ﻟﺬﻟﻚ ،Events
ﺍﻝ ﻓﻬﺬﻩ ،ﺫﻛﺮﻧﺎﻩ ﻋﻤﺎ ﺍﻟﻔﻜﺮﺓ ﺗﺨﺘﻠﻒ ﻭﻟﻦ ،ﺍﻷﺧﺮﻯEvents،ﺍﻹﺳﺘﺨﺪﺍﻡ ﺳﻬﻠﺔ
ﺑﺎﻝ ﺍﻟﺨﺎﺻﺔ ﺍﻹﺳﺘﺨﺪﺍﻡ ﻁﺮﻳﻘﺔ ﺑﺸﺮﺡ ﺳﻨﻘﻮﻡ ﻭﺍﻷﻥEventsﻟﻬﺎ ﺗﻄﺮﻗﻨﺎ ﺍﻟﺘﻲ
ﻣﻦ ﺫﻛﺮﻧﺎ ﻣﻤﺎ ﺟﺰء ﻋﻠﻰ ﻭﻣﺜﺎﻝ ﺍﻟﻤﻼﺣﻈﺎﺕ ﺑﻌﺾ ﻣﻊ ،ﺗﻌﺎﻟﻰ ﷲ ﺑﺈﺫﻥ
Events^_^..
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
42. HTML DOM Events
ﻣﻼﺣﻈﺔ:ﻋﻤﻞ ﻳﻤﻜﻨﻚassignﻝEventﺧﻼﻝ ﻣﻦ ﻣﻌﻴﻦJS DOMﻣﺜﻞ:
document.getElementById(“btn").onclick = yourScript;
ﺍﻟﻴﻪ ﻭﺗﻄﺮﻗﻨﺎ ﺫﻛﺮﻧﺎ ﻣﺎ ﻋﻠﻰ ﻣﺜﺎﻝ ﻟﻨﺸﺎﻫﺪ ﻭﺍﻵﻥ:
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
45. ؟ ﺭﻳﺲ ﺑﻴﺮﻱ ﻫﻮ ﻣﻦ ﺗﻌﺮﻑ ﻫﻞ
ﻭﺿﻌﺖ ﻫﺬﻩ ﺧﺮﺍﺋﻄﻪ ،ﺍﻟﻌﺎﻟﻢ ﺃﺟﺰﺍء ﻣﻌﻈﻢ ﺗﺸﻤﻞ ﺧﺮﺍﺋﻂ ﺭﺳﻢ ﺍﺳﺘﻄﺎﻉ ،ﻣﺴﻠﻢ ﺑﺤﺎﺭ ﻫﻮ
ﻗﺒﻞ ﺍﻟﺨﺮﻳﻄﺔ ﺭﺳﻢ ﻣﻦ ﺍﻧﺘﻬﻰ ﺭﻳﺲ ﺑﻴﺮﻱ ﻷﻥ ،ﻭﺭﻁﺔ ﻓﻲ ﺍﻟﻐﺮﺏ ﻋﻠﻤﺎء27ﻣﻦ ﻋﺎﻡ
ﺍﻷﻣﺮﻳﻜﻴﺔ ﻟﻠﻘﺎﺭﺓ ﻛﻮﻟﻮﻣﺒﻮﺱ ﺍﺧﺘﺸﺎﻑ!!ﺏ ﺑﺨﺮﺍﺋﻄﻬﻢ ﺗﺴﻤﻰ ﻭﻛﺎﻧﺖ“ﺃﻧﺘﻴﻠﻴﺎ”،
ﺳﺎﻋﺪﻭﻫﻢ ﻓﻀﺎء ﺭﺟﺎﻝ ﻫﻨﺎﻙ ﺃﻥ ﻳﺘﺤﺪﺛﻮﻥ ﺟﻌﻠﺘﻬﻢ ،ﺍﻟﺨﺮﺍﺋﻂ ﻫﺬﻩ ﺩﻗﺔ ﺃﻥ ﻫﺬﺍ ﻣﻦ ﻭﺍﻷﻋﺠﺐ
ﻫﺬﺍ ﻓﻲ“ﻫﻬﻬﻬﻪ“ﺍﻟﺼﻨﺎﻋﻴﺔ ﺍﻷﻗﻤﺎﺭ ﺻﻮﺭ ﻭﺑﻴﻦ ﺍﻟﺨﺮﺍﺋﻂ ﻫﺬﻩ ﺑﻴﻦ ﺗﻄﺎﻕ ﻫﻨﺎﻙ ﻷﻥ ،
ﻣﺨﻴﻒ ﺑﺸﻜﻞ! !
؟ ﺗﻮﺟﻬﺎﺗﻪ ﻫﻲ ﻭﻣﺎ ؟ ﺃﻣﺮﻳﻜﺎ ﺍﻟﻰ ﺍﻟﻮﻗﺖ ﻫﺬﺍ ﻓﻲ ﻛﻮﻟﻮﻣﺒﻮﺱ ﺃﺭﺳﻞ ﻣﻦ ،ﺍﻟﻤﻬﻢ ﻭﺍﻟﺴﺆﺍﻝ
ﻭﻟﻤﺎﺫﺍ؟ ،ﺍﻟﺤﻤﺮ؟ ﺑﺎﻟﻬﻨﻮﺩ ﻫﺆﻻء ﺑﻔﻌﻠﻪ ﻗﺎﻡ ﺍﻟﺬﻱ ﻭﻣﺎ
ﺑﺮﻳﺌﺔ ﺃﺳﺌﻠﺔ ﻣﺠﺮﺩ!
ﺧﺎﻁﺭﺓ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
46. Event Listener
addEventListener()ﺍﻟﺪﺍﻟﺔ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡJS DOMﻋﻨﺼﺮ ﻹﻋﻄﺎء
ﺍﻝ ﻋﻨﺎﺻﺮ ﻣﻦHTMLﺍﻝ ﻣﻦ ﻣﺠﻤﻮﻋﺔ ﺃﻭ ﺃﺣﺪEvent/sﺗﻌﻠﻤﻨﺎﻫﺎ ﺍﻟﺘﻲ
ﺑﺈﻣﻜﺎﻧﻴﺔ ﺍﻟﺪﺍﻟﺔ ﻫﺬﻩ ﻭﺗﺘﻤﻴﺰ ،ﺳﺎﺑﻘﺎ ﻭﺫﻛﺮﻧﺎﻫﺎ
(1ﻣﻦ ﺃﻛﺜﺮ ﺇﺿﺎﻓﺔ ﻳﻤﻜﻨﻚEvent Clickﻋﻤﻞ ﻳﺘﻢ ﺃﻥ ﻭﺩﻭﻥ ﺍﻟﻌﻨﺼﺮ ﻟﻨﻔﺲ
overrideﻟﻸﻭﻝ!ﺭﺍﺑﻂ ﻫﻨﺎﻙ ﺃﻥ ﻓﺮﺿﻨﺎ ﻟﻮ ﺁﺧﺮ ﺑﻤﻌﻨﻰ ،xﻭﻗﻤﺖ ،
ﻹﺿﺎﻓﺔ ﺍﻟﺪﺍﻟﺔ ﻫﺬﻩ ﺑﺎﺳﺘﺨﺪﺍﻡclickﺑﻄﺒﺎﻋﺔ ﻳﻘﻮﻡ ﺍﻷﻭﻝ“ﺃﻧﻴﺲ“ﻭﺍﻝ
clickﺑﻄﺒﺎﻋﺔ ﺗﻘﻮﻡ ﺍﻟﺜﺎﻧﻴﺔ“ﺣﻜﻤﺖ“ﻭﻁﺒﺎﻋﺔ ﺑﺘﻨﻔﻴﺬ ﻓﺴﻴﻘﻮﻡ ،“ﺃﻧﻴﺲ
ﺣﻜﻤﺖ“ﺍﻟﺮﺍﺑﻂ ﻋﻠﻰ ﺍﻟﻀﻐﻂ ﻋﻨﺪx.
(2ﻣﻦ ﺃﻛﺜﺮ ﻭﺿﻊ ﺇﺳﺘﺨﺪﺍﻣﻬﺎ ﺧﻼﻝ ﻣﻦ ﻳﻤﻜﻨﻚEventﻳﻌﻨﻲ ،ﺍﻟﻌﻨﺼﺮ ﻟﻨﻔﺲ
ﻣﺜﻼclick, onfocus, oncopy..ﺍﻟﺴﻜﺮﺑﺖ ﺧﻼﻝ ﻣﻦ ﻭﺫﻟﻚ ،ﺍﻟﺦ.
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
47. Event Listener
(3ﺍﻝ ﺍﺳﺘﺨﺪﺍﻡ ﺃﻳﻀﺎ ﻳﻤﻜﻨﻨﺎEventﺍﻝ ﻣﻊ ﺧﻼﻟﻬﺎ ﻣﻦwindowﻧﻜﺘﻔﻲ ﻭﻻ ،
ﺍﻝ ﺑﻌﻨﺎﺻﺮ ﻓﻘﻂHTML^_^
(4ﺍﻟﺸﻴﻔﺮﺓ ﻭﻭﺿﻮﺡ ،ﻭﺍﻟﺘﻌﺪﻳﻞ ،ﺍﻟﺘﺤﻜﻢ ﻓﻲ ﺃﺳﻬﻞ ﺃﻧﻬﺎ ﻣﺰﺍﻳﻬﺎ ﻣﻦ ﺃﻳﻀﺎ
ﺍﻟﺘﻘﻠﻴﺪﻳﺔ ﺍﻟﻄﺮﻳﻘﺔ ﻣﻦ ﺍﻟﺒﺮﻣﺠﻴﺔ^_^.
(5ﺍﻝ ﺣﺬﻑ ﺑﺴﻬﻮﻟﺔ ﻭﻳﻤﻜﻨﻚEvent Listenerﻣﻦ ﻓﻘﻂ ﻋﻠﻴﻪ ﻋﻤﻠﺖ ﺍﻟﺬﻱ
ﻭﺍﺣﺪﺓ ﺟﻤﻠﺔ ﺧﻼﻝ^_^ﻭﻫﻲremoveEventListener()
ﻣﺜﺎﻻ ﻟﻨﺸﺎﻫﺪ ﻭﺍﻵﻥ) :ﺍﻟﻤﺜﺎﻝ ﻧﺘﺎﺋﺞ ﻫﺬﻩ(
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
50. Event Listener
ﻣﺜﺎﻝ3:
ﺍﻟﻤﺜﺎﻝ ﻫﺬﺍ ﻓﻲ)ﺍﻝ ﺧﻼﻝ ﻣﻦ ﻗﻴﻢ ﺑﺎﺭﺳﺎﻝ ﺳﻨﻘﻮﻡEvent Listenerﺍﻝ ﺍﻟﻰ
Functionﺍﻷﻣﺜﻠﺔ ﻓﻲ ﺍﻟﻨﻈﺮ ﺩﻗﻘﺖ ﻓﺈﺫﺍ ،ﻣﻬﻢ ﺃﻣﺮ ﻭﻫﺬﺍ ،ﺍﺳﺘﺨﺪﺍﻣﻪ ﺍﻟﻤﺮﺍﺩ
ﺑﻮﺿﻊ ﺣﺘﻰ ﻧﻘﻢ ﻭﻟﻢ ،ﻣﺘﻐﻴﺮﺍﺕ ﻧﺮﺳﻞ ﻟﻢ ﺃﻧﻨﺎ ﺳﺘﺠﺪ ﺍﻟﺴﺎﺑﻘﺔ()ﺍﻝ ﺍﺳﻢ ﺑﻌﺪ
functionﺑﺎﺳﺘﺪﻋﺎﺋﻪ ﻧﻘﻮﻡ ﺍﻟﺬﻱ^_^..ﺍﻟﻨﻘﺎﻁ ﻟﻬﺬﻩ ﺍﻧﺘﺒﻪ ﻟﺬﻟﻚ.^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
51. Event Listener
ﻣﺜﺎﻝ4:Bubbling )ﺃﻡCapturingEvent Propagation(^_^
ﺩﺍﺧﻞ ﻣﻮﺟﻮﺩ ﻣﻌﻴﻦ ﻧﺺ ﻋﻠﻰ ﺑﺎﻟﻨﻘﺮ ﺍﻟﻤﺴﺘﺨﺪﻡ ﻳﻘﻮﻡ ﻋﻨﺪﻣﺎ<p>ﺍﻝ ﻭﻫﺬﻩ
<p>ﺩﺍﺧﻞ ﻣﻮﺟﻮﺩﺓ<div>ﺍﻝ ﺗﻨﻔﻴﺬ ﺳﻴﺘﻢ ﻫﻞ ،clickﻋﻠﻰpﻋﻠﻰ ﺃﻡ ؟ ﻓﻘﻂ
divﺍﻝ ﺗﻨﻔﻴﺬ ﺳﻴﺘﻢ ﺃﻡ ؟ ﻓﻘﻂclickﻋﻠﻰpﺛﻢdiv.ﺍﻝ ﺗﻨﻔﻴﺬ ﺳﻴﺘﻢ ﺃﻡ ؟click
ﻋﻠﻰdivﺛﻢp؟
؟ ﻣﻬﻤﺎ ﺗﺮﺍﻩ ﻭﻫﻞ ﺍﻟﻤﻮﺿﻮﻉ؟ ﻓﻲ ﺻﺪﻳﻘﻲ ﺭﺃﻳﻚ ﻣﺎ
ﺍﻟﺘﻲ ﺍﻟﻌﻤﻠﻴﺎﺕ ﻣﺠﻤﻮﻉ ﻓﻲ ﻟﻠﺘﺤﻜﻢ ﺟﺪﺍ ﻭﺟﻤﻴﻞ ﻣﻬﻢ ﺻﺪﻳﻘﻲ ﺍﻟﻤﻮﺿﻮﻉ ﻫﺬﺍ ﺇﻥ
ﺃﻣﺎ ،ﻋﺒﺜﺎ ﻳﻮﺟﺪ ﻭﻟﻢ ،ﻣﻬﻢ ﺍﻷﻣﺮ ﻓﻬﺬﺍ ﻟﺬﺍ ،ﻟﺬﻟﻚ ﺍﻟﻤﻨﺎﺳﺒﻖ ﻭﺍﻟﻮﻗﺖ ﺑﺘﻨﻔﻴﺬﻫﺎ ﻧﺮﻏﺐ
ﺍﻟﺘﻲ ﺍﻹﺟﺎﺑﺔ ﺇﺧﺘﻴﺎﺭ ﻳﻤﻜﻨﻚ ﺑﺄﻧﻚ ﻓﺄﺟﻴﺒﻚ ،ﻁﺮﺣﻬﺎ ﺗﻢ ﺍﻟﺘﻲ ﺍﻷﺳﺌﻠﺔ ﺑﺨﺼﻮﺹ
ﺑﻚ ﺍﻟﺨﺎﺻﺔ ﺍﻟﺒﺮﻣﺠﻴﺔ ﺍﻟﺸﻴﻔﺮﺓ ﺧﻼﻝ ﻣﻦ ﺗﺮﻏﺒﻬﺎ^_^...
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
52. Event Listener
Bubbling:ﺍﻝ ﻟﺘﻨﻔﻴﺬ ﺍﻟﻌﻤﻞ ﺳﻴﺮ ﺃﻥ ﺗﻌﻨﻲ ﻫﺬﻩEvent)ﻭﻟﻴﻜﻦclick(ﺗﻢ ﺇﺫﺍ
ﺍﻟﺘﺎﻟﻲ ﺑﺎﻟﺸﻜﻞ ﺍﻟﻨﺺ ﻋﻠﻰ ﺍﻟﻨﻘﺮ:p -> div.
Capturing:ﺍﻝ ﻟﺘﻨﻔﻴﺬ ﺍﻟﻌﻤﻞ ﺳﻴﺮ ﺃﻥ ﺗﻌﻨﻲ ﻫﺬﻩEvent)ﻭﻟﻴﻜﻦclick(ﺍﺫﺍ
ﺍﻟﺘﺎﻟﻲ ﺑﺎﻟﺸﻜﻞ ﺍﻟﻨﺺ ﻋﻠﻰ ﺍﻟﻨﻘﺮ ﺗﻢ:div -> p.
ﻫﻲ ﺍﻹﻓﺘﺮﺍﺿﻴﺔ ﺍﻟﺼﻴﻐﺔ:addEventListener(event, function, propagation);
Propagation:ﻫﻲ ﺍﻹﻓﺘﺮﺍﺿﻴﺔ ﺍﻟﺤﺎﻟﺔfalse)Bubbling(ﻭtureﺗﻌﻨﻲ
capturing^_^
ﻭﻅﻴﻔﺔ:
ﺍﻝ ﻋﻠﻰ ﺍﻟﻀﻐﻂ ﺑﺨﻴﺎﺭ ﺍﻟﺘﺤﻜﻢ ﺑﺨﺼﻮﺹpﺍﻝ ﻭﺗﻨﻔﻴﺬEventﺍﻝ ﺩﻭﻥdivﺃﻭ
ﺍﻟﻨﻘﺮ ﻓﻌﺎﻟﻴﺔ ﺍﻟﻐﺎء ﺃﻭ ،ﺍﻟﻌﻜﺲ)No Action(ﻭﺍﻟﻘﺮﺍﺋﺔ ﺍﻟﺒﺤﺚ ﺧﻼﻝ ﻣﻦ ﻳﻜﻮﻥ ﻓﻬﺬﺍ ،
ﺍﻟﻤﻮﺍﺿﻴﻊ ﻫﺬﻩ ﺇﺣﺪﻯ ﻋﻦ..stopPropagation()ﺃﻭpreventDefault()
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
54. Event Listener
ﺍﻝ ﻋﻦ ﻭﻫﻮ ﻣﺜﺎﻝ ﻭﺁﺧﺮremoveEventListenerﻟﻪ ﺍﻟﻌﺎﻣﺔ ﻭﺍﻟﺼﻴﻐﺔ ،
ﺍﻝ ﺗﺸﺒﻪaddEventListenerﺑﺤﺬﻑ ﺗﺮﻏﺐ ﻭﻋﻨﺪﻣﺎ ،Eventﻛﺘﺎﺑﺔ ﻋﻠﻴﻚ
ﺍﻝremoveﺑﺎﻝ ﺍﻟﺨﺎﺻﺔ ﺍﻟﻄﺮﻳﻘﺔ ﺑﺬﺍﺕadd...ﺍﻟﻤﺜﺎﻝ ﺷﺎﻫﺪ:
ﻣﺜﺎﻝ1 ﻣﺜﺎﻝ2
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
55. ﺍﻟﻤﻠﻚ ﷲ ّﺇﻻ ﺇﻟﻪ ﻻّﻖﺍﻟﺤﺁﺑﺎﺋﻨﺎ ّﻭﺭﺏ ّﻨﺎﺑﺭ ﷲ ّﺇﻻ ﺇﻟﻪ ﻻ ،ﺍﻟﻴﻘﻴﻦ ﺍﻟﻌﺪﻝ ﷲ ّﺇﻻ ﺇﻟﻪ ﻻ ،ﺍﻟﻤﺒﻴﻦ
ﻭﻟﻪ ﺍﻟﻤﻠﻚ ﻟﻪ ،ﻟﻪ ﺷﺮﻳﻚ ﻻ ﻭﺣﺪﻩ ﷲ ّﺇﻻ ﺇﻟﻪ ﻻ ،ﺎﻟﻤﻴﻦّﺍﻟﻈ ﻣﻦ ﻛﻨﺖ ﻲّﻧﺇ ﺳﺒﺤﺎﻧﻚ ،ﻟﻴﻦّﻭﺍﻷ
ٍءﺷﻲ ّﻞﻛ ﻋﻠﻰ ﻭﻫﻮ ،ﺍﻟﻤﺼﻴﺮ ﻭﺇﻟﻴﻪ ،ﺍﻟﺨﻴﺮ ﺑﻴﺪﻩ ،ﻳﻤﻮﺕ ﻻ ﱞﺣﻲ ﻭﻫﻮ ،ﻭﻳﻤﻴﺖ ﻳﺤﻴﻲ ﺍﻟﺤﻤﺪ
ّﺇﻻ ﺓّﻮﻗ ﻭﻻ ﺣﻮﻝ ﻭﻻ ،ﻟﻌﻈﻤﺘﻪ ًﺎﺧﻀﻮﻋ ﷲ ﺳﺒﺤﺎﻥ ،ّﺘﻪﻴﺑﺮﺑﻮﺑ ًﺍﺇﻗﺮﺍﺭ ﷲ ّﺇﻻ ﺇﻟﻪ ﻻ ،ﻗﺪﻳﺮ
ﷲ ّﺇﻻ ﺇﻟﻪ ﻻ ،ﺍﻟﻴﻘﻴﻦ ﺍﻟﻌﺪﻝ ﷲ ّﺇﻻ ﺇﻟﻪ ﻻ ،ﺍﻟﻤﺒﻴﻦ ﺍﻟﻤﻠﻚ ﷲ ّﺇﻻ ﺇﻟﻪ ﻻ ،ﺍﻟﻌﻈﻴﻢ ّﻲﺍﻟﻌﻠ ہﻠﻟ
ﻗﺪﻳﺮ ٍءﺷﻲ ّﻞﻛ ﻋﻠﻰ ﻭﻫﻮ ﺍﻟﺤﻤﺪ ﻭﻟﻪ ﺍﻟﻤﻠﻚ ﻟﻪ ،ﻟﻪ ﺷﺮﻳﻚ ﻻ ﻭﺣﺪﻩ.
ﺧﺎﻁﺭﺓ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
57. ﺍﻝ ﺗﻌﺭﻳﻑBOM
ﺍﻝBOMﻝ ﺇﺧﺘﺼﺎﺭ ﻫﻲBrowser Object Modelﺍﻟﺪﻭﺍﻝ ﺗﻌﻨﻲ ﻭﻫﺬﻩ ،
ﺳﻜﺮﺑﺖ ﻟﻠﺠﺎﻓﺎ ﺗﺴﻤﺢ ﻭﺍﻟﺘﻲ ،ﺍﻹﻧﺘﺮﻧﺖ ﻣﺘﺼﻔﺢ ﻓﻲ ﺍﻟﻤﻮﺟﻮﺩﺓ ﻭﺍﻟﺨﺼﺎﺋﺺ
ﻣﻌﻬﺎ ﺑﺎﻟﺘﻌﺎﻣﻞ^_^..
ﻣﻮﺟﻮﺩ ﻫﻮ ﻣﺎ ﺃﻥ ﻳﻌﻨﻲ ﻓﻬﺬﺍ ،ﺍﻹﻧﺘﺮﻧﺖ ﻣﺘﺼﻔﺢ ﻋﻠﻰ ﻳﻌﺘﻤﺪ ﻫﻨﺎ ﺍﻟﺘﻌﺎﻣﻞ ﺃﻥ ﻭﺑﻤﺎ
ﻳﻌﻨﻲ ﻭﻫﺬﺍ ،ﺁﺧﺮ ﻣﺘﺼﻔﺢ ﻓﻲ ﻣﻮﺟﻮﺩﺍ ﻳﻜﻮﻥ ﺃﻥ ﺑﺎﻟﻀﺮﻭﺭﺓ ﻟﻴﺲ ،ﻣﺎ ﻣﺘﺼﻔﺢ ﻓﻲ
ﺃﻳﻀﺎ“ﻟﻞ ﺭﺳﻤﻴﺔ ﻣﻌﺎﻳﻴﺮ ﺗﻮﺟﺪ ﻻBOM“ﺍﻟﺨﺎﺻﻴﺔ ﻓﺈﻥ ﻫﺬﺍ ﻣﻊ ﻟﻜﻦ ،
ﺗﺤﺎﻭﻝ ،ﻣﻨﻬﺎ ﺍﻟﺮﺋﻴﺴﻴﺔ ﻭﺧﺼﻮﺻﺎ ﺍﻟﻤﺘﺼﻔﺤﺎﺕ ﻓﺈﻥ ﻭﻟﻬﺬﺍ ،ﺑﻤﻜﺎﻥ ﺑﺎﻷﻫﻤﻴﺔ
ﺍﻟﻐﺎﻟﺐ ﻓﻲ ﺑﻜﺜﺮﺓ ﺍﺳﺘﺨﺪﺍﻣﻪ ﻳﺘﻢ ﻣﺎ ﻋﻠﻰ ﺍﻟﺤﻔﺎﻅ^_^..ﺑﺮﻛﺔ ﻋﻠﻰ ﻟﻨﺒﺪء ﻭﺍﻵﻥ
ﺍﻝ ﻓﻲ ﺑﺎﻟﻐﻮﺹ ﻭﻟﻨﺒﺪء ،ﺍﻟﺠﺰﺋﻴﺔ ﻫﺬﻩ ﺑﺪﺭﺍﺳﺔ ،ﺗﻌﺎﻟﻰ ﷲBOM*_*
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
58. ﺍﻝ ﺗﻌﺭﻳﻑBOM
ﺍﻝ ﻣﻔﻬﻮﻡ ﺗﻮﺿﺢ ﻭﺍﻟﺘﻲ ،ﺍﻟﺼﻮﺭﺓ ﻫﺬﻩ ﺷﺎﻫﺪ ﻭﺍﻵﻥBOMﺳﻬﻞ ﺑﺸﻜﻞ^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
59. ﺍﻝ ﺗﻌﺭﻳﻑBOM
ﻟﻞ ﻛﻴﻒ ﺍﻟﺴﺎﺑﻔﺔ ﺍﻟﺼﻮﺭﺓ ﻣﺸﺎﻫﺪﺓ ﻭﺑﻌﺪ ،ﺍﻵﻥ ﺑﺒﺎﻟﻚ ﺧﻄﺮﺕ ﻣﻼﺣﻈﺔ ﺃﻭﻝ
Windowﻓﻲ ﺗﻜﻮﻥ ﺃﻥparentﻣﻦ ﻟﻜﻞdocumentﺍﻝ ﻋﻦ ﺗﻌﻠﻤﻨﺎﻩ ﻭﻣﺎ
HTML DOMﺍﻝ ﻭﻋﻦBOMﻭﻋﻦ ،ﺧﺼﺎﺋﺺ ﻣﻦ ﺑﻪ ﺗﺘﻌﻠﻖ ﻭﻣﺎ ﻧﻔﺴﻪ
ﺳﻜﺮﺑﺖ ﺍﻟﺠﺎﻓﺎ^_^ﺍﻝ ﺗﻌﺮﻳﻒ ﻓﻲ ﻳﻜﻤﻦ ﺑﺴﺎﻁﺔ ﺑﻜﻞ ﻭﺍﻟﺠﻮﺍﺏ ،window^^
ﺍﻝwindowﻫﻲobjectﻋﻠﻰ ﻭﻳﺤﺘﻮﻱ ،ﺍﻟﻤﺘﺼﻔﺤﺎﺕ ﺟﻤﻴﻊ ﻣﻦ ﺩﻋﻤﻪ ﺗﻢ
ﻭﺍﻟﺨﺼﺎﺋﺺ ﺍﻟﺪﻭﺍﻝ ﺃﺷﻬﺮ)Global method & property(ﺑﺎﻹﺿﺎﻓﺔ
ﻭﺍﻝ ،ﺍﻟﻤﺘﻐﻴﺮﺍﺕ ﺍﻟﻰfunctionﺧﻼﻝ ﻣﻦ ﻟﻚ ﺗﻤﺜﻴﻠﻬﺎ ﻳﺘﻢ ﺧﻼﻟﻬﺎ ﻣﻦ ﻭﺍﻟﺘﻲ ،
ﺗﺼﺒﺢ ،ﻭﻏﻴﺮﻫﺎ ﻭﺩﻭﺍﻝ ﻣﺘﻐﻴﺮﺍﺕ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﻫﺬﻩ ﻭﺟﻤﻴﻊ ،ﺍﻟﻤﺘﺼﻔﺢ ﻧﺎﻓﺬﺓ
ﺍﻝ ﺩﺍﺧﻞ ﻛﻌﻀﻮ ﺗﻠﻘﺎﺋﻲ ﺑﺸﻜﻞwindow object^_^:P
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
60. ﺍﻝ ﺗﻌﺭﻳﻑBOM
ﺍﻟﺼﻴﻐﺔ ﺑﻬﺬﻩ ﺭﺃﻳﻚ ﺗﻌﻄﻴﻨﻲ ﺃﻥ ﺃﺭﻳﺪﻙ ﻭﺍﻵﻥ:
window.document.getElementById("header");
ﺗﻌﺮﻓﻬﺎ؟ ﺻﻴﻐﺔ ﺗﺸﺒﻪ ﻫﻞ
ﻋﻦ ﺗﺨﺘﻠﻒ ﻭﻫﻞdocument.getElementById("header");؟
ﺍﻝ ﺣﺪﻳﺜﻨﺎ ﺧﻀﻢ ﻓﻲ ﻗﻠﻨﺎ ﺃﻧﻨﺎ ﻳﻌﻮﺩ ﺫﻟﻚ ﻓﻲ ﻭﺍﻟﺴﺒﺐ ،ﺗﺨﺘﻠﻒ ﻻ ﺍﻟﺠﻮﺍﺏ
windowﺍﻝ ﻫﻲparentﺗﻤﺜﻞ ﻭﺃﻧﻬﺎobjectﺗﻠﻘﺎﺋﻴﺎ ﻳﺼﺒﺢ ﺗﺤﺘﻬﺎ ﻣﺎ ﻭﺃﻥ
ﺍﻝ ﻟﻬﺬﺍ ﺗﺎﺑﻊobject..^_^ﺍﻷﻭﻟﻰ ﺫﺍﺗﻬﺎ ﻫﻲ ﺍﻟﺜﺎﻧﻴﺔ ﻓﺈﻥ ﻭﺑﻬﺬﺍ ،^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
61. JS Popup
ﺍﻝWindow^_^ﺍﻝ ﻋﻦ ﺑﺎﻟﺤﺪﻳﺚ ﻗﻤﻨﺎ ﺍﻟﺘﻌﺮﻳﻒ ﻓﻲ ،windowﻭﺗﻌﺮﻓﻨﺎ
ﺍﻟﺪﻭ ﺃﺷﻬﺮ ﻋﻦ ﻟﻨﺘﺤﺪﺙ ﻭﺍﻵﻥ ،ﻋﻠﻴﻬﺎh،ﺇﺳﺘﺨﺪﺍﻣﻬﺎ ﻳﻤﻜﻨﻨﺎ ﺍﻟﺘﻲ ﻭﺍﻟﺨﺼﺎﺋﺺ ﻝ
ﺍﻝ ﻣﻮﺿﻮﻉ ﺗﺤﺖ ﺑﺎﻟﻨﻬﺎﻳﺔ ﺗﻨﺪﺭﺝ ﻭﺍﻟﺘﻲwindow..ﻭﺃﻭﻝobjectﺍﻝ ﻫﻮJS
Popup
(1alert():ﺷﻜﻞ ﻋﻠﻰ ﺭﺳﺎﻟﺔ ﻹﻅﻬﺎﺭ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡPopup^_^.
(2confirm():ﺷﻜﻞ ﻋﻠﻰ ﺭﺳﺎﻟﺔ ﻹﻅﻬﺎﺭ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡPopupﻓﻴﻬﺎ
ﺍﻹﻟﻐﺎء ﺃﻭ ﻟﻠﺘﺄﻛﻴﺪ ﺃﺯﺭﺍﺭ^_^.
(3prompt():ﺷﻜﻞ ﻋﻠﻰ ﺭﺳﺎﻟﺔ ﻹﻅﻬﺎﺭ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡPopupﻭﺗﺤﺘﻮﻱ ،
ﻭﺍﻹﻟﻐﺎء ﻟﻠﻤﻮﺍﻓﻘﺔ ﺯﺭ ﻣﻊ ،ﻗﻴﻤﺔ ﻹﺩﺧﺎﻝ ﻧﺺ ﻣﺮﺑﻊ ﻋﻠﻰ.
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
63. JS Timing
،ﺟﺪﺍ ﻭﺍﻟﺮﺍﺋﻌﺔ ،ﺟﺪﺍ ﺍﻟﻤﻬﻤﺔ ﺍﻷﻣﻮﺭ ﻣﻦ ﺳﻜﺮﺑﺖ ﺍﻟﺠﺎﻓﺎ ﻓﻲ ﺍﻟﻮﻗﺖ ﻣﻊ ﺍﻟﺘﻌﺎﻣﻞ ﺇﻥ
ﺍﻟﻰ ﺗﻌﺎﻟﻰ ﷲ ﺑﺈﺫﻥ ﺍﻵﻥ ﺳﻨﺘﻄﺮﻕ ﻭﻟﻬﺬﺍ ،ﻛﺜﻴﺮﺓ ﺑﺮﻣﺠﻴﺔ ﻣﺸﺎﻛﻞ ﻣﻦ ﺗﻨﻘﺬ ﻭﺍﻟﺘﻲ
ﻭﻫﻤﺎ ﻣﻬﻤﺘﻴﻦ ﺩﺍﻟﺘﻴﻦ:
(1setInterval():،ﺍﻟﻤﺮﺓ ﺗﻠﻮ ﻣﺮﺓ ﺑﺮﻣﺠﺔ ﺷﻴﻔﺮﺓ ﻟﺘﻨﻔﻴﺬ ﺍﻟﺪﺍﻟﺔ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡ
ﻛﻤﺎ ،ﺑﺘﺤﺪﻳﺪﻫﺎ ﻛﻤﺒﺮﻣﺞ ﺃﻧﺖ ﺗﻘﻮﻡ ،ﻣﺤﺪﺩﺓ ﺯﻣﻨﻴﺔ ﻓﺘﺮﺓ ﻋﻠﻰ ﺑﻨﺎﺋﺎ ﺗﻮﻗﻒ ﺩﻭﻥ
ﻣﻌﻴﻨﺔ ﻟﺤﻈﺔ ﻓﻲ ﺍﻟﺘﻜﺮﺍﺭ ﻫﺬﺍ ﻹﻧﻬﺎء ﺁﺧﺮ ﺑﺮﻣﺠﻲ ﺧﻴﺎﺭ ﻟﻚ ﻳﺘﻮﻓﺮ ﺃﻧﻪ^^
ﻫﻲ ﺍﻟﻌﺎﻣﺔ ﻭﺍﻟﺼﻴﻐﺔ:
setInterval("javascript function", milliseconds);
ﺍﻝ ﻓﺈﻥ ﺗﺄﻛﻴﺪ ﻭﺑﻜﻞwindowﺫﻟﻚ ﻟﺠﻮﺍﺯ ﺑﺤﺬﻓﻬﺎ ﻗﻤﻨﺎ ﻟﻜﻦ ﻣﻮﺟﻮﺩﺓ^^،
ﺍﻝ ﻣﻊ ﻓﻌﻠﻨﺎ ﻭﻛﻤﺎ ﺳﺎﺑﻘﺎ ﺫﻛﺮﻧﺎ ﻛﻤﺎalertﻣﺮﺓ ﺍﻟﻤﻌﻠﻮﻣﺔ ﺑﻬﺬﻩ ﺃﺫﻛﺮﻙ ﻭﻟﻦ ،
ﺃﺧﺮﻯ:P
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
64. JS Timing
ﻋﻠﻰ ﻣﻼﺣﻈﺎﺕsetInterval:
(1ﺍﻝ ﻟﻬﺬﺍ ﺍﻟﻌﺎﻣﺔ ﺑﺎﻟﺼﻴﻐﺔFunctionﺃﻥ ﻧﺠﺪ“javascript
function”ﺗﺴﺘﺨﺪﻡ ﺃﻥ ﻳﺠﺐ ﺃﻧﻚ ﺗﻌﻨﻲfunctionﺍﺳﺘﺨﺪﺍﻡ ﻳﺠﻮﺯ ﻭﻻ
ﺍﻝ ﻏﻴﺮfunction^_^.
(2Millisecondsﺩﻭﺭﺓ ﻟﻜﻞ ﺍﻟﻤﻄﻠﻮﺏ ﺍﻟﻮﻗﺖ ﻫﻮ)ﻟﻴﺘﻢ ﺍﻟﻼﺯﻡ ﺍﻟﻮﻗﺖ ﺃﻱ
ﺑﻮﺿﻊ ﻗﻤﻨﺎ ﻓﻠﻮ ،ﻣﺮﺓ ﻛﻞ ﻓﻲ ﺍﻟﺒﺮﻣﺠﻴﺔ ﺍﻟﺸﻴﻔﺮﺓ ﺗﻨﻔﻴﺬ1000ﻳﻌﻨﻲ ﻓﻬﺬﺍ ،1
ﻭﺍﺣﺪﺓ ﻣﺮﺓ ﺛﺎﻧﻴﺔ ﻛﻞ ﺗﻨﻔﻴﺬﻫﺎ ﺳﻴﺘﻢ ﺍﻟﺒﺮﻣﺠﻴﺔ ﺍﻟﺸﻴﻔﺮﺓ ﺃﻥ ﺃﻱ ،ﺛﺎﻧﻴﺔ^_^.
)1000 ms=1s(
(3ﺗﺴﺘﺨﺪﻡclearInterval()ﺍﻝ ﻹﻳﻘﺎﻑsetIntervalﺍﻟﻌﺎﻣﺔ ﻭﺍﻟﺼﻴﻐﺔ
ﻫﻲ ﻟﻬﺎ:clearInterval(intervalVariable)ﻭﺍﻝ ،
intervalVariableﻣﺜﻞ ﺍﻟﻮﻗﺖ ﺩﺍﻟﺔ ﺍﻟﻴﻪ ﺍﺳﻨﺪ ﺍﻟﺬﻱ ﺍﻟﻤﺘﻐﻴﺮ ﺗﻌﻨﻲ ﻫﺬﻩ
intervalVariable = setInterval(”…”, 2000);
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
65. JS Timing
.2setTimeout():ﺍﻟﺘﻲ ﺍﻟﺒﺮﻣﺠﻴﺔ ﺍﻟﺸﻴﻔﺮﺓ ﺗﻨﻔﻴﺬ ﻋﻠﻰ ﺍﻟﺪﺍﻟﺔ ﻫﺬﻩ ﺗﻘﻮﻡ
ﺍﻟﺸﻴﻔﺮﺓ ﺗﻨﻔﻴﺬ ﻳﺘﻢ ﺣﺘﻰ ﺍﻟﻼﺯﻡ ﺍﻟﻮﻗﺖ ﺗﺤﺪﻳﺪ ﻭﻳﺘﻢ ،ﻓﻘﻂ ﻭﺍﺣﺪﺓ ﻟﻤﺮﺓ ﺗﺤﺘﻮﻳﻬﺎ
ﺑﺎﻝ ﺍﻟﺒﺮﻣﺠﺔmsﺃﻳﻀﺎ..
ﺍﻟﻌﺎﻣﺔ ﺍﻟﺼﻴﻐﺔ:
setTimeout("javascript function", milliseconds);
ﻋﻠﻰ ﻣﻼﺣﻈﺎﺕ ﻣﻦ ﺫﻛﺮﻩ ﺗﻢ ﻣﺎ ﺗﺄﻛﻴﺪ ﺑﻜﻞsetIntervalﻫﻨﺎ ﻳﻨﻄﺒﻖ
ﻫﻮ ﺍﻟﻤﺆﻗﺖ ﻫﺬﺍ ﺍﻟﻐﺎء ﻋﻦ ﻫﻨﺎ ﺍﻟﻤﺴﺆﻭﻟﺔ ﺍﻟﺪﺍﻟﺔ ﻟﻜﻦ ،ﺃﻳﻀﺎ
clearTimeout(timeoutVariable)
ﻭﺍﻵﻥ..ﺍﻝ ﻋﻠﻰ ﻣﺘﻨﻮﻋﺔ ﺃﻣﺜﻠﺔ ﻭﻧﺸﺎﻫﺪ ﻟﻨﺬﻫﺐJS Timing^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
66. JS Timing
ﻣﺜﺎﻝ:
ﻋﻠﻰ ﺍﻟﻤﺜﺎﻝ ﺗﻄﺒﻴﻖ ﺃﺭﺩﺕ ﺇﺫﺍclearTimeoutﻓﻌﻠﻴﻚ
ﺍﻝ ﺯﺭ ﻋﻠﻰ ﺗﻨﻘﺮ ﺃﻥClear Time Outﺑﻌﺪ ﻣﺒﺎﺷﺮﺓ
ﻋﻠﻰ ﺍﻟﻀﻐﻂStart Time)ﺗﻤﻠﻚ3ﻓﻘﻂ ﺛﻮﺍﻧﻲ:P(
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
67. ﺍﻟﺤﻖ ﻭﻓﻲ ﻭﻟﻠﺤﻖ ﺑﺎﻟﺤﻖ ﻗﻮﻧﺎ ﺍﻟﻠﻬﻢ
ﺃﻧﻔﺴﻨﺎ ﺷﺮﻭﺭ ﻣﻦ ﻭﺃﻋﺬﻧﺎ
ﻭﺑﺤﻤﺪﻙ ﺍﻟﻠﻬﻢ ﺳﺒﺤﺎﻧﻚ
ﺃﻧﺖ ﺇﻻ ﺇﻟﻪ ﻻ ﺃﻥ ﺃﺷﻬﺪ
ﺇﻟﻴﻚ ﻭﺃﺗﻮﺏ ﺃﺳﺘﻐﻔﺮﻙ
ﺧﺎﻁﺭﺓ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
68. JS Screen
ﺍﻝ ﻫﺬﺍ ﻳﺴﺘﺨﺪﻡObject،ﻟﻠﻤﺴﺘﺨﺪﻡ ﺍﻟﻌﺮﺽ ﺑﺸﺎﺷﺔ ﺍﻟﺨﺎﺻﺔ ﺍﻟﻤﻌﻠﻮﻣﺎﺕ ﻟﺠﻠﺐ
ﺑﺎﻟﺸﺎﺷﺔ ﺍﻟﺨﺎﺹ ﻭﺍﻟﻌﺮﺽ ﺍﻹﺭﺗﻔﺎﻉ ﻫﻲ ﺍﻟﻤﻌﻠﻮﻣﺎﺕ ﻫﺬﻩ ﻭﺃﻫﻢ^_^.
ﻋﻨﻬﺎ ﺳﻨﺘﺤﺪﺙ ﺍﻟﺘﻲ ﺍﻟﺨﺼﺎﺋﺺ:
(1screen.width:ﺑﺎﻟﺒﻜﺴﻞ ﺑﺎﻟﺸﺎﺷﺔ ﺍﻟﺨﺎﺹ ﺍﻟﻌﺮﺽ ﻟﺠﻠﺐ ﻫﺬﻩ ﻭﺗﺴﺘﺨﺪﻡ.
(2screen.height:ﺑﺎﻟﺒﻜﺴﻞ ﺑﺎﻟﺸﺎﺷﺔ ﺍﻟﺨﺎﺹ ﺍﻹﺭﺗﻔﺎﻉ ﻟﺠﻠﺐ ﻫﺬﻩ ﻭﺗﺴﺘﺨﺪﻡ
(3screen.availWidthﻭscreen.availHeightﻟﺠﻠﺐ ﻫﺬﻩ ﺗﺴﺘﺨﺪﻡ
ﺑﺎﻟﺒﻜﺴﻞ ﺑﺎﻟﺸﺎﺷﺔ ﺍﻟﺨﺎﺹ ﻭﺍﻟﻌﺮﺽ ﺍﻹﺭﺗﻔﺎﻉ“ﺍﻟﺨﺎﺹ ﺍﻟﺤﺠﻢ ﻁﺮﺡ ﻳﺘﻢ ﻻﻛﻦ
ﺍﻝ ﻣﺜﻞ ،ﺍﻟﺤﺠﻢ ﻣﻦ ﻣﺜﻼ ﺍﻟﺘﺸﻐﻴﻞ ﻟﻨﻈﺎﻡ ﺍﻟﻌﺮﺽ ﻣﺰﺍﻳﺎ ﺑﺒﻌﺾwindows
taskbar^_^
ﻭﺍﻵﻥ..ﺍﻟﻤﺜﺎﻝ ﻟﻤﺸﺎﻫﺪﺓ ﺍﻟﺘﺎﻟﻴﺔ ﻟﻠﺸﺮﻳﺤﺔ ﺍﻧﺘﻘﻞ:^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
70. JS Location
ﺍﻝ ﻫﺬﺍ ﻳﺴﺘﺨﺪﻡobjectﺑﺎﻟﺼﻔﺤﺔ ﺍﻟﺨﺎﺹ ﺍﻟﻌﻨﻮﺍﻥ ﻟﺠﻠﺐ)URL(ﻭﺇﻋﺎﺩﺓ ،
ﻣﺤﺪﺩﺓ ﻣﻌﻠﻮﻣﺎﺕ ﻋﻠﻰ ﺍﻟﺤﺼﻮﻝ ﻳﻤﻜﻦ ﻛﻤﺎ ،ﺃﺧﺮﻯ ﺻﻔﺤﺔ ﺍﻟﻰ ﺍﻟﺼﻔﺤﺔ ﺗﻮﺟﻴﻪ
ﺍﻝ ﻣﻦURLﺍﻝ ﻣﺜﻞhost nameﻭﺍﻝpathﺑﺎﻟﺼﻔﺤﺔ ﺍﻟﺨﺎﺹ^^
ﺑﺎﺳﺘﺨﺪﺍﻣﻬﺎ ﺳﻨﻘﻮﻡ ﺍﻟﺘﻲ ﺍﻟﺪﻭﺍﻝ ﺃﻫﻢ ﻟﻨﺸﺎﻫﺪ ﻭﺍﻵﻥ:
(1location.href:ﺍﻝ ﻟﺠﻠﺐ ﺗﺴﺘﺨﺪﻡURLﺑﺎﻟﺼﻔﺤﺔ ﺍﻟﺨﺎﺹ.
(2location.hostname:ﺍﻝ ﻟﺠﻠﺐ ﺗﺴﺘﺨﺪﻡhostnameﻣﺜﻞ
nees.com2www.
(3location.pathname:ﺍﻝ ﻟﺠﻠﺐ ﺗﺴﺘﺨﺪﻡpathﺑﻤﻠﻒ ﺍﻟﺨﺎﺹ
/js/aneesCustomScript.js
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
71. JS Location
(4location.protocol:ﺍﻝ ﻟﺠﻠﺐ ﻳﺴﺘﺨﺪﻡprotocolﺑﺎﻟﺼﻔﺤﺔ ﺍﻟﺨﺎﺹ
ﻣﺜﻞhttp^_^
(5location.assign():ﻟﻌﻤﻞ ﺗﺴﺘﺨﺪﻡloadﺍﻟﻤﻠﻒ ﻓﻲ ﺁﺧﺮ ﻟﻤﻠﻒ
ﺍﻟﺤﺎﻟﻲ...
ﺍﻷﻣﺜﻠﺔ ﻟﻨﺸﺎﻫﺪ ﻭﺍﻵﻥ:ﻣﺜﺎﻝ1:
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
72. JS Location
ﻣﺜﺎﻝ2:
ﻋﻤﻞ ﺳﻴﺘﻢ ﻫﻨﺎloadﻝ2nees.comﺍﻝ ﻓﻲdocument،ﻓﻴﻪ ﺃﻧﺎ ﺍﻟﺬﻱ
ﺯﺭ ﻋﻠﻰ ﺍﻟﻀﻐﻂ ﺳﻴﻤﻜﻨﻨﻲ ﺃﻧﻪ ﻳﻌﻨﻲ ﻭﻫﺬﺍbackﺧﻄﻮﺓ ﺍﻟﻤﺘﺼﻔﺢ ﻓﻲ ﻟﻠﺮﺟﻮﻉ
ﺍﻝ ﺍﺳﺘﺨﺪﺍﻡ ﻋﻦ ﻳﺨﺘﻠﻒ ﻣﺎ ﻭﻫﺬﺍ ،ﻟﻠﺨﻠﻒlocation.replace!
location.replaceﺍﻝ ﻧﻔﺲ ﺑﺘﺒﺪﻳﻞ ﺗﻘﻮﻡdocumentﻳﻌﻨﻲ ﻭﻫﺬﺍ ،ﻓﻴﻪ ﺃﻧﺎ ﺍﻟﺬﻱ
ﺍﻝ ﺗﺨﺰﻳﻦ ﻋﺪﻡSessionﺑﺎﻝ ﺍﻟﺨﺎﺹhestoryﺯﺭ ﻫﻨﺎﻙ ﻳﻜﻮﻥ ﻟﻦ ﻭﺑﻬﺬﺍback
^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
73. JS Location
ﻣﺜﺎﻝ3:
ﺑﻪ ﺗﺮﻏﺐ ﺍﻟﺬﻱ ﺍﻟﺮﺍﺑﻂ ﺍﻟﻰ ﺍﻟﺼﻔﺤﺔ ﺗﻮﺟﻴﻪ ﺇﻋﺎﺩﺓ ﻳﻤﻜﻨﻚ ﻛﻴﻒ ﺷﺎﻫﺪ^_^
ﻣﻌﺎ ﺍﻷﻣﺜﻠﺔ ﺟﻤﻴﻊ ﻟﻨﺸﺎﻫﺪ ،ﻭﺍﻵﻥ^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
74. JS History
ﺍﻝ ﻫﺬﺍobjectﺍﻝ ﻋﻠﻰ ﻳﺤﺘﻮﻱHistoryﻭﻁﺒﻌﺎ ،ﺑﺎﻟﻤﺘﺼﻔﺢ ﺍﻟﺨﺎﺹ
ﻣﻦ ﻧﻮﻋﺎ ﻳﺤﺘﻮﻱ ﻗﺪ ﻓﺈﻧﻪ ،ﺍﻟﻤﺴﺘﺨﺪﻣﻴﻦ ﻟﺪﻯ ﺧﺼﻮﺻﺎ ﺍﻷﻣﺮ ﻫﺬﺍ ﻭﻟﺨﺼﻮﺻﻴﺔ
ﺍﻝ ﻓﻲ ﺍﻟﻤﺤﻔﻮﻅﺔ ﺍﻟﺮﻭﺍﺑﻂ ﺍﻟﻰ ﺍﻟﻮﺻﻮﻝ ﺣﺮﻳﺔ ﻓﻲ ﺍﻟﻘﻴﻮﺩSession History
ﻭﻫﻨﺎﻙ2 methodﻭﻫﻤﺎ ﺇﺳﺘﺨﺪﺍﻣﻬﺎ ﻳﻤﻜﻨﻨﺎ:
(1history.back():ﺍﻟﺴﺎﺑﻘﺔ ﺍﻟﺼﻔﺤﺔ ﺍﻟﻰ ﻟﻠﺮﺟﻮﻉ ﺗﺴﺘﺨﺪﻡ ﻭﻫﺬﻩ)ﺃﻱ
ﺯﺭ ﻳﻌﻤﻞ ﻛﻤﺎ ﺗﻌﻤﻞbackﺍﻟﻤﺘﺼﻔﺢ ﻓﻲ.(
(2history.forward():ﺍﻟﺘﺎﻟﻴﺔ ﻟﻠﺼﻔﺤﺔ ﻟﻠﺬﻫﺎﺏ ﺗﺴﺘﺨﺪﻡ ﻭﻫﺬﻩ)ﺻﻔﺤﺔ
ﺯﺭ ﻋﻤﻞ ﻭﺗﺸﺒﻪ ،ﻗﺒﻠﻬﺎ ﺻﻔﺤﺔ ﺍﻟﻰ ﻋﺪﺕ ﺛﻢ ﻓﻴﻬﺎ ﻛﻨﺖforwardﻓﻲ
ﺍﻟﻤﺘﺼﻔﺢ(^_^...ﻣﺜﺎﻻ ﻭﻧﺸﺎﻫﺪ ﻟﻨﺬﻫﺐ ﻭﺍﻵﻥ^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
75. JS History
ﻣﺜﺎﻝ:
ﺯﺭ ﻋﻠﻰ ﺑﺎﻟﻀﻐﻂ ﻗﻢ ﺛﻢ ،ﺍﻟﺘﻮﺟﻴﻪ ﺇﻋﺎﺩﺓ ﺯﺭ ﻋﻠﻰ ﺑﺎﻟﻀﻐﻂ ﻗﻢ ﺃﻭﻻ ،ﺍﻟﻤﺜﺎﻝ ﻟﺘﻄﺒﻴﻖ
Back...ﺯﺭ ﻋﻠﻰ ﺑﺎﻟﻀﻐﻂ ﻗﻢ ﺫﻟﻚ ﺑﻌﺪGo Forward^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
76. ﺍﻟﺤﻖ ﻭﻓﻲ ﻭﻟﻠﺤﻖ ﺑﺎﻟﺤﻖ ﻗﻮﻧﺎ ﺍﻟﻠﻬﻢ
ﺃﻧﻔﺴﻨﺎ ﺷﺮﻭﺭ ﻣﻦ ﻭﺃﻋﺬﻧﺎ
ﻭﺑﺤﻤﺪﻙ ﺍﻟﻠﻬﻢ ﺳﺒﺤﺎﻧﻚ
ﺃﻧﺖ ﺇﻻ ﺇﻟﻪ ﻻ ﺃﻥ ﺃﺷﻬﺪ
ﺇﻟﻴﻚ ﻭﺃﺗﻮﺏ ﺃﺳﺘﻐﻔﺮﻙ
ﺧﺎﻁﺭﺓ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
77. JS Cookies
ﻣﻊ ﻟﺬﻳﺬ ﻁﻌﺎﻡ ﻭﺍﻟﻜﻌﻜﺎﺕ ،ﺍﻟﻜﻌﻜﺎﺕ ﻋﻦ ﻳﺘﺤﺪﺙ ﻓﻬﻮ ،ﺟﺪﺍ ﻣﻬﻢ ﺍﻟﻤﻮﺿﻮﻉ ﻫﺬﺍ
ﺍﻟﺸﺎﻱ:P!_!ﺛﺎﻧﻲ ﻟﻤﻮﺿﻮﻉ ﺭﺣﺖ ﺷﻜﻠﻲ ﺑﻌﺘﺬﺭ:P^_^
ﺍﻝCookiesﻣﻠﻒ ﻓﻲ ﺗﺨﺰﻳﻨﻬﺎ ﻳﺘﻢ ﺍﻟﺘﻲ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻣﻦ ﻣﺠﻤﻮﻋﺔ ﻫﻲTXT file
ﺑﺎﻝ ﺍﻟﺨﺎﺹ ﺍﻟﺤﺎﺳﻮﺏ ﺟﻬﺎﺯ ﻋﻠﻰuser،ﺍﻟﺮﺍﺋﻌﺔ ﺍﻟﻔﻜﺮﺓ ﻫﺬﻩ ﺇﺑﺘﻜﺎﺭ ﻭﺳﺒﺐ ،
ﺍﻟﺨﺎﺻﺔ ﺍﻟﻤﻌﻠﻮﻣﺎﺕ ﻋﻠﻰ ﺍﻟﺤﺼﻮﻝ ﺧﻼﻟﻬﺎ ﻣﻦ ﻧﺴﺘﻄﻴﻊ ﻁﺮﻳﻘﺔ ﺍﻟﻰ ﺍﻟﺤﺎﺟﺔ
ﺑﻌﻤﻞ ﺳﻴﻘﻮﻡ ﺍﻟﺴﻴﺮﻓﺮ ﻷﻥ ،ﻟﻠﻤﻮﻗﻊ ﻣﻐﺎﺩﺭﺗﻪ ﺑﻌﺪ ﺑﺎﻟﻤﺴﺘﺨﺪﻡshutdownﻟﻞ
connectionﻭﺑﻬﺬﺍ ،ﺍﻟﻤﺘﺼﻔﺢ ﻋﻠﻰ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻋﺮﺽ ﻣﻦ ﺍﻹﻧﺘﻬﺎء ﻳﺘﻢ ﻋﻨﺪﻣﺎ
ﺍﻝ ﺩﻭﺭ ﻳﻜﻮﻥCookiesﻫﻮ ﺍﻟﺮﺋﻴﺴﻲ“ﻟﺘﻘﺪﻳﻢ ،ﺍﻟﻤﺴﺘﺨﺪﻣﻴﻦ ﻣﻌﻠﻮﻣﺎﺕ ﺣﻔﻆ
ﺧﺪﻣﺔﺃﻓﻀﻞ)ﻟﻠﻤﺴﺘﺨﺪﻡ ﺍﻟﻤﻮﻗﻊ ﻳﻀﻌﻬﺎ ﺍﻟﺘﻲ ﺍﻟﻤﻌﻠﻮﻣﺎﺕ ﺗﻜﻮﻥ ﻗﺪ ﺍﻟﻤﺴﺘﺨﺪﻣﻴﻦ ﻣﻌﻠﻮﻣﺎﺕ
ﺃﻓﻀﻞ ﺧﺪﻣﺔ ﻟﺘﻘﺪﻳﻢ(”) ....ﺍﻟﺴﻠﺒﻲ ﺍﻟﺠﺎﻧﺐ ﻋﻦ ﻫﻨﺎ ﺃﺗﺤﺪﺙ ﻭﻟﻦ:P(
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
78. JS Cookies
ﺍﻝ ﺣﻔﻆ ﻳﺘﻢ ﻛﻴﻒCookiesﺍﻟﻤﻠﻒ؟ ﺩﺍﺧﻞ
ﺍﻝ ﺣﻔﻆ ﻳﺘﻢCookiesﺷﻜﻞ ﻋﻠﻰ ﺍﻟﻤﻠﻒ ﺩﺍﺧﻞName - Valueﻳﻤﺜﻞ ﺑﺤﻴﺚ
ﺍﻝNameﺍﻟﺒﺮﻣﺠﻲ ﺍﻹﺳﻢ)ﺑﺎﺳﺘﺪﻋﺎﺋﻬﺎ ﻧﺮﻏﺐ ﺍﻟﺘﻲ ﺍﻟﻤﻌﻠﻮﻣﺔ ﻳﻤﺜﻞ ﺍﻟﺬﻱ ﺍﻹﺳﻢ
ﻣﺜﻞuserName(ﻭﺍﻝ ،Valueﺍﻹﺳﻢ ﺑﻬﺬﺍ ﺍﻟﺨﺎﺻﺔ ﺍﻟﻘﻴﻤﺔ ﻫﻲ^_^.
ﻋﻠﻰ ﻣﺜﺎﻝcookies:
name = Anees
age = 24
email = aneeshikmat@2nees.com
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
79. JS Cookies
ﺍﻝ ﻓﻲ ﺍﻷﻭﻝ ﺍﻟﻤﻮﺿﻮﻉ ﺣﻮﻝ ﺣﺪﻳﺜﻨﺎ ﻟﻨﺒﺪﺃ ،ﻭﺍﻵﻥCookiesﻭﻫﻮ
ﺃﻭﻻ:Create a Cookie:
ﺍﻝ ﺇﻧﺸﺎء ﻳﻤﻜﻨﻨﺎCookieﺍﺳﺘﺨﺪﺍﻡ ﻁﺮﻳﻖ ﻋﻦ ﻭﺫﻟﻚ ،ﺳﻜﺮﺑﺖ ﺍﻟﺠﺎﻓﺎ ﺧﻼﻝ ﻣﻦ
document.cookieﺑﺎﻝ ﺭﺃﻳﻚ ﻫﻮ ﻣﺎ ،ﺃﻛﻤﻞ ﺃﻥ ﻗﺒﻞ ﻟﻜﻦ ،ﺳﻬﻞ ﺍﻷﻣﺮ ،
document.cookie..ﻫﻲ ﻫﻞDOMﺃﻡBOM؟
ﻳﻜﻮﻥ ﺃﻥ ﻳﺠﺐ ﺍﻟﺠﻮﺍﺏDOMﺗﺄﻛﻴﺪ ﺑﻜﻞ^_^ﺍﻝ ،CookieﺑﺬﺍﺗﻪBOM،
ﺳﻴﻜﻮﻥ ﺍﻟﻌﻤﻠﻴﺎﺕ ﻣﻦ ﻭﻏﻴﺮﻫﺎ ﺍﻟﺼﻔﺤﺔ ﻣﻦ ﺍﻟﻤﻌﻠﻮﻣﺎﺕ ﻟﻨﺤﻔﻆ ﻧﺴﺘﺨﺪﻣﻪ ﻣﺎ ﻟﻜﻦ
ﺍﻝ ﺧﻼﻝ ﻣﻦdocumentﺳﻴﻜﻮﻥ ﺃﻱDOM..^^)ﺍﻟﺘﻨﺒﻴﻪ ﻭﺟﺐ(
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
80. JS Cookies
ﺍﻝ ﺇﻧﺸﺎء ﻋﻨﺪcookiesﺍﻝ ﻟﻬﺬﺍ ﺍﻟﺰﻣﻨﻴﺔ ﺍﻟﻤﺪﺓ ﻣﺜﻞ ،ﺃﻣﻮﺭ ﺑﻌﺪﺓ ﺍﻟﺘﺤﻜﻢ ﻳﻤﻜﻨﻚ
Cookieﺍﻝ ﺑﻬﺬﺍ ﺍﻟﺨﺎﺹ ﺍﻟﺼﻔﺤﺔ ﻭﺍﻣﺘﺪﺍﺩ ،Cookieﺍﻝ ﺗﺤﺪﻳﺪ ﻭﻳﻤﻜﻦ ،
Domainﺍﻝ ﻫﺬﺍ ﺍﻥ ﺗﺤﺪﻳﺪ ﻭﻳﻤﻜﻦ ،Cookieﺍﻝ ﻣﻊ ﺍﻟﻰ ﻳﻌﻤﻞ ﺃﻥ ﻳﺠﺐ ﻻ
Secure Protocolﺍﻝ ﻣﺜﻞHttpsﺧﻴﺎﺭﺍﺕ ﺍﻻﻣﻮﺭ ﻫﺬﻩ ﺟﻤﻴﻊ ﻭﻁﺒﻌﺎ ،
ﺍﻝ ﺏ ﻓﻘﻂ ﺃﻧﺖ ﺗﻠﺰﻡ ،ﺇﻓﺘﺮﺍﺿﻴﺔName – Value^_^
ﻣﺜﺎﻝ) :ﺍﻟﺘﺎﻟﻴﺔ ﻟﻠﺸﺮﻳﺤﺔ ﺍﻧﺘﻘﻞ ﺛﻢ ،ﻓﻴﻪ ﻭﺭﺩ ﻟﻤﺎ ﺟﻴﺪﺍ ﺍﻧﺘﺒﻪ:(
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
81. JS Cookies
ﻣﻼﺣﻈﺎﺕ:
(1ﺃﻱ ﻹﻧﺸﺎء ﻭﺍﻹﺯﺍﻣﻴﺔ ،ﺍﻷﺑﺴﻂ ﺍﻟﺼﻴﻐﺔ ﻫﻲ ﺻﻴﻐﺔ ﺃﻭﻝCookie.
(2ﺍﻝ ﺑﺘﺤﺪﻳﺪ ﻗﻤﻨﺎ ﺻﻴﻐﺔ ﺛﺎﻧﻲExpire dateﺍﻟﺘﻌﺮﻳﻒ ﻁﺮﻳﻘﺔ ﺃﻥ ﻭﻻﺣﻆ ،
ﻛﺘﺎﺑﺔ ﺧﻼﻝ ﻣﻦ ﺗﺘﻢ;ﺍﻝ ﻭﺿﻌﻨﺎ ﺛﻢ ﻭﻣﻦ ،ﺍﻟﺨﻴﺎﺭﺍﺕ ﺑﻴﻦ ﻟﻠﻔﺼﻞexpire.
(3ﺍﻝexpire dateﻳﻜﻮﻥ ﺃﻥ ﻳﺠﺐUTCﺃﻭGMT)ﻭﺍﺣﺪ ﻭﻛﻼﻫﻤﺎ(،
ﺇﺳﺘﺨﺪﺍﻡ ﻳﻤﻜﻨﻚ ﺃﻧﻪ ﻳﻌﻨﻲ ﻭﻫﺬﺍtoGMTStringﺃﻭtoUTCString
ﺍﻟﺼﻴﻐﺔ ﺑﻬﺬﻩ ﺍﻟﻤﻄﻠﻮﺏ ﺍﻟﻮﻗﺖ ﻋﻠﻰ ﻟﻠﺤﺼﻮﻝ^_^
(4ﺍﻝ ﻟﺤﻴﺎﺓ ﺍﻟﻤﺪﺓ ﺑﺘﺤﺪﻳﺪ ﺗﻘﻢ ﻟﻢ ﺣﺎﻟﺔ ﻓﻲcookieﺇﻏﻼﻕ ﺑﻤﺠﺮﺩ ﻳﻨﺘﻬﻲ ﻓﺈﻧﻪ ،
ﺍﻟﻤﺘﺼﻔﺢ.
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
82. JS Cookies
ﺛﺎﻧﻴﺎ:ﻣﻦ ﻟﺪﻳﻨﺎ ﻣﺎ ﺟﻠﺐ ﻳﻤﻜﻨﻨﺎ ﻛﻴﻒcookie؟
ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺠﻮﺍﺏ^_^document.cookieﺃﻳﻀﺎ:P؟ ﺫﻟﻚ ﻛﻴﻒ ،
ﺍﻟﻤﺜﺎﻝ ﺷﺎﻫﺪ) :ﺍﻝ ﺟﻤﻴﻊ ﺃﻥ ﻻﺣﻆCookieﺷﻜﻞ ﻋﻠﻰ ﺟﻠﺒﻬﺎ ﺳﻴﺘﻢ ﻟﺪﻱ ﺍﻟﺘﻲ
string(
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
83. JS Cookies
ﺛﺎﻟﺜﺎ:ﻗﻴﻤﺔ ﺗﻌﺪﻳﻞ ﻳﻤﻜﻨﻨﺎ ﻛﻴﻒCookie؟ ﻣﻮﺟﻮﺩﺓ
ﺍﻝ ﻋﻠﻰ ﺍﻟﺘﻌﺪﻳﻞ ﻋﻤﻠﻴﺔCookieﻋﻠﻰ ﺗﻌﺘﻤﺪnameﻭﻫﻨﺎwebsite،
ﻭﺍﻝ ﻭﺍﻟﻮﻗﺖ ﺍﻟﻘﻴﻤﺔ ﺗﻐﻴﻴﺮ ﻭﻳﻤﻜﻨﻨﻲpath..ﺍﻟﺦ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
84. JS Cookies
ﺭﺍﺑﻌﺎ:ﺣﺬﻑ ﻳﻤﻜﻨﻨﺎ ﻛﻴﻒCookie؟ ﻣﻮﺟﻮﺩ
ﻟﻞ ﺍﻟﺤﺬﻑ ﻋﻤﻠﻴﺔCookieﻋﻠﻰ ﺗﻌﺘﻤﺪname،ﺍﻟﻮﻗﺖ ﺑﺘﺼﻔﻴﺮ ﻭﻧﻘﻮﻡ ،ﺃﻳﻀﺎ
ﺍﻝ ﻟﻴﻜﻮﻥCookieﻣﻨﺘﻬﻲ ﻭﻛﺄﻧﻪ..ﺍﻟﻤﺜﺎﻝ ﺷﺎﻫﺪ:
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
85. JS Cookies
ﺍﻝ ﻣﻊ ﻟﻠﺘﻌﺎﻣﻞ ﺍﻷﺳﺎﺳﻲ ﺍﻟﺸﻜﻞ ﻓﻬﻤﻨﺎ ﻟﻘﺪ ،ﻭﺍﻵﻥcookieﺍﻟﺸﻜﻞ ﻫﺬﺍ ﻫﻞ ،
؟ ﻣﺎ ﻧﻮﻋﺎ ﻣﺸﻜﻠﺔ ﻓﻴﻪ ﺃﻡ ﻣﻨﻄﻘﻲ!
ﻭﺟﻮﺩ ﺣﺎﻟﺔ ﻓﻲ ﺍﻟﻤﻔﻴﺪ ﺍﻟﺒﺴﻴﻂ ﺍﻟﺸﻜﻞ ﻫﻮ ﺫﻛﺮﻧﺎﻩ ﺍﻟﺬﻱ ﺍﻟﺸﻜﻞ ﻫﺬﺍcookie
ﻭﺍﺣﺪﺓ-_-ﻭﻟﺠﻤﻴﻊ ،ﻓﻘﻂ ﻭﺍﻟﻘﻴﻤﺔ ﺍﻻﺳﻢ ﺑﺎﺭﺟﺎﻉ ﻳﻘﻮﻡ ﺗﻼﺣﻆ ﻛﻤﺎ ﺍﻟﺸﻜﻞ ﻫﺬﺍ ﻷﻥ ،
ﺑﻪ ﺃﺭﻏﺐ ﺍﻟﺬﻱ ﺍﻟﻌﻨﺼﺮ ﺃﻳﻀﺎ ﺑﺘﺤﺪﻳﺪ ﺃﻗﻢ ﻭﻟﻢ ،ﺍﻟﻌﻨﺎﺻﺮ)ﺑﺤﺚ(ﺍﻝ ﻭﺟﻤﻴﻊ ،
cookieﺍﻝ ﺑﺈﺿﺎﻓﺔ ﺳﺘﻘﻮﻡ ﻓﻌﻠﻴﺎ ،ﺇﺿﺎﻓﺘﻬﺎ ﺳﻴﺘﻢ ﺍﻟﺘﻲcookieﺍﻟﻰfileﻣﺠﺪﺩﺍ
ﻋﻤﻠﻴﺔ ﻭﻟﻴﺲoverwritten..ﺑﺎﺳﺘﺨﺪﺍﻡ ﺳﻨﻘﻮﻡ ﻟﻬﺬﺍ3 Functionﻣﺸﻬﻮﺭﺍﺕ
ﺍﻟﻌﻤﻠﻴﺎﺕ ﺑﻬﺬﻩ ﻟﻠﻘﻴﺎﻡ...ﺫﻟﻚ ﻣﻌﺎ ﻟﻨﺸﺎﻫﺪ^_^
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
86. JS Cookies
*ﺍﻝ ﺃﻭﻝFunctionﺍﻝ ﻋﻦ ﺍﻟﻤﺴﺆﻭﻝ ﻫﻮSet Cookie:
ﺍﻝ ﻫﺬﺍFunctionﺍﻝ ﺑﺈﻧﺸﺎء ﺑﺴﺎﻁﺔ ﺑﻜﻞ ﻭﻳﻘﻮﻡ ،ﺻﻮﺭﻩ ﺑﺄﺑﺴﻂCookieﺑﻤﺎ
ﻳﻤﻜﻨﻚ ﻛﻤﺎ ،ﻣﺘﻐﻴﺮﺍﺕ ﻣﻦ ﻟﻪ ﻧﺮﺳﻞ“ﻋﻠﻴﻪ ﺍﻟﺘﻌﺪﻳﻞ“ﻓﻴﻤﻜﻨﻚ ،ﺍﻟﺮﻏﺒﺔ ﺣﺴﺐ
ﺍﻝ ﻣﺘﻐﻴﺮ ﺇﺿﺎﻓﺔPathﺍﻝ ﺑﺨﺼﻮﺹ ﺷﺮﻁ ﺇﺿﺎﻓﺔ ﺃﻭexpiresﺃﺭﻏﺐ ﻟﻢ ﺍﺫﺍ
ﺍﻟﺰﺍﻣﻴﺔ ﺑﻜﻮﻧﻬﺎ...ﻫﻲ ﺍﻹﺳﺘﺨﺪﺍﻡ ﻭﻁﺮﻳﻘﺔ ،ﺍﻟﺦsetCookie(‘name’, ‘abc’, 2)
ﺑﺈﻧﺸﺎء ﻗﻢ ﻳﻌﻨﻲ ﻭﻫﺬﺍcookieﺍﺳﻤﻪ ،ﻳﻮﻣﻴﻦ ﻟﻤﺪﺓnameﻭﻗﻴﻤﺘﻪabc...
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
87. JS Cookies
*ﺍﻝ ﺛﺎﻧﻲFunctionsﺍﻝ ﻫﻮget Cookie:
ﺍﻝ ﻫﺬﺍFunctionﺍﻝ ﺇﺭﺟﺎﻉ ﻋﻠﻰ ﻳﻘﻮﻡcookieﺑﺎﻟﺤﺼﻮﻝ ﺃﺭﻏﺐ ﺍﻟﺬﻱ
ﺍﻝ ﺧﻼﻝ ﻣﻦ ﻋﻠﻴﻬﺎnameﻣﺜﻞ ،getCookie(‘name’)
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
88. JS Cookies
ﻣﻼﺣﻈﺔ:ﺍﻝ ﻋﻤﻞ ﻁﺮﻳﻘﺔFunctionﺗﻘﻮﻡ ﻓﻬﻲ ،ﺗﺘﺒﻌﺘﻬﺎ ﺇﺫﺍ ﺑﺴﻴﻄﺔ ﺍﻟﺴﺎﺑﻖ
ﺑﻜﺘﺎﺑﺘﻪ ﻗﻤﺖ ﺍﻟﺬﻱ ﺍﻹﺳﻢ ﺃﺧﺬ ﻋﻠﻰ)ﻋﻨﻪ ﻟﻠﺒﺤﺚ(ﻋﻤﻠﻴﺔ ﺛﻢconcatﺍﻝ ﺇﺷﺎﺭﺓ ﻣﻊ
=ﺍﻝ ﻣﻦ ﺍﻷﻭﻝ ﺍﻟﻤﻘﺘﻄﻒ ﺃﺧﺬﺕ ﺃﻧﻨﻲ ﻳﻌﻨﻲ ﻭﻫﺬﺍCookieﻣﺜﻞwebsite=
ﺍﻝ ﺧﻼﻝ ﻣﻦ ﻣﺼﻔﻮﻓﺔ ﺍﻟﻰ ﺍﻟﻨﺺ ﺑﺘﺤﻮﻝ ﺃﻗﻮﻡ ﺫﻟﻚ ﺑﻌﺪ;ﺍﻟﻔﺎﺻﻞ ﻫﻲ ﺗﺬﻛﺮ ﻓﻜﻤﺎ ،
ﺑﻄﻮﻝ ،ﺩﻭﺭﺍﻥ ﺟﻤﻠﺔ ﺑﻌﻤﻞ ﻗﻤﻨﺎ ﺛﻢ ،ﺇﺳﺘﺨﺪﺍﻣﻬﺎ ﻳﻤﻜﻨﻨﺎ ﺍﻟﺘﻲ ﺍﻟﻘﻴﻢ ﻣﻦ ﻛﻞ ﺑﻴﻦ
ﺍﻝ ﻗﺒﻞ ﻓﺮﺍﻍ ﻳﻮﺟﺪ ﻻ ﺃﻧﻪ ﺑﺎﻟﺘﺄﻛﺪ ﺃﺭﺩﻧﺎ ﺛﻢ ،ﺍﻟﻨﺎﺗﺠﺔ ﺍﻟﻤﺼﻔﻮﻓﺔwebsite=..
ﺑﺤﺬﻓﻬﺎ ﻗﻢ ﻓﺮﺍﻏﺎﺕ ﻭﺟﺪﺕ ﺍﺫﺍ ،ﺷﺮﻁ ﺑﻮﺿﻊ ﻗﻤﻨﺎ ﻟﺬﻟﻚ...ﺑﻘﻄﻊ ﻗﻢ ﺫﻟﻚ ﻭﺑﻌﺪ
ﺍﻝ ﻋﻨﺪﻩ ﺗﻨﺘﻬﻲ ﺍﻟﺬﻱ ﺍﻟﻤﻮﻗﻊ ﻣﻦ ﺍﻟﻨﺺ=ﺍﻹﺳﻢ ﺑﻬﺬﺍ ﺍﻟﺨﺎﺻﺔ ﺍﻟﻘﻴﻤﺔ ﻧﻬﺎﻳﺔ ﺍﻟﻰ
^_^...
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
89. JS Cookies
ﺍﻝ ﺛﺎﻟﺚFunctionﻣﻌﻴﻦ ﺷﺮﻁ ﻟﺘﻨﻔﻴﺬ ﻣﻌﻴﻨﺔ ﻗﻴﻤﺔ ﻣﻦ ﺍﻟﺘﺤﻘﻖ ﻋﻠﻰ ﻳﻘﻮﻡ
ﺍﻝ ﺑﻜﺘﺎﺑﺔ ﻗﻤﻨﺎ ﻣﺎ ﻧﺤﻦ ﻭﻋﻠﻴﺎ ،ﺑﻌﺪﻫﺎCookie،ﻣﺎ ﺃﻣﺮ ﻓﻲ ﻟﻨﺴﺘﺨﺪﻣﻬﺎ ﺍﻟﻰ
ﺍﻝ ﺟﻠﺐ ﻭﻋﻤﻠﻴﺔCookieﺍﻝ ﻓﻲ ﺗﻌﻠﻤﻨﺎﻫﺎ ﺍﻟﺘﻲFunctionﺭﻗﻢ2ﻻ ﺃﻥ ﻳﺠﺐ
ﺩﻭﺭﻫﺎ ﻳﻈﻬﺮ ﻭﻫﻨﺎ ،ﻋﺒﺜﻴﺔ ﺗﻜﻮﻥ^_^ﺍﻝ ﻫﺬﺍ ﻓﻲ ،Functionﺑﺎﺭﺳﺎﻝ ﻗﻤﺖ ﻟﻮ
ﺍﻝnameﺍﻝ ﺧﻼﻝ ﻣﻦ ﻟﺠﻠﺒﻪ ﻋﻨﻪ ﺍﻟﺒﺤﺚ ﺃﻭﻻ ﻓﺴﻴﺘﻢ ،ﻣﺜﻼgetﻳﻜﻦ ﻟﻢ ﺇﻥ ،
ﺍﻟﻘﻴﻤﺔ ﻟﻚ ﺳﺘﻈﻬﺮ ،ﻣﻮﺟﻮﺩﺍtheres no nameﻣﻮﺟﻮﺩﺓ ﻛﺎﻧﺖ ﺍﺫﺍ ﺃﻣﺎ ،
ﻫﻨﺎ ﻓﺴﻴﻄﺒﻊanees
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
90. JS Cookies
ﺃﻥ ﺗﻨﺴﻰ ﻭﻻ ،ﺍﻟﻤﻮﺿﻮﻉ ﻫﺬﺍ ﺣﻮﻝ ﻣﻌﺎ ﺍﻟﺴﺎﺑﻘﺔ ﺍﻷﻣﺜﻠﺔ ﻣﺠﻤﻮﻉ ﻟﻨﺸﺎﻫﺪ ،ﻭﺍﻵﻥ
ﻋﻠﻰ ﺍﻟﻤﺜﺎﻝ ﻫﺬﺍ ﺑﺘﺸﻐﻴﻞ ﺗﻘﻮﻡlocal server...
ﻣﻼﺣﻈﺔ:ﺍﻝ ﻫﺬﻩ3 Functionﺗﻤﺜﻞ3ﺃﻭ ﺍﻟﺒﺤﺚ ﻳﻤﻜﻨﻚ ﻟﻜﻦ ،ﺭﺋﻴﺴﻴﺔ ﺃﻓﻜﺎﺭ
ﺗﻄﻮﻳﺮFunctionﻟﺪﻱ ﻓﻤﺜﻼ ،ﺍﻟﻌﻤﻠﻴﺎﺕ ﻫﺬﻩ ﺑﻤﺜﻞ ﻟﻠﻘﻴﺎﻡ ﺑﻚ ﺧﺎﺻﺔ10
ﺃﺭﻏﺒﻪ ﺍﻟﺬﻱ ﺃﻭ ﺍﻟﻤﻨﺎﺳﺐ ﺑﺎﻟﺸﻜﻞ ﻟﺘﺨﺪﻣﻨﻲ ﺑﻜﺘﺎﺑﺘﻬﺎ ﻗﻤﺖ ﻓﺎﻧﻜﺸﻦ..ﻟﻴﺲ ﺍﻷﻣﺮ
ﻭﺇﻧﻤﺎ ،ﺣﻔﻈﺎ“ﻣﻨﻄﻖ“ﺗﻔﻜﻴﺮ^_^
ﺍﻷﻣﺜﻠﺔ ﺷﺎﻫﺪ:
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
91. ﺍﻟﻤﺠﻴﺮ ﻭﺃﻧﺖ ،ﺗﺬﻝ ﻓﻼ ﺍﻟﻌﺰﻳﺰ ﻭﺃﻧﺖ ،ﺗﺒﺨﻞ ﻓﻼ ﺍﻟﺠﻮﺍﺩ ﻭﺃﻧﺖ ،ﺗﻌﺠﻞ ﻓﻼ ﺍﻟﺤﻠﻴﻢ ﺃﻧﺖ ّﻢﺍﻟﻠﻬ
ﻗﺪﻳﺮ ٍءﺷﻲ ّﻞﻛ ﻋﻠﻰ ﻭﺃﻧﺖ ،ﺗﺮﺍﻡ ﻓﻼ ﺍﻟﻤﻨﻴﻊ ﻭﺃﻧﺖ ،ﺗﻀﺎﻡ ﻓﻼ.
ﻭﻻ ،ﻋﻄﺎﺋﻚ ﻭﺟﺰﻳﻞ ،ﻋﺎﻓﻴﺘﻚ ﻭﺷﻤﻮﻝ ،ﻧﻌﻤﺘﻚ ﻭﺳﺒﻮﻍ ،ﺭﺣﻤﺘﻚ ﺳﻌﺔ ﺗﺤﺮﻣﻨﻲ ﻻ ّﻢﺍﻟﻠﻬ
ّﺍﺣﻤﻴﻦﺮﺍﻟ ﺃﺭﺣﻢ ﻳﺎ ﺑﺮﺣﻤﺘﻚ ﻲّﻨﻋ ﺍﻟﻜﺮﻳﻢ ﻭﺟﻬﻚ ﺗﺼﺮﻑ ﻭﻻ ،ﻋﻤﻠﻲ ﺑﻘﺒﻴﺢ ﺗﺠﺎﺯﻧﻲ.
،ﺗﻲّﻮﻗ ﺿﻌﻒ ﻭﺍﺭﺣﻢ ،ﺗﻮﺑﺘﻲ ﻓﺎﻗﺒﻞ ،ﺭﻏﺒﺘﻲ ﻋﻈﻤﺖ ﻋﻨﺪﻙ ﻭﻓﻴﻬﺎ ،ﻳﺪﻱ ﺕّﺪُﻣ ﺇﻟﻴﻚ ّﻢﺍﻟﻠﻬ
ًﻼﺳﺒﻴ ٍﺧﻴﺮ ّﻞﻛ ﻭﺇﻟﻰ ًﺎﻧﺼﻴﺒ ٍﺧﻴﺮ ّﻞﻛ ﻣﻦ ﻟﻲ ﻭﺍﺟﻌﻞ ،ﻣﻌﺬﺭﺗﻲ ﻭﺍﻗﺒﻞ ،ﺧﻄﻴﺌﺘﻲ ﻭﺍﻏﻔﺮ.
ﺁﻣﻴﻦ ﺍﻟﻠﻬﻢ
ﺧﺎﻁﺭﺓ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
ﻣﻮﻗﻊ ﻣﻦ ﻣﻨﻘﻮﻟﺔ ﺭﺍﺋﻌﺔ ﺃﺩﻋﻴﺔmawdoo3
92. ﻣﺎ ﻧﻜﻤﻞ ﻷﻥ ﻭﻭﻓﻘﻨﺎ ،ﻭﻓﻀﻠﻪ ﻣﻨﻪ ﺑﻮﺍﺳﻊ ﻭﻋﻠﻴﻜﻢ ﻋﻠﻴﻨﺎ ﻣﻦ ﺃﻥ ،ﺍﻟﻌﺎﻟﻤﻴﻦ ﺭﺏ ﺤﻤﺪ ہﻠﻟ
ﻧﺘﻌﻠﻢ ﻷﻥ ﻭﻓﻘﻨﺎ ﺃﻥ ﺍﻟﻌﺎﻟﻤﻴﻦ ﺭﺏ ﺃﻧﺎﻩ ﻓﻲ ﺃﻭﻝ ﻫﺬﻩ ﺍﻟﺪﻭﺭﺓ ﺍﻟﻤﺘﻮﺍﺿﻌﺔ، ﻭﺍﻟﺤﻤﺪ ہﻠﻟ
،ﺍﻟﻤﻌﺪﻭﺩﺓ ﺍﻟﺼﻔﺤﺎﺕ ﻫﺬﻩ ﻧﺪﺭﺱ ﻭ ﻧﻜﺘﺐ ﻷﻥ ﺍﻟﻬﻤﺔ ﻭﺭﺯﻗﻨﺎ ،ﻭﺍﻟﺠﺪﻳﺪ ﺍﻟﻜﺜﻴﺮ ﻣﻌﺎ ﻭﻧﻜﺘﺴﺐ
ﺍﻟﻌﺎﻟﻤﻴﻦ ﺭﺏ ﻟﺤﻤﺪ ہﻠﻟ...
ﻳﺼﻞ ﻻ ﺍﻟﺒﺸﺮﻱ ﻭﺍﻟﻌﻤﻞ ،ﺑﺸﺮﻱ ﻋﻤﻞ ﺍﻟﻰ ﻫﻮ ﻣﺎ ﺍﻟﻤﺘﻮﺍﺿﻊ ﺍﻟﻌﻤﻞ ﻫﺬﺍ ،ﺍﻷﻋﺰﺍء ﺇﺧﻮﺍﻧﻲ
ﺍﻟﺪﻗﺔ ﻣﻌﺎﻧﻲ ﺃﺩﻕ ﻧﺘﺤﺮﻯ ﺑﺄﻥ ﺗﻌﺎﻟﻰ ﷲ ﺑﺈﺫﻥ ﺑﻮﺳﻌﻨﺎ ﻣﺎ ﺑﺬﻟﻨﺎ ﻭﺇﻧﻤﺎ ،ﻭﺍﻟﺘﻤﺎﻡ ﺍﻟﻜﻤﺎﻝ ﺍﻟﻰ
،ﺃﻧﻔﺴﻨﺎ ﻣﻦ ﺗﻘﺼﻴﺮ ﻓﻬﺬﺍ ﺃﺧﻄﺄﻧﺎ ﻓﺈﻥ ،ﻟﺬﻟﻚ ،ﺍﻟﺸﺮﻭﺣﺎﺕ ﻫﺬﻩ ﻓﻲ ﺍﻟﻤﻨﺎﺳﺒﺔ ﺍﻟﻜﻠﻤﺎﺕ ﻭﺍﻧﺘﻘﺎء
ﺍﻟﻤﻦ ﺻﺎﺣﺐ ﺍﻟﻌﺎﻟﻤﻴﻦ ﺭﺏ ﺗﻌﺎﻟﻰ ﻭﺭﺿﻮﺍﻧﻪ، ﻭﺍﻟﺤﻤﺪ ہﻠﻟ ﻥ ﺃﺻﺒﻨﺎ، ﻓﺒﻔﻀﻞ ﻣﻦ ﷲ
ﻭﺍﻟﻔﻀﻞ.
ﺍﻟﺧﺎﺗﻣﺔ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com
93. ﺃﻧﻚ ﺃﻓﺘﺮﺽ ﻭﺍﻟﺬﻱ ،ﺳﻜﺮﺑﺖ ﺍﻟﺠﺎﻓﺎ ﺩﻭﺭﺓ ﻣﻦ ﺍﻟﺜﺎﻧﻲ ﺍﻟﺠﺰء ﻓﻬﻲ ﺍﻟﺪﻭﺭﺓ ﻫﺬﻩ ﺑﺨﺼﻮﺹ
،ﺳﻜﺮﺑﺖ ﺍﻟﺠﺎﻓﺎ ﻓﻲ ﺁﺧﺮ ﻣﺴﺘﻮﻯ ﺍﻟﻰ ﺗﻌﺎﻟﻰ ﷲ ﺑﺈﺫﻥ ﺳﻨﻨﺘﻘﻞ ﻭﺍﻵﻥ ،ﻷﻫﻤﻴﺘﻬﺎ ﻋﻠﻴﻬﺎ ﺍﻁﻠﻌﺖ
ﺍﻟﻤﺘﻨﻮﻋﺔ ﺍﻟﻤﺼﺎﺩﺭ ﻣﻦ ﻭﺍﻟﻘﺮﺍﺋﺔ ﻭﺍﻟﻤﺘﺎﺑﻌﺔ ﺑﺎﻹﺳﺘﻤﺮﺍﺭ ﺃﻧﺼﺤﻚ ،ﺍﻟﻮﻗﺖ ﺫﻟﻚ ﻟﺤﻴﻦ ﻟﻜﻦ
ﺧﻴﺮ ﻟﻜﻞ ﻳﻮﻓﻘﻨﺎ ﺃﻥ ﻭﺟﻞ ﻋﺰ ﺍﻟﻤﻮﻟﻰ ﺳﺎﺋﻼ ،ﻭﺍﻟﻤﺨﺘﻠﻔﺔ...
ﺗﻬﻤﻚ ﻗﺪ ﺃﺧﺮﻯ ﺩﻭﺭﺍﺕ:
HTML CSS HTML5 CSS3 JSON AngularJS Bootstrap
SASS PHP-Advance-101 Drupal 7 jQuery jQuery UI
ﻣﻮﻗﻊ ﻓﻲ ﷲ ﺑﺈﺫﻥ ﺗﺠﺪﻭﻧﻬﺎ ﺍﻟﺪﻭﺭﺍﺕ ﻫﺬﻩ ﺟﻤﻴﻊ:
www.2nees.com/courses
ﺍﻟﺧﺎﺗﻣﺔ
ﺣﻤﻴﺪ ﺃﺑﻮ ﺣﻜﻤﺖ ﺃﻧﻴﺲaneeshikmat@2nees.com