jQuery untuk Pemula
jQuery untuk Pemula
jQuery untuk Pemula adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 1. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 1 pelajaran total.
Pendahuluan
Halo,
Selamat datang di kursus jQuery untuk Pemula .
Di bagian ini, kita akan mulai mempelajari informasi mendetail tentang jQuery.
Pendahuluan 2
Sebelum memulai kursus ini,
Anda perlu mengikuti kursus-kursus berikut terlebih dahulu.
- Memulai HTML
- Memulai CSS
- Dasar-Dasar JavaScript
- Jika Anda sudah memahami topik-topik tersebut, Anda dapat melanjutkan kursus.
Mari kita mulai
Mari kita mulai.
Pertama-tama, mari kita jawab pertanyaan tentang kegunaan JQuery.
Sebelum menjawab pertanyaan, mari kita ulangi dasar-dasar kita
Sebelum menjawab pertanyaan, mari kita ulangi dasar-dasar kita.
HTML adalah bahasa markup. Jadi, HTML merupakan bahasa markup teks, bukan bahasa pemrograman. HTML jauh dari konsep seperti berorientasi objek. Dengan kata lain, tidak ada objek dalam strukturnya; hal-hal yang kita kenal adalah tag HTML, atribut, dan sebagainya.
JavaScript melakukan operasi pada DOM
Sering kali kita perlu melakukan operasi pada elemen HTML di halaman web. Untuk menyediakan kemampuan ini dan membuat elemen HTML dapat diakses oleh JS, kita merepresentasikannya dalam model yang disebut DOM (Document Object Model).
JavaScript melakukan operasi pada DOM, yang merupakan padanan objek dari halaman web. Proses ini disebut manipulasi DOM.
Contoh
Mari kita lihat sebuah contoh.
Kita memiliki elemen tombol seperti pada contoh di bawah ini, dengan teks 'Not Clicked' . Saat kita mengeklik tombol, kita akan mengubah teks tombol menjadi 'Clicked'.
Untuk melakukannya, kita perlu melakukan manipulasi DOM menggunakan bahasa JavaScript.
Dalam kursus Pendahuluan JavaScript, kita telah mempelajari cara mengelola Dokumen Web dengan JavaScript. JQuery adalah pustaka yang memungkinkan kita melakukan manipulasi DOM dengan lebih ringkas menggunakan JavaScript.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>Pertanyaan
Ada pertanyaan untuk Anda!
Contoh 2
Pada contoh di bawah ini, kita mendefinisikan sebuah tombol dengan id my-button.
Sekarang, mari kita mengakses elemen ini dengan JavaScript melalui DOM.
Saat kita mengeklik tombol, kita akan mengakses DOM dengan kode JS dan mengubah properti innerHTML elemen dengan id my-button menjadi click.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>Peringatan
JQuery tidak lain adalah pustaka yang dibuat untuk menyederhanakan penggunaan fungsi dan metode dalam JS Core.
Dengan kata lain, JQuery memungkinkan kita melakukan banyak hal yang dapat dilakukan dengan VanillaJS menggunakan sintaks yang lebih mudah dan mudah dibaca.
Penjelasan Contoh
Mari kita jelaskan kodenya.
let myButton = document.getElementById('my-button');
Kita menetapkan objek dokumen JavaScript ke variabel bernama myButton dengan metode getElementById.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
Selanjutnya, kita mendengarkan peristiwa click pada tombol sekaligus mengubah tombol tersebut.
Kita telah melakukan manipulasi DOM dengan menggunakan fitur inti bahasa tersebut tanpa menggunakan pustaka atau kerangka kerja apa pun, yang sebelumnya disebut native atau vanilla.
Mari kita tulis kode yang sama dengan jQuery dan manfaatkan fitur-fitur yang ditawarkan pustaka jQuery kepada kita.
Peringatan
Konsep yang di banyak tempat disebut sebagai VanillaJS sebenarnya hanyalah objek, metode, dan fungsi inti Javascript murni, serta penggunaan fasilitas yang disediakan oleh peramban.
Contoh jQuery
Di bawah ini, kita telah membuat contoh sebelumnya menggunakan jQuery.
Berhati-hatilah agar tidak terlalu memperpendek kode dengan mengabaikan sintaks.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>Selamat
Selamat 🎉
Di bagian ini, kita mulai mempelajari jQuery dan memahami betapa jQuery dapat memudahkan pekerjaan kita.
Sampai jumpa di bagian berikutnya!
Pertanyaan yang Sering Diajukan
Apakah pelajaran “jQuery untuk Pemula” gratis?
Ya — teks lengkap “jQuery untuk Pemula” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 1 pelajaran total.
Apa yang akan aku pelajari di “jQuery untuk Pemula”?
jQuery untuk Pemula Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai jQuery Academy?
Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 1.
Berapa lama pelajaran “jQuery untuk Pemula” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?
Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.