Nama : PRINI

NPM : 22120064

A. PENGERTIAN JAVASCRIPT

JavaScript adalah bahasa pemrograman yang digunakan untuk membangun

website dari sisi client (client side). JavaScript membuat website Anda menjadi lebih
dinamis dan interaktif. Sesuatu yang tidak bisa dilakukan HTML dan CSS. Bahasa
pemrograman JavaScript adalah bahasa tingkat tinggi, berjenis scripting (scripting
language), ditulis secara dinamis (dynamically typed), dan dijalankan oleh
interpreter. JavaScript tergolong bahasa tingkat tinggi. Artinya ia punya aturan
penulisan yang menyerupai bahasa manusia.

Dengan begitu, belajar JavaScript jadi lebih mudah dipahami, bahkan untuk
pemula sekalipun. Sedangkan scripting language maksudnya JavaScript adalah
bahasa pemrograman yang tertanam di dalam program yang lebih besar, seperti web
browser. Jadi, yang bisa menggunakan JavaScript adalah program tersebut.
Sementara dynamically typed artinya, satu variabel pada program
dengan coding JavaScript dapat berisi tipe data yang berbeda. Anda bisa mengisi
variabel dengan angka, kemudian menggantinya ke huruf tanpa mengalami
error.JavaScript harus dijalankan oleh interpreter. Maksudnya, ia harus
diterjemahkan ke dalam bahasa yang dimengerti komputer agar bisa dijalankan.
Nah, proses penerjemahan ini dilakukan secara otomatis oleh web browser.

JavaScript adalah salah satu bahasa tertua yang ada di dunia. Ia sudah ada sejak
1995 dengan nama awal Mocca. Lalu berganti menjadi LiveScript, sebelum
akhirnya bernama JavaScript dengan standarisasi dari EcmaScript. EcmaScript
sendiri adalah standarisasi bahasa scripting yang dibuat oleh European Computer
Manufacturers Association (ECMA). Dengan adanya EcmaScript, JavaScript bisa
berjalan dengan lancar di berbagai browser. Karena sudah ada cukup lama, tak heran
kalau JavaScript adalah bahasa pemrograman terpopuler berdasarkan survey Stack
Overflow. Sebanyak 97,7% website di internet menggunakan bahasa pemrograman
JavaScript.
B. ATURAN PENULISAN KODE JAVASCRIPT

Bahasa pemrograman JavaScript punya beberapa aturan penulisan kode yang

harus dipatuhi, diantaranya:

1. Whitespace

Whitespace adalah area kosong berisi karakter tidak terlihat pada JavaScript,
seperti spasi, tab, atau enter. Whitespace berguna untuk menata susunan kode
agar terlihat lebih rapi. Penggunaan Whitespace tidak akan menambah ukuran
file JavaScript secara signifikan, sehingga kinerja website tetap optimal.
Ditambah lagi, Whitespace akan diabaikan ketika browser menjalankan
JavaScript. Berikut adalah contoh penggunaan Whitespace saat coding
JavaScript:

2. Line Length

Length atau panjang baris adalah jumlah karakter JavaScript yang ada dalam
satu baris kode. Idealnya, satu baris kode terdiri kurang dari 80 karakter. Hal ini
bertujuan untuk meningkatkan kenyamanan saat coding JavaScript. Jika sebuah
perintah JavaScript dalam satu baris terlalu panjang, potong perintah tersebut
menjadi dua baris. Usahakan untuk memotong perintah setelah operator (+,-,=)
atau koma (,) seperti contoh berikut:

3. Comments

