Howto,
Message Box pada Javascript
Message Box pada Javascript sering juga disebut sebagai Popup Box. Message Box biasanya digunakan untuk membuat sebuah konfirmasi atau pemberitahuan yang penting. Message Box atau Popup Box terdiri dari 3 jenis, yaitu Alert Box, Confirm Box dan Prompt Box. Apa aja bedanya, yuk lanjut dibacaa... :)
1. Alert Box
Alert Box biasanya digunakan memberitahu suatu informasi ke user. Ketika Popup Alert muncul, user hanya dapat mengklik tombol "OK"
Syntax:
window.alert("Teks yang ingin ditampilkan");
atau
alert("Teks yang ingin ditampilkan");
atau
alert("Teks yang ingin ditampilkan");
Contoh:
<html>
<body>
<p>Klik tombol untuk menampilkan Alert Box</p>
<button onclick="myFunction()">Coba</button>
<script>
function myFunction() {
alert("Hello World");
}
</script>
</body>
</html>
Maka yang akan ditampilkan adalah :
2. Prompt Box
Prompt Box biasanya digunakan jika kamu menginginkan user untuk menginputkan value sebelum melakukan sebuah proses. Ketika popup Prompt Box muncul, user harus mengklik tombol "OK" atau "Cancel" untuk melakukan proses inputan yang telah dimasukkan. Jika mengklik OK maka value inputan akan diproses, jika "Cancel" maka akan return Null.
Syntax:
window.prompt("Teks yang ingin ditampilkan","defaultText");
Contoh:
<html>
<body>
<p>Klik tombol untuk menampilkan Prompt Box</p>
<button onclick="myFunction()">Coba</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
var person = prompt("You seems to be new user, Please enter your full name to use chat group","Your Name Here");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</script>
</body>
</html>
Maka yang akan ditampilkan adalah :
window.confirm("Teks yang ingin ditampilkan");
Contoh:
<html>
<body>
<p>Klik tombol untuk menampilkan Confirm Box</p>
<button onclick="myFunction()">Coba</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
if (confirm("Are you sure you want to continue?") == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Maka yang akan ditampilkan adalah :
Prompt Box biasanya digunakan jika kamu menginginkan user untuk menginputkan value sebelum melakukan sebuah proses. Ketika popup Prompt Box muncul, user harus mengklik tombol "OK" atau "Cancel" untuk melakukan proses inputan yang telah dimasukkan. Jika mengklik OK maka value inputan akan diproses, jika "Cancel" maka akan return Null.
Syntax:
window.prompt("Teks yang ingin ditampilkan","defaultText");
Contoh:
<html>
<body>
<p>Klik tombol untuk menampilkan Prompt Box</p>
<button onclick="myFunction()">Coba</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
var person = prompt("You seems to be new user, Please enter your full name to use chat group","Your Name Here");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</script>
</body>
</html>
Maka yang akan ditampilkan adalah :
3. Confirm Box
Confirm Box biasanya digunakan jika diperlukan user untuk melakukan verifikasi atau melakukan konfirmasi sesuatu. Ketika confirm box muncul maka user dapat meng-klik "OK" atau "Cancel". Jika user meng-klik "OK" maka akan bernilai true, jika meng-klik "Cancel" maka akan bernilai false.
Syntax:window.confirm("Teks yang ingin ditampilkan");
Contoh:
<html>
<body>
<p>Klik tombol untuk menampilkan Confirm Box</p>
<button onclick="myFunction()">Coba</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
if (confirm("Are you sure you want to continue?") == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Maka yang akan ditampilkan adalah :
Sekian....semoga membantu buat kamu-kamu yang membutuhkan ya :)
mantap gan, kalo untuk memunculkan message setelah seseorang mengklik ada caranya?
BalasHapusMengklik apa? Kalau berupa button silahkan mencoba script diatas
BalasHapustanya sis, kalo ingin menampilkan script nomor 3 di salah satu postingan gimana ya ?
BalasHapussoalnya ane udah coba tapi di semua postingan muncul confirm box
tolong dibantu sis
kalau tanpa harus mengklik gimana ya caranya buat yang promt boxnya...
BalasHapus