JavaScript Dasar

Sebelum Belajar
● HTML
● CSS
Agenda
● Pengenalan JavaScript
● Tipe Data
● Variable
● Percabangan
● Perulangan
● Function
● Dan lain-lain
Pengenalan JavaScript
Sejarah JavaScript
● JavaScript atau sering disingkat JS, pertama kali dibuat tahun 1995. Programmer di
Netscape bernama Brandan Eich membuat sebuah bahasa pemrograman scripting
untuk berjalan di Netscape Navigator Browser.
● Awalnya namanya adalah Mocha, lalu berubah menjadi LiveScript, dan akhirnya
menjadi JavaScript.
● JavaScript dibuat agar halaman website yang sudah kita buat menggunakan HTML
dan CSS bisa lebih interaktif
● JavaScript sekarang sudah mengalahkan Java Applet dan Flash sebagai bahasa
pemrograman untuk membuat halaman web menjadi lebih interaktif, hal ini
dikarenakan kemudahan bahasa nya dan juga secara default sekarang semua
browser sudah bisa menjalankan JavaScript tanpa harus menginstall aplikasi
tambahan seperti Java Applet dan Adobe Flash Player
JavaScript di Server
● Awalnya JavaScript memang kebanyakan di gunakan untuk berjalan di client side
(Browser)
● Namun akhir-akhir ini, semenjak keluar teknologi NodeJS yang bisa digunakan untuk
menjalankan JavaScript tanpa browser, sekarang akhirnya JavaScript juga banyak
digunakan untuk membuat aplikasi di Server
● Karena ini, akhirnya sekarang JavaScript dikenal dengan bahasa pemrograman
FullStack (Backend dan Frontend) karena bisa digunakan untuk membuat aplikasi
Backend dan aplikasi Frontend
JavaScript dan ECMAScript
● Karena JavaScript sekarang hampir di adopsi oleh sebua aplikasi browser, akhirnya
dibuatlah sebuah standarisasi yang bernama ECMAScript
● Organisasi yang melakukan standarisasi ECMAScript adalah ECMA International
● Sekarang dengan adanya standarisasi, kita bisa pastikan bahwa kode program
JavaScript kita bisa jalan di semua browser, karena browser yang ingin mendukung
JavaScript, harus mengikuti standarisasi ECMAScript
● Sekarang karena ECMAScript dan JavaScript sama, sekarang bisa dibilang
ECMAScript dan JavaScript adalah dua nama untuk satu bahasa pemrograman yang
sama
● https://www.ecma-international.org/
JavaScript vs Java
● Pemula programmer sering salah tentang JavaScript dan Java. Ada yang mengira
bahwa Java dan JavaScript adalah bahasa pemrograman yang sama, padahal itu
berbeda.
● Java adalah bahasa pemrograman lain, tidak ada hubungannya dengan JavaScript
● Walaupun namanya ada kata “Java” nya, tapi dua bahasa pemrograman ini benar-
benar berbeda, tidak ada hubungannya sama sekali
● Jika tertarik untuk belajar bahasa pemrograman Java, silahkan belajar disini :
https://www.programmerzamannow.com/video-tutorial-java/
Peralatan Development
● Saat kita belajar JavaScript, kita perlu menyiapkan beberapa perangkat lunak untuk
membantu development
● Browser, ini sudah pasti, karena kita perlu menjalankan kode program JavaScript
menggunakan Browser
● Text Editor atau Integrated Development Environment, ini digunakan untuk membuat
kode program JavaScript
Browser
● Google Chrome : https://www.google.com/chrome/
● Firefox : https://www.mozilla.org/firefox/
● Microsoft Edge : https://www.microsoft.com/edge
● Safari : https://www.apple.com/safari/
● Opera : https://www.opera.com/
Text Editor atau IDE
● Visual Studio Code : http://code.visualstudiocode.com/
● Atom : https://atom.io/
● Sublime : https://www.sublimetext.com/
● WebStorm : https://www.jetbrains.com/webstorm/
● Nodepad++ : https://notepad-plus-plus.org/
● Textmate : https://macromates.com/
● GNU Emacs : https://www.gnu.org/software/emacs/
● GEdit : https://wiki.gnome.org/Apps/Gedit
Program Hello World
Membuat Kode JavaScript
● Ada beberapa cara untuk membuat kode JavaScript
● Bisa langsung di file HTML
● Atau bisa menggunakan file .js (ekstensi untuk JavaScript), lalu di include di dalam
file HTML
● Pada praktek course ini kita akan menggunakan HTML langsung agar mudah
membuat kode program nya
Script JavaScript
Include Script JavaScript
Titik Koma
● JavaScript mirip seperti bahasa pemrograman C/C++, dimana di akhir tiap statement
kode program, kita perlu menambahkan ; (titik koma)
● Namun, di JavaScript tanda ; (titik koma) tidak wajib, jadi kita bisa menambahkan
ataupun tidak.
● Sangat disarankan konsisten, jika ingin menggunakan titik koma, gunakan disemua
tempat, jika tidak, jangan gunakan di semua tempat
● Saya sendiri lebih merekomendasikan menggunakan titik koma
Komentar
Komentar
● Komentar adalah kode program yang tidak akan dieksekusi ketika dibaca
● Komentar biasanya digunakan sebagai informasi tambahan atau petunjuk
● Di JavaScript, kita bisa menambahkan kode komentar
Kode : Komentar
Tipe Data Number
Tipe Data Number
● JavaScript hanya mendukung satu tipe data number, dimana tipe data number di
JavaScript bisa berupa bilangan bulat atau bilangan desimal
● Tipe seperti di bahasa pemrograman lain yang biasanya membedakan tipe data
number bilangan bulat dan bilangan desimal, di JavaScript semuanya disatukan
Kode : Tipe Data Number
Number Notation
● JavaScript mendukung number notation, defaultnya ada basis 10, JavaScript juga
mendukung binary, hexadecimal dan octal
● Hexadecimal : 0xFF
● Binary : 0b10101
● Octal : 0o10
Tipe Data Boolean
Tipe Data Boolean
● Tipe data boolean adalah tipe data yang berisikan data kebenaran, artinya hanya
ada dua data, benar dan salah (yes atau no)
● Benar di representasikan dengan kata kunci true, dan salah direpresentasikan
dengan kata kunci false
● Walaupun tipe data boolean merupakan tipe data yang sangat sederhana, tapi tipe
data boolean akan banyak digunakan di berbagai fitur pemrograman
Kode : Tipe Data Boolean
Tipe Data String
Tipe Data String
● Tipe data string atau text adalah tipe data yang berisikan kumpulan kosong atau
lebih karakter
● Sebelumnya kita sudah pernah menggunakan string ketika membuat program hello
world.
● Di JavaScript, untuk membuat data dengan tipe string, kita perlu menggunakan “
(petik dua) atau ‘ (petik satu) sebelum dan setelah isi text nya
Kode : Tipe Data String
Menambah String
● Data string bisa digabung menggunakan operator + (plus)
Kode : Menambah String
Escape Sequence
● JavaScript mendukung escape sequence di string. Escape sequence merupakan
karakter khusus, seperti ENTER, TAB, " (kutip dua), dan lain-lain. Berikut contoh
escape sequence yang didukung oleh JavaScript di data string

