Scribd
Unggah
20 tayangan

Javascript Short

Dokumen tersebut membahas tentang Javascript sebagai bahasa pemrograman yang awalnya didesain untuk berjalan di browser namun kini juga dapat digunakan di berbagai platform lainnya, serta menjelaskan perkembangan standarisasi Javascript melalui ECMAscript.

Diunggah oleh

maxiemakassar
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
20 tayangan

Javascript Short

Dokumen tersebut membahas tentang Javascript sebagai bahasa pemrograman yang awalnya didesain untuk berjalan di browser namun kini juga dapat digunakan di berbagai platform lainnya, serta menjelaskan perkembangan standarisasi Javascript melalui ECMAscript.

Diunggah oleh

maxiemakassar
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 44

Pemrograman Javascript

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.

Akhirnya pada tahun 1996, Netscape mengirimkan standarisasi ECMA-262 ke Ecma


International. Sehingga lahirlah standarisasi kode Javascript bernama ECMAScript atau
ES. Saat ini ECMAScript sudah mencapai versi 8 (ES8). 2

Versi
Tahun Rilis
ECMAScript

ES 1 Juni 1997

ES 2 Juni 1998

ES 3 Desember 1999

ES 4 Terbengkalai

ES 5 Desember 2009

ES 5.1 Juni 2011

ES 6 Juni 2015

ES 7 Juni 2016

ES 8 Juni 2017

Peralatan untuk Belajar Javascript


Apa saja perlatan yang harus disiapkan untuk belajar Javascript?

1. Web Browser (Google Chrome, Firefox, Opera, dll)


2. Teks Editor (rekomendasi: VS Code)
Mengenal Console JavaScript
Ada yang mengatakan, belajar javascript itu susah, karena saat melihat hasilnya di web
browser, pesan error-nya tidak tampil. Pendapat ini tidak benar. Karena kita bisa
melihatnya melalui console.

Console Javascript dapat kita buka melalui Inspect Element->Console.

Di dalam console, kita bisa menulis fungsi atau kode-kode javascript dan hasilnya akan
langsung ditampilkan.

Misalnya, mari kita coba kode berikut:

console.log("Hi apa kabar!");


alert("Saya sedang belajar javascript");
Maka hasilnya:
Membuat Program Javascript Pertama

Silahkan buka teks editor, kemudian buat file beru bernama hello_world.html dan isi
dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
<title>Hello World Javascript</title>
</head>
<body>
<script>
console.log("Saya belajar Javascript");
document.write("Hello World!");
</script>
</body>
</html>
Jika kamu menggunakan teks editor VS Code, maka akan terlihat seperti ini:
Silahakn disimpan dengan nama hello_world.html, kemudian buka file tersebut dengan
web browser.

Maka hasilnya:

Tunggu sebantar…

Tadi kita menulis perintah:

console.log("Saya belajar Javascript");


Mengapa tidak ditampilkan?

Karena perintah atau fungsi console.log() akan menampilkan pesan ke


dalam console javascript. Sedangkan perintah document.write() berfungsi untuk menulis
ke dokumen HTML, maka dia akan ditampilkan kesana.

Sekarang coba saja buka console javascript.

Maka kita akan melihat pesan "Saya belajar Javascript":

Bagaimana Cara Menulis Kode Javascript di HTML?


Pada contoh di atas, kita sudah menulis kode javascript di dalam HTML.

Cara tersebut merupakan cara penulisan embeded (ditempel).

Masih ada beberapa cara lagi yang perlu kita ketahui:

1. Embed (Kode Javascript ditempel langsung pada HTML. Contoh: yang tadi)
2. Inline (kode Javascript ditulis pada atribut HTML)
3. Eksternal (Kode Javascript ditulis terpisah dengan file HTML)
1. Penulisan Kode javascript dengan Embed
Pada cara ini, kita menggunakan tag <script> untuk menempelkan (embed) kode
Javascript pada HTML. Tag ini dapat ditulis di dalam tag <head> dan <body>.

Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript dari Nol</title>
<script>
// ini adalah penulisan kode javascript
// di dalam tag <head>
console.log("Hello JS dari Head");
</script>
</head>
<body>
<p>Tutorial Javascript untuk Pemula</p>
<script>
// ini adalah penulisan kode javascript
// di dalam tag <body>
console.log("Hello JS dari body");
</script>
</body>
</html>
Mana yang lebih bagus, ditulis di dalam <head> atau <body>?

Banyak yang merekomendasikan menuliskannya di dalam <body>, karena akan


membuat web di-load lebih cepat.

2. Penulisan Kode javascript Inline


Pada cara ini, kita akan menulis kode javascript di dalam atribut HTML. Cara ini
biasanya digunakan untuk memanggil suatu fungsi pada event tertentu.

Misal: saat link diklik.

Contoh:

<a href="#" onclick="alert('Yey!')">Klik aku!</a>


atau bisa juga seperti ini:

<a href="javascript:alert('Yey!')">Klik aku!</a>


Hasilnya:
Perhatikan…

Pada atribut onclick dan href kita menuliskan fungsi javascript di sana.

Atribut onclick merupakan atribut HTML untuk menyatakan fungsi yang akan dieksekusi
saat elemen itu diklik.

Pada contoh di atas, kita menjalankan fungsi alert(). Fungsi ini merupakan fungsi
untuk menampilkan dialog.

Lalu pada atribut href, kita juga memanggil fungsi alert() dengan
didahului javascript:.

Atribut href sebenarnya digunakan untuk mengisi alamat link atau URL.

Karena kita ingin memanggil kode javascript di sana, maka alamat link tersebut kita
ubah menjadi javascript: lalu diikuti dengan fungsi yang akan dipanggil.

3. Penulisan Kode javascript Eksternal


Pada cara ini, kita akan menulis kode javascript secara terpisah dengan file HTML.

Cara ini biasanya digunakan pada proyek-proyek besar, karena diyakini—dengan cara
ini—dapat lebih mudah mengelola kode project.

Mari kita lihat contohnya…

Kita buat dua file, yaitu: file HTML dan Javascript.

belajar-js/
├── kode-program.js
└── index.html
Isi dari file kode-program.js:

alert("Hello, ini adalah program JS eksternal!");


Isi dari file index.html:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript dari Nol</title>
</head>
<body>
<p>Tutorial Javascript untuk Pemula</p>

<!-- Menyisipkan kode js eksternal -->


<script src="kode-program.js"></script>
</body>
</html>
Hasilnya:

Pada contoh di atas, kita menulis kode javascript terpisah dengan kode HTML.

Lalu, pada kode HTML…

Kita menyisipkannya dengan memberikan atribut src pada tag <script>.

<!-- Menyisipkan kode js eksternal -->


<script src="kode-program.js"></script>
Maka, apapun yang ada di dalam file kode-program.js akan dapat dibaca dari
file index.html.

Bagaimana kalau file javascriptnya berada di folder yang berbeda?

Kita bisa menuliskan alamat lengkap foldernya.


Contoh:

Misal kita punya struktur folder seperti ini:

belajar-js/
├── js/
| └── kode-program.js
└── index.html
Maka untuk menyisipkan file kode-program.js ke dalam HTML, kita bisa menuliskannya
seperti ini:

<script src="js/kode-program.js"></script>
Karena file kode-program.js berada di dalam direktori js.

Kita juga bisa menyisipkan javascript yang ada di internet dengan memberikan alamat
URL lengkapnya.

Contoh:

<script src="https://www.petanikode.com/js/kode.js"></script>

Javascript - Memahami Variabel dan Tipe Data


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";


Pada contoh di atas, kita membuat variabel bernama title dengan nilai berupa
teks (string): "Belajar Pemrograman Javascript".

Contoh lagi:

var siteName = "Petani Kode";


var url = "https://www.petanikode.com";
var visitorCount = 5921;
Perhatikan!

Pada contoh di atas, kita menggunakan huruf bersar atau kapital untuk nama variabel
yang terdiri dari dua suku kata.

Kenapa tidak menggunakan underscore?

Pada Javascript kita dianjurkan menggunakan camelCase dalam penamaan. Boleh-


boleh saja menggunakan snake case atau underscore seperti ini:

var site_name = "Petani Kode";


