Belajar JavaScript Dasar Untuk Pemula


JavaScript adalah bahasa pemrograman tingkat tinggi yang pada awalnya dikembangkan untuk membuat website menjadi "Hidup". JavaScript sendiri dari sisi klien (client-side) yang membantu dalam interaksi langsung dengan audiens. Bersama dengan HTML dan CSS, JavaScript menjadi bahasa pemrograman paling populer untuk mengembangkan aplikasi berbasis web.

JavaScript termasuk ke dalam kategori Scripting language. Apa maksudnya? Salah satu ciri-ciri utama dari bahasa scripting adalah kode tidak perlu dikompilasi agar bisa dijalankan. Scripting language menggunakan interpreter untuk menerjemahkan kode atau perintah yang kita tulis supaya dimengerti oleh mesin.

Mengapa Perlu Belajar JavaScript ?
Jadi, kenapa kita perlu mempelajari JavaScript dari awal ?

Karena JavaScript merupakan bahasa yang penting untuk anda kuasai jika ingin menjadi web developer, baik itu dari sisi front-end ataupun back-end.

Baiklah, tanpa berlama-lama, berikut ini adalah beberapa kelebihan dari JavaScript yang dapat anda pertimbangkan sebelum mempelajari JavaScript :

  • Bahasa yang kompatibilitas
Salah satu kelebihan JavaScript adalah fleksibilitas dan kompatibilitasnya. JavaScript bisa berjalan di hampir semua lingkungan browser, membuatnya menjadi pilihan ideal untuk membangun aplikasi web yang responsif dan interaktif.

Tidak peduli apakah kamu menggunakan Chrome, Firefox, atau Safari, kode JavaScript berlajan dengan baik di browser tersebut.

  • Mudah dipelajari oleh pemula
JavaScript termasuk salah satu bahasa pemrograman yang ramah bagi pemula. Anda tidak perlu menginstal software dan lingkungan pengembangan lain yang rumit untuk memulai membuat program JavaScript.

Selain itu, sebagai salah satu bahasa pemrograman paling populer, JavaScript memiliki komunitas yang besar. Ada banyak forum dan komunitas online yang nantinya dapat membantu kamu menyelesaikan masalah berkaitan dengan JavaScript atau mencari inspirasi.

  • Peluang karir yang meyakinkan
Keterampilan dalam JavaScript menjadi salah satu yang paling banyak dicari oleh perusahaan. Jika anda mencari kata kunci "JavaScript" pada laman pencarian kerja seperti JobStreet, akan ada banyak sekali pekerjaan diindonesia yang bisa anda lamar.

Dengan demikian, belajar JavaScript tidak hanya akan menambah skill kamu, tetapi juga potensi pendapatan.

Tanpa berlama-lama lagi kita langsung masuk dalam Fundamentals JavaScript

Peralatan sebelum Belajar JavaScript
Bagaimana sobat, sudah tidak sabar untuk menuliskan kode JavaScript pertama, bukan ? Yuk, kita akan memulai beberapa hal dibawah ini untuk menuliskan kode JavaScript.

  • Editor teks, contohnya, Sublime, Notepad++, Vs Code.
  • Peramban website, seperti Google Chrome, Firefox, Microsoft Edge dll
itu saja ? Ya hanya itu saja sudah cukup. Karna dalam tahap ini kita belum belajar JavaScript dari NodeJs.

Dasar - Dasar JavaScript

Sebelum lebih jauh memahami JavaScript kita perlu tahu dulu  JavaScript dari awal itu sendiri. Bagagimana bisa jadi seorang programmer yang jago kalau dasar-dasar saja belum mengerti. Oke baiklah tanpa berlama-lama lagi, Yuk intip apa saja dasar-dasar JavaScript tersebut :

  • Menuliskan Kode JavaScript di konsol
Di dalam console, kita bisa menulis fungsi atau kode-kode javascript dan hasilkan akan langsung ditampilan.

Kode di bawah ini merupakan instruksi bagi terminal atau konsol untuk mencatat (log) kalimat, "Hello World!".

console.log adalah bawaan Javascript untuk menampilkan pesan ke konsol, bisa berupa web konsol atau konsol dari terminal/command prompt.

Kode atau teks yang berada di dalam tanda kurung adalah pesan yang ingin ditampilkan. Pada contoh kode diatas, kita menggunakan tanda kutip ("") untuk menandakan bahwa pesan yang ingin di tampilkan merupakan sebuah string atau teks. Nanti kita akan bahas mengenai tipe data pada JavaScript.

  • Variabel dan Deklarasi Variabel

Variabel adalah tempat untuk menyimpan data yang bisa berubah-ubah. Ketika menulis sebuah program, kita memberi tahu komputer cara memproses informasi seperti mencetak teks ke layar atau melakukan operasi perhitungan.

