Tutorial Lengkap Belajar JavaScript # Apa Itu JavaScript?

Situs web akan sangat menarik ketika web tersebut benar-benar hidup (interaktif) bukan hanya menampilkan halaman web yang mati.
Slide gambar, efek parallax, toggle menu, validasi input form dan berbagai efek menarik lainya akan membuat pengunjung merasa betah berlama-lama di website kita.

Semua ini adalah peran dari bahasa pemrograman yang dikenal dengan sebutan javascript.
Javascript ibarat nyawa dari sebuah halaman web karena fungsinya yang menjadikan website dapat berinteraksi dengan pengunjung.

Mari kitu mulai pembahasannya,

Daftar Isi

Apa Itu Javascript?
Alat Yang Digunakan Untuk Menulis Javascript
Cara Membuat Kode Javascript

Apa Itu Javascript?

Javascript adalah bahasa pemrograman yang awalnya dikhususkan untuk membangun sebuah halaman web agar menjadi lebih hidup dan interaktif.
Berbeda dengan html dan css, menulis kode javascript di perlukan algoritma dan logika pemrograman.

Jika diibaratkan halaman web adalah sebuah rumah, javascript adalah jendela atau pintu yang bisa dibuka dan ditutup.

Tutorial Lengkap Belajar JavaScript # Apa Itu JavaScript?

Javascript menjadi bahasa pemrograman yang wajib dikuasai oleh seorang web developer.

Apalagi sekarang javascript bukan hanya bahasa pemrograman yang dikhususkan untuk web saja, tapi bisa juga untuk mengembangkan aplikasi mobile, dekstop, server, console, game bahkan IOT.

Keren ya???

Bahkan javascript menjadi bahasa pemrograman paling banyak digunakan di github (Saat postingan ini di publish).

Tutorial Lengkap Belajar JavaScript # Apa Itu JavaScript?

Ini berakibat pada banyak developer yang terus berkontribusi untuk bahasa pemrograman yang satu ini.

Alat Yang Digunakan Untuk Menulis Javascript

Javascript adalah bahasa pemrograman instan, artinya kita tidak perlu direpotkan mengenai compiler, IDE khusus, flatform khusus. Kita hanya perlu text editor dan browser (pen: Jika ingin membangun website).

Yups itu saja, untuk saat ini.

Kalian bisa menggunakan teks editor fovorite kalian, saran saya gunakan text editor yang mendukung autocomplete javascript agar lebih mudah dan mempercepat penulisan kode, seperti sublime, atom dan visual code.

Dan untuk web browser kalian bisa menggunakan browser manapun yang mendukung javscript tentunya.
Selalu gunakan versi yang terbaru.

Cara Membuat Kode Javascript

Ada tiga cara yang bisa kita lakukan untuk membuat kita lakukan untuk mengimplementasikan kode javascript ke dalam html. Yaitu,

Import JavaScript (Eksternal javascript)

Import javascript artinya kita memisahkan file javacript dengan file htmln ya.
File javascript di disimpan dalam format tipe .js.
Cara ini adalah cara yang paling banyak di gunakan oleh seorang web developer

Kelebihan Ekstenal Javascript

Dokumen html menjadi lebih rapi karena tidak disisip kode lain
Javascript reusable atau bisa digunakan untuk html yang lain
Project menjadi lebih terstruktur dan mudah di maintenance
Script javascript akan di simpan di cache sehingga halaman akan lebih cepat ketika di refresh.

Kekurangan Eksternal Javascript

Terkadang loading menjadi lebih lambat karena perlu mengimport javascript jika berbeda server.
Memungkinkan terjadi kegagalan dalam mengimport, seperti javascript tidak ada, link javascript salah dan lain sebagainya

Cara membuat eksternal javascript

Buka text editor kalian dan tulis kode berikut

var element = document.querySelector("p");
element.addEventListener("click",function(e){this.innerHTML='Javascript Bekerja';},false);

Silahkan kalian simpan dalam dengan nama bebas dan format tipe .js didalam folder yang sama dengan file html.
Selanjutnya kita tinggal mengimportnya kedalam file html. Buka file html dan didalam tag head atau di atas tag penutup body (</body>). Contohnya Seperti kode berikut,
```
Contohnya seperti kode berikut
<!DOCTYPE html>
<html lang="id-ID">
  <head>
    <title>Belajar Eksternal Css</title>
    <script src="ScriptYangLain.js"></script>
  </head>
  <body>
      <p>Click Me!</p>
      <script src="script.js"></script>
  </body>
</html>
```
Apa sih bedanya di taruh di dalam tag head dan di dalam tag body?.
Jawabanya ada ditutorial selanjutnya, sekarang kita fokus dulu membuat kode javascipt pertama kita.

Jika file javascriptnya berada di dalam sub folder, kalian tinggal tambahkan nama folder di attribute src nya,
```
<script src="[Nama Folder]/[Nama File Javascript].js"></script>
```
Dan jika file javascriptnya berada di luar folder html, kita tambahkan "../"
```
<script src="../[Nama File Javascript].js"></script>
```

Embed JavaScript (Internal javascript)

Menyisipkan kode javascript di dalam html dapat kita lakukan dengan menulisnya di dalam tag script. Cara ini dilakukan ketika kode javascript yang dibuat, khusus menangani html terkait, hal ini lebih efisien dibanding kita membuat file javascript tersendiri.

Kelebihan Internal Javascipt

Lebih mudah karena javascript langsung di tulis di dalam dokumen html
Lebih efektif karena kita hanya menulis kode yang diperlukan.

Kekurangan Internal Javascript

Kode Javascript yang sudah ditulis tidak dapat di gunakan untuk file html yang lain (Non Reusable)
Html menjadi terlihat tidak rapi

Cara membuat internal javascript

Menyisipkan kode javascript di dalam html dapat kita lakukan dengan menulis kode javascript di dalam tag script.

Contohnya seperti kode berikut,

<!DOCTYPE html>
<html lang="id-ID">
  <head>
  </head>
  <body>
      <p>Click Me!</p>
      <script>
	  var element = document.querySelector("p");
	  element.addEventListener("click",function(e){this.innerHTML='Javascript Bekerja';},false);
      </script>
  </body>
</html>

Javascript Dom Event (Inline javascript)

Kita bisa langsung menulis javascript didalam event atribut sebuah element tertentu.
Seperti onclick, onkeypress, onload dan lain sebagainya.
Cara ini bisa dilakukan ketika kita ingin mengimplementasikan javascript untuk element tertentu yang ada di dalam html.

Kelebihan Inline Javascript

Lebih mudah
Lebih efektif karena kita langsung menulis kode javascript pada element yang di tuju.

Kekurangan Inline Javascript

Kode html terlihat berantakan
Sulit di maintenance karena bercampur dengan kode html

Cara membuat inline javascript

Membuat inline javascript dapat kita lakukan dengan cara menulis kode javascript didalam DOM Event atau atribut element yang memiliki fungsi sebagai event seperti onclick, onkeypress, onload, onfocus dan lain sebagainya.

Contohnya seperti kode berikut,

<!DOCTYPE html>
<html lang="id-ID">
  <head>
  </head>
  <body>
      <p onclick="this.innerHTML='Javascript Bekerja';">Click Me!</p>
  </body>
</html>

Sampai disini pengenalan javascipt dan membuat kode javascipt pertama kita.

Jika kalian merasa artikel ini bermanfaat siahkan klik tombol bagikan.
Jika ada pertanyaan atau ada hal yang ingin disampaikan, bisa di tulis di kolom komentar.