JAVASCRIPT

Pemrograman Dasar Javascript

DEDE NITA, S.T.

Pokok Bahasan

Pengenalan javascript
01

Cara menulis javascript

02

Variabel dan tipe data di javascript
03

6 Operator dalam Javascript
04

6 Operator percabangan
05

6 Operator pengulangan
06

Struktur Data Javascript
07

Bab 1

Pengenalan Javascript

Home

Definisi JavaScript

P02

P03

P09

Dasar
PHP

JavaScript adalah bahasa pemrograman yang berbentuk kumpulan
skrip yang biasanya digunakan untuk menambahkan interaksi antara
halaman web dengan pengunjung halaman web. JavaScript dijalankan
pada sisi klien yang akan memberikan kemampuan fitur-fitur
tambahan halaman web yang lebih baik dibandingkan fitur-fitur yang
terdapat pada HTML.
Saat ini javascript tidak hanya digunakan di sisi client (browser) saja.
Javascript juga digunakan pada server, console, program desktop,
mobile, IoT, game, dan lain-lain.

Multiple Choice

JavaScript adalah

• bahasa pemrograman yang berbentuk kumpulan
  skrip yang biasanya digunakan untuk menambahkan interaksi antara
  halaman web dengan pengunjung halaman web.

• Bahasa pemograman berbasis objek

• salah satu Bahasa scripting open source yang banyak digunakan oleh Web Developer untuk pengembangan Web.

• bahasa multiplatform yang berorientasi pada objek dan berpusat pada jaringan yang dapat digunakan sebagai platform di dalamnya

Multiple Choice

Javascript juga digunakan pada berbagai platform, kecuali....

• server

• console

• program desktop

• mobile

• netbean

Home

Definisi JavaScript

P02

P03

P09

Dasar
PHP

Javascript, seperti namanya, merupakan bahasa pemrograman
scripting.

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.

Javascript

P02

P03
Design

Principles

▪ Javascript adalah 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,
setelah itu dinamai ulang menjadi Javascript.1

▪ Terinspirasi dari kesuksesan Javascript, Microsoft mengadopsi teknologi

serupa. Microsoft membuat ‘Javascript’ versi mereka sendiri bernama JScript.
Lalu di tanam pada Internet Explorer 3.0.

▪ Hal ini mengakibatkan ‘perang browser’, karena JScript milik Microsoft berbeda

dengan Javascript racikan Netscape.

Prinsip Dasar Javascript

P02

P03
Design

Principles

Prinsip dasar yang terdapat pada bahasa pemrograman javascript adalah sebagai berikut.
▪ Javascript mendukung paradigma pemrograman imparatif (Javascript dapat menjalankan

perintah program baris demi baris, dengan masing-masing baris berisi satu atau lebih
perintah), fungsional (struktur dan elemen-elemen dalam program sebagai fungsi
matematis yang tidak memiliki keadaan (state) dan data yang dapat berubah (mutable
data)), dan orientasi objek (segala sesuatu yang terlibat dalam program dapat disebut
sebagai “objek”).

▪ Javascript memiliki model pemrograman fungsional yang sangat ekspresif.
▪ Pemrograman berorientasi objek (PBO) pada Javascript memiliki perbedaan dari PBO

pada umumnya.

▪ Program kompleks pada javascript umumnya dipandang sebagai program-program kecil

yang saling berinteraksi.

Prinsip Dasar Javascript

P02

P03
Design

Principles

JavaScript memiliki struktur sederhana, kodenya dapat
disisipkan pada dokumen HTML atau berdiri sendiri.
Struktur penulisan JavaScript dalam dokumen atau internal
berada dalam tag
script :
<script>
…
</script>

Bab 2

Cara Menulis Javascript

Bagaimana Cara Menulis Kode
Javascript di HTML?

P02

P03
Design

Principles

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

HTML)

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

Ada 4 cara menampilkan output pada Javascript:
1. Menggunakan Fungsi console.log();
2. Menggunakan Fungsi alert();
3. Menggunakan Fungsi document.write();
4. Menggunakan innerHTML.

1. Menggunakan Fungsi console.log();

Fungsi console.log() adalah fungsi untuk
menampilkan teks ke console Javascript.

Contoh penggunaan:
console.log("Hello World!");

2. Menggunakan Fungsi alert()

Fungsi alert() adalah fungsi untuk menampilkan jendela
dialog. Fungsi sebenarnya berada pada objek window.
Secara lengkap bisa ditulis seperti ini:
window.alert("Hello World!");

Bisa juga ditulis alert() saja seperti ini:
alert("Hello World!");

2. Menggunakan Fungsi alert()

3. Menggunakan Fungsi document.write()

• Objek document adalah objek yang

mewakili dokumen HTML di dalam
Javascript.

• Dalam objek document, terdapat

fungsi write() untuk menulis sesuatu
ke dokumen HTML.

4.Menggunakan innerHTML

• innerHTML adalah sebuah atribut di

dalam (objek) elemen HTML yang berisi
string HTML.

• Dengan innerHTML, kita dapat

menampilkan output ke elemen yang
lebih spesifik.

Bab 3

Variabel dan Tipe Data dalam Javascript

Variabel dalam Javascript

• Variabel adalah sebuah nama yang mewakili sebuah nilai.

Variabel bisa diisi dengan berbagai macam nilai seperti string
(teks), number (angka), objek, array, dan sebagainya.

• Kita bisa ibaratkan, variabel itu seperti wadah untuk

menyimpan sesuatu.

•
Sumber : petanikode.com

Cara Membuat Variabel di Javascript

• Cara membuat variabel yang umum digunakan di javascript

adalah menggunakan kata kunci var lalu diikuti dengan nama
variabel dan nilainya. Contoh :

• var title = "Belajar Pemrograman Javascript";
• var siteName = “Blog Saya";
• var url = "https://www.blogku.com";
• var visitorCount = 90;

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

• Karena kata kunci var dibutuhkan saat membuat variabel saja.

Sedangkan untuk mengisi ulang, kita cukup tulis seperti di atas.

• Apabila kita menggunakan kata kunci var, berarti jadinya kita

membuat variabel baru donk, bukan mengisi ulang.

Menghapus Variabel

• Penghapusan variabel dalam Javascript memang jarang dilakukan.

Namun, untuk program yang membutuhkan ketelitian dalam
alokasi memori, penghapusan variabel perlu dilakukan agar
penggunaan memori lebih optimal.

• Penghapusan variabel dapat dilakukan dengan katakunci delete.

Mengenal Tipe Data Js

Tipe data adalah jenis-jenis data yang bisa kita simpan di dalam
variabel. Ada beberapa tipe data dalam pemrograman Javascript:
• String (teks)
• Integer atau Number (bilangan bulat)
• Float (bilangan Pecahan)
• Boolean
• Object

Mengenal Tipe Data Js

Javascript adalah bahasa yang bersifat dynamic
typing, artinya kita tidak harus menuliskan tipe
data pada saat pembuatan variabel seperti pada
bahasa C, C++, Java, dsb. yang bersifat static
typing.
Javascript akan otomatis mengenali tipe data yang
kita berikan pada variabel.

Aturan Penulisan Nama Variabel di Javascript

• Penamaan variabel tidak boleh menggunakan angka di

depannya contoh var 123name = “hasan”;

• Penamaan variabel boleh menggunakan awal underscore.

Contoh var _name = “hasan” ;

• Penamaan variabel dianjurkan menggunakan camelCase

apabila tediri dari dua suku kata. Contoh var fullName =
“hasan”;

• Penamaan variabel dianjurkan menggunakan bahasa inggris.

Contoh var postTitle = "Tutorial Javascript untuk Pemula";

Bab 4

OPERATOR DALAM JAVASCRIPT

OPERATOR DALAM JAVASCRIPT

Operator adalah simbol yang digunakan untuk melakukan operasi
pada suatu nilai dan variabel. Operator dalam pemrograman terbagi
dalam 6 jenis:
• Operator aritmatika;
• Operator Penugasan (Assignment);
• Opeartor relasi atau perbandingan;
• Operator Logika;
• Operator Bitwise;
• Operator Ternary;

1.OPERATOR ARITMATIKA

Nama Operator

Simbol

Penjumlahan

+

Pengurangan

-

Perkalian

*

Pemangkatan

**

Pembagian

/

Sisa Bagi

%

LETS CODE : OPERATOR ARITMATIKA

2.Operator Penugasan

Nama Operator

Sombol

Pengisian Nilai

=

Pengisian dan Penambahan

+=

Pengisian dan Pengurangan

-=

Pengisian dan Perkalian

*=

Pengisian dan Pemangkatan

**=

Pengisian dan Pembagian

/=

Pengisian dan Sisa bagi

%=

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

LETS CODE : OPERATOR PENUGASAN

3.Operator Perbandingan

Nama Operator

Simbol

Lebih Besar

>

Lebih Kecil

<

Sama Dengan

== atau ===

Tidak Sama dengan

!= atau !==

Lebih Besar Sama dengan

>=

Lebih Kecil Sama dengan

<=

Nama Operator

Simbol

Operator

relasi

atau

perbandingan

adalah

operator

yang

digunakan

untuk

membandingkan dua nilai. Operator perbandingan akan menghasilkan sebuah nilai
boolean true dan false.

LETS CODE : OPERATOR PERBANDINGAN

4. Operator Logika

Nama Operator

Simbol

Logika AND

&&

Logika OR

||

Negasi/kebalikan

!

Operator logika digunakan untuk melakukan operasi terhadap dua
nilai Boolean. true dan false

LETS CODE : OPERATOR PERBANDINGAN

5. Operator Bitwise

Nama

Simbol di Java

AND

&

OR

|

XOR

^

Negasi/kebalikan

~

Left Shift

<<

Right Shift

>>

Left Shift (unsigned)

<<<

Right Shift (unsigned)

>>>

Operator bitwise merupkan operator yang digunakan untuk operasi
berdasarkan bit (biner).

LETS CODE : OPERATOR BITWISE

6. Operator Ternary

Jika Operator-operator sebelumnya hanya dua bagian saja, yaitu: bagian kiri dan kanan.
Atau biasa disebut operator binary.
Sedangkan Operator ternary merupakan operator yang teridiri dari tiga bagian.
Operator trinary terdiri dari bagian kiri, tengah, dan kanan

LETS CODE : OPERATOR TERNARY

Bab 5

6 PERCABANGAN DALAM JAVASCRIPT

6 Bentuk Percabangan pada Javascript

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

• Percabangan menggunakan opreator ternary merupakan

bentuk lain dari percabangan if/else.

5. Percabangan Itenary

LETS CODE : PERCABANGAN ITENARY

LETS CODE : HASIL PERCABANGAN ITENARY

6 Bentuk Percabangan pada Javascript

• Percabangan menggunakan operator ternary yang merupakan

bentuk lain dari percabangan if/else.

6. Percabangan Bersarang ( Nested )

LETS CODE : PERCABANGAN NESTED

LETS CODE : HASIL PERCABANGAN NESTED

Bab 6

PERULANGAN / LOOPING

DALAM JAVASCRIPT

PERULANGAN / LOOPING

• Perulangan akan membantu kita mengeksekusi kode yang

berulang-ulang, berapapun yang kita mau. Ada lima macam
bentuk perulangan di Javascript. Secara umum, perulangan ini
dibagi dua.

• Yaitu: counted loop dan uncounted loop.

Counted loop dan Uncounted loop

• Counted Loop merupakan

perulangan yang jelas dan sudah
jelas jumlah banyak
perulangannya.

• Sedangkan Uncounted Loop,

merupakan perulangan yang tidak
jelas berapa kali ia harus
mengulang.

Counted loop dan Uncounted loop

Perulangan yang termasuk dalam
Counted Loop:
✓ Perulangan For
✓ Perulangan Foreach
✓ Perulangan Repeat

Perulangan yang termasuk dalam
Uncounted Loop:
✓ Perulangan While
✓ Perulangan Do/While

Bentuk Perulangan pada Javascript

1. Percabangan For

LETS CODE : PERULANGAN IF

Bentuk Perulangan pada 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.

2. Percabangan While

LETS CODE : PERULANGAN WHILE

LETS CODE : HASIL PERULANGAN IF

Bentuk Perulangan pada 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.

2. Percabangan Do-While

Bentuk Perulangan pada Javascript

Perulangan do/while akan
mengecek kondisi di belakang
(sesudah mengulang),

sedangkan while akan mencek
kondisi di depan atau awal (sbelum
mengulang).

2. Percabangan Do-While

LETS CODE : PERULANGAN DO-WHILE

LETS CODE : HASIL PERULANGAN DO-WHILE

DO

-

WHILE

WHILE

Bentuk Perulangan pada 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().

4. Percabangan Foreach

LETS CODE : Cara 1. PERULANGAN FOREACH

LETS CODE : Cara ke-2 PERULANGAN FOREACH

LETS CODE : Cara ke-2 PERULANGAN FOREACH

Method forEach() memiliki
parameter berupa fungsi
callback. Sebenarnya kita juga
bisa menggunakan arrow
function seperti ini:

