November 2015 ~ Tulisan Capung

Kamis, 19 November 2015

JavaScript HTML DOM Animation

Posted on 00.25 by Unknown

Animasi JavaScript dilakukan oleh pemrograman perubahan bertahap dalam gaya elemen.

Perubahan tersebut disebut dengan timer. Ketika interval waktu kecil, animasi terlihat terus menerus.

<!DOCTYPE html>

<html>

<style>

#container {

width: 400px;

height: 400px;

position: relative;

background: yellow;

}

#animate {

width: 50px;

height: 50px;

position: absolute;

background-color: red;

}

</style>

<body>

<div id ="container">

<div id ="animate"></div>

</div>

<br>

<button onclick="move()">Click Me</button>

<script>

function move() {

var elem = document.getElementById("animate");

var pos = 0;

var id = setInterval(frame, 5);

function frame() {

if (pos == 350) {

clearInterval(id);

} else {

pos++;

elem.style.top = pos + 'px';

elem.style.left = pos + 'px';

}

</script>

</body>

</html>

Klik tombol berikut untuk melihat demo code diatas.

Try it yourself »

Sumber: w3schools

Posted in Belajar, JavaScript | No comments

JavaScript Form Validation

Posted on 00.10 by Unknown

Validasi form HTML bisa dilakukan oleh JavaScript.

Jika bentuk field (fname) kosong, fungsi ini memberi pesan peringatan, dan mengembalikan false, untuk mencegah form isian kosong:

<!DOCTYPE html>

<html>

<head>

<script>

function validateForm() {

var x = document.forms["myForm"]["fname"].value;

if (x == null || x == "") {

alert("Name must be filled out");

return false;

}

</script>

</head>

<body>

<form name="myForm" action="demo_form.asp"

onsubmit="return validateForm()" method="post">

Name: <input type="text" name="fname">

<input type="submit" value="Submit">

</form>

</body>

</html>

Fungsi JavaScript tersebut dapat dipanggil ketika form di submit. Berikut gambar validasi code diatas.

Berikut bentuk lain validasi Form HTML menggunakan JavaScript seperti contoh dibawah ini.

<!DOCTYPE html>

<html>

<body>

<form action="demo_form.asp" method="post">

<input type="text" name="fname" required>

<input type="submit" value="Submit">

</form>

</body>

</html>

Berikut gambar hasil dari code diatas.

	Validasi form HTML diatas tidak bekerja di Internet Explorer 9 atau sebelumnya.

Sumber : w3schools

Posted in Belajar, JavaScript | No comments

Sunrise

Sunset

Romantic

Beautiful Beaches

Fisherman

Forest

Nature

Lake

Fall in Love

Kamis, 19 November 2015

JavaScript HTML DOM Animation

<!DOCTYPE html>

<html>

<style>

#container {

width: 400px;

height: 400px;

position: relative;

background: yellow;

}

#animate {

width: 50px;

height: 50px;

position: absolute;

background-color: red;

}

</style>

<body>

<div id ="container">

<div id ="animate"></div>

</div>

<br>

<button onclick="move()">Click Me</button>

<script>

function move() {

var elem = document.getElementById("animate");

var pos = 0;

var id = setInterval(frame, 5);

function frame() {

if (pos == 350) {

clearInterval(id);

} else {

pos++;

elem.style.top = pos + 'px';

elem.style.left = pos + 'px';

}

}

}

</script>

</body>

</html>

JavaScript Form Validation

<!DOCTYPE html>

<html>

<head>

<script>

function validateForm() {

var x = document.forms["myForm"]["fname"].value;

if (x == null || x == "") {

alert("Name must be filled out");

return false;

}

}

</script>

</head>

<body>

<form name="myForm" action="demo_form.asp"

onsubmit="return validateForm()" method="post">

Name: <input type="text" name="fname">

<input type="submit" value="Submit">

</form>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<form action="demo_form.asp" method="post">

<input type="text" name="fname" required>

<input type="submit" value="Submit">

</form>