Scribd
Unggah
41 tayangan9 halaman

Pertemuan Ke 4 Java Script (Revisi)

Diunggah oleh

Imam Arifin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
41 tayangan9 halaman

Pertemuan Ke 4 Java Script (Revisi)

Diunggah oleh

Imam Arifin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

PERTEMUAN KE 4.

JAVA SCRIPT

1. Apa itu JavaScript?


 JavaScript adalah bahasa pemrograman yang digunakan untuk membuat konten web menjadi
dinamis dan interaktif. Bahasa ini berjalan di sisi klien (browser) dan dapat digunakan untuk
memanipulasi elemen-elemen pada halaman web tanpa harus memuat ulang halaman.
 JavaScript sering digunakan untuk validasi formulir, manipulasi DOM (Document Object Model),
animasi, dan banyak lagi.

2. Fungsi JavaScript dalam Web Development:


 Memanipulasi DOM: Mengubah konten atau gaya elemen HTML.
 Validasi Formulir: Memastikan data yang dimasukkan oleh pengguna sesuai sebelum dikirim ke
server.
 Mengontrol Waktu (Timers): Menggunakan fungsi setTimeout dan setInterval untuk mengatur
waktu eksekusi suatu aksi.
 Menambahkan Interaktivitas: Seperti menu drop-down, slideshow gambar, pop-up, dll.
 AJAX (Asynchronous JavaScript and XML): Untuk memuat data secara dinamis tanpa memuat
ulang halaman.

3. Struktur Dasar JavaScript dalam HTML:


JavaScript dapat dituliskan langsung di dalam tag HTML atau di dalam file eksternal. Cara penulisannya
adalah dengan menggunakan tag <script>.

A. Internal JavaScript: Diletakkan di dalam tag <script> pada file HTML.


Pada contoh ini, fungsi sapa() akan dijalankan saat tombol diklik, menampilkan pesan
menggunakan alert().

<html>
<head>
<title>Contoh JavaScript</title>
<script>
function sapa() {
alert('Halo, Selamat Datang di Situs Kami!');
}
</script>
</head>
<body>
<h1>Belajar JavaScript</h1>
<button onclick="sapa()">Klik Saya</button>
</body>
</html>

B. Eksternal JavaScript: Kode JavaScript ditulis di file .js terpisah dan dihubungkan ke file HTML.
Langkah pertama simpan kode java script dibawah ini dengan nama script.js

function sapa() {
alert('Halo, Selamat Datang di Situs Kami!');
}
Langkah kedua simpan kode html ini dengan nama index.html
<html>
<head>
<title>Contoh JavaScript Eksternal</title>
<script src="script.js"></script>
</head>
<body>
<h1>Belajar JavaScript Eksternal</h1>
<button onclick="sapa()">Klik Saya</button>
</body>
</html>

C. Penerapan java script dalam formular

<html>
<head>
<title>Validasi Formulir</title>
<script>
function validasiForm() {
let nama = document.forms["myForm"]["nama"].value;
if (nama == "") {
alert("Nama harus diisi!");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validasiForm()">
Nama: <input type="text" name="nama">
<input type="submit" value="Submit">
</form>
</body>
</html>

4. Event dalam java script (event attributes atau event handlers)

JavaScript dalam HTML memiliki berbagai jenis event dan cara interaksi untuk membuat halaman
web lebih interaktif dan responsif. Berikut adalah beberapa jenis event JavaScript yang sering
digunakan dalam HTML, beserta contohnya:

 onclick: Menampilkan alert saat tombol diklik.


 onmouseover dan onmouseout: Mengubah warna teks ketika kursor berada di atasnya dan
mengembalikan warna saat kursor keluar.
 oninput: Menampilkan teks yang diketik oleh pengguna dalam paragraf di bawahnya.
 onfocus dan onblur: Mengubah warna latar belakang input ketika fokus dan
mengembalikannya saat kehilangan fokus.
 onchange: Menampilkan alert saat pengguna memilih opsi dari dropdown.
 onsubmit: Memastikan pengguna mengonfirmasi sebelum form dikirim.
 onkeydown: Mencatat tombol yang ditekan pengguna di dalam console.
 onresize: Menampilkan pesan di console setiap kali ukuran jendela berubah.
 onload: Menampilkan alert saat halaman selesai dimuat.
 oncontextmenu: Mencegah pengguna membuka menu klik kanan di area tertentu.

1. onclick
 Event ini digunakan untuk menangani aksi ketika pengguna mengklik sebuah elemen.
 Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh onclick</title>
</head>
<body>
<button onclick="alert('Tombol ini telah diklik!')">Klik Saya</button>
</body>
</html>

2. onmouseover dan onmouseout.


onmouseover dan onmouseout: Mengubah warna teks ketika kursor berada di atasnya dan
mengembalikan warna saat kursor keluar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh onmouseover & onmouseout</title>
</head>
<body>
<p onmouseover="this.style.color='green'" onmouseout="this.style.color='black'">
Arahkan kursor ke teks ini untuk mengubah warna menjadi hijau.
</p>
</body>
</html>

3. oninput. oninput:
Menampilkan teks yang diketik oleh pengguna dalam paragraf di bawahnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh oninput</title>
</head>
<body>
<input type="text" oninput="document.getElementById('output').innerText =
this.value" placeholder="Ketik sesuatu...">
<p>Output: <span id="output"></span></p>
</body>
</html>

4. onfocus dan onblur.


onfocus dan onblur: Mengubah warna latar belakang input ketika fokus dan mengembalikannya
saat kehilangan fokus.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh onfocus & onblur</title>
</head>
<body>
<input type="text" onfocus="this.style.backgroundColor='lightyellow'"
onblur="this.style.backgroundColor='white'" placeholder="Fokus di sini untuk
mengubah warna latar">
</body>
</html>

5. onchange. onchange:
Menampilkan alert saat pengguna memilih opsi dari dropdown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh onchange</title>
</head>
<body>
<select onchange="alert('Anda memilih ' + this.value)">
<option value="">Pilih Buah</option>
<option value="Apel">Apel</option>
<option value="Pisang">Pisang</option>
<option value="Ceri">Ceri</option>
</select>
</body>
</html>

6. onsubmit.
onsubmit: Memastikan pengguna mengonfirmasi sebelum form dikirim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh onsubmit</title>
</head>
<body>
<form onsubmit="return confirm('Apakah Anda yakin ingin mengirim form ini?')">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
<input type="submit" value="Kirim">
</form>
</body>
</html>

7. onkeydown.
onkeydown: Mencatat tombol yang ditekan pengguna di dalam console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh onkeydown</title>
</head>
<body>
<input type="text" onkeydown="console.log('Tombol ditekan: ' + event.key)"
placeholder="Tekan tombol keyboard di sini">
</body>
</html>

8. onresize. Onresize
: Menampilkan pesan di console setiap kali ukuran jendela berubah.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh onresize</title>
</head>
<body>
<h1>Ubah ukuran jendela browser Anda</h1>
<script>
window.onresize = function() {
console.log('Ukuran jendela berubah: ' + window.innerWidth + ' x ' +
window.innerHeight);
};
</script>
</body>
</html>

9. onload.
onload: Menampilkan alert saat halaman selesai dimuat.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh onload</title>
</head>
<body onload="alert('Halaman telah selesai dimuat!')">
<h1>Selamat Datang</h1>
</body>
</html>

10. oncontextmenu
. oncontextmenu: Mencegah pengguna membuka menu klik kanan di area tertentu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh oncontextmenu</title>
</head>
<body>
<div oncontextmenu="alert('Klik kanan dinonaktifkan di area ini.'); return false;"
style="padding: 20px; border: 1px solid #000;">
Klik kanan pada area ini tidak diizinkan.
</div>
</body>
</html>

Tugas LMS :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validasi Formulir dengan JavaScript dan CSS</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.form-container {
background: #ffffff;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}

.form-container h1 {
text-align: center;
margin-bottom: 20px;
font-size: 1.5em;
color: #333;
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}

input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 1em;
}

.error {
color: #ff4d4d;
font-size: 0.875em;
margin-top: 5px;
}

input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #87CEEB; /* Warna sesuai preferensi */
border: none;
border-radius: 5px;
color: #ffffff;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
background-color: #5bb5db;
}

.form-container input:focus {
outline: none;
border-color: #87CEEB;
}
</style>
<script>
function validateForm() {
// Ambil nilai input dari formulir
var nama = document.getElementById("nama").value;
var npm = document.getElementById("npm").value;
var email = document.getElementById("email").value;

// Ambil elemen untuk pesan error


var namaError = document.getElementById("namaError");
var npmError = document.getElementById("npmError");
var emailError = document.getElementById("emailError");

// Reset pesan error


namaError.textContent = "";
npmError.textContent = "";
emailError.textContent = "";

var isValid = true;

// Validasi Nama (tidak boleh kosong)


if (nama === "") {
namaError.textContent = "Nama harus diisi.";
isValid = false;
}

// Validasi NPM (harus berupa angka)


if (npm === "") {
npmError.textContent = "NPM harus diisi.";
isValid = false;
} else if (!/^\d+$/.test(npm)) {
npmError.textContent = "NPM hanya boleh berisi angka.";
isValid = false;
}

// Validasi Email (harus format email)


if (email === "") {
emailError.textContent = "Email harus diisi.";
isValid = false;
} else if (!/^\S+@\S+\.\S+$/.test(email)) {
emailError.textContent = "Format email tidak valid.";
isValid = false;
}

// Kembalikan nilai validasi


return isValid;
}
</script>
</head>
<body>
<div class="form-container">
<h1>Formulir Pendaftaran</h1>
<form onsubmit="return validateForm()">
<div class="form-group">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
<div id="namaError" class="error"></div>
</div>

<div class="form-group">
<label for="npm">NPM:</label>
<input type="text" id="npm" name="npm">
<div id="npmError" class="error"></div>
</div>

<div class="form-group">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<div id="emailError" class="error"></div>
</div>

<input type="submit" value="Kirim">


</form>
</div>
</body>
</html>

Anda mungkin juga menyukai