LETS CODE : HASIL PERULANGAN FOREACH

Bentuk Perulangan pada Javascript

5. Percabangan 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.

LETS CODE : PERULANGAN Repeat()

LETS CODE : HASIL PERULANGAN REPEAT()

Bentuk Perulangan pada Javascript

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

LETS CODE : PERULANGAN NESTED

• Pada perulangan tersebut, kita

menggunakan dua perulangan
for.

• Perulangan pertama

menggunakan variabel i sebagai
counter, sedangkan perulangan
kedua menggunakan variabel j
sebagai counter.

LETS CODE : HASIL PERULANGAN NESTED

LETS CODE : PERULANGAN NESTED

Bab 7

Struktur Data Array pada Javascript

LATAR BELAKANG Struktur Data Array Javascript

Bayangkan sekarang kita sedang membuat aplikasi web, lalu ingin menampilkan
daftar nama-nama produk.

var produk1 = "Modem";
var produk2 = "Hardisk";
var produk3 = "Flashdisk";

document.write(`${produk1}<br>`);
document.write(`${produk2}<br>`);
document.write(`${produk3}<br>`);

Boleh

-

boleh saja. Tapi kurang efektif.

Struktur Data Array pada Javascript

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

Indeks [0]

Indeks [1]

Indeks [2]

LETS CODE Struktur Data Array pada Javascript

LETS CODE Struktur Data Array pada Javascript

LETS CODE Struktur Data Array pada Javascript

Cara Menambahkan Data ke Dalam Array

• Ada dua cara yang bisa dilakukan

untuk menambah data ke dalam
array:

• Mengisi menggunakan indeks;
• Mengisi menggunakan method

push().

Cara 1 Menambahkan Data ke Dalam Array

LETS CODE Cara 2 Menambahkan Data ke Dalam Array

Cara Menghapus Data dalam Array

• seperti menambahkan data ke array, menghapus data juga

memiliki dua cara:

• 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

• Method pop() akan menghapus

array yang ada di paling belakang.

• Array pada javascript dapat kita

pandang sebagai sebuah stack
(tumpukan), yang mana memiliki
sifat LILO (Last in Last out).

LETS CODE Cara 2 Menghapus Data Dari Array ( Dari depan)

Menghapus Data pada Indeks Tertentu

• 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

• Saat kamu memutuskan akan belajar Javascript,

maka wajib hukumnya memahami tentang DOM.

• Mengapa Wajib ? Karena…
• Salah satu tugas utama Javascript di dalam web adalah

membuat halaman web agar terlihat dinamis.

• Hal ini bisa dilakukan oleh Javascript dengan bantuan DOM.

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

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.

Bagaimana Cara Menggunakan DOM?

Mengkases Elemen Tertentu dengan DOM

• Objek document adalah model

dari dokumen HTML. Objek ini
berisi kumpulan fungsi dan atribut
berupa objek dari elemen HTML
yang bisa digambarkan dalam
bentuk pohon seperti ini:

LETS CODE : Contoh DOM Sederhana

LETS CODE : Contoh DOM Sederhana

LETS CODE : Contoh DOM Sederhana

Membuat Elemen dengan DOM API

• DOM juga menyediakan fungsi untuk

membuat elemen HTML.

• Salah satunya adalah fungsi

createElement().

• Maka, akan tercipta elemen <p>

baru. Namun tidak akan ditampilkan
ke dalam halaman web.

• Mengapa tidak ditampilakn?

• Karena kita belum

menambahkannya ke dalam body
dokumen.

• Cara menambahkannya ke body

dokumen, kita bisa gunakan fungsi
append().

Membuat Elemen dengan DOM API

Menghapus Elemen dengan DOM API

• Jika kita menggunakan fungsi

append() untuk menambahkan
elemen, maka untuk
menghapusnya kita menggunakan
fungsi remove().

Menghapus Elemen dengan DOM API

Method lain dalam DOM

Thank You

Any Question ?

Tugas di Rumah

Semua latihan di slide ini dikumpulkan ke email saya :
Dengan subjek : NamaKelas_NamaMahasiswa_TugasJs

Lampirkan sintaks coding dan screenshoot hasilnya.

Daftar Referensi

1. Modul Praktikum WAD SI FRI
2. Modul Praktikum WAD Teknik Informatika FIF
3. Petanikode.com
4. Youtube.com/webprogrammingUNPAS