ARRAY
Apa itu 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.
1. Cara Mengambil Data dari 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:
2. Mencetak isi Array dengan Perulangan
Bagaimana kalau nanti isi array-nya ada100?Tentu kita tidak akan mau menulis
100
baris kode untuk mencetak array.Solusinya: Gunakan perulangan.
Mari kita lihat contohnya:
Ada 2 For dan Forech
1.MENGGUNAKAN FOR
Pada contoh di atas, kita menggunakan properti
length untuk
mengambil panjang array.Kita memiliki
4 data di dalam array products, maka properti
length akan bernilai 4.Lalu kita gunakan properti ini untuk membatasi jumlah perulangan di dalam for.
2. MENGGUNAKAN FOREACH ()
3. Cara Menambahkan Data ke Dalam Array
Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array:- Mengisi menggunakan indeks;
- Mengisi menggunakan method
push().
Misal kita punya array dengan isi sebagai berikut:
4. Cara Menghapus Data Array
#Menghapus Data dari Depan
Kita juga dapat menghapus data dari depan dengan menggunakan methodshift().Contoh:
#Menghapus Data pada Indeks Tertentu
Apabila kita ingin menghapus data pada inteks tertentu, maka fungsi atau method yang digunakan adalahsplice().
5. Mengubah isi Array
Untuk mengubah isi array, kita bisa mengisi ulang seperti ini:
6. Method-mothod Array
Selain method-method atau fungsi yang sudah kita coba di atas, terdapat beberapa method dalam Array yang perlu kita ketahui.
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.Contoh:
OUTPUT:
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.Contoh:
3. Method sort()
Method sort() berfungsi untuk mengurutkan data pada array.Contoh:
DOM API
1. Apa itu 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).
2. Bagaimana Cara 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.
Contoh:
3. Mengkases Elemen Tertentu dengan DOM
Objek
document adalah model dari dokumen HTML. Objek ini berisi kumpulan fungsi dan atribut berupa objek dari elemen HTML.
Mari kita coba mengakses objek
<head> dan <body>.
Coba ketik kode berikut pada Console:
------------------------------------------------------------------
// mengakses objek headdocument.head;
// mengakses objek headdocument.head;
// mengakses objek bodydocument.body;
// melihat panakang judul pada objek titledocument.title.length------------------------------------------------------------------
OUTPUT:
Apabila kita ingin mengakses elemen yang spesifik, terdapat beberapa fungsi yang bisa digunakan:
getElementById()fungsi untuk memilih elemen berdasarkan atributid.getElementByName()fungsi untuk memilih elemen berdasarkan atributname.getElementByClassName()fungsi untuk memilih elemen berdasarkan atributclass.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.
Contoh:
OUTPUT
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.
Contohnya:
paragraf.
Lalu kita mencoba memilih ketiga paragraf tersbut melalui javascript dengan method atau fungsi
getElementByClassName().
Kemudian, hasilnya kita tampilkan ke dalam console Javascript.
Maka hasilnya:
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.
Ubahlah kode javascript di atas menjadi seperti ini:
4. Membuat Elemen dengan DOM API
DOM juga menyediakan fungsi untuk membuat elemen HTML.Salah satunya adalah fungsi
createElement().Contoh:
5. Menghapus Elemen dengan DOM API
Kalau tadi kita menggunakan fungsiappend() untuk menambahkan
elemen, maka untuk menghapusnya kita menggunakan fungsi remove().Berikut ini contohnya:
HASIL
6. Contoh Program yang Memanfaatkan DOM
Kita sudah tahu cara mengakses elemen dengan DOM dan kita juga sudah paham cara menambahkan dan menghapus elemen.Biar pemahamannya semakin mantap, coba contoh program berikut:
Program ini berfungsi untuk mengubah warna latar belakang dari elemen
<body> dan mengubah warna teksnya.Kita menggunakan event
"change" pada elemen bgColor
dan txtColor. Artinya nanti setiap nilai dari elemen ini
berubah, kode di dalamnya akan dieksekusi.OUTPUTNYA:
TERIMA KASIH :):)
Tidak ada komentar:
Posting Komentar