spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / diaries / 13

[next]

Java Developer
Professional Technical Resources
US-WA-Seattle

Justtechjobs.com Post A Job | Post A Resume
Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

The JavaScript Diaries: Part 13 - Array Properties and Methods

  1. Introduction
  2. Data Types & Variables
  3. Operators
  4. Functions
  5. Conditional Statements and Loops
  6. Objects
  7. Browser-Based Objects
  8. Window Methods
  9. Window Event Handlers
  10. Navigator, Screen, History and Location Objects
  11. Arrays: Part 1 - Introduction
  12. Arrays: Part 2 - Multiple Array Types
  13. Arrays: Part 3 - Array Properties and Methods
  14. The Math Object
  15. The Date Object

By 

Now that we know about the different types of arrays, we'll learn how to manipulate them in order to make them more functional. In this section, we'll look at the properties and methods that are commonly used for most coding situations.

Array Properties

length

The length property returns the number of elements in an array. The format is arrayName.length. The length property is particularly useful when using a loop to cycle through an array. One example would be an array used to cycle banners:

var bannerImg = new Array();
  bannerImg[0]="image-1.gif";
  bannerImg[1]="image-2.gif";
  bannerImg[2]="image-3.gif";

var newBanner = 0
var totalBan = bannerImg.length

function cycleBan() {
  newBanner++
  if (newBanner == totalBan) {
    newBanner = 0
  }
  document.banner.src=bannerImg[newBanner]
  setTimeout("cycleBan()", 3*1000)
}
window.onload=cycleBan;

This portion is then placed in the body where the banner is to be displayed:

<img src="image-1.gif" name="banner">

Let's take a look and see what happened here:

  1. On the first line, we created a new instance of the array bannerImg, and gave it three data elements. (Remember, we are only making a copy of the Array object here.)
  2. Next, we created two variables: newBanner, which has a beginning value of zero; and totalBan, which returns the length of the array (the total number of elements contained in the array).
  3. Then we created a function named cycleBan. This function will be used to create a loop to cycle the images.
    1. We set the newBanner variable to be increased each time the function cycles. (Review: By placing the increment operator [" ++ "] after the variable [the "operand"], the variable is incremented only after it returns its current value to the script. For example, its beginning value is "0", so in the first cycle it will return a value of "0" to the script and then its value will be increased by "1".)
    2. When the value of the newBanner variable is equal to the variable totalBan (which is the length of the array), it is then reset to "0". This allows the images to start the cycle again, from the beginning.
    3. The next statement uses the Document Object Method (DOM - we'll be taking a look at that soon) to display the images on the Web page. Remember, we use the dot operator to access the properties of an object. We also read the statement backwards, i.e., "take the element from the array bannerImg, that is specified by the current value of the variable newBanner, and place it in the src attribute located in the element with the name attribute of banner, which is located in the document object."
    4. We then used the setTimeout function to tell the script how long to display each image. This is always measured in milliseconds so, in this case, the function cycleBan is called every 3,000 milliseconds (i.e., every 3 seconds).
  4. Finally, we used the window.onload statement to execute the function cycleBan as soon as the document is loaded.

There are a total of five properties for the Array object. In addition to the length property listed above, the others are:

  1. constructor: Specifies the function that creates an object's prototype.
  2. index: Only applies to JavaScript arrays created by a regular expression match.
  3. input: Only applies to JavaScript arrays created by a regular expression match.
  4. prototype: Used to add properties or methods.

The other properties listed here are either more advanced or seldom used. For now, we'll stick to the basics.

home / programming / javascript / diaries / 13

[next]

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Microsoft PDF: Top 10 Reasons to Move to Server Virtualization with Hyper-V
Microsoft PDF: Six Reasons Why Microsoft's Hyper-V Will Overtake Vmware
Microsoft Step-by-Step Guide: Hyper-V and Failover Clustering
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Microsoft PDF: Top 11 Reasons to Upgrade to Windows Server 2008
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
  PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
HP eBook: Guide to Storage Networking
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Crucial Triples Up With New Three-Channel DDR3 Kits · Meet the Finalists: Excellence in Technology Awards · Tealeaf Offers Insight to Mobile Customer Behavior

URL: