Dibuat Oleh : Zaini Jamathsani

Email : dleader.zaii@gmail.com

MODUL 3 | BASIC JAVASCRIPT

2013
0
MODUL 3 | BASIC JAVASCRIPT

ISI MATERI

1. JavaScript
2. Basic JavaScript
MODUL 3 | BASIC JAVASCRIPT

1. JavaScript
JavaScript merupakan bahasa pemrograman client side yang
wajib dimengerti oleh pengembangan web. JavaScript membuat
website yang Anda buat menjadi lebih interaktif. JavaScript
membuat website seakan-akan berinteraksi langsung dengan
pengguna website.

JavaScript merupakan bahasa pemrograman yang berjalan di client-slide, yaitu

perangkat lunak browser. Hampir semua peranglak lunak browser saat ini mendukung
JavaScript, seperti Internet Explorer, Mozila FireFox, Google Chrome, Opera dan lain-lain

Berikut adalah keungulan dari JavaScript

1. Ukuran file kecil karena Script dari javascript memiliki ukuran yang kecil sehingga
ketika web yang memiliki javascript ditampilkan di browser maka akses
tampilannya akan lebih cepat dibandingkan ketika browser membuka suatu web
yang memiliki script java. Hal ini juga sangat berkepentingan dengan daya kerja
server. Semakin kecil space suatu web yang disimpan dalam suatu server maka
daya kerja server ketika di browsing oleh user di internet akan tidak terlalu berat,
selain itu sifat javascript client side yang tidak perlu lagi di olah oleh server ketika
browser memanggil web dari sebuah server.
2. Mudah untuk dipelajari karena Javascript merupakan bahasa semi pemograman
yang merupakan gabungan antara bahasa pemograman java dengan bahasa kode
HTML sehingga disebut bahasa hybrid. Walaupun javascript merupakan turunan
dari java namun javascript tidak memiliki aturan yang serumit java.

1
MODUL 3 | BASIC JAVASCRIPT

3. Terbuka karena Javascript tidak terikat oleh hardware maupun software tertentu
bahkan system operasi seperti windows maupun unix. Karena ia bersifat terbuka, maka ia
dapat dibuat maupun di baca di semua jenis komputer.

Berikut adalah kekurangan dari JavaScript

1. Penggunaan JavaScirpt dapat dicopy langsung melalui web browser, sehingga

setiap orang dapat menggunakan program JavaScript yang telah anda kita buat.

Ciri-ciri JavaScript

1. Extension file berupa .js contoh : app.js

2. Case sensitive
3. Tiap akhir perintah diakhiri dengan tanda ;
4. Diawali dengan tanda <script type=text/javascript> atau <script> dan diakhiri
dengan tanda </script>
5. Saling berkaitan dengan script HTML

2
MODUL 3 | BASIC JAVASCRIPT

1. Basic JavaScirpt

Untuk Basic JavaScript akan menjelaskan diantaranya sebagai berikut

latihan_01.html

latihan_02.html

3
MODUL 3 | BASIC JAVASCRIPT

JavaScript sebagai File External

Jika ingin menjalankan script JavaScript yang sama di banyak halaman, gunakan JavaScript sebagai file
independen.

Simpan file tersebut dengan ekstensi .js

latihan_03.js

latihan_03.html

4
MODUL 3 | BASIC JAVASCRIPT

Variable

1. Aturan penulisan variable

a. Nama variable bersifat Case Sensitive
b. Harus dimulai dengan huruf atau karakter underscore
2. Deklarasi variable dengan statement var
a. var nama ;
b. var nama = Bimboo ;
3. Variable yang tidak dideklarasikan
a. nama = Bimboo ;
b. x = y + 5 ;

latihan_04.html

5
MODUL 3 | BASIC JAVASCRIPT

Operator Aritmatika

Operator Assigment

6
MODUL 3 | BASIC JAVASCRIPT

Operator Pembanding

Misalkan nilai x = 5

Operator Logika

Misalkan x = 6 dan y = 3

7
MODUL 3 | BASIC JAVASCRIPT

Pengkodisian

Pada JavaScript terdapat lima macam pengkondisian

1. if (kondisi)
Gunakan statement ini untuk mengeksekusi source code hanya jika satu kondisi bernilai
true

2. if (kondisi1) else (kondisi2)

Gunakan statement ini untuk mengeksekusi source code jika satu kondisi bernilai true
dan kondisi lain bernilai false

3. if (kondisi1) else if (kondisi2) else (kondisi3)

Gunakan statement ini untuk memilih satu dari banyak kondisi

4. switch
Gunakan statement ini untuk memilih satu dari banyak kondisi

5. Ternary
Menggunakan ? dan : karena merupakan model penyederhanaan if..else

8
MODUL 3 | BASIC JAVASCRIPT

latihan_05.html

latihan_06.html

9
MODUL 3 | BASIC JAVASCRIPT

latihan_07.html

latihan_08.html

10
MODUL 3 | BASIC JAVASCRIPT

Pengulangan

Pada JavaScript, ada tiga macam pengulangan yaitu :

1. FOR, pengulangan sebanyak jumlah yang ditentukan

2. WHILE, pengulangan sampai bertemu kondisi true

3. DO WHILE, pengulangan yang dilakukan terlebih dahulu sebelum kondisi true

latihan_09.html

latihan_10.html

11
MODUL 3 | BASIC JAVASCRIPT

latihan_11.html

12
MODUL 3 | BASIC JAVASCRIPT

Latihan Sebelum Mengerjakan Studi Kasus, Silahkan Copikan Script di bawah ini

latihan_studi_kasus.html
<html>
<head>
<title>Latihan Studi Kasus</title>
</head>
<body>
Angka 1 : <input type="text" id="angka1"> <br>
Angka 2 : <input type="text" id="angka2"> <br> <br>
<input type="button" value="+" onClick="fungsi('+')"> <br> <br> <br>
<b id="hasil">
<script type="text/javascript">
function fungsi(operator){
var angka1 = document.getElementById("angka1").value;
var angka2 = document.getElementById("angka2").value;
var tampung = "" ;
var temp = "" ;
if(operator == "+"){
temp = "Penjumlahan" ;
tampung = parseInt(angka1) + parseInt(angka2) ;
}
document.getElementById("hasil").innerHTML = "Hasil Dari
"+temp+" adalah "+tampung;
}
</script>
</b>
</body>
</html>

13
MODUL 3 | BASIC JAVASCRIPT

Studi Kasus
1. Berikan Fungsi kurang (-), bagi (/) dan perkalian (*) pada latihan sebelum nya, seperti
gambar di bawah ini

2. Berikan validasi ketika

a. Angka 1 dan Angka 2 kosong, seperti ini

b. Angka 1 kosong seperti ini

14
MODUL 3 | BASIC JAVASCRIPT

c. Angka 2 kosong seperti ini

3. Berikan 1 button untuk Clear text maupun hasil, seperti di bawah ini

Setelah Kita klik button kosongkan maka harus seperti di bawah ini

Kembali seperti semula

15