Pengenalan JavaScript dan Perbedaannya dengan Bahasa Pemrograman Java

Pengenalan JavaScript

Bagi Anda yang memiliki website, mungkin Anda sadar bahwa website yang interaktif akan jauh lebih menarik bagi para pengunjung Anda. Anda mungkin sudah menggunakan hosting berkualitas, tetapi jika tampilan website Anda kurang menarik perhatian tentunya akan mempengaruhi user experience pengunjung Anda.

Lalu bagaimana cara membuat homepage website Anda menjadi halaman web yang interaktif dan dinamis? JavaScript dapat membantu Anda membangunnya.

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 – elemen interaktif dan animasi yang dapat menarik perhatian dan melibatkan pengunjung website.

Ini adalah bahasa pemrograman web di sisi klien, yang berarti kode tersebut dijalankan di browser web pengguna. Dengan munculnya teknologi Node.js dan lainnya, ini juga dapat digunakan sebagai bahasa sisi server, membuatnya sangat serba guna. JavaScript digunakan terutama untuk pengembangan web front-end dan bekerja erat dengan HTML dan CSS.

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

Sejarah JavaScript

Ketika World Wide Web pertama kali dibuat di awal tahun 1990, semua halaman website bersifat statis. Halaman yang disiapkan untuk ditunjukkan kepada Anda adalah apa yang Anda dapat dan tidak mungkin Anda berinteraksi dengannya.

Untuk membuat halaman tersebut bisa berinteraksi dan melakukan sesuatu sebagai tanggapan atas tindakan Anda memerlukan penambahan beberapa bentuk bahasa pemrograman untuk “menginstruksikan” halaman bagaimana seharusnya merespons. Agar bisa segera meresponnya tanpa harus memuat ulang halaman web, bahasa ini harus bisa berjalan di komputer yang sama dengan browser yang menampilkan halaman.

Pada saat itu, ada dua browser yang cukup populer: Netscape Navigator dan Internet Explorer.

Netscape adalah perusahaan pertama yang mengeluarkan bahasa pemrograman yang memungkinkan halaman web menjadi interaktif – disebut LiveScript dan diintegrasikan ke dalam browser. Ini berarti browser akan menafsirkan perintah secara langsung tanpa memerlukan kode yang akan dikompilasi dan tanpa memerlukan plugin. Siapa pun yang menggunakan Netscape bisa berinteraksi dengan halaman yang menggunakan bahasa ini.

Bahasa pemrograman lain yang disebut Java (yang memang memerlukan plugin terpisah) menjadi sangat terkenal, jadi Netscape memutuskan untuk mencoba menguangkan ini dengan mengganti nama bahasa yang ada di browser mereka menjadi JavaScript.

Catatan: Meskipun beberapa kode Java dan JavaScript mungkin tampak serupa, sebenarnya ada dua bahasa yang sama sekali berbeda yang melayani tujuan yang sama sekali berbeda.

Tak ketinggalan, Internet Explorer segera diupdate untuk tidak hanya mendukung satu tapi dua bahasa yang terintegrasi.

Salah satunya disebut vbscript dan didasarkan pada bahasa pemrograman BASIC; Yang lain, JScript, sangat mirip dengan JavaScript. Sebenarnya, jika Anda sangat berhati-hati dengan perintah yang Anda gunakan, Anda bisa menulis kode untuk diproses JavaScript oleh Netscape Navigator dan sebagai JScript oleh Internet Explorer.

Pada saat Internet Explorer menjadi browser yang dominan, JavaScript telah menjadi standar yang berlaku untuk menulis proses interaktif yang akan dijalankan di browser web.

Pentingnya bahasa script ini terlalu besar untuk menaruh perkembangannya di masa depan di tangan pengembang browser yang bersaing. Jadi, pada tahun 1996, JavaScript diserahkan ke badan standar internasional yang disebut ECMA International (European Computer Manufacturers Association), yang kemudian bertanggung jawab atas perkembangan bahasa selanjutnya.

Akibatnya, bahasa tersebut secara resmi berganti nama menjadi ECMAScript atau ECMA-262, namun kebanyakan orang masih menyebutnya sebagai JavaScript.

Bahasa pemrograman JavaScript dirancang oleh Brendan Eich hanya dalam 10 hari, dan 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 dalam waktu kurang dari dua minggu karena ia membutuhkannya untuk diselesaikan sebelum peluncuran versi beta Navigator 2.0. JavaScript diberi nama Mocha pada awalnya, sebelum diganti namanya menjadi LiveScript pada bulan September 1995, dan kemudian JavaScript di bulan yang sama.

Namun, bahasa ini juga sempat disebut SpiderMonkey saat digunakan oleh Navigator.

Apa saja yang bisa dilakukan oleh JavaScript?

Bahasa JavaScript terdiri dari beberapa fitur programming yang membantu Anda untuk melakukan beberapa hal berikut:

– Menyimpan value yang berguna di dalam sebuah variabel. Misalnya, jika Anda ingin memasukkan sebuah nama baru di dalam website Anda, Anda tinggal 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, mis. ” Pemain 1: Chris “.

– Menjalankan kode untuk menanggapi peristiwa tertentu yang terjadi pada halaman web.

– Dan masih banyak lagi!

Yang lebih menarik lagi adalah fungsionalitas yang dapat dibangun di atas bahasa JavaScript inti yang disebut sebagai Application Programming Interfaces (APIs). API dapat digunakan dalam kode JavaScript Anda untuk membuat fitur-fitur yang dibuat oleh JavaScript menjadi lebih kuat lagi.

API adalah kumpulan blok kode siap pakai yang memungkinkan pengembang menerapkan program yang sebenarnya akan sulit atau tidak mungkin diterapkan. Mereka bisa dibilang melakukan hal yang sama dengan kit furnitur siap pakai untuk bangunan rumah – lebih mudah untuk mengambil panel siap pakai dan menyusunnya untuk membuat rak buku daripada merancang sendiri desainnya, pergi dan menemukan kayu yang bagus, kemudian memotong semua panel dengan ukuran dan bentuk yang tepat dan menemukan sekrup berukuran tepat, lalu menyatukan mereka agar menjadi sebuah rak buku.

API sendiri biasa terbagi menjadi 2 kategori

Browser APIs dibangun di web browser Anda dan dapat mengekspos data dari environment komputer sekelilingnya atau melakukan hal-hal yang lebih kompleks. Berikut adalah beberapa contohnya:

DOM (Document Object Model) API memperbolehkan Anda untuk memanipulasi HTML dan CSS, membuat, menghapus, dan mengubah HTML, mengaplikasikan style yang lebih dinamis untuk page Anda, dan masih banyak lagi. Setiap kali Anda melihat sebuah popup window muncul di sebuah halaman web, atau sebuah konten baru di-display, ini adalah salah satu moment dimana DOM sedang bekerja.

Geolocation API memberi tahu lokasi Anda secara geografis. Ini adalah bagaimana Google Maps dapat menemukan lokasi Anda dan memperlihatkannya pada map mereka.

Canvas and WebGL API membantu Anda untuk membuat animasi grafis 2D dan 3D.

Audio and Video API seperti HTMLMediaElement dan WebRTC membantu Anda untuk berkesperimen dengan multimedia, seperti misalnya menyalakan audio dan video di halaman web yang tepat atau mengambil video dari web camera Anda dan menampilkannya di komputer milik orang lain.

Third Party API atau API dari pihak ketiga adalah API yang tidak dibangun di browser Anda secara langsung dan Anda perlu mencari kode dan informasinya dari tempat lain di web. Misalnya:

Twitter API membantu Anda untuk menyajikan tweet terakhir Anda di website Anda

Google Maps API memperbolehkan Anda untuk menyalin link embed map mereka agar Anda bisa menunjukkan lokasi Anda pada website Anda.

Apa saja yang dilakukan JavaScript pada halaman Anda?

Sekarang, Anda akan melihat bagaimana cara kerja beberapa kode JavaScript dan melihat apa yang terjadi di halaman website Anda ketika Anda menggunakan kode-kode tersebut.

Keamanan Browser

Setiap tab browser memiliki bucket yang terpisah untuk menjalankan kode-kode (buckets ini disebut sebagai execution environment). Yang dimaksud disini adalah kode-kode di setiap tab bekerja secara terpisah, dan kode di satu tab tidak dapat mempengaruhi kode di tab lainnya atau website lainnya. Ini membantu memastikan keamanan browser karena jika kode-kode ini bisa saling mempengaruhi meskipun berada di tab yang berbeda, informasi Anda bisa dihack melalui kode-kode tersebut.

Interpreted vs Compiled Code

Anda mungkin mendengar istilah interpreted dan compiled dalam konteks pemrograman. JavaScript adalah bahasa pemograman interpreted (yang diinterpretasikan). Kode ini dijalankan dari atas ke bawah dan hasil perjalanan kode akan terlihat dengan cepat dan segera. Anda 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 C / C ++ dikompilasi ke dalam bahasa assembly yang kemudian dijalankan oleh komputer.

Kedua pendekatan ini memang memiliki keunggulan yang berbeda.

Server-side VS client-side code