Pada JavaScript kamu bisa mendeklarasikan variabel menggunakan keyword var, let, dan const. Dalam konteks JavaScript modern, mulai dari Versi ECMAScript 2015(ES6) dianjurkan untuk menggunakan keyword let dan const untuk menggantikan variabel yang nilainya tidak akan berubah.


Pada contoh tersebut akan membuat variabel firstname dengan nilai "JohnDoe". Nilai tersebut belum muncul di console.log. Apabila nilai tersebut ingin ditampilkan dalam console.log maka cukup ketikan seperti contoh ini :


Lalu apa berbedaan antara let dan const ?

Begini, dari contoh diatas, bisa kita bayangkan variabel sebagai kotak atau wadah yang menyimpan nilai. Proses inisialisasi atau assignment berarti kita memasukan nilai ke dalam kotak tersebut. Variabel firstname diatas akan tersimpan di dalam memori komputer.

Setiap variabel memiliki nama yang dapat kita panggil dan gunakan. Kita dapat menamai variabel dengan nama apapun, tetapi pastikan penamaannya masih masuk akal dengan konteksnya supaya kode mudah di maintenance.

Lalu, dengan const apa perbedaannya ? Const merupakan kependekan dari constant. Artinya, kita akan mendeklarasikan sebuah variabel dengan const ketika ingin variabel bernilai konstan dan tidak bisa diubah setelah diinisialisasi nilainya. Kita bayangkan lagi variabel const ini adalah sebuah kota yang ditutup dan disegel setelah diisi, sehingga nilainya itu mutlak atau tidak bisa diubah lagi.

Jika penulisan kode seperti yang diatas, menginisialisasi kembali nilai variabel yang menggunakan const, tentu kita akan mendapati pesan error.
  • Tipe Data
JavaScript memiliki beberapa tipe data dasar, yaitu :
  1. String, dipakai untuk inisialisasi teks, misalnya let firstname ="johndoe";
  2. Array, digunakan untuk kumpulan data misalkan kita punya beberapa nama untuk buah, kita bisa menuliskan nya seperti berikut let buah = ["Pepaya", "Jeruk"];
  3. Object, ini difungsikan dalam data terstruktur, misalkan dalam sebuah motor ada merk dan tahun produksi, kita bisa menuliskan seperti berikut let motor = {merk: "Honda", tahun: 2020};
  4. Number, nah klo number itu sesuai dengan namanya yang artinya angka, jika kita ingin menuliskan tipe data number, kita bisa menuliskan contohnya seperti ini let age = 20;
  5. Boolean, kalau tipe data ini berfungsi untuk nilai true atau false (benar / salah), misalnya let kamuJomblo = false;
  • Operator
Operator dalam bahasa pemrograman sendiri adalah simbol yang memberi tahu antara variabel dan nilai untuk melakukan operasi seperti matematika, relasional, atau logika untuk memberikan hasil tertentu.

Dari contoh diatas mungkin kita masih bingung, tenang akan kami bahas disini. Kode diatas berarti kita menginisialisasikan nilai y pada variabel x, sehingga nilai x sekarang memiliki nilai yang sama dengan y.


Pada contoh kode diatas terdapat expression x += y apa artinya ? Assigment operator tersebut digunakan sebagai shortcut dari x = x + y. Cara ini juga dapat digunakan pada operator aritmatika lain, seperti perkalian, pengurangan, pembagian, dan lainnya.

Operator

Fungsi

Contoh

+

Pertambahan

2 + 2 = 4

-

Pengurangan

4 - 3 = 1

*

Perkalian

3 * 7 = 21

/

Pembagian

20 / 2 = 10

%

Modulus (Sisa Bagi)

10 % 3 = 1



Sekarang kita sudah mengetahui bagaimana cara menyimpan nilai pada sebuah variabel. Selanjutnya kita akan belajar mengenai operator komparasi sebagai logika  dasar dalam membandingkan nilai pada JavaScript.

Terdapat serangkaian karakter khusus yang disebut dengan operator pembanding/komparasi yang dapat mengevaluasi dan membandingkan dua nilai. Berikut daftar operator dan fungsinya :

Operator

Fungsi

==

Berfungsi membandingkan apakah kedua nilai tersebut sama

!=

Berfungsi membandingkan apakah kedua nilai tersebut tidak sama 

===

Berfungsi membandingkan apakah kedua nilai tersebut identik

>

Berfungsi membandingkan dua nilai apakah nilai pertama lebih dari nilai kedua.

>=

Berfungsi membandingkan dua nilai apakah nilai pertama lebih atau sama dengan nilai kedua.

<

Berfungsi membandingkan dua nilai apakah nilai pertama kurang dari nilai kedua.

<=

