www.ParsBook.

org
 ‫ﭘﯿﺸﮕﻔﺘﺎر‬
‫در ﺳﺎل ﻫﺎي ﻧﻪ ﭼﻨﺪان دور‪ ،‬وب ﻣﮑﺎن ﺑﺴﯿﺎر ﺳﺮد و ﮐﺴﻞ ﮐﻨﻨﺪه اي ﺑﻮد‪ .‬ﺻﻔﺤﺎت وﺑﯽ ﮐﻪ از ﻣﺘﻦ ﻫﺎي ﺳﺎﺧﺘﻤﻨﺪ ‪ HTML‬اﯾﺠﺎد‬
‫ﺷﺪه ﺑﻮدﻧﺪ ﺗﻨﻬﺎ ﺑﻪ ﻧﻤﺎﯾﺶ ﯾﮑﺴﺮي اﻃﻼﻋﺎت اﮐﺘﻔﺎ ﻣﯽ ﮐﺮدﻧﺪ‪ .‬ﺗﻨﻬﺎ راه ﺗﻌﺎﻣﻞ ﮐﺎرﺑﺮان ﺑﺎ ﺻﻔﺤﺎت اﯾﻦ ﺑﻮد ﮐﻪ ﺑﺮ روي ﻟﯿﻨﮑﯽ‬
‫ﮐﻠﯿﮏ ﮐﺮده و ﻣﻨﺘﻈﺮ ﺑﺎرﮔﺬاري ﯾﮏ ﺻﻔﺤﻪ ﺟﺪﯾﺪ ﻣﯽ ﻣﺎﻧﺪﻧﺪ‪ .‬ﺣﺘﯽ ﻓﮑﺮ آن روزﻫﺎ ﻫﻢ ﻋﺬاب آور اﺳﺖ!‬
‫اﻣﺎ اﻣﺮوزه ﺑﺴﯿﺎري از ﺳﺎﯾﺖ ﻫﺎ ﻫﻤﭽﻮن ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﮐﺎرﺑﺮدي دﺳﮑﺘﺎپ ﻋﻤﻞ ﮐﺮده و ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﯽ درﻧﮓ ﺑﻪ ﺗﻤﺎﻣﯽ روﯾﺪادﻫﺎي‬
‫ﺻﻔﺤﻪ ﻫﻤﭽﻮن ﮐﻠﯿﮏ ﭘﺎﺳﺦ ﺑﺪﻫﻨﺪ‪ .‬و ﻫﻤﻪ اﯾﻦ ﻫﺎ ﺑﻪ ﻟﻄﻒ ﻣﻮﺿﻮع ﺟﺰوه اي ﮐﻪ ﻫﻢ اﮐﻨﻮن در دﺳﺖ دارﯾﺪ اﺳﺖ‪ :‬ﺟﺎوااﺳﮑﺮﯾﭙﺖ!‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ زﺑﺎﻧﯽ اﺳﺖ ﮐﻪ ﺑﺎ ﮐﻤﮏ آن ﻣﯽ ﺗﻮاﻧﯿﺪ ﺻﻔﺤﺎت ‪ HTML‬ﺧﻮد را ﻟﺒﺮﯾﺰ از اﻧﯿﻤﯿﺸﻦ ﻫﺎ‪ ،‬ﺟﻠﻮه ﻫﺎي ﺑﺼﺮي و وﯾﮋﮔﯽ‬
‫ﻫﺎي ﺗﻌﺎﻣﻠﯽ ﮐﻨﯿﺪ‪ .‬اﯾﻦ زﺑﺎن اﻣﮑﺎﻧﺎﺗﯽ را ﻓﺮاﻫﻢ ﻣﯽ آورد ﺗﺎ ﺻﻔﺤﻪ وب ﺷﻤﺎ ﺑﺘﻮاﻧﺪ ﺑﻪ ﻋﻤﻠﯿﺎت ﮐﺎرﺑﺮي ﮐﻪ در ﺗﻌﺎﻣﻞ ﺑﺎ آن ﻫﺎﺳﺖ‬
‫ﻓﻮرا ﭘﺎﺳﺦ ﺑﺪﻫﺪ‪ .‬ﻣﺎﻧﻨﺪ ﮐﻠﯿﮏ ﺑﺮ روي ﯾﮏ ﻟﯿﻨﮏ‪ ،‬ﭘﺮ ﮐﺮدن ﯾﮏ ﻓﺮم و ﺣﺮﮐﺖ ﻧﺸﺎﻧﮕﺮ ﻣﺎوس ﺑﺮ روي ﺻﻔﺤﻪ‪.‬‬
‫ﺑﻪ ﮐﻤﮏ اﯾﻦ زﺑﺎن ﺧﻮاﻫﯿﺪ ﺗﻮاﻧﺴﺖ ﺑﻪ اﺟﺰا ﻣﻮﺟﻮد در ﺻﻔﺤﻪ دﺳﺘﺮﺳﯽ داﺷﺘﻪ و ﺣﺘﯽ در ﺻﻮرت ﻧﯿﺎز دﺳﺖ ﺑﻪ ﺗﻐﯿﯿﺮاﺗﯽ در آن ﻫﺎ‬
‫ﻣﻄﺎﺑﻖ ﻣﯿﻞ ﺧﻮد ﺑﺰﻧﯿﺪ‪.‬‬
‫اﺳﺘﻔﺎده روز اﻓﺰون از ﺗﮑﻨﻮﻟﻮژي ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ Ajax‬و ‪ jQuery‬در ﻃﺮاﺣﯽ ﺻﻔﺤﺎت وب ﮐﻪ ﻫﺴﺘﻪ اﺻﻠﯽ آن ﻫﺎ را ‪Javascript‬‬
‫ﺗﺸﮑﯿﻞ ﻣﯽ دﻫﺪ ﺑﻪ اﻫﻤﯿﺖ ﯾﺎدﮔﯿﺮي اﯾﻦ زﺑﺎن ﻗﺪرﺗﻤﻨﺪ ﺑﺮاي ﻫﺮﮐﺲ ﮐﻪ دﺳﺘﯽ در ﺗﻮﺳﻌﻪ وب دارد اﻓﺰوده اﺳﺖ‪.‬‬
‫ﺟﺰوه ﭘﯿﺶ رو ﮐﻪ در راﺳﺘﺎي ﺑﺮﮔﺰاري دوره ﻫﺎي آﻣﻮزﺷﯽ ﻃﺮاﺣﯽ وب ﺑﻪ ﻫﻤﺖ اﻧﺠﻤﻦ ﻋﻠﻤﯽ ﻣﻬﻨﺪﺳﯽ ﻓﻨﺎوري اﻃﻼﻋﺎت‬
‫داﻧﺸﮕﺎه ﭘﯿﺎم ﻧﻮر ﻣﺮﮐﺰ آران و ﺑﯿﺪﮔﻞ ﺗﻬﯿﻪ ﺷﺪه اﺳﺖ ﺷﻤﺎ را ﺑﺎ ﺑﺴﯿﺎري از وﯾﮋﮔﯽ ﻫﺎي اﯾﻦ زﺑﺎن ﻣﺤﺒﻮب و ﮐﺎرﺑﺮدي آﺷﻨﺎ ﺧﻮاﻫﺪ‬
‫ﮐﺮد‪.‬‬
‫اﯾﻦ ﺟﺰوه از روي ﯾﮑﯽ از ﻣﺸﻬﻮرﺗﺮﯾﻦ و ﺟﺎﻣﻊ ﺗﺮﯾﻦ ﮐﺘﺐ آﻣﻮزﺷﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﯾﻌﻨﯽ ‪Professional Javascript for Web‬‬
‫‪ Developers‬ﻧﻮﺷﺘﻪ ‪)Nicholas C.Zakas‬ﻧﯿﮑﻼس ﺳﯽ زاﮐﺎس( و ﺗﺠﺮﺑﯿﺎت ﺷﺨﺼﯽ ﺗﺎﻟﯿﻒ و ﺗﺮﺟﻤﻪ ﺷﺪه اﺳﺖ‪.‬‬
‫ذﮐﺮ اﯾﻦ ﻧﮑﺘﻪ ﻧﯿﺰ ﺿﺮوري اﺳﺖ ﮐﻪ ﺗﺮﺟﻤﻪ‪ ،‬ﺗﺨﺼﺺ اﯾﻨﺠﺎﻧﺐ ﻧﺒﻮده و ﻫﺪف از ﺗﻬﯿﻪ ﺟﺰوه اي ﮐﻪ ﻫﻢ اﮐﻨﻮن در دﺳﺘﺎن ﺷﻤﺎﺳﺖ‬
‫ﻫﻢ ﭼﯿﺰي ﺟﺰ ﺟﺎﻣﻪ ﻋﻤﻞ ﭘﻮﺷﺎﻧﺪن ﺑﻪ ﺣﺪﯾﺚ ﺷﺮﯾﻒ»ز‪‬ﮐَﺎةُ اﻟْﻌ‪‬ﻠْﻢِ ﻧَﺸْﺮُه‪ «‬ﻧﺒﻮده اﺳﺖ‪ .‬از اﯾﻦ رو اﯾﻦ ﺟﺰوه ﻧﯿﺰ ﺧﺎﻟﯽ از اﺷﮑﺎل و‬
‫اﺷﺘﺒﺎه ﻧﯿﺴﺖ‪ .‬ﻟﺬا از ﺗﻤﺎﻣﯽ ﺧﻮاﻧﻨﺪﮔﺎن ﺗﻘﺎﺿﺎ ﻣﯽﺷﻮد ﺑﻪ ﻣﻨﻈﻮر ﮔﺰارش اﺷﮑﺎل و ﺑﯿﺎن ﻧﻈﺮات‪ ،‬اﻧﺘﻘﺎدات و ﭘﯿﺸﻨﻬﺎدات ﺧﻮد ﺑﺎ اﯾﻤﯿﻞ‬
‫اﯾﻨﺠﺎﻧﺐ ﺑﻪ آدرس ‪ [email protected]‬ﻣﮑﺎﺗﺒﻪ ﻓﺮﻣﺎﯾﻨﺪ‪.‬‬
‫در ﭘﺎﯾﺎن از ﺗﻤﺎﻣﯽ دوﺳﺘﺎﻧﻢ ﻋﻠﯽ اﻟﺨﺼﻮص ﺣﺴﯿﻦ ﺑﯿـﺪي ﺑﻪ ﺧﺎﻃﺮ وﯾﺮاﯾﺶ و ﺻﻔﺤﻪ آراﯾﯽ و ﻫﻤﭽﻨﯿﻦ ﻃﺮاﺣﯽ ﻃﺮح روي ﺟﻠﺪ ‪،‬‬
‫ﺗﻤﺎﻣﯽ اﻋﻀﺎي ﻣﺤﺘﺮم اﻧﺠﻤﻦ ﻋﻠﻤﯽ ﻣﻬﻨﺪﺳﯽ ﻓﻨﺎوري اﻃﻼﻋﺎت داﻧﺸﮕﺎه ﭘﯿﺎم ﻧﻮر ﻣﺮﮐﺰ آران و ﺑﯿﺪﮔﻞ و ﺗﻤﺎﻣﯽ دوﺳﺘﺎﻧﯽ ﮐﻪ ﺑﺎ‬
‫اﻋﺘﻤﺎد ﺑﻪ ﺑﻨﺪه و ﺣﻀﻮر ﮔﺮم ﺧﻮد در دوره ﻫﺎي آﻣﻮزﺷﯽ ﺑﺮﮔﺰار ﺷﺪه ﻣﻮﺟﺒﺎت دﻟﮕﺮﻣﯽ و اﻧﮕﯿﺰه ﺑﺮاي ﺗﻬﯿﻪ اﯾﻦ ﺟﺰوه را ﻓﺮاﻫﻢ‬
‫آوردﻧﺪ ﺻﺎدﻗﺎﻧﻪ و ﺻﻤﯿﻤﺎﻧﻪ ﺗﺸﮑﺮ ﻣﯽﮐﻨﻢ‪.‬‬
‫اﺣﻤﺪ ﺑﺎدﭘﯽ‪ -‬ﻓﺮوردﯾﻦ ‪1391‬‬
‫ﻣﻮﻻي ﻣﺘﻘﯿﺎن‪ ،‬ﻋﻠﯽ)ﻋﻠﯿﻪ اﻟﺴﻼم( ﻣﯽ ﻓﺮﻣﺎﯾﻨﺪ‪:‬‬

‫إ ِ ذ َا أ َ ر ‪ ‬ذ َ ل َ اﻟ ﻠ ﱠ ﻪ ‪ ‬ﻋ ‪ ‬ﺒ ‪‬ﺪ ا ً ﺣ ‪ ‬ﻈ َ ﺮ َ ﻋ ‪ ‬ﻠ َ ﯿ ‪ ‬ﻪ ‪ ‬ا ﻟ ْ ﻌ ‪ ‬ﻠ ْ ﻢ ‪‬‬

‫ﻦ وم ﯽ ﺳﺎزد‪.‬‬ ‫ﺳﺎ ﺪ‪ ،‬او را از ﻋ ﻢ و دا ﺶ و ﯾﺎد‬ ‫ﮔﺎه ﺪاو ﺪ ﻮا ﺪ ﻨﺪه ای را رذا‬

‫‪I‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
1stwebdesigner.ir
www.ParsBook.org
 ‫ﺖ‬
‫ﭘﯿﺸﮕﻔﺘﺎر ‪I .......................................................................................................................................‬‬

‫ﻓﺼﻞ ‪ : 1‬آﺷﻨﺎﯾﯽ ﺑﺎ ﻣﻔﺎﻫﯿﻢ و اﺻﻄﻼﺣﺎت ‪1 ........................................................‬‬

‫اﻧﻮاع زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺗﺤﺖ وب ‪2 .........................................................................................‬‬

‫ﺗﻔﺎوت ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ و ﺟﺎوا ‪3 ....................................................................................................‬‬

‫اﺟﺰا ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪4 ..................................................................................................‬‬

‫‪DOM‬؛ ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ ‪4 .................................................................................................................................‬‬

‫‪BOM‬؛ ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ ‪4 .............................................................................................................................‬‬

‫وﯾﮋﮔﯽ ﻫﺎي ﺑﻨﯿﺎدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪4 ..................................................................................................‬‬

‫ﻓﺼﻞ ‪ : 2‬ﻣﺘﻐﯿﺮﻫﺎ واﻧﻮاع داده ﻫﺎ ‪7 .................................................................‬‬

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

‫ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮﻫﺎ ‪8 ..........................................................................................................................‬‬

‫ﮐﻠﻤﺎت ﮐﻠﯿﺪي ‪10..............................................................................................................................‬‬

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

‫اﻧﻮاع داده ﻫﺎي اﺻﻠﯽ ‪10...................................................................................................................‬‬

‫ﻧﻮع داده ‪11 .............................................................................................................................................Undefind‬‬

‫ﻧﻮع داده ‪11 ..................................................................................................................................................... Null‬‬

‫ﻧﻮع داده ‪12.............................................................................................................................................. Boolean‬‬

‫ﻧﻮع داده ‪12...............................................................................................................................................Number‬‬

‫ﻧﻮع داده ‪12.................................................................................................................................................. String‬‬

‫ﺗﺒﺪﯾﻞ اﻧﻮاع ‪12.................................................................................................................................‬‬

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

‫‪III‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﺗﺒﺪﯾﻞ ﺑﻪ ﻋﺪد ‪13.....................................................................................................................................................‬‬

‫اﺳﺘﻔﺎده از ‪ Type Casting‬ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ‪14........................................................................................................‬‬

‫ﻓﺼﻞ ‪ : 3‬ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﻣﺮورﮔﺮﻫﺎ ‪17 ..........................................................‬‬

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

‫ﺗﻔﺎوت ﻫﺎي ﺑﻪ ﮐﺎرﮔﯿﺮي ﮐﺪﻫﺎ ﺑﻪ ﺻﻮرت درون ﺧﻄﯽ و ﺧﺎرﺟﯽ ‪19 ................................................................................‬‬

‫ﻣﮑﺎن ﻗﺮار دادن ﺗﮓ >‪ <script‬در ﺻﻔﺤﻪ‪20........................................................................................‬‬

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

‫ﺧﻄﺎﯾﺎﺑﯽ ‪22.....................................................................................................................................‬‬

‫ﻓﺼﻞ ‪ : 4‬ﮐﺎر ﺑﺎ آراﯾﻪ ﻫﺎ درﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪25 .....................................................‬‬

‫اﯾﺠﺎد آراﯾﻪ ﻫﺎ ﺑﺎ اﺳﺘﻔﺎده از ﮐﻼس ‪26.......................................................................................Array‬‬

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

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

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

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

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

‫ﺗﺒﺪﯾﻞ آراﯾﻪ ﻫﺎ ﺑﻪ ﭘﺸﺘﻪ و ﺻﻒ ‪28......................................................................................................‬‬

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

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

‫ﻓﺼﻞ ‪ : 5‬ﮐﺎر ﺑﺎ رﺷﺘﻪ ﻫﺎ درﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪33 ....................................................‬‬

‫اﯾﺠﺎد اﺷﯿﺎ رﺷﺘﻪ اي )رﺷﺘﻪ( ﺑﺎ اﺳﺘﻔﺎده از ﮐﻼس ‪34................................................................. String‬‬

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

‫اﻟﺤﺎق دو رﺷﺘﻪ‪34............................................................................................................................‬‬

‫ﻋﻤﻠﮕﺮ ‪ +‬ﺑﺮاي اﻟﺤﺎق رﺷﺘﻪ ﻫﺎ ‪34 ............................................................................................................................‬‬

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

‫‪IV‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﻣﻘﺎﯾﺴﻪ رﺷﺘﻪ ﻫﺎ ‪35..........................................................................................................................‬‬

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

‫)(‪ toUpperCase‬و)( ‪37................................................................................................ toLowerCase‬‬

‫ﻓﺼﻞ ‪ : 6‬اﺷﯿﺎي دروﻧﯽ )ﭘﯿﺶ ﺳﺎﺧﺘﻪ( ‪39 ........................................................‬‬

‫ﺷﯽ ‪40.................................................................................................................................. Math‬‬

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

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

‫ﮐﺎر ﺑﺎ ﺗﺎرﯾﺦ و زﻣﺎن در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪43............................................................................................‬‬

‫ﻓﺼﻞ ‪BOM : 7‬؛ ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ ‪45 ......................................................‬‬

‫ِ‪ BOM‬ﭼﯿﺴﺖ؟ ‪46............................................................................................................................‬‬

‫ﺷﯽ ‪46............................................................................................................................... window‬‬

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

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

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

‫ﺧﺎﺻﯿﺖ ‪49........................................................................................................................ statusbar‬‬

‫اﺟﺮاي ﻣﮑﺮر ﮐﺪﻫﺎ از ﻃﺮﯾﻖ ﻣﺘﺪﻫﺎي ‪ Timeouts‬و ‪49............................................................ Intervals‬‬

‫ﺷﯽ ‪50................................................................................................................................ history‬‬

‫ﺷﯽ ‪51............................................................................................................................ document‬‬

‫ﺷﯽ ‪52.............................................................................................................................. location‬‬

‫ﺷﯽ ‪52............................................................................................................................ navigator‬‬

‫ﺷﯽ ‪54................................................................................................................................ screen‬‬

‫ﻓﺼﻞ ‪DOM : 8‬؛ ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ ‪55 .........................................................‬‬

‫‪ DOM‬ﭼﯿﺴﺖ؟ ‪56............................................................................................................................‬‬

‫اﺳﺘﻔﺎده از ‪60......................................................................................................................... DOM‬‬

‫‪V‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﮔﺮه ﻫﺎ ‪60 ............................................................................................................................................‬‬

‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺻﻔﺎت ﻋﻨﺎﺻﺮ ‪61 ...................................................................................................................................‬‬

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

‫)(‪61 .............................................................................................................................getElementsByTagName‬‬

‫)(‪62 .................................................................................................................................. getElementsByName‬‬

‫)(‪62 .......................................................................................................................................... getElementById‬‬

‫اﯾﺠﺎد و دﺳﺘﮑﺎري ﮔﺮه ﻫﺎ ‪63.............................................................................................................‬‬

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

‫)(‪ createTextNode() ،appendChild‬و )(‪64 ............................................................................................................ createElement‬‬

‫)(‪replaceChild() ،removeChild‬و )(‪65........................................................................................... insertBefore‬‬

‫)(‪65.......................................................................................................................... createDocumentFragment‬‬

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

‫دﺳﺘﮑﺎري ﻗﻮاﻋﺪ ﺳﺒﮏ ﻋﻨﺎﺻﺮ ‪67......................................................................................................‬‬

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

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

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

‫ﻓﺼﻞ ‪ : 9‬ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم ‪71 .............................................................‬‬

‫ﻧﻮﺷﺘﻦ اﺳﮑﺮﯾﭙﺖ ﻫﺎ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ ﻓﺮم ‪72........................................................................‬‬

‫اﯾﺠﺎد ارﺟﺎع ﺑﻪ ﻋﻨﺎﺻﺮ ﻣﻮرد ﻧﻈﺮ ‪72 ...........................................................................................................................‬‬

‫دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ داﺧﻞ ﯾﮏ ﻓﺮم ‪72...............................................................................................‬‬

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

‫ارﺳﺎل ﻓﺮم ﺑﻮﺳﯿﻠﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ‪74 ......................................................................................................................‬‬

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

‫ﮐﺎر ﺑﺎ ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ ‪75....................................................................................................................‬‬

‫‪VI‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﺑﺎزﯾﺎﺑﯽ و ﺗﻐﯿﯿﺮ ﻣﻘﺪار ﯾﮏ ‪76 ................................................................................................................... textbox‬‬

‫اﻧﺘﺨﺎب ﻣﺘﻦ ﻫﺎي داﺧﻞ ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ ‪76 .............................................................................................................‬‬

‫روﯾﺪاد ﻫﺎي ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ ‪76 ................................................................................................................................‬‬

‫اﻧﺘﺨﺎب ﺧﻮدﮐﺎر ﻣﺘﻦ درون ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ ‪77 ..........................................................................................................‬‬

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

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

‫ﮐﺎر ﺑﺎ ‪ listbox‬ﻫﺎ و ‪ combobox‬ﻫﺎ ‪79..................................................................................................‬‬

‫ﺑﺎزﯾﺎﺑﯽ‪/‬ﺗﻐﯿﯿﺮ دادن ‪)option‬ﻫﺎ(ي اﻧﺘﺨﺎب ﺷﺪه ‪80 ...................................................................................................‬‬

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

‫ﺣﺬف ‪ option‬ﻫﺎ ‪81 ................................................................................................................................................‬‬

‫ﻓﺼﻞ ‪ : 10‬روﯾﺪادﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪83 ........................................................‬‬

‫ﮐﻨﺘﺮل روﯾﺪادﻫﺎ ‪84...........................................................................................................................‬‬

‫اﻧﻮاع روﯾﺪاد ﻫﺎ ‪84............................................................................................................................‬‬

‫روﯾﺪادﻫﺎي ‪84 ............................................................................................................................................ mouse‬‬

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

‫روﯾﺪادﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ ‪85 ......................................................................................................................................‬‬

‫ﺗﺮﺗﯿﺐ اﺟﺮاﯾﯽ روﯾﺪاد ﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ ‪86 ........................................................................................................................................................‬‬

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

‫ﺷﯽ ‪87.................................................................................................................................. event‬‬

‫ﺧﻮاص و ﻣﺘﺪﻫﺎي ﺷﯽ ‪88 .............................................................................................................................event‬‬

‫ﻓﺼﻞ ‪ : 11‬ﮐﺎر ﺑﺎ ﮐﻮﮐﯽ ﻫﺎ ‪89 .........................................................................‬‬

‫اﯾﺠﺎد ﮐﻮﮐﯽ ﻫﺎ ‪90............................................................................................................................‬‬

‫ﺣﺬف ﮐﻮﮐﯽ ﻫﺎ ‪91............................................................................................................................‬‬

‫ﺑﺎزﯾﺎﺑﯽ ﮐﻮﮐﯽ ﻫﺎ ‪91..........................................................................................................................‬‬

‫‪VII‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
1stwebdesigner.ir
www.ParsBook.org
 ‫ﻓﺼﻞ ﯾﮏ‬

‫آﺷﻨﺎﯾﯽﺑﺎﻣﻔﺎﻫﯿﻢواﺻﻄﻼﺣﺎت‬

‫اﯾﻦ ﻓﺼﻞ اﺧﺘﺼﺎص ﺑﻪ ﺑﺮرﺳﯽ ﻣﻔﺎﻫﯿﻢ و اﺻﻄﻼﺣﺎت راﯾﺞ ﻣﻮﺟﻮد در ﺟﺎوااﺳﮑﺮﯾﭙﺖ دارد‪ .‬در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﻪ اﻧﻮاع زﺑﺎن ﻫﺎي‬
‫ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺗﺤﺖ وب ﺧﻮاﻫﯿﻢ ﭘﺮداﺧﺖ و ﺳﭙﺲ ﺗﻔﺎوت ﻫﺎي اﺻﻠﯽ زﺑﺎن ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ و ﺟﺎوا را ﺷﺮح ﺧﻮاﻫﯿﻢ داد‪ .‬در‬
‫اداﻣﻪ ﻧﯿﺰ ﺑﻪ ﻫﺴﺘﻪ ﻫﺎي ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﭘﺮداﺧﺘﻪ و ﺑﺎ ﮐﺎرﺑﺮدﻫﺎي ﻫﺮ ﯾﮏ از آن ﻫﺎ آﺷﻨﺎ ﺧﻮاﻫﯿﻢ ﺷﺪ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﺷﻨﺎﯾﯽ ﺑﺎ ﻣﻔﺎﻫﯿﻢ و اﺻﻄﻼﺣﺎت‬

‫اﻧﻮاع زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺗﺤﺖ وب‬

‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ داﻧﯿﺪ ﮐﺎﻣﭙﯿﻮﺗﺮ ﻫﺎي ﻣﻮﺟﻮد در ﺷﺒﮑﻪ اﯾﻨﺘﺮﻧﺖ را ﺑﻪ دو دﺳﺘﻪ اﺻﻠﯽ ﺗﻘﺴﯿﻢ ﻣﯽ ﮐﻨﻨﺪ‪ .‬ﮐﺎﻣﭙﯿﻮﺗﺮ ﻫﺎي ﮐﺎرﺑﺮ‪1‬و‬
‫ﮐﺎﻣﭙﯿﻮﺗﺮ ﻫﺎي ﺳﺮور‪ .2‬زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺗﺤﺖ وب ﻧﯿﺰ ﺑﻪ دو دﺳﺘﻪ ﺗﺤﺖ ﮐﺎرﺑﺮ‪ 3‬و ﺗﺤﺖ ﺳﺮور‪ 4‬ﺗﻘﺴﯿﻢ ﺑﻨﺪي ﻣﯽ ﺷﻮﻧﺪ‪.‬‬ ‫‪2‬‬
‫‪1‬‬

‫زﺑﺎن ﻫﺎي ﺗﺤﺖ ﮐﺎرﺑﺮ زﺑﺎن ﻫﺎﯾﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﺑﻮﺳﯿﻠﻪ ﻣﺮورﮔﺮ و ﻓﻘﻂ ﺑﺮ روي ﮐﺎﻣﭙﯿﻮﺗﺮﻫﺎي ﻣﺸﺘﺮي اﺟﺮا ﻣﯽ ﺷﻮﻧﺪ‪ .‬در واﻗﻊ ﺑﺮاي‬
‫اﺟﺮاي اﯾﻦ ﮔﻮﻧﻪ زﺑﺎن ﻫﺎ ﺑﻪ ﺳﺮورﻫﺎ ﻧﯿﺎزي ﻧﯿﺴﺖ‪ .‬زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ CSS ،HTML‬و ‪ JAVASCRIPT‬از اﯾﻦ دﺳﺖ‬
‫ﻫﺴﺘﻨﺪ‪ .‬از اﯾﻦ زﺑﺎن ﻫﺎ ﻣﻌﻤﻮﻻ ﺑﻪ ﺗﻨﻬﺎﯾﯽ ﺑﺮاي اﯾﺠﺎد ﺳﺎﯾﺖ ﻫﺎي ﺑﺎ ﻣﺤﺘﻮاي ﺛﺎﺑﺖ ﮐﻪ اﺻﻄﻼﺣﺎ ﺑﻪ آن ﻫﺎ ﺳﺎﯾﺖ ﻫﺎي اﯾﺴﺘﺎ‪ 5‬ﻣﯽ‬
‫ﮔﻮﯾﻨﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬‬
‫در ﻣﻘﺎﺑﻞ اﯾﻦ زﺑﺎن ﻫﺎ ‪ ،‬زﺑﺎن ﻫﺎي ﺗﺤﺖ ﺳﺮور وﺟﻮد دارﻧﺪ ﮐﻪ ﺑﺮاي اﺟﺮا ﻧﯿﺎز ﺑﻪ ﺳﺮور ﻫﺎ داﺷﺘﻪ و ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﺮاي اﺟﺮا ﺣﺘﻤﺎ ﺑﺮ‬
‫روي ﺳﺮور ﻫﺎ ﻗﺮار ﺑﮕﯿﺮﻧﺪ‪ .‬اﯾﻨﮕﻮﻧﻪ زﺑﺎن ﻫﺎ اﻣﮑﺎن ﺑﺮﻗﺮاري ارﺗﺒﺎط ﺑﺎ ﭘﺎﯾﮕﺎه داده‪ 6‬را دارﻧﺪ‪ .‬زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ ASP ،PHP‬و‬
‫‪ JSP‬از اﯾﻦ دﺳﺖ ﻫﺴﺘﻨﺪ‪ .‬از اﯾﻦ زﺑﺎن ﻫﺎ ﺑﺮاي اﯾﺠﺎد ﺳﺎﯾﺖ ﻫﺎي ﺑﺎ ﻣﺤﺘﻮاي ﭘﻮﯾﺎ ﮐﻪ اﺻﻄﻼﺣﺎ ﺑﻪ آن ﻫﺎ ﺳﺎﯾﺖ ﻫﺎي ﭘﻮﯾﺎ‪ 7‬ﮔﻔﺘﻪ‬
‫ﻣﯽ ﺷﻮد اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬‬
‫زﺑﺎن ‪ JavaScript‬ﯾﮑﯽ از زﺑﺎن ﻫﺎي ﻣﻬﻢ ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ وب و ﺗﺤﺖ ﮐﺎرﺑﺮﻣﯽ ﺑﺎﺷﺪ‪ .‬اﯾﻦ زﺑﺎن اوﻟﯿﻦ ﺑﺎر در ﺳﺎل ‪ ١٩٩۵‬اراﺋﻪ‬
‫ﺷﺪ و وﻇﯿﻔﻪ آن ﺗﻨﻬﺎ ارزش ﺳﻨﺠﯽ ﻋﻨﺎﺻﺮ ﻓﺮم ﺑﻮد‪.‬‬

‫‪1‬‬
‫‪Client‬‬
‫‪2‬‬
‫‪Server‬‬
‫‪3‬‬
‫‪Client side‬‬
‫‪4‬‬
‫‪Server side‬‬
‫‪5‬‬
‫‪Static‬‬
‫‪6‬‬
‫‪Database‬‬
‫‪7‬‬
‫‪Dynamic‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﺗﻔﺎوت ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ و ﺟﺎوا‬
‫اﯾﻦ ﺳﻮال ﮐﻪ ﺗﻔﺎوت زﺑﺎن ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ و ﺟﺎوا ﭼﯿﺴﺖ ﻫﻤﻮاره ﯾﮑﯽ از دﻏﺪﻏﻪ ﻫﺎي ﺑﺴﯿﺎري از ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ﺗﺎزه ﮐﺎر وب‬
‫ﺑﻪ ﺷﻤﺎر ﻣﯽ رود‪ .‬ﺟﺎﻟﺐ اﺳﺖ ﺑﺪاﻧﯿﺪ ﺻﺮﻓﻨﻈﺮ از ﺗﺸﺎﺑﻪ اﺳﻤﯽ اﯾﻦ دو زﺑﺎن و ﺗﺸﺎﺑﻪ ﻧﺤﻮ و دﺳﺘﻮرات آن ﻫﺎ ﺑﺎ زﺑﺎن ‪ ،C++‬ﺗﻔﺎوت‬
‫‪3‬‬ ‫ﻫﺎي ﺑﺴﯿﺎري ﺑﯿﻦ آن ﻫﺎ وﺟﻮد دارد ﮐﻪ در اداﻣﻪ ﺑﻪ ﺑﺮﺧﯽ از آن ﻫﺎ اﺷﺎره ﻣﯽ ﮐﻨﯿﻢ‪:‬‬

‫‪1‬‬ ‫ﺟﺎوا ﯾﮏ زﯾﺎن ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﮐﺎﻣﻼ ﺷﯽ ﮔﺮا)‪ (OOP1‬اﺳﺖ ﮐﻪ اوﻟﯿﻦ ﺑﺎر ﺗﻮﺳﻂ ﺷﺮﮐﺖ ‪ Sun MicroSystem‬ﺑﻪ ﻣﻨﻈﻮر‬ ‫‪‬‬
‫ﺧﻠﻖ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﮐﺎرﺑﺮدي ﻣﺴﺘﻘﻞ و ﻗﺎﺑﻞ اﺟﺮا ﺑﺮ روي اﻧﻮاع ﺳﯿﺴﺘﻢ ﻫﺎي ﻋﺎﻣﻞ اراﺋﻪ ﺷﺪ‪ .‬در ﺣﺎﻟﯽ ﮐﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ‬
‫ﻋﻨﻮان ﯾﮏ زﺑﺎن ﺷﺒﻪ ﺷﯽ ﮔﺮا)‪ (LOO2‬ﮐﻪ اوﻟﯿﻦ ﺑﺎر ﺗﻮﺳﻂ ﺷﺮﮐﺖ ‪ NetScape‬اراﺋﻪ ﺷﺪ‪ ،‬ﺗﻨﻬﺎ ﯾﮏ ﻓﺎﯾﻞ ﻣﺘﻨﯽ ﺳﺎده‬
‫اﺳﺖ ﮐﻪ ﻧﻤﯽ ﺗﻮان از آن ﺑﺮاي اﯾﺠﺎد ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﮐﺎﻣﻼ ﻣﺴﺘﻘﻞ اﺳﺘﻔﺎده ﮐﺮد و ﺑﺮاي اﺟﺮا ﻣﯽ ﺑﺎﯾﺴﺖ در داﺧﻞ ﺻﻔﺤﺎت‬
‫‪ HTML‬ﻗﺮار ﮔﺮﻓﺘﻪ و ﺗﻮﺳﻂ ﻣﺮورﮔﺮﻫﺎ ﺗﻔﺴﯿﺮ و اﺟﺮا ﺷﻮﻧﺪ‪ .‬در واﻗﻊ ﮐﺎرﺑﺮد اﺻﻠﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﺻﻔﺤﺎت وب ﺑﻮده و‬
‫از آن ﺗﻨﻬﺎ ﺑﻪ ﻣﻨﻈﻮر اﻓﺰودن ﻗﺎﺑﻠﯿﺖ ﻫﺎي ﺗﻌﺎﻣﻠﯽ ﺑﻪ ﺻﻔﺤﺎت وب اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬اﻟﺒﺘﻪ ﻧﺒﺎﯾﺪ از ذﮐﺮ اﯾﻦ ﻧﮑﺘﻪ ﻧﯿﺰ‬
‫ﮔﺬﺷﺖ ﮐﻪ در ﺳﺎل ﻫﺎي اﺧﯿﺮ اﻣﮑﺎن ﮐﺎرﺑﺮد ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺟﺎوا ﻧﯿﺰ در ﻗﺎﻟﺐ ‪ Applet‬ﻫﺎ و ﺻﻔﺤﺎت ‪ JSP3‬در وب ﻓﺮاﻫﻢ‬
‫ﺷﺪه اﺳﺖ‪.‬‬
‫ﺟﺎوا ﯾﮏ زﺑﺎن ﮐﺎﻣﭙﺎﯾﻠﯽ اﺳﺖ در ﺣﺎﻟﯽ ﮐﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻫﻤﺎن ﻃﻮر ﮐﻪ از اﺳﻤﺶ ﭘﯿﺪاﺳﺖ ﯾﮏ زﺑﺎن‬ ‫‪‬‬
‫اﺳﮑﺮﯾﭙﺘﯽ)ﻣﻔﺴﺮي( اﺳﺖ‪ .‬زﺑﺎن ﻫﺎي ﮐﺎﻣﭙﺎﯾﻠﯽ ﺑﻪ زﺑﺎن ﻫﺎﯾﯽ ﮔﻔﺘﻪ ﻣﯽ ﺷﻮد ﮐﻪ ﻗﺒﻞ از اﺟﺮا ﻣﯽ ﺑﺎﯾﺴﺖ ﮐﺎﻣﭙﺎﯾﻞ ﺷﻮﻧﺪ‪.‬‬
‫زﺑﺎن ﻫﺎي اﺳﮑﺮﯾﭙﺘﯽ ﻧﯿﺰ ﺑﻪ زﺑﺎن ﻫﺎﯾﯽ ﮔﻔﺘﻪ ﻣﯽ ﺷﻮد ﮐﻪ ﻣﺮﺣﻠﻪ ﮐﺎﻣﭙﺎﯾﻞ و اﺟﺮا آن ﻫﺎ ﺟﺪا ﻧﺒﻮده و در واﻗﻊ ﮐﺎﻣﭙﺎﯾﻞ آن‬
‫ﻫﺎ در زﻣﺎن اﺟﺮا اﻧﺠﺎم ﻣﯽ ﺷﻮد‪ .‬وﻇﯿﻔﻪ ﺗﻔﺴﯿﺮ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺮ ﻋﻬﺪه ﻣﺮورﮔﺮ اﺳﺖ‪.‬‬
‫ﺑﻪ ﺑﺮﻧﺎﻣﻪ ﻫﺎﯾﯽ ﮐﻪ ﺑﻪ زﺑﺎن ﻫﺎي اﺳﮑﺮﯾﭙﺘﯽ ﻧﻮﺷﺘﻪ ﻣﯽ ﺷﻮﻧﺪ اﺳﮑﺮﯾﭙﺖ ﻣﯽ ﮔﻮﯾﻨﺪ‪.‬‬
‫از ﺗﻔﺎوت ﻫﺎي ﻣﻬﻢ دﯾﮕﺮ اﯾﻦ دو زﺑﺎن ﻣﯽ ﺗﻮان ﺑﻪ ﺳﺒﮏ ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮ ﻫﺎ در آن ﻫﺎ اﺷﺎره ﮐﺮد‪ .‬زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ‬ ‫‪‬‬
‫از ﻟﺤﺎظ ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮ ﻫﺎ ﺑﻪ دو دﺳﺘﻪ زﺑﺎن ﻫﺎي ‪ Strongly Type‬و ‪ Loosely Type‬ﺗﻘﺴﯿﻢ ﻣﯽ ﺷﻮﻧﺪ‪.‬‬
‫در زﺑﺎن ﻫﺎي ﺑﺎ ﻧﻮع ﻗﻮي ﻣﯽ ﺑﺎﯾﺴﺖ اﺑﺘﺪا ﻧﻮع ﻣﺘﻐﯿﺮﻫﺎ را ﺗﻌﯿﯿﻦ و ﺳﭙﺲ در ﺑﺮﻧﺎﻣﻪ از آن اﺳﺘﻔﺎده ﻧﻤﻮد‪ .‬ﻧﻮع اﯾﻦ ﮔﻮﻧﻪ‬
‫ﻣﺘﻐﯿﺮ ﻫﺎ را ﻧﻤﯽ ﺗﻮان در ﻃﻮل اﺟﺮا ﺑﺮﻧﺎﻣﻪ ﺗﻐﯿﯿﺮ داد و در ﺻﻮرﺗﯽ ﮐﻪ اﯾﻦ ﻣﺘﻐﯿﺮﻫﺎ ﺑﺎ ﻋﻤﻠﮕﺮﻫﺎي ﻣﻨﺎﺳﺐ ﺧﻮد ﺑﻪ ﮐﺎر‬
‫ﻧﺮوﻧﺪ ﻧﺘﺎﯾﺞ ﻧﺎدرﺳﺖ ﺑﻪ دﺳﺖ ﻣﯽ آﯾﻨﺪ و ﯾﺎ ﺧﻄﺎﯾﯽ ﺑﻪ وﻗﻮع ﻣﯽ ﭘﯿﻮﻧﺪد‪ .‬زﺑﺎن ﻫﺎي ‪ C++‬و ‪ java‬از اﯾﻦ دﺳﺖ زﺑﺎن ﻫﺎ‬
‫ﻫﺴﺘﻨﺪ‪.‬‬
‫در ﻣﻘﺎﺑﻞ در زﺑﺎن ﻫﺎي ﺑﺎ ﻧﻮع ﺿﻌﯿﻒ ﻧﯿﺎزي ﺑﻪ ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮﻫﺎ و ﺗﻌﯿﯿﻦ ﻧﻮع داده آن ﻫﺎ ﻧﻤﯽ ﺑﺎﺷﺪ‪ .‬در اﯾﻦ زﺑﺎن ﻫﺎ ﺗﻌﯿﯿﻦ‬ ‫‪‬‬
‫ﻧﻮع ﻫﺎي داده ﺑﻪ ﻃﻮر ﺧﻮدﮐﺎر و ﺑﺮ ﺣﺴﺐ ﻧﯿﺎز ﺗﻮﺳﻂ ﺧﻮد زﺑﺎن اﻧﺠﺎم ﻣﯽ ﮔﯿﺮد و ﺑﻨﺎﺑﺮاﯾﻦ در ﻃﯽ ﻓﺮآﯾﻨﺪ ﭘﺮدازش داده ﻫﺎ‬
‫ﻣﯽ ﺗﻮان در ﻫﺮ ﻣﺮﺣﻠﻪ ﺑﻪ راﺣﺘﯽ ﻧﻮع داده ﻫﺎ را ﺑﺮرﺳﯽ و ﺗﻐﯿﯿﺮ داد‪ .‬زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ javascript‬و ‪ PHP‬از اﯾﻦ‬
‫دﺳﺖ ﻫﺴﺘﻨﺪ‪.‬‬
‫ﯾﺎدﮔﯿﺮي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺴﯿﺎر ﺳﺎده ﺗﺮ از ﺟﺎوا اﺳﺖ‪ .‬اﯾﻦ ﺑﻪ اﯾﻦ ﺧﺎﻃﺮ اﺳﺖ ﮐﻪ ﻫﻤﻪ آﻧﭽﻪ ﺷﻤﺎ ﺑﻪ ﻋﻨﻮان ﯾﮏ ﺗﻮﺳﻌﻪ‬ ‫‪‬‬
‫دﻫﻨﺪ وب ﺑﺮاي ﯾﺎدﮔﯿﺮي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻧﯿﺎز دارﯾﺪ درﮐﯽ ﻋﻤﯿﻖ از ‪ HTML‬اﺳﺖ‪ .‬ﺑﺎ اﯾﻦ ﺣﺎل ﭼﻨﺎﻧﭽﻪ درك درﺳﺘﯽ از‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﯾﺎدﮔﯿﺮي ﺟﺎوا ﻧﯿﺰ ﺑﺮاﯾﺘﺎن ﺳﻬﻞ و دﻟﭙﺬﯾﺮ ﺧﻮاﻫﺪ ﺷﺪ!‬

‫‪1‬‬
‫‪Object Oriented Programming‬‬
‫‪2‬‬
‫‪Like Object Oriented‬‬
‫‪3‬‬
‫‪Java Server Page‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﺷﻨﺎﯾﯽ ﺑﺎ ﻣﻔﺎﻫﯿﻢ و اﺻﻄﻼﺣﺎت‬

‫اﺟﺰا ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫‪DOM1‬؛ ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬

‫‪ DOM‬ﯾﮑﯽ از ‪ API2‬ﻫﺎ )راﺑﻂ ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ( ﺑﺮاي زﺑﺎن ﻫﺎي ‪ HTML‬و ‪ XML‬ﺑﻪ ﺷﻤﺎر ﻣﯽ رود‪.‬‬ ‫‪4‬‬
‫‪ DOM‬ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﯾﮏ ﺻﻔﺤﻪ وب را ﺑﻪ ﺻﻮرت درﺧﺘﯽ از ﮔﺮه ﻫﺎ‪ 3‬ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﺪ و اﻣﮑﺎن ﮐﻨﺘﺮل آن ﻫﺎ ﺑﺮاي‬ ‫‪1‬‬
‫ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن وب را ﻓﺮاﻫﻢ ﻣﯽ آورد‪ .‬ﺑﺎ اﺳﺘﻔﺎده از ‪ DOM‬ﻣﯽ ﺗﻮان ﮔﺮه ﻫﺎ را ﺑﻪ راﺣﺘﯽ ﺣﺬف‪ ،‬اﺿﺎﻓﻪ‪ ،‬ﺟﺎﺑﺠﺎ و ﯾﺎ ﺟﺎﯾﮕﺰﯾﻦ‬
‫ﮐﺮد‪.‬‬

‫‪BOM4‬؛ ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬

‫ﯾﮑﯽ دﯾﮕﺮ از ‪ API‬ﻫﺎي ﺳﺎﺧﺘﻪ ﺷﺪه ﺑﺮاي ‪ HTML‬ﮐﻪ ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از وﯾﮋﮔﯽ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﻣﺮورﮔﺮﻫﺎي ‪ IE‬و‬
‫‪ Netscape‬ﻧﯿﺰ ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮد ‪ BOM‬اﺳﺖ‪.‬‬
‫از ‪ BOM‬ﺑﺮاي دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري وﯾﮋﮔﯽ ﻫﺎي ﭘﻨﺠﺮه ﯾﮏ ﻣﺮورﮔﺮ ﻣﯽ ﺗﻮان اﺳﺘﻔﺎده ﮐﺮد‪.‬‬
‫ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن وب ﺑﺎ اﺳﺘﻔﺎده از ‪ BOM‬ﻣﯽ ﺗﻮاﻧﺪ ﮐﺎرﻫﺎﯾﯽ ﻫﻤﭽﻮن ﺟﺎﺑﺠﺎﯾﯽ ﭘﻨﺠﺮه ﻫﺎ و ﺗﻐﯿﯿﺮ ﻣﺘﻦ ﻣﻮﺟﻮد در ﻧﻮار وﺿﻌﯿﺖ‬
‫ﻣﺮورﮔﺮ و دﯾﮕﺮ ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ارﺗﺒﺎط ﻣﺴﺘﻘﯿﻤﯽ ﺑﺎ ﻣﺤﺘﻮاي ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺻﻔﺤﻪ )ﺳﻨﺪ( ﻧﺪارﻧﺪ اﻧﺠﺎم دﻫﻨﺪ‪.‬‬
‫ﻣﻌﻤﻮﻵ ‪ BOM‬ﺑﺎ ﭘﻨﺠﺮه ﻫﺎ و ﻓﺮﯾﻢ ﻫﺎ ﺳﺮ و ﮐﺎر داﺷﺘﻪ و ﻣﯽ ﺗﻮان از ﻃﺮﯾﻖ آن ﮐﺎرﻫﺎي زﯾﺮ را اﻧﺠﺎم داد‪:‬‬
‫‪ ‬ﺑﺎز ﮐﺮدن ﭘﻨﺠﺮه ﻫﺎي ‪.popup‬‬
‫‪ ‬ﺗﻮاﻧﺎﯾﯽ ﺑﺎزﮐﺮدن ﭘﻨﺠﺮه ﻫﺎي ﺟﺪﯾﺪ و ﺗﻐﯿﯿﺮ اﻧﺪازه و ﺟﺎﺑﺠﺎﯾﯽ و ﯾﺎ ﺑﺴﺘﻦ آن ﻫﺎ‪.‬‬
‫‪ ‬ﺑﺪﺳﺖ آوردن اﻃﻼﻋﺎﺗﯽ از ﻣﺮورﮔﺮ و ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ ﮐﺎرﺑﺮان ﻫﻤﭽﻮن ﻧﻮع‪ ،‬ﻧﺴﺨﻪ و‪...‬‬
‫‪ ‬ﺑﺪﺳﺖ آوردن اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﺳﻨﺪ و ﻣﻮﻗﻌﯿﺖ ﺻﻔﺤﻪ اي ﮐﻪ در ﻣﺮورﮔﺮ ﺑﺎز ﺷﺪه اﺳﺖ‪.‬‬
‫‪ ‬ﺑﺪﺳﺖ آوردن اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد وﺿﻮح‪ 5‬ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﮐﺎرﺑﺮ‪.‬‬
‫‪ ‬ﭘﺸﺘﯿﺒﺎﻧﯽ از ‪cookie‬ﻫﺎ‪.‬‬
‫ﺑﻪ دﻟﯿﻞ ﻋﺪم وﺟﻮد اﺳﺘﺎﻧﺪاردي واﺣﺪ ﺑﺮاي ‪ ،BOM‬ﻫﺮ ﻣﺮورﮔﺮ ﻣﻤﮑﻦ اﺳﺖ ﺑﻪ ﺻﻮرﺗﯽ ﻣﺘﻔﺎوت از آن ﭘﺸﺘﯿﺒﺎﻧﯽ ﮐﻨﺪ‪ .‬ﻣﺎﻧﻨﺪ اﺷﯿﺎ‬
‫‪ window‬و ‪ navigator‬ﮐﻪ ﻫﺮ ﻣﺮورﮔﺮ ﻣﺘﺪﻫﺎ و ﺧﻮاص ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮدي ﺑﺮاي آن ﻫﺎ ﺗﻌﺮﯾﻒ ﮐﺮده اﺳﺖ‪.‬‬

‫وﯾﮋﮔﯽ ﻫﺎي ﺑﻨﯿﺎدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫اﯾﻨﮏ ﺑﻪ ﭼﻨﺪ ﻣﻔﻬﻮم اﺻﻠﯽ در زﺑﺎن ‪ javascript‬ﻣﯽ ﭘﺮدازﯾﻢ‪:‬‬
‫ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺣﺴﺎس ﺑﻪ ﺣﺮوف‪ 6‬اﺳﺖ‪ :‬ﯾﻌﻨﯽ ﻫﻤﻪ ﭼﯿﺰ ﻣﺎﻧﻨﺪ ﻧﺎم ﻣﺘﻐﯿﺮ ﻫﺎ ‪ ،‬ﻧﺎم ﺗﻮاﺑﻊ ‪ ،‬ﻋﻤﻠﮕﺮ ﻫﺎ و ﻫﺮ ﭼﯿﺰ‬ ‫‪‬‬
‫دﯾﮕﺮي ﻧﺴﺒﺖ ﺑﻪ ﺣﺮوف ﮐﻮﭼﮏ و ﺑﺰرگ ﺣﺴﺎس اﺳﺖ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻣﺘﻐﯿﺮي ﺑﺎ ﻧﺎم ‪ Test‬ﺑﺎ ﻣﺘﻐﯿﺮي ﺑﺎ ﻧﺎم ‪test‬‬
‫ﻣﺘﻔﺎوت اﺳﺖ‪.‬‬

‫‪1‬‬
‫‪Document Object Model‬‬
‫‪2‬‬
‫‪Application Programming Interface‬‬
‫‪3‬‬
‫‪Node‬‬
‫‪4‬‬
‫‪Browser Object Model‬‬
‫‪5‬‬
‫‪Resolution‬‬
‫‪6‬‬
‫‪Case Sensitive‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﻣﺘﻐﯿﺮﻫﺎ ﺑﺪون ﻧﻮع ﻫﺴﺘﻨﺪ‪ :‬ﺑﺮﺧﻼف زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ java‬و ‪ , C‬ﻣﺘﻐﯿﺮﻫﺎ ﻧﻮع ﺧﺎﺻﯽ ﻧﻤﯽ ﮔﯿﺮﻧﺪ‪ .‬در ﻋﻮض‬ ‫‪‬‬
‫ﻫﺮ ﻣﺘﻐﯿﺮ ﻣﯽ ﺗﻮاﻧﺪ ﺑﺎ ﮐﻠﻤﻪ ﮐﻠﯿﺪي ‪ var‬ﺗﻌﺮﯾﻒ ﺷﺪه و ﻣﻘﺪاري را ﺑﻪ ﻋﻨﻮان ﻣﻘﺪار اوﻟﯿﻪ ﺑﭙﺬﯾﺮد‪ .‬در واﻗﻊ ﻣﺘﻐﯿﺮﻫﺎ "ﻣﻘﺪار‬
‫ﮔﺮا" ﻫﺴﺘﻨﺪ‪ .‬ﯾﻌﻨﯽ در ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻌﺮﯾﻒ )ﻣﻘﺪاردﻫﯽ( ﻣﯽ ﺷﻮﻧﺪ ﻧﻮﻋﺸﺎن ﻧﯿﺰ ﻣﺸﺨﺺ ﻣﯽ ﮔﺮدد‪ .‬اﯾﻦ وﯾﮋﮔﯽ اﻣﮑﺎن‬

‫‪5‬‬ ‫ﺗﻐﯿﯿﺮ ﻧﻮع داده ذﺧﯿﺮه ﺷﺪه در ﯾﮏ ﻣﺘﻐﯿﺮ در ﻫﺮ ﻧﻘﻄﻪ اي از ﺑﺮﻧﺎﻣﻪ را ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫ﻗﺮار دادن );( در اﻧﺘﻬﺎي ﻫﺮ دﺳﺘﻮر اﺧﺘﯿﺎري اﺳﺖ‪ :‬دﺳﺘﻮرات در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ ; ﺧﺘﻢ ﺷﻮﻧﺪ ﯾﺎ‬ ‫‪‬‬
‫‪1‬‬ ‫ﻧﺸﻮﻧﺪ‪ .‬در ﺻﻮرت ﭼﺸﻢ ﭘﻮﺷﯽ از ; ‪ ،‬ﺟﺎوا اﺳﮑﺮﯾﭙﺖ اﻧﺘﻬﺎي ﻫﺮ ﺧﻂ را ﺑﻪ ﻋﻨﻮان ﭘﺎﯾﺎن دﺳﺘﻮر در ﻧﻈﺮ ﺧﻮاﻫﺪ ﮔﺮﻓﺖ‪ .‬ﺑﺎ‬
‫اﯾﻦ ﺣﺎل روش ﺻﺤﯿﺢ ‪ ،‬اﺳﺘﻔﺎده از ; در اﻧﺘﻬﺎي دﺳﺘﻮرات اﺳﺖ‪ .‬ﭼﻮن ﺑﻌﻀﯽ از ﻣﺮورﮔﺮﻫﺎ از روش اول ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽ‬
‫ﮐﻨﺪ و ﻣﻤﮑﻦ اﺳﺖ در اﺟﺮاي ﮐﺪﻫﺎ دﭼﺎر ﻣﺸﮑﻞ ﺷﻮﻧﺪ‪.‬‬
‫درج ﺗﻮﺿﯿﺤﺎت در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ‪ :‬ﺑﺮاي درج ﺗﻮﺿﯿﺤﺎت در ﻣﯿﺎن ﮐﺪﻫﺎ ﻣﯽ ﺗﻮان از روش ﻫﺎي زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ‬ ‫‪‬‬
‫ﻧﻮﯾﺴﯽ ﻫﻤﭽﻮن ‪ C‬و ‪ C++‬اﺳﺘﻔﺎده ﻧﻤﻮد ﯾﻌﻨﯽ از ‪ //‬ﺑﺮاي ﺗﻮﺿﯿﺤﺎت ﯾﮏ ﺧﻄﯽ ﯾﺎ ‪ /* */‬ﺑﺮاي ﺗﻮﺿﯿﺤﺎت ﭼﻨﺪ‬
‫ﺧﻄﯽ‪:‬‬
‫‪//this is a single-line comment‬‬
‫‪/* this is a multiline‬‬
‫‪comment */‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
1stwebdesigner.ir
www.ParsBook.org
 ‫ﻓﺼﻞ دو‬

‫ﻣﺘﻐﯿﺮﻫﺎواﻧﻮاعدادهﻫﺎ‬

‫در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﺎ روش ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮﻫﺎ و ﻗﻮاﻧﯿﻦ ﻧﺎﻣﮕﺬاري آن ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ آﺷﻨﺎ ﺧﻮاﻫﯿﻢ ﺷﺪ و ﺳﭙﺲ اﻧﻮاع داده ﻫﺎي‬
‫ﻣﻮﺟﻮد را ﺑﺮرﺳﯽ ﺧﻮاﻫﯿﻢ ﮐﺮد‪ .‬ﻫﻤﭽﻨﯿﻦ ﻟﯿﺴﺘﯽ از ﮐﻠﻤﺎت ﮐﻠﯿﺪي و رزرو ﺷﺪه ﮐﻪ اﻣﮑﺎن اﺳﺘﻔﺎده از آن ﻫﺎ ﺑﻪ ﻋﻨﻮان ﻧﺎم ﻣﺘﻐﯿﺮﻫﺎ و‬
‫ﺗﻮاﺑﻊ وﺟﻮد ﻧﺪارد را اراﺋﻪ ﺧﻮاﻫﯿﻢ ﮐﺮد‪.‬‬
‫ﻫﻤﭽﻨﯿﻦ در اﯾﻦ ﻓﺼﻞ ﺑﻪ ﻣﺒﺤﺚ ﺑﺴﯿﺎر ﻣﻬﻢ ﺗﺒﺪﯾﻞ اﻧﻮاع ﭘﺮداﺧﺘﻪ و روش ﻫﺎي ﺗﺒﺪﯾﻞ اﻧﻮاع ﮔﻮﻧﺎﮔﻮن ﺑﻪ ﯾﮑﺪﯾﮕﺮ را ﺑﺮرﺳﯽ ﺧﻮاﻫﯿﻢ‬
‫ﮐﺮد‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﻣﺘﻐﯿﺮﻫﺎ و اﻧﻮاع داده ﻫﺎ‬

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

‫ﺑﺎﯾﺪ ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ﻣﺘﻐﯿﺮﻫﺎﯾﯽ ﮐﻪ ﺑﺎ ﯾﮏ ‪ var‬ﺗﻌﺮﯾﻒ ﻣﯽ ﺷﻮد ﻣﻤﮑﻦ اﺳﺖ ﻧﻮع ﯾﮑﺴﺎﻧﯽ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﻨﺪ‪.‬‬
‫‪var‬‬ ‫;‪test_1='ali' , age=25‬‬

‫ﺑﺮﺧﻼف ﺟﺎوا در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻣﺘﻐﯿﺮﻫﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ ﻣﻘﺪار اوﻟﯿﻪ ﻧﮕﯿﺮﻧﺪ‪.‬‬

‫‪var‬‬ ‫; ‪test‬‬

‫ﺑﺮﺧﻼف ﺟﺎوا ﻣﺘﻐﯿﺮﻫﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ در زﻣﺎنﻫﺎي ﻣﺨﺘﻠﻒ ﻣﻘﺎدﯾﺮ ﻣﺘﻔﺎوﺗﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ .‬اﯾﻦ ﯾﮑﯽ از اﻣﺘﯿﺎزات ﻣﺘﻐﯿﺮﻫﺎي‬ ‫‪‬‬
‫ﺑﺪون ﻧﻮع در زﺑﺎن ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﺷﻤﺎر ﻣﯽ رود‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﯾﮏ ﻣﺘﻐﯿﺮ ﻣﯽ ﺗﻮاﻧﺪ ﺑﺎﯾﺪ ﯾﮏ ﻣﻘﺪار رﺷﺘﻪاي‬
‫ﻣﻘﺪاردﻫﯽ اوﻟﯿﻪ ﺷﺪه و ﺳﭙﺲ در اداﻣﻪ ﺑﺮﻧﺎﻣﻪ ﺑﻪ ﯾﮏ ﻣﻘﺪار ﻋﺪدي ﺗﻐﯿﯿﺮ ﮐﻨﺪ‪ .‬ﺑﻪ ﻣﺜﺎل زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬
‫; "‪var test ="hi‬‬
‫;)‪alert(test‬‬ ‫‪// hi‬‬
‫;‪test=55‬‬
‫;)‪alert(test‬‬ ‫‪// 55‬‬

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

‫اﻟﺒﺘﻪ ﺻﺤﺖ ﻧﺎم ﯾﮏ ﻣﺘﻐﯿﺮ از ﻧﻈﺮ ﻧﺤﻮي‪ ،‬ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﻧﯿﺴﺖ ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﺪ از آن ﻫﺎ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬ﺑﻬﺘﺮ اﺳﺖ در ﻧﺎﻣﮕﺬاري‬
‫ﻣﺘﻐﯿﺮﻫﺎ از ﯾﮑﯽ از ﻗﺮاردادﻫﺎي ﺷﻨﺎﺧﺘﻪ ﺷﺪه زﯾﺮ ﺗﺒﻌﯿﺖ ﮐﻨﯿﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﻧﺸﺎﻧﻪ ﮔﺬاري ﺷﺘﺮي‪ :1‬در اﯾﻦ ﻗﺮارداد‪ ،‬ﺣﺮف اول ﻣﺘﻐﯿﺮ ﮐﻮﭼﮏ و ﺣﺮف اول ﺑﻘﯿﻪ ﮐﻠﻤﺎت ﺑﻪ ﺻﻮرت ﺑﺰرگ ﻧﻮﺷﺘﻪ ﻣﯽ‬ ‫‪‬‬
‫ﺷﻮد‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‪:‬‬
‫;”‪var myTestValue = 0, mySecondTestValue = “hi‬‬

‫‪9‬‬ ‫ﻧﺸﺎﻧﻪ ﮔﺬاري ﭘﺎﺳﮑﺎل‪ :‬در اﯾﻦ روش ﺣﺮف اول ﻣﺘﻐﯿﺮ و ﺣﺮف اول ﺑﻘﯿﻪ ﮐﻠﻤﺎت ﺑﻪ ﺻﻮرت ﺑﺰرگ ﻧﻮﺷﺘﻪ ﻣﯽ ﺷﻮد‪ .‬ﺑﻪ‬ ‫‪‬‬
‫ﻋﻨﻮان ﻣﺜﺎل‪:‬‬
‫‪2‬‬
‫;”‪var MyTestValue = 0, MySecondTestValue = “hi‬‬

‫ﻧﺸﺎﻧﻪ ﮔﺬاري ﻣﺠﺎرﺳﺘﺎﻧﯽ‪ :‬در اﯾﻦ روش از ﯾﮏ ﯾﺎ دﻧﺒﺎﻟﻪ اي از ﭘﯿﺸﻮﻧﺪﻫﺎ ﻗﺒﻞ از ﻧﺸﺎﻧﻪ ﮔﺬاري ﭘﺎﺳﮑﺎل ﺑﺮاي ﺗﻌﯿﯿﻦ ﻧﻮع‬ ‫‪‬‬
‫ﯾﮏ ﻣﺘﻐﯿﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﮐﺎراﮐﺘﺮ ‪ i‬ﺑﻪ ﻣﻌﻨﯽ ﻋﺪد ﺻﺤﯿﺢ و ‪ s‬ﺑﻪ ﻣﻌﻨﯽ رﺷﺘﻪ اﺳﺖ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‪:‬‬
‫;”‪var iMyTestValue = 0, sMySecondTestValue = “hi‬‬

‫ﺟﺪول زﯾﺮ ﻟﯿﺴﺘﯽ از ﭘﯿﺸﻮﻧﺪﻫﺎي ﻣﻮﺟﻮد ﺑﻪ ﻣﻨﻈﻮر اﺳﺘﻔﺎده در ﻧﺸﺎﻧﻪﮔﺬاري ﻣﺠﺎرﺳﺘﺎﻧﯽ را ﻧﺸﺎن ﻣﯽ دﻫﺪ‪ .‬ﻣﺎ در اﯾﻦ ﺟﺰوه از اﯾﻦ‬
‫ﭘﯿﺸﻮﻧﺪﻫﺎ ﺑﺮاي ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮﻫﺎ اﺳﺘﻔﺎده ﮐﺮده اﯾﻢ‪.‬‬
‫ﻧﻤﻮﻧﻪ‬ ‫ﭘﯿﺸﻮﻧﺪ‬ ‫ﻧﻮع‬
‫‪aValues‬‬ ‫‪a‬‬ ‫آراﯾﻪ‬
‫‪bFaound‬‬ ‫‪b‬‬ ‫ﺑﻮﻟﯿﻦ‬
‫‪fValue‬‬ ‫‪f‬‬ ‫ﻋﺪد اﻋﺸﺎري‬
‫‪iValue‬‬ ‫‪i‬‬ ‫ﻋﺪد ﺻﺤﯿﺢ‬
‫‪fnMethod‬‬ ‫‪fn‬‬ ‫ﺗﺎﺑﻊ‬
‫‪oType‬‬ ‫‪o‬‬ ‫ﺷﯽ‬
‫‪sValue‬‬ ‫‪s‬‬ ‫رﺷﺘﻪ‬
‫ﯾﮑﯽ دﯾﮕﺮ از اﻣﺘﯿﺎزات و ﯾﺎ ﺷﺎﯾﺪ ﺟﺬاﺑﯿﺖ ﻫﺎي ‪) javascript‬ﮐﻪ در ﺑﺴﯿﺎري از زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ دﯾﮕﺮ وﺟﻮد ﻧﺪارد( اﯾﻦ‬
‫اﺳﺖ ﮐﻪ ﻻزم ﻧﯿﺴﺖ ﻣﺘﻐﯿﺮ ﻫﺎ را ﻗﺒﻞ از ﻣﻘﺪار دﻫﯽ‪ ،‬اﻋﻼن ﮐﻨﯿﻢ‪:‬‬
‫;"‪var sTest="hello‬‬
‫;"‪sTest2=sTest + "world‬‬
‫‪alert (sTest2); // hello world‬‬

‫در ﻣﺜﺎل ﻓﻮق ﻣﺘﻐﯿﺮ ‪ sTest2‬ﻗﺒﻞ از ﻣﻘﺪاردﻫﯽ اﻋﻼن ﻧﺸﺪه اﺳﺖ‪.‬‬

‫ﻣﻮﻗﻌﯽ ﮐﻪ ﻣﻔﺴﺮ ﺑﻪ ﭼﻨﯿﻦ ﻣﺘﻐﯿﺮﻫﺎي ﮐﻪ ﺑﺪون اﻋﻼن‪ ،‬ﻣﻘﺪاردﻫﯽ ﻣﯽ ﺷﻮﻧﺪ ‪ ,‬ﺑﺮﺧﻮرد ﻣﯽ ﮐﻨﺪ‪ ،‬ﯾﮏ ﻣﺘﻐﯿﺮ ﺳﺮاﺳﺮي ﺑﻪ ﻫﻤﺎن ﻧﺎم‬
‫اﯾﺠﺎد ﮐﺮده و ﻣﻘﺪاري را ﺑﻪ آن اﺧﺘﺼﺎص ﻣﯽ دﻫﺪ‪ .‬ﺑﺎ اﯾﻦ وﺟﻮد ﭘﯿﺸﻨﻬﺎد ﻣﯽ ﺷﻮد ﻫﻤﯿﺸﻪ ﻗﺒﻞ از ﺑﻪ ﮐﺎرﮔﯿﺮي ﻣﺘﻐﯿﺮﻫﺎ آن‬
‫ﻫﺎ را اﻋﻼن ﮐﻨﯿﺪ‪.‬‬

‫‪1‬‬
‫‪Camel Notation‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﻣﺘﻐﯿﺮﻫﺎ و اﻧﻮاع داده ﻫﺎ‬

‫‪1‬‬
‫ﮐﻠﻤﺎت ﮐﻠﯿﺪي‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻌﺪادي از ﮐﻠﻤﺎت را ﺑﻪ ﻋﻨﻮان ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﯽ ﺷﻨﺎﺳﺪ‪ .‬اﯾﻦ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﻌﻤﻮﻻ اﺑﺘﺪا ﯾﺎ اﻧﺘﻬﺎي دﺳﺘﻮرات را‬
‫ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﻨﺪ‪ .‬ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﺑﻪ ﻋﻨﻮان ﮐﻠﻤﺎت رزرو ﺷﺪه ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮﻧﺪ و ﻧﻤﯽ ﺗﻮان از آن ﻫﺎ ﺑﻪ ﻋﻨﻮان ﻧﺎم ﻣﺘﻐﯿﺮ ﻫﺎ ﯾﺎ‬ ‫‪10‬‬
‫ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﻧﻤﻮد‪ .‬در زﯾﺮ ﻟﯿﺴﺖ ﮐﺎﻣﻠﯽ از اﯾﻦ ﮐﻠﻤﺎت را ﻣﺸﺎﻫﺪه ﻣﯽ ﮐﻨﯿﺪ‪:‬‬
‫‪2‬‬
‫‪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‬روﺑﺮو ﺧﻮاﻫﯿﺪ ﺷﺪ‪.‬‬

‫‪2‬‬
‫ﮐﻠﻤﺎت رزرو ﺷﺪه‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻌﺪادي از ﮐﻠﻤﺎت رزرو ﺷﺪه را ﻧﯿﺰ ﻣﻌﺮﻓﯽ ﮐﺮده اﺳﺖ‪ .‬ﮐﻠﻤﺎت رزرو ﺷﺪه ﻧﯿﺰ ﻧﻤﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ ﻋﻨﻮان ﻧﺎم ﻣﺘﻐﯿﺮ ﻫﺎ و‬
‫ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﺷﻮﻧﺪ‪ .‬ﻟﯿﺴﺖ ﮐﺎﻣﻠﯽ از اﯾﻦ ﮐﻠﻤﺎت را در زﯾﺮ ﻣﺸﺎﻫﺪه ﻣﯽ ﮐﻨﯿﺪ‪:‬‬
‫‪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‬ﺑﺎﺷﺪ‪.‬‬ ‫‪‬‬

‫‪1‬‬
‫‪Keywords‬‬
‫‪2‬‬
‫‪Reserved Words‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫‪ :number‬اﮔﺮ ﻣﺘﻐﯿﺮ از ﻧﻮع ‪ Number‬ﺑﺎﺷﺪ‪.‬‬ ‫‪‬‬
‫‪ :string‬اﮔﺮ ﻣﺘﻐﯿﺮ از ‪ String‬ﺑﺎﺷﺪ‪.‬‬ ‫‪‬‬
‫‪ :object‬اﮔﺮ ﻣﺘﻐﯿﺮ ﯾﮏ ارﺟﺎع ﯾﺎ از ﻧﻮع ‪ null‬ﺑﺎﺷﺪ‪.‬‬ ‫‪‬‬

‫‪11‬‬ ‫ﻧﻮع داده ‪Undefind‬‬

‫اﯾﻦ ﻧﻮع ﻓﻘﻂ ﺷﺎﻣﻞ ﻣﻘﺪار ‪ Undefined‬ﻣﯽ ﺷﻮد‪ .‬ﻣﺘﻐﯿﺮي ﮐﻪ اﻋﻼن ﺷﻮد وﻟﯽ ﻣﻘﺪار دﻫﯽ اوﻟﯿﻪ ﻧﺸﻮد ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض از‬
‫‪2‬‬
‫ﻧﻮع ‪ 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‬‬

‫ﺧﺮوﺟﯽ ﺗﺎﺑﻌﯽ ﮐﻪ در داﺧﻞ ﺑﺪﻧﻪ ﺧﻮد ﻣﻘﺪاري را ﺻﺮاﺣﺘﺎ ﺑﺮﻧﻤﯽ ﮔﺮداﻧﺪ ﻧﯿﺰ ﻣﻘﺪار ‪ uindefined‬اﺳﺖ‪:‬‬
‫{ )( ‪function Testfunc‬‬
‫‪// leave the function black‬‬
‫}‬
‫”‪alert( TestFunc() == undefined ); //outputs “true‬‬

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

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

‫اﮔﺮ ﭼﻪ اﯾﻦ دو ﻣﻌﺎدل ﯾﮑﺪﯾﮕﺮﻧﺪ اﻣﺎ ﻣﻌﺎﻧﯽ ﻣﺘﻔﺎوﺗﯽ دارﻧﺪ‪ undefined .‬ﺗﻨﻬﺎ زﻣﺎﻧﯽ ﺑﻪ ﯾﮏ ﻣﺘﻐﯿﺮ ﻧﺴﺒﺖ داده ﻣﯽ ﺷﻮد ﮐﻪ آن ﻣﺘﻐﯿﺮ‬
‫اﻋﻼن ﺷﻮد وﻟﯽ ﻣﻘﺪاردﻫﯽ ﻧﺸﻮد‪ .‬در ﺣﺎﻟﯽ ﮐﻪ ﯾﮏ ﻣﺘﻐﯿﺮ زﻣﺎﻧﯽ از ﻧﻮع ‪ null‬اﺳﺖ ﮐﻪ اﺷﺎره ﺑﻪ ﺷﯽ اي داﺷﺘﻪ ﺑﺎﺷﺪ ﮐﻪ وﺟﻮد‬
‫ﻧﺪارد‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﻣﺘﻐﯿﺮﻫﺎ و اﻧﻮاع داده ﻫﺎ‬

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

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

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

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

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

‫;‪var fNum = 5.0‬‬

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

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

‫ﺗﺒﺪﯾﻞ اﻧﻮاع‬
‫ﯾﮑﯽ از وﯾﮋﮔﯽ ﻫﺎي ﺑﺮﺟﺴﺘﻪ ﻫﺮ زﺑﺎن ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﻗﺎﺑﻠﯿﺖ ﺗﺒﺪﯾﻞ اﻧﻮاع در آن اﺳﺖ‪ .‬ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻧﯿﺰ از اﯾﻦ ﻗﺎﻋﺪه ﻣﺴﺘﺜﻨﯽ‬
‫ﻧﺒﻮده و روش ﻫﺎي ﺳﺎده اي ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ﻓﺮاﻫﻢ آورده اﺳﺖ‪ .‬اﮐﺜﺮ اﻧﻮاع ﻣﻮﺟﻮد در ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﻣﺘﺪﻫﺎﯾﯽ ﺑﺮاي ﺗﺒﺪﯾﻞ ﺑﻪ‬
‫ﺳﺎﯾﺮ اﻧﻮاع ﭘﺸﺘﯿﺒﺎﻧﯽ ﮐﺮده و ﺗﻮاﺑﻌﯽ ﺳﺮاﺳﺮي ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ﺑﻪ روش ﻫﺎي ﭘﯿﭽﯿﺪه ﺗﺮ وﺟﻮد دارد‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﺗﺒﺪﯾﻞ ﺑﻪ رﺷﺘﻪ‬
‫ﯾﮑﯽ از ﺟﺬاﺑﺘﺮﯾﻦ وﯾﮋﮔﯽ ﻫﺎﯾﯽ ﮐﻪ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ در راﺑﻄﻪ ﺑﺎ اﻧﻮاع اﺻﻠﯽ ‪ numbers ، boolean‬و ‪ string‬ﻓﺮاﻫﻢ ﮐﺮده اﺳﺖ‬
‫اﯾﻦ اﺳﺖ ﮐﻪ آﻧﻬﺎ در اﺻﻞ اﺷﯿﺎي ﮐﺎذب‪ 1‬ﻫﺴﺘﻨﺪ‪ ،‬ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ داراي ﺧﺎﺻﯿﺖ ﻫﺎ و ﻣﺘﺪﻫﺎي ﻣﺸﺘﺮك و ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮدي ﻣﯽ‬

‫‪13‬‬ ‫ﺑﺎﺷﻨﺪ‪.‬‬
‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي ﺑﺪﺳﺖ آوردن ﻃﻮل ﯾﮏ رﺷﺘﻪ ﻣﯽ ﺗﻮان از ﺧﺎﺻﯿﺖ ‪ .length‬اﺳﺘﻔﺎده ﻧﻤﻮد‪:‬‬
‫‪2‬‬
‫; "‪var sColor = "blue‬‬
‫; )‪alert (sColor.length‬‬ ‫”‪//outputs “4‬‬

‫ﺳﻪ ﻧﻮع داده ‪ number ، boolean‬و ‪ 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‬ﻋﻤﻞ ﮐﺮده و از اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﺷﺮوع ﺑﻪ ﺟﺴﺘﺠﻮ ﻣﯽ ﮐﻨﺪ‪ .‬اﻟﺒﺘﻪ در اﯾﻦ ﻣﺘﺪ اوﻟﯿﻦ‬
‫ﮐﺎراﮐﺘﺮ ﻧﻘﻄﻪ ﺣﺴﺎب ﻧﻤﯽ ﺷﻮد و آن را ﺑﻪ ﻫﻤﺎن ﺻﻮرت ﺑﺮﻣﯽﮔﺮداﻧﺪ‪.‬‬

‫‪1‬‬
‫‪Pseudo-Objects‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﻣﺘﻐﯿﺮﻫﺎ و اﻧﻮاع داده ﻫﺎ‬

‫اﮔﺮ دو ﮐﺎراﮐﺘﺮ ﻧﻘﻄﻪ در رﺷﺘﻪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﻨﺪ دوﻣﯿﻦ ﻧﻘﻄﻪ ﺑﻪ ﻋﻨﻮان ﮐﺎراﮐﺘﺮ ﺑﯽ ارزش ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮد و ﻋﻤﻠﯿﺎت ﺗﺒﺪﯾﻞ‬
‫ﻣﺘﻮﻗﻒ ﻣﯽ ﺷﻮد‪ .‬ﻣﺜﺎل ﻫﺎ‪:‬‬
‫‪var‬‬
‫‪var‬‬
‫‪fNum1‬‬
‫‪fNum3‬‬
‫=‬
‫=‬
‫;)”‪parseFloat(“1234blue‬‬
‫;)”‪parseFloat(“22.5‬‬
‫‪//returns 1234.0‬‬
‫‪//returns 22.5‬‬
‫‪14‬‬
‫‪var‬‬ ‫‪fNum4‬‬ ‫=‬ ‫;)”‪parseFloat(“22.34.5‬‬ ‫‪//returns 22.34‬‬ ‫‪2‬‬
‫‪var‬‬ ‫‪fNum6‬‬ ‫=‬ ‫;)”‪parseFloat(“blue‬‬ ‫‪//returns NaN‬‬

‫اﺳﺘﻔﺎده از ‪ Type Casting‬ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع‬

‫در ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﻣﮑﺎن اﺳﺘﻔﺎده از روﺷﯽ ﻣﻮﺳﻮم ﺑﻪ ‪ 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‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﺳﺎده ﺗﺮﯾﻦ ﺗﺎﺑﻊ ﻫﻢ )(‪ String‬اﺳﺖ ﮐﻪ ﻫﻤﺎن ﭼﯿﺰي را ﮐﻪ ﻣﯽ ﮔﯿﺮد ﺑﻪ ﻋﻨﻮان رﺷﺘﻪ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪:‬‬
‫‪var s1 = String(null); //‬‬ ‫”‪”null‬‬

‫‪15‬‬
‫‪2‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
1stwebdesigner.ir
www.ParsBook.org
 ‫ﻓﺼﻞ ﺳﻪ‬

‫ﺟﺎوااﺳﮑﺮﯾﭙﺖدرﻣﺮورﮔﺮﻫﺎ‬

‫ﺣﺎل ﮐﻪ ﺗﺎ ﺣﺪودي ﺑﺎ ﺑﺴﯿﺎري از ﻣﻔﺎﻫﯿﻢ ﭘﺎﯾﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ آﺷﻨﺎ ﺷﺪﯾﻢ ﻣﯽ ﺧﻮاﻫﯿﻢ ﻃﺮﯾﻘﻪ اﺳﺘﻔﺎده و ﻗﺮار دادن آن ﻫﺎ در ﺻﻔﺤﻪ‬
‫را ﺑﺮرﺳﯽ ﮐﻨﯿﻢ‪ HTML .‬ﺑﺮاي اﺳﺘﻔﺎده از ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﺻﻔﺤﺎت ﺗﮕﯽ ﺑﻪ ﻧﺎم >‪ <script‬را ﻓﺮاﻫﻢ ﮐﺮده ﮐﻪ در اداﻣﻪ ﺑﺎ آن‬
‫آﺷﻨﺎ ﺧﻮاﻫﯿﻢ ﺷﺪ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﻣﺮورﮔﺮﻫﺎ‬

‫ﻋﻤﻮﻣﺎ از اﯾﻦ ﺗﮓ در داﺧﻞ ﺗﮓ ‪ head‬ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد و ﻣﯽ ﺗﻮاﻧﺪ ﯾﮏ ‪ ،‬دو ﯾﺎ ﺳﻪ ﺻﻔﺖ را ﺑﮕﯿﺮد‪ .‬ﺻﻔﺖ ‪language‬‬
‫ﮐﻪ ﻧﻮع زﺑﺎن اﺳﺘﻔﺎده ﺷﺪه را ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ‪ ،‬ﺻﻔﺖ اﺧﺘﯿﺎري ‪ src‬ﮐﻪ ﻣﮑﺎن ﯾﮏ ﻓﺎﯾﻞ ﺧﺎرﺟﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ و‬
‫ﺻﻔﺖ ‪ type‬ﮐﻪ ﻧﻮع ‪ MIME TYPE‬ﯾﮏ ﻓﺎﯾﻞ ﺧﺎرﺟﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ و ﺑﺎﯾﺪ ﺑﺮاﺑﺮ ﻋﺒﺎرت‬ ‫‪18‬‬
‫‪ text/javascript‬ﻗﺮار داده ﺷﻮد‪ .‬ﻣﻘﺪار ﺻﻔﺖ ‪ language‬ﻣﻌﻤﻮﻻ ﺑﺮاﺑﺮ ‪ javascript‬ﯾﺎ ﯾﮑﯽ از ﻧﺴﺨﻪ ﻫﺎي آن ﻣﺜﻼ ‪javascript‬‬
‫‪3‬‬
‫‪ 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‬‬

‫در اﯾﻦ ﻣﺜﺎل ﻫﺮ دو ﻧﻮع ﺗﻌﺮﯾﻒ ﮐﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﺻﻔﺤﻪ ﻧﺸﺎن داده ﺷﺪه اﺳﺖ‪ .‬ﺗﮓ اﺳﮑﺮﯾﭙﺖ اول ﺑﻪ ﺻﻮرت درون‬
‫‪2‬‬ ‫‪1‬‬
‫ﺧﻄﯽ ﺑﻪ ﺗﻌﺮﯾﻒ ﮐﺪﻫﺎ ﭘﺮداﺧﺘﻪ اﺳﺖ و در ﺗﮓ >‪ <script‬دوم )ﺑﻪ روش ﮐﺪﻫﺎي ﺧﺎرﺟﯽ ( ﺑﻪ ﯾﮏ ﻓﺎﯾﻞ ﺧﺎرﺟﯽ ‪javascript‬‬
‫اﺷﺎره ﺷﺪه اﺳﺖ‪.‬‬

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

‫ﻓﺎﯾﻞ ﻫﺎي ﺧﺎرﺟﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻓﺮﻣﺖ ﺑﺴﯿﺎر ﺳﺎده اي دارﻧﺪ‪ .‬آن ﻫﺎ درواﻗﻊ ﻓﺎﯾﻞ ﻫﺎي ﻣﺘﻨﯽ ﺳﺎده ﺣﺎوي ﮐﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﻫﺴﺘﻨﺪ‪ .‬دﻗﺖ ﮐﻨﯿﺪ ﮐﻪ در ﻓﺎﯾﻞ ﻫﺎي ﺧﺎرﺟﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﻫﯿﭻ ﺗﮓ ‪ script‬ي ﻧﺒﺎﯾﺪ اﺳﺘﻔﺎده ﺷﻮد‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﻪ ﺗﮑﻪ ﮐﺪ‬
‫زﯾﺮ دﻓﺖ ﮐﻨﯿﺪ‪:‬‬

‫‪1‬‬
‫‪inline‬‬
‫‪2‬‬
‫‪external‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>”‪<script language=”JavaScript‬‬

‫‪19‬‬
‫{ )(‪function sayHi‬‬
‫;)”‪alert(“Hi‬‬
‫}‬
‫‪3‬‬ ‫>‪</script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<!-- body goes here --‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﻣﯽ ﺗﻮاﻧﯿﻢ ﺧﻮد ﺗﺎﺑﻊ )(‪ sayhi‬را در ﻓﺎﯾﻠﯽ ﺧﺎرﺟﯽ ﻣﺜﻼ ﺑﻪ ﻧﺎم ‪ external.js‬ذﺧﯿﺮه ﮐﺮده و آن را ﺑﻪ ﺻﻮرت زﯾﺮ در ﺻﻔﺤﻪ ﻣﻮرد‬
‫ﻧﻈﺮ اﻟﺤﺎق ﮐﻨﯿﻢ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>‪<script language=”JavaScript” src=”external.js”></script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<!-- body goes here --‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﺗﻔﺎوت ﻫﺎي ﺑﻪ ﮐﺎرﮔﯿﺮي ﮐﺪﻫﺎ ﺑﻪ ﺻﻮرت درون ﺧﻄﯽ و ﺧﺎرﺟﯽ‬

‫ﭼﻪ ﻣﻮﻗﻊ ﻣﺎ ﺑﺎﯾﺪ از روش درون ﺧﻄﯽ و ﭼﻪ ﻣﻮﻗﻊ ﺑﺎﯾﺪ از روش ﺧﺎرﺟﯽ ﺑﺮاي ﺑﻪ ﮐﺎرﮔﯿﺮي ﮐﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺘﻔﺎده ﮐﻨﯿﻢ؟ ﻫﺮ‬
‫ﭼﻨﺪ ﮐﻪ ﻗﺎﻧﻮن ﺳﻔﺖ و ﺳﺨﺘﯽ ﺑﺮاي اﺳﺘﻔﺎده از ﻫﺮ ﯾﮏ از روش ﻫﺎي ﻓﻮق وﺟﻮد ﻧﺪارد اﻣﺎ ﺑﻪ دﻻﯾﻞ زﯾﺮ اﺳﺘﻔﺎده از روش درون‬
‫ﺧﻄﯽ ﻣﻨﺎﺳﺐ ﺑﻪ ﻧﻈﺮ ﻧﻤﯽ رﺳﺪ‪:‬‬
‫اﻣﻨﯿﺖ‪ :‬ﻫﺮ ﮐﺴﯽ ﻣﯽ ﺗﻮاﻧﺪ ﺑﺎ ﺑﺎز ﮐﺮدن ‪ source‬ﺻﻔﺤﻪ ﺷﻤﺎ‪ ،‬ﮐﺪﻫﺎ را ﺑﺒﯿﻨﺪ و ﭼﻪ ﺑﺴﺎ ﺑﻪ ﺣﻔﺮه ﻫﺎي اﻣﻨﯿﺘﯽ آن ﭘﯽ ﺑﺮده‬ ‫‪‬‬
‫و از آن ﻫﺎ ﺳﻮءاﺳﺘﻔﺎده ﮐﻨﺪ‪.‬‬
‫ذﺧﯿﺮه ﺷﺪن در ﺣﺎﻓﻈﻪ ﻣﺮورﮔﺮﻫﺎ‪ :‬ﯾﮑﯽ از ﻣﺰﯾﺖ ﻫﺎي اﺳﺘﻔﺎده از روش ﺧﺎرﺟﯽ اﯾﻦ اﺳﺖ ﮐﻪ ﻓﺎﯾﻞ ﻫﺎي ﺧﺎرﺟﯽ‬ ‫‪‬‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﭘﺲ از اوﻟﯿﻦ ﺑﺎرﮔﺬاري در ﺣﺎﻓﻈﻪ ﻧﻬﺎن ﻣﺮورﮔﺮ‪ 1‬ذﺧﯿﺮه ﺷﺪه و در دﻓﻌﺎت ﺑﻌﺪ‪ ،‬از ﺣﺎﻓﻈﻪ ﻓﺮاﺧﻮاﻧﯽ و‬
‫اﺳﺘﻔﺎده ﺧﻮاﻫﻨﺪ ﺷﺪ‪.‬‬
‫ﻧﮕﻪ داري ﮐﺪﻫﺎ‪ :2‬ﭼﻨﺎﻧﭽﻪ ﺷﻤﺎ ﺑﺨﻮاﻫﯿﺪ از ﯾﮏ ﮐﺪ در ﭼﻨﺪﯾﻦ ﺻﻔﺤﻪ وب اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﻣﻄﻤﺌﻨﺎ اﺳﺘﻔﺎده از روش اول‬ ‫‪‬‬
‫ﻣﻮﺟﺐ اﻓﺰاﯾﺶ ﮐﺪ ﻧﻮﯾﺴﯽ و در ﻧﺘﯿﺠﻪ ﺣﺠﻢ ﺻﻔﺤﻪ ﺧﻮاﻫﺪ ﺷﺪ اﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ از روش دوم ﺑﺮاي ﭼﻨﺪﯾﻦ ﻓﺎﯾﻞ اﺳﺘﻔﺎده‬
‫ﮐﻨﯿﻢ‪.‬‬

‫‪1‬‬
‫‪cache‬‬
‫‪2‬‬
‫‪Code Maintenance‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﻣﺮورﮔﺮﻫﺎ‬

‫ﻣﮑﺎن ﻗﺮار دادن ﺗﮓ >‪ <script‬در ﺻﻔﺤﻪ‬

‫ﻣﻌﻤﻮﻻ ﮐﺪﻫﺎ و ﺗﻮاﺑﻊ ﺗﻌﺮﯾﻔﯽ ﺑﻮﺳﯿﻠﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺎﯾﺪ در ﻗﺴﻤﺖ ‪ head‬ﺻﻔﺤﻪ ﻗﺮار ﮔﯿﺮد ﺗﺎ ﺑﻪ ﻣﻮﻗﻊ ﺑﺎرﮔﺬاري ﺷﺪه و ﺑﺮاي‬
‫اﺳﺘﻔﺎده در ﻗﺴﻤﺖ ‪ body‬ﺻﻔﺤﻪ آﻣﺎده اﺳﺘﻔﺎده و ﻓﺮاﺧﻮاﻧﯽ ﺑﺎﺷﻨﺪ‪ .‬ﻣﻌﻤﻮﻻ ﮐﺪﻫﺎﯾﯽ ﮐﻪ در آن ﻫﺎ‪ ،‬ﺗﻮاﺑﻊ از ﻗﺒﻞ ﺗﻌﺮﯾﻒ ﺷﺪه ﺻﺪا‬ ‫‪20‬‬
‫زده ﻣﯽ ﺷﻮﻧﺪ در ﻗﺴﻤﺖ ‪ body‬ﻗﺮار ﻣﯽ ﮔﯿﺮﻧﺪ‪.‬‬
‫‪3‬‬
‫ﻗﺮاردادن ﺗﮓ >‪ <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‬اﺟﺮا ﺧﻮاﻫﺪ ﺷﺪ‪ .‬اﯾﻦ روش ﺑﺮاي ﻓﺮاﺧﻮاﻧﯽ ﻣﺘﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺻﻼ‬
‫ﭘﯿﺸﻨﻬﺎد ﻧﻤﯽ ﺷﻮد و ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﻪ ﺟﺎي آن از ﮐﻨﺘﺮﻟﮕﺮ ﻫﺎي روﯾﺪاد‪ 1‬اﺳﺘﻔﺎده ﮐﺮد‪ .‬ﻣﺜﻼ‪:‬‬
‫>‪<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‬‬

‫‪1‬‬
‫‪Event Handler‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫در اﯾﻨﺠﺎ دﮐﻤﻪ اي ﺑﺎ اﺳﺘﻔﺎده از ﺗﮓ ‪ input‬اﯾﺠﺎد ﺷﺪه اﺳﺖ ﮐﻪ در ﺻﻮرت ﮐﻠﯿﮏ ﺑﺮ روي آن ﺗﺎﺑﻊ )(‪ sayHi‬ﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﺷﻮد‪.‬‬
‫ﺻﻔﺖ ‪ onclick‬در اﯾﻨﺠﺎ ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪادي را ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ روﯾﺪاد رخ داده ﭘﺎﺳﺦ دﻫﺪ‪ ،‬ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫ﻧﮑﺘﻪ اﯾﻨﮑﻪ ازآﻧﺠﺎﯾﯽ ﮐﻪ ﮐﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻣﺤﺾ ﺑﺎرﮔﺬاري اﺟﺮا ﻫﻢ ﻣﯽ ﺷﻮﻧﺪ ﻣﻤﮑﻦ اﺳﺖ در اﯾﻦ ﺻﻮرت ﺗﻮاﺑﻌﯽ ﮐﻪ از‬
‫‪21‬‬ ‫ﻗﺒﻞ وﺟﻮد ﻧﺪارﻧﺪ ﻓﺮاﺧﻮاﻧﯽ ﺷﻮﻧﺪ ﮐﻪ در اﯾﻦ ﺻﻮرت ﯾﮏ ﺧﻄﺎ رخ ﺧﻮاﻫﺪ داد‪ .‬در ﻣﺜﺎل ﻗﺒﻞ ﺑﺎ ﻋﻮض ﮐﺮدن ﺟﺎي ﺗﮓ ﻫﺎي‬
‫‪3‬‬ ‫>‪ <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‬ﮐﺎﻓﯽ اﺳﺖ ﻋﻼﻣﺖ ‪ <!--‬را در اﺑﺘﺪا و ﻋﻼﻣﺖ >‪ --‬را در‬
‫اﻧﺘﻬﺎي آن ﻗﺮار دﻫﯿﺪ‪ .‬ﺑﻪ ﻣﺜﺎل زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﻣﺮورﮔﺮﻫﺎ‬

‫‪<script language=”JavaScript”><!-- hide from older browsers‬‬

‫{ )(‪function sayHi‬‬

‫‪22‬‬
‫;)”‪alert(“Hi‬‬
‫}‬
‫>‪//--‬‬
‫>‪</script‬‬ ‫‪3‬‬
‫‪ ‬ﺑﻪ دو ﮐﺎراﮐﺘﺮ ‪ /‬ﮐﻪ در اﻧﺘﻬﺎي دﺳﺘﻮر ﻓﻮق آﻣﺪه دﻗﺖ ﮐﻨﯿﺪ‪ .‬اﯾﻦ دو ‪ /‬ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از اﯾﻦ ﮐﻪ ﻣﻔﺴﺮ ﻣﺮورﮔﺮﻫﺎي ﺳﺎزﮔﺎز‬
‫ﺑﺎ ﺟﺎوااﺳﮑﺮﯾﭙﺖ‪ ،‬ﻋﺒﺎرت >‪ --‬را ﺑﻪ ﻋﻨﻮان ﯾﮏ دﺳﺘﻮر ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻔﺴﯿﺮ ﻧﮑﻨﺪ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‪ .‬ﻋﺪم اﺳﺘﻔﺎده از اﯾﻦ‬
‫دو ‪ /‬ﻣﻮﺟﺐ اﯾﺠﺎد ﯾﮏ ﺧﻄﺎ ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
‫روش ﻣﺨﻔﯽ ﮐﺮدن اﺳﮑﺮﯾﭙﺖ ﻫﺎ از ﻣﺮورﮔﺮﻫﺎي ﻧﺎﺳﺎزﮔﺎر ﺑﺎ ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﻓﺮا ﮔﺮﻓﺘﯿﻢ‪ .‬اﻣﺎ ﭼﮕﻮﻧﻪ ﻣﯽ ﺗﻮان ﺑﺮاي ﮐﺎرﺑﺮاﻧﯽ ﮐﻪ از‬
‫اﯾﻦ ﻣﺮورﮔﺮﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﻨﺪ ﻧﯿﺰ ﻣﻄﻠﺐ ﺟﺎﯾﮕﺰﯾﻨﯽ ﻧﻤﺎﯾﺶ داد؟ ﺑﺮاي اﯾﻦ ﮐﺎر ﺑﺎﯾﺪ از ﺗﮕﯽ ﺑﻪ ﻧﺎم >‪ <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‬‬

‫ﺧﻄﺎﯾﺎﺑﯽ‬
‫زﻣﺎﻧﯽ ﮐﻪ ﻣﺮورﮔﺮﻫﺎ ﻗﺎدر ﺑﻪ اﺟﺮاي دﺳﺘﻮر ﺧﺎﺻﯽ از ﮐﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻧﺒﺎﺷﻨﺪ‪ ،‬ﭘﯿﻐﺎﻣﯽ ﻣﺒﻨﯽ ﺑﺮ رﺧﺪاد ﯾﮏ ﺧﻄﺎ را ﻧﻤﺎﯾﺶ ﻣﯽ‬
‫دﻫﻨﺪ‪ .‬ﻣﺎ ﺑﺮاي رﻓﻊ ﺧﻄﺎﻫﺎ ﺑﻪ اﯾﻦ ﭘﯿﻐﺎم ﻫﺎ ﻧﯿﺎز دارﯾﻢ اﻣﺎ ﻣﺘﺎﺳﻔﺎﻧﻪ درك ﺑﺴﯿﺎري از اﯾﻦ ﭘﯿﻐﺎم ﻫﺎ در ﻣﺮورﮔﺮﻫﺎي ﻣﺨﺘﻠﻒ دﺷﻮار‬
‫اﺳﺖ‪ .‬اﻏﻠﺐ ﺑﺮاي ﻣﺸﺎﻫﺪه ﭘﯿﻐﺎم ﻫﺎ ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﻪ ‪ console‬ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﻣﺮورﮔﺮﻫﺎ ﻣﺮاﺟﻌﻪ ﮐﻨﯿﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫در ﻣﺮورﮔﺮ ‪ FireFox‬ﻣﯽ ﺗﻮان از ﻣﺴﯿﺮ زﯾﺮ ﺑﻪ ﮐﻨﺴﻮل ﺟﺎوااﺳﮑﺮﯾﭙﺖ دﺳﺘﺮﺳﯽ داﺷﺖ‬ ‫‪‬‬
‫‪FireFox Menu > Web Developer > Error Console‬‬
‫اﯾﻦ ﮐﺎر ﺑﺎ اﺳﺘﻔﺎده از ﻣﯿﺎﻧﺒﺮ ‪ ctrl+shift+j‬ﻧﯿﺰ اﻣﮑﺎن ﭘﺬﯾﺮ اﺳﺖ‪.‬‬

‫‪23‬‬ ‫‪Tools > Advanced > Error Console‬‬

‫در ﻣﺮورﮔﺮ ‪ opera‬اﯾﻦ ﮐﺎر از ﻣﺴﯿﺮ زﯾﺮ‬ ‫‪‬‬

‫‪3‬‬ ‫ﯾﺎ اﺳﺘﻔﺎده از ﻣﯿﺎﻧﺒﺮ ‪ ctrl+shift+o‬اﻧﺠﺎم ﻣﯽ ﺷﻮد‪.‬‬

‫در ﻣﺮورﮔﺮ ‪ Google Chrome‬ﻧﯿﺰ ﻣﯽ ﺗﻮان از ﻣﺴﯿﺮ‬ ‫‪‬‬
‫‪ > Tools > Javascript Console‬ﺗﺼﻮﯾﺮ آﭼﺎر‬
‫ﯾﺎ ﻣﯿﺎﻧﺒﺮ ‪ ctrl+shift+j‬ﺑﻪ اﯾﻦ ﺑﺨﺶ دﺳﺘﺮﺳﯽ داﺷﺖ‪.‬‬
‫در ﻣﺮورﮔﺮ ‪ Internet Explorer‬ﺑﺮاي ﻣﺸﺎﻫﺪه ﭘﯿﻐﺎم ﻣﺮﺑﻮط ﺑﻪ ﺧﻄﺎﻫﺎي رخ داده در ﺻﻔﺤﻪ ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﺮ روي آﯾﮑﻦ‬ ‫‪‬‬
‫زردرﻧﮓ ﻣﻮﺟﻮد در ﮔﻮﺷﻪ ﭘﺎﯾﯿﻦ ﺳﻤﺖ ﭼﭗ ﻣﺮورﮔﺮ ﮐﻠﯿﮏ ﮐﺮد ﺗﺎ ﭘﻨﺠﺮه اي ﺣﺎوي ﻣﺘﻦ و ﺷﻤﺎره ﺧﻄﯽ از ﺑﺮﻧﺎﻣﻪ ﮐﻪ ﺧﻄﺎ‬
‫در آن رخ داده اﺳﺖ ﺑﺎز ﺷﻮد‪.‬‬

‫اﻟﺒﺘﻪ ﻗﺒﻞ از ﻫﺮ ﭼﯿﺰ ﻣﯽ ﺑﺎﯾﺴﺖ از ﻓﻌﺎل ﺑﻮدن ﺧﻄﺎﯾﺎﺑﯽ و ﻧﻤﺎﯾﺶ ﭘﯿﻐﺎم ﻫﺎ در اﯾﻦ ﻣﺮورﮔﺮ اﻃﻤﯿﻨﺎن ﺣﺎﺻﻞ ﮐﻨﯿﺪ‪ .‬ﺑﺮاي ﻓﻌﺎل ﺳﺎزي‬
‫اﯾﻦ اﻣﮑﺎن در ﻣﺴﯿﺮ ‪ Tools > Internet Options > Advanced‬اﺑﺘﺪا ﮔﺰﯾﻨﻪ ‪Disable Script Debugging (Internet‬‬
‫)‪ Explorer‬را از ﺣﺎﻟﺖ اﻧﺘﺨﺎب ﺷﺪه ﺧﺎرج ﮐﺮده و ﮔﺰﯾﻨﻪ ‪ Display a notification about every script error‬را ﺗﯿﮏ‬
‫ﺑﺰﻧﯿﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﻣﺮورﮔﺮﻫﺎ‬

‫‪24‬‬
‫‪3‬‬

‫ﭘﺲ از اﻧﺠﺎم ﻣﻮارد ﻓﻮق‪ ،‬ﺑﺎ ﻫﺮ ﺑﺎر رﺧﺪاد ﯾﮏ ﺧﻄﺎ‪ ،‬ﭘﻨﺠﺮه اي ﺑﻪ ﺻﻮرت زﯾﺮ ﻧﻤﺎﯾﺶ داده ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﻓﺼﻞ ﭼﻬﺎر‬

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

‫آراﯾﻪ ﻫﺎ در ﻫﻤﻪ زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺟﺰ ﻣﻬﻤﺘﺮﯾﻦ ﺳﺎﺧﺘﻤﺎن داده ﻫﺎ ﺑﻪ ﺷﻤﺎر ﻣﯽ روﻧﺪ‪ .‬ﻧﻘﺶ آراﯾﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻧﯿﺰ‬
‫ﺑﺮاي اﯾﺠﺎد ﺑﺮﻧﺎﻣﻪ ﻫﺎي اﻧﻌﻄﺎف ﭘﺬﯾﺮ ﻧﯿﺰ اﻧﮑﺎرﻧﺎﭘﺬﯾﺮ اﺳﺖ‪ .‬در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﻪ ﺑﺮرﺳﯽ روش ﻫﺎي ﺳﺎﺧﺖ آراﯾﻪ ﻫﺎ و وﯾﮋﮔﯽ ﻫﺎي‬
‫اﺻﻠﯽ آن ﭘﺮداﺧﺘﻪ و در اداﻣﻪ در ﻣﻮرد ﻧﺤﻮه دﺳﺘﮑﺎري آن ﻫﺎ ﻫﻤﭽﻮن اﺿﺎﻓﻪ‪ ،‬ﺣﺬف‪ ،‬اﻧﺘﺨﺎب و ﻣﺘﺮب ﺳﺎزي ﻋﻨﺎﺻﺮ آراﯾﻪ ﭘﺮداﺧﺘﻪ‬
‫و ﺑﻪ روش ﻫﺎي ﺗﺒﺪﯾﻞ آراﯾﻪ ﺑﻪ رﺷﺘﻪ و ﺑﺎﻟﻌﮑﺲ ﺧﻮاﻫﯿﻢ ﭘﺮداﺧﺖ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ آراﯾﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫اﯾﺠﺎد آراﯾﻪ ﻫﺎ ﺑﺎ اﺳﺘﻔﺎده از ﮐﻼس ‪Array‬‬

‫در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺮ ﺧﻼف ﺟﺎوا‪ ،‬ﮐﻼس درون ﺳﺎﺧﺘﯽ ﺑﻪ ﻧﺎم ‪ Array‬وﺟﻮد دارد ﮐﻪ از آن ﺑﺮاي اﯾﺠﺎد آراﯾﻪ ﻫﺎ )ﮐﻪ اﻟﺒﺘﻪ ﺑﻪ ﻋﻨﻮان‬
‫ﯾﮏ ﺷﯽ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮﻧﺪ( اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬ﺑﺮاي اﯾﺠﺎد ﯾﮏ ﺷﯽ از ﻧﻮع آراﯾﻪ از دﺳﺘﻮرات زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪:‬‬ ‫‪26‬‬
‫;)(‪var aValues = new Array‬‬ ‫‪4‬‬

‫اﮔﺮ از ﻗﺒﻞ ﺗﻌﺪاد ﻋﻨﺎﺻﺮ آراﯾﻪ ﻣﻮرد ﻧﻈﺮﺗﺎن را ﺑﺪاﻧﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﺪ‪:‬‬
‫;)‪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‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬

‫ﻧﮑﺘﻪ‪ :‬آراﯾﻪﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻣﯽ ﺗﻮاﻧﻨﺪ ﺣﺪاﮐﺜﺮ ‪ 4294967295‬ﺧﺎﻧﻪ داﺷﺘﻪ ﺑﺎﺷﻨﺪ!‬ ‫‪‬‬

‫ﺗﺒﺪﯾﻞ آراﯾﻪ ﺑﻪ رﺷﺘﻪ‬
‫‪27‬‬ ‫آراﯾﻪ ﻫﺎ از ﺳﻪ ﻣﺘﺪ ﺧﺎص ﺑﺮاي ﺧﺮوﺟﯽ ﻋﻨﺎﺻﺮ ﺧﻮد ﺑﻪ ﺻﻮرت رﺷﺘﻪ اي ﮐﻪ ﺑﺎ ﮐﺎﻣﺎ از ﻫﻢ ﺟﺪاﺷﺪه اﻧﺪ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﺪ‪:‬‬
‫‪4‬‬
‫;]”‪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‬ﺑﺮاي اﻟﺤﺎق ﻋﻨﺎﺻﺮ ﯾﮏ آراﯾﻪ ﮐﻪ اﻟﺒﺘﻪ ﺑﻪ وﺳﯿﻠﻪ ﯾﮏ ﺟﺪاﮐﻨﻨﺪه‪ 1‬از ﻫﻢ ﺟﺪا ﺷﺪه اﻧﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬اﯾﻦ‬
‫ﺗﺎﺑﻊ ﯾﮏ آرﮔﻮﻣﺎن دارد ﮐﻪ در واﻗﻊ رﺷﺘﻪ اي اﺳﺖ ﮐﻪ ﺑﯿﻦ ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ وﺟﻮد دارد‪ .‬ﺑﻪ ﻣﺜﺎل ﻫﺎي زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬
‫;]”‪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‬‬

