Apa Itu JavaScript: Definisi, Fungsi,Dan Cara Kerja JavaScript Pada Html

Apa Fungsi JavaScript?

Fungsi JavaScript yang paling umum adalah untuk pengembangan aplikasi web dan mobile, membangun web server dan aplikasi server, membuat website yang interaktif, serta game development.

Bahasa pemrograman JavaScript sekarang memiliki banyak framework dan library yang bisa membantu mempercepat proses, seperti AngularJS, jQuery, and ReactJS.

Meskipun umumnya melayani program berbasis web, fitur pemrograman JavaScript memiliki implementasi lain di area yang berbeda. Untuk lebih jelasnya, berikut kegunaan JavaScript:

1. Efisiensi Pengembangan Aplikasi Web dan Seluler

Pengembangan framework JavaScript, yang terdiri dari library kode JavaScript, memungkinkan developer menggunakan kode JS siap pakai dalam proyek mereka. Proses yang harus dilalui pun menjadi lebih cepat dan efisien karena mereka tidak perlu menulis kode dari nol.

Setiap framework JavaScript memiliki fitur yang berfungsi untuk menyederhanakan proses development dan debugging.

Misalnya, framework front-end seperti jQuery dan ReactJS bisa membantu meningkatkan efisiensi desain. Developer bisa menggunakan ulang dan memperbarui komponen kode tanpa memengaruhi satu sama lain, baik dari segi fungsi maupun nilai.

Sementara itu, framework pengembangan aplikasi mobile seperti Cordova dan Titanium bisa digunakan untuk membuat aplikasi native atau hybrid.

Implementasi kode JS di Node.js juga berperan penting dalam web development. Node.js bisa mengurangi waktu respons server karena sifatnya yang single-threaded dan memiliki arsitektur non-blocking.

2. Membangun Web Server dan Aplikasi Server

Melalui Node.js, JavaScript memungkinkan developer membangun web server dan infrastruktur back-end sehingga akan menghemat waktu dan tenaga dalam hal pembuatan web server.

Modul HTTP built-in pada bahasa pemrograman ini memungkinkan Anda mengembangkan server HTTP basic yang menampilkan teks biasa saat pengunjung mengakses halaman web.

Anda bisa menggunakan web server Node.js sendiri, Node-OS, atau milik pihak luar seperti Microsoft Internet Information Services (IIS) dan Apache untuk menangani permintaan HTTP.

Node-OS bekerja paling baik di sistem operasi Linux karena dikembangkan berdasarkan kernel Linux.

3. Membuat Website yang Interaktif

Fungsi JavaScript berikutnya adalah untuk menciptakan halaman web yang dinamis, seperti untuk menampilkan animasi, mengubah visibilitas teks, dan membuat menu drop-down.

Meskipun Anda bisa menggunakan HTML dan CSS saja untuk membuat website, halaman yang dihasilkan hanya akan memiliki tampilan statis tanpa adanya JavaScript. Bahasa pemrograman ini memungkinkan pengunjung berinteraksi dengan halaman web, dan Anda pun bisa menyajikan user experience yang lebih baik.

Selain itu, JavaScript memungkinkan Anda mengubah konten dan nilai atribut HTML tanpa harus merefresh halaman web dulu. Sebab, JavaScript mendukung tipe data berikut:

String ‒ terdiri dari data teks yang ditulis di dalam tanda kutip. Misalnya, “Hello World”, ‘Hello World’, dan “Display ‘Hello world’ text“.
Number ‒ mencakup bilangan bulat dan floating-point antara (2^53 – 1) dan -(2^53 – 1).
Boolean ‒ tipe data logis dengan nilai true dan false.
BigInt ‒ merepresentasikan data bilangan bulat (integer) dengan panjang arbitrer.
Null ‒ berisi nilai nol.
Undefined ‒ termasuk variabel yang dideklarasikan, tapi tidak ditetapkan.
Symbol ‒ menyediakan identifier unik untuk objek.
Object ‒ untuk struktur data kompleks yang ditulis dengan kurung kurawal. Misalnya, {item:”Buku”, information:”biografi”}.

