Download
1 / 21
210 likes | 432 Vues
آموزش طراحی وب سایت جلسه دوازدهم – جاوا اسکریپت 3. تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: 09125773990 09371410986 پست الکترونیک : TargetLearning@gmail.com. Web Design Training Java Scripts #3. Part 12 Author :Babak Tavatav. Array Object.
E N D
آموزش طراحی وب سایتجلسه دوازدهم – جاوا اسکریپت 3 تدریس طراحی وببرای اطلاعات بیشتر تماس بگیرید تاوشماره تماس: 0912577399009371410986پست الکترونیک : TargetLearning@gmail.com
Web Design TrainingJava Scripts#3 Part 12 Author :Babak Tavatav
he following code creates an Array object called myCars: 1: varmyCars=new Array(); // regular array (add an optional integer myCars[0]="Saab"; // argument to control array's size) myCars[1]="Volvo"; myCars[2]="BMW"; 2: varmyCars=new Array("Saab","Volvo","BMW"); // condensed array 3: varmyCars=["Saab","Volvo","BMW"]; // literal array
Access an Array • You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. • The following code line: • document.write(myCars[0]);will result in the following output: Saab
join <html> <body> <script type="text/javascript"> var parents = ["Jani", "Tove"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(children); document.write(family); </script> </body> </html>
<html> <body> <script type="text/javascript"> var parents = ["Jani", "Tove"]; var brothers = ["Stale", "Kai Jim", "Borge"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(brothers, children); document.write(family); </script> </body> </html>
JavaScript Math Object round() How to use round(). random() How to use random() to return a random number between 0 and 1. max() How to use max() to return the number with the highest value of two specified numbers. min() How to use min() to return the number with the lowest value of two specified numbers
JavaScript Image Maps An image-map is an image with clickable regions.
<html> <head> <script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt; } </script> </head>
<body> <imgsrc ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape ="rect" coords ="0,0,82,126" onMouseOver="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" onMouseOver="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')" href ="mercur.htm" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" onMouseOver="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')" href ="venus.htm" target ="_blank" alt="Venus" /> </map> <p id="desc"></p> </body> </html>
JavaScript Timing Events With JavaScript, it is possible to execute some code after a specified time-interval. This is called timing events. It's very easy to time events in JavaScript. The two key methods that are used are: setTimeout() - executes a code some time in the future clearTimeout() - cancels the setTimeout()
setTimeout var t=setTimeout("javascriptstatement",milliseconds); The setTimeout() method returns a value - In the statement above, the value is stored in a variable called t. If you want to cancel this setTimeout(), you can refer to it using the variable name. The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()". The second parameter indicates how many milliseconds from now you want to execute the first parameter. Note: There are 1000 milliseconds in one second.
<html> <head> <script type="text/javascript"> function timedMsg() { var t=setTimeout("alert('I am displayed after 3 seconds!')",3000); } </script> </head> <body> <form> <input type="button" value="Display alert box!" onClick="timedMsg()" /> </form> </body> </html>
count <html> <head> <script type="text/javascript"> var c=0; var t; vartimer_is_on=0; function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()",1000); } function doTimer() { if (!timer_is_on) { timer_is_on=1; timedCount(); } } </script> </head>
<body> <form> <input type="button" value="Start count!" onClick="doTimer()"> <input type="text" id="txt"> </form> <p>Click on the button above. The input field will count forever, starting at 0.</p> </body> </html>
<html> <head> <script type="text/javascript"> var c=0; var t; var timer_is_on=0; function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()",1000); } function doTimer() { if (!timer_is_on) { timer_is_on=1; timedCount(); } } function stopCount() { clearTimeout(t); timer_is_on=0; } </script> </head>
Custom counter <body> <form> <input type="button" value="Start count!" onclick="doTimer()" /> <input type="text" id="txt" /> <input type="button" value="Stop count!" onclick="stopCount()" /> </form> <p> Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer again. </p> </body> </html>
