Contoh Penerapan Javascript pada HTML dan CSS

Seperti yang sudah saya sampaikan pada waktu sebelumnya pada tutorial pengenalan Javascript untuk pemula bahwa kali ini saya akan membahas mengenai penerapan Javascript
pada HTML dan CSS, mari kita mulai ke pada inti bahasan:

HTML Document Object Model (DOM)
HTML DOM merupakan standar yang resmi dari W3C dalam mengakses elemen-elemen HTML, sehingga Javascript dapat dengan mudah memanipulasi DOM atau isi dari perubahan HTML
untu lebih jelas nya akan saya berikan contoh:

 <!DOCTYPE html>
<html>
<body>

<h1>JavaScript Pertama Sobatt</h1>

<p>JavaScript dapat merubah sebuah conten pada element HTML:</p>

<button type="button" onclick="fungsiku()">Tekan Dsini!</button>

<p id="contoh">Ini hanya sebagai contoh.</p>

<script>
function fungsiku() { 
document.getElementById("contoh").innerHTML = "Hai.. JavaCript :)";
}
</script>

</body>
</html>


Contoh kode JavaScript diatas adalah merubah konten (innerHTML) dari sebuah elemen HTML yang di identifikasikan oleh id="contoh" seperti inilah cuplikan kode yang dimaksud document.getElementById("contoh").innerHTML = "Hai.. JavaCript :)"; metode document.getElementById() merupakan salah satu dari sekian banyak metode dari HTML DOM. Dan hasil dari sederetan kode JavaScript dalam memanipulasi elemen HTML:

JavaScript Pertama Sobat

JavaScript dapat merubah sebuah conten pada element HTML:

Tekan Dsini!

Ini hanya sebagai contoh.




Cobalah klik tombol "klik disini" dan lihat hasilnya, agar sobat lebih memahaminya praktekan sendiri oleh sobat.

Apa yang bisa sobat lakukan dengan JavaScript pada HTML??:
Sobat dapat merubah elemen HTMLSobat dapat menghapus elemen HTMLSobat dapat membuat elemen HTML yang baruSobat dapat menyealin dan mengkloning elemen HTMLDan tentunya masih banyak lagi :)Terdapat beberapa hal mengenai HTML DOM dalam tutorial ini, contoh lainnya adalah mengubah sebuah atribut HTML dengan JavaScript:
Dalam contoh ini akan mengubah nilai atribut dari sumber (src) dari dari kode elemen HTML <img />:

 <!DOCTYPE html>
<html>
<body>

<img height="100" id="myImage" myimage="" onclick="ubahimage()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvi506E8L5PYtVuUY5f8gn3du1yWoxuQKeiht1nocynkWMKrsnfHsUv93130wGRialEYwC3X8cbZI8jEYO23wBbOx5eoRQfkzTUeBbIQ9BBsxL9t7xYXmHbi7hfGE5M-UB2CRQEpAcZJZl/w200-h121-no/image1.gif" width="180" />
<script>
function ubahimage() {
var image = document.getElementById('myImage');
if (image.src.match("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO_FInyMUn4WFGK87xnBtioZ458h4vaCVD0vsJ0O74RRxmwBJRfdN5PxBk8oyjEmNJ0CGNH5RcobxOqsX_DnZJB0VbW0ilshuAwyZlZ9Sw_1-nSdHkJBPz1zRvAnzqu3EL1abJywGLQLFx/w200-h121-no/image2.gif")) {
image.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvi506E8L5PYtVuUY5f8gn3du1yWoxuQKeiht1nocynkWMKrsnfHsUv93130wGRialEYwC3X8cbZI8jEYO23wBbOx5eoRQfkzTUeBbIQ9BBsxL9t7xYXmHbi7hfGE5M-UB2CRQEpAcZJZl/w200-h121-no/image1.gif";
} else {
image.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO_FInyMUn4WFGK87xnBtioZ458h4vaCVD0vsJ0O74RRxmwBJRfdN5PxBk8oyjEmNJ0CGNH5RcobxOqsX_DnZJB0VbW0ilshuAwyZlZ9Sw_1-nSdHkJBPz1zRvAnzqu3EL1abJywGLQLFx/w200-h121-no/image2.gif";
}
}
</script>
</body>
</html>


Hasil dari deretan kode diatas:

Hasil dari deretan kode diatas:




Klik image diatas untuk agar berubah warnanya!
Dengan menggunakan JavaScript nyaris semua yang dapat dirubah pada atribut-atribut HTML, agar sobat dapat lebih memahaminya praktekan sendiri oleh sobat.

Merubah Style HTML (CSS) dengan JavaScript:
Merubah style pada elemen HTML merupakan varian dari merubah suatu atribut HTML.

 <!DOCTYPE html>
<html>
<body>

<h1>JavaScript Pertama Sobat</h1>

<p id="demo">Dengan JavaScript sobat dapat merubah style pada elemen HTML.</p>

<script>
function fungsiku() {
var x = document.getElementById("contoh");
x.style.fontSize = "25px"; 
x.style.color = "blue"; 
}
</script>

<button type="button" onclick="fungsiku()">Tekan disini!</button>

</body>
</html>


Dari deretan kode diatas akan menampilkan perubahan style pada elemen HTML dibawah ini:

JavaScript Pertama Sobat

Dengan JavaScript sobat dapat merubah style pada elemen HTML.


Tekan disini!

Dengan menggunakan JavaScript nyaris semua yang dapat dirubah pada nilai CSS, agar sobat dapat lebih memahaminya praktekan sendiri oleh sobat.

Memvalidasi Data dengan JavaScript
JavaScript seringkali digunakan untuk memvalidasi data input, kita lihat contoh kode untuk memvalidasi data input berikut:

 <!DOCTYPE html>
<html>
<body>

<p>Silahkan masukkan nomor antara dari 1 sampai 10:</p>

<input id="numb" type="number" />

<button type="button" onclick="fungsiku()">Submit</button>

<p id="angka"></p>

<script>
function fungsiku() {
var x, text;

//mendapatkan nilai dari field input dengan id="nomor"

x = document.getElementById("numb").value;

//jika x merupakan bukan sebuah angka, field input kosong, angka yang di masukkan kurang dari 1 atau lebih dari 10 maka akan ada keterangan "inputan tidak valid"
if (isNaN(x) || x < 1 || x > 10) {
text = "Inputan tidak valid";
} else {
text = "Input valid";
}
document.getElementById("angka").innerHTML = text;
}
</script>

</body>
</html>


Dari deretan kode diatas akan menghasilkan validasi input dibawah ini:

Silahkan masukkan nomor antara dari 1 sampai 10:

Submit




Sekian untuk tutorial Contoh Penerapan Javascript pada HTML dan CSS

Komentar

Posting Komentar

Postingan Populer