JavaScript adalah Rahasia Web Interaktif – [Dasar Bahasa JavaScript]

JavaScript adalah bahasa pemrograman

JavaScript adalah bahasa pemrograman untuk mencipta suatu elemen web interaktif. Misalnya, kode JavaScript bisa memunculkan pop-up notifications hingga fitur games dalam website modern. JavaScript berjalan secara client-side. Ia didukung environment web browser populer, seperti Google Chrome, Mozilla Firefox, Netscape hingga Opera.

Bila Anda melihat suatu elemen interaktif - misal, Twitter feeds atau tombol drop-down - kemungkinan besar ada sejumlah kode JavaScript yang bekerja di belakang layar.

Apa itu Javascript?

Ide awal JavaScript adalah agar program Java bisa dimanfaatkan pemrogram yang non-Java. Maka, bahasa pemrograman LiveScript diciptakan untuk mengakomodasi keperluan itu. Bahasa ini yang kemudian dinamai JavaScript.

JavaScript adalah bahasa script atau pemrograman dinamis sehingga Anda bisa mengimplementasikan hal-hal kompleks ke dalam situs web.

Bahasa pemrograman JavaScript bisa digunakan untuk:

  • Menyimpan suatu 'value' sebagai variabel.
  • Operasi pemrograman ke basis teks (atau 'strings')
  • Menjalankan suatu kode program sebagai respon atas suatu 'event' yang terjadi di halaman website. Misal, saat suatu tombol (button) di-klik, maka muncul suatu respon JavaScript.

Lapisan HTML CSS JavaScript3 Bahasa: HTML - CSS - JavaScript

JavaScript, dari sudut pandang struktur halaman website, biasanya merespon 2 bahasa pemrograman lainnya, yaitu HTML dan CSS.

Bila diandaikan sebagai lapisan kue tart, JavaScript berada di lapisan paling bawah.

Artinya, JavaScript bersifat menambahkan elemen tertentu ke dalam dokumen HTML yang telah tertata sedemikian rupa dan didesain sedemikian rupa.

Penjelasannya:

  • HTML adalah bahasa markup standar untuk memberi struktur dan arti pada konten web. Misalnya, menentukan paragraf, judul hingga tabel data.
  • CSS adalah bahasa aturan gaya desain (style) yang dipakai untuk mempercantik konten HTML.
  • JavaScript adalah bahasa yang mampu menciptakan konten dinamis, multimedia, gambar animasi, dan lain-lain.

Model website dinamis menandakan konten tidak sama terus sepanjang waktu. Misal, Anda bisa menampilkan update cuaca terkini, galeri gambar/video 2D/3D, peta interaktif.

Application Programming Interfaces (APIs)

Javascript adalah scripting language dengan sistem Client-sideArtinya, kode JavaScript suatu website dijalankan oleh komputer pengunjung situs melalui aplikasi web browser (misalnya, Google Chrome, Mozilla Firefox, atau Opera). Jadi, saat halaman situs dikunjungi, kode JavaScript situs itu didownload, kemudian dijalankan dan ditampilkan oleh browser.

Hal ini juga yang melatari fungsi Application Programming Interfaces (APIs) yang menambah tenaga ekstra ke dalam kode JavaScript.

API adalah suatu set modul kode buatan yang memampukan developer untuk memasukkan suatu program yang sulit atau memakan waktu dalam pembuatannya.

Ada 2 jenis API, yaitu Browser APIs dan Third-Party APIs. API ini mirip potongan Lego. Developer tinggal memilih API yang tepat untuk desain web-nya, alih-alih harus menulis kode program dari awal.

1. Browser API

Browser APIs sudah dimasukkan ke dalam aplikasi web browser Anda (Google Chrome, Mozilla Firefox, dan lain-lain). Mereka bisa menggunakan data dari komputer atau melakukan sejumlah hal kompleks.

Misalnya:

  • DOM (Document Object Model): membuat Anda bisa mengubah HTML dan CSS, menciptakan, menghapus atau mengubah HTML, hingga menerapkan style desain secara dinamis ke halaman situs. Contoh: Popup window promo web hosting terbaik.
  • Geolocation: menerima informasi geografis. Contoh: Google Maps memakai API ini untuk mendapatkan lokasi GPS Anda.
  • Canvas dan WebGL: API yang mampu menciptakan gambar animasi 2D dan 3D.

