Pengenalan Javascript — Javascript Dasar

Published in

Amikom Computer Club

13 min readApr 8, 2023

Pengenalan JavaScript Dasar — Pertemuan ke 7 Divisi FrontEnd Web Programming

Hallo sobat AMCC 👋
Setelah mempelajari html, CSS, dan bootstrap, kini saatnya belajar ke tingkat selanjutnya. Yup, kita akan belajar mengenai bahasa pemrograman JavaScript nih. Yuk kita belajar lebih lanjut.

Outline

1. Pengenalan Javascript
2. Variabel
3. Looping (perulangan)
4. Function
5. Array

Pengenalan JavaScript

Javascript adalah bahasa pemrograman untuk mengembangkan sebuah website agar lebih “hidup” (dinamis dan interaktif). Maksudnya gimana sih? Jadi, lebih “hidup” disini diartikan interaktif dan dinamis seperti konten dapat bergerak ataupun berubah pada depan layar tanpa harus memuat ulang halaman. Contohnya adalah adanya animasi di dalam konten website.

Pada dasarnya JavaScript adalah sebuah bahasa pemrograman yang hanya bekerja di sisi front end atau sisi klien. Seiring dari perkembangannya, JavaScript ini bukan hanya dapat digunakan pada sisi klien namun juga pada sisi server. Javascript ditemani dengan HTML dan CSS dalam mengembangkan website.

Peralatan untuk Belajar JavaScript

Apa saja peralatan yang harus disiapkan untuk belajar JavaScript?

Web Browser (Google Chrome, Firefox, Opera, dll)
Teks Editor (rekomendasi: VS Code)

Penulisan Kode JavaScript

JavaScript dapat ditulis di dalam sebuah halaman HTML menggunakan tag script. Ada dua cara untuk menuliskan kode JavaScript pada HTML, yaitu dengan menempatkan kode di dalam tag script atau dengan mengambil kode JavaScript dari file eksternal. Berikut adalah contoh penulisan kode JavaScript pada HTML menggunakan tag script:

Menempatkan kode dalam tag script

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh HTML dengan JavaScript</title>
  </head>
  <body>
    <h1>Hallo Raska!</h1>
    <script>
      alert("Halo, ini adalah pesan dari Raska!");
    </script>
  </body>
</html>

Pada contoh di atas, kode JavaScript dituliskan di dalam tag script yang ditempatkan di dalam tag body. Ketika halaman HTML ini dijalankan, sebuah kotak dialog akan muncul dengan pesan “Halo, ini adalah pesan dari JavaScript!”.

2. Mengambil kode JavaScript dari file eksternal


<!DOCTYPE html>
<html>
  <head>
    <title>Contoh HTML dengan JavaScript</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <script src="script.js"></script>
  </body>
</html>

Pada contoh di atas, kita memuat file JavaScript yang bernama “script.js” menggunakan atribut “src” pada tag script di dalam tag head. Kemudian, kode JavaScript dituliskan di dalam file “script.js”. Cara ini adalah cara terbaik untuk menuliskan kode javascript yang panjang atau kompleks.

Variabel

Variabel adalah wadah untuk menyimpan suatu nilai. Variabel dapat diberi nama dan dapat diisi dengan berbagai macam nilai, seperti string,number array, dan sebagainya.

Untuk membuat variabel, kita bisa menggunakan kata kunci var, lalu diikuti dengan nama variabel dan nilainya.

Deklarasi Variabel

var

Dalam javascript anda dapat mendeklarasikan variabel dengan kata kunci var. Contohnya sebagai berikut :

var kalimat = "Pelatihan web frontend AMCC";
var angka = 1234;

Ketika kita mendeklarasikan variabel dengan “var”, variabel tersebut akan dikenal di seluruh lingkup kode (global scope atau function scope) tergantung pada di mana variabel tersebut dideklarasikan. Jika sebuah variabel dideklarasikan di luar sebuah fungsi, variabel tersebut akan menjadi variabel global dan dapat diakses oleh semua bagian dari kode. Namun, jika variabel dideklarasikan di dalam sebuah fungsi, variabel tersebut hanya akan dapat diakses di dalam fungsi tersebut. Contoh :

var a = 5;

function test() {
  var b = 10;
  console.log(a); // dapat diakses
  console.log(b); // dapat diakses
}

test();

console.log(a); // dapat diakses
console.log(b); // tidak dapat diakses

const

Kata kunci “const” digunakan untuk mendeklarasikan variabel yang nilainya tidak dapat diubah setelah diberi nilai awal. Contohnya:

const PI = 3.14;

Pada contoh di atas, kita mendeklarasikan variabel “PI” dan memberinya nilai 3.14. Karena “PI” dideklarasikan sebagai konstanta menggunakan “const”, nilai variabel tersebut tidak dapat diubah.

let

Kata kunci “let” digunakan untuk mendeklarasikan variabel yang nilainya dapat diubah. Variabel yang dideklarasikan dengan “let” hanya dapat diakses di dalam blok kode tempat variabel tersebut dideklarasikan. Contohnya:

let x = 10;
x = 20;

Pada contoh di atas, kita mendeklarasikan variabel “x” dengan menggunakan “let” dan memberinya nilai 10. Kemudian, kita mengubah nilai variabel “x” menjadi 20.

Perbedaan antara “const” dan “let” terletak pada kemampuan untuk mengubah nilai variabel. Variabel yang dideklarasikan dengan “const” harus diberi nilai awal dan nilai tersebut tidak dapat diubah, sementara variabel yang dideklarasikan dengan “let” dapat diubah nilainya setelah dideklarasikan.

Penting untuk diingat bahwa ketika kita menggunakan “const” dan “let”, kita tidak dapat mendeklarasikan ulang variabel dengan nama yang sama di dalam lingkup yang sama. Contohnya:

let x = 10; let x = 20; // error: variabel x sudah dideklarasikan sebelumnya

Jadi, penting untuk memilih kata kunci yang tepat (var, const, atau let) tergantung pada kebutuhan kita saat mendeklarasikan variabel di JavaScript.

Wokee gais, demikian penjelasan mengenai deklarasi variabel dengan “var”, “const”, dan “let” di dalam JavaScript. Jika kamu memahami konsep dasar ini, kamu siap untuk melanjutkan ke materi selanjutnya, yaitu function. Semoga penjelasan ini bermanfaat bagi kamu. Next!!

Function

Sama seperti sebuah resep, sebuah function memiliki langkah-langkah atau instruksi tertentu yang harus diikuti untuk mencapai hasil yang diinginkan. Function dapat menerima argumen atau input yang akan diproses sesuai dengan instruksi yang diberikan, dan menghasilkan output atau nilai kembali ketika fungsi tersebut selesai dieksekusi.

function hitungLuasPersegiPanjang(panjang, lebar) { 
  let luas = panjang * lebar; 
  return luas;
}

Function di atas memiliki nama hitungLuasPersegiPanjang dan menerima dua parameter, yaitu panjang dan lebar. Function ini akan menghitung luas persegi panjang berdasarkan panjang dan lebar yang diberikan, kemudian mengembalikan nilai luas sebagai hasil dari function tersebut.

Dalam program JavaScript, function dapat dipanggil dan digunakan berulang kali dari bagian manapun di dalam program. Contoh pemanggilan function hitungLuasPersegiPanjang adalah sebagai berikut:

function hitungLuasPersegiPanjang(panjang, lebar) {
  let luas = panjang * lebar;
  return luas;
}

let panjang = 5;
let lebar = 10;
let luas = hitungLuasPersegiPanjang(panjang, lebar);
console.log("Luas persegi panjang adalah " + luas);

Jadi, dengan function kita dapat melakukan perintah yang sama tanpa harus menulis kodenya dari awal.

Teman teman juga dapat menggunakan jenis jenis penulisan function dibawah ini :