\n ENTER

\t TAB

\’ ‘

\” “

\\ \
Kode : Escape Sequence
Variable
Kode : Tanpa Variable
Variable
● Variable adalah tempat untuk menyimpan data
● Dengan menyimpan data di variable, kita bisa menggunakannya lagi dengan
menyebutkan nama variable nya
● Untuk membuat variable di JavaScript, kita bisa menggunakan kata kunci var diikuti
dengan nama variable nya
● JavaScript adalah dynamic language, artinya variable di JavaScript tidak terpaku
harus menggunakan satu tipe data, kita bisa mengubah-ubah tipe data di variable
yang sama
Kode : Variable
Mengubah Value di Variable
● Setelah variable di deklarasikan, kita bisa mengubah value atau nilai di dalam
variable tersebut
● Untuk mengubahnya, kita bisa menggunakan perintah nama variable diikuti dengan
tanda = (sama dengan) lalu diikuti dengan value atau nilai nya
Kode : Mengubah Value di Variable
Membuat Variable Langsung Dengan
Value
● Di JavaScript juga kita bisa mendeklarasikan sebuah variable, langsung dengan isi
value nya
● Caranya kita bisa menggunakan kata kunci var, diikuti nama variable, lalu diikuti
dengan tanda = (sama dengan), dan di ikuti dengan value atau nilai nya
Kode : Variable dan Value
Mengakses Variable
● Salah satu keuntungan menggunakan variable adalah variable bisa digunakan
kembali
● Hal ini akan mempermudah ketika membutuhkan data yang sama berkali-kali
● Untuk mengakses variable, kita cukup menyebutkan nama variable nya
Kode : Mengakses Variable
Kata Kunci let dan const
● Sebelum tahun 2015, kata kunci untuk membuat variable hanya bisa menggunakan
kata kunci var
● Namun tahun 2015 sejak versi ECMAScript 2015, diperkenalkan kata kunci baru
untuk membuat variable, let dan const
● JavaScript sekarang tidak direkomendasikan lagi menggunakan kata kunci var untuk
membuat variable, namun diganti dengan let, hal ini dikarenakan ada masalah dari
desain awal var (akan kita bahas di chapter tersendiri)
Kode : Variable let
Kata Kunci const
● Kata kunci let itu seperti kata kunci var, dimana data di variable tersebut bisa
diubah-ubah sesuka kita
● Sedangkan kata kunci const berbeda, ketika sebuah variable sudah diisi di variable
const, maka variable tersebut tidak bisa diubah lagi value nya
● Variable sejenis ini kadang dibilang juga constant
Kode : Variable const
Operator Matematika
Operator Matematika
● JavaScript mendukung banyak sekali operator Matematika untuk tipe data Number,
seperti :
● Operator Aritmatika
● Operator Augmented Assignments
● Operator Unary
● Dan lain-lain
Operator Aritmatika
Operator Keterangan