2. Third-party API

Disebut juga API Pihak Ketiga, jenis API ini tidak ditanam langsung dalam web browser. Anda perlu mendownload kode API ini.

Misalnya:

  • Twitter API: ini bisa dipakai untuk menampilkan tweet terakhir di Twitter ke dalam website Anda.
  • Google Maps API: bisa dipakai untuk menempel ('embed') suatu lokasi peta terpilih ke halaman situs web.

Dasar-dasar Penulisan JavaScript

Sama seperti bahasa pemrograman lain, JavaScript memiliki struktur tertentu. Berikut adalah sejumlah elemen bahasa JavaScript, maupun strategi khusus agar penulisan kode JavaScript tidak menimbulkan suatu masalah teknis.

1. Penyisipan JavaScript ke HTML

JavaScript diimplementasikan ke dalam HTML dengan cara yang sama seperti CSS. Namun, bila CSS memakai elemen <link> atau <style> untuk membedakan sumber stylesheet internal atau eksternal, JavaScript hanya memakai satu elemen saja, yaitu <script>.

a. Penyisipan Internal

Dalam HTML, kode JavaScript biasanya ditulis dalam bentuk fungsi dan ditaruh di tag <head> yang dibuka dengan tag <script type="text/javascript">

Penyisipan kode JavaScript ke HTML

b. Penyisipan Eksternal

Anda bisa menempatkan kode JavaScript ke dalam satu file eksternal. Misal, file tersebut dinamai "script.js" (ekstensi Javascript adalah .js).

Kemudian, untuk memuat kode JavaScript tersebut, Anda menulis demikian:

Pemuatan kode JavaScript dari file eksternal

Apakah Anda melihat kode 'async' pada screenshot di atas?

Itu adalah salah satu strategi agar loading kode JavaScript lebih efisien.

Ya, pemuatan kode JavaScript bisa menimbulkan suatu error tertentu. Pada dasarnya, masalah utama adalah saat HTML di suatu halaman dibuka berdasar urutan penulisan. Jika Anda memakai JavaScript untuk memanipulasi elemen di halaman itu, kode Anda tidak akan bekerja jika JavaScript dibuka dan dijalankan sebelum seluruh HTML selesai dijalankan.

Kode 'async' di atas adalah fitur JavaScript modern yang mengatasi hal di atas. Saat atribut async dicapai, browser akan diinstruksikan untuk tetap mendownload konten HTML, sembari juga mendownload kode JavaScript.

Saat kedua kode situs web dimuat bersama, tidak ada error akibat suatu kode prasyarat telat dibuka.

2. Penulisan Identifier JavaScript

Identifier pada Javascript adalah suatu pengenal ('id') yang kita deklarasikan atas suatu elemen JavaScript.

Aturan umum untuk penulisan identifier dalam Javascript adalah :

  • Nama bisa dimulai dengan alfabet (huruf), tanda '$' dan '_'
  • Nama identifier tidak bisa dimulai dengan angka
  • Nama dapat berisi huruf, angka, _ ( underscore ) dan $ ( tanda dollar )
  • Kata kata yang dicadangkan (reserved code) tidak dapat digunakan sebagai nama

Sebagai contoh, penulisan identifier yang benar di JavaScript adalah sebagai berikut:

Javascript DOCTYPE

3. Tipe Data dalam JavaScript

JavaScript adalah bahasa pemrograman yang tidak menentukan tipe data tertentu secara default. Dalam kata lain, di JavaScript suatu jenis data (huruf, angka, simbol) bisa dipakai sebagai value dari variabel apapun..

a. Data String

Tipe data string dihadirkan hanya dengan mengapit suatu teks dengan tanda kutip (buka dan tutup). Javascript sendiri mendukung penggunaan tanda kutip satu ( ’ ), maupun tanda kutip ganda ( ’’ ).

JavaScript Tipe Data

b.Data Boolean

Data boolean menentukan bahwa suatu variabel bisa antara bernilai true atau false. Alias, bernilai benar atau salah.

If clause dalam Javascript

Misalnya, kita menset variabel raining bernilai 'false'.. Variabel 'raining' di dalam contoh ini akan menjadi tipe data boolean. Namun, jika digunakan di dalam struktur logika seperti if (raining), maka 'raining' akan bersifat boolean dengan nilai true.

4. Operator Aritmatika dalam JavaScript

Javascript adalah bahasa program yang dapat melakukan pendefinisian beberapa variabel, yang selanjutnya melakukan operasi-operasi sederhana seperti penambahan, pengurangan, dan juga modulus.  Operator aritmatika dalam JavaScript adalah simbol yang mewakili operasi matematika. Misalnya:

OperatorDeskripsi
+Penambahan (Addition)
-Pengurangan (Substraction)
*Perkalian (Multiplication)
/Pembagian (Division)
&Modulus (Remainder)
++Increment
--Decrement

Proses aritmatika dalam JavaScript adalah sama seperti metode Paragapit. Artinya, bila terdapat bersamaan dalam suatu operasi aritmatika, proses perkalian dan pembagian didahulukan daripada penambahan dan pengurangan.

Contohnya, perhitungan 20 + 5 * 5.

JavaScript akan memproses perhitungan ke dalam sistem: 20 + ( 5 * 5 ).

Selain itu, dalam JavaScript adalah terdapat prioritas dari suatu operasi menjadi lebih tinggi. Kita juga dapat menambahkan tanda kurung di dalam program.

Berikut contoh dari Javascript adalah cara penggunaan tipe data angka dan operasi aritmatika dalam JavaScript.

Operasi aritmatika di JavaScript Penggunaan tipe data di Javascript

Pada saat pendefenisian variabel ini, juga langsung terjadi pemberian nilai awal. Perintah console.log selanjutnya akan menampilkan isi dari ketiga variabel ini pada log di browser pada pertemuan ini menggunakan Google Chrome.

5. Penulisan Comments dalam JavaScript

Seperti dalam HTML dan CSS, Anda bisa menulis komentar/anotasi dalam kode JavaScript Anda. Baris komentar tersebut akan diabaikan oleh web browser, dan ia hanya sebagai catatan yang bisa dibaca oleh pengembang lain.

  • SKomentar 1 baris ditulis setelah tanda slash dobel (//)
Komentar dalam 1 baris kode
  • Komentar multi baris ditulis di antara tanda /* dan */.
Komentar multi baris

Rangkuman

JavaScript adalah bahasa pemrograman untuk menghadirkan elemen interaktif dan dinamis ke dalam suatu halaman website. Unsur dinamis di sini berarti konten yang ditampilkan bisa menyesuaikan perubahan data terkini. Sebagai contoh, menampilkan tweet terbaru Anda melalui Twitter API.

JavaScript sendiri bersifat komplementer bagi bahasa pemrograman website lainnya. Bahasa selain JavaScript tersebut adalah HTML dan CSS.

Dalam implementasinya, ada sejumlah strategi agar kode JavaScript dibuka dengan efisien. Variabel 'async', sebagai contoh, adalah instruksi agar browser memuat HTML secara simultan dengan pemuatan kode Javascript. Cara ini menghindarkan error akibat salah satu script prasyarat telat dimuat. Cara tersebut juga bagus sebagai faktor pemercepat SEO (Search Engine Optimization).

Gabriel (Ig: @gb.g.m) antusias mengikuti perkembangan terkini dunia web hosting dan SEO writing. Ia juga menulis cerpen eksperimental, dan esai imajinatif, di blog Tempat Duduk.
Leave a Comment

  1. AnnehathawayStan picture AnnehathawayStan
    2019-April-2nd
    Balas

    Waow, sepertinya JavaScript ini yang saya perlu pelajari. Saya dulu waktu SMA belajar HTML dasar (masih pakai notepad) dan bisa bikin tabel2 segala macam, tapi kurang fleksibel (atau saya yang kurang ahli yah). Terus, CSS kayaknya lebih ke ‘membungkus’ font dan sebagainya itu. Nah, kalau JavaScript saya bisa bikin elemen yang lebih menarik, kayak screenshot instagram. Benar kan, mas?

  2. Fafa Kesolsol picture Fafa Kesolsol
    2019-April-2nd
    Balas

    Wah, menarik, menarik. Kalau menambahkan tombol social media ke postingan kita juga bisa pakai JavaScript ini, mas?

    Thank you

Dapatkan posting blog baru melalui email: