Apa Itu JavaScript: Pengertian , Fungsi & Contohnya

Apa Itu JavaScript: Pengertian , Fungsi & Contohnya – Adakah yang belum tahu apa itu JavaScript? Jadi ini adalah salah satu bahasa pemrograman yang digunakan dalam pengembangan sebuah website selain HTML dan CSS.

HTML merupakan komponen utama dalam pembuatan website atau struktur utama. Kegunaan HTML adalah sebagai kerangka dari sebuah website.

Kemudian untuk membuat tampilan lebih menarik, dibutuhkan bahasa pemrograman yang bernama CSS. Dengan menggunakan CSS maka tampilan website akan lebih enak dipandang dan lebih menarik.

Namun HTML dan CSS merupakan bahasa pemrograman yang bersifat statis. Lalu apa itu JavaScript? JavaScript berguna untuk membuat website lebih hidup dan tidak statis.

Ibarat sebuah rumah, HTML adalah sebagai kerangka sebuah bangunan, CSS adalah yang membentuk bangunan seperti rumah pada umumnya. Sedangkan JavaScript adalah perlengkapan yang ada di dalam rumah yang membuat penghuni merasa nyaman jadi cukup jelas apa itu JavaScript.

JavaScript memiliki peran penting yang dapat membuat website lebih interaktif dan dinamis. Salah satu contoh hasil dari JavaScript bisa dilihat di situs yang memiliki sebuah galeri foto.

Pengunjung situs bisa melihat-lihat foto di situs tersebut tanpa harus melakukan reload. Itulah sisi dinamis dari bahasa pemrograman JavaScript.

Hal itu juga bisa dilihat pada saat kamu menggunakan aplikasi Google Map, dimana perubahan posisi GPS otomatis berjalan secara real time tanpa harus mereload aplikasi.

Mengenal Apa Itu JavaScript

Apa itu JavaScript? JavaScript adalah salah satu bahasa pemrograman yang banyak dipakai untuk pengembangan website, aplikasi dan juga game.

Jadi JavaScript tidak hanya digunakan sebagai bahasa pemrograman website saja, melainkan juga digunakan untuk sebuah aplikasi seperti di Google Map dan juga game.

Bahasa pemrograman ini mulai populer sejak Google menggunakannya sebagai suggestion pada kolom pencarian. AJAX JavaScript atau Asynchronous JavaScript and XML yang memungkinkan pembaharuan data tanpa harus melakukan reload.

Sejak saat itu, banyak pengembang menggunakan JavaScript sebagai salah satu bahasa pemrograman untuk membuat website lebih interaktif dan dinamis. JavaScript hampir digunakan di setiap website yang ada, karena banyak manfaatnya.

Fungsi Utama yang Dimiliki JavaScript

Apa itu JavaScript dan fungsinya? fungsi utama yang dimiliki oleh JavaScript adalah sebagai berikut:

1. Website lebih hidup

Jika kamu melihat website portal berita, biasanya akan tersedia bagian headline yang berisi berita utama yang bergerak otomatis. Itu merupakan hasil dari JavaScript yang membuat website terlihat lebih hidup dan interaktif.

Selain headline, kadang website juga memberikan notifikasi pop up kepada para pengunjung untuk mengikuti portal berita tersebut. Hal itu dibuat dengan menggunakan bahasa pemrograman JavaScript.

2. Membuat aplikasi mobile

Pembuatan aplikasi mobile memang lebih banyak menggunakan program Java untuk membuat aplikasi seperti di Android. Namun saat ini, JavaScript bisa digunakan untuk membuat aplikasi dengan Mobile API.

Ada developer yang sudah berhasil mengembangkan framework JavaScript yang dibuat khusus untuk aplikasi mobile, contohnya React Native yang bisa untuk pembuatan aplikasi iOS maupun Android.

3. Game web browser

Bukan hanya berguna untuk membuat sebuah website saja, JavaScript juga bisa digunakan untuk membuat game yang berbasis web game. JavaScript bisa digabungkan dengan HTML5 untuk membuat sebuah game berbasis web.

Salah satu contoh game yang dibuat dengan JavaScript adalah Flappy Bird. Ada juga JavaScript khusus yang bisa digunakan untuk membuat game seperti Panda.js.

4. Menjalankan web server

Selain digunakan untuk menghidupkan tampilan website, JavaScript juga bisa dijadikan sebagai bahasa pemrograman untuk menjalankan web server dengan Node.js.

Keunggulan menggunakan Node.js adalah dapat mengeksekusi permasalahan yang muncul secara bersamaan, tanpa harus menunggu satu per satu proses selesai.

Cara Kerja JavaScript

Apa itu JavaScript dan seperti apa cara kerjanya? JavaScript adalah bahasa pemrograman yang bisa digunakan di dua sisi baik itu client maupun server, berikut penjelasan lengkapnya:

5. Client

Dari sisi client, JavaScript memiliki peran untuk merubah tampilan sebuah website. Biasanya JavaScript di gabungkan dengan HTML. Jadi ketika halaman website dibuka, maka JavaScript akan secara otomatis berjalan.

Namun kadang juga JavaScript disimpan dalam file terpisah yang berekstensi js yang disisipkan dalam kode HTML.

Kode JavaScript ditulis dengan tag <script> yang dilengkapi atribut JavaScript. Untuk penulisan seperti apa itu JavaScript dan contohnya bisa dilihat di bawah ini:

<script type = “text/JavaScript”> dan agar dapat bekerja dengan baik tambahkan kode </script>

Pada saat pengunjung membuka website, JavaScript akan otomatis tereksekusi dan merubah tampilan sesuai dengan perintah yang dibuat. Tetapi jika pengunjung menggunakan browser yang tidak support JavaScript, maka program tidak akan tereksekusi dengan baik. Namun saat ini sudah sebagian besar browser sudah support terhadap JavaScript.

6. Server

Dari sisi server, JavaScript paling banyak digunakan sebagai database. Cara kerja JavaScript tak jauh berbeda dengan bahasa pemrograman yang biasa digunakan sebagai server seperti C# maupun Java.

Perbedaan mendasar JavaScript bekerja dengan non-blocking yaitu ketika program sedang dieksekusi, program tidak berhenti pada salah satu proses saja. Program akan berjalan terus untuk mempersiapkan perintah-perintah berikutnya.

Hal ini merupakan salah satu keunggulan menggunakan JavaScript yang lebih efektif. Contoh penggunaan adalah website yang di embed video Youtube.

Pengunjung bisa menjalankan pemutar video lewat website dan dapat mengakses informasi lain dalam website tersebut yang ditampilkan menggunakan JavaScript.

Tools yang Dipakai untuk Belajar JavaScript

Apa saja sih tools yang harus disiapkan untuk belajar JavaScript? Khusus bagi pemula, kamu cukup menggunakan tools berikut:

1. Web Browser (Google Chrome, Firefox, Opera, dll)
2. Teks Editor (rekomendasi: VS Code)
3. Node js

Cara kerja JavaScript

Seperti yang sudah dijelaskan sebelumnya, JavaScript adalah bahasa pemrograman yang digunakan untuk membuat interaktivitas pada website, seperti animasi, efek visual, dan responsif pada input pengguna. Hal inilah yang membuat JavaScript menjadi bahasa pemrograman favorit yang banyak digunakan. Nah, berikut ini merupakan cara kerja JavaScript:

1. Penulisan kode: Kode JavaScript ditulis di dalam file dengan ekstensi .js atau di dalam tag <script> pada file HTML.
2. Parsing: Ketika sebuah halaman web di-load, browser akan mem-parsing kode JavaScript dan mengeksekusinya secara berurutan dari atas ke bawah.
3. Execution: Setiap baris kode JavaScript akan dijalankan, dan jika ada kesalahan atau bug, browser akan memberikan pesan error di console.
4. Manipulasi DOM: JavaScript memungkinkan pengguna untuk mengubah tampilan dan isi halaman web dengan manipulasi DOM (Document Object Model), yaitu struktur HTML yang merepresentasikan halaman web.
5. Interaction: JavaScript juga memungkinkan pengguna untuk berinteraksi dengan halaman web, seperti menekan tombol, mengisi formulir, atau melakukan aksi lainnya yang dapat menghasilkan perubahan pada halaman.
6. Asynchronous: JavaScript juga mendukung pemrograman asynchronous, yang memungkinkan aksi atau operasi yang memerlukan waktu yang lama untuk berjalan tanpa menghentikan eksekusi kode lain.

Keunggulan yang Dimiliki JavaScript

Selain karena fungsi mumpuni yang dimiliki, pengembang atau developer website lebih suka menggunakan bahasa pemrograman JavaScript karena memiliki banyak keunggulan. Jika sudah paham apa itu JavaScript, berikut akan kita bahas apa saja keunggulan JavaScript:

1. Mudah dipelajari

JavaScript adalah salah satu bahasa pemrograman yang mudah dipelajari. Penulisan kode sangat singkat dan ringkas yang membuat pengembang bisa membuat dengan mudah.

2. Fleksibel digunakan

Sebelum JavaScript populer seperti sekarang ini, dulu pembuatan website menggunakan bahasa pemrograman PHP. Namun, PHP tidak sefleksibel JavaScript dan hanya bisa digunakan di sisi server saja.

Selain itu, PHP juga tidak bisa membuat website tampil interaktif dan dinamis seperti yang dilakukan oleh JavaScript. Karena berbagai kelebihan ada pada JavaScript, maka banyak pengembang beralih menggunakan bahasa pemrograman JavaScript sampai saat ini.

3. Lebih ringan

Menggunakan JavaScript akan lebih meringankan beban server dan menampilkan halaman website lebih cepat. Ketika pengunjung membuka website, maka file JavaScript akan terunduh secara bersamaan dan tereksekusi menjadi tampilan website.

4. Multiguna

JavaScript bersifat multiguna karena bisa digunakan sebagai frontend maupun backend yang bisa dilakukan dengan Node.js. Jadi developer tidak perlu menggunakan bahasa pemrograman lain untuk menjalankan sebuah website.

