Wednesday 20 July 2016

nn

Menampilkan Foto Ketika Button di Klick Menggunakan Javascript

Hallo...
Semangat Pagi !

Dalam postingan saya kali ini, kita akan belajar tentang Javascript.



Pengertian :

JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client.

Alat & Bahan :

1. Laptop / Komputer.
2. Sublime Text.

Tahap Pelaksanaan :

Silahkan buka sublime text anda dan buat  file baru dengan nama awal.php dan simpan lah di dalam folder htdocs pada local disk c anda.

tulislah script ini

<html>
<head><title>Latihan</title></head>
<body>
<p id="demo">Ketika Button di klik, teks ini akan hilang, dan akan muncul foto</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = '<img width=200px height=200px src=a.jpg><h1>Hallo World, Latihan Javascript!</h1> '">Klik Saya</button>
</body>
</html>

a.jpg => adalah nama dan exstensi dari foto yang kita tampilkan, silahkan sesuaikan dengan foto yang akan anda tampilkan.

Sedikit penjelasan, document.getElementById('demo') akan menampilkan data di dalam tag yang mempunyai id="demo" dalam script di atas id="demo" dimiliki oleh <p> maka di dalam <p>..</p> akan hilang dan berganti ketika button di klik.
Didalam .innerHTML = '.....' anda dapat memasukkan tag html sesuai keinginan anda.

Referensi :

http://www.duniailkom.com/tutorial-belajar-javascript-pengertian-dan-fungsi-javascript-dalam-pemograman-web/

Penutup :

Selamat mencoba dan selamat belajar ! Semoga postingan ini dapat berguna bagi anda.

nn

About nn -

Author Description here.. Nulla sagittis convallis. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.

Subscribe to this Blog via Email :