Alexandromeo Lawrence I'm an experienced SEO Specialist who can grow a website through organic channel. I'm also passionate about digital marketing and web development

Belajar JavaScript Lengkap untuk Pemula

5 min read

belajar javascript - apa itu javascript

Tak jarang ketika kita berselancar di internet, atau sedang nongkrong di berbagai media online (terutama forum), mendengar suatu istilah yang terdengar asing tapi menarik, yaitu JavaScript. Istilah ini sering kita dengar di artikel-artikel yang membahas tutorial ngeblog. Nah, apa itu JavaScript? Semacam mantra atau gimana ? Apakah kita harus belajar JavaScript?

Javascript adalah salah satu bahasa pemrograman yang dipakai untuk situs web. Kan bahasa pemrograman web itu ada banyak, ada PHP, ASP, Ruby, dan lain sebagainya. Nah, ini salah satu contoh dari bahasa tersebut.

Cara Kerja Javascript

Berbeda dari yang lain, Javascript ini sifatnya client-side. Maksudnya, semua proses yang dilakukan oleh javascript ini akan dilakukan oleh client (pengunjung web). Kalau yang lainnya itu server-side, proses-nya di-run oleh server. Si client hanya mengirim request dan request-nya diproses di server yang kemudian hasilnya dikirimkan kembali ke client melalui peramban web.

Seperti yang telah saya baca dari Wikipedia, JS (kita sekarang nyebutnya JS aja), dulu namanya bukan JavaScript, melainkan Livescript. Entah saya ngga tau alasannya kenapa kok namanya diganti menjadi JS. Saya juga ngga ngerti kenapa kok situs Livescript masih ada hingga sekarang?

Baca : 6 Cara Membuat Website yang Dinamis dan Menarik

JS ini sendiri dibuat oleh seseorang yang bekerja di perusahaan Netscape, sebuah perusahaan yang mengembangkan web browser, namanya itu Brendan Eich, sekarang dia adalah Co-founder di Mozilla Foundation.

Sebenarnya nama paling awal itu bukanlah Livescript, tapi Mocha. Dia mulai kerja di Netscape pada April 1995 untuk membuat Mocha dan dia ganti namanya jadi Livescript pada September 1995 yang akhirnya menjadi Javascript di bulan yang sama.

Penerapan Javascript

Saat kita membuat sebuah halaman web dengan bermodalkan HTML sama CSS saja, bisa saja jadi. Tapi apakah halaman web itu cuma buat dilihat saja? Apa tidak ada suatu interaksi yang dilakukan oleh klien? Kalau saya sih harusnya ada.

html dan css

Saya beri contoh yang simpel. Di situs ini, coba lihat di bagian pencarian yang ada di sebelah kanan. Setelah klien (pengunjung) mengetikkan suatu hal yang ingin dia cari, pastilah dia menekan tombol “Cari”. Lalu apa yang terjadi setelah di klik? Mencengangkan bukan???

Setelah tombol di-klik, maka akan muncul artikel-artikel yang membahas mengenai apa yang dicari oleh pengunjung tadi. Sebelum permintaan tersebut diolah oleh server, akan diolah terlebih dahulu oleh bahasa yang berbasis client-side, yakni Javascript.

Contoh lain, saya atur TKP-nya di Tokopedia. Di halaman awal Tokopedia, coba klik tombol “Masuk”. Yang terjadi kemudian ialah muncul sebuah box yang isinya form buat login. Nah, aktivitas box login yang bergerak setelah tombol Masuk di-klik itu yang memroses adalah JavaScript.

Intinya, Javascript ini berfungsi agar suatu halaman web itu menjadi lebih dinamis. Agar bisa terjadi interaksi antara klien dengan web tersebut. Nah, interaksi itu-lah yang nantinya akan diproses oleh Javascript sebelum dikirim ke server. Jadi dengan Javascript, halaman web tidak hanya buat dilihat-lihat aja, si klien juga bisa berinteraksi dengan situs.

Kelebihan JavaScript

Sangat disarankan bagi Anda untuk belajar JavaScript. Bukan tanpa alasan, melainkan JavaScript memiliki berbagai kelebihan. Berikut kelebihan JavaScript:

1. Mudah Dipelajari

Alasan utama buat kita untuk memakai javascript ialah kemudahan dalam scripting. Meskipun masih awam di dunia pemrograman, Anda pasti bisa menggunakan javascript. Hampir semua programmer bahasa pemrograman yang mereka pelajari pada awal-awal adalah javascript selain bahasa sederhana seperti C++ dan Pascal.

javascript adalah

Javascript fundamental adalah hal yang harus dipelajari sebelum terjun menjadi seorang front end developer. Karena nantinya, mau membuat aplikasi apapun kalau urusan bagian depan (tampilan) pasti akan berurusan dengan javascript. Baik itu React, Node, Angular, Express, maupun yang lainnya, semuanya berupa javascript. Jadi, jika dasarnya saja tidak paham, dalamnya juga tidak akan paham.

Bahkan di sekolah-sekolah yang fokus pada engineering, JavaScript adalah bahasa yang wajib dikuasai oleh semua siswanya. Tapi kalau hal ini saya ngga setuju sih. Masa’ semua siswa harus menjadi front-end, terus back end developer nya siapa? Apa semua siswa dipaksa menjadi seorang full-stack developer?

Untuk urusan referensi pembelajaran, javascript mudah sekali ditemukan, baik secara luar maupun dalam jaringan. Jika ingin berupa buku, mampir saja ke toko buku, lihat di bagian buku komputer, pasti ada buku yang membahas dasar-dasar javascript. Atau kalau ingin yang lebih murah bisa mencarinya di internet. Banyak kok artikel-artikel yang memberikan tutorial bahasa javascript ini.

2. Sangat Ringan

Javascript adalah bahasa pemrograman yang berbasis client-side, yang artinya seluruh proses yang terjadi pada sebuah halaman akan diproses oleh klien, peramban web. Jadi server hanya memproses HTTP-request-nya saja.

Berbeda dengan bahasa pemrograman lain yang berbasis sisi-server. Alurnya yang pertama adalah request dari peramban ke server, terus si server menerima request dan mengolahnya. Setelah request diproses, kemudian hasilnya akan dikembalikan ke klien melalui peramban. 3x langkah kerja, request->proses->respon.

Sedangkan dengan javascript yang sisi-klien ini, 3 tahap tersebut dirangkum menjadi 2 langkah, yakni proses dan respon saja. 2 langkah itu juga hanya dilakukan di komputer lokal saja, jadi bisa mempersingkat waktu. Inilah yang membuat javascript sangat ringan untuk dipakai.

3. Bisa Dikolaborasikan

Kelebihan JavaScript inilah yang membuat saya sangat suka. JavaScript mampu berkawan dengan yang lainnya, seperti PHP. Kelebihan macam ini yang membuat pekerjaan developer menjadi lebih cepat selesai. Jika ada fungsi yang tidak mampu dilakukan oleh PHP, Anda bisa menggunakan JavaScript.

Tidak hanya itu, JavaScript juga dapat membuat website bersifat PWA. Sekilas, PWA adalah sebuah website yang bisa diakses dalam keadaan offline. Jadi, Anda tidak perlu memiliki koneksi internet untuk dapat membuka konten website.

Kekurangan JavaScript

Walaupun memiliki berbagai kelebihan, JavaScript juga memiliki kekurangan. Apa saja?

1. Tidak Aman

Jika Anda ingin membuat aplikasi web yang krusial, butuh autentikasi, yang data-data di dalamnya itu penting, jangan membangun aplikasi hanya dengan javascript saja. Karena javascript tidak mampu menghandle keamanan semacam itu.

Meskipun aplikasinya dibuat dengan library, sebut saja Angular, masih tetap harus memakai pengaman yang lebih aman pada bahasa lain, PHP contohnya. Fungsi PHP-nya itu akan mengirim respon ke JS yang sudah dienkripsi. Jadi data yang muncul tidak akan bisa dibaca.

Apabila ingin menggunakan plugin, dari manapun, jangan asal pakai saja. Jika memungkinkan, cari di situs yang ada kolom review-nya sehingga kita bisa mengetahui bagaimana usage dari plugin tersebut saat dipakai. Pastikan tidak ada orang yang mengulas plugin tersebut ada celahnya. Meskipun tidak semua sistem itu aman, paling tidak celahnya sulit ditemukan.

