Pemrograman Web

Pertemuan #5:
Mengeksekusi source code
1. Percabangan if
Percabangan if merupakan
percabangan yang hanya memiliki satu
blok pilihan saat kondisi bernilai benar.

Coba perhatikan flowchart

berikut ini:
Flowchart tersebut dapat dibaca seperti ini:

“Jika total belanja lebih besar dari Rp 100.000, Maka tampilkan pesan Selamat,
Anda dapat hadiah“

Bila dibawah Rp 100.000 pesannya tidak ditampilkan.

Contoh:
Hasil:
Percabangan If

Bagian ini disebut dengan blok. Blok program pada Javascript, diawali dengan
tanda buka kurung kurawal { dan diakhiri dengan tutup kurung kurawal }. Apabila
di dalam blok hanya terdapat satu baris ekspresi atau statement, maka boleh tidak
ditulis tanda kurungnya.
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).

Coba perhatikan flowchart untuk

mengecek password ini:
Apabila password benar, pesan yang ada pada blok hijau akan
ditampilkan: “Selamat datang bos!”

Tapi kalau salah, maka pesan yang ada di blok merah yang akan
ditampilkan: “Password salah, coba lagi!”.

Kemudian, pesan yang berada di blok abu-abu akan tetap ditampilkan, karena dia
bukan bagian dari blok percabangan if/else.
Contoh:
Hasil:
3. Percabangan if/else/if
Percabangan if/else/if merupakan
percabangan yang memiliki lebih dari
dua blok pilihan.

Coba perhatikan flowchart berikut:

Perhatikan blok yang diberi warna, Ini

adalah blok untuk percabangan
if/else/if. Kita bisa menambahkan
berapapun blok yang kita inginkan.
Contoh:
Hasil:
4. Percabangan switch/case
Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.
Strukturnya seperti ini:

• blok kode (case) dapat dibuatsebanyak

yang
dibutuhkan blok switch.
• <value>, diisi dengan nilai yang
dibandingkan variabel.
• Setiap case harus diakhiri dengan break.
Default tidak memerlukan break.
• Pemberian break bertujuan agar program
berhenti mengecek case berikutnya saat
sebuah case terpenuhi.
Contoh:
Hasil:
Percabangan switch/case juga dapat dibuat seperti ini:
Pertama. berikan nilai true pada switch, ini agar bisa masuk ke dalam blok switch.

Lalu di dalam blok switch, kita buat kondisi dengan menggunakan case.

Hasilnya akan sama seperti pada contoh percabangan if/else/if.

5. Percabangan dengan Operator Ternary

Percabangan menggunakan opreator ternary merupakan bentuk lain dari

percabangan if/else. Bisa dibilang bentuk singkatnya dari if/else.

Fungsi method
toUpperCase()
mengubah teks yang
diinput menjadi capital
semua
Hasil:
Operator ternary berperan sebagai percabangan if/else:

Apabila kondisi yang ada di dalam kurung—(jwb.toUpperCase() == "IYA")—

bernilai true, maka nanti isi dari variabel jawaban akan sama dengan "Benar".

Tapi kalau bernilai false, maka variabel jawaban akan berisi "Salah".
6. Percabangan Bersarang (Nested)

blok percabangan juga dapat dibuat di dalam percabangan.

Hasil:
Menggunakan Operator Logika pada Percabangan

Percabangan bersarang dapat buat lebih sederhana dengan operator logika. Contoh:
Operator Logika
Dapat di sederhanakan dengan operator logika AND (&&).

Namun, ini bukan solusi terbaik karena user tidak bisa di cek terdaftar atau
tidak.
Blok Perulangan Javascript
Pengenalan
Perulangan akan membantu kita mengeksekusi kode yang berulang-ulang,
berapapun yang kita mau. Ada 5 macam bentuk perulangan di Javascript. Secara
umum, perulangan dibagi 2. Counted loop dan uncounted loop. Perbedaannya:

• Counted Loop merupakan perulangan yang jelas dan sudah tentu banyak
perulangannya.
• Sedangkan Uncounted Loop, merupakan perulangan yang tidak jelas berapa
kali ia harus mengulang.
Perulangan yang termasuk dalam Counted Loop:

•Perulangan For
•Perulangan Foreach
•Perulangan Repeat