5. Komunitas aktif

Apa itu JavaScript? JavaScript adalah salah satu bahasa pemrograman yang memiliki komunitas aktif. Dengan demikian untuk yang belum terlalu paham dan ingin mempelajari lebih dalam, bisa ikut dalam komunitas tersebut.

Jadi ketika ada permasalahan yang muncul seputar JavaScript, bisa meminta solusi dan masukan dari para developer yang sudah berpengalaman.

6. Tips Belajar JavaScript untuk Pemula

Bagi pemula yang ingin mempelajari tentang bahasa pemrograman JavaScript, ada beberapa aplikasi yang dibutuhkan untuk mendukung proses belajar yang diantaranya:

• Web browser bisa menggunakan Google Chrome maupun Firefox
• Teks editor bisa gunakan Notepad atau Notepad++
• Web server yang digunakan untuk menjalankan kode JavaScript bisa menggunakan web hosting ataupun blogger

7. Mengenal Dom JavaScript

Apa itu DOM JavaScript? DOM JavaScript adalah tampilan antarmuka yang memungkinkan pengembang untuk melakukan manipulasi konten, style dan struktur dari sebuah situs web. Dom merupakan singkatan dari Document Object Model.

Seperti sudah dijelaskan di atas, bahwa sebuah website dibentuk dari 2 bahasa pemrograman yaitu HTML dan CSS. Browser kemudian membuat dokumen yang kemudian disebut DOM. Dokumen tersebut membuat JavaScript dapat mengakses dan memanipulasi elemen serta style web.

Struktur tersebut terdiri dari:

• Elemen HTML yang mana merupakan objek
• Properti serta event elemen HTML
• Method yang berguna untuk mengakses elemen HTML

Cara Memperoleh Elemen HTML

Untuk memperoleh elemen HTML bisa dilakukan dengan menggunakan berbagai cara yang meliputi:

1. Element class name

Metode ini digunakan untuk mendapatkan objek yang lebih dari satu dengan menggunakan getElementByClassName(). Variable yang dapat digunakan adalah:

var items = document.getElementsByClassName(‘list-items’);

2. Elemen dengan ID

Cara ini hampir sama dengan class name, namun objek yang dicari berupa ID dengan menggunakan getElementById(). Contohnya variable bisa dilihat di bawah ini.

var title = document.getElementById(‘header-title’);

Dari variabel itu kamu akan mendapatkan elemen id header-title.

3. Element tag name

Menggunakan getElementBtTagName(), variabel yang dapat digunakan adalah:

var listItems = document.getElementsByTagName(‘li’);

Dengan menggunakan variabel itu akan menghasilkan elemen li dari dokumen HTML.

4. Queryselector

Metode querySelector() ini digunakan untuk mendapatkan elemen seperti dengan id, tag, class dan juga semua CSS selector yang lebih valid. Berikut contohnya:

Get by id:

var header = document.querySelector(‘#header’)

Get by class:

var items = document.querySelector(‘.list-items’)

Get by tag:

var headings = document.querySelector(‘h1’);

5. Queryselectorall

Method querySelectorAll() hampir sama dengan querySelector(), kecuali pada saat mengembalikan semua elemen.

var heading = document.querySelectorAll(‘h1.heading’);

Mengubah Elemen HTML

HTML DOM sangat memungkinkan untuk mengubah konten serta style elemen HTML dengan mengganti propertinya.

1. Mengubah HTML

Properti innerHTML bisa digunakan untuk mengganti konten elemen HTML.

document.getElementById(“#header”).innerHTML = “Hello World!”;

Dalam contoh di atas akan mendapatkan elemen id header serta mengubah konten inner “Hello World!”.

InnerHTML juga bisa dimanfaatkan untuk menempatkan tag ke tag yang lain.

document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"

2. Mengubah nilai atribut

Bisa juga mengubah nilai dari atribut menggunakan DOM.

document.getElementsByTag(“img”).src = “test.jpg”;

Dari contoh di atas maka akan mengubah src dari seluruh tag <img /> berubah menjadi test.jpg.

3. Mengubah style

Mengganti style elemen HTML, diperlukan merubah properti style elemen. Berikut contoh variabel yang dapat digunakan:

document.getElementById(id).style.property = new style

Bisa juga digunakan untuk mendapatkan elemen dan mengganti batas bawah berubah menjadi garis hitam solid dengan variabel:

document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;

Itulah beberapa hal yang bisa dilakukan dengan DOM JavaScript.

Demikian penjelasan mengenai apa itu JavaScript. JavaScript adalah bahasa pemrograman yang bisa membuat website menjadi lebih interaktif di mata pengunjung dan juga memberikan kesan dinamis. Tanpa menggunakan JavaScript, tentu website akan terlihat tidak menarik bagi pengunjungnya.

JavaScript juga bukan hanya bisa digunakan untuk website, tetapi juga bisa digunakan untuk aplikasi maupun game berbasis web. Bahasa pemrograman ini juga mudah dipahami dan singkat dalam penulisan kodenya. Sekiranya informasi ini cukup menjelaskan apa itu JavaScript.