2. Hanya Sebagai Pembantu Saja

Bahasa Javascript tidak bisa digunakan untuk membuat sebuah aplikasi yang berdiri sendiri, atau sering disebut dengan standalone app. Tidak seperti bahasa lain, seperti C++ atau Java yang bisa dicompile lalu jadi sebuah aplikasi dengan bahasa itu sendiri.

Hal ini tidak berlaku bagi javascript. Untuk membuat aplikasi, diperlukan bahasa lain untuk mengompile-nya agar menjadi sebuah aplikasi. Bahasa itu adalah bahasa markah, HTML. Tanpa HTML, Javascript tidak akan berjalan dengan sempurna. Jadi sebelum mulai belajar javascript, pastikan telah menguasai HTML terlebih dahulu.

Perbedaan NodeJS, React, Angular dan jQuery

membahas node js

Hmm… Saya bahas yang NodeJS dulu ya. Jadi gini, Javascript adalah induknya atau akar nya. Sedangkan NodeJS ini turunan pertama-nya. Turunan yang diolah sedemikian rupa dan menjadi sebuah framework yang sangat ciamik. Eh, Node ini bukan framework sih, tapi versi lain dari sebuah javascript. Kalau framework-nya (Node) ada React, Express, dan kawan-kawannya.

Baca : 6 Rekomendasi Framework Javascript Terbaik Untuk Membuat Website

Nah, React sudah terjawab. Sekarang Angular, sekalian dengan jQuery-nya. Angular (include juga dengan jQuery) ini adalah sebuah library-nya JS. Library itu macam plugin. Plugin yang dipakai untuk mempermudah, mempersingkat proses pengembangan website. Dengan bantuan mereka, pengetikan JS menjadi jauh lebih sederhana dan lebih efisien.

Contoh Kode Program Javascript

Yang namanya programming tidak akan bisa kalau belum mencobanya. Biar jago, sekarang kita coba gimana sih rasanya JS itu? Nikmat ngga? Sebagai contoh, disini saya akan membuat alert ketika sebuah tombol di-klik.

<button id="tombol">Klik saya!</button>
<script>
   const tombol = document.queryBuilder("#tombol")
   tombol.addEventListener("click", () => {
      alert('Belajar memahami JavaScript')
   })
</script>

Saya rasa di bagian tombol (HTML) pasti sudah pada paham. Saya bahas yang JS-nya aja.

document.getElementById() : ini fungsi buat memilih DOM berdasarkan ID. Di atas saya isi id-nya tombol, sesuai yang ada di HTML-nya.

addEventListener() : fungsinya untuk menambahkan fungsi pada sebuah event. Di contoh saya pakai event click. Jadi, setelah tombol diklik nantinya bakal muncul fungsi yang kita tulis dibawahnya.

alert() : untuk menampilkan peringatan. Untuk demo silakan dicoba di browser masing-masing biar langsung paham.

Sebenarnya script di atas bisa lebih singkat jadi seperti ini :

<script>
function klik()
{
   alert('Belajar memahami JavaScript')
}
</script>
<button onclick="klik()">Klik saya!</button>

Copy code di atas dengan nama contoh.html atau file apapun terserah Anda namanya. Tetapi saya menyarankan dengan ekstensi html. Contoh (belajar.html, dll).

Dan coba jalankan filenya di browser. Ketikkan file nya dua kali dan Anda akan melihat tampilan seperti di bawah ini :

contoh hasil kode javascript

Jika Anda klik tombol “Klik saya!”, maka akan muncul alert yang bertuliskan “Belajar Memahami Apa itu Javascript, Javascript adalah sebuah bahasa pemrograman blabla”.

Nah, jika Anda ingin mencoba belajar JavaScript lebih lanjut, Anda bisa melihat beberapa panduan di bawah:

Panduan Belajar JavaScript Lengkap

Alexandromeo Lawrence I'm an experienced SEO Specialist who can grow a website through organic channel. I'm also passionate about digital marketing and web development