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

PPT
ajava arrays topic brief explanation data
PPT
JavaScript Arrays
PPTX
Arrays in Java with example and types of array.pptx
DOCX
Chapter 4
PDF
Getting StartedCreate a class called Lab8. Use the same setup for .pdf
PPTX
arrays-120712074248-phpapp01
PPTX
6_Array.pptx
PPTX
arrays in c# including Classes handling arrays
ajava arrays topic brief explanation data
JavaScript Arrays
Arrays in Java with example and types of array.pptx
Chapter 4
Getting StartedCreate a class called Lab8. Use the same setup for .pdf
arrays-120712074248-phpapp01
6_Array.pptx
arrays in c# including Classes handling arrays

Similar to Lecture no 9.ppt operating system semester four (20)

PPTX
Unit-2.Arrays and Strings.pptx.................
PPTX
JavaScript Arrays and its types .pptx
PPTX
Arrays in C++
PPT
Array 31.8.2020 updated
PPT
Topic20Arrays_Part2.ppt
PDF
Java script objects 1
 
PPT
Fp201 unit4
PPT
Basics of Data structure using C describing basics concepts
PPT
Arrays in c programing. practicals and .ppt
PPTX
07+08slide.pptx
PPT
Chapter 6 arrays part-1
PPTX
C_Arrays(3)bzxhgvxgxg.xhjvxugvxuxuxuxvxugvx.pptx
PPTX
Java script arrays
PPTX
Java script arrays
PPT
Queue Data Structure
PPT
Queue Data Structure
PPTX
Java script advance-auroskills (2)
PDF
Class notes(week 4) on arrays and strings
PDF
02 arrays
PPT
9780538745840 ppt ch06
Unit-2.Arrays and Strings.pptx.................
JavaScript Arrays and its types .pptx
Arrays in C++
Array 31.8.2020 updated
Topic20Arrays_Part2.ppt
Java script objects 1
 
Fp201 unit4
Basics of Data structure using C describing basics concepts
Arrays in c programing. practicals and .ppt
07+08slide.pptx
Chapter 6 arrays part-1
C_Arrays(3)bzxhgvxgxg.xhjvxugvxuxuxuxvxugvx.pptx
Java script arrays
Java script arrays
Queue Data Structure
Queue Data Structure
Java script advance-auroskills (2)
Class notes(week 4) on arrays and strings
02 arrays
9780538745840 ppt ch06
Ad

More from VaibhavBhagwat18 (8)

PPTX
Digital Techniques and Microporcssoor.pptx
PPT
software engineering chapte r one Btech
PPTX
Railway Management SystemIN DATABASE System
PPT
computer Networks Transport Layer .ppt
PPTX
Weather Application using Python using tkinter
PPTX
EEM CH 5.pptx
PPTX
OOP GRP2.pptx
PPTX
DCO MP.pptx
Digital Techniques and Microporcssoor.pptx
software engineering chapte r one Btech
Railway Management SystemIN DATABASE System
computer Networks Transport Layer .ppt
Weather Application using Python using tkinter
EEM CH 5.pptx
OOP GRP2.pptx
DCO MP.pptx
Ad

Recently uploaded (20)

PPTX
CYBER-CRIMES AND SECURITY A guide to understanding
PDF
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
PPTX
bas. eng. economics group 4 presentation 1.pptx
DOCX
573137875-Attendance-Management-System-original
PPTX
Welding lecture in detail for understanding
PDF
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
PPTX
Foundation to blockchain - A guide to Blockchain Tech
PPTX
KTU 2019 -S7-MCN 401 MODULE 2-VINAY.pptx
PPTX
Strings in CPP - Strings in C++ are sequences of characters used to store and...
PPTX
OOP with Java - Java Introduction (Basics)
PDF
Operating System & Kernel Study Guide-1 - converted.pdf
PPTX
Infosys Presentation by1.Riyan Bagwan 2.Samadhan Naiknavare 3.Gaurav Shinde 4...
PDF
PPT on Performance Review to get promotions
PPTX
Lesson 3_Tessellation.pptx finite Mathematics
PDF
Embodied AI: Ushering in the Next Era of Intelligent Systems
PDF
July 2025 - Top 10 Read Articles in International Journal of Software Enginee...
PDF
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
PDF
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
PPTX
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
PDF
Model Code of Practice - Construction Work - 21102022 .pdf
CYBER-CRIMES AND SECURITY A guide to understanding
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
bas. eng. economics group 4 presentation 1.pptx
573137875-Attendance-Management-System-original
Welding lecture in detail for understanding
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
Foundation to blockchain - A guide to Blockchain Tech
KTU 2019 -S7-MCN 401 MODULE 2-VINAY.pptx
Strings in CPP - Strings in C++ are sequences of characters used to store and...
OOP with Java - Java Introduction (Basics)
Operating System & Kernel Study Guide-1 - converted.pdf
Infosys Presentation by1.Riyan Bagwan 2.Samadhan Naiknavare 3.Gaurav Shinde 4...
PPT on Performance Review to get promotions
Lesson 3_Tessellation.pptx finite Mathematics
Embodied AI: Ushering in the Next Era of Intelligent Systems
July 2025 - Top 10 Read Articles in International Journal of Software Enginee...
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
Model Code of Practice - Construction Work - 21102022 .pdf

Lecture no 9.ppt operating system semester four

  • 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.