DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar JavaScript # Apa Itu JavaScript?

advertisement
Apa itu javascript?

Situs web akan sangat menarik ketika website tersebut benar-benar hidup (interaktif) bukan hanya menampilkan halaman web yang mati. 

Slide gambar, efek animasi paralax, validasi input form dan berbagai efek lainya akan membuat pengunjung merasa betah.
Javascript pada blog deretcode
Contoh penggunaan javascript pada deretcode

Semua ini adalah peran dari bahasa pemrograman yang dikenal dengan sebutan javascript.
Javascript ibarat nyawa dari sebuah halaman web karena fungsinya yang menjadikan halaman dapat berinteraksi dengan pengunjung.
Pada tutorial kali ini mari kitu mulai dengan pertanyaan

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 dan pintu yang bisa terbuka dan menutup
Ilustrasi 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).
Bahasa pemrograman yang paling populer di github
Ini berakibat pada banyak developer yang terus berkontribusi untuk bahasa pemrograman yang satu ini.

Alat Yang Digunakan Untuk Menulis Kode 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 mengembangan web).
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 penulan 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
  1. Dokumen html menjadi lebih rapi karena tidak disisip kode lain
  2. Javascript reusable atau bisa digunakan untuk html yang lain
  3. Project menjadi lebih terstruktur dan mudah di maintenance
Kekurangan Eksternal Javascript
  1. Terkadang loading menjadi lebih lambat karena perlu mengimport javascript
  2. Memungkinkan terjadi kegagalan dalam mengimport, seperti javascript tidak ada, link javascript salah dan lain sebagainya
Cara membuat internal javascript
  1. Buka text editor kalian dan tulis kode berikut
    var element = document.querySelector("p");
    element.addEventListener("click",function(e){this.innerHTML='Javascript Bekerja';},false);
    
  2. Silahkan kalian simpan dalam dengan nama bebas dan format tipe .js didalam folder yang sama dengan file html.
  3. Selanjutnya kita tinggal mengimportnya kedalam file html. Buka file html dan didalam tag head atau di atas tag penutup body (</body>). Tulis kode berikut
    <script src="[Nama File Javascript].js"></script>
    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 atribut 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
  1. Lebih cepat karena javascript langsung di tulis di dalam dokumen html
  2. Lebih efektif karena kita hanya menulis kode yang diperlukan
Kekurangan Internal Javascript
  1. Javascript tidak dapat di gunakan untuk file html yang lain (Non Reusable)
  2. 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
<script>/* Tulis kode javascriptmu disini */</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
1. Lebih mudah
2. Lebih efektif karena kita langsung menulis kode javascript pada element yang di tuju.
Kekurangan Inline Javascript
1. Kode html terlihat berantakan
2. 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
Tutorial selanjutnya kita akan belajar membuat variable dan function;
advertisement



0 Komentar untuk " Tutorial Lengkap Belajar JavaScript # Apa Itu JavaScript?"

Silahkan berkomentar dengan baik dan bijak!