Arrays - Dev Shed

Dev Shed Forums Sponsor:

November 19th, 2005, 10:26 AM

Destruantes

Contributing User

Join Date: Nov 2005

Posts: 84

Time spent in forums: 1 Day 1 h 24 m 13 sec
Reputation Power: 7

Arrays

I can't seem to get the hang of arrays in javascript, but I feel like I need 'em, 'cause daaaang this is ugly and impractical(and just a portion of the entire code, something like 200 elements) can anyone tell me how to do? (Yes this is one of the few times that I actually do want some code examples)

Code:

a2mover.width=kcuf
a2mover.height=ykcuf
b2mover.width=kcuf
b2mover.height=ykcuf
c2mover.width=kcuf
c2mover.height=ykcuf
d2mover.width=kcuf
d2mover.height=ykcuf
a3mover.width=kcuf
a3mover.height=ykcuf
b3mover.width=kcuf
b3mover.height=ykcuf
c3mover.width=kcuf
c3mover.height=ykcuf
d3mover.width=kcuf
d3mover.height=ykcuf
a4mover.width=kcuf
a4mover.height=ykcuf
b4mover.width=kcuf
b4mover.height=ykcuf
c4mover.width=kcuf
c4mover.height=ykcuf
d4mover.width=kcuf
d4mover.height=ykcuf

November 19th, 2005, 10:46 AM

aconway

Contributing User

Join Date: May 2003

Posts: 387

Time spent in forums: 4 Days 1 h 45 m
Reputation Power: 16

mover[letter][number][height]
mover[letter][number][width]

this is a multidimensional array (aka arrays within arrays)

the main array with every thing in it is mover and it is divided by [letter] then [letter] is divided by [number] and number has two values [height] and [width]

so...

