Cara Menyisipkan Gambar Dan Cara Mengganti Gambar Mengikuti Tombol - Part 2 (Javascript)

Niguru.com | Kamis, 28 Jan 2021 | Setelah pada posting sebelumnya Niguru.com menjelaskan mengenai langkah-langkah untuk menyusun script untuk menyisipkan gambar, maka pada posting kali ini Niguru.com akan menjelaskan cara untuk menampilkan gambar pada lokasi yang sama dengan pergantian gambar sesuai dengan tombol yang ditekan.

 Niguru.com akan mulai penjelasan dengan membuat tampilan HTML untuk menampilkan kalimat notifikasi dan tombol, dengan script sebagai berikut:

<h1>Belajar ID Pada Gambar</h1><h3>

Klik tombol untuk <font color="red">mengganti gambar:</font></h3>

<img id="01" src="cat.jpg" style="width:380px;height:380px">

<br>

<input type="button" value="RABBIT" onclick="rabbit()">

<input type="button" value="DOG" onclick="dog()">

<input type="button" value="CAT" onclick="cat()">

 

Simpan dengan nama CDR.html (boleh disimpan dengan nama lain):

 

Note:

CDR diambil dari singkatan "Cat Dog Rabbit".

Buka file CDR.html pada browser. Hasilnya:

 

Note:
Tombol sudah tersedia di bawah gambar, namun tidak terjadi apapun saat tombol ditekan, karena memang belum tersedia fungsi yang sesuai dengan tombol yang ditekan.

<script>

a="dog.jpg";b="cat.jpg";c="rabbit.jpg"

function dog(){document.getElementById("01").src=a}

function cat(){document.getElementById("01").src=b}

function rabbit(){document.getElementById("01").src=c}

</script>

Berikut ini hasilnya bila ditambahkan pada script HTML yang sudah dituliskan sebelumnya:

 

Jalankan kembali file CDR.hmtl pada browser. Hasilnya:

 

Bila tombol RABBIT ditekan, maka gambar akan berganti menjadi gambar kelinci:

 

Bila tombol DOG ditekan, maka gambar akan berganti menjadi gambar anjing:

Untuk lebih jelasnya silakan coba langsung pada aplikasi di bawah ini. Klik pada tombol untuk mengganti gambar:

Belajar ID Pada Gambar

Klik tombol untuk mengganti gambar:

Demikianlah penjelasan mengenai cara agar pengunjung website dapat mengganti-ganti gambar yang ditampilkan pada website.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

Menuliskan Komentar Pada HTML, Javascript, ASP, Atau PHP

Niguru.com | Selasa, 3 Nov 2020 | Pada pemrograman yang panjang seorang programmer perlu menuliskan komentar atau catatan disela-sela script yang dituliskan, agar saat melakukan pemeriksaan terhadap suatu kelompok program tertentu ia bisa mengetahui dengan pasti fungsi dari kelompok program tersebut berdasarkan komentar atau catatan yang dituliskannya.

Kali ini Niguru.com akan menjelaskan cara menuliskan komentar disela-sela script HTML, Javascript, ASP atau juga PHP, tanpa mempengaruhi kinerja program.

Niguru.com akan membahasnya satu-persatu, mulai dari HTML. Sintaks komentar pada HTML adalah:

<!-- komentar -->

Contoh:

<h1>

<!-- tulisan ini tidak tampil -->

<!-- karena dianggap sebagai komentar -->

Mari belajar HTML

<br>

Belajar HTML itu mudah

 

Hasilnya, bila ditampilkan pada browser maka komentar tidak ikut tampil dan tidak mempengaruhi eksekusi script yang lainnya:

 

Sintaks komentar pada Javascript adalah:

// komentar 

Contoh:

<h1>

<script>

// tulisan ini tidak tampil

// karena dianggap sebagai komentar

document.write("Mari belajar Javascript")

document.write("<br>")

document.write("Belajar Javascript itu mudah")

</script>

 

Hasilnya, bila ditampilkan pada browser maka komentar tidak ikut tampil dan tidak mempengaruhi eksekusi script yang lainnya:

 

Sintaks komentar pada ASP adalah:

' komentar 

Contoh:

<h1>

<%

' tulisan ini tidak tampil

' karena dianggap sebagai komentar

response.write("Mari belajar ASP")

response.write("<br>")

response.write("Belajar ASP itu mudah")

%>

 

 

Hasilnya, bila ditampilkan pada browser maka komentar tidak ikut tampil dan tidak mempengaruhi eksekusi script yang lainnya:

 

 

Sintaks komentar pada PHP adalah:

// komentar satu baris

# komentar satu baris

/* 

komentar beberapa baris

Baris kedua

Baris ketiga

Baris ke n 

*/

Contoh:

<h1>

<?php

// tulisan ini tidak tampil

# karena dianggap sebagai komentar

echo("Selamat pagi teman-teman");

echo("<br>");

echo("Apa kabar semuanya?");

echo("<br><br>");

/*

tulisan ini tidak tampil

karena dianggap sebagai komentar

*/

echo("Mari belajar PHP");

echo("<br>");

echo("Belajar PHP itu mudah");

?>

 

Hasilnya, bila ditampilkan pada browser maka komentar tidak ikut tampil dan tidak mempengaruhi eksekusi script yang lainnya:

Demikianlah penjelasan mengenai cara menuliskan komentar pada HTML, Javascript, ASP atau PHP.

Semoga penjelasan pada posting ini dapat menambah wawasan dan pengetahuan bagi teman-teman pembaca sekalian.

Selamat beraktivitas .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

Input Optionbutton Pada Javascript

Niguru.com | Rabu, 7 Okt 2020 | Salah satu bentuk fasilitas input yang juga seringkali dipergunakan oleh penyedia layanan berbasis IT adalah input dengan menggunakan optionbutton, yaitu tombol yang tampil seperti titik berukuran besar atau seperti tombol volume pada radio manual (mungkin itu sebabnya tombol ini juga disebut sebagai radiobutton).

Berbeda dengan checkbox yang biasanya digunakan untuk suatu form digital dengan input yang memungkinkan user membatalkan pilihan, pada optionbutton biasanya terdapat suatu tombol untuk reset bila user membatalkan pilihan.

Berikut ini sintaks untuk membuat optionbutton pada HTML:

<input type="radio">

Dalam kondisi non aktif radiobutton memiliki nilai = false. Bila diaktifkan maka akan menghasilkan nilai = true.

Perhatikan pada contoh berikut ini:

<h1>Belajar Input Radiobutton</h1>

<big><big>Klik pohon yang kamu pilih</big>

<br>----------------------------<br>

<form>

<input type="radio" id="Kelapa">Kelapa<br>

<input type="radio" id="Karet">Karet<br>

<input type="radio" id="Beringin">Beringin<br>

<input type="radio" id="Kaktus">Kaktus<br>

<input type="button" value="Kirim Data" onclick="pilih(this.form)">

<input type="reset" value="Hapus"></form>

<script>

function pilih(obj){

a=obj.Kelapa.checked

b=obj.Karet.checked

c=obj.Beringin.checked

d=obj.Kaktus.checked

e="&#9658 Pohon"

document.write("<h1>Belajar Input Radiobutton</h1>")

document.write("<big>--------------------------<br>")

document.write("Kamu memilih:<br>")

if (a==true) { document.write(e," Kelapa<br>")}

if (b==true) { document.write(e," Karet<br>")}

if (c==true) { document.write(e," Beringin<br>")}

if (d==true) { document.write(e," Kaktus<br>")}

}</script>

 

Simpan dengan nama radioBtn01.html:

 

Buka file radioBtn01.html pada browser. Hasilnya:

 

Klik pada optionbutton yang dipilih > klik Kirim Data:

 

Hasilnya:

Demikianlah penjelasan mengenai cara menangani input berupa optionbutton pada aplikasi pemrograman Javascript.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

4 Langkah Mudah Untuk Mewujudkan Proses Kirim Dan Terima Data Antara HTML Dan Javascript

Niguru.com | Jumat, 2 Okt 2020 | Dalam penulisan program dengan menggunakan bahasa pemrograman Javascript terdapat pemisahan area Javascript dengan area HTML. Area Javascript dibatasi dengan tag awal /pembuka: <script>, dan tag akhir /penutup </script>.

 Pada posting kali ini Niguru.com akan menjelaskan mengenai cara mengirimkan dan menerima data diantara HTML dan Javascript. Dengan demikian komunikasi antara HTML dengan Javascript menjadi lebih mudah dibangun.

1. Buat <form> </form> sebagai area pembatas pada HTML.

2. Buat input object di dalam area form dan beri ID

3. Kirim dengan argumen atau parameter: this form.

4. Pada Javascript buat function dengan argumen: obj.

Dengan 4 cara di atas maka setiap input object yang ada di dalam area form pada HTML akan dikenali oleh Javascript.

Berikut ini contohnya:

<h1>Baca nilai/value input HTML</h1>

<form>

<input type="text" id="a1"><br>

<input type="text" id="a2"><br>

<input type="text" id="a3"><br>

<input type="button" value="Kirim Data" onclick="pilih(this.form)">

</form>

<script>

function pilih(obj){

var a=obj.a1.value

var b=obj.a2.value

var c=obj.a3.value

document.write("<h1>")

 

document.write("<br>ID a1: ",a)

document.write("<br>ID a2: ",b)

document.write("<br>ID a3: ",c)}

</script>

 

Simpan dengan nama HTML2JS.html:

 

Hasilnya:

 

Ketikkan sembarang nilai pada kolom input > klik Kirim Data:

 

Hasilnya:

 

Coba lagi input nilai lain (misal: text atau string) > klik Kirim Data:

 

Hasilnya:

Demikianlah penjelasan mengenai cara berkirim terima data antara HTML dan Javascript.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

Operasi Date Dan Time Pada Javascript - Part 2 (Jam, Menit, Detik)

Niguru.com | Sabtu, 12 Sep 2020 | Pada posting sebelumnya sudah dijelaskan bahwa dalam pembuatan aplikasi dimana user harus menginput data berupa tanggal atau waktu, biasanya di dalam program tersebut terdapat suatu fungsi perhitungan yang menggunakan tanggal atau waktu. 

Posting kali ini melanjutkan posting sebelumnya yang sudah menjelaskan mengenai operasi yang berkaitan dengan tanggal. Maka kali ini Niguru.com akan melanjutkan dengan penjelasan yang terkait dengan waktu.

Untuk mendapatkan atau menuliskan nilai waktu menggunakan function new Date() yang sudah dijelaskan pada posting sehari sebelumnya.

Sedangkan untuk mendapatkan nilai waktu dari new Date() menggunakan atribut lanjutan sebagai berikut:

new Date().getHours() untuk mengambil jam new Date().getMinutes() untuk mengambil menit

new Date().getSeconds() untuk mengambil detik

Perhatikan pada contoh berikut ini:

<h1>Javascript</h1>

<h3>Penulisan tanggal dan waktu</h3>

<script>

var a=new Date()

document.write(a,"<br>")

var jam=a.getHours()

var menit=a.getMinutes()

var detik=a.getSeconds()

</script>

Jam: <script>document.write(jam)</script><br>

Menit: <script>document.write(menit)</script><br>

Detik: <script>document.write(detik)</script><br>

 

Simpan dengan nama dateTime05.html:

 

Buka file dateTime05.html pada browser. Hasilnya:

Demikianlah penjelasan mengenai operasi date dan time pada Javascript. 

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

Operasi Date Dan Time Pada Javascript - Part 1 (Tanggal, Bulan, Tahun)

Niguru.com | Jumat, 11 Sep 2020 | Dalam pembuatan aplikasi dimana user harus menginput data berupa tanggal atau waktu, biasanya di dalam program tersebut terdapat suatu fungsi perhitungan yang menggunakan tanggal atau waktu. Contoh paling sederhana untuk aplikasi yang butuh tanggal dan waktu adalah aplikasi daftar hadir karyawan.

Kali ini Niguru.com akan memperkenalkan perintah pada Javascript yang dapat digunakan untuk mengolah tanggal (tanggal, bulan, tahun) atau waktu (jam, menit, detik).

Javascript menyediakan function utama untuk keperluan ini, yaitu: new Date()

Function  ini digunakan untuk mendapatkan tanggal dan waktu hari ini. 

Contoh penggunaan:

Nama_variabel = new Date()

Penggunaan pada aplikasi sederhana, bisa dilihat pada contoh berikut:

<h1>Javascript</h1>

<h3>Penulisan tanggal dan waktu</h3>

<script>

var a=new Date()

document.write(a)

</script>

 

Saat ditampilkan pada browser:

 

Untuk mengisi new Date dengan data tanggal dan waktu maka harus diisi dengan format berikut ini:

new Date(year, month, day, hours, minutes, seconds, milliseconds)

year = tahun

month = bulan

day = tanggal

hours = jam

minutes = menit

seconds = detik

milliseconds = mili detik

Lihat pada contoh berikut:

<h1>Javascript</h1>

<h3>Penulisan tanggal dan waktu</h3>

<script>

var a=new Date(2018, 11, 24, 8, 8, 8, 8)

document.write(a)

</script>

 

Saat ditampilkan pada browser:

 

Komponen tanggal yang tidak diisi akan diisi dengan: 1 Januari 1970. Komponen waktu yang tidak diisi akan diisi dengan 0.

Perhatikan pada contoh berikut ini:

<h1>Javascript</h1>

<h3>Penulisan tanggal dan waktu</h3>

<script>

var a=new Date(2018,3,7)

document.write(a)

</script>

 

Saat ditampilkan pada browser:

 

 

