W3 JavaScript
W3 JavaScript
2 HTML, CSS dan Java Script 10 Model View Controller pada Framework
Laravel
Kesimpulan Pustaka
Pokok Bahasan 01 Pengenalan javascript
05 6 Operator percabangan
06 6 Operator pengulangan
09
10
11
12
13
14
Capaian Pembelajaran
Home P02 Kemampuan menganalisis permasalahan, melakukan
identifikasi dan mendefinisikan kebutuhan komputasi
Yang bersesuaian dengan solusi
P09
Definisi JavaScript
Javascript, seperti namanya, merupakan bahasa pemrograman
Home scripting.
P02 Dan seperti Bahasa scripting lainnya, Javascript
umumnya digunakan hanya untuk program yang tidak terlalu besar,
biasanya hanya beberapa ratus baris. Javascript pada umumnya
mengontrol program yang berbasis Java. Jadi memang pada
dasarnya Javascript tidak dirancang untuk digunakan dalam
aplikasi skala besar.
Dasar P03
PHP
P09
Javascript
P02
Design P03
Principles
Petanicode.com
Javascript
▪ Javascript adalahP02
bahasa pemrograman yang awalnya dirancang untuk
berjalan di atas browser. Namun, seiring perkembangan zaman, javascript tidak
hanya berjalan di atas browser saja. Javascript juga dapat digunakan pada sisi
Server, Game, IoT, Desktop, dsb.
▪ Javascript awalnya bernama Mocha, lalu berubah menjadi LiveScript saat
browser Netscape Navigator 2.0 rilis versi beta (September 1995). Namun,
Design setelah itu P03
dinamai ulang menjadi Javascript. 1
P02
JavaScript memiliki struktur sederhana, kodenya dapat
disisipkan pada dokumen HTML atau berdiri sendiri.
Struktur penulisan JavaScript dalam dokumen atau internal
berada dalam tag
P03
script :
Design
Principles
<script>
…
</script>
Bab 2
Cara Menulis Javascript
Bagaimana Cara Menulis Kode
Javascript di HTML?
P02
1. Embed (Kode Javascript ditempel langsung pada HTML.
Contoh: slide setelah ini)
2. Inline (kode Javascript ditulis pada atribut HTML)
3. Eksternal (Kode Javascript ditulis terpisah dengan file
Design HTML) P03
Principles
LETS CODE Penulisan Kode javascript
dengan Embed
LETS CODE Penulisan Kode javascript
Inline
LETS CODE Penulisan Kode javascript
Eksternal
4 Cara Menampilkan Output pada
Javascript
(petanicode.com)
1. Menggunakan Fungsi console.log();
Contoh penggunaan:
console.log("Hello World!");
2. Menggunakan Fungsi alert()
• Sumber : petanikode.com
Cara Membuat Variabel di Javascript
• Perlu kamu ketahui juga, selain kata kunci var kita juga bisa
membuat variabel dengan kata kunci let atau tanpa awalan
apapun.
LETS CODE Membuat Variabel di Javascript
Mengisi Ulang Variabel
• Variabel bersifat mutable, artinya nilai yang tersimpan di dalamnya
dapat kita isi ulang (berubah).
1. Percabangan if
LETS CODE : PERCABANGAN IF
LETS CODE : HASIL PERCABANGAN IF
6 Bentuk Percabangan pada Javascript
2. Percabangan if / else
LETS CODE : PERCABANGAN IF ELSE
LETS CODE : HASIL PERCABANGAN IF ELSE
6 Bentuk Percabangan pada Javascript
3. Percabangan if / else / if
LETS CODE : PERCABANGAN IF ELSE 2
LETS CODE : HASIL PERCABANGAN IF ELSE - 2
LETS CODE : PERCABANGAN IF ELSE 3
LETS CODE : HASIL PERCABANGAN IF ELSE - 3
6 Bentuk Percabangan pada Javascript
4. Percabangan switch
LETS CODE : PERCABANGAN SWITCH
LETS CODE : HASIL PERCABANGAN SWITCH
6 Bentuk Percabangan pada Javascript
5. Percabangan Itenary
1. Percabangan For
LETS CODE : PERULANGAN IF
Bentuk Perulangan pada Javascript
2. Percabangan While
• Perulangan while merupakan
perulangan yang termasuk dalam
perulangan uncounted loop.
• Perulangan while juga dapat
menjadi perulangan yang counted
loop dengan memberikan counter
di dalamnya.
LETS CODE : PERULANGAN WHILE
LETS CODE : HASIL PERULANGAN IF
Bentuk Perulangan pada Javascript
2. Percabangan Do-While
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.
Bentuk Perulangan pada Javascript
2. Percabangan Do-While
Perulangan do/while akan
mengecek kondisi di belakang
(sesudah mengulang),
DO-WHILE
WHILE
Bentuk Perulangan pada Javascript
4. Percabangan Foreach
Perulangan foreach biasanya digunakan untuk
mencetak item di dalam array.
Bayangkan sekarang kita sedang membuat aplikasi web, lalu ingin menampilkan
daftar nama-nama produk.
document.write(`${produk1}<br>`);
document.write(`${produk2}<br>`);
document.write(`${produk3}<br>`);
Struktur Data Array pada Javascript
• Menggunakan delete;
• Menggunakan method pop().
Cara 1 Menghapus Data Dari Array
LETS CODE Cara 2 Menghapus Data Dari Array
Cara 2 Menghapus Data Dari Array
• Apabila kita ingin menghapus data pada inteks tertentu, maka fungsi
atau method yang digunakan adalah splice().
• Fungsi ini memiliki dua parameter yang harus diberikan:
• Keterangan:
• <indeks> adalah indeks dari data di dalam array yang akan dihapus;
• <total> adalah jumlah data yang akan dihapus dari indeks tersebut.
Menghapus Data pada Indeks Tertentu
Menghapus Data pada Indeks Tertentu
Mengubah Isi Data Pada Array
Method-mothod Array Lain
• 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.
Method-mothod Array Lain
Method-mothod Array Lain
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.
Method-mothod Array Lain
Method-mothod Array Lain
• 3. Method sort()
Method sort() berfungsi untuk
mengurutkan data pada array
Method-mothod Array Lain
Bab 8
DOM JavaScript
DOM API Js