Client-side Programming adalah sebuah pemprograman yang prosesnya terjadi di browser client.
Contoh Client-side Programming adalah HTML, CSS, dan JavaScript.
JavaScript dibuat oleh Netscape Communications Corporation. Ekstensinya bernama .js dan dapat dikombinasikan dengan HTML tags. JavaScript membuat website menjadi lebih dinamis dan interaktif (contoh: validasi form, kalkulasi angka, dan foto animasi).
Javascript dapat dibuat di 2 tempat, internal(didalam HTML) dan eksternal(file .js sendiri).
Contoh internal:
…<body>
<script type=”text/javascript“>
document.write(“<p>My JavaScript Text</p>”);
</script>
</body>…
Contoh eksternal:
<script type=”text/javascript” src=”filename.js”></script>
Aturan syntax dalam Javascript
- Statements adalah unit dasar dalam program JavaScript
- Satu statement berisikan koding untuk melakukan satu aksi
- Semicolon(;) menandakan berakhirnya suatu statement
- Apabila ingin menggabungkan lebih dari satu statement, wajib menggunakan semicolon(;)
Aturan variabel dalam JavaScript
- Dapat berisi huruf, digit 0-9, dan garis bawah(_)
- Tidak boleh ada spasi dan tanda baca
- Karakter pertama dalam variabel harus huruf atau garis bawah
- case sensitive
- harus dalam 1 line
Contoh pemakaian variabel: LastInvoiceNumber, temp1, a, _var39
Build-in object dalam JavaScript dapat berupa:
- String
- Array
- Date
- Math
- Window
List String Object Method:
Contoh if statement dalam Javascript:
<body>
<script type=”text/javascript”>
var x=””;
var time=new Date().getHours();
if (time<10) {
x=”Good morning”;
} else if (time<20){
x=”Good day”;
} else {
x=”Good evening”;
}
document.write(x);
</script>
</body>
Contoh looping dalam Javascript:
for (i=0; i<10; i++) {
document.write(“This is line “ + i + “<br />”);
}
Contoh string object:
…<body>
<h1>String Test</h1>
<script type=”text/javascript”>
test1 = “This is a test. “;
test2 = “This is only a test.”;
both = test1 + test2;
alert(both);
</script>
</body>….
Parsing dalam Javascript ada 2:
- parseInt() = konversi string menjadi integer
- parseFloat() = konversi string menjadi float
Contoh parsing:
stringvar = “30 angry polar bears“;
numvar = parseInt(stringvar);
document.write(numvar);
Array adalah kumpulan data yang dapat dianggap sebagai satu unit.
Contoh pemanggilan array:
scores = new Array(2);
scores[0]=39;
scores[1]=40;
Besar sebuah array dapat dilihat saat array tersebut dibuat. dari contoh diatas dapat dilihat bahwa besar arraynya adalah 2.
Date Object
setDate() mengatur tanggal
setMonth() mengatur bulan [value dari 0 to 11, january =>0]
setFullYear() mengatur tahun
setTime() mengatur waktu dan tanggal dengan menspesifikasikan jumlah milisecond sejak 1 january 1970
setHours(), setMinutes(), dan setSeconds() mengatur waktu sesuai dengan penamaanya
Math Object
Merupakan build in javascript object yang mengandung konstanta dan fungsi matematika.
Contoh:
Pembulatan
Math.ceil() = membulatkan angka keatas
Math.floor() = membulatkan angka kebawah
Math.round() = membulatkan angka terdekat
Random
function rand(num) {
return Math.floor(Math.random() * num) + 1;
}
Math.sin(),Math.cos(), and Math.tan()
<script type=”text/javascript“>
document.write(Math.sin(90)+”<br/>”);
document.write(Math.cos(30)+”<br/>”);
document.write(Math.tan(60));
</script>
Function adalah kumpulan statements javascript yang bisa di perlakukan sebagai single unit.
Contoh Function:
Tugas Case Kelas Form Registrasi:
<html>
<head>
<title>Case</title>
<style type=”text/css”>
h1{
text-align: center;
}
.center{
text-align: right;
}
input[type=”text”], input[type=”number”], textarea{
border: 1px solid blue;
}
body{
background-color: #9393BF;
}
input[type=”text”]{
width: 92vw;
overflow: visible;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form method=”post” action=”#”>
<table>
<tr>
<td><label for=”name”>Nama</label></td>
<td><input type=”text” id=”name” placeholder=”Input Nama
Disini”></td>
</tr>
<tr>
<td><label for=”alamat”>Alamat</label></td>
<td><textarea id=”alamat”></textarea></td>
</tr>
<tr>
<td><label for=”telp”>Telp</label></td>
<td><input type=”number” id=”telp”></td>
</tr>
<tr>
<td><label>Gender</label></td>
<td><input type=”radio” value=”rbMale” name=”gender”
id=”rbMale”><label for=”rbMale”>Male</label>
<input type=”radio” value=”rbFemale” name=”gender”
id=”rbFemale”><label for=”rbFemale”>Female</label></td>
</tr>
<tr class=”center”>
<td colspan=”2″><input type=”submit” value=”submit”
onclick=”fnValidate(); return false;”></td>
</tr>
</table>
</form>
<script type=”text/javascript”>
function fnValidate () {
var nama = document.getElementById(‘name’).value;
var alamat = document.getElementById(‘alamat’).value;
var telp = document.getElementById(‘telp’).value;
var genderMale = document.getElementById(‘rbMale’);
var genderFemale = document.getElementById(‘rbFemale’);
if(nama.trim()==null || nama.trim()==”) window.alert(‘Nama Harus
diisi’);
else if(alamat.trim()==null || alamat.trim()==”) window.alert(‘Alamat
Harus diisi’);
else if(alamat.trim().toLowerCase().indexOf(‘jalan’)==-1)
window.alert(‘Alamat Harus diawali dengan kata \’jalan\”);
else if(telp==null || telp==”) window.alert(‘Telp Harus diisi’);
else if(genderMale.checked==false && genderFemale.checked==false)
window.alert(‘Gender Harus dipilih’);
else window.alert(‘Selesai’);
}
</script>
</body>
</html>
