Belajar html, css dan javascript sederhana

Atas dasar Hadist riwayat Ahmad yang berbunyi “ Sebaik-baik manusia adalah yang bermanfaat bagi orang lain”, maka dengan ini saya mencoba menshare sedikit ilmu tentang html, css, dan javascript sederhana untuk teman-teman yang membutuhkan.

Program ini saya buat untuk persiapan menghadapi quis Mata Kuliah Pemrograman Internet 1 di kampus, :D.

Tanpa basa-basi, langsung saja ya

Download source code nya di sini
Download juga gambar untuk bayangannya di sini

Tampilannya kurang lebih seperti berikut
Tampilan Utama

Simpan source code di atas dalam format *.html ya kemudian buka dengan menggunakan web browser kesayangan anda. Di sini saya menggunakan Mozilla firefox.

Diatas saya mengunakan beberapa function, diantaranya:

a. Function cekpelanggan() untuk menampilkan data pelanggan

b. Function cekgolongan() untuk menampilkan tarif per golongan

c. Function hitung_1() untuk menghitung jumlah pemakaian dan total tagihan

d. Function hitung_2() untuk menghitung kembalian

e. Function startTime() dan checkTime untuk menampilkan tanggal dan waktu

Sedikit penjelasan tentang potongan source code berikut

if (pln.nopel.value == “”)

{

alert(“Data Pelanggan Harus Diisi!”)

}

Source code di atas berfungsi ketika tombol Hitung diklik, namun pada field text No. Pelanggan tidak terisi, maka akan menampilkan pesan “Data Pelanggan Harus Diisi!”, dan seterusnya.

Sedangkan pada css (saya menggunakan css internal yang diletakkan di antara tag ) adalah sebagai berikut

input[type=”text”]:focus {

background: #FFCCCC;

}

Css di atas berfungsi untuk mengubah warna latar belakang text field saat kursor fokus.

Sekian, terima kasih atas perhatiannya. Source code ini sangat sederhana, silahkan teman-teman mengembangkan. Semoga berhasil 

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s