‫‪1‬‬
‫‪separator‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ آراﯾﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

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

‫آراﯾﻪ ﻫﺎ از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ .concat‬ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪ .‬اﯾﻦ ﺗﺎﺑﻊ ﭼﻨﺪﯾﻦ آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد و ﺑﻪ آراﯾﻪ ﺟﺎري اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﺪ و‬
‫ﺣﺎﺻﻞ آن ﯾﮏ آراﯾﻪ ي ﺟﺪﯾﺪ ﺧﻮاﻫﺪ ﺑﻮد‪ .‬ﺑﻪ ﻣﺜﺎﻟﻬﺎي زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬ ‫‪28‬‬
‫;]”‪var aColors = [“red”, “green”, “blue‬‬ ‫‪4‬‬
‫;)”‪var aColors2 = aColors.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‬ﻋﻨﺼﺮي را ﮐﻪ ﺑﺮﻣﯽ ﮔﺮداﻧﺪ از آراﯾﻪ ﺣﺬف ﻣﯽ ﮐﻨﺪ‪ .‬ﺑﻪ ﻣﺜﺎل ﻫﺎي‬
‫زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
var stack = new Array;
stack.push(“red”);
stack.push(“green”);
stack.push(“yellow”);

29
alert(stack.toString()); //outputs “red,green,yellow”
var vItem = stack.pop();
alert(vItem); //outputs “yellow”
4 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”

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

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

