Js dom & JS bom

‫ﺓ‬‫ﺭ‬‫ﻭ‬‫ﺩ‬JS DOM & JS BOM
‫ﺗﻘﺪﻳﻢ‬:‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺃﻧﻴﺲ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬.
‫ﺍﻹﻟﻜﺘﺮﻭﻧﻲ‬ ‫ﺍﻟﺒﺮﻳﺪ‬:nees.com2aneeshikmat@
‫ﺍﻹﻟﻜﺘﺮﻭﻧﻲ‬ ‫ﺍﻟﻤﻮﻗﻊ‬:www.2nees.com
‫ﺍﻟﺭﺣﻳﻡ‬ ‫ﺍﻟﺭﺣﻣﻥ‬ ‫ﷲ‬ ‫ﺑﺳﻡ‬
‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬aneeshikmat@2nees.com

‫ﺍﻟﻔﻬﺭﺱ‬
‫ﺍﻟﻤﻘﺪﻣﺔ‬
‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻣﺘﻄﻠﺒﺎﺕ‬
JAVASCRIPT DOM
‫ﺍﻝ‬ ‫ﺗﻌﺮﻳﻒ‬DOM
‫ﺍﻝ‬ ‫ﺗﻌﺮﻳﻒ‬HTML DOM
HTML DOM METHOD & Property
JS DOM (methods, property can be used)
Finding HTML Elements
Changing HTML & CSS
HTML DOM Events
EventListener

‫ﺍﻟﻔﻬﺭﺱ‬
JAVASCRIPT BOM
‫ﺍﻝ‬ ‫ﺗﻌﺮﻳﻒ‬BOM
JS Popup
JS Timing
JS Screen
JS Location
JS History
CookiesJS
‫ﺍﻟﺨﺎﺗﻤﺔ‬

‫ﺍﻟﻣﻘﺩﻣﺔ‬
،‫ﺍﻟﺸﺎﻛﺮﻳﻦ‬ ‫ﺣﻤﺪ‬ ‫ﺃﺣﻤﺪﻩ‬ ،‫ﻳﻌﻠﻢ‬ ‫ﻟﻢ‬ ‫ﻣﺎ‬ ‫ﺍﻹﻧﺴﺎﻥ‬ ‫ﻋﻠﻢ‬ ،‫ﺑﺎﻟﻘﻠﻢ‬ ‫ﻋﻠﻢ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺤﻤﺪ ہﻠﻟ‬
‫ﺁﻟﻪ‬ ‫ﻭﻋﻠﻰ‬ ،‫ﺍﻟﺨﻴﺮ‬ ‫ﺍﻟﻨﺎﺱ‬ ‫ﻣﻌﻠﻢ‬ ‫ﻋﻠﻰ‬ ‫ﻭﺍﻟﺴﻼﻡ‬ ‫ﻭﺍﻟﺼﻼﺓ‬ ،‫ﺃﻫﻠﻪ‬ ‫ﻫﻮ‬ ‫ﺑﻤﺎ‬ ‫ﻋﻠﻴﻪ‬ ‫ﻭﺃﺛﻨﻲ‬
‫ﺍﻟﺪﻳﻦ‬ ‫ﻳﻮﻡ‬ ‫ﺇﻟﻰ‬ ‫ﺃﺛﺮﻩ‬ ‫ﻭﺍﻗﺘﻔﻰ‬ ‫ﺑﺪﻋﻮﺗﻪ‬ ‫ﺩﻋﺎ‬ ‫ﻣﻦ‬ ‫ﻭﻛﻞ‬ ،‫ﻭﺻﺤﺒﻪ‬.
‫ﻣﻦ‬ ‫ﺍﻟﻌﺒﺪ‬ ‫ﺑﻬﺎ‬ ‫ﻳﺘﻘﺮﺏ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻘﺮﺑﺎﺕ‬ ‫ﺃﻓﻀﻞ‬ ‫ﻣﻦ‬ ‫ﻭﻧﺸﺮﻩ‬ ‫ﺍﻟﻌﻠﻢ‬ ‫ﻁﻠﺐ‬ ‫ﻓﺈﻥ‬ ‫ﺑﻌﺪ‬ ‫ﺃﻣﺎ‬
‫ﷲ‬ ‫ﻋﻨﺪ‬ ‫ﻗﺪﺭﻩ‬ ‫ﻭﺗﺮﻓﻊ‬ ،‫ﺍﻟﻤﺴﻠﻢ‬ ‫ﻣﻨﺰﻟﺔ‬ ‫ﺗﻌﻠﻲ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻄﺎﻋﺎﺕ‬ ‫ﺃﺑﺮﺯ‬ ‫ﻭﻣﻦ‬ ،‫ﺭﺑﻪ‬
‫ﻣﻦ‬ ‫ﻭﺣﺬﺭﻫﻢ‬ ،‫ﻭﺍﻟﺘﺪﺑﺮ‬ ‫ﻭﺍﻟﺘﻔﻜﺮ‬ ،‫ﻭﺍﻟﺘﻌﻠﻢ‬ ‫ﺑﺎﻟﻌﻠﻢ‬ ‫ﻋﺒﺎﺩﻩ‬ ‫ﷲ‬ ‫ﺃﻣﺮ‬ ‫ﻭﻟﻘﺪ‬ ،‫ﺗﻌﺎﻟﻰ‬
‫ﺍﻟﻌﻠﻢ‬ ‫ﻫﻮ‬ ‫ﺍﻟﻘﻴﺎﻣﺔ‬ ‫ﻳﻮﻡ‬ ‫ﺻﺎﺣﺒﻪ‬ ‫ﻳﻨﻔﻊ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺍﻟﻌﻠﻢ‬ ‫ﺃﻥ‬ ‫ﻭﺑﻴﻦ‬ ،‫ﺍﻟﻬﻮﻯ‬ ‫ﻭﺍﺗﺒﺎﻉ‬ ‫ﺍﻟﺠﻬﻞ‬
‫ﺑﺄﺩﺏ‬ ‫ﻓﻴﻪ‬ ‫ﻭﻳﺘﺄﺩﺏ‬ ،‫ﺭﺿﺎﻩ‬ ‫ﻧﻴﻞ‬ ‫ﻓﻴﻪ‬ ‫ﻭﻳﺒﺘﻐﻲ‬ ،‫ﻟﻤﻮﻻﻩ‬ ‫ﺍﻟﻌﺒﺪ‬ ‫ﻓﻴﻪ‬ ‫ﻳﺨﻠﺺ‬ ‫ﺍﻟﺬﻱ‬
‫ﺧﻠﻘﻪ‬ ‫ﻛﺎﻥ‬ ‫ﺍﻟﺬﻱ‬ ،‫ﻭﺳﻠﻢ‬ ‫ﻋﻠﻴﻪ‬ ‫ﷲ‬ ‫ﺻﻞ‬ ،‫ﺍﻷﻧﺎﻡ‬ ‫ﺳﻴﺪ‬ ‫ﺑﺄﺧﻼﻕ‬ ‫ﻭﻳﺘﺨﻠﻖ‬ ،‫ﺍﻹﺳﻼﻡ‬
‫ﺍﻟﻌﺎﻟﻤﻴﻦ‬ ‫ﺭﺏ‬ ‫ﻘﺮﺁﻥ، ﻭﺍﻟﺤﻤﺪ ہﻠﻟ‬.
‫ﺍﻟﺠﻤﻴﻞ‬ ‫ﺍﻟﻜﻼﻡ‬ ‫ﻫﺬﺍ‬“‫ﻣﻨﻘﻮﻝ‬“

