Professional Documents
Culture Documents
Javascript Tutorial WWW - Amozeshfarsi.ir
Javascript Tutorial WWW - Amozeshfarsi.ir
ir | آﻣوزش ﻓﺎرﺳﯽ
jS.Milieu
^
JavaScript*J
\s oi» T0m
: OAjuujuCp
: ﻧﻮﯾﺴﻨﺪ ه
ﻣﯿﺜﻢ ﺷﺎدﮐﺎم
\ www.AmozeshFarsi.ir
ifli
_ _ _
> lcM bl
JT AAJ
^
i
y \ j\ JSJOLJ
_-
yO
Ic
olCiiub
ﭘﯿﺸﮕﻔﺘﺎر
در ﺳﺎل ﻫﺎي ﻧﻪ ﭼﻨﺪان دور ،وب ﻣﮑﺎن ﺑﺴﯿﺎر ﺳﺮد و ﮐﺴﻞ ﮐﻨﻨﺪه اي ﺑﻮد .ﺻﻔﺤﺎت وﺑﯽ ﮐﻪ از ﻣﺘﻦ ﻫﺎي ﺳﺎﺧﺘﻤﻨﺪ HTMLاﯾﺠﺎد
ﺷﺪه ﺑﻮدﻧﺪ ﺗﻨﻬﺎ ﺑﻪ ﻧﻤﺎﯾﺶ ﯾﮑﺴﺮي اﻃﻼﻋﺎت اﮐﺘﻔﺎ ﻣﯽ ﮐﺮدﻧﺪ .ﺗﻨﻬﺎ راه ﺗﻌﺎﻣﻞ ﮐﺎرﺑﺮان ﺑﺎ ﺻﻔﺤﺎت اﯾﻦ ﺑﻮد ﮐﻪ ﺑﺮ روي ﻟﯿﻨﮑﯽ ﮐﻠﯿﮏ
ﮐﺮده و ﻣﻨﺘﻈﺮ ﺑﺎرﮔﺬاري ﯾﮏ ﺻﻔﺤﻪ ﺟﺪﯾﺪ ﻣﯽ ﻣﺎﻧﺪﻧﺪ .ﺣﺘﯽ ﻓﮑﺮ آن روزﻫﺎ ﻫﻢ ﻋﺬاب آور اﺳﺖ!
اﻣﺎ اﻣﺮوزه ﺑﺴﯿﺎري از ﺳﺎﯾﺖ ﻫﺎ ﻫﻤﭽﻮن ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﮐﺎرﺑﺮدي دﺳﮑﺘﺎپ ﻋﻤﻞ ﮐﺮده و ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﯽ درﻧﮓ ﺑﻪ ﺗﻤﺎﻣﯽ روﯾﺪادﻫﺎي
ﺻﻔﺤﻪ ﻫﻤﭽﻮن ﮐﻠﯿﮏ ﭘﺎﺳﺦ ﺑﺪﻫﻨﺪ .و ﻫﻤﻪ اﯾﻦ ﻫﺎ ﺑﻪ ﻟﻄﻒ ﻣﻮﺿﻮع ﺟﺰوه اي ﮐﻪ ﻫﻢ اﮐﻨﻮن در دﺳﺖ دارﯾﺪ اﺳﺖ :ﺟﺎوااﺳﮑﺮﯾﭙﺖ!
ﺟﺎوااﺳﮑﺮﯾﭙﺖ زﺑﺎﻧﯽ اﺳﺖ ﮐﻪ ﺑﺎ ﮐﻤﮏ آن ﻣﯽ ﺗﻮاﻧﯿﺪ ﺻﻔﺤﺎت HTMLﺧﻮد را ﻟﺒﺮﯾﺰ از اﻧﯿﻤﯿﺸﻦ ﻫﺎ ،ﺟﻠﻮه ﻫﺎي ﺑﺼﺮي و وﯾﮋﮔﯽ
ﻫﺎي ﺗﻌﺎﻣﻠﯽ ﮐﻨﯿﺪ .اﯾﻦ زﺑﺎن اﻣﮑﺎﻧﺎﺗﯽ را ﻓﺮاﻫﻢ ﻣﯽ آورد ﺗﺎ ﺻﻔﺤﻪ وب ﺷﻤﺎ ﺑﺘﻮاﻧﺪ ﺑﻪ ﻋﻤﻠﯿﺎت ﮐﺎرﺑﺮي ﮐﻪ در ﺗﻌﺎﻣﻞ ﺑﺎ آن ﻫﺎﺳﺖ ﻓﻮرا
ﭘﺎﺳﺦ ﺑﺪﻫﺪ .ﻣﺎﻧﻨﺪ ﮐﻠﯿﮏ ﺑﺮ روي ﯾﮏ ﻟﯿﻨﮏ ،ﭘﺮ ﮐﺮدن ﯾﮏ ﻓﺮم و ﺣﺮﮐﺖ ﻧﺸﺎﻧﮕﺮ ﻣﺎوس ﺑﺮ روي ﺻﻔﺤﻪ.
ﺑﻪ ﮐﻤﮏ اﯾﻦ زﺑﺎن ﺧﻮاﻫﯿﺪ ﺗﻮاﻧﺴﺖ ﺑﻪ اﺟﺰا ﻣﻮﺟﻮد در ﺻﻔﺤﻪ دﺳﺘﺮﺳﯽ داﺷﺘﻪ و ﺣﺘﯽ در ﺻﻮرت ﻧﯿﺎز دﺳﺖ ﺑﻪ ﺗﻐﯿﯿﺮاﺗﯽ در آن ﻫﺎ
ﻣﻄﺎﺑﻖ ﻣﯿﻞ ﺧﻮد ﺑﺰﻧﯿﺪ.
اﺳﺘﻔﺎده روز اﻓﺰون از ﺗﮑﻨﻮﻟﻮژي ﻫﺎﯾﯽ ﻫﻤﭽﻮن Ajaxو jQueryدر ﻃﺮاﺣﯽ ﺻﻔﺤﺎت وب ﮐﻪ ﻫﺴﺘﻪ اﺻﻠﯽ آن ﻫﺎ را Javascript
ﺗﺸﮑﯿﻞ ﻣﯽ دﻫﺪ ﺑﻪ اﻫﻤﯿﺖ ﯾﺎدﮔﯿﺮي اﯾﻦ زﺑﺎن ﻗﺪرﺗﻤﻨﺪ ﺑﺮاي ﻫﺮﮐﺲ ﮐﻪ دﺳﺘﯽ در ﺗﻮﺳﻌﻪ وب دارد اﻓﺰوده اﺳﺖ.
اﯾﻦ ﺟﺰوه از روي ﯾﮑﯽ از ﻣﺸﻬﻮرﺗﺮﯾﻦ و ﺟﺎﻣﻊ ﺗﺮﯾﻦ ﮐﺘﺐ آﻣﻮزﺷﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﯾﻌﻨﯽ Professional Javascript for Web
Developersﻧﻮﺷﺘﻪ (Nicholas C.Zakasﻧﯿﮑﻼس ﺳﯽ زاﮐﺎس) و ﺗﺠﺮﺑﯿﺎت ﺷﺨﺼﯽ ﺗﺎﻟﯿﻒ و ﺗﺮﺟﻤﻪ ﺷﺪه اﺳﺖ.
ذﮐﺮ اﯾﻦ ﻧﮑﺘﻪ ﻧﯿﺰ ﺿﺮوري اﺳﺖ ﮐﻪ ﺗﺮﺟﻤﻪ ،ﺗﺨﺼﺺ اﯾﻨﺠﺎﻧﺐ ﻧﺒﻮده و ﻫﺪف از ﺗﻬﯿﻪ ﺟﺰوه اي ﮐﻪ ﻫﻢ اﮐﻨﻮن در دﺳﺘﺎن ﺷﻤﺎﺳﺖ
ﻫﻢ ﭼﯿﺰي ﺟﺰ ﺟﺎﻣﻪ ﻋﻤﻞ ﭘﻮﺷﺎﻧﺪن ﺑﻪ ﺣﺪﯾﺚ ﺷﺮﯾﻒ«زَ ﮐﺎ ُة اﻟْﻌﻠْ ِﻢ ﻧَﺸْ ُﺮه »ﻧﺒﻮده اﺳﺖ.
ِإ َذا َأرَ ذ َل اﻟﻠﱠﻪ ﻋﺒﺪاً ﺣﻈَ َﺮ ﻋَ ﻠﯿﻪ ا ْﻟﻌْ ﻠ ﻢ
I
ﺖ
ﭘﯿﺸﮕﻔﺘﺎر I .......................................................................................................................................
III
ﺗﻔﺎوت ﻫﺎي ﺑﻪ ﮐﺎرﮔﯿﺮي ﮐﺪﻫﺎ ﺑﻪ ﺻﻮرت درون ﺧﻄﯽ و ﺧﺎرﺟﯽ 19 ................................................................................
ﺧﻄﺎﯾﺎﺑﯽ 22.....................................................................................................................................
اﻟﺤﺎق دو رﺷﺘﻪ34............................................................................................................................
DOMﭼﯿﺴﺖ؟ 56............................................................................................................................
)(61 .............................................................................................................................getElementsByTagName
)(65.......................................................................................................................... createDocumentFragment
VI
VII
r
ﻓﺼﻞ ﯾﮏ
r J
آﺷﻨﺎﯾﯽﺑﺎﻣﻔﺎﻫﯿﻢواﺻﻄﻼﺣﺎت
j
اﯾﻦ ﻓﺼﻞ اﺧﺘﺼﺎص ﺑﻪ ﺑﺮرﺳﯽ ﻣﻔﺎﻫﯿﻢ و اﺻﻄﻼﺣﺎت راﯾﺞ ﻣﻮﺟﻮد در ﺟﺎوااﺳﮑﺮﯾﭙﺖ دارد .در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﻪ اﻧﻮاع زﺑﺎن ﻫﺎي
ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺗﺤﺖ وب ﺧﻮاﻫﯿﻢ ﭘﺮداﺧﺖ و ﺳﭙﺲ ﺗﻔﺎوت ﻫﺎي اﺻﻠﯽ زﺑﺎن ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ و ﺟﺎوا را ﺷﺮح ﺧﻮاﻫﯿﻢ داد .در
اداﻣﻪ ﻧﯿﺰ ﺑﻪ ﻫﺴﺘﻪ ﻫﺎي ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﭘﺮداﺧﺘﻪ و ﺑﺎ ﮐﺎرﺑﺮدﻫﺎي ﻫﺮ ﯾﮏ از آن ﻫﺎ آﺷﻨﺎ ﺧﻮاﻫﯿﻢ ﺷﺪ.
REQU ^
JAVA 5 CRIPT PHP ASP JSP
Client Server
HTML CSS
RESPOND
زﺑﺎن ﻫﺎي ﺗﺤﺖ ﮐﺎرﺑﺮ زﺑﺎن ﻫﺎﯾﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﺑﻮﺳﯿﻠﻪ ﻣﺮورﮔﺮ و ﻓﻘﻂ ﺑﺮ روي ﮐﺎﻣﭙﯿﻮﺗﺮﻫﺎي ﻣﺸﺘﺮي اﺟﺮا ﻣﯽ ﺷﻮﻧﺪ .در واﻗﻊ ﺑﺮاي
اﺟﺮاي اﯾﻦ ﮔﻮﻧﻪ زﺑﺎن ﻫﺎ ﺑﻪ ﺳﺮورﻫﺎ ﻧﯿﺎزي ﻧﯿﺴﺖ .زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن CSS ،HTMLو JAVASCRIPTاز اﯾﻦ دﺳﺖ
ﻫﺴﺘﻨﺪ .از اﯾﻦ زﺑﺎن ﻫﺎ ﻣﻌﻤﻮﻻ ﺑﻪ ﺗﻨﻬﺎﯾﯽ ﺑﺮاي اﯾﺠﺎد ﺳﺎﯾﺖ ﻫﺎي ﺑﺎ ﻣﺤﺘﻮاي ﺛﺎﺑﺖ ﮐﻪ اﺻﻄﻼﺣﺎ ﺑﻪ آن ﻫﺎ ﺳﺎﯾﺖ ﻫﺎي اﯾﺴﺘﺎ 5ﻣﯽ
ﮔﻮﯾﻨﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد.
در ﻣﻘﺎﺑﻞ اﯾﻦ زﺑﺎن ﻫﺎ ،زﺑﺎن ﻫﺎي ﺗﺤﺖ ﺳﺮور وﺟﻮد دارﻧﺪ ﮐﻪ ﺑﺮاي اﺟﺮا ﻧﯿﺎز ﺑﻪ ﺳﺮور ﻫﺎ داﺷﺘﻪ و ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﺮاي اﺟﺮا ﺣﺘﻤﺎ ﺑﺮ
روي ﺳﺮور ﻫﺎ ﻗﺮار ﺑﮕﯿﺮﻧﺪ .اﯾﻨﮕﻮﻧﻪ زﺑﺎن ﻫﺎ اﻣﮑﺎن ﺑﺮﻗﺮاري ارﺗﺒﺎط ﺑﺎ ﭘﺎﯾﮕﺎه داده 6را دارﻧﺪ .زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن ASP ،PHPو
JSPاز اﯾﻦ دﺳﺖ ﻫﺴﺘﻨﺪ .از اﯾﻦ زﺑﺎن ﻫﺎ ﺑﺮاي اﯾﺠﺎد ﺳﺎﯾﺖ ﻫﺎي ﺑﺎ ﻣﺤﺘﻮاي ﭘﻮﯾﺎ ﮐﻪ اﺻﻄﻼﺣﺎ ﺑﻪ آن ﻫﺎ ﺳﺎﯾﺖ ﻫﺎي ﭘﻮﯾﺎ 7ﮔﻔﺘﻪ
ﻣﯽ ﺷﻮد اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد.
زﺑﺎن JavaScriptﯾﮑﯽ از زﺑﺎن ﻫﺎي ﻣﻬﻢ ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ وب و ﺗﺤﺖ ﮐﺎرﺑﺮﻣﯽ ﺑﺎﺷﺪ .اﯾﻦ زﺑﺎن اوﻟﯿﻦ ﺑﺎر در ﺳﺎل ١٩٩۵اراﺋﻪ
ﺷﺪ و وﻇﯿﻔﻪ آن ﺗﻨﻬﺎ ارزش ﺳﻨﺠﯽ ﻋﻨﺎﺻﺮ ﻓﺮم ﺑﻮد.
1
Client
2
Server
3
Client side
4
Server side
5
Static
6
Database
7
Dynamic
1 ﺟﺎوا ﯾﮏ زﯾﺎن ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﮐﺎﻣﻼ ﺷﯽ ﮔﺮا) (OOP1اﺳﺖ ﮐﻪ اوﻟﯿﻦ ﺑﺎر ﺗﻮﺳﻂ ﺷﺮﮐﺖ Sun MicroSystemﺑﻪ ﻣﻨﻈﻮر
ﺧﻠﻖ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﮐﺎرﺑﺮدي ﻣﺴﺘﻘﻞ و ﻗﺎﺑﻞ اﺟﺮا ﺑﺮ روي اﻧﻮاع ﺳﯿﺴﺘﻢ ﻫﺎي ﻋﺎﻣﻞ اراﺋﻪ ﺷﺪ .در ﺣﺎﻟﯽ ﮐﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ
ﻋﻨﻮان ﯾﮏ زﺑﺎن ﺷﺒﻪ ﺷﯽ ﮔﺮا) (LOO2ﮐﻪ اوﻟﯿﻦ ﺑﺎر ﺗﻮﺳﻂ ﺷﺮﮐﺖ NetScapeاراﺋﻪ ﺷﺪ ،ﺗﻨﻬﺎ ﯾﮏ ﻓﺎﯾﻞ ﻣﺘﻨﯽ ﺳﺎده
اﺳﺖ ﮐﻪ ﻧﻤﯽ ﺗﻮان از آن ﺑﺮاي اﯾﺠﺎد ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﮐﺎﻣﻼ ﻣﺴﺘﻘﻞ اﺳﺘﻔﺎده ﮐﺮد و ﺑﺮاي اﺟﺮا ﻣﯽ ﺑﺎﯾﺴﺖ در داﺧﻞ ﺻﻔﺤﺎت
HTMLﻗﺮار ﮔﺮﻓﺘﻪ و ﺗﻮﺳﻂ ﻣﺮورﮔﺮﻫﺎ ﺗﻔﺴﯿﺮ و اﺟﺮا ﺷﻮﻧﺪ .در واﻗﻊ ﮐﺎرﺑﺮد اﺻﻠﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﺻﻔﺤﺎت وب ﺑﻮده و
از آن ﺗﻨﻬﺎ ﺑﻪ ﻣﻨﻈﻮر اﻓﺰودن ﻗﺎﺑﻠﯿﺖ ﻫﺎي ﺗﻌﺎﻣﻠﯽ ﺑﻪ ﺻﻔﺤﺎت وب اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .اﻟﺒﺘﻪ ﻧﺒﺎﯾﺪ از ذﮐﺮ اﯾﻦ ﻧﮑﺘﻪ ﻧﯿﺰ
ﮔﺬﺷﺖ ﮐﻪ در ﺳﺎل ﻫﺎي اﺧﯿﺮ اﻣﮑﺎن ﮐﺎرﺑﺮد ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺟﺎوا ﻧﯿﺰ در ﻗﺎﻟﺐ Appletﻫﺎ و ﺻﻔﺤﺎت JSP3در وب ﻓﺮاﻫﻢ
ﺷﺪه اﺳﺖ.
ﺟﺎوا ﯾﮏ زﺑﺎن ﮐﺎﻣﭙﺎﯾﻠﯽ اﺳﺖ در ﺣﺎﻟﯽ ﮐﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻫﻤﺎن ﻃﻮر ﮐﻪ از اﺳﻤﺶ ﭘﯿﺪاﺳﺖ ﯾﮏ زﺑﺎن
اﺳﮑﺮﯾﭙﺘﯽ)ﻣﻔﺴﺮي( اﺳﺖ .زﺑﺎن ﻫﺎي ﮐﺎﻣﭙﺎﯾﻠﯽ ﺑﻪ زﺑﺎن ﻫﺎﯾﯽ ﮔﻔﺘﻪ ﻣﯽ ﺷﻮد ﮐﻪ ﻗﺒﻞ از اﺟﺮا ﻣﯽ ﺑﺎﯾﺴﺖ ﮐﺎﻣﭙﺎﯾﻞ ﺷﻮﻧﺪ.
زﺑﺎن ﻫﺎي اﺳﮑﺮﯾﭙﺘﯽ ﻧﯿﺰ ﺑﻪ زﺑﺎن ﻫﺎﯾﯽ ﮔﻔﺘﻪ ﻣﯽ ﺷﻮد ﮐﻪ ﻣﺮﺣﻠﻪ ﮐﺎﻣﭙﺎﯾﻞ و اﺟﺮا آن ﻫﺎ ﺟﺪا ﻧﺒﻮده و در واﻗﻊ ﮐﺎﻣﭙﺎﯾﻞ آن
ﻫﺎ در زﻣﺎن اﺟﺮا اﻧﺠﺎم ﻣﯽ ﺷﻮد .وﻇﯿﻔﻪ ﺗﻔﺴﯿﺮ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺮ ﻋﻬﺪه ﻣﺮورﮔﺮ اﺳﺖ.
ﺑﻪ ﺑﺮﻧﺎﻣﻪ ﻫﺎﯾﯽ ﮐﻪ ﺑﻪ زﺑﺎن ﻫﺎي اﺳﮑﺮﯾﭙﺘﯽ ﻧﻮﺷﺘﻪ ﻣﯽ ﺷﻮﻧﺪ اﺳﮑﺮﯾﭙﺖ ﻣﯽ ﮔﻮﯾﻨﺪ.
از ﺗﻔﺎوت ﻫﺎي ﻣﻬﻢ دﯾﮕﺮ اﯾﻦ دو زﺑﺎن ﻣﯽ ﺗﻮان ﺑﻪ ﺳﺒﮏ ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮ ﻫﺎ در آن ﻫﺎ اﺷﺎره ﮐﺮد .زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ
از ﻟﺤﺎظ ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮ ﻫﺎ ﺑﻪ دو دﺳﺘﻪ زﺑﺎن ﻫﺎي Strongly Typeو Loosely Typeﺗﻘﺴﯿﻢ ﻣﯽ ﺷﻮﻧﺪ.
در زﺑﺎن ﻫﺎي ﺑﺎ ﻧﻮع ﻗﻮي ﻣﯽ ﺑﺎﯾﺴﺖ اﺑﺘﺪا ﻧﻮع ﻣﺘﻐﯿﺮﻫﺎ را ﺗﻌﯿﯿﻦ و ﺳﭙﺲ در ﺑﺮﻧﺎﻣﻪ از آن اﺳﺘﻔﺎده ﻧﻤﻮد .ﻧﻮع اﯾﻦ ﮔﻮﻧﻪ
ﻣﺘﻐﯿﺮ ﻫﺎ را ﻧﻤﯽ ﺗﻮان در ﻃﻮل اﺟﺮا ﺑﺮﻧﺎﻣﻪ ﺗﻐﯿﯿﺮ داد و در ﺻﻮرﺗﯽ ﮐﻪ اﯾﻦ ﻣﺘﻐﯿﺮﻫﺎ ﺑﺎ ﻋﻤﻠﮕﺮﻫﺎي ﻣﻨﺎﺳﺐ ﺧﻮد ﺑﻪ ﮐﺎر
ﻧﺮوﻧﺪ ﻧﺘﺎﯾﺞ ﻧﺎدرﺳﺖ ﺑﻪ دﺳﺖ ﻣﯽ آﯾﻨﺪ و ﯾﺎ ﺧﻄﺎﯾﯽ ﺑﻪ وﻗﻮع ﻣﯽ ﭘﯿﻮﻧﺪد .زﺑﺎن ﻫﺎي C++و javaاز اﯾﻦ دﺳﺖ زﺑﺎن ﻫﺎ
ﻫﺴﺘﻨﺪ.
در ﻣﻘﺎﺑﻞ در زﺑﺎن ﻫﺎي ﺑﺎ ﻧﻮع ﺿﻌﯿﻒ ﻧﯿﺎزي ﺑﻪ ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮﻫﺎ و ﺗﻌﯿﯿﻦ ﻧﻮع داده آن ﻫﺎ ﻧﻤﯽ ﺑﺎﺷﺪ .در اﯾﻦ زﺑﺎن ﻫﺎ ﺗﻌﯿﯿﻦ
ﻧﻮع ﻫﺎي داده ﺑﻪ ﻃﻮر ﺧﻮدﮐﺎر و ﺑﺮ ﺣﺴﺐ ﻧﯿﺎز ﺗﻮﺳﻂ ﺧﻮد زﺑﺎن اﻧﺠﺎم ﻣﯽ ﮔﯿﺮد و ﺑﻨﺎﺑﺮاﯾﻦ در ﻃﯽ ﻓﺮآﯾﻨﺪ ﭘﺮدازش داده ﻫﺎ
ﻣﯽ ﺗﻮان در ﻫﺮ ﻣﺮﺣﻠﻪ ﺑﻪ راﺣﺘﯽ ﻧﻮع داده ﻫﺎ را ﺑﺮرﺳﯽ و ﺗﻐﯿﯿﺮ داد .زﺑﺎن ﻫﺎﯾﯽ ﻫﻤﭽﻮن javascriptو PHPاز اﯾﻦ
دﺳﺖ ﻫﺴﺘﻨﺪ.
ﯾﺎدﮔﯿﺮي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺴﯿﺎر ﺳﺎده ﺗﺮ از ﺟﺎوا اﺳﺖ .اﯾﻦ ﺑﻪ اﯾﻦ ﺧﺎﻃﺮ اﺳﺖ ﮐﻪ ﻫﻤﻪ آﻧﭽﻪ ﺷﻤﺎ ﺑﻪ ﻋﻨﻮان ﯾﮏ ﺗﻮﺳﻌﻪ
دﻫﻨﺪ وب ﺑﺮاي ﯾﺎدﮔﯿﺮي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻧﯿﺎز دارﯾﺪ درﮐﯽ ﻋﻤﯿﻖ از HTMLاﺳﺖ .ﺑﺎ اﯾﻦ ﺣﺎل ﭼﻨﺎﻧﭽﻪ درك درﺳﺘﯽ از
ﺟﺎوااﺳﮑﺮﯾﭙﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﯾﺎدﮔﯿﺮي ﺟﺎوا ﻧﯿﺰ ﺑﺮاﯾﺘﺎن ﺳﻬﻞ و دﻟﭙﺬﯾﺮ ﺧﻮاﻫﺪ ﺷﺪ!
1
Object Oriented Programming
2
Like Object Oriented
3
Java Server Page
1
Document Object Model
2
Application Programming Interface
3
Node
4
Browser Object Model
5
Resolution
6
Case Sensitive
5 ﺗﻐﯿﯿﺮ ﻧﻮع داده ذﺧﯿﺮه ﺷﺪه در ﯾﮏ ﻣﺘﻐﯿﺮ در ﻫﺮ ﻧﻘﻄﻪ اي از ﺑﺮﻧﺎﻣﻪ را ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ.
در اﻧﺘﻬﺎي ﻫﺮ دﺳﺘﻮر اﺧﺘﯿﺎري اﺳﺖ :دﺳﺘﻮرات در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ ﺧﺘﻢ ;
ﺷﻮﻧﺪ ﯾﺎ ﻧﺸﻮﻧﺪ .در ﻗﺮار دادن ( ) ;
1 ﺻﻮرت ﭼﺸﻢ ﭘﻮﺷﯽ از ; ،ﺟﺎوا اﺳﮑﺮﯾﭙﺖ اﻧﺘﻬﺎي ﻫﺮ ﺧﻂ را ﺑﻪ ﻋﻨﻮان ﭘﺎﯾﺎن دﺳﺘﻮر در ﻧﻈﺮ ﺧﻮاﻫﺪ ﮔﺮﻓﺖ .ﺑﺎ
اﯾﻦ ﺣﺎل روش ﺻﺤﯿﺢ ،اﺳﺘﻔﺎده از ; در اﻧﺘﻬﺎي دﺳﺘﻮرات اﺳﺖ .ﭼﻮن ﺑﻌﻀﯽ از ﻣﺮورﮔﺮﻫﺎ از روش اول ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽ
ﮐﻨﺪ و ﻣﻤﮑﻦ اﺳﺖ در اﺟﺮاي ﮐﺪﻫﺎ دﭼﺎر ﻣﺸﮑﻞ ﺷﻮﻧﺪ .درج ﺗﻮﺿﯿﺤﺎت در ﺟﺎوا اﺳﮑﺮﯾﭙﺖ :ﺑﺮاي درج ﺗﻮﺿﯿﺤﺎت در
ﻣﯿﺎن ﮐﺪﻫﺎ ﻣﯽ ﺗﻮان از روش ﻫﺎي زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﻫﻤﭽﻮن Cو +C+اﺳﺘﻔﺎده ﻧﻤﻮد ﯾﻌﻨﯽ از //ﺑﺮاي ﺗﻮﺿﯿﺤﺎت ﯾﮏ
ﺧﻄﯽ ﯾﺎ /* */ﺑﺮاي ﺗﻮﺿﯿﺤﺎت ﭼﻨﺪ
ﺧﻄﯽ:
//this is a single-line comment
/* this is a multiline
comment */
f
ﻓﺼﻞ دو
r J
ﻣﺘﻐﯿﺮﻫﺎواﻧﻮاعدادهﻫﺎ
در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﺎ روش ﺗﻌﺮﯾﻒ ﻣﺘﻐﯿﺮﻫﺎ و ﻗﻮاﻧﯿﻦ ﻧﺎﻣﮕﺬاري آن ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ آﺷﻨﺎ ﺧﻮاﻫﯿﻢ ﺷﺪ و ﺳﭙﺲ اﻧﻮاع داده ﻫﺎي
ﻣﻮﺟﻮد را ﺑﺮرﺳﯽ ﺧﻮاﻫﯿﻢ ﮐﺮد .ﻫﻤﭽﻨﯿﻦ ﻟﯿﺴﺘﯽ از ﮐﻠﻤﺎت ﮐﻠﯿﺪي و رزرو ﺷﺪه ﮐﻪ اﻣﮑﺎن اﺳﺘﻔﺎده از آن ﻫﺎ ﺑﻪ ﻋﻨﻮان ﻧﺎم ﻣﺘﻐﯿﺮﻫﺎ و
ﺗﻮاﺑﻊ وﺟﻮد ﻧﺪارد را اراﺋﻪ ﺧﻮاﻫﯿﻢ ﮐﺮد.
ﻫﻤﭽﻨﯿﻦ در اﯾﻦ ﻓﺼﻞ ﺑﻪ ﻣﺒﺤﺚ ﺑﺴﯿﺎر ﻣﻬﻢ ﺗﺒﺪﯾﻞ اﻧﻮاع ﭘﺮداﺧﺘﻪ و روش ﻫﺎي ﺗﺒﺪﯾﻞ اﻧﻮاع ﮔﻮﻧﺎﮔﻮن ﺑﻪ ﯾﮑﺪﯾﮕﺮ را ﺑﺮرﺳﯽ ﺧﻮاﻫﯿﻢ
ﮐﺮد.
ﻣﺘﻐﯿﺮﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ
ﻣﺘﻐﯿﺮ ﻫﺎ ﺑﺎ ﮐﻠﻤﻪ varﺗﻌﺮﯾﻒ ﻣﯽ ﺷﻮﻧﺪ .ﻣﺎﻧﻨﺪ:
Var ;'test ='ali
8
2
در اﯾﻦ ﻣﺜﺎل ﻣﺘﻐﯿﺮي ﺑﺎ ﻧﺎم testاﻋﻼن ﺷﺪه و ﻣﻘﺪار اوﻟﯿﻪ ' 'aliرا ﻣﯽﮔﯿﺮد.
ﭼﻮن ﻣﺘﻐﯿﺮﻫﺎ ﺑﺪون ﻧﻮع ﻫﺴﺘﻨﺪ ﻣﻔﺴﺮ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺧﻮد ﺑﻪ ﺧﻮد ﻧﻮع testرا رﺷﺘﻪ در ﻧﻈﺮ ﻣﯽﮔﯿﺮد.
ﻫﻤﭽﻨﯿﻦ ﻣﯽﺗﻮاﻧﯿﻢ دو ﯾﺎ ﭼﻨﺪ ﻣﺘﻐﯿﺮ را ﻫﻤﺰﻣﺎن ﺗﻌﺮﯾﻒ ﮐﻨﯿﻢ:
var ; 'test 1='ali' , test2='salam
ﺑﺎﯾﺪ ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ﻣﺘﻐﯿﺮﻫﺎﯾﯽ ﮐﻪ ﺑﺎ ﯾﮏ varﺗﻌﺮﯾﻒ ﻣﯽ ﺷﻮد ﻣﻤﮑﻦ اﺳﺖ ﻧﻮع ﯾﮑﺴﺎﻧﯽ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﻨﺪ.
var ;test_1='ali' , age=25
ﺑﺮﺧﻼف ﺟﺎوا ﻣﺘﻐﯿﺮﻫﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ در زﻣﺎنﻫﺎي ﻣﺨﺘﻠﻒ ﻣﻘﺎدﯾﺮ ﻣﺘﻔﺎوﺗﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ .اﯾﻦ ﯾﮑﯽ از اﻣﺘﯿﺎزات ﻣﺘﻐﯿﺮﻫﺎي
ﺑﺪون ﻧﻮع در زﺑﺎن ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﺷﻤﺎر ﻣﯽ رود .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﯾﮏ ﻣﺘﻐﯿﺮ ﻣﯽ ﺗﻮاﻧﺪ ﺑﺎﯾﺪ ﯾﮏ ﻣﻘﺪار رﺷﺘﻪاي
ﻣﻘﺪاردﻫﯽ اوﻟﯿﻪ ﺷﺪه و ﺳﭙﺲ در اداﻣﻪ ﺑﺮﻧﺎﻣﻪ ﺑﻪ ﯾﮏ ﻣﻘﺪار ﻋﺪدي ﺗﻐﯿﯿﺮ ﮐﻨﺪ .ﺑﻪ ﻣﺜﺎل زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ:
; "var test ="hi
;)alert(test // hi
;test=55
;)alert(test // 55
ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮﻫﺎ
ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮﻫﺎ ﻣﯽ ﺑﺎﯾﺴﺖ ﺷﺮاﯾﻂ زﯾﺮ را داﺷﺘﻪ ﺑﺎﺷﺪ:
اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﻣﺘﻐﯿﺮ ﻣﯽ ﺗﻮاﻧﺪ ﯾﮏ ﺣﺮف ,ﯾﮏ ( _ ) underlineو ﯾﺎ ﯾﮏ ﻋﻼﻣﺖ $ﺑﺎﺷﺪ.
ﺑﻘﯿﻪ ﮐﺎراﮐﺘﺮﻫﺎ ﻣﯽﺗﻮاﻧﻨﺪ از _ ،$و ﯾﺎ ﻫﺮ ﺣﺮف و ﻋﺪدي ﺗﺸﮑﯿﻞ ﺷﻮﻧﺪ.
ﺗﻤﺎم ﻣﺘﻐﯿﺮﻫﺎي زﯾﺮ ﺻﺤﯿﺢ ﻫﺴﺘﻨﺪ:
var ; test
var ; $test
var ; $1
var ; _$test2
اﻟﺒﺘﻪ ﺻﺤﺖ ﻧﺎم ﯾﮏ ﻣﺘﻐﯿﺮ از ﻧﻈﺮ ﻧﺤﻮي ،ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﻧﯿﺴﺖ ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﺪ از آن ﻫﺎ اﺳﺘﻔﺎده ﮐﻨﯿﺪ .ﺑﻬﺘﺮ اﺳﺖ در ﻧﺎﻣﮕﺬاري
ﻣﺘﻐﯿﺮﻫﺎ از ﯾﮑﯽ از ﻗﺮاردادﻫﺎي ﺷﻨﺎﺧﺘﻪ ﺷﺪه زﯾﺮ ﺗﺒﻌﯿﺖ ﮐﻨﯿﺪ:
9 ﻧﺸﺎﻧﻪ ﮔﺬاري ﭘﺎﺳﮑﺎل :در اﯾﻦ روش ﺣﺮف اول ﻣﺘﻐﯿﺮ و ﺣﺮف اول ﺑﻘﯿﻪ ﮐﻠﻤﺎت ﺑﻪ ﺻﻮرت ﺑﺰرگ ﻧﻮﺷﺘﻪ ﻣﯽ ﺷﻮد .ﺑﻪ
ﻋﻨﻮان ﻣﺜﺎل:
2
;”var MyTestValue = 0, MySecondTestValue = “hi
ﻧﺸﺎﻧﻪ ﮔﺬاري ﻣﺠﺎرﺳﺘﺎﻧﯽ :در اﯾﻦ روش از ﯾﮏ ﯾﺎ دﻧﺒﺎﻟﻪ اي از ﭘﯿﺸﻮﻧﺪﻫﺎ ﻗﺒﻞ از ﻧﺸﺎﻧﻪ ﮔﺬاري ﭘﺎﺳﮑﺎل ﺑﺮاي ﺗﻌﯿﯿﻦ ﻧﻮع
ﯾﮏ ﻣﺘﻐﯿﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﮐﺎراﮐﺘﺮ iﺑﻪ ﻣﻌﻨﯽ ﻋﺪد ﺻﺤﯿﺢ و sﺑﻪ ﻣﻌﻨﯽ رﺷﺘﻪ اﺳﺖ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل:
;”var iMyTestValue = 0, sMySecondTestValue = “hi
ﺟﺪول زﯾﺮ ﻟﯿﺴﺘﯽ از ﭘﯿﺸﻮﻧﺪﻫﺎي ﻣﻮﺟﻮد ﺑﻪ ﻣﻨﻈﻮر اﺳﺘﻔﺎده در ﻧﺸﺎﻧﻪﮔﺬاري ﻣﺠﺎرﺳﺘﺎﻧﯽ را ﻧﺸﺎن ﻣﯽ دﻫﺪ .ﻣﺎ در اﯾﻦ ﺟﺰوه از اﯾﻦ
ﭘﯿﺸﻮﻧﺪﻫﺎ ﺑﺮاي ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮﻫﺎ اﺳﺘﻔﺎده ﮐﺮده اﯾﻢ.
ﻧﻤﻮﻧﻪ ﭘﯿﺸﻮﻧﺪ ﻧﻮع
aValues a آراﯾﻪ
bFaound b ﺑﻮﻟﯿﻦ
fValue f ﻋﺪد اﻋﺸﺎري
iValue i ﻋﺪد ﺻﺤﯿﺢ
fnMethod fn ﺗﺎﺑﻊ
oType o ﺷﯽ
sValue s رﺷﺘﻪ
ﯾﮑﯽ دﯾﮕﺮ از اﻣﺘﯿﺎزات و ﯾﺎ ﺷﺎﯾﺪ ﺟﺬاﺑﯿﺖ ﻫﺎي ) javascriptﮐﻪ در ﺑﺴﯿﺎري از زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ دﯾﮕﺮ وﺟﻮد ﻧﺪارد( اﯾﻦ
اﺳﺖ ﮐﻪ ﻻزم ﻧﯿﺴﺖ ﻣﺘﻐﯿﺮ ﻫﺎ را ﻗﺒﻞ از ﻣﻘﺪار دﻫﯽ ،اﻋﻼن ﮐﻨﯿﻢ:
;"var sTest="hello
;"sTest2=sTest + "world
alert (sTest2); // hello world
1
Camel Notation
1
ﮐﻠﻤﺎت ﮐﻠﯿﺪي
ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻌﺪادي از ﮐﻠﻤﺎت را ﺑﻪ ﻋﻨﻮان ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﯽ ﺷﻨﺎﺳﺪ .اﯾﻦ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﻌﻤﻮﻻ اﺑﺘﺪا ﯾﺎ اﻧﺘﻬﺎي دﺳﺘﻮرات را
ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﻨﺪ .ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﺑﻪ ﻋﻨﻮان ﮐﻠﻤﺎت رزرو ﺷﺪه ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮﻧﺪ و ﻧﻤﯽ ﺗﻮان از آن ﻫﺎ ﺑﻪ ﻋﻨﻮان ﻧﺎم ﻣﺘﻐﯿﺮ ﻫﺎ ﯾﺎ 10
ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﻧﻤﻮد .در زﯾﺮ ﻟﯿﺴﺖ ﮐﺎﻣﻠﯽ از اﯾﻦ ﮐﻠﻤﺎت را ﻣﺸﺎﻫﺪه ﻣﯽ ﮐﻨﯿﺪ:
2
Break else new var
Case finally return void
Catch for switch while
Continue function this with
Default if throw
Delete in try
Do instanceof typeof
اﮔﺮ از ﯾﮑﯽ از ﮐﻠﻤﺎت ﻓﻮق ﺑﺮاي ﻧﺎﻣﮕﺬاري ﻣﺘﻐﯿﺮ ﻫﺎ ﯾﺎ ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﺑﺎ ﺧﻄﺎي Identifier expectedروﺑﺮو ﺧﻮاﻫﯿﺪ ﺷﺪ.
2
ﮐﻠﻤﺎت رزرو ﺷﺪه
ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻌﺪادي از ﮐﻠﻤﺎت رزرو ﺷﺪه را ﻧﯿﺰ ﻣﻌﺮﻓﯽ ﮐﺮده اﺳﺖ .ﮐﻠﻤﺎت رزرو ﺷﺪه ﻧﯿﺰ ﻧﻤﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ ﻋﻨﻮان ﻧﺎم ﻣﺘﻐﯿﺮ ﻫﺎ و
ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﺷﻮﻧﺪ .ﻟﯿﺴﺖ ﮐﺎﻣﻠﯽ از اﯾﻦ ﮐﻠﻤﺎت را در زﯾﺮ ﻣﺸﺎﻫﺪه ﻣﯽ ﮐﻨﯿﺪ:
Abstract enum int short
Boolean export interface static
Byte extends long super
Char final native synchronized
Class float package throws
Const goto private transient
Debugger implements protected volatile
Double import public
1
Keywords
2
Reserved Words
ﺑﻪ اﯾﻦ ﻧﮑﺘﻪ ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ ﻣﺘﻐﯿﺮي ﮐﻪ اﻋﻼن ﻣﯽ ﺷﻮد و ﻣﻘﺪار ﻧﻤﯽ ﮔﯿﺮد ﺑﺎ ﻣﺘﻐﯿﺮي ﮐﻪ اﺻﻶ اﻋﻼن ﻫﻢ ﻧﺸﺪه اﺳﺖ
ﮐﺎﻣﻼ ﻣﺘﻔﺎوت اﺳﺖ .ﻫﺮ ﭼﻨﺪ ﮐﻪ ﻋﻤﻠﮕﺮ typeofﺑﯿﻦ اﯾﻦ دو ﺗﻔﺎوﺗﯽ ﻗﺎﺋﻞ ﻧﻤﯽ ﺷﻮد و ﺑﺮاي ﻫﺮ دو ﻣﺘﻐﯿﺮ ،ﻣﻘﺪار undefinedرا
ﺑﺮﻣﯽﮔﺮداﻧﺪ ،اﮔﺮ ﭼﻪ ﻓﻘﻂ ﯾﮑﯽ از آن ﻫﺎ در ﻣﺜﺎل زﯾﺮ ) (oTemp2ﺗﻌﺮﯾﻒ ﺷﺪه اﺳﺖ.
; var oTemp
; )alert (typeof oTemp "// outputs "undefined
; )alert (typeof oTemp2 "// outputs "undefined
اﮔﺮ از oTemp2ﺑﻪ وﺳﯿﻠﻪ ي ﻫﺮ ﻋﻤﻠﮕﺮي ﺑﻪ ﻏﯿﺮ از typeofاﺳﺘﻔﺎده ﮐﻨﯿﺪ ﯾﮏ ﺧﻄﺎ رخ ﺧﻮاﻫﺪ داد:
//make sure this variable isn’t defined
;//var oTemp2
//try outputting
alert(oTemp2 == undefined); //causes error
ﺧﺮوﺟﯽ ﺗﺎﺑﻌﯽ ﮐﻪ در داﺧﻞ ﺑﺪﻧﻪ ﺧﻮد ﻣﻘﺪاري را ﺻﺮاﺣﺘﺎ ﺑﺮﻧﻤﯽ ﮔﺮداﻧﺪ ﻧﯿﺰ ﻣﻘﺪار uindefinedاﺳﺖ:
{ )( function Testfunc
// leave the function black
}
”alert( TestFunc() == undefined ); //outputs “true
اﮔﺮ ﭼﻪ اﯾﻦ دو ﻣﻌﺎدل ﯾﮑﺪﯾﮕﺮﻧﺪ اﻣﺎ ﻣﻌﺎﻧﯽ ﻣﺘﻔﺎوﺗﯽ دارﻧﺪ undefined .ﺗﻨﻬﺎ زﻣﺎﻧﯽ ﺑﻪ ﯾﮏ ﻣﺘﻐﯿﺮ ﻧﺴﺒﺖ داده ﻣﯽ ﺷﻮد ﮐﻪ آن ﻣﺘﻐﯿﺮ
اﻋﻼن ﺷﻮد وﻟﯽ ﻣﻘﺪاردﻫﯽ ﻧﺸﻮد .در ﺣﺎﻟﯽ ﮐﻪ ﯾﮏ ﻣﺘﻐﯿﺮ زﻣﺎﻧﯽ از ﻧﻮع nullاﺳﺖ ﮐﻪ اﺷﺎره ﺑﻪ ﺷﯽ اي داﺷﺘﻪ ﺑﺎﺷﺪ ﮐﻪ وﺟﻮد
ﻧﺪارد.
ﺗﺒﺪﯾﻞ اﻧﻮاع
ﯾﮑﯽ از وﯾﮋﮔﯽ ﻫﺎي ﺑﺮﺟﺴﺘﻪ ﻫﺮ زﺑﺎن ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﻗﺎﺑﻠﯿﺖ ﺗﺒﺪﯾﻞ اﻧﻮاع در آن اﺳﺖ .ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻧﯿﺰ از اﯾﻦ ﻗﺎﻋﺪه ﻣﺴﺘﺜﻨﯽ
ﻧﺒﻮده و روش ﻫﺎي ﺳﺎده اي ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ﻓﺮاﻫﻢ آورده اﺳﺖ .اﮐﺜﺮ اﻧﻮاع ﻣﻮﺟﻮد در ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﻣﺘﺪﻫﺎﯾﯽ ﺑﺮاي ﺗﺒﺪﯾﻞ ﺑﻪ
ﺳﺎﯾﺮ اﻧﻮاع ﭘﺸﺘﯿﺒﺎﻧﯽ ﮐﺮده و ﺗﻮاﺑﻌﯽ ﺳﺮاﺳﺮي ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ﺑﻪ روش ﻫﺎي ﭘﯿﭽﯿﺪه ﺗﺮ وﺟﻮد دارد.
13 ﺑﺎﺷﻨﺪ.
ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي ﺑﺪﺳﺖ آوردن ﻃﻮل ﯾﮏ رﺷﺘﻪ ﻣﯽ ﺗﻮان از ﺧﺎﺻﯿﺖ .lengthاﺳﺘﻔﺎده ﻧﻤﻮد:
2
; "var sColor = "blue
; )alert (sColor.length ”//outputs “4
ﺳﻪ ﻧﻮع داده number ، booleanو stringﻣﺘﺪي ﺑﻪ ﻧﺎم )( .tostringﺑﺮاي ﺗﺒﺪﯾﻞ ﺑﻪ رﺷﺘﻪ دارﻧﺪ.
اﯾﻦ ﻣﺘﺪ ﺑﺮاي ﻣﺘﻐﯿﺮﻫﺎي از ﻧﻮع Booleanﯾﮑﯽ از ﻣﻘﺎدﯾﺮ رﺷﺘﻪ اي trueو falseرا ﺑﺴﺘﻪ ﺑﻪ ﻣﻘﺪار ﻣﺘﻐﯿﺮ ﺑﺮﻣﯽﮔﺮداﻧﺪ:
;var bFound = false
”alert(bFound.toString()); //outputs “false
اﯾﻦ ﻣﺘﺪ ﺑﺮاي ﻣﺘﻐﯿﺮ ﻫﺎي از ﻧﻮع numberرﺷﺘﻪ اي ﺣﺎوي آن ﻋﺪد را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ:
;var iNum1 = 10
;var fNum2 = 10.0
”alert(iNum1.toString()); //outputs “10
”alert(fNum2.toString()); //outputs “10
ﺗﺒﺪﯾﻞ ﺑﻪ ﻋﺪد
ﺟﺎوااﺳﮑﺮﯾﭙﺖ دو ﻣﺘﺪ ﺑﺮاي ﺗﺒﺪﯾﻞ اﻧﻮاع ﻏﯿﺮ ﻋﺪدي ﺑﻪ ﻋﺪدي ﻓﺮاﻫﻢ ﮐﺮده اﺳﺖ:
)(praseInt
)(parseFloat
ﻧﮑﺘﻪ :ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ ﺣﺮوف Iو Fﺑﺎﯾﺪ ﺑﻪ ﺻﻮرت ﺣﺮف ﺑﺰرگ ﻧﻮﺷﺘﻪ ﺷﻮﻧﺪ.
اﯾﻦ ﻣﺘﺪ ﻫﺎ ﻓﻘﻂ ﺑﺮ روي رﺷﺘﻪ ﻫﺎي ﺣﺎوي ﻋﺪد ﮐﺎر ﻣﯽ ﮐﻨﻨﺪ و ﺑﺮ روي ﺑﻘﯿﻪ اﻧﻮاع ﻣﻘﺪار NaNرا ﺑﺮ ﻣﯽ ﮔﺮداﻧﻨﺪ.
ﻣﺘﺪ )( .parseIntاز اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ رﺷﺘﻪ ﺷﺮوع ﻣﯽ ﮐﻨﺪ اﮔﺮ ﻋﺪد ﺑﻮد آن را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ﻣﻘﺪار NaNرا ﺑﺮﻣﯽ
ﮔﺮداﻧﺪ .اﯾﻦ روﻧﺪ ﺗﺎ آﺧﺮﯾﻦ ﮐﺎراﮐﺘﺮ اداﻣﻪ ﭘﯿﺪا ﻣﯽﮐﻨﺪ ﺗﺎ اﯾﻨﮑﻪ ﺑﻪ ﮐﺎراﮐﺘﺮي ﻏﯿﺮ ﻋﺪدي ﺑﺮﺳﺪ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﯾﻦ ﻣﺘﺪ ﻋﺒﺎرت
" "123redرا ﺑﻪ ﺻﻮرت 123ﺑﺮﻣﯽﮔﺮداﻧﺪ.
var iNum1 = parseInt(“1234blue”); //returns 1234
;)"var iNum3 = parseInt("22.5 //returns 22
;)"var iNum4 = parseInt("blue //returns NaN
ﻣﺘﺪ )( parseFloatﻧﯿﺰ ﻣﺜﻞ )( parseIntﻋﻤﻞ ﮐﺮده و از اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﺷﺮوع ﺑﻪ ﺟﺴﺘﺠﻮ ﻣﯽ ﮐﻨﺪ .اﻟﺒﺘﻪ در اﯾﻦ ﻣﺘﺪ اوﻟﯿﻦ
ﮐﺎراﮐﺘﺮ ﻧﻘﻄﻪ ﺣﺴﺎب ﻧﻤﯽ ﺷﻮد و آن را ﺑﻪ ﻫﻤﺎن ﺻﻮرت ﺑﺮﻣﯽﮔﺮداﻧﺪ.
1
Pseudo-Objects
اﮔﺮ دو ﮐﺎراﮐﺘﺮ ﻧﻘﻄﻪ در رﺷﺘﻪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﻨﺪ دوﻣﯿﻦ ﻧﻘﻄﻪ ﺑﻪ ﻋﻨﻮان ﮐﺎراﮐﺘﺮ ﺑﯽ ارزش ﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮد و ﻋﻤﻠﯿﺎت ﺗﺒﺪﯾﻞ
ﻣﺘﻮﻗﻒ ﻣﯽ ﺷﻮد .ﻣﺜﺎل ﻫﺎ:
var
var
fNum1
fNum3
=
=
;)”parseFloat(“1234blue
;)”parseFloat(“22.5
//returns 1234.0
//returns 22.5
14
var fNum4 = ;)”parseFloat(“22.34.5 //returns 22.34 2
var fNum6 = ;)”parseFloat(“blue //returns NaN
ﺗﺎﺑﻊ )( Numberﮐﺎري ﺷﺒﯿﻪ )( parseIntو )( parseFloatرا اﻧﺠﺎم ﻣﯽ دﻫﺪ اﻣﺎ ﺗﻔﺎوت ﻫﺎﯾﯽ ﻫﻢ دارد.
اﮔﺮ ﺑﻪ ﯾﺎد داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﻣﺘﺪﻫﺎي )( parseIntو )( parseFloatآرﮔﻮﻣﺎن درﯾﺎﻓﺘﯽ را ﻓﻘﻂ ﺗﺎ اوﻟﯿﻦ ﮐﺎراﮐﺘﺮ ﺑﯽ ارزش ﺑﺮ ﻣﯽ
ﮔﺮداﻧﺪﻧﺪ .ﻣﺜﻼ رﺷﺘﻪ ” “4.5.6ﺑﻪ 4.5ﺗﺒﺪﯾﻞ ﺧﻮاﻫﻨﺪ ﮐﺮد .اﻣﺎ ﮐﺎرﺑﺮد ﻣﺘﺪ )( Numberﺑﺮاي اﯾﻦ رﺷﺘﻪ ﻣﻘﺪار NaNرا ﺑﺮﻣﯽ-
ﮔﺮداﻧﺪ زﯾﺮا اﯾﻦ رﺷﺘﻪ در ﮐﻞ ،از ﻧﻈﺮ ﻣﺘﺪ )( ،Numberاﻣﮑﺎن ﺗﺒﺪﯾﻞ ﺑﻪ ﯾﮏ ﻋﺪد را ﻧﺪارد.
اﮔﺮ رﺷﺘﻪ اي اﻣﮑﺎن ﺗﺒﺪﯾﻞ ﺑﻪ ﯾﮏ ﻋﺪد را داﺷﺘﻪ ﺑﺎﺷﺪ ﻣﺘﺪ )( Numberﺧﻮد ،ﺑﺮاي اﺳﺘﻔﺎده از ﯾﮑﯽ از ﺗﻮاﺑﻊ )( parseIntﯾﺎ
)( parseFloatﺗﺼﻤﯿﻢ ﻣﯽ ﮔﯿﺮد .در ﻣﺜﺎل زﯾﺮ ﺣﺎﺻﻞ اﺟﺮاي ﺗﺎﺑﻊ )( Numberﺑﺮاي اﻧﻮاع داده ﻫﺎ را ﻧﺸﺎن ﻣﯽ دﻫﺪ:
)Number(false 0
)Number(true 1
)Number(undefined NaN
)Number(null 0
)”Number(“5.5 5.5
)”Number(“56 56
)”Number(“5.6.7 NaN
))(Number(new Object NaN
)Number(100 100
15
2
ﻓﺼﻞ ﺳﻪ
ﺟﺎوااﺳﮑﺮﯾﭙﺖدرﻣﺮورﮔﺮﻫﺎ
ﺣﺎل ﮐﻪ ﺗﺎ ﺣﺪودي ﺑﺎ ﺑﺴﯿﺎري از ﻣﻔﺎﻫﯿﻢ ﭘﺎﯾﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ آﺷﻨﺎ ﺷﺪﯾﻢ ﻣﯽ ﺧﻮاﻫﯿﻢ ﻃﺮﯾﻘﻪ اﺳﺘﻔﺎده و ﻗﺮار دادن آن ﻫﺎ در ﺻﻔﺤﻪ
را ﺑﺮرﺳﯽ ﮐﻨﯿﻢ HTML .ﺑﺮاي اﺳﺘﻔﺎده از ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﺻﻔﺤﺎت ﺗﮕﯽ ﺑﻪ ﻧﺎم > <scriptرا ﻓﺮاﻫﻢ ﮐﺮده ﮐﻪ در اداﻣﻪ ﺑﺎ آن
آﺷﻨﺎ ﺧﻮاﻫﯿﻢ ﺷﺪ.
ﻋﻤﻮﻣﺎ از اﯾﻦ ﺗﮓ در داﺧﻞ ﺗﮓ headﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد و ﻣﯽ ﺗﻮاﻧﺪ ﯾﮏ ،دو ﯾﺎ ﺳﻪ ﺻﻔﺖ را ﺑﮕﯿﺮد .ﺻﻔﺖ language
ﮐﻪ ﻧﻮع زﺑﺎن اﺳﺘﻔﺎده ﺷﺪه را ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ ،ﺻﻔﺖ اﺧﺘﯿﺎري srcﮐﻪ ﻣﮑﺎن ﯾﮏ ﻓﺎﯾﻞ ﺧﺎرﺟﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ و
ﺻﻔﺖ typeﮐﻪ ﻧﻮع MIME TYPEﯾﮏ ﻓﺎﯾﻞ ﺧﺎرﺟﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ و ﺑﺎﯾﺪ ﺑﺮاﺑﺮ ﻋﺒﺎرت 18
text/javascriptﻗﺮار داده ﺷﻮد .ﻣﻘﺪار ﺻﻔﺖ languageﻣﻌﻤﻮﻻ ﺑﺮاﺑﺮ javascriptﯾﺎ ﯾﮑﯽ از ﻧﺴﺨﻪ ﻫﺎي آن ﻣﺜﻼ javascript
3
1.3ﺗﻌﯿﯿﻦ ﻣﯽ ﺷﻮد) .اﮔﺮ از ﺻﻔﺖ javascriptﭼﺸﻢ ﭘﻮﺷﯽ ﺷﻮد ،ﻣﺮورﮔﺮﻫﺎ آﺧﺮﯾﻦ ﻧﺴﺨﻪ ﻣﻮﺟﻮد اﯾﻦ زﺑﺎن را در ﻧﻈﺮ ﻣﯽ
ﮔﯿﺮﻧﺪ(.
ﮐﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ در داﺧﻞ ﺗﮓ > <scriptﻧﻮﺷﺘﻪ ﻣﯽ ﺷﻮﻧﺪ اﻣﺎ در ﺻﻮرﺗﯽ ﮐﻪ ﻫﻤﺰﻣﺎن از ﺻﻔﺖ srcﻧﯿﺰ اﺳﺘﻔﺎده ﺷﻮد در اﯾﻦ
ﺻﻮرت ﻣﻌﻤﻮﻻ ﻣﺮورﮔﺮﻫﺎ ﮐﺪﻫﺎي داﺧﻞ ﺗﮓ > <scriptرا ﻧﺎدﯾﺪه ﻣﯽ ﮔﯿﺮﻧﺪ .ﺑﻪ ﻣﺜﺎل زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ:
><html
><head
><title>Title of Page</title
>”<script language=”JavaScript
;var i = 0
></script
”<script language=”JavaScript
>src=”../scripts/external.js”></script
></head
><body
><!-- body goes here --
></body
></html
در اﯾﻦ ﻣﺜﺎل ﻫﺮ دو ﻧﻮع ﺗﻌﺮﯾﻒ ﮐﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﺻﻔﺤﻪ ﻧﺸﺎن داده ﺷﺪه اﺳﺖ .ﺗﮓ اﺳﮑﺮﯾﭙﺖ اول ﺑﻪ ﺻﻮرت درون
2 1
ﺧﻄﯽ ﺑﻪ ﺗﻌﺮﯾﻒ ﮐﺪﻫﺎ ﭘﺮداﺧﺘﻪ اﺳﺖ و در ﺗﮓ > <scriptدوم )ﺑﻪ روش ﮐﺪﻫﺎي ﺧﺎرﺟﯽ ( ﺑﻪ ﯾﮏ ﻓﺎﯾﻞ ﺧﺎرﺟﯽ javascript
اﺷﺎره ﺷﺪه اﺳﺖ.
1
inline
2
external
19
{ )(function sayHi
;)”alert(“Hi
}
3 ></script
></head
><body
><!-- body goes here --
></body
></html
ﻣﯽ ﺗﻮاﻧﯿﻢ ﺧﻮد ﺗﺎﺑﻊ )( sayhiرا در ﻓﺎﯾﻠﯽ ﺧﺎرﺟﯽ ﻣﺜﻼ ﺑﻪ ﻧﺎم external.jsذﺧﯿﺮه ﮐﺮده و آن را ﺑﻪ ﺻﻮرت زﯾﺮ در ﺻﻔﺤﻪ ﻣﻮرد
ﻧﻈﺮ اﻟﺤﺎق ﮐﻨﯿﻢ:
><html
><head
><title>Title of Page</title
><script language=”JavaScript” src=”external.js”></script
></head
><body
><!-- body goes here --
></body
></html
1
cache
2
Code Maintenance
در ﮐﺪ ﻓﻮق ﺗﺎﺑﻊ )( sayHiدﻗﯿﻘﺎ ﻗﺒﻞ از ﻧﻤﺎﯾﺶ ﻫﺮ ﮔﻮﻧﻪ ﻣﺘﻨﯽ در ﺻﻔﺤﻪ اﺟﺮا ﺧﻮاﻫﺪ ﺷﺪ .ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ ﭘﻨﺠﺮه alertﻗﺒﻞ از
ﻣﺘﻦ This is the first text the user will seeاﺟﺮا ﺧﻮاﻫﺪ ﺷﺪ .اﯾﻦ روش ﺑﺮاي ﻓﺮاﺧﻮاﻧﯽ ﻣﺘﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺻﻼ
ﭘﯿﺸﻨﻬﺎد ﻧﻤﯽ ﺷﻮد و ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﻪ ﺟﺎي آن از ﮐﻨﺘﺮﻟﮕﺮ ﻫﺎي روﯾﺪاد 1اﺳﺘﻔﺎده ﮐﺮد .ﻣﺜﻼ:
><html
><head
><title>Title of Page</title
>”<script language=”JavaScript
{ )(function sayHi
;)”alert(“Hi
}
></script
></head
><body
><input type=”button” value=”Call Function” onclick=”sayHi()” /
></body
></html
1
Event Handler
در ﺻﻮرت اﺟﺮاي ﮐﺪ ﻓﻮق ﯾﮏ ﺧﻄﺎ رخ ﺧﻮاﻫﺪ داد زﯾﺮا ﺗﺎﺑﻊ ﻗﺒﻞ از اﯾﻨﮑﻪ ﺗﻌﺮﯾﻒ ﺷﻮد ﻓﺮاﺧﻮاﻧﯽ ﺷﺪه اﺳﺖ .ﺑﻪ دﻟﯿﻞ ﺑﺎرﮔﺬاري
ﮐﺪﻫﺎ از ﺑﺎﻻ ﺑﻪ ﭘﺎﯾﯿﻦ ،ﺗﺎﺑﻊ )( sayHiﺗﺎ زﻣﺎﻧﯽ ﮐﻪ ﺗﮓ > <scriptدوم اﯾﺠﺎد ﻧﺸﺪه اﺳﺖ در دﺳﺘﺮس ﻧﺨﻮاﻫﺪ ﺑﻮد.
22
;)”alert(“Hi
}
>//--
></script 3
ﺑﻪ دو ﮐﺎراﮐﺘﺮ /ﮐﻪ در اﻧﺘﻬﺎي دﺳﺘﻮر ﻓﻮق آﻣﺪه دﻗﺖ ﮐﻨﯿﺪ .اﯾﻦ دو /ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از اﯾﻦ ﮐﻪ ﻣﻔﺴﺮ ﻣﺮورﮔﺮﻫﺎي ﺳﺎزﮔﺎز
ﺑﺎ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ،ﻋﺒﺎرت > --را ﺑﻪ ﻋﻨﻮان ﯾﮏ دﺳﺘﻮر ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻔﺴﯿﺮ ﻧﮑﻨﺪ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ .ﻋﺪم اﺳﺘﻔﺎده از اﯾﻦ
دو /ﻣﻮﺟﺐ اﯾﺠﺎد ﯾﮏ ﺧﻄﺎ ﺧﻮاﻫﺪ ﺷﺪ.
روش ﻣﺨﻔﯽ ﮐﺮدن اﺳﮑﺮﯾﭙﺖ ﻫﺎ از ﻣﺮورﮔﺮﻫﺎي ﻧﺎﺳﺎزﮔﺎر ﺑﺎ ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﻓﺮا ﮔﺮﻓﺘﯿﻢ .اﻣﺎ ﭼﮕﻮﻧﻪ ﻣﯽ ﺗﻮان ﺑﺮاي ﮐﺎرﺑﺮاﻧﯽ ﮐﻪ از
اﯾﻦ ﻣﺮورﮔﺮﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﻨﺪ ﻧﯿﺰ ﻣﻄﻠﺐ ﺟﺎﯾﮕﺰﯾﻨﯽ ﻧﻤﺎﯾﺶ داد؟ ﺑﺮاي اﯾﻦ ﮐﺎر ﺑﺎﯾﺪ از ﺗﮕﯽ ﺑﻪ ﻧﺎم > <noscriptاﺳﺘﻔﺎده ﮐﻨﯿﻢ.
ﻣﺮورﮔﺮﻫﺎي ﺳﺎزﮔﺎر ﻫﺮ ﭼﯿﺰي را ﮐﻪ ﺑﯿﻦ دﺳﺘﻮرات آﻏﺎزﯾﻦ و ﭘﺎﯾﺎﻧﯽ > <noscriptﻗﺮار داﺷﺘﻪ ﺑﺎﺷﺪ ،ﻧﺎدﯾﺪه ﻣﯽ ﮔﯿﺮﻧﺪ .از ﻃﺮف
دﯾﮕﺮ ﻣﺮورﮔﺮﻫﺎي ﻗﺪﯾﻤﯽ اﯾﻦ دﺳﺘﻮر را ﻧﻤﯽ ﺷﻨﺎﺳﻨﺪ و ﺑﻨﺎﺑﺮاﯾﻦ آﻧﺮا ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ و ﺑﻪ ﺳﺮاغ دﺳﺘﻮرات ﺑﻌﺪي )ﮐﻪ ﺗﻮﺳﻂ اﯾﻦ دﺳﺘﻮر
اﺣﺎﻃﻪ ﺷﺪه اﻧﺪ( ﻣﯽ روﻧﺪ .ﺑﻪ ﻣﺜﺎل زﯾﺮ ﺗﻮﺟﻪ ﮐﻨﯿﺪ:
><html
><head
><title>Title of Page</title
>”<script language=”JavaScript
{ )(function sayHi
;)”alert(“Hi
}
></script
></head
><body
>”<script language=”JavaScript
;)(sayHi
></script
><noscript
<p>Your browser doesn’t support JavaScript. If it did
>support JavaScript, you would see this message: Hi!</p
></noscript
<p>This is the first text the user will see if JavaScript is
enabled. If
>JavaScript is disabled this is the second text the user will see.</p
></body
></html
ﺧﻄﺎﯾﺎﺑﯽ
زﻣﺎﻧﯽ ﮐﻪ ﻣﺮورﮔﺮﻫﺎ ﻗﺎدر ﺑﻪ اﺟﺮاي دﺳﺘﻮر ﺧﺎﺻﯽ از ﮐﺪﻫﺎي ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻧﺒﺎﺷﻨﺪ ،ﭘﯿﻐﺎﻣﯽ ﻣﺒﻨﯽ ﺑﺮ رﺧﺪاد ﯾﮏ ﺧﻄﺎ را ﻧﻤﺎﯾﺶ ﻣﯽ
دﻫﻨﺪ .ﻣﺎ ﺑﺮاي رﻓﻊ ﺧﻄﺎﻫﺎ ﺑﻪ اﯾﻦ ﭘﯿﻐﺎم ﻫﺎ ﻧﯿﺎز دارﯾﻢ اﻣﺎ ﻣﺘﺎﺳﻔﺎﻧﻪ درك ﺑﺴﯿﺎري از اﯾﻦ ﭘﯿﻐﺎم ﻫﺎ در ﻣﺮورﮔﺮﻫﺎي ﻣﺨﺘﻠﻒ دﺷﻮار
اﺳﺖ .اﻏﻠﺐ ﺑﺮاي ﻣﺸﺎﻫﺪه ﭘﯿﻐﺎم ﻫﺎ ﻣﯽ ﺑﺎﯾﺴﺖ ﺑﻪ consoleﺟﺎوااﺳﮑﺮﯾﭙﺖ در ﻣﺮورﮔﺮﻫﺎ ﻣﺮاﺟﻌﻪ ﮐﻨﯿﺪ:
_£] Done
اﻟﺒﺘﻪ ﻗﺒﻞ از ﻫﺮ ﭼﯿﺰ ﻣﯽ ﺑﺎﯾﺴﺖ از ﻓﻌﺎل ﺑﻮدن ﺧﻄﺎﯾﺎﺑﯽ و ﻧﻤﺎﯾﺶ ﭘﯿﻐﺎم ﻫﺎ در اﯾﻦ ﻣﺮورﮔﺮ اﻃﻤﯿﻨﺎن ﺣﺎﺻﻞ ﮐﻨﯿﺪ .ﺑﺮاي ﻓﻌﺎل ﺳﺎزي
اﯾﻦ اﻣﮑﺎن در ﻣﺴﯿﺮ Tools > Internet Options > Advancedاﺑﺘﺪا ﮔﺰﯾﻨﻪ Disable Script Debugging (Internet
) Explorerرا از ﺣﺎﻟﺖ اﻧﺘﺨﺎب ﺷﺪه ﺧﺎرج ﮐﺮده و ﮔﺰﯾﻨﻪ Display a notification about every script errorرا ﺗﯿﮏ
ﺑﺰﻧﯿﺪ:
r I k « I[ 111 Il IT J m
B
i
*
Internet Options ? l XI
OK Cancel Apply |
: ﭘﻨﺠﺮه اي ﺑﻪ ﺻﻮرت زﯾﺮ ﻧﻤﺎﯾﺶ داده ﺧﻮاﻫﺪ ﺷﺪ، ﺑﺎ ﻫﺮ ﺑﺎر رﺧﺪاد ﯾﮏ ﺧﻄﺎ،ﭘﺲ از اﻧﺠﺎم ﻣﻮارد ﻓﻮق
Error
Line: 7
Error : Object expected
l|
'"""
Yes No
ﻓﺼﻞ ﭼﻬﺎر
ﮐﺎرﺑﺎآراﯾﻪﻫﺎدرﺟﺎوااﺳﮑﺮﯾﭙﺖ
آراﯾﻪ ﻫﺎ در ﻫﻤﻪ زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺟﺰ ﻣﻬﻤﺘﺮﯾﻦ ﺳﺎﺧﺘﻤﺎن داده ﻫﺎ ﺑﻪ ﺷﻤﺎر ﻣﯽ روﻧﺪ .ﻧﻘﺶ آراﯾﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻧﯿﺰ
ﺑﺮاي اﯾﺠﺎد ﺑﺮﻧﺎﻣﻪ ﻫﺎي اﻧﻌﻄﺎف ﭘﺬﯾﺮ ﻧﯿﺰ اﻧﮑﺎرﻧﺎﭘﺬﯾﺮ اﺳﺖ .در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﻪ ﺑﺮرﺳﯽ روش ﻫﺎي ﺳﺎﺧﺖ آراﯾﻪ ﻫﺎ و وﯾﮋﮔﯽ ﻫﺎي
اﺻﻠﯽ آن ﭘﺮداﺧﺘﻪ و در اداﻣﻪ در ﻣﻮرد ﻧﺤﻮه دﺳﺘﮑﺎري آن ﻫﺎ ﻫﻤﭽﻮن اﺿﺎﻓﻪ ،ﺣﺬف ،اﻧﺘﺨﺎب و ﻣﺘﺮب ﺳﺎزي ﻋﻨﺎﺻﺮ آراﯾﻪ ﭘﺮداﺧﺘﻪ
و ﺑﻪ روش ﻫﺎي ﺗﺒﺪﯾﻞ آراﯾﻪ ﺑﻪ رﺷﺘﻪ و ﺑﺎﻟﻌﮑﺲ ﺧﻮاﻫﯿﻢ ﭘﺮداﺧﺖ.
اﮔﺮ از ﻗﺒﻞ ﺗﻌﺪاد ﻋﻨﺎﺻﺮ آراﯾﻪ ﻣﻮرد ﻧﻈﺮﺗﺎن را ﺑﺪاﻧﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﺪ:
;)var aValues = new Array(20
در آراﯾﻪ ﺑﺎﻻ ﺑﺎ ﻫﺮ ﺑﺎر اﺿﺎﻓﻪ ﮐﺮدن ﻋﻨﺼﺮ ﺟﺪﯾﺪ ﺑﻪ ﺻﻮرت ﺧﻮدﮐﺎر ﺑﻪ ﺗﻌﺪاد ﺧﺎﻧﻪ ﻫﺎي آن اﻓﺰوده ﻣﯽ ﺷﻮد.
اﮔﺮ ﺷﻤﺎ از ﻗﺒﻞ ﻣﻘﺎدﯾﺮي ﮐﻪ ﻗﺮار اﺳﺖ درآراﯾﻪ ﻗﺮار ﺑﮕﯿﺮﻧﺪ را ﺑﺪاﻧﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺻﻮرت ﻋﻤﻞ ﮐﻨﯿﺪ:
;)”var aColors = new Array(“red”, “green”, “blue
راه دﯾﮕﺮ اﯾﺠﺎد ﯾﮏ آراﯾﻪ اﺳﺘﻔﺎده از ﺑﺮاﮐﺖ ﻫﺎ )] [(و ﻋﻼﻣﺖ ,ﺑﯿﻦ ﻫﺮ ﻋﻨﺼﺮ از آراﯾﻪ اﺳﺖ ﺑﻪ ﺻﻮرت زﯾﺮ:
;]”var aColors = [“red”, “green”, “blue
”alert(aColors.length); //outputs “3
;”aColors[25] = “purple
”alert(aColors.length); //outputs “26
اﮔﺮ ﻫﯿﭻ ﺟﺪاﮐﻨﻨﺪه اي ﻣﺸﺨﺺ ﻧﺸﻮد ،اﯾﻦ ﺗﺎﺑﻊ آراﯾﻪ اي را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻫﺮ ﻋﻨﺼﺮ آن ﺷﺎﻣﻞ ﯾﮑﯽ از ﮐﺎراﮐﺘﺮﻫﺎي رﺷﺘﻪ ي
ﻣﻮرد ﻧﻈﺮ اﺳﺖ .ﺑﺮاي ﻣﺜﺎل:
;”var sColors = “green
;)”“(var aColors = sColors.split
”alert(aColors.toString()); //outputs “g,r,e,e,n
1
separator
29
alert(stack.toString()); //outputs “red,green,yellow”
var vItem = stack.pop();
alert(vItem); //outputs “yellow”
4 alert(stack.toString()); //outputs “red,green”
ﺑﺮاي ﺣﺬف و ﺑﺮﮔﺮداﻧﺪن.shift() ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم.ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺗﻮاﺑﻊ دﯾﮕﺮي ﺑﺮاي دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ اﺑﺘﺪاﯾﯽ آراﯾﻪ ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ
ﯾﮏ ﻋﻨﺼﺮ را ﺑﻪ اﺑﺘﺪاي آراﯾﻪ اﺿﺎﻓﻪ ﮐﺮده و ﺑﻘﯿﻪ ﻋﻨﺎﺻﺮ.unshift() از ﻃﺮف دﯾﮕﺮ ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم.ﻋﻨﺼﺮ اول آراﯾﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد
:را ﯾﮏ ﻣﻮﻗﻌﯿﺖ ﺑﻪ ﺟﻠﻮ ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ
var aColors = [“red”, “green”, “yellow”];
var vItem = aColors.shift();
alert(aColors.toString()); //outputs “green,yellow”
alert(vItem); //outputs “red”
aColors.unshift(“black”);
alert(aColors.toString()); //outputs “black,green,yellow”
:در ﺷﮑﻞ زﯾﺮ ﻧﺤﻮه ﻋﻤﻠﮑﺮد ﺗﻮاﺑﻊ ﻓﻮق ﺑﺮ روي ﯾﮏ آراﯾﻪ ﻋﺪدي ﻧﻤﺎﯾﺶ داده ﺷﺪه اﺳﺖ
Array
shift pop
0 1 2 3 4 push
unshift
در اﯾﻦ ﺻﻮرت. ﻋﻨﺎﺻﺮ آراﯾﻪ را ﺑﻪ ﺻﻮرت ﺻﻌﻮدي ﺑﺮ ﺣﺴﺐ ﻣﻘﺎدﯾﺮﺷﺎن ﻣﺮﺗﺐ ﻣﯽ ﮐﻨﺪ.sort() از ﻃﺮف دﯾﮕﺮ ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم
: ﻣﺜﺎل.ﻋﻨﺎﺻﺮ آراﯾﻪ ﺑﺮ ﺣﺴﺐ ﮐﺪﻫﺎي ﮐﺎراﮐﺘﺮي ﺷﺎن ﻣﺮﺗﺐ ﻣﯽ ﺷﻮﻧﺪ
var aColors = [“red”, “green”, “blue”, “yellow”];
aColors.sort();
alert(aColors.toString()); //outputs “blue,green,red,yellow”
1
ordering
در ﺻﻮرﺗﯽ ﮐﻪ ﻋﻨﺎﺻﺮ آراﯾﻪ اﻋﺪاد ﺑﺎﺷﻨﺪ ﻧﺘﯿﺠﻪ ﮐﻤﯽ ﻋﺠﯿﺐ و ﻏﺮﯾﺐ اﺳﺖ:
]var aColors = [3, 32, 2, 5
;)(aColors.sort
”alert(aColors.toString()); //outputs “2,3,32,5 30
4
ﻫﻤﺎﻧﻄﻮر ﮐﻪ اﺷﺎره ﺷﺪ ﻣﺘﺪ )( .sortﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض ﻋﻨﺎﺻﺮ آراﯾﻪ را ﺑﻪ ﺻﻮرت اﻟﻔﺒﺎﯾﯽ )ﺑﺮ ﺣﺴﺐ ﮐﺪﻫﺎي ﮐﺎراﮐﺘﺮي آن ﻫﺎ(
و ﺑﻪ ﺻﻮرت ﺻﻌﻮدي ﻣﺮﺗﺐ ﻣﯽ ﮐﻨﺪ .ﭼﻨﺎﻧﭽﻪ ﺑﺨﻮاﻫﯿﻢ آراﯾﻪ اي از اﻋﺪاد را ﺑﻪ ﺻﻮرت ﺻﻌﻮدي ﻣﺮﺗﺐ ﮐﻨﯿﻢ ﻣﯽ ﺑﺎﯾﺴﺖ ﻣﯽ ﺑﺎﯾﺴﺖ
از ﯾﮏ ﺗﺎﺑﻊ ﻣﻘﺎﯾﺴﻪاي ﮐﻪ در ﻗﺎﻟﺐ ﯾﮏ آرﮔﻮﻣﺎن ﺑﺮاي اﯾﻦ ﻣﺘﺪ ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد اﺳﺘﻔﺎده ﮐﻨﯿﻢ .ﺧﻮد اﯾﻦ ﺗﺎﺑﻊ ﻣﻘﺎﯾﺴﻪ اي ﻫﻤﯿﺸﻪ
دو آرﮔﻮﻣﺎن)ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل (a,bﮔﺮﻓﺘﻪ ،آن ﻫﺎ را ﺑﺎ ﻫﻢ ﻣﻘﺎﯾﺴﻪ ﮐﺮده و آراﯾﻪي اﺻﻠﯽ ﺑﺮاﺳﺎس ﻣﻘﺎدﯾﺮ ﺑﺎزﮔﺸﺘﯽ اﯾﻦ ﺗﺎﺑﻊ اﻧﺠﺎم ﻣﯽ
ﺷﻮد.
ﻣﻘﺪار ﺑﺎزﮔﺸﺘﯽ ﺗﺎﺑﻊ ﻣﻘﺎﯾﺴﻪ اي ﺑﻪ ﯾﮑﯽ از ﺳﻪ ﺻﻮرت زﯾﺮ اﺳﺖ:
ﭼﻨﺎﻧﭽﻪ ﻣﯽ ﺑﺎﯾﺴﺖ )bآرﮔﻮﻣﺎن دوم( ﻗﺒﻞ از )aآرﮔﻮﻣﺎن اول( ﻗﺮار ﺑﮕﯿﺮد ﻣﻘﺪاري ﻣﺜﺒﺖ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ.
ﭼﻨﺎﻧﭽﻪ ﻣﯽ ﺑﺎﯾﺴﺖ ﻣﮑﺎن aو bﺗﻐﯿﯿﺮي ﻧﮑﻨﺪ ﻣﻘﺪار ﺻﻔﺮ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ.
ﭼﻨﺎﻧﭽﻪ ﻣﯽ ﺑﺎﯾﺴﺖ aﻗﺒﻞ از bﻗﺮار ﺑﮕﯿﺮد ﻣﻘﺪاري ﻣﻨﻔﯽ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ.
ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل در ﺻﻮرﺗﯽ ﮐﻪ ﺗﺎﺑﻊ زﯾﺮ را ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎن ﺑﺮاي ﻣﺘﺪ sort().ﺑﻔﺮﺳﺘﯿﻢ آراﯾﻪ ﺑﻪ ﺻﻮرت ﺻﻌﻮدي ﻣﺮﺗﺐ ﺧﻮاﻫﺪ ﺷﺪ:
{)function Compare(a,b
{)If(a>b
;Return 1
{)}else if (a<b
;Return -1
{}else
;Return 0
}
}
دﻗﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ ﺑﺪﻧﻪ ﺗﺎﺑﻊ ﻓﻮق را ﻣﯽ ﺗﻮان ﺑﻪ ﺷﮑﻞ زﯾﺮ ﮐﻮﺗﺎﻫﺘﺮ و ﺳﺎده ﺗﺮ ﮐﺮد ﺿﻤﻦ اﯾﻨﮑﻪ ﻫﻤﺎن ﻋﻤﻠﮑﺮد را ﺧﻮاﻫﺪ داﺷﺖ:
{)function Compare(a,b
;Return a-b
}
ﺑﺮاي ﻣﺮﺗﺐ ﺳﺎزي آراﯾﻪ ﺑﻪ ﺻﻮرت ﻋﺪدي ﻧﺰوﻟﯽ ﮐﺎﻓﯽ اﺳﺖ ﺟﺎي 1و -1در ﺗﺎﺑﻊ ﻣﻘﺎﯾﺴﻪ اي را ﻋﻮض ﮐﻨﯿﺪ.
r
ﻓﺼﻞ ﭘﻨﺞ
ﮐﺎرﺑﺎرﺷﺘﻪﻫﺎدرﺟﺎوااﺳﮑﺮﯾﭙﺖ
y
اﯾﻦ ﻓﺼﻞ ﺑﻪ ﺑﺮرﺳﯽ رﺷﺘﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻣﯽ ﭘﺮدازد .در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﻪ روش ﻫﺎي اﯾﺠﺎد رﺷﺘﻪ ﻫﺎ در ﺟﺎوااﺳﮑﺮﯾﭙﺖ
ﭘﺮداﺧﺘﻪ و ﺳﭙﺲ ﺑﻪ ﺗﻮﺿﯿﺢ روش ﻫﺎي دﺳﺘﮑﺎري آن ﻫﺎ ﻫﻤﭽﻮن ﺟﺪاﮐﺮدن زﯾﺮ رﺷﺘﻪ ﻫﺎ ،اﻟﺤﺎق و ﻣﻘﺎﯾﺴﻪ رﺷﺘﻪ ﻫﺎ و ...ﺧﻮاﻫﯿﻢ
ﭘﺮداﺧﺖ.
اﺷﯿﺎي از ﻧﻮع stringﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم .lengthدارﻧﺪ ﮐﻪ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي رﺷﺘﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ .اﯾﻦ ﺷﯽ از ﭼﻨﺪﯾﻦ ﻣﺘﺪ ﻧﯿﺰ
ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﺪ ﮐﻪ در اداﻣﻪ ﺷﺮح ﺧﻮاﻫﯿﻢ داد:
ﮔﺮ ﭼﻨﺎﻧﭽﻪ ﻣﯽ ﺧﻮاﻫﯿﺪ ﺑﻪ ﺟﺎي ﺧﻮد ﮐﺎراﮐﺘﺮ ﮐﺪ ﮐﺎراﮐﺘﺮي آن را ﺑﺪﺳﺖ آورﯾﺪ از ﻣﺘﺪ )( .charCodeAtاﺳﺘﻔﺎده ﮐﻨﯿﺪ:
;)”var oStringObject = new String(“hello world
”alert(oStringObject.charCodeAt(1)); //outputs “101
اﻟﺤﺎق دو رﺷﺘﻪ
ﻣﺘﺪ دﯾﮕﺮ )( .concatاﺳﺖ ﮐﻪ ﺑﺮاي اﻟﺤﺎق دو رﺷﺘﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .ﺑﺮاي ﻣﺜﺎل:
;)“ var oStringObject = new String(“hello
;)”var sResult = oStringObject.concat(“world
”alert(sResult); //outputs “hello world
“ alert(oStringObject); //outputs “hello
ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده از ﻣﺘﺪ )( .concatﻣﯽ ﺗﻮان از ﻋﻤﻠﮕﺮ +ﻧﯿﺰ ﺑﺮاي اﻟﺤﺎق دو رﺷﺘﻪ اﺳﺘﻔﺎده ﮐﺮد.
در ﺻﻮرﺗﯽ ﮐﻪ ﺣﺮف Oدر ﻋﺒﺎرت ﺑﺎﻻ ﻓﻘﻂ ﯾﮑﺒﺎر ﺗﮑﺮار ﻣﯽ ﺷﺪ ﻫﺮ دو اﯾﻦ ﻣﺘﺪ ﻫﺎ ﻓﻘﻂ ﯾﮏ ﻣﻘﺪار راﺑﺮ ﻣﯽ ﮔﺮداﻧﻨﺪ.
در ﻣﺘﺪﻫﺎي )( .indexOfو)( .lastIndexOfﻣﯽ ﺗﻮان از ﯾﮏ آرﮔﻮﻣﺎن اﺧﺘﯿﺎري دﯾﮕﺮ ﻧﯿﺰ ﺑﻪ ﻣﻨﻈﻮر ﺗﻌﯿﯿﻦ ﮐﺎراﮐﺘﺮي ﮐﻪ ﻋﻤﻞ
ﺟﺴﺘﺠﻮ ﺑﺎﯾﺪ از آن ﺷﺮوع ﺷﻮد ،اﺳﺘﻔﺎده ﮐﺮد .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل درﮐﺪ زﯾﺮ ﻋﻤﻞ ﺟﺴﺘﺠﻮ از ﭼﻬﺎرﻣﯿﻦ ﮐﺎراﮐﺘﺮ ﺷﺮوع ﻣﯽ ﺷﻮد و در
ﻧﺘﯿﺠﻪ ﻣﻘﺪار ) 5ﯾﻌﻨﯽ ﻣﻮﻗﻌﯿﺖ دوﻣﯿﻦ (aﺑﺮﮔﺮداﻧﺪه ﻣﯽ ﺷﻮد:
Var example = ;”“I am a javascript hacker
Alert(example.indexOf(‘a’,3));// output 5
ﻣﺜﺎل ﻫﺎ:
;)”var oStringObject = new String(“yellow
”alert(oStringObject.localeCompare(“brick”)); //outputs “1
”alert(oStringObject.localeCompare(“yellow”)); //outputs “0 36
”alert(oStringObject.localeCompare (“zoo”)); //outputs “-1
5
ﻫﺮ دو اﯾﻦ ﻣﺘﺪ ﻫﺎ ﯾﮏ ﯾﺎ دو آرﮔﻮﻣﺎن را ﻣﯽ ﭘﺬﯾﺮﻧﺪ ﮐﻪ آرﮔﻮﻣﺎن اول ﻣﺤﻞ ﺷﺮوع و آرﮔﻮﻣﺎن دوم ﻣﺤﻞ ﭘﺎﯾﺎن را ﺗﻌﯿﯿﻦ ﻣﯽ ﮐﻨﺪ.
)اﻟﺒﺘﻪ ﺧﻮدآرﮔﻮﻣﺎن دوم ﺟﺰ زﯾﺮ رﺷﺘﻪ ﻧﺨﻮاﻫﺪ ﺑﻮد(.
اﮔﺮ آرﮔﻮﻣﺎن دوم ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ ﺷﻮد ﻃﻮل رﺷﺘﻪ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺧﻮاﻫﺪ ﺷﺪ.
ﭼﯿﺰي ﮐﻪ اﯾﻦ دو ﻣﺘﺪ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ زﯾﺮ رﺷﺘﻪ ﺣﺎﺻﻞ اﺳﺖ:
;)”var oStringObject = new String(“hello world
”alert(oStringObject.slice(3)); //outputs “lo world
”alert(oStringObject.substring(3)); //outputs “lo world
”alert(oStringObject.slice(3, 7)); //outputs “lo w
”alert(oStringObject.substring(3,7)); //outputs “lo w
ﺳﻮاﻟﯽ ﮐﻪ دراﯾﻨﺠﺎ ﭘﯿﺶ ﻣﯽ آﯾﺪ اﯾﻦ اﺳﺖ ﮐﻪ ﭼﺮا دﻗﯿﻘﺎ اﯾﻦ دو ﺗﺎﺑﻊ ﺑﮏ ﮐﺎر را اﻧﺠﺎم ﻣﯽ دﻫﻨﺪ ؟ در ﺣﻘﯿﻘﺖ ﺗﻔﺎوت آن ﻫﺎ در ﮐﺎر
ﺑﺎ آرﮔﻮﻣﺎن ﻫﺎي ﻣﻨﻔﯽ اﺳﺖ.
ﺑﺮاي ﻣﺘﺪ )( .sliceآرﮔﻮﻣﺎن ﻣﻨﻔﯽ ﺑﺎ ﻃﻮل رﺷﺘﻪ ﺟﻤﻊ ﺷﺪه و ﺣﺎﺻﻞ آن ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎن اﺻﻠﯽ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد .در ﺣﺎﻟﯽ
ﮐﻪ ﺑﺮاي ﺗﺎﺑﻊ )( .sustringﻣﻘﺎدﯾﺮ ﻣﻨﻔﯽ ﺑﻪ ﻋﻨﻮان ﺻﻔﺮ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد).درواﻗﻊ ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮﻧﺪ(.
ﻣﺜﺎل ﻫﺎ:
;)”var oStringObject= new String(“hello world
”alert(oStringObject.slice(-3)); //outputs “rld
”alert(oStringObject.substring(-3)); //outputs “hello world
”alert(oStringObject.slice(3, -4)); //outputs “lo w
”alert(oStringObject.substring(3,-4)); //outputs “hel
در ﺧﻂ دوم از ﮐﺪ ﺑﺎﻻ ﭼﻮن آرﮔﻮﻣﺎن ﻣﻨﻔﯽ اﺳﺖ ﻃﻮل رﺷﺘﻪ ﺑﺎ -3ﺟﻤﻊ ﻣﯽ ﺷﻮد ﮐﻪ ﺣﺎﺻﻞ 8اﺳﺖ درواﻗﻊ دﺳﺘﻮر زﯾﺮ اﺟﺮا
ﻣﯿﺸﻮد:
;)oStringObject.slice(8
ﮐﻪ از ﺧﺎﻧﻪ ﻫﺸﺘﻢ رﺷﺘﻪ ﺗﺎ اﻧﺘﻬﺎي آراﯾﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ .اﻣﺎ در ﺧﻂ ﺳﻮم آرﮔﻮﻣﺎن ﻣﻨﻔﯽ ﺻﻔﺮ درﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد .ﯾﻌﻨﯽ:
;)oStringObject.substring(0
37
و در ﺧﻂ ﭘﻨﺠﻢ ﺣﺎﺻﻞ ﺑﻪ ﺻﻮرت زﯾﺮ ﻣﺤﺎﺳﺒﻪ ﻣﯽ ﺷﻮد:
;)oStringObject.substring(3,0
5
ﻧﮑﺘﻪ :ﺗﺮﺗﯿﺐ آرﮔﻮﻣﺎن ﻫﺎ در ﻣﺘﺪﻫﺎي)( .sliceو)( .substringاﻫﻤﯿﺘﯽ ﻧﺪارد .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل
ﺣﺎﺻﻞ) .subString(3,6ﺑﺎ) .subString(6,3ﺗﻔﺎوﺗﯽ ﻧﺨﻮاﻫﻨﺪ داﺷﺖ .ﺑﻪ ﻫﺮ ﺣﺎل آرﮔﻮﻣﺎن ﮐﻮﭼﮑﺘﺮ ﺑﻪ
ﻋﻨﻮان ﺣﺪ اﺑﺘﺪاﯾﯽ و ﭘﺎراﻣﺘﺮ ﺑﺰرﮔﺘﺮ ﺑﻪ ﻋﻨﻮان ﺣﺪ اﻧﺘﻬﺎﯾﯽ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮد.
ﻧﮑﺘﻪ :در ﺻﻮرﺗﯽ ﮐﻪ آرﮔﻮﻣﺎن ﻫﺎي ارﺳﺎﻟﯽ ﺑﻪ ﻣﺘﺪ ﻫﺎي)( .sliceو)( .substringﯾﮑﺴﺎن ﺑﺎﺷﻨﺪ،
ﻣﻘﺪار nullﺑﺮﮔﺮداﻧﺪه ﻣﯽ ﺷﻮد.
ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﻣﺘﺪي ﺑﻪ ﻧﺎم)( .substrﻧﯿﺰ ﺑﺮاي ﺟﺪاﮐﺮدن زﯾﺮ رﺷﺘﻪ ﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ.اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﮔﯿﺮد ﮐﻪ اوﻟﯽ
ﻣﻮﻗﻌﯿﺖ ﺷﺮوع و دوﻣﯽ ﻃﻮل زﯾﺮ رﺷﺘﻪ اي ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ از رﺷﺘﻪ اﺻﻠﯽ ﺟﺪا ﮐﻨﯿﻢ ﺧﻮاﻫﺪ ﺑﻮد .در ﺻﻮرﺗﯽ ﮐﻪ آرﮔﻮﻣﺎن دوم ذﮐﺮ
ﻧﺸﻮد ﻋﻤﻞ ﺟﺪاﮐﺮدن ﺗﺎ اﻧﺘﻬﺎي رﺷﺘﻪ ﺧﻮاﻫﺪ ﺑﻮد .ﺑﻪ ﻣﺜﺎل زﯾﺮ ﺗﻮﺟﻪ ﮐﻨﯿﺪ:
var myString = ;”“javascript
var mySubStr = ;)myString.substr(0,4
;)alert(mySubStr // ”output “java
f
ﻓﺼﻞ ﺷﺶ
)
'/
اﺷﯿﺎيدروﻧﯽ)1ﭘﯿﺶﺳﺎﺧﺘﻪ(
ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺷﺎﻣﻞ ﺗﻌﺪادي ﺷﯽ از ﭘﯿﺶ ﺳﺎﺧﺘﻪ اﺳﺖ ﮐﻪ ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ﻣﯽ ﺗﻮاﻧﻨﺪ از آن ﻫﺎ در ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺧﻮد اﺳﺘﻔﺎده ﮐﻨﻨﺪ.
در واﻗﻊ ﮐﻼس ﻫﺎﯾﯽ ﺑﺮاي اﯾﻦ اﺷﯿﺎ ﻧﺪارﯾﻢ و ﻻزم ﻧﯿﺴﺖ ﺷﯽ اي از روي آن ﻫﺎ ﺳﺎﺧﺘﻪ ﺷﻮد.
ﺷﯽ Math
ﯾﮑﯽ از اﺷﯿﺎي از ﭘﯿﺶ ﺳﺎﺧﺘﻪ ﺷﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺖ ﮐﻪ ﺑﺮاي اﻧﺠﺎم ﻣﺤﺎﺳﺒﺎت ﻋﺪدي و ﻋﻤﻠﯿﺎت ﻣﺮﺑﻮط ﺑﻪ رﯾﺎﺿﯿﺎت اﺳﺘﻔﺎده
ﻣﯽ ﺷﻮد .اﯾﻦ ﺷﯽ ﺷﺎﻣﻞ ﯾﮑﺴﺮي ﺧﺎﺻﯿﺖ و ﻣﺘﺪ اﺳﺖ ﮐﻪ اﻧﺠﺎم ﻣﺤﺎﺳﺒﺎت را آﺳﺎن ﻣﯽ ﮐﻨﺪ. 40
6
ﻣﺘﺪﻫﺎي )( .minو )(.max
از اﯾﻦ ﺗﻮاﺑﻊ ﺑﺮاي ﭘﯿﺪاﮐﺮدن ﮐﻮﭼﮑﺘﺮﯾﻦ و ﺑﺰرﮔﺘﺮﯾﻦ ﻣﻘﺎدﯾﺮ از ﺑﯿﻦ ﭼﻨﺪ ﻋﺪد اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .اﯾﻦ ﻣﺘﺪ ﻫﺎ ﻫﺮ ﺗﻌﺪاد ﭘﺎراﻣﺘﺮ را ﻣﯽ
ﺗﻮاﻧﻨﺪ ﺑﭙﺬﯾﺮﻧﺪ:
var iMax = Math.max(3, ;)54, 32, 16
alert(iMax); //outputs ”“54
var iMin = Math.min(3, ;)54, 32, 16
alert(iMin); //outputs ”“3
اﯾﻦ ﺗﻮاﺑﻊ ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از ﻧﻮﺷﺘﻦ ﺑﺮﻧﺎﻣﻪ ﻫﺎي اﺿﺎﻓﯽ ﺑﺮاي ﭘﯿﺪاﮐﺮدن minو maxاﻋﺪاد ﻣﯽ ﺗﻮاﻧﺪ اﺳﺘﻔﺎده ﺷﻮد.
ﯾﮑﯽ از ﻣﺘﺪ ﻫﺎ .abs() ،اﺳﺖ ﮐﻪ ﻗﺪر ﻣﻄﻠﻖ اﻋﺪاد ﮔﺮﻓﺘﻪ ﺷﺪه را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ.
ﮔﺮوﻫﯽ دﯾﮕﺮ از ﻣﺘﺪ ﻫﺎ ﮐﻪ ﺑﺮاي ﮔﺮد ﮐﺮدن اﻋﺪاد اﻋﺸﺎري ﺑﻪ ﺻﺤﯿﺢ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮﻧﺪ .اﯾﻦ ﺗﻮاﺑﻊ ﺷﺎﻣﻞ )( .ceilو
)( .floorو )( .roundﻫﺴﺘﻨﺪ.
ﺗﺎﺑﻊ )( :roundاﯾﻦ ﺗﺎﺑﻊ ﻋﺪد ﮔﺮﻓﺘﻪ ﺷﺪه را ﺑﻪ ﻋﺪد ﺻﺤﯿﺢ ﺑﺎﻻﺗﺮ ﮔﺮد ﻣﯽ ﮐﻨﺪ اﮔﺮ ﻗﺴﻤﺖ اﻋﺸﺎري ا زﻧﺼﻒ ﺑﯿﺸﺘﺮ ﯾﺎ
ﻣﺴﺎوي ﺑﺎﺷﺪ و در ﻏﯿﺮ اﯾﻦ ﺻﻮرت آن را ﺑﻪ ﻋﺪد ﺻﺤﯿﺢ ﭘﺎﯾﯿﻦ ﺗﺮ ﮔﺮد ﻣﯽ ﮐﻨﺪ.
ﺗﺎﺑﻊ )( :ceilاﯾﻦ ﺗﺎﺑﻊ ﺑﺪون در ﻧﻈﺮ ﮔﺮﻓﺘﻦ ﻗﺴﻤﺖ اﻋﺸﺎري آن را ﺑﻪ ﮐﻮﭼﮑﺘﺮﯾﻦ ﻋﺪد ﺻﺤﯿﺢ ﺑﻌﺪي ﮔﺮد ﻣﯽ ﮐﻨﺪ.
ﺗﺎﺑﻊ )( :floorاﯾﻦ ﺗﺎﺑﻊ ﺑﺪون در ﻧﻈﺮ ﮔﺮﻓﺘﻦ ﻗﺴﻤﺖ اﻋﺸﺎري آن را ﺑﻪ ﺑﺰرﮔﺘﺮﯾﻦ ﻋﺪد ﺻﺤﯿﺢ ﻗﺒﻠﯽ ﮔﺮد ﻣﯽ ﮐﻨﺪ.
ﺑﻪ ﻣﺜﺎل ﻫﺎي زﯾﺮ ﺗﻮﺟﻪ ﮐﻨﯿﺪ:
”alert(Math.ceil(25.5)); //outputs “26
”alert(Math.round(25.5)); //outputs “26
”alert(Math.floor(25.5)); //outputs “25
41 اﻟﺒﺘﻪ ﺑﺮاي ﺗﻮﻟﯿﺪ اﻋﺪاد ﺗﺼﺎدﻓﯽ در ﯾﮏ ﻣﺤﺪوده ﺧﺎص از ﻓﺮﻣﻮل زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد:
ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﯾﺮاي اﯾﺠﺎد ﻣﻘﺎدﯾﺮ ﺗﺼﺎدﻓﯽ ﺑﯿﻦ 1و 10ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻣﯽ ﺷﻮد:
;)var iNum = Math.floor(Math.random() * 10 + 1
ﺑﻬﺘﺮﯾﻦ راه ﺑﺮاي اﯾﺠﺎد ﻣﻘﺎدﯾﺮ ﺗﺼﺎدﻓﯽ اﺳﺘﻔﺎده از ﯾﮏ ﺗﺎﺑﻊ اﺳﺖ ﮐﻪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻧﻮﺷﺘﻪ ﻣﯽ ﺷﻮد:
{ )function selectFrom(iFirstValue, iLastValue
;var iChoices = iLastValue – iFirstValue + 1
;)return Math.floor(Math.random() * iChoices + iFirstValue
}
//select from between 2 and 10
;)var iNum = selectFrom(2, 10
اﺳﺘﻔﺎده از اﯾﻦ ﺗﺎﺑﻊ ﺑﺮاي اﻧﺘﺨﺎب ﯾﮏ ﻋﻨﺼﺮ ﺗﺼﺎدﻓﯽ از آراﯾﻪ ﺑﺴﯿﺎر آﺳﺎن اﺳﺖ .ﺑﺮاي ﻣﺜﺎل:
var aColors = [“red”, “green”, “blue”, “yellow”, “black”, “purple”,
;]”“brown
;])var sColor = aColors[selectFrom(0, aColors.length-1
در اﯾﻨﺠﺎ آرﮔﻮﻣﺎن دوم ﺗﺎﺑﻊ ،ﻃﻮل آراﯾﻪ ﻣﻨﻬﺎي 1اﺳﺖ ﮐﻪ در واﻗﻊ ﻣﻮﻗﻌﯿﺖ آﺧﺮﯾﻦ ﻋﻨﺼﺮ ﻣﯽ ﺑﺎﺷﺪ.
آﺧﺮﯾﻦ ﺗﺎﺑﻌﯽ ﮐﻪ ﺑﻪ ﻧﻈﺮ ﻗﺪرﺗﻤﻨﺪ ﻣﯽ آﯾﺪ )( evalاﺳﺖ .اﯾﻦ ﺗﺎﺑﻊ ﮐﻪ ﺷﺒﯿﻪ ﺑﻪ ﻣﻔﺴﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﮐﺎر ﻣﯽ ﮐﻨﺪ آرﮔﻮﻣﺎﻧﯽ از ﻧﻮع
رﺷﺘﻪ ﻣﯽ ﮔﯿﺮد ﮐﻪ در واﻗﻊ ﯾﮏ ﺑﺮﻧﺎﻣﻪ ﺑﻪ زﺑﺎن ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺖ و اﯾﻦ ﺗﺎﺑﻊ آن را ﻫﻤﺎﻧﻨﺪ ﺳﺎﯾﺮ ﺑﺮﻧﺎﻣﻪ ﻫﺎ اﺟﺮا ﻣﯽ ﮐﻨﺪ .ﺑﺮاي
ﻣﺜﺎل:
;)”)’eval(“alert(‘hi
ﻣﻮﻗﻌﯽ ﮐﻪ ﻣﻔﺴﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ اﯾﻦ ﺗﺎﺑﻊ ﻣﯽ رﺳﺪ آرﮔﻮﻣﺎن آن را ﺑﻪ ﻋﻨﻮان ﯾﮏ دﺳﺘﻮر ﺧﯿﻠﯽ ﺳﺎده ﺗﻔﺴﯿﺮ ﮐﺮده و اﺟﺮا ﻣﯽ ﮐﻨﺪ.
اﯾﻦ ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ اﺳﺖ ﮐﻪ ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ از داﺧﻞ آرﮔﻮﻣﺎن ﻫﺎي اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ ﺗﻤﺎم ﻣﺘﻐﯿﺮﻫﺎي ﺧﺎرج آن دﺳﺘﺮﺳﯽ داﺷﺘﻪ و از آن ﻫﺎ
اﺳﺘﻔﺎده ﮐﻨﯿﺪ :
;”var msg = “hello world
;)”)eval(“alert(msg
ﻫﻤﭽﻨﯿﻦ ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ آرﮔﻮﻣﺎن ﺗﺎﺑﻊ )( evalرا ﯾﮏ ﺗﺎﺑﻊ ﺗﻌﺮﯾﻒ ﮐﺮده و ﺳﭙﺲ آن را ﺧﺎرج از ﺗﺎﯾﻊ )( evalﺻﺪا ﺑﺰﻧﯿﺪ .ﺑﺮاي
ﻣﺜﺎل:
;)”} ;)’eval(“function sayHi() { alert(‘hi
;)(sayHi
6 ﻧﯿﺎز را از ﺳﯿﺴﺘﻢ ﮔﺮﻓﺘﻪ و در اﺧﺘﯿﺎر ﮐﺎرﺑﺮان ﻗﺮار ﻣﯽ دﻫﻨﺪ .ﯾﮑﯽ از اﯾﻦ اﺷﯿﺎء Date ،ﻣﯽ ﺑﺎﺷﺪ ﮐﻪ ﺑﻪ ﮐﻤﮏ آن ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﺎرﯾﺦ و
زﻣﺎن ﺳﯿﺴﺘﻢ را ﻫﻨﮕﺎم اﺟﺮاي ﮐﺪ درﯾﺎﻓﺖ ﮐﻨﯿﻢ ،ﺳﭙﺲ آﻧﺮا ﻧﻤﺎﯾﺶ دﻫﯿﻢ و ﯾﺎ اﯾﻨﮑﻪ در ﯾﮏ ﻣﺘﻐﯿﺮ ذﺧﯿﺮه ﮐﻨﯿﻢ ﺗﺎ در ﺻﻮرت ﻟﺰوم
از آن ﺑﻬﺮه ﮔﯿﺮﯾﻢ .ﺑﺮاي اﯾﺠﺎد ﺷﯽ اي از اﯾﻦ ﻧﻮع ﻣﯽ ﺗﻮان ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﮐﺮد:
;)(var d = new Date
ﺷﯽ )( Dateﺗﻌﺪاد ﻫﺰارم ﺛﺎﻧﯿﻪ ﻫﺎي ﮔﺬﺷﺘﻪ از ﺳﺎﻋﺖ 12:00:00روز 01/01/1970ﺗﺎ زﻣﺎن و ﺗﺎرﯾﺦ ﮐﻨﻮﻧﯽ را در ﺧﻮد ﻧﮕﻪ
داري ﻣﯽ ﮐﻨﺪ .اﯾﻦ ﺷﯽ داراي ﻣﺘﺪي ﺑﻪ ﻧﺎم )( .valueOfﻣﯽ ﺑﺎﺷﺪ ﮐﻪ اﯾﻦ ﻣﻘﺪار را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﻪ ﮐﺪ زﯾﺮ ﻧﮕﺎه
ﮐﻨﯿﺪ:
>"<script type="text/javascript
;)(var d=new Date
;))(document.write(d.valueOf
></script
44
)(getDate
1ﺗﺎ 31ﺑﺎﺷﺪ.
ﻣﺎﻫﯽ از ﺳﺎل را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﻘﺪاري از 0ﺗﺎ 11
)(getMonth
ﻣﯽ ﺑﺎﺷﺪ 6
ﺳﺎل را در ﻗﺎﻟﺐ 4ﻋﺪد ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ )(getFullYear
ﺳﺎﻋﺘﯽ از روز را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﻣﻘﺪاري
)(getHours
از 0ﺗﺎ 23ﺑﺎﺷﺪ
دﻗﯿﻘﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﻘﺪاري از 0ﺗﺎ 59اﺳﺖ. )(getMinutes
ﺛﺎﻧﯿﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﻘﺪاري از 0ﺗﺎ 59اﺳﺖ )(getSeconds
روزي از ﻫﻔﺘﻪ را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﻣﻘﺪاري
از 0ﺗﺎ 6ﺑﺎﺷﺪ. )(getDay
) 6ﺑﻪ ﻣﻌﻨﯽ (sunday
ﺗﻌﺪاد ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ ﻫﺎي ﮔﺬﺷﺘﻪ از ﺗﺎرﯾﺦ 1/1/1970را
)(getTime
ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ
ﺗﻌﺪاد ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ ﻫﺎي ﮔﺬﺷﺘﻪ از ﺗﺎرﯾﺦ 1/1/1970را
)(valueOf
ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ
رﺷﺘﻪ اي ﺣﺎوي اﻃﻼﻋﺎﺗﯽ ﻫﻤﭽﻮن ﻣﺨﻔﻒ ﻧﺎم روز
)(toString
ﺟﺎري ،ﻣﺎه ﺟﺎري و ...را ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ.
ﻋﻼوه ﺑﺮ ﻣﺘﺪ ﻫﺎي ﻓﻮق ،ﺷﯽ Dateاز ﻣﺘﺪي ﺑﻪ ﻧﺎم )( getTimezoneOffsetﮐﻪ اﺧﺘﻼف ﺑﯿﻦ زﻣﺎن ﻣﺤﻠﯽ و زﻣﺎن واﺣﺪ
ﺟﻬﺎﻧﯽ راﺑﺮ ﺣﺴﺐ دﻗﯿﻘﻪ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﻧﯿﺰ ﭘﺸﺘﯿﺎﻧﯽ ﻣﯽ ﮐﻨﺪ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﯾﻦ ﻣﺘﺪ ﻣﻘﺪار ٢١٠را ﺑﺮاي وﻗﺖ ﻣﺤﻠﯽ اﯾﺮان ﺑﺮ
ﻣﯽ ﮔﺮداﻧﺪ) .ﮐﻪ ﻫﻤﺎن اﺧﺘﻼف ٣:٣٠دﻗﯿﻘﻪ اي ﺳﺎﻋﺖ ﺗﻬﺮان ﻧﺴﺒﺖ ﺑﻪ زﻣﺎن واﺣﺪ ﺟﻬﺎﻧﯽ اﺳﺖ( .
r
ﻓﺼﻞ ﻫﻔﺖ
BOM؛ﻣﺪلﺷﯽﮔﺮايﻣﺮورﮔﺮ
-S
BOMﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از اﺟﺰاي اﺻﻠﯽ و اﺑﺘﺪاﯾﯽ ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻧﻘﺶ ﻣﻬﻤﯽ در ﺗﻌﺎﻣﻞ ﮐﺎرﺑﺮان ﺑﺎ ﺑﺨﺶ ﻫﺎي
ﮔﻮﻧﺎﮔﻮن ﻣﺮورﮔﺮﻫﺎ ﻫﻤﭽﻮن ﺑﺨﺶ ﻧﻤﺎﯾﺶ ﺳﻨﺪ ،ﻓﺮﯾﻢ ﻫﺎ ،ﭘﻨﺠﺮه ﻫﺎ ،ﺗﺎرﯾﺨﭽﻪ ،1ﻣﺸﺨﺼﺎت ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ و ﻣﺮورﮔﺮ و ...اﯾﻔﺎ ﻣﯽ
ﮐﻨﺪ .ﻣﺎ در اﯾﻦ ﺑﺨﺶ اﺑﺘﺪا ﺑﺎ BOMآﺷﻨﺎ ﺷﺪه و ﺳﭙﺲ ﺑﻪ ﺑﺮرﺳﯽ ﺑﺨﺶ ﻫﺎي ﺗﺸﮑﯿﻞ دﻫﻨﺪه آن و ﻫﺮ ﯾﮏ از ﺧﺼﻮﺻﯿﺎت آن ﻫﺎ
ﺧﻮاﻫﯿﻢ ﭘﺮداﺧﺖ.
1
history
ِ BOMﭼﯿﺴﺖ؟
46
آﺷﻨﺎﯾﯽ ﺑﺎ ﻣﻔﻬﻮم BOMﺑﻪ ﻣﻨﻈﻮر ﯾﺎدﮔﯿﺮي و اﺳﺘﻔﺎده ﮐﺎرآﻣﺪ از ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺴﯿﺎر اﻫﻤﯿﺖ دارد BOM .اﺷﯿﺎﯾﯽ ﮐﻪ ﺑﺎ ﭘﻨﺠﺮه ي
ﻣﺮورﮔﺮ ارﺗﺒﺎط و ﺗﻌﺎﻣﻞ ﻣﺴﺘﻘﯿﻢ دارﻧﺪ را ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ .ﻣﺎﻧﻨﺪ ﺷﮑﻞ زﯾﺮ:
7
window document anchors
frames forms
history images
location links
KEY
Array screen
Figure 5-3
اﮐﻨﻮن ﺑﻪ ﺑﺮرﺳﯽ ﻫﺮ ﯾﮏ از اﺟﺰاي ﺗﺸﮑﯿﻞ دﻫﻨﺪه BOMو ﺧﺼﻮﺻﯿﺎت و ﻣﺘﺪﻫﺎي ﻣﺮﺑﻮط ﺑﻪ آن ﻫﺎ ﻣﯽ ﭘﺮدازﯾﻢ:
ﺷﯽ window
ﺷﯽ windowﺗﻤﺎﻣﯽ ﭘﻨﺠﺮه ﻫﺎي ﻣﺮورﮔﺮ را ﺷﺎﻣﻞ ﻣﯽ ﺷﻮد اﻣﺎ ﻧﻪ ﻟﺰوﻣﺂ ﻣﺤﺘﻮاﯾﯽ ﮐﻪ در آن ﻧﻤﺎﯾﺶ داده ﻣﯽ ﺷﻮد .از اﯾﻦ ﺷﯽ
ﺑﺮاي ﺟﺎﺑﺠﺎﯾﯽ ،ﺗﻐﯿﯿﺮ اﻧﺪازه و دﯾﮕﺮ اﺛﺮات ﺑﺮ روي ﭘﻨﺠﺮه ﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ.
ﭘﻨﺠﺮه را ﻧﺴﺒﺖ ﺑﻪ ﻣﮑﺎن ﻓﻌﻠﯽ 10pxﭘﯿﮑﺴﻞ ﺑﻪ ﺳﻤﺖ راﺳﺖ و 20pxﺑﻪ ﺳﻤﺖ ﭘﺎﯾﯿﻦ ﺟﺎﺑﺠﺎ ﻣﯽ ﮐﻨﺪ.
)window.resizeTo(150, 300
) :(Yes/No) scrollable(scrollbarsﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ آﯾﺎ ﭘﻨﺠﺮه ﻧﻮار اﺳﮑﺮول داﺷﺘﻪ ﺑﺎﺷﺪ ﯾﺎ ﺧﯿﺮ
:(Yes/No) toolbarآﯾﺎ ﺷﺎﻣﻞ ﻧﻮار اﺑﺰار ﺑﺎﺷﺪ.
:(Yes/No) status آﯾﺎ ﻧﻮار وﺿﻌﺒﺖ داﺷﺘﻪ ﺑﺎﺷﺪ
:(Yes/No) location آﯾﺎ ﻧﻮار آدرس داﺷﺘﻪ ﺑﺎﺷﺪ.
48
در رﺷﺘﻪ اي از ﺧﺼﻮﺻﯿﺎت ﻧﺒﺎﯾﺪ ﻫﯿﭻ ﻓﻀﺎي ﺧﺎﻟﯽ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ. 7
ﻣﺘﺪ )( .openﺷﯽ اي از ﻧﻮع windowرا ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ ﮐﻪ ﺗﻤﺎم ﻣﺘﺪﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎﯾﯽ ﮐﻪ ﺷﯽ windowدارد را داراﺳﺖ.
ﺑﺮاي ﺑﺴﺘﻦ ﭘﻨﺠﺮه از ﻣﺘﺪ )( .closeاﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .اﯾﻦ ﻣﺘﺪ ﻓﻘﻂ ﻣﯽ ﺗﻮاﻧﺪ ﭘﻨﺠﺮه اي ﮐﻪ ﺗﻮﺳﻂ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺑﺎز ﺷﺪه اﺳﺖ
را ﻣﺴﺘﻘﯿﻤﺎ ﺑﺒﻨﺪد ﻧﻪ ﭘﻨﺠﺮه ي اﺻﻠﯽ.
از اﯾﻦ ﭘﻨﺠﺮه ﻣﻌﻤﻮﻵ ﺑﺮاي ﻧﻤﺎﯾﺶ ﯾﮏ ﭘﯿﻐﺎم ﺑﻪ ﺻﻮرت ﻫﺸﺪار اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد.
Microsoft Intornot Explorer 3
\f !Hello world
^
| OK
)( :confirmاﯾﻦ ﺗﺎﺑﻊ ﻫﻢ ﻣﺎﻧﻨﺪ ﺗﺎﺑﻊ ﺑﺎﻻﺳﺖ .ﺗﻨﻬﺎ ﺗﻔﺎوت اﯾﻦ دو وﺟﻮد ﯾﮏ دﮐﻤﻪ Cancelدر ﭘﻨﺠﺮه ي ﺑﺎز ﺷﻮﻧﺪه
اﺳﺖ.
> "<scritp type="text/javascript
; )' ? confirm('Are you sure
></script
در ﺻﻮرﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ Okرا ﺑﺰﻧﺪ ﻣﻘﺪار Trueو در ﺻﻮرت زدن دﮐﻤﻪ ي Cancelﻣﻘﺪار Falseرا ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ.
Microsoft Intornot Explorer Q
)( :promptﭘﻨﺠﺮه ي اﯾﻦ ﻣﺘﺪ ﭼﻬﺎر ﻗﺴﻤﺖ دارد .دﮐﻤﻪ ي ،Okدﮐﻤﻪ ي ،Cancelﯾﮏ ﻣﺘﻦ و ﯾﮏ ﮐﺎدر ﻣﺘﻨﯽ ﺑﺮاي
وارد ﮐﺮدن ﯾﮏ رﺷﺘﻪ ﺗﻮﺳﻂ ﮐﺎرﺑﺮ.
در ﺻﻮرﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ ي Okرا ﺑﺰﻧﺪ ﺗﺎﺑﻊ ﻣﻘﺪار وارد ﺷﺪه در ﮐﺎدر ﻣﺘﻨﯽ را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ و در ﺻﻮرت زدن دﮐﻤﻪ ي Cancel
ﻣﻘﺪار Nullرا ﺑﺮﻣﯽ ﮔﺮداﻧﺪ.
Explorer Usor Prompt Q
Script ^rcnrpt
| OK
V/hat is your nano 0
Cancel
Mciiisl
ﺧﺎﺻﯿﺖ statusbar
اﯾﻦ ﻗﺴﻤﺖ ﭘﻨﺠﺮه ﻓﺮآﯾﻨﺪ ﺑﺎرﮔﺬاري و ﭘﺎﯾﺎن ﺑﺎرﮔﺬاري را ﺑﻪ ﮐﺎرﺑﺮ ﻧﺸﺎن ﻣﯽ دﻫﺪ .ﻫﺮ ﭼﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﻢ از دو ﺧﺎﺻﯿﺖ ﺑﻪ ﻧﺎم ﻫﺎي
statusو defaultStatusﺑﺮاي ﺗﻐﯿﯿﺮ آن اﺳﺘﻔﺎده ﮐﻨﯿﻢ .ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﺣﺪس زدﯾﺪ از ﺧﺎﺻﯿﺖ Statusﺑﺮاي ﺗﻐﯿﯿﺮ ﻣﺘﻦ
Statusbarﺑﺮاي ﭼﻨﺪ ﻟﺤﻈﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد در ﺣﺎﻟﯽ ﮐﻪ از defaultstatusﺑﺮاي ﺗﻐﯿﯿﺮ Statusbarﺗﺎ زﻣﺎﻧﯽ ﮐﻪ ﮐﺎرﺑﺮ در
ﺻﻔﺤﻪ ﻫﺴﺖ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد.
ﺑﺮاي ﺗﻐﯿﯿﺮ ﻟﺤﻈﻪ اي ﻧﻮار وﺿﻌﯿﺖ ﻣﺜﻶ وﻗﺘﯽ ﮐﺎرﺑﺮ ،ﻣﺎوس را روي ﯾﮏ ﻟﯿﻨﮏ ﻗﺮار ﻣﯽ دﻫﺪ ﻣﯽ ﺗﻮان از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻧﻤﻮد:
50
</script>
----------------------------------------------------------
7
<scritp type="text/javascript" >
setTimeout(function() { alert("Hello world!"); }, 1000);
</script>
----------------------------------------------------------
function sayHelloWorld() {
alert("Hello world!");
}
setTimout(sayHelloWorld, 1000);
</script>
. ﻣﺎﻧﻨﺪ ﺗﺎﺑﻊ ﻗﺒﻠﯽ اﺳﺖ ﺟﺰ اﯾﻨﮑﻪ ﮐﺪ ﮔﺮﻓﺘﻪ ﺷﺪه را ﺑﻌﺪ از ﮔﺬﺷﺖ ﺑﺎزه ي زﻣﺎﻧﯽ ﻣﺸﺨﺺ ﺗﮑﺮار ﻣﯽ ﮐﻨﺪ:setIntervals
: اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد.clearInterval() از ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم, ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از اﺟﺮاي اﯾﻦ ﻣﺘﺪ
setInterval(“alert(‘Hello world!’) “, 1000);
-----------------------------------------------------
setInterval(function() { alert(“Hello world!”); }, 1000);
-----------------------------------------------------
function sayHelloWorld() {
alert(“Hello world!”);
}
setInterval(sayHelloWorld, 1000);
history ﺷﯽ
اﻟﺒﺘﻪ ﻫﯿﭻ راﻫﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ آدرس ﺻﻔﺤﺎت ﮐﻪ در.ﻣﻤﮑﻦ اﺳﺖ ﺑﺨﻮاﻫﯿﻢ ﺑﻪ ﺗﺎرﯾﺨﭽﻪ ي ﻣﺮورﮔﺮ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ
: اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢwindow ﻣﺮﺑﻮط ﺑﻪ ﺷﯽ.history ﺑﺮاي اﯾﻦ ﮐﺎر از ﻣﺘﺪﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ. ﻧﯿﺴﺖ، وﺟﻮد دارﻧﺪhistory
اﮔﺮ ﻋﺪد ﻣﻨﻔﯽ ﺑﺎﺷﺪ ﺑﻪ ﺻﻔﺤﺎت. ﺗﻌﺪاد ﺻﻔﺤﺎﺗﯽ ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ ﺟﻠﻮ ﯾﺎ ﺑﻪ ﻋﻘﺐ ﭘﯿﻤﺎﯾﺶ ﺷﻮﻧﺪ: ﻓﻘﻂ ﯾﮏ ﭘﺎراﻣﺘﺮ ﻣﯽ ﮔﯿﺮد.go() ﻣﺘﺪ
: ﺑﺮاي ﻣﺜﺎل ﺟﻬﺖ رﻓﺘﻦ ﺑﻪ ﯾﮏ ﺻﻔﺤﻪ ﻋﻘﺐ از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ.ﻗﺒﻞ و اﮔﺮ ﻋﺪد ﻣﺜﺒﺖ ﺑﺎﺷﺪ ﺑﻪ ﺻﻔﺨﺎت ﺟﻠﻮ ﻣﯽ روﯾﻢ
51 ;)window.history.go(+1
7 ﻫﻤﯿﭽﻨﯿﻦ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻣﺘﺪ ﻫﺎي )( .backو )( .forwardﺑﻪ ﺟﺎي ﮐﺪﻫﺎي ﺑﺎﻻ اﺳﺘﻔﺎده ﮐﻨﯿﻢ.
//go back one
;)(history.back
//go forward one
;)(history.forward
ﺷﯽ document
اﯾﻦ ﺷﯽ ﮐﻪ ﺗﻨﻬﺎ ﺷﯽ ﻣﺸﺘﺮك ﺑﯿﻦ ﻣﺪل ﻫﺎي ﺷﯽ ﮔﺮاي BOMو DOMاﺳﺖ داراي ﺧﺼﻮﺻﯿﺎﺗﯽ ﻣﯽ ﺑﺎﺷﺪ.
ﯾﮑﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي اﯾﻦ ﺷﯽ URL ،اﺳﺖ ﮐﻪ ﺑﺮاي ﺗﻨﻈﯿﻢ و دﺳﺘﺮﺳﯽ ﺑﻪ آدرس ﮐﻨﻮﻧﯽ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد.
;"document.URL = "http://www.learningjquery.ir/
ﺷﯽ documentاز ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم .referrerﺑﺮاي ﺑﻪ دﺳﺖ آوردن آدرس ﺻﻔﺤﻪ اي ﮐﻪ ﮐﺎرﺑﺮ از آن ﺑﻪ ﺻﻔﺤﻪ ﮐﻨﻮﻧﯽ آﻣﺪه
اﺳﺖ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ.
اﯾﻦ ﺷﯽ ﻫﻤﭽﻨﯿﻦ ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم .titleدارد ﮐﻪ از آن ﺑﺮاي ﺑﺪﺳﺖ آوردن و ﺣﺘﯽ ﺗﻐﯿﯿﺮ ﻋﻨﻮان ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ.ﻣﯽ ﺗﻮان
از اﯾﻦ ﺧﺎﺻﯿﺖ ﺧﻮاﻧﺪﻧﯽ/ﻧﻮﺷﺘﻨﯽ ﺑﺮاي ﺗﻐﯿﯿﺮ ﻋﻨﻮان ﺻﻔﺤﻪ ﺑﻪ ﺻﻮرت ﭘﻮﯾﺎ ﻧﯿﺰ اﺳﺘﻔﺎده ﮐﺮد .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل دﺳﺘﻮر زﯾﺮ ﻋﻨﻮان
ﺻﻔﺤﻪ ﺟﺎري را ﺑﻪ New Title Pageﺗﻐﯿﯿﺮ ﻣﯽ دﻫﺪ:
= Document.title ;”“New Title Page
ﻫﻤﭽﻨﯿﻦ اﯾﻦ ﺷﯽ داراي ﯾﮑﺴﺮي ﺧﺼﻮﺻﯿﺎت ﻣﺠﻤﻮﻋﻪ اي ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﻧﻮاع ﻋﻨﺎﺻﺮ داﺧﻞ ﺻﻔﺤﻪ ي ﺑﺎرﮔﺬاري ﺷﺪه اﺳﺖ.
ﺑﺮﺧﯽ از ﺧﺎﺻﯿﺖ ﻫﺎ ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ:
ﺗﻮﺿﯿﺤﺎت ﻣﺠﻤﻮﻋﻪ
دﺳﺘﺮﺳﯽ ﺑﻪ ﻟﯿﻨﮏ ﻫﺎي ﺻﻔﺤﻪ anchors
دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ embedﺻﻔﺤﻪ embeds
دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻓﺮم ﻫﺎي ﺻﻔﺤﻪ forms
دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ﻋﮑﺲ ﺻﻔﺤﻪ images
دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎﻣﯽ ﻟﯿﻨﮏ ﻫﺎي ﺻﻔﺤﻪ links
ﻫﺮ ﻣﺠﻤﻮﻋﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻮﺳﯿﻠﻪ ي ﻋﺪد ﯾﺎ ﻧﺎم index ،ﮔﺬاري ﺷﻮﻧﺪ .ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﺑﻪ اوﻟﯿﻦ ﻋﻨﺼﺮ
ﻋﮑﺲ ﺻﻔﺤﻪ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﺪ:
;]Document.images[0
Or
52
; ]'Document.images['image-name 7
ﺑﺎ اﯾﻦ روش ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻪ آدرس آن ﻫﺎ ﻫﻢ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ,ﺑﻪ ﺻﻮرت زﯾﺮ:
document.images[0].src
از دﯾﮕﺮ ﻣﺘﺪﻫﺎي اﯾﻦ ﺷﯽ ﻣﯽ ﺗﻮان ﺑﻪ )( .writeو )( .writelnﺑﺮاي ﭼﺎپ ﯾﮏ ﻣﺘﻦ اﺷﺎره ﮐﺮد.
ﺷﯽ location
ﯾﮑﯽ دﯾﮕﺮ از ﺷﯽ ﻫﺎ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ آدرس ﺻﻔﺤﻪ ﺟﺎري location ،اﺳﺖ .ﻣﺎ ﺗﻮﺳﻂ ﺧﺎﺻﯿﺖ location.hrefﻣﯽ ﺗﻮاﻧﯿﻢ
ﺑﺮاي ﺗﻨﻈﯿﻢ ﯾﺎ ﺑﺪﺳﺖ آوردن URLاﺳﺘﻔﺎده ﮐﻨﯿﻢ:
;"location.href= "http://www.learningjquery.ir/
از ﻣﺘﺪ )( .reloadﺑﺮاي ﺑﺎرﮔﺰاري ﻣﺠﺪد ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .ﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﻌﯿﯿﻦ ﮐﻨﯿﻢ ﮐﻪ ﺑﺎرﮔﺰاري ﻣﺠﺪد از روي Cache
ﯾﺎ Serverﺑﺎﺷﺪ .اﯾﻦ ﮐﺎر ﺑﺎ ﯾﮑﯽ از آرﮔﻮﻣﺎن ﻫﺎي falseﺑﺮاي ﺑﺎرﮔﺰاري ﻣﺠﺪد از Catchو trueﺑﺮاي ﺑﺎرﮔﺰاري ﻣﺠﺪد از
Serverاﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .ﭼﻨﺎﻧﭽﻪ آرﮔﻮﻣﺎﻧﯽ ذﮐﺮ ﻧﺸﻮد ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض falseدر ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺧﻮاﻫﺪ ﺷﺪ.
ﺷﯽ navigator
اﯾﻦ ﺷﯽ اﯾﮑﯽ از اﺷﯿﺎي ﻗﺪﯾﻤﯽ ﻣﺪل ﺷﯽ ﮔﺮاي BOMﺑﻪ ﺷﻤﺎر ﻣﯽ رود .از اﯾﻦ ﺷﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ و ﺑﺪﺳﺖ آوردن اﻃﻼﻋﺎﺗﯽ
در ﻣﻮرد ﻧﻮع و ﻧﺴﺨﻪ ﻣﺮورﮔﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .ﺑﻌﻀﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي آن ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ:
ﺟﺪول زﯾﺮ ﻣﻘﺪار ﺧﺎﺻﯿﺖ .userAgentﺷﯽ navigatorرا در ﭼﻬﺎر ﻣﺮورﮔﺮ ﻣﺸﻬﻮر و ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞ وﯾﻨﺪوز XPﻧﻤﺎﯾﺶ ﻣﯽ
دﻫﺪ:
ﺷﯽ screen
از اﯾﻦ ﺷﯽ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﻃﻼﻋﺎت ﻣﺮﺑﻮﻃﻪ ﺑﻪ ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﮐﺎرﺑﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .اﯾﻦ ﺷﯽ ﺷﺎﻣﻞ ﺧﻮاص زﯾﺮ اﺳﺖ:
ﺗﻮﺿﯿﺤﺎت ﺧﺎﺻﯿﺖ 54
ارﺗﻔﺎع ﻗﺎﺑﻞ دﺳﺘﺮس از وﯾﻨﺪوز availHeight 7
ﻋﺮض ﻗﺎﺑﻞ دﺳﺘﺮس از وﯾﻨﺪوز availWidth
از دو ﺧﺎﺻﯿﺖ اول ﻣﯽ ﺗﻮان ﺑﺮاي ﺑﺪﺳﺖ آوردن ﺳﺎﯾﺰ ﺟﺪﯾﺪ ﭘﻨﺠﺮه اﺳﺘﻔﺎده ﻧﻤﻮد .ﺑﻪ ﻃﻮر ﻣﺜﺎل ﺑﺮاي fullscreenﮐﺮدن ﺻﻔﺤﻪ
ﻧﻤﺎﯾﺶ ﻣﯽ ﺗﻮان از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻧﻤﻮد:
;)Window.moveTo(0,0
;)Window.resizeTo(screen.availWidth,screen.availHegiht
f
ﻓﺼﻞ ﻫﺸﺖ
r
DOM؛ﻣﺪلﺷﯽﮔﺮايﺳﻨﺪ
J
در اﯾﻦ ﻓﺼﻞ ﺑﻪ ﺑﺮرﺳﯽ DOMﯾﮑﯽ دﯾﮕﺮ از اﺟﺰاي ﻣﻬﻢ ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻣﯽ ﭘﺮدازﯾﻢ .اﯾﻦ DOMاﺳﺖ ﮐﻪ اﻣﮑﺎن
دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ و ﻗﺎﺑﻠﯿﺖ اﺿﺎﻓﻪ ،ﺣﺬف و ﺟﺎﺑﺠﺎﯾﯽ آن ﻫﺎ در ﺟﺎي ﺟﺎي ﺻﻔﺤﻪ را ﻓﺮاﻫﻢ ﻣﯽ آورد.
در ﺳﺮآﻏﺎز اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﻪ ﺑﺮرﺳﯽ و ﺗﺸﺮﯾﺢ DOMﭘﺮداﺧﺘﻪ و ﺳﭙﺲ روش ﻫﺎﯾﯽ ﮐﻪ ﺑﺮاي دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ
را ﻓﺮاﻫﻢ ﮐﺮده ﺗﻮﺿﯿﺢ ﺧﻮاﻫﯿﻢ داد.
DOMﭼﯿﺴﺖ؟
56
DOMﺑﻪ ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن وب اﻣﮑﺎن دﺳﺘﺮﺳﯽ و دﺳﺘﮑﺎري ﻋﻨﺎﺻﺮ ﯾﮏ ﺻﻔﺤﻪ HTMLرا ﻣﯽ دﻫﺪ .اﯾﻦ ﻣﺪل ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد
در ﯾﮏ ﺻﻔﺤﻪ HTMLرا ﺑﻪ ﺻﻮرت درﺧﺘﯽ از ﮔﺮه ﻫﺎ ﺗﺮﺳﯿﻢ ﻣﯽ ﮐﻨﺪ .ﺑﻪ ﺗﮑﻪ ﮐﺪ زﯾﺮ دﻗﺖ ﮐﻨﯿﺪ:
><html 8
><head
><title>DOMinating JavaScript</title
></head
><body
><h1>DOMinating JavaScript</h1
><p
If you need some help with your JavaScript, you might like
to read articles from
><a href=http://www.danwebb.net/ rel="external">DanWebb</a
><a href="http://www.quirksmode.org/" rel="external">PPK</a
and
<a href="http://adactio.com/" rel="external">Jeremy
>Keith</a
></p
></body
></html
ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ ﺑﯿﻨﯿﺪ ﻣﯽ ﺗﻮان ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ را در ﻗﺎﻟﺐ ﯾﮏ ﮔﺮه 1ﻧﻤﺎﯾﺶ داده ﻣﯽ ﺷﻮد .اﻣﺎ ﻫﻤﯿﺸﻪ در
DOMﮔﺮﻫﯽ وﯾﮋه ﺑﻪ ﻧﺎم documentوﺟﻮد دارد ﮐﻪ در ﺑﺎﻻﺗﺮﯾﻦ ﺳﻄﺢ درﺧﺖ ﻗﺮار ﮔﺮﻓﺘﻪ و ﺳﺎﯾﺮ ﮔﺮه ﻫﺎ را ﺷﺎﻣﻞ ﻣﯽ ﺷﻮد .ﺑﺎ
اﯾﻦ ﻓﺮض درﺧﺖ ﻓﻮق ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺗﺒﺪﯾﻞ ﺧﻮاﻫﺪ ﺷﺪ:
1
node
I
57
8
در درﺧﺖ ﺑﺎﻻ ﻫﺮ ﻣﺴﺘﻄﯿﻞ ﺑﻪ ﻋﻨﻮان ﯾﮏ ﮔﺮه ﻣﺤﺴﻮب ﻣﯽ ﺷﻮد .ﮔﺮه ﻫﺎ اﻧﻮاع ﻣﺨﺘﻠﻔﯽ دارﻧﺪ ﮐﻪ ﺑﻌﻀﯽ از آن ﻫﺎ ﺑﻪ ﺷﺮح زﯾﺮ
اﺳﺖ:
:documentﺑﺎﻻﺗﺮﯾﻦ ﮔﺮﻫﯽ ﮐﻪ ﻫﻤﻪ ﮔﺮه ﻫﺎي دﯾﮕﺮ ﺑﻪ آن ﻣﺘﺼﻞ ﻫﺴﺘﻨﺪ)ﻓﺮزﻧﺪ آن ﻫﺴﺘﻨﺪ( .ﺑﻪ اﯾﻦ ﻧﻮع ﮔﺮه ،ﮔﺮه ﺳﻨﺪ 1ﮔﻔﺘﻪ
ﻣﯽ ﺷﻮد.
:elementﮔﺮﻫﯽ ﮐﻪ ﺷﺎﻣﻞ ﯾﮏ ﻋﻨﺼﺮ از ﺻﻔﺤﻪ ﺑﺎﺷﺪ .اﯾﻦ ﮔﺮه ﺷﺎﻣﻞ ﯾﮏ ﺗﮓ آﻏﺎزي و ﯾﮏ ﺗﮓ ﭘﺎﯾﺎﻧﯽ ﻣﺎﻧﻨﺪ ><tag></tag
2
ﯾﺎ > <tag /اﺳﺖ .اﯾﻦ ﻧﻮع ﮔﺮه ﺗﻨﻬﺎ ﻧﻮﻋﯽ اﺳﺖ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺷﺎﻣﻞ ﻓﺮزﻧﺪان از اﻧﻮاع دﯾﮕﺮ ﺑﺎﺷﺪ .ﺑﻪ اﯾﻦ ﮔﺮه ﻫﺎ ،ﮔﺮه ﻋﻨﺼﺮي
ﮔﻔﺘﻪ ﻣﯽ ﺷﻮد.
:textاﯾﻦ ﻧﻮع ﮔﺮه ﻫﺎ ﺑﻪ ﻣﺘﻦ ﻣﻮﺟﻮد در داﺧﻞ ﯾﮏ ﺗﮓ آﻏﺎزي و ﺗﮓ ﭘﺎﯾﺎﻧﯽ اﺷﺎره دارﻧﺪ .اﯾﻦ ﻧﻮع ﮔﺮه ﻫﺎ ﻫﻢ ﻧﻤﯽ ﺗﻮاﻧﻨﺪ ﻓﺮزﻧﺪ
داﺷﺘﻪ ﺑﺎﺷﻨﺪ .ﺑﻪ اﯾﻦ ﻧﻮع ﮔﺮه ﻫﺎ ،ﮔﺮه ﻣﺘﻨﯽ 3ﻣﯽ ﮔﻮﯾﻨﺪ .اﮔﺮ ﮔﺮه ﻫﺎي ﻣﺘﻨﯽ را ﻫﻢ ﺑﻪ ﻣﺜﺎﻟﯽ ﮐﻪ ﺑﺮرﺳﯽ ﮐﺮدﯾﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ درﺧﺖ
ﻣﺎ ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺗﺒﺪﯾﻞ ﺧﻮاﻫﺪ ﺷﺪ:
1
Document Node
2
Element Node
3
Text Node
58
•S
8
I I
I
:attrﮔﺮه اي ﮐﻪ ﺑﻪ ﯾﮏ ﺻﻔﺖ از ﯾﮏ ﻋﻨﺼﺮ اﺷﺎره ﻣﯽ ﮐﻨﺪ و ﻓﺎﻗﺪ ﻓﺮزﻧﺪ ﻣﯽ ﺑﺎﺷﺪ .ﺑﻪ اﯾﻦ ﻧﻮع ﮔﺮه ﻫﺎ ،ﮔﺮه ﺻﻔﺘﯽ 1ﮔﻔﺘﻪ ﻣﯽ
ﺷﻮد .در درﺧﺖ DOMﻣﻌﻤﻮﻻ اﯾﻦ ﮔﺮه ﻫﺎ را ﺑﻪ ﺻﻮرت داﯾﺮه اي و ﻣﺘﺼﻞ ﺑﻪ ﮔﺮه ﻫﺎي ﻋﻨﺼﺮي ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﻨﺪ .ﺑﻪ ﻋﻨﻮان
ﻣﺜﺎل ﻫﺮ ﯾﮏ از ﻋﻨﺎﺻﺮ ﻟﯿﻨﮑﯽ ﮐﻪ در ﻣﺜﺎل ﺑﺎﻻ ﻣﺸﺎﻫﺪه ﻣﯽ ﺷﻮد داراي ﺻﻔﺖ ﻫﺎي hrefو relﻫﺴﺘﻨﺪ ﮐﻪ ﻣﯽ ﺗﻮان آن ﻫﺎ را ﺑﻪ
ﺻﻮرت زﯾﺮ ﻧﻤﺎﯾﺶ داد:
href
rel
:commentﺑﻪ ﮔﺮه ﻫﺎي ﺗﻮﺿﯿﺤﯽ اﺷﺎره ﻣﯽ ﮐﻨﺪ و ﻓﺎﻗﺪ ﻓﺮزﻧﺪ اﺳﺖ) .در واﻗﻊ ﺑﻪ ﺗﮓ commentﺻﻔﺤﻪ اﺷﺎره ﻣﯽ ﮐﻨﺪ(.
ﻏﺎﻟﺒﺎ ﮔﺮﻫﯽ اﺻﻠﯽ ﺑﻪ ﻋﻨﻮان راس اﯾﻦ درﺧﺖ وﺟﻮد دارد ﮐﻪ ﻫﻤﺎن documentاﺳﺖ.
ﮔﺮه ﻫﺎ از ﻧﻈﺮ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻋﻨﻮان ﯾﮏ ﺷﯽ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽ ﺷﻮﻧﺪ ﮐﻪ اﯾﻦ اﺷﯿﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ ﺧﺎﺻﯿﺖ ﻫﺎ و ﻣﺘﺪﻫﺎﯾﯽ داﺷﺘﻪ
ﺑﺎﺷﻨﺪ .ﺑﻌﻀﯽ از آن ﻫﺎ ﺑﻪ ﺷﺮح زﯾﺮ ﻫﺴﺘﻨﺪ:
1
Attribute Node
اﺳﺖdocument ﮐﻪ ﯾﮑﯽ از ﺧﺎﺻﯿﺖ ﻫﺎي ﺷﯽ.documentElement ﻣﯽ ﺗﻮان ازHTML اوﻻ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺼﺮ
: ﺑﻪ ﺻﻮرت زﯾﺮ.اﺳﺘﻔﺎده ﮐﻨﯿﻢ
var oHtml = document.documentElement;
: ﺑﻪ ﺻﻮرت زﯾﺮ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢbody وhead ﺣﺎل ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ ﻣﺘﻐﯿﺮ ﺑﻪ ﻋﻨﺎﺻﺮ
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
: ﺑﺮاي دﺳﺘﺮﺳﯽ ﻧﯿﺰ اﺳﺘﻔﺎده ﮐﻨﯿﻢ.item() ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻣﺘﺪي ﻣﻮﺳﻮم ﺑﻪ
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
: را ﺑﻪ ﺻﻮرت زﯾﺮ ﻧﺸﺎن دﻫﯿﻢoHtml وoBody ، oHead ﻣﯽ ﺗﻮاﻧﯿﻢ ﺻﺤﺖ راﺑﻄﻪ ﻫﺎي ﺳﻪ ﻣﺘﻐﯿﺮ
)(getElementsByTagName
از اﯾﻦ ﻣﺘﺪ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻟﯿﺴﺘﯽ)آراﯾﻪ( از ﻋﻨﺎﺻﺮ ﺧﺎص اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد.
;)”var oImgs = document.getElementsByTagName(“img
ﻣﯽ ﺗﻮاﻧﯿﻢ از دﺳﺘﻮر زﯾﺮ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﮐﻨﯿﻢ:
;)”*“(var oAllElements = document.getElementsByTagName
)(getElementsByName
DOMﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮي ﮐﻪ ﺻﻔﺖ nameآﻧﻬﺎ ﺑﺮاﺑﺮ ﺑﺎ ﻣﻘﺪار ﺧﺎص اﺳﺖ از اﯾﻦ ﻣﺘﺪ اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﺪ .ﺑﻪ ﻣﺜﺎل زﯾﺮ
><html
ﺗﻮﺟﻪ ﮐﻨﯿﺪ:
62
><head 8
><title>DOM Example</title
></head
><body
>”<form method=”post” action=”dosomething.php
><fieldset
><legend>What color do you like?</legend
><input type=”radio” name=”radColor” value=”red” /> Red<br /
><input type=”radio” name=”radColor” value=”green” /> Green<br /
><input type=”radio” name=”radColor” value=”blue” /> Blue<br /
></fieldset
><input type=”submit” value=”Submit” /
></form
></body
></html
اﯾﻦ ﺻﻔﺤﻪ رﻧﮓ ﻣﻮرد ﻋﻼﻗﻪ ﮐﺎرﺑﺮ را ﺳﻮال ﻣﯽ ﮐﻨﺪ radiobutton .ﻫﺎ اﺳﻢ ﯾﮑﺴﺎﻧﯽ دارﻧﺪ .اﻣﺎ ﻣﯽ ﺧﻮاﻫﯿﻢ ﻓﻘﻂ ﻣﻘﺪار
radiobuttonي ﮐﻪ اﻧﺘﺨﺎب ﺷﺪه اﺳﺖ را ﭘﯿﺪا ﮐﻨﯿﻢ .ﺑﺮاي اﯾﺠﺎد ارﺟﺎع ﺑﻪ ﻋﻨﺎﺻﺮ radiobuttonﻣﯽ ﺗﻮان از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده
ﻧﻤﻮد.
;)”var oRadios = document.getElementsByName(“radColor
ﺣﺎل ﻣﯽ ﺗﻮاﻧﯿﺪ از ﻫﻤﺎن روش ﻗﺒﻠﯽ ﺑﺮاي ﺑﻪ دﺳﺖ آوردن ﻣﻘﺪار ﻫﺮ از radiobuttonﻫﺎ ﺑﻪ روش زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﺪ:
”alert(oRadios[0].getAttribute(“value”)); //outputs “red
)(getElementById
از اﯾﻦ ﻣﺘﺪ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ ﺑﻪ وﺳﯿﻠﻪ ﺧﺎﺻﯿﺖ IDآﻧﻬﺎ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .ﻣﯽ داﻧﯿﻢ ﮐﻪ ﺧﺎﺻﯿﺖ IDﺑﺎﯾﺪ ﯾﮑﺘﺎ ﺑﺎﺷﺪ ﺑﻪ اﯾﻦ
ﻣﻌﻨﯽ ﮐﻪ ﻫﯿﭻ دو ﻋﻨﺼﺮي ﻧﻤﯽ ﺗﻮاﻧﻨﺪ داﺧﻞ ﯾﮏ ﺻﻔﺤﻪ ID ،ﯾﮑﺴﺎﻧﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ .اﯾﻦ ﺳﺮﯾﻌﺘﺮﯾﻦ و راﯾﺠﺘﺮﯾﻦ راه ﺑﺮاي دﺳﺘﺮﺳﯽ
ﺑﻪ ﻋﻨﺼﺮي ﺧﺎص از ﺻﻔﺤﻪ اﺳﺖ .ﺑﻪ ﮐﺪ زﯾﺮ ﻧﮕﺎه ﮐﻨﯿﺪ:
63
><body
><p>Hello World!</p
><div id=”div1”>This is my first layer</div
8 ></body
></html
ﭼﻨﺎﻧﭽﻪ ﺑﺨﻮاﻫﯿﻢ از ﻣﺘﺪ )( .getElementsByTagNameﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺼﺮ divاﯾﻦ ﺻﻔﺤﻪ ﺑﺎ ﺷﻨﺎﺳﻪ div1اﺳﺘﻔﺎده
ﮐﻨﯿﻢ ﺑﺎﯾﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﻢ:
;)”var oDivs = document.getElementsByTagName(“div
;var oDiv1 = null
{)for (var i=0; i < oDivs.length; i++
{ )”if (oDivs[i].getAttribute(“id”) == “div1
;]oDiv1 = oDivs[i
;break
}
}
اﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﻫﻤﯿﻦ ﮐﺎر را ﺑﻪ ﺻﻮرت زﯾﺮ و ﺑﺎ اﺳﺘﻔﺎده از ﻣﺘﺪ )( .getElementByIdاﻧﺠﺎم دﻫﯿﻢ:
;)”var oDiv1 = document.getElementById(“div1
ﻣﯽ ﺑﯿﻨﯿﺪ ﮐﻪ اﺳﺘﻔﺎده از ﺣﺎﻟﺖ دوم ﺑﺴﯿﺎر ﺳﺎده ﺗﺮ ،ﮐﻮﺗﺎه ﺗﺮ و ﺑﻬﯿﻨﻪ ﺗﺮ اﺳﺖ.
ﺣﺎل ﺑﺎﯾﺪ ﻣﺘﻦ را ﺑﻪ ﻋﻨﺼﺮ > ، <pاﻟﺤﺎق ﮐﻨﯿﻢ .ﺑﺮاي اﯾﻦ ﮐﺎر از ﻣﺘﺪ )( .appendchildاﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ .از اﯾﻦ ﻣﺘﺪ ﺑﺮاي اﺿﺎﻓﻪ
ﮐﺮدن ﯾﮏ ﻓﺮزﻧﺪ ﺑﻪ اﻧﺘﻬﺎي ﻟﯿﺴﺖ ﻓﺮزﻧﺪان ﯾﮏ ﮔﺮه اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد.
;)oP.appendChild(oText
ﭘﺎراﮔﺮاﻓﯽ ﮐﻪ را اﯾﺠﺎد ﮐﺮده اﯾﻢ ﺑﺎﯾﺪ ﺑﻪ ﺻﻔﺤﻪ و ﻗﺴﻤﺖ bodyو ﯾﺎ ﯾﮑﯽ از زﯾﺮ ﻣﺠﻤﻮﻋﻪ ﻫﺎي آن اﻟﺤﺎق ﮐﻨﯿﻢ .ﺑﻪ اﯾﻦ ﺷﮑﻞ:
;)oP.appendChild(oText
ﻧﮑﺘﻪ :ﮔﺮه ﻫﺎي ﻋﻨﺼﺮي از ﺧﺎﺻﯿﺘﯽ ﺧﻮاﻧﺪﻧﯽ/ﻧﻮﺷﺘﻨﯽ ﺑﻪ ﻧﺎم .innerHTMLﺑﺮاي ﺑﺎزﯾﺎﺑﯽ و ﺗﻐﯿﯿﺮ I
I
I I
Iﻣﺤﺘﻮاي ﯾﮏ ﻋﻨﺼﺮ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ .اﯾﻦ ﺧﺎﺻﯿﺖ ﺟﺰ اﺳﺘﺎﻧﺪاردﻫﺎي W3Cﻧﻤﯽ ﺑﺎﺷﺪ اﻣﺎ ﺗﻤﺎﻣﯽ I
ﻣﺮورﮔﺮﻫﺎ از آن ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ .ﻓﺮض ﮐﻨﯿﺪ ﺗﮓ زﯾﺮ را در ﺻﻔﺤﻪ دارﯾﻢ:
I I
><p id=”intro”>Hello World!</p
اﺟﺮاي دﺳﺘﻮر زﯾﺮ ﻣﻮﺟﺐ ﻧﻤﺎﯾﺶ ﭘﯿﻐﺎم ! Hello Worldﯾﻌﻨﯽ ﻫﻤﺎن ﻣﺤﺘﻮاي ﺗﮓ > <pﺧﻮاﻫﺪ ﺷﺪ:
;txt=document.getElementById(‘intro’).innerHTML
!alert(txt);// Hello World
65 ﺗﮓ > <pﺑﻪ ﺻﻮرت زﯾﺮ درﺧﻮاﻫﺪ آﻣﺪ .زﯾﺮا ﺧﺎﺻﯿﺖ .innerHTMLﻣﺤﺘﻮاي ﺗﮓ را ﺑﻪ ﺻﻮرت ﮐﺎﻣﻞ ﺑﺎ ﻣﻘﺪار ﺟﺪﯾﺪ ﺟﺎﯾﮕﺮﯾﻦ
8 ﻣﯽ ﮐﻨﺪ.
><p id=”intro”>Click <a href=’#’>Here</a></p
ﺑﺮاي ﺟﺎﺑﺠﺎﯾﯽ ﮔﺮه ﻫﺎ از ﻣﺘﺪ )( .replaceChildاﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .از اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد:
;)”var oNewP = document.createElement(“p
;)“ !var oText = document.createTextNode(“Hello Universe
;)oNewP.appendChild(oText
;]var oOldP = document.body.getElementsByTagName(“p”)[0
;)oOldP.parentNode.replaceChild(oNewP, oOldP
ﺑﺮاي اﺿﺎﻓﻪ ﮐﺮدن ﯾﮏ ﻋﻨﺼﺮ ﺑﻪ ﻗﺒﻞ از ﻋﻨﺼﺮ دﯾﮕﺮي از )( .insertBeforeاﺳﺘﻔﺎده ﻣﯽ ﺷﻮد .اﯾﻦ ﻣﺘﺪ دو آرﮔﻮﻣﺎن ﻣﯽ ﭘﺬﯾﺮد و
آرﮔﻮﻣﺎن اول را ﻗﺒﻞ از آرﮔﻮﻣﺎن دوم ﻗﺮار ﻣﯽ دﻫﺪ.
)(createDocumentFragment
ﺑﻪ ﻣﺤﺾ اﯾﻨﮑﻪ ﺗﻌﺪادي ﮔﺮه ﺟﺪﯾﺪ ﺑﻪ ﺳﻨﺪ اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﯿﻢ ﺻﻔﺤﻪ ﺑﺮاي ﻧﻤﺎﯾﺶ ﺗﻐﯿﯿﺮات ،ﺑﻪ روزرﺳﺎﻧﯽ ﻣﯽ ﺷﻮد .اﯾﻦ رﻓﺘﺎر ﺑﺮاي
ﺗﻌﺪاد ﺗﻐﯿﯿﺮات ﮐﻢ ﻣﻨﺎﺳﺐ اﺳﺖ .اﻣﺎ ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﺗﻐﯿﯿﺮات زﯾﺎد ﺑﺎﺷﺪ و ﺻﻔﺤﻪ ﺑﺨﻮاﻫﺪ اﯾﻦ رﻓﺘﺎر را ﺑﺮاي ﺗﮏ ﺗﮏ ﺗﻐﯿﯿﺮات ﺗﮑﺮار
ﮐﻨﺪ ﻣﻤﮑﻦ اﺳﺖ ﻣﻮﺟﺐ ﮐﻨﺪي در ﻋﻤﻠﮑﺮد ﻣﺮورﮔﺮ ﺷﻮد.
ﺑﺮاي رﻓﻊ اﯾﻦ ﻣﺸﮑﻞ ﻣﯽ ﺗﻮاﻧﯿﺪ از ﯾﮏ ﺗﮑﻪ ﺑﺮﻧﺎﻣﻪ 1اﺳﺘﻔﺎده ﮐﻨﯿﺪ .ﻣﯽ ﺗﻮاﻧﯿﺪ ﺗﻤﺎم ﮔﺮهﻫﺎي ﺟﺪﯾﺪ را ﺑﻪ ﺗﮑﻪ ﺑﺮﻧﺎﻣﻪ اﺿﺎﻓﻪ ﮐﺮده و
ﺳﭙﺲ آن را در ﺻﻔﺤﻪ اﺻﻠﯽ ﻗﺮار دﻫﯿﺪ .ﻓﺮض ﮐﻨﯿﺪ ﻣﯽ ﺧﻮاﻫﯿﻢ ﭼﻨﺪﯾﻦ ﭘﺎراﮔﺮاف را در ﺻﻔﺤﻪ اﯾﺠﺎد ﮐﻨﯿﻢ .در ﺻﻮرت اﺳﺘﻔﺎده از
روش ﻫﺎي ﻗﺒﻠﯽ اﯾﻦ اﻣﺮ ﻣﻮﺟﺐ رﻓﺮش ﻫﺮ ﺑﺎره ﺻﻔﺤﻪ ﺧﻮاﻫﺪ ﺷﺪ.
اﻣﺎ ﺑﻬﺘﺮ اﺳﺖ ﺑﻪ روش زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﻢ:
1
documentFragment
66
;)(var oFragment = document.createDocumentFragment
{ )for (var i=0; i < arrText.length; i++
;)”var oP = document.createElement(“p
;)]var oText = document.createTextNode(arrText[i 8
;)oP.appendChild(oText
;)oFragment.appendChild(oP
}
;)document.body.appendChild(oFragment
ﺑﺮاي دﺳﺘﺮﺳﯽ و ﺗﻨﻈﯿﻢ srcو borderﻣﯽ ﺗﻮاﻧﯿﻢ از ﻣﺘﺪﻫﺎي )( .getAttributeو ﯾﺎ )( .setAttributeاﺳﺘﻔﺎده ﮐﻨﯿﻢ:
;))”alert(oImg.getAttribute(“src
;))”alert(oImg.getAttribute(“border
;)”oImg.setAttribute(“src”, “mypicture2.jpg
;)”oImg.setAttribute(“border”, “1
ﻣﯽ ﺗﻮاﻧﯿﻢ از ﻧﺎم ﺻﻔﺎت ﻫﻢ ﺑﻪ ﻋﻨﻮان ﺧﺎﺻﯿﺖ ﻫﺮ ﯾﮏ از اﺷﯿﺎء ،ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ و ﺗﻐﯿﯿﺮ ﻣﻘﺪار ﺻﻔﺎت اﺳﺘﻔﺎده ﮐﻨﯿﻢ:
;)alert(oImg.src
;)alert(oImg.border
;”oImg.src = “mypicture2.jpg
;”oImg.border = “1
I I
I
ﻧﮑﺘﻪ :ﺑﺮ ﺧﻼف ﺑﺴﯿﺎري از ﺻﻔﺎت ﺗﮓ ﻫﺎ ،ﻧﻤﯽ ﺗﻮاﻧﯿﻢ از ﺧﻮد ﺻﻔﺖ classﺑﻪ ﻋﻨﻮان ﯾﮏ ﺧﺎﺻﯿﺖ I
اﺳﺘﻔﺎده ﮐﻨﯿﻢ .ﭼﻮن اﯾﻦ ﮐﻠﻤﻪ ﺟﺰ ﮐﻠﻤﺎت رزرو ﺷﺪه اﺳﺖ و ﺑﺎﯾﺪ ﺑﻪ ﺟﺎي آن از ﮐﻠﻤﻪ I className I
I I
8
ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻓﺮاﺧﻮاﻧﯽ دﺳﺘﻮر زﯾﺮ ﻣﻮﺟﺐ ﺗﻐﯿﯿﺮ رﻧﮓ ﻣﺘﻦ ﻋﻨﺼﺮي ﺑﺎ idﺑﺮاﺑﺮ introﺑﻪ رﻧﮓ ﻗﺮﻣﺰ ﺧﻮاﻫﺪ ﺷﺪ:
;”document.getElementById(‘intro’).style.color=”red
در ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻣﻨﻈﻮر دﺳﺘﺮﺳﯽ ﺑﻪ آن دﺳﺘﻪ از ﻗﻮاﻋﺪي ﮐﻪ ﺷﺎﻣﻞ ﮐﺎراﮐﺘﺮ – ﻫﺴﺘﻨﺪ ﻣﯽ ﺑﺎﯾﺴﺖ اﺑﺘﺪا ﮐﺎراﮐﺘﺮ – را ﺣﺬف ﮐﺮده
و اوﻟﯿﻦ ﺣﺮف ﮐﻠﻤﻪ ﻫﺎي ﺑﻌﺪ از آن را ﺑﻪ ﺻﻮرت ﺑﺰرگ ﺑﻨﻮﯾﺴﯿﻢ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ،ﮐﺪ زﯾﺮ ﻣﻮﺟﺐ ﺗﻐﯿﯿﺮ رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ ﻋﻨﺼﺮ ﺑﻪ
آﺑﯽ ﺧﻮاﻫﺪ ﺷﺪ:
;”document.getElementById(‘intro’).style.backgroundColor=”blue
ﺑﻪ ﻋﻨﻮان ﻣﺜﺎﻟﯽ دﯾﮕﺮ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻗﻮاﻋﺪي ﻫﻤﭽﻮن border-top-widthو padding-bottomﻣﯽ ﺑﺎﯾﺴﺖ ﺑﻪ ﺗﺮﺗﯿﺐ از
ﻧﺎم ﻫﺎي borderTopWidthو paddingBottomاﺳﺘﻔﺎده ﻧﻤﻮد.
اﮔﺮ ﺑﺮاي اﯾﺠﺎد اﯾﻦ ﺟﺪول ﺑﺨﻮاﻫﯿﻢ از ﻣﺘﺪ ﻫﺎي راﯾﺞ DOMاﺳﺘﻔﺎده ﮐﻨﯿﻢ ﮐﺪ ﻣﺎ ﺑﻪ ﺻﻮرت ذﯾﻞ ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ و ﮔﺎﻫﯽ اوﻗﺎت
ﺳﺮدرﮔﻢ ﮐﻨﻨﺪه ﺧﻮاﻫﺪ ﺷﺪ:
68
oTable.setAttribute(“border”, “1”);
oTable.setAttribute(“width”, “100%”);
table, tody, ﯾﮑﺴﺮي ﺧﺎﺻﯿﺖ ﻫﺎ و ﻣﺘﺪ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮدي ﺑﺮاي ﻋﻨﺎﺻﺮ اﺻﻠﯽ ﺟﺪاول ﻫﻤﭽﻮنDOM ﺑﺮاي آﺳﺎﻧﯽ اﯾﻨﮑﺎر
. اﯾﺠﺎد ﮐﺮده اﺳﺖtr
:ﻣﺘﺪ ﻫﺎ و ﺧﺎﺻﯿﺖ ﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﺟﺪول ﺑﻪ ﺷﺮح زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ
(. )اﻟﺒﺘﻪ اﮔﺮ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ. ﺟﺪول داردcaption اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ:caption
tbody ﻣﺠﻤﻮﻋﻪ )آراﯾﻪ( اي از ﻋﻨﺎﺻﺮ:tBodies
ﺟﺪولtfoot اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ:tFoot
ﺟﺪولthead اﺷﺎره ﺑﻪ ﻋﻨﺼﺮ:tHead
ﻣﺠﻤﻮﻋﻪ اي از ﺗﻤﺎم ردﯾﻒ ﻫﺎي ﺟﺪول:Rows
در ﺟﺪولthead اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ:createThead()
در ﺟﺪولtfoot اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ:createTfoot()
در ﺟﺪولcaption اﯾﺠﺎد و ﻗﺮار دادن ﯾﮏ ﻋﻨﺼﺮ ﺟﺪﯾﺪ:createCaption()
از ﺟﺪولthead ﺣﺬف ﻋﻨﺼﺮ:deleteThead()
69
position ﻗﺮار دادن ردﯾﻔﯽ در ﻣﻮﻗﻌﯿﺖ:insertRow(position)
r
ﻓﺼﻞ ﻧﻪ
ﮐﺎرﺑﺎﻓﺮﻣﻬﺎوﻋﻨﺎﺻﺮﻓﺮم
در ﺻﻔﺤﺎت وب ﻓﺮم ﻫﺎ ﺗﻨﻬﺎ ﻋﻨﺎﺻﺮي ﻫﺴﺘﻨﺪ ﮐﻪ ﮐﺎرﺑﺮان ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ ﺻﻮرت ﻣﺴﺘﻘﯿﻢ ﯾﮑﺴﺮي اﻃﻼﻋﺎت را در آن ﻫﺎ وارد
ﻧﻤﺎﯾﻨﺪ.
ﺑﺮاي اﯾﺠﺎد ﯾﮏ ﻓﺮم از ﺗﮓ formو ﺑﺮاي اﯾﺠﺎد ﻋﻨﺎﺻﺮ آن از ﺗﮓ ﻫﺎﯾﯽ ﻫﻤﭽﻮن textarea ، select ، inputو ..اﺳﺘﻔﺎده ﻣﯽ
ﺷﻮد ﮐﻪ ﻣﺮورﮔﺮﻫﺎ ﺑﻮﺳﯿﻠﻪ آن ﻫﺎ ﻗﺎدر ﺑﻪ ﻧﻤﺎﯾﺶ ﻓﯿﻠﺪ ﻫﺎي ﯾﮏ ﺧﻄﯽ ،ﭼﻨﺪ ﺧﻄﯽ ،ﻣﻨﻮﻫﺎي ﺑﺎزﺷﻮ ،دﮐﻤﻪ ﻫﺎ و ...ﻫﺴﺘﻨﺪ .در اﯾﻦ
ﻓﺼﻞ ﺑﻪ ﺑﺮرﺳﯽ روش ﻫﺎي ﮐﺎر ﺑﺮ روي ﻓﺮم ﻫﺎ از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﭘﺮداﺧﺘﻪ و ﺑﻪ ﻧﺤﻮه اﻋﺘﺒﺎر ﺳﻨﺠﯽ 1داده ﻫﺎي وارد ﺷﺪه در
ﯾﮏ ﻓﺮم ﺧﻮاﻫﯿﻢ ﭘﺮداﺧﺖ.
1
Form validation
1
Server side
2
Encoding
3
reference
73 ﺧﻂ اول از ﮐﺪ ﺑﺎﻻ ﻣﺘﻐﯿﺮي را ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ اوﻟﯿﻦ ﻋﻨﺼﺮ از ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم oFormاﺷﺎره ﻣﯽ ﮐﻨﺪ.
ﺧﻂ دوم ﻧﯿﺰ ﻣﺘﻐﯿﺮي را ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ ﻋﻨﺼﺮي ﺑﻪ ﻧﺎم textbox1از ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم oFormاﺷﺎره ﻣﯽ ﮐﻨﺪ.
9
ﯾﮏ روش دﯾﮕﺮ )ﮐﻪ اﺻﻄﻼﺣﺎ ﺑﻪ آن روش ﻣﯿﺎﻧﺒﺮ ﻣﯽ ﮔﻮﯾﻨﺪ( ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮي ﮐﻪ ﻧﺎم ﻣﺸﺨﺼﯽ دارﻧﺪ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد
ﺑﻪ ﺷﮑﻞ زﯾﺮ اﺳﺖ:
;var oTextbox1 = oForm.textbox1 //get the field with the name
""textbox1
ﮐﺪ ﺑﺎﻻ ﻣﺘﻐﯿﺮي ﺗﻌﺮﯾﻒ ﻣﯽ ﮐﻨﺪ ﮐﻪ ﺑﻪ ﻋﻨﺼﺮي ﺑﺎ ﺷﻨﺎﺳﻪ )ﯾﺎ textbox1 (IDاز ﻓﺮﻣﯽ ﺑﻪ ﻧﺎم oFormاﺷﺎره ﻣﯽ ﮐﻨﺪ.
اﮔﺮ اﺳﻢ ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ داراي ﭼﻨﺪ spaceﺑﺎﺷﺪ ﺑﺎﯾﺪ در اﻃﺮاف آن از ﺑﺮاﮐﺖ )][( اﺳﺘﻔﺎده ﮐﻨﯿﻢ:
var oTextbox1 = oForm.textbox1; //get the field with the name
""textbox1
1
focus
ﻧﮑﺘﻪ :ﻋﻨﺎﺻﺮ از ﻧﻮع hiddenﻓﻘﻂ از ﺧﺎﺻﯿﺖ formﮐﻪ در ﺑﺎﻻ ذﮐﺮ ﺷﺪ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﺪ.
ارﺳﺎل ﻓﺮم ﺑﻮﺳﯿﻠﻪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ
در HTMLﻓﺮﺳﺘﺎدن ﻓﺮم از ﻃﺮﯾﻖ ﯾﮏ دﮐﻤﻪ از ﻧﻮع submitﯾﺎ ﻋﮑﺴﯽ ﮐﻪ در ﻧﻘﺶ دﮐﻤﻪ submitﻋﻤﻞ ﻣﯽ ﮐﻨﺪ اﻧﺠﺎم ﻣﯽ
ﺷﻮد.
ﻣﺜﺎل:
><input type="submit" value="Submit" /
><input type="image" src="submit.gif" /
در ﺻﻮرت ﮐﻠﯿﮏ ﺑﺮ روي ﻫﺮ ﯾﮏ از دﮐﻤﻪ ﻫﺎي ﺑﺎﻻ ﻓﺮم ﺑﻪ ﺻﻮرت ﻣﻌﻤﻮﻟﯽ ارﺳﺎل ﻣﯽ ﺷﻮد.
ﭼﻨﺎﻧﭽﻪ دﮐﻤﻪ Enterﺻﻔﺤﻪ ﮐﻠﯿﺪ را ﻧﯿﺰ ﻓﺸﺎر دﻫﯿﺪ ﻣﺮورﮔﺮ ﻓﺮم را ﻣﺜﻞ ﺣﺎﻟﺘﯽ ﮐﻪ دﮐﻤﻪ ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد ارﺳﺎل ﻣﯽ ﮐﻨﺪ.
ﺑﺮاي ﺗﺴﺖ ارﺳﺎل ﺷﺪن ﻓﺮم ﻣﯽ ﺗﻮاﻧﯿﺪ از ﮐﺪ ﺳﺎده زﯾﺮ در ﺗﮓ آﻏﺎزﯾﻦ ﻓﺮم ﻣﻮرد ﻧﻈﺮﺗﺎن اﺳﺘﻔﺎده ﮐﻨﯿﺪ:
>")’<form method="post" action="javascript:alert(‘Submitted
اﮔﺮ ﻣﯽ ﺧﻮاﻫﯿﺪ ﮐﻪ از ﻫﯿﭻ ﯾﮏ از روش ﻫﺎي ﻓﻮق اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ از ﻣﺘﺪي ﺑﻪ ﻧﺎم )( .submitاﺳﺘﻔﺎده ﮐﻨﯿﺪ.
اﯾﻦ ﻣﺘﺪ ﺟﺰﺋﯽ از ﺗﻌﺮﯾﻔﺎت DOMﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ formاﺳﺖ و ﻣﯽ ﺗﻮاﻧﺪ ﻫﺮ ﺟﺎﯾﯽ از ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﺷﻮد .ﺑﺮاي اﯾﻦ ﮐﺎر اوﻻ
ﺑﺎﯾﺪ ارﺟﺎﻋﯽ ﺑﻪ ﻓﺮم ﻣﻮرد ﻧﻈﺮ اﯾﺠﺎد ﮐﺮد )ﻃﺒﻖ روش ﻫﺎﯾﯽ ﮐﻪ ﻗﺒﻼ ذﮐﺮ ﺷﺪ(:
;)"oForm = document.getElementById("form1
;]"oForm = document.forms["form1
;]oForm = document.forms[0
75 ﺑﺎر ﮐﻠﯿﮏ ﮐﺎرﺑﺮ ﺑﺮ روي دﮐﻤﻪ ﯾﮏ درﺧﻮاﺳﺖ اﺿﺎﻓﯽ ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﯽ ﺷﻮد.
راه ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ ﺑﺴﯿﺎر ﺳﺎده اﺳﺖ :ﺑﻌﺪ از اﯾﻨﮑﻪ ﮐﺎرﺑﺮ دﮐﻤﻪ را ﮐﻠﯿﮏ ﮐﺮد ،آن را ﻏﯿﺮ ﻓﻌﺎل 1ﻣﯽ ﮐﻨﯿﻢ.
9
ﺑﺮاي اﻧﺠﺎم اﯾﻦ ﮐﺎر ﻣﯽ ﺗﻮان ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده از دﮐﻤﻪ submitﻣﻌﻤﻮﻟﯽ زﯾﺮ:
><input type="submit" value="Submit" /
ﻣﻮﻗﻌﯽ ﮐﻪ اﯾﻦ دﮐﻤﻪ ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد اوﻻ ﺧﻮد دﮐﻤﻪ ﻏﯿﺮ ﻓﻌﺎل ﻣﯽ ﺷﻮد و ﺳﭙﺲ ﻓﺮﻣﯽ را ﮐﻪ ﺟﺰﺋﯽ از آن اﺳﺖ ،ارﺳﺎل ﻣﯽ ﮐﻨﺪ.
ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ در اﯾﻨﺠﺎ ﮐﻠﻤﻪ ﮐﻠﯿﺪي thisﺑﻪ دﮐﻤﻪ اﺷﺎره دارد و formﺑﻪ ﻓﺮم درﺑﺮﮔﯿﺮﻧﺪه دﮐﻤﻪ اﺷﺎره ﻣﯽ ﮐﻨﺪ.
ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﯾﮏ ﻓﺮم را ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﻮﺳﯿﻠﻪ ﻣﺘﺪ )( .submitارﺳﺎل ﮐﻨﯿﻢ ﻣﯽ ﺗﻮاﻧﯿﻢ آن را ﺑﻪ وﺳﯿﻠﻪ ﻣﺘﺪي ﺑﻪ ﻧﺎم )( .resetﻧﯿﺰ
) resetﭘﺎك ﺳﺎزي( ﮐﻨﯿﻢ:
”)(<input type=”button” value=”Reset” onclick=”document.forms[0].reset
>/
و ﭼﻨﺪ ﺧﻄﯽ:
><textarea>Content</textarea
ﺑﺮاي درﺳﺖ ﮐﺮدن ﯾﮏ ﮐﺎدر ﻣﺘﻨﯽ ﯾﮏ ﺧﻄﯽ ﻣﯽ ﺑﺎﯾﺴﺖ ﺻﻔﺖ typeﻋﻨﺼﺮ inputرا ﺑﺮاﺑﺮ textﻗﺮار دﻫﯿﻢ .ﺻﻔﺖ sizeﻃﻮل
ﮐﺎدر را ﺑﺮ ﺣﺴﺐ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮﻫﺎ ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ .ﻣﻘﺪار ﺻﻔﺖ valueﻧﯿﺰ ﻣﻘﺪار ﭘﯿﺶ ﻓﺮض ﻣﻮﺟﻮد داﺧﻞ آن را ﻣﺸﺨﺺ ﻣﯽ
ﮐﻨﺪ .ﺻﻔﺖ maxlengthﺣﺪاﮐﺜﺮ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮﻫﺎﯾﯽ ﮐﻪ ﺑﺘﻮان در ﮐﺎدر وارد ﮐﺮد را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ.
><input type="text" size="25" maxlength="50" value="initial value" /
1
disabled
ﻋﻨﺼﺮ textareaﺑﺮاي اﯾﺠﺎد ﮐﺎدرﻫﺎي ﻣﺘﻨﯽ ﭼﻨﺪ ﺧﻄﯽ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮد .از ﺻﻔﺖ ﻫﺎي rowsو colsﺑﺮاي ﻣﺸﺨﺺ
ﮐﺮدن ﻃﻮل و ﻋﺮض textareaاﺳﺘﻔﺎده ﻣﯽ ﺷﻮد.
><textarea rows="25" cols="5">initial value</textarea 76
ﺑﺮ ﺧﻼف inputاﯾﻦ ﻋﻨﺼﺮ اﻣﮑﺎن ﻣﺸﺨﺺ ﮐﺮدن ﺣﺪاﮐﺜﺮ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي را ﻧﺪارد. 9
ﭼﻮن ﻣﻘﺪاري ﮐﻪ ﺧﺎﺻﯿﺖ valueﺑﺮﻣﯽ ﮔﺮداﻧﺪ ﯾﮏ رﺷﺘﻪ ﺳﺎده اﺳﺖ ﻣﯽ ﺗﻮان از ﺗﻤﺎﻣﯽ ﻣﺘﺪﻫﺎ و ﺧﻮاﺻﯽ ﮐﻪ ﻗﺒﻼ ﺑﺮاي رﺷﺘﻪ ﻫﺎ
اﺷﺎره ﮐﺮدﯾﻢ اﺳﺘﻔﺎده ﮐﺮد.
;)'alert ('oTextbox1.length
از اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﺮاي ﻗﺮاردادن ﻣﻘﺎدﯾﺮ ﺟﺪﯾﺪ درﮐﺎدر ﻫﺎي ﻣﺘﻨﯽ ﻧﯿﺰ ﻣﯽ ﺗﻮان اﺳﺘﻔﺎده ﮐﺮد .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺎ دﺳﺘﻮر زﯾﺮ ﻣﯽ ﺗﻮان
ﻣﻘﺎدﯾﺮ ﺟﺪﯾﺪي را ﺑﻪ ) oTextbox1ﮐﻪ در ﺑﺎﻻ ذﮐﺮ ﺷﺪ( اﺿﺎﻓﻪ ﮐﻨﯿﻢ:
;'oTextbox1.value='first textbox
77 ﺧﺎرج ﺷﻮد و روﯾﺪاد changeﻧﯿﺰ وﻗﺘﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻋﻼوه ﺑﺮ ﺗﻐﯿﯿﺮ ﻣﺘﻦ داﺧﻞ textareaﻫﺎ ،ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﻧﯿﺰ از آن ﻫﺎ ﺧﺎرج
ﻣﯽ ﺷﻮد.
9
اﮔﺮ ﻣﺘﻦ داﺧﻞ ﮐﺎدر ﻣﺘﻨﯽ ﺛﺎﺑﺖ ﺑﺎﺷﺪ و ﻓﻘﻂ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از ﻋﻨﺼﺮ ﺑﺮود blurرخ ﻣﯽ دﻫﺪ اﻣﺎ اﮔﺮ ﻣﺘﻦ ﻫﻢ ﺗﻐﯿﯿﺮ ﮐﺮده ﺑﺎﺷﺪ اﺑﺘﺪا
روﯾﺪاد changeو ﺑﻪ دﻧﺒﺎل آن blurرخ ﺧﻮاﻫﺪ داد.
ﮐﺎري ﮐﻪ ﺑﺎﯾﺪ در اﯾﻨﺠﺎ اﻧﺠﺎم دﻫﯿﻢ ﺗﺸﺨﯿﺺ وارد ﺷﺪن ﺣﺪاﮐﺜﺮ ﮐﺎراﮐﺘﺮ ﻫﺎ و ﻓﺮاﺧﻮاﻧﯽ ﻣﺘﺪ )( .focusﺑﺮاي ﻋﻨﺼﺮ ﻓﺮم ﺑﻌﺪي
اﺳﺖ .ﺑﺮاي اﯾﻦ ﮐﺎر از ﺗﺎﺑﻌﯽ ﺑﻪ ﻧﺎم testاﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ:
{)function test(oTextbox
;var oForm = oTextbox.form
//make sure the textbox is not the last field in the form
if (oForm.elements[oForm.elements.length-1] != oTextbox
78
{ ))"&& oTextbox.value.length == oTextbox.getAttribute("maxlength 9
{ )for (var i=0; i < oForm.elements.length; i++
{ )if (oForm.elements[i] == oTextbox
{ )for(var j=i+1; j < oForm.elements.length; j++
{ )"if (oForm.elements[j].type != "hidden
;)(oForm.elements[j].focus
;return
}
}
;return
}
}
}
;}
ﺗﺎﺑﻌﯽ ﮐﻪ ﻣﺎ ﻧﻮﺷﺘﯿﻢ ﺑﺎﯾﺪ ﺑﻌﺪ از ﻫﺮ ﺑﺎر وارد ﮐﺮدن ﮐﺎراﮐﺘﺮ داﺧﻞ textboxﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﺷﻮد .ﺑﺮاي اﯾﻨﮑﺎر از روﯾﺪاد onKeyUp
اﺳﺘﻔﺎده ﺧﻮاﻫﯿﻢ ﮐﺮد ﺑﻪ ﺻﻮرت زﯾﺮ:
><input type='text' maxlength='4' onKeyUp='test(this)' /
ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ ﺑﯿﻨﯿﺪ اﯾﻦ ﺗﺎﺑﻊ ﺑﺴﯿﺎر ﺳﺎده اﺳﺖ .ﻓﻘﻂ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮﻫﺎي وارد ﺷﺪه در ﮐﺎدر ﻣﺘﻨﯽ را ﺑﺎ ﺻﻔﺖ maxlengthﻋﻨﺼﺮ
ﻣﻮرد ﻧﻈﺮ ﻣﻘﺎﯾﺴﻪ ﻣﯽ ﮐﻨﺪ و در ﺻﻮرﺗﯽ ﮐﻪ ﺑﺮاﺑﺮ ﻧﺒﺎﺷﺪ trueو در ﻏﯿﺮ اﯾﻨﺼﻮرت falseرا ﺑﺮﻣﯽ ﮔﺮداﻧﺪ.
ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﺻﻔﺖ maxlengthﺑﺮاي textareaﺻﻔﺘﯽ ﻏﯿﺮ اﺳﺘﺎﻧﺪارد اﺳﺖ اﻣﺎ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﻮﺳﻂ ﻣﺘﺪ )(.getAttribute
ﻣﻘﺪار آن را ﺑﺪﺳﺖ آورﯾﻢ.
در ﻣﺮﺣﻠﻪ ﺑﻌﺪ ﺑﺎﯾﺪ اﯾﻦ ﺗﺎﺑﻊ را در روﯾﺪاد onKeyPressﻋﻨﺼﺮﻣﺎن ﻓﺮاﺧﻮاﻧﯽ ﮐﻨﯿﻢ .اﯾﻦ روﯾﺪاد ﻗﺒﻞ از وارد ﮐﺮدن ﻫﺮ ﮐﺎراﮐﺘﺮ رخ
ﺧﻮاﻫﺪ داد ﮐﻪ دﻗﯿﻘﺎ زﻣﺎﻧﯽ اﺳﺖ ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ ﺣﺪاﮐﺜﺮ رﺳﯿﺪن ﺗﻌﺪاد ﮐﺎرﮐﺘﺮ ﻫﺎي ورودي را ﭼﮏ ﮐﻨﯿﻢ .ﭼﯿﺰي ﻣﺎﻧﻨﺪ ﮐﺪ زﯾﺮ:
ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ ﻣﻘﺪار ﺑﺮﮔﺸﺘﯽ از ﺗﺎﺑﻊ ﺑﻪ ﮐﻨﺘﺮل ﮐﻨﻨﺪهي روﯾﺪاد onKeyPressﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد .اﻟﺒﺘﻪ اﯾﻦ ﺷﯿﻮه از راه ﻫﺎي
79 ﻗﺪﯾﻤﯽ ﮐﻨﺘﺮل رﻓﺘﺎر ﭘﯿﺶ ﻓﺮض ﯾﮏ روﯾﺪاد اﺳﺖ.
9 ﻣﻮﻗﻌﯽ ﮐﻪ ﺗﻌﺪاد ﮐﺎراﮐﺘﺮ ﻫﺎي ورودي از MAXﮐﻤﺘﺮ ﺑﺎﺷﺪ ﺗﺎﺑﻊ ﻣﻘﺪار trueﺑﻪ ﻣﻌﻨﯽ اداﻣﻪ رﻓﺘﺎر ﻋﺎدي روﯾﺪاد را ﺑﺮﻣﯽ ﮔﺮداﻧﺪ در
ﻏﯿﺮ اﯾﻦ ﺻﻮرت ﻣﻮﺟﺐ ﺟﻠﻮﮔﯿﺮي از رﻓﺘﺎر ﻋﺎدي روﯾﺪاد و در ﻧﺘﯿﺠﻪ ﮐﺎراﮐﺘﺮﻫﺎي ﺑﯿﺶ از ﺣﺪ ﻣﺠﺎز ﺧﻮاﻫﺪ ﺷﺪ.
ﻣﻘﺪار ﺻﻔﺖ valueآﯾﺘﻤﯽ را ﮐﻪ ﺗﻮﺳﻂ ﮐﺎرﺑﺮ اﻧﺘﺨﺎب ﻣﯽ ﺷﻮد ﺑﻪ ﺳﺮور ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد.
ﺑﺮاي ﻧﺸﺎن دادن ﯾﮏ listboxﻓﻘﻂ ﮐﺎﻓﯽ اﺳﺖ ﺻﻔﺘﯽ ﺑﻪ ﻧﺎم sizeرا ﺑﺎ ﻣﻘﺪاري ﮐﻪ ﻣﺸﺨﺺ ﮐﻨﻨﺪه ي ﺗﻌﺪاد آﯾﺘﻢ ﻫﺎي ﻗﺎﺑﻞ
ﻧﻤﺎﯾﺶ ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض اﺳﺖ ﺑﻪ ﺗﮓ selectاﺿﺎﻓﻪ ﮐﻨﯿﺪ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﮐﺪ زﯾﺮ listboxي ﺑﺎ 5آﯾﺘﻢ ﻧﻤﺎﯾﺸﯽ ﺑﺼﻮرت
ﭘﯿﺶ ﻓﺮض را ﻧﻤﺎﯾﺶ ﻣﯽ دﻫﺪ:
>"<select name="selAge" id="selAge" size="3
><option value="1">18-21</option
><option value="2">22-25</option
><option value="3">26-29</option
><option value="4">30-35</option
><option value="5">Over 35</option
></select
ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻫﺮ دو ﻧﻮع ﻋﻨﺼﺮ ﻓﻮق ﻣﯽ ﺗﻮان ﻃﺒﻖ ﻗﻮاﻋﺪي ﮐﻪ ﻗﺒﻼ ﮔﻔﺘﯿﻢ ﻋﻤﻞ ﮐﻨﯿﺪ:
;)"oListbox = document.getElementById("selAge
DOMﺑﺮاي ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ selectآراﯾﻪ اي ﺑﻪ ﻧﺎم optionsﮐﻪ ﻫﺮ ﺧﺎﻧﻪ آن اﺷﺎره ﺑﻪ optionي از آن ﻋﻨﺼﺮ دارد ﺗﻌﺮﯾﻒ ﮐﺮده
اﺳﺖ.
ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺮاي ﻧﻤﺎﯾﺶ ﻣﺘﻦ )ﻋﻨﻮان( ﻫﺮ optionو ﻣﻘﺪار ﺻﻔﺖ valueآن ﻫﺎ از روش ﻫﺎي ﻗﺒﻠﯽ اﺳﺘﻔﺎده ﮐﻨﯿﻢ .ﻣﺜﻼ:
alert(oListbox.options[1].text); //output display text
alert(oListbox.options[1].value); //output value
80
ﻋﻼوه ﺑﺮ اﯾﻦ ،ﻫﺮ optionداراي ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم indexاﺳﺖ ﮐﻪ در واﻗﻊ ﻣﻮﻗﻌﯿﺖ آن را در آراﯾﻪ optionsﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ. 9
"alert(oListbox.options[1].index); //outputs "1
اﻟﺒﺘﻪ ﭼﻮن optionsﯾﮏ آراﯾﻪ اﺳﺖ ﻣﯽ ﺗﻮاﻧﯿﻢ از ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم lengthﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﺗﻌﺪاد ﮐﻞ optionﻫﺎي select
اﺳﺘﻔﺎده ﮐﻨﯿﻢ.
;)”alert(“There are “ + oListbox.options.length + “ in the list.
اﻣﺎ ﺣﺎل از ﮐﺠﺎ ﺑﻔﻬﻤﯿﻢ ﮐﻪ ﮐﺪام ) optionآﯾﺘﻢ( ﺗﻮﺳﻂ ﮐﺎرﺑﺮ اﻧﺘﺨﺎب ﺷﺪه اﺳﺖ؟
اﻣﺎ ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽ داﻧﯿﺪ ﺑﺎ اﺿﺎﻓﻪ ﮐﺮدن ﺻﻔﺘﯽ ﻣﺎﻧﻨﺪ ' multiple='multipleﺑﻪ ﻋﻨﺼﺮ selectاﻣﮑﺎن اﻧﺘﺨﺎب ﺑﯿﺶ از ﯾﮏ آﯾﺘﻢ
در آنِ واﺣﺪ اﻣﮑﺎن ﭘﺬﯾﺮ اﺳﺖ .در اﯾﻦ ﺻﻮرت ﺧﺎﺻﯿﺖ selectedIndexﺣﺎوي اوﻟﯿﻦ ﻋﻨﺼﺮ اﻧﺘﺨﺎب ﺷﺪه از listﺧﻮاﻫﺪ ﺑﻮد و اﯾﻦ
ﮐﻤﮑﯽ ﺑﻪ ﻣﺎ ﻧﻤﯽ ﮐﻨﺪ.ﭼﻮن indexﺗﻤﺎم آﯾﺘﻢ ﻫﺎي اﻧﺘﺨﺎب ﺷﺪه اﺣﺘﯿﺎج دارﯾﻢ .ﺑﺮاي اﯾﻦ ﮐﺎر ﻧﯿﺎز ﺑﻪ ﯾﮏ ﺗﺎﺑﻊ دارﯾﻢ.
اﯾﻦ ﺗﺎﺑﻊ در ﻃﻮل آﯾﺘﻢ ﻫﺎي ﯾﮏ listboxﭼﺮﺧﺶ ﮐﺮده و ﻣﻘﺪار ﺧﺎﺻﯿﺘﯽ ﺑﻪ ﻧﺎم selectedﮐﻪ ﻣﺸﺨﺺ ﮐﻨﻨﺪهي اﻧﺘﺨﺎب ﺷﺪن
ﯾﺎ ﻧﺸﺪن آﯾﺘﻢ اﺳﺖ را ﺑﺮرﺳﯽ ﮐﺮده و indexآن optionرا ﺑﻪ آراﯾﻪ اي اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﺪ .ﺧﺎﺻﯿﺖ selectedﻓﻘﻂ ﻣﯽ ﺗﻮاﻧﺪ ﯾﮑﯽ
از ﻣﻘﺎدﯾﺮ ) trueاﻧﺘﺨﺎب ﺷﺪه( ﯾﺎ ) fasleاﻧﺘﺨﺎب ﻧﺸﺪه( را در ﺑﺮ داﺷﺘﻪ ﺑﺎﺷﺪ.
{ )function getSelectedIndexes (oListbox
;var arrIndexes = new Array
{ )for (var i=0; i < oListbox.options.length; i++
{ )if (oListbox.options[i].selected
;)arrIndexes.push(i
}
}
;return arrIndexes
;}
از اﯾﻦ ﺗﺎﺑﻊ ﻣﯽ ﺗﻮان ﻫﻢ ﺑﺮاي ﺑﺪﺳﺖ آوردن آﯾﺘﻢ ﻫﺎي اﻧﺘﺨﺎب ﺷﺪه و ﻫﻢ ﺗﻌﺪاد آن ﻫﺎ اﺳﺘﻔﺎده ﮐﺮد.
81 listي ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ روي آن ﮐﺎر ﮐﻨﯿﻢ ،ﻧﺎم آﯾﺘﻤﯽ ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ و ﻣﻘﺪاري ﮐﻪ ﻣﯽﺧﻮاﻫﯿﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ.
9 ﺑﻌﺪ ﺗﻮﺳﻂ ﻣﺘﺪﻫﺎي ﻗﺒﻠﯽ DOMﯾﮏ ﻋﻨﺼﺮ optionﺟﺪﯾﺪ اﯾﺠﺎد ﮐﺮده و آن را ﺑﻪ ﻋﻨﺼﺮ selectاﺿﺎﻓﻪ ﻣﯽﮐﻨﯿﻢ:
{ )function add (oListbox, sName, sValue
;)"var oOption = document.createElement("option
;))oOption.appendChild(document.createTextNode(sName
{ )if (arguments.length == 3
;)oOption.setAttribute("value", sValue
}
;)oListbox.appendChild(oOption
}
ﭼﻮن ﺻﻔﺖ valueﺑﺮاي ﯾﮏ optionاﺧﺘﯿﺎري اﺳﺖ ﻣﯽ ﺗﻮاﻧﯿﻢ در ﺻﻮرﺗﯽ ﮐﻪ valueﺑﺮاي ﺗﺎﺑﻊ ﻓﺮﺳﺘﺎده ﺷﺪه اﺳﺖ آن را ﺑﻪ
optionاﺿﺎﻓﻪ ﮐﻨﯿﻢ .ﺑﺮاي ﭼﮏ ﮐﺮدن اﯾﻨﮑﻪ valueﻓﺮﺳﺘﺎده ﺷﺪه ﯾﺎ ﻧﻪ از دﺳﺘﻮر arguments.length==3اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﯿﻢ.
ﺣﺬف optionﻫﺎ
ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻋﻼوه ﺑﺮ اﻣﮑﺎن اﺿﺎﻓﻪ ﮐﺮدن optionﻫﺎ ،اﻣﮑﺎن ﺣﺬف آن ﻫﺎ را ﻧﯿﺰ ﻓﺮاﻫﻢ ﻣﯽ ﮐﻨﺪ.
ﯾﮑﯽ از روش ﻫﺎي ﻗﺪﯾﻤﯽ ﺑﺮاي اﯾﻦ ﮐﺎر اﺳﺘﻔﺎده از آراﯾﻪي optionsو ﻗﺮاردادن ﻣﻘﺪار nullﺑﺮاي ﻋﻨﺼﺮي از آن ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﻢ
ﺣﺬف ﮐﻨﯿﻢ اﺳﺖ:
;oListbox.options[1] = null
روش ﺑﻬﺘﺮ و ﺟﺪﯾﺪﺗﺮ اﺳﺘﻔﺎده از ﻣﺘﺪي ﺑﻪ ﻧﺎم )( .removeاﺳﺖ ﮐﻪ آرﮔﻮﻣﺎن ) (indexﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﺑﺮاي ﺣﺬف را ﻣﯽ ﭘﺬﯾﺮد:
;)”var oListbox = document.getElementById(“selListbox
oListbox.remove(0); //remove the first option
ﻣﯽ ﺗﻮان ﻫﻤﺎﻧﻨﺪ روش اﺿﺎﻓﻪ ﮐﺮدن optionﻫﺎ ﺗﺎﺑﻌﯽ ﺑﺮاي ﺣﺬف آن ﻫﺎ از listﻫﺎ اﺳﺘﻔﺎده ﮐﺮد:
{ )function del (oListbox, iIndex
;)oListbox.remove(iIndex
}
ﭼﻨﺎﻧﭽﻪ ﺑﺨﻮاﻫﯿﺪ ﻫﺮ ﯾﮏ از optionﻫﺎي ﻣﻮﺟﻮد در ﯾﮏ listboxرا ﺣﺬف ﮐﻨﯿﺪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﻣﺘﺪ )( .removeرا ﺑﺮاي ﻫﺮ ﮐﺪام از
آن ﻫﺎ ﻓﺮاﺧﻮاﻧﯽ ﮐﻨﯿﺪ.
{ )function clear (oListbox
{ )for (var i=oListbox.options.length-1; i >= 0; i--
82
;)del(oListbox, i 9
}
}
ﮐﺪ ﺑﺎﻻ ﺑﺮاي ﺣﺬف ،آﯾﺘﻢ ﻫﺎ را ﺑﺮ ﻋﮑﺲ ﻃﯽ ﻣﯽ ﮐﻨﺪ .اﯾﻦ ﮐﺎر اﻟﺰاﻣﯽ اﺳﺖ ﭼﺮا ﮐﻪ ﺑﺎ ﻫﺮ ﺑﺎر ﺣﺬف ﺷﺪن ﯾﮏ آﯾﺘﻢ از ﻟﯿﺴﺖ
ﺧﺎﺻﯿﺖ indexﻫﺮ optionﺷﻤﺎره ﮔﺬاري ﻣﺠﺪد ﻣﯽ ﺷﻮد .ﺑﻪ اﯾﻦ دﻟﯿﻞ ﺑﻬﺘﺮ اﺳﺖ ﻫﻤﯿﺸﻪ اول ﻋﻨﺼﺮي ﺑﺎ ﺑﺰرﮔﺘﺮﯾﻦ indexو
ﺳﭙﺲ ﻋﻨﺎﺻﺮ ﺑﺎ indexﮐﻮﭼﮑﺘﺮ ﺗﺮ ﺣﺬف ﺷﻮﻧﺪ.
r
ﻓﺼﻞ ده
f
روﯾﺪادﻫﺎدرﺟﺎوااﺳﮑﺮﯾﭙﺖ
J
ﺗﻌﺎﻣﻼت ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺎ HTMLاز ﻃﺮﯾﻖ رﺧﺪاد روﯾﺪادﻫﺎﯾﯽ ﮐﻪ ﺑﻪ واﺳﻄﻪ دﺳﺘﮑﺎريﻫﺎﯾﯽ ﮐﻪ ﮐﺎرﺑﺮ ﯾﺎ ﻣﺮورﮔﺮ ﺑﺮ روي ﺻﻔﺤﻪ
اﻧﺠﺎم ﻣﯽدﻫﺪ ،اﻣﮑﺎن ﭘﺬﯾﺮ ﻣﯽ ﺷﻮد .روﯾﺪادﻫﺎ و ﭼﮕﻮﻧﮕﯽ ﺗﺸﺨﯿﺺ و ﮐﻨﺘﺮل آن ﻫﺎ ﯾﮑﯽ از ﻣﺒﺎﺣﺚ ﻣﻬﻢ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﻪ ﺷﻤﺎر
ﻣﯽ رود .ﻣﺎ در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﺑﺎ ﻣﻔﻬﻮم روﯾﺪادﻫﺎ آﺷﻨﺎ ﺷﺪه و ﺳﭙﺲ ﺑﻪ روﺷﻬﺎي ﮐﻨﺘﺮل و ﭘﺎﺳﺨﮕﻮﯾﯽ ﺑﻪ آن ﻫﺎ ﺧﻮاﻫﯿﻢ ﭘﺮداﺧﺖ.
ﺳﭙﺲ ﺑﺎ اﻧﻮاع روﯾﺪادﻫﺎ آﺷﻨﺎ ﺷﺪه و در اﻧﺘﻬﺎ ﺑﺎ ﺷﯽ eventﺑﺮاي ﺗﺸﺨﯿﺺ ﺧﺼﻮﺻﯿﺎت روﯾﺪادﻫﺎي رخ داده اﺳﺘﻔﺎده ﺧﻮاﻫﯿﻢ ﮐﺮد.
ﮐﻨﺘﺮل روﯾﺪادﻫﺎ
ﻣﻮﻗﻌﯽ ﮐﻪ ﺻﻔﺤﻪ ﺑﺎرﮔﺬاري ﻣﯽ ﺷﻮد روﯾﺪادي رخ داده اﺳﺖ ،ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ ﺑﺮ روي دﮐﻤﻪ اي ﮐﻠﯿﮏ ﻣﯽ ﮐﻨﺪ ،ﺑﺎز ﻫﻢ روﯾﺪادي
رخ داده اﺳﺖ .ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ﻣﯽ ﺗﻮاﻧﻨﺪ از اﯾﻦ روﯾﺪادﻫﺎ ﺑﺮاي اﺟﺮاي ﮐﺪﻫﺎﯾﯽ ﮐﻪ ﺑﻪ روﯾﺪادﻫﺎ ﭘﺎﺳﺦ ﻣﯽ دﻫﻨﺪ اﺳﺘﻔﺎده ﮐﻨﻨﺪ .ﻣﺜﻼ 84
دﮐﻤﻪ اي ﻣﻮﺟﺐ ﺑﺴﺘﻦ ﭘﻨﺠﺮه ﺷﻮد ،ﭘﯿﻐﺎﻣﯽ را ﺑﻪ ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ دﻫﺪ ،داده ﻫﺎ را اﻋﺘﺒﺎرﺳﻨﺠﯽ ﮐﻨﺪ و.... 10
روﯾﺪادﻫﺎ در واﻗﻊ ﻋﻤﻠﯿﺎت ﺧﺎﺻﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﯾﺎ ﺗﻮﺳﻂ ﮐﺎرﺑﺮ ﯾﺎ ﺗﻮﺳﻂ ﺧﻮد ﻣﺮورﮔﺮ اﻧﺠﺎم ﻣﯽ ﺷﻮﻧﺪ .اﯾﻦ روﯾﺪاد ﻫﺎ ﻧﺎم ﻫﺎﯾﯽ
ﻫﻤﭽﻮن mouseover ، load ،clickو ...دارﻧﺪ .اﺻﻄﻼﺣﺎ ﺑﻪ ﺗﺎﺑﻌﯽ ﮐﻪ در ﭘﺎﺳﺦ ﺑﻪ ﯾﮏ روﯾﺪاد ﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﺷﻮد ﮐﻨﺘﺮﻟﮕﺮ
روﯾﺪاد 1ﻣﯽ ﮔﻮﯾﻨﺪ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺗﺎﺑﻌﯽ ﮐﻪ ﺑﺮاي ﭘﺎﺳﺦ ﺑﻪ روﯾﺪاد clickﺻﺪا زده ﻣﯽ ﺷﻮد ﮐﻨﺘﺮﻟﮕﺮ onclickﻧﺎﻣﯿﺪه ﻣﯽ ﺷﻮد.
ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﮐﻨﺘﺮﻟﮕﺮﻫﺎي ﺣﺎدﺛﻪ ﺑﻪ دو روش ﻣﯽ ﺗﻮان ﻋﻤﻞ ﮐﺮد :از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﯾﺎ از ﻃﺮﯾﻖ .HTML
ﺑﺮاي ﻣﺸﺨﺺ ﮐﺮدن ﯾﮏ ﮐﻨﺘﺮﻟﮕﺮ از ﻃﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺑﺘﺪا ﺑﺎﯾﺪ ﺑﻪ ﺷﯽ ﻣﻮرد ﻧﻈﺮ ارﺟﺎﻋﯽ اﯾﺠﺎد ﮐﺮده و ﺳﭙﺲ ﺗﺎﺑﻌﯽ را ﺑﻪ
ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ آن )ﮐﻪ ﺑﻪ ﺻﻮرت ﯾﮏ ﺧﺎﺻﯿﺖ ﺑﺮاي آن ﺗﻌﺮﯾﻒ ﺷﺪه اﺳﺖ( ﻣﻨﺘﺴﺐ ﮐﻨﯿﻢ .ﺑﺮاي ﻣﺜﺎل:
;)'var oDiv = document.getElementById('div1
{)( oDiv.onclick= function
;)'!!! alert('I Was Clicked
}
دﻗﺖ ﮐﻨﯿﺪ ﮐﻪ در اﯾﻦ روش ﺑﺎﯾﺪ ﺗﻤﺎﻣﯽ ﺣﺮوف ﻧﺎم ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪاد ﺑﻪ ﺻﻮرت ﮐﻮﭼﮏ ﻧﻮﺷﺘﻪ ﺷﻮد.
در روش دوم ﻣﯽ ﺗﻮاﻧﯿﻢ ﯾﮏ ﺻﻔﺖ ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪاد ،ﮐﻪ اﺳﮑﺮﯾﭙﺘﯽ را ﺑﻪ ﻋﻨﻮان ﻣﻘﺪار ﻣﯽ ﭘﺬﯾﺮد در ﺗﮓ ﻣﺮﺑﻮﻃﻪ ﻗﺮار دﻫﯿﻢ .ﺑﻪ
ﺻﻮرت زﯾﺮ:
><div onclick='alert("I Was Clicked !!!")'></div
در اﯾﻦ روش ﻧﺎم ﮐﻨﺘﺮﻟﮕﺮ ﺣﺎدﺛﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﻫﺮ ﺷﮑﻠﯽ ﻧﻮﺷﺘﻪ ﺷﻮد .در ﻧﺘﯿﺠﻪ onclickﻣﻌﺎدل اﺳﺖ ﺑﺎ OnClick :ﯾﺎ
.ONCLICK
روﯾﺪادﻫﺎي mouse
راﯾﺞ ﺗﺮﯾﻦ روﯾﺪادﻫﺎﯾﯽ ﻫﺴﺘﻨﺪ ﮐﻪ رخ ﻣﯽ دﻫﻨﺪ و ﺑﻪ ﺷﺮح زﯾﺮ ﻣﯽ ﺑﺎﺷﻨﺪ:
1
Event Handler
85
:mousedown ﻣﻮﻗﻌﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻫﺮ دﮐﻤﻪ اي از ﻣﺎوس را ﻓﺸﺎر دﻫﺪ رخ ﻣﯽ دﻫﺪ.
:mouseout ﻣﻮﻗﻌﯽ رخ ﻣﯿﺪﻫﺪ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس ﺑﺮ روي ﻋﻨﺼﺮ اﺳﺖ و ﮐﺎرﺑﺮ آن را ﺑﻪ ﺑﯿﺮون از ﻣﺤﺪوده ﻋﻨﺼﺮ ﻫﺪاﯾﺖ
10 ﻣﯿﮑﻨﺪ.
:mouseover ﻣﻮﻗﻌﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس از ﺧﺎرج از ﻋﻨﺼﺮ ﺑﺮ روي ان ﻫﺪاﯾﺖ ﻣﯽ ﺷﻮد.
:mouseup ﻣﻮﻗﻌﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﻫﺮدﮐﻤﻪ اي از ﻣﺎوس رﻫﺎ ﻣﯽ ﺷﻮد.
:mousemove ﻣﮑﺮرا ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺸﺎﻧﮕﺮ ﻣﻮس ﺑﺮ روي ﻋﻨﺼﺮي اﺳﺖ رخ ﻣﯽ دﻫﺪ.
ﺗﻤﺎﻣﯽ ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﯾﮏ ﺻﻔﺤﻪ از روﯾﺪادﻫﺎي ﻓﻮق ﺑﻪ ﺧﻮﺑﯽ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ.
اﯾﻦ روﯾﺪاد ﺑﺮاي ﺗﮓ ﻫﺎﯾﯽ ﻫﻤﭽﻮن iframe ،img ،embed ،bodyو scriptﻗﺎﺑﻞ اﺳﺘﻔﺎده اﺳﺖ.
:unloadﻫﻨﮕﺎﻣﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﺻﻔﺤﻪ ﺑﺎر ﺷﺪه ﺟﺎري را ﺑﺒﻨﺪد .اﯾﻦ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﻣﻮﺟﺐ زدن دﮐﻤﻪ X
) (closeﭘﻨﺠﺮه ﯾﺎ وارد ﮐﺮدن ﯾﮏ آدرس ﺟﺪﯾﺪ در ﻧﻮار آدرس ﻣﺮورﮔﺮ ﺑﺎﺷﺪ.
:abortاﯾﻦ روﯾﺪاد ﺑﺮاي ﯾﮏ objectﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻗﺒﻞ از ﺑﺎرﮔﺬاري ﮐﺎﻣﻞ آن ،ﻋﻤﻞ ﺑﺎرﮔﺬاري را ﻣﺘﻮﻗﻒ ﮐﻨﺪ رخ
ﻣﯽ دﻫﺪ.
:errorاﯾﻦ روﯾﺪاد ﺑﺮاي ﯾﮏ ﺻﻔﺤﻪ ﻫﻨﮕﺎﻣﯽ ﮐﻪ در آن ﯾﮏ ﺧﻄﺎ رخ ﻣﯽ دﻫﺪ ،ﺑﺮاي ﯾﮏ ﻋﮑﺲ ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺘﻮاﻧﺪ
ﺑﺎرﮔﺬاري ﺷﻮد و ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ objectﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻧﺘﻮاﻧﺪ ﺑﺎرﮔﺬاري ﺷﻮد رخ ﻣﯽ دﻫﺪ.
:selectاﯾﻦ روﯾﺪاد ﻫﻨﮕﺎﻣﯽ رخ ﻣﯽ دﻫﺪ ﮐﻪ ﮐﺎرﺑﺮ ﯾﮏ ﯾﺎ ﭼﻨﺪ ﮐﺎراﮐﺘﺮ را از داﺧﻞ ﯾﮏ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ )ﻣﻨﻈﻮر ﺗﮓ ﻫﺎي
textareaو (inputاﻧﺘﺨﺎب ﮐﻨﺪ رخ ﻣﯽ دﻫﺪ.
:changeﺑﺮ روي ﯾﮏ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ ،ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻣﻘﺪار داﺧﻞ ﻧﺎﺣﯿﻪ ﻣﺘﻨﯽ ﺗﻐﯿﯿﺮ ﮐﺮده و در اداﻣﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ از روي
ﻋﻨﺼﺮ ﺧﺎرج ﺷﻮد و ﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ selectﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻣﻘﺪار آن ﺗﻐﯿﯿﺮ ﻣﯽ ﮐﻨﺪ رخ ﻣﯽ دﻫﻨﺪ.
:submitﺑﺮاي ﻋﻨﺼﺮ ،formﻫﻨﮕﺎﻣﯽ ﮐﻪ دﮐﻤﻪ submitﻣﺮﺑﻮط ﺑﻪ ﻓﺮم ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﺪ.
:resetﺑﺮاي ﻋﻨﺼﺮ ،formﻫﻨﮕﺎﻣﯽ ﮐﻪ دﮐﻤﻪ resetﻣﺮﺑﻮط ﺑﻪ ﻓﺮم ﮐﻠﯿﮏ ﻣﯽ ﺷﻮد رخ ﻣﯽ دﻫﺪ.
:focusﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ زﻣﺎﻧﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ ﺑﺮ روي آن ﻗﺮار ﻣﯽ ﮔﯿﺮد رخ ﻣﯽ دﻫﺪ.
:blurﺑﺮاي ﯾﮏ ﻋﻨﺼﺮ زﻣﺎﻧﯽ ﮐﻪ ﺗﻤﺮﮐﺰ ﺻﻔﺤﻪ را از دﺳﺖ ﻣﯽ دﻫﺪ رخ ﻣﯽ دﻫﺪ.
10 ﺑﻌﻀﯽ از اﻃﻼﻋﺎﺗﯽ ﮐﻪ اﯾﻦ ﺷﯽ در اﺧﺘﯿﺎر ﻗﺮار ﻣﯽ دﻫﺪ ﺑﻪ ﺷﺮح زﯾﺮ اﺳﺖ:
ﺷﯽ اي ﮐﻪ ﻣﻮﺟﺐ رﺧﺪاد روﯾﺪاد ﺷﺪه اﺳﺖ.
اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﻧﺸﺎﻧﮕﺮ ﻣﺎوس درﻫﻨﮕﺎم رﺧﺪاد روﯾﺪاد
اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﺻﻔﺤﻪ ﮐﻠﯿﺪ در ﻫﻨﮕﺎم رﺧﺪاد روﯾﺪاد
ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ اﯾﻦ ﺷﯽ ﻣﯽ ﺗﻮان ﺑﻪ ﭼﻨﺪﯾﻦ ﻃﺮﯾﻖ ﻋﻤﻞ ﮐﺮد:
در ،Internet Explorerاﯾﻦ ﺷﯽ ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﺧﻮاص ﺷﯽ windowﻗﺎﺑﻞ دﺳﺘﺮﺳﯽ اﺳﺖ .اﯾﻦ ﺑﺪﯾﻦ ﻣﻌﻨﯽ اﺳﺖ ﮐﻪ ﯾﮏ
ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪاد ﺑﻪ ﻃﺮﯾﻖ زﯾﺮ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﺷﯽ eventدﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﺪ:
{ )( oDiv.onclick = function
;var oEvent = window.event
}
اﮔﺮ ﭼﻪ اﯾﻦ ﺷﯽ ﺑﻪ ﻋﻨﻮان ﯾﮑﯽ از ﺧﻮاص windowﺷﻨﺎﺧﺘﻪ ﻣﯽ ﺷﻮد اﻣﺎ ﻓﻘﻂ زﻣﺎﻧﯽ در دﺳﺘﺮس اﺳﺖ ﮐﻪ روﯾﺪادي رخ داده
ﺑﺎﺷﺪ .ﺑﻌﺪ از اﯾﻨﮑﻪ ﮐﻨﺘﺮﻟﮕﺮ روﯾﺪاد ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ اﺟﺮا ﺷﺪ ،ﺷﯽ eventﻧﯿﺰ از ﺑﯿﻦ ﺧﻮاﻫﺪ رﻓﺖ.
اﻣﺎ در اﺳﺘﺎﻧﺪاردﻫﺎي DOMﻣﯽ ﺗﻮان از روش دﺳﺘﺮﺳﯽ ﺑﻪ آرﮔﻮﻣﺎن ﺗﺎﺑﻊ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﺷﯽ eventاﺳﺘﻔﺎده ﮐﻨﯿﻢ .ﺑﻪ ﻋﻨﻮان
ﻣﺜﺎل:
{ )( oDiv.onclick = function
;]var oEvent = arguments[0
}
اﻟﺒﺘﻪ ﻣﯽ ﺗﻮان ﻧﺎﻣﯽ ﺑﺮاي اﯾﻦ آرﮔﻮﻣﺎن ﻣﺸﺨﺺ ﮐﺮد و از آن ﺑﺮاي دﺳﺘﺮﺳﯽ اﺳﺘﻔﺎده ﻧﻤﻮد:
{ )oDiv.onclick = function (oEvent
...
}
ﻓﺼﻞ ﯾﺎزده
ﮐﺎرﺑﺎﮐﻮﮐﯽ1ﻫﺎ
ﮐﻮﮐﯽ ﻫﺎ در واﻗﻊ ﻣﺘﻐﯿﺮﻫﺎﯾﯽ ﻫﺴﺘﻨﺪ ﮐﻪ در ﻗﺎﻟﺐ ﯾﮏ ﻓﺎﯾﻞ ﻣﺘﻨﯽ ﺳﺎده ﺑﺮ روي ﮐﺎﻣﭙﯿﻮﺗﺮ ﮐﺎرﺑﺮ ذﺧﯿﺮه ﻣﯽ ﺷﻮﻧﺪ و در ﻫﺮ ﺑﺎر
درﺧﻮاﺳﺖ ﺻﻔﺤﻪ ﺟﺪﯾﺪ از ﺳﺮور ﺑﺎ ﻫﻤﺎن ﮐﺎﻣﭙﯿﻮﺗﺮ ،اﯾﻦ ﻓﺎﯾﻞ ﻫﻢ ﺑﺮاي ﺳﺮور ﻓﺮﺳﺘﺎده ﻣﯽ ﺷﻮد .ﻣﯽ ﺗﻮاﻧﯿﻢ ازﮐﻮﮐﯽ ﻫﺎ ﺑﺮاي
ذﺧﯿﺮه ﯾﮑﺴﺮي اﻃﻼﻋﺎت ﺧﺎص ﮐﺎرﺑﺮان ﺻﻔﺤﺎت اﺳﺘﻔﺎده ﮐﻨﯿﻢ و در ﺻﻮرت ﻧﯿﺎز آن ﻫﺎ را در ﺻﻔﺤﺎت دﯾﮕﺮ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار
دﻫﯿﻢ .در اﯾﻦ ﻓﺼﻞ اﺑﺘﺪا ﭘﺲ از ﺑﺮرﺳﯽ روش اﯾﺠﺎد ﮐﻮﮐﯽ ﻫﺎ ﺑﺎ روش ﻫﺎي دﺳﺘﺮﺳﯽ و ﺑﺎزﯾﺎﺑﯽ ﻣﻘﺎدﯾﺮ ذﺧﯿﺮه ﺷﺪه در آن ﻫﺎ آﺷﻨﺎ
ﺧﻮاﻫﯿﻢ ﺷﺪ.
و ﺑﺮاي ﺑﺎزﯾﺎﺑﯽ ﺗﻤﺎﻣﯽ ﮐﻮﮐﯽ ﻫﺎي از ﻗﺒﻞ اﯾﺠﺎد ﺷﺪه ﺑﻪ ﺷﮑﻞ زﯾﺮ ﻋﻤﻞ ﺧﻮاﻫﯿﻢ ﮐﺮد:
;var x = document.cookie
ﻫﻤﺎﻧﻄﻮر ﮐﻪ در دﺳﺘﻮر اﺑﺘﺪاﯾﯽ ﻣﯽ ﺑﯿﻨﯿﺪ ﺑﺮاي اﯾﺠﺎد ﮐﻮﮐﯽ ﻣﯽ ﺑﺎﯾﺴﺖ رﺷﺘﻪ اي ﺣﺎوي ﯾﮑﺴﺮي ﺧﻮاص و ﻣﻘﺎدﯾﺮﺷﺎن را در ﻗﺎﻟﺐ
ﺟﻔﺖ ﻫﺎي ) name=valueﮐﻪ ﺑﺎ ; از ﻫﻢ ﺟﺪا ﺷﺪه اﻧﺪ( ﺑﻪ ﺧﺎﺻﯿﺖ .cookieﻧﺴﺒﺖ دﻫﯿﻢ .در ﺟﺪول زﯾﺮ ﻫﺮ ﯾﮏ از اﯾﻦ ﻗﺴﻤﺖ
ﻫﺎ را ﺷﺮح ﻣﯽ دﻫﯿﻢ.
ﻣﺜﺎل ﺗﻮﺿﯿﺤﺎت ﺧﺎﺻﯿﺖ
name=ali اﯾﻦ دﺳﺘﻮر ﻧﺎم و ﻣﻘﺪار ﮐﻮﮐﯽ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ. name=value
اﯾﻦ ﺧﺎﺻﯿﺖ اﺧﺘﯿﺎري زﻣﺎن اﻧﻘﻀﺎي ﮐﻮﮐﯽ را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ .ﻣﻘﺪاري ﮐﻪ
ﺑﻪ اﯾﻦ ﺧﺎﺻﯿﺖ داده ﻣﯽ ﺷﻮد ﻣﯽ ﺑﺎﯾﺴﺖ ﺗﺎرﯾﺨﯽ ﺑﻪ ﻓﺮﻣﺖ ﺑﺎزﮔﺸﺘﯽ از ﻣﺘﺪ
=expires )( toGMTStringﺷﯽ Dateﺑﺎﺷﺪ .در ﺻﻮرﺗﯽ ﮐﻪ اﯾﻦ ﺧﺎﺻﯿﺖ expires=date
13/06/2003 00:00:00
ﻣﺸﺨﺺ ﻧﺸﻮد ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﮐﺎرﺑﺮ ﭘﻨﺠﺮه ﻣﺮورﮔﺮ را ﺑﺒﻨﺪد ﮐﻮﮐﯽ ﻧﯿﺰ از ﺑﯿﻦ
ﺧﻮاﻫﺪ رﻓﺖ.
اﯾﻦ ﺧﺎﺻﯿﺖ اﺧﺘﯿﺎري ﻧﺎم ﻣﺴﯿﺮي از ﺳﺎﯾﺖ را ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﮐﻮﮐﯽ
path=/tutorials/ path=path
دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﺪ را ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ.
اﯾﻦ ﺧﺎﺻﯿﺖ اﺧﺘﯿﺎري ﻧﺎم ﺳﺎﯾﺘﯽ ﮐﻪ ﻣﯽ ﺗﻮاﻧﺪ از ﮐﻮﮐﯽ اﺳﺘﻔﺎده ﮐﻨﺪ را
domain = mysite.com domain=domain
ﻣﺸﺨﺺ ﻣﯽ ﮐﻨﺪ.
در ﻣﺜﺎل زﯾﺮ ﯾﮏ ﮐﻮﮐﯽ ﺑﺎ ﻧﺎم usernameو ﺑﺎ ﻣﻘﺪار aliﮐﻪ در ﺗﺎرﯾﺦ 15/02/2010از ﺑﯿﻦ ﻣﯽ رود اﯾﺠﺎد ﻣﯽ ﺷﻮد :
;" document.cookie = " username = ali ; expires = 15/02/2010 00:00:00
در ﻣﺜﺎل زﯾﺮ ﯾﮏ ﮐﻮﮐﯽ ﺑﺎ ﻧﺎم myCookieو ﺑﺎ ﻣﻘﺪار this is my cookieاﯾﺠﺎد ﺷﺪه اﺳﺖ:
;)”document.cookie = “myCookie=” + escape(“This is my Cookie
ﻧﮑﺘﻪ :در ﮐﺪ ﻓﻮق ﺗﺎﺑﻊ )( .escapeﯾﮏ رﺷﺘﻪ را درﯾﺎﻓﺖ ﮐﺮده و ﺗﻤﺎﻣﯽ ﮐﺎراﮐﺘﺮﻫﺎي ﻧﺎﻣﻌﺘﺒﺮ آن را ﺑﻪ
ﮐﺪ ﻣﻌﺎدﻟﺶ ﺗﺒﺪﯾﻞ ﻣﯽ ﮐﻨﺪ .ﻗﺒﻞ از ﮐﺪ ﻣﻌﺎدل ﯾﮏ ﻋﻼﻣﺖ %ﻗﺮار ﻣﯽ ﮔﯿﺮد .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﯾﻦ ﺗﺎﺑﻊ
ﮐﺎراﮐﺘﺮ spaceرا ﺑﻪ ﮐﺪ %20ﺗﺒﺪﯾﻞ ﻣﯽ ﮐﻨﺪ .اﯾﻦ ﺗﺎﺑﻊ ﻣﻌﺎدل ﺗﺎﺑﻊ )(.encodeURIComponent
اﺳﺖ.
ﺣﺎل ﮐﺎﻓﯽ اﺳﺖ ﺑﺮاي ﺣﺬف ﯾﮏ ﮐﻮﮐﯽ ﻧﺎم آن را ﺑﺮاي ﺗﺎﺑﻊ ﻓﻮق ﺑﻔﺮﺳﺘﯿﻢ .دﺳﺘﻮر زﯾﺮ ﮐﻮﮐﯽ ﺑﺎ ﻧﺎم usernameرا ﺣﺬف ﻣﯽ ﮐﻨﺪ:
; )"delete_cookie ("username
اﯾﻦ دﺳﺘﻮر ﻟﯿﺴﺘﯽ )رﺷﺘﻪ( از ﺟﻔﺖ ﻫﺎي name=valueﺗﻤﺎﻣﯽ ﮐﻮﮐﯽﻫﺎي ﻗﺎﺑﻞ دﺳﺘﺮس ﺑﺮاي ﺳﻨﺪ ﺟﺎري را ﮐﻪ ﺑﺎ ; از ﻫﻢ ﺟﺪا
ﺷﺪه اﻧﺪ ﺑﺮﻣﯽ ﮔﺮداﻧﺪ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻣﺘﻐﯿﺮ xﻣﯽ ﺗﻮاﻧﯿﺪ ﺣﺎوي رﺷﺘﻪ اي ﺑﻪ ﺻﻮرت زﯾﺮ ﺑﺎﺷﺪ:
""username=ali; password=abc123
در اﯾﻦ ﻣﺜﺎل دو ﮐﻮﮐﯽ از ﻗﺒﻞ اﯾﺠﺎد ﺷﺪه اﺳﺖ :ﯾﮑﯽ ﺑﺎ ﻧﺎم usernameو ﻣﻘﺪار aliو دوﻣﯽ ﺑﺎ ﻧﺎم passwordﺑﺎ ﻣﻘﺪار
.abc123
اﮐﻨﻮن xﯾﮏ ﻣﺘﻐﯿﺮ رﺷﺘﻪ اي ﺳﺎده اﺳﺖ ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺮاي دﺳﺘﺮﺳﯽ ﺑﻪ ﻫﺮ ﯾﮏ از ﮐﻮﮐﯽ ﻫﺎ و ﻣﻘﺪارﺷﺎن اﺑﺘﺪا xرا ﺑﻮﺳﯿﻠﻪ ﻣﺘﺪ
splitﺷﯽ stringﺑﻪ آراﯾﻪ اي ﺗﺒﺪﯾﻞ ﮐﺮده و ﺑﻮﺳﯿﻠﻪ ﻣﺘﺪﻫﺎي ﺧﺎص آراﯾﻪ ﺑﻪ آن ﻫﺎ دﺳﺘﺮﺳﯽ داﺷﺘﻪ ﺑﺎﺷﯿﻢ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي
ﭼﺎپ ﻣﻘﺪار ﮐﻮﮐﯽ ﻫﺎي ﻓﻮق ﻣﯽ ﺗﻮان ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﮐﺮد:
var allCookie = ;document.cookie
Var cookieParts = ;)";"(allCookie.split
Var fistCookie = ;]cookieParts[0
Var secondCookie = ;]cookieParts[1