Berfungsi membandingkan apakah nilai pertama kurang atau sama dengan nilai kedua.


Perbedaan antara "Sama" dan "Identik"

Dalam operator komparasi di JavaScript, hal yang menjadi sedikit "tricky" adalah membedakan antara "sama" (==) dan "identik" (===)

Hal inilah yang membedakan antara sama dan identi pada JavaScript. Jika kita ingin membandingkan hanya dari kesamaan nilainya kita bisa gunakan == tapi jika kita ingin membandingkan dengan memperhatikan tipe datanya kita gunakan ===

Logical Operator
Terdapat beberapa operator lain yang dapat kita gunakan untuk menetapkan logika yang lebih kompleks, yakni dengan logical operators. Dengan logical operator, kita dapat menggunakan kombinasi dari dua nilai boolean atau bahkan lebih dalam menetapkan logika.

Pada JavaScript terdapat tiga buah karakter khusus yang berfungsi sebagai local operator. Berikut macam-macam logical operator dan fungsinya :

Operator

Fungsi

&&

Logika ini akan menghasilkan nilai true apabila semua kondisi terpenuhi

||

Logika akan menghasilkan nilai true apabila ada salah satu kondisi terpenuhi

!

Digunakan untuk membalikkan suatu kondisi.

  • If/Else Statement
Statement if akan menguji suatu kondisi. Jika kondisi bernilai true, maka blok kode di dalamnya akan dijalankan. Sebaliknya, jika bernilai false, maka proses yang ditentukan akan dilewatkan. Misalnya :

  • Switch Case Statement
JavaScript juga mendukung switch statement untuk melakukan pengecekan banyak kondisi dengan lebih mudah dan ringkas.


Tanda kurung setelah keyword switch berisi variabel atau expression yang akan dievaluasi. Kemudian untuk setiap kondisi yang mungkin terjadi, kita masukkan keyword case diikuti dengan nilai yang valid. Jika kondisi pada case sama dengan variabel pada switch, maka blok kode setelah titik dua (:) akan dijalankan. Keyword break digunakan untuk keluar dari proses switch. Terdapat satu case bernama default yang memiliki fungsi yang sama dengan keyword else pada control flow if-else. Jika tidak ada nilai yang sama dengan variabel pada switch, maka blok kode ini akan dijalankan.
  • Loop
Loop adalah istilah berulang-ulang dalam bahasa program komputer. Loop berguna saat kita ingin melakukan sebuah perintah yang perlu dijalankan berulang-ulang. Namun, bentuk loop dapat macam-macam ("for loop", "white loop", dll). Misalnya kita ingin menampilkan angka dari 1 sampai 10, tentunya tidak efektif jika kita menulis kode seperti berikut :

Bagaimana jika kita perlu menampilkan angka 1 sampai 100 ? Hal ini tentu saja membantu kita karena kita tidak perlu menulis sejumlah sintaks yang berulang-ulang. Kita hanya perlu mengatur statement berdasarkan hasil yang kita harapkan.
  • For Loop
Mengulangi sebuah statement atau sekelompok statement sebanyak nilai yang ditentukan di awal. Jadi operasi akan terus dilakukan sampai dengan jumlah yang telah ditetapkan di awal atau dengan kata lain tes kondisi (Jika jumlah pengulangan telah cukup) hanya akan dilakukan di akhir. Secara sederhana bentuk dari for loop dapat dituliskan sebagai berikut:
Berikut ini contoh penerapannya secara nyata :

Loop akan dimulai dari blok statement for sampai dengan print(i). Berdasarkan loop pada contoh tersebut, loop hanya dilakukan sebanyak 5 kali sesuai dengan jumlah vektor yang ada.
  • While Loop
Metode lain untuk melakukan looping adalah dengan statement while. Sama seperti for, While loop merupakan loop yang digunakan ketika kita telah menetapkan stop condition sebelumnya. Blok statement/kode yang sama akan terus dijalankan sampai stop condition ini tercapai.

Jika kita ingin menampilkan angka 1 sampai 100 dengan while kita bisa menulis kode seperti berikut :

Bisa dilihat pada kode di atas bahwa looping dengan while tidak memiliki ketergantungan dengan variabel iterasi seperti pada for loop. Karena itu, meskipun while dapat melakukan perulangan yang sama dengan for, while lebih cocok digunakan pada kasus di mana kita tidak tahu pasti berapa banyak perulangan yang diperlukan.

Penutup

Belajar JavaScript menjadi sebuah keharusan bagi siapa saja yang ingin berkarir di bidang web development. Mulai dari flesibilitas dan kompatilibitasnya di berbagai browser, kemudahan dalam memahami sintaks, hingga kebutuhannya sebagai bahasa pemrograman disisi klien, 

Posting Komentar

0 Komentar