Generators : Array Creator / The JavaScript Source

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

1. From: Vic
how to use
01/28/2008 06:02:40

2. From: Lee (Admin)
01/31/2008 13:45:28

1. From: Vichow to use01/28/2008 06:02:40

2. From: Lee (Admin)01/31/2008 13:45:28

1. From: Vic
how to use
01/28/2008 06:02:40

2. From: Lee (Admin)
01/31/2008 13:45:28

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

Coding large arrays can be a bit of a repetitive chore. This script will create a generator that will help speed up the process. Easy to use and implement!

Created by: Mr. J
Web Site: http://www.huntingground.net/
Posted: January 23, 2008

When using the numerical value option enter the array length and an index value.
A number is then appended to the index value starting at 000.
A second value can also be added after the number by entering in the second textbox, if this is not required leave the box blank.
If the numerical value option is not used each individual array index value is typed in the text field, you can then either click the "Manual Enter" button or press the "Return" key to confirm your index value.

Paste this source code into the designated areas.

Paste this code into an external JavaScript file named: arrayCreator.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Mr. J | http://www.huntingground.net/ */

function init(){
  array_name=document.f1.t1.value //name of array
  val2=document.f1.t3a.value
  ext=document.f1.t4.value
  for(r=0;r<document.f1.r1.length;r++){ // check which r1 radio is selected
    if(document.f1.r1[r].checked==true){
      option=document.f1.r1[r].value // selected radio value
    }
  }

  if(option==0){
    document.getElementById("display").innerHTML=array_name+" = new Array(" // opening array type 1
  } else {
    document.getElementById("display").innerHTML=array_name+" = new Array()<br>" // opening array type 2 & 3
  }

  if(document.f1.r2[0].checked==true){ // if indexed values
    make_array1()
  }

  if(document.f1.r2[1].checked==true){ // if non index values
    make_array2()
  }
}

function make_array1(){
  array_length=document.f1.t2.value-1 // length of array
  index_values=document.f1.t3.value // index value

  if(array_length==""||array_length==0){ // make sure a viable number is used
    document.getElementById("display").innerHTML="Please Enter a Number"
    document.f1.b2.disabled=true
    return
  } else {
    if(!ns){document.f1.cpy.disabled=false}
  }

  for(num=0;num<array_length;num++){
    j=num
    if(num<10){num="00"+num}
    if(num>9&&num<100){num="0"+num}
    if(document.f1.t4.value.length>0){
      i=num+val2+ext}
      else{i=num+val2}

  if(option==0){ // insert inner indexes for type 1
    document.getElementById("display").innerHTML+="\""+index_values+i+"\", "
  } else {
    if(option==1){ // insert inner indexes for type 2
      document.getElementById("display").innerHTML+=array_name+"["+j+"]="
      document.getElementById("display").innerHTML+="\""+index_values+i+"\"<br>"
    } else { // insert inner indexes for type 3
      document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_values+i+"\"<br>"
    }
  }
}

if(num<10){num="00"+num}
if(num>9&&num<100){num="0"+num}
if(num>100){num=num}

if(document.f1.t4.value.length>0){
  i= num+val2+ext}
  else{i=num+val2}

  if(option==0){ // insert last indexes for type 1
    document.getElementById("display").innerHTML+="\""+index_values+i+"\")"
  } else {
    if(option==1){ // insert last indexes for type 2
      document.getElementById("display").innerHTML+=array_name+"["+(j+1)+"]="
      document.getElementById("display").innerHTML+="\""+index_values+i+"\"<br>"
    } else { // insert last indexes for type 3
      document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_values+i+"\"<br>"
    }
  }
}

index_value=new Array()
count= 0
last=0

function make_array2(){
  if(!ns){document.f1.cpy.disabled=false}
  for(r=0;r<document.f1.r1.length;r++){ // check which r1 radio is selected
    if(document.f1.r1[r].checked==true){
      chkrad=r
    }
  }
  if(chkrad!=last){ // prevent additional index when only changing array style
    count--
  }

  if(document.f1.t4.value.length>0){
    index_value[count]=document.f1.t3.value+ext}
  else {
    index_value[count]=document.f1.t3.value
  }

  for(i=0;i<count;i++){
    if(option==0){
      document.getElementById("display").innerHTML+="\""+index_value[i]+"\", "
    } else {
      if(option==2){
        document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_value[i]+"\"<br>"
      } else {
        document.getElementById("display").innerHTML+=array_name+"["+i+"]=\""+index_value[i]+"\"<br>"
      }
    }
  }

  if(option==0){
    document.getElementById("display").innerHTML+="\""+index_value[i]+"\")"
  } else {
    if(option==2){
      document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_value[i]+"\"<br>"
    } else {
      document.getElementById("display").innerHTML+=array_name+"["+i+"]=\""+index_value[i]+"\"<br>"
    }
  }
  count++
  document.f1.t3.select()
  last=chkrad
}

