STUDI INDEPENDEN

PLATFORM & WEB

DEVELOPER
 04
JavaScript
 Pengenalan JavaScript
Apa itu JavaScript?
JavaScript adalah bahasa skrip yang digunakan untuk membuat konten halaman web
dinamis, berfungsi untuk membuat elemen yang mampu meningkatkan interaksi
pengunjung seperti menu drop-down, animasi, dan warna background dinamis.

Sejarah JavaScript dimulai pada tahun 1995, diciptakan oleh Brendan Eich di Netscape
Communications. Awalnya, JavaScript hanya digunakan untuk keperluan internal
dengan web browser perusahaan tersebut, Netscape Navigator.

Dulunya, JavaScript bernama LiveScript, yang kemudian diubah menjadi JavaScript

agar bisa menjadi “teman” bagi bahasa pemrograman Java milik mitra mereka, Sun
Microsystems.
 Pengenalan JavaScript
Bagaimana cara menambahkan JavaScript
ke dokumen HTML?
Ada 4 cara menulis kode Javascript pada HTML.
1. Internal JavaScript
Cara pertama untuk menginput kode JavaScript ke dalam file HTML adalah dengan
Internal JavaScript. Disebut sebagai 'internal' karena kode JavaScript itu ditulis pada
halaman yang sama dengan kode HTML, atau di dalam satu file HTML. Kode
JavaScript di input menggunakan tag <script>. Tag <script> biasa disimpan pada
bagian head html atau pada bagian paling bawah didalam body html.

Contoh
<script> document.write(“Hello World!");</script>
 Pengenalan JavaScript
Bagaimana cara menambahkan JavaScript
ke dokumen HTML?
2. External JavaScript
Cara kedua untuk menyisipkan JavaScript ke dalam HTML adalah dengan
memindahkan kodenya ke file terpisah dan mengaksesnya dari HTML. Cara ini
disarankan untuk script yang panjang dan digunakan oleh banyak halaman.

File JavaScript external disimpan dalam ekstensi .js. Dari halaman HTML, kita
memanggilnya menggunakan juga dengan tag <script>, tapi kali ini dengan tambahan
atribut src. Atribut src berisi alamat dari file JavaScript tersebut.
 Pengenalan JavaScript
Bagaimana cara menambahkan JavaScript
ke dokumen HTML?
Contoh

file index.html file script.js

 Pengenalan JavaScript
Bagaimana cara menambahkan JavaScript
ke dokumen HTML?
Tampilan

Catatan
1. Saat menggunakan javascript external kita tidak perlu menutup tag <script>. Jadi kita cukup
menulis <script src=“file.js”>.
2. Untuk kode Javascript yang berada di folder yang berbeda, kita menulisnya mengikuti alamat
path foldernya. Contoh <script src=“nama_folder/file.js”>
3. Kita juga bisa memasukan kode javascript yang berada diinternet.
<script src=“https://code.jquery.com/jquery-3.5.1.min.js”>
 Pengenalan JavaScript
Bagaimana cara menambahkan JavaScript
ke dokumen HTML?
3. Inline JavaScript
Cara ketiga untuk menjalankan JavaScript adalah dengan metode inline JavaScript. Ini
bisa dilakukan menggunakan konsep event handler. event handler adalah memanggil
kode javascript ketika 'sesuatu' terjadi di dalam tag HTML.

Sesuatu ini maksudnya ketika sebuah element HTML di klik, di klik kanan, di arahkan
mouse, dll. Event handler di dalam JavaScript ditulis dengan penambahan kata on,
sehingga jika sebuah tombol di-klik, menggunakan onclick, atau jika mouse berada
diatas element disebut sebagai onmouseover, dst.
 Pengenalan JavaScript
Bagaimana cara menambahkan JavaScript
ke dokumen HTML?
Contoh
 Pengenalan JavaScript
Bagaimana cara menambahkan JavaScript
ke dokumen HTML?
Tampilan

Catatan
Untuk melihat daftar event listener yang ada di JavaScript kita bisa melihatnya di website:
https://developer.mozilla.org/en-US/docs/Web/Events
 Pengenalan JavaScript
Bagaimana cara menambahkan JavaScript
ke dokumen HTML?
4. JavaScript Protocol
Cara terakhir dan juga sudah sangat jarang dipakai, adalah dengan menyisipkan kode
JavaScript ke dalam alamat href dari tag HTML. Cara ini disebut juga sebagai
JavaScript Protocol. Disebut demikian, karena kita mengganti alamat link dari yang
biasa menggunakan protocol http// menjadi javascript.

Contoh
 Pengenalan JavaScript

Sintaks JavaScript
Sintaks JavaScript adalah seperangkat aturan yang menentukan program JavaScript
yang terstruktur dengan benar.

Ada beberapa hal yang perlu diketahui terkait penulisan sintaks JavaScript
1. Whitespace dan Line Breaks
JavaScript mengabaikan spasi, tab, dan baris baru. Kita dapat menggunakan spasi, tab,
dan baris baru secara bebas di dalam aplikasi kita dan kita dapat memformat dan
membuat indentasi aplikasi dengan cara yang rapi dan konsisten sehingga kode lebih
mudah dibaca dan dipahami.
 Pengenalan JavaScript

Sintaks JavaScript
2. Titik koma adalah Opsional
Pernyataan sederhana di JavaScript biasanya diikuti dengan titik koma, sama seperti di
C++, Java, dan PHP. Namun, dalam JavaScript titik koma dapat dihilangkan jika setiap
pernyataan berada pada baris yang berbeda.
 Pengenalan JavaScript

Sintaks JavaScript
3. Sensitivitas Huruf
JavaScript adalah bahasa yang memperhatikan perbedaan huruf besar dan kecil (case-
sensitive). Artinya kata kunci, variabel, nama fungsi dan identifikasi lainnya harus
diketik dengan konsisten. Jadi pengidentifikasi variable time dan TIME akan
menyampaikan arti yang berbeda dalam JavaScript.

4. Komentar
JavaScript memiliki gaya komentar yang mirip dengan bahasa pemrograman C dan C+
+.
Contoh : // contoh penulisan komentar 1
/* contoh penulisan komentar 2 */
 Pengenalan JavaScript

Console log pada Javascript

Salah satu hal penting yang perlu diketahui sebelum kita melanjutkan bahasan materi
adalah mengenai console log. console.log() adalah fungsi yang digunakan untuk
mencetak informasi di konsol pengembang web browser atau lingkungan
pengembangan lainnya. Fungsi ini sangat berguna untuk debug atau mencari tahu isi
dari variabel atau objek saat menjalankan kode JavaScript.

Untuk menggunakan console.log() kita hanya perlu memanggil fungsi tersebut dengan
parameter yang ingin kita tampilkan di konsol.
 Pengenalan JavaScript

Console log pada Javascript

Untuk membuka konsol di browser, klik kanan pada halaman web, kemudian pilih
"Inspect" atau "Inspect Element".
 Pengenalan JavaScript

Bagaimana cara mendeklarasikan dan

menginisialisasi variabel dengan JavaScript
Variabel dalam JavaScript adalah nama yang ditujukan untuk menyimpan nilai dan
merujuk ke nilai tersebut di sepanjang kode. Untuk membuat variabel dalam JavaScript,
kamu perlu mendeklarasikannya terlebih dahulu. Kita bisa mendeklarasikan variabel
menggunakan kata kunci var, let dan const.

Contoh
var nama;
let umur;
const alamat;
 Pengenalan JavaScript

Bagaimana cara mendeklarasikan dan

menginisialisasi variabel dengan JavaScript
Namun, variabel sendiri akan menjadi tidak berguna jika tidak memiliki nilai. Kamu
dapat memberikan nilai kepada variabel saat deklarasi atau setelah deklarasi. Untuk
menginisialisasi variabel, kamu bisa menggunakan operator =.

Contoh
var nama = “Andi”;
let umur = “19”;
const alamat = “Bandung”;
 Pengenalan JavaScript
Perbedaan var, let, dan const
1. Var
Kata kunci var digunakan untuk mendeklarasikan variabel dalam versi lama
JavaScript. Variabel yang dideklarasikan dengan var memiliki cakupan fungsi
(function scope) dan tidak terpengaruh oleh blok di dalam fungsi. Selain itu, var
memiliki sifat hoisting, yang berarti deklarasi variabel akan dipindahkan ke bagian
atas skrip sebelum eksekusi.
2. Let
let diperkenalkan dalam ECMAScript 6 (ES6) untuk mengatasi beberapa kelemahan
yang dimiliki oleh var. Variabel yang dideklarasikan dengan let memiliki cakupan
blok (block scope), yang berarti mereka hanya dapat diakses di dalam blok di mana
mereka dideklarasikan. let tidak memiliki hoisting yang kuat seperti var, sehingga
variabel tidak dapat diakses sebelum dideklarasikan dalam blok.
 Pengenalan JavaScript

Perbedaan var, let, dan const

3. Const
const digunakan untuk variabel yang nilainya tidak berubah (konstan) setelah diberikan
nilai awal. Cakupan const juga terbatas pada blok, mirip dengan let.

Kesimpulan
1. Let dan Const menganut sistem block scope, yang mana cakupan variabelnya hanya
bisa diakses di dalam blocknya saja.
2. Var menganut sistem functional scope, yang mana variabelnya dapat diakses dari
dalam maupun dari luar block kecuali di luar function.
3. Data pada Let dan Var bisa diubah.
4. Data pada Const tidak bisa diubah.
 Tipe data dan Operator JavaScript

Apa saja tipe data yang ada di Javascript?

Tipe data atau kadang disingkat dengan 'tipe' saja adalah sebuah pengelompokan data
untuk memberitahu compiler atau interpreter bagaimana programmer ingin mengolah
data tersebut“. Secara sederhana, tipe data adalah cara kita memberitahu komputer
untuk mengelompokkan data berdasarkan apa yang dipahami oleh komputer.

Tipe data biasanya dikategorikan ke dalam dua kategori yaitu primitif dan non-primitif:
1. Data Primitif
Tipe data yang hanya dapat menyimpan satu nilai pada satu waktu.
2. Data Non-primitif
Tipe data yang dapat menyimpan lebih dari satu nilai pada satu waktu.
 Tipe data dan Operator JavaScript

Apa saja tipe data yang ada di Javascript?

Untuk sementara kita hanya akan bahas terkait tipe data primitive. Berikut beberapa
tipe data primitive yang bisa kita gunakan:

1. String
Tipe data String digunakan untuk mewakili data teks atau karakter. String dapat dibuat
menggunakan petik tunggal atau ganda dan diakhiri dengan petik yang sama dan kita
bisa memasukan karakter diantara petik, seperti contoh berikut:
 Tipe data dan Operator JavaScript

Apa saja tipe data yang ada di Javascript?

2. Number
Tipe data JavaScript Number mewakili angka positif dan negatif, baik bilangan bulat
(integer) atau desimal (floating point). Seperti contoh berikut:
 Tipe data dan Operator JavaScript

Apa saja tipe data yang ada di Javascript?

3. Boolean
Boolean adalah tipe data yang hanya memiliki dua nilai, true dan false. Jika kita
membutuhkan tipe data yang hanya bernilai benar atau salah (ya atau tidak), tipe data ini
bisa menjadi pilihan yang tepat. Berikut ini contohnya:
 Tipe data dan Operator JavaScript

Apa saja tipe data yang ada di Javascript?

4. Undefined
Undefined adalah nilai yang diberikan ketika variabel dideklarasikan tanpa inisialisasi
atau tidak diberi nilai. Ini hanya berlaku untuk variabel let dan var, karena kita tidak
dapat mendeklarasikan variabel const tanpa nilai. Berikut ini contohnya:
 Tipe data dan Operator JavaScript

Apa saja tipe data yang ada di Javascript?

5. Null
Tipe data null digunakan untuk menunjukkan bahwa suatu variabel tidak memiliki nilai
atau suatu objek tidak memiliki referensi ke objek apapun.

Penting untuk diingat bahwa null tidak sama dengan undefined. Undefined biasanya
muncul ketika variabel dideklarasikan tetapi tidak diberikan nilai, sementara null adalah
nilai yang sengaja diberikan untuk menunjukkan ketiadaan nilai atau referensi. Contoh:
 Tipe data dan Operator JavaScript

Apa saja tipe data yang ada di Javascript?

5. Null
Tipe data null digunakan untuk menunjukkan bahwa suatu variabel tidak memiliki nilai
atau suatu objek tidak memiliki referensi ke objek apapun.

Penting untuk diingat bahwa null tidak sama dengan undefined. Undefined biasanya
muncul ketika variabel dideklarasikan tetapi tidak diberikan nilai, sementara null adalah
nilai yang sengaja diberikan untuk menunjukkan ketiadaan nilai atau referensi. Contoh:
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

Operator adalah simbol yang digunakan untuk melakukan operasi pada suatu nilai dan
variabel. Operator dalam pemrograman terbagi dalam 6 jenis:

1. Operator Aritmatika
Operator aritmatika merupakan operator untuk melakukan operasi aritmatika seperti
penjumlahan, pengurangan, pembagian, perkalian, dsb.

Nama Operator Simbol Nama Operator Simbol

Penjumlahan + Pemangkatan **
Pengurangan - Pembagian /
Perkalian * Sisa Bagi %
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

Contoh
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

2. Operator Perbandingan
Operator relasi atau perbandingan adalah operator yang digunakan untuk
membandingkan dua nilai. Operator perbandingan akan menghasilkan sebuah nilai
boolean true dan false.

Operator perbandingan terdiri dari:

Nama Simbol Nama Operator Simbol

Operator
Tidak Sama dengan != atau !==
Lebih Besar > Lebih Besar Sama dengan >=
Lebih Kecil < Lebih Kecil Sama dengan <=
Sama Dengan == atau ===
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

Penjelasan
1. Lebih Besar (>): Memeriksa apakah nilai di sebelah kiri lebih besar dari nilai di
sebelah kanan.
2. Lebih Kecil (<): Memeriksa apakah nilai di sebelah kiri lebih kecil dari nilai di
sebelah kanan.
3. Sama dengan (== atau ===): Memeriksa apakah nilai di sebelah kiri dari operator
sama dengan nilai di sebelah kanan. Untuk === akan memeriksa tipe data juga
4. Tidak Sama Dengan (!= atau !==): Memeriksa apakah nilai di sebelah kiri dari
operator tidak sama dengan nilai di sebelah kanan. Untuk !== akan memeriksa tipe
data juga.
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

5. Lebih Besar Sama Dengan (>=): Memeriksa apakah nilai di sebelah kiri lebih
besar atau sama dengan nilai di sebelah kanan.
6. Lebih Kecil Sama Dengan (<=): Memeriksa apakah nilai di sebelah kiri lebih kecil
atau sama dengan nilai di sebelah kanan.
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

Contoh
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

3. Operator Logika
Operator logika digunakan untuk melakukan operasi terhadap dua nilai boolean.

Operator ini terdiri dari:

Nama Operator Simbol

Logika AND &&
Logika OR ||
Negasi/kebalikan !
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

Penjelasan
1. Operator AND (&&) mengembalikan true jika kedua operan bernilai true, dan
false jika salah satu atau keduanya bernilai false.
2. Operator OR (||) mengembalikan true jika salah satu dari kedua operan bernilai
true, dan false hanya jika keduanya bernilai false.
3. Operator negasi (!) digunakan untuk membalik nilai kebenaran. Jika nilai awal
true, maka menjadi false, dan sebaliknya.
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

Contoh
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

4. Opeartor Penugasan
Operator penugasan adalah operator yang digunakan untuk memberikan tugas kepada
variabel. Biasanya digunakan untuk mengisi variabel.

Operator penugasan terdiri dari:

Nama Operator Simbol Nama Operator Simbol

Pengisian Nilai = Pengisian dan Pemangkatan **=
Pengisian dan Penambahan += Pengisian dan Pembagian /=
Pengisian dan Pengurangan -= Pengisian dan Sisa Bagi %=
Pengisian dan Perkalian *=
 Tipe data dan Operator JavaScript

Apa saja operator yang ada di JavaScript

Contoh
 Fungsi dan Objek JavaScript

Bagaimana cara mendefinisikan dan memanggil

fungsi dengan JavaScript?
Function atau fungsi adalah “subprogram” yang dapat dipanggil di bagian lain
kode kita atau di dalam fungsi itu sendiri (rekursi). Fungsi dapat memiliki
serangkaian pernyataan di badan atau blok fungsi.

Pada JavaScript, fungsi dapat menerima dan selalu mengembalikan nilai. Jika
kita membuat fungsi yang tidak mengembalikan nilai, maka fungsi akan tetap
mengembalikan nilai dalam bentuk nilai undefined.
 Fungsi dan Objek JavaScript

Bagaimana cara mendefinisikan dan memanggil

fungsi dengan JavaScript?
Ada banyak cara mendefinisikan fungsi di JavaScript, kali ini kita akan
mempelajari fungsi dasar dan yang paling sering digunakan.

1. Function Declaration
Function Declaration dibuat menggunakan kata kunci function diikuti dengan
nama fungsi (wajib), lalu parameter (opsional) di dalam sepasang kurung
lengkung (parameter1, parameter2, ..., parameterN), diakhiri dengan kurung
kurawal {...} untuk membatasi badan fungsi.
 Fungsi dan Objek JavaScript
Bagaimana cara mendefinisikan dan memanggil fungsi dengan
JavaScript?
Struktur Function Declaration

name: nama atau identifikasi yang diberikan pada fungsi untuk merujuk kepadanya.
parameter: variabel atau nilai yang diterima oleh fungsi sebagai input, batas
parameter bergantung pada mesin, jika parameter lebih dari satu dipisahkan dengan
koma.
statements: Statements adalah blok kode yang dieksekusi ketika fungsi dipanggil.,
logika, perulangan dan sebagainya.
 Fungsi dan Objek JavaScript

Bagaimana cara mendefinisikan dan memanggil

fungsi dengan JavaScript?

Contoh Function Declaration

 Fungsi dan Objek JavaScript

Bagaimana cara mendefinisikan dan memanggil

fungsi dengan JavaScript?
2. Function Expression
Membuat function dengan expression atau function expression ini kita
menggunakan variabel, lalu diisi dengan function. Jadi penamaan function itu
menggunakan variabel.

Struktur Function Expression

 Fungsi dan Objek JavaScript

Bagaimana cara mendefinisikan dan memanggil

fungsi dengan JavaScript?

Contoh Function Expression

 Fungsi dan Objek JavaScript

Bagaimana cara mendefinisikan dan memanggil

fungsi dengan JavaScript?
3. Arrow Function
Membuat function dengan arrow atau Arrow Function ini kita menggunakan
variabel, lalu diisi dengan function. Jadi penamaan function itu menggunakan
variabel, yang berbeda disini kita tidak perlu menggunakan keyword function.

Struktur Arrow Function

 Fungsi dan Objek JavaScript

Bagaimana cara mendefinisikan dan memanggil

fungsi dengan JavaScript?

Contoh Function Expression

 Fungsi dan Objek JavaScript

Apa itu parameter dan argumen fungsi

Argument adalah nilai yang diteruskan ke dalam sebuah fungsi ketika fungsi
itu dipanggil, sedangkan parameter adalah variabel yang terdaftar menjadi
bagian dari definisi fungsi. Dengan mengetahui perbedaan antara argument
dan parameter, kita dapat mencegah terjadinya kesalahan dalam kode program
yang kita buat karena javascript tidak akan menampilkan error ketika jumlah
argument yang diteruskan ke dalam fungsi berbeda dengan jumlah parameter
yang tercantum saat fungsi didefinisikan.
 Fungsi dan Objek JavaScript

Apa itu parameter dan argumen fungsi

Penjelasan
Parameter: Variabel yang didefinisikan dalam tanda kurung fungsi (nama dalam contoh di
atas adalah parameter).
Argument: Nilai yang sebenarnya dikirimkan ke parameter saat fungsi dipanggil ("Andi"
dalam contoh di atas adalah argument).
 Tipe data dan Operator JavaScript

Apa itu objek dan properti di JavaScript

Objek dalam javascript adalah struktur data yang menyimpan nilai (properti) dan fungsi
(method). Dan properti adalah nilai yang berkaitan dengan objek pada JavaScript.

Dalam JavaScript, ada dua cara utama untuk membuat objek.

1. Membuat objek dengan literal
Objek literal adalah cara paling umum untuk membuat objek di JavaScript. Hal ini
melibatkan pendefinisian objek secara langsung dengan menetapkan properti dan
method dalam kurung kurawal {}.
 Tipe data dan Operator JavaScript

Apa itu objek dan properti di JavaScript

Contoh
 Tipe data dan Operator JavaScript

Apa itu objek dan properti di JavaScript

2. Membuat objek dengan fungsi
Objek juga dapat dibuat menggunakan fungsi. Fungsi akan digunakan untuk membuat
dan menginisialisasi objek.
 Array JavaScript

Bagaimana cara membuat dan mengakses

array dengan JavaScript
Array merupakan struktur data yang digunakan untuk menyimpan sekumpulan data
dalam satu tempat. Setiap data dalam Array memiliki indeks, sehingga kita akan mudah
memprosesnya. Penomoran index di dalam array dimulai dari angka 0, sehingga elemen
pertama berada di index 0, elemen kedua berada di index 1, dst.

Array juga berfungsi sebagai wadah fleksibel yang mampu menampung berbagai bentuk
data. Mulai dari string, number, boolean hingga object.
 Array JavaScript

Bagaimana cara membuat dan mengakses

array dengan JavaScript
Berikut contoh script untuk membuat dan mengakses array
 Array JavaScript

Bagaimana cara membuat dan mengakses

array dengan JavaScript
Berikut contoh script untuk membuat dan mengakses array
 Array JavaScript

Apa saja metode array yang berguna di JavaScript

Pertama kita akan bahas 4 metode untuk memanipulasi array. Berikut contoh scriptnya:
 Array JavaScript

Apa saja metode array yang berguna di JavaScript

Selanjutnya kita akan bahas 7 metode pengolahan array pada javascript
1. forEach()
Metode ini berfungsi untuk melakukan pengulangan di dalam array.
Contoh Script:
 Array JavaScript

Apa saja metode array yang berguna di JavaScript

2. filter()
Metode ini berfungsi untuk membuat sebuah array baru dengan memperhatikan kondisi
tertentu pada setiap elemen dari array yang sudah ada.

Contoh Script:
 Array JavaScript

Apa saja metode array yang berguna di JavaScript

3. map()
Metode ini berfungsi untuk membuat array baru sambil mengecek/melakukan operasi terhadap
setiap elemen array.

Contoh Script:
 Array JavaScript

Apa saja metode array yang berguna di JavaScript

4. includes()
Metode ini berfungsi untuk memeriksa apakah suatu nilai tertentu ada dalam array atau tidak.

Contoh Script:
 Array JavaScript

Apa saja metode array yang berguna di JavaScript

5. reduce()
Metode ini berfungsi untuk mereduce elemen array menjadi satu nilai dengan menjumlah
setiap elemen.

Contoh Script:
 Array JavaScript

Apa saja metode array yang berguna di JavaScript

6. sort()
Metode ini berfungsi untuk mengurutkan elemen pada array baik secara ascending atau
descending.

Contoh Script:
 Array JavaScript

Apa saja metode array yang berguna di JavaScript

7. concat()
Metode ini berfungsi untuk menggabungkan 2 array menjadi 1 array.

Contoh Script:
 Percabangan dan Perulangan JavaScript

Bagaimana cara melakukan percabangan if else

dengan JavaScript
IF adalah stuktur kode pemograman 'conditional' yang akan membuat percabangan di dalam
program. Dengan menggunakan struktur if, kita bisa membuat 2 percabangan program yang
akan dieksekusi jika kondisi terpenuhi, dan akan menjalankan kode program lain jika kondisi
tidak terpenuhi.

Struktur utama if
 Percabangan dan Perulangan JavaScript

Bagaimana cara melakukan percabangan if else

dengan JavaScript
Kondisi di dalam struktur if disini bisa berisi variabel dengan tipe data boolean, atau dengan
kode program yang akan menghasilkan boolean, misalkan menggunakan operator
perbandingan yang pernah dibahas sebelumnya seperti if (a==b), atau IF (a > b). Jika kondisi
diisi dengan selain boolean (selain true atau false), maka hasilnya akan dikonversi menjadi
Boolean.
 Percabangan dan Perulangan JavaScript

Bagaimana cara melakukan percabangan if else

dengan JavaScript
Struktur if memiliki percabangan lain yang akan dijalankan jika kondisi if tidak terpenuhi,
yakni dengan menambahkan perintah else.
 Percabangan dan Perulangan JavaScript

Bagaimana cara melakukan percabangan if else

dengan JavaScript
Selanjutnya yaitu else if. Struktur else if digunakan ketika percabangan memiliki lebih dari
dua blok pilihan.
 Percabangan dan Perulangan JavaScript

Bagaimana cara melakukan percabangan switch

case dengan JavaScript
Switch case adalah salah satu struktur kontrol dalam JavaScript yang digunakan untuk
menyeleksi satu blok kode untuk dieksekusi bersyarat dari beberapa pilihan yang tersedia.
Sederhananya, percabangan switch case adalah bentuk lain dari percabangan if else.
Strukturnya seperti ini:
 Percabangan dan Perulangan JavaScript

Bagaimana cara melakukan percabangan switch

case dengan JavaScript
Contoh
 Percabangan dan Perulangan JavaScript

Bagaimana cara menggunakan loop for dan while

untuk mengulangi kode dengan JavaScript
Mengulang suatu proses merupakan tindakan yang banyak dijumpai dalam pemrograman.
Pada semua bahasa pemrograman, perulangan proses ditangani dengan suatu mekanisme yang
disebut loop. Dengan menggunakan loop, suatu proses yang berulang misalnya menampilkan
tulisan yang sama seratus kali pada layar dapat diimpelementasikan dengan kode program
yang pendek.

Secara umum, perulangan ini dibagi dua. Yaitu:

1. Counted Loop merupakan perulangan yang jelas dan sudah tentu banyak perulangannya.
2. Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali ia harus mengulang.
 Percabangan dan Perulangan JavaScript

Bagaimana cara menggunakan loop for dan while

untuk mengulangi kode dengan JavaScript
1. Counted loop dengan menggunakan for
Struktur kode loop for

Initialization: Inisialisasi variabel loop, dijalankan sekali di awal loop.

Condition: Kondisi yang harus terpenuhi untuk menjalankan loop.
Iteration: Ekspresi yang dievaluasi setelah setiap iterasi loop (i++).
 Percabangan dan Perulangan JavaScript

Bagaimana cara menggunakan loop for dan while

untuk mengulangi kode dengan JavaScript
Contoh script loop for
 Percabangan dan Perulangan JavaScript

Bagaimana cara menggunakan loop for dan while

untuk mengulangi kode dengan JavaScript
2. Uncounted loop dengan menggunakan while
Struktur kode loop while

Perlu diperhatikan bahwa dalam loop while, harus ada pernyataan di dalam loop yang
mengubah kondisi untuk menghindari loop tak terbatas.
 Percabangan dan Perulangan JavaScript

Bagaimana cara menggunakan loop for dan while

untuk mengulangi kode dengan JavaScript
Contoh script loop while
 JavaScript DOM
JavaScript DOM
Document Object Model atau disingkat DOM adalah sebuah programming interface (API)
untuk web dokumen. DOM merepresentasikan struktur dan konten dari dokumen web dalam
bentuk node dan object supaya kita dapat mengubah struktur, style, dan konten dari dokumen
tersebut. Pada dasarnya, DOM merepresentasikan struktur dokumen dalam bentuk tree
(pohon) seperti berikut.
 JavaScript DOM
JavaScript DOM
Untuk melakukan manipulasi elemen di halaman web, kita perlu menangkap elemen yang
dituju. Langkah ini tidak bisa digunakan dengan teknik inline, melainkan dengan method atau
function dari object document. Terdapat beberapa method yang dapat digunakan dengan
menyesuaikan kondisi yang ada. Silakan simak tabel berikut ini.
No Method Keterangan
1 getElementById Mengambil elemen html berdasarkan atribut id.
2 getElementsByClassName Mengambil semua elemen html berdasarkan
atribut class yang sama.
3 getElementsByTagName Mengambil semua elemen html berdasarkan tag
yang sama.
4 querySelector Mengambil elemen html berdasarkan selector
yang spesifik.
5 querySelectorAll Mengambil semua elemen html berdasarkan
selector yang spesifik.
 JavaScript DOM
JavaScript DOM
Contoh penggunaan
 JavaScript DOM
JavaScript DOM
Ada beberapa cara untuk memanipulasi elemen menggunakan JavaScript DOM:
1. Mengubah Konten HTML
Kita bisa mengubah konten HTML menggunakan properti innerHTML.
Contoh:
 JavaScript DOM
JavaScript DOM
Tampilan
Tanpa JavaScript Dengan JavaScript
 JavaScript DOM
JavaScript DOM
2. Mengubah Value dari Atribut
Contoh Penggunaan:
 JavaScript DOM
JavaScript DOM
3. Mengubah Style/Tampilan
Contoh Penggunaan:
 JavaScript DOM
JavaScript DOM
4. Menambahkan Event
Selain untuk memanipulasi elemen HTML, DOM JavaScript juga bisa Anda manfaatkan
untuk menangani Event (Event Handling). Singkatnya, Event adalah reaksi halaman
website ketika pengguna melakukan sesuatu, beberapa event yang biasanya ditemui disuatu
website yaitu, click, mouseover, change, dan keyup.

Untuk menghandle sebuah event dengan object DOM. Kita harus memanggil method
addEventListener().
 JavaScript DOM
JavaScript DOM
Contoh Penggunaan
 JavaScript
Studi Kasus: Membuat Aplikasi Kalkulator
Index.html
 JavaScript
Studi Kasus: Membuat Aplikasi Kalkulator
style.css
 JavaScript
Studi Kasus: Membuat Aplikasi Kalkulator
script.js
Tugas Praktikum
• Buatlah sebuah Wesbite sederhana berdasarkan data yang sudah dikumpulkan
pada pertemuan sebelumnya (Analisis kebutuhan, Flow chart, Design tampilan
sistem).