‫ ﺑﺮاي ﻣﺮﺗﺐ ﺳﺎزي ﻋﮑﺲ آراﯾﻪ اﺳﺘﻔﺎده ﻣﯽ‬reverse() ‫ ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم‬.‫ ﻋﻨﺎﺻﺮ آراﯾﻪ اﺳﺘﻔﺎده ﻣﯿﺸﻮد‬1‫از دو ﺗﺎﺑﻊ ﺑﺮاي ﻣﺮﺗﺐ ﺳﺎزي‬
:‫ ﻣﺜﺎل‬.‫ﺷﻮد‬
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”

1
ordering

1stwebdesigner.ir
www.ParsBook.org
 ‫ﮐﺎر ﺑﺎ آراﯾﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫در ﺻﻮرﺗﯽ ﮐﻪ ﻋﻨﺎﺻﺮ آراﯾﻪ اﻋﺪاد ﺑﺎﺷﻨﺪ ﻧﺘﯿﺠﻪ ﮐﻤﯽ ﻋﺠﯿﺐ و ﻏﺮﯾﺐ اﺳﺖ‪:‬‬
‫]‪var aColors = [3, 32, 2, 5‬‬
‫;)(‪aColors.sort‬‬
‫”‪alert(aColors.toString()); //outputs “2,3,32,5‬‬ ‫‪30‬‬
‫‪4‬‬
‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ اﺷﺎره ﺷﺪ ﻣﺘﺪ )(‪ .sort‬ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض ﻋﻨﺎﺻﺮ آراﯾﻪ را ﺑﻪ ﺻﻮرت اﻟﻔﺒﺎﯾﯽ )ﺑﺮ ﺣﺴﺐ ﮐﺪﻫﺎي ﮐﺎراﮐﺘﺮي آن ﻫﺎ(‬
‫و ﺑﻪ ﺻﻮرت ﺻﻌﻮدي ﻣﺮﺗﺐ ﻣﯽ ﮐﻨﺪ‪ .‬ﭼﻨﺎﻧﭽﻪ ﺑﺨﻮاﻫﯿﻢ آراﯾﻪ اي از اﻋﺪاد را ﺑﻪ ﺻﻮرت ﺻﻌﻮدي ﻣﺮﺗﺐ ﮐﻨﯿﻢ ﻣﯽ ﺑﺎﯾﺴﺖ ﻣﯽ ﺑﺎﯾﺴﺖ‬
‫از ﯾﮏ ﺗﺎﺑﻊ ﻣﻘﺎﯾﺴﻪاي ﮐﻪ در ﻗﺎﻟﺐ ﯾﮏ آرﮔﻮﻣﺎن ﺑﺮاي اﯾﻦ ﻣﺘﺪ ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ .‬ﺧﻮد اﯾﻦ ﺗﺎﺑﻊ ﻣﻘﺎﯾﺴﻪ اي ﻫﻤﯿﺸﻪ‬
‫دو آرﮔﻮﻣﺎن)ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ‪ (a,b‬ﮔﺮﻓﺘﻪ‪ ،‬آن ﻫﺎ را ﺑﺎ ﻫﻢ ﻣﻘﺎﯾﺴﻪ ﮐﺮده و آراﯾﻪي اﺻﻠﯽ ﺑﺮاﺳﺎس ﻣﻘﺎدﯾﺮ ﺑﺎزﮔﺸﺘﯽ اﯾﻦ ﺗﺎﺑﻊ اﻧﺠﺎم ﻣﯽ‬
‫ﺷﻮد‪.‬‬
‫ﻣﻘﺪار ﺑﺎزﮔﺸﺘﯽ ﺗﺎﺑﻊ ﻣﻘﺎﯾﺴﻪ اي ﺑﻪ ﯾﮑﯽ از ﺳﻪ ﺻﻮرت زﯾﺮ اﺳﺖ‪:‬‬
‫ﭼﻨﺎﻧﭽﻪ ﻣﯽ ﺑﺎﯾﺴﺖ ‪)b‬آرﮔﻮﻣﺎن دوم( ﻗﺒﻞ از ‪)a‬آرﮔﻮﻣﺎن اول( ﻗﺮار ﺑﮕﯿﺮد ﻣﻘﺪاري ﻣﺜﺒﺖ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫ﭼﻨﺎﻧﭽﻪ ﻣﯽ ﺑﺎﯾﺴﺖ ﻣﮑﺎن ‪ a‬و ‪ b‬ﺗﻐﯿﯿﺮي ﻧﮑﻨﺪ ﻣﻘﺪار ﺻﻔﺮ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫ﭼﻨﺎﻧﭽﻪ ﻣﯽ ﺑﺎﯾﺴﺖ ‪ a‬ﻗﺒﻞ از ‪ b‬ﻗﺮار ﺑﮕﯿﺮد ﻣﻘﺪاري ﻣﻨﻔﯽ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل در ﺻﻮرﺗﯽ ﮐﻪ ﺗﺎﺑﻊ زﯾﺮ را ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎن ﺑﺮاي ﻣﺘﺪ‪ sort().‬ﺑﻔﺮﺳﺘﯿﻢ آراﯾﻪ ﺑﻪ ﺻﻮرت ﺻﻌﻮدي ﻣﺮﺗﺐ ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬
‫{)‪function Compare(a,b‬‬
‫{)‪If(a>b‬‬
‫;‪Return 1‬‬
‫{)‪}else if (a<b‬‬
‫;‪Return -1‬‬
‫{‪}else‬‬
‫;‪Return 0‬‬
‫}‬
‫}‬

‫دﻗﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ ﺑﺪﻧﻪ ﺗﺎﺑﻊ ﻓﻮق را ﻣﯽ ﺗﻮان ﺑﻪ ﺷﮑﻞ زﯾﺮ ﮐﻮﺗﺎﻫﺘﺮ و ﺳﺎده ﺗﺮ ﮐﺮد ﺿﻤﻦ اﯾﻨﮑﻪ ﻫﻤﺎن ﻋﻤﻠﮑﺮد را ﺧﻮاﻫﺪ داﺷﺖ‪:‬‬
‫{)‪function Compare(a,b‬‬
‫;‪Return a-b‬‬
‫}‬

‫ﺑﺮاي ﻣﺮﺗﺐ ﺳﺎزي آراﯾﻪ ﺑﻪ ﺻﻮرت ﻋﺪدي ﻧﺰوﻟﯽ ﮐﺎﻓﯽ اﺳﺖ ﺟﺎي ‪ 1‬و ‪ -1‬در ﺗﺎﺑﻊ ﻣﻘﺎﯾﺴﻪ اي را ﻋﻮض ﮐﻨﯿﺪ‪.‬‬

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

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
1stwebdesigner.ir
www.ParsBook.org
 ‫ﻓﺼﻞ ﭘﻨﺞ‬

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

‫اﯾﻦ ﻓﺼﻞ ﺑﻪ ﺑﺮرﺳﯽ رﺷﺘﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻣﯽ ﭘﺮدازد‪ .‬در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﻪ روش ﻫﺎي اﯾﺠﺎد رﺷﺘﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﭘﺮداﺧﺘﻪ و ﺳﭙﺲ ﺑﻪ ﺗﻮﺿﯿﺢ روش ﻫﺎي دﺳﺘﮑﺎري آن ﻫﺎ ﻫﻤﭽﻮن ﺟﺪاﮐﺮدن زﯾﺮ رﺷﺘﻪ ﻫﺎ‪ ،‬اﻟﺤﺎق و ﻣﻘﺎﯾﺴﻪ رﺷﺘﻪ ﻫﺎ و‪ ...‬ﺧﻮاﻫﯿﻢ‬
‫ﭘﺮداﺧﺖ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ رﺷﺘﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫اﯾﺠﺎد اﺷﯿﺎ رﺷﺘﻪ اي )رﺷﺘﻪ( ﺑﺎ اﺳﺘﻔﺎده از ﮐﻼس ‪String‬‬

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

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

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

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

‫ﮔﺮ ﭼﻨﺎﻧﭽﻪ ﻣﯽ ﺧﻮاﻫﯿﺪ ﺑﻪ ﺟﺎي ﺧﻮد ﮐﺎراﮐﺘﺮ ﮐﺪ ﮐﺎراﮐﺘﺮي آن را ﺑﺪﺳﺖ آورﯾﺪ از ﻣﺘﺪ )(‪ .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‬ﻣﯽ ﺗﻮان از ﻋﻤﻠﮕﺮ ‪ +‬ﻧﯿﺰ ﺑﺮاي اﻟﺤﺎق دو رﺷﺘﻪ اﺳﺘﻔﺎده ﮐﺮد‪.‬‬

‫ﻋﻤﻠﮕﺮ ‪ +‬ﺑﺮاي اﻟﺤﺎق رﺷﺘﻪ ﻫﺎ‬

‫از ﻋﻤﻠﮕﺮ ‪ +‬در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻫﻢ ﺑﺮاي ﺟﻤﻊ اﻋﺪاد و ﻫﺮ ﺑﺮاي اﻟﺤﺎق رﺷﺘﻪ ﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬رﻓﺘﺎر اﯾﻦ ﻋﻤﻠﮕﺮ ﺑﺮاﺳﺎس ﻧﻮع‬
‫ﻋﻤﻠﻮﻧﺪﻫﺎ ﺑﻪ ﺻﻮرت زﯾﺮ ﺗﻌﯿﯿﻦ ﻣﯽ ﺷﻮد‪.‬‬
‫اﮔﺮ ﻫﺮ دو ﻋﻤﻠﻮﻧﺪ ﻋﺪدي ﺑﺎﺷﻨﺪ ﺣﺎﺻﻞ ﺟﻤﻊ آن ﻫﺎ ﻣﺤﺎﺳﺒﻪ ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫‪‬‬
‫اﮔﺮ ﻫﺮ دو ﻋﻤﻠﻮﻧﺪ رﺷﺘﻪ اي ﺑﺎﺷﻨﺪ ﺣﺎﺻﻞ‪ ،‬اﻟﺤﺎق رﺷﺘﻪ دوم ﺑﻪ رﺷﺘﻪ اول ﺧﻮاﻫﺪ ﺑﻮد‪.‬‬ ‫‪‬‬
‫اﮔﺮ ﯾﮑﯽ از ﻋﻤﻠﻮﻧﺪﻫﺎ ﻋﺪدي و دﯾﮕﺮي رﺷﺘﻪ اي ﺑﺎﺷﺪ‪ ،‬ﻋﻤﻠﻮﻧﺪ ﻋﺪدي ﺑﻪ رﺷﺘﻪ ﺗﺒﺪﯾﻞ ﺷﺪه و ﺣﺎﺻﻞ اﻟﺤﺎق آن دو ﺧﻮاﻫﺪ‬ ‫‪‬‬
‫ﺑﻮد‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﺑﻪ ﻣﺜﺎل زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬
‫‪var result1‬‬ ‫=‬ ‫;‪5+5‬‬
‫‪alert(result1); //‬‬ ‫‪output 10‬‬

‫‪35‬‬ ‫‪var result2‬‬ ‫=‬ ‫;”‪5+”5‬‬

‫‪5‬‬ ‫‪alert(result2); //‬‬ ‫”‪output “55‬‬

‫‪var result3‬‬ ‫=‬ ‫;”‪“5”+”5‬‬

‫‪alert(result3); //‬‬ ‫”‪output “55‬‬

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

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

‫در ﺻﻮرﺗﯽ ﮐﻪ ﺣﺮف ‪ O‬در ﻋﺒﺎرت ﺑﺎﻻ ﻓﻘﻂ ﯾﮑﺒﺎر ﺗﮑﺮار ﻣﯽ ﺷﺪ ﻫﺮ دو اﯾﻦ ﻣﺘﺪ ﻫﺎ ﻓﻘﻂ ﯾﮏ ﻣﻘﺪار راﺑﺮ ﻣﯽ ﮔﺮداﻧﻨﺪ‪.‬‬
‫در ﻣﺘﺪﻫﺎي)(‪ .indexOf‬و)(‪ .lastIndexOf‬ﻣﯽ ﺗﻮان از ﯾﮏ آرﮔﻮﻣﺎن اﺧﺘﯿﺎري دﯾﮕﺮ ﻧﯿﺰ ﺑﻪ ﻣﻨﻈﻮر ﺗﻌﯿﯿﻦ ﮐﺎراﮐﺘﺮي ﮐﻪ ﻋﻤﻞ‬
‫ﺟﺴﺘﺠﻮ ﺑﺎﯾﺪ از آن ﺷﺮوع ﺷﻮد‪ ،‬اﺳﺘﻔﺎده ﮐﺮد‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل درﮐﺪ زﯾﺮ ﻋﻤﻞ ﺟﺴﺘﺠﻮ از ﭼﻬﺎرﻣﯿﻦ ﮐﺎراﮐﺘﺮ ﺷﺮوع ﻣﯽ ﺷﻮد و در‬
‫ﻧﺘﯿﺠﻪ ﻣﻘﺪار ‪) 5‬ﯾﻌﻨﯽ ﻣﻮﻗﻌﯿﺖ دوﻣﯿﻦ ‪ (a‬ﺑﺮﮔﺮداﻧﺪه ﻣﯽ ﺷﻮد‪:‬‬
‫‪Var example‬‬ ‫=‬ ‫;”‪“I am a javascript hacker‬‬
‫‪Alert(example.indexOf(‘a’,3));// output 5‬‬

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

‫ﻣﺘﺪ دﯾﮕﺮي ﮐﻪ ﺑﺮاي رﺷﺘﻪ ﻫﺎ ﺗﻌﺮﯾﻒ ﺷﺪه )(‪ .localeCompare‬اﺳﺖ ﮐﻪ ﺑﺮاي ﻣﻘﺎﯾﺴﻪ رﺷﺘﻪ ﻫﺎ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد‪.‬‬
‫)اﯾﻦ ﻣﺘﺪ ﻣﻌﺎدل ﺗﺎﺑﻊ )(‪ strcmp‬در زﺑﺎن ‪ C++‬اﺳﺖ‪(.‬‬
‫اﯾﻦ ﺗﺎﺑﻊ ﯾﮏ آرﮔﻮﻣﺎن رﺷﺘﻪ اي ﻣﯽ ﭘﺬﯾﺮد و ﯾﮑﯽ از ﺳﻪ ﻣﻘﺪار زﯾﺮ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪:‬‬
‫‪ .1‬اﮔﺮ ﺷﯽ رﺷﺘﻪ اي ﮐﻮﭼﮑﺘﺮ از آرﮔﻮﻣﺎن ﺑﺎﺷﺪ ‪ -1‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫‪ .2‬اﮔﺮ ﺑﺮاﺑﺮ ﺑﺎﺷﻨﺪ ‪ 0‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫‪ .3‬اﮔﺮ ﺷﯽ رﺷﺘﻪ اي ﺑﺰرﮔﺘﺮ ﺑﺎﺷﺪ ﻣﻘﺪار ‪ 1‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ رﺷﺘﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫ﻣﺜﺎل ﻫﺎ‪:‬‬
‫;)”‪var oStringObject = new String(“yellow‬‬
‫”‪alert(oStringObject.localeCompare(“brick”)); //outputs “1‬‬
‫”‪alert(oStringObject.localeCompare(“yellow”)); //outputs “0‬‬ ‫‪36‬‬
‫”‪alert(oStringObject.localeCompare (“zoo”)); //outputs “-1‬‬
‫‪5‬‬

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

‫دو ﺗﺎﺑﻊ ﺑﺮاي ﺟﺪا ﮐﺮدن زﯾﺮ رﺷﺘﻪ ﻫﺎ از رﺷﺘﻪ اﺻﻠﯽ وﺟﻮد دارد‪ .slice() :‬و )(‪.substring‬‬

‫ﻫﺮ دو اﯾﻦ ﻣﺘﺪ ﻫﺎ ﯾﮏ ﯾﺎ دو آرﮔﻮﻣﺎن را ﻣﯽ ﭘﺬﯾﺮﻧﺪ ﮐﻪ آرﮔﻮﻣﺎن اول ﻣﺤﻞ ﺷﺮوع و آرﮔﻮﻣﺎن دوم ﻣﺤﻞ ﭘﺎﯾﺎن را ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫)اﻟﺒﺘﻪ ﺧﻮدآرﮔﻮﻣﺎن دوم ﺟﺰ زﯾﺮ رﺷﺘﻪ ﻧﺨﻮاﻫﺪ ﺑﻮد‪(.‬‬
‫اﮔﺮ آرﮔﻮﻣﺎن دوم ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ ﺷﻮد ﻃﻮل رﺷﺘﻪ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
‫ﭼﯿﺰي ﮐﻪ اﯾﻦ دو ﻣﺘﺪ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ زﯾﺮ رﺷﺘﻪ ﺣﺎﺻﻞ اﺳﺖ‪:‬‬
‫;)”‪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‬‬

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

‫ﮐﻪ از ﺧﺎﻧﻪ ﻫﺸﺘﻢ رﺷﺘﻪ ﺗﺎ اﻧﺘﻬﺎي آراﯾﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪ .‬اﻣﺎ در ﺧﻂ ﺳﻮم آرﮔﻮﻣﺎن ﻣﻨﻔﯽ ﺻﻔﺮ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‪ .‬ﯾﻌﻨﯽ‪:‬‬
‫;)‪oStringObject.substring(0‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫در ﺧﻂ ﭼﻬﺎرم آرﮔﻮﻣﺎن دوم ﺑﺎ ﻃﻮل رﺷﺘﻪ ﺟﻤﻊ ﺷﺪه و ﺣﺎﺻﻞ آن ﯾﻌﻨﯽ ‪ 8‬ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎن دوم در ﻧﻈﺮﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‪ .‬ﯾﻌﻨﯽ‪:‬‬
‫;)‪oStringObject.slice(3,8‬‬

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

‫ﻧﮑﺘﻪ‪ :‬ﺗﺮﺗﯿﺐ آرﮔﻮﻣﺎن ﻫﺎ در ﻣﺘﺪﻫﺎي)(‪ .slice‬و)(‪ .substring‬اﻫﻤﯿﺘﯽ ﻧﺪارد‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‬ ‫‪‬‬
‫ﺣﺎﺻﻞ)‪ .subString(3,6‬ﺑﺎ)‪ .subString(6,3‬ﺗﻔﺎوﺗﯽ ﻧﺨﻮاﻫﻨﺪ داﺷﺖ‪ .‬ﺑﻪ ﻫﺮ ﺣﺎل آرﮔﻮﻣﺎن ﮐﻮﭼﮑﺘﺮ ﺑﻪ‬
‫ﻋﻨﻮان ﺣﺪ اﺑﺘﺪاﯾﯽ و ﭘﺎراﻣﺘﺮ ﺑﺰرﮔﺘﺮ ﺑﻪ ﻋﻨﻮان ﺣﺪ اﻧﺘﻬﺎﯾﯽ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‪.‬‬

‫ﻧﮑﺘﻪ‪ :‬در ﺻﻮرﺗﯽ ﮐﻪ آرﮔﻮﻣﺎن ﻫﺎي ارﺳﺎﻟﯽ ﺑﻪ ﻣﺘﺪ ﻫﺎي)(‪ .slice‬و)(‪ .substring‬ﯾﮑﺴﺎن ﺑﺎﺷﻨﺪ‪،‬‬ ‫‪‬‬
‫ﻣﻘﺪار ‪ null‬ﺑﺮﮔﺮداﻧﺪه ﻣﯽ ﺷﻮد‪.‬‬

‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﻣﺘﺪي ﺑﻪ ﻧﺎم)(‪ .substr‬ﻧﯿﺰ ﺑﺮاي ﺟﺪاﮐﺮدن زﯾﺮ رﺷﺘﻪ ﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ‪.‬اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ﮐﻪ اوﻟﯽ‬
‫ﻣﻮﻗﻌﯿﺖ ﺷﺮوع و دوﻣﯽ ﻃﻮل زﯾﺮ رﺷﺘﻪ اي ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ از رﺷﺘﻪ اﺻﻠﯽ ﺟﺪا ﮐﻨﯿﻢ ﺧﻮاﻫﺪ ﺑﻮد‪ .‬در ﺻﻮرﺗﯽ ﮐﻪ آرﮔﻮﻣﺎن دوم ذﮐﺮ‬
‫ﻧﺸﻮد ﻋﻤﻞ ﺟﺪاﮐﺮدن ﺗﺎ اﻧﺘﻬﺎي رﺷﺘﻪ ﺧﻮاﻫﺪ ﺑﻮد‪ .‬ﺑﻪ ﻣﺜﺎل زﯾﺮ ﺗﻮﺟﻪ ﮐﻨﯿﺪ‪:‬‬
‫‪var myString‬‬ ‫=‬ ‫;”‪“javascript‬‬
‫‪var mySubStr‬‬ ‫=‬ ‫;)‪myString.substr(0,4‬‬
‫;)‪alert(mySubStr‬‬ ‫‪//‬‬ ‫”‪output “java‬‬

‫)(‪ toUpperCase‬و)( ‪toLowerCase‬‬

‫از ﺗﻮاﺑﻌﯽ ﻫﻤﭽﻮن )(‪ .toUpperCase‬و )(‪ .toLowerCase‬ﺑﺮاي ﺗﺒﺪﯾﻞ ﺣﺮوف رﺷﺘﻪ ﺑﻪ ﺣﺮوف ﺑﺰرگ ﯾﺎ ﮐﻮﭼﮏ اﺳﺘﻔﺎده ﻣﯽ‬
‫ﺷﻮد ﮐﻪ ﮐﺎر آن ﻫﺎ از روي اﺳﻤﺸﺎن ﮐﺎﻣﻼ ﻣﺸﺨﺺ اﺳﺖ‪:‬‬
‫;)”‪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‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
1stwebdesigner.ir
www.ParsBook.org
 ‫ﻓﺼﻞ ﺷﺶ‬

