Null

‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫ﻛﺘﺎب اﺟﺎﻛﺲ اﻟﺠﺰء اﻻول‬

‫‪ ‬‬
‫اﻗﺪم ﻟﻚ ﻋﺰﻳﺰي اﻟﻘﺎرئ اول ﻛﺘﺎب ﻋﺮيب ﻳﺘﺤﺪث ﻋﻦ ﺗﻘﻨﻴﺔ اﺟﺎﻛﺲ اﺳﺎل‪ ‬اﻟﻠﻪ ان ﻳﻨﻔﻊ ﺑﻪ اﻣﺔ اﻻﺳﻼم‬
‫اﻟﻠﻬﻢ ﻋﻠﻤﻨﺎ ﻣﺎ ﻳﻨﻔﻌﻨﺎ و اﻧﻔﻌﻨﺎ مبﺎ ﻋﻠﻤﺘﻨﺎ و زدﻧﺎ ﻋﻠام اﻧﻚ اﻧﺖ اﻟﻌﻠﻴﻢ اﻟﺤﻜﻴﻢ‬
‫اﺧﻮﻛﻢ اميﻦ ﻛﺰة‬
‫ﺳﻨﺒﺪأ ﻣﻦ ﺗﺤﺖ اﻟﺼﻔﺮ و ﻧﺼﻞ ﺑﻚ اﱃ ﻣﱪﻣﺞ اﺟﺎﻛﺲ ﻣﺤﱰف مبﺸﻴﺌﺔ اﻟﻠﻪ ﻻ ارﻳﺪ ﻣﻨﻚ اﻻ ان ﺗﻌﺮف‬
‫اﻟﻘﻠﻴﻞ ﻋﻦ ﻟﻐﺔ ‪ HTML‬ﻻين ﺳﺎﴍح ﻟﻚ ﻣﺎ ﻳﻠﺰﻣﻚ ﻣﻦ ﻟﻐﺎت ﺳﺘﻠﺰﻣﻨﺎ اﺛﻨﺎء ﺗﻄﺒﻴﻘﺎت اﻻﺟﺎﻛﺲ‬
‫ﻣﺜﻞ)ْ ‪(XML,CSS,PHP,javaScript‬‬
‫ﳌﺎذا اﺗﻌﻠﻢ اﺟﺎﻛﺲ؟‬

‫ﻫﻨﺎك ﻋﴩات اﳌﺰاﻳﺎ اﻟﺮاﺋﻌﺔ اﻟﺘﻲ ﺗﻮﻓﺮﻫﺎ ﺗﻘﻨﻴﺔ اﺟﺎﻛﺲ ﺳﺎﻛﺘﻔﻲ ﺑﺬﻛﺮ ﻣﺜﺎل ﺑﺴﻴﻂ اذﻫﺐ اﻻن اﱃ ﻏﻮﻏﻞ‬
‫و اﻛﺘﺐ ﻛﻠﻤﺔ دروس ﺳﺘﺠﺪ ان ﻏﻮﻏﻞ ﻳﺤﺎول ان ﻳﺤﺰر اذا ﻛﻨﺖ ﺗﺒﺤﺚ ﻋﻨﺔ دروس ﰲ اﻟﻔﻮﺗﻮﺷﻮب و‬
‫ﻫﺬا ﻣﺎ ﻳﺴﻤﻰ اﻻﻛامل اﻟﺘﻠﻘﺎيئ‬
‫ﻣﺎ اﻟﱪاﻣﺞ اﻟﺘﻲ اﺣﺘﺎﺟﻬﺎ؟‬

‫اروع ﺑﺮﻧﺎﻣﺞ ﻫﻮ اﻻدويب درﻳﻢ وﻳﻔﺮ ﺑﺎﻣﻜﺎﻧﻚ ان ﺗﻄﻠﺒﻪ ﻣﻦ اي ﻣﺤﻞ ﻟﺒﻴﻊ اﻟﺪي ﰲ دي او ﺗﺤﻤﻴﻠﻪ ﻣﻦ‬
‫اﻟﻨﺖ اﻻن ﺑﻌﺪ ان ﻧﺼﺒﺖ اﻟﱪﻧﺎﻣﺞ اﺧﱰ ﻣﻦ اﻟﻘﺎمئﺔ ﻓﺎﻳﻞ اﻻﻣﺮ ﻧﻴﻮ ‪File>new>HTML‬‬
‫وﺑﻌﺪ ان اﺧﱰت اﺗﺶ يت ام ال ﻳﻔﺘﺢ ﻟﻚ ﺻﻔﺤﺔ ﻓﻴﻬﺎ ﻛﻮد ﺟﺎﻫﺰ ﻛﺎﻟﺼﻮرة اﻟﺘﺎﻟﻴﺔ‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫اﻟﻔﺼﻞ اﻻول ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬
‫ﻫﻴﺎ ﻟﻨﻨﻄﻠﻖ ﻣﻊ اﻟﻠﻐﺔ اﻟﻠﺬﻳﺬة ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬
‫‪ ‬‬
‫‪ ‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>"‪<script type="text/javascript‬‬
‫;)" ‪alert("Hi‬‬
‫>‪</script‬‬
‫>‪<title>My first script </title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1> Ayman for php</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫و ﻋﻨﺪ ﺗﺸﻐﻴﻠﻚ ﻟﻬﺬا اﻟﻜﻮد ﻳﺠﺐ ان ﻳﻌﻄﻲ اﻟﻨﺘﻴﺠﺔ اﻟﺘﺎﻟﻴﺔ‪:‬‬

