Tutorial Belajar JavaScript

Belajar JavaScript merupakan suatu kewajiban buat calon programmer front end. Pemrograman JavaScript adalah dasar untuk belajar framework pemrograman web lainnya seperti Node.js, Angular, React Js, Vue.js dan lain sebagainya. Bahkan framework untuk membuat aplikasi mobile juga banyak menggunakan JavaScript seperti React Native, Apache Cordova dan lain sebagainya. JavaScript adalah bahasa pemrograman tingkat menengah. Untuk belajar JavaScript kita dituntut untuk mengetahui cara penulisan atau sintak pemrograman JavaScript. Selain itu kita juga harus memahami algoritma pemrograman. Artikel ini adalah artikel tutorial pendahuluan dari seri tutorial belajar JavaScript yang terdiri dari banyak artikel tutorial JavaScript lengkap, mulai dari memahami apa itu JavaScript, sejarah JavaScript sampai teknik pemrograman JavaScript tingkat dasar sampai lanjutan.

Apa itu JavaScript ?

JavaScript adalah bahasa pemrograman tingkat tinggi yang banyak digunakan dalam pengembangan aplikasi web. Bahasa ini memungkinkan pengembang untuk menambahkan interaktivitas, fungsionalitas dinamis, dan fitur khusus ke dalam halaman web. JavaScript berjalan di sisi klien (di browser pengguna) dan memungkinkan penggunaan berbagai fitur seperti manipulasi DOM (Document Object Model), validasi form, animasi, komunikasi dengan server, dan banyak lagi.

Dengan menggunakan JavaScript, Anda dapat membuat situs web yang merespons tindakan pengguna secara dinamis, melakukan perubahan pada tampilan halaman tanpa harus memuat ulang seluruh halaman, dan mengembangkan aplikasi web interaktif yang lebih kaya dan menarik.

JavaScript bukan hanya digunakan di sisi klien. Ada juga Node.js, yang memungkinkan Anda menjalankan JavaScript di sisi server, memungkinkan Anda untuk mengembangkan aplikasi web dan server-side dengan satu bahasa pemrograman yang konsisten.

Dalam perkembangannya, JavaScript telah mengalami berbagai perubahan dan peningkatan, seperti penambahan fitur baru, dukungan ECMAScript (standar untuk bahasa JavaScript), dan pengenalan berbagai framework dan library yang memudahkan pengembangan aplikasi yang lebih kompleks.

Ketika Anda melihat tampilan interaktif di banyak situs web modern, kemungkinan besar itu adalah hasil dari penggunaan JavaScript di belakang layar.

Sejarah JavaScript

JavaScript telah mengalami perjalanan yang panjang dan menarik sejak pertama kali diperkenalkan hingga menjadi salah satu bahasa pemrograman yang paling penting dalam pengembangan web. Mari kita lihat sejarah perkembangan JavaScript dari awal hingga masa modern.

1. Pembentukan Awal (1995-1997)

• Pada tahun 1995, Netscape Communications Corporation merilis Navigator 2.0, yang merupakan salah satu dari web browser pertama yang mendukung fitur interaktif.
• Pada bulan Desember 1995, Brendan Eich, seorang insinyur perangkat lunak di Netscape, diberikan tugas untuk membuat bahasa scripting untuk Navigator. Dalam waktu 10 hari, ia menciptakan Mocha, yang kemudian menjadi LiveScript.
• Namun, pada saat yang hampir bersamaan, Sun Microsystems merilis bahasa pemrograman bernama Java, yang populer pada saat itu. Untuk memanfaatkan popularitas Java, Navigator 2.0 mengganti nama LiveScript menjadi JavaScript. Nama ini terbukti menarik minat, meskipun JavaScript dan Java adalah dua bahasa yang berbeda.

2. Pembentukan Standar (1997-1999)

• Pada tahun 1997, Netscape membawa JavaScript ke Ecma International, sebuah organisasi standar internasional. Proses ini menghasilkan standar untuk bahasa ini yang dikenal sebagai ECMAScript.
• ECMAScript 1 dirilis pada tahun 1997, menetapkan dasar bahasa JavaScript yang kita kenal saat ini. Namun, dukungan untuk berbagai fitur berbeda-beda di berbagai browser.

3. Perang Browser dan Inovasi (2000-2009)

• Pada tahun 2000-an, terjadi “perang browser” antara Microsoft Internet Explorer, Mozilla Firefox, dan kemudian Google Chrome. Perang ini mendorong inovasi dan pengembangan cepat dalam teknologi web.
• Pada tahun 2005, AJAX (Asynchronous JavaScript and XML) mulai digunakan secara luas, mengubah cara aplikasi web berinteraksi dengan server tanpa perlu memuat ulang halaman secara lengkap.
• ECMAScript 3, yang dirilis pada tahun 1999, menjadi dasar bahasa JavaScript selama bertahun-tahun.

4. Masa Modern (2010-Sekarang)

• Pada tahun 2009, ECMAScript 5 (ES5) dirilis, membawa banyak perbaikan dan fitur baru ke JavaScript, termasuk dukungan untuk JSON (JavaScript Object Notation).
• Pada tahun 2015, ECMAScript 6 (ES6) dirilis, membawa perubahan signifikan dan fitur baru seperti deklarasi variabel dengan let dan const, arrow functions, dan class.
• Setelah ES6, ECMAScript mulai merilis versi baru setiap tahun dengan perubahan dan peningkatan. Ini menghasilkan ES7, ES8, dan seterusnya.
• Pada tahun 2021, ECMAScript 2021 (ES12) adalah versi terbaru saat artikel ini ditulis. Ini mencakup fitur-fitur seperti “logical assignment operators” dan “String.prototype.replaceAll()”.

JavaScript telah mengalami transformasi besar dari bahasa sederhana untuk menambahkan interaktivitas pada halaman web menjadi bahasa pemrograman yang kuat dan serbaguna yang digunakan dalam pengembangan web, server-side scripting, dan bahkan aplikasi mobile dan desktop. Dengan komunitas yang kuat dan dukungan dari berbagai peramban dan platform, JavaScript terus menjadi salah satu teknologi paling penting dalam dunia teknologi informasi modern.

Manfaat JavaScript

Belajar JavaScript memiliki banyak manfaat, terutama jika Anda tertarik dalam dunia pengembangan web dan teknologi. Berikut adalah beberapa manfaat utama dari belajar JavaScript:

Interaktivitas Web

JavaScript memungkinkan Anda menambahkan interaktivitas dan dinamika ke situs web Anda. Anda dapat membuat animasi, efek transisi, dan merespons tindakan pengguna dengan mudah, yang membuat pengalaman pengguna lebih menarik.

Pengembangan Aplikasi Web

JavaScript merupakan fondasi dalam pengembangan aplikasi web modern. Dengan bantuan kerangka kerja seperti React, Angular, atau Vue.js, Anda dapat mengembangkan aplikasi web yang canggih dan kompleks dengan antarmuka yang responsif dan interaktif.

Manipulasi DOM

DOM (Document Object Model) adalah representasi struktur halaman web dalam bentuk objek, dan JavaScript memungkinkan Anda untuk memanipulasi elemen-elemen DOM secara dinamis. Anda dapat menambahkan, menghapus, atau mengubah elemen pada halaman tanpa perlu me-reload halaman.

Validasi Form

JavaScript memungkinkan Anda melakukan validasi form di sisi klien sebelum data dikirim ke server. Ini membantu mencegah pengguna mengirimkan data yang salah atau tidak valid.

Ajax dan Asynchronous Programming

Teknik Ajax (Asynchronous JavaScript and XML) memungkinkan Anda mengirim dan menerima data dari server tanpa perlu memuat ulang seluruh halaman. JavaScript juga memungkinkan pemrograman asynchronous, di mana Anda dapat menjalankan operasi tanpa harus memblokir eksekusi program utama.

Library dan Framework

Ada banyak library dan framework JavaScript yang memudahkan pengembangan. Misalnya, jQuery mempermudah manipulasi DOM, sementara kerangka kerja seperti React, Angular, dan Vue.js memberikan alat yang kuat untuk mengembangkan aplikasi web yang canggih.

Pengembangan Game

JavaScript juga dapat digunakan untuk mengembangkan game ringan dalam bentuk HTML5 games. Beberapa platform game populer menggunakan JavaScript sebagai bahasa pemrograman utama.

Karir dan Peluang Pekerjaan

Pengembangan web dan teknologi terus berkembang pesat. Mengetahui JavaScript akan membuka peluang pekerjaan yang luas, baik sebagai pengembang front-end, back-end (dengan Node.js), atau bahkan sebagai pengembang aplikasi mobile (dengan React Native).

Penting untuk dicatat bahwa belajar JavaScript memerlukan dedikasi dan latihan konsisten. Namun, investasi ini akan memberikan Anda keterampilan yang sangat berharga dalam dunia teknologi yang terus berkembang.

Editor untuk Coding JavaScript

Ada banyak pilihan editor atau lingkungan pengembangan yang dapat Anda gunakan untuk menulis, mengedit, dan mengembangkan kode JavaScript. Pilihan ini dapat disesuaikan dengan preferensi pribadi Anda, kebutuhan proyek, dan gaya pengembangan. Berikut merupakan 3 pilihan populer:

1. Visual Studio Code (VS Code)

Visual Studio Code (VS Code) adalah editor source code yang populer untuk pengembangan JavaScript. Dengan kinerja ringan dan penyorotan kode canggih yang dapat meningkatkan produktivitas. Ekstensi yang kuat, termasuk saran kode otomatis dan debugging terintegrasi, membantu dalam penulisan dan pemecahan masalah yang efisien.

Fitur lintas platformnya membuatnya cocok untuk pengembangan di berbagai sistem operasi. Dukungan Git bawaan mempermudah pengelolaan versi kode. Ekosistem ekstensi yang luas memungkinkan penyesuaian sesuai kebutuhan, memungkinkan pengembang untuk bekerja lebih efisien dan mengintegrasikan alat lain dalam alur kerja.

2. Sublime Text

Sublime Text adalah editor source code ringan dan kuat yang cocok untuk pengembangan JavaScript. Dengan desain minimalis dan performa tinggi, Sublime Text menawarkan penulisan kode yang efisien. Penyorotan sintaks yang kuat membantu mengidentifikasi elemen kode dengan jelas, sementara dukungan plugin yang luas memungkinkan penyesuaian alat dan fungsionalitas sesuai kebutuhan.

Meskipun tidak memiliki fitur terintegrasi untuk debugging seperti editor lain, Sublime Text sangat baik untuk pengembang yang lebih suka fokus pada penulisan kode. Dukungan Git dan pengelolaan proyek yang sederhana membuatnya nyaman digunakan dalam proyek JavaScript. Dengan ekosistem ekstensi yang beragam, Sublime Text adalah pilihan yang bagus untuk pengembangan JavaScript yang cepat dan fleksibel.

3. Atom

Atom adalah editor source yang open source dan dapat disesuaikan yang cocok untuk pengembangan JavaScript. Dengan antarmuka ramah pengguna dan desain yang menarik, Atom menawarkan pengalaman penulisan kode yang nyaman. Penyorotan sintaks yang kuat membantu mengidentifikasi elemen kode dengan jelas, dan berbagai paket ekstensi yang tersedia memungkinkan penyesuaian dan penambahan fungsionalitas.

Pilihan editor tergantung pada preferensi pribadi dan jenis proyek yang sedang Anda kerjakan. Cobalah beberapa pilihan untuk menemukan yang paling cocok dengan gaya pengembangan Anda.

Aturan Penulisan JavaScript

Mematuhi aturan penulisan kode yang baik dan konsisten adalah penting dalam pengembangan perangkat lunak, termasuk JavaScript. Ini membantu meningkatkan kerjasama, pemeliharaan, dan keterbacaan kode Anda. Berikut adalah beberapa aturan penulisan kode JavaScript yang umum diikuti:

• Indentasi: Gunakan indentasi yang konsisten untuk mengatur blok kode. Biasanya, menggunakan empat spasi atau satu tab sebagai indentasi standar.
• Pemisahan Baris: Setiap pernyataan atau blok kode harus ditempatkan di baris terpisah.
• Penamaan Variabel: Gunakan penamaan yang deskriptif dan konsisten untuk variabel, fungsi, dan objek. Hindari penamaan yang ambigu atau terlalu singkat.
• Penggunaan Spasi: Gunakan spasi secara konsisten untuk meningkatkan keterbacaan kode. Tambahkan spasi setelah koma, sebelum dan sesudah operator, dan sebelum kurung kurawal buka {.
• Panjang Baris: Usahakan agar panjang baris kode tidak terlalu panjang. Umumnya, disarankan agar panjang baris tidak melebihi 80 atau 100 karakter.
• Komentar: Gunakan komentar untuk menjelaskan bagian kode yang kompleks atau untuk memberikan penjelasan pada blok kode. Ini membantu pengembang lain (termasuk diri Anda di masa depan) memahami niat dan fungsi dari kode.
• Penggunaan Kurung Kurawal: Walaupun JavaScript memungkinkan pengabaian kurung kurawal pada blok kode dengan satu pernyataan, sebaiknya selalu gunakan kurung kurawal bahkan pada blok kode yang hanya memiliki satu pernyataan. Ini membantu menghindari masalah yang mungkin timbul dari kelalaian di masa mendatang.
• Deklarasi Variabel: Selalu deklarasikan variabel menggunakan var, let, atau const sebelum menggunakannya. Ini memastikan bahwa variabel tidak terjebak dalam ruang lingkup global tanpa sengaja.
• Semicolon: Meskipun JavaScript memungkinkan penggunaan semicolon (;) di akhir pernyataan opsional, lebih baik untuk selalu menggunakan semicolon untuk menghindari perilaku tak terduga.
• Format String: Gunakan backticks (`) untuk mengelilingi string-template yang mengandung ekspresi. Ini memungkinkan Anda menyisipkan ekspresi dalam string menggunakan ${ekspresi}.
• Penggunaan Tanda Kurung: Gunakan tanda kurung untuk mengelompokkan ekspresi dan memastikan urutan evaluasi yang benar.
• Penghindaran Global Scope: Hindari deklarasi variabel di ruang lingkup global. Gunakan modul atau fungsi untuk membatasi ruang lingkup variabel.
• Penggunaan Fungsi: Gunakan fungsi dengan baik, termasuk memberikan nama yang deskriptif dan menghindari fungsi yang terlalu panjang. Fungsi sebaiknya memiliki satu tugas yang spesifik.
• Penghindaran Magic Numbers: Hindari penggunaan angka ajaib (magic numbers) langsung dalam kode. Beri nama konstan untuk angka tersebut agar lebih mudah dipahami.
• Pemisahan Kode: Bagi kode menjadi modul-modul yang logis untuk memudahkan pemeliharaan dan pengembangan berkelanjutan.

Perlu diingat bahwa aturan penulisan kode JavaScript ini bersifat umum dan dapat bervariasi tergantung pada gaya pengembangan tim atau komunitas. Penting untuk tetap konsisten dalam proyek yang Anda kerjakan dan jika Anda berkontribusi pada proyek lain, ikuti pedoman penulisan kode yang mereka gunakan. Pelajari cara penulisan JavaScript lebih detil pada artikel tutorial Penulisan JavaScript.

Variabel pada JavaScript

Variabel dalam JavaScript digunakan untuk menyimpan dan merujuk pada nilai atau data. Mereka adalah nama yang diberikan kepada nilai-nilai yang ingin Anda simpan dalam memori selama eksekusi program. Berikut adalah cara mendeklarasikan variabel dalam JavaScript:

1. var

Digunakan untuk mendeklarasikan variabel dengan ruang lingkup fungsi. Variabel ini dapat diakses di seluruh fungsi tempat variabel tersebut dideklarasikan.

2. let

Digunakan untuk mendeklarasikan variabel dengan ruang lingkup blok. Variabel ini hanya dapat diakses di dalam blok tempat variabel tersebut dideklarasikan.

3. const

Digunakan untuk mendeklarasikan variabel dengan nilai yang tidak akan berubah setelah diberikan nilai pertama.

Variabel membantu Anda dalam mengelola dan memanipulasi data dalam kode JavaScript Anda. Pastikan untuk memberikan nama yang deskriptif pada variabel dan memahami perbedaan antara var, let, dan const serta konsekuensinya dalam penggunaan variabel. Untuk contoh mendeklarasikan dan lebih lanjutnya Anda dapat membacanya pada tutorial Variabel JavaScript

Mengenal Tipe Data JavaScript

JavaScript memiliki beberapa tipe data dasar yang digunakan untuk menyimpan berbagai jenis nilai. Berikut adalah beberapa Tipe Data JavaScript:

1. String: Tipe data ini digunakan untuk merepresentasikan teks. String dapat ditulis di dalam tanda kutip tunggal (‘…’) atau tanda kutip ganda (“…”). Anda dapat mempelajari tipe data String lebih lanjut pada artikel tutorial JavaScript Text Atau String.
2. Number: Tipe data ini digunakan untuk merepresentasikan angka, baik bilangan bulat maupun desimal. Anda dapat mempelajari tipe data Number lebih lanjut pada artikel tutorial JavaScript Angka Atau Number.
3. Boolean: Tipe data ini hanya memiliki dua nilai, yaitu true (benar) dan false (salah). Boolean digunakan untuk pengambilan keputusan dalam kondisi.
4. Undefined: Tipe data ini mewakili nilai yang belum didefinisikan. Jika variabel dideklarasikan tetapi belum diinisialisasi, maka nilainya adalah undefined.
5. Null: Tipe data ini mewakili nilai kosong atau tidak ada. Jika Anda sengaja ingin memberikan nilai kosong pada suatu variabel, Anda bisa menggunakan null.
6. Object: Tipe data ini digunakan untuk mengelompokkan nilai dan properti yang terkait. Objek dalam JavaScript adalah kumpulan pasangan nama-properti dan nilai. Pelajari tipe data Object lebih lanjut pada artikel tutorial JavaScript Object.
7. Array: Tipe data ini digunakan untuk menyimpan kumpulan nilai dalam satu variabel. Nilai-nilai tersebut dapat diakses melalui indeks. Array sangat penting untuk dipelajari, silahkan pelajari lebih lanjut pada artikel tutorial Array Pada JavaScript.
8. Function: Tipe data ini memungkinkan Anda untuk mendefinisikan dan menggunakan fungsi dalam JavaScript. Fungsi adalah blok kode yang dapat dipanggil dan dieksekusi. Pelajari Function lebih lanjut pada artikel tutorial Fungsi Pada JavaScript.
9. Symbol: Tipe data ini digunakan untuk membuat nilai unik yang tidak dapat diubah atau ditiru oleh nilai lain.

Tipe-tipe data ini memungkinkan Anda untuk menyimpan berbagai jenis nilai dalam kode JavaScript Anda. Pemahaman yang baik tentang tipe-tipe data ini akan membantu Anda dalam manipulasi dan pengolahan data dengan lebih efektif.

Cara Menuliskan Kode JavaScript di HTML

Anda bisa menuliskan kode JavaScript di HTML dengan beberapa cara. Berikut adalah tiga cara umum untuk melakukannya:

1. Inline Script

Anda bisa menuliskan kode JavaScript langsung di dalam tag <script> di dalam elemen HTML. Ini sering digunakan untuk kode yang sangat sederhana atau untuk memanggil fungsi langsung.

2. Internal Script

Anda bisa menuliskan kode JavaScript di dalam tag <script> di dalam bagian <head> atau <body> HTML. Ini memungkinkan Anda untuk memisahkan kode JavaScript dari tampilan HTML tetapi masih di dalam file yang sama.

3. External Script

Anda bisa menuliskan kode JavaScript dalam file terpisah dengan ekstensi .js dan memasangnya di dalam tag <script> di bagian <head> atau <body> HTML. Ini membantu memisahkan kode JavaScript dari HTML dan membuatnya lebih mudah diatur.

index.html

script.js

Penting untuk memasukkan kode JavaScript di antara tag <script> dan menempatkannya di tempat yang sesuai dalam halaman HTML Anda. Anda dapat memilih metode yang paling sesuai dengan kebutuhan proyek Anda. Untuk lebih lengkapnya, pelajari dalam artikel tutorial Cara Membuat JavaScript Di HTML.

Membuat Program Sederhana Dengan JavaScript

Berikut adalah contoh program sederhana JavaScript untuk menampilkan Hello World!

Coding yang kita tulis pada editor JavaScript dengan nama file hello_world.html:

Setelah kita tulis, kemudian disimpan. Lalu buka file hello_world.html pada browser.

Berikut adalah hasil yang akan tampil pada browser:

Menjalankan Contoh Coding

Artikel ini adalah artikel pendahuluan dari seri tutorial belajar JavaScript yang terdiri dari beberapa artikel. Di dalam setiap artikel terdapat banyak contoh coding JavaScript. Klik tombol Jalankan Contoh untuk menjalankan contoh coding JavaScript melalui web browser.

Kita juga perlu melihat source code dari contoh coding yang dijalankan pada web browser. Untuk melihat source code tekan tombol CTRL + U pada web browser. Untuk pengguna komputer Mac tekan tombol Option+Command+U pada web browser.

Untuk selanjutnya, silahkan mulai mempelajari satu per satu seri tutorial JavaScript dimulai dari artikel tutorial Pengertian JavaScript.