تعلم جافا سكريبت

‫‪ ‬‬
‫‪‬‬
‫‪‬‬
‫إﻋﺪاد اﻟﻄﺎﻟﺐ ‪-:‬‬
‫ﻓﺆاد ﺷﻮﻋﻲ ﻣﺤﻤﺪ ﻋﻠﻰ اﷲ‬
‫‪‬‬
‫اﺷﺮف ‪-:‬‬
‫أ‪ -‬ﻋﺜﻤﺎن أﺣﻤﺪ اﻟﻌﻤﻮدي‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫ﻣﺤﻤﺪ ﺻﺪﻳﻖ ﺣﺴﻦ‬

‫ﻫﻞ ﻟﻐﺔ اﻟﺠﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ ﺻﻌﺒﺔ اﻟﺘﻌﻠﻢ وﻣﺎ ﻫﻲ اﻷﺷﯿﺎء اﻟﻤﺴﺎﻋﺪة ﻟﺘﻌﻠﻢ ‪Java‬‬
‫‪.script‬‬
‫ﻟﻐﺔ اﻟﺠﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ ﻟﯿﺴﺖ ﺑﺎﻟﻄﺒﻊ ﺻﻌﺒﺔ وﻛﻞ ﻣﺎ ﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ اﻻﺳﺘﻌﺎﻧﺔ ﺑﺎﷲ ﺛﻢ اﻹﺻﺮار ﻋﻠﻰ اﻟﺘﻌﻠﻢ و ﺗﻄﺒﯿﻖ‬
‫اﻷﻣﺜﻠﺔ اﻟﺘﻲ ﺳﻨﺘﻄﺮق ﻟﻬﺎ وﻓﻬﻢ ﺷﺮح اﻷﺳﺎﺳﯿﺎت اﻟﻠﻐﺔ ‪ .‬ﺛﻢ ﺑﻌﺪ ذﻟﻚ أﻃﻠﻖ اﻟﻌﻨﺎن ﻟﻤﺨﯿﻠﺘﻚ ‪.‬‬
‫ﻟﻤﺎذا ﻻ ﺗﻜﻔﻲ ﻟـ ‪ HTML‬و ﻟﻤﺎذا ﻧﺤﺘﺎج إﻟﻰ ﻟﻐﺎت اﻟﻨﺼﻮص ) ‪( script language‬‬
‫ﻣﺜﻞ اﻟﺠﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ ‪.‬‬
‫أن ﻟﻐﺎت اﻟﻨﺼﻮص ﻣﻨﻬﺎ اﻟﺠﺎف ﺳﻜﺮﯾﺒﺖ ﺗﺤﻮل ﻣﻮﻗﻊ اﻟﻮب إﻟﻰ ﻣﻮﻗﻊ ﯾﺘﻔﺎﻋﻞ ﻣﻊ اﻟﻤﺴﺘﺨﺪم ﻣﻦ إﺿﺎﻓﺎت أزرار‬
‫وﻧﻤﺎذج ﺗﺄﺧﺬ ﺑﯿﺎﻧﺎت ﻣﻦ اﻟﻤﺴﺘﺨﺪم وﺗﺤﻮﻟﻬﺎ إﻟﻰ ﻧﻤﺎذج أﺧﺮى أو ﺗﺮﺳﻠﻬﺎ ﺑﺎﻟﺒﺮﯾﺪ اﻹﻟﻜﺘﺮوﻧﻲ أو ﺗﺠﺮي ﻋﻠﯿﻬﺎ‬
‫ﻋﻤﻠﯿﺎت ﺣﺴﺎﺑﯿﺔ ﻟﯿﺴﺖ ﺑﺴﯿﻄﺔ أﻧﻬﺎ ﺑﺎﺧﺘﺼﺎر ﺗﺤﻮل اﻟﺼﻔﺤﺔ إﻟﻰ ﻣﺎ ﯾﺴﻤﻰ ﺑﺼﻔﺤﺎت اﻟﻮب اﻟﺪﯾﻨﺎﻣﯿﻜﯿﺔ أو‬
‫ﺻﻔﺤﺎت اﻟﻮب اﻟﺘﻔﺎﻋﻠﯿﺔ ﻫﻮ ﻣﺎﻻ ﺗﻘﺪﻣﻪ ﻟﻐﺔ ‪. HTML‬‬
‫وﻻ ﻧﻨﺴﻰ ﻣﻦ اﻟﻨﻘﺎط اﻟﻤﻬﻤﺔ اﻟﺘﻲ ﯾﺠﺐ ﻣﻌﺮﻓﺘﻬﺎ أن ﺗﻨﻔﯿﺬ اﻟﺒﺮﻧﺎﻣﺞ اﻟﻤﻜﺘﻮب ﺑﻠﻐﺔ ‪ Java Script‬ﻫﻮ ﻣﻦ‬
‫اﺧﺘﺼﺎص اﻟﻤﺘﺼﻔﺢ ) ‪ ( Browser‬و اﻟﺬي ﯾﻨﻔﺬﻫﺎ ﺳﻄﺮ ﺳﻄﺮ ) وﻫﺬا ﻣﺎ ﯾﻄﻠﻖ ﻋﻠﯿﻪ ‪ ( Interpreter‬وﻟﯿﺲ‬
‫ﻋﻦ ﻃﺮﯾﻖ ﺗﺮﺟﻤﺘﻬﺎ ﺗﺠﻤﯿﻌﯿﺎً وﻫﺬا ﻣﺎ ﯾﺤﺪث ﻓﻲ ﻟﻐﺎت اﻟﺒﺮﻣﺠﺔ ﻋﺎﻟﯿﺔ اﻟﻤﺴﺘﻮى ) وﻫﺬا ﻣﺎ ﯾﻄﻠﻖ ﻋﻠﯿﻪ‬
‫‪.(Compiler‬‬
‫ﻣﺎ ﻫﻲ اﻟﺒﺮاﻣﺞ اﻟﺘﻲ ﺗﺤﺘﺎﺟﻬﺎ ﻟﻜﺘﺎﺑﺔ ﺑﺮاﻣﺞ واﺧﺘﺒﺎرﻫﺎ‪.‬‬
‫اﻟﻤﻮﺿﻮع ﺑﻤﻨﺘﻬﺎ اﻟﺴﻬﻮﻟﺔ ﻓﻜﻞ ﻣﺎ ﺗﺤﺘﺎﺟﻪ ﻫﻮ ﻣﺎ ﯾﻠﻲ ‪:‬‬
‫‪ o‬ﻣﺤﺮر اﻟﻨﺼﻮص اﻟﻤﺮﻓﻖ ﻣﻊ اﻟﻮﯾﻨﺪوز ) ‪.( Notepad‬‬

‫‪ o‬ﻣﺘﺼﻔﺢ اﻹﻧﺘﺮﻧﺖ اﻟﻤﺮﻓﻖ ﻣﻊ ﻧﻈﺎم اﻟﺘﺸﻐﯿﻞ ﺳﻮاء ) ‪ ( Internet Explorer‬أو‬
‫) ‪ ( Netscape‬أو أي ﻣﺘﺼﻔﺢ ﯾﺪﻋﻢ ﻟﻐﺔ اﻟﺠﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ‪.‬‬
‫ﻫﺬا ﻛﻞ ﺷﻲء ﻛﻞ ﻣﺎ ﺗﺤﺘﺎﺟﻪ ‪.‬‬
‫اﺳﺘﺨﺪام ‪: Java Script‬‬
‫ﺑﺮﻧﺎﻣﺞ ﺟﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ ﻫﻮ ﺟﺰء ﯾﺘﻢ وﺿﻌﻪ داﺧﻞ ﻟﻐﺔ ‪ HTML‬ﻟﺰﯾﺎدة ﻓﺎﻋﻠﯿﺘﻬﺎ ﻓﻌﻨﺪ ﺗﺼﻔﺢ ﻣﻮﻗﻊ أو اﺳﺘﺪﻋﺎء‬
‫ﺻﻔﺤﺔ ﻣﺤﺪدة ﻣﻜﺘﻮب ﺑﺪاﺧﻠﻬﺎ ‪ Java Script code‬ﯾﺘﻢ إﻧﺰاﻟﻪ إﻟﻰ ﺟﻬﺎزك وﻋﻨﺪ ﺣﺪوث ﺣﺪث ﻣﻌﯿﻦ ﻣﺜﻞ‬
‫اﺳﺘﺪﻋﺎء ﺑﺮﻧﺎﻣﺞ ﺟﺎﻓﺎ ﻟﻠﺘﻨﻔﯿﺬ ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ زر ﻣﻌﯿﻦ أو ﻋﻨﺪ ﺣﺮﻛﺔ ﻟﻠﻤﺎوس ﯾﺘﻢ ﺗﺮﺟﻤﺔ اﻟﺒﺮﻧﺎﻣﺞ وﺗﻨﻔﯿﺬه‬
‫ﺳﻄﺮ ﺑﺴﻄﺮ ﺣﺘﻰ ﯾﻨﺘﻬﻲ ﻛﻤﺎ ذﻛﺮﻧﺎ ﺳﺎﺑﻘﺎً‪.‬‬
‫‪١‬‬
‫اﻟﺸﻜﻞ اﻟﻌﺎم اﻟﺬي ﺳﯿﻜﻮن ﻋﻠﯿﻪ ﺑﺮﻧﺎﻣﺞ ﺟﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ ‪:‬‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬ ‫ﯾﺘﻢ ﻫﻨﺎ وﺿﻊ ﻋﻨﻮان اﻟﺼﻔﺤﺔ‬ ‫>‪</TITLE‬‬
‫>”‪<SCRIPT LANGUAGE=”JAVASCRIPT‬‬
‫‪
١٧ </SCRIPT>
١٨ </head>
١٩ <body>
٢٠ <center>
٢١ <form method=post onSubmit="return testform()">
٢٢ <tabel>
٢٣ <tr>
٢٤ <td>Name : </td>
٢٥ <td><input type="text" name="name" ></td></tr>
٢٦ <tr><td>Address :</td>
٢٧ <td><input type="text" name="address" ></td></tr>
٢٨ <tr><td>City :</td>
٢٩ <td><input type="text" name="city" ></td></tr>
٣٠ </tabel>
٣١ <p>
٣٢ <input type="submit" name="‫ "إرﺳﺎل اﻟﺒﯿﺎﻧﺎت‬value="submit">
٣٣ </form>
٣٤ </center>
٣٥ </body>
٣٦ </html>
٢٣
‫ﺷﺮح اﻟﻜﻮد‪:‬‬
‫أوﻻً ﻗﻤﻨﺎ ﺑﺈﻧﺸﺎء اﻟـ ‪ form‬وذﻟﻚ ﺑﻠﻐﺔ اﻟـ ‪ HTML‬وﻫﻮ اﻟﺠﺰء اﻟﻤﺤﺎط ﺑﺎﻟﻮن اﻷزرق‬
‫ﺣﯿﺚ ﺗﻢ إﻧﺸﺎء ‪ form‬و ﺣﺪدﻧﺎ ﻃﺮﯾﻘﺔ إرﺳﺎل ﻫﺬه ‪ form‬وذﻟﻚ ﺑﻄﺮﯾﻘﺔ اﻟـ ‪ method=post‬واﺳﺘﺨﺪﻣﻨﺎ اﻟﺤﺪث‬
‫‪ onSubmit‬وﻫﻮ ﺣﺪث اﻟﻀﻌﻂ ﻋﻠﻰ زر )إرﺳﺎل اﻟﺒﯿﺎﻧﺎت ( ﻣﻦ ﺻﻔﺤﺔ اﻟﻮﯾﺐ ﺣﯿﺚ ﺳﻮف ﯾﺘﻢ إﺳﺘﺪﻋﺎء داﻟﺔ‬
‫)(‪ testform‬وﻫﻲ اﻟﺪاﻟﺔ ﻣﻜﺘﻮﺑﺔ ﺑﻠﻐﺔ اﻟﺠﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ و اﻟﺘﻲ ﺗﻘﻮم ﺑﻔﺤﺺ اﻟﺤﻘﻮل ﻓﻲ اﻟـ ‪ form‬و اﻟﺘﺄﻛﺪ ﻣﻦ‬
‫اﻟﻜﺘﺎﺑﺔ ﻓﻲ ﻛﻞ اﻟﺤﻘﻮل وﻋﺪم ﺗﺮك أﺣﺪ اﻟﺤﻘﻮل ﻓﺎرغ ‪.‬‬
‫ﺛﻢ ﻗﻤﻨﺎ ﺑﺈﻧﺸﺎء اﻟﺤﻘﻮل اﻟﺨﺎﺻﺔ ﺑﺎﻟـ ‪ form‬وﺑﻌﺪ ذﻟﻚ أﻧﺸﺄﻧﺎ زر اﻹرﺳﺎل ﻋﻦ ﻃﺮﯾﻖ ا ﻻﻣﺮ ‪ input‬وﺣﺪدﻧﺎ ﻧﻮع‬
‫ﻫﺬا اﻟﻤﺪﺧﻞ أﻧﻪ ﻣﻦ ﻧﻮع زر إرﺳﺎل و ﺗﻢ إﻋﻄﺎءه اﻻﺳﻢ ) إرﺳﺎل اﻟﺒﯿﺎﻧﺎت ( ‪.‬‬
‫وﻫﻮ اﻟﺠﺰء اﻟﻤﺤﺎط ﺑﺎﻟﻮن اﻻﺣﻤﺮ وﻫﻮ اﻟﺠﺰء اﻟﺨﺎص ﺑﺎﻟﺠﺎﻓﺎ‬ ‫)(‪testform‬‬ ‫واﻻن ﺳﻮف ﻧﺘﺤﺪث ﻋﻦ اﻟﺪاﻟﺔ‬
‫ﺳﻜﺮﯾﺒﺖ‬
‫ﻧﻼﺣﻆ ﻓﻲ أﻧﻪ ﻋﻨﺪ ﺗﻨﻔﯿﺬ اﻟﺪاﻟﺔ ﻓﺈﻧﻪ ﯾﺴﺘﺨﺪم ﺟﻤﻠﺔ ‪ If‬اﻟﺸﺮﻃﯿﺔ ﺣﯿﺚ أﻧﻪ ﯾﻘﻮم ﺑﻔﺤﺺ اﻟﻔﻮرم رﻗﻢ ﺻﻔﺮ‬
‫) ]‪ ( Form[0‬وﺣﺪدﻧﺎ اﻟﻌﻨﺼﺮ رﻗﻢ ﺻﻔﺮ أﯾﻀﺎ ) ]‪ ( elements[0‬ﻓﻲ ﻧﻔﺲ ) ]‪ ( Form[0‬وﻫﻮ ﻓﻲ‬
‫ﻣﺜﺎﻟﻨﺎ اﻟﺤﻘﻞ ‪ name‬وﺣﺪدﻧﺎ أﯾﻀﺎ اﻟﻘﯿﻤﺔ اﻟﺘﻲ ﺑﺪاﺧﻠﻪ إذا ﻛﺎﻧﺖ ﻓﺎرﻏﺔ أي ﻻ ﯾﻮﺟﺪ أي ﺷﻲء ﻣﻜﺘﻮب وﺛﻢ ﺑﻌﺪ‬
‫ذﻟﻚ اﺳﺘﺨﺪﻣﻨﺎ اﻟﻌﻼﻗﺔ اﻟﻤﻨﻄﻘﯿﺔ ) || ( وذﻟﻚ إذا ﻟﻨﻘﻮم ﺑﻔﺤﺺ اﻟﻌﻨﺼﺮ رﻗﻢ واﺣﺪ أﯾﻀﺎ ) ]‪( elements[1‬‬
‫ﻓﻲ ﻧﻔﺲ ) ]‪ ( Form[0‬وﻫﻮ ﻓﻲ ﻣﺜﺎﻟﻨﺎ اﻟﺤﻘﻞ اﻟﻤﺴﻤﻰ ‪ address‬و ﺣﺪدﻧﺎ أﯾﻀﺎ اﻟﻘﯿﻤﺔ اﻟﺘﻲ ﺑﺪاﺧﻠﻪ إذا‬
‫ﻛﺎﻧﺖ ﻓﺎرﻏﺔ ﺛﻢ وﺿﻌﻨﺎ اﻟﻌﻼﻗﺔ اﻟﻤﻨﻄﻘﯿﺔ ) || ( وذﻟﻚ أﻧﻪ إذا وﺟﺪ اﺣﺪ اﻟﺤﻘﻮل ﻓﺎرﻏﺔ ﻓﺈﻧﻪ ﺳﻮف ﯾﻘﻮم ﺑﺘﻨﻔﯿﺬ‬
‫اﻻﻣﺮ )(‪ alert‬وﺳﻮف ﯾﻈﻬﺮ اﻟﺮﺳﺎﻟﺔ اﻟﺘﺎﻟﯿﺔ ) ﯾﺠﺐ اﻟﻜﺘﺎﺑﺔ ﻓﻲ ﻛﻞ اﻟﺤﻘﻮل (‬
‫‪٢٤‬‬
: ‫ﻣﺜﺎل آﺧﺮ ﺑﺈﻧﺸﺎء ﻗﺎﺋﻤﺔ ﻣﻨﺴﺪﻟﺔ‬
No Statements
١ <html>
٢ <head>
٣ </title>‫<ﻗﺎﺋﻤﺔ ﻣﻨﺴﺪﻟﺔ‬title>
٤ <script language="javascript">
٥ function formHandler()
٦ {
Var URL=
٧ document.pulldown.selectname.options
[document.pulldownMenu.yourSelect.selectIndex].value
٨ window.location.href=URL
٩ }
١٠ </script>
١١ choose a search engine:
١٢ <form name="pulldownMenu">
١٣ <select name="yourSelect" onChange="formHandler()">
١٤ <option value="http://www.msn.com">MSN
١٥ <option value="http://www.yahoo.com">Yahoo
١٦ <option value="http://www.altavista.com">Altavista
١٧ </select>
١٨ </form>
١٩ </html>
: ‫ﺷﺮح اﻟﻜﻮد‬
‫ وﻫﻮ اﻟﺠﺰء اﻟﻤﺤﺎط ﺑﺎﻟﻮن اﻷزرق و ذﻟﻚ ﺑﺈﺗﺒﺎع اﻟﺨﻄﻮات‬HTML ‫ﯾﺘﻢ إﻧﺸﺎء اﻟﻘﺎﺋﻤﺔ اﻟﻤﻨﺴﺪﻟﺔ وذﻟﻚ ﺑﻠﻐﺔ اﻟـ‬
: ‫اﻟﺘﺎﻟﯿﺔ‬
‫< وﻓﻲ ﻫﺬه اﻟﺤﺎﻟﺔ‬form name="pulldownMenu"> ‫ وﻫﻮ‬tag ‫ وذﻟﻚ ﻋﻦ ﻃﺮﯾﻖ ﻛﺘﺎﺑﺔ اﻟـ‬Form ‫ﯾﺘﻢ إﻧﺸﺎء اﻟـ‬
‫ < وﻫﻮ‬select > tag ‫ ﺛﻢ ﺑﻌﺪ ذﻟﻚ اﺳﺘﺨﺪﻣﻨﺎ اﻟـ‬pulldownMenu ‫ وﺗﻢ ﺗﺴﻤﯿﺘﻪ‬Form ‫ﻗﻤﻨﺎ ﺑﺈﻧﺸﺎء اﻟـ‬
، ‫اﻟﺬي ﯾﻘﻮم ﺑﺈﻧﺸﺎء اﻟﻘﺎﺋﻤﺔ اﻟﻤﻨﺴﺪﻟﺔ واﻟﯿﻚ ﻫﺬا اﻻﻣﺮ‬
‫< وﻣﻦ ﺛﻢ ﺳﻤﯿﻨﺎ ﻫﺬه اﻟﻘﺎﺋﻤﺔ ﺑﺎﻻﺳﻢ‬select name="yourSelect" onChange="formHandler()">
‫ وﻫﻮ ﺣﺪث ﺗﻐﯿﺮ ﻗﯿﻤﺔ ﻣﻌﯿﻨﺔ ﻟﺤﻘﻞ‬onChang() ‫ ﺑﺎﻹﺿﺎﻓﺔ أﻧﻪ إﺿﻔﻨﺎ ﻋﻨﺪ اﻻﺧﺘﯿﺎر اﻟﺤﺪث‬yourSelect
‫ ﺛﻢ ﺑﻌﺪ ذﻟﻚ ﻧﻘﻮم ﺑﻮﺿﻊ اﻟﺨﯿﺎرات‬، ‫ واﻟﺘﻲ ﺳﻮف ﻧﺸﺮﺣﻬﺎ ﺑﻌﺪ ﻗﻠﯿﻞ‬formHandler() ‫ﻣﺎ ﺑﺤﯿﺚ ﯾﺘﻢ ﺗﻨﻔﯿﺬ اﻟﺪاﻟﺔ‬
value ‫ وﻫﻲ‬attribute ‫ < وﺑﻌﺪ ذﻟﻚ ﻧﻀﻊ ﻟﻜﻞ أﺧﺘﯿﺎر ﻗﯿﻤﺘﻪ ﻋﻦ ﻃﺮﯾﻖ اﻟـ‬option > tag ‫ﻋﻦ ﻃﺮﯾﻖ اﻟـ‬
‫ﺣﯿﺚ ﯾﺤﺘﻮي ﻫﺬا اﻻﻣﺮ‬. <option value="http://www.msn.com">MSN ‫وأﺣﺪ اﻟﺨﯿﺎرات اﻟﻤﻮﺟﻮدة ﻓﻲ اﻟﻤﺜﺎل‬
. http://www.msn.com ‫ ( اﻟﺘﺎﻟﯿﺔ‬value ) ‫ واﻟﺬي ﻟﻪ اﻟﻘﯿﻤﺔ‬MSN ‫ﻋﻠﻰ اﻟﺨﯿﺎر‬
٢٥
‫وﻫﻮ اﻟﺠﺰء اﻟﻤﺤﺎط ﺑﺎﻟﻮن اﻻﺣﻤﺮ وﻫﻮ اﻟﺠﺰء اﻟﺨﺎص ﺑﺎﻟﺠﺎﻓﺎ‬ ‫)(‪testform‬‬ ‫واﻻن ﺳﻮف ﻧﺘﺤﺪث ﻋﻦ اﻟﺪاﻟﺔ‬
‫ﺳﻜﺮﯾﺒﺖ‪:‬‬
‫ﻧﻼﺣﻆ ﻋﻨﺪ ﺗﻨﻔﯿﺬ اﻟﺪاﻟﺔ )(‪ formHandler‬ﻧﻘﻮم ﺑﺎﻟﺘﺎﻟﻲ أوﻻً ﻧﻘﻮم ﯾﺘﻌﺮﯾﻒ ﻣﺘﻐﯿﺮ ﺳﻤﯿﻨﺎه ‪ URL‬وﺟﻌﻠﻨﺎه ﯾﺴﺎوي‬
‫اﺳﻢ اﻟﻔﻮرم ﺑﺈﺿﺎﻓﺔ إﻟﻰ اﻟﻘﺎﺋﻤﺔ اﻟﻤﻨﺴﺪﻟﺔ وإﯾﻀﺎ اﻟﺨﯿﺎر اﻟﺬي ﺗﻢ أﺧﺘﯿﺎرة ﻣﻊ اﻟﻘﯿﻤﺔ اﻟﺘﻲ ﻣﻊ ﻫﺬا اﻟﺨﯿﺎر‪.‬‬
‫ﺛﻢ ﺑﻌﺪ ذﻟﻚ أﺳﺘﺨﺪام ﻫﺬا اﻟﻤﺘﻐﯿﺮ واﻟﺬي ﯾﺤﺘﻮي ﻋﻠﻰ اﺳﻢ ﻣﻮﻗﻊ ﻣﺎ ﻣﺜﻼً ‪ http://www.yahoo.com‬ﺣﯿﺚ ﺳﻮف‬
‫ﻧﺴﺘﺨﺪم ﻫﺬه اﻟﺠﻤﻠﺔ ‪ window.location.href=URL‬ﺣﯿﺚ ﺳﺎوﯾﻨﺎﻫﺎ ﻣﻊ اﻟﻤﺘﻐﯿﺮ اﻟﺬي ﺑﻪ اﺳﻢ ﻣﻮﻗﻊ ﻣﺎ وﻫﺬه‬
‫اﻟﺠﻤﻠﺔ ﺳﻮف ﺗﻘﻮم ﺑﺎﻻﻧﺘﻘﺎل إﻟﻰ ﻫﺬا اﻻرﺗﺒﺎط أو اﻟﺼﻔﺤﺔ اﻟﻤﻮﺟﻮدة ﻓﻲ ﻫﺬا اﻟﻤﺘﻐﯿﺮ‬
‫‪٢٦‬‬
‫اﻷﺣﺪاث‬
‫ﻣﻘﺪﻣﺔ ‪:‬‬
‫اﻟﻮﯾﻨﺪوز ﻫﻮ ﻣﺤﯿﻂ رﺳﺎﺋﻠﻲ ﯾﺘﻢ إرﺳﺎل رﺳﺎﻟﺔ ﻋﻨﺪ ﺣﺪوث ﺣﺪث ﻣﺜﻞ ﻣﺮور اﻟﻤﺎوس ﻓﻮق ﺻﻮرة أو ﻓﻮق زر‬
‫ﻣﻌﯿﻦ أو اﻟﺘﺮﻛﯿﺰ ﻋﻠﻰ ﻧﺎﻓﺬة أو ﺿﻐﻂ اﻟﺰر اﻷﯾﻤﻦ أو اﻷﯾﺴﺮ أو اﻷوﺳﻂ ﻟﻠﻤﺎوس وﻫﻜﺬا ﻧﺴﺘﻐﻞ ﻫﺬه اﻷﺣﺪاث‬
‫ﻟﺘﻨﺸﯿﻂ ﺟﺰء أو ﻛﻞ ﻣﻦ ﺑﺮﻧﺎﻣﺞ ﺟﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ ﻟﯿﻘﻮم ﺑﻌﻤﻞ وﻇﺎﺋﻔﻪ اﻟﻤﺼﻤﻢ ﻣﻦ اﺟﻠﻬﺎ وﺳﻨﺘﻌﺮض ﻣﻌﺎ ﺑﻌﺾ‬
‫اﻷﻣﺜﻠﺔ واﻷﺣﺪاث ﻟﺸﺮح اﻟﻔﻜﺮة ‪:‬‬
‫اﻟﺤﺪث‬ ‫ﺷﺮح اﻟﺤﺪث‬

‫)(‪onClick‬‬ ‫اﺳﺘﺠﺎﺑﺔ ﻟﻀﻐﻂ زر ﯾﺘﻢ ﺗﺤﺪﯾﺪه ﻋﻨﺪﻫﺎ ﯾﻨﻔﺬ ﺟﺰء ﻣﻦ اﻟﻜﻮد‬
‫)(‪onSubmit‬‬ ‫ﺗﺴﺘﺨﺪم ﻛﺜﯿﺮا اﺳﺘﺠﺎﺑﺔ ﻟﻀﻐﻂ اﻟﻤﺎوس أو ﻟﻮﺣﺔ اﻟﻤﻔﺎﺗﯿﺢ ﻋﻠﻰ زر إرﺳﺎل اﻟﻨﻤﺎذج‬
‫)(‪onMouseOver‬‬ ‫ﻫﻮ ﺣﺪث ﻣﺮور اﻟﻤﺎوس ﻓﻮق ﻋﻨﻮان أو وﺻﻠﺔ‬
‫)(‪onMouseOut‬‬ ‫ﺣﺪث ﺗﺤﺮﯾﻚ اﻟﻤﺎوس ﺑﻌﯿﺪا ﻋﻦ وﺻﻠﺔ‬
‫)(‪onFocus‬‬ ‫ﺣﺪث وﺿﻊ اﻟﻤﺎوس ﻋﻠﻰ ﺣﻘﻞ ﻣﺪﺧﻼت ﻣﻌﯿﻨﻪ‬
‫)(‪onChange‬‬ ‫ﺣﺪث ﺗﻐﯿﺮ ﻗﯿﻤﺔ ﻣﻌﯿﻨﻪ ﻟﺤﻘﻞ‬
‫)(‪onBlur‬‬ ‫ﺣﺪث ﺗﺮك ﺣﻘﻞ ﺑﯿﺎﻧﺎت ﺑﺪون ﺗﻐﯿﯿﺮ‬
‫)(‪onLoad‬‬ ‫ﺣﺪث اﻧﺘﻬﺎء ﻣﺘﺼﻔﺢ اﻹﻧﺘﺮﻧﺖ ﻣﻦ ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ اﻟﺤﺎﻟﯿﺔ‬
‫)(‪onUnload‬‬ ‫ﺣﺪث اﻟﺨﺮوج ﻣﻦ اﻟﺼﻔﺤﺔ اﻟﺤﺎﻟﯿﺔ إﻟﻰ‬
‫و اﻵن ﺳﻮف ﻧﺄﺧﺬ أﻣﺜﻠﺔ ﺗﻮﺿﺢ ﻛﯿﻔﯿﺔ أﺳﺘﺨﺪم اﻷﺣﺪاث ﻓﻲ ﺻﻔﺤﺔ اﻟﻮﯾﺐ أرﺟﻮ أن ﺗﻨﺘﻘﻞ إﻟﻰ اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ‪.‬‬
‫‪٢٧‬‬
: onClick() ‫ﻣﺜﺎل ﻋﻠﻰ اﻟﺤﺪث‬
No Statements
١ <html>
٢ <head>
٣ <title>Onclick alert message</title>
٤ <script language="javascript">
٥ function pushbutton()
٦ {
٧ alert("‫;)"ﲢﺖ اﻹﻧﺸﺎء‬
٨ }
٩ </script>
١٠ </head>
١١ <body>
١٢ <center>
١٣ <h2>
١٤ <a href=" http://www.cool.com" onClick="pushbutton();">
١٥ Vist our home page </a></h2>
١٦ </center>
١٧ </body>
١٨ </html>
‫ "ﻋﻨﺪ اﻟﺤﺪث اﻟﻀﻐﻂ اﻟﻔﺄرة‬http://www.cool.com" ‫ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﻋﻨﺪ اﻟﻘﯿﺎم ﺑﺎﻟﻀﻐﻂ ﻋﻠﻰ اﻻرﺗﺒﺎط‬
. "‫ واﻟﺘﻲ ﺗﻘﻮم ﺑﺈﻇﻬﺎر اﻟﺮﺳﺎﻟﺔ " ﺗﺤﺖ اﻹﻧﺸﺎء‬pushbutton() ‫ " ﯾﺘﻢ ﺗﻨﻔﯿﺬ اﻟﺪاﻟﺔ‬onClick() "
: ‫اﻟﯿﻚ اﻟﺘﻨﻔﯿﺬ‬
٢٨
: onSubmit() ‫ﻣﺜﺎل ﻋﻠﻰ اﻟﺤﺪث‬
No Statements
١ <html><head>
٢ <title>onSubmit alert message </title>
٣ <SCRIPT LANGUAGE="javascript">
٤ 
١٠ </SCRIPT>
١١ </head>
١٢ <body>
١٣ <form method=post onSubmit="return testform()">
١٤ <tabel>
١٥ <tr>
١٦ <td>Name : </td>
١٧ <td><input type="text" name="name" ></td></tr>
١٨ <p><tr><td>Email :</td>
١٩ <td><input type="text" name="Email" ></td></tr>
٢٠ </tabel>
٢١ <p>
٢٢ <input type="submit" name="‫ "إرﺳﺎل‬value="submit">
٢٣ </form>
٢٤ </body>
٢٥ </html>
‫ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﺳﻮف ﻧﻘﻮم ﺑﺈﻇﻬﺎر رﺳﺎﻟﺔ ﻟﻤﺴﺘﺨﺪم ﻋﻨﺪ اﻟﻘﯿﺎم ﺑﺎﻟﻀﻐﻂ ﻋﻠﻰ زر إرﺳﺎل ﻓﻲ اﻟـ‬
testform() ‫ " وذﻟﻚ ﻻﺳﺘﺪﻋﺎء اﻟﺪاﻟﺔ‬onSubmit() "‫ ﻟﺬﻟﻚ ﺳﻮف ﻧﺴﺘﺨﺪم اﻟﺤﺪث‬form
. " ‫واﻟﺘﻲ ﺗﻘﻮم ﺑﺈﻇﻬﺎر رﺳﺎﻟﺔ ﻟﻠﻤﺴﺘﺨﺪم وﻫﻲ " ﻧﺸﻜﺮك ﻟﺘﺴﺠﯿﻞ ﻣﻌﻨﺎ ﻓﻲ اﻟﻤﻮﻗﻊ‬
٢٩
‫ﻣﺜﺎل ﻋﻠﻰ اﻟﺤﺪﺛﯿﻦ )(‪ onMouseOver‬و)(‪: onMouseOut‬‬
‫‪١‬‬ ‫>‪<html><head‬‬
‫‪٢‬‬ ‫>‪<title>Onclick alert message</title‬‬
‫‪٣‬‬ ‫>"‪<script language="javascript‬‬
‫‪٤‬‬ ‫)(‪function MouseOver‬‬
‫‪٥‬‬ ‫{‬
‫‪٦‬‬ ‫;)"‪alert("The mouse was over‬‬
‫‪٧‬‬ ‫}‬
‫‪٨‬‬ ‫)(‪function MouseOut‬‬
‫‪٩‬‬ ‫{‬
‫‪١٠‬‬ ‫;)"‪alert("The mouse out of the link‬‬
‫‪١١‬‬ ‫}‬
‫‪١٢‬‬ ‫>‪</script‬‬
‫‪١٣‬‬ ‫>‪</head‬‬
‫‪١٤‬‬ ‫>‪<body‬‬
‫‪١٥‬‬ ‫>‪<center‬‬
‫‪١٦‬‬ ‫>‪<h2‬‬
‫‪١٧‬‬ ‫>";)(‪<a href="http://www.com" onMouseOver="MouseOver‬‬
‫‪١٨‬‬ ‫>‪Event win mouse over this link</a></h2‬‬
‫‪١٩‬‬ ‫>‪<hr‬‬
‫‪٢٠‬‬ ‫>‪<p‬‬
‫‪٢١‬‬ ‫>";)(‪<a href="http:/www.com" onMouseOut="MouseOut‬‬
‫‪٢٢‬‬ ‫>‪Event win mouse out of this link </a‬‬
‫‪٢٣‬‬ ‫>‪</center‬‬
‫‪٢٤‬‬ ‫>‪</body‬‬
‫‪٢٥‬‬ ‫>‪</html‬‬
‫ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﻋﻨﺪ اﻟﻘﯿﺎم ﺑﺎﻟﻤﺮور ﺑﺎﻟﻔﺄرة ﻋﻠﻰ وﺻﻠﺔ أو إرﺗﺒﺎط وﻫﻮ اﻟﺤﺪث‬
‫)(‪ " onMouseOver‬ﺣﯿﺚ ﺳﻮف ﻧﺴﺘﻔﯿﺪ ﻣﻦ ﻫﺬا اﻟﺤﺪث ﻓﻲ اﺳﺘﺪﻋﺎء داﻟﺔ ﻣﻜﺘﻮﺑﺔ ﺑﺎﻟﺠﺎﻓﺎ‬
‫ﺳﻜﺮﯾﺒﺖ وذﻟﻚ ﻟﻨﺘﻔﯿﺬ أي داﻟﺔ ﺗﺮﯾﺪﻫﺎ ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﺳﻮف ﻧﻘﻮم ﺑﺈﻇﻬﺎر رﺳﺎﻟﺔ ﺗﻨﺒﻪ اﻟﻤﺘﺴﺨﺪم‬
‫ﺑﻤﺮور اﻟﻔﺄرة ﻓﻮق اﻻرﺗﺒﺎط أو اﻟﻮﺻﻠﺔ وﻓﻲ ﻣﺜﺎﻟﻨﺎ اﻟﺮﺳﺎﻟﺔ ﻫﻲ " ‪" The mouse was over‬‬
‫وﻓﻲ اﻟﻮﺻﻠﺔ اﻻﺧﺮى ﻋﻨﺪ اﻟﻤﺮور وﻣﻦ ﺛﻢ اﻻﺑﺘﻌﺎد ﺑﺎﻟﻔﺄرة ﻋﻦ وﺻﻠﺔ أو ارﺗﺒﺎط وﻫﻮ اﻟﺤﺪث‬
‫)(‪ " MouseOut‬ﺣﯿﺚ ﺳﻮف ﻧﺴﺘﻔﯿﺪ ﻣﻦ ﻫﺬا اﻟﺤﺪث ﻓﻲ اﺳﺘﺪﻋﺎء داﻟﺔ ﻣﻜﺘﻮﺑﺔ ﺑﺎﻟﺠﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ‬
‫وذﻟﻚ ﻟﻨﺘﻔﯿﺬ أي داﻟﺔ ﺗﺮﯾﺪﻫﺎ ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﺳﻮف ﻧﻘﻮم ﺑﺈﻇﻬﺎر رﺳﺎﻟﺔ ﺗﻨﺒﻪ اﻟﻤﺘﺴﺨﺪم ﺑﻤﺮور‬
‫اﻟﻔﺄرة ﻓﻮق اﻻرﺗﺒﺎط أو اﻟﻮﺻﻠﺔ و ﻣﻦ ﺛﻢ اﻻﺑﺘﻌﺎد ﻋﻦ اﻟﻮﺻﻠﺔ أو اﻻرﺗﺒﺎط وﻓﻲ ﻣﺜﺎﻟﻨﺎ اﻟﺮﺳﺎﻟﺔ‬
‫ﻫﻲ " ‪" The mouse was over‬‬
‫‪٣٠‬‬

‫اﻟﯿﻚ اﻟﺘﻨﻔﯿﺬ ‪:‬‬
‫‪٣١‬‬
: onFocus() ‫ﻣﺜﺎل ﻋﻠﻰ اﻟﺤﺪث‬
No Statements
١ <html><head>
٢ <title>onFocus alert message</title>
٤ </SCRIPT>
٥ <body>
٦ Enrter your name:
٧ <form>
٨ <INPUT TYPE="TEXT" NAME "YourName" onFocus = "window.status=('Enter
your name');return true;">
٩ </form>
١٠ </center>
١١ <body>
١٢ </html>
"onFocus()" ‫ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﻋﻨﺪ اﻟﻘﯿﺎم ﺑﻮﺿﻊ اﻟﻤﺆﺷﺮ داﺧﻞ اﻟﺤﻘﻞ وﻫﻮ اﻟﺤﺪث‬
. " Enrter your name " ‫ﺗﻈﻬﺮ ﻟﻨﺎ رﺳﺎﻟﺔ ﻓﻲ أﺳﻔﻞ اﻟﻤﺴﺘﻌﺮض‬
٣٢
: onChange() ‫ﻣﺜﺎل ﻋﻠﻰ اﻟﺤﺪث‬
No Statements
١ <html><head>
٢ <title>onChange alert message</title>
٤ </SCRIPT>
٥ <body>
٦ Enter your name:
٧ <form>
٨ <INPUT TYPE="TEXT" NAME= "YourName" onChange="window.status=('you was
change the filed');return true;">
٩ </form>
١٠ </center>
١١ <body>
١٢ </html>
"onChange() ‫ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﻋﻨﺪ ﺗﻐﯿﯿﺮ ﻣﻜﺎن اﻟﻤﺆﺷﺮ ﻋﻦ اﻟﺤﻘﻞ " اﻟﻘﯿﺎم ﺑﺎﻟﺤﺪث‬
. "you was change the filed " ‫ﺗﻈﻬﺮ ﻟﻨﺎ رﺳﺎﻟﺔ ﻓﻲ أﺳﻔﻞ اﻟﻤﺴﺘﻌﺮض‬
٣٣
: onBlur() ‫ﻣﺜﺎل ﻋﻠﻰ اﻟﺤﺪث‬
No Statements
١ <html><head>
٢ <title> onBlur alert message</title>
٤ </SCRIPT>
٥ <body>
٦ Enter your name:
٧ <form>
٨ <INPUT TYPE="TEXT" NAME= "YourName" onBlur = "window.status=('youe
leaf the filed empty');return true;">
٩ </form>
١٠ </center>
١١ <body>
١٢ </html>
"onBlur() ‫ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﻋﻨﺪ ﺗﺮك اﻟﺤﻘﻞ ﻓﺎرﻏﺎً " اﻟﻘﯿﺎم ﺑﺎﻟﺤﺪث‬
. "you leaf the filed empty " ‫ﺗﻈﻬﺮ ﻟﻨﺎ رﺳﺎﻟﺔ ﻓﻲ أﺳﻔﻞ اﻟﻤﺴﺘﻌﺮض‬
٣٤
‫ﻣﺜﺎل ﻋﻠﻰ اﻟﺤﺪﺛﯿﻦ )(‪ onLoad‬و)(‪: onUnload‬‬
‫‪١‬‬ ‫>‪<html><head‬‬
‫‪٢‬‬ ‫>‪<title>onLoad & onUnload alert message</title‬‬
‫‪٣‬‬ ‫>"‪<script language="javascript‬‬
‫‪٤‬‬ ‫)(‪function onloadweb‬‬
‫‪٥‬‬ ‫{‬
‫‪٦‬‬ ‫;)"أﻫﻼ ﺑﻜﻢ ﰲ ﻣﻮﻗﻌﻨﺎ"(‪alert‬‬
‫‪٧‬‬ ‫}‬
‫‪٨‬‬ ‫)(‪function onUnloadweb‬‬
‫‪٩‬‬ ‫{‬
‫‪١٠‬‬ ‫;)"ﻧﺸﻜﺮﻛﻢ ﻋﻠﻰ زﯾﺎرة ﻣﻮﻗﻌﻨﺎ"(‪alert‬‬
‫‪١١‬‬ ‫}‬
‫‪١٢‬‬ ‫>‪</script‬‬
‫‪١٣‬‬ ‫>‪</head‬‬
‫‪١٤‬‬ ‫>")(‪<body onLoad="onloadweb()" onUnload="onUnloadweb‬‬
‫‪١٥‬‬ ‫>‪<h1></center‬ﺑﺴﻢ اﷲ اﻟﺮﲪﻦ اﻟﺮﺣﯿﻢ>‪<center><h1‬‬
‫‪١٦‬‬ ‫>‪</body‬‬
‫‪١٧‬‬ ‫>‪</html‬‬
‫ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﻋﻨﺪ اﻟﻘﯿﺎم ﺑﺘﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ وﻫﻮ اﻟﺤﺪث " )(‪" onLoad‬‬
‫ﯾﺘﻢ ﺗﻨﻔﯿﺬ اﻟﺪاﻟﺔ )(‪ onloadweb‬ﻓﺘﻈﻬﺮ ﻟﻨﺎ رﺳﺎﻟﺔ " أﻫﻼ ﺑﻜﻢ ﻓﻲ ﻣﻮﻗﻌﻨﺎ " ‪.‬‬
‫وﻋﻨﺪ اﻟﻘﯿﺎم ﺑﺈﻏﻼق اﻟﺼﻔﺤﺔ ) اﻟﻤﺴﺘﻌﺮض ( و ﻫﻮ اﻟﺤﺪث )(‪" onUnload‬‬
‫ﯾﺘﻢ ﺗﻨﻔﯿﺬ اﻟﺪاﻟﺔ )(‪ onUnloadweb‬ﻓﺘﻈﻬﺮ ﻟﻨﺎ رﺳﺎﻟﺔ " ﻧﺸﻜﺮﻛﻢ ﻋﻠﻰ زﯾﺎرة ﻣﻮﻗﻌﻨﺎ " ‪.‬‬
‫‪٣٥‬‬
‫ﺑﻌﺾ اﻷﻣﺜﻠﺔ ﻣﺘﻨﻮﻋﺔ‬
‫ﻣﺜﺎل ﻋﻦ ﻛﯿﻔﯿﺔ اﻟﺘﻨﻘﻞ ﺑﯿﻦ اﻟﻌﻨﺎوﯾﻦ اﻟﻤﺨﺰﻧﺔ ﻓﻲ اﻟﻤﺘﺼﻔﺢ ‪:‬‬
‫‪١‬‬ ‫>‪<HTML‬‬
‫‪٢‬‬ ‫>‪<HEAD‬‬
‫‪٣‬‬ ‫>‪<TITLE> History Buttons </TITLE‬‬
‫‪٤‬‬ ‫>"‪<SCRIPT LANGUAGE="JavaScript‬‬
‫‪٥‬‬ ‫};)‪function nav(X){ history.go(X‬‬
‫‪٦‬‬ ‫>‪</SCRIPT‬‬
‫‪٧‬‬ ‫>‪</<HEAD‬‬
‫‪٨‬‬ ‫>‪<BODY‬‬
‫‪٩‬‬ ‫>‪<CENTER><h1>Histoy Buttons</h1‬‬
‫‪<h2> Here are the tow buttons made with navigator form buttons:‬‬
‫‪١٠‬‬ ‫>‪</h2><P‬‬
‫‪١١‬‬ ‫>‪<FORM‬‬
‫‪١٢‬‬ ‫>")‪" onClick="nav(-1‬اﻟﺼﻔﺤﺔ اﻟﺴﺎﺑﻘﺔ"=‪<INPUT TYPE="button" VALUE‬‬
‫‪١٣‬‬ ‫>")‪" onClick="nav(1‬اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ"=‪<INPUT TYPE="button" VALUE‬‬
‫‪١٤‬‬ ‫>‪</FORM‬‬
‫‪١٥‬‬ ‫>‪</CENTER‬‬
‫‪١٦‬‬ ‫>‪</BODY‬‬
‫‪١٧‬‬ ‫>‪</HTML‬‬
‫ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﻗﻤﻨﺎ ﺑﻌﺮض ﻃﺮﯾﻘﺘﯿﻦ ﻟﺘﻨﻘﻞ ﺑﯿﻦ اﻟﻌﻨﺎوﯾﻦ اﻟﻤﺨﺰﻧﺔ ﻓﻲ اﻟﻤﺘﺼﻔﺢ ﺣﯿﺚ ﺳﻮف‬
‫ﻧﺴﺘﻔﯿﺪ ﻣﻦ اﻟﻜﺎﺋﻦ ‪ history‬واﯾﻀﺎ اﻟﺪاﻟﺔ ) (‪ go‬ﺣﯿﺚ ﯾﺘﻢ ﺗﻤﺮﯾﺮ ﻗﯿﻤﺔ ‪ ١-‬إذا أردﻧﺎ اﻟﺮﺟﻮع‬
‫ﺻﻔﺤﺔ إﻟﻰ اﻟﺨﻠﻒ أو اﻟﻘﯿﻤﺔ ‪ ١‬إذا أردﻧﺎ اﻻﻧﺘﻘﺎل اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ‪ .‬وﻓﻲ ﻣﺜﺎﻟﻨﺎ ﻋﻨﺪاﻟﺤﺪث اﻟﻀﻐﻂ‬
‫ﻋﻠﻰ زر " اﻟﺼﻔﺤﺔ اﻟﺴﺎﺑﻘﺔ " ﯾﺘﻢ ﺗﻨﻔﯿﺬ اﻟﺪاﻟﺔ ) ‪ nav( 1-‬ﺣﯿﺚ ﯾﺘﻢ اﻻﻧﺘﻘﺎل إﻟﻰ اﻟﺼﻔﺤﺔ اﻟﻮﯾﺐ‬
‫اﻟﺴﺎﺑﻘﺔ‪.‬و اﯾﻀﺎ ﻋﻨﺪاﻟﺤﺪث اﻟﻀﻐﻂ ﻋﻠﻰ زر " اﻟﺼﻔﺤﺔ اﻟﺘﺎﻟﯿﺔ " ﯾﺘﻢ ﺗﻨﻔﯿﺬ اﻟﺪاﻟﺔ ) ‪nav( 1‬‬
‫ﺣﯿﺚ ﯾﺘﻢ اﻻﻧﺘﻘﺎل إﻟﻰ اﻟﺼﻔﺤﺔ اﻟﻮﯾﺐ اﻟﺘﺎﻟﯿﺔ ‪.‬‬
‫‪٣٦‬‬
‫ﻣﺜﺎل ﻋﻦ ﻛﯿﻔﯿﺔ إﻧﺸﺎء زر ﻹرﺳﺎل ﺑﺮﯾﺪ إﻟﻜﺘﺮوﻧﻲ ‪:‬‬
‫‪١‬‬ ‫>‪<HTML‬‬
‫‪٢‬‬ ‫>‪<HEAD‬‬
‫‪٣‬‬ ‫>‪<title> Email button</title‬‬
‫‪٤‬‬ ‫>‪</HEAD‬‬
‫‪٥‬‬ ‫>‪<BODY‬‬
‫‪٦‬‬ ‫>‪<FROM‬‬
‫"‪<INPUT TYPE="button" VALUE="send e-mail‬‬
‫‪٧‬‬ ‫>";'‪onClick="self.location='mailto:mymail@any_compeny.com‬‬
‫‪٨‬‬ ‫>‪</FORM‬‬
‫‪٩‬‬ ‫>‪</BODY‬‬
‫‪١٠‬‬ ‫>‪</HTML‬‬
‫ﻋﻨﺪ اﻟﺤﺪث ‪ onClick‬ﺳﻮف ﯾﺘﻢ ﺗﻨﻔﯿﺬ اﻟﺒﺮﻧﺎﻣﺞ ‪ self.location‬وﻫﺬا اﻷﻣﺮ ﯾﻘﻮم ﺑﺈرﺳﺎل‬
‫اﻟﻤﺴﺘﺨﺪم إﻟﻰ ﺑﺮﻧﺎﻣﺞ اﻟﺒﺮﯾﺪ اﻻﻟﻜﺘﺮوﻧﻲ اﻻﻓﺘﺮاﺿﻲ اﻟﻤﻮﺟﻮد ﻋﻠﻰ اﻟﻜﻤﺒﯿﻮﺗﺮ ‪ ،‬واﻟﻌﻨﻮان ﻓﻲ‬
‫ﺣﻘﻞ " إرﺳﺎل إﻟﻰ " وﻓﻲ ﻣﺜﺎﻟﻨﺎ ﯾﺘﻢ ﻓﻲ ﻫﺬا اﻟﺤﻘﻞ ﻛﺘﺎﺑﺔ ‪. mymail@any_compeny.com‬‬
‫إﻟﯿﻚ اﻟﺘﻨﻔﯿﺬ‪:‬‬
‫‪٣٧‬‬

: ‫ﻣﺜﺎل ﻋﻦ ﻛﯿﻔﯿﺔ ﻓﺤﺺ و اﺧﺘﺒﺎر اﻟﻤﺘﺼﻔﺢ‬
No Statements
١ <HTML>
٢ <HEAD>
٣ <TITLE> testing All Browsers</TITLE>
٤ <SCRIPT>
٥ function browsertest()
٦ {
٧ thisapp=navigator.appName
٨ thisversion=navigator.appVersion
٩ thisappcodename=navigator.appCodeName
١٠ alert("Youare using "+thisapp+"version"+thisversion+",which is code
named"+thisappcodename+".");
١١ }
١٢ </SCRIPT>
١٣ </HEAD>
١٤ <BODY onload="browsertest()" bgcolor="FFFFFF">
١٥ <CENTER>
١٦ <H1> Testing All Browsers</H1>
١٧ <H2>You can modigy this script and use it to direct your JavaScript
visitors in one direction .and other visitors elsewhere.</H2>
١٨ </CENTER>
١٩ </BODY>
٢٠ </HTML>
‫ ﺣﯿﺚ‬browsertest() ‫ ﯾﺘﻢ ﺗﻨﻔﯿﺬ اﻟﺪاﻟﺔ‬onload ‫ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﻋﻨﺪ ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ أي اﻟﺤﺪث‬
‫ واﻟﺨﺎﺻﯿﺔ‬، navigator ‫ﺗﻘﻮم ﻫﺬه اﻟﺪاﻟﺔ ﺑﻔﺤﺺ واﺧﺘﺒﺎر اﻟﻤﺘﺼﻔﺢ وذﻟﻚ ﻋﻦ ﻃﺮﯾﻖ اﻟﻜﺎﺋﻦ‬
appName
: ‫ ﺣﯿﺚ‬appCodeName ‫ و‬appVersion ‫و‬
‫ ﺳﻮف ﺗﻘﻮم ﺑﺈرﺟﺎع اﺳﻢ اﻟﻤﺘﺼﻔﺢ‬navigator.appName ‫ﻋﻨﺪ ﻛﺘﺎﺑﺔ اﻟﺠﻤﻠﺔ‬
‫ ﺳﻮف ﺗﻘﻮم ﺑﺈرﺟﺎع إﺻﺪار اﻟﻤﺘﺼﻔﺢ‬navigator.appVersion ‫وﻋﻨﺪ ﻛﺘﺎﺑﺔ اﻟﺠﻤﻠﺔ‬
. ‫ ﺳﻮف ﺗﻘﻮم ﺑﺈرﺟﺎع اﻻﺳﻢ اﻟﺒﺮ ﻣﺠﻲ‬navigator.appCodeName ‫وﻋﻨﺪ ﻛﺘﺎﺑﺔ اﻟﺠﻤﻠﺔ‬
٣٨

تعلم جافا سكريبت

Uploaded by

Document Information

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

تعلم جافا سكريبت

Uploaded by

Copyright:

Available Formats

‫‪ ‬‬

‫إﻋﺪاد اﻟﻄﺎﻟﺐ ‪-:‬‬

‫ﻓﺆاد ﺷﻮﻋﻲ ﻣﺤﻤﺪ ﻋﻠﻰ اﷲ‬

‫أ‪ -‬ﻋﺜﻤﺎن أﺣﻤﺪ اﻟﻌﻤﻮدي‬

‫ﻣﺤﻤﺪ ﺻﺪﻳﻖ ﺣﺴﻦ‬

‫ﻣﺎ ﻫﻲ اﻟﺒﺮاﻣﺞ اﻟﺘﻲ ﺗﺤﺘﺎﺟﻬﺎ ﻟﻜﺘﺎﺑﺔ ﺑﺮاﻣﺞ واﺧﺘﺒﺎرﻫﺎ‪.‬‬

‫اﻟﻤﻮﺿﻮع ﺑﻤﻨﺘﻬﺎ اﻟﺴﻬﻮﻟﺔ ﻓﻜﻞ ﻣﺎ ﺗﺤﺘﺎﺟﻪ ﻫﻮ ﻣﺎ ﯾﻠﻲ ‪:‬‬

‫‪ o‬ﻣﺤﺮر اﻟﻨﺼﻮص اﻟﻤﺮﻓﻖ ﻣﻊ اﻟﻮﯾﻨﺪوز ) ‪.( Notepad‬‬

‫ﻫﺬا ﻛﻞ ﺷﻲء ﻛﻞ ﻣﺎ ﺗﺤﺘﺎﺟﻪ ‪.‬‬

‫اﺳﺘﺨﺪام ‪: Java Script‬‬

‫ﺗﻌﻠﯿﻤﺎت اﻟﺠﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ ﺗﻮﺿﻊ ﻫﻨﺎ‬

‫‪ -٨‬اﻟﻌﺒﺎرة )">‪ document.write("<FONT COLOR='Red'>Welcome To Java script</FONT‬و ﻓﻲ‬

‫ﻻﺣﻆ ﻫﻨﺎ ﺟﯿﺪا ﺷﻜﻞ اﻷﻣﺮ ‪:‬‬

‫)">‪document.write("<FONT COLOR='Red'>Welcome To Java script</FONT‬‬

‫>‪document . write("<FONT COLOR='Red'>Welcome To Java script</FONT‬‬

‫أﻫﻢ اﻟﻨﻘﺎط اﻟﻤﺴﺘﻔﺎدة ﻣﻦ اﻟﻤﺜﺎل اﻟﺴﺎﺑﻖ ‪:‬‬

‫وﯾﻨﺘﻬﻲ ﺑﺎﻟﺠﻤﻠﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬

‫أﺣﺪ أﺷﻜﺎل اﻷﻣﺮ ﻓﻲ اﻟﺠﺎﻓﺎ ﺳﻜﺮﯾﺒﺖ ﻫﻮ ‪:‬‬ ‫•‬

‫ﻓﻲ ﻫﺬه اﻟﻤﻨﻄﻘﺔ‬

‫ﯾﺘﻢ ﻛﺘﺎﺑﺔ اﺳﻢ‬

‫اﻟﻘﺎﺋﻤﺔ اﻟﻤﻨﺴﺪﻟﺔ ﻋﺮض‬

‫ﻣﺎ ﺳﯿﻈﻬﺮ ﻋﻨﺪ ﺗﻨﻔﯿﺬ اﻟﻌﺒﺎرة‬

‫ﯾﺘﻢ ﻇﻬﻮر اﻟـ ‪code‬‬

‫ﻛﯿﻒ ﻧﻌﺎﻟﺞ و ﻧﺘﻼﻓﻰ اﻷﺧﻄﺎء ؟‬

‫اﻷﺧﻄﺎء اﻟﻤﺮﻛﺒﺔ ‪:‬‬

‫اﻹﻋﻼن ﻋﻦ اﻟﻤﺘﻐﯿﺮات‬ ‫•‬

‫وﯾﻤﻜﻦ ﻛﺘﺎﺑﺔ ﻋﺪة ﻣﺘﻐﯿﺮات ﻋﻠﻰ ﺳﻄﺮ واﺣﺪ‬ ‫•‬

‫وﯾﻤﻜﻦ ﺗﺨﺼﯿﺺ ﻗﯿﻢ اﺑﺘﺪاﺋﯿﺔ ﻟﻠﻤﺘﻐﯿﺮات‬ ‫•‬

‫اﻟﻤﻌﺎﻣﻼت اﻟﺤﺴﺎﺑﯿﺔ‬ ‫•‬

‫اﻟﺼﻮرة اﻟﻌﺎﻣﺔ ﻟﻌﺒﺎرة اﻟﺘﺤﻜﻢ ‪ if‬اﻟﺸﺮﻃﯿﺔ ﻫﻮ اﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ ‪:‬‬

‫) ﯾﺘﻢ وﺿﻊ اﻟﺸﺮط ﻫﻨﺎ ( ‪If‬‬

‫وﻵن ﺳﻮف ﻧﺄﺧﺬ ﻣﺜﺎل ﯾﺘﻢ ﺗﻮﺿﯿﺢ ﻣﺎ ﺳﺒﻖ ذﻛﺮه‪:‬‬

‫اﻟﺸﻜﻞ اﻟﻌﺎم ﻟﺠﻤﻠﺔ ‪ switch‬وﻫﻲ ‪:‬‬

‫{‬ ‫ﺑﺪاﯾﺔ ﻗﻮس ﺟﻤﻠﺔ اﻟﺘﺤﻜﻢ ‪switch‬‬

‫}‬ ‫ﻧﻬﺎﯾﺔ ﻗﻮس ﺟﻤﻠﺔ اﻟﺘﺤﻜﻢ ‪switch‬‬

‫{‬ ‫ﺑﺪاﯾﺔ ﻗﻮس ﺟﻤﻠﺔ اﻟﺘﻜﺮار ‪for‬‬

‫ﻧﻔﺬ ﻫﺬه اﻷواﻣﺮ‬

‫}‬ ‫ﻧﻬﺎﯾﺔ ﻗﻮس ﺟﻤﻠﺔ اﻟﺘﻜﺮار ‪for‬‬

‫إﻟﯿﻚ اﻟﻤﺜﺎل اﻟﺬي ﯾﻮﺿﺢ ذﻟﻚ‬

‫)‪for (var x = 1; x <= 10 ; x++‬‬

‫اﻟﺨﻄﻮة اﻷوﻟﻰ ‪:‬‬

‫أن ﯾﻀﻊ ﻗﯿﻤﺔ أوﻟﯿﺔ ﻟﻤﺘﻐﯿﺮ ‪. I‬‬

‫اﻟﺨﻄﻮة اﻟﺜﺎﻧﯿﺔ ‪:‬‬

‫اﻟﺨﻄﻮة اﻟﺜﺎﻟﺜﺔ ‪:‬‬

‫اﻟﺨﻄﻮة اﻟﺮاﺑﻌﺔ ‪:‬‬

‫ﯾﺨﺮج ﻣﻦ ﺟﻤﻠﺔ اﻟﺘﻜﺮار ‪ for‬وﯾﻨﻔﺬ ﺑﺎﻗﻲ اﻟﺒﺮﻧﺎﻣﺞ ‪.‬‬

‫واﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ ﯾﻮﺿﺢ اﻟﺠﺰء اﻟﺴﺎﺑﻖ ‪:‬‬

‫} ;)" ‪{ document.write(" welcome‬‬

‫};)" *‪default:{ document.write(" *+*+*+*+‬‬

‫اﻟﺸﻜﻞ اﻟﻌﺎم ﻟﻌﺒﺎرة ‪ while‬ﻛﺂﻻﺗﻲ ‪:‬‬

‫; ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮ و إﻋﻄﺎءه ﻗﯿﻤﺔ أوﻟﯿﺔ‬

‫) ﺷﺮط ﯾﺘﻢ ﻓﯿﻪ ﺗﺤﺪﯾﺪ ﻋﺪد ﻣﺮات اﻟﺘﻜﺮار ( ‪while‬‬

‫{‬ ‫ﺑﺪاﯾﺔ ﻗﻮس ﺟﻤﻠﺔ اﻟﺘﻜﺮار ‪while‬‬

‫ﻧﻔﺬ ﻫﺬه اﻷواﻣﺮ‬

‫زﯾﺎدة اﻟﻤﺘﻐﯿﺮ اﻟﺬي ﺗﻢ ﺗﻌﺮﯾﻔﺔ ﻓﻲ اﻷﻋﻠﻰ‬ ‫;‬

‫}‬ ‫ﻧﻬﺎﯾﺔ ﻗﻮس ﺟﻤﻠﺔ اﻟﺘﻜﺮار ‪while‬‬

‫اﻟﯿﻚ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‬

‫‪" < h‬‬ ‫"‪"+x+‬‬ ‫‪> welcome‬‬ ‫‪" +x+‬‬ ‫""‬

‫ﻫﺬا اﻟﺴﻄﺮ ﺳﻮف ﻧﺸﺮﺣﻪ ﻋﻠﻰ ﺧﻄﻮات ‪:‬‬

‫اﻟﺨﻄﻮة اﻟﺜﺎﻧﯿﺔ ‪:‬‬

‫‪. x‬‬ ‫ﯾﻘﻮم ﺑﻄﺒﺎﻋﺔ ﻗﯿﻤﺔ اﻟﻤﺘﻐﯿﺮ‬

‫‪Function FunctionName‬‬ ‫)(‬

‫و اﻵن ﺳﻮف ﻧﺄﺧﺬ ﻣﺜﺎل ﺑﺴﯿﻂ ﻟﻄﺮﯾﻘﺔ اﺳﺘﺨﺪام اﻟﺪوال‪:‬‬

‫)" اﻟﻨﺺ اﻟﻤﻄﻠﻮب ﻃﺒﺎﻋﺘﻪ " ِ(‪alert‬‬

‫};)" ‪default:{ document.write(" +*+++‬‬