Your SlideShare is downloading. ×
0
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Tugas pw [10]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tugas pw [10]

296

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
296
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.  
  • 2. <ul><li>Pengertian Arrays JavaScript  Array Satu dimensi  Array Multi dimensi  Pendeklarasian dan Pengalokasian Array  Contoh Implementasi  Memparsing Array ke dalam Function  Reference &amp; Reference parameter  Searching (Binary Search) </li></ul>
  • 3. <ul><li>Array dalam JavaScript sangat berguna untuk menyimpan dan memanipulasi informasi yang telah kita coding langsung ke dalam naskah, atau informasi yang dikumpulkan dari browser. </li></ul><ul><li>Array adalah salah satu dari sejumlah objek yang dibangun langsung ke JavaScript. Kita dapat menganggapnya sebagai variabel yang berisi beberapa nilai. Array-array tersebut dapat menyimpan string atau nilai numerik dan tidak memiliki batas maksimum. </li></ul><ul><li>Nilai array-array tersebut tidak selalu tetap, yang berarti bahwa nilai-nilai tersebut tidak tersimpan ketika halaman yang berisi script telah ditutup atau di-reload. </li></ul>
  • 4. <ul><li>Contoh array satu dimensi ::: beserta Operasinya </li></ul><ul><li>myArray = new Array(15,89,4,61,5) </li></ul><ul><li>Berarti kita membuat sebuah array yang disebut myArray dengan lima bilangan bulat, yang berisi 15, 89, 4, 61 dan 5. </li></ul><ul><li>document.write(myArray[1]) </li></ul><ul><li>Data ini bisa dimanipulasi.Dan perintah diatas mencetak hasil pada </li></ul><ul><li>halaman </li></ul><ul><li>var mySum = myArray[1] * myArray[2] </li></ul><ul><li>Perintah perkalian diatas akan mengalikan bilangan 15 dengan bilangan 89. </li></ul><ul><li>document.write(mySum) </li></ul><ul><li>Yang menampilkan hasil 356 dari fungsi perkalian diatas. </li></ul>
  • 5. <ul><li>Sebuah sifat penting dari array objek adalah panjang properti; misal panjang dari contoh array di atas adalah lima. Setiap nilai dalam array dapat diakses menggunakan indeks dalam tanda kurung siku setelah nama array. </li></ul><ul><li>misalnya: myArray [2]; </li></ul><ul><li>Sangat penting untuk diingat bahwa setiap indeks array selalu dimulai dengan 0 mewakili item pertama dalam array, karena itu jika panjang suatu array adalah 5, maka indeks tertinggi adalah empat. </li></ul>
  • 6. <ul><li>Dengan cara yang sama seperti array yang berisi bilangan bulat atau string sebagai nilai-nilainya, maka array multidimensi berisi array-array sebagai nilai-nilainya. </li></ul><ul><li>Syntax untuk sebuah array multidimensi adalah sebagai berikut: myArray = new Array ([2,3,4], [5,5,9], [8,6,1]) </li></ul><ul><li>Untuk menampilkan item pertama dari array pertama (yang memiliki indeks 0,0), kita akan perlu menggunakan: document.write (myArray [0] [0]) </li></ul><ul><li>Ini dikenal sebagai array dua dimensi, meskipun ada tiga array masing-masing dengan tiga nilai, sebagai indeks tertinggi (2,2). </li></ul>
  • 7. Contoh program : 1 &lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD HTML 4.0 Transitional//EN&amp;quot; &gt; 2 &lt;HTML&gt; 3 &lt;!-- Fig. 12.15: InitArray.html --&gt; 4 5 &lt;HEAD&gt; 6 &lt;TITLE&gt; Initializing Multidimensional Arrays &lt;/TITLE&gt; 7 8 &lt;SCRIPT LANGUAGE = &amp;quot;JavaScript&amp;quot; &gt; 9 function start() 10 { 11 var array1 = [ [ 1, 2, 3 ], // first row 12 [ 4, 5, 6 ] ]; // second row 13 var array2 = [ [ 1, 2 ], // first row 14 [ 3 ], // second row 15 [ 4, 5, 6 ] ]; // third row 16 17 outputArray( &amp;quot;Values in array1 by row&amp;quot;, array1 ); 18 outputArray( &amp;quot;Values in array2 by row&amp;quot;, array2 ); 19 } 20
  • 8. 31 } 32 33 document.writeln( &amp;quot;&lt;/TT&gt;&amp;quot; ); 34 } 35 &lt;/SCRIPT&gt; 36 37 &lt;/HEAD&gt;&lt;BODY ONLOAD = &amp;quot;start()&amp;quot; &gt;&lt;/BODY&gt; 38 &lt;/HTML&gt; 21 function outputArray( header, theArray ) 22 { 23 document.writeln( &amp;quot;&lt;H2&gt;&amp;quot; + header + &amp;quot;&lt;/H2&gt;&lt;TT&gt;&amp;quot; ); 24 25 for ( var i in theArray ) { 26 27 for ( var j in theArray[ i ] ) 28 document.write( theArray[ i ][ j ] + &amp;quot; &amp;quot; ); 29 30 document.writeln( &amp;quot;&lt;BR&gt;&amp;quot; );
  • 9. Script output
  • 10. Pendeklarasian &amp; Pengalokasian Array <ul><li>Operator new( Dynamic memory allocation operator ) creates an object as the program executes </li></ul><ul><ul><li>Obtains enough memory to store an object of the type specified </li></ul></ul><ul><li>Process of creating objects also known as </li></ul><ul><ul><li>Creating an instance or </li></ul></ul><ul><ul><li>Instantiating an object </li></ul></ul><ul><ul><li>To allocate 12 elements for integer array c </li></ul></ul><ul><ul><li>var c = new Array( 12 ); </li></ul></ul><ul><ul><li>This can also be performed in 2 steps: </li></ul></ul><ul><ul><ul><li>var c; </li></ul></ul></ul><ul><ul><ul><li>c = new Array( 12 ); </li></ul></ul></ul><ul><ul><li>When arrays allocated, elements not initialized </li></ul></ul><ul><li>Reserving memory </li></ul><ul><ul><li>Use a single declaration: </li></ul></ul><ul><ul><li>var b = new Array( 100 ), x = new Array( 27 ); </li></ul></ul><ul><ul><li>Reserves 100 elements for array b , 27 elements for array x </li></ul></ul>
  • 11. <ul><li>&lt;?xml version = &amp;quot;1.0&amp;quot;?&gt; </li></ul><ul><li>&lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; </li></ul><ul><li>&amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&gt; </li></ul><ul><li>&lt;!-- Fig. 11.3: InitArray.html --&gt; </li></ul><ul><li>&lt;!-- Initializing an Array --&gt; </li></ul><ul><li>&lt;html xmlns = &amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&gt; </li></ul><ul><li>&lt;head&gt; </li></ul><ul><li>&lt;title&gt;Initializing an Array&lt;/title&gt; </li></ul><ul><li>&lt;script type = &amp;quot;text/javascript&amp;quot;&gt; </li></ul><ul><li>&lt;!— </li></ul><ul><li>// this function is called when the &lt;body&gt; element&apos;s </li></ul><ul><li>// onload event occurs </li></ul><ul><li>function initializeArrays() </li></ul><ul><li>{ </li></ul><ul><li>var n1 = new Array( 5 ); // allocate 5-element Array </li></ul><ul><li>var n2 = new Array(); // allocate empty Array </li></ul><ul><li>// assign values to each element of Array n1 </li></ul>
  • 12. <ul><li>for ( var i = 0; i &lt; n1.length; ++i ) </li></ul><ul><li>n1[ i ] = i; </li></ul><ul><li>/ / create and initialize five-elements in Array n2 </li></ul><ul><li>for ( i = 0; i &lt; 5; ++i ) </li></ul><ul><li>n2[ i ] = i; </li></ul><ul><li>outputArray( &amp;quot;Array n1 contains&amp;quot;, n1 ); </li></ul><ul><li>outputArray( &amp;quot;Array n2 contains&amp;quot;, n2 ); </li></ul><ul><li>} </li></ul><ul><li>// output &amp;quot;header&amp;quot; followed by a two-column table </li></ul><ul><li>// containing subscripts and elements of &amp;quot;theArray&amp;quot; </li></ul><ul><li>function outputArray( header, theArray ) </li></ul><ul><li>{ </li></ul><ul><li>document.writeln( &amp;quot;&lt;h2&gt;&amp;quot; + header + &amp;quot;&lt;/h2&gt;&amp;quot; ); </li></ul><ul><li>document.writeln( &amp;quot;&lt;table border = &amp;quot;1&amp;quot; width =&amp;quot; + </li></ul><ul><li>&amp;quot;&amp;quot;100%&amp;quot;&gt;&amp;quot; ); </li></ul><ul><li>document.writeln( &amp;quot;&lt;thead&gt;&lt;th width = &amp;quot;100&amp;quot;&amp;quot; + &amp;quot;align = &amp;quot;left&amp;quot;&gt;Subscript&lt;/th&gt;&amp;quot; + &amp;quot;&lt;th align = &amp;quot;left&amp;quot;&gt;Value&lt;/th&gt;&lt;/thead&gt;&lt;tbody&gt;&amp;quot; ); </li></ul>
  • 13. &nbsp;
  • 14. Memparsing Array ke dalam Function <ul><li>To pass an array to a function </li></ul><ul><ul><li>Specify the name of the array without brackets as a parameter </li></ul></ul><ul><ul><li>You do not need to separately pass the size of the array </li></ul></ul><ul><li>Individual numeric and boolean array elements are </li></ul><ul><ul><li>Passed exactly as simple numeric and boolean variables: call-by-value </li></ul></ul><ul><ul><li>Simple single pieces of data are called scalars or scalar qualities </li></ul></ul><ul><ul><li>Are passed using subscripted name of the array element </li></ul></ul><ul><li>arrayName.join( x ); </li></ul><ul><ul><li>Creates string containing all elements in arrayName </li></ul></ul><ul><ul><li>Takes argument – string containing separator – used to separate elements of the array in the string when returned </li></ul></ul><ul><ul><li>If argument left empty – empty string used as separator </li></ul></ul>
  • 15. 1 &lt;!DOCTYPE HTML PUBLIC &amp;quot;-//W3C//DTD HTML 4.0 Transitional//EN&amp;quot; &gt; 2 &lt;HTML&gt; 3 &lt;!-- Fig. 12.9: PassArray.html --&gt; 4 5 &lt;HEAD&gt; 6 &lt;TITLE&gt; Passing Arrays and Individual Array 7 Elements to Functions &lt;/TITLE&gt; 8 9 &lt;SCRIPT LANGUAGE = &amp;quot;JavaScript&amp;quot; &gt; 10 function start() 11 { 12 var a = [ 1, 2, 3, 4, 5 ]; 13 14 document.writeln( &amp;quot;&lt;H2&gt;Effects of passing entire &amp;quot; + 15 &amp;quot;array call-by-reference&lt;/H2&gt;&amp;quot; ); 16 outputArray( 17 &amp;quot;The values of the original array are: &amp;quot;, a ); 18 19 modifyArray( a ); // array a passed call-by-reference 20 21 outputArray( 22 &amp;quot;The values of the modified array are: &amp;quot;, a ); 23 24 document.writeln( &amp;quot;&lt;H2&gt;Effects of passing array &amp;quot; + 25 &amp;quot;element call-by-value&lt;/H2&gt;&amp;quot; + 26 &amp;quot;a[3] before modifyElement: &amp;quot; + a[ 3 ] ); 27 28 modifyElement( a[ 3 ] ); 29 30 document.writeln( 31 &amp;quot;&lt;BR&gt;a[3] after modifyElement: &amp;quot; + a[ 3 ] ); 32 }
  • 16. 33 34 // outputs &amp;quot;header&amp;quot; followed by the contents of &amp;quot;theArray&amp;quot; 35 function outputArray( header, theArray ) 36 { 37 document.writeln( 38 header + theArray.join( &amp;quot; &amp;quot; ) + &amp;quot;&lt;BR&gt;&amp;quot; ); 39 } 40 41 // function that modifies the elements of an array 42 function modifyArray( theArray ) 43 { 44 for ( var j in theArray ) 45 theArray[ j ] *= 2; 46 } 47 48 // function that attempts to modify the value passed 49 function modifyElement( e ) 50 { 51 e *= 2; 52 document.writeln( &amp;quot;&lt;BR&gt;value in modifyElement: &amp;quot; + e ); 53 } 54 &lt;/SCRIPT&gt; 55 56 &lt;/HEAD&gt;&lt;BODY ONLOAD = &amp;quot;start()&amp;quot; &gt;&lt;/BODY&gt; 57 &lt;/HTML&gt;
  • 17. Script output
  • 18. Reference &amp; Reference parameter <ul><li>Two ways to pass arguments to functions </li></ul><ul><ul><li>Call-by-value / pass-by-value </li></ul></ul><ul><ul><li>When used to pass argument, copy of value is made and passed to called function </li></ul></ul><ul><ul><li>Takes up more space, uses more power, but more secure and eliminates many potential problems </li></ul></ul><ul><ul><li>Used in JavaScript for numbers or boolean values </li></ul></ul><ul><ul><li>Call-by-reference / pass-by-reference </li></ul></ul><ul><ul><li>When used to pass argument, location in memory / address of argument is passed to called function </li></ul></ul><ul><ul><li>Takes up less space, uses less power, but less secure and allows many potential problems to occur </li></ul></ul>
  • 19. Binary Search <ul><li>Teknik ini hanya dapat dilakukan pada list yang telah terurut dan berada pada </li></ul><ul><li>struktur array. </li></ul><ul><li>Algoritma </li></ul><ul><li>N: Banyaknya record dalam list array. </li></ul><ul><li>1. Kiri = 0 dan Kanan = N-1 </li></ul><ul><li>2. Tengah = (int)(Kiri + Kanan) / 2 </li></ul><ul><li>3. Bila k[Tengah] = Kunci, Maka Indeks = Tengah, </li></ul><ul><li>Selesai </li></ul><ul><li>4. Bila k[Tengah] &lt; Kunci, Kanan = Tengah - 1 </li></ul><ul><li>5. Bila k[Tengah] &gt; Kunci, Kiri = Tengah + 1 </li></ul><ul><li>6. Bila Kiri ≤ Kanan, dan k[Tengah] &lt;&gt; Kunci, Ulangi mulai </li></ul><ul><li>dari 2. </li></ul><ul><li>7. Bila k[Tengah] &lt;&gt; Kunci, Indeks = -1 </li></ul><ul><li>8. Selesai </li></ul>
  • 20. Ilustrasi
  • 21. 1 &lt;!DOCTYPE HTML PUBLIC &amp;quot;-//W3C//DTD HTML 4.0 Transitional//EN&amp;quot; &gt; 2 &lt;HTML&gt; 3 &lt;!-- Fig. 12.13: BinarySearch.html --&gt; 4 5 &lt;HEAD&gt; 6 &lt;TITLE&gt; Binary Search of an Array &lt;/TITLE&gt; 7 8 &lt;SCRIPT LANGUAGE = &amp;quot;JavaScript&amp;quot; &gt; 9 var a = new Array( 15 ); 10 11 for ( var i = 0; i &lt; a.length; ++i ) 12 a[ i ] = 2 * i; 13 14 // function called when &amp;quot;Search&amp;quot; button is pressed 15 function buttonPressed() 16 { 17 var searchKey = searchForm.inputVal.value; 18 19 searchForm.result.value = 20 &amp;quot;Portions of array searched &amp;quot;; 21 22 // Array a is passed to binarySearch even though it 23 // is a global variable. This is done because normally 24 // an array is passed to a method for searching. 25 var element = binarySearch( a, parseInt( searchKey ) ); 26 27 if ( element != -1 ) 28 searchForm.result.value += 29 &amp;quot; Found value in element &amp;quot; + element;
  • 22. 31 searchForm.result.value += &amp;quot; Value not found&amp;quot;; 32 } 33 34 // Binary search 35 function binarySearch( theArray, key ) 36 { 37 var low = 0; // low subscript 38 var high = theArray.length - 1; // high subscript 39 var middle; // middle subscript 40 41 while ( low &lt;= high ) { 42 middle = ( low + high ) / 2; 43 44 // The following line is used to display the part 45 // of theArray currently being manipulated during 46 // each iteration of the binary search loop. 47 buildOutput( theArray, low, middle, high ); 48 49 if ( key == theArray[ middle ] ) // match 50 return middle; 51 else if ( key &lt; theArray[ middle ] ) 52 high = middle - 1; // search low end of array 53 else 54 low = middle + 1; // search high end of array 55 } 56 57 return -1; // searchKey not found 58 } 59 30 else
  • 23. 61 // part of the array being processed. 62 function buildOutput( theArray, low, mid, high ) 63 { 64 for ( var i = 0; i &lt; theArray.length; i++ ) { 65 if ( i &lt; low || i &gt; high ) 66 searchForm.result.value += &amp;quot; &amp;quot;; 67 else if ( i == mid ) // mark middle element in output 68 searchForm.result.value += a[ i ] + 69 ( theArray[ i ] &lt; 10 ? &amp;quot;* &amp;quot; : &amp;quot;* &amp;quot; ); 70 else 71 searchForm.result.value += a[ i ] + 72 ( theArray[ i ] &lt; 10 ? &amp;quot; &amp;quot; : &amp;quot; &amp;quot; ); 73 } 74 75 searchForm.result.value += &amp;quot; &amp;quot;; 76 } 77 &lt;/SCRIPT&gt; 78 79 &lt;/HEAD&gt; 80 81 &lt;BODY&gt; 82 &lt;FORM NAME = &amp;quot;searchForm&amp;quot; &gt; 83 &lt;P&gt; Enter integer search key &lt;BR&gt; 84 &lt;INPUT NAME = &amp;quot;inputVal&amp;quot; TYPE = &amp;quot;text&amp;quot; &gt; 85 &lt;INPUT NAME = &amp;quot;search&amp;quot; TYPE = &amp;quot;button&amp;quot; VALUE = &amp;quot;Search&amp;quot; 86 ONCLICK = &amp;quot;buttonPressed()&amp;quot; &gt;&lt;BR&gt;&lt;/P&gt; 87 &lt;P&gt; Result &lt;BR&gt;&lt;TEXTAREA NAME = &amp;quot;result&amp;quot; ROWS = &amp;quot;7&amp;quot; COLS = &amp;quot;60&amp;quot; &gt; 88 &lt;/TEXTAREA&gt;&lt;/P&gt; 89 &lt;/FORM&gt; 90 &lt;/BODY&gt; 91 &lt;/HTML&gt; 60 // Build one row of output showing the current

×