Pertemuan 4 Javascript - Array dan DOM API

1.ARRAY

Sebelum kita membahas Array, kita bahas dulu apa itu struktur data?
Struktur data merupakan cara-cara atau metode yang digunakan untuk menyimpan data di dalam memori komputer.
Salah satu struktur data yang sering digunakan dalam pemrograman adalah Array.
Array merupakan struktur data yang digunakan untuk menyimpan sekumpulan data dalam satu tempat.
Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya.

Indeks array selalu dimulai dari angka nol (0).
Pada teori struktur data…
Ukuran array akan bergantung dari banyaknya data yang ditampung di dalamnya.

A. Membuat Array

Pada javascript, array dapat kita buat dengan tanda kurung siku ([...]).
Contoh:

var products = [];

Maka variabel products akan berisi sebuah array kosong.
Kita bisa mengisi data ke dalam array, lalu setiap data dipisah dengan tanda koma (,).
Contoh:

var products = ["Flashdisk", "SDD", "Monitor"];

karena javascript merupakan bahasa pemrograman yang dynamic typing…
maka kita bisa menyimpan dan mencampur apapun di dalam array.
Contoh:

var myData = [18, 8.6, true, 'False','A',"Jhody"];

B. Mengambil Data Array

Seperti yang sudah kita kethaui…
Array akan menyimpan sekumpulan data dan memberinya nomer indeks agar mudah diakses.
Indeks array selalu dimauli dari nol 0.

Misalkan kita punya array seperti ini:

var makanan = ["Nasi Goreng", "Bakso", "Soto"];

Bagaimana cara kita mengambil nilai "Mie Ayam"?
Jawabannya seperti ini:

makanan[1] //-> "Bakso"

Kenapa bukan 2?
Ingat: indeks array selalu dimulai dari nol.

untuk lebih jelasnya kita bisa melihat contoh dibawah ini

c. Mencetak isi Array

Perhatikan kode/script di bawah ini

Kita bisa menggunakan perulangan dengan method forEach()

D. Menambahkan Data Ke Dalam Array

Ada dua cara yang bisa dilakukan untuk menambah data kedalam array:

1. Mengisi menggunakan indeks
2. Mengisi menggunakan method push()

1. Mengisi Menggunakan Indeks

Tapi kekurangan dari cara ini ialah :

Kita harus tahu jumlah data atau panjang arraynya berulah kita bisa menambahkan.

Apabila kita memasukan nomer indeks sembarangan,maka nanti yang akan terjadi adalah data yang ada dalam indeks tersebut akan ditindih.

2. Mengisi Menggunakan Method Push()

Kita tidak perlu tahu berapa panjang arraynya karena method push() akan menambahkan data kedalam array dari ekor atau belakang.

Kita juga bisa menambahkan beberapa data sekaligus dengan cara seperti ini:
```
products.push("Alarm", "Gemobok", "Paku");
```

E. Menghapus Data Di Array

Sama Seperti menambahkan data ke array menghapus data juga memiliki dua cara :

Menggunakan Delete
Menggunakan Method pop().

Contoh:
delete buah[2]

Kita dapat menghapus data dengan nomer indeks tertentu delete.
sedangkan pop() akan menghapus dari belakag.
Kekurangan dari delete, ia akan menciptakan ruang kosong di dalam array

1. Menghapus Data Dari Depan

Kita juga dapat menghapus data dari depan dengan menggunakan method shift().

Maka data yang terhapus adalah "Mawar".

2. Menghapus Data Pada Indeks Tertentu

Apabila kita ingin menghapus data pada inteks tertentu, maka fungsi atau method yang digunakan adalah splice().
Fungsi ini memiliki dua parameter yang harus diberikan:

array.splice(<indeks>, <total>);

Keterangan:

<indeks> adalah indeks dari data di dalam array yang akan dihapus;
<total> adalah jumlah data yang akan dihapus dari indeks tersebut.

3. Mengubah Isi Array

Untuk mengubah isi array, kita bisa mengisi ulang seperti ini:

var bahasa = ["Javascript", "Kotlin", "Java", "PHP", "Python"];
bahasa[1] = "C++";

Maka "Kotlin" akan diganti dengan "C++".

Percobaan pada console:

F. Method-Method Array

1.Method Filter()

Method filter() berfungsi untuk menyaring data dari array.

Parameter yang harus diberikan pada method filter() sama seperti method forEach(), yaitu: sebuah fungsi callback.

Pada contoh di atas, kita memberikan arrow function sebagai fungsi callback yang akan melakukan penyaringan terhadap array.

Sebenarnya kita bisa buat lebih sederhana lagi seperti ini:

     const filteredArray = angka.filter(item => item % 2 === 0);

2.Method Includes()

Method ini berfungsi untuk mengecek apakah sebuah data ada di dalam array atau tidak. Biasanya digunakan untuk melakukan pencarian untuk memastikan data sudah ada di dalam array.

3.Method Sort()

Method sort() berfungsi untuk mengurutkan data pada array.

2. DOM API

DOM merupakan singkatan dari Document Object Model.
Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek.
Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Inilah yang disebut API (Application Programming Interface).
DOM tidak hanya untuk dokumen HTML saja. DOM juga bisa digunakan untuk dokumen XML dan SVG.dan DOM juga tidak hanya ada di Javascript saja, DOM juga ada pada bahasa pemrograman lain.

A. Bagaimana Menggunakan DOM

- Seperti yang kita sudah katahui, DOM adalah sebuah objek untuk memodelkan dokumen HTML.
- Objek DOM di javascript bernama document. Objek ini berisi segala hal yang kita butuhkan untuk memanipulasi HTML.
- Jika kita coba ketik document pada console Javascript, maka yang akan tampil adalah kode HTML.
- Di dalam objek document, terdapat fungsi-fungsi dan atribut yang bisa kita gunakan untuk memanipulasi dokumen HTML.
- Sebagai contoh fungsi documen.write().
- Fungsi ini digunakan untuk menulis sesuatu ke dokumen HTML.

B. Mengkakses Elemen Tertentu Dengan Dom

Objek document adalah model dari dokumen HTML.
Apabila kita ingin mengakses elemen yang spesifik, terdapat beberapa fungsi yang bisa digunakan:
- getElementById() fungsi untuk memilih elemen berdasarkan atribut.
- id.getElementByName() fungsi untuk memilih elemen berdasarkan atribut name.
- getElementByClassName() fungsi untuk memilih elemen berdasarkan atribut class.
- getElementByTagName() fungsi untuk memilih elemen berdasarkan nama tag.
- getElementByTagNameNS() fungsi untuk memilih elemen berdasarkan nama tag.
- querySelector() fungsi untuk memilih elemen berdasarkan query.
- querySelectorAll() fungsi untuk memilih elemen berdasarkan query.
- dan lain-lain.
Fungsi-fungsi di atas cukup sering digunakan untuk mengakses elemen tertentu.

Pada contoh di atas, kita memilih elemen dengan fungsi document.getElementById(). Lalu membuatkan objek untuk elemen tersebut. Setelah itu, kita bisa lakukan apapun yang diinginkan seperti mengubah teks dan style CSS.
Lalu pertanyaanya:
Bagaimana kalau ada lebih dari satu elemen yang dipilih?
Misalkan kita memilih elemen berdasarkan nama tag atau atribut class.
Jawabannya:
Eelemn yang akan terpilih akan menjadi sebuah array. Karena kita memilih sekumpulan elemen.
Array tersebut akan berisi objek DOM dari elemen-elemen yang terpilih.

Variabel paragraf akan berisi sebuah array yang di dalamnya terdapat tiga buah objek DOM dari paragraf.
Mari kita coba bereksperimen dengan mengubah warna teks dari paragraf pertama.
Paragraf pertama akan barada pada posisi indeks ke-0 di dalam array.
Coba ketik perintah berikut di dalam console Javascript:
```
paragraf[0].style.color = "red"
```
Maka hasilnya, paragraf pertama akan berwarna merah.

Mari kita coba buat sebuah animasi warna.

C.Membuat Elemen Dengan Dom Api

DOM juga menyediakan fungsi untuk membuat elemen HTML.
Salah satunya adalah fungsi createElement().
Contoh:
```
document.createElement('p');
```
Maka, akan tercipta elemen <p> baru. Namun tidak akan ditampilkan ke dalam halaman web.
Mengapa tidak ditampilakn?
Karena kita belum menambahkannya ke dalam body dokumen.
Cara menambahkannya ke body dokumen, kita bisa gunakan fungsi append().