PTEDK

Tutorial Dasar Programming jQuery dan HTML – Tentang Variabel dan Array

—

by

Sang Penulis
in

1. Memahami Variabel di jQuery

Di jQuery, variabel digunakan untuk menyimpan data atau elemen yang akan digunakan dalam manipulasi DOM (Document Object Model) atau operasi lainnya. jQuery adalah pustaka JavaScript, jadi sintaks variabelnya mengikuti aturan JavaScript.

Contoh 1: Menyimpan dan Menggunakan Variabel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel di jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Mendeklarasikan variabel
            var nama = "John";
            var umur = 25;

            // Menggunakan variabel
            $('#info').text("Nama: " + nama + ", Umur: " + umur);
        });
    </script>
</head>
<body>
    <div id="info"></div>
</body>
</html>
  • Variabel nama dan umur menyimpan data yang akan ditampilkan di elemen dengan ID info.

Contoh 2: Menggunakan Variabel jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Menyimpan elemen jQuery dalam variabel
            var $judul = $('#judul');

            // Mengubah teks dan warna elemen
            $judul.text("Selamat datang!");
            $judul.css("color", "blue");
        });
    </script>
</head>
<body>
    <h1 id="judul"></h1>
</body>
</html>
  • Variabel $judul menyimpan objek jQuery yang merujuk ke elemen dengan ID judul.

2. Memahami Array di jQuery

Array di JavaScript (dan jQuery) adalah struktur data yang digunakan untuk menyimpan kumpulan nilai. jQuery tidak mengubah cara kerja array di JavaScript, jadi kita menggunakan sintaks JavaScript standar.

Contoh 3: Array Indeks Numerik

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array di jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Mendeklarasikan array
            var warna = ["Merah", "Hijau", "Biru"];

            // Menampilkan elemen array
            $('#warna').html("Warna pertama: " + warna[0] + "<br>" +
                              "Warna kedua: " + warna[1] + "<br>" +
                              "Warna ketiga: " + warna[2]);
        });
    </script>
</head>
<body>
    <div id="warna"></div>
</body>
</html>
  • Variabel warna adalah array yang menyimpan beberapa warna dan ditampilkan dalam elemen dengan ID warna.

Contoh 4: Array Asosiatif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array Asosiatif di jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Mendeklarasikan array asosiatif
            var mahasiswa = {
                nama: "Alice",
                umur: 22,
                jurusan: "Teknik Informatika"
            };

            // Menampilkan elemen array asosiatif
            $('#info').html("Nama: " + mahasiswa.nama + "<br>" +
                            "Umur: " + mahasiswa.umur + "<br>" +
                            "Jurusan: " + mahasiswa.jurusan);
        });
    </script>
</head>
<body>
    <div id="info"></div>
</body>
</html>
  • Variabel mahasiswa adalah objek JavaScript yang menyimpan data dengan kunci dan nilai, dan ditampilkan dalam elemen dengan ID info.

Ringkasan:

  1. Variabel di jQuery:
  • Deklarasi: var nama = "John";
  • Menggunakan: $('#element').text(nama);
  • Variabel jQuery: var $element = $('#element');
  1. Array di jQuery:
  • Indeks Numerik: var warna = ["Merah", "Hijau", "Biru"];
  • Asosiatif: var mahasiswa = { nama: "Alice", umur: 22 };

Dengan tutorial ini, kamu bisa mulai memahami dan menggunakan variabel serta array dalam konteks jQuery. Jika ada pertanyaan lebih lanjut atau jika ada yang ingin dipelajari lebih dalam, silakan tanya!