Scribd
Unggah
19 tayangan12 halaman

P05 - Dasar Javascript

Ringkasan dokumen tersebut adalah: 1. Dokumen tersebut membahas tentang pemahaman dasar javascript dan kegunaannya. 2. Javascript dapat ditempatkan di dalam file yang sama atau terpisah, dan digunakan untuk menambahkan interaksi seperti alert, menyembunyikan/menampilkan elemen, dan validasi input form. 3. Contoh kode javascript digunakan untuk mendemonstrasikan fungsi-fungsi tersebut.

Diunggah oleh

Helen febrianti18
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
19 tayangan12 halaman

P05 - Dasar Javascript

Ringkasan dokumen tersebut adalah: 1. Dokumen tersebut membahas tentang pemahaman dasar javascript dan kegunaannya. 2. Javascript dapat ditempatkan di dalam file yang sama atau terpisah, dan digunakan untuk menambahkan interaksi seperti alert, menyembunyikan/menampilkan elemen, dan validasi input form. 3. Contoh kode javascript digunakan untuk mendemonstrasikan fungsi-fungsi tersebut.

Diunggah oleh

Helen febrianti18
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/ 12

Praktikum V

Pemrograman Web
Ringkasan
1. Memahami dasar javascript

2. Memahami kegunaan javascript

Penempatan Javascript
1. Javascript ditulis pada file yang sama ( halaman yang sama )

Javascript yang ditulis pada file yang sama bisa ditempatkan didalam body bahkan didalam
element html. Namun, pada umumnya untuk membuat file html lebih rapi dan mudah untuk
dibaca kembali penempatan javascript setelah tag <body>.

Berikut contoh javascript pada file yang sama.


<html>
<head>
<title>……….</title>
</head>
<body>
kode html disini
</body>
<script type=”text/javascript”>
/* kode javascript disini */
</script>
</html>

2. Javascript ditulis pada file terpisah

kode javascript dibuat dalam file terpisah dengan tujuan agar dokumen HTML isinya tidak terlalu
panjang. Tag HTML yang digunakan adalah sebagai berikut :

<script src=”namafile.js”></script>

1
Contoh Penerapan Javascript
1. Menampilkan alert ( peringatan )

Pada contoh di bawah ini, terdapat sebuah tombol yang akan memanggil fungsi `showAlert`
ketika diklik. Fungsi `showAlert` akan menampilkan pesan menggunakan fungsi `alert`, yang
akan muncul dalam sebuah dialog box pada layar. Pesan yang ditampilkan pada contoh di atas adalah
"Ini adalah contoh pesan menggunakan fungsi alert!".

Fungsi `alert` sangat berguna untuk memberikan informasi atau peringatan kepada pengguna.
Namun, terlalu banyak menggunakan fungsi alert pada halaman web dapat mengganggu pengalaman
pengguna dan sebaiknya digunakan secara bijak.

Screehshoot hasil latihan ubah judul :

-- letakan disini –

2
2. Menambahkan Interaksi pada halaman Web

JavaScript dapat digunakan untuk menambahkan interaksi pada halaman web. Contohnya, saat
pengguna mengklik tombol atau memasukkan data ke dalam form, JavaScript dapat merespons
dengan melakukan aksi tertentu seperti menampilkan pesan, menambahkan atau menghapus elemen
pada halaman, atau mengirim data ke server.

Buatlah file dengan nama js_ubah_judul.html

3
Screehshoot hasil latihan ubah judul :

-- letakan disini –

4
Buatlah file dengan nama js_sembunyi_elemen.html

5
Kita dapat menggunakan JavaScript untuk menampilkan atau menyembunyikan
elemen pada halaman web. Hal ini berguna untuk membuat tampilan yang dinamis,
misalnya saat tombol diklik maka elemen tertentu akan ditampilkan atau
disembunyikan.

Screehshoot hasil latihan ubah judul :

-- letakan disini –

6
3. Validasi pada Input Form

JavaScript dapat digunakan untuk melakukan validasi input pada form sebelum data
dikirim ke server. Contohnya, kita dapat mengecek apakah input berupa angka atau
karakter, apakah input terlalu panjang atau terlalu pendek, atau apakah input sudah
terisi dengan benar sebelum form dikirim.

7
Screehshoot hasil latihan ubah judul :

-- letakan disini –

8
9
Latihan Javascript
1. Buatkan file dengan nama latihan_js.html

2. Copy dan paste kode berikut ini :

<!DOCTYPE html>
<html>
<head>
<title>Contoh Alert JavaScript</title>
</head>
<body>
<form>
<label for="nama">Nama:</label>
<input type="text" id="nama">
<br>
<label for="umur">Umur:</label>
<input type="number" id="umur">
<br>
<button type="submit" onclick="validateForm()">Submit</button>
</form>

<script>
function validateForm() {
var nama = document.getElementById("nama").value;
var umur = document.getElementById("umur").value;

if (nama === "") {


alert("Nama harus diisi!");
return false;
}

if (umur === "" || isNaN(umur)) {


alert("Umur harus diisi dengan angka!");
return false;
}

alert("Form berhasil disubmit!");


return true;
}
</script>
</body>
</html>

10
Berikan Penjelasan hasil dari kode diatas !

* Formulir berisi dua kolom masukan: satu untuk nama ( nama) dan satu lagi untuk umur
( umur).

* Fungsi ini validateForm()dipanggil ketika tombol kirim diklik.

Di dalam fungsi, ia mengambil nilai input nama dan usia.

* Ia memeriksa apakah bidang nama kosong. Jika ya, pesan peringatan akan ditampilkan dan
kembali falseuntuk mencegah pengiriman formulir.

* Kemudian, ia memeriksa apakah bidang umur kosong atau bukan angka. Jika ya, pesan
peringatan lain akan ditampilkan dan kembali false.

* Jika kedua kolom lolos validasi, pesan berhasil akan ditampilkan dan dikembalikan true,
sehingga pengiriman formulir dapat dilanjutkan.

Kode ini memastikan bahwa pengguna memberikan masukan yang valid sebelum mengirimkan
formulir.

Berikut Hasilnya

11
12

Anda mungkin juga menyukai