+ Pertambahan

- Pengurangan

* Perkalian

** Exponensial

/ Pembagian

% Sisa Bagi
Kode : Operator Aritmatika
Operator Augmented Assignments
Operator Matematika Operator Augmented Assigments

result = result + 10 result += 10

result = result - 10 result -= 10

result = result * 10 result *= 10

result = result ** 10 result **= 10

result = result / 10 result /= 10

result = result % 10 result %= 10

Kode : Operator Augmented
Assigments
Operator Unary
Operator Keterangan

+ Menandakan nilai positif

- Menandakan nilai negatif

++ Increment, menaikkan 1 angka

-- Decrement, menurunkan 1 angka

Kode : Operator Unary
Operator Perbandingan
Operasi Perbandingan
● Operasi perbandingan adalah operasi untuk membandingkan dua buah data
● Operasi perbandingan adalah operasi yang menghasilkan nilai boolean (benar atau
salah)
● Jika hasil operasinya adalah benar, maka nilainya adalah true
● Jika hasil operasinya adalah salah, maka nilainya adalah false
Operator Perbandingan
Operator Keterangan

> Lebih Dari

< Kurang Dari

>= Lebih Dari Sama Dengan

<= Kurang Dari Sama Dengan

== Sama Dengan

=== Sama Dengan dan Sama Tipe

!= Tidak Sama Dengan

!== Tidak Sama Dengan atau Tidak Sama Tipe

Kode : Operasi Perbandingan
Operator Logika
Operator Logika
● Operator logika adalah operator untuk dua buah data boolean
● Hasil dari operator logika adalah boolean lagi
Operator Logika
Operator Keterangan

&& Dan

|| Atau

! Kebalikan
Operator &&
Nilai 1 Operator Nilai 2 Hasil

true && true true

true && false false

false && true false

false && false false

Operator ||
Nilai 1 Operator Nilai 2 Hasil

true || true true

true || false true

false || true true

false || false false

Operator Unary !
Operator Nilai 2 Hasil

! true false