mover[a][1][25px] = (the mover a1's height is 25px)
mover[a][1][50px] = (the mover a1's width is 50px)
mover[a][2][25px] = (the mover a2's height is 25px)
mover[a][2][50px] = (the mover a2's width is 50px)
mover[b][1][25px] = (the mover b1's height is 25px)
mover[b][1][50px] = (the mover b1's width is 50px)

i'm a visual learner so I think of this as...

Code:

Array mover (
    -> Array a (
         -> Array 1 (
             -> 25px
             -> 50px
             )
         -> Array 2 (
             -> 25px
             -> 50ps
             )
     )
     -> Array b (
         -> Array 1 (
             -> 25px
             -> 50px
             )
     )
)

Last edited by aconway : November 19th, 2005 at 10:57 AM.

November 19th, 2005, 11:02 AM

jsKid

Application is what Divides Us

Join Date: Dec 2002

Location: Titusville, FL

Posts: 2,179

Time spent in forums: 2 Weeks 2 Days 15 h 42 m 16 sec
Reputation Power: 56

Something like this maybe?

Assuming that you're wanting to assign the values...

Code:


var W3= document.getElementById;
var IE= document.all; // Opera7 as well
var NN= document.layers;

function getObj(ref){
  return((W3) ? document.getElementById(ref) :
	 (IE) ? document.all[ref]            :
	 (NN) ? document.layers[ref]         : null);
}

function assign_Val(n,arr,attr){
  var kcuf='100px', ykcuf='100px';
  for (var i= arr.length; i >= 0; i--){
    for (var j= attr.length; j >= 0; j--){
      for (var zero=0; n > zero; n--){
        getObj(arr[i]+n+'mover').style[ attr[j] ]= ((attr[j] == 'width') ? kcuf : ykcuf);
      }
    }
  }
}

Code:

window.onload= function(){
  assign_Val(  4, ['a','b','c','d'], ['width','height']  );
};

[EDIT]

If you don't like the above array with the function call separate it off like

Code:

var arrObj= ['a','b','c','d'];

window.onload= function(){
  assign_Val(  4, arrObj, ['width','height']  );
};

Comments on this post

Destruantes agrees: Damn great advice - a real pro

__________________
Download [ Fx | Op ] Validate [ Markup | Css ]

Last edited by jsKid : November 19th, 2005 at 12:17 PM.

November 22nd, 2005, 07:29 AM

Destruantes

Contributing User

Join Date: Nov 2005

Posts: 84

Time spent in forums: 1 Day 1 h 24 m 13 sec
Reputation Power: 7

Quote:

Originally Posted by aconway

Code:

Array mover (
    -> Array a (
         -> Array 1 (
             -> 25px
             -> 50px
             )
         -> Array 2 (
             -> 25px
             -> 50ps
             )
     )
     -> Array b (
         -> Array 1 (
             -> 25px
             -> 50px
             )
     )
)

sorry it took me so long to answer to the post, been away for a few days...just wanted to say thanx...big time! You have no idea how greatful I am, I really apreciate your help!

November 22nd, 2005, 09:40 AM

Destruantes

Contributing User

Join Date: Nov 2005

Posts: 84

Time spent in forums: 1 Day 1 h 24 m 13 sec
Reputation Power: 7

Quote:

Originally Posted by jsKid

Something like this maybe?

Assuming that you're wanting to assign the values...

Code:


var W3= document.getElementById;
var IE= document.all; // Opera7 as well
var NN= document.layers;

function getObj(ref){
  return((W3) ? document.getElementById(ref) :
	 (IE) ? document.all[ref]            :
	 (NN) ? document.layers[ref]         : null);
}

function assign_Val(n,arr,attr){
  var kcuf='100px', ykcuf='100px';
  for (var i= arr.length; i >= 0; i--){
    for (var j= attr.length; j >= 0; j--){
      for (var zero=0; n > zero; n--){
        getObj(arr[i]+n+'mover').style[ attr[j] ]= ((attr[j] == 'width') ? kcuf : ykcuf);
      }
    }
  }
}

Code:

window.onload= function(){
  assign_Val(  4, ['a','b','c','d'], ['width','height']  );
};

[EDIT]

If you don't like the above array with the function call separate it off like

Code:

var arrObj= ['a','b','c','d'];

window.onload= function(){
  assign_Val(  4, arrObj, ['width','height']  );
};

Man this made me realise that I have such a long way to go...can some kind soul please load this code with remarks? The parts that I don't get are particularly the

Code:

var W3= document.getElementById;
var IE= document.all; // Opera7 as well
var NN= document.layers;

Code:

getObj(arr[i]+n+'mover').style[ attr[j] ]= ((attr[j] == 'width') ? kcuf :

bits...oh...and I thought you had to declare it as an array first? (the myarray=new Array; part)

I guess I need to know more about the basics of arrays...like how do I asign a html id to an array so I can manipulate it later on?

imarr=new Array;
for (i=1; i<=5; i=i+1)
{ imarr[i]= 'imvar' + i };

imgindex = 2
imarr[imgindex].width= 200

<IMG ID=imvar1 SRC="katt.jpg">
<IMG ID=imvar2 SRC="katt.jpg">
<IMG ID=imvar3 SRC="katt.jpg">

[/code]

Obviously this code won't work, but maybe you can see where I'm going with it? how do I do it?

November 22nd, 2005, 05:02 PM

jsKid

Application is what Divides Us

Join Date: Dec 2002

Location: Titusville, FL

Posts: 2,179

Time spent in forums: 2 Weeks 2 Days 15 h 42 m 16 sec
Reputation Power: 56

Seeing that I am the one who provided the code, maybe I should
also be the one to describe it's usess.. though I'm sure others
are capable as well.

Code:

//------------------------------------------------------------------------
// Object Detection:
//------------------------------------------------------------------------
// Object detection is the testing of an object, property, or method to
// detect that a certain object, property, or method exists before using
// to releave a particular browser's user from countless errors.

var W3= document.getElementById;
var IE= document.all; // Opera7 as well
var NN= document.layers;

//------------------------------------------------------------------------
// function getObj()...
//------------------------------------------------------------------------
// Here is a function that returns a reference to an object depending on
// which browser they are using:
// For Example:
// W3 -- IE6, NN6, MozFF, Konqueror, Safari, ...
// IE -- IE, Opera7, ...
// NN -- NN, ...

function getObj(ref){
  return((W3) ? document.getElementById(ref) :
	 (IE) ? document.all[ref]            :
	 (NN) ? document.layers[ref]         : null);
}

//------------------------------------------------------------------------
// function assign_Val()...
//------------------------------------------------------------------------
//  This function takes the values assigned to each parameter and assigns
// them to each object specified in the array (assigned to the arr parameter).
//

function assign_Val(n,arr,attr){

  // kcuf -- assumedly the width
  // ykcuf -- assumedly the height
  var kcuf='100px', ykcuf='100px';

  // loops through the paramter arr (an array) and counts down backwards from
  // the arrays length to zero (as KorRed Devil suggested is faster)
  for (var i= arr.length; i >= 0; i--){

    // loops through the parameter attr backwards, prepping the assignment
    // of the 'width' or 'height'
    for (var j= attr.length; j >= 0; j--){

      // the paramter n is the number of objects that are in each group of
      // the arr paramter.
      // For Example:
      // a1mover, a2mover, a3mover, a4mover, b1mover, b2mover, ...
      for (var zero=0; n > zero; n--){

        // Refer to the getObj function description above
        //----------------------------------------------------------------
        // .style[]
        //----------------------------------------------------------------
        // All objects have multiple methods to access them, or notations
        // to visually format the access.
        // - attr[j] could be either 'width' or 'height'
        // the equivalent to the below notation is:   ...style.width= ... but
        // because we are not directly accessing the width or height, we must
        // use this particular notation.

        getObj(arr[i]+n+'mover').style[ attr[j] ]= ((attr[j] == 'width') ? kcuf : ykcuf);
      }
    }
  }
}

This part, I felt, deserved another section to itself so..
Basically this code is an if/else statement, though formatted
in a different notation.

Code:

((attr[j] == 'width') ? kcuf : ykcuf);

If you wanted it in if/else format it would be more redundant.

Code:

        if (att[j] == 'width'){
          getObj(arr[i]+n+'mover').style[ attr[j] ]= kcuf;
        }else{
          getObj(arr[i]+n+'mover').style.[ att[j] ]= ykcuf;
        }

The amount of space, coding it takes up really isn't all that
different though it is better practice to have concision and readability.

November 22nd, 2005, 05:37 PM

jsKid

Application is what Divides Us

Join Date: Dec 2002

Location: Titusville, FL

Posts: 2,179

Time spent in forums: 2 Weeks 2 Days 15 h 42 m 16 sec
Reputation Power: 56

Most objects, properties, and methods in javascript especially have
multiple ways to be accessed due to browser incompatibilities over
the years... so many browsers have gone and taken the extra steps
to include backwards compatibility and cross browser solutions...

though in this case, it is merely for ease of using arrays.

These are exactly the same thing... though the second can be
used with more ease, as far as I am concerned...

Code:

var arr= new Array();
var arr= [];

November 22nd, 2005, 06:02 PM

ProggerPete

Contributing User

Join Date: May 2003

Location: Brisbane, Australia

Posts: 1,441

Time spent in forums: 1 Week 1 Day 1 h 35 m 23 sec
Reputation Power: 26

Quote:

var W3= document.getElementById;
var IE= document.all; // Opera7 as well
var NN= document.layers;

function getObj(ref){
return((W3) ? document.getElementById(ref) :
(IE) ? document.all[ref] :
(NN) ? document.layers[ref] : null);
}

My 2 cents on browser detection. I think setting up vars that indicate what sort of browser is running is bad. In this particular instance you won't run into any problems but if you rely on that detection to branch other scripts you could hit issues.

The danger is that you might hit a browser that supports document.all but isn't IE. Having decided that the browser is IE your script then tries to use IE only methods which could then fail.

If I was going to write a getObj script it I'd skip the browser detection and just use object detection within the function.

Code:

function getObj(ref)
{
	return document.getElementById ? document.getElementById(ref) : document.all ? document.all[ref] : document.layers ? document.layers[ref] : null;
}

Comments on this post

vbrtrmn agrees: nice!

__________________
Like the answers I give? Why not ask me directly at my forum. I'm always glad to help.

Javascript scripts and tips can be found at Dynamic Tools.
Check out DynamicTable, the best javascript table sorter around.
Get reliable and affordable hosting at www.thinksmarthosting.com

November 22nd, 2005, 09:08 PM

jsKid

Application is what Divides Us

Join Date: Dec 2002

Location: Titusville, FL

Posts: 2,179

Time spent in forums: 2 Weeks 2 Days 15 h 42 m 16 sec
Reputation Power: 56

Well--you're right. It could be misleading and lead me/others into
unexpected erros with the way that I was using my getObj function
except that is where experience comes into play.

I only use that setup cause I know what I am using works with
certain browsers for sure... every now and again I have to ask,
but even so... you're "ways" in general seem to be better.