‫ﻓﻘﻂ اﻟﺴﻄﺮ اﻟﻐﺎﻣﻖ ﻫﻮ ﺑﻠﻐﺔ اﻟﺠﺎﻓﺎ اﻣﺎ اﻟﺒﻘﻴﺔ ﻓﻬﻲ ﻟﻐﺔ اﻻﺗﺶ يت ام ال اي ﻓﻘﻂ ﻫﺬا اﻟﺴﻄﺮ‬
‫‪ ‬‬
‫;)" ‪alert("Hi‬‬
‫‪ ‬‬
‫و ﻻ ﺣﻆ اﻳﻀﺎ اﻟﻔﺎﺻﻠﺔ اﳌﻨﻘﻮﻃﺔ اﻟﺘﻲ ﻳﺠﺐ ان ﺗﻀﻌﻬﺎ ﰲ ﻧﻬﺎﻳﺔ ﻛﻞ ﺳﻄﺮ );( ﺗﻌﻮد ان ﺗﻀﻊ اﻟﺴﻴﻤﻲ‬
‫ﻛﻮﻟﻦ ﻻﻧﻚ ان ﻧﺴﻴﺘﻬﺎ ﺑﺴﻜﺮﺑﺖ يب اﺗﺶ يب ﺳﻴﻔﺸﻞ اﻟﱪﻧﺎﻣﺞ ﻛﻠﻴﺎ‬
‫ﻫﺬا اﻟﻜﻮد اﻟﺨﻔﻴﻒ ﻳﻌﻄﻴﻚ ﻧﺸﺎﻃﺎ و ﻳﺤﻤﺴﻚ ﻋﲆ ﺗﻌﻠﻢ ﻫﺬه اﻟﻠﻐﺔ اﻟﺮاﺋﻌﺔ ﻓﻘﻂ اﻧﺴﺨﻪ ﺛﻢ اﺣﻔﻆ اﳌﻠﻒ‬
‫ﺑﺄي اﺳﻢ و ﺷﻐﻠﻪ ﺑﺎﻻﻧﱰﻧﺖ اﻛﺴﺒﻠﻮرر ﻣﺜﻼ ‪.‬‬
‫ﻫﻨﺎك اﻟﻌﺪﻳﺪ ﻣﻦ اﻟﻜﺎﺋﻨﺎت اﻟﺠﺎﻫﺰة ﰲ ﻟﻐﺔ اﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ و ﻟﻬﺬه اﻟﻜﺎﺋﻨﺎت ﺧﻮاص و ﻋﻠﻴﻚ ان ﺗﺴﺘﺪﻋﻲ‬
‫اﻟﺨﺎﺻﻴﺔ و ﺗﻌﺒﺊ ﻗﻴﻤﺔ ﺑﺪاﺧﻠﻬﺎ ‪.‬‬
‫ﻓﻤﺜﻼ اﻟﻜﺎﺋﻦ اذا اردت ان ﺗﻄﺒﻊ ﺟﻤﻠﺔ اﺳﺘﺨﺪم اﻟﻜﺎﺋﻦ ‪document‬‬
‫ﺛﻢ اﺳﺘﺪﻋﻲ اﻟﺨﺎﺻﻴﺔ ‪()write‬‬
‫ﺛﻢ ﺿﻊ اﻟﻘﻴﻤﺔ اﻟﺘﻲ ﺗﺮﻳﺪﻫﺎ‬
‫;)"‪document.write("I love java‬‬
‫ﺳﻬﻞ ﺟﺪا اﻟﻴﺲ ﻛﺬﻟﻚ؟ ﻃﻴﺐ ﻟﻨﺎﺧﺬ ﻣﺜﺎﻻ اﺧﺮﻟﻨﻔﺮض اﻧﻚ ﺗﺮﻳﺪ ﻓﺘﺢ ﻧﺎﻓﺬة ﺟﺪﻳﺪة ﻟﺘﻜﻦ ﻏﻮﻏﻞ ﻣﺜﻼ و‬
‫ﺣﺪد ﻛﻠﻤﺔ اﻟﺒﺤﺚ اﻻ ﻳﺒﺪو ذﻟﻚ ﻣﻤﺘﻌﺎ؟‬
‫?‪window.open("http://google.com/search‬‬
‫;)""‪q=islam","any_name",‬‬
‫‪ ‬‬
‫ﻫﺬا اﻟﻜﻮد ﺳﻴﻔﺘﺢ ﻧﺎﻓﺬة ﺟﺪﻳﺪة و ﻳﺎﺧﺬه اﱃ ﻏﻮﻏﻞ و ﻳﺒﺤﺚ ﻋﻦ ﻛﻠﻤﺔ اﺳﻼم ﻛﻞ ﻫﺬا دون ﻋﻠﻢ‬
‫اﳌﺴﺘﺨﺪم!!‬
‫‪ document.title‬ﻟﺘﻐﻴري ﻋﻨﻮان اﻟﺼﻔﺤﺔ‬
‫‪ document.bgcolor‬ﻟﺘﻐﻴري ﺧﻠﻔﻴﺔ اﻟﺼﻔﺤﺔ‬
‫‪ location.hostname‬اﺳﺘﺨﺪﻣﻬﺎ ﻟﺘﻌﺮف اﺳﻢ ﴍﻛﺔ ﻣﺰود اﻟﺨﺪﻣﺔ‬
‫‪ navigator.appName‬ﻣﻔﻴﺪة ﺟﺪا ﻟﺘﺤﺪﻳﺪ ﻧﻮع اﳌﺘﺼﻔﺢ اﻟﺬي ﻳﺴﺘﺨﺪﻣﻪ اﻟﺰاﺋﺮ‬
‫اﻟﺘﻌﻠﻴﻘﺎت‬
‫اﺣﻴﺎﻧﺎ اﻧﺖ ﻛﻤﱪﻣﺞ ﺗﻀﻄﺮ اﱃ ﻛﺘﺎﺑﺔ ﺗﻌﻠﻴﻘﺎت ﺗﺴﺎﻋﺪك ﻋﲆ ﺗﺬﻛﺮ اﻟﻴﺔ ﻋﻤﻞ اﻟﱪﻧﺎﻣﺞ او اي ﺷﻴﺊ اﺧﺮ ﺗﺮﻳﺪ‬
‫ﻛﺘﺎﺑﺘﻪ ﻟﻜﻨﻪ ﺳﻴﻔﺴﺪ اﻟﻜﻮد ان مل ﺗﺴﺘﺨﺪم )‪ (//‬او )‪*/‬اﻟﺘﻌﻠﻴﻖ*‪(/‬‬
‫‪ ‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫‪// That was in 1/1/2010‬‬
‫;)"‪alert("I love java‬‬
‫*‪/‬‬
‫‪comment‬‬
‫‪annother comment‬‬
‫‪Hi ....‬‬
‫‪*/‬‬
‫>‪<title>JavaSCript</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>Ayman for php </h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﻛام ﺗﺮى ﻓﻴﻤﻜﻨﻚ ان ﺗﻀﻊ ﻣﺎ ﻣﺌﺎت اﻻﺳﻄﺮ ﻣﻦ اﻟﺘﻌﻠﻴﻘﺎت اذا اﺳﺘﺨﺪﻣﺖ )‪*/‬ﻋﴩات اﻻﺳﻄﺮ ﻣﻦ‬
‫اﻟﺘﻌﻠﻴﻘﺎت*‪(/‬‬
‫اﻣﺎ اﻟﺪوﺑﻞ ﺳﻼش ﻓﻬﻲ ﻟﺘﻌﻠﻴﻖ ﺳﻄﺮ واﺣﺪ ‪ //‬ﻓﻬﺬه اﻟﺠﻤﻞ ﻟﻦ ﺗﻈﻬﺮ اﺑﺪا ﻻﻧﻬﺎ ﻣﺠﺮد ﺗﻌﻠﻴﻘﺎت‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫ﺗﻀﻤني ﻣﻠﻒ ﺧﺎرﺟﻲ‬
‫اﺣﻴﺎﻧﺎ ﺗﻀﻊ ﺑﺮﻧﺎﻣﺞ ﺑﺤﻴﺚ ﺗﺴﺘﺨﺪم ﻣﻠﻒ اﺳﻤﻪ ﺳﻜﺮﻳﺒﺖ‪ 1‬اذا ﻛﺎن ﻣﺘﺼﻔﺢ اﻟﺰاﺋﺮ اﻧﱰﻧﺖ اﻛﺴﺒﻠﻮر ﻣﺜﻼ‬
‫اﻣﺎ اذا ﻛﺎن ﻣﺘﺼﻔﺤﻪ ﻓﺎﻳﺮﻓﻮﻛﺲ ﻓﺎﻧﻚ ﺗﺮﻳﺪ اﺳﺘﺨﺪام اﳌﻠﻒ ﺳﻜﺮﻳﺒﺖ‪ 2‬ﻋﲆ ﺳﺒﻴﻞ اﳌﺜﺎل‬
‫‪ ‬‬
‫;)"ﻧﺺ ﻣﻦ ﻣﻠﻒ ﺧﺎرﺟﻲ"(‪document.write‬‬
‫‪ ‬‬
‫اﺣﻔﻆ اﻟﺴﻄﺮ اﻟﺴﺎﺑﻖ ﺑﺎﺳﻢ ‪script.js‬‬
‫ﺛﻢ ﻗﻢ ﺑﺘﻀﻤني اﳌﻠﻒ ﺑﺎﺳﺘﺨﺪام ﺧﺎﺻﻴﺔ ‪src‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>"‪<script type="text/javascript" src="script.js‬‬
‫>‪ </title‬ﺑﺮﻧﺎﻣﺠﻲ اﻻول >‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫اﺣﻔﻆ اﻟﻜﻮد اﻟﺴﺎﺑﻖ ﺑﺎي اﺳﻢ ﺗﺮﻳﺪ ﻣﺜﻼ ‪Ajax1.html‬‬

‫ﺳﻴﻌﻤﻞ اﻟﻜﻮد ان ﺷﺎء اﻟﻠﻪ ﴍط ان ﺗﺤﻔﻆ اﳌﻠﻔني ﺑﻨﻔﺲ اﳌﺠﻠﺪ و ﺳﺘﻈﻬﺮ ﺟﻤﻠﺔ ﻧﺺ ﻣﻦ ﻣﻠﻒ ﺧﺎرﺟﻲ‬
‫ﻣﻊ اﻧﻨﺎ مل ﻧﻜﺘﺒﻬﺎ ﺑﺼﻔﺤﺘﻨﺎ ﺑﻞ ﻛﺘﺒﻨﺎﻫﺎ مبﻠﻒ ﺧﺎرﺟﻲ‬
‫ﻣﻌﺮﻓﺔ ﻧﻮع اﳌﺘﺼﻔﺢ‬

‫ﺑﺎﻣﻜﺎن اﻟﺠﺎﻓﺎ ان ﺗﻜﺸﻒ ﻧﻮع اﳌﺘﺼﻔﺢ اﻟﺬي ﻳﺴﺘﺨﻤﺪه اﻟﺰاﺋﺮ و ذﻟﻚ ﺑﺎﺳﺘﺨﺪام اﻻوﺑﺠﻜﺖ‬
‫‪ Navigator‬و ﻫﺬا اﻻوﺑﺠﻜﺖ ﻟﻪ ﺧﻮاص ﻓﻤﺜﻼ ‪:‬‬
‫ﳌﻌﺮﻓﺔ اﺳﻢ اﳌﺘﺼﻔﺢ ‪navigator.appName‬‬

‫ﳌﻌﺮﻓﺔ رﻗﻢ اﺻﺪار او اﻟﻔريﺟﻦ ‪navigator.appVersion‬‬
‫ﻫﺬه اﻟﺨﺎﺻﻴﺔ ﺗﻌﻄﻴﻚ ﺗﻔﺎﺻﻴﻞ اﺧﺮى ‪navigator.userAgent‬‬
‫ﻟﻨﺠﺮب ﻣﺜﺎل ﻋﻤﲇ‬
‫>"‪<html dir="rtl‬‬
‫>‪<head‬‬
‫>‪<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫;)">‪ :"+navigator.appName+"</h3‬ﻣﺘﺼﻔﺤﻚ ﻫﻮ>‪document.write("<h3‬‬
‫;)">‪ :"+navigator.appVersion+"</h3‬رﻗﻢ اﻻﺻﺪار>‪document.write(" <h3‬‬
‫;)">‪ :"+navigator.userAgent+"</h3‬ﺗﻔﺎﺻﻴﻞ>‪document.write(" <h3‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﻻﺣﻆ اﺷﺎرة اﻟﺰاﺋﺪ )‪ (+‬ﴐورﻳﺔ ﻟﻠﺠﻤﻊ ﺑني ﻣﺘﻐري و ﻧﺺ اﻻن ﻟرنى ﻛﻴﻒ ﺳﻴﻌﺮض اﻟﻔﺎﻳﺮﻓﻮﻛﺲ ﻫﺬه‬
‫اﻟﺼﻔﺤﺔ‬
‫‪ ‬‬
‫ﺑﻴﻨام اذا ﺟﺮﺑﺖ اﻻﻧﱰﻧﺖ اﻻﻛﺴﺒﻠﻮرر ﺳﻴﻌﺮﺿﻬﺎ ﻫﻜﺬا‬
‫ﻫﺬا ﻣﻔﻴﺪ ﺟﺪا ﻓﻴﻤﻜﻨﻚ ان ﺗﺴﺘﺨﺪم اﻟﺴﻜﺮﺑﺖ اﳌﻨﺎﺳﺐ ﻟﻜﻞ ﻣﺘﺼﻔﺢ‬
‫‪ ‬‬
‫اﻻﺣﺪاث)ُ‪(Events‬‬
‫ﻋﻨﺪﻣﺎ ﻳﻀﻐﻂ اﳌﺴﺘﺨﺪم ﻋﲆ زر ﻧﺴﻤﻲ ﻫﺬا ﺣﺪث او ﻋﻨﺪﻣﺎ ميﺮ ﺑﺎﳌﺎوس ﻓﻮق ﺻﻮرة ذﻟﻚ ﺣﺪث اﺧﺮ‬
‫ﻋﻨﺪﻣﺎ ﻳﻐﻠﻖ اﻟﻨﺎﻓﺬة ذﻟﻚ ﺣﺪث اﻳﻀﺎ و ﻫﺬا ﺟﺪول ﺑﺎﻫﻢ اﻻﺣﺪاث اﻟﺘﻲ ﺳﺘﻠﺰﻣﻚ ﺑﺎﻻﺟﺎﻛﺲ‬
‫‪ ‬‬
‫ﺣﺪث ان ﻳﻘﻮم اﳌﺴﺘﺨﺪم ﺑﺎﻟﻐﺎء ﳾء ﻣﺎ‬ ‫‪onabort‬‬

‫ﻋﻨﺪ ﺗﺮك اﻟﺤﻘﻞ ﻓﺎرﻏﺎ‬ ‫‪onblur‬‬
‫ﻋﻨام ﻳﻐري اﳌﺴﺘﺨﺪم ﺧﻴﺎرا )ﺑﻘﺎمئﺔ ﻣﻨﺴﺪﻟﺔ ﻣﺜﻼ(‬ ‫‪onchange‬‬
‫ﺿﻐﻂ واﺣﺪة ﻳﺘﺤﻘﻖ ﻫﺬا اﻟﺤﺪث‬ ‫‪onclick‬‬
‫ﺿﻐﻄﺘني ﻣﺘﺘﺎﻟﻴﺘني‬ ‫‪ondblclick‬‬
‫ﻋﻨﺪﻣﺎ ﻳﺴﺤﺐ اﳌﺴﺘﺨﺪم ﻋﻨﴫا و ﻳﻠﻘﻴﻪ)اﻟﺴﺤﺐ و اﻻﻟﻘﺎء(‬ ‫‪ondragdrop‬‬
‫ﻋﻨﺪﻣﺎ ﻳﻜﻮن ﻫﻨﺎك ﺧﻄﺎ ﺑﺮﻣﺠﻲ ﺑﺎﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺖ‬ ‫‪onerror‬‬
‫ﻋﻨﺪ وﺿﻊ ﻣﺆﴍ اﳌﺎوس ﺿﻤﻦ ﺣﻘﻞ اﺳﺘﻌﺪادا ﻟﻠﻜﺘﺎﺑﺔ‬ ‫‪onfocus‬‬
‫ﻋﻨﺪﻣﺎ ﻳﻀﻐﻂ اﳌﺴﺘﺨﺪم ﻣﻔﺘﺎح ﻻﺳﻔﻞ‬ ‫‪onkeydown‬‬
‫ﻋﻨﺪﻣﺎ ﻳﻀﻐﻂ اﳌﺴﺘﺨﺪم ﻣﻔﺘﺎح‬ ‫‪onkeypress‬‬
‫ﻋﻨﺪ ﺗﺤﺮﻳﺮ ﻣﻔﺘﺎح‬ ‫‪onkeyup‬‬
‫ﻳﺘﺤﻘﻖ اﻟﺤﺪث مبﺠﺮد ﺗﺤﻤﻴﻞ اﻟﺼﻔﺤﺔ‬ ‫‪onload‬‬
‫ﻋﻨﺪﻣﺎ ﻳﺼﺒﺢ ﻣﺆﴍ اﳌﺎوس اﺳﻔﻞ اﻟﻌﻨﴫ‬ ‫‪onmousedown‬‬
‫ﻋﻨﺪ ﺗﺤﺮﻳﻚ اﳌﺎوس‬ ‫‪onmousemove‬‬
‫ﻋﻨﺪﻣﺎ ﻳﺒﺘﻌﺪ ﻣﺆﴍ اﳌﺎوس ﺑﻌﻴﺪا ﻋﻦ اﻟﻌﻨﴫ‬ ‫‪onmouseout‬‬
‫ﻋﻨﺪﻣﺎ ﻳﻜﻮن ﻣﺆﴍ اﳌﺎوس ﻓﻮق اﻟﻌﻨﴫ ﻣﺒﺎﴍة‬ ‫‪onmouseover‬‬
‫ﻋﻨﺪﻣﺎ ﻳﺤﺮر اﳌﺴﺘﺨﺪم زر اﳌﺎوس‬ ‫‪onmouseup‬‬
‫ﻋﻨﺪ ﺗﺼﻔري اﻟﺨﺎﻧﺎت‬ ‫‪onreset‬‬
‫ﻋﻨﺪ ﺗﻐﻴري اﳌﺴﺘﺨﺪم ﻟﺤﺠﻢ اﻟﺼﻔﺤﺔ او ﺣﺠﻢ ﻋﻨﴫ‬ ‫‪onresize‬‬
‫ﻋﻨﺪﻣﺎ ﻳﻀﻐﻂ اﳌﺴﺘﺨﺪم ﻋﲆ زر ﺳﺎمبﻴﺖ‬ ‫‪onsubmit‬‬
‫ﻋﻨﺪ اﻏﻼق ﻧﺎﻓﺬة اﳌﺘﺼﻔﺢ‬ ‫‪onunload‬‬
‫‪ ‬‬
‫ﻋﻨﺪﻣﺎ ﻧﻄﺒﻖ ﻣﺜﺎل ﻋﻤﲇ ﺳﺘﻜﺘﺸﻒ ان اﻻﺣﺪاث ﻣﺴﻠﻴﺔ و ﺳﻬﻠﺔ ﺣﻴﺚ ميﻜﻨﻚ ان ﺗﻀﻊ اي ﻛﻮد ﺟﺎﻓﺎ‬
‫ﺳﻜﺮﻳﺒﺖ ﺑﺪون ان ﺗﺤﴫه ﺑني >‪ <script‬و >‪ <script/‬ﻛام ﺗﻌﻠﻤﻨﺎ ﺳﺎﺑﻘﺎ ﻻﺣﻆ ﻫﺬا اﳌﺜﺎل‬
‫>‪<head‬‬
‫>‪</head‬‬
‫"'‪<body onClick="document.bgColor='red‬‬
‫" '‪onDblClick="document.bgColor='blue‬‬
‫>"'‪onMouseOut="document.bgColor='yellow‬‬
‫اﺿﻐﻂ ﻣﺮة واﺣﺪة ﻳﺘﻐري ﻟﻮن اﻟﺼﻔﺤﺔ اﱃ اﻻﺣﻤﺮ و دﺑﻞ ﻛﻠﻴﻚ ﻳﺼﺒﺢ ازرق و ﻋﻨﺪ اﺑﺘﻌﺎد اﳌﺎوس ﻋﻦ اﻟﺼﻔﺤﺔ ﺗﺼﺒﺢ اﻟﺨﻠﻔﻴﺔ >‪<h3‬‬
‫>‪ </h3‬ﺻﻔﺮاء‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﻋﻨﺪﻣﺎ ﺗﻨﻔﺬ ﻫﺬا اﻟﻜﻮد ﺑﺎﳌﺘﺼﻔﺢ ﺳﻴﺘﻐري ﻟﻮن اﻟﺼﻔﺤﺔ اﱃ اﻻﺣﻤﺮ مبﺠﺮد اﻟﻀﻐﻂ ﻋﻠﻴﻬﺎ و اﱃ اﻻﺻﻔﺮ‬
‫ﺑﺎﺑﺘﻌﺎد اﳌﺎوس ﻋﻨﻬﺎ‬
‫ﺗﺤﺬﻳﺮ ﻟﻘﺪ اﺳﺘﺨﺪﻣﻨﺎ ﻋﻼﻣﺘﻲ اﻟﺘﻨﺼﻴﺺ اﳌﻔﺮدة )' ‪(' ‬‬
‫>"'‪<body onClick="document.bgColor='red‬‬ ‫ﺻﺢ‬
‫وﻟﻜﻦ اﻳﺎك ان ﺗﻀﻌﻬﺎ ﻫﻜﺬا‬
‫‪ ‬‬
‫>""‪<body onClick="document.bgColor="red‬‬ ‫ﺧﻄﺄ‬
‫اﻣﺎ اذا ﻛﻨﺖ ﺗﺴﺘﺨﺪﻣﻬﺎ ﺑني ﻋﻨﴫ ﺳﻜﺮﻳﺒﺖ >‪ <script‬و >‪ <script/‬ﻓﻴﺠﻮز ﻋﻨﺪﻫﺎ اﺳﺘﺨﺪام‬
‫اﻟﻌﻼﻣﺔ اﳌﺰدوﺟﺔ )" "(‬
‫;"‪document.bgColor="red‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫اﻟﺪوال)‪(Function‬‬
‫ﻋﻨﺪ ﺗﻨﻔﻴﺬك ﻟﻜﻮد دون ان ﺗﻀﻌﻪ داﺧﻞ ﻓﻨﻜﺸﻦ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬه ﻓﻮرا وﻟﻜﻦ ﻣﺎذا ﻟﻮ اردت ان ﻳﻨﻔﺬ اﻟﻜﻮد‬
‫ﻓﻘﻂ ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ اﻧﺖ و ﻟﻴﺲ مبﺠﺮد ﺗﺤﻤﻴﻞ اﻟﺼﻔﺤﺔ وﻟﺤﻞ ﻫﺬه اﳌﺸﻜﻠﺔ ﻧﺨﺰن اﻟﻜﻮد داﺧﻞ ﻓﻨﻜﺸﻦ وﺛﻢ‬
‫ﻧﺴﺘﺪﻋﻴﻪ ﻋﻨﺪﻣﺎ ﻧﺮﻏﺐ ﺑﺬﻟﻚ‪.‬‬
‫>‪<head‬‬
‫)(‪function hi‬‬
‫{‬
‫;)"ﻣﺮﺣﺒﺎ ﺑﻚ ﰲ ﻣﻮﻗﻌﻨﺎ "(‪alert‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ ‬‬
‫ﻏﺎﻳﺔ ﰲ اﻟﺴﻬﻮﻟﺔ ﻛﺘﺒﻨﺎ ﻛﻠﻤﺔ ‪Function‬‬

‫ﺛﻢ اﺳﻤﻴﻨﺎ ﻫﺬه اﻟﻔﻨﻜﺸﻦ ﺑﺎﻻﺳﻢ ﻫﺎي ‪hi‬‬
‫و اﺿﻔﻨﺎ ﻗﻮﺳني ﻓﺎﺻﺒﺤﺖ ﻫﻜﺬا )(‬
‫و ﺛﻢ اﺣﴫ ﻛﻮدك ﺑني اﻻﻗﻮاس اﳌﺠﻌﺪة ان ﺻﺢ اﻟﺘﻌﺒري }ﺿﻊ اﻟﻜﻮد ﻫﻨﺎ{‬
‫وﻟﻜﻦ ﻟﻦ ﻳﻌﻤﻞ اﻟﻜﻮد اﺣﺰر ﳌﺎذا ﻳﺎ ﺷﺎﻃﺮ؟ ﻻﻧﻨﺎ مل ﻧﺴﺘﺪﻋﻲ اﻟﻔﻨﻜﺸﻦ ﺑﻌﺪ ‪.‬‬
‫اﺳﺘﺪﻋﺎء اﻟﻔﻨﻜﺸﻦ ﺳﻬﻞ ﺟﺪا ﻓﻘﻂ اﻛﺘﺐ اﺳﻢ اﻟﻔﻨﻜﺸﻦ ﻣﺘﺒﻮﻋﺎ ﺑﻘﻮﺳني ﻟﻜﻨﻲ ارﻳﺪ اﺳﺘﺪﻋﺎءﻫﺎ ﻓﻘﻂ ﻋﻨﺪﻣﺎ‬
‫ميﺮ ﻣﺆﴍ اﳌﺎوس ﻓﻮق ﻓﻘﺮة ﻣﻌﻴﻨﺔ‬
‫>‪<head‬‬
‫)(‪function hi‬‬
‫{‬
‫;)"ﻣﺮﺣﺒﺎ ﺑﻚ ﰲ ﻣﻮﻗﻌﻨﺎ "(‪alert‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪ </p‬ﻋﻨﺪ ﻣﺮور اﳌﺎوس ﻓﻮق ﻫﺬه اﻟﺠﻤﻠﺔ ﺳﺘﻈﻬﺮ رﺳﺎﻟﺔ >")(‪<p onMouseOver="hi‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﻓﻌﻨﺪﻣﺎ ﻧﺠﺮﺑﻪ ﺑﺎﻟﻔﺎﻳﺮﻓﻮﻛﺲ و متﺮ ﺑﺎﳌﺎوس ﻓﻮق اﻟﻔﻘﺮة ﺗﻈﻬﺮ ﻟﻚ رﺳﺎﻟﺔ ﺗﺮﺣﻴﺐ‬
‫و ﻫﺬا ﻣﺜﺎل اﺧﺮ ﻻﺣﻆ اﻧﻨﻲ اﺳﺘﺨﺪم اﻻﺣﺪاث ﻓﻌﻨﺪ ﺧﺮوج اﳌﺴﺘﺨﺪم ﻣﻦ ﻣﻮﻗﻌﻚ ﺗﻈﻬﺮ ﻟﻪ رﺳﺎﻟﺘﻲ وداع‬
‫اﻻ ﻳﺒﺪو ﻫﺬا ﻣﺴﻠﻴﺎ‬
‫‪ ‬‬
‫>‪<head‬‬
‫)(‪function good_bye‬‬
‫{‬
‫;)"اﻟﻠﻪ ﻣﻌﻚ "(‪alert‬‬
‫;)" ﻣﻊ اﻟﻒ ﺳﻼﻣﺔ"(‪alert‬‬
‫}‬
‫>‪</head‬‬
‫>")(‪<body onUnload="good_bye‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫او ﺑﺎﻣﻜﺎﻧﻚ ان ﺗﻨﻔﺬ اﻟﻜﻮد مبﺠﺮد ﺗﺤﻤﻴﻞ اﻟﺼﻔﺤﺔ و ذﻟﻚ ﺑﺎﺳﺘﺨﺪام اﻟﺤﺪث ‪ Onload‬ﻛام ﻳﲇ‬
‫‪ ‬‬
‫>‪<head‬‬
‫)(‪function text‬‬
‫{‬
‫اﻟﻠﻬﻢ ﻋﻠﻤﻨﺎ ﻣﺎ ﻳﻨﻔﻌﻨﺎ و اﻧﻔﻌﻨﺎ مبﺎ >‪document.write(" <h1><center‬‬
‫;)">‪</center></h1‬ﻋﻠﻤﺘﻨﺎ‬
‫}‬
‫>‪</head‬‬
‫>")(‪<body onload="text‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﻟرنى ﻛﻴﻒ ﺳﻴﻌﺮﺿﻬﺎ اﳌﺘﺼﻔﺢ ‪:‬‬
‫وﻟﻜﻦ ﻣﺎذا ﻋﻦ ﻣﺤﺘﻮﻳﺎت اﻟﺼﻔﺤﺔ او ﺟﺴﻢ اﻟﺼﻔﺤﺔ ﺑﻮدي اذا ﻛﺘﺒﻨﺎ ﻛﻼﻣﺎ ﺑﺎﻟﻘﺴﻢ ‪ body‬ﻟﻼﺳﻒ ﻟﻦ‬
‫ﻳﻈﻬﺮ ﻻﻧﻚ ﻋﻨﺪﻣﺎ ﺗﺴﺘﺨﺪم اﻟﻜﺎﺋﻦ ‪ document.write‬ﻳﻘﻮم مبﺴﺢ ﻛﻞ ﻣﺤﺘﻮﻳﺎت اﻟﺼﻔﺤﺔ ﺛﻢ‬
‫ﻳﻜﺘﺐ ﻓﻮﻗﻬﺎ ﻻن ﻫﺬا اﻟﻜﺎﺋﻦ ﺑﻠﻐﺔ اﻟﺠﺎﻓﺎ ميﺜﻞ ﺻﻔﺤﺔ اﻟﻮﻳﺐ ‪.‬‬
‫‪ ‬‬
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaSCript</title>
<script type="text/javascript">
function text()
{
document.write(" <h1><center> ‫اﻟﻠﻬﻢ ﻋﻠﻤﻨﺎ ﻣﺎ ﻳﻨﻔﻌﻨﺎ و اﻧﻔﻌﻨﺎ مبﺎ‬
‫<ﻋﻠﻤﺘﻨﺎ‬/center></h1>");
}
</script>
</head>
<body onload="text()">
<h3>‫< ﻟﻼﺳﻒ ﻫﺬﺍ ﺍﻟﻨﺺ ﻟﻦ ﻳﻈﻬﺮ‬/h3>
<h3>‫<ﺑﻌﺒﺎﺭﺓ ﺍﺧﺮﻯ ﻛﻞ ﺍﻟﺼﻔﺤﺔ ﻟﻦ ﺗﻈﻬﺮ‬/h3>
<h3>‫<ﺍﻟﺬﻱ ﺳﻴﻈﻬﺮ ﻓﻘﻂ ﺍﻟﺠﻤﻠﺔ ﺍﻟﺘﻲ ﻛﺘﺒﺖ ﺑﺎﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬/h3>
</body>
</html>
. . . ‫ﻃﻴﺐ ﻟﻨﻔﻜﺮ ﺳﻮﻳﺎ ﺑﺤﻞ ﻟﻬﺬه اﳌﺸﻜﻠﺔ‬
<p>‫ اﺳﺘﻌامﻟﻬﺎ ﺳﻬﻞ ﺟﺪا ﻓﻬﻲ ﺷﺒﻴﻪ ﺑـ‬HTNL ‫<ﰲ ﻟﻐﺔ اﻟـ‬Div> ‫اﻋﺘﻘﺪ اﻧﻚ ﺳﻤﻌﺖ ﺑﺎﻟﻌﻨﴫ‬
‫< اﻻن ﻟﺪﻳﻨﺎ ﺛﻼث ﻓﻘﺮات ﻧﺮﻳﺪ ان ﻧﻀﻊ اﻃﺎر ﻟﻬﺎ ﺑﺎﺳﺘﺨﺪام‬p>‫وﻟﻜﻦ ﻣﺎ اﻟﻔﺮق ﺑﻴﻨﻬﺎ و ﺑني اﻟﻔﻘﺮة‬
: ‫اﻟﺴﺘﺎﻳﻞ راﻗﺐ اﻟﻜﻮد‬
<html dir="rtl">
<head>
<style type="text/css">
.bord
{
border:double 3px;
padding-right: 20px;
}
</style>
</head>
<body>
<p class="bord">‫<رﺿﻴﻨﺎ ﺑﺎﻟﻠﻪ رﺑﺎ‬/p>
<p class="bord">‫< و ﺑﺎﻻﺳﻼم دﻳﻨﺎ‬/p>
<p class="bord">‫<و مبﺤﻤﺪ ﻧﺒﻴﺎ و رﺳﻮﻻ‬/p>
</body>
</html>
: ‫وﻟﻜﻦ ﻇﻬﺮت ﺑﺸﻜﻞ ﻏري ﻣﻼﺋﻢ اﻧﻈﺮ اﱃ اﻟﺼﻮرة‬
‫ اﻻن‬div ‫و اﻧﺖ ﻛﻨﺖ ﺗﺮﻳﺪ ان ﻳﻜﻮن ﳌﺠﻤﻮﻋﺔ اﻟﻔﻘﺮات اﻃﺎر واﺣﺪ اﻟﺤﻞ اﻟﻮﺣﻴﺪ ﻫﻮ ﺑﺎﺳﺘﺨﺪام اﻟـ‬
div‫ﺟﺮب ﻫﺬا اﻟﻜﻮد ﺑﻨﻔﺴﻚ ﺑﻌﺪ اﺳﺘﺨﺪام اﻟـ‬
<html dir="rtl">
<head>
.bord
{
border:double 3px;
}
</style>
</head>
<body>
<div class="bord">
<p>‫< رﺿﻴﻨﺎ ﺑﺎﻟﻠﻪ رﺑﺎ‬/p>
<p> ‫< و ﺑﺎﻻﺳﻼم دﻳﻨﺎ‬/p>
<p> ‫< و مبﺤﻤﺪ ﻧﺒﻴﺎ و رﺳﻮﻻ‬/p>
</div>
</body>
</html>
‫ﻫﻞ ﻻﺣﻈﺖ اﻟﻔﺮق ؟ و اﻻن ﻟرنﻛﺰ ﻋﲆ ﺧﺎﺻﻴﺔ ﻣﻬﻤﺔ متﻌﻦ ﰲ ﻫﺬا اﻟﻜﻮد‬
‫>‪<head‬‬
‫>‪</head‬‬
‫>‪<div id="first"></div‬‬
‫>‪<div id="secondString"></div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﻓﻜام ﺗﺮى ﻫﺬا اﻟﻌﻨﴫ >‪ <Div‬ﻳﺎﺧﺬ اﻟﺨﺎﺻﻴﺔ ‪ ID‬ﺣﻴﺚ ميﻜﻨﻚ ان ﺗﻌﺒﺄ ﻟﻜﻞ>‪ <Div‬ﺧﺎﺻﻴﺔ‬
‫‪ID‬ﻣﺨﺘﻠﻔﺔ‬
‫ﻓﻤﺜﻼ ﰲ اﻟـ >‪<Div‬اﻻوﱃ وﺿﻌﻨﺎ ﻟﻬﺎ اﻟـ ‪ID first‬‬
‫اﻧﺎ ارﻛﺰ ﻋﲆ ﺧﺎﺻﻴﺔ اﻟـ ‪ ID‬ﻻﻧﻬﺎ ﺳﺘﻠﺰﻣﻨﺎ ﻛﺜريا ‪.‬‬
‫‪ ‬‬
‫ﻧﺤﻦ ﺗﻌﻮدﻧﺎ اﺳﺘﺨﺪام اﻟﻜﺎﺋﻦ ‪ document‬ﺣﻴﺚ ميﺜﻞ ﻫﺬا اﻟﻜﺎﺋﻦ ﺻﻔﺤﺔ اﻟﻮﻳﺐ ﺑﺄﻛﻤﻠﻬﺎ و ﻟﻜﻦ ﻣﺎ‬
‫راﻳﻚ ان ﻧﻨﺸﺄ ﻛﺎﺋﻦ ﺧﺎص ﻟﻜﻞ ‪ div‬ﻓﻬﺬا ﻳﻌﻄﻴﻚ ﺗﺤﻜام اﻛﱪ و ﻣﺮوﻧﺔ ﺑﺎﻟﱪﻧﺎﻣﺞ ﻓﻤﺜﻼ اﻟـ‪ div‬اﻻوﱃ‬
‫ﺳﻨﻨﺸﺎ ﻛﺎﺋﻦ ﺧﺎص ﻟﻬﺎ >‪<div id="first"></div‬‬
‫وﻛﺎﺋﻦ ﺧﺎص ﻟﻠﺜﺎﻧﻴﺔ>‪<div id="secondString"></div‬‬
‫وﻟﻜﻦ ﻛﻴﻒ ﻧﻨﺸﺎء اﻟﻜﺎﺋﻦ اﻟﺨﺎص ﻧﺤﻦ ﺗﻌﻮدﻧﺎ اﺳﺘﺨﺪام اﻟﺨﺎﺻﻴﺔ ‪ write‬ﻟﻜﻦ ﻫﻨﺎك ﺧﺎﺻﻴﺔ ﺗﺴﺎﻋﺪﻧﺎ‬
‫ﻋﲆ ﺗﺨﺼﻴﺺ اﻟﻜﺎﺋﻦ وﻫﻲ ‪getElementById‬ﻓﻌﻨﺪﻣﺎ ﺗﻜﺘﺐ‬
‫)'‪document.getElementById('firsr‬‬
‫ﻓﺎﻧﺖ ﺑﺬﻟﻚ ﺻﻨﻌﺖ ﻛﺎﺋﻦ ﺧﺎص ﺑــ >"‪<div id="first‬‬
‫و ﻫﺬا اﻟﻜﺎﺋﻦ‪JavaScript object corresponding to the <div> :‬‬

‫ﻳﺴﻤﻮﻧﻪ ﺑﺎﻻﻧﻜﻠﻴﺰي‬
‫اي ﻛﺎﺋﻦ ﻣﻘﺎﺑﻞ ﻟﺘﻠﻚ اﻟـ‪div‬‬
‫‪ ‬‬
‫اﻟﺨﺎﺻﻴﺔ ‪innerHTML‬‬
‫اﻻن ﺑﻌﺪ ان ﺻﻨﻌﺖ ﻛﺎﺋﻦ ﺧﺎص ﺑـ ‪ div‬ﺗﺮﻳﺪ ان ﺗﺮﺳﻞ ﻧﺼﺎ اﱃ ﻫﺬه اﻟـ‪ div‬او ﺑﻌﺒﺎرة اﺧﺮى ﺗﺮﻳﺪ ان‬
‫ﺗﻜﺘﺐ ﻧﺼﺎ داﺧﻞ ﻫﺬه اﻟـ‪ div‬ﻫﻨﺎك ﺧﺎﺻﻴﺔ ﻣﻔﻴﺪة و ﻣﺴﺎﻋﺪة ﺟﺪا وﻫﻲ ‪ innerHTML‬ﺣﻴﺚ‬
‫ﺗﻘﻮم اﻟﺠﺎﻓﺎ ﺳﻜﺮﺑﺖ ﺑﺎرﺳﺎل اﻟﻘﻴﻤﺔ اﻟﺘﻲ ﺗﺨﺰﻧﻬﺎ ﻛﻨﺺ ﻳﻈﻬﺮ ﰲ ﺗﻠﻚ اﻟـ‪ div‬ﻓﻘﻂ اﻛﺘﺐ ‪:‬‬
‫‪document.getElementById("first").innerHTML‬‬
‫‪ ‬‬
‫>‪<head‬‬
‫{‬
‫اﻟﻠﻬﻢ >‪document.getElementById("first").innerHTML = "<h1><center‬‬
‫;">‪</center></h1‬ﻋﻠﻤﻨﺎ ﻣﺎ ﻳﻨﻔﻌﻨﺎ و اﻧﻔﻌﻨﺎ مبﺎ ﻋﻠﻤﺘﻨﺎ‬
‫}‬
‫>‪</head‬‬
‫>‪ </h3‬ﺳﻴﻈﻬﺮ ﻫﺬا اﻟﻨﺺ>‪<div id="secondString"></div> <h3‬‬
‫>‪</h3‬وﺟﻤﻴﻊ ﻣﺤﺘﻮﻳﺎت اﻟﺼﻔﺤﺔ>‪<h3‬‬
‫>‪</h3‬ان ﺷﺎء اﻟﻠﻪ>‪<h3‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ ‬‬
‫ﻃﻴﺐ ﻟﻨﺠﺮب ﻫﺬه اﳌﺮة ان ﻧﺼﻨﻊ ﻛﺎﺋﻦ اوﺑﺠﻜﺖ ﺧﺎص ﺑﺎﻟﺠﻤﻠﺔ اﻟﺜﺎﻧﻴﺔ و ﻧﺮﺳﻠﻪ ﺑﺎﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ و‬
‫ﺳﺎﺿﻊ اﻟﺠﻤﻠﺔ اﻟﺜﺎﻧﻴﺔ اﺳﻔﻞ اﻟﺼﻔﺤﺔ ﻟيك متﻴﺰﻫﺎ و ﺳﺎﺳﻤﻲ اﻟـ‪ div‬ﺑﺎﻻﺳﻢ ‪ bottom‬اﺳﺘﻤﺘﻊ ﺑﺎﻟﻜﻮد ‪:‬‬
‫‪ ‬‬
‫>‪<head‬‬
‫{‬
‫= ‪document.getElementById("bottom").innerHTML‬‬
‫;">‪ </center></h1‬ﺳرنﺳﻞ ﻫﺬا اﻟﻨﺺ ﺑﺎﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ اﱃ اﺳﻔﻞ اﻟﺼﻔﺤﺔ>‪"<h1><center‬‬
‫}‬
‫>‪</head‬‬
‫>‪</h1‬ﻣﺤﺘﻮﻳﺎت اﻟﺼﻔﺤﺔ >‪<h1‬‬
‫>‪<br‬‬
‫>‪<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br‬‬
‫>‪<div id="bottom"></div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﻛام ﺗﺮى ﻇﻬﺮت اﻟﺠﻤﻠﺔ ﺳرنﺳﻞ ﻫﺬا اﻟﻨﺺ ﺑﺎﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ اﱃ اﺳﻔﻞ اﻟﺼﻔﺤﺔ و ﻇﻬﻮرﻫﺎ مل ميﺴﺢ‬
‫ﻣﺤﺘﻮﻳﺎت اﻟﺼﻔﺤﺔ ﻛام ﺣﺼﻞ ﻣﻌﻨﺎ ﻋﻨام اﺳﺘﺨﺪﻣﻨﺎ ‪ document.write‬اﻟﺘﻲ ﺗﺴﺒﺐ ﻣﺼﻴﺒﺔ و‬
‫متﺴﺢ ﻛﻞ ﺷﻴﺊ‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫متﺮﻳﺮ ﻣﻌﺎﻣﻼت ‪arguments‬‬

‫‪ ‬‬
‫ﺗﺨﻴﻞ اﻧﻚ ﺗﺮﻳﺪ اﻧﺸﺎء ﻓﻨﻜﺸﻦ ﻣﻬﻤﺘﻬﺎ اﻳﺠﺎد ﻣﺮﺑﻊ اﻟﻌﺪد ﻣﺜﻼ اذا ﻃﻠﺒﺖ ﻣﻨﻬﺎ ﻣﺮﺑﻊ اﻟﻌﴩة ﺗﻌﻄﻴﻚ ﻣﺌﺔ و‬
‫ﰲ ﻛﻞ ﻣﺮة ﺗﺮﻳﺪ ان ﺗﻌﺮف ﻣﺮﺑﻊ ﻋﺪد ﺟﺪﻳﺪ ﻫﺬا اﻟﻌﺪد اﻟﺠﺪﻳﺪ او اﻟﺒﻴﺎﻧﺎت اﳌﺘﻐرية اﻟﺘﻲ ﺗﺪﺧﻠﻬﺎ اﱃ‬
‫اﻟﻔﻨﻜﺸﻦ ﻧﺴﻤﻴﻬﺎ ‪ argument‬و ﰲ اﳌﺜﺎل ﻳﺘﻀﺢ اﳌﻘﺎل ‪ :‬ﺳﻨﺼﻨﻊ ﻓﻨﻜﺸﻦ ﻧﺴﻤﻴﻬﺎ ‪ sqr‬ﺛﻢ منﺮر‬
‫ﻟﻬﺎ اﳌﻌﺎﻣﻞ ‪ num‬وﻃﻠﺒﻨﺎ ﻣﻨﻬﺎ ان ﺗﺤﺴﺐ ﻣﺮﺑﻊ اﻟﻌﺪد و ﰲ ﻛﻞ ﻣﺮة ﻧﺴﺘﺪﻋﻲ اﻟﺪاﻟﺔ ﻧﻀﻊ ﻋﺪد‬
‫ﻣﺨﺘﻠﻒ‬
‫‪ ‬‬
‫>‪<head‬‬
‫)‪function sqr(num‬‬
‫{‬
‫;)‪alert(num*num‬‬
‫}‬
‫>‪</head‬‬
‫>")‪<body onload="sqr(10‬‬
</body>
</html>
‫ ﻛﻢ ﺳﻴﻜﻮن اﻟﺠﻮاب ﻳﺎ ﺷﺎﻃﺮ؟‬8 ‫دﻋﻨﺎ ﻧﺠﺮب متﺮﻳﺮ ﻗﻴﻤﺔ اﺧﺮى ﻟﻠﻤﻌﺎﻣﻞ و ﻟﺘﻜﻦ‬
<html dir="rtl">
<head>
function sqr(num)
{
alert(num*num);
}
</script>
</head>
<body onload="sqr(8)">
</body>
</html>
:‫اﻻن دﻋﻨﺎ ﻧﻄﺒﻖ ﻣﺎ ﺗﻌﻠﻤﻨﺎه وﻟﻜﻦ ﻋﲆ اﻟﻌﺒﺎرة‬

document.getElementById("bottom").innerHTML
<html dir="rtl">
<head>
function show(text)
{
document.getElementById("bottom").innerHTML=text;
}
</script>
</head>
<body onload="show('<h3> ‫ ﻫﺬا اﻟﻨﺺ ﻳﻌﱪ ﻋﻦ اﳌﻌﺎﻣﻞ‬text </h3>')">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="bottom"></div>
</body>
</html>
‫اﻻن ﺳﺎﻣﺮر ﻧﺺ اﺧﺮ و ﺳﺎﻏري اﻟﺤﺪث ﺳﺎﺳﺘﺨﺪم اﻟﺤﺪث اون ﻛﻠﻴﻚ ﻓﻠﻦ ﻳﻈﻬﺮ اﻟﻨﺺ اﻻ اذا ﺿﻐﻄﺖ‬
: ‫ﺑﺎﳌﺎوس ﻋﲆ اﻟﺼﻔﺤﺔ ﺟﺮﺑﻪ ﺑﻨﻔﺴﻚ و اﺳﺘﻤﺘﻊ‬
<html dir="rtl">
<head>
function show(text)
{
document.getElementById("tob").innerHTML=text;
}
</script>
</head>
<body onClick="show('<h2> ‫ﻇﻬﺮت ﻫﺬه اﻟﺮﺳﺎﻟﺔ ﻻﻧﻚ ﺿﻐﻄﺖ ﻋﲆ اي ﺟﺰء ﻣﻦ‬
‫<اﻟﺼﻔﺤﺔ‬/h2>')">
<div id="tob"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
<span> ‫< و‬div> ‫اﻟﻔﺮق ﺑني‬
‫< ﻳﺴﺘﺨﺪم ﻟﺘﻨﺴﻴﻖ ﻋﺪة ﻓﻘﺮات ﻓﻐﺎﻟﺒﺎ ﻣﺎ ﻧﺴﺘﺨﺪﻣﻪ ﻣﻊ ﻧﺼﻮص ﻃﻮﻳﻠﺔ و اﺟﺰاء ﻛﺒرية ﻣﻦ‬div> ‫اﻟﻌﻨﴫ‬
‫< اﻻن ﻟﺪﻳﻚ ﺟﻤﻠﺔ رﺿﻴﻨﺎ‬span> ‫اﻟﺼﻔﺤﺔ اﻣﺎ ﻋﻨﺪﻣﺎ ﻧﺘﻌﺎﻣﻞ ﻣﻊ ﺳﻄﺮ واﺣﺪ ﻋﻨﺪﻫﺎ ﻳﺠﺐ اﺳﺘﻌامل‬
: ‫ﺑﺎﻟﻠﻪ رﺑﺎ ﺗﺮﻳﺪ ان ﺗﻈﻬﺮ ﻟﻔﻆ اﻟﺠﻼﻟﺔ ﺑﺨﻂ اﻛﱪ ﻟﻨﺤﺎول ﻣﻌﺎ‬
<html dir="rtl">
<head>
</head>
<body>
<p>
<div style="font-size:12px">‫< رﺿﻴﻨﺎ‬/div>
<div style="font-size:36px">‫< ﺑﺎﻟﻠﻪ‬/div>
<div style="font-size:12px">‫<رﺑﺎ‬/div>
</p>
</body>
</html>
<span> ‫ﻟﻜﻨﻚ ﻻ ﺗﺮﻳﺪ ان ﺗﻈﻬﺮ ﻛﻞ ﻛﻠﻤﺔ ﺑﺴﻄﺮ ﺑﻞ ﺗﺮﻳﺪﻫﺎ ﺟﻤﻠﺔ ﻣﺘﻼﺻﻘﺔ اﻟﻜﻠامت و ﻳﺎيت اﻟﻌﻨﴫ‬
:<span> ‫ﻟﻴﺤﻞ ﻟﻨﺎ ﻫﺬه اﳌﺸﻜﻠﺔ ﻟﻨﻜﺘﺐ ﻧﻔﺲ اﻟﻜﻮد ﻟﻜﻦ ﺑﺎﺳﺘﺨﺪام‬
<html dir="rtl">
<head>
.bord
{
border:double 3px;
}
</style>
</head>
<body>
<p>
<span style="font-size:12px">‫< رﺿﻴﻨﺎ‬/span>
<span style="font-size:36px">‫< ﺑﺎﻟﻠﻪ‬/span>
<span style="font-size:12px">‫<رﺑﺎ‬/span>
</p>
</body>
</html>

‫< اذا ﻛﻨﺖ ﺗﺮﻳﺪ ادراج ﻧﺺ ﰲ ﻧﻔﺲ اﻟﺴﻄﺮ و اﻻن ﺳﻨﻄﺒﻖ‬span> ‫ﻳﻌﻨﻲ ﺑﺎﺧﺘﺼﺎر ﺷﺪﻳﺪ اﺳﺘﺨﺪم‬
‫ﻣﺜﺎل ﻣﺘﻘﺪم ﻳﺠﻌﻠﻚ اﻛرث اﺣﱰاﻓﻴﺔ ﺳﻨﺪرج ﺟﺰء ﻣﻦ اﻳﺔ ﻗﺮاﻧﻴﺔ ﺛﻢ ﻧﻜﻤﻞ اﻟﺠﺰء اﻻﺧﺮ ﺑﺎرﺳﺎﻟﻪ ﺑﺎﻟﺠﺎﻓﺎ‬
: ‫ﺳﻜﺮﻳﺒﺖ‬
<html dir="rtl">
<head>
function show()
{
document.getElementById("qoran").innerHTML = "‫;"و ﻗﻨﺎ ﻋﺬاب اﻟﻨﺎر‬
}
</script>
</head>
<body onLoad="show()">
<br> <br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>
‫< اﻟﻠﻬﻢ اﺗﻨﺎ ﰲ اﻟﺪﻧﻴﺎ ﺣﺴﻨﺔ و ﰲ اﻻﺧﺮة ﺣﺴﻨﺔ‬span id="qoran"></span>
</h1>
</body>
</html>
. ‫ﻛام ﺗﻼﺣﻆ ﻇﻬﺮ اﻟﻨﺎس اﻟﺬي ارﺳﻠﻨﺎه ﺑﺎﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﻣﻼﺻﻖ متﺎﻣﺎ ﻟﻠﻨﺺ اﻻﺻﲇ‬
‫متﺮﻳﺮ اﻛرث ﻣﻦ ﻣﻌﺎﻣﻞ‬

: ‫ﺳﻨﺼﻨﻊ ﻓﻨﻜﺸﻦ ﺗﻘﻮم ﺑﴬب ﻋﺪدﻳﻦ اذا ﻻ ﺑﺪ ﻟﻨﺎ ﻣﻦ ان منﺮر ﻟﻬﺎ ﻣﻌﺎﻣﻠني اﻻﻣﺮ ﻏﺎﻳﺔ ﰲ اﻟﺴﻬﻮﻟﺔ‬
<html dir="rtl">
<head>
function mult(num1,num2)
{
alert(num1*num2);
}
</script>
</head>
<body onLoad="mult(5,7)">
</body>
</html>
‫ﻣﺜﺎل اﺧﺮ‬
‫اﻻن ﺳﻨﺼﻨﻊ ﻓﻨﻜﺸﻦ ﺟﺪﻳﺪة و منﺮر ﻟﻬﺎ ﻣﻌﺎﻣﻠني اﻻول ﻳﻌﱪ ﻋﻦ اﻟﻨﺺ و اﳌﻌﺎﻣﻞ اﻟﺜﺎين اﻳﻦ ﺳﻴﺘﻮﺿﻊ ﻫﺬا‬
: ‫اﻟﻨﺺ ﻻ ﺗﺘﻜﺎﺳﻞ ﻣﻦ ﺗﺠﺮﺑﺔ اﻟﻜﻮد ﺑﻨﻔﺴﻚ‬
<html dir="rtl">
<head>
function show(text,div_name)
{
document.getElementById(div_name).innerHTML=text;
}
</script>
</head>
<body onLoad="show('‫'ﺑﺴﻢ اﻟﻠﻪ اﻟﺮﺣﻤﻦ اﻟﺮﺣﻴﻢ‬,'top')" onclick="show('‫ ﻣﻊ ﺗﺤﻴﺎت‬:‫اﻟﺘﻮﻗﻴﻊ‬
‫' اﳌﱪﻣﺞ اميﻦ ﻛﺰة‬,'bottom')">
<h2> <center><div id="top"></div>
</center></h2>
<br><br><br><br><br><br><br><br><br><br><br><br>
<h3><center>
</center></h3>
</body>
</html>
:‫ﻃﺒﻌﺎ اﻟﺘﻮﻗﻴﻊ ﻟﻦ ﻳﻈﻬﺮ اﻻ اذا ﺿﻐﻄﺖ ﻋﲆ اﻟﺼﻔﺤﺔ وﻟﻜﻦ اﻟﻔﻜﺮة اﻟﺮﺋﻴﺴﻴﺔ ﻫﻨﺎ اﻧﻚ ﺗﺘﺤﻜﻢ ﺑـ‬
text ‫ اﻟﻨﺺ ﻣﻦ ﺧﻼل اﳌﻌﺎﻣﻞ اﻻول‬- 1
div_name ‫ ﻣﻜﺎن ﻇﻬﻮر اﻟﻨﺺ ﻣﻦ ﺧﻼل اﳌﻌﺎﻣﻞ‬- 2
show('‫'ﺑﺴﻢ اﻟﻠﻪ اﻟﺮﺣﻤﻦ اﻟﺮﺣﻴﻢ‬,'top')
‫اﳌﺘﻐريات‬

‫ﺣﻴﺚ ميﻜﻨﻚ ان ﺗﺨﺰن ﻧﺼﺎ او اي ﺑﻴﺎﻧﺎت ﰲ ﻣﺘﻐري ﻟيك ﻻ ﺗﻌﻴﺪ ﻛﺘﺎﺑﺔ ذﻟﻚ اﻟﻨﺺ ﰲ ﻛﻞ ﻣﺮة ﻓﻘﻂ ﺗﻜﺘﺐ‬
‫اﺳﻢ اﳌﺘﻐري و ﺑﺎﳌﺜﺎل ﻳﺘﻀﺢ اﳌﻘﺎل‬:
<html dir="rtl">
<head>
var string = "‫;"ﺑﺴﻢ اﻟﻠﻪ اﻟﺮﺣﻤﻦ اﻟﺮﺣﻴﻢ‬
function show()
{
document.getElementById('top').innerHTML=string;
}
</script>
</head>
<body onLoad="show()">
<h2> <center><div id="top"></div>
</center></h2>
<br><br><br><br><br><br><br><br><br><br><br><br>
<h3><center>
</center></h3>
</body>
</html>
‫ اﻻن ﺳﺎﻋﻄﻴﻚ ﻣﺜﺎل‬string ‫ﻛام راﻳﺖ ﻓﺎﻟﻨﺺ ﺑﺴﻢ اﻟﻠﻪ اﻟﺮﺣﻤﻦ اﻟﺮﺣﻴﻢ ﺗﻢ ﺗﺨﺰﻳﻨﻪ ﰲ ﻣﺘﻐري اﺳﻤﻴﻨﺎه‬
: ‫ﻳﻘﻮﻳﻚ ﺑﺎﳌﺘﻐريات و ﺗﺘﻘﻦ اﺳﺘﺨﺪام اﳌﻌﺎﻣﻼت‬

<html dir="rtl">
<head>
var num1 = 5;
var num2 = 4;
var num3 = 10;
var result = 0;
function sum()
{
result = num1 + num2 + num3;
document.getElementById('top').innerHTML = result;
}
</script>
</head>
<body onLoad="sum()">
<h2><center>
‫ اﳌﺠﻤﻮع‬: <span id="top"></span>
</center></h2>
</body>
</html>
‫ﻻﺣﻆ اﻧﻨﻲ اﻋﺮف اﳌﺘﻐريات ﺧﺎرج اﻟﻔﻨﻜﺸﻦ ﻻﻧﻚ اذا ﻋﺮﻓﺘﻬﺎ داﺧﻞ اﻟﻔﻨﻜﺸﻦ ﻓﺴﻴﺘﻢ ﺗﺼﻔريﻫﺎ اي اﻋﺎدﺗﻬﺎ‬
: ‫اﱃ ﻗﻴﻤﻬﺎ اﻻﺻﻠﻴﺔ ﰲ ﻛﻞ ﻣﺮة ﺗﺴﺘﺪﻋﻲ اﻟﻔﻨﻜﺸﻦ‬

<html>
<head>
<title>Using variables</title>
<script language="javascript">
var counter1 = 0;
function displayText()
{
var counter2 = 0;
counter1++;
counter2++;
document.getElementById('top').innerHTML =
" ‫ ﻫﺬا اﻟﻌﺪاد ﻳﻌﻤﻞ مبﺠﺮد ﺗﺤﺮﻳﻚ اﳌﺎوس ﻓﻮق اﻟﺼﻔﺤﺔ‬: " + counter1 + "<br>" +
" ‫ اﻣﺎ ﻫﺬا اﻟﻌﺪاد ﺳﻴﺘﻮﻗﻒ ﻋﻨﺪ‬: " + counter2;
}
</script>
</head>
<body onMouseOver="displayText()">
<h3>
<div id="top"></div>
</h3>
</body>
</html>
‫ ﻫﻮ اﻧﻨﺎ ﻋﺮﻓﻨﺎه داﺧﻞ اﻟﻔﻨﻜﺸﻦ‬counter2 ‫و ﺳﺒﺐ ﻓﺸﻞ اﻟﻌﺪاد اﻟﺜﺎين‬
‫ﻣﻼﺣﻈﺔ‬
var name = "Ayman";
‫و ارﻳﺪك ان ﺗﻼﺣﻆ ان اﳌﺘﻐري اﻟﻨﴢ ﻳﺠﺐ ﺣﴫه ﺿﻤﻦ "" ﻣﺜﻼ‬
var number = 15 ;
:‫اﻣﺎ اذا ﻛﺎن ﻣﺘﻐري ﻋﺪدي ﻓﻼ ﺗﻀﻊ اﺷﺎرة اﻟﺘﻨﺼﻴﺺ ﻣﺜﺎل‬
‫ ﻣﺜﻼ ميﻜﻨﻚ ذﻟﻚ ﺑﻜﻞ‬20 ‫ ﰲ اﳌﺘﻐري ﻧﻮﻣﱪ ﺛﻢ اردت ان ﺗﻐريﻫﺎ اﱃ‬15 ‫و ﺣﺘﻰ ﻟﻮ ﺧﺰﻧﺖ اﻟﻘﻴﻤﺔ‬
: ‫ﺳﻬﻮﻟﺔ ﺟﺮب اﻟﻜﻮد ﺑﻨﻔﺴﻚ‬
<html dir="rtl">
<head>
var num =15;
num = 20;
num = 0 ;
num = 54789657;
alert(num);
</script>
</head>
<body>
</body>
</html>
‫ﻛام ﺗﺮى ﻏريﻧﺎ ﻗﻴﻤﺔ اﳌﺘﻐري ‪ 4‬ﻣﺮات ﺑﻜﻞ ﺳﻬﻮﻟﺔ‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫ﺗﺨﺰﻳﻦ ‪ object‬ﰲ ﻣﺘﻐري‬

‫‪ ‬‬
‫‪ ‬‬
‫ﻫﻨﺎك اﻟﻜﺜري ﻣﻦ اﻟﻜﺎﺋﻨﺎت اﻟﺘﻲ ﻣﺮت ﻣﻌﻨﺎ ﻣﺜﻞ اﻟﻜﺎﺋﻦ ‪ document‬و ﻏريه ﺳﺎﺑﻘﺎ ﺗﻌﻠﻤﻨﺎ ﺗﺨﺰﻳﻦ‬
‫ﻧﺼﻮص او ارﻗﺎم ﰲ ﻣﺘﻐري اﻻن ﻧﺮﻳﺪ ان ﻧﺨﺰن ﻛﺎﺋﻦ ‪ object‬ﰲ ﻣﺘﻐري اﻻﻣﺮ ﺳﻬﻞ ﺟﺪا ﻓﻘﻂ اﺳﺘﺨﺪم‬
‫ﻋﺒﺎرة ‪ new‬و ﺑﻌﺪﻫﺎ اﺳﻢ اﻻوﺑﺠﺖ ﻣﺜﻼ ﻫﻨﺎك ﻛﺎﺋﻦ ﻟﻠﺘﺎرﻳﺦ اﺳﻤﻪ ‪ Date‬اﻧﻈﺮ ﻛﻴﻒ ﺳﺎﺧﺰن ﻫﺬا‬
‫اﻟﻜﺎﺋﻦ ﰲ ﻣﺘﻐري ﺳﺎﺳﻤﻴﻪ ‪d‬‬
‫;)(‪var d = new Date‬‬
‫اﻻن ﺳﺎﺧﺰن ﻛﺎﺋﻦ ﻧﴢ ‪ ()String‬ﰲ ﻣﺘﻐري اﺳﻤﻪ ‪ text_object‬ﻣﺜﻼ اﺳﺘﻤﺘﻊ ﺑﺎﻟﻜﻮد ‪:‬‬
‫>‪<head‬‬
‫;)(‪var text_object = new String‬‬
‫;"‪text_object = "I love Ajax‬‬
‫;)‪alert(text_object‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫اﻟﻜﺎﺋﻦ ‪XMLHttpRequest‬‬
‫اﻧﺖ ﻛﻤﱪﻣﺞ اﺟﺎﻛﺲ اﻟﻜﺎﺋﻦ اﻟﺬي ﻳﻬﻤﻚ ﻫﻮ اﻟﻜﺎﺋﻦ ‪ XMLHttpRequest‬ﺣﻴﺚ ﻳﻔﻴﺪﻧﺎ ﻫﺬا‬
‫اﻟﻜﺎﺋﻦ ﻛﺜريا ﻋﻨﺪﻣﺎ ﻧﺴﺤﺐ ﺑﻴﺎﻧﺎت ﻣﻦ اﻟﺴريﻓﺮ ﴎا )اي ﺑﺪون ﺗﺤﺪﻳﺚ اﻟﺼﻔﺤﺔ( و ﺑﺎﻟﺘﺎﱄ ﻻ ﻳﺸﻌﺮ‬
‫اﳌﺴﺘﺨﺪم ﺑﴚء‬
‫‪ ‬‬
‫اﺳﺘﺨﺪام اﻟﻜﺎﺋﻦ ‪XMLHttpRequest‬‬
‫‪ ‬‬
‫اﻻن ﻻﻧﺸﺎء اﻟﻜﺎﺋﻦ ﻓﻘﻂ اﻛﺘﺐ ﻣﺎﻳﲇ ‪:‬‬
‫; ‪var objact‬‬
‫;)(‪object = new XMLHttpRequest‬‬
‫ﻃﺒﻌﺎ اﻧﺖ ﻏري ﻣﻘﻴﺪ ﺑﺎﻻﺳﻢ اﺧﱰ اي اﺳﻢ ﻳﻌﺠﺒﻚ‬

var Ayman ;
Ayman = new XMLHttpRequest();
: ‫او ﺑﺎﻣﻜﺎﻧﻚ ان ﺗﺴﻤﻴﻪ ﺑﺎي اﺳﻢ ﺗﺮﻳﺪ ﻟﻜﻦ درﺟﺖ اﻟﻌﺎدة ان ﻳﻜﻮن اﺳﻤﻪ‬
var XMLHttpRequestObject;
XMLHttpRequestObject = new XMLHttpRequest();
if ‫ﻋﺒﺎرة‬

‫اﺣﻴﺎﻧﺎ ﺗﺮﻏﺐ ﺑﺎن ﺗﺘﴩط ﻋﲆ اﻟﻨﺎس ﴍوﻃﺎ ﻣﻌﻴﻨﺔ ﻓﻤﺜﻼ ﺗﺮﻳﺪ اﻧﺸﺎ ﺻﻔﺤﺔ ﺗﻄﻠﺐ اﺳﻢ اﳌﺴﺘﺨﺪم ﻓﺎذا‬
‫ﻛﺎن اﺳﻤﻚ ﺳريﺣﺐ ﺑﻚ و اي اﺳﻢ اﺧﺮ ﻟﻦ ﻳﺘﻢ اﻟﱰﺣﻴﺐ ﺑﻪ اﻧﺎ ﺳﺎﺿﻊ اﺳﻤﻲ وﻟﻜﻦ اﻧﺖ ﻻ ﺗﻨﺴﺦ اﻟﻜﻮد‬
: ‫ﺑﻞ ﺿﻊ اﺳﻤﻚ‬
<html>
<head>
<title>Ayman</title>
<script language="javascript">
var name = prompt("","");
if(name == "‫ || "اميﻦ‬name == "ayman" || name == "Ayman")
{
alert("Welcome");
}
else
{
alert("Sorry");
}
</script>
</head>
<body>
</body>
</html>
‫ ﻋﻨﺪﻫﺎ‬Ayman ‫ او‬ayman ‫ اﻻﺳﻢ اميﻦ او‬if ‫اﻟﻜﻮد ﻳﴩح ﻧﻔﺴﻪ اﻧﺎ وﺿﻌﺖ ﴍﻃﺎ اذا ﻛﺎن‬
‫ ارﻳﺪك ان ﺗﺠﺮب وﻟﻜﻦ ﺑﺎﺳﻤﻚ ﻟيك ﺗﺘﻤﺮن ﻋﲆ‬. ‫ اﻇﻬﺮ رﺳﺎﻟﺔ ﺳﻮري‬else ‫اﻇﻬﺮت رﺳﺎﻟﺔ ﺗﺮﺣﻴﺐ واﻻ‬
.‫اﻟﻜﻮد ﻻن اﻟﻨﺴﺦ و اﻟﻠﺼﻖ ﻻ ﻳﺠﺪي ﻧﻔﻌﺎ‬
‫ﻣﻌﺮﻓﺔ اﳌﺘﺼﻔﺢ‬
: ‫ اﻟﴩﻃﻴﺔ‬if ‫ وﻟﻜﻨﻲ ارﻛﺰ اﻻن ﻋﲆ‬navigator.appName ‫و ﻳﺘﻢ ذﻟﻚ ﻋﻦ ﻃﺮﻳﻖ اﻟﻌﺒﺎرة‬
<html dir="rtl">
<head>
var browser = navigator.appName;
function check_borwser()
{
alert("jj");
if (browser == "Microsoft Internet Explorer")
{
document.getElementById("top").innerHTML="‫;"اﻧﺖ ﺗﺴﺘﺨﺪم ﻣﺘﺼﻔﺢ اﻧﱰﻧﺖ اﻛﺴﺒﻠﻮرر‬
}
if(browser == "Netscape")
{
document.getElementById("top").innerHTML="‫ﻳﺒﺪو ان ﻣﺘﺼﻔﺤﻚ ﻫﻮ ﻓﺎﻳﺮﻓﻮﻛﺲ او ﻧﺖ‬
‫;"ﺳﻜﻴﺐ‬
}
}
</script>
<title>ِAyman</title>
</head>
<body onload="check_borwser()">
<h3>
</h3>
</body>
</html>
‫ﺧﻮاص اﻟﻨﺺ‬
. . .‫ﻫﻨﺎك اﻟﻌﺪﻳﺪ ﻣﻦ اﻟﺨﻮاص اﻟﺮاﺋﻌﺔ اﻟﺘﻲ ﺗﻔﻴﺪﻧﺎ ﺑﺎﻗﺘﻄﺎع اﻟﻨﺺ او ﻣﻌﺮﻓﺔ ﻋﺪد اﻟﺤﺮوف‬
length ‫اﻟﺨﺎﺻﻴﺔ‬
:‫ ﻟﻨﺠﺮب ﻣﻌﺎ‬5 ‫ﺗﻌﻄﻴﻚ ﻋﺪد ﺣﺮوف اﻟﻨﺺ ﻣﺜﻼ اﻟﻨﺺ اﺟﺎﻛﺲ ﺳﺘﻌﻄﻴﻚ‬
<html dir="rtl">
<head>
var string = "‫;"اﺟﺎﻛﺲ‬
alert(string.length);
</script>
</head>
<body>
</body>
</html>
indexOf ‫اﻟﺨﺎﺻﻴﺔ‬
‫ و ﺛﺎين‬0 ‫ﺗﺒﺤﺚ ﻋﻦ ﺣﺮف او ﻛﻠﻤﺔ ﺛﻢ ﺗﻌﻄﻴﻚ ﻣﻜﺎن ذﻟﻚ اﻟﺤﺮف ﻓﻤﺜﻼ اذا ﻛﺎن اول ﺣﺮف ﺗﻌﻄﻴﻚ‬
: ‫ وﻫﻜﺬا‬1 ‫ﺣﺮف ﺗﻌﻄﻲ‬
<html dir="rtl">
<head>
var mail = "name@yahoo.com";
alert(mail.indexOf("@")+" @\n"
+mail.indexOf(".")+" .");
</script>
</head>
<body>
</body>
</html>
: ‫( و ﻣﻜﺎن اﻟـ)@( ﻓﻜﺎﻧﺖ اﻟﻨﺘﻴﺠﺔ‬.) ‫ﻃﻠﺒﺖ ﻣﻨﻪ ﻣﻜﺎن اﻟﻨﻘﻄﺔ‬
substr ‫اﻟﺨﺎﺻﻴﺔ‬
‫ﺗﻄﻠﺐ ﻣﻨﻚ ﻫﺬه اﻟﺨﺎﺻﻴﺔ ﻣﻮﺿﻊ اﻟﺤﺮف اﻟﺒﺪاﻳﺔ و ﻣﻮﺿﻊ اﻟﻨﻬﺎﻳﺔ ﺛﻢ ﺗﻘﺘﻄﻊ اﻟﻨﺺ و ﺗﻘﺪم ﻧﺺ ﺟﺪﻳﺪ‬
‫ ﻃﺒﻌﺎ اﻻﺳﻢ ﻫﻨﺎ‬omar@hotmail.com ‫ﻣﺜﻼ ﺗﺮﻳﺪ ان ﺗﻘﺘﻄﻊ اﺳﻢ ﺻﺎﺣﺐ اﻻميﻴﻞ ﻟﻨﻔﺮض‬
: ‫ راﻗﺐ ﻫﺬا اﻟﻜﻮد‬omar

<html dir="rtl">
<head>
var mail = prompt("","");
var at = mail.indexOf("@");
function check_mail()
{
if(at==-1) alert(" ‫;)" ﺿﻊ اميﻴﻠﻚ اﻟﺤﻘﻴﻘﻲ‬
else
{
var name=mail.substr(0,at);
alert(name+" : ‫;)" اﻫﻼ ﺑﻚ‬
}
}
</script>
</head>
<body onLoad="check_mail()">
</body>
</html>

‫اﻟﺘﻜﺮار‬

for ‫اﻟﺤﻠﻘﺔ‬
: ‫ اﱃ ﻣﺌﺔ ﺳﻴﻜﻮن ذﻟﻚ ﺻﻌﺒﺎ ﻣﺎ راﻳﻚ ﺑﻜﻮد ﻳﺴﻬﻞ اﻻﻣﺮ‬1 ‫اذا ارت ﻣﺜﻼ ان ﺗﻜﺘﺐ اﻻﻋﺪاد اﻟﻔﺪرﻳﺔ ﻣﻦ‬
<html dir="rtl">
<head>
var num = 1;
var i = 0;
function loop()
{
for(i=0;num<100;i++)
{
document.write(num+" - ");
num += 2;
}
}
</script>
</head>
<body onLoad="loop()">
</body>
</html>
while ‫اﻟﺤﻠﻘﺔ‬
‫و ﻫﻲ ﺗﻨﻔﺬ ﻣﺎ داﺧﻞ اﻻﻗﻮاس اﳌﺠﻌﺪة }{ ﻃﺎﳌﺎ اﻟﴩط ﺻﺤﻴﺢ و ﻋﻨﺪﻣﺎ ﻳﺼﺒﺢ اﻟﴩط ﺧﺎﻃﺊ ﺗﺘﻮﻗﻒ ﻋﻦ‬
: ‫ اﺻﻐﺮ ﻣﻦ ﻋﴩة متﻌﻦ ﺑﺎﻟﻜﻮد ﺟﻴﺪا‬num ‫اﻟﺘﻨﻔﻴﺬ و اﻟﴩط اﻟﺬي ﺳﺎﺿﻌﻪ ﰲ ﻣﺜﺎﻟﻨﺎ ﻫﻮ ان اﻟﻌﺪد‬

<html dir="rtl">
<head>
var text = "<h3><center> ‫< ﺳﺒﺤﺎن اﻟﻠﻪ و اﻟﺤﻤﺪ ﻟﻠﻪ‬/center><br>";
var num = 0;
while(num<10)
{
document.write(text);
num++
}
</script>
</head>
<body>
</body>
</html>
‫اﳌﺼﻔﻮﻓﺎت‬

‫اﳌﺼﻔﻮﻓﺔ ﻫﻲ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻟﻌﻨﺎﴏ ميﻜﻨﻚ ان ﺗﺨﺰن ﺑﻬﺎ ﻛﻞ اﻧﻮاع اﻟﺒﻴﺎﻧﺎت ﻣﺜﻼ اﳌﺘﻐريات او اﻟﻘﻴﻢ او‬
: ‫اﻟﻜﺎﺋﻨﺎت ﻟﻨﺎﺧﺬ ﻣﺜﺎل ﺑﺴﻴﻂ ﻣﺼﻔﻮﻓﺔ اﺳامء اﺻﺪﻗﺎﺋﻚ‬
var friends = new Array("‫"ﳏﻤﺪ‬,"‫"ﺍﲪﺪ‬,"‫"ﻋﻤﺮ‬,"‫;)"ﺣﺴﲔ‬
‫ﻃﺒﻌﺎ اﳌﺼﻔﻮﻓﺔ ﺗﺒﺪا ﻣﻦ اﻟﺼﻔﺮ ﻓﻌﻨﺪﻣﺎ ﺗﻄﻠﺐ ﻣﻦ اﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ان ﺗﻄﺒﻊ اﻟﻘﻴﻤﺔ ﺻﻔﺮ ﻣﻦ ﻣﺼﻔﻮﻓﺔ‬
‫اﻻﺻﺪﻗﺎء ﺳﺘﻌﻄﻴﻚ ﻣﺤﻤﺪ‬
alert(friends[0]); ‫ﺳﻴﻜﻮن اﻟﻨﺎﺗﺞ ﻣﺤﻤﺪ‬
alert(friends[1]); ‫ﺳﻴﻨﺘﺞ اﺣﻤﺪ‬
alert(friends[2]); ‫ﺳﻴﻨﺘﺞ ﻋﻤﺮ‬
‫ ﻓﻬﻨﺎ ﻟﺪﻳﻚ ارﺑﻊ ﻋﻨﺎﴏ‬length ‫اﻣﺎ اذا اردت ﻋﺪد ﻋﻨﺎﴏ اﳌﺼﻔﻮﻓﺔ اﺳﺘﺨﺪم اﻟﺨﺎﺻﻴﺔ‬
alert(friends.length); 4 ‫ﺳﺘﻌﻄﻴﻚ‬
‫ﻃﺒﺎﻋﺔ ﻋﻨﺎﴏ اﳌﺼﻔﻮﻓﺔ‬
: ‫وﻳﺘﻢ ذﻟﻚ ﺑﺎﺳﺘﺨﺪام اﻟﺤﻠﻘﺔ ﻓﻮر ﻟﻨﺸﺎﻫﺪ اﻟﻜﻮد‬

<html dir="rtl">
<head>
var friends = new Array("‫"ﺣﺴني‬,"‫"ﻋﻤﺮ‬,"‫"اﺣﻤﺪ‬,"‫;)"ﻣﺤﻤﺪ‬
for(i=0;i<friends.length;i++)
{
document.write(friends[i]+"<br>");
}
</script>
</head>
<body>
</body>
</html>
while ‫ﻛام ميﻜﻨﻚ ﻃﺒﺎﻋﺔ ﻋﻨﺎﴏ اﳌﺼﻔﻮﻓﺔ ﺑﺎﺳﺘﺨﺪام ﺣﻠﻘﺔ‬
<html dir="rtl">
<head>
var friends = new Array("‫"ﺣﺴني‬,"‫"ﻋﻤﺮ‬,"‫"اﺣﻤﺪ‬,"‫;)"ﻣﺤﻤﺪ‬
var i = 0 ;
while(i<friends.length)
{
i++;
}
</script>
</head>
<body>
</body>
</html>

: ‫ﻛام ميﻜﻨﻚ اﻧﺸﺎ اﳌﺼﻔﻮﻓﺔ ﺑﻄﺮﻳﻘﺔ ﺛﺎﻧﻴﺔ‬
<html dir="rtl">
<head>
var friends = new Array(4);
friends[0] = "‫;"ﻣﺤﻤﺪ‬
friends[1] = "‫;"اﺣﻤﺪ‬
friends[2] = "‫;"ﻋﻤﺮ‬
friends[3] = "‫;"ﺣﺴني‬
var i = 0 ;
while(i<friends.length)
{
i++;
}
</script>
</head>
<body>
</body>
</html>
‫ و‬1 ‫ و اﻟﺜﺎين‬0 ‫اﺣﻴﺎﻧﺎ ﻳﻠﺰﻣﻨﺎ ان ﻧﻌﺮف رﻗﻢ اﻟﻌﻨﴫ ﰲ اﳌﺼﻔﻮﻓﺔ ﻃﺒﻌﺎ ﻛام ﺗﻌﻠﻢ اﻟﻌﻨﴫ اﻻول رﻗﻤﻪ‬
‫ اﻻن ﻟﻨﺒﺤﺚ ﻋﻦ رﻗﻢ اﻟﻌﻨﴫ ﻋﻤﺮ ﰲ اﳌﺼﻔﻮﻓﺔ‬2 ‫اﻟﺜﺎﻟﺚ رﻗﻤﻪ‬
<html dir="rtl">
<head>
var friends = new Array(4);
friends[0] = "‫;"ﻣﺤﻤﺪ‬
friends[1] = "‫;"اﺣﻤﺪ‬
friends[2] = "‫;"ﻋﻤﺮ‬
friends[3] = "‫;"ﺣﺴني‬
var i = 0 ;
while(i<friends.length && friends[i] != "‫)"ﻋﻤﺮ‬
{
i++;
}
if(i<friends.length) alert("‫ ﻋﻤﺮ ﻫﻮ اﻟﻌﻨﴫ رﻗﻢ‬: "+i);
</script>
</head>
<body>
</body>
</html>
‫اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻨامذج‬

‫اﻧﺎ ﻻ اﺣﺐ اﻟﴩح ﻛﺜريا ﻻﻧﻪ ﻏري ﻣﻔﻴﺪ ﺑﺎﻟﱪﻣﺠﺔ اﻟﺬ ﳾء ﻫﻮ اﻟﺘﻄﺒﻴﻖ اﻟﻌﻤﲇ اول ﺗﻄﺒﻴﻖ ﻋﻤﲇ ﻋﻦ‬
:‫اﻟﻔﻮرم ﺳﺎﻗﺪﻣﻪ ﻟﻚ ﻋﺰﻳﺰي اﳌﺘﺪرب ﻫﻮ ﺑﺮﻧﺎﻣﺞ ﻳﺤﺴﺐ ﻣﺮﺑﻊ اﻟﻌﺪد ﺗﻔﻀﻞ‬

<html dir="rtl">
<head>
function math()
{
var num = document.getElementById("num_id").value;
var sqr = num*num;
document.getElementById("top").innerHTML = " ‫ ﻣﺮﺑﻊ اﻟﻌﺪد اﻟﺬي ادﺧﻠﺘﻪ‬:
"+sqr;
}
</script>
</head>
<body>
<h3>
</h3><br><br><br>
<form name="form1">
‫ﻣﻦ ﻓﻀﻠﻚ ادﺧﻞ رﻗﻢ ﻟﻴﺘﻢ ﺗﺮﺑﻴﻌﻪ‬
<input type="text" id="num_id">
<input type="button" onClick="math()" value="send">
</form>
</body>
</html>
: ‫و اﻻن ﺳﻨﻄﻠﺐ ﻣﻦ اﳌﺴﺘﺨﺪم ﻛﺘﺎﺑﺔ اﺳﻤﻪ ﻟﺘﻈﻬﺮ ﺟﻤﻠﺔ ﺗﺮﺣﺐ ﺑﻪ‬
<html dir="rtl">
<head>
function show()
{
var string = document.getElementById("text_id").value;
document.getElementById("top").innerHTML = " ‫" اﻫﻼ ﺑﻚ‬+string;
}
</script>
</head>
<body>
<h3>
</h3><br><br><br>
<form name="form1">
‫اﻻﺳﻢ اﻟﻜﺮﻳﻢ ﻣﻦ ﻓﻀﻠﻚ‬
<input type="text" name="user_name" id="text_id"/>
<input type="button" onClick="show()" value="send">
</form>
</body>
</html>
: ‫وﻟﻜﻦ ﻛﻴﻒ متﻜﻨﻨﺎ ﻣﻦ ﺟﻠﺐ اﻻﺳﻢ؟ اﻧﺘﺒﻪ اﱃ اﻟﺤﻘﻞ اﻟﻨﴢ اﻟﺬي ﻳﺤﻤﻞ اﻻﻳﺪي‬
<input type="text" name="user_name" id="text_id"/>
:‫و ﻃﺎﳌﺎ ﻋﺮﻓﻨﺎ اﻻﻳﺪي ﺧﺰﻧﻨﺎ ﻫﺬا اﻟﻨﺺ ﰲ ﻣﺘﻐري اﺳﻤﻴﻨﺎه ﺳﱰﻳﻨﻎ‬
var string =
document.getElementById("text_id").value;
‫ﻛام ميﻜﻨﻨﺎ ﺟﻠﺐ اﳌﻌﻠﻮﻣﺎت اﻟﺘﻲ ﻳﻜﺘﺒﻬﺎ اﳌﺴﺘﺨﺪم ﺑﻄﺮﻳﻘﺔ ﺛﺎﻧﻴﺔ ﻋﻦ ﻃﺮﻳﻖ اﺳﻢ اﻟﻔﻮرم و اﺳﻢ اﻟﺤﻘﻞ‬
: ‫ﺷﺎﻫﺪ اﻟﻜﻮد‬

<html dir="rtl">
<head>
function show()
{
var string = form1.user_name.value;
document.getElementById("top").innerHTML = " ‫" اﻫﻼ ﺑﻚ‬+string;
}
</script>
</head>
<body>
<h3>
</h3><br><br><br>
<form name="form1">
‫اﻻﺳﻢ اﻟﻜﺮﻳﻢ ﻣﻦ ﻓﻀﻠﻚ‬
<input type="text" name="user_name"/>
<input type="button" onClick="show()" value="send">
</form>
</body>
</html>

‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫اﻟﻔﺼﻞ اﻟﺜﺎين اﺟﺎﻛﺲ‬

‫‪ ‬‬
‫‪ ‬‬
‫و اﺧريا وﺻﻠﻨﺎ اﱃ ﻣﺒﺘﻐﺎﻧﺎ ﺑﻔﻀﻞ اﻟﻠﻪ ‪ ,‬متﻜﻨﻚ ﺗﻘﻨﻴﺔ اﺟﺎﻛﺲ ﻣﻦ ﺟﻠﺐ اﳌﻌﻠﻮﻣﺎت ﺳﻮاء ﻛﺎﻧﺖ ﻧﺼﻴﺔ او‬
‫اﻛﺲ ام ال ﺑﺪون ﺗﺤﺪﻳﺚ اﻟﺼﻔﺤﺔ و ﺑﺪون ان ﻳﻼﺣﻆ اﳌﺴﺘﺨﺪم ان اﻟﺼﻔﺤﺔ اﺗﺼﻠﺖ ﺑﺎﻟﺴريﻓﺮ و ﻫﺬا ﻣﺎ‬
‫ﻳﺠﻌﻞ ﺑﺮﻣﺠﻴﺎﺗﻚ ﻣﺘﻤﻴﺰة ﻋﻦ اﻟﺘﻄﺒﻴﻘﺎت اﻻﺧﺮى ﻓﺎﳌﱪﻣﺞ اﻟﺬذي ﻳﺴﺘﺨﺪم ﺗﻘﻨﻴﺔ اﻻﺟﺎﻛﺲ ﰲ ﺳﻜﺮﺑﺘﺎﺗﻪ‬
‫ﻳﻌﺘﱪ ﻣﱪﻣﺞ ﻣﺤﱰف‬
‫‪ ‬‬
‫اﻟﻜﺎﺋﻦ ‪XMLHttpRequest‬‬
‫ﺣﺴﻨﺎ اﻻن ﻛﻠﻨﺎ ﻋﺮﻓﻨﺎ اﻻﺟﺎﻛﺲ ﺗﻘﻨﻴﺔ راﺋﻌﺔ وﻟﻜﻦ ﻛﻴﻒ ﺗﻘﻮم اﻻﺟﺎﻛﺲ ﺑﺴﺤﺐ ﺑﻴﺎﻧﺎت ﻣﻦ اﻟﺴريﻓﺮ و‬
‫ﻋﺮﺿﻬﺎ ﺑﺎﻟﺼﻔﺤﺔ ﺑﺪون اﻋﺎدة ﺗﺤﻤﻴﻞ اﻟﺼﻔﺤﺔ ؟ اﻟﺤﻘﻴﻘﺔ ان ذﻟﻚ ﻳﺘﻢ ﺑﺎﺳﺘﺨﺪام اﻟﻜﺎﺋﻦ‬
‫‪ XMLHttpRequestObject‬و ﻫﺬا اﻟﻜﺎﺋﻦ ﻟﺪﻳﻪ اﻟﻌﺪﻳﺪ ﻣﻦ اﻟﺨﻮاص اﳌﻔﻴﺪة اﻟﺘﻲ ﺳﻨﺎيت‬
‫ﻋﲆ ذﻛﺮﻫﺎ ﻻﺣﻘﺎ و اﻻن ﻟﻨﻨﺸﺊ ﻫﺬا اﻟﻜﺎﺋﻦ و ﺧﺰﻧﻪ ﰲ ﻣﺘﻐري و ﻟﻴﻜﻦ اﺳﻤﻪ ‪ajax‬‬
‫‪ ‬‬
‫>‪<head‬‬
‫;‪var ajax = false‬‬
‫)‪if(window.XMLHttpRequest‬‬
‫{‬
‫;)(‪ajax = new XMLHttpRequest‬‬
‫;)‪ :\n" +ajax‬ﺑﻔﻀﻞ اﻟﻠﻪ ﺗﻢ اﻧﺸﺎء اﻟﻜﺎﺋﻦ ﺑﻨﺠﺎح"(‪alert‬‬
‫}‬
‫‪else‬‬
‫{‬
‫;)"ﻣﺘﺼﻔﺤﻚ ﻻ ﻳﺪﻋﻢ ﻫﺬا اﻟﻜﺎﺋﻦ"(‪alert‬‬
‫}‬
‫>‪ </title‬ﺑﺪأﻧﺎ ﺑﺎﻻﺟﺎﻛﺲ>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫و اﻻن ﻟﻨﺠﺮﺑﻪ ﻋﲆ اﻟﻔﺎﻳﺮﻓﻮﻛﺲ‬
‫‪ ‬‬
‫اذا ﻛام راﻳﺖ اﻧﺸﺎء اﻟﻜﺎﺋﻦ ﺳﻬﻞ ﺟﺪا ﻓﻘﻂ اﻛﺘﺐ اﻟﻌﺒﺎرة‬
‫‪ ‬‬
‫ ﻟﻠﺘﺤﻘﻖ ﻣﻦ ان اﳌﺘﺼﻔﺢ ﻳﺪﻋﻢ اﻧﺸﺎء اﻟﻜﺎﺋﻦ‬if(window.XMLHttpRequest): ‫اﻣﺎ ﻫﺬا‬
‫اﻟﺴﻄﺮ اﻟﺬي ﻳﺤﻮي اﻟﴩط‬
‫ اﻻن ﺳﺎﺿﻊ ﻛﻮد ﻛﺎﻣﻞ ﻳﺴﺤﺐ اﻟﺒﻴﺎﻧﺎت ﻣﻦ‬ajax ‫اﻻن اﺻﺒﺢ اﻟﻜﺎﺋﻦ ﺟﺎﻫﺰ و ﻣﺨﺰن ﰲ ﻣﺘﻐري اﺳﻤﻪ‬
‫ ﻻ ﺗﻨﺰﻋﺞ ﻣﻦ ﻃﻮل اﻟﻜﻮد ﻻﻧﻨﻲ ﺳﺎﺣﻠﻠﻪ ﺗﺤﺖ‬, ‫اﻟﺴريﻓﺮ ﺑﻄﺮﻳﻘﺔ ﺳﻬﻠﺔ و ﺑﺎﺳﺘﺨﺪام ﺗﻘﻨﻴﺔ اﻻﺟﺎﻛﺲ‬
:‫اﳌﺠﻬﺮ و ﺳﺎﴍﺣﻪ ﻟﻚ ﺳﻄﺮا ﺳﻄﺮا ﺗﻔﻀﻞ اﻗﺮأ اﻟﻜﻮد اوﻻ ﺛﻢ اﻟﴩح‬

<html dir="rtl">
<head>
var ajax = false
ajax = new XMLHttpRequest();
//_______________________________________________
function grab_data(data_sourse,div_id)
{
if(ajax)
{
var ob = document.getElementById(div_id);
ajax.open("get",data_sourse);
ajax.onreadystatechange = function()
// start new function body
{
if(ajax.readyState == 4 && ajax.status == 200)

{
ob.innerHTML = ajax.responseText;
}
}
// End new function body
ajax.send(null);
}
}
//__________________________________
</script>
<title>‫< ﺑﺪأﻧﺎ ﺑﺎﻻﺟﺎﻛﺲ‬/title>
</head>
<body>
<br><br><br><br>
<form>
<input type="button" value=" ‫" اﺿﻐﻂ ﻫﻨﺎ‬
onClick="grab_data('file.txt','left_div')"/>
</form>
<h2>
<div align="left" id="left_div"> ‫< ﻫﺬا اﻟﻨﺺ ﺳﻴﺘﺒﺨﺮ مبﺠﺮد اﻟﻀﻐﻂ ﻋﲆ اﻟﺰر‬/div>
</h2>
</body>
</html>
: ‫و مبﺠﺮد اﻟﻀﻐﻂ ﻋﲆ اﻟﺰر ﺳﻴﻈﻬﺮ اﻟﻨﺺ اﻟﺠﺪﻳﺪ اﳌﺨﺰن ﰲ اﳌﻠﻒ‬
file.txt ‫ﻛام ﺗﺮى ﺗﻢ اﺳﺘﺒﺪال اﻟﻨﺺ اﻟﻘﺪﻳﻢ ﺑﻨﺺ ﺟﺪﻳﺪ ﻣﻜﺘﻮب مبﻠﻒ اﺳﻤﻪ‬
: ‫ و ﻣﻠﻒ اﻟﺬي ﻳﺤﻮي ﻛﻮد اﻻﺟﺎﻛﺲ ﺑﻨﻔﺲ اﳌﺠﻠﺪ‬file.txt ‫وﻳﺠﺐ ان ﺗﻀﻊ اﳌﻠﻒ اﻟﻨﴢ‬
‫‪ ‬‬
‫رمبﺎ ﺗﻘﻮل ﻣﺎ اﻟﺠﺪﻳﺪ ﰲ ذﻟﻚ ﻓﻘﻂ ﻋﺮﺿﻨﺎ ﻧﺺ؟ ﻻ ﻃﺒﻌﺎ اﻧﺖ اﻻن ﺳﺤﺒﺖ ﻣﻌﻠﻮﻣﺎت ﻣﻦ اﻟﺴريﻓﺮ ﺑﺘﻘﻨﻴﺔ‬
‫اﻻﺟﺎﻛﺲ ﺑﺪون ﺗﺤﺪﻳﺚ اﻟﺼﻔﺤﺔ اﻻن ﻟﻨﺤﻠﻞ اﻟﻜﻮد ﺑﺴﻢ اﻟﻠﻪ و ﻟﻨﺒﺪأ ﺑﺎﻟﺒﻮدي ﻗﺒﻞ اﻟﻬﻴﺪ ﻻﻧﻪ اﻻﺳﻬﻞ‪ ,‬اوﻻ‬
‫ﻧﺮى اﻟﻨﺺ اﻻﺻﲇ ﻣﺨﺰن ﰲ ‪ div‬ﻃﺒﻌﺎ ﻫﺬا اﻟﻨﺺ ﺳﻴﻄري و ﻳﺘﻢ اﺳﺘﺒﺪاﻟﻪ ﻟﻜﻦ اﳌﻬﻢ ان ﻫﺬه اﻟـ ‪div‬‬
‫ﺗﺤﻤﻞ اﻻﺳﻢ ‪: left_div‬‬
‫‪ ‬‬
‫>‪<body‬‬
‫>‪<br><br><br><br‬‬
‫>‪<form‬‬
‫" اﺿﻐﻂ ﻫﻨﺎ "=‪<input type="button" value‬‬
‫>‪onClick="grab_data('file.txt','left_div')"/‬‬
‫>‪</form‬‬
‫>‪<h2‬‬
‫>‪ </div‬ﻫﺬا اﻟﻨﺺ ﺳﻴﺘﺒﺨﺮ مبﺠﺮد اﻟﻀﻐﻂ ﻋﲆ اﻟﺰر >"‪<div align="left" id="left_div‬‬
‫>‪</h2‬‬
‫>‪</body‬‬
‫و ﻫﻨﺎك اﻳﻀﺎ زر ﻣﻬﻤﺘﻪ ان ﻳﺴﺘﺒﺪل اﻟﻨﺺ اﻟﻘﺪﻳﻢ ﺑﺎﺧﺮ ﺟﺪﻳﺪ ﺣﻴﺚ اﺳﺘﺨﺪﻣﻨﺎ اﻟﺤﺪث اون ﻛﻠﻴﻚ و‬
‫اﻟﻔﻨﻜﺸﻦ ‪ grab_data‬اي ان اﻟﻔﻨﻜﺸﻦ ﺳﻴﺘﻢ اﺳﺘﺪﻋﺎﺋﻬﺎ اذا ﺿﻐﻂ اﳌﺴﺘﺨﺪم ﻋﲆ اﻟﺰر و ﻣﺮرﻧﺎ‬
‫ﻗﻴﻤﺘني ﻟﻬﺬه اﻟﻔﻨﻜﺸﻦ اول ﻗﻴﻤﺔ ﻫﻲ اﺳﻢ اﳌﻠﻒ ‪file.txt‬و اﻟﺜﺎﻧﻴﺔ اﺳﻢ اﻟـ ‪ div‬و ﻫﻲ‬
‫‪:left_div‬‬
‫‪ ‬‬
‫>‪<body‬‬
‫>‪<br><br><br><br‬‬
‫>‪<form‬‬
‫" اﺿﻐﻂ ﻫﻨﺎ "=‪<input type="button" value‬‬
‫>‪onClick="grab_data('file.txt','left_div')"/‬‬
‫>‪</form‬‬
‫>‪<h2‬‬
‫>‪ </div‬ﻫﺬا اﻟﻨﺺ ﺳﻴﺘﺒﺨﺮ مبﺠﺮد اﻟﻀﻐﻂ ﻋﲆ اﻟﺰر >"‪<div align="left" id="left_div‬‬
‫>‪</h2‬‬
‫>‪</body‬‬
‫و ارﻳﺪ ان اﺣﺬرك ﻣﻦ ﺧﻄﺄ ﺑﺴﻴﻂ ﻟﻜﻨﻪ ﺧﻄري و ﻳﻘﻊ ﻓﻴﻪ اﻗﻮى اﳌﱪﻣﺠني ﺑﺴﺒﺐ اﻟﴪﻋﺔ ﻓﺎﻳﺎك ان ﺗﻜﺘﺐ‬
‫اﻟﺴﻄﺮ اﻟﺴﺎﺑﻖ ﺑﻬﺬه اﻟﻄﺮﻳﻘﺔ‬
‫ﺧﻄﺎ >‪onclick="grab_data("file.txt","left")" /‬‬
‫ﺻﺢ >‪onClick="grab_data('file.txt','left_div')"/‬‬
‫و اﻻن ﻟﻨﻨﺘﻘﻞ اﻟﻘﺴﻢ ﻫﻴﺪ ﻗﺒﻞ ان ﻧﺒﺪا اﻟﻔﻨﻜﺸﻦ ﻧﺮﻳﺪ اﻧﺸﺎء اﻟﻜﺎﺋﻦ ﺑﻜﻞ ﺳﻬﻮﻟﺔ ﻛام ﺗﻌﻠﻤﻨﺎ ‪:‬‬
‫‪ ‬‬
‫‪var ajax = false‬‬
‫اﻣﺎ ﳌﺎذا ﺧﺰﻧﻨﺎ اﻟﻘﻴﻤﺔ اﻟﺒﻮﻟﻮﻧﻴﺔ ‪ false‬ﺑﻬﺬا اﻟﻜﺎﺋﻦ ﻟيك ﻧﺘﺤﻘﻖ ﻓﻴام ﺑﻌﺪ ﻫﻞ ﺗﻢ اﻧﺸﺎؤه ﺑﻨﺠﺎح ‪.‬‬
‫اﻻن و ﺑﻌﺪ ان اﺻﺒﺢ اﻟﻜﺎﺋﻦ ﺟﺎﻫﺰ ﻛﻴﻒ ﻧﻘﻮم ﺑﺠﻠﺐ اﻟﺒﻴﺎﻧﺎت ﻣﻦ اﻟﺴريﻓﺮ ﻻ ﺑﺪ ﻣﻦ ﺻﻨﺎﻋﺔ ﻓﻨﻜﺸﻦ ﻣﺎ‬
‫راﻳﻚ ان ﻧﺴﻤﻴﻬﺎ ‪ grab_data‬و ﺳﻨﻤﺮر ﻟﻬﺎ ﻣﻌﺎﻣﻠني اﻻول اﺳﻢ اﳌﻠﻒ ‪ data_sourse‬اﻣﺎ‬
‫اﳌﻌﺎﻣﻞ اﻟﺜﺎين ﻓﻬﻮ ‪: div_id‬‬
‫)‪function grab_data(data_sourse,div_id‬‬
‫اول ﻣﺎ ﺳﻨﻜﺘﺒﻪ ﰲ ﻫﺬه اﻟﻔﻨﻜﺸﻦ ﻫﻮ اﻟﺘﺤﻘﻖ ﻣﻦ ان اﳌﺘﻐري ‪ ajax‬ﻫﻞ ﻳﺤﻤﻞ ﻓﻌﻼ‬

‫اﻟﻜﺎﺋﻦ‪ XMLHttpRequest‬او مبﻌﻨﻰ اﺧﺮ ﻫﻞ ﺗﻢ اﻧﺸﺎء اﻟﻜﺎﺋﻦ ﺑﻨﺠﺎح ﻓﻼ ﺑﺪ ﻣﻦ ﻋﺒﺎرة ‪if‬‬
‫اﻟﴩﻃﻴﺔ ‪:‬‬
‫{‬
‫)‪if(ajax‬‬
‫{‬
‫‪-‬‬
‫‪-‬‬
‫‪-‬‬
‫}‬
‫اﻟﺴﻄﺮ اﻟﺘﺎﱄ ﺳﻬﻞ ﺟﺪا و ﻣﺮ ﻣﻌﻨﺎ ﺑﺎﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ ﻋﴩات اﳌﺮات ‪:‬‬
‫;)‪var ob = document.getElementById(div_id‬‬
‫اﻻن وﺻﻠﻨﺎ اﻟﺤﺰء اﳌﻬﻢ ﻟﺪﻳﻨﺎ ﺧﺎﺻﻴﺔ ﻣﻔﻴﺪة ﺟﺪا ﺗﺴﺘﺨﺪم ﻣﻊ ﻫﺬا اﻟﻜﺎﺋﻦ و اﻟﺨﺎﺻﻴﺔ ‪ open‬ﺣﻴﺚ‬
‫منﺮر ﻟﻬﺬا اﻟﺨﺎﺻﻴﺔ ﻣﻌﺎﻣﻠني او ﺑﺎراﻣﱰﻳﻦ اﻟﺒﺎراﻣﻴﱰ اﻻول ميﺜﻞ اﻟﻄﺮﻳﻘﺔ اﻟﺘﻲ ﺳﺘﺴﺤﻲ ﺑﻬﺎ اﻟﺒﻴﺎﻧﺎت ﻫﻞ ﻫﻲ‬
‫‪ GET‬ام ‪ POST‬اﻣﺎ اﻟﺒﺎراﻣﻴﱰ اﻟﺜﺎين ﻧﻀﻊ ﻓﻴﻪ اﺳﻢ او ﻣﺴﺎر اﳌﻠﻒ ‪data_sourse‬‬
‫ﻟيك ﻻ ﺗﺤﺘﺎر ﺳﺎﺧﱪك ﺑﺎﻟﴪ ﻋﻨﺪﻣﺎ ﺗﺴﺘﻘﺒﻞ ﺑﻴﺎﻧﺎت ﻣﻦ اﻟﺴريﻓﺮ اﺳﺘﺨﺪم ‪ GET‬اﻣﺎ اذا اردت ان ﺗﺮﺳﻞ‬
‫ﺑﻴﺎﻧﺎت اﺳﺘﺨﺪم ‪: POST‬‬
‫‪ ‬‬
‫;)‪ajax.open("get",data_sourse‬‬
‫و ﻫﺬا اﻟﻜﺎﺋﻦ ﻟﺪﻳﻪ ﺧﺎﺻﻴﺔ ﺗﺮاﻗﺐ ﺣﺎﻟﺔ اﻟﻜﺎﺋﻦ ‪ XMLHttpRequest‬ﺗﺪﻋﻰ‪:‬‬

‫‪ onreadystatechange‬ﻋﻨﺪﻣﺎ ﺗﺴﻨﺪ ﻫﺬه اﻟﺨﺎﺻﻴﺔ ﻟﻔﻨﻜﺸﻦ ﺑﺎﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﻓﺴﻴﺘﻢ‬
‫اﺳﺘﺪﻋﺎء ﺗﻠﻚ اﻟﻔﻨﻜﺸﻦ ﰲ ﻛﻞ ﻣﺮة ﺗﺘﻐري ﺣﺎﻟﺔ اﻟﻜﺎﺋﻦ ﻓﻤﺜﻼ ﻋﻨﺪ ارﺳﺎل ﺑﻴﺎﻧﺎت ﺗﺘﻐري ﺣﺎﻟﺔ اﻟﻜﺎﺋﻦ و ﻛﺬﻟﻚ‬
‫ﻋﻨﺪﻣﺎ ﺗﺴﺤﺐ ﺑﻴﺎﻧﺎت ﺗﺘﻐري ﺣﺎﻟﺔ ﻫﺬا اﻟﻜﺎﺋﻦ و ﺑﺎﻟﺘﺎﱄ ﻳﺘﻢ اﺳﺘﺪﻋﺎء اﻟﻔﻨﻜﺸﻦ ‪ .‬ﻧﺤﻦ ﺗﻌﻮدﻧﺎ ان ﻧﺼﻨﻊ‬
‫اﻟﻔﻨﻜﺸﻦ ﺑﻬﺬه اﻟﻄﺮﻳﻘﺔ‬
‫)(‪function fun_name‬‬
‫{‬
‫‪-‬‬
‫‪-‬‬
‫}‬
‫اي ﻧﻜﺘﺐ ﻛﻠﻤﺔ ‪ function‬ﺛﻢ اﻻﺳﻢ اﻟﺬي ﻧﺨﺘﺎره ﻧﺤﻦ اﻣﺎ اﻻن ﻓﺴﻨﺼﻨﻊ ﻓﻨﻜﺸﻦ ﺑﺪون اﺳﻢ ﻳﻄﻠﻖ‬
‫ﻋﻠﻴﻬﺎ اﳌﱪﻣﺠﻮن اﺳﻢ اﻟﻔﻨﻜﺸﻦ اﳌﺠﻬﻮﻟﺔ ﻻﻧﻬﺎ ﺑﺪون اﺳﻢ‪:‬‬
‫‪ ‬‬
‫{‬
‫)‪if(ajax‬‬
{
{
-
-
}
-
-
}
onreadystatechange ‫اﻻن و ﺑﻌﺪ اﻧﺎ ﺻﻨﻌﻨﺎ اﻟﻔﻨﻜﺸﻦ اﳌﺠﻬﻮﻟﺔ و اﺳﻨﺪﻧﺎ اﻟﻴﻬﺎ ﺧﺎﺻﻴﺔ‬
‫ﺳﻨﻜﺘﺐ ﺟﺴﻢ اﻟﻔﻨﻜﺸﻦ اﻟﺠﺪﻳﺪة ﺳﻴﺤﺘﻮي ﺟﺴﻢ اﻟﻔﻨﻜﺸﻦ اﻟﺠﺪﻳﺪة ﻋﲆ ﴍﻃني و ﺑﻌﺪ ﺗﺤﻘﻖ ﻫﺬﻳﻦ‬
: ‫اﻟﴩﻃني ﺳﻴﺘﻢ اﺳﺘﻘﺒﺎل اﻟﺒﻴﺎﻧﺎت‬

{
if(ajax)
{
{
{
}
}
ajax.send(null);
}
}
‫ ﻫﺬه‬readyState‫ دﻋﻨﻲ اﴍح ﻟﻚ اﻟﺨﺎﺻﻴﺔ‬ajax.readyState == 4 ‫اﻟﴩط اﻻول‬

‫اﻟﺨﺎﺻﻴﺔ ﺗﺨﱪك ﻋﻦ ﻣﺪى اﻛﺘامل ﺗﺤﻤﻴﻞ اﻟﺒﻴﺎﻧﺎت ﻓﺮمبﺎ اﻧﺖ ﺗﺤﻤﻞ ﺻﻮر ﺿﺨﻤﺔ و ﺗﺎﺧﺬ ﻫﺬه اﻟﺨﺎﺻﻴﺔ‬
:‫اﻟﻘﻴﻢ اﻟﺘﺎﻟﻴﺔ‬
0 uninitialized
1 loading
2 loaded
3 interactive
4 complete
‫ ﻓﻬﺬا ﻳﻌﻨﻲ‬4 ‫ ﺗﺴﺎوي‬readyState ‫ اي ﻋﻨﺪﻣﺎ ﺗﻜﻮن ﻗﻴﻤﺔ‬complete 4 ‫اﻟﺬي ﻳﻬﻤﻨﺎ ﻫﻮ‬

.‫ان اﻟﺘﺤﻤﻴﻞ ﻗﺪ ﺗﻢ‬
ajax.status == 200: ‫اﻣﺎ اﻟﴩط اﻟﺜﺎين‬
: ‫ و ﺗﺎﺧﺬ اﻟﻘﻴﻢ اﻟﺘﺎﻟﺒﺔ‬XMLHttpRequest ‫ اﻳﻀﺎ اﺣﺪ ﺧﻮاص اﻟﻜﺎﺋﻦ‬status ‫اﻟﺨﺎﺻﻴﺔ‬
200 OK
201 Created
204 No Content
205 Reset Content
206 Partial Content
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
411 Length Required
413 Requested Entity Too Large
414 Requested URL Too Long
415 Unsupported Media Type
500 Internal Server Error
501Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported
‫ ﻓﻬﺬا ﻳﻌﻨﻲ ان ﻛﻞ ﳾ متﺎم اﻟﺘامم ﻛام ﻳﻘﻮﻟﻮن ﺑﺎﻟﻠﻬﺠﺔ‬200‫ اﻟﻘﻴﻤﺔ‬status ‫ﻓﻌﻨﺪﻣﺎ ﺗﺤﻤﻞ اﻟﺨﺎﺻﻴﺔ‬
‫اﳌﴫﻳﺔ‬
‫اﻻن اﺻﺒﺤﺖ اﻟﺒﻴﺎﻧﺎت ﺟﺎﻫﺰة متﺎﻣﺎ مل ﻳﺒﻘﻰ اﻻ ان ﻧﺴﺘﻘﺒﻠﻬﺎ و ﺛﻢ ﻧﻌﺮﺿﻬﺎ ﰲ اﻟﺼﻔﺤﺔ‬
‫اﺳﺘﻘﺒﺎل اﻟﺒﻴﺎﻧﺎت‬
responseText ‫اذا ﻛﻨﺖ ﺗﺴﺘﻘﺒﻞ ﺑﻴﺎﻧﺎت ﻧﺼﻴﺔ اﺳﺘﺨﺪم اﻟﺨﺎﺻﻴﺔ‬

responseXML ‫ اﺳﺘﺨﺪم اﻟﺨﺎﺻﻴﺔ‬XML ‫اﻣﺎ اذا ﻛﻨﺖ ﺗﺴﺘﻘﺒﻞ ﺑﻴﺎﻧﺎت‬
:‫ ﻛﺎﻟﺘﺎﱄ‬responseText ‫و مبﺎ اﻧﻚ ﺗﺴﺘﻘﺒﻞ ﺑﻴﺎﻧﺎت ﻧﺼﻴﺔ ﰲ ﻣﺜﺎﻟﻨﺎ ﻫﻨﺎ ﻃﺒﻌﺎ ﺳﺘﺴﺘﺨﺪم‬

{
if(ajax)
{
{
{
}
}
ajax.send(null);
}
}
‫اﻻن وﺻﻞ ﺳﺎﻋﻲ اﻟﱪﻳﺪ و ﻳﻄﺮق ﺑﺎﺑﻚ ﻟﺘﺴﺘﻠﻢ اﻟﻄﺮد اﻟﱪﻳﺪي مل ﻳﺒﻖ اﻻ ان ﺗﻔﺘﺢ اﻟﺒﺎب و ﺗﺴﺘﻠﻢ ﺗﻠﻚ‬
‫ ﻓﺎذا ﻛﻨﺖ ﻗﺪ‬send ‫ اﻟﺨﻄﻮة اﻻﺧرية و اﻟﺘﻲ ﺷﺒﻬﺘﻬﺎ ﻟﻚ ﺑﻔﺘﺢ اﻟﺒﺎب ﻫﻲ اﻟﺨﺎﺻﻴﺔ‬. ‫اﻟﺒﻴﺎﻧﺎت‬
‫ اﻣﺎ ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ ارﺳﺎل ﺑﻴﺎﻧﺎت ﺑﺎﻟﻄﺮﻳﻘﺔ ﺑﻮﺳﺖ ﻋﻨﺪﻫﺎ‬null ‫اﺳﺘﺨﺪﻣﺖ اﻟﻄﺮﻳﻘﺔ ﺟﻴﺖ ﻣﺮر ﻟﻬﺎ اﻟﻘﻴﻤﺔ‬
:‫ﻣﺮر ﻟﻬﺎ ﻗﻴﻤﺔ ﻧﺼﻴﺔ اﻧﻈﺮ ﻛﻴﻒ ﺗﺴﺘﺨﺪم ﻫﺬه اﻟﺨﺎﺻﻴﺔ‬

{
if(ajax)
{
{
{
}
}
ajax.send(null);
}
}
‫ﻣﱪووووووووووووووك اﻻن ﺗﺴﺘﻄﻴﻊ ان ﺗﻘﻮل ﺑﺎﻋﲆ ﺻﻮﺗﻚ اﻧﺎ ﻣﱪﻣﺞ اﺟﺎﻛﺲ ﻃﺎﳌﺎ اﻧﻬﻴﺖ ﻫﺬا اﻟﻜﻮد ﻟﻦ‬
‫ﻳﺼﻌﺐ ﻋﻠﻴﻚ ﳾء ان ﺷﺎء اﻟﻠﻪ‬
‫ﺗﻄﺒﻴﻖ اﺧﺮ‬
‫ﻛرثة اﻻﻣﺜﻠﺔ و اﻟﺘﻄﺒﻴﻘﺎت ﻋﻨﺪﻣﺎ ﺗﺠﺮب و ﺗﻜﺘﺐ اﻟﻜﻮد ﺑﻴﺪك ﺑﺪون ﻧﺴﺦ و ﻟﺼﻖ ﻫﻮ ﻣﺎ ﻳﺠﻌﻠﻚ ﻣﱪﻣﺞ‬
‫ﻣﺤﱰف اﻻن ﺳﻨﻜﺘﺐ ﻣﻌﺎ ﺳﻜﺮﺑﺖ اﻋﺘامدا ﻋﻞ ﻧﻔﺲ اﻟﺪاﻟﺔ و ﻟﻜﻦ اﻻن ﻟﺪي ﺛﻼﺛﺔ ﻣﻠﻔﺎت ﻧﺼﻴﺔ و ﻛﻞ‬
‫ﻣﻠﻒ ﻣﺨﺼﺺ ﻟﻴﺘﻢ ﻋﺮﺿﻪ ﻛﴩح ﻣﻮﺟﺰ ﻟﻼﺳﻢ اﻟﺬي متﺮ ﻓﻮﻗﻪ اﳌﺎوس ﻣﺜﻼ ﻋﻨﺪ ﻣﺮور اﳌﺎوس ﻓﻮق ﻛﻠﻤﺔ‬
Help you to fetch data: ‫ﺗﻘﻨﻴﺔاﻻﺟﺎﻛﺲ ﻓﺴﻮف ﻳﻈﻬﺮ ﴍح ﻟﻬﺬه اﻟﺘﻘﻨﻴﺔ ﺑﺎﻻﻧﻜﻠﻴﺰي‬
‫ و ﻫﻜﺬا اﻻن ﻧﺤﺘﺎج اﱃ‬from the server without reloading the page
: ‫ﺛﻼﺛﺔ ﻣﻠﻔﺎت ﻧﺼﻴﺔ ﺿﻌﻬﺎ ﺑﻨﻔﺲ اﳌﺠﻠﺪ‬
: ‫و ﰲ ﻛﻞ ﻣﻠﻒ اﻛﺘﺐ ﴍح ﻣﺨﺘﴫ‬
: ‫اﻻن مل ﻳﺒﻖ ﻋﻠﻴﻨﺎ اﻻ اﻟﻜﻮد ﺗﻔﻀﻞ‬

<html dir="rtl">
<head>
var ajax = false;
//_______________
{
if(ajax)
{
ajax.onreadystatechange = function ()
// start new function
{
{
}
}
// End new function
ajax.send(null);
}
}
//_______________
</script>
<title>Ayman for programming</title>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="3"
cellspacing="3">
<tr>
<td width="33%" align="center"
onmouseover="grab_data('ajax.txt','details')"><h1>‫ﺗﻘﻨﻴﺔ اﻻﺟﺎﻛﺲ‬
</h1></td>
onmouseover="grab_data('css.txt','details')"><h1>CSS </h1></td>
onmouseover="grab_data('php.txt','details')"><h1>php</h1></td>
</tr>
</table>
<p> </p><font size="4" color="#993300">
<div id="details" dir="ltr"></div>
</font>
</body>
</html>
‫ ﻟيك ﻳﺘﻢ ﴍح‬onmouseover ‫ﻟﻴﺲ ﻫﻨﺎك ﺟﺪﻳﺪ ﺳﻮى اﻧﻨﺎ اﻧﺸﺎﻧﺎ ﺟﺪول ﺛﻢ وﺿﻌﻨﺎ اﻟﺤﺪث‬
: ‫اﻟﻜﻠﻤﺔ اﻟﺘﻲ متﺮ اﳌﺎوس ﻓﻮﻗﻬﺎ‬
onmouseover="grab_data('ajax.txt','details')"
‫و اﻟﺠﺪﻳﺪ اﻳﻀﺎ ﻫﻨﺎ اﻧﻨﺎ ﻧﺎﺧﺬ اﻟﺒﻴﺎﻧﺎت ﻣﻦ ﺛﻼﺛﺔ ﻣﻠﻔﺎت ﻧﺼﻴﺔ و ﻟﻴﺲ ﻣﻠﻒ واﺣﺪ‬
"grab_data('ajax.txt','details')"
"grab_data('css.txt','details')"
"grab_data('php.txt','details')"
: ‫ ﻻﺣﻆ اﻟﻜﻮد‬div‫ ﻫﻮ اﺳﻢ ال‬details ‫ﻃﺒﻌﺎ‬
<div id="details" dir="ltr"></div>
:‫اﻻن ﻟﻨﺠﺮﺑﻬﺎ ﺑﺎﳌﺘﺼﻔﺢ‬
:‫و اذا وﺿﻌﺖ اﳌﺎوس ﻓﻮق ﺗﻘﻨﻴﺔ اﻻﺟﺎﻛﺲ ﺳﺘﻼﺣﻆ‬
‫ ﺳﻴﺘﻐري اﻟﻨﺺ‬css ‫و ﻛﺬﻟﻚ ﻋﻨﺪ ﻣﺮور اﳌﺆﴍ ﻓﻮق‬
php ‫اﻻﺗﺼﺎل ﺑﺴﻜﺮﺑﺘﺎت‬

‫ﺗﻌﻠﻤﻨﺎ ﺟﻠﺐ ﺑﻴﺎﻧﺎت ﻧﺼﻴﺔ ﻣﻦ ﻣﻠﻒ ﻧﴢ ﻟﻜﻦ ﻣﺎذا ﻟﻮ اردﻧﺎ اﻻﺗﺼﺎل ﺑﺴﻜﺮﺑﺖ يب اﺗﺶ يب اﻻﻣﺮ اﺳﻬﻞ ﻣام‬
‫ﺗﺘﺼﻮر ﻓﻘﻂ ﻏري اﺳﻢ اﻟﺒﺎراﻣﻴﱰ اﻟﺜﺎين اﳌﺮر ﻟﻠﻔﻨﻜﺸﻦ ﻟﻴﺼﺒﺢ ﺑﺎﺳﻢ ﻣﻠﻒ اﻟﺴﻜﺮﺑﺖ اوﻻ اﻧﺸﺎ ﻣﻠﻒ ﺟﺪﻳﺪ‬
:‫ﺑﺎﻟﺪرﻳﻢ وﻳﻔﺮ او اي ﻣﺤﺮر و اﻛﺘﺐ ﻓﻴﻪ اﻟﺘﺎﱄ‬
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<?php
print "‫;" اﻟﺤﻤﺪ ﻟﻠﻪ ﻧﺠﺢ اﻻﺗﺼﺎل ﻓﻬﺬا اﻟﻨﺺ ﻣﻜﺘﻮب مبﻠﻒ يب اﺗﺶ يب‬
?>
</body>
</html>
‫ ﻣﺜﻼ اﻻن ﺑﻘﻲ ﻋﻠﻴﻨﺎ ﻣﻠﻒ اﻟﻬﻮمتﻴﻞ و ﻟﻴﻜﻦ‬script.php ‫ﺛﻢ اﺣﻔﻆ ﻫﺬا اﳌﻠﻒ ﺑﺎﻻﺳﻢ‬
:‫ اﻛﺘﺐ ﻓﻴﻪ اﻟﻜﻮد اﻟﺘﺎﱄ‬test.html
<html dir="rtl">
<head>
var ajax = false;
//_______________
{
if(ajax)
{
{
{
}
}
// End new function
ajax.send(null);
}
}
//_______________
</script>
</head>
<body>
<form>
<input type="button" onClick="grab_data('script.php','top')" value="‫ﺗﻔﻀﻞ‬
‫>"ﺑﺎﻟﻀﻐﻂ ﻫﻨﺎ‬
</form>
<h3>
<div id="top"> ‫< ﺳﻨﺤﺎول اﻻﺗﺼﺎل ﺑﺴﻜﺮﺑﺖ يب اﺗﺶ يب و ﻧﻄﺒﻊ اﻟﻨﺺ اﳌﺨﺰن ﺑﺪاﺧﻠﻪ‬/div>
</h3>
</body>
</html>
: ‫ اﻻن ﻟﻨﺴﺘﻌﺮﺿﻪ ﰲ اﳌﺘﺼﻔﺢ اوﺑﺮا‬script.php ‫اذا مل ﻧﻐري ﳾء ﻋﻦ اﻻﻣﺜﻠﺔ اﻟﺴﺎﺑﻘﺔ ﻓﻘﻂ ﻏريﻧﺎ‬
: ‫و اذا ﺿﻐﻄﻨﺎ ﻋﲆ اﻟﺰر ﻳﺘﻐري اﻟﻨﺺ‬
:‫اﻧﺘﺒﻪ اﱃ ﴐورة وﺿﻊ ﻣﻠﻒ اﻟﺒﻲ اﺗﺶ يب ﺑﻨﻔﺲ اﳌﺠﻠﺪ‬

‫اﻟﻔﺼﻞ اﻟﺜﺎﻟﺚ ﺗﻘﻨﻴﺎت ﻣﺘﻘﺪﻣﺔ‬

‫ﻗﺒﻞ ان ﻧﺒﺪأ ﺑﺴﻜﺮﺑﺖ ﻣﺘﻘﺪم ﺳﺎﻋﻄﻴﻚ اﻣﺜﻠﺔ ﺑﺴﻴﻄﺔ و ﺳﻬﻠﺔ متﻬﺪ ﻟﺬﻟﻚ اﳌﺜﺎل اﳌﺘﻘﺪم اذا ﻟﻨﺒﺪأ ﺑﺒﺴﻢ‬
‫اﻟﻠﻪ‬
‫ﺗﻐري اﻟﻠﻮن‬
‫ﻋﻨﺪﻣﺎ ﺗﻜﺘﺐ رﺳﺎﻟﺔ مبﺤﺮر ﻧﺼﻮص اﻟﻴﺎﻫﻮ ﻣﺜﻼ ﺗﺴﺘﻄﻴﻊ ان ﺗﻐري ﻟﻮن اﻟﻨﺺ ﻓﻮرا و ﺑﺪون ﺗﺤﺪﻳﺚ اﻟﺼﻔﺤﺔ‬
: ‫ ﻻﺣﻆ اﳌﺜﺎل‬color ‫ و‬style ‫ﻳﻜﻤﻦ اﻟﴪ ﺑﺎﺳﺘﺨﺪام اﻟﺨﻮاص‬

<html dir="rtl">
<head>
//_______________
function change_color(my_color)
{
document.getElementById("top").style.color = my_color;
}
//_______________
</script>
</head>
<body>
<form>
<input type="button" onClick="change_color('red')" value="‫ﺗﻔﻀﻞ ﺑﺎﻟﻀﻐﻂ‬
‫>"ﻫﻨﺎ‬
</form>
<h3>
<div id="top"> ‫<ﺳﻴﺘﻐري ﻟﻮن ﻫﺬا اﻟﻨﺺ ﺑﺘﻘﻨﻴﺔ اﻻﺟﺎﻛﺲ‬/div>
</h3>
</body>
</html>
: ‫و اذا ﺿﻐﻄﻨﺎ ﻋﲆ اﻟﺰر ﺳﻴﺘﻐري اﻟﻠﻮن اﱃ اﻻﺣﻤﺮ‬
‫ﻛام ﺗﺮى اﺻﺒﺢ ﻟﻮﻧﻪ اﺣﻤﺮ‬
selectedIndex ‫اﻟﺨﺎﺻﻴﺔ‬
‫ ﻓﻌﻨﺪﻣﺎ ﻳﻜﻮن ﻟﺪﻳﻚ‬selectedIndex ‫اﻻن ﺳﻨﻜﺘﺐ ﺳﻜﺮﺑﺖ ﺑﺴﻴﻂ ﻳﻮﺿﺢ ﻟﻚ اﺳﺘﻌامل اﻟﺨﺎﺻﻴﺔ‬
: ‫ و ﻫﻜﺬا‬1 ‫ و اﻟﺨﻴﺎر اﻟﺜﺎين ﺗﻌﻄﻴﻚ‬0‫ﻗﺎمئﺔ ﻣﻨﺴﺪﻟﺔ و ﻳﺨﺘﺎر اﳌﺴﺘﺨﺪم اﻟﺨﻴﺎر اﻻول ﺗﻌﻄﻴﻚ‬
<html dir="rtl">
<head>
//_______________
function show_select()
{
var selected =
document.getElementById("optionList").selectedIndex;
alert(selected);
}
//_______________ </script>
</head>
<body>
<form>
<label>
<select id="optionList" onChange="show_select()">
<option >‫<اﻟﺨﻴﺎر اﻻول‬/option>
<option > ‫<اﻟﺨﻴﺎر اﻟﺜﺎين‬/option>
<option > ‫<اﻟﺨﻴﺎر اﻟﺜﺎﻟﺚ‬/option>
<option > ‫<اﻟﺨﻴﺎر اﻟﺮاﺑﻊ‬/option>
<option > ‫<اﻟﺨﻴﺎر اﻟﺨﺎﻣﺲ‬/option>
</select>
</form>
</body>
</html>
XML ‫ﺳﺤﺐ ﺑﻴﺎﻧﺎت‬

: file.xml ‫اوﻻ اﻧﺸﺎ ﻣﻠﻒ ﺟﺪﻳﺪ و اﻛﺘﺐ ﻓﻴﻪ اﻟﻜﻮد اﻟﺘﺎﱄ ﺛﻢ اﺣﻔﻈﻪ ﺑﺎﺳﻢ‬

<?xml version="1.0" encoding="utf-8"?>
<options>
<option>red</option>
<option>green</option>
<option>blue</option>
</options>
get_xml ‫اﻻن ﻧﺮﻳﺪ ﺟﻠﺐ اﻻﻟﻮان اﳌﺨﺰﻧﺔ ﻟﺪﻳﻨﺎ ﰲ ﻫﺬا اﳌﻠﻒ ﻛﻴﻒ؟؟ اوﻻ ﺳﻨﻨﺸﺄ ﻓﻨﻜﺸﻦ اﺳﻤﻬﺎ‬
: ‫ﺑﻨﻔﺲ اﻟﻄﺮﻳﻘﺔ اﻟﺘﻲ ﺗﻌﻠﻤﻨﺎﻫﺎ ﺳﺎﺑﻘﺎ ﺣﺎول ان ﺗﻘﺮأ اﻟﻜﻮد‬

<html dir="rtl">
<head>
var ajax = false;
if(window.ActiveXObject)
{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
}
var options_arr = new Array();
var java_arr = new Array();
//_______________
function get_xml(data_sourse,div_id)
{
if(ajax)
{
{
{
xml_document = ajax.responseXML;
options_arr = xml_document.getElementsByTagName("option");
for(var i=0;i<3;i++)
{
java_arr[i]= options_arr[i].firstChild.data;
}
alert(java_arr);
}
}
ajax.send(null);
}
}
</script>
</head>
<body>
<form>
<input type="button" onClick="get_xml('file.xml','top')" value="click
here">
</form>
</body>
</html>
: ‫اوﻻ ﻫﺬا اﻟﺴﻄﺮ ﻳﺴﺘﺨﺪم ﻣﻊ اﳌﺘﺼﻔﺢ اﻧﱰﻧﺖ اﻛﺴﺒﻮرر‬

: ‫ﺛﻢ اﻧﺸﺄﻧﺎ ﻣﺼﻔﻮﻓﺘني ﻓﺎرﻏﺘني ﺳﻴﺘﻢ ﺗﻌﺒﺄﺗﻬﻢ ﻻﺣﻘﺎ‬

var java_arr = new Array();
‫ ﻓﻬﻲ‬java_arr ‫ و ﻟﻴﺲ ﻧﺼﻮص اﻣﺎ اﳌﺼﻔﻮﻓﺔ‬XML‫ ﺳﺘﺤﻮي ﻋﻨﺎﴏ‬options_arr ‫اﳌﺼﻔﻮﻓﺔ‬

. ‫ﻣﺼﻔﻮﻓﺔ ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﻋﺎدﻳﺔ ﺳﻨﺨﺰن ﻓﻴﻬﺎ ﻋﻨﺎﴏ ﻧﺼﻴﺔ ﻫﻲ اﻻﻟﻮان‬
‫ و ذﻟﻚ‬xml_document ‫اوﻻ ﺳﻨﻘﻮم ﺑﺠﻠﺐ ﺑﻴﺎﻧﺎت ﻣﻠﻒ اﻻﻛﺲ ام ال و ﻧﺨﺰﻧﻬﺎ مبﺘﻐري اﺳﻤﻪ‬
responseXML ‫ﺑﺎﺳﺘﺨﺪام ﺧﺎﺻﻴﺔ‬
‫ و ذﻟﻚ‬options_arr ‫اﻻن ﺳﻨﺨﺰن ﻋﻨﺎﴏ اﻻﻛﺲ ام ال اﻟﺘﻲ ﺟﻠﺒﻨﺎﻫﺎ ﰲ اﳌﺼﻔﻮﻓﺔ اﻟﺘﻲ ﻋﺮﻓﻨﺎﻫﺎ‬
‫ اﻟﺘﻲ ﺗﺴﺘﺪل ﻋﲆ اﻟﻌﻨﴫ ﻣﻦ ﺧﻼل اﺳﻤﻪ‬getElementsByTagName ‫ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﻴﺔ‬
‫ ﺟﺎﻫﺰة و ﺗﺤﻮي اﻟﺒﻴﺎﻧﺎت ﻟﻜﻦ ﺻﻴﻐﺔ ﺗﻠﻚ اﻟﺒﻴﺎﻧﺎت ﻋﲆ ﺷﻜﻞ‬options_arr ‫اﻻن ﻟﺪﻳﻨﺎ اﳌﺼﻔﻮﻓﺔ‬
:‫ﻋﻨﺎﴏ اﻛﺲ ام ال ﻓﻜﻴﻒ ﺳﻨﱰﺟﻤﻬﺎ اﱃ ﻋﻨﺎﴏ ﻧﺼﻴﺔ ﻳﻜﻮن ذﻟﻚ ﺑﺎﻟﻌﺒﺎرة اﻟﺘﺎﻟﻴﺔ‬
options_arr[0].firstChild.data ‫اﻟﻌﻨﴫ اﻻول‬
options_arr[1].firstChild.data ‫اﻟﻌﻨﴫ اﻟﺜﺎين‬
options_arr[2].firstChild.data ‫اﻟﻌﻨﴫ اﻟﺜﺎﻟﺚ‬
: ‫و ﻟﻜﻦ اﻧﺎ ﻛﻤﱪﻣﺞ اﺟﺎﻛﺲ ﻻ اﻛﺘﺐ ﻫﻜﺬا ﻻن ﻫﻨﺎك اﺧﱰاع اﺳﻤﻪ ﺣﻠﻘﺔ ﻓﻮر‬
for(var i=0;i<3;i++)
{
java_arr[i]= options_arr[i].firstChild.data;
}
‫ﺗﻄﺒﻴﻖ اﺧﺮ‬
‫ﺳﻨﻘﻮم ﺑﺎﻧﺸﺎء ﻗﺎمئﺔ اﺧﺘﻴﺎرات و ﺣﻴﺚ ان ﻫﻨﺎك اﻛرث ﻣﻦ ﻃﺮﻳﻘﺔ ﻟﻠﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻨامذج ﺑﻮاﺳﻄﺔ اﻟﺠﺎﻓﺎ‬
: ‫ﺳﻜﺮﻳﺒﺖ ﺣﺎول ﻗﺮاءة اﻟﻜﻮد ﻋﺪة ﻣﺮات ﺳﻴﻜﻮن اﻟﴩح داﺧﻞ اﻟﻜﻮد‬
<html>
<head>
function ayman_fun()
{
var ob = document.getElementById("optionList");
alert(ob.options[1].firstChild.nodeValue+" : ‫;)"اﻟﻨﺺ‬
alert (ob.options[1].text +" : ‫;)"ﻃﺮﻳﻘﺔ ﺛﺎﻧﻴﺔ ﻟﻠﺤﺼﻮل ﻋﲆ اﻟﻨﺺ‬
//________________________
alert(ob.options[1].value+" : ‫;)"ﺗﻌﻄﻴﻚ اﻟﻘﻴﻤﺔ ﻓﺎﻟﻴﻮ‬
alert(ob.options[1].getAttribute("value")+" : ‫;)"ﻃﺮﻳﻘﺔ اﺧﺮى ﻟﻠﺤﺼﻮل ﻋﲆ اﻟﻔﺎﻟﻴﻮ‬
alert(ob.selectedIndex+ " : ‫;)" اﻧﺪﻛﺲ اﻟﻌﻨﴫ اﻟﺬي ﺗﻢ اﺧﺘﻴﺎره‬
if(ob.options[2].selected) alert("‫;)"ﻟﻘﺪ ﻗﻤﺖ ﺑﺎﺧﺘﻴﺎر اﻟﻠﻮن اﻻﺧﴬ‬
var index = ob.selectedIndex ;
var user_select = ob.options[index].text;
alert(user_select);
ob.options[0].text = "new option";
}
//________________________________________
</script>
</head>
<body>
<p> </p>
<form id="form1" name="form1" method="post" action="">
<select id="optionList" onchange="ayman_fun()">
<option value="red">‫<اﺣﻤﺮ‬/option>
<option value="blue"> ‫<ازرق‬/option>
<option value="green">‫<اﺧﴬ‬/option>
</select>
</form>
</body>
</html>
‫ رﺳﺎﺋﻞ و ﻟﻴﺲ ﻫﺬه ﻓﻘﻂ‬5 ‫ﻃﺒﻌﺎ ﻋﻨﺪﻣﺎ ﺗﻐري اﻟﻠﻮن ﺳﻴﻈﻬﺮ ﻟﻚ ﺣﻮاﱄ‬

‫اﻻن ﺟﻬﺰت ﻟﻚ ﺗﻄﺒﻴﻖ اﺟﺎﻛﺲ راﺋﻊ و ان ﺷﺎء اﻟﻠﻪ ﺗﺴﺘﻔﻴﺪ ﻣﻨﻪ ﺳﻨﺴﻤﺢ ﻟﻠﻤﺴﺘﺨﺪم ﺑﺤﺬف ﺟﻤﻴﻊ ﻋﻨﺎﴏ‬
:‫اﻟﻘﺎمئﺔ و اﺳﺘﺒﺪاﻟﻬﺎ ﺑﻘﺎمئﺔ اﺧﺮى‬

<head>
function add_options()
{
var selectControl = document.getElementById('optionList');
selectControl.options.length = 0;
var arr_options = new Array("black","red","green");
for(i=0;i<arr_options.length;i++)
{
selectControl.options[i] = new Option(arr_options[i]);
}
}
//________________________________________
</script>
</head>
<body>
<p> </p>
<select id="optionList">
<option value="red">‫<اﺣﻤﺮ‬/option>
<option value="blue"> ‫<ازرق‬/option>
<option value="green">‫<اﺧﴬ‬/option>
</select>
</form>
<br /><br />
<input type="button" onclick="add_options()" value="‫اﺣﺬف ﺟﻤﻴﻊ اﻟﺨﻴﺎرات و‬
‫"اﺳﺘﺪﺑﻠﻬﺎ ﺑﻘﺎمئﺔ اﺧﺮى‬/>
</body>
</html>
:‫اول ﻓﻜﺮة ﻫﻲ ﺣﺬف ﺟﻤﻴﻊ ﻋﻨﺎﴏ اﻟﻘﺎمئﺔ‬
‫ ﻃﺒﻌﺎ ﺣﺮف‬options ‫ اﱃ اﳌﺼﻔﻮﻓﺔ‬new Option ‫اﻟﻔﻜﺮة اﻟﺜﺎﻧﻴﺔ ﻫﻲ اﺿﺎﻓﺔ ﻋﻨﺎﴏ ﺟﺪﻳﺪة‬

: ‫ ﺻﻐري و اﻻن ﻟﻨﺠﺮﺑﻬﺎ ﺑﺎﳌﺘﺼﻔﺢ‬o ‫ ﻛﺒري و ﻟﻴﺲ‬O Option
: ‫و ﺑﻌﺪ اﻟﻀﻐﻂ ﻋﲆ اﻟﺰر ﺗﺼﺒﺢ اﻟﻘﺎمئﺔ اﻧﻜﻠﻴﺰي‬
‫ﺗﻄﺒﻴﻖ ﻣﺘﻘﺪم‬
‫اﻻن ﻧﺮﻳﺪ ان ﻧﺘﻌﻠﻢ ﻛﻴﻒ ﻧﺴﻤﺢ ﻟﻠﻤﺴﺘﺨﺪم ﺑﺘﻐﻴري ﻟﻮن اﻟﻨﺺ ﻛام ﻫﻮ اﻟﺤﺎل ﻋﻨﺪ ﻛﺘﺎﺑﺘﻚ رﺳﺎﻟﺔ ﺑﺼﻨﺪوق‬
: ‫ﺳﺤﺮي او ﻣﺤﺮر ﻧﺼﻮص اوﻻ ﺳﻨﻨﺸﺄ ﻣﻠﻒ اﻟﺒﻲ اﺗﺶ يب و اﻟﺬي ﻳﺤﻮي ﺑﻴﺎﻧﺎت اﻛﺲ ام ال‬
<?php
header("Content-type: text/xml");
print "<?xml version='1.0' encoding='utf-8' ?>";
print "<alloptions>";
$arr = array("red","green","blue");
for($i=0;$i<count($arr);$i++)
{
print "<option>".$arr[$i]."</option>";
}
print "</alloptions>";
?>
‫ ﺳﺎﻛﺘﺐ اﻟﻜﻮد ﻛﺎﻣﻼ ﺛﻢ اﴍﺣﻪ ﴍح ﻣﺨﺘﴫ ﻻن‬options.html ‫اﻻن ﺑﻘﻲ ﻋﻠﻴﻨﺎ ﻣﻠﻒ اﻟﻬﻮمتﻴﻞ‬
: ‫ﻣﻌﻈﻢ اﻻﻓﻜﺎر ﻣﺮت ﻣﻌﻨﺎ‬

<html dir="rtl">
<head>
var ajax = false;
{
}
{
}
//****************************
function getOptions()
{
if(ajax)
{
ajax.open("get","script.php",true);
{
{
xmlDocument = ajax.responseXML;
options_arr = xmlDocument.getElementsByTagName("option");
list_options();
}
}
ajax.send(null);
}
}
//________________________________________
function setOption()
{
var index =
document.getElementById("optionList").selectedIndex;
document.getElementById("center").style.color =
options_arr[index].firstChild.data;
}
//_________________________________
function list_options()
{
var selectControl = document.getElementById("optionList");
for(i=0;i < options_arr.length;i++)
{
selectControl.options[i] = new
Option(options_arr[i].firstChild.data);
}
}
//_________________________________
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
</head>
<body>
<p> </p>
<select id="optionList" onChange="setOption()">
</select>
</form>
<br /><br />
<input type="button" onclick="getOptions()" value="‫"اﻇﻬﺮ ﻗﺎمئﺔ اﻻﻟﻮان‬/>
<h2> ‫ﻏري ﻟﻮن ﻫﺬا اﻟﻨﺺ‬: <br>
<div align="center" id="center"> ‫اﻟﺤﻤﺪ ﻟﻠﻪ اﻟﺬي ﻫﺪاﻧﺎ ﻟﻬﺬا و ﻣﺎ ﻛﻨﺎ ﻟﻨﻬﺘﺪي ﻟﻮﻻ ان ﻫﺪاﻧﺎ‬
‫<اﻟﻠﻪ‬/div>
</h2>
</body>
</html>
‫ و ﺧﺰﻧﻬﺎ ﰲ‬responseXML ‫اوﻻ ﺳﺤﺒﻨﺎ اﻟﺒﻴﺎﻧﺎت ﻣﻦ اﳌﻠﻒ اﳌﻮﺟﻮد ﺑﺎﻟﺴريﻓﺮ ﺑﺎﺳﺘﺨﺪام ﺧﺎﺻﻴﺔ‬
, ‫ ﻟﻜﻦ ﻫﺬه متﺜﻞ اﳌﻠﻒ ﺑﺎﻛﻤﻠﻪ و اﻧﺎ ﻻ ارﻳﺪ ﺳﻮى ﻋﻨﺎﴏ اﻻوﺑﺸﻦ‬xmlDocument ‫اﳌﺘﻐري‬
: getElementsByTagName ‫ﻟﺴﺤﺐ ﻋﻨﺎﴏ اﻻوﺑﺸﻦ ﻧﺴﺘﺨﺪم اﻟﺨﺎﺻﻴﺔ‬
options_arr =
xmlDocument.getElementsByTagName("option");
: ‫و ﻟﻜﻦ ﻫﺬه اﻟﺒﻴﺎﻧﺎت ﻣﺎ ﺗﺰال ﻋﻨﺎﴏ اﻛﺲ ام ال و ﻟﻴﺴﺖ ﻧﺼﻮص اي اﻧﻬﺎ ﻋﲆ ﻫﺬا اﻟﺸﻜﻞ‬

<option>red</option>
<option>green</option>
<option>blue</option>
firstChild.data: ‫ﻟﺘﻔﺮﻳﻎ اﻟﻨﺼﻮص اﳌﺤﺘﻮاة داﺧﻞ اﳌﺼﻔﻮﻓﺔ ﻻ ﺑﺪ ﻣﻦ اﺳﺘﺨﺪام اﻟﺨﺎﺻﻴﺔ‬
‫اﻣﺎ ﻟﺘﻐﻴري ﻟﻮن اﻟﻨﺺ ﻧﺴﺘﺨﺪم اﻟﻌﺒﺎرة‬

document.getElementById("center").style.color
‫اﻟﻔﻜﺮة اﻻﺧرية ﻫﻲ ﺑﺰرع ﺧﻴﺎرات ﺟﺪﻳﺪة او اﻧﺸﺎ ﻛﺎﺋﻨﺎت ﺟﺪﻳﺪة ﻣﻦ ﻧﻮع اوﺑﺸﻦ و ﺿﻤﻬﺎ ﻟﻠﻤﺼﻔﻮﻓﺔ‬
: options
Option(options_arr[i].firstChild.data);
GET ‫اﻟﻄﺮﻳﻘﺔ‬
: ‫ ﻋﻨﺪﻣﺎ ﺗﻜﻮن ﺣﺠﻢ اﻟﺒﻴﺎﻧﺎت ﺻﻐري و ان ﻻ ﺗﻜﻮن اﻟﺒﻴﺎﻧﺎت ﴎﻳﺔ‬GET ‫ﻏﺎﻟﺒﺎ ﻣﺎ ﻧﺴﺘﺨﺪم‬

<html dir="rtl">
<head>
var ajax = false;
{
}
{
}
//_______________
var optionsArr = new Array();
function getData(colors)
{
if(ajax)
{
var url = "script.php?colors="+colors;
ajax.open("get",url,true);
{
{
var xmlDocument = ajax.responseXML;
optionsArr = xmlDocument.getElementsByTagName("option");
makeOptions();
}
}
ajax.send(null);
}
}
//____________________________________
function makeOptions()
{
selectControl = document.getElementById("selectId");
for(i=0;i < optionsArr.length;i++)
{
selectControl.options[i+1] = new Option(optionsArr[i].firstChild.data) ;
}
}
//____________________________________
//***********************
{
var index = document.getElementById("selectId").selectedIndex;
document.getElementById("textId").style.color =
optionsArr[index].firstChild.data;
}
//*********************
</script>
</head>
<body>
<form>
<select id="selectId" onChange="setOption()">
<option selected>‫< اﺧﱰ ﻟﻮﻧﺎ‬/option>
</select>
<input type="button" value="click here" onClick="getData(1)">
<input type="button" value="click here" onClick="getData(2)">
</form>
<div id="textId">
<h1>‫< اﻟﻠﻪ اﻛﱪ‬/h1>
</div>
</body>
</html>

‫ ﻋﻨﺪﻣﺎ ﺗﻘﺮأ ﻫﺬا اﻟﺴﻄﺮ‬var url = "script.php?colors="+colors;
‫ﻓﺬﻟﻚ ﻳﻌﻨﻲ اﻧﻨﺎ ﻧﺮﺳﻞ اﱃ اﻟﺴﻜﺮﺑﺖ ﻣﺘﻐري اﺳﻤﻪ ﻛﻮﻟﻮرس و ﻟﻜﻦ ﻛﻴﻒ ﺳﻴﻘﻮم ﻣﻠﻒ اﻟﺒﻲ اﺗﺶ يب‬
‫ ﻻﺣﻆ ﻛﻮد اﻟﺒﻲ اﺗﺶ‬$_GET[colors] ‫ﺑﺎﺳﺘﻘﺒﺎل ﻫﺬا اﳌﺘﻐري؟؟ اﻟﺠﻮاب ﻫﻮ ﺑﺎﺳﺘﺨﺪام اﳌﺼﻔﻮﻓﺔ‬
: ‫يب‬
<?php
print '<?xml version="1.0" encoding="utf-8"?>';
print "<allOptions>";
if($_GET[colors] == 1)
{
}
if($_GET[colors] == 2)
{
$arr = array("yellow","orange","purple");
}
for($i=0;$i < count($arr);$i++)
{
}
print "</allOptions>";
?>
‫ﻳﺨﺘﻠﻒ ﻫﺬا اﳌﺜﺎل ﻋﻦ اﻟﺬي ﻗﺒﻠﻪ اﻧﻨﺎ اﺿﻔﻨﺎ ﻣﺠﻤﻮﻋﺔ ﺟﺪﻳﺪة ﻣﻦ اﻻﻟﻮان ﻓﺎذا اﺧﺘﺎر اﳌﺴﺘﺨﺪم اﳌﺠﻤﻮﻋﺔ‬
‫ ﺑﻮاﺳﻄﺔ ﺟﻴﺖ اﱃ اﻟﺴﻜﺮﺑﺖ و ﻫﺬا اﳌﺘﻐري ﺳﻴﺤﻤﻞ اﻟﻘﻴﻤﺔ واﺣﺪ اﻣﺎ اذا‬colors‫اﻻوﱃ ﺳريﺳﻞ ﻣﺘﻐري‬
:2 ‫ﺿﻐﻂ اﳌﺴﺘﺨﺪم اﻟﺰر اﻟﺜﺎين ﺳﻴﺤﻤﻞ اﳌﺘﻐري اﻟﻘﻴﻤﺔ‬
‫ﺣﻴﺚ ان اﺧﺘﻴﺎرات اﻻﻟﻮان ﻟﻦ ﺗﻈﻬﺮ اﻻ اذا ﺿﻐﻄﺖ ﻋﲆ اﺣﺪ اﻟﺰرﻳﻦ‬
POST ‫اﻟﻄﺮﻳﻘﺔ‬
‫ﻫﺬه اﻟﻄﺮﻳﻘﺔ ﻧﺴﺘﺨﺪﻣﻬﺎ ﻋﻨﺪﻣﺎ ﻧﺮﻳﺪ ارﺳﺎل ﺑﻴﺎﻧﺎت ﺿﺨﻤﺔ و ﴎﻳﺔ ﺣﻴﺚ ﻳﺘﻢ ﺗﺸﻔريﻫﺎ ﻟيك ﻻ ﻳﺘﻤﻜﻦ‬
: ‫اﻟﻬﻜﺮ ﻣﻦ اﻟﺘﻘﺎﻃﻬﺎ‬

<html>
<head>
var ajax = false;
{
}
{
}
//___________________________________
var optionsArr = new Array();
function getData(colors)
{
if(ajax)
{
var url = "script.php";
ajax.open("post",url,true);
ajax.setRequestHeader('Content-Type','application/x-www-form-
urlencoded');
{
{
optionsArr = xmlDocument.getElementsByTagName("option");
makeOptions();
}
}
ajax.send("colors="+colors);
}
}
//____________________________
function makeOptions()
{
var selectControl = document.getElementById("selectId");
for(var i =0;i<optionsArr.length;i++)
{
selectControl.options[i] = new Option(optionsArr[i].firstChild.data);
}
}
//____________________________
//
//@@@@@@@@@@@@@@@@@@@@@@@@
{
document.getElementById("center").style.color =
optionsArr[index].firstChild.data
}
//@@@@@@@@@@@@@@@@@@@@@@@@
</script>
</head>
<body>
<form>
<select id="selectId" onchange="setOption()">
<option> choos one </option>
</select><br />
<input type="button" value="‫ "ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﻻوﱃ‬onclick="getData(1)" />
<input type="button" value=" ‫ "ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﻟﺜﺎﻧﻴﺔ‬onclick="getData(2)"
/></form>
<div align="center" id="center">
<h1>‫< ﺻﲆ اﻟﻠﻪ ﻋﲆ ﻣﺤﻤﺪ ﺻﲆ اﻟﻠﻪ ﻋﻠﻴﻪ و ﺳﻠﻢ‬/h1>
</div>
</body>
</html>
‫اوﻻ ﺑﻌﺪ ان اﺳﺘﺨﺪﻣﻨﺎ اﻟﺨﺎﺻﻴﺔ اوﺑﻦ و ﻣﺮرﻧﺎ ﻟﻬﺎ اﻟﻘﻴﻤﺔ ﺑﻮﺳﺖ اﻻن ﻳﺠﺐ ان ﻧﻀﻊ اﻟﻬﻴﺪر ﻟﻠﺼﻔﺤﺔ و‬
:setRequestHeader ‫ﻳﻜﻮن ذﻟﻚ ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﻴﺔ‬

urlencoded');
‫و ﻫﻨﺎك ﻓﻜﺮة ﺟﺪﻳﺪة اﻳﻀﺎ ﻫﻲ اﻧﻪ ﻣﺮرﻧﺎ ﻗﻴﻤﺔ ﻟﻠﺨﺎﺻﻴﺔ ﺳﻴﻨﺪ ﻋﻮﺿﺎ ﻋﻦ اﻟﻘﻴﻤﺔ ﻧﺎل اﻟﺘﻲ ﺗﻌﻮدﻧﺎ ﻋﻠﻴﻬﺎ‬
:‫ﻋﻨﺪﻣﺎ ﻛﻨﺎ ﻧﺴﺘﺨﺪم ﺟﻴﺖ‬

ajax.send("colors="+colors);
‫ﻓﺎﻟﺴﻄﺮ اﻟﺴﺎﺑﻖ ﻳﻌﻨﻲ اﻧﻨﺎ ﻧﺮﺳﻞ اﳌﺘﻐري ﻛﻮﻟﻮرس و ﻗﻴﻤﺔ ذﻟﻚ اﳌﺘﻐري و ﺗﺬﻛﺮ اﻧﻪ ﻋﻨﺪﻣﺎ ﺗﺴﺘﺨﺪم اﻟﻄﺮﻳﻘﺔ‬
: ‫ و اﻻن اﱃ ﺳﻜﺮﺑﺖ اﻟﺒﻲ اﺗﺶ يب‬null ‫ﺟﻴﺖ ﻋﻨﺪﻫﺎ متﺮر اﻟﻘﻴﻤﺔ ﻧﺎل‬

<?php
header("Content-type:text/xml");
print '<?xml version="1.0" encoding="utf-8"?>';
if($_POST[colors] == 1)
{
}
if($_POST[colors] == 2)
{
$arr = array("yellow","orange","purple");
}
{
print "<option>";
print $arr[$i];
print "</option>";
}
?>
:‫ ﻟﻨﺠﺮﺑﻬﺎ ﺑﺎﳌﺘﺼﻔﺢ‬. ‫ ﻓﻘﻂ‬POST_$ ‫ ﺑﺎﳌﺘﻐري‬GET_$ ‫اﻟﺠﺪﻳﺪ ﻫﻮ اﻧﻨﺎ اﺳﺘﺒﺪﻟﻨﺎ ﺟﻴﺖ‬
‫ﺟﺎﻓﺎ ﺳﻜﺮﺑﺖ ﻣﻦ ﺟﻬﺔ اﻟﺴريﻓﺮ‬
‫اﺣﻴﺎﻧﺎ ﺗﻀﻄﺮ اﱃ ﺗﻨﻔﻴﺬ ﻛﻮد ﺟﺎﻓﺎ ﺳﻜﺮﺑﺖ ﻣﻦ اﻟﺴريﻓﺮ اي ان ﻛﻮد اﻟﺠﺎﻓﺎ ﺳﻜﺮﺑﺖ ﻳﻜﻮن ﻣﻜﺘﻮب مبﻠﻒ‬
: ‫اﻟﺒﻲ اﺗﺶ يب و ﺗﻘﻮم اﻧﺖ ﺑﺴﺤﺒﻪ ﺑﻨﻔﺲ اﻟﻄﺮﻳﻘﺔ اﻟﺘﻲ ﺗﺴﺤﺐ ﺑﻬﺎ ﻧﺺ ﻋﺎدي‬

<html dir="rtl">
<head>
var ajax = false;
//_______________
function grab_data(data_sourse)
{
if(ajax)
{
{
{
eval(ajax.responseText);
}
}
// End new function
ajax.send(null);
}
}
</script>
</head>
<body>
<form>
<input type="button" onClick="grab_data('java.php')" value="Get java
from the server"><h1>‫< ﺗﻘﻨﻴﺔ اﻻﺟﺎﻛﺲ‬/h1>
</form>
</font>
</body>
</html>
‫ اﻟﺠﺪﻳﺪ ﻫﻮ ﻫﺬا اﻟﺴﻄﺮ‬eval(ajax.responseText);
‫ﻓﺎذا ﻛﺎن اﻟﻨﺺ اﻟﺬي ﺟﻠﺒﺘﻪ ﻋﺒﺎرة ﻋﻦ ﻛﻮد ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ و ﺗﺮﻳﺪ ﺗﻨﻔﻴﺬ ﻫﺬا اﻟﻜﻮد اﺳﺘﺨﺪم اﻟﺨﺎﺻﻴﺔ‬
: java.php‫ و اﻻن اﱃ ﻣﻠﻒ اﻟﺒﻲ اﺗﺶ يب‬eval

<?php
print "alert('‫;")' ﻫﺬا ﻛﻮد ﺟﺎﻓﺎ ﺳﻜﺮﺑﺖ ﺗﻢ ﺟﻠﺒﻪ ﻣﻦ اﻟﺴريﻓﺮ‬
?>
‫ﻛام ﺗﺮى ﺑﺴﻴﻂ ﺟﺪا و ﻫﺬه اﳌﺮة ﻻ ﻳﺤﻮي ﻧﺼﺎ او ﺑﻴﺎﻧﺎت اﻛﺲ ام ال و امنﺎ ﻳﺤﻮي ﻛﻮد ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ و‬
‫اﻻن ﻟﻨﺴﺘﻌﺮﺿﻪ‬
‫و ﻟﻜﻦ اﻧﺘﺒﻪ ﻻﻣﺮ ﺧﻄري و ﻫﻮ اﻧﻚ ﻟﻦ ﺗﺴﺘﻄﻴﻊ ﻛﺘﺎﺑﺔ ﻛﻮد ﻃﻮﻳﻞ ﻻﻛرث ﻣﻦ ﺳﻄﺮ و اذا ﻓﻌﻠﺖ ﻓﻠﻦ ﻳﺘﻢ‬
‫ﺗﻨﻔﻴﺬه ﻟﺬﻟﻚ ﻧﺤﻦ ﻏﺎﻟﺒﺎ ﻣﺎ ﻧﺴﺘﺨﺪم ﺟﺎﻓﺎ ﺳﻜﺮﺑﺖ اﻟﻘﺎدﻣﺔ ﻣﻦ اﻟﺴريﻓﺮ ﻻﺳﺘﺪﻋﺎء ﻓﻨﻜﺸﻦ ﻓﻘﻂ و ﻫﺬا‬
: ‫اﳌﺜﺎل ﻳﻮﺿﺢ‬

<html dir="rtl">
<head>
var ajax = false;
//_______________
function grab_data(data_sourse)
{
if(ajax)
{
{
{
//ob.innerHTML = ajax.responseText;
}
}
// End new function
ajax.send(null);
}
}
//___________
function hi(name)
{
document.getElementById("top").innerHTML = "<h1>Welcome " +
name + "</h1>";
}
</script>
</head>
<body>
<div id="top" > ‫< ﻫﻨﺎ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬ اﻟﻔﻨﻜﺸﻦ ان ﺷﺎء اﻟﻠﻪ‬/div>
<form>
<input type="button" onClick="grab_data('java.php')" value="Get java
from the server"><h1>‫< ﺗﻘﻨﻴﺔ اﻻﺟﺎﻛﺲ‬/h1>
</form>
</font>
</body>
</html>
:‫و اﻻن ﻟﻨﻨﺘﻘﻞ اﱃ ﻣﻠﻒ اﻟﺒﻲ اﺗﺶ يب اﻟﺬي ﺳﻴﺴﺘﺪﻋﻲ اﻟﻔﻨﻜﺸﻦ‬
<?php
print "hi(' Ayman ')";
?>
: ‫ﻃﺒﻌﺎ اذا ﻛﺘﺒﺖ اﻛرث ﻣﻦ ﺳﻄﺮ ﻟﻦ ﻳﻌﻤﻞ اﻟﻜﻮد ﻣﻄﻠﻘﺎ و اﻻن ﻟﻨﺠﺮﺑﻪ ﺑﺎﳌﺘﺼﻔﺢ‬
: ‫و ﻋﻨﺪﻣﺎ ﺗﻀﻐﻂ ﻋﲆ اﻟﺰر ﺳﻴﺘﻢ اﺳﺘﺪﻋﺎء اﻟﻔﻨﻜﺸﻦ ﺑﺄﻣﺮ ﻗﺎدم ﻣﻦ اﻟﺴريﻓﺮ‬

‫‪ ‬‬
‫‪ ‬‬
‫اﺳﱰﺟﺎع ﻛﺎﺋﻦ ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬
‫‪ ‬‬
‫اﻻن ﻟﺪﻳﻨﺎ ﻛﺎﺋﻦ ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﺳﻨﻜﺘﺒﻪ ﻋﲆ ﺻﻴﻐﺔ ﻧﺺ و ﻟﻴﺘﻢ ﺗﺤﻮﻳﻠﻪ اﱃ ﻫﻴﺌﺔ ﻛﺎﺋﻦ ﻻﺣﻘﺎ ﻫﺬا اﻟﻜﺎﺋﻦ‬
‫ﺳﺘﻜﻮن ﻣﻬﻤﺘﻪ اﺳﺘﺪﻋﺎء ﻫﺬه اﻟﻔﻨﻜﺸﻦ ‪:‬‬
‫)‪function math(op1, op2‬‬

‫{‬
‫;‪var sum = op1 + op2‬‬
‫;)‪alert(op1 + " + " + op2 + " = " + sum‬‬
‫}‬
‫‪ ‬‬
‫ﻃﺒﻌﺎ ﻧﺤﻦ ﻧﺴﺘﺪﻋﻲ ﻫﺬه اﻟﻔﻨﻜﺸﻦ ﺑﺎﻟﻄﺮﻳﻘﺔ اﻟﺘﻘﻠﻴﺪﻳﺔ ﻫﻜﺬا ‪:‬‬
‫;)‪math(5,8‬‬
‫و ﻟﻜﻦ ﻫﺬه اﳌﺮة ﺳﻨﻘﻮم ﺑﺎﻧﺸﺎء ﻛﺎﺋﻦ ﻟﺪﻳﻪ ﺛﻼث ﺧﻮاص‪:‬‬
‫اﺳﻢ اﻟﻔﻨﻜﺸﻦ ﻣﺜﻼ ‪math :‬‬
‫اﳌﻌﺎﻣﻞ اﻻول ﻣﺜﻼ ‪5‬‬
‫و اﳌﻌﺎﻣﻞ اﻟﺜﺎين ﻣﺜﻼ ‪8‬‬
‫اﻻن ﻟﺪﻳﻨﺎ ﻣﺘﻐري ﻧﴢ ﺗﻌﻤﺪﻧﺎ ﻛﺘﺎﺑﺘﻪ ﺑﻄﺮﻳﻘﺔ ﻋﺠﻴﺒﺔ او ﻏري ﻣﺄﻟﻮﻓﺔ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻚ ﻟيك ﻧﺴﺘﻄﻴﻊ ﺗﺤﻮﻳﻠﻪ اﱃ‬
‫ﻛﺎﺋﻦ و ﺑﺎﻟﺘﺎﱄ ﻳﻘﻮم اﻟﻜﺎﺋﻦ ﺑﺎﺳﺘﺪﻋﺎء اﻟﻔﻨﻜﺸﻦ ‪:‬‬
‫;";}‪var text = "{method: 'math' , num1: 24 , num2: 6‬‬
‫‪ ‬‬
‫اﻻن ﺗﺴﺘﻄﻴﻊ اﻧﺸﺎء ﻛﺎﺋﻦ ‪ ob‬ﻣﻦ ﻫﺬا اﻟﻨﺺ ﻃﺎﳌﺎ ان اﻟﻨﺺ ﻳﺤﺘﻮي ﻋﲆ اﻟﺨﻮاص اﻟﺜﻼﺛﺔ اﻟﺘﻲ ﺳﺘﻠﺰﻣﻚ ‪:‬‬
‫‪ ‬‬
‫; ‪var ob‬‬
‫;)‪eval('ob='+text‬‬
‫ﻟﻘﺪ اﺳﺘﺨﺪﻣﻨﺎ اﻟﺪاﻟﺔ ‪ eval‬ﻻﻧﺸﺎء اﻟﻜﺎﺋﻦ اﻻن مل ﻳﺒﻖ ﻋﻠﻴﻨﺎ اﻻ ان ﻧﺴﺘﺪﻋﻲ اﻟﻔﻨﻜﺸﻦ ‪:‬‬

‫; ‪var ob‬‬
‫;)‪eval('ob='+text‬‬
‫;)';)' ‪eval(ob.method + '(' + ob.num1 + ',' + ob.num2 +‬‬
‫ﻧﺤﻦ ﺑﺬﻟﻚ ﻧﻜﻮن ﻗﺪ اﺳﺘﺪﻋﻴﻨﺎ اﻟﻔﻨﻜﺸﻦ ﻣﺎث ﺣﻴﺚ ﻛﺘﺒﻨﺎ اﻟﺨﺎﺻﻴﺔ اﻟﺘﻲ ﺗﻌﱪ ﻋﻦ اﺳﻢ اﻟﻔﻨﻜﺸﻦ ﺛﻢ ﻓﺘﺤﻨﺎ‬
‫ﻗﻮس و ﻛﺘﺒﻨﺎ اﻟﺨﺎﺻﻴﺘني اﻟﻠﺘﺎن ﺗﻌﱪان ﻋﻦ اﻻرﻗﺎم ﺛﻢ اﻏﻠﻘﻨﺎ اﻟﻘﻮس‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪google suggest‬‬
‫‪ ‬‬
‫ﻋﻨﺪﻣﺎ ﺗﻜﺘﺐ ﰲ ﺣﻘﻞ اﻟﻨﺺ ﺑﻐﻮﻏﻞ ﻛﻠﻤﺔ دروس ﻣﺜﻼ ﺗﺨﺮج ﻗﺎمئﺔ ﻣﻨﺴﺪﻟﺔ ﺗﻘﱰح ﻋﻠﻴﻚ اﻗﱰاﺣﺎت ﻣﺜﻼ‬
‫دروس اﻟﻔﻮﺗﻮﺷﻮب ‪ ,‬دروس رﻳﺎﺿﻴﺎت وﻫﻜﺬا و ﻫﺬا ﻣﺎ ﻳﺴﻤﻰ ﺑـ ‪google suggest‬‬
‫ﻃﺒﻌﺎ ميﻜﻨﻚ ان ﺗﺴﺘﺨﺪم ﻧﻔﺲ اﻟﺘﻘﻨﻴﺔ مبﻮﻗﻌﻚ ﺣﻴﺚ ﺗﺘﺼﻞ ﺑﺴريﻓﺮ ﻏﻮﻏﻞ ﺑﺪون اي ﺗﺤﺪﻳﺚ ﻟﻠﺼﻔﺤﺔ ‪:‬‬
‫‪ ‬‬
‫ﺣﻴﺚ ﺗﻠﻘﻴﻨﺎ ﻣﻦ ﻏﻮﻏﻞ ﺳﻄﺮ ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﻳﻘﻮم ﻫﺬا اﻟﺴﻄﺮ ﺑﺎﺳﺘﺪﻋﺎء اﻟﻔﻨﻜﺸﻦ‬
‫‪ sendRPCDone‬و ﻫﺬه ﻫﻲ اﻟﱪاﻣﻴﱰات ‪:‬‬
‫‪sendRPCDone(unusedVariable, searchTerm, arrayTerm, arrayResults,‬‬

‫)‪unusedArray‬‬
‫‪ ‬‬
‫ﻣﻌﺎﻟﺠﺔ اﻟﺒﻴﺎﻧﺎت اﻟﻘﺎدﻣﺔ ﻣﻦ ﻏﻮﻏﻞ‬
‫اوﻻ ﺳﻨﻨﺸﺊ ﺣﻘﻞ ﻧﺺ و ﺳرنﺑﻄﻪ ﺑﺎﻟﻔﻨﻜﺸﻦ ‪ getSuggest‬ﻋﻦ ﻃﺮﻳﻖ اﻟﺤﺪث ‪ onkeyup‬ﻫﺬا‬

‫اﻟﺤﺪث ﻳﺘﺤﻘﻖ مبﺠﺮد ان ﻳﻜﺘﺐ اﳌﺴﺘﺨﺪم او ميﺴﺢ اي ﺣﺮف ‪:‬‬
‫‪ ‬‬
‫"‪ <input type="text" name="textfield" id="textfield‬اﻟﺒﺤﺚ ﻋﻦ‬
‫>")‪onKeyUp="getSuggest(event‬‬
‫اﻻن ﺳﻨﻘﻮم ﺑﺎﻧﺸﺎء ﻋﻨﴫ ‪ div‬ﻟﺘﻈﻬﺮ ﻓﻴﻪ اﻻﻗﱰاﺣﺎت ‪:‬‬
‫‪ ‬‬
‫>‪<div id="divId"></div><div></div‬‬
‫‪ ‬‬
‫ﻟﻨﻘﻢ ﺑﺒﻨﺎء اﻟﻔﻨﻜﺸﻦ ‪ getSuggest‬ﺛﻢ منﺮر ﻟﻬﺎ اﻟﻜﺎﺋﻦ ‪ keyEvent‬ﻟﻜﻦ ﻫﺬا اﻟﻜﺎﺋﻦ ﻏري‬
‫ﻣﺪﻋﻮم ﻣﻦ ﻗﺒﻞ اﻻﻧﱰﻧﺖ اﻛﺴﺒﻠﻮرر ﰲ ﻫﺬا اﳌﺘﺼﻔﺢ ﻋﻠﻴﻚ اﺳﺘﺨﺪام ‪: window.event‬‬
‫‪ ‬‬
‫)‪function getSuggest(keyEvent‬‬
‫{‬
‫;‪keyEvent = (keyEvent) ? keyEvent: window.event‬‬
‫‪-‬‬
‫‪-‬‬
‫}‬
‫ميﻜﻨﻚ اﻳﻀﺎ ان ﺗﺤﺪد اﻳﻦ ﻳﻜﺘﺐ اﳌﺴﺘﺨﺪم ﻟﻜﻦ ﻫﺬا ﻳﻌﺘﻤﺪ ﻋﲆ ﻧﻮع اﳌﺘﺼﻔﺢ ﺑﺎﻟﻔﺎﻳﺮﻓﻮﻛﺲ اﺳﺘﺨﺪم‬
‫اﻟﺨﺎﺻﻴﺔ ‪ target‬اﻣﺎ ﺑﺎﻻﻧﱰﻧﺖ اﻛﺴﺒﻠﻮرر اﺳﺘﺨﺪم ‪:srcElement‬‬
‫‪ ‬‬
‫{‬
‫;‪input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement‬‬
‫‪-‬‬
‫‪-‬‬
‫}‬
‫و ميﻜﻨﻚ ان ﺗﺤﺪد ﻧﻮع اﻟﻜﺎﺋﻦ ‪ keyEvent‬ﻫﻞ ﻫﻮ ﻣﻦ ﻧﻮع ‪:keyup‬‬
‫{‬
‫;‪input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement‬‬
‫{ )"‪if (keyEvent.type == "keyup‬‬
‫‪-‬‬
‫‪-‬‬
‫}‬
‫}‬
‫‪ ‬‬
‫اﻻﺗﺼﺎل ﺑﻐﻮﻏﻞ‬
‫ﺳﻨﺘﺤﻘﻖ ﻫﻞ ﻳﻜﺘﺐ اﳌﺴﺘﺨﺪم ﺷﻴﺌﺎ؟ ﻧﺘﺼﻞ ﺑﻐﻮﻏﻞ و ﻧﻌﺮض اﻻﻗﱰاﺣﺎت ‪:‬‬
‫‪ ‬‬
function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement;
if (keyEvent.type == "keyup") {
if (input.value) {
getData("google.php?qu=" + input.value);
}
else {
-
-
}
}
}
: ‫ ﺗﻌﻨﻲ ﻫﻨﺎ ان اﳌﺴﺘﺨﺪم ﻗﺪ ﻣﺴﺢ اﻟﻜﻠﻤﺔ و ﺑﺎﻟﺘﺎﱄ ﻧﺤﻦ ﺑﺪورﻧﺎ ﺳﻨﻤﺴﺢ اﻻﻗﱰاﺣﺎت‬else ‫اﻟﻌﺒﺎرة‬

{
input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement;
if (input.value) {
getData("google.php?qu=" + input.value);
}
else {
var targetDiv = document.getElementById("targetDiv");
targetDiv.innerHTML = "<div></div>";
}
}
}
‫ اﻟﺘﻲ منﺮر ﻟﻬﺎ ﺳﻜﺮﺑﺖ اﻟﺒﻲ اﺗﺶ يب و اﻟﺬي ﻳﻘﻮم ﺑﺪوره ﺑﺎﻻﺗﺼﺎل‬getData ‫ﻟﻨﻨﺘﻘﻞ اﱃ اﻟﻔﻨﻜﺸﻦ‬
‫ﺑﻐﻮﻏﻞ اﻋﺘﻘﺪ اﻧﻚ ﻗﺪ ﺣﻔﻈﺖ ﻫﺬه اﻟﻔﻨﻜﺸﻦ ﻻﻧﻬﺎ ﺗﻜﺮرت ﻣﻜﻌﻨﺎ ﻛﺜريا‬

if (window.ActiveXObject)
{
ajax = new ActiveXObject("microsoft.xmlhttp");
} else if(window.XMLHttpRequest)
{
}
//_____________________________
function getData(dataSourse)
{
alert("fun");
if(ajax)
{
ajax.open("get",dataSourse);
{
{
}
}
ajax.send(null);
}
}
‫ ﻟﺘﻨﻔﻴﺬ ﻛﻮد اﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ و اﻻن مل ﻳﺒﻖ ﻋﻠﻴﻨﺎ اﻻ اﻟﻔﻨﻜﺸﻦ‬eval ‫اﺳﺘﺨﺪﻣﻨﺎ اﻟﻔﻨﻜﺸﻦ اﻟﺠﺎﻫﺰة‬
: ‫ اﻟﺘﻲ ﺳﻨﻘﻮم ﺑﺒﻨﺎﺋﻬﺎ ﺳﻮﻳﺎ‬sendRPCDone
function sendRPCDone(unusedVariable, searchTerm, arrayTerm,

arrayResults, unusedArray)
{
.
.
.
}
‫ﻧﺤﺘﺎج ﻻن ﻧﻌﺮف ﻣﺘﻐري اﺳﻤﻪ داﺗﺎ ﻳﺤﻮي ﻋﻨﺎﴏ اﳌﺼﻔﻮﻓﺘني ﺑﺸﻜﻞ ﻣﻨﺴﻖ وﻓﻖ ﺟﺪول ﺣﻴﺚ ميﻜﻨﻨﺎ‬
: ‫ﻃﺒﺎﻋﺔ ﻋﻨﺎﴏ اﳌﺼﻔﻮﻓﺔ ﺑﺤﻠﻘﺔ ﺗﻜﺮار ﻓﻮر‬

function sendRPCdone
(unusedvariable,searchTerm,arrayTerm,arrayResults,unusedArray)
{
var data = "<table>";
var i ;
if(arrayResults.length != 0)
{
for(i=0;i < arrayResults.length;i++)
{
data += "<tr><td>";
data += "<a href = 'http://www.google.com?
q="+arrayTerm[i]+"'>";
data += arrayTerm[i]
data += "</a> </td><td>"
data += arrayResults[i];
data += "</td></tr>";
}
}
data += "</table>";
document.getElementById("divId").innerHTML = data;
}
‫ﻛام ﺗﺮى وﺿﻌﻨﺎ راﺑﻂ ﺑﺤﻴﺚ اذا ﺿﻐﻂ اﳌﺴﺘﺨﺪم ﻋﲆ اﺣﺪ ﻫﺬه اﻻﻗﱰاﺣﺎت ﺳﻴﺘﻢ اﻟﺒﺤﺚ ﻋﻨﻪ و اذا‬
: ‫اردت ﺗﻨﺴﻴﻖ ﺗﻠﻚ اﻻﻗﱰاﺣﺎت اﺳﺘﺨﺪم اﻟﴘ اس اس‬
#divId {
background-color: #FFEEAA;
width: 30%;
</style>
: ‫اﻻن ﺳﺎﻗﺪم ﻟﻚ اﻟﻜﻮد ﻛﺎﻣﻼ‬

<html dir="rtl">
<head>
#divId{
background-color:#0CF;
width:40%
}
</style>
if (window.ActiveXObject)
{
}
{
}
//_____________________________
{
if(ajax)
{
{
{
}
}
ajax.send(null);
}
}
//_____________________________
// getSuggest
//**********************
{
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement;
if (input.value) {
getData("google.php?qu=" +
input.value);
}
else {
var targetDiv = document.getElementById("targetDiv");
targetDiv.innerHTML = "<div></div>";
}
}
}//**********************
//sendRPCdone
//++++++++++++++++
function sendRPCdone
(unusedvariable,searchTerm,arrayTerm,arrayResults,unusedArray)
{
var data = "<table>";
var i ;
if(arrayResults.length != 0)
{
for(i=0;i < arrayResults.length;i++)
{
data += "<tr><td>";
data += "<a href = 'http://www.google.com?q="+arrayTerm[i]+"'>";
data += arrayTerm[i]
data += "</a> </td><td>"
data += arrayResults[i];
data += "</td></tr>";
}
}
data += "</table>";
document.getElementById("divId").innerHTML = data;
}
//++++++++++++++++
</script>
</head>
<body>
‫< اﻟﺒﺤﺚ ﻋﻦ‬input type="text" name="textfield" id="textfield"
onKeyUp="getSuggest(event)">
<div id="divId"></div><div></div>
</body>
</html>
‫ و ﻫﻮ‬google.php ‫و اﺧريا اﻧﺘﻬﻴﻨﺎ اﻟﺤﻤﺪ ﻟﻠﻪ ﻣﻦ ﻣﻠﻒ اﻟﻬﻮمتﻴﻞ ﺑﻘﻲ ﻋﻠﻴﻨﺎ ﻣﻠﻒ اﻟﺒﻲ اﺗﺶ يب‬
:fopen ‫ﺑﺴﻴﻂ ﺟﺪا ﻳﻌﺘﻤﺪ ﻋﲆ اﻟﺪاﻟﺔ‬
<?php
$handle = fopen("http://www.google.com/complete/search?
hl=en&js=true&qu=" .$_GET["qu"], "r");
while (!feof($handle)){
$text = fgets($handle);
echo $text;
}
fclose($handle);
?>
‫ ﻓﺘﺴﺎﻋﺪﻧﺎ ﻋﲆ ﻗﺮاءة‬fgets ‫ اذا وﺻﻠﻨﺎ اﱃ ﻧﻬﺎﻳﺔ اﳌﻠﻒ اﻣﺎ اﻟﺪاﻟﺔ‬true ‫ ﺗﻌﻄﻲ اﻟﻘﻴﻤﺔ‬feof ‫اﻟﺪاﻟﺔ‬
‫ ﻟﺘﺤﺮﻳﺮ اﻟﺬاﻛﺮة‬fclose ‫ و اﺧريا ﻧﻘﻮم ﺑﺎﻏﻼق اﳌﻠﻒ ﺑﺎﻟﺪاﻟﺔ‬text$ ‫اﻟﺒﻴﺎﻧﺎت و ﺗﺨﺰﻳﻨﻬﺎ ﰲ ﻣﺘﻐري ﻧﴢ‬
.
‫و ﻗﺪ ﺗﺘﺴﺎﺋﻞ ﳌﺎذا مل ﻧﺴﺘﺨﺪم ﻣﻠﻒ واﺣﺪ ﻓﻘﻂ ﺑﺪﻻ ﻣﻦ ﻣﻠﻔني مبﻌﻨﻰ ﳌﺎذا مل ﻧﺘﺼﻞ ﺑﻐﻮﻏﻞ ﻣﺒﺎﴍة ﻣﻦ‬
‫ﻣﻠﻒ اﻟﻬﻮمتﻴﻞ دون اﻟﺤﺎﺟﺔ ﻟﺴﻜﺮﺑﺖ اﻟﺒﻲ اﺗﺶ يب و اﻟﺠﻮاب ﻫﻮ ﻟﺘﻔﺎدي رﺳﺎﺋﻞ اﻟﺘﺤﺬﻳﺮ اﳌﺘﻜﺮرة اﻟﺘﻲ‬
. ‫ﻳﻈﻬﺮﻫﺎ اﳌﺘﺼﻔﺢ ﻟﺪواﻋﻲ اﻣﻨﻴﺔ‬
‫اﻟﺘﺤﻘﻖ ﻋﱪ اﻟﺴريﻓﺮ‬

‫ﻃﺒﻌﺎ ﻧﺤﻦ ﺗﻌﻮدﻧﺎ ان ﻳﺘﻢ اﻟﺘﺤﻘﻖ ﻣﻦ اﻟﻨامذج ﺑﺎﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﻣﺒﺎﴍة اي ﺑﺎﳌﺘﺼﻔﺢ دون اﻟﺤﺎﺟﺔ اﱃ‬
‫اﻟﺮﺟﻮع اﱃ اﻟﺴريﻓﺮ ﻟﻜﻦ ﻣﺎذا ﻟﻮ اردت اﻟﺘﺤﻘﻖ ﻣﻦ ﻛﻠﻤﺔ ﻣﺮور ؟ ﻓﻬﻞ ﺳﺘﻀﻊ ﻛﻠامت اﳌﺮور ﺿﻤﻦ ﻛﻮد‬
‫اﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ و ﺗﻘﺪﻣﻬﺎ ﻋﲆ ﻃﺒﻖ ﻣﻦ ذﻫﺐ ﻟﻠﻬﻜﺮ؟!!! ﻃﺒﻌﺎ ﻻ اﻟﺤﻞ ﺳﻬﻞ ﺟﺪا ﺗﻘﻮم ﺑﺎﻧﺸﺎء ﻓﻨﻜﺸﻦ‬
‫ ﻓﺎذا ﻛﺘﺐ اﳌﺴﺘﺨﺪم اﺳﻢ ﻣﺤﺠﻮز ﺗﻈﻬﺮ ﻟﻪ‬onKeyUp ‫ و ﺗﺮﺑﻄﻬﺎ ﺑﺎﻟﺤﺪث‬checkName
:‫رﺳﺎﻟﺔ ﻋﺬرا ﻓﻬﺬا اﻻﺳﻢ ﻣﺤﺠﻮز‬

<html dir="rtl">
<head>
#top{
width:150px;
background-color:#0FF;
color:#F00;
font-size:18px;
font-weight:900;
}
</style>
var ajax = false;
{
}
{
}
//_____________________
function getData(divId,dataSourse)
{
if(ajax)
{
{
{
document.getElementById(divId).innerHTML = ajax.responseText;
}
}
ajax.send(null);
}
}
//____________________
//
//*************
function checkName(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent : window.event;
input = (keyEvent) ? keyEvent.target : keyEvent.srcElement
if(keyEvent.type == "keyup")
{
if(input.value)
{
getData("top","login.php?user_name="+input.value);
}
else
{
document.getElementById("top").innerHTML = "<div></div>";
}
}
}
//*************
</script>

</head>
<body>
<input type="text" name="user_name" id="user_name"
onKeyUp="checkName(event)">
</body>
</html>
: ‫ﻻ ﺷﻴﺊ ﺟﺪﻳﺪ ﻧﺘﺤﻘﻖ ﻣﻦ ان اﳌﺴﺘﺨﺪم ﻳﻜﺘﺐ ﰲ اﻟﺤﻘﻞ‬
if(input.value)
{
getData("top","login.php?user_name="+input.value);
}
: login.php ‫ﺳرنﺳﻞ ﻣﺎ ﻳﻜﺘﺒﻪ ﰲ ﻣﺘﻐري اﺳﻤﻪ ﻳﻮزر ﻧﻴﻢ ﻟﺴﻜﺮﺑﺖ اﻟﺒﻲ اﺗﺶ يب‬

<html dir="rtl">
<head>
</head>
<body>
<?php
extract($_GET);
if($user_name == "ayman" || $user_name == "‫ || "اميﻦ‬$user_name
== "‫)"اميﻦ ﻛﺰة‬
{
print "‫;"ﻋﺬرا ﻓﻬﺬا اﻻﺳﻢ ﻣﺤﺠﻮز‬
}
?>
</body>
</html>
: ‫ اﺳامء ﻣﺤﻈﻮرة ﻟﻜﻦ ﺑﺎﻟﻌﺎدة ﻧﺴﺘﻌﻠﻢ ﻣﻦ ﻗﻮاﻋﺪ اﻟﺒﻴﺎﻧﺎت و اﻻن ﻟﻨﺠﺮﺑﻬﺎ ﺑﺎﳌﺘﺼﻔﺢ‬3 ‫ﻛام ﺗﺮى وﺿﻌﻨﺎ‬
‫اﻟﺤﻠﻮ ﺑﺎﳌﻮﺿﻮع اﻧﻚ ﺗﺘﺤﻘﻖ ﻋﱪ اﻟﺴريﻓﺮ ﺑﺪون ﺗﺤﺪﻳﺚ اﻟﺼﻔﺤﺔ و ﻫﻮ ﻣﺎ ﻳﺪل ﻋﲆ اﻧﻚ ﻣﱪﻣﺞ اﺟﺎﻛﺲ‬
‫ﻣﺤﱰف ﻟﻜﻦ ﻫﻨﺎك ﻣﻼﺣﻈﺔ ان ﻫﺬا ﻗﺪ ﻳﺆدي اﱃ ارﻫﺎق اﻟﺴريﻓﺮ‬
‫اﻟﺤﺼﻮل ﻋﲆ ﻣﻌﻠﻮﻣﺎت اﻟﻬﻴﺪر‬
: open ‫ﻧﺤﻦ ﺗﻌﻮدﻧﺎ ﻋﲆ اﺳﺘﺨﺪام اﺣﺪ اﻟﻄﺮﻳﻘﺘني ﺟﻴﺖ او ﺑﻮﺳﺖ ﻣﻊ اﻟﺨﺎﺻﻴﺔ‬
;(ajax.open("get",dataSourse
‫ﻟﻜﻦ ﻣﺎذا ﻟﻮ اردﻧﺎ اﻟﺤﺼﻮل ﻋﲆ ﻣﻌﻠﻮﻣﺎت ﺣﻮل ذﻟﻚ اﳌﻠﻒ و ﺣﻮل اﻟﺴريﻓﺮ و ﻟﻴﺲ ﻃﺒﺎﻋﺔ ﻣﺤﺘﻮﻳﺎت‬
‫ اي‬HEAD ‫اﳌﻠﻒ ﻣﺜﻼ ﻧﺮﻳﺪ ان ﻧﻌﺮف ﻣﺘﻰ ﺗﻢ ﺗﻌﺪﻳﻞ اﳌﻠﻒ ؟ ﰲ ﻫﺬه اﻟﺤﺎﻟﺔ ﻧﺴﺘﺨﺪم اﻟﻄﺮﻳﻘﺔ‬
: ‫ﺑﻬﺬه اﻟﻄﺮﻳﻘﺔ‬
;(ajax.open("HEAD",dataSourse
: ‫و ﺑﺎﳌﺜﺎل ﻳﺘﻀﺢ اﳌﻘﺎل‬
<html>
<head>
var ajax = false;
{
}
{
}
//_______________
function getData(dataSourse,divId)
{
if(ajax)
{
var ob = document.getElementById(divId);
ajax.open("HEAD",dataSourse);
{
{
ob.innerHTML = ajax.getAllResponseHeaders();
}
}
ajax.send(null);
}
}
//____________________________________
</script>
<title>Ayman for php</title>
</head>
<body>
<input type="button" value="Click Me"
onclick="getData('data.txt','centerDiv')" />
<b><big>
<div id="centerDiv"></div>
</big></b>
</body>
</html>
getAllResponseHeaders ‫اﻟﻔﻜﺮة اﻟﺜﺎﻧﻴﺔ اﻟﺠﺪﻳﺪة ﻫﻨﺎ ﻫﻲ اﻧﻨﺎ اﺳﺘﺨﺪﻣﺎ اﻟﺨﺎﺻﻴﺔ‬

‫ و اﻟﺴﺒﺐ اﻧﻨﺎ ﻻ ﻧﺮﻳﺪ ﻣﺤﺘﻮﻳﺎت اﳌﻠﻒ اﻟﻨﴢ و امنﺎ ﻧﺮﻳﺪ‬responseText ‫ﻋﻮﺿﺎ ﻋﻦ اﻟﺨﺎﺻﻴﺔ‬
.‫اﻟﻬﻴﺪر‬
:‫و اﻻن ﻟﻨﺴﺘﻌﺮﺿﻬﺎ ﺑﺎﳌﺘﺼﻔﺢ‬
‫راﺋﻊ ﺟﺪا ﻫﺬه ﺟﻤﻴﻊ ﻣﺤﺘﻮﻳﺎت اﻟﻬﻴﺪر ﻟﻜﻦ ﻣﺎذا ﻟﻮ اردت ﺟﺰء ﻣﻌني ﻣﻦ اﻟﻬﻴﺪر ﻣﺜﻼ ﻧﺮﻳﺪ اﺳﺘﺨﻼص اﺧﺮ‬
‫ ﻋﻮﺿﺎ‬getResponseHeader ‫ و اﻟﺤﻞ ﺳﻬﻞ ﺟﺪا ﻧﺴﺘﺨﺪم‬Last-Modified ‫ﺗﻌﺪﻳﻞ‬
: ‫ اي اﻧﻚ ﻻ ﺗﺮﻳﺪ ﻛﻞ ﻣﺤﺘﻮﻳﺎت اﻟﻬﻴﺪر‬getAllResponseHeaders ‫ﻋﻦ‬

<html>
<head>
var ajax = false;
{
}
{
}
//_______________
{
if(ajax)
{
{
{
ob.innerHTML = " ‫ اﺧﺮ ﺗﻌﺪﻳﻞ ﻟﻠﻤﻠﻒ‬data.txt ‫;" ﻛﺎن ﺑﺘﺎرﻳﺦ‬
ob.innerHTML += ajax.getResponseHeader("Last-Modified");
}
}
ajax.send(null);
}
}
//____________________________________
</script>
</head>
<body>
<h3>
<div dir="rtl" id="centerDiv"></div>
</h3>
</body>
</html>
: ‫ ومل ﻧﱰﻛﻬﺎ ﻓﺎرﻏﺔ و اﻻن ﻟرناﻫﺎ ﰲ اﳌﺘﺼﻔﺢ‬Last-Modified ‫ﻛام ﺗﺮى ﻣﺮرﻧﺎ ﻟﻬﺎ ﻗﻴﻤﺔ‬
‫ ﻟيك‬Date ‫ﻃﺒﻌﺎ اﻟﻬﻴﺪر اﻟﺘﻲ ﺟﻠﺒﺘﻬﺎ ﻣﻦ اﻟﺴريﻓﺮ ﻋﲆ ﺻﻴﻐﺔ ﻧﺺ ﻣﺎ راﻳﻚ ان ﻧﺤﻮﻟﻬﺎ اﱃ ﻛﺎﺋﻦ ﺗﺎرﻳﺦ‬
: ‫ميﻜﻨﻚ اﳌﺎﻗﺎرﻧﺔ ﺑني ﺗﺎرﻳﺨني ﻣﺜﻼ‬

<html>
<head>
var ajax = false;
{
}
{
}
//_______________
{
if(ajax)
{
{
{
var date = new Date(ajax.getResponseHeader("Last-Modified"));
alert (" ‫ رﻗﻢ اﻟﻴﻮم ﺑﺎﻟﺸﻬﺮ‬: " + date.getDate());
alert ("‫رﻗﻢ اﻟﻴﻮم ﺑﺎﻻﺳﺒﻮع ﻣﻦ واﺣﺪ اﱃ ﺳﺘﺔ‬: " + date.getDay());
alert ("‫رﻗﻢ اﻟﺸﻬﺮ ﺑﺎﻟﺴﻨﺔ ﻣﻦ ﺻﻔﺮ اﱃ اﺣﺪى ﻋﴩ‬: " + date.getMonth());
alert (" ‫ اﻟﺴﻨﺔ‬: " + date.getFullYear());
alert (" ‫اﻟﺴﺎﻋﺔ‬: " + date.getHours());
alert (" ‫اﻟﺪﻗﻴﻘﺔ‬: " + date.getMinutes());
alert (" ‫ اﻟﺜﺎﻧﻴﺔ‬: " + date.getSeconds());
}
}
ajax.send(null);
}
}
//____________________________________
</script>
</head>
<body>
<h3>
</h3>
</body>
</html>
:‫ﻋﺮﻓﻨﺎ ﻣﺘﻐري ﺟﺪﻳﺪ اﺳﻤﻴﻨﺎه ﺛﻢ ﻋﺮﻓﻨﺎه ﻋﲆ اﻧﻪ ﻛﺎﺋﻦ ﺗﺎرﻳﺦ‬

(("var date = new Date(ajax.getResponseHeader("Last-Modified

getHours ‫و ﻃﺎﳌﺎ ﻟﺪﻳﻚ اﻟﻜﺎﺋﻦ ميﻜﻨﻚ اﻻﺳﺘﻔﺎدة ﻣﻦ ﺟﻤﻴﻊ ﺧﻮاص ﻫﺬا اﻟﻜﺎﺋﻦ ﻣﺜﻼ اﻟﺨﺎﺻﻴﺔ‬
. . . ‫ﺗﻌﻄﻴﻚ اﻟﺴﺎﻋﺔ‬
: ‫ رﺳﺎﺋﻞ‬6 ‫و ﺳﻴﻘﻮم اﳌﺘﺼﻔﺢ ﺑﻌﺮض‬
‫اﻟﺘﺤﻘﻖ ﻣﻦ راﺑﻂ‬

‫ﻗﺒﻞ ان ﻧﺤﻤﻞ ﻣﻠﻒ ميﻜﻨﻨﺎ ان ﻧﺘﺤﻘﻖ ﻣﻦ ﺻﺤﺔ اﻟﺮاﺑﻂ و ﻳﻜﻮن ذﻟﻚ ﺑﻮﺿﻊ ﴍط اذا اﻛﻨﺖ اﻟﺨﺎﺻﻴﺔ‬
status ‫ ﻓﻬﺬا ﻳﻌﻨﻲ ان ﻛﻞ ﺷﻴﺊ متﺎم و اﻟﺮاﺑﻂ ﺻﺤﻴﺢ اﻣﺎ اذا اﻛﻨﺖ‬200 ‫ ﺗﺴﺎوي‬status
: ‫ ﻓﺬﻟﻚ ﻳﻌﻨﻲ ان اﻟﺮاﺑﻂ ﺧﻄﺄ‬404 ‫ﺗﺤﻤﻞ اﻟﻘﻴﻤﺔ‬

<html>
<head>
var ajax = false;
{
}
{
}
//_______________
{
if(ajax)
{
{
if(ajax.readyState == 4 )
{
if(ajax.status == 200)
{
ob.innerHTML = "‫;" اﻟﺮاﺑﻂ ﺻﺤﻴﺢ‬
}
else if (ajax.status == 404)
{
ob.innerHTML = " ‫;"ﻋﺬرا اﳌﻠﻒ ﻏري ﻣﻮﺟﻮد او اﻟﺮاﺑﻂ ﻏﻠﻂ‬
}
}
}
ajax.send(null);
}
}
//____________________________________
</script>
</head>
<body>
<form>
<input type="button" onClick="getData('data.txt')"
value="data.txt">
<input type="button" onClick="getData('tttttt.txt')"
value="tttttttt.txt">
</form>
<h3>
</h3>
</body>
</html>
: ‫ ﺳﺘﻈﻬﺮ ﻟﻚ رﺳﺎﻟﺔ ﺑﺎﳌﺘﺼﻔﺢ‬data.txt ‫ﻓﻬﺬا اﻟﻜﻮد ﻣﻔﻴﺪة ﺟﺪا ﻓﻌﻨﺪ ﻓﺤﺼﻚ ﻟﻠﻤﻠﻒ‬

: ‫ ﻃﺒﻌﺎ ﻫﺬا اﳌﻠﻒ ﻏري ﻣﻮﺟﻮد‬tttttttt.txt ‫اﻣﺎ اذا ﺣﺎوﻟﺖ اﻟﺘﺤﻘﻖ ﻣﻦ اﳌﻠﻒ‬
XMLHttpRequest ‫اﻛرث ﻣﻦ ﻛﺎﺋﻦ‬
‫ﻣﺎذا ﻟﻮ ﻛﺎن ﻟﺪﻳﻚ ﻋﺪة ازرار و ﻗﺎم اﳌﺴﺘﺨﺪم ﺑﺎﻟﻀﻐﻂ ﻋﻠﻴﻬﺎ واﺣﺪ ﺗﻠﻮ اﻻﺧﺮ و ﺑﴪﻋﺔ ﺟﺪا ﻓﻜﺜري ﻣﻦ‬
‫ ﻃﺒﻌﺎ ﻫﺬا ﺳﻴﺆدي اﱃ ﺗﺸﻮﻳﺶ اﻟﺴﻜﺮﺑﺖ و ارﺑﺎﻛﻪ ﻻن اﳌﺴﺘﺨﺪم ﻳﺮﺳﻞ ﻃﻠﺐ‬, ‫اﳌﺴﺘﺨﺪﻣني ﻳﻔﻌﻠﻮن ذﻟﻚ‬
!! ‫ﺟﺪﻳﺪ ﻗﺒﻞ ان ﺗﻜﺘﻤﻞ اﻻﺳﺘﺠﺎﺑﺔ ﻟﻠﻄﻠﺐ اﻟﻘﺪﻳﻢ‬
: ‫ ﺑﻨﻔﺲ اﻟﻄﺮق اﻟﺴﺎﺑﻘﺔ‬XMLHttpRequest ‫و ﻳﺎيت اﻟﺤﻞ ﻫﻨﺎ ﺑﺎﻧﺸﺎء ﻛﺎﺋﻨﺎت ﻣﺘﻌﺪدة‬

<html dir="rtl">
<head>
</head>
var ajax1 = false;
var ajax2 = false;
{
ajax1 = new ActiveXObject("Microsoft.XMLHTTP");
ajax2 = new ActiveXObject("Microsoft.XMLHTTP");
}
{
ajax1 = new XMLHttpRequest();
ajax2 = new XMLHttpRequest();
}
//_______________
function getData1(dataSourse)
{
if(ajax1)
{
ajax1.open("GET",dataSourse);
ajax1.onreadystatechange = function()
{
if(ajax1.readyState == 4 && ajax1.status == 200)
{
document.getElementById("div1").innerHTML =
ajax1.responseText;
}
}
ajax1.send(null);
}
}
//____________________________________
//
//*****************
function getData2(dataSourse)
{
if(ajax2)
{
ajax2.open("GET",dataSourse);
ajax2.onreadystatechange = function()
{
if(ajax2.readyState == 4 && ajax2.status == 200)
{
document.getElementById("div1").innerHTML =
ajax2.responseText;
}
}
ajax2.send(null);
}
}
//*****************
</script>
<body>
<p> </p>
<p>
<form>
<input type="button" onClick="getData1('file1.txt')" value=" ‫اﳌﻠﻒ‬
‫>"اﻻول‬
<input type="button" onClick="getData2('file2.txt')" value=" ‫اﳌﻠﻒ‬
‫>"اﻟﺜﺎين‬
</form>
</p>
<div dir="ltr" style="font-size:24px;" id="div1"></div>
</body>
</html>
‫ و اﻟﺪاﻟﺔ‬getData1 ‫ و ﻋﺮﻓﻨﺎ اﻳﻀﺎ داﻟﺘني‬ajax2 ‫ و‬ajax1 ‫ﻛام ﻻﺣﻈﺖ ﻋﺮﻓﻨﺎ ﻣﺘﻐريﻳﻦ‬

‫ ﻓﻬﺬا ﻣﻔﻴﺪ ﻟﺘﻔﺎدي ارﺑﺎك اﻟﺴﻜﺮﺑﺖ و ﻫﺬه ﻫﻲ اﻟﻨﺘﻴﺠﺔ ﰲ اﳌﺘﺼﻔﺢ‬getData2
‫ و ﻣﺎذا ﻟﻮ‬, XMLHttpRequest ‫راﺋﻊ ﺟﺪا ﻟﻜﻦ اﻟﻜﻮد اﻟﺴﺎﺑﻖ ﻳﺴﻤﺢ ﻟﻚ ﺑﺎﻧﺸﺎء ﻛﺎﺋﻨني ﻓﻘﻂ‬
‫ﺿﻐﻂ اﳌﺴﺘﺨﺪم ﻋﲆ ﻧﻔﺲ اﻟﺰر ﻋﺪة ﻣﺮات و ﺑﴪﻋﺔ ﰲ ﻛﻞ ﻣﺮة ﺳﻴﻄﻠﺐ ﻃﻠﺐ ﺟﺪﻳﺪ ﻣﻦ اﻟﺴريﻓﺮ ﻗﺒﻞ‬
.‫ان ﻳﻜﺘﻤﻞ ﺗﺤﻤﻴﻞ اﻟﻄﻠﺐ اﻟﻘﺪﻳﻢ و ﻳﻜﻮن اﻟﺤﻞ ﻫﻨﺎ ﺑﺎﻧﺸﺎء ﻓﻨﻜﺸﻦ داﺧﻠﻴﺔ‬
inner function ‫اﻟﻔﻨﻜﺸﻦ اﻟﺪاﺧﻠﻴﺔ‬
: ‫و ﻫﻲ داﻟﺔ ﻋﺎدﻳﺔ ﻧﺤﻦ ﻧﻌﺮﻓﻬﺎ داﺧﻞ داﻟﺔ اﺧﺮى و ﻧﺴﻤﻴﻬﺎ ﻛام ﻧﺮﻳﺪ‬

<html>
<head>
function outer(data)
{
var num1 = data;
//+++++++++++++++++++++++++
function inner(num2)
{
alert(num1+num2);
}
//+++++++++++++++++++++++++
inner(5);
}
</script>
</head>
<body onLoad="outer(10)" >
</body>
</html>
. ‫ﻃﺒﻌﺎ اﻟﻔﻨﻜﺸﻦ اﻟﺪاﺧﻠﻴﺔ ﻟﺪﻳﻬﺎ اﻟﺼﻼﺣﻴﺎت ﻟيك ﺗﺼﻞ اﱃ اﳌﻌﺎﻣﻞ اﻟﺬي ﻣﺮرﻧﺎه ﻟﻠﺪاﻟﺔ اﻟﺨﺎرﺟﻴﺔ‬
‫ ﺗﺼﻨﻊ ﻧﺴﺨﺔ ﺟﺪﻳﺪة ﻣﻦ ﻫﺬه اﻟﻔﻨﻜﺸﻦ‬outer ‫ﻫﻞ ﺗﻌﻠﻢ اﻧﻚ ﰲ ﻛﻞ ﻣﺮة ﺗﺴﺘﺪﻋﻲ اﻟﻔﻨﻜﺸﻦ‬
‫ اﻟﺬي ﺳﺘﺘﻌﺎﻣﻞ ﻣﻌﻪ اﻟﻔﻨﻜﺸﻦ اﻟﺪاﺧﻠﻴﺔ‬num1 ‫ و ﺑﺎﻟﺘﺎﱄ ﻳﺘﻢ اﻧﺸﺎء ﻗﻴﻤﺔ ﺟﺪﻳﺪة ﻣﻦ اﳌﺘﻐري‬outer
‫ ﺣﻴﺚ ﺳﻴﺘﻢ اﻧﺸﺎء ﻧﺴﺨﺔ ﺟﺪﻳﺪة ﻣﻨﻬﺎ‬getData ‫ ﺑﺪورﻫﺎ و ﻧﻔﺲ اﻟﺸﻴﺊ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻔﻨﻜﺸﻦ‬inner
‫ ﰲ ﻛﻞ ﻣﺮة ﻳﺘﻢ اﺳﺘﺪﻋﺎﺋﻬﺎ و ﺳﺘﻜﻮن اﻟﻔﻨﻜﺸﻦ‬XMLHttpRequest ‫ﺗﺤﻮي ﻛﺎﺋﻦ ﺟﺪﻳﺪ‬
‫اﻟﺪاﺧﻠﻴﺔ او اﻟﺘﻲ ﻛﻨﺎ ﻧﺴﻤﻴﻬﺎ اﳌﺠﻬﻮﻟﺔ ﻻﻧﻬﺎ ﺑﺪون اﺳﻢ ﺳﺘﻜﻮن ﻗﺎدرة ﻋﲆ اﻟﻮﺻﻮل اﱃ ﻫﺬا اﻟﻜﺎﺋﻦ اﻟﺠﺪﻳﺪ‬
:
<html dir="rtl">
<head>
</head>
//____________________________________
{
var ajax = false;
{
}
{
}
if(ajax)
{
ajax.open("GET",dataSourse);
{
{
document.getElementById("div1").innerHTML = ajax.responseText;
delete ajax;
ajax = null;
}
}
ajax.send(null);
}
}
//____________________________________
</script>
<body>
<p> </p>
<p>
<form>
<input type="button" onClick="getData('file1.txt')" value=" ‫>"اﳌﻠﻒ اﻻول‬
<input type="button" onClick="getData('file2.txt')" value=" ‫>"اﳌﻠﻒ اﻟﺜﺎين‬
</form>
</p>
<div dir="ltr" style="font-size:24px;" id="div1"></div>
</body>
</html>
getData ‫ داﺧﻞ اﻟﻔﻨﻜﺸﻦ‬XMLHttpRequest ‫اﻟﺠﺪﻳﺪ ﺑﺎﻟﻜﻮد اﻟﺴﺎﺑﻖ اﻧﻨﺎ ﻋﺮﻓﻨﺎ اﻟﻜﺎﺋﻦ‬

‫ ﰲ ﻛﻞ ﻣﺮة ﻳﺘﻢ‬getData ‫و ﻟﻴﺲ ﺧﺎرﺟﻬﺎ و ذﻟﻚ ﻟيك ﻳﺘﻢ اﻧﺸﺎء ﻧﺴﺨﺔ ﺟﺪﻳﺪة ﻣﻦ اﻟﻔﻨﻜﺸﻦ‬
‫ ﺟﺪﻳﺪ ﻳﻌﻨﻲ ﺑﺎﺧﺘﺼﺎر‬XMLHttpRequest‫اﺳﺘﺪﻋﺎﺋﻬﺎ و ﺑﺎﻟﺘﺎﱄ ﻧﻘﺪم ﻟﻠﻔﻨﻜﺸﻦ اﻟﺪاﺧﻠﻴﺔ ﻛﺎﺋﻦ‬
‫ ﺟﺪﻳﺪ ﻟﻜﻞ ﻃﻠﺒﻴﺔ‬XMLHttpRequest ‫اﻧﺖ ﺑﺬﻟﻚ ﺗﺼﻨﻊ‬
: ‫و ﻻ ﻣﺎﻧﻊ ان ﺗﺤﺮر اﻟﺬاﻛﺮة ﻣﻦ اﻟﻜﺎﺋﻦ ﻛﺨﻄﻮة اﺣﱰاﻓﻴﺔ‬
delete ajax;
ajax = null;
: ‫ﻃﺒﻌﺎ ﻟﻦ ﺗﺘﻐري اﻟﻨﺘﻴﺠﺔ اﻟﻔﺮق اﻟﻮﺣﻴﺪ ﻫﻮ اﻧﻚ ﺗﺨﺼﺺ ﻛﺎﺋﻦ ﺟﺪﻳﺪ ﻟﻜﻞ ﻃﻠﺐ ﻣﻦ اﻟﺴريﻓﺮ‬

Frameworks ‫اﻟﻔﺼﻞ اﻟﺮاﺑﻊ‬

‫ﻧﺤﻦ ﺗﻌﻮدﻧﺎ ان ﻧﺒﻨﻲ ﺳﻜﺮﺑﺖ اﻻﺟﺎﻛﺲ ﻣﻦ ﺗﺤﺖ اﻟﺼﻔﺮ و ﻟﻜﻦ ﻫﻨﺎك ﻃﺮﻳﻘﺔ ﺗﻮﻓﺮ ﻋﻠﻴﻚ اﻟﻜﺜري ﻣﻦ‬
‫ و ﻫﻲ ﻋﺒﺎرة ﻋﻦ ﻣﻠﻔﺎت ﺟﺎﻓﺎ‬Frameworks ‫اﻟﻮﻗﺖ و اﻟﺠﻬﺪ و ﻫﻲ ان ﺗﺴﺘﺨﺪم اﺟﺎﻛﺲ‬
‫ﺳﻜﺮﻳﺒﺖ ﺗﺤﻮي ﻣﻜﺘﺒﺎت ﺟﺎﻫﺰة ﻣﻦ اﻟﺪوال ﻓﻘﻂ ﻗﻢ ﺑﺘﻀﻤني ﻣﻠﻔﺎت اﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﺿﻤﻦ ﺑﺮﻧﺎﻣﺠﻚ ﺛﻢ‬
‫ﻗﻢ ﺑﺎﺳﺘﺪﻋﺎء اﻟﻔﻨﻜﺸﻦ اﻟﺘﻲ ﺗﺮﻳﺪ‬
HTML ‫دﻳﻨﺎﻣﻴﻚ‬
‫ و ﻫﻮ ﺗﻐﻴري ﻋﻨﺎﴏ ﰲ ﺻﻔﺤﺔ اﻟﻮﻳﺐ ﺑﺪون اي ﺗﺤﺪﻳﺚ‬DHTML ‫ﻻ ﺑﺪ و اﻧﻚ ﺳﻤﻌﺖ ﺳﻤﻌﺖ ﻋﻦ‬
‫ﻟﻠﺼﻔﺤﺔ اﻻن ارﻳﺪ ان ﺗﻔﻜﺮ و ﺗﺤﺎول ان ﺗﺠﺪ ﻃﺮﻳﻘﺔ ﻟﻌﺮض ﺻﻮرة ﻣﺘﻐرية اي ﺗﺘﻐري ﻫﺬه اﻟﺼﻮرة ﺑﺪون‬
‫اﻋﺎدة ﺗﺤﻤﻴﻞ اﻟﺼﻔﺤﺔ ﻫﺬا ﺳﻬﻞ ﺟﺪا ﺑﺎﺳﺘﺨﺪام ﺗﻘﻨﻴﺔ اﻻﺟﺎﻛﺲ و ﺧﺎﺻﺔ اﻧﻚ ﻣﱪﻣﺞ اﺟﺎﻛﺲ ﻣﺤﱰف ﻟﻦ‬
‫ﻳﺼﻌﺐ ﻋﻠﻴﻚ ذﻟﻚ‬
‫ و ﻟﻜﻦ ﻫﺬا اﻟﻜﺎﺋﻦ ﻳﺴﻤﺢ ﻟﻨﺎ ﺑﺠﻠﺐ‬XMLHttpRequest ‫ﺣﺴﻨﺎ ﻻ ﺑﺪ ﻣﻦ اﺳﺘﺨﺪام اﻟﻜﺎﺋﻦ‬

‫ﻧﺺ او اﻛﺲ ام ال و ﻻ ﻳﺴﻤﺢ ﻟﻨﺎ ﺑﺴﺤﺐ ﺻﻮر ﻣﻦ اﻟﺴريﻓﺮ و اﻟﺤﻞ ﺑﺒﺴﺎﻃﺔ ان ﻧﺨﺰن راﺑﻂ اﻟﺼﻮرة‬
‫ ارﻳﺪ‬. ‫ ﻓﻴﻘﻮم اﳌﺘﺼﻔﺢ ﺑﺘﺤﻤﻴﻞ اﻟﺼﻮرة‬img ‫ﻋﲆ ﻣﻠﻒ ﻧﴢ ﺛﻢ ﻧﺤﻤﻞ ﻫﺬا اﻟﻨﺺ و ﻧﻀﻌﻪ ﰲ ﻋﻨﴫ‬
: ‫ان ﺗﺤﺎول ان ﺗﺼﻨﻊ اﻟﺴﻜﺮﺑﺖ ﺑﻨﻔﺴﻚ ﻓﺒﻞ ان ﺗﻘﺮأ اﻟﻜﻮد‬

<html dir="rtl">
<head>
<title>DHTML</title>
</head>
//____________________________________
{
var ajax = false;
{
}
{
}
if(ajax)
{
ajax.open("GET",dataSourse);
{
{
var src = ajax.responseText
document.getElementById("div1").innerHTML = "<img src
='"+src+"' width=200>" ;
delete ajax;
ajax = null;
}
}
ajax.send(null);
}
}
//____________________________________
</script>
<body>
<table width="400" border="0" align="center" cellpadding="3"
cellspacing="3">
<tr>
<td width="195" align="center"><h3
onMouseOver="getData('file2.txt')">‫<ﻣﻨﺘﺪى اﻟﻜﻴامء‬/h3></td>
<td width="178" align="center"><h3
onMouseOver="getData('file1.txt')">‫<ﻣﻨﺘﺪى ﺻﻮر اﻟﻄﺒﻴﻌﺔ‬/h3></td>
</tr>
<tr align="center">
<td height="179" colspan="2"><div id="div1"></div></td>
‫>‪</tr‬‬
‫>‪</table‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﴍط ان ﺗﻀﻊ ﻣﺠﻠﺪ اﻟﺼﻮر و اﳌﻠﻔﺎت اﻟﻨﺼﻴﺔ و ﻣﻠﻒ اﻟﻬﻮمتﻴﻞ ﺑﻨﻔﺲ اﳌﺠﻠﺪ ‪:‬‬
‫ﻋﻨﺪ ﻣﺮور اﳌﺎوس ﻓﻮق ﺟﻤﻠﺔ ﻣﻨﺘﺪى اﻟﻜﻴﻤﻴﺎء ﺗﻈﻬﺮ ﺻﻮرة ﻣﻨﺎﺳﺒﺔ‬
‫اﻣﺎ اذا ﻣﺮ ﻣﺆﴍ اﳌﺎوس ﻓﻮق ﻣﻨﺘﺪى ﺻﻮر اﻟﻄﺒﻴﻌﺔ ‪:‬‬
‫و ﻻﺗﻨﴗ ان ﺗﻜﺘﺐ اﻟﺮاﺑﻂ اﻟﺼﺤﻴﺢ ﰲ اﳌﻠﻒ اﻟﻨﴢ‪:‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫‪ ‬‬
‫ﻫﻴﺎ ﻟﻨﺒﻨﻲ ‪Ajax Frameworks‬‬

‫‪ ‬‬
‫ﻛام اﺳﻠﻔﻨﺎ اﺳﺘﺨﺪام ‪ Ajax Frameworks‬ﻳﻮﻓﺮ ﻋﻠﻴﻚ اﻟﻜﺜري ﻣﻦ اﻟﻮﻗﺖ و اﻟﺠﻬﺪ و ﻣﺎ ﻫﻲ اﻻ‬
‫ﻣﻠﻔﺎت ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﻧﻘﻮم ﺑﺘﻀﻤﻴﻨﻬﺎ ﺑﺼﻔﺤﺘﻨﺎ ﻓﻠﻨﺒﺪا ﺑﺒﻨﺎء ﻣﻠﻒ ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﺳﻨﺤﻔﻈﻪ ﺑﺎﻻﻣﺘﺪاد ‪: js‬‬

// JavaScript Document
function getText(url,callback)
{
var ajax = false;
{
}
{
}
if (ajax)
{
ajax.open("get",url);
{
{
callback(ajax.responseText);
delete ajax;
ajax = null;
}
}
ajax.send(null);
}
}
‫ اﻟﺠﺪﻳﺪ ﻋﻠﻴﻚ ﻫﻮ اﻧﻨﺎ ﻣﺮرﻧﺎ ﻟﻠﻔﻨﻜﺸﻦ‬html. ‫ و ﻟﻴﺲ ﺑﺎﻻﻣﺘﺪاد‬ayman.js ‫اﺣﻔﻈﻪ ﺑﺎﺳﻢ‬

:callback ‫ و ﺛﻢ اﻟﺒﺎراﻣﻴﱰ اﻟﺜﺎين‬url ‫ اﳌﻌﺎﻣﻞ اﻟﺒﺎراﻣﻴﱰ اﻻول‬getText
‫ ؟ ﻧﻘﺼﺪ ﺑﻬﺎ اﺳﻢ اﻟﻔﻨﻜﺸﻦ اﻟﺘﻲ ﺳﺘﻘﻮم مبﻌﺎﻟﺠﺔ اﻟﻨﺺ اﻟﻘﺎدم ﻣﻦ‬callback ‫ﻗﺪ ﺗﺘﺴﺎﺋﻞ ﻣﺎذا ﺗﻌﻨﻲ‬
: ‫اﻟﺴريﻓﺮ ﻃﺒﻌﺎ ﺗﻌﺮﻳﻒ ﻫﺬه اﻟﻔﻨﻜﺸﻦ ﺳﻴﻜﻮن مبﻠﻒ اﻻﺗﺶ يت ام ال‬

:get.html ‫و اﻻن ﻟﻨﻨﺘﻘﻞ اﱃ ﻣﻠﻒ‬

<html>
<head>
#divID
{
background-color:#900;
font-size:24px;
color:#FF0;
width:300px;
overflow:auto;
}
</style>
<script type="text/javascript" src="ayman.js"></script>
function message(text)
{
document.getElementById("divId").innerHTML = text;
}
//----------------------
function show(str)
{
document.getElementById("divId").innerHTML = str;
}
</script>
</head>
<body>
<form>
<input type="button" value=" ‫"رﺳﺎﻟﺔ ﺗﺮﺣﻴﺐ‬
onClick="getText('file1.txt',message)">
<input type="button" value=" ‫"ﺗﺎرﻳﺦ اﳌﺎي اس ﻛﻴﻮ ال‬
onClick="getText('file2.txt',show)">
</form><br>
<div id="divId" align="center"></div>
</body>
</html>
script ‫اوﻻ ﻗﻤﻨﺎ ﺑﺘﻀﻤني ﻣﻠﻒ اﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﺿﻤﻦ ﻋﻨﴫ‬

: ‫و ﻟﻜﻦ اﻳﺎك ان ﺗﻌﺮف اﻟﻔﻨﻜﺸﻦ داﺧﻞ ﻫﺬا اﻟﺴﻄﺮ‬
<script type="text/javascript" src="ayman.js">‫اﻗﺼﺪ ﻻ ﺗﻀﻊ ﺷﻴﺌﺄ ﻫﻨﺎ‬

</script>
: ‫ ﺟﺪﻳﺪ ﻫﻜﺬا‬script ‫و ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ ان ﺗﻌﺮف اﻟﻔﻨﻜﺸﻦ اﻓﺘﺢ ﻋﻨﴫ‬

function message(text)
{
document.getElementById("divId").innerHTML = text;
}
//----------------------
function show(str)
{
document.getElementById("divId").innerHTML = str;
}
‫ ﺛﻢ ميﺮر ﻟﻬﺎ ﻓﻨﻜﺸﻦ‬getText ‫ﺛﻢ اﻧﺸﺄﻧﺎ ﻓﻮرم و ازرار و ﻻﺣﻆ ان ﻛﻞ زر ﻳﺴﺘﺪﻋﻲ ﻧﻔﺲ اﻟﻔﻨﻜﺸﻦ‬
: ‫ و ﻻ ﺣﻆ اﻳﻀﺎ ان اﳌﻠﻔﺎت اﻟﻨﺼﻴﺔ و اﻟﺠﻤﻴﻊ ﺑﻨﻔﺲ اﳌﺠﻠﺪ‬message ‫ او‬show ‫ﻣﺨﺘﻠﻔﺔ ﻣﺜﻼ‬

‫< ﻣﻊ اﻟﻔﻮرم ﻗﻢ ﺑﺤﺬﻓﻪ ﻓﺎﻧﺖ ﻻ ﺗﺤﺘﺎج اﱃ‬label> ‫ﻣﻼﺣﻈﺔ اﺧرية اﺣﻴﺎﻧﺎ اﻟﺪرﻳﻢ وﻳﻔﺮ ﻳﻀﻴﻒ ﺗﻠﻘﺎﺋﻴﺎ‬
.<label> ‫ﻋﻨﴫ‬
:‫و اﻻن ﻟﻨﺠﺮﺑﻪ ﺑﺎﳌﺘﺼﻔﺢ‬
:‫اﻣﺎ اذا ﺿﻐﻄﺖ ﻋﲆ اﻟﺰر اﻟﺜﺎين‬
get Xml

‫اﻻن ﺳﻨﻘﻮم ﺑﺠﻠﺐ ﻣﺤﺘﻮﻳﺎت ﻣﻠﻒ يب اﺗﺶ يب ﻳﺤﻮي ﺑﻴﺎﻧﺎت اﻛﺲ ام ال اوﻻ اﻛﺘﺐ ﻫﺬا اﻟﻜﻮد و اﺣﻔﻈﻪ‬
: script1.php ‫ﺑﺎﺳﻢ‬

<?php
$arr = array("red","green","blue","black");
{
}
?>
: ‫ و ﻫﺬا ﻫﻮ اﻟﻜﻮد‬script2.php ‫و ﻟﺪﻳﻨﺎ ﻣﻠﻒ اﺧﺮ اﺣﻔﻈﻪ ﺑﺎﺳﻢ‬

<?php
$arr = array("yellow","pink");
{
}
?>
‫ ﻓﻘﻂ ﻧﺮﻳﺪ ان‬ayman.js ‫و اﻻن ﻟﻨﻨﺘﻘﻞ اﱃ ﻣﻠﻒ اﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ اﳌﻮﺟﻮد ﻣﺴﺒﻘﺎ ﻟﺪﻳﻚ ﺑﺎﺳﻢ‬
: ‫ ﻫﻜﺬا‬ayman.j ‫ ﻓﻴﺼﺒﺢ اﳌﻠﻒ‬getXml ‫ﻧﻀﻴﻒ داﻟﺔ ﺟﺪﻳﺪة‬
//************************
{
var ajax = false;
{
}
{
}
if (ajax)
{
{
{
delete ajax;
ajax = null;
}
}
ajax.send(null);
}
}
//************************
// getXml
//++++++++++++++++++++++++++++++++++++++++++
function getXml(url,callback)
{
var ajax = false;
{
}
{
}
if (ajax)
{
{
{
callback(xmlDocument);
}
}
ajax.send(null);
}
}
//++++++++++++++++++++++++++++++++++++++++++
‫ ﺑﺪﻻ ﻣﻦ‬ajax.responseXML ‫اﻟﻔﺮق اﻟﻮﺣﻴﺪ ﻫﻮ اﻧﻨﺎ اﺳﺘﺨﺪﻣﻨﺎ‬

‫ ﻻﻧﻨﺎ ﻧﺘﻌﺎﻣﻞ ﻣﻊ ﺑﻴﺎﻧﺎت اﻛﺲ ام ال و اﻻن ﺑﻘﻲ ﻋﻠﻴﻨﺎ ﻣﻠﻒ اﻟﻬﻮمتﻴﻞ‬responseText‫اﻟﺨﺎﺻﻴﺔ‬
: get_xml.html
<html>
<head>
<script type="text/javascript" src="ayman.js"> </script>
<script type="text/javascript" >
//---------------------------------------
function makeOptions(xml)
{
var optionsArr = xml.getElementsByTagName("option");
for(i=0;i< optionsArr.length;i++)
{
Option(optionsArr[i].firstChild.data);
}
}
//---------------------------------------
//______________________________
function setColor()
{
var optionsArr = xmlDocument.getElementsByTagName("option");
index = document.getElementById("selectId").selectedIndex;
document.getElementById("div1").style.color =
}
//______________________________
</script>
</head>
<body>
<form>
<select id="selectId" onChange="setColor()">
<option> choos</option>
</select>
<input type="button"
onClick="getXml('script1.php',makeOptions)" value="‫>"ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﻻوﱃ‬
<input type="button"
onClick="getXml('script2.php',makeOptions)" value="‫>"اﳌﺠﻤﻮﻋﺔ اﻟﺜﺎﻧﻴﺔ‬
</form>
<br>
<div id="div1">
<h1>I love Ajax </h1>
</div>
</body>
</html>
‫ مبﻌﺎﻟﺠﺔ ﺑﻴﺎﻧﺎت اﻻﻛﺲ ام ال و ﺗﺤﻮﻳﻠﻬﺎ اﱃ ﻧﺼﻮص ﻋﺎدﻳﺔ‬makeOptions ‫ﺣﻴﺚ ﺗﻘﻮم اﻟﻔﻨﻜﺸﻦ‬

: ‫ و ﺛﻢ ﻧﻘﻮم ﺑﻌﺮﺿﻬﺎ ﻛﻘﺎمئﺔ اﺧﺘﻴﺎرات‬firstChild.data ‫ﻋﻦ ﻃﺮﻳﻖ اﻟﺨﺎﺻﻴﺔ‬

‫ اﻟﺘﻲ ﻣﻬﻤﺘﻬﺎ ﺗﻐﻴري ﻟﻮن اﻟﻨﺺ ﺣﺴﺐ ﻣﺎ ﻳﺮﻏﺐ اﳌﺴﺘﺨﺪم و ذﻟﻚ‬setColor ‫و ﻟﺪﻳﻨﺎ اﻳﻀﺎ اﻟﻔﻨﻜﺸﻦ‬
:‫ ﺑﻌﺪ ﻣﻌﺮﻓﺔ رﻗﻢ اﻻﻧﺪﻛﺲ ﻟﻠﻌﻨﴫ اﻟﺬي ﺗﻢ اﺧﺘﻴﺎره‬style.color ‫ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﻴﺘني‬
:‫اﻣﺎ ﻫﺬا اﻟﺴﻄﺮ ﻓﻨﻘﻮم ﺑﺤﺬف ﻣﺤﺘﻮﻳﺎت اﻟﻘﺎمئﺔ ﻟﺘﻌﺒﺌﺘﻬﺎ ﺑﻌﻨﺎﴏ ﺟﺪﻳﺪة‬

;selectControl.options.length = 0
: ‫و اﺧريا اﻧﺸﺄﻧﺎ زرﻳﻦ ﻟﻴﻜﻮن ﻟﻠﻤﺴﺘﺨﺪم اﻟﺨﻴﺎر ﺑﺎﻧﺘﻘﺎء ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﳌﻨﺎﺳﺒﺔ‬
<input type="button" onClick="getXml('script1.php',makeOptions)"

value="‫>"ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﻻوﱃ‬
<input type="button" onClick="getXml('script2.php',makeOptions)"
value="‫>"اﳌﺠﻤﻮﻋﺔ اﻟﺜﺎﻧﻴﺔ‬
: ‫و اﻻن ﻟﻨﺴﺘﻌﺮض ﺑﺮﻧﺎﻣﺠﻨﺎ ﺑﺎﳌﺘﺼﻔﺢ‬
. ‫ﻧﺠﺢ اﻟﱪﻧﺎﻣﺞ ﺑﻔﻀﻞ اﻟﻠﻪ ﺗﻌﺎﱃ و ﺑﺎﻣﻜﺎﻧﻚ ﺗﻐﻴري ﻟﻮن اﻟﻨﺺ‬
postText

‫ ﻃﺒﻌﺎ ﻟﻦ ﻧﻔﺘﺢ ﻣﻠﻒ‬postText ‫اﻻن ﺳﻨﻀﻢ ﻓﻨﻜﺸﻦ ﺟﺪﻳﺪة اﱃ ﻣﻜﺘﺒﺘﻨﺎ اﻟﺬﻫﺒﻴﺔ و ﻫﻲ اﻟﻔﻨﻜﺸﻦ‬
:‫ اﻟﻜﻮد اﻟﺘﺎﱄ‬ayman.js ‫ﺟﺪﻳﺪ و امنﺎ ﺳﻨﻜﺘﺐ مبﻠﻔﻨﺎ اﻟﺴﺎﺑﻖ‬

// postText
function postText(url,data,callback)
{
var ajax = false;
{
}
{
}
if (ajax)
{
ajax.open("POST",url);
urlencoded');
{
{
delete ajax;
ajax = null;
}
}
ajax.send(data);
}
}
//________________________________________
: ‫ﻃﺒﻌﺎ اﺳﺘﺨﺪﻣﻨﺎ اﻟﺨﺎﺻﻴﺔ اوﺑﻦ ﻟﻔﺘﺢ اﳌﻠﻒ و ﻣﺮرﻧﺎ ﻟﻬﺎ اﻟﻘﻴﻤﺔ ﺑﻮﺳﺖ ﺑﻼ ﻣﻦ ﺟﻴﺖ‬
: ‫ﺛﻢ وﺿﻌﻨﺎ ﻗﻴﻤﺔ ﻟﻠﻬﻴﺪر ﻃﺒﻌﺎ ﻻ داﻋﻲ ان ﻧﻀﻊ اﻟﻬﻴﺪر ﻣﻊ ﺟﻴﺖ‬
urlencoded');
: ‫و اﺧريا ﻣﺮرﻧﺎ ﻗﻴﻤﺔ داﺗﺎ ﻟﻠﺨﺎﺻﻴﺔ ﺳﻴﻨﺪ ﻋﻮﺿﺎ ﻋﻦ ﻧﺎل اﻟﺘﻲ منﺮرﻫﺎ ﻋﻨﺪ اﺳﺘﺨﺪاﻣﻨﺎ ﺟﻴﺖ‬
ajax.send(data);
: ‫ ﺑﺴﻴﻂ ﺟﺪا‬print.php ‫و اﻻن اﱃ ﻣﻠﻒ اﻟﺒﻲ اﺗﺶ يب‬

<?php
print "<h2> Welcome ".$_POST[user_name]."</h2>";
?>
: ‫ اﻟﺬي ﺳﻴﺤﻮي داﻟﺔ ﻣﻬﻤﺘﻬﺎ ﻋﺮض اﻟﻨﺺ اﻟﻘﺎدم ﻣﻦ اﻟﺴريﻓﺮ‬post.html ‫ﺑﻘﻲ ﻋﻠﻴﻨﺎ ﻣﻠﻒ اﻟﻬﻮمتﻴﻞ‬
<html dir="rtl">
<head>
function hi(text)
{
document.getElementById("div1").innerHTML = text;
}
</script>
</head>
<body>
<form>
<input type="button" value="‫"رﺳﺎﻟﺔ ﺗﺮﺣﻴﺐ‬
onClick="postText('print.php','user_name=Ayman',hi)" >
</form>
<br>
<div id="div1"></div>
</body>
</html>
: ‫ منﺮر ﻟﻬﺎ ﺛﻼث ﺑﺎراﻣﻴﱰات‬postText ‫ﻛام ﺗﺮى اﻟﻔﻨﻜﺸﻦ‬
‫ﻋﻨﻮان اﳌﻠﻒ‬
‫اﻟﺒﻴﺎﻧﺎت اﻟﺘﻲ ﻧﺮﻳﺪ ارﺳﺎﻟﻬﺎ ﻟﻠﺴريﻓﺮ داﺗﺎ‬
‫اﺳﻢ اﻟﺪاﻟﺔ اﻟﺘﻲ ﺳﺘﻌﺎﻟﺞ اﻟﻨﺺ اﻟﻘﺎدم ﻣﻦ اﻟﺴريﻓﺮ‬
postText('print.php','user_name=Ayman',hi)
:‫و اﻻن ﻟﻨﺠﺮب ﺑﺎﳌﺘﺼﻔﺢ‬
postXml

‫ اﱃ ﻣﻜﺘﺒﺘﻨﺎ اﻟﺬﻫﺒﻴﺔ اﻟﺘﻲ ﺗﺮﺳﻞ ﻣﻌﻠﻮﻣﺔ اﱃ اﻟﺴريﻓﺮ ﻣﺜﻼ‬postXml ‫ﺳﻨﻀﻴﻒ ﺑﻌﻮن اﻟﻠﻪ اﻟﻔﻨﻜﺸﻦ‬
‫رﻗﻢ ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان ﺛﻢ ﺗﺴﺘﻘﺒﻞ ﺑﻴﺎﻧﺎت اﻛﺲ ام ال و ﺗﻮﻛﻞ ﻣﻬﻤﺔ ﻣﻌﺎﻟﺠﺔ ﻫﺬه اﻟﺒﻴﺎﻧﺎت و ﻋﺮﺿﻬﺎ ﻋﲆ‬
:makeOptions ‫ﺷﻜﻞ ﻗﺎمئﺔ اﺧﺘﻴﺎرات اﱃ اﻟﻔﻨﻜﺸﻦ‬

//****************
function postXml(url,data,callback)
{
var ajax = false;
{
}
{
}
if(ajax)
{
ajax.open("post",url);
urlencoded');
{
{
}
}
ajax.send(data);
}
}
//****************
ayman.js ‫ﻃﺒﻌﺎ اﻟﻜﻮد اﻟﺴﺎﺑﻖ ﻟﻴﺲ ﻣﻠﻒ ﻣﺴﺘﻘﻞ و امنﺎ اﺿﻔﻪ اﱃ ﻣﻠﻒ اﻟﺠﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬
‫ ﻻﻧﻨﺎ ﻧﺴﺘﻘﺒﻞ ﺑﻴﺎﻧﺎت‬responseXML ‫اول ﻓﺮق ﺑني ﻫﺬا اﻟﻜﻮد و ﺳﺎﺑﻘﻪ اﻧﻨﺎ اﺳﺘﺨﺪﻣﻨﺎ اﻟﺨﺎﺻﻴﺔ‬
: ‫اﻛﺲ ام ال‬
:colors.php ‫ﻟﻨﻨﺘﻘﻞ اﱃ ﻣﻠﻒ اﻟﺒﻲ اﺗﺶ يب‬

<?php
extract($_POST);
if($group == 1)
{
}
else if($group == 2)
{
}
for($i=0;$i< count($arr);$i++)
{
}
?>
: ‫وﺿﻌﻨﺎ ﴍط اذا ﻛﺎن اﳌﺘﻐري ﺟﺮوب ﻳﺤﻤﻞ اﻟﻘﻴﻤﺔ واﺣﺪ ﻫﻨﺎك ﻟﻮﻧني ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﻻوﱃ‬
: ‫اﻣﺎ اذا ﻛﺎن اﳌﺘﻐري ﺟﺮوب ﻳﺤﻤﻞ اﻟﻘﻴﻤﺔ اﺛﻨني ﺳﻨﺨﺰن ﺑﺎﳌﺼﻔﻮﻓﺔ ارﺑﻊ اﻟﻮان‬
: post_xml.html ‫مل ﻳﺘﺒﻖ ﻋﻠﻴﻨﺎ اﻻ ﻣﻠﻒ اﻟﻬﻮمتﻴﻞ‬
<html>
<head>
{
var i;
{
Option(optionsArr[i].firstChild.data);
}
}
//***********
{
}
//**********
</script>
</head>
<body>
<form>
<select id="selectId" onChange="setOption()">
<option>Choos one</option>
</select>
<input type="button" value="‫"ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﻻوﱃ‬
onClick="postXml('colors.php','group=1', makeOptions)"/>
<input type="button" value="‫"ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﻟﺜﺎﻧﻴﺔ‬
</form><br>
<div id="div1">
<h1>Ayman for programming</h1>
</div>
</body>
</html>
: ‫اوﻻ ﻋﺮﻓﻨﺎ اﻟﺪاﻟﺔ اﻟﺘﻲ ﻣﻬﻤﺘﻬﺎ ﻣﻌﺎﻟﺠﺔ اﻟﺒﻴﺎﻧﺎت اﻟﻘﺎدﻣﺔ ﻣﻦ اﻟﺴريﻓﺮ‬
{
}
:‫ﺛﻢ ﺗﻘﻮم ﻫﺬه اﻟﺪاﻟﺔ ﺑﺤﺬف ﺟﻤﻴﻊ ﻋﻨﺎﴏ اﻟﻘﺎمئﺔ‬
: ‫ﺛﻢ ﺗﻘﻮم ﺑﺒﻨﺎء ﻗﺎمئﺔ ﺟﺪﻳﺪة ﺣﺴﺐ ﻣﺎ اﺧﺘﺎر اﳌﺴﺘﺨﺪم‬
{
}
‫ اﻟﺘﻲ ﻣﻬﻤﺘﻬﺎ ﺗﻐﻐري اﻟﻠﻮن ﺣﺴﺐ رﻏﺒﺔ اﳌﺴﺘﺨﺪم ﺑﺎﺳﺘﺨﺎدم‬setOption ‫اﺧريا ﻟﺪﻳﻨﺎ اﻟﻔﻨﻜﺸﻦ‬
: style.color ‫اﻟﺨﺎﺻﻴﺘني‬

{
}
: ‫و ﻃﺒﻌﺎ اﻧﺸﺄﻧﺎ زرﻳﻦ ﻟيك ﻧﺴﻤﺢ ﻟﻠﻤﺴﺘﺨﺪم ﺑﺎﻧﺘﻘﺎء ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﳌﻨﺎﺳﺒﺔ‬

<input type="button" value="‫"ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﻻوﱃ‬
<input type="button" value="‫"ﻣﺠﻤﻮﻋﺔ اﻻﻟﻮان اﻟﺜﺎﻧﻴﺔ‬
‫ ﺳﺎﺿﻌﻪ ﻟﻚ‬ayman.js ‫ اﻟﺬي اﺳﻤﻴﻨﺎه‬Framework ‫و اﺧريا ارﻳﺪ ان اﺿﻊ ﻟﻚ اﳌﻠﻒ اﻟﺬﻫﺒﻲ‬

‫ﻛﺎﻣﻼ ﻟيك ﺗﺴﺘﻔﻴﺪة ﻣﻨﻪ ﺑﺘﻄﺒﻴﻘﺎﺗﻚ ﻓﻘﻂ ﻗﻢ ﺑﺘﻀﻤني اﳌﻠﻒ دون اﻟﺤﺎﺟﺔ ان ﺗﻌﻴﺪ ﻛﺘﺎﺑﺔ ﺗﻠﻚ اﻟﺪوال ﻛﻞ‬
:‫ﻣﺮة‬

//************************
{
var ajax = false;
{
}
{
}
if (ajax)
{
{
{
delete ajax;
ajax = null;
}
}
ajax.send(null);
}
}
//************************
// getXml
//++++++++++++++++++++++++++++++++++++++++++
function getXml(url,callback)
{
var ajax = false;
{
}
{
}
if (ajax)
{
{
{
}
}
ajax.send(null);
}
}
//________________________________________
// postText
function postText(url,data,callback)
{
var ajax = false;
{
}
{
}
if (ajax)
{
urlencoded');
{
{
delete ajax;
ajax = null;
}
}
ajax.send(data);
}
}
//________________________________________
//postXml
//****************
function postXml(url,data,callback)
{
var ajax = false;
{
}
{
}
if(ajax)
{
ajax.open("post",url);
urlencoded');
{
{
}
}
ajax.send(data);
}
}
//****************

Null

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Null

Uploaded by

Copyright:

Available Formats

‫‪ ‬‬

‫ﻛﺘﺎب اﺟﺎﻛﺲ اﻟﺠﺰء اﻻول‬

‫اﺧﻮﻛﻢ اميﻦ ﻛﺰة‬

‫ﳌﺎذا اﺗﻌﻠﻢ اﺟﺎﻛﺲ؟‬

‫ﻣﺎ اﻟﱪاﻣﺞ اﻟﺘﻲ اﺣﺘﺎﺟﻬﺎ؟‬

‫اﻟﻔﺼﻞ اﻻول ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬

‫ﻫﻴﺎ ﻟﻨﻨﻄﻠﻖ ﻣﻊ اﻟﻠﻐﺔ اﻟﻠﺬﻳﺬة ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬

‫و ﻋﻨﺪ ﺗﺸﻐﻴﻠﻚ ﻟﻬﺬا اﻟﻜﻮد ﻳﺠﺐ ان ﻳﻌﻄﻲ اﻟﻨﺘﻴﺠﺔ اﻟﺘﺎﻟﻴﺔ‪:‬‬

‫ﻓﻤﺜﻼ اﻟﻜﺎﺋﻦ اذا اردت ان ﺗﻄﺒﻊ ﺟﻤﻠﺔ اﺳﺘﺨﺪم اﻟﻜﺎﺋﻦ ‪document‬‬

‫ﺛﻢ اﺳﺘﺪﻋﻲ اﻟﺨﺎﺻﻴﺔ ‪()write‬‬

‫ﺛﻢ ﺿﻊ اﻟﻘﻴﻤﺔ اﻟﺘﻲ ﺗﺮﻳﺪﻫﺎ‬

‫;)"‪document.write("I love java‬‬

‫‪ document.title‬ﻟﺘﻐﻴري ﻋﻨﻮان اﻟﺼﻔﺤﺔ‬

‫‪ document.bgcolor‬ﻟﺘﻐﻴري ﺧﻠﻔﻴﺔ اﻟﺼﻔﺤﺔ‬

‫‪ location.hostname‬اﺳﺘﺨﺪﻣﻬﺎ ﻟﺘﻌﺮف اﺳﻢ ﴍﻛﺔ ﻣﺰود اﻟﺨﺪﻣﺔ‬

‫‪ navigator.appName‬ﻣﻔﻴﺪة ﺟﺪا ﻟﺘﺤﺪﻳﺪ ﻧﻮع اﳌﺘﺼﻔﺢ اﻟﺬي ﻳﺴﺘﺨﺪﻣﻪ اﻟﺰاﺋﺮ‬

‫اﺣﻔﻆ اﻟﺴﻄﺮ اﻟﺴﺎﺑﻖ ﺑﺎﺳﻢ ‪script.js‬‬

‫ﺛﻢ ﻗﻢ ﺑﺘﻀﻤني اﳌﻠﻒ ﺑﺎﺳﺘﺨﺪام ﺧﺎﺻﻴﺔ ‪src‬‬

‫اﺣﻔﻆ اﻟﻜﻮد اﻟﺴﺎﺑﻖ ﺑﺎي اﺳﻢ ﺗﺮﻳﺪ ﻣﺜﻼ ‪Ajax1.html‬‬

‫ﻣﻌﺮﻓﺔ ﻧﻮع اﳌﺘﺼﻔﺢ‬

‫ﳌﻌﺮﻓﺔ اﺳﻢ اﳌﺘﺼﻔﺢ ‪navigator.appName‬‬

‫ﻟﻨﺠﺮب ﻣﺜﺎل ﻋﻤﲇ‬

‫ﺑﻴﻨام اذا ﺟﺮﺑﺖ اﻻﻧﱰﻧﺖ اﻻﻛﺴﺒﻠﻮرر ﺳﻴﻌﺮﺿﻬﺎ ﻫﻜﺬا‬

‫ﻫﺬا ﻣﻔﻴﺪ ﺟﺪا ﻓﻴﻤﻜﻨﻚ ان ﺗﺴﺘﺨﺪم اﻟﺴﻜﺮﺑﺖ اﳌﻨﺎﺳﺐ ﻟﻜﻞ ﻣﺘﺼﻔﺢ‬

‫ﺣﺪث ان ﻳﻘﻮم اﳌﺴﺘﺨﺪم ﺑﺎﻟﻐﺎء ﳾء ﻣﺎ‬ ‫‪onabort‬‬

‫ﺗﺤﺬﻳﺮ ﻟﻘﺪ اﺳﺘﺨﺪﻣﻨﺎ ﻋﻼﻣﺘﻲ اﻟﺘﻨﺼﻴﺺ اﳌﻔﺮدة )' ‪(' ‬‬

‫>"'‪<body onClick="document.bgColor='red‬‬ ‫ﺻﺢ‬

‫وﻟﻜﻦ اﻳﺎك ان ﺗﻀﻌﻬﺎ ﻫﻜﺬا‬

‫>""‪<body onClick="document.bgColor="red‬‬ ‫ﺧﻄﺄ‬

‫ﻏﺎﻳﺔ ﰲ اﻟﺴﻬﻮﻟﺔ ﻛﺘﺒﻨﺎ ﻛﻠﻤﺔ ‪Function‬‬

‫ﻟرنى ﻛﻴﻒ ﺳﻴﻌﺮﺿﻬﺎ اﳌﺘﺼﻔﺢ ‪:‬‬

. . . ‫ﻃﻴﺐ ﻟﻨﻔﻜﺮ ﺳﻮﻳﺎ ﺑﺤﻞ ﻟﻬﺬه اﳌﺸﻜﻠﺔ‬

: ‫وﻟﻜﻦ ﻇﻬﺮت ﺑﺸﻜﻞ ﻏري ﻣﻼﺋﻢ اﻧﻈﺮ اﱃ اﻟﺼﻮرة‬

‫ﻓﻤﺜﻼ ﰲ اﻟـ >‪<Div‬اﻻوﱃ وﺿﻌﻨﺎ ﻟﻬﺎ اﻟـ ‪ID ﬁrst‬‬

‫اﻧﺎ ارﻛﺰ ﻋﲆ ﺧﺎﺻﻴﺔ اﻟـ ‪ ID‬ﻻﻧﻬﺎ ﺳﺘﻠﺰﻣﻨﺎ ﻛﺜريا ‪.‬‬

‫ﺳﻨﻨﺸﺎ ﻛﺎﺋﻦ ﺧﺎص ﻟﻬﺎ >‪<div id="ﬁrst"></div‬‬

‫وﻛﺎﺋﻦ ﺧﺎص ﻟﻠﺜﺎﻧﻴﺔ>‪<div id="secondString"></div‬‬

‫و ﻫﺬا اﻟﻜﺎﺋﻦ‪JavaScript object corresponding to the <div> :‬‬

‫متﺮﻳﺮ ﻣﻌﺎﻣﻼت ‪arguments‬‬

:‫اﻻن دﻋﻨﺎ ﻧﻄﺒﻖ ﻣﺎ ﺗﻌﻠﻤﻨﺎه وﻟﻜﻦ ﻋﲆ اﻟﻌﺒﺎرة‬

<span> ‫< و‬div> ‫اﻟﻔﺮق ﺑني‬

‫متﺮﻳﺮ اﻛرث ﻣﻦ ﻣﻌﺎﻣﻞ‬

show('‫'ﺑﺴﻢ اﻟﻠﻪ اﻟﺮﺣﻤﻦ اﻟﺮﺣﻴﻢ‬,'top')

‫ ﻫﻮ اﻧﻨﺎ ﻋﺮﻓﻨﺎه داﺧﻞ اﻟﻔﻨﻜﺸﻦ‬counter2 ‫و ﺳﺒﺐ ﻓﺸﻞ اﻟﻌﺪاد اﻟﺜﺎين‬

‫ﺗﺨﺰﻳﻦ ‪ object‬ﰲ ﻣﺘﻐري‬

‫;)(‪var d = new Date‬‬

‫اﺳﺘﺨﺪام اﻟﻜﺎﺋﻦ ‪XMLHttpRequest‬‬

‫اﻻن ﻻﻧﺸﺎء اﻟﻜﺎﺋﻦ ﻓﻘﻂ اﻛﺘﺐ ﻣﺎﻳﲇ ‪:‬‬

‫;)(‪object = new XMLHttpRequest‬‬

‫ﻃﺒﻌﺎ اﻧﺖ ﻏري ﻣﻘﻴﺪ ﺑﺎﻻﺳﻢ اﺧﱰ اي اﺳﻢ ﻳﻌﺠﺒﻚ‬

: ‫ اﻟﴩﻃﻴﺔ‬if ‫ وﻟﻜﻨﻲ ارﻛﺰ اﻻن ﻋﲆ‬navigator.appName ‫و ﻳﺘﻢ ذﻟﻚ ﻋﻦ ﻃﺮﻳﻖ اﻟﻌﺒﺎرة‬

: ‫( و ﻣﻜﺎن اﻟـ)@( ﻓﻜﺎﻧﺖ اﻟﻨﺘﻴﺠﺔ‬.) ‫ﻃﻠﺒﺖ ﻣﻨﻪ ﻣﻜﺎن اﻟﻨﻘﻄﺔ‬

var friends = new Array("‫"ﳏﻤﺪ‬,"‫"ﺍﲪﺪ‬,"‫"ﻋﻤﺮ‬,"‫;)"ﺣﺴﲔ‬

alert(friends[0]); ‫ﺳﻴﻜﻮن اﻟﻨﺎﺗﺞ ﻣﺤﻤﺪ‬

alert(friends[1]); ‫ﺳﻴﻨﺘﺞ اﺣﻤﺪ‬

alert(friends[2]); ‫ﺳﻴﻨﺘﺞ ﻋﻤﺮ‬

‫ﻃﺒﺎﻋﺔ ﻋﻨﺎﴏ اﳌﺼﻔﻮﻓﺔ‬

: ‫وﻳﺘﻢ ذﻟﻚ ﺑﺎﺳﺘﺨﺪام اﻟﺤﻠﻘﺔ ﻓﻮر ﻟﻨﺸﺎﻫﺪ اﻟﻜﻮد‬

while ‫ﻛام ميﻜﻨﻚ ﻃﺒﺎﻋﺔ ﻋﻨﺎﴏ اﳌﺼﻔﻮﻓﺔ ﺑﺎﺳﺘﺨﺪام ﺣﻠﻘﺔ‬

: ‫ﻛام ميﻜﻨﻚ اﻧﺸﺎ اﳌﺼﻔﻮﻓﺔ ﺑﻄﺮﻳﻘﺔ ﺛﺎﻧﻴﺔ‬

<input type="text" name="user_name" id="text_id"/>

‫اﻟﻔﺼﻞ اﻟﺜﺎين اﺟﺎﻛﺲ‬

‫و اﻻن ﻟﻨﺠﺮﺑﻪ ﻋﲆ اﻟﻔﺎﻳﺮﻓﻮﻛﺲ‬