‫اﺷﯿﺎيدروﻧﯽ‪)1‬ﭘﯿﺶﺳﺎﺧﺘﻪ(‬

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

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫اﺷﯿﺎي دروﻧﯽ )ﭘﯿﺶ ﺳﺎﺧﺘﻪ(‬

‫ﺷﯽ ‪Math‬‬
‫ﯾﮑﯽ از اﺷﯿﺎي از ﭘﯿﺶ ﺳﺎﺧﺘﻪ ﺷﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺖ ﮐﻪ ﺑﺮاي اﻧﺠﺎم ﻣﺤﺎﺳﺒﺎت ﻋﺪدي و ﻋﻤﻠﯿﺎت ﻣﺮﺑﻮط ﺑﻪ رﯾﺎﺿﯿﺎت اﺳﺘﻔﺎده‬
‫ﻣﯽ ﺷﻮد‪ .‬اﯾﻦ ﺷﯽ ﺷﺎﻣﻞ ﯾﮑﺴﺮي ﺧﺎﺻﯿﺖ و ﻣﺘﺪ اﺳﺖ ﮐﻪ اﻧﺠﺎم ﻣﺤﺎﺳﺒﺎت را آﺳﺎن ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪40‬‬
‫‪6‬‬
‫ﻣﺘﺪﻫﺎي )(‪ .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‬ﺷﺎﻣﻞ ﻣﺘﺪ ﻫﺎي زﯾﺮ ﻧﯿﺰ ﻣﯽ ﺑﺎﺷﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫)‪acos(x) , asin(x) , atan(x) , atan2(x, y) , cos(x) , sin(x) , tan(x‬‬
‫ﯾﮑﯽ دﯾﮕﺮ از ﻣﺘﺪ ﻫﺎي ﻣﺮﺑﻮط ﺑﻪ ﺷﯽ ‪ Math‬ﮐﻪ ﮐﺎرﺑﺮد زﯾﺎدي ﻫﻢ دارد )(‪ .random‬اﺳﺖ ﮐﻪ ﺑﺮاي ﺗﻮﻟﯿﺪ اﻋﺪاد ﺗﺼﺎدﻓﯽ ﺑﯿﻦ‬
‫‪0‬و ‪) 1‬اﻟﺒﺘﻪ ﻧﻪ ﺧﻮد ‪ 0‬و ‪ (1‬ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد‪.‬‬

‫‪41‬‬ ‫اﻟﺒﺘﻪ ﺑﺮاي ﺗﻮﻟﯿﺪ اﻋﺪاد ﺗﺼﺎدﻓﯽ در ﯾﮏ ﻣﺤﺪوده ﺧﺎص از ﻓﺮﻣﻮل زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪:‬‬

‫‪6‬‬ ‫‪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‬ﺑﺮاي ﮐﺪﮔﺬاري آدرس ﻫﺎي اﯾﻨﺘﺮﻧﺘﯽ)‪ URI‬ﻫﺎ( اﺳﺘﻔﺎده‬
‫ﻣﯽ ﺷﻮد‪ .‬در ﺣﺎﻟﺖ ﮐﻠﯽ و ﺻﺤﯿﺢ ﯾﮏ آدرس ﻧﺒﺎﯾﺪ ﺷﺎﻣﻞ ﮐﺎراﮐﺘﺮﻫﺎي ﻧﺎﻣﻌﺘﺒﺮ ﻫﻤﭽﻮن ‪ space‬ﺑﺎﺷﺪ‪ .‬اﯾﻦ ﺗﻮاﺑﻊ ﺑﻪ ﺷﻤﺎ در ﺗﺒﺪﯾﻞ‬
‫ﮐﺮدن و ‪ encode‬ﮐﺮدن آدرس ﻫﺎي اﯾﻨﺘﺮﻧﺘﯽ ﻧﺎدرﺳﺖ و ﺑﯽ ارزش ﺑﺮاي اﯾﻨﮑﻪ ﻣﺮورﮔﺮﻫﺎ آﻧﻬﺎ را ﺑﻔﻬﻤﻨﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬‬
‫ﻣﺘﺪ )(‪ .encodeURI‬ﻣﻌﻤﻮﻻ ﺑﺮاي آدرس ﻫﺎي ﮐﺎﻣﻞ )ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‬
‫‪ ( http://learningjquery.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‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫اﺷﯿﺎي دروﻧﯽ )ﭘﯿﺶ ﺳﺎﺧﺘﻪ(‬

‫ﺣﺎﺻﻞ اﺟﺮاي ﮐﺪ ﺑﺎﻻ ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬

‫‪http://www.wrox.com/illegal%20value.htm#start‬‬
‫‪https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fwww.wrox.com%2Fillegal%20value.htm%23start‬‬
‫‪42‬‬
‫ﻃﺒﯿﻌﺘﺎ دو ﺗﺎﺑﻊ ﺑﺮاي ‪ decode‬ﮐﺮدن آدرس ﻫﺎي اﯾﻨﺘﺮﻧﺘﯽ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ﻫﻤﭽﻮن‪:‬‬ ‫‪6‬‬
‫‪‬‬ ‫)(‪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‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﮐﺎر ﺑﺎ ﺗﺎرﯾﺦ و زﻣﺎن در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫ﯾﮑﯽ از ﻗﺎﺑﻠﯿﺖ ﻫﺎي ﺟﺎﻟﺐ ﺟﺎوااﺳﮑﺮﯾﭙﺖ‪ ،‬ﺟﻤﻊ آوري اﻃﻼﻋﺎت از ﺳﯿﺴﺘﻢ ﮐﺎرﺑﺮ و ﻧﻤﺎﯾﺶ آﻧﻬﺎ در ﺻﻔﺤﺎت وب اﺳﺖ‪ .‬ﻫﻤﺎﻧﻄﻮر ﮐﻪ‬
‫ﻣﯽ داﻧﯿﺪ ‪ HTML‬ﺑﻪ ﺗﻨﻬﺎﯾﯽ ﻗﺎدر ﺑﻪ اﻧﺠﺎم ﭼﻨﯿﻦ ﮐﺎري ﻧﯿﺴﺖ اﻣﺎ ﺑﺎ ﮐﻤﮏ زﺑﺎﻧﻬﺎي دﯾﮕﺮ ﺗﺤﺖ وب ﻣﺎﻧﻨﺪ ‪ ، Javascript‬ﻣﯽ‬
‫‪43‬‬ ‫ﺗﻮاﻧﺪ ﺗﺎ ﺣﺪودي اﯾﻦ ﻣﺸﮑﻞ را ﺑﺮﻃﺮف ﮐﻨﺪ‪ .‬ﺷﺊ ﻫﺎﯾﯽ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ وﺟﻮد دارﻧﺪ ﮐﻪ ﺗﻮﺳﻂ ﻣﺘﺪﻫﺎي ﻣﺨﺘﻠﻒ‪ ،‬اﻃﻼﻋﺎت ﻣﻮرد‬

‫‪6‬‬ ‫ﻧﯿﺎز را از ﺳﯿﺴﺘﻢ ﮔﺮﻓﺘﻪ و در اﺧﺘﯿﺎر ﮐﺎرﺑﺮان ﻗﺮار ﻣﯽ دﻫﻨﺪ‪ .‬ﯾﮑﯽ از اﯾﻦ اﺷﯿﺎء‪ 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‬‬
‫اﯾﻦ ﺷﯽ داراي ﻣﺘﺪ ﻫﺎﯾﯽ اﺳﺖ ﮐﻪ از آن ﻫﺎ ﺑﺮاي ﺑﺪﺳﺖ آوردن ﺟﺰﺋﯿﺎت ﺑﯿﺸﺘﺮي از ﺗﺎرﯾﺦ و زﻣﺎن اﺳﺘﻔﺎده ﻧﻤﻮد‪ .‬ﺑﻌﻀﯽ از اﯾﻦ ﻣﺘﺪ‬
‫ﻫﺎ و ﺧﻮاص را در ﺟﺪول زﯾﺮ ﻣﺸﺎﻫﺪه ﻣﯽ ﮐﻨﯿﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫اﺷﯿﺎي دروﻧﯽ )ﭘﯿﺶ ﺳﺎﺧﺘﻪ(‬

‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﻧﺎم ﻣﺘﺪ‬

‫روزي از ﻣﺎه را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﻣﻘﺪاري از‬

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

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﻓﺼﻞ ﻫﻔﺖ‬

‫‪BOM‬؛ﻣﺪلﺷﯽﮔﺮايﻣﺮورﮔﺮ‬

‫‪ BOM‬ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از اﺟﺰاي اﺻﻠﯽ و اﺑﺘﺪاﯾﯽ ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻧﻘﺶ ﻣﻬﻤﯽ در ﺗﻌﺎﻣﻞ ﮐﺎرﺑﺮان ﺑﺎ ﺑﺨﺶ ﻫﺎي‬
‫ﮔﻮﻧﺎﮔﻮن ﻣﺮورﮔﺮﻫﺎ ﻫﻤﭽﻮن ﺑﺨﺶ ﻧﻤﺎﯾﺶ ﺳﻨﺪ‪ ،‬ﻓﺮﯾﻢ ﻫﺎ‪ ،‬ﭘﻨﺠﺮه ﻫﺎ‪ ،‬ﺗﺎرﯾﺨﭽﻪ‪ ،1‬ﻣﺸﺨﺼﺎت ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ و ﻣﺮورﮔﺮ و ‪ ...‬اﯾﻔﺎ ﻣﯽ‬
‫ﮐﻨﺪ‪ .‬ﻣﺎ در اﯾﻦ ﺑﺨﺶ اﺑﺘﺪا ﺑﺎ ‪ BOM‬آﺷﻨﺎ ﺷﺪه و ﺳﭙﺲ ﺑﻪ ﺑﺮرﺳﯽ ﺑﺨﺶ ﻫﺎي ﺗﺸﮑﯿﻞ دﻫﻨﺪه آن و ﻫﺮ ﯾﮏ از ﺧﺼﻮﺻﯿﺎت آن ﻫﺎ‬
‫ﺧﻮاﻫﯿﻢ ﭘﺮداﺧﺖ‪.‬‬

‫‪1‬‬
‫‪history‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫‪ BOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬

‫ِ‪ BOM‬ﭼﯿﺴﺖ؟‬

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

‫اﮐﻨﻮن ﺑﻪ ﺑﺮرﺳﯽ ﻫﺮ ﯾﮏ از اﺟﺰاي ﺗﺸﮑﯿﻞ دﻫﻨﺪه ‪ 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‬ﺗﻐﯿﯿﺮ ﻣﯽ دﻫﺪ‪ .‬ﻣﻘﺎدﯾﺮ ﻣﻨﻔﯽ ﻣﺠﺎز ﻧﯿﺴﺘﻨﺪ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫‪scrollBy(dx,dy) .۵‬‬
‫اﺳﮑﺮول اﻓﻘﯽ را ﺑﻪ اﻧﺪازه ‪ x‬و اﺳﮑﺮول ﻋﻤﻮدي را ﺑﻪ اﻧﺪازه ‪ y‬ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫‪scrollTo(x,y) .۶‬‬
‫اﯾﻦ ﻣﺘﺪ ﻣﺨﺘﺼﺎت ﺟﺪﯾﺪ اﺳﮑﺮول ﻫﺎي اﻓﻘﯽ و ﻋﻤﻮدي را ﺑﻪ ﺗﺮﺗﯿﺐ ﺑﺎ اﺳﺘﻔﺎده از آرﮔﻮﻣﺎن ﻫﺎي ‪ x‬و ‪ y‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫‪47‬‬ ‫ﻣﺜﺎل ﻫﺎ‪:‬‬
‫‪7‬‬
‫)‪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‬رﺷﺘﻪ اي از وﯾﮋﮔﯽ ﻫﺎي‬
‫‪ .4‬و ﯾﮏ ﻣﻘﺪار ‪Booelan‬‬
‫ﻋﻤﻮﻣﺂ ﻓﻘﻂ از ﺳﻪ آرﮔﻮﻣﺎن اول اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬اﮔﺮ ﭘﻨﺠﺮه اي از ﻗﺒﻞ ﺑﺎ ﻧﺎﻣﯽ ﮐﻪ ﺑﺮاي آرﮔﻮﻣﺎن دوم اﻧﺘﺨﺎب ﮐﺮده اﯾﺪ وﺟﻮد‬
‫داﺷﺘﻪ ﺑﺎﺷﺪ ﺻﻔﺤﻪ در آن ﭘﻨﺠﺮه ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ ‪ ,‬در ﻏﯿﺮ اﯾﻦ ﺻﻮرت در ﭘﻨﺠﺮه اي ﺟﺪﯾﺪ ﺑﺎز ﻣﯽ ﺷﻮد‪ .‬اﮔﺮ آرﮔﻮﻣﺎن ﺳﻮم ﺗﻌﯿﯿﻦ‬
‫ﻧﺸﻮد ﭘﻨﺠﺮه ﺑﺎ ﺗﻨﻈﯿﻤﺎت ﭘﻨﺠﺮه اﺻﻠﯽ ﻣﺮورﮔﺮ ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
‫وﯾﮋﮔﯽ ﻫﺎي آرﮔﻮﻣﺎن ﺳﻮم ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﭘﻨﺠﺮه ي ﺟﺪﯾﺪ ﭼﻪ ﺧﺼﻮﺻﯿﺎﺗﯽ داﺷﺘﻪ ﺑﺎﺷﺪ ﮐﻪ در زﯾﺮ ﺑﯿﺎن ﻣﯽ ﮐﻨﯿﻢ‪:‬‬
‫ﺧﺼﻮﺻﯿﺎت ﺑﺎ = ﻣﻘﺪار دﻫﯽ ﻣﯽ ﺷﻮد و ﺑﺎ ‪ ,‬از ﻫﻢ ﺟﺪا ﻣﯽ ﺷﻮد‪.‬‬
‫ﺑﺮﺧﯽ از ﺧﺼﻮﺻﯿﺎت ﻣﺠﺎز ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﻋﺒﺎرﺗﻨﺪ از‪:‬‬
‫‪ :left‬ﻓﺎﺻﻠﻪ از ﭼﭗ‬ ‫‪‬‬
‫‪ :top‬ﻓﺎﺻﻠﻪ از ﺑﺎﻻ‬ ‫‪‬‬
‫‪ :width‬ﻋﺮض ﭘﻨﺠﺮه‬ ‫‪‬‬
‫‪ :height‬ارﺗﻔﺎع ﭘﻨﺠﺮه‬ ‫‪‬‬
‫‪ :(Yes/No) resizable‬آﯾﺎ ﭘﻨﺠﺮه ﻗﺎﺑﻞ ﺗﻐﯿﯿﺮ اﻧﺪازه ﺑﺎﺷﺪ ﯾﺎ ﺧﯿﺮ‬ ‫‪‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫‪ BOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬

‫)‪ :(Yes/No) scrollable(scrollbars‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ آﯾﺎ ﭘﻨﺠﺮه ﻧﻮار اﺳﮑﺮول داﺷﺘﻪ ﺑﺎﺷﺪ ﯾﺎ ﺧﯿﺮ‬ ‫‪‬‬
‫‪ :(Yes/No) toolbar‬آﯾﺎ ﺷﺎﻣﻞ ﻧﻮار اﺑﺰار ﺑﺎﺷﺪ‪.‬‬ ‫‪‬‬
‫‪ :(Yes/No) status ‬آﯾﺎ ﻧﻮار وﺿﻌﺒﺖ داﺷﺘﻪ ﺑﺎﺷﺪ‬
‫‪ :(Yes/No) location ‬آﯾﺎ ﻧﻮار آدرس داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬
‫‪48‬‬
‫‪ ‬در رﺷﺘﻪ اي از ﺧﺼﻮﺻﯿﺎت ﻧﺒﺎﯾﺪ ﻫﯿﭻ ﻓﻀﺎي ﺧﺎﻟﯽ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬ ‫‪7‬‬
‫ﻣﺘﺪ )(‪ .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‬ﯾﮏ ﻣﺘﻦ و ﯾﮏ ﮐﺎدر ﻣﺘﻨﯽ ﺑﺮاي‬ ‫‪‬‬
‫وارد ﮐﺮدن ﯾﮏ رﺷﺘﻪ ﺗﻮﺳﻂ ﮐﺎرﺑﺮ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد‪:‬‬
‫‪ .1‬ﻋﻨﻮان ﺳﻮال ﯾﺎ ﻣﺘﻨﯽ ﮐﻪ ﺑﻪ ﮐﺎرﺑﺮ ﻧﺸﺎن داده ﻣﯽ ﺷﻮد‪.‬‬
‫‪ .2‬ﻣﻘﺪار ﭘﯿﺶ ﻓﺮض ﺑﺮاي ﮐﺎدر ﻣﺘﻨﯽ‬
‫‪49‬‬ ‫> "‪<scritp type="text/javascript‬‬
‫;)'‪Prompt('what is your name','Michael‬‬
‫‪7‬‬ ‫>‪</script‬‬

‫در ﺻﻮرﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ ي ‪ Ok‬را ﺑﺰﻧﺪ ﺗﺎﺑﻊ ﻣﻘﺪار وارد ﺷﺪه در ﮐﺎدر ﻣﺘﻨﯽ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ و در ﺻﻮرت زدن دﮐﻤﻪ ي ‪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‬ﮐﺪ ﮔﺮﻓﺘﻪ‬
‫ﺷﺪه را ﻣﮑﺮرآ ﺑﻌﺪ از ﻣﺪﺗﯽ ﺑﺮ ﺣﺴﺐ ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ ﭼﻨﺪﯾﻦ ﺑﺎر ﺗﮑﺮار ﻣﯽ ﮐﻨﺪ‪ .‬اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد‪:‬‬
‫ﮐﺪي ﮐﻪ ﺑﺎﯾﺪ اﺟﺮا ﺷﻮد‪.‬‬ ‫‪.1‬‬
‫ﻣﺪت زﻣﺎﻧﯽ ﮐﻪ ﺑﺎﯾﺪ ﺑﻌﺪ از آن ﮐﺪ اﺟﺮا ﺷﻮد‪.‬‬ ‫‪.2‬‬
‫آرﮔﻮﻣﺎن اوﻟﯽ ﻫﻢ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﺻﻮرت ﯾﮏ رﺷﺘﻪ از ﮐﺪﻫﺎ و ﻫﻢ ﻧﺎم ﯾﮏ ﺗﺎﺑﻊ ﺑﺎﺷﺪ‪ .‬ﻫﺮ ﺳﻪ ﮐﺪ زﯾﺮ ﺑﻌﺪ از ﯾﮏ ﺛﺎﻧﯿﻪ ﯾﮏ ﭘﻨﺠﺮه‬
‫ﻫﺸﺪار را ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﻨﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ ؛ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬BOM

<scritp type="text/javascript" >

setTimeout("alert('Hello world!')", 1000);

50
</script>

----------------------------------------------------------
7
<scritp type="text/javascript" >
setTimeout(function() { alert("Hello world!"); }, 1000);
</script>

----------------------------------------------------------

<scritp type="text/javascript" >

function sayHelloWorld() {
alert("Hello world!");
}
setTimout(sayHelloWorld, 1000);
</script>

:‫ ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‬.clearTimeout() ‫ از ﻣﺘﺪ‬.setTimeout() ‫ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از اﺟﺮاي ﺗﺎﺑﻊ‬

<scritp type="text/javascript" >
var iTimeoutId = setTimeout("alert('Hello world!')", 1000);
clearTimeout(iTimeoutId);
</script>

.‫ ﻣﺎﻧﻨﺪ ﺗﺎﺑﻊ ﻗﺒﻠﯽ اﺳﺖ ﺟﺰ اﯾﻨﮑﻪ ﮐﺪ ﮔﺮﻓﺘﻪ ﺷﺪه را ﺑﻌﺪ از ﮔﺬﺷﺖ ﺑﺎزه ي زﻣﺎﻧﯽ ﻣﺸﺨﺺ ﺗﮑﺮار ﻣﯽ ﮐﻨﺪ‬:setIntervals 
:‫ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‬.clearInterval() ‫ از ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم‬, ‫ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از اﺟﺮاي اﯾﻦ ﻣﺘﺪ‬
setInterval(“alert(‘Hello world!’) “, 1000);
-----------------------------------------------------
setInterval(function() { alert(“Hello world!”); }, 1000);
-----------------------------------------------------
function sayHelloWorld() {
alert(“Hello world!”);
}
setInterval(sayHelloWorld, 1000);

history ‫ﺷﯽ‬
‫ اﻟﺒﺘﻪ ﻫﯿﭻ راﻫﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ آدرس ﺻﻔﺤﺎت ﮐﻪ در‬.‫ﻣﻤﮑﻦ اﺳﺖ ﺑﺨﻮاﻫﯿﻢ ﺑﻪ ﺗﺎرﯾﺨﭽﻪ ي ﻣﺮورﮔﺮ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ‬
:‫ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‬window ‫ ﻣﺮﺑﻮط ﺑﻪ ﺷﯽ‬.history ‫ ﺑﺮاي اﯾﻦ ﮐﺎر از ﻣﺘﺪﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ‬.‫ ﻧﯿﺴﺖ‬،‫ وﺟﻮد دارﻧﺪ‬history
‫ اﮔﺮ ﻋﺪد ﻣﻨﻔﯽ ﺑﺎﺷﺪ ﺑﻪ ﺻﻔﺤﺎت‬.‫ ﺗﻌﺪاد ﺻﻔﺤﺎﺗﯽ ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ ﺟﻠﻮ ﯾﺎ ﺑﻪ ﻋﻘﺐ ﭘﯿﻤﺎﯾﺶ ﺷﻮﻧﺪ‬:‫ ﻓﻘﻂ ﯾﮏ ﭘﺎراﻣﺘﺮ ﻣﯽ ﮔﯿﺮد‬.go() ‫ﻣﺘﺪ‬
:‫ ﺑﺮاي ﻣﺜﺎل ﺟﻬﺖ رﻓﺘﻦ ﺑﻪ ﯾﮏ ﺻﻔﺤﻪ ﻋﻘﺐ از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‬.‫ﻗﺒﻞ و اﮔﺮ ﻋﺪد ﻣﺜﺒﺖ ﺑﺎﺷﺪ ﺑﻪ ﺻﻔﺨﺎت ﺟﻠﻮ ﻣﯽ روﯾﻢ‬

1stwebdesigner.ir
www.ParsBook.org
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫;)‪window.history.go(-1‬‬

‫و ﺑﺮاي رﻓﺘﻦ ﺑﻪ ﺟﻠﻮ‪:‬‬

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

‫‪7‬‬ ‫ﻫﻤﯿﭽﻨﯿﻦ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻣﺘﺪ ﻫﺎي )(‪ .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.learningjquery.ir/‬‬

‫ﺷﯽ ‪ document‬از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ .referrer‬ﺑﺮاي ﺑﻪ دﺳﺖ آوردن آدرس ﺻﻔﺤﻪ اي ﮐﻪ ﮐﺎرﺑﺮ از آن ﺑﻪ ﺻﻔﺤﻪ ﮐﻨﻮﻧﯽ آﻣﺪه‬
‫اﺳﺖ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ‪.‬‬
‫اﯾﻦ ﺷﯽ ﻫﻤﭽﻨﯿﻦ ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ .title‬دارد ﮐﻪ از آن ﺑﺮاي ﺑﺪﺳﺖ آوردن و ﺣﺘﯽ ﺗﻐﯿﯿﺮ ﻋﻨﻮان ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ‪.‬ﻣﯽ ﺗﻮان‬
‫از اﯾﻦ ﺧﺎﺻﯿﺖ ﺧﻮاﻧﺪﻧﯽ‪/‬ﻧﻮﺷﺘﻨﯽ ﺑﺮاي ﺗﻐﯿﯿﺮ ﻋﻨﻮان ﺻﻔﺤﻪ ﺑﻪ ﺻﻮرت ﭘﻮﯾﺎ ﻧﯿﺰ اﺳﺘﻔﺎده ﮐﺮد‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل دﺳﺘﻮر زﯾﺮ ﻋﻨﻮان‬
‫ﺻﻔﺤﻪ ﺟﺎري را ﺑﻪ ‪ New Title Page‬ﺗﻐﯿﯿﺮ ﻣﯽ دﻫﺪ‪:‬‬
‫= ‪Document.title‬‬ ‫;”‪“New Title Page‬‬

‫ﻫﻤﭽﻨﯿﻦ اﯾﻦ ﺷﯽ داراي ﯾﮑﺴﺮي ﺧﺼﻮﺻﯿﺎت ﻣﺠﻤﻮﻋﻪ اي ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﻧﻮاع ﻋﻨﺎﺻﺮ داﺧﻞ ﺻﻔﺤﻪ ي ﺑﺎرﮔﺬاري ﺷﺪه اﺳﺖ‪.‬‬
‫ﺑﺮﺧﯽ از ﺧﺎﺻﯿﺖ ﻫﺎ ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ‪:‬‬
‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﻣﺠﻤﻮﻋﻪ‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﻟﯿﻨﮏ ﻫﺎي ﺻﻔﺤﻪ‬ ‫‪anchors‬‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ‪ embed‬ﺻﻔﺤﻪ‬ ‫‪embeds‬‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻓﺮم ﻫﺎي ﺻﻔﺤﻪ‬ ‫‪forms‬‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ﻋﮑﺲ ﺻﻔﺤﻪ‬ ‫‪images‬‬
‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻟﯿﻨﮏ ﻫﺎي ﺻﻔﺤﻪ‬ ‫‪links‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫‪ BOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬

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

‫ﺑﺎ اﯾﻦ روش ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻪ آدرس آن ﻫﺎ ﻫﻢ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ‪ ,‬ﺑﻪ ﺻﻮرت زﯾﺮ‪:‬‬
‫‪document.images[0].src‬‬

‫از دﯾﮕﺮ ﻣﺘﺪﻫﺎي اﯾﻦ ﺷﯽ ﻣﯽ ﺗﻮان ﺑﻪ )(‪ .write‬و )(‪ .writeln‬ﺑﺮاي ﭼﺎپ ﯾﮏ ﻣﺘﻦ اﺷﺎره ﮐﺮد‪.‬‬

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

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

‫)”‪Location.assign(“http:// www.learningjquery.ir‬‬

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

‫ﺷﯽ ‪navigator‬‬
‫اﯾﻦ ﺷﯽ اﯾﮑﯽ از اﺷﯿﺎي ﻗﺪﯾﻤﯽ ﻣﺪل ﺷﯽ ﮔﺮاي ‪ BOM‬ﺑﻪ ﺷﻤﺎر ﻣﯽ رود‪ .‬از اﯾﻦ ﺷﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ و ﺑﺪﺳﺖ آوردن اﻃﻼﻋﺎﺗﯽ‬
‫در ﻣﻮرد ﻧﻮع و ﻧﺴﺨﻪ ﻣﺮورﮔﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬ﺑﻌﻀﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي آن ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﺧﺎﺻﯿﺖ ﻫﺎ‬

‫رﺷﺘﻪ اي ﺣﺎوي ﮐﺪ رﺷﺘﻪ اي ﻣﺮورﮔﺮ‬ ‫‪appcodeName‬‬

‫ﻧﺎم ﻋﻤﻮﻣﯽ ﻣﺮورﮔﺮ‬ ‫‪appName‬‬
‫‪53‬‬ ‫اﻃﻼﻋﺎت اﺿﺎﻓﯽ ﻣﺮورﮔﺮ‬ ‫‪appMinotVersion‬‬

‫‪7‬‬ ‫ﻧﺴﺨﻪ ﻣﺮورﮔﺮ‬ ‫‪appVersion‬‬

‫ﻧﻮع زﺑﺎن ﻣﺮورﮔﺮ ﯾﺎ ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ‬ ‫‪browserLanguage‬‬
‫ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﻣﯿﮑﻨﺪ آﯾﺎ ﮐﻮﮐﯽ ﻫﺎ ﻓﻌﺎل ﻫﺴﺘﻨﺪ ﯾﺎ ﺧﯿﺮ‬ ‫‪cookieEnabled‬‬
‫ﮐﻼس ‪ cpu‬را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ‬ ‫‪cpuClass‬‬
‫ﻓﻌﺎل ﺑﻮدن ﺟﺎوا‬ ‫‪javaEnabled‬‬
‫زﺑﺎن ﻣﺮورﮔﺮ را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ‬ ‫‪Language‬‬
‫آراﯾﻪ اي از ‪ mimetype‬ﻫﺎي ﺛﺒﺖ ﺷﺪه در ﻣﺮورﮔﺮ‬ ‫‪mimeType‬‬
‫ﻧﻮع ‪ platform‬ي ﮐﻪ ﮐﺎﻣﭙﯿﻮﺗﺮ ﮐﺎرﺑﺮ ﺑﺮ روي آن ﻗﺮار دارد را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪Platform‬‬
‫رﺷﺘﻪ اي ﺣﺎوي اﻃﻼﻋﺎﺗﯽ درﻣﻮرد ﻧﻮع و ﻧﺴﺨﻪ ﻣﺮورﮔﺮ و ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ را ﻧﮕﻪ‬
‫داري ﻣﯽ ﮐﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮان از آن ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﻣﺸﺨﺼﺎت دﻗﯿﻖ ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ و‬
‫ﻣﺮورﮔﺮ ﮐﺎر اﺳﺘﻔﺎده ﮐﺮد‪.‬‬ ‫‪userAgent‬‬
‫ﻣﻘﺪار اﯾﻦ ﺧﺎﺻﯿﺖ ﻫﻤﯿﺸﻪ ﻫﻤﺮاه ﺑﺎ ﻫﺮ درﺧﻮاﺳﺖ ﺗﻮﺳﻂ ﻣﺮورﮔﺮﻫﺎ ﻓﺮﺳﺘﺎده ﻣﯽ‬
‫ﺷﻮد‪.‬‬

‫ﺟﺪول زﯾﺮ ﻣﻘﺪار ﺧﺎﺻﯿﺖ ‪ .userAgent‬ﺷﯽ ‪ navigator‬را در ﭼﻬﺎر ﻣﺮورﮔﺮ ﻣﺸﻬﻮر و ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ وﯾﻨﺪوز ‪ XP‬ﻧﻤﺎﯾﺶ ﻣﯽ‬
‫دﻫﺪ‪:‬‬

‫‪Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.7 (KHTML,‬‬

‫‪Google Chrome 16‬‬
‫‪like Gecko) Chrome/16.0.912.77 Safari/535.7‬‬
‫‪Opera 11‬‬ ‫‪Opera/9.80 (Windows NT 5.1; U; en) Presto/2.7.62 Version/11.00‬‬
‫‪Firefox 9.0‬‬ ‫‪Mozilla/5.0 (Windows NT 5.1; rv:9.0) Gecko/20100101 Firefox/9.0‬‬
‫;‪Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.2‬‬
‫‪Internet Explorer 7.0‬‬ ‫‪.NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR‬‬
‫)‪3.5.30729‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫‪ BOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬

‫ﺷﯽ ‪screen‬‬
‫از اﯾﻦ ﺷﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﻃﻼﻋﺎت ﻣﺮﺑﻮﻃﻪ ﺑﻪ ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﮐﺎرﺑﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬اﯾﻦ ﺷﯽ ﺷﺎﻣﻞ ﺧﻮاص زﯾﺮ اﺳﺖ‪:‬‬
‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﺧﺎﺻﯿﺖ‬ ‫‪54‬‬
‫ارﺗﻔﺎع ﻗﺎﺑﻞ دﺳﺘﺮس از وﯾﻨﺪوز‬ ‫‪availHeight‬‬ ‫‪7‬‬
‫ﻋﺮض ﻗﺎﺑﻞ دﺳﺘﺮس از وﯾﻨﺪوز‬ ‫‪availWidth‬‬

‫ﺗﻌﺪاد ﺑﯿﺖ ﻫﺎ ﺑﺮاي ﻧﻤﺎﯾﺶ رﻧﮓ ﻫﺎ‬ ‫‪colorDepth‬‬

‫ارﺗﻔﺎع ﺻﻔﺤﻪ‬ ‫‪height‬‬

‫ﻋﺮض ﺻﻔﺤﻪ‬ ‫‪width‬‬

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

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﻓﺼﻞ ﻫﺸﺖ‬

‫‪DOM‬؛ﻣﺪلﺷﯽﮔﺮايﺳﻨﺪ‬

‫در اﯾﻦ ﻓﺼﻞ ﺑﻪ ﺑﺮرﺳﯽ ‪ DOM‬ﯾﮑﯽ دﯾﮕﺮ از اﺟﺰاي ﻣﻬﻢ ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻣﯽ ﭘﺮدازﯾﻢ‪ .‬اﯾﻦ ‪ DOM‬اﺳﺖ ﮐﻪ اﻣﮑﺎن‬
‫دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ و ﻗﺎﺑﻠﯿﺖ اﺿﺎﻓﻪ‪ ،‬ﺣﺬف و ﺟﺎﺑﺠﺎﯾﯽ آن ﻫﺎ در ﺟﺎي ﺟﺎي ﺻﻔﺤﻪ را ﻓﺮاﻫﻢ ﻣﯽ آورد‪.‬‬
‫در ﺳﺮآﻏﺎز اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﻪ ﺑﺮرﺳﯽ و ﺗﺸﺮﯾﺢ ‪ DOM‬ﭘﺮداﺧﺘﻪ و ﺳﭙﺲ روش ﻫﺎﯾﯽ ﮐﻪ ﺑﺮاي دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ‬
‫را ﻓﺮاﻫﻢ ﮐﺮده ﺗﻮﺿﯿﺢ ﺧﻮاﻫﯿﻢ داد‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫‪ DOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬

‫‪ DOM‬ﭼﯿﺴﺖ؟‬

‫‪56‬‬
‫‪ DOM‬ﺑﻪ ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن وب اﻣﮑﺎن دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ ﯾﮏ ﺻﻔﺤﻪ ‪ HTML‬را ﻣﯽ دﻫﺪ‪ .‬اﯾﻦ ﻣﺪل ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد‬
‫در ﯾﮏ ﺻﻔﺤﻪ ‪ HTML‬را ﺑﻪ ﺻﻮرت درﺧﺘﯽ از ﮔﺮه ﻫﺎ ﺗﺮﺳﯿﻢ ﻣﯽ ﮐﻨﺪ‪ .‬ﺑﻪ ﺗﮑﻪ ﮐﺪ زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬
‫>‪<html‬‬ ‫‪8‬‬
‫>‪<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‬‬

‫اﯾﻦ ﮐﺪ را ﻣﯽ ﺗﻮان در ﻗﺎﻟﺐ درﺧﺖ زﯾﺮ ﻧﻤﺎﯾﺶ داد‪:‬‬

‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ ﺑﯿﻨﯿﺪ ﻣﯽ ﺗﻮان ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ را در ﻗﺎﻟﺐ ﯾﮏ ﮔﺮه‪ 1‬ﻧﻤﺎﯾﺶ داده ﻣﯽ ﺷﻮد‪ .‬اﻣﺎ ﻫﻤﯿﺸﻪ در‬
‫‪ DOM‬ﮔﺮﻫﯽ وﯾﮋه ﺑﻪ ﻧﺎم ‪ document‬وﺟﻮد دارد ﮐﻪ در ﺑﺎﻻﺗﺮﯾﻦ ﺳﻄﺢ درﺧﺖ ﻗﺮار ﮔﺮﻓﺘﻪ و ﺳﺎﯾﺮ ﮔﺮه ﻫﺎ را ﺷﺎﻣﻞ ﻣﯽ ﺷﻮد‪ .‬ﺑﺎ‬
‫اﯾﻦ ﻓﺮض درﺧﺖ ﻓﻮق ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺗﺒﺪﯾﻞ ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬

‫‪1‬‬
‫‪node‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬

‫‪57‬‬
‫‪8‬‬

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

‫‪1‬‬
‫‪Document Node‬‬
‫‪2‬‬
‫‪Element Node‬‬
‫‪3‬‬
‫‪Text Node‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫‪ DOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬

‫‪58‬‬
‫‪8‬‬

‫‪ :attr‬ﮔﺮه اي ﮐﻪ ﺑﻪ ﯾﮏ ﺻﻔﺖ از ﯾﮏ ﻋﻨﺼﺮ اﺷﺎره ﻣﯽ ﮐﻨﺪ و ﻓﺎﻗﺪ ﻓﺮزﻧﺪ ﻣﯽ ﺑﺎﺷﺪ‪ .‬ﺑﻪ اﯾﻦ ﻧﻮع ﮔﺮه ﻫﺎ ‪ ،‬ﮔﺮه ﺻﻔﺘﯽ‪ 1‬ﮔﻔﺘﻪ ﻣﯽ‬
‫ﺷﻮد‪ .‬در درﺧﺖ ‪ DOM‬ﻣﻌﻤﻮﻻ اﯾﻦ ﮔﺮه ﻫﺎ را ﺑﻪ ﺻﻮرت داﯾﺮه اي و ﻣﺘﺼﻞ ﺑﻪ ﮔﺮه ﻫﺎي ﻋﻨﺼﺮي ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﻨﺪ‪ .‬ﺑﻪ ﻋﻨﻮان‬
‫ﻣﺜﺎل ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ ﻟﯿﻨﮑﯽ ﮐﻪ در ﻣﺜﺎل ﺑﺎﻻ ﻣﺸﺎﻫﺪه ﻣﯽ ﺷﻮد داراي ﺻﻔﺖ ﻫﺎي ‪ href‬و ‪ rel‬ﻫﺴﺘﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮان آن ﻫﺎ را ﺑﻪ‬
‫ﺻﻮرت زﯾﺮ ﻧﻤﺎﯾﺶ داد‪:‬‬

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

‫‪1‬‬
‫‪Attribute Node‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﻧﻮع ‪ /‬ﻧﻮع ﺑﺎزﮔﺸﺘﯽ‬ ‫ﺧﺎﺻﯿﺖ ‪ /‬ﻣﺘﺪ‬
‫ﻧﺎم ﮔﺮه را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪ .‬اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﺴﺘﮕﯽ ﺑﻪ‬
‫‪String‬‬ ‫‪nodeName‬‬
‫ﻧﻮع ﮔﺮه دارد‪.‬‬

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

‫ﺑﻪ ﻧﻮع ﮔﺮه دارد‪.‬‬
‫‪String‬‬ ‫‪nodeValue‬‬

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

‫اﺷﺎره ﺑﻪ ﺷﯽ ‪ document‬ي ﮐﻪ ﮔﺮه ﺟﺰﺋﯽ از آن‬
‫‪Document‬‬ ‫‪ownerDocument‬‬
‫اﺳﺖ دارد‬
‫اﺷﺎره ﺑﻪ اوﻟﯿﻦ ﮔﺮه از ﻟﯿﺴﺖ ﮔﺮه ﻫﺎ دارد‪.‬‬ ‫‪Node‬‬ ‫‪firstChild‬‬
‫اﺷﺎره ﺑﻪ آﺧﺮﯾﻦ ﮔﺮه از ﻟﯿﺴﺖ ﮔﺮه ﻫﺎ دارد‪.‬‬ ‫‪Node‬‬ ‫‪lastChild‬‬
‫ﻟﯿﺴﺖ )آراﯾﻪ( اي از ﺗﻤﺎم ﮔﺮه ﻫﺎي داﺧﻞ ﯾﮏ ﮔﺮه‬ ‫‪NodeList‬‬ ‫‪childNodes‬‬
‫اﺷﺎره ﺑﻪ ﮔﺮه ﻫﻤﺰاد )ﺑﺮادر( ﻗﺒﻠﯽ دارد‪ .‬اﮔﺮ ﻫﻤﺰاد‬
‫ﻗﺒﻠﯽ وﺟﻮد ﻧﺪاﺷﺖ ﺑﺎﺷﺪ ﻣﻘﺪار ‪ null‬را ﺑﺮ‬ ‫‪Node‬‬ ‫‪previousSibling‬‬
‫ﻣﯿﮕﺮداﻧﺪ‪.‬‬
‫اﺷﺎره ﺑﻪ ﮔﺮه ﻫﻤﺰاد )ﺑﺮادر( ﺑﻌﺪي دارد‪ .‬اﮔﺮ ﻫﻤﺰاد‬
‫ﺑﻌﺪي وﺟﻮد ﻧﺪاﺷﺖ ﺑﺎﺷﺪ ﻣﻘﺪار ‪ null‬را ﺑﺮ‬ ‫‪Node‬‬ ‫‪nextSibling‬‬
‫ﻣﯿﮕﺮداﻧﺪ‪.‬‬
‫در ﺻﻮرﺗﯽ ﮐﻪ آراﯾﻪ ‪ childNodes‬داراي ﯾﮏ ﯾﺎ‬
‫ﺑﯿﺸﺘﺮ از ﯾﮏ ﻋﻀﻮ )ﮔﺮه( ﺑﺎﺷﺪ ‪ True‬را ﺑﺮ‬ ‫‪Boolean‬‬ ‫)(‪hasChildNodes‬‬
‫ﻣﯿﮕﺮداﻧﺪ‬
‫آرﮔﻮﻣﺎن ‪ node‬را ﺑﻪ اﻧﺘﻬﺎي آراﯾﻪ ‪childNodes‬‬
‫‪Node‬‬ ‫)‪appendChild(node‬‬
‫اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫آرﮔﻮﻣﺎن ‪ node‬را از اﻧﺘﻬﺎي آراﯾﻪ ‪childNodes‬‬
‫‪Node‬‬ ‫)‪removeChild(node‬‬
‫ﺣﺬف ﻣﯽ ﮐﻨﺪ‪.‬‬
‫در آراﯾﻪ ‪ oldnode ، childNodes‬را ﺑﺎ‬
‫‪Node‬‬ ‫)‪replaceChild (newnode, oldnode‬‬
‫‪ newnode‬ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫در آراﯾﻪ ‪ newnode ، childNodes‬را ﻗﺒﻞ از‬
‫‪Node‬‬ ‫)‪insertBefore (newnode, refnode‬‬
‫‪ refnode‬ﻗﺮار ﻣﯽ دﻫﺪ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ ؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬DOM

DOM ‫اﺳﺘﻔﺎده از‬

‫دﺳﺘﺮﺳﯽ ﺑﻪ ﮔﺮه ﻫﺎ‬

:‫ﺗﮑﻪ ﮐﺪ زﯾﺮ را در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ‬
60
<html>
8
<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 ‫ﻣﯽ ﺗﻮاﻧﯿﻢ ﺻﺤﺖ راﺑﻄﻪ ﻫﺎي ﺳﻪ ﻣﺘﻐﯿﺮ‬

1stwebdesigner.ir
www.ParsBook.org
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫;)‪alert(oHead.parentNode == oHtml‬‬ ‫”‪//outputs “true‬‬
‫;)‪alert(oBody.parentNode == oHtml‬‬ ‫”‪//outputs “true‬‬
‫”‪alert(oBody.previousSibling == oHead); //outputs “true‬‬
‫;)‪alert(oHead.nextSibling == oBody‬‬ ‫”‪//outputs “true‬‬

‫‪61‬‬ ‫”‪alert(oHead.ownerDocument == document); //outputs “true‬‬

‫‪8‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺻﻔﺎت ﻋﻨﺎﺻﺮ‬

‫‪ 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 ،‬ﭼﻨﺪﯾﻦ ﻣﺘﺪ ﺑﺮاي دﺳﺘﺮﺳﯽ ﻣﺴﺘﻘﯿﻢ ﺑﻪ ﮔﺮه ﻫﺎ ﻓﺮاﻫﻢ آورده اﺳﺖ‪.‬‬

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

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

‫ﻓﺮض ﮐﻨﯿﺪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﺑﻪ اوﻟﯿﻦ ﻋﻨﺼﺮ ﻋﮑﺲ اوﻟﯿﻦ ﭘﺎراﮔﺮاف ﺻﻔﺤﻪ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ‪:‬‬
‫;)”‪var oPs = document.getElementsByTagname(“p‬‬
‫;)”‪var oImgsInP = oPs[0].getElementsByTagName(“img‬‬

‫ﻣﯽ ﺗﻮاﻧﯿﻢ از دﺳﺘﻮر زﯾﺮ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪:‬‬
‫;)”*“(‪var oAllElements = document.getElementsByTagName‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫‪ DOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬

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

‫>‪<html‬‬
‫ﺗﻮﺟﻪ ﮐﻨﯿﺪ‪:‬‬
‫‪62‬‬
‫>‪<head‬‬ ‫‪8‬‬
‫>‪<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 ،‬ﯾﮑﺴﺎﻧﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ .‬اﯾﻦ ﺳﺮﯾﻌﺘﺮﯾﻦ و راﯾﺠﺘﺮﯾﻦ راه ﺑﺮاي دﺳﺘﺮﺳﯽ‬
‫ﺑﻪ ﻋﻨﺼﺮي ﺧﺎص از ﺻﻔﺤﻪ اﺳﺖ‪ .‬ﺑﻪ ﮐﺪ زﯾﺮ ﻧﮕﺎه ﮐﻨﯿﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>DOM Example</title‬‬
‫>‪</head‬‬

‫‪63‬‬
‫>‪<body‬‬
‫>‪<p>Hello World!</p‬‬
‫>‪<div id=”div1”>This is my first layer</div‬‬
‫‪8‬‬ ‫>‪</body‬‬
‫>‪</html‬‬

‫ﭼﻨﺎﻧﭽﻪ ﺑﺨﻮاﻫﯿﻢ از ﻣﺘﺪ )(‪ .getElementsByTagName‬ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺼﺮ ‪ div‬اﯾﻦ ﺻﻔﺤﻪ ﺑﺎ ﺷﻨﺎﺳﻪ ‪ div1‬اﺳﺘﻔﺎده‬
‫ﮐﻨﯿﻢ ﺑﺎﯾﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﻢ‪:‬‬
‫;)”‪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‬‬ ‫‪‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫‪ DOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬

‫)(‪ createTextNode() ،appendChild‬و )(‪createElement‬‬

‫ﻓﺮض ﮐﻨﯿﺪ ﺗﮑﻪ ﮐﺪ زﯾﺮ را دارﯾﻢ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫‪64‬‬
‫>‪<title>createElement() Example</title‬‬ ‫‪8‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﺣﺎل ﻣﯽ ﺧﻮاﻫﯿﻢ ﻋﺒﺎرت زﯾﺮ را در اﯾﻦ ﺻﻔﺤﻪ ﭼﺎپ ﮐﻨﯿﻢ‪:‬‬

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

‫اوﻟﯿﻦ ﮐﺎر اﯾﺠﺎد ﯾﮏ ﻋﻨﺼﺮ >‪ <p‬اﺳﺖ‪.‬‬

‫;)”‪var oP = document.createElement(“p‬‬

‫ﺣﺎل ﯾﮏ ﻣﺘﻦ ﺳﺎده اﯾﺠﺎد ﻣﯽ ﮐﻨﯿﻢ‪:‬‬

‫;)”!‪var oText = document.createTextNode(“Hello World‬‬

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

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

‫ﻧﮑﺘﻪ‪ :‬ﮔﺮه ﻫﺎي ﻋﻨﺼﺮي از ﺧﺎﺻﯿﺘﯽ ﺧﻮاﻧﺪﻧﯽ‪/‬ﻧﻮﺷﺘﻨﯽ ﺑﻪ ﻧﺎم ‪ .innerHTML‬ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ و ﺗﻐﯿﯿﺮ‬ ‫‪‬‬
‫ﻣﺤﺘﻮاي ﯾﮏ ﻋﻨﺼﺮ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪ .‬اﯾﻦ ﺧﺎﺻﯿﺖ ﺟﺰ اﺳﺘﺎﻧﺪاردﻫﺎي ‪ W3C‬ﻧﻤﯽ ﺑﺎﺷﺪ اﻣﺎ ﺗﻤﺎﻣﯽ‬
‫ﻣﺮورﮔﺮﻫﺎ از آن ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪ .‬ﻓﺮض ﮐﻨﯿﺪ ﺗﮓ زﯾﺮ را در ﺻﻔﺤﻪ دارﯾﻢ‪:‬‬

‫>‪<p id=”intro”>Hello World!</p‬‬

‫اﺟﺮاي دﺳﺘﻮر زﯾﺮ ﻣﻮﺟﺐ ﻧﻤﺎﯾﺶ ﭘﯿﻐﺎم !‪ Hello World‬ﯾﻌﻨﯽ ﻫﻤﺎن ﻣﺤﺘﻮاي ﺗﮓ >‪ <p‬ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬
‫;‪txt=document.getElementById(‘intro’).innerHTML‬‬
‫!‪alert(txt);// Hello World‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﺑﺎ ﻧﺴﺒﺖ دادن ﻣﻘﺪاري ﺟﺪﯾﺪ ﺑﻪ اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﺎ اﺳﺘﻔﺎده از ﻋﻼﻣﺖ اﻧﺘﺴﺎب ﻣﯽ ﺗﻮاﻧﯿﻢ ﻣﺤﺘﻮاي ﯾﮏ ﺗﮓ را ﺗﻐﯿﯿﺮ دﻫﯿﻢ‪:‬‬
‫;)’‪Var myPara=document.getElementById(‘intro‬‬
‫;”>‪myPara.innerHTML=”Click <a href=’#’>Here</a‬‬

‫‪65‬‬ ‫ﺗﮓ >‪ <p‬ﺑﻪ ﺻﻮرت زﯾﺮ درﺧﻮاﻫﺪ آﻣﺪ‪ .‬زﯾﺮا ﺧﺎﺻﯿﺖ ‪ .innerHTML‬ﻣﺤﺘﻮاي ﺗﮓ را ﺑﻪ ﺻﻮرت ﮐﺎﻣﻞ ﺑﺎ ﻣﻘﺪار ﺟﺪﯾﺪ ﺟﺎﯾﮕﺮﯾﻦ‬
‫‪8‬‬ ‫ﻣﯽ ﮐﻨﺪ‪.‬‬
‫>‪<p id=”intro”>Click <a href=’#’>Here</a></p‬‬

‫)(‪replaceChild() ،removeChild‬و )(‪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‬‬
‫ﺑﻪ ﻣﺤﺾ اﯾﻨﮑﻪ ﺗﻌﺪادي ﮔﺮه ﺟﺪﯾﺪ ﺑﻪ ﺳﻨﺪ اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﯿﻢ ﺻﻔﺤﻪ ﺑﺮاي ﻧﻤﺎﯾﺶ ﺗﻐﯿﯿﺮات‪ ،‬ﺑﻪ روزرﺳﺎﻧﯽ ﻣﯽ ﺷﻮد‪ .‬اﯾﻦ رﻓﺘﺎر ﺑﺮاي‬
‫ﺗﻌﺪاد ﺗﻐﯿﯿﺮات ﮐﻢ ﻣﻨﺎﺳﺐ اﺳﺖ‪ .‬اﻣﺎ ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻐﯿﯿﺮات زﯾﺎد ﺑﺎﺷﺪ و ﺻﻔﺤﻪ ﺑﺨﻮاﻫﺪ اﯾﻦ رﻓﺘﺎر را ﺑﺮاي ﺗﮏ ﺗﮏ ﺗﻐﯿﯿﺮات ﺗﮑﺮار‬
‫ﮐﻨﺪ ﻣﻤﮑﻦ اﺳﺖ ﻣﻮﺟﺐ ﮐﻨﺪي در ﻋﻤﻠﮑﺮد ﻣﺮورﮔﺮ ﺷﻮد‪.‬‬
‫ﺑﺮاي رﻓﻊ اﯾﻦ ﻣﺸﮑﻞ ﻣﯽ ﺗﻮاﻧﯿﺪ از ﯾﮏ ﺗﮑﻪ ﺑﺮﻧﺎﻣﻪ ‪ 1‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬ﻣﯽ ﺗﻮاﻧﯿﺪ ﺗﻤﺎم ﮔﺮهﻫﺎي ﺟﺪﯾﺪ را ﺑﻪ ﺗﮑﻪ ﺑﺮﻧﺎﻣﻪ اﺿﺎﻓﻪ ﮐﺮده و‬
‫ﺳﭙﺲ آن را در ﺻﻔﺤﻪ اﺻﻠﯽ ﻗﺮار دﻫﯿﺪ‪ .‬ﻓﺮض ﮐﻨﯿﺪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﭼﻨﺪﯾﻦ ﭘﺎراﮔﺮاف را در ﺻﻔﺤﻪ اﯾﺠﺎد ﮐﻨﯿﻢ‪ .‬در ﺻﻮرت اﺳﺘﻔﺎده از‬
‫روش ﻫﺎي ﻗﺒﻠﯽ اﯾﻦ اﻣﺮ ﻣﻮﺟﺐ رﻓﺮش ﻫﺮ ﺑﺎره ﺻﻔﺤﻪ ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
‫اﻣﺎ ﺑﻬﺘﺮ اﺳﺖ ﺑﻪ روش زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﻢ‪:‬‬

‫‪1‬‬
‫‪documentFragment‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫‪ DOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬

‫‪var arrText = [“first”, “second”, “third”, “fourth”, “fifth”,‬‬

‫;]”‪“sixth‬‬

‫‪66‬‬
‫;)(‪var oFragment = document.createDocumentFragment‬‬
‫{ )‪for (var i=0; i < arrText.length; i++‬‬
‫;)”‪var oP = document.createElement(“p‬‬
‫;)]‪var oText = document.createTextNode(arrText[i‬‬ ‫‪8‬‬
‫;)‪oP.appendChild(oText‬‬
‫;)‪oFragment.appendChild(oP‬‬
‫}‬
‫;)‪document.body.appendChild(oFragment‬‬

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

‫ﯾﮑﯽ از وﯾﮋﮔﯽ ﻫﺎي ‪ 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‬‬

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

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

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫دﺳﺘﮑﺎري ﻗﻮاﻋﺪ ﺳﺒﮏ ﻋﻨﺎﺻﺮ‬
‫ﮔﺮه ﻫﺎي ﻋﻨﺼﺮي از ﺷﯽ اي ﺑﻪ ﻧﺎم ‪ style‬ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻗﻮاﻋﺪ ﺳﺒﮏ ﺗﻌﺮﯾﻒ ﺷﺪه ﺑﺮاي ﺗﮓ ﻫﺎ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪.‬‬
‫ﺳﯿﻨﺘﮑﺲ ﮐﻠﯽ اﺳﺘﻔﺎده از اﯾﻦ ﺷﯽ ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺖ‪:‬‬
‫‪67‬‬ ‫;”‪document.getElementById(‘id’).style.property=”newValue‬‬

‫‪8‬‬
‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻓﺮاﺧﻮاﻧﯽ دﺳﺘﻮر زﯾﺮ ﻣﻮﺟﺐ ﺗﻐﯿﯿﺮ رﻧﮓ ﻣﺘﻦ ﻋﻨﺼﺮي ﺑﺎ ‪ id‬ﺑﺮاﺑﺮ ‪ intro‬ﺑﻪ رﻧﮓ ﻗﺮﻣﺰ ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬
‫;”‪document.getElementById(‘intro’).style.color=”red‬‬

‫در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻣﻨﻈﻮر دﺳﺘﺮﺳﯽ ﺑﻪ آن دﺳﺘﻪ از ﻗﻮاﻋﺪي ﮐﻪ ﺷﺎﻣﻞ ﮐﺎراﮐﺘﺮ – ﻫﺴﺘﻨﺪ ﻣﯽ ﺑﺎﯾﺴﺖ اﺑﺘﺪا ﮐﺎراﮐﺘﺮ – را ﺣﺬف ﮐﺮده‬
‫و اوﻟﯿﻦ ﺣﺮف ﮐﻠﻤﻪ ﻫﺎي ﺑﻌﺪ از آن را ﺑﻪ ﺻﻮرت ﺑﺰرگ ﺑﻨﻮﯾﺴﯿﻢ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‪ ،‬ﮐﺪ زﯾﺮ ﻣﻮﺟﺐ ﺗﻐﯿﯿﺮ رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ ﻋﻨﺼﺮ ﺑﻪ‬
‫آﺑﯽ ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬
‫;”‪document.getElementById(‘intro’).style.backgroundColor=”blue‬‬

‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎﻟﯽ دﯾﮕﺮ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻗﻮاﻋﺪي ﻫﻤﭽﻮن ‪ border-top-width‬و ‪ padding-bottom‬ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﻪ ﺗﺮﺗﯿﺐ از‬
‫ﻧﺎم ﻫﺎي ‪ borderTopWidth‬و ‪ paddingBottom‬اﺳﺘﻔﺎده ﻧﻤﻮد‪.‬‬

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

‫ﻓﺮض ﮐﻨﯿﺪ ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﺟﺪول زﯾﺮ را ﺑﻪ ﺻﻮرت ﭘﻮﯾﺎ و ﺑﺎ اﺳﺘﻔﺎده از ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﯾﺠﺎد ﮐﻨﯿﻢ‪:‬‬
‫>”‪<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‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ ﮐﺪ ﻣﺎ ﺑﻪ ﺻﻮرت ذﯾﻞ ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ و ﮔﺎﻫﯽ اوﻗﺎت‬
‫ﺳﺮدرﮔﻢ ﮐﻨﻨﺪه ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ ؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬DOM

//create the table

var oTable = document.createElement(“table”);

68
oTable.setAttribute(“border”, “1”);
oTable.setAttribute(“width”, “100%”);

//create the tbody 8

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

table, tody, ‫ ﯾﮑﺴﺮي ﺧﺎﺻﯿﺖ ﻫﺎ و ﻣﺘﺪ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮدي ﺑﺮاي ﻋﻨﺎﺻﺮ اﺻﻠﯽ ﺟﺪاول ﻫﻤﭽﻮن‬DOM ‫ﺑﺮاي آﺳﺎﻧﯽ اﯾﻨﮑﺎر‬
.‫ اﯾﺠﺎد ﮐﺮده اﺳﺖ‬tr
:‫ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﺟﺪول ﺑﻪ ﺷﺮح زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ‬
(.‫ )اﻟﺒﺘﻪ اﮔﺮ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‬.‫ ﺟﺪول دارد‬caption ‫ اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ‬:caption 
tbody ‫ ﻣﺠﻤﻮﻋﻪ )آراﯾﻪ( اي از ﻋﻨﺎﺻﺮ‬:tBodies 
‫ ﺟﺪول‬tfoot ‫ اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ‬:tFoot 
‫ ﺟﺪول‬thead ‫ اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ‬:tHead 
‫ ﻣﺠﻤﻮﻋﻪ اي از ﺗﻤﺎم ردﯾﻒ ﻫﺎي ﺟﺪول‬:Rows 
‫ در ﺟﺪول‬thead ‫ اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ‬:createThead() 
‫ در ﺟﺪول‬tfoot ‫ اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ‬:createTfoot() 
‫ در ﺟﺪول‬caption ‫ اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ‬:createCaption() 
‫ از ﺟﺪول‬thead ‫ ﺣﺬف ﻋﻨﺼﺮ‬:deleteThead() 

1stwebdesigner.ir
www.ParsBook.org
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ از ﺟﺪول‬tfoot ‫ ﺣﺬف ﻋﻨﺼﺮ‬:deleteTfoot() 
‫ از ﺟﺪول‬Caption ‫ ﺣﺬف ﻋﻨﺼﺮ‬:deleteCaption() 
‫ ﻗﺮار دارد‬position ‫ ﺣﺬف ردﯾﻔﯽ از ﺟﺪول ﮐﻪ در ﻣﻮﻗﻌﯿﺖ‬:deleteRow(position) 

69
position ‫ ﻗﺮار دادن ردﯾﻔﯽ در ﻣﻮﻗﻌﯿﺖ‬:insertRow(position) 

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

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

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

‫ ﻣﺠﻤﻮﻋﻪ اي از ﺳﻠﻮ ل ﻫﺎ در ﯾﮏ ردﯾﻒ‬:Cells 
position ‫ ﺣﺬف ﺳﻠﻮﻟﯽ در ﻣﻮﻗﻌﯿﺖ‬:deleteCell(position) 
.‫ ﻣﺠﻤﻮﻋﻪ اي از ﺳﻠﻮل ﻫﺎ‬position ‫ ﻗﺮار دادن ﺳﻠﻮﻟﯽ در ﻣﻮﻗﻌﯿﺖ‬:insertCell(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);

1stwebdesigner.ir
www.ParsBook.org
1stwebdesigner.ir
www.ParsBook.org
 ‫ﻓﺼﻞ ﻧﻪ‬

‫ﮐﺎرﺑﺎﻓﺮﻣﻬﺎوﻋﻨﺎﺻﺮﻓﺮم‬

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

‫‪1‬‬
‫‪Form validation‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬

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

‫ﯾﮏ ﻓﺮم در ﺻﻔﺤﻪ ﺑﻮﺳﯿﻠﻪ ﺗﮓ ‪ form‬ﮐﻪ داراي ﺻﻔﺖ ﻫﺎي زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ اﯾﺠﺎد ﻣﯽ ﺷﻮد‪:‬‬
‫‪ :method‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﻣﺮورﮔﺮ از ﭼﻪ روﺷﯽ ﺑﺮاي ارﺳﺎل داده ﻫﺎي ﻓﺮم اﺳﺘﻔﺎده ﮐﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﯾﮑﯽ از دو‬ ‫‪‬‬ ‫‪72‬‬
‫ﻣﻘﺪار ‪ GET‬و ‪ POST‬را ﺑﭙﺬﯾﺮد‪.‬‬
‫‪1‬‬ ‫‪9‬‬
‫‪ :action‬ﻓﺮم ﻫﺎ ﭘﺲ از ارﺳﺎل ﺑﺎﯾﺪ ﺑﻪ ﯾﮏ ﺻﻔﺤﻪ ﭘﺮدازﺷﮕﺮ ﮐﻪ اﻟﺒﺘﻪ ﺑﻪ ﯾﮑﯽ از زﺑﺎن ﻫﺎي ﺗﺤﺖ ﺳﺮور ﻧﻮﺷﺘﻪ ﻣﯽ‬ ‫‪‬‬
‫ﺷﻮﻧﺪ ﻫﺪاﯾﺖ ﺷﻮﻧﺪ‪ .‬اﯾﻦ ﺻﻔﺖ آدرس ﺻﻔﺤﻪ ﭘﺮدازﺷﮕﺮ ﻓﺮم را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫‪ :enctype‬ﻧﻮع رﻣﺰ ﮔﺬاري‪ 2‬داده ﻫﺎي ﻓﺮم را ﻫﻨﮕﺎم ارﺳﺎل ﻣﺸﺨﺺ ﻣﯽﮐﻨﺪ ﮐﻪ در ﺣﺎﻟﺖ ﭘﯿﺶ ﻓﺮض ﺑﺮاﺑﺮ‬ ‫‪‬‬
‫‪ application/x-url-encoded‬اﺳﺖ‪ .‬اﻣﺎ در ﺣﺎﻟﺘﯽ ﮐﻪ داﺧﻞ ﻓﺮم ﺧﻮد ﻋﻨﺼﺮي از ﻧﻮع ‪ file‬ﮐﻪ ﮐﺎرﺑﺮان را ﻗﺎدر ﺑﻪ‬
‫آﭘﻠﻮد ﻓﺎﯾﻞ ﻫﺎ ﻣﯽ ﮐﻨﺪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ ﺑﺎﯾﺪ آن را ﺑﺮاﺑﺮ ‪ multipart/form-data‬ﻗﺮار دﻫﯿﻢ‪.‬‬
‫‪ :accept‬ﻟﯿﺴﺘﯽ از ‪ MIME type‬ﻓﺎﯾﻞ ﻫﺎﯾﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻣﺠﺎز ﺑﻪ آﭘﻠﻮد آن ﻫﺎ ﻣﯽ ﺑﺎﺷﺪ را ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪‬‬
‫‪ :accept-charset‬ﻟﯿﺴﺘﯽ از ﻣﺠﻤﻮﻋﻪ ﮐﺎراﮐﺘﺮﻫﺎﯾﯽ را ﮐﻪ ﺳﺮور ﺑﺎﯾﺪ در ﻫﻨﮕﺎم درﯾﺎﻓﺖ اﻃﻼﻋﺎت اﺳﺘﻔﺎده ﮐﻨﺪ‪ ،‬ﻣﺸﺨﺺ‬ ‫‪‬‬
‫ﻣﯽ ﮐﻨﺪ‪.‬‬

‫ﻧﻮﺷﺘﻦ اﺳﮑﺮﯾﭙﺖ ﻫﺎ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ ﻓﺮم‬

‫ﮐﺪﻧﻮﯾﺴﯽ ﺑﺮاي ﻋﻨﺎﺻﺮ ﻓﺮم ﻧﺴﺒﺖ ﺑﻪ ﺳﺎﯾﺮ ﻋﻨﺎﺻﺮ ﮐﻤﯽ ﻣﺘﻔﺎوت اﺳﺖ‪.‬‬

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

‫ﻗﺒﻞ از ﺳﺮ و ﮐﺎر داﺷﺘﻦ ﺑﺎ ﻋﻨﺎﺻﺮ ‪ 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‬ﮐﻪ ﯾﮑﯽ از ﺧﺎﺻﯿﺖ‬
‫ﻫﺎي ﯾﮏ ﺷﯽ از ﻧﻮع ﻓﺮم ﻣﯽ ﺑﺎﺷﺪ ﻗﺎﺑﻞ دﺳﺘﺮﺳﯽ اﺳﺖ‪.‬‬
‫ﻣﯽ ﺗﻮاﻧﯿﺪ از اﯾﻦ آراﯾﻪ و ﺑﺎ اﺳﺘﻔﺎده از اﻧﺪﯾﺲ ﻋﺪدي ﯾﺎ اﺳﻤﯽ ﻣﻮرد ﻧﻈﺮ ﺑﻪ ﻋﻨﺎﺻﺮ ﻣﺨﺘﻠﻒ ﻓﺮم دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﺪ‪.‬‬

‫‪1‬‬
‫‪Server side‬‬
‫‪2‬‬
‫‪Encoding‬‬
‫‪3‬‬
‫‪reference‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫‪var oFirstField = oForm.elements[0] ; // get the first form field‬‬
‫‪var oTextbox1 = oForm.elements["textbox1"] ; // get the field with the‬‬
‫‪name‬‬ ‫"‪"textbox1‬‬

‫‪73‬‬ ‫ﺧﻂ اول از ﮐﺪ ﺑﺎﻻ ﻣﺘﻐﯿﺮي را ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ اوﻟﯿﻦ ﻋﻨﺼﺮ از ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم ‪ oForm‬اﺷﺎره ﻣﯽ ﮐﻨﺪ‪.‬‬
‫ﺧﻂ دوم ﻧﯿﺰ ﻣﺘﻐﯿﺮي را ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ ﻋﻨﺼﺮي ﺑﻪ ﻧﺎم ‪ textbox1‬از ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم ‪ oForm‬اﺷﺎره ﻣﯽ ﮐﻨﺪ‪.‬‬
‫‪9‬‬
‫ﯾﮏ روش دﯾﮕﺮ )ﮐﻪ اﺻﻄﻼﺣﺎ ﺑﻪ آن روش ﻣﯿﺎﻧﺒﺮ ﻣﯽ ﮔﻮﯾﻨﺪ( ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮي ﮐﻪ ﻧﺎم ﻣﺸﺨﺼﯽ دارﻧﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‬
‫ﺑﻪ ﺷﮑﻞ زﯾﺮ اﺳﺖ‪:‬‬
‫;‪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‬اﯾﻦ ﻣﺘﺪ ﻣﻮﺟﺐ ﻣﯽ ﺷﻮد ﺗﻤﺮﮐﺰ‪ 1‬ﺻﻔﺤﻪ ﺑﺮ روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﻗﺮار ﮔﯿﺮد‪.‬‬ ‫‪‬‬
‫ﻣﺘﺪ )(‪ :blur‬اﯾﻦ ﻣﺘﺪ ﻋﮑﺲ ﻣﺘﺪ ﺑﺎﻻ اﺳﺖ و ﻣﻮﺟﺐ ﻣﯽ ﺷﻮد ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺧﺎرج ﺷﻮد‪.‬‬ ‫‪‬‬
‫روﯾﺪاد ‪ :blur‬اﯾﻦ روﯾﺪاد ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺧﺎرج ﺷﻮد رخ ﻣﯽ دﻫﺪ‪.‬‬ ‫‪‬‬
‫‪ ‬روﯾﺪاد ‪ :focus‬ﻋﮑﺲ روﯾﺪاد ﺑﺎﻻ ﻋﻤﻞ ﻣﯽ ﮐﻨﺪ و ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺑﺮ روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﻗﺮار ﺑﮕﯿﺮد رخ ﻣﯽ دﻫﺪ‪.‬‬
‫ﺑﺮاي ﻣﺜﺎل‪:‬‬

‫‪1‬‬
‫‪focus‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬

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

‫;]‪var oField2 = oForm.elements[1‬‬

‫‪//set the first field to be disabled‬‬

‫;‪oField1.disabled = true‬‬
‫‪74‬‬
‫‪9‬‬
‫‪//set the focus to the second field‬‬
‫;)(‪oField2.focus‬‬

‫?‪//is the form property equal to oForm‬‬

‫"‪alert(oField1.form == oForm); //outputs "true‬‬

‫ﻧﮑﺘﻪ‪ :‬ﻋﻨﺎﺻﺮ از ﻧﻮع ‪ hidden‬ﻓﻘﻂ از ﺧﺎﺻﯿﺖ ‪ form‬ﮐﻪ در ﺑﺎﻻ ذﮐﺮ ﺷﺪ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪‬‬
‫ارﺳﺎل ﻓﺮم ﺑﻮﺳﯿﻠﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫در ‪ 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‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ارﺳﺎل ‪ form‬ﻓﻘﻂ ﯾﮑﺒﺎر !‬
‫ﯾﮑﯽ از ﻣﺸﮑﻼﺗﯽ ﮐﻪ ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن در ﻓﺮم ﻫﺎ ﺑﺎ آن روﺑﺮو ﻫﺴﺘﻨﺪ اﯾﻦ اﺳﺖ ﮐﻪ ﺑﺴﯿﺎري از ﮐﺎرﺑﺮان ﺑﺮاي اﻃﻤﯿﻨﺎن از اﯾﻨﮑﻪ ﻓﺮم‬
‫ﺑﻪ درﺳﺘﯽ ارﺳﺎل ﺷﻮد ﭼﻨﺪﯾﻦ ﺑﺎر ﺑﺮ روي دﮐﻤﻪ ‪ submit‬ﮐﻠﯿﮏ ﻣﯽ ﮐﻨﻨﺪ‪ .‬ﻣﺸﮑﻠﯽ ﮐﻪ در اﯾﻨﺠﺎ ﻫﺴﺖ اﯾﻦ اﺳﺖ ﮐﻪ ﺑﻪ ازاي ﻫﺮ‬

‫‪75‬‬ ‫ﺑﺎر ﮐﻠﯿﮏ ﮐﺎرﺑﺮ ﺑﺮ روي دﮐﻤﻪ ﯾﮏ درﺧﻮاﺳﺖ اﺿﺎﻓﯽ ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﯽ ﺷﻮد‪.‬‬
‫راه ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ ﺑﺴﯿﺎر ﺳﺎده اﺳﺖ‪ :‬ﺑﻌﺪ از اﯾﻨﮑﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ را ﮐﻠﯿﮏ ﮐﺮد‪ ،‬آن را ﻏﯿﺮ ﻓﻌﺎل‪ 1‬ﻣﯽ ﮐﻨﯿﻢ‪.‬‬
‫‪9‬‬
‫ﺑﺮاي اﻧﺠﺎم اﯾﻦ ﮐﺎر ﻣﯽ ﺗﻮان ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده از دﮐﻤﻪ ‪ 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‬‬
‫>‪/‬‬

‫ﮐﺎر ﺑﺎ ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ‬

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

‫و ﭼﻨﺪ ﺧﻄﯽ‪:‬‬
‫>‪<textarea>Content</textarea‬‬

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

‫‪1‬‬
‫‪disabled‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬

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

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

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

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

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

‫اﻧﺘﺨﺎب ﻣﺘﻦ ﻫﺎي داﺧﻞ ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ‬

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

‫روﯾﺪاد ﻫﺎي ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ‬

‫ﻫﺮ دو ﻧﻮع ﻓﯿﻠﺪ ﺑﺎﻻ ﻋﻼوه ﺑﺮ ﭘﺸﺘﯿﺒﺎﻧﯽ از روﯾﺪاد ﻫﺎي ‪ blur‬و ‪ focus‬از دو روﯾﺪاد ﺟﺪﯾﺪ ﺑﻪ ﻧﺎم ﻫﺎي ‪ change‬و ‪ select‬ﻧﯿﺰ‬
‫ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪.‬‬
‫‪ :change‬اﯾﻦ روﯾﺪاد وﻗﺘﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﺑﻌﺪ از ﺗﻐﯿﯿﺮ ﻣﺘﻦ داﺧﻞ ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ‪ ،‬آن ﻫﺎ را از ﺣﺎﻟﺖ ﺗﻤﺮﮐﺰ‬ ‫‪‬‬
‫ﺻﻔﺤﻪ ﺧﺎرج ﮐﻨﺪ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫‪ :select ‬اﯾﻦ روﯾﺪاد وﻗﺘﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﯾﮏ ﯾﺎ ﭼﻨﺪ ﮐﺎراﮐﺘﺮ از رﺷﺘﻪ ﻫﺎي داﺧﻞ ﯾﮏ ﮐﺎدر ﻣﺘﻨﯽ ﭼﻪ ﺑﻪ ﺻﻮرت دﺳﺘﯽ‬
‫ﯾﺎ ﺗﻮﺳﻂ ﻣﺘﺪ )(‪ .select‬اﻧﺘﺨﺎب ﺷﻮﻧﺪ‪.‬‬
‫ﺗﻔﺎوت روﯾﺪاد ﻫﺎي ‪ change‬و ‪ blur‬اﯾﻦ اﺳﺖ ﮐﻪ روﯾﺪاد ‪ blur‬ﺗﻨﻬﺎ زﻣﺎﻧﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ‬

‫‪77‬‬ ‫ﺧﺎرج ﺷﻮد و روﯾﺪاد ‪ change‬ﻧﯿﺰ وﻗﺘﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻋﻼوه ﺑﺮ ﺗﻐﯿﯿﺮ ﻣﺘﻦ داﺧﻞ ‪textarea‬ﻫﺎ ‪ ،‬ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﻧﯿﺰ از آن ﻫﺎ ﺧﺎرج‬
‫ﻣﯽ ﺷﻮد‪.‬‬
‫‪9‬‬
‫اﮔﺮ ﻣﺘﻦ داﺧﻞ ﮐﺎدر ﻣﺘﻨﯽ ﺛﺎﺑﺖ ﺑﺎﺷﺪ و ﻓﻘﻂ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از ﻋﻨﺼﺮ ﺑﺮود ‪ blur‬رخ ﻣﯽ دﻫﺪ اﻣﺎ اﮔﺮ ﻣﺘﻦ ﻫﻢ ﺗﻐﯿﯿﺮ ﮐﺮده ﺑﺎﺷﺪ اﺑﺘﺪا‬
‫روﯾﺪاد ‪ change‬و ﺑﻪ دﻧﺒﺎل آن ‪ blur‬رخ ﺧﻮاﻫﺪ داد‪.‬‬

‫اﻧﺘﺨﺎب ﺧﻮدﮐﺎر ﻣﺘﻦ درون ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ‬

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

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

‫ﺑﻌﺪ از ﺗﮑﻤﯿﻞ ﮐﺎدر ﻫﺎي ﻣﺘﻨﯽ ﮐﻪ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮﻫﺎي ﻣﺸﺨﺼﯽ را ﻣﯽ ﭘﺬﯾﺮﻧﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﮐﻨﺘﺮل )ﺗﻤﺮﮐﺰ( ﺻﻔﺤﻪ را ﺑﻪ دﯾﮕﺮ ﻋﻨﺎﺻﺮ‬
‫ﺻﻔﺤﻪ ﻣﻨﺘﻘﻞ ﮐﻨﯿﺪ‪.‬‬
‫ﺑﺮاي اﯾﻦ ﮐﺎر ﻣﯽ ﺗﻮاﻧﯿﻢ از ﺻﻔﺖ ‪ maxlength‬در ﺗﮓ ﻫﺎي >‪ <input /‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪:‬‬
‫>‪<input type="text" maxlength="4" /‬‬

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

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬

‫{)‪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‬‬
‫‪78‬‬
‫{ ))"‪&& oTextbox.value.length == oTextbox.getAttribute("maxlength‬‬ ‫‪9‬‬
‫{ )‪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‬‬
‫}‬

‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ ﺑﯿﻨﯿﺪ اﯾﻦ ﺗﺎﺑﻊ ﺑﺴﯿﺎر ﺳﺎده اﺳﺖ‪ .‬ﻓﻘﻂ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮﻫﺎي وارد ﺷﺪه در ﮐﺎدر ﻣﺘﻨﯽ را ﺑﺎ ﺻﻔﺖ ‪ maxlength‬ﻋﻨﺼﺮ‬
‫ﻣﻮرد ﻧﻈﺮ ﻣﻘﺎﯾﺴﻪ ﻣﯽ ﮐﻨﺪ و در ﺻﻮرﺗﯽ ﮐﻪ ﺑﺮاﺑﺮ ﻧﺒﺎﺷﺪ ‪ true‬و در ﻏﯿﺮ اﯾﻨﺼﻮرت ‪ false‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﺻﻔﺖ ‪ maxlength‬ﺑﺮاي ‪ textarea‬ﺻﻔﺘﯽ ﻏﯿﺮ اﺳﺘﺎﻧﺪارد اﺳﺖ اﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﻮﺳﻂ ﻣﺘﺪ )(‪.getAttribute‬‬
‫ﻣﻘﺪار آن را ﺑﺪﺳﺖ آورﯾﻢ‪.‬‬
‫در ﻣﺮﺣﻠﻪ ﺑﻌﺪ ﺑﺎﯾﺪ اﯾﻦ ﺗﺎﺑﻊ را در روﯾﺪاد ‪ onKeyPress‬ﻋﻨﺼﺮﻣﺎن ﻓﺮاﺧﻮاﻧﯽ ﮐﻨﯿﻢ‪ .‬اﯾﻦ روﯾﺪاد ﻗﺒﻞ از وارد ﮐﺮدن ﻫﺮ ﮐﺎراﮐﺘﺮ رخ‬
‫ﺧﻮاﻫﺪ داد ﮐﻪ دﻗﯿﻘﺎ زﻣﺎﻧﯽ اﺳﺖ ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ ﺣﺪاﮐﺜﺮ رﺳﯿﺪن ﺗﻌﺪاد ﮐﺎرﮐﺘﺮ ﻫﺎي ورودي را ﭼﮏ ﮐﻨﯿﻢ‪ .‬ﭼﯿﺰي ﻣﺎﻧﻨﺪ ﮐﺪ زﯾﺮ‪:‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫‪<textarea rows='10' cols='25' maxlength='150' onKeyPress='return‬‬
‫>‪isNotMax(this)'></textarea‬‬

‫ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ ﻣﻘﺪار ﺑﺮﮔﺸﺘﯽ از ﺗﺎﺑﻊ ﺑﻪ ﮐﻨﺘﺮل ﮐﻨﻨﺪهي روﯾﺪاد ‪ onKeyPress‬ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد‪ .‬اﻟﺒﺘﻪ اﯾﻦ ﺷﯿﻮه از راه ﻫﺎي‬
‫‪79‬‬ ‫ﻗﺪﯾﻤﯽ ﮐﻨﺘﺮل رﻓﺘﺎر ﭘﯿﺶ ﻓﺮض ﯾﮏ روﯾﺪاد اﺳﺖ‪.‬‬
‫‪9‬‬ ‫ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي از ‪ 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‬آراﯾﻪ اي ﺑﻪ ﻧﺎم ‪ options‬ﮐﻪ ﻫﺮ ﺧﺎﻧﻪ آن اﺷﺎره ﺑﻪ ‪option‬ي از آن ﻋﻨﺼﺮ دارد ﺗﻌﺮﯾﻒ ﮐﺮده‬
‫اﺳﺖ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬

‫ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺮاي ﻧﻤﺎﯾﺶ ﻣﺘﻦ )ﻋﻨﻮان( ﻫﺮ ‪ option‬و ﻣﻘﺪار ﺻﻔﺖ ‪ value‬آن ﻫﺎ از روش ﻫﺎي ﻗﺒﻠﯽ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ .‬ﻣﺜﻼ‪:‬‬
‫‪alert(oListbox.options[1].text); //output display text‬‬
‫‪alert(oListbox.options[1].value); //output value‬‬
‫‪80‬‬
‫ﻋﻼوه ﺑﺮ اﯾﻦ‪ ،‬ﻫﺮ ‪ option‬داراي ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ index‬اﺳﺖ ﮐﻪ در واﻗﻊ ﻣﻮﻗﻌﯿﺖ آن را در آراﯾﻪ ‪ options‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪9‬‬
‫"‪alert(oListbox.options[1].index); //outputs "1‬‬

‫اﻟﺒﺘﻪ ﭼﻮن ‪ options‬ﯾﮏ آراﯾﻪ اﺳﺖ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ length‬ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﺗﻌﺪاد ﮐﻞ ‪option‬ﻫﺎي ‪select‬‬
‫اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪.‬‬
‫;)”‪alert(“There are “ + oListbox.options.length + “ in the list.‬‬

‫اﻣﺎ ﺣﺎل از ﮐﺠﺎ ﺑﻔﻬﻤﯿﻢ ﮐﻪ ﮐﺪام ‪) option‬آﯾﺘﻢ( ﺗﻮﺳﻂ ﮐﺎرﺑﺮ اﻧﺘﺨﺎب ﺷﺪه اﺳﺖ؟‬

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

‫ﻋﻨﺼﺮ ‪ select‬داراي ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ selectedIndex‬اﺳﺖ ﮐﻪ ‪ index‬آﯾﺘﻢ اﻧﺘﺨﺎب ﺷﺪه را ﻧﮕﻪ داري ﻣﯽ ﮐﻨﺪ و در ﺻﻮرﺗﯽ ﮐﻪ‬
‫ﻫﯿﭻ آﯾﺘﻤﯽ اﻧﺘﺨﺎب ﻧﺸﺪه ﺑﺎﺷﺪ ﻣﻘﺪار ‪ -1‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬
‫‪alert(“The index of the selected option is “ +‬‬
‫;)‪oListbox.selectedIndex‬‬

‫اﻣﺎ ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ داﻧﯿﺪ ﺑﺎ اﺿﺎﻓﻪ ﮐﺮدن ﺻﻔﺘﯽ ﻣﺎﻧﻨﺪ '‪ multiple='multiple‬ﺑﻪ ﻋﻨﺼﺮ ‪ select‬اﻣﮑﺎن اﻧﺘﺨﺎب ﺑﯿﺶ از ﯾﮏ آﯾﺘﻢ‬
‫در آنِ واﺣﺪ اﻣﮑﺎن ﭘﺬﯾﺮ اﺳﺖ‪ .‬در اﯾﻦ ﺻﻮرت ﺧﺎﺻﯿﺖ ‪ selectedIndex‬ﺣﺎوي اوﻟﯿﻦ ﻋﻨﺼﺮ اﻧﺘﺨﺎب ﺷﺪه از ‪ list‬ﺧﻮاﻫﺪ ﺑﻮد و اﯾﻦ‬
‫ﮐﻤﮑﯽ ﺑﻪ ﻣﺎ ﻧﻤﯽ ﮐﻨﺪ‪.‬ﭼﻮن ‪ 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‬‬
‫;}‬

‫از اﯾﻦ ﺗﺎﺑﻊ ﻣﯽ ﺗﻮان ﻫﻢ ﺑﺮاي ﺑﺪﺳﺖ آوردن آﯾﺘﻢ ﻫﺎي اﻧﺘﺨﺎب ﺷﺪه و ﻫﻢ ﺗﻌﺪاد آن ﻫﺎ اﺳﺘﻔﺎده ﮐﺮد‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫اﺿﺎﻓﻪ ﮐﺮدن ‪ option‬ﻫﺎ‬
‫ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪ ،‬آﯾﺘﻢ ﻫﺎي ﺟﺪﯾﺪي ﺑﻪ ‪ list‬ﻫﺎ اﺿﺎﻓﻪ ﮐﻨﯿﻢ‪ .‬ﺑﺮاي اﯾﻦ ﮐﺎر ﺗﺎﺑﻌﯽ ﺑﺎ ﺳﻪ آرﮔﻮﻣﺎن زﯾﺮ ﻃﺮاﺣﯽ‬
‫ﻣﯽﮐﻨﯿﻢ‪:‬‬

‫‪81‬‬ ‫‪list‬ي ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ روي آن ﮐﺎر ﮐﻨﯿﻢ‪ ،‬ﻧﺎم آﯾﺘﻤﯽ ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ و ﻣﻘﺪاري ﮐﻪ ﻣﯽﺧﻮاﻫﯿﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ‪.‬‬

