Pengertan, Sejarah, dan Cara Menggunakan JavaScript | Tutorial JavaScript #1

FAUZIDLEWARE - Salah satu bahasa pemrograman yang paling populer di Dunia adalah JavaScript. Awalnya, bahasa pemrograman ini digunakan pengembangan web dari sisi client, namun seiring berkembang pesatnya teknologi membuat JavaScript bisa digunakan untuk berbagai macam keperluan, mulai dari pemrograman web dari sisi client maupun server, pembuatan aplikasi mobile, pembuatan aplikasi desktop, pembuatan game, dan masih banyak lagi.

Pada artikel ini kita akan belajar untuk mengenal tentang bahasa pemrograman JavaScript, mempersiapkan lingkungan kerja, dan memahami dasar-dasar penggunaan JavaScript.

1. Pengenalan JavaScript

1.1. Apa itu JavaScript ? 

JavaScript merupakan salah satu bahasa pemrograman atau bahasa skrip yang populer di dunia. Bahkan pada survey stackoverflow untuk Programming, scripting, and markup languages tahun 2024 bahasa ini menempati urutan pertama dengan 62,3% respondents

Gambar: Programming, scripting, and markup languages

Bisa dilihat pada https://survey.stackoverflow.co/2024/technology/

Pada awalnya, JavaScript diciptakan sebagai bahasa untuk pemrograman web dari sisi client, yangmana dengan ini kita bisa membuat tampilan halaman web lebih interaktif dengan pengguna.

Seiring berkembang pesatnya teknologi dan dengan kemunculan berbagai framework dan library yang dikembangkan oleh berbagai macam developer di seluruh dunia, membuat bahasa ini bisa berjalan di sisi server, bahkan bisa digunakan untuk pengembangan diluar aplikasi web seperti aplikasi mobile, desktop, game, dan lain-lain.

1.2. Sejarah JavaScript

Perlu dipahami bahwa JavaScript dan Java adalah 2 bahasa pemrograman yang berbeda dan tidak bisa disamakan. Lantas mengapa namanya mirip ?

Gambar: Brendan Eich

JavaScript adalah bahasa pemrograman yang pertama kali dikembangkan oleh Brendan Eich pada tahun 1995 saat ia bekerja di Netscape Communications Corporation. Bahasa ini awalnya dirancang untuk berjalan di dalam browser Netscape Navigator dengan tujuan menambahkan kemampuan interaktif pada halaman web, berbeda dari HTML dan CSS yang hanya mengatur struktur dan tampilan. Dalam waktu hanya 10 hari, Eich merancang JavaScript sebagai bahasa pemrograman yang ringan dan mudah dipelajari untuk memperluas fungsionalitas web.

Awalnya, JavaScript diberi nama Mocha, kemudian berubah menjadi LiveScript, dan akhirnya dikenal sebagai JavaScript. Nama ini dipilih untuk menarik perhatian dari bahasa Java yang sedang populer saat itu, meskipun JavaScript dan Java berbeda secara mendasar.

JavaScript dengan cepat diadopsi oleh para pengembang web, dan pada tahun 1996, Microsoft menciptakan versi JavaScript sendiri yang dikenal sebagai JScript untuk mendukung browser Internet Explorer. Karena perbedaan ini, komunitas web merasa perlu untuk membuat standar agar JavaScript dapat digunakan secara konsisten di semua browser. Pada tahun 1997, JavaScript distandarisasi oleh ECMA International dengan nama ECMAScript, yang kemudian dikenal sebagai spesifikasi resmi dari JavaScript.

Seiring berkembangnya web, JavaScript mengalami peningkatan signifikan dalam fungsionalitas dan kapabilitas. Pada 2009, Node.js dikembangkan oleh Ryan Dahl, memungkinkan JavaScript dijalankan di sisi server untuk pertama kalinya, sehingga memperluas jangkauan JavaScript di luar browser. Kemudian pada tahun 2015, ECMAScript 6 (juga dikenal sebagai ES6) diluncurkan, membawa banyak fitur baru yang semakin mematangkan JavaScript sebagai bahasa pemrograman modern, seperti let, const, arrow function, dan promise.

1.3. Penggunaan Umum JavaScript Pada Web

Walaupun saat ini JavaScript sudah bisa berjalan pada berbagai sisi pengembangan atau tidak harus di web, namun untuk pembelajara awal kita akan coba bahas bagaimana peran JavaScript dalam web. Untuk pengembangan lebih lanjut akan dibahas pada artikel yang lainnya.

Perlu diketahui bahwa ada 3 bahasa wajib yang harus dipelajari jika ingin menjadi web developer: HTML, CSS, dan JavaScript.

Masing-masing bahasa tersebut punya peran sendiri-sendiri.

a. HTML (HyperText Markup Language) -> adalah bahasa markah untuk membuat struktur dari halaman web, jadi tugas utama dari HTML adalah mendefinisikan konten dari halaman web, seperti bagaimana sebuah teks ditampilkan sebagai paragraf atau heading, membuat link yang ketika diklik akan membuka halaman tertentu, membuat format layout dari halaman web, dan sebagainya.

b. CSS (Cascading Style Sheets) -> adalah bahasa yang digunakan untuk membuat tampilan halaman yang dibangun menggunakan HTML lebih menarik. Dengan CSS kita bisa menyusun layout lebih rapi, membuat style font lebih menarik, mengatur pewarnaan atau tema halaman web. Apakah dengan HTML tidak bisa mengatur style halaman web ? bisa saja, namun tidak direkomendasikan apalagi dengan teknologi modern lebih diutamakan menggunakan CSS.

c. JavaScript -> adalah bahasa pemrograman yang dapat dimanfaatkan untuk membuat halaman web lebih interaktif, contohnya pada suatu halaman kita ingin menambahkan animasi yang muncul dari berbagai interaksi klik pengguna, maka peran JavaScript akan sangat penting.

Gambar: analogi 3 bahasa

Perhatikan pada gambar di atas, analoginya dalam tubuh manusia HTML adalah tulang yang membuat tubuh berdiri (memberikan bentuk tangan, kepala, kaki, dan anggota tubuh lain), lalu CSS digambarkan sebagai kulit dan pakaian yang membuat tubuh lebih menarik dengan style yang digunakan, lalu JavaScript digambarkan sebagai otak dan otot-otot yang mengatur kecerdasan serta kerja dari anggota tubuh yang disusun.

2. Menyiapkan Lingkungan Kerja

2.1. Code Editor dan Web Browser

Ketika belajar pemrograman web pasti tidak lepas dari code editor dan web browser. Jika sudah mulai belajar JavaScript saya asumsikan sudah pernah belajar HTML dan CSS, dan pastinya sudah punya code editor dan web browser andalan.

Macam-macam code editor:

• Visual Studio Code
• Atom
• Notepad++
• Sublime Text
• dsb.

Macam-macam web browser:

• Chrome
• Firefox
• Opera
• UC Mini
• Safari
• Edge
• dsb.

2.2. Menjalankan Kode JavaScript di Browser

Untuk menjalankan kode JavaScript di browser kita bisa menggunakan cara embed dalam kode HTML atau menyimpan dalam file terpisah atau external.

a. embed

Semisal kita punya satu dokumen HTML seperti berikut

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Belajar JavaScript</title>

</head>

<body>

    <h1>Hello, World!</h1>

</body>

</html>

Lalu semisal kita punya satu tombol

...

<body>

    <h1>Hello, World!</h1>

    <button id="item-tombol">

        Klik Di Sini

    </button>

</body>

...

Maka tampilan awal yang kita dapat seperti berikut ini

Gambar: tampilan halaman web untuk belajar

Sekarang kita coba buat agar ketika tombol Klik Di Sini diklik oleh yang mengakses halaman web maka mengubah teks Hello, World! menjadi Belajar JavaScript

Kode JavaScript yang digunakan adalah sebagai berikut

function gantiTeks() {

  document.getElementsByTagName("h1")[0].innerHTML = "Belajar JavaScript";

}

document.getElementById("item-tombol").addEventListener("click", gantiTeks);

Untuk maksud dari kode di atas akan kita bahas pada artikel lainnya, sekarang fokus kita adalah bagaimana cara menggunakan kode berikut dalam halaman web sebelumnya agar fungsi tombol bekerja.

Pada penggunaan embed JavaScript, kode diletakkan di dalam elemen <script> ... </script>

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Belajar JavaScript</title>

  </head>

  <body>

    <h1>Hello, World!</h1>

    <button id="item-tombol">Klik Di Sini</button>

    <script>

      function gantiTeks() {

        document.getElementsByTagName("h1")[0].innerHTML = "Belajar JavaScript";

      }

      document.getElementById("item-tombol").addEventListener("click", gantiTeks);

    </script>

  </body>

</html>

Dengan begitu ketika tombol diklik maka teks akan berubah

Gambar: hasil akhir menjalankan javascript

b. external

Cara ini hampir sama namun kita menulis kode JavaScript pada file yang berbeda. File disimpan dengan format atau ekstensi .js contohnya script.js

Gambar: file html dan javascript yang disimpan

Perhatikan pada gambar di atas, terdapat 2 file. yangmana file index.html berisi kode-kode HTML dan file script.js berisi kode javascript yang tadi sudah kita coba, lalu untuk pemanggilannya kita menambahkan atribut src=" " pada elemen <script> dan nilainya berupa lokasi file javascriptnya, karena di sini file JavaScript kita simpan satu lokasi maka bisa dipanggil dengan namanya saja

<script src="script.js"></script>

Sitem nya seperti nilai src=" " pada pemanggilan gambar dari elemen <img> jadi bisa berupa relative url atau absolute url.

Berikut kode untuk file html dan file javascript nya

index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Belajar JavaScript</title>

  </head>

  <body>

    <h1>Hello, World!</h1>

    <button id="item-tombol">Klik Di Sini</button>

    <script src="script.js"></script>

  </body>

</html>

script.js

function gantiTeks() {

  document.getElementsByTagName("h1")[0].innerHTML = "Belajar JavaScript";

}

document.getElementById("item-tombol").addEventListener("click", gantiTeks);

Lalu coba lagi jalankan halamannya, maka harusnya hasilnya masih sama seperti sebelumnya.

Selanjutnya kapan kita menggunakan cara embed atau external ?. tergantung kondisinya, pertama cara embed hanya bisa digunakan dalam satu halaman saja, namun external bisa digunakan atau satu file bisa dipanggil di banyak halaman html. Jadi semua tergantung kondisi dan kebutuhan.

Itu tadi beberapa pembahasa tentang dasar-dasar JavaScript. Pembahasan lebih lanjut ada pada artikel-artikel yang lainnya.