Perulangan yang termasuk dalam Uncounted Loop:

•Perulangan While
•Perulangan Do/While
1. Perulangan For di Javascript
Perulangan for merupakan perulangan
yang termasuk dalam counted loop,
karena sudah jelas berapa kali ia akan
mengulang.
 Contoh:

Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata for,
kondisi ini akan menentukan:
• Hitungan dimulai dari 0 (i = 0);
• Hitungannya Sampai i < 10;
• di setiap perulangan i akan +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++.
Hasil:
Counter juga bisa menghitung mundur, contoh:
Hasil:
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.
Dapat disederhanakan menjadi:
Hasil:
3. Perulangan Do/While di Javascript

Perulangan do/while sama seperti perulangan while.

Perbedaanya adalah perulangan do/while akan melakukan perulangan sebanyak 1

kali terlebih dahulu, lalu mengecek kondisi yang ada di dalam kurung while.
Contoh:
Hasil:
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 ditentukan oleh panjang dari array.

Ada dua cara menggunakan perulangan foreach di Javascript:

1. Menggunakan for dengan operator in;

2. Mengguunakan method forEach().
Contoh:
Berikut ini bentuk perulangan “foreach” tanpa menggunakan operator in:
Perulangan ini dapat dibuat lebih sederhana lagi dengan menggunakan
operator in seperti ini:
Hasil:
Cara kedua membuat perulangan foreach ialah dengan menggunakan method
forEach() dari array. Contoh:
Method forEach() memiliki parameter berupa fungsi callback. Sebenarnya kita
juga bisa menggunakan arrow function seperti ini:
Hasil:
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 penyingkatan perulangan for. Contoh dengan for:

Dengan repeat()
Hasil:
Perulangan Bersarang (Nested)
Perulangan dalam perulangan :
Hasil:
Pada perulangan tersebut, dua perulangan for digunakan.
• Perulangan pertama menggunakan variabel i sebagai counter.
• Perulangan kedua menggunakan variabel j sebagai counter.
Contoh lain:
Hasil:
Struktur Data Array
Pengenalan

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.
Membuat Array pada Javascript
Pada javascript, array dapat kita buat dengan tanda kurung siku ([...]).

Maka variabel products akan berisi sebuah array kosong.

Kita bisa mengisi data ke dalam array, lalu setiap data dipisah dengan
tanda koma (,).
Dan karena Javascript merupakan Bahasa pemrograman yang dynamic
typing, data yang disimpan dapat dicampur dengan tipe data lain yang
berbeda di dalam array .
Mengambil Data dari Array

Ingat bahwa array dimulai dari nol (0). Contoh:

Hasil:
Mencetak isi Array dengan Perulangan

Dapat digunakan perulangan

bila input yang diambil
berasal dari array yang
berjumlah banyak. Contoh:
Hasil:
Cara lainnya adalah dengan
menggunakan method
forEach():

Hasilnya akan sama seperti

sebelumnya.
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().
1. Mengisi menggunakan indeks

Terdapat tiga data di dalam array buah dengan indeks:

• 0: "Apel"
• 1: "Jeruk"
• 2: "Manggis“

Kita ingin menambahkan data lagi pada indeks ke-3, maka kita bisa
melakukannya seperti ini:
Referensi
Percobaan dengan console:

Ingat bahwa harus diketahui jumlah

data dan panjang array untuk
mengguakan cara ini. Bila nomor
index diisi sembarangan data akan
tertindih.
2. Mengisi Menggunakan Method push()

Solusi masalah sebelumnnya adalah dengan menggunakan method push().

Tidak perlu diketahui berapa panjang array karena method push() akan
menambahkan data ke dalam array dari ekor atau belakang.
Contoh:
Hasil:
Menghapus Data Array
Sama seperti menambahkan data ke array, menghapus data juga memiliki dua cara:

1. Menggunakan delete;
2. Menggunakan method pop().

Contoh:
Kita dapat menghapus data dengan nomer indeks tertentu dengan delete.
Sedangkan pop() akan menghapus dari belakang. Kekurangan dari delete, ia akan
menciptakan ruang kosong di dalam array. Lihat percobaan di console berikut:
Cara kedua menggunakan method
pop(), kebalikan dari method push().

Method pop() akan menghapus array