‫ﺍﻟﻣﻘﺩﻣﺔ‬
‫ﺗﻌﻠﻢ‬ ‫ﻣﺸﻮﺍﺭ‬ ‫ﻓﻲ‬ ‫ﺑﺪﺃﻧﺎﻩ‬ ‫ﻣﺎ‬ ‫ﺳﻨﻜﻤﻞ‬ ،‫ﺍﻟﻤﺘﻮﺍﺿﻌﺔ‬ ‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻫﺬﻩ‬ ‫ﻓﻲ‬ ،‫ﷲ‬ ‫ﻓﻲ‬ ‫ﺃﺣﺒﺘﻲ‬
‫ﻭﺇﺗﻘﺎﻥ‬“‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬“‫ﺇﺛﻨﻴﻦ‬ ‫ﺟﺰﺋﻴﻦ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻫﺬﻩ‬ ‫ﻣﻮﺿﻮﻉ‬ ‫ﻭﺳﻴﻜﻮﻥ‬ ،
‫ﻭﻫﻤﺎ‬:
(1JavaScript DOM
(2JavaScript BOM
‫ﺧﻴﺮ‬ ‫ﻛﻞ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻷﻋﻤﺎﻝ‬ ‫ﻛﻞ‬ ‫ﻭﻓﻲ‬ ،‫ﺍﻟﻌﻤﻞ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬ ‫ﻭﺇﻳﺎﻛﻢ‬ ‫ﻳﻮﻓﻘﻨﺎ‬ ‫ﺃﻥ‬ ،‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﻧﺴﺄﻝ‬.

‫ﺍﻟﺩﻭﺭﺓ‬ ‫ﻣﺗﻁﻠﺑﺎﺕ‬
،‫ﺍﻟﺘﻌﻠﻢ‬ ‫ﻓﻲ‬ ‫ﺍﻹﺳﺘﻤﺮﺍﺭﻳﺔ‬ ‫ﻟﻀﻤﺎﻥ‬ ‫ﺍﻟﻤﺘﻄﻠﺒﺎﺕ‬ ‫ﻣﻦ‬ ‫ﻭﻣﺠﻤﻮﻋﺔ‬ ‫ﻣﻨﻬﺎﺝ‬ ‫ﺩﻭﺭﺓ‬ ‫ﻟﻜﻞ‬
،‫ﺍﻟﺼﺤﻴﺢ‬ ‫ﺑﺎﻟﺸﻜﻞ‬ ‫ﻭﺍﻟﺘﻄﺒﻴﻖ‬ ‫ﻟﻠﻔﻬﻢ‬ ‫ﺍﻟﻘﺎﺑﻠﺔ‬ ‫ﺍﻟﻤﻌﻠﻮﻣﺔ‬ ‫ﻣﻦ‬ ‫ﻗﺪﺭ‬ ‫ﺃﻛﺒﺮ‬ ‫ﻭﺗﺤﺼﻴﻞ‬
‫ﻫﻲ‬ ‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻣﺘﻄﻠﺒﺎﺕ‬ ‫ﺳﺘﻜﻮﻥ‬ ‫ﻭﻫﻨﺎ‬:
(1HTML
(2CSS
(3JS)‫ﻭﺍﻝ‬ ‫ﻭﺍﻟﻤﺼﻔﻮﻓﺎﺕ‬ ‫ﻭﺍﻟﻤﺘﻐﻴﺮﺍﺕ‬ ‫ﺍﻷﻧﻮﺍﻉ‬ ‫ﻣﻌﺮﻓﺔ‬function..‫ﺍﻟﺦ‬(
(4‫ﻣﺜﻞ‬ ‫ﻧﺼﻮﺹ‬ ‫ﻣﺤﺮﺭ‬notepad++‫ﺇﻧﺘﺮﻧﺖ‬ ‫ﻭﻣﺘﺼﻔﺢ‬:P.
‫ﺳﻜﺮﺑﺖ‬ ‫ﺑﺎﻟﺠﺎﻓﺎ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﺗﺤﻤﻴﻞ‬ ‫ﻳﻤﻜﻨﻚ‬)‫ﺍﻟﺴﺎﺑﻖ‬ ‫ﺍﻟﻤﺘﻄﻠﺐ‬(‫ﻫﻨﺎ‬ ‫ﻣﻦ‬^_^

JAVASCRIPT DOM
(DOCUMENT OBJECT MODEL)
1
‫ﻣﻼﺣﻈﺔ‬:‫ﻋﻦ‬ ‫ﺃﺗﺤﺪﺙ‬ ‫ﻋﻨﺪﻣﺎ‬JS DOM‫ﻣﻦ‬ ‫ﺃﺧﺘﺼﺮﻫﺎ‬ ‫ﻓﺄﻧﺎ‬JS HTML DOM

‫ﺍﻝ‬ ‫ﺗﻌﺭﻳﻑ‬DOM
‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﻟﻠﺸﺮﻳﺤﺔ‬ ‫ﺍﻧﺘﻘﻞ‬ ‫ﺛﻢ‬ ،‫ﺑﺘﻤﻌﻦ‬ ‫ﺍﻟﺼﻮﺭﺓ‬ ‫ﻫﺬﻩ‬ ‫ﺷﺎﻫﺪ‬ ،‫ﺍﻟﺒﺪء‬ ‫ﻗﺒﻞ‬^_^

‫ﺍﻝ‬ ‫ﺗﻌﺭﻳﻑ‬DOM
‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺍﻟﺼﻮﺭﺓ‬ ‫ﻋﻠﻰ‬ ‫ﺑﻨﺎﺋﺎ‬ ‫ﻋﻠﻤﻲ‬ ‫ﺑﺸﻜﻞ‬ ‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﺑﺘﺤﻠﻴﻞ‬ ‫ﻟﻨﺒﺪﺃ‬ ،‫ﻭﺍﻵﻥ‬^^
‫ﺍﻝ‬ ‫ﺃﻭﻻ‬DOM‫ﻛﻠﻤﺎﺕ‬ ‫ﻟﺜﻼﺙ‬ ‫ﺇﺧﺘﺼﺎﺭ‬ ‫ﻫﻲ‬Document Object Model
‫ﺍﻟﻮﻳﺐ‬ ‫ﻣﻌﺎﻳﻴﺮ‬ ‫ﻻﻋﺘﻤﺎﺩ‬ ‫ﺍﻟﻌﺎﻟﻤﻴﺔ‬ ‫ﺍﻟﻤﻨﻈﻤﺔ‬ ‫ﺣﺴﺐ‬ ‫ﻭﻫﻲ‬)W3C: (“‫ﻧﻈﺎﻡ‬ ‫ﻫﻲ‬
‫ﺍﻟﻰ‬ ‫ﺍﻟﻮﺻﻮﻝ‬ ‫ﻣﻦ‬ ‫ﺍﻟﺴﻜﺮﺑﺖ‬ ‫ﻭﻟﻐﺎﺕ‬ ‫ﻟﻠﺒﺮﺍﻣﺞ‬ ‫ﺗﺴﻤﺢ‬ ‫ﻣﺤﺎﻳﺪﺓ‬ ‫ﻭﻟﻐﺔ‬ ‫ﺃﺳﺎﺳﻲ‬
‫ﻭﺍﻟﺘﻨﺴﻴﻖ‬ ،‫ﻟﻠﻤﻠﻒ‬ ‫ﺍﻟﺘﺮﻛﻴﺒﻴﺔ‬ ‫ﻭﺍﻟﺒﻨﻴﺔ‬ ،‫ﺍﻟﻤﺤﺘﻮﻯ‬..‫ﻋﻠﻴﻪ‬ ‫ﻭﺍﻟﺘﻌﺪﻳﻞ‬ ،
‫ﺑﺸﻜﻞ‬Dynamic..‫ﺍﻝ‬ ‫ﺗﻘﺴﻴﻢ‬ ‫ﻭﻳﺘﻢ‬DOM‫ﺍﻟﻰ‬3‫ﻭﻫﻲ‬ ‫ﺭﺋﻴﺴﻴﺔ‬ ‫ﺃﻗﺴﺎﻡ‬:
1(Core DOM
2(HTML DOM
3(XML DOM

‫ﺍﻝ‬ ‫ﺗﻌﺭﻳﻑ‬HTML DOM
‫ﺍﻝ‬ ‫ﺗﻌﺮﻳﻒ‬ ‫ﻋﻠﻰ‬ ‫ﺇﻋﺘﻤﺎﺩﺍ‬DOM‫ﺍﻝ‬ ‫ﺗﻌﺮﻳﻒ‬ ‫ﺗﺨﻴﻞ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ،HTML DOM
‫ﻟﻞ‬ ‫ﺍﻟﺘﻌﺮﻳﻒ‬ ‫ﺻﻴﺎﻏﺔ‬ ‫ﺇﻋﺎﺩﺓ‬ ‫ﺑﺎﺧﺘﺼﺎﺭ‬ ‫ﻭﻳﻤﻜﻦ‬HTML DOM‫ﺃﻧﻬﺎ‬ ‫ﻋﻠﻰ‬:
‫ﺍﻝ‬ ‫ﻗﺒﻞ‬ ‫ﻣﻦ‬ ‫ﺍﻋﺘﻤﺎﺩﻫﺎ‬ ‫ﺗﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻤﻌﺎﻳﻴﺮ‬W3C‫ﺍﻝ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﺟﻤﻴﻊ‬ ‫ﻣﻊ‬ ‫ﻟﻠﺘﻌﺎﻣﻞ‬
HTML‫ﻭﺍﻟﺘﻌﺪﻳﻞ‬ ‫ﻭﺍﻹﺿﺎﻓﺔ‬ ‫ﺍﻟﺤﺬﻑ‬ ‫ﻋﻤﻠﻴﺎﺕ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ،.
‫ﺍﻝ‬ ‫ﻣﻊ‬ ‫ﺍﻟﺘﻌﺎﻣﻞ‬ ‫ﻋﻦ‬ ‫ﺍﻟﺤﺪﻳﺚ‬ ‫ﺑﺼﺪﺩ‬ ‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻭﺑﻬﺬﻩ‬ ،‫ﻫﻨﺎ‬ ‫ﻭﻧﺤﻦ‬HTML DOM،
‫ﺍﻷﻭﻟﻰ‬ ‫ﺍﻟﺸﺮﻳﺤﺔ‬ ‫ﻓﻲ‬ ‫ﺫﻛﺮﺕ‬ ‫ﻟﺬﻟﻚ‬)‫ﺍﻷﻭﻝ‬ ‫ﻟﻠﺠﺰء‬(‫ﻋﻦ‬ ‫ﺑﺤﺪﻳﺜﻲ‬ ‫ﺃﻧﻨﻲ‬ ،‫ﻣﻼﺣﻈﺔ‬JS
DOM‫ﺃﻋﻨﻲ‬ ‫ﻓﺄﻧﺎ‬JS HTML DOM^_^...

‫ﺍﻝ‬ ‫ﺗﻌﺭﻳﻑ‬HTML DOM
‫ﺍﻟﺪﻭﺭﺓ؟‬ ‫ﻣﻦ‬ ‫ﺍﻟﺠﺰء‬ ‫ﻫﺬﺍ‬ ‫ﺗﻌﻠﻢ‬ ‫ﺑﻌﺪ‬ ‫ﺇﻧﺠﺎﺯﻫﺎ‬ ‫ﻳﻤﻜﻨﻨﻲ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻷﻣﻮﺭ‬ ‫ﻫﻲ‬ ‫ﻣﺎ‬
‫ﻫﻮ‬ ‫ﺍﻟﺠﻮﺍﺏ‬:
(1‫ﺑﺎﻝ‬ ‫ﺍﻟﻤﻮﺟﻮﺩ‬ ‫ﺍﻟﻤﺤﺘﻮﻯ‬ ‫ﺗﻐﻴﺮ‬HTML‫ﺑﺸﻜﻞ‬Dynamically‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬
‫ﺳﻜﺮﺑﺖ‬.
(2‫ﺍﻝ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﻣﻦ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺑﺄﻱ‬ ‫ﺍﻟﺨﺎﺹ‬ ‫ﺍﻟﺘﻨﺴﻴﻖ‬ ‫ﺗﻐﻴﻴﺮ‬HTML.
(3‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﻋﻠﻰ‬ ‫ﺟﺪﻳﺪ‬ ‫ﻣﺤﺘﻮﻯ‬ ‫ﺃﻭ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﺇﺿﺎﻓﺔ‬.
(4‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﻣﻦ‬ ‫ﻣﺤﺘﻮﻯ‬ ‫ﺃﻭ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺣﺬﻑ‬.
(5‫ﻭﺃﻱ‬ ‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﺑﻴﻦ‬ ‫ﺗﻔﺎﻋﻠﻲ‬ ‫ﺑﺪﻭﺭ‬ ‫ﺍﻟﻘﻴﺎﻡ‬Event‫ﺑﺘﺼﻤﻴﻤﻪ‬ ‫ﺗﻘﻮﻡ‬..
(6‫ﺍﻟﻌﻨﺎﺻﺮ‬ ‫ﺧﺼﺎﺋﺺ‬ ‫ﻣﻦ‬ ‫ﺃﻱ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻹﺿﺎﻓﺔ‬ ‫ﺃﻭ‬ ‫ﺍﻟﺤﺬﻑ‬ ‫ﺃﻭ‬ ‫ﺍﻟﺘﻌﺪﻳﻞ‬ ‫ﺇﻣﻜﺎﻧﻴﺔ‬
)attribute(
‫ﺍﻟﺠﺰء‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬ ‫ﻟﻨﺎ‬ ‫ﺭﺳﻤﻲ‬ ‫ﻣﻮﺿﻮﻉ‬ ‫ﺃﻭﻝ‬ ‫ﻓﻲ‬ ،‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺮﻛﺔ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻨﺒﺪء‬ ‫ﻭﺍﻵﻥ‬^_^

‫ﻭﺳﻠﻢ‬ ‫ﻋﻠﻴﻪ‬ ‫ﷲ‬ ‫ﺻﻞ‬ ‫ﺍﻟﻤﺼﻄﻔﻰ‬ ‫ﺍﻟﺤﺒﻴﺐ‬ ‫ﻭﻓﺎﺓ‬ ‫ﻳﻮﻡ‬ ،‫ﻋﻨﻪ‬ ‫ﷲ‬ ‫ﺭﺿﻲ‬ ‫ﺍﻟﺼﺪﻳﻖ‬ ‫ﺑﻜﺮ‬ ‫ﺃﺑﻮ‬ ‫ﻗﺎﻝ‬:
‫ﺃﻻ‬‫ﻣﺤﻤﺪﺍ‬ ‫ﻳﻌﺒﺪ‬ ‫ﻛﺎﻥ‬ ‫ﻣﻦ‬‫ﺻﻞ‬‫ﷲ‬ ‫ﻓﺈﻥ‬ ‫ﷲ‬ ‫ﻳﻌﺒﺪ‬ ‫ﻛﺎﻥ‬ ‫ﻭﻣﻦ‬ ‫ﻣﺎﺕ‬ ‫ﻗﺪ‬ ‫ﻣﺤﻤﺪﺍ‬ ‫ﻓﺈﻥ‬ ‫ﻭﺳﻠﻢ‬ ‫ﻋﻠﻴﻪ‬ ‫ﷲ‬
‫ﻗﺒﻠﻪ‬ ‫ﻣﻦ‬ ‫ﺧﻠﺖ‬ ‫ﻗﺪ‬ ‫ﺭﺳﻮﻝ‬ ‫ﺇﻻ‬ ‫ﻣﺤﻤﺪ‬ ‫ﻭﻣﺎ‬ ‫ﻭﻗﺎﻝ‬ ‫ﻣﻴﺘﻮﻥ‬ ‫ﻭﺇﻧﻬﻢ‬ ‫ﻣﻴﺖ‬ ‫ﺇﻧﻚ‬ ‫ﻭﻗﺎﻝ‬ ‫ﻳﻤﻮﺕ‬ ‫ﻻ‬ ‫ﺣﻲ‬
‫ﺷﻴﺌﺎ‬ ‫ﷲ‬ ‫ﻳﻀﺮ‬ ‫ﻓﻠﻦ‬ ‫ﻋﻘﺒﻴﻪ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻨﻘﻠﺐ‬ ‫ﻭﻣﻦ‬ ‫ﺃﻋﻘﺎﺑﻜﻢ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻧﻘﻠﺒﺘﻢ‬ ‫ﻗﺘﻞ‬ ‫ﺃﻭ‬ ‫ﻣﺎﺕ‬ ‫ﺃﻓﺈﻥ‬ ‫ﺍﻟﺮﺳﻞ‬
‫ﺍﻟﻨﺎﺱ‬ ‫ﻓﻨﺸﺞ‬ ‫ﻗﺎﻝ‬ ‫ﺍﻟﺸﺎﻛﺮﻳﻦ‬ ‫ﷲ‬ ‫ﻭﺳﻴﺠﺰﻱ‬‫ﻳﺒﻜﻮﻥ‬.
‫ﺭﻗﻢ‬ ‫ﺣﺪﻳﺚ‬ ‫ﻣﻦ‬ ‫ﻣﻘﺘﺒﺲ‬3467‫ﺍﻟﺒﺨﺎﺭﻱ‬ ‫ﺻﺤﻴﺢ‬ ‫ﻣﻦ‬–‫ﺍﻟﺼﺤﺎﺑﺔ‬ ‫ﻓﻀﺎﺋﻞ‬ ‫ﻛﺘﺎﺏ‬
‫ﺍﻟﺴﺆﺍﻝ‬ ‫ﻟﻜﻦ‬ ،‫ﺑﻌﺪﻩ‬ ‫ﻣﻦ‬ ‫ﺳﻨﻤﻮﺕ‬ ‫ﻭﻧﺤﻦ‬ ،‫ﻣﺎﺕ‬ ‫ﻗﺪ‬ ‫ﻭﺳﻠﻢ‬ ‫ﻋﻠﻴﻪ‬ ‫ﷲ‬ ‫ﺻﻞ‬ ‫ﺍﻟﻤﺼﻄﻔﻰ‬ ‫ﺍﻟﺤﺒﻴﺐ‬ ‫ﻓﻬﺬﺍ‬
‫ﻣﻬﻤﺘﻪ‬ ‫ﺃﺩﻯ‬ ،‫ﺍﻷﻣﺔ‬ ‫ﻭﻧﺼﺢ‬ ‫ﺍﻟﺮﺳﺎﻟﺔ‬ ‫ﻭﺑﻠﻎ‬ ‫ﺍﻷﻣﺎﻧﺔ‬ ‫ﺃﺩﻯ‬ ‫ﻭﺳﻠﻢ‬ ‫ﻋﻠﻴﻪ‬ ‫ﷲ‬ ‫ﺻﻞ‬ ‫ﺍﻟﺮﺳﻮﻝ‬ ،‫ﺍﻷﻫﻢ‬
‫؟‬ ‫ﺧﻠﻘﻨﺎ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻬﺪﻑ‬ ‫ﺗﺤﻘﻖ‬ ‫ﺃﻋﻤﺎﻝ‬ ‫ﻧﺤﻦ‬ ‫ﻗﺪﻣﻨﺎ‬ ‫ﻫﻞ‬ ‫ﻟﻜﻦ‬ ،‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺃﻣﺎﻡ‬ ‫ﺑﺬﻟﻚ‬ ‫ﻟﻪ‬ ‫ﻭﻧﺸﻬﺪ‬
‫ﺃﺟﻠﻪ‬ ‫ﻣﻦ‬ ‫ﺧﻠﻘﻨﺎ‬ ‫ﻣﺎ‬ ‫ﺳﺒﻴﻞ‬ ‫ﻓﻲ‬ ‫ﺃﻋﻤﺎﻟﻨﺎ‬ ‫ﺗﻜﻮﻥ‬ ‫ﺃﻥ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﻧﺴﺄﻝ‬..‫ﺁﻣﻴﻦ‬ ‫ﺍﻟﻠﻬﻢ‬.
‫ﺧﺎﻁﺭﺓ‬

HTML DOM METHOD & Property
(1Method:‫ﺍﻝ‬ ‫ﻫﻲ‬Action‫ﺗﺤﺪﻳﺪ‬ ‫ﺃﻭ‬ ‫ﻟﻠﻮﺻﻮﻝ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻣﻪ‬ ‫ﺳﺄﻗﻮﻡ‬ ‫ﺍﻟﺬﻱ‬
‫ﺍﻝ‬ ‫ﺻﻔﺤﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﻮﺟﻮﺩ‬ ‫ﺍﻟﻌﻨﺼﺮ‬HTML.
(2Property:‫ﻋﻨﺼﺮ‬ ‫ﻣﻦ‬ ‫ﺟﻠﺒﻬﺎ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﻫﻲ‬HTML‫ﺗﻌﺪﻳﻠﻬﺎ‬ ‫ﺃﻭ‬
‫ﺍﻝ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﻠﻰ‬HTML...^_^
‫ﺫﻟﻚ‬ ‫ﻣﺜﺎﻻ‬ ‫ﻟﻨﺸﺎﻫﺪ‬^_^:
‫ﻣﻼﺣﻈﺔ‬1:innerHTML‫ﻋﻨﺼﺮ‬ ‫ﻣﻦ‬ ‫ﺗﻌﺪﻳﻠﻬﺎ‬ ‫ﺃﻭ‬ ‫ﺍﻟﺒﻴﺎﻧﺎﺕ‬ ‫ﻟﺠﻠﺐ‬ ‫ﺗﺴﺘﺨﺪﻡ‬
HTML
‫ﻣﻼﺣﻈﺔ‬2:getElementById‫ﻋﻨﺼﺮ‬ ‫ﻭﺗﺤﺪﻳﺪ‬ ‫ﻟﻠﺒﺤﺚ‬ ‫ﺗﺴﺘﺨﺪﻡ‬HTML
‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ID‫ﺑﻪ‬ ‫ﺍﻟﺨﺎﺹ‬^_^..

HTML DOM METHOD & Property
‫ﻣﺜﺎﻝ‬:
‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻫﻨﺎ‬ ‫ﻻﺣﻆ‬getElementById
‫ﺍﻝ‬ ‫ﻫﻲ‬Method‫ﻭﺃﻥ‬ ‫ﺍﻟﺘﻌﺮﻳﻒ‬ ‫ﺣﺴﺐ‬
‫ﺍﻝ‬innerHTML‫ﺍﻟﺘﻲ‬ ‫ﻫﻲ‬
‫ﻋﻠﻰ‬ ‫ﺍﺣﺘﻮﺕ‬“‫ﻗﻴﻤﺔ‬“Property

JS DOM (methods, property can be used)
‫ﺃﺷﻬﺮ‬ ‫ﻣﻦ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﺍﻟﻰ‬ ،‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺳﻨﺘﻄﺮﻕ‬ ،‫ﺍﻵﻥ‬methods‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﺍﻟﺘﻲ‬
‫ﺍﻝ‬ ‫ﻣﻊ‬ ‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬JS‫ﺍﻝ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﻟﺘﻐﻴﻴﺮ‬HTML‫ﻧﺬﻛﺮ‬ ‫ﺍﻟﻤﺨﺘﻠﻔﺔ‬ ‫ﺑﺠﺰﺋﻴﺎﺗﻬﺎ‬
‫ﺍﻟﻮﻅﻴﻔﺔ‬ ‫ﻣﻊ‬ ‫ﻣﻨﻬﺎ‬:
‫ﻣﻼﺣﻈﺔ‬:‫ﻓﻲ‬ ‫ﺃﻭ‬ ‫ﺫﻟﻚ‬ ‫ﺑﻌﺪ‬ ‫ﺍﻟﺪﻭﺍﻝ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺸﺮﺡ‬ ‫ﺃﻣﺜﻠﺔ‬ ‫ﺍﻟﻰ‬ ،‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺳﻨﺘﻄﺮﻕ‬
‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺷﺎء‬ ‫ﺇﻥ‬ ‫ﺍﻟﻘﺎﺩﻣﺔ‬ ‫ﺍﻟﻤﻮﺍﺿﻴﻊ‬^_^.
(1Method‫ﺍﻝ‬ ‫ﺻﻔﺤﺔ‬ ‫ﻓﻲ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﻦ‬ ‫ﻟﻠﺒﺤﺚ‬ ‫ﻧﺴﺘﺨﺪﻣﻬﺎ‬HTML‫ﻭﻫﻲ‬:
(1document.getElementById()‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﻦ‬ ‫ﻟﻠﺒﺤﺚ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬ID
(2document.getElementsByTagName()‫ﻋﻨﺎﺻﺮ‬ ‫ﻋﻦ‬ ‫ﻟﻠﺒﺤﺚ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬
‫ﺍﻝ‬ ‫ﺍﺳﻢ‬ ‫ﺣﺴﺐ‬tag‫ﻣﺜﻞ‬“ul”
(3document.getElementsByClassName()‫ﻋﻨﺎﺻﺮ‬ ‫ﻋﻦ‬ ‫ﻟﻠﺒﺤﺚ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬
‫ﻣﺜﻞ‬ ‫ﻣﻌﻴﻦ‬ ‫ﻛﻼﺱ‬ ‫ﺗﺤﺘﻮﻱ‬“className”

(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.

(3Method‫ﺍﻝ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﺣﺬﻑ‬ ‫ﺃﻭ‬ ‫ﻹﺿﺎﻓﺔ‬ ‫ﻧﺴﺘﺨﺪﻣﻬﺎ‬HTML‫ﻭﻫﻲ‬:
(1document.createElement():‫ﻋﻨﺼﺮ‬ ‫ﻹﻧﺸﺎء‬ ‫ﺗﺴﺘﺨﺪﻡ‬HTML‫ﺟﺪﻳﺪ‬.
(2document.removeChild():‫ﻋﻨﺼﺮ‬ ‫ﻟﺤﺬﻑ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬HTML.
(3document.appendChild():‫ﻋﻨﺼﺮ‬ ‫ﻹﺿﺎﻓﺔ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬HTML‫ﻋﻨﺼﺮ‬ ‫ﻋﻠﻰ‬
‫ﻣﻮﺟﻮﺩ‬.
(4document.replaceChild():‫ﺍﻝ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﺃﺣﺪ‬ ‫ﻻﺳﺘﺒﺪﺍﻝ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬HTML
‫ﺁﺧﺮ‬ ‫ﺑﻌﻨﺼﺮ‬.
(5document.write(text):‫ﻣﺤﺘﻮﻯ‬ ‫ﻹﺿﺎﻓﺔ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺴﺘﺨﺪﻡ‬HTML)‫ﺑﺎﻝ‬tag(
‫ﺍﻝ‬ ‫ﺻﻔﺤﺔ‬ ‫ﺍﻟﻰ‬ ‫ﻛﻮﺩ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﺃﻭ‬ ،‫ﺑﺪﻭﻥ‬ ‫ﺃﻭ‬HTML‫ﻟﻐﺎﻳﺎﺕ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺴﺘﺨﺪﻡ‬ ‫ﻣﺎ‬ ‫ﻭﻏﺎﻟﺒﺎ‬ ،
‫ﺍﻝ‬TEST.

(4‫ﺇﺿﺎﻓﺔ‬Events Handlers‫ﺍﻟﻰ‬HTML DOM:
(1document.getElementById(id).onclick=function(){code}:
‫ﻳﺤﺘﻮﻱ‬ ‫ﺍﻟﺬﻱ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﻦ‬ ‫ﻟﻠﺒﺤﺚ‬ ‫ﺍﻟﺼﻴﻐﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬“‫ﺍﻝ‬id“‫ﺗﻨﻔﻴﺬ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬ ،‫ﺍﻟﻤﺮﺍﺩ‬
‫ﻣﻌﻴﻦ‬ ‫ﺃﻣﺮ‬)function(‫ﻋﻠﻰ‬ ‫ﺑﻨﺎﺋﺎ‬ ‫ﻣﺎ‬onclick event^^
(2‫ﺇﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﺍﻷﺳﻠﻮﺏ‬ ‫ﺑﻨﻔﺲ‬onchange‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﻭﻏﻴﺮﻫﺎ‬Event‫ﺍﻝ‬ ‫ﻣﻜﺎﻥ‬Click.
‫ﺍﻝ‬ ،‫ﺍﻟﻌﻤﻠﻴﺎﺕ‬ ‫ﻫﺬﻩ‬ ‫ﺇﺳﺘﺨﺪﺍﻡ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﻣﻦ‬Validation)‫ﺍﻷﺧﻄﺎء‬ ‫ﻣﻦ‬ ‫ﺍﻟﺘﺤﻘﻖ‬(‫ﺇﻅﻬﺎﺭ‬ ‫ﺃﻭ‬ ،
‫ﻭﺇﺧﻔﺎﺋﻬﺎ‬ ‫ﻧﺼﻮﺹ‬)collapse.. (‫ﺍﻟﺦ‬

(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>
‫ﺗﺤﺘﻮﻱ‬ ‫ﻭﻣﺎ‬.

(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..‫ﺍﻟﺦ‬

(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‫ﺍﻟﺮﻭﺍﺑﻂ‬ ‫ﻟﺠﻠﺐ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻗﻤﺖ‬ ‫ﺍﻟﺘﻲ‬^^.

‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﺍﻟﺨﻄﻮﺓ‬ ‫ﺍﻟﻰ‬ ‫ﻟﻨﻨﺘﻘﻞ‬ ،‫ﺍﻟﻌﺰﻳﺰ‬ ‫ﺻﺪﻳﻘﻲ‬ ‫ﻳﺎ‬ ‫ﻭﺍﻵﻥ‬!_: !P‫ﺍﻹﻧﺘﻘﺎﻝ‬ ‫ﻗﺒﻞ‬ ‫ﻟﻜﻦ‬ ،
‫ﻣﺎ‬ ‫ﺟﻤﻴﻊ‬ ‫ﺑﺘﻨﻔﻴﺬ‬ ‫ﺃﻗﻮﻡ‬ ‫ﻟﻦ‬ ‫ﺗﺄﻛﻴﺪ‬ ‫ﻭﺑﻜﻞ‬ ،‫ﺫﻛﺮﻧﺎ‬ ‫ﻣﺎ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﺑﻌﺾ‬ ‫ﻟﻨﺴﺘﻌﺮﺽ‬
‫ﺍﻟﻰ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺳﻨﻨﺘﻘﻞ‬ ‫ﺫﻟﻚ‬ ‫ﻭﺑﻌﺪ‬ ،‫ﺍﻧﺘﻘﺎﺋﻴﺔ‬ ‫ﻋﻴﻨﺔ‬ ‫ﺍﻵﻥ‬ ‫ﺳﺄﺧﺘﺎﺭ‬ ‫ﻟﻜﻦ‬ ،‫ﺫﻛﺮﺕ‬
‫ﺫﻛﺮﻧﺎ‬ ‫ﻣﺎ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﺍﻟﻰ‬ ‫ﺳﻨﺘﻄﺮﻕ‬ ‫ﺍﻟﻘﺎﺩﻣﺔ‬ ‫ﺍﻟﻤﻮﺍﺿﻴﻊ‬ ‫ﻓﻲ‬ ‫ﺃﻧﻨﺎ‬ ‫ﻛﻤﺎ‬ ،‫ﺟﺪﻳﺪ‬ ‫ﻣﻮﺿﻮﻉ‬
‫ﺍﻟﻰ‬ ‫ﺍﻟﻌﻮﺩﺓ‬ ‫ﺩﻭﻥ‬
‫ﻣﺠﺪﺩﺍ‬ ‫ﺍﻟﺸﺮﺡ‬^_^..
‫ﻣﺜﺎﻝ‬:
)‫ﻛﺘﺎﺑﺔ‬ ‫ﻳﻤﻜﻨﻚ‬ ‫ﻫﻞ‬
‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬
‫ﺍﻟﻨﺘﻴﺠﺔ‬ ‫ﺑﻬﺬﻩ‬ ‫ﺍﻟﺨﺎﺻﺔ‬
‫ﺍﻹﻧﺘﻘﺎﻝ‬ ‫ﻗﺒﻞ‬
‫ﺍﻟﺘﺎﻟﻴﺔ؟‬ ‫ﻟﻠﺸﺮﻳﺤﺔ‬(

‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺑﺎﻟﺸﺎﺷﺔ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬:
‫ﺍﻝ‬ ‫ﻣﺸﺎﻫﺪﺓ‬ ‫ﺗﻨﺴﻰ‬ ‫ﻻ‬Console

‫ﺍﻟﺮﺟﻴﻢ‬ ‫ﺍﻟﺸﻴﻄﺎﻥ‬ ‫ﻣﻦ‬ ‫ﻮﺫ ﺑﺎہﻠﻟ‬
}‫ﺃﻣﺮﺕ‬ ‫ﻭﺑﺬﻟﻚ‬ ‫ﻟﻪ‬ ‫ﺷﺮﻳﻚ‬ ‫ﻻ‬ ‫ﺍﻟﻌﺎﻟﻤﻴﻦ‬ ‫ﺭﺏ‬ ‫ ﺇﻥ ﺻﻼﺗﻲ ﻭﻧﺴﻜﻲ ﻭﻣﺤﻴﺎﻱ ﻭﻣﻤﺎﺗﻲ ہﻠﻟ‬
‫ﺍﻟﻤﺴﻠﻤﻴﻦ‬ ‫ﺃﻭﻝ‬ ‫ﻭﺃﻧﺎ‬{.
‫ﺍﻟﻌﻈﻴﻢ‬ ‫ﷲ‬ ‫ﺻﺪﻕ‬

Finding HTML Elements
‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﺍﻟﻤﺘﻮﺍﺿﻊ‬ ‫ﺣﺪﻳﺜﻨﺎ‬ ‫ﺑﻌﺪ‬method‫ﺍﻟﻔﻜﺮﺓ‬ ‫ﺷﺮﺡ‬ ‫ﻭﺑﻌﺪ‬ ،‫ﺇﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻭﻛﻴﻔﻴﺔ‬
‫ﻛﻞ‬ ‫ﺣﺴﺐ‬ ‫ﺍﻟﺸﺮﺡ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﺗﺨﺼﻴﺺ‬ ‫ﺍﻟﻰ‬ ‫ﻧﻨﺘﻘﻞ‬ ،‫ﺑﺬﻛﺮﻩ‬ ‫ﻗﻤﻨﺎ‬ ‫ﺗﺼﻨﻴﻒ‬ ‫ﻟﻜﻞ‬ ‫ﺍﻟﻌﺎﻣﻞ‬
‫ﻓﻲ‬ ‫ﻳﻬﻤﻨﺎ‬ ‫ﻣﺎ‬ ‫ﺧﺼﻮﺻﺎ‬ ،‫ﺟﺰﺋﻴﺔ‬ ‫ﻛﻞ‬ ‫ﻋﻠﻰ‬ ‫ﻣﺘﻨﻮﻋﺔ‬ ‫ﺃﻣﺜﻠﺔ‬ ‫ﺑﺬﻛﺮ‬ ‫ﻭﺫﻟﻚ‬ ،‫ﺗﺼﻨﻴﻒ‬
‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻣﻊ‬ ‫ﺍﻟﺘﻌﺎﻣﻞ‬..
‫ﺍﻝ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﺍﻟﻰ‬ ‫ﻭﺍﻟﻮﺻﻮﻝ‬ ‫ﺍﻟﺒﺤﺚ‬ ‫ﻋﻦ‬ ‫ﺳﻴﺘﺤﺪﺙ‬ ‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬ ‫ﻓﺈﻥ‬ ،‫ﻭﺑﺎﺧﺘﺼﺎﺭ‬
HTML‫ﺑﺎﻟﺼﻔﺤﺔ‬^^‫ﺍﻝ‬ ‫ﻫﻲ‬ ‫ﺧﺼﺎﺋﺺ‬ ‫ﻣﻦ‬ ‫ﺍﺳﺘﺨﺪﺍﻣﻪ‬ ‫ﺳﻴﺘﻢ‬ ‫ﻭﻣﺎ‬ID‫ﻭﺍﻟﻜﻼﺱ‬
‫ﻭﺍﻝ‬Tag‫ﻭﺍﻝ‬Css selector‫ﻭﺍﻝ‬Html Obj..

‫ﺃﻭﻻ‬:‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ID:

‫ﺛﺎﻧﻴﺎ‬:‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻛﻢ‬Tag Name:

‫ﺛﺎﻟﺜﺎ‬:‫ﺧﻼﻝ‬ ‫ﻣﻦ‬
Class Name:

‫ﺭﺍﺑﻌﺎ‬:‫ﺧﻼﻝ‬ ‫ﻣﻦ‬
query
Selector All:

‫ﺧﺎﻣﺴﺎ‬:‫ﺧﻼﻝ‬ ‫ﻣﻦ‬
HTML Object
Collections:‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬aneeshikmat@2nees.com

^_^‫ﻫﻮ‬ ‫ﺑﻪ‬ ‫ﺍﻟﻘﻴﺎﻡ‬ ‫ﻋﻠﻴﻚ‬ ‫ﻣﺎ‬ ‫ﻛﻞ‬ ‫ﺑﺴﺎﻁﺔ‬ ‫ﺑﻜﻞ‬ ،‫ﺍﻷﻣﺮ‬ ‫ﻭﺟﻤﺎﻝ‬ ‫ﺳﻬﻮﻟﺔ‬ ‫ﺭﺃﻳﺖ‬ ‫ﻫﻞ‬
،‫ﺍﻟﻌﺎﻟﻨﻢ‬ ‫ﻫﺬﺍ‬ ‫ﺿﻤﻦ‬ ‫ﻭﺍﻹﺑﺪﺍﻉ‬ ‫ﺍﻹﻧﻄﻼﻕ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬ ،‫ﺩﻭﺍﻝ‬ ‫ﻣﻦ‬ ‫ﺗﻌﻠﻤﻨﺎﻩ‬ ‫ﻣﺎ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬
‫ﺧﺒﺮﺓ‬ ‫ﺗﺴﺘﻔﻴﺪ‬ ‫ﻓﻠﻦ‬ ‫ﻭﺍﻻ‬ ،‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﺟﻤﻴﻊ‬ ‫ﺑﺘﻄﺒﻴﻖ‬ ‫ﻗﻤﺖ‬ ‫ﺃﻧﻚ‬ ‫ﺃﺭﺟﻮﺍ‬ ‫ﻭﺍﻵﻥ‬
‫ﺑﺮﻣﺠﻴﺔ‬!!
‫ﻟﺠﻤﻴﻊ‬ ‫ﺗﻄﺒﻴﻖ‬ ‫ﺗﺸﺎﻫﺪ‬ ‫ﻓﻞ‬ ،‫ﺍﻷﺧﻄﺎء‬ ‫ﻣﻦ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﻭﺍﺟﻬﺖ‬ ‫ﻗﺪ‬ ‫ﺃﻭ‬ ‫ﺑﺘﻨﻔﻴﺬﻫﺎ‬ ‫ﻗﻤﺖ‬ ‫ﺍﺫﺍ‬
‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺜﻠﺔ‬:

‫ﺍﻟﺠﻬﻞ‬ ‫ﺃﺧﺎ‬ ‫ﺗﺼﺤﺐ‬ ‫ﻓﻼ‬***‫ﻭﺇﻳﺎﻩ‬ ‫ﻭﺇﻳﺎﻙ‬
‫ﺃﺭﺩﻯ‬ ‫ﺟﺎﻫﻞ‬ ‫ﻣﻦ‬ ‫ﻓﻜﻢ‬***‫ﺁﺧﺎﻩ‬ ‫ﺣﻴﻦ‬ ً‫ﺎ‬‫ﺣﻠﻴﻤ‬
‫ﺑﺎﻟﻤﺮء‬ ‫ﺍﻟﻤﺮء‬ ‫ﻳﻘﺎﺱ‬***‫ﻣﺎﺷﺎﻩ‬ ‫ﺍﻟﻤﺮء‬ ‫ﻣﺎ‬ ‫ﺇﺫﺍ‬
‫ﺍﻟﺸﻲء‬ ‫ﻣﻦ‬ ‫ﻟﻠﺸﻲء‬ ‫ﻭ‬***‫ﻭﺃﺷﺒﺎﻩ‬ ‫ﻣﻘﺎﻳﻴﺲ‬
‫ﺍﻟﻘﻠﺐ‬ ‫ﻋﻠﻰ‬ ‫ﻭﻟﻠﻘﻠﺐ‬***‫ﻳﻠﻘﺎﻩ‬ ‫ﺣﻴﻦ‬ ‫ﺩﻟﻴﻞ‬
‫ﺑﻦ‬ ‫ﻋﻠﻲ‬‫ﺭﺿﻲ‬ ‫ﻁﺎﻟﺐ‬ ‫ﺃﺑﻲ‬‫ﻭﺃﺭﺿﺎﻩ‬ ‫ﻋﻨﻪ‬ ‫ﷲ‬

Changing HTML & CSS
‫ﺃﻭﻻ‬:Changing Html:‫ﻫﺬﻩ‬ ‫ﻓﻲ‬ ‫ﺑﻜﺜﺮﺓ‬ ‫ﺍﺳﺘﺨﺪﻣﻨﺎﻫﺎ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﺃﺷﻬﺮ‬ ‫ﻣﻦ‬
‫ﺍﻝ‬ ‫ﺍﻵﻥ‬ ‫ﻭﺍﻟﻰ‬ ‫ﺍﻟﺪﻭﺭﺓ‬innerHTML^_^‫ﻏﻴﺮﻫﺎ‬ ‫ﻋﻠﻴﻰ‬ ‫ﻟﻨﻄﻠﻊ‬ ‫ﻭﺍﻵﻥ‬ ،:
(1document.write():‫ﻋﻠﻰ‬ ‫ﻟﻠﻜﺘﺎﺑﺔ‬ ‫ﺗﺴﺘﺨﺪﻡ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺃﻥ‬ ‫ﺳﺎﺑﻘﺎ‬ ‫ﺗﺤﺪﺛﻨﺎ‬
‫ﺍﻝ‬ ‫ﺻﻔﺤﺔ‬HTML‫ﺑﺮﻣﺠﻴﺔ‬ ‫ﺷﻔﺮﺓ‬ ‫ﺑﺘﻨﻔﻴﺬ‬ ‫ﺗﻘﻮﻡ‬ ‫ﺍﻥ‬ ‫ﻭﻳﻤﻜﻦ‬)‫ﺳﻜﺮﺑﺖ‬ ‫ﺟﺎﻓﺎ‬(
‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻣﺒﺎﺷﺮﺓ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﺃﻭ‬ ‫ﻧﺘﺎﺋﺠﻬﺎ‬ ‫ﻭﻁﺒﺎﻋﺔ‬HTML..‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:
‫ﻣﻼﺣﻈﺔ‬) :‫ﺑﺤﺬﻑ‬ ‫ﺳﻴﻘﻮﻡ‬ ،‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﺗﺤﻤﻴﻞ‬ ‫ﺑﻌﺪ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬ ‫ﻗﻤﺖ‬ ‫ﺍﺫﺍ‬
‫ﺍﻟﻘﺪﻳﻢ‬ ‫ﺍﻟﻤﺤﺘﻮﻯ‬.(

Changing HTML & CSS
(2‫ﺏ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﺗﻐﻴﻴﺮ‬Attribute:‫ﺏ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﺃﻳﻀﺎ‬ ‫ﺗﻐﻴﺮ‬ ‫ﻳﻤﻜﻨﻨﺎ‬
Attr‫ﺍﻟﻤﺤﺘﻮﻯ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻘﺘﺼﺮ‬ ‫ﻻ‬ ‫ﻓﺎﻟﺘﻌﺪﻳﻞ‬ ،^_^‫ﻫﻲ‬ ‫ﻟﺬﻟﻚ‬ ‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﻭﺍﻟﺼﻴﻐﺔ‬ ،:
document.getElementById(id).attribute=new value
‫ﻣﺜﺎﻝ‬:‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬aneeshikmat@2nees.com

Changing HTML & CSS
‫ﺛﺎﻧﻴﺎ‬:Changing Css:‫ﺍﻝ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬ ‫ﺳﻨﻘﻮﻡ‬ ‫ﻫﻨﺎ‬DOM‫ﺧﺼﺎﺋﺺ‬ ‫ﻟﺘﻐﻴﻴﺮ‬
‫ﻣﺎ‬ ‫ﻟﻌﻨﺼﺮ‬ ‫ﺍﻟﺘﻨﺴﻴﻖ‬^_^‫ﺇﺿﺎﻓﺔ‬ ‫ﺳﻮﻯ‬ ‫ﻳﺘﻌﺪﻯ‬ ‫ﻻ‬ ‫ﺍﻷﻣﺮ‬ ‫ﺑﺴﺎﻁﺔ‬ ‫ﻭﺑﻜﻞ‬ ،style
‫ﺍﻟﻤﻄﻠﻮﺏ‬ ‫ﺍﻟﺘﻨﺴﻴﻖ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬^^‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﺍﻟﺼﻴﻐﺔ‬ ‫ﺷﺎﻫﺪ‬ ،:^_^
document.getElementById(id).style.property=new style
‫ﻣﺜﺎﻝ‬:‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬aneeshikmat@2nees.com

Changing HTML & CSS
‫ﻣﻌﺎ‬ ‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﺗﻄﺒﻴﻖ‬ ‫ﻧﺎﺗﺞ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬:
)‫ﻓﻲ‬ ‫ﺫﻛﺮﻩ‬ ‫ﺗﻢ‬ ‫ﻣﺎ‬ ‫ﺗﻄﺒﻴﻖ‬ ‫ﺃﻭ‬ ‫ﺗﻨﻔﻴﺬ‬ ‫ﻣﺤﺎﻭﻟﺘﻚ‬ ‫ﻗﺒﻞ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬ ‫ﺗﺴﺘﻌﺮﺽ‬ ‫ﻻ‬
‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺍﻟﺸﺮﺍﺋﺢ‬(

HTML DOM Events
‫ﻣﺜﻞ‬ ،‫ﺍﻟﻤﺴﺘﺨﺪﻡ‬ ‫ﻭﺑﻴﻦ‬ ‫ﺑﻴﻨﻬﺎ‬ ‫ﺍﻟﺘﻔﺎﻋﻠﻴﺔ‬ ‫ﺍﻷﻣﻮﺭ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻌﺪﻳﺪ‬ ‫ﺗﺤﺘﻮﻱ‬ ‫ﺍﻟﻮﻳﺐ‬ ‫ﺻﻔﺤﺎﺕ‬
‫ﺍﻟﻔﺄﺭﺓ‬ ‫ﻣﺆﺷﺮ‬ ‫ﻭﺗﺤﺮﻳﻚ‬ ‫ﻧﺼﻮﺹ‬ ‫ﻭﺗﺤﺪﻳﺪ‬ ‫ﻭﺭﻭﺍﺑﻂ‬ ‫ﺃﺯﺭﺍﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻨﻘﺮ‬....‫ﻭﻫﺬﺍ‬ ،‫ﺍﻟﺦ‬
‫ﺍﻝ‬ ‫ﺗﺪﺧﻞ‬ ‫ﻳﺘﻄﻠﺐ‬ ‫ﺍﻷﻣﺮ‬Script‫ﺍﻝ‬ ‫ﻫﺬﻩ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺘﺤﻜﻢ‬ ‫ﻳﺘﺴﻨﻰ‬ ‫ﺣﺘﻰ‬Action‫ﺍﻟﺘﻲ‬
‫ﺑﺎﻝ‬ ‫ﻳﺴﻤﻰ‬ ‫ﻣﺎ‬ ‫ﻭﻫﺬﺍ‬ ، ‫ﺍﻟﻤﺴﺘﺨﺪﻡ‬ ‫ﺑﻬﺎ‬ ‫ﻗﺎﻡ‬Event^_^..
‫ﺍﻝ‬ ‫ﺇﺳﺘﺨﺪﺍﻡ‬ ‫ﻋﻠﻰ‬ ‫ﻣﺜﺎﻻ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬Event‫ﺷﻬﺮﺓ‬ ‫ﺍﻷﻛﺜﺮ‬:P)onclick(
‫ﺍﻟﻨﻘﺮ‬ ‫ﻗﺒﻞ‬ ‫ﺍﻟﻨﻘﺮ‬ ‫ﺑﻌﺪ‬

HTML DOM Events
‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﺑﻌﻀﺎ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬event‫ﺇﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﺍﻟﺘﻲ‬:
(1onchange:‫ﺍﻝ‬ ‫ﻋﻨﺼﺮ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻐﻴﻴﺮ‬ ‫ﻳﺤﺪﺙ‬ ‫ﻋﻨﺪﻣﺎ‬html)‫ﺍﻹﺩﺧﺎﻝ‬ ‫ﺗﻘﺒﻞ‬ ‫ﺍﻟﺘﻲ‬(
‫ﺩﺍﺧﻞ‬ ‫ﺍﻟﻜﺘﺎﺑﺔ‬ ‫ﻣﺜﻞ‬textbox.
(2onmouseover:‫ﻫﺬﺍ‬ ‫ﻳﻨﻄﻠﻖ‬Event‫ﻋﻨﺼﺮ‬ ‫ﻓﻮﻕ‬ ‫ﺍﻟﻔﺄﺭﺓ‬ ‫ﻣﺆﺷﺮ‬ ‫ﻳﻤﺮ‬ ‫ﻋﻨﺪﻣﺎ‬
‫ﺍﻝ‬HTML.
(3onmouseout:‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻳﻨﻄﻠﻖ‬Event‫ﺧﺎﺭﺝ‬ ‫ﺍﻟﻔﺄﺭﺓ‬ ‫ﻣﺆﺷﺮ‬ ‫ﻳﺼﺒﺢ‬ ‫ﻋﻨﺪﻣﺎ‬
‫ﺍﻟﻌﻨﺼﺮ‬.
(4onmousedown:‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻳﻨﻄﻠﻖ‬Event،‫ﺍﻟﻔﺄﺭﺓ‬ ‫ﺯﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻨﻘﺮ‬ ‫ﻳﺘﻢ‬ ‫ﻋﻨﺪﻣﺎ‬
‫ﺍﻝ‬ ‫ﻟﻴﻨﻄﻠﻖ‬ ‫ﺍﻟﻔﺄﺭﺓ‬ ‫ﻋﻠﻰ‬ ‫ﻳﺪﻙ‬ ‫ﺃﺻﺒﻊ‬ ‫ﺗﺮﻓﻊ‬ ‫ﻋﻨﺪﻣﺎ‬ ‫ﻭﻳﻨﺘﻬﻲ‬Event‫ﺍﻟﺘﺎﻟﻲ‬
(5onmouseup:‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻳﻨﻄﻠﻖ‬Event‫ﻟﻠﺰﺭ‬ ‫ﺍﻷﺻﺒﻊ‬ ‫ﺗﺮﻙ‬ ‫ﻋﻨﺪ‬ ‫ﺑﻌﺪ‬ ‫ﻣﺒﺎﺷﺮﺓ‬)
‫ﺍﻟﻀﻐﻂ‬ ‫ﻋﻤﻠﻴﺔ‬ ‫ﺑﻌﺪ‬Down.(
‫ﻣﻼﺣﻈﺔ‬:‫ﺃﻭﻻ‬ ‫ﻳﺘﻢ‬ ‫ﺍﻟﻔﺄﺭﺓ‬ ‫ﺯﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻨﻘﺮ‬ ‫ﻋﻤﻠﻴﺎﺕ‬ ‫ﺗﺮﺗﻴﺐ‬down‫ﺛﻢ‬up‫ﺛﻢ‬click

HTML DOM Events
(6onfocus:‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻳﻨﻄﻠﻖ‬Event‫ﺍﻝ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺗﺤﺪﻳﺪ‬ ‫ﻳﺘﻢ‬ ‫ﻋﻨﺪﻣﺎ‬html.
)‫ﺍﻝ‬ ‫ﺑﻌﺾ‬ ‫ﺫﻛﺮ‬ ‫ﺑﻌﺪ‬ ‫ﺍﻟﻔﻜﺮﺓ‬ ‫ﻟﺘﺘﻀﺢ‬ ‫ﻣﺜﺎﻝ‬ ‫ﻋﺮﺽ‬ ‫ﺳﻴﺘﻢ‬Events‫ﷲ‬ ‫ﺑﺈﺫﻥ‬
‫ﺗﻌﺎﻟﻰ‬.(
(7onload:‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻳﻨﻄﻠﻖ‬Event‫ﺍﻝ‬ ‫ﻋﻨﺼﺮ‬ ‫ﺗﺤﻤﻴﻞ‬ ‫ﻣﻦ‬ ‫ﺍﻹﻧﺘﻬﺎء‬ ‫ﺑﻌﺪ‬
HTML‫ﺍﻟﻤﺮﺍﺩ‬.
(8onkeydown:‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻳﻨﻄﻠﻖ‬Event‫ﺃﺯﺭﺍﺭ‬ ‫ﺃﺣﺪ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻀﻐﻂ‬ ‫ﻋﻨﺪ‬
‫ﺍﻟﻤﻔﺎﺗﻴﺢ‬ ‫ﻟﻮﺣﺔ‬)‫ﺑﺎﻷﺳﻔﻞ‬ ‫ﺍﻟﻔﺎﺗﻴﺢ‬ ‫ﻟﻮﺣﺔ‬ ‫ﺯﺭ‬ ‫ﻳﺼﺒﺢ‬ ‫ﻋﻨﺪﻣﺎ‬(
(9onkeyup:‫ﺍﻝ‬ ‫ﻳﻨﻄﻠﻖ‬Event‫ﻓﻲ‬ ‫ﺍﻟﻤﻔﺎﺗﻴﺢ‬ ‫ﻟﻮﺣﺔ‬ ‫ﺯﺭ‬ ‫ﻳﺼﺒﺢ‬ ‫ﻋﻨﺪﻣﺎ‬
‫ﺍﻷﻋﻠﻰ‬.
(10onkeypress:‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻳﻨﻄﻠﻖ‬Event،‫ﺍﻟﻤﻔﺎﺗﻴﺢ‬ ‫ﻟﻮﺣﺔ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻀﻐﻂ‬ ‫ﻋﻨﺪ‬
‫ﺍﻟﻤﻔﺎﺗﻴﺢ‬ ‫ﻟﻮﺣﺔ‬ ‫ﺃﺯﺭﺍﺭ‬ ‫ﺟﻤﻴﻊ‬ ‫ﺗﻌﺘﻤﺪ‬ ‫ﻻ‬ ‫ﺍﻟﺨﺎﺻﻴﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻟﻜﻦ‬)‫ﻣﺜﻼ‬ ‫ﻓﻴﺴﺘﺜﻰ‬
shift, ctrl, alt..‫ﺍﻟﺦ‬(

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.

HTML DOM Events
‫ﺍﻝ‬ ‫ﻫﺬﻩ‬Events‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻜﺜﻴﺮ‬ ‫ﻫﻨﺎﻙ‬ ‫ﻳﻮﺟﺪ‬ ‫ﺃﻱ‬ ،‫ﻛﻞ‬ ‫ﻣﻦ‬ ‫ﺟﺰء‬ ‫ﻫﻲ‬ ‫ﺫﻛﺮﻧﻬﺎ‬ ‫ﺍﻟﺘﻲ‬
Events‫ﺍﻝ‬ ‫ﺑﻌﺾ‬ ‫ﺟﺰﺋﻴﺔ‬ ‫ﻛﻞ‬ ‫ﻣﻦ‬ ‫ﻫﻨﺎ‬ ‫ﺍﻹﻗﺘﺒﺎﺱ‬ ‫ﻭﺣﺎﻭﻟﺖ‬ ،‫ﻏﻴﺮﻫﺎ‬events
‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﻓﻤﺜﻼ‬Clipboard Event‫ﺍﻝ‬ ‫ﺑﺄﺧﺬ‬ ‫ﻗﻤﺖ‬oncopy‫ﻣﺜﻼ‬ ‫ﻭﻫﻨﺎﻙ‬
onpaste‫ﻟﻬﺎ‬ ‫ﺃﺗﻄﺮﻕ‬ ‫ﻟﻢ‬^_^‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﺗﺒﺤﺚ‬ ‫ﺃﻥ‬ ‫ﺃﺭﻳﺪ‬ ‫ﻟﺬﻟﻚ‬ ،Events
‫ﺍﻝ‬ ‫ﻓﻬﺬﻩ‬ ،‫ﺫﻛﺮﻧﺎﻩ‬ ‫ﻋﻤﺎ‬ ‫ﺍﻟﻔﻜﺮﺓ‬ ‫ﺗﺨﺘﻠﻒ‬ ‫ﻭﻟﻦ‬ ،‫ﺍﻷﺧﺮﻯ‬Events،‫ﺍﻹﺳﺘﺨﺪﺍﻡ‬ ‫ﺳﻬﻠﺔ‬
‫ﺑﺎﻝ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻹﺳﺘﺨﺪﺍﻡ‬ ‫ﻁﺮﻳﻘﺔ‬ ‫ﺑﺸﺮﺡ‬ ‫ﺳﻨﻘﻮﻡ‬ ‫ﻭﺍﻷﻥ‬Events‫ﻟﻬﺎ‬ ‫ﺗﻄﺮﻗﻨﺎ‬ ‫ﺍﻟﺘﻲ‬
‫ﻣﻦ‬ ‫ﺫﻛﺮﻧﺎ‬ ‫ﻣﻤﺎ‬ ‫ﺟﺰء‬ ‫ﻋﻠﻰ‬ ‫ﻭﻣﺜﺎﻝ‬ ‫ﺍﻟﻤﻼﺣﻈﺎﺕ‬ ‫ﺑﻌﺾ‬ ‫ﻣﻊ‬ ،‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬
Events^_^..

HTML DOM Events
‫ﻣﻼﺣﻈﺔ‬:‫ﻋﻤﻞ‬ ‫ﻳﻤﻜﻨﻚ‬assign‫ﻝ‬Event‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻣﻌﻴﻦ‬JS DOM‫ﻣﺜﻞ‬:
document.getElementById(“btn").onclick = yourScript;
‫ﺍﻟﻴﻪ‬ ‫ﻭﺗﻄﺮﻗﻨﺎ‬ ‫ﺫﻛﺮﻧﺎ‬ ‫ﻣﺎ‬ ‫ﻋﻠﻰ‬ ‫ﻣﺜﺎﻝ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬:

HTML DOM Events
‫ﺍﻝ‬ ‫ﺻﻔﺤﺔ‬HTML:

HTML DOM Events
‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﻓﻲ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬:

‫؟‬ ‫ﺭﻳﺲ‬ ‫ﺑﻴﺮﻱ‬ ‫ﻫﻮ‬ ‫ﻣﻦ‬ ‫ﺗﻌﺮﻑ‬ ‫ﻫﻞ‬
‫ﻭﺿﻌﺖ‬ ‫ﻫﺬﻩ‬ ‫ﺧﺮﺍﺋﻄﻪ‬ ،‫ﺍﻟﻌﺎﻟﻢ‬ ‫ﺃﺟﺰﺍء‬ ‫ﻣﻌﻈﻢ‬ ‫ﺗﺸﻤﻞ‬ ‫ﺧﺮﺍﺋﻂ‬ ‫ﺭﺳﻢ‬ ‫ﺍﺳﺘﻄﺎﻉ‬ ،‫ﻣﺴﻠﻢ‬ ‫ﺑﺤﺎﺭ‬ ‫ﻫﻮ‬
‫ﻗﺒﻞ‬ ‫ﺍﻟﺨﺮﻳﻄﺔ‬ ‫ﺭﺳﻢ‬ ‫ﻣﻦ‬ ‫ﺍﻧﺘﻬﻰ‬ ‫ﺭﻳﺲ‬ ‫ﺑﻴﺮﻱ‬ ‫ﻷﻥ‬ ،‫ﻭﺭﻁﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻐﺮﺏ‬ ‫ﻋﻠﻤﺎء‬27‫ﻣﻦ‬ ‫ﻋﺎﻡ‬
‫ﺍﻷﻣﺮﻳﻜﻴﺔ‬ ‫ﻟﻠﻘﺎﺭﺓ‬ ‫ﻛﻮﻟﻮﻣﺒﻮﺱ‬ ‫ﺍﺧﺘﺸﺎﻑ‬!!‫ﺏ‬ ‫ﺑﺨﺮﺍﺋﻄﻬﻢ‬ ‫ﺗﺴﻤﻰ‬ ‫ﻭﻛﺎﻧﺖ‬“‫ﺃﻧﺘﻴﻠﻴﺎ‬”،
‫ﺳﺎﻋﺪﻭﻫﻢ‬ ‫ﻓﻀﺎء‬ ‫ﺭﺟﺎﻝ‬ ‫ﻫﻨﺎﻙ‬ ‫ﺃﻥ‬ ‫ﻳﺘﺤﺪﺛﻮﻥ‬ ‫ﺟﻌﻠﺘﻬﻢ‬ ،‫ﺍﻟﺨﺮﺍﺋﻂ‬ ‫ﻫﺬﻩ‬ ‫ﺩﻗﺔ‬ ‫ﺃﻥ‬ ‫ﻫﺬﺍ‬ ‫ﻣﻦ‬ ‫ﻭﺍﻷﻋﺠﺐ‬
‫ﻫﺬﺍ‬ ‫ﻓﻲ‬“‫ﻫﻬﻬﻬﻪ‬“‫ﺍﻟﺼﻨﺎﻋﻴﺔ‬ ‫ﺍﻷﻗﻤﺎﺭ‬ ‫ﺻﻮﺭ‬ ‫ﻭﺑﻴﻦ‬ ‫ﺍﻟﺨﺮﺍﺋﻂ‬ ‫ﻫﺬﻩ‬ ‫ﺑﻴﻦ‬ ‫ﺗﻄﺎﻕ‬ ‫ﻫﻨﺎﻙ‬ ‫ﻷﻥ‬ ،
‫ﻣﺨﻴﻒ‬ ‫ﺑﺸﻜﻞ‬! !
‫؟‬ ‫ﺗﻮﺟﻬﺎﺗﻪ‬ ‫ﻫﻲ‬ ‫ﻭﻣﺎ‬ ‫؟‬ ‫ﺃﻣﺮﻳﻜﺎ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﻮﻗﺖ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬ ‫ﻛﻮﻟﻮﻣﺒﻮﺱ‬ ‫ﺃﺭﺳﻞ‬ ‫ﻣﻦ‬ ،‫ﺍﻟﻤﻬﻢ‬ ‫ﻭﺍﻟﺴﺆﺍﻝ‬
‫ﻭﻟﻤﺎﺫﺍ؟‬ ،‫ﺍﻟﺤﻤﺮ؟‬ ‫ﺑﺎﻟﻬﻨﻮﺩ‬ ‫ﻫﺆﻻء‬ ‫ﺑﻔﻌﻠﻪ‬ ‫ﻗﺎﻡ‬ ‫ﺍﻟﺬﻱ‬ ‫ﻭﻣﺎ‬
‫ﺑﺮﻳﺌﺔ‬ ‫ﺃﺳﺌﻠﺔ‬ ‫ﻣﺠﺮﺩ‬!

Event Listener
addEventListener()‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺴﺘﺨﺪﻡ‬JS DOM‫ﻋﻨﺼﺮ‬ ‫ﻹﻋﻄﺎء‬
‫ﺍﻝ‬ ‫ﻋﻨﺎﺻﺮ‬ ‫ﻣﻦ‬HTML‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﺃﻭ‬ ‫ﺃﺣﺪ‬Event/s‫ﺗﻌﻠﻤﻨﺎﻫﺎ‬ ‫ﺍﻟﺘﻲ‬
‫ﺑﺈﻣﻜﺎﻧﻴﺔ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻭﺗﺘﻤﻴﺰ‬ ،‫ﺳﺎﺑﻘﺎ‬ ‫ﻭﺫﻛﺮﻧﺎﻫﺎ‬
(1‫ﻣﻦ‬ ‫ﺃﻛﺜﺮ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﻳﻤﻜﻨﻚ‬Event Click‫ﻋﻤﻞ‬ ‫ﻳﺘﻢ‬ ‫ﺃﻥ‬ ‫ﻭﺩﻭﻥ‬ ‫ﺍﻟﻌﻨﺼﺮ‬ ‫ﻟﻨﻔﺲ‬
override‫ﻟﻸﻭﻝ‬!‫ﺭﺍﺑﻂ‬ ‫ﻫﻨﺎﻙ‬ ‫ﺃﻥ‬ ‫ﻓﺮﺿﻨﺎ‬ ‫ﻟﻮ‬ ‫ﺁﺧﺮ‬ ‫ﺑﻤﻌﻨﻰ‬ ،x‫ﻭﻗﻤﺖ‬ ،
‫ﻹﺿﺎﻓﺔ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬click‫ﺑﻄﺒﺎﻋﺔ‬ ‫ﻳﻘﻮﻡ‬ ‫ﺍﻷﻭﻝ‬“‫ﺃﻧﻴﺲ‬“‫ﻭﺍﻝ‬
click‫ﺑﻄﺒﺎﻋﺔ‬ ‫ﺗﻘﻮﻡ‬ ‫ﺍﻟﺜﺎﻧﻴﺔ‬“‫ﺣﻜﻤﺖ‬“‫ﻭﻁﺒﺎﻋﺔ‬ ‫ﺑﺘﻨﻔﻴﺬ‬ ‫ﻓﺴﻴﻘﻮﻡ‬ ،“‫ﺃﻧﻴﺲ‬
‫ﺣﻜﻤﺖ‬“‫ﺍﻟﺮﺍﺑﻂ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻀﻐﻂ‬ ‫ﻋﻨﺪ‬x.
(2‫ﻣﻦ‬ ‫ﺃﻛﺜﺮ‬ ‫ﻭﺿﻊ‬ ‫ﺇﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻳﻤﻜﻨﻚ‬Event‫ﻳﻌﻨﻲ‬ ،‫ﺍﻟﻌﻨﺼﺮ‬ ‫ﻟﻨﻔﺲ‬
‫ﻣﺜﻼ‬click, onfocus, oncopy..‫ﺍﻟﺴﻜﺮﺑﺖ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻭﺫﻟﻚ‬ ،‫ﺍﻟﺦ‬.

Event Listener
(3‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﺃﻳﻀﺎ‬ ‫ﻳﻤﻜﻨﻨﺎ‬Event‫ﺍﻝ‬ ‫ﻣﻊ‬ ‫ﺧﻼﻟﻬﺎ‬ ‫ﻣﻦ‬window‫ﻧﻜﺘﻔﻲ‬ ‫ﻭﻻ‬ ،
‫ﺍﻝ‬ ‫ﺑﻌﻨﺎﺻﺮ‬ ‫ﻓﻘﻂ‬HTML^_^
(4‫ﺍﻟﺸﻴﻔﺮﺓ‬ ‫ﻭﻭﺿﻮﺡ‬ ،‫ﻭﺍﻟﺘﻌﺪﻳﻞ‬ ،‫ﺍﻟﺘﺤﻜﻢ‬ ‫ﻓﻲ‬ ‫ﺃﺳﻬﻞ‬ ‫ﺃﻧﻬﺎ‬ ‫ﻣﺰﺍﻳﻬﺎ‬ ‫ﻣﻦ‬ ‫ﺃﻳﻀﺎ‬
‫ﺍﻟﺘﻘﻠﻴﺪﻳﺔ‬ ‫ﺍﻟﻄﺮﻳﻘﺔ‬ ‫ﻣﻦ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬^_^.
(5‫ﺍﻝ‬ ‫ﺣﺬﻑ‬ ‫ﺑﺴﻬﻮﻟﺔ‬ ‫ﻭﻳﻤﻜﻨﻚ‬Event Listener‫ﻣﻦ‬ ‫ﻓﻘﻂ‬ ‫ﻋﻠﻴﻪ‬ ‫ﻋﻤﻠﺖ‬ ‫ﺍﻟﺬﻱ‬
‫ﻭﺍﺣﺪﺓ‬ ‫ﺟﻤﻠﺔ‬ ‫ﺧﻼﻝ‬^_^‫ﻭﻫﻲ‬removeEventListener()
‫ﻣﺜﺎﻻ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬) :‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻧﺘﺎﺋﺞ‬ ‫ﻫﺬﻩ‬(

Event Listener
‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬:

Event Listener
‫ﻣﺜﺎﻝ‬2:

Event Listener
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬)‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻗﻴﻢ‬ ‫ﺑﺎﺭﺳﺎﻝ‬ ‫ﺳﻨﻘﻮﻡ‬Event Listener‫ﺍﻝ‬ ‫ﺍﻟﻰ‬
Function‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻨﻈﺮ‬ ‫ﺩﻗﻘﺖ‬ ‫ﻓﺈﺫﺍ‬ ،‫ﻣﻬﻢ‬ ‫ﺃﻣﺮ‬ ‫ﻭﻫﺬﺍ‬ ،‫ﺍﺳﺘﺨﺪﺍﻣﻪ‬ ‫ﺍﻟﻤﺮﺍﺩ‬
‫ﺑﻮﺿﻊ‬ ‫ﺣﺘﻰ‬ ‫ﻧﻘﻢ‬ ‫ﻭﻟﻢ‬ ،‫ﻣﺘﻐﻴﺮﺍﺕ‬ ‫ﻧﺮﺳﻞ‬ ‫ﻟﻢ‬ ‫ﺃﻧﻨﺎ‬ ‫ﺳﺘﺠﺪ‬ ‫ﺍﻟﺴﺎﺑﻘﺔ‬()‫ﺍﻝ‬ ‫ﺍﺳﻢ‬ ‫ﺑﻌﺪ‬
function‫ﺑﺎﺳﺘﺪﻋﺎﺋﻪ‬ ‫ﻧﻘﻮﻡ‬ ‫ﺍﻟﺬﻱ‬^_^..‫ﺍﻟﻨﻘﺎﻁ‬ ‫ﻟﻬﺬﻩ‬ ‫ﺍﻧﺘﺒﻪ‬ ‫ﻟﺬﻟﻚ‬.^_^

Event Listener
‫ﻣﺜﺎﻝ‬4:Bubbling )‫ﺃﻡ‬CapturingEvent Propagation(^_^
‫ﺩﺍﺧﻞ‬ ‫ﻣﻮﺟﻮﺩ‬ ‫ﻣﻌﻴﻦ‬ ‫ﻧﺺ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺎﻟﻨﻘﺮ‬ ‫ﺍﻟﻤﺴﺘﺨﺪﻡ‬ ‫ﻳﻘﻮﻡ‬ ‫ﻋﻨﺪﻣﺎ‬<p>‫ﺍﻝ‬ ‫ﻭﻫﺬﻩ‬
<p>‫ﺩﺍﺧﻞ‬ ‫ﻣﻮﺟﻮﺩﺓ‬<div>‫ﺍﻝ‬ ‫ﺗﻨﻔﻴﺬ‬ ‫ﺳﻴﺘﻢ‬ ‫ﻫﻞ‬ ،click‫ﻋﻠﻰ‬p‫ﻋﻠﻰ‬ ‫ﺃﻡ‬ ‫؟‬ ‫ﻓﻘﻂ‬
div‫ﺍﻝ‬ ‫ﺗﻨﻔﻴﺬ‬ ‫ﺳﻴﺘﻢ‬ ‫ﺃﻡ‬ ‫؟‬ ‫ﻓﻘﻂ‬click‫ﻋﻠﻰ‬p‫ﺛﻢ‬div.‫ﺍﻝ‬ ‫ﺗﻨﻔﻴﺬ‬ ‫ﺳﻴﺘﻢ‬ ‫ﺃﻡ‬ ‫؟‬click
‫ﻋﻠﻰ‬div‫ﺛﻢ‬p‫؟‬
‫؟‬ ‫ﻣﻬﻤﺎ‬ ‫ﺗﺮﺍﻩ‬ ‫ﻭﻫﻞ‬ ‫ﺍﻟﻤﻮﺿﻮﻉ؟‬ ‫ﻓﻲ‬ ‫ﺻﺪﻳﻘﻲ‬ ‫ﺭﺃﻳﻚ‬ ‫ﻣﺎ‬
‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻌﻤﻠﻴﺎﺕ‬ ‫ﻣﺠﻤﻮﻉ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺘﺤﻜﻢ‬ ‫ﺟﺪﺍ‬ ‫ﻭﺟﻤﻴﻞ‬ ‫ﻣﻬﻢ‬ ‫ﺻﺪﻳﻘﻲ‬ ‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬ ‫ﺇﻥ‬
‫ﺃﻣﺎ‬ ،‫ﻋﺒﺜﺎ‬ ‫ﻳﻮﺟﺪ‬ ‫ﻭﻟﻢ‬ ،‫ﻣﻬﻢ‬ ‫ﺍﻷﻣﺮ‬ ‫ﻓﻬﺬﺍ‬ ‫ﻟﺬﺍ‬ ،‫ﻟﺬﻟﻚ‬ ‫ﺍﻟﻤﻨﺎﺳﺒﻖ‬ ‫ﻭﺍﻟﻮﻗﺖ‬ ‫ﺑﺘﻨﻔﻴﺬﻫﺎ‬ ‫ﻧﺮﻏﺐ‬
‫ﺍﻟﺘﻲ‬ ‫ﺍﻹﺟﺎﺑﺔ‬ ‫ﺇﺧﺘﻴﺎﺭ‬ ‫ﻳﻤﻜﻨﻚ‬ ‫ﺑﺄﻧﻚ‬ ‫ﻓﺄﺟﻴﺒﻚ‬ ،‫ﻁﺮﺣﻬﺎ‬ ‫ﺗﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻷﺳﺌﻠﺔ‬ ‫ﺑﺨﺼﻮﺹ‬
‫ﺑﻚ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﺗﺮﻏﺒﻬﺎ‬^_^...

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()

Event Listener
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻟﻤﺸﺎﻫﺪﺓ‬ ‫ﻧﻌﻮﺩ‬ ‫ﻭﺍﻵﻥ‬4:

Event Listener
‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﻭﻫﻮ‬ ‫ﻣﺜﺎﻝ‬ ‫ﻭﺁﺧﺮ‬removeEventListener‫ﻟﻪ‬ ‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﻭﺍﻟﺼﻴﻐﺔ‬ ،
‫ﺍﻝ‬ ‫ﺗﺸﺒﻪ‬addEventListener‫ﺑﺤﺬﻑ‬ ‫ﺗﺮﻏﺐ‬ ‫ﻭﻋﻨﺪﻣﺎ‬ ،Event‫ﻛﺘﺎﺑﺔ‬ ‫ﻋﻠﻴﻚ‬
‫ﺍﻝ‬remove‫ﺑﺎﻝ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﻄﺮﻳﻘﺔ‬ ‫ﺑﺬﺍﺕ‬add...‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:
‫ﻣﺜﺎﻝ‬1 ‫ﻣﺜﺎﻝ‬2

‫ﺍﻟﻤﻠﻚ‬ ‫ﷲ‬ ّ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ّ‫ﻖ‬‫ﺍﻟﺤ‬‫ﺁﺑﺎﺋﻨﺎ‬ ّ‫ﻭﺭﺏ‬ ‫ّﻨﺎ‬‫ﺑ‬‫ﺭ‬ ‫ﷲ‬ ّ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ ،‫ﺍﻟﻴﻘﻴﻦ‬ ‫ﺍﻟﻌﺪﻝ‬ ‫ﷲ‬ ّ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ ،‫ﺍﻟﻤﺒﻴﻦ‬
‫ﻭﻟﻪ‬ ‫ﺍﻟﻤﻠﻚ‬ ‫ﻟﻪ‬ ،‫ﻟﻪ‬ ‫ﺷﺮﻳﻚ‬ ‫ﻻ‬ ‫ﻭﺣﺪﻩ‬ ‫ﷲ‬ ّ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ ،‫ﺎﻟﻤﻴﻦ‬ّ‫ﺍﻟﻈ‬ ‫ﻣﻦ‬ ‫ﻛﻨﺖ‬ ‫ﻲ‬ّ‫ﻧ‬‫ﺇ‬ ‫ﺳﺒﺤﺎﻧﻚ‬ ،‫ﻟﻴﻦ‬ّ‫ﻭ‬‫ﺍﻷ‬
ٍ‫ء‬‫ﺷﻲ‬ ّ‫ﻞ‬‫ﻛ‬ ‫ﻋﻠﻰ‬ ‫ﻭﻫﻮ‬ ،‫ﺍﻟﻤﺼﻴﺮ‬ ‫ﻭﺇﻟﻴﻪ‬ ،‫ﺍﻟﺨﻴﺮ‬ ‫ﺑﻴﺪﻩ‬ ،‫ﻳﻤﻮﺕ‬ ‫ﻻ‬ ‫ﱞ‬‫ﺣﻲ‬ ‫ﻭﻫﻮ‬ ،‫ﻭﻳﻤﻴﺖ‬ ‫ﻳﺤﻴﻲ‬ ‫ﺍﻟﺤﻤﺪ‬
ّ‫ﺇﻻ‬ ‫ﺓ‬ّ‫ﻮ‬‫ﻗ‬ ‫ﻭﻻ‬ ‫ﺣﻮﻝ‬ ‫ﻭﻻ‬ ،‫ﻟﻌﻈﻤﺘﻪ‬ ً‫ﺎ‬‫ﺧﻀﻮﻋ‬ ‫ﷲ‬ ‫ﺳﺒﺤﺎﻥ‬ ،‫ّﺘﻪ‬‫ﻴ‬‫ﺑﺮﺑﻮﺑ‬ ً‫ﺍ‬‫ﺇﻗﺮﺍﺭ‬ ‫ﷲ‬ ّ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ ،‫ﻗﺪﻳﺮ‬
‫ﷲ‬ ّ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ ،‫ﺍﻟﻴﻘﻴﻦ‬ ‫ﺍﻟﻌﺪﻝ‬ ‫ﷲ‬ ّ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ ،‫ﺍﻟﻤﺒﻴﻦ‬ ‫ﺍﻟﻤﻠﻚ‬ ‫ﷲ‬ ّ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ ،‫ﺍﻟﻌﻈﻴﻢ‬ ّ‫ﻲ‬‫ﺍﻟﻌﻠ‬ ‫ہﻠﻟ‬
‫ﻗﺪﻳﺮ‬ ٍ‫ء‬‫ﺷﻲ‬ ّ‫ﻞ‬‫ﻛ‬ ‫ﻋﻠﻰ‬ ‫ﻭﻫﻮ‬ ‫ﺍﻟﺤﻤﺪ‬ ‫ﻭﻟﻪ‬ ‫ﺍﻟﻤﻠﻚ‬ ‫ﻟﻪ‬ ،‫ﻟﻪ‬ ‫ﺷﺮﻳﻚ‬ ‫ﻻ‬ ‫ﻭﺣﺪﻩ‬.

JAVASCRIPT BOM
(BROWSER OBJECT MODEL)
2

‫ﺍﻝ‬ ‫ﺗﻌﺭﻳﻑ‬BOM
‫ﺍﻝ‬BOM‫ﻝ‬ ‫ﺇﺧﺘﺼﺎﺭ‬ ‫ﻫﻲ‬Browser Object Model‫ﺍﻟﺪﻭﺍﻝ‬ ‫ﺗﻌﻨﻲ‬ ‫ﻭﻫﺬﻩ‬ ،
‫ﺳﻜﺮﺑﺖ‬ ‫ﻟﻠﺠﺎﻓﺎ‬ ‫ﺗﺴﻤﺢ‬ ‫ﻭﺍﻟﺘﻲ‬ ،‫ﺍﻹﻧﺘﺮﻧﺖ‬ ‫ﻣﺘﺼﻔﺢ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﻮﺟﻮﺩﺓ‬ ‫ﻭﺍﻟﺨﺼﺎﺋﺺ‬
‫ﻣﻌﻬﺎ‬ ‫ﺑﺎﻟﺘﻌﺎﻣﻞ‬^_^..
‫ﻣﻮﺟﻮﺩ‬ ‫ﻫﻮ‬ ‫ﻣﺎ‬ ‫ﺃﻥ‬ ‫ﻳﻌﻨﻲ‬ ‫ﻓﻬﺬﺍ‬ ،‫ﺍﻹﻧﺘﺮﻧﺖ‬ ‫ﻣﺘﺼﻔﺢ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻌﺘﻤﺪ‬ ‫ﻫﻨﺎ‬ ‫ﺍﻟﺘﻌﺎﻣﻞ‬ ‫ﺃﻥ‬ ‫ﻭﺑﻤﺎ‬
‫ﻳﻌﻨﻲ‬ ‫ﻭﻫﺬﺍ‬ ،‫ﺁﺧﺮ‬ ‫ﻣﺘﺼﻔﺢ‬ ‫ﻓﻲ‬ ‫ﻣﻮﺟﻮﺩﺍ‬ ‫ﻳﻜﻮﻥ‬ ‫ﺃﻥ‬ ‫ﺑﺎﻟﻀﺮﻭﺭﺓ‬ ‫ﻟﻴﺲ‬ ،‫ﻣﺎ‬ ‫ﻣﺘﺼﻔﺢ‬ ‫ﻓﻲ‬
‫ﺃﻳﻀﺎ‬“‫ﻟﻞ‬ ‫ﺭﺳﻤﻴﺔ‬ ‫ﻣﻌﺎﻳﻴﺮ‬ ‫ﺗﻮﺟﺪ‬ ‫ﻻ‬BOM“‫ﺍﻟﺨﺎﺻﻴﺔ‬ ‫ﻓﺈﻥ‬ ‫ﻫﺬﺍ‬ ‫ﻣﻊ‬ ‫ﻟﻜﻦ‬ ،
‫ﺗﺤﺎﻭﻝ‬ ،‫ﻣﻨﻬﺎ‬ ‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬ ‫ﻭﺧﺼﻮﺻﺎ‬ ‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬ ‫ﻓﺈﻥ‬ ‫ﻭﻟﻬﺬﺍ‬ ،‫ﺑﻤﻜﺎﻥ‬ ‫ﺑﺎﻷﻫﻤﻴﺔ‬
‫ﺍﻟﻐﺎﻟﺐ‬ ‫ﻓﻲ‬ ‫ﺑﻜﺜﺮﺓ‬ ‫ﺍﺳﺘﺨﺪﺍﻣﻪ‬ ‫ﻳﺘﻢ‬ ‫ﻣﺎ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺤﻔﺎﻅ‬^_^..‫ﺑﺮﻛﺔ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻨﺒﺪء‬ ‫ﻭﺍﻵﻥ‬
‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﺑﺎﻟﻐﻮﺹ‬ ‫ﻭﻟﻨﺒﺪء‬ ،‫ﺍﻟﺠﺰﺋﻴﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺑﺪﺭﺍﺳﺔ‬ ،‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬BOM*_*

‫ﺍﻝ‬ ‫ﻣﻔﻬﻮﻡ‬ ‫ﺗﻮﺿﺢ‬ ‫ﻭﺍﻟﺘﻲ‬ ،‫ﺍﻟﺼﻮﺭﺓ‬ ‫ﻫﺬﻩ‬ ‫ﺷﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬BOM‫ﺳﻬﻞ‬ ‫ﺑﺸﻜﻞ‬^_^

‫ﻟﻞ‬ ‫ﻛﻴﻒ‬ ‫ﺍﻟﺴﺎﺑﻔﺔ‬ ‫ﺍﻟﺼﻮﺭﺓ‬ ‫ﻣﺸﺎﻫﺪﺓ‬ ‫ﻭﺑﻌﺪ‬ ،‫ﺍﻵﻥ‬ ‫ﺑﺒﺎﻟﻚ‬ ‫ﺧﻄﺮﺕ‬ ‫ﻣﻼﺣﻈﺔ‬ ‫ﺃﻭﻝ‬
Window‫ﻓﻲ‬ ‫ﺗﻜﻮﻥ‬ ‫ﺃﻥ‬parent‫ﻣﻦ‬ ‫ﻟﻜﻞ‬document‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﺗﻌﻠﻤﻨﺎﻩ‬ ‫ﻭﻣﺎ‬
HTML DOM‫ﺍﻝ‬ ‫ﻭﻋﻦ‬BOM‫ﻭﻋﻦ‬ ،‫ﺧﺼﺎﺋﺺ‬ ‫ﻣﻦ‬ ‫ﺑﻪ‬ ‫ﺗﺘﻌﻠﻖ‬ ‫ﻭﻣﺎ‬ ‫ﻧﻔﺴﻪ‬
‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬^_^‫ﺍﻝ‬ ‫ﺗﻌﺮﻳﻒ‬ ‫ﻓﻲ‬ ‫ﻳﻜﻤﻦ‬ ‫ﺑﺴﺎﻁﺔ‬ ‫ﺑﻜﻞ‬ ‫ﻭﺍﻟﺠﻮﺍﺏ‬ ،window^^
‫ﺍﻝ‬window‫ﻫﻲ‬object‫ﻋﻠﻰ‬ ‫ﻭﻳﺤﺘﻮﻱ‬ ،‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬ ‫ﺟﻤﻴﻊ‬ ‫ﻣﻦ‬ ‫ﺩﻋﻤﻪ‬ ‫ﺗﻢ‬
‫ﻭﺍﻟﺨﺼﺎﺋﺺ‬ ‫ﺍﻟﺪﻭﺍﻝ‬ ‫ﺃﺷﻬﺮ‬)Global method & property(‫ﺑﺎﻹﺿﺎﻓﺔ‬
‫ﻭﺍﻝ‬ ،‫ﺍﻟﻤﺘﻐﻴﺮﺍﺕ‬ ‫ﺍﻟﻰ‬function‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻟﻚ‬ ‫ﺗﻤﺜﻴﻠﻬﺎ‬ ‫ﻳﺘﻢ‬ ‫ﺧﻼﻟﻬﺎ‬ ‫ﻣﻦ‬ ‫ﻭﺍﻟﺘﻲ‬ ،
‫ﺗﺼﺒﺢ‬ ،‫ﻭﻏﻴﺮﻫﺎ‬ ‫ﻭﺩﻭﺍﻝ‬ ‫ﻣﺘﻐﻴﺮﺍﺕ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻌﻨﺎﺻﺮ‬ ‫ﻫﺬﻩ‬ ‫ﻭﺟﻤﻴﻊ‬ ،‫ﺍﻟﻤﺘﺼﻔﺢ‬ ‫ﻧﺎﻓﺬﺓ‬
‫ﺍﻝ‬ ‫ﺩﺍﺧﻞ‬ ‫ﻛﻌﻀﻮ‬ ‫ﺗﻠﻘﺎﺋﻲ‬ ‫ﺑﺸﻜﻞ‬window object^_^:P

‫ﺍﻟﺼﻴﻐﺔ‬ ‫ﺑﻬﺬﻩ‬ ‫ﺭﺃﻳﻚ‬ ‫ﺗﻌﻄﻴﻨﻲ‬ ‫ﺃﻥ‬ ‫ﺃﺭﻳﺪﻙ‬ ‫ﻭﺍﻵﻥ‬:
window.document.getElementById("header");
‫ﺗﻌﺮﻓﻬﺎ؟‬ ‫ﺻﻴﻐﺔ‬ ‫ﺗﺸﺒﻪ‬ ‫ﻫﻞ‬
‫ﻋﻦ‬ ‫ﺗﺨﺘﻠﻒ‬ ‫ﻭﻫﻞ‬document.getElementById("header");‫؟‬
‫ﺍﻝ‬ ‫ﺣﺪﻳﺜﻨﺎ‬ ‫ﺧﻀﻢ‬ ‫ﻓﻲ‬ ‫ﻗﻠﻨﺎ‬ ‫ﺃﻧﻨﺎ‬ ‫ﻳﻌﻮﺩ‬ ‫ﺫﻟﻚ‬ ‫ﻓﻲ‬ ‫ﻭﺍﻟﺴﺒﺐ‬ ،‫ﺗﺨﺘﻠﻒ‬ ‫ﻻ‬ ‫ﺍﻟﺠﻮﺍﺏ‬
window‫ﺍﻝ‬ ‫ﻫﻲ‬parent‫ﺗﻤﺜﻞ‬ ‫ﻭﺃﻧﻬﺎ‬object‫ﺗﻠﻘﺎﺋﻴﺎ‬ ‫ﻳﺼﺒﺢ‬ ‫ﺗﺤﺘﻬﺎ‬ ‫ﻣﺎ‬ ‫ﻭﺃﻥ‬
‫ﺍﻝ‬ ‫ﻟﻬﺬﺍ‬ ‫ﺗﺎﺑﻊ‬object..^_^‫ﺍﻷﻭﻟﻰ‬ ‫ﺫﺍﺗﻬﺎ‬ ‫ﻫﻲ‬ ‫ﺍﻟﺜﺎﻧﻴﺔ‬ ‫ﻓﺈﻥ‬ ‫ﻭﺑﻬﺬﺍ‬ ،^_^

JS Popup
‫ﺍﻝ‬Window^_^‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﺑﺎﻟﺤﺪﻳﺚ‬ ‫ﻗﻤﻨﺎ‬ ‫ﺍﻟﺘﻌﺮﻳﻒ‬ ‫ﻓﻲ‬ ،window‫ﻭﺗﻌﺮﻓﻨﺎ‬
‫ﺍﻟﺪﻭ‬ ‫ﺃﺷﻬﺮ‬ ‫ﻋﻦ‬ ‫ﻟﻨﺘﺤﺪﺙ‬ ‫ﻭﺍﻵﻥ‬ ،‫ﻋﻠﻴﻬﺎ‬h،‫ﺇﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﺍﻟﺘﻲ‬ ‫ﻭﺍﻟﺨﺼﺎﺋﺺ‬ ‫ﻝ‬
‫ﺍﻝ‬ ‫ﻣﻮﺿﻮﻉ‬ ‫ﺗﺤﺖ‬ ‫ﺑﺎﻟﻨﻬﺎﻳﺔ‬ ‫ﺗﻨﺪﺭﺝ‬ ‫ﻭﺍﻟﺘﻲ‬window..‫ﻭﺃﻭﻝ‬object‫ﺍﻝ‬ ‫ﻫﻮ‬JS
Popup
(1alert():‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﺭﺳﺎﻟﺔ‬ ‫ﻹﻅﻬﺎﺭ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺴﺘﺨﺪﻡ‬Popup^_^.
(2confirm():‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﺭﺳﺎﻟﺔ‬ ‫ﻹﻅﻬﺎﺭ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺴﺘﺨﺪﻡ‬Popup‫ﻓﻴﻬﺎ‬
‫ﺍﻹﻟﻐﺎء‬ ‫ﺃﻭ‬ ‫ﻟﻠﺘﺄﻛﻴﺪ‬ ‫ﺃﺯﺭﺍﺭ‬^_^.
(3prompt():‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﺭﺳﺎﻟﺔ‬ ‫ﻹﻅﻬﺎﺭ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺴﺘﺨﺪﻡ‬Popup‫ﻭﺗﺤﺘﻮﻱ‬ ،
‫ﻭﺍﻹﻟﻐﺎء‬ ‫ﻟﻠﻤﻮﺍﻓﻘﺔ‬ ‫ﺯﺭ‬ ‫ﻣﻊ‬ ،‫ﻗﻴﻤﺔ‬ ‫ﻹﺩﺧﺎﻝ‬ ‫ﻧﺺ‬ ‫ﻣﺮﺑﻊ‬ ‫ﻋﻠﻰ‬.

JS Popup
‫ﻣﻌﺎ‬ ‫ﻣﺜﺎﻻ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ،‫ﻭﺍﻵﻥ‬^_^:

JS Timing
،‫ﺟﺪﺍ‬ ‫ﻭﺍﻟﺮﺍﺋﻌﺔ‬ ،‫ﺟﺪﺍ‬ ‫ﺍﻟﻤﻬﻤﺔ‬ ‫ﺍﻷﻣﻮﺭ‬ ‫ﻣﻦ‬ ‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻮﻗﺖ‬ ‫ﻣﻊ‬ ‫ﺍﻟﺘﻌﺎﻣﻞ‬ ‫ﺇﻥ‬
‫ﺍﻟﻰ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺍﻵﻥ‬ ‫ﺳﻨﺘﻄﺮﻕ‬ ‫ﻭﻟﻬﺬﺍ‬ ،‫ﻛﺜﻴﺮﺓ‬ ‫ﺑﺮﻣﺠﻴﺔ‬ ‫ﻣﺸﺎﻛﻞ‬ ‫ﻣﻦ‬ ‫ﺗﻨﻘﺬ‬ ‫ﻭﺍﻟﺘﻲ‬
‫ﻭﻫﻤﺎ‬ ‫ﻣﻬﻤﺘﻴﻦ‬ ‫ﺩﺍﻟﺘﻴﻦ‬:
(1setInterval():،‫ﺍﻟﻤﺮﺓ‬ ‫ﺗﻠﻮ‬ ‫ﻣﺮﺓ‬ ‫ﺑﺮﻣﺠﺔ‬ ‫ﺷﻴﻔﺮﺓ‬ ‫ﻟﺘﻨﻔﻴﺬ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺴﺘﺨﺪﻡ‬
‫ﻛﻤﺎ‬ ،‫ﺑﺘﺤﺪﻳﺪﻫﺎ‬ ‫ﻛﻤﺒﺮﻣﺞ‬ ‫ﺃﻧﺖ‬ ‫ﺗﻘﻮﻡ‬ ،‫ﻣﺤﺪﺩﺓ‬ ‫ﺯﻣﻨﻴﺔ‬ ‫ﻓﺘﺮﺓ‬ ‫ﻋﻠﻰ‬ ‫ﺑﻨﺎﺋﺎ‬ ‫ﺗﻮﻗﻒ‬ ‫ﺩﻭﻥ‬
‫ﻣﻌﻴﻨﺔ‬ ‫ﻟﺤﻈﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺘﻜﺮﺍﺭ‬ ‫ﻫﺬﺍ‬ ‫ﻹﻧﻬﺎء‬ ‫ﺁﺧﺮ‬ ‫ﺑﺮﻣﺠﻲ‬ ‫ﺧﻴﺎﺭ‬ ‫ﻟﻚ‬ ‫ﻳﺘﻮﻓﺮ‬ ‫ﺃﻧﻪ‬^^
‫ﻫﻲ‬ ‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﻭﺍﻟﺼﻴﻐﺔ‬:
setInterval("javascript function", milliseconds);
‫ﺍﻝ‬ ‫ﻓﺈﻥ‬ ‫ﺗﺄﻛﻴﺪ‬ ‫ﻭﺑﻜﻞ‬window‫ﺫﻟﻚ‬ ‫ﻟﺠﻮﺍﺯ‬ ‫ﺑﺤﺬﻓﻬﺎ‬ ‫ﻗﻤﻨﺎ‬ ‫ﻟﻜﻦ‬ ‫ﻣﻮﺟﻮﺩﺓ‬^^،
‫ﺍﻝ‬ ‫ﻣﻊ‬ ‫ﻓﻌﻠﻨﺎ‬ ‫ﻭﻛﻤﺎ‬ ‫ﺳﺎﺑﻘﺎ‬ ‫ﺫﻛﺮﻧﺎ‬ ‫ﻛﻤﺎ‬alert‫ﻣﺮﺓ‬ ‫ﺍﻟﻤﻌﻠﻮﻣﺔ‬ ‫ﺑﻬﺬﻩ‬ ‫ﺃﺫﻛﺮﻙ‬ ‫ﻭﻟﻦ‬ ،
‫ﺃﺧﺮﻯ‬:P

JS Timing
‫ﻋﻠﻰ‬ ‫ﻣﻼﺣﻈﺎﺕ‬setInterval:
(1‫ﺍﻝ‬ ‫ﻟﻬﺬﺍ‬ ‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﺑﺎﻟﺼﻴﻐﺔ‬Function‫ﺃﻥ‬ ‫ﻧﺠﺪ‬“javascript
function”‫ﺗﺴﺘﺨﺪﻡ‬ ‫ﺃﻥ‬ ‫ﻳﺠﺐ‬ ‫ﺃﻧﻚ‬ ‫ﺗﻌﻨﻲ‬function‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﺠﻮﺯ‬ ‫ﻭﻻ‬
‫ﺍﻝ‬ ‫ﻏﻴﺮ‬function^_^.
(2Milliseconds‫ﺩﻭﺭﺓ‬ ‫ﻟﻜﻞ‬ ‫ﺍﻟﻤﻄﻠﻮﺏ‬ ‫ﺍﻟﻮﻗﺖ‬ ‫ﻫﻮ‬)‫ﻟﻴﺘﻢ‬ ‫ﺍﻟﻼﺯﻡ‬ ‫ﺍﻟﻮﻗﺖ‬ ‫ﺃﻱ‬
‫ﺑﻮﺿﻊ‬ ‫ﻗﻤﻨﺎ‬ ‫ﻓﻠﻮ‬ ،‫ﻣﺮﺓ‬ ‫ﻛﻞ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬ ‫ﺗﻨﻔﻴﺬ‬1000‫ﻳﻌﻨﻲ‬ ‫ﻓﻬﺬﺍ‬ ،1
‫ﻭﺍﺣﺪﺓ‬ ‫ﻣﺮﺓ‬ ‫ﺛﺎﻧﻴﺔ‬ ‫ﻛﻞ‬ ‫ﺗﻨﻔﻴﺬﻫﺎ‬ ‫ﺳﻴﺘﻢ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬ ‫ﺃﻥ‬ ‫ﺃﻱ‬ ،‫ﺛﺎﻧﻴﺔ‬^_^.
)1000 ms=1s(
(3‫ﺗﺴﺘﺨﺪﻡ‬clearInterval()‫ﺍﻝ‬ ‫ﻹﻳﻘﺎﻑ‬setInterval‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﻭﺍﻟﺼﻴﻐﺔ‬
‫ﻫﻲ‬ ‫ﻟﻬﺎ‬:clearInterval(intervalVariable)‫ﻭﺍﻝ‬ ،
intervalVariable‫ﻣﺜﻞ‬ ‫ﺍﻟﻮﻗﺖ‬ ‫ﺩﺍﻟﺔ‬ ‫ﺍﻟﻴﻪ‬ ‫ﺍﺳﻨﺪ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺍﻟﻤﺘﻐﻴﺮ‬ ‫ﺗﻌﻨﻲ‬ ‫ﻫﺬﻩ‬
intervalVariable = setInterval(”…”, 2000);

JS Timing
.2setTimeout():‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬ ‫ﺍﻟﺸﻴﻔﺮﺓ‬ ‫ﺗﻨﻔﻴﺬ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺗﻘﻮﻡ‬
‫ﺍﻟﺸﻴﻔﺮﺓ‬ ‫ﺗﻨﻔﻴﺬ‬ ‫ﻳﺘﻢ‬ ‫ﺣﺘﻰ‬ ‫ﺍﻟﻼﺯﻡ‬ ‫ﺍﻟﻮﻗﺖ‬ ‫ﺗﺤﺪﻳﺪ‬ ‫ﻭﻳﺘﻢ‬ ،‫ﻓﻘﻂ‬ ‫ﻭﺍﺣﺪﺓ‬ ‫ﻟﻤﺮﺓ‬ ‫ﺗﺤﺘﻮﻳﻬﺎ‬
‫ﺑﺎﻝ‬ ‫ﺍﻟﺒﺮﻣﺠﺔ‬ms‫ﺃﻳﻀﺎ‬..
‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﺍﻟﺼﻴﻐﺔ‬:
setTimeout("javascript function", milliseconds);
‫ﻋﻠﻰ‬ ‫ﻣﻼﺣﻈﺎﺕ‬ ‫ﻣﻦ‬ ‫ﺫﻛﺮﻩ‬ ‫ﺗﻢ‬ ‫ﻣﺎ‬ ‫ﺗﺄﻛﻴﺪ‬ ‫ﺑﻜﻞ‬setInterval‫ﻫﻨﺎ‬ ‫ﻳﻨﻄﺒﻖ‬
‫ﻫﻮ‬ ‫ﺍﻟﻤﺆﻗﺖ‬ ‫ﻫﺬﺍ‬ ‫ﺍﻟﻐﺎء‬ ‫ﻋﻦ‬ ‫ﻫﻨﺎ‬ ‫ﺍﻟﻤﺴﺆﻭﻟﺔ‬ ‫ﺍﻟﺪﺍﻟﺔ‬ ‫ﻟﻜﻦ‬ ،‫ﺃﻳﻀﺎ‬
clearTimeout(timeoutVariable)
‫ﻭﺍﻵﻥ‬..‫ﺍﻝ‬ ‫ﻋﻠﻰ‬ ‫ﻣﺘﻨﻮﻋﺔ‬ ‫ﺃﻣﺜﻠﺔ‬ ‫ﻭﻧﺸﺎﻫﺪ‬ ‫ﻟﻨﺬﻫﺐ‬JS Timing^_^

JS Timing
‫ﻣﺜﺎﻝ‬:
‫ﻋﻠﻰ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺗﻄﺒﻴﻖ‬ ‫ﺃﺭﺩﺕ‬ ‫ﺇﺫﺍ‬clearTimeout‫ﻓﻌﻠﻴﻚ‬
‫ﺍﻝ‬ ‫ﺯﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻨﻘﺮ‬ ‫ﺃﻥ‬Clear Time Out‫ﺑﻌﺪ‬ ‫ﻣﺒﺎﺷﺮﺓ‬
‫ﻋﻠﻰ‬ ‫ﺍﻟﻀﻐﻂ‬Start Time)‫ﺗﻤﻠﻚ‬3‫ﻓﻘﻂ‬ ‫ﺛﻮﺍﻧﻲ‬:P(

‫ﺍﻟﺤﻖ‬ ‫ﻭﻓﻲ‬ ‫ﻭﻟﻠﺤﻖ‬ ‫ﺑﺎﻟﺤﻖ‬ ‫ﻗﻮﻧﺎ‬ ‫ﺍﻟﻠﻬﻢ‬
‫ﺃﻧﻔﺴﻨﺎ‬ ‫ﺷﺮﻭﺭ‬ ‫ﻣﻦ‬ ‫ﻭﺃﻋﺬﻧﺎ‬
‫ﻭﺑﺤﻤﺪﻙ‬ ‫ﺍﻟﻠﻬﻢ‬ ‫ﺳﺒﺤﺎﻧﻚ‬
‫ﺃﻧﺖ‬ ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ ‫ﺃﻥ‬ ‫ﺃﺷﻬﺪ‬
‫ﺇﻟﻴﻚ‬ ‫ﻭﺃﺗﻮﺏ‬ ‫ﺃﺳﺘﻐﻔﺮﻙ‬

JS Screen
‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻳﺴﺘﺨﺪﻡ‬Object،‫ﻟﻠﻤﺴﺘﺨﺪﻡ‬ ‫ﺍﻟﻌﺮﺽ‬ ‫ﺑﺸﺎﺷﺔ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﻤﻌﻠﻮﻣﺎﺕ‬ ‫ﻟﺠﻠﺐ‬
‫ﺑﺎﻟﺸﺎﺷﺔ‬ ‫ﺍﻟﺨﺎﺹ‬ ‫ﻭﺍﻟﻌﺮﺽ‬ ‫ﺍﻹﺭﺗﻔﺎﻉ‬ ‫ﻫﻲ‬ ‫ﺍﻟﻤﻌﻠﻮﻣﺎﺕ‬ ‫ﻫﺬﻩ‬ ‫ﻭﺃﻫﻢ‬^_^.
‫ﻋﻨﻬﺎ‬ ‫ﺳﻨﺘﺤﺪﺙ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﺨﺼﺎﺋﺺ‬:
(1screen.width:‫ﺑﺎﻟﺒﻜﺴﻞ‬ ‫ﺑﺎﻟﺸﺎﺷﺔ‬ ‫ﺍﻟﺨﺎﺹ‬ ‫ﺍﻟﻌﺮﺽ‬ ‫ﻟﺠﻠﺐ‬ ‫ﻫﺬﻩ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬.
(2screen.height:‫ﺑﺎﻟﺒﻜﺴﻞ‬ ‫ﺑﺎﻟﺸﺎﺷﺔ‬ ‫ﺍﻟﺨﺎﺹ‬ ‫ﺍﻹﺭﺗﻔﺎﻉ‬ ‫ﻟﺠﻠﺐ‬ ‫ﻫﺬﻩ‬ ‫ﻭﺗﺴﺘﺨﺪﻡ‬
(3screen.availWidth‫ﻭ‬screen.availHeight‫ﻟﺠﻠﺐ‬ ‫ﻫﺬﻩ‬ ‫ﺗﺴﺘﺨﺪﻡ‬
‫ﺑﺎﻟﺒﻜﺴﻞ‬ ‫ﺑﺎﻟﺸﺎﺷﺔ‬ ‫ﺍﻟﺨﺎﺹ‬ ‫ﻭﺍﻟﻌﺮﺽ‬ ‫ﺍﻹﺭﺗﻔﺎﻉ‬“‫ﺍﻟﺨﺎﺹ‬ ‫ﺍﻟﺤﺠﻢ‬ ‫ﻁﺮﺡ‬ ‫ﻳﺘﻢ‬ ‫ﻻﻛﻦ‬
‫ﺍﻝ‬ ‫ﻣﺜﻞ‬ ،‫ﺍﻟﺤﺠﻢ‬ ‫ﻣﻦ‬ ‫ﻣﺜﻼ‬ ‫ﺍﻟﺘﺸﻐﻴﻞ‬ ‫ﻟﻨﻈﺎﻡ‬ ‫ﺍﻟﻌﺮﺽ‬ ‫ﻣﺰﺍﻳﺎ‬ ‫ﺑﺒﻌﺾ‬windows
taskbar^_^
‫ﻭﺍﻵﻥ‬..‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻟﻤﺸﺎﻫﺪﺓ‬ ‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﻟﻠﺸﺮﻳﺤﺔ‬ ‫ﺍﻧﺘﻘﻞ‬:^_^

JS Screen
‫ﻣﺜﺎﻝ‬:

JS Location
‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻳﺴﺘﺨﺪﻡ‬object‫ﺑﺎﻟﺼﻔﺤﺔ‬ ‫ﺍﻟﺨﺎﺹ‬ ‫ﺍﻟﻌﻨﻮﺍﻥ‬ ‫ﻟﺠﻠﺐ‬)URL(‫ﻭﺇﻋﺎﺩﺓ‬ ،
‫ﻣﺤﺪﺩﺓ‬ ‫ﻣﻌﻠﻮﻣﺎﺕ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺤﺼﻮﻝ‬ ‫ﻳﻤﻜﻦ‬ ‫ﻛﻤﺎ‬ ،‫ﺃﺧﺮﻯ‬ ‫ﺻﻔﺤﺔ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﺗﻮﺟﻴﻪ‬
‫ﺍﻝ‬ ‫ﻣﻦ‬URL‫ﺍﻝ‬ ‫ﻣﺜﻞ‬host name‫ﻭﺍﻝ‬path‫ﺑﺎﻟﺼﻔﺤﺔ‬ ‫ﺍﻟﺨﺎﺹ‬^^
‫ﺑﺎﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﺳﻨﻘﻮﻡ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﺪﻭﺍﻝ‬ ‫ﺃﻫﻢ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬:
(1location.href:‫ﺍﻝ‬ ‫ﻟﺠﻠﺐ‬ ‫ﺗﺴﺘﺨﺪﻡ‬URL‫ﺑﺎﻟﺼﻔﺤﺔ‬ ‫ﺍﻟﺨﺎﺹ‬.
(2location.hostname:‫ﺍﻝ‬ ‫ﻟﺠﻠﺐ‬ ‫ﺗﺴﺘﺨﺪﻡ‬hostname‫ﻣﺜﻞ‬
nees.com2www.
(3location.pathname:‫ﺍﻝ‬ ‫ﻟﺠﻠﺐ‬ ‫ﺗﺴﺘﺨﺪﻡ‬path‫ﺑﻤﻠﻒ‬ ‫ﺍﻟﺨﺎﺹ‬
/js/aneesCustomScript.js

JS Location
(4location.protocol:‫ﺍﻝ‬ ‫ﻟﺠﻠﺐ‬ ‫ﻳﺴﺘﺨﺪﻡ‬protocol‫ﺑﺎﻟﺼﻔﺤﺔ‬ ‫ﺍﻟﺨﺎﺹ‬
‫ﻣﺜﻞ‬http^_^
(5location.assign():‫ﻟﻌﻤﻞ‬ ‫ﺗﺴﺘﺨﺪﻡ‬load‫ﺍﻟﻤﻠﻒ‬ ‫ﻓﻲ‬ ‫ﺁﺧﺮ‬ ‫ﻟﻤﻠﻒ‬
‫ﺍﻟﺤﺎﻟﻲ‬...
‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ‫ﻭﺍﻵﻥ‬:‫ﻣﺜﺎﻝ‬1:

JS Location
‫ﻋﻤﻞ‬ ‫ﺳﻴﺘﻢ‬ ‫ﻫﻨﺎ‬load‫ﻝ‬2nees.com‫ﺍﻝ‬ ‫ﻓﻲ‬document،‫ﻓﻴﻪ‬ ‫ﺃﻧﺎ‬ ‫ﺍﻟﺬﻱ‬
‫ﺯﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻀﻐﻂ‬ ‫ﺳﻴﻤﻜﻨﻨﻲ‬ ‫ﺃﻧﻪ‬ ‫ﻳﻌﻨﻲ‬ ‫ﻭﻫﺬﺍ‬back‫ﺧﻄﻮﺓ‬ ‫ﺍﻟﻤﺘﺼﻔﺢ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺮﺟﻮﻉ‬
‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻋﻦ‬ ‫ﻳﺨﺘﻠﻒ‬ ‫ﻣﺎ‬ ‫ﻭﻫﺬﺍ‬ ،‫ﻟﻠﺨﻠﻒ‬location.replace!
location.replace‫ﺍﻝ‬ ‫ﻧﻔﺲ‬ ‫ﺑﺘﺒﺪﻳﻞ‬ ‫ﺗﻘﻮﻡ‬document‫ﻳﻌﻨﻲ‬ ‫ﻭﻫﺬﺍ‬ ،‫ﻓﻴﻪ‬ ‫ﺃﻧﺎ‬ ‫ﺍﻟﺬﻱ‬
‫ﺍﻝ‬ ‫ﺗﺨﺰﻳﻦ‬ ‫ﻋﺪﻡ‬Session‫ﺑﺎﻝ‬ ‫ﺍﻟﺨﺎﺹ‬hestory‫ﺯﺭ‬ ‫ﻫﻨﺎﻙ‬ ‫ﻳﻜﻮﻥ‬ ‫ﻟﻦ‬ ‫ﻭﺑﻬﺬﺍ‬back
^_^

JS Location
‫ﺑﻪ‬ ‫ﺗﺮﻏﺐ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺍﻟﺮﺍﺑﻂ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﺗﻮﺟﻴﻪ‬ ‫ﺇﻋﺎﺩﺓ‬ ‫ﻳﻤﻜﻨﻚ‬ ‫ﻛﻴﻒ‬ ‫ﺷﺎﻫﺪ‬^_^
‫ﻣﻌﺎ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﺟﻤﻴﻊ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ،‫ﻭﺍﻵﻥ‬^_^

JS History
‫ﺍﻝ‬ ‫ﻫﺬﺍ‬object‫ﺍﻝ‬ ‫ﻋﻠﻰ‬ ‫ﻳﺤﺘﻮﻱ‬History‫ﻭﻁﺒﻌﺎ‬ ،‫ﺑﺎﻟﻤﺘﺼﻔﺢ‬ ‫ﺍﻟﺨﺎﺹ‬
‫ﻣﻦ‬ ‫ﻧﻮﻋﺎ‬ ‫ﻳﺤﺘﻮﻱ‬ ‫ﻗﺪ‬ ‫ﻓﺈﻧﻪ‬ ،‫ﺍﻟﻤﺴﺘﺨﺪﻣﻴﻦ‬ ‫ﻟﺪﻯ‬ ‫ﺧﺼﻮﺻﺎ‬ ‫ﺍﻷﻣﺮ‬ ‫ﻫﺬﺍ‬ ‫ﻭﻟﺨﺼﻮﺻﻴﺔ‬
‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﺤﻔﻮﻅﺔ‬ ‫ﺍﻟﺮﻭﺍﺑﻂ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﻮﺻﻮﻝ‬ ‫ﺣﺮﻳﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻘﻴﻮﺩ‬Session History
‫ﻭﻫﻨﺎﻙ‬2 method‫ﻭﻫﻤﺎ‬ ‫ﺇﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻳﻤﻜﻨﻨﺎ‬:
(1history.back():‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﺍﻟﻰ‬ ‫ﻟﻠﺮﺟﻮﻉ‬ ‫ﺗﺴﺘﺨﺪﻡ‬ ‫ﻭﻫﺬﻩ‬)‫ﺃﻱ‬
‫ﺯﺭ‬ ‫ﻳﻌﻤﻞ‬ ‫ﻛﻤﺎ‬ ‫ﺗﻌﻤﻞ‬back‫ﺍﻟﻤﺘﺼﻔﺢ‬ ‫ﻓﻲ‬.(
(2history.forward():‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﻟﻠﺼﻔﺤﺔ‬ ‫ﻟﻠﺬﻫﺎﺏ‬ ‫ﺗﺴﺘﺨﺪﻡ‬ ‫ﻭﻫﺬﻩ‬)‫ﺻﻔﺤﺔ‬
‫ﺯﺭ‬ ‫ﻋﻤﻞ‬ ‫ﻭﺗﺸﺒﻪ‬ ،‫ﻗﺒﻠﻬﺎ‬ ‫ﺻﻔﺤﺔ‬ ‫ﺍﻟﻰ‬ ‫ﻋﺪﺕ‬ ‫ﺛﻢ‬ ‫ﻓﻴﻬﺎ‬ ‫ﻛﻨﺖ‬forward‫ﻓﻲ‬
‫ﺍﻟﻤﺘﺼﻔﺢ‬(^_^...‫ﻣﺜﺎﻻ‬ ‫ﻭﻧﺸﺎﻫﺪ‬ ‫ﻟﻨﺬﻫﺐ‬ ‫ﻭﺍﻵﻥ‬^_^

JS History
‫ﻣﺜﺎﻝ‬:
‫ﺯﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺎﻟﻀﻐﻂ‬ ‫ﻗﻢ‬ ‫ﺛﻢ‬ ،‫ﺍﻟﺘﻮﺟﻴﻪ‬ ‫ﺇﻋﺎﺩﺓ‬ ‫ﺯﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺎﻟﻀﻐﻂ‬ ‫ﻗﻢ‬ ‫ﺃﻭﻻ‬ ،‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻟﺘﻄﺒﻴﻖ‬
Back...‫ﺯﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺎﻟﻀﻐﻂ‬ ‫ﻗﻢ‬ ‫ﺫﻟﻚ‬ ‫ﺑﻌﺪ‬Go Forward^_^

JS Cookies
‫ﻣﻊ‬ ‫ﻟﺬﻳﺬ‬ ‫ﻁﻌﺎﻡ‬ ‫ﻭﺍﻟﻜﻌﻜﺎﺕ‬ ،‫ﺍﻟﻜﻌﻜﺎﺕ‬ ‫ﻋﻦ‬ ‫ﻳﺘﺤﺪﺙ‬ ‫ﻓﻬﻮ‬ ،‫ﺟﺪﺍ‬ ‫ﻣﻬﻢ‬ ‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬
‫ﺍﻟﺸﺎﻱ‬:P!_!‫ﺛﺎﻧﻲ‬ ‫ﻟﻤﻮﺿﻮﻉ‬ ‫ﺭﺣﺖ‬ ‫ﺷﻜﻠﻲ‬ ‫ﺑﻌﺘﺬﺭ‬:P^_^
‫ﺍﻝ‬Cookies‫ﻣﻠﻒ‬ ‫ﻓﻲ‬ ‫ﺗﺨﺰﻳﻨﻬﺎ‬ ‫ﻳﺘﻢ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﺒﻴﺎﻧﺎﺕ‬ ‫ﻣﻦ‬ ‫ﻣﺠﻤﻮﻋﺔ‬ ‫ﻫﻲ‬TXT file
‫ﺑﺎﻝ‬ ‫ﺍﻟﺨﺎﺹ‬ ‫ﺍﻟﺤﺎﺳﻮﺏ‬ ‫ﺟﻬﺎﺯ‬ ‫ﻋﻠﻰ‬user،‫ﺍﻟﺮﺍﺋﻌﺔ‬ ‫ﺍﻟﻔﻜﺮﺓ‬ ‫ﻫﺬﻩ‬ ‫ﺇﺑﺘﻜﺎﺭ‬ ‫ﻭﺳﺒﺐ‬ ،
‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﻤﻌﻠﻮﻣﺎﺕ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺤﺼﻮﻝ‬ ‫ﺧﻼﻟﻬﺎ‬ ‫ﻣﻦ‬ ‫ﻧﺴﺘﻄﻴﻊ‬ ‫ﻁﺮﻳﻘﺔ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﺤﺎﺟﺔ‬
‫ﺑﻌﻤﻞ‬ ‫ﺳﻴﻘﻮﻡ‬ ‫ﺍﻟﺴﻴﺮﻓﺮ‬ ‫ﻷﻥ‬ ،‫ﻟﻠﻤﻮﻗﻊ‬ ‫ﻣﻐﺎﺩﺭﺗﻪ‬ ‫ﺑﻌﺪ‬ ‫ﺑﺎﻟﻤﺴﺘﺨﺪﻡ‬shutdown‫ﻟﻞ‬
connection‫ﻭﺑﻬﺬﺍ‬ ،‫ﺍﻟﻤﺘﺼﻔﺢ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺒﻴﺎﻧﺎﺕ‬ ‫ﻋﺮﺽ‬ ‫ﻣﻦ‬ ‫ﺍﻹﻧﺘﻬﺎء‬ ‫ﻳﺘﻢ‬ ‫ﻋﻨﺪﻣﺎ‬
‫ﺍﻝ‬ ‫ﺩﻭﺭ‬ ‫ﻳﻜﻮﻥ‬Cookies‫ﻫﻮ‬ ‫ﺍﻟﺮﺋﻴﺴﻲ‬“‫ﻟﺘﻘﺪﻳﻢ‬ ،‫ﺍﻟﻤﺴﺘﺨﺪﻣﻴﻦ‬ ‫ﻣﻌﻠﻮﻣﺎﺕ‬ ‫ﺣﻔﻆ‬
‫ﺧﺪﻣﺔ‬‫ﺃﻓﻀﻞ‬)‫ﻟﻠﻤﺴﺘﺨﺪﻡ‬ ‫ﺍﻟﻤﻮﻗﻊ‬ ‫ﻳﻀﻌﻬﺎ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻤﻌﻠﻮﻣﺎﺕ‬ ‫ﺗﻜﻮﻥ‬ ‫ﻗﺪ‬ ‫ﺍﻟﻤﺴﺘﺨﺪﻣﻴﻦ‬ ‫ﻣﻌﻠﻮﻣﺎﺕ‬
‫ﺃﻓﻀﻞ‬ ‫ﺧﺪﻣﺔ‬ ‫ﻟﺘﻘﺪﻳﻢ‬(”) ....‫ﺍﻟﺴﻠﺒﻲ‬ ‫ﺍﻟﺠﺎﻧﺐ‬ ‫ﻋﻦ‬ ‫ﻫﻨﺎ‬ ‫ﺃﺗﺤﺪﺙ‬ ‫ﻭﻟﻦ‬:P(

JS Cookies
‫ﺍﻝ‬ ‫ﺣﻔﻆ‬ ‫ﻳﺘﻢ‬ ‫ﻛﻴﻒ‬Cookies‫ﺍﻟﻤﻠﻒ؟‬ ‫ﺩﺍﺧﻞ‬
‫ﺍﻝ‬ ‫ﺣﻔﻆ‬ ‫ﻳﺘﻢ‬Cookies‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻤﻠﻒ‬ ‫ﺩﺍﺧﻞ‬Name - Value‫ﻳﻤﺜﻞ‬ ‫ﺑﺤﻴﺚ‬
‫ﺍﻝ‬Name‫ﺍﻟﺒﺮﻣﺠﻲ‬ ‫ﺍﻹﺳﻢ‬)‫ﺑﺎﺳﺘﺪﻋﺎﺋﻬﺎ‬ ‫ﻧﺮﻏﺐ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻤﻌﻠﻮﻣﺔ‬ ‫ﻳﻤﺜﻞ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺍﻹﺳﻢ‬
‫ﻣﺜﻞ‬userName(‫ﻭﺍﻝ‬ ،Value‫ﺍﻹﺳﻢ‬ ‫ﺑﻬﺬﺍ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﻫﻲ‬^_^.
‫ﻋﻠﻰ‬ ‫ﻣﺜﺎﻝ‬cookies:
name = Anees
age = 24
email = aneeshikmat@2nees.com

JS Cookies
‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻷﻭﻝ‬ ‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﺣﻮﻝ‬ ‫ﺣﺪﻳﺜﻨﺎ‬ ‫ﻟﻨﺒﺪﺃ‬ ،‫ﻭﺍﻵﻥ‬Cookies‫ﻭﻫﻮ‬
‫ﺃﻭﻻ‬:Create a Cookie:
‫ﺍﻝ‬ ‫ﺇﻧﺸﺎء‬ ‫ﻳﻤﻜﻨﻨﺎ‬Cookie‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻁﺮﻳﻖ‬ ‫ﻋﻦ‬ ‫ﻭﺫﻟﻚ‬ ،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬
document.cookie‫ﺑﺎﻝ‬ ‫ﺭﺃﻳﻚ‬ ‫ﻫﻮ‬ ‫ﻣﺎ‬ ،‫ﺃﻛﻤﻞ‬ ‫ﺃﻥ‬ ‫ﻗﺒﻞ‬ ‫ﻟﻜﻦ‬ ،‫ﺳﻬﻞ‬ ‫ﺍﻷﻣﺮ‬ ،
document.cookie..‫ﻫﻲ‬ ‫ﻫﻞ‬DOM‫ﺃﻡ‬BOM‫؟‬
‫ﻳﻜﻮﻥ‬ ‫ﺃﻥ‬ ‫ﻳﺠﺐ‬ ‫ﺍﻟﺠﻮﺍﺏ‬DOM‫ﺗﺄﻛﻴﺪ‬ ‫ﺑﻜﻞ‬^_^‫ﺍﻝ‬ ،Cookie‫ﺑﺬﺍﺗﻪ‬BOM،
‫ﺳﻴﻜﻮﻥ‬ ‫ﺍﻟﻌﻤﻠﻴﺎﺕ‬ ‫ﻣﻦ‬ ‫ﻭﻏﻴﺮﻫﺎ‬ ‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻤﻌﻠﻮﻣﺎﺕ‬ ‫ﻟﻨﺤﻔﻆ‬ ‫ﻧﺴﺘﺨﺪﻣﻪ‬ ‫ﻣﺎ‬ ‫ﻟﻜﻦ‬
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬document‫ﺳﻴﻜﻮﻥ‬ ‫ﺃﻱ‬DOM..^^)‫ﺍﻟﺘﻨﺒﻴﻪ‬ ‫ﻭﺟﺐ‬(

JS Cookies
‫ﺍﻝ‬ ‫ﺇﻧﺸﺎء‬ ‫ﻋﻨﺪ‬cookies‫ﺍﻝ‬ ‫ﻟﻬﺬﺍ‬ ‫ﺍﻟﺰﻣﻨﻴﺔ‬ ‫ﺍﻟﻤﺪﺓ‬ ‫ﻣﺜﻞ‬ ،‫ﺃﻣﻮﺭ‬ ‫ﺑﻌﺪﺓ‬ ‫ﺍﻟﺘﺤﻜﻢ‬ ‫ﻳﻤﻜﻨﻚ‬
Cookie‫ﺍﻝ‬ ‫ﺑﻬﺬﺍ‬ ‫ﺍﻟﺨﺎﺹ‬ ‫ﺍﻟﺼﻔﺤﺔ‬ ‫ﻭﺍﻣﺘﺪﺍﺩ‬ ،Cookie‫ﺍﻝ‬ ‫ﺗﺤﺪﻳﺪ‬ ‫ﻭﻳﻤﻜﻦ‬ ،
Domain‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺍﻥ‬ ‫ﺗﺤﺪﻳﺪ‬ ‫ﻭﻳﻤﻜﻦ‬ ،Cookie‫ﺍﻝ‬ ‫ﻣﻊ‬ ‫ﺍﻟﻰ‬ ‫ﻳﻌﻤﻞ‬ ‫ﺃﻥ‬ ‫ﻳﺠﺐ‬ ‫ﻻ‬
Secure Protocol‫ﺍﻝ‬ ‫ﻣﺜﻞ‬Https‫ﺧﻴﺎﺭﺍﺕ‬ ‫ﺍﻻﻣﻮﺭ‬ ‫ﻫﺬﻩ‬ ‫ﺟﻤﻴﻊ‬ ‫ﻭﻁﺒﻌﺎ‬ ،
‫ﺍﻝ‬ ‫ﺏ‬ ‫ﻓﻘﻂ‬ ‫ﺃﻧﺖ‬ ‫ﺗﻠﺰﻡ‬ ،‫ﺇﻓﺘﺮﺍﺿﻴﺔ‬Name – Value^_^
‫ﻣﺜﺎﻝ‬) :‫ﺍﻟﺘﺎﻟﻴﺔ‬ ‫ﻟﻠﺸﺮﻳﺤﺔ‬ ‫ﺍﻧﺘﻘﻞ‬ ‫ﺛﻢ‬ ،‫ﻓﻴﻪ‬ ‫ﻭﺭﺩ‬ ‫ﻟﻤﺎ‬ ‫ﺟﻴﺪﺍ‬ ‫ﺍﻧﺘﺒﻪ‬:(

JS Cookies
‫ﻣﻼﺣﻈﺎﺕ‬:
(1‫ﺃﻱ‬ ‫ﻹﻧﺸﺎء‬ ‫ﻭﺍﻹﺯﺍﻣﻴﺔ‬ ،‫ﺍﻷﺑﺴﻂ‬ ‫ﺍﻟﺼﻴﻐﺔ‬ ‫ﻫﻲ‬ ‫ﺻﻴﻐﺔ‬ ‫ﺃﻭﻝ‬Cookie.
(2‫ﺍﻝ‬ ‫ﺑﺘﺤﺪﻳﺪ‬ ‫ﻗﻤﻨﺎ‬ ‫ﺻﻴﻐﺔ‬ ‫ﺛﺎﻧﻲ‬Expire date‫ﺍﻟﺘﻌﺮﻳﻒ‬ ‫ﻁﺮﻳﻘﺔ‬ ‫ﺃﻥ‬ ‫ﻭﻻﺣﻆ‬ ،
‫ﻛﺘﺎﺑﺔ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﺗﺘﻢ‬;‫ﺍﻝ‬ ‫ﻭﺿﻌﻨﺎ‬ ‫ﺛﻢ‬ ‫ﻭﻣﻦ‬ ،‫ﺍﻟﺨﻴﺎﺭﺍﺕ‬ ‫ﺑﻴﻦ‬ ‫ﻟﻠﻔﺼﻞ‬expire.
(3‫ﺍﻝ‬expire date‫ﻳﻜﻮﻥ‬ ‫ﺃﻥ‬ ‫ﻳﺠﺐ‬UTC‫ﺃﻭ‬GMT)‫ﻭﺍﺣﺪ‬ ‫ﻭﻛﻼﻫﻤﺎ‬(،
‫ﺇﺳﺘﺨﺪﺍﻡ‬ ‫ﻳﻤﻜﻨﻚ‬ ‫ﺃﻧﻪ‬ ‫ﻳﻌﻨﻲ‬ ‫ﻭﻫﺬﺍ‬toGMTString‫ﺃﻭ‬toUTCString
‫ﺍﻟﺼﻴﻐﺔ‬ ‫ﺑﻬﺬﻩ‬ ‫ﺍﻟﻤﻄﻠﻮﺏ‬ ‫ﺍﻟﻮﻗﺖ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻠﺤﺼﻮﻝ‬^_^
(4‫ﺍﻝ‬ ‫ﻟﺤﻴﺎﺓ‬ ‫ﺍﻟﻤﺪﺓ‬ ‫ﺑﺘﺤﺪﻳﺪ‬ ‫ﺗﻘﻢ‬ ‫ﻟﻢ‬ ‫ﺣﺎﻟﺔ‬ ‫ﻓﻲ‬cookie‫ﺇﻏﻼﻕ‬ ‫ﺑﻤﺠﺮﺩ‬ ‫ﻳﻨﺘﻬﻲ‬ ‫ﻓﺈﻧﻪ‬ ،
‫ﺍﻟﻤﺘﺼﻔﺢ‬.

JS Cookies
‫ﺛﺎﻧﻴﺎ‬:‫ﻣﻦ‬ ‫ﻟﺪﻳﻨﺎ‬ ‫ﻣﺎ‬ ‫ﺟﻠﺐ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﻛﻴﻒ‬cookie‫؟‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬ ‫ﺍﻟﺠﻮﺍﺏ‬^_^document.cookie‫ﺃﻳﻀﺎ‬:P‫؟‬ ‫ﺫﻟﻚ‬ ‫ﻛﻴﻒ‬ ،
‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬) :‫ﺍﻝ‬ ‫ﺟﻤﻴﻊ‬ ‫ﺃﻥ‬ ‫ﻻﺣﻆ‬Cookie‫ﺷﻜﻞ‬ ‫ﻋﻠﻰ‬ ‫ﺟﻠﺒﻬﺎ‬ ‫ﺳﻴﺘﻢ‬ ‫ﻟﺪﻱ‬ ‫ﺍﻟﺘﻲ‬
string(

JS Cookies
‫ﺛﺎﻟﺜﺎ‬:‫ﻗﻴﻤﺔ‬ ‫ﺗﻌﺪﻳﻞ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﻛﻴﻒ‬Cookie‫؟‬ ‫ﻣﻮﺟﻮﺩﺓ‬
‫ﺍﻝ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺘﻌﺪﻳﻞ‬ ‫ﻋﻤﻠﻴﺔ‬Cookie‫ﻋﻠﻰ‬ ‫ﺗﻌﺘﻤﺪ‬name‫ﻭﻫﻨﺎ‬website،
‫ﻭﺍﻝ‬ ‫ﻭﺍﻟﻮﻗﺖ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﺗﻐﻴﻴﺮ‬ ‫ﻭﻳﻤﻜﻨﻨﻲ‬path..‫ﺍﻟﺦ‬

JS Cookies
‫ﺭﺍﺑﻌﺎ‬:‫ﺣﺬﻑ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﻛﻴﻒ‬Cookie‫؟‬ ‫ﻣﻮﺟﻮﺩ‬
‫ﻟﻞ‬ ‫ﺍﻟﺤﺬﻑ‬ ‫ﻋﻤﻠﻴﺔ‬Cookie‫ﻋﻠﻰ‬ ‫ﺗﻌﺘﻤﺪ‬name،‫ﺍﻟﻮﻗﺖ‬ ‫ﺑﺘﺼﻔﻴﺮ‬ ‫ﻭﻧﻘﻮﻡ‬ ،‫ﺃﻳﻀﺎ‬
‫ﺍﻝ‬ ‫ﻟﻴﻜﻮﻥ‬Cookie‫ﻣﻨﺘﻬﻲ‬ ‫ﻭﻛﺄﻧﻪ‬..‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﺷﺎﻫﺪ‬:

JS Cookies
‫ﺍﻝ‬ ‫ﻣﻊ‬ ‫ﻟﻠﺘﻌﺎﻣﻞ‬ ‫ﺍﻷﺳﺎﺳﻲ‬ ‫ﺍﻟﺸﻜﻞ‬ ‫ﻓﻬﻤﻨﺎ‬ ‫ﻟﻘﺪ‬ ،‫ﻭﺍﻵﻥ‬cookie‫ﺍﻟﺸﻜﻞ‬ ‫ﻫﺬﺍ‬ ‫ﻫﻞ‬ ،
‫؟‬ ‫ﻣﺎ‬ ‫ﻧﻮﻋﺎ‬ ‫ﻣﺸﻜﻠﺔ‬ ‫ﻓﻴﻪ‬ ‫ﺃﻡ‬ ‫ﻣﻨﻄﻘﻲ‬!
‫ﻭﺟﻮﺩ‬ ‫ﺣﺎﻟﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﻔﻴﺪ‬ ‫ﺍﻟﺒﺴﻴﻂ‬ ‫ﺍﻟﺸﻜﻞ‬ ‫ﻫﻮ‬ ‫ﺫﻛﺮﻧﺎﻩ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺍﻟﺸﻜﻞ‬ ‫ﻫﺬﺍ‬cookie
‫ﻭﺍﺣﺪﺓ‬-_-‫ﻭﻟﺠﻤﻴﻊ‬ ،‫ﻓﻘﻂ‬ ‫ﻭﺍﻟﻘﻴﻤﺔ‬ ‫ﺍﻻﺳﻢ‬ ‫ﺑﺎﺭﺟﺎﻉ‬ ‫ﻳﻘﻮﻡ‬ ‫ﺗﻼﺣﻆ‬ ‫ﻛﻤﺎ‬ ‫ﺍﻟﺸﻜﻞ‬ ‫ﻫﺬﺍ‬ ‫ﻷﻥ‬ ،
‫ﺑﻪ‬ ‫ﺃﺭﻏﺐ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺍﻟﻌﻨﺼﺮ‬ ‫ﺃﻳﻀﺎ‬ ‫ﺑﺘﺤﺪﻳﺪ‬ ‫ﺃﻗﻢ‬ ‫ﻭﻟﻢ‬ ،‫ﺍﻟﻌﻨﺎﺻﺮ‬)‫ﺑﺤﺚ‬(‫ﺍﻝ‬ ‫ﻭﺟﻤﻴﻊ‬ ،
cookie‫ﺍﻝ‬ ‫ﺑﺈﺿﺎﻓﺔ‬ ‫ﺳﺘﻘﻮﻡ‬ ‫ﻓﻌﻠﻴﺎ‬ ،‫ﺇﺿﺎﻓﺘﻬﺎ‬ ‫ﺳﻴﺘﻢ‬ ‫ﺍﻟﺘﻲ‬cookie‫ﺍﻟﻰ‬file‫ﻣﺠﺪﺩﺍ‬
‫ﻋﻤﻠﻴﺔ‬ ‫ﻭﻟﻴﺲ‬overwritten..‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬ ‫ﺳﻨﻘﻮﻡ‬ ‫ﻟﻬﺬﺍ‬3 Function‫ﻣﺸﻬﻮﺭﺍﺕ‬
‫ﺍﻟﻌﻤﻠﻴﺎﺕ‬ ‫ﺑﻬﺬﻩ‬ ‫ﻟﻠﻘﻴﺎﻡ‬...‫ﺫﻟﻚ‬ ‫ﻣﻌﺎ‬ ‫ﻟﻨﺸﺎﻫﺪ‬^_^

JS Cookies
*‫ﺍﻝ‬ ‫ﺃﻭﻝ‬Function‫ﺍﻝ‬ ‫ﻋﻦ‬ ‫ﺍﻟﻤﺴﺆﻭﻝ‬ ‫ﻫﻮ‬Set Cookie:
‫ﺍﻝ‬ ‫ﻫﺬﺍ‬Function‫ﺍﻝ‬ ‫ﺑﺈﻧﺸﺎء‬ ‫ﺑﺴﺎﻁﺔ‬ ‫ﺑﻜﻞ‬ ‫ﻭﻳﻘﻮﻡ‬ ،‫ﺻﻮﺭﻩ‬ ‫ﺑﺄﺑﺴﻂ‬Cookie‫ﺑﻤﺎ‬
‫ﻳﻤﻜﻨﻚ‬ ‫ﻛﻤﺎ‬ ،‫ﻣﺘﻐﻴﺮﺍﺕ‬ ‫ﻣﻦ‬ ‫ﻟﻪ‬ ‫ﻧﺮﺳﻞ‬“‫ﻋﻠﻴﻪ‬ ‫ﺍﻟﺘﻌﺪﻳﻞ‬“‫ﻓﻴﻤﻜﻨﻚ‬ ،‫ﺍﻟﺮﻏﺒﺔ‬ ‫ﺣﺴﺐ‬
‫ﺍﻝ‬ ‫ﻣﺘﻐﻴﺮ‬ ‫ﺇﺿﺎﻓﺔ‬Path‫ﺍﻝ‬ ‫ﺑﺨﺼﻮﺹ‬ ‫ﺷﺮﻁ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﺃﻭ‬expires‫ﺃﺭﻏﺐ‬ ‫ﻟﻢ‬ ‫ﺍﺫﺍ‬
‫ﺍﻟﺰﺍﻣﻴﺔ‬ ‫ﺑﻜﻮﻧﻬﺎ‬...‫ﻫﻲ‬ ‫ﺍﻹﺳﺘﺨﺪﺍﻡ‬ ‫ﻭﻁﺮﻳﻘﺔ‬ ،‫ﺍﻟﺦ‬setCookie(‘name’, ‘abc’, 2)
‫ﺑﺈﻧﺸﺎء‬ ‫ﻗﻢ‬ ‫ﻳﻌﻨﻲ‬ ‫ﻭﻫﺬﺍ‬cookie‫ﺍﺳﻤﻪ‬ ،‫ﻳﻮﻣﻴﻦ‬ ‫ﻟﻤﺪﺓ‬name‫ﻭﻗﻴﻤﺘﻪ‬abc...

JS Cookies
*‫ﺍﻝ‬ ‫ﺛﺎﻧﻲ‬Functions‫ﺍﻝ‬ ‫ﻫﻮ‬get Cookie:
‫ﺍﻝ‬ ‫ﻫﺬﺍ‬Function‫ﺍﻝ‬ ‫ﺇﺭﺟﺎﻉ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻘﻮﻡ‬cookie‫ﺑﺎﻟﺤﺼﻮﻝ‬ ‫ﺃﺭﻏﺐ‬ ‫ﺍﻟﺬﻱ‬
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻋﻠﻴﻬﺎ‬name‫ﻣﺜﻞ‬ ،getCookie(‘name’)

JS Cookies
‫ﻣﻼﺣﻈﺔ‬:‫ﺍﻝ‬ ‫ﻋﻤﻞ‬ ‫ﻁﺮﻳﻘﺔ‬Function‫ﺗﻘﻮﻡ‬ ‫ﻓﻬﻲ‬ ،‫ﺗﺘﺒﻌﺘﻬﺎ‬ ‫ﺇﺫﺍ‬ ‫ﺑﺴﻴﻄﺔ‬ ‫ﺍﻟﺴﺎﺑﻖ‬
‫ﺑﻜﺘﺎﺑﺘﻪ‬ ‫ﻗﻤﺖ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺍﻹﺳﻢ‬ ‫ﺃﺧﺬ‬ ‫ﻋﻠﻰ‬)‫ﻋﻨﻪ‬ ‫ﻟﻠﺒﺤﺚ‬(‫ﻋﻤﻠﻴﺔ‬ ‫ﺛﻢ‬concat‫ﺍﻝ‬ ‫ﺇﺷﺎﺭﺓ‬ ‫ﻣﻊ‬
=‫ﺍﻝ‬ ‫ﻣﻦ‬ ‫ﺍﻷﻭﻝ‬ ‫ﺍﻟﻤﻘﺘﻄﻒ‬ ‫ﺃﺧﺬﺕ‬ ‫ﺃﻧﻨﻲ‬ ‫ﻳﻌﻨﻲ‬ ‫ﻭﻫﺬﺍ‬Cookie‫ﻣﺜﻞ‬website=
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻣﺼﻔﻮﻓﺔ‬ ‫ﺍﻟﻰ‬ ‫ﺍﻟﻨﺺ‬ ‫ﺑﺘﺤﻮﻝ‬ ‫ﺃﻗﻮﻡ‬ ‫ﺫﻟﻚ‬ ‫ﺑﻌﺪ‬;‫ﺍﻟﻔﺎﺻﻞ‬ ‫ﻫﻲ‬ ‫ﺗﺬﻛﺮ‬ ‫ﻓﻜﻤﺎ‬ ،
‫ﺑﻄﻮﻝ‬ ،‫ﺩﻭﺭﺍﻥ‬ ‫ﺟﻤﻠﺔ‬ ‫ﺑﻌﻤﻞ‬ ‫ﻗﻤﻨﺎ‬ ‫ﺛﻢ‬ ،‫ﺇﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻳﻤﻜﻨﻨﺎ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﻘﻴﻢ‬ ‫ﻣﻦ‬ ‫ﻛﻞ‬ ‫ﺑﻴﻦ‬
‫ﺍﻝ‬ ‫ﻗﺒﻞ‬ ‫ﻓﺮﺍﻍ‬ ‫ﻳﻮﺟﺪ‬ ‫ﻻ‬ ‫ﺃﻧﻪ‬ ‫ﺑﺎﻟﺘﺄﻛﺪ‬ ‫ﺃﺭﺩﻧﺎ‬ ‫ﺛﻢ‬ ،‫ﺍﻟﻨﺎﺗﺠﺔ‬ ‫ﺍﻟﻤﺼﻔﻮﻓﺔ‬website=..
‫ﺑﺤﺬﻓﻬﺎ‬ ‫ﻗﻢ‬ ‫ﻓﺮﺍﻏﺎﺕ‬ ‫ﻭﺟﺪﺕ‬ ‫ﺍﺫﺍ‬ ،‫ﺷﺮﻁ‬ ‫ﺑﻮﺿﻊ‬ ‫ﻗﻤﻨﺎ‬ ‫ﻟﺬﻟﻚ‬...‫ﺑﻘﻄﻊ‬ ‫ﻗﻢ‬ ‫ﺫﻟﻚ‬ ‫ﻭﺑﻌﺪ‬
‫ﺍﻝ‬ ‫ﻋﻨﺪﻩ‬ ‫ﺗﻨﺘﻬﻲ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺍﻟﻤﻮﻗﻊ‬ ‫ﻣﻦ‬ ‫ﺍﻟﻨﺺ‬=‫ﺍﻹﺳﻢ‬ ‫ﺑﻬﺬﺍ‬ ‫ﺍﻟﺨﺎﺻﺔ‬ ‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﻧﻬﺎﻳﺔ‬ ‫ﺍﻟﻰ‬
^_^...

JS Cookies
‫ﺍﻝ‬ ‫ﺛﺎﻟﺚ‬Function‫ﻣﻌﻴﻦ‬ ‫ﺷﺮﻁ‬ ‫ﻟﺘﻨﻔﻴﺬ‬ ‫ﻣﻌﻴﻨﺔ‬ ‫ﻗﻴﻤﺔ‬ ‫ﻣﻦ‬ ‫ﺍﻟﺘﺤﻘﻖ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻘﻮﻡ‬
‫ﺍﻝ‬ ‫ﺑﻜﺘﺎﺑﺔ‬ ‫ﻗﻤﻨﺎ‬ ‫ﻣﺎ‬ ‫ﻧﺤﻦ‬ ‫ﻭﻋﻠﻴﺎ‬ ،‫ﺑﻌﺪﻫﺎ‬Cookie،‫ﻣﺎ‬ ‫ﺃﻣﺮ‬ ‫ﻓﻲ‬ ‫ﻟﻨﺴﺘﺨﺪﻣﻬﺎ‬ ‫ﺍﻟﻰ‬
‫ﺍﻝ‬ ‫ﺟﻠﺐ‬ ‫ﻭﻋﻤﻠﻴﺔ‬Cookie‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﺗﻌﻠﻤﻨﺎﻫﺎ‬ ‫ﺍﻟﺘﻲ‬Function‫ﺭﻗﻢ‬2‫ﻻ‬ ‫ﺃﻥ‬ ‫ﻳﺠﺐ‬
‫ﺩﻭﺭﻫﺎ‬ ‫ﻳﻈﻬﺮ‬ ‫ﻭﻫﻨﺎ‬ ،‫ﻋﺒﺜﻴﺔ‬ ‫ﺗﻜﻮﻥ‬^_^‫ﺍﻝ‬ ‫ﻫﺬﺍ‬ ‫ﻓﻲ‬ ،Function‫ﺑﺎﺭﺳﺎﻝ‬ ‫ﻗﻤﺖ‬ ‫ﻟﻮ‬
‫ﺍﻝ‬name‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻦ‬ ‫ﻟﺠﻠﺒﻪ‬ ‫ﻋﻨﻪ‬ ‫ﺍﻟﺒﺤﺚ‬ ‫ﺃﻭﻻ‬ ‫ﻓﺴﻴﺘﻢ‬ ،‫ﻣﺜﻼ‬get‫ﻳﻜﻦ‬ ‫ﻟﻢ‬ ‫ﺇﻥ‬ ،
‫ﺍﻟﻘﻴﻤﺔ‬ ‫ﻟﻚ‬ ‫ﺳﺘﻈﻬﺮ‬ ،‫ﻣﻮﺟﻮﺩﺍ‬theres no name‫ﻣﻮﺟﻮﺩﺓ‬ ‫ﻛﺎﻧﺖ‬ ‫ﺍﺫﺍ‬ ‫ﺃﻣﺎ‬ ،
‫ﻫﻨﺎ‬ ‫ﻓﺴﻴﻄﺒﻊ‬anees

JS Cookies
‫ﺃﻥ‬ ‫ﺗﻨﺴﻰ‬ ‫ﻭﻻ‬ ،‫ﺍﻟﻤﻮﺿﻮﻉ‬ ‫ﻫﺬﺍ‬ ‫ﺣﻮﻝ‬ ‫ﻣﻌﺎ‬ ‫ﺍﻟﺴﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﻣﺠﻤﻮﻉ‬ ‫ﻟﻨﺸﺎﻫﺪ‬ ،‫ﻭﺍﻵﻥ‬
‫ﻋﻠﻰ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬ ‫ﺑﺘﺸﻐﻴﻞ‬ ‫ﺗﻘﻮﻡ‬local server...
‫ﻣﻼﺣﻈﺔ‬:‫ﺍﻝ‬ ‫ﻫﺬﻩ‬3 Function‫ﺗﻤﺜﻞ‬3‫ﺃﻭ‬ ‫ﺍﻟﺒﺤﺚ‬ ‫ﻳﻤﻜﻨﻚ‬ ‫ﻟﻜﻦ‬ ،‫ﺭﺋﻴﺴﻴﺔ‬ ‫ﺃﻓﻜﺎﺭ‬
‫ﺗﻄﻮﻳﺮ‬Function‫ﻟﺪﻱ‬ ‫ﻓﻤﺜﻼ‬ ،‫ﺍﻟﻌﻤﻠﻴﺎﺕ‬ ‫ﻫﺬﻩ‬ ‫ﺑﻤﺜﻞ‬ ‫ﻟﻠﻘﻴﺎﻡ‬ ‫ﺑﻚ‬ ‫ﺧﺎﺻﺔ‬10
‫ﺃﺭﻏﺒﻪ‬ ‫ﺍﻟﺬﻱ‬ ‫ﺃﻭ‬ ‫ﺍﻟﻤﻨﺎﺳﺐ‬ ‫ﺑﺎﻟﺸﻜﻞ‬ ‫ﻟﺘﺨﺪﻣﻨﻲ‬ ‫ﺑﻜﺘﺎﺑﺘﻬﺎ‬ ‫ﻗﻤﺖ‬ ‫ﻓﺎﻧﻜﺸﻦ‬..‫ﻟﻴﺲ‬ ‫ﺍﻷﻣﺮ‬
‫ﻭﺇﻧﻤﺎ‬ ،‫ﺣﻔﻈﺎ‬“‫ﻣﻨﻄﻖ‬“‫ﺗﻔﻜﻴﺮ‬^_^
‫ﺍﻷﻣﺜﻠﺔ‬ ‫ﺷﺎﻫﺪ‬:

‫ﺍﻟﻤﺠﻴﺮ‬ ‫ﻭﺃﻧﺖ‬ ،‫ﺗﺬﻝ‬ ‫ﻓﻼ‬ ‫ﺍﻟﻌﺰﻳﺰ‬ ‫ﻭﺃﻧﺖ‬ ،‫ﺗﺒﺨﻞ‬ ‫ﻓﻼ‬ ‫ﺍﻟﺠﻮﺍﺩ‬ ‫ﻭﺃﻧﺖ‬ ،‫ﺗﻌﺠﻞ‬ ‫ﻓﻼ‬ ‫ﺍﻟﺤﻠﻴﻢ‬ ‫ﺃﻧﺖ‬ ّ‫ﻢ‬‫ﺍﻟﻠﻬ‬
‫ﻗﺪﻳﺮ‬ ٍ‫ء‬‫ﺷﻲ‬ ّ‫ﻞ‬‫ﻛ‬ ‫ﻋﻠﻰ‬ ‫ﻭﺃﻧﺖ‬ ،‫ﺗﺮﺍﻡ‬ ‫ﻓﻼ‬ ‫ﺍﻟﻤﻨﻴﻊ‬ ‫ﻭﺃﻧﺖ‬ ،‫ﺗﻀﺎﻡ‬ ‫ﻓﻼ‬.
‫ﻭﻻ‬ ،‫ﻋﻄﺎﺋﻚ‬ ‫ﻭﺟﺰﻳﻞ‬ ،‫ﻋﺎﻓﻴﺘﻚ‬ ‫ﻭﺷﻤﻮﻝ‬ ،‫ﻧﻌﻤﺘﻚ‬ ‫ﻭﺳﺒﻮﻍ‬ ،‫ﺭﺣﻤﺘﻚ‬ ‫ﺳﻌﺔ‬ ‫ﺗﺤﺮﻣﻨﻲ‬ ‫ﻻ‬ ّ‫ﻢ‬‫ﺍﻟﻠﻬ‬
‫ّﺍﺣﻤﻴﻦ‬‫ﺮ‬‫ﺍﻟ‬ ‫ﺃﺭﺣﻢ‬ ‫ﻳﺎ‬ ‫ﺑﺮﺣﻤﺘﻚ‬ ‫ﻲ‬ّ‫ﻨ‬‫ﻋ‬ ‫ﺍﻟﻜﺮﻳﻢ‬ ‫ﻭﺟﻬﻚ‬ ‫ﺗﺼﺮﻑ‬ ‫ﻭﻻ‬ ،‫ﻋﻤﻠﻲ‬ ‫ﺑﻘﺒﻴﺢ‬ ‫ﺗﺠﺎﺯﻧﻲ‬.
،‫ﺗﻲ‬ّ‫ﻮ‬‫ﻗ‬ ‫ﺿﻌﻒ‬ ‫ﻭﺍﺭﺣﻢ‬ ،‫ﺗﻮﺑﺘﻲ‬ ‫ﻓﺎﻗﺒﻞ‬ ،‫ﺭﻏﺒﺘﻲ‬ ‫ﻋﻈﻤﺖ‬ ‫ﻋﻨﺪﻙ‬ ‫ﻭﻓﻴﻬﺎ‬ ،‫ﻳﺪﻱ‬ ‫ﺕ‬ّ‫ﺪ‬ُ‫ﻣ‬ ‫ﺇﻟﻴﻚ‬ ّ‫ﻢ‬‫ﺍﻟﻠﻬ‬
ً‫ﻼ‬‫ﺳﺒﻴ‬ ٍ‫ﺧﻴﺮ‬ ّ‫ﻞ‬‫ﻛ‬ ‫ﻭﺇﻟﻰ‬ ً‫ﺎ‬‫ﻧﺼﻴﺒ‬ ٍ‫ﺧﻴﺮ‬ ّ‫ﻞ‬‫ﻛ‬ ‫ﻣﻦ‬ ‫ﻟﻲ‬ ‫ﻭﺍﺟﻌﻞ‬ ،‫ﻣﻌﺬﺭﺗﻲ‬ ‫ﻭﺍﻗﺒﻞ‬ ،‫ﺧﻄﻴﺌﺘﻲ‬ ‫ﻭﺍﻏﻔﺮ‬.
‫ﺁﻣﻴﻦ‬ ‫ﺍﻟﻠﻬﻢ‬
‫ﻣﻮﻗﻊ‬ ‫ﻣﻦ‬ ‫ﻣﻨﻘﻮﻟﺔ‬ ‫ﺭﺍﺋﻌﺔ‬ ‫ﺃﺩﻋﻴﺔ‬mawdoo3

‫ﻣﺎ‬ ‫ﻧﻜﻤﻞ‬ ‫ﻷﻥ‬ ‫ﻭﻭﻓﻘﻨﺎ‬ ،‫ﻭﻓﻀﻠﻪ‬ ‫ﻣﻨﻪ‬ ‫ﺑﻮﺍﺳﻊ‬ ‫ﻭﻋﻠﻴﻜﻢ‬ ‫ﻋﻠﻴﻨﺎ‬ ‫ﻣﻦ‬ ‫ﺃﻥ‬ ،‫ﺍﻟﻌﺎﻟﻤﻴﻦ‬ ‫ﺭﺏ‬ ‫ﺤﻤﺪ ہﻠﻟ‬
‫ﻧﺘﻌﻠﻢ‬ ‫ﻷﻥ‬ ‫ﻭﻓﻘﻨﺎ‬ ‫ﺃﻥ‬ ‫ﺍﻟﻌﺎﻟﻤﻴﻦ‬ ‫ﺭﺏ‬ ‫ﺃﻧﺎﻩ ﻓﻲ ﺃﻭﻝ ﻫﺬﻩ ﺍﻟﺪﻭﺭﺓ ﺍﻟﻤﺘﻮﺍﺿﻌﺔ، ﻭﺍﻟﺤﻤﺪ ہﻠﻟ‬
،‫ﺍﻟﻤﻌﺪﻭﺩﺓ‬ ‫ﺍﻟﺼﻔﺤﺎﺕ‬ ‫ﻫﺬﻩ‬ ‫ﻧﺪﺭﺱ‬ ‫ﻭ‬ ‫ﻧﻜﺘﺐ‬ ‫ﻷﻥ‬ ‫ﺍﻟﻬﻤﺔ‬ ‫ﻭﺭﺯﻗﻨﺎ‬ ،‫ﻭﺍﻟﺠﺪﻳﺪ‬ ‫ﺍﻟﻜﺜﻴﺮ‬ ‫ﻣﻌﺎ‬ ‫ﻭﻧﻜﺘﺴﺐ‬
‫ﺍﻟﻌﺎﻟﻤﻴﻦ‬ ‫ﺭﺏ‬ ‫ﻟﺤﻤﺪ ہﻠﻟ‬...
‫ﻳﺼﻞ‬ ‫ﻻ‬ ‫ﺍﻟﺒﺸﺮﻱ‬ ‫ﻭﺍﻟﻌﻤﻞ‬ ،‫ﺑﺸﺮﻱ‬ ‫ﻋﻤﻞ‬ ‫ﺍﻟﻰ‬ ‫ﻫﻮ‬ ‫ﻣﺎ‬ ‫ﺍﻟﻤﺘﻮﺍﺿﻊ‬ ‫ﺍﻟﻌﻤﻞ‬ ‫ﻫﺬﺍ‬ ،‫ﺍﻷﻋﺰﺍء‬ ‫ﺇﺧﻮﺍﻧﻲ‬
‫ﺍﻟﺪﻗﺔ‬ ‫ﻣﻌﺎﻧﻲ‬ ‫ﺃﺩﻕ‬ ‫ﻧﺘﺤﺮﻯ‬ ‫ﺑﺄﻥ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺑﻮﺳﻌﻨﺎ‬ ‫ﻣﺎ‬ ‫ﺑﺬﻟﻨﺎ‬ ‫ﻭﺇﻧﻤﺎ‬ ،‫ﻭﺍﻟﺘﻤﺎﻡ‬ ‫ﺍﻟﻜﻤﺎﻝ‬ ‫ﺍﻟﻰ‬
،‫ﺃﻧﻔﺴﻨﺎ‬ ‫ﻣﻦ‬ ‫ﺗﻘﺼﻴﺮ‬ ‫ﻓﻬﺬﺍ‬ ‫ﺃﺧﻄﺄﻧﺎ‬ ‫ﻓﺈﻥ‬ ،‫ﻟﺬﻟﻚ‬ ،‫ﺍﻟﺸﺮﻭﺣﺎﺕ‬ ‫ﻫﺬﻩ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻤﻨﺎﺳﺒﺔ‬ ‫ﺍﻟﻜﻠﻤﺎﺕ‬ ‫ﻭﺍﻧﺘﻘﺎء‬
‫ﺍﻟﻤﻦ‬ ‫ﺻﺎﺣﺐ‬ ‫ﺍﻟﻌﺎﻟﻤﻴﻦ‬ ‫ﺭﺏ‬ ‫ﺗﻌﺎﻟﻰ ﻭﺭﺿﻮﺍﻧﻪ، ﻭﺍﻟﺤﻤﺪ ہﻠﻟ‬ ‫ﻥ ﺃﺻﺒﻨﺎ، ﻓﺒﻔﻀﻞ ﻣﻦ ﷲ‬
‫ﻭﺍﻟﻔﻀﻞ‬.
‫ﺍﻟﺧﺎﺗﻣﺔ‬

‫ﺃﻧﻚ‬ ‫ﺃﻓﺘﺮﺽ‬ ‫ﻭﺍﻟﺬﻱ‬ ،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﺩﻭﺭﺓ‬ ‫ﻣﻦ‬ ‫ﺍﻟﺜﺎﻧﻲ‬ ‫ﺍﻟﺠﺰء‬ ‫ﻓﻬﻲ‬ ‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﻫﺬﻩ‬ ‫ﺑﺨﺼﻮﺹ‬
،‫ﺳﻜﺮﺑﺖ‬ ‫ﺍﻟﺠﺎﻓﺎ‬ ‫ﻓﻲ‬ ‫ﺁﺧﺮ‬ ‫ﻣﺴﺘﻮﻯ‬ ‫ﺍﻟﻰ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺳﻨﻨﺘﻘﻞ‬ ‫ﻭﺍﻵﻥ‬ ،‫ﻷﻫﻤﻴﺘﻬﺎ‬ ‫ﻋﻠﻴﻬﺎ‬ ‫ﺍﻁﻠﻌﺖ‬
‫ﺍﻟﻤﺘﻨﻮﻋﺔ‬ ‫ﺍﻟﻤﺼﺎﺩﺭ‬ ‫ﻣﻦ‬ ‫ﻭﺍﻟﻘﺮﺍﺋﺔ‬ ‫ﻭﺍﻟﻤﺘﺎﺑﻌﺔ‬ ‫ﺑﺎﻹﺳﺘﻤﺮﺍﺭ‬ ‫ﺃﻧﺼﺤﻚ‬ ،‫ﺍﻟﻮﻗﺖ‬ ‫ﺫﻟﻚ‬ ‫ﻟﺤﻴﻦ‬ ‫ﻟﻜﻦ‬
‫ﺧﻴﺮ‬ ‫ﻟﻜﻞ‬ ‫ﻳﻮﻓﻘﻨﺎ‬ ‫ﺃﻥ‬ ‫ﻭﺟﻞ‬ ‫ﻋﺰ‬ ‫ﺍﻟﻤﻮﻟﻰ‬ ‫ﺳﺎﺋﻼ‬ ،‫ﻭﺍﻟﻤﺨﺘﻠﻔﺔ‬...
‫ﺗﻬﻤﻚ‬ ‫ﻗﺪ‬ ‫ﺃﺧﺮﻯ‬ ‫ﺩﻭﺭﺍﺕ‬:
HTML CSS HTML5 CSS3 JSON AngularJS Bootstrap
SASS PHP-Advance-101 Drupal 7 jQuery jQuery UI
‫ﻣﻮﻗﻊ‬ ‫ﻓﻲ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﺗﺠﺪﻭﻧﻬﺎ‬ ‫ﺍﻟﺪﻭﺭﺍﺕ‬ ‫ﻫﺬﻩ‬ ‫ﺟﻤﻴﻊ‬:
www.2nees.com/courses
‫ﺍﻟﺧﺎﺗﻣﺔ‬

‫ﺍﻟﻌﺎﻟﻣﻳﻥ‬ ‫ﺭﺏ‬ ‫ﺍﻟﺣﻣﺩ ہﻠﻟ‬ ‫ﺃﻥ‬ ‫ﺧﺭ ﺩﻋﻭﺍﻧﺎ‬

Js dom & JS bom

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Plus de anees abu-hmaid

Plus de anees abu-hmaid (19)

Dernier

Dernier (6)

Js dom & JS bom