function oreset(){
  count=0
  document.f1.t3.value=""
  document.getElementById("display").innerHTML=""
  document.f1.t3.select()
}

function chk(){
  if(document.f1.r2[0].checked==true){
    document.f1.t2.disabled=false
    document.getElementById("sp").disabled=false
    document.f1.t2.style.backgroundColor="#FFFFFF"
    document.f1.b1.disabled=false
    document.f1.b2.disabled=true
    document.f1.b3.disabled=true
    document.f1.t3a.disabled=false
    document.f1.t3a.style.backgroundColor="#FFFFFF"
  } else {
    document.f1.t2.disabled=true
    document.getElementById("sp").disabled=true
    document.f1.t2.style.backgroundColor="#c0c0c0"
    document.f1.b1.disabled=true
    document.f1.b2.disabled=false
    document.f1.b3.disabled=false
    document.f1.t3.select()
    document.f1.t3a.disabled=true
    document.f1.t3a.style.backgroundColor="#c0c0c0"
  }
}

function Copy(id){
  if(ns){
    alert("Sorry, Netscape does not recongise this function")
    document.f1.cpy.disabled=true
    return
  }
  copyit=id
  textRange = document.body.createTextRange();
  textRange.moveToElementText(copyit);
  textRange.execCommand("Copy");
  alert("Copying Complete.\n\nPlease Paste into your SCRIPT")
}

ns=document.getElementById&&!document.all

function getKey(e) {
  pressed_key=(!ns)?event.keyCode:e.which
  if( pressed_key==13){
    init()
  }
}
document.onkeypress = getKey;

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#display {
  position: relative;
  left: 10px;
  width: 450px;
  border: 1px solid black;
  padding: 10px;
}

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="arrayCreator.js"></script>

Paste this code into the BODY section of your HTML document


<form name="f1">

<table border="0">
  <tr>
    <td>Array Name:</td>
    <td colspan="6">
      <input type="text" name="t1" value="myArray">
    </td>
  </tr><tr>
    <td>
      <span id="sp">Indexed Array Length:</span>
    </td>
    <td colspan="6">
      <input type="text" name="t2" value="5" size="3" maxlength="3">
    </td>
  </tr><tr>
    <td>Index Value:</td>
    <td colspan="6">
      <input type="text" name="t3" value="image" size="10">
      <input type="text" name="t3a" value="_tn" size="10"> Ext
      <input type="text" name="t4" value=".jpg" size="4" maxlength="4">
    </td>
  </tr><tr>
    <td>Index Style:</td>
    <td align="right">1
      <input type="radio" name="r1" value="0" checked onclick="init()">
    </td>
    <td> </td>
    <td align="right">2
      <input type="radio" name="r1" value="1" onclick="init()">
    </td>
    <td> </td>
    <td align="right">3
      <input type="radio" name="r1" value="2" onclick="init()">
    </td>
    <td width="80"> </td>
  </tr><tr>
    <td>Add Numerical Values:</td>
    <td align="right">Yes
      <input type="radio" name="r2" value="0" checked onclick="chk()">
    </td>
    <td align="center"> </td>
    <td align="right">No
      <input type="radio" name="r2" value="1" onclick="chk()">
    </td>
    <td> </td>
    <td colspan="2"> </td>
  </tr><tr align="center">
    <td>
      <input type="button" name="b1" value="Numerical Enter" onclick="init()">
    </td>
    <td colspan="6">
      <input type="button" name="cpy" value="Copy Array" onclick="Copy(display)" disabled>
      <input type="button" name="b2" value="Manual Enter" onclick="init()" disabled>
      <input type="button" name="b3" value="Restart" onclick="oreset()" disabled>
    </td>
  </tr>
</table>

</form>

<div id="display"></div>

Add a comment, suggestion, or correction

Comments feed

Array Name:

Indexed Array Length:

Index Value:

Index Style:

Add Numerical Values: