Mengenal Javascript dan Panduan Belajar Pemrogramannya


Jika kamu adalah pemilik website, mungkin kamu sadar bahwa website yang interaktif terlihat lebih menarik bagi pengunjungmu. Salah satu caranya adalah dengan memanfaatkan JavaScript. Lantas, apa itu JavaScript hingga apa saja bedanya dengan bahasa pemrograman Java? Simak pembahasannya dari artikel berikut agar kamu bisa belajar bereksperimen dengan JavaScript!

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat sebuah halaman web yang dinamis dan interaktif. Inilah yang memberi sebuah “kehidupan” pada halaman website, yaitu elemen interaktif dan animasi yang dapat menarik perhatian dan melibatkan pengunjung website dalam interaksinya.

Bahasa pemrograman web ini dijalankan di sisi klien, yang berarti kode ini dijalankan di browser web pengguna. Namun, sejak kemunculan teknologi Node.js dan lainnya, JavaScript kini dapat digunakan sebagai bahasa di sisi server dan membuatnya sangat serba guna. JavaScript digunakan terutama untuk mengembangkan front-end web serta saling bersinergi dengan HTML dan CSS.

Jika kamu pernah menggunakan kotak telusur atau search box di beranda (homepage) suatu website, memeriksa skor pertandingan olahraga langsung di situs berita, atau menonton video, kemungkinan besar JavaScript adalah program yang mengaktifkan dan menjalankannya untukmu.

Sejarah JavaScript

Ketika World Wide Web pertama kali dibuat pada awal 1990, semua halaman website bersifat statis. Halaman yang ditampilkan kepada pengunjung tidak dapat berubah, apalagi menyediakan navigasi ke halaman lain. Alhasil, pengunjung tidak dapat melakukan interaksi apapun selain menyimak apa yang ada di halaman tersebut.

Agar bisa membuat sebuah halaman di website dapat berinteraksi dengan pengunjung atau merespon permintaan, kamu perlu menambahkan beberapa bentuk bahasa pemrograman. Selain itu, agar bisa merespon tanpa harus memuat ulang halaman website, bahasa pemrograman ini harus berjalan di komputer yang sama dengan browser yang menampilkan halaman.

Saat itu, ada dua browser yang cukup populer, yang pertama adalah Netscape Navigator dengan LiveScript yang memungkinkan interaksi dapat terjadi di sebuah website. Cara kerjanya, browser akan menafsirkan perintah secara langsung tanpa memerlukan tambahan kode atau plugin. Siapa pun yang menggunakan Netscape bisa berinteraksi dengan halaman yang menggunakan LiveScript.

Namun, mengingat saat itu bahasa pemrograman Java (yang memerlukan plugin terpisah) sedang marak digunakan, akhirnya Netscape memutuskan untuk mengganti nama bahasa yang ada di browser mereka, yaitu “LiveScript”, menjadi “JavaScript”. Tak mau ketinggalan, browser Internet Explorer juga melakukan update sehingga tak hanya mendukung satu, tapi dua bahasa pemrograman yang terintegrasi.

Salah satunya disebut “VBScript” dan didasarkan pada bahasa pemrograman Basic. Bahasa pemrograman lainnya disebut dengan “JScript” yang terlihat sangat mirip dengan kata “JavaScript”. Sebenarnya, jika pengguna bisa sangat berhati-hati dengan perintah yang digunakan, mereka bisa menulis kode yang dapat diproses oleh JavaScript dan JScript sekaligus.

Ketika penggunaan Internet Explorer sedang melejit, JavaScript menjadi standar bahasa pemrograman yang berlaku untuk menulis proses interaktif yang selanjutnya akan dijalankan di web browser. Kemudian, di tahun 1996, JavaScript diserahkan ke asosiasi internasional ECMA (European Computer Manufacturers Association) dan secara resmi namanya berubah menjadi “ECMAScript” atau “ECMA-262”.

Awalnya, bahasa pemrograman JavaScript dirancang oleh Brendan Eich hanya dalam 10 hari, kemudian dikembangkan oleh Netscape Communications Corporation (tempat dia bekerja pada saat itu), Mozilla Foundation (yang didirikan oleh Eich), dan ECMA International.

Eich menyelesaikan versi pertama JavaScript yang diberi nama “Mocha” dalam waktu kurang dari dua minggu demi mengejar jadwal peluncuran Netscape Navigator 2.0 versi beta. Kemudian namanya berubah dua kali di September 1995, yaitu “LiveScript” lalu menjadi “JavaScript”. Fakta menarik, bahasa pemrograman ini juga sempat disebut “SpiderMonkey” saat digunakan oleh Navigator.

Apa saja yang bisa dilakukan oleh JavaScript?

Bahasa JavaScript terdiri dari beberapa fitur programming yang bisa membantumu melakukan beberapa hal berikut:

  • Menyimpan value yang berguna di dalam sebuah variabel. Misalnya, jika kamu ingin memasukkan sebuah nama baru di website, kamu hanya perlu menyimpan nama itu di variabel yang bernama “name”,
  • Operasi pada potongan teks (dikenal sebagai “string” dalam pemrograman). Pada contoh di atas, kita mengambil string “Player 1:” dan digabungkan dengan variabel name untuk membuat label teks lengkap, misalnya ”Player 1: Chris”,
  • Menjalankan kode untuk menanggapi interaksi atau tindakan tertentu yang terjadi pada halaman web,
  • dan masih banyak lagi!

API pada Javascript

Saat belajar JavaScript, kamu wajib tahu hal lain yang membuat JavaScript lebih menarik, yaitu fungsi Application Programming Interface (API) yang dapat dibangun di atas inti bahasa pemrograman JavaScript. Ya, API dapat digunakan dalam pengodean JavaScript untuk memperkuat fitur-fitur yang dibuat menggunakan JavaScript.

Pada dasarnya, API adalah kumpulan blok kode siap pakai yang memungkinkan developer menerapkan suatu program. Sederhananya, kumpulan blok kode ini dapat diibaratkan sebagai perlengkapan furnitur rumah siap rangkai yang setiap bagian terpisahnya hanya perlu kamu susun.

Kategori-Kategori API

Tampilan program aplikasi (API) yang dibangun di web browser milikmu dapat mengekspos data dari environment komputer sekelilingnya atau melakukan hal-hal yang lebih kompleks, misalnya beberapa hal berikut:

  • DOM (Document Object Model) API

    DOM API memungkinkanmu untuk memanipulasi HTML dan CSS, membuat, menghapus, dan mengubah HTML, mengaplikasikan style yang lebih dinamis untuk halaman website-mu, dan masih banyak lagi. Setiap kali kamu melihat sebuah pop-up window muncul di sebuah halaman website atau saat sebuah konten baru muncul, ini adalah contoh hasil kinerja DOM.

  • Geolocation API

    API yang satu ini dapat menampilkan lokasimu secara geografis. Contoh yang bisa kamu lihat adalah kemampuan Google Maps yang bisa menemukan lokasimu dan menampilkannya di website atau aplikasi mereka.

  • Canvas and WebGL API

    Kamu bisa membuat animasi grafis 2D dan 3D di website dengan kategori API ini.

  • Audio and Video API seperti HTMLMediaElement dan WebRTC

    API ini bisa membantumu bereksperimen dengan multimedia, seperti menyalakan audio dan video di halaman website atau kegiatan berkomunikasi menggunakan video seperti video call.

  • Third Party API atau API dari pihak ketiga

    Third-party API tidak dibangun langsung di browser milikmu, tapi kamu bisa mencari kode dan informasinya dari tempat lain, misalnya:

    • Twitter API membantumu menampilkan tweet terbaru kamu di website.
    • Google Maps API memungkinkan kamu untuk menyalin link embed dari Google Maps sehingga kamu bisa menunjukkan lokasi tertentu yang ingin kamu tampilkan. Fitur ini seringkali digunakan oleh organisasi atau perusahaan.

Apa saja yang dilakukan JavaScript di website kamu?

Sekarang, kamu akan melihat bagaimana cara kerja beberapa kode JavaScript dan melihat apa yang terjadi di halaman website-mu saat kamu mengaktifkan kode-kode tersebut.

Keamanan Browser

Setiap tab browser memiliki bucket terpisah untuk menjalankan kode-kode (buckets ini kemudian disebut sebagai execution environment). Artinya, kode-kode di setiap tab bekerja secara terpisah dan kode di satu tab tidak dapat memengaruhi kode di tab atau website lainnya. Hal ini bisa memastikan keamanan browser, karena jika kode ini saling memengaruhi, maka keamanan informasimu juga terancam.

Baca Juga: Kenali 5 Serangan Hacker pada Website

Interpreted vs Compiled Code

Mungkin kamu pernah mendengar  istilah interpreted dan compiled dalam konteks pemrograman. JavaScript termasuk dalam bahasa pemograman interpreted (yang diinterpretasikan). Kode ini dijalankan dari atas ke bawah dan hasil perjalanan kode akan terlihat dengan cepat dan segera. Jadi, kamu tidak perlu mengubah kode menjadi bentuk yang berbeda sebelum browser menjalankannya.

Compiled language atau bahasa yang dikompilasi di sisi lain diubah (dikompilasi) ke bentuk lain sebelum dijalankan oleh komputer. Misalnya bahasa pemrograman C atau C ++ perlu dikompilasi ke dalam bahasa assembly terlebih dahulu sebelum dijalankan oleh komputer. Kedua pendekatan ini memang memiliki keunggulan yang berbeda.

Server-side vs Client-side Code

Dalam konteks web developing, mungkin kamu pernah mendengar istilah kode server-side dan client-side. Kode client-side adalah kode yang dijalankan di komputer pengguna. Saat halaman web diakses, kode client-side di halaman tersebut akan diunduh, lalu dijalankan dan ditampilkan oleh browser. Dalam modul JavaScript ini kita secara eksplisit berbicara tentang client-side JavaScript.

Di sisi lain, kode server-side tentu saja dijalankan di server, kemudian hasilnya diunduh dan ditampilkan di browser. Contoh kode server-side populer adalah PHP, Python, Ruby, dan ASP.NET. JavaScript juga dapat digunakan sebagai bahasa server-side, misalnya di environment Node.js yang populer.

Baca Juga: Penggunaan Node.js untuk Pemula, Simpel dan Mudah Dipahami

Kata “dinamis” digunakan untuk menggambarkan JavaScript yang ada di client-side, dan bahasa server-side ini mengacu pada kemampuan memperbarui tampilan halaman/aplikasi web untuk menunjukkan konten berbeda dalam situasi yang berbeda pula untuk menghasilkan konten baru sesuai kebutuhan.

Kode server-side secara dinamis menghasilkan konten baru di server, misalnya menarik data dari database, sedangkan JavaScript client-side secara dinamis menghasilkan konten baru di dalam browser, misalnya membuat tabel HTML baru, memasukkan data yang diminta dari server, dan menampilkan tabel di halaman web pengguna. Meski sedikit berbeda, tapi keduanya tetap bersinergi.

Perbedaan antara JavaScript dan Java

JavaScript dan Java serupa dalam beberapa hal namun secara fundamental memiliki beberapa perbedaan. Bahasa JavaScript menyerupai Java namun tidak memiliki pengetikan statis dan pengecekan tipe seperti Java. JavaScript mengikuti sebagian besar syntax ekspresi Java, konvensi penamaan, dan konstruksi aliran kontrol dasar yang menjadi alasan mengapa namanya diubah dari LiveScript menjadi JavaScript.

Bahasa yang mendukung fungsi tanpa persyaratan deklaratif khusus ini mendukung sistem runtime berdasarkan sejumlah kecil tipe data yang mewakili nilai numerik, Boolean, dan string. JavaScript memiliki model objek berbasis prototype dan bukan berbasis class yang lebih umum. Alhasil, apa yang diwarisi bisa berbeda untuk objek individu.

Jika dibanding dengan Java, JavaScript adalah bahasa yang bentuknya sangat bebas. Artinya, kamu tak perlu mendeklarasikan semua variabel, kelas, dan metode. Selain itu, kamu juga tidak perlu khawatir apakah metode itu bersifat publik, pribadi, atau terlindungi, dan kamu pun tidak perlu menerapkan interface.

Java adalah bahasa pemrograman berbasis class yang dirancang untuk eksekusi cepat dan kamu tidak bisa mentransmisikan bilangan bulat Java ke dalam referensi objek atau mengakses memori pribadi dengan merusak bytecode Java. Model berbasis class Java juga mengartikan bahwa program ini terdiri dari kelas dan metode secara eksklusif.

Warisan kelas Java dan ketikan yang kuat umumnya memerlukan hirarki objek yang erat. Persyaratan ini membuat bahasa pemrograman Java lebih kompleks daripada bahasa pemrograman JavaScript.

Sebaliknya, JavaScript turun dari garis bahasa yang lebih dinamik, seperti HyperTalk dan dBASE. Bahasa scripting ini menawarkan alat pemrograman kepada audiens yang lebih luas karena sintaksnya yang mudah, memiliki built-in functional khusus, dan persyaratannya minimal untuk pembuatan objek.

Baca Juga: 4 Add-On Mozilla Firefox Terbaik yang Wajib Dimiliki

Belajar JavaScript

Jika ingin belajar JavaScript, kamu hanya memerlukan sebuah langkah mudah, yaitu gunakan web browser terbaru. Panduan ini mencakup beberapa fitur JavaScript yang saat ini tersedia di versi terbaru Mozilla Firefox. Jadi, gunakan versi terbaru dari Mozilla Firefox yang disarankan.

Ada dua alat yang dibangun di Firefox yang berguna untuk bereksperimen dengan JavaScript, yaitu Web Console dan Scratchpad.

Web Console

Contoh-webconsole

Web console bisa kamu gunakan untuk belajar JavaScript karena dapat menyediakan informasi yang kamu butuhkan tentang halaman web yang sedang loading dan itu termasuk command line yang bisa kamu gunakan untuk mengeksekusi expression JavaScript di halaman yang sedang dibuka.

Kamu bisa mengakses web console di Windows dan Linux dengan mengklik Ctrl+Shift+J, dan dari Mac bisa diakses dengan mengklik Cmd+Opt+J. Pilih “Web Console” dari menu “Developer”, yang berada di bawah menu “Tools” di Firefox. Web console akan muncul di bagian bawah jendela browser. Di bagian bawah console adalah baris perintah yang bisa kamu gunakan untuk menambahkan perintah JavaScript.

Scratchpad

Web console mungkin cocok untuk menjalankan JavaScript yang hanya terdiri dari satu baris, tapi jika kamu ingin menjalankan banyak baris kode, console menjadi kurang cocok. Selain itu, kamu juga tidak bisa menyimpan contoh kode menggunakan web console. Alhasil, kamu memerlukan Scratchpad untuk menambahkan perintah yang lebih kompleks.

Akses Scratchpad dengan mengklik Shift+F4, pilih “Scratchpad” dari menu “Developer” yang ada di bawah menu di Mozilla Firefox. Lalu akan muncul jendela (window) baru yang merupakan editor yang selanjutnya bisa kamu gunakan untuk menulis dan menjalankan perintah JavaScript di browser. Kamu juga dapat menyimpan script ke disk dan memuatnya dari disk.

Baca Juga: Mengenal Program “Hello, World!”

Hello, World!

Jika kamu tertarik untuk belajar menggunakan JavaScript, mungkin kamu dapat memulainya dengan mencoba menampilkan tulisan “Hello, World!”

Apa itu “Hello, World!”?

“Hello, World!” adalah program klasik yang digunakan oleh para pemula ketika mereka baru mulai belajar bahasa pemograman. Program ini juga bisa membantumu mengetahui, apakah environment program sudah terkonfigurasi dengan benar.

Cara membuat program Hello, World!

Untuk belajar membuat program Hello, World! di browser, buka JavaScript Console di browser web kamu. Ada dua cara untuk belajar membuat program Hello, World! pada JavaScript, yaitu menggunakan metode “alert ( )” dan “console.log ( )”.

Menggunakan alert ( )

Cara pertama yang bisa kamu gunakan untuk belajar membuat Hello, World di JavaScript adalah menggunakan metode alert ( ). Program ini akan muncul dalam bentuk sebuah kotak peringatan (alert box) dengan pesan tertentu, yang pada contoh ini adalah ucapan “Hello, World!” dan sebuah tombol OK agar pengguna bisa menutup peringatan atau alert tersebut.

Di metode yang satu ini, kita akan melewati tipe data string sebagai parameternya. String kemudian akan diatur ke nilai Hello, World! sehingga nilai itu akan dicetak ke kotak peringatan yang nantinya akan muncul. Pertama, kita akan membungkus string tersebut dalam tanda kurung pada metode alert ( ). Kemudian pernyataan JavaScript ini akan diakhiri dengan tanda semicolon atau titik koma (;).

alert( “Hello, World!” );

 

Setelah mengetik kode JavaScript di atas, tekan tombol ENTER, lalu kamu akan melihat tampilan alert box seperti di bawah ini pada layar browser milikmu.

belajar javascript popup hello world metode alert

Bagi beberapa pengguna, peringatan pop-up mungkin bisa menimbulkan ketidaknyamanan saat mengakses website. Oleh karena itu, kamu bisa belajar menggunakan Console atau kode console.log ( ) melalui subtopik berikut.

Membuat Hello World Menggunakan console.log ( )

Kita bisa mencetak string yang sama, tetapi kali ini kita akan belajar membuat Hello, World! menggunakan console JavaScript dengan metode console.log ( ). Menggunakan opsi ini mirip dengan bekerja menggunakan bahasa pemograman yang ada di environment terminal komputermu.

Sama halnya dengan alert ( ), kita akan meletakkan string Hello, World! ke metode console.log ( ) di antara kedua tanda kurung. Kemudian perintah tersebut akan diakhiri dengan semicolon atau tanda titik koma (;), seperti konvensi JavaScript sintaks yang biasanya.

console.log( "Hello, World!" );

 

Setelah menekan tombol ENTER, Hello, World! akan muncul di console seperti di bawah ini. Console juga akan mencetak hasil evaluasi suatu expression yang akan dibaca sebagai undefined ketika expression tersebut tidak menghasilkan apapun.

Hello-World-Console

Contoh website yang menggunakan JavaScript murni

Jika ingin melihat beberapa inspirasi website yang sepenuhnya menggunakan JavaScript, berikut ini ada beberapa website yang dibangun murni menggunakan JavaScript, yaitu:

Marketo

Marketo adalah sebuah software untuk pemasaran otomatis yang membantu perusahaan yang memiliki pertumbuhan pesat. Terkenal sebagai salah satu perusahaan yang menyediakan inovasi terobosan dan memicu pertumbuhan eksplosif, Marketo menggunakan JavaScript untuk membangun user-interface di website mereka.

Framework yang modern, widget UI yang dapat disesuaikan, model komponen yang dapat diperluas, dan API yang mudah digunakan membuat JavaScript dapat membantu Marketo membangun website dengan user experience yang memuaskan.

Governance.io

Perusahaan yang merilis Governance.io, 2Gears, memilih Ext JS sebagai kerangka kerja untuk membangun platform corporate governance yang kuat, baik untuk desktop maupun mobile. Kombinasi desain yang kuat, dokumentasi yang bagus, perpustakaan komponen UI yang sangat lengkap, dan dukungan lintas-browser yang kuat membuat JavaScript menjadi pilihan yang tepat untuk membangun website mereka.

Baca Juga: 6 Keunggulan Fitur Bahasa Pemrograman C++ untuk Pemula

Simpulan

Artikel ini merupakan perkenalan JavaScript untuk kamu yang ingin belajar tentang JavaScript secara mendasar. Selain cara kerja JavaScript, mungkin kamu juga sudah dapat melihat dan mengerti mengapa JavaScript bisa menjadi pilihan yang tepat untuk membangun website-mu. Jika ingin mencoba, mungkin kamu bisa menggunakan beberapa code editor gratis yang tersedia di internet.

Satu hal penting yang wajib kamu ingat saat ingin membangun website sembari belajar menggunakan JavaScript, gunakanlah hosting yang cepat dan aman agar website-mu selalu bisa diandalkan dan tidak mengalami kendala berarti. Jika ada pertanyaan, kamu bisa langsung menyampaikannya ke Ninja Support Dewaweb yang selalu siap 24/7 untukmu. Selamat mencoba, Sahabat Dewaweb, salam sukses online!





Sumber

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

21,592FansLike
0FollowersFollow
0SubscribersSubscribe
- Advertisement -

Latest Articles