Pertemuan Ke 4 Java Script (Revisi)
Pertemuan Ke 4 Java Script (Revisi)
JAVA SCRIPT
<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>
<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>
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:
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>
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>
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;
<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>