Pertemuan 5- Fungsi

FUNGSI

Apa itu Fungsi?

Fungsi adalah sub-program yang bisa digunakan kembali baik di dalam program itu sendiri, maupun di program yang lain.

Fungsi di dalam Javascript adalah sebuah objek. Karena memiliki properti dan juga method.

4 Cara Membuat Fungsi di Javascript

Ada 4 cara yang bisa kita lakukan untuk membaut fungsi di Javascript:

1. Menggunakan cara biasa;
2. Menggunakan ekspresi;
3. Menggunakan tanda panah (=>);
4. dan menggunakan Constructor

Mari kita coba semuanya…

1. 1. Membuat Fungsi dengan Cara Biasa
   
   Cara ini paling sering digunakan, terutama buat yang baru belajar Javascript.
   
   

   
    2. Membuat Fungsi dengan Ekspresi
   
   

   Cara membuat fungsi dengan ekspresi:

   

   Kita menggunakan variabel, lalu diisi dengan fungsi. Fungsi ini sebenarnya adalah fungsi anonim (anonymous function) atau fungsi tanpa nama.

   
   

   
   

   3. Membuat Fungsi dengan Tanda Panah

   Cara ini sering digunakan di kode Javascript masa kini, karena lebih sederhana. Akan tetapi sulit dipahami bagi pemula. Fungsi ini mulai muncul pada standar ES6.

   
   

   Contoh:

   

   var namaFungsi = () => console.log("Hello World!");

   Sebenarnya hampir sama dengan yang menggunakan ekspresi. Bedanya, kita menggunakan tanda panah (=>) sebagai ganti function.

   
   

   Pembuatan fungsi dengan cara ini disebut arrow function.

   
   

   
   

   4. Membuat Fungsi dengan Kostruktor

   Cara ini sebenarnya tidak direkomendasikan oleh Developer Mozilla, karena terlihat kurang bagus. Soalnya body fungsinya dibuat dalam bentuk string yang dapat mempengaruhi kinerja engine javascript.

   
   

   Contoh:

   

   Cara Memanggil/Eksekusi Fungsi

   Setelah mengetahui cara membuat fungsi, lalu bagaimana cara memanggilnya?

   
   

   Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini:

   
   

   namaFungsi();

   Contoh:

   
   

   // membuat fungsi

   function sayHello(){

       console.log("Hello World!");

   }

   
   

   // memanggil fungsi

   sayHello() // maka akan menghasilkan -> Hello World!

   Selain dengan cara di atas, kita juga bisa memanggil fungsi melalui atribut event pada HTML.

   1. Ketik coding berikut di Sublime Text

   

   2. Tekan tulisan "Klik aku!"
   3. Maka outpyt-nya

   

   Fungsi dengan Parameter

   Parameter adalah variabel yang menyimpan nilai untuk diproses di dalam fungsi.
   contoh
   
   
   

   output-nya

   

   Pada contoh di atas, a dan b adalah sebuah parameter.
   
   Lalu cara memanggil fungsi yang memiliki parameter adalah seperti ini:
   
   kali(3, 2); // -> Hasil kali a*b = 6
   Kita memberikan 3 untuk parameter a dan 2 untuk parameter b.
   
   

   Fungsi yang Mengembalikan Nilai

   Agar hasil pengolahan nilai di dalam fungsi dapat digunakan untuk proses berikutnya, maka fungsi harus mengembalikan nilai.
   
   Pengembalian nilai pada fungsi menggunakan kata kunci return kemudian diikuti dengan nilai atau variabel yang akan dikembalikan. 
   
   Contoh:
   
   output-nya
   
   
   

   

   Contoh Program Javascript dengan Fungsi

   Setelah kita paham dasar-dasar pembuatan fungsi dan jenis-jenisnya, sekarang mari kita coba membuat program sederhana.
   
   Program ini berisi CRUD (Create, Read, Update, Delete) data barang yang tersimpan dalam sebuah array.
   
   Silahkan buat dua file baru:
   
   js-fungsi/
   ├── fungsi.js
   └── index.html
   
   File index.html adalah file yang menampilkan halaman web. Sedangkan file fungsi.js adalah programnya.
   
     isi file index.html:
   

   

   isi file fungsi.js:
   
   output-nya:
   

   TERIMA KASIH :):)
   

   
   

   
   

Pertemuan 4- Array dan DOM API

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:

OUTPUT:

2. Mencetak isi Array dengan Perulangan

Bagaimana kalau nanti isi array-nya ada 100?
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.

OUTPUT:

2. MENGGUNAKAN FOREACH ()

OUTPUT:

3. Cara Menambahkan Data ke Dalam Array

Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array:

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

Mengisi dengan indeks maksudnya begini…
Misal kita punya array dengan isi sebagai berikut:

OUTPUT:

4. Cara Menghapus Data Array

#Menghapus Data dari Depan

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

OUTPUT

 

#Menghapus Data pada Indeks Tertentu

Apabila kita ingin menghapus data pada inteks tertentu, maka fungsi atau method yang digunakan adalah splice().

OUTPUT:

5. Mengubah isi Array

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

OUTPUT:

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:

 OUTPUT:

3. Method sort()

Method sort() berfungsi untuk mengurutkan data pada array.
Contoh:

OUTPUT

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

Pada contoh di atas, kita memiliki tiga buah paragraf dengan nama class 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:

 

 hasilnya

4. Membuat Elemen dengan DOM API

DOM juga menyediakan fungsi untuk membuat elemen HTML.
Salah satunya adalah fungsi createElement().
Contoh:

 

 OUTPUT

5. Menghapus Elemen dengan DOM API

Kalau tadi kita menggunakan fungsi append() 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 :):)

Pertemuan 3 Javascript- Percabangan dan Perulangan

Bentuk Percabangan pada Javascript

1. Percabangan if

Percabangan if merupakan percabangan yang hanya memiliki satu blok pilihan saat kondisi bernilai benar.
“Jika total belanja lebih besar dari Rp 100.000, Maka tampilkan pesan Selamat, Anda dapat hadiah”
Kalau dibawah Rp 100.000 pesannya tidak ditampilkan.

Mari kita coba dalam program Javascript:

OUTPUT

2. Percabangan if/else

Percabangan if/else merupakan percabangan yang memiliki dua blok pilihan.
Pilihan pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah (else).

OUTPUT

3. Percabangan if/else/if

Percabangan if/else/if merupakan percabangan yang memiliki lebih dari dua blok pilihan.

OUTPUT

4. Percabangan switch/case

Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.
Kita dapat mermbuat blok kode (case) sebanyak yang diinginkan di dalam blok switch.
Pada <value>, kita bisa isi dengan nilai yang nanti akan dibandingkan dengan varabel.
Setiap case harus diakhiri dengan break. Khusus untuk default, tidak perlu diakhiri dengan break karena dia terletak di bagian akhir.
Pemberian break bertujuan agar program berhenti mengecek case berikutnya saat sebuah case terpenuhi.

OUTPUT

5. Percabangan dengan Operator Ternary

Percabangan menggunakan opreator ternary merupakan bentuk lain dari percabangan if/else.
Bisa dibilang:
Bentuk singkatnya dari if/else.

OUTPUT

6. Percabangan Bersarang (Nested)

Kita juga dapat membuat blok percabangan di dalam percabangan. Ini disebut percabangan bersarng atau nested if.

OUTPUT

Bentuk Perulangan pada Javascript

1. Perulangan For di Javascript

Perulangan for merupakan perulangan yang termasuk dalam couted loop, karena sudah jelas berapa kali ia akan mengulang.

Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata for.
Kondisi ini akan menentukan:

• Hitungan akan dimulai dari 0 (i = 0);
• Hitungannya sampai berapa? Sampai i < 10;
• Lalu di setiap perulangan i akan bertambah +1 (i++).

Variabel i pada perulangan for berfungsi untuk menyimpan nilai hitungan.

Jadi setiap perulangan dilakukan nilai i akan selalu bertambah satu. Karena kita menentukannya di bagian i++. 

 

 

OUTPUT

 

2. Perulangan While di Javascript

Perulangan while merupakan perulangan yang termasuk dalam perulangan uncounted loop.
Perulangan while juga dapat menjadi perulangan yang counted loop dengan memberikan counter di dalamnya.



OUTPUT

3. Perulangan Do/While di Javascript

Perulangan do/while sama seperti perulangan while.
Perbedaanya:
Perulangan do/while akan melakukan perulangan sebanyak 1 kali terlebih dahulu, lalu mengecek kondisi yang ada di dalam kurung while.



OUTPUT

4. Perulangan Foreach di Javascript

Perulangan foreach biasanya digunakan untuk mencetak item di dalam array.
Perulangan ini termasuk dalam perulangan counted loop, karena jumlah perulangannya akan dituentukan oleh panjang dari array.
Ada dua cara menggunakan perulangan foreach di Javascript:

1. Menggunakan for dengan operator in;
2. Mengguunakan method forEach().

OUTPUT

5. Perulangan dengan Method repeat()

Perulangan dengen method atau fungsi repeat() termasuk dalam perulangan counted loop.
Fungsi ini khusus digunakan untuk mengulang sebuah teks (string).
Bisa dibilang:
Ini merupakan singkat dari perulangan for.



OUTPUT

6.Perulangan Bersarang (Nested)

Di dalam blok perulangan, kita juga dapat membuat perulangan.
Ini disebut dengan nested loop atau perulangan bersarang atau perulangan di dalam perualangan.



OUTPUT




TERIMA KASIH :):)