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:

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 HTML
Sobat dapat menghapus elemen HTML
Sobat dapat membuat elemen HTML yang baru
Sobat dapat menyealin dan mengkloning elemen HTML
Dan 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://lh4.googleusercontent.com/-H1JOSbB6kbs/VGdntP_vF6I/AAAAAAAAALQ/B8R-tCWFvwY/w200-h121-no/image1.gif" width="180" />
<script>
function ubahimage() {
var image = document.getElementById('myImage');
if (image.src.match("https://lh3.googleusercontent.com/-TEmAm9zzgOo/VGdntCAGNyI/AAAAAAAAALU/d7fLk_FrY3I/w200-h121-no/image2.gif")) {
image.src = "https://lh4.googleusercontent.com/-H1JOSbB6kbs/VGdntP_vF6I/AAAAAAAAALQ/B8R-tCWFvwY/w200-h121-no/image1.gif";
} else {
image.src = "https://lh3.googleusercontent.com/-TEmAm9zzgOo/VGdntCAGNyI/AAAAAAAAALU/d7fLk_FrY3I/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.

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:

Sekian untuk tutorial Contoh Penerapan Javascript pada HTML dan CSS, kita akan lanjutkan kembali tutorial Javascript di tutorial berikutnya

BAGIKAN HALAMAN INI DI :

Contoh Penerapan Javascript pada HTML dan CSS

Contoh Penerapan Javascript pada HTML dan CSS

HTML Document Object Model (DOM)

JavaScript Pertama Sobat

Apa yang bisa sobat lakukan dengan JavaScript pada HTML??:

Merubah Style HTML (CSS) dengan JavaScript:

JavaScript Pertama Sobat

0 Response to "Contoh Penerapan Javascript pada HTML dan CSS"

Posting Komentar