Tipe data primitif, yang terdiri dari semua tipe data kecuali object, hanya bisa menyimpan satu data. Sementara itu, tipe data object bisa berisi sekumpulan nilai.

Dengan JavaScript, Anda juga bisa meningkatkan pengalaman browsing pengunjung menggunakan cookie. Untuk membuat, membaca, dan menghapus cookie dalam JavaScript, diperlukan properti document.cookie yang berfungsi sebagai “getter and setter” nilai cookie.

4. Memudahkan Pengembangan Game

JavaScript juga bisa membantu Anda membuat game kalau digunakan dengan HTML5 dan Application Programming Interface (API) seperti WebGL. Ada banyak game engine berbasis JavaScript seperti Phaser, GDevelop, dan Kiwi.js yang tersedia untuk rendering grafis, daur ulang kode, dan aplikasi lintas platform.

Beberapa contoh game yang dibuat dengan JavaScript antara lain adalah Angry Birds, The Wizard, dan 2048.

Cara Menggunakan JavaScript pada HTML

Ada dua cara menggunakan JavaScript pada HTML, yaitu secara internal dan eksternal. JavaScript internal menggunakan tag <script> pada body script HTML untuk mencakup semua kode JavaScript.

Berikut contoh JavaScript internal dengan tag <script>:

<html>

<head>

<title>Inline JavaScript</title>

alert("Hello World");

</script>

</head>

<body>

</body>

</html>

Anda juga bisa meng-embed skrip pada atribut event HTML, meminta browser untuk mengeksekusinya saat sebuah event dipicu. Jenis skrip ini disebut inline JavaScript (hapus tanda “*” pada “onclick” untuk menggunakan kode):

<button *onclick*="alert('Click for more details')">Click</button>

Di sisi lain, JavaScript eksternal dilakukan dengan menyimpan kode dalam file .js terpisah, lalu memanggilnya kembali di halaman HTML. Developer sering menggunakan metode ini saat mengerjakan proyek besar, karena akan membuat skripnya lebih teratur.

Anda juga bisa menggunakan lagi skrip JavaScript eksternal di beberapa halaman HTML, yang tentunya akan sangat membantu.

Misalnya, menambahkan skrip berikut ke halaman HTML memungkinkan Anda memanggil kembali file JavaScript eksternal bernama script.js:

Ini adalah contoh cara mereferensikan file JavaScript eksternal:

<html>

<head>

<title>Time right now:</title>

</head>

<body>

<button type="button" onclick="myFunction()">Select</button>

</body>

</html>

Anda bisa membuat dan memodifikasi kode JavaScript menggunakan text editor. Aplikasi text editor yang bisa digunakan juga bermacam-macam, silakan lihat rekomendasi HTML text editor terbaik kami untuk memilih mana yang paling sesuai kebutuhan.

Perlu diingat bahwa ada dua jenis text editor, yaitu WYSIWYG (what-you-see-is-what-you-get) dan editor tekstual. Editor WYSIWYG lebih cocok untuk pemula karena menampilkan tampilan blok kode pada halaman.

Contohnya, TinyMCE adalah text editor WYSIWYG populer yang digunakan di WordPress.

Di sisi lain, editor berbasis teks memberi Anda kebebasan untuk menyesuaikan kode, tapi membutuhkan skill HTML. Beberapa text editor yang paling populer mencakup Sublime Text, Atom, dan Notepad++.

Mau tahu selengkapnya? Silakan lihat tutorial kami tentang cara membuat JavaScript di HTML. Di tutorial tersebut, kami memberikan contoh dan penjelasan lengkap tentang implementasi JavaScript. Website resmi JavaScript juga menyediakan banyak tutorial demo bagi pemula dan para fans JavaScript.