SlideShare a Scribd company logo
Outline
IS400: Development of Business Applications on the Internet
Fall 2004
Instructor: Dr. Boris Jukic
JavaScript: Arrays
Introduction
 Arrays
– Data structures of related items
 Each element has a position number
– Dynamic
 Size of an array in JavaScript can be changed
(increased) AFTER it is created
Arrays
 Arrays in JavaScript
– Each element referenced by a number
 Start at “zeroth element”: 10 element array has elements: 0,1,2 ,..,8,9
 Subscript or index
– Accessing a specific element
 Name of array
 Brackets
 Number of element
– Arrays know their length
 length property
c[ 6 ]
-45
6
0
72
1543
-89
0
62
-3
1
6453
78
Name of array c[ 0 ]
c[ 1 ]
c[ 2 ]
c[ 3 ]
c[ 11 ]
c[ 10 ]
c[ 9 ]
c[ 8 ]
c[ 7 ]
c[ 5 ]
c[ 4 ]
Position number (index
or subscript) of the
element within array c
Fig. 11.1 A 12-element array.
Declaring and Allocating Arrays
 Arrays in memory
– Objects
– Operator new
 Allocates memory for objects
 Dynamic memory allocation operator
var c;  array declaration
c = new Array( 12 );  memory allocation
Using Arrays
 Arrays can grow dynamically
– Allocate more space as more items are added
than originally planned for
 Array elements must be initialized explicitly
– Default value is “undefined”
– for loops convenient fro initialization
– Referring to uninitialized elements or elements
outside array bounds is an error
Outline
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.3: InitArray.html -->
6 <!-- Initializing an Array -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Initializing an Array</title>
11
12 <script type = "text/javascript">
13 <!--
14 // this function is called when the <body> element's
15 // onload event occurs
16 function initializeArrays()
17 {
18 var n1 = new Array( 5 ); // allocate 5-element Array
19 var n2 = new Array(); // allocate empty Array
20
21 // assign values to each element of Array n1
22 for ( var i = 0; i < n1.length; ++i )
23 n1[ i ] = i;
Array n1 has five elements.
The for loop initializes the elements in n1 to
their subscript numbers (0 to 4).
Array n2 is an empty array.
Outline
24
25 // create and initialize five-elements in Array n2
26 for ( i = 0; i < 5; ++i )
27 n2[ i ] = i;
28
29 outputArray( "Array n1 contains", n1 );
30 outputArray( "Array n2 contains", n2 );
31 }
32
33 // output "header" followed by a two-column table
34 // containing subscripts and elements of "theArray"
35 function outputArray( header, theArray )
36 {
37 document.writeln( "<h2>" + header + "</h2>" );
38 document.writeln( "<table border = "1" width =" +
39 ""100%">" );
40
41 document.writeln( "<thead><th width = "100"" +
42 "align = "left">Subscript</th>" +
43 "<th align = "left">Value</th></thead><tbody>" );
The for loop adds five elements to Array n2 and initialize
each element to its subscript number (0 to 4).
Each function displays the
contents of its respective Array
in an XHTML table.
The first time function ouputArray is called,
variable header gets the value of “Array n1
contains” and variable theArray gets the
value of n1.
The second time function ouputArray is
called, variable header gets the value of
“Array n2 contains” and variable
theArray gets the value of n2.
Outline
44
45 for ( var i = 0; i < theArray.length; i++ )
46 document.writeln( "<tr><td>" + i + "</td><td>" +
47 theArray[ i ] + "</td></tr>" );
48
49 document.writeln( "</tbody></table>" );
50 }
51 // -->
52 </script>
53
54 </head><body onload = "initializeArrays()"></body>
55 </html>
Examples Using Arrays
Examples Using Arrays
 for…in statement
– Perform an action for each element in an array
– Iterates over array elements
 Assigns each element to specified variable one at a time