yang ada di paling belakang.

Array pada javascript dapat kita

pandang sebagai sebauh stack
(tumpukan), yang mana memiliki sifat
LILO (Last in Last out).
Kita memanggil method pop()
sebanyak 4 kali, maka array-nya
akan kosong []. Karena isinya
hanya 4 saja.

Method pop() akan

mengembalikan nilai item atau
data yang terhapus dari array.
Menghapus Data dari Depan
Kita juga dapat menghapus data dari depan dengan menggunakan method
shift(). Contoh:

Maka data yang terhapus adalah “Mawar”

Menghapus Data pada Indeks Tertentu

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

Fungsi ini memiliki dua parameter yang harus diberikan:

1. <indeks> indeks dari data di array yang ingin dihapus

2. <total> jumlah data yang dihapus dari index tersebut.
Contoh:

Apabila <total> tidak diisi, maka

semua data dari indeks yang terpilih
akan dihapus
Mengubah isi Array
Untuk mengubah isi array, kita bisa mengisi ulang seperti ini:

Maka “kotlin” akan diganti dengan “C++” .

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.

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:
2. Method includes()
<Method ini berfungsi untuk mengecek apakah sebuah data ada di dalam array
atau tidak.
Contoh:
3. Method sort()
Method sort() berfungsi untuk mengurutkan data pada array. Contoh:
Fungsi di Javascript
Pengenalan
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 membuat fungsi di Javascript:

1. Menggunakan cara biasa;

2. Menggunakan ekspresi;
3. Menggunakan tanda panah (=>);
4. dan menggunakan Constructor.
1. Membuat Fungsi dengan Cara Biasa
2. 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

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

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

Contoh:
Fungsi juga dapat di panggil melalui atribut event pada HTML. Contoh:
Hasil:
Fungsi dengan Parameter
Parameter adalah variabel yang menyimpan nilai untuk diproses di dalam fungsi.
Contoh:

Pada contoh di atas, a dan b adalah sebuah parameter. Lalu cara memanggil fungsi
yang memiliki parameter adalah seperti ini:

Memberikan 3 untuk a, dan 2 untuk 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:
Contoh Program Javascript dengan Fungsi

Buat 2 file, fungsi.js dan index.html

File index.html untuk menampilkan halaman web, dan fungsi.js adalah

programnya.
index.html
Fungsi.js
Hasil:
Obyek di Javascript
Pengenalan
Objek sebenarnya adalah sebuah variabel yang menyimpan nilai (properti) dan
fungsi (method). Contoh objek mobil:
Mobil itu dapat dimodelkan ke dalam kode program seperti ini:

Tapi variabel car hanya akan menyimpan nama mobil saja. Karena itu, kita harus
menggunakan objek. Objek pada javascript, dapat dibuat dengan tanda kurung
kurawal dengan isi berupa key dan value.
Atau bisa ditulis seperti ini:
Perbedaan Properti dan Method
Properti adalah ciri khas dari objek (variabel). Sedangkan method adalah perilaku
dari objek (fungsi).

Method dapat dibuat dengan cara mengisi nilai (value) dengan sebuah fungsi.
Contoh:
Cara Mengakses Properti dan Method Objek
Caranya menggunakan tanda titik atau dot (.), lalu diikuti dengan nama properti
atau method.
Untuk mengakses properti, cukup
menggunkanan nama objek.properti.
Sedangakan method yarus menggunakan
tanda kurung ( ) yang menyatakan kalua
kita ingin mengekseskusi fungsi.
Menggunakan Keyword this
Kata kunci this digunakan untuk
mengakses properti dan method
dari dalam method (objek). Contoh:
Hasil:

Kata kunci this pada contoh diatas akan mengacu pada obyek person.
Membuat Class Objek dengan this

Sebelumnya pembuatan obyek dilakukan dengan membuat instance dari class.

Akan tetapi pada contoh sebelumnya, obyek dibuat secara langsung.
Tetapi obyek lain dengan properti yang sama dapat juga dibuat dengan cara seperti
ini:
Ini tentu tidak efektif karena bila ada banyak obyek yang ingin dibuat kode yang
sama harus ditulis ulang.

Solusinya adalah dengan menggunakan class.