Variabel tersebut dapat ditambah dengan atribut lanjutan untuk mengambil tanggal, bulan dan tahun, yang ada didalam function new Date() tersebut.

Sintaks penulisannya:

new Date().getFullYear() untuk mengambil tahun

new Date().getMonth() untuk mengambil bulan

new Date().getDate() untuk mengambil tanggal

Lihat pada contoh berikut:

<h1>Javascript</h1>

<h3>Penulisan tanggal dan waktu</h3>

<script>

var a=new Date()

document.write(a,"<br>")

var tahun=a.getFullYear()

var bulan=a.getMonth()

var tanggal=a.getDate()

</script>

Tahun: <script>document.write(tahun)</script><br>

Bulan: <script>document.write(bulan)</script><br>

Tanggal: <script>document.write(tanggal)</script><br>

 

 

Saat ditampilkan pada browser:

Note:

Javascript menampilkan angka bulan dari 0 .. 11. Misal: Januari sebagai 0 dan Desember sebagai 11. Maka pada contoh di atas April ditampilkan sebagai angka 3.

Demikianlah penjelasan mengenai operasi date dan time pada Javascript. Penjelasan pada posting ini akan dilanjutkan pada posting hari berikutnya.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

Berbagi Variabel Di Dalam Web Server Antara VBScript Dan Javascript

Niguru.com | Rabu, 9 Sep 2020 | Pada posting 2 hari sebelumnya, Niguru.com sudah menjelaskan mengenai cara untuk menjalankan program berbasis Javascript secara server side, sehingga semua pengolahan dilakukan di server dan source code tidak dapat terlihat di browser yang merupakan client.

Programmer dapat menggunakan secara bergantian VBScript dan Javascript dalam program yang dibuatnya, dan bila Javascript bekerja server side maka variabel yang terbentuk dapat digunakan oleh VBScript.

Sayangnya penggunaan variabel ini hanya bisa bekerja satu arah saja. VBScript bisa membaca variabel Javascript (yang server side), namun tidak sebaliknya.

Berikut ini contohnya:

<script runat=server language=javascript>

var a,b

a=10

b=20

</script>

<%

dim c,d,e

c=a*2

d=b/4

e=c+d

%>

<h1>Variabel Javascript n VB<br>

e: <% =e %>

</h1>

 

Simpan dengan nama VBnJS01.asp:

 

Buka file VBnJS01.asp pada browser. Hasilnya:

Demikianlah penjelasan mengenai cara berbagi variabel di dalam web server antara VBScript dengan Javascript.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)

Transfer Data Berupa Teks (String) Dari Server Ke Client Sebagai Bagian Dari Kolaborasi ASP Dan Javascript

Niguru.com | Senin, 7 Sep 2020 | Seperti yang sudah dijelaskan pada posting sehari sebelumnya, bahwa seringkali seorang programmer perlu menggabungkan pengolahan data pada server dengan pengolahan data pada client. 

Pada posting sehari sebelumnya sudah dijelaskan mengenai cara mentransfer data berupa angka dari server ke client, maka pada posting kali ini Niguru.com akan menjelaskan cara mentransfer data berupa teks. Perlu dijelaskan terpisah karena caranya berbeda.

Untuk memperjelas bedanya Niguru.com akan membagikan script contoh yang serupa dengan script untuk mengirim angka dari server ke client, namun ini untuk mengirim teks atau string dari server ke client:

 

Simpan dengan nama bacaVariabel02.asp:

 

Buka file bacaVariabel02.asp pada browser. Hasilnya:

 

Note:

b: tampil "undefined" padahal seharusnya menampilkan kata "Indonesia" yang merupakan konten variabel a, sumber dari variabel b.

 

Solusinya adalah dengan menambahkan tanda petik tunggal di awal dan di akhir data teks atau string yang akan di kirimkan. Berikut ini contohnya:

<%

dim a,e

a="Indonesia"

e="'"&a&"'"

%>

<script>

var b

b=<% =e %>

</script>

<h1>Menampilkan variabel</h1><h3>

<br>Dari ASP ke Javascript<br>

a: <% =a %><br>

-----------------------<br>

<script>

document.write("b: ",b,"<br>")

</script>

</h3>

 

Simpan dengan nama bacaVariabel03.asp:

 

Buka file bacaVariabel03.asp pada browser. Hasilnya:

 

Note:

Data dari variabel a ditransfer ke variabel e dengan ditambah tanda petik tunggal. Javascript mengambil data variabel e, yang sudah dilengkapi tanda petik tunggal. 

Demikianlah penjelasan mengenai cara transfer data antara VBScript yang berada di server dan Javascript yang ada di client.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)