Pengenalan javascript
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mengenal JavaScript</title>
</head>
<body>
<h1>Pengenalan JavaScript</h1>
<h3>Contoh document.write dan console.log</h3>
<script>
document.write("Hello World");
console.log("Hello World");
</script>
</body>
</html>Hasil:
Javascript dasar
Pemakaian Alert sebagai property window
<html>
<head>
<title>alert box</title>
</head>
<body>
<script language = "javascript">
<!--
window.alert("ini merupakan pesan untuk anda");
//-->
</script>
</body>
</html>Hasil:
Pemakaian method dalam objek
<html>
<head>
<title>skrip javascript</title>
</head>
<body>
percobaan memakai javascript:<br>
<script language = "javascript">
<!--
document.write("selamat mencoba javascript<br>");
document.write("semoga sukses!");
//-->
</script>
</body>
</html>Hasil:
Pemakaian Prompt
<html>
<head>
<title>pemasukan data</title>
</head>
<body>
<script language = "javascript">
<!--
var nama = prompt("siapa nama anda", "masukkan nama anda");
document.write("hai, " + nama);
//-->
</script>
</body>
</html>Hasilnya:
Pembuatan fungsi dan cara pemanggilannya
<html>
<head>
<title>contoh program javascript</title>
<script language="javascript">
function pesan(){
alert("memanggil javascript lewat body onload")
}
</script>
</head>
<body onload="pesan()">
</body>
</html>Hasil:
Dasar pemrograman Di Javascript
Operasi dasar Aritmatika
<html>
<head>
<title>contoh program javascript</title>
<script language="javascript">
function test(val1, val2) {
document.write("<br>" + "perkalian : val1*val2 " + "<br>");
document.write(val1 * val2);
document.write("<br>" + "pembagian : val1/val2 " + "<br>");
document.write(val1 / val2);
document.write("<br>" + "penjumlahan : val1+val2 " + "<br>");
document.write(val1 + val2);
document.write("<br>" + "pengurangan : val1-val2 " + "<br>");
document.write(val1 - val2);
document.write("<br>" + "modulus : val1%val2 " + "<br>");
document.write(val1 % val2);
}
</script>
</head>
<body>
<input type="button" name="button1" value="arithmetic" onclick="test(9,4)">
</body>
</html>Hasilnya:
Seleksi kondisi(if..else)
<html>
<head>
<title>contoh if-else</title>
</head>
<body>
<script language = "javascript">
<!--
var nilai = prompt("nilai (0-100): ", 0);
var hasil = "";
if (nilai >= 60)
hasil = "lulus";
else
hasil = "tidak lulus";
document.write("hasil: " + hasil);
//-->
</script>
</body>
</html>Bila nilai kurang dari 60
Hasilnya:
Bila nilai lebih dari 60
Hasilnya:
Penggunaan operator switch untuk seleksi kondisi
<html>
<head>
<title>contoh program javascript</title>
<script language="javascript">
function test() {
val = window.prompt("input nilai (1-5):");
switch (val) {
case "1":
document.write("bilangan satu");
break;
case "2":
document.write("bilangan dua");
break;
case "3":
document.write("bilangan tiga");
break;
case "4":
document.write("bilangan empat");
break;
case "5":
document.write("bilangan lima");
break;
default:
document.write("bilangan lainnya");
}
}
</script>
</head>
<body>
<input type="button" name="button1" value="switch" onclick="test()">
</body>
</html>Proses Pertama:
Proses Kedua:
Hasil Akhir:
Pembuatan Form
Form Input
<html>
<head>
<script language="javascript">
function test() {
var val1 = document.kirim.T1.value;
if (val1 % 2 == 0)
document.kirim.T2.value = "bilangan genap";
else
document.kirim.T2.value = "bilangan ganjil";
}
</script>
</head>
<body>
<form method="POST" name="kirim">
<p>BIL <input type="text" name="T1" size="20">
MERUPAKAN BIL <input type="text" name="T2" size="20"></p>
<p><input type="button" value="TEBAK" name="B1" onclick="test()"></p>
</form>
</body>
</html>Hasil:
Bila input bilangan genap:
Bila input bilangan ganjil:
Form Button
<html>
<head>
<title>objek document</title>
</head>
<body>
<script language = "javascript">
<!--
function ubahWarnaLB(warna) {
document.bgColor = warna;
}
function ubahWarnaLD(warna) {
document.fgColor = warna;
}
//-->
</script>
<h1>tes</h1>
<form>
<input type="button" value="Latar Belakang Hijau" onClick="ubahWarnaLB('GREEN')">
<input type="button" value="Latar Belakang Putih" onClick="ubahWarnaLB('WHITE')">
<input type="button" value="Teks Kuning" onClick="ubahWarnaLD('YELLOW')">
<input type="button" value="Teks Biru" onClick="ubahWarnaLD('BLUE')">
</form>
<script language = "javascript">
<!--
document.write("Dimodifikasi terakhir pada " + document.lastModified);
//-->
</script>
</body>
</html>Hasil:
Apabila menggunakan latar belakang berwarna hijau, dan teks berwarna kuning
Apabila menggunakan latar belakang berwarna putih, dan teks berwarna biru
Pilihan menggunakan checkkbox dengan perhitungan otomatis
<html>
<head>
<title>Daftar Menu</title>
<script>
function hitung(ele) {
var total = document.getElementById('total').value;
var total = total ? parseInt(total) : 0;
var harga = 0;
if (ele.checked) {
harga = ele.value;
total += parseInt(harga);
} else {
harga = ele.value;
if (total > 0)
total -= parseInt(harga);
}
document.getElementById('total').value = total;
}
</script>
</head>
<body>
<label><input type="checkbox" value="5000" id="menu1" onClick="hitung(this);" /> Ayam Goreng Rp. 5.000</label><br />
<label><input type="checkbox" value="5000" id="menu2" onClick="hitung(this);" /> Tempe Goreng Rp. 5.000</label><br />
<label><input type="checkbox" value="2500" id="menu3" onClick="hitung(this);" /> Telur Dadar Rp. 2.500</label><br />
<strong>Total Bayar: Rp. <input id="total" type="text" /></strong>
</body>
</html>Hasil:
- Buat script untuk melakukan validasi pada isian form.
Jawaban
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validasi Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box;
}
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Form Pendaftaran</h2>
<form id="formPendaftaran" onsubmit="return validasiForm()">
<div class="form-group">
<label for="nama">Nama Lengkap:</label>
<input type="text" id="nama" name="nama">
<div class="error" id="errorNama"></div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<div class="error" id="errorEmail"></div>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div class="error" id="errorPassword"></div>
</div>
<div class="form-group">
<label for="konfirmasiPassword">Konfirmasi Password:</label>
<input type="password" id="konfirmasiPassword" name="konfirmasiPassword">
<div class="error" id="errorKonfirmasiPassword"></div>
</div>
<button type="submit">Daftar</button>
</form>
</div>
<script>
function validasiForm() {
// Reset error messages
document.getElementById('errorNama').textContent = '';
document.getElementById('errorEmail').textContent = '';
document.getElementById('errorPassword').textContent = '';
document.getElementById('errorKonfirmasiPassword').textContent = '';
// Get form values
const nama = document.getElementById('nama').value.trim();
const email = document.getElementById('email').value.trim();
const password = document.getElementById('password').value;
const konfirmasiPassword = document.getElementById('konfirmasiPassword').value;
let isValid = true;
// Validasi Nama
if (nama === '') {
document.getElementById('errorNama').textContent = 'Nama harus diisi';
isValid = false;
} else if (nama.length < 3) {
document.getElementById('errorNama').textContent = 'Nama minimal 3 karakter';
isValid = false;
}
// Validasi Email
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === '') {
document.getElementById('errorEmail').textContent = 'Email harus diisi';
isValid = false;
} else if (!emailPattern.test(email)) {
document.getElementById('errorEmail').textContent = 'Format email tidak valid';
isValid = false;
}
// Validasi Password
if (password === '') {
document.getElementById('errorPassword').textContent = 'Password harus diisi';
isValid = false;
} else if (password.length < 6) {
document.getElementById('errorPassword').textContent = 'Password minimal 6 karakter';
isValid = false;
}
// Validasi Konfirmasi Password
if (konfirmasiPassword === '') {
document.getElementById('errorKonfirmasiPassword').textContent = 'Konfirmasi password harus diisi';
isValid = false;
} else if (password !== konfirmasiPassword) {
document.getElementById('errorKonfirmasiPassword').textContent = 'Password tidak cocok';
isValid = false;
}
if (isValid) {
alert('Form berhasil dikirim!');
// Biasanya di sini akan ada pengiriman data ke server
}
return false; // Mencegah form submit untuk demo
}
// Validasi real-time
document.getElementById('nama').addEventListener('blur', function() {
const nama = this.value.trim();
if (nama === '') {
document.getElementById('errorNama').textContent = 'Nama harus diisi';
} else if (nama.length < 3) {
document.getElementById('errorNama').textContent = 'Nama minimal 3 karakter';
} else {
document.getElementById('errorNama').textContent = '';
}
});
document.getElementById('email').addEventListener('blur', function() {
const email = this.value.trim();
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === '') {
document.getElementById('errorEmail').textContent = 'Email harus diisi';
} else if (!emailPattern.test(email)) {
document.getElementById('errorEmail').textContent = 'Format email tidak valid';
} else {
document.getElementById('errorEmail').textContent = '';
}
});
</script>
</body>
</html>Hasil dari code diatas :
Bila sudah berhasil diisi akan muncul seperti ini :