Anda mungkin juga mendengar istilah kode server-side dan client-side, khususnya dalam konteks pengembangan web. Kode client-side adalah kode yang dijalankan di komputer pengguna – saat halaman web dilihat, kode client-side halaman tersebut akan di-download, lalu dijalankan dan ditampilkan oleh browser. Dalam modul JavaScript ini kita secara eksplisit berbicara tentang client-side JavaScript.

Sementara itu, kode server-side dijalankan di server, kemudian hasilnya didownload dan ditampilkan di browser. Contoh bahasa web server-side populer termasuk PHP, Python, Ruby, dan ASP.NET. JavaScript juga dapat digunakan sebagai bahasa server-side, misalnya di environment Node.js yang populer. Node.js sendiri akan kita bahas di artikel lain.

Kata dinamis sendiri digunakan untuk menggambarkan JavaScript yang ada di client-side dan bahasa server-side ini mengacu pada kemampuan untuk memperbarui tampilan halaman / aplikasi web untuk menunjukkan hal yang berbeda dalam situasi yang berbeda dan 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 kepada klien, misalnya membuat tabel HTML baru, memasukkan data yang diminta dari server ke dalamnya, kemudian menampilkan tabel di halaman web yang ditampilkan kepada pengguna. Keduanya memang sedikit berbeda, namun mereka terkait, dan kedua pendekatan ini (server-side dan client-side) biasanya bekerja sama.

Halaman web tanpa konten yang diperbarui secara dinamis disebut statis. Halaman statis ini hanya menampilkan konten yang sama setiap saat. Jika Anda ingin mencari tahu lebih banyak tentang halaman statis, Anda bisa membaca mengenai artikel kami tentang cara membuat halaman statis .

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 memang mengikuti kebanyakan sintaks ekspresi Java, konvensi penamaan dan konstruksi aliran kontrol dasar yang merupakan alasan mengapa namanya diubah dari LiveScript menjadi JavaScript.

Berbeda dengan sistem kelas kompilasi Java yang dibangun berdasarkan deklarasi, JavaScript mendukung sistem runtime berdasarkan sejumlah kecil tipe data yang mewakili nilai numerik, Boolean, dan string. JavaScript memiliki model objek berbasis prototipe dan bukan model objek berbasis kelas yang lebih umum. Model berbasis prototipe memberikan warisan dinamis; Artinya, apa yang diwarisi bisa berbeda untuk objek individu. JavaScript juga mendukung fungsi tanpa persyaratan deklaratif khusus.

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

Java adalah bahasa pemrograman berbasis kelas yang dirancang untuk eksekusi cepat. Selain itu, Anda juga tidak dapat mentransmisikan bilangan bulat Java ke dalam referensi objek atau mengakses memori pribadi dengan merusak bytecode Java. Model berbasis kelas Java juga berarti bahwa program terdiri dari kelas dan metode mereka secara eksklusif. Warisan kelas Java dan ketikan yang kuat umumnya memerlukan hirarki objek yang erat. Persyaratan ini membuat pemrograman Java lebih kompleks daripada pemrograman JavaScript.

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

Belajar JavaScript

Untuk belajar JavaScript hanya dibutuhkan sebuah langkah yang mudah: gunakan sebuah browser Web terbaru. Panduan ini mencakup beberapa fitur JavaScript yang saat ini tersedia di versi terbaru Firefox, jadi gunakan versi terbaru dari Firefox yang disarankan.

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

WebConsole

Contoh webconsole

WebConsole memberi Anda informasi tentang halaman web yang sedang loading dan itu termasuk command line yang bisa Anda gunakan untuk mengeksekusi expression JavaScript di halaman yang sedang dibuka.

Untuk membuka Web Console (Ctrl + Shift + K pada Windows dan Linux atau Cmd-Option-K di Mac), pilih “Web Console” dari menu “Developer”, yang berada di bawah menu “Tools” di Firefox. Web console akan muncul di bagian bawah jendela browser. Sepanjang bagian bawah console adalah baris perintah yang dapat Anda gunakan untuk memasukkan JavaScript.

Scratchpad

ScratchPad

Web console sangat bagus untuk menjalankan JavaScript yang hanya terdiri dari satu baris, namun meskipun Anda dapat menjalankan banyak baris kode, tidak mudah untuk melakukan itu di web console. Anda juga tidak dapat menyimpan contoh kode Anda menggunakan Web Console. Jadi untuk contoh yang lebih kompleks Scratchpad adalah alat yang lebih baik.

Untuk membuka Scratchpad (Shift + F4), pilih “Scratchpad” dari menu “Developer”, yang ada di bawah menu di Firefox. Ini terbuka di jendela terpisah dan merupakan editor yang dapat Anda gunakan untuk menulis dan menjalankan JavaScript di browser. Anda juga dapat menyimpan skrip ke disk dan memuatnya dari disk.