Pada JavaScript, komentar berguna untuk mencatat maksud dari sebuah atau
beberapa baris kode. Untuk itu, pastikan menulis komentar dengan bahasa yang
ringkas dan mudah dimengerti. Ada dua cara menandai komentar di JavaScript.
Yang pertama yaitu komentar satu baris yang diawali dengan tanda // seperti
contoh berikut:
 Cara yang kedua adalah komentar beberapa baris dengan tanda /* pada awal
dan akhir komentar seperti ini:

4. Case Sensitive

Bahasa pemrograman JavaScript bersifat Case Sensitive, artinya ia

membedakan penulisan huruf besar dan kecil. Contohnya variabel bernama
‘helloworld’ akan dianggap berbeda dengan perintah ‘HelloWorld’. Untuk itu,
usahakan selalu konsisten dalam menulis kode. Sebab, kesalahan penulisan
sekecil apapun dapat menyebabkan error pada website Anda. Jika perlu, hanya
gunakan huruf kecil saat coding JavaScript.

5. Statement Rules

Statement atau pernyataan adalah instruksi atau alur kerja sebuah program.
Pada JavaScript, terdapat dua aturan dalam penulisan statement. Yang pertama
adalah simple statement yang diakhiri dengan titik koma (;) seperti berikut:

Sementara yang kedua adalah complex statement yang bisa diakhiri tanpa
titik koma seperti contoh yang satu ini:

6. Reserve Words

Reserved Words adalah kata-kata khusus yang tidak boleh digunakan sebagai
nama variabel atau fungsi. Pasalnya, kata-kata tersebut sudah dipakai untuk
 menjalankan perintah bawaan pada bahasa pemrograman JavaScript. Berikut
adalah daftar Reserved Words JavaScript yang wajib diketahui:

C. PERULANGAN FOR JAVASCRIPT

Perulangan for merupakan perulangan yang termasuk dalam couted loop,

karena sudah jelas berapa kali ia akan mengulang. Bentuknya kodenya seperti ini:

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++.
D. PERULANGAN WHILE 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. Berikut contoh kodenya:

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.

E. PERULANGAN DO-WHILE JAVASCRIPT

Perulangan do/while sama seperti perulangan while. Perbedaanya adalah

perulangan do/while akan melakukan perulangan sebanyak 1 kali terlebih dahulu,
lalu mengecek kondisi yang ada di dalam kurung while. Berikut adalah contohnya:
Contoh tersebut sama seperti contoh pada perulangan while. Saat perulangan
pertama, cobalah untuk membatalkan perulangannya dengan memilih Cancel. Maka
hasilnya adalah sebagai berikut:

F. VARIABEL JAVASCRIPT

Variabel adalah sebuah wadah yang digunakan untuk menampung nilai atau
data pada bahasa pemrograman. Variabel yang bisa diberi nama ini bisa menampung
angka, tulisan, boolean, dan lain-lain. Ada tiga tahap dalam menggunakan variabel
ketika belajar JavaScript, yaitu:

1. Declaration - Tahap mendaftarkan variabel ke dalam program yang ditulis.

2. Initialization - Tahap menyiapkan memori yang nantinya digunakan oleh
variabel.
3. Assignment - Tahap menetapkan nilai spesifik untuk disimpan ke dalam
variabel.

Contoh penerapannya seperti ini:

Tiga Reserved Words yang dapat digunakan untuk mendeklarasikan variabel

yaitu var, let, dan const. Tapi untuk pemula, direkomendasikan untuk
menggunakan var saja karena punya aturan yang lebih simpel. Berikut beberapa
aturan pembuatan variabel yang harus diperhatikan:
 a. Hindari Penggunaan Spasi – Jika nama variabel terdiri dari dua kata, jangan
gunakan spasi sebagai pemisah. Sebaiknya gunakan underscore seperti
berikut:

b. Hindari Awalan Angka – Angka tidak boleh digunakan sebagai awalan nama
variabel, tapi bisa digunakan untuk mengakhiri nama variabel, seperti:

c. Gunakan camelCase – camelCase adalah standar penulisan variabel yang

direkomendasikan. Format dasarnya adalah seluruh kata pertama memakai
huruf kecil dan huruf pertama kata kedua memakai kapital, contohnya:

d. Gunakan Shorthand – Shorthand adalah metode yang digunakan untuk

menyingkat penulisan variabel. Gunanya agar kode program yang dihasilkan
jadi lebih ringkas. Berikut contoh penerapannya:

Dengan adanya Shorthand, Anda tidak perlu menuliskan var pada ‘age’ dan
‘pass’, meskipun mereka berdua sebenarnya adalah variabel.

G. 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;
 Fungsi alert() menampilkan output ke jendela dialog.
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.

H. TIPE DATA JAVASCRIPT

1. Number

Tidak seperti bahasa pemrograman lain, JavaScript tidak memakai tipe

data angka yang berbeda-beda. Misalnya, integer, float, dan long. Ia hanya
punya satu tipe angka, yaitu number yang sanggup menyimpan data hingga
64 bit. JavaScript tetap bisa menggunakan berbagai jenis bilangan, seperti:

 Bilangan Bulat – Misalnya 10, 1500, dan 12345.

 Bilangan Pecahan – Contohnya 3.14, 0.5, dan 100.00.

 Bilangan Eksponensial – Misalnya 123e5 atau 123e-5.

 Bilangan Negatif – Contohnya -0.25 atau -123.

 Bilangan Spesial – Misalnya Infinity (10/0), -Infinity (-10/0), dan
NaN (0/0).

2. String

Pada JavaScript, String adalah tipe data yang digunakan untuk

menuliskan data tekstual (plain text). Untuk membuat string, Anda perlu
menambahkan tanda petik pada teks tersebut. Bisa petik dua (“”) atau petik
satu (‘’). Sebenarnya tidak ada aturan baku yang menjelaskan kapan harus
menggunakan petik dua atau petik satu. Meski begitu, disarankan untuk
memakai petik dua untuk penulisan string. Lalu, gunakan petik satu untuk
penekanan di teks tertentu, contohnya:

Kita juga bisa menerapkan yang sebaliknya. Gunakan petik satu untuk
memulai string, jika teks tertentu memakai tanda petik dua, seperti:

3. Boolean

Boolean adalah sebuah tipe data JavaScript yang digunakan untuk

memberikan nilai logika true atau false. Nah, Boolean berguna untuk
menentukan aksi berbeda dan mengatur alur kerja program. Contoh
penggunaan Boolean saat coding JavaScript sebagai berikut:

4. Function

Function adalah tipe data dalam bentuk perintah yang dapat digunakan di
bagian program yang memerlukan. Untuk menggunakannya, Anda perlu
membuat Function terlebih dahulu, baru kemudian memanggilnya. Ketika
belajar JavaScript, ada dua jenis Function yang perlu diketahui, yaitu:

 Built-in Function – Function bawaan milik JavaScript yang siap

digunakan. Contohnya alert(), confirm(), dan prompt().
 User-defined Function – Function yang Anda buat sendiri.
Formatnya adalah function namaFunction().

Berikut adalah contoh penggunaan Function pada JavaScript:

5. Array

Array adalah tipe data JavaScript yang digunakan untuk menampung

lebih dari satu nilai dan memiliki index. Dengan Array, Anda bisa
memasukkan tipe data yang berbeda dalam satu Array. Selain itu, ia berguna
untuk menghemat penggunaan variabel ketika coding JavaScript. Anda bisa
memakai Array dengan membuat kurung siku. Lalu, menulis nilai Array di
dalamnya dan dipisahkan dengan koma. Contoh Array pada bahasa
pemrograman JavaScript adalah sebagai berikut:

6. Object

Mirip dengan Array, Object adalah tipe data yang memiliki lebih dari
satu nilai. Bedanya, Object tidak punya index tapi nama. Kenapa Anda harus
menggunakan Object saat belajar JavaScript? Ternyata, Object dapat
 mengorganisir data lebih baik dari Array. Sebab, Anda bisa memasukkan
Function dan Array pada Object. Hasilnya, Anda bisa menghemat baris kode
yang dihasilkan saat coding JavaScript. Di bawah ini adalah contoh
pemakaian Object pada JavaScript:

I. OPERATOR JAVASCRIPT

Pada JavaScript, operator adalah sebuah simbol yang digunakan untuk

melakukan operasi. Baik itu perhitungan, perbandingan, atau logika. Berikut jenis-
jenis operator JavaScript adalah sebagai berikut:

A. Aritmatika

Operator aritmatika adalah operator yang digunakan untuk melakukan

perhitungan matematika. Misalnya, penambahan, pengurangan, dan perkalian.
Berikut contoh pemakaian operator aritmatika saat coding JavaScript:

B. Penugasan

Ketika belajar JavaScript, operator penugasan (assignment) adalah

operator yang digunakan untuk mendeklarasikan nilai dari suatu variabel.
Contoh operator penugasan bisa Anda lihat pada contoh berikut:

C. Perbandingan

Operator perbandingan (comparison) adalah operator pada JavaScript yang

dipakai untuk membandingkan nilai dari dua variabel. Nah, operator
perbandingan ini nantinya akan menghasilkan Boolean (true atau false).
Berikut contoh penggunaan operator perbandingan:

D. Logika

Operator logika adalah operator yang digunakan untuk menentukan logika

dari beberapa value yang digabungkan. Mirip dengan operator perbandingan,
operator yang satu ini juga menghasilkan Boolean. Contohnya seperti ini:

E. String

Sesuai namanya, operator string adalah operator yang digunakan untuk

menggabungkan nilai dari tipe data string. Caranya dengan menggunakan
tanda + seperti pada operator aritmatika. Berikut contohnya saat coding
JavaScript:

F. Typeof

Operator typeof adalah operator yang dipakai untuk mengetahui tipe data
dari suatu nilai. Berikut adalah contoh penggunaan operator Typeof di bahasa
pemrograman JavaScript:

G. Kondisional

Operator kondisional adalah operator yang digunakan untuk melakukan

pengecekan pada suatu kondisi. Ia juga dapat menentukan nilai ketika kondisi
tersebut bernilai true dan false. Contohnya seperti ini:
J. CARA MENULIS KODE JAVASCRIPT

Ada dua cara untuk membuat kode JavaScript, yaitu:

a. Langsung di File HTML (Internal JavaScript)

Sesuai namanya, Anda bisa langsung memasukkan kode JavaScript pada

file berformat HTML. Caranya dengan menuliskan kode di antara tag <script>
</script>, lalu tempatkan skrip tersebut pada tag <body>. Contohnya seperti
berikut:

b. Terpisah dari File HTML (External JavaScript)

Cara kedua adalah dengan membuat file JavaScript terpisah, lalu

menghubungkannya dengan file HTML. External JavaScript lebih
direkomendasikan, karena:

 Reusability – Memungkinkan JavaScript digunakan di banyak file

HTML.
 Readability – Membuat kode program jadi lebih mudah dibaca.
 Conciseness – Meringkas jumlah baris kode yang dihasilkan.

Berikut adalah contoh penggunaan External JavaScript:

K. MEMBUAT PROGRAM SEDERHANA DENGAN JAVASCRIPT

Seperti yang sudah dijelaskan, membutuhkan web browser dan code editor
untuk mempraktikkan tutorial JavaScript. Di sini kami menggunakan
browser Google Chrome dan editor Visual Studio Code. Selain itu, perlu
menyiapkan sebuah folder pada komputer sebagai tempat menyimpan file HTML
dan JavaScript. Di sini kami membuat folder dengan nama helloworld. Setelah
menyiapkan beberapa hal di atas, mari ikuti tutorial JavaScript membuat program
sederhana yang menampilkan pop up ketika menekan sebuah tombol. Langkah-
langkahnya sebagai berikut:

1. Buka Visual Studio Code dan buat file baru dengan cara klik File > New File.
Setelah itu, tulis kode berikut untuk membuat sebuah halaman HTML:

2. Simpan file dengan nama index.html.

3. Selanjutnya buat lagi sebuah file baru, lalu ketikkan kode di bawah ini.
Gunanya untuk membuat fungsi untuk menampilkan pop up JavaScript.
4. Kali ini simpan file dengan nama script.js.

5. Kembali lagi ke file index.html, tambahkan kode berikut setelah

tag </h1>. Fungsinya untuk menghubungkan file ini dengan file script.js yang
tadi dibuat.

6. Simpan perubahan pada file tersebut.

7. Selanjutnya buka folder helloworld, klik kanan file index.html > Open with >
Google Chrome. Anda akan melihat tampilan seperti ini: