Array Concatenation

Array Concatenation : Array : Language Basics JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Language Basics » Array »

Array Concatenation



<HTML>
<HEAD>
<TITLE>Array Concatenation</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">

var arrayOne, arrayTwo, arrayThree, textObj

function initialize() {
    var form = document.forms[0]
    textObj = form.original
    arrayOne = new Array("A", "B","C")
    arrayTwo = new Array("D", "E",textObj)
    arrayThree = arrayOne.concat(arrayTwo)
    update1(form)
    update2(form)
    showArrays()
}

function showArrays() {
    var form = document.forms[0]
    form.array1.value = arrayOne.join("n")
    form.array2.value = arrayTwo.join("n")
    form.array3.value = arrayThree.join("n")
}

function update1(form) {
    arrayThree[0] = form.source1.value
    form.result1.value = arrayOne[0]
    form.result2.value = arrayThree[0]
    showArrays()
}
function update2(form) {
    arrayThree[5].value = form.source2.value
    form.result3.value = arrayTwo[2].value
    form.result4.value = arrayThree[5].value
    showArrays()
}
</SCRIPT>
</HEAD>
<BODY onLoad="initialize()">
<FORM>
<TABLE>
<TR><TH>arrayOne</TH><TH>arrayTwo</TH><TH>arrayThree</TH></TR>
<TR>
<TD><TEXTAREA NAME="array1" COLS=25 ROWS=6></TEXTAREA></TD>
<TD><TEXTAREA NAME="array2" COLS=25 ROWS=6></TEXTAREA></TD>
<TD><TEXTAREA NAME="array3" COLS=25 ROWS=6></TEXTAREA></TD>
</TR>
</TABLE>
<B>Enter new value for arrayThree[0]:</B>
<INPUT TYPE="text" NAME="source1" VALUE="X">
<INPUT TYPE="button" VALUE="Change arrayThree[0]" onClick="update1(this.form)"><BR>
Current arrayOne[0] is:<INPUT TYPE="text" NAME="result1"><BR>
Current arrayThree[0] is:<INPUT TYPE="text" NAME="result2"><BR>
<HR>
textObj assigned to arrayTwo[2]:
<INPUT TYPE="text" NAME="original" onFocus="this.blur()"></BR>
<B>Enter new value for arrayThree[5]:</B>
<INPUT TYPE="text" NAME="source2" VALUE="Y">
<INPUT TYPE="button" VALUE="Change arrayThree[5].value" onClick="update2(this.form)"><BR>
Current arrayTwo[2].value is:<INPUT TYPE="text" NAME="result3"><BR>
Current arrayThree[5].value is:<INPUT TYPE="text" NAME="result4"><P>
<INPUT TYPE="button" VALUE="Reset" onClick="location.reload()">
</FORM>
</BODY>
</HTML>