Function Expression : Selain mendefinisikan function dengan statement function, function juga dapat didefinisikan dengan menggunakan expression atau dengan kata lain, kita dapat menampung sebuah function di dalam variable, unik bukan? Yuk kita lihat contoh nya :

let hitungLuasSegitiga = function(alas, tinggi) {
  let luas = (alas * tinggi) / 2;
  return luas;
};

Function Parameters : Function dapat menerima satu atau beberapa parameter sebagai masukan, dan dapat mengembalikan nilai atau tidak. Contoh berikut adalah function yang menerima tiga parameter dan mengembalikan nilai :

function tambah(angka1, angka2, angka3) {
  var hasil = angka1 + angka2 + angka3;
  return hasil;
}

Function Scope: Variabel yang dideklarasikan di dalam function hanya dapat diakses di dalam function tersebut, sehingga function memungkinkan untuk membuat variabel lokal yang terisolasi dari variabel di luar function. Contoh:

function kaliDua(angka) {
  var hasil = angka * 2;
  return hasil;
}

var angka1 = 5;
var hasilKaliDua = kaliDua(angka1);
console.log(hasilKaliDua); // Output: 10
console.log(hasil); // Output: Uncaught ReferenceError: hasil is not defined

Looping (Perulangan)

Perulangan akan sangat membantu kita dalam membuat program yang akan ditampilkan secara berulang-ulang. Dalam Javascript, ada berbagai macam perulangan. Secara umum, perulangan ini dibagi menjadi 2, yaitu : counted loop (yang ditentukan banyak perulangannya) dan uncounted loop (tidak menentu perulangannya).

Perulangan yang termasuk dalam Counted Loop:

Perulangan For
Perulangan Foreach
Perulangan Repeat

Perulangan yang termasuk dalam Uncounted Loop:

Perulangan While
Perulangan Do/While

Pada pertemuan ini, kita hanya akan belajar perulangan for, while, dan do while.

Perulangan For

Menggunakan kata for, seperti contoh di bawah ini

for(i = 0; i< 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Loop for akan mengeksekusi sebuah blok perintah sebanyak 10 kali, dimulai dari nilai awal variabel i yang sama dengan 0, dan akan berhenti pada saat i mencapai nilai 9.

Setiap kali loop dieksekusi, blok perintah akan menuliskan pesan “Perulangan ke-” diikuti dengan nomor perulangan i.

Hasilnya seperti ini :

Array

Array adalah salah satu tipe data di JavaScript yang digunakan untuk menyimpan kumpulan nilai atau elemen dalam satu variabel. Array dapat berisi nilai atau data apapun, termasuk tipe data primitif seperti string, number, boolean, serta tipe data kompleks seperti objek dan bahkan array lain.

Mendefinisikan Array

Berikut ini adalah cara untuk mendefinisikan sebuah array di JavaScript:

// Mendefinisikan array kosong
const emptyArray = [];

// Mendefinisikan array dengan elemen
const fruits = ["Apple", "Banana", "Orange", "Mango"];

Beberapa hal yang perlu diketahui tentang array di JavaScript:

Setiap elemen di dalam array memiliki indeks yang dimulai dari 0. Indeks ini digunakan untuk mengakses elemen tertentu dalam array.
Panjang atau jumlah elemen dalam sebuah array dapat dihitung dengan menggunakan properti length.
Elemen dalam sebuah array dapat diakses dan dimodifikasi dengan menggunakan indeks.

const fruits = ["Apple", "Banana", "Orange", "Mango"];
//Mengakses dengan index
console.log(fruits[0]); // "Apple"
console.log(fruits[2]); // "Orange"
console.log(fruits[3]); // "Mango"

//mengakses dengan perulangan for
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
};
// "Apple"
// "Banana"
// "Orange"
// "Mango"

Manipulasi Array

Anda dapat menambahkan atau menghapus elemen dari sebuah array. Misalnya, untuk menambahkan elemen baru ke dalam array, Anda dapat menggunakan metode push(), sedangkan untuk menghapus elemen dari array, Anda dapat menggunakan metode pop(), shift(), atau splice().

