Blogcilik

Function & Scope dalam JavaScript: Fondasi Penting yang Wajib Dipahami

2026-02-21T18:59:00.002+07:00

Kalau kamu sedang belajar JavaScript—apalagi kalau ingin serius masuk ke dunia web development atau bahkan AI berbasis JavaScript—dua konsep yang wajib benar-benar dipahami adalah: function dan scope.
Kenapa?
Karena hampir semua logika program JavaScript berdiri di atas dua hal ini.

Apa Itu Function di JavaScript?

Function adalah blok kode yang bisa dipanggil kembali untuk menjalankan tugas tertentu.
Bayangkan function seperti “mesin kecil” yang bisa kamu gunakan berulang kali tanpa harus menulis ulang kodenya.

🔹 Contoh Dasar Function :

function sapa() { console.log("Halo dunia!"); } sapa(); // Memanggil function

Output:

Halo dunia!

🔹 Function dengan Parameter

Parameter membuat function jadi fleksibel.

function sapa(nama) { console.log("Halo " + nama); } sapa("Budi");

Output:

Halo Budi

🔹 Function dengan Return Value

Function juga bisa mengembalikan nilai.

function tambah(a, b) { return a + b; } let hasil = tambah(5, 3); console.log(hasil);

Output:

8

return itu penting. Tanpa return, function hanya menjalankan kode tapi tidak mengembalikan hasil.

Jenis-Jenis Function di JavaScript

🔹 Function Declaration

function kali(a, b) { return a * b; }

Bisa dipanggil sebelum didefinisikan (karena hoisting).

🔹 Function Expression

const bagi = function(a, b) { return a / b; };

Tidak bisa dipanggil sebelum didefinisikan.

🔹 Arrow Function (Modern JavaScript)

const kurang = (a, b) => { return a - b; };

Versi singkatnya:

const kurang = (a, b) => a - b;

Arrow function sering dipakai di React, Node.js, dan berbagai framework modern.

Apa Itu Scope?

Scope adalah ruang lingkup di mana sebuah variabel bisa diakses.
Banyak bug di JavaScript terjadi karena orang belum paham scope.

🔹 Global Scope

Variabel yang dideklarasikan di luar function bisa diakses di mana saja.

let nama = "Andi";

function cetak() {
  console.log(nama);
}

cetak();  

🔹 Function Scope

Variabel yang dibuat di dalam function hanya bisa diakses di dalam function itu saja.

function contoh() {
  let umur = 25;
  console.log(umur);
}

contoh();
console.log(umur); // Error!  

Kenapa error?
Karena umur hanya hidup di dalam function.

🔹 Block Scope (let & const)

Sejak ES6, let dan const punya block scope.

if (true) { let angka = 10; console.log(angka); } console.log(angka); // Error

Berbeda dengan var yang tidak punya block scope.

Scope Chain (Konsep Penting!)

JavaScript mencari variabel dari dalam ke luar.
Contoh:

let globalVar = "Saya global"; function luar() { let luarVar = "Saya di luar"; function dalam() { console.log(globalVar); console.log(luarVar); } dalam(); } luar();

Urutan pencarian:

Cek di dalam function sekarang
Jika tidak ada, naik ke atas
Terus naik sampai global
Jika tidak ketemu → error

Inilah yang disebut scope chain.

Kenapa Ini Penting?

Kalau kamu:

Mau jadi web developer
Mau masuk ke backend Node.js
Mau belajar React
Mau bikin logic trading bot
Mau bikin AI berbasis JavaScript

Maka memahami function & scope itu bukan pilihan — itu wajib.

Karena:

80% bug pemula berasal dari scope
Closure (konsep lanjutan) bergantung pada scope
Async programming juga sangat berkaitan dengan function

Kesalahan Umum Pemula

❌ Lupa pakai let / const
❌ Salah paham hoisting
❌ Mengira variabel di dalam function bisa diakses di luar
❌ Terlalu banyak global variable

Kesimpulan

Function = Mesin logika
Scope = Batas wilayah variabel

Kalau kamu kuasai dua ini, kamu sudah naik level dari pemula ke menengah.

Apa Itu Function dalam Javascript Pengertian dan Konsep Dasar

2026-02-11T12:12:00.003+07:00

Waktu pertama kali belajar JavaScript, saya pikir function itu cuma “cara bikin kode lebih rapi”.
Ternyata saya salah besar.

Saya baru sadar pentingnya function ketika kode saya mulai berantakan. Setiap mau menampilkan teks, menghitung angka, atau melakukan proses kecil, saya copy–paste kode yang sama berkali-kali. Awalnya terasa cepat… tapi lama-lama malah bikin pusing sendiri.

Di situlah saya mulai benar-benar memahami apa itu function.

Saat Kode Mulai Berantakan

Bayangkan saya punya kode seperti ini:

JavaScript

console.log("Halo, selamat datang!"); console.log("Halo, selamat datang!"); console.log("Halo, selamat datang!");

Kelihatannya tidak masalah. Tapi bagaimana kalau teksnya harus diubah?

Saya harus ubah satu per satu.

Di situ saya berpikir,
“Kenapa tidak dibuat satu saja, lalu dipanggil berulang?”

Dan di situlah saya bertemu dengan function.

Apa Itu Function Sebenarnya?

Dari pengalaman saya, function itu seperti tombol otomatis.

Kita tulis sekali apa yang harus dilakukan.
Lalu setiap kali butuh, kita tinggal tekan tombolnya.

Secara sederhana:

Function adalah blok kode yang bisa disimpan, lalu dijalankan kapan pun kita mau.

Contoh Function yang Pertama Kali Saya Buat

Waktu itu saya coba menulis seperti ini:

JavaScript

function sapa() { console.log("Halo, selamat datang!"); }

Lalu saya jalankan:

JavaScript

sapa();

Dan hasilnya:

JavaScript

Halo, selamat datang!

Saat itu saya langsung merasa,
“Wah… ternyata semudah ini.”

Tidak perlu tulis ulang berkali-kali. Cukup panggil namanya saja.

Kenapa Saya Akhirnya Sadar Function Itu Penting

Setelah beberapa latihan kecil, saya mulai paham:

Tanpa function → kode cepat panjang
Tanpa function → sulit diperbaiki
Tanpa function → mudah salah

Tapi dengan function:

✔ Kode lebih pendek
✔ Lebih mudah dibaca
✔ Lebih terstruktur
✔ Bisa digunakan ulang

Semakin besar programnya, semakin terasa manfaatnya.

Cara Saya Mengingat Konsep Function

Saya biasanya mengibaratkan function seperti resep masakan.

Resep ditulis satu kali.
Tapi bisa dipakai berkali-kali.

Kalau ingin hasil berbeda?
Tinggal ubah bahan (nanti kita belajar soal parameter).

Konsep ini yang akhirnya membuat saya lebih mudah memahami JavaScript tahap selanjutnya.

Kesalahan yang Pernah Saya Lakukan

Jujur saja, saya dulu sering lupa memanggil function.
Saya sudah buat:

JavaScript

function sapa() { console.log("Halo!"); }

Tapi lupa menulis:

JavaScript

sapa();

Akhirnya tidak muncul apa-apa, dan saya bingung sendiri.

Dari situ saya belajar:
Membuat function saja tidak cukup — kita harus memanggilnya.

Kenapa Kamu Harus Paham Function Sejak Awal

Berdasarkan pengalaman saya belajar JavaScript, hampir semua konsep lanjutan bergantung pada function:

Scope
Closure
Callback
Asynchronous programming

Kalau fondasi function belum kuat, materi lanjutan akan terasa membingungkan.
Saya sendiri merasakannya.

Kesimpulan

Dulu saya menganggap function hanya fitur tambahan.
Sekarang saya sadar, function adalah jantung dari JavaScript.

Belajar function bukan cuma soal sintaks, tapi soal cara berpikir:
Bagaimana membuat kode lebih terstruktur dan bisa digunakan kembali.

Kalau kamu sedang belajar JavaScript, percayalah — pahami function dulu dengan benar. Setelah itu, banyak hal akan terasa lebih masuk akal.

Airdrop Crypto: Apa Itu, Cara Kerja, dan Peran JavaScript di Baliknya

2026-02-11T11:16:00.000+07:00

Dalam beberapa tahun terakhir, istilah airdrop crypto semakin sering dibicarakan. Banyak pengguna Web3 mendapatkan token gratis hanya dengan melakukan interaksi sederhana seperti swap, bridge, atau staking.

Namun, sebenarnya apa itu airdrop? Dan apa hubungannya dengan JavaScript?

Artikel ini akan membahasnya dari sudut pandang teknis — khususnya untuk developer JavaScript.

Apa Itu Airdrop?

Airdrop adalah distribusi token gratis dari sebuah proyek crypto kepada pengguna yang memenuhi syarat tertentu.
Biasanya syaratnya seperti:

Menggunakan dApp mereka
Melakukan transaksi tertentu
Menyediakan likuiditas
Mengikuti testnet

Tujuannya adalah:

Meningkatkan awareness
Menghargai early adopter
Mendistribusikan token secara lebih merata

Bagaimana Airdrop Ditentukan?

Sebagian besar proyek menentukan penerima airdrop berdasarkan:

Snapshot wallet address
Jumlah transaksi
Volume transaksi
Interaksi dengan smart contract tertentu

Semua data ini tersimpan di blockchain dan bisa diakses melalui RPC atau API.
Di sinilah JavaScript berperan.

Peran JavaScript dalam Ekosistem Airdrop

Developer JavaScript bisa:

1️⃣ Mengecek Kelayakan Airdrop Menggunakan Web3.js atau Ethers.js
Contoh sederhana menggunakan ethers.js:

JavaScript

import { ethers } from "ethers"; const provider = new ethers.JsonRpcProvider("https://rpc.ankr.com/eth"); const address = "0xYourWalletAddress"; async function checkBalance() { const balance = await provider.getBalance(address); console.log("Balance:", ethers.formatEther(balance)); }

checkBalance();

Script seperti ini bisa digunakan untuk:

Mengecek histori transaksi
Menghitung volume
Mengambil event smart contract

2️⃣ Membuat Script Monitoring Airdrop

Developer bisa membuat:

Bot notifikasi airdrop
Script pemantau snapshot
Dashboard tracking eligibility

Biasanya menggunakan:

Node.js
Express
Web3.js
Ethers.js
The Graph API

3️⃣ Membuat Tools Eligibility Checker

Beberapa website airdrop checker dibuat menggunakan:

React (Frontend)
Node.js (Backend)
Web3 library

User cukup connect wallet → sistem membaca data on-chain → menentukan apakah eligible atau tidak.

Apakah Aman Mengikuti Airdrop?

Sebagai developer, penting memahami risiko:

⚠️ Banyak scam airdrop
⚠️ Website palsu yang meminta private key
⚠️ Smart contract berbahaya

Tips aman:

Jangan pernah share private key
Gunakan wallet khusus airdrop
Cek kontrak di Etherscan

Peluang untuk Developer JavaScript

Jika kamu menguasai JavaScript, kamu bisa:

Membuat dashboard analytics Web3
Membuat bot monitoring airdrop
Membuat tool auto-check eligibility
Membangun dApp sendiri dengan sistem reward

Airdrop bukan hanya soal “token gratis”, tapi juga peluang membangun produk di ekosistem Web3.

Kesimpulan

Airdrop adalah bagian dari strategi distribusi token dalam dunia crypto. Di baliknya, terdapat data on-chain yang bisa diakses dan dianalisis menggunakan JavaScript.
Bagi developer, ini bukan sekadar tren, tetapi peluang untuk:

Belajar Web3
Membangun tools
Membuat produk berbasis blockchain

Jika kamu ingin mendalami Web3 dengan JavaScript, memahami mekanisme airdrop adalah langkah awal yang bagus.

Struktur Dasar JavaScript: Kesalahan Umum yang Sering Terjadi pada Pemula

2026-01-20T20:49:00.003+07:00

Belajar JavaScript sering terasa membingungkan di awal. Banyak pemula langsung mencoba menulis kode, tetapi hasilnya error, tidak jalan, atau malah tidak tahu salahnya di mana. Masalah utamanya bukan JavaScript yang sulit, melainkan belum paham struktur dasarnya.
Artikel ini akan membahas struktur dasar JavaScript berdasarkan kondisi nyata yang sering dialami pemula, lengkap dengan contoh kesalahan umum dan cara memperbaikinya.

1. JavaScript Selalu Berjalan dari Atas ke Bawah

Kesalahan yang sering terjadi
Banyak pemula mengira JavaScript bisa membaca kode “acak” seperti manusia.

JavaScript

console.log(nama); var nama = "Andi";

Hasil: undefined

Pemula sering bertanya:

“Kenapa tidak error, tapi juga tidak keluar ‘Andi’?”

Penjelasan realistis

JavaScript membaca kode dari atas ke bawah. Saat console.log(nama) dijalankan, variabel nama belum berisi nilai.

Cara yang benar

JavaScript

var nama = "Andi"; console.log(nama);

2. Setiap Perintah Biasanya Diakhiri Titik Koma (;)

Kesalahan umum
Pemula sering lupa titik koma atau menulis kode panjang tanpa struktur jelas.

JavaScript

var umur = 20
var status = "pelajar"

JavaScript memang kadang masih jalan, tapi ini sering memicu bug di kode besar.

Praktik yang disarankan

JavaScript

var umur = 20; var status = "pelajar";

💡 Biasakan pakai titik koma agar kode rapi dan aman.

3. JavaScript Peka Terhadap Huruf Besar dan Kecil

Kesalahan paling sering

JavaScript

var nama = "Budi"; console.log(Nama); Error: Nama is not defined

Penjelasan
nama dan Nama dianggap dua variabel berbeda.

Solusi
Gunakan konsistensi:

JavaScript

var nama = "Budi";
console.log(nama);  

4. Penulisan Kurung Kurawal {} yang Sering Terlewat

Kesalahan nyata

JavaScript

if (umur > 18) console.log("Dewasa"); console.log("Boleh punya SIM");

Pemula mengira dua baris akan ikut kondisi if.
Yang sebenarnya terjadi
Hanya 1 baris pertama yang masuk kondisi if.

Penulisan yang benar

JavaScript

if (umur > 18) { console.log("Dewasa"); console.log("Boleh punya SIM"); }

5. Salah Menempatkan JavaScript di HTML

Kesalahan klasik
Menulis JavaScript sebelum elemen HTML ada.

Html

Hasil: error atau tidak muncul apa-apa.

Penyebab
JavaScript dijalankan sebelum HTML selesai dimuat.

Solusi paling aman untuk pemula
Letakkan JavaScript di bawah HTML:

Html

<h1 id="judul"></h1> <script> document.getElementById("judul").innerHTML = "Halo"; </script>

6. Mengira JavaScript Sama dengan HTML atau CSS

Kesalahan mindset
Banyak pemula mencoba menulis seperti ini:

JavaScript

<h1>Halo</h1>  

Padahal JavaScript bukan bahasa tampilan, tapi bahasa logika.

Struktur dasar JavaScript itu berisi:

Variabel
Logika (if, else)
Perulangan
Fungsi
Manipulasi elemen HTML

Contoh benar:

JavaScript

document.write("<h1>Halo</h1>");  

7. Lupa Bahwa Error Itu Normal

Realita yang sering terjadi
Pemula melihat error lalu langsung berpikir:

“Saya tidak berbakat ngoding.”

Padahal:

Programmer senior juga sering error
Bedanya, mereka tahu cara membaca error

Contoh error penting:

JavaScript

Uncaught ReferenceError
Uncaught SyntaxError

Itu bukan musuh, tapi petunjuk kesalahan.

Kesimpulan

Struktur dasar JavaScript bukan soal hafalan sintaks, tapi soal:

Urutan eksekusi
Konsistensi penulisan
Pemahaman cara kerja logika

Jika kamu sering error di awal, itu bukan tanda gagal, tapi tanda kamu sedang belajar dengan benar.

JavaScript tidak sulit — yang sulit adalah melewati fase bingung pertama.

Sejarah ECMAScript: Standar yang Membuat JavaScript Tidak Berantakan

2026-01-19T20:41:00.000+07:00

Di masa awal perkembangan web, JavaScript tumbuh dengan sangat cepat. Banyak browser membuat versinya sendiri-sendiri, sehingga kode JavaScript sering tidak konsisten dan sulit dijalankan di berbagai platform. Dahulu, agar JavaScript tidak berantakan, akhirnya dibuatlah sebuah standar resmi bernama ECMAScript oleh ECMA International.

Artikel ini akan membahas mengapa ECMAScript lahir, apa perannya, dan mengapa hingga kini ECMAScript sangat penting bagi dunia web.

Kondisi JavaScript di Masa Awal

Pada pertengahan tahun 1990-an, JavaScript dikembangkan oleh Netscape dengan nama awal Mocha, lalu LiveScript, dan akhirnya dikenal sebagai JavaScript.

Masalah mulai muncul ketika:

Browser berbeda mengimplementasikan JavaScript dengan cara berbeda

Kode yang berjalan di Netscape belum tentu berjalan di Internet Explorer

Tidak ada aturan baku tentang sintaks dan perilaku JavaScript

Akibatnya, kode JavaScript menjadi tidak konsisten, sulit dipelihara, dan rawan error.

Lahirnya ECMAScript oleh ECMA International

Untuk mengatasi kekacauan tersebut, pada tahun 1997, JavaScript distandarkan oleh sebuah organisasi internasional bernama ECMA International.

Standar ini diberi nama ECMAScript, diambil dari nama organisasi ECMA (European Computer Manufacturers Association).

Tujuan utama ECMAScript adalah:

Menyatukan aturan bahasa JavaScript
Menjadi acuan resmi bagi semua browser
Menghindari perbedaan implementasi yang ekstrem

Dengan adanya ECMAScript, semua browser wajib mengikuti spesifikasi yang sama.

Apa Itu ECMAScript?

ECMAScript adalah spesifikasi atau standar bahasa, bukan browser dan bukan library.

Artinya:

ECMAScript mendefinisikan aturan bahasa JavaScript
Browser seperti Chrome, Firefox, dan Edge mengimplementasikan standar ini
JavaScript yang kita tulis saat ini sebenarnya adalah implementasi dari ECMAScript

Singkatnya:

JavaScript adalah implementasi dari ECMAScript

Perkembangan Versi ECMAScript

Seiring waktu, ECMAScript terus berkembang agar JavaScript semakin modern dan rapi.

Beberapa versi penting:

ES3 (1999) → Versi yang lama bertahan sangat lama
ES5 (2009) → Mulai stabil dan banyak digunakan
ES6 / ES2015 → Perubahan besar (let, const, arrow function, class)
ES2016 – sekarang → Update rutin setiap tahun

Dengan standar ini, JavaScript menjadi:

Lebih konsisten
Lebih mudah dibaca
Lebih aman dan powerful

Mengapa ECMAScript Sangat Penting?

Tanpa ECMAScript:

JavaScript akan terpecah-pecah
Developer harus menulis kode berbeda untuk setiap browser
Web modern tidak akan berkembang pesat seperti sekarang

Dengan ECMAScript:

Satu kode bisa berjalan di banyak browser
Framework seperti React, Vue, dan Angular bisa berkembang
JavaScript menjadi bahasa utama web dan backend (Node.js)

Kesimpulan

Dahulu, agar JavaScript tidak berantakan dan tidak saling bertabrakan antar browser, dibuatlah standar resmi bernama ECMAScript oleh ECMA International. Standar inilah yang membuat JavaScript menjadi bahasa yang rapi, konsisten, dan terus berkembang hingga saat ini.

Tanpa ECMAScript, JavaScript mungkin tidak akan menjadi bahasa paling populer di dunia web seperti sekarang.

Sekilas Sejarah JavaScript di Netscape Navigator

2026-01-19T20:21:00.006+07:00

JavaScript pertama kali dibuat tahun 1995 oleh Brendan Eich
Awalnya bernama Mocha → LiveScript → JavaScript
Pertama kali dipakai di Netscape Navigator 2.0

Tujuan utama:

Validasi form
Interaksi sederhana (alert, confirm)
Manipulasi halaman secara sangat terbatas

⚠️ Saat itu belum ada DOM modern, belum ada addEventListener, querySelector, atau let/const.
Cara Menulis JavaScript di Netscape Navigator

Script langsung di HTML

JavaScript ditulis di dalam tag <SCRIPT>

Html

📌 Catatan penting:

LANGUAGE="JavaScript" digunakan, bukan type
Komentar  dipakai agar browser lama tidak error

Contoh Sintaks JavaScript Jadul (Era Netscape)

1. Alert Sederhana

Html

2. Manipulasi Dokumen dengan document.write()

Ini sangat umum di Netscape

Html

⚠️ Sekarang document.write() tidak direkomendasikan, tapi dulu ini normal.

3. Event Handler Inline (paling sering dipakai)

Html

✔ Tidak ada event listener terpisah
✔ Semua event langsung di atribut HTML

4. Validasi Form Sederhana

Html

📌 Akses elemen pakai:

document.formName.inputName

5. Variabel & Tipe Data (sangat sederhana)

JavaScript

var umur = 20; var nama = "Budi"; var aktif = true;

✔ Hanya var
❌ Tidak ada let, const, arrow function

6. Kondisi & Perulangan

JavaScript

if (umur > 18) { alert("Dewasa"); } for (i = 1; i <= 3; i++) { document.write(i + "<br>"); }

Keterbatasan JavaScript di Netscape

❌ Tidak ada DOM modern
❌ Tidak ada AJAX
❌ Tidak ada JSON
❌ Tidak ada module
❌ Tidak ada async/await
✔ Fokus pada interaksi ringan

Aturan Dasar Membuat Tampilan Website Interaktif Menggunakan JavaScript Murni

2026-01-19T10:35:00.004+07:00

JavaScript murni (Vanilla JavaScript) adalah JavaScript tanpa bantuan library atau framework seperti jQuery, React, atau Vue. Menguasai JavaScript murni sangat penting karena menjadi fondasi utama dalam membangun website yang interaktif, ringan, dan mudah dikontrol sepenuhnya oleh developer.

Artikel ini membahas aturan dasar dan prinsip penting dalam membuat tampilan website interaktif menggunakan JavaScript murni.

1. Pahami Peran JavaScript dalam Website

JavaScript berfungsi untuk:

Merespons interaksi pengguna (klik, scroll, input)
Mengubah konten HTML secara dinamis
Mengatur tampilan melalui manipulasi CSS
Mengontrol logika dan alur interaksi

Aturan utama:

JavaScript tidak menggantikan HTML dan CSS, tetapi melengkapinya.

Struktur yang sehat:

HTML → struktur
CSS → tampilan
JavaScript → interaksi

2. Selalu Mulai dari HTML yang Rapi dan Semantik

Interaktivitas yang baik dimulai dari HTML yang benar.
Gunakan:

tag yang semantik (button, nav, section, article)
atribut id dan class yang jelas

Contoh buruk:

Contoh lebih baik:

Aturan:

Jangan mencampur logika JavaScript langsung di HTML.

3. Pisahkan File JavaScript dari HTML

Gunakan file .js terpisah agar kode:

lebih bersih
mudah dirawat
lebih SEO & performa friendly

Contoh pemanggilan:

Gunakan atribut defer agar JavaScript dijalankan setelah HTML selesai dimuat.

4. Gunakan Event Listener, Bukan Inline Event

Hindari:

Gunakan:

document.getElementById('btnKlik').addEventListener('click', function () { alert('Tombol diklik'); });

Keuntungan:

kode lebih terstruktur
mudah dikembangkan
mendukung banyak event dalam satu elemen

5. Manipulasi DOM Secukupnya

DOM manipulation itu mahal secara performa.

Aturan penting:

Jangan memanipulasi DOM berulang-ulang tanpa perlu
Simpan elemen dalam variabel

Contoh efisien:

const box = document.querySelector('.box'); box.classList.add('active');

Hindari query berulang di dalam loop jika tidak perlu.

6. Gunakan Class untuk Mengatur Tampilan

Jangan mengatur style langsung lewat JavaScript.
❌ Buruk:

JavaScript

element.style.backgroundColor = 'red';

✅ Baik:

JavaScript

element.classList.add('error');

Css

.error { background-color: red; }

Prinsip:

JavaScript mengatur status, CSS mengatur tampilan.

7. Buat Interaksi yang Responsif dan Masuk Akal

Interaktif bukan berarti berlebihan.
Perhatikan:

animasi tidak terlalu lama
feedback jelas saat klik / submit
tidak membuat pengguna bingung

Contoh interaksi sederhana:

tombol disable saat proses berjalan
loading indicator
perubahan teks setelah aksi

8. Gunakan Fungsi Kecil dan Jelas

Hindari satu fungsi panjang dengan banyak tugas.
Contoh:

function showLoading() {} function hideLoading() {} function fetchData() {}

Aturan:

Satu fungsi, satu tanggung jawab.

9. Tangani Error dan Kondisi Tak Terduga

Website interaktif harus tahan terhadap error.
Contoh:

const btn = document.getElementById('btn'); if (btn) { btn.addEventListener('click', aksi); }

Jangan menganggap semua elemen selalu ada.

10. Optimalkan untuk Performa dan Pengguna

Beberapa prinsip penting:

gunakan requestAnimationFrame untuk animasi
debounce event scroll dan resize
hindari setInterval berlebihan

Website cepat = pengalaman pengguna lebih baik.

11. Uji di Berbagai Perangkat dan Browser

JavaScript murni harus diuji:

mobile & desktop
Chrome, Firefox, Edge
resolusi kecil

Gunakan console.log() dan DevTools untuk debugging.

Kesimpulan

Membuat tampilan website interaktif dengan JavaScript murni bukan soal kode yang rumit, tetapi soal disiplin struktur, pemisahan tugas, dan fokus pada pengalaman pengguna.
Jika kamu menguasai JavaScript murni dengan baik:

framework akan jauh lebih mudah dipelajari
website lebih ringan
kontrol penuh ada di tanganmu

Kuasai dasarnya, maka interaktivitas tingkat lanjut akan mengikuti.

Belajar Web Programming JavaScript

2026-01-18T10:15:00.005+07:00

Web programming JavaScript adalah salah satu fondasi utama dalam pengembangan website modern. Hampir semua website interaktif saat ini menggunakan JavaScript untuk memberikan pengalaman pengguna yang dinamis, cepat, dan responsif. Dari sekadar validasi form hingga aplikasi web kompleks, JavaScript memiliki peran yang sangat besar.

Apa Itu Web Programming JavaScript?

JavaScript adalah bahasa pemrograman yang berjalan di sisi klien (client-side) maupun sisi server (server-side). Dalam konteks web programming, JavaScript digunakan untuk mengontrol perilaku halaman web agar dapat berinteraksi dengan pengguna secara real-time.

Fungsi Utama JavaScript di Web

Membuat halaman web interaktif
Memanipulasi elemen HTML dan CSS
Mengelola event seperti klik dan input
Menghubungkan web dengan API

JavaScript Client-Side vs Server-Side

Pada client-side, JavaScript berjalan di browser pengguna untuk meningkatkan interaksi. Sementara pada server-side, JavaScript dijalankan menggunakan runtime seperti Node.js untuk mengelola logika backend.

Teknologi Pendukung JavaScript

Dalam web programming JavaScript, ada beberapa teknologi yang umum digunakan bersama.

HTML dan CSS

HTML berfungsi sebagai struktur, CSS sebagai tampilan, dan JavaScript sebagai logika interaksi. Ketiganya saling melengkapi dalam membangun website.

Framework dan Library JavaScript

Beberapa framework dan library populer antara lain:

React.js
Vue.js
Angular
jQuery

Framework ini membantu developer membangun aplikasi web dengan lebih cepat dan terstruktur.

Keuntungan Menguasai Web Programming JavaScript

Menguasai JavaScript memberikan banyak keuntungan, baik dari sisi karier maupun pengembangan produk.

Permintaan Tinggi di Dunia Kerja Fleksibel dan Multi-Platform

JavaScript adalah salah satu skill paling dicari di industri IT karena hampir semua perusahaan digital membutuhkannya.

JavaScript dapat digunakan untuk web, backend, mobile app, bahkan desktop app dengan teknologi tertentu.

Tips Belajar Web Programming JavaScript

Belajar JavaScript sebaiknya dilakukan secara bertahap dan konsisten.

Mulai dari Dasar

Pahami konsep dasar seperti variabel, fungsi, dan kondisi sebelum masuk ke framework.

Praktik dengan Proyek Nyata

Membuat proyek sederhana seperti kalkulator atau to-do list akan mempercepat pemahaman.

Kesimpulan

Web programming JavaScript adalah skill wajib bagi siapa pun yang ingin terjun ke dunia pengembangan web. Dengan memahami dasar hingga penerapannya, JavaScript dapat membuka banyak peluang dan membantu membangun website yang modern dan profesional.

JavaScript dan HTML: Cara Kerja, Hubungan, dan Contoh Penerapannya

2026-01-06T09:12:00.007+07:00

Saat pertama kali belajar web development, saya sempat bingung membedakan HTML dan JavaScript. Keduanya sering muncul bersamaan, tapi fungsinya ternyata sangat berbeda. Setelah sering ngoding dan trial error, barulah saya benar-benar paham bagaimana HTML dan JavaScript saling bekerja sama membangun sebuah website.

Di artikel ini, kita akan bahas dari dasar sampai contoh sederhana agar kamu tidak bingung lagi.

Apa Itu HTML?

HTML (HyperText Markup Language) adalah kerangka dasar sebuah halaman web.

HTML digunakan untuk:

Membuat struktur halaman
Menampilkan teks, gambar, tombol, link
Menentukan elemen seperti header, paragraf, dan form

Contoh HTML Sederhana

JavaScript

Html <!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <h1>Hello World</h1> <p>Ini adalah paragraf.</p> </body> </html>

Tanpa HTML, browser tidak tahu apa yang harus ditampilkan.

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang membuat website menjadi interaktif dan dinamis.

JavaScript digunakan untuk:

Merespons klik tombol
Mengubah isi HTML
Menampilkan popup
Validasi form
Membuat animasi

Contoh JavaScript Sederhana

JavaScript

alert("Halo, selamat datang!");

Saat pertama kali mencoba ini, saya langsung sadar:

JavaScript adalah “nyawa” interaksi di website.

Hubungan JavaScript dan HTML

HTML dan JavaScript tidak bisa dipisahkan dalam web modern.

HTML → Struktur
CSS → Tampilan
JavaScript → Interaksi

JavaScript bekerja dengan cara mengontrol dan memanipulasi elemen HTML.

Ilustrasi Sederhana

Bayangkan website seperti rumah:

HTML = rangka rumah
CSS = cat & dekorasi
JavaScript = listrik & alat elektronik

Cara JavaScript Berinteraksi dengan HTML

JavaScript berinteraksi dengan HTML melalui DOM (Document Object Model).

Contoh Mengubah HTML dengan JavaScript

Html

<p id="teks">Halo</p> <button onclick="ubahTeks()">Klik Saya</button> <script> function ubahTeks() { document.getElementById("teks").innerHTML = "Teks Berubah!"; } </script>

Saat tombol diklik, JavaScript:

Mencari elemen HTML
Mengubah isinya
Browser menampilkan perubahan secara langsung

Cara Menyisipkan JavaScript ke dalam HTML

Ada 3 cara umum menyisipkan JavaScript ke HTML.

1. JavaScript di dalam Tag <script>

Html

2. JavaScript di File Terpisah

Html

<script src="script.js"></script>

Cara ini paling direkomendasikan saat proyek mulai besar.

3. JavaScript Langsung di Atribut HTML

Html

<button onclick="alert('Halo!')">Klik</button>

Kesalahan Umum Pemula Saat Menggabungkan HTML dan JavaScript

Berdasarkan pengalaman pribadi, ini beberapa kesalahan yang sering terjadi:

JavaScript Dijalanakan Sebelum HTML Siap

Solusi:

Html

Salah ID atau Nama Elemen

JavaScript case-sensitive, jadi:

Html

id="Teks"

tidak sama dengan:

JavaScript

getElementById("teks")

Kenapa Harus Paham HTML Sebelum JavaScript?

Tanpa HTML:

JavaScript tidak punya objek untuk dikontrol
Sulit memahami DOM
Debugging jadi membingungkan

Itulah kenapa di roadmap ini, HTML dan JavaScript dipelajari beriringan.

Penutup

JavaScript dan HTML adalah fondasi utama web development.

HTML membentuk struktur, JavaScript memberi interaksi.

Kalau kamu sudah paham hubungan keduanya:

Belajar DOM jadi lebih mudah
Ngoding terasa lebih masuk akal
Tidak sekadar copy-paste kode

Di artikel selanjutnya, kita akan mulai Keyword Penting JavaScript yang Wajib Dipahami

Keyword Penting JavaScript yang Wajib Dipahami Pemula

2026-01-05T11:31:00.003+07:00

Keyword Penting JavaScript yang Wajib Dipahami Pemula

Saat pertama kali belajar JavaScript, saya sempat bingung melihat banyak kata berwarna berbeda di editor kode.

Ternyata kata-kata tersebut adalah keyword JavaScript, yaitu kata khusus yang punya arti tertentu dan tidak boleh digunakan sembarangan.

Di artikel ini, kita akan membahas keyword JavaScript yang paling sering dipakai, khususnya untuk pemula.

Apa Itu Keyword dalam JavaScript?

Keyword JavaScript adalah kata yang sudah dipesan oleh JavaScript dan memiliki fungsi khusus.

Contoh keyword:

var
let
const
if
for
function

Pengalaman pribadi:

Waktu awal belajar, saya pernah coba bikin variabel bernama function. Hasilnya? Error 😅

Sejak itu saya sadar, keyword tidak boleh dipakai sebagai nama variabel.

Mengapa Keyword JavaScript Penting Dipelajari?

Alasan kenapa keyword itu penting:

Tidak boleh digunakan sebagai nama variabel
Menentukan alur logika program
Digunakan hampir di semua kode JavaScript
Membantu membaca dan memahami kode orang lain

Kalau kamu hafal keyword, proses belajar JavaScript akan jauh lebih cepat.

Daftar Keyword Penting JavaScript untuk Pemula

Berikut keyword JavaScript yang paling sering muncul di tahap awal belajar.

Keyword var, let, dan const

Digunakan untuk membuat variabel.

JavaScript

var nama = "Budi";
let umur = 20;
const negara = "Indonesia";

Penjelasan singkat:

var → cara lama (jarang dipakai sekarang)
let → variabel yang nilainya bisa diubah
const → variabel tetap (tidak bisa diubah)

Keyword if, else, dan else if

Digunakan untuk percabangan logika.

JavaScript

if (umur >= 18) { console.log("Dewasa"); } else { console.log("Belum dewasa"); }

Sangat sering dipakai saat membuat validasi.

Keyword for dan while

Digunakan untuk perulangan (looping).

JavaScript

for (let i = 1; i <= 5; i++) { console.log(i); }

Looping membantu kita menulis kode lebih singkat dan efisien.

Keyword function

Digunakan untuk membuat fungsi.

JavaScript

function sapa() { console.log("Halo JavaScript!"); }

Fungsi membantu memecah kode menjadi bagian kecil yang rapi.

Keyword return

Digunakan untuk mengembalikan nilai dari fungsi.

JavaScript

function tambah(a, b) { return a + b; }

Tanpa return, fungsi tidak mengirimkan hasil apa pun.

Keyword break dan continue

Digunakan di dalam perulangan.

JavaScript

for (let i = 1; i <= 5; i++) { if (i === 3) { break; } console.log(i); }

break → menghentikan loop

continue → melewati satu iterasi

Keyword try, catch, dan finally

Digunakan untuk menangani error.

JavaScript

try { console.log(data); } catch (error) { console.log("Terjadi error"); }

Ini sangat membantu saat kode kita bermasalah tapi tidak ingin program langsung berhenti.

Keyword JavaScript Tidak Boleh Digunakan Sebagai Nama Variabel

Contoh yang salah ❌:

JavaScript

let function = "tes";

Contoh yang benar ✅:

JavaScript

let fungsi = "tes";

📌 Tips:

Gunakan nama variabel yang jelas dan tidak bentrok dengan keyword.

Tips Menghafal Keyword JavaScript

Beberapa tips berdasarkan pengalaman ngoding:

Jangan dihafal semua sekaligus
Praktik langsung di editor
Gunakan berulang kali
Baca dokumentasi dan contoh kode

Percaya deh, makin sering ngoding, keyword akan hafal sendiri.

Kesimpulan

Keyword JavaScript adalah fondasi penting yang wajib dipahami oleh pemula.

Dengan mengenal keyword seperti var, let, const, if, for, dan function, kamu sudah selangkah lebih dekat menjadi JavaScript developer.

Di roadmap berikutnya, keyword ini akan sering muncul, jadi pastikan kamu benar-benar memahaminya 😊

Tipe Data JavaScript Lengkap untuk Pemula (Pengalaman Nyata Saat Ngoding)

2026-01-04T22:57:00.001+07:00

Apa Itu Tipe Data dalam JavaScript?

Waktu pertama kali belajar JavaScript, saya sempat bingung kenapa hasil kode tidak sesuai harapan.

Ternyata masalahnya bukan di logika, tapi di tipe data yang saya pakai.

Dari situ saya sadar, memahami tipe data JavaScript itu wajib hukumnya sebelum lanjut ke materi yang lebih jauh. Di artikel ini, saya akan jelaskan tipe data JavaScript berdasarkan pengalaman ngoding langsung, lengkap dengan contoh sederhana.

Tipe data adalah jenis nilai yang disimpan di dalam sebuah variabel.

Contoh sederhana:

JavaScript

let nama = "Budi"; let umur = 20;khkkkklll

"Budi" → tipe data String
20 → tipe data Number

Saat ngoding, JavaScript akan memperlakukan data berbeda tergantung tipenya. Kalau salah tipe, hasilnya bisa bikin pusing 😅

Jenis-Jenis Tipe Data JavaScript

Secara umum, tipe data JavaScript terbagi menjadi:

Primitive
Non-Primitive (Reference Type)

Tipe Data Primitive JavaScript

String

String adalah teks yang ditulis dengan tanda kutip.

JavaScript

let pesan = "Belajar JavaScript itu seru";

📌 Pengalaman saya:

Pernah lupa pakai tanda kutip, hasilnya error dan saya kira JavaScript-nya rusak 😅

Number

Number digunakan untuk angka, baik bulat maupun desimal.

JavaScript

let nilai = 90; let berat = 55.5;

📌 Di JavaScript, tidak ada int atau float, semuanya dianggap Number.

Boolean

Boolean hanya punya dua nilai:

true
false

JavaScript

let isLogin = true;

📌 Biasanya saya pakai Boolean untuk:

validasi form
pengecekan kondisi (if)

Undefined

undefined berarti variabel ada, tapi belum diberi nilai.

JavaScript

let alamat; console.log(alamat); // undefined

📌 Ini sering muncul tanpa sengaja saat lupa mengisi variabel.

Null

null artinya kosong secara sengaja.

JavaScript

let dataUser = null;

📌 Bedanya dengan undefined:

undefined → tidak sengaja
null → sengaja dikosongkan

Symbol (Sekilas)

Symbol jarang dipakai pemula, tapi tetap penting diketahui.

JavaScript

let id = Symbol("id");

📌 Biasanya dipakai untuk nilai unik agar tidak bentrok.

Tipe Data Non-Primitive (Reference Type)

Array

Array digunakan untuk menyimpan banyak data dalam satu variabel.

JavaScript

let buah = ["Apel", "Jeruk", "Mangga"];

📌 Waktu pertama kali pakai array, saya baru sadar betapa ribetnya variabel kalau tidak pakai array.

Object

Object menyimpan data dalam bentuk key dan value.

JavaScript

let user = { nama: "Andi", umur: 21, aktif: true };

📌 Object ini sering saya pakai saat bikin:

data user
konfigurasi
response API

Function (Termasuk Tipe Data)

Function di JavaScript juga dianggap tipe data.

JavaScript

function sapa() { console.log("Halo!"); }

📌 Ini unik di JavaScript dan sering bikin kaget pemula.

Cara Mengetahui Tipe Data (typeof)

Saat bingung dengan tipe data, saya sering pakai typeof.

JavaScript

typeof "Halo"; // string typeof 10; // number typeof true; // boolean

📌 Catatan penting:

JavaScript

typeof null; // object (bug lama JavaScript)  

Ini bukan salah kamu, tapi memang bug bawaan JavaScript 😄

Kesalahan Umum Pemula Saat Pakai Tipe Data

Berdasarkan pengalaman saya, ini kesalahan yang sering terjadi:

Mengira "10" sama dengan 10
Lupa tanda kutip pada string
Bingung antara null dan undefined
Salah mengolah data array dan object

Kesimpulan

Memahami tipe data JavaScript itu pondasi utama saat ngoding.

Saya sendiri baru benar-benar nyaman ngoding setelah paham:

kapan pakai string
kapan pakai number
kapan pakai array atau object

Kalau kamu masih pemula, jangan buru-buru lanjut ke framework sebelum benar-benar paham tipe data.

Case Sensitive pada JavaScript: Pengertian, Contoh, dan Kesalahan Umum

2026-01-04T19:44:00.004+07:00

🧩 Case Sensitive pada JavaScript

Saat belajar JavaScript, kamu mungkin pernah mengalami error padahal kode terlihat benar. Salah satu penyebab paling umum adalah case sensitive. JavaScript sangat memperhatikan huruf besar dan huruf kecil, sehingga perbedaan kecil bisa menyebabkan error.

Artikel ini akan membahas apa itu case sensitive, contoh penerapannya, serta kesalahan yang sering dilakukan pemula.

🧩 Apa Itu Case Sensitive?

Case sensitive adalah kondisi di mana bahasa pemrograman membedakan huruf besar (uppercase) dan kecil (lowercase).

Di JavaScript:

nama
Nama
NAMA

👉 Dianggap sebagai tiga hal yang berbeda

🧩 Contoh Case Sensitive pada JavaScript

Case Sensitive pada Variabel

JavaScript

let nama = "Andi"; let Nama = "Budi"; console.log(nama); console.log(Nama);

📌 Hasilnya:

nama → Andi
Nama → Budi

Walaupun mirip, JavaScript menganggapnya dua variabel berbeda.

🧩 Case Sensitive pada Function

JavaScript

function sapa() { console.log("Halo!"); } Sapa(); // Error

❌ Error terjadi karena:

Function yang dibuat bernama sapa
Yang dipanggil Sapa

Huruf S besar dan kecil berbeda.

🧩 Case Sensitive pada Keyword JavaScript

Keyword JavaScript harus ditulis dengan huruf kecil.

JavaScript

let angka = 10;

If (angka > 5) {
  console.log("Benar");
}

❌ Salah

Penulisan yang benar:

JavaScript

if (angka > 5) {
  console.log("Benar");
}

🧩 Contoh Kesalahan Umum Akibat Case Sensitive

Salah Nama Variabel

JavaScript

let totalHarga = 1000;
console.log(totalharga);

❌ Error karena:

totalHarga ≠ totalharga

Salah Penulisan Method

JavaScript

console.Log("Hello");

❌ Salah

Penulisan yang benar:

JavaScript

console.log("Hello");

🧩 Tips Menghindari Error Case Sensitive

Gunakan Konsisten Penamaan

Gunakan camelCase untuk variabel dan function

Contoh:

JavaScript

let totalBelanja;
function hitungTotal() {}

🧩 Biasakan Auto Complete Editor

Gunakan editor seperti VS Code agar:

Nama variabel otomatis
Mengurangi salah ketik huruf besar/kecil

🧩 Perhatikan Error Message di Console

JavaScript biasanya menampilkan pesan seperti:

is not defined
is not a function

Pesan ini sering muncul karena kesalahan case sensitive.

🧩 Kesimpulan

JavaScript adalah bahasa pemrograman yang case sensitive, sehingga:

Huruf besar dan kecil sangat berpengaruh
Salah satu penyebab error paling umum bagi pemula
Harus konsisten dalam penulisan kode

Dengan memahami konsep ini, kamu bisa menghindari banyak error kecil namun membingungkan.

Aturan Penulisan JavaScript: Panduan Dasar agar Kode Rapi & Bebas Error

2026-01-04T17:03:00.002+07:00

Pendahuluan

JavaScript adalah bahasa pemrograman yang sangat fleksibel, namun jika tidak mengikuti aturan penulisan yang benar, kode bisa menjadi sulit dibaca dan rawan error.

Pada artikel ini, kita akan membahas aturan penulisan JavaScript yang wajib dipahami oleh pemula agar kode lebih rapi, konsisten, dan profesional.

🧩 Aturan Dasar Penulisan JavaScript

JavaScript Bersifat Case Sensitive

JavaScript membedakan huruf besar dan kecil.

JavaScript

let nama = "Andi"; let Nama = "Budi";

nama dan Nama dianggap variabel yang berbeda.

Penulisan Statement di JavaScript

Setiap perintah dalam JavaScript disebut statement.

JavaScript

console.log("Belajar JavaScript");

Umumnya satu statement ditulis dalam satu baris.

Penggunaan Titik Koma (;)

Titik koma digunakan untuk mengakhiri statement.

JavaScript

let umur = 20; console.log(umur);

Titik koma opsional, tetapi sangat disarankan untuk menghindari bug.

🧩 Aturan Penulisan Variabel

Nama Variabel Harus Jelas

Gunakan nama variabel yang mudah dipahami.

JavaScript

let totalHarga; let jumlahSiswa;

❌ Hindari:

JavaScript

let x; let a1;

Tidak Boleh Menggunakan Kata Kunci

Variabel tidak boleh menggunakan keyword JavaScript.

❌ Contoh salah:

JavaScript

let function = "test";

Aturan Penamaan Variabel

Tidak boleh diawali angka
Tidak boleh menggunakan spasi
Boleh menggunakan _ dan $

JavaScript

let nama_lengkap; let $harga;

🧩 Aturan Penulisan Blok Kode

Penggunaan Kurung Kurawal {}

Blok kode digunakan pada if, for, function, dll.

JavaScript

if (nilai > 70) { console.log("Lulus"); }

Indentasi Kode

Indentasi membuat kode lebih rapi dan mudah dibaca.

JavaScript

function sapa() { let nama = "Ani"; console.log(nama); }

Gunakan 2 atau 4 spasi secara konsisten.

🧩 Aturan Penulisan Komentar

Komentar Satu Baris

JavaScript

// Ini komentar satu baris

Komentar Multi Baris

JavaScript

/* Ini komentar lebih dari satu baris */

Komentar berguna untuk:

Menjelaskan kode
Catatan pribadi
Menonaktifkan kode sementara

🧩 Aturan Penulisan String

Menggunakan Petik (' " `)

JavaScript mendukung:

Petik satu '
Petik dua "
Backtick `

JavaScript

let nama = "Budi"; let salam = 'Halo'; let pesan = `Halo ${nama}`;

🧩 Praktik Terbaik dalam Menulis JavaScript

Gunakan Kode yang Konsisten

Gaya penulisan sama
Spasi rapi
Nama variabel jelas

Hindari Kode Berantakan

Kode rapi:

JavaScript

let a = 10; let b = 20; let hasil = a + b;

Kode tidak rapi:

JavaScript

let a=10;let b=20;let hasil=a+b;

Kesimpulan

Memahami aturan penulisan JavaScript adalah langkah penting sebelum masuk ke materi yang lebih lanjut. Dengan menulis kode yang rapi, konsisten, dan sesuai aturan, kamu akan:

Lebih mudah memahami kode sendiri
Menghindari error
Terlihat lebih profesional

Console.log dan Debug Awal JavaScript

2026-01-03T15:37:00.005+07:00

Pendahuluan

Saat belajar JavaScript, kamu pasti pernah bertanya:

“Kenapa kodenya tidak jalan, padahal tidak ada error?”

Di sinilah console.log dan teknik debug awal menjadi senjata utama seorang programmer. Hampir semua developer JavaScript — dari pemula sampai profesional — menggunakan console.log() setiap hari.

Pada artikel ini, kamu akan belajar:

Apa itu console.log
Cara menggunakannya
Fungsi console lain yang berguna
Cara debug error JavaScript paling dasar

Apa Itu console.log?

console.log() adalah perintah JavaScript untuk menampilkan informasi ke Console browser.

Console biasanya digunakan untuk:

Melihat nilai variabel
Mengecek alur program
Mencari kesalahan (bug)
Memahami proses eksekusi kode

Console tidak tampil di halaman web, tapi muncul di Developer Tools browser.

Cara Membuka Console Browser

Gunakan shortcut berikut:

Chrome / Edge pakai Ctrl + Shift + I → Tab Console

Firefox pakai Ctrl + Shift + K

Mac pakai Cmd + Option + I

Contoh Dasar Console.log

JavaScript

console.log("Halo Dunia!");

Hasil di console:

JavaScript

Halo Dunia!

Menampilkan Nilai Variabel

JavaScript

let nama = "BlokCilik"; let umur = 10; console.log(nama); console.log(umur);

Output:

BlokCilik 10

👉 Ini sangat berguna untuk memastikan isi variabel sudah benar atau belum.

Debug Sederhana Menggunakan console.log

Contoh kode bermasalah:

JavaScript

let hasil = 10 + x; console.log(hasil); Error:

Error:

ReferenceError: x is not defined

Dengan console, kamu langsung tahu:

Variabel x belum dideklarasikan
Lokasi error ditampilkan jelas

Menampilkan Banyak Data Sekaligus

JavaScript

let a = 5; let b = 10; console.log("Nilai a:", a, "Nilai b:", b);

Output:

Nilai a: 5 Nilai b: 10

Jenis Console Lain yang Berguna

Selain console.log, JavaScript punya beberapa console penting:

console.error()

Menampilkan pesan error:

JavaScript

console.error("Terjadi kesalahan!");

console.warn()

Menampilkan peringatan:

JavaScript

console.warn("Ini hanya peringatan");

console.info()

Menampilkan informasi:

JavaScript

console.info("Informasi program");

Debug Alur Program

Gunakan console.log untuk mengecek apakah kode dijalankan atau tidak.

JavaScript

console.log("Program dimulai"); let angka = 5; if (angka > 3) { console.log("Angka lebih besar dari 3"); } console.log("Program selesai");

Dengan cara ini, kamu bisa:

Mengetahui kode berhenti di bagian mana
Melihat logika berjalan sesuai rencana atau tidak

Kesalahan Umum Pemula

❌ Mengira console.log tampil di halaman web
❌ Lupa membuka tab Console
❌ Tidak menghapus console.log setelah selesai debug

👉 Pada project besar, console berlebihan bisa membuat kode berantakan.

Kapan Harus Menggunakan console.log?

Gunakan saat:

Belajar JavaScript
Mengecek nilai variabel
Mencari bug
Memahami alur kode

Kurangi penggunaan saat:

Website sudah production
Kode siap dipublikasikan

Kesimpulan

console.log adalah alat debug paling dasar dan paling penting dalam JavaScript.

Tanpa console, kamu akan kesulitan memahami apa yang terjadi di balik layar.

💡 Ingat:

Kalau kodenya error, jangan panik — buka console!

Comment di JavaScript: Fungsi, Jenis, dan Cara Penggunaan yang Benar

2026-01-03T11:01:00.001+07:00

Apa Itu Comment di JavaScript

Comment di JavaScript adalah baris kode yang tidak dijalankan oleh program, melainkan digunakan untuk memberi catatan atau penjelasan pada kode.

Comment sangat penting terutama saat:

Belajar JavaScript
Bekerja dalam tim
Membaca ulang kode lama

Google juga menyukai kode yang rapi dan mudah dipahami, terutama pada artikel tutorial.

Fungsi Comment di JavaScript

Berikut beberapa fungsi utama comment:

Menjelaskan tujuan kode
Memberi catatan penting untuk programmer lain
Menonaktifkan sementara kode tertentu (debugging)
Membuat kode lebih rapi dan terstruktur

📌 Kesimpulan:

Kode tanpa comment akan sulit dipahami, terutama jika jumlah barisnya banyak.

Jenis Comment di JavaScript

Di JavaScript, ada 2 jenis comment utama.

1. Single-Line Comment

Single-line comment digunakan untuk satu baris komentar.

Contoh:

JavaScript

// Ini adalah comment satu baris let nama = "BlokCilik";

📝 Keterangan:

Diawali dengan //
Semua teks setelah // tidak akan dijalankan

2. Multi-Line Comment

Multi-line comment digunakan untuk lebih dari satu baris.

Contoh:

JavaScript

/* Ini adalah comment lebih dari satu baris di JavaScript */ let umur = 10;

📝 Keterangan:

Dimulai dengan /*
Diakhiri dengan */

Contoh Penggunaan Comment di JavaScript

Comment sering digunakan untuk menjelaskan logika program.

Contoh:

JavaScript

// Menyimpan nilai panjang dan lebar let panjang = 10; let lebar = 5; // Menghitung luas persegi panjang let luas = panjang * lebar; console.log(luas);

Dengan comment, orang lain akan langsung paham maksud dari setiap bagian kode.

Comment untuk Debugging

Saat terjadi error, comment bisa digunakan untuk menonaktifkan sementara kode.

Contoh:

JavaScript

let angka1 = 10; // let angka2 = 5; console.log(angka1);

Teknik ini sering digunakan programmer saat mencari bug.

Kesalahan Umum Saat Menggunakan Comment

Beberapa kesalahan yang sering dilakukan pemula:

Terlalu banyak comment yang tidak perlu
Comment tidak sesuai dengan isi kode
Menjadikan comment sebagai pengganti penulisan kode yang jelas

📌 Tips:

Comment harus menjelaskan “kenapa”, bukan hanya “apa”.

Kesimpulan

Comment di JavaScript adalah bagian penting dalam penulisan kode yang baik. Dengan memahami jenis dan cara penggunaannya, kode akan lebih mudah dipahami, dirawat, dan dikembangkan.

💡 Biasakan menulis comment sejak awal belajar JavaScript.

Statement dan Expression dalam JavaScript

2026-01-03T08:45:00.000+07:00

Memahami Perintah dan Nilai Dasar Program JavaScript

Saat mulai belajar JavaScript, kamu akan sering menemui dua istilah penting: statement dan expression. Keduanya adalah fondasi utama dalam menulis kode JavaScript. Jika kamu belum memahaminya, program bisa terasa membingungkan.

Tenang 🙂

Di artikel ini kita akan membahasnya pelan-pelan dan dengan contoh sederhana.

Apa Itu Statement dalam JavaScript?

Statement adalah perintah yang dijalankan oleh JavaScript.

👉 Ibarat bahasa manusia, statement itu seperti kalimat perintah.

Contoh Statement Sederhana

JavaScript

let nama = "Andi";

Kode di atas adalah statement, karena:

JavaScript diperintah untuk membuat variabel
Lalu menyimpan nilai "Andi" ke dalamnya

Contoh lainnya:

JavaScript

console.log("Halo Dunia");

Artinya:

JavaScript, tampilkan teks "Halo Dunia" ke console.

Jenis-Jenis Statement dalam JavaScript

Berikut beberapa statement yang paling sering digunakan pemula:

1. Declaration Statement

Digunakan untuk membuat variabel.

JavaScript

let umur = 20; const pi = 3.14;

2. Assignment Statement

Memberi atau mengubah nilai variabel.

JavaScript

umur = 21;

3. Conditional Statement

Digunakan untuk pengambilan keputusan.

JavaScript

if (umur >= 18) { console.log("Sudah dewasa"); }

4. Loop Statement

Digunakan untuk perulangan.

JavaScript

for (let i = 1; i <= 5; i++) { console.log(i); }

Apa Itu Expression dalam JavaScript?

Expression adalah kode yang menghasilkan nilai.

👉 Jika statement adalah perintah, maka expression adalah sesuatu yang bisa dihitung atau dievaluasi.

Contoh Expression

JavaScript

5 + 3

Hasilnya adalah:

JavaScript

8

Contoh lain:

JavaScript

umur > 18

Hasilnya:

JavaScript

true

Expression di Dalam Statement

Dalam JavaScript, expression sering berada di dalam statement.

Contoh:

JavaScript

let hasil = 10 * 2;

Penjelasan:

10 * 2 → expression
let hasil = ... → statement

Contoh lain:

JavaScript

if (nilai >= 75) { console.log("Lulus"); } nilai >= 75 → expression if (...) { ... } → statement

Jenis-Jenis Expression

1. Arithmetic Expression

JavaScript

10 + 5 20 - 3 4 * 2 8 / 2

2. Comparison Expression

JavaScript

5 > 3 10 == 10 7 !== 5

3. Logical Expression

JavaScript

true && false
true || false
!true

4. Function Expression

JavaScript

let sapa = function() { return "Halo!"; };

Memahami statement dan expression akan membantumu:

Lebih mudah membaca kode orang lain
Tidak bingung saat error muncul
Lebih cepat paham kondisi, logika, dan perulangan
Siap masuk ke materi JavaScript tingkat lanjut

Kesimpulan

Statement adalah perintah yang dijalankan JavaScript
Expression adalah kode yang menghasilkan nilai
Keduanya saling berkaitan dan tidak bisa dipisahkan
Hampir semua program JavaScript dibangun dari kombinasi statement dan expression

Struktur Dasar Program JavaScript (Wajib Dipahami Pemula)

2026-01-02T23:21:00.000+07:00

Saat mulai belajar JavaScript, banyak pemula langsung menulis kode tanpa memahami struktur dasar program JavaScript. Akibatnya, kode sering error, sulit dibaca, dan membingungkan saat dikembangkan.

Di artikel ini, kita akan membahas susunan dasar kode JavaScript, mulai dari penulisan statement, komentar, hingga blok kode yang benar. Artikel ini sangat penting sebagai pondasi sebelum masuk ke variabel, function, dan logika program.

Apa Itu Struktur Dasar Program JavaScript?

Struktur dasar program JavaScript adalah aturan dan susunan penulisan kode agar JavaScript bisa dijalankan dengan benar oleh browser atau JavaScript engine.

Struktur ini meliputi:

Statement (perintah)
Comment (komentar)
Block kode
Penulisan titik koma
Urutan eksekusi kode

1. Statement (Pernyataan JavaScript)

Statement adalah instruksi yang dijalankan oleh JavaScript.

Contoh statement sederhana:

JavaScript

console.log("Hello JavaScript");

📌 Penjelasan:

console.log() → perintah untuk menampilkan teks
"Hello JavaScript" → data yang ditampilkan

Satu baris kode = satu statement.

2. Titik Koma (Semicolon)

JavaScript menggunakan titik koma (;) untuk mengakhiri statement.

Contoh:

JavaScript

let nama = "Andi"; let umur = 20;

💡 Catatan:

JavaScript bisa berjalan tanpa titik koma
Tapi sangat disarankan tetap menggunakannya agar kode lebih rapi dan aman dari error

3. Komentar (Comments)

Komentar adalah bagian kode yang tidak dijalankan oleh JavaScript. Biasanya digunakan untuk:

Penjelasan kode
Catatan
Menonaktifkan kode sementara

a. Komentar Satu Baris

JavaScript

// Ini adalah komentar satu baris console.log("Belajar JavaScript");

b. Komentar Multi Baris

JavaScript

/* Ini adalah komentar lebih dari satu baris */

📌 Tips SEO & Coding:

Biasakan menulis komentar agar kode mudah dipahami saat dibaca ulang.

4. Blok Kode (Code Block)

Blok kode adalah sekumpulan statement yang dibungkus dengan { }.

Contoh:

JavaScript

if (true) { console.log("Kode ini dijalankan"); }

Blok kode biasanya digunakan pada:

if
for
while
function

5. Penulisan Case-Sensitive

JavaScript bersifat case-sensitive, artinya:

JavaScript

nama Nama NAMA

👉 Ketiganya dianggap berbeda

Contoh error umum:

JavaScript

let nama = "Budi"; console.log(Nama); // Error

📌 Kesimpulan:

Huruf besar dan kecil sangat berpengaruh di JavaScript.

6. Urutan Eksekusi Program

JavaScript dijalankan dari atas ke bawah, baris demi baris.

Contoh:

JavaScript

console.log("Baris pertama"); console.log("Baris kedua"); console.log("Baris ketiga");

Hasil:

Baris pertama Baris kedua Baris ketiga

⚠️ Jika ada error di tengah kode, baris setelahnya tidak akan dijalankan.

7. Struktur Dasar Program JavaScript Lengkap

Berikut contoh struktur dasar program JavaScript yang rapi dan benar:

JavaScript

// Komentar: Program JavaScript sederhana let nama = "Andi"; let umur = 20; if (umur >= 18) { console.log(nama + " sudah dewasa"); } else { console.log(nama + " belum dewasa"); }

Kesalahan Umum Pemula

❌ Lupa tanda petik
❌ Salah huruf besar/kecil
❌ Kurung kurawal tidak ditutup
❌ Salah urutan penulisan

Semua kesalahan ini bisa dihindari dengan memahami struktur dasar.

Kesimpulan

Struktur dasar program JavaScript adalah pondasi utama sebelum masuk ke materi yang lebih kompleks. Dengan memahami:

Statement
Komentar
Blok kode
Urutan eksekusi

kamu akan lebih mudah belajar JavaScript ke level berikutnya.

Menjalankan JavaScript di VS Code

2026-01-02T20:02:00.002+07:00

Panduan Lengkap untuk Pemula

Setelah memahami dasar JavaScript dan cara menjalankannya di browser, langkah selanjutnya yang wajib dipelajari adalah menjalankan JavaScript menggunakan VS Code. VS Code (Visual Studio Code) adalah code editor gratis, ringan, dan sangat populer di kalangan web developer.

Dengan VS Code, kamu bisa:

Menulis kode JavaScript dengan rapi
Menjalankan JavaScript tanpa browser
Belajar JavaScript layaknya developer profesional

Artikel ini akan membahas langkah demi langkah menjalankan JavaScript di VS Code, khusus untuk pemula.

Apa Itu VS Code?

Visual Studio Code (VS Code) adalah text editor buatan Microsoft yang mendukung banyak bahasa pemrograman, termasuk JavaScript.

Keunggulan VS Code:

Gratis dan open source
Ringan dan cepat
Mendukung ekstensi
Cocok untuk pemula hingga profesional

Persiapan Menjalankan JavaScript di VS Code

Sebelum mulai, pastikan kamu sudah memiliki:

VS Code terinstall
Browser (Chrome / Edge / Firefox)
(Opsional) Node.js untuk menjalankan JavaScript tanpa browser

💡 Jika kamu masih pemula, jangan khawatir. Kita mulai dari cara paling mudah.

Cara Menjalankan JavaScript di VS Code Menggunakan Browser

Ini adalah cara paling sederhana dan cocok untuk pemula.

1. Buat Folder Proyek

Buat folder baru, misalnya:

belajar-javascript

Lalu buka folder tersebut di VS Code:

Klik File → Open Folder
Pilih folder belajar-javascript

2. Buat File HTML

Buat file baru dengan nama:

index.html

Isi dengan kode berikut:

Html

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Belajar JavaScript</title> </head> <body> <h1>Belajar JavaScript di VS Code</h1> <script> console.log("Hello JavaScript!"); </script> </body> </html>

3. Jalankan di Browser

Klik kanan pada index.html
Pilih Open with Browser
Tekan F12 → Console

Jika berhasil, akan muncul:

Hello JavaScript!

🎉 Selamat! JavaScript kamu sudah berjalan.

Menjalankan JavaScript dengan File .js Terpisah

Agar kode lebih rapi, sebaiknya JavaScript dipisahkan dari HTML.

1. Buat File JavaScript

Buat file baru:

JavaScript

script.js

Isi dengan:

JavaScript

alert("JavaScript berjalan dari file terpisah!");
console.log("Belajar JavaScript di VS Code");

2. Hubungkan ke HTML

Ubah index.html menjadi:

Html

<script src="script.js"></script>

Sekarang JavaScript dijalankan dari file terpisah.

Menjalankan JavaScript di VS Code Tanpa Browser (Node.js)

Cara ini biasanya digunakan saat:

Belajar logika JavaScript
Membuat aplikasi backend
Testing kode JavaScript

1. Install Node.js

Download dan install Node.js dari situs resminya.

Setelah itu cek di terminal:

Bash

node -v

Jika versi muncul, berarti Node.js sudah terpasang.

2. Buat File JavaScript

Contoh:

app.js

Isi:

JavaScript

console.log("Halo, ini JavaScript dari Node.js");

3. Jalankan di Terminal VS Code

Buka terminal di VS Code:

Klik Terminal → New Terminal
Jalankan perintah:

Bash

node app.js

Output:

JavaScript

Halo, ini JavaScript dari Node.js

Ekstensi VS Code yang Direkomendasikan

Agar belajar JavaScript lebih nyaman:

1. Live Server

Menjalankan HTML secara otomatis di browser

2.JavaScript (ES6) Code Snippets

Mempercepat penulisan kode

3. Prettier

Merapikan kode otomatis

Kesalahan Umum Pemula

Beberapa kesalahan yang sering terjadi:

Lupa menyimpan file sebelum dijalankan
Salah penamaan file .js
Script tidak terhubung ke HTML
Node.js belum terinstall

Tenang, ini hal yang sangat wajar saat belajar.

Kesimpulan

Menjalankan JavaScript di VS Code adalah langkah penting untuk menjadi developer JavaScript. Kamu bisa:

Menjalankan JavaScript lewat browser
Menggunakan file .js terpisah
Menjalankan JavaScript tanpa browser menggunakan Node.js

Setelah memahami ini, kamu siap masuk ke materi JavaScript yang lebih dalam 🚀

Cara Menjalankan JavaScript di Browser (Panduan Lengkap untuk Pemula)

2026-01-02T15:24:00.003+07:00

JavaScript adalah bahasa pemrograman yang langsung dijalankan oleh browser. Artinya, kamu tidak perlu menginstal software rumit untuk mulai belajar JavaScript. Cukup browser seperti Google Chrome, Firefox, atau Edge, kamu sudah bisa menulis dan menjalankan JavaScript.

Pada artikel ini, kita akan membahas berbagai cara menjalankan JavaScript di browser, mulai dari yang paling dasar hingga yang sering digunakan dalam pengembangan website.

1. Menjalankan JavaScript Menggunakan <script> di HTML

Cara paling umum dan paling dasar adalah menggunakan tag <script> di dalam file HTML.

Contoh:

Html

<!DOCTYPE html>
<html>
<head>
  <title>Belajar JavaScript</title>
</head>
<body>

<h1>Hello JavaScript</h1>

<script>
  alert("JavaScript berhasil dijalankan!");
</script>

</body>
</html>

Penjelasan:

Kode JavaScript ditulis di dalam tag <script>
Browser akan langsung mengeksekusi JavaScript saat halaman dimuat

✅ Cocok untuk pemula

❌ Kurang rapi jika kode JavaScript sudah banyak

2. Menjalankan JavaScript Menggunakan File .js (External JavaScript)

Ini adalah cara terbaik dan paling direkomendasikan.

Contoh file script.js

JavaScript

alert("Halo dari file JavaScript!");

Hubungkan ke HTML:

Html

<script src="script.js"></script>

Keuntungan:

Kode lebih rapi dan terstruktur
Mudah dikelola
Digunakan di hampir semua website profesional

3. Menjalankan JavaScript di Browser Console (Developer Tools)

Browser memiliki Console untuk menjalankan JavaScript secara langsung.

Cara membuka Console:

Windows / Linux: Ctrl + Shift + I
Mac: Cmd + Option + I
Pilih tab Console

Contoh:

JavaScript

console.log("Hello JavaScript");

Tekan Enter, dan hasilnya langsung muncul.

✅ Sangat cocok untuk belajar dan testing

✅ Digunakan oleh developer profesional

4. Menjalankan JavaScript Menggunakan Attribute HTML

JavaScript juga bisa dijalankan melalui event HTML, seperti onclick.

contoh:

Html

<button onclick="alert('Tombol diklik!')">
  Klik Saya
</button>

Penjelasan:

JavaScript dijalankan saat event terjadi
Biasanya digunakan untuk interaksi sederhana

❌ Tidak direkomendasikan untuk proyek besar

5. Menjalankan JavaScript Saat Halaman Selesai Dimuat

Agar JavaScript dijalankan setelah halaman siap, gunakan DOMContentLoaded.

Html

<script>
document.addEventListener("DOMContentLoaded", function() {
  console.log("Halaman sudah siap");
});
</script>

📌 Penting agar JavaScript tidak error karena elemen HTML belum tersedia.

6. Menggunakan defer dan async

defer

Html

JavaScript dijalankan setelah HTML selesai diproses
Sangat direkomendasikan

async

Html

<script src="script.js" async></script>

JavaScript dijalankan secara asynchronous
Cocok untuk script pihak ketiga (iklan, analytics)

7. Mengecek Hasil JavaScript dengan console.log()

Daripada alert, developer biasanya menggunakan:

JavaScript

console.log("Ini pesan debug");

Hasilnya bisa dilihat di Console Browser.

Kesimpulan

Berikut ringkasan cara menjalankan JavaScript di browser:

Cara <script> di HTML cocok untuk Belajar dasar

Cara File .js cocok untuk Website profesional

Cara Console Browser untuk Testing & belajar

Cara Event HTML cocok untuk Interaksi sederhana

Cara defer cocok untuk Praktik terbaik

👉 Untuk pemula, disarankan:

1. Mulai dari <script>

2. Lanjut ke file .js

3. Biasakan menggunakan Console

JavaScript Client Side vs Server Side: Bedanya Di Mana Sih?

2026-01-01T22:44:00.002+07:00

Kalau kamu pakai JavaScript buat bikin tombol, validasi form, atau efek interaktif di halaman, kemungkinan besar kamu lagi main di client side.

Tapi kalau JavaScript kamu pakai buat proses data, login, atau API, itu sudah masuk ke server side. Namanya sama-sama JavaScript, tapi tempat kerjanya beda.

Apa Maksud Client Side dan Server Side?

Biar gampang dibayangin:

Client side → jalan di browser pengguna
Server side → jalan di server

Sederhananya:

Client side = apa yang dilihat dan dirasakan user
Server side = proses di belakang layar

JavaScript Client Side:

Yang Terjadi di Browser Client side JavaScript dijalankan langsung di browser, seperti:

Chrome
Firefox
Edge
Safari

Biasanya dipakai untuk:

Klik tombol
Validasi form
Mengubah tampilan halaman
Animasi sederhana

Contoh yang sering banget ditemui:

JavaScript

document.querySelector("button").addEventListener("click", () => {
  alert("Tombol diklik!");
});

Kode ini langsung jalan di browser, tanpa server ikut campur.

Kelebihan Client Side JavaScript

Kenapa client side sering dipakai?

Karena:

Responnya cepat
Tidak perlu bolak-balik ke server
Interaksi terasa lebih halus

Makanya hampir semua website modern pasti pakai JavaScript di sisi ini.

Keterbatasan Client Side

Tapi client side juga punya batasan.

Beberapa hal yang tidak aman dilakukan di client side:

Menyimpan password
Proses login utama
Mengelola database

Karena kodenya bisa:

Dilihat user
Diubah lewat browser
Dimanipulasi

JavaScript Server Side: Kerja di Balik Layar

Server side JavaScript dijalankan di server, biasanya pakai Node.js.

Di sini JavaScript dipakai untuk:

Mengolah data
Menyimpan ke database
Mengatur login
Membuat API

User tidak melihat langsung kodenya, hanya hasilnya.

Contoh Kasus Server Side

Misalnya:

User login
Data dikirim ke server
Server cek ke database
Server kirim respon

Semua proses itu terjadi di server, bukan di browser.

Kenapa JavaScript Bisa Jalan di Server?

Dulu JavaScript cuma ada di browser.

Tapi sejak muncul Node.js, JavaScript bisa dijalankan di luar browser.

Inilah yang bikin JavaScript:

Bisa dipakai frontend
Bisa dipakai backend
Satu bahasa, banyak peran

Perbandingan Singkat Client vs Server

Kalau diringkas:

Client Side JavaScript

Jalan di browser
Fokus tampilan & interaksi
Cepat & responsif
Kurang aman untuk data sensitif

Server Side JavaScript

Jalan di server
Fokus logika & data
Lebih aman
Tidak langsung terlihat user

Jadi, Harus Pilih yang Mana?

Jawabannya: dua-duanya 😄

Di aplikasi web modern:

Client side menangani interaksi
Server side menangani logika dan data

Keduanya saling melengkapi, bukan saling menggantikan.

Kalau Dilihat dari Kacamata Pemula

Di tahap awal belajar JavaScript:

Fokus dulu ke client side
Pahami DOM dan event
Biasakan logika dasar
Server side bisa menyusul setelah konsep dasarnya kuat.

Penutup

Walaupun namanya sama-sama JavaScript,

client side dan server side punya tugas yang berbeda.

Dengan memahami perbedaannya, kamu jadi:

Tidak salah taruh logika
Tidak bingung saat belajar framework
Lebih paham alur aplikasi web

Di artikel berikutnya, kita bakal bahas struktur dasar JavaScript sebagai bekal mulai ngoding lebih serius.

Cara Kerja JavaScript di Browser: Apa yang Sebenarnya Terjadi?

2026-01-01T18:35:00.004+07:00

Kalau hari ini kamu buka website lalu klik tombol, muncul alert, atau form bisa validasi tanpa reload halaman, itu semua kelihatannya sederhana.

Tapi di balik layar browser, ada proses yang cukup panjang sebelum JavaScript bisa jalan.

Menariknya, semua itu terjadi dalam hitungan milidetik, tanpa kita sadari.

Saat Website Dibuka di Browser

Ketika kamu mengetik alamat website lalu tekan Enter, browser tidak langsung menampilkan halaman begitu saja.

Yang terjadi kurang lebih seperti ini:

Browser meminta file HTML ke server
HTML mulai dibaca dari atas ke bawah
Browser membangun struktur halaman

Di tahap ini, JavaScript belum tentu langsung dijalankan.

HTML Dibaca, JavaScript Menyusul

Browser membaca HTML secara berurutan.

Saat bertemu tag <script>, browser akan berhenti sejenak.

Kenapa? Karena JavaScript bisa memengaruhi isi halaman.

Kalau JavaScript langsung dijalankan tanpa menunggu, hasil tampilannya bisa berantakan.

Peran Mesin JavaScript di Browser

Setiap browser punya mesin JavaScript sendiri:

Chrome pakai V8
Firefox pakai SpiderMonkey
Safari pakai JavaScriptCore

Mesin inilah yang:

Membaca kode JavaScript
Mengubahnya jadi perintah mesin
Menjalankannya di browser

Semua proses ini terjadi di sisi pengguna, bukan di server.

JavaScript dan DOM: Pasangan Tidak Terpisahkan

Begitu halaman terbentuk, browser membuat DOM (Document Object Model).

DOM ini bisa dibilang “peta” dari seluruh elemen HTML.

JavaScript berinteraksi dengan halaman lewat DOM:

Mengubah teks
Menambah elemen
Menghapus elemen
Merespon klik pengguna

Inilah alasan JavaScript disebut bikin website jadi interaktif.

Kenapa Posisi Script Itu Penting?

Mungkin kamu pernah lihat JavaScript ditaruh di:

Html

<script src="script.js"></script>

Kalau script ditaruh di atas, JavaScript bisa dijalankan sebelum HTML selesai dibaca.

Akibatnya, elemen yang ingin diakses belum ada.

Makanya, banyak developer menaruh JavaScript di bagian bawah atau pakai event tertentu.

Event: JavaScript Menunggu Aksi

JavaScript tidak selalu jalan sendiri.

Sering kali, JavaScript menunggu sesuatu terjadi.

Contohnya:

Klik tombol
Ketik di input
Scroll halaman

Baru setelah itu, kode JavaScript dijalankan.

Dari sinilah muncul istilah event-driven.

Sinkron dan Asinkron (Sedikit, Tapi Penting)

Tidak semua JavaScript berjalan berurutan.

Ada proses yang:

Harus ditunggu
Berjalan di belakang layar

Misalnya:

Ambil data dari server
Delay waktu
Tunggu respon API

Browser punya mekanisme sendiri untuk mengatur ini supaya halaman tidak freeze.

Kalau Dilihat dari Kacamata Pemula

Di awal belajar, mungkin semua ini terdengar ribet.

Tapi sebenarnya, kamu tidak perlu menghafal semuanya sekaligus.

Yang penting dipahami dulu:

JavaScript dijalankan oleh browser
Browser membaca HTML dulu
JavaScript berinteraksi lewat DOM
Event menentukan kapan kode dijalankan

Penutup

Setiap kali JavaScript jalan di browser, ada banyak proses yang bekerja di balik layar.

Kita mungkin tidak melihatnya, tapi efeknya langsung terasa.

Kalau kamu sudah paham cara kerjanya, banyak error yang awalnya membingungkan akan terasa lebih masuk akal.

Di artikel selanjutnya, kita akan mulai masuk ke struktur dasar JavaScript supaya kamu bisa mulai nulis kode dengan lebih percaya diri.

Sejarah Perkembangan JavaScript: Dari Script Sederhana hingga Bahasa Utama Web

2026-01-01T14:39:00.003+07:00

Kalau kamu ngoding JavaScript hari ini—entah buat tombol, validasi form, sampai bikin aplikasi web—percaya atau tidak, JavaScript awalnya dibuat cuma dalam hitungan hari 😄

Tapi sekarang? JavaScript sudah jadi bahasa wajib web developer.

Yuk kita bahas sejarahnya dari awal, versi santai ala ngoding harian.

Awal Mula JavaScript (1995)

Tahun 1995, web masih sangat sederhana.

Website cuma berisi teks dan gambar, tanpa interaksi.

Di perusahaan Netscape, ada seorang programmer bernama Brendan Eich yang diberi tugas:

“Bikin bahasa pemrograman sederhana buat browser.”

Targetnya:

Mudah dipelajari
Bisa jalan langsung di browser
Bisa bikin halaman web jadi interaktif

⏱️ Fakta unik:

JavaScript versi pertama dibuat hanya dalam ±10 hari.

Nama Awalnya Bukan JavaScript

JavaScript sempat gonta-ganti nama:

Mocha
LiveScript
JavaScript (karena strategi marketing)

Kenapa JavaScript? Karena saat itu bahasa Java sedang populer, jadi namanya “dipinjam” biar kelihatan keren 😅

⚠️ Catatan penting:

JavaScript ≠ Java

Dua bahasa ini berbeda total, cuma namanya mirip.

JavaScript Masuk Browser (Netscape & Internet Explorer)

Awalnya JavaScript cuma ada di Netscape Navigator.

Lalu Microsoft bikin versi sendiri bernama JScript di Internet Explorer.

Masalah mulai muncul:

Kode jalan di Netscape ❌
Tapi error di Internet Explorer ❌

Akhirnya developer harus bikin kode khusus untuk tiap browser. Ribet banget.

Standarisasi: Lahirnya ECMAScript

Agar JavaScript tidak berantakan, dibuatlah standar bernama ECMAScript oleh ECMA International.

Versi-versi penting:

ES1 (1997) → standar pertama
ES3 (1999) → mulai stabil
ES5 (2009) → dipakai luas bertahun-tahun
ES6 / ES2015 → revolusi besar 🚀

Revolusi JavaScript: ES6 (2015)

Ini titik balik JavaScript modern.

Fitur-fitur penting yang sering kamu pakai sekarang:

JavaScript

// let & const
let nama = "JavaScript";
const tahun = 1995;

// arrow function
const halo = () => {
  console.log("Halo dunia!");
};

// template literal
console.log(`Belajar ${nama}`);

Sejak ES6:

Kode lebih rapi
Lebih mudah dibaca
Lebih mirip bahasa pemrograman modern

JavaScript Tidak Hanya di Browser

Dulu JavaScript cuma buat:

Alert
Validasi form
Manipulasi HTML

Sekarang??

Dengan JavaScript kamu bisa:
Backend (Node.js)
Mobile App (React Native)
Desktop App (Electron)
Game
IoT

Contoh backend sederhana:

JavaScript

console.log("Server jalan pakai JavaScript");

Satu bahasa, banyak platform. 🔥

JavaScript di Era Sekarang

Saat ini JavaScript adalah:

Bahasa paling banyak digunakan di dunia
Wajib untuk Frontend Developer
Dasar untuk framework populer:

React
Vue
Angular
Next.js

Dan hampir semua website modern memakai JavaScript.

Kenapa Penting Tahu Sejarah JavaScript?

Sebagai coder harian, tahu sejarah itu penting karena:

Paham kenapa sintaks JavaScript “aneh”

Mengerti perbedaan JavaScript lama vs modern

Tidak kaget lihat kode jadul (var, callback hell, dll)

Kesimpulan

JavaScript: Lahir tahun 1995 Awalnya bahasa kecil untuk browser Berkembang jadi bahasa utama web & aplikasi Terus update setiap tahun Kalau kamu belajar JavaScript sekarang, kamu belajar bahasa masa depan web 🚀 📌

Artikel selanjutnya di JavaScript Dasar:

Struktur Dasar Program JavaScript (Wajib Dipahami Pemula)

Apa Itu JavaScript? Pengertian & Fungsi Lengkap untuk Pemula

2026-01-01T09:36:00.009+07:00

Kalau kamu baru mulai belajar dunia web programming, pasti sering mendengar kata JavaScript. Hampir semua website modern saat ini menggunakan JavaScript, mulai dari blog sederhana sampai aplikasi besar seperti YouTube, Facebook, dan Instagram.

Lalu sebenarnya apa itu JavaScript?

Apa fungsinya, dan kenapa JavaScript sangat penting untuk dipelajari?

Di artikel ini, kita akan membahas pengertian JavaScript, fungsi JavaScript, serta contoh penggunaannya, khusus untuk pemula dengan bahasa yang mudah dipahami.

Pengertian JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif dan dinamis.

Jika:

HTML berfungsi untuk membuat struktur halaman
CSS berfungsi untuk mengatur tampilan

Maka JavaScript berfungsi untuk: 👉 Memberikan logika dan interaksi pada website

Contoh sederhana penggunaan JavaScript:

Menampilkan popup / alert
Validasi form (login, daftar)
Mengubah isi halaman tanpa reload
Membuat animasi
Menangani klik tombol

JavaScript pertama kali dikembangkan oleh Brendan Eich pada tahun 1995 dan hingga sekarang menjadi bahasa utama di web development.

Kenapa JavaScript Sangat Penting?

Berikut beberapa alasan kenapa JavaScript wajib dipelajari:

1. Digunakan di Hampir Semua Website

Lebih dari 95% website di internet menggunakan JavaScript.

2. Bisa Jalan di Browser Tanpa Install

JavaScript langsung dijalankan di browser seperti:

Google Chrome
Firefox
Edge

Tanpa perlu install software tambahan.

3. Bisa Digunakan di Banyak Platform

Saat ini JavaScript tidak hanya untuk web:

Frontend (tampilan website)
Backend (server, API)
Mobile App
Desktop App
Game

Fungsi JavaScript dalam Website

Berikut fungsi utama JavaScript yang paling sering digunakan:

1. Membuat Website Interaktif

JavaScript memungkinkan website merespons aksi pengguna, seperti:

Klik tombol
Scroll halaman
Input teks

Contoh:

Html

2. Memvalidasi Form

JavaScript bisa mengecek data sebelum dikirim ke server.

Contoh:

Email harus valid
Password minimal 8 karakter
Form tidak boleh kosong

Hal ini membuat website lebih aman dan nyaman.

3. Mengubah Konten Tanpa Reload Halaman

Dengan JavaScript, konten bisa berubah tanpa refresh halaman, seperti:

Load data otomatis
Infinite scroll
Like & comment realtime

Teknologi ini sering disebut AJAX atau Fetch API.

4. Membuat Animasi & Efek Visual

JavaScript bisa digunakan untuk:

Animasi slider
Dropdown menu
Popup modal
Efek transisi

Biasanya dikombinasikan dengan CSS agar tampilannya lebih halus.

5. Mengontrol HTML & CSS (DOM Manipulation)

JavaScript dapat:

Mengubah teks HTML
Menambah / menghapus elemen
Mengubah warna, ukuran, dan class CSS

Contoh:

JavaScript

document.getElementById("judul").innerHTML = "Belajar JavaScript";

JavaScript Digunakan di Mana Saja?

JavaScript sangat fleksibel dan digunakan di banyak bidang:

🔹 Frontend Development

Membuat tampilan website interaktif menggunakan:

JavaScript murni
Framework seperti React, Vue, Angular

🔹 Backend Development

Dengan Node.js, JavaScript bisa digunakan di server:

Membuat API
Mengelola database
Autentikasi user

🔹 Mobile App

JavaScript juga dipakai untuk aplikasi Android & iOS menggunakan:

React Native
Ionic

🔹 Game Development

Banyak game berbasis browser dibuat dengan JavaScript.

JavaScript untuk Pemula, Sulit atau Tidak?

Jawabannya: tidak sulit jika bertahap.

JavaScript sangat cocok untuk pemula karena:

Sintaks mudah dipahami
Banyak contoh di internet
Komunitas besar
Dokumentasi lengkap

Yang penting: ✅ Belajar dari dasar ✅ Banyak latihan ✅ Jangan langsung lompat ke framework

Kesimpulan

JavaScript adalah bahasa pemrograman penting yang digunakan untuk membuat website menjadi interaktif dan dinamis.

Ringkasannya:

JavaScript ≠ Java (beda bahasa)
Digunakan di hampir semua website
Bisa untuk frontend & backend
Cocok untuk pemula
Sangat menjanjikan untuk karier

Jika kamu serius ingin belajar web development, JavaScript adalah langkah awal yang tepat. Selanjutnya kita akan membahas Case Sensitive pada JavaScript: Pengertian, Contoh, dan Kesalahan Umum

Arrow Function JavaScript

2025-12-28T20:40:00.016+07:00

catatan ngoding sederhana

Beberapa waktu lalu, saya buka kembali kode JavaScript lama yang pernah saya tulis. Saat itu saya sadar, banyak fungsi yang sebenarnya bisa dibuat lebih ringkas. Bukan salah, kodenya tetap jalan. Tapi setelah mengenal arrow function, cara saya menulis JavaScript jadi sedikit berubah. Lebih sederhana, lebih rapi, dan lebih enak dibaca.

Apa Itu Arrow Function?

Arrow function adalah cara menulis function yang lebih singkat di JavaScript modern (ES6).

Contoh function biasa:

JavaScript

function halo() {
  return "Halo JavaScript";
}

Dengan arrow function:

JavaScript

     const halo = () => "Halo JavaScript";

Secara fungsi sama, tapi penulisannya lebih ringkas.

Kenapa Arrow Function Banyak Dipakai? Dari pengalaman ngoding sehari-hari, arrow function sering dipakai karena:

Kode jadi lebih pendek
Mudah dibaca
Cocok untuk fungsi sederhana
Sangat pas untuk callback dan event

Bukan berarti function biasa itu buruk, hanya saja arrow function sering lebih praktis.

Bentuk Dasar Arrow Function

Tanpa Parameter

JavaScript

const pesan = () => {
  console.log("Belajar JavaScript pelan-pelan");
     };

Satu Parameter

Jika hanya satu parameter, tanda kurung boleh dihilangkan.

JavaScript

const sapa = nama => {
  return `Halo ${nama}`;
};

Atau versi lebih ringkas:

JavaScript

const sapa = nama => `Halo ${nama}`;

Lebih dari Satu Parameter:

JavaScript

const tambah = (a, b) => a + b;

Biasanya dipakai untuk fungsi kecil yang sering digunakan. Arrow Function dan Array Arrow function sangat nyaman digunakan saat bekerja dengan array.

JavaScript

const angka = [1, 2, 3, 4];
const hasil = angka.map(n => n * 2);
console.log(hasil);

Kode seperti ini mudah dipahami, bahkan saat dibaca ulang beberapa hari kemudian. Contoh Penggunaan di DOM Kasus yang sering ditemui saat membuat halaman interaktif.

Html

  <button id="btn">Klik</button>

JavaScript

  document.getElementById("btn").addEventListener("click", () => {
  alert("Tombol diklik");
});

Sederhana dan jelas. Catatan Penting Tentang this Ini bagian yang sering membingungkan, terutama untuk pemula. Arrow function tidak memiliki this sendiri. Contoh yang sering menimbulkan kebingungan:

JavaScript

const user = {
  nama: "Budi",
  sapa: () => {
    console.log(this.nama);
  }
};

Hasilnya undefined, karena this tidak mengarah ke object user. Jika membuat method di dalam object dan membutuhkan this, gunakan function biasa:

JavaScript

const user = {
  nama: "Budi",
  sapa: function () {
    console.log(this.nama);
  }
};

Kapan Arrow Function Sebaiknya Digunakan?

Berdasarkan pengalaman, arrow function cocok digunakan untuk:

Callback Event handler Array method Fungsi singkat Dan sebaiknya dihindari untuk:

Method object Kasus yang membutuhkan this

Penutup Arrow function bukan sekadar gaya penulisan, tapi alat untuk membuat kode lebih nyaman dibaca dan dirawat.

Bagi pemula, tidak perlu memaksakan diri menggunakannya di semua tempat. Gunakan seperlunya, pahami pelan-pelan, dan praktikkan sesering mungkin.

Di artikel selanjutnya, kita akan belajar

Tipe Data JavaScript Lengkap untuk Pemula Saat Ngoding

Blogcilik

Function & Scope dalam JavaScript: Fondasi Penting yang Wajib Dipahami

Apa Itu Function di JavaScript?

🔹 Contoh Dasar Function :

🔹 Function dengan Parameter

🔹 Function dengan Return Value

Jenis-Jenis Function di JavaScript

🔹 Function Declaration

🔹 Function Expression

🔹 Arrow Function (Modern JavaScript)

Apa Itu Scope?

🔹 Global Scope

🔹 Function Scope

🔹 Block Scope (let & const)

Scope Chain (Konsep Penting!)

Kenapa Ini Penting?

Kesalahan Umum Pemula

Kesimpulan

Apa Itu Function dalam Javascript Pengertian dan Konsep Dasar

Saat Kode Mulai Berantakan

Apa Itu Function Sebenarnya?

Contoh Function yang Pertama Kali Saya Buat

Kenapa Saya Akhirnya Sadar Function Itu Penting

Cara Saya Mengingat Konsep Function

Kesalahan yang Pernah Saya Lakukan

Kenapa Kamu Harus Paham Function Sejak Awal

Kesimpulan

Airdrop Crypto: Apa Itu, Cara Kerja, dan Peran JavaScript di Baliknya

Apa Itu Airdrop?

Bagaimana Airdrop Ditentukan?

Peran JavaScript dalam Ekosistem Airdrop

1️⃣ Mengecek Kelayakan Airdrop Menggunakan Web3.js atau Ethers.jsContoh sederhana menggunakan ethers.js:

2️⃣ Membuat Script Monitoring Airdrop

3️⃣ Membuat Tools Eligibility Checker

Apakah Aman Mengikuti Airdrop?

Peluang untuk Developer JavaScript

Kesimpulan

Struktur Dasar JavaScript: Kesalahan Umum yang Sering Terjadi pada Pemula

1. JavaScript Selalu Berjalan dari Atas ke Bawah

2. Setiap Perintah Biasanya Diakhiri Titik Koma (;)

3. JavaScript Peka Terhadap Huruf Besar dan Kecil

4. Penulisan Kurung Kurawal {} yang Sering Terlewat

5. Salah Menempatkan JavaScript di HTML

6. Mengira JavaScript Sama dengan HTML atau CSS

7. Lupa Bahwa Error Itu Normal

Kesimpulan

Sejarah ECMAScript: Standar yang Membuat JavaScript Tidak Berantakan

Kondisi JavaScript di Masa Awal

Lahirnya ECMAScript oleh ECMA International

Apa Itu ECMAScript?

Perkembangan Versi ECMAScript

Mengapa ECMAScript Sangat Penting?

Kesimpulan

Sekilas Sejarah JavaScript di Netscape Navigator

Script langsung di HTML

Contoh Sintaks JavaScript Jadul (Era Netscape)

1. Alert Sederhana

2. Manipulasi Dokumen dengan document.write()

3. Event Handler Inline (paling sering dipakai)

4. Validasi Form Sederhana

5. Variabel & Tipe Data (sangat sederhana)

6. Kondisi & Perulangan

Aturan Dasar Membuat Tampilan Website Interaktif Menggunakan JavaScript Murni

1. Pahami Peran JavaScript dalam Website

2. Selalu Mulai dari HTML yang Rapi dan Semantik

3. Pisahkan File JavaScript dari HTML

4. Gunakan Event Listener, Bukan Inline Event

5. Manipulasi DOM Secukupnya

6. Gunakan Class untuk Mengatur Tampilan

7. Buat Interaksi yang Responsif dan Masuk Akal

8. Gunakan Fungsi Kecil dan Jelas

9. Tangani Error dan Kondisi Tak Terduga

10. Optimalkan untuk Performa dan Pengguna

11. Uji di Berbagai Perangkat dan Browser

Kesimpulan

Belajar Web Programming JavaScript

Apa Itu Web Programming JavaScript?

Teknologi Pendukung JavaScript

Keuntungan Menguasai Web Programming JavaScript

Tips Belajar Web Programming JavaScript

1️⃣ Mengecek Kelayakan Airdrop Menggunakan Web3.js atau Ethers.js
Contoh sederhana menggunakan ethers.js: