Tujuan Pembelajaran :

1. Siswa dapat memahami dan mengimplementasikan penulisan kode Javascript

2. Siswa dapat mengimplementasikan penulisan variabel pada Javascript

3. Siswa dapat mengimplementasikan tipe data dan operator pada Javascript

4. Siswa dapat mengimplementasikan kondisi dan perulangan pada Javascript

Materi Pembelajaran :

BAGIAN. 1

JAVASCRIPT

• Definisi JavaScript 

JavaScript adalah bahasa pemrograman yang berbentuk kumpulan script 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.

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. 

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 

Prinsip dasar yang terdapat pada bahasa pemrograman javascript adalah sebagai berikut. 

• Struktur Dasar JavaScript 

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>

• Cara Penulisan JavaScript di HTML

1. Embed (Kode Javascript ditempel langsung pada HTML) 
Contoh Menulis Embed:

2. Inline (kode Javascript ditulis pada atribut HTML) 

Contoh Menulis Inline :

3. Eksternal (Kode Javascript ditulis terpisah dengan file HTML)

Contoh Menulis Eksternal :

• Cara Penulisan JavaScript di HTML

Ada 4 cara menampilkan output pada Javascript: 

1. Menggunakan Fungsi console.log(); 

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

Contoh kode dan hasil running :  

2. Menggunakan Fungsi alert(); 

Fungsi alert() adalah fungsi untuk menampilkan jendela dialog objek window. 

Contoh kode dan hasil running :

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 kode dan hasil running : 

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 kode dan hasil running:

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

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

Contoh membuat variabel.

• Mengisi Ulang Variabel 

• Menghapus Variabel 

• Mengenal Tipe Data JavaScript 

Penamaan variabel tidak boleh menggunakan angka di depannya.

• Operator Dalam JavaScript

Operator adalah simbol yang digunakan untuk melakukan operasi pada suatu nilai dan variabel. Operator dalam pemrograman terbagi dalam 6 jenis: 

1. Operator Aritmatika

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

syntax :

code :

• Percabangan IF

If statement adalah pernyataan kontrol dasar yang memungkinkan JavaScript untuk membuat keputusan dan mengeksekusi pernyataan secara kondisional, percabangan yang hanya memiliki satu blok pilihan saat kondisi bernilai benar.

Berikut ini adalah contoh If Statement syntax:

Contoh code :

Output :

• Percabangan IF/ELSE

Statement if else pada bahasa JavaScript adalah bentuk lanjutan dari pernyataan kontrol yang memungkinkan JavaScript untuk mengeksekusi pernyataan dengan cara yang lebih terkontrol.

Berikut ini adalah contoh If Else Statement syntax:

Contoh code :

Di sinilah ekspression JavaScript dievaluasi. Jika nilai yang dihasilkan benar atau bernilai true, statement yang diberikan di blok ‘if’, dieksekusi. Jika ekspression false, maka pernyataan yang diberikan di blok else dieksekusi.

Output :

• Percabangan IF/ELSE/IF

If else if statement pada Bahasa JavaScript adalah bentuk tingkat tinggi dari if else yang memungkinkan JavaScript membuat keputusan atau pilihan paling benar dari beberapa condition.

Syntax dari if else if statement seperti di bawah ini:

Contoh code :

Output :

• Percabangan Switch

Keterangan :

- ekspresi : nilai yang akan dibandingkan dengan nilai case.

- value : nilai yang akan dibandingkan dengan ekspresi, jika cocok maka statement yang ada di dalam case terkait dieksekusi sampai break lalu keluar dari switch statement.

- default : statementDefault akan dieksekusi jika tidak ada nilai case yang cocok dengan ekspresi.

Kata kunci default dan break bersifat opsional, umumnya ditulis kecuali di akhir.

contoh code :

output :

Penjelasan :

1. Karena kita menggunakan variabel hari sebagai ekspresi switch ((hari)), maka nilai variabel inilah yang akan dibandingkan dengan nilai yang ditentukan pada setiap case.

2. Dimulai dari case pertama yang bernilai 1, apakah 2 sama dengan 1 (2 === 1), karena hasilnya false, maka statement pada case tersebut tidak dieksekusi.

3. JavaScript kemudian membandingkan dengan nilai case kedua yang bernilai 2, 2 === 2 menghasilkan nilai true, oleh karena itu console.log('selasa'); dieksekusi.

Karena statement diakhiri kata kunci break, JavaScript akan keluar dari blok switch, artinya case yang ada di bawahnya tidak diperiksa.

Jadi, setiap nilai case akan dibandingkan dengan ekspresi dari atas ke bawah.

Bagaimana dengan statement default?

statement default hanya dieksekusi jika semua case tidak sesuai dengan ekspresi, mirip seperti blok else pada percabangan if.

• Percabangan Itenary

• Percabagan Bersarang (Nested)

1. Counted Loop merupakan perulangan yang jelas dan sudah jelas jumlah banyak perulangannya. 

Perulangan yang termasuk dalam Counted Loop: 

• Perulangan For 

code :

output :

keterangan :

• i = 0 adalah variabel yang akan menjadi permulaan perulangan for dijalankan. “i=0” berarti perulangan yang dibuat dimulai dari 0.

• i < 5 adalah batas akhir program dijalankan. Nilai tertinggi i<5 adalah 4. Sehingga program akan terhenti saat perulangan telah berlangsung dari 0 hingga 4.

• Perulangan Foreach 

code :

output :

• Perulangan Repeat 

code :

output :

2. Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali ia harus mengulang.

Perulangan yang termasuk dalam Uncounted Loop: 

• Perulangan While 

code :

output :

keterangan :

• Perulangan Do/While

code :

output :

Program diatas akan melakukan perulangan sebanyak 5 kali. Program menginput nilai = 1 lalu menjalankan perulangan dengan do.. kemudian diakhir while memberikan sebuah kondisi apabila (nilai <=5) maka akan dilakukan perulangan lagi dengan increment nilai++. Dan apabila nilai = lebih dari 5 maka perulangan akan berhenti.

• Definisi Struktur Array

Salah satu struktur data yang sering digunakan dalam pemrograman adalah Array.

Array merupakan struktur data yang digunakan untuk menyimpan sekumpulan data dalam satu tempat.

Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya.

Indeks array selalu dimulai dari angka nol (0).

contoh array :

• Mengambil data Array

contoh code :

output : 

Kenapa bukan fruits[2]  ?

Ingat: indeks array selalu dimulai dari nol.

• Menambah data ke dalam Array

Mengisi menggunakan method push().

contoh code :

output :

Selain materi di atas, silahkan teman-teman wajib juga mempelajari referensi berikut untuk lebih paham mengenai Javascript.

• https://www.niagahoster.co.id/blog/javascript-adalah/#Apa_itu_Javascript

• https://www.w3schools.com/js/

• https://www.petanikode.com/javascript-dasar/

• https://www.petanikode.com/tutorial/javascript/

• https://www.indonetsource.com/contoh-perulangan-javascript