‫ﭘﯿﺸﮕﻔﺘﺎر‬
‫در ﺳﺎل ﻫﺎي ﻧﻪ ﭼﻨﺪان دور‪ ،‬وب ﻣﮑﺎن ﺑﺴﯿﺎر ﺳﺮد و ﮐﺴﻞ ﮐﻨﻨﺪه اي ﺑﻮد‪ .‬ﺻﻔﺤﺎت وﺑﯽ ﮐﻪ از ﻣﺘﻦ ﻫﺎي ﺳﺎﺧﺘﻤﻨﺪ ‪ HTML‬اﯾﺠﺎد‬
‫ﺷﺪه ﺑﻮدﻧﺪ ﺗﻨﻬﺎ ﺑﻪ ﻧﻤﺎﯾﺶ ﯾﮑﺴﺮي اﻃﻼﻋﺎت اﮐﺘﻔﺎ ﻣﯽ ﮐﺮدﻧﺪ‪ .‬ﺗﻨﻬﺎ راه ﺗﻌﺎﻣﻞ ﮐﺎرﺑﺮان ﺑﺎ ﺻﻔﺤﺎت اﯾﻦ ﺑﻮد ﮐﻪ ﺑﺮ روي ﻟﯿﻨﮑﯽ‬
‫ﮐﻠﯿﮏ ﮐﺮده و ﻣﻨﺘﻈﺮ ﺑﺎرﮔﺬاري ﯾﮏ ﺻﻔﺤﻪ ﺟﺪﯾﺪ ﻣﯽ ﻣﺎﻧﺪﻧﺪ‪ .‬ﺣﺘﯽ ﻓﮑﺮ آن روزﻫﺎ ﻫﻢ ﻋﺬاب آور اﺳﺖ!‬
‫اﻣﺎ اﻣﺮوزه ﺑﺴﯿﺎري از ﺳﺎﯾﺖ ﻫﺎ ﻫﻤﭽﻮن ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﮐﺎرﺑﺮدي دﺳﮑﺘﺎپ ﻋﻤﻞ ﮐﺮده و ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﯽ درﻧﮓ ﺑﻪ ﺗﻤﺎﻣﯽ روﯾﺪادﻫﺎي‬
‫ﺻﻔﺤﻪ ﻫﻤﭽﻮن ﮐﻠﯿﮏ ﭘﺎﺳﺦ ﺑﺪﻫﻨﺪ‪ .‬و ﻫﻤﻪ اﯾﻦ ﻫﺎ ﺑﻪ ﻟﻄﻒ ﻣﻮﺿﻮع ﺟﺰوه اي ﮐﻪ ﻫﻢ اﮐﻨﻮن در دﺳﺖ دارﯾﺪ اﺳﺖ‪ :‬ﺟﺎوااﺳﮑﺮﯾﭙﺖ!‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ زﺑﺎﻧﯽ اﺳﺖ ﮐﻪ ﺑﺎ ﮐﻤﮏ آن ﻣﯽ ﺗﻮاﻧﯿﺪ ﺻﻔﺤﺎت ‪ HTML‬ﺧﻮد را ﻟﺒﺮﯾﺰ از اﻧﯿﻤﯿﺸﻦ ﻫﺎ‪ ،‬ﺟﻠﻮه ﻫﺎي ﺑﺼﺮي و وﯾﮋﮔﯽ‬
‫ﻫﺎي ﺗﻌﺎﻣﻠﯽ ﮐﻨﯿﺪ‪ .‬اﯾﻦ زﺑﺎن اﻣﮑﺎﻧﺎﺗﯽ را ﻓﺮاﻫﻢ ﻣﯽ آورد ﺗﺎ ﺻﻔﺤﻪ وب ﺷﻤﺎ ﺑﺘﻮاﻧﺪ ﺑﻪ ﻋﻤﻠﯿﺎت ﮐﺎرﺑﺮي ﮐﻪ در ﺗﻌﺎﻣﻞ ﺑﺎ آن ﻫﺎﺳﺖ‬
‫ﻓﻮرا ﭘﺎﺳﺦ ﺑﺪﻫﺪ‪ .‬ﻣﺎﻧﻨﺪ ﮐﻠﯿﮏ ﺑﺮ روي ﯾﮏ ﻟﯿﻨﮏ‪ ،‬ﭘﺮ ﮐﺮدن ﯾﮏ ﻓﺮم و ﺣﺮﮐﺖ ﻧﺸﺎﻧﮕﺮ ﻣﺎوس ﺑﺮ روي ﺻﻔﺤﻪ‪.‬‬
‫ﺑﻪ ﮐﻤﮏ اﯾﻦ زﺑﺎن ﺧﻮاﻫﯿﺪ ﺗﻮاﻧﺴﺖ ﺑﻪ اﺟﺰا ﻣﻮﺟﻮد در ﺻﻔﺤﻪ دﺳﺘﺮﺳﯽ داﺷﺘﻪ و ﺣﺘﯽ در ﺻﻮرت ﻧﯿﺎز دﺳﺖ ﺑﻪ ﺗﻐﯿﯿﺮاﺗﯽ در آن ﻫﺎ‬
‫ﻣﻄﺎﺑﻖ ﻣﯿﻞ ﺧﻮد ﺑﺰﻧﯿﺪ‪.‬‬
‫اﺳﺘﻔﺎده روز اﻓﺰون از ﺗﮑﻨﻮﻟﻮژي ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ Ajax‬و ‪ jQuery‬در ﻃﺮاﺣﯽ ﺻﻔﺤﺎت وب ﮐﻪ ﻫﺴﺘﻪ اﺻﻠﯽ آن ﻫﺎ را ‪Javascript‬‬

‫ﺗﺸﮑﯿﻞ ﻣﯽ دﻫﺪ ﺑﻪ اﻫﻤﯿﺖ ﯾﺎدﮔﯿﺮي اﯾﻦ زﺑﺎن ﻗﺪرﺗﻤﻨﺪ ﺑﺮاي ﻫﺮﮐﺲ ﮐﻪ دﺳﺘﯽ در ﺗﻮﺳﻌﻪ وب دارد اﻓﺰوده اﺳﺖ‪.‬‬
‫ﺟﺰوه ﭘﯿﺶ رو ﮐﻪ در راﺳﺘﺎي ﺑﺮﮔﺰاري دوره ﻫﺎي آﻣﻮزﺷﯽ ﻃﺮاﺣﯽ وب ﺑﻪ ﻫﻤﺖ اﻧﺠﻤﻦ ﻋﻠﻤﯽ ﻣﻬﻨﺪﺳﯽ ﻓﻨﺎوري اﻃﻼﻋﺎت‬
‫داﻧﺸﮕﺎه ﭘﯿﺎم ﻧﻮر ﻣﺮﮐﺰ آران و ﺑﯿﺪﮔﻞ ﺗﻬﯿﻪ ﺷﺪه اﺳﺖ ﺷﻤﺎ را ﺑﺎ ﺑﺴﯿﺎري از وﯾﮋﮔﯽ ﻫﺎي اﯾﻦ زﺑﺎن ﻣﺤﺒﻮب و ﮐﺎرﺑﺮدي آﺷﻨﺎ ﺧﻮاﻫﺪ‬
‫ﮐﺮد‪.‬‬
‫اﯾﻦ ﺟﺰوه از روي ﯾﮑﯽ از ﻣﺸﻬﻮرﺗﺮﯾﻦ و ﺟﺎﻣﻊ ﺗﺮﯾﻦ ﮐﺘﺐ آﻣﻮزﺷﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﯾﻌﻨﯽ ‪Professional Javascript for Web‬‬

‫‪ Developers‬ﻧﻮﺷﺘﻪ ‪)Nicholas C.Zakas‬ﻧﯿﮑﻼس ﺳﯽ زاﮐﺎس( و ﺗﺠﺮﺑﯿﺎت ﺷﺨﺼﯽ ﺗﺎﻟﯿﻒ و ﺗﺮﺟﻤﻪ ﺷﺪه اﺳﺖ‪.‬‬
‫ذﮐﺮ اﯾﻦ ﻧﮑﺘﻪ ﻧﯿﺰ ﺿﺮوري اﺳﺖ ﮐﻪ ﺗﺮﺟﻤﻪ‪ ،‬ﺗﺨﺼﺺ اﯾﻨﺠﺎﻧﺐ ﻧﺒﻮده و ﻫﺪف از ﺗﻬﯿﻪ ﺟﺰوه اي ﮐﻪ ﻫﻢ اﮐﻨﻮن در دﺳﺘﺎن ﺷﻤﺎﺳﺖ‬
‫ﻫﻢ ﭼﯿﺰي ﺟﺰ ﺟﺎﻣﻪ ﻋﻤﻞ ﭘﻮﺷﺎﻧﺪن ﺑﻪ ﺣﺪﯾﺚ ﺷﺮﯾﻒ»ز‪‬ﮐَﺎةُ اﻟْﻌ‪‬ﻠْﻢِ ﻧَﺸْﺮُه‪ «‬ﻧﺒﻮده اﺳﺖ‪ .‬از اﯾﻦ رو اﯾﻦ ﺟﺰوه ﻧﯿﺰ ﺧﺎﻟﯽ از اﺷﮑﺎل و‬
‫اﺷﺘﺒﺎه ﻧﯿﺴﺖ‪ .‬ﻟﺬا از ﺗﻤﺎﻣﯽ ﺧﻮاﻧﻨﺪﮔﺎن ﺗﻘﺎﺿﺎ ﻣﯽﺷﻮد ﺑﻪ ﻣﻨﻈﻮر ﮔﺰارش اﺷﮑﺎل و ﺑﯿﺎن ﻧﻈﺮات‪ ،‬اﻧﺘﻘﺎدات و ﭘﯿﺸﻨﻬﺎدات ﺧﻮد ﺑﺎ اﯾﻤﯿﻞ‬
‫اﯾﻨﺠﺎﻧﺐ ﺑﻪ آدرس ‪ ahmadbadpey@gmail.com‬ﻣﮑﺎﺗﺒﻪ ﻓﺮﻣﺎﯾﻨﺪ‪.‬‬
‫در ﭘﺎﯾﺎن از ﺗﻤﺎﻣﯽ دوﺳﺘﺎﻧﻢ ﻋﻠﯽ اﻟﺨﺼﻮص ﺣﺴﯿﻦ ﺑﯿـﺪي ﺑﻪ ﺧﺎﻃﺮ وﯾﺮاﯾﺶ و ﺻﻔﺤﻪ آراﯾﯽ و ﻫﻤﭽﻨﯿﻦ ﻃﺮاﺣﯽ ﻃﺮح روي ﺟﻠﺪ ‪،‬‬
‫ﺗﻤﺎﻣﯽ اﻋﻀﺎي ﻣﺤﺘﺮم اﻧﺠﻤﻦ ﻋﻠﻤﯽ ﻣﻬﻨﺪﺳﯽ ﻓﻨﺎوري اﻃﻼﻋﺎت داﻧﺸﮕﺎه ﭘﯿﺎم ﻧﻮر ﻣﺮﮐﺰ آران و ﺑﯿﺪﮔﻞ و ﺗﻤﺎﻣﯽ دوﺳﺘﺎﻧﯽ ﮐﻪ ﺑﺎ‬
‫اﻋﺘﻤﺎد ﺑﻪ ﺑﻨﺪه و ﺣﻀﻮر ﮔﺮم ﺧﻮد در دوره ﻫﺎي آﻣﻮزﺷﯽ ﺑﺮﮔﺰار ﺷﺪه ﻣﻮﺟﺒﺎت دﻟﮕﺮﻣﯽ و اﻧﮕﯿﺰه ﺑﺮاي ﺗﻬﯿﻪ اﯾﻦ ﺟﺰوه را ﻓﺮاﻫﻢ‬
‫آوردﻧﺪ ﺻﺎدﻗﺎﻧﻪ و ﺻﻤﯿﻤﺎﻧﻪ ﺗﺸﮑﺮ ﻣﯽﮐﻨﻢ‪.‬‬
‫ﻣﻮﻻي ﻣﺘﻘﯿﺎن‪ ،‬ﻋﻠﯽ)ﻋﻠﯿﻪ اﻟﺴﻼم( ﻣﯽ ﻓﺮﻣﺎﯾﻨﺪ‪:‬‬

‫اﺣﻤﺪ ﺑﺎدﭘﯽ‪ -‬ﻓﺮوردﯾﻦ ‪1391‬‬

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

‫ﮔﺎه ﺪاو ﺪ ﻮا ﺪ ﻨﺪه ای را رذا‬

‫ﺳﺎ ﺪ‪ ،‬او را از ﻋ ﻢ و دا ﺶ و ﯾﺎد‬

‫ﻦ وم ﯽ ﺳﺎزد‪.‬‬

‫‪I‬‬
‫‪1stwebdesigner.ir‬‬

1stwebdesigner.ir

.......................................................................... Null‬‬ ‫ﻧﻮع داده ‪12................................................................................................................................................‬‬ ‫‪III‬‬ ‫‪1stwebdesigner...............................................‬‬ ‫ﺗﺒﺪﯾﻞ ﺑﻪ رﺷﺘﻪ ‪13...............................................‬‬ ‫اﻧﻮاع داده ﻫﺎي اﺻﻠﯽ ‪10..........................................................................................................................ir‬‬ ................................................ Boolean‬‬ ‫ﻧﻮع داده ‪12.......................................‬‬ ‫ﻓﺼﻞ ‪ : 2‬ﻣﺘﻐﯿﺮﻫﺎ واﻧﻮاع داده ﻫﺎ ‪7 .............................‬‬ ‫ﻧﻮع داده ‪11 ...................................‬‬ ‫ﺗﻔﺎوت ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ و ﺟﺎوا ‪3 ....................................................................................................................................................................................................................................................................................‬‬ ‫‪DOM‬؛ ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ ‪4 ................................................................................................Undefind‬‬ ‫ﻧﻮع داده ‪11 .............................................................................................................................................‬‬ ‫‪BOM‬؛ ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ ‪4 ........................‬‬ ‫اﻧﻮاع زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺗﺤﺖ وب ‪2 ........‬‬ ‫ﮐﻠﻤﺎت رزرو ﺷﺪه ‪10............................................................................................................................................‬‬ ‫ﻓﺼﻞ ‪ : 1‬آﺷﻨﺎﯾﯽ ﺑﺎ ﻣﻔﺎﻫﯿﻢ و اﺻﻄﻼﺣﺎت ‪1 .......................................................................................................................................................................................................................................................................‬‬ ‫ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮﻫﺎ ‪8 .......................................................‬‬ ‫اﺟﺰا ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪4 ............................................................................................................................‫ﺖ‬ ‫ﭘﯿﺸﮕﻔﺘﺎر ‪I ................... String‬‬ ‫ﺗﺒﺪﯾﻞ اﻧﻮاع ‪12.................................................................................................................................................................................................................................................................................................Number‬‬ ‫ﻧﻮع داده ‪12.........................................................‬‬ ‫وﯾﮋﮔﯽ ﻫﺎي ﺑﻨﯿﺎدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪4 ........................................................................................................................‬‬ ‫ﻣﺘﻐﯿﺮﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪8 .................................................................................................................................................................................................................................................................................‬‬ ‫ﮐﻠﻤﺎت ﮐﻠﯿﺪي ‪10...................

..........Array‬‬ ‫ﺑﺪﺳﺖ آوردن ﻃﻮل آراﯾﻪ ‪26........................................... javascript‬‬ ‫ﺗﻔﺎوت ﻫﺎي ﺑﻪ ﮐﺎرﮔﯿﺮي ﮐﺪﻫﺎ ﺑﻪ ﺻﻮرت درون ﺧﻄﯽ و ﺧﺎرﺟﯽ ‪19 ..............................................................................................................................................................................................................................................................................................................................................................................‫ﺗﺒﺪﯾﻞ ﺑﻪ ﻋﺪد ‪13..................................................................................................................................‬‬ ‫ﻓﺼﻞ ‪ : 5‬ﮐﺎر ﺑﺎ رﺷﺘﻪ ﻫﺎ درﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪33 ............................................................................................................................‬‬ ‫‪IV‬‬ ‫‪1stwebdesigner...................................‬‬ ‫ﻓﺼﻞ ‪ : 3‬ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﻣﺮورﮔﺮﻫﺎ ‪17 ........................................‬‬ ‫اﺳﺘﻔﺎده از ‪ Type Casting‬ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ‪14................................................‬‬ ‫ﻣﺮﺗﺐ ﺳﺎزي آراﯾﻪ ﻫﺎ ‪29....................................‬‬ ‫ﺗﺒﺪﯾﻞ آراﯾﻪ ﺑﻪ رﺷﺘﻪ ‪27..............................................................................................ir‬‬ ............................................................................................................................................................................................................................................................................‬‬ ‫ﺑﺪﺳﺖ آوردن ﻣﻮﻗﻌﯿﺖ ﯾﮏ ﮐﺎراﮐﺘﺮ ﺧﺎص در رﺷﺘﻪ ‪35......‬‬ ‫ﺑﺮﮔﺮداﻧﺪن ﻋﻨﺎﺻﺮ ﺧﺎﺻﯽ از آراﯾﻪ ‪28.........................................................................................................‬‬ ‫ﺗﺒﺪﯾﻞ آراﯾﻪ ﻫﺎ ﺑﻪ ﭘﺸﺘﻪ و ﺻﻒ ‪28......................‬‬ ‫ﻓﺎﯾﻞ ﻫﺎي ﺧﺎرﺟﯽ ‪18......................................................................................................................‬‬ ‫ﻓﺼﻞ ‪ : 4‬ﮐﺎر ﺑﺎ آراﯾﻪ ﻫﺎ درﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪25 ...............................................................................................................................................................‬‬ ‫ﺗﺒﺪﯾﻞ رﺷﺘﻪ ﺑﻪ آراﯾﻪ ‪27.................................................................................................................................................................................‬‬ ‫ﻣﺨﻔﯽ ﮐﺮدن اﺳﮑﺮﯾﭙﺖ ﻫﺎ از ﻣﺮورﮔﺮﻫﺎي ﻗﺪﯾﻤﯽ ‪21..........................................‬‬ ‫اﺿﺎﻓﻪ ﮐﺮدن ﻣﻘﺎدﯾﺮ ﺟﺪﯾﺪ ﺑﻪ آراﯾﻪ ﻫﺎ ‪28.............................................‬‬ ‫اﻟﺤﺎق دو رﺷﺘﻪ‪34....................................................‬‬ ‫ﺣﺬف و درج در ﻣﯿﺎﻧﻪ ﻫﺎي آراﯾﻪ ‪31.............................................................................................. String‬‬ ‫ﺑﺪﺳﺖ آوردن ﮐﺎراﮐﺘﺮ ﻣﻮﺟﻮد در ﯾﮏ ﻣﻮﻗﻌﯿﺖ ﺧﺎص ‪34...................................................................................................................‬‬ ‫اﯾﺠﺎد اﺷﯿﺎ رﺷﺘﻪ اي )رﺷﺘﻪ( ﺑﺎ اﺳﺘﻔﺎده از ﮐﻼس ‪34...................................................‬‬ ‫ﻣﮑﺎن ﻗﺮار دادن ﺗﮓ >‪ <script‬در ﺻﻔﺤﻪ‪20.....................................‬‬ ‫ﻋﻤﻠﮕﺮ ‪ +‬ﺑﺮاي اﻟﺤﺎق رﺷﺘﻪ ﻫﺎ ‪34 ............‬‬ ‫اﯾﺠﺎد آراﯾﻪ ﻫﺎ ﺑﺎ اﺳﺘﻔﺎده از ﮐﻼس ‪26................................‬‬ ‫ﺧﻄﺎﯾﺎﺑﯽ ‪22.............................

.. history‬‬ ‫ﺷﯽ ‪51..................................................................................................................................................................................................................................................................................... screen‬‬ ‫ﻓﺼﻞ ‪DOM : 8‬؛ ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ ‪55 .................................................................................................................................................................................................................................................................‬‬ ‫ﭘﻨﺠﺮه ﻫﺎي ‪48............................................................... navigator‬‬ ‫ﺷﯽ ‪54............................................ Math‬‬ ‫ﻣﺘﺪﻫﺎي )(‪ ..................................................‬‬ ‫‪ DOM‬ﭼﯿﺴﺖ؟ ‪56.. DOM‬‬ ‫‪V‬‬ ‫‪1stwebdesigner....................................................................................................‬‬ ‫ﺷﯽ ‪40...............................................‬‬ ‫ِ‪ BOM‬ﭼﯿﺴﺖ؟ ‪46..................................‬‬ ‫ﻓﺼﻞ ‪BOM : 7‬؛ ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ ‪45 .................................................‬‬ ‫اﺳﺘﻔﺎده از ‪60... location‬‬ ‫ﺷﯽ ‪52................................................................................‬‬ ‫ﭘﯿﻤﺎﯾﺶ و ﺑﺎز ﮐﺮدن ﭘﻨﺠﺮه ﻫﺎي ﺟﺪﯾﺪ ‪47.......................................................... toLowerCase‬‬ ‫ﻓﺼﻞ ‪ : 6‬اﺷﯿﺎي دروﻧﯽ )ﭘﯿﺶ ﺳﺎﺧﺘﻪ( ‪39 ................................................ir‬‬ ..........................................................................‬‬ ‫ﮐﺎر ﺑﺎ ﺗﺎرﯾﺦ و زﻣﺎن در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪43................................................................................................................................................max‬‬ ‫دﯾﮕﺮ ﺗﻮاﺑﻊ ﻣﻔﯿﺪ ‪41...............................................................................................................................................................................................‬‬ ‫ﺷﯽ ‪46....................... document‬‬ ‫ﺷﯽ ‪52..................................................................................................................................................................... Intervals‬‬ ‫ﺷﯽ ‪50.................... window‬‬ ‫دﺳﺘﮑﺎري ﭘﻨﺠﺮه ﻫﺎ ‪46.........................................................................................................‫ﻣﻘﺎﯾﺴﻪ رﺷﺘﻪ ﻫﺎ ‪35.............................................................................‬‬ ‫)(‪ toUpperCase‬و)( ‪37.......................................................................................................................................................................................................................................................................................................................................................................................................................................... System Dialog‬‬ ‫ﺧﺎﺻﯿﺖ ‪49.................min‬و )(‪40 ..........................................................................................‬‬ ‫ﺟﺪا ﮐﺮدن زﯾﺮ رﺷﺘﻪ اي از رﺷﺘﻪ دﯾﮕﺮ ‪36................................................... statusbar‬‬ ‫اﺟﺮاي ﻣﮑﺮر ﮐﺪﻫﺎ از ﻃﺮﯾﻖ ﻣﺘﺪﻫﺎي ‪ Timeouts‬و ‪49..............................................................................

.........................................................................................................‬‬ ‫اﯾﺠﺎد ارﺟﺎع ﺑﻪ ﻋﻨﺎﺻﺮ ﻣﻮرد ﻧﻈﺮ ‪72 .............................................................................................................................................................................................................................................................................‬‬ ‫وﯾﮋﮔﯽ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﻋﻨﺎﺻﺮ ‪73 ................................................................................................................................................................................................................................................................‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ داﺧﻞ ﯾﮏ ﻓﺮم ‪72.......................................................................................................................................................................... HTML‬‬ ‫دﺳﺘﮑﺎري ﻗﻮاﻋﺪ ﺳﺒﮏ ﻋﻨﺎﺻﺮ ‪67................................................................................................................... createElement‬‬ ‫)(‪replaceChild() ،removeChild‬و )(‪65............................................................................................‬‬ ‫)(‪ createTextNode() ،appendChild‬و )(‪64 ............................ir‬‬ ........................................................................ form‬‬ ‫ارﺳﺎل ﻓﺮم ﺑﻮﺳﯿﻠﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ‪74 ......................................................................................................................................................................................... createDocumentFragment‬‬ ‫وﯾﮋﮔﯽ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ‪ DOM‬ﺑﺮاي ‪66......................................................................‬‬ ‫ﻧﻮﺷﺘﻦ اﺳﮑﺮﯾﭙﺖ ﻫﺎ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ ﻓﺮم ‪72..‬‬ ‫اﯾﺠﺎد ﮔﺮه ﻫﺎي ﺟﺪﯾﺪ ‪63 ......‬‬ ‫ارﺳﺎل ‪ form‬ﻓﻘﻂ ﯾﮑﺒﺎر ! ‪75 ...................................................................................................................................................................................................................................‫دﺳﺘﺮﺳﯽ ﺑﻪ ﮔﺮه ﻫﺎ ‪60 .............................................‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﮔﺮه ﻫﺎي ﺧﺎص ‪61 .. getElementsByName‬‬ ‫)(‪62 ............................................................... insertBefore‬‬ ‫)(‪65.......................................................getElementsByTagName‬‬ ‫)(‪62 ...................................................................................................................................... getElementById‬‬ ‫اﯾﺠﺎد و دﺳﺘﮑﺎري ﮔﺮه ﻫﺎ ‪63.. tbody‬‬ ‫ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ‪69 ..................‬‬ ‫)(‪61 .......................................................‬‬ ‫ﮐﺎر ﺑﺎ ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ ‪75..................................................................................................................................................................................‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺻﻔﺎت ﻋﻨﺎﺻﺮ ‪61 ...............................................‬‬ ‫‪VI‬‬ ‫‪1stwebdesigner....................................................................................................................................... tr‬‬ ‫ﻓﺼﻞ ‪ : 9‬ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم ‪71 ...............................‬‬ ‫ﻣﺘﺪﻫﺎي ﻣﺮﺑﻮﻃﻪ ﺑﻪ ﺟﺪاول ‪67.............................................................................................................................................................................................................................‬‬ ‫ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ‪69 .......................................................................................................................................................................................................

...................................................................................................................................................................................................................................................................................................‬‬ ‫ﭼﺮﺧﺶ ‪ Tab‬ﺑﯿﻦ ﻋﻨﺎﺻﺮ ﻓﺮم ﺑﻪ ﺻﻮرت ﺧﻮدﮐﺎر ‪77 ..................................................‬‬ ‫ﺣﺬف ‪ option‬ﻫﺎ ‪81 .....................................................................................................................................................................................................................................................textarea‬‬ ‫ﮐﺎر ﺑﺎ ‪ listbox‬ﻫﺎ و ‪ combobox‬ﻫﺎ ‪79.....................................‬‬ ‫ﺑﺎزﯾﺎﺑﯽ‪/‬ﺗﻐﯿﯿﺮ دادن ‪)option‬ﻫﺎ(ي اﻧﺘﺨﺎب ﺷﺪه ‪80 ........‬‬ ‫ﻓﺼﻞ ‪ : 10‬روﯾﺪادﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪83 ...............‬‬ ‫دﯾﮕﺮ روﯾﺪاد ﻫﺎ ‪86 ......................................................................................‬‬ ‫ﻣﺤﺪود ﮐﺮدن ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي در ﯾﮏ ‪78...................................................‬‬ ‫اﺿﺎﻓﻪ ﮐﺮدن ‪ option‬ﻫﺎ ‪81 ........................................................................‫ﺑﺎزﯾﺎﺑﯽ و ﺗﻐﯿﯿﺮ ﻣﻘﺪار ﯾﮏ ‪76 ...................................................................................................................................‬‬ ‫روﯾﺪادﻫﺎي ‪84 ....................................................................................................................................................................................................‬‬ ‫روﯾﺪادﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ ‪85 ....................................................................................................................................................................................................................................................................................................‬‬ ‫ﺣﺬف ﮐﻮﮐﯽ ﻫﺎ ‪91...................................................................................................................‬‬ ‫روﯾﺪاد ﻫﺎي ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ ‪76 ....‬‬ ‫اﻧﺘﺨﺎب ﺧﻮدﮐﺎر ﻣﺘﻦ درون ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ ‪77 ......................‬‬ ‫ﮐﻨﺘﺮل روﯾﺪادﻫﺎ ‪84...............................................................................................................‬‬ ‫اﻧﻮاع روﯾﺪاد ﻫﺎ ‪84...............event‬‬ ‫ﻓﺼﻞ ‪ : 11‬ﮐﺎر ﺑﺎ ﮐﻮﮐﯽ ﻫﺎ ‪89 .............................................................................. textbox‬‬ ‫اﻧﺘﺨﺎب ﻣﺘﻦ ﻫﺎي داﺧﻞ ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ ‪76 .............................................................................................................................................................................................................................................................................................................................................................‬‬ ‫‪VII‬‬ ‫‪1stwebdesigner.............................................................................................................................................................................................................................................................................................................................................................. event‬‬ ‫ﺧﻮاص و ﻣﺘﺪﻫﺎي ﺷﯽ ‪88 .......‬‬ ‫ﺑﺎزﯾﺎﺑﯽ ﮐﻮﮐﯽ ﻫﺎ ‪91..................................................................ir‬‬ .................................................................‬‬ ‫ﺗﺮﺗﯿﺐ اﺟﺮاﯾﯽ روﯾﺪاد ﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ ‪86 ...........................................................‬‬ ‫اﯾﺠﺎد ﮐﻮﮐﯽ ﻫﺎ ‪90.................................‬‬ ‫ﺷﯽ ‪87..... mouse‬‬ ‫ﺗﺮﺗﯿﺐ اﺟﺮاﯾﯽ روﯾﺪادﻫﺎ ‪85 ..............................................................................................................................................

1stwebdesigner.ir .

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

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

‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬

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

‫‪‬‬

‫‪‬‬

‫‪‬‬

‫‪‬‬

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

‫‪3‬‬
‫‪1‬‬

‫‪1‬‬

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

‫‪1stwebdesigner.ir‬‬

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

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

‫‪4‬‬

‫‪1‬‬

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

‫وﯾﮋﮔﯽ ﻫﺎي ﺑﻨﯿﺎدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
‫اﯾﻨﮏ ﺑﻪ ﭼﻨﺪ ﻣﻔﻬﻮم اﺻﻠﯽ در زﺑﺎن ‪ javascript‬ﻣﯽ ﭘﺮدازﯾﻢ‪:‬‬
‫‪‬‬

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

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

‫‪1stwebdesigner.ir‬‬

‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬

‫‪‬‬

‫‪‬‬

‫‪‬‬

‫ﻣﺘﻐﯿﺮﻫﺎ ﺑﺪون ﻧﻮع ﻫﺴﺘﻨﺪ‪ :‬ﺑﺮﺧﻼف زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ java‬و ‪ , C‬ﻣﺘﻐﯿﺮﻫﺎ ﻧﻮع ﺧﺎﺻﯽ ﻧﻤﯽ ﮔﯿﺮﻧﺪ‪ .‬در ﻋﻮض‬
‫ﻫﺮ ﻣﺘﻐﯿﺮ ﻣﯽ ﺗﻮاﻧﺪ ﺑﺎ ﮐﻠﻤﻪ ﮐﻠﯿﺪي ‪ var‬ﺗﻌﺮﯾﻒ ﺷﺪه و ﻣﻘﺪاري را ﺑﻪ ﻋﻨﻮان ﻣﻘﺪار اوﻟﯿﻪ ﺑﭙﺬﯾﺮد‪ .‬در واﻗﻊ ﻣﺘﻐﯿﺮﻫﺎ "ﻣﻘﺪار‬
‫ﮔﺮا" ﻫﺴﺘﻨﺪ‪ .‬ﯾﻌﻨﯽ در ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻌﺮﯾﻒ )ﻣﻘﺪاردﻫﯽ( ﻣﯽ ﺷﻮﻧﺪ ﻧﻮﻋﺸﺎن ﻧﯿﺰ ﻣﺸﺨﺺ ﻣﯽ ﮔﺮدد‪ .‬اﯾﻦ وﯾﮋﮔﯽ اﻣﮑﺎن‬
‫ﺗﻐﯿﯿﺮ ﻧﻮع داده ذﺧﯿﺮه ﺷﺪه در ﯾﮏ ﻣﺘﻐﯿﺮ در ﻫﺮ ﻧﻘﻄﻪ اي از ﺑﺮﻧﺎﻣﻪ را ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫ﻗﺮار دادن );( در اﻧﺘﻬﺎي ﻫﺮ دﺳﺘﻮر اﺧﺘﯿﺎري اﺳﺖ‪ :‬دﺳﺘﻮرات در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ ; ﺧﺘﻢ ﺷﻮﻧﺪ ﯾﺎ‬
‫ﻧﺸﻮﻧﺪ‪ .‬در ﺻﻮرت ﭼﺸﻢ ﭘﻮﺷﯽ از ; ‪ ،‬ﺟﺎوا اﺳﮑﺮﯾﭙﺖ اﻧﺘﻬﺎي ﻫﺮ ﺧﻂ را ﺑﻪ ﻋﻨﻮان ﭘﺎﯾﺎن دﺳﺘﻮر در ﻧﻈﺮ ﺧﻮاﻫﺪ ﮔﺮﻓﺖ‪ .‬ﺑﺎ‬
‫اﯾﻦ ﺣﺎل روش ﺻﺤﯿﺢ ‪ ،‬اﺳﺘﻔﺎده از ; در اﻧﺘﻬﺎي دﺳﺘﻮرات اﺳﺖ‪ .‬ﭼﻮن ﺑﻌﻀﯽ از ﻣﺮورﮔﺮﻫﺎ از روش اول ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽ‬
‫ﮐﻨﺪ و ﻣﻤﮑﻦ اﺳﺖ در اﺟﺮاي ﮐﺪﻫﺎ دﭼﺎر ﻣﺸﮑﻞ ﺷﻮﻧﺪ‪.‬‬
‫درج ﺗﻮﺿﯿﺤﺎت در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ‪ :‬ﺑﺮاي درج ﺗﻮﺿﯿﺤﺎت در ﻣﯿﺎن ﮐﺪﻫﺎ ﻣﯽ ﺗﻮان از روش ﻫﺎي زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ‬
‫ﻧﻮﯾﺴﯽ ﻫﻤﭽﻮن ‪ C‬و ‪ C++‬اﺳﺘﻔﺎده ﻧﻤﻮد ﯾﻌﻨﯽ از ‪ //‬ﺑﺮاي ﺗﻮﺿﯿﺤﺎت ﯾﮏ ﺧﻄﯽ ﯾﺎ ‪ /* */‬ﺑﺮاي ﺗﻮﺿﯿﺤﺎت ﭼﻨﺪ‬
‫ﺧﻄﯽ‪:‬‬

‫‪5‬‬
‫‪1‬‬

‫‪//this is a single-line comment‬‬
‫‪/* this is a multiline‬‬
‫‪comment */‬‬

‫‪1stwebdesigner.ir‬‬

ir .1stwebdesigner.

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

‬‬ ‫ﺑﻘﯿﻪ ﮐﺎراﮐﺘﺮﻫﺎ ﻣﯽﺗﻮاﻧﻨﺪ از ‪ _ ،$‬و ﯾﺎ ﻫﺮ ﺣﺮف و ﻋﺪدي ﺗﺸﮑﯿﻞ ﺷﻮﻧﺪ‪. age=25‬‬ ‫‪var‬‬ ‫ﺑﺮﺧﻼف ﺟﺎوا در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻣﺘﻐﯿﺮﻫﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ ﻣﻘﺪار اوﻟﯿﻪ ﻧﮕﯿﺮﻧﺪ‪. ‪_$test2‬‬ ‫‪var‬‬ ‫‪var‬‬ ‫‪var‬‬ ‫‪var‬‬ ‫اﻟﺒﺘﻪ ﺻﺤﺖ ﻧﺎم ﯾﮏ ﻣﺘﻐﯿﺮ از ﻧﻈﺮ ﻧﺤﻮي‪ ،‬ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﻧﯿﺴﺖ ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﺪ از آن ﻫﺎ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .ir‬‬ .‪test_1='ali' . ‪$1‬‬ ‫.)‪alert(test‬‬ ‫‪// 55‬‬ ‫ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮﻫﺎ‬ ‫ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮﻫﺎ ﻣﯽ ﺑﺎﯾﺴﺖ ﺷﺮاﯾﻂ زﯾﺮ را داﺷﺘﻪ ﺑﺎﺷﺪ‪:‬‬ ‫اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﻣﺘﻐﯿﺮ ﻣﯽ ﺗﻮاﻧﺪ ﯾﮏ ﺣﺮف ‪ . ‪test‬‬ ‫‪‬‬ ‫‪var‬‬ ‫ﺑﺮﺧﻼف ﺟﺎوا ﻣﺘﻐﯿﺮﻫﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ در زﻣﺎنﻫﺎي ﻣﺨﺘﻠﻒ ﻣﻘﺎدﯾﺮ ﻣﺘﻔﺎوﺗﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ .'‪test ='ali‬‬ ‫‪Var‬‬ ‫در اﯾﻦ ﻣﺜﺎل ﻣﺘﻐﯿﺮي ﺑﺎ ﻧﺎم ‪ test‬اﻋﻼن ﺷﺪه و ﻣﻘﺪار اوﻟﯿﻪ '‪ 'ali‬را ﻣﯽﮔﯿﺮد‪.‬‬ ‫.‫ﻣﺘﻐﯿﺮﻫﺎ و اﻧﻮاع داده ﻫﺎ‬ ‫ﻣﺘﻐﯿﺮﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫‪8‬‬ ‫‪2‬‬ ‫ﻣﺘﻐﯿﺮ ﻫﺎ ﺑﺎ ﮐﻠﻤﻪ ‪ var‬ﺗﻌﺮﯾﻒ ﻣﯽ ﺷﻮﻧﺪ‪ . test2='salam‬‬ ‫‪var‬‬ ‫ﺑﺎﯾﺪ ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ﻣﺘﻐﯿﺮﻫﺎﯾﯽ ﮐﻪ ﺑﺎ ﯾﮏ ‪ var‬ﺗﻌﺮﯾﻒ ﻣﯽ ﺷﻮد ﻣﻤﮑﻦ اﺳﺖ ﻧﻮع ﯾﮑﺴﺎﻧﯽ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﻨﺪ‪. '‪test 1='ali' .‬ﺑﻬﺘﺮ اﺳﺖ در ﻧﺎﻣﮕﺬاري‬ ‫ﻣﺘﻐﯿﺮﻫﺎ از ﯾﮑﯽ از ﻗﺮاردادﻫﺎي ﺷﻨﺎﺧﺘﻪ ﺷﺪه زﯾﺮ ﺗﺒﻌﯿﺖ ﮐﻨﯿﺪ‪:‬‬ ‫‪1stwebdesigner. "‪var test ="hi‬‬ ‫.‬‬ ‫ﻫﻤﭽﻨﯿﻦ ﻣﯽﺗﻮاﻧﯿﻢ دو ﯾﺎ ﭼﻨﺪ ﻣﺘﻐﯿﺮ را ﻫﻤﺰﻣﺎن ﺗﻌﺮﯾﻒ ﮐﻨﯿﻢ‪:‬‬ ‫.)‪alert(test‬‬ ‫‪// hi‬‬ ‫. ‪$test‬‬ ‫.‬‬ ‫ﺗﻤﺎم ﻣﺘﻐﯿﺮﻫﺎي زﯾﺮ ﺻﺤﯿﺢ ﻫﺴﺘﻨﺪ‪:‬‬ ‫. ‪test‬‬ ‫.‬اﯾﻦ ﯾﮑﯽ از اﻣﺘﯿﺎزات ﻣﺘﻐﯿﺮﻫﺎي‬ ‫ﺑﺪون ﻧﻮع در زﺑﺎن ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﺷﻤﺎر ﻣﯽ رود‪ .‪test=55‬‬ ‫.‬ﻣﺎﻧﻨﺪ‪:‬‬ ‫.‬ﺑﻪ ﻣﺜﺎل زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬ ‫.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﯾﮏ ﻣﺘﻐﯿﺮ ﻣﯽ ﺗﻮاﻧﺪ ﺑﺎﯾﺪ ﯾﮏ ﻣﻘﺪار رﺷﺘﻪاي‬ ‫ﻣﻘﺪاردﻫﯽ اوﻟﯿﻪ ﺷﺪه و ﺳﭙﺲ در اداﻣﻪ ﺑﺮﻧﺎﻣﻪ ﺑﻪ ﯾﮏ ﻣﻘﺪار ﻋﺪدي ﺗﻐﯿﯿﺮ ﮐﻨﺪ‪ .‬‬ ‫ﭼﻮن ﻣﺘﻐﯿﺮﻫﺎ ﺑﺪون ﻧﻮع ﻫﺴﺘﻨﺪ ﻣﻔﺴﺮ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺧﻮد ﺑﻪ ﺧﻮد ﻧﻮع ‪ test‬را رﺷﺘﻪ در ﻧﻈﺮ ﻣﯽﮔﯿﺮد‪.‬ﯾﮏ ‪ ( _ ) underline‬و ﯾﺎ ﯾﮏ ﻋﻼﻣﺖ ‪ $‬ﺑﺎﺷﺪ‪.‬‬ ‫.

mySecondTestValue = “hi‬‬ ‫‪‬‬ ‫ﻧﺸﺎﻧﻪ ﮔﺬاري ﭘﺎﺳﮑﺎل‪ :‬در اﯾﻦ روش ﺣﺮف اول ﻣﺘﻐﯿﺮ و ﺣﺮف اول ﺑﻘﯿﻪ ﮐﻠﻤﺎت ﺑﻪ ﺻﻮرت ﺑﺰرگ ﻧﻮﺷﺘﻪ ﻣﯽ ﺷﻮد‪ .‬ﺑﺎ اﯾﻦ وﺟﻮد ﭘﯿﺸﻨﻬﺎد ﻣﯽ ﺷﻮد ﻫﻤﯿﺸﻪ ﻗﺒﻞ از ﺑﻪ ﮐﺎرﮔﯿﺮي ﻣﺘﻐﯿﺮﻫﺎ آن‬ ‫ﻫﺎ را اﻋﻼن ﮐﻨﯿﺪ‪."‪sTest2=sTest + "world‬‬ ‫‪alert (sTest2).‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪‬‬ ‫ﻧﺸﺎﻧﻪ ﮔﺬاري ﺷﺘﺮي‪ :1‬در اﯾﻦ ﻗﺮارداد‪ ،‬ﺣﺮف اول ﻣﺘﻐﯿﺮ ﮐﻮﭼﮏ و ﺣﺮف اول ﺑﻘﯿﻪ ﮐﻠﻤﺎت ﺑﻪ ﺻﻮرت ﺑﺰرگ ﻧﻮﺷﺘﻪ ﻣﯽ‬ ‫ﺷﻮد‪ .”‪var iMyTestValue = 0.”‪var MyTestValue = 0.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‪:‬‬ ‫. MySecondTestValue = “hi‬‬ ‫‪‬‬ ‫‪9‬‬ ‫‪2‬‬ ‫ﻧﺸﺎﻧﻪ ﮔﺬاري ﻣﺠﺎرﺳﺘﺎﻧﯽ‪ :‬در اﯾﻦ روش از ﯾﮏ ﯾﺎ دﻧﺒﺎﻟﻪ اي از ﭘﯿﺸﻮﻧﺪﻫﺎ ﻗﺒﻞ از ﻧﺸﺎﻧﻪ ﮔﺬاري ﭘﺎﺳﮑﺎل ﺑﺮاي ﺗﻌﯿﯿﻦ ﻧﻮع‬ ‫ﯾﮏ ﻣﺘﻐﯿﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .”‪var myTestValue = 0.‬‬ ‫‪Camel Notation‬‬ ‫‪1‬‬ ‫‪1stwebdesigner.‬‬ ‫ﻧﻮع‬ ‫ﭘﯿﺸﻮﻧﺪ‬ ‫ﻧﻤﻮﻧﻪ‬ ‫آراﯾﻪ‬ ‫‪a‬‬ ‫‪aValues‬‬ ‫ﺑﻮﻟﯿﻦ‬ ‫‪b‬‬ ‫‪bFaound‬‬ ‫ﻋﺪد اﻋﺸﺎري‬ ‫‪f‬‬ ‫‪fValue‬‬ ‫ﻋﺪد ﺻﺤﯿﺢ‬ ‫‪i‬‬ ‫‪iValue‬‬ ‫ﺗﺎﺑﻊ‬ ‫‪fn‬‬ ‫‪fnMethod‬‬ ‫ﺷﯽ‬ ‫‪o‬‬ ‫‪oType‬‬ ‫رﺷﺘﻪ‬ ‫‪s‬‬ ‫‪sValue‬‬ ‫ﯾﮑﯽ دﯾﮕﺮ از اﻣﺘﯿﺎزات و ﯾﺎ ﺷﺎﯾﺪ ﺟﺬاﺑﯿﺖ ﻫﺎي ‪) javascript‬ﮐﻪ در ﺑﺴﯿﺎري از زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ دﯾﮕﺮ وﺟﻮد ﻧﺪارد( اﯾﻦ‬ ‫اﺳﺖ ﮐﻪ ﻻزم ﻧﯿﺴﺖ ﻣﺘﻐﯿﺮ ﻫﺎ را ﻗﺒﻞ از ﻣﻘﺪار دﻫﯽ‪ ،‬اﻋﻼن ﮐﻨﯿﻢ‪:‬‬ ‫.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‪:‬‬ ‫.‬ﻣﺎ در اﯾﻦ ﺟﺰوه از اﯾﻦ‬ ‫ﭘﯿﺸﻮﻧﺪﻫﺎ ﺑﺮاي ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮﻫﺎ اﺳﺘﻔﺎده ﮐﺮده اﯾﻢ‪."‪var sTest="hello‬‬ ‫.ir‬‬ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﮐﺎراﮐﺘﺮ ‪ i‬ﺑﻪ ﻣﻌﻨﯽ ﻋﺪد ﺻﺤﯿﺢ و ‪ s‬ﺑﻪ ﻣﻌﻨﯽ رﺷﺘﻪ اﺳﺖ‪ .‬‬ ‫ﻣﻮﻗﻌﯽ ﮐﻪ ﻣﻔﺴﺮ ﺑﻪ ﭼﻨﯿﻦ ﻣﺘﻐﯿﺮﻫﺎي ﮐﻪ ﺑﺪون اﻋﻼن‪ ،‬ﻣﻘﺪاردﻫﯽ ﻣﯽ ﺷﻮﻧﺪ ‪ .‬ﺑﺮﺧﻮرد ﻣﯽ ﮐﻨﺪ‪ ،‬ﯾﮏ ﻣﺘﻐﯿﺮ ﺳﺮاﺳﺮي ﺑﻪ ﻫﻤﺎن ﻧﺎم‬ ‫اﯾﺠﺎد ﮐﺮده و ﻣﻘﺪاري را ﺑﻪ آن اﺧﺘﺼﺎص ﻣﯽ دﻫﺪ‪ .‬ﺑﻪ‬ ‫ﻋﻨﻮان ﻣﺜﺎل‪:‬‬ ‫. sMySecondTestValue = “hi‬‬ ‫ﺟﺪول زﯾﺮ ﻟﯿﺴﺘﯽ از ﭘﯿﺸﻮﻧﺪﻫﺎي ﻣﻮﺟﻮد ﺑﻪ ﻣﻨﻈﻮر اﺳﺘﻔﺎده در ﻧﺸﺎﻧﻪﮔﺬاري ﻣﺠﺎرﺳﺘﺎﻧﯽ را ﻧﺸﺎن ﻣﯽ دﻫﺪ‪ . // hello world‬‬ ‫در ﻣﺜﺎل ﻓﻮق ﻣﺘﻐﯿﺮ ‪ sTest2‬ﻗﺒﻞ از ﻣﻘﺪاردﻫﯽ اﻋﻼن ﻧﺸﺪه اﺳﺖ‪.

‬ﻟﯿﺴﺖ ﮐﺎﻣﻠﯽ از اﯾﻦ ﮐﻠﻤﺎت را در زﯾﺮ ﻣﺸﺎﻫﺪه ﻣﯽ ﮐﻨﯿﺪ‪:‬‬ ‫‪short‬‬ ‫‪static‬‬ ‫‪super‬‬ ‫‪synchronized‬‬ ‫‪throws‬‬ ‫‪transient‬‬ ‫‪volatile‬‬ ‫‪int‬‬ ‫‪interface‬‬ ‫‪long‬‬ ‫‪native‬‬ ‫‪package‬‬ ‫‪private‬‬ ‫‪protected‬‬ ‫‪public‬‬ ‫‪enum‬‬ ‫‪export‬‬ ‫‪extends‬‬ ‫‪final‬‬ ‫‪float‬‬ ‫‪goto‬‬ ‫‪implements‬‬ ‫‪import‬‬ ‫‪Abstract‬‬ ‫‪Boolean‬‬ ‫‪Byte‬‬ ‫‪Char‬‬ ‫‪Class‬‬ ‫‪Const‬‬ ‫‪Debugger‬‬ ‫‪Double‬‬ ‫اﻧﻮاع داده ﻫﺎي اﺻﻠﯽ‬ ‫در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﭘﻨﺞ ﻧﻮع داده اﺻﻠﯽ ﺑﻪ ﺷﺮح زﯾﺮ وﺟﻮد دارد‪:‬‬ ‫‪undefined‬‬ ‫‪null‬‬ ‫‪boolean‬‬ ‫‪number‬‬ ‫‪string‬‬ ‫از ﻋﻤﻠﮕﺮ ‪ typeof‬ﺑﺮاي ﺗﺸﺨﯿﺺ ﻧﻮع ﯾﮏ ﻣﻘﺪار اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬‬ ‫اﯾﻦ ﻋﻤﻠﮕﺮ ﯾﮑﯽ از ﭘﻨﺞ ﻣﻘﺪار زﯾﺮ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪:‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪ :undefined‬اﮔﺮ ﻣﺘﻐﯿﺮ از ﻧﻮع ‪ Undefined‬اﺳﺖ‪.‬اﯾﻦ ﻋﻤﻠﮕﺮ ﯾﮏ ﭘﺎراﻣﺘﺮ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﯾﮏ ﻣﺘﻐﯿﺮ و ﯾﺎ ﯾﮏ‬ ‫ﻣﻘﺪار ﺑﺎﺷﺪ را درﯾﺎﻓﺖ ﮐﺮده و ﻧﻮع آن را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬ ‫ﮐﻠﻤﺎت رزرو ﺷﺪه‬ ‫‪2‬‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻌﺪادي از ﮐﻠﻤﺎت رزرو ﺷﺪه را ﻧﯿﺰ ﻣﻌﺮﻓﯽ ﮐﺮده اﺳﺖ‪ .‬ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﺑﻪ ﻋﻨﻮان ﮐﻠﻤﺎت رزرو ﺷﺪه ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮﻧﺪ و ﻧﻤﯽ ﺗﻮان از آن ﻫﺎ ﺑﻪ ﻋﻨﻮان ﻧﺎم ﻣﺘﻐﯿﺮ ﻫﺎ ﯾﺎ‬ ‫ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﻧﻤﻮد‪ .‬اﯾﻦ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﻌﻤﻮﻻ اﺑﺘﺪا ﯾﺎ اﻧﺘﻬﺎي دﺳﺘﻮرات را‬ ‫ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﻨﺪ‪ .‫ﻣﺘﻐﯿﺮﻫﺎ و اﻧﻮاع داده ﻫﺎ‬ ‫ﮐﻠﻤﺎت ﮐﻠﯿﺪي‬ ‫‪10‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻌﺪادي از ﮐﻠﻤﺎت را ﺑﻪ ﻋﻨﻮان ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﯽ ﺷﻨﺎﺳﺪ‪ .‬در زﯾﺮ ﻟﯿﺴﺖ ﮐﺎﻣﻠﯽ از اﯾﻦ ﮐﻠﻤﺎت را ﻣﺸﺎﻫﺪه ﻣﯽ ﮐﻨﯿﺪ‪:‬‬ ‫‪var‬‬ ‫‪void‬‬ ‫‪while‬‬ ‫‪with‬‬ ‫‪new‬‬ ‫‪return‬‬ ‫‪switch‬‬ ‫‪this‬‬ ‫‪throw‬‬ ‫‪try‬‬ ‫‪typeof‬‬ ‫‪else‬‬ ‫‪finally‬‬ ‫‪for‬‬ ‫‪function‬‬ ‫‪if‬‬ ‫‪in‬‬ ‫‪instanceof‬‬ ‫‪Break‬‬ ‫‪Case‬‬ ‫‪Catch‬‬ ‫‪Continue‬‬ ‫‪Default‬‬ ‫‪Delete‬‬ ‫‪Do‬‬ ‫اﮔﺮ از ﯾﮑﯽ از ﮐﻠﻤﺎت ﻓﻮق ﺑﺮاي ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮ ﻫﺎ ﯾﺎ ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﺑﺎ ﺧﻄﺎي ‪ Identifier expected‬روﺑﺮو ﺧﻮاﻫﯿﺪ ﺷﺪ‪.‬‬ ‫‪ :boolean‬اﮔﺮ ﻣﺘﻐﯿﺮ از ﻧﻮع ‪ Boolean‬ﺑﺎﺷﺪ‪.ir‬‬ .‬‬ ‫‪Keywords‬‬ ‫‪Reserved Words‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪1stwebdesigner.‬ﮐﻠﻤﺎت رزرو ﺷﺪه ﻧﯿﺰ ﻧﻤﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ ﻋﻨﻮان ﻧﺎم ﻣﺘﻐﯿﺮ ﻫﺎ و‬ ‫ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﺷﻮﻧﺪ‪ .

‬‬ ‫‪ :string‬اﮔﺮ ﻣﺘﻐﯿﺮ از ‪ String‬ﺑﺎﺷﺪ‪.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪ :number‬اﮔﺮ ﻣﺘﻐﯿﺮ از ﻧﻮع ‪ Number‬ﺑﺎﺷﺪ‪.‬‬ ‫"‪// outputs "undefined‬‬ ‫"‪// outputs "undefined‬‬ ‫. //causes error‬‬ ‫ﺧﺮوﺟﯽ ﺗﺎﺑﻌﯽ ﮐﻪ در داﺧﻞ ﺑﺪﻧﻪ ﺧﻮد ﻣﻘﺪاري را ﺻﺮاﺣﺘﺎ ﺑﺮﻧﻤﯽ ﮔﺮداﻧﺪ ﻧﯿﺰ ﻣﻘﺪار ‪ uindefined‬اﺳﺖ‪:‬‬ ‫{ )( ‪function Testfunc‬‬ ‫‪// leave the function black‬‬ ‫}‬ ‫”‪alert( TestFunc() == undefined ).‬‬ ‫ﻧﻮع داده ‪Undefind‬‬ ‫اﯾﻦ ﻧﻮع ﻓﻘﻂ ﺷﺎﻣﻞ ﻣﻘﺪار ‪ Undefined‬ﻣﯽ ﺷﻮد‪ .‬ﻫﺮ ﭼﻨﺪ ﮐﻪ ﻋﻤﻠﮕﺮ ‪ typeof‬ﺑﯿﻦ اﯾﻦ دو ﺗﻔﺎوﺗﯽ ﻗﺎﺋﻞ ﻧﻤﯽ ﺷﻮد و ﺑﺮاي ﻫﺮ دو ﻣﺘﻐﯿﺮ‪ ،‬ﻣﻘﺪار ‪ undefined‬را‬ ‫ﺑﺮﻣﯽﮔﺮداﻧﺪ‪ ،‬اﮔﺮ ﭼﻪ ﻓﻘﻂ ﯾﮑﯽ از آن ﻫﺎ در ﻣﺜﺎل زﯾﺮ )‪ (oTemp2‬ﺗﻌﺮﯾﻒ ﺷﺪه اﺳﺖ‪. //outputs “true‬‬ ‫ﻧﻮع داده ‪Null‬‬ ‫دﯾﮕﺮ ﻧﻮع داده ﮐﻪ ﻓﻘﻂ ﯾﮏ ﻣﻘﺪار دارد‪ null ،‬اﺳﺖ ﮐﻪ ﻣﻘﺪار وﯾﮋه ‪ null‬را ﻣﯽ ﮔﯿﺮد‪.‬ﺗﻨﻬﺎ زﻣﺎﻧﯽ ﺑﻪ ﯾﮏ ﻣﺘﻐﯿﺮ ﻧﺴﺒﺖ داده ﻣﯽ ﺷﻮد ﮐﻪ آن ﻣﺘﻐﯿﺮ‬ ‫اﻋﻼن ﺷﻮد وﻟﯽ ﻣﻘﺪاردﻫﯽ ﻧﺸﻮد‪ . )‪alert (typeof oTemp‬‬ ‫.‬‬ ‫‪ :object‬اﮔﺮ ﻣﺘﻐﯿﺮ ﯾﮏ ارﺟﺎع ﯾﺎ از ﻧﻮع ‪ null‬ﺑﺎﺷﺪ‪.‬ﻣﺘﻐﯿﺮي ﮐﻪ اﻋﻼن ﺷﻮد وﻟﯽ ﻣﻘﺪار دﻫﯽ اوﻟﯿﻪ ﻧﺸﻮد ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض از‬ ‫ﻧﻮع ‪ Undefined‬ﺧﻮاﻫﺪ ﺑﻮد‪. ‪var oTemp‬‬ ‫.‪//var oTemp2‬‬ ‫‪//try outputting‬‬ ‫‪alert(oTemp2 == undefined). )‪alert (typeof oTemp2‬‬ ‫اﮔﺮ از ‪ oTemp2‬ﺑﻪ وﺳﯿﻠﻪ ي ﻫﺮ ﻋﻤﻠﮕﺮي ﺑﻪ ﻏﯿﺮ از ‪ typeof‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﯾﮏ ﺧﻄﺎ رخ ﺧﻮاﻫﺪ داد‪:‬‬ ‫‪//make sure this variable isn’t defined‬‬ ‫.‬‬ ‫"‪// outputs "Undefined‬‬ ‫.ir‬‬ .‬در ﺣﺎﻟﯽ ﮐﻪ ﯾﮏ ﻣﺘﻐﯿﺮ زﻣﺎﻧﯽ از ﻧﻮع ‪ null‬اﺳﺖ ﮐﻪ اﺷﺎره ﺑﻪ ﺷﯽ اي داﺷﺘﻪ ﺑﺎﺷﺪ ﮐﻪ وﺟﻮد‬ ‫ﻧﺪارد‪.‬‬ ‫‪1stwebdesigner. )‪oTemp‬‬ ‫‪11‬‬ ‫‪2‬‬ ‫.‬‬ ‫از ﻧﻈﺮ ‪ javascript‬ﻧﻮع ‪ undefined‬ﯾﮑﯽ از ﻣﺸﺘﻘﺎت ﻧﻮع ‪ null‬اﺳﺖ و اﯾﻦ دو ﻣﻌﺎدل ﯾﮑﺪﯾﮕﺮﻧﺪ‪:‬‬ ‫”‪alert(null == undefined). ‪var oTemp‬‬ ‫‪alert (typeof‬‬ ‫ﺑﻪ اﯾﻦ ﻧﮑﺘﻪ ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ ﻣﺘﻐﯿﺮي ﮐﻪ اﻋﻼن ﻣﯽ ﺷﻮد و ﻣﻘﺪار ﻧﻤﯽ ﮔﯿﺮد ﺑﺎ ﻣﺘﻐﯿﺮي ﮐﻪ اﺻﻶ اﻋﻼن ﻫﻢ ﻧﺸﺪه اﺳﺖ‬ ‫ﮐﺎﻣﻼ ﻣﺘﻔﺎوت اﺳﺖ‪ . //outputs “true‬‬ ‫اﮔﺮ ﭼﻪ اﯾﻦ دو ﻣﻌﺎدل ﯾﮑﺪﯾﮕﺮﻧﺪ اﻣﺎ ﻣﻌﺎﻧﯽ ﻣﺘﻔﺎوﺗﯽ دارﻧﺪ‪ undefined .

‪var fNum = 5.‬اﮔﺮ ﭼﻪ ﺑﺮ ﺧﻼف زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﻣﺘﺪاول‪ ،‬در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ‬ ‫‪ false‬ﺑﺎ ‪ 0‬ﺑﺮاﺑﺮ ﻧﯿﺴﺖ اﻣﺎ در ﺻﻮرت ﻟﺰوم )و ﺑﺮاي اﺳﺘﻔﺎده در ﻋﺒﺎرت ﻫﺎي ﺑﻮﻟﯽ( ‪ 0‬ﺑﻪ ‪ false‬ﺗﺒﺪﯾﻞ ﺧﻮاﻫﺪ ﺷﺪ‪ .‬‬ ‫ﺑﺮاي ﺗﻌﺮﯾﻒ ﯾﮏ ﻣﺘﻐﯿﺮ رﺷﺘﻪ اي ﺑﺎﯾﺪ از ) ' ( ﯾﺎ ) " ( اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ .‬ﻣﻌﻤﻮﻵ ﺑﺮاي ﺗﻌﺮﯾﻒ ﯾﮏ ﮐﺎراﮐﺘﺮ از ) ' ( و ﺑﺮاي ﺗﻌﺮﯾﻒ ﯾﮏ‬ ‫رﺷﺘﻪ از ) " ( اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬ﻫﺮ ﮐﺎراﮐﺘﺮ در ﯾﮏ رﺷﺘﻪ ﻣﻮﻗﻌﯿﺘﯽ دارد‪ .ir‬‬ ."‪var sColor1 = "blue‬‬ ‫.‬از اﯾﻦ ﻧﻮع داده ﻣﯽ ﺗﻮان ﺑﺮاي ﻧﻤﺎﯾﺶ اﻋﺪاد ﺻﺤﯿﺢ ‪ 8‬ﺑﺎﯾﺘﯽ و اﻋﺪاد اﻋﺸﺎري ‪16‬‬ ‫ﺑﺎﯾﺘﯽ اﺳﺘﻔﺎده ﮐﺮد‪.‬ﻣﻮﻗﻌﯿﺖ اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ‬ ‫ﺻﻔﺮ اﺳﺖ‪.'‪var sColor2 = 'blue‬‬ ‫ﺗﺒﺪﯾﻞ اﻧﻮاع‬ ‫ﯾﮑﯽ از وﯾﮋﮔﯽ ﻫﺎي ﺑﺮﺟﺴﺘﻪ ﻫﺮ زﺑﺎن ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﻗﺎﺑﻠﯿﺖ ﺗﺒﺪﯾﻞ اﻧﻮاع در آن اﺳﺖ‪ .‪var bFound = true‬‬ ‫.‫ﻣﺘﻐﯿﺮﻫﺎ و اﻧﻮاع داده ﻫﺎ‬ ‫ﻧﻮع داده ‪Boolean‬‬ ‫‪12‬‬ ‫‪2‬‬ ‫ﻧﻮع ‪ Boolean‬ﯾﮑﯽ از ﭘﺮﮐﺎرﺑﺮدﺗﺮﯾﻦ اﻧﻮاع داده در زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺑﻪ ﺷﻤﺎر ﻣﯽ رود و ﻣﺘﻐﯿﺮي از اﯾﻦ ﻧﻮع ﻓﻘﻂ ﻣﯽ ﺗﻮاﻧﺪ‬ ‫ﯾﮑﯽ از دو ﻣﻘﺪار ‪ true‬ﯾﺎ ‪ false‬ﺑﻪ ﻋﻨﻮان ﻣﻘﺪار ﺑﭙﺬﯾﺮد‪ .‬اﮐﺜﺮ اﻧﻮاع ﻣﻮﺟﻮد در ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﻣﺘﺪﻫﺎﯾﯽ ﺑﺮاي ﺗﺒﺪﯾﻞ ﺑﻪ‬ ‫ﺳﺎﯾﺮ اﻧﻮاع ﭘﺸﺘﯿﺒﺎﻧﯽ ﮐﺮده و ﺗﻮاﺑﻌﯽ ﺳﺮاﺳﺮي ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ﺑﻪ روش ﻫﺎي ﭘﯿﭽﯿﺪه ﺗﺮ وﺟﻮد دارد‪.‪var iNum = 55‬‬ ‫ﺑﺮاي ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮﻫﺎي اﻋﺸﺎري ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻣﯽ ﺷﻮد‪:‬‬ ‫.‬‬ ‫‪1stwebdesigner.‬‬ ‫.‬‬ ‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻣﺘﻐﯿﺮ زﯾﺮ از ﻧﻮع ﺻﺤﯿﺢ اﺳﺖ و ﻣﻘﺪار اوﻟﯿﻪي ‪ 55‬را دارد‪:‬‬ ‫.0‬‬ ‫ﻧﻮع داده ‪String‬‬ ‫اﯾﻦ ﻧﻮع ﻣﯽ ﺗﻮاﻧﺪ ﺑﺮاي ذﺧﯿﺮه ﺻﻔﺮ ﯾﺎ ﭼﻨﺪﯾﻦ ﮐﺎراﮐﺘﺮ ﺑﻪ ﮐﺎر رود‪ .‪var bLost = false‬‬ ‫ﻧﻮع داده ‪Number‬‬ ‫اﯾﻦ ﻧﻮع ﻧﯿﺰ ﯾﮑﯽ از ﭘﺮﮐﺎرﺑﺮدﺗﺮﯾﻦ اﻧﻮاع اﺳﺖ‪ .‬ﺑﻪ ﻣﺜﺎل ﻫﺎي‬ ‫زﯾﺮ ﺗﻮﺟﻪ ﮐﻨﯿﺪ‪:‬‬ ‫.‬ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻧﯿﺰ از اﯾﻦ ﻗﺎﻋﺪه ﻣﺴﺘﺜﻨﯽ‬ ‫ﻧﺒﻮده و روش ﻫﺎي ﺳﺎده اي ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ﻓﺮاﻫﻢ آورده اﺳﺖ‪ .

toString()).‪var iNum1 = 10‬‬ ‫. //outputs “10‬‬ ‫”‪alert(fNum2.‬اﯾﻦ روﻧﺪ ﺗﺎ آﺧﺮﯾﻦ ﮐﺎراﮐﺘﺮ اداﻣﻪ ﭘﯿﺪا ﻣﯽﮐﻨﺪ ﺗﺎ اﯾﻨﮑﻪ ﺑﻪ ﮐﺎراﮐﺘﺮي ﻏﯿﺮ ﻋﺪدي ﺑﺮﺳﺪ‪ .length‬اﺳﺘﻔﺎده ﻧﻤﻮد‪:‬‬ ‫”‪//outputs “4‬‬ ‫‪13‬‬ ‫‪2‬‬ ‫.5‬‬ ‫‪//returns 22‬‬ ‫.‬‬ ‫اﯾﻦ ﻣﺘﺪ ﻫﺎ ﻓﻘﻂ ﺑﺮ روي رﺷﺘﻪ ﻫﺎي ﺣﺎوي ﻋﺪد ﮐﺎر ﻣﯽ ﮐﻨﻨﺪ و ﺑﺮ روي ﺑﻘﯿﻪ اﻧﻮاع ﻣﻘﺪار ‪ NaN‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﻨﺪ‪. //outputs “10‬‬ ‫ﺗﺒﺪﯾﻞ ﺑﻪ ﻋﺪد‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ دو ﻣﺘﺪ ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ﻏﯿﺮ ﻋﺪدي ﺑﻪ ﻋﺪدي ﻓﺮاﻫﻢ ﮐﺮده اﺳﺖ‪:‬‬ ‫)(‪praseInt‬‬ ‫)(‪parseFloat‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫ﻧﮑﺘﻪ‪ :‬ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ ﺣﺮوف ‪ I‬و ‪ F‬ﺑﺎﯾﺪ ﺑﻪ ﺻﻮرت ﺣﺮف ﺑﺰرگ ﻧﻮﺷﺘﻪ ﺷﻮﻧﺪ‪.)"‪var iNum4 = parseInt("blue‬‬ ‫‪//returns NaN‬‬ ‫ﻣﺘﺪ )(‪ parseFloat‬ﻧﯿﺰ ﻣﺜﻞ )(‪ parseInt‬ﻋﻤﻞ ﮐﺮده و از اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﺷﺮوع ﺑﻪ ﺟﺴﺘﺠﻮ ﻣﯽ ﮐﻨﺪ‪ .‪var bFound = false‬‬ ‫”‪alert(bFound. )‪alert (sColor.‬‬ ‫‪Pseudo-Objects‬‬ ‫‪1‬‬ ‫‪1stwebdesigner. "‪var sColor = "blue‬‬ ‫.‬‬ ‫ﻣﺘﺪ )(‪ .‬‬ ‫‪var iNum1 = parseInt(“1234blue”).‪var fNum2 = 10.‬اﻟﺒﺘﻪ در اﯾﻦ ﻣﺘﺪ اوﻟﯿﻦ‬ ‫ﮐﺎراﮐﺘﺮ ﻧﻘﻄﻪ ﺣﺴﺎب ﻧﻤﯽ ﺷﻮد و آن را ﺑﻪ ﻫﻤﺎن ﺻﻮرت ﺑﺮﻣﯽﮔﺮداﻧﺪ‪.‬‬ ‫اﯾﻦ ﻣﺘﺪ ﺑﺮاي ﻣﺘﻐﯿﺮﻫﺎي از ﻧﻮع ‪ Boolean‬ﯾﮑﯽ از ﻣﻘﺎدﯾﺮ رﺷﺘﻪ اي ‪ true‬و ‪ false‬را ﺑﺴﺘﻪ ﺑﻪ ﻣﻘﺪار ﻣﺘﻐﯿﺮ ﺑﺮﻣﯽﮔﺮداﻧﺪ‪:‬‬ ‫.toString()).parseInt‬از اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ رﺷﺘﻪ ﺷﺮوع ﻣﯽ ﮐﻨﺪ اﮔﺮ ﻋﺪد ﺑﻮد آن را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ﻣﻘﺪار ‪ NaN‬را ﺑﺮﻣﯽ‬ ‫ﮔﺮداﻧﺪ‪ .ir‬‬ .toString()).)"‪var iNum3 = parseInt("22. //outputs “false‬‬ ‫اﯾﻦ ﻣﺘﺪ ﺑﺮاي ﻣﺘﻐﯿﺮ ﻫﺎي از ﻧﻮع ‪ number‬رﺷﺘﻪ اي ﺣﺎوي آن ﻋﺪد را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪:‬‬ ‫.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫ﺗﺒﺪﯾﻞ ﺑﻪ رﺷﺘﻪ‬ ‫ﯾﮑﯽ از ﺟﺬاﺑﺘﺮﯾﻦ وﯾﮋﮔﯽ ﻫﺎﯾﯽ ﮐﻪ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ در راﺑﻄﻪ ﺑﺎ اﻧﻮاع اﺻﻠﯽ ‪ numbers ، boolean‬و ‪ string‬ﻓﺮاﻫﻢ ﮐﺮده اﺳﺖ‬ ‫اﯾﻦ اﺳﺖ ﮐﻪ آﻧﻬﺎ در اﺻﻞ اﺷﯿﺎي ﮐﺎذب‪ 1‬ﻫﺴﺘﻨﺪ‪ ،‬ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ داراي ﺧﺎﺻﯿﺖ ﻫﺎ و ﻣﺘﺪﻫﺎي ﻣﺸﺘﺮك و ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮدي ﻣﯽ‬ ‫ﺑﺎﺷﻨﺪ‪.0‬‬ ‫”‪alert(iNum1.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﯾﻦ ﻣﺘﺪ ﻋﺒﺎرت‬ ‫"‪ "123red‬را ﺑﻪ ﺻﻮرت ‪ 123‬ﺑﺮﻣﯽﮔﺮداﻧﺪ‪. //returns 1234‬‬ ‫.length‬‬ ‫ﺳﻪ ﻧﻮع داده ‪ number ، boolean‬و ‪ string‬ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ .tostring‬ﺑﺮاي ﺗﺒﺪﯾﻞ ﺑﻪ رﺷﺘﻪ دارﻧﺪ‪.‬‬ ‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي ﺑﺪﺳﺖ آوردن ﻃﻮل ﯾﮏ رﺷﺘﻪ ﻣﯽ ﺗﻮان از ﺧﺎﺻﯿﺖ ‪ .

)”‪parseFloat(“blue‬‬ ‫‪fNum1‬‬ ‫‪fNum3‬‬ ‫‪fNum4‬‬ ‫‪fNum6‬‬ ‫=‬ ‫=‬ ‫=‬ ‫=‬ ‫‪var‬‬ ‫‪var‬‬ ‫‪var‬‬ ‫‪var‬‬ ‫اﺳﺘﻔﺎده از ‪ Type Casting‬ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع‬ ‫در ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﻣﮑﺎن اﺳﺘﻔﺎده از روﺷﯽ ﻣﻮﺳﻮم ﺑﻪ ‪ Type Casting‬ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع وﺟﻮد دارد‪ .0‬‬ ‫‪//returns 22.‬در ﻣﺜﺎل زﯾﺮ ﺣﺎﺻﻞ اﺟﺮاي ﺗﺎﺑﻊ )(‪ Number‬ﺑﺮاي اﻧﻮاع داده ﻫﺎ را ﻧﺸﺎن ﻣﯽ دﻫﺪ‪:‬‬ ‫‪0‬‬ ‫‪1‬‬ ‫‪NaN‬‬ ‫‪0‬‬ ‫‪5.5‬‬ ‫‪//returns 22.‬ﻣﺜﺎل ﻫﺎ‪:‬‬ ‫‪//returns 1234.7‬‬ ‫))(‪Number(new Object‬‬ ‫)‪Number(100‬‬ ‫‪1stwebdesigner.)”“(‪Boolean‬‬ ‫.)”‪parseFloat(“22.‬‬ ‫اﮔﺮ ﺑﻪ ﯾﺎد داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﻣﺘﺪﻫﺎي )(‪ parseInt‬و )(‪ parseFloat‬آرﮔﻮﻣﺎن درﯾﺎﻓﺘﯽ را ﻓﻘﻂ ﺗﺎ اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﺑﯽ ارزش ﺑﺮ ﻣﯽ‬ ‫ﮔﺮداﻧﺪﻧﺪ‪ .‬‬ ‫اﮔﺮ رﺷﺘﻪ اي اﻣﮑﺎن ﺗﺒﺪﯾﻞ ﺑﻪ ﯾﮏ ﻋﺪد را داﺷﺘﻪ ﺑﺎﺷﺪ ﻣﺘﺪ )(‪ Number‬ﺧﻮد‪ ،‬ﺑﺮاي اﺳﺘﻔﺎده از ﯾﮑﯽ از ﺗﻮاﺑﻊ )(‪ parseInt‬ﯾﺎ‬ ‫)(‪ parseFloat‬ﺗﺼﻤﯿﻢ ﻣﯽ ﮔﯿﺮد‪ .‬ﻣﺜﻼ رﺷﺘﻪ ”‪ “4.‬ﺳﻪ ﻧﻮع ‪ type casting‬در‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ وﺟﻮد دارد‪:‬‬ ‫)( ‪ Boolean‬‬ ‫)( ‪ Number‬‬ ‫)( ‪ String‬‬ ‫ﺗﺎﺑﻊ )(‪ Boolean‬زﻣﺎﻧﯽ ﻣﻘﺪار ‪ true‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﭘﺎراﻣﺘﺮ درﯾﺎﻓﺘﯽ اش‪ ،‬رﺷﺘﻪ اي ﺷﺎﻣﻞ ﺣﺪاﻗﻞ ﯾﮏ ﮐﺎرﮐﺘﺮ‪ ،‬ﯾﮏ ﻋﺪد ﻏﯿﺮ‬ ‫از ﺻﻔﺮ و ﯾﺎ ﯾﮏ ﺷﯽ ﺑﺎﺷﺪ‪ .34.)‪Boolean(100‬‬ ‫.zero‬‬ ‫‪//true – object‬‬ ‫.‬اﻣﺎ ﮐﺎرﺑﺮد ﻣﺘﺪ )(‪ Number‬ﺑﺮاي اﯾﻦ رﺷﺘﻪ ﻣﻘﺪار ‪ NaN‬را ﺑﺮﻣﯽ‪-‬‬ ‫ﮔﺮداﻧﺪ زﯾﺮا اﯾﻦ رﺷﺘﻪ در ﮐﻞ‪ ،‬از ﻧﻈﺮ ﻣﺘﺪ )(‪ ،Number‬اﻣﮑﺎن ﺗﺒﺪﯾﻞ ﺑﻪ ﯾﮏ ﻋﺪد را ﻧﺪارد‪.5.5‬‬ ‫.))(‪Boolean(new Object‬‬ ‫=‬ ‫=‬ ‫=‬ ‫=‬ ‫=‬ ‫=‬ ‫‪b1‬‬ ‫‪b2‬‬ ‫‪b3‬‬ ‫‪b4‬‬ ‫‪b5‬‬ ‫‪b6‬‬ ‫‪var‬‬ ‫‪var‬‬ ‫‪var‬‬ ‫‪var‬‬ ‫‪var‬‬ ‫‪var‬‬ ‫ﺗﺎﺑﻊ )(‪ Number‬ﮐﺎري ﺷﺒﯿﻪ )(‪ parseInt‬و )(‪ parseFloat‬را اﻧﺠﺎم ﻣﯽ دﻫﺪ اﻣﺎ ﺗﻔﺎوت ﻫﺎﯾﯽ ﻫﻢ دارد‪.‬ﻣﻘﺪار ‪ false‬را ﻧﯿﺰ زﻣﺎﻧﯽ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﭘﺎراﻣﺘﺮ درﯾﺎﻓﺘﯽ اش رﺷﺘﻪ اي ﺗﻬﯽ‪ ،‬ﻋﺪد ﺻﻔﺮ ﯾﺎ ﯾﮑﯽ از‬ ‫ﻣﻘﺎدﯾﺮ ‪ undefined‬و ‪ null‬ﺑﺎﺷﺪ‪:‬‬ ‫‪//false – empty string‬‬ ‫‪//true – non-empty string‬‬ ‫‪//true – non-zero number‬‬ ‫‪//false .)”‪parseFloat(“1234blue‬‬ ‫.34‬‬ ‫‪//returns NaN‬‬ ‫.5‬ﺗﺒﺪﯾﻞ ﺧﻮاﻫﻨﺪ ﮐﺮد‪ .)‪Boolean(null‬‬ ‫.6‬ﺑﻪ ‪ 4.‫ﻣﺘﻐﯿﺮﻫﺎ و اﻧﻮاع داده ﻫﺎ‬ ‫اﮔﺮ دو ﮐﺎراﮐﺘﺮ ﻧﻘﻄﻪ در رﺷﺘﻪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﻨﺪ دوﻣﯿﻦ ﻧﻘﻄﻪ ﺑﻪ ﻋﻨﻮان ﮐﺎراﮐﺘﺮ ﺑﯽ ارزش ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮد و ﻋﻤﻠﯿﺎت ﺗﺒﺪﯾﻞ‬ ‫‪14‬‬ ‫‪2‬‬ ‫ﻣﺘﻮﻗﻒ ﻣﯽ ﺷﻮد‪ .ir‬‬ .6.5‬‬ ‫)”‪Number(“56‬‬ ‫)”‪Number(“5.null‬‬ ‫‪//false .)”‪Boolean(“hi‬‬ ‫.)”‪parseFloat(“22.5‬‬ ‫‪56‬‬ ‫‪NaN‬‬ ‫‪NaN‬‬ ‫‪100‬‬ ‫)‪Number(false‬‬ ‫)‪Number(true‬‬ ‫)‪Number(undefined‬‬ ‫)‪Number(null‬‬ ‫)”‪Number(“5.)‪Boolean(0‬‬ ‫.5‬‬ ‫.

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

1stwebdesigner.ir .

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

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

‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>”‪<script language=”JavaScript‬‬
‫{ )(‪function sayHi‬‬
‫;)”‪alert(“Hi‬‬
‫}‬
‫>‪</script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<!-- body goes here --‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪19‬‬
‫‪3‬‬

‫ﻣﯽ ﺗﻮاﻧﯿﻢ ﺧﻮد ﺗﺎﺑﻊ )(‪ 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‬ﭼﻨﺎﻧﭽﻪ ﺷﻤﺎ ﺑﺨﻮاﻫﯿﺪ از ﯾﮏ ﮐﺪ در ﭼﻨﺪﯾﻦ ﺻﻔﺤﻪ وب اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﻣﻄﻤﺌﻨﺎ اﺳﺘﻔﺎده از روش اول‬
‫ﻣﻮﺟﺐ اﻓﺰاﯾﺶ ﮐﺪ ﻧﻮﯾﺴﯽ و در ﻧﺘﯿﺠﻪ ﺣﺠﻢ ﺻﻔﺤﻪ ﺧﻮاﻫﺪ ﺷﺪ اﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ از روش دوم ﺑﺮاي ﭼﻨﺪﯾﻦ ﻓﺎﯾﻞ اﺳﺘﻔﺎده‬
‫ﮐﻨﯿﻢ‪.‬‬

‫‪cache‬‬
‫‪Code Maintenance‬‬

‫‪1‬‬

‫‪2‬‬

‫‪1stwebdesigner.ir‬‬

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

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

‫‪20‬‬
‫‪3‬‬

‫ﻣﻌﻤﻮﻻ ﮐﺪﻫﺎ و ﺗﻮاﺑﻊ ﺗﻌﺮﯾﻔﯽ ﺑﻮﺳﯿﻠﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺎﯾﺪ در ﻗﺴﻤﺖ ‪ head‬ﺻﻔﺤﻪ ﻗﺮار ﮔﯿﺮد ﺗﺎ ﺑﻪ ﻣﻮﻗﻊ ﺑﺎرﮔﺬاري ﺷﺪه و ﺑﺮاي‬
‫اﺳﺘﻔﺎده در ﻗﺴﻤﺖ ‪ body‬ﺻﻔﺤﻪ آﻣﺎده اﺳﺘﻔﺎده و ﻓﺮاﺧﻮاﻧﯽ ﺑﺎﺷﻨﺪ‪ .‬ﻣﻌﻤﻮﻻ ﮐﺪﻫﺎﯾﯽ ﮐﻪ در آن ﻫﺎ‪ ،‬ﺗﻮاﺑﻊ از ﻗﺒﻞ ﺗﻌﺮﯾﻒ ﺷﺪه ﺻﺪا‬
‫زده ﻣﯽ ﺷﻮﻧﺪ در ﻗﺴﻤﺖ ‪ body‬ﻗﺮار ﻣﯽ ﮔﯿﺮﻧﺪ‪.‬‬
‫ﻗﺮاردادن ﺗﮓ >‪ <script‬در داﺧﻞ ﻗﺴﻤﺖ ‪ body‬ﻣﻮﺟﺐ اﺟﺮاﺷﺪن ﮐﺪﻫﺎي داﺧﻞ آن ﺑﻪ ﻣﺤﺾ ﺑﺎرﮔﺬاري ﻗﺴﻤﺘﯽ از ﺻﻔﺤﻪ در‬
‫ﻣﺮورﮔﺮ ﺧﻮاﻫﺪ ﺷﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل ﺑﻪ ﺗﮑﻪ ﮐﺪ زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Title of Page</title‬‬
‫>”‪<script language=”JavaScript‬‬
‫{ )(‪function sayHi‬‬
‫;)”‪alert(“Hi‬‬
‫}‬
‫>‪</script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>”‪<script language=”JavaScript‬‬
‫;)(‪sayHi‬‬
‫>‪</script‬‬
‫>‪<p>This is the first text the user will see.</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫در ﮐﺪ ﻓﻮق ﺗﺎﺑﻊ )(‪ sayHi‬دﻗﯿﻘﺎ ﻗﺒﻞ از ﻧﻤﺎﯾﺶ ﻫﺮ ﮔﻮﻧﻪ ﻣﺘﻨﯽ در ﺻﻔﺤﻪ اﺟﺮا ﺧﻮاﻫﺪ ﺷﺪ‪ .‬ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ ﭘﻨﺠﺮه ‪ alert‬ﻗﺒﻞ از‬
‫ﻣﺘﻦ ‪ This is the first text the user will see‬اﺟﺮا ﺧﻮاﻫﺪ ﺷﺪ‪ .‬اﯾﻦ روش ﺑﺮاي ﻓﺮاﺧﻮاﻧﯽ ﻣﺘﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺻﻼ‬
‫ﭘﯿﺸﻨﻬﺎد ﻧﻤﯽ ﺷﻮد و ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﻪ ﺟﺎي آن از ﮐﻨﺘﺮﻟﮕﺮ ﻫﺎي روﯾﺪاد‪ 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‬‬

‫‪Event Handler‬‬

‫‪1‬‬

‫‪1stwebdesigner.ir‬‬

‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬

‫در اﯾﻨﺠﺎ دﮐﻤﻪ اي ﺑﺎ اﺳﺘﻔﺎده از ﺗﮓ ‪ input‬اﯾﺠﺎد ﺷﺪه اﺳﺖ ﮐﻪ در ﺻﻮرت ﮐﻠﯿﮏ ﺑﺮ روي آن ﺗﺎﺑﻊ )(‪ sayHi‬ﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﺷﻮد‪.‬‬
‫ﺻﻔﺖ ‪ onclick‬در اﯾﻨﺠﺎ ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪادي را ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ روﯾﺪاد رخ داده ﭘﺎﺳﺦ دﻫﺪ‪ ،‬ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ‪.‬‬
‫ﻧﮑﺘﻪ اﯾﻨﮑﻪ ازآﻧﺠﺎﯾﯽ ﮐﻪ ﮐﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻣﺤﺾ ﺑﺎرﮔﺬاري اﺟﺮا ﻫﻢ ﻣﯽ ﺷﻮﻧﺪ ﻣﻤﮑﻦ اﺳﺖ در اﯾﻦ ﺻﻮرت ﺗﻮاﺑﻌﯽ ﮐﻪ از‬
‫ﻗﺒﻞ وﺟﻮد ﻧﺪارﻧﺪ ﻓﺮاﺧﻮاﻧﯽ ﺷﻮﻧﺪ ﮐﻪ در اﯾﻦ ﺻﻮرت ﯾﮏ ﺧﻄﺎ رخ ﺧﻮاﻫﺪ داد‪ .‬در ﻣﺜﺎل ﻗﺒﻞ ﺑﺎ ﻋﻮض ﮐﺮدن ﺟﺎي ﺗﮓ ﻫﺎي‬
‫>‪ <script‬ﯾﮏ ﺧﻄﺎ رخ ﺧﻮاﻫﺪ داد‪:‬‬

‫‪21‬‬
‫‪3‬‬

‫>‪<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‬‬

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

ir‬‬ .‬‬ ‫‪‬‬ ‫در ﻣﺮورﮔﺮ ‪ Internet Explorer‬ﺑﺮاي ﻣﺸﺎﻫﺪه ﭘﯿﻐﺎم ﻣﺮﺑﻮط ﺑﻪ ﺧﻄﺎﻫﺎي رخ داده در ﺻﻔﺤﻪ ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﺮ روي آﯾﮑﻦ‬ ‫زردرﻧﮓ ﻣﻮﺟﻮد در ﮔﻮﺷﻪ ﭘﺎﯾﯿﻦ ﺳﻤﺖ ﭼﭗ ﻣﺮورﮔﺮ ﮐﻠﯿﮏ ﮐﺮد ﺗﺎ ﭘﻨﺠﺮه اي ﺣﺎوي ﻣﺘﻦ و ﺷﻤﺎره ﺧﻄﯽ از ﺑﺮﻧﺎﻣﻪ ﮐﻪ ﺧﻄﺎ‬ ‫در آن رخ داده اﺳﺖ ﺑﺎز ﺷﻮد‪.‬‬ ‫‪‬‬ ‫‪23‬‬ ‫‪3‬‬ ‫در ﻣﺮورﮔﺮ ‪ Google Chrome‬ﻧﯿﺰ ﻣﯽ ﺗﻮان از ﻣﺴﯿﺮ‬ ‫‪ > Tools > Javascript Console‬ﺗﺼﻮﯾﺮ آﭼﺎر‬ ‫ﯾﺎ ﻣﯿﺎﻧﺒﺮ ‪ ctrl+shift+j‬ﺑﻪ اﯾﻦ ﺑﺨﺶ دﺳﺘﺮﺳﯽ داﺷﺖ‪.‬ﺑﺮاي ﻓﻌﺎل ﺳﺎزي‬ ‫اﯾﻦ اﻣﮑﺎن در ﻣﺴﯿﺮ ‪ Tools > Internet Options > Advanced‬اﺑﺘﺪا ﮔﺰﯾﻨﻪ ‪Disable Script Debugging (Internet‬‬ ‫)‪ Explorer‬را از ﺣﺎﻟﺖ اﻧﺘﺨﺎب ﺷﺪه ﺧﺎرج ﮐﺮده و ﮔﺰﯾﻨﻪ ‪ Display a notification about every script error‬را ﺗﯿﮏ‬ ‫ﺑﺰﻧﯿﺪ‪:‬‬ ‫‪1stwebdesigner.‬‬ ‫اﻟﺒﺘﻪ ﻗﺒﻞ از ﻫﺮ ﭼﯿﺰ ﻣﯽ ﺑﺎﯾﺴﺖ از ﻓﻌﺎل ﺑﻮدن ﺧﻄﺎﯾﺎﺑﯽ و ﻧﻤﺎﯾﺶ ﭘﯿﻐﺎم ﻫﺎ در اﯾﻦ ﻣﺮورﮔﺮ اﻃﻤﯿﻨﺎن ﺣﺎﺻﻞ ﮐﻨﯿﺪ‪ .‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪‬‬ ‫در ﻣﺮورﮔﺮ ‪ FireFox‬ﻣﯽ ﺗﻮان از ﻣﺴﯿﺮ زﯾﺮ ﺑﻪ ﮐﻨﺴﻮل ﺟﺎوااﺳﮑﺮﯾﭙﺖ دﺳﺘﺮﺳﯽ داﺷﺖ‬ ‫‪FireFox Menu > Web Developer > Error Console‬‬ ‫اﯾﻦ ﮐﺎر ﺑﺎ اﺳﺘﻔﺎده از ﻣﯿﺎﻧﺒﺮ ‪ ctrl+shift+j‬ﻧﯿﺰ اﻣﮑﺎن ﭘﺬﯾﺮ اﺳﺖ‪.‬‬ ‫‪‬‬ ‫در ﻣﺮورﮔﺮ ‪ opera‬اﯾﻦ ﮐﺎر از ﻣﺴﯿﺮ زﯾﺮ‬ ‫‪Tools > Advanced > Error Console‬‬ ‫ﯾﺎ اﺳﺘﻔﺎده از ﻣﯿﺎﻧﺒﺮ ‪ ctrl+shift+o‬اﻧﺠﺎم ﻣﯽ ﺷﻮد‪.

‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﻣﺮورﮔﺮﻫﺎ‬ ‫‪24‬‬ ‫‪3‬‬ ‫ﭘﺲ از اﻧﺠﺎم ﻣﻮارد ﻓﻮق‪ ،‬ﺑﺎ ﻫﺮ ﺑﺎر رﺧﺪاد ﯾﮏ ﺧﻄﺎ‪ ،‬ﭘﻨﺠﺮه اي ﺑﻪ ﺻﻮرت زﯾﺮ ﻧﻤﺎﯾﺶ داده ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬ ‫‪1stwebdesigner.ir‬‬ .

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

“green”.)(‪var aValues = new Array‬‬ ‫اﮔﺮ از ﻗﺒﻞ ﺗﻌﺪاد ﻋﻨﺎﺻﺮ آراﯾﻪ ﻣﻮرد ﻧﻈﺮﺗﺎن را ﺑﺪاﻧﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﺪ‪:‬‬ ‫. “blue‬‬ ‫”‪alert(aColors.”‪aColors[0] = “red‬‬ ‫.length‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ . //outputs “3‬‬ ‫.)”‪var aColors = new Array(“red”.‬‬ ‫اﮔﺮ درآراﯾﻪ ﻗﺒﻠﯽ ﮐﻪ ﺳﻪ ﻋﻨﺼﺮ داﺷﺖ ﺑﻪ ﯾﮑﺒﺎره ﻣﻮﻗﻌﯿﺖ ﻣﺜﻼ ‪ 25‬را ﭘﺮ ﮐﻨﯿﻢ ﻃﻮل آراﯾﻪ ﭼﻪ ﺧﻮاﻫﺪ ﺑﻮد؟‬ ‫در اﯾﻦ ﺻﻮرت ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺧﺎﻧﻪ ﻫﺎي از ‪ 3‬ﺗﺎ ‪ 24‬را ﺑﺎ ﻣﻘﺪار ‪ null‬ﭘﺮ ﺧﻮاﻫﺪ ﮐﺮد و ﻃﻮل آراﯾﻪ ﻫﻢ ﺑﺮاﺑﺮ ‪ 26‬ﺧﻮاﻫﺪ ﺑﻮد‪:‬‬ ‫. “green”.”‪aColors[2] = “blue‬‬ ‫در آراﯾﻪ ﺑﺎﻻ ﺑﺎ ﻫﺮ ﺑﺎر اﺿﺎﻓﻪ ﮐﺮدن ﻋﻨﺼﺮ ﺟﺪﯾﺪ ﺑﻪ ﺻﻮرت ﺧﻮدﮐﺎر ﺑﻪ ﺗﻌﺪاد ﺧﺎﻧﻪ ﻫﺎي آن اﻓﺰوده ﻣﯽ ﺷﻮد‪. //outputs “26‬‬ ‫‪1stwebdesigner. //outputs “green‬‬ ‫ﺑﺪﺳﺖ آوردن ﻃﻮل آراﯾﻪ‬ ‫ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﺗﻌﺪاد ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در آراﯾﻪ از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ .)”‪var aColors = new Array(“red”.)‪var aValues = new Array(20‬‬ ‫ﺑﺮاي ﻣﻘﺪاردﻫﯽ ﺧﺎﻧﻪ ﻫﺎي آراﯾﻪ ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﻣﯽ ﮐﻨﯿﻢ‪:‬‬ ‫.length).‫ﮐﺎر ﺑﺎ آراﯾﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫اﯾﺠﺎد آراﯾﻪ ﻫﺎ ﺑﺎ اﺳﺘﻔﺎده از ﮐﻼس ‪Array‬‬ ‫‪26‬‬ ‫در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺮ ﺧﻼف ﺟﺎوا‪ ،‬ﮐﻼس درون ﺳﺎﺧﺘﯽ ﺑﻪ ﻧﺎم ‪ Array‬وﺟﻮد دارد ﮐﻪ از آن ﺑﺮاي اﯾﺠﺎد آراﯾﻪ ﻫﺎ )ﮐﻪ اﻟﺒﺘﻪ ﺑﻪ ﻋﻨﻮان‬ ‫ﯾﮏ ﺷﯽ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮﻧﺪ( اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ . “blue‬‬ ‫ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ آراﯾﻪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻣﯽ ﺷﻮد‪:‬‬ ‫”‪alert(aColors[1]). “green”.length).ir‬‬ .length).length).‬‬ ‫اﮔﺮ ﺷﻤﺎ از ﻗﺒﻞ ﻣﻘﺎدﯾﺮي ﮐﻪ ﻗﺮار اﺳﺖ درآراﯾﻪ ﻗﺮار ﺑﮕﯿﺮﻧﺪ را ﺑﺪاﻧﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺻﻮرت ﻋﻤﻞ ﮐﻨﯿﺪ‪:‬‬ ‫.”‪aColors[25] = “purple‬‬ ‫”‪aColors(arr.‬اﯾﻦ ﻣﻘﺪار ﻫﻤﯿﺸﻪ ﯾﮏ واﺣﺪ‬ ‫ﺑﯿﺸﺘﺮ از ﻣﻮﻗﻌﯿﺖ آﺧﺮﯾﻦ ﺧﺎﻧﻪ آراﯾﻪ اﺳﺖ‪.]”‪var aColors = [“red”.‬ﺑﺮاي اﯾﺠﺎد ﯾﮏ ﺷﯽ از ﻧﻮع آراﯾﻪ از دﺳﺘﻮرات زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪:‬‬ ‫‪4‬‬ ‫. //outputs “26‬‬ ‫راه دﯾﮕﺮ اﯾﺠﺎد ﯾﮏ آراﯾﻪ اﺳﺘﻔﺎده از ﺑﺮاﮐﺖ ﻫﺎ )] [(و ﻋﻼﻣﺖ ‪ .‬ﺑﯿﻦ ﻫﺮ ﻋﻨﺼﺮ از آراﯾﻪ اﺳﺖ ﺑﻪ ﺻﻮرت زﯾﺮ‪:‬‬ ‫.”‪aColors[25] = “purple‬‬ ‫”‪alert(aColors.”‪aColors[1] = “green‬‬ ‫.)(‪var aColors = new Array‬‬ ‫. //outputs “3‬‬ ‫. “blue‬‬ ‫”‪alert(aColors.

//outputs “red.blue‬‬ ‫ﻣﯽ ﺑﯿﻨﯿﺪ ﮐﻪ ﺣﺎﺻﻞ اﺟﺮاي ﻫﺮ ﺳﻪ ﮐﺪ ﻓﻮق ﯾﮑﺴﺎن اﺳﺖ‪.green.green. //outputs “red.‬اﯾﻦ‬ ‫ﺗﺎﺑﻊ ﯾﮏ آرﮔﻮﻣﺎن دارد ﮐﻪ در واﻗﻊ رﺷﺘﻪ اي اﺳﺖ ﮐﻪ ﺑﯿﻦ ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ وﺟﻮد دارد‪ .blue‬‬ ‫. //outputs “red-spring-green-spring‬‬‫”‪blue‬‬ ‫”‪alert(aColors.green.e.‬از ﻫﻢ ﺟﺪا ﺷﺪه اﺳﺖ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﺪ‪:‬‬ ‫.)”‪var aColors = sColors.join(“.green.ir‬‬ .split(“.valueOf()).]”‪var aColors = [“red”.green.]”‪var aColors = [“red”. //outputs “red.toString()).join(“][“)).toString()).toLocaleString()).split‬دارد ﮐﻪ ﯾﮏ آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ﮐﻪ ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﺣﺪس زدﯾﺪ ﺟﺪاﮐﻨﻨﺪه ي رﺷﺘﻪ ﺑﺮاي ﺗﺒﺪﯾﻞ‬ ‫ﺑﻪ آراﯾﻪ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.join(“-spring-”)).join‬ﺑﺮاي اﻟﺤﺎق ﻋﻨﺎﺻﺮ ﯾﮏ آراﯾﻪ ﮐﻪ اﻟﺒﺘﻪ ﺑﻪ وﺳﯿﻠﻪ ﯾﮏ ﺟﺪاﮐﻨﻨﺪه‪ 1‬از ﻫﻢ ﺟﺪا ﺷﺪه اﻧﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬‬ ‫از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ . //outputs “red.‬ﺑﺮاي ﻣﺜﺎل‪:‬‬ ‫. “green”. “blue‬‬ ‫”‪alert(aColors.‬‬ ‫اﮔﺮ ﻫﯿﭻ ﺟﺪاﮐﻨﻨﺪه اي ﻣﺸﺨﺺ ﻧﺸﻮد ‪ ،‬اﯾﻦ ﺗﺎﺑﻊ آراﯾﻪ اي را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻫﺮ ﻋﻨﺼﺮ آن ﺷﺎﻣﻞ ﯾﮑﯽ از ﮐﺎراﮐﺘﺮﻫﺎي رﺷﺘﻪ ي‬ ‫ﻣﻮرد ﻧﻈﺮ اﺳﺖ‪ .‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪‬‬ ‫ﻧﮑﺘﻪ‪ :‬آراﯾﻪﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻣﯽ ﺗﻮاﻧﻨﺪ ﺣﺪاﮐﺜﺮ ‪ 4294967295‬ﺧﺎﻧﻪ داﺷﺘﻪ ﺑﺎﺷﻨﺪ!‬ ‫ﺗﺒﺪﯾﻞ آراﯾﻪ ﺑﻪ رﺷﺘﻪ‬ ‫‪27‬‬ ‫آراﯾﻪ ﻫﺎ از ﺳﻪ ﻣﺘﺪ ﺧﺎص ﺑﺮاي ﺧﺮوﺟﯽ ﻋﻨﺎﺻﺮ ﺧﻮد ﺑﻪ ﺻﻮرت رﺷﺘﻪ اي ﮐﻪ ﺑﺎ ﮐﺎﻣﺎ از ﻫﻢ ﺟﺪاﺷﺪه اﻧﺪ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﺪ‪:‬‬ ‫‪4‬‬ ‫.”‪var sColors = “green‬‬ ‫.blue‬‬ ‫”‪alert(aColors. “blue‬‬ ‫”‪alert(aColors.r.”‪var sColors = “red.blue‬‬ ‫”‪alert(aColors.‬ﺑﻪ ﻣﺜﺎل ﻫﺎي زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬ ‫.n‬‬ ‫‪separator‬‬ ‫‪1‬‬ ‫‪1stwebdesigner. “green”.split‬‬ ‫”‪alert(aColors.‬‬ ‫ﺣﺎل اﮔﺮ ﺷﻤﺎ رﺷﺘﻪ اي دارﯾﺪ ﮐﻪ ﺑﺎ ‪ . //outputs “g.)”“(‪var aColors = sColors.blue‬‬ ‫‪alert(aColors.e.”)). //outputs “red][green][blue‬‬ ‫ﺗﺒﺪﯾﻞ رﺷﺘﻪ ﺑﻪ آراﯾﻪ‬ ‫ﺳﻮاﻟﯽ ﮐﻪ در اﯾﻨﺠﺎ ﭘﯿﺶ ﻣﯽ آﯾﺪ اﯾﻦ اﺳﺖ ﮐﻪ آﯾﺎ اﺷﯿﺎﯾﯽ از ﻧﻮع ‪ string‬را ﻫﻢ ﻣﯽ ﺗﻮان ﺑﻪ ﻃﺮﯾﻖ ﻣﺸﺎﺑﻪ ﺑﻪ آراﯾﻪ ﺗﺒﺪﯾﻞ ﮐﺮد؟‬ ‫ﺟﻮاب ﻣﺜﺒﺖ اﺳﺖ !‬ ‫ﺷﯽ ‪ string‬ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ .

‬ﺑﻪ ﻣﺜﺎﻟﻬﺎي زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬ ‫.purple‬‬ ‫”‪alert(aColors3.yellow.‬‬ ‫ﺗﺎﺑﻊ )(‪ .‬اﮔﺮ ﻓﻘﻂ آرﮔﻮﻣﺎن اول ﻣﻨﻈﻮر ﮔﺮدد اﯾﻦ ﺗﺎﺑﻊ ﻋﻨﺎﺻﺮ از آن‬ ‫آرﮔﻮﻣﺎن ﺗﺎ اﻧﺘﻬﺎي آراﯾﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪ .slice‬ﺑﺮاي ﺑﺮﮔﺮداﻧﺪن ﻋﻨﺎﺻﺮ ﺧﺎﺻﯽ از آراﯾﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .slice(n.‬‬ ‫ﺗﺒﺪﯾﻞ آراﯾﻪ ﻫﺎ ﺑﻪ ﭘﺸﺘﻪ و ﺻﻒ‬ ‫ﯾﮑﯽ از ﺟﺬاﺑﺘﺮﯾﻦ وﯾﮋﮔﯽ ﻫﺎي آراﯾﻪ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﻣﮑﺎن ﺗﺒﺪﯾﻞ ﮐﺮدن آﻧﻬﺎ ﺑﻪ دﯾﮕﺮ ﺳﺎﺧﺘﻤﺎن داده ﻫﺎي راﯾﺞ ﻫﻤﭽﻮن ‪stack‬‬ ‫و ‪ queue‬اﺳﺖ‪.concat(“yellow”. //outputs “red.toString()). “green”. //outputs “red.slice(1‬‬ ‫.toString()). “purple‬‬ ‫.blue‬‬ ‫ﺑﺮﮔﺮداﻧﺪن ﻋﻨﺎﺻﺮ ﺧﺎﺻﯽ از آراﯾﻪ‬ ‫از ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم )(‪ .toString()).)‪var aColors3 = arr. “yellow”.blue.)”‪var aColors2 = aColors. //outputs “green. 4‬‬ ‫”‪alert(aColors2.‬اﻟﺒﺘﻪ ﺗﺎﺑﻊ )(‪ . “blue‬‬ ‫.pop‬ﺑﺮاي اﺿﺎﻓﻪ و ﺣﺬف ﻋﻨﺎﺻﺮ از‬ ‫اﻧﺘﻬﺎي آراﯾﻪ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪.green.blue.purple‬‬ ‫”‪alert(aColors.green. //outputs “green.‬اﯾﻦ ﺗﺎﺑﻊ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد و از ﺧﺎﻧﻪ‬ ‫آرﮔﻮﻣﺎن اول ﺗﺎ ﻗﺒﻞ از آرﮔﻮﻣﺎن دوم را ﺑﻪ آراﯾﻪ ﺟﺪﯾﺪي ﺗﺒﺪﯾﻞ ﻣﯽ ﮐﻨﺪ‪ .ir‬‬ .toString()).pop‬اﻣﮑﺎن ﺣﺬف آﺧﺮﯾﻦ ﻋﻨﺼﺮ آراﯾﻪ و ﺑﺮﮔﺮداﻧﺪن آن ﺑﻪ‬ ‫ﻋﻨﻮان ﻣﻘﺪار ﺑﺎزﮔﺸﺘﯽ ﺗﺎﺑﻊ را ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ‪ .m‬ﻋﻨﺎﺻﺮ از ﺧﺎﻧﻪ ‪ n‬ﺗﺎ ‪ m-1‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪. “blue”.‫ﮐﺎر ﺑﺎ آراﯾﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫اﺿﺎﻓﻪ ﮐﺮدن ﻣﻘﺎدﯾﺮ ﺟﺪﯾﺪ ﺑﻪ آراﯾﻪ ﻫﺎ‬ ‫‪28‬‬ ‫‪4‬‬ ‫آراﯾﻪ ﻫﺎ از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ .yellow.]”‪var aColors = [“red”.yellow‬‬ ‫در ﺣﺎﻟﺖ ﮐﻠﯽ )‪ arr.push‬و )(‪ . “purple‬‬ ‫”‪alert(aColors2.‬اﯾﻦ ﺗﺎﺑﻊ ﭼﻨﺪﯾﻦ آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد و ﺑﻪ آراﯾﻪ ﺟﺎري اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﺪ و‬ ‫ﺣﺎﺻﻞ آن ﯾﮏ آراﯾﻪ ي ﺟﺪﯾﺪ ﺧﻮاﻫﺪ ﺑﻮد‪ .‬‬ ‫اﮔﺮ آراﯾﻪ اي را ﺑﻪ ﻋﻨﻮان ‪ stack‬در ﻧﻈﺮ ﺑﮕﯿﺮﯾﻢ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻪ راﺣﺘﯽ ازﺗﻮاﺑﻊ )(‪ .concat‬ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪ .pop‬ﻋﻨﺼﺮي را ﮐﻪ ﺑﺮﻣﯽ ﮔﺮداﻧﺪ از آراﯾﻪ ﺣﺬف ﻣﯽ ﮐﻨﺪ‪ .]”‪var aColors = [“red”.blue.slice(1.push‬اﻣﮑﺎن اﺿﺎﻓﻪ ﮐﺮدن ﭼﻨﺪﺑﻦ ﻋﻨﺼﺮ ﺑﻪ آراﯾﻪ و ﺗﺎﺑﻊ )(‪ .‬ﺑﻪ ﻣﺜﺎل ﻫﺎي زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬ ‫. “green”.)‪var aColors2 = arr.‬ﺑﻪ ﻣﺜﺎل ﻫﺎي‬ ‫زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬ ‫‪1stwebdesigner.

green.yellow” var vItem = stack. “blue”. //outputs “green.ir . stack.green” 29 4 ‫ ﺑﺮاي ﺣﺬف و ﺑﺮﮔﺮداﻧﺪن‬.‫ ﻋﻨﺎﺻﺮ آراﯾﻪ اﺳﺘﻔﺎده ﻣﯿﺸﻮد‬1‫از دو ﺗﺎﺑﻊ ﺑﺮاي ﻣﺮﺗﺐ ﺳﺎزي‬ :‫ ﻣﺜﺎل‬. alert(aColors.green. stack. “green”. “blue”].‫ﻋﻨﺎﺻﺮ آراﯾﻪ ﺑﺮ ﺣﺴﺐ ﮐﺪﻫﺎي ﮐﺎراﮐﺘﺮي ﺷﺎن ﻣﺮﺗﺐ ﻣﯽ ﺷﻮﻧﺪ‬ var aColors = [“red”.shift().sort() ‫از ﻃﺮف دﯾﮕﺮ ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم‬ :‫ ﻣﺜﺎل‬.toString()). //outputs “red. aColors. “green”.reverse().green.push(“yellow”).red” ‫ در اﯾﻦ ﺻﻮرت‬.‫ﺷﻮد‬ var aColors = [“red”.push(“green”).sort().toString()).green.shift() ‫ ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم‬. aColors. //outputs “yellow” alert(stack.push(“red”).toString()).yellow” alert(vItem). alert(aColors. alert(aColors. alert(aColors. “green”.‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻮاﺑﻊ دﯾﮕﺮي ﺑﺮاي دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ اﺑﺘﺪاﯾﯽ آراﯾﻪ ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ‬ ‫ ﯾﮏ ﻋﻨﺼﺮ را ﺑﻪ اﺑﺘﺪاي آراﯾﻪ اﺿﺎﻓﻪ ﮐﺮده و ﺑﻘﯿﻪ ﻋﻨﺎﺻﺮ‬. var vItem = aColors. stack.pop().‫ﻋﻨﺼﺮ اول آراﯾﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‬ :‫را ﯾﮏ ﻣﻮﻗﻌﯿﺖ ﺑﻪ ﺟﻠﻮ ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ‬ var aColors = [“red”.yellow” :‫در ﺷﮑﻞ زﯾﺮ ﻧﺤﻮه ﻋﻤﻠﮑﺮد ﺗﻮاﺑﻊ ﻓﻮق ﺑﺮ روي ﯾﮏ آراﯾﻪ ﻋﺪدي ﻧﻤﺎﯾﺶ داده ﺷﺪه اﺳﺖ‬ ‫ﻣﺮﺗﺐ ﺳﺎزي آراﯾﻪ ﻫﺎ‬ ‫ ﺑﺮاي ﻣﺮﺗﺐ ﺳﺎزي ﻋﮑﺲ آراﯾﻪ اﺳﺘﻔﺎده ﻣﯽ‬reverse() ‫ ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم‬.unshift() ‫ از ﻃﺮف دﯾﮕﺮ ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم‬.toString()).toString()).yellow” 1 ordering 1stwebdesigner.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ var stack = new Array. //outputs “red” aColors.unshift(“black”). //outputs “red. alert(stack. alert(vItem).red. “yellow”]. “yellow”].‫ ﻋﻨﺎﺻﺮ آراﯾﻪ را ﺑﻪ ﺻﻮرت ﺻﻌﻮدي ﺑﺮ ﺣﺴﺐ ﻣﻘﺎدﯾﺮﺷﺎن ﻣﺮﺗﺐ ﻣﯽ ﮐﻨﺪ‬.toString()). //outputs “blue. //outputs “black. //outputs “blue.

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

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

1stwebdesigner.ir .

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

//outputs “hello world‬‬ ‫“ ‪alert(oStringObject).‬‬ ‫اﮔﺮ ﯾﮑﯽ از ﻋﻤﻠﻮﻧﺪﻫﺎ ﻋﺪدي و دﯾﮕﺮي رﺷﺘﻪ اي ﺑﺎﺷﺪ‪ ،‬ﻋﻤﻠﻮﻧﺪ ﻋﺪدي ﺑﻪ رﺷﺘﻪ ﺗﺒﺪﯾﻞ ﺷﺪه و ﺣﺎﺻﻞ اﻟﺤﺎق آن دو ﺧﻮاﻫﺪ‬ ‫ﺑﻮد‪.‬‬ ‫اﮔﺮ ﻫﺮ دو ﻋﻤﻠﻮﻧﺪ رﺷﺘﻪ اي ﺑﺎﺷﻨﺪ ﺣﺎﺻﻞ‪ ،‬اﻟﺤﺎق رﺷﺘﻪ دوم ﺑﻪ رﺷﺘﻪ اول ﺧﻮاﻫﺪ ﺑﻮد‪.)”‪var oStringObject = new String(“hello world‬‬ ‫اﺷﯿﺎي از ﻧﻮع ‪ string‬ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ .concat‬ﻣﯽ ﺗﻮان از ﻋﻤﻠﮕﺮ ‪ +‬ﻧﯿﺰ ﺑﺮاي اﻟﺤﺎق دو رﺷﺘﻪ اﺳﺘﻔﺎده ﮐﺮد‪.length‬دارﻧﺪ ﮐﻪ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي رﺷﺘﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪ .‬اﯾﻦ ﺷﯽ از ﭼﻨﺪﯾﻦ ﻣﺘﺪ ﻧﯿﺰ‬ ‫ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﺪ ﮐﻪ در اداﻣﻪ ﺷﺮح ﺧﻮاﻫﯿﻢ داد‪:‬‬ ‫ﺑﺪﺳﺖ آوردن ﮐﺎراﮐﺘﺮ ﻣﻮﺟﻮد در ﯾﮏ ﻣﻮﻗﻌﯿﺖ ﺧﺎص‬ ‫)(‪ :charAt‬ﻋﺪدي را ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد و ﮐﺎراﮐﺘﺮ ﻧﻈﯿﺮ آن در رﺷﺘﻪ اﺻﻠﯽ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪ .concat‬اﺳﺖ ﮐﻪ ﺑﺮاي اﻟﺤﺎق دو رﺷﺘﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .charCodeAt(1)).‬ﺑﺮاي ﻣﺜﺎل‪:‬‬ ‫.‬‬ ‫اﻟﺤﺎق دو رﺷﺘﻪ‬ ‫ﻣﺘﺪ دﯾﮕﺮ )(‪ .‬‬ ‫ﻋﻤﻠﮕﺮ ‪ +‬ﺑﺮاي اﻟﺤﺎق رﺷﺘﻪ ﻫﺎ‬ ‫از ﻋﻤﻠﮕﺮ ‪ +‬در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻫﻢ ﺑﺮاي ﺟﻤﻊ اﻋﺪاد و ﻫﺮ ﺑﺮاي اﻟﺤﺎق رﺷﺘﻪ ﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬ﻣﺜﻼ‪:‬‬ ‫.)”‪var oStringObject = new String(“hello world‬‬ ‫”‪alert(oStringObject.‬‬ ‫‪1stwebdesigner.concat(“world‬‬ ‫”‪alert(sResult).ir‬‬ .charCodeAt‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪:‬‬ ‫.)”‪var sResult = oStringObject. //outputs “hello‬‬ ‫ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده از ﻣﺘﺪ )(‪ .‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫اﮔﺮ ﻫﺮ دو ﻋﻤﻠﻮﻧﺪ ﻋﺪدي ﺑﺎﺷﻨﺪ ﺣﺎﺻﻞ ﺟﻤﻊ آن ﻫﺎ ﻣﺤﺎﺳﺒﻪ ﺧﻮاﻫﺪ ﺷﺪ‪.‬رﻓﺘﺎر اﯾﻦ ﻋﻤﻠﮕﺮ ﺑﺮاﺳﺎس ﻧﻮع‬ ‫ﻋﻤﻠﻮﻧﺪﻫﺎ ﺑﻪ ﺻﻮرت زﯾﺮ ﺗﻌﯿﯿﻦ ﻣﯽ ﺷﻮد‪. //outputs “e‬‬ ‫ﮔﺮ ﭼﻨﺎﻧﭽﻪ ﻣﯽ ﺧﻮاﻫﯿﺪ ﺑﻪ ﺟﺎي ﺧﻮد ﮐﺎراﮐﺘﺮ ﮐﺪ ﮐﺎراﮐﺘﺮي آن را ﺑﺪﺳﺖ آورﯾﺪ از ﻣﺘﺪ )(‪ .)”‪var oStringObject = new String(“hello world‬‬ ‫”‪alert(oStringObject.‫ﮐﺎر ﺑﺎ رﺷﺘﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫اﯾﺠﺎد اﺷﯿﺎ رﺷﺘﻪ اي )رﺷﺘﻪ( ﺑﺎ اﺳﺘﻔﺎده از ﮐﻼس ‪String‬‬ ‫‪34‬‬ ‫از اﯾﻦ ﮐﻼس ﺑﺮاي اﯾﺠﺎد اﺷﯿﺎ رﺷﺘﻪ اي )ﺑﻪ اﺧﺘﺼﺎر رﺷﺘﻪ ﻫﺎ( اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .)“ ‪var oStringObject = new String(“hello‬‬ ‫.‬دﺳﺘﻮر زﯾﺮ ﻣﺘﻐﯿﺮي ﺣﺎوي رﺷﺘﻪ ‪Hello World‬‬ ‫را ﺗﻮﻟﯿﺪ ﻣﯽ ﮐﻨﺪ‪:‬‬ ‫‪5‬‬ ‫.charAt(1)). //outputs “101‬‬ ‫اﯾﻦ دﺳﺘﻮر ﻣﻘﺪار ‪ 101‬ﮐﻪ ﻣﻌﺎدل ﮐﺪ ﮐﺎراﮐﺘﺮي ﺣﺮف ‪ e‬اﺳﺖ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.

3‬اﮔﺮ ﺷﯽ رﺷﺘﻪ اي ﺑﺰرﮔﺘﺮ ﺑﺎﺷﺪ ﻣﻘﺪار ‪ 1‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.lastIndexOf‬‬ ‫اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬‬ ‫ﺗﻨﻬﺎ ﺗﻔﺎوت اﯾﻦ دو ﺗﺎﺑﻊ در اﯾﻦ اﺳﺖ ﮐﻪ )(‪ .)”‪var oStringObject = new String(“hello world‬‬ ‫”‪alert(oStringObject.‬‬ ‫اﯾﻦ ﺗﺎﺑﻊ ﯾﮏ آرﮔﻮﻣﺎن رﺷﺘﻪ اي ﻣﯽ ﭘﺬﯾﺮد و ﯾﮑﯽ از ﺳﻪ ﻣﻘﺪار زﯾﺮ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪:‬‬ ‫‪ .3)).1‬اﮔﺮ ﺷﯽ رﺷﺘﻪ اي ﮐﻮﭼﮑﺘﺮ از آرﮔﻮﻣﺎن ﺑﺎﺷﺪ ‪ -1‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬ ‫‪ .lastIndexOf(“o”)).ir‬‬ .‬ﺑﺮاي ﻣﺜﺎل‪:‬‬ ‫.”‪“I am a javascript hacker‬‬ ‫‪Alert(example. //‬‬ ‫. //‬‬ ‫‪35‬‬ ‫‪5‬‬ ‫ﺑﺪﺳﺖ آوردن ﻣﻮﻗﻌﯿﺖ ﯾﮏ ﮐﺎراﮐﺘﺮ ﺧﺎص در رﺷﺘﻪ‬ ‫ﺑﺮاي ﺗﺸﺨﯿﺺ اﯾﻨﮑﻪ ﯾﮏ ﮐﺎراﮐﺘﺮ ﺧﺎص در ﯾﮏ رﺷﺘﻪ ﻫﺴﺖ ﯾﺎ ﻧﻪ ﻣﯽ ﺗﻮان از ﻣﺘﺪ ﻫﺎي )(‪ .‪5+5‬‬ ‫‪output 10‬‬ ‫‪var result1‬‬ ‫=‬ ‫‪alert(result1).”‪5+”5‬‬ ‫”‪output “55‬‬ ‫‪var result2‬‬ ‫=‬ ‫‪alert(result2).‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫ﺑﻪ ﻣﺜﺎل زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬ ‫.‬‬ ‫‪ .‬‬ ‫)اﯾﻦ ﻣﺘﺪ ﻣﻌﺎدل ﺗﺎﺑﻊ )(‪ strcmp‬در زﺑﺎن ‪ C++‬اﺳﺖ‪(.indexOf‬و )(‪.localeCompare‬اﺳﺖ ﮐﻪ ﺑﺮاي ﻣﻘﺎﯾﺴﻪ رﺷﺘﻪ ﻫﺎ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد‪.// output 5‬‬ ‫ﻣﻘﺎﯾﺴﻪ رﺷﺘﻪ ﻫﺎ‬ ‫ﻣﺘﺪ دﯾﮕﺮي ﮐﻪ ﺑﺮاي رﺷﺘﻪ ﻫﺎ ﺗﻌﺮﯾﻒ ﺷﺪه )(‪ .lastIndexOf‬ﻣﯽ ﺗﻮان از ﯾﮏ آرﮔﻮﻣﺎن اﺧﺘﯿﺎري دﯾﮕﺮ ﻧﯿﺰ ﺑﻪ ﻣﻨﻈﻮر ﺗﻌﯿﯿﻦ ﮐﺎراﮐﺘﺮي ﮐﻪ ﻋﻤﻞ‬ ‫ﺟﺴﺘﺠﻮ ﺑﺎﯾﺪ از آن ﺷﺮوع ﺷﻮد‪ ،‬اﺳﺘﻔﺎده ﮐﺮد‪ .indexOf(‘a’.‬‬ ‫در ﻣﺘﺪﻫﺎي)(‪ . //‬‬ ‫. //outputs “4‬‬ ‫”‪alert(oStringObject.2‬اﮔﺮ ﺑﺮاﺑﺮ ﺑﺎﺷﻨﺪ ‪ 0‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.”‪“5”+”5‬‬ ‫”‪output “55‬‬ ‫‪var result3‬‬ ‫=‬ ‫‪alert(result3).‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل درﮐﺪ زﯾﺮ ﻋﻤﻞ ﺟﺴﺘﺠﻮ از ﭼﻬﺎرﻣﯿﻦ ﮐﺎراﮐﺘﺮ ﺷﺮوع ﻣﯽ ﺷﻮد و در‬ ‫ﻧﺘﯿﺠﻪ ﻣﻘﺪار ‪) 5‬ﯾﻌﻨﯽ ﻣﻮﻗﻌﯿﺖ دوﻣﯿﻦ ‪ (a‬ﺑﺮﮔﺮداﻧﺪه ﻣﯽ ﺷﻮد‪:‬‬ ‫‪Var example‬‬ ‫=‬ ‫.‬‬ ‫‪1stwebdesigner.indexOf‬و)(‪ .‬‬ ‫ﻫﺮ دو اﯾﻦ ﻣﺘﺪﻫﺎ ﻣﻮﻗﻌﯿﺖ زﯾﺮ رﺷﺘﻪ اي در رﺷﺘﻪ دﯾﮕﺮ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ اﻟﺒﺘﻪ در ﺻﻮرت ﭘﯿﺪاﻧﺸﺪن ﻣﻘﺪار‪ -1‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﻨﺪ‪.indexOf(“o”)).indexOf‬ﺟﺴﺘﺠﻮ را از اﺑﺘﺪاي رﺷﺘﻪ )ﻣﻮﻗﻌﯿﺖ ‪ (0‬ﺷﺮوع ﻣﯽ ﮐﻨﺪ وﻟﯽ دﯾﮕﺮي‬ ‫ﺟﺴﺘﺠﻮ را از اﻧﺘﻬﺎي رﺷﺘﻪ ﺷﺮوع ﻣﯽ ﮐﻨﺪ‪ . //outputs “7‬‬ ‫در ﺻﻮرﺗﯽ ﮐﻪ ﺣﺮف ‪ O‬در ﻋﺒﺎرت ﺑﺎﻻ ﻓﻘﻂ ﯾﮑﺒﺎر ﺗﮑﺮار ﻣﯽ ﺷﺪ ﻫﺮ دو اﯾﻦ ﻣﺘﺪ ﻫﺎ ﻓﻘﻂ ﯾﮏ ﻣﻘﺪار راﺑﺮ ﻣﯽ ﮔﺮداﻧﻨﺪ‪.

//outputs “lo world‬‬ ‫”‪alert(oStringObject. 7)).ir‬‬ .slice() :‬و )(‪.slice(3.localeCompare(“yellow”)). //outputs “hel‬‬ ‫در ﺧﻂ دوم از ﮐﺪ ﺑﺎﻻ ﭼﻮن آرﮔﻮﻣﺎن ﻣﻨﻔﯽ اﺳﺖ ﻃﻮل رﺷﺘﻪ ﺑﺎ ‪ -3‬ﺟﻤﻊ ﻣﯽ ﺷﻮد ﮐﻪ ﺣﺎﺻﻞ ‪ 8‬اﺳﺖ درواﻗﻊ دﺳﺘﻮر زﯾﺮ اﺟﺮا‬ ‫ﻣﯿﺸﻮد‪:‬‬ ‫.substring(3.‬‬ ‫)اﻟﺒﺘﻪ ﺧﻮدآرﮔﻮﻣﺎن دوم ﺟﺰ زﯾﺮ رﺷﺘﻪ ﻧﺨﻮاﻫﺪ ﺑﻮد‪(.localeCompare(“brick”)).slice‬آرﮔﻮﻣﺎن ﻣﻨﻔﯽ ﺑﺎ ﻃﻮل رﺷﺘﻪ ﺟﻤﻊ ﺷﺪه و ﺣﺎﺻﻞ آن ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎن اﺻﻠﯽ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‪ . //outputs “lo w‬‬ ‫”‪alert(oStringObject.‬‬ ‫ﺑﺮاي ﻣﺘﺪ )(‪ .slice(3.‫ﮐﺎر ﺑﺎ رﺷﺘﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫ﻣﺜﺎل ﻫﺎ‪:‬‬ ‫.slice(8‬‬ ‫ﮐﻪ از ﺧﺎﻧﻪ ﻫﺸﺘﻢ رﺷﺘﻪ ﺗﺎ اﻧﺘﻬﺎي آراﯾﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪ .substring(0‬‬ ‫‪1stwebdesigner.‬‬ ‫اﮔﺮ آرﮔﻮﻣﺎن دوم ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ ﺷﻮد ﻃﻮل رﺷﺘﻪ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺧﻮاﻫﺪ ﺷﺪ‪.)”‪var oStringObject= new String(“hello world‬‬ ‫”‪alert(oStringObject.7)).substring(-3)).‬‬ ‫ﭼﯿﺰي ﮐﻪ اﯾﻦ دو ﻣﺘﺪ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ زﯾﺮ رﺷﺘﻪ ﺣﺎﺻﻞ اﺳﺖ‪:‬‬ ‫.-4)). //outputs “hello world‬‬ ‫”‪alert(oStringObject.)”‪var oStringObject = new String(“hello world‬‬ ‫”‪alert(oStringObject. //outputs “-1‬‬ ‫‪36‬‬ ‫‪5‬‬ ‫ﺟﺪا ﮐﺮدن زﯾﺮ رﺷﺘﻪ اي از رﺷﺘﻪ دﯾﮕﺮ‬ ‫دو ﺗﺎﺑﻊ ﺑﺮاي ﺟﺪا ﮐﺮدن زﯾﺮ رﺷﺘﻪ ﻫﺎ از رﺷﺘﻪ اﺻﻠﯽ وﺟﻮد دارد‪ .slice(-3)). //outputs “lo world‬‬ ‫”‪alert(oStringObject.‬‬ ‫ﻣﺜﺎل ﻫﺎ‪:‬‬ ‫. //outputs “0‬‬ ‫”‪alert(oStringObject.‬در ﺣﺎﻟﯽ‬ ‫ﮐﻪ ﺑﺮاي ﺗﺎﺑﻊ )(‪ .)‪oStringObject. -4)). //outputs “rld‬‬ ‫”‪alert(oStringObject.localeCompare (“zoo”)).substring‬‬ ‫ﻫﺮ دو اﯾﻦ ﻣﺘﺪ ﻫﺎ ﯾﮏ ﯾﺎ دو آرﮔﻮﻣﺎن را ﻣﯽ ﭘﺬﯾﺮﻧﺪ ﮐﻪ آرﮔﻮﻣﺎن اول ﻣﺤﻞ ﺷﺮوع و آرﮔﻮﻣﺎن دوم ﻣﺤﻞ ﭘﺎﯾﺎن را ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ‪. //outputs “lo w‬‬ ‫”‪alert(oStringObject.substring(3. //outputs “1‬‬ ‫”‪alert(oStringObject.slice(3)).‬اﻣﺎ در ﺧﻂ ﺳﻮم آرﮔﻮﻣﺎن ﻣﻨﻔﯽ ﺻﻔﺮ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‪ .)‪oStringObject.‬ﯾﻌﻨﯽ‪:‬‬ ‫.sustring‬ﻣﻘﺎدﯾﺮ ﻣﻨﻔﯽ ﺑﻪ ﻋﻨﻮان ﺻﻔﺮ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‪). //outputs “lo w‬‬ ‫ﺳﻮاﻟﯽ ﮐﻪ دراﯾﻨﺠﺎ ﭘﯿﺶ ﻣﯽ آﯾﺪ اﯾﻦ اﺳﺖ ﮐﻪ ﭼﺮا دﻗﯿﻘﺎ اﯾﻦ دو ﺗﺎﺑﻊ ﺑﮏ ﮐﺎر را اﻧﺠﺎم ﻣﯽ دﻫﻨﺪ ؟ در ﺣﻘﯿﻘﺖ ﺗﻔﺎوت آن ﻫﺎ در ﮐﺎر‬ ‫ﺑﺎ آرﮔﻮﻣﺎن ﻫﺎي ﻣﻨﻔﯽ اﺳﺖ‪.)”‪var oStringObject = new String(“yellow‬‬ ‫”‪alert(oStringObject.substring(3)).‬درواﻗﻊ ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮﻧﺪ‪(.

0‬‬ ‫‪‬‬ ‫‪37‬‬ ‫‪5‬‬ ‫ﻧﮑﺘﻪ‪ :‬ﺗﺮﺗﯿﺐ آرﮔﻮﻣﺎن ﻫﺎ در ﻣﺘﺪﻫﺎي)(‪ . //outputs “HELLO WORLD‬‬ ‫”‪alert(oStringObject.)”‪var oStringObject= new String(“Hello World‬‬ ‫”‪alert(oStringObject.toUpperCase‬و )(‪ .substr(0.ir‬‬ .subString(6.‬در ﺻﻮرﺗﯽ ﮐﻪ آرﮔﻮﻣﺎن دوم ذﮐﺮ‬ ‫ﻧﺸﻮد ﻋﻤﻞ ﺟﺪاﮐﺮدن ﺗﺎ اﻧﺘﻬﺎي رﺷﺘﻪ ﺧﻮاﻫﺪ ﺑﻮد‪ .‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫در ﺧﻂ ﭼﻬﺎرم آرﮔﻮﻣﺎن دوم ﺑﺎ ﻃﻮل رﺷﺘﻪ ﺟﻤﻊ ﺷﺪه و ﺣﺎﺻﻞ آن ﯾﻌﻨﯽ ‪ 8‬ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎن دوم در ﻧﻈﺮﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‪ .‬اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ﮐﻪ اوﻟﯽ‬ ‫ﻣﻮﻗﻌﯿﺖ ﺷﺮوع و دوﻣﯽ ﻃﻮل زﯾﺮ رﺷﺘﻪ اي ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ از رﺷﺘﻪ اﺻﻠﯽ ﺟﺪا ﮐﻨﯿﻢ ﺧﻮاﻫﺪ ﺑﻮد‪ .8‬‬ ‫و در ﺧﻂ ﭘﻨﺠﻢ ﺣﺎﺻﻞ ﺑﻪ ﺻﻮرت زﯾﺮ ﻣﺤﺎﺳﺒﻪ ﻣﯽ ﺷﻮد‪:‬‬ ‫.)‪oStringObject.substring‬اﻫﻤﯿﺘﯽ ﻧﺪارد‪ .‬‬ ‫‪‬‬ ‫ﻧﮑﺘﻪ‪ :‬در ﺻﻮرﺗﯽ ﮐﻪ آرﮔﻮﻣﺎن ﻫﺎي ارﺳﺎﻟﯽ ﺑﻪ ﻣﺘﺪ ﻫﺎي)(‪ .‬‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﻣﺘﺪي ﺑﻪ ﻧﺎم)(‪ .slice(3.substr‬ﻧﯿﺰ ﺑﺮاي ﺟﺪاﮐﺮدن زﯾﺮ رﺷﺘﻪ ﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ‪.substring(3.toLowerCase‬ﺑﺮاي ﺗﺒﺪﯾﻞ ﺣﺮوف رﺷﺘﻪ ﺑﻪ ﺣﺮوف ﺑﺰرگ ﯾﺎ ﮐﻮﭼﮏ اﺳﺘﻔﺎده ﻣﯽ‬ ‫ﺷﻮد ﮐﻪ ﮐﺎر آن ﻫﺎ از روي اﺳﻤﺸﺎن ﮐﺎﻣﻼ ﻣﺸﺨﺺ اﺳﺖ‪:‬‬ ‫.)‪oStringObject. //outputs “hello world‬‬ ‫”‪alert(oStringObject.‬ﺑﻪ ﻣﺜﺎل زﯾﺮ ﺗﻮﺟﻪ ﮐﻨﯿﺪ‪:‬‬ ‫. //outputs “hello world‬‬ ‫‪1stwebdesigner.slice‬و)(‪ .”‪“javascript‬‬ ‫.substring‬ﯾﮑﺴﺎن ﺑﺎﺷﻨﺪ‪،‬‬ ‫ﻣﻘﺪار ‪ null‬ﺑﺮﮔﺮداﻧﺪه ﻣﯽ ﺷﻮد‪.)‪myString. //outputs “HELLO WORLD‬‬ ‫”‪alert(oStringObject.toLocaleUpperCase()).toUpperCase()).‬ﯾﻌﻨﯽ‪:‬‬ ‫.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‬ ‫ﺣﺎﺻﻞ)‪ .6‬ﺑﺎ)‪ .subString(3.)‪alert(mySubStr‬‬ ‫)(‪ toUpperCase‬و)( ‪toLowerCase‬‬ ‫از ﺗﻮاﺑﻌﯽ ﻫﻤﭽﻮن )(‪ .4‬‬ ‫‪//‬‬ ‫”‪output “java‬‬ ‫‪var myString‬‬ ‫=‬ ‫‪var mySubStr‬‬ ‫=‬ ‫.3‬ﺗﻔﺎوﺗﯽ ﻧﺨﻮاﻫﻨﺪ داﺷﺖ‪ .toLocaleLowerCase()).toLowerCase()).‬ﺑﻪ ﻫﺮ ﺣﺎل آرﮔﻮﻣﺎن ﮐﻮﭼﮑﺘﺮ ﺑﻪ‬ ‫ﻋﻨﻮان ﺣﺪ اﺑﺘﺪاﯾﯽ و ﭘﺎراﻣﺘﺮ ﺑﺰرﮔﺘﺮ ﺑﻪ ﻋﻨﻮان ﺣﺪ اﻧﺘﻬﺎﯾﯽ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد‪.slice‬و)(‪ .

ir .1stwebdesigner.

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

abs() ،‬اﺳﺖ ﮐﻪ ﻗﺪر ﻣﻄﻠﻖ اﻋﺪاد ﮔﺮﻓﺘﻪ ﺷﺪه را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.‬‬ ‫ﺑﻪ ﻣﺜﺎل ﻫﺎي زﯾﺮ ﺗﻮﺟﻪ ﮐﻨﯿﺪ‪:‬‬ ‫”‪alert(Math.ceil(25. 32.)‪54.‬‬ ‫)(‪ :pow‬ﺑﺮاي ﻣﺤﺎﺳﺒﻪ ﺗﻮان ﯾﮏ ﻋﺪد ﺑﻪ ﮐﺎر ﻣﯽ رود ﮐﻪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد‪:‬‬ ‫.min‬و )(‪.max(3.max‬‬ ‫از اﯾﻦ ﺗﻮاﺑﻊ ﺑﺮاي ﭘﯿﺪاﮐﺮدن ﮐﻮﭼﮑﺘﺮﯾﻦ و ﺑﺰرﮔﺘﺮﯾﻦ ﻣﻘﺎدﯾﺮ از ﺑﯿﻦ ﭼﻨﺪ ﻋﺪد اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .pow(2.round‬ﻫﺴﺘﻨﺪ‪.‬‬ ‫ﻣﺘﺪﻫﺎي )(‪ .‬‬ ‫‪alert(iMin).floor‬و )(‪ . 32.floor(25.min(3. 16‬‬ ‫”‪“54‬‬ ‫.‬اﯾﻦ ﺗﻮاﺑﻊ ﺷﺎﻣﻞ )(‪ .5)). //outputs “26‬‬ ‫”‪alert(Math. //outputs “26‬‬ ‫”‪alert(Math. 10‬‬ ‫)(‪ :sqrt‬ﺟﺬر ﯾﮏ ﻋﺪد را ﺣﺴﺎب ﻣﯽ ﮐﻨﺪ‪:‬‬ ‫. //outputs‬‬ ‫‪var iMin = Math.‬‬ ‫‪ ‬ﺗﺎﺑﻊ )(‪ :ceil‬اﯾﻦ ﺗﺎﺑﻊ ﺑﺪون در ﻧﻈﺮ ﮔﺮﻓﺘﻦ ﻗﺴﻤﺖ اﻋﺸﺎري آن را ﺑﻪ ﮐﻮﭼﮑﺘﺮﯾﻦ ﻋﺪد ﺻﺤﯿﺢ ﺑﻌﺪي ﮔﺮد ﻣﯽ ﮐﻨﺪ‪. 16‬‬ ‫”‪“3‬‬ ‫‪var iMax = Math.round(25.)‪var iNum = Math.5)).‬‬ ‫ﯾﮑﯽ از ﻣﺘﺪ ﻫﺎ ‪ .‫اﺷﯿﺎي دروﻧﯽ )ﭘﯿﺶ ﺳﺎﺧﺘﻪ(‬ ‫ﺷﯽ ‪Math‬‬ ‫‪40‬‬ ‫‪6‬‬ ‫ﯾﮑﯽ از اﺷﯿﺎي از ﭘﯿﺶ ﺳﺎﺧﺘﻪ ﺷﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺖ ﮐﻪ ﺑﺮاي اﻧﺠﺎم ﻣﺤﺎﺳﺒﺎت ﻋﺪدي و ﻋﻤﻠﯿﺎت ﻣﺮﺑﻮط ﺑﻪ رﯾﺎﺿﯿﺎت اﺳﺘﻔﺎده‬ ‫ﻣﯽ ﺷﻮد‪ . //outputs “2‬‬ ‫ﺷﯽ ‪ Math‬ﺷﺎﻣﻞ ﻣﺘﺪ ﻫﺎي زﯾﺮ ﻧﯿﺰ ﻣﯽ ﺑﺎﺷﺪ‪:‬‬ ‫‪1stwebdesigner.)‪var iNum = Math. //outputs “25‬‬ ‫ﮔﺮوه دﯾﮕﺮي از ﻣﺘﺪ ﻫﺎ ﺑﺮاي ﮐﺎر ﺑﺎ ﻣﻘﺎدﯾﺮ ﺗﻮاﻧﯽ وﺟﻮد دارد‪:‬‬ ‫)(‪ :log‬ﺑﺮاي ﻣﺤﺎﺳﺒﻪ ﻟﮕﺎرﯾﺘﻢ ﻃﺒﯿﻌﯽ ﻋﺪد ﮔﺮﻓﺘﻪ ﺷﺪه ﺑﻪ ﮐﺎر ﻣﯽ رود‪.‬اﯾﻦ ﻣﺘﺪ ﻫﺎ ﻫﺮ ﺗﻌﺪاد ﭘﺎراﻣﺘﺮ را ﻣﯽ‬ ‫ﺗﻮاﻧﻨﺪ ﺑﭙﺬﯾﺮﻧﺪ‪:‬‬ ‫.‬‬ ‫‪ ‬ﺗﺎﺑﻊ )(‪ :floor‬اﯾﻦ ﺗﺎﺑﻊ ﺑﺪون در ﻧﻈﺮ ﮔﺮﻓﺘﻦ ﻗﺴﻤﺖ اﻋﺸﺎري آن را ﺑﻪ ﺑﺰرﮔﺘﺮﯾﻦ ﻋﺪد ﺻﺤﯿﺢ ﻗﺒﻠﯽ ﮔﺮد ﻣﯽ ﮐﻨﺪ‪. //outputs‬‬ ‫اﯾﻦ ﺗﻮاﺑﻊ ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از ﻧﻮﺷﺘﻦ ﺑﺮﻧﺎﻣﻪ ﻫﺎي اﺿﺎﻓﯽ ﺑﺮاي ﭘﯿﺪاﮐﺮدن ‪ min‬و ‪ max‬اﻋﺪاد ﻣﯽ ﺗﻮاﻧﺪ اﺳﺘﻔﺎده ﺷﻮد‪.‬‬ ‫‪ ‬ﺗﺎﺑﻊ )(‪ :round‬اﯾﻦ ﺗﺎﺑﻊ ﻋﺪد ﮔﺮﻓﺘﻪ ﺷﺪه را ﺑﻪ ﻋﺪد ﺻﺤﯿﺢ ﺑﺎﻻﺗﺮ ﮔﺮد ﻣﯽ ﮐﻨﺪ اﮔﺮ ﻗﺴﻤﺖ اﻋﺸﺎري ا زﻧﺼﻒ ﺑﯿﺸﺘﺮ ﯾﺎ‬ ‫ﻣﺴﺎوي ﺑﺎﺷﺪ و در ﻏﯿﺮ اﯾﻦ ﺻﻮرت آن را ﺑﻪ ﻋﺪد ﺻﺤﯿﺢ ﭘﺎﯾﯿﻦ ﺗﺮ ﮔﺮد ﻣﯽ ﮐﻨﺪ‪.ceil‬و‬ ‫)(‪ .‬‬ ‫‪alert(iMax).‬اﯾﻦ ﺷﯽ ﺷﺎﻣﻞ ﯾﮑﺴﺮي ﺧﺎﺻﯿﺖ و ﻣﺘﺪ اﺳﺖ ﮐﻪ اﻧﺠﺎم ﻣﺤﺎﺳﺒﺎت را آﺳﺎن ﻣﯽ ﮐﻨﺪ‪.5)).sqrt(4‬‬ ‫”‪alert(iNum).ir‬‬ .‬‬ ‫ﮔﺮوﻫﯽ دﯾﮕﺮ از ﻣﺘﺪ ﻫﺎ ﮐﻪ ﺑﺮاي ﮔﺮد ﮐﺮدن اﻋﺪاد اﻋﺸﺎري ﺑﻪ ﺻﺤﯿﺢ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮﻧﺪ‪ .)‪54.

cos(x) .floor(Math.‬را ‪ encode‬ﻧﻤﯽ ﮐﻨﺪ درﺣﺎﻟﯽ ﮐﻪ ﺗﺎﺑﻊ دوم ﺗﻤﺎم ﮐﺎراﮐﺘﺮ ﻫﺎي ﻏﯿﺮ اﺳﺘﺎﻧﺪارد را ‪ encode‬ﺧﻮاﻫﺪ ﮐﺮد‪ .encodeURI‬و )(‪ .random() * 10 + 1‬‬ ‫ﺑﻬﺘﺮﯾﻦ راه ﺑﺮاي اﯾﺠﺎد ﻣﻘﺎدﯾﺮ ﺗﺼﺎدﻓﯽ اﺳﺘﻔﺎده از ﯾﮏ ﺗﺎﺑﻊ اﺳﺖ ﮐﻪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻧﻮﺷﺘﻪ ﻣﯽ ﺷﻮد‪:‬‬ ‫{ )‪function selectFrom(iFirstValue.htm‬ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد‪.encodeURIComponent‬ﺑﺮاي ﮐﺪﮔﺬاري آدرس ﻫﺎي اﯾﻨﺘﺮﻧﺘﯽ)‪ URI‬ﻫﺎ( اﺳﺘﻔﺎده‬ ‫ﻣﯽ ﺷﻮد‪ .)‪var iNum = Math.”‪var sUri = “http://www.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫)‪acos(x) .random‬اﺳﺖ ﮐﻪ ﺑﺮاي ﺗﻮﻟﯿﺪ اﻋﺪاد ﺗﺼﺎدﻓﯽ ﺑﯿﻦ‬ ‫‪0‬و ‪) 1‬اﻟﺒﺘﻪ ﻧﻪ ﺧﻮد ‪ 0‬و ‪ (1‬ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد‪. “black”.]”‪“brown‬‬ ‫.‬‬ ‫دﯾﮕﺮ ﺗﻮاﺑﻊ ﻣﻔﯿﺪ‬ ‫از ﺗﻮاﺑﻌﯽ ﻫﻤﭽﻮن )(‪ .. atan(x) .floor(Math.encodeURI‬ﻣﻌﻤﻮﻻ ﺑﺮاي آدرس ﻫﺎي ﮐﺎﻣﻞ )ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‬ ‫‪ ( http://learningjquery.])‪var sColor = aColors[selectFrom(0.‬در ﺣﺎﻟﺖ ﮐﻠﯽ و ﺻﺤﯿﺢ ﯾﮏ آدرس ﻧﺒﺎﯾﺪ ﺷﺎﻣﻞ ﮐﺎراﮐﺘﺮﻫﺎي ﻧﺎﻣﻌﺘﺒﺮ ﻫﻤﭽﻮن ‪ space‬ﺑﺎﺷﺪ‪ . “purple”. sin(x) . tan(x‬‬ ‫ﯾﮑﯽ دﯾﮕﺮ از ﻣﺘﺪ ﻫﺎي ﻣﺮﺑﻮط ﺑﻪ ﺷﯽ ‪ Math‬ﮐﻪ ﮐﺎرﺑﺮد زﯾﺎدي ﻫﻢ دارد )(‪ .‬‬ ‫. atan2(x.random() * iChoices + iFirstValue‬‬ ‫}‬ ‫‪//select from between 2 and 10‬‬ ‫.ir/illegal value. aColors.‬ﺑﺮاي ﻣﺜﺎل‪:‬‬ ‫‪var aColors = [“red”.‬‬ ‫ﺗﻔﺎوت اﺻﻠﯽ ﺑﯿﻦ اﯾﻦ دو ﺗﺎﺑﻊ اﯾﻦ اﺳﺖ ﮐﻪ ﺗﺎﺑﻊ اول ﮐﺎراﮐﺘﺮ ﻫﺎي ﺧﺎﺻﯽ ﮐﻪ ﺑﻪ ﻋﻨﻮان ﺟﺰﺋﯽ از آدرس ﻫﺴﺘﻨﺪ ﻫﻤﭽﻮن )‪/ ، ( :‬‬ ‫‪ ،‬؟ و‪ .‬اﯾﻦ ﺗﻮاﺑﻊ ﺑﻪ ﺷﻤﺎ در ﺗﺒﺪﯾﻞ‬ ‫ﮐﺮدن و ‪ encode‬ﮐﺮدن آدرس ﻫﺎي اﯾﻨﺘﺮﻧﺘﯽ ﻧﺎدرﺳﺖ و ﺑﯽ ارزش ﺑﺮاي اﯾﻨﮑﻪ ﻣﺮورﮔﺮﻫﺎ آﻧﻬﺎ را ﺑﻔﻬﻤﻨﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪. “yellow”.random() * total_number_of_choices +‬‬ ‫)‪first_possible_value‬‬ ‫‪41‬‬ ‫‪6‬‬ ‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﯾﺮاي اﯾﺠﺎد ﻣﻘﺎدﯾﺮ ﺗﺼﺎدﻓﯽ ﺑﯿﻦ ‪ 1‬و ‪ 10‬ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻣﯽ ﺷﻮد‪:‬‬ ‫.com/illegal value.))‪alert(encodeURIComponent(sUri‬‬ ‫‪1stwebdesigner.)‪return Math.htm‬ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد در ﺣﺎﻟﯽ ﮐﻪ دﯾﮕﺮي ﺑﺮاي ﻗﺴﻤﺘﯽ از‬ ‫آدرس ﻫﺎ ﻫﻤﭽﻮن ‪ illegal value. y) . iLastValue‬‬ ‫.‬ﺑﺮاي ﻣﺜﺎل‪:‬‬ ‫.htm#start‬‬ ‫.)‪var iNum = selectFrom(2. 10‬‬ ‫اﺳﺘﻔﺎده از اﯾﻦ ﺗﺎﺑﻊ ﺑﺮاي اﻧﺘﺨﺎب ﯾﮏ ﻋﻨﺼﺮ ﺗﺼﺎدﻓﯽ از آراﯾﻪ ﺑﺴﯿﺎر آﺳﺎن اﺳﺖ‪ .wrox.‪var iChoices = iLastValue – iFirstValue + 1‬‬ ‫. “blue”. “green”..‬‬ ‫اﻟﺒﺘﻪ ﺑﺮاي ﺗﻮﻟﯿﺪ اﻋﺪاد ﺗﺼﺎدﻓﯽ در ﯾﮏ ﻣﺤﺪوده ﺧﺎص از ﻓﺮﻣﻮل زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪:‬‬ ‫‪number = Math. asin(x) .length-1‬‬ ‫در اﯾﻨﺠﺎ آرﮔﻮﻣﺎن دوم ﺗﺎﺑﻊ ‪ ،‬ﻃﻮل آراﯾﻪ ﻣﻨﻬﺎي ‪ 1‬اﺳﺖ ﮐﻪ در واﻗﻊ ﻣﻮﻗﻌﯿﺖ آﺧﺮﯾﻦ ﻋﻨﺼﺮ ﻣﯽ ﺑﺎﺷﺪ‪.))‪alert(encodeURI(sUri‬‬ ‫.ir‬‬ .‬‬ ‫ﻣﺘﺪ )(‪ .floor(Math.

‫اﺷﯿﺎي دروﻧﯽ )ﭘﯿﺶ ﺳﺎﺧﺘﻪ(‬ ‫ﺣﺎﺻﻞ اﺟﺮاي ﮐﺪ ﺑﺎﻻ ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬ ‫‪42‬‬ ‫‪6‬‬ ‫‪http://www.)(‪sayHi‬‬ ‫‪1stwebdesigner.)”)‪eval(“alert(msg‬‬ ‫ﻫﻤﭽﻨﯿﻦ ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ آرﮔﻮﻣﺎن ﺗﺎﺑﻊ )(‪ eval‬را ﯾﮏ ﺗﺎﺑﻊ ﺗﻌﺮﯾﻒ ﮐﺮده و ﺳﭙﺲ آن را ﺧﺎرج از ﺗﺎﯾﻊ )(‪ eval‬ﺻﺪا ﺑﺰﻧﯿﺪ‪ .”‪var sUri = “http%3A%2F%2Fwww.‬ﺑﺮاي‬ ‫ﻣﺜﺎل‪:‬‬ ‫.com/illegal%20value.wrox.htm%23start‬‬ ‫‪http://www.))‪alert(decodeURIComponent(sUri‬‬ ‫ﺣﺎﺻﻞ اﺟﺮاي اﯾﻦ ﮐﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ ﺑﻮد‪:‬‬ ‫‪http%3A%2F%2Fwww.htm%23start‬‬ ‫.ir‬‬ .wrox.wrox.htm#start‬‬ ‫آﺧﺮﯾﻦ ﺗﺎﺑﻌﯽ ﮐﻪ ﺑﻪ ﻧﻈﺮ ﻗﺪرﺗﻤﻨﺪ ﻣﯽ آﯾﺪ )(‪ eval‬اﺳﺖ‪ .‬اﯾﻦ ﺗﺎﺑﻊ ﮐﻪ ﺷﺒﯿﻪ ﺑﻪ ﻣﻔﺴﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﮐﺎر ﻣﯽ ﮐﻨﺪ آرﮔﻮﻣﺎﻧﯽ از ﻧﻮع‬ ‫رﺷﺘﻪ ﻣﯽ ﮔﯿﺮد ﮐﻪ در واﻗﻊ ﯾﮏ ﺑﺮﻧﺎﻣﻪ ﺑﻪ زﺑﺎن ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺖ و اﯾﻦ ﺗﺎﺑﻊ آن را ﻫﻤﺎﻧﻨﺪ ﺳﺎﯾﺮ ﺑﺮﻧﺎﻣﻪ ﻫﺎ اﺟﺮا ﻣﯽ ﮐﻨﺪ‪ .com%2Fillegal value.))‪alert(decodeURI(sUri‬‬ ‫.)’‪eval(“function sayHi() { alert(‘hi‬‬ ‫.htm%23start‬‬ ‫ﻃﺒﯿﻌﺘﺎ دو ﺗﺎﺑﻊ ﺑﺮاي ‪ decode‬ﮐﺮدن آدرس ﻫﺎي اﯾﻨﺘﺮﻧﺘﯽ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ﻫﻤﭽﻮن‪:‬‬ ‫)(‪decodeURI‬‬ ‫)(‪decodeURIComponent‬‬ ‫‪‬‬ ‫‪‬‬ ‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‪:‬‬ ‫.wrox.htm#start‬‬ ‫‪http%3A%2F%2Fwww.‬‬ ‫اﯾﻦ ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ اﺳﺖ ﮐﻪ ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ از داﺧﻞ آرﮔﻮﻣﺎن ﻫﺎي اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ ﺗﻤﺎم ﻣﺘﻐﯿﺮﻫﺎي ﺧﺎرج آن دﺳﺘﺮﺳﯽ داﺷﺘﻪ و از آن ﻫﺎ‬ ‫اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪:‬‬ ‫.)”)’‪eval(“alert(‘hi‬‬ ‫اﯾﻦ ﺗﮑﻪ ﮐﺪ در ﺣﻘﯿﻘﺖ ﻣﻌﺎدل دﺳﺘﻮر زﯾﺮ اﺳﺖ‪:‬‬ ‫.com%2Fillegal%20value.‬ﺑﺮاي‬ ‫ﻣﺜﺎل‪:‬‬ ‫.)”} .)”‪alert(“hi‬‬ ‫ﻣﻮﻗﻌﯽ ﮐﻪ ﻣﻔﺴﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ اﯾﻦ ﺗﺎﺑﻊ ﻣﯽ رﺳﺪ آرﮔﻮﻣﺎن آن را ﺑﻪ ﻋﻨﻮان ﯾﮏ دﺳﺘﻮر ﺧﯿﻠﯽ ﺳﺎده ﺗﻔﺴﯿﺮ ﮐﺮده و اﺟﺮا ﻣﯽ ﮐﻨﺪ‪.wrox.”‪var msg = “hello world‬‬ ‫.com/illegal value.com%2Fillegal%20value.

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

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

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

‬‬ ‫‪resizeBy(w.h) .‬‬ ‫‪moveTo(x.‬ﻣﺎﻧﻨﺪ ﺷﮑﻞ زﯾﺮ‪:‬‬ ‫‪7‬‬ ‫اﮐﻨﻮن ﺑﻪ ﺑﺮرﺳﯽ ﻫﺮ ﯾﮏ از اﺟﺰاي ﺗﺸﮑﯿﻞ دﻫﻨﺪه ‪ BOM‬و ﺧﺼﻮﺻﯿﺎت و ﻣﺘﺪﻫﺎي ﻣﺮﺑﻮط ﺑﻪ آن ﻫﺎ ﻣﯽ ﭘﺮدازﯾﻢ‪:‬‬ ‫ﺷﯽ ‪window‬‬ ‫ﺷﯽ ‪ window‬ﺗﻤﺎﻣﯽ ﭘﻨﺠﺮه ﻫﺎي ﻣﺮورﮔﺮ را ﺷﺎﻣﻞ ﻣﯽ ﺷﻮد اﻣﺎ ﻧﻪ ﻟﺰوﻣﺂ ﻣﺤﺘﻮاﯾﯽ ﮐﻪ در آن ﻧﻤﺎﯾﺶ داده ﻣﯽ ﺷﻮد‪ .y‬ﻣﯽ ﺑﺮد‪ .‬ﻋﺪد ﻫﺎي ﻣﻨﻔﯽ ﻫﻢ‬ ‫ﺑﺮاي ‪ x.٣‬‬ ‫ﻋﺮض ﭘﻨﺠﺮه ﻣﺮورﮔﺮ را ﺑﻪ اﻧﺪازه ‪ w‬و ارﺗﻔﺎع آﻧﺮا ﺑﻪ اﻧﺪازه ‪ h‬ﻧﺴﺒﺖ ﺑﻪ ‪ size‬ﮐﻨﻮﻧﯽ ﺗﻐﯿﯿﺮ ﻣﯽ دﻫﺪ‪ .‬اﺷﯿﺎﯾﯽ ﮐﻪ ﺑﺎ ﭘﻨﺠﺮه ي‬ ‫ﻣﺮورﮔﺮ ارﺗﺒﺎط و ﺗﻌﺎﻣﻞ ﻣﺴﺘﻘﯿﻢ دارﻧﺪ را ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ‪ .١‬‬ ‫ﭘﻨﺠﺮه را ﻧﺴﺒﺖ ﺑﻪ ﻣﻮﻗﻌﯿﺖ ﮐﻨﻮﻧﯽ ﺑﻪ اﻧﺪازه ‪ x‬در ﺟﻬﺖ اﻓﻘﯽ و ﺑﻪ اﻧﺪازه ‪ y‬در ﺟﻬﺖ ﻋﻤﻮدي ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ‪ .٢‬‬ ‫ﮔﻮﺷﻪ ﺑﺎﻻي ﭼﭗ ﻣﺮورﮔﺮ را ﺑﻪ ﻣﻮﻗﻌﯿﺖ ‪ x.‬‬ ‫دﺳﺘﮑﺎري ﭘﻨﺠﺮه ﻫﺎ‬ ‫ﺷﺶ ﻣﺘﺪ ﺑﺮاي دﺳﺘﮑﺎري ﭘﻨﺠﺮه ﻣﺮورﮔﺮ ﺑﺮاي ﺷﯽ ‪ window‬وﺟﻮد دارد‪:‬‬ ‫‪moveBy(dx.‬از اﯾﻦ ﺷﯽ‬ ‫ﺑﺮاي ﺟﺎﺑﺠﺎﯾﯽ ‪ ،‬ﺗﻐﯿﯿﺮ اﻧﺪازه و دﯾﮕﺮ اﺛﺮات ﺑﺮ روي ﭘﻨﺠﺮه ﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪.y) .‬ﻣﻘﺎدﯾﺮ ﻣﻨﻔﯽ ﻧﯿﺰ ﻣﺠﺎز ﻫﺴﺘﻨﺪ‪.‬ﻣﻘﺎدﯾﺮ ﻣﻨﻔﯽ ﻧﯿﺰ ﻣﺠﺎزﻧﺪ‪.۴‬‬ ‫ﻋﺮض ﻣﺮورﮔﺮ را ﺑﻪ ‪ w‬و ارﺗﻔﺎع آن را ﺑﻪ ‪ h‬ﺗﻐﯿﯿﺮ ﻣﯽ دﻫﺪ‪ .‬ﻣﻘﺎدﯾﺮ ﻣﻨﻔﯽ ﻣﺠﺎز ﻧﯿﺴﺘﻨﺪ‪.ir‬‬ .‫‪ BOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬ ‫ِ‪ BOM‬ﭼﯿﺴﺖ؟‬ ‫‪46‬‬ ‫آﺷﻨﺎﯾﯽ ﺑﺎ ﻣﻔﻬﻮم ‪ BOM‬ﺑﻪ ﻣﻨﻈﻮر ﯾﺎدﮔﯿﺮي و اﺳﺘﻔﺎده ﮐﺎرآﻣﺪ از ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺴﯿﺎر اﻫﻤﯿﺖ دارد‪ BOM .dy) .h) .y‬ﻣﺠﺎزﻧﺪ‪.‬‬ ‫‪resizeTo(w.‬‬ ‫‪1stwebdesigner.

0‬‬ ‫ﻓﻘﻂ ‪ 150px‬ﺑﻪ ﻋﺮض ﮐﻨﻮﻧﯽ ﭘﻨﺠﺮه اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﺪ‪.1‬آدرس ﺻﻔﺤﻪ‬ ‫‪ .۵‬‬ ‫اﺳﮑﺮول اﻓﻘﯽ را ﺑﻪ اﻧﺪازه ‪ x‬و اﺳﮑﺮول ﻋﻤﻮدي را ﺑﻪ اﻧﺪازه ‪ y‬ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ‪.y) . 0‬‬ ‫ﭘﻨﺠﺮه را ﺑﻪ ﮔﻮﺷﻪ ﺑﺎﻻ و ﺳﻤﺖ ﭼﭗ ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﻫﺪاﯾﺖ ﻣﯽ ﮐﻨﺪ‪.ir‬‬ . 20‬‬ ‫‪47‬‬ ‫‪7‬‬ ‫ﭘﻨﺠﺮه را ﻧﺴﺒﺖ ﺑﻪ ﻣﮑﺎن ﻓﻌﻠﯽ ‪ 10px‬ﭘﯿﮑﺴﻞ ﺑﻪ ﺳﻤﺖ راﺳﺖ و ‪ 20px‬ﺑﻪ ﺳﻤﺖ ﭘﺎﯾﯿﻦ ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ‪.3‬رﺷﺘﻪ اي از وﯾﮋﮔﯽ ﻫﺎي‬ ‫‪ .‬‬ ‫وﯾﮋﮔﯽ ﻫﺎي آرﮔﻮﻣﺎن ﺳﻮم ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﭘﻨﺠﺮه ي ﺟﺪﯾﺪ ﭼﻪ ﺧﺼﻮﺻﯿﺎﺗﯽ داﺷﺘﻪ ﺑﺎﺷﺪ ﮐﻪ در زﯾﺮ ﺑﯿﺎن ﻣﯽ ﮐﻨﯿﻢ‪:‬‬ ‫ﺧﺼﻮﺻﯿﺎت ﺑﺎ = ﻣﻘﺪار دﻫﯽ ﻣﯽ ﺷﻮد و ﺑﺎ ‪ .2‬ﻧﺎم ﺻﻔﺤﻪ‬ ‫‪ .moveTo(0. 300‬‬ ‫ﻋﺮض ﭘﻨﺠﺮه را ﺑﻪ ‪ 150px‬و ارﺗﻔﺎع آن را ﺑﻪ ‪ 300px‬ﺗﻐﯿﯿﺮ ﻣﯽ دﻫﺪ‪.‬‬ ‫)‪window.‬‬ ‫‪scrollTo(x.‬‬ ‫ﺑﺮﺧﯽ از ﺧﺼﻮﺻﯿﺎت ﻣﺠﺎز ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﻋﺒﺎرﺗﻨﺪ از‪:‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪ :left‬ﻓﺎﺻﻠﻪ از ﭼﭗ‬ ‫‪ :top‬ﻓﺎﺻﻠﻪ از ﺑﺎﻻ‬ ‫‪ :width‬ﻋﺮض ﭘﻨﺠﺮه‬ ‫‪ :height‬ارﺗﻔﺎع ﭘﻨﺠﺮه‬ ‫‪ :(Yes/No) resizable‬آﯾﺎ ﭘﻨﺠﺮه ﻗﺎﺑﻞ ﺗﻐﯿﯿﺮ اﻧﺪازه ﺑﺎﺷﺪ ﯾﺎ ﺧﯿﺮ‬ ‫‪1stwebdesigner.‬‬ ‫ﻣﺜﺎل ﻫﺎ‪:‬‬ ‫)‪window.‬اﮔﺮ ﭘﻨﺠﺮه اي از ﻗﺒﻞ ﺑﺎ ﻧﺎﻣﯽ ﮐﻪ ﺑﺮاي آرﮔﻮﻣﺎن دوم اﻧﺘﺨﺎب ﮐﺮده اﯾﺪ وﺟﻮد‬ ‫داﺷﺘﻪ ﺑﺎﺷﺪ ﺻﻔﺤﻪ در آن ﭘﻨﺠﺮه ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ ‪ .‬‬ ‫ﭘﯿﻤﺎﯾﺶ و ﺑﺎز ﮐﺮدن ﭘﻨﺠﺮه ﻫﺎي ﺟﺪﯾﺪ‬ ‫ﺑﺮاي ﺑﺎز ﮐﺮدن ﭘﻨﺠﺮه ﻫﺎي ﺟﺪﯾﺪ ﺑﺎ اﺳﺘﻔﺎده از ﺟﺎوا اﺳﮑﺮﯾﭙﺖ از ﻣﺘﺪ )(‪ open‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ﮐﻪ ﭼﻬﺎر آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد‪:‬‬ ‫‪ .dy) .moveBy(10.‬‬ ‫)‪window.resizeBy(150.‬در ﻏﯿﺮ اﯾﻦ ﺻﻮرت در ﭘﻨﺠﺮه اي ﺟﺪﯾﺪ ﺑﺎز ﻣﯽ ﺷﻮد‪ .resizeTo(150.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪scrollBy(dx.‬از ﻫﻢ ﺟﺪا ﻣﯽ ﺷﻮد‪.‬‬ ‫)‪window.‬اﮔﺮ آرﮔﻮﻣﺎن ﺳﻮم ﺗﻌﯿﯿﻦ‬ ‫ﻧﺸﻮد ﭘﻨﺠﺮه ﺑﺎ ﺗﻨﻈﯿﻤﺎت ﭘﻨﺠﺮه اﺻﻠﯽ ﻣﺮورﮔﺮ ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ‪.4‬و ﯾﮏ ﻣﻘﺪار ‪Booelan‬‬ ‫ﻋﻤﻮﻣﺂ ﻓﻘﻂ از ﺳﻪ آرﮔﻮﻣﺎن اول اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .۶‬‬ ‫اﯾﻦ ﻣﺘﺪ ﻣﺨﺘﺼﺎت ﺟﺪﯾﺪ اﺳﮑﺮول ﻫﺎي اﻓﻘﯽ و ﻋﻤﻮدي را ﺑﻪ ﺗﺮﺗﯿﺐ ﺑﺎ اﺳﺘﻔﺎده از آرﮔﻮﻣﺎن ﻫﺎي ‪ x‬و ‪ y‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.

‬‬ ‫‪‬‬ ‫)(‪ :prompt‬ﭘﻨﺠﺮه ي اﯾﻦ ﻣﺘﺪ ﭼﻬﺎر ﻗﺴﻤﺖ دارد‪ .‬‬ ‫‪‬‬ ‫‪ :(Yes/No) status ‬آﯾﺎ ﻧﻮار وﺿﻌﺒﺖ داﺷﺘﻪ ﺑﺎﺷﺪ‬ ‫‪ :(Yes/No) location ‬آﯾﺎ ﻧﻮار آدرس داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬ ‫‪‬‬ ‫)(‪ :confirm‬اﯾﻦ ﺗﺎﺑﻊ ﻫﻢ ﻣﺎﻧﻨﺪ ﺗﺎﺑﻊ ﺑﺎﻻﺳﺖ‪ .‬اﯾﻦ ﻣﺘﺪ ﻓﻘﻂ ﻣﯽ ﺗﻮاﻧﺪ ﭘﻨﺠﺮه اي ﮐﻪ ﺗﻮﺳﻂ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺑﺎز ﺷﺪه اﺳﺖ‬ ‫را ﻣﺴﺘﻘﯿﻤﺎ ﺑﺒﻨﺪد ﻧﻪ ﭘﻨﺠﺮه ي اﺻﻠﯽ‪.‬دﮐﻤﻪ ي ‪ ،Ok‬دﮐﻤﻪ ي ‪ ،Cancel‬ﯾﮏ ﻣﺘﻦ و ﯾﮏ ﮐﺎدر ﻣﺘﻨﯽ ﺑﺮاي‬ ‫وارد ﮐﺮدن ﯾﮏ رﺷﺘﻪ ﺗﻮﺳﻂ ﮐﺎرﺑﺮ‪.‫‪ BOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬ ‫‪48‬‬ ‫‪7‬‬ ‫)‪ :(Yes/No) scrollable(scrollbars‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ آﯾﺎ ﭘﻨﺠﺮه ﻧﻮار اﺳﮑﺮول داﺷﺘﻪ ﺑﺎﺷﺪ ﯾﺎ ﺧﯿﺮ‬ ‫‪‬‬ ‫‪ :(Yes/No) toolbar‬آﯾﺎ ﺷﺎﻣﻞ ﻧﻮار اﺑﺰار ﺑﺎﺷﺪ‪.‬‬ ‫‪ ‬در رﺷﺘﻪ اي از ﺧﺼﻮﺻﯿﺎت ﻧﺒﺎﯾﺪ ﻫﯿﭻ ﻓﻀﺎي ﺧﺎﻟﯽ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬ ‫ﻣﺘﺪ )(‪ .‬‬ ‫> "‪<scritp type="text/javascript‬‬ ‫.‬ﺗﻨﻬﺎ ﺗﻔﺎوت اﯾﻦ دو وﺟﻮد ﯾﮏ دﮐﻤﻪ ‪ Cancel‬در ﭘﻨﺠﺮه ي ﺑﺎز ﺷﻮﻧﺪه‬ ‫اﺳﺖ‪.open‬ﺷﯽ اي از ﻧﻮع ‪ window‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﺗﻤﺎم ﻣﺘﺪﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎﯾﯽ ﮐﻪ ﺷﯽ ‪ window‬دارد را داراﺳﺖ‪.ir‬‬ .)'‪alert('Hello world‬‬ ‫>‪</script‬‬ ‫از اﯾﻦ ﭘﻨﺠﺮه ﻣﻌﻤﻮﻵ ﺑﺮاي ﻧﻤﺎﯾﺶ ﯾﮏ ﭘﯿﻐﺎم ﺑﻪ ﺻﻮرت ﻫﺸﺪار اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬‬ ‫‪1stwebdesigner.‬‬ ‫‪‬‬ ‫)(‪ :alert‬اﯾﻦ ﺗﺎﺑﻊ ﯾﮏ آرﮔﻮﻣﺎن از ﻧﻮع ﻣﺘﻦ ﻣﯽ ﮔﯿﺮد و آن را در ﻗﺎﻟﺐ ﯾﮏ ﭘﻨﭽﺮه ﮐﻮﭼﮏ ﮐﻪ ﯾﮏ دﮐﻤﻪ ‪ ok‬دارد‬ ‫ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﺪ‪:‬‬ ‫> "‪<scritp type="text/javascript‬‬ ‫.‬‬ ‫ﭘﻨﺠﺮه ﻫﺎي ‪System Dialog‬‬ ‫ﺷﯽ ‪ window‬ﭼﻨﺪﯾﻦ ﺗﺎﺑﻊ ﺑﺮاي ﻧﻤﺎﯾﺶ ﭘﯿﻐﺎم و ﮔﺮﻓﺘﻦ ﺟﻮاب از ﮐﺎرﺑﺮان را دارد‪.‬‬ ‫ﺑﺮاي ﺑﺴﺘﻦ ﭘﻨﺠﺮه از ﻣﺘﺪ )(‪ .close‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ . )' ? ‪confirm('Are you sure‬‬ ‫>‪</script‬‬ ‫در ﺻﻮرﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ ‪ Ok‬را ﺑﺰﻧﺪ ﻣﻘﺪار ‪ True‬و در ﺻﻮرت زدن دﮐﻤﻪ ي ‪ Cancel‬ﻣﻘﺪار ‪ False‬را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ‪.

‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد‪:‬‬ ‫‪ .‬‬ ‫ﺑﺮاي ﺗﻐﯿﯿﺮ ﻟﺤﻈﻪ اي ﻧﻮار وﺿﻌﯿﺖ ﻣﺜﻶ وﻗﺘﯽ ﮐﺎرﺑﺮ‪ ،‬ﻣﺎوس را روي ﯾﮏ ﻟﯿﻨﮏ ﻗﺮار ﻣﯽ دﻫﺪ ﻣﯽ ﺗﻮان از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻧﻤﻮد‪:‬‬ ‫‪<a href="books.‬‬ ‫‪.‬‬ ‫‪ .2‬ﻣﻘﺪار ﭘﯿﺶ ﻓﺮض ﺑﺮاي ﮐﺎدر ﻣﺘﻨﯽ‬ ‫> "‪<scritp type="text/javascript‬‬ ‫.)'‪Prompt('what is your name'.1‬ﻋﻨﻮان ﺳﻮال ﯾﺎ ﻣﺘﻨﯽ ﮐﻪ ﺑﻪ ﮐﺎرﺑﺮ ﻧﺸﺎن داده ﻣﯽ ﺷﻮد‪.'Michael‬‬ ‫>‪</script‬‬ ‫‪49‬‬ ‫‪7‬‬ ‫در ﺻﻮرﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ ي ‪ Ok‬را ﺑﺰﻧﺪ ﺗﺎﺑﻊ ﻣﻘﺪار وارد ﺷﺪه در ﮐﺎدر ﻣﺘﻨﯽ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ و در ﺻﻮرت زدن دﮐﻤﻪ ي ‪Cancel‬‬ ‫ﻣﻘﺪار ‪ Null‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.‬‬ ‫‪ :setTimeouts ‬ﮐﺪ ﮔﺮﻓﺘﻪ ﺷﺪه را ﭘﺲ از ﻋﺪدي ﺑﺮ ﺣﺴﺐ ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ اﺟﺮا ﻣﯽ ﮐﻨﺪ‪ .‬‬ ‫>‪">Books</a‬‬ ‫اﺟﺮاي ﻣﮑﺮر ﮐﺪﻫﺎ از ﻃﺮﯾﻖ ﻣﺘﺪﻫﺎي ‪ Timeouts‬و ‪Intervals‬‬ ‫از اﯾﻦ دو ﺗﺎﺑﻊ ﺑﺮاي اﺟﺮاي ﯾﮏ ﺗﮑﻪ ﮐﺪ ﺑﻌﺪ از ﺑﺎزه زﻣﺎﻧﯽ ﺧﺎﺻﯽ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.htm" onmouseover="window.‬ﻫﺮ ﺳﻪ ﮐﺪ زﯾﺮ ﺑﻌﺪ از ﯾﮏ ﺛﺎﻧﯿﻪ ﯾﮏ ﭘﻨﺠﺮه‬ ‫ﻫﺸﺪار را ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﻨﺪ‪:‬‬ ‫‪1stwebdesigner.‬ﻫﺮ ﭼﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﻢ از دو ﺧﺎﺻﯿﺖ ﺑﻪ ﻧﺎم ﻫﺎي‬ ‫‪ status‬و ‪ defaultStatus‬ﺑﺮاي ﺗﻐﯿﯿﺮ آن اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ .‬اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد‪:‬‬ ‫ﮐﺪي ﮐﻪ ﺑﺎﯾﺪ اﺟﺮا ﺷﻮد‪.‬‬ ‫ﺧﺎﺻﯿﺖ ‪statusbar‬‬ ‫اﯾﻦ ﻗﺴﻤﺖ ﭘﻨﺠﺮه ﻓﺮآﯾﻨﺪ ﺑﺎرﮔﺬاري و ﭘﺎﯾﺎن ﺑﺎرﮔﺬاري را ﺑﻪ ﮐﺎرﺑﺮ ﻧﺸﺎن ﻣﯽ دﻫﺪ‪ .status='Information on Wrox‬‬ ‫'‪books.2‬‬ ‫آرﮔﻮﻣﺎن اوﻟﯽ ﻫﻢ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﺻﻮرت ﯾﮏ رﺷﺘﻪ از ﮐﺪﻫﺎ و ﻫﻢ ﻧﺎم ﯾﮏ ﺗﺎﺑﻊ ﺑﺎﺷﺪ‪ .‬ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﺣﺪس زدﯾﺪ از ﺧﺎﺻﯿﺖ ‪ Status‬ﺑﺮاي ﺗﻐﯿﯿﺮ ﻣﺘﻦ‬ ‫‪ Statusbar‬ﺑﺮاي ﭼﻨﺪ ﻟﺤﻈﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد در ﺣﺎﻟﯽ ﮐﻪ از ‪ defaultstatus‬ﺑﺮاي ﺗﻐﯿﯿﺮ ‪ Statusbar‬ﺗﺎ زﻣﺎﻧﯽ ﮐﻪ ﮐﺎرﺑﺮ در‬ ‫ﺻﻔﺤﻪ ﻫﺴﺖ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬در ﺣﺎﻟﯽ ﮐﻪ ‪ Intervals‬ﮐﺪ ﮔﺮﻓﺘﻪ‬ ‫ﺷﺪه را ﻣﮑﺮرآ ﺑﻌﺪ از ﻣﺪﺗﯽ ﺑﺮ ﺣﺴﺐ ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ ﭼﻨﺪﯾﻦ ﺑﺎر ﺗﮑﺮار ﻣﯽ ﮐﻨﺪ‪ .ir‬‬ .‬‬ ‫‪.1‬‬ ‫ﻣﺪت زﻣﺎﻧﯽ ﮐﻪ ﺑﺎﯾﺪ ﺑﻌﺪ از آن ﮐﺪ اﺟﺮا ﺷﻮد‪.

----------------------------------------------------function sayHelloWorld() { alert(“Hello world!”). history ‫ﺷﯽ‬ ‫ اﻟﺒﺘﻪ ﻫﯿﭻ راﻫﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ آدرس ﺻﻔﺤﺎت ﮐﻪ در‬.‫ ﺗﻌﺪاد ﺻﻔﺤﺎﺗﯽ ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ ﺟﻠﻮ ﯾﺎ ﺑﻪ ﻋﻘﺐ ﭘﯿﻤﺎﯾﺶ ﺷﻮﻧﺪ‬:‫ ﻓﻘﻂ ﯾﮏ ﭘﺎراﻣﺘﺮ ﻣﯽ ﮔﯿﺮد‬. }.‫ ﻧﯿﺴﺖ‬،‫ وﺟﻮد دارﻧﺪ‬history ‫ اﮔﺮ ﻋﺪد ﻣﻨﻔﯽ ﺑﺎﺷﺪ ﺑﻪ ﺻﻔﺤﺎت‬.history ‫ ﺑﺮاي اﯾﻦ ﮐﺎر از ﻣﺘﺪﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ‬. }. 1000). ----------------------------------------------------setInterval(function() { alert(“Hello world!”). 1000). } setTimout(sayHelloWorld.‫ ﻣﺎﻧﻨﺪ ﺗﺎﺑﻊ ﻗﺒﻠﯽ اﺳﺖ ﺟﺰ اﯾﻨﮑﻪ ﮐﺪ ﮔﺮﻓﺘﻪ ﺷﺪه را ﺑﻌﺪ از ﮔﺬﺷﺖ ﺑﺎزه ي زﻣﺎﻧﯽ ﻣﺸﺨﺺ ﺗﮑﺮار ﻣﯽ ﮐﻨﺪ‬:setIntervals :‫ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‬. 1000). </script> :‫ ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‬. </script> 50 ---------------------------------------------------------- 7 <scritp type="text/javascript" > setTimeout(function() { alert("Hello world!").ir .‫ﻗﺒﻞ و اﮔﺮ ﻋﺪد ﻣﺜﺒﺖ ﺑﺎﺷﺪ ﺑﻪ ﺻﻔﺨﺎت ﺟﻠﻮ ﻣﯽ روﯾﻢ‬ 1stwebdesigner.go() ‫ﻣﺘﺪ‬ :‫ ﺑﺮاي ﻣﺜﺎل ﺟﻬﺖ رﻓﺘﻦ ﺑﻪ ﯾﮏ ﺻﻔﺤﻪ ﻋﻘﺐ از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‬. </script> ---------------------------------------------------------<scritp type="text/javascript" > function sayHelloWorld() { alert("Hello world!").‫ﻣﻤﮑﻦ اﺳﺖ ﺑﺨﻮاﻫﯿﻢ ﺑﻪ ﺗﺎرﯾﺨﭽﻪ ي ﻣﺮورﮔﺮ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ‬ :‫ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‬window ‫ ﻣﺮﺑﻮط ﺑﻪ ﺷﯽ‬. 1000). 1000). ‫ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از اﺟﺮاي اﯾﻦ ﻣﺘﺪ‬  setInterval(“alert(‘Hello world!’) “.clearInterval() ‫ از ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم‬. 1000).‫ ؛ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬BOM <scritp type="text/javascript" > setTimeout("alert('Hello world!')". clearTimeout(iTimeoutId). } setInterval(sayHelloWorld. </script> .setTimeout() ‫ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از اﺟﺮاي ﺗﺎﺑﻊ‬ <scritp type="text/javascript" > var iTimeoutId = setTimeout("alert('Hello world!')". 1000).clearTimeout() ‫ از ﻣﺘﺪ‬.

‬‬ ‫ﯾﮑﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي اﯾﻦ ﺷﯽ ‪ URL ،‬اﺳﺖ ﮐﻪ ﺑﺮاي ﺗﻨﻈﯿﻢ و دﺳﺘﺮﺳﯽ ﺑﻪ آدرس ﮐﻨﻮﻧﯽ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.lenght‬ﺑﺮاي ﺗﻌﺪاد ﺻﻔﺤﺎت ﻣﻮﺟﻮد در ‪ history‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪:‬‬ ‫.forward‬ﺑﻪ ﺟﺎي ﮐﺪﻫﺎي ﺑﺎﻻ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪.)‪window.)‪window.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل دﺳﺘﻮر زﯾﺮ ﻋﻨﻮان‬ ‫ﺻﻔﺤﻪ ﺟﺎري را ﺑﻪ ‪ New Title Page‬ﺗﻐﯿﯿﺮ ﻣﯽ دﻫﺪ‪:‬‬ ‫.)(‪history.ir‬‬ .title‬‬ ‫ﻫﻤﭽﻨﯿﻦ اﯾﻦ ﺷﯽ داراي ﯾﮑﺴﺮي ﺧﺼﻮﺻﯿﺎت ﻣﺠﻤﻮﻋﻪ اي ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﻧﻮاع ﻋﻨﺎﺻﺮ داﺧﻞ ﺻﻔﺤﻪ ي ﺑﺎرﮔﺬاري ﺷﺪه اﺳﺖ‪.‬‬ ‫اﯾﻦ ﺷﯽ ﻫﻤﭽﻨﯿﻦ ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ .‬‬ ‫ﺷﯽ ‪document‬‬ ‫اﯾﻦ ﺷﯽ ﮐﻪ ﺗﻨﻬﺎ ﺷﯽ ﻣﺸﺘﺮك ﺑﯿﻦ ﻣﺪل ﻫﺎي ﺷﯽ ﮔﺮاي ‪ BOM‬و ‪ DOM‬اﺳﺖ داراي ﺧﺼﻮﺻﯿﺎﺗﯽ ﻣﯽ ﺑﺎﺷﺪ‪."‪document.history.ir/‬‬ ‫ﺷﯽ ‪ document‬از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ .title‬دارد ﮐﻪ از آن ﺑﺮاي ﺑﺪﺳﺖ آوردن و ﺣﺘﯽ ﺗﻐﯿﯿﺮ ﻋﻨﻮان ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ‪.back‬و )(‪ .history.‬ﻣﯽ ﺗﻮان‬ ‫از اﯾﻦ ﺧﺎﺻﯿﺖ ﺧﻮاﻧﺪﻧﯽ‪/‬ﻧﻮﺷﺘﻨﯽ ﺑﺮاي ﺗﻐﯿﯿﺮ ﻋﻨﻮان ﺻﻔﺤﻪ ﺑﻪ ﺻﻮرت ﭘﻮﯾﺎ ﻧﯿﺰ اﺳﺘﻔﺎده ﮐﺮد‪ .‬‬ ‫.go(+1‬‬ ‫‪51‬‬ ‫‪7‬‬ ‫ﻫﻤﯿﭽﻨﯿﻦ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻣﺘﺪ ﻫﺎي )(‪ .URL = "http://www.)(‪history.length + " pages in history.forward‬‬ ‫ﻫﻤﭽﻨﯿﻦ از ﺧﺎﺻﯿﺖ ‪ .”‪“New Title Page‬‬ ‫= ‪Document.‬‬ ‫‪//go back one‬‬ ‫.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫.learningjquery.)"‪alert("There are currently " + history.referrer‬ﺑﺮاي ﺑﻪ دﺳﺖ آوردن آدرس ﺻﻔﺤﻪ اي ﮐﻪ ﮐﺎرﺑﺮ از آن ﺑﻪ ﺻﻔﺤﻪ ﮐﻨﻮﻧﯽ آﻣﺪه‬ ‫اﺳﺖ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ‪.back‬‬ ‫‪//go forward one‬‬ ‫.‬‬ ‫ﺑﺮﺧﯽ از ﺧﺎﺻﯿﺖ ﻫﺎ ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ‪:‬‬ ‫ﻣﺠﻤﻮﻋﻪ‬ ‫‪anchors‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﻟﯿﻨﮏ ﻫﺎي ﺻﻔﺤﻪ‬ ‫‪embeds‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ‪ embed‬ﺻﻔﺤﻪ‬ ‫‪forms‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻓﺮم ﻫﺎي ﺻﻔﺤﻪ‬ ‫‪images‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ﻋﮑﺲ ﺻﻔﺤﻪ‬ ‫‪links‬‬ ‫ﺗﻮﺿﯿﺤﺎت‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻟﯿﻨﮏ ﻫﺎي ﺻﻔﺤﻪ‬ ‫‪1stwebdesigner.go(-1‬‬ ‫و ﺑﺮاي رﻓﺘﻦ ﺑﻪ ﺟﻠﻮ‪:‬‬ ‫.

‬ﭼﻨﺎﻧﭽﻪ آرﮔﻮﻣﺎﻧﯽ ذﮐﺮ ﻧﺸﻮد ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض ‪ false‬در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺧﻮاﻫﺪ ﺷﺪ‪.‬ﻣﺎ ﺗﻮﺳﻂ ﺧﺎﺻﯿﺖ ‪ location.learningjquery.ir‬‬ .write‬و )(‪ .learningjquery.‬‬ ‫ﺷﯽ ‪navigator‬‬ ‫اﯾﻦ ﺷﯽ اﯾﮑﯽ از اﺷﯿﺎي ﻗﺪﯾﻤﯽ ﻣﺪل ﺷﯽ ﮔﺮاي ‪ BOM‬ﺑﻪ ﺷﻤﺎر ﻣﯽ رود‪ .href‬ﻣﯽ ﺗﻮاﻧﯿﻢ‬ ‫ﺑﺮاي ﺗﻨﻈﯿﻢ ﯾﺎ ﺑﺪﺳﺖ آوردن ‪ URL‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪:‬‬ ‫.reload‬ﺑﺮاي ﺑﺎرﮔﺰاري ﻣﺠﺪد ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﺑﻪ اوﻟﯿﻦ ﻋﻨﺼﺮ‬ ‫‪52‬‬ ‫ﻋﮑﺲ ﺻﻔﺤﻪ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﺪ‪:‬‬ ‫.assign‬ﻫﻢ ﻫﻤﯿﻦ ﮐﺎر را ﻣﯽ ﮐﻨﺪ‪:‬‬ ‫)”‪Location.ir‬‬ ‫از ﻣﺘﺪ )(‪ .src‬‬ ‫از دﯾﮕﺮ ﻣﺘﺪﻫﺎي اﯾﻦ ﺷﯽ ﻣﯽ ﺗﻮان ﺑﻪ )(‪ .‬ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﻌﯿﯿﻦ ﮐﻨﯿﻢ ﮐﻪ ﺑﺎرﮔﺰاري ﻣﺠﺪد از روي ‪Cache‬‬ ‫ﯾﺎ ‪ Server‬ﺑﺎﺷﺪ‪ .‬از اﯾﻦ ﺷﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ و ﺑﺪﺳﺖ آوردن اﻃﻼﻋﺎﺗﯽ‬ ‫در ﻣﻮرد ﻧﻮع و ﻧﺴﺨﻪ ﻣﺮورﮔﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .ir/‬‬ ‫ﻣﺘﺪ )(‪ .]‪Document.images[0].href= "http://www.‬ﺑﻌﻀﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي آن ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ‪:‬‬ ‫‪1stwebdesigner.‬‬ ‫ﺷﯽ ‪location‬‬ ‫ﯾﮑﯽ دﯾﮕﺮ از ﺷﯽ ﻫﺎ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ آدرس ﺻﻔﺤﻪ ﺟﺎري‪ location ،‬اﺳﺖ‪ .‫‪ BOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬ ‫ﻫﺮ ﻣﺠﻤﻮﻋﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻮﺳﯿﻠﻪ ي ﻋﺪد ﯾﺎ ﻧﺎم‪ index ،‬ﮔﺬاري ﺷﻮﻧﺪ‪ .assign(“http:// www. ]'‪Document.writeln‬ﺑﺮاي ﭼﺎپ ﯾﮏ ﻣﺘﻦ اﺷﺎره ﮐﺮد‪."‪location.images['image-name‬‬ ‫‪7‬‬ ‫ﺑﺎ اﯾﻦ روش ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻪ آدرس آن ﻫﺎ ﻫﻢ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ‪ .images[0‬‬ ‫‪Or‬‬ ‫.‬اﯾﻦ ﮐﺎر ﺑﺎ ﯾﮑﯽ از آرﮔﻮﻣﺎن ﻫﺎي ‪ false‬ﺑﺮاي ﺑﺎرﮔﺰاري ﻣﺠﺪد از ‪ Catch‬و ‪ true‬ﺑﺮاي ﺑﺎرﮔﺰاري ﻣﺠﺪد از‬ ‫‪ Server‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬ﺑﻪ ﺻﻮرت زﯾﺮ‪:‬‬ ‫‪document.

InfoPath.ir‬‬ .0.4506.0.62 Version/11.‬‬ ‫‪userAgent‬‬ ‫رﺷﺘﻪ اي ﺣﺎوي اﻃﻼﻋﺎﺗﯽ درﻣﻮرد ﻧﻮع و ﻧﺴﺨﻪ ﻣﺮورﮔﺮ و ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ را ﻧﮕﻪ‬ ‫داري ﻣﯽ ﮐﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮان از آن ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﻣﺸﺨﺼﺎت دﻗﯿﻖ ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ و‬ ‫ﻣﺮورﮔﺮ ﮐﺎر اﺳﺘﻔﺎده ﮐﺮد‪. U.5.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫ﺧﺎﺻﯿﺖ ﻫﺎ‬ ‫ﺗﻮﺿﯿﺤﺎت‬ ‫‪appcodeName‬‬ ‫رﺷﺘﻪ اي ﺣﺎوي ﮐﺪ رﺷﺘﻪ اي ﻣﺮورﮔﺮ‬ ‫‪appName‬‬ ‫ﻧﺎم ﻋﻤﻮﻣﯽ ﻣﺮورﮔﺮ‬ ‫‪appMinotVersion‬‬ ‫اﻃﻼﻋﺎت اﺿﺎﻓﯽ ﻣﺮورﮔﺮ‬ ‫‪appVersion‬‬ ‫ﻧﺴﺨﻪ ﻣﺮورﮔﺮ‬ ‫‪browserLanguage‬‬ ‫ﻧﻮع زﺑﺎن ﻣﺮورﮔﺮ ﯾﺎ ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ‬ ‫‪cookieEnabled‬‬ ‫ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﻣﯿﮑﻨﺪ آﯾﺎ ﮐﻮﮐﯽ ﻫﺎ ﻓﻌﺎل ﻫﺴﺘﻨﺪ ﯾﺎ ﺧﯿﺮ‬ ‫‪cpuClass‬‬ ‫ﮐﻼس ‪ cpu‬را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ‬ ‫‪javaEnabled‬‬ ‫ﻓﻌﺎل ﺑﻮدن ﺟﺎوا‬ ‫‪Language‬‬ ‫زﺑﺎن ﻣﺮورﮔﺮ را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ‬ ‫‪mimeType‬‬ ‫آراﯾﻪ اي از ‪ mimetype‬ﻫﺎي ﺛﺒﺖ ﺷﺪه در ﻣﺮورﮔﺮ‬ ‫‪Platform‬‬ ‫ﻧﻮع ‪ platform‬ي ﮐﻪ ﮐﺎﻣﭙﯿﻮﺗﺮ ﮐﺎرﺑﺮ ﺑﺮ روي آن ﻗﺮار دارد را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.0.1) AppleWebKit/535.0‬‬ ‫‪Firefox 9.7.0 (compatible.0.NET CLR 3.77 Safari/535. rv:9.1.1.0 (Windows NT 5. en) Presto/2.userAgent‬ﺷﯽ ‪ navigator‬را در ﭼﻬﺎر ﻣﺮورﮔﺮ ﻣﺸﻬﻮر و ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ وﯾﻨﺪوز ‪ XP‬ﻧﻤﺎﯾﺶ ﻣﯽ‬ ‫دﻫﺪ‪:‬‬ ‫‪Mozilla/5.50727. .7 (KHTML.7‬‬ ‫‪Google Chrome 16‬‬ ‫‪Opera/9.‬‬ ‫‪like Gecko) Chrome/16.NET CLR 2.1.NET CLR‬‬ ‫)‪3.2152.‬‬ ‫ﻣﻘﺪار اﯾﻦ ﺧﺎﺻﯿﺖ ﻫﻤﯿﺸﻪ ﻫﻤﺮاه ﺑﺎ ﻫﺮ درﺧﻮاﺳﺖ ﺗﻮﺳﻂ ﻣﺮورﮔﺮﻫﺎ ﻓﺮﺳﺘﺎده ﻣﯽ‬ ‫ﺷﻮد‪.0‬‬ ‫‪1stwebdesigner.‬‬ ‫‪53‬‬ ‫‪7‬‬ ‫ﺟﺪول زﯾﺮ ﻣﻘﺪار ﺧﺎﺻﯿﺖ ‪ .0‬‬ ‫.00‬‬ ‫‪Opera 11‬‬ ‫‪Mozilla/5.2‬‬ ‫‪.0 (Windows NT 5.80 (Windows NT 5.‪Mozilla/4.912. .0) Gecko/20100101 Firefox/9. MSIE 7. Windows NT 5.30729‬‬ ‫‪Internet Explorer 7.

‬ﺑﻪ ﻃﻮر ﻣﺜﺎل ﺑﺮاي ‪ fullscreen‬ﮐﺮدن ﺻﻔﺤﻪ‬ ‫ﻧﻤﺎﯾﺶ ﻣﯽ ﺗﻮان از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻧﻤﻮد‪:‬‬ ‫.screen.moveTo(0.‫‪ BOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﻣﺮورﮔﺮ‬ ‫ﺷﯽ ‪screen‬‬ ‫‪54‬‬ ‫‪7‬‬ ‫از اﯾﻦ ﺷﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﻃﻼﻋﺎت ﻣﺮﺑﻮﻃﻪ ﺑﻪ ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﮐﺎرﺑﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .resizeTo(screen.availHegiht‬‬ ‫‪1stwebdesigner.‬اﯾﻦ ﺷﯽ ﺷﺎﻣﻞ ﺧﻮاص زﯾﺮ اﺳﺖ‪:‬‬ ‫ﺧﺎﺻﯿﺖ‬ ‫ﺗﻮﺿﯿﺤﺎت‬ ‫‪availHeight‬‬ ‫ارﺗﻔﺎع ﻗﺎﺑﻞ دﺳﺘﺮس از وﯾﻨﺪوز‬ ‫‪availWidth‬‬ ‫ﻋﺮض ﻗﺎﺑﻞ دﺳﺘﺮس از وﯾﻨﺪوز‬ ‫‪colorDepth‬‬ ‫ﺗﻌﺪاد ﺑﯿﺖ ﻫﺎ ﺑﺮاي ﻧﻤﺎﯾﺶ رﻧﮓ ﻫﺎ‬ ‫‪height‬‬ ‫ارﺗﻔﺎع ﺻﻔﺤﻪ‬ ‫‪width‬‬ ‫ﻋﺮض ﺻﻔﺤﻪ‬ ‫از دو ﺧﺎﺻﯿﺖ اول ﻣﯽ ﺗﻮان ﺑﺮاي ﺑﺪﺳﺖ آوردن ﺳﺎﯾﺰ ﺟﺪﯾﺪ ﭘﻨﺠﺮه اﺳﺘﻔﺎده ﻧﻤﻮد‪ .ir‬‬ .)‪Window.)‪Window.0‬‬ ‫.availWidth.

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

‬اﻣﺎ ﻫﻤﯿﺸﻪ در‬ ‫‪ DOM‬ﮔﺮﻫﯽ وﯾﮋه ﺑﻪ ﻧﺎم ‪ document‬وﺟﻮد دارد ﮐﻪ در ﺑﺎﻻﺗﺮﯾﻦ ﺳﻄﺢ درﺧﺖ ﻗﺮار ﮔﺮﻓﺘﻪ و ﺳﺎﯾﺮ ﮔﺮه ﻫﺎ را ﺷﺎﻣﻞ ﻣﯽ ﺷﻮد‪ .com/" rel="external">Jeremy‬‬ ‫>‪Keith</a‬‬ ‫>‪</p‬‬ ‫>‪</body‬‬ ‫>‪</html‬‬ ‫اﯾﻦ ﮐﺪ را ﻣﯽ ﺗﻮان در ﻗﺎﻟﺐ درﺧﺖ زﯾﺮ ﻧﻤﺎﯾﺶ داد‪:‬‬ ‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ ﺑﯿﻨﯿﺪ ﻣﯽ ﺗﻮان ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ را در ﻗﺎﻟﺐ ﯾﮏ ﮔﺮه‪ 1‬ﻧﻤﺎﯾﺶ داده ﻣﯽ ﺷﻮد‪ .danwebb.‬ﺑﻪ ﺗﮑﻪ ﮐﺪ زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪<title>DOMinating JavaScript</title‬‬ ‫>‪</head‬‬ ‫>‪<body‬‬ ‫>‪<h1>DOMinating JavaScript</h1‬‬ ‫>‪<p‬‬ ‫‪If you need some help with your JavaScript.‬ﺑﺎ‬ ‫اﯾﻦ ﻓﺮض درﺧﺖ ﻓﻮق ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺗﺒﺪﯾﻞ ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬ ‫‪node‬‬ ‫‪1‬‬ ‫‪1stwebdesigner.quirksmode.‬اﯾﻦ ﻣﺪل ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد‬ ‫در ﯾﮏ ﺻﻔﺤﻪ ‪ HTML‬را ﺑﻪ ﺻﻮرت درﺧﺘﯽ از ﮔﺮه ﻫﺎ ﺗﺮﺳﯿﻢ ﻣﯽ ﮐﻨﺪ‪ .net/ rel="external">DanWebb</a‬‬ ‫>‪<a href="http://www. you might like‬‬ ‫‪to read articles from‬‬ ‫>‪<a href=http://www.‫‪ DOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬ ‫‪ DOM‬ﭼﯿﺴﺖ؟‬ ‫‪56‬‬ ‫‪8‬‬ ‫‪ DOM‬ﺑﻪ ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن وب اﻣﮑﺎن دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ ﯾﮏ ﺻﻔﺤﻪ ‪ HTML‬را ﻣﯽ دﻫﺪ‪ .ir‬‬ .org/" rel="external">PPK</a‬‬ ‫‪and‬‬ ‫‪<a href="http://adactio.

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

‬‬ ‫ﮔﺮه ﻫﺎ از ﻧﻈﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻋﻨﻮان ﯾﮏ ﺷﯽ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮﻧﺪ ﮐﻪ اﯾﻦ اﺷﯿﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ ﺧﺎﺻﯿﺖ ﻫﺎ و ﻣﺘﺪﻫﺎﯾﯽ داﺷﺘﻪ‬ ‫ﺑﺎﺷﻨﺪ‪ .‬ﺑﻪ ﻋﻨﻮان‬ ‫ﻣﺜﺎل ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ ﻟﯿﻨﮑﯽ ﮐﻪ در ﻣﺜﺎل ﺑﺎﻻ ﻣﺸﺎﻫﺪه ﻣﯽ ﺷﻮد داراي ﺻﻔﺖ ﻫﺎي ‪ href‬و ‪ rel‬ﻫﺴﺘﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮان آن ﻫﺎ را ﺑﻪ‬ ‫ﺻﻮرت زﯾﺮ ﻧﻤﺎﯾﺶ داد‪:‬‬ ‫‪ :comment‬ﺑﻪ ﮔﺮه ﻫﺎي ﺗﻮﺿﯿﺤﯽ اﺷﺎره ﻣﯽ ﮐﻨﺪ و ﻓﺎﻗﺪ ﻓﺮزﻧﺪ اﺳﺖ‪) .‬در درﺧﺖ ‪ DOM‬ﻣﻌﻤﻮﻻ اﯾﻦ ﮔﺮه ﻫﺎ را ﺑﻪ ﺻﻮرت داﯾﺮه اي و ﻣﺘﺼﻞ ﺑﻪ ﮔﺮه ﻫﺎي ﻋﻨﺼﺮي ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﻨﺪ‪ .‬ﺑﻪ اﯾﻦ ﻧﻮع ﮔﺮه ﻫﺎ ‪ ،‬ﮔﺮه ﺻﻔﺘﯽ‪ 1‬ﮔﻔﺘﻪ ﻣﯽ‬ ‫ﺷﻮد‪ .‬‬ ‫ﻏﺎﻟﺒﺎ ﮔﺮﻫﯽ اﺻﻠﯽ ﺑﻪ ﻋﻨﻮان راس اﯾﻦ درﺧﺖ وﺟﻮد دارد ﮐﻪ ﻫﻤﺎن ‪ document‬اﺳﺖ‪.‫‪ DOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬ ‫‪58‬‬ ‫‪8‬‬ ‫‪ :attr‬ﮔﺮه اي ﮐﻪ ﺑﻪ ﯾﮏ ﺻﻔﺖ از ﯾﮏ ﻋﻨﺼﺮ اﺷﺎره ﻣﯽ ﮐﻨﺪ و ﻓﺎﻗﺪ ﻓﺮزﻧﺪ ﻣﯽ ﺑﺎﺷﺪ‪ .‬در واﻗﻊ ﺑﻪ ﺗﮓ ‪ comment‬ﺻﻔﺤﻪ اﺷﺎره ﻣﯽ ﮐﻨﺪ‪(.ir‬‬ .‬ﺑﻌﻀﯽ از آن ﻫﺎ ﺑﻪ ﺷﺮح زﯾﺮ ﻫﺴﺘﻨﺪ‪:‬‬ ‫‪Attribute Node‬‬ ‫‪1‬‬ ‫‪1stwebdesigner.

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

‫ ؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬DOM DOM ‫اﺳﺘﻔﺎده از‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﮔﺮه ﻫﺎ‬ :‫ﺗﮑﻪ ﮐﺪ زﯾﺮ را در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ‬ <html> <head> <title>DOM Example</title> </head> <body> <p>Hello World!</p> <p>Isn’t this exciting?</p> <p>You’re learning to use the DOM!</p> </body> </html> ‫ اﺳﺖ‬document ‫ ﮐﻪ ﯾﮑﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ‬.body.‫اﺳﺘﻔﺎده ﮐﻨﯿﻢ‬ var oHtml = document.childNodes[1].‫ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ‬body ‫ را ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺼﺮ‬document. var oBody = oHtml.length).documentElement. var oBody = oHtml.item(1).item() ‫ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻣﺘﺪي ﻣﻮﺳﻮم ﺑﻪ‬ var oHead = oHtml.documentElement ‫ ﻣﯽ ﺗﻮان از‬HTML ‫اوﻻ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺼﺮ‬ :‫ ﺑﻪ ﺻﻮرت زﯾﺮ‬.lastChild. :‫راه دﯾﮕﺮ ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺖ‬ var oHead = oHtml. :‫ را ﺑﻪ ﺻﻮرت زﯾﺮ ﻧﺸﺎن دﻫﯿﻢ‬oHtml ‫ و‬oBody ، oHead ‫ﻣﯽ ﺗﻮاﻧﯿﻢ ﺻﺤﺖ راﺑﻄﻪ ﻫﺎي ﺳﻪ ﻣﺘﻐﯿﺮ‬ 1stwebdesigner.childNodes.body ‫ ﻫﻤﭽﻨﯿﻦ از دﺳﺘﻮر‬DOM var oBody = document.childNodes. :‫ ﺑﻪ ﺻﻮرت زﯾﺮ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ‬body ‫ و‬head ‫ﺣﺎل ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ ﻣﺘﻐﯿﺮ ﺑﻪ ﻋﻨﺎﺻﺮ‬ var oHead = oHtml.item(0). . :‫ﺑﺮاي ﺑﺪﺳﺖ آوردن ﺗﻌﺪاد ﻓﺮزﻧﺪان ﯾﮏ ﮔﺮه‬ alert(oHtml.childNodes.ir 60 8 .firstChild. //outputs “2” :‫ ﺑﺮاي دﺳﺘﺮﺳﯽ ﻧﯿﺰ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‬. var oBody = oHtml.childNodes[0].

)”‪var oImgs = document.setAttribute(“id”.‬‬ ‫اﯾﻦ ﻣﺘﺪﻫﺎ ﺑﺮاي دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري ﻣﺴﺘﻘﯿﻢ ﺻﻔﺖ ﻫﺎي ﯾﮏ ﻋﻨﺼﺮ ﺑﺴﯿﺎر ﻣﻨﺎﺳﺐ اﻧﺪ‪ .)”‪var oImgsInP = oPs[0].parentNode == oHtml‬‬ ‫”‪//outputs “true‬‬ ‫”‪alert(oBody.‬‬ ‫ﻓﺮض ﮐﻨﯿﺪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﺑﻪ اوﻟﯿﻦ ﻋﻨﺼﺮ ﻋﮑﺲ اوﻟﯿﻦ ﭘﺎراﮔﺮاف ﺻﻔﺤﻪ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ‪:‬‬ ‫.)‪alert(oHead.)”‪oP.)‪alert(oHead.previousSibling == oHead). //outputs “true‬‬ ‫.)”‪var oPs = document.parentNode == oHtml‬‬ ‫”‪//outputs “true‬‬ ‫.‬‬ ‫)‪ :removeAttribute(name‬ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم ‪ name‬را از ﻋﻨﺼﺮي ﻣﺸﺨﺺ ﺣﺬف ﻣﯽ ﮐﻨﺪ‪.)”‪var sId = oP.getElementsByTagname(“p‬‬ ‫.‬‬ ‫)‪ :setAttribute(name. //outputs “true‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﺻﻔﺎت ﻋﻨﺎﺻﺮ‬ ‫‪ DOM‬ﺑﺮاي دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري ﺻﻔﺎت ﯾﮏ ﻋﻨﺼﺮ ﺳﻪ ﻣﺘﺪ ﺗﻌﺮﯾﻒ ﮐﺮده اﺳﺖ‪:‬‬ ‫‪61‬‬ ‫‪8‬‬ ‫)‪ :getAttribute(name‬ﻣﻘﺪار ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم ‪ name‬را از ﻋﻨﺼﺮي ﺧﺎص ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.new Value‬ﻣﻘﺪار ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم ‪ name‬را ﺑﺮاﺑﺮ ‪ new Value‬ﻗﺮار ﻣﯽ دﻫﺪ‪.‬ﺑﻨﺎﺑﺮاﯾﻦ ﺑﺮاي ﺑﻪ دﺳﺖ آوردن ﻣﻘﺪار‬ ‫ﺻﻔﺖ ‪ ID‬ﺗﮕﯽ ﻣﺸﺨﺺ ﻣﯽ ﺗﻮان ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﺮد‪:‬‬ ‫.‬‬ ‫)(‪getElementsByTagName‬‬ ‫از اﯾﻦ ﻣﺘﺪ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻟﯿﺴﺘﯽ)آراﯾﻪ( از ﻋﻨﺎﺻﺮ ﺧﺎص اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.)‪alert(oBody.‬‬ ‫.nextSibling == oBody‬‬ ‫”‪//outputs “true‬‬ ‫”‪alert(oHead.)”*“(‪var oAllElements = document.getElementsByTagName(“img‬‬ ‫ﻣﯽ ﺗﻮاﻧﯿﻢ از دﺳﺘﻮر زﯾﺮ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪:‬‬ ‫.getElementsByTagName(“img‬‬ ‫دﺳﺘﻮر ﻓﻮق ﻟﯿﺴﺘﯽ از ﺗﻤﺎم ﻋﻨﺎﺻﺮ ‪ img‬ﺻﻔﺤﻪ را در ‪ oImgs‬ذﺧﯿﺮه ﻣﯽ ﮐﻨﺪ‪.getAttribute(“id‬‬ ‫و ﺑﺮاي ﺗﻐﯿﯿﺮ ﻣﻘﺪار ﺻﻔﺖ ‪ ID‬ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻣﯽ ﮐﻨﯿﻢ‪:‬‬ ‫.getElementsByTagName‬‬ ‫‪1stwebdesigner.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫.ownerDocument == document). “newId‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﮔﺮه ﻫﺎي ﺧﺎص‬ ‫ﺗﺎ ﺑﻪ اﯾﻨﺠﺎ ﺑﺎ دﺳﺘﺮﺳﯽ ﺑﻪ ﮔﺮه ﻫﺎي ﻓﺮزﻧﺪ و ﭘﺪري آﺷﻨﺎ ﺷﺪﯾﻢ‪ .‬اﻣﺎ اﮔﺮ ﺑﺨﻮاﻫﯿﻢ ﺑﻪ ﯾﮏ ﮔﺮه ﺧﺎص‪ ،‬آن ﻫﻢ در ﻋﻤﻖ ﯾﮏ درﺧﺖ‬ ‫دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ﭼﻪ؟ ﺑﺮاي ﺳﻬﻮﻟﺖ اﯾﻦ ﮐﺎر‪ DOM ،‬ﭼﻨﺪﯾﻦ ﻣﺘﺪ ﺑﺮاي دﺳﺘﺮﺳﯽ ﻣﺴﺘﻘﯿﻢ ﺑﻪ ﮔﺮه ﻫﺎ ﻓﺮاﻫﻢ آورده اﺳﺖ‪.ir‬‬ .

‬اﯾﻦ ﺳﺮﯾﻌﺘﺮﯾﻦ و راﯾﺠﺘﺮﯾﻦ راه ﺑﺮاي دﺳﺘﺮﺳﯽ‬ ‫ﺑﻪ ﻋﻨﺼﺮي ﺧﺎص از ﺻﻔﺤﻪ اﺳﺖ‪ .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‬‬ ‫‪8‬‬ ‫اﯾﻦ ﺻﻔﺤﻪ رﻧﮓ ﻣﻮرد ﻋﻼﻗﻪ ﮐﺎرﺑﺮ را ﺳﻮال ﻣﯽ ﮐﻨﺪ‪ radiobutton .‬اﻣﺎ ﻣﯽ ﺧﻮاﻫﯿﻢ ﻓﻘﻂ ﻣﻘﺪار‬ ‫‪ radiobutton‬ي ﮐﻪ اﻧﺘﺨﺎب ﺷﺪه اﺳﺖ را ﭘﯿﺪا ﮐﻨﯿﻢ‪ .)”‪var oRadios = document.getElementsByName(“radColor‬‬ ‫ﺣﺎل ﻣﯽ ﺗﻮاﻧﯿﺪ از ﻫﻤﺎن روش ﻗﺒﻠﯽ ﺑﺮاي ﺑﻪ دﺳﺖ آوردن ﻣﻘﺪار ﻫﺮ از ‪radiobutton‬ﻫﺎ ﺑﻪ روش زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﺪ‪:‬‬ ‫”‪alert(oRadios[0].‫‪ DOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬ ‫)(‪getElementsByName‬‬ ‫‪62‬‬ ‫‪ DOM‬ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮي ﮐﻪ ﺻﻔﺖ ‪ name‬آﻧﻬﺎ ﺑﺮاﺑﺮ ﺑﺎ ﻣﻘﺪار ﺧﺎص اﺳﺖ از اﯾﻦ ﻣﺘﺪ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ‪ .‬ﺑﺮاي اﯾﺠﺎد ارﺟﺎع ﺑﻪ ﻋﻨﺎﺻﺮ ‪ radiobutton‬ﻣﯽ ﺗﻮان از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده‬ ‫ﻧﻤﻮد‪.‬ﻫﺎ اﺳﻢ ﯾﮑﺴﺎﻧﯽ دارﻧﺪ‪ .getAttribute(“value”)).‬ﺑﻪ ﻣﺜﺎل زﯾﺮ‬ ‫ﺗﻮﺟﻪ ﮐﻨﯿﺪ‪:‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪<title>DOM Example</title‬‬ ‫>‪</head‬‬ ‫>‪<body‬‬ ‫>”‪<form method=”post” action=”dosomething. //outputs “red‬‬ ‫)(‪getElementById‬‬ ‫از اﯾﻦ ﻣﺘﺪ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ ﺑﻪ وﺳﯿﻠﻪ ﺧﺎﺻﯿﺖ ‪ ID‬آﻧﻬﺎ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬ﻣﯽ داﻧﯿﻢ ﮐﻪ ﺧﺎﺻﯿﺖ ‪ ID‬ﺑﺎﯾﺪ ﯾﮑﺘﺎ ﺑﺎﺷﺪ ﺑﻪ اﯾﻦ‬ ‫ﻣﻌﻨﯽ ﮐﻪ ﻫﯿﭻ دو ﻋﻨﺼﺮي ﻧﻤﯽ ﺗﻮاﻧﻨﺪ داﺧﻞ ﯾﮏ ﺻﻔﺤﻪ‪ ID ،‬ﯾﮑﺴﺎﻧﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ .‬‬ ‫.ir‬‬ .‬ﺑﻪ ﮐﺪ زﯾﺮ ﻧﮕﺎه ﮐﻨﯿﺪ‪:‬‬ ‫‪1stwebdesigner.

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

appendChild(oText‬‬ ‫ﭘﺎراﮔﺮاﻓﯽ ﮐﻪ را اﯾﺠﺎد ﮐﺮده اﯾﻢ ﺑﺎﯾﺪ ﺑﻪ ﺻﻔﺤﻪ و ﻗﺴﻤﺖ ‪ body‬و ﯾﺎ ﯾﮑﯽ از زﯾﺮ ﻣﺠﻤﻮﻋﻪ ﻫﺎي آن اﻟﺤﺎق ﮐﻨﯿﻢ‪ .createTextNode(“Hello World‬‬ ‫ﺣﺎل ﺑﺎﯾﺪ ﻣﺘﻦ را ﺑﻪ ﻋﻨﺼﺮ >‪ ، <p‬اﻟﺤﺎق ﮐﻨﯿﻢ‪ .)”!‪var oText = document.createElement(“p‬‬ ‫ﺣﺎل ﯾﮏ ﻣﺘﻦ ﺳﺎده اﯾﺠﺎد ﻣﯽ ﮐﻨﯿﻢ‪:‬‬ ‫.appendchild‬اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪ .‬‬ ‫.ir‬‬ .‬ﺑﻪ اﯾﻦ ﺷﮑﻞ‪:‬‬ ‫.)‪oP.)”‪var oP = document.‪txt=document.getElementById(‘intro’).‬اﯾﻦ ﺧﺎﺻﯿﺖ ﺟﺰ اﺳﺘﺎﻧﺪاردﻫﺎي ‪ W3C‬ﻧﻤﯽ ﺑﺎﺷﺪ اﻣﺎ ﺗﻤﺎﻣﯽ‬ ‫ﻣﺮورﮔﺮﻫﺎ از آن ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪ .)‪oP.‫‪ DOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬ ‫)(‪ createTextNode() ،appendChild‬و )(‪createElement‬‬ ‫‪64‬‬ ‫ﻓﺮض ﮐﻨﯿﺪ ﺗﮑﻪ ﮐﺪ زﯾﺮ را دارﯾﻢ‪:‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪<title>createElement() Example</title‬‬ ‫>‪</head‬‬ ‫>‪<body‬‬ ‫>‪</body‬‬ ‫>‪</html‬‬ ‫‪8‬‬ ‫ﺣﺎل ﻣﯽ ﺧﻮاﻫﯿﻢ ﻋﺒﺎرت زﯾﺮ را در اﯾﻦ ﺻﻔﺤﻪ ﭼﺎپ ﮐﻨﯿﻢ‪:‬‬ ‫>‪<p>Hello World !</p‬‬ ‫اوﻟﯿﻦ ﮐﺎر اﯾﺠﺎد ﯾﮏ ﻋﻨﺼﺮ >‪ <p‬اﺳﺖ‪.innerHTML‬ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ و ﺗﻐﯿﯿﺮ‬ ‫ﻣﺤﺘﻮاي ﯾﮏ ﻋﻨﺼﺮ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪ .‬‬ ‫.‬ﻓﺮض ﮐﻨﯿﺪ ﺗﮓ زﯾﺮ را در ﺻﻔﺤﻪ دارﯾﻢ‪:‬‬ ‫>‪<p id=”intro”>Hello World!</p‬‬ ‫اﺟﺮاي دﺳﺘﻮر زﯾﺮ ﻣﻮﺟﺐ ﻧﻤﺎﯾﺶ ﭘﯿﻐﺎم !‪ Hello World‬ﯾﻌﻨﯽ ﻫﻤﺎن ﻣﺤﺘﻮاي ﺗﮓ >‪ <p‬ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬ ‫.innerHTML‬‬ ‫!‪alert(txt).‬ﺑﺮاي اﯾﻦ ﮐﺎر از ﻣﺘﺪ )(‪ .‬از اﯾﻦ ﻣﺘﺪ ﺑﺮاي اﺿﺎﻓﻪ‬ ‫ﮐﺮدن ﯾﮏ ﻓﺮزﻧﺪ ﺑﻪ اﻧﺘﻬﺎي ﻟﯿﺴﺖ ﻓﺮزﻧﺪان ﯾﮏ ﮔﺮه اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.// Hello World‬‬ ‫‪1stwebdesigner.appendChild(oText‬‬ ‫‪‬‬ ‫ﻧﮑﺘﻪ‪ :‬ﮔﺮه ﻫﺎي ﻋﻨﺼﺮي از ﺧﺎﺻﯿﺘﯽ ﺧﻮاﻧﺪﻧﯽ‪/‬ﻧﻮﺷﺘﻨﯽ ﺑﻪ ﻧﺎم ‪ .

getElementsByTagName(“p”)[0‬‬ ‫.innerHTML=”Click <a href=’#’>Here</a‬‬ ‫ﺗﮓ >‪ <p‬ﺑﻪ ﺻﻮرت زﯾﺮ درﺧﻮاﻫﺪ آﻣﺪ‪ .)‪oOldP.removeChild‬اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪ .body.getElementsByTagName(“p”)[0‬‬ ‫.)“ !‪var oText = document.body.‬‬ ‫)(‪createDocumentFragment‬‬ ‫ﺑﻪ ﻣﺤﺾ اﯾﻨﮑﻪ ﺗﻌﺪادي ﮔﺮه ﺟﺪﯾﺪ ﺑﻪ ﺳﻨﺪ اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﯿﻢ ﺻﻔﺤﻪ ﺑﺮاي ﻧﻤﺎﯾﺶ ﺗﻐﯿﯿﺮات‪ ،‬ﺑﻪ روزرﺳﺎﻧﯽ ﻣﯽ ﺷﻮد‪ .createElement(“p‬‬ ‫.”>‪myPara.‬ﻓﺮض ﮐﻨﯿﺪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﭼﻨﺪﯾﻦ ﭘﺎراﮔﺮاف را در ﺻﻔﺤﻪ اﯾﺠﺎد ﮐﻨﯿﻢ‪ .‬‬ ‫ﺑﺮاي رﻓﻊ اﯾﻦ ﻣﺸﮑﻞ ﻣﯽ ﺗﻮاﻧﯿﺪ از ﯾﮏ ﺗﮑﻪ ﺑﺮﻧﺎﻣﻪ ‪ 1‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .ir‬‬ .‬‬ ‫اﻣﺎ ﺑﻬﺘﺮ اﺳﺖ ﺑﻪ روش زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﻢ‪:‬‬ ‫‪documentFragment‬‬ ‫‪1‬‬ ‫‪1stwebdesigner.createTextNode(“Hello Universe‬‬ ‫.)’‪Var myPara=document. oOldP‬‬ ‫ﺑﺮاي اﺿﺎﻓﻪ ﮐﺮدن ﯾﮏ ﻋﻨﺼﺮ ﺑﻪ ﻗﺒﻞ از ﻋﻨﺼﺮ دﯾﮕﺮي از )(‪ .‬زﯾﺮا ﺧﺎﺻﯿﺖ ‪ .replaceChild‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬ﺑﻪ ﺷﮑﻞ زﯾﺮ‪:‬‬ ‫.‬ﺑﺮاي ﺣﺬف ﮔﺮه ﻫﺎ ازﻣﺘﺪ‬ ‫)(‪ .parentNode.removeChild(oP‬‬ ‫ﺑﺮاي ﺟﺎﺑﺠﺎﯾﯽ ﮔﺮه ﻫﺎ از ﻣﺘﺪ )(‪ .body.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫ﺑﺎ ﻧﺴﺒﺖ دادن ﻣﻘﺪاري ﺟﺪﯾﺪ ﺑﻪ اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﺎ اﺳﺘﻔﺎده از ﻋﻼﻣﺖ اﻧﺘﺴﺎب ﻣﯽ ﺗﻮاﻧﯿﻢ ﻣﺤﺘﻮاي ﯾﮏ ﺗﮓ را ﺗﻐﯿﯿﺮ دﻫﯿﻢ‪:‬‬ ‫.‬از اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪:‬‬ ‫.getElementById(‘intro‬‬ ‫.innerHTML‬ﻣﺤﺘﻮاي ﺗﮓ را ﺑﻪ ﺻﻮرت ﮐﺎﻣﻞ ﺑﺎ ﻣﻘﺪار ﺟﺪﯾﺪ ﺟﺎﯾﮕﺮﯾﻦ‬ ‫ﻣﯽ ﮐﻨﺪ‪.‬در ﺻﻮرت اﺳﺘﻔﺎده از‬ ‫روش ﻫﺎي ﻗﺒﻠﯽ اﯾﻦ اﻣﺮ ﻣﻮﺟﺐ رﻓﺮش ﻫﺮ ﺑﺎره ﺻﻔﺤﻪ ﺧﻮاﻫﺪ ﺷﺪ‪.]‪var oOldP = document.]‪var oP = document.‬ﻣﯽ ﺗﻮاﻧﯿﺪ ﺗﻤﺎم ﮔﺮهﻫﺎي ﺟﺪﯾﺪ را ﺑﻪ ﺗﮑﻪ ﺑﺮﻧﺎﻣﻪ اﺿﺎﻓﻪ ﮐﺮده و‬ ‫ﺳﭙﺲ آن را در ﺻﻔﺤﻪ اﺻﻠﯽ ﻗﺮار دﻫﯿﺪ‪ .appendChild(oText‬‬ ‫.)‪oNewP.)‪document.)”‪var oNewP = document.‬‬ ‫‪65‬‬ ‫‪8‬‬ ‫>‪<p id=”intro”>Click <a href=’#’>Here</a></p‬‬ ‫)(‪replaceChild() ،removeChild‬و )(‪insertBefore‬‬ ‫ﻃﺒﯿﻌﺘﺎ وﻗﺘﯽ ﻣﯽ ﺗﻮاﻧﯿﻢ ﮔﺮﻫﯽ را اﺿﺎﻓﻪ ﮐﻨﯿﻢ اﻣﮑﺎن ﺣﺬف آن ﻫﺎ ﻧﯿﺰ وﺟﻮد ﺧﻮاﻫﺪ داﺷﺖ‪ .‬اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﭘﺬﯾﺮد و‬ ‫آرﮔﻮﻣﺎن اول را ﻗﺒﻞ از آرﮔﻮﻣﺎن دوم ﻗﺮار ﻣﯽ دﻫﺪ‪.‬اﻣﺎ ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻐﯿﯿﺮات زﯾﺎد ﺑﺎﺷﺪ و ﺻﻔﺤﻪ ﺑﺨﻮاﻫﺪ اﯾﻦ رﻓﺘﺎر را ﺑﺮاي ﺗﮏ ﺗﮏ ﺗﻐﯿﯿﺮات ﺗﮑﺮار‬ ‫ﮐﻨﺪ ﻣﻤﮑﻦ اﺳﺖ ﻣﻮﺟﺐ ﮐﻨﺪي در ﻋﻤﻠﮑﺮد ﻣﺮورﮔﺮ ﺷﻮد‪.‬اﯾﻦ ﻣﺘﺪ ﯾﮏ آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ﮐﻪ در واﻗﻊ ﮔﺮﻫﯽ اﺳﺖ ﮐﻪ ﺑﺎﯾﺪ ﺣﺬف ﺷﻮد‪ .replaceChild(oNewP.insertBefore‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬اﯾﻦ رﻓﺘﺎر ﺑﺮاي‬ ‫ﺗﻌﺪاد ﺗﻐﯿﯿﺮات ﮐﻢ ﻣﻨﺎﺳﺐ اﺳﺖ‪ .

‬ﭼﻮن اﯾﻦ ﮐﻠﻤﻪ ﺟﺰ ﮐﻠﻤﺎت رزرو ﺷﺪه اﺳﺖ و ﺑﺎﯾﺪ ﺑﻪ ﺟﺎي آن از ﮐﻠﻤﻪ ‪className‬‬ ‫اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪.)”‪oImg.)]‪var oText = document. “mypicture2.‬از ﺟﻤﻠﻪ‬ ‫اﯾﻦ وﯾﮋﮔﯽ ﻫﺎ ﻣﯽ ﺗﻮان ﺑﻪ در ﻧﻈﺮ ﮔﺮﻓﺘﻦ ﺻﻔﺎت ﻋﻨﺎﺻﺮ ﺑﻪ ﻋﻨﻮان ﺧﺎﺻﯿﺖ ﻫﺎي ﻫﺮ ﺷﯽ اﺷﺎره ﮐﺮد ﮐﻪ ﺑﺮاي اﯾﻦ ﮐﺎر ﻣﺘﺪﻫﺎ و‬ ‫ﺧﺎﺻﯿﺖ ﻫﺎﯾﯽ اراﺋﻪ ﺷﺪه اﺳﺖ‪.jpg‬‬ ‫.)‪alert(oImg. “1‬‬ ‫ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻧﺎم ﺻﻔﺎت ﻫﻢ ﺑﻪ ﻋﻨﻮان ﺧﺎﺻﯿﺖ ﻫﺮ ﯾﮏ از اﺷﯿﺎء‪ ،‬ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ و ﺗﻐﯿﯿﺮ ﻣﻘﺪار ﺻﻔﺎت اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪:‬‬ ‫. “fifth”.getAttribute(“src‬‬ ‫.jpg” border=”0” /‬‬ ‫ﺑﺮاي دﺳﺘﺮﺳﯽ و ﺗﻨﻈﯿﻢ ‪ src‬و ‪ border‬ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻣﺘﺪﻫﺎي )(‪ . “fourth”.”‪oImg.)(‪var oFragment = document.)‪oFragment.”‪oImg.border = “1‬‬ ‫‪‬‬ ‫ﻧﮑﺘﻪ‪ :‬ﺑﺮ ﺧﻼف ﺑﺴﯿﺎري از ﺻﻔﺎت ﺗﮓ ﻫﺎ‪ ،‬ﻧﻤﯽ ﺗﻮاﻧﯿﻢ از ﺧﻮد ﺻﻔﺖ ‪ class‬ﺑﻪ ﻋﻨﻮان ﯾﮏ ﺧﺎﺻﯿﺖ‬ ‫اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ .getAttribute(“border‬‬ ‫.length.createDocumentFragment‬‬ ‫{ )‪for (var i=0.src = “mypicture2.‬‬ ‫.src‬‬ ‫.))”‪alert(oImg.‬‬ ‫‪1stwebdesigner. “third”. “second”.appendChild(oP‬‬ ‫}‬ ‫.getAttribute‬و ﯾﺎ )(‪ .)”‪var oP = document.‬ﻓﺮض ﮐﻨﯿﺪ ﻋﻨﺼﺮ زﯾﺮ را دارﯾﻢ‪:‬‬ ‫>‪<img src=”mypicture.‫‪ DOM‬؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬ ‫‪var arrText = [“first”.)‪document.setAttribute(“border”.]”‪“sixth‬‬ ‫.)‪oP.setAttribute(“src”.)‪alert(oImg.createElement(“p‬‬ ‫.createTextNode(arrText[i‬‬ ‫.setAttribute‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪:‬‬ ‫.body.))”‪alert(oImg.‬‬ ‫ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻪ ﺻﻔﺎت ﻋﻨﺎﺻﺮ ﺑﻪ ﻋﻨﻮان ﺧﺎﺻﯿﺖ ﻫﺎي آن دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ‪ .border‬‬ ‫.ir‬‬ .)”‪oImg. i < arrText.jpg‬‬ ‫.appendChild(oFragment‬‬ ‫‪66‬‬ ‫‪8‬‬ ‫وﯾﮋﮔﯽ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ‪ DOM‬ﺑﺮاي ‪HTML‬‬ ‫ﯾﮑﯽ از وﯾﮋﮔﯽ ﻫﺎي ‪ DOM‬اﯾﻦ اﺳﺖ ﮐﻪ اﻣﮑﺎن ﺗﻨﻈﯿﻢ و دﺳﺘﮑﺎري ﺻﻔﺎت ﻣﺮﺑﻮط ﺑﻪ ﻋﻨﺎﺻﺮ ‪ HTML‬را ﻓﺮاﻫﻢ ﻣﯽآورد‪ .appendChild(oText‬‬ ‫. i++‬‬ ‫.

2</td‬‬ ‫>‪<td>Cell 2.style.2</td‬‬ ‫>‪</tr‬‬ ‫>‪</tbody‬‬ ‫>‪</table‬‬ ‫اﮔﺮ ﺑﺮاي اﯾﺠﺎد اﯾﻦ ﺟﺪول ﺑﺨﻮاﻫﯿﻢ از ﻣﺘﺪ ﻫﺎي راﯾﺞ ‪ DOM‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ ﮐﺪ ﻣﺎ ﺑﻪ ﺻﻮرت ذﯾﻞ ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ و ﮔﺎﻫﯽ اوﻗﺎت‬ ‫ﺳﺮدرﮔﻢ ﮐﻨﻨﺪه ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬ ‫‪1stwebdesigner.getElementById(‘intro’).getElementById(‘id’).style.ir‬‬ .”‪document.getElementById(‘intro’).color=”red‬‬ ‫در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻣﻨﻈﻮر دﺳﺘﺮﺳﯽ ﺑﻪ آن دﺳﺘﻪ از ﻗﻮاﻋﺪي ﮐﻪ ﺷﺎﻣﻞ ﮐﺎراﮐﺘﺮ – ﻫﺴﺘﻨﺪ ﻣﯽ ﺑﺎﯾﺴﺖ اﺑﺘﺪا ﮐﺎراﮐﺘﺮ – را ﺣﺬف ﮐﺮده‬ ‫و اوﻟﯿﻦ ﺣﺮف ﮐﻠﻤﻪ ﻫﺎي ﺑﻌﺪ از آن را ﺑﻪ ﺻﻮرت ﺑﺰرگ ﺑﻨﻮﯾﺴﯿﻢ‪ .”‪document.1</td‬‬ ‫>‪</tr‬‬ ‫>‪<tr‬‬ ‫>‪<td>Cell 1.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‪ ،‬ﮐﺪ زﯾﺮ ﻣﻮﺟﺐ ﺗﻐﯿﯿﺮ رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ ﻋﻨﺼﺮ ﺑﻪ‬ ‫آﺑﯽ ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬ ‫.”‪document.‬‬ ‫ﻣﺘﺪﻫﺎي ﻣﺮﺑﻮﻃﻪ ﺑﻪ ﺟﺪاول‬ ‫ﻓﺮض ﮐﻨﯿﺪ ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﺟﺪول زﯾﺮ را ﺑﻪ ﺻﻮرت ﭘﻮﯾﺎ و ﺑﺎ اﺳﺘﻔﺎده از ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﯾﺠﺎد ﮐﻨﯿﻢ‪:‬‬ ‫>”‪<table border=”1” width=”100%‬‬ ‫>‪<tbody‬‬ ‫>‪<tr‬‬ ‫>‪<td>Cell 1.backgroundColor=”blue‬‬ ‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎﻟﯽ دﯾﮕﺮ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻗﻮاﻋﺪي ﻫﻤﭽﻮن ‪ border-top-width‬و ‪ padding-bottom‬ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﻪ ﺗﺮﺗﯿﺐ از‬ ‫ﻧﺎم ﻫﺎي ‪ borderTopWidth‬و ‪ paddingBottom‬اﺳﺘﻔﺎده ﻧﻤﻮد‪.style.property=”newValue‬‬ ‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻓﺮاﺧﻮاﻧﯽ دﺳﺘﻮر زﯾﺮ ﻣﻮﺟﺐ ﺗﻐﯿﯿﺮ رﻧﮓ ﻣﺘﻦ ﻋﻨﺼﺮي ﺑﺎ ‪ id‬ﺑﺮاﺑﺮ ‪ intro‬ﺑﻪ رﻧﮓ ﻗﺮﻣﺰ ﺧﻮاﻫﺪ ﺷﺪ‪:‬‬ ‫‪67‬‬ ‫‪8‬‬ ‫.1</td‬‬ ‫>‪<td>Cell 2.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫دﺳﺘﮑﺎري ﻗﻮاﻋﺪ ﺳﺒﮏ ﻋﻨﺎﺻﺮ‬ ‫ﮔﺮه ﻫﺎي ﻋﻨﺼﺮي از ﺷﯽ اي ﺑﻪ ﻧﺎم ‪ style‬ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻗﻮاﻋﺪ ﺳﺒﮏ ﺗﻌﺮﯾﻒ ﺷﺪه ﺑﺮاي ﺗﮓ ﻫﺎ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪.‬‬ ‫ﺳﯿﻨﺘﮑﺲ ﮐﻠﯽ اﺳﺘﻔﺎده از اﯾﻦ ﺷﯽ ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺖ‪:‬‬ ‫.

createElement(“tr”).ir          . oTR2. oTable.appendChild(document.createElement(“tr”). oTable. 68 8 //create the tbody var oTBody = document. ‫ ﯾﮑﺴﺮي ﺧﺎﺻﯿﺖ ﻫﺎ و ﻣﺘﺪ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮدي ﺑﺮاي ﻋﻨﺎﺻﺮ اﺻﻠﯽ ﺟﺪاول ﻫﻤﭽﻮن‬DOM ‫ﺑﺮاي آﺳﺎﻧﯽ اﯾﻨﮑﺎر‬ .createElement(“tbody”). //create the first row var oTR1 = document.createElement(“td”).appendChild(oTBody).createTextNode(“Cell 2. oTBody. var oTD22 = document. var oTD21 = document.2”)). var oTD11 = document.appendChild(oTD12). oTable.‫ ﺟﺪول دارد‬caption ‫ اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ‬:caption tbody ‫ ﻣﺠﻤﻮﻋﻪ )آراﯾﻪ( اي از ﻋﻨﺎﺻﺮ‬:tBodies ‫ ﺟﺪول‬tfoot ‫ اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ‬:tFoot ‫ ﺟﺪول‬thead ‫ اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ‬:tHead ‫ ﻣﺠﻤﻮﻋﻪ اي از ﺗﻤﺎم ردﯾﻒ ﻫﺎي ﺟﺪول‬:Rows ‫ در ﺟﺪول‬thead ‫ اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ‬:createThead() ‫ در ﺟﺪول‬tfoot ‫ اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ‬:createTfoot() ‫ در ﺟﺪول‬caption ‫ اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ‬:createCaption() ‫ از ﺟﺪول‬thead ‫ ﺣﺬف ﻋﻨﺼﺮ‬:deleteThead() 1stwebdesigner. oTR2. oTR1.‫ )اﻟﺒﺘﻪ اﮔﺮ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‬.createTextNode(“Cell 1. tody. “1”). oTD12. oTD21. var oTD12 = document.1”)).appendChild(oTable).setAttribute(“width”.appendChild(oTR2). “100%”).createElement(“td”). //create the second row var oTR2 = document.createTextNode(“Cell 1.1”)). oTR1.createElement(“td”).appendChild(oTD22).‫ اﯾﺠﺎد ﮐﺮده اﺳﺖ‬tr :‫ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﺟﺪول ﺑﻪ ﺷﺮح زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ‬ (.appendChild(oTD21).createElement(“table”). table.appendChild(oTD11).appendChild(document.2”)). oTD11.appendChild(document.createTextNode(“Cell 2.setAttribute(“border”. oTBody.createElement(“td”).‫ ؛ﻣﺪل ﺷﯽ ﮔﺮاي ﺳﻨﺪ‬DOM //create the table var oTable = document.body. //add the table to the document body document. oTD22.appendChild(oTR1).appendChild(document.

createElement(“tbody”).createTextNode(“Cell 2.createTextNode(“Cell 2.rows[0]. //add the table to the document body document.setAttribute(“border”.insertRow(1). //create the second row oTBody.rows[1].appendChild(document. oTable.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫ از ﺟﺪول‬tfoot ‫ ﺣﺬف ﻋﻨﺼﺮ‬:deleteTfoot() ‫ از ﺟﺪول‬Caption ‫ ﺣﺬف ﻋﻨﺼﺮ‬:deleteCaption() ‫ ﻗﺮار دارد‬position ‫ ﺣﺬف ردﯾﻔﯽ از ﺟﺪول ﮐﻪ در ﻣﻮﻗﻌﯿﺖ‬:deleteRow(position) position ‫ ﻗﺮار دادن ردﯾﻔﯽ در ﻣﻮﻗﻌﯿﺖ‬:insertRow(position) 69     tbody ‫ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي‬ 8 tbody ‫ﻣﺠﻤﻮﻋﻪ از ردﯾﻒ ﻫﺎ در ﻋﻨﺼﺮ‬:Rows position ‫ ﺣﺬف ردﯾﻔﯽ در ﻣﻮﻗﻌﯿﺖ‬:deleteRow(position) ‫ ﻣﺠﻤﻮﻋﻪ اي از ردﯾﻒ ﻫﺎ‬position ‫ ﻗﺮاردادن ردﯾﻔﯽ در ﻣﻮﻗﻌﯿﺖ‬:insertRow(position)    tr ‫ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي‬ ‫ ﻣﺠﻤﻮﻋﻪ اي از ﺳﻠﻮ ل ﻫﺎ در ﯾﮏ ردﯾﻒ‬:Cells  position ‫ ﺣﺬف ﺳﻠﻮﻟﯽ در ﻣﻮﻗﻌﯿﺖ‬:deleteCell(position)  .createTextNode(“Cell 1.cells[0]. //create the tbody var oTBody = document.ir . “100%”). oTBody. oTBody.rows[0]. oTBody.appendChild(oTBody).rows[1].rows[0].cells[0].createElement(“table”).rows[1]. oTBody. oTable. oTBody.insertCell(0).insertRow(0). “1”).‫ ﻣﺠﻤﻮﻋﻪ اي از ﺳﻠﻮل ﻫﺎ‬position ‫ ﻗﺮار دادن ﺳﻠﻮﻟﯽ در ﻣﻮﻗﻌﯿﺖ‬:insertCell(position)  :‫ﺑﺮاي اﯾﺠﺎد ﺟﺪول ﻗﺒﻠﯽ ﮐﺪ ﻣﺎ ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ ﺑﻮد‬ //create the table var oTable = document. oTBody.body.rows[0]. //create the first row oTBody.rows[1].1”)).createTextNode(“Cell 1.appendChild(document.cells[1]. oTBody.1”)).2”)). oTable.insertCell(1).appendChild(oTable).insertCell(1).2”)).appendChild(document.setAttribute(“width”.appendChild(document.cells[1]. 1stwebdesigner. oTBody.insertCell(0).

ir .1stwebdesigner.

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

‬‬ ‫‪1‬‬ ‫‪ :action‬ﻓﺮم ﻫﺎ ﭘﺲ از ارﺳﺎل ﺑﺎﯾﺪ ﺑﻪ ﯾﮏ ﺻﻔﺤﻪ ﭘﺮدازﺷﮕﺮ ﮐﻪ اﻟﺒﺘﻪ ﺑﻪ ﯾﮑﯽ از زﺑﺎن ﻫﺎي ﺗﺤﺖ ﺳﺮور ﻧﻮﺷﺘﻪ ﻣﯽ‬ ‫ﺷﻮﻧﺪ ﻫﺪاﯾﺖ ﺷﻮﻧﺪ‪ .‬‬ ‫ﻧﻮﺷﺘﻦ اﺳﮑﺮﯾﭙﺖ ﻫﺎ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ ﻓﺮم‬ ‫ﮐﺪﻧﻮﯾﺴﯽ ﺑﺮاي ﻋﻨﺎﺻﺮ ﻓﺮم ﻧﺴﺒﺖ ﺑﻪ ﺳﺎﯾﺮ ﻋﻨﺎﺻﺮ ﮐﻤﯽ ﻣﺘﻔﺎوت اﺳﺖ‪..‬‬ ‫ﻣﯽ ﺗﻮاﻧﯿﺪ از اﯾﻦ آراﯾﻪ و ﺑﺎ اﺳﺘﻔﺎده از اﻧﺪﯾﺲ ﻋﺪدي ﯾﺎ اﺳﻤﯽ ﻣﻮرد ﻧﻈﺮ ﺑﻪ ﻋﻨﺎﺻﺮ ﻣﺨﺘﻠﻒ ﻓﺮم دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﺪ‪.‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬ ‫اﺳﺎس ﯾﮏ ﻋﻨﺼﺮ ﻓﺮم در ﺻﻔﺤﻪ‬ ‫‪72‬‬ ‫‪9‬‬ ‫ﯾﮏ ﻓﺮم در ﺻﻔﺤﻪ ﺑﻮﺳﯿﻠﻪ ﺗﮓ ‪ form‬ﮐﻪ داراي ﺻﻔﺖ ﻫﺎي زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ اﯾﺠﺎد ﻣﯽ ﺷﻮد‪:‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪ :method‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﻣﺮورﮔﺮ از ﭼﻪ روﺷﯽ ﺑﺮاي ارﺳﺎل داده ﻫﺎي ﻓﺮم اﺳﺘﻔﺎده ﮐﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﯾﮑﯽ از دو‬ ‫ﻣﻘﺪار ‪ GET‬و ‪ POST‬را ﺑﭙﺬﯾﺮد‪.‬‬ ‫روش اول‪ ،‬اﺳﺘﻔﺎده از ﻣﺘﺪ )(‪ .‬‬ ‫‪ :enctype‬ﻧﻮع رﻣﺰ ﮔﺬاري‪ 2‬داده ﻫﺎي ﻓﺮم را ﻫﻨﮕﺎم ارﺳﺎل ﻣﺸﺨﺺ ﻣﯽﮐﻨﺪ ﮐﻪ در ﺣﺎﻟﺖ ﭘﯿﺶ ﻓﺮض ﺑﺮاﺑﺮ‬ ‫‪ application/x-url-encoded‬اﺳﺖ‪ . // get the first form‬‬ ‫‪var oOtherForm = document. // get the form whose name‬‬ ‫"‪is "formZ‬‬ ‫دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ داﺧﻞ ﯾﮏ ﻓﺮم‬ ‫ﻫﺮ ﻋﻨﺼﺮ داﺧﻞ ﯾﮏ ﻓﺮم ﻣﺜﻞ ﯾﮏ دﮐﻤﻪ‪ ،‬ﯾﮏ ﻓﯿﻠﺪ ﯾﮏ ﺧﻄﯽ و‪ .‬اﯾﻦ ﮐﺎر از ﭼﻨﺪﯾﻦ روش اﻧﺠﺎم‬ ‫ﻣﯽ ﺷﻮد‪..‬‬ ‫روش دوم اﺳﺘﻔﺎده از آراﯾﻪ ي ][‪ forms‬اﺳﺖ ﮐﻪ ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ ‪ document‬در ‪ DOM‬ﻣﻌﺮﻓﯽ ﺷﺪه اﺳﺖ‪.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‪:‬‬ ‫‪var oForm = document.ir‬‬ .‬‬ ‫اﯾﺠﺎد ارﺟﺎع‪ 3‬ﺑﻪ ﻋﻨﺎﺻﺮ ﻣﻮرد ﻧﻈﺮ‬ ‫ﻗﺒﻞ از ﺳﺮ و ﮐﺎر داﺷﺘﻦ ﺑﺎ ﻋﻨﺎﺻﺮ ‪ form‬ﺑﺎﯾﺪ ارﺟﺎﻋﯽ ﺑﻪ ﻓﺮم ﻣﻮرد ﻧﻈﺮ ﺧﻮد در ﺻﻔﺤﻪ اﯾﺠﺎد ﮐﻨﯿﻢ‪ .‬‬ ‫‪1‬‬ ‫‪Server side‬‬ ‫‪Encoding‬‬ ‫‪3‬‬ ‫‪reference‬‬ ‫‪2‬‬ ‫‪1stwebdesigner.‬اﯾﻦ ﺻﻔﺖ آدرس ﺻﻔﺤﻪ ﭘﺮدازﺷﮕﺮ ﻓﺮم را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.‬اﻣﺎ در ﺣﺎﻟﺘﯽ ﮐﻪ داﺧﻞ ﻓﺮم ﺧﻮد ﻋﻨﺼﺮي از ﻧﻮع ‪ file‬ﮐﻪ ﮐﺎرﺑﺮان را ﻗﺎدر ﺑﻪ‬ ‫آﭘﻠﻮد ﻓﺎﯾﻞ ﻫﺎ ﻣﯽ ﮐﻨﺪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ ﺑﺎﯾﺪ آن را ﺑﺮاﺑﺮ ‪ multipart/form-data‬ﻗﺮار دﻫﯿﻢ‪.forms["formZ"] .forms[0] .‬‬ ‫ﺑﺮاي اﯾﻦ ﮐﺎر ﻣﯽ ﺗﻮان از اﻧﺪﯾﺲ ﻋﺪدي ﮐﻪ ﺑﺴﺘﮕﯽ ﺑﻪ ﻣﮑﺎن ﻓﺮم ﻣﻮرد ﻧﻈﺮ در ﺻﻔﺤﻪ دارد اﺳﺘﻔﺎده ﮐﺮد‪ .‬‬ ‫‪ :accept-charset‬ﻟﯿﺴﺘﯽ از ﻣﺠﻤﻮﻋﻪ ﮐﺎراﮐﺘﺮﻫﺎﯾﯽ را ﮐﻪ ﺳﺮور ﺑﺎﯾﺪ در ﻫﻨﮕﺎم درﯾﺎﻓﺖ اﻃﻼﻋﺎت اﺳﺘﻔﺎده ﮐﻨﺪ‪ ،‬ﻣﺸﺨﺺ‬ ‫ﻣﯽ ﮐﻨﺪ‪.getElementById‬اﺳﺖ ﮐﻪ از ‪ ID‬ﻓﺮم ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ آن اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪ :accept‬ﻟﯿﺴﺘﯽ از ‪ MIME type‬ﻓﺎﯾﻞ ﻫﺎﯾﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻣﺠﺎز ﺑﻪ آﭘﻠﻮد آن ﻫﺎ ﻣﯽ ﺑﺎﺷﺪ را ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ‪.‬ﺑﺎ اﺳﺘﻔﺎده از آراﯾﻪ اي ﺑﻪ ﻧﺎم ][‪ elements‬ﮐﻪ ﯾﮑﯽ از ﺧﺎﺻﯿﺖ‬ ‫ﻫﺎي ﯾﮏ ﺷﯽ از ﻧﻮع ﻓﺮم ﻣﯽ ﺑﺎﺷﺪ ﻗﺎﺑﻞ دﺳﺘﺮﺳﯽ اﺳﺖ‪.

elements["textbox1"] .‬‬ ‫اﮔﺮ اﺳﻢ ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ داراي ﭼﻨﺪ ‪ space‬ﺑﺎﺷﺪ ﺑﺎﯾﺪ در اﻃﺮاف آن از ﺑﺮاﮐﺖ )][( اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪:‬‬ ‫‪var oTextbox1 = oForm.‬‬ ‫ﺧﻂ دوم ﻧﯿﺰ ﻣﺘﻐﯿﺮي را ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ ﻋﻨﺼﺮي ﺑﻪ ﻧﺎم ‪ textbox1‬از ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم ‪ oForm‬اﺷﺎره ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪‬‬ ‫ﻣﺘﺪ )(‪ :blur‬اﯾﻦ ﻣﺘﺪ ﻋﮑﺲ ﻣﺘﺪ ﺑﺎﻻ اﺳﺖ و ﻣﻮﺟﺐ ﻣﯽ ﺷﻮد ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺧﺎرج ﺷﻮد‪.‬‬ ‫‪‬‬ ‫ﻣﺘﺪ )(‪ :focus‬اﯾﻦ ﻣﺘﺪ ﻣﻮﺟﺐ ﻣﯽ ﺷﻮد ﺗﻤﺮﮐﺰ‪ 1‬ﺻﻔﺤﻪ ﺑﺮ روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﻗﺮار ﮔﯿﺮد‪.‬‬ ‫ﺧﺎﺻﯿﺖ ‪ :form‬اﺷﺎره ﺑﻪ ﻓﺮﻣﯽ دارد ﮐﻪ ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﻣﺎ‪ ،‬داﺧﻞ آن ﻗﺮار دارد‪.‬‬ ‫‪‬‬ ‫روﯾﺪاد ‪ :blur‬اﯾﻦ روﯾﺪاد ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺧﺎرج ﺷﻮد رخ ﻣﯽ دﻫﺪ‪.ir‬‬ . //get the field with the name‬‬ ‫"‪"textbox1‬‬ ‫وﯾﮋﮔﯽ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﻋﻨﺎﺻﺮ ‪form‬‬ ‫ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ﻓﺮم )ﺑﻪ ﺟﺰ ﻋﻨﺼﺮي از ﻧﻮع ‪ (hidden‬ﺷﺎﻣﻞ ﯾﮑﺴﺮي ﺧﻮاص و روﯾﺪادﻫﺎي ﻣﺸﺘﺮﮐﯽ ﻫﺴﺘﻨﺪ ﮐﻪ در زﯾﺮ ﺑﯿﺎن ﻣﯽ‬ ‫ﮐﻨﯿﻢ‪:‬‬ ‫‪‬‬ ‫‪‬‬ ‫ﺧﺎﺻﯿﺖ ‪ :disabled‬از اﯾﻦ ﺧﺎﺻﯿﺖ ﻫﻢ ﺑﺮاي ﺗﺸﺨﯿﺺ اﯾﻨﮑﻪ ﮐﺪام ﻋﻨﺼﺮ در ﺣﺎﻟﺖ ﻏﯿﺮ ﻓﻌﺎل ﻗﺮار دارد و ﻫﻢ ﺑﺮاي‬ ‫ﻓﻌﺎل ﯾﺎ ﻏﯿﺮ ﻓﻌﺎل ﮐﺮدن ﯾﮏ ﻋﻨﺼﺮ از ﻗﺒﻞ ﻓﻌﺎل اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬‬ ‫ﺑﺮاي ﻣﺜﺎل‪:‬‬ ‫‪focus‬‬ ‫‪1‬‬ ‫‪1stwebdesigner.textbox1.‪var oTextbox1 = oForm.elements[0] .‬‬ ‫ﯾﮏ روش دﯾﮕﺮ )ﮐﻪ اﺻﻄﻼﺣﺎ ﺑﻪ آن روش ﻣﯿﺎﻧﺒﺮ ﻣﯽ ﮔﻮﯾﻨﺪ( ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮي ﮐﻪ ﻧﺎم ﻣﺸﺨﺼﯽ دارﻧﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‬ ‫‪9‬‬ ‫ﺑﻪ ﺷﮑﻞ زﯾﺮ اﺳﺖ‪:‬‬ ‫‪//get the field with the name‬‬ ‫. // get the field with the‬‬ ‫‪name‬‬ ‫"‪"textbox1‬‬ ‫‪73‬‬ ‫ﺧﻂ اول از ﮐﺪ ﺑﺎﻻ ﻣﺘﻐﯿﺮي را ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ اوﻟﯿﻦ ﻋﻨﺼﺮ از ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم ‪ oForm‬اﺷﺎره ﻣﯽ ﮐﻨﺪ‪.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪var oFirstField = oForm.‬‬ ‫‪ ‬روﯾﺪاد ‪ :focus‬ﻋﮑﺲ روﯾﺪاد ﺑﺎﻻ ﻋﻤﻞ ﻣﯽ ﮐﻨﺪ و ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺑﺮ روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﻗﺮار ﺑﮕﯿﺮد رخ ﻣﯽ دﻫﺪ‪. // get the first form field‬‬ ‫‪var oTextbox1 = oForm.textbox1‬‬ ‫"‪"textbox1‬‬ ‫ﮐﺪ ﺑﺎﻻ ﻣﺘﻐﯿﺮي ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ ﻋﻨﺼﺮي ﺑﺎ ﺷﻨﺎﺳﻪ )ﯾﺎ ‪ textbox1 (ID‬از ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم ‪ oForm‬اﺷﺎره ﻣﯽ ﮐﻨﺪ‪.

disabled = true‬‬ ‫‪9‬‬ ‫‪//set the focus to the second field‬‬ ‫.elements[1‬‬ ‫‪74‬‬ ‫‪//set the first field to be disabled‬‬ ‫.‬ﺑﺮاي اﯾﻦ ﮐﺎر اوﻻ‬ ‫ﺑﺎﯾﺪ ارﺟﺎﻋﯽ ﺑﻪ ﻓﺮم ﻣﻮرد ﻧﻈﺮ اﯾﺠﺎد ﮐﺮد )ﻃﺒﻖ روش ﻫﺎﯾﯽ ﮐﻪ ﻗﺒﻼ ذﮐﺮ ﺷﺪ(‪:‬‬ ‫. //outputs "true‬‬ ‫‪‬‬ ‫ﻧﮑﺘﻪ‪ :‬ﻋﻨﺎﺻﺮ از ﻧﻮع ‪ hidden‬ﻓﻘﻂ از ﺧﺎﺻﯿﺖ ‪ form‬ﮐﻪ در ﺑﺎﻻ ذﮐﺮ ﺷﺪ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﺪ‪.getElementById("form1‬‬ ‫.‬‬ ‫ﭼﻨﺎﻧﭽﻪ دﮐﻤﻪ ‪ Enter‬ﺻﻔﺤﻪ ﮐﻠﯿﺪ را ﻧﯿﺰ ﻓﺸﺎر دﻫﯿﺪ ﻣﺮورﮔﺮ ﻓﺮم را ﻣﺜﻞ ﺣﺎﻟﺘﯽ ﮐﻪ دﮐﻤﻪ ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد ارﺳﺎل ﻣﯽ ﮐﻨﺪ‪.gif" /‬‬ ‫در ﺻﻮرت ﮐﻠﯿﮏ ﺑﺮ روي ﻫﺮ ﯾﮏ از دﮐﻤﻪ ﻫﺎي ﺑﺎﻻ ﻓﺮم ﺑﻪ ﺻﻮرت ﻣﻌﻤﻮﻟﯽ ارﺳﺎل ﻣﯽ ﺷﻮد‪.‬‬ ‫ﺑﺮاي ﺗﺴﺖ ارﺳﺎل ﺷﺪن ﻓﺮم ﻣﯽ ﺗﻮاﻧﯿﺪ از ﮐﺪ ﺳﺎده زﯾﺮ در ﺗﮓ آﻏﺎزﯾﻦ ﻓﺮم ﻣﻮرد ﻧﻈﺮﺗﺎن اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪:‬‬ ‫>")’‪<form method="post" action="javascript:alert(‘Submitted‬‬ ‫اﮔﺮ ﻣﯽ ﺧﻮاﻫﯿﺪ ﮐﻪ از ﻫﯿﭻ ﯾﮏ از روش ﻫﺎي ﻓﻮق اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ .]"‪oForm = document.)"‪oForm = document.‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬ ‫.]‪var oField1 = oForm.focus‬‬ ‫?‪//is the form property equal to oForm‬‬ ‫"‪alert(oField1.submit‬‬ ‫‪1stwebdesigner.‬‬ ‫ارﺳﺎل ﻓﺮم ﺑﻮﺳﯿﻠﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫در ‪ HTML‬ﻓﺮﺳﺘﺎدن ﻓﺮم از ﻃﺮﯾﻖ ﯾﮏ دﮐﻤﻪ از ﻧﻮع ‪ submit‬ﯾﺎ ﻋﮑﺴﯽ ﮐﻪ در ﻧﻘﺶ دﮐﻤﻪ ‪ submit‬ﻋﻤﻞ ﻣﯽ ﮐﻨﺪ اﻧﺠﺎم ﻣﯽ‬ ‫ﺷﻮد‪.‬‬ ‫ﻣﺜﺎل‪:‬‬ ‫>‪<input type="submit" value="Submit" /‬‬ ‫>‪<input type="image" src="submit.]‪var oField2 = oForm.)(‪oForm.)(‪oField2.]‪oForm = document.‬‬ ‫اﯾﻦ ﻣﺘﺪ ﺟﺰﺋﯽ از ﺗﻌﺮﯾﻔﺎت ‪ DOM‬ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ ‪ form‬اﺳﺖ و ﻣﯽ ﺗﻮاﻧﺪ ﻫﺮ ﺟﺎﯾﯽ از ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﺷﻮد‪ .submit‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪.elements[0‬‬ ‫.forms["form1‬‬ ‫.forms[0‬‬ ‫ﺑﻌﺪ از اﯾﻦ ﮐﺎر ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ راﺣﺘﯽ از اﯾﻦ ﻣﺘﺪ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪:‬‬ ‫.‪oField1.form == oForm).ir‬‬ .

‬ﺻﻔﺖ ‪ maxlength‬ﺣﺪاﮐﺜﺮ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮﻫﺎﯾﯽ ﮐﻪ ﺑﺘﻮان در ﮐﺎدر وارد ﮐﺮد را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪75‬‬ ‫‪9‬‬ ‫ﺑﺮاي اﻧﺠﺎم اﯾﻦ ﮐﺎر ﻣﯽ ﺗﻮان ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده از دﮐﻤﻪ ‪ submit‬ﻣﻌﻤﻮﻟﯽ زﯾﺮ‪:‬‬ ‫>‪<input type="submit" value="Submit" /‬‬ ‫از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﮐﺮد‪:‬‬ ‫.submit‬ارﺳﺎل ﮐﻨﯿﻢ ﻣﯽ ﺗﻮاﻧﯿﻢ آن را ﺑﻪ وﺳﯿﻠﻪ ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ .form.‬ﺻﻔﺖ ‪ size‬ﻃﻮل‬ ‫ﮐﺎدر را ﺑﺮ ﺣﺴﺐ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮﻫﺎ ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪ .‬‬ ‫>‪<input type="text" size="25" maxlength="50" value="initial value" /‬‬ ‫‪disabled‬‬ ‫‪1‬‬ ‫‪1stwebdesigner.ir‬‬ .‬‬ ‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﯾﮏ ﻓﺮم را ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻮﺳﯿﻠﻪ ﻣﺘﺪ )(‪ .submit()” /‬‬ ‫ﻣﻮﻗﻌﯽ ﮐﻪ اﯾﻦ دﮐﻤﻪ ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد اوﻻ ﺧﻮد دﮐﻤﻪ ﻏﯿﺮ ﻓﻌﺎل ﻣﯽ ﺷﻮد و ﺳﭙﺲ ﻓﺮﻣﯽ را ﮐﻪ ﺟﺰﺋﯽ از آن اﺳﺖ‪ ،‬ارﺳﺎل ﻣﯽ ﮐﻨﺪ‪.‬ﻣﻘﺪار ﺻﻔﺖ ‪ value‬ﻧﯿﺰ ﻣﻘﺪار ﭘﯿﺶ ﻓﺮض ﻣﻮﺟﻮد داﺧﻞ آن را ﻣﺸﺨﺺ ﻣﯽ‬ ‫ﮐﻨﺪ‪ .‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫ارﺳﺎل ‪ form‬ﻓﻘﻂ ﯾﮑﺒﺎر !‬ ‫ﯾﮑﯽ از ﻣﺸﮑﻼﺗﯽ ﮐﻪ ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن در ﻓﺮم ﻫﺎ ﺑﺎ آن روﺑﺮو ﻫﺴﺘﻨﺪ اﯾﻦ اﺳﺖ ﮐﻪ ﺑﺴﯿﺎري از ﮐﺎرﺑﺮان ﺑﺮاي اﻃﻤﯿﻨﺎن از اﯾﻨﮑﻪ ﻓﺮم‬ ‫ﺑﻪ درﺳﺘﯽ ارﺳﺎل ﺷﻮد ﭼﻨﺪﯾﻦ ﺑﺎر ﺑﺮ روي دﮐﻤﻪ ‪ submit‬ﮐﻠﯿﮏ ﻣﯽ ﮐﻨﻨﺪ‪ .‪<input type=”button” value=”Submit” onclick=”this.forms[0].reset‬‬ ‫>‪/‬‬ ‫ﮐﺎر ﺑﺎ ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ‬ ‫دو ﻧﻮع ﮐﺎدر ﻣﺘﻨﯽ در ‪ HTML‬ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد‪.‬‬ ‫ﯾﮏ ﺧﻄﯽ‪:‬‬ ‫>‪<input type="text"/‬‬ ‫و ﭼﻨﺪ ﺧﻄﯽ‪:‬‬ ‫>‪<textarea>Content</textarea‬‬ ‫ﺑﺮاي درﺳﺖ ﮐﺮدن ﯾﮏ ﮐﺎدر ﻣﺘﻨﯽ ﯾﮏ ﺧﻄﯽ ﻣﯽ ﺑﺎﯾﺴﺖ ﺻﻔﺖ ‪ type‬ﻋﻨﺼﺮ ‪ input‬را ﺑﺮاﺑﺮ ‪ text‬ﻗﺮار دﻫﯿﻢ‪ .‬‬ ‫ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ در اﯾﻨﺠﺎ ﮐﻠﻤﻪ ﮐﻠﯿﺪي ‪ this‬ﺑﻪ دﮐﻤﻪ اﺷﺎره دارد و ‪ form‬ﺑﻪ ﻓﺮم درﺑﺮﮔﯿﺮﻧﺪه دﮐﻤﻪ اﺷﺎره ﻣﯽ ﮐﻨﺪ‪.reset‬ﻧﯿﺰ‬ ‫‪) reset‬ﭘﺎك ﺳﺎزي( ﮐﻨﯿﻢ‪:‬‬ ‫”)(‪<input type=”button” value=”Reset” onclick=”document.disabled=true‬‬ ‫>‪this.‬‬ ‫راه ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ ﺑﺴﯿﺎر ﺳﺎده اﺳﺖ‪ :‬ﺑﻌﺪ از اﯾﻨﮑﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ را ﮐﻠﯿﮏ ﮐﺮد‪ ،‬آن را ﻏﯿﺮ ﻓﻌﺎل‪ 1‬ﻣﯽ ﮐﻨﯿﻢ‪.‬ﻣﺸﮑﻠﯽ ﮐﻪ در اﯾﻨﺠﺎ ﻫﺴﺖ اﯾﻦ اﺳﺖ ﮐﻪ ﺑﻪ ازاي ﻫﺮ‬ ‫ﺑﺎر ﮐﻠﯿﮏ ﮐﺎرﺑﺮ ﺑﺮ روي دﮐﻤﻪ ﯾﮏ درﺧﻮاﺳﺖ اﺿﺎﻓﯽ ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﯽ ﺷﻮد‪.

length‬‬ ‫از اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﺮاي ﻗﺮاردادن ﻣﻘﺎدﯾﺮ ﺟﺪﯾﺪ درﮐﺎدر ﻫﺎي ﻣﺘﻨﯽ ﻧﯿﺰ ﻣﯽ ﺗﻮان اﺳﺘﻔﺎده ﮐﺮد‪ .‬‬ ‫ﺑﺎزﯾﺎﺑﯽ و ﺗﻐﯿﯿﺮ ﻣﻘﺪار ﯾﮏ ‪textbox‬‬ ‫اﮔﺮ ﭼﻪ ﻫﺮ دو ﻋﻨﺼﺮ ﺑﺎﻻ ﺗﻔﺎوت ﻫﺎﯾﯽ دارﻧﺪ اﻣﺎ ﻫﺮ دوي آن ﻫﺎ از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ value‬ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﻣﻘﺪار وارد ﺷﺪه در آن ﻫﺎ‬ ‫ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪.)"‪var oTextbox1 = document.‬‬ ‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي اﻧﺘﺨﺎب ﺗﻤﺎﻣﯽ ﻣﺘﻦ ﻣﻮﺟﻮد در ﮐﺎدر ﻣﺘﻨﯽ ﻓﻮق‪:‬‬ ‫.'‪oTextbox1.‬‬ ‫>‪<textarea rows="25" cols="5">initial value</textarea‬‬ ‫ﺑﺮ ﺧﻼف ‪ input‬اﯾﻦ ﻋﻨﺼﺮ اﻣﮑﺎن ﻣﺸﺨﺺ ﮐﺮدن ﺣﺪاﮐﺜﺮ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي را ﻧﺪارد‪.)'‪alert ('oTextbox1.‬از ﺻﻔﺖ ﻫﺎي ‪ rows‬و ‪ cols‬ﺑﺮاي ﻣﺸﺨﺺ‬ ‫‪76‬‬ ‫‪9‬‬ ‫ﮐﺮدن ﻃﻮل و ﻋﺮض ‪ textarea‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬‬ ‫ﺑﺮاي اﯾﻦ ﮐﺎر اوﻻ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﺑﺎﯾﺪ ﺑﺮ روي آن ﻗﺮار ﮔﯿﺮد‪ .‬‬ ‫‪‬‬ ‫‪ :change‬اﯾﻦ روﯾﺪاد وﻗﺘﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﺑﻌﺪ از ﺗﻐﯿﯿﺮ ﻣﺘﻦ داﺧﻞ ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ‪ ،‬آن ﻫﺎ را از ﺣﺎﻟﺖ ﺗﻤﺮﮐﺰ‬ ‫ﺻﻔﺤﻪ ﺧﺎرج ﮐﻨﺪ‪.‬ﺑﺮاي اﻃﻤﯿﻨﺎن از اﯾﻦ اﻣﺮ ﺑﺎﯾﺪ ﻫﻤﯿﺸﻪ ﻗﺒﻞ از ﻣﺘﺪ )(‪ .select‬ﺑﺮاي اﻧﺘﺨﺎب ﺗﻤﺎﻣﯽ ﻣﺘﻦ داﺧﻞ آن ﻫﺎ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪.focus‬اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ‪) .‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬ ‫ﻋﻨﺼﺮ ‪ textarea‬ﺑﺮاي اﯾﺠﺎد ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ ﭼﻨﺪ ﺧﻄﯽ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد‪ .select‬از ﻣﺘﺪي‬ ‫ﺑﻪ ﻧﺎم )(‪ .‬اﻟﺒﺘﻪ اﯾﻦ ﮐﺎر در ﺗﻤﺎﻣﯽ ﻣﺮورﮔﺮﻫﺎ اﻟﺰاﻣﯽ ﻧﯿﺴﺖ اﻣﺎ ﺑﻬﺘﺮ اﺳﺖ ﻫﻤﯿﺸﻪ اﻧﺠﺎم ﺷﻮد‪(.‬‬ ‫.‬‬ ‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﻣﻘﺪار وارد ﺷﺪه در ﻓﯿﻠﺪي ﺑﺎ ﺷﻨﺎﺳﻪ )ﯾﺎ ‪ txt1 (ID‬ﻣﯽ ﺗﻮان ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﺮد‪:‬‬ ‫.focus‬‬ ‫.ir‬‬ .select‬‬ ‫روﯾﺪاد ﻫﺎي ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ‬ ‫ﻫﺮ دو ﻧﻮع ﻓﯿﻠﺪ ﺑﺎﻻ ﻋﻼوه ﺑﺮ ﭘﺸﺘﯿﺒﺎﻧﯽ از روﯾﺪاد ﻫﺎي ‪ blur‬و ‪ focus‬از دو روﯾﺪاد ﺟﺪﯾﺪ ﺑﻪ ﻧﺎم ﻫﺎي ‪ change‬و ‪ select‬ﻧﯿﺰ‬ ‫ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺎ دﺳﺘﻮر زﯾﺮ ﻣﯽ ﺗﻮان‬ ‫ﻣﻘﺎدﯾﺮ ﺟﺪﯾﺪي را ﺑﻪ ‪) oTextbox1‬ﮐﻪ در ﺑﺎﻻ ذﮐﺮ ﺷﺪ( اﺿﺎﻓﻪ ﮐﻨﯿﻢ‪:‬‬ ‫.‬‬ ‫‪1stwebdesigner.getElementById("txt1‬‬ ‫ﭼﻮن ﻣﻘﺪاري ﮐﻪ ﺧﺎﺻﯿﺖ ‪ value‬ﺑﺮﻣﯽ ﮔﺮداﻧﺪ ﯾﮏ رﺷﺘﻪ ﺳﺎده اﺳﺖ ﻣﯽ ﺗﻮان از ﺗﻤﺎﻣﯽ ﻣﺘﺪﻫﺎ و ﺧﻮاﺻﯽ ﮐﻪ ﻗﺒﻼ ﺑﺮاي رﺷﺘﻪ ﻫﺎ‬ ‫اﺷﺎره ﮐﺮدﯾﻢ اﺳﺘﻔﺎده ﮐﺮد‪.value='first textbox‬‬ ‫اﻧﺘﺨﺎب ﻣﺘﻦ ﻫﺎي داﺧﻞ ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ‬ ‫ﻫﺮ دو ﻧﻮع ﻓﯿﻠﺪ ﺑﺎﻻ از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ .)(‪oTextbox1.)(‪oTextbox1.

focus‬ﺑﺮاي ﻋﻨﺼﺮ ﻓﺮم ﺑﻌﺪي‬ ‫اﺳﺖ‪ .‬‬ ‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‪:‬‬ ‫>‪<input type="text" onfocus="this." /‬‬ ‫>‪<textarea onfocus="this.‬‬ ‫اﮔﺮ ﻣﺘﻦ داﺧﻞ ﮐﺎدر ﻣﺘﻨﯽ ﺛﺎﺑﺖ ﺑﺎﺷﺪ و ﻓﻘﻂ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از ﻋﻨﺼﺮ ﺑﺮود ‪ blur‬رخ ﻣﯽ دﻫﺪ اﻣﺎ اﮔﺮ ﻣﺘﻦ ﻫﻢ ﺗﻐﯿﯿﺮ ﮐﺮده ﺑﺎﺷﺪ اﺑﺘﺪا‬ ‫‪77‬‬ ‫‪9‬‬ ‫روﯾﺪاد ‪ change‬و ﺑﻪ دﻧﺒﺎل آن ‪ blur‬رخ ﺧﻮاﻫﺪ داد‪.‬‬ ‫ﺗﻔﺎوت روﯾﺪاد ﻫﺎي ‪ change‬و ‪ blur‬اﯾﻦ اﺳﺖ ﮐﻪ روﯾﺪاد ‪ blur‬ﺗﻨﻬﺎ زﻣﺎﻧﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ‬ ‫ﺧﺎرج ﺷﻮد و روﯾﺪاد ‪ change‬ﻧﯿﺰ وﻗﺘﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻋﻼوه ﺑﺮ ﺗﻐﯿﯿﺮ ﻣﺘﻦ داﺧﻞ ‪textarea‬ﻫﺎ ‪ ،‬ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﻧﯿﺰ از آن ﻫﺎ ﺧﺎرج‬ ‫ﻣﯽ ﺷﻮد‪.ir‬‬ .‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪ :select ‬اﯾﻦ روﯾﺪاد وﻗﺘﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﯾﮏ ﯾﺎ ﭼﻨﺪ ﮐﺎراﮐﺘﺮ از رﺷﺘﻪ ﻫﺎي داﺧﻞ ﯾﮏ ﮐﺎدر ﻣﺘﻨﯽ ﭼﻪ ﺑﻪ ﺻﻮرت دﺳﺘﯽ‬ ‫ﯾﺎ ﺗﻮﺳﻂ ﻣﺘﺪ )(‪ .select‬در روﯾﺪاد ‪ onFocus‬ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ اﺳﺘﻔﺎده ﻧﻤﻮد‪.select()"></textarea‬‬ ‫ﭼﺮﺧﺶ ‪ Tab‬ﺑﯿﻦ ﻋﻨﺎﺻﺮ ﻓﺮم ﺑﻪ ﺻﻮرت ﺧﻮدﮐﺎر‬ ‫ﺑﻌﺪ از ﺗﮑﻤﯿﻞ ﮐﺎدر ﻫﺎي ﻣﺘﻨﯽ ﮐﻪ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮﻫﺎي ﻣﺸﺨﺼﯽ را ﻣﯽ ﭘﺬﯾﺮﻧﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﮐﻨﺘﺮل )ﺗﻤﺮﮐﺰ( ﺻﻔﺤﻪ را ﺑﻪ دﯾﮕﺮ ﻋﻨﺎﺻﺮ‬ ‫ﺻﻔﺤﻪ ﻣﻨﺘﻘﻞ ﮐﻨﯿﺪ‪.select‬اﻧﺘﺨﺎب ﺷﻮﻧﺪ‪.select().‬‬ ‫اﻧﺘﺨﺎب ﺧﻮدﮐﺎر ﻣﺘﻦ درون ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ‬ ‫ﺑﺮاي اﻧﺘﺨﺎب ﺧﻮدﮐﺎر ﻣﺘﻦ درون ﯾﮏ ﮐﺎدر ﻣﺘﻨﯽ ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﺑﺮ روي آن ﻫﺎ ﻗﺮار ﻣﯽ ﮔﯿﺮد ﻣﯽ ﺗﻮان ﺑﻪ راﺣﺘﯽ از‬ ‫دﺳﺘﻮر )(‪ this.‬‬ ‫ﺑﺮاي اﯾﻦ ﮐﺎر ﻣﯽ ﺗﻮاﻧﯿﻢ از ﺻﻔﺖ ‪ maxlength‬در ﺗﮓ ﻫﺎي >‪ <input /‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪:‬‬ ‫>‪<input type="text" maxlength="4" /‬‬ ‫ﮐﺎري ﮐﻪ ﺑﺎﯾﺪ در اﯾﻨﺠﺎ اﻧﺠﺎم دﻫﯿﻢ ﺗﺸﺨﯿﺺ وارد ﺷﺪن ﺣﺪاﮐﺜﺮ ﮐﺎراﮐﺘﺮ ﻫﺎ و ﻓﺮاﺧﻮاﻧﯽ ﻣﺘﺪ )(‪ .‬ﺑﺮاي اﯾﻦ ﮐﺎر از ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم ‪ test‬اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪:‬‬ ‫‪1stwebdesigner.

‬‬ ‫در ﻣﺮﺣﻠﻪ ﺑﻌﺪ ﺑﺎﯾﺪ اﯾﻦ ﺗﺎﺑﻊ را در روﯾﺪاد ‪ onKeyPress‬ﻋﻨﺼﺮﻣﺎن ﻓﺮاﺧﻮاﻧﯽ ﮐﻨﯿﻢ‪ .}‬ ‫ﺗﺎﺑﻌﯽ ﮐﻪ ﻣﺎ ﻧﻮﺷﺘﯿﻢ ﺑﺎﯾﺪ ﺑﻌﺪ از ﻫﺮ ﺑﺎر وارد ﮐﺮدن ﮐﺎراﮐﺘﺮ داﺧﻞ ‪ textbox‬ﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﺷﻮد‪ .elements.elements.length.elements[i] == oTextbox‬‬ ‫{ )‪for(var j=i+1.‪return‬‬ ‫}‬ ‫}‬ ‫. j++‬‬ ‫{ )"‪if (oForm.type != "hidden‬‬ ‫.‪return‬‬ ‫}‬ ‫}‬ ‫}‬ ‫.getAttribute("maxlength‬‬ ‫{ )‪for (var i=0.value. j < oForm.)'‪Return oTextbox.‬ﻓﻘﻂ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮﻫﺎي وارد ﺷﺪه در ﮐﺎدر ﻣﺘﻨﯽ را ﺑﺎ ﺻﻔﺖ ‪ maxlength‬ﻋﻨﺼﺮ‬ ‫ﻣﻮرد ﻧﻈﺮ ﻣﻘﺎﯾﺴﻪ ﻣﯽ ﮐﻨﺪ و در ﺻﻮرﺗﯽ ﮐﻪ ﺑﺮاﺑﺮ ﻧﺒﺎﺷﺪ ‪ true‬و در ﻏﯿﺮ اﯾﻨﺼﻮرت ‪ false‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.elements[j].length. i++‬‬ ‫{ )‪if (oForm.‬ﺑﻪ ﺻﻮرت زﯾﺮ‪:‬‬ ‫{)‪function isNotMax(oTextbox‬‬ ‫.‬‬ ‫ﺑﺮاي اﯾﻦ ﮐﺎر اﺑﺘﺪا ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم )(‪ isNotMax‬ﺗﻌﺮﯾﻒ ﺧﻮاﻫﯿﻢ ﮐﺮد‪ .form‬‬ ‫‪78‬‬ ‫‪9‬‬ ‫‪//make sure the textbox is not the last field in the form‬‬ ‫‪if (oForm.elements.‬‬ ‫ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﺻﻔﺖ ‪ maxlength‬ﺑﺮاي ‪ textarea‬ﺻﻔﺘﯽ ﻏﯿﺮ اﺳﺘﺎﻧﺪارد اﺳﺖ اﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﻮﺳﻂ ﻣﺘﺪ )(‪.length != oTextarea.‬اﯾﻦ روﯾﺪاد ﻗﺒﻞ از وارد ﮐﺮدن ﻫﺮ ﮐﺎراﮐﺘﺮ رخ‬ ‫ﺧﻮاﻫﺪ داد ﮐﻪ دﻗﯿﻘﺎ زﻣﺎﻧﯽ اﺳﺖ ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ ﺣﺪاﮐﺜﺮ رﺳﯿﺪن ﺗﻌﺪاد ﮐﺎرﮐﺘﺮ ﻫﺎي ورودي را ﭼﮏ ﮐﻨﯿﻢ‪ .getAttribute('maxlength‬‬ ‫}‬ ‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ ﺑﯿﻨﯿﺪ اﯾﻦ ﺗﺎﺑﻊ ﺑﺴﯿﺎر ﺳﺎده اﺳﺖ‪ .‬اﻣﺎ ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﻮﺳﻂ ﯾﮏ ﮐﺪ ﺳﺎده ‪ javascript‬اﯾﻨﮑﺎر را اﻧﺠﺎم دﻫﯿﻢ‪. i < oForm.‬ﭼﯿﺰي ﻣﺎﻧﻨﺪ ﮐﺪ زﯾﺮ‪:‬‬ ‫‪1stwebdesigner.)(‪oForm.getAttribute‬‬ ‫ﻣﻘﺪار آن را ﺑﺪﺳﺖ آورﯾﻢ‪.elements[oForm.length == oTextbox.length-1] != oTextbox‬‬ ‫{ ))"‪&& oTextbox.value.ir‬‬ .‬ﺑﺮاي اﯾﻨﮑﺎر از روﯾﺪاد ‪onKeyUp‬‬ ‫اﺳﺘﻔﺎده ﺧﻮاﻫﯿﻢ ﮐﺮد ﺑﻪ ﺻﻮرت زﯾﺮ‪:‬‬ ‫>‪<input type='text' maxlength='4' onKeyUp='test(this)' /‬‬ ‫ﻣﺤﺪود ﮐﺮدن ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي در ﯾﮏ ‪textarea‬‬ ‫اﮔﺮ ﭼﻪ ﯾﮏ ‪ textfield‬داراي ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم ‪ maxlength‬ﺑﺮاي ﻣﺤﺪودﮐﺮدن ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي اﺳﺖ اﻣﺎ ﯾﮏ ‪ textarea‬ﻓﺎﻗﺪ‬ ‫اﯾﻦ ﺻﻔﺖ اﺳﺖ‪ .‪var oForm = oTextbox.‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬ ‫{)‪function test(oTextbox‬‬ ‫.elements[j].focus‬‬ ‫.

)"‪oListbox = document.ir‬‬ .‬‬ ‫>"‪<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‬ي ﺑﺎ ‪ 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‬‬ ‫ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻫﺮ دو ﻧﻮع ﻋﻨﺼﺮ ﻓﻮق ﻣﯽ ﺗﻮان ﻃﺒﻖ ﻗﻮاﻋﺪي ﮐﻪ ﻗﺒﻼ ﮔﻔﺘﯿﻢ ﻋﻤﻞ ﮐﻨﯿﺪ‪:‬‬ ‫.‬‬ ‫‪79‬‬ ‫‪9‬‬ ‫ﮐﺎر ﺑﺎ ‪ listbox‬ﻫﺎ و ‪ combobox‬ﻫﺎ‬ ‫‪listbox‬ﻫﺎ و ‪combobox‬ﻫﺎ در ‪ HTML‬ﺑﻮﺳﯿﻠﻪ ﺗﮕﯽ ﺑﻪ ﻧﺎم ‪ select‬اﯾﺠﺎد ﻣﯽ ﺷﻮﻧﺪ ﮐﻪ ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض ﻣﺮورﮔﺮﻫﺎ اﯾﻦ‬ ‫ﻋﻨﺼﺮ را ﺑﻪ ﺻﻮرت ‪ combobox‬ﻧﺸﺎن ﻣﯽ دﻫﻨﺪ‪.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪<textarea rows='10' cols='25' maxlength='150' onKeyPress='return‬‬ ‫>‪isNotMax(this)'></textarea‬‬ ‫ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ ﻣﻘﺪار ﺑﺮﮔﺸﺘﯽ از ﺗﺎﺑﻊ ﺑﻪ ﮐﻨﺘﺮل ﮐﻨﻨﺪهي روﯾﺪاد ‪ onKeyPress‬ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد‪ .‬‬ ‫‪1stwebdesigner.‬‬ ‫ﺑﺮاي ﻧﺸﺎن دادن ﯾﮏ ‪ listbox‬ﻓﻘﻂ ﮐﺎﻓﯽ اﺳﺖ ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم ‪ size‬را ﺑﺎ ﻣﻘﺪاري ﮐﻪ ﻣﺸﺨﺺ ﮐﻨﻨﺪه ي ﺗﻌﺪاد آﯾﺘﻢ ﻫﺎي ﻗﺎﺑﻞ‬ ‫ﻧﻤﺎﯾﺶ ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض اﺳﺖ ﺑﻪ ﺗﮓ ‪ select‬اﺿﺎﻓﻪ ﮐﻨﯿﺪ‪ .‬اﻟﺒﺘﻪ اﯾﻦ ﺷﯿﻮه از راه ﻫﺎي‬ ‫ﻗﺪﯾﻤﯽ ﮐﻨﺘﺮل رﻓﺘﺎر ﭘﯿﺶ ﻓﺮض ﯾﮏ روﯾﺪاد اﺳﺖ‪.getElementById("selAge‬‬ ‫‪ DOM‬ﺑﺮاي ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ‪ select‬آراﯾﻪ اي ﺑﻪ ﻧﺎم ‪ options‬ﮐﻪ ﻫﺮ ﺧﺎﻧﻪ آن اﺷﺎره ﺑﻪ ‪option‬ي از آن ﻋﻨﺼﺮ دارد ﺗﻌﺮﯾﻒ ﮐﺮده‬ ‫اﺳﺖ‪.‬‬ ‫ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي از ‪ MAX‬ﮐﻤﺘﺮ ﺑﺎﺷﺪ ﺗﺎﺑﻊ ﻣﻘﺪار ‪ true‬ﺑﻪ ﻣﻌﻨﯽ اداﻣﻪ رﻓﺘﺎر ﻋﺎدي روﯾﺪاد را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ در‬ ‫ﻏﯿﺮ اﯾﻦ ﺻﻮرت ﻣﻮﺟﺐ ﺟﻠﻮﮔﯿﺮي از رﻓﺘﺎر ﻋﺎدي روﯾﺪاد و در ﻧﺘﯿﺠﻪ ﮐﺎراﮐﺘﺮﻫﺎي ﺑﯿﺶ از ﺣﺪ ﻣﺠﺎز ﺧﻮاﻫﺪ ﺷﺪ‪.

‬‬ ‫‪1stwebdesigner.)‪oListbox.length + “ in the list.‬‬ ‫اﯾﻦ ﺗﺎﺑﻊ در ﻃﻮل آﯾﺘﻢ ﻫﺎي ﯾﮏ ‪ listbox‬ﭼﺮﺧﺶ ﮐﺮده و ﻣﻘﺪار ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ selected‬ﮐﻪ ﻣﺸﺨﺺ ﮐﻨﻨﺪهي اﻧﺘﺨﺎب ﺷﺪن‬ ‫ﯾﺎ ﻧﺸﺪن آﯾﺘﻢ اﺳﺖ را ﺑﺮرﺳﯽ ﮐﺮده و ‪ index‬آن ‪ option‬را ﺑﻪ آراﯾﻪ اي اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﺪ‪ .}‬ ‫از اﯾﻦ ﺗﺎﺑﻊ ﻣﯽ ﺗﻮان ﻫﻢ ﺑﺮاي ﺑﺪﺳﺖ آوردن آﯾﺘﻢ ﻫﺎي اﻧﺘﺨﺎب ﺷﺪه و ﻫﻢ ﺗﻌﺪاد آن ﻫﺎ اﺳﺘﻔﺎده ﮐﺮد‪.‬ﺧﺎﺻﯿﺖ ‪ selected‬ﻓﻘﻂ ﻣﯽ ﺗﻮاﻧﺪ ﯾﮑﯽ‬ ‫از ﻣﻘﺎدﯾﺮ ‪) true‬اﻧﺘﺨﺎب ﺷﺪه( ﯾﺎ ‪) fasle‬اﻧﺘﺨﺎب ﻧﺸﺪه( را در ﺑﺮ داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬ ‫اﻣﺎ ﺣﺎل از ﮐﺠﺎ ﺑﻔﻬﻤﯿﻢ ﮐﻪ ﮐﺪام ‪) option‬آﯾﺘﻢ( ﺗﻮﺳﻂ ﮐﺎرﺑﺮ اﻧﺘﺨﺎب ﺷﺪه اﺳﺖ؟‬ ‫ﺑﺎزﯾﺎﺑﯽ‪/‬ﺗﻐﯿﯿﺮ دادن ‪)option‬ﻫﺎ(ي اﻧﺘﺨﺎب ﺷﺪه‬ ‫ﻋﻨﺼﺮ ‪ select‬داراي ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ selectedIndex‬اﺳﺖ ﮐﻪ ‪ index‬آﯾﺘﻢ اﻧﺘﺨﺎب ﺷﺪه را ﻧﮕﻪ داري ﻣﯽ ﮐﻨﺪ و در ﺻﻮرﺗﯽ ﮐﻪ‬ ‫ﻫﯿﭻ آﯾﺘﻤﯽ اﻧﺘﺨﺎب ﻧﺸﺪه ﺑﺎﺷﺪ ﻣﻘﺪار ‪ -1‬را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪.index).push(i‬‬ ‫}‬ ‫}‬ ‫.options[1].‬‬ ‫"‪alert(oListbox.selected‬‬ ‫.)‪arrIndexes.‬‬ ‫‪alert(“The index of the selected option is “ +‬‬ ‫.selectedIndex‬‬ ‫اﻣﺎ ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ داﻧﯿﺪ ﺑﺎ اﺿﺎﻓﻪ ﮐﺮدن ﺻﻔﺘﯽ ﻣﺎﻧﻨﺪ '‪ multiple='multiple‬ﺑﻪ ﻋﻨﺼﺮ ‪ select‬اﻣﮑﺎن اﻧﺘﺨﺎب ﺑﯿﺶ از ﯾﮏ آﯾﺘﻢ‬ ‫در آنِ واﺣﺪ اﻣﮑﺎن ﭘﺬﯾﺮ اﺳﺖ‪ .options[i].value). //output value‬‬ ‫ﻋﻼوه ﺑﺮ اﯾﻦ‪ ،‬ﻫﺮ ‪ option‬داراي ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ index‬اﺳﺖ ﮐﻪ در واﻗﻊ ﻣﻮﻗﻌﯿﺖ آن را در آراﯾﻪ ‪ options‬ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪. //outputs "1‬‬ ‫اﻟﺒﺘﻪ ﭼﻮن ‪ options‬ﯾﮏ آراﯾﻪ اﺳﺖ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم ‪ length‬ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﺗﻌﺪاد ﮐﻞ ‪option‬ﻫﺎي ‪select‬‬ ‫اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪. //output display text‬‬ ‫‪alert(oListbox.length.‬ﺑﺮاي اﯾﻦ ﮐﺎر ﻧﯿﺎز ﺑﻪ ﯾﮏ ﺗﺎﺑﻊ دارﯾﻢ‪.options[1].‬در اﯾﻦ ﺻﻮرت ﺧﺎﺻﯿﺖ ‪ selectedIndex‬ﺣﺎوي اوﻟﯿﻦ ﻋﻨﺼﺮ اﻧﺘﺨﺎب ﺷﺪه از ‪ list‬ﺧﻮاﻫﺪ ﺑﻮد و اﯾﻦ‬ ‫ﮐﻤﮑﯽ ﺑﻪ ﻣﺎ ﻧﻤﯽ ﮐﻨﺪ‪.‪return arrIndexes‬‬ ‫.‪var arrIndexes = new Array‬‬ ‫{ )‪for (var i=0.ir‬‬ .options.options[1]. i < oListbox.‬‬ ‫.‬ﭼﻮن ‪ index‬ﺗﻤﺎم آﯾﺘﻢ ﻫﺎي اﻧﺘﺨﺎب ﺷﺪه اﺣﺘﯿﺎج دارﯾﻢ‪ .‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬ ‫ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺮاي ﻧﻤﺎﯾﺶ ﻣﺘﻦ )ﻋﻨﻮان( ﻫﺮ ‪ option‬و ﻣﻘﺪار ﺻﻔﺖ ‪ value‬آن ﻫﺎ از روش ﻫﺎي ﻗﺒﻠﯽ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ . i++‬‬ ‫{ )‪if (oListbox.options.‬‬ ‫{ )‪function getSelectedIndexes (oListbox‬‬ ‫.text).)”‪alert(“There are “ + oListbox.‬ﻣﺜﻼ‪:‬‬ ‫‪80‬‬ ‫‪9‬‬ ‫‪alert(oListbox.

remove(0).length == 3‬‬ ‫.‬ﺑﺮاي اﯾﻦ ﮐﺎر ﺗﺎﺑﻌﯽ ﺑﺎ ﺳﻪ آرﮔﻮﻣﺎن زﯾﺮ ﻃﺮاﺣﯽ‬ ‫ﻣﯽﮐﻨﯿﻢ‪:‬‬ ‫‪list‬ي ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ روي آن ﮐﺎر ﮐﻨﯿﻢ‪ ،‬ﻧﺎم آﯾﺘﻤﯽ ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ و ﻣﻘﺪاري ﮐﻪ ﻣﯽﺧﻮاﻫﯿﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ‪.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫اﺿﺎﻓﻪ ﮐﺮدن ‪ option‬ﻫﺎ‬ ‫ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ‪ ،‬آﯾﺘﻢ ﻫﺎي ﺟﺪﯾﺪي ﺑﻪ ‪ list‬ﻫﺎ اﺿﺎﻓﻪ ﮐﻨﯿﻢ‪ .getElementById(“selListbox‬‬ ‫‪oListbox. sValue‬‬ ‫}‬ ‫.)‪oOption.createTextNode(sName‬‬ ‫{ )‪if (arguments.‬‬ ‫ﺣﺬف ‪ option‬ﻫﺎ‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻋﻼوه ﺑﺮ اﻣﮑﺎن اﺿﺎﻓﻪ ﮐﺮدن ‪ option‬ﻫﺎ ‪ ،‬اﻣﮑﺎن ﺣﺬف آن ﻫﺎ را ﻧﯿﺰ ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ‪.createElement("option‬‬ ‫.remove‬اﺳﺖ ﮐﻪ آرﮔﻮﻣﺎن )‪ (index‬ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺑﺮاي ﺣﺬف را ﻣﯽ ﭘﺬﯾﺮد‪:‬‬ ‫.ir‬‬ .length==3‬اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪.)”‪var oListbox = document.)"‪var oOption = document.appendChild(oOption‬‬ ‫}‬ ‫ﭼﻮن ﺻﻔﺖ ‪ value‬ﺑﺮاي ﯾﮏ ‪ option‬اﺧﺘﯿﺎري اﺳﺖ ﻣﯽ ﺗﻮاﻧﯿﻢ در ﺻﻮرﺗﯽ ﮐﻪ ‪ value‬ﺑﺮاي ﺗﺎﺑﻊ ﻓﺮﺳﺘﺎده ﺷﺪه اﺳﺖ آن را ﺑﻪ‬ ‫‪ option‬اﺿﺎﻓﻪ ﮐﻨﯿﻢ‪ .‪oListbox.‬ﺑﺮاي ﭼﮏ ﮐﺮدن اﯾﻨﮑﻪ ‪ value‬ﻓﺮﺳﺘﺎده ﺷﺪه ﯾﺎ ﻧﻪ از دﺳﺘﻮر ‪ arguments.‬‬ ‫ﺑﻌﺪ ﺗﻮﺳﻂ ﻣﺘﺪﻫﺎي ﻗﺒﻠﯽ ‪ DOM‬ﯾﮏ ﻋﻨﺼﺮ ‪ option‬ﺟﺪﯾﺪ اﯾﺠﺎد ﮐﺮده و آن را ﺑﻪ ﻋﻨﺼﺮ ‪ select‬اﺿﺎﻓﻪ ﻣﯽﮐﻨﯿﻢ‪:‬‬ ‫‪81‬‬ ‫‪9‬‬ ‫{ )‪function add (oListbox.appendChild(document.)‪oListbox. iIndex‬‬ ‫.setAttribute("value".)‪oListbox.remove(iIndex‬‬ ‫}‬ ‫‪1stwebdesigner.options[1] = null‬‬ ‫روش ﺑﻬﺘﺮ و ﺟﺪﯾﺪﺗﺮ اﺳﺘﻔﺎده از ﻣﺘﺪي ﺑﻪ ﻧﺎم )(‪ . sName.‬‬ ‫ﯾﮑﯽ از روش ﻫﺎي ﻗﺪﯾﻤﯽ ﺑﺮاي اﯾﻦ ﮐﺎر اﺳﺘﻔﺎده از آراﯾﻪي ‪ options‬و ﻗﺮاردادن ﻣﻘﺪار ‪ null‬ﺑﺮاي ﻋﻨﺼﺮي از آن ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ‬ ‫ﺣﺬف ﮐﻨﯿﻢ اﺳﺖ‪:‬‬ ‫. sValue‬‬ ‫.))‪oOption. //remove the first option‬‬ ‫ﻣﯽ ﺗﻮان ﻫﻤﺎﻧﻨﺪ روش اﺿﺎﻓﻪ ﮐﺮدن ‪option‬ﻫﺎ ﺗﺎﺑﻌﯽ ﺑﺮاي ﺣﺬف آن ﻫﺎ از ‪list‬ﻫﺎ اﺳﺘﻔﺎده ﮐﺮد‪:‬‬ ‫{ )‪function del (oListbox.

i--‬‬ ‫.ir‬‬ .remove‬را ﺑﺮاي ﻫﺮ ﮐﺪام از‬ ‫‪82‬‬ ‫‪9‬‬ ‫آن ﻫﺎ ﻓﺮاﺧﻮاﻧﯽ ﮐﻨﯿﺪ‪.options.‬‬ ‫{ )‪function clear (oListbox‬‬ ‫{ )‪for (var i=oListbox.‫ﮐﺎر ﺑﺎ ﻓﺮﻣﻬﺎ و ﻋﻨﺎﺻﺮ ﻓﺮم‬ ‫ﭼﻨﺎﻧﭽﻪ ﺑﺨﻮاﻫﯿﺪ ﻫﺮ ﯾﮏ از ‪option‬ﻫﺎي ﻣﻮﺟﻮد در ﯾﮏ ‪ listbox‬را ﺣﺬف ﮐﻨﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﻣﺘﺪ )(‪ . i‬‬ ‫}‬ ‫}‬ ‫ﮐﺪ ﺑﺎﻻ ﺑﺮاي ﺣﺬف‪ ،‬آﯾﺘﻢ ﻫﺎ را ﺑﺮ ﻋﮑﺲ ﻃﯽ ﻣﯽ ﮐﻨﺪ‪ .‬اﯾﻦ ﮐﺎر اﻟﺰاﻣﯽ اﺳﺖ ﭼﺮا ﮐﻪ ﺑﺎ ﻫﺮ ﺑﺎر ﺣﺬف ﺷﺪن ﯾﮏ آﯾﺘﻢ از ﻟﯿﺴﺖ‬ ‫ﺧﺎﺻﯿﺖ ‪ index‬ﻫﺮ ‪ option‬ﺷﻤﺎره ﮔﺬاري ﻣﺠﺪد ﻣﯽ ﺷﻮد‪ . i >= 0.‬ﺑﻪ اﯾﻦ دﻟﯿﻞ ﺑﻬﺘﺮ اﺳﺖ ﻫﻤﯿﺸﻪ اول ﻋﻨﺼﺮي ﺑﺎ ﺑﺰرﮔﺘﺮﯾﻦ ‪ index‬و‬ ‫ﺳﭙﺲ ﻋﻨﺎﺻﺮ ﺑﺎ ‪ index‬ﮐﻮﭼﮑﺘﺮ ﺗﺮ ﺣﺬف ﺷﻮﻧﺪ‪.‬‬ ‫‪1stwebdesigner.)‪del(oListbox.length-1.

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

getElementById('div1‬‬ ‫{)( ‪oDiv.‬‬ ‫در روش دوم ﻣﯽ ﺗﻮاﻧﯿﻢ ﯾﮏ ﺻﻔﺖ ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪاد‪ ،‬ﮐﻪ اﺳﮑﺮﯾﭙﺘﯽ را ﺑﻪ ﻋﻨﻮان ﻣﻘﺪار ﻣﯽ ﭘﺬﯾﺮد در ﺗﮓ ﻣﺮﺑﻮﻃﻪ ﻗﺮار دﻫﯿﻢ‪ .‬‬ ‫روﯾﺪادﻫﺎي ‪ HTML‬ﮐﻪ ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻐﯿﯿﺮاﺗﯽ در ﭘﻨﺠﺮه ﻣﺮورﮔﺮ اﻧﺠﺎم ﻣﯽ ﺷﻮﻧﺪ رخ ﻣﯽ دﻫﻨﺪ‪..)'‪var oDiv = document.‬‬ ‫ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﮐﻨﺘﺮﻟﮕﺮﻫﺎي ﺣﺎدﺛﻪ ﺑﻪ دو روش ﻣﯽ ﺗﻮان ﻋﻤﻞ ﮐﺮد‪ :‬از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﯾﺎ از ﻃﺮﯾﻖ ‪..‬اﯾﻦ روﯾﺪاد ﻫﺎ ﻧﺎم ﻫﺎﯾﯽ‬ ‫ﻫﻤﭽﻮن ‪ mouseover ، load ،click‬و‪ .‬ﺑﻪ‬ ‫ﺻﻮرت زﯾﺮ‪:‬‬ ‫>‪<div onclick='alert("I Was Clicked !!!")'></div‬‬ ‫در اﯾﻦ روش ﻧﺎم ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﻫﺮ ﺷﮑﻠﯽ ﻧﻮﺷﺘﻪ ﺷﻮد‪ .‬‬ ‫روﯾﺪادﻫﺎي ‪ keyboard‬ﮐﻪ وﻗﺘﯽ ﮐﺎرﺑﺮ دﮐﻤﻪ اي از ﺻﻔﺤﻪ ﮐﻠﯿﺪ را ﻓﺸﺎر ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﻨﺪ‪.‬اﺻﻄﻼﺣﺎ ﺑﻪ ﺗﺎﺑﻌﯽ ﮐﻪ در ﭘﺎﺳﺦ ﺑﻪ ﯾﮏ روﯾﺪاد ﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﺷﻮد ﮐﻨﺘﺮﻟﮕﺮ‬ ‫روﯾﺪاد‪ 1‬ﻣﯽ ﮔﻮﯾﻨﺪ‪ ..‫روﯾﺪادﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫ﮐﻨﺘﺮل روﯾﺪادﻫﺎ‬ ‫‪84‬‬ ‫‪10‬‬ ‫ﻣﻮﻗﻌﯽ ﮐﻪ ﺻﻔﺤﻪ ﺑﺎرﮔﺬاري ﻣﯽ ﺷﻮد روﯾﺪادي رخ داده اﺳﺖ‪ ،‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ ﺑﺮ روي دﮐﻤﻪ اي ﮐﻠﯿﮏ ﻣﯽ ﮐﻨﺪ‪ ،‬ﺑﺎز ﻫﻢ روﯾﺪادي‬ ‫رخ داده اﺳﺖ‪ .)'!!! ‪alert('I Was Clicked‬‬ ‫}‬ ‫دﻗﺖ ﮐﻨﯿﺪ ﮐﻪ در اﯾﻦ روش ﺑﺎﯾﺪ ﺗﻤﺎﻣﯽ ﺣﺮوف ﻧﺎم ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪاد ﺑﻪ ﺻﻮرت ﮐﻮﭼﮏ ﻧﻮﺷﺘﻪ ﺷﻮد‪.‬ﺑﺮاي ﻣﺜﺎل‪:‬‬ ‫.onclick= function‬‬ ‫.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺗﺎﺑﻌﯽ ﮐﻪ ﺑﺮاي ﭘﺎﺳﺦ ﺑﻪ روﯾﺪاد ‪ click‬ﺻﺪا زده ﻣﯽ ﺷﻮد ﮐﻨﺘﺮﻟﮕﺮ ‪ onclick‬ﻧﺎﻣﯿﺪه ﻣﯽ ﺷﻮد‪.HTML‬‬ ‫ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﯾﮏ ﮐﻨﺘﺮﻟﮕﺮ از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺑﺘﺪا ﺑﺎﯾﺪ ﺑﻪ ﺷﯽ ﻣﻮرد ﻧﻈﺮ ارﺟﺎﻋﯽ اﯾﺠﺎد ﮐﺮده و ﺳﭙﺲ ﺗﺎﺑﻌﯽ را ﺑﻪ‬ ‫ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ آن )ﮐﻪ ﺑﻪ ﺻﻮرت ﯾﮏ ﺧﺎﺻﯿﺖ ﺑﺮاي آن ﺗﻌﺮﯾﻒ ﺷﺪه اﺳﺖ( ﻣﻨﺘﺴﺐ ﮐﻨﯿﻢ‪ .‬ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ﻣﯽ ﺗﻮاﻧﻨﺪ از اﯾﻦ روﯾﺪادﻫﺎ ﺑﺮاي اﺟﺮاي ﮐﺪﻫﺎﯾﯽ ﮐﻪ ﺑﻪ روﯾﺪادﻫﺎ ﭘﺎﺳﺦ ﻣﯽ دﻫﻨﺪ اﺳﺘﻔﺎده ﮐﻨﻨﺪ‪ .‬در ﻧﺘﯿﺠﻪ ‪ onclick‬ﻣﻌﺎدل اﺳﺖ ﺑﺎ‪ OnClick :‬ﯾﺎ‬ ‫‪.‬دارﻧﺪ‪ .‬‬ ‫روﯾﺪادﻫﺎي ‪mouse‬‬ ‫راﯾﺞ ﺗﺮﯾﻦ روﯾﺪادﻫﺎﯾﯽ ﻫﺴﺘﻨﺪ ﮐﻪ رخ ﻣﯽ دﻫﻨﺪ و ﺑﻪ ﺷﺮح زﯾﺮ ﻣﯽ ﺑﺎﺷﻨﺪ‪:‬‬ ‫‪Event Handler‬‬ ‫‪1‬‬ ‫‪1stwebdesigner.‬‬ ‫روﯾﺪادﻫﺎي ﺗﻐﯿﯿﺮ ﮐﻪ زﻣﺎﻧﯽ ﮐﻪ ﺗﻐﯿﯿﺮاﺗﯽ در ﺳﺎﺧﺘﺎر ‪ DOM‬ﺻﻔﺤﻪ اﻧﺠﺎم ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﻨﺪ‪.‬‬ ‫روﯾﺪادﻫﺎ در واﻗﻊ ﻋﻤﻠﯿﺎت ﺧﺎﺻﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﯾﺎ ﺗﻮﺳﻂ ﮐﺎرﺑﺮ ﯾﺎ ﺗﻮﺳﻂ ﺧﻮد ﻣﺮورﮔﺮ اﻧﺠﺎم ﻣﯽ ﺷﻮﻧﺪ‪ .ir‬‬ .ONCLICK‬‬ ‫اﻧﻮاع روﯾﺪاد ﻫﺎ‬ ‫روﯾﺪادﻫﺎﯾﯽ ﮐﻪ در ﻣﺮورﮔﺮ رخ ﻣﯽ دﻫﻨﺪ ﻣﻌﻤﻮﻻ ﺑﻪ ﭼﻨﺪ دﺳﺘﻪ زﯾﺮ ﺗﻘﺴﯿﻢ ﺑﻨﺪي ﻣﯽ ﺷﻮﻧﺪ‪:‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫روﯾﺪادﻫﺎي ‪ mouse‬ﮐﻪ وﻗﺘﯽ ﮐﺎرﺑﺮ از ﻃﺮﯾﻖ ﻣﺎوس ﺧﻮد ﮐﺎرﻫﺎﯾﯽ را اﻧﺠﺎم ﻣﯽ دﻫﺪ‪ ،‬رخ ﻣﯽ دﻫﻨﺪ‪.‬ﻣﺜﻼ‬ ‫دﮐﻤﻪ اي ﻣﻮﺟﺐ ﺑﺴﺘﻦ ﭘﻨﺠﺮه ﺷﻮد‪ ،‬ﭘﯿﻐﺎﻣﯽ را ﺑﻪ ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ دﻫﺪ‪ ،‬داده ﻫﺎ را اﻋﺘﺒﺎرﺳﻨﺠﯽ ﮐﻨﺪ و‪...

‬ﮐﻠﯿﺪﻫﺎي ‪ ctrl ،alt ،enter‬و‬ ‫‪ shift‬ﻣﻮﺟﺐ روﺧﺪاد اﯾﻦ روﯾﺪاد ﻧﻤﯽ ﺷﻮﻧﺪ‪(.‬‬ ‫‪ :dblclick ‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ دو ﺑﺎر دﮐﻤﻪ ﭼﭗ ﻣﺎوس را ﮐﻠﯿﮏ ﻣﯽ ﮐﻨﺪ رخ ﻣﯽ دﻫﺪ‪.‬‬ ‫‪ :mousemove ‬ﻣﮑﺮرا ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس ﺑﺮ روي ﻋﻨﺼﺮي اﺳﺖ رخ ﻣﯽ دﻫﺪ‪.‬‬ ‫‪ :mousedown ‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻫﺮ دﮐﻤﻪ اي از ﻣﺎوس را ﻓﺸﺎر دﻫﺪ رخ ﻣﯽ دﻫﺪ‪.3‬‬ ‫‪.‬اﯾﻦ روﯾﺪاد ﻣﮑﺮرا زﻣﺎﻧﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ اي را ﭘﺎﯾﯿﻦ ﻧﮕﻪ ﻣﯽ دارد ﻧﯿﺰ رخ ﻣﯽ دﻫﺪ‪).‬‬ ‫‪1stwebdesigner.‬اﯾﻦ روﯾﺪاد ﻣﮑﺮرا زﻣﺎﻧﯽ ﮐﻪ دﮐﻤﻪ اي ﭘﺎﯾﯿﻦ‬ ‫ﻧﮕﻪ داﺷﺘﻪ ﺷﻮد ﻧﯿﺰ رخ ﻣﯽ دﻫﺪ‪).‬‬ ‫روﯾﺪادﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ‬ ‫روﯾﺪاد ﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ ﺑﻪ واﺳﻄﻪ ﻋﻤﻠﯿﺎﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ ﺑﺮ روي ﺻﻔﺤﻪ ﮐﻠﯿﺪ اﻧﺠﺎم ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﻨﺪ‪ .‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫‪ :click ‬ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ ﭼﭗ ﻣﺎوس را ﻓﺸﺎر ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﺪ‪) .2‬‬ ‫‪.‬اﯾﻦ روﯾﺪاد ﻫﻤﯿﺸﻪ ﻗﺒﻞ از ‪ keypress‬رخ ﻣﯽ دﻫﺪ‪(.‬‬ ‫درﻫﻨﮕﺎم اﺟﺮاي روﯾﺪاد ‪ dblclick‬روﯾﺪادﻫﺎي زﯾﺮ ﺑﻪ ﺗﺮﺗﯿﺐ اﺟﺮا ﻣﯽ ﺷﻮﻧﺪ‪:‬‬ ‫‪.‬‬ ‫‪ :mouseover ‬ﻣﻮﻗﻌﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس از ﺧﺎرج از ﻋﻨﺼﺮ ﺑﺮ روي ان ﻫﺪاﯾﺖ ﻣﯽ ﺷﻮد‪.‬‬ ‫‪ :mouseout ‬ﻣﻮﻗﻌﯽ رخ ﻣﯿﺪﻫﺪ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس ﺑﺮ روي ﻋﻨﺼﺮ اﺳﺖ و ﮐﺎرﺑﺮ آن را ﺑﻪ ﺑﯿﺮون از ﻣﺤﺪوده ﻋﻨﺼﺮ ﻫﺪاﯾﺖ‬ ‫ﻣﯿﮑﻨﺪ‪.5‬‬ ‫‪.‬ﻧﻪ دﮐﻤﻪ راﺳﺖ(‪ .‬‬ ‫‪85‬‬ ‫‪10‬‬ ‫ﺗﺮﺗﯿﺐ اﺟﺮاﯾﯽ روﯾﺪادﻫﺎ‬ ‫ﻗﺒﻞ از رﺧﺪاد روﯾﺪاد ‪ click‬ﻫﻤﯿﺸﻪ اﺑﺘﺪا روﯾﺪاد ‪ mousedown‬و در ﭘﯽ آن ‪ mouseup‬و آﺧﺮ ﺳﺮ ‪ click‬رخ ﻣﯽ دﻫﺪ‪.7‬‬ ‫‪mousedown‬‬ ‫‪mouseup‬‬ ‫‪click‬‬ ‫‪mousedown‬‬ ‫‪mouseup‬‬ ‫‪click‬‬ ‫‪dblclick‬‬ ‫ﻫﻨﮕﺎم ﺟﺎ ﺑﻪ ﺟﺎ ﺷﺪن ﻧﺸﺎﻧﮕﺮ ﻣﺎوس از ﯾﮏ ﻋﻨﺼﺮ ﺑﺮ روي ﻋﻨﺼﺮ دﯾﮕﺮ‪ ،‬اﺑﺘﺪا روﯾﺪاد ‪ mouseout‬ﺳﭙﺲ روﯾﺪاد ‪mousemove‬‬ ‫ﺑﺮاي ﻋﻨﺼﺮ ﺑﯿﻦ اﯾﻦ دو و آﺧﺮ ﺳﺮ‪ ،‬روﯾﺪاد ‪ mouseover‬رخ ﻣﯽ دﻫﺪ‪.‬‬ ‫‪ :mouseup ‬ﻣﻮﻗﻌﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻫﺮدﮐﻤﻪ اي از ﻣﺎوس رﻫﺎ ﻣﯽ ﺷﻮد‪.4‬‬ ‫‪.‬‬ ‫‪ :keyup‬ﻫﻨﮕﺎﻣﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ دﮐﻤﻪ اي ﮐﻪ ﭘﺎﯾﯿﻦ ﺑﻮده اﺳﺖ رﻫﺎ ﺷﻮد‪.‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ‬ ‫ﺑﺮ روي ﯾﮏ دﮐﻤﻪ ﺑﺎﺷﺪ و ﮐﺎرﺑﺮ ﮐﻠﯿﺪ ‪ enter‬را ﻫﻢ ﺑﺰﻧﺪ اﯾﻦ روﯾﺪاد رخ ﻣﯽ دﻫﺪ‪.ir‬‬ .1‬‬ ‫‪.‬‬ ‫ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﯾﮏ ﺻﻔﺤﻪ از روﯾﺪادﻫﺎي ﻓﻮق ﺑﻪ ﺧﻮﺑﯽ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ‪.‬‬ ‫‪ :keypress‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﻠﯿﺪي از ﺻﻔﺤﻪ ﮐﻠﯿﺪ زده ﻣﯽ ﺷﻮد و ﺑﻪ ﻣﻮﺟﺐ آن ﯾﮏ ﮐﺎراﮐﺘﺮ ﺑﺮﮔﺮداﻧﺪه ﻣﯽ ﺷﻮد رخ ﻣﯽ‬ ‫دﻫﺪ‪ .‬روﯾﺪاد ﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ‬ ‫ﺑﻪ ﺷﺮح زﯾﺮ ﻣﯽ ﺑﺎﺷﻨﺪ‪:‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪ :keydown‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﻠﯿﺪي از ﺻﻔﺤﻪ ﮐﻠﯿﺪ زده ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﺪ‪ .6‬‬ ‫‪.

٢‬‬ ‫اﮔﺮ ﮐﺎرﺑﺮ ﮐﻠﯿﺪي ﮐﺎراﮐﺘﺮي را ﻓﺸﺎرداده و ﭘﺎﯾﯿﻦ ﻧﮕﻪ دارد روﯾﺪادﻫﺎي ‪ keypress‬و ‪ keydown‬ﻣﮑﺮرا ﯾﮑﯽ ﭘﺲ از دﯾﮕﺮي رخ‬ ‫ﻣﯽ دﻫﻨﺪ ﺗﺎ زﻣﺎﻧﯽ ﮐﻪ ﮐﻠﯿﺪ رﻫﺎ ﺷﻮد‪.‬اﯾﻦ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﻣﻮﺟﺐ زدن دﮐﻤﻪ ‪X‬‬ ‫)‪ (close‬ﭘﻨﺠﺮه ﯾﺎ وارد ﮐﺮدن ﯾﮏ آدرس ﺟﺪﯾﺪ در ﻧﻮار آدرس ﻣﺮورﮔﺮ ﺑﺎﺷﺪ‪.‬‬ ‫دﯾﮕﺮ روﯾﺪاد ﻫﺎ‬ ‫از دﯾﮕﺮ روﯾﺪادﻫﺎﯾﯽ ﮐﻪ ﻣﻤﮑﻦ اﺳﺖ در ﺻﻔﺤﻪ و ﺑﺮ روي ﺑﻌﻀﯽ از ﻋﻨﺎﺻﺮ رخ دﻫﺪ ﻣﯽ ﺗﻮان ﺑﻪ ﻣﻮارد زﯾﺮ اﺷﺎره ﻧﻤﻮد‪:‬‬ ‫‪‬‬ ‫‪ :load‬ﻣﻮﻗﻌﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﺻﻔﺤﻪ ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ ﺑﺎرﮔﺬاري ﺷﻮد ﯾﺎ اﯾﻨﮑﻪ ﯾﮏ ﻋﻨﺼﺮ ‪ img‬ﯾﺎ ‪ object‬ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ‬ ‫ﺑﺎرﮔﺬاري ﺷﻮﻧﺪ‪ .‬‬ ‫‪ :change‬ﺑﺮ روي ﯾﮏ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ‪ ،‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻣﻘﺪار داﺧﻞ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ ﺗﻐﯿﯿﺮ ﮐﺮده و در اداﻣﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از روي‬ ‫ﻋﻨﺼﺮ ﺧﺎرج ﺷﻮد و ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ ‪ select‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻣﻘﺪار آن ﺗﻐﯿﯿﺮ ﻣﯽ ﮐﻨﺪ رخ ﻣﯽ دﻫﻨﺪ‪.‬‬ ‫‪ :submit‬ﺑﺮاي ﻋﻨﺼﺮ ‪ ،form‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ دﮐﻤﻪ ‪ submit‬ﻣﺮﺑﻮط ﺑﻪ ﻓﺮم ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﺪ‪.ir‬‬ .‬‬ ‫‪ :error‬اﯾﻦ روﯾﺪاد ﺑﺮاي ﯾﮏ ﺻﻔﺤﻪ ﻫﻨﮕﺎﻣﯽ ﮐﻪ در آن ﯾﮏ ﺧﻄﺎ رخ ﻣﯽ دﻫﺪ‪ ،‬ﺑﺮاي ﯾﮏ ﻋﮑﺲ ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺘﻮاﻧﺪ‬ ‫ﺑﺎرﮔﺬاري ﺷﻮد و ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ ‪ object‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺘﻮاﻧﺪ ﺑﺎرﮔﺬاري ﺷﻮد رخ ﻣﯽ دﻫﺪ‪.3‬‬ ‫اﮔﺮ ﮐﻠﯿﺪي ﻏﯿﺮ ﮐﺎراﮐﺘﺮي ﻣﺜﻞ ‪ shift‬ﻓﺸﺎر داده ﺷﻮد روﯾﺪا ﻫﺎي زﯾﺮ ﺑﻪ ﺗﺮﺗﯿﺐ اﺟﺮا ﻣﯽ ﺷﻮﻧﺪ‪:‬‬ ‫‪keydown .‬‬ ‫‪ :blur‬ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ زﻣﺎﻧﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ را از دﺳﺖ ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﺪ‪.1‬‬ ‫‪keypress .‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪ :unload‬ﻫﻨﮕﺎﻣﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﺻﻔﺤﻪ ﺑﺎر ﺷﺪه ﺟﺎري را ﺑﺒﻨﺪد‪ .2‬‬ ‫‪keyup .‬‬ ‫‪ :select‬اﯾﻦ روﯾﺪاد ﻫﻨﮕﺎﻣﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﯾﮏ ﯾﺎ ﭼﻨﺪ ﮐﺎراﮐﺘﺮ را از داﺧﻞ ﯾﮏ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ )ﻣﻨﻈﻮر ﺗﮓ ﻫﺎي‬ ‫‪ textarea‬و ‪ (input‬اﻧﺘﺨﺎب ﮐﻨﺪ رخ ﻣﯽ دﻫﺪ‪.‬‬ ‫‪ :focus‬ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ زﻣﺎﻧﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﺑﺮ روي آن ﻗﺮار ﻣﯽ ﮔﯿﺮد رخ ﻣﯽ دﻫﺪ‪.‬ﺑﺮاي ﻓﻌﺎل ﮐﺮدن ﮐﻨﺘﺮﻟﮕﺮﻫﺎي روﯾﺪاد ‪ onload‬ﺑﺮاي ﺻﻔﺤﻪ آن را در دﺳﺘﻮر >‪ <body‬ﻗﺮار ﻣﯽ دﻫﯿﻢ‪.‬‬ ‫اﮔﺮ ﮐﺎرﺑﺮ ﮐﻠﯿﺪي ﻏﯿﺮ ﮐﺎراﮐﺘﺮي را ﻓﺸﺎرداده و ﭘﺎﯾﯿﻦ ﻧﮕﻪ دارد ﻓﻘﻂ روﯾﺪاد ‪ keydown‬ﻣﮑﺮرا اﺟﺮا ﻣﯽ ﺷﻮد‪.‫روﯾﺪادﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫ﺗﺮﺗﯿﺐ اﺟﺮاﯾﯽ روﯾﺪاد ﻫﺎي ﺻﻔﺤﻪ ﮐﻠﯿﺪ‬ ‫‪86‬‬ ‫‪10‬‬ ‫ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ ﯾﮏ ﮐﻠﯿﺪ ﮐﺎراﮐﺘﺮي را در ﺻﻔﺤﻪ ﮐﻠﯿﺪ ﻓﺸﺎر ﻣﯽ دﻫﺪ روﯾﺪا ﻫﺎي زﯾﺮ ﺑﻪ ﺗﺮﺗﯿﺐ اﺟﺮا ﻣﯽ ﺷﻮﻧﺪ‪:‬‬ ‫‪keydown .1‬‬ ‫‪keyup .‬‬ ‫ﺑﺮاي ﻣﺜﺎل در ﻋﺒﺎرت زﯾﺮ از اﯾﻦ روﯾﺪاد اﺳﺘﻔﺎده ﮐﺮده اﯾﻢ ﺗﺎ ﭘﺲ از ﺧﺎﺗﻤﻪ ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ ﭘﯿﻐﺎم ‪loading complete‬‬ ‫ﻧﻤﺎﯾﺶ داده ﺷﻮد‪:‬‬ ‫>‪<body onload='alert("loading complete !!!")'></body‬‬ ‫اﯾﻦ روﯾﺪاد ﺑﺮاي ﺗﮓ ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ iframe ،img ،embed ،body‬و ‪ script‬ﻗﺎﺑﻞ اﺳﺘﻔﺎده اﺳﺖ‪.‬‬ ‫‪1stwebdesigner.‬‬ ‫‪ :abort‬اﯾﻦ روﯾﺪاد ﺑﺮاي ﯾﮏ ‪ object‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻗﺒﻞ از ﺑﺎرﮔﺬاري ﮐﺎﻣﻞ آن ‪ ،‬ﻋﻤﻞ ﺑﺎرﮔﺬاري را ﻣﺘﻮﻗﻒ ﮐﻨﺪ رخ‬ ‫ﻣﯽ دﻫﺪ‪.‬‬ ‫‪ :reset‬ﺑﺮاي ﻋﻨﺼﺮ ‪ ،form‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ دﮐﻤﻪ ‪ reset‬ﻣﺮﺑﻮط ﺑﻪ ﻓﺮم ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﺪ‪.

onclick = function (oEvent‬‬ ‫‪.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫ﺷﯽ ‪event‬‬ ‫ﺷﯽ ‪ event‬ﮐﻪ در ﻧﺴﺨﻪ ‪ 1.‬‬ ‫ﺑﻌﻀﯽ از اﻃﻼﻋﺎﺗﯽ ﮐﻪ اﯾﻦ ﺷﯽ در اﺧﺘﯿﺎر ﻗﺮار ﻣﯽ دﻫﺪ ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ‪:‬‬ ‫‪87‬‬ ‫‪10‬‬ ‫‪ ‬ﺷﯽ اي ﮐﻪ ﻣﻮﺟﺐ رﺧﺪاد روﯾﺪاد ﺷﺪه اﺳﺖ‪..‪var oEvent = window.‬ﺑﻌﺪ از اﯾﻨﮑﻪ ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪاد ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ اﺟﺮا ﺷﺪ‪ ،‬ﺷﯽ ‪ event‬ﻧﯿﺰ از ﺑﯿﻦ ﺧﻮاﻫﺪ رﻓﺖ‪.event‬‬ ‫}‬ ‫اﮔﺮ ﭼﻪ اﯾﻦ ﺷﯽ ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﺧﻮاص ‪ window‬ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮد اﻣﺎ ﻓﻘﻂ زﻣﺎﻧﯽ در دﺳﺘﺮس اﺳﺖ ﮐﻪ روﯾﺪادي رخ داده‬ ‫ﺑﺎﺷﺪ‪ .]‪var oEvent = arguments[0‬‬ ‫}‬ ‫اﻟﺒﺘﻪ ﻣﯽ ﺗﻮان ﻧﺎﻣﯽ ﺑﺮاي اﯾﻦ آرﮔﻮﻣﺎن ﻣﺸﺨﺺ ﮐﺮد و از آن ﺑﺮاي دﺳﺘﺮﺳﯽ اﺳﺘﻔﺎده ﻧﻤﻮد‪:‬‬ ‫{ )‪oDiv..‬اﯾﻦ ﺑﺪﯾﻦ ﻣﻌﻨﯽ اﺳﺖ ﮐﻪ ﯾﮏ‬ ‫ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪاد ﺑﻪ ﻃﺮﯾﻖ زﯾﺮ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﺷﯽ ‪ event‬دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﺪ‪:‬‬ ‫{ )( ‪oDiv.onclick = function‬‬ ‫.onclick = function‬‬ ‫.2‬و ﺑﺎﻻﺗﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ در دﺳﺘﺮس ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ‪ ،‬ﺷﯽ ﺧﺎﺻﯽ اﺳﺖ ﮐﻪ ﺑﻪ ﻫﻤﺮاه ﻫﺮ روﯾﺪاد‬ ‫ﺑﺮاي ﮐﻨﺘﺮﻟﮕﺮ آن روﯾﺪاد ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد‪ .ir‬‬ .‬‬ ‫اﻣﺎ در اﺳﺘﺎﻧﺪاردﻫﺎي ‪ DOM‬ﻣﯽ ﺗﻮان از روش دﺳﺘﺮﺳﯽ ﺑﻪ آرﮔﻮﻣﺎن ﺗﺎﺑﻊ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﺷﯽ ‪ event‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ .‬در واﻗﻊ ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪاد ﻣﯽ ﺗﻮاﻧﺪ آن را ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﭘﺎراﻣﺘﺮﻫﺎ درﯾﺎﻓﺖ ﮐﻨﺪ و‬ ‫ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ ‪ event‬اﻃﻼﻋﺎﺗﯽ را در ﻣﻮرد آن روﯾﺪاد در دﺳﺘﺮس ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﺎن ﻗﺮار ﻣﯽ دﻫﺪ‪.‬‬ ‫‪ ‬اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﻧﺸﺎﻧﮕﺮ ﻣﺎوس درﻫﻨﮕﺎم رﺧﺪاد روﯾﺪاد‬ ‫‪ ‬اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﺻﻔﺤﻪ ﮐﻠﯿﺪ در ﻫﻨﮕﺎم رﺧﺪاد روﯾﺪاد‬ ‫ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﯾﻦ ﺷﯽ ﻣﯽ ﺗﻮان ﺑﻪ ﭼﻨﺪﯾﻦ ﻃﺮﯾﻖ ﻋﻤﻞ ﮐﺮد‪:‬‬ ‫در ‪ ،Internet Explorer‬اﯾﻦ ﺷﯽ ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﺧﻮاص ﺷﯽ ‪ window‬ﻗﺎﺑﻞ دﺳﺘﺮﺳﯽ اﺳﺖ‪ .‬‬ ‫}‬ ‫‪1stwebdesigner.‬ﺑﻪ ﻋﻨﻮان‬ ‫ﻣﺜﺎل‪:‬‬ ‫{ )( ‪oDiv.

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

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

escape‬ﯾﮏ رﺷﺘﻪ را درﯾﺎﻓﺖ ﮐﺮده و ﺗﻤﺎﻣﯽ ﮐﺎراﮐﺘﺮﻫﺎي ﻧﺎﻣﻌﺘﺒﺮ آن را ﺑﻪ‬ ‫ﮐﺪ ﻣﻌﺎدﻟﺶ ﺗﺒﺪﯾﻞ ﻣﯽ ﮐﻨﺪ‪ .‬ﻣﻘﺪاري ﮐﻪ‬ ‫ﺑﻪ اﯾﻦ ﺧﺎﺻﯿﺖ داده ﻣﯽ ﺷﻮد ﻣﯽ ﺑﺎﯾﺴﺖ ﺗﺎرﯾﺨﯽ ﺑﻪ ﻓﺮﻣﺖ ﺑﺎزﮔﺸﺘﯽ از ﻣﺘﺪ‬ ‫)(‪ toGMTString‬ﺷﯽ ‪ Date‬ﺑﺎﺷﺪ‪ .‬‬ ‫اﯾﻦ ﺧﺎﺻﯿﺖ اﺧﺘﯿﺎري زﻣﺎن اﻧﻘﻀﺎي ﮐﻮﮐﯽ را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ‪ .cookie = " username = ali . expires=Date .‬ﻗﺒﻞ از ﮐﺪ ﻣﻌﺎدل ﯾﮏ ﻋﻼﻣﺖ ‪ %‬ﻗﺮار ﻣﯽ ﮔﯿﺮد‪ .com‬‬ ‫در ﻣﺜﺎل زﯾﺮ ﯾﮏ ﮐﻮﮐﯽ ﺑﺎ ﻧﺎم ‪ username‬و ﺑﺎ ﻣﻘﺪار ‪ ali‬ﮐﻪ در ﺗﺎرﯾﺦ ‪ 15/02/2010‬از ﺑﯿﻦ ﻣﯽ رود اﯾﺠﺎد ﻣﯽ ﺷﻮد ‪:‬‬ ‫. expires = 15/02/2010 00:00:00‬‬ ‫در ﻣﺜﺎل زﯾﺮ ﯾﮏ ﮐﻮﮐﯽ ﺑﺎ ﻧﺎم ‪ myCookie‬و ﺑﺎ ﻣﻘﺪار ‪ this is my cookie‬اﯾﺠﺎد ﺷﺪه اﺳﺖ‪:‬‬ ‫.cookie‬ﺷﯽ ‪ document‬ﺑﻪ ﺷﮑﻞ زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪:‬‬ ‫.‫ﮐﺎر ﺑﺎ ﮐﻮﮐﯽ ﻫﺎ‬ ‫اﯾﺠﺎد ﮐﻮﮐﯽ ﻫﺎ‬ ‫‪90‬‬ ‫ﺑﺮاي اﯾﺠﺎد ﮐﻮﮐﯽﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﺧﺎﺻﯿﺖ ‪ .‬‬ ‫‪1stwebdesigner.cookie="name=value .‬‬ ‫ﺧﺎﺻﯿﺖ‬ ‫ﺗﻮﺿﯿﺤﺎت‬ ‫ﻣﺜﺎل‬ ‫‪name=value‬‬ ‫اﯾﻦ دﺳﺘﻮر ﻧﺎم و ﻣﻘﺪار ﮐﻮﮐﯽ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫‪name=ali‬‬ ‫‪expires=date‬‬ ‫‪path=path‬‬ ‫‪domain=domain‬‬ ‫=‪expires‬‬ ‫‪13/06/2003 00:00:00‬‬ ‫‪path=/tutorials/‬‬ ‫‪domain = mysite." ‪document.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﯾﻦ ﺗﺎﺑﻊ‬ ‫ﮐﺎراﮐﺘﺮ ‪ space‬را ﺑﻪ ﮐﺪ ‪ %20‬ﺗﺒﺪﯾﻞ ﻣﯽ ﮐﻨﺪ‪ .encodeURIComponent‬‬ ‫اﺳﺖ‪.cookie‬‬ ‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ در دﺳﺘﻮر اﺑﺘﺪاﯾﯽ ﻣﯽ ﺑﯿﻨﯿﺪ ﺑﺮاي اﯾﺠﺎد ﮐﻮﮐﯽ ﻣﯽ ﺑﺎﯾﺴﺖ رﺷﺘﻪ اي ﺣﺎوي ﯾﮑﺴﺮي ﺧﻮاص و ﻣﻘﺎدﯾﺮﺷﺎن را در ﻗﺎﻟﺐ‬ ‫ﺟﻔﺖ ﻫﺎي ‪) name=value‬ﮐﻪ ﺑﺎ . path = path‬‬ ‫.ir‬‬ . ‪document.‬‬ ‫اﯾﻦ ﺧﺎﺻﯿﺖ اﺧﺘﯿﺎري ﻧﺎم ﻣﺴﯿﺮي از ﺳﺎﯾﺖ را ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﮐﻮﮐﯽ‬ ‫دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﺪ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.cookie‬ﻧﺴﺒﺖ دﻫﯿﻢ‪ . از ﻫﻢ ﺟﺪا ﺷﺪه اﻧﺪ( ﺑﻪ ﺧﺎﺻﯿﺖ ‪ .‬اﯾﻦ ﺗﺎﺑﻊ ﻣﻌﺎدل ﺗﺎﺑﻊ )(‪.‬‬ ‫اﯾﻦ ﺧﺎﺻﯿﺖ اﺧﺘﯿﺎري ﻧﺎم ﺳﺎﯾﺘﯽ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ از ﮐﻮﮐﯽ اﺳﺘﻔﺎده ﮐﻨﺪ را‬ ‫ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ‪.‪var x = document.)”‪document."‪domain=domain‬‬ ‫‪11‬‬ ‫و ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﺗﻤﺎﻣﯽ ﮐﻮﮐﯽ ﻫﺎي از ﻗﺒﻞ اﯾﺠﺎد ﺷﺪه ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﺧﻮاﻫﯿﻢ ﮐﺮد‪:‬‬ ‫.‬در ﺻﻮرﺗﯽ ﮐﻪ اﯾﻦ ﺧﺎﺻﯿﺖ‬ ‫ﻣﺸﺨﺺ ﻧﺸﻮد ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﺎرﺑﺮ ﭘﻨﺠﺮه ﻣﺮورﮔﺮ را ﺑﺒﻨﺪد ﮐﻮﮐﯽ ﻧﯿﺰ از ﺑﯿﻦ‬ ‫ﺧﻮاﻫﺪ رﻓﺖ‪.cookie = “myCookie=” + escape(“This is my Cookie‬‬ ‫‪‬‬ ‫ﻧﮑﺘﻪ‪ :‬در ﮐﺪ ﻓﻮق ﺗﺎﺑﻊ )(‪ .‬در ﺟﺪول زﯾﺮ ﻫﺮ ﯾﮏ از اﯾﻦ ﻗﺴﻤﺖ‬ ‫ﻫﺎ را ﺷﺮح ﻣﯽ دﻫﯿﻢ‪.

expires=" +‬‬ ‫.1‬‬ ‫‪document. // current date & time‬‬ ‫.‪document.]‪firstCookie.getTime() .]‪firstCookie.)".‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي‬ ‫ﭼﺎپ ﻣﻘﺪار ﮐﻮﮐﯽ ﻫﺎي ﻓﻮق ﻣﯽ ﺗﻮان ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﺮد‪:‬‬ ‫. از ﻫﻢ ﺟﺪا‬ ‫ﺷﺪه اﻧﺪ ﺑﺮﻣﯽ ﮔﺮداﻧﺪ‪ .)(‪cookie_date.‫آﻣﻮزش ﮐﺎرﺑﺮدي ﺟﺎوااﺳﮑﺮﯾﭙﺖ – اﺣﻤﺪ ﺑﺎدﭘﯽ‬ ‫ﺣﺬف ﮐﻮﮐﯽ ﻫﺎ‬ ‫ﺑﺮاي ﺣﺬف ﯾﮏ ﮐﻮﮐﯽ ﻣﯽ ﺗﻮان از ﺗﺎﺑﻌﯽ ﮐﻪ زﻣﺎن اﻧﻘﻀﺎي ﮐﻮﮐﯽ را ﺑﻪ ﯾﮏ ﺛﺎﻧﯿﻪ ﻗﺒﻞ ﺗﻨﻈﯿﻢ ﻣﯽ ﮐﻨﺪ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ .cookie = cookie_name += "=.split‬‬ ‫.‬ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﮐﻮﮐﯽﻫﺎﯾﯽ‬ ‫ﮐﻪ ﻗﺒﻼ اﯾﺠﺎد ﺷﺪه اﻧﺪ ﺑﺎز ﻫﻢ از ﺧﺎﺻﯿﺖ ‪ .split("=")[0‬‬ ‫. password=abc123‬‬ ‫در اﯾﻦ ﻣﺜﺎل دو ﮐﻮﮐﯽ از ﻗﺒﻞ اﯾﺠﺎد ﺷﺪه اﺳﺖ‪ :‬ﯾﮑﯽ ﺑﺎ ﻧﺎم ‪ username‬و ﻣﻘﺪار ‪ ali‬و دوﻣﯽ ﺑﺎ ﻧﺎم ‪ password‬ﺑﺎ ﻣﻘﺪار‬ ‫‪.setTime ( cookie_date.split("=")[1‬‬ ‫=‬ ‫=‬ ‫‪Var nameOfFirstCookie‬‬ ‫‪Var valueOfFirstCookie‬‬ ‫.‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻣﺘﻐﯿﺮ ‪ x‬ﻣﯽ ﺗﻮاﻧﯿﺪ ﺣﺎوي رﺷﺘﻪ اي ﺑﻪ ﺻﻮرت زﯾﺮ ﺑﺎﺷﺪ‪:‬‬ ‫"‪"username=ali.]‪cookieParts[1‬‬ ‫=‬ ‫=‬ ‫=‬ ‫=‬ ‫‪allCookie‬‬ ‫‪cookieParts‬‬ ‫‪fistCookie‬‬ ‫‪secondCookie‬‬ ‫‪var‬‬ ‫‪Var‬‬ ‫‪Var‬‬ ‫‪Var‬‬ ‫.]‪cookieParts[0‬‬ ‫.]‪firstCookie."(‪allCookie.]‪firstCookie.split("=")[0‬‬ ‫.cookie‬‬ ‫.‬دﺳﺘﻮر زﯾﺮ ﮐﻮﮐﯽ ﺑﺎ ﻧﺎم ‪ username‬را ﺣﺬف ﻣﯽ ﮐﻨﺪ‪:‬‬ ‫. )"‪delete_cookie ("username‬‬ ‫ﺑﺎزﯾﺎﺑﯽ ﮐﻮﮐﯽ ﻫﺎ‬ ‫ﺣﺎل ﮐﻪ ﺑﺎ اﯾﺠﺎد و ﺣﺬف ﮐﺮدن ﮐﻮﮐﯽ ﻫﺎ آﺷﻨﺎ ﺷﺪﯾﻢ ﻧﺤﻮه ﺑﺎزﯾﺎﺑﯽ )دﺳﺘﺮﺳﯽ( ﺑﻪ آﻧﻬﺎ را ﺑﯿﺎن ﻣﯽ ﮐﻨﯿﻢ‪ .abc123‬‬ ‫اﮐﻨﻮن ‪ x‬ﯾﮏ ﻣﺘﻐﯿﺮ رﺷﺘﻪ اي ﺳﺎده اﺳﺖ ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻫﺮ ﯾﮏ از ﮐﻮﮐﯽ ﻫﺎ و ﻣﻘﺪارﺷﺎن اﺑﺘﺪا ‪ x‬را ﺑﻮﺳﯿﻠﻪ ﻣﺘﺪ‬ ‫‪ split‬ﺷﯽ ‪ string‬ﺑﻪ آراﯾﻪ اي ﺗﺒﺪﯾﻞ ﮐﺮده و ﺑﻮﺳﯿﻠﻪ ﻣﺘﺪﻫﺎي ﺧﺎص آراﯾﻪ ﺑﻪ آن ﻫﺎ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ‪ .toGMTString‬‬ ‫}‬ ‫‪91‬‬ ‫‪11‬‬ ‫ﺣﺎل ﮐﺎﻓﯽ اﺳﺖ ﺑﺮاي ﺣﺬف ﯾﮏ ﮐﻮﮐﯽ ﻧﺎم آن را ﺑﺮاي ﺗﺎﺑﻊ ﻓﻮق ﺑﻔﺮﺳﺘﯿﻢ‪ .‪var x = document.cookie‬‬ ‫اﯾﻦ دﺳﺘﻮر ﻟﯿﺴﺘﯽ )رﺷﺘﻪ( از ﺟﻔﺖ ﻫﺎي ‪ name=value‬ﺗﻤﺎﻣﯽ ﮐﻮﮐﯽﻫﺎي ﻗﺎﺑﻞ دﺳﺘﺮس ﺑﺮاي ﺳﻨﺪ ﺟﺎري را ﮐﻪ ﺑﺎ .ir‬‬ .cookie‬ﺷﯽ ‪ document‬ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ‪:‬‬ ‫.‬اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ‬ ‫ﺻﻮرت زﯾﺮ اﺳﺖ‪:‬‬ ‫) ‪function delete_cookie ( cookie_name‬‬ ‫{‬ ‫‪var cookie_date = new Date ( ).split("=")[1‬‬ ‫=‬ ‫=‬ ‫‪Var nameOfSecondCookie‬‬ ‫‪Var valueOfSecondCookie‬‬ ‫‪1stwebdesigner.) ‪cookie_date.

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.