– Ignores non-existent elements
Outline
SumArray.html
(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.5: SumArray.html -->
6 <!-- Summing Elements of an Array -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Sum the Elements of an Array</title>
11
12 <script type = "text/javascript">
13 <!--
14 function start()
15 {
16 var theArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
17 var total1 = 0, total2 = 0;
18
19 for ( var i = 0; i < theArray.length; i++ )
20 total1 += theArray[ i ];
21
22 document.writeln( "Total using subscripts: " + total1 );
23
The for loop sums the values contained in the 10-
element integer array called theArray.
Outline
SumArray.html
(2 of 2)
24 for ( var element in theArray )
25 total2 += theArray[ element ];
26
27 document.writeln( "<br />Total using for...in: " +
28 total2 );
29 }
30 // -->
31 </script>
32
33 </head><body onload = "start()"></body>
34 </html>
Variable element is assigned a subscript
in the range of 0 up to, but not including,
theArray.length.
Multidimensional Arrays
 Two-dimensional arrays analogous to tables
– Rows and columns
 Specify row first, then column
– Two subscripts
Multidimensional Arrays
a[ 1 ][ 0 ] a[ 1 ][ 1 ] a[ 1 ][ 2 ] a[ 1 ][ 3 ]
Row 0
Row 1
Row 2
Column 0 Column 1 Column 2 Column 3
Row subscript (or index)
Array name
Column subscript (or index)
a[ 0 ][ 0 ] a[ 0 ][ 1 ] a[ 0 ][ 2 ] a[ 0 ][ 3 ]
a[ 2 ][ 0 ] a[ 2 ][ 1 ] a[ 2 ][ 2 ] a[ 2 ][ 3 ]
Two-dimensional array with three rows and four columns.
Multidimensional Arrays
 Declaring and initializing multidimensional
arrays
– Group by row in square brackets
– Treated as arrays of arrays
– Creating array b with one row of two elements
and a second row of three elements:
var b = [ [ 1, 2 ], [ 3, 4, 5 ] ];
Multidimensional Arrays
 Also possible to use new operator
– Create array b with two rows, first with five
columns and second with three:
var b;
b = new Array( 2 );
b[ 0 ] = new Array( 5 );
b[ 1 ] = new Array( 3 );
Outline
InitArray3.html
(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.13: InitArray3.html -->
6 <!-- Initializing Multidimensional Arrays -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Initializing Multidimensional Arrays</title>
11
12 <script type = "text/javascript">
13 <!--
14 function start()
15 {
16 var array1 = [ [ 1, 2, 3 ], // first row
17 [ 4, 5, 6 ] ]; // second row
18 var array2 = [ [ 1, 2 ], // first row
19 [ 3 ], // second row
20 [ 4, 5, 6 ] ]; // third row
21
22 outputArray( "Values in array1 by row", array1 );
23 outputArray( "Values in array2 by row", array2 );
24 }
Array array1 provides six initializers in
two rows.
Array array2 provides six initializers in
three rows.
Function outputArray displays each array’s
elements in a Web page.
Outline
InitArray3.html
(2 of 2)
25
26 function outputArray( header, theArray )
27 {
28 document.writeln( "<h2>" + header + "</h2><tt>" );
29
30 for ( var i in theArray ) {
31
32 for ( var j in theArray[ i ] )
33 document.write( theArray[ i ][ j ] + " " );
34
35 document.writeln( "<br />" );
36 }
37
38 document.writeln( "</tt>" );
39 }
40 // -->
41 </script>
42
43 </head><body onload = "start()"></body>
44 </html>
Referencing the multidimensional
array theArray.
Multidimensional Arrays

More Related Content

Similar to ajava arrays topic brief explanation data (20)

PPT
Lecture7
Ahmad Al-Bakry
 
PPT
Array1
Rajendran
 
PPTX
Java script arrays
Frayosh Wadia
 
PPTX
Java script arrays
Frayosh Wadia
 
PPT
Javascript - Getting Good with Loop and Array
Firdaus Adib
 
PPTX
arrays and its types and examples of sorting reversing arrays.pptx
zulfeiquaar
 
PPTX
10. session 10 loops and arrays
Phúc Đỗ
 
PPTX
Chapter 7.1
sotlsoc
 
PDF
Chapter 4 (Part I) - Array and Strings.pdf
KirubelWondwoson1
 
PPTX
Javascript - Array - Creating Array
Samuel Santos
 
PPT
Array
PRN USM
 
PPTX
JavaScript / Web Engineering / Web Development / html + css + js/presentation
M Sajid R
 
PPT
Js objects
Charles Russell
 
PPTX
Lesson 11 one dimensional array
MLG College of Learning, Inc
 
PPT
Javascript arrays
Hassan Dar
 
PPTX
Net (f#) array
DrRajeshreeKhande
 
PPTX
JavaScript.pptx
pramod599939
 
PPTX
1-JAVA SCRIPT. servere-side applications vs client side applications
surajshreyans
 
PPTX
Arrays in Data Structure and Algorithm
KristinaBorooah
 
PPT
Chap09
Terry Yoast
 
Lecture7
Ahmad Al-Bakry
 
Array1
Rajendran
 
Java script arrays
Frayosh Wadia
 
Java script arrays
Frayosh Wadia
 
Javascript - Getting Good with Loop and Array
Firdaus Adib
 
arrays and its types and examples of sorting reversing arrays.pptx
zulfeiquaar
 
10. session 10 loops and arrays
Phúc Đỗ
 
Chapter 7.1
sotlsoc
 
Chapter 4 (Part I) - Array and Strings.pdf
KirubelWondwoson1
 
Javascript - Array - Creating Array
Samuel Santos
 
Array
PRN USM
 
JavaScript / Web Engineering / Web Development / html + css + js/presentation
M Sajid R
 
Js objects
Charles Russell
 
Lesson 11 one dimensional array
MLG College of Learning, Inc
 
Javascript arrays
Hassan Dar
 
Net (f#) array
DrRajeshreeKhande
 
JavaScript.pptx
pramod599939
 
1-JAVA SCRIPT. servere-side applications vs client side applications
surajshreyans
 
Arrays in Data Structure and Algorithm
KristinaBorooah
 
Chap09
Terry Yoast
 

Recently uploaded (20)

PPTX
Water resources Engineering GIS KRT.pptx
Krunal Thanki
 
PDF
Zero carbon Building Design Guidelines V4
BassemOsman1
 
PDF
Jual GPS Geodetik CHCNAV i93 IMU-RTK Lanjutan dengan Survei Visual
Budi Minds
 
PPTX
Information Retrieval and Extraction - Module 7
premSankar19
 
PDF
2010_Book_EnvironmentalBioengineering (1).pdf
EmilianoRodriguezTll
 
PPTX
Introduction to Fluid and Thermal Engineering
Avesahemad Husainy
 
PDF
Construction of a Thermal Vacuum Chamber for Environment Test of Triple CubeS...
2208441
 
PDF
All chapters of Strength of materials.ppt
girmabiniyam1234
 
PDF
STUDY OF NOVEL CHANNEL MATERIALS USING III-V COMPOUNDS WITH VARIOUS GATE DIEL...
ijoejnl
 
PDF
Packaging Tips for Stainless Steel Tubes and Pipes
heavymetalsandtubes
 
PPTX
business incubation centre aaaaaaaaaaaaaa
hodeeesite4
 
DOCX
SAR - EEEfdfdsdasdsdasdasdasdasdasdasdasda.docx
Kanimozhi676285
 
PDF
SG1-ALM-MS-EL-30-0008 (00) MS - Isolators and disconnecting switches.pdf
djiceramil
 
PDF
Machine Learning All topics Covers In This Single Slides
AmritTiwari19
 
PPTX
Precedence and Associativity in C prog. language
Mahendra Dheer
 
PDF
Advanced LangChain & RAG: Building a Financial AI Assistant with Real-Time Data
Soufiane Sejjari
 
PDF
AI-Driven IoT-Enabled UAV Inspection Framework for Predictive Maintenance and...
ijcncjournal019
 
PPTX
quantum computing transition from classical mechanics.pptx
gvlbcy
 
PDF
20ME702-Mechatronics-UNIT-1,UNIT-2,UNIT-3,UNIT-4,UNIT-5, 2025-2026
Mohanumar S
 
PPTX
22PCOAM21 Session 1 Data Management.pptx
Guru Nanak Technical Institutions
 
Water resources Engineering GIS KRT.pptx
Krunal Thanki
 
Zero carbon Building Design Guidelines V4
BassemOsman1
 
Jual GPS Geodetik CHCNAV i93 IMU-RTK Lanjutan dengan Survei Visual
Budi Minds
 
Information Retrieval and Extraction - Module 7
premSankar19
 
2010_Book_EnvironmentalBioengineering (1).pdf
EmilianoRodriguezTll
 
Introduction to Fluid and Thermal Engineering
Avesahemad Husainy
 
Construction of a Thermal Vacuum Chamber for Environment Test of Triple CubeS...
2208441
 
All chapters of Strength of materials.ppt
girmabiniyam1234
 
STUDY OF NOVEL CHANNEL MATERIALS USING III-V COMPOUNDS WITH VARIOUS GATE DIEL...
ijoejnl
 
Packaging Tips for Stainless Steel Tubes and Pipes
heavymetalsandtubes
 
business incubation centre aaaaaaaaaaaaaa
hodeeesite4
 
SAR - EEEfdfdsdasdsdasdasdasdasdasdasdasda.docx
Kanimozhi676285
 
SG1-ALM-MS-EL-30-0008 (00) MS - Isolators and disconnecting switches.pdf
djiceramil
 
Machine Learning All topics Covers In This Single Slides
AmritTiwari19
 
Precedence and Associativity in C prog. language
Mahendra Dheer
 
Advanced LangChain & RAG: Building a Financial AI Assistant with Real-Time Data
Soufiane Sejjari
 
AI-Driven IoT-Enabled UAV Inspection Framework for Predictive Maintenance and...
ijcncjournal019
 
quantum computing transition from classical mechanics.pptx
gvlbcy
 
20ME702-Mechatronics-UNIT-1,UNIT-2,UNIT-3,UNIT-4,UNIT-5, 2025-2026
Mohanumar S
 
22PCOAM21 Session 1 Data Management.pptx
Guru Nanak Technical Institutions
 
Ad

ajava arrays topic brief explanation data

  • 1. Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic JavaScript: Arrays
  • 2. Introduction  Arrays – Data structures of related items  Each element has a position number – Dynamic  Size of an array in JavaScript can be changed (increased) AFTER it is created
  • 3. Arrays  Arrays in JavaScript – Each element referenced by a number  Start at “zeroth element”: 10 element array has elements: 0,1,2 ,..,8,9  Subscript or index – Accessing a specific element  Name of array  Brackets  Number of element – Arrays know their length  length property
  • 4. c[ 6 ] -45 6 0 72 1543 -89 0 62 -3 1 6453 78 Name of array c[ 0 ] c[ 1 ] c[ 2 ] c[ 3 ] c[ 11 ] c[ 10 ] c[ 9 ] c[ 8 ] c[ 7 ] c[ 5 ] c[ 4 ] Position number (index or subscript) of the element within array c Fig. 11.1 A 12-element array.
  • 5. Declaring and Allocating Arrays  Arrays in memory – Objects – Operator new  Allocates memory for objects  Dynamic memory allocation operator var c;  array declaration c = new Array( 12 );  memory allocation
  • 6. Using Arrays  Arrays can grow dynamically – Allocate more space as more items are added than originally planned for  Array elements must be initialized explicitly – Default value is “undefined” – for loops convenient fro initialization – Referring to uninitialized elements or elements outside array bounds is an error
  • 7. Outline 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 11.3: InitArray.html --> 6 <!-- Initializing an Array --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Initializing an Array</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 // this function is called when the <body> element's 15 // onload event occurs 16 function initializeArrays() 17 { 18 var n1 = new Array( 5 ); // allocate 5-element Array 19 var n2 = new Array(); // allocate empty Array 20 21 // assign values to each element of Array n1 22 for ( var i = 0; i < n1.length; ++i ) 23 n1[ i ] = i; Array n1 has five elements. The for loop initializes the elements in n1 to their subscript numbers (0 to 4). Array n2 is an empty array.
  • 8. Outline 24 25 // create and initialize five-elements in Array n2 26 for ( i = 0; i < 5; ++i ) 27 n2[ i ] = i; 28 29 outputArray( "Array n1 contains", n1 ); 30 outputArray( "Array n2 contains", n2 ); 31 } 32 33 // output "header" followed by a two-column table 34 // containing subscripts and elements of "theArray" 35 function outputArray( header, theArray ) 36 { 37 document.writeln( "<h2>" + header + "</h2>" ); 38 document.writeln( "<table border = "1" width =" + 39 ""100%">" ); 40 41 document.writeln( "<thead><th width = "100"" + 42 "align = "left">Subscript</th>" + 43 "<th align = "left">Value</th></thead><tbody>" ); The for loop adds five elements to Array n2 and initialize each element to its subscript number (0 to 4). Each function displays the contents of its respective Array in an XHTML table. The first time function ouputArray is called, variable header gets the value of “Array n1 contains” and variable theArray gets the value of n1. The second time function ouputArray is called, variable header gets the value of “Array n2 contains” and variable theArray gets the value of n2.
  • 9. Outline 44 45 for ( var i = 0; i < theArray.length; i++ ) 46 document.writeln( "<tr><td>" + i + "</td><td>" + 47 theArray[ i ] + "</td></tr>" ); 48 49 document.writeln( "</tbody></table>" ); 50 } 51 // --> 52 </script> 53 54 </head><body onload = "initializeArrays()"></body> 55 </html>
  • 11. Examples Using Arrays  for…in statement – Perform an action for each element in an array – Iterates over array elements  Assigns each element to specified variable one at a time – Ignores non-existent elements
  • 12. Outline SumArray.html (1 of 2) 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 11.5: SumArray.html --> 6 <!-- Summing Elements of an Array --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Sum the Elements of an Array</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 function start() 15 { 16 var theArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; 17 var total1 = 0, total2 = 0; 18 19 for ( var i = 0; i < theArray.length; i++ ) 20 total1 += theArray[ i ]; 21 22 document.writeln( "Total using subscripts: " + total1 ); 23 The for loop sums the values contained in the 10- element integer array called theArray.
  • 13. Outline SumArray.html (2 of 2) 24 for ( var element in theArray ) 25 total2 += theArray[ element ]; 26 27 document.writeln( "<br />Total using for...in: " + 28 total2 ); 29 } 30 // --> 31 </script> 32 33 </head><body onload = "start()"></body> 34 </html> Variable element is assigned a subscript in the range of 0 up to, but not including, theArray.length.
  • 14. Multidimensional Arrays  Two-dimensional arrays analogous to tables – Rows and columns  Specify row first, then column – Two subscripts
  • 15. Multidimensional Arrays a[ 1 ][ 0 ] a[ 1 ][ 1 ] a[ 1 ][ 2 ] a[ 1 ][ 3 ] Row 0 Row 1 Row 2 Column 0 Column 1 Column 2 Column 3 Row subscript (or index) Array name Column subscript (or index) a[ 0 ][ 0 ] a[ 0 ][ 1 ] a[ 0 ][ 2 ] a[ 0 ][ 3 ] a[ 2 ][ 0 ] a[ 2 ][ 1 ] a[ 2 ][ 2 ] a[ 2 ][ 3 ] Two-dimensional array with three rows and four columns.
  • 16. Multidimensional Arrays  Declaring and initializing multidimensional arrays – Group by row in square brackets – Treated as arrays of arrays – Creating array b with one row of two elements and a second row of three elements: var b = [ [ 1, 2 ], [ 3, 4, 5 ] ];
  • 17. Multidimensional Arrays  Also possible to use new operator – Create array b with two rows, first with five columns and second with three: var b; b = new Array( 2 ); b[ 0 ] = new Array( 5 ); b[ 1 ] = new Array( 3 );
  • 18. Outline InitArray3.html (1 of 2) 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 11.13: InitArray3.html --> 6 <!-- Initializing Multidimensional Arrays --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Initializing Multidimensional Arrays</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 function start() 15 { 16 var array1 = [ [ 1, 2, 3 ], // first row 17 [ 4, 5, 6 ] ]; // second row 18 var array2 = [ [ 1, 2 ], // first row 19 [ 3 ], // second row 20 [ 4, 5, 6 ] ]; // third row 21 22 outputArray( "Values in array1 by row", array1 ); 23 outputArray( "Values in array2 by row", array2 ); 24 } Array array1 provides six initializers in two rows. Array array2 provides six initializers in three rows. Function outputArray displays each array’s elements in a Web page.
  • 19. Outline InitArray3.html (2 of 2) 25 26 function outputArray( header, theArray ) 27 { 28 document.writeln( "<h2>" + header + "</h2><tt>" ); 29 30 for ( var i in theArray ) { 31 32 for ( var j in theArray[ i ] ) 33 document.write( theArray[ i ][ j ] + " " ); 34 35 document.writeln( "<br />" ); 36 } 37 38 document.writeln( "</tt>" ); 39 } 40 // --> 41 </script> 42 43 </head><body onload = "start()"></body> 44 </html> Referencing the multidimensional array theArray.