Materi JavaScript dan jQuery
1. Pengenalan JavaScript dan jQuery
Seterlah belajar bootsrap sekarang belajar Javascript
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web lebih interaktif dan dinamis. JavaScript berjalan di sisi klien (client-side), yang berarti kode dieksekusi langsung di browser pengguna tanpa memerlukan komunikasi dengan server. Dengan JavaScript, kita bisa menambahkan animasi, menangani event, dan berkomunikasi dengan server tanpa perlu me-reload halaman. Selain itu, JavaScript juga mendukung berbagai paradigma pemrograman seperti prosedural, fungsional, dan berbasis objek.
jQuery adalah pustaka JavaScript yang dibuat untuk mempermudah manipulasi HTML dan CSS, menangani event, serta membuat animasi dengan lebih ringkas. Dengan jQuery, kita bisa menulis kode yang lebih sederhana dan efisien dibandingkan dengan JavaScript murni.
2. Variabel dan Tipe Data
2.1. Deklarasi Variabel
|
1 2 3 |
var nama = "Fares"; // Global scope let umur = 21; // Block scope const kota = "Purwokerto"; // Tidak dapat diubah |
2.2. Tipe Data
- String: “Hello”
- Number: 42
- Boolean: true / false
- Array:
[1, 2, 3] - Object:
{ nama: "Fares", umur: 21 } - Undefined: variabel yang belum memiliki nilai
- Null: nilai kosong atau tidak ada
3. Operator dan Control Flow
3.1. Operator
- Aritmatika:
+,-,*,/,% - Perbandingan:
==,!=,>,< - Logika:
&&,||,!
3.2. Percabangan
|
1 2 3 4 5 |
if (umur > 18) { console.log("Dewasa"); } else { console.log("Anak-anak"); } |
3.3. Perulangan
|
1 2 3 |
for (let i = 0; i < 5; i++) { console.log(i); } |
|
1 2 3 4 5 |
let j = 0; while (j < 5) { console.log(j); j++; } |
4. Fungsi dan Objek
4.1. Fungsi
|
1 2 3 4 5 |
function sapa(nama) { return "Halo, " + nama; } console.log(sapa("Fares")); |
|
1 2 3 4 5 6 7 8 9 |
const mahasiswa = { nama: "Fares", umur: 21, sapa: function() { return "Halo, saya " + this.nama; } }; console.log(mahasiswa.sapa()); |
4.2. Objek
5. jQuery: Library JavaScript yang Mempermudah
5.1. Cara Menggunakan jQuery
Tambahkan jQuery melalui CDN:
|
1 |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
5.2. Seleksi Elemen dengan jQuery
|
1 2 3 4 |
$(document).ready(function() { $("#judul").text("Belajar jQuery"); $(".paragraf").css("color", "blue"); }); |
5.3. Event Handling dengan jQuery
|
1 2 3 4 5 |
$(document).ready(function() { $("#tombol").click(function() { alert("Tombol diklik!"); }); }); |
5.4. Efek Animasi dengan jQuery
|
1 2 |
$("#kotak").fadeOut(); // Menghilangkan elemen dengan efek fade out $("#kotak").fadeIn(); // Menampilkan elemen dengan efek fade in |
5.5. Efek Toggle dengan jQuery
5.5.1. Slide Toggle
|
1 2 3 |
$("#toggleButton").click(function() { $("#panel").slideToggle(); }); |
Kode di atas akan membuat elemen dengan ID panel muncul dan menghilang dengan efek slide ketika tombol dengan ID toggleButton diklik.
5.5.2. Fade Toggle
|
1 2 3 |
$("#fadeButton").click(function() { $("#box").fadeToggle(); }); |
Efek fadeToggle() akan membuat elemen dengan ID box memudar masuk dan keluar setiap kali tombol fadeButton ditekan.
6. AJAX dan Fetch API
6.1. AJAX dengan jQuery
|
1 2 3 |
$.get("https://jsonplaceholder.typicode.com/posts", function(data) { console.log(data); }); |
AJAX memungkinkan kita mengambil data dari server tanpa perlu me-reload halaman.
6.2. Fetch API dengan Async/Await
Alternatif modern untuk AJAX adalah Fetch API dengan async/await:
|
1 2 3 4 5 6 7 |
async function getData() { let response = await fetch("https://jsonplaceholder.typicode.com/posts"); let data = await response.json(); console.log(data); } getData(); |
Fetch API memungkinkan kita mengambil data secara lebih fleksibel dengan dukungan Promise dan async/await, yang membuat kode lebih mudah dibaca dan dikelola.
6.3. Menggunakan Fetch API untuk Mengirim Data
Selain mengambil data, kita juga bisa mengirim data menggunakan Fetch API:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
async function kirimData() { let response = await fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: "Belajar JavaScript", body: "Ini contoh pengiriman data", userId: 1 }) }); let data = await response.json(); console.log(data); } kirimData(); |
Kode di atas mengirimkan data JSON ke server menggunakan metode POST.
7. Tugas JavaScript dan jQuery
Tugas 1: Validasi Form Menggunakan Bootsrap dengan jQuery
Buat form HTML dengan validasi menggunakan jQuery dan menggunakn bootsrap . Jika input nama kosong, tampilkan pesan error.