! false true
Kode : Operator Logika
Console
Console
● JavaScript memiliki fitur untuk melakukan logging bernama Console
● Logging adalah mekanisme yang biasa dilakukan oleh programmer untuk
menampilkan informasi dari aplikasi yang sedang berjalan, tanpa harus mengganggu
alur kerja aplikasi dan juga interaksi user
● Untuk melakukan ini, kita bisa menggunakan fitur Console di JavaScript
● Untuk menggunakan Console, kita cukup gunakan perintah console di kode
JavaScript
Console Method

Console Method Keterangan

console.info(...) Memberitahu informasi

console.warn(...) Memberitahu informasi peringatan

console.error(...) Memberitahu informasi error

console.table(...) Memberitahu informasi dalam bentuk table

Kode : Console
Inspect Element di Google Chrome
String Template
String Template
● Kita sudah tahu bahwa untuk menambahkan string dengan data lain, kita bisa
menggunakan operator + (plus)
● Namun pada kasus tertentu, penggunaan operator + (plus) sangat menyulitkan,
apalagi jika dalam jumlah banyak
● JavaScript memiliki fitur yang bernama String Template, dimana kita bisa
mensubtitusi data dari luar String ke dalam String, seperti mengambil data variable,
atau bahkan melakukan operasi matematika
● Untuk menggunakan String Template, cara pembuatan String nya harus
menggunakan ` (backtick), bukan ‘ (petik satu) atau “ (petik dua)
Kode : String Template
Kode : Mengambil Variable
Kode : Expression di String Template
Multiline String
● String template juga bisa digunakan untuk membuat string multi line
● Kita cukup tambahkan enter di text nya
Kode : Multiline String
Konversi String dan Number
Konversi String dan Number
● Saat membuat aplikasi, kadang kita input dari pengguna selalu dalam bentuk String
● Sedangkan kita ingin mengelola datanya dalam bentuk Number
● Maka sangat disarankan untuk melakukan konversi tipe data
Kode : Masalah Tanpa Konversi
Melakukan Konversi String dan Number
Function Keterangan

parseInt(string) Mengkonversi dari string ke number

(bilangan bulat)

parseFloat(string) Mengkonversi dari string ke number

(bilangan pecahan)

Number(string) Mengkonversi dari string ke number

(bilangan bulat atau pecahan)

number.toString() Mengkonversi dari number ke String

Kode : Konversi String ke Number
NaN
● Bagaimana jika ternyata data string yang kita coba konversi ke number bukanlah
data yang valid?
● Jika data string yang kita coba lakukan konversi bukan lah data valid, maka hasil dari
konversi tersebut adalah NaN (Not a Number)
● NaN adalah number spesial yang menyebutkan bahwa ini bukanlah number
● Jika NaN dioperasikan dengan data number lainnya, maka hasilnya akan menjadi
NaN lagi
Kode : NaN
Kode : Operasi Pada NaN
isNaN() Function
● Kadang kita ingin mengecek apakah sebuah number itu NaN atau bukan
● Untuk melakukan pengecekan tersebut, kita bisa menggunakan function
isNaN(number)
● Hasil nya adalah berupa data boolean, true jika NaN, false jika bukan
Tipe Data Array
Tipe Data Array
● Array adalah tipe data yang berisikan kumpulan data
● Array di JavaScript memiliki sifat dinamis, artinya datanya bisa bertambah dengan
sendirinya saat kita memasukkan data ke dalam Array
Diagram Array
Kode : Membuat Array
Cara Kerja Array
● Setiap data di Array akan disimpan dalam posisi berurutan, dimana urutan pertama
dimulai dari nomor 0
● Setiap kita menambah data ke Array, otomatis data akan disimpan di urutan terakhir
● Urutan di Array, kita sebut dengan index
Cara Kerja Array
Kode : Menambah Array
Operasi di Array

Operasi Keterangan

array.push(value) Menambah data ke Array

array.length Untuk mendapatkan panjang Array

array[index] Mendapat data di posisi index

array[index] = value Mengubah data di posisi index

delete array[index] Menghapus data di posisi index, namun

index tidak bergeser
Kode : Operasi di Array
Perlu Diingat
● Data di dalam Array tidak ada batasannya harus data apa
● Jadi kita bisa memasukkan data apapun ke dalam Array
● Bahkan kita juga bisa memasukkan Array ke dalam Array jika kita mau