‫ﺑﺮﻧﺎﻣﻪﺳﺎزی وب‬
‫ﻧﯿﻢﺳﺎل اول ‪٩٣-٩٢‬‬
‫ﻣﺪرس‪ :‬ﺣﻤﯿﺪ ﺿﺮاﺑ زاده‬
‫داﻧﺸ ﺪهی ﻣﻬﻨﺪﺳ ﮐﺎﻣﭙﯿﻮﺗﺮ‬
‫ﺗﻤﺮﯾﻦ ﺳﺮی دوم‬
‫ﻣﻬﻠﺖ ارﺳﺎل‪ ۵ :‬آﺑﺎنﻣﺎه‬
‫ﺳﺆال ‪ .١‬ﭘﺨﺶﮐﻨﻨﺪهی ﻣﻮﺳﯿﻘ‬
‫ﺑﺎ اﺳﺘﻔﺎده از ﻋﻨﺼﺮ ‪ Audio‬در ‪ HTML5‬و ‪ FileReader API‬ﯾ‬
‫ﮐﻨﯿﺪ‪:‬‬
‫‪ .١‬ﺑﺎ ﮐﻤ‬
‫ﭘﺨﺶﮐﻨﻨﺪهی ﻣﻮﺳﯿﻘ ﺑﺎ اﻣ ﺎﻧﺎت زﯾﺮ ﻃﺮاﺣ‬
‫ﻋﻨﺼﺮ >‪ <input‬ﺗﻌﺪادی ﻓﺎﯾﻞ ﻣﻮﺳﯿﻘ را از ورودی درﯾﺎﻓﺖ ﮐﻨﯿﺪ‪.‬‬
‫‪ .٢‬ﺑﺎ ﮐﻤ ‪ FileReader API‬ﻓﺎﯾﻞﻫﺎی اﻧﺘﺨﺎبﺷﺪه را ﺧﻮاﻧﺪه‪ ،‬ﻫﻤﺎﻧﻨﺪ ﺷ ﻞ زﯾﺮ ﻓﻬﺮﺳﺘ از اﺳﺎﻣ ﻓﺎﯾﻞﻫﺎ ﺑﻪ‬
‫ﻫﻤﺮاه ﮔﺰﯾﻨﻪای ﺑﺮای ﺣﺬف ﻫﺮ ﻣﻮرد اﯾﺠﺎد ﮐﻨﯿﺪ‪.‬‬
‫‪ .٣‬ﭘﺲ از ﻧﻤﺎﯾﺶ ﻓﻬﺮﺳﺖ‪ ،‬ﻓﺎﯾﻞ اول ﺑﺎﯾﺪ ﺑﻪ ﺻﻮرت ﺧﻮدﮐﺎر ﭘﺨﺶ ﺷﻮد‪.‬‬
‫‪ .۴‬در ﺻﻮرت ﮐﻠﯿ‬
‫روی ﻧﺎم ﻫﺮ ﻣﻮﺳﯿﻘ ‪ ،‬ﻣﻮﺳﯿﻘ اﻧﺘﺨﺎبﺷﺪه ﺑﺎﯾﺪ ﺷﺮوع ﺑﻪ ﭘﺨﺶ ﻧﻤﺎﯾﺪ‪.‬‬
‫ﮐﻨﺘﺮل ﭘﺨﺶ ﻣﻮﺳﯿﻘ را ﺑﺮ ﻋﻬﺪهی ﺧﻮد ﻣﺮورﮔﺮ ﺑ ﺬارﯾﺪ‪ ،‬ﻧﯿﺎزی ﺑﻪ ﻃﺮاﺣ دﮐﻤﻪﻫﺎی ﭘﺨﺶ ﻧﯿﺴﺖ‪ .‬ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ‬
‫ﻣﺮورﮔﺮﻫﺎی ﻣﺨﺘﻠﻒ )در ﺳﯿﺴﺘﻢﻫﺎی ﻋﺎﻣﻞ ﻣﺨﺘﻠﻒ( ﻫﺮ ﯾ ﻣ ﺗﻮاﻧﻨﺪ ﻗﺎﻟﺐﻫﺎی ﺧﺎﺻ را ﭘﺨﺶ ﮐﻨﻨﺪ و ﺷﻤﺎ ﺻﺮﻓﺎً‬
‫ﺑﺎﯾﺪ اﻣ ﺎن ﭘﺨﺶ ﭼﻨﯿﻦ ﻗﺎﻟﺐﻫﺎﯾ را ﻓﺮاﻫﻢ ﮐﻨﯿﺪ‪.‬‬
‫‪١‬‬
‫ﺳﺆال ‪ .٢‬ﻓﻬﺮﺳﺖ ﮐﺎرﻫﺎی روزاﻧﻪ‬
‫ﯾ‬
‫ﺻﻔﺤﻪ ﺑﺮای ﻧ ﻪداری ﻟﯿﺴﺘ از ﮐﺎرﻫﺎی روزاﻧﻪ ﻃﺮاﺣ ﮐﻨﯿﺪ‪ .‬اﯾﻦ ﺻﻔﺤﻪ ﺑﺎﯾﺪ دارای اﻣ ﺎﻧﺎت زﯾﺮ ﺑﺎﺷﺪ‪:‬‬
‫‪ .١‬ﺑﺎ ﮐﻤ ﻋﻨﺼﺮ >‪ <input‬اﻣ ﺎن وارد ﮐﺮدن ﯾ ﻣﺘﻦ را ﺑﻪ ﻋﻨﻮان ﮐﺎر روزاﻧﻪ اﯾﺠﺎد ﮐﻨﯿﺪ‪ .‬اﯾﻦ ﻋﻨﺼﺮ ﺑﺎﯾﺪ ﺑﻌﺪ‬
‫از ﺑﺎرﮔﺬاری ﺻﻔﺤﻪ دارای ‪ focus‬ﺑﺎﺷﺪ و ﺑﺘﻮان ﺷﺮوع ﺑﻪ ﻧﻮﺷﺘﻦ ﮐﺮد‪.‬‬
‫‪ .٢‬ﯾ دﮐﻤﻪ ﺑﺮای اﺿﺎﻓﻪ ﮐﺮدن ﻣﺘﻦ ﻧﻮﺷﺘﻪﺷﺪه ﺑﻪ ﻟﯿﺴﺖ ﮐﺎرﻫﺎی روزاﻧﻪ ﺑﺎﯾﺪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪ .‬ﻫﻤﭽﻨﯿﻦ ﮐﺎرﺑﺮ‬
‫ﺑﺎ ﻓﺸﺎر دادن دﮐﻤﻪی ‪ Enter‬ﺑﺎﯾﺪ ﺑﺘﻮاﻧﺪ ﻣﺘﻦ ﻧﻮﺷﺘﻪﺷﺪه را اﺿﺎﻓﻪ ﮐﻨﺪ‪.‬‬
‫‪ .٣‬ﻫﺮ ﻣﻮرد از ﮐﺎرﻫﺎی روزاﻧﻪ ﺑﺎﯾﺪ ﺑﻪ ﺷ ﻞ ﯾ‬
‫‪ .۴‬در ﺻﻮرﺗ ﮐﻪ ﮐﺎرﺑﺮ ﯾ‬
‫از ﻟﯿﺴﺖ ﺣﺬف ﺷﻮد‪.‬‬
‫‪ checkbox‬ﺑﻪ ﻟﯿﺴﺖ اﺿﺎﻓﻪ ﺷﻮد‪.‬‬
‫از ﻣﻮارد ﻟﯿﺴﺖ را ﺗﯿ‬
‫زد‪ ،‬اﮔﺮ ﺑﻪ ﻣﺪت ‪ ۵‬ﺛﺎﻧﯿﻪ ﺗﯿ‬
‫را ﺑﺮﻧﺪاﺷﺖ‪ ،‬ﺑﺎﯾﺪ اﯾﻦ ﻣﻮرد‬
‫‪ .۵‬ﺑﺎ اﻣ ﺎن ‪ localStorage‬اﻃﻼﻋﺎت اﯾﻦ ﻟﯿﺴﺖ را در ﺣﺎﻓﻈﻪی ﺳﻤﺖ ﮐﺎرﺑﺮ ﻧ ﻪداری ﮐﻨﯿﺪ‪ .‬ﺗﻤﺎم ﻗﺎﺑﻠﯿﺖﻫﺎ‬
‫ﻣﺎﻧﻨﺪ ﺣﺬف ﻣﻮارد ﺑﻪ ﺷ ﻞ ﮔﻔﺘﻪﺷﺪه‪ ،‬ﺑﻌﺪ از ﺑﺎرﮔﺬاری ﻣﺠﺪد ﺻﻔﺤﻪ ﺑﺎﯾﺪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬
‫ﺑﺮای ﺟﻠﻮﮔﯿﺮی از اﯾﺠﺎد ﺧﻄﺎ در اﺟﺮای اﺳ ﺮﯾﭙﺖ ﺻﻔﺤﻪ‪ ،‬ﺑﺎﯾﺪ ﻧﺒﻮدن ﻗﺎﺑﻠﯿﺖ ‪ localStorage‬را در ﻧﻈﺮ ﺑ ﯿﺮﯾﺪ و‬
‫ﺗﻨﻬﺎ در ﺻﻮرت وﺟﻮد اﯾﻦ ﻗﺎﺑﻠﯿﺖ ﺑﺮای ذﺧﯿﺮه ﮐﺮدن اﻃﻼﻋﺎت ﺗﻼش ﮐﻨﯿﺪ‪.‬‬
‫‪٢‬‬
‫ﺳﺆال ‪ .٣‬در ﺟﺴﺖوﺟﻮی ﮔﻨﺞ‬
‫ﮔﺮﻓﺘﻦ از ‪ Canvas‬در ‪ HTML5‬ﯾ‬
‫ﺑﺎ ﮐﻤ‬
‫‪ .١‬ﯾ‬
‫ﺑﺎزی را ﺑﻪ ﺷ ﻞ زﯾﺮ ﻃﺮاﺣ ﮐﻨﯿﺪ‪:‬‬
‫‪ Canvas‬ﺑﻪ اﺑﻌﺎد ‪ ۶٠٠‬ﭘﯿ ﺴﻞ در ‪ ٣٠٠‬ﭘﯿ ﺴﻞ در ﺻﻔﺤﻪ ﻗﺮار دﻫﯿﺪ‪.‬‬
‫‪ .٢‬ﺑﻪ ﻃﻮر ﺗﺼﺎدﻓ ﯾ ﻧﻘﻄﻪ از ﺻﻔﺤﻪ را اﻧﺘﺨﺎب ﮐﻨﯿﺪ و ﯾ‬
‫داﯾﺮه ﻧﻤﺎﯾﺎﻧ ﺮ ﻣ ﺎن ﺑﺎزﯾ ﻦ اﺳﺖ‪.‬‬
‫داﯾﺮه ﺑﻪ ﺷﻌﺎع ‪ ١٠‬ﭘﯿ ﺴﻞ در آنﺟﺎ ﺑ ﺸﯿﺪ‪ .‬اﯾﻦ‬
‫‪ .٣‬ﺑﻪ ﻃﻮر ﺗﺼﺎدﻓ ﻧﻘﻄﻪی دﯾ ﺮی را ﺑﻪ ﻋﻨﻮان ﻣ ﺎن ﮔﻨﺞ اﻧﺘﺨﺎب ﮐﻨﯿﺪ‪ .‬در ﺻﻮرﺗ ﮐﻪ ﻣ ﺎن ﺑﺎزﯾ ﻦ در ﻧﯿﻤﻪی‬
‫ﺳﻤﺖ راﺳﺖ ﺻﻔﺤﻪ اﺳﺖ‪ ،‬اﯾﻦ ﻧﻘﻄﻪی ﺗﺼﺎدﻓ را در ﻧﯿﻤﻪی ﭼﭗ ﭘﯿﺪا ﮐﻨﯿﺪ‪ ،‬در ﻏﯿﺮ اﯾﻨﺼﻮرت در ﻧﯿﻤﻪی‬
‫راﺳﺖ‪.‬‬
‫‪ .۴‬ﺑﺎ ﻓﺸﺎر دادن دﮐﻤﻪﻫﺎی ﺟﻬﺖدار ﺑﺎﯾﺪ ﻣ ﺎن ﺑﺎزﯾ ﻦ ﺗﻐﯿﯿﺮ ﮐﻨﺪ‪ .‬ﺑﺎ ﻫﺮ ﻓﺸﺎر ﺑﺎﯾﺪ ‪ ۵‬ﭘﯿ ﺴﻞ ﻣ ﺎن ﺑﺎزﯾ ﻦ در آن‬
‫ﺟﻬﺖ ﺟﺎﺑﻪﺟﺎ ﺷﻮد‪.‬‬
‫‪ .۵‬ﯾ ﻓﺎﯾﻞ ﺻﻮﺗ را ﺑﺎ ﺑﺎرﮔﺬاری ﺻﻔﺤﻪ ﭘﺨﺶ ﮐﻨﯿﺪ‪ .‬ﺑﻠﻨﺪی ﺻﺪای اﯾﻦ ﻓﺎﯾﻞ ﺻﻮﺗ در اﺑﺘﺪا ﺑﺎﯾﺪ ﺑﺮاﺑﺮ ﺻﻔﺮ‬
‫ﺑﺎﺷﺪ ﮐﻪ ﻫﯿﭻ ﺻﺪاﯾ ﺷﻨﯿﺪه ﻧﺸﻮد‪ ،‬ﺑﺎ ﻧﺰدﯾ ﺷﺪن ﺑﺎزﯾ ﻦ ﺑﻪ ﮔﻨﺞ ﺑﻠﻨﺪی ﺻﺪا ﺑﺎﯾﺪ اﻓﺰاﯾﺶ ﭘﯿﺪا ﮐﻨﺪ‪.‬‬
‫‪ .۶‬ﺗﺎﺑﻊ اﻓﺰاﯾﺶ ﺻﺪا ﺑﺎ ﻧﺰدﯾ‬
‫ﻣﻮارد زﯾﺮ اﺳﺖ‪:‬‬
‫ﺷﺪن ﺑﻪ ﮔﻨﺞ را ﺑﻪ اﻧﺘﺨﺎب ﺧﻮدﺗﺎن ﻃﺮاﺣ ﮐﻨﯿﺪ‪ .‬ﺗﻨﻬﺎ ﺷﺮاﯾﻂ اﻟﺰاﻣ اﯾﻦ ﺗﺎﺑﻊ‬
‫)آ( ﻣﻘﺪار ﺻﻔﺮ ﺑﺮای ﻓﺎﺻﻠﻪی آﻏﺎزﯾﻦ و ﻫﻤﭽﻨﯿﻦ ﻓﺎﺻﻠﻪﻫﺎی ﺑﯿﺶﺗﺮ از اﯾﻦ ﻓﺎﺻﻠﻪ‬
‫)ب( ﻣﻘﺪار ﯾ ﺑﺮای ﻓﺎﺻﻠﻪی ﺻﻔﺮ‬
‫)ج( ﺻﻌﻮدی ﺑﻮدن ﺗﺎﺑﻊ‬
‫‪ .٧‬ﺑﺎ ﭘﺎﯾﺎن ﯾﺎﻓﺘﻦ ﻓﺎﯾﻞ ﺻﻮﺗ ‪ ،‬ﺑﺎﯾﺪ ﺑﻪ ﻃﻮر ﺧﻮدﮐﺎر ﭘﺨﺶ آن از اﺑﺘﺪا ﺷﺮوع ﺷﻮد‪.‬‬
‫‪ .٨‬در ﺻﻮرﺗ ﮐﻪ ﻓﺎﺻﻠﻪی ﺑﺎزﯾ ﻦ از ﻣ ﺎن ﮔﻨﺞ ﮐﻤﺘﺮ از ‪ ١٠‬ﭘﯿ ﺴﻞ ﺷﻮد‪ ،‬ﺑﺎزی ﺗﻤﺎم ﻣ ﺷﻮد‪ .‬ﺑﺎ ﻧﻤﺎﯾﺶ ﯾ‬
‫ﭘﯿﺎم ﺑﺎﯾﺪ اﺗﻤﺎم ﺑﺎزی ﺑﻪ ﮐﺎرﺑﺮ اﻋﻼم ﺷﻮد‪.‬‬
‫ﺗﻤﺎﻣ ﻣﺘﻐﯿﺮﻫﺎ و ﺗﻮاﺑﻊ ﺧﻮد را درون ﯾ ﻓﻀﺎی ﻧﺎم )‪ (namespace‬واﺣﺪ ﻗﺮار دﻫﯿﺪ‪ ،‬ﻃﻮری ﮐﻪ ﺗﻨﻬﺎ ﻋﻨﺼﺮ اﺿﺎﻓﻪ‬
‫ﺷﺪه ﺑﻪ ﺣﻮزهی ‪ global‬ﺻﻔﺤﻪ ﻫﻤﯿﻦ ﯾ ﻓﻀﺎی ﻧﺎم ﺑﺎﺷﺪ‪.‬‬
‫‪٣‬‬
‫ﻧ ﺎت ﻧﻬﺎﯾ‬
‫• اﯾﻦ ﺗﻤﺮﯾﻦ را ﺑﺎﯾﺪ ﺑﺎ ﮐﻤ‬
‫ﻧﯿﺴﺖ‪.‬‬
‫ﺟﺎوا اﺳ ﺮﯾﭙﺖ ﺧﺎﻟﺺ اﻧﺠﺎم دﻫﯿﺪ و اﺳﺘﻔﺎده از ﻫﯿﭻ ﮐﺘﺎبﺧﺎﻧﻪی ﮐﻤ‬
‫ﻣﺠﺎز‬
‫• ﺻﻔﺤﻪای ﮐﻪ ﻃﺮاﺣ ﻣ ﮐﻨﯿﺪ ﺑﺎﯾﺪ ﺑﻪ درﺳﺘ در ﻣﺮورﮔﺮ ﮐﺮوم ﻗﺎﺑﻞ ﻧﻤﺎﯾﺶ ﺑﺎﺷﺪ‪ .‬ﭘﺸﺘﯿﺒﺎﻧ از ﻣﺮورﮔﺮﻫﺎی‬
‫دﯾ ﺮ اﺧﺘﯿﺎری اﺳﺖ‪.‬‬
‫• از ﺑﺎﻻ آوردن ﺳﺎﯾﺖ ﺧﻮد ﺑﺮ روی ﻫﺮ ﮔﻮﻧﻪ آدرس ﻋﻤﻮﻣ ﺗﺎ ﻗﺒﻞ از ﻣﻮﻋﺪ ﺗﺤﻮﯾﻞ ﺗﻤﺮﯾﻦ ﺧﻮدداری ﮐﻨﯿﺪ‪.‬‬
‫• ﺳﻮاﻻت ﺧﻮد را در ﺳﺎﯾﺖ ﭘﯿﺎﺗﺰا ﻣﻄﺮح ﮐﻨﯿﺪ‪.‬‬
‫‪۴‬‬