‫‪9‬‬ ‫ﺑﻌﺪ ﺗﻮﺳﻂ ﻣﺘﺪﻫﺎي ﻗﺒﻠﯽ ‪ DOM‬ﯾﮏ ﻋﻨﺼﺮ ‪ option‬ﺟﺪﯾﺪ اﯾﺠﺎد ﮐﺮده و آن را ﺑﻪ ﻋﻨﺼﺮ ‪ select‬اﺿﺎﻓﻪ ﻣﯽﮐﻨﯿﻢ‪:‬‬
‫{ )‪function add (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‬ﻓﺮﺳﺘﺎده ﺷﺪه ﯾﺎ ﻧﻪ از دﺳﺘﻮر ‪ arguments.length==3‬اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪.‬‬

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

‫روش ﺑﻬﺘﺮ و ﺟﺪﯾﺪﺗﺮ اﺳﺘﻔﺎده از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ .remove‬اﺳﺖ ﮐﻪ آرﮔﻮﻣﺎن )‪ (index‬ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺑﺮاي ﺣﺬف را ﻣﯽ ﭘﺬﯾﺮد‪:‬‬
‫;)”‪var oListbox = document.getElementById(“selListbox‬‬
‫‪oListbox.remove(0); //remove the first option‬‬

‫ﻣﯽ ﺗﻮان ﻫﻤﺎﻧﻨﺪ روش اﺿﺎﻓﻪ ﮐﺮدن ‪option‬ﻫﺎ ﺗﺎﺑﻌﯽ ﺑﺮاي ﺣﺬف آن ﻫﺎ از ‪list‬ﻫﺎ اﺳﺘﻔﺎده ﮐﺮد‪:‬‬
‫{ )‪function del (oListbox, iIndex‬‬
‫;)‪oListbox.remove(iIndex‬‬
‫}‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬

‫ﭼﻨﺎﻧﭽﻪ ﺑﺨﻮاﻫﯿﺪ ﻫﺮ ﯾﮏ از ‪option‬ﻫﺎي ﻣﻮﺟﻮد در ﯾﮏ ‪ listbox‬را ﺣﺬف ﮐﻨﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﻣﺘﺪ )(‪ .remove‬را ﺑﺮاي ﻫﺮ ﮐﺪام از‬
‫آن ﻫﺎ ﻓﺮاﺧﻮاﻧﯽ ﮐﻨﯿﺪ‪.‬‬
‫{ )‪function clear (oListbox‬‬
‫{ )‪for (var i=oListbox.options.length-1; i >= 0; i--‬‬
‫‪82‬‬
‫;)‪del(oListbox, i‬‬ ‫‪9‬‬
‫}‬
‫}‬

‫ﮐﺪ ﺑﺎﻻ ﺑﺮاي ﺣﺬف‪ ،‬آﯾﺘﻢ ﻫﺎ را ﺑﺮ ﻋﮑﺲ ﻃﯽ ﻣﯽ ﮐﻨﺪ‪ .‬اﯾﻦ ﮐﺎر اﻟﺰاﻣﯽ اﺳﺖ ﭼﺮا ﮐﻪ ﺑﺎ ﻫﺮ ﺑﺎر ﺣﺬف ﺷﺪن ﯾﮏ آﯾﺘﻢ از ﻟﯿﺴﺖ‬
‫ﺧﺎﺻﯿﺖ ‪ index‬ﻫﺮ ‪ option‬ﺷﻤﺎره ﮔﺬاري ﻣﺠﺪد ﻣﯽ ﺷﻮد‪ .‬ﺑﻪ اﯾﻦ دﻟﯿﻞ ﺑﻬﺘﺮ اﺳﺖ ﻫﻤﯿﺸﻪ اول ﻋﻨﺼﺮي ﺑﺎ ﺑﺰرﮔﺘﺮﯾﻦ ‪ index‬و‬
‫ﺳﭙﺲ ﻋﻨﺎﺻﺮ ﺑﺎ ‪ index‬ﮐﻮﭼﮑﺘﺮ ﺗﺮ ﺣﺬف ﺷﻮﻧﺪ‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﻓﺼﻞ ده‬
‫روﯾﺪادﻫﺎدرﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫ﺗﻌﺎﻣﻼت ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺎ ‪ HTML‬از ﻃﺮﯾﻖ رﺧﺪاد روﯾﺪادﻫﺎﯾﯽ ﮐﻪ ﺑﻪ واﺳﻄﻪ دﺳﺘﮑﺎريﻫﺎﯾﯽ ﮐﻪ ﮐﺎرﺑﺮ ﯾﺎ ﻣﺮورﮔﺮ ﺑﺮ روي ﺻﻔﺤﻪ‬
‫اﻧﺠﺎم ﻣﯽدﻫﺪ‪ ،‬اﻣﮑﺎن ﭘﺬﯾﺮ ﻣﯽ ﺷﻮد‪ .‬روﯾﺪادﻫﺎ و ﭼﮕﻮﻧﮕﯽ ﺗﺸﺨﯿﺺ و ﮐﻨﺘﺮل آن ﻫﺎ ﯾﮑﯽ از ﻣﺒﺎﺣﺚ ﻣﻬﻢ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﺷﻤﺎر‬
‫ﻣﯽ رود‪ .‬ﻣﺎ در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﺎ ﻣﻔﻬﻮم روﯾﺪادﻫﺎ آﺷﻨﺎ ﺷﺪه و ﺳﭙﺲ ﺑﻪ روﺷﻬﺎي ﮐﻨﺘﺮل و ﭘﺎﺳﺨﮕﻮﯾﯽ ﺑﻪ آن ﻫﺎ ﺧﻮاﻫﯿﻢ ﭘﺮداﺧﺖ‪.‬‬
‫ﺳﭙﺲ ﺑﺎ اﻧﻮاع روﯾﺪادﻫﺎ آﺷﻨﺎ ﺷﺪه و در اﻧﺘﻬﺎ ﺑﺎ ﺷﯽ ‪ event‬ﺑﺮاي ﺗﺸﺨﯿﺺ ﺧﺼﻮﺻﯿﺎت روﯾﺪادﻫﺎي رخ داده اﺳﺘﻔﺎده ﺧﻮاﻫﯿﻢ ﮐﺮد‪.‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫روﯾﺪادﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫ﮐﻨﺘﺮل روﯾﺪادﻫﺎ‬
‫ﻣﻮﻗﻌﯽ ﮐﻪ ﺻﻔﺤﻪ ﺑﺎرﮔﺬاري ﻣﯽ ﺷﻮد روﯾﺪادي رخ داده اﺳﺖ‪ ،‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ ﺑﺮ روي دﮐﻤﻪ اي ﮐﻠﯿﮏ ﻣﯽ ﮐﻨﺪ‪ ،‬ﺑﺎز ﻫﻢ روﯾﺪادي‬
‫رخ داده اﺳﺖ‪ .‬ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ﻣﯽ ﺗﻮاﻧﻨﺪ از اﯾﻦ روﯾﺪادﻫﺎ ﺑﺮاي اﺟﺮاي ﮐﺪﻫﺎﯾﯽ ﮐﻪ ﺑﻪ روﯾﺪادﻫﺎ ﭘﺎﺳﺦ ﻣﯽ دﻫﻨﺪ اﺳﺘﻔﺎده ﮐﻨﻨﺪ‪ .‬ﻣﺜﻼ‬ ‫‪84‬‬
‫دﮐﻤﻪ اي ﻣﻮﺟﺐ ﺑﺴﺘﻦ ﭘﻨﺠﺮه ﺷﻮد‪ ،‬ﭘﯿﻐﺎﻣﯽ را ﺑﻪ ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ دﻫﺪ‪ ،‬داده ﻫﺎ را اﻋﺘﺒﺎرﺳﻨﺠﯽ ﮐﻨﺪ و‪....‬‬ ‫‪10‬‬
‫روﯾﺪادﻫﺎ در واﻗﻊ ﻋﻤﻠﯿﺎت ﺧﺎﺻﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﯾﺎ ﺗﻮﺳﻂ ﮐﺎرﺑﺮ ﯾﺎ ﺗﻮﺳﻂ ﺧﻮد ﻣﺮورﮔﺮ اﻧﺠﺎم ﻣﯽ ﺷﻮﻧﺪ‪ .‬اﯾﻦ روﯾﺪاد ﻫﺎ ﻧﺎم ﻫﺎﯾﯽ‬
‫ﻫﻤﭽﻮن ‪ mouseover ، load ،click‬و‪ ...‬دارﻧﺪ‪ .‬اﺻﻄﻼﺣﺎ ﺑﻪ ﺗﺎﺑﻌﯽ ﮐﻪ در ﭘﺎﺳﺦ ﺑﻪ ﯾﮏ روﯾﺪاد ﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﺷﻮد ﮐﻨﺘﺮﻟﮕﺮ‬
‫روﯾﺪاد‪ 1‬ﻣﯽ ﮔﻮﯾﻨﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺗﺎﺑﻌﯽ ﮐﻪ ﺑﺮاي ﭘﺎﺳﺦ ﺑﻪ روﯾﺪاد ‪ 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‬ﮐﻪ وﻗﺘﯽ ﮐﺎرﺑﺮ دﮐﻤﻪ اي از ﺻﻔﺤﻪ ﮐﻠﯿﺪ را ﻓﺸﺎر ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﻨﺪ‪.‬‬ ‫‪‬‬
‫روﯾﺪادﻫﺎي ‪ HTML‬ﮐﻪ ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻐﯿﯿﺮاﺗﯽ در ﭘﻨﺠﺮه ﻣﺮورﮔﺮ اﻧﺠﺎم ﻣﯽ ﺷﻮﻧﺪ رخ ﻣﯽ دﻫﻨﺪ‪.‬‬ ‫‪‬‬
‫روﯾﺪادﻫﺎي ﺗﻐﯿﯿﺮ ﮐﻪ زﻣﺎﻧﯽ ﮐﻪ ﺗﻐﯿﯿﺮاﺗﯽ در ﺳﺎﺧﺘﺎر ‪ DOM‬ﺻﻔﺤﻪ اﻧﺠﺎم ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﻨﺪ‪.‬‬ ‫‪‬‬

‫روﯾﺪادﻫﺎي ‪mouse‬‬
‫راﯾﺞ ﺗﺮﯾﻦ روﯾﺪادﻫﺎﯾﯽ ﻫﺴﺘﻨﺪ ﮐﻪ رخ ﻣﯽ دﻫﻨﺪ و ﺑﻪ ﺷﺮح زﯾﺮ ﻣﯽ ﺑﺎﺷﻨﺪ‪:‬‬

‫‪1‬‬
‫‪Event Handler‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫‪ :click ‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ ﭼﭗ ﻣﺎوس را ﻓﺸﺎر ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﺪ‪) .‬ﻧﻪ دﮐﻤﻪ راﺳﺖ(‪ .‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ‬
‫ﺑﺮ روي ﯾﮏ دﮐﻤﻪ ﺑﺎﺷﺪ و ﮐﺎرﺑﺮ ﮐﻠﯿﺪ ‪ enter‬را ﻫﻢ ﺑﺰﻧﺪ اﯾﻦ روﯾﺪاد رخ ﻣﯽ دﻫﺪ‪.‬‬
‫‪ :dblclick ‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ دو ﺑﺎر دﮐﻤﻪ ﭼﭗ ﻣﺎوس را ﮐﻠﯿﮏ ﻣﯽ ﮐﻨﺪ رخ ﻣﯽ دﻫﺪ‪.‬‬

‫‪85‬‬
‫‪ :mousedown ‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻫﺮ دﮐﻤﻪ اي از ﻣﺎوس را ﻓﺸﺎر دﻫﺪ رخ ﻣﯽ دﻫﺪ‪.‬‬
‫‪ :mouseout ‬ﻣﻮﻗﻌﯽ رخ ﻣﯿﺪﻫﺪ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس ﺑﺮ روي ﻋﻨﺼﺮ اﺳﺖ و ﮐﺎرﺑﺮ آن را ﺑﻪ ﺑﯿﺮون از ﻣﺤﺪوده ﻋﻨﺼﺮ ﻫﺪاﯾﺖ‬
‫‪10‬‬ ‫ﻣﯿﮑﻨﺪ‪.‬‬
‫‪ :mouseover ‬ﻣﻮﻗﻌﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس از ﺧﺎرج از ﻋﻨﺼﺮ ﺑﺮ روي ان ﻫﺪاﯾﺖ ﻣﯽ ﺷﻮد‪.‬‬
‫‪ :mouseup ‬ﻣﻮﻗﻌﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻫﺮدﮐﻤﻪ اي از ﻣﺎوس رﻫﺎ ﻣﯽ ﺷﻮد‪.‬‬
‫‪ :mousemove ‬ﻣﮑﺮرا ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس ﺑﺮ روي ﻋﻨﺼﺮي اﺳﺖ رخ ﻣﯽ دﻫﺪ‪.‬‬
‫ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﯾﮏ ﺻﻔﺤﻪ از روﯾﺪادﻫﺎي ﻓﻮق ﺑﻪ ﺧﻮﺑﯽ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪.‬‬

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

‫ﻗﺒﻞ از رﺧﺪاد روﯾﺪاد ‪ click‬ﻫﻤﯿﺸﻪ اﺑﺘﺪا روﯾﺪاد ‪ mousedown‬و در ﭘﯽ آن ‪ mouseup‬و آﺧﺮ ﺳﺮ ‪ click‬رخ ﻣﯽ دﻫﺪ‪.‬‬
‫درﻫﻨﮕﺎم اﺟﺮاي روﯾﺪاد ‪ dblclick‬روﯾﺪادﻫﺎي زﯾﺮ ﺑﻪ ﺗﺮﺗﯿﺐ اﺟﺮا ﻣﯽ ﺷﻮﻧﺪ‪:‬‬
‫‪mousedown‬‬ ‫‪.1‬‬
‫‪mouseup‬‬ ‫‪.2‬‬
‫‪click‬‬ ‫‪.3‬‬
‫‪mousedown‬‬ ‫‪.4‬‬
‫‪mouseup‬‬ ‫‪.5‬‬
‫‪click‬‬ ‫‪.6‬‬
‫‪dblclick‬‬ ‫‪.7‬‬
‫ﻫﻨﮕﺎم ﺟﺎ ﺑﻪ ﺟﺎ ﺷﺪن ﻧﺸﺎﻧﮕﺮ ﻣﺎوس از ﯾﮏ ﻋﻨﺼﺮ ﺑﺮ روي ﻋﻨﺼﺮ دﯾﮕﺮ‪ ،‬اﺑﺘﺪا روﯾﺪاد ‪ mouseout‬ﺳﭙﺲ روﯾﺪاد ‪mousemove‬‬
‫ﺑﺮاي ﻋﻨﺼﺮ ﺑﯿﻦ اﯾﻦ دو و آﺧﺮ ﺳﺮ‪ ،‬روﯾﺪاد ‪ mouseover‬رخ ﻣﯽ دﻫﺪ‪.‬‬

‫روﯾﺪادﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ‬

‫روﯾﺪاد ﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ ﺑﻪ واﺳﻄﻪ ﻋﻤﻠﯿﺎﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ ﺑﺮ روي ﺻﻔﺤﻪ ﮐﻠﯿﺪ اﻧﺠﺎم ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﻨﺪ‪ .‬روﯾﺪاد ﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ‬
‫ﺑﻪ ﺷﺮح زﯾﺮ ﻣﯽ ﺑﺎﺷﻨﺪ‪:‬‬
‫‪ :keydown‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﻠﯿﺪي از ﺻﻔﺤﻪ ﮐﻠﯿﺪ زده ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﺪ‪ .‬اﯾﻦ روﯾﺪاد ﻣﮑﺮرا زﻣﺎﻧﯽ ﮐﻪ دﮐﻤﻪ اي ﭘﺎﯾﯿﻦ‬ ‫‪‬‬
‫ﻧﮕﻪ داﺷﺘﻪ ﺷﻮد ﻧﯿﺰ رخ ﻣﯽ دﻫﺪ‪).‬اﯾﻦ روﯾﺪاد ﻫﻤﯿﺸﻪ ﻗﺒﻞ از ‪ keypress‬رخ ﻣﯽ دﻫﺪ‪(.‬‬
‫‪ :keypress‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﻠﯿﺪي از ﺻﻔﺤﻪ ﮐﻠﯿﺪ زده ﻣﯽ ﺷﻮد و ﺑﻪ ﻣﻮﺟﺐ آن ﯾﮏ ﮐﺎراﮐﺘﺮ ﺑﺮﮔﺮداﻧﺪه ﻣﯽ ﺷﻮد رخ ﻣﯽ‬ ‫‪‬‬
‫دﻫﺪ‪ .‬اﯾﻦ روﯾﺪاد ﻣﮑﺮرا زﻣﺎﻧﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ اي را ﭘﺎﯾﯿﻦ ﻧﮕﻪ ﻣﯽ دارد ﻧﯿﺰ رخ ﻣﯽ دﻫﺪ‪).‬ﮐﻠﯿﺪﻫﺎي ‪ ctrl ،alt ،enter‬و‬
‫‪ shift‬ﻣﻮﺟﺐ روﺧﺪاد اﯾﻦ روﯾﺪاد ﻧﻤﯽ ﺷﻮﻧﺪ‪(.‬‬
‫‪ :keyup‬ﻫﻨﮕﺎﻣﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ دﮐﻤﻪ اي ﮐﻪ ﭘﺎﯾﯿﻦ ﺑﻮده اﺳﺖ رﻫﺎ ﺷﻮد‪.‬‬ ‫‪‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫روﯾﺪادﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫ﺗﺮﺗﯿﺐ اﺟﺮاﯾﯽ روﯾﺪاد ﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ‬

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

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

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

‫اﯾﻦ روﯾﺪاد ﺑﺮاي ﺗﮓ ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ iframe ،img ،embed ،body‬و ‪ script‬ﻗﺎﺑﻞ اﺳﺘﻔﺎده اﺳﺖ‪.‬‬
‫‪ :unload‬ﻫﻨﮕﺎﻣﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﺻﻔﺤﻪ ﺑﺎر ﺷﺪه ﺟﺎري را ﺑﺒﻨﺪد‪ .‬اﯾﻦ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﻣﻮﺟﺐ زدن دﮐﻤﻪ ‪X‬‬ ‫‪‬‬
‫)‪ (close‬ﭘﻨﺠﺮه ﯾﺎ وارد ﮐﺮدن ﯾﮏ آدرس ﺟﺪﯾﺪ در ﻧﻮار آدرس ﻣﺮورﮔﺮ ﺑﺎﺷﺪ‪.‬‬
‫‪ :abort‬اﯾﻦ روﯾﺪاد ﺑﺮاي ﯾﮏ ‪ object‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻗﺒﻞ از ﺑﺎرﮔﺬاري ﮐﺎﻣﻞ آن ‪ ،‬ﻋﻤﻞ ﺑﺎرﮔﺬاري را ﻣﺘﻮﻗﻒ ﮐﻨﺪ رخ‬ ‫‪‬‬
‫ﻣﯽ دﻫﺪ‪.‬‬
‫‪ :error‬اﯾﻦ روﯾﺪاد ﺑﺮاي ﯾﮏ ﺻﻔﺤﻪ ﻫﻨﮕﺎﻣﯽ ﮐﻪ در آن ﯾﮏ ﺧﻄﺎ رخ ﻣﯽ دﻫﺪ‪ ،‬ﺑﺮاي ﯾﮏ ﻋﮑﺲ ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺘﻮاﻧﺪ‬ ‫‪‬‬
‫ﺑﺎرﮔﺬاري ﺷﻮد و ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ ‪ object‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺘﻮاﻧﺪ ﺑﺎرﮔﺬاري ﺷﻮد رخ ﻣﯽ دﻫﺪ‪.‬‬
‫‪ :select‬اﯾﻦ روﯾﺪاد ﻫﻨﮕﺎﻣﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﯾﮏ ﯾﺎ ﭼﻨﺪ ﮐﺎراﮐﺘﺮ را از داﺧﻞ ﯾﮏ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ )ﻣﻨﻈﻮر ﺗﮓ ﻫﺎي‬ ‫‪‬‬
‫‪ textarea‬و ‪ (input‬اﻧﺘﺨﺎب ﮐﻨﺪ رخ ﻣﯽ دﻫﺪ‪.‬‬
‫‪ :change‬ﺑﺮ روي ﯾﮏ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ‪ ،‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻣﻘﺪار داﺧﻞ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ ﺗﻐﯿﯿﺮ ﮐﺮده و در اداﻣﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از روي‬ ‫‪‬‬
‫ﻋﻨﺼﺮ ﺧﺎرج ﺷﻮد و ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ ‪ select‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻣﻘﺪار آن ﺗﻐﯿﯿﺮ ﻣﯽ ﮐﻨﺪ رخ ﻣﯽ دﻫﻨﺪ‪.‬‬
‫‪ :submit‬ﺑﺮاي ﻋﻨﺼﺮ ‪ ،form‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ دﮐﻤﻪ ‪ submit‬ﻣﺮﺑﻮط ﺑﻪ ﻓﺮم ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﺪ‪.‬‬ ‫‪‬‬
‫‪ :reset‬ﺑﺮاي ﻋﻨﺼﺮ ‪ ،form‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ دﮐﻤﻪ ‪ reset‬ﻣﺮﺑﻮط ﺑﻪ ﻓﺮم ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﺪ‪.‬‬ ‫‪‬‬
‫‪ :focus‬ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ زﻣﺎﻧﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﺑﺮ روي آن ﻗﺮار ﻣﯽ ﮔﯿﺮد رخ ﻣﯽ دﻫﺪ‪.‬‬ ‫‪‬‬
‫‪ :blur‬ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ زﻣﺎﻧﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ را از دﺳﺖ ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﺪ‪.‬‬ ‫‪‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﺷﯽ ‪event‬‬
‫ﺷﯽ ‪ event‬ﮐﻪ در ﻧﺴﺨﻪ ‪ 1.2‬و ﺑﺎﻻﺗﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ در دﺳﺘﺮس ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ‪ ،‬ﺷﯽ ﺧﺎﺻﯽ اﺳﺖ ﮐﻪ ﺑﻪ ﻫﻤﺮاه ﻫﺮ روﯾﺪاد‬
‫ﺑﺮاي ﮐﻨﺘﺮﻟﮕﺮ آن روﯾﺪاد ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد‪ .‬در واﻗﻊ ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪاد ﻣﯽ ﺗﻮاﻧﺪ آن را ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﭘﺎراﻣﺘﺮﻫﺎ درﯾﺎﻓﺖ ﮐﻨﺪ و‬
‫‪87‬‬ ‫ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ ‪ event‬اﻃﻼﻋﺎﺗﯽ را در ﻣﻮرد آن روﯾﺪاد در دﺳﺘﺮس ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﺎن ﻗﺮار ﻣﯽ دﻫﺪ‪.‬‬

‫‪10‬‬ ‫ﺑﻌﻀﯽ از اﻃﻼﻋﺎﺗﯽ ﮐﻪ اﯾﻦ ﺷﯽ در اﺧﺘﯿﺎر ﻗﺮار ﻣﯽ دﻫﺪ ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ‪:‬‬
‫‪ ‬ﺷﯽ اي ﮐﻪ ﻣﻮﺟﺐ رﺧﺪاد روﯾﺪاد ﺷﺪه اﺳﺖ‪.‬‬
‫‪ ‬اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﻧﺸﺎﻧﮕﺮ ﻣﺎوس درﻫﻨﮕﺎم رﺧﺪاد روﯾﺪاد‬
‫‪ ‬اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﺻﻔﺤﻪ ﮐﻠﯿﺪ در ﻫﻨﮕﺎم رﺧﺪاد روﯾﺪاد‬
‫ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﯾﻦ ﺷﯽ ﻣﯽ ﺗﻮان ﺑﻪ ﭼﻨﺪﯾﻦ ﻃﺮﯾﻖ ﻋﻤﻞ ﮐﺮد‪:‬‬
‫در ‪ ،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‬‬
‫‪...‬‬
‫}‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫روﯾﺪادﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬

‫ﺧﻮاص و ﻣﺘﺪﻫﺎي ﺷﯽ ‪event‬‬

‫اﯾﻦ ﺷﯽ ﺷﺎﻣﻞ ﺧﻮاص و ﻣﺘﺪﻫﺎﯾﯽ اﺳﺖ ﮐﻪ در اداﻣﻪ ﺑﺮرﺳﯽ ﺧﻮاﻫﯿﻢ ﮐﺮد‪:‬‬
‫‪ :shiftkey‬اﮔﺮ دﮐﻤﻪ ‪ shift‬زده ﺷﺪه ﺑﺎﺷﺪ ‪ true‬و در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ‪ false‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬ ‫‪‬‬ ‫‪88‬‬
‫‪ :altkey‬اﮔﺮ دﮐﻤﻪ ‪ alt‬زده ﺷﺪه ﺑﺎﺷﺪ ‪ true‬و در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ‪ false‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬ ‫‪‬‬
‫‪10‬‬
‫‪ :ctrlkey‬اﮔﺮ دﮐﻤﻪ ‪ ctrl‬زده ﺷﺪه ﺑﺎﺷﺪ ‪ true‬و در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ‪ false‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬ ‫‪‬‬
‫‪ :button‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﮐﺪام ﯾﮏ از دﮐﻤﻪ ﻫﺎي ﻣﺎوس زده ﺷﺪه اﻧﺪ‪ .‬ﻣﻘﺎدﯾﺮي ﮐﻪ اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﺮﻣﯽ ﮔﺮداﻧﺪ ﺑﻪ‬ ‫‪‬‬
‫ﺷﺮح زﯾﺮ اﺳﺖ‪:‬‬
‫‪ :٠‬ﻫﯿﭻ دﮐﻤﻪ اي زده ﻧﺸﺪه اﺳﺖ‬ ‫‪‬‬
‫‪ :١‬دﮐﻤﻪ ﭼﭗ زده ﺷﺪه اﺳﺖ‪.‬‬ ‫‪‬‬
‫‪ :٢‬دﮐﻤﻪ راﺳﺖ زده ﺷﺪه اﺳﺖ‪.‬‬ ‫‪‬‬
‫‪ :٣‬دﮐﻤﻪ ﭼﭗ و راﺳﺖ ﺑﺎ ﻫﻢ زده ﺷﺪه اﻧﺪ‪.‬‬ ‫‪‬‬
‫‪ :۴‬دﮐﻤﻪ وﺳﻂ زده ﺷﺪه اﺳﺖ‪.‬‬ ‫‪‬‬
‫‪ :۵‬دﮐﻤﻪ ﻫﺎي ﭼﭗ و وﺳﻂ ﺑﺎ ﻫﻢ زده ﺷﺪه اﻧﺪ‪.‬‬ ‫‪‬‬
‫‪ :۶‬دﮐﻤﻪ ﻫﺎي راﺳﺖ و وﺳﻂ ﺑﺎ ﻫﻢ زده ﺷﺪه اﻧﺪ‪.‬‬ ‫‪‬‬
‫‪ :٧‬ﻫﺮ ﺳﻪ دﮐﻤﻪ ﺑﺎ ﻫﻢ زده ﺷﺪه اﻧﺪ‪.‬‬ ‫‪‬‬
‫‪ pageX‬و‪ :pageY‬ﻣﺨﺘﺼﺎت اﻓﻘﯽ و ﻋﻤﻮدي ﻣﺎوس را ﻧﺴﺒﺖ ﺑﻪ ﮔﻮﺷﻪ ﭼﭗ و ﺑﺎﻻي ﺻﻔﺤﻪ در ﻫﻨﮕﺎم رﺧﺪاد روﯾﺪاد را‬ ‫‪‬‬
‫ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫‪ :type‬ﻧﻮع روﯾﺪادي ﮐﻪ رخ داده اﺳﺖ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ ﻣﺜﻼ ‪ click‬و ‪ mouseover‬و‪...‬‬ ‫‪‬‬
‫‪ :keyCode‬ﻋﺪدي اﺳﺖ ﮐﻪ ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﺪام دﮐﻤﻪ از ﺻﻔﺤﻪ ﮐﻠﯿﺪ ﻓﺸﺎر داده ﺷﺪه اﺳﺖ‪) .‬درﻣﺮورﮔﺮﻫﺎﯾﯽ‬ ‫‪‬‬
‫ﻫﻤﭽﻮن ‪ Opera ،Firefox‬ﻣﯽ ﺑﺎﯾﺴﺖ از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ .which‬ﺑﺮاي ﺑﺪﺳﺖ آوردن ﮐﺪ ﮐﺎراﮐﺘﺮي دﮐﻤﻪ اي از‬
‫ﺻﻔﺤﻪ ﮐﻠﯿﺪ ﮐﻪ ﻓﺸﺎر داده ﺷﺪه اﺳﺖ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪(.‬‬
‫‪ :target‬ﺷﯽ اي را ﮐﻪ در ﻣﻌﺮض ﺣﺎدﺛﻪ ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ )ﻣﺎﻧﻨﺪ ﯾﮏ ﺳﻨﺪ ﯾﺎ ﯾﮏ ﭘﯿﻮﻧﺪ(‬ ‫‪‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﻓﺼﻞ ﯾﺎزده‬

‫ﮐﺎرﺑﺎﮐﻮﮐﯽ‪1‬ﻫﺎ‬

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

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫ﮐﺎر ﺑﺎ ﮐﻮﮐﯽ ﻫﺎ‬

‫اﯾﺠﺎد ﮐﻮﮐﯽ ﻫﺎ‬

‫ﺑﺮاي اﯾﺠﺎد ﮐﻮﮐﯽﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﺧﺎﺻﯿﺖ ‪ .cookie‬ﺷﯽ ‪ document‬ﺑﻪ ﺷﮑﻞ زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪:‬‬
‫; ‪document.cookie="name=value ; expires=Date ; path = path‬‬
‫‪90‬‬
‫;"‪domain=domain‬‬ ‫‪11‬‬

‫و ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﺗﻤﺎﻣﯽ ﮐﻮﮐﯽ ﻫﺎي از ﻗﺒﻞ اﯾﺠﺎد ﺷﺪه ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﺧﻮاﻫﯿﻢ ﮐﺮد‪:‬‬
‫;‪var x = document.cookie‬‬

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

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬
 ‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫ﺣﺬف ﮐﻮﮐﯽ ﻫﺎ‬
‫ﺑﺮاي ﺣﺬف ﯾﮏ ﮐﻮﮐﯽ ﻣﯽ ﺗﻮان از ﺗﺎﺑﻌﯽ ﮐﻪ زﻣﺎن اﻧﻘﻀﺎي ﮐﻮﮐﯽ را ﺑﻪ ﯾﮏ ﺛﺎﻧﯿﻪ ﻗﺒﻞ ﺗﻨﻈﯿﻢ ﻣﯽ ﮐﻨﺪ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ .‬اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ‬
‫ﺻﻮرت زﯾﺮ اﺳﺖ‪:‬‬
‫‪91‬‬ ‫) ‪function delete_cookie ( cookie_name‬‬
‫{‬
‫‪11‬‬ ‫‪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‬‬ ‫=‬ ‫;‪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‬‬

‫‪1stwebdesigner.ir‬‬
‫‪www.ParsBook.org‬‬