Pada Javascript versi ES5, class belum ada. Fitur ini baru ditambahkan pada
Javascript versi ES6. Pada ES5, kita bisa membuat class dengan fungsi. Lalu di
dalamnya menggunakan kata kuncithis.
Contoh:
Hasil:
Pada contoh yang tadi, kota membuat obyek dengan kata kunci new, lalu diberikan
parameter firstName dan lastName.

Maka dari itu, berapapun obyek yang ingin dibuat cukup gunakan kata kunci new.
Obyek Math
Pengenalan
Objek Math adalah objek yang berisi
fungsi-fungsi matematika dan
beberapa konstanta untuk melakukan
perhitungan matematika seperti sin,
cos, tan, eksponen, akar kuadrat, dll.
Ini adalah fungsi-fungsi yang umum
digunakan dalam perhitungan
matematis.
Fungsi Trigonometri di Javascript

Trigonometri adalah cabang ilmu matematika yang mempelajari tentang sudut dan
panjang pada segitiga.
Dalam dunia komputer, ilmu ini biasanya diimplementasikan dalam komputer
grafis.

Di objek Math terdapat fungsi-fungsi untuk menghitung trigonometri. Misalkan

untuk menghitung nilai sin dari 10, maka dapat ditulis seperti ini:
Variabel n akan berisi -0.5440211108893698 karena sin 10 adalah -0.5.
Fungsi Logaritma, Pangkat, dan Eksponensial di
Javascript

Logaritma adalah operasi matematika

yang merupakan kebalikan (atau
invers) dari eksponen atau
pemangkatan.

Objek Math di Javascript juga

menyediakan fungsi log() untuk
logaritma dan pow() untuk
pemangkatan.
Untuk menghitung exponensial dapat digunakan exp().
Fungsi Pembulatan di Javascript

Ada beberapa fungsi yang sering

digunakan:
1. floor() membulatkan ke bawah;
2. round() membulatkan ke yang
terdekat, bisa ke bawah dan ke atas;
3. ceil() membulatkan ke atas.
Fungsi Akar di Javascript
Fungsi akar menggunakan fungsi Sementara kubik menggunakan cbrt()
sqrt()
untuk akar n atau nth root, dapat
dihitung menggunakan fungsi pow()
yang di akali. Contoh:

n adalah nilai yang dicari, root adalah akar dari n.

Fungsi Random dan Mutlak di Javascript

Adalah fungsi yang menghasilkan nilai

acak antara 0.0 sampai 1.0.

Jika ingin membuat nilai acak dari rentang nilai tertentu, maka kita bisa menggunakan bantuan
fungsi floor() untuk membulatkan lalu dikali dengan nilai min dan max.
Rumusnya akan seperti ini:

Yang dapat di bentuk menjadi fungsi:

Hasil:
Fungsi Mutlak
adalah fungsi yang menghasilkan nilai mutlak atau absolute. Contoh:

Variabel x akan bernilai 2, karena fungsi abs() akan selalu memberikan nilai
mutlak atau positif.
Fungsi Minimum dan Maksimum di Javascript

Fungsi minimum dan maksimum

adalah fungsi untuk menentukan nilai
paling kecil dan paling besar pada
sekumpulan nilai.
Fungsi ini bisa kita berikan input
berupa urutan bilangan.
Apabila kita ingin memberikan input
array, maka array tersebut harus kita
pecah isinya.
Konstanta di Objek Math
Selain menyediakan fungsi-fungsi matematika, objek Math juga menyediakan
konstanta seperti PI, E, LN10, dll. yang bisa kita manfaatkan untuk perhitungan
rumus tertentu.
AJAX Menggunakan JQuery
JQuery adalah library Javascript yang menyederhanakan fungsi-fungsi
Javascript. Pada JQuery, AJAX dapat dibuat seperti ini:
Buatlah file ajax-jquery.html dengan isi:
Hasil:
Dengan fungsi $("#result").load(), kita
bisa mengambil data dengan AJAX dan
langsung menampilkannya pada elemen
yang dipilih.

Fungsi JQuery load() cocoknya untuk

mengambil bagian dari HTML untuk
ditampilkan.
Contoh lainnya menggunakan metode GET:
Hasil:
Untuk mengirim data dengan AJAX di JQuery, caranya hampir sama seperti
mengambil data dengan $.get().
TERIMA KASIH