‫ﺻﻒ ﻫﺎ‬

Array

17, Jun,2009

23rd Lecture

1
 ‫ﺻﻒ )‪ (Array‬ﭼﻴﺴﺖ؟‬

‫‪2‬‬
 • var weekdays = new Array(7)
weekdays[0] = "Shanbeh"
weekdays[1] = "Yekshanbeh"
weekdays[2] = "Doshanbeh"
weekdays[3] = "Seshanbeh"
weekdays[4] = "Chaharshanbeh"
weekdays[5] = "Panjshanbeh"
weekdays[6] = "Jomeh"

3
 • var weekdays = new Array ("Shanbeh","Yekshanbeh",...)

4
 • for ( i=0; i<7; i++ ) {
document.write ( weekdays[ i ] + "<br />" );
}

5
 ‫ﺧﺼﻮﺻﯿﺎﺕ ﺻﻒ‬

‫‪6‬‬
 (Array) ‫ﻣﺘﻮﺩﻫﺎﻱ ﺻﻒ‬

• concat()
• join()
• pop()
• shift()
• push()
• unshift()
• reverse()
• slice()
• sort()
• splice()

7
 :concat ‫ﻣﺘﻮﺩ‬

• var color1 = new Array(3) ‫ ﺑﺮﺍﻱ ﺗﺮﮐﻴﺐ ﻣﻘﺎﺩﻳﺮ ﺩﻭ‬concat ‫ﻣﺘﻮﺩ‬ •

• color1[0] = "Red"
• color1[1] = "Green"
‫ ﺍﻳﻦ‬.‫( ﺑﮑﺎﺭ ﻣﻲ ﺭﻭﺩ‬Array) ‫ﻳﺎ ﺳﻪ ﺻﻒ‬
• color1[2] = "Blue" ‫( ﻫﺎ‬Array) ‫ﻣﺘﻮﺩ ﻫﻴﭻ ﭼﻴﺰﻱ ﺭﺍ ﺩﺭ ﺻﻒ‬
var color2 = new Array(3)
•
• color2[0] = "White"
‫ﺗﻐﻴﻴﺮ ﻧﻤﻲ ﺩﻫﺪ ﻭ ﻓﻘﻂ ﻣﻘﺎﺩﻳﺮ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺭﺍ‬
• color2[1] = "Black" .‫ﺑﺮﻭﯼ ﺻﻔﺤﻪ ﭼﺎﭖ ﻣﻲ ﮐﻨﺪ‬
• color2[2] = "Gray"
• document.write(color1.concat(color2))

8
 • document.write(color1.concat(color2,color3))

9
 ‫ﻣﺘﻮﺩ )(‪:join‬‬

‫•‬ ‫)‪var color = new Array(3‬‬ ‫ﻣﺘﻮﺩ ‪ join‬ﺗﻘﺮﻳﺒﹰﺎ ﻣﺎﻧﻨﺪ ﻣﺘﻮﺩ ﻗﺒﻠﻲ ﻋﻤﻞ ﻣﻲ‬ ‫•‬
‫"‪color[0] = "Red‬‬
‫"‪color[1] = "Green‬‬ ‫ﮐﻨﺪ ﻭ ﺗﻤﺎﻡ ﻣﻘﺎﺩﻳﺮ ﺭﺍ ﺑﺼﻮﺭﺕ ﻳﮏ ﺭﺷﺘﻪ‬
‫"‪color[2] = "Blue‬‬
‫•‬ ‫)">‪document.write (color.join() + "<br /‬‬
‫ﻣﺘﻨﻲ )‪ (String‬ﺩﺭ ﺻﻔﺤﻪ ﻧﺸﺎﻥ ﻣﻲ ﺩﻫﺪ ﺑﺎ‬
‫))"‪document.write (color.join(".‬‬ ‫ﺍﻳﻦ ﺗﻔﺎﻭﺕ ﮐﻪ ﺩﺭ ﺍﻳﻦ ﻣﺘﻮﺩ ﻣﻲ ﺗﻮﺍﻧﻴﺪ ﻳﮏ‬
‫ﻋﻼﻣﺖ ﻣﺎﻧﻨﺪ ﻧﻘﻄﻪ‪ ،‬ﮐﺎﻣﻪ‪ ،‬ﺩﺵ )‪ (-‬ﻭﯾﺎ‪...‬‬
‫ﺗﻌﻴﻴﻦ ﮐﻨﻴﺪ ﺗﺎ ﺑﻴﻦ ﻣﻘﺎﺩﻳﺮ ﭼﺎﭖ ﺷﺪﻩ ﺩﺭ‬
‫ﺻﻔﺤﻪ ﻗﺮﺍﺭ ﮔﻴﺮﺩ‪ .‬ﺑﺼﻮﺭﺕ ‪Default‬‬
‫ﺍﻳﻦ ﻋﻼﻣﻪ‪ ،‬ﮐﺎﻣﻪ ﻣﻲ ﺑﺎﺷﺪ‪.‬‬

‫‪10‬‬
 ‫ﻣﺘﻮﺩ ‪:pop‬‬

‫•‬ ‫)‪var color = new Array(3‬‬ ‫ﻣﺘﻮﺩ ‪ pop‬ﺁﺧﺮﻳﻦ ﻣﻘﺪﺍﺭ ﺻﻒ )‪(Array‬‬ ‫•‬
‫"‪color[0] = "Red‬‬
‫"‪color[1] = "Green‬‬ ‫ﺭﺍ ﺟﺪﺍ ﮐﺮﺩﻩ ﻭ ﺩﺭ ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ ﻣﻲ ﺩﻫﺪ‪.‬‬
‫"‪color[2] = "Blue‬‬
‫•‬ ‫)">‪document.write (color.pop() + "<br /‬‬
‫ﺩﻗﺖ ﮐﻨﻴﺪ ﮐﻪ ﺍﻳﻦ ﻣﺘﻮﺩ ﺩﺭ ﺧﺼﻮﺻﻴﺖ‬
‫)">‪document.write (color.length + "<br /‬‬ ‫‪ length‬ﺗﺄﺛﻴﺮ ﻣﻲ ﮔﺬﺍﺭﺩ ﻳﻌﻨﻲ ﺍﮔﺮ ﺑﻌﺪ ﺍﺯ‬
‫)‪document.write (color‬‬
‫ﺍﻳﻦ ﻣﺘﻮﺩ ﺧﺼﻮﺻﻴﺖ ‪ length‬ﺭﺍ ﺑﮑﺎﺭ‬
‫ﺑﺮﻳﺪ‪ ،‬ﻳﮏ ﺍﻧﺪﯾﮑﺲ ﮐﻤﺘﺮ ﻧﺸﺎﻥ ﻣﻲ ﺩﻫﺪ‪.‬‬

‫‪11‬‬
 :shift ‫ﻣﺘﻮﺩ‬

• var color = new Array(3) ‫ ﺑﺮﻋﮑﺲ ﻣﺘﻮﺩ ﻗﺒﻠﻲ ﺍﺳﺖ ﻳﻌﻨﻲ‬shift ‫ﻣﺘﻮﺩ‬ •
color[0] = "Red"
color[1] = "Green" ‫( ﺭﺍ‬Array) ‫ﺍﻳﻦ ﻣﺘﻮﺩ ﺍﻭﻟﻴﻦ ﻣﻘﺪﺍﺭ ﺻﻒ‬
color[2] = "Blue"
• document.write (color.shift() + "<br />")
.‫ﺟﺪﺍ ﻣﻲ ﮐﻨﺪ ﻭ ﻧﺸﺎﻥ ﻣﻲ ﺩﻫﺪ‬
document.write (color.length + "<br />")
document.write (color)

12
 :push ‫ﻣﺘﻮﺩ‬

• var color = new Array(3) ‫ ﻳﮏ ﻳﺎ ﭼﻨﺪ ﻣﻘﺪﺍﺭ ﺭﺍ ﺑﻪ ﺁﺧﺮ ﻳﮏ‬push ‫ﻣﺘﻮﺩ‬ •

color[0] = "Red"
color[1] = "Green" ‫( ﺍﺿﺎﻓﻪ ﻣﻲ ﮐﻨﺪ ﻭ ﺍﻧﺪﯾﮑﺲ‬Array) ‫ﺻﻒ‬
color[2] = "Blue“ .‫ﺟﺪﻳﺪ ﺑﺮﻣﻲ ﮔﺮﺩﺍﻧﺪ‬
document.write (color + "<br />")
document.write
(color.push("white","black") + "<br />")
document.write (color.length + "<br />")
document.write (color)

13
 :unshift ‫ﻣﺘﻮﺩ‬

• var color = new Array(3) ‫ ﻳﮏ ﻳﺎ ﭼﻨﺪ ﻣﻘﺪﺍﺭ ﺑﻪ‬unshift ‫ﻣﺘﻮﺩ‬ •

color[0] = "Red"
color[1] = "Green" ‫( ﺍﺿﺎﻓﻪ ﻣﻲ ﮐﻨﺪ‬Array) ‫ﺍﺑﺘﺪﺍﻱ ﻳﮏ ﺻﻒ‬
color[2] = "Blue"
• document.write (color + "<br />")
.‫ﻭ ﺍﻧﺪﯾﮑﺲ ﺟﺪﻳﺪ ﺑﺮ ﻣﻲ ﮔﺮﺩﺍﻧﺪ‬
document.write (color.unshift ("white","black") +
"<br />")
document.write (color)

14
 :reverse ‫ﻣﺘﻮﺩ‬

• var color = new Array(3) ‫ ﺗﺮﺗﻴﺐ ﻧﻤﺎﻳﺶ ﻣﻘﺎﺩﻳﺮ ﻳﮏ‬reverse ‫ﻣﺘﻮﺩ‬ •

color[0] = "Red"
color[1] = "Green" ‫( ﺭﺍ ﺑﺮﻋﮑﺲ ﮐﺮﺩﻩ ﻭ ﺩﺭ‬Array) ‫ﺻﻒ‬
color[2] = "Blue"
• document.write (color + "<br />")
.‫ﺻﻔﺤﻪ ﻭﺏ ﻧﻤﺎﻳﺶ ﻣﻲ ﺩﻫﺪ‬
document.write (color.reverse ( ) )

15
 :slice ‫ﻣﺘﻮﺩ‬

• var color = new Array(6) ‫ ﻳﮏ ﺳﻠﺴﻠﻪ ﺍﺯ ﻣﻘﺎﺩﻳﺮ ﻣﻮﺟﻮﺩ‬slice ‫ﻣﺘﻮﺩ‬ •

color[0] = "Red"
color[1] = "Green"
‫( ﺭﺍ ﺟﺪﺍ ﻣﻲ ﮐﻨﺪ‬Array) ‫ﺩﺭ ﻳﮏ ﺻﻒ‬
color[2] = "Blue"
color[3] = "White"
color[4] = "Black"
color[5] = "Gray"
• document.write (color + "<br />")
document.write (color.slice ( 2,5 ) )

16
 :sort ‫ﻣﺘﻮﺩ‬

• var color = new Array(6)

color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"
color[3] = "White"
color[4] = "Black"
color[5] = "Gray"
• document.write (color + "<br />")
document.write (color.sort ( ) )

17
 :splice ‫ﻣﺘﻮﺩ‬

• var color = new Array(5) ‫ ﺑﺮﺍﻱ ﺍﺿﺎﻓﻪ ﻳﺎ ﺣﺬﻑ ﻳﮏ ﻣﻘﺪﺍﺭ ﺩﺭ‬splice ‫ﻣﺘﻮﺩ‬ •
color[0] = "Red" ‫( ﻣﻲ ﺑﺎﺷﺪ ﮐﻪ ﺍﻳﻦ ﻣﺘﻮﺩ ﺩﺍﺭﺍﻱ‬Array) ‫ﺻﻒ‬
color[1] = "Green" ‫ﭘﺎﺭﺍﻣﺘﺮﻫﺎﻳﻲ ﻣﻲ ﺑﺎﺷﺪ ﮐﻪ ﺍﻳﻦ ﭘﺎﺭﺍﻣﺘﺮﻫﺎ ﺭﺍ ﺑﺎﻳﺪ ﺩﺭ ﻗﻮﺱ‬
color[2] = "Blue"
.‫ﻣﺸﺨﺺ ﮐﻨﻴﺪ‬
color[3] = "White"
color[4] = "Black"
• document.write (color + "<br />")
color.splice (2,0,"Pink" )
document.write (color)

18
 • words = new
Array("limit","lines","finish","complete","In","Out");
• document.write(words+"<br>");
• words1 = words.splice(3, 2, "done", "On");
• document.write(words1+"<br>");
• document.write(words+"<br>");

19
 ‫ﭘﻨﺠﺮﻩ ﻫﺎﯼ ﺍﺭﺗﺒﺎﻁ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﻨﺪﻩ‬

‫‪Pop Up Boxes‬‬

‫‪20‬‬
 alert ‫– ﭘﻨﺠﺮﻩ‬
confirm ‫– ﭘﻨﺠﺮﻩ‬
prompt ‫– ﭘﻨﺠﺮﻩ‬

21
 Alert ‫ﭘﻨﺠﺮﻩ‬

• alert (" text ")

22
 Confirm ‫ﭘﻨﺠﺮﻩ‬

• var button = confirm (" press a button.")

if (button == true)
{
document.write (" You pressed OK button. ")
}
else
{
document.write (" You pressed Cancel
button.")
}

23
 prompt ‫ﭘﻨﺠﺮﻩ‬

• prompt ( "text or question", " default value " )

• var name=prompt("Please enter your name", "name...")

if (name!=null && name!="")
{
document.write("Hello " + name + " and welcome to this page.")
}

24
 ‫•‬ ‫‪if (confirm("Select OK to continue, Cancel‬‬ ‫ﻣﺴُﻠﻪ ﺩﻭﻡ ﺍﯾﻨﮑﻪ ﻣﯿﺘﻮﺍﻥ ﺍﺯﯾﻦ ﺑﺎﮐﺲ ﻫﺎ ﺩﺭ‬ ‫•‬
‫{))"‪to abort‬‬
‫)"‪document.write("Continuing‬‬ ‫ﺩﺳﺘﻮﺭﺍﺕ ﺷﺮﻃﯽ )‪ (If,Switch‬ﺑﺪﻭﻥ‬
‫}‬
‫ﺍﯾﻨﮑﻪ ﺍﯾﻦ ﺑﺎﮐﺲ ﺭﺍ ﺩﺭ ﯾﮏ ﻣﺘﺤﻮﻝ ﺫﺧﯿﺮﻩ‬
‫–‬

‫•‬ ‫‪else{ document.write("Operation‬‬ ‫ﮐﺮﺩ‪ ،‬ﺑﻪ ﺷﮑﻞ ﻣﺴﺘﻘﯿﻢ ﻣﯿﺘﻮﺍﻥ ﺍﺯ ﺁﻥ ﺍﺳﺘﻔﺎﺩﻩ‬

‫)"‪Canceled‬‬
‫–‬ ‫}‬
‫ﮐﺮﺩ‪.‬‬

‫‪25‬‬
 ‫ﺗــﻮﺍﺑــــﻊ‬

‫‪Functions‬‬

‫‪26‬‬
 • function functionname ( arguments)
{
Coding goes here
}

27
 :(Function Arguments) ‫ﭘﺎﺭﺍﻣﺘﺮ ﻳﮏ ﺗﺎﺑﻊ‬

• function message ( msg ) ‫ﻣﺘﺤﻮﻟﻲ ﺍﺳﺖ ﮐﻪ ﻫﻨﮕﺎﻡ ﺻﺪﺍ ﺯﺩﻥ ﺗﺎﺑﻊ‬ •

{
alert ( msg ) ‫ﻣﻘﺪﺍﺭ ﺁﻥ ﺍﺭﺳﺎﻝ ﻣﻲ ﺷﻮﺩ ﺗﺎ ﺗﺎﺑﻊ ﺍﺯ ﺁﻥ‬
}
</script>
.‫ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﺪ‬

<input type="button" onclick="message(

'Hello friends!' )" value="Click me">