Berikut ini adalah contoh kode yang menunjukkan cara menambahkan dan menghapus elemen dari sebuah array:

const fruits = ["Apple", "Banana", "Orange", "Mango"];
console.log(fruits); // ["Apple", "Banana", "Orange", "Mango"]

// Menambahkan elemen baru ke dalam array
fruits.push("Pear");
console.log(fruits); // ["Apple", "Banana", "Orange", "Mango", "Pear"]

// Menghapus elemen terakhir dari array
fruits.pop();
console.log(fruits); // ["Apple", "Banana", "Orange", "Mango"]

// Menghapus elemen pertama dari array
fruits.shift();
console.log(fruits); // ["Banana", "Orange", "Mango"]

// Menghapus elemen pada indeks tertentu dari array
fruits.splice(1, 1);
console.log(fruits); // ["Banana", "Mango"]

//Menggabungkan dua array menjadi satu menggunakan metode concat():
const moreFruits = ["Pineapple", "Watermelon"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: ["Banana", "Mango", "Pineapple", "Watermelon"]

//Mengurutkan elemen dalam array
fruits.sort();
console.log(fruits); // Output: ["Banana", "Mango"]

Percabangan

JavaScript mendukung pernyataan bersyarat yang digunakan untuk melakukan tindakan yang berbeda berdasarkan kondisi yang berbeda, nah kita dapat menggunakan pernyataan if else dalam bahasa JavaScript, atau bisa disebut percabangan. Di percabangan ini, program akan menjalankan perintah sesuai dengan kondisi yang kita berikan.

Percabangan if

Percabangan if merupakan percabangan yang hanya memiliki satu blok pilihan saat kondisi bernilai benar.

if (kondisi) {
  // code yang akan dieksekusi jika memenuhi kondisi
}

Misalnya, dalam pemrograman sederhana untuk input nilai :

Jika nilai yang diinput lebih dari 80, maka program akan menampilkan “anda lulus!”

var nilai =  90;
if (nilai > 80);
console.log("Anda Lolos")

Lalu, bagaimana kalau nilai yang diinput kurang dari 80? Maka program tidak akan menjalankan perintah apapun/berhenti.

Percabangan if else

If else adalah percabangan yang memiliki 2 blok pilihan, pilihan pertama jika kondisi benar sedangkan pilihan kedua jika kondisi salah.

if (kondisi) {
  // code yang akan dieksekusi jika memenuhi kondisi
} else {
  // code yang akan dieksekusi jika kondisi tidak terpenuhi
}

Contohnya seperti pada percabangan if di atas, namun bedanya, jika kondisi program salah, maka program akan menjalankan perintah lainnya.

var nilai =  70;
if (nilai > 80);
console.log("Anda Lolos")
else {
  console.log("Anda belum bisa lulus")
}

Nilai yang ddinputkan adalah 70, artinya nilainya tidak sesuai dengan kondisi. Sehingga, output yang akan tampil adalah sebagai berikut :

Anda blum bisa lulus

If else if

Percabangan yang memiliki pilihan lebih dari 2 kondisi.

if (kondisi1) {
  // code yang akan dieksekusi jika memenuhi kondisi
} else if (kondisi2) {
  // code yang akan dieksekusi jika kondisi tidak terpenuhi
} else if (kondisi3) {
  // code yang akan dieksekusi jika kondisi tidak terpenuhi
} else {
  // code yang akan dieksekusi jika kondisi tidak terpenuhi
}

PRAKTIKUM

Akhirnya setelah berpusing pusing teori, sekarang kita bakalan masuk ke sesi praktikum nih sobat.
Yuk langsung siapin alat alatnya. Apaan tuh? Yakali lupa 🙂?
Oke alat perang kali ini seperti biasa ya sobat, yaitu :

Vs Code
Browser

Udah itu aja. Langsung gaskann!!!

Membuat File Javascript

Pertama yang harus dilakukan yaitu temen temen siapkan file index.html terlebih dahulu, seperti biasanya :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Belajar Javascript</title>
    </head>
    <body></body>
</html>

Nah selanjutnya kita ke tahap yang cukup penting nih, yaitu kita sisipkan file javascript kita di dalam tag body ya sobat, tapi sebelumnya kita buat file javascript nya dulu nih :

1. Buat file javascript (namanya bebas yah).

2. Sisipkan file javascript yang sudah kita buat tadi

<body>
    <h1>Belajar Javascript Yuk Gengs!</h1>
 <!-- Sisipkan file javascript di bagian paling bawah, di dalam tag <body> seperti ini -->
    <script src="script.js"></script>
</body>

Console Browser

Naah, kita sudah berhasil menyisipkan file javascript kita ke html kita nih teman-teman. Gimana cara melihat file javascript kita sudah berhasil disisipkan?

Oke, kita coba yah.

console.log() adalah sebuah metode dalam bahasa pemrograman JavaScript untuk menampilkan informasi ke konsol atau console di dalam browser atau lingkungan pengembangan JavaScript.

Kita bisa menggunakan console.log() untuk memeriksa file javascript kita sobat, caranya :

Tuliskan code berikut di dalam file javascript kita :

console.log("Hallo Icaaa!!");

Selanjutnya kita buka file html kita, boleh menggunakan live server seperti biasanya yaa.

Kalau sudah, kita bisa pergi ke developer tools pada web browser kita. Caranya klik kanan di halaman html kita tadi. Lalu temukan menu “Inspect Element”

Lalu pergi ke menu console sepreti ini yah

Naaah, harusnya di dalam console sudah tampil tulisan “Hallo Icaaa” nih sobat.

Study Case Kita Hari Ini

Oke sobat, hari ini kita coba terapkan teori yang sudah kita pelajari tadi dengan studi kasus daftar belanja jajan lebaran, hehe.

Deklarasi Jajan

Kita buat deklarasi array terlebih dahulu dengan kode berikut

var jajanan = ["Rengginang", "Nastar", "Putri Salju", "Astor"];

Selanjutnya yuk coba kita tampilkan hasil array yang telah kita buat

Menampilkan Jajan

Nah dengan kode berikut kita bisa menampilkan hasilnya di console, caranya begini :

var jajanan = ["Rengginang", "Nastar", "Putri Salju", "Astor"];
//menampilkan array
console.log(jajanan);Selanjutnya yuk coba kita tampilkan hasil array yang telah kita buat

Kita juga bisa menampilkan array dengan perulangan, contohnya seperti ini :

// menampilkan array dengan perulangan
for (let i = 0; i < jajanan.length; i++) {
    console.log(jajanan[i]);
}

Kita bisa memanfaatkan index dari perulangan untuk memanggil elemen array. Nah sekarang kita cek di console, maka tampilannya akan seperti ini

Sekarang lihat di console. Waaaa kita sudah memiliki jajan lebaran!!😋Hmmmm, Masih kurang nih jajan nyaaa 😣. Nambah ah.

Menambah Jajan

Cara menambah jajan, kita bisa menggunakan method .push() bawaan dari javascript. Sepertinya kurang afdol jika lebaran nggak ada Khong Guan yah. Yuk kita coba.

var jajanan = ["Rengginang", "Nastar", "Putri Salju", "Astor"];
// menambah jajan
jajanan.push("Khong Guan");
// menampilkan array dengan perulangan
for (let i = 0; i < jajanan.length; i++) {
    console.log(jajanan[i]);
}

Okey sekarang kita berhasil menambahkan 1 jajan lagi, yaitu Khong Guan.

Yap, kita sudah berhasil nih sob. Tadi kita hanya memiliki 4 jajan saja, sekarang kita sudah memiliki 5 jajan!!.

Menghapus Jajan

Tapi misalkan kita ingin menghapus jajan dari daftar belanja kita gimana nih? Kita bisa pakai method .splice() ya sob untuk menghapus elemen tertentu pada array. Yok kita coba aja langsung.

Contohnya seperti ini

jajanan.splice(2, 1);

Hasilnya :

splice() memiliki 2 parameter. Parameter yang pertama merupakan indeks elemen pertama yang akan dihapus atau diganti pada array. Parameter kedua merupakan jumlah elemen yang akan dihapus dari array.

Maksud dari kode di atas adalah, kita menghapus index kedua yaitu “Putri Salju”, dan jumlah elemen yang akan dihapus adalah 1, artinya hanya menghapus index ke 2 saja.

Umm okay, nampaknya splice susah dipahami ya??
Semangatttt!!! Masih ada yang lain 👉👈

Membuat Function

Okeii sobb, kita tadi sudah membuat program menampilkan array, menambah array, dan menghapus array. Nah selanjutnya kita akan merubah program tersebut ke dalam function.

“Lahh, emang kenapa harus diubah ke function? kan sama aja nanti hasilnya”.

Eitts, function itu penting sekali sobat. Dengan function kita tidak perlu menulis kode kode yang telah kita buat tadi secara berulang ulang jika ingin melakukan hal yang sama, kita hanya perlu membuat kerangkanya yaitu function dan selanjutnya kita hanya perlu memanggil function dengan parameternya saja.

Untuk studi kasus ini memang terlihat tidak terlalu butuh yah, tapi dalam project skala besar function akan menjadi hal yang sangat penting.

Soo lets go kita pelajari membuat function!!!!! 🚀

Membuat function untuk menampilkan array

Cukup sederhana sobat, jika kita tadi sudah membuat program untuk menampilkan array dengan perulangan, maka kita hanya perlu merubahnya seperti ini :

function tampilkanJajan() {
    for (var i = 0; i < jajanan.length; i++) {
        console.log(jajanan[i]);
    }
}

Yap, kita hanya perlu membuat sebuah function dengan nama “tampilkanJajan()” lalu kita masukkan program untuk menampilkan array, ke dalam blok kode function kita.

Membuat function untuk menambah array

Yap sobat, selanjutnya kita membuat function untuk menambah array nih. Caranya kurang lebih sama seperti kita membuat function untuk menampilkan array. Tapiii ada yang beda nih

function tambahJajan(namaJajan) {
    jajanan.push(namaJajan);
}

Kali ini kita menggunakan parameter, sob. Jadii parameter adalah nilai atau variabel yang diberikan ke function saat function itu dipanggil. Coba deh kita akses/panggil function yang udah kita buat. Tuliskan kodenya seperti ini :

// menambah jajan
tambahJajan("Khong Guan");
// menampilkan jajan
tampilkanJajan();

Nah jadi kita isikan nilai/nama jajan yang akan kita tambahkan, maka nilai tersebut akan dimasukkan ke dalam method .push() yang ada di dalam blok kode function tambahJajan();

Membuat function untuk menghapus array

Okei kalau yang ini hampir sama seperti kita membuat function tambahJajan() nih sob, kita memerlukan parameter lagi, yuk dicoba :

function hapusJajan(index) {
    jajanan.splice(index, 1);
}

Nah dengan kerangka kode tersebut kita sudah bisa menggunakannya untuk menghapus index yang kita inginkan. Misalnya kita ingin menghapus index ke 1 yaitu “Nastar”, lalu setelah itu hapus index ke 2 yaitu “Astor”, kita hanya perlu menuliskan kodenya seperti ini :

// menghapus nastar
hapusJajan(1);

//menghapus astor
hapusJajan(2);

// menampilkan jajan
tampilkanJajan();

Yapp, terlihat lebih ringkas jika dibandingkan kita menuliskan method .splice()

Huffttt, segitu dulu sobat pembahasan kita kali ini, cukup melelahkan. Tapi tetap semangat yah sobaat!!

See U di pertemuan depan 👋

Learning By Doing, Learning By Teaching