Latihan #2 Memperkenalkan Alert pada jQuery

Submitted by Author Site on Sunday, 12 May 2019 - 18:04

Pada latihan kali ini Kita akan membahas salah satu kehandalan jQuery yaitu fungsi Alert.

1. Buat sebuah folder yang bernama A2 yang didalamnya terdapat file index.html, alerts.js, dan style.css

2. Buat sebuah index.html

<!doctype html>

<html lang="en">

 

<head>

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="style.css ">

<script src="../jquery/jquery-3.4.0.min.js"></script>

<script src="alerts.js"></script>

<title>JQuery di Dunia Web</title>

</head>

 

<body>

<br>

<div class="container mt-4 text-center">

<h1>Memperkenalkan Alert pada jQuery</h1>

<br>

<div class="row">

<div class="col">

<button type="button" class="btn btn-primary btn-lg" id="klik">Hapus Judul</button>

<br>

</div>

</div>

</div>

 

<!-- Optional JavaScript -->

 

<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">

</script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">

</script>

</body>

 

</html>

2. Buat file alerts.js

 
$(document).ready(function () {
$("#klik").click(function () { // jika id 'klik' diklik maka jalankan function
alert("Yakin Mau Hapus Judulnya ?"); // menampilkan alert
$("h1").css("color", "white"); // element h1 akan diubah warnanya jadi putih
});
});
 

3. Buat file style.css

 
#klik {
padding: 25px;
text-align: center;
width: auto;
}
 

Kamu sudah belajar tentang alert pada jQuery. Selamat mencoba.