28
 • <SCRIPT LANGUAGE="JavaScript">
• function listItems(itemList) {
• document.write("<UL>\n")
• for (i = 0;i < itemList.length;i++) {
– document.write("<LI>" + itemList[i] + "\n")
• }
– document.write("</UL>\n") }
• </SCRIPT> </HEAD>
• <BODY>
• <SCRIPT LANGUAGE="JavaScript">
– days = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")

• listItems(days)
• </SCRIPT>

29
 ‫ﺑﺎﺯﮔﺮﺩﺍﻧﺪﻥ ﯾﮏ ﻣﻘﺪﺍﺭ ﺗﻮﺳﻂ ﺩﺳﺘﻮﺭ ‪return‬‬

‫• ﺗﻮﺍﺑﻊ ﺟﺎﻭﺍﺍﺳﮑﺮﻳﭙﺖ ﺩﺍﺭﺍﻱ ﻳﮏ ﺩﺳﺘﻮﺭﻱ ﺑﻨﺎﻡ ‪ return‬ﻫﺴﺘﻨﺪ ﮐﻪ ﻭﻇﻴﻔﻪ ﺍﻳﻦ‬

‫ﺩﺳﺘﻮﺭ ﺑﺮﮔﺮﺩﺍﻧﺪﻥ ﻣﻘﺎﺩﻳﺮ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺩﺭ ﺁﻥ ﺗﺎﺑﻊ ﺍﺳﺖ‪.‬‬

‫‪30‬‬
 ‫ﺭﻭﻳــﺪﺍﺩﻫﺎ ﻭ ﺣــﻮﺍﺩﺙ‬

‫‪Events‬‬

‫‪31‬‬
 ‫• ﺭﻭﻳﺪﺍﺩﻫﺎ ﻭ ﻳﺎ ﺣﻮﺍﺩﺙ ﺩﺭ ﺟﺎﻭﺍﺍﺳﮑﺮﻳﭙﺖ‪ ،‬ﮐﻮﺩﻫﺎﻱ ﮐﻮﺗﺎﻫﻲ ﻫﺴﺘﻨﺪ ﮐﻪ ﺑﻴﻦ‬
‫ﺍﻗﺪﺍﻣﺎﺕ ﺍﻧﺠﺎﻡ ﺷﺪﻩ ﺗﻮﺳﻂ ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﻨﺪﻩ )‪ (User‬ﻣﺎﻧﻨﺪ ﮐﻠﻴﮏ ﮐﺮﺩﻥ ﻣﻮﺱ ﻭ‬
‫ﺍﺳﮑﺮﻳﭙﺖ‪ ،‬ﺍﺭﺗﺒﺎﻁ ﺑﺮﻗﺮﺍﺭ ﻣﻲ ﮐﻨﻨﺪ‪.‬‬

‫‪32‬‬
 :(Mouse Events) ‫ﺭﻭﻳﺪﺍﺩﻫﺎﻱ ﻣﻮﺱ‬

– onClick
– onDblClick
– onMouseDown
– onMouseUp
– onMouseOver
– onMouseOut

33
 ‫ﺭﻭﻳﺪﺍﺩﻫﺎﻱ ﮐﻴﺒﻮﺭﺩ )‪:(Keyboard Events‬‬

‫‪34‬‬
 onKeyPress •
onKeyDown •
onKeyUp •

35
 :(Form Events) ‫ﺭﻭﻳﺪﺍﺩﻫﺎﻱ ﻓﻮﺭﻡ‬

onFocus •

• <input type="text" name="field" size="30" value="Please

enter your name..."onFocus="field.value=' ' ">

36
 onBlur •

• <input type="text" name="field1" size="20" value=“"

onBlur="alert('Please fill out the textbox 1.')" />

37
 onSelect •

• <input type="text" name="field1" size="20" value="Highlight this text..."

onSelect="alert('You selected the text.') " />

38
 onChange •

• <input type="text" name="field1" size="20" value="Type

something..." onChange="alert('You changed the text.') " />

39
 onSubmit •

• <body dir=rtl>
• <form action="http://www.google.com/search"
onsubmit="return true;">
• <input type="text" name="q"size="40">
• <input type="Submit"value="Search in Google!">
• </form>
• </body>

40
 onReset •

• <FORM
• onReset="return confirm('Do you really want to reset
the form?')"
• >
• <INPUT TYPE=TEXT NAME="query">
• <INPUT TYPE=SUBMIT>
• <INPUT TYPE=RESET>
• </FORM>

41
 ‫ﺳﻮאﻝ‬

‫‪42‬‬