Richard's JavaScript Tutorials

Updated 07/18/14

Creating and working with Custom Objects

Home
Animation
precachedImages
digitalClock
Object Tag (Audio)
Cookies.htm
Math_Object
Using CSS
The Style Object
Client_Info
customObject
functions
UsingArrays
comments
concatenation
documentwrite
ifelse
Loops
forms
Strings
variables

 


In this section I have created a custom object and used it in an array. This is an application that will display the current starters on both of the 2006 final teams when you click the Show players and Team button. There is  a loop in this script that cycles through the function until all players are listed in the text area.

Click below to see the 2006 NBA finals starters!





 

Here is the code for the  JavaScript above:

<html><head>
<title>Custom Object Array</title>
<script type="text/javascript">
<!--

// The function listPlayers() that loops through until all players are displayed.
function listPlayers()
{ // Function opener
// Clears values if a user clicks the Show Players and Teams button more than once.
document.finals2k6.Heat.value = ""
document.finals2k6.Mavericks.value = ""
do
{
for (var v = 0; v < players.length; v++)
{ // for opener

if (players[v].team == "Heat")

{ // if opener
// Here the custom object is used to display the properties of the new object.
document.finals2k6.Heat.value += players[v].playerName + players[v].playerPosition + players[v].team + "\n"
} //------------ if closer

if (players[v].team == "Mavericks")
{
document.finals2k6.Mavericks.value += players[v].playerName + players[v].playerPosition + players[v].team + "\n" ;
}
} // for closer
}
while (players[v] < 10);
} //function closer
//--></script></head><body><center>
<h2>Click below to see the 2006 NBA finals players and teams!</h2>
</center><center>
<form name="finals2k6" id="finals2k6">

<TABLE border="1">
<tr>
<td background="http://www.cayemay.com/2k6t.jpg"><br>
<center>
<input onclick="listPlayers()" type="button" value="Show Players and Teams"></center><br>
<textarea name="Heat" scrollbar="no" scroll="no" scrolling ="auto" rows="6" cols="31" background="http;//www.cayemay.com/2k6t.jpg"></textarea>
<textarea name="Mavericks" rows="6" cols="34">
</textarea><br><br><br>
</tr><p></td> </table></p></form>
</center><script type="text/javascript">
<!--

// Here the object and its properties are defined
function finalsTeams(playerName, playerPosition, team)
{
this.playerName = playerName;
this.playerPosition =playerPosition;
this.team = team;
}

// The array is created and instantiated
var players = new Array();
players[9] = new finalsTeams ("Shaquille O'Neal, ", "Center, ", "Heat");
players[8] = new finalsTeams ("Dirk Nowitzki, ", "Forward, ", "Mavericks");
players[7] = new finalsTeams ("Dwayne Wade, ", "Guard, ", "Heat");
players[6] = new finalsTeams ("Udonis Haslem, ", "Forward, ", "Heat");
players[5] = new finalsTeams ("Jason Terry,", "Guard, ", "Mavericks");
players[4] = new finalsTeams ("Jason Williams, ", "Guard, ", "Heat");
players[3] = new finalsTeams ("Josh Howard, ", "Forward, ", "Mavericks");
players[2] = new finalsTeams ("Eric Dampier, ", "Center, ", "Mavericks");
players[1] = new finalsTeams ("Antoine Walker, ", "Forward, ", "Heat");
players[0] = new finalsTeams ("Devin Harris, ", "Guard, ", "Mavericks");
//--></script></body></html>


Now you can try creating your own custom object. You don't have to use it with an array or with loops as I did in my example. If you need assistance or have any questions with this or any other script contact me: webmaster@cayemay.com

This site was last updated 07/08/14