Hello, World!

Jika Anda tertarik untuk belajar menggunakan JavaScript, Anda bisa memulai dengan mencoba menampilkan “Hello, World!”

Apa itu “Hello, World!”?

Program “Hello, World!” adalah program klasik yang digunakan oleh para pemula ketika mereka baru mulai belajar bahasa pemograman. “Hello, World!” juga dapat membantu Anda untuk melihat apakah environment program sudah dikonfigurasi dengan benar.

Cara membuat program Hello, World!

Untuk membuat program Hello, World! di browser, buka JavaScript Console browser web Anda.

Ada dua cara untuk membuat program Hello, World! pada JavaScript yaitu melalui method alert ( ) dan metode console.log ( ).

Menggunakan alert ( )

Cara pertama di mana Anda bisa menulis program ini adalah dengan menggunakan metode alert ( ), dimana program akan muncul dalam rupa sebuah alert box dengan pesan tertentu – untuk yang kita buat ini tentu pesannya adalah Hello, World! – dan sebuah tombol OK agar pengguna bisa menutup alert tersebut.

Dengan metode ini, kita akan melewati tipe data string sebagai parameternya. String ini akan diset ke nilai Hello, World! sehingga nilai itu akan dicetak ke kotak alert yang nantinya akan muncul.

Untuk menulis gaya pertama dari program “Hello, World!”, kita akan membungkus string tersebut di dalam tanda kurung pada metode alert ( ). Kita akan mengakhiri pernyataan JavaScript kami dengan tanda semicolon atau titik koma (;)

alert( “Hello, World!” );

Setelah itu, tekan tombol ENTER setelah Anda mengetik kode JavaScript di atas. Anda kemudian akan melihat tampilan alert box seperti di bawah ini di layar browser Anda.

Hello, World Alert

Console juga akan mencetak hasil evaluasi suatu expression yang mana akan dibaca sebagai undefined ketika expression tersebut tidak menghasilkan apapun.

Alert pop-up bisa menganggu jika seseorang tidak ingin melihatnya atau ingin keluar dari pop up. Jika Anda ingin membuat program yang sama tetapi dengan tampilan yang berbeda, Anda bisa menggunakan Console atau kode console.log ( ).

Membuat Hello World Menggunakan console.log ( )

Kita bisa mencetak string yang sama, tetapi kali ini menggunakan console JavaScript dan menggunakan metode console.log ( ). Menggunakan opsi ini mirip dengan bekerja menggunakan bahasa pemograman yang ada di environment terminal komputer Anda.

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

console.log( “Hello, World!” );

Ketika Anda menekan tombol ENTER, Hello, World! akan muncul di Console seperti di bawah ini

Hello World Console

Contoh website yang menggunakan JavaScript murni

Ada beberapa website yang dibangun dengan menggunakan JavaScript murni. Berikut adalah beberapa contohnya:

Marketo

Marketo adalah sebuah software untuk pemasaran otomatis dan penjualan efektif yang membantu perusahaan kecil dan perusahaan global yang memiliki pertumbuhan pesat. Terkenal sebagai salah satu perusahaan yang menyediakan inovasi terobosan dan memicu pertumbuhan eksplosif, Marketo dinobatkan sebagai salah satu “America’s Most Promising Companies” oleh Forbes. Perusahaan ini juga menggunakan JavaScript untuk membangun user-interface website mereka. Dengan framework yang modern, widget UI yang dapat disesuaikan, model komponen yang dapat diperluas dan API yang mudah digunakan, JavaScript membantu Marketo untuk membangun website yang dapat memberikan user experience yang rapi dan professional.

Governance.io

2Gears, perusahaan yang merilis Governance.io, memilih Ext JS untuk membangun platform corporate governance yang kuat, baik untuk desktop maupun mobile. Perusahaan ini telah menggunakan JavaScript sejak awal. 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 dalam membangun website mereka.

Simpulan

Artikel ini merupakan sebuah artikel perkenalan JavaScript bagi Anda yang mungkin belum tahu banyak tentang JavaScript. Selain cara kerja JavaScript, mungkin Anda juga sudah dapat melihat dan mengerti mengapa JavaScript bisa menjadi pilihan yang tepat dalam membangun website Anda. Bagi Anda yang ingin mencoba, Anda bisa menggunakan beberapa code editor gratis yang tersedia di internet.

Kamu ingin mendapatkan konten edukasi secara rutin dan gratis ? Yuk isi form dibawah 🙂

* indicates required
Jenis Konten Edukasi yang diinginkan