Tugas Gis 1 (Javascript)

SISTEM INFORMASI GEOGRAFISJAVASCRIPT

Oleh:Nyoman Adi Muliawan

1104505037JURUSAN TEKNOLOGI INFORMASI FAKULTAS TEKNIK

UNIVERSITAS UDAYANA

2014Tugas membuat Javascript:

Membuat sebuah form berisikan elemen berupa tetbox yang menyimpan tipe data integer, double dan string. Dimana nanti pada ketiga elemen tersebut dilakukan operasi perhitungan seperti tambah, kurang, kali dan bagi. Dan berisi validasi pada setiap inputannya. 3 Textbox dibuat sebagai tempat user menginputkan data, 1 textbox untuk menampung hasil dari operasi matematika, 4 button untuk memanggil fungsi javascript berisi operasi matematika yang akan dilakukan dan 1 button lagi untuk mengosongkan seluruh isian.

Source code dipisahkan dalam 2 bagian, untuk lebih menjelaskan kode javascript sebagai bagian algoritma untuk membuat fungsi rumus hitungan serta validasi input-nya, serta form untuk bagian implementasi atau tampilan kepada pengguna.Berikut kode HTML berisi tag untuk membuat textbox dan button yang diperlukan dalam memanggil fungsi javascript:

TUGAS JAVASCRIPT

Silahkan Input Data

Input String

:

Input Integer

:

Input Double

:

Hasil

:

Kode Program 1 Kode HTML form membuat textbox dan buttonPada kode diatas, nama formulir adalah form (name="form"), Isian 1 dengan nama nama (name="nama"), Isian 2 dengan nama x (name="x"), Isian 3 dengan nama y (name=y) dan hasil dengan nama z (name="z"). Sedangkan untuk tombol dengan simbol (+) dengan nama tambah (name="tambah"), tombol dengan simbol (-) dengan nama tambah (name="kurang"), tombol dengan simbol (x) dengan nama tambah (name="kali"), tombol dengan simbol (:) dengan nama tambah (name="bagi") dan satu tombol Clear untuk memberihkan form.Untuk melakukan pemanggilan eksternal javascript kode programny adalah sebagai berikut:

Kode Program 3 Pemanggilan eksternal Javascript src = merupakan lokasi atau tempat file javascript yang akan kita buat Selanjutnya, membuat fungsi javascript untuk validasi input cek_string() untuk mengecek isian 1input tidak boleh kosong, cek_integer() untuk mengecek isian 2 harus bilangan bulat dan input tidak boleh kosong dan cek_double() untuk mengecek isian 3 tidak boleh kososng dan harus angka. Berikut ini adalah kode programnya:function cek_string(){

var input = document.form.nama.value;

var val = true;

if (input != "") {

val = true;

document.getElementById("alert").innerHTML = "";

} else {

document.getElementById("alert").innerHTML = "Input tidak boleh kosong!";

val = false;

}

return val;

}

function cek_integer() {

var val = true;

var input = document.form.x.value;

if (input != "") { //kalau inputnya tidak kosong proses berlanjut

if (!isNaN(input)) { // isNaN = is Not a Number

var bulat = Math.round(input); // Math.random untuk membulatkan inputan angka, 1-4 dibulatkan ke bawah

var selisih = input - bulat; //selisih antara input dengan hasil pembulatan angka itu sendiri

// contoh 3.5 = 4 ----------- selisih = 3.5 - 4 = -0.5

if ((selisih == 0) && (input > 0)) { //bilangan bulat hasil selisih harus 0 dan input tidak boleh -(mines)

document.getElementById("alert1").innerHTML = "";

val = true;

} else {

document.getElementById("alert1").innerHTML = "Bukan bilangan bulat!";

val = false;

}

} else {

document.getElementById("alert1").innerHTML = "Bukan angka!";

val = false;

}

} else {

document.getElementById("alert1").innerHTML = "Input tidak boleh Kosong";

val = false;

}

return val;

}

function cek_double() {

var val = true;

var input = document.form.y.value;

if (input != "") {

if (!isNaN(input)) {


val = true;

} else {

document.getElementById("alert2").innerHTML = "Bukan angka!";

val = false;

}

} else {

document.getElementById("alert2").innerHTML = "Data tidak boleh kosong";

val = false;

}

return val;

}

Kode Program 3 Javascript untuk validasi inputSelnajutnya membuat javascript untuk fungsi oerasi matematika cektambah(), kurang(), kali(), bagi() yang akan bekerja tombolnya kita klik. onClick merupakan salah satu event javascript, yaitu suatu hal yang akan dilakukan ketika ada aksi dari user. Berikut adalah kode programnya:

function tambah() {

if ((cek_integer() == true) && (cek_double() == true) && (cek_string() == true)) {

if(isNaN(document.form.nama.value)){

var nama = document.form.nama.value;

}else{

var nama = eval(document.form.nama.value);

}

var x = eval(document.form.x.value);

var y = eval(document.form.y.value);

var hasil = nama + x + y;

document.form.z.value = hasil;


} else {

document.form.z.value = "";

document.getElementById("alert3").innerHTML = "Proses tidak dieksekusi.";

}

}

function kurang() {

if ((cek_integer () == true) && (cek_double() == true) && (cek_string() == true)) {


var x = document.form.x.value;

var y = document.form.y.value;

var hasil = nama - x - y;



} else {


document.getElementById("alert3").innerHTML = "Proses tidak dapat dieksekusi.";

}

}

function kali() {





var hasil = nama * x * y;



} else {



}

}

function bagi() {





var hasil =nama / x / y;



} else {



}

}

Kode Program 3 Javascript untuk fungsi operasi matematika

Setelah Form serta Javascript-nya dibuat, maka selanjutnya adalah proses uji coba pada browser. Jika user tidak menginput data maka akan keluar peringatan seperti berikut ini:

Gambar 1 User tidak input dataApabila user menginputkan bukan angka pada integer dan double maka akan keluar peringatan seperti berikut ini:

Gambar 2 User input teks

Apabila user menginput angka decimal atau minus (-) maka akan muncul peringatan seperti berikut ini:

Gambar 3 Input bukan bilangan bulat

Jika masih ada input yang salah maka operasi matematika tidak bisa dilakukan, dan akan muncul peringatan seperti berikut ini:

Gambar 4 Proses tidak diekseskusiJika user sudah mengiput data dengan benar maka proses atau operasi matematika dapat dilakukan, berikut ini contoh hasil operasi penjumlahan

Gambar 5 Hasil operasi penjumlahan

Documents

Tugas Gis 1 (Javascript)