Pemrograman Web dan Perangkat Bergerak

Client Side Scripting Pada Halaman Web Interaktif

Oleh : Oya Suryana, M.Kom.

A. Pengertian Client Side Scripting
● Client side scripting merupakan salah satu jenis bahasa pemrograman web yang
proses pengolahannya dilakukan di sisi client.

● Proses pengolahannya dilakukan oleh library didalam setiap web browser sebagai
client-nya.

● Library ini juga disebut web engine yang dimiliki setiap web browser.

● Javascript merupakan salah satu jenis client side scripting.

● Javascript berbeda dengan Java.

B. Sejarah Javascript
● JavaScript dibuat selama sepuluh hari oleh Brendan Eich, seorang karyawan
Netscape pada September 1995
● Awalnya bahasa pemrograman ini disebut Mocha, kemudian diganti ke Mona, lalu
LiveScript sebelum akhirnya resmi menyandang nama JavaScript.
● Pada tahun 1996, JavaScript secara resmi disebut sebagai ECMAScript,
ECMAScript 2 diluncurkan pada tahun 1998 dan ECMAScript 3 diperkenalkan pada
tahun 1999, namun akhirnya penamaan lebih familiar ke Javascript
● Penamaan versi javascript menggunakan penamaan ES1, ES2, ES3, ES5 dan ES6
● Sejak tahun 2016 penamaan berubah menjadi ECMAScript 2016
dan 2017
C. Javascript Event
● Javascript merupakan bahasa pemrograman yang membutuhkan trigger / pemicu.
● Script javascript akan dijalankan jika terjadi pemicu.
● Pemicunya yaitu berupa event
● Berdasarkan kejadiannya, event di javascript terdiri dari :
○ OnLoad
○ OnClick
○ OnChange
○ OnMouseOver
○ OnMouseOut
D. Metode Penyisipan JavaScript
● Javascript pada dasarnya akan disisipkan di dalam dokumen HTML
● Untuk itu diperlukan metode penyisipan ke dalam dokumen HTML
● Terdapat 3 (tiga) metode penyisipan JavaScript ke dalam dokumen HTML
○ Inline Script
○ Internal Script
○ External Script
D.1. Inline Script
Menyisipkan javascript dengan cara inline yaitu
disisipkan pada tag html yang dengan memberikan
perintah pada atribut event javascript. Cara ini cocok
hanya untuk menjalankan sedikit statement javascript.

Contoh :

1. Buat file InlineScript.html simpan di

c:\xampp\htdocs\KD8
2. Jalankan web server
3. Jalankan browser, akses URL
http://localhost/KD8/InlineScript.html
D.2. Internal Script
Inline script tidak dianjurkan untuk
menjalankan banyak statement javascript,
jika statement makin banyak maka cara
terbaik adalah dengan menggunakan
internal script yaitu dengan cara :

a. Mengetik statement javascript

diantara tag pembuka <script> dan
tag penutup </script>
b. Tag <script> tersebut bisa disimpan
section head atau body html,
baiknya disimpan di paling akhir
sebelum penutup tag </body>.
D.3. External Script #1
Apabila jumlah baris scriptnya banyak maka file html menjadi membengkak jumlah baris program
begitupula ukuran filenya, untuk itu sebaiknya digunakan external script. Adapun ketentuannya :

1. Buat file tersendiri dengan extension *.js

2. Sisipkan ke dokumen html dengan syntax :

<script src=”nama_file.js”></script>
D.3. External Script #2
E. Javascript Output
Metode untuk menampilkan output di javascript :

1. Menggunakan alert()
2. Menggunakan statement document.write()
3. Menggunakan statement innerHTML
4. Menggunakan console.log()
F. Statement Javascript
Sebagai bahasa pemrograman maka javascript merupakan sekumpulan
statement yang berdiri sendiri atau kumpulan statement yang membentuk
function atau class, setiap statement dalam javascript harus diakhiri dengan
menutupnya menggunakan karakter titik koma (;), contoh statement dalam
javascript :

document.getElementById(‘LuasLingkaran’).innerHTML= 10;
G. Komentar
Untuk membuat komentar di javascript
terdapat dua cara yaitu :

1. Menggunakan karakter // (double

slash)
2. Menggunakan tag pembuka /* dan
tag penutup */
H. Variabel #1
1. Variabel adalah suatu tempat dalam memori komputer untuk menyimpan
sebuah nilai dengan tipe data tertentu.
2. Untuk mendefinisikan variabel dalam javascript digunakan keyword var.
sebagai contoh berikut cara mendefinisikan variabel :

var NamaSiswa; /*camelcaps style*/

var panjang;
var luas2;
var lebar;
H. Variabel #2
Untuk membuat nama variabel berikut aturan pembuatan nama variabel :

1. Nama variabel tidak boleh menggunakan spasi.

2. Nama variabel tidak boleh menggunakan operator matematika seperti +
(tambah), - (kurang/minus), / (pembagi), * (perkalian), % (modulus), = (sama
dengan)
3. Nama variabel tidak boleh seluruhnya angka
4. Nama variabel tidak boleh diawali dengan angka
I. Operator Assignment
Operator assignment digunakan untuk mengisi nilai terhadap sebuah variabel,
dalam javascript operator assignment menggunakan karakter sama dengan ( = ).
Sebagai contoh, variabel-variabel diatas yang telah dibuat kita isi dengan nilai,
sehingga scriptnya menjadi :

var namaSiswa = ’Abiq Sabiqul Khoir’;

var panjang = 10.5;
var luas = 4.75 ;
var lebar = panjang * lebar;
J. Operator Aritmatika
Operator aritmatika digunakan untuk melakukan proses perhitungan pada tipe
data numeric, berikut adalah operator aritmatika pada javascript :

Operator Simbol Contoh

Penjumlahan + 3+2=5

Pengurangan - 10 - 2 = 8

Perkalian * 3*2=6

Pembagian / 12 / 4 = 3

Sisa Hasil Bagi % 3%2=1

K. Operator Penggabungan
Operator penggabungan merupakan
simbol yang digunakan untuk
menggabungkan karakter, didalam bahasa
pemrograman javascript operator
penggabungan yang digunakan adalah
tanda plus (+),
L. Fungsi
Fungsi di JavaScript merupakan sekumpulan blok script yang dibuat untuk
melakukan tugas tertentu. Fungsi JavaScript dijalankan ketika terjadi event (ingat
event apa saja yang ada di JS ??? lihat slide sebelumnya !).

Untuk membuat / mendefinisikan function javascript, berikut adalah syntax

umumnya :

function nama_fungsi ([parameter_1, …, parameter_n]){

// block script

}
L.1. Macam-macam Fungsi
Macam - macam fungsi :

a. Fungsi tanpa nilai balik tanpa parameter

b. Fungsi tanpa nilai balik dengan input parameter
c. Fungsi dengan nilai balik tanpa parameter
d. Fungsi dengan nilai balik dan dengan parameter
L.2. Fungsi - Tanpa nilai balik tanpa parameter
1. Tanpa nilai balik adalah fungsi dimana
hasil dari fungsi tersebut langsung
dikirim ke target output.
2. Tanpa input parameter artinya nilai
variabel dikirim langsung oleh element
input

n !
k a
kte
Pra
L.3. Fungsi - Tanpa nilai balik dengan input parameter nd
i n
an
gk ipt
cr
Ba an s ya !
1. Tanpa nilai balik adalah fungsi dimana ng n
de elum
se b
hasil dari fungsi tersebut langsung
dikirim ke target output.
2. Dengan input parameter artinya
menerima input variabel

n !
k a
kte
Pra
L.4. Fungsi - Dengan nilai balik tanpa parameter nd
in
an
gk ipt
cr
Ba an s ya !
n g n
de elum
1. Dengan nilai balik adalah fungsi se b

dimana hasil dari fungsi tersebut

disimpan dalam nilai balik return.
2. Tanpa input parameter artinya nilai
variabel dikirim langsung oleh element
input

n !
k a
kte
Pra
L.5. Fungsi - Dengan nilai balik dan dengan parameter nd
i n
an
gk ipt
cr
Ba an s ya !
n g n
de elum
1. Dengan nilai balik adalah fungsi dimana se b

hasil dari fungsi tersebut disimpan dalam

nilai balik return.
2. Dengan input parameter artinya fungsi
menerima input variabel

n !
kteka
Pra
M. Struktur Control IF
1. Sebagaimana pada umumnya bahasa
pemrograman menyediakan statement
conditions / percabangan
2. Salah satu percabangan dalam javascript
adalah IF
3. Percabangan digunakan untuk pengambilan
keputusan ke alur program berikutnya
4. Flow diagram untuk IF bisa anda perhatikan
pada gambar disamping
M.1. Jenis-Jenis IF
Berdasarkan kondisinya Struktur Control Percabangan IF dibagi menjadi :

1. IF dengan satu kondisi

2. IF dengan dua kondisi
3. IF dengan n kondisi
4. IF bersarang (Nested IF)
M.2. IF Dengan 1 Kondisi n!
ka
kte
Pra
1. If satu kondisi hanya memproses jika
pengujian bernilai true atau false.
2. Sebagai contoh jika nilainya diatas 75
maka menampilkan pesan Lulus jika di
bawah 75 tidak menampilkan pesan
apapun

ai
t i nil 5 !
n 7
Ga wah ya ?
a n
dib hasil
a
ap
M.3. IF Dengan 2 Kondisi kan!
kte
Pra

if dua kondisi merupakan kondisi

dimana jika salah satu pernyataan tidak
terpenuhi maka akan menjalankan
pernyataan lain.

ai
t i nil 5 !
n 7
Ga wah ya ?
a n
dib hasil
a
ap
 &
M.4. IF Dengan n Kondisi kt e k an n
ka
Pra nding cript
Ba gan s ya !
n n
de elum
Berbeda dengan IF 2 kondisi IF n kondisi seb
untuk kasus banyak kondisi lebih dari 2.

ah
i b aw as
d at
n ilai 5, di h 0,
nt i s 7 a
Ga diata dibaw a ?
y
75, dan sil n
0 0
1 pa h a
a
 &
k an n
M.5. IF Bersarang (Nested IF) kt e ka
Pra nding cript
Ba gan s ya !
n n
de elum
Nested IF adalah adanya pengecekan kondisi seb

secara berlevel artinya terdapat IF didalam IF

n
ga
d en gka
ai n
t i nil leh a ,
n o f !
Ga aja b huru ilnya
a s h s
ap bole an ha
tik
e rha
p
 &
k an n
N. Struktur Control SWITCH … CASE kt e ka
Pra nding cript
Ba gan s ya !
n n
de elum
Selain IF struktur control Percabangan juga bisa seb
menggunakan SWITCH … CASE. Berbeda
dengan IF, SWITCH tidak memiliki banyak
bentuk.

ai
t i nil ruf
n u
Ga an H
n g .C
de A s.d
O. Struktur Control Perulangan FOR
1. Perulangan atau looping dikenal juga dalam bahasa pemrograman javascript.
2. Perulangan yang pertama adalah perulangan FOR
3. Adapun syntaxnya adalah sebagai berikut :

for (pernyataan 1; pernyataan 2; pernyataan 3) {

// blok kode yang akan dieksekusi
// selama looping berjalan
}
P. Contoh Struktur Control Perulangan FOR

!
kan
ra kte
P
Q. Struktur Control Perulangan WHILE
1. Perulangan yang kedua adalah perulangan WHILE
2. Adapun syntaxnya adalah sebagai berikut :

while (condition) {
// blok kode yang akan di eksekusi
}
R. Contoh Struktur Control Perulangan WHILE

!
ekan
Prakt
S. Studi Kasus
Pada bagian studi kasus akan diberikan contoh membuat aplikasi sederhana yaitu :

1. Aplikasi
kalkulator
2. Image Slider

Script lengkap bisa

anda praktekkan di
bahan bacaan KD 8,
silahkan download
dan praktekan !
T. Penutup
Selamat anda sudah memahami penerapan client side scripting Javascript pada
halaman web interaktif, sehingga halaman web anda menjadi lebih hidup dan
dinamis.

Untuk Contoh lainnya silahkan ikuti praktek pada bahan bacaan KD 8 di aplikasi
pembelajaran jarak jauh SMK N 2 Kuningan.

Terima kasih