1 / 12

JavaScript

JavaScript. JavaScript Array. JavaScript Array Revisited. Arrays Data structures consisting of related data items JavaScript arrays “dynamic” entities that can change size after they are created The first element in every array is the zeroth element.

mark-nixon
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript JavaScript Array

  2. JavaScript Array Revisited • Arrays • Data structures consisting of related data items • JavaScript arrays • “dynamic” entities that can change size after they are created • The first element in every array is the zeroth element. • The ith element of array c is referred to as c[i-1]. • Array names follow the same conventions as other identifiers • Every array in JavaScript knows its own length, which it stores in its length attribute and can be found with the expression arrayname.length

  3. Example

  4. Declaring and Allocating Arrays • JavaScript arrays are Array objects. • You use the new operator to create an array and to specify the number of elements in an array. var n = new Array(2 , 4 , 6, 8); var n1 = [ 2, 4, 6, 7 ]; var n2 = new Array(); varn3 = new Array(“poor”, “ok”, “good”);

  5. JavaScript External Script • It’s considered good practice to separate your JavaScript scripts into separate files so that they can be reused in multiple webpage. • <html> • <head> • <meta charset = "utf-8"> • <title>Initializing an Array</title> • <link rel = "stylesheet" type = "text/css" href = "tablestyle.css"> • <script src = "InitArray.js"></script> • </head> • <body> • <div id = "output1"></div> • <div id = "output2"></div> • </body> • </html>

  6. Array Example

  7. Array Example

  8. Array Example

  9. Javascript Array

  10. Array of Objects- Random Image Generator • It uses an array pictures to store the names of the image files as strings. • Each time you click the image in the document, the script generates a random integer and uses it as an index into the pictures array. • The script updates the img element’s src attribute with the image filename at the randomly selected position in the pictures array. • We update the alt attribute with an appropriate description of the image from the descriptions array.

  11. Random Image Generator using Array varpictures = ["GreekLife.jpg","LivingCampus.jpg","newApplication.jpg", "Number1.jpg","Team.jpg"]; var items = ["Society","On-Campus Housing","New Application on Mobile"," USCA Number one", "Sport"]; // Switch image function switchImage() { iE = document.getElementById( "usca" ); setImage( iE ); } // set src and alt attributes for a image function setImage(imgElement ) { var index = Math.floor( Math.random() * 5 ); imgElement.setAttribute( "src", pictures[index] ); imgElement.setAttribute( "alt", items[index]); } // end function setImage

  12. Animated Ad Banner – Set Time Interval Function • setInterval() - executes a function, over and over again, at specified time intervals • window.setInterval("javascriptfunction",milliseconds); • Example: setInterval(function(){alert(“here”);}, 3000); // Pop up an alert window every three second

More Related