var visitor_count = 1243;
Hal tersebut tidak akan menjadi masalah, program masih tetap valid. Namun, mayoritas
programmer Javascript menggunakan camelCase.

Perlu kamu ketahui juga, selain kata kunci var kita juga bisa membuat variabel dengan
kata kunci let atau tanpa awalan apapun.

Contoh:

// membuat variabel dengan kata kunci let


let price = 15000;

// membuat variabel tanpa awalan apapun


stock = 12
Apa bedanya yang menggunakan var, let dan yang tanpa awalan?

Perbedaannya terletak pada jangkauan dan penggunaanya. Nanti kita akan bahas lebih
dalam lagi.

Satu lagi pertanyaan:

“Apa yang akan terjadi jika nilai variabel tidak diisi?”

Jawabannya, variabel akan bernilai undefined (belum ditentukan).

Contoh:

var x;
Maka variabel x akan bernilai undefined.

Menampilkan isi Variabel


Untuk menampilkan isi variabel, kita bisa memanfaatkan fungsi-fungsi untuk
menampilkan output seperti:

 Fungsi console.log() menampilkan output ke console javascript;


 Fungsi document.write() menampilkan output ke dokumen HTML;
 dan Fungsi alert() menampilkan output ke jendela dialog.

Mari kita coba…

Buatlah file bernama belajar-variabel.html, lalu isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Variabel dalam Javascript</title>
<script>
// membuat variabel
var name = "Petani Kode";
var visitorCount = 50322;
var isActive = true;
var url = "https://www.petanikode.com";

// menampilkan variabel ke jendela dialog (alert)


alert("Selamat datang di " + name);

// menampilkan variabel ke dalam HTML


document.write("Nama Situs: " + name + "<br>");
document.write("Jumlah Pengunjung: " + visitorCount + "<br>");
document.write("Status Aktif: " + isActive + "<br>");
document.write("Alamat URL: " + url + "<br>");
</script>
</head>
<body>

</body>
</html>
Setelah itu, coba buka dengan browser dan perhatikanlah hasilnya.

Arti simbol plus (+) pada contoh di atas adalah menggabungkan, bukan menjumlahkan.

Mengisi Ulang Variabel


Variabel bersifat mutable, artinya nilai yang tersimpan di dalamnya dapat kita isi ulang
(berubah).

Contoh:

// mula-mula kita buat variabel dengan isi seperti ini


var age = 18;

// lalu kita isi ulang


age = 21;
Kenapa saat mengisi ulang nilai variabel tidak menggunakan kata kunci var?

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

Contoh:

bookTitle = "Belajar Pemrograman Javascript";


delete bookTitle;
Maka variabel bookTitle akan menghilang dari memori.

Penghapusan variabel hanya bisa dilakukan pada variabel yang dibuat tanpa awalan.
Sedangkan variabel yang dibuat dengan kata kunci var dan let akan dihapus otomatis.

Mengenal Tipe Data


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  https://www.malasngoding.com/belajar-javascript-part-5-mengenal-tipe-
data-pada-javascript/

 https://medium.easyread.co/php-series-tipe-data-7d389bd5d5eb

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.

Contoh:

var name = "Dian";


var age = 22;
var single = true;
Javascript akan otomatis mengenali tipe data yang kita berikan pada variabel.

Pada contoh di atas variabel:

 name bertipe data String;


 age bertipe data integer;
 dan single bertipe data boolean.

Hal ini bisa juga kita cek dengan kata kunci typeof.

Contoh:

typeof name;
typeof age;
typeof single;
Hasilnya pada console:

Bagaimana cara kita mengenali tipe data selain menggunakan typeof?

Kita bisa mengenali melalui cara penulisannya.

Contoh:

// untuk tipe data teks atau string penulisannya selalu diapit dengan tanda petik
var author = "Petani Kode";

// sedangkan untuk tipe data number dan boolean tidak diapit dengan tanda petik
var available = true; // <- tipe data boolean hanya bernilai true dan false
var total = 14;
Aturan Penulisan Nama Variabel di Javascript
Ada beberapa aturan penulisan variabel dalam Javascript:

 Penamaan variabel tidak boleh menggunakan angka di depannya.

contoh:

// salah
var 123nama = "Petanikode";

// benar
var nama123 = "Petani Kode";
 Penamaan variabel boleh menggunakan awal underscore.

contoh:

var _nama = "Petani Kode";


 Penamaan variabel dianjurkan menggunakan camelCase apabila tediri dari dua
suku kata.

Contoh:

var fullName = "Petani Kode";


 Penamaan variabel dianjurkan menggunakan bahasa inggris

Contoh:

var postTitle = "Tutorial Javascript untuk Pemula";


Apa Selanjutnya?
Variabel dan tipe data merupakan dua hal dasar yang wajib di pelajari dalam bahasa
pemrograman apapun.

Pada Javascript, kita tidak harus menuliskan tipe data saat pembuatan variabel, karena
Javascript bersifat dynamic typing.

Sedangkan pada bahasa pemrograman yang lain seperti C, C++, C#, Java, dan lain-
lain, kita harus menuliskan atau mendefinisikan tipe data pada variabel yang dibuat.
Memahami Percabangan di Javascript
1. Percabangan if
Percabangan if merupakan percabangan yang hanya memiliki satu blok pilihan saat
kondisi bernilai benar.

Coba perhatikan flowchart berikut ini:

Flowchart tersebut dapat kita baca seperti ini:

“Jika total belanja lebih besar dari Rp 100.000, Maka tampilkan pesan Selamat, Anda
dapat hadiah”

Kalau dibawah Rp 100.000 bagaimana?

Ya pesannya tidak ditampilkan.

Mari kita coba dalam program Javascript:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if</title>
</head>
<body>
<script>
var totalBelanja = prompt("Total belanja?", 0);
if(totalBelanja > 100000){
document.write("<h2>Selamat Anda dapat hadiah</h2>");
}

document.write("<p>Terimakasih sudah berbelanja di toko kami</p>");


</script>
</body>
</html>
Hasilnya:

Perhatikan bagian ini:

if(totalBelanja > 100000){


document.write("<h2>Selamat Anda dapat hadiah</h2>");
}
Ini yang disebut blok.

Blok program pada Javascript, diawali dengan tanda buka kurung kurawal { dan diakhiri
dengan tutup kurung kurawal }.

Apabila di dalam blok hanya terdapat satu baris ekspresi atau statement, maka boleh
tidak ditulis tanda kurungnya.

if(totalBelanja > 100000)


document.write("<h2>Selamat Anda dapat hadiah</h2>");
2. Percabangan if/else
Percabangan if/else merupakan percabangan yang memiliki dua blok pilihan.

Pilihan pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah (else).
Coba perhatikan flowchart ini:

Ini adalah flowchart untuk mengecek password.

Apabila password benar, pesan yang ada pada blok hijau akan ditampilkan: “Selamat
datang bos!"

Tapi kalau salah, maka pesan yang ada di blok merah yang akan
ditampilkan: “Password salah, coba lagi!"

Kemudian, pesan yang berada di blok abu-abu akan tetap ditampilkan, karena dia bukan
bagian dari blok percabangan if/else.

Perhatikan arah panahnya, setiap blok if/else mengarah ke sana…


Untuk lebih jelasnya, mari kita coba dalam program:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if/else</title>
</head>
<body>
<script>
var password = prompt("Password:");

if(password == "kopi"){
document.write("<h2>Selamat datang bos!</h2>");
} else {
document.write("<p>Password salah, coba lagi!</p>");
}

document.write("<p>Terima kasih sudah menggunakan aplikasi ini!</p>");

</script>
</body>
</html>
Hasilnya:
3. Percabangan if/else/if
Percabangan if/else/if merupakan percabangan yang memiliki lebih dari dua blok
pilihan.

Coba perhatikan flowchart berikut:


Perhatikan blok yang saya beri warna…

Ini adalah blok untuk percabangan if/else/if. Kita bisa menambahkan berapapun blok
yang kita inginkan.

Contoh Program:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if/else/if</title>
</head>
<body>
<script>
var nilai = prompt("Inputkan nilai akhir:");
var grade = "";

if(nilai >= 90) grade = "A"


else if(nilai >= 80) grade = "B+"
else if(nilai >= 70) grade = "B"
else if(nilai >= 60) grade = "C+"
else if(nilai >= 50) grade = "C"
else if(nilai >= 40) grade = "D"
else if(nilai >= 30) grade = "E"
else grade = "F";

document.write(`<p>Grade anda: ${grade}</p>`);


</script>
</body>
</html>
Hasilnya:

Pada program di atas, kita tidak menggunaka kurung kurawal untuk membuat blok kode
untuk if/else/if.

karena hanya terdapat satu baris perintah saja. Yaitu: grade = ....

Bila kita menggunakan kurung kurawal, maka program di atas akan menjadi seperti ini:

<script>
var nilai = prompt("Inputkan nilai akhir:");
var grade = "";
if (nilai >= 90){
grade = "A"
} else if(nilai >= 80) {
grade = "B+"
} else if(nilai >= 70) {
grade = "B"
} else if(nilai >= 60) {
grade = "C+"
} else if(nilai >= 50) {
grade = "C"
} else if(nilai >= 40) {
grade = "D"
} else if(nilai >= 30) {
grade = "E"
} else {
grade = "F";
}
document.write(`<p>Grade anda: ${grade}</p>`);
</script>
4. Percabangan switch/case
Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.

Strukturnya seperti ini:

switch(variabel){
case <value>:
// blok kode
break;
case <value>:
// blok kode
break;
default:
// blok kode
}
Kita dapat mermbuat blok kode (case) sebanyak yang diinginkan di dalam blok switch.

Pada <value>, kita bisa isi dengan nilai yang nanti akan dibandingkan dengan varabel.

Setiap case harus diakhiri dengan break. Khusus untuk default, tidak perlu diakhiri
dengan break karena dia terletak di bagian akhir.

Pemberian break bertujuan agar program berhenti mengecek case berikutnya saat
sebuah case terpenuhi.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan switch/case</title>
</head>
<body>
<script>
var jawab = prompt("Kamu beruntung! Silahakn pilih hadiahmu dengan
memasukan angka 1 sampai 5");
var hadiah = "";

switch(jawab){
case "1":
hadiah = "Tisu";
break;
case "2":
hadiah = "1 Kotak Kopi";
break;
case "3":
hadiah = "Sticker";
break;
case "4":
hadiah = "Minyak Goreng";
break;
case "5":
hadiah = "Uang Rp 50.000";
break;
default:
document.write("<p>Opps! anda salah pilih</p>");
}

if(hadiah === ""){


document.write("<p>Kamu gagal mendapat hadiah</p>");
} else {
document.write("<h2>Selamat kamu mendapatkan " + hadiah + "</h2>");
}
</script>
</body>
</html>
Hasilnya:

Percabangan switch/case juga dapat dibuat seperti ini:


var nilai = prompt("input nilai");
var grade = "";

switch(true){
case nilai < 90:
grade = "A";
break;
case nilai < 80:
grade = "B+";
break;
case nilai < 70:
grade = "B";
break;
case nilai < 60:
grade = "C+";
break;
case nilai < 50:
grade = "C";
break;
case nilai < 40:
grade = "D";
break;
case nilai < 30:
grade = "E";
break;
default:
grade = "F";
}
Pertam-tama, kita berikan nilai true pada switch, ini agar kita bisa masuk ke dalam
blok switch.

Lalu di dalam blok switch, kita buat kondisi dengan menggunakan case.

Hasilnya akan sama seperti pada contoh percabangan if/else/if.

5. Percabangan dengan Operator Ternary


Percabangan menggunakan opreator ternary merupakan bentuk lain dari
percabangan if/else.

Bisa dibilang:

Bentuk singkatnya dari if/else.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Ternary</title>
</head>
<body>
<script>
var jwb = prompt("Apakah Jakarta ibu kota indonesia?");

var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";


document.write(`Jawaban anda: <b>${jawaban}</b>`);
</script>
</body>
</html>
Fungsi dari method toUpperCase() untuk mengubah teks yang diinputkan menjadi huruf
kapital semua.

Hasilnya:

Opertor ternary berperan sebagai percabangan if/else:

var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";


Apabila kondisi yang ada di dalam kurung—(jwb.toUpperCase() == "IYA")—
bernilai true, maka nanti isi dari variabel jawaban akan sama dengan "Benar".

Tapi kalau bernilai false, maka variabel jawaban akan berisi "Salah".

6. Percabangan Bersarang (Nested)


Kita juga dapat membuat blok percabangan di dalam percabangan. Ini disebut
percabangan bersarng atau nested if.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Ternary</title>
</head>
<body>
<script>
var username = prompt("Username:");
var password = prompt("Password:");

if(username == "petanikode"){
if(password == "kopi"){
document.write("<h2>Selamat datang pak bos!</h2>");
} else {
document.write("<p>Password salah, coba lagi!</p>");
}
} else {
document.write("<p>Anda tidak terdaftar!</p>");
}
</script>
</body>
</html>
Hasilnya:

Bonus: Menggunakan Operator Logika pada


Percabangan
Percabangan bersarang, sebanarnya bisa kita buat lebih sederhana lagi dengan
menggunakan operator logika.

Contohnya:

var username = prompt("Username:");


var password = prompt("Password:");

if(username == "petanikode"){
if(password == "kopi"){
document.write("<h2>Selamat datang pak bos!</h2>");
} else {
document.write("<p>Password salah, coba lagi!</p>");
}
} else {
document.write("<p>Anda tidak terdaftar!</p>");
}
Ini dapat kita buat lebih sederhana lagi dengan operator logika AND (&&).

var username = prompt("Username:");


var password = prompt("Password:");

if(username == "petanikode" && password == "kopi"){


document.write("<h2>Selamat datang pak bos!</h2>");
} else {
document.write("<p>Password salah, coba lagi!</p>");
}

Bentuk Perulangan pada Javascript


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.

Perbedaanya:

 Counted Loop merupakan perulangan yang jelas dan sudah tentu banyak
perulangannya.
 Sedangkan Uncounted Loop, merupakan perulangan yang tidak jelas berapa
kali ia harus mengulan.

Perulangan yang termasuk dalam Counted Loop:

1. Perulangan For
2. Perulangan Foreach
3. Perulangan Repeat

Perulangan yang termasuk dalam Uncounted Loop:

1. Perulangan While
2. Perulangan Do/While

Mari kita bahas satu per satu…

1. Perulangan For di Javascript


Perulangan for merupakan perulangan yang termasuk dalam couted loop, karena
sudah jelas berapa kali ia akan mengulang.

Flowchart perulangan for


Bentuknya kodenya seperti ini:

for(let i = 0; i < 10; i++){


document.write("<p>Perulangan ke-" + i + "</p>")
}
Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata for.

Kondisi ini akan menentukan:

 Hitungan akan dimulai dari 0 (i = 0);


 Hitungannya sampai berapa? Sampai i < 10;
 Lalu di setiap perulangan i akan bertambah +1 (i++).

Variabel i pada perulangan for berfungsi untuk menyimpan nilai hitungan.

Jadi setiap perulangan dilakukan nilai i akan selalu bertambah satu. Karena kita
menentukannya di bagian i++.

Ini hasil outputnya:

Apakah nama variabelnya harus selalu i?

Tidak.

Kita juga bisa menggunakan nama lain.


Misalnya:

for(counter = 0; counter < 50; counter+=2){


document.write("<p>Perulangan ke-"+counter+"</p>");
}
Pada contoh tersebut, kita melakukan perulangan dimulai dari nol 0. Lalu di setiap
perulangan nilai variabel couter akan ditambah 2 (counter+=2).

Hasilnya:

Bagaimana kalau counter perulangannya dimulai dari akanga yang lebih besar sampai
yang ke paling kecil?

Ini biasanya kita buat saat ingin menghitung mundur…

Caranya gampang.

Kita tinggal isi nilai counter dengan nilai terbesarnya.

Misalnya kita akan mulai hitungan dari 10 sampai ke 0.

Maka nilai counter, kita isi awalnya dengan 10.

Lalu di kondisi perbandingannya, kita berikan counter > 0. Artinya perulangan akan
dilakukan selama nilai counter lebih besar dari 0.

Lalu kita kurangi (-1) nilai counter di setiap perulangan (counter--).

for(counter = 10; counter > 0; counter--){


document.write("<p>Perulangan ke "+counter+"</p>");
}
Hasilnya:
Mengapa tidak sampai nol (0)?

Karena kondisi yang kita berikan counter > 0. Apabila counter bernilai 0, maka kondisi
ini akan menjadi false.

Kecuali kita menggunakan operator lebih besar sama dengan (>=), maka
jika counter bernilai 0, kondisi akan menjadi true.

2. Perulangan While di 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.

Untuk memahami perulangan ini…

…mari kita coba lihat contohnya:

var ulangi = confirm("Apakah anda mau mengulang?");


var counter = 0;

while(ulangi){
var jawab = confirm("Apakah anda mau mengulang?")
counter++;
if(jawab == false){
ulangi = false;
}
}
document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");
Bisa disederhanakan menjadi:

var ulangi = confirm("Apakah anda mau mengulang?");


var counter = 0;

while(ulangi){
counter++;
ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");


Hasilnya:

Coba perhatikan blok kode while:

while(ulangi){
counter++;
ulangi = confirm("Apakah anda mau mengulang?");
}
Di sana… Perulangan akan terjadi selama variabel ulangi brenilai true.

Lalu kita menggunakan fungsi confirm() untuk menampilkan dialog konfirmasi.

Selama kita memilih Ok pada dialog konfirmasi, maka variabel ulangi akan terus
bernilai true.

Tapi kalau kita pilih Cancel, maka variabel ulangi akan bernilai false.

Saat variabel ulangi bernilai false, maka perulangan akan dihentikan.


3. Perulangan Do/While di 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.

Bentuknya seperti ini:

do {
// blok kode yang akan diulang
} while (<kondisi>);
Jadi perbedaanya:

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


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

Mari kita coba lihat contohnya:

var ulangi = confirm("Apakah anda mau mengulang?");;


var counter = 0;

do {
counter++;
ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");


Contoh tersebut sama seperti contoh pada perulangan while.

Saat perulangan pertama, cobalah untuk membatalkan perulangannya dengan


memilih Cancel.

Maka hasilnya:
4. Perulangan Foreach di Javascript
Perulangan foreach biasanya digunakan untuk mencetak item di dalam array.

Perulangan ini termasuk dalam perulangan counted loop, karena jumlah perulangannya
akan dituentukan oleh panjang dari array.

Ada dua cara menggunakan perulangan foreach di Javascript:

1. Menggunakan for dengan operator in;


2. Mengguunakan method forEach().

Contoh:

Berikut ini bentuk perulangan “foreach” tanpa menggunakan operator in:

var languages = ["Javascript", "HTML", "CSS", "Typescript"];

for(i = 0; i < languages.length; i++){


document.write(i+". "+ languages[i] + "<br/>");
}
Perulangan ini dapat dibuat lebih sederhana lagi dengan menggunakan
operator in seperti ini:

var languages = ["Javascript", "HTML", "CSS", "Typescript"];

for(i in languages){
document.write(i+". "+ languages[i] + "<br/>");
}
Hasilnya:
Cara kedua membuat perulangan foreach ialah dengan menggunakan
method forEach() dari array.

Contoh:

// kita punya array seperti berikut


var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];

// Kemudian kita tampilkan semua hari


// dengan menggunakan method foreach
days.forEach(function(day){
document.write("<p>" + day + "</p>");
});
Method forEach() memiliki parameter berupa fungsi callback. Sebenarnya kita juga bisa
menggunakan arrow function seperti ini:

// kita punya array seperti berikut


var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];

// Kemudian kita tampilkan semua hari


// dengan menggunakan method foreach
days.forEach((day) => {
document.write("<p>" + day + "</p>");
});
Hasilnya:
Penjelasan tentang arrow function, akan dibahas pada “Tutorial Javascript: Memahami
Fungsi di Javascript”.

5. Perulangan dengan Method 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.

Contoh:

Apabila kita menggunakan perulangan for:

for( let i = 0; i < 100; i++){


document.write("Ulangi kalimat ini!");
}
Apabila kita menggunakan fungsi repeat():

document.write("Ulangi kalimat ini! ".repeat(100));


Hasilnya:
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.

Mari kita coba lihat contohnya:

for(let i = 0; i < 10; i++){


for(let j = 0; j < 10; j++){
document.write("<p>Perulangan ke " + i + "," + j + "</p>");
}
}
Hasilnya:
Pada perulangan tersebut, kita menggunakan dua perulangan for.

Perulangan pertama menggunakan variabel i sebagai counter, sedangkan perultangan


kedua menggunakan variabel j sebagai counter.

Contoh lain:

var ulangi = confirm("apakah anda ingin mengulang?");


var counter = 0;

while (ulangi) {
counter++;
var bintang = "*".repeat(counter) + "<br>";
document.write(counter + ": " + bintang);
ulangi = confirm("apakah anda ingin mengulang?");
}
Hasilnya:
Nanti, kita akan banyak menggunakan perulangan bersarang saat bekerja dengan array
dua dimensi.

Kita dapat membuat perluangan sebanyak mungki di dalam perulangan yang lainnya.

Namun, ini perlu diperhatikan:

Semakin banyak perulangannya, maka komputer akan semakin lama memprosesnya.

Tentu ini akan membuat website atau aplikasi kita berjalan lambat.

Karena itu, gunakanlah perulangan dengan bijak ?


Javascript - Fungsi Output
Output adalah sebuah tampilan program yang biasanya digunakan untuk
memperlihatkan hasil akhir.

Output biasanya ditampilkan dalam bentuk teks dengan fungsi print().

Ada 4 cara menampilkan output pada Javascript:

1. Menggunakan Fungsi console.log();


2. Menggunakan Fungsi alert();
3. Menggunakan Fungsi document.write();
4. Menggunakan innerHTML.

Apa perbedaan dari keempat cara tersebut?

1. Menggunakan Fungsi console.log()


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

Contoh penggunaan:

console.log("Hello World!");
Hasilnya:

Fungsi console.log() biasanya digunakan untuk debugging. Karena setiap pesaan error
di Javascript selalu ditampilkan di dalam Console.

Selain console.log(), terdapat juga beberapa fungsi


untuk debugging seperti console.debug(), console.info(), console.error(), console.dir
(), dsb.
Fungsi-fungsi console ini juga berlaku pada console Nodejs.

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!");
Fungsi alert(), hanya bisa digunakan di dalam browser saja. Sedangkan pada Nodejs
fungsi ini tidak ada.

Contoh penggunaan fungsi alert():

<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Javascript</title>
<script>
alert("Selamat datang di tutorial belajar Javascript");

function sayHello(){
alert("Hello!");
}
</script>
</head>
<body>
<button onclick="sayHello()">Klik Aku!</button>
</body>
</html>
Hasilnya:
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.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Javascript</title>
<script>
document.write("<h1>Hello World!</h1>");
document.write("<hr>");
document.write("<p>Saya sedang belajar Javascript</p>");
document.write("di <b>petanikode.com</b>")
</script>
</head>
<body>

</body>
</html>
Hasilnya:
Selain fungsi write(), objek document juga menyediakan berbagai macam fungsi untuk
manipulasi 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.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Javascript</title>
</head>
<body>

<h1>Tutorial Javascript untuk Pemula</h1>


<div id="hasil-output"></div>

<script>
// membuat objek elemen
var hasil = document.getElementById("hasil-output");

// menampilkan output ke elemen hasil


hasil.innerHTML = "<p>Aku suka Javascript</p>";
</script>

</body>
</html>
Hasilnya:
Akhir Kata…
Bagaimana?

Sudah paham ‘kan perbedaan dari keempat fungsi tersebut. Kalau kita ringkas akan
seperti ini:

1. Fungsi console.log() untuk menampilkan output ke console Javascript;


2. Fungsi alert() untuk menampilkan output ke jendela dialog;
3. Fungsi document.write() untuk menulis output ke dokumen HTML;
4. Atribut innerHTML untuk menampilkan output ke elemen HTML yang lebih spesifik.

Fungsi yang manakah yang sering kamu gunakan?

Anda mungkin juga menyukai