Tutorial Javascript untuk Pemula Lengkap dan Mudah Dipahami

Gambar Javascript. Sumber: duniailkom.com

Tutorial Javascript untuk Pemula

Pernahkah kalian mendengar bahasa pemrograman javascript? Javascript adalah bahasa pemrograman yang sudah menjadi standar wajib untuk dikuasai bagi programmer yang ingin terjun menjadi web development.

Javascript merupakan bahasa pemrograman yang sangat populer. Javascript adalah bahasa pemrograman yang digunakan untuk membuat website menjadi lebih dinamis dan interaktif. Website yang dibuat tanpa javascript hanyalah sekedar kerangka website dengan hiasan warna.

Javascript adalah bahasa pemrograman yang tidak terlalu sulit dan juga tidak mudah untuk dipelajari. Namun, siapapun bisa menguasai bahasa pemrograman javascript jika belajar dengan tekun. Artikel ini akan membantu kalian memahami apa itu javascript dan bagaimana cara menggunakannya.

Apa Itu Javascript?

Javascript adalah bahasa pemrograman yang digunakan untuk membuat website interaktif. Javascript tidak hanya digunakan untuk membuat website saja, javascript juga digunakan pada sisi server, game, IoT, dekstop, dan lain-lain.

Javascript diciptakan pada tahun 1995 oleh Brendan Eich di perusahaan Netscape. Saat itu, website masih statis dan hanya dibuat dengan HTML. Sehingga dibutuhkan bahasa yang bisa membuat halaman yang lebih interaktif. Dari sinilah lahir bahasa baru yang awalnya diberi nama Mocha.

Tak lama setelah Mocha dirilis, namanya berganti menjadi Livescript, lalu akhirnya dikenal dengan nama Javascript. Karena cepat populer, Microsoft membuat versi yang sama bernama JScript untuk internet Explorer. Perbedaan antar browser membuat Javascript akhirnya distandarkan pada tahun 1997 oleh ECMA International. Sejak itu nama resminya dikenal sebagai ECMAScript.

Perkembangan besar terjadi ketika hadir ES5 (2009) dan ES6 (2015) dengan banyak fitur modern. Kemudian muncul mesin cepat V8 di Chrome dan Node.js yang membuat Javascript bisa dipakai di server. Dari sana Javascript berkembang menjadi bahasa pemrograman paling populer di dunia web.

Persiapan Sebelum Belajar Javascript

1. Browser

Gunakan browser modern seperti Google Chrome atau Firefox untuk menjalankan Javascript.

2. Teks Editor

Gunakan Visual Studio Code atau teks editor lain untuk menulis kode.

3. File HTML Sederhana

Siapkan file dasar HTML sebagai wadah untuk menjalankan kode Javascript.

Struktur Dasar Javascript untuk Pemula

1. Menulis Javascript di HTML

Javascript dijalankan melalui browser dan biasanya ditulis bersama HTML. Ada dua cara umum: langsung dalam tag <script> (internal), atau di file .js terpisah (eksternal).

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

Kode di atas akan mencari elemen dengan id="judul" lalu mengganti teksnya.

2. Variabel

Variabel adalah tempat menyimpan data. Ada tiga kata kunci:

var (lama. jarang dipakai)
let (nilai bisa diubah)
const (nilai tetap)

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

Gunakan let untuk data yang berubah dan gunakan const untuk data tetap yang tidak akan dirubah/berubah.

3. Tipe Data

Jenis data dasar di Javascript antara lain:

String - teks
Number - angka bulat atau desimal
Boolean - true/false
Null - kosong
Undefined - variabel belum diisi

let teks = "Halo";  // String
let angka = 10;     // Number
let benar = true;   // Boolean

4. Operator

Operator dipakai untuk perhitungan dan logika.

Aritmatika: (+), (-), (*), (/), (%)
Perbandingan: (==), (!=), (>), (<)
Logika: (&&), (||), (!)

let a = 5, b = 3;
console.log(a + b);             // 8
console.log(a > b);             // true
console.log(a == 5 && b == 3);  // true

5. Kondisi (If-Else)

Kondisi dipakai untuk membuat keputusan.

let nilai = 80;
if (nilai >= 75) {
    console.log("Lulus");
} else {
    console.log("Tidak Lulus");
}

Jika kondisi benar, blok if dijalankan. Jika salah, blok else dijalankan.

6. Perulangan (Looping)

Digunakan untuk mengulang perintah.

for (let i =1; i <= 3; i++) {
    console.log("Perulangan ke " + i);
}

Perulangan sangat berguna untuk menampilkan daftar data atau perhitungan berulang.

7. Fungsi

Fungsi adalah kumpulan perintah yang bisa dipanggil kapan saja.

function salam(nama) {
    return "Halo, " + nama;
}
console.log(salam("Andi"));

Fungsi membuat kode lebih rapi dan mudah digunakan ulang.

8. DOM (Document Object Model)

Dom memungkinkan Javascript berinteraksi dengan elemen HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="pesan">Teks awal</p>
    <button onclick="ubahTeks()">Ubah</button>
    <script>
        function ubahTeks() {
            document.getElementById("pesan").innerHTML = "Teks sudah berubah"
        }
    </script>
</body>
</html>

Saat tombol ubah diklik, teks paragraf berubah sesuai perintah Javascript.