KKN SISTEM INFORMASI ITATS - Day 2

JAVASCRIPT
Ready up your editor!

DOM
OBJEKTIF
Day 2 - JavaScript

Pengenalan JavaScript
Basic JavaScript
Struktur Kontrol
Fungsi
Document Object Model ( DOM )
PENGENALAN
JAVASCRIPT
 APA ITU
JAVASCRIPT?
APA ITU JAVASCRIPT?
Day 2 - JavaScript

JavaScript adalah sebuah bahasa pemrograman

dengan tipe data dinamis yang digunakan untuk
mengembangkan aplikasi web interaktif.

JavaScript akan berjalan pada mesin browser yang

kita gunakan. Namun dengan bantuan runtime seperti
Node.js, JavaScript juga bisa berjalan tanpa adanya
browser.
 PERAN
JAVASCRIPT
Dalam membangun sebuah website
PERAN JAVASCRIPT
Day 2 - JavaScript

1. Menambah interaktivitas seperti:

Popup ketika menekan tombol
Fitur pencarian
Dan semua hal yang bersifat interaktif
2. DOM (Document Object Model)
Memungkinkan kita untuk merubah dan
memanipulasi konten website secara dinamis
3. Komunikasi dengan server
Sebagai alat berkomunikasi dengan server
untuk menampilkan data real time atau
keperluan server yang lain
 BASIC
JAVASCRIPT
Siapkan code editor kamu!
BASIC JAVASCRIPT
Day 2 - JavaScript

Variabel
Komentar
Operator
Aritmatika
Array
j
VARIABEL
Day 2 - JavaScript

Variabel adalah sebuah simbol yang digunakan untuk

menyimpan dan merepresentasikan data.

Sebuah variabel dapat menyimpan berbagai macam

jenis data, seperti:
Teks
Angka
Objek
dan masih banyak lagi.
VARIABEL
Day 2 - JavaScript

Dalam JavaScript, ada tiga cara untuk mendefinisikan

sebuah variabel yaitu dengan menggunakan keyword
berikut:
1. `var`
2. `let`
3. `const`

Namun tiap keyword memiliki fungsi dan keunikan

masing-masing!
VARIABEL
Day 2 - JavaScript

Keyword `var` merupakan metode lama dalam

mendefinisikan sebuah variabel dan sebaiknya tidak
untuk dipakai.

Sifat keyword `var` antara lain:

Variabel bersifat dinamis dalam arti nilai dari
variabel tersebut bisa diubah
Variabel dapat diakses secara global
VARIABEL
Day 2 - JavaScript

Keyword `let` merupakan salah satu metode

mendefinisikan sebuah variabel yang bersifat
dinamis.

Sifat keyword `let` antara lain:

Variabel bersifat dinamis dalam arti nilai dari
variabel tersebut bisa diubah
Variabel dapat diakses selama masih di dalam
k
VARIABEL
Day 2 - JavaScript

Keyword `const` merupakan salah satu metode

mendefinisikan sebuah variabel yang bersifat statis.

Sifat keyword `const` antara lain:

Variabel bersifat statis dalam arti nilai dari
variabel tersebut tidak bisa diubah
Variabel dapat diakses selama masih di dalam
cakupan yang sama
VARIABEL
Day 2 - JavaScript

Dalam pemrograman, sebuah variabel memiliki jenis

tipe datanya masing-masing. Namun dikarenakan
JavaScript merupakan bahasa pemrograman bertipe
data dinamis, jenis tipe data variabel di JavaScript
akan secara otomatis menyesuaikan dengan nilai
variabel itu sendiri.

Tipe data yang sering digunakan di JavaScript adalah:

String
Number
Boolean
VARIABEL
Day 2 - JavaScript

String adalah tipe data variabel yang berfungsi untuk

menyimpan data berupa teks. Untuk membuat sebuah
variabel string, nilai variabel harus diapit dengan
tanda petik dua atau petik satu. Ex: “test” / ‘test’

Tipe data string sering digunakan untuk menyimpan

data seperti:
Nama
Alamat
Judul lagu
dan data lainnya yang berhubungan dengan teks
VARIABEL
Day 2 - JavaScript

Number adalah tipe data variabel yang berfungsi

untuk menyimpan data angka berupa bilangan bulat
maupun desimal. Dengan menggunakan tipe data ini,
kamu bisa melakukan operasi perhitungan aritmatika
yang akan kita pelajari nanti.

Tipe data number sering digunakan untuk menyimpan

data seperti:
Uang
Usia
Jumlah barang
dan data lainnya yang berhubungan dengan
bilangan
VARIABEL
Day 2 - JavaScript

Boolean adalah tipe data variabel yang berfungsi

untuk menyimpan data bernilai status true / false.
Tipe data ini memberikan kita cara untuk mengecek
suatu status menggunakan operasi logika yang akan
kita pelajari nanti.

Tipe data boolean sering digunakan untuk menyimpan

data status true / false seperti:
Status sudah dibayar
Apakah dia perempuan?
Berikan tip ke kurir
dan data lainnya yang berhubungan dengan true /
false
KOMENTAR
Day 2 - JavaScript

Komentar adalah teks yang akan diabaikan saat

program dijalankan. Komentar biasanya digunakan
untuk memberikan penjelasan pada kodingan yang
ada.
OPERATOR ARITMATIKA
Day 2 - JavaScript

Untuk membuat sebuah operasi perhitungan Operator Fungsi

aritmatika dalam pemrograman kita dapat

+ Penjumlahan
menggunakan operator aritmatika.

- Pengurangan

* Perkalian

/ Pembagian

% Modulus

++variabel Increment

--variabel Decrement
ARRAY
Day 2 - JavaScript

Array adalah sebuah metode bagaimana cara kita

menyimpan sekumpulan data di dalam suatu tempat.
Nilai dari variabel array diapit dengan tanda kurung
siku ( [ ] ) dan tiap data harus dipisah dengan
menggunakan tanda koma ( , )

Contoh studi kasus penggunaan Array:

1. Kumpulan buku pada suatu rak
2. Makanan-makanan yang ada di kulkas
3. Mahasiswa-mahasiswa aktif di perkuliahan
 ARRAY
Day 2 - JavaScript

Setiap data pada array dapat diambil dengan

memberikan index (nomor urut) mereka. Namun
ingat! index pada array dimulai dari angka 0.
ARRAY
Day 2 - JavaScript

Variabel array di JavaScript memiliki fungsi bawaan

yang dapat kamu pakai untuk merubah atau
melakukan sesuatu pada data yang ada di dalam
array tersebut, seperti:
push()
unshift()
shift()
pop()
ARRAY
Day 2 - JavaScript

Fungsi push() digunakan untuk menambahkan data

baru di urutan terakhir dalam suatu array.

Contoh:
ARRAY
Day 2 - JavaScript

Fungsi unshift() digunakan untuk menambahkan

data baru di urutan awal ke dalam suatu array.

Contoh:
ARRAY
Day 2 - JavaScript

Fungsi shift() digunakan untuk menghapus data

paling awal dalam suatu array.

Contoh:
ARRAY
Day 2 - JavaScript

Fungsi pop() digunakan untuk menghapus data

paling akhir dalam suatu array.

Contoh:
OBJECT
Day 2 - JavaScript

Object merupakan sebuah tipe data kompleks yang

digunakan untuk mengorganisasi dan
mengelompokkan nilai dan fungsi.

Nilai-nilai didalam sebuah object akan disimpan di

dalam properti object tersebut.

Object sering digunakan untuk mengelompokkan

data yang ada didalam satu konteks atau entitas,
seperti object Harimau berikut 👉
STRUKTUR KONTROL
Day 2 - JavaScript

If-else
Switch
case
IF-ELSE
Day 2 - JavaScript

If-else merupakan salah satu struktur pengendalian

alur program yang memungkinkan kita untuk
membuat keputusan berdasarkan kondisi tertentu.

Komponen utama pada if-else antara lain:

1. Kondisi: Jika kondisi bernilai true, maka block
kode di dalam if tersebut akan dijalankan; jika
kondisi bernilai false, maka program akan
berpindah ke kondisi selanjutnya.
2. Blok kode if-else: Blok kode yang akan dijalankan
apabila kondisi pada pernyataan if bernilai true.
SWITCH CASE
Day 2 - JavaScript

Switch case merupakan cara lain untuk membuat

keputusan berdasarkan nilai ekspresi yang diberikan
kepada switch.

Komponen utama pada if-else antara lain:

Ekspresi: Nilai yang akan dibandingkan dengan
nilai-nilai dalam setiap case.
Case: Setiap case berisi nilai yang akan
dibandingkan dengan nilai ekspresi. Apabila nilai
didalam case tidak sesuai dengan nilai ekspresi,
program akan melanjutkan pengecekan ke case
berikutnya.
SWITCH CASE
Day 2 - JavaScript

Break: Sebagai penanda untuk keluar dari

struktur case setelah seluruh kode di dalam blok
case dijalankan.
Default: Blok kode yang akan dijalankan apabila
tidak ada case yang sesuai dengan nilai ekspresi
yang diberikan.
LOOPS
Day 2 - JavaScript

Loops atau perulangan adalah konsep dalam

pemrograman yang memungkinkan kamu untuk
menjalankan intruksi atau blok kode secara berulang
kali selama suatu kondisi terpenuhi. Loops sering
digunakan untuk otomatisasi eksekusi kode yang
seurpa tanpa menulis ulang intruksi yang sama
berulang kali.

Jenis-jenis loops yang sering digunakan:

For
While
Array.forEach
 FOR
Day 2 - JavaScript

For loop digunakan untuk melakukan perulangan

dengan 3 komponen utama yaitu inisialisasi, kondisi,
dan iterasi.

Contoh penggunaan for loop untuk menjalankan

intruksi selama 5 kali 👉
Output pertama bernilai 0 karena kita
menginisialisasikan variabel i dengan nilai 0 di bagian
inisialisasi.
WHILE
Day 2 - JavaScript

While loop digunakan untuk melakukan perulangan

dengan hanya satu komponen utama yaitu kondisi.
Intruksi yang ada di dalam blok kode while akan
dijalankan selama kondisi bernilai true.

Contoh penggunaan while loop untuk menjalankan

intruksi sebanyak 10 kali 👉
Kode tersebut berjalan 10 kali karena while loop akan
berjalan selama variabel “i” di bawah sama dengan
10, apabila variabel “i” sudah diatas 10 maka while
loop akan berhenti.
ARRAY.FOREACH
Day 2 - JavaScript

Kamu bisa menggunakan fungsi forEach bila ingin

mengambil data yang ada di sebuah array satu
persatu.

Untuk menjalankan forEach pada suatu array, kamu

hanya perlu memanggil fungsi tersebut seperti
contoh berikut 👉
FUNCTION
Day 2 - JavaScript

Fungsi digunakan untuk mengelompokkan kode-

kode kamu dengan sebuah nama yang dapat kamu
panggil kapan-pun.

Fungsi sering digunakan untuk mengurangi

penulisan kode yang sama berulang-ulang, kamu
cukup memanggil fungsi tersebut kapan-pun sesuai
yang kamu inginkan.

Fungsi juga bisa memiliki parameter. Parameter

adalah nilai yang diberikan ke fungsi tersebut untuk
diproses sesuai kebutuhanmu.
FUNCTION
Day 2 - JavaScript

Fungsi juga dapat mengembalikan nilai dengan

pernyataan return seperti contoh berikut 👉
Untuk menjalankan suatu fungsi, kamu hanya cukup
memanggil nama fungsi tersebut.

Variabel hasil pada contoh di sebelah akan berisi nilai

5 karena kita memasukkan nilai 2 dan 3 sebagai
paramater (2 sebagai angka1 dan 3 sebagai angka2).
Fungsi tambah akan mengembalikan nilai hasil
penjumlahan kedua parameter yaitu 5.
FUNCTION
Day 2 - JavaScript

Fungsi di JavaScript dapat didefinisikan dalam dua

cara:
1. Regular Function
2. Arrow Function

Selain cara penulisannya, salah satu perbedaan

dari kedua jenis fungsi tersebut adalah arrow
function hanya bisa diakses setelah fungsi
tersebut dideklarasikan.
 DOM
(Document Object Model)
DOM
Day 2 - JavaScript

DOM atau Document Object Model adalah

representasi elemen HTML di dalam JavaScript.

Fungsi DOM:
1. Manipulasi konten, seperti merubah text di dalam
tag <div>.
2. Manipulasi atribut, seperti mengubah class yang
digunakan oleh suatu tag.
3. Event handling, seperti ingin melakukan sesuatu
ketika sebuah tombol ditekan.
DOM: Selector
Day 2 - JavaScript

Selector berfungsi untuk mencari dan memilih suatu

elemen untuk kamu manipulasi atau proses lainnya.

Macam-macam selector yang sering digunakan:

1. document.getElementById
2. document.getElementsByClassName
3. document.querySelector
4. document.querySelectorAll
DOM: Selector
Day 2 - JavaScript

getElementById: getElementsByClassName:
Mengambil satu elemen HTML berdasarkan id yang Mengambil elemen-elemen HTML berdasarkan class
diberikan. yang diberikan. Namun fungsi ini akan memberikan
nilai berupa array yang berisi elemen-elemen yang
memiliki class yang sesuai (tidak hanya satu elemen).
DOM: Manipulation
Day 2 - JavaScript

DOM memiliki fungsi bawaan yang dapat kamu

gunakan untuk berbagai hal seperti merubah atau
mengambil isi/konten, class, atau atribut suatu
elemen.

Fungsi manipulasi yang sering digunakan:

1. innerHTML
2. classList
3. getAttribute
4. setAttribute
5. append
DOM: Manipulation
Day 2 - JavaScript

InnerHTML
Digunakan untuk mengambil atau merubah isi konten
sebuah elemen. Cara menggunakan fungsi ini
sebagai berikut 👉
DOM: Manipulation
Day 2 - JavaScript

classList
Digunakan untuk mengambil atau merubah class
sebuah elemen. Cara menggunakan fungsi ini
sebagai berikut 👉
Kamu bisa menggunakan fungsi add atau remove
untuk merubah class pada elemen tersebut.
DOM: Manipulation
Day 2 - JavaScript

getAttribute
Digunakan untuk mengambil data atribut dari sebuah
elemen. Cara menggunakan fungsi ini sebagai
berikut 👉
setAttribute
Digunakan untuk mengubah data atribut dari sebuah
elemen. Cara menggunakan fungsi ini sebagai
berikut 👉
DOM: Manipulation
Day 2 - JavaScript

appendChild
Digunakan untuk menambahkan elemen kedalam
sebuah elemen lainnya.

Kamu bisa menggunakan fungsi createElement untuk

membuat sebuah elemen yang nantinya kamu
tambahkan kedalam elemen lainnya seperti contoh
berikut 👉
 SEE YOU ON

18 Juni 2025
Jangan lupa yaa!
Semoga ilmunya bermanfaat!