Postingan lainnya
Show Password Using Javascript
I N T R O D U C T I O N woke, kali uka bakalan buat tutorial tentang javascript. jadi tutorial ini diperuntukkan untuk newbie banget, jadi yang udah master jangan ngeledek, tapi kalo mau nyimak jga boleh kok. tutorial ini bakalan ngebahas tentang penerapan event di javascript dengan contoh studi kasus di javascript. oh iyah kita bakalan menggunakan pure javascript (baca: murni). prasyarat sebelum belajar 1. javascript basic 2. javascript DOM (event onclick) 3. kemauan yang keras
I D E A & C O N C E P T Sesuai dengan judul yang uka tulis diatas, jadi kita bakalan nampilin value inputan password yang enggak keliatan (baca: bulat2 gitu loh) supaya keliatan. nah gimana caranya "ada aqua" eh salah ada ide. Ayo dong "mikir" gimana gimana enggak ketemu. oke deh uka kasih tau rubah aja typenya yang tadinya "type='password'" jadi typenya "type='text'" ketika diklik suatu tombol oleh user sederhana kan. ok deh langsung aja kita mulai.
C O D I N G sekarang kita bakalan koding jadi supaya ngegampangin kita bakalan taruh script javascriptnya satu file dengan file htmlnya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Implementasi Javascript</title>
</head>
<body>
<input type="password" placeholder="password" id="password">
<button onclick="show()">Show Password</button>
<script>
/* Show Password */
function show(){
var password = document.getElementById('password'),
button = document.getElementsByTagName('button')[0];
if(button.textContent === 'Show Password'){
password.setAttribute('type', 'text');
button.textContent = 'Hide Password';
}else{
password.setAttribute('type', 'password');
button.textContent = 'Show Password';
}
return false;
}
</script>
</body>
</html>
woke kita bahas satu persatu setelah tag body kita buat tag input dengan type password dan kasih id password lalu dibawahnya kita buat tombol dan kasih event onclick show() dan isinya Show Password. setelah itu kita buat javascript melalui tag script dan buat fungsi show() yang udah dikasih event onclick (sebenarnya ada banyak cara untuk membuat event tapi ini yang paling gampang) setelah itu kita buat variable password dan button yang bakalan dapetin id dan nama tag dari input dan buttonnya. udah gitu sebenarnya disini kita bisa langsung tanpa kondisi tapi kita ga bisa ubah text dari buttonnya (catatan: textContent adalah method built-in di javascript yang akan mereturn nilai dari contentnya) jadi kita pasang kondisi dimana kalo text buttonnya === 'Show Password' maka kita mau ngubah type nya yang tadinya "password" kita ubah jadi "text" lalu kita ubah juga text content dari 'Show Password' jadi 'Hide Password'. kalo enggak (baca: else artinya kondisi buangan alias tidak memnuhi kondisi pertama text button nya bukan 'Show Password) kita mau ubah balikin lagi yang tadinya typenya "text" kita jadi "passwor" lagi dan rubah juga text contentnya jadi 'Show Password' lagi. terakhir kita return false supaya element DOM (seperti tag a, submit dan button dalam form) itu punya sifat asli pindah halaman (baca: ngereload) enggak dieksekusi.
woke selesai juga tutorialnya. ini tutorial sederhana tapi idenya bagus. sekian aja dari uka harap maklum kalau kata orang sunda mah masih "pabaliut" terlalu banyak buat makalah sih. salam coding dari mahasiswaGEEK
