Senin, 14 Desember 2020

Belajar JavaScript Lengkap untuk Pemula (Ada versi PDF juga)

JavaScript merupakan bahasa pemrograman yang universal, maka dari itu sudah menjadi salah satu kewajiban dalam menguasai bahasa ini. 

Berikut merupakan dasar-dasar dari JavaScript, harapannya kalian dapat mudah mengerti terkait syntax-syntax yang ada di dalamnya.  

Ohiya,  untuk versi PDF, silahkan DM saya di Instagram @lejaaprianza

Artikel ini juga akan di update berdasarkan request dari teman-teman.

mohon sarannya, apalagi yang perlu di update disini



Daftar isi:


Komentar Satu Baris (//)

Komentar adalah baris kode pada Javascript yang akan diabaikan ketika program dijalankan. 

Javascript Dasar : Komentar Satu Baris (//) - Leja Aprianza - Judul

Biasanya, komentar digunakan untuk menjelaskan bagian-bagian kode agar tidak terjadi kekeliruan. Komentar ini sangat berguna ketika kode program yang kalian buat sudah sangat kompleks.

Kode komentar satu baris menggunakan simbol dua garis miring (//).

Saya mencontohkannya pada Node.js untuk menjalankan hasil kompilasinya. Akan tetapi tidak hanya Node.js, kalian juga dapat menjalankannya di aplikasi manapun yang bahasa pemrogramannya Javascript.

Alat tempur :

  1. Visual Studio Code
  2. Node.js
Setelah itu, silahkan kalian buat file bebas yang ekstensinya ".js". Selanjutnya kalian tulis komentarnya dengan dua garis miring (//). Berikut contohnya :

Javascript Dasar : Komentar Satu Baris (//) - Leja Aprianza

Untuk menjalankannya, maka buka "New Terminal"


Javascript Dasar : Komentar Satu Baris (//) - Leja Aprianza - Buka New Terminal

setelah itu, silahkan tulis  "node <file Node.js kalian>". Karena file saya "coba.js" maka berikut contohnya :

Javascript Dasar : Komentar Satu Baris (//) - Leja Aprianza - New Terminal enter

Lalu kalian Enter dan tidak akan tampil apa-apa, tandanya program telah berhasil dijalankan.

Paham? jika belum, silahkan coba practice di bawah ini dan perhatikan apa yang terjadi.

PRACTICE!!
di bawah kode komentar yang kalian buat, tulis kode berikut :
console.log("Berhasil!");


Apa yang terjadi? Jawab di komentar yaaa...


Komentar Banyak Baris  (Multi-line Comment (/*....*/))

Hello, Saya Leja! Konsep multi-line comment (komentar banyak baris)  pada Javascript sama saja seperti pada komentar satu baris, yaitu kode yang diabaikan ketika Javascript dijalankan. 

Akan tetapi, dengan ini kita bisa memberikan komentar pada banyak baris sekaligus. Oke, langsung saja ke intinya.

Simbol komentar banyak baris :

di awal /*

di akhir */

Contoh implementasinya :

Javascript Dasar : Komentar Banyak Baris  (Multi-line Comment (/*....*/)) - JS0002

Berikut ketika program dijalankan dengan Node.js :

Javascript Dasar : Komentar Banyak Baris  (Multi-line Comment (/*....*/)) - JS0002 - run

Ketika kode dijalankan maka tidak akan tampil apa-apa. 

Apakah kode program dapat dijalankan? 

 Jika kamu masih bingung, silahkan tanya di kolom komentar yaa...



Deklarasi Variabel

Kali ini kita akan membahas tentang variabel JavaScript. Terdapat 8 tipe data yang berbeda di JavaScript, yaitu :

1. undefined
2. null
3. boolean
4. string
5. symbol
6. bigint
7. number
8. object

Misalnya, komputer dapat membedakan antara angka 12 dengan string "12".

Variabel pada komputer berfungsi untuk menyimpan dan memanipulasi data secara dinamis. Salah satu dari delapan tipe data tersebut dapat disimpan dalam variabel.

Operasi matematika hanya dapat dilakukan pada angka, tetapi tidak dengan string.

singkatnya, string itu berisi karakter maka tidak bisa secara langsung dilakukan operasi matematika.

Sekarang, langsung kita coba membuat variabel angka dan string, kemudian mencoba untuk melakukan operasi matematika sederhana terhadap keduanya. 

Buat file dengan nama "coba.js" di Visual Studio Code, kemudian ketik kode di bawah:

var angka = 12;
console.log(angka);

Selanjutnya jalankan kode dengan membuka "New Terminal", kemudian ketik :

node coba.js

pada Terminal Visual Studio Code, maka akan tampil seperti gambar di bawah ini :

JavaScript Dasar : Deklarasi Variabel - JS0003 - Number - Leja Aprianza

terlihat bahwa angka 12 muncul pada output terminal. Kemudian, jika kamu ingin mengubah angka 12 menjadi karakter atau string, maka kamu dapat menggunakan dua petik dua ("") di antara angkanya, misalnya :

var angka = "12";
console.log(angka);


Challenge!!
Sekarang, kamu coba operasi matematika ini :

JavaScript Dasar : Deklarasi Variabel - JS0003 - operasi matematika - Leja Aprianza

Apa yang terjadi?

Selanjutnya ini :

JavaScript Dasar : Deklarasi Variabel - JS0003 - string - Leja Aprianza

Apa yang terjadi juga?


Menyimpan Nilai dengan Assignment Operator (=)

Kali ini kita akan membahas tentang "Assignment Operator" dengan simbol sama dengan (=).

Di JavaScript, kamu dapat menyimpan nilai dari variabel dengan Assignment Operator. Misalnya :

JavaScript Dasar : Menyimpan Nilai dengan Assignment Operator - JS0004

Pertama, kode ini akan membuat variabel bernama number. Kemudian, kode tersebut  menyimpa angka 5 ke variabel number.

Nah, ketika variabel number dipanggil, maka akan membawa angka 5.


Challenge!!
Sekarang supaya makin paham, coba kamu jalankan challenge program di bawah ini!


Tulis kode syntax di bawah pada file coba.js (nama file bisa dimodif sesuai kebutuhan kalian).


JavaScript Dasar : Menyimpan Nilai dengan Assignment Operator - JS0004 - challenge

Kemudian buka "New Terminal", selanjutnya jalankan javascript pada terminal dengan ketik :

node coba.js

Apa yang terjadi?

Masih bingung? silahkan tanya di kolom komentar yaaa...


Memasukkan Nilai Variabel ke Variabel yang lain

Bahasan kali ini masih berhubungan dengan variabel. Setelah nilai ditetapkan ke variabel menggunakan "Assignment Operator", kamu dapat menetapkan nilai variabel tersebut ke variabel lain menggunakan Assignment Operator (=).

misalnya :

JavaScript Dasar : Memasukkan Nilai Variabel ke Variabel yang lain - JS0005

Seperti yang terlihat pada gambar di atas, variabel number memiliki nilai 5, kemudian variabel number2 juga memiliki nilai 5 karena nilainya diisi oleh variabel number yang telah memiliki nilai 5.

Challenge!!

Supaya kamu lebih paham, coba kamu eksekusi nilai di atas dengan console.log.

Tulis kode di bawah pada file coba.js (nama file bisa dimodif sesuai kebutuhan kalian).

var number;

number5;
var number2;
number2 = number;
console.log(number);
console.log(number2);

Kemudian buka "New Terminal", selanjutnya jalankan dengan ketik :

node coba.js

Apa yang terjadi?

Masih bingung? silahkan tanya di kolom komentar yaa...

<Daftar Isi>

Menginisialisasi Variabel dengan Assignment Operator

Merupakan hal yang umum untuk menginisialisasi variabel ke nilai awal di baris yang sama seperti yang dideklarasikan.

JavaScript Dasar : Menginisialisasi Variabel dengan Assignment Operator - JS0006

Dari gambar di atas, artinya ini akan membuat variabel bernama number dengan nilai awal 0.

<Daftar Isi>

Variabel yang Tidak Diinisialiasi

Ketika variabel JavaScript dideklarasikan tanpa ada nilai awalnya, maka variabel tersebut outputnya undefined atau tidak terdefinisi. 

Jika kamu melakukan operasi matematika pada variabel tak terdefinisi, hasilnya adalah NaN yang berarti "Bukan Angka". 

Jika kamu menggabungkan string dengan variabel tidak terdefinisi, maka saat dijalankan akan muncul keterangan "undefined".

Contoh pada string:

JavaScript Dasar : Variabel yang Tidak Diinisialiasi - JS0007 string

maka saat dijalankan:

JavaScript Dasar : Variabel yang Tidak Diinisialiasi - JS0007 string terminal

Contoh pada operasi matematika :

JavaScript Dasar : Variabel yang Tidak Diinisialiasi - JS0007 NaN terminal

saat dijalankan:

JavaScript Dasar : Variabel yang Tidak Diinisialiasi - JS0007 NaN terminal


Case Sensitivity pada Variabel

Di JavaScript semua variabel dan nama dari fungsi bersifat "case sensitive". Artinya,besar atau kecilnya huruf (kapitalisasi) sangat berpengaruh terhadap pemrograman ini.

Variabel BUDI tidak sama dengan BuDi atau budi. Dimungkinkan untuk memiliki beberapa variabel berbeda dengan nama yang sama tetapi kapitalisasi berbeda.

contoh :

var BUDI = "Saya ";
var BuDi = "Budi ";
var budi = "Doremi";
console.log(BUDI + BuDi + budi);

maka outputnya :

JavaScript : Case Sensitivity pada Variabel - JS0008

Note : agar tidak keliru, sebaiknya gunakan nama variabel yang berbeda. Ini hanya contoh kasus ketika harus menggunakan nama variabel yang sama.


Menambahkan Dua Angka

Number adalah tipe data dalam JavaScript yang merepresentasikan data numerik. Sekarang mari kita coba menambahkan dua angka menggunakan JavaScript. JavaScript menggunakan simbol + sebagai operator penjumlahan ketika ditempatkan di antara dua angka.

Contoh :

var x = 1;
var y = 5;
var z = x + y;
console.log(z);

maka hasilnya :

JavaScript Dasar : Menambahkan Dua Angka dengan JavaScript - JS0009



Operasi Pengurangan

 Kita juga dapat melakukan operasi pengurangan pada JavaScript. JavaScript menggunakan simbol - untuk pengurangan.

Contoh :

var x = 1;
var y = 5;
var z = x - y;
console.log(z);

Hasilnya :

JavaScript Dasar : Operasi Pengurangan - JS0010


Operasi Perkalian

Kita juga bisa mengalikan satu angka dengan angka lainnya. JavaScript menggunakan simbol * untuk perkalian dua angka.

contoh :

var x = 2;
var y = 5;
var z = x * y;
console.log(z);

Hasilnya :

Operasi Pembagian

Kita juga bisa membagi satu angka dengan angka lainnya. JavaScript menggunakan simbol / untuk pembagian.

Contoh :

var x = 5;
var y = 2;
var z = x / y;
console.log(z);

Hasilnya :

JavaScript Dasar : Operasi Pembagian - JS0012


<Daftar Isi>

Konsep Increment pada Sebuah Nilai

Increment artinya menambahkan nilai satu (1) pada variabel yang kamu buat dengan menggunakan operator ++.

misal:

x++;

sama dengan :

x = x + 1;

Artinya, penulisan increment akan lebih efisien dengan x++; karena tidak menggunakan simbol = .

Contoh :

JavaScript Dasar : Konsep Increment pada Angka - JS0013

Hasilnya :

JavaScript Dasar : Konsep Increment pada Angka - JS0013 - hasil

<Daftar Isi>

Konsep Decrement pada Sebuah Nilai

Decrement merupakan metode untuk mengurangi satu nilai sebuah variabel. 

operator yang digunakan : --

Contoh:

x--;

ini sama saja seperti :

x = x - 1;

contoh :

var x=5;
    x--;
console.log(x);

hasilnya :
Konsep Decrement pada Sebuah Nilai


Membuat Nilai Desimal

Kita juga dapat menyimpan nilai desimal ke variabel. Nilai desimal bertipe data float.

Ingat yaa! desimal di sini harus pakai tanda titik, seperti 7.8, 5.6.

contoh :

var x=5.7;
console.log(x);

hasilnya :

Membuat Nilai Desimal

Challenge!!

sekarang kalian coba operasi di bawah ini :

var x=5 / 2;
console.log(x);

Apa yang akan tampak?

<Daftar Isi>

Mendapatkan Nilai Sisa

operator nilai sisa adalah %. Operasi ini akan menampilkan nilai sisa dari sebuah operasi pembagian.

Misalnya, 5 dibagi 2 akan memunculkan nilai sisa 1. 

nilai integer yang mendekati 5 adalah 4, maka 4 seharusnya jika dibagi 2 maka hasilnya 2 dan sisa 0. Sehingga jika 5 maka 5-4 = 1

nilai 1 itulah yang akan dimunculkan oleh nilai sisa

Contoh penulisan:

var x=5%2;
console.log(x);

maka hasilnya:

1

dengan konsep ini, maka kita dapat menentukan suatu angka ganjil atau genap dengan pembagi 2.

Jika genap maka nilainya :

0

Jika ganjil maka nilainya :

1

Dari sini, kamu dapat berkreasi ketika bertemu dengan kondisi yang mengharuskan nilai tertentu yang menjadi sisa, tidak hanya berpatok pada ganjil dan genap.

Challenge!!

Coba ini :

var x=5%3;
console.log(x);

Apa yang terjadi?

<Daftar Isi>

Compound Assignment

maskudnya yaitu kamu dapat menambahkan nilai variabel ke variabel itu sendiri. 

Contoh :

var x1;
x = x + 5;
console.log(x);

 maka hasilnya:

6

operator tambah (+) dapat kamu ganti dengan operator lainnya, sesuai kebutuhanmu.

<Daftar Isi>

Deklarasi String pada Variabel

untuk mendeklarasikan string, kamu perlu menggunakan tanda petik dua ("....") atau petik satu('....') di antara karakter yang ingin kamu buat. 

contoh:

var nama = "saya leja";
console.log(nama);

maka hasilnya:

saya leja

Kamu juga dapat menggabungkan dua string yang berbeda dengan operator +.

contoh:

var nama = "saya" + " leja";
console.log(nama);

maka outputnya akan sama seperti pada output sebelumnya.

kamu juga dapat mengetahui panjang karakter dengan menggunakan properti .length

contoh:

var nama = "saya" + " leja";
console.log(nama.length);

maka output-nya:

9

hasilnya 9 karena dari jumlah karakternya, spasi dianggap karakter.

<Daftar Isi>

Array pada JavaScript

array merupakan metode memasukkan banyak nilai sekaligus ke satu variabel.

contoh:

var nama =["suherman","yanto""rian"];
console.log(nama);

maka outputnya:

'suherman''yanto''rian' ]

jika nama.length maka outputnya:

3

yang terhitung yaitu banyak nilainya. maka pada variabel nama, hanya ada tiga orang.

<Daftar Isi>




EmoticonEmoticon