‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪www.SoftGozar.

Com‬‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫ﺑﻪ ﻧﺎم ﺧﺪا‬

‫آﻣﻮزش ‪) JAVASCRIPT‬ﻻﯾﻪ ﺳﻮم از ﻃﺮاﺣﯽ وب(‬

‫ﺑﺮﮔﺮﻓﺘﻪ از ﮐﺘﺎب ‪:‬‬

‫‪Professional JavaScript for Web Developers‬‬
‫‪By : Nicholas C.Zakas‬‬

‫آﺷﻨﺎﯾﯽ ﺑﺎ ﻣﻔﺎﻫﯿﻢ ﭘﺎﯾﻪ ‪javascript‬‬

‫ﮐﺎر ﺑﺎ آراﯾﻪ ﻫﺎ و رﺷﺘﻪ ﻫﺎ‬
‫آﺷﻨﺎﯾﯽ ﺑﺎ اﻧﻮاع اﺷﯿﺎء ‪ ،‬ﻣﺘﺪﻫﺎ و ﺧﻮاﺻﺸﺎن‬
‫آﺷﻨﺎﯾﯽ ﺑﺎ ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ )‪(BOM‬‬
‫آﺷﻨﺎﯾﯽ ﺑﺎ ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ )‪(DOM‬‬
‫ﺑﺮرﺳﯽ و روش ﮐﻨﺘﺮل روﯾﺪاد ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫آﻣﻮزش ﮐﺎر ﺑﺎ ﻓﺮم ﻫﺎ و ﺟﺪاول از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اراﺋﻪ اﻧﻮاع ﻣﺜﺎل ﻫﺎ و ﻧﻤﻮﻧﻪ ﮐﺪ ﻫﺎ‬
‫و ‪...‬‬

‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬

‫داﻧﺸﮕﺎه ﭘﯿﺎم ﻧﻮر ﻣﺮﮐﺰ آران و ﺑﯿﺪﮔﻞ‬
‫اﻧﺘﻘﺎدات و ﭘﯿﺸﻨﻬﺎدات ﺧﻮد را از ﻃﺮﯾﻖ اﯾﻤﯿﻞ زﯾﺮ ﻣﻄﺮح ﻧﻤﺎﯾﯿﺪ ‪:‬‬
‫‪[email protected]‬‬
‫‪١‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪www.SoftGozar.Com‬‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﻧﻮاع زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺗﺤﺖ وب‬
‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ داﻧﯿﺪ ﮐﺎﻣﭙﯿﻮﺗﺮ ﻫﺎي ﻣﻮﺟﻮد در ﺷﺒﮑﻪ اﯾﻨﺘﺮﻧﺖ را ﺑﻪ دو دﺳﺘﻪ اﺻﻠﯽ ﺗﻘﺴﯿﻢ ﻣﯽ ﮐﻨﻨﺪ ‪ .‬ﮐﺎﻣﭙﯿﻮﺗﺮ ﻫﺎي ﮐﺎرﺑﺮ )‪ (client‬و‬
‫ﮐﺎﻣﭙﯿﻮﺗﺮ ﻫﺎي ﺳﺮور )‪ . (server‬زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺗﺤﺖ وب ﻧﯿﺰ ﺑﻪ دو دﺳﺘﻪ ﺗﺤﺖ ﮐﺎرﺑﺮ )‪ (Client Side‬و ﺗﺤﺖ ﺳﺮور‬
‫)‪ (server side‬ﺗﻘﺴﯿﻢ ﺑﻨﺪي ﻣﯽ ﺷﻮﻧﺪ ‪.‬‬

‫زﺑﺎن ﻫﺎي ﺗﺤﺖ ﮐﺎرﺑﺮ زﺑﺎن ﻫﺎﯾﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﺑﻮﺳﯿﻠﻪ ﻣﺮورﮔﺮ و ﻓﻘﻂ ﺑﺮ روي ‪ client‬ﻫﺎ اﺟﺮا ﻣﯽ ﺷﻮﻧﺪ ‪ .‬در واﻗﻊ ﺑﺮاي اﺟﺮاي اﯾﻦ ﮔﻮﻧﻪ زﺑﺎن‬
‫ﻫﺎ ﺑﻪ ﺳﺮور ﻫﺎ ﻧﯿﺎزي ﻧﯿﺴﺖ ‪ .‬زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ HTML , CSS , JAVASCRIPT‬از اﯾﻦ دﺳﺖ ﻫﺴﺘﻨﺪ ‪ .‬از اﯾﻦ زﺑﺎن ﻫﺎ ﻣﻌﻤﻮﻻ‬
‫ﺑﻪ ﺗﻨﻬﺎﯾﯽ ﺑﺮاي اﯾﺠﺎد ﺳﺎﯾﺖ ﻫﺎي ﺑﺎ ﻣﺤﺘﻮاي ﺛﺎﺑﺖ ﮐﻪ اﺻﻄﻼﺣﺎ ﺑﻪ آن ﻫﺎ ﺳﺎﯾﺖ ﻫﺎي ‪) static‬اﯾﺴﺘﺎ( ﻣﯽ ﮔﻮﯾﻨﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬
‫در ﻣﻘﺎﺑﻞ اﯾﻦ زﺑﺎن ﻫﺎ ‪ ،‬زﺑﺎن ﻫﺎي ﺗﺤﺖ ﺳﺮور وﺟﻮد دارﻧﺪ ﮐﻪ ﺑﺮاي اﺟﺮا ﻧﯿﺎز ﺑﻪ ﺳﺮور ﻫﺎ داﺷﺘﻪ و ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﺮاي اﺟﺮا ﺣﺘﻤﺎ ﺑﺮ روي ﺳﺮور‬
‫ﻫﺎ ﻗﺮار ﺑﮕﯿﺮﻧﺪ ‪ .‬اﯾﻨﮕﻮﻧﻪ زﺑﺎن ﻫﺎ اﻣﮑﺎن ﺑﺮﻗﺮاري ارﺗﺒﺎط ﺑﺎ ﭘﺎﯾﮕﺎه داده )‪ (Database‬را دارﻧﺪ‪ .‬زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ ASP ، PHP‬و ‪JSP‬‬
‫از اﯾﻦ دﺳﺖ ﻫﺴﺘﻨﺪ ‪ .‬از اﯾﻦ زﺑﺎن ﻫﺎ ﺑﺮاي اﯾﺠﺎد ﺳﺎﯾﺖ ﻫﺎي ﺑﺎ ﻣﺤﺘﻮاي ﭘﻮﯾﺎ ﮐﻪ اﺻﻄﻼﺣﺎ ﺑﻪ آن ﻫﺎ ﺳﺎﯾﺖ ﻫﺎي ‪) dynamic‬ﭘﻮﯾﺎ( ﮔﻔﺘﻪ‬
‫ﻣﯽ ﺷﻮد اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬

‫زﺑﺎن ‪ JavaScript‬ﯾﮑﯽ از زﺑﺎن ﻫﺎي ﻣﻬﻢ ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ وب و ﺗﺤﺖ ﮐﺎرﺑﺮ )‪ (client-side‬ﻣﯽ ﺑﺎﺷﺪ‪ .‬اﯾﻦ زﺑﺎن اوﻟﯿﻦ ﺑﺎر در ﺳﺎل‬
‫‪ ١٩٩۵‬اراﺋﻪ ﺷﺪ و وﻇﯿﻔﻪ آن ﺗﻨﻬﺎ ارزش ﺳﻨﺠﯽ ﻋﻨﺎﺻﺮ ﻓﺮم ﺑﻮد‪.‬‬

‫‪Document Object Model : DOM‬‬

‫‪ DOM‬ﯾﮑﯽ از ‪ API‬ﻫﺎ )راﺑﻂ ﯾﺎ ﻣﯿﺎﻧﺠﯽ ﺑﺮﻧﺎﻣﻪ ي ﮐﺎرﺑﺮدي( ﺑﺮاي زﺑﺎن ﻫﺎي ﻣﻬﻢ ‪ HTML‬و ‪ XML‬ﺑﻪ ﺷﻤﺎر ﻣﯽ رود‪.‬‬
‫‪ DOM‬ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﯾﮏ ﺻﻔﺤﻪ وب را ﺑﻪ ﺻﻮرت درﺧﺘﯽ از ﮔﺮه ﻫﺎ )‪ (node‬ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﺪ ‪.‬‬
‫‪ DOM‬ﺑﺎ ﺗﺮﺳﯿﻢ درﺧﺘﯽ ﻓﺮﺿﯽ از ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﯾﮏ ﺻﻔﺤﻪ ي وب اﻣﮑﺎن ﺑﯽ ﻧﻈﯿﺮي ﺑﻪ ﻃﺮاﺣﺎن وب ﺑﺮاي ﮐﻨﺘﺮل ﺑﺮ آن ﻫﺎ ﻣﯽ دﻫﺪ‪.‬‬
‫ﮔﺮه ﻫﺎ ﺑﺎ اﺳﺘﻔﺎده از ‪ DOM‬ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ راﺣﺘﯽ ﺣﺬف ‪ ,‬اﺿﺎﻓﻪ و ﯾﺎ ﺟﺎﺑﺠﺎ ﺷﻮﻧﺪ ‪.‬‬

‫‪Browser Object Model : BOM‬‬

‫ﯾﮑﯽ دﯾﮕﺮ از ‪ API‬ﻫﺎي ﺳﺎﺧﺘﻪ ﺷﺪه ﺑﺮاي ‪ HTML‬ﮐﻪ ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از وﯾﮋﮔﯽ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﻣﺮورﮔﺮﻫﺎي ‪ IE‬و ‪Netscape‬‬
‫ﻧﯿﺰ ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮد ‪ BOM‬اﺳﺖ‪.‬‬

‫‪٢‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫از ‪ BOM‬ﺑﺮاي دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري وﯾﮋﮔﯽ ﻫﺎي ﭘﻨﺠﺮه ﯾﮏ ﻣﺮورﮔﺮ ﻣﯽ ﺗﻮان اﺳﺘﻔﺎده ﮐﺮد‪.‬‬
‫ﻃﺮاﺣﺎن وب ﺑﺎ اﺳﺘﻔﺎده از ‪ BOM‬ﻣﯽ ﺗﻮاﻧﺪ ﮐﺎرﻫﺎﯾﯽ ﻫﻤﭽﻮن ﺟﺎﺑﺠﺎﯾﯽ ﭘﻨﺠﺮه ﻫﺎ و ﺗﻐﯿﯿﺮ ﻣﺘﻦ ﻣﻮﺟﻮد در ﻧﻮار وﺿﻌﯿﺖ ﻣﺮورﮔﺮ و دﯾﮕﺮ‬
‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ارﺗﺒﺎط ﻣﺴﺘﻘﯿﻤﯽ ﺑﺎ ﻗﺴﻤﺖ ‪ Content‬ﺳﻨﺪ ﻧﺪارد اﻧﺠﺎم دﻫﻨﺪ ‪.‬‬
‫ﻣﻌﻤﻮﻵ ‪ BOM‬ﺑﺎ ﭘﻨﺠﺮه ﻫﺎ و ﻓﺮﯾﻢ ﻫﺎ ﺳﺮ و ﮐﺎر داﺷﺘﻪ و ﻣﯽ ﺗﻮان از ﻃﺮﯾﻖ آن ﮐﺎرﻫﺎي زﯾﺮ را اﻧﺠﺎم داد ‪:‬‬
‫‪ ‬ﺑﺎز ﮐﺮدن ﭘﻨﺠﺮه ﻫﺎي ‪. Popup‬‬
‫‪ ‬ﺗﻮاﻧﺎﯾﯽ ﺑﺎزﮐﺮدن ﭘﻨﺠﺮه ﻫﺎي ﺟﺪﯾﺪ و ﺗﻐﯿﯿﺮ اﻧﺪازه و ﺟﺎﺑﺠﺎﯾﯽ و ﯾﺎ ﺑﺴﺘﻦ آن ﻫﺎ ‪.‬‬
‫‪ ‬ﺑﺪﺳﺖ آوردن اﻃﻼﻋﺎﺗﯽ از ﻣﺮورﮔﺮ )ﻧﻮع ‪ ,‬ورژن و ‪. (...‬‬
‫‪ ‬ﺑﺪﺳﺖ آوردن اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﺳﻨﺪ و ﻣﻮﻗﻌﯿﺖ ﺻﻔﺤﻪ اي ﮐﻪ در ﻣﺮورﮔﺮ ﺑﺎز ﺷﺪه اﺳﺖ ‪.‬‬
‫‪ ‬ﺑﺪﺳﺖ آوردن اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد وﺿﻮح )‪ (resolution‬ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﮐﺎرﺑﺮ ‪.‬‬
‫‪ ‬ﭘﺸﺘﯿﺒﺎﻧﯽ از ‪ Cookie‬ﻫﺎ ‪.‬‬
‫ﺑﻪ دﻟﯿﻞ اﯾﻨﮑﻪ ﻫﯿﭻ ﮔﻮﻧﻪ اﺳﺘﺎﻧﺪاردي ﺑﺮاي ‪ BOM‬وﺟﻮد ﻧﺪارد ﻫﺮ ﻣﺮورﮔﺮ ﻣﻤﮑﻦ اﺳﺖ ﺑﻪ ﺻﻮرﺗﯽ ﻣﺘﻔﺎوت از آن ﭘﺸﺘﯿﺒﺎﻧﯽ ﮐﻨﺪ‪ .‬ﻣﺎﻧﻨﺪ اﺷﯿﺎء‬
‫‪ Window‬و ‪ Navigator‬ﮐﻪ ﻫﺮ ﻣﺮورﮔﺮ ﻣﺘﺪﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮدي ﺑﺮاي آن ﻫﺎ ﺗﻌﺮﯾﻒ ﮐﺮده اﺳﺖ‪.‬‬
‫اﯾﻨﮏ ﺑﻪ ﭼﻨﺪ ﻣﻔﻬﻮم اﺻﻠﯽ در زﺑﺎن ‪ JavaScript‬ﻣﯽ ﭘﺮدازﯾﻢ ‪:‬‬
‫‪ ‬ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ‪ Case-Sensitive‬اﺳﺖ ‪ :‬ﯾﻌﻨﯽ ﻫﻤﻪ ﭼﯿﺰ ﻣﺎﻧﻨﺪ ﻧﺎم ﻣﺘﻐﯿﺮ ﻫﺎ ‪ ،‬ﻧﺎم ﺗﻮاﺑﻊ ‪ ،‬ﻋﻤﻠﮕﺮ ﻫﺎ و ﻫﺮ ﭼﯿﺰ دﯾﮕﺮي‬
‫ﻧﺴﺒﺖ ﺑﻪ ﺣﺮوف ﮐﻮﭼﮏ و ﺑﺰرگ ﺣﺴﺎس اﺳﺖ ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻣﺘﻐﯿﺮي ﺑﺎ ﻧﺎم ‪ Test‬ﺑﺎ ﻣﺘﻐﯿﺮي ﺑﺎ ﻧﺎم ‪ test‬ﻣﺘﻔﺎوت اﺳﺖ‪.‬‬
‫‪ ‬ﻣﺘﻐﯿﺮﻫﺎ ﺑﺪون ﻧﻮع ﻫﺴﺘﻨﺪ ‪ :‬ﺑﺮﺧﻼف زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ java‬و ‪ , C‬ﻣﺘﻐﯿﺮﻫﺎ ﻧﻮع ﺧﺎﺻﯽ ﻧﻤﯽ ﮔﯿﺮﻧﺪ‪ .‬در ﻋﻮض ﻫﺮ ﻣﺘﻐﯿﺮ‬
‫ﻣﯽ ﺗﻮاﻧﺪ ﺑﺎ ﮐﻠﻤﻪ ﮐﻠﯿﺪي ‪ var‬ﺗﻌﺮﯾﻒ ﺷﺪه و ﻣﻘﺪاري را ﺑﻪ ﻋﻨﻮان ﻣﻘﺪار اوﻟﯿﻪ ﺑﭙﺬﯾﺮد ‪ .‬در واﻗﻊ ﻣﺘﻐﯿﺮﻫﺎ "ﻣﻘﺪار ﮔﺮا" ﻫﺴﺘﻨﺪ‪ .‬ﯾﻌﻨﯽ‬
‫در ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻌﺮﯾﻒ )ﻣﻘﺪاردﻫﯽ( ﻣﯽ ﺷﻮﻧﺪ ﻧﻮﻋﺸﺎن ﻧﯿﺰ ﻣﺸﺨﺺ ﻣﯽ ﮔﺮدد ‪.‬‬
‫‪ ‬ﻗﺮار دادن );( در اﻧﺘﻬﺎي ﻫﺮ دﺳﺘﻮر اﺧﺘﯿﺎري اﺳﺖ ‪ :‬دﺳﺘﻮرات در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ );( ﺧﺘﻢ ﺷﻮﻧﺪ ﯾﺎ ﻧﺸﻮﻧﺪ‪ .‬در‬
‫ﺻﻮرت ﻗﺮار ﻧﺪادن );( ‪ ،‬ﺟﺎوا اﺳﮑﺮﯾﭙﺖ اﻧﺘﻬﺎي ﻫﺮ ﺧﻂ را ﺑﻪ ﻋﻨﻮان ﭘﺎﯾﺎن دﺳﺘﻮر در ﻧﻈﺮ ﺧﻮاﻫﺪ ﮔﺮﻓﺖ‪ .‬اﻣﺎ روش ﺻﺤﯿﺢ ‪ ،‬اﺳﺘﻔﺎده‬
‫از );( در اﻧﺘﻬﺎي دﺳﺘﻮرات اﺳﺖ‪ .‬ﭼﻮن ﺑﻌﻀﯽ از ﻣﺮورﮔﺮﻫﺎ از روش اول ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽ ﮐﻨﺪ و ﻣﻤﮑﻦ اﺳﺖ در اﺟﺮاي ﮐﺪﻫﺎ دﭼﺎر‬
‫ﻣﺸﮑﻞ ﺷﻮﻧﺪ‪.‬‬
‫‪ ‬درج ﺗﻮﺿﯿﺤﺎت در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ‪ :‬ﺑﺮاي درج ﺗﻮﺿﯿﺤﺎت در ﻣﯿﺎن ﮐﺪﻫﺎ از روش ﻫﺎي زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﻫﻤﭽﻮن ‪C‬‬
‫و ‪ C++‬ﻣﯽ ﺗﻮان اﺳﺘﻔﺎده ﻧﻤﻮد ﯾﻌﻨﯽ از ‪ //‬ﯾﺎ ‪: /* */‬‬
‫‪//this is a single-line comment‬‬

‫‪/* this is a multiline‬‬

‫‪comment */‬‬

‫ﻣﺘﻐﯿﺮﻫﺎ )‪ (Variables‬در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ‬

‫ﻣﺘﻐﯿﺮ ﻫﺎ ﺑﺎ ﮐﻠﻤﻪ ‪ var‬ﺗﻌﺮﯾﻒ ﻣﯽ ﺷﻮﻧﺪ‪ .‬ﻣﺎﻧﻨﺪ ‪:‬‬
‫‪Var‬‬ ‫;'‪test ='ali‬‬

‫در اﯾﻦ ﻣﺜﺎل ﻣﺘﻐﯿﺮي ﺑﺎ ﻧﺎم ‪ test‬اﻋﻼن ﺷﺪه و ﻣﻘﺪار اوﻟﯿﻪ '‪ 'ali‬را ﻣﯽ ﮔﯿﺮد‪.‬‬
‫ﭼﻮن ﻣﺘﻐﯿﺮﻫﺎ ﺑﺪون ﻧﻮع ﻫﺴﺘﻨﺪ ﻣﻔﺴﺮ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺧﻮد ﺑﻪ ﺧﻮد ﻧﻮع ‪ test‬را ‪ String‬در ﻧﻈﺮ ﻣﯽ ﮔﯿﺮد‪.‬‬
‫ﻣﺎ ﻫﻤﭽﻨﯿﻦ ﻣﯽ ﺗﻮاﻧﯿﻢ دو ﯾﺎ ﭼﻨﺪ ﻣﺘﻐﯿﺮ را ﻫﻤﺰﻣﺎن ﺗﻌﺮﯾﻒ ﮐﻨﯿﻢ‪.‬‬

‫‪Var‬‬ ‫; '‪test 1='ali' , test2='salam‬‬

‫‪٣‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺑﺎﯾﺪ ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ﻣﺘﻐﯿﺮﻫﺎﯾﯽ ﮐﻪ ﺑﺎ ﯾﮏ ‪ Var‬ﺗﻌﺮﯾﻒ ﻣﯽ ﺷﻮد ﻣﻤﮑﻦ اﺳﺖ ﻧﻮع ﯾﮑﺴﺎﻧﯽ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﻨﺪ‪.‬‬
‫‪Var‬‬ ‫;‪test_1='ali' , age=25‬‬

‫ﺑﺮﺧﻼف ﺟﺎوا )‪ (Java‬ﻣﺘﻐﯿﺮﻫﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ ﻣﻘﺪار اوﻟﯿﻪ ﻧﮕﯿﺮﻧﺪ‪.‬‬

‫‪Var‬‬ ‫; ‪test‬‬

‫‪ ‬ﺑﺮﺧﻼف ﺟﺎوا ﻣﺘﻐﯿﺮﻫﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ در زﻣﺎن ﻫﺎي ﻣﺨﺘﻠﻒ ﻣﻘﺪارﻫﺎي ﻣﺘﻔﺎوﺗﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ ‪ .‬اﯾﻦ ﯾﮑﯽ از اﻣﺘﯿﺎزات ﻣﺘﻐﯿﺮ‬
‫ﻫﺎي ﺑﺪون ﻧﻮع در زﺑﺎن ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺑﻪ ﺷﻤﺎر ﻣﯽ رود‪.‬‬

‫; "‪Var test ="hi‬‬

‫;)‪alert(test‬‬ ‫‪// hi‬‬
‫;‪Test=55‬‬
‫;)‪alert(test‬‬ ‫‪// 55‬‬
‫ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮ ﻫﺎ ‪:‬‬
‫ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮﻫﺎ ﻣﯽ ﺑﺎﯾﺴﺖ ﺷﺮاﯾﻂ زﯾﺮ را داﺷﺘﻪ ﺑﺎﺷﺪ ‪:‬‬
‫اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﻣﺘﻐﯿﺮ ﻣﯽ ﺗﻮاﻧﺪ ﯾﮏ ﺣﺮف ‪ ,‬ﯾﮏ ) _ ( ‪ Underline‬و ﯾﺎ ﯾﮏ ﻋﻼﻣﺖ ‪ $‬ﺑﺎﺷﺪ‪.‬‬ ‫‪.1‬‬
‫ﺑﻘﯿﻪ ﮐﺎراﮐﺘﺮﻫﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ از ‪ Underline , $‬و ﯾﺎ ﻫﺮ ﺣﺮف و ﻋﺪدي ﺑﺎﺷﻨﺪ‪.‬‬ ‫‪.2‬‬
‫ﺗﻤﺎم ﻣﺘﻐﯿﺮ ﻫﺎي زﯾﺮ ﺻﺤﯿﺢ ﻫﺴﺘﻨﺪ ‪:‬‬
‫‪Var‬‬ ‫; ‪test‬‬
‫‪var‬‬ ‫; ‪$test‬‬
‫‪var‬‬ ‫; ‪$1‬‬
‫‪var‬‬ ‫; ‪_$test2‬‬

‫ﯾﮑﯽ دﯾﮕﺮ از اﻣﺘﯿﺎزات و ﯾﺎ ﺷﺎﯾﺪ ﺟﺬاﺑﯿﺖ ﻫﺎي ‪) Java Script‬ﮐﻪ در ﺧﯿﻠﯽ از زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ دﯾﮕﺮ وﺟﻮد ﻧﺪارد( اﯾﻦ اﺳﺖ ﮐﻪ‬
‫ﻻزم ﻧﯿﺴﺖ ﮐﻪ ﻣﺘﻐﯿﺮ ﻫﺎ را ﻗﺒﻞ از ﻣﻘﺪار دﻫﯽ ‪ ،‬اﻋﻼن ﮐﻨﯿﻢ ‪:‬‬
‫;"‪var sTest="hello‬‬
‫;"‪sTest2=sTest + "world‬‬
‫‪alert (sTest2); // hello world‬‬
‫در ﻣﺜﺎل ﻓﻮق ﻣﺘﻐﯿﺮ ‪ sTest2‬ﻗﺒﻞ از ﻣﻘﺪاردﻫﯽ اﻋﻼن ﻧﺸﺪه اﺳﺖ ‪.‬‬
‫ﻣﻮﻗﻌﯽ ﮐﻪ ﻣﻔﺴﺮ ﺑﻪ ﭼﻨﯿﻦ ﻣﺘﻐﯿﺮﻫﺎي ﮐﻪ ﺑﺪون اﻋﻼن ﺷﺪن ﻣﻘﺪاردﻫﯽ ﻣﯽ ﺷﻮﻧﺪ ‪ ,‬ﻣﯽ رﺳﺪ ﯾﮏ ﻣﺘﻐﯿﺮ ﺳﺮاﺳﺮي ﺑﺎ آن ﻧﺎم اﯾﺠﺎد ﮐﺮده و‬
‫ﻣﻘﺪاري را ﺑﻪ آن اﺧﺘﺼﺎص ﻣﯽ دﻫﺪ‪.‬‬
‫ﺑﺎ اﯾﻦ وﺟﻮد ﭘﯿﺸﻨﻬﺎد ﻣﯽ ﺷﻮد ﻫﻤﯿﺸﻪ ﻗﺒﻞ از ﺑﻪ ﮐﺎرﮔﯿﺮي ﻣﺘﻐﯿﺮﻫﺎ آن ﻫﺎ را اﻋﻼن ﮐﻨﯿﺪ‪.‬‬

‫ﮐﻠﻤﺎت ﮐﻠﯿﺪي ‪:‬‬

‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻌﺪادي از ﮐﻠﻤﺎت را ﺑﻪ ﻋﻨﻮان ﮐﻠﻤﺎت ﮐﻠﯿﺪي )‪ (keywords‬ﻣﯽ ﺷﻨﺎﺳﺪ ‪ .‬اﯾﻦ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﻌﻤﻮﻻ اﺑﺘﺪا ﯾﺎ اﻧﺘﻬﺎي دﺳﺘﻮرات‬
‫را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﻨﺪ ‪ .‬ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﺑﻪ ﻋﻨﻮان ﮐﻠﻤﺎت رزرو ﺷﺪه ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮﻧﺪ و ﻧﻤﯽ ﺗﻮان از آن ﻫﺎ ﺑﻪ ﻋﻨﻮان ﻧﺎم ﻣﺘﻐﯿﺮ ﻫﺎ ﯾﺎ ﺗﻮاﺑﻊ‬
‫اﺳﺘﻔﺎده ﻧﻤﻮد ‪ .‬در زﯾﺮ ﻟﯿﺴﺖ ﮐﺎﻣﻠﯽ از اﯾﻦ ﮐﻠﻤﺎت را ﻣﺸﺎﻫﺪه ﻣﯽ ﮐﻨﯿﺪ ‪:‬‬
‫‪Break‬‬ ‫‪else‬‬ ‫‪new‬‬ ‫‪var‬‬
‫‪Case‬‬ ‫‪finally‬‬ ‫‪return‬‬ ‫‪void‬‬
‫‪Catch‬‬ ‫‪for‬‬ ‫‪switch‬‬ ‫‪while‬‬
‫‪Continue‬‬ ‫‪function‬‬ ‫‪this‬‬ ‫‪with‬‬
‫‪Default‬‬ ‫‪if‬‬ ‫‪throw‬‬
‫‪Delete‬‬ ‫‪in‬‬ ‫‪try‬‬
‫‪Do‬‬ ‫‪instanceof‬‬ ‫‪typeof‬‬
‫‪۴‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﮔﺮ ﺷﻤﺎ از ﯾﮑﯽ از ﮐﻠﻤﺎت ﻓﻮق ﺑﺮاي ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮ ﻫﺎ ﯾﺎ ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﺑﺎ ﺧﻄﺎي ‪ Identifier expected‬روﺑﺮو ﺧﻮاﻫﯿﺪ ﺷﺪ ‪.‬‬

‫ﮐﻠﻤﺎت رزرو ﺷﺪه ‪:‬‬

‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻌﺪادي از ﮐﻠﻤﺎت رزرو ﺷﺪه را ﻧﯿﺰ ﻣﻌﺮﻓﯽ ﮐﺮده اﺳﺖ ‪ .‬ﮐﻠﻤﺎت رزرو ﺷﺪه ﻧﯿﺰ ﻧﻤﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ ﻋﻨﻮان ﻧﺎم ﻣﺘﻐﯿﺮ ﻫﺎ و ﺗﻮاﺑﻊ اﺳﺘﻔﺎده‬
‫ﺷﻮﻧﺪ ‪ .‬ﻟﯿﺴﺖ ﮐﺎﻣﻠﯽ از اﯾﻦ ﮐﻠﻤﺎت را در زﯾﺮ ﻣﺸﺎﻫﺪه ﻣﯽ ﮐﻨﯿﺪ ‪:‬‬
‫‪Abstract‬‬ ‫‪enum‬‬ ‫‪int‬‬ ‫‪short‬‬
‫‪Boolean‬‬ ‫‪export‬‬ ‫‪interface‬‬ ‫‪static‬‬
‫‪Byte‬‬ ‫‪extends‬‬ ‫‪long‬‬ ‫‪super‬‬
‫‪Char‬‬ ‫‪final‬‬ ‫‪native‬‬ ‫‪synchronized‬‬
‫‪Class‬‬ ‫‪float‬‬ ‫‪package‬‬ ‫‪throws‬‬
‫‪Const‬‬ ‫‪goto‬‬ ‫‪private‬‬ ‫‪transient‬‬
‫‪Debugger‬‬ ‫‪implements‬‬ ‫‪protected‬‬ ‫‪volatile‬‬
‫‪Double‬‬ ‫‪import‬‬ ‫‪public‬‬
‫ﻣﻘﺎدﯾﺮ اﺻﻠﯽ ‪:‬‬
‫در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﭘﻨﺞ ﻧﻮع ﻣﻘﺪار اﺻﻠﯽ ﺑﻪ ﺷﺮح زﯾﺮ وﺟﻮد دارد ‪:‬‬
‫‪undefined , null , boolean , number , string‬‬
‫ﻋﻤﻠﮕﺮ ‪ typeof‬ﯾﮏ ﭘﺎراﻣﺘﺮ ﻣﯽ ﮔﯿﺮد ‪ :‬ﯾﺎ ﯾﮏ ﻣﺘﻐﯿﺮ ﯾﺎ ﯾﮏ ﻣﻘﺪار و ﻧﻮع آن را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫اﯾﻦ ﻋﻤﻠﮕﺮ ﯾﮑﯽ از ﭘﻨﺞ ﻧﻮع زﯾﺮ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫‪ : UndeFined‬اﮔﺮ ﻧﻮع ﻣﺘﻐﯿﺮ از ﻧﻮع ‪ undefined‬اﺳﺖ‪.‬‬ ‫‪‬‬
‫‪ : Boolean‬اﮔﺮ ﻧﻮع ﻣﺘﻐﯿﺮ از ﻧﻮع ‪ Boolean‬ﺑﺎﺷﺪ‪.‬‬ ‫‪‬‬
‫‪ : Number‬اﮔﺮ ﻧﻮع ﻣﺘﻐﯿﺮ از ﻧﻮع ‪ Number‬ﺑﺎﺷﺪ‪.‬‬ ‫‪‬‬
‫‪ : String‬اﮔﺮ ﻧﻮع ﻣﺘﻐﯿﺮ از ‪ String‬ﺑﺎﺷﺪ‪.‬‬ ‫‪‬‬
‫‪ : Object‬اﮔﺮ ﻣﺘﻐﯿﺮ ﯾﮏ ارﺟﺎع ﯾﺎ از ﻧﻮع ‪ null‬ﺑﺎﺷﺪ ‪.‬‬ ‫‪‬‬
‫ﻧﻮع داده ‪: Undefind‬‬
‫اﯾﻦ ﻧﻮع ﻓﻘﻂ ﺷﺎﻣﻞ ﯾﮏ ﻣﻘﺪار ﻣﯽ ﺷﻮد ‪. Undefined :‬‬
‫ﻣﺘﻐﯿﺮي ﮐﻪ اﻋﻼن ﻣﯽ ﺷﻮد وﻟﯽ ﻣﻘﺪار دﻫﯽ اوﻟﯿﻪ ﻧﻤﯽ ﺷﻮد ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض از ﻧﻮع ‪ Undefined‬ﺧﻮاﻫﺪ ﺑﻮد ‪.‬‬
‫; ‪Var oTemp‬‬
‫‪alert (typeof‬‬ ‫; )‪oTemp‬‬ ‫"‪// outputs "Undefined‬‬

‫ﻧﮑﺘﻪ اﯾﻨﮑﻪ ﮐﻪ ﻣﺘﻐﯿﺮي ﮐﻪ اﻋﻼن ﻣﯽ ﺷﻮد و ﻣﻘﺪار ﻧﻤﯽ ﮔﯿﺮد ﺑﺎ ﻣﺘﻐﯿﺮي ﮐﻪ اﺻﻶ اﻋﻼن ﻫﻢ ﻧﺸﺪه اﺳﺖ ﮐﺎﻣﻼ ﻣﺘﻔﺎوت اﺳﺖ ‪ .‬ﻫﺮ ﭼﻨﺪ ﮐﻪ‬
‫ﻋﻤﻠﮕﺮ ‪ typeof‬ﺑﯿﻦ اﯾﻦ دو ﺗﻔﺎوﺗﯽ ﻗﺎﺋﻞ ﻧﻤﯽ ﺷﻮد‪ .‬و ﺑﺮاي ﻫﺮ دو ﻣﺘﻐﯿﺮ ﻣﻘﺪار ‪ Undefined‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪ ,‬اﮔﺮ ﭼﻪ ﻓﻘﻂ ﯾﮑﯽ از آن‬
‫ﻫﺎ )‪ (oTemp2‬ﺗﻌﺮﯾﻒ ﺷﺪه اﺳﺖ‪.‬‬
‫; ‪Var oTemp‬‬
‫; )‪alert (typeof oTemp‬‬ ‫"‪// outputs "Undefined‬‬
‫; )‪alert (typeof oTemp2‬‬ ‫"‪// outputs "Undefined‬‬

‫اﮔﺮ ﺷﻤﺎ از ‪ oTemp2‬ﺑﻪ وﺳﯿﻠﻪ ي ﻫﺮ ﻋﻤﻠﮕﺮي ﺑﻪ ﻏﯿﺮ از ‪ typeof‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﯾﮏ ﺧﻄﺎ رخ ﺧﻮاﻫﺪ داد ‪:‬‬

‫‪//make sure this variable isn’t defined‬‬

‫;‪//var oTemp2‬‬
‫‪//try outputting‬‬
‫‪alert(oTemp2 == undefined); //causes error‬‬

‫‪۵‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﻣﻘﺪار ‪ Undefined‬زﻣﺎﻧﯽ ﮐﻪ ﯾﮏ ﺗﺎﺑﻊ ﻣﻘﺪاري را ﺑﺮﻧﮕﺮداﻧﺪ ﻫﻢ ‪ Return‬ﻣﯽ ﺷﻮد‪.‬‬
‫{ )( ‪Function Testfunc‬‬
‫‪// leave the function black‬‬
‫}‬
‫”‪alert( TestFunc() == undefined ); //outputs “true‬‬

‫ﻧﻮع داده ‪: Null‬‬

‫دﯾﮕﺮ ﻧﻮع داده ﮐﻪ ﻓﻘﻂ ﯾﮏ ﻣﻘﺪار دارد ‪ null ,‬اﺳﺖ ﮐﻪ ﻣﻘﺪار وﯾﮋه ‪ null‬را ﻣﯽ ﮔﯿﺮد‪.‬‬
‫از ﻧﻈﺮ ‪ Java Script‬ﻧﻮع ‪ Undefined‬ﯾﮑﯽ از ﻣﺸﺘﻘﺎت ﻧﻮع ‪ null‬اﺳﺖ و ﻣﻌﺎدل ﯾﮑﺪﯾﮕﺮﻧﺪ ‪:‬‬
‫”‪alert(null == undefined); //outputs “true‬‬

‫اﮔﺮ ﭼﻪ اﯾﻦ دو ﻣﻌﺎدل ﯾﮑﺪﯾﮕﺮﻧﺪ اﻣﺎ ﻣﻌﺎﻧﯽ ﺧﺎﺻﯽ دارﻧﺪ‪.‬‬

‫‪ Undefined‬ﻣﻮﻗﻌﯽ ﺑﻪ ﯾﮏ ﻣﺘﻐﯿﺮ ﻧﺴﺒﺖ داده ﻣﯽ ﺷﻮد ﮐﻪ اﻋﻼن ﺷﻮد وﻟﯽ ﻣﻘﺪاردﻫﯽ ﻧﺸﻮد‪ .‬در ﺣﺎﻟﯽ ﮐﻪ ﻣﺘﻐﯿﺮي وﻗﺘﯽ از ﻧﻮع ‪null‬‬
‫اﺳﺖ ﮐﻪ ﺷﺎﻣﻞ ﺷﯽء اي ﺑﺎﺷﺪ ﮐﻪ وﺟﻮد ﻧﺪارد‪.‬‬

‫ﻧﻮع داده ‪: Boolean‬‬

‫ﻧﻮع ‪ Boolean‬ﯾﮑﯽ از ﭘﺮ اﺳﺘﻔﺎده ﺗﺮﯾﻦ ﻧﻮع داده در زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ اﺳﺖ و ﻣﺘﻐﯿﺮي از اﯾﻦ ﻧﻮع ﻓﻘﻂ ﻣﯽ ﺗﻮاﻧﺪ ﯾﮑﯽ از دو ﻣﻘﺪار‬
‫‪ true‬ﯾﺎ ‪ false‬ﺑﻪ ﻋﻨﻮان ﻣﻘﺪار ﺑﭙﺬﯾﺮد ‪ .‬اﮔﺮ ﭼﻪ ﺑﺮ ﺧﻼف زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﻣﺘﺪاول ‪ ,‬در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ‪ false‬ﺑﺎ ‪ 0‬ﺑﺮاﺑﺮ ﻧﯿﺴﺖ اﻣﺎ‬
‫در ﺻﻮرت ﻟﺰوم ‪ 0‬ﺑﻪ ‪ false‬ﺗﺒﺪﯾﻞ ﺧﻮاﻫﺪ ﺷﺪ ‪ .‬ﺑﻪ ﻣﺜﺎل ﻫﺎي زﯾﺮ ﺗﻮﺟﻪ ﮐﻨﯿﺪ ‪:‬‬

‫;‪var bFound = true‬‬

‫;‪var bLost = false‬‬

‫ﻧﻮع داده ‪: Number‬‬

‫اﯾﻦ ﻧﻮع ﻧﯿﺰ ﯾﮑﯽ از ﭘﺮﮐﺎرﺑﺮدﺗﺮﯾﻦ اﻧﻮاع اﺳﺖ‪ .‬اﯾﻦ ﻧﻮع داده ﻣﯽ ﺗﻮاﻧﺪ ﺷﺎﻣﻞ اﻋﺪاد ‪ 8 , Integer‬ﺑﺎﯾﺘﯽ و اﻋﺪاد اﻋﺸﺎري ‪ 16‬ﺑﺎﯾﺘﯽ ﺑﺎﺷﺪ‪.‬‬
‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻣﺘﻐﯿﺮ زﯾﺮ از ﻧﻮع ‪ Integer‬اﺳﺖ و ﻣﻘﺪار اوﻟﯿﻪ ي ‪ 55‬را دارد ‪:‬‬
‫;‪var iNum = 55‬‬

‫ﺑﺮاي ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮﻫﺎي اﻋﺸﺎري ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻣﯽ ﺷﻮد ‪:‬‬

‫;‪var fNum = 5.0‬‬

‫ﻧﻮع داده ‪: String‬‬

‫اﯾﻦ ﻧﻮع ﻣﯽ ﺗﻮاﻧﺪ ﺑﺮاي ذﺧﯿﺮه ﺻﻔﺮ ﯾﺎ ﭼﻨﺪﯾﻦ ﮐﺎراﮐﺘﺮ ﺑﻪ ﮐﺎر رود‪ .‬ﻫﺮ ﮐﺎراﮐﺘﺮ در ﯾﮏ رﺷﺘﻪ ﻣﻮﻗﻌﯿﺘﯽ دارد‪ .‬ﻣﻮﻗﻌﯿﺖ اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﺻﻔﺮ اﺳﺖ‪.‬‬
‫ﺑﺮاي ﺗﻌﺮﯾﻒ ﯾﮏ ﻣﺘﻐﯿﺮ ‪ String‬ﺑﺎﯾﺪ از ) ' ( ﯾﺎ ) " ( اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪ .‬ﻣﻌﻤﻮﻵ ﺑﺮاي ﺗﻌﺮﯾﻒ ﯾﮏ ﮐﺎراﮐﺘﺮ از ) ' ( و ﺑﺮاي ﺗﻌﺮﯾﻒ ﯾﮏ رﺷﺘﻪ از )‬
‫" ( اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬‬
‫;"‪var sColor1 = "blue‬‬
‫;'‪var sColor2 = 'blue‬‬

‫‪۶‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺗﺒﺪﯾﻞ اﻧﻮاع ‪:‬‬
‫ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺗﻮاﺑﻌﯽ را ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ﻓﺮاﻫﻢ آورده اﺳﺖ‪.‬‬

‫ﺗﺒﺪﯾﻞ ﺑﻪ رﺷﺘﻪ ‪:‬‬

‫ﯾﮑﯽ از ﺟﺬاﺑﺘﺮﯾﻦ وﯾﮋﮔﯽ ﻫﺎﯾﯽ ﮐﻪ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ در راﺑﻄﻪ ﺑﺎ اﻧﻮاع اﺻﻠﯽ ‪ Numbers , Boolean‬و ‪ String‬ﻓﺮاﻫﻢ ﮐﺮده اﺳﺖ اﯾﻦ‬
‫اﺳﺖ ﮐﻪ آﻧﻬﺎ در اﺻﻞ اﺷﯿﺎي ﮐﺎذب ﻫﺴﺘﻨﺪ‪ ,‬ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ داراي ﺧﺎﺻﯿﺖ ﻫﺎ و ﻣﺘﺪﻫﺎي ﻣﺸﺘﺮك و ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮدي ﻣﯽ ﺑﺎﺷﻨﺪ‪.‬‬
‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي ﺑﺪﺳﺖ آوردن ﻃﻮل ﯾﮏ رﺷﺘﻪ ﻣﯽ ﺗﻮان از ﺧﺎﺻﯿﺖ ‪ Length‬اﺳﺘﻔﺎده ﻧﻤﻮد ‪:‬‬
‫; "‪var sColor = "blue‬‬
‫; )‪alert (sColor.length‬‬ ‫”‪//outputs “4‬‬

‫ﺳﻪ ﻧﻮع داده ‪ Number , Bool‬و ‪ String‬ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ tostring‬ﺑﺮاي ﺗﺒﺪﯾﻞ ﺑﻪ رﺷﺘﻪ دارﻧﺪ‪.‬‬
‫اﯾﻦ ﻣﺘﺪ ﺑﺮاي ﻣﺘﻐﯿﺮ ﻫﺎي از ﻧﻮع ‪ Boolean‬ﯾﮑﯽ از ﻣﻘﺎدﯾﺮ ‪ true‬و ‪ false‬را ﺑﺴﺘﻪ ﺑﻪ ﻣﻘﺪار ﻣﺘﻐﯿﺮ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪:‬‬

‫;‪var bFound = false‬‬

‫”‪alert(bFound.toString()); //outputs “false‬‬
‫اﯾﻦ ﻣﺘﺪ ﺑﺮاي ﻣﺘﻐﯿﺮ ﻫﺎي از ﻧﻮع ‪ number‬رﺷﺘﻪ اي ﺣﺎوي آن ﻋﺪد را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪:‬‬

‫;‪var iNum1 = 10‬‬

‫;‪var fNum2 = 10.0‬‬
‫”‪alert(iNum1.toString()); //outputs “10‬‬
‫”‪alert(fNum2.toString()); //outputs “10‬‬

‫ﺗﺒﺪﯾﻞ ﺑﻪ ﯾﮏ ﻋﺪد ‪:‬‬

‫ﺟﺎوا اﺳﮑﺮﯾﭙﺖ دو ﻣﺘﺪ ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ﻏﯿﺮ ﻋﺪدي ﺑﻪ ﻋﺪدي ﻓﺮاﻫﻢ ﮐﺮده اﺳﺖ ‪:‬‬
‫)(‪ praseInt‬‬
‫)(‪ parseFloat‬‬
‫‪ ‬ﻧﮑﺘﻪ ‪ :‬ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ ﺣﺮوف ‪ I‬و ‪ F‬ﺑﺎﯾﺪ ﺑﻪ ﺻﻮرت ﺣﺮف ﺑﺰرگ ﻧﻮﺷﺘﻪ ﺷﻮﻧﺪ ‪.‬‬

‫اﯾﻦ ﻣﺘﺪ ﻫﺎ ﻓﻘﻂ ﺑﺮ روي رﺷﺘﻪ ﻫﺎي ﺣﺎوي ﻋﺪد ﮐﺎر ﻣﯽ ﮐﻨﻨﺪ و ﺑﺮ روي ﺑﻘﯿﻪ اﻧﻮاع ﻣﻘﺪار ‪ NaN‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﻨﺪ‪.‬‬
‫ﻣﺘﺪ )(‪ parseInt‬از اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ رﺷﺘﻪ ﺷﺮوع ﻣﯽ ﮐﻨﺪ اﮔﺮ ﻋﺪد ﺑﻮد آن را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ﻣﻘﺪار ‪ NaN‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫اﯾﻦ روﻧﺪ ﺗﺎ آﺧﺮﯾﻦ ﮐﺎراﮐﺘﺮ اداﻣﻪ ﭘﯿﺪا ﻣﯽ ﮐﻨﺪ ﺗﺎ اﯾﻨﮑﻪ ﺑﻪ ﮐﺎراﮐﺘﺮي ﻏﯿﺮ ﻋﺪدي ﺑﺮﺳﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﯾﻦ ﻣﺘﺪ ﻋﺒﺎرت "‪ "123red‬را ﺑﻪ‬
‫ﺻﻮرت ‪ 123‬ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬

‫‪var iNum1 = parseInt(“1234blue”); //returns 1234‬‬

‫;)"‪var iNum3 = parseInt("22.5‬‬ ‫‪//returns 22‬‬
‫;)"‪var iNum4 = parseInt("blue‬‬ ‫‪//returns NaN‬‬

‫ﻣﺘﺪ )(‪ parseFloat‬ﻧﯿﺰ ﻣﺜﻞ )(‪ parseInt‬ﮐﺎر ﻣﯽ ﮐﻨﺪ و از اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﺷﺮوع ﺑﻪ ﺟﺴﺘﺠﻮ ﻣﯽ ﮐﻨﺪ‪ .‬اﻟﺒﺘﻪ در اﯾﻦ ﻣﺘﺪ اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ‬
‫ﻧﻘﻄﻪ ﺣﺴﺎب ﻧﻤﯽ ﺷﻮد و آن را ﺑﻪ ﻫﻤﺎن ﺻﻮرت ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬

‫‪٧‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﮔﺮ دو ﮐﺎراﮐﺘﺮ ﻧﻘﻄﻪ در رﺷﺘﻪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﻨﺪ دوﻣﯿﻦ ﻧﻘﻄﻪ ﺑﻪ ﻋﻨﻮان ‪ invalid‬ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮد و ﻋﻤﻠﯿﺎت ﺗﺒﺪﯾﻞ ﻣﺘﻮﻗﻒ ﻣﯽ ﺷﻮد‪ .‬ﻣﺜﺎل‬
‫ﻫﺎ ‪:‬‬

‫‪var‬‬ ‫‪fNum1‬‬ ‫=‬ ‫;)”‪parseFloat(“1234blue‬‬ ‫‪//returns‬‬ ‫‪1234.0‬‬

‫‪var‬‬ ‫‪fNum3‬‬ ‫=‬ ‫;)”‪parseFloat(“22.5‬‬ ‫‪//returns‬‬ ‫‪22.5‬‬
‫‪var‬‬ ‫‪fNum4‬‬ ‫=‬ ‫;)”‪parseFloat(“22.34.5‬‬ ‫‪//returns‬‬ ‫‪22.34‬‬
‫‪var‬‬ ‫‪fNum6‬‬ ‫=‬ ‫;)”‪parseFloat(“blue‬‬ ‫‪//returns‬‬ ‫‪NaN‬‬

‫روش دﯾﮕﺮ ﺗﺒﺪﯾﻞ اﻧﻮاع )‪(Type Casting‬‬

‫ﺳﻪ ﻧﻮع ‪ type casting‬در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ وﺟﻮد دارد ‪:‬‬
‫)( ‪ Boolean‬‬
‫)( ‪ Number‬‬
‫)( ‪ String‬‬

‫ﺗﺎﺑﻊ )(‪ Boolean‬ﻣﻘﺪار ‪ True‬را وﻗﺘﯽ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ رﺷﺘﻪ ﺷﺎﻣﻞ ﺣﺪاﻗﻞ ﯾﮏ ﮐﺎرﮐﺘﺮ ‪ ,‬ﯾﮏ ﻋﺪد ﺑﺰرﮔﺘﺮ از ﺻﻔﺮ و ﯾﺎ ﯾﮏ ﺷﯽء ﺑﺎﺷﺪ‬
‫و ﻣﻘﺪار ‪ False‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﻫﺮ ﮔﺎه رﺷﺘﻪ ﺧﺎﻟﯽ اﺳﺖ ﯾﺎ ﺻﻔﺮ اﺳﺖ ﯾﺎ ‪ undefined‬و ﯾﺎ ‪ null‬ﺑﺎﺷﺪ ‪:‬‬

‫‪var‬‬ ‫‪b1‬‬ ‫=‬ ‫;)”“(‪Boolean‬‬ ‫‪//false – empty string‬‬

‫‪var‬‬ ‫‪b2‬‬ ‫=‬ ‫;)”‪Boolean(“hi‬‬ ‫‪//true – non-empty string‬‬
‫‪var‬‬ ‫‪b3‬‬ ‫=‬ ‫;)‪Boolean(100‬‬ ‫‪//true – non-zero number‬‬
‫‪var‬‬ ‫‪b4‬‬ ‫=‬ ‫;)‪Boolean(null‬‬ ‫‪//false - null‬‬
‫‪var‬‬ ‫‪b5‬‬ ‫=‬ ‫;)‪Boolean(0‬‬ ‫‪//false - zero‬‬
‫‪var‬‬ ‫‪b6‬‬ ‫=‬ ‫;))(‪Boolean(new Object‬‬ ‫‪//true – object‬‬

‫ﺗﺎﺑﻊ )(‪ Number‬ﮐﺎري ﺷﺒﯿﻪ )(‪ ParseInt‬و )(‪ ParseFloat‬را اﻧﺠﺎم ﻣﯽ دﻫﺪ اﻣﺎ ﺗﻔﺎوت ﻫﺎﯾﯽ ﻫﻢ دارد ‪.‬‬
‫اﮔﺮ ﺑﻪ ﯾﺎد داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﻣﺘﺪ ﻫﺎي )(‪ ParseInt‬و )(‪ParseFloat‬ﻣﻘﺪار ﮔﺮﻓﺘﻪ ﺷﺪه را ﻓﻘﻂ ﺗﺎ اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﺑﯽ ارزش ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪﻧﺪ‪.‬‬
‫ﻣﺜﻼ رﺷﺘﻪ ”‪ “4.5.6‬ﺑﻪ ‪ 4.5‬ﺗﺒﺪﯾﻞ ﺧﻮاﻫﻨﺪ ﮐﺮد ‪ .‬اﻣﺎ ﮐﺎرﺑﺮد ﻣﺘﺪ )(‪ Number‬ﺑﺮاي اﯾﻦ رﺷﺘﻪ ﻣﻘﺪار ‪ NaN‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ زﯾﺮا اﯾﻦ‬
‫رﺷﺘﻪ از ﻧﻈﺮ ﻣﺘﺪ )(‪ Number‬در ﮐﻞ اﻣﮑﺎن ﺗﺒﺪﯾﻞ ﺑﻪ ﯾﮏ ﻋﺪد را ﻧﺪارد ‪.‬‬
‫اﮔﺮ رﺷﺘﻪ اي اﻣﮑﺎن ﺗﺒﺪﯾﻞ ﺑﻪ ﯾﮏ ﻋﺪد را داﺷﺘﻪ ﺑﺎﺷﺪ ﻣﺘﺪ )(‪ Number‬ﺑﺮاي اﯾﻨﮑﻪ از )(‪ ParseInt‬ﯾﺎ )(‪ ParseFloat‬اﺳﺘﻔﺎده ﮐﻨﺪ‬
‫ﺗﺼﻤﯿﻢ ﻣﯽ ﮔﯿﺮد ‪ .‬در ﻣﺜﺎل زﯾﺮ ﺣﺎﺻﻞ اﺟﺮاي ﻣﺘﺪ )(‪ Number‬ﺑﺮاي اﻧﻮاع داده ﻫﺎ را ﻧﺸﺎن ﻣﯽ دﻫﺪ ‪:‬‬

‫)‪Number(false‬‬ ‫‪0‬‬
‫)‪Number(true‬‬ ‫‪1‬‬
‫)‪Number(undefined‬‬ ‫‪NaN‬‬
‫)‪Number(null‬‬ ‫‪0‬‬
‫)”‪Number(“5.5‬‬ ‫‪5.5‬‬
‫)”‪Number(“56‬‬ ‫‪56‬‬
‫)”‪Number(“5.6.7‬‬ ‫‪NaN‬‬
‫))(‪Number(new Object‬‬ ‫‪NaN‬‬
‫)‪Number(100‬‬ ‫‪100‬‬

‫ﺳﺎده ﺗﺮﯾﻦ ﺗﺎﺑﻊ ﻫﻢ )(‪ String‬اﺳﺖ ﮐﻪ ﻫﻤﺎن ﭼﯿﺰي را ﮐﻪ ﻣﯽ ﮔﯿﺮد ﺑﻪ ﻋﻨﻮان رﺷﺘﻪ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪:‬‬
‫‪var s1 = String(null); //‬‬ ‫”‪”null‬‬

‫‪٨‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﻣﺮورﮔﺮ ﻫﺎ ‪:‬‬
‫ﺣﺎل ﮐﻪ ﺗﺎ ﺣﺪودي ﺑﺎ ﺑﺴﯿﺎري از ﻣﻔﺎﻫﯿﻢ ﭘﺎﯾﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ آﺷﻨﺎ ﺷﺪﯾﻢ ﻣﯽ ﺧﻮاﻫﯿﻢ ﻃﺮﯾﻘﻪ اﺳﺘﻔﺎده و ﻗﺮار دادن آن ﻫﺎ در ﺻﻔﺤﻪ را ﺑﺮرﺳﯽ‬
‫ﮐﻨﯿﻢ ‪ HTML .‬ﺑﺮاي اﺳﺘﻔﺎده از ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﺻﻔﺤﺎت ﺗﮕﯽ ﺑﻪ ﻧﺎم ‪ script‬را ﻓﺮاﻫﻢ ﮐﺮده ﮐﻪ در اداﻣﻪ ﺑﺎ آن آﺷﻨﺎ ﺧﻮاﻫﯿﻢ ﺷﺪ ‪.‬‬
‫ﻋﻤﻮﻣﺎ از اﯾﻦ ﺗﮓ در داﺧﻞ ﺗﮓ ‪ head‬ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد و ﻣﯽ ﺗﻮاﻧﺪ ﯾﮏ ‪ ،‬دو ﯾﺎ ﺳﻪ ﺻﻔﺖ را ﺑﮕﯿﺮد ‪ .‬ﺻﻔﺖ ‪ language‬ﮐﻪ ﻧﻮع‬
‫زﺑﺎن اﺳﺘﻔﺎده ﺷﺪه را ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ ‪ ،‬ﺻﻔﺖ اﺧﺘﯿﺎري ‪ src‬ﮐﻪ ﻣﮑﺎن ﯾﮏ ﻓﺎﯾﻞ ﺧﺎرﺟﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ و ﺻﻔﺖ ‪ type‬ﮐﻪ‬
‫ﻧﻮع ‪ MIME TYPE‬ﯾﮏ ﻓﺎﯾﻞ ﺧﺎرﺟﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ و ﺑﺎﯾﺪ ﺑﺮاﺑﺮ ﻋﺒﺎرت ‪ text/javascript‬ﻗﺮار داده ﺷﻮد ‪.‬‬
‫ﻣﻘﺪار ﺻﻔﺖ ‪ language‬ﻣﻌﻤﻮﻻ ﺑﺮاﺑﺮ ‪ javascript‬ﯾﺎ ﯾﮑﯽ از ﻧﺴﺨﻪ ﻫﺎي آن ﻣﺜﻼ ‪ javascript 1.3‬ﺗﻌﯿﯿﻦ ﻣﯽ ﺷﻮد ‪) .‬اﮔﺮ از ﺻﻔﺖ‬
‫‪ javascript‬ﭼﺸﻢ ﭘﻮﺷﯽ ﺷﻮد ‪ ،‬ﻣﺮورﮔﺮ ﻫﺎ آﺧﺮﯾﻦ ﻧﺴﺨﻪ ﻣﻮﺟﻮد اﯾﻦ زﺑﺎن را در ﻧﻈﺮ ﻣﯽ ﮔﯿﺮﻧﺪ‪( .‬‬
‫ﮐﺪ ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ در داﺧﻞ ﺗﮓ ‪ script‬ﻧﻮﺷﺘﻪ ﻣﯽ ﺷﻮﻧﺪ اﻣﺎ در ﺻﻮرﺗﯽ ﮐﻪ ﻫﻤﺰﻣﺎن از ﺻﻔﺖ ‪ src‬ﻧﯿﺰ اﺳﺘﻔﺎده ﺷﻮد در اﯾﻦ ﺻﻮرت‬
‫ﻣﻌﻤﻮﻻ ﻣﺮورﮔﺮ ﻫﺎ ﮐﺪ ﻫﺎي داﺧﻞ ﺗﮓ ‪ script‬را ﻧﺎدﯾﺪه ﻣﯽ ﮔﯿﺮﻧﺪ ‪ .‬ﺑﻪ ﻣﺜﺎل زﯾﺮ دﻓﺖ ﮐﻨﯿﺪ ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>”‪<script language=”JavaScript‬‬
‫;‪var i = 0‬‬
‫>‪</script‬‬
‫>‪<script language=”JavaScript” src=”../scripts/external.js”></script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<!-- body goes here --‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫در اﯾﻦ ﻣﺜﺎل ﻫﺮ دو ﻧﻮع ﺗﻌﺮﯾﻒ ﮐﺪ ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﺻﻔﺤﻪ ﻧﺸﺎن داده ﺷﺪه اﺳﺖ ‪ .‬ﺗﮓ اﺳﮑﺮﯾﭙﺖ اول ﺑﻪ ﺻﻮرت ‪) inline‬درون‬
‫ﺧﻄﯽ( ﺑﻪ ﺗﻌﺮﯾﻒ ﮐﺪ ﻫﺎ ﭘﺮداﺧﺘﻪ اﺳﺖ ‪ .‬و در ﺗﮓ ‪ script‬دوم ﺑﻪ ﯾﮏ ﻓﺎﯾﻞ ﺧﺎرﺟﯽ ‪ javascript‬اﺷﺎره ﺷﺪه اﺳﺖ ‪.‬‬

‫ﻓﺎﯾﻞ ﻫﺎي ﺧﺎرﺟﯽ ‪: javascript‬‬

‫ﻓﺎﯾﻞ ﻫﺎي ﺧﺎرﺟﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻓﺮﻣﺖ ﺑﺴﯿﺎر ﺳﺎده اي دارﻧﺪ ‪ .‬آن ﻫﺎ درواﻗﻊ ﻓﺎﯾﻞ ﻫﺎي ﻣﺘﻨﯽ ﺳﺎده ﺣﺎوي ﮐﺪ ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻫﺴﺘﻨﺪ ‪.‬‬
‫دﻗﺖ ﮐﻨﯿﺪ ﮐﻪ در ﻓﺎﯾﻞ ﻫﺎي ﺧﺎرﺟﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﻫﯿﭻ ﺗﮓ ‪ script‬ي ﻧﻤﯽ ﺑﺎﯾﺴﺖ اﺳﺘﻔﺎده ﺷﻮد ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﻪ ﺗﮑﻪ ﮐﺪ زﯾﺮ دﻓﺖ‬
‫ﮐﻨﯿﺪ ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>”‪<script language=”JavaScript‬‬
‫{ )(‪function sayHi‬‬
‫;)”‪alert(“Hi‬‬
‫}‬
‫>‪</script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<!-- body goes here --‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺧﻮد ﺗﺎﺑﻊ )(‪ sayhi‬را در ﻓﺎﯾﻠﯽ ﺧﺎرﺟﯽ ﻣﺜﻼ ﺑﻪ ﻧﺎم ‪ external.js‬ذﺧﯿﺮه ﮐﺮده و آن را ﺑﻪ ﺻﻮرت زﯾﺮ در ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ‬
‫ﻟﯿﻨﮏ )اﻟﺤﺎق ( ﮐﻨﯿﻢ ‪:‬‬

‫‪٩‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫>‪<html‬‬
‫‪www.SoftGozar.Com‬‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>‪<script language=”JavaScript” src=”external.js”></script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<!-- body goes here --‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﺗﻔﺎوت ﻫﺎي ﺑﻪ ﮐﺎرﮔﯿﺮي ﮐﺪ ﺑﻪ ﺻﻮرت ‪ inline‬و ‪: External‬‬
‫ﭼﻪ ﻣﻮﻗﻊ ﻣﺎ ﺑﺎﯾﺪ از روش ‪ inline‬و ﭼﻪ ﻣﻮﻗﻊ ﺑﺎﯾﺪ از روش ‪ external‬ﺑﺮاي ﺑﻪ ﮐﺎرﮔﯿﺮي ﮐﺪ ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺘﻔﺎده ﮐﻨﯿﻢ ؟ ﻫﺮ ﭼﻨﺪ‬
‫ﮐﻪ ﻗﺎﻧﻮن ﺳﻔﺖ و ﺳﺨﺘﯽ ﺑﺮاي اﺳﺘﻔﺎده از ﻫﺮ ﯾﮏ از روش ﻫﺎي ﻓﻮق وﺟﻮد ﻧﺪارد اﻣﺎ ﺑﻪ دﻻﯾﻞ زﯾﺮ اﺳﺘﻔﺎده از روش ‪ inline‬ﻣﻨﺎﺳﺐ ﺑﻪ ﻧﻈﺮ‬
‫ﻧﻤﯽ رﺳﺪ ‪:‬‬
‫‪ ‬اﻣﻨﯿﺖ ‪ :‬ﻫﺮ ﮐﺴﯽ ﻣﯽ ﺗﻮاﻧﺪ ﺑﺎ ﺑﺎز ﮐﺮدن ‪ source‬ﺻﻔﺤﻪ ﺷﻤﺎ ‪ ،‬ﮐﺪ ﻫﺎي ﺷﻤﺎ را ﺑﺒﯿﻨﺪ و ﭼﻪ ﺑﺴﺎ ﺑﻪ ﺣﻔﺮه ﻫﺎي اﻣﻨﯿﺘﯽ آن ﭘﯽ ﺑﺮده‬
‫و در ﭘﯽ ﭘﯿﺎده ﺳﺎزي اﻗﺼﺎد ﺷﻮم ﺧﻮد ﺑﺮآﯾﺪ ‪.‬‬
‫‪ ‬ذﺧﯿﺮه ﺷﺪن در ﺣﺎﻓﻈﻪ ﻣﺮورﮔﺮ ﻫﺎ ‪ :‬ﯾﮑﯽ از ﻣﺰﯾﺖ ﻫﺎي اﺳﺘﻔﺎده از روش ‪ External‬اﯾﻦ اﺳﺖ ﮐﻪ ﻓﺎﯾﻞ ﻫﺎي ﺧﺎرﺟﯽ‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﭘﺲ از اوﻟﯿﻦ ﺑﺎرﮔﺬاري در ﺣﺎﻓﻈﻪ ﻧﻬﺎن ﻣﺮورﮔﺮ )‪ (cache‬ذﺧﯿﺮه ﺷﺪه و در دﻓﻌﺎت ﺑﻌﺪي ﻓﺎﯾﻞ ﺧﺎرﺟﯽ از ‪cache‬‬
‫ﻓﺮاﺧﻮاﻧﯽ و اﺳﺘﻔﺎده ﺧﻮاﻫﻨﺪ ﺷﺪ ‪.‬‬
‫‪ ‬ﻧﮕﻪ داري ﮐﺪ ﻫﺎ ‪ :‬ﭼﻨﺎﻧﭽﻪ ﺷﻤﺎ ﺑﺨﻮاﻫﯿﺪ از ﯾﮏ ﮐﺪ در ﭼﻨﺪﯾﻦ ﺻﻔﺤﻪ وب اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﻣﻄﻤﺌﻨﺎ اﺳﺘﻔﺎده از روش اول ﻣﻮﺟﺐ‬
‫اﻓﺰاﯾﺶ ﮐﺪ ﻧﻮﯾﺴﯽ و در ﻧﺘﯿﺠﻪ ﺣﺠﻢ ﺻﻔﺤﻪ ﺧﻮاﻫﺪ ﺷﺪ اﻣﺎ ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ از روش دوم ﺑﺮاي ﭼﻨﺪﯾﻦ ﻓﺎﯾﻞ اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪.‬‬
‫ﻣﮑﺎن ﻗﺮار دادن ﺗﮓ ‪ script‬در ﺻﻔﺤﻪ ‪:‬‬
‫ﻣﻌﻤﻮﻻ ﮐﺪ ﻫﺎ و ﺗﻮاﺑﻊ ﺗﻌﺮﯾﻔﯽ ﺑﻮﺳﯿﻠﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺎﯾﺪ در ﻗﺴﻤﺖ ‪ head‬ﺻﻔﺤﻪ ﻗﺮار ﮔﯿﺮد ﺗﺎ ﺑﻪ ﻣﻮﻗﻊ ﺑﺎرﮔﺰاري ﺷﺪه و ﺑﺮاي اﺳﺘﻔﺎده در‬
‫ﻗﺴﻤﺖ ‪ body‬ﺻﻔﺤﻪ آﻣﺎده اﺳﺘﻔﺎده و ﺻﺪا زدن ﺑﺎﺷﻨﺪ ‪ .‬ﻣﻌﻤﻮﻻ ﮐﺪ ﻫﺎﯾﯽ ﮐﻪ درآن ﻫﺎ ﺗﻮاﺑﻊ از ﻗﺒﻞ ﺗﻌﺮﯾﻒ ﺷﺪه ﺻﺪا زده ﻣﯽ ﺷﻮﻧﺪ در‬
‫ﻗﺴﻤﺖ ‪ body‬ﻗﺮار ﻣﯽ ﮔﯿﺮﻧﺪ ‪.‬‬
‫ﻗﺮاردادن ﺗﮓ ‪ script‬در داﺧﻞ ﻗﺴﻤﺖ ‪ body‬ﻣﻮﺟﺐ اﺟﺮاﺷﺪن ﮐﺪ ﻫﺎي داﺧﻞ آن ﺑﻪ ﻣﺤﺾ ﺑﺎرﮔﺬاري ﻗﺴﻤﺘﯽ از ﺻﻔﺤﻪ در ﻣﺮورﮔﺮ‬
‫ﺧﻮاﻫﺪ ﺷﺪ ‪ .‬ﺑﺮاي ﻣﺜﺎل ﺑﻪ ﺗﮑﻪ ﮐﺪ زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>”‪<script language=”JavaScript‬‬
‫{ )(‪function sayHi‬‬
‫;)”‪alert(“Hi‬‬
‫}‬
‫>‪</script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>”‪<script language=”JavaScript‬‬
‫;)(‪sayHi‬‬
‫>‪</script‬‬
‫>‪<p>This is the first text the user will see.</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫در ﮐﺪ ﻓﻮق ﻣﺘﺪ )(‪ sayHi‬دﻗﯿﻘﺎ ﻗﺒﻞ از ﻧﻤﺎﯾﺶ ﻫﺮ ﮔﻮﻧﻪ ﻣﺘﻨﯽ در ﺻﻔﺤﻪ اﺟﺮا ﺧﻮاﻫﺪ ﺷﺪ‪ .‬ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ ﭘﻨﺠﺮه ‪ alert‬ﻗﺒﻞ از ﻣﺘﻦ‬
‫‪ This is the first text the user will see‬اﺟﺮا ﺧﻮاﻫﺪ ﺷﺪ ‪ .‬اﯾﻦ روش ﺑﺮاي ﺻﺪا زدن ﻣﺘﺪ ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺻﻼ ﭘﯿﺸﻨﻬﺎد‬
‫ﻧﻤﯽ ﺷﻮد و ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﻪ ﺟﺎي آن از ﮐﻨﺘﺮﻟﮕﺮ ﻫﺎي ﺣﻮادث )‪ (Event Handler‬اﺳﺘﻔﺎده ﮐﺮد ‪ .‬ﻣﺜﻼ ‪:‬‬
‫‪١٠‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>”‪<script language=”JavaScript‬‬
‫{ )(‪function sayHi‬‬
‫;)”‪alert(“Hi‬‬
‫}‬
‫>‪</script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<input type=”button” value=”Call Function” onclick=”sayHi()” /‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫در اﯾﻨﺠﺎ دﮐﻤﻪ اي ﺑﺎ اﺳﺘﻔﺎده از ﺗﮓ ‪ input‬اﯾﺠﺎد ﺷﺪه اﺳﺖ ﮐﻪ در ﺻﻮرت ﮐﻠﯿﮏ ﺑﺮ روي آن ﺗﺎﺑﻊ )(‪ sayHi‬ﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﺷﻮد ‪ .‬ﺻﻔﺖ‬
‫‪ onclick‬در اﯾﻨﺠﺎ ﯾﮏ ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ اﺳﺖ ﮐﻪ ﺑﻪ روﯾﺪاد رخ داده ﭘﺎﺳﺦ ﻣﯽ دﻫﺪ ‪.‬‬

‫ﻧﮑﺘﻪ اﯾﻨﮑﻪ ازآﻧﺠﺎﯾﯽ ﮐﻪ ﮐﺪ ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻣﺤﺾ ﺑﺎرﮔﺬاري اﺟﺮا ﻫﻢ ﻣﯽ ﺷﻮﻧﺪ ﻣﻤﮑﻦ اﺳﺖ در اﯾﻦ ﺻﻮرت ﺗﻮاﺑﻌﯽ ﮐﻪ از ﻗﺒﻞ وﺟﻮد‬
‫ﻧﺪارﻧﺪ ﺻﺪا زده ﺷﻮﻧﺪ ﮐﻪ در اﯾﻦ ﺻﻮرت ﯾﮏ ﺧﻄﺎ رخ ﺧﻮاﻫﺪ داد ‪ .‬در ﻣﺜﺎل ﻗﺒﻞ ﺑﺎ ﻋﻮض ﮐﺮدن ﺟﺎي ﺗﮓ ﻫﺎي ‪ script‬ﯾﮏ ﺧﻄﺎ رخ ﺧﻮاﻫﺪ‬
‫داد ‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>”‪<script language=”JavaScript‬‬
‫;)(‪sayHi‬‬
‫>‪</script‬‬
‫>‪<p>This is the first text the user will see.</p‬‬
‫>”‪<script language=”JavaScript‬‬
‫{ )(‪function sayHi‬‬
‫;)”‪alert(“Hi‬‬
‫}‬
‫>‪</script‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫در ﺻﻮرت اﺟﺮاي ﮐﺪ ﻓﻮق ﯾﮏ ﺧﻄﺎ رخ ﺧﻮاﻫﺪ داد زﯾﺮا ﺗﺎﺑﻊ ﻗﺒﻞ از اﯾﻨﮑﻪ ﺗﻌﺮﯾﻒ ﺷﻮد ﺻﺪا زده ﺷﺪه اﺳﺖ ‪.‬ﭼﻮن ﮐﺪ ﻫﺎ از ﺑﺎﻻ ﺑﻪ ﭘﺎﯾﯿﻦ‬
‫ﺑﺎرﮔﺬاري ﻣﯽ ﺷﻮﻧﺪ ﺗﺎﺑﻊ )(‪ sayHi‬وﺟﻮد ﻧﺨﻮاﻫﺪ داﺷﺖ ﺗﺎ ﺗﮓ ‪ script‬دوم ﺗﻮﻟﯿﺪ ﻧﺸﺪه اﺳﺖ ‪.‬‬

‫ﻣﺨﻔﯽ ﮐﺮدن اﺳﮑﺮﯾﭙﺖ ﻫﺎ از ﻣﺮورﮔﺮ ﻫﺎي ﻗﺪﯾﻤﯽ ‪:‬‬

‫ﻫﻨﻮز ﮐﺎرﺑﺮان زﯾﺎدي وﺟﻮد دارﻧﺪ ﮐﻪ از ﻣﺮورﮔﺮ ﻫﺎﯾﯽ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﻨﺪ ﮐﻪ ﺑﺎ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻧﺎﺳﺎزﮔﺎر ﻫﺴﺘﻨﺪ ‪ .‬از آن ﻣﻬﻤﺘﺮ ‪ ،‬ﺗﻌﺪادي ا‬
‫زﮐﺎرﺑﺮان ﮔﺰﯾﻨﻪ ﭘﺸﺘﯿﺒﺎﻧﯽ از ﺟﺎوااﺳﮑﺮﯾﭙﺖ را در ﻣﺮورﮔﺮ ﺧﻮد ﻏﯿﺮ ﻓﻌﺎل ﮐﺮده اﻧﺪ ‪ .‬از آﻧﺠﺎﯾﯽ ﮐﻪ ﻣﺮورﮔﺮ ﻫﺎي ﻗﺪﯾﻤﯽ دﺳﺘﻮر >‪ <script‬را‬
‫ﻧﻤﯽ ﺷﻨﺎﺳﻨﺪ و ﻧﻤﯽ ﺗﻮاﻧﻨﺪ آن را ﺗﻔﺴﯿﺮ ﻧﻤﺎﯾﻨﺪ در اﮐﺜﺮ ﻣﻮارد اﯾﻦ ﻣﺮورﮔﺮ ﻫﺎ ﺑﻪ ﺟﺎي ﺗﻔﺴﯿﺮ اﺳﮑﺮﯾﭙﺖ ‪ ،‬ﻣﺘﻦ آن را در ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﻣﯽ‬
‫دﻫﻨﺪ ‪.‬‬

‫‪١١‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از اﯾﻦ ﻣﺸﮑﻞ ‪ ،‬ﻣﯽ ﺗﻮان اﺳﮑﺮﯾﭙﺖ ﻫﺎ را در داﺧﻞ ﺗﻮﺿﯿﺤﺎت ‪ HTML‬ﻗﺮار داد ‪ .‬ﺑﺎ اﯾﻦ ﮐﺎر ﻣﺮورﮔﺮ ﻫﺎي ﻗﺪﯾﻤﯽ آن را‬
‫ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ و ﻧﻤﺎﯾﺶ ﻧﺨﻮاﻫﻨﺪ داد ‪ .‬از ﻃﺮف دﯾﮕﺮ ﻣﺮورﮔﺮ ﻫﺎي ﺟﺪﺑﺪ ﻣﯽ داﻧﻨﺪ ﮐﻪ دﺳﺘﻮرات ﺗﻮﺿﯿﺤﯽ ﮐﻪ در ﺑﯿﻦ دﺳﺘﻮرات آﻏﺎزﯾﻦ و‬
‫ﭘﺎﯾﺎﻧﯽ >‪ <script‬ﻣﻨﻈﻮر ﺷﺪه اﻧﺪ ﺗﻨﻬﺎ ﺑﺮاي ﻣﺨﻔﯽ ﮐﺮدن اﺳﮑﺮﯾﭙﺖ از دﯾﺪ ﻣﺮور ﮔﺮ ﻫﺎي ﻗﺪﯾﻤﯽ ﺗﺮ اﺳﺖ و ﻟﺬا ﺑﻪ ﺗﻔﺴﯿﺮ اﺳﮑﺮﯾﭙﺖ اداﻣﻪ‬
‫ﻣﯽ دﻫﻨﺪ ‪.‬‬
‫ﻫﻤﺎن ﻃﻮر ﮐﻪ ﻣﯽ داﻧﯿﺪ ﺑﺮاي ﻧﻮﺷﺘﻦ ﯾﮏ ﺗﻮﺿﯿﺢ در ﺳﻨﺪ ‪ HTML‬ﮐﺎﻓﯽ اﺳﺖ ﻋﻼﻣﺖ ‪ <!--‬را در اﺑﺘﺪا و ﻋﻼﻣﺖ >‪ --‬را در اﻧﺘﻬﺎي آن‬
‫ﻗﺮار دﻫﯿﺪ ‪.‬‬
‫ﺑﻪ ﻣﺜﺎل زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ ‪:‬‬
‫‪<script language=”JavaScript”><!-- hide from older browsers‬‬
‫{ )(‪function sayHi‬‬
‫;)”‪alert(“Hi‬‬
‫}‬
‫>‪//--‬‬
‫>‪</script‬‬

‫‪ ‬ﺑﻪ دو ‪slash‬ي ﮐﻪ در اﻧﺘﻬﺎي دﺳﺘﻮر ﻓﻮق آﻣﺪه دﻗﺖ ﮐﻨﯿﺪ ‪ .‬اﯾﻦ دو اﺳﻠﺶ ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از اﯾﻦ ﮐﻪ ﻣﻔﺴﺮ‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻣﺮورﮔﺮ ﻫﺎي ﺳﺎزﮔﺎز ﺑﺎ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻋﺒﺎرت >‪ --‬را ﺑﻪ ﻋﻨﻮان ﯾﮏ دﺳﺘﻮر ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺗﻔﺴﯿﺮ ﻧﮑﻨﺪ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ ‪ .‬ﻋﺪم اﺳﺘﻔﺎده از اﯾﻦ دو ‪ //‬ﻣﻮﺟﺐ اﯾﺠﺎد ﯾﮏ ﺧﻄﺎ ﺧﻮاﻫﺪ ﺷﺪ ‪.‬‬

‫ﺷﻤﺎ روش ﻣﺨﻔﯽ ﮐﺮدن اﺳﮑﺮﯾﭙﺖ ﻫﺎ از ﻣﺮورﮔﺮ ﻫﺎي ﻧﺎﺳﺎزﮔﺎر ﺑﺎ ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﻓﺮاﮔﺮﻓﺘﯿﺪ اﻣﺎ ﭼﮕﻮﻧﻪ ﻣﯽ ﺗﻮان ﺑﺮاي ﮐﺎرﺑﺮاﻧﯽ ﮐﻪ از اﯾﻦ‬
‫ﻣﺮورﮔﺮ ﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﻨﺪ ﻧﯿﺰ ﻣﻄﻠﺐ ﺟﺎﯾﮕﺰﯾﻨﯽ ﻧﻤﺎﯾﺶ داد ؟ ﺑﺮاي اﯾﻨﮑﺎر ﺑﺎﯾﺪ از ﺗﮕﯽ ﺑﻪ ﻧﺎم >‪ <noscript‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪ .‬ﻣﺮورﮔﺮ ﻫﺎي‬
‫ﺳﺎزﮔﺎر ﻫﺮ ﭼﯿﺰي را ﮐﻪ ﺑﯿﻦ دﺳﺘﻮرات آﻏﺎزﯾﻦ و ﭘﺎﯾﺎﻧﯽ >‪ <noscript‬ﻗﺮار داﺷﺘﻪ ﺑﺎﺷﺪ ‪ ،‬ﻧﺎدﯾﺪه ﻣﯽ ﮔﯿﺮﻧﺪ ‪ .‬از ﻃﺮف دﯾﮕﺮ ﻣﺮورﮔﺮ ﻫﺎي‬
‫ﻗﺪﯾﻤﯽ اﯾﻦ دﺳﺘﻮر را ﻧﻤﯽ ﺷﻨﺎﺳﻨﺪ و ﺑﻨﺎﺑﺮاﯾﻦ آﻧﺮا ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ و ﺑﻪ ﺳﺮاغ دﺳﺘﻮرات ﺑﻌﺪي )ﮐﻪ ﺗﻮﺳﻂ اﯾﻦ دﺳﺘﻮر اﺣﺎﻃﻪ ﺷﺪه اﻧﺪ ( ﻣﯽ روﻧﺪ ‪.‬‬
‫ﺑﻪ ﻣﺜﺎل زﯾﺮ ﺗﻮﺟﻪ ﮐﻨﯿﺪ ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>”‪<script language=”JavaScript‬‬
‫{ )(‪function sayHi‬‬
‫;)”‪alert(“Hi‬‬
‫}‬
‫>‪</script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>”‪<script language=”JavaScript‬‬
‫;)(‪sayHi‬‬
‫>‪</script‬‬
‫>‪<noscript‬‬
‫‪<p>Your browser doesn’t support JavaScript. If it did support‬‬
‫>‪JavaScript, you would see this message: Hi!</p‬‬
‫>‪</noscript‬‬
‫‪<p>This is the first text the user will see if JavaScript is enabled. If‬‬
‫>‪JavaScript is disabled this is the second text the user will see.</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪١٢‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﮐﺎر ﺑﺎ آراﯾﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﯾﺠﺎد آراﯾﻪ ﻫﺎ ﺑﺎ اﺳﺘﻔﺎده از ﮐﻼس ‪Array‬‬
‫در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺮ ﺧﻼف ﺟﺎوا )‪ ، ( java‬ﮐﻼس درون ﺳﺎﺧﺘﯽ ﺑﻪ ﻧﺎم ‪ array‬وﺟﻮد دارد ﮐﻪ از آن ﺑﺮاي اﯾﺠﺎد آراﯾﻪ ﻫﺎ )ﮐﻪ اﻟﺒﺘﻪ ﺑﻪ ﻋﻨﻮان‬
‫ﯾﮏ ﺷﯽء در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮﻧﺪ ( اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬ﺑﺮاي اﯾﺠﺎد ﯾﮏ ﺷﯽ ء از ﻧﻮع آراﯾﻪ از دﺳﺘﻮرات زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬

‫;)(‪var aValues = new Array‬‬

‫اﮔﺮ ﺷﻤﺎ از ﻗﺒﻞ ﺗﻌﺪاد ﻋﻨﺎﺻﺮ آراﯾﻪ ﻣﻮرد ﻧﻈﺮﺗﺎن را ﺑﺪاﻧﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﺪ ‪:‬‬
‫;)‪var aValues = new Array(20‬‬
‫ﺑﺮاي ﻣﻘﺪاردﻫﯽ ﺧﺎﻧﻪ ﻫﺎي آراﯾﻪ ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬
‫;)(‪var aColors = new Array‬‬
‫;”‪aColors[0] = “red‬‬
‫;”‪aColors[1] = “green‬‬
‫;”‪aColors[2] = “blue‬‬
‫در آراﯾﻪ ﺑﺎﻻ ﺑﺎ ﻫﺮ ﺑﺎر اﺿﺎﻓﻪ ﮐﺮدن ﻋﻨﺼﺮ ﺟﺪﯾﺪ ﺑﻪ ﺻﻮرت ﺧﻮدﮐﺎر ﺑﻪ ﺗﻌﺪاد ﺧﺎﻧﻪ ﻫﺎي آن اﻓﺰوده ﻣﯽ ﺷﻮد ‪.‬‬
‫اﮔﺮ ﺷﻤﺎ از ﻗﺒﻞ ﻣﻘﺎدﯾﺮي ﮐﻪ ﻗﺮار اﺳﺖ درآراﯾﻪ ﻗﺮار ﺑﮕﯿﺮﻧﺪ را ﺑﺪاﻧﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺻﻮرت ﻋﻤﻞ ﮐﻨﯿﺪ ‪:‬‬
‫;)”‪var aColors = new Array(“red”, “green”, “blue‬‬

‫ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ آراﯾﻪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻣﯽ ﺷﻮد ‪:‬‬

‫”‪alert(aColors[1]); //outputs “green‬‬

‫ﺑﺪﺳﺖ آوردن ﻃﻮل آراﯾﻪ‬

‫ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﺗﻌﺪاد ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در آراﯾﻪ از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ length‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬اﯾﻦ ﻣﻘﺪار ﻫﻤﯿﺸﻪ ﯾﮏ واﺣﺪ ﺑﯿﺸﺘﺮ از‬
‫ﻣﻮﻗﻌﯿﺖ آﺧﺮﯾﻦ ﺧﺎﻧﻪ آراﯾﻪ اﺳﺖ ‪.‬‬
‫اﮔﺮ درآراﯾﻪ ﻗﺒﻠﯽ ﮐﻪ ﺳﻪ ﻋﻨﺼﺮ داﺷﺖ ﻣﺎ ﺑﻪ ﯾﮑﺒﺎره ﻣﻮﻗﻌﯿﺖ ﻣﺜﻼ ‪ 25‬را ﭘﺮ ﮐﻨﯿﻢ ﻃﻮل آراﯾﻪ ﭼﻪ ﺧﻮاﻫﺪ ﺑﻮد ؟‬
‫در اﯾﻦ ﺻﻮرت ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺧﺎﻧﻪ ﻫﺎي از ‪ 3‬ﺗﺎ ‪ 24‬را ﺑﺎ ﻣﻘﺪار ‪ null‬ﭘﺮ ﺧﻮاﻫﺪ ﮐﺮد و در اﯾﻦ ﺻﻮرت ﻃﻮل آراﯾﻪ ﻫﻢ ﺑﺮاﺑﺮ ‪ 26‬ﺧﻮاﻫﺪ ﺑﻮد ‪:‬‬

‫;)”‪var aColors = new Array(“red”, “green”, “blue‬‬

‫”‪alert(aColors.length); //outputs “3‬‬
‫;”‪aColors[25] = “purple‬‬
‫”‪aColors(arr.length); //outputs “26‬‬

‫راه دﯾﮕﺮ اﯾﺠﺎد ﯾﮏ آراﯾﻪ اﺳﺘﻔﺎده از ﺑﺮاﮐﺖ ﻫﺎ )] [(و ﻋﻼﻣﺖ ‪ ,‬ﺑﯿﻦ ﻫﺮ ﻋﻨﺼﺮ از آراﯾﻪ اﺳﺖ ﺑﻪ ﺻﻮرت زﯾﺮ ‪:‬‬
‫;]”‪var aColors = [“red”, “green”, “blue‬‬
‫”‪alert(aColors.length); //outputs “3‬‬
‫;”‪aColors[25] = “purple‬‬
‫”‪alert(aColors.length); //outputs “26‬‬
‫ﺗﺒﺪﯾﻞ آراﯾﻪ ﺑﻪ رﺷﺘﻪ ‪:‬‬
‫آراﯾﻪ ﻫﺎ از ﺳﻪ ﻣﺘﺪ ﺧﺎص ﺑﺮاي ﺧﺮوﺟﯽ ﻋﻨﺎﺻﺮ ﺧﻮد ﺑﻪ ﺻﻮرت رﺷﺘﻪ اي ﮐﻪ ﺑﺎ ﮐﺎﻣﺎ از ﻫﻢ ﺟﺪاﺷﺪه اﻧﺪ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﺪ ‪:‬‬
‫;]”‪var aColors = [“red”, “green”, “blue‬‬
‫”‪alert(aColors.toString()); //outputs “red,green,blue‬‬
‫”‪alert(aColors.valueOf()); //outputs “red,green,blue‬‬
‫”‪alert(aColors.toLocaleString()); //outputs “red,green,blue‬‬
‫ﻣﯽ ﺑﯿﻨﯿﺪ ﮐﻪ ﺣﺎﺻﻞ اﺟﺮاي ﻫﺮ ﺳﻪ ﮐﺪ ﺑﺎﻻ ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ ﺑﻮد ‪.‬‬

‫‪١٣‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫از ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم )(‪ join‬ﺑﺮاي اﻟﺤﺎق ﻋﻨﺎﺻﺮ ﯾﮏ آراﯾﻪ ﮐﻪ اﻟﺒﺘﻪ ﺑﻪ وﺳﯿﻠﻪ ﯾﮏ ﺟﺪاﮐﻨﻨﺪه )‪ (separator‬از ﻫﻢ ﺟﺪا ﺷﺪه اﻧﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬‬
‫اﯾﻦ ﺗﺎﺑﻊ ﯾﮏ آرﮔﻮﻣﺎن دارد ﮐﻪ در واﻗﻊ رﺷﺘﻪ اي اﺳﺖ ﮐﻪ ﺑﯿﻦ ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ وﺟﻮد دارد ‪ .‬ﺑﻪ ﻣﺜﺎل ﻫﺎي زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ ‪:‬‬

‫;]”‪var aColors = [“red”, “green”, “blue‬‬

‫”‪alert(aColors.join(“,”)); //outputs “red,green,blue‬‬
‫”‪alert(aColors.join(“-spring-”)); //outputs “red-spring-green-spring-blue‬‬
‫”‪alert(aColors.join(“][“)); //outputs “red][green][blue‬‬

‫ﺗﺒﺪﯾﻞ رﺷﺘﻪ ﺑﻪ آراﯾﻪ ‪:‬‬

‫ﺳﻮاﻟﯽ ﮐﻪ در اﯾﻨﺠﺎ ﭘﯿﺶ ﻣﯽ آﯾﺪ اﯾﻦ اﺳﺖ ﮐﻪ آﯾﺎ اﺷﯿﺎﯾﯽ از ﻧﻮع ‪ string‬را ﻫﻢ ﻣﯽ ﺗﻮان ﺑﻪ ﻃﺮﯾﻖ ﻣﺸﺎﺑﻪ ﺑﻪ آراﯾﻪ ﺗﺒﺪﯾﻞ ﮐﺮد ؟ ﺟﻮاب ﻣﺜﺒﺖ‬
‫اﺳﺖ !!!‬
‫ﺷﯽ ‪ string‬ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ split‬دارد ﮐﻪ ﯾﮏ آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ﮐﻪ ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﺣﺪس زدﯾﺪ ﺟﺪاﮐﻨﻨﺪه ي رﺷﺘﻪ ﺑﺮاي ﺗﺒﺪﯾﻞ ﺑﻪ آراﯾﻪ را‬
‫ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫ﺣﺎل اﮔﺮ ﺷﻤﺎ رﺷﺘﻪ اي دارﯾﺪ ﮐﻪ ﺑﺎ ‪ ,‬از ﻫﻢ ﺟﺪا ﺷﺪه اﺳﺖ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﺪ ‪:‬‬
‫;”‪var sColors = “red,green,blue‬‬
‫;)”‪var aColors = sColors.split(“,‬‬

‫اﮔﺮ ﻫﯿﭻ ﺟﺪاﮐﻨﻨﺪه اي ﻣﺸﺨﺺ ﻧﺸﻮد ‪ ،‬اﯾﻦ ﺗﺎﺑﻊ آراﯾﻪ اي را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻫﺮ ﻋﻨﺼﺮ آن ﺷﺎﻣﻞ ﯾﮑﯽ از ﮐﺎراﮐﺘﺮﻫﺎي رﺷﺘﻪ ي ﻣﻮرد ﻧﻈﺮ‬
‫اﺳﺖ ‪ .‬ﺑﺮاي ﻣﺜﺎل ‪:‬‬
‫;”‪var sColors = “green‬‬
‫;)”“(‪var aColors = sColors.split‬‬
‫”‪alert(aColors.toString()); //outputs “g,r,e,e,n‬‬

‫اﺿﺎﻓﻪ ﮐﺮدن ﻣﻘﺎدﯾﺮ ﺟﺪﯾﺪ ﺑﻪ آراﯾﻪ ﻫﺎ ‪:‬‬

‫آراﯾﻪ ﻫﺎ از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ concat‬ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ ‪ .‬اﯾﻦ ﺗﺎﺑﻊ ﭼﻨﺪﯾﻦ آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد و ﺑﻪ آراﯾﻪ ﺟﺎري اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﺪ و ﺣﺎﺻﻞ آن‬
‫ﯾﮏ آراﯾﻪ ي ﺟﺪﯾﺪ ﺧﻮاﻫﺪ ﺑﻮد ‪ .‬ﺑﻪ ﻣﺜﺎﻟﻬﺎي زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ ‪:‬‬
‫;]”‪var aColors = [“red”, “green”, “blue‬‬
‫;)”‪var aColors2 = arr.concat(“yellow”, “purple‬‬
‫”‪alert(aColors2.toString()); //outputs “red,green,blue,yellow,purple‬‬
‫”‪alert(aColors.toString()); //outputs “red,green,blue‬‬

‫ﺑﺮﮔﺮداﻧﺪن ﻋﻨﺎﺻﺮ ﺧﺎﺻﯽ از آراﯾﻪ ‪:‬‬

‫از ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم )(‪ slice‬ﺑﺮاي ﺑﺮﮔﺮداﻧﺪن ﻋﻨﺎﺻﺮ ﺧﺎﺻﯽ از آراﯾﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬اﯾﻦ ﺗﺎﺑﻊ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد و از ﺧﺎﻧﻪ آرﮔﻮﻣﺎن اول ﺗﺎ‬
‫ﻗﺒﻞ از آرﮔﻮﻣﺎن دوم را ﺑﻪ آراﯾﻪ ﺟﺪﯾﺪي ﺗﺒﺪﯾﻞ ﻣﯽ ﮐﻨﺪ ‪ .‬اﮔﺮ ﻓﻘﻂ آرﮔﻮﻣﺎن اول ﻣﻨﻈﻮر ﮔﺮدد اﯾﻦ ﺗﺎﺑﻊ ﻋﻨﺎﺻﺮ از آن آرﮔﻮﻣﺎن ﺗﺎ اﻧﺘﻬﺎي آراﯾﻪ‬
‫را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪ .‬ﺑﻪ ﻣﺜﺎل ﻫﺎي زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ ‪:‬‬

‫;]”‪var aColors = [“red”, “green”, “blue”, “yellow”, “purple‬‬

‫;)‪var aColors2 = arr.slice(1‬‬
‫;)‪var aColors3 = arr.slice(1, 4‬‬
‫”‪alert(aColors2.toString()); //outputs “green,blue,yellow,purple‬‬
‫”‪alert(aColors3.toString()); //outputs “green,blue,yellow‬‬

‫در ﺣﺎﻟﺖ ﮐﻠﯽ )‪ arr.slice(n,m‬ﻋﻨﺎﺻﺮ از ﺧﺎﻧﻪ ‪ n‬ﺗﺎ ‪ m-1‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬

‫‪١۴‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺗﺒﺪﯾﻞ آراﯾﻪ ﻫﺎ ﺑﻪ ﭘﺸﺘﻪ و ﺻﻒ ‪:‬‬
‫ﯾﮑﯽ از ﺟﺬاﺑﺘﺮﯾﻦ وﯾﮋﮔﯽ ﻫﺎي آراﯾﻪ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﻣﮑﺎن ﺗﺒﺪﯾﻞ ﮐﺮدن آﻧﻬﺎ ﺑﻪ دﯾﮕﺮ ﺳﺎﺧﺘﻤﺎن داده ﻫﺎي راﯾﺞ ﻫﻤﭽﻮن ‪ stack‬و‬
‫‪ queue‬اﺳﺖ ‪.‬‬
‫اﮔﺮ آراﯾﻪ اي را ﺑﻪ ﻋﻨﻮان ‪ stack‬در ﻧﻈﺮ ﺑﮕﯿﺮﯾﻢ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻪ راﺣﺘﯽ ازﺗﻮاﺑﻊ )(‪ push‬و )(‪ pop‬ﺑﺮاي اﺿﺎﻓﻪ و ﺣﺬف ﻋﻨﺎﺻﺮ از اﻧﺘﻬﺎي‬
‫آراﯾﻪ اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪.‬‬
‫ﺗﺎﺑﻊ )(‪ push‬اﻣﮑﺎن اﺿﺎﻓﻪ ﮐﺮدن ﭼﻨﺪﺑﻦ ﻋﻨﺼﺮ ﺑﻪ آراﯾﻪ و ﺗﺎﺑﻊ )(‪ pop‬اﻣﮑﺎن ﺣﺬف آﺧﺮﯾﻦ ﻋﻨﺼﺮ آراﯾﻪ و ﺑﺮﮔﺮداﻧﺪن آن ﺑﻪ ﻋﻨﻮان ﻣﻘﺪار‬
‫ﺑﺎزﮔﺸﺘﯽ ﺗﺎﺑﻊ را ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ ‪ .‬اﻟﺒﺘﻪ ﺗﺎﺑﻊ )(‪ pop‬ﻋﻨﺼﺮي را ﮐﻪ ﺑﺮﻣﯽ ﮔﺮداﻧﺪ از آراﯾﻪ ﺣﺬف ﻣﯽ ﮐﻨﺪ ‪ .‬ﺑﻪ ﻣﺜﺎل ﻫﺎي زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ ‪:‬‬

‫;‪var stack = new Array‬‬

‫;)”‪stack.push(“red‬‬
‫;)”‪stack.push(“green‬‬
‫;)”‪stack.push(“yellow‬‬
‫”‪alert(stack.toString()); //outputs “red,green,yellow‬‬
‫;)(‪var vItem = stack.pop‬‬
‫”‪alert(vItem); //outputs “yellow‬‬
‫”‪alert(stack.toString()); //outputs “red,green‬‬

‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻮاﺑﻊ دﯾﮕﺮي ﺑﺮاي دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ اﺑﺘﺪاﯾﯽ آراﯾﻪ ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ ‪ .‬ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم )(‪ shift‬ﺑﺮاي ﺣﺬف و ﺑﺮﮔﺮداﻧﺪن ﻋﻨﺼﺮ اول‬
‫آراﯾﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬از ﻃﺮف دﯾﮕﺮ ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم )(‪ unshift‬ﯾﮏ ﻋﻨﺼﺮ را ﺑﻪ اﺑﺘﺪاي آراﯾﻪ اﺿﺎﻓﻪ ﮐﺮده و ﺑﻘﯿﻪ ﻋﻨﺎﺻﺮ را ﯾﮏ ﻣﻮﻗﻌﯿﺖ ﺑﻪ‬
‫ﺟﻠﻮ ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ ‪:‬‬
‫;]”‪var aColors = [“red”, “green”, “yellow‬‬
‫;)(‪var vItem = aColors.shift‬‬
‫”‪alert(aColors.toString()); //outputs “green,yellow‬‬
‫”‪alert(vItem); //outputs “red‬‬
‫;)”‪aColors.unshift(“black‬‬
‫”‪alert(aColors.toString()); //outputs “black,green,yellow‬‬

‫در ﺷﮑﻞ زﯾﺮ ﻧﺤﻮه ﻋﻤﻠﮑﺮد ﺗﻮاﺑﻊ ﻓﻮق ﺑﺮ روي ﯾﮏ آراﯾﻪ ﻋﺪدي ﻧﻤﺎﯾﺶ داده ﺷﺪه اﺳﺖ ‪:‬‬

‫ﻣﺮﺗﺐ ﺳﺎزي آراﯾﻪ ﻫﺎ ‪:‬‬

‫از دو ﺗﺎﺑﻊ ﺑﺮاي ﻣﺮﺗﺐ ﺳﺎزي )‪ (ordering‬ﻋﻨﺎﺻﺮ آراﯾﻪ اﺳﺘﻔﺎده ﻣﯿﺸﻮد ‪ .‬ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم )(‪ reverse‬ﺑﺮاي ﻣﺮﺗﺐ ﺳﺎزي ﻋﮑﺲ آراﯾﻪ اﺳﺘﻔﺎده‬
‫ﻣﯽ ﺷﻮد ‪ .‬ﻣﺜﺎل ‪:‬‬
‫;]”‪var aColors = [“red”, “green”, “blue‬‬
‫;)(‪aColors.reverse‬‬
‫”‪alert(aColors.toString()); //outputs “blue,green,red‬‬
‫از ﻃﺮف دﯾﮕﺮ ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم )(‪ sort‬ﻋﻨﺎﺻﺮ آراﯾﻪ را ﺑﻪ ﺻﻮرت ﺻﻌﻮدي ﺑﺮ ﺣﺴﺐ ﻣﻘﺎدﯾﺮﺷﺎن ﻣﺮﺗﺐ ﻣﯽ ﮐﻨﺪ ‪ .‬در اﯾﻦ ﺻﻮرت ﻋﻨﺎﺻﺮ آراﯾﻪ ﺑﺮ‬
‫ﺣﺴﺐ ﮐﺪ ﻫﺎي ﮐﺎراﮐﺘﺮي ﺷﺎن ﻣﺮﺗﺐ ﻣﯽ ﺷﻮﻧﺪ ‪ .‬ﻣﺜﺎل ‪:‬‬
‫;]”‪var aColors = [“red”, “green”, “blue”, “yellow‬‬
‫;)(‪aColors.sort‬‬
‫”‪alert(aColors.toString()); //outputs “blue,green,red,yellow‬‬

‫‪١۵‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫در ﺻﻮرﺗﯽ ﮐﻪ ﻋﻨﺎﺻﺮ آراﯾﻪ اﻋﺪاد ﺑﺎﺷﻨﺪ ﻧﺘﯿﺠﻪ ﮐﻤﯽ ﻋﺠﯿﺐ و ﻏﺮﯾﺐ اﺳﺖ ‪:‬‬
‫]‪var aColors = [3, 32, 2, 5‬‬
‫;)(‪aColors.sort‬‬
‫”‪alert(aColors.toString()); //outputs “2,3,32,5‬‬

‫ﺣﺬف و درج در ﻣﯿﺎﻧﻪ ﻫﺎي آراﯾﻪ ‪:‬‬

‫ﯾﮑﯽ از ﭘﯿﭽﯿﺪه ﺗﺮﯾﻦ ﺗﻮاﺑﻌﯽ ﮐﻪ در ﮐﺎر ﺑﺎ آراﯾﻪ ﻫﺎ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم )(‪ splice‬اﺳﺖ ‪ .‬ﻫﺪف اﺻﻠﯽ اﯾﻦ ﺗﺎﺑﻊ درج‬
‫ﯾﮑﺴﺮي ﻋﻨﺎﺻﺮ درﻣﯿﺎﻧﻪ ﻫﺎي آراﯾﻪ اﺳﺖ ‪.‬‬
‫راه ﻫﺎي ﮔﻮﻧﺎﮔﻮﻧﯽ ﺑﺮاي اﯾﻦ اﺳﺘﻔﺎده از اﯾﻦ ﻣﺘﺪ در راﺑﻄﻪ ﺑﺎ آراﯾﻪ و ﻋﻤﻞ درج ﭘﯿﺸﻨﻬﺎد ﺷﺪه اﺳﺖ ‪:‬‬
‫‪ ‬ﻋﻤﻞ ﺣﺬف ‪ :‬از اﯾﻦ ﻣﺘﺪ ﺑﺮاي ﺣﺬف ﻋﻨﺎﺻﺮي از ﻣﯿﺎﻧﻪ ﻫﺎي آراﯾﻪ ﻣﯽ ﺗﻮان اﺳﺘﻔﺎده ﮐﺮد ‪ .‬ﺑﺮاي اﯾﻦ ﮐﺎر از دو ﭘﺎراﻣﺘﺮ ﺑﺮاي اﯾﻦ ﺗﺎﺑﻊ‬
‫اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ :‬ﻣﻮﻗﻌﯿﺖ اوﻟﯿﻦ ﻋﻨﺼﺮ و ﺗﻌﺪاد ﻋﻨﺎﺻﺮ ﻣﻮرد ﻧﻈﺮ ﺑﺮاي ﺣﺬف ‪ .‬ﺑﺮاي ﻣﺜﺎل )‪ arr.splice(0, 2‬دو ﻋﻨﺼﺮ اول آراﯾﻪ اي‬
‫ﺑﻪ ﻧﺎم ‪ arr‬را ﺣﺬف ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫‪ ‬درج ﺑﺪون ﺣﺬف ‪ :‬ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ازاﯾﻦ ﺗﺎﺑﻊ ﺑﺮاي درج ﻋﻨﺎﺻﺮ ﺟﺪﯾﺪ ﺑﺎ اﺳﺘﻔﺎده از ﺳﻪ ﭘﺎراﻣﺘﺮاﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪ :‬ﻣﻮﻗﻌﯿﺖ ﺷﺮوع ‪ ،‬ﺗﻌﺪاد‬
‫ﻋﻨﺎﺻﺮ ﺣﺬﻓﯽ و ﻋﻨﺎﺻﺮ ﺟﺪﯾﺪ ﺑﺮاي درج ‪.‬‬
‫ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﻫﺮ ﺗﻌﺪاد ﭘﺎراﻣﺘﺮ ﺑﺮاي درج را ﺑﻪ اﯾﻦ ﺗﺎﺑﻊ ﺑﺪﻫﯿﺪ ‪ .‬ﺑﺮاي ﻣﺜﺎل )”‪ arr.splice(2, 0, “red”, “green‬ﻋﻨﺎﺻﺮ ‪ red‬و‬
‫‪ green‬را از ﺧﺎﻧﻪ دوم در آراﯾﻪ درج ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫‪ ‬درج ﻋﻨﺼﺮ ﻫﻤﺮاه ﺑﺎ ﺣﺬف ‪ :‬ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ از اﯾﻦ ﺗﺎﺑﻊ ﺑﺮاي درج ﻋﻨﺎﺻﺮ ﺟﺪﯾﺪ در ﯾﮏ ﻣﻮﻗﻌﯿﺖ ﻣﺸﺨﺺ ﻫﻤﺰﻣﺎن ﺑﺎ ﻋﻤﻞ ﺣﺬف و‬
‫اﺳﺘﻔﺎده از ﺳﻪ ﭘﺎراﻣﺘﺮ اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪ :‬ﻣﻮﻗﻌﯿﺖ ﺷﺮوع ﺣﺬف ‪ ،‬ﺗﻌﺪاد ﻋﻨﺎﺻﺮ ﺣﺬﻓﯽ و ﻋﻨﺎﺻﺮ ﺟﺪﯾﺪ درﺟﯽ ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‬
‫)”‪ arr.splice(2, 1, “red”, “green‬ﯾﮏ ﻋﻨﺼﺮ را از ﻣﻮﻗﻌﯿﺖ ‪ ٢‬ﺣﺬف ﮐﺮده و ﻣﻘﺎدﯾﺮ ‪ red‬و ‪ green‬را از ﻫﻤﺎن ﻣﻮﻗﻌﯿﺖ‬
‫)‪ (2‬درج ﻣﯽ ﮐﻨﺪ ‪.‬‬

‫ﮐﺎر ﺑﺎ رﺷﺘﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫اﯾﺠﺎد اﺷﯿﺎء رﺷﺘﻪ اي )رﺷﺘﻪ( ﺑﺎ اﺳﺘﻔﺎده از ﮐﻼس ‪: string‬‬
‫از اﯾﻦ ﮐﻼس ﺑﺮاي اﯾﺠﺎد اﺷﯿﺎء رﺷﺘﻪ اي )ﺑﻪ اﺧﺘﺼﺎر رﺷﺘﻪ ﻫﺎ( اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬دﺳﺘﻮر زﯾﺮ ﻣﺘﻐﯿﺮي ﺣﺎوي رﺷﺘﻪ ‪ Hello World‬را‬
‫ﺗﻮﻟﯿﺪ ﻣﯽ ﮐﻨﺪ ‪:‬‬
‫;)”‪var oStringObject = new String(“hello world‬‬

‫اﺷﯿﺎي از ﻧﻮع ‪ string‬ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ length‬دارﻧﺪ ﮐﻪ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي رﺷﺘﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪ .‬اﯾﻦ ﺷﯽء از ﭼﻨﺪﯾﻦ ﻣﺘﺪ ﻧﯿﺰ ﭘﺸﺘﯿﺒﺎﻧﯽ‬
‫ﻣﯽ ﮐﻨﺪ ﮐﻪ در اداﻣﻪ ﺷﺮح ﺧﻮاﻫﯿﻢ داد ‪:‬‬

‫ﺑﺪﺳﺖ آوردن ﮐﺎراﮐﺘﺮ ﻣﻮﺟﻮد در ﯾﮏ ﻣﻮﻗﻌﯿﺖ ﺧﺎص ‪:‬‬

‫)(‪ : charAt‬ﻋﺪدي را ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد و ﮐﺎراﮐﺘﺮ ﻧﻈﯿﺮ آن در رﺷﺘﻪ اﺻﻠﯽ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ ‪ .‬ﻣﺜﻼ ‪:‬‬
‫;)”‪var oStringObject = new String(“hello world‬‬
‫”‪alert(oStringObject.length); //outputs “11‬‬

‫اﮔﺮ ﭼﻨﺎﻧﭽﻪ ﻣﯽ ﺧﻮاﻫﯿﺪ ﺑﻪ ﺟﺎي ﺧﻮد ﮐﺎراﮐﺘﺮ ﮐﺪ ﮐﺎراﮐﺘﺮي آن را ﺑﺪﺳﺖ آورﯾﺪ از ﻣﺘﺪ )(‪ charCodeAt‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪:‬‬
‫;)”‪var oStringObject = new String(“hello world‬‬
‫”‪alert(oStringObject.charCodeAt(1)); //outputs “101‬‬
‫اﯾﻦ دﺳﺘﻮر ﻣﻘﺪار ‪ 101‬ﮐﻪ ﻣﻌﺎدل ﮐﺪ ﮐﺎراﮐﺘﺮي ﺣﺮف ‪ e‬اﺳﺖ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬

‫‪١۶‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﻟﺤﺎق دو رﺷﺘﻪ ‪:‬‬
‫ﻣﺘﺪ دﯾﮕﺮ )(‪ concat‬اﺳﺖ ﮐﻪ ﺑﺮاي اﻟﺤﺎق دو رﺷﺘﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬ﺑﺮاي ﻣﺜﺎل ‪:‬‬
‫;)“ ‪var oStringObject = new String(“hello‬‬
‫;)”‪var sResult = oStringObject.concat(“world‬‬
‫”‪alert(sResult); //outputs “hello world‬‬
‫“ ‪alert(oStringObject); //outputs “hello‬‬

‫ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده از ﻣﺘﺪ )(‪ concat‬ﻣﯽ ﺗﻮان از ﻋﻤﻠﮕﺮ ‪ +‬ﻧﯿﺰ ﺑﺮاي اﻟﺤﺎق دو رﺷﺘﻪ اﺳﺘﻔﺎده ﮐﺮد ‪.‬‬

‫ﺑﺪﺳﺖ آوردن ﻣﻮﻗﻌﯿﺖ ﯾﮏ ﮐﺎراﮐﺘﺮ ﺧﺎص در رﺷﺘﻪ ‪:‬‬

‫ﺑﺮاي ﺗﺸﺨﯿﺺ اﯾﻨﮑﻪ ﯾﮏ ﮐﺎراﮐﺘﺮ ﺧﺎص در ﯾﮏ رﺷﺘﻪ ﻫﺴﺖ ﯾﺎ ﻧﻪ ﻣﯽ ﺗﻮان از ﻣﺘﺪ ﻫﺎي )(‪ indexOf‬و )(‪ lastIndexOf‬اﺳﺘﻔﺎده ﻣﯽ‬
‫ﺷﻮد ‪.‬‬
‫ﻫﺮ دو اﯾﻦ ﻣﺘﺪﻫﺎ ﻣﻮﻗﻌﯿﺖ زﯾﺮ رﺷﺘﻪ اي در رﺷﺘﻪ دﯾﮕﺮ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ اﻟﺒﺘﻪ در ﺻﻮرت ﭘﯿﺪاﻧﺸﺪن ﻣﻘﺪار‪ -1‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﻨﺪ ‪.‬‬
‫ﺗﻨﻬﺎ ﺗﻔﺎوت اﯾﻦ دو ﺗﺎﺑﻊ در اﯾﻦ اﺳﺖ ﮐﻪ )(‪ indexOf‬ﺟﺴﺘﺠﻮ را از اﺑﺘﺪاي رﺷﺘﻪ )ﻣﻮﻗﻌﯿﺖ ‪ (0‬ﺷﺮوع ﻣﯽ ﮐﻨﺪ وﻟﯽ دﯾﮕﺮي ﺟﺴﺘﺠﻮ را از‬
‫اﻧﺘﻬﺎي رﺷﺘﻪ ﺷﺮوع ﻣﯽ ﮐﻨﺪ ‪ .‬ﺑﺮاي ﻣﺜﺎل ‪:‬‬
‫;)”‪var oStringObject = new String(“hello world‬‬
‫”‪alert(oStringObject.indexOf(“o”)); //outputs “4‬‬
‫”‪alert(oStringObject.lastIndexOf(“o”)); //outputs “7‬‬

‫در ﺻﻮرﺗﯽ ﮐﻪ ﺣﺮف ‪ O‬در ﻋﺒﺎرت ﺑﺎﻻ ﻓﻘﻂ ﯾﮑﺒﺎر ﺗﮑﺮار ﻣﯽ ﺷﺪ ﻫﺮ دو اﯾﻦ ﻣﺘﺪ ﻫﺎ ﻓﻘﻂ ﯾﮏ ﻣﻘﺪار راﺑﺮ ﻣﯽ ﮔﺮداﻧﻨﺪ ‪.‬‬

‫ﻣﻘﺎﯾﺴﻪ رﺷﺘﻪ ﻫﺎ ‪:‬‬

‫ﻣﺘﺪ دﯾﮕﺮي ﮐﻪ ﺑﺮاي رﺷﺘﻪ ﻫﺎ ﺗﻌﺮﯾﻒ ﺷﺪه )(‪ localeCompare‬اﺳﺖ ﮐﻪ ﺑﺮاي ﻣﻘﺎﯾﺴﻪ رﺷﺘﻪ ﻫﺎ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد‪) .‬اﯾﻦ ﻣﺘﺪ‬
‫ﻣﻌﺎدل ﺗﺎﺑﻊ )(‪ strcmp‬در زﺑﺎن ‪ C++‬اﺳﺖ ‪(.‬‬
‫اﯾﻦ ﺗﺎﺑﻊ ﯾﮏ آرﮔﻮﻣﺎن رﺷﺘﻪ اي ﻣﯽ ﭘﺬﯾﺮد و ﯾﮑﯽ از ﺳﻪ ﻣﻘﺪار زﯾﺮ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪:‬‬
‫‪ .1‬اﮔﺮ ﺷﯽء رﺷﺘﻪ اي ﮐﻮﭼﮑﺘﺮ از آرﮔﻮﻣﺎن ﺑﺎﺷﺪ ‪ -1‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬
‫‪ .2‬اﮔﺮ ﺑﺮاﺑﺮ ﺑﺎﺷﻨﺪ ‪ 0‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬
‫‪ .3‬اﮔﺮ ﺷﯽء رﺷﺘﻪ اي ﺑﺰرﮔﺘﺮ ﺑﺎﺷﺪ ﻣﻘﺪار ‪ 1‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬
‫ﻣﺜﺎل ﻫﺎ ‪:‬‬
‫;)”‪var oStringObject = new String(“yellow‬‬
‫”‪alert(oStringObject.localeCompare(“brick”)); //outputs “1‬‬
‫”‪alert(oStringObject.localeCompare(“yellow”)); //outputs “0‬‬
‫”‪alert(oStringObject.localeCompare (“zoo”)); //outputs “-1‬‬

‫ﺟﺪا ﮐﺮدن زﯾﺮ رﺷﺘﻪ اي از رﺷﺘﻪ دﯾﮕﺮ ‪:‬‬

‫دو ﺗﺎﺑﻊ ﺑﺮاي ﺟﺪا ﮐﺮدن زﯾﺮ رﺷﺘﻪ ﻫﺎ از رﺷﺘﻪ اﺻﻠﯽ وﺟﻮد دارد ‪ slice() :‬و )(‪. substring‬‬
‫ﻫﺮ دو اﯾﻦ ﻣﺘﺪ ﻫﺎ ﯾﮏ ﯾﺎ دو آرﮔﻮﻣﺎن را ﻣﯽ ﭘﺬﯾﺮﻧﺪ ﮐﻪ آرﮔﻮﻣﺎن اول ﻣﺤﻞ ﺷﺮوع و آرﮔﻮﻣﺎن دوم ﻣﺤﻞ ﭘﺎﯾﺎن را ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ ‪) .‬اﻟﺒﺘﻪ‬
‫ﺧﻮدآرﮔﻮﻣﺎن دوم ﺟﺰء زﯾﺮ رﺷﺘﻪ ﻧﺨﻮاﻫﺪ ﺑﻮد ‪(.‬‬
‫اﮔﺮ آرﮔﻮﻣﺎن دوم ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ ﺷﻮد ‪ length‬رﺷﺘﻪ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺧﻮاﻫﺪ ﺷﺪ ‪.‬‬
‫ﭼﯿﺰي ﮐﻪ اﯾﻦ دو ﻣﺘﺪ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ زﯾﺮ رﺷﺘﻪ ﺣﺎﺻﻞ اﺳﺖ ‪:‬‬

‫‪١٧‬‬
‫ اﺣﻤﺪ ﺑﺎدﭘﯽ‬: ‫ﻧﻮﯾﺴﻨﺪه‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
var oStringObject = new String(“hello world”);
alert(oStringObject.slice(3)); //outputs “lo world”
alert(oStringObject.substring(3)); //outputs “lo world”
alert(oStringObject.slice(3, 7)); //outputs “lo w”
alert(oStringObject.substring(3,7)); //outputs “lo w”

‫ﺳﻮاﻟﯽ ﮐﻪ دراﯾﻨﺠﺎ ﭘﯿﺶ ﻣﯽ آﯾﺪ اﯾﻦ اﺳﺖ ﮐﻪ ﭼﺮا دﻗﯿﻘﺎ اﯾﻦ دو ﺗﺎﺑﻊ ﺑﮏ ﮐﺎر را اﻧﺠﺎم ﻣﯽ دﻫﻨﺪ ؟ در ﺣﻘﯿﻘﺖ ﺗﻔﺎوت آن ﻫﺎ در ﮐﺎر ﺑﺎ آرﮔﻮﻣﺎن‬
. ‫ﻫﺎي ﻣﻨﻔﯽ اﺳﺖ‬

‫ در ﺣﺎﻟﯽ ﮐﻪ ﺑﺮاي‬. ‫ آرﮔﻮﻣﺎن ﻣﻨﻔﯽ ﺑﺎ ﻃﻮل رﺷﺘﻪ ﺟﻤﻊ ﺷﺪه و ﺣﺎﺻﻞ آن ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎن اﺻﻠﯽ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‬slice() ‫ﺑﺮاي ﻣﺘﺪ‬
(. ‫)درواﻗﻊ ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮﻧﺪ‬. ‫ ﻣﻘﺎدﯾﺮ ﻣﻨﻔﯽ ﺑﻪ ﻋﻨﻮان ﺻﻔﺮ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‬sustring() ‫ﺗﺎﺑﻊ‬

: ‫ﻣﺜﺎل ﻫﺎ‬
var oStringObject= new String(“hello world”);
alert(oStringObject.slice(-3)); //outputs “rld”
alert(oStringObject.substring(-3)); //outputs “hello world”
alert(oStringObject.slice(3, -4)); //outputs “lo w”
alert(oStringObject.substring(3,-4)); //outputs “hel”

: ‫ اﺳﺖ درواﻗﻊ دﺳﺘﻮر زﯾﺮ اﺟﺮا ﻣﯿﺸﻮد‬8 ‫ ﺟﻤﻊ ﻣﯽ ﺷﻮد ﮐﻪ ﺣﺎﺻﻞ‬-3 ‫در ﺧﻂ دوم از ﮐﺪ ﺑﺎﻻ ﭼﻮن آرﮔﻮﻣﺎن ﻣﻨﻔﯽ اﺳﺖ ﻃﻮل رﺷﺘﻪ ﺑﺎ‬
oStringObject.slice(8);
: ‫ ﯾﻌﻨﯽ‬. ‫ اﻣﺎ در ﺧﻂ ﺳﻮم آرﮔﻮﻣﺎن ﻣﻨﻔﯽ ﺻﻔﺮ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‬. ‫ﮐﻪ از ﺧﺎﻧﻪ ﻫﺸﺘﻢ رﺷﺘﻪ ﺗﺎ اﻧﺘﻬﺎي آراﯾﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‬
oStringObject.substring(0);

: ‫ ﯾﻌﻨﯽ‬. ‫ ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎن دوم در ﻧﻈﺮﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‬8 ‫در ﺧﻂ ﭼﻬﺎرم آرﮔﻮﻣﺎن دوم ﺑﺎ ﻃﻮل رﺷﺘﻪ ﺟﻤﻊ ﺷﺪه و ﺣﺎﺻﻞ آن ﯾﻌﻨﯽ‬

oStringObject.slice(3,8);
: ‫و در ﺧﻂ ﭘﻨﺠﻢ ﺣﺎﺻﻞ ﺑﻪ ﺻﻮرت زﯾﺮ ﻣﺤﺎﺳﺒﻪ ﻣﯽ ﺷﻮد‬
oStringObject.substring(3,0);

toLowerCase ()‫ و‬toUpperCase()

‫ ﺑﺮاي ﺗﺒﺪﯾﻞ ﺣﺮوف رﺷﺘﻪ ﺑﻪ ﺣﺮوف ﺑﺰرگ ﯾﺎ ﮐﻮﭼﮏ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ﮐﻪ‬toLowerCase() ‫ و‬toUpperCase() ‫از ﺗﻮاﺑﻌﯽ ﻫﻤﭽﻮن‬
: ‫ﮐﺎر آن ﻫﺎ از روي اﺳﻤﺸﺎن ﮐﺎﻣﻼ ﻣﺸﺨﺺ اﺳﺖ‬
var oStringObject= new String(“Hello World”);
alert(oStringObject.toLocaleUpperCase()); //outputs “HELLO WORLD”
alert(oStringObject.toUpperCase()); //outputs “HELLO WORLD”
alert(oStringObject.toLocaleLowerCase()); //outputs “hello world”
alert(oStringObject.toLowerCase()); //outputs “hello world”

١٨
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﺷﯿﺎي دروﻧﯽ )ﭘﯿﺶ ﺳﺎﺧﺘﻪ( ‪:‬‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺷﺎﻣﻞ ﺗﻌﺪادي ﺷﯽ از ﭘﯿﺶ ﺳﺎﺧﺘﻪ اﺳﺖ ﮐﻪ ﻃﺮاﺣﺎن ﻣﯽ ﺗﻮاﻧﻨﺪ از آن ﻫﺎ در ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺧﻮد اﺳﺘﻔﺎده ﮐﻨﻨﺪ ‪ .‬در واﻗﻊ ﻣﺎ ﮐﻼس‬
‫ﻫﺎﯾﯽ ﺑﺮاي اﯾﻦ اﺷﯿﺎ ﻧﺪارﯾﻢ و ﻻزم ﻧﯿﺴﺖ ﺷﯽ اي از روي آن ﻫﺎ ﺳﺎﺧﺘﻪ ﺷﻮد ‪.‬‬

‫ﺷﯽ ‪: Math‬‬
‫ﯾﮑﯽ از اﺷﯿﺎي از ﭘﯿﺶ ﺳﺎﺧﺘﻪ ﺷﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺖ ﮐﻪ ﺑﺮاي اﻧﺠﺎم ﻣﺤﺎﺳﺒﺎت ﻋﺪدي و ﻋﻤﻠﯿﺎت ﻣﺮﺑﻮط ﺑﻪ رﯾﺎﺿﯿﺎت اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬
‫اﯾﻦ ﺷﯽ ﺷﺎﻣﻞ ﯾﮑﺴﺮي ﺧﺎﺻﯿﺖ و ﻣﺘﺪ اﺳﺖ ﮐﻪ اﻧﺠﺎم ﻣﺤﺎﺳﺒﺎت را آﺳﺎن ﻣﯽ ﮐﻨﺪ ‪.‬‬

‫ﻣﺘﺪﻫﺎي )(‪ min‬و )(‪: max‬‬

‫از اﯾﻦ ﺗﻮاﺑﻊ ﺑﺮاي ﭘﯿﺪاﮐﺮدن ﮐﻮﭼﮑﺘﺮﯾﻦ و ﺑﺰرﮔﺘﺮﯾﻦ ﻣﻘﺎدﯾﺮ از ﺑﯿﻦ ﭼﻨﺪ ﻋﺪد اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬اﯾﻦ ﻣﺘﺪ ﻫﺎ ﻫﺮ ﺗﻌﺪاد ﭘﺎراﻣﺘﺮ را ﻣﯽ ﺗﻮاﻧﻨﺪ‬
‫ﺑﭙﺬﯾﺮﻧﺪ ‪:‬‬
‫‪var iMax = Math.max(3,‬‬ ‫;)‪54, 32, 16‬‬
‫‪alert(iMax); //outputs‬‬ ‫”‪“54‬‬
‫‪var iMin = Math.min(3,‬‬ ‫;)‪54, 32, 16‬‬
‫‪alert(iMin); //outputs‬‬ ‫”‪“3‬‬

‫اﯾﻦ ﺗﻮاﺑﻊ ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از ﻧﻮﺷﺘﻦ ﺑﺮﻧﺎﻣﻪ ﻫﺎي اﺿﺎﻓﯽ ﺑﺮاي ﭘﯿﺪاﮐﺮدن ‪ min‬و ‪ max‬اﻋﺪاد ﻣﯽ ﺗﻮاﻧﺪ اﺳﺘﻔﺎده ﺷﻮد ‪.‬‬
‫ﯾﮑﯽ از ﻣﺘﺪ ﻫﺎ ‪ abs() ،‬اﺳﺖ ﮐﻪ ﻗﺪر ﻣﻄﻠﻖ اﻋﺪاد ﮔﺮﻓﺘﻪ ﺷﺪه را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬
‫ﮔﺮوﻫﯽ دﯾﮕﺮ از ﻣﺘﺪ ﻫﺎ ﮐﻪ ﺑﺮاي ﮔﺮد ﮐﺮدن اﻋﺪاد اﻋﺸﺎري ﺑﻪ ﺻﺤﯿﺢ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮﻧﺪ ‪ .‬اﯾﻦ ﺗﻮاﺑﻊ ﺷﺎﻣﻞ )(‪ ceil‬و )(‪ floor‬و‬
‫)(‪ round‬ﻫﺴﺘﻨﺪ ‪.‬‬
‫‪ ‬ﺗﺎﺑﻊ )(‪ : round‬اﯾﻦ ﺗﺎﺑﻊ ﻋﺪد ﮔﺮﻓﺘﻪ ﺷﺪه را ﺑﻪ ﻋﺪد ﺻﺤﯿﺢ ﺑﺎﻻﺗﺮ ﮔﺮد ﻣﯽ ﮐﻨﺪ اﮔﺮ ﻗﺴﻤﺖ اﻋﺸﺎري ا زﻧﺼﻒ ﺑﯿﺸﺘﺮ ﯾﺎ ﻣﺴﺎوي‬
‫ﺑﺎﺷﺪ و در ﻏﯿﺮ اﯾﻦ ﺻﻮرت آن را ﺑﻪ ﻋﺪد ﺻﺤﯿﺢ ﭘﺎﯾﯿﻦ ﺗﺮ ﮔﺮد ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫‪ ‬ﺗﺎﺑﻊ )(‪ : ceil‬اﯾﻦ ﺗﺎﺑﻊ ﺑﺪون در ﻧﻈﺮ ﮔﺮﻓﺘﻦ ﻗﺴﻤﺖ اﻋﺸﺎري آن را ﺑﻪ ﮐﻮﭼﮑﺘﺮﯾﻦ ﻋﺪد ﺻﺤﯿﺢ ﺑﻌﺪي ﮔﺮد ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫‪ ‬ﺗﺎﺑﻊ )(‪ : floor‬اﯾﻦ ﺗﺎﺑﻊ ﺑﺪون در ﻧﻈﺮ ﮔﺮﻓﺘﻦ ﻗﺴﻤﺖ اﻋﺸﺎري آن را ﺑﻪ ﺑﺰرﮔﺘﺮﯾﻦ ﻋﺪد ﺻﺤﯿﺢ ﻗﺒﻠﯽ ﮔﺮد ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫ﺑﻪ ﻣﺜﺎل ﻫﺎي زﯾﺮ ﺗﻮﺟﻪ ﮐﻨﯿﺪ ‪:‬‬
‫”‪alert(Math.ceil(25.5)); //outputs “26‬‬
‫”‪alert(Math.round(25.5)); //outputs “26‬‬
‫”‪alert(Math.floor(25.5)); //outputs “25‬‬

‫ﮔﺮوه دﯾﮕﺮي از ﻣﺘﺪ ﻫﺎ ﺑﺮاي ﮐﺎر ﺑﺎ ﻣﻘﺎدﯾﺮ ﺗﻮاﻧﯽ وﺟﻮد دارد ‪:‬‬
‫)(‪ : Log‬ﺑﺮاي ﻣﺤﺎﺳﺒﻪ ﻟﮕﺎرﯾﺘﻢ ﻃﺒﯿﻌﯽ ﻋﺪد ﮔﺮﻓﺘﻪ ﺷﺪه ﺑﻪ ﮐﺎر ﻣﯽ رود ‪.‬‬
‫)(‪ : Pow‬ﺑﺮاي ﻣﺤﺎﺳﺒﻪ ﺗﻮان ﯾﮏ ﻋﺪد ﺑﻪ ﮐﺎر ﻣﯽ رود ﮐﻪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ‪:‬‬
‫;)‪var iNum = Math.pow(2, 10‬‬
‫)(‪ : sqrt‬ﺟﺬر ﯾﮏ ﻋﺪد را ﺣﺴﺎب ﻣﯽ ﮐﻨﺪ‪:‬‬
‫;)‪var iNum = Math.sqrt(4‬‬
‫”‪alert(iNum); //outputs “2‬‬

‫ﺷﯽ ‪ Math‬ﺷﺎﻣﻞ ﻣﺘﺪ ﻫﺎي زﯾﺮ ﻧﯿﺰ ﻣﯽ ﺑﺎﺷﺪ ‪:‬‬

‫)‪acos(x) , asin(x) , atan(x) , atan2(x, y) , cos(x) , sin(x) , tan(x‬‬

‫‪١٩‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﯾﮑﯽ دﯾﮕﺮ از ﻣﺘﺪ ﻫﺎي ﻣﺮﺑﻮط ﺑﻪ ﺷﯽ ء ‪ Math‬ﮐﻪ ﮐﺎرﺑﺮد زﯾﺎدي ﻫﻢ دارد )(‪ random‬اﺳﺖ ‪ .‬ﮐﻪ ﺑﺮاي ﺗﻮﻟﯿﺪ اﻋﺪاد ﺗﺼﺎدﻓﯽ ﺑﯿﻦ ‪ 0‬و ‪1‬‬
‫)اﻟﺒﺘﻪ ﻧﻪ ﺧﻮد ‪ 0‬و ‪ (1‬ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد ‪.‬‬
‫اﻟﺒﺘﻪ ﺑﺮاي ﺗﻮﻟﯿﺪ اﻋﺪاد ﺗﺼﺎدﻓﯽ در ﯾﮏ ﻣﺤﺪوده ﺧﺎص از ﻓﺮﻣﻮل زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪:‬‬

‫‪number = Math.floor(Math.random() * total_number_of_choices +‬‬

‫)‪first_possible_value‬‬

‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﯾﺮاي اﯾﺠﺎد ﻣﻘﺎدﯾﺮ ﺗﺼﺎدﻓﯽ ﺑﯿﻦ ‪ 1‬و ‪ 10‬ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻣﯽ ﺷﻮد ‪:‬‬

‫;)‪var iNum = Math.floor(Math.random() * 10 + 1‬‬

‫ﺑﻬﺘﺮﯾﻦ راه ﺑﺮاي اﯾﺠﺎد ﻣﻘﺎدﯾﺮ ﺗﺼﺎدﻓﯽ اﺳﺘﻔﺎده از ﯾﮏ ﺗﺎﺑﻊ اﺳﺖ ﮐﻪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻧﻮﺷﺘﻪ ﻣﯽ ﺷﻮد ‪:‬‬

‫{ )‪function selectFrom(iFirstValue, iLastValue‬‬

‫;‪var iChoices = iLastValue – iFirstValue + 1‬‬
‫;)‪return Math.floor(Math.random() * iChoices + iFirstValue‬‬
‫}‬
‫‪//select from between 2 and 10‬‬
‫;)‪var iNum = selectFrom(2, 10‬‬
‫اﺳﺘﻔﺎده از اﯾﻦ ﺗﺎﺑﻊ ﺑﺮاي اﻧﺘﺨﺎب ﯾﮏ ﻋﻨﺼﺮ ﺗﺼﺎدﻓﯽ از آراﯾﻪ ﺑﺴﯿﺎر آﺳﺎن اﺳﺖ ‪ .‬ﺑﺮاي ﻣﺜﺎل ‪:‬‬
‫;]”‪var aColors = [“red”, “green”, “blue”, “yellow”, “black”, “purple”, “brown‬‬
‫;])‪var sColor = aColors[selectFrom(0, aColors.length-1‬‬

‫در اﯾﻨﺠﺎ آرﮔﻮﻣﺎن دوم ﺗﺎﺑﻊ ‪ ،‬ﻃﻮل آراﯾﻪ ﻣﻨﻬﺎي ‪ 1‬اﺳﺖ ﮐﻪ در واﻗﻊ ﻣﻮﻗﻌﯿﺖ آﺧﺮﯾﻦ ﻋﻨﺼﺮ ﻣﯽ ﺑﺎﺷﺪ ‪.‬‬

‫دﯾﮕﺮ ﺗﻮاﺑﻊ ﻣﻔﯿﺪ ‪:‬‬

‫از ﺗﻮاﺑﻌﯽ ﻫﻤﭽﻮن )(‪ encodeURI‬و )(‪ encodeURIComponent‬ﺑﺮاي ‪ encode‬ﮐﺮدن آدرس ﻫﺎي اﯾﻨﺘﺮﻧﺘﯽ)‪ URI‬ﻫﺎ(‬
‫اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬در ﺣﺎﻟﺖ ﮐﻠﯽ و ﺻﺤﯿﺢ ﯾﮏ آدرس ﻧﺒﺎﯾﺪ ﺷﺎﻣﻞ ﮐﺎراﮐﺘﺮﻫﺎي ﺧﺎص ﻫﻤﭽﻮن ‪ space‬ﺑﺎﺷﺪ ‪ .‬اﯾﻦ ﺗﻮاﺑﻊ ﺑﻪ ﺷﻤﺎ درﺗﺒﺪﯾﻞ‬
‫ﮐﺮدن و ‪ encode‬ﮐﺮدن آدرس ﻫﺎي اﯾﻨﺘﺮﻧﺘﯽ ﻧﺎدرﺳﺖ و ﺑﯽ ارزش ﺑﺮاي اﯾﻨﮑﻪ ﻣﺮورﮔﺮ ﻫﺎ آﻧﻬﺎ را ﺑﻔﻬﻤﻨﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬

‫ﻣﺘﺪ )(‪ encodeURI‬ﻣﻌﻤﻮﻻ ﺑﺮاي آدرس ﻫﺎي ﮐﺎﻣﻞ )ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ‪( http://itcom.pnuab.ac.ir/illegal value.htm‬‬
‫ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد در ﺣﺎﻟﯽ ﮐﻪ دﯾﮕﺮي ﺑﺮاي ﻗﺴﻤﺘﯽ از آدرس ﻫﺎ ﻫﻤﭽﻮن ‪ illegal value.htm‬ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد ‪.‬‬
‫ﺗﻔﺎوت اﺻﻠﯽ ﺑﯿﻦ اﯾﻦ دو ﺗﺎﺑﻊ اﯾﻦ اﺳﺖ ﮐﻪ ﺗﺎﺑﻊ اول ﮐﺎراﮐﺘﺮ ﻫﺎي ﺧﺎﺻﯽ ﮐﻪ ﺑﻪ ﻋﻨﻮان ﺟﺰﺋﯽ از آدرس ﻫﺴﺘﻨﺪ ﻫﻤﭽﻮن ) ‪ ، / ، ( :‬؟ و‪ ...‬را‬
‫‪ encode‬ﻧﻤﯽ ﮐﻨﺪ درﺣﺎﻟﯽ ﮐﻪ ﺗﺎﺑﻊ دوم ﺗﻤﺎم ﮐﺎراﮐﺘﺮ ﻫﺎي ﻏﯿﺮ اﺳﺘﺎﻧﺪارد را ‪ encode‬ﺧﻮاﻫﺪ ﮐﺮد ‪ .‬ﺑﺮاي ﻣﺜﺎل ‪:‬‬

‫;”‪var sUri = “http://www.wrox.com/illegal value.htm#start‬‬

‫;))‪alert(encodeURI(sUri‬‬
‫;))‪alert(encodeURIComponent(sUri‬‬
‫ﺣﺎﺻﻞ اﺟﺮاي ﮐﺪ ﺑﺎﻻ ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ ﺷﺪ ‪:‬‬

‫‪http://www.wrox.com/illegal%20value.htm#start‬‬
‫‪https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fwww.wrox.com%2Fillegal%20value.htm%23start‬‬

‫‪٢٠‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﻃﺒﯿﻌﺘﺎ دو ﺗﺎﺑﻊ ﺑﺮاي ‪ decode‬ﮐﺮدن آدرس ﻫﺎي اﯾﻨﺘﺮﻧﺘﯽ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ﻫﻤﭽﻮن ‪:‬‬

‫)(‪ decodeURI‬‬
‫)(‪ decodeURIComponent‬‬
‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ‪:‬‬
‫;”‪var sUri = “https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fwww.wrox.com%2Fillegal%20value.htm%23start‬‬
‫;))‪alert(decodeURI(sUri‬‬
‫;))‪alert(decodeURIComponent(sUri‬‬
‫ﺣﺎﺻﻞ اﺟﺮاي اﯾﻦ ﮐﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ ﺑﻮد ‪:‬‬
‫‪https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fwww.wrox.com%2Fillegal value.htm%23start‬‬
‫‪http://www.wrox.com/illegal value.htm#start‬‬

‫آﺧﺮﯾﻦ ﺗﺎﺑﻌﯽ ﮐﻪ ﺑﻪ ﻧﻈﺮ ﻗﺪرﺗﻨﻤﻨﺪ ﻣﯽ آﯾﺪ )(‪ eval‬اﺳﺖ ‪ .‬اﯾﻦ ﺗﺎﺑﻊ ﮐﻪ ﺷﺒﯿﻪ ﺑﻪ ﻣﻔﺴﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﮐﺎر ﻣﯽ ﮐﻨﺪ آرﮔﻮﻣﺎﻧﯽ از ﻧﻮع رﺷﺘﻪ ﻣﯽ‬
‫ﮔﯿﺮد ﮐﻪ در واﻗﻊ ﯾﮏ ﺑﺮﻧﺎﻣﻪ ﺑﻪ زﺑﺎن ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺖ و اﯾﻦ ﺗﺎﺑﻊ آن را ﻫﻤﺎﻧﻨﺪ ﺳﺎﯾﺮ ﺑﺮﻧﺎﻣﻪ ﻫﺎ اﺟﺮا ﻣﯽ ﮐﻨﺪ ‪ .‬ﺑﺮاي ﻣﺜﺎل ‪:‬‬
‫;)”)’‪eval(“alert(‘hi‬‬
‫اﯾﻦ ﺗﮑﻪ ﮐﺪ در ﺣﻘﯿﻘﺖ ﻣﻌﺎدل دﺳﺘﻮر زﯾﺮ اﺳﺖ ‪:‬‬
‫;)”‪alert(“hi‬‬
‫ﻣﻮﻗﻌﯽ ﮐﻪ ﻣﻔﺴﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ اﯾﻦ ﺗﺎﺑﻊ ﻣﯽ رﺳﺪ آرﮔﻮﻣﺎن آن را ﺑﻪ ﻋﻨﻮان ﯾﮏ دﺳﺘﻮر ﺧﯿﻠﯽ ﺳﺎده ﺗﻔﺴﯿﺮ ﮐﺮده و اﺟﺮا ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫اﯾﻦ ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ اﺳﺖ ﮐﻪ ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ از داﺧﻞ آرﮔﻮﻣﺎن ﻫﺎي اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ ﺗﻤﺎم ﻣﺘﻐﯿﺮﻫﺎي ﺧﺎرج آن دﺳﺘﺮﺳﯽ داﺷﺘﻪ و از آن ﻫﺎ اﺳﺘﻔﺎده‬
‫ﮐﻨﯿﺪ ‪:‬‬
‫;”‪var msg = “hello world‬‬
‫;)”)‪eval(“alert(msg‬‬

‫ﻫﻤﭽﻨﯿﻦ ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ آرﮔﻮﻣﺎن ﺗﺎﺑﻊ )(‪ eval‬را ﯾﮏ ﺗﺎﺑﻊ ﺗﻌﺮﯾﻒ ﮐﺮده و ﺳﭙﺲ آن را ﺧﺎرج از ﺗﺎﯾﻊ )(‪ eval‬ﺻﺪا ﺑﺰﻧﯿﺪ ‪ .‬ﺑﺮاي ﻣﺜﺎل ‪:‬‬

‫;)”} ;)’‪eval(“function sayHi() { alert(‘hi‬‬

‫;)(‪sayHi‬‬
‫ﮐﺎر ﺑﺎ ﺗﺎرﯾﺦ و زﻣﺎن در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﯾﮑﯽ از وﯾﮋﮔﯽ ﻫﺎﯾﯽ ﮐﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ دارد ﺟﻤﻊ آوري اﻃﻼﻋﺎت از ﺳﯿﺴﺘﻢ ﮐﺎرﺑﺮ و ﻧﻤﺎﯾﺶ آﻧﻬﺎ در ﺻﻔﺤﺎت وب اﺳﺖ‪ .‬ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ‬
‫داﻧﯿﺪ ‪ HTML‬ﺑﻪ ﺗﻨﻬﺎﯾﯽ ﻗﺎدر ﺑﻪ اﻧﺠﺎم ﭼﻨﯿﻦ ﮐﺎري ﻧﯿﺴﺖ اﻣﺎ ﺑﺎ ﮐﻤﮏ زﺑﺎﻧﻬﺎي دﯾﮕﺮ ﺗﺤﺖ وب ﻣﺎﻧﻨﺪ ‪ ، Javascript‬ﻣﯽ ﺗﻮاﻧﺪ ﺗﺎ‬
‫ﺣﺪودي اﯾﻦ ﻣﺸﮑﻞ را ﺑﺮﻃﺮف ﮐﻨﺪ‪ .‬ﺷﺊ ﻫﺎﯾﯽ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ وﺟﻮد دارﻧﺪ ﮐﻪ ﺗﻮﺳﻂ ﻣﺘﺪﻫﺎي ﻣﺨﺘﻠﻒ‪ ،‬اﻃﻼﻋﺎت ﻣﻮرد ﻧﯿﺎز را از ﺳﯿﺴﺘﻢ‬
‫ﮔﺮﻓﺘﻪ و در اﺧﺘﯿﺎر ﮐﺎرﺑﺮان ﻗﺮار ﻣﯽ دﻫﻨﺪ‪ .‬ﯾﮑﯽ از اﯾﻦ ‪ object‬ﻫﺎ و ﺷﺊ ﻫﺎ ‪ Date ،‬ﻣﯽ ﺑﺎﺷﺪ ﮐﻪ ﺑﻪ ﮐﻤﮏ آن ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﺎرﯾﺦ و زﻣﺎن‬
‫ﺳﯿﺴﺘﻢ را ﻫﻨﮕﺎم اﺟﺮاي ﮐﺪ درﯾﺎﻓﺖ ﮐﻨﯿﻢ‪ ،‬ﺳﭙﺲ آﻧﺮا ﻧﻤﺎﯾﺶ دﻫﯿﻢ و ﯾﺎ اﯾﻨﮑﻪ در ﯾﮏ ﻣﺘﻐﯿﺮ ذﺧﯿﺮه ﮐﻨﯿﻢ ﺗﺎ در ﺻﻮرت ﻟﺰوم از آن ﺑﻬﺮه ﮔﯿﺮﯾﻢ‪.‬‬
‫ﺑﺮاي اﯾﺠﺎد ﺷﯽ اي از اﯾﻦ ﻧﻮع ﻣﯿﺘﻮان ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﮐﺮد ‪:‬‬
‫;)(‪var d = new Date‬‬
‫ﺷﯽ )(‪ Date‬ﺗﻌﺪاد ﻫﺰارم ﺛﺎﻧﯿﻪ ﻫﺎي ﮔﺬﺷﺘﻪ از ﺳﺎﻋﺖ ‪ 12:00:00‬روز ‪ 01/01/1970‬ﺗﺎ زﻣﺎن و ﺗﺎرﯾﺦ ﮐﻨﻮﻧﯽ را در ﺧﻮد ﻧﮕﻪ داري ﻣﯽ‬
‫ﮐﻨﺪ ‪ .‬اﯾﻦ ﺷﯽ داراي ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ valueOf‬ﻣﯽ ﺑﺎﺷﺪ ﮐﻪ اﯾﻦ ﻣﻘﺪار را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﻪ ﮐﺪ زﯾﺮ ﻧﮕﺎه ﮐﻨﯿﺪ ‪:‬‬
‫>"‪<script type="text/javascript‬‬
‫;)(‪var d=new Date‬‬
‫;))(‪document.write(d.valueOf‬‬
‫>‪</script‬‬
‫ﺣﺎﺻﻞ اﺟﺮاي ﮐﺪ ﻓﻮق ﻣﯽ ﺗﻮاﻧﺪ ﻋﺪدي ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺑﺎﺷﺪ ‪:‬‬
‫‪1269938333117‬‬

‫‪٢١‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﯾﻦ ﺷﯽء داراي ﻣﺘﺪ ﻫﺎﯾﯽ اﺳﺖ ﮐﻪ از آن ﻫﺎ ﺑﺮاي ﺑﺪﺳﺖ آوردن ﺟﺰﺋﯿﺎت ﺑﯿﺸﺘﺮي از ﺗﺎرﯾﺦ و زﻣﺎن اﺳﺘﻔﺎده ﻧﻤﻮد ‪ .‬ﺑﻌﻀﯽ از اﯾﻦ ﻣﺘﺪ ﻫﺎ و‬
‫ﺧﻮاص را در ﺟﺪول زﯾﺮ ﻣﺸﺎﻫﺪه ﻣﯽ ﮐﻨﯿﺪ ‪:‬‬
‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﻧﺎم ﻣﺘﺪ‬
‫روزي از ﻣﺎه را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﻣﻘﺪاري از ‪ 1‬ﺗﺎ ‪ 31‬ﺑﺎﺷﺪ ‪.‬‬ ‫)(‪getDate‬‬
‫ﻣﺎﻫﯽ از ﺳﺎل را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﻘﺪاري از ‪ 0‬ﺗﺎ ‪ 11‬ﻣﯽ ﺑﺎﺷﺪ‬ ‫)(‪getMonth‬‬
‫ﺳﺎل را در ﻗﺎﻟﺐ ‪ 4‬ﻋﺪد ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‬ ‫)(‪getFullYear‬‬
‫ﺳﺎﻋﺘﯽ از روز را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﻣﻘﺪاري از ‪ 0‬ﺗﺎ ‪ 23‬ﺑﺎﺷﺪ‬ ‫)(‪getHours‬‬
‫دﻗﯿﻘﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﻘﺪاري از ‪ 0‬ﺗﺎ ‪ 59‬اﺳﺖ ‪.‬‬ ‫)(‪getMinutes‬‬
‫ﺛﺎﻧﯿﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﻘﺪاري از ‪ 0‬ﺗﺎ ‪ 59‬اﺳﺖ‬ ‫)(‪getSeconds‬‬
‫روزي از ﻫﻔﺘﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﻣﻘﺪاري از ‪ 0‬ﺗﺎ ‪ 6‬ﺑﺎﺷﺪ ‪.‬‬
‫)(‪getDate‬‬
‫)‪ 6‬ﺑﻪ ﻣﻌﻨﯽ ‪(sunday‬‬
‫ﺗﻌﺪاد ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ ﻫﺎي ﮔﺬﺷﺘﻪ از ﺗﺎرﯾﺦ ‪ 1/1/1970‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‬ ‫)(‪getTime‬‬
‫ﺗﻌﺪاد ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ ﻫﺎي ﮔﺬﺷﺘﻪ از ﺗﺎرﯾﺦ ‪ 1/1/1970‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‬ ‫)(‪valueOf‬‬
‫رﺷﺘﻪ اي ﺣﺎوي اﻃﻼﻋﺎﺗﯽ ﻫﻤﭽﻮن ﻣﺨﻔﻒ ﻧﺎم روز ﺟﺎري ‪ ،‬ﻣﺎه ﺟﺎري و‬
‫)(‪toString‬‬
‫‪ ...‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫ﻋﻼوه ﺑﺮ ﻣﺘﺪ ﻫﺎي ﻓﻮق ‪ ،‬ﺷﯽ ء ‪ Date‬از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ getTimezoneOffset‬ﮐﻪ اﺧﺘﻼف ﺑﯿﻦ زﻣﺎن ﻣﺤﻠﯽ و زﻣﺎن واﺣﺪ ﺟﻬﺎﻧﯽ‬
‫راﺑﺮ ﺣﺴﺐ دﻗﯿﻘﻪ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﻧﯿﺰ ﭘﺸﺘﯿﺎﻧﯽ ﻣﯽ ﮐﻨﺪ ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﯾﻦ ﻣﺘﺪ ﻣﻘﺪار ‪ ٢١٠‬را ﺑﺮاي وﻗﺖ ﻣﺤﻠﯽ اﯾﺮان ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪) .‬ﮐﻪ‬
‫ﻫﻤﺎن اﺧﺘﻼف ‪ ٣:٣٠‬دﻗﯿﻘﻪ اي ﺳﺎﻋﺖ ﺗﻬﺮان ﻧﺴﺒﺖ ﺑﻪ زﻣﺎن واﺣﺪ ﺟﻬﺎﻧﯽ اﺳﺖ ‪( .‬‬

‫)‪ : BOM (Browser Object Model‬ﻣﺪل ﺷﯽء ﮔﺮاي ﻣﺮورﮔﺮ‬

‫ﻣﺎ ﻧﻤﯽ ﺗﻮاﻧﯿﻢ ﺑﺪون ﺻﺤﺒﺖ درﺑﺎره ‪ BOM‬ﺑﺎ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﮐﺎر ﮐﻨﯿﻢ‪ BOM .‬اﺷﯿﺎﯾﯽ ﮐﻪ ﺑﺎ ﭘﻨﺠﺮه ي ﻣﺮورﮔﺮ ارﺗﺒﺎط و ﺗﻌﺎﻣﻞ ﻣﺴﺘﻘﯿﻢ‬
‫دارﻧﺪ را ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ ‪ ,‬ﻣﺎﻧﻨﺪ ﺷﮑﻞ زﯾﺮ ‪:‬‬

‫‪ ‬ﺗﻮﺟﻪ ‪ BOM :‬ﻣﺠﻤﻮﻋﻪ اي از اﺷﯿﺎي ﻣﺮﺗﺒﻂ ﺑﺎ ﻫﻢ را ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ‪.‬‬

‫‪٢٢‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺷﯽء ‪: window‬‬
‫ﺷﯽ ء ‪ Window‬ﺗﻤﺎﻣﯽ ﭘﻨﺠﺮه ﻫﺎي ﻣﺮورﮔﺮ را ﺷﺎﻣﻞ ﻣﯽ ﺷﻮد اﻣﺎ ﻧﻪ ﻟﺰوﻣﺂ ﻣﺤﺘﻮاﯾﯽ ﮐﻪ در آن ﻧﻤﺎﯾﺶ داده ﻣﯽ ﺷﻮد‪.‬‬
‫از اﯾﻦ ﺷﯽء ﺑﺮاي ﺟﺎﺑﺠﺎﯾﯽ ‪ ،‬ﺗﻐﯿﯿﺮ اﻧﺪازه و دﯾﮕﺮ اﺛﺮات ﺑﺮ روي ﭘﻨﺠﺮه ﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪.‬‬

‫دﺳﺘﮑﺎري ﭘﻨﺠﺮه ﻫﺎ ‪:‬‬

‫ﭼﻬﺎر ﻣﺘﺪ ﺑﺮاي دﺳﺘﮑﺎري ﭘﻨﺠﺮه ﻣﺮورﮔﺮ ﺑﺮاي ﺷﯽء ‪ Window‬وﺟﻮد دارد ‪:‬‬
‫‪: moveBy(dx,dy) (١‬‬
‫ﭘﻨﺠﺮه را ﻧﺴﺒﺖ ﺑﻪ ﻣﻮﻗﻌﯿﺖ ﮐﻨﻮﻧﯽ ﺑﻪ اﻧﺪازه ‪ x‬در ﺟﻬﺖ اﻓﻘﯽ و ﺑﻪ اﻧﺪازه ‪ y‬در ﺟﻬﺖ ﻋﻤﻮدي ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ‪ .‬ﻋﺪد ﻫﺎي‬
‫ﻣﻨﻔﯽ ﻫﻢ ﺑﺮاي ‪ x,y‬ﻣﺠﺎزﻧﺪ‪.‬‬
‫‪: moveTo(x,y) (٢‬‬
‫ﮔﻮﺷﻪ ﺑﺎﻻي ﭼﭗ ﻣﺮورﮔﺮ را ﺑﻪ ﻣﻮﻗﻌﯿﺖ ‪ x,y‬ﻣﯽ ﺑﺮد‪ .‬ﻣﻘﺎدﯾﺮ ﻣﻨﻔﯽ ﻧﯿﺰ ﻣﺠﺎز ﻫﺴﺘﻨﺪ‪.‬‬
‫‪: resizeBy(w,h) (٣‬‬
‫ﻋﺮض ﭘﻨﺠﺮه ﻣﺮورﮔﺮ را ﺑﻪ اﻧﺪازه ‪ w‬و ارﺗﻔﺎع آﻧﺮا ﺑﻪ اﻧﺪازه ‪ h‬ﻧﺴﺒﺖ ﺑﻪ ‪ size‬ﮐﻨﻮﻧﯽ ﺗﻐﯿﯿﺮ ﻣﯽ دﻫﺪ‪ .‬ﻣﻘﺎدﯾﺮ ﻣﻨﻔﯽ ﻧﯿﺰ‬
‫ﻣﺠﺎزﻧﺪ‪.‬‬
‫‪: resizeTo(w,h) (۴‬‬
‫ﻋﺮض ﻣﺮورﮔﺮ را ﺑﻪ ‪ w‬و ارﺗﻔﺎع آن را ﺑﻪ ‪ h‬ﺗﻐﯿﯿﺮ ﻣﯽ دﻫﺪ‪ .‬ﻣﻘﺎدﯾﺮ ﻣﻨﻔﯽ ﻣﺠﺎز ﻧﯿﺴﺘﻨﺪ ‪.‬‬

‫ﻣﺜﺎل ﻫﺎ ‪:‬‬
‫)‪window.moveBy(10, 20‬‬
‫‪ //‬ﭘﻨﺠﺮه را ﻧﺴﺒﺖ ﺑﻪ ﻣﮑﺎن ﻓﻌﻠﯽ ‪ 10px‬ﭘﯿﮑﺴﻞ ﺑﻪ ﺳﻤﺖ راﺳﺖ و ‪ 20px‬ﺑﻪ ﺳﻤﺖ ﭘﺎﯾﯿﻦ ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ ‪.‬‬

‫)‪window.resizeTo(150, 300‬‬
‫ﻋﺮض ﭘﻨﺠﺮه را ﺑﻪ ‪ 150px‬و ارﺗﻔﺎع آن را ﺑﻪ ‪ 300px‬ﺗﻐﯿﯿﺮ ﻣﯽ دﻫﺪ ‪.‬‬

‫)‪window.resizeBy(150, 0‬‬
‫ﻓﻘﻂ ‪ 150px‬ﺑﻪ ﻋﺮض ﮐﻨﻮﻧﯽ ﭘﻨﺠﺮه اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﺪ ‪.‬‬

‫)‪window.moveTo(0, 0‬‬
‫ﭘﻨﺠﺮه را ﺑﻪ ﮔﻮﺷﻪ ﺑﺎﻻ و ﺳﻤﺖ ﭼﭗ ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﻫﺪاﯾﺖ ﻣﯽ ﮐﻨﺪ ‪.‬‬

‫ﭘﯿﻤﺎﯾﺶ و ﺑﺎز ﮐﺮدن ﭘﻨﺠﺮه ﻫﺎي ﺟﺪﯾﺪ‬

‫ﺑﺮاي ﺑﺎز ﮐﺮدن ﭘﻨﺠﺮه ﻫﺎي ﺟﺪﯾﺪ ﺑﺎ اﺳﺘﻔﺎده از ﺟﺎوا اﺳﮑﺮﯾﭙﺖ از ﻣﺘﺪ )(‪ open‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ﮐﻪ ﭼﻬﺎر آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ‪:‬‬
‫آدرس ﺻﻔﺤﻪ‬ ‫‪.1‬‬
‫ﻧﺎم ﺻﻔﺤﻪ‬ ‫‪.2‬‬
‫رﺷﺘﻪ اي از وﯾﮋﮔﯽ ﻫﺎي‬ ‫‪.3‬‬
‫و ﯾﮏ ﻣﻘﺪار ‪Booelan‬‬ ‫‪.4‬‬
‫ﻋﻤﻮﻣﺂ ﻓﻘﻂ از ﺳﻪ آرﮔﻮﻣﺎن اول اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬اﮔﺮ ﭘﻨﺠﺮه اي از ﻗﺒﻞ ﺑﺎ ﻧﺎﻣﯽ ﮐﻪ ﺑﺮاي آرﮔﻮﻣﺎن دوم اﻧﺘﺨﺎب ﮐﺮده اﯾﺪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‬
‫ﺻﻔﺤﻪ در آن ﭘﻨﺠﺮه ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ ‪ ,‬در ﻏﯿﺮ اﯾﻦ ﺻﻮرت در ﭘﻨﺠﺮه اي ﺟﺪﯾﺪ ﺑﺎز ﻣﯽ ﺷﻮد‪.‬‬
‫اﮔﺮ آرﮔﻮﻣﺎن ﺳﻮم ﻣﺸﺨﺺ ﻧﺸﻮد ﭘﻨﺠﺮه ﺑﺎ ﺗﻨﻈﯿﻤﺎت ﭘﻨﺠﺮه اﺻﻠﯽ ﻣﺮورﮔﺮ ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
‫‪٢٣‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫وﯾﮋﮔﯽ ﻫﺎي آرﮔﻮﻣﺎن ﺳﻮم ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﭘﻨﺠﺮه ي ﺟﺪﯾﺪ ﭼﻪ ﺧﺼﻮﺻﯿﺎﺗﯽ داﺷﺘﻪ ﺑﺎﺷﺪ ﮐﻪ در زﯾﺮ ﺑﯿﺎن ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬
‫ﺧﺼﻮﺻﯿﺎت ﺑﺎ ) = ( ﻣﻘﺪار دﻫﯽ ﻣﯽ ﺷﻮد و ﺑﺎ ) ‪ ( ,‬از ﻫﻢ ﺟﺪا ﻣﯽ ﺷﻮد‪.‬‬

‫ﺑﺮﺧﯽ از ﺧﺼﻮﺻﯿﺎت ﻣﺠﺎز ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﻋﺒﺎرﺗﻨﺪ از ‪:‬‬

‫‪ : Left‬ﻓﺎﺻﻠﻪ از ﭼﭗ‬ ‫‪‬‬
‫‪ : Top‬ﻓﺎﺻﻠﻪ از ﺑﺎﻻ‬ ‫‪‬‬
‫‪ : Width‬ﻋﺮض ﭘﻨﺠﺮه‬ ‫‪‬‬
‫‪ : Height‬ارﺗﻔﺎع ﭘﻨﺠﺮه‬ ‫‪‬‬
‫)‪ : Resizable , (Yes,No‬آﯾﺎ ﭘﻨﺠﺮه ﻗﺎﺑﻞ ﺗﻐﯿﯿﺮ اﻧﺪازه ﺑﺎﺷﺪ ﯾﺎ ﺧﯿﺮ‬ ‫‪‬‬
‫)‪ scroll : Scrollable , (Yes,NO‬دار ﺑﻮدن ﯾﺎ ﻧﺒﻮدن‬ ‫‪‬‬
‫)‪ : Toolbar , (Yes,NO‬آﯾﺎ ﺷﺎﻣﻞ ﻧﻮار اﺑﺰار ﺑﺎﺷﺪ ‪.‬‬ ‫‪‬‬
‫)‪ : Status , (Yes,No‬آﯾﺎ ﻧﻮار وﺿﻌﺒﺖ داﺷﺘﻪ ﺑﺎﺷﺪ‬ ‫‪‬‬
‫)‪ : Location , (Yes,No‬آﯾﺎ ﻧﻮار آدرس داﺷﺘﻪ ﺑﺎﺷﺪ ‪.‬‬ ‫‪‬‬

‫‪ ‬در رﺷﺘﻪ اي از ﺧﺼﻮﺻﯿﺎت ﻧﺒﺎﯾﺪ ﻫﯿﭻ ﻓﻀﺎي ﺧﺎﻟﯽ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬
‫ﻣﺘﺪ ‪ Open‬ﺷﯽء اي از ﻧﻮع ‪ Window‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﺗﻤﺎم ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎﯾﯽ ﮐﻪ ﺷﯽء ‪ Window‬دارد را داراﺳﺖ‪.‬‬
‫ﺑﺮاي ﺑﺴﺘﻦ ﭘﻨﺠﺮه از ﻣﺘﺪ )(‪ close‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬اﯾﻦ ﻣﺘﺪ ﻓﻘﻂ ﻣﯽ ﺗﻮاﻧﺪ ﭘﻨﺠﺮه اي ﮐﻪ ﺗﻮﺳﻂ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺑﺎز ﺷﺪه اﺳﺖ را ﻣﺴﺘﻘﯿﻤﺎ‬
‫ﺑﺒﻨﺪد ﻧﻪ ﭘﻨﺠﺮه ي اﺻﻠﯽ‪.‬‬

‫ﭘﻨﺠﺮه ﻫﺎي ‪: System Dialog‬‬

‫ﺷﯽء ‪ Window‬ﭼﻨﺪﯾﻦ ﺗﺎﺑﻊ ﺑﺮاي ﻧﻤﺎﯾﺶ ﭘﯿﻐﺎم و ﮔﺮﻓﺘﻦ ﺟﻮاب از ﮐﺎرﺑﺮان را دارد‪.‬‬
‫‪ : alert() ‬اﯾﻦ ﺗﺎﺑﻊ ﯾﮏ آرﮔﻮﻣﺎن از ﻧﻮع ﻣﺘﻦ ﻣﯽ ﮔﯿﺮد و آن را در ﻗﺎﻟﺐ ﯾﮏ ﭘﻨﭽﺮه ﮐﻮﭼﮏ ﮐﻪ ﯾﮏ دﮐﻤﻪ ‪ Ok‬دارد ﻧﻤﺎﯾﺶ ﻣﯽ‬
‫دﻫﺪ ‪:‬‬
‫> "‪<scritp type="text/javascript‬‬
‫;)'‪alert('Hello world‬‬
‫>‪</script‬‬
‫از اﯾﻦ ﭘﻨﺠﺮه ﻣﻌﻤﻮﻵ ﺑﺮاي ﻧﻤﺎﯾﺶ ﯾﮏ ﭘﯿﻐﺎم ﺑﻪ ﺻﻮرت ﻫﺸﺪار اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬

‫‪ : confirm() ‬اﯾﻦ ﺗﺎﺑﻊ ﻫﻢ ﻣﺎﻧﻨﺪ ﺗﺎﺑﻊ ﺑﺎﻻﺳﺖ ‪ .‬ﺗﻨﻬﺎ ﺗﻔﺎوت اﯾﻦ دو وﺟﻮد ﯾﮏ دﮐﻤﻪ ‪ Cancel‬در ﭘﻨﺠﺮه ي ﺑﺎز ﺷﻮﻧﺪه اﺳﺖ ‪.‬‬

‫> "‪<scritp type="text/javascript‬‬

‫; )' ? ‪confirm('Are you sure‬‬
‫>‪</script‬‬

‫‪٢۴‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫در ﺻﻮرﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ ‪ Ok‬را ﺑﺰﻧﺪ ﻣﻘﺪار ‪ True‬و در ﺻﻮرت زدن دﮐﻤﻪ ي ‪ Cancel‬ﻣﻘﺪار ‪ False‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬

‫‪ : prompt() ‬ﭘﻨﺠﺮه ي اﯾﻦ ﻣﺘﺪ ﭼﻬﺎر ﻗﺴﻤﺖ دارد‪ .‬دﮐﻤﻪ ي ‪ , Ok‬دﮐﻤﻪ ي ‪ , Cancel‬ﯾﮏ ﻣﺘﻦ و ﯾﮏ ‪ text field‬ﺑﺮاي‬
‫وارد ﮐﺮدن ﯾﮏ رﺷﺘﻪ ﺗﻮﺳﻂ ﮐﺎرﺑﺮ ‪.‬‬
‫اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ‪:‬‬
‫‪ .1‬ﻋﻨﻮان ﺳﻮال ﯾﺎ ﻣﺘﻨﯽ ﮐﻪ ﺑﻪ ﮐﺎرﺑﺮ ﻧﺸﺎن داده ﻣﯽ ﺷﻮد ‪.‬‬
‫‪ .2‬ﻣﻘﺪار ﭘﯿﺶ ﻓﺮض ﺑﺮاي ‪Text field‬‬

‫> "‪<scritp type="text/javascript‬‬

‫;)'‪Prompt('what is your name','ali‬‬
‫>‪</script‬‬

‫در ﺻﻮرﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ ي ‪ Ok‬را ﺑﺰﻧﺪ ﺗﺎﺑﻊ ﻣﻘﺪار وارد ﺷﺪه در ‪ Text field‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ و در ﺻﻮرت زدن دﮐﻤﻪ ي ‪Cancel‬‬
‫ﻣﻘﺪار ‪ Null‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬

‫ﺧﺎﺻﯿﺖ ‪: statusbar‬‬
‫اﯾﻦ ﻗﺴﻤﺖ ﭘﻨﺠﺮه ﻓﺮآﯾﻨﺪ ﺑﺎرﮔﺰاري و ﭘﺎﯾﺎن ﺑﺎرﮔﺰاري را ﺑﻪ ﮐﺎرﺑﺮ ﻧﺸﺎن ﻣﯽ دﻫﺪ‪ .‬ﻫﺮ ﭼﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﻢ از دو ﺧﺎﺻﯿﺖ ﺑﻪ ﻧﺎم ﻫﺎي ‪ status‬و‬
‫‪ defaultStatus‬ﺑﺮاي ﺗﻐﯿﯿﺮ آن اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪.‬‬
‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﺣﺪس زدﯾﺪ از ﺧﺎﺻﯿﺖ ‪ Status‬ﺑﺮاي ﺗﻐﯿﯿﺮ ﻣﺘﻦ ‪ Statusbar‬ﺑﺮاي ﭼﻨﺪ ﻟﺤﻈﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد در ﺣﺎﻟﯽ ﮐﻪ از‬
‫‪ defaultstatus‬ﺑﺮاي ﺗﻐﯿﯿﺮ ‪ Statusbar‬ﺗﺎ زﻣﺎﻧﯽ ﮐﻪ ﮐﺎرﺑﺮ در ﺻﻔﺤﻪ ﻫﺴﺖ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬
‫ﺑﺮاي ﺗﻐﯿﯿﺮ ﻟﺤﻈﻪ اي ﻧﻮار وﺿﻌﯿﺖ ﻣﺜﻶ وﻗﺘﯽ ﮐﺎرﺑﺮ ‪ ،‬ﻣﺎوس را روي ﯾﮏ ﻟﯿﻨﮏ ﻗﺮار ﻣﯽ دﻫﺪ ﻣﯽ ﺗﻮان از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻧﻤﻮد ‪:‬‬

‫'‪<a href="books.htm" onmouseover="window.status='Information on Wrox books.‬‬

‫>‪">Books</a‬‬

‫‪٢۵‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﺟﺮاي ﻣﮑﺮر ﮐﺪ ﻫﺎ از ﻃﺮﯾﻖ ﻣﺘﺪﻫﺎي ‪ Timeouts‬و ‪: Intervals‬‬
‫از اﯾﻦ دو ﺗﺎﺑﻊ ﺑﺮاي اﺟﺮاي ﯾﮏ ﺗﮑﻪ ﮐﺪ ﺑﻌﺪ از ﺑﺎزه زﻣﺎﻧﯽ ﺧﺎﺻﯽ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬

‫‪ : setTimeouts‬ﮐﺪ ﮔﺮﻓﺘﻪ ﺷﺪه را ﭘﺲ از ﻋﺪدي ﺑﺮ ﺣﺴﺐ ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ اﺟﺮا ﻣﯽ ﮐﻨﺪ‪ .‬در ﺣﺎﻟﯽ ﮐﻪ ‪ Intervals‬ﮐﺪ‬ ‫‪o‬‬
‫ﮔﺮﻓﺘﻪ ﺷﺪه را ﻣﮑﺮرآ ﺑﻌﺪ از ﻣﺪﺗﯽ ﺑﺮ ﺣﺴﺐ ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ ﭼﻨﺪﯾﻦ ﺑﺎر ﺗﮑﺮار ﻣﯽ ﮐﻨﺪ‪ .‬اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ‪:‬‬
‫ﮐﺪي ﮐﻪ ﺑﺎﯾﺪ اﺟﺮا ﺷﻮد ‪.‬‬ ‫‪.1‬‬
‫ﻣﺪت زﻣﺎﻧﯽ ﮐﻪ ﺑﺎﯾﺪ ﺑﻌﺪ از آن ﮐﺪ اﺟﺮا ﺷﻮد ‪.‬‬ ‫‪.2‬‬

‫آرﮔﻮﻣﺎن اوﻟﯽ ﻫﻢ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﺻﻮرت ﯾﮏ رﺷﺘﻪ از ﮐﺪﻫﺎ و ﻫﻢ ﻧﺎم ﯾﮏ ﺗﺎﺑﻊ ﺑﺎﺷﺪ‪ .‬ﻫﺮ ﺳﻪ ﮐﺪ زﯾﺮ ﺑﻌﺪ از ﯾﮏ ﺛﺎﻧﯿﻪ ﯾﮏ ﭘﻨﺠﺮه ﻫﺸﺪار را‬
‫ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﻨﺪ ‪:‬‬
‫> "‪<scritp type="text/javascript‬‬
‫;)‪setTimeout("alert('Hello world!')", 1000‬‬
‫>‪</script‬‬

‫‪----------------------------------------------------------‬‬

‫> "‪<scritp type="text/javascript‬‬

‫;)‪setTimeout(function() { alert("Hello world!"); }, 1000‬‬
‫>‪</script‬‬

‫‪----------------------------------------------------------‬‬

‫> "‪<scritp type="text/javascript‬‬

‫{ )(‪function sayHelloWorld‬‬
‫;)"!‪alert("Hello world‬‬
‫}‬
‫;)‪setTimout(sayHelloWorld, 1000‬‬

‫>‪</script‬‬

‫ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از اﺟﺮاي ﺗﺎﺑﻊ )(‪ setTimeout‬از ﻣﺘﺪ )(‪ ClearTimeout‬ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪:‬‬
‫> "‪<scritp type="text/javascript‬‬
‫;)‪var iTimeoutId = setTimeout("alert('Hello world!')", 1000‬‬
‫;)‪clearTimeout(iTimeoutId‬‬
‫>‪</script‬‬

‫‪ : setIntervals o‬ﻣﺎﻧﻨﺪ ﺗﺎﺑﻊ ﻗﺒﻠﯽ اﺳﺖ ﺟﺰ اﯾﻨﮑﻪ ﮐﺪ ﮔﺮﻓﺘﻪ ﺷﺪه را ﺑﻌﺪ از ﮔﺬﺷﺖ ﺑﺎزه ي زﻣﺎﻧﯽ ﻣﺸﺨﺺ ﺗﮑﺮار ﻣﯽ ﮐﻨﺪ‪ .‬ﺑﺮاي‬
‫ﺟﻠﻮﮔﯿﺮي از اﺟﺮاي اﯾﻦ ﻣﺘﺪ ‪ ,‬از ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم ‪ ClearInterval‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪:‬‬

‫;)‪setInterval(“alert(‘Hello world!’) “, 1000‬‬

‫‪-----------------------------------------------------‬‬
‫;)‪setInterval(function() { alert(“Hello world!”); }, 1000‬‬
‫‪-----------------------------------------------------‬‬
‫{ )(‪function sayHelloWorld‬‬
‫;)”!‪alert(“Hello world‬‬
‫}‬
‫;)‪setInterval(sayHelloWorld, 1000‬‬

‫‪٢۶‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺷﯽ ء ‪: history‬‬
‫ﻣﻤﮑﻦ اﺳﺖ ﺑﺨﻮاﻫﯿﻢ ﺑﻪ ﺗﺎرﯾﺨﭽﻪ ي ﻣﺮورﮔﺮ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ‪ ,‬اﻟﺒﺘﻪ ﻫﯿﭻ راﻫﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ آدرس ﺻﻔﺤﺎت ﮐﻪ در ‪History‬‬
‫وﺟﻮد دارﻧﺪ ‪ ,‬ﻧﯿﺴﺖ‪ .‬ﺑﺮاي اﯾﻦ ﮐﺎر از ﻣﺘﺪﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽء ‪ History‬ﻣﺮﺑﻮط ﺑﻪ ﺷﯽء ‪ Window‬اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬

‫ﻣﺘﺪ )(‪ Go‬ﻓﻘﻂ ﯾﮏ ﭘﺎراﻣﺘﺮ ﻣﯽ ﮔﯿﺮد ‪ :‬ﺗﻌﺪاد ﺻﻔﺤﺎﺗﯽ ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ ﺟﻠﻮ ﯾﺎ ﺑﻪ ﻋﻘﺐ ﭘﯿﻤﺎﯾﺶ ﺷﻮﻧﺪ‪ .‬اﮔﺮ ﻋﺪد ﻣﻨﻔﯽ ﺑﺎﺷﺪ ﺑﻪ ﺻﻔﺤﺎت ﻗﺒﻞ و اﮔﺮ‬
‫ﻋﺪد ﻣﺜﺒﺖ ﺑﺎﺷﺪ ﺑﻪ ﺻﻔﺨﺎت ﺟﻠﻮ ﻣﯽ روﯾﻢ‪ .‬ﺑﺮاي ﻣﺜﺎل ﺟﻬﺖ رﻓﺘﻦ ﺑﻪ ﯾﮏ ﺻﻔﺤﻪ ﻋﻘﺐ از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬

‫;)‪window.history.go(-1‬‬
‫و ﺑﺮاي رﻓﺘﻦ ﺑﻪ ﺟﻠﻮ ‪:‬‬

‫;)‪window.history.go(+1‬‬

‫ﻫﻤﯿﭽﻨﯿﻦ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻣﺘﺪ ﻫﺎي )(‪ back‬و )(‪ forward‬ﺑﻪ ﺟﺎي ﮐﺪﻫﺎي ﺑﺎﻻ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪.‬‬

‫‪//go back one‬‬

‫;)(‪history.back‬‬
‫‪//go forward one‬‬
‫;)(‪history.forward‬‬
‫ﻫﻤﭽﻨﯿﻦ از ﺧﺎﺻﯿﺖ ‪ lenght‬ﺑﺮاي ﺗﻌﺪاد ﺻﻔﺤﺎت ﻣﻮﺟﻮد در ‪ history‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪:‬‬

‫;)"‪alert("There are currently " + history.length + " pages in history.‬‬

‫ﺷﯽء ‪: Document‬‬
‫اﯾﻦ ﺷﯽء ﮐﻪ ﺗﻨﻬﺎ ﺷﯽء ﻣﺸﺘﺮك ﺑﯿﻦ ﻣﺪل ﻫﺎي ﺷﯽءﮔﺮاي ‪ BOM‬و ‪ DOM‬اﺳﺖ‪ .‬و ﻧﯿﺰ داراي ﺧﺼﻮﺻﯿﺎﺗﯽ اﺳﺖ‪.‬‬
‫ﯾﮑﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي اﯾﻦ ﺷﯽء ‪ URL‬اﺳﺖ ﮐﻪ ﺑﺮاي ﺗﻨﻈﯿﻢ و دﺳﺘﺮﺳﯽ ﺑﻪ آدرس ﮐﻨﻮﻧﯽ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬

‫;"‪document.URL = "http://www.tavoosebehesht.ir/‬‬

‫ﻫﻤﭽﻨﯿﻦ اﯾﻦ ﺷﯽء داراي ﯾﮑﺴﺮي ﺧﺼﻮﺻﯿﺎت ﻣﺠﻤﻮﻋﻪ اي ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﻧﻮاع ﻋﻨﺎﺻﺮ داﺧﻞ ﺻﻔﺤﻪ ي ﺑﺎرﮔﺰاري ﺷﺪه اﺳﺖ‪.‬‬
‫ﺑﺮﺧﯽ از ﺧﺎﺻﯿﺖ ﻫﺎ ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ ‪:‬‬

‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﻣﺠﻤﻮﻋﻪ‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﻟﯿﻨﮏ ﻫﺎي ﺻﻔﺤﻪ‬ ‫‪anchors‬‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ‪ embed‬ﺻﻔﺤﻪ‬ ‫‪embeds‬‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻓﺮم ﻫﺎي ﺻﻔﺤﻪ‬ ‫‪forms‬‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ﻋﮑﺲ ﺻﻔﺤﻪ‬ ‫‪images‬‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻟﯿﻨﮏ ﻫﺎي ﺻﻔﺤﻪ‬ ‫‪links‬‬

‫‪٢٧‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﻫﺮ ﻣﺠﻤﻮﻋﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻮﺳﯿﻠﻪ ي ﻋﺪد ﯾﺎ ﻧﺎم ‪ index ،‬ﮔﺬاري ﺷﻮﻧﺪ‪ .‬ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﺑﻪ اوﻟﯿﻦ ﻋﻨﺼﺮ ﻋﮑﺲ‬
‫ﺻﻔﺤﻪ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ‪:‬‬
‫;]‪Document.images[0‬‬
‫‪Or‬‬
‫; ]'‪Document.images['image-name‬‬

‫ﺑﺎ اﯾﻦ روش ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻪ آدرس آن ﻫﺎ ﻫﻢ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ‪ ,‬ﺑﻪ ﺻﻮرت زﯾﺮ ‪:‬‬
‫‪document.images[0].src‬‬
‫از دﯾﮕﺮ ﻣﺘﺪﻫﺎي اﯾﻦ ﺷﯽء ﻣﯽ ﺗﻮان ﺑﻪ )(‪ Write‬و )(‪ Writeln‬ﺑﺮاي ﭼﺎپ ﯾﮏ ﻣﺘﻦ اﺷﺎره ﮐﺮد ‪.‬‬

‫ﺷﯽء ‪: location‬‬
‫ﯾﮑﯽ دﯾﮕﺮ از ﺷﯽء ﻫﺎ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ آدرس ﺻﻔﺤﻪ ﺟﺎري ‪ location ،‬اﺳﺖ‪ .‬ﻣﺎ ﺗﻮﺳﻂ ﺧﺎﺻﯿﺖ ‪ location.href‬ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺮاي‬
‫ﺗﻨﻈﯿﻢ ﯾﺎ ﺑﺪﺳﺖ آوردن ‪ URL‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪:‬‬
‫;"‪document.href= "http://www.tavoosebehesht.ir/‬‬

‫ﻣﺘﺪ )(‪ assign‬ﻫﻢ ﻫﻤﯿﻦ ﮐﺎر را ﻣﯽ ﮐﻨﺪ‪.‬‬

‫از ﻣﺘﺪ )(‪ reload‬ﺑﺮاي ﺑﺎرﮔﺰاري ﻣﺠﺪد ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﻌﯿﯿﻦ ﮐﻨﯿﻢ ﮐﻪ ﺑﺎرﮔﺰاري ﻣﺠﺪد از روي ‪ Cache‬ﯾﺎ‬
‫‪ Server‬ﺑﺎﺷﺪ‪ .‬اﯾﻦ ﮐﺎر ﺑﺎ ﯾﮑﯽ از آرﮔﻮﻣﺎن ‪ false‬ﺑﺮاي ﺑﺎرﮔﺰاري ﻣﺠﺪد از ‪ Catch‬و ‪ true‬ﺑﺮاي ﺑﺎرﮔﺰاري ﻣﺠﺪد از ‪ Server‬اﺳﺘﻔﺎده‬
‫ﻣﯽ ﺷﻮد‪.‬‬

‫ﺷﯽء ‪: Navigator‬‬
‫اﯾﻦ ﺷﯽء ﯾﮑﯽ از اﺷﯿﺎي ﻗﺪﯾﻤﯽ ﻣﺪل ﺷﯽءﮔﺮاي ‪ BOM‬اﺳﺖ‪.‬‬
‫از اﯾﻦ ﺷﯽء ﺑﺮاي دﺳﺘﺮﺳﯽ و ﺑﺪﺳﺖ آوردن اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﻧﻮع و ﻧﺴﺨﻪ ﻣﺮورﮔﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬ﺑﻌﻀﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي آن ﺑﻪ ﺷﺮح‬
‫زﯾﺮ اﺳﺖ ‪:‬‬
‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﺧﺎﺻﯿﺖ ﻫﺎ‬
‫رﺷﺘﻪ اي ﺣﺎوي ﮐﺪ رﺷﺘﻪ اي ﻣﺮورﮔﺮ‬ ‫‪appcodeName‬‬
‫ﻧﺎم ﻋﻤﻮﻣﯽ ﻣﺮورﮔﺮ‬ ‫‪appName‬‬
‫اﻃﻼﻋﺎت اﺿﺎﻓﯽ ﻣﺮورﮔﺮ‬ ‫‪appMinotVersion‬‬
‫ﻧﺴﺨﻪ ﻣﺮورﮔﺮ‬ ‫‪appVersion‬‬
‫ﻧﻮع زﺑﺎن ﻣﺮورﮔﺮ ﯾﺎ ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ‬ ‫‪browserLanguage‬‬
‫ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﻣﯿﮑﻨﺪ آﯾﺎ ﮐﻮﮐﯽ ﻫﺎ ﻓﻌﺎل ﻫﺴﺘﻨﺪ ﯾﺎ ﺧﯿﺮ‬ ‫‪cookieEnabled‬‬
‫ﮐﻼس ‪ cpu‬را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ‬ ‫‪cpuClass‬‬
‫ﻓﻌﺎل ﺑﻮدن ﺟﺎوا‬ ‫‪javaEnabled‬‬
‫زﺑﺎن ﻣﺮورﮔﺮ را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ‬ ‫‪Language‬‬
‫آراﯾﻪ اي از ‪ mimetype‬ﻫﺎي ﺛﺒﺖ ﺷﺪه در ﻣﺮورﮔﺮ‬ ‫‪mimeType‬‬
‫ﻧﻮع ‪ platform‬ي ﮐﻪ ﮐﺎﻣﭙﯿﻮﺗﺮ ﮐﺎرﺑﺮ ﺑﺮ روي آن ﻗﺮار دارد را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ‪.‬‬ ‫‪Platform‬‬
‫‪٢٨‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺷﯽ ء ‪: screen‬‬
‫از اﯾﻦ ﺷﯽ ء ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﻃﻼﻋﺎت ﻣﺮﺑﻮﻃﻪ ﺑﻪ ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﮐﺎرﺑﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬اﯾﻦ ﺷﯽ ء ﺷﺎﻣﻞ ﺧﻮاص زﯾﺮ اﺳﺖ ‪:‬‬

‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﺧﺎﺻﯿﺖ‬
‫ارﺗﻔﺎع ﻗﺎﺑﻞ دﺳﺘﺮس از وﯾﻨﺪوز‬ ‫‪availHeight‬‬
‫ﻋﺮض ﻗﺎﺑﻞ دﺳﺘﺮس از وﯾﻨﺪوز‬ ‫‪availWidth‬‬
‫ﺗﻌﺪاد ﺑﯿﺖ ﻫﺎ ﺑﺮاي ﻧﻤﺎﯾﺶ رﻧﮓ ﻫﺎ‬ ‫‪colorDepth‬‬
‫ارﺗﻔﺎع ﺻﻔﺤﻪ‬ ‫‪height‬‬
‫ﻋﺮض ﺻﻔﺤﻪ‬ ‫‪width‬‬

‫از دو ﺧﺎﺻﯿﺖ اول ﻣﯽ ﺗﻮان ﺑﺮاي ﺑﺪﺳﺖ آوردن ﺳﺎﯾﺰ ﺟﺪﯾﺪ ﭘﻨﺠﺮه اﺳﺘﻔﺎده ﻧﻤﻮد ‪ .‬ﺑﻪ ﻃﻮر ﻣﺜﺎل ﺑﺮاي ‪ fullscreen‬ﮐﺮدن ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ‬
‫ﻣﯽ ﺗﻮان از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻧﻤﻮد ‪:‬‬
‫;)‪Window.MoveTo(0,0‬‬
‫;)‪Window.resizeTo(screen.availWidth,screen.availHegiht‬‬

‫‪) DOM BASIC‬اﺳﺎس ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ(‬

‫ﻣﺪل ﺷﯽ ﮔﺮاي ‪ DOM‬ﺑﻪ ﻃﺮاﺣﺎن وب اﻣﮑﺎن دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ ﯾﮏ ﺻﻔﺤﻪ ‪ HTML‬را ﻣﯽ دﻫﺪ ‪ .‬اﯾﻦ ﻣﺪل ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد‬
‫در ﯾﮏ ﺻﻔﺤﻪ ‪ HTML‬را ﺑﻪ ﺻﻮرت درﺧﺘﯽ از ﮔﺮه ﻫﺎ ﺗﺮﺳﯿﻢ ﻣﯽ ﮐﻨﺪ ﺑﻪ ﺷﮑﻞ زﯾﺮ ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>DOMinating JavaScript</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>DOMinating JavaScript</h1‬‬
‫‪<p>If you need some help with your JavaScript, you might like to read articles‬‬
‫‪from <a href=http://www.danwebb.net/ rel="external">DanWebb</a>,‬‬
‫>‪<a href="http://www.quirksmode.org/" rel="external">PPK</a‬‬
‫‪and‬‬
‫‪<a href="http://adactio.com/" rel="external">Jeremy Keith</a>.‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫اﯾﻦ ﮐﺪ را ﻣﯽ ﺗﻮان در ﻗﺎﻟﺐ درﺧﺖ زﯾﺮ ﻧﻤﺎﯾﺶ داد ‪:‬‬

‫‪٢٩‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪www.SoftGozar.Com‬‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ ﺑﯿﻨﯿﺪ ﻣﯽ ﺗﻮان ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ را در ﻗﺎﻟﺐ ﯾﮏ ‪) node‬ﮔﺮه( ﻧﻤﺎﯾﺶ داده ﻣﯽ ﺷﻮد ‪ .‬اﻣﺎ ﻫﻤﯿﺸﻪ در‬
‫‪ DOM‬ﮔﺮﻫﯽ وﯾﮋه ﺑﻪ ﻧﺎم ‪ document‬وﺟﻮد دارد ﮐﻪ در ﺑﺎﻻﺗﺮﯾﻦ ﺳﻄﺢ درﺧﺖ ﻗﺮار ﮔﺮﻓﺘﻪ و ﺳﺎﯾﺮ ﮔﺮه ﻫﺎ را ﺷﺎﻣﻞ ﻣﯽ ﺷﻮد ‪ .‬ﺑﺎ اﯾﻦ‬
‫ﻓﺮض درﺧﺖ ﻓﻮق ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺗﺒﺪﯾﻞ ﺧﻮاﻫﺪ ﺷﺪ ‪:‬‬

‫در درﺧﺖ ﺑﺎﻻ ﻫﺮ ﻣﺴﺘﻄﯿﻞ ﺑﻪ ﻋﻨﻮان ﯾﮏ ﮔﺮه )‪ (node‬ﻣﺤﺴﻮب ﻣﯽ ﺷﻮد ‪ .‬ﮔﺮه ﻫﺎ اﻧﻮاع ﻣﺨﺘﻠﻔﯽ دارﻧﺪ ﮐﻪ ﺑﻌﻀﯽ از آن ﻫﺎ ﺑﻪ ﺷﺮح زﯾﺮ‬
‫اﺳﺖ ‪:‬‬
‫‪ : Document‬ﺑﺎﻻﺗﺮﯾﻦ ﮔﺮﻫﯽ ﮐﻪ ﻫﻤﻪ ﮔﺮه ﻫﺎي دﯾﮕﺮ ﺑﻪ آن ﻣﺘﺼﻞ ﻫﺴﺘﻨﺪ )ﻓﺮزﻧﺪ آن ﻫﺴﺘﻨﺪ‪ (.‬ﺑﻪ اﯾﻦ ﻧﻮع ﮔﺮه ‪document ،‬‬
‫‪) Node‬ﮔﺮه ﺳﻨﺪ( ﮔﻔﺘﻪ ﻣﯽ ﺷﻮد ‪.‬‬
‫‪ : Element‬ﮔﺮﻫﯽ ﮐﻪ ﺷﺎﻣﻞ ﯾﮏ ﻋﻨﺼﺮ از ﺻﻔﺤﻪ ﺑﺎﺷﺪ ‪ .‬اﯾﻦ ﮔﺮه ﺷﺎﻣﻞ ﯾﮏ ﺗﮓ آﻏﺎزي و ﯾﮏ ﺗﮓ ﭘﺎﯾﺎﻧﯽ ﻣﺎﻧﻨﺪ >‪ <tag></tag‬ﯾﺎ‬
‫>‪ <tag /‬اﺳﺖ ‪ .‬اﯾﻦ ﻧﻮع ﮔﺮه ﺗﻨﻬﺎ ﻧﻮﻋﯽ اﺳﺖ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺷﺎﻣﻞ ﻓﺮزﻧﺪان از اﻧﻮاع دﯾﮕﺮ ﺑﺎﺷﺪ ‪ .‬ﺑﻪ اﯾﻦ ﮔﺮه ﻫﺎ ‪) element Node ،‬ﮔﺮه‬
‫ﻋﻨﺼﺮي( ﮔﻔﺘﻪ ﻣﯽ ﺷﻮد ‪.‬‬
‫‪ : Text‬اﯾﻦ ﻧﻮع ﮔﺮه ﻫﺎ ﺑﻪ ﻣﺘﻦ داﺧﻞ ﯾﮏ ﺗﮓ آﻏﺎزي و ﺗﮓ ﭘﺎﯾﺎﻧﯽ اﺷﺎره دارﻧﺪ ‪ .‬اﯾﻦ ﻧﻮع ﮔﺮه ﻫﺎ ﻫﻢ ﻧﻤﯽ ﺗﻮاﻧﻨﺪ ﻓﺮزﻧﺪ داﺷﺘﻪ ﺑﺎﺷﻨﺪ ‪ .‬ﺑﻪ‬
‫اﯾﻦ ﻧﻮع ﮔﺮه ﻫﺎ ‪) text Node ،‬ﮔﺮه ﻣﺘﻨﯽ ﻣﯽ ﮔﻮﯾﻨﺪ‪ . (.‬اﮔﺮ ﮔﺮه ﻫﺎي ﻣﺘﻨﯽ را ﻫﻢ ﺑﻪ ﻣﺜﺎﻟﯽ ﮐﻪ ﺑﺮرﺳﯽ ﮐﺮدﯾﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ درﺧﺖ ﻣﺎ ﺑﻪ‬
‫ﺷﮑﻞ زﯾﺮ ﺗﺒﺪﯾﻞ ﺧﻮاﻫﺪ ﺷﺪ ‪:‬‬

‫‪٣٠‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫‪ : Attr‬ﮔﺮﻫﯽ ﮐﻪ ﺑﻪ ﯾﮏ ﺻﻔﺖ از ﯾﮏ ﻋﻨﺼﺮ اﺷﺎره ﻣﯽ ﮐﻨﺪ و ﻓﺎﻗﺪ ﻓﺮزﻧﺪ ﻣﯽ ﺑﺎﺷﺪ ‪ .‬ﺑﻪ اﯾﻦ ﻧﻮع ﮔﺮه ﻫﺎ ‪) attribute Node ،‬ﮔﺮه‬
‫ﺻﻔﺘﯽ( ﮔﻔﺘﻪ ﻣﯽ ﺷﻮد ‪ .‬در درﺧﺖ ‪ DOM‬ﻣﻌﻤﻮﻻ اﯾﻦ ﮔﺮه ﻫﺎ را ﺑﻪ ﺻﻮرت داﯾﺮه اي و ﻣﺘﺼﻞ ﺑﻪ ﮔﺮه ﻫﺎي ﻋﻨﺼﺮي ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﻨﺪ ‪ .‬ﺑﻪ‬
‫ﻋﻨﻮان ﻣﺜﺎل ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ ﻟﯿﻨﮑﯽ ﮐﻪ در ﻣﺜﺎل ﺑﺎﻻ ﻣﺸﺎﻫﺪه ﻣﯽ ﺷﻮد داراي ﺻﻔﺖ ﻫﺎي ‪ href‬و ‪ rel‬ﻫﺴﺘﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮان آن ﻫﺎ را ﺑﻪ‬
‫ﺻﻮرت زﯾﺮ ﻧﻤﺎﯾﺶ داد ‪:‬‬

‫‪ : Comment‬ﺑﻪ ﮔﺮه ﻫﺎي ﺗﻮﺿﯿﺤﯽ اﺷﺎره ﻣﯽ ﮐﻨﺪ و ﻓﺎﻗﺪ ﻓﺮزﻧﺪ اﺳﺖ ‪) .‬در واﻗﻊ ﺑﻪ ﺗﮓ ‪ comment‬ﺻﻔﺤﻪ اﺷﺎره ﻣﯽ ﮐﻨﺪ ‪(.‬‬
‫ﻏﺎﻟﺒﺎ ﮔﺮﻫﯽ اﺻﻠﯽ ﺑﻪ ﻋﻨﻮان راس اﯾﻦ درﺧﺖ وﺟﻮد دارد ﮐﻪ ﻫﻤﺎن ‪ document‬اﺳﺖ ‪.‬‬
‫ﮔﺮه ﻫﺎ از ﻧﻈﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻋﻨﻮان ﯾﮏ ﺷﯽ ء در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد ﮐﻪ اﯾﻦ اﺷﯿﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ ﺧﺎﺻﯿﺖ ﻫﺎ و ﻣﺘﺪ ﻫﺎﯾﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ ‪.‬‬
‫ﺑﻌﻀﯽ از آن ﻫﺎ ﺑﻪ ﺷﺮح زﯾﺮ ﻫﺴﺘﻨﺪ ‪:‬‬
‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﻧﻮع ‪ /‬ﻧﻮع ﺑﺎزﮔﺸﺘﯽ‬ ‫ﺧﺎﺻﯿﺖ ‪ /‬ﻣﺘﺪ‬

‫ﻧﺎم ﮔﺮه را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪ .‬اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﺴﺘﮕﯽ ﺑﻪ ﻧﻮع ﮔﺮه دارد ‪.‬‬ ‫‪String‬‬ ‫‪nodeName‬‬

‫ﻣﻘﺪار ﮔﺮه را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪ .‬اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﺴﺘﮕﯽ ﺑﻪ ﻧﻮع ﮔﺮه دارد ‪.‬‬ ‫‪String‬‬ ‫‪nodeValue‬‬

‫ﯾﮑﯽ از اﻧﻮع ﮔﺮه را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬ ‫‪Number‬‬ ‫‪nodeType‬‬

‫اﺷﺎره ﺑﻪ ﺷﯽ ‪ document‬ي ﮐﻪ ﮔﺮه ﺟﺰﺋﯽ از آن اﺳﺖ دارد‬ ‫‪Document‬‬ ‫‪ownerDocument‬‬

‫اﺷﺎره ﺑﻪ اوﻟﯿﻦ ﮔﺮه از ﻟﯿﺴﺖ ﮔﺮه ﻫﺎ دارد ‪.‬‬ ‫‪Node‬‬ ‫‪firstChild‬‬

‫اﺷﺎره ﺑﻪ آﺧﺮﯾﻦ ﮔﺮه از ﻟﯿﺴﺖ ﮔﺮه ﻫﺎ دارد ‪.‬‬ ‫‪Node‬‬ ‫‪lastChild‬‬

‫ﻟﯿﺴﺖ )آراﯾﻪ( اي از ﺗﻤﺎم ﮔﺮه ﻫﺎي داﺧﻞ ﯾﮏ ﮔﺮه‬ ‫‪NodeList‬‬ ‫‪childNodes‬‬

‫اﺷﺎره ﺑﻪ ﮔﺮه ﻫﻤﺰاد )ﺑﺮادر( ﻗﺒﻠﯽ دارد ‪ .‬اﮔﺮ ﻫﻤﺰاد ﻗﺒﻠﯽ وﺟﻮد ﻧﺪاﺷﺖ‬
‫‪Node‬‬ ‫‪previousSibling‬‬
‫ﺑﺎﺷﺪ ﻣﻘﺪار ‪ null‬را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ ‪.‬‬
‫اﺷﺎره ﺑﻪ ﮔﺮه ﻫﻤﺰاد )ﺑﺮادر( ﺑﻌﺪي دارد ‪ .‬اﮔﺮ ﻫﻤﺰاد ﺑﻌﺪي وﺟﻮد‬
‫‪Node‬‬ ‫‪nextSibling‬‬
‫ﻧﺪاﺷﺖ ﺑﺎﺷﺪ ﻣﻘﺪار ‪ null‬را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ ‪.‬‬
‫در ﺻﻮرﺗﯽ ﮐﻪ آراﯾﻪ ‪ childNodes‬داراي ﯾﮏ ﯾﺎ ﺑﯿﺸﺘﺮ از ﯾﮏ‬
‫‪Boolean‬‬ ‫)(‪hasChildNodes‬‬
‫ﻋﻀﻮ )ﮔﺮه( ﺑﺎﺷﺪ ‪ True‬را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ‬
‫آرﮔﻮﻣﺎن ‪ node‬را ﺑﻪ اﻧﺘﻬﺎي آراﯾﻪ ‪ childNodes‬اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪Node‬‬ ‫)‪appendChild(node‬‬

‫آرﮔﻮﻣﺎن ‪ node‬را از اﻧﺘﻬﺎي آراﯾﻪ ‪ childNodes‬ﺣﺬف ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪Node‬‬ ‫)‪removeChild(node‬‬

‫در آراﯾﻪ ‪ oldnode ، childNodes‬را ﺑﺎ ‪ newnode‬ﺟﺎﺑﺠﺎ‬
‫‪Node‬‬ ‫)‪replaceChild (newnode, oldnode‬‬
‫ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫در آراﯾﻪ ‪ newnode ، childNodes‬را ﻗﺒﻞ از ‪refnode‬‬
‫‪Node‬‬ ‫)‪insertBefore (newnode, refnode‬‬
‫ﻗﺮار ﻣﯽ دﻫﺪ ‪.‬‬

‫‪٣١‬‬
‫ اﺣﻤﺪ ﺑﺎدﭘﯽ‬: ‫ﻧﻮﯾﺴﻨﺪه‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
: DOM ‫اﺳﺘﻔﺎده از‬
: ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﮔﺮه ﻫﺎ‬
: ‫ﺗﮑﻪ ﮐﺪ زﯾﺮ را در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ‬
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn’t this exciting?</p>
<p>You’re learning to use the DOM!</p>
</body>
</html>
‫ اﺳﺖ‬document ‫ ﮐﻪ ﯾﮑﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ ء‬documentElement ‫ ﻣﯽ ﺗﻮان از‬HTML ‫اوﻻ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺼﺮ‬
: ‫ ﺑﻪ ﺻﻮرت زﯾﺮ‬. ‫اﺳﺘﻔﺎده ﮐﻨﯿﻢ‬
var oHtml = document.documentElement ;
: ‫ ﺑﻪ ﺻﻮرت زﯾﺮ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ‬body ‫ و‬head ‫ﺣﺎل ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ ﻣﺘﻐﯿﺮ ﺑﻪ ﻋﻨﺎﺻﺮ‬

var oHead = oHtml.firstChild;

var oBody = oHtml.lastChild;

: ‫راه دﯾﮕﺮ ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺖ‬

var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
: ‫ﺑﺮاي ﺑﺪﺳﺖ آوردن ﺗﻌﺪاد ﻓﺮزﻧﺪان ﯾﮏ ﮔﺮه‬

alert(oHtml.childNodes.length); //outputs “2”

: ‫ ﺑﺮاي دﺳﺘﺮﺳﯽ ﻧﯿﺰ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‬item() ‫ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻣﺘﺪي ﻣﻮﺳﻮم ﺑﻪ‬
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);

. ‫ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ‬body ‫ را ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺼﺮ‬document.body ‫ ﻫﻤﭽﻨﯿﻦ از دﺳﺘﻮر‬DOM

var oBody = document.body;

: ‫ را ﺑﻪ ﺻﻮرت زﯾﺮ ﻧﺸﺎن دﻫﯿﻢ‬oHtml ‫ و‬oBody ، oHead ‫ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺻﺤﺖ راﺑﻄﻪ ﻫﺎي ﺳﻪ ﻣﺘﻐﯿﺮ‬

alert(oHead.parentNode == oHtml); //outputs “true”

alert(oBody.parentNode == oHtml); //outputs “true”
alert(oBody.previousSibling == oHead); //outputs “true”
alert(oHead.nextSibling == oBody); //outputs “true”
alert(oHead.ownerDocument == document); //outputs “true”

٣٢
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺻﻔﺎت ﻋﻨﺎﺻﺮ‪:‬‬
‫‪ DOM‬ﺑﺮاي دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري ﺻﻔﺎت ﯾﮏ ﻋﻨﺼﺮ ﺳﻪ ﻣﺘﺪ ﺗﻌﺮﯾﻒ ﮐﺮده اﺳﺖ ‪:‬‬

‫)‪ : getAttribute(name‬ﻣﻘﺪار ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم ‪ name‬را از ﻋﻨﺼﺮي ﺧﺎص ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬

‫)‪ : setAttribute(name,new Value‬ﻣﻘﺪار ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم ‪ name‬را ﺑﺮاﺑﺮ ‪ new Value‬ﻗﺮار ﻣﯽ دﻫﺪ ‪.‬‬
‫)‪ : removeAttribute(name‬ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم ‪ name‬را از ﻋﻨﺼﺮي ﻣﺸﺨﺺ ﺣﺬف ﻣﯽ ﮐﻨﺪ ‪.‬‬

‫اﯾﻦ ﻣﺘﺪ ﻫﺎ ﺑﺮاي دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري ﻣﺴﺘﻘﯿﻢ ﺻﻔﺖ ﻫﺎي ﯾﮏ ﻋﻨﺼﺮ ﺑﺴﯿﺎر ﻣﻨﺎﺳﺐ اﻧﺪ ‪ .‬ﺑﻨﺎﺑﺮاﯾﻦ ﺑﺮاي ﺑﻪ دﺳﺖ آوردن ﻣﻘﺪار ﺻﻔﺖ ‪ID‬‬
‫ﺗﮕﯽ ﻣﺸﺨﺺ ﻣﯽ ﺗﻮان ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻧﻤﻮد ‪:‬‬
‫;)”‪var sId = oP.getAttribute(“id‬‬

‫و ﺑﺮاي ﺗﻐﯿﯿﺮ ﻣﻘﺪار ﺻﻔﺖ ‪ Id‬ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬
‫;)”‪oP.setAttribute(“id”, “newId‬‬

‫دﺳﺘﺮﺳﯽ ﺑﻪ ﮔﺮه ﻫﺎي ﺧﺎص ‪:‬‬

‫ﻣﺎ ﺗﺎ اﯾﻨﺠﺎ ﺑﺎ دﺳﺘﺮﺳﯽ ﺑﻪ ﮔﺮه ﻫﺎي ﻓﺮزﻧﺪ و ﭘﺪري آﺷﻨﺎ ﺷﺪﯾﻢ ‪ .‬اﻣﺎ اﮔﺮ ﺑﺨﻮاﻫﯿﻢ ﺑﻪ ﯾﮏ ﮔﺮه ﺧﺎص ‪ ،‬آن ﻫﻢ در ﻋﻤﻖ ﯾﮏ درﺧﺖ دﺳﺘﺮﺳﯽ‬
‫داﺷﺘﻪ ﺑﺎﺷﯿﻢ ﭼﻪ ؟ ﺑﺮاي آﺳﺎﻧﯽ اﯾﻦ ﮐﺎر ‪ DOM ،‬ﭼﻨﺪﯾﻦ ﻣﺘﺪ ﺑﺮاي دﺳﺘﺮﺳﯽ ﻣﺴﺘﻘﯿﻢ ﺑﻪ ‪ node‬ﻫﺎ ﻓﺮاﻫﻢ آورده اﺳﺖ ‪.‬‬

‫)(‪: getElementsByTagName‬‬
‫از اﯾﻦ ﻣﺘﺪ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻟﯿﺴﺘﯽ از ﻋﻨﺎﺻﺮ ﺧﺎص اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬
‫;)”‪var oImgs = document.getElementsByTagName(“img‬‬

‫دﺳﺘﻮر ﻓﻮق ﻟﯿﺴﺘﯽ از ﺗﻤﺎم ﻋﻨﺎﺻﺮ ‪ img‬ﺻﻔﺤﻪ را در ‪ oImgs‬ذﺧﯿﺮه ﻣﯽ ﮐﻨﺪ ‪.‬‬

‫ﻓﺮض ﮐﻨﯿﺪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﺑﻪ اوﻟﯿﻦ ﻋﻨﺼﺮ ﻋﮑﺲ اوﻟﯿﻦ ﭘﺎراﮔﺮاف ﺻﻔﺤﻪ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ‪:‬‬

‫;)”‪var oPs = document.getElementsByTagname(“p‬‬

‫;)”‪var oImgsInP = oPs[0].getElementsByTagName(“img‬‬

‫ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ از دﺳﺘﻮر زﯾﺮ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪:‬‬

‫;)”*“(‪var oAllElements = document.getElementsByTagName‬‬

‫)(‪: getElementsByName‬‬
‫‪ DOM‬ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮي ﮐﻪ ﺻﻔﺖ ‪ name‬آﻧﻬﺎ ﺑﺮاﺑﺮ ﺑﺎ ﻣﻘﺪاري ﺧﺎص اﺳﺖ از اﯾﻦ ﻣﺘﺪ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ ‪ .‬ﺑﻪ ﻣﺜﺎل زﯾﺮ ﺗﻮﺟﻪ‬
‫ﮐﻨﯿﺪ ‪:‬‬

‫‪٣٣‬‬
‫ اﺣﻤﺪ ﺑﺎدﭘﯽ‬: ‫ﻧﻮﯾﺴﻨﺪه‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<form method=”post” action=”dosomething.php”>
<fieldset>
<legend>What color do you like?</legend>
<input type=”radio” name=”radColor” value=”red” /> Red<br />
<input type=”radio” name=”radColor” value=”green” /> Green<br />
<input type=”radio” name=”radColor” value=”blue” /> Blue<br />
</fieldset>
<input type=”submit” value=”Submit” />
</form>
</body>
</html>
‫ اﻣﺎ ﻣﺎ ﻣﯽ ﺧﻮاﻫﯿﻢ ﻓﻘﻂ ﻣﻘﺪار‬. ‫ ﻫﺎ اﺳﻢ ﯾﮑﺴﺎﻧﯽ دارﻧﺪ‬radiobutton . ‫اﯾﻦ ﺻﻔﺤﻪ رﻧﮓ ﻣﻮرد ﻋﻼﻗﻪ ﮐﺎرﺑﺮ را ﺳﻮال ﻣﯽ ﮐﻨﺪ‬
. ‫ ﻣﯽ ﺗﻮان از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻧﻤﻮد‬radiobutton ‫ ﺑﺮاي اﯾﺠﺎد ارﺟﺎﻋﯽ ﺑﻪ ﻋﻨﺎﺻﺮ‬. ‫ ي ﮐﻪ اﻧﺘﺨﺎب ﺷﺪه اﺳﺖ را ﭘﯿﺪا ﮐﻨﯿﻢ‬radiobutton

var oRadios = document.getElementsByName(“radColor”);

: ‫ ﻫﺎ ﺑﻪ روش زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﺪ‬radiobutton ‫ﺣﺎل ﻣﯽ ﺗﻮاﻧﯿﺪ از ﻫﻤﺎن روش ﻗﺒﻠﯽ ﺑﺮاي ﺑﻪ دﺳﺖ آوردن ﻣﻘﺪار ﻫﺮ از‬

alert(oRadios[0].getAttribute(“value”)); //outputs “red”

: getElementById()
‫ ﺑﺎﯾﺪ ﯾﮑﺘﺎ ﺑﺎﺷﺪ ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ‬id ‫ ﻣﯽ داﻧﯿﻢ ﮐﻪ ﺧﺎﺻﯿﺖ‬. ‫ آﻧﻬﺎ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‬id ‫از اﯾﻦ ﻣﺘﺪ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ ﺑﻪ وﺳﯿﻠﻪ ﺧﺎﺻﯿﺖ‬
‫ اﯾﻦ ﺳﺮﯾﻌﺘﺮﯾﻦ و راﯾﺠﺘﺮﯾﻦ راه ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺼﺮي ﺧﺎص از‬. ‫ ﯾﮑﺴﺎﻧﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ‬id ‫ﻫﯿﭻ دو ﻋﻨﺼﺮي ﻧﻤﯽ ﺗﻮاﻧﻨﺪ داﺧﻞ ﯾﮏ ﺻﻔﺤﻪ‬
: ‫ ﺑﻪ ﮐﺪ زﯾﺮ ﻧﮕﺎه ﮐﻨﯿﺪ‬. ‫ﺻﻔﺤﻪ اﺳﺖ‬
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<div id=”div1”>This is my first layer</div>
</body>
</html>
‫ ﺑﺨﻮاﻫﯿﻢ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‬div1 ‫ اﯾﻦ ﺻﻔﺤﻪ ﺑﺎ ﺷﻨﺎﺳﻪ‬div ‫ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺼﺮ‬getElementsByTagName() ‫اﮔﺮ ﻣﺎ از ﻣﺘﺪ‬
: ‫ﺑﺎﯾﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﻢ‬
var oDivs = document.getElementsByTagName(“div”);
var oDiv1 = null;
for (var i=0; i < oDivs.length; i++){
if (oDivs[i].getAttribute(“id”) == “div1”) {
oDiv1 = oDivs[i];
break;
}
}
: ‫ اﻧﺠﺎم دﻫﯿﻢ‬getElementById() ‫اﻣﺎ ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﻫﻤﯿﻦ ﮐﺎر را ﺑﻪ ﺻﻮرت زﯾﺮ و ﺑﺎ اﺳﺘﻔﺎده از ﻣﺘﺪ‬
var oDiv1 = document.getElementById(“div1”);
. ‫ ﮐﻮﺗﺎه ﺗﺮ و ﺑﻬﯿﻨﻪ ﺗﺮ اﺳﺖ‬، ‫ﻣﯽ ﺑﯿﻨﯿﺪ ﮐﻪ اﺳﺘﻔﺎده از ﺣﺎﻟﺖ دوم ﺑﺴﯿﺎر ﺳﺎده ﺗﺮ‬
٣۴
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﯾﺠﺎد و دﺳﺘﮑﺎري ﮔﺮه ﻫﺎ ‪:‬‬
‫ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ از ‪ DOM‬ﺑﺮاي اﺿﺎﻓﻪ ﮐﺮدن ‪ ،‬ﺣﺬف ﮐﺮدن و ﺟﺎﺑﻪ ﺟﺎ ﮐﺮدن و دﯾﮕﺮ دﺳﺘﮑﺎري ﻫﺎ اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪.‬‬

‫اﯾﺠﺎد ﮔﺮه ﻫﺎي ﺟﺪﯾﺪ‪:‬‬

‫ﺑﺮاي اﯾﺠﺎدﮔﺮه ﻫﺎي ﺟﺪﯾﺪ از ﻣﺘﺪ ﻫﺎي زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪:‬‬
‫)‪ : createAttribute(name‬ﺑﺮاي اﯾﺠﺎد ﯾﮏ ﺻﻔﺖ ﺟﺪﺑﺪ ﺑﺎ ‪ name‬ﮔﺮﻓﺘﻪ ﺷﺪه ﺑﻪ ﮐﺎر ﻣﯽ رود‬
‫)‪ : createComment(text‬ﺑﺮاي اﯾﺠﺎد ﯾﮏ ﺗﻮﺿﯿﺢ‬
‫)‪ : createElement(tagname‬ﺑﺮاي اﯾﺠﺎد ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬
‫)‪ : createTextNode(text‬اﯾﺠﺎد ﯾﮏ ﻣﺘﻦ ﺳﺎده ﺑﺎ ﻋﻨﻮان ‪text‬‬

‫)(‪createElement(), createTextNode(), appendChild‬‬

‫ﻓﺮض ﮐﻨﯿﺪ ﺗﮑﻪ ﮐﺪ زﯾﺮ را دارﯾﻢ ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>createElement() Example</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﺣﺎل ﻣﯽ ﺧﻮاﻫﯿﻢ ﻋﺒﺎرت زﯾﺮ را در اﯾﻦ ﺻﻔﺤﻪ ﭼﺎپ ﮐﻨﯿﻢ ‪:‬‬

‫>‪<p>Hello World !</p‬‬

‫اوﻟﯿﻦ ﮐﺎر اﯾﺠﺎد ﯾﮏ ﻋﻨﺼﺮ ‪ p‬اﺳﺖ ‪.‬‬
‫;)”‪var oP = document.createElement(“p‬‬
‫ﺣﺎل ﯾﮏ ﻣﺘﻦ ﺳﺎده اﯾﺠﺎد ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬
‫;)”!‪var oText = document.createTextNode(“Hello World‬‬

‫ﺣﺎل ﺑﺎﯾﺪ ﻣﺘﻦ را ﺑﻪ ﻋﻨﺼﺮ ‪ append ، p‬ﮐﻨﯿﻢ ‪ .‬ﺑﺮاي اﯾﻦ ﮐﺎر از ﻣﺘﺪ )(‪ appendchild‬اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ ‪ .‬از اﯾﻦ ﻣﺘﺪ ﺑﺮاي اﺿﺎﻓﻪ ﮐﺮدن‬
‫ﯾﮏ ﻓﺮزﻧﺪ ﺑﻪ اﻧﺘﻬﺎي ﻟﯿﺴﺖ ﻓﺮزﻧﺪان ﯾﮏ ﮔﺮه اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬
‫;)‪oP.appendChild(oText‬‬

‫ﭘﺎراﮔﺮاﻓﯽ ﮐﻪ را ﻣﺎ اﯾﺠﺎد ﮐﺮده اﯾﻢ ﺑﺎﯾﺪ ﺑﻪ ﺻﻔﺤﻪ و ﻗﺴﻤﺖ ‪ body‬و ﯾﺎ ﯾﮑﯽ از زﯾﺮ ﻣﺠﻤﻮﻋﻪ ﻫﺎي آن ‪ append‬ﮐﻨﯿﻢ ‪ .‬ﺑﺮاي اﯾﻦ ﮐﺎر ‪:‬‬
‫;)‪oP.appendChild(oText‬‬

‫)(‪removeChild(), replaceChild(), insertBefore‬‬

‫ﻃﺒﯿﻌﺘﺎ وﻗﺘﯽ ﻣﯽ ﺗﻮاﻧﯿﻢ ﮔﺮﻫﯽ را اﺿﺎﻓﻪ ﮐﻨﯿﻢ ﻣﯽ ﺗﻮاﻧﯿﻢ آن ﻫﺎ را ﺣﺬف ﮐﻨﯿﻢ ‪ .‬ﺑﺮاي ﺣﺬف ﮔﺮه ﻫﺎ ازﻣﺘﺪ )(‪ removeChild‬اﺳﺘﻔﺎده ﻣﯽ‬
‫ﮐﻨﯿﻢ ‪ .‬اﯾﻦ ﻣﺘﺪ ﯾﮏ آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ﮐﻪ در واﻗﻊ ﮔﺮﻫﯽ اﺳﺖ ﮐﻪ ﺑﺎﯾﺪ ﺣﺬف ﺷﻮد ‪ .‬ﺑﻪ ﺷﮑﻞ زﯾﺮ ‪:‬‬
‫;]‪var oP = document.body.getElementsByTagName(“p”)[0‬‬
‫;)‪document.body.removeChild(oP‬‬

‫ﺑﺮاي ﺟﺎﺑﺠﺎﯾﯽ ﮔﺮه ﻫﺎ از ﻣﺘﺪ )(‪ replaceChild‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬از اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪:‬‬

‫‪٣۵‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫;)”‪var oNewP = document.createElement(“p‬‬
‫;)“ !‪var oText = document.createTextNode(“Hello Universe‬‬
‫;)‪oNewP.appendChild(oText‬‬
‫;]‪var oOldP = document.body.getElementsByTagName(“p”)[0‬‬
‫;)‪oOldP.parentNode.replaceChild(oNewP, oOldP‬‬

‫ﺑﺮاي اﺿﺎﻓﻪ ﮐﺮدن ﯾﮏ ﻋﻨﺼﺮ ﺑﻪ ﻗﺒﻞ از ﻋﻨﺼﺮ دﯾﮕﺮي از )(‪ insertBefore‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪ .‬اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﭘﺬﯾﺮد و آرﮔﻮﻣﺎن‬
‫اول را ﻗﺒﻞ از آرﮔﻮﻣﺎن دوم ﻗﺮار ﻣﯽ دﻫﺪ ‪.‬‬

‫)(‪createDocumentFragment‬‬
‫ﺑﻪ ﻣﺤﺾ اﯾﻨﮑﻪ ﻣﺎ ﺗﻌﺪادي ﮔﺮه ﺟﺪﯾﺪ ﺑﻪ ﺳﻨﺪ اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﯿﻢ ﺻﻔﺤﻪ ﺑﺮاي ﻧﻤﺎﯾﺶ ﺗﻐﯿﯿﺮات ‪ update ،‬ﻣﯿﺸﻮد ‪ .‬اﯾﻦ رﻓﺘﺎر ﺑﺮاي ﺗﻌﺪاد‬
‫ﺗﻐﯿﯿﺮات ﮐﻢ ﻣﻨﺎﺳﺐ اﺳﺖ ‪ .‬اﻣﺎ ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻐﯿﯿﺮات زﯾﺎد ﺑﺎﺷﺪ و ﺻﻔﺤﻪ ﺑﺨﻮاﻫﺪ اﯾﻦ رﻓﺘﺎر را ﯾﮏ ﺑﻪ ﯾﮏ در ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ دﻫﺪ ﻣﻤﮑﻦ اﺳﺖ‬
‫اﯾﻦ ﻋﻤﻞ ﺑﻪ ﮐﻨﺪي اﻧﺠﺎم ﺷﻮد ‪.‬‬
‫ﺑﺮاي رﻓﻊ اﯾﻦ ﻣﺸﮑﻞ ﻣﯽ ﺗﻮاﻧﯿﺪ از ﯾﮏ ﺗﮑﻪ )‪ (documentFragment‬ﺑﺮﻧﺎﻣﻪ اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪.‬ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺗﻤﺎم ﮔﺮه ﻫﺎي ﺟﺪﯾﺪ را ﺑﻪ‬
‫ﺗﮑﻪ ﺑﺮﻧﺎﻣﻪ اﺿﺎﻓﻪ ﮐﺮده و ﺳﭙﺲ آن را در ﺻﻔﺤﻪ اﺻﻠﯽ ﻗﺮار دﻫﯿﺪ ‪ .‬ﻓﺮض ﮐﻨﯿﺪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﭼﻨﺪﯾﻦ ﭘﺎراﮔﺮاف را در ﺻﻔﺤﻪ اﯾﺠﺎد ﮐﻨﯿﻢ ‪ .‬در‬
‫ﺻﻮرت اﺳﺘﻔﺎده از روش ﻫﺎي ﻗﺒﻠﯽ اﯾﻦ اﻣﺮ ﻣﻮﺟﺐ رﻓﺮش ﻫﺮ ﺑﺎره ﺻﻔﺤﻪ ﺧﻮاﻫﺪ ﺷﺪ ‪.‬‬
‫اﻣﺎ ﺑﻬﺘﺮ اﺳﺖ ﺑﻪ روش زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﻢ ‪:‬‬
‫;]”‪var arrText = [“first”, “second”, “third”, “fourth”, “fifth”, “sixth‬‬
‫;)(‪var oFragment = document.createDocumentFragment‬‬
‫{ )‪for (var i=0; i < arrText.length; i++‬‬
‫;)”‪var oP = document.createElement(“p‬‬
‫;)]‪var oText = document.createTextNode(arrText[i‬‬
‫;)‪oP.appendChild(oText‬‬
‫;)‪oFragment.appendChild(oP‬‬
‫}‬
‫;)‪document.body.appendChild(oFragment‬‬

‫وﯾﮋﮔﯽ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ‪ DOM‬ﺑﺮاي ‪: HTML‬‬

‫ﯾﮑﯽ از وﯾﮋﮔﯽ ﻫﺎي ‪ DOM‬اﯾﻦ اﺳﺖ ﮐﻪ ‪ DOM‬اﻣﮑﺎن ﺗﻨﻈﯿﻢ و دﺳﺘﮑﺎري ﺻﻔﺎت ﻣﺮﺑﻮط ﺑﻪ ﻋﻨﺎﺻﺮ ‪ HTML‬را ﻓﺮاﻫﻢ ﻣﯽ آورد ‪ .‬از‬
‫ﺟﻤﻠﻪ اﯾﻦ وﯾﮋﮔﯽ ﻫﺎ ﻣﯽ ﺗﻮان ﺑﻪ در ﻧﻈﺮ ﮔﺮﻓﺘﻦ ﺻﻔﺎت ﻋﻨﺎﺻﺮ ﺑﻪ ﻋﻨﻮان ﺧﺎﺻﯿﺖ ﻫﺎي ﻫﺮ ﺷﯽءاﺷﺎره ﮐﺮد ﮐﻪ ﺑﺮاي اﯾﻦ ﮐﺎر ﻣﺘﺪ ﻫﺎ و‬
‫ﺧﺎﺻﯿﺖ ﻫﺎي اراﺋﻪ ﺷﺪه اﺳﺖ ‪.‬‬
‫ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻪ ﺻﻔﺎت ﻋﻨﺎﺻﺮ ﺑﻪ ﻋﻨﻮان ﺧﺎﺻﯿﺖ ﻫﺎي آن دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ‪ .‬ﻓﺮض ﮐﻨﯿﺪ ﮐﺪ زﯾﺮ را دارﯾﻢ ‪:‬‬
‫>‪<img src=”mypicture.jpg” border=”0” /‬‬

‫ﺑﺮاي دﺳﺘﺮﺳﯽ و ﺗﻨﻈﯿﻢ ‪ src‬و ‪ border‬ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻣﺘﺪ ﻫﺎي )(‪ getAttribute‬و ﯾﺎ )(‪ setAttribute‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪:‬‬

‫;))”‪alert(oImg.getAttribute(“src‬‬
‫;))”‪alert(oImg.getAttribute(“border‬‬
‫;)”‪oImg.setAttribute(“src”, “mypicture2.jpg‬‬
‫;)”‪oImg.setAttribute(“border”, “1‬‬
‫ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻧﺎم ﺻﻔﺎت ﻫﻢ ﺑﻪ ﻋﻨﻮان ﺧﺎﺻﯿﺖ ﻫﺮ ﯾﮏ از اﺷﯿﺎ ﺑﺮاي ‪ get‬و ‪ set‬ﮐﺮدن اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪:‬‬
‫;)‪alert(oImg.src‬‬
‫;)‪alert(oImg.border‬‬
‫;”‪oImg.src = “mypicture2.jpg‬‬
‫;”‪oImg.border = “1‬‬

‫‪٣۶‬‬
‫ اﺣﻤﺪ ﺑﺎدﭘﯽ‬: ‫ﻧﻮﯾﺴﻨﺪه‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ ﺑﻪ ﻋﻨﻮان ﯾﮏ ﺧﺎﺻﯿﺖ‬class ‫ ﻣﺎ ﻧﻤﯽ ﺗﻮاﻧﯿﻢ از ﺧﻮد ﺻﻔﺖ‬، ‫ ﺑﺮ ﺧﻼف ﺑﺴﯿﺎري از ﺻﻔﺎت ﺗﮓ ﻫﺎ‬: ‫ ﻧﮑﺘﻪ‬
‫ اﺳﺘﻔﺎده‬className ‫ ﭼﻮن اﯾﻦ ﮐﻠﻤﻪ ﺟﺰء ﮐﻠﻤﺎت رزرو ﺷﺪه اﺳﺖ و ﺑﺎﯾﺪ ﺑﻪ ﺟﺎي آن از ﮐﻠﻤﻪ‬. ‫اﺳﺘﻔﺎده ﮐﻨﯿﻢ‬
. ‫ﮐﻨﯿﻢ‬

: ‫ﻣﺘﺪ ﻫﺎي ﻣﺮﺑﻮﻃﻪ ﺑﻪ ﺟﺪاول‬

: ‫ﻓﺮض ﮐﻨﯿﺪ ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﺟﺪول زﯾﺮ را ﺑﻪ ﺻﻮرت ﭘﻮﯾﺎ و ﺑﺎ اﺳﺘﻔﺎده از ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﯾﺠﺎد ﮐﻨﯿﻢ‬
<table border=”1” width=”100%”>
<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr>
<td>Cell 1,2</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>
‫ اﺳﺘﻔﺎده ﮐﻨﯿﻢ ﮐﺪ ﻣﺎ ﺑﻪ ﺻﻮرت ذﯾﻞ ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ و ﮔﺎﻫﯽ اوﻗﺎت ﺳﺮدرﮔﻢ‬DOM ‫اﮔﺮ ﺑﺮاي اﯾﺠﺎد اﯾﻦ ﺟﺪول ﺑﺨﻮاﻫﯿﻢ از ﻣﺘﺪ ﻫﺎي راﯾﺞ‬
: ‫ﮐﻨﻨﺪه ﺧﻮاﻫﺪ ﺷﺪ‬
//create the table
var oTable = document.createElement(“table”);
oTable.setAttribute(“border”, “1”);
oTable.setAttribute(“width”, “100%”);

//create the tbody

var oTBody = document.createElement(“tbody”);
oTable.appendChild(oTBody);

//create the first row

var oTR1 = document.createElement(“tr”);
oTBody.appendChild(oTR1);
var oTD11 = document.createElement(“td”);
oTD11.appendChild(document.createTextNode(“Cell 1,1”));
oTR1.appendChild(oTD11);
var oTD21 = document.createElement(“td”);
oTD21.appendChild(document.createTextNode(“Cell 2,1”));
oTR1.appendChild(oTD21);

//create the second row

var oTR2 = document.createElement(“tr”);
oTBody.appendChild(oTR2);
var oTD12 = document.createElement(“td”);
oTD12.appendChild(document.createTextNode(“Cell 1,2”));
oTR2.appendChild(oTD12);
var oTD22 = document.createElement(“td”);
oTD22.appendChild(document.createTextNode(“Cell 2,2”));
oTR2.appendChild(oTD22);

//add the table to the document body

document.body.appendChild(oTable);

٣٧
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺑﺮاي آﺳﺎﻧﯽ اﯾﻨﮑﺎر ‪ DOM‬ﯾﮑﺴﺮي ﺧﺎﺻﯿﺖ ﻫﺎ و ﻣﺘﺪ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮدي ﺑﺮاي ﻋﻨﺎﺻﺮ اﺻﻠﯽ ﺟﺪاول ﻫﻤﭽﻮن ‪table, tody, tr‬‬
‫اﯾﺠﺎد ﮐﺮده اﺳﺖ ‪.‬‬
‫ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﺟﺪول ﺑﻪ ﺷﺮح زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ ‪:‬‬

‫‪ : caption‬اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ ‪ caption‬ﺟﺪول دارد ‪) .‬اﻟﺒﺘﻪ اﮔﺮ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪(.‬‬

‫‪ : tBodies‬ﻣﺠﻤﻮﻋﻪ )آراﯾﻪ( اي از ﻋﻨﺎﺻﺮ ‪tbody‬‬
‫‪ : tFoot‬اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ ‪ tfoot‬ﺟﺪول‬
‫‪ : tHead‬اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ ‪ thead‬ﺟﺪول‬
‫‪ : Rows‬ﻣﺠﻤﻮﻋﻪ اي از ﺗﻤﺎم ردﯾﻒ ﻫﺎي ﺟﺪول‬
‫)(‪ : createThead‬اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ ‪ thead‬در ﺟﺪول‬
‫)(‪ : createTfoot‬اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ ‪ tfoot‬در ﺟﺪول‬
‫)(‪ : createCaption‬اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ ‪ caption‬در ﺟﺪول‬
‫)(‪ : deleteThead‬ﺣﺬف ﻋﻨﺼﺮ ‪ thead‬از ﺟﺪول‬
‫)(‪ : deleteTfoot‬ﺣﺬف ﻋﻨﺼﺮ ‪ tfoot‬از ﺟﺪول‬
‫)(‪ : deleteCaption‬ﺣﺬف ﻋﻨﺼﺮ ‪ Caption‬از ﺟﺪول‬
‫)‪ : deleteRow(position‬ﺣﺬف ردﯾﻔﯽ از ﺟﺪول ﮐﻪ در ﻣﻮﻗﻌﯿﺖ ‪ position‬ﻗﺮار دارد‬
‫)‪ : insertRow(position‬ﻗﺮار دادن ردﯾﻔﯽ در ﻣﻮﻗﻌﯿﺖ ‪position‬‬

‫ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ‪: tbody‬‬

‫‪: Rows‬ﻣﺠﻤﻮﻋﻪ از ردﯾﻒ ﻫﺎ در ﻋﻨﺼﺮ ‪tbody‬‬
‫)‪ : deleteRow(position‬ﺣﺬف ردﯾﻔﯽ در ﻣﻮﻗﻌﯿﺖ ‪position‬‬
‫)‪ : insertRow(position‬ﻗﺮاردادن ردﯾﻔﯽ در ﻣﻮﻗﻌﯿﺖ ‪ position‬ﻣﺠﻤﻮﻋﻪ اي از ردﯾﻒ ﻫﺎ‬

‫ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ‪: tr‬‬

‫‪ : Cells‬ﻣﺠﻤﻮﻋﻪ اي از ﺳﻠﻮ ل ﻫﺎ در ﯾﮏ ردﯾﻒ‬
‫)‪ : deleteCell(position‬ﺣﺬف ﺳﻠﻮﻟﯽ در ﻣﻮﻗﻌﯿﺖ ‪position‬‬
‫)‪ : insertCell(position‬ﻗﺮار دادن ﺳﻠﻮﻟﯽ در ﻣﻮﻗﻌﯿﺖ ‪ position‬ﻣﺠﻤﻮﻋﻪ اي از ﺳﻠﻮل ﻫﺎ ‪.‬‬

‫‪٣٨‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺑﺮاي اﯾﺠﺎد ﺟﺪول ﻗﺒﻠﯽ ﮐﺪ ﻣﺎ ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ ﺑﻮد ‪:‬‬
‫‪//create the table‬‬
‫;)”‪var oTable = document.createElement(“table‬‬
‫;)”‪oTable.setAttribute(“border”, “1‬‬
‫;)”‪oTable.setAttribute(“width”, “100%‬‬
‫‪//create the tbody‬‬
‫;)”‪var oTBody = document.createElement(“tbody‬‬
‫;)‪oTable.appendChild(oTBody‬‬
‫‪//create the first row‬‬
‫;)‪oTBody.insertRow(0‬‬
‫;)‪oTBody.rows[0].insertCell(0‬‬
‫‪oTBody.rows[0].cells[0].appendChild(document.createTextNode(“Cell‬‬
‫;))”‪1,1‬‬
‫;)‪oTBody.rows[0].insertCell(1‬‬
‫‪oTBody.rows[0].cells[1].appendChild(document.createTextNode(“Cell‬‬
‫;))”‪2,1‬‬
‫‪//create the second row‬‬
‫;)‪oTBody.insertRow(1‬‬
‫;)‪oTBody.rows[1].insertCell(0‬‬
‫‪oTBody.rows[1].cells[0].appendChild(document.createTextNode(“Cell‬‬
‫;))”‪1,2‬‬
‫;)‪oTBody.rows[1].insertCell(1‬‬
‫‪oTBody.rows[1].cells[1].appendChild(document.createTextNode(“Cell‬‬
‫;))”‪2,2‬‬
‫‪//add the table to the document body‬‬
‫;)‪document.body.appendChild(oTable‬‬

‫ﮐﺎر ﺑﺎ ﻓﺮم ﻫﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم از ﻃﺮﯾﻖ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ‪:‬‬

‫ﻓﺮم ﻫﺎ در ﺻﻔﺤﺎت ﺗﻨﻬﺎ ﻋﻨﺎﺻﺮي ﻫﺴﺘﻨﺪ ﮐﻪ ﮐﺎرﺑﺮان ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ ﺻﻮرت ﻣﺴﺘﻘﯿﻢ ﯾﮑﺴﺮي اﻃﻼﻋﺎت را در آن ﻫﺎ وارد ﻧﻤﺎﯾﻨﺪ ‪.‬‬
‫ﺑﺮاي اﯾﺠﺎد ﯾﮏ ﻓﺮم از ﺗﮓ ‪ form‬و ﺑﺮاي اﯾﺠﺎد ﻋﻨﺎﺻﺮ آن از ﺗﮓ ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ textarea ، select ، input‬و ‪ ..‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‬
‫ﮐﻪ ﻣﺮورﮔﺮ ﻫﺎ ﺑﻮﺳﯿﻠﻪ آن ﻫﺎ ﻗﺎدر ﺑﻪ ﻧﻤﺎﯾﺶ ﻓﯿﻠﺪ ﻫﺎي ﯾﮏ ﺧﻄﯽ ‪ ،‬ﭼﻨﺪ ﺧﻄﯽ ‪ ،‬ﻣﻨﻮﻫﺎي ﺑﺎزﺷﻮ ‪ ،‬دﮐﻤﻪ ﻫﺎ و ‪ ...‬ﻫﺴﺘﻨﺪ ‪.‬‬

‫اﺳﺎس ﯾﮏ ﻋﻨﺼﺮ ﻓﺮم در ﺻﻔﺤﻪ ‪:‬‬

‫ﯾﮏ ﻓﺮم در ﺻﻔﺤﻪ ﺑﻮﺳﯿﻠﻪ ﺗﮓ ‪ form‬ﮐﻪ داراي ﺻﻔﺖ ﻫﺎي زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ اﯾﺠﺎد ﻣﯽ ﺷﻮد ‪:‬‬
‫‪ : Method‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﻣﺮورﮔﺮ از ﭼﻪ روﺷﯽ ﺑﺮاي ارﺳﺎل داده ﻫﺎي ﻓﺮم اﺳﺘﻔﺎده ﮐﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ دو ﻣﻘﺪار ‪ GET‬و ‪POST‬‬
‫را ﺑﮕﯿﺮد ‪.‬‬
‫‪ : Action‬ﻓﺮم ﻫﺎ ﭘﺲ از ارﺳﺎل ﺑﺎﯾﺪ ﺑﻪ ﯾﮏ ﺻﻔﺤﻪ ﭘﺮدازﺷﮕﺮ ﮐﻪ اﻟﺒﺘﻪ ﺑﻪ ﯾﮑﯽ از زﺑﺎن ﻫﺎي ‪) server side‬ﺗﺤﺖ ﺳﺮور( ﻧﻮﺷﺘﻪ ﻣﯽ‬
‫ﺷﻮﻧﺪ ﻫﺪاﯾﺖ ﺷﻮﻧﺪ ‪ .‬اﯾﻦ ﺻﻔﺖ آدرس )‪ (URL‬ﺻﻔﺤﻪ ﭘﺮدازﺷﮕﺮ ﻓﺮم را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫‪ : Enctype‬ﻧﻮع ‪ Encoding‬داده ﻫﺎي ﻓﺮم را ﻫﻨﮕﺎم ارﺳﺎل ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﻪ در ﺣﺎﻟﺖ ﭘﯿﺶ ﻓﺮض ﺑﺮاﺑﺮ ‪application/x-url-‬‬
‫‪ encoded‬اﺳﺖ ‪ .‬اﻣﺎ در ﺣﺎﻟﺘﯽ ﮐﻪ داﺧﻞ ﻓﺮﻣﻤﺎن ﻋﻨﺼﺮي از ﻧﻮع ‪ file‬ﮐﻪ ﮐﺎرﺑﺮان را ﻗﺎدر ﺑﻪ آﭘﻠﻮد ﻓﺎﯾﻞ ﻫﺎﯾﺸﺎن ﻣﯽ ﮐﻨﺪ ﺑﺎﺷﺪ ﺑﺎﯾﺪ آن را‬
‫ﺑﺮاﺑﺮ ‪ multipart/form-data‬ﻗﺮار دﻫﯿﻢ ‪.‬‬
‫‪ : Accept‬ﻟﯿﺴﺘﯽ از ‪ MIME type‬ﻫﺎي ﻓﺎﯾﻞ ﻫﺎﯾﯽ ﮐﻪ ﻗﺮار اﺳﺖ ﮐﺎرﺑﺮ ﺑﺘﻮاﻧﺪ آﭘﻠﻮد ﮐﻨﺪ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫‪ : Accept-charset‬ﻟﯿﺴﺘﯽ ازﻣﺠﻤﻮﻋﻪ ﮐﺎراﮐﺘﺮي ﻫﺎﯾﯽ را ﮐﻪ ﺳﺮور ﺑﺎﯾﺪ در ﻫﻨﮕﺎم درﯾﺎﻓﺖ اﻃﻼﻋﺎت اﺳﺘﻔﺎده ﮐﻨﺪ را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ ‪.‬‬
‫‪٣٩‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﺳﮑﺮﯾﭙﺖ ﻧﻮﯾﺴﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ ﻓﺮم ‪:‬‬
‫ﮐﺪﻧﻮﯾﺴﯽ ﺑﺮاي ﻋﻨﺎﺻﺮ ﻓﺮم ﻧﺴﺒﺖ ﺑﻪ ﻋﻨﺎﺻﺮ دﯾﮕﺮ ﮐﻤﯽ ﻣﺘﻔﺎوت اﺳﺖ ‪.‬‬

‫اﯾﺠﺎد ارﺟﺎع )‪ (reference‬ﺑﻪ ﻋﻨﺎﺻﺮ ﻣﻮرد ﻧﻈﺮ ‪:‬‬

‫ﻗﺒﻞ از ﺳﺮ و ﮐﺎر داﺷﺘﻦ ﺑﺎ ﻋﻨﺎﺻﺮ ‪ form‬ﺑﺎﯾﺪ ارﺟﺎﻋﯽ ﺑﻪ ﻓﺮم ﻣﻮرد ﻧﻈﺮﻣﺎن در ﺻﻔﺤﻪ اﯾﺠﺎد ﮐﻨﯿﻢ ‪ .‬اﯾﻦ ﮐﺎر از ﭼﻨﺪﯾﻦ راه اﻧﺠﺎم ﻣﯽ ﺷﻮد ‪.‬‬
‫راه اول اﺳﺘﻔﺎه از ﻣﺘﺪ )(‪ getElementById‬اﺳﺖ ﮐﻪ از ‪ Id‬ﻓﺮم ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ آن اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫راه دوم اﺳﺘﻔﺎده از آراﯾﻪ ي ][‪ forms‬اﺳﺖ ﮐﻪ ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ ‪ document‬در ‪ DOM‬ﻣﻌﺮﻓﯽ ﺷﺪه اﺳﺖ ‪.‬‬
‫ﺑﺮاي اﯾﻦ ﮐﺎر ﻣﯽ ﺗﻮان از اﻧﺪﯾﺲ ﻋﺪدي ﮐﻪ ﺑﺴﺘﮕﯽ ﺑﻪ ﻣﮑﺎن ﻓﺮم ﻣﻮرد ﻧﻈﺮ در ﺻﻔﺤﻪ دارد اﺳﺘﻔﺎده ﮐﺮد ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ‪:‬‬

‫‪var oForm = document.forms[0] ; // get the first form‬‬

‫‪var oOtherForm = document.forms["formZ"] ; // get the form whose name is‬‬
‫"‪"formZ‬‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ داﺧﻞ ﯾﮏ ﻓﺮم ‪:‬‬
‫ﻫﺮ ﻋﻨﺼﺮ داﺧﻞ ﯾﮏ ﻓﺮم ﻣﺜﻞ ﯾﮏ دﮐﻤﻪ ‪ ،‬ﯾﮏ ﻓﯿﻠﺪ ﯾﮏ ﺧﻄﯽ و ‪ ...‬ﺑﺎ اﺳﺘﻔﺎده از آراﯾﻪ اي ﺑﻪ ﻧﺎم ][‪ elements‬ﮐﻪ ﯾﮑﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي‬
‫ﯾﮏ ﺷﯽء از ﻧﻮع ﻓﺮم اﺳﺖ ﻗﺎﺑﻞ دﺳﺘﺮﺳﯽ ﻫﺴﺘﻨﺪ ‪.‬‬
‫ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ از اﯾﻦ آراﯾﻪ و ﺑﺎ اﺳﺘﻔﺎده از اﻧﺪﯾﺲ ﻋﺪدي ﯾﺎ اﺳﻤﯽ ﻣﻮرد ﻧﻈﺮ ﺑﻪ ﻋﻨﺎﺻﺮ ﻣﺨﺘﻠﻒ ﻓﺮم دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ‪.‬‬

‫‪var oFirstField = oForm.elements[0] ; // get the first form field‬‬

‫‪var oTextbox1 = oForm.elements["textbox1"] ; // get the field with the name‬‬
‫"‪"textbox1‬‬
‫ﺧﻂ اول از ﮐﺪ ﺑﺎﻻ ﻣﺘﻐﯿﺮي را ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ اوﻟﯿﻦ ﻋﻨﺼﺮ از ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم ‪ oForm‬اﺷﺎره ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫ﺧﻂ دوم ﻧﯿﺰ ﻣﺘﻐﯿﺮي را ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ ﻋﻨﺼﺮي ﺑﻪ ﻧﺎم ‪ textbox1‬از ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم ‪ oForm‬اﺷﺎره ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫ﯾﮏ روش دﯾﮕﺮ )ﮐﻪ اﺻﻄﻼﺣﺎ ﺑﻪ آن روش ﻣﯿﺎﻧﺒﺮ ﻣﯽ ﮔﻮﯾﻨﺪ( ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮي ﮐﻪ ﻧﺎم ﻣﺸﺨﺼﯽ دارﻧﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ﺑﻪ ﺷﮑﻞ‬
‫زﯾﺮ اﺳﺖ ‪:‬‬
‫;‪var oTextbox1 = oForm.textbox1‬‬ ‫"‪//get the field with the name "textbox1‬‬

‫ﮐﺪ ﺑﺎﻻ ﻣﺘﻐﯿﺮي ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ ﻋﻨﺼﺮي ﺑﺎ ﻧﺎم )ﯾﺎ ‪ textbox1 (Id‬از ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم ‪ oForm‬اﺷﺎره ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫اﮔﺮ اﺳﻢ ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ داراي ﭼﻨﺪ ‪ space‬ﺑﺎﺷﺪ ﺑﺎﯾﺪ در اﻃﺮاف آن از ﺑﺮاﮐﺖ )][( اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪:‬‬

‫"‪var oTextbox1 = oForm.textbox1; //get the field with the name "textbox1‬‬

‫وﯾﮋﮔﯽ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﻋﻨﺎﺻﺮ ‪: form‬‬

‫ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ﻓﺮم )ﺑﻪ ﺟﺰ ﻋﻨﺼﺮي از ﻧﻮع ‪ (Hidden‬ﺷﺎﻣﻞ ﯾﮑﺴﺮي ﺧﻮاص و روﯾﺪادﻫﺎي ﻣﺸﺘﺮﮐﯽ ﻫﺴﺘﻨﺪ ﮐﻪ در زﯾﺮ ﺑﯿﺎن ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬

‫ﺧﺎﺻﯿﺖ ‪ : disabled‬از اﯾﻦ ﺧﺎﺻﯿﺖ ﻫﻢ ﺑﺮاي ﺗﺸﺨﯿﺺ اﯾﻨﮑﻪ ﮐﺪام ﻋﻨﺼﺮ در ﺣﺎﻟﺖ ﻏﯿﺮ ﻓﻌﺎل ﻗﺮار دارد و ﻫﻢ ﺑﺮاي ﻓﻌﺎل ﯾﺎ ﻏﯿﺮ ﻓﻌﺎل‬
‫ﮐﺮدن ﯾﮏ ﻋﻨﺼﺮ از ﻗﺒﻞ ﻓﻌﺎل اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬
‫ﺧﺎﺻﯿﺖ ‪ : form‬اﺷﺎره ﺑﻪ ﻓﺮﻣﯽ دارد ﮐﻪ ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﻣﺎ ‪ ،‬داﺧﻞ آن ﻗﺮار دارد ‪.‬‬
‫‪۴٠‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﻣﺘﺪ )(‪ : focus‬اﯾﻦ ﻣﺘﺪ ﻣﻮﺟﺐ ﻣﯽ ﺷﻮد ‪) focus‬ﺗﻤﺮﮐﺰ( ﺻﻔﺤﻪ ﺑﺮ روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﻗﺮار ﮔﯿﺮد ‪.‬‬
‫ﻣﺘﺪ )(‪ : blur‬اﯾﻦ ﻣﺘﺪ ﻋﮑﺲ ﻣﺘﺪ ﺑﺎﻻ اﺳﺖ و ﻣﻮﺟﺐ ﻣﯽ ﺷﻮد ‪) focus‬ﺗﻤﺮﮐﺰ( ﺻﻔﺤﻪ از روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺑﺮود ‪.‬‬
‫روﯾﺪاد ‪ : blur‬اﯾﻦ روﯾﺪاد ﻣﻮﻗﻌﯽ ﮐﻪ ‪) focus‬ﺗﻤﺮﮐﺰ( ﺻﻔﺤﻪ از روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺑﺮود رخ ﻣﯽ دﻫﺪ ‪.‬‬
‫روﯾﺪاد ‪ : focus‬ﻋﮑﺲ روﯾﺪاد ﺑﺎﻻ ﻋﻤﻞ ﻣﯽ ﮐﻨﺪ و ﻣﻮﻗﻌﯽ ﮐﻪ ‪) focus‬ﺗﻤﺮﮐﺰ( ﺑﺮ روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﻗﺮار ﺑﮕﯿﺮد رخ ﻣﯽ دﻫﺪ ‪.‬‬
‫ﺑﺮاي ﻣﺜﺎل ‪:‬‬

‫;]‪var oField1 = oForm.elements[0‬‬

‫;]‪var oField2 = oForm.elements[1‬‬
‫‪//set the first field to be disabled‬‬
‫;‪oField1.disabled = true‬‬
‫‪//set the focus to the second field‬‬
‫;)(‪oField2.focus‬‬
‫?‪//is the form property equal to oForm‬‬
‫"‪alert(oField1.form == oForm); //outputs "true‬‬

‫‪ ‬ﻧﮑﺘﻪ ‪ :‬ﻋﻨﺎﺻﺮ از ﻧﻮع ‪ hidden‬ﻓﻘﻂ از ﺧﺎﺻﯿﺖ ‪ form‬ﮐﻪ در ﺑﺎﻻ ذﮐﺮ ﺷﺪ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﺪ ‪.‬‬

‫‪) Submit‬ارﺳﺎل( ﻓﺮم ﺑﻮﺳﯿﻠﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪:‬‬

‫در ‪ HTML‬ﻓﺮﺳﺘﺎدن ﻓﺮم از ﻃﺮﯾﻖ ﯾﮏ دﮐﻤﻪ از ﻧﻮع ‪ submit‬ﯾﺎ ﻋﮑﺴﯽ ﮐﻪ در ﻧﻘﺶ دﮐﻤﻪ ‪ submit‬ﻋﻤﻞ ﻣﯽ ﮐﻨﺪ اﻧﺠﺎم ﻣﯽ ﺷﻮد ‪.‬‬
‫ﻣﺜﺎل ‪:‬‬
‫>‪<input type="submit" value="Submit" /‬‬
‫>‪<input type="image" src="submit.gif" /‬‬
‫در ﺻﻮرت ﮐﻠﯿﮏ ﺑﺮ روي ﻫﺮ ﯾﮏ از دﮐﻤﻪ ﻫﺎي ﺑﺎﻻ ﻓﺮم ﺑﻪ ﺻﻮرت ﻣﻌﻤﻮﻟﯽ ارﺳﺎل ﻣﯽ ﺷﻮد ‪.‬‬
‫اﮔﺮ ﺷﻤﺎ دﮐﻤﻪ ‪ Enter‬را ﻫﻢ از ﺻﻔﺤﻪ ﮐﻠﯿﺪ ﻓﺸﺎر دﻫﯿﺪ ﻣﺮورﮔﺮ ﻓﺮم را ﻣﺜﻞ ﺣﺎﻟﺘﯽ ﮐﻪ دﮐﻤﻪ ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد ارﺳﺎل ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫ﺷﻤﺎ ﺑﺮاي ﺗﺴﺖ ارﺳﺎل ﺷﺪن ﻓﺮم ﻣﯽ ﺗﻮاﻧﯿﺪ از ﮐﺪ ﺳﺎده زﯾﺮ در ﺗﮓ آﻏﺎزﯾﻦ ﻓﺮم ﻣﻮرد ﻧﻈﺮﺗﺎن اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪:‬‬

‫>")’‪<form method="post" action="javascript:alert(‘Submitted‬‬

‫اﮔﺮ ﺷﻤﺎ ﻣﯽ ﺧﻮاﻫﯿﺪ ﮐﻪ از ﻫﯿﭻ ﯾﮏ از راه ﻫﺎي ﻓﻮق اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ submit‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪.‬‬
‫اﯾﻦ ﻣﺘﺪ ﺟﺰﺋﯽ از ﺗﻌﺮﯾﻔﺎت ‪ DOM‬ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ ‪ form‬اﺳﺖ و ﻣﯽ ﺗﻮاﻧﺪ ﻫﺮ ﺟﺎﯾﯽ از ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﺷﻮد‪ .‬ﺑﺮاي اﯾﻦ ﮐﺎر اوﻻ ﺑﺎﯾﺪ‬
‫ارﺟﺎﻋﯽ ﺑﻪ ﻓﺮم ﻣﻮرد ﻧﻈﺮ اﯾﺠﺎد ﮐﺮد )ﻃﺒﻖ روش ﻫﺎﯾﯽ ﮐﻪ ﻗﺒﻼ ذﮐﺮ ﺷﺪ( ‪:‬‬

‫;)"‪oForm = document.getElementById("form1‬‬
‫;]"‪oForm = document.forms["form1‬‬
‫;]‪oForm = document.forms[0‬‬
‫ﺑﻌﺪ از اﯾﻦ ﮐﺎر ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ راﺣﺘﯽ از اﯾﻦ ﻣﺘﺪ اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪:‬‬
‫;)(‪oForm.submit‬‬

‫ارﺳﺎل ‪ form‬ﻓﻘﻂ ﯾﮑﺒﺎر !!!‬

‫ﯾﮑﯽ از ﻣﺸﮑﻼﺗﯽ ﮐﻪ ﻃﺮاﺣﺎن در ﻓﺮم ﻫﺎ ﺑﺎ آن روﺑﺮو ﻫﺴﺘﻨﺪ اﯾﻦ اﺳﺖ ﮐﻪ ﺑﺴﯿﺎري از ﮐﺎرﺑﺮان ﺑﺮاي اﻃﻤﯿﻨﺎن از اﯾﻨﮑﻪ ﻓﺮم ﺑﻪ درﺳﺘﯽ ارﺳﺎل‬
‫ﺷﻮد ﭼﻨﺪﯾﻦ ﺑﺎر ﺑﺮ روي دﮐﻤﻪ ‪ submit‬ﮐﻠﯿﮏ ﻣﯽ ﮐﻨﻨﺪ ‪ .‬ﻣﺸﮑﻠﯽ ﮐﻪ در اﯾﻨﺠﺎ ﻫﺴﺖ اﯾﻦ اﺳﺖ ﮐﻪ ﺑﻪ ازاي ﻫﺮ ﺑﺎر ﮐﻠﯿﮏ ﮐﺎرﺑﺮ ﺑﺮ روي‬
‫دﮐﻤﻪ ﯾﮏ ‪) Request‬درﺧﻮاﺳﺖ( اﺿﺎﻓﯽ ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﯽ ﺷﻮد ‪.‬‬

‫‪۴١‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫راه ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ ﺑﺴﯿﺎر ﺳﺎده اﺳﺖ ‪ :‬ﺑﻌﺪ از اﯾﻨﮑﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ را ﮐﻠﯿﮏ ﮐﺮد ‪ ،‬ﻣﺎ آن را ﻏﯿﺮ ﻓﻌﺎل )‪ (disabled‬ﻣﯽ ﮐﻨﯿﻢ ‪.‬‬
‫ﺑﺮاي اﻧﺠﺎم اﯾﻨﮑﺎر ﻣﯽ ﺗﻮان ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده از دﮐﻤﻪ ‪ submit‬ﻣﻌﻤﻮﻟﯽ زﯾﺮ ‪:‬‬
‫>‪<input type="submit" value="Submit" /‬‬
‫از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﮐﺮد ‪:‬‬
‫;‪<input type=”button” value=”Submit” onclick=”this.disabled=true‬‬
‫>‪this.form.submit()” /‬‬
‫ﻣﻮﻗﻌﯽ ﮐﻪ اﯾﻦ دﮐﻤﻪ ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد اوﻻ ﺧﻮد دﮐﻤﻪ ﻏﯿﺮ ﻓﻌﺎل ﻣﯽ ﺷﻮد و ﺳﭙﺲ ﻓﺮﻣﯽ را ﮐﻪ ﺟﺰﺋﯽ از آن اﺳﺖ را ارﺳﺎل ﻣﯽ ﮐﻨﺪ ‪ .‬ﺗﻮﺟﻪ‬
‫ﮐﻨﯿﺪ ﮐﻪ دراﯾﻨﺠﺎ ﮐﻠﻤﻪ ﮐﻠﯿﺪي ‪ this‬ﺑﻪ دﮐﻤﻪ اﺷﺎره دارد و ‪ form‬ﺑﻪ ﻓﺮم درﺑﺮﮔﯿﺮﻧﺪه دﮐﻤﻪ اﺷﺎره ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﯾﮏ ﻓﺮم را ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻮﺳﯿﻠﻪ ﻣﺘﺪ )(‪ submit‬ارﺳﺎل ﮐﻨﯿﻢ ﻣﯽ ﺗﻮاﻧﯿﻢ آن را ﺑﻪ وﺳﯿﻠﻪ ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ reset‬ﻧﯿﺰ ‪) reset‬ﭘﺎك‬
‫ﺳﺎزي( ﮐﻨﯿﻢ ‪:‬‬
‫>‪<input type=”button” value=”Reset” onclick=”document.forms[0].reset()” /‬‬

‫ﮐﺎر ﺑﺎ ‪ textbox‬ﻫﺎ ‪:‬‬

‫دو ﻧﻮع ‪ text box‬در ‪ html‬ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد ‪.‬‬
‫ﯾﮏ ﺧﻄﯽ ‪:‬‬
‫>‪<input type="text"/‬‬
‫و ﭼﻨﺪ ﺧﻄﯽ ‪:‬‬
‫>‪<textarea>Content</textarea‬‬

‫ﺑﺮاي درﺳﺖ ﮐﺮدن ﯾﮏ ‪ textbox‬ﯾﮏ ﺧﻄﯽ ﻣﯽ ﺑﺎﯾﺴﺖ ﺻﻔﺖ ‪ type‬ﻋﻨﺼﺮ ‪ input‬را ﺑﺮاﺑﺮ ‪ text‬ﻗﺮار دﻫﯿﻢ ‪ .‬ﺻﻔﺖ ‪ size‬ﻃﻮل‬
‫‪ textbox‬را ﺑﺮ ﺣﺴﺐ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮﻫﺎ ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ‪ .‬ﻣﻘﺪار ﺻﻔﺖ ‪ value‬ﻣﻘﺪار ﭘﯿﺶ ﻓﺮض ﻣﻮﺟﻮد داﺧﻞ ‪ textbox‬را ﻣﺸﺨﺺ‬
‫ﻣﯽ ﮐﻨﺪ ‪ .‬ﺻﻔﺖ ‪ maxlength‬ﺣﺪاﮐﺜﺮ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎﯾﯽ ﮐﻪ ﺑﺘﻮان در ‪ textbox‬را وارد ﮐﺮد را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ‪.‬‬

‫>‪<input type="text" size="25" maxlength="50" value="initial value" /‬‬

‫ﻋﻨﺼﺮ ‪ textarea‬ﺑﺮاي اﯾﺠﺎد ﻓﯿﻠﺪ ﻫﺎي ﭼﻨﺪ ﺧﻄﯽ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد ‪ .‬از ﺻﻔﺖ ﻫﺎي ‪ rows‬و ‪ cols‬ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﻃﻮل‬
‫و ﻋﺮض ‪ textarea‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪.‬‬
‫>‪<textarea rows="25" cols="5">initial value</textarea‬‬
‫ﺑﺮ ﺧﻼف ‪ input‬اﯾﻦ ﻋﻨﺼﺮ اﻣﮑﺎن ﻣﺸﺨﺺ ﮐﺮدن ﺣﺪاﮐﺜﺮ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي را ﻧﺪارد ‪.‬‬

‫ﺑﺎزﯾﺎﺑﯽ و ﺗﻐﯿﯿﺮ ﻣﻘﺪار ﯾﮏ ‪: textbox‬‬

‫اﮔﺮ ﭼﻪ ﻫﺮ دو ﻋﻨﺼﺮ ﺑﺎﻻ ﺗﻔﺎوت ﻫﺎﯾﯽ دارﻧﺪ اﻣﺎ ﻫﺮ دوي آن ﻫﺎ از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ value‬ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﻣﻘﺪار وارد ﺷﺪه در آن ﻫﺎ ﭘﺸﺘﯿﺒﺎﻧﯽ‬
‫ﻣﯽ ﮐﻨﻨﺪ ‪.‬‬
‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي ﺑﺎزﯾﺎﻓﺖ ﻣﻘﺪار وارد ﺷﺪه در ﻓﯿﻠﺪي ﺑﻪ ﻧﺎم )ﯾﺎ ‪ txt1 (Id‬ﻣﯽ ﺗﻮان ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﺮد ‪:‬‬

‫;)"‪var oTextbox1 = document.getElementById("txt1‬‬

‫ﭼﻮن ﻣﻘﺪاري ﮐﻪ ﺧﺎﺻﯿﺖ ‪ value‬ﺑﺮﻣﯽ ﮔﺮداﻧﺪ ﯾﮏ رﺷﺘﻪ ﺳﺎده اﺳﺖ ﻣﯽ ﺗﻮان از ﺗﻤﺎﻣﯽ ﻣﺘﺪ ﻫﺎ و ﺧﻮاﺻﯽ ﮐﻪ ﻗﺒﻼ ﺑﺮاي رﺷﺘﻪ ﻫﺎ اﺷﺎره‬
‫ﮐﺮدﯾﻢ اﺳﺘﻔﺎده ﮐﺮد ‪.‬‬
‫;)'‪alert ('oTextbox1.length‬‬

‫‪۴٢‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫از اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﺮاي ﻗﺮاردادن ﻣﻘﺎدﯾﺮ ﺟﺪﯾﺪ در ‪ textbox‬ﻫﺎ ﻧﯿﺰ ﻣﯽ ﺗﻮان اﺳﺘﻔﺎده ﮐﺮد ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺎ دﺳﺘﻮر زﯾﺮ ﻣﯽ ﺗﻮان ﻣﻘﺎدﯾﺮ‬
‫ﺟﺪﯾﺪي را ﺑﻪ ‪) oTextbox1‬ﮐﻪ در ﺑﺎﻻ ذﮐﺮ ﺷﺪ( اﺿﺎﻓﻪ ﮐﻨﯿﻢ ‪:‬‬
‫;'‪oTextbox1.value='first textbox‬‬

‫اﻧﺘﺨﺎب ﻣﺘﻦ ﻫﺎي داﺧﻞ ‪ textbox‬ﻫﺎ ‪:‬‬

‫ﻫﺮ دو ﻧﻮع ﻓﯿﻠﺪ ﺑﺎﻻ از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ select‬ﺑﺮاي اﻧﺘﺨﺎب ﺗﻤﺎﻣﯽ ﻣﺘﻦ داﺧﻞ آن ﻫﺎ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ ‪.‬‬
‫ﺑﺮاي اﯾﻦ ﮐﺎر اوﻻ ﺗﻤﺮﮐﺰ )‪ (focus‬ﺻﻔﺤﻪ ﺑﺎﯾﺪ ﺑﺮ روي آن ﻗﺮار ﮔﯿﺮد ‪ .‬ﺑﺮاي اﻃﻤﯿﻨﺎن از اﯾﻦ اﻣﺮ ﺑﺎﯾﺪ ﻫﻤﯿﺸﻪ ﻗﺒﻞ از ﻣﺘﺪ )(‪ select‬از‬
‫ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ focus‬اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ ‪) .‬اﻟﺒﺘﻪ اﯾﻦ ﮐﺎر در ﺗﻤﺎﻣﯽ ﻣﺮورﮔﺮ ﻫﺎ اﻟﺰاﻣﯽ ﻧﯿﺴﺖ اﻣﺎ ﺑﻬﺘﺮ اﺳﺖ ﻫﻤﯿﺸﻪ اﻧﺠﺎم ﺷﻮد ‪(.‬‬
‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي اﻧﺘﺨﺎب ﺗﻤﺎﻣﯽ ﻣﺘﻦ ﻣﻮﺟﻮد در ‪ textbox‬ﺑﺎﻻ ‪:‬‬
‫;)(‪oTextbox1.focus‬‬
‫;)(‪oTextbox1.select‬‬

‫روﯾﺪاد ﻫﺎي ‪ textbox‬ﻫﺎ ‪:‬‬

‫ﻫﺮ دو ﻧﻮع ﻓﯿﻠﺪ ﺑﺎﻻ ﻋﻼوه ﺑﺮ ﭘﺸﺘﯿﺒﺎﻧﯽ از روﯾﺪاد ﻫﺎي ‪ blur‬و ‪ focus‬از دو روﯾﺪاد ﺟﺪﯾﺪ ﺑﻪ ﻧﺎم ﻫﺎي ‪ change‬و ‪ select‬ﻧﯿﺰ ﭘﺸﺘﯿﺒﺎﻧﯽ‬
‫ﻣﯽ ﮐﻨﻨﺪ ‪.‬‬
‫‪ : Change‬اﯾﻦ روﯾﺪاد وﻗﺘﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﺑﻌﺪ از ﺗﻐﯿﯿﺮ ﻣﺘﻦ داﺧﻞ ‪ textbox‬ﻫﺎ ‪ ،‬آن ﻫﺎ را از ﺣﺎﻟﺖ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﺧﺎرج ﮐﻨﺪ ‪.‬‬
‫‪ : Select‬اﯾﻦ روﯾﺪاد وﻗﺘﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﯾﮏ ﯾﺎ ﭼﻨﺪ ﮐﺎراﮐﺘﺮ از رﺷﺘﻪ ﻫﺎي داﺧﻞ ﯾﮏ ‪ textbox‬ﭼﻪ ﺑﻪ ﺻﻮرت دﺳﺘﯽ ﯾﺎ ﺗﻮﺳﻂ ﻣﺘﺪ‬
‫)(‪ select‬اﻧﺘﺨﺎب ﺷﻮﻧﺪ ‪.‬‬
‫ﺗﻔﺎوت روﯾﺪاد ﻫﺎي ‪ change‬و ‪ blur‬اﯾﻦ اﺳﺖ ﮐﻪ روﯾﺪاد ‪ blur‬ﺗﻨﻬﺎ زﻣﺎﻧﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺧﺎرج ﺷﻮد و‬
‫روﯾﺪاد ‪ change‬ﻧﯿﺰ وﻗﺘﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻋﻼوه ﺑﺮ ﺗﻐﯿﯿﺮ ﻣﺘﻦ داﺧﻞ ‪ textarea‬ﻫﺎ ‪ ،‬ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﻧﯿﺰ از آن ﻫﺎ ﺧﺎرج ﻣﯽ ﺷﻮد ‪.‬‬
‫اﮔﺮ ﻣﺘﻦ داﺧﻞ ‪ textbox‬ﺛﺎﺑﺖ ﺑﺎﺷﺪ و ﻓﻘﻂ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از ﻋﻨﺼﺮ ﺑﺮود ‪ blur‬رخ ﻣﯽ دﻫﺪ اﻣﺎ اﮔﺮ ﻣﺘﻦ ﻫﻢ ﺗﻐﯿﯿﺮ ﮐﺮده ﺑﺎﺷﺪ اﺑﺘﺪا روﯾﺪاد‬
‫‪ change‬و ﺑﻪ دﻧﺒﺎل آن ‪ blur‬رخ ﺧﻮاﻫﺪ داد ‪.‬‬

‫اﻧﺘﺨﺎب ﺧﻮدﮐﺎر ﻣﺘﻦ درون ‪ textbox‬ﻫﺎ ‪:‬‬

‫ﺑﺮاي اﻧﺘﺨﺎب ﺧﻮدﮐﺎر ﻣﺘﻦ درون ﯾﮏ ‪ textbox‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﺑﺮ روي آن ﻫﺎ ﻣﯽ رو د ﻣﯽ ﺗﻮان ﺑﻪ راﺣﺘﯽ از دﺳﺘﻮر‬
‫)(‪ this.select‬در روﯾﺪاد ‪ onFocus‬ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ اﺳﺘﻔﺎده ﻧﻤﻮد ‪.‬‬
‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ‪:‬‬
‫>‪<input type="text" onfocus="this.select();" /‬‬
‫>‪<textarea onfocus="this.select()"></textarea‬‬

‫ﭼﺮﺧﺶ ‪ Tab‬ﺑﯿﻦ ﻋﻨﺎﺻﺮ ﻓﺮم ﺑﻪ ﺻﻮرت ﺧﻮدﮐﺎر ‪:‬‬

‫ﺑﻌﺪ از ﺗﮑﻤﯿﻞ ‪ textfield‬ﻫﺎﯾﯽ ﮐﻪ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي ﻣﺸﺨﺼﯽ را ﻗﺒﻮل ﻣﯽ ﮐﻨﻨﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﮐﻨﺘﺮل )ﺗﻤﺮﮐﺰ( ﺻﻔﺤﻪ را ﺑﻪ دﯾﮕﺮ ﻋﻨﺎﺻﺮ‬
‫ﺻﻔﺤﻪ ﻣﻨﺘﻘﻞ ﮐﻨﯿﺪ ‪.‬‬

‫ﺑﺮاي اﯾﻦ ﮐﺎر ﻣﯽ ﺗﻮاﻧﯿﻢ از ﺻﻔﺖ ‪ maxlength‬درﺗﮓ ﻫﺎي ‪ input‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪:‬‬

‫>‪<input type="text" maxlength="4" /‬‬

‫‪۴٣‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﮐﺎري ﮐﻪ ﺑﺎﯾﺪ در اﯾﻨﺠﺎ اﻧﺠﺎم دﻫﯿﻢ ﺗﺸﺨﯿﺺ وارد ﺷﺪن ﺣﺪاﮐﺜﺮ ﮐﺎراﮐﺘﺮ ﻫﺎ و ﻓﺮاﺧﻮاﻧﯽ ﻣﺘﺪ )(‪ focus‬ﺑﺮاي ﻋﻨﺼﺮ ﻓﺮم ﺑﻌﺪي اﺳﺖ ‪ .‬ﺑﺮاي‬
‫اﯾﻦ ﮐﺎر از ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم ‪ test‬اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬

‫{)‪function test(oTextbox‬‬
‫;‪var oForm = oTextbox.form‬‬

‫‪//make sure the textbox is not the last field in the form‬‬
‫‪if (oForm.elements[oForm.elements.length-1] != oTextbox‬‬
‫{ ))"‪&& oTextbox.value.length == oTextbox.getAttribute("maxlength‬‬
‫{ )‪for (var i=0; i < oForm.elements.length; i++‬‬
‫{ )‪if (oForm.elements[i] == oTextbox‬‬
‫{ )‪for(var j=i+1; j < oForm.elements.length; j++‬‬
‫{ )"‪if (oForm.elements[j].type != "hidden‬‬
‫;)(‪oForm.elements[j].focus‬‬
‫;‪return‬‬
‫}‬
‫}‬
‫;‪return‬‬
‫}‬
‫}‬
‫}‬
‫;}‬
‫ﺗﺎﺑﻌﯽ ﮐﻪ ﻣﺎ ﻧﻮﺷﺘﯿﻢ ﺑﺎﯾﺪ ﺑﻌﺪ از ﻫﺮ ﺑﺎر وارد ﮐﺮدن ﮐﺎراﮐﺘﺮ داﺧﻞ ‪ textbox‬ﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﺷﻮد ‪ .‬ﺑﺮاي اﯾﻨﮑﺎر از روﯾﺪاد ‪ onKeyUp‬اﺳﺘﻔﺎده‬
‫ﺧﻮاﻫﯿﻢ ﮐﺮد ﺑﻪ ﺻﻮرت زﯾﺮ ‪:‬‬
‫>‪<input type='text' maxlength='4' onKeyUp='test(this)' /‬‬

‫ﻣﺤﺪود ﮐﺮدن ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي در ﯾﮏ ‪: textarea‬‬

‫اﮔﺮ ﭼﻪ ﯾﮏ ‪ textfield‬داراي ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم ‪ maxlength‬ﺑﺮاي ﻣﺤﺪودﮐﺮدن ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي اﺳﺖ اﻣﺎ ﯾﮏ ‪ textarea‬ﻓﺎﻗﺪ اﯾﻦ‬
‫ﺻﻔﺖ اﺳﺖ ‪ .‬اﻣﺎ ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﻮﺳﻂ ﯾﮏ ﮐﺪ ﺳﺎده ‪ javascript‬اﯾﻨﮑﺎر را اﻧﺠﺎم دﻫﯿﻢ ‪.‬‬
‫ﺑﺮاي اﯾﻦ ﮐﺎر اﺑﺘﺪا ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم )(‪ isNotMax‬ﺗﻌﺮﯾﻒ ﺧﻮاﻫﯿﻢ ﮐﺮد ‪ .‬ﺑﻪ ﺻﻮرت زﯾﺮ ‪:‬‬
‫{)‪Function isNotMax(oTextbox‬‬
‫; )'‪Return oTextbox.value.length != oTextarea.getAttribute('maxlength‬‬
‫}‬
‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ ﺑﯿﻨﯿﺪ اﯾﻦ ﺗﺎﺑﻊ ﺧﯿﻠﯽ ﺳﺎده اﺳﺖ ‪ .‬ﻓﻘﻂ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي وارد ﺷﺪه در ‪ textbox‬را ﺑﺎ ﺻﻔﺖ ‪ maxlength‬ﻋﻨﺼﺮ ﻣﻮرد‬
‫ﻧﻈﺮ ﻣﻘﺎﯾﺴﻪ ﻣﯽ ﮐﻨﺪ و در ﺻﻮرﺗﯽ ﮐﻪ ﺑﺮاﺑﺮ ﻧﺒﺎﺷﺪ ‪ True‬و در ﻏﯿﺮاﯾﻨﺼﻮرت ‪ False‬را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ ‪.‬‬
‫ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﺻﻔﺖ ‪ maxlength‬ﺑﺮاي ‪ textarea‬ﺻﻔﺘﯽ ﻏﯿﺮ اﺳﺘﺎﻧﺪارد اﺳﺖ اﻣﺎ ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﻮﺳﻂ ﻣﺘﺪ ‪ getAttribute‬ﻣﻘﺪار‬
‫آن را ﺑﺪﺳﺖ آورﯾﻢ ‪.‬‬
‫در ﻣﺮﺣﻠﻪ ﺑﻌﺪ ﻣﺎ ﺑﺎﯾﺪ اﯾﻦ ﺗﺎﺑﻊ را در روﯾﺪاد ‪ onKeyPress‬ﻋﻨﺼﺮﻣﺎن ﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﮐﻨﯿﻢ ‪ .‬اﯾﻦ روﯾﺪاد ﻗﺒﻞ از وارد ﮐﺮدن ﻫﺮ ﮐﺎراﮐﺘﺮ رخ‬
‫ﺧﻮاﻫﺪ داد ﮐﻪ دﻗﯿﻘﺎ زﻣﺎﻧﯽ اﺳﺖ ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ ﺣﺪاﮐﺜﺮ رﺳﯿﺪن ﺗﻌﺪاد ﮐﺎرﮐﺘﺮ ﻫﺎي ورودي را ﭼﮏ ﮐﻨﯿﻢ ‪ .‬ﭼﯿﺰي ﻣﺜﻞ ﮐﺪ زﯾﺮ ‪:‬‬
‫‪<textarea rows='10' cols='25' maxlength='150' onKeyPress='return‬‬
‫>‪isNotMax(this)'></textarea‬‬
‫ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ ﻣﻘﺪار ﺑﺮﮔﺸﺘﯽ از ﺗﺎﺑﻊ ﺑﻪ ﮐﻨﺘﺮل ﮐﻨﻨﺪه ي روﯾﺪاد ‪ onKeyPress‬ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد ‪ .‬اﻟﺒﺘﻪ اﯾﻦ ﺷﯿﻮه از راه ﻫﺎي ﻗﺪﯾﻤﯽ‬
‫ﮐﻨﺘﺮل رﻓﺘﺎر ﭘﯿﺶ ﻓﺮض ﯾﮏ روﯾﺪاد اﺳﺖ ‪.‬‬
‫ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي از ‪ MAX‬ﮐﻤﺘﺮ ﺑﺎﺷﺪ ﺗﺎﺑﻊ ‪ True‬ﺑﻪ ﻣﻌﻨﯽ اداﻣﻪ رﻓﺘﺎر ﻋﺎدي روﯾﺪاد را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ در ﻏﯿﺮ اﯾﻦ‬
‫ﺻﻮرت ﻣﻮﺟﺐ ﺟﻠﻮﮔﯿﺮي از رﻓﺘﺎر ﻋﺎدي روﯾﺪاد و در ﻧﺘﯿﺠﻪ ﮐﺎراﮐﺘﺮ ﻫﺎي ﺑﯿﺶ از ﺣﺪ ﻣﺠﺎز ﺧﻮاﻫﺪ ﺷﺪ ‪.‬‬

‫‪۴۴‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﮐﺎر ﺑﺎ ‪ listbox‬ﻫﺎ و ‪ combobox‬ﻫﺎ ‪:‬‬
‫‪ Listbox‬ﻫﺎ و ‪ combobox‬ﻫﺎ در ‪ HTML‬ﺑﻮﺳﯿﻠﻪ ﺗﮕﯽ ﺑﻪ ﻧﺎم ‪ select‬اﯾﺠﺎد ﻣﯽ ﺷﻮﻧﺪ ﮐﻪ ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض ﻣﺮورﮔﺮ ﻫﺎ اﯾﻦ‬
‫ﻋﻨﺼﺮ را ﺑﻪ ﺻﻮرت ‪ combobox‬ﻧﺸﺎن ﻣﯽ دﻫﻨﺪ ‪.‬‬
‫>"‪<select name="selAge" id="selAge‬‬
‫>‪<option value="1">18-21</option‬‬
‫>‪<option value="2">22-25</option‬‬
‫>‪<option value="3">26-29</option‬‬
‫>‪<option value="4">30-35</option‬‬
‫>‪<option value="5">Over 35</option‬‬
‫>‪</select‬‬
‫ﻣﻘﺪار ﺻﻔﺖ ‪ value‬آﯾﺘﻤﯽ ﮐﻪ ﺗﻮﺳﻂ ﮐﺎرﺑﺮ اﻧﺘﺨﺎب ﻣﯽ ﺷﻮد ﺑﻪ ﺳﺮور ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد ‪.‬‬
‫ﺑﺮاي ﻧﺸﺎن دادن ﯾﮏ ‪ listbox‬ﻓﻘﻂ ﮐﺎﻓﯽ اﺳﺖ ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم ‪ size‬را ﺑﺎ ﻣﻘﺪاري ﮐﻪ ﻣﺸﺨﺺ ﮐﻨﻨﺪه ي ﺗﻌﺪاد آﯾﺘﻢ ﻫﺎي ﻗﺎﺑﻞ ﻧﻤﺎﯾﺶ ﺑﻪ‬
‫ﺻﻮرت ﭘﯿﺶ ﻓﺮض اﺳﺖ ﺑﻪ ﺗﮓ ‪ select‬اﺿﺎﻓﻪ ﮐﻨﯿﺪ ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﮐﺪ زﯾﺮ ‪ listbox‬ي ﺑﺎ ‪ 5‬آﯾﺘﻢ ﻧﻤﺎﯾﺸﯽ ﺑﺼﻮرﯾﺖ ﭘﯿﺶ ﻓﺮض را‬
‫ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﺪ ‪:‬‬
‫>"‪<select name="selAge" id="selAge" size="3‬‬
‫>‪<option value="1">18-21</option‬‬
‫>‪<option value="2">22-25</option‬‬
‫>‪<option value="3">26-29</option‬‬
‫>‪<option value="4">30-35</option‬‬
‫>‪<option value="5">Over 35</option‬‬
‫>‪</select‬‬
‫ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻫﺮ دو ﻧﻮع ﻋﻨﺼﺮ ﻓﻮق ﻣﯽ ﺗﻮان ﻃﺒﻖ ﻗﻮاﻋﺪي ﮐﻪ ﻗﺒﻼ ﮔﻔﺘﯿﻢ ﻋﻤﻞ ﮐﻨﯿﺪ ‪:‬‬
‫;)"‪oListbox = document.getElementById("selAge‬‬

‫‪ DOM‬ﺑﺮاي ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ‪ select‬آراﯾﻪ اي ﺑﻪ ﻧﺎم ‪ option‬ﮐﻪ ﻫﺮ ﺧﺎﻧﻪ آن اﺷﺎره ﺑﻪ ‪ option‬ي از آن ﻋﻨﺼﺮ دارد ﺗﻌﺮﯾﻒ ﮐﺮده اﺳﺖ ‪.‬‬
‫ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺮاي ﻧﻤﺎﯾﺶ ﻣﺘﻦ )ﻋﻨﻮان( ﻫﺮ ‪ option‬و ﻣﻘﺪار ﺻﻔﺖ ‪ value‬آن ﻫﺎ از روش ﻫﺎي ﻗﺒﻠﯽ اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪ .‬ﻣﺜﻼ ‪:‬‬

‫;)"‪oListbox = document.getElementById("selAge‬‬

‫ﻋﻼوه ﺑﺮ اﯾﻦ ﻫﺮ ‪ option‬داراي ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ index‬اﺳﺖ ﮐﻪ در واﻗﻊ ﻣﻮﻗﻌﯿﺖ آن را در آراﯾﻪ ‪ option‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ‪.‬‬

‫"‪alert(oListbox.options[1].index); //outputs "1‬‬

‫اﻟﺒﺘﻪ ﭼﻮن ‪ option‬ﯾﮏ آراﯾﻪ اﺳﺖ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ length‬ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﺗﻌﺪاد ﮐﻞ ‪ option‬ﻫﺎي ‪ select‬اﺳﺘﻔﺎده‬
‫ﮐﻨﯿﻢ ‪.‬‬
‫اﻣﺎ ﺣﺎل از ﮐﺠﺎ ﺑﻔﻬﻤﯿﻢ ﮐﻪ ﮐﺪام ‪) option‬آﯾﺘﻢ( ﺗﻮﺳﻂ ﮐﺎرﺑﺮ اﻧﺘﺨﺎب ﺷﺪه اﺳﺖ ؟‬

‫ﺑﺎزﯾﺎﻓﺘﻦ ﯾﺎ ﺗﻐﯿﯿﺮ دادن ‪) option‬ﻫﺎ(ي اﻧﺘﺨﺎب ﺷﺪه ‪:‬‬

‫ﻋﻨﺼﺮ ‪ select‬داراي ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ selectedIndex‬اﺳﺖ ﮐﻪ ‪ Index‬آﯾﺘﻢ اﻧﺘﺨﺎب ﺷﺪه را در ﺧﻮد ﻧﮕﻪ ﻣﯽ دارد ‪ .‬و در ﺻﻮرﺗﯽ ﮐﻪ‬
‫ﻫﯿﭻ آﯾﺘﻤﯽ اﻧﺘﺨﺎب ﻧﺸﺪه ﺑﺎﺷﺪ ﻣﻘﺪار ‪ -1‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬
‫اﻣﺎ ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ داﻧﯿﺪ ﺑﺎ اﺿﺎﻓﻪ ﮐﺮدن ﺻﻔﺘﯽ ﻣﺎﻧﻨﺪ '‪ multiple='multiple‬ﺑﻪ ﻋﻨﺼﺮ ‪ select‬اﻣﮑﺎن اﻧﺘﺨﺎب ﺑﯿﺶ از ﯾﮏ آﯾﺘﻢ در‬
‫آنِ واﺣﺪ اﻣﮑﺎن ﭘﺬﯾﺮ اﺳﺖ ‪.‬‬
‫در اﯾﻦ ﺻﻮرت ﺧﺎﺻﯿﺖ ‪ selectedIndex‬ﺣﺎوي اوﻟﯿﻦ ﻋﻨﺼﺮ اﻧﺘﺨﺎب ﺷﺪه از ‪ list‬ﺧﻮاﻫﺪ ﺑﻮد اﻣﺎ اﯾﻦ ﮐﻤﮑﯽ ﺑﻪ ﻣﺎ ﻧﻤﯽ ﮐﻨﺪ ‪.‬‬

‫‪۴۵‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪www.SoftGozar.Com‬‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﭼﻮن ﻣﺎ ﺑﻪ ﺗﻤﺎم ‪ index‬ﺗﻤﺎم آﯾﺘﻢ ﻫﺎي اﻧﺘﺨﺎب ﺷﺪه اﺣﺘﯿﺎج دارﯾﻢ ‪:‬‬
‫ﺑﺮاي اﯾﻦ ﮐﺎر ﻣﺎ اﺣﺘﯿﺎج ﺑﻪ ﯾﮏ ﺗﺎﺑﻊ دارﯾﻢ ‪.‬‬
‫اﯾﻦ ﺗﺎﺑﻊ در ﻃﻮل آﯾﺘﻢ ﻫﺎي ﯾﮏ ‪ listbox‬ﭼﺮﺧﺶ ﮐﺮده و ﻣﻘﺪار ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ selected‬ﮐﻪ ﻣﺸﺨﺺ ﮐﻨﻨﺪه ي اﻧﺘﺨﺎب ﺷﺪن ﯾﺎ ﻧﺸﺪن‬
‫آﯾﺘﻢ اﺳﺖ را ﺑﺮرﺳﯽ ﮐﺮده و ‪ index‬آن ‪ option‬را ﺑﻪ آراﯾﻪ اي اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﺪ ‪ .‬ﺧﺎﺻﯿﺖ ‪ selected‬ﻓﻘﻂ ﻣﯽ ﺗﻮاﻧﺪ ﯾﮑﯽ از ﻣﻘﺎدﯾﺮ‬
‫‪) true‬اﻧﺘﺨﺎب ﺷﺪه( ﯾﺎ ‪) Fasle‬اﻧﺘﺨﺎب ﻧﺸﺪه( را در ﺑﺮ دارد ‪.‬‬

‫{ )‪function getSelectedIndexes (oListbox‬‬

‫;‪var arrIndexes = new Array‬‬
‫{ )‪for (var i=0; i < oListbox.options.length; i++‬‬
‫{ )‪if (oListbox.options[i].selected‬‬
‫;)‪arrIndexes.push(i‬‬
‫}‬
‫}‬
‫;‪return arrIndexes‬‬
‫;}‬
‫از اﯾﻦ ﺗﺎﺑﻊ ﻣﯽ ﺗﻮان ﻫﻢ ﺑﺮاي ﺑﺪﺳﺖ آوردن آﯾﺘﻢ ﻫﺎي اﻧﺘﺨﺎب ﺷﺪه و ﻫﻢ ﺗﻌﺪاد آن ﻫﺎ اﺳﺘﻔﺎده ﮐﺮد ‪.‬‬

‫اﺿﺎﻓﻪ ﮐﺮدن ‪ option‬ﻫﺎ ‪:‬‬

‫ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪ ،‬آﯾﺘﻢ ﻫﺎي ﺟﺪﯾﺪي ﺑﻪ ‪ list‬ﻫﺎ اﺿﺎﻓﻪ ﮐﻨﯿﻢ ‪.‬‬
‫ﺑﺮاي اﯾﻦ ﮐﺎر ﺗﺎﺑﻌﯽ ﺑﺎ ﺳﻪ آرﮔﻮﻣﺎن ﻣﯽ ﻧﻮﯾﺴﯿﻢ ‪:‬‬
‫‪ list‬ي ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ روي آن ﮐﺎر ﮐﻨﯿﻢ ‪ ،‬ﻧﺎم آﯾﺘﻤﯽ ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ و ﻣﻘﺪاري ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ ‪.‬‬
‫ﺑﻌﺪ ﺗﻮﺳﻂ ﻣﺘﺪ ﻫﺎي ﻗﺒﻠﯽ ‪ DOM‬ﯾﮏ ﻋﻨﺼﺮ ‪ option‬ﺟﺪﯾﺪ اﯾﺠﺎد ﮐﺮده و ﺑﻌﺪ آن را ﺑﻪ ﻋﻨﺼﺮ ‪ select‬اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﯿﻢ‬

‫{ )‪Function test (oListbox, sName, sValue‬‬

‫;)"‪var oOption = document.createElement("option‬‬
‫;))‪oOption.appendChild(document.createTextNode(sName‬‬
‫{ )‪if (arguments.length == 3‬‬
‫;)‪oOption.setAttribute("value", sValue‬‬
‫}‬
‫;)‪oListbox.appendChild(oOption‬‬
‫}‬
‫ﭼﻮن ﺻﻔﺖ ‪ value‬ﺑﺮاي ﯾﮏ ‪ option‬اﺧﺘﯿﺎري اﺳﺖ ﻣﯽ ﺗﻮاﻧﯿﻢ در ﺻﻮرﺗﯽ ﮐﻪ ‪ value‬ﺑﺮاي ﺗﺎﺑﻊ ﻓﺮﺳﺘﺎده ﺷﺪه اﺳﺖ آن را ﺑﻪ ‪option‬‬
‫اﺿﺎﻓﻪ ﮐﻨﯿﻢ ‪ .‬ﺑﺮاي ﭼﮏ ﮐﺮدن اﯾﻨﮑﻪ ‪ value‬ﻓﺮﺳﺘﺎده ﺷﺪه ﯾﺎ ﻧﻪ از دﺳﺘﻮر ‪ arqument.length‬اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ ‪.‬‬

‫ﺣﺬف ‪ option‬ﻫﺎ ‪:‬‬

‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻋﻼوه ﺑﺮ اﻣﮑﺎن اﺿﺎﻓﻪ ﮐﺮدن ‪ option‬ﻫﺎ ‪ ،‬اﻣﮑﺎن ﺣﺬف آن ﻫﺎ را ﻧﯿﺰ ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫ﯾﮑﯽ از روش ﻫﺎي ﻗﺪﯾﻤﯽ ﺑﺮاي اﯾﻨﮑﺎر اﺳﺘﻔﺎده از آراﯾﻪ ي ‪ options‬و ﻗﺮاردادن ﻣﻘﺪار ‪ null‬ﺑﺮاي ﻋﻨﺼﺮي ار آن ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﺣﺬف‬
‫ﮐﻨﯿﻢ اﺳﺖ ‪.‬‬
‫‪oListbox.remove(0); //remove the first option‬‬

‫روش ﺑﻬﺘﺮ و ﺟﺪﯾﺪﺗﺮ اﺳﺘﻔﺎده از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ remove‬اﺳﺖ ﮐﻪ آرﮔﻮﻣﺎن )‪ (index‬ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺑﺮاي ﺣﺬف را ﻣﯽ ﮔﯿﺮد ‪:‬‬
‫{ )‪Function test (oListbox, iIndex‬‬
‫;)‪oListbox.remove(iIndex‬‬
‫}‬

‫‪۴۶‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﮔﺮ ﻣﯽ ﺧﻮاﻫﯿﺪ ﻫﺮ ﯾﮏ از ‪ option‬ﻫﺎي ﻣﻮﺟﻮد در ﯾﮏ ‪ listbox‬را ﺣﺬف ﮐﻨﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﻣﺘﺪ )(‪ remove‬ﺑﺮاي ﻫﺮ ﮐﺪام از آن ﻫﺎ ﺻﺪا‬
‫ﺑﺰﻧﯿﺪ ‪.‬‬
‫{ )‪Function test (oListbox‬‬
‫{ )‪for (var i=oListbox.options.length-1; i >= 0; i--‬‬
‫;)‪ListUtil.remove(oListbox, i‬‬
‫}‬
‫}‬
‫ﮐﺪ ﺑﺎﻻ ﺑﺮاي ﺣﺬف ‪ ،‬آﯾﺘﻢ ﻫﺎ را ﺑﺮ ﻋﮑﺲ ﻃﯽ ﻣﯽ ﮐﻨﺪ ‪ .‬اﯾﻦ ﮐﺎر اﻟﺰاﻣﯽ اﺳﺖ ﭼﺮا ﮐﻪ ﺑﺎ ﻫﺮ ﺑﺎر ﺣﺬف ﺷﺪن ﯾﮏ آﯾﺘﻢ از ﻟﯿﺴﺖ ﺧﺎﺻﯿﺖ‬
‫‪ index‬ﻫﺮ ‪ option‬دوﺑﺎره ﭼﯿﻨﯽ ﻣﯽ ﺷﻮد ‪.‬‬
‫ﺑﻪ اﯾﻦ دﻟﯿﻞ ﻫﻤﯿﺸﻪ ﺑﻬﺘﺮ اﺳﺖ اول ﻋﻨﺼﺮي ﺑﺎ ﺑﯿﺸﺘﺮﯾﻦ ‪ index‬ﺣﺬف ﺷﻮد و ﺳﭙﺲ ﻋﻨﺎﺻﺮ ﺑﺎ ‪ index‬ﭘﺎﯾﯿﻦ ﺗﺮ‪.‬‬

‫روﯾﺪاد ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﺗﻌﺎﻣﻼت ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺎ ‪ HTML‬از ﻃﺮﯾﻖ رﺧﺪاد روﯾﺪاد ﻫﺎﯾﯽ ﮐﻪ ﺑﻪ واﺳﻄﻪ دﺳﺘﮑﺎري ﻫﺎﯾﯽ ﮐﻪ ﮐﺎرﺑﺮ ﯾﺎ ﻣﺮورﮔﺮ ﺑﺮ روي ﺻﻔﺤﻪ اﻧﺠﺎم‬
‫ﻣﯽ دﻫﺪ ‪ ،‬اﻧﺠﺎم ﻣﯽ ﺷﻮد ‪.‬‬
‫ﻣﻮﻗﻌﯽ ﮐﻪ ﺻﻔﺤﻪ ﺑﺎرﮔﺬاري ﻣﯽ ﺷﻮد روﯾﺪادي رخ داده اﺳﺖ ‪ ،‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ ﺑﺮ روي دﮐﻤﻪ اي ﮐﻠﯿﮏ ﻣﯿﮑﻨﺪ ‪ ،‬ﺑﺎز ﻫﻢ روﯾﺪادي رخ داده‬
‫اﺳﺖ ‪ .‬ﻃﺮاﺣﺎن ﻣﯽ ﺗﻮاﻧﻨﺪ از اﯾﻦ روﯾﺪاد ﻫﺎ ﺑﺮاي اﺟﺮاي ﮐﺪ ﻫﺎﯾﯽ ﮐﻪ ﺑﻪ روﯾﺪاد ﻫﺎ ﭘﺎﺳﺦ ﻣﯽ دﻫﻨﺪ اﺳﺘﻔﺎده ﮐﻨﻨﺪ ﻣﺜﻼ دﮐﻤﻪ اي ﻣﻮﺟﺐ ﺑﺴﺘﻦ‬
‫ﭘﻨﺠﺮه ﺷﻮد ‪ ،‬ﭘﯿﻐﺎﻣﯽ را ﺑﻪ ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ دﻫﺪ ‪ ،‬داده ﻫﺎ را ارزش ﺳﻨﺠﯽ ﮐﻨﺪ و ‪. ...‬‬
‫روﯾﺪاد ﻫﺎ در واﻗﻊ ﻋﻤﻠﯿﺎت ﺧﺎﺻﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﯾﺎ ﺗﻮﺳﻂ ﮐﺎرﺑﺮ ﯾﺎ ﺗﻮﺳﻂ ﺧﻮد ﻣﺮورﮔﺮ اﻧﺠﺎم ﻣﯽ ﺷﻮﻧﺪ ‪ .‬اﯾﻦ روﺑﺪاد ﻫﺎ ﻧﺎم ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪click‬‬
‫‪ mouseover ، load ،‬و ‪ ...‬دارﻧﺪ ‪ .‬اﺻﻄﻼﺣﺎ ﺑﻪ ﺗﺎﺑﻌﯽ ﮐﻪ در ﭘﺎﺳﺦ ﺑﻪ ﯾﮏ روﯾﺪاد ﺻﺪا زده ﻣﯿﺸﻮد ‪) event Handler‬ﮐﻨﺘﺮﻟﮕﺮ‬
‫ﺣﺎدﺛﻪ ( ﻣﯽ ﮔﻮﯾﻨﺪ ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺗﺎﺑﻌﯽ ﮐﻪ ﺑﺮاي ﭘﺎﺳﺦ ﺑﻪ روﯾﺪاد ‪ click‬ﺻﺪا زده ﻣﯽ ﺷﻮد ﮐﻨﺘﺮﻟﮕﺮ ‪ onclick‬ﻧﺎﻣﯿﺪه ﻣﯽ ﺷﻮد ‪.‬‬
‫ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﮐﻨﺘﺮﻟﮕﺮ ﻫﺎي ﺣﺎدﺛﻪ ﺑﻪ دو روش ﻣﯽ ﺗﻮان ﻋﻤﻞ ﮐﺮد ‪ :‬از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﯾﺎ از ﻃﺮﯾﻖ ‪. HTML‬‬
‫ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﯾﮏ ﮐﻨﺘﺮﻟﮕﺮ از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺑﺘﺪا ﺑﺎﯾﺪ ﺑﻪ ﺷﯽء ﻣﻮرد ﻧﻈﺮ ارﺟﺎﻋﯽ اﯾﺠﺎد ﮐﺮده و ﺳﭙﺲ ﺗﺎﺑﻌﯽ را ﺑﻪ ﮐﻨﺘﺮﻟﮕﺮ‬
‫ﺣﺎدﺛﻪ آن )ﮐﻪ ﺑﻪ ﺻﻮرت ﯾﮏ ﺧﺎﺻﯿﺖ ﺑﺮاي آن ﺗﻌﺮﯾﻒ ﺷﺪه اﺳﺖ( ﻣﻨﺘﺴﺐ ﻣﯽ ﮐﻨﯿﻢ ‪ .‬ﺑﺮاي ﻣﺜﺎل ‪:‬‬

‫;)'‪Var oDiv = document.getElementById('div1‬‬

‫{)( ‪oDiv.onclick= function‬‬
‫;)'!!! ‪alert('I Was Clicked‬‬
‫}‬
‫دﻗﺖ ﮐﻨﯿﺪ ﮐﻪ در اﯾﻦ روش ﺑﺎﯾﺪ ﻧﺎم ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ ﺑﻪ ﺻﻮرت ﮐﻮﭼﮏ ﻧﻮﺷﺘﻪ ﺷﻮد ‪.‬‬
‫در روش دوم ﺷﻤﺎ ﯾﮏ ﺻﻔﺖ ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ را ﮐﻪ اﺳﮑﺮﯾﭙﺘﯽ را ﺑﻪ ﻋﻨﻮان ﻣﻘﺪار ﻣﯽ ﭘﺬﯾﺮد در ﺗﮓ ﻣﺮﺑﻮﻃﻪ ﻗﺮار دﻫﯿﻢ ‪ .‬ﺑﻪ ﺻﻮرت زﯾﺮ ‪:‬‬

‫>‪<div onclick='alert("I Was Clicked !!!")'></div‬‬

‫در اﯾﻦ روش ﻧﺎم ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﻫﺮ ﺷﮑﻠﯽ ﻧﻮﺷﺘﻪ ﺷﻮد ‪ .‬در ﻧﺘﯿﺠﻪ ‪ onclick‬ﻣﻌﺎدل اﺳﺖ ﺑﺎ ‪ OnClick :‬ﯾﺎ ‪ONCLICK‬‬
‫‪.‬‬

‫‪۴٧‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﻧﻮاع روﯾﺪاد ﻫﺎ ‪:‬‬
‫روﯾﺪاد ﻫﺎﯾﯽ ﮐﻪ در ﻣﺮورﮔﺮ رخ ﻣﯿﺪﻫﻨﺪ ﻣﻌﻤﻮﻻ ﺑﻪ ﭼﻨﺪ دﺳﺘﻪ زﯾﺮ ﺗﻘﺴﯿﻢ ﺑﻨﺪي ﻣﯽ ﺷﻮﻧﺪ ‪:‬‬
‫‪ ‬روﯾﺪاد ﻫﺎي ‪ mouse‬ﮐﻪ وﻗﺘﯽ ﮐﺎرﺑﺮ از ﻃﺮﯾﻖ ﻣﺎوﺳﺶ ﮐﺎرﻫﺎﯾﯽ را اﻧﺠﺎم ﻣﯽ دﻫﻨﺪ ‪ ،‬رخ ﻣﯽ دﻫﻨﺪ ‪.‬‬
‫‪ ‬روﯾﺪادﻫﺎي ‪ keyboard‬ﮐﻪ وﻗﺘﯽ ﮐﺎرﺑﺮ ﺑﻮﺳﯿﻠﻪ ‪ keyboard‬دﮐﻤﻪ اي را ﻓﺸﺎر ﻣﯽ دﻫﻨﺪ رخ ﻣﯽ دﻫﻨﺪ ‪.‬‬
‫‪ ‬روﯾﺪاد ﻫﺎي ‪ HTML‬ﮐﻪ ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻐﯿﯿﺮاﺗﯽ در ﭘﻨﺠﺮه ﻣﺮورﮔﺮ اﻧﺠﺎم ﻣﯽ ﺷﻮﻧﺪ رخ ﻣﯽ دﻫﻨﺪ ‪.‬‬
‫‪ ‬روﯾﺪاد ﻫﺎي ﺗﻐﯿﯿﺮ ﮐﻪ زﻣﺎﻧﯽ ﮐﻪ ﺗﻐﯿﯿﺮاﺗﯽ در ﺳﺎﺧﺘﺎر ‪ DOM‬ﺻﻔﺤﻪ اﻧﭽﺎم ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﻨﺪ ‪.‬‬

‫روﯾﺪادھﺎی ‪ : Mouse‬راﯾﺞ ﺗﺮﯾﻦ روﯾﺪاد ﻫﺎﯾﯽ ﻫﺴﺘﻨﺪ ﮐﻪ رخ ﻣﯽ دﻫﻨﺪ و ﺑﻪ ﺷﺮح زﯾﺮ ﻣﯽ ﺑﺎﺷﻨﺪ ‪:‬‬
‫‪ : Onclick ‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ ﭼﭗ ‪ mouse‬را ﻓﺸﺎر ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﺪ ‪) .‬ﻧﻪ دﮐﻤﻪ راﺳﺖ( ‪ .‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ‬
‫ﺑﺮ روي ﯾﮏ دﮐﻤﻪ ﺑﺎﺷﺪ و ﮐﺎرﺑﺮ ﮐﻠﯿﺪ ‪ Enter‬را ﻫﻢ ﺑﺰﻧﺪ اﯾﻦ روﯾﺪاد رخ ﻣﯿﺪﻫﺪ ‪.‬‬
‫‪ : Ondblclick ‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ دو ﺑﺎر دﮐﻤﻪ ﭼﭗ ‪ mouse‬را ﮐﻠﯿﮏ ﻣﯽ ﮐﻨﺪ رخ ﻣﯽ دﻫﺪ ‪.‬‬
‫‪ : Onmousedown ‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻫﺮ دﮐﻤﻪ اي از ‪ mouse‬را ﻓﺸﺎر دﻫﺪ رخ ﻣﯽ دﻫﺪ ‪.‬‬
‫‪ : onMouseOut ‬ﻣﻮﻗﻌﯽ رخ ﻣﯿﺪﻫﺪ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس ﺑﺮ روي ﻋﻨﺼﺮ اﺳﺖ و ﮐﺎرﺑﺮ آن را ﺑﻪ ﺑﯿﺮون از ﻣﺤﺪوده ﻋﻨﺼﺮ ﻫﺪاﯾﺖ‬
‫ﻣﯿﮑﻨﺪ ‪.‬‬
‫‪ : onmouseover ‬ﻣﻮﻗﻌﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس از ﺧﺎرج از ﻋﻨﺼﺮ ﺑﺮ روي ان ﻫﺪاﯾﺖ ﻣﯽ ﺷﻮد ‪.‬‬
‫‪ : onmouseup ‬ﻣﻮﻗﻌﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻫﺮدﮐﻤﻪ اي از ‪ mouse‬رﻫﺎ ﻣﯽ ﺷﻮد ‪.‬‬
‫‪ : Onmousemove ‬ﻣﮑﺮرا ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس ﺑﺮ روي ﻋﻨﺼﺮي اﺳﺖ رخ ﻣﯽ دﻫﺪ ‪.‬‬

‫ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد درﯾﮏ ﺻﻔﺤﻪ از روﯾﺪادﻫﺎي ﻓﻮق ﺑﻪ ﺧﻮﺑﯽ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ ‪.‬‬

‫ﺗﺮﺗﯿﺐ اﺟﺮاﯾﯽ روﯾﺪاد ﻫﺎ ‪:‬‬

‫ﻗﺒﻞ از رﺧﺪاد روﯾﺪاد ‪ click‬ﻫﻤﯿﺸﻪ اﺑﺘﺪا روﯾﺪاد ‪ mousedown‬و در ﭘﯽ آن ‪ mouseup‬و آﺧﺮ ﺳﺮ ‪ click‬رخ ﻣﯽ دﻫﺪ ‪.‬‬
‫درﻫﻨﮕﺎم اﺟﺮاي روﯾﺪاد ‪ dblclick‬روﯾﺪاد ﻫﺎي زﯾﺮ ﺑﻪ ﺗﺮﺗﯿﺐ اﺟﺮا ﻣﯽ ﺷﻮﻧﺪ ‪:‬‬
‫‪mousedown .١‬‬
‫‪mouseup .٢‬‬
‫‪click .٣‬‬
‫‪mousedown .۴‬‬
‫‪mouseup .۵‬‬
‫‪click .۶‬‬
‫‪dblclick .٧‬‬
‫ﻫﻨﮕﺎم ﺟﺎ ﺑﻪ ﺟﺎ ﺷﺪن ﻧﺸﺎﻧﮕﺮ ﻣﻮس از ﯾﮏ ﻋﻨﺼﺮ ﺑﺮ روي ﻋﻨﺼﺮ دﯾﮕﺮ ‪ ،‬اﺑﺘﺪا روﯾﺪاد ‪ mouseout‬ﺳﭙﺲ روﯾﺪاد ‪ mousemove‬ﺑﺮاي‬
‫ﻋﻨﺼﺮ ﺑﯿﻦ اﯾﻦ ذو و آﺧﺮ ﺳﺮ روﯾﺪاد ‪ mouseover‬رخ ﻣﯽ دﻫﺪ ‪.‬‬

‫‪۴٨‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫روﯾﺪادﻫﺎي ‪: keyboard‬‬
‫روﯾﺪاد ﻫﺎي ‪ keyboard‬ﺑﻪ واﺳﻄﻪ ﻋﻤﻠﯿﺎﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ ﺑﺮ روي ﺻﻔﺤﻪ ﮐﻠﯿﺪ اﻧﺠﺎم ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﻨﺪ ‪ .‬روﯾﺪاد ﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ ﺑﻪ ﺷﺮح‬
‫زﯾﺮ ﻣﯽ ﺑﺎﺷﻨﺪ ‪:‬‬
‫‪ : onkeydown ‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﻠﯿﺪي از ﺻﻔﺤﻪ ﮐﻠﯿﺪ زده ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﺪ ‪ .‬اﯾﻦ روﯾﺪاد ﻣﮑﺮرا زﻣﺎﻧﯽ ﮐﻪ دﮐﻤﻪ اي ﭘﺎﯾﯿﻦ‬
‫ﻧﮕﻪ داﺷﺘﻪ ﺑﺎﺷﺪ ﻧﯿﺰ رخ ﻣﯽ دﻫﺪ ‪.‬‬
‫‪ : Onkeypress ‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﻠﯿﺪي از ﺻﻔﺤﻪ ﮐﻠﯿﺪ زده ﻣﯽ ﺷﻮد و ﺑﻪ ﻣﻮﺟﺐ آن ﯾﮏ ﮐﺎراﮐﺘﺮ ﺑﺮﮔﺮداﻧﺪه ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﺪ ‪.‬‬
‫اﯾﻦ روﯾﺪاد ﻣﮑﺮرا زﻣﺎﻧﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ اي را ﭘﺎﯾﯿﻦ ﻧﮕﻪ ﻣﯿﺪارد ﻧﯿﺰ رخ ﻣﯽ دﻫﺪ ‪.‬‬
‫‪ : Onkeyup ‬ﻫﻨﮕﺎﻣﯽ رخ ﻣﯿﺪﻫﺪ ﮐﻪ دﮐﻤﻪ اي ﮐﻪ ﭘﺎﯾﯿﻦ ﺑﻮده اﺳﺖ رﻫﺎ ﺷﻮد ‪.‬‬

‫ﺗﺮﺗﯿﺐ اﺟﺮاﯾﯽ روﯾﺪاد ﻫﺎي ‪: keyboard‬‬

‫ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ ﯾﮏ ﮐﻠﯿﺪ ﮐﺎراﮐﺘﺮي را در ﺻﻔﺤﻪ ﮐﻠﯿﺪ ﻓﺸﺎر ﻣﯽ دﻫﺪ روﯾﺪاد ﻫﺎي زﯾﺮ ﺑﻪ ﺗﺮﺗﯿﺐ اﺟﺮا ﻣﯽ ﺷﻮﻧﺪ ‪:‬‬
‫‪keydown‬‬ ‫‪-١‬‬
‫‪Keypress‬‬ ‫‪-٢‬‬
‫‪Keyup‬‬ ‫‪-٣‬‬
‫اﮔﺮ ﮐﻠﯿﺪي ﻏﯿﺮ ﮐﺎراﮐﺘﺮي ﻣﺜﻞ ‪ shift‬ﻓﺸﺎر داده ﺷﻮد روﯾﺪاد ﻫﺎي زﯾﺮ ﺑﻪ ﺗﺮﺗﯿﺐ اﺟﺮا ﻣﯽ ﺷﻮﻧﺪ ‪:‬‬
‫‪Keydown‬‬ ‫‪-١‬‬
‫‪Keyup‬‬ ‫‪-٢‬‬
‫اﮔﺮ ﮐﺎرﺑﺮ ﮐﻠﯿﺪي ﮐﺎراﮐﺘﺮي را ﻓﺸﺎرداده و ﭘﺎﯾﯿﻦ ﻧﮕﻪ دارد روﯾﺪاد ﻫﺎي ‪ keypress‬و ‪ keydown‬ﻣﮑﺮرا ﯾﮑﯽ ﭘﺲ از دﯾﮕﺮي رخ ﻣﯽ دﻫﻨﺪ‬
‫ﺗﺎ زﻣﺎﻧﯽ ﮐﻪ ﮐﻠﯿﺪ رﻫﺎ ﺷﻮد ‪.‬‬
‫اﮔﺮ ﮐﺎرﺑﺮ ﮐﻠﯿﺪي ﻏﯿﺮ ﮐﺎراﮐﺘﺮي را ﻓﺸﺎرداده و ﭘﺎﯾﯿﻦ ﻧﮕﻪ دارد ﻓﻘﻂ روﯾﺪاد ‪ keydown‬ﻣﮑﺮرا اﺟﺮا ﻣﯿﺸﻮد ‪.‬‬

‫دﯾﮕﺮ روﯾﺪاد ﻫﺎ ‪:‬‬

‫از دﯾﮕﺮ روﯾﺪاد ﻫﺎﯾﯽ ﮐﻪ ﻣﻤﮑﻦ اﺳﺖ در ﺻﻔﺤﻪ و ﺑﺮ روي ﺑﻌﻀﯽ از ﻋﻨﺎﺻﺮ رخ دﻫﺪ ﻣﯽ ﺗﻮان ﺑﻪ ﻣﻮارد زﯾﺮ اﺷﺎره ﻧﻤﻮد ‪:‬‬
‫‪ : Load ‬ﻣﻮﻗﻌﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﺻﻔﺤﻪ ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ ﺑﺎرﮔﺬاري ﺷﻮد ﯾﺎ اﯾﻨﮑﻪ ﯾﮏ ﻋﻨﺼﺮ ‪ img‬ﯾﺎ ‪ object‬ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ‬
‫ﺑﺎرﮔﺬاري ﺷﻮﻧﺪ ‪ .‬ﺑﺮاي ﻓﻌﺎل ﮐﺮدن ﮐﻨﺘﺮﻟﮕﺮ ﻫﺎي ﺣﺎدﺛﻪ ‪ onload‬ﺑﺮاي ﺻﻔﺤﻪ آن را در دﺳﺘﻮر >‪ <body‬ﻗﺮار ﻣﯽ دﻫﯿﻢ ‪ .‬ﺑﺮاي‬
‫ﻣﺜﺎل در ﻋﺒﺎرت زﯾﺮ از اﯾﻦ ﺣﺎدﺛﻪ اﺳﺘﻔﺎده ﮐﺮده اﯾﻢ ﺗﺎ ﭘﺲ از ﺧﺎﺗﻤﻪ ﺑﺎر ﺷﺪن ﺻﻔﺤﻪ ﭘﯿﻐﺎم ‪ loading complete‬ﻧﻤﺎﯾﺶ داده‬
‫ﺷﻮد ‪:‬‬

‫>‪<body onload='alert("loading complete !!!")'></body‬‬

‫‪ : Unload‬ﻫﻨﮕﺎﻣﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﺻﻔﺤﻪ ﺑﺎر ﺷﺪه ﺟﺎري را ﺑﺒﻨﺪ ‪ .‬اﯾﻦ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﻣﻮﺟﺐ زدن دﮐﻤﻪ ‪(close) X‬‬ ‫‪‬‬
‫ﭘﻨﺠﺮه ﯾﺎ وارد ﮐﺮدن ﯾﮏ آدرس ﺟﺪﯾﺪ درﻧﻮار آدرس ﻣﺮورﮔﺮ ﺑﺎﺷﺪ ‪.‬‬
‫‪ : Abort‬اﯾﻦ روﯾﺪاد ﺑﺮاي ﯾﮏ ‪ object‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻗﺒﻞ از ﺑﺎرﮔﺬاري ﮐﺎﻣﻞ آن ‪ ،‬ﻋﻤﻞ ﺑﺎرﮔﺬاري را ﻣﺘﻮﻗﻒ ﮐﻨﺪ رخ ﻣﯽ‬ ‫‪‬‬
‫دﻫﺪ ‪.‬‬
‫‪ : Error‬اﯾﻦ روﯾﺪاد ﺑﺮاي ﯾﮏ ﺻﻔﺤﻪ ﻫﻨﮕﺎﻣﯽ ﮐﻪ درآن ﯾﮏ ﺧﻄﺎ رخ ﻣﯽ دﻫﺪ ‪ ،‬ﺑﺮاي ﯾﮏ ﻋﮑﺲ ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺘﻮاﻧﺪ ﺑﺎرﮔﺬاري‬ ‫‪‬‬
‫ﺷﻮد و ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ ‪ object‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺘﻮاﻧﺪ ﺑﺎرﮔﺬاري ﺷﻮد رخ ﻣﯽ دﻫﺪ ‪.‬‬
‫‪ : Select‬اﯾﻦ روﯾﺪاد ﻫﻨﮕﺎﻣﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﯾﮏ ﯾﺎ ﭼﻨﺪ ﮐﺎراﮐﺘﺮ را از داﺧﻞ ﯾﮏ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ )ﻣﻨﻈﻮر ﺗﮓ ﻫﺎي‬ ‫‪‬‬
‫‪ textarea‬و ‪ (input‬اﻧﺘﺨﺎب ﮐﻨﺪ رخ ﻣﯽ دﻫﺪ ‪.‬‬
‫‪۴٩‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪www.SoftGozar.Com‬‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫‪ : Change‬ﺑﺮ روي ﯾﮏ ﻧﺎﺣﺒﻪ ﻣﺘﻨﯽ ‪ ،‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻣﻘﺪار داﺧﻞ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ ﺗﻐﯿﯿﺮ ﮐﺮده و در اداﻣﻪ ﺗﻤﺮﮐﺰ )‪ (focus‬ﺻﻔﺤﻪ از‬ ‫‪‬‬
‫روي ﻋﻨﺼﺮ ﺑﺮود و ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ ‪ select‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻣﻘﺪار آن ﺗﻐﯿﯿﺮ ﻣﯽ ﮐﻨﺪ رخ ﻣﯽ دﻫﻨﺪ ‪.‬‬
‫‪ : Submit‬ﺑﺮاي ﻋﻨﺼﺮ ‪ form‬ﻫﻨﮕﺎﻣﯿﮑﻪ دﮐﻤﻪ ‪ submit‬ﻣﺮﺑﻮط ﺑﻪ ﻓﺮم ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد رخ ﻣﯿﺪﻫﺪ ‪.‬‬ ‫‪‬‬
‫‪ : Reset‬ﺑﺮاي ﻋﻨﺼﺮ ‪ form‬ﻫﻨﮕﺎﻣﯿﮑﻪ دﮐﻤﻪ ‪ reset‬ﻣﺮﺑﻮط ﺑﻪ ﻓﺮم ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد رخ ﻣﯿﺪﻫﺪ‪.‬‬ ‫‪‬‬
‫‪ : Focus‬ﺑﺮاي ﻋﻨﺼﺮي ﻫﻨﮕﺎﻣﯿﮑﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﺑﺮ روي آن ﺑﺮود رخ ﻣﯽ دﻫﺪ ‪.‬‬ ‫‪‬‬
‫‪ : Blur‬ﺑﺮاي ﻋﻨﺼﺮي ﻫﻨﮕﺎﻣﯿﮑﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از روي آن ﺑﺮود رخ ﻣﯽ دﻫﺪ ‪.‬‬ ‫‪‬‬

‫ﺷﯽ ء ‪: event‬‬
‫ﺷﯽ ء ‪ event‬ﮐﻪ در ﻧﺴﺨﻪ ‪ ١٫٢‬و ﺑﺎﻻﺗﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ در دﺳﺘﺮس ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ ‪ ،‬ﺷﯽ ء ﺧﺎﺻﯽ اﺳﺖ ﮐﻪ ﺑﻪ ﻫﻤﺮاه ﻫﺮ ﺣﺎدﺛﻪ ﺑﺮاي‬
‫ﮐﻨﺘﺮﻟﮕﺮ ان ﺣﺎدﺛﻪ ﻓﺮﺳﺘﺎده ﻣﯿﺸﻮد ‪ .‬درواﻗﻊ ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ ﻣﯽ ﺗﻮاﻧﺪ آن را ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﭘﺎراﻣﺘﺮ ﻫﺎ درﯾﺎﻓﺖ ﮐﻨﺪ و ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ ء‬
‫‪ event‬اﻃﻼﻋﺎﺗﯽ را در ﻣﻮرد آن ﺣﺎدﺛﻪ در دﺳﺘﺮس ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﺎن ﻗﺮار ﻣﯽ دﻫﺪ ‪.‬‬
‫ﺑﻌﻀﯽ از اﻃﻼﻋﺎﺗﯽ ﮐﻪ اﯾﻦ ﺷﯽ ء در اﺧﺘﯿﺎر ﻗﺮار ﻣﯽ دﻫﺪ ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ ‪:‬‬
‫‪ ‬ﺷﯽ اي ﮐﻪ ﻣﻮﺟﺐ رﺧﺪاد روﯾﺪاد ﺷﺪه اﺳﺖ‬
‫‪ ‬اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﻧﺸﺎﻧﮕﺮ ‪ mouse‬درﻫﻨﮕﺎم رﺧﺪاد روﯾﺪاد‬
‫‪ ‬اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﺻﻔﺤﻪ ﮐﻠﯿﺪ درﻫﻨﮕﺎم رﺧﺪاد روﯾﺪاد‬
‫ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﯾﻦ ﺷﯽ ء ﻣﯽ ﺗﻮان ﺑﻪ ﭼﻨﺪﯾﻦ ﻃﺮﯾﻖ ﻋﻤﻞ ﮐﺮد ‪:‬‬
‫در ‪ ، Internet Explorer‬اﯾﻦ ﺷﯽء ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﺧﻮاص ﺷﯽ ء ‪ window‬ﻗﺎﺑﻞ دﺳﺘﺮﺳﯽ اﺳﺖ ‪ .‬اﯾﻦ ﺑﺪﯾﻦ ﻣﻌﻨﯽ اﺳﺖ ﮐﻪ ﯾﮏ‬
‫ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ ﺑﻪ ﻃﺮﯾﻖ زﯾﺮ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﺷﯽ ء ‪ event‬دﺳﺘﺮﺳﯽ ﭘﯿﺪا ﮐﻨﺪ ‪:‬‬
‫{ )( ‪oDiv.onclick = function‬‬
‫;‪var oEvent = window.event‬‬
‫}‬
‫اﮔﺮ ﭼﻪ اﯾﻦ ﺷﯽ ء ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﺧﻮاص ‪ window‬ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮد اﻣﺎ ﻓﻘﻂ زﻣﺎﻧﯽ ﻗﺎﺑﻞ دﺳﺘﺮﺳﯽ اﺳﺖ ﮐﻪ روﯾﺪادي رخ داده ﺑﺎﺷﺪ ‪.‬‬
‫ﺑﻌﺪ از اﯾﻨﮑﻪ ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ اﺟﺮا ﺷﺪ ‪ ،‬ﺷﯽ ‪ event‬ﻧﯿﺰ از ﺑﯿﻦ ﺧﻮاﻫﺪ رﻓﺖ ‪.‬‬
‫اﻣﺎ در اﺳﺘﺎﻧﺪارد ﻫﺎي ‪ DOM‬ﻣﯽ ﺗﻮان از روش دﺳﺘﺮﺳﯽ ﺑﻪ آرﮔﻮﻣﺎن ﺗﺎﺑﻊ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﺷﯽ ء ‪ event‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ‪:‬‬
‫{ )( ‪oDiv.onclick = function‬‬
‫;]‪var oEvent = arguments[0‬‬
‫}‬
‫اﻟﺒﺘﻪ ﻣﯽ ﺗﻮان ﻧﺎﻣﯽ ﺑﺮاي اﯾﻦ آرﮔﻮﻣﺎن ﻧﯿﺰ ﻣﺸﺨﺺ ﮐﺮد و از آن ﺑﺮاي دﺳﺘﺮﺳﯽ اﺳﺘﻔﺎده ﻧﻤﻮد ‪:‬‬
‫{ )‪oDiv.onclick = function (oEvent‬‬
‫}‬
‫ﺧﻮاص و ﻣﺘﺪﻫﺎي ﺷﯽء ‪: event‬‬
‫اﯾﻦ ﺷﯽ ء ﺷﺎﻣﻞ ﺧﻮاص و ﻣﺘﺪ ﻫﺎﯾﯽ اﺳﺖ ﮐﻪ در اداﻣﻪ ﺑﺮرﺳﯽ ﺧﻮاﻫﯿﻢ ﮐﺮد ‪:‬‬
‫‪ : Shiftkey‬اﮔﺮ دﮐﻤﻪ ‪ shift‬زده ﺷﺪه ﺑﺎﺷﺪ ‪ true‬و در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ‪ false‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬
‫‪ : altkey‬اﮔﺮ دﮐﻤﻪ ‪ alt‬زده ﺷﺪه ﺑﺎﺷﺪ ‪ true‬و در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ‪ false‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬
‫‪ : ctrlkey‬اﮔﺮ دﮐﻤﻪ ‪ ctrl‬زده ﺷﺪه ﺑﺎﺷﺪ ‪ true‬و در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ‪ false‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪.‬‬
‫‪ : Button‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﮐﺪام ﯾﮏ از دﮐﻤﻪ ﻫﺎي ‪ mouse‬زده ﺷﺪه اﻧﺪ ‪ .‬ﻣﻘﺎدﯾﺮي ﮐﻪ اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﺑﻪ ﺷﺮح زﯾﺮ‬
‫اﺳﺖ ‪:‬‬

‫‪۵٠‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪www.SoftGozar.Com‬‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫‪ : ٠ ‬ﻫﯿﭻ دﮐﻤﻪ اي زده ﻧﺸﺪه اﺳﺖ‬
‫‪ : ١ ‬دﮐﻤﻪ ﭼﭗ زده ﺷﺪه اﺳﺖ ‪.‬‬
‫‪ : ٢ ‬دﮐﻤﻪ راﺳﺖ زده ﺷﺪه اﺳﺖ ‪.‬‬
‫‪ : ٣ ‬دﮐﻤﻪ ﭼﭗ و راﺳﺖ ﺑﺎ ﻫﻢ زده ﺷﺪه اﻧﺪ ‪.‬‬
‫‪ : ۴ ‬دﮐﻤﻪ وﺳﻂ زده ﺷﺪه اﺳﺖ ‪.‬‬
‫‪ : ۵ ‬دﮐﻤﻪ ﻫﺎي ﭼﭗ و وﺳﻂ ﺑﺎ ﻫﻢ زده ﺷﺪه اﻧﺪ ‪.‬‬
‫‪ : ۶ ‬دﮐﻤﻪ ﻫﺎي راﺳﺖ و وﺳﻂ ﺑﺎ ﻫﻢ زده ﺷﺪه اﻧﺪ ‪.‬‬
‫‪ : ٧ ‬ﻫﺮ ﺳﻪ دﮐﻤﻪ ﺑﺎ ﻫﻢ زده ﺷﺪه اﻧﺪ ‪.‬‬
‫‪ clienX‬و ‪ : clientY‬ﻣﺨﺘﺼﺎت ﻧﺸﺎﻧﮕﺮ ﻣﺎوس در ﻻﯾﻪ داﺧﻠﯽ در ﻫﻨﮕﺎم رﺧﺪاد ﺣﺎدﺛﻪ ‪.‬‬
‫‪ screenX‬و ‪ : screenY‬ﻣﺨﺘﺼﺎت ﻧﺸﺎﻧﮕﺮ ﻣﺎوس ﻧﺴﺒﺖ ﺑﻪ ﮔﻮﺷﻪ ﺑﺎﻻ و ﭼﭗ ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ‪.‬‬
‫‪ pageX‬و ‪ : pageY‬ﻣﺨﺘﺼﺎت ‪ x,y‬ﻣﺎوس را ﻧﺴﺒﺖ ﺑﻪ ﮔﻮﺷﻪ ﭼﭗ و ﺑﺎﻻي ﺻﻔﺤﻪ در ﻫﻨﮕﺎم رﺧﺪاد ﺣﺎدﺛﻪ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫‪ : type‬ﻧﻮع روﯾﺪادي ﮐﻪ رخ داده اﺳﺖ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﻣﺜﻼ ‪ click‬و ‪ mouseover‬و‪...‬‬
‫‪ : keyCode‬ﻋﺪدي اﺳﺖ ﮐﻪ ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﺪام دﮐﻤﻪ از ﺻﻔﺤﻪ ﮐﻠﯿﺪ ﻓﺸﺎر داده ﺷﺪه اﺳﺖ ‪.‬‬
‫‪ : Target‬ﺷﯽ اي را ﮐﻪ در ﻣﻌﺮض ﺣﺎدﺛﻪ ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ )ﻣﺎﻧﻨﺪ ﯾﮏ ﺳﻨﺪ ﯾﺎ ﯾﮏ ﭘﯿﻮﻧﺪ( ‪.‬‬

‫ﮐﺎر ﺑﺎ ‪) Cookie‬ﮐﻮﮐﯽ( ﻫﺎ ‪:‬‬

‫ﮐﻮﮐﯽ ﻫﺎ در واﻗﻊ ﻣﺘﻐﯿﺮ ﻫﺎﯾﯽ ﻫﺴﺘﻨﺪ ﮐﻪ در ﻗﺎﻟﺐ ﯾﮏ ﻓﺎﯾﻞ ﻣﺘﻨﯽ ﺳﺎده ﺑﺮ روي ﮐﺎﻣﭙﯿﻮﺗﺮ ﮐﺎرﺑﺮ ذﺧﯿﺮه ﻣﯽ ﺷﻮﻧﺪ و در ﻫﺮ ﺑﺎر درﺧﻮاﺳﺖ‬
‫ﺻﻔﺤﻪ ﺟﺪﯾﺪ از ﺳﺮور ﺑﺎ ﻫﻤﺎن ﮐﺎﻣﭙﯿﻮﺗﺮ‪ ،‬اﯾﻦ ﻓﺎﯾﻞ ﻫﻢ ﺑﺮاي ﺳﺮور ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد ‪ .‬ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ا زﮐﻮﮐﯽ ﻫﺎ ﺑﺮاي ذﺧﯿﺮه ﯾﮑﺴﺮي‬
‫اﻃﻼﻋﺎت ﺧﺎص ﮐﺎرﺑﺮان ﺻﻔﺤﺎﺗﻤﺎن اﺳﺘﻔﺎده ﮐﻨﯿﻢ و در ﺻﻮرت ﻧﯿﺎز آن ﻫﺎ را در ﺻﻔﺤﺎت دﯾﮕﺮ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار دﻫﯿﻢ ‪.‬‬
‫ﺑﺮاي اﯾﺠﺎد ﮐﻮﮐﯽ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﺧﺎﺻﯿﺖ ‪ cookie‬ﺷﯽ ء ‪ document‬ﺑﻪ ﺷﮑﻞ زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬

‫;"‪document.cookie="name=value ; expires=Date ; path = path ; domain=domain‬‬

‫و ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﺗﻤﺎﻣﯽ ﮐﻮﮐﯽ ﻫﺎي از ﻗﺒﻞ اﯾﺠﺎد ﺷﺪه ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﺧﻮاﻫﯿﻢ ﮐﺮد ‪:‬‬
‫;‪Var x = document.cookie‬‬
‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ در دﺳﺘﻮر اﺑﺘﺪاﯾﯽ ﻣﯽ ﺑﯿﻨﯿﺪ ﺑﺮاي اﯾﺠﺎد ﮐﻮﮐﯽ ﻣﯽ ﺑﺎﯾﺴﺖ رﺷﺘﻪ اي ﺣﺎوي ﯾﮑﺴﺮي ﺧﻮاص و ﻣﻘﺎدﯾﺮﺷﺎن را در ﻗﺎﻟﺐ ﺟﻔﺖ ﻫﺎي‬
‫‪) name=value‬ﮐﻪ ﺑﺎ ; از ﻫﻢ ﺟﺪا ﺷﺪه اﻧﺪ( ﺑﻪ ﺧﺎﺻﯿﺖ ‪ cookie‬ﻧﺴﺒﺖ دﻫﯿﻢ ‪ .‬در ﺟﺪول زﯾﺮ ﻫﺮ ﯾﮏ از اﯾﻦ ﻗﺴﻤﺖ ﻫﺎ را ﺷﺮح ﻣﯽ‬
‫دﻫﯿﻢ ‪.‬‬
‫ﻣﺜﺎل‬ ‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﺧﺎﺻﯿﺖ‬
‫‪name=ali‬‬ ‫اﯾﻦ دﺳﺘﻮر ﻧﺎم و ﻣﻘﺪار ﮐﻮﮐﯽ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ‪.‬‬ ‫‪name=value‬‬
‫اﯾﻦ ﺧﺎﺻﯿﺖ اﺧﺘﯿﺎري زﻣﺎن اﻧﻘﻀﺎي ﮐﻮﮐﯽ را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ ‪ .‬ﻣﻘﺪاري ﮐﻪ ﺑﻪ اﯾﻦ‬
‫=‪expires‬‬ ‫ﺧﺎﺻﯿﺖ داده ﻣﯽ ﺷﻮد ﻣﯽ ﺑﺎﯾﺴﺖ ﺗﺎرﯾﺨﯽ ﺑﻪ ﻓﺮﻣﺖ ﺑﺎزﮔﺸﺘﯽ از ﻣﺘﺪ‬
‫‪expires=date‬‬
‫‪13/06/2003 00:00:00‬‬ ‫)(‪ toGMTString‬ﺷﯽ ء ‪ Date‬ﺑﺎﺷﺪ ‪ .‬در ﺻﻮرﺗﯽ ﮐﻪ اﯾﻦ ﺧﺎﺻﯿﺖ ﻣﺸﺨﺺ‬
‫ﻧﺸﻮد ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﺎرﺑﺮ ﭘﻨﺠﺮه ﻣﺮورﮔﺮ را ﺑﺒﻨﺪد ﮐﻮﮐﯽ ﻧﯿﺰ از ﺑﯿﻦ ﺧﻮاﻫﺪ رﻓﺖ ‪.‬‬
‫اﯾﻦ ﺧﺎﺻﯿﺖ اﺧﺘﯿﺎري ﻧﺎم ﻣﺴﯿﺮي از ﺳﺎﯾﺖ را ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﮐﻮﮐﯽ دﺳﺘﺮﺳﯽ داﺷﺘﻪ‬
‫‪path=/tutorials/‬‬ ‫‪path=path‬‬
‫ﺑﺎﺷﺪ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ‪.‬‬
‫اﯾﻦ ﺧﺎﺻﯿﺖ اﺧﺘﯿﺎري ﻧﺎم ﺳﺎﯾﺘﯽ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ از ﮐﻮﮐﯽ اﺳﺘﻔﺎده ﮐﻨﺪ را ﻣﺸﺨﺺ ﻣﯽ‬
‫‪domain = mysite.com‬‬ ‫‪domain=domain‬‬
‫ﮐﻨﺪ ‪.‬‬

‫‪۵١‬‬
‫ﻧﻮﯾﺴﻨﺪه ‪ :‬اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪www.SoftGozar.Com‬‬ ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫در ﻣﺜﺎل زﯾﺮ ﯾﮏ ﮐﻮﮐﯽ ﺑﺎ ﻧﺎم ‪ username‬و ﺑﺎ ﻣﻘﺪار ‪ ali‬ﮐﻪ در ﺗﺎرﯾﺦ ‪ 15/02/2010‬از ﺑﯿﻦ ﻣﯽ رود اﯾﺠﺎد ﻣﯽ ﺷﻮد ‪:‬‬

‫;" ‪document.cookie = " username = ali ; expires = 15/02/2010 00:00:00‬‬

‫در ﻣﺜﺎل زﯾﺮ ﯾﮏ ﮐﻮﮐﯽ ﺑﺎ ﻧﺎم ‪ myCookie‬و ﺑﺎ ﻣﻘﺪار ‪ this is my cookie‬اﯾﺠﺎد ﺷﺪه اﺳﺖ ‪:‬‬

‫;)”‪document.cookie = “myCookie=” + escape(“This is my Cookie‬‬

‫‪ ‬ﻧﮑﺘﻪ ‪ :‬در ﮐﺪ ﻓﻮق ﺗﺎﺑﻊ ‪ escape‬ﯾﮏ رﺷﺘﻪ را درﯾﺎﻓﺖ ﮐﺮده و ﺗﻤﺎﻣﯽ ﮐﺎراﮐﺘﺮ ﻫﺎي ﺑﯽ ارزش آن را ﺑﻪ ﮐﺪ ﻣﻌﺎدﻟﺶ‬
‫ﺗﺒﺪﯾﻞ ﻣﯽ ﮐﻨﺪ ‪ .‬ﻗﺒﻞ از ﮐﺪ ﻣﻌﺎدل ﯾﮏ ﻋﻼﻣﺖ ‪ %‬ﻗﺮار ﻣﯽ ﮔﯿﺮد ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﯾﻦ ﺗﺎﺑﻊ ﮐﺎراﮐﺘﺮ ‪ space‬را ﺑﻪ ﮐﺪ‬
‫‪ %20‬ﺗﺒﺪﯾﻞ ﻣﯽ ﮐﻨﺪ ‪ .‬اﯾﻦ ﺗﺎﺑﻊ ﻣﻌﺎدل ﺗﺎﺑﻊ )(‪ encodeURIComponent‬اﺳﺖ ‪.‬‬

‫ﺣﺬف ﯾﮏ ﮐﻮﮐﯽ ‪:‬‬

‫ﺑﺮاي ﺣﺬف ﯾﮏ ﮐﻮﮐﯽ ﻣﯽ ﺗﻮان از ﺗﺎﺑﻌﯽ ﮐﻪ زﻣﺎن اﻧﻘﻀﺎي ﮐﻮﮐﯽ را ﺑﻪ ﯾﮏ ﺛﺎﻧﯿﻪ ﻗﺒﻞ ﺗﻨﻈﯿﻢ ﻣﯽ ﮐﻨﺪ اﺳﺘﻔﺎده ﮐﻨﯿﻢ ‪ .‬اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ ﺻﻮرت‬
‫زﯾﺮ اﺳﺖ ‪:‬‬
‫) ‪function delete_cookie ( cookie_name‬‬
‫{‬
‫‪var cookie_date = new Date ( ); // current date & time‬‬
‫;) ‪cookie_date.setTime ( cookie_date.getTime() - 1‬‬
‫;)(‪document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString‬‬
‫}‬

‫ﺣﺎل ﮐﺎﻓﯽ اﺳﺖ ﺑﺮاي ﺣﺬف ﯾﮏ ﮐﻮﮐﯽ ﻧﺎم آن را ﺑﺮاي ﺗﺎﺑﻊ ﻓﻮق ﺑﻔﺮﺳﺘﯿﻢ ‪ .‬دﺳﺘﻮر زﯾﺮ ﮐﻮﮐﯽ ﺑﺎ ﻧﺎم ‪ username‬را ﺣﺬف ﻣﯽ ﮐﻨﺪ ‪:‬‬

‫; )"‪delete_cookie ("username‬‬

‫ﺑﺎزﯾﺎﺑﯽ ﮐﻮﮐﯽ ﻫﺎ ‪:‬‬

‫ﺣﺎل ﮐﻪ ﺑﺎ اﯾﺠﺎد و ﺣﺬف ﮐﺮدن ﮐﻮﮐﯽ ﻫﺎ آﺷﻨﺎ ﺷﺪﯾﻢ ﻧﺤﻮه ﺑﺎزﯾﺎﺑﯽ )دﺳﺘﺮﺳﯽ( ﺑﻪ آﻧﻬﺎ را ﺑﯿﺎن ﻣﯽ ﮐﻨﯿﻢ ‪ .‬ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﮐﻮﮐﯽ ﻫﺎﯾﯽ ﮐﻪ ﻗﺒﻼ‬
‫اﯾﺠﺎد ﺷﺪه اﻧﺪ ﺑﺎز ﻫﻢ از ﺧﺎﺻﯿﺖ ‪ cookie‬ﺷﯽ ‪ document‬ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ ‪:‬‬

‫;‪var x = document.cookie‬‬

‫اﯾﻦ دﺳﺘﻮر ﻟﯿﺴﺘﯽ )رﺷﺘﻪ( از ﺟﻔﺖ ﻫﺎي ‪ name=value‬ﺗﻤﺎﻣﯽ ﮐﻮﮐﯽ ﻫﺎي ﻗﺎﺑﻞ دﺳﺘﺮس ﺑﺮاي ﺳﻨﺪ ﺟﺎري را ﮐﻪ ﺑﺎ ; از ﻫﻢ ﺟﺪا ﺷﺪه اﻧﺪ‬
‫ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻣﺘﻐﯿﺮ ‪ x‬ﻣﯽ ﺗﻮاﻧﯿﺪ ﺣﺎوي رﺷﺘﻪ اي ﺑﻪ ﺻﻮرت زﯾﺮ ﺑﺎﺷﺪ ‪:‬‬

‫"‪"username=ali; password=abc123‬‬

‫در اﯾﻦ ﻣﺜﺎل دو ﮐﻮﮐﯽ از ﻗﺒﻞ اﯾﺠﺎد ﺷﺪه اﺳﺖ ‪ :‬ﯾﮑﯽ ﺑﺎ ﻧﺎم ‪ username‬و ﻣﻘﺪار ‪ ali‬و دوﻣﯽ ﺑﺎ ﻧﺎم ‪ password‬ﺑﺎ ﻣﻘﺪار ‪. abc123‬‬
‫اﮐﻨﻮن ‪ x‬ﯾﮏ ﻣﺘﻐﯿﺮ رﺷﺘﻪ اي ﺳﺎده اﺳﺖ ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻫﺮ ﯾﮏ از ﮐﻮﮐﯽ ﻫﺎ و ﻣﻘﺪارﺷﺎن اﺑﺘﺪا ‪ x‬را ﺑﻮﺳﯿﻠﻪ ﻣﺘﺪ ‪ split‬ﺷـﯽ‬
‫‪ string‬ﺑﻪ آراﯾﻪ اي ﺗﺒﺪﯾﻞ ﮐﺮده و ﺑﻮﺳﯿﻠﻪ ﻣﺘﺪ ﻫﺎي ﺧﺎص آراﯾﻪ ﺑﻪ آن ﻫﺎ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي ﭼـﺎپ ﻣﻘـﺪار ﮐـﻮﮐﯽ‬
‫ﻫﺎي ﻓﻮق ﻣﯽ ﺗﻮان ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﺮد ‪:‬‬

‫‪۵٢‬‬
‫ اﺣﻤﺪ ﺑﺎدﭘﯽ‬: ‫ﻧﻮﯾﺴﻨﺪه‬
var allCookie
www.SoftGozar.Com
= document.cookie;
‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

Var cookieParts = allCookie.split(";");

Var fistCookie = cookieParts[0];
Var secondCookie = cookieParts[1];

Var nameOfFirstCookie = firstCookie.split("=")[0];

Var valueOfFirstCookie = firstCookie.split("=")[1];

Var nameOfSecondCookie = firstCookie.split("=")[0];

Var valueOfSecondCookie = firstCookie.split("=")[1];

www.SoftGozar.Com
۵٣