Artikel ini merupakan contoh dari kelanjutan artikel sebelumnya yaitu tentang JavaScript Events. JIka anda belum membacanya saya sarankan anda untuk melihat isi link tersebut.
Okey langsung saya berikut contoh dari penerapan HTM JavaScript Events :
contoh 1
<html>
<head>
<script language="javascript">
function mouseEvents(x,clrBg,clrFn,note){
x.style.backgroundColor = clrBg;
x.style.color = clrFn;
x.innerHTML = note;
}
</script>
</head>
<body>
<div style="background-color:$fff;text-align:center;padding:5px;width:100px;height:100px;border:1px solid #333;" onclick="mouseEvents(this,'#00f','#fff','Mouse On Click')"
onmouseover="mouseEvents(this,'#0f0','#000','Mouse On Over')"
onmouseout="mouseEvents(this,'#eee','#f33','Mouse On Out')">
Test and Click Me
</div>
<body>
</html>
Output :
<head>
<script language="javascript">
function mouseEvents(x,clrBg,clrFn,note){
x.style.backgroundColor = clrBg;
x.style.color = clrFn;
x.innerHTML = note;
}
</script>
</head>
<body>
<div style="background-color:$fff;text-align:center;padding:5px;width:100px;height:100px;border:1px solid #333;" onclick="mouseEvents(this,'#00f','#fff','Mouse On Click')"
onmouseover="mouseEvents(this,'#0f0','#000','Mouse On Over')"
onmouseout="mouseEvents(this,'#eee','#f33','Mouse On Out')">
Test and Click Me
</div>
<body>
</html>
Output :
Test and Click Me
Keterangan :
1. Background dasar dari elemen div tersebut adalah Putih
2. Ketika pointer pindah ke elemen div makan background akan berganti menjadi hijau
3. Ketika pointer di click di elemen tersebut background akan menjadi biru
4. Dan ketika pointer meninggalkan element tersebut background akan menjadi abu-abu
Contoh 2 :
<html>
<head>
<script language="javascript">
function formEvents(x,clrBg,clrFn,note){
x.style.backgroundColor = clrBg;
x.style.color = clrFn;
}
function submitForm(){
alert("Terima kasih!");
}
</script>
</head>
<body>
<div style="" >
<form onsubmit="submitForm()">
Nama : <input type="text" name="text" onfocus="formEvents(this,'#00f','#fff','Mouse On Click')" /><br />
<input type="submit" value="Kirim" />
</form>
</div>
</body>
</html>
Output :
<head>
<script language="javascript">
function formEvents(x,clrBg,clrFn,note){
x.style.backgroundColor = clrBg;
x.style.color = clrFn;
}
function submitForm(){
alert("Terima kasih!");
}
</script>
</head>
<body>
<div style="" >
<form onsubmit="submitForm()">
Nama : <input type="text" name="text" onfocus="formEvents(this,'#00f','#fff','Mouse On Click')" /><br />
<input type="submit" value="Kirim" />
</form>
</div>
</body>
</html>
Output :
Keterangan :
1. Ketika pointer focus pada input form, maka backgound field input akan menjadi biru
2. Ketika form di submit akan memunculkan alert
Sedikit tulisan ini semoga bermanfa'at....
Tank's ^_^
Terima kasih atas artikel nya kak 😃 sangat membantu sekali dalam proses belajar saya,awalnya kurang paham tentang javascript,sekarang sudah sedikit paham cara penerapan javascript terima kasih 👍.
BalasHapusArdandysyah/1922500080
https://www.atmaluhur.ac.id