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:
JavaScript dapat merubah sebuah conten pada element HTML:
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??:
Dalam contoh ini akan mengubah nilai atribut dari sumber (src) dari dari kode elemen HTML <img />:
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.
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:
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
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>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:
<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>
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 :)
Dalam contoh ini akan mengubah nilai atribut dari sumber (src) dari dari kode elemen HTML <img />:
<!DOCTYPE html>Hasil dari deretan kode diatas:
<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:
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>Dari deretan kode diatas akan menampilkan perubahan style pada elemen HTML dibawah ini:
<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>
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>Dari deretan kode diatas akan menghasilkan validasi input dibawah ini:
<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>
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
blajar lagi javascript niee
ReplyDeletebos gimana bikin javascript bahasa daerah yang bisa di gunakan untuk bahasa fb????
ReplyDeletemaksudnya gimana gan? contohnya?
DeleteLanjutkan gan dan
ReplyDeletejangan lupa mampir di My blog
Nice. Tx Sangat membantu
ReplyDeleteNice. Tx Sangat membantu
ReplyDeletedirect link <a href="https://www.instagram.com/halma08/</a>
ReplyDeletemantap gan
ReplyDeleteMy blog
nice blog...
ReplyDeleteMy blog
This comment has been removed by the author.
ReplyDeleteterima kasih ilmunya kak. ini sangat bermanfaat bagi saya kak.
ReplyDeleteMy blog
Kalo coding keg gitu harus hafal yah gan? Atau kita coba2 aja di aplikasi html. Kalo iya harus hafal share ilmunya dong.
ReplyDeleteNice post :)
belajar javascript
ReplyDeleteblog saya
Saya blum ngerti
ReplyDeletekak, apakah coding HTML itu bisa dipake ke javascript? mohon di jelaskan ya kak, terimakasih
ReplyDeletejangan lupa kunjungi website kampus saya : http://www.atmaluhur.ac.id
dan website saya juga : http://ninabella.mahasiswa.atmaluhur.ac.id/
artikel contoh penerapan java script pada html sangat menarik dan cara pembelajarannyapun cukup mudah.. thanks gan
ReplyDeleteKunjungi website kampus saya http://www.atmaluhur.ac.id/
Kunjungi website saya https://hiko.mahasiswa.atmaluhur.ac.id
Belajar dan pahami isi dari (tag)/fungsi fungsi yg lainnya,karna pemerograman kayak gini bukan di hafal tapi gimana cara peng-aplikasiannya
ReplyDeleteThanks Min atas artikelnya,memudahkan saya dalam memahami bagaimana kerja javascript pada pemprograman web pada html gua,sekarang udah ngerti gmna cara nya.ditambah ada foto langkah” yg admin berikan.Seemangat terus min dalam artikelnya supaya dalam membantu dan menolong orang lain Aamiin
ReplyDeletePerkenalkan Nama saya Dhita Heru Pambudi
Kunjungi website kampus kami https://www.atmaluhur.ac.id/
Makasih :)
Terimakasih kak untuk artikelnya. Dari artikel ini saja menjadi tau bagaimana penerapan javascript pada html. Apalagi untuk saya yang baru belajar tentang pemprograman web. Tetap semangat ya kak membuat artikelnya. Ditunggu karya-karya selanjutnya. Ohh ya perkenalkan nama saya Sri Rezeki. Kunjungi website kampus kami https://www.atmaluhur.ac.id/
ReplyDeleteTerimakasih kak artikelnya sangat membantu saya tentang belajar bagaimana penerapan javascript pada html mudah di pahami.senantiasa untuk berbagi ilmu-ilmunya kak. Nama pauziah kunjungi website kampus kami https://www.atmaluhur.ac.id/
ReplyDeleteTerimakasih kak atas artikel yang kakak buat, ini sangat membantu saya yang baru belajar HTML, penyertaan coding sangat memudahkan saya untuk memahami nya, semoga kedepan admin bisa membuat artikel yang lebih bermanfaat lagi, perkenalkan nama saya Rian Cahya Fajar, mahasiswa dari kampus STMIK Atma Luhur, dan kunjungi website kami di https://www.atmaluhur.ac.id/
ReplyDeleteTerimakasih admin artikelnya membuat saya jadi mengerti tentang bagaimana cara kerja java script pada html.
ReplyDeleteArtikelnya sangat bermanfaat sekali.
Semngat dan lebih banyak upload artikel barunya ya admin. Perkenalkan saya Meilita Sari, website kampus saya https://www.atmaluhur.ac.id/
Makasih ya min artikelnya dapat dikatakan jelas dengan penerapan javascript pada html dan css smoga blog yg admin buat ini dapat bermanfaat bagi saya dan banyak orang.perkenalkan Nim 1922500184 Nama Martin Link kampus saya http://www.atmaluhur.ac.id
ReplyDeleteTerimakasih kak postingannya berguna sekali, tapi untuk penulisan disetiap kalimatnya mohon didetail lagi , terutama bagi Saya yang pemula , tapi variasi blog ini masih bisa saya coba. terus berkarya kak, bagikan ilmu yg bermanfaat Dan menarik lainnya, agar ramai pembaca untuk mengunjungi blog kakak. Perkenalkan nama saya : Shofi Rachmawati , NIM : 1922500133, Dan link kampus Saya : https://www.atmaluhur.ac.id
ReplyDeleteerimakasih kak artikelnya sangat membantu saya tentang belajar bagaimana penerapan javascript pada html mudah di pahami.senantiasa untuk berbagi ilmu-ilmunya kak. Nama famzi abel, nim 192250207, kelompok si2k, kunjungi website kampus kami https://www.atmaluhur.ac.id/
ReplyDeletemakasih admin artikelnya membuat saya jadi mengerti tentang bagaimana cara kerja java script pada html.
ReplyDeleteArtikelnya sangat bermanfaat sekali.
Semngat dan lebih banyak upload artikel barunya ya admin. Perkenalkan nama saya Muhammad Rafi kelompok SI2K,website kampus saya https://www.atmaluhur.ac.id/
Ok kak terimakasih atas artikelnya membantu saya dalam mengerjakan tugas html saya, next upload lgi yg lebih bergam kak, skian terima kasih klo ad komen sya yg tidak berkenan di hati kk
ReplyDeleteNama :Vallerey Oscar
Nim. :1922500128
Link kampus :https://mahasiswa.atmaluhur.ac.id/
Terina kak artikelnya sangat bagus sekali Dan mudah dipahami.artikelnya sangat bermanfaat untuk kami kak
ReplyDeleteKedepannya ditunggu Lagi kak artikel2nya. Nama inzaghi saputra, Nim 1922500112,kelompk si